/* styles.css */

/* ==========================================================================
   FONTS - self-hosted Fraunces + Manrope, subset to latin / latin-ext
   ========================================================================== */

/* ---------- Fraunces (headings) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Manrope (body / UI) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  --ivory: #F5F0E8;
  --ivory-2: #EFE7D9;
  --terracotta: #B65F4A;
  /* button fill only: ivory on --terracotta is 3.92:1, which fails AA at
     the button's 12.8px. This clears it at 4.66:1 and reads the same. */
  --terracotta-btn: #A85340;
  --terracotta-deep: #8F4638;
  --sand: #D9C8B2;
  --charcoal: #221F1C;
  --charcoal-2: #2C2825;
  --brass: #A58A61;
  /* --brass fails contrast on the ivory grounds; this is its ink-side twin */
  --brass-ink: #7D6238;
  --dusk: #1C2B2E;
  --dusk-2: #26383C;
  --cream-text: #F5F0E8;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Manrope', sans-serif;
  background: var(--ivory);
  color: var(--charcoal);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--terracotta);
  color: var(--ivory);
}

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

/* The skip-link in header.php. Clipped rather than display:none so screen
   readers still reach it; visible only on keyboard focus. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.screen-reader-text:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 14px 24px;
  clip-path: none;
  background: var(--terracotta);
  color: var(--ivory);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
}

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

h1,
h2,
h3,
h4 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-ink);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 18px;
}

.eyebrow.light {
  color: var(--sand);
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
}

section {
  position: relative;
}

/* Anchor targets sit under the fixed header without this. The journeys page
   leans on it hardest - its filter pills are the only way around the page. */
section[id],
.je[id],
.story-text span[id],
#primary {
  scroll-margin-top: 110px;
}

/* reveal-on-scroll
   Scoped to .js (set by the inline snippet in header.php) on purpose: these
   elements start at opacity:0 and only main.js can bring them back. Without
   the guard, a JS error or a blocked script leaves the whole journeys page
   body invisible to readers and to anything that renders the page. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: .12s;
}

.reveal-delay-2 {
  transition-delay: .24s;
}

.reveal-delay-3 {
  transition-delay: .36s;
}

/* ---------- HEADER ---------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 30px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 90px;
  transition: padding .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease);
  mix-blend-mode: normal;
}

header.scrolled {
  padding: 24px 48px;
  background: rgba(245, 240, 232, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(34, 31, 28, 0.08);
}

.logo img {
  height: auto;
  width: 11.6rem;
}

/* .logo {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--ivory);
  transition: color .5s var(--ease);
  text-align: center;
  grid-column: 2;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

header.scrolled .logo {
  color: var(--charcoal);
}

.logo em {
  font-style: italic;
  color: var(--terracotta);
}

.logo-line {
  height: 1px;
  width: 46px;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
  transition: opacity .5s var(--ease);
} */

nav.nav-left {
  grid-column: 1;
  justify-self: end;
}

nav.nav-right {
  grid-column: 3;
  justify-self: start;
}

nav {
  display: flex;
  align-items: center;
  gap: 90px;
}

.nav-links {
  display: flex;
  gap: 34px;
}

.nav-links a {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory);
  font-weight: 500;
  position: relative;
  transition: color .5s var(--ease);
}

header.scrolled .nav-links a {
  color: var(--charcoal);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--terracotta);
  transition: width .35s var(--ease);
}

.nav-links a:hover::after {
  width: 100%;
}

.burger {
  /* a real <button>, so its chrome has to be reset */
  background: none;
  border: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1100;
  grid-column: 3;
  justify-self: end;
}

.burger span {
  width: 26px;
  height: 1.5px;
  background: var(--ivory);
  transition: .3s;
}

header.scrolled .burger span {
  background: var(--charcoal);
}

/* open state: the three bars fold into a cross.
   6.5px = half the stack height (3×1.5px + 2×5px gap) minus half a bar. */
.burger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.burger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* the menu behind it is always charcoal, so keep the cross ivory even when the
   header has its scrolled (light) background */
header.scrolled .burger.is-open span {
  background: var(--ivory);
}


.hero-sub {
  max-width: 480px;
  margin-top: 26px;
  font-size: 1.05rem;
  color: rgba(245, 240, 232, 0.86);
  font-weight: 300;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 17px 30px;
  background: var(--terracotta-btn);
  color: var(--ivory);
  border: 1px solid var(--terracotta-btn);
  border-radius: 2px;
  transition: all .4s var(--ease);
}

.btn:hover {
  background: transparent;
  color: var(--ivory);
  border-color: var(--ivory);
  letter-spacing: 0.16em;
}

.btn.outline {
  background: transparent;
  border-color: rgba(245, 240, 232, 0.5);
}

.btn.outline:hover {
  background: var(--ivory);
  color: var(--charcoal);
  border-color: var(--ivory);
}

/* icon riding inside a .btn — the one inside .link-arrow is .arrow-icon */
.btn-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn.dark {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

.btn.dark:hover {
  background: transparent;
  color: var(--charcoal);
}

@keyframes scroll-line {
  to {
    top: 100%;
  }
}

/* ---------- INTRO ---------- */
.intro {
  padding: 170px 0 150px;
  background: var(--ivory);
}

.intro-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.intro h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 300;
  color: var(--charcoal-2);
}

.intro p {
  margin-top: 34px;
  font-size: 1.08rem;
  color: #5c5650;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

.intro-divider {
  width: 56px;
  height: 1px;
  background: var(--terracotta);
  margin: 44px auto 0;
}


/* ---------- SIGNATURE JOURNEYS ---------- */
.journeys {
  padding: 0;
  background: var(--ivory);
}

.journeys-head {
  margin-bottom: 70px;
}

.journeys-head h2 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 500;
  max-width: 520px;
}

.journeys-head p {
  max-width: 340px;
  font-size: 0.95rem;
  color: #6b655d;
  font-weight: 300;
  margin-top: 10px;
}

.journey-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(34, 31, 28, 0.12);
}

.journey-row:last-child {
  border-bottom: 1px solid rgba(34, 31, 28, 0.12);
}

.journey-row.reverse {
  grid-template-columns: 1fr 1fr;
}

.journey-img {
  height: 460px;
  position: relative;
  overflow: hidden;
}

.journey-img .ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 26px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(245, 240, 232, 0.75);
  line-height: 1.5;
}

/* Photo slots. Every one sits on top of its .ph-* gradient, so a missing or
   still-loading image degrades to the original placeholder colour. */
.journey-img .journey-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.journey-content {
  padding: 60px 60px 60px 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.journey-num {
  font-size: 0.75rem;
  color: var(--brass);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.journey-content h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: 500;
  margin-bottom: 8px;
}

.journey-content .tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--terracotta);
  font-size: 1.05rem;
  margin-bottom: 22px;
  display: block;
}

.journey-content p.desc {
  font-size: 0.96rem;
  color: #6b655d;
  font-weight: 300;
  max-width: 420px;
  margin-bottom: 30px;
}

.link-arrow {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--charcoal-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  width: fit-content;
}

.link-arrow .arrow-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}

.link-arrow:hover .arrow-icon {
  transform: translateX(6px);
}

/* image placeholder textures */
.ph-terracotta {
  background: linear-gradient(155deg, #9c5a44, #c17654 60%, #7c4436);
}

.ph-dusk {
  background: linear-gradient(155deg, #243336, #12191b 70%);
}

.ph-sand {
  background: linear-gradient(155deg, #cbb693, #a68a63);
}

.ph-charcoal {
  background: linear-gradient(155deg, #3a3530, #1a1815);
}

.ph-clay {
  background: linear-gradient(155deg, #8a5a44, #5c3a2c);
}

.ph-stone {
  background: linear-gradient(155deg, #b8ab94, #8f8168);
}

/* ---------- TERRACOTTA MOMENT ---------- */
.moment {
  background: var(--terracotta-deep);
  color: var(--ivory);
  padding: 210px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.arch-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 780px);
  height: min(70vw, 780px);
  opacity: 0.16;
  pointer-events: none;
}

.arch-wrap svg path {
  fill: none;
  stroke: var(--ivory);
  stroke-width: 1.2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 2.4s var(--ease);
}

.moment.is-in .arch-wrap svg path {
  stroke-dashoffset: 0;
}

.moment-text {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 0 40px;
}

.moment h2 {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
}

.moment .eyebrow {
  color: var(--ivory-2);
  margin-bottom: 30px;
}

/* ---------- TEXTILE STUDIO ---------- */
.textile {
  background: var(--charcoal);
  color: var(--ivory);
  padding: 150px 0;
}

.textile-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.textile h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 300;
  margin-bottom: 26px;
}

.textile p {
  color: rgba(245, 240, 232, 0.7);
  font-weight: 300;
  font-size: 1.02rem;
  max-width: 460px;
  margin-bottom: 36px;
}

.textile-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.textile-media .ph-block {
  height: 220px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}

.textile-media .ph-block.tall {
  height: 460px;
  grid-row: span 2;
}

.ph-block .block-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ph-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 232, 0.6);
  line-height: 1.5;
}

/* ---------- PEOPLE ---------- */
.people {
  background: var(--dusk);
  color: var(--ivory);
  padding: 160px 0;
}

.people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.people h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 300;
  margin-bottom: 28px;
}

.people p {
  color: rgba(245, 240, 232, 0.72);
  font-weight: 300;
  font-size: 1.02rem;
  margin-bottom: 22px;
  max-width: 480px;
}

.people p.people-signee {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--brass);
  font-size: 1.02rem;
  font-weight: 400;
  margin-bottom: 0;
}

.people p.people-tagline {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ivory);
  margin-top: 36px;
  max-width: none;
}

.people p.people-tagline em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.founders-row {
  display: flex;
  gap: 40px;
  margin-top: 44px;
}

.founder {
  flex: 1;
}

.founder .ph {
  height: 240px;
  margin-bottom: 18px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.founder .founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.founder h3 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.founder span {
  font-size: 0.78rem;
  color: var(--sand);
  letter-spacing: 0.04em;
}

.people-portrait {
  height: 560px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}

.people-portrait-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* drop an <img> in here to give a testimonial an author photo */
.test-meta .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- STORIES ---------- */
.stories {
  padding: 160px 0;
  background: var(--ivory);
}

.stories-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 70px;
  flex-wrap: wrap;
  gap: 20px;
}

.stories-head h2 {
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 300;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.stories-card .ph {
  height: 320px;
  margin-bottom: 22px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.stories-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(245, 240, 232, 0.9);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  transition: background-color .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease);
}

.play-badge:hover {
  background: var(--ivory);
  transform: translate(-50%, -50%) scale(1.08);
}

.play-badge svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.play-badge .icon-play {
  margin-left: 3px;
}

.play-badge .icon-pause {
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* while a clip runs, the badge steps back and turns into a pause control */
.stories-card .ph.is-playing .play-badge {
  opacity: 0;
}

.stories-card .ph.is-playing:hover .play-badge {
  opacity: 1;
}

.stories-card .ph.is-playing .play-badge .icon-play {
  display: none;
}

.stories-card .ph.is-playing .play-badge .icon-pause {
  display: block;
}

/* no <source> on the video = nothing to play, so don't show a dead button */
.stories-card .ph.no-video .play-badge {
  display: none;
}

.stories-cat {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}

.stories-card h3 {
  font-size: 1.28rem;
  font-weight: 400;
  margin-bottom: 10px;
}

.stories-card p {
  font-size: 0.9rem;
  color: #6b655d;
  font-weight: 300;
}

/* ---------- TESTIMONIALS ---------- */
.testimonials {
  padding: 50px 0 60px;
  background: var(--sand);
}

.test-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* NB: no `scroll-snap-type` and no `scroll-behavior:smooth` here on purpose.
   `mandatory` snapping made Chrome re-snap the track back to the first card, so the
   arrows appeared dead; the arrows now animate scrollLeft themselves (see main.js),
   which also keeps them working where the browser ignores smooth scrolling. */
.test-track {
  margin-top: 26px;
  display: flex;
  gap: 50px;
  overflow-x: auto;
  padding-bottom: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.test-track::-webkit-scrollbar {
  display: none;
}

.test-card {
  flex: 0 0 calc(33.333% - 34px);
}

.test-nav {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s var(--ease);
}

.test-nav:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.test-nav .nav-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.test-nav[disabled] {
  opacity: 0.28;
  cursor: default;
}

.test-nav[disabled]:hover {
  background: transparent;
  color: var(--charcoal);
}

.test-card .quote-mark {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 3rem;
  color: var(--terracotta);
  line-height: 0.5;
  margin: -10px 0 8px;
  display: block;
}

.test-card p.quote {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--charcoal-2);
  margin-bottom: 26px;
}

.test-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.test-meta .avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--charcoal);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* holds the author's initial (filled in by main.js) unless an <img> is dropped in */
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ivory);
  -webkit-user-select: none;
  user-select: none;
}

.test-meta .test-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  color: var(--charcoal);
}

.test-meta span {
  font-size: 0.78rem;
  /* the testimonials band is --sand, so this needs to be darker than the
     labels that sit on ivory */
  color: #524D44;
}

/* ---------- TRUSTED PARTNERS ---------- */
.partners {
  padding: 70px 0;
  background: #fff;
  border-top: 1px solid rgba(34, 31, 28, 0.1);
  border-bottom: 1px solid rgba(34, 31, 28, 0.1);
  text-align: center;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 36px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.partner-logo {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(34, 31, 28, 0.25);
  border-radius: 4px;
  font-size: 0.7rem;
  color: #8a8378;
  letter-spacing: 0.04em;
}

.partner-logo.has-logo {
  border: none;
}

.partner-img {
  height: auto;
  max-width: 100%;
  width: 100px;
  filter: grayscale(1);
  opacity: 0.75;
}

.partner-img.partner-img-tall {
  max-height: 62px;
}

.cert-logo {
  height: 26px;
  width: auto;
  vertical-align: middle;
}

.partners-certs {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
}

/* ---------- FINAL CTA ---------- */
.final-cta {
  background: var(--terracotta-deep);
  color: var(--ivory);
  padding: 170px 0;
}

.cta-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}

.cta-grid h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  font-weight: 300;
}

.cta-grid>div:first-child p {
  margin-top: 26px;
  color: rgba(245, 240, 232, 0.75);
  font-weight: 300;
  max-width: 420px;
  font-size: 1.02rem;
}

/* ==========================================================================
   ENQUIRY FORM  —  every form rule on the site lives in this one block
   ----------------------------------------------------------------------------
   Markup: blocks/final-cta.php. Static HTML, no JavaScript — the form does not
   validate or submit until a form plugin takes it over.

   Its media queries are kept here rather than in responsive.css, so the whole
   form can be read and changed in one place. Nothing outside this block styles
   .form-panel, .form-row, .form-cols or .form-submit.

   For the Forminator port of the same design see Form/forminator-mind-miles.css.
   ========================================================================== */

.form-panel {
  background: var(--ivory);
  color: var(--charcoal);
  padding: 56px 60px;
  border-radius: 6px;
  box-shadow: 0 30px 70px -20px rgba(20, 15, 10, 0.45);
  border-top: 3px solid var(--terracotta);
}

.form-panel .eyebrow {
  color: var(--terracotta-deep);
}

.form-panel .form-intro {
  font-size: 0.95rem;
  color: #7a7266;
  font-weight: 300;
  margin: 14px 0 34px;
  max-width: 420px;
}

.form-row {
  margin-bottom: 26px;
}

.form-row label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a7266;
  margin-bottom: 10px;
  font-weight: 600;
}

.form-row label .req {
  color: var(--terracotta);
  margin-left: 3px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  border: 1px solid rgba(34, 31, 28, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
  padding: 14px 16px;
  font-family: 'Manrope';
  font-size: 0.98rem;
  color: var(--charcoal);
  transition: border-color .3s, box-shadow .3s;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--terracotta);
}

.form-row textarea {
  resize: vertical;
  min-height: 70px;
}

.form-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-submit {
  width: 100%;
  margin-top: 16px;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 19px 30px;
}

/* .btn:hover goes transparent with ivory text, which vanishes on this ivory panel —
   deepen the terracotta instead so the button stays solid. */
.btn.form-submit:hover {
  background: var(--terracotta-deep);
  color: var(--ivory);
}

/* ---------- form, tablet and below ---------- */
@media (max-width: 1024px) {
  .form-cols {
    grid-template-columns: 1fr;
  }
}

/* ---------- form, phone ---------- */
@media (max-width: 767px) {
  .form-panel {
    padding: 30px 24px;
  }
}

/* ===================== end of enquiry form block ========================== */

/* ---------- FOOTER ---------- */
footer {
  background: var(--charcoal);
  color: rgba(245, 240, 232, 0.65);
  padding: 90px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr 1fr;
  gap: 40px;
  padding-bottom: 70px;
  border-bottom: 1px solid rgba(245, 240, 232, 0.12);
}

.footer-logo {
	height: auto;
	width: 14rem;
}

/* .footer-logo {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  color: var(--ivory);
  margin-bottom: 18px;
}

.footer-logo em {
  font-style: italic;
  color: var(--terracotta);
} */

.footer-location {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  margin: 8px 0 14px;
}

footer p.tag {
  font-size: 0.9rem;
  max-width: 220px;
  font-weight: 300;
}

.footer-plain {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: rgba(245, 240, 232, 0.65);
}

.footer-col h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-col a {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: rgba(245, 240, 232, 0.65);
  transition: color .3s;
}

.footer-col a:hover {
  color: var(--ivory);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-credit {
  color: rgba(245, 240, 232, 0.55);
}

.footer-credit a {
  color: rgba(245, 240, 232, 0.78);
  transition: color .3s;
}

.footer-credit a:hover {
  color: var(--ivory);
}

/* the heart is the only warm note down here, so it carries the accent */
.footer-credit-heart {
  color: var(--terracotta);
  font-style: normal;
  margin: 0 1px;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-legal a {
  color: rgba(245, 240, 232, 0.65);
  transition: color .3s;
}

.footer-legal a:hover {
  color: var(--ivory);
}

.footer-legal-sep {
  color: rgba(245, 240, 232, 0.35);
}

/* ---------- FLOATING ACTIONS ---------- */
/* z-index sits below .mobile-nav (999) so the opaque menu covers the buttons when open */
.floating-actions {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 990;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}

.float-btn {
  position: relative;
  width: 54px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(34, 31, 28, 0.16);
  background: rgba(245, 240, 232, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--charcoal);
  box-shadow: 0 12px 30px rgba(34, 31, 28, 0.16);
  transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease),
    transform .45s var(--ease), box-shadow .45s var(--ease), opacity .45s var(--ease);
}

.float-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.float-btn:hover {
  transform: translateY(-3px);
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--ivory);
  box-shadow: 0 18px 34px rgba(143, 70, 56, 0.34);
}

/* hover label */
.float-btn::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 9px 15px;
  border-radius: 2px;
  background: var(--charcoal);
  color: var(--ivory);
  font-family: 'Manrope', sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.float-btn:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* back-to-top only appears once you've scrolled */
.float-btn-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
}

.float-btn-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.float-btn-top.is-visible:hover {
  transform: translateY(-3px);
}

/* ---------- FLOATING SOCIAL ---------- */
/* Mirror of .floating-actions in the opposite (bottom-left) corner. The buttons
   reuse .float-btn so they inherit the size, hover state and data-label tooltip. */
.floating-social {
  position: fixed;
  left: 26px;
  bottom: 26px;
  z-index: 990;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The shared .float-btn::before label sits to the LEFT of the button. These
   buttons hug the left edge, so the label is flipped to their right instead. */
.floating-social .float-btn::before {
  right: auto;
  left: calc(100% + 14px);
  transform: translateY(-50%) translateX(-6px);
}

.floating-social .float-btn:hover::before {
  transform: translateY(-50%) translateX(0);
}

/* All media queries (1024px / 767px / reduced motion) live in responsive.css */

/* mobile nav overlay */

.mobile-nav {
  /* translateY alone leaves the links focusable while the panel is off-screen;
     visibility takes them out of the tab order and the a11y tree too */
  visibility: hidden;
  position: fixed;
  inset: 0;
  background: var(--charcoal);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease), visibility .5s var(--ease);
}

.mobile-nav.open {
  visibility: visible;
  transform: translateY(0);
}

.mobile-nav a {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  color: var(--ivory);
  font-weight: 300;
}

.mobile-nav .btn {
  margin-top: 10px;
  font-size: 1rem;
}


/* ==========================================================================
   INTERIOR PAGES — JOURNEYS (journeys.php)
   ----------------------------------------------------------------------------
   Merged from the journeys.html mockup. Everything that page shares with the
   home page — :root tokens, .wrap, .eyebrow, .reveal, header/nav/burger,
   .mobile-nav, .btn (+ .outline / .dark), the .ph-* placeholder textures,
   .moment, .final-cta, .cta-grid, the form panel and the footer — was already
   defined above and is NOT repeated here. Only the genuinely new blocks live
   in this section. Media queries for all of it are in responsive.css.

   Deliberate deviations from the mockup, so the site stays consistent:
     .wrap        keeps the theme's 15px gutter (the mockup used 48px)
     .moment      keeps the theme's padding and type scale
     .mobile-nav  keeps z-index 999, so the overlay still covers the floating
                  buttons (990) that the mockup did not have
   ========================================================================== */

/* The wordmark doubles as a link home. display:contents keeps the flex layout
   of .logo exactly as it was before the <a> was wrapped around the text. */
.logo-link {
  display: contents;
}

/* nav item for the page you are currently on */
.nav-links a.current::after {
  width: 100%;
}

/* the home page CTA band is terracotta; interior pages go charcoal */
.final-cta-dark {
  background: var(--charcoal);
}

.moment .btn {
  margin-top: 40px;
}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero {
  min-height: 64vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  background:
    linear-gradient(180deg, rgba(20, 17, 15, 0.35) 0%, rgba(20, 17, 15, 0.15) 35%, rgba(20, 17, 15, 0.55) 100%),
    linear-gradient(135deg, #23181a 0%, #6b4335 55%, #a9583f 100%);
  overflow: hidden;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 170px 48px 90px;
  color: var(--ivory);
}

.page-hero .eyebrow {
  color: var(--sand);
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  font-weight: 300;
  max-width: 16ch;
  letter-spacing: -0.015em;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.page-hero-sub {
  max-width: 560px;
  margin-top: 24px;
  font-size: 1.05rem;
  color: rgba(245, 240, 232, 0.86);
  font-weight: 300;
}

/* The trail comes from tba_breadcrumb(), which hands off to Yoast SEO wherever
   the plugin is active. Yoast emits its own nesting of <span>s and its own
   separator character, so this is deliberately inline flow rather than the
   flex row the mockup used - it has to style whatever markup Yoast produces. */
.crumb {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.65);
  margin-top: 30px;
  line-height: 1.6;
}

.crumb a {
  color: rgba(245, 240, 232, 0.85);
  transition: color .3s;
}

.crumb a:hover {
  color: var(--ivory);
}

/* Yoast marks the current page with .breadcrumb_last; the fallback matches it */
.crumb .breadcrumb_last {
  color: rgba(245, 240, 232, 0.65);
}

.crumb .crumb-sep {
  margin: 0 4px;
  opacity: 0.6;
}

/* ---------- INTRO STRIP ---------- */
.journeys-intro {
  padding: 130px 0 90px;
  background: var(--ivory);
}

.journeys-intro-inner {
  max-width: 820px;
}

.journeys-intro h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--charcoal-2);
}

.journeys-intro p {
  margin-top: 26px;
  font-size: 1.04rem;
  color: #5c5650;
  max-width: 600px;
  font-weight: 300;
}

.journeys-intro-divider,
.story-intro-divider {
  width: 56px;
  height: 1px;
  background: var(--terracotta);
  margin-top: 40px;
}

/* filter pills — .region-nav is the textile page's navigation-only twin */
.journey-filters,
.region-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 56px;
}

.region-nav {
  margin-top: 50px;
}

.journey-filters a,
.region-nav a {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 11px 20px;
  border: 1px solid rgba(34, 31, 28, 0.18);
  border-radius: 30px;
  color: var(--charcoal-2);
  transition: all .3s var(--ease);
}

.journey-filters a:hover,
.region-nav a:hover {
  background: var(--charcoal);
  color: var(--ivory);
  border-color: var(--charcoal);
}

/* ---------- JOURNEY LIST ---------- */
/* padding-bottom only: this element also carries .wrap, whose 15px side gutter
   has to survive (the mockup's padding shorthand wiped it out) */
.journeys-list {
  padding-bottom: 60px;
  background: var(--ivory);
}


.jd-num {
  font-size: 0.75rem;
  color: var(--brass);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 600;
}

.jd-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* lighter, more refined CTA for journey entries - no solid block fill */
.jd-actions .btn {
  background: transparent;
  color: var(--charcoal-2);
  border: 1px solid rgba(34, 31, 28, 0.28);
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 14px 26px;
}

.jd-actions .btn:hover {
  background: var(--charcoal-2);
  color: var(--ivory);
  border-color: var(--charcoal-2);
  letter-spacing: 0.12em;
}

/* The home page's .link-arrow draws its arrow with an inline <svg class="arrow-icon">.
   Here there is no svg, so the arrow is a pseudo-element - scoped to .jd-actions so
   the two never collide and render a double arrow. */
.jd-actions .link-arrow::after {
  content: '\2192';
  transition: transform .3s var(--ease);
}

.jd-actions .link-arrow:hover::after {
  transform: translateX(6px);
}

/* ---------- EDITORIAL JOURNEY ENTRY (airy, single column, small photos) ---------- */
.je {
  border-top: 1px solid rgba(34, 31, 28, 0.10);
  padding: 150px 0;
}

.je:last-child {
  border-bottom: 1px solid rgba(34, 31, 28, 0.10);
}

.je-top {
  margin-bottom: 26px;
}

.je-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 48px;
  align-items: start;
}

.je.reverse .je-grid {
  grid-template-columns: 0.6fr 1.4fr;
}

.je.reverse .je-photos {
  order: 1;
}

.je.reverse .je-text {
  order: 2;
}

.je-text h3 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 300;
  margin-bottom: 8px;
}

.je-text .tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--terracotta);
  font-size: 1.08rem;
  display: block;
  margin-bottom: 30px;
}

.je-text p.desc {
  font-size: 1.02rem;
  color: #5c5650;
  font-weight: 300;
  max-width: 560px;
  margin-bottom: 36px;
}

.je-meta-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  font-size: 0.84rem;
  color: #8a8378;
  margin-bottom: 36px;
}

.je-meta-row .mi b {
  color: var(--charcoal-2);
  font-weight: 600;
}

.je-meta-row .sep {
  margin: 0 16px;
  opacity: 0.4;
}

.je-tags {
  margin-bottom: 44px;
}

.je-tags h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--charcoal-2);
  font-weight: 700;
  margin-bottom: 18px;
}

.je-tags ul {
  list-style: none;
}

.je-tags li {
  font-size: 0.95rem;
  color: #5c5650;
  font-weight: 300;
  padding-left: 24px;
  position: relative;
  margin-bottom: 14px;
}

.je-tags li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--terracotta);
}

.je-photos {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.je-photo {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 1/1;
  max-width: 320px;
}

/* Drop an <img class="je-photo-img"> inside a .je-photo and it covers the
   placeholder gradient - same pattern as .journey-img .journey-photo above. */
.je-photo .je-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.je-photos-compact {
  flex-flow: row wrap;
  gap: 16px;
}

.je-photos-compact .je-photo {
  max-width: 170px;
  flex: 1 1 calc(50% - 8px);
}


/* ==========================================================================
   INTERIOR PAGES - TEXTILE STUDIO (page-templates/textile.php)
   ========================================================================== */

/* ---------- PAGE HERO, PHOTOGRAPHIC VARIANT ---------- */
.page-hero.page-hero-textile {
  background:
    linear-gradient(180deg, rgba(15, 12, 10, 0.55) 0%, rgba(15, 12, 10, 0.35) 30%, rgba(15, 12, 10, 0.88) 100%),
    url('../img/textile/textile-hero.jpg');
  background-size: cover;
  background-position: center 38%;
}

/* over a photograph the type needs its own contrast */
.page-hero-textile .eyebrow {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.page-hero-textile h1 {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.page-hero-textile h1 em {
  color: #D9805F;
}

.page-hero-textile .page-hero-sub {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* ---------- INTRO STRIP ---------- */
.story-intro {
  padding: 130px 0 100px;
  background: var(--ivory);
}

.story-intro-inner {
  max-width: 760px;
}

.story-intro h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 300;
  color: var(--charcoal-2);
  line-height: 1.2;
}

.story-intro p {
  margin-top: 26px;
  font-size: 1.06rem;
  color: #5c5650;
  max-width: 600px;
  font-weight: 300;
  line-height: 1.75;
}

/* ---------- STORY SECTIONS (narrative, alternating light/dusk/dark) ---------- */
.story-section {
  padding: 150px 0;
}

.story-section.light {
  background: var(--ivory);
  color: var(--charcoal);
}

.story-section.dusk {
  background: var(--dusk);
  color: var(--ivory);
}

.story-section.dark {
  background: var(--charcoal);
  color: var(--ivory);
}

.story-head {
  max-width: 700px;
  margin-bottom: 56px;
}

.story-head .eyebrow {
  margin-bottom: 20px;
}

.story-head h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.3rem);
  font-weight: 300;
}

.story-text {
  max-width: 760px;
}

.story-text p {
  font-size: 1.04rem;
  font-weight: 300;
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 26px;
  opacity: 0.92;
}

.story-text p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 3.6rem;
  float: left;
  line-height: 0.78;
  padding-right: 12px;
  padding-top: 8px;
  color: var(--terracotta);
  font-weight: 400;
}

.story-terms {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  margin-top: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(245, 240, 232, 0.14);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  opacity: 0.75;
}

/* the hairline inverts on the ivory section */
.story-section.light .story-terms {
  border-top-color: rgba(34, 31, 28, 0.14);
}

.story-terms .sep {
  margin: 0 16px;
  opacity: 0.5;
  font-family: 'Manrope', sans-serif;
  font-style: normal;
}

/* ---------- PHOTO GALLERIES — one composition per region ---------- */
.story-gallery {
  display: grid;
  gap: 16px;
  margin-top: 60px;
}

.story-gallery .story-photo {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

/* mosaic: one large square, one wide rectangle, two small squares */
.story-gallery.mosaic {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
}

.story-gallery.mosaic .story-photo:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.story-gallery.mosaic .story-photo:nth-child(2) {
  grid-column: span 2;
}

.story-gallery.mosaic .story-photo:nth-child(3) {
  grid-column: span 1;
}

.story-gallery.mosaic .story-photo:nth-child(4) {
  grid-column: span 1;
}

/* staggered: four tall strips, alternating offset for a zigzag collage */
.story-gallery.staggered {
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.story-gallery.staggered .story-photo {
  aspect-ratio: 3/4;
}

.story-gallery.staggered .story-photo:nth-child(2n) {
  margin-top: 44px;
}

/* brick: one wide banner photo over a row of three squares */
.story-gallery.brick {
  grid-template-columns: repeat(3, 1fr);
}

.story-gallery.brick .story-photo:nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}

.story-gallery.brick .story-photo:nth-child(n+2) {
  aspect-ratio: 1/1;
}


/* ==========================================================================
   INTERIOR PAGES — ABOUT (page-templates/about.php)
   ========================================================================== */
.page-hero.page-hero-about {
  background:
    linear-gradient(180deg, rgba(20, 17, 15, 0.30) 0%, rgba(20, 17, 15, 0.12) 40%, rgba(20, 17, 15, 0.62) 100%),
    url('../img/pages/about-hero.jpg');
  background-size: cover;
  background-position: center 42%;
}

.page-hero.page-hero-contact {
  background:
    linear-gradient(180deg, rgba(20, 17, 15, 0.34) 0%, rgba(20, 17, 15, 0.16) 40%, rgba(20, 17, 15, 0.60) 100%),
    url('../img/pages/contact-hero.jpg');
  background-size: cover;
  background-position: center 46%;
}

/* ---------- SPLIT ROWS (photo beside copy) ---------- */
.split {
  padding: 150px 0;
  background: var(--ivory);
}

.split.tint {
  background: var(--ivory-2);
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.split-grid.reverse .split-media {
  order: 2;
}

.split-media {
  border-radius: 2px;
  overflow: hidden;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}

.split-media:hover img {
  transform: scale(1.04);
}

.split-media.wide {
  aspect-ratio: 16 / 9;
}

.split-media.tall {
  aspect-ratio: 3 / 2;
}

.split-body h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 300;
  color: var(--charcoal);
  margin-bottom: 26px;
}

.split-body p {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.9;
  color: #5c5650;
  margin-bottom: 22px;
}

.split-body p:last-of-type {
  margin-bottom: 0;
}

.split-body .btn {
  margin-top: 34px;
}


/* ==========================================================================
   INTERIOR PAGES — CONTACT (page-templates/contact.php)
   ========================================================================== */

.enquiry {
  padding: 150px 0;
  background: var(--ivory-2);
  text-align: center;
}

.enquiry h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 300;
  color: var(--charcoal);
}

.enquiry-sub {
  margin: 26px auto 0;
  max-width: 720px;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.9;
  color: #5c5650;
}

/* the panel is the theme's own ivory card, lifted off the warmer band */
.enquiry .form-panel {
  max-width: 880px;
  margin: 60px auto 0;
  text-align: left;
  box-shadow: 0 18px 40px rgba(34, 31, 28, 0.10);
}

/* placeholder for the real reCAPTCHA widget, in the theme's tones */
.captcha {
  width: 304px;
  max-width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  margin-bottom: 26px;
  border: 1px solid rgba(34, 31, 28, 0.16);
  border-radius: 2px;
  background: rgba(34, 31, 28, 0.02);
}

.captcha-box {
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid rgba(34, 31, 28, 0.3);
  border-radius: 2px;
  background: var(--ivory);
}

.captcha-text {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--charcoal-2);
}

.captcha-brand {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a958f;
  text-align: center;
  line-height: 1.6;
}

/* ---------- MAP ---------- */
.map-band {
  height: 420px;
  background: var(--ivory-2);
  border-top: 1px solid rgba(34, 31, 28, 0.08);
  border-bottom: 1px solid rgba(34, 31, 28, 0.08);
}

.map-band iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Google's default palette is far cooler than the rest of the site */
  filter: saturate(0.72) sepia(0.16) contrast(0.96);
}

/* ---------- CLOSING BAND ---------- */
.contact-cta {
  background: var(--terracotta-deep);
  color: var(--ivory);
  padding: 110px 0;
}

.contact-cta .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.contact-cta h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: var(--ivory);
}

.contact-cta .btn {
  flex: none;
}


/* ==========================================================================
   404 (404.php)
   ========================================================================== */

.e404 {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 190px 0 130px;
  background:
    linear-gradient(180deg, rgba(20, 17, 15, 0.62) 0%, rgba(20, 17, 15, 0.42) 45%, rgba(20, 17, 15, 0.78) 100%),
    url('../img/pages/about-hero.jpg');
  background-size: cover;
  background-position: center 42%;
  color: var(--ivory);
  overflow: hidden;
}

.e404 .arch-wrap {
  opacity: 0.2;
}

/* .moment.is-in drives the same stroke elsewhere; #momentSection is what
   main.js observes, and this section carries that id */
.e404.is-in .arch-wrap svg path {
  stroke-dashoffset: 0;
}

.e404-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin-inline: 0;
  padding-left: max(15px, calc((100% - 1320px) / 2 + 15px));
}

.e404 h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.e404 h1 em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.e404-sub {
  max-width: 520px;
  margin-top: 24px;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(245, 240, 232, 0.86);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.e404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* ---------- RECOVERY ROW ---------- */
.e404-next {
  padding: 130px 0;
  background: var(--ivory);
}

.e404-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 14px;
}

.e404-card {
  display: flex;
  flex-direction: column;
  padding: 38px 34px 34px;
  background: var(--ivory-2);
  border: 1px solid rgba(34, 31, 28, 0.07);
  border-radius: 2px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}

.e404-card:hover {
  transform: translateY(-4px);
  background: #EBE3D3;
  box-shadow: 0 18px 40px rgba(34, 31, 28, 0.10);
}

.e404-card h2 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 14px;
}

.e404-card p {
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.8;
  color: #5c5650;
  margin-bottom: 26px;
  flex: 1;
}

.e404-card .arrow-icon {
  transition: transform .3s var(--ease);
}

.e404-card:hover .arrow-icon {
  transform: translateX(6px);
}