/* ───────────────────────────────────────────────
   Blue Stellar — Editorial · Issue 01 · 2026
   --pewter-blue   #B9C8DD   atmosphere · breath · hover
   --midnight-navy #1B2A4A   structure · voice
   --royal-brown   #4A3426   italic · pen · accent
   --cream         #F5F0E8   page
   --ink           #0E1420   highest-contrast type only
   ─────────────────────────────────────────────── */

:root {
  --pewter-blue:   #B9C8DD;
  --midnight-navy: #0D1B3E;   /* primary text — deep navy */
  --baby-blue:     #C2D8EC;   /* descriptions, subtitles, secondary text */
  --royal-brown:   #4A3426;
  --cream:         #FFFFFF;
  --ink:           #0E1420;

  --edge:    clamp(20px, 4vw, 56px);
  --pad-y:   clamp(80px, 10vw, 160px);
  --gutter:  clamp(14px, 1.4vw, 24px);
  --rule:    1px;
  --mast-h:  56px;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* live pointer coordinates — updated by main.js so the cursor aura
     follows the mouse on every page */
  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

/* Universal cursor aura — removed per request.
   The custom cursor element (#cursor) and its hover sparkle are also
   hidden below so the visitor sees their native system cursor. */

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

html, body { background: var(--cream); color: var(--midnight-navy); }

html {
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; }

body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

::selection { background: var(--pewter-blue); color: var(--midnight-navy); }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ───────────────────────────── TYPE ───────────────────────────── */

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: normal;
  letter-spacing: -0.02em;
  line-height: 0.96;
  color: var(--midnight-navy);
}

.display--xl { font-size: clamp(56px, 9.5vw, 152px); line-height: 0.94; }
.display--l  { font-size: clamp(40px, 6.4vw, 96px);  line-height: 0.98; }
.display--m  { font-size: clamp(28px, 3.6vw, 56px);  line-height: 1.04; }

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
  font-variation-settings: normal;
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
}

.body p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.65;
  color: var(--midnight-navy);
  max-width: 60ch;
}
.body p + p { margin-top: 1.4em; }
.body em { color: var(--royal-brown); font-style: italic; }
.body .pewter { color: var(--midnight-navy); border-bottom: 1px solid var(--pewter-blue); padding-bottom: 1px; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ───────────────────────────── MASTHEAD (sections + logo) ───────────────────────────── */

.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 10px var(--edge);
  background: var(--cream);
  border-bottom: var(--rule) solid var(--midnight-navy);
}

.masthead__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  gap: clamp(12px, 2vw, 32px);
}

.masthead__nav > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.masthead__nav a {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.005em;
  color: var(--midnight-navy);
  opacity: 0.75;
  transition: opacity 0.4s var(--ease);
}

.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] {
  opacity: 1;
}

.masthead__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  transition: opacity 0.4s var(--ease);
}

.masthead__logo:hover { opacity: 1; }

.masthead__logo img {
  height: 24px;
  width: auto;
  display: block;
}

@media (max-width: 540px) {
  .masthead { padding: 14px var(--edge); }
  .masthead__nav { gap: 12px; }
  .masthead__nav a { font-size: 14px; }
  .masthead__links { gap: 14px; }
  .masthead__logo img { height: 24px; }
}

/* ───────────────────────────── PAGE / GRID ───────────────────────────── */

.page {
  padding-top: var(--mast-h);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main { flex: 1; }

.spread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 0 var(--edge);
}

.rule {
  height: 0;
  border: 0;
  border-top: var(--rule) solid var(--pewter-blue);
}
.rule--navy { border-top-color: var(--midnight-navy); }
.rule--brown { border-top-color: var(--royal-brown); }

/* ───────────────────────────── FOOTER ───────────────────────────── */

.foot {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding: 12px var(--edge) 14px;
  border-top: var(--rule) solid var(--midnight-navy);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.foot__item {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--midnight-navy);
  opacity: 0.6;
  transition: opacity 0.4s var(--ease);
}

a.foot__item:hover { opacity: 1; }

.foot__center { text-align: center; }

@media (max-width: 600px) {
  .foot {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px 18px;
  }
  .foot__center { order: 3; flex-basis: 100%; }
}

/* ───────────────────────────── HOME ─────────────────────────────
   Type-led. The headline IS the hero. Vertically centered.
   ─────────────────────────────────────────────────────────────── */

/* ───────────────────────── HOME — SPLIT HERO ─────────────────────────
   A two-column hero with cycling images (3s auto, hover advances).
   Below the hero, the page becomes a scrollable landing with intro,
   services teaser, work teaser, substack, footer.
   ─────────────────────────────────────────────────────────────── */

.split-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--midnight-navy);
}

.split-hero__pane {
  position: relative;
  overflow: hidden;
}

.split-hero__pane::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A stronger vignette + center darken so the white tagline sits on
     a calm, slightly muted backdrop and reads cleanly on any image. */
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 50%,
      rgba(14, 20, 32, 0.32) 0%,
      rgba(14, 20, 32, 0.12) 70%,
      rgba(14, 20, 32, 0.0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(14, 20, 32, 0.08) 0%,
      rgba(14, 20, 32, 0.18) 100%
    );
  z-index: 1;
  pointer-events: none;
}

.split-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* Slight desaturation + brightness reduction so the hero reads as
     atmosphere, and the white tagline always wins the eye. */
  filter: saturate(0.78) brightness(0.82);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.split-hero__slide.is-active { opacity: 1; }

/* Right pane: a slightly more editorial / monochrome mood */
.split-hero__pane--right .split-hero__slide {
  /* The right pane stays mostly monochrome — compounded with the base
     dim so the tagline reads cleanly across both panes. */
  filter: grayscale(0.7) brightness(0.82) contrast(1.02);
}

.split-hero__pane[data-bg="cream"] .split-hero__slide,
.split-hero__pane[data-bg="dark"] .split-hero__slide {
  /* Posters / packaging on coloured cards already carry their own treatment */
  filter: none;
}

/* Optional wordmark across the centre */
.split-hero__mark {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 6.4vw, 128px);
  letter-spacing: -0.015em;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 36px rgba(14, 20, 32, 0.55);
  text-align: center;
  padding: 0 clamp(16px, 4vw, 80px);
  white-space: nowrap;
}

/* override the global "em → royal-brown" rule inside the hero mark */
.split-hero__mark em { color: #ffffff; font-style: italic; }

@media (max-width: 880px) {
  .split-hero__mark {
    font-size: clamp(28px, 7vw, 56px);
    white-space: normal;
  }
}

.split-hero__caption {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(245, 237, 223, 0.8);
  pointer-events: none;
}

@media (max-width: 720px) {
  .split-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100vh;
  }
  .split-hero__mark {
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-shadow: 0 2px 18px rgba(14, 20, 32, 0.6);
  }
}

/* The home page is now scrollable. Reset the previous overflow-lock. */
body.is-home-scroll { overflow-y: auto; height: auto; }

/* The home landing page: hero only, single viewport, no scroll. */
body.is-home-landing {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}

body.is-home-landing main {
  position: absolute;
  inset: 0;
}

body.is-home-landing .split-hero {
  height: 100vh;
  height: 100svh;
}

/* ───────────────────────── SECTION HEAD (shared kicker + copy) ───────────────────────── */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(48px, 6vw, 96px);
  max-width: 56ch;
}

.section-head__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baby-blue);
}

.section-head__copy {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--baby-blue);
  max-width: 52ch;
  text-align: justify;
}

/* ───────────────────────── SECTION TITLE (big serif headline per section) ───────────────────────── */

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--midnight-navy);
  max-width: 20ch;
  margin: 0 0 clamp(48px, 6vw, 96px);
}

.section-title em {
  font-style: italic;
  color: var(--royal-brown);
}

/* ───────────────────────── HOME — ABOUT ───────────────────────── */

.home-about {
  position: relative;
  z-index: 1;
  background: var(--cream);
  padding: clamp(80px, 11vw, 180px) var(--edge);
  scroll-margin-top: var(--mast-h);
}

.home-about__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

.home-about__lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--midnight-navy);
}

.home-about__right {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
}

.home-about__right .section-head { margin-bottom: 0; }

.home-about__lead em { font-style: italic; color: var(--royal-brown); }

.home-about__body {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.home-about__body p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--midnight-navy);
  max-width: 60ch;
  text-align: justify;
}

.home-about__body em { font-style: italic; color: var(--royal-brown); }

@media (max-width: 880px) {
  .home-about__inner { grid-template-columns: 1fr; }
}

/* ───────────────────────── HOME — INTRO (deprecated) ───────────────────────── */

.home-intro {
  position: relative;
  z-index: 1;
  background: var(--cream);
  padding: clamp(80px, 11vw, 180px) var(--edge);
  text-align: center;
}

.home-intro__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

.home-intro__lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--midnight-navy);
  max-width: 22ch;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.home-intro__lede em { color: var(--royal-brown); }

.home-intro__body {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--midnight-navy);
  max-width: 56ch;
  opacity: 0.85;
}

.home-intro__link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--royal-brown);
  border-bottom: 1px solid var(--royal-brown);
  padding: 2px 0;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
}

.home-intro__link:hover {
  color: var(--midnight-navy);
  border-color: var(--midnight-navy);
  padding-right: 10px;
}

/* ───────────────────────── HOME — WORK TEASER ───────────────────────── */

.home-work {
  position: relative;
  z-index: 1;
  background: var(--cream);
  padding: clamp(64px, 9vw, 140px) var(--edge);
  border-top: 1px solid rgba(27, 42, 74, 0.08);
}

.home-work__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.home-work__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--midnight-navy);
}

.home-work__title em { font-style: italic; color: var(--royal-brown); }

.home-work__link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--royal-brown);
  border-bottom: 1px solid var(--royal-brown);
  padding: 2px 0;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  white-space: nowrap;
}

.home-work__link:hover {
  color: var(--midnight-navy);
  border-color: var(--midnight-navy);
  padding-right: 10px;
}

.home-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}

.home-work__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--midnight-navy);
}

.home-work__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-work__card:hover img { transform: scale(1.04); }

.home-work__card-name {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: var(--cream);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 16px rgba(14, 20, 32, 0.5);
}

@media (max-width: 720px) {
  .home-work__grid { grid-template-columns: 1fr; }
  .home-work__head { flex-direction: column; align-items: flex-start; }
}

/* ───────────────────────── HOME — SERVICES TEASER ───────────────────────── */

.home-services {
  position: relative;
  z-index: 1;
  background: var(--cream);
  padding: clamp(80px, 11vw, 180px) var(--edge);
  border-top: 1px solid rgba(27, 42, 74, 0.08);
  scroll-margin-top: var(--mast-h);
}

/* ── Service card: editorial two-column layout ──
   Left: number, italic title, italic lede, body, deliverables list.
   Right: navy panel with timeline / built for / availability, then CTA.
   Stacks to a single column on narrow viewports. */

.service-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(48px, 6vw, 96px) 0;
  border-top: 1px solid rgba(27, 42, 74, 0.14);
  align-items: start;
}

.service-card:last-of-type {
  border-bottom: 1px solid rgba(27, 42, 74, 0.14);
}

.service-card__main {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 1.6vw, 24px);
}

.service-card__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--baby-blue);
}

.service-card__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--midnight-navy);
  margin-bottom: 4px;
}

.service-card__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.4;
  color: var(--midnight-navy);
  opacity: 0.85;
  max-width: 38ch;
}

.service-card__body {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--midnight-navy);
  opacity: 0.82;
  max-width: 56ch;
  text-align: justify;
}

.service-card__list {
  list-style: none;
  padding: clamp(18px, 2vw, 28px) 0 0;
  margin: 0;
  border-top: 1px solid rgba(27, 42, 74, 0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-card__list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--serif);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--midnight-navy);
  opacity: 0.88;
}

.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--midnight-navy);
  opacity: 0.5;
}

.service-card__side {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 22px);
  position: sticky;
  top: calc(var(--mast-h) + 24px);
}

.service-card__panel {
  background: var(--midnight-navy);
  color: #ffffff;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
}

.service-card__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: clamp(16px, 1.6vw, 22px);
  border-bottom: 1px solid rgba(194, 216, 236, 0.18);
}

.service-card__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.service-card__kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(194, 216, 236, 0.78);
}

.service-card__value {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.4;
  color: #ffffff;
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px clamp(20px, 2vw, 28px);
  background: var(--midnight-navy);
  color: #ffffff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.service-card__cta:hover {
  background: var(--pewter-blue);
  color: var(--midnight-navy);
}

/* Secondary "Not sure yet?" card — light, bordered, ghost button. */
.service-card__alt {
  margin-top: clamp(10px, 1.2vw, 18px);
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--cream);
  border: 1px solid rgba(27, 42, 74, 0.16);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
}

.service-card__alt .service-card__kicker {
  color: rgba(13, 27, 62, 0.55);
}

.service-card__alt-body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--midnight-navy);
}

.service-card__alt-body em { font-style: italic; }

.service-card__cta--ghost {
  background: transparent;
  color: var(--midnight-navy);
  border: 1px solid rgba(27, 42, 74, 0.35);
  padding: 16px clamp(20px, 2vw, 28px);
}

.service-card__cta--ghost:hover {
  background: var(--pewter-blue);
  color: var(--midnight-navy);
  border-color: var(--pewter-blue);
}

/* The muted "add-on" list item — softer than the rest. */
.service-card__list li.is-muted {
  opacity: 0.5;
}

@media (max-width: 880px) {
  .service-card {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }
  .service-card__side { position: static; }
}

/* ───────────────────────── WORK GRID (single-page) ─────────────────────────
   Inspired by editorial-archive sites: a single row of small portrait
   thumbnails, each labelled with a number above and project name + category
   below. Reads as an index, not a portfolio. Clicking opens the project
   page (when we add them — for now they're inert).
   ─────────────────────────────────────────────────────────── */

.work-grid {
  position: relative;
  z-index: 1;
  background: var(--cream);
  padding: clamp(80px, 11vw, 180px) var(--edge);
  border-top: 1px solid rgba(27, 42, 74, 0.08);
  scroll-margin-top: var(--mast-h);
}

.work-grid__items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-grid__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.work-grid__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--baby-blue);
  text-transform: uppercase;
}

.work-grid__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0;
  background: var(--midnight-navy);
}

.work-grid__image[data-bg="dark"] { background: var(--midnight-navy); }

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

.work-grid__item:hover .work-grid__image img { transform: scale(1.04); }

.work-grid__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px);
  letter-spacing: -0.005em;
  color: var(--midnight-navy);
  margin-top: 4px;
}

.work-grid__name em { font-style: italic; color: var(--royal-brown); }

.work-grid__cat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baby-blue);
}

@media (max-width: 880px) {
  .work-grid__items { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 540px) {
  .work-grid__items { grid-template-columns: repeat(2, 1fr); }
}

/* ───────────────────────── HOME — CONTACT (inline) ───────────────────────── */

.home-contact {
  position: relative;
  z-index: 1;
  background: var(--cream);
  padding: clamp(80px, 11vw, 180px) var(--edge);
  border-top: 1px solid rgba(27, 42, 74, 0.08);
  scroll-margin-top: var(--mast-h);
}

.home-contact__line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--midnight-navy);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.home-contact__line em { font-style: italic; color: var(--royal-brown); }

.home-contact .contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  max-width: 760px;
}

/* When the form transitions to the success state, drop the 760px cap
   and let the centered "We'll be in touch." panel span the section
   width so it can sit truly centred left-to-right. */
.home-contact .contact-form.is-sent {
  max-width: none;
  width: 100%;
  align-items: center;
}

/* Hide the "Tell us about your brand." section title once the form is
   sent — the success message becomes the sole focus of the section. */
.home-contact:has(.contact-form.is-sent) .section-title { display: none; }

/* ───────────────────────── HOME — SUBSTACK ───────────────────────── */

.home-substack {
  position: relative;
  z-index: 1;
  background: var(--cream);
  padding: clamp(80px, 11vw, 180px) var(--edge);
  border-top: 1px solid rgba(27, 42, 74, 0.08);
  text-align: center;
}

.home-substack__inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: center;
}

.home-substack__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  letter-spacing: 0.02em;
}

.home-substack__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--midnight-navy);
}

.home-substack__body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--midnight-navy);
  opacity: 0.85;
  max-width: 48ch;
  text-align: center;
}

.home-substack__form {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 8px;
}

.home-substack__input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--midnight-navy);
  padding: 10px 4px 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--midnight-navy);
  outline: none;
  transition: border-color 0.4s var(--ease);
}

.home-substack__input::placeholder { color: var(--pewter-blue); }
.home-substack__input:focus { border-bottom-color: var(--royal-brown); }

.home-substack__submit {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--midnight-navy);
  border-bottom: 1px solid var(--midnight-navy);
  padding: 6px 2px;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
}

.home-substack__submit:hover {
  color: var(--pewter-blue);
  border-color: var(--pewter-blue);
  padding-right: 14px;
}

.home-substack__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--royal-brown);
  opacity: 0.7;
  margin-top: 6px;
  min-height: 1.4em;
}

@media (max-width: 540px) {
  .home-substack__form { flex-direction: column; }
}

/* ───────────────────────── CONTACT FORM (rewrite) ───────────────────────── */

.contact-form {
  grid-column: 2 / 12;
  margin-top: clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  opacity: 0;
  animation: fade-up 1.0s var(--ease) 0.5s forwards;
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.contact-form__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--royal-brown);
  letter-spacing: 0.005em;
  opacity: 0.85;
}

.contact-form__hint-soft {
  color: var(--baby-blue);
  font-style: italic;
  margin-left: 4px;
  opacity: 0.85;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--midnight-navy);
  padding: 10px 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--midnight-navy);
  outline: none;
  line-height: 1.4;
  transition: border-color 0.4s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.contact-form__select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--royal-brown) 50%),
                    linear-gradient(135deg, var(--royal-brown) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 8px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 64px;
  font-size: clamp(20px, 2vw, 26px);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-bottom-color: var(--royal-brown);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--pewter-blue);
  font-style: italic;
}

.contact-form__actions {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2.2vw, 32px);
  flex-wrap: wrap;
  margin-top: clamp(8px, 1vw, 16px);
}

.contact-form__submit,
.contact-form__alt {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--midnight-navy);
  border-bottom: 1px solid var(--midnight-navy);
  padding: 4px 2px;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
}

.contact-form__submit:hover,
.contact-form__alt:hover {
  color: var(--pewter-blue);
  border-color: var(--pewter-blue);
  padding-right: 14px;
}

.contact-form__or {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--royal-brown);
  opacity: 0.6;
}

.contact-form__status {
  grid-column: 2 / 12;
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  min-height: 1.6em;
}

.contact-form__success {
  display: none;
  text-align: center;
  padding: clamp(56px, 8vw, 120px) 0;
}

.contact-form.is-sent .contact-form__step,
.contact-form.is-sent .contact-form__actions,
.contact-form.is-sent .contact-form__status { display: none; }

.contact-form.is-sent .contact-form__success { display: flex; flex-direction: column; gap: 18px; align-items: center; }

.contact-form__success-headline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 4vw, 56px);
  color: var(--midnight-navy);
  line-height: 1.1;
}

.contact-form__success-body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--royal-brown);
  max-width: 48ch;
}

@media (max-width: 540px) {
  .contact-form__row { grid-template-columns: 1fr; }
}

/* Type-led hero — first viewport. Mesh canvas (page-mesh) sits behind. */
.home {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--mast-h);
  padding-bottom: clamp(80px, 10vw, 140px);
  align-items: center;
  align-content: center;
}

.home__lead {
  position: relative;
  z-index: 1;
  grid-column: 1 / 13;
  /* clamp by both vw and vh so the three-line headline always fits the
     viewport regardless of screen aspect, and the cap is conservative so
     wide displays don't push it off-screen. */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, min(7vw, 14vh), 120px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--midnight-navy);
  text-align: left;
}

.home__lead em {
  color: var(--royal-brown);
  font-style: italic;
}

/* ───────────────────────────── PAGE-WIDE MESH ─────────────────────────────
   Fixed canvas filling the viewport. Used only on pages that include the
   <canvas data-shader> element. Header and footer become transparent so the
   mesh shows through edge-to-edge.
   ─────────────────────────────────────────────────────────────── */

.page-mesh {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: fade-up 1.4s var(--ease) 0.05s forwards;
}

/* Soft blue aura that follows the cursor over the white sections —
   echoes the hero's yellow mesh aura. Sits above sections, below the
   masthead. Multiply blend so it tints white as a quiet blue glow
   without darkening the navy type harshly. Opacity is driven by
   --aura-strength, which JS interpolates from 0 → 1 as the visitor
   scrolls out of the hero, so the yellow mesh aura and the blue
   page aura cross-fade smoothly instead of snapping. */
.page-aura {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    460px circle at var(--cursor-x, 50vw) var(--cursor-y, 50vh),
    rgba(170, 200, 232, 0.30) 0%,
    rgba(194, 216, 236, 0.15) 35%,
    rgba(194, 216, 236, 0.05) 62%,
    transparent 80%
  );
  mix-blend-mode: multiply;
  opacity: var(--aura-strength, 1);
}

/* When the mesh canvas is present, masthead and foot use a fully opaque
   gradient that picks up the mesh's palette — warm champagne on one side,
   pewter blue on the other. Solid so scrolling content never shows
   through; tonal so the chrome reads like a slice of the hero. */
/* Header & footer: near-transparent pane with a heavy backdrop blur.
   The blur captures the live mesh through it so the chrome looks like
   a slice of the hero; on scrolling pages the blur is strong enough
   that any text behind it dissolves into mesh-coloured wash too —
   identical visual on every page. */
/* Header & footer: solid white on every page. */
body:has(.page-mesh) .masthead,
.masthead {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(27, 42, 74, 0.10);
}
body:has(.page-mesh) .foot,
.foot {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top-color: rgba(27, 42, 74, 0.10);
}

/* Lift the chrome above the canvas. */
body:has(.page-mesh) .page    { position: relative; z-index: 1; }
body:has(.page-mesh) #cursor  { z-index: 9999; }

.home__lead-line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  animation: fade-up 1.2s var(--ease) forwards;
}
.home__lead-line:nth-of-type(1) { animation-delay: 0.20s; }
.home__lead-line:nth-of-type(2) { animation-delay: 0.28s; }
.home__lead-line:nth-of-type(3) { animation-delay: 0.36s; }

@media (max-width: 880px) {
  .home {
    align-items: start;
    min-height: calc(100vh - 56px);
  }
}

/* ───────────────────────────── WORK — PORTFOLIO SPREADS ─────────────────────────────
   Each project is a full magazine feature:
     · masthead row (number / year)
     · huge italic display title
     · italic standfirst (kicker)
     · hero image (16:11 widescreen)
     · two-column detail (credits left, body prose right)
     · optional second "plate" image
   ─────────────────────────────────────────────────────────────── */

.work-portfolio {
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.project {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(160px, 22vw, 320px);
}

.project:last-of-type { margin-bottom: clamp(80px, 10vw, 160px); }

.project__rule {
  grid-column: 1 / 13;
  height: 0;
  border: 0;
  border-top: 1px solid var(--midnight-navy);
  opacity: 0.35;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

.project__masthead {
  grid-column: 1 / 13;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  letter-spacing: 0.005em;
}

.project__num { display: inline-flex; align-items: center; gap: 14px; }
.project__num::after {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--royal-brown);
  opacity: 0.45;
}

.project__title {
  grid-column: 1 / 13;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.028em;
  color: var(--midnight-navy);
  margin-left: -0.04em; /* optical hang */
}

.project__title em { color: var(--royal-brown); font-style: italic; }

.project__kicker {
  grid-column: 5 / 13;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.35;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
  max-width: 38ch;
}

.project__hero {
  grid-column: 1 / 13;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--pewter-blue);
  margin-top: clamp(20px, 2vw, 32px);
}

.project__hero[data-fit="contain"] {
  background: var(--cream);
  aspect-ratio: 5 / 4;
}

.project__hero[data-orient="portrait"] { aspect-ratio: 4 / 5; }

.project__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}

.project__hero[data-fit="contain"] img {
  object-fit: contain;
  padding: clamp(28px, 4vw, 64px);
}

.project:hover .project__hero img { transform: scale(1.015); }
.project__hero[data-fit="contain"]:hover img { transform: none; }

.project__detail {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(28px, 3vw, 40px);
}

.project__credits {
  grid-column: 1 / 4;
}

.project__credits-label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--royal-brown);
  margin-bottom: 10px;
  opacity: 0.85;
}

.project__credits-list {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--midnight-navy);
}

.project__credits-list span { display: block; }

.project__body {
  grid-column: 5 / 12;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.project__body p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--midnight-navy);
  max-width: 60ch;
}

.project__body em {
  font-style: italic;
  color: var(--royal-brown);
}

.project__plate {
  grid-column: 4 / 12;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pewter-blue);
  margin-top: clamp(24px, 3vw, 40px);
}

.project__plate[data-orient="landscape"] {
  grid-column: 2 / 11;
  aspect-ratio: 16 / 11;
}

.project__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}

.project:hover .project__plate img { transform: scale(1.015); }

/* Plate grid — multiple supporting images for a project */
.project__plates {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(20px, 2.5vw, 36px);
  margin-top: clamp(36px, 5vw, 64px);
}

.project__plates figure {
  overflow: hidden;
  background: var(--pewter-blue);
  margin: 0;
}

.project__plates figure[data-bg="cream"] {
  background: var(--cream);
}

.project__plates figure[data-bg="dark"] {
  background: var(--midnight-navy);
}

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

.project__plates figure:hover img { transform: scale(1.02); }

/* Layout variants — staggered, off-center, asymmetric */
.project__plates--two-up figure:nth-child(1) { grid-column: 1 / 8;  aspect-ratio: 4 / 5; }
.project__plates--two-up figure:nth-child(2) { grid-column: 8 / 13; aspect-ratio: 4 / 5; align-self: end; margin-bottom: clamp(40px, 5vw, 80px); }

.project__plates--triptych figure { aspect-ratio: 3 / 4; }
.project__plates--triptych figure:nth-child(1) { grid-column: 1 / 5; }
.project__plates--triptych figure:nth-child(2) { grid-column: 5 / 9; align-self: center; }
.project__plates--triptych figure:nth-child(3) { grid-column: 9 / 13; }

.project__plates--four figure { aspect-ratio: 4 / 5; }
.project__plates--four figure:nth-child(1) { grid-column: 2 / 7; }
.project__plates--four figure:nth-child(2) { grid-column: 7 / 12; align-self: end; }
.project__plates--four figure:nth-child(3) { grid-column: 1 / 6; margin-top: clamp(20px, 2.5vw, 36px); }
.project__plates--four figure:nth-child(4) { grid-column: 6 / 13; align-self: end; aspect-ratio: 5 / 4; }

.project__plates--landscape-stack figure[data-orient="landscape"] { aspect-ratio: 16 / 11; grid-column: 1 / 13; }
.project__plates--landscape-stack figure:nth-child(2) { grid-column: 3 / 13; }

@media (max-width: 880px) {
  .project__plates figure,
  .project__plates--two-up figure:nth-child(1),
  .project__plates--two-up figure:nth-child(2),
  .project__plates--triptych figure:nth-child(n),
  .project__plates--four figure:nth-child(n),
  .project__plates--landscape-stack figure:nth-child(n) {
    grid-column: 1 / 13;
    margin: 0;
    align-self: stretch;
  }
}

.project__caption {
  grid-column: 4 / 12;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
  opacity: 0.85;
}

@media (max-width: 880px) {
  .project__title,
  .project__kicker,
  .project__hero,
  .project__detail,
  .project__credits,
  .project__body,
  .project__plate,
  .project__caption {
    grid-column: 1 / 13;
  }
  .project__title { font-size: clamp(48px, 12vw, 96px); }
  .project__hero { aspect-ratio: 4 / 5; }
}

/* ───────────────────────────── WORK CAROUSEL ─────────────────────────────
   A single-viewport, continuously rolling marquee of project images.
   Hover any image to pause the marquee and read about that project.
   ─────────────────────────────────────────────────────────────── */

body.is-carousel-page {
  overflow: hidden;
  height: 100vh;
}

.carousel-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--mast-h);
}

.carousel-page__intro {
  flex: 0 0 auto;
  padding: clamp(20px, 2.5vw, 36px) var(--edge) clamp(12px, 1.5vw, 20px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.carousel-page__heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--midnight-navy);
}

.carousel-page__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  letter-spacing: 0.005em;
  opacity: 0.8;
}

.carousel {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 5%,
    #000 95%,
    transparent 100%
  );
}

.carousel__track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 40px);
  height: 100%;
  width: max-content;
  padding: 0 clamp(20px, 2.4vw, 40px);
  animation: carousel-roll 110s linear infinite;
  will-change: transform;
}

.carousel:hover .carousel__track,
.carousel__track.is-paused {
  animation-play-state: paused;
}

.carousel__item {
  position: relative;
  flex: 0 0 auto;
  height: clamp(420px, 78vh, 860px);
  overflow: hidden;
  background: var(--pewter-blue);
}

.carousel__item[data-bg="cream"] { background: var(--cream); }
.carousel__item[data-bg="dark"]  { background: var(--midnight-navy); }

.carousel__item img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform 0.9s var(--ease);
}

.carousel__item:hover img {
  transform: scale(1.025);
}

/* Darkening on hover is done via a pseudo-element instead of a costly
   image filter — much cheaper for the GPU. */
.carousel__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 32, 0);
  transition: background 0.5s var(--ease);
  pointer-events: none;
}

.carousel__item:hover::after {
  background: rgba(14, 20, 32, 0.55);
}

.carousel__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(20px, 3vw, 40px);
  color: var(--cream);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.carousel__item:hover .carousel__overlay {
  opacity: 1;
  transform: translateY(0);
}

.carousel__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--pewter-blue);
  flex: 0 0 auto;
}

.carousel__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--cream);
  flex: 0 0 auto;
}

.carousel__title em { font-style: italic; color: var(--pewter-blue); }

.carousel__kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.35;
  color: var(--pewter-blue);
  max-width: 38ch;
  flex: 0 1 auto;
  /* full text, no truncation — relying on overlay centering + tight line-height
     to keep everything inside the image bounds */
}

@keyframes carousel-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - clamp(20px, 2.4vw, 40px) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { animation: none; }
}

@media (max-width: 720px) {
  .carousel__item { height: 60vh; }
  .carousel-page__intro { flex-wrap: wrap; }
}

/* ───────────────────────────── (legacy alternating features ─ kept for fallback) ───────────────────────────── */

.work-features {
  padding-top: clamp(72px, 10vw, 120px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.work-features__intro {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(96px, 13vw, 200px);
}

.work-features__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--midnight-navy);
}

.work-features__heading em {
  color: var(--royal-brown);
  font-style: italic;
}

.work-features__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
  max-width: 36ch;
}

.work-features__count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  opacity: 0.7;
  margin-top: clamp(20px, 2vw, 28px);
  display: block;
}

@media (max-width: 720px) {
  .work-features__intro {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.feature {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(20px, 2vw, 32px);
  margin-bottom: clamp(120px, 16vw, 240px);
  align-items: center;
}

.feature:last-of-type { margin-bottom: clamp(64px, 8vw, 120px); }

/* Image column — flips by parity */
.feature__image {
  grid-row: 1;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pewter-blue);
}

.feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
}

.feature:hover .feature__image img { transform: scale(1.025); }

.feature__image[data-fit="contain"] {
  aspect-ratio: 5 / 6;
  background: var(--cream);
}
.feature__image[data-fit="contain"] img {
  object-fit: contain;
  padding: clamp(20px, 2.5vw, 40px);
}

/* Body column */
.feature__body {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.5vw, 36px);
}

/* Default (odd) — image left, body right */
.feature__image          { grid-column: 1 / 7; }
.feature__body           { grid-column: 8 / 13; }

/* Even — image right, body left */
.feature:nth-of-type(2n) .feature__image { grid-column: 7 / 13; }
.feature:nth-of-type(2n) .feature__body  { grid-column: 1 / 6; }

.feature__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature__num::after {
  content: "";
  height: 1px;
  width: 40px;
  background: var(--royal-brown);
  opacity: 0.4;
}

.feature__kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--royal-brown);
  letter-spacing: 0.01em;
  margin-top: -12px;
}

.feature__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--midnight-navy);
  word-break: keep-all;
}

.feature__title em {
  color: var(--royal-brown);
}

.feature__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
  max-width: 36ch;
}

.feature__rule {
  width: 56px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--midnight-navy);
  margin: 0;
  opacity: 0.4;
}

.feature__meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--midnight-navy);
  opacity: 0.65;
}

.feature__meta-cat { letter-spacing: 0.005em; }
.feature__meta-year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--midnight-navy);
  opacity: 0.55;
}

@media (max-width: 880px) {
  .feature__image,
  .feature__body,
  .feature:nth-of-type(2n) .feature__image,
  .feature:nth-of-type(2n) .feature__body {
    grid-column: 1 / 13;
  }
  .feature__body {
    grid-row: 2;
  }
  .feature__image {
    aspect-ratio: 3 / 4;
  }
}

/* ───────────────────────────── CONTENTS (legacy) ───────────────────────────── */

.contents { padding-top: clamp(72px, 10vw, 140px); }

.contents__header {
  grid-column: 1 / 13;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(40px, 5vw, 72px);
  opacity: 0;
  animation: fade-up 1.0s var(--ease) 0.1s forwards;
}

.contents__heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 72px);
  letter-spacing: -0.02em;
  color: var(--midnight-navy);
  font-variation-settings: normal;
}

.contents__list {
  grid-column: 1 / 13;
}

.contents__entry {
  display: grid;
  grid-template-columns: 64px minmax(0, 5fr) minmax(0, 4fr) auto;
  align-items: baseline;
  padding: clamp(24px, 2.6vw, 36px) 0;
  border-top: 1px solid var(--midnight-navy);
  position: relative;
  cursor: pointer;
  transition: padding-left 0.6s var(--ease);
  opacity: 0;
  animation: fade-up 0.9s var(--ease) forwards;
}

.contents__entry:nth-of-type(1) { animation-delay: 0.30s; }
.contents__entry:nth-of-type(2) { animation-delay: 0.38s; }
.contents__entry:nth-of-type(3) { animation-delay: 0.46s; }
.contents__entry:nth-of-type(4) { animation-delay: 0.54s; }
.contents__entry:nth-of-type(5) { animation-delay: 0.62s; }

.contents__entry:last-child { border-bottom: 1px solid var(--midnight-navy); }

.contents__entry:hover { padding-left: 28px; }

.contents__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--pewter-blue);
  transition: color 0.4s var(--ease);
}
.contents__entry:hover .contents__num { color: var(--royal-brown); }

.contents__client {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(28px, 3.6vw, 52px);
  letter-spacing: -0.02em;
  color: var(--midnight-navy);
  font-variation-settings: normal;
  line-height: 1;
}

.contents__type {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--midnight-navy);
}

.contents__year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--pewter-blue);
}

/* hover preview — fixed right side */
.contents__preview {
  position: fixed;
  top: 50%;
  right: 6vw;
  width: clamp(220px, 26vw, 360px);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.3s var(--ease);
}

.contents__preview-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--pewter-blue);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s var(--ease);
}

.contents__preview-line {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
}

.contents__entry:hover .contents__preview { opacity: 1; }
.contents__entry:hover .contents__preview-image { clip-path: inset(0 0 0 0); }

@media (max-width: 720px) {
  .contents__entry {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 14px;
  }
  .contents__type, .contents__year { grid-column: 2 / 3; }
  .contents__preview { display: none; }
  .contents__entry:hover { padding-left: 0; }
}

/* ───────────────────────────── SERVICES (feature blocks) ───────────────────────────── */

.services { padding-top: clamp(72px, 10vw, 140px); }

.services__header {
  grid-column: 1 / 13;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(56px, 7vw, 96px);
}

.services__heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 72px);
  letter-spacing: -0.02em;
  color: var(--midnight-navy);
  line-height: 1;
}

.services__subhead {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--midnight-navy);
  opacity: 0.55;
}

.services__list {
  grid-column: 1 / 13;
  display: flex;
  flex-direction: column;
}

.service {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  padding: clamp(56px, 8vw, 112px) 0;
  border-top: 1px solid var(--midnight-navy);
  align-items: start;
}

.service:last-child {
  border-bottom: 1px solid var(--midnight-navy);
}

.service__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--midnight-navy);
  position: sticky;
  top: 80px;
}

.service__col {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}

.service__lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.32;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
  max-width: 32ch;
}

.service__body p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--midnight-navy);
  max-width: 60ch;
}

.service__body p + p { margin-top: 1.2em; }

.service__terms {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
}

@media (max-width: 880px) {
  .service {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .service__title { position: static; }
}

/* ───────────────────────────── ABOUT ───────────────────────────── */

.about { padding-top: clamp(72px, 10vw, 140px); }

.about__lead {
  grid-column: 2 / 11;
}

.about__lead-line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  animation: fade-up 1.2s var(--ease) forwards;
}
.about__lead-line:nth-of-type(1) { animation-delay: 0.10s; }
.about__lead-line:nth-of-type(2) { animation-delay: 0.18s; }
.about__lead-line:nth-of-type(3) { animation-delay: 0.26s; }

.about__body {
  grid-column: 4 / 11;
  margin-top: clamp(56px, 7vw, 96px);
  opacity: 0;
  animation: fade-up 1.0s var(--ease) 0.5s forwards;
}

.about__image-wrap {
  grid-column: 7 / 13;
  margin-top: clamp(72px, 9vw, 128px);
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--pewter-blue);
}

.about__image {
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(0 100% 0 0);
  animation: clip-reveal 0.9s var(--ease) 0.7s forwards;
}

.about__sign {
  grid-column: 1 / 7;
  margin-top: clamp(40px, 5vw, 72px);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--royal-brown);
  letter-spacing: -0.005em;
  font-variation-settings: normal;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 1.0s forwards;
}

@media (max-width: 720px) {
  .about__lead, .about__body, .about__image-wrap, .about__sign {
    grid-column: 1 / 13;
  }
}

/* ───────────────────────────── CONTACT ───────────────────────────── */

.contact { padding-top: clamp(72px, 10vw, 140px); }

.contact__line {
  grid-column: 2 / 12;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7.5vw, 112px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--midnight-navy);
  font-variation-settings: normal;
  opacity: 0;
  transform: translateY(22px);
  animation: fade-up 1.2s var(--ease) 0.1s forwards;
}

.contact__line em {
  font-style: italic;
  color: var(--royal-brown);
}

.contact__form {
  grid-column: 2 / 12;
  margin-top: clamp(48px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  opacity: 0;
  animation: fade-up 1.0s var(--ease) 0.5s forwards;
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
}

.contact__field-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact__field-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--royal-brown);
  letter-spacing: 0.005em;
  opacity: 0.85;
}

.contact__input,
.contact__field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--midnight-navy);
  padding: 10px 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--midnight-navy);
  outline: none;
  line-height: 1.4;
  font-variation-settings: normal;
  transition: border-color 0.4s var(--ease);
}

.contact__field {
  font-size: clamp(20px, 2.2vw, 28px);
  resize: none;
  min-height: 60px;
}

.contact__input:focus,
.contact__field:focus {
  border-bottom-color: var(--royal-brown);
}

.contact__input::placeholder,
.contact__field::placeholder {
  color: var(--pewter-blue);
  font-style: italic;
  font-variation-settings: normal;
}

.contact__actions {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2.2vw, 32px);
  flex-wrap: wrap;
  margin-top: clamp(8px, 1vw, 16px);
}

.contact__btn {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--midnight-navy);
  border-bottom: 1px solid var(--midnight-navy);
  padding: 4px 2px;
  background: transparent;
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  font-variation-settings: normal;
}

.contact__btn:hover {
  color: var(--royal-brown);
  border-color: var(--royal-brown);
  padding-right: 14px;
}

.contact__divider {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--royal-brown);
  opacity: 0.6;
}

@media (max-width: 540px) {
  .contact__row { grid-template-columns: 1fr; }
}

.contact__status {
  grid-column: 2 / 12;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--royal-brown);
  min-height: 1.4em;
}

@media (max-width: 720px) {
  .contact__line, .contact__form, .contact__status { grid-column: 1 / 13; }
}

/* ───────────────────────────── ANIMATIONS ───────────────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes clip-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes rule-grow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

[data-reveal] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s var(--ease);
}
[data-reveal].is-revealed { clip-path: inset(0 0 0 0); }

/* ───────────────────────────── CURSOR ───────────────────────────── */

/* Custom cursor disabled — visitors see their native system cursor. */
body { cursor: auto; }
a, button, input, textarea, [role="button"] { cursor: pointer; }
input, textarea { cursor: text; }

#cursor { display: none !important; }

/* Hover state: morph into the brand's stellar mark (the same star as in the logo) */
.cursor__star {
  display: none;
  width: 100%;
  height: 100%;
  color: var(--midnight-navy);
}

#cursor.is-hover {
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 0;
  mix-blend-mode: normal;
  clip-path: none;
}

#cursor.is-hover .cursor__star {
  display: block;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  #cursor { display: none; }
  body { cursor: auto; }
}

/* ───────────────────────────── PAGE TRANSITIONS (View Transitions API) ───────────────────────────
   A quiet editorial crossfade between sections — old fades out as the new fades in.
   ─────────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
  animation-delay: 120ms;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Persist the page-mesh canvas across navigation so the gradient doesn't
   blink while the rest of the page crossfades. */
.page-mesh { view-transition-name: page-mesh; }
::view-transition-old(page-mesh),
::view-transition-new(page-mesh) {
  animation: none;
}

/* ───────────────────────────── FIELD ERROR BUBBLE ─────────────────────────────
   Per-field validation message rendered as a soft callout under the
   field, with a small arrow pointing up to it. Hidden by default;
   shown when the parent field gets .is-invalid. */

.field-error {
  position: relative;
  display: none;
  margin-top: 12px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid rgba(13, 27, 62, 0.16);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(13, 27, 62, 0.08);
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: var(--royal-brown);
  width: fit-content;
  max-width: 100%;
}

.field-error::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-left: 1px solid rgba(13, 27, 62, 0.16);
  border-top: 1px solid rgba(13, 27, 62, 0.16);
  transform: rotate(45deg);
}

.contact-form__field.is-invalid .field-error,
.audit-form__field.is-invalid .field-error {
  display: block;
}

/* Highlight the field's bottom border in royal-brown while invalid. */
.contact-form__field.is-invalid .contact-form__input,
.contact-form__field.is-invalid .contact-form__textarea,
.contact-form__field.is-invalid .custom-select__trigger,
.audit-form__field.is-invalid .audit-form__input,
.audit-form__field.is-invalid .audit-form__textarea,
.audit-form__field.is-invalid .custom-select__trigger {
  border-bottom-color: var(--royal-brown);
}

/* ───────────────────────────── CUSTOM SELECT ─────────────────────────────
   Replaces native <select> with a fully styled dropdown so the OS doesn't
   take over the appearance of the options list. Backed by a hidden input
   for form submission so Netlify still collects the value. */

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(13, 27, 62, 0.18);
  padding: 8px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--midnight-navy);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s var(--ease);
}

.custom-select__trigger:hover,
.custom-select.is-open .custom-select__trigger,
.custom-select__trigger:focus-visible {
  border-color: var(--midnight-navy);
  outline: none;
}

.custom-select__label {
  color: rgba(13, 27, 62, 0.4);
  font-style: italic;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select.has-value .custom-select__label {
  color: var(--midnight-navy);
  font-style: normal;
}

.custom-select__chevron {
  width: 12px;
  height: 8px;
  color: rgba(13, 27, 62, 0.55);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.custom-select.is-open .custom-select__chevron {
  transform: rotate(180deg);
  color: var(--midnight-navy);
}

.custom-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 10;
  background: #ffffff;
  border: 1px solid rgba(13, 27, 62, 0.12);
  box-shadow: 0 14px 38px rgba(13, 27, 62, 0.10);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
}

.custom-select.is-open .custom-select__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0s;
}

.custom-select__list li {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.4;
  color: var(--midnight-navy);
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.custom-select__list li:hover,
.custom-select__list li.is-active {
  background: var(--pewter-blue);
  color: var(--midnight-navy);
}

.custom-select__list li[aria-selected="true"] {
  font-style: italic;
}

/* ───────────────────────────── BRAND AUDIT MODAL ─────────────────────────────
   A full-screen overlay containing the audit questionnaire. Hidden until
   [data-audit-modal] is opened by JS (body.audit-open). Scrollable panel
   for long forms. Closes on backdrop click, X button, or Escape. */

.audit-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0s linear 0.32s;
}

body.audit-open .audit-modal {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.32s var(--ease), visibility 0s linear 0s;
}

.audit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 62, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.audit-modal__panel {
  position: relative;
  background: #ffffff;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - clamp(40px, 8vw, 120px));
  overflow-y: auto;
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 72px);
  box-shadow: 0 30px 80px rgba(13, 27, 62, 0.18);
  transform: translateY(12px);
  transition: transform 0.42s var(--ease);
}

body.audit-open .audit-modal__panel {
  transform: translateY(0);
}

.audit-modal__close {
  position: absolute;
  top: clamp(14px, 1.6vw, 22px);
  right: clamp(14px, 1.6vw, 22px);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--midnight-navy);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s var(--ease);
}

.audit-modal__close:hover { opacity: 1; }

.audit-modal__head {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 14px);
  margin-bottom: clamp(28px, 3vw, 44px);
}

.audit-modal__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--baby-blue);
}

.audit-modal__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--midnight-navy);
}

.audit-modal__title em {
  font-style: italic;
  color: var(--royal-brown);
}

.audit-modal__intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--midnight-navy);
  opacity: 0.75;
  max-width: 56ch;
}

/* Audit form — closely related to .contact-form but defined separately so
   the modal can adjust independently. */

.audit-form {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 34px);
}

.audit-form__honeypot { display: none; }

.audit-form__step {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.2vw, 32px);
}

.audit-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 36px);
}

.audit-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-form__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--royal-brown);
  letter-spacing: 0.005em;
  opacity: 0.85;
}

.audit-form__hint em {
  color: var(--baby-blue);
  font-style: italic;
  opacity: 0.95;
}

.audit-form__input,
.audit-form__select,
.audit-form__textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(13, 27, 62, 0.18);
  padding: 8px 0;
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--midnight-navy);
  outline: none;
  transition: border-color 0.2s var(--ease);
}

.audit-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230D1B3E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
  padding-right: 24px;
  cursor: pointer;
}

.audit-form__textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.55;
  font-family: var(--serif);
}

.audit-form__input:focus,
.audit-form__select:focus,
.audit-form__textarea:focus {
  border-color: var(--midnight-navy);
}

.audit-form__input::placeholder,
.audit-form__textarea::placeholder {
  color: rgba(13, 27, 62, 0.4);
  font-style: italic;
}

.audit-form__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.audit-form__submit,
.audit-form__alt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 28px;
  background: var(--midnight-navy);
  color: #ffffff;
  border: 0;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.audit-form__submit:hover,
.audit-form__alt:hover {
  background: var(--pewter-blue);
  color: var(--midnight-navy);
}

.audit-form__status {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--royal-brown);
  min-height: 1.2em;
}

.audit-form__success {
  display: none;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: clamp(20px, 2vw, 28px) 0;
}

.audit-form.is-sent .audit-form__step,
.audit-form.is-sent .audit-form__actions,
.audit-form.is-sent .audit-form__status { display: none; }

.audit-form.is-sent .audit-form__success { display: flex; }

.audit-form__success-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  color: var(--midnight-navy);
}

.audit-form__success-body {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--midnight-navy);
  opacity: 0.85;
  max-width: 52ch;
}

@media (max-width: 640px) {
  .audit-form__row { grid-template-columns: 1fr; }
  .audit-modal__panel { padding: clamp(28px, 6vw, 40px) clamp(22px, 5vw, 32px); }
}

/* Lock background scroll when the modal is open. */
body.audit-open { overflow: hidden; }

/* ───────────────────────────── REDUCED MOTION ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}