/*!
 * Northmark — Bootstrap 6 creative & brand agency template
 *
 * Design language: editorial monochrome. Near-black on off-white, one cobalt
 * accent used sparingly, and an asymmetric grid that never centres anything.
 *
 * The structural idea carrying the identity is the work index: full-width rows
 * rather than a card grid, each revealing its thumbnail on hover. Agencies are
 * judged on the client list as much as the work, and a row puts the client name
 * at full size where a card shrinks it to a caption.
 */

:root {
  --brand: oklch(52% 0.2 262);
  --kit-section-y: 5rem;
  --nm-rule: color-mix(in oklab, var(--bs-fg-body), transparent 85%);
}

@media (width >= 768px) { :root { --kit-section-y: 7.5rem; } }

[data-bs-theme="light"] {
  --bs-bg-body: oklch(97% 0 0);
  --bs-bg-2: oklch(93.5% 0 0);
}

[data-bs-theme="dark"] {
  --bs-bg-body: oklch(16% 0 0);
  --bs-bg-2: oklch(20% 0 0);
}

.tight {
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

/* ---------------------------------------------------------------
   Header + hero
   --------------------------------------------------------------- */

.wordmark {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.25rem;
  text-decoration: none;
}

.hero {
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 7vw, 5rem);
  border-bottom: 1px solid var(--nm-rule);
}

.hero-title { font-size: clamp(2.75rem, 1rem + 7.5vw, 7rem); text-wrap: balance; }

/* Statement line that runs to the edge — the one place the grid breaks out. */
.hero-meta {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

@media (width >= 768px) { .hero-meta { grid-template-columns: repeat(3, 1fr); } }

.hero-meta p { max-width: 22rem; }

/* ---------------------------------------------------------------
   Work index — the identity piece
   --------------------------------------------------------------- */

.work-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 2rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--nm-rule);
  text-decoration: none;
  color: inherit;
  position: relative;
}

@media (width >= 768px) {
  .work-row { grid-template-columns: 3rem 1fr 12rem 5rem; gap: 2rem; }
}

.work-no { font-size: 0.8125rem; color: var(--bs-fg-3); font-variant-numeric: tabular-nums; }
.work-client { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: -0.035em; }
.work-disc { color: var(--bs-fg-3); font-size: 0.9rem; }
.work-year { color: var(--bs-fg-3); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.work-row:hover .work-client { color: var(--bs-fg-primary); }

/* Thumbnail revealed on hover, following nothing — parked to the right of the
   client name. Pointer-events off so it never interrupts the row's own hover. */
.work-thumb {
  position: absolute;
  /* Must clear the discipline and year columns or it covers them: those are
     12rem + 5rem with 2rem gutters, so anything under 19rem from the right
     edge lands on top of the text. 20rem leaves a hair of breathing room. */
  right: 20rem;
  top: 50%;
  translate: 0 -50%;
  width: 12rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--bs-radius-3);
  opacity: 0;
  scale: 0.94;
  pointer-events: none;
  transition: opacity 0.22s ease, scale 0.22s ease;
  display: none;
}

/* Only shown where there is genuinely room for it beside the longest client
   name. Below this the row is just a row, which is the right outcome. */
@media (width >= 1200px) { .work-thumb { display: block; } }

.work-row:hover .work-thumb { opacity: 1; scale: 1; }

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

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

/* ---------------------------------------------------------------
   Capabilities, approach
   --------------------------------------------------------------- */

.cap-row {
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: 1fr;
  padding: 1.5rem 0;
  border-top: 1px solid var(--nm-rule);
}

@media (width >= 768px) { .cap-row { grid-template-columns: 16rem 1fr; } }

.cap-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }

.step-no {
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: color-mix(in oklab, var(--bs-fg-body), transparent 82%);
}

.client-mark {
  display: grid;
  place-items: center;
  padding: 1.5rem 1rem;
  border: 1px solid var(--nm-rule);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bs-fg-3);
  font-size: 1.05rem;
}

/* ---------------------------------------------------------------
   People, contact, sub page
   --------------------------------------------------------------- */

.person .ph { aspect-ratio: 3 / 4; margin-bottom: 1rem; }
.person-role { color: var(--bs-fg-3); font-size: 0.875rem; }

.contact-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--nm-rule);
  background: var(--bs-bg-2);
}

.sub-head {
  padding-block: clamp(4rem, 9vw, 6rem) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--nm-rule);
}

.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--nm-rule);
}

.spec-row:last-child { border-bottom: 0; }

.result-figure {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--bs-fg-primary);
}

/* ---------------------------------------------------------------
   Fontaine customisations
   --------------------------------------------------------------- */
:root {
  --brand: oklch(46% 0.12 25);
}

.fontaine-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.fontaine-wordmark span {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--bs-fg-3);
}

.work-row { cursor: default; }
.work-row:hover { text-decoration: none; }
.work-row:hover .work-client { color: var(--bs-fg-primary); }

.client-logo {
  height: 7rem;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  border: 1px solid var(--nm-rule);
  background: color-mix(in oklab, var(--bs-bg-body), transparent 12%);
}
.client-logo img {
  max-width: 100%;
  max-height: 4rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
}
[data-bs-theme="dark"] .client-logo img { filter: grayscale(1) invert(.85); opacity: .8; }

.review-rating {
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: .02em;
}
.review-card {
  height: 100%;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--nm-rule);
}
.review-card p {
  font-size: clamp(1.25rem, 1.05rem + .75vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.review-card footer { color: var(--bs-fg-3); font-size: .875rem; }

.hp-field {
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.form-status { min-height: 1.4em; font-size: .9rem; }
.form-status.is-success { color: var(--bs-fg-primary); font-weight: 600; }
.form-status.is-error { color: #b42318; font-weight: 600; }

@media (width < 768px) {
  .fontaine-wordmark span { display:none; }
  .work-year { margin-top: .2rem; }
}

/* ---------------------------------------------------------------
   Smooth in-page navigation + improved organisation logo display
   --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

section[id], main[id], footer[id] {
  scroll-margin-top: 6.5rem;
}

.client-logo-grid {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.client-logo {
  min-height: 10rem;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1.35rem, 2vw, 2rem);
  border: 1px solid color-mix(in oklab, #111, transparent 88%);
  background: #fff;
  border-radius: .35rem;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.client-logo:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, #111, transparent 72%);
  box-shadow: 0 .55rem 1.5rem rgba(0,0,0,.055);
}

.client-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 6rem;
  object-fit: contain;
  filter: grayscale(1) brightness(.22) contrast(1.05);
  opacity: .9;
}

/* Circular and crest-style marks can sit a little taller without looking oversized. */
.client-logo img[src*="sydharb"],
.client-logo img[src*="australian-government"],
.client-logo img[src*="adf"] {
  max-height: 6.6rem;
}

[data-bs-theme="dark"] .client-logo {
  background: #f5f5f2;
  border-color: rgba(0,0,0,.12);
}

[data-bs-theme="dark"] .client-logo img {
  filter: grayscale(1) brightness(.18) contrast(1.08);
  opacity: .92;
}

@media (max-width: 767.98px) {
  html { scroll-padding-top: 5.5rem; }
  section[id], main[id], footer[id] { scroll-margin-top: 5.5rem; }
  .client-logo { min-height: 8.5rem; padding: 1.15rem; }
  .client-logo img { max-height: 5rem; max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .client-logo { transition: none; }
  .client-logo:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Fontaine v3 — work accordion, experience hover, rolling reviews, socials
   --------------------------------------------------------------- */

/* Keep “Publishing Group” at the same visual size as “Fontaine”. */
.fontaine-wordmark {
  gap: .38rem;
  font-size: 1.15rem;
  white-space: nowrap;
}
.fontaine-wordmark span {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Expandable Selected Work rows */
.work-item { border-bottom: 1px solid var(--nm-rule); }
.work-item > summary { list-style: none; }
.work-item > summary::-webkit-details-marker { display: none; }
.work-item .work-row { border-bottom: 0; cursor: pointer; }
.work-item .work-year {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.work-item .work-year::after {
  content: '+';
  color: var(--bs-fg-body);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform .2s ease;
}
.work-item[open] .work-year::after { transform: rotate(45deg); }
.work-item[open] .work-client { color: var(--bs-fg-primary); }
.work-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: .5rem 0 clamp(2rem, 5vw, 4rem) 0;
}
@media (width >= 768px) {
  .work-detail { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.work-detail-media {
  min-height: 16rem;
  background: var(--bs-bg-2);
  overflow: hidden;
  border-radius: var(--bs-radius-3);
}
.work-detail-media img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  max-height: 31rem;
  object-fit: cover;
  display: block;
}
.work-detail-copy { align-self: center; max-width: 40rem; }
.work-detail-label { letter-spacing: .14em; text-transform: uppercase; }
.work-meta {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--nm-rule);
  font-size: .875rem;
}
.work-meta span { color: var(--bs-fg-3); }
.work-meta strong { font-weight: 600; }

/* Experience hover cards */
.experience-card {
  position: relative;
  min-height: 12rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--nm-rule);
  overflow: hidden;
  outline: none;
}
.experience-stat {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--bs-fg-3);
  transition: transform .24s ease, color .24s ease;
}
.experience-stat strong {
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.3rem);
  color: var(--bs-fg-body);
}
.experience-extra {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--bs-fg-2);
  opacity: 0;
  translate: 0 .5rem;
  transition: opacity .24s ease, translate .24s ease;
}
.experience-card:hover .experience-stat,
.experience-card:focus .experience-stat {
  transform: translateY(-.35rem);
  color: var(--bs-fg-body);
}
.experience-card:hover .experience-extra,
.experience-card:focus .experience-extra {
  opacity: 1;
  translate: 0 0;
}
@media (width < 768px) {
  .experience-card { min-height: 15rem; }
  .experience-extra { opacity: 1; translate: 0 0; }
}

/* Rolling review groups */
.review-rotator { position: relative; }
.review-slide {
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity .45s ease, transform .45s ease;
}
.review-slide.is-active { opacity: 1; transform: translateY(0); }
.review-slide[hidden] { display: none !important; }
.review-rotator-controls { display: flex; gap: .45rem; margin-top: 1.5rem; }
.review-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--bs-fg-body), transparent 82%);
}
.review-dot.is-active { background: var(--bs-fg-primary); }

/* Footer social links */
.social-links { display: flex; gap: .65rem; }
.social-icon {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--nm-rule);
  border-radius: 50%;
  color: var(--bs-fg-body);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.social-icon:hover {
  color: var(--bs-fg-primary);
  border-color: var(--bs-fg-primary);
  transform: translateY(-2px);
}
.social-icon svg {
  width: 1.08rem;
  height: 1.08rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (width < 768px) {
  .fontaine-wordmark { font-size: .86rem; gap: .24rem; }
  .fontaine-wordmark span { display: inline; }
  .work-item .work-year { max-width: 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .work-item .work-year::after,
  .experience-stat,
  .experience-extra,
  .review-slide,
  .social-icon { transition: none; }
}

/* ---------------------------------------------------------------
   Fontaine v4 — client logo wall from supplied archive artwork
   --------------------------------------------------------------- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(20,20,20,.10);
  border-left: 1px solid rgba(20,20,20,.10);
  background: #fff;
}
.logo-wall .client-logo {
  min-height: 9.25rem;
  height: 9.25rem;
  border: 0;
  border-right: 1px solid rgba(20,20,20,.10);
  border-bottom: 1px solid rgba(20,20,20,.10);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transform: none;
  padding: 1.55rem 1.35rem;
}
.logo-wall .client-logo:hover {
  transform: none;
  box-shadow: none;
  background: #fafafa;
}
.logo-wall .client-logo img {
  max-width: 92%;
  max-height: 6.3rem;
  filter: none;
  opacity: .88;
  transition: opacity .18s ease, transform .18s ease;
}
.logo-wall .client-logo:hover img {
  opacity: 1;
  transform: scale(1.025);
}
[data-bs-theme="dark"] .logo-wall,
[data-bs-theme="dark"] .logo-wall .client-logo {
  background: #f7f7f5;
}
[data-bs-theme="dark"] .logo-wall .client-logo:hover { background: #fff; }
[data-bs-theme="dark"] .logo-wall .client-logo img { filter: none; opacity: .9; }

@media (max-width: 991.98px) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall .client-logo { min-height: 8.5rem; height: 8.5rem; padding: 1.2rem; }
  .logo-wall .client-logo img { max-height: 5.7rem; }
}
@media (max-width: 479.98px) {
  .logo-wall .client-logo { min-height: 7.25rem; height: 7.25rem; padding: .9rem; }
  .logo-wall .client-logo img { max-width: 95%; max-height: 4.8rem; }
}

/* ---------------------------------------------------------------
   Fontaine v5 — hero authority, library feature, refined experience,
   visibly sliding reviews
   --------------------------------------------------------------- */
.hero-authority {
  max-width: 56rem;
  font-size: clamp(1.08rem, 1rem + .7vw, 1.55rem);
  line-height: 1.42;
  letter-spacing: -.018em;
  font-weight: 520;
  color: var(--bs-fg-2);
}

.library-feature {
  padding: 0 0 clamp(3rem, 6vw, 6rem);
  background: var(--bs-bg-body);
}
.library-figure {
  position: relative;
  overflow: hidden;
  min-height: clamp(18rem, 43vw, 34rem);
  border-radius: var(--bs-radius-3);
  background: #111;
}
.library-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(18rem, 43vw, 34rem);
  object-fit: cover;
  object-position: center 49%;
}
.library-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.54) 100%);
  pointer-events: none;
}
.library-figure figcaption {
  position: absolute;
  z-index: 1;
  left: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(1.25rem, 4vw, 3.25rem);
  max-width: 44rem;
  color: #fff;
  font-size: clamp(1.55rem, 1.05rem + 2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 600;
}

/* On pointer/keyboard hover, replace the statistic with only its context. */
@media (hover: hover) and (pointer: fine) {
  .experience-card .experience-stat {
    transition: opacity .22s ease, transform .22s ease;
  }
  .experience-card .experience-extra {
    inset: 1.5rem;
    display: flex;
    align-items: center;
    bottom: auto;
    font-size: .95rem;
    line-height: 1.5;
    opacity: 0;
    translate: 0 .35rem;
  }
  .experience-card:hover .experience-stat,
  .experience-card:focus .experience-stat {
    opacity: 0;
    transform: translateY(-.25rem);
  }
  .experience-card:hover .experience-extra,
  .experience-card:focus .experience-extra {
    opacity: 1;
    translate: 0 0;
  }
}

/* A true sliding review carousel: three reviews remain visible at each stop. */
.review-viewport { overflow: hidden; }
.review-track {
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.review-slide {
  flex: 0 0 100%;
  width: 100%;
  opacity: 1 !important;
  transform: none !important;
  transition: none;
}
.review-slide[hidden] { display: block !important; }
.review-rotator-controls { align-items: center; }
.review-dot {
  display: inline-block;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.review-dot:focus-visible {
  outline: 2px solid var(--bs-fg-primary);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .hero-authority { max-width: 32rem; }
  .library-feature { padding-bottom: 3.25rem; }
  .library-figure { border-radius: var(--bs-radius-2); }
}

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

/* ---------------------------------------------------------------
   Fontaine v6 — library hero + robust review rotation
   --------------------------------------------------------------- */
.hero.hero-library {
  position: relative;
  color: #fff;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(7,7,7,.72) 0%, rgba(7,7,7,.58) 45%, rgba(7,7,7,.42) 100%),
    url('../../img/library.jpg') center 49% / cover no-repeat;
  min-height: clamp(42rem, 76vh, 56rem);
  display: flex;
  align-items: center;
}
.hero.hero-library::before {
  content: '';
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.10) 46%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.hero.hero-library > .container {
  position: relative;
  z-index: 1;
}
.hero.hero-library .hero-authority {
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 18px rgba(0,0,0,.25);
}
.hero.hero-library .hero-kicker {
  color: rgba(255,255,255,.82);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero.hero-library .hero-title {
  color: #fff;
  text-shadow: 0 2px 28px rgba(0,0,0,.32);
}
.hero.hero-library .hero-meta {
  border-top: 1px solid rgba(255,255,255,.24);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.hero.hero-library .hero-meta p {
  color: rgba(255,255,255,.80);
}
.hero.hero-library .hero-meta .fw-semibold {
  color: #fff;
}

/* The library is now the hero background; suppress the old standalone feature if present. */
.library-feature { display: none !important; }

/* Reliable review carousel. Uses a classic JS file so it also works in local previews. */
.review-rotator {
  position: relative;
}
.review-slide {
  display: none !important;
  opacity: 0;
  transform: translateY(.3rem);
}
.review-slide.is-active {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
  animation: fontaineReviewFade .55s ease both;
}
@keyframes fontaineReviewFade {
  from { opacity: 0; transform: translateY(.35rem); }
  to { opacity: 1; transform: translateY(0); }
}
.review-rotator-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.review-dot {
  width: .52rem;
  height: .52rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: color-mix(in oklab, var(--bs-fg-body), transparent 80%);
}
.review-dot.is-active { background: var(--bs-fg-primary); }
.review-dot:focus-visible {
  outline: 2px solid var(--bs-fg-primary);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .hero.hero-library {
    min-height: 44rem;
    background-position: 56% 50%;
  }
  .hero.hero-library .hero-meta {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .review-slide.is-active { animation: none; }
}

/* ---------------------------------------------------------------
   Fontaine v7 — unified work imagery, continuous reviews, publisher bio
   --------------------------------------------------------------- */
.work-detail-media {
  background: #f4f3f0;
  aspect-ratio: 3 / 2;
}
.work-detail-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}

/* Continuous review ribbon: no JS required. */
.review-marquee {
  overflow: hidden;
  margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.25);
  padding: .25rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.review-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: fontaineReviewScroll 68s linear infinite;
}
.review-marquee-group {
  display: flex;
  gap: 1rem;
  padding-right: 1rem;
}
.review-marquee-item {
  flex: 0 0 24rem;
  width: 24rem;
}
.review-card-scroll {
  height: 100%;
  min-height: 12.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  background: var(--bs-bg-2);
  border: 1px solid var(--nm-rule);
  border-radius: var(--bs-radius-3);
  padding: 1.5rem;
}
.review-card-scroll p {
  font-size: 1.02rem;
  line-height: 1.52;
}
.review-marquee:hover .review-marquee-track,
.review-marquee:focus-within .review-marquee-track {
  animation-play-state: paused;
}
@keyframes fontaineReviewScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.publisher-bio-hero {
  padding-top: clamp(8rem, 14vw, 12rem);
}
.publisher-bio-hero h1 {
  max-width: 12ch;
}

@media (max-width: 767.98px) {
  .review-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .review-marquee-item {
    flex-basis: min(82vw, 22rem);
    width: min(82vw, 22rem);
  }
  .review-card-scroll { min-height: 11.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .review-marquee-track {
    animation: none;
    transform: none;
  }
  .review-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/* ---------------------------------------------------------------
   Fontaine v8 — art-directed work renders + restrained logo field
   --------------------------------------------------------------- */

/* Selected Work imagery: use the full allocated frame with soft editorial corners. */
.work-detail-media {
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  padding: 0;
  background: transparent;
  border-radius: 1.15rem;
  overflow: hidden;
}
.work-detail-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* Client marks: quieter, smaller and floating on the page rather than boxed tiles. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.6rem) clamp(2rem, 4vw, 4.5rem);
  border: 0;
  background: transparent;
  align-items: center;
}
.logo-wall .client-logo {
  min-height: 6.8rem;
  height: 6.8rem;
  padding: .65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.logo-wall .client-logo:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}
.logo-wall .client-logo img {
  max-width: 69%; /* ~25% smaller than the previous 92% */
  max-height: 4.7rem; /* ~25% smaller than the previous 6.3rem */
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: opacity .18s ease, transform .18s ease;
}
.logo-wall .client-logo:hover img {
  opacity: .95;
  transform: scale(1.02);
}
[data-bs-theme="dark"] .logo-wall,
[data-bs-theme="dark"] .logo-wall .client-logo,
[data-bs-theme="dark"] .logo-wall .client-logo:hover {
  background: transparent;
}
[data-bs-theme="dark"] .logo-wall .client-logo img {
  filter: grayscale(1) invert(.92);
  opacity: .72;
}

@media (max-width: 991.98px) {
  .logo-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2rem;
  }
  .logo-wall .client-logo {
    min-height: 6rem;
    height: 6rem;
    padding: .5rem;
  }
  .logo-wall .client-logo img {
    max-width: 74%;
    max-height: 4.1rem;
  }
}
@media (max-width: 479.98px) {
  .logo-wall {
    gap: 1.2rem 1rem;
  }
  .logo-wall .client-logo {
    min-height: 5.2rem;
    height: 5.2rem;
    padding: .35rem;
  }
  .logo-wall .client-logo img {
    max-width: 78%;
    max-height: 3.6rem;
  }
}


/* Fontaine v9: combined Fontaine Press selected-work entry */

.press-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.press-duo-card {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(2px);
}
[data-bs-theme="dark"] .press-duo-card {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
@media (max-width: 767.98px) {
  .press-duo-grid { grid-template-columns: 1fr; }
}


/* Fontaine v10: tighter logo wall + review slideshow */

.logo-wall {
  gap: .45rem .8rem;
}
.logo-wall .client-logo {
  min-height: 5.5rem;
  height: 5.5rem;
  padding: .15rem .35rem;
}
.logo-wall .client-logo img {
  max-width: 64%;
  max-height: 4rem;
}
@media (max-width: 991.98px) {
  .logo-wall { gap: .35rem .6rem; }
  .logo-wall .client-logo { min-height: 4.9rem; height: 4.9rem; padding: .1rem .25rem; }
  .logo-wall .client-logo img { max-width: 68%; max-height: 3.4rem; }
}

.review-slider {
  position: relative;
  overflow: hidden;
}
.review-slides {
  position: relative;
  min-height: 22rem;
}
.review-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(4%);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.review-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}
.review-slide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.review-slider-controls {
  display:flex;
  justify-content:center;
  gap:.55rem;
  margin-top:1.25rem;
}
.review-dot {
  width:.7rem; height:.7rem; border-radius:999px; border:0;
  background: rgba(0,0,0,.18);
  padding:0; appearance:none;
  transition: transform .2s ease, background .2s ease;
}
.review-dot.is-active { background: var(--primary); transform: scale(1.15); }
[data-bs-theme="dark"] .review-dot { background: rgba(255,255,255,.24); }
[data-bs-theme="dark"] .review-dot.is-active { background: var(--primary); }
@media (max-width: 991.98px) {
  .review-slides { min-height: 31rem; }
  .review-slide-grid { grid-template-columns: 1fr; }
}


/* Fontaine v11: latest FP duo image, tighter logos, expanded review slideshow */

.logo-wall {
  gap: .15rem .35rem;
}
.logo-wall .client-logo {
  min-height: 4.6rem;
  height: 4.6rem;
  padding: .05rem .2rem;
}
.logo-wall .client-logo img {
  max-width: 62%;
  max-height: 3.5rem;
}
@media (max-width: 991.98px) {
  .logo-wall {
    gap: .12rem .25rem;
  }
  .logo-wall .client-logo {
    min-height: 4.25rem;
    height: 4.25rem;
    padding: .05rem .15rem;
  }
  .logo-wall .client-logo img {
    max-width: 66%;
    max-height: 3rem;
  }
}

.review-slider {
  position: relative;
  overflow: hidden;
}
.review-slides {
  position: relative;
  transition: height .28s ease;
}
.review-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(2.5%);
  transition: opacity .42s ease, transform .42s ease;
  pointer-events: none;
}
.review-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.review-slide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.review-slider .review-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 13.75rem;
}
.review-slider-controls {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.25rem;
}
.review-dot {
  width: .72rem;
  height: .72rem;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.17);
  padding: 0;
  appearance: none;
  transition: background .2s ease, transform .2s ease;
}
.review-dot.is-active {
  background: var(--primary);
  transform: scale(1.15);
}
[data-bs-theme="dark"] .review-dot { background: rgba(255,255,255,.23); }
[data-bs-theme="dark"] .review-dot.is-active { background: var(--primary); }
@media (max-width: 991.98px) {
  .review-slide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-slider .review-card { min-height: 12.5rem; }
}
@media (max-width: 575.98px) {
  .review-slide-grid { grid-template-columns: 1fr; }
  .review-slider .review-card { min-height: auto; }
}


/* Fontaine v12: hero spacing + selected work entry + crawler hint */

.hero.hero-library {
  padding-top: clamp(5rem, 8vw, 6.6rem);
  min-height: auto;
}
.hero.hero-library .container {
  padding-top: 0;
}
.hero-authority {
  margin-top: 0;
}
.hero-kicker {
  margin-bottom: 1rem !important;
}
@media (max-width: 767.98px) {
  .hero.hero-library {
    padding-top: 4.35rem;
  }
  .hero-title {
    margin-top: 0;
  }
}


/* Fontaine v13: updated cacao selected work + 25-review slideshow */

.review-slide-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem;
}
.review-slider .review-card {
  min-height: 13rem;
  padding: 1.15rem 1rem;
}
.review-slider .review-card p {
  font-size: .94rem;
  line-height: 1.5;
}
.review-slider .review-card footer {
  font-size: .83rem;
}
@media (max-width: 1199.98px) {
  .review-slide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .review-slide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .review-slide-grid { grid-template-columns: 1fr; }
}


/* Fontaine v15: review attribution typography */

.review-card footer em {
  font-style: italic;
  font-weight: 400;
}


/* Fontaine v16: stronger crawler hints for selected works + curated review refresh */

#work.robots-nocontent {}
.review-slider .review-card p {
  font-size: .93rem;
  line-height: 1.52;
}
.review-slider .review-card footer {
  line-height: 1.45;
}


/* Fontaine v17: expanded review archive (55 total / 11 panels) */
.review-slider-controls {
  flex-wrap: wrap;
  max-width: 12rem;
  margin-left: auto;
  margin-right: auto;
}


/* Fontaine v18: publishing turnaround page */

.turnaround-hero {
  padding-top: clamp(6rem, 10vw, 8.5rem);
}
.turnaround-note {
  border-left: 3px solid var(--primary);
  padding: 1rem 1.15rem;
  background: rgba(0,0,0,.035);
  color: var(--fg-2);
}
[data-bs-theme="dark"] .turnaround-note {
  background: rgba(255,255,255,.04);
}
.turnaround-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
.turnaround-card {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 1rem;
  padding: 1.4rem;
  background: rgba(255,255,255,.38);
  min-height: 15rem;
}
[data-bs-theme="dark"] .turnaround-card {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
}
.turnaround-card h3 {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  margin: .4rem 0 1rem;
}
.turnaround-card p:last-child {
  color: var(--fg-2);
  margin-bottom: 0;
}
.turnaround-label {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.turnaround-production {
  border-top: 1px solid rgba(0,0,0,.12);
}
.turnaround-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
[data-bs-theme="dark"] .turnaround-production,
[data-bs-theme="dark"] .turnaround-row {
  border-color: rgba(255,255,255,.14);
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.1rem;
  background: #000;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.12);
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.turnaround-factors p {
  padding: 0 0 1rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  color: var(--fg-2);
}
[data-bs-theme="dark"] .turnaround-factors p {
  border-color: rgba(255,255,255,.1);
}
@media (max-width: 991.98px) {
  .turnaround-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .turnaround-row {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
}
@media (max-width: 575.98px) {
  .turnaround-grid {
    grid-template-columns: 1fr;
  }
  .turnaround-card {
    min-height: 0;
  }
}