/* ===================================================================
   Arvor Studio — arvor.studio
   Base styles / homepage
   =================================================================== */

:root {
  --ink: #212a37;
  --ink-hero: #242526;
  --surface: #eff2f7;
  --divider: rgba(156, 152, 188, 0.2);

  --radius-card: 20px;
  --radius-pill: 999px;

  --gap: 24px;
  --maxw: 1400px;
  --page-pad: clamp(20px, 4.2vw, 80px);

  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "CapitoliumNews 2", "Newsreader", Georgia, "Times New Roman", serif;
}

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

/* Visually hidden but available to screen readers / SEO (e.g. section headings) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 50px var(--page-pad) 30px;
}

.logo {
  display: inline-flex;
  transition: opacity 0.25s ease;
}

.logo:hover {
  opacity: 0.72;
}

.logo img {
  height: 46px;
  width: auto;
}

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  position: relative;
  z-index: 70;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nav-toggle__bar {
  width: 26px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* "Back to projects" in the header — project pages, mobile only */
.header-back {
  display: none;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity 0.25s ease;
}

.header-back svg {
  width: 16px;
  height: 16px;
}

.header-back:hover {
  opacity: 1;
}

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

/* Social icons only appear inside the mobile nav overlay */
.nav-social {
  display: none;
}

.nav-link {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  position: relative;
  transition: opacity 0.25s ease;
}

.nav-link:hover {
  opacity: 1;
}

.nav-link.is-active {
  font-weight: 600;
  opacity: 1;
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 2px;
  background: var(--ink);
}

.nav-divider {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--divider);
  flex: none;
}

.lang {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-globe {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: var(--ink);
}

.lang-opt {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.lang-opt.is-active {
  opacity: 1;
}

/* ---------- Auto-hiding sticky header (desktop) ----------
   Hidden above the viewport by default; JS adds .is-visible when the user
   scrolls up (and not at the very top). Frosted so it reads over any content. */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--divider);
  will-change: transform;
}

.sticky-header.is-visible {
  transform: translateY(0);
}

.sticky-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--page-pad);
}

.sticky-header .logo img {
  height: 35px;
  width: auto;
  display: block;
}

.sticky-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Put the active underline exactly on the sticky header's bottom border:
   stretch the nav (and its links) to the full bar height, keep the label
   centred, then drop the underline by the bar's bottom padding (20px). */
.sticky-header .sticky-nav {
  align-self: stretch;
  align-items: stretch;
  position: relative;
  top: 1px;
}

.sticky-header .sticky-nav .nav-link {
  display: flex;
  align-items: center;
}

.sticky-header .nav-link.is-active::after {
  bottom: -20px;
}

/* The mobile sticky nav already covers small screens — never show both */
@media (max-width: 720px) {
  .sticky-header {
    display: none;
  }
}

.lang-opt:not(.is-active):hover {
  opacity: 0.8;
}

.lang-sep {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.24em;
  color: var(--ink);
  opacity: 0.2;
}

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

.hero {
  max-width: calc(950px + 2 * var(--page-pad));
  margin: 80px auto 100px;
  padding: 0 var(--page-pad);
  text-align: center;
}

.hero-text {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 45px);
  line-height: 1.34;
  letter-spacing: 0.02em;
  color: var(--ink-hero);
  text-wrap: balance;
}

.hero-text__line {
  display: block;
}

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

.work {
  max-width: calc(var(--maxw) + 2 * var(--page-pad));
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.work-item {
  grid-column: span 1;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  aspect-ratio: 688 / 460;
  background: var(--surface);
  transform: translateZ(0);
  container-type: inline-size;
  transition: box-shadow 0.4s ease;
}

.work-item--full {
  grid-column: 1 / -1;
  aspect-ratio: 1400 / 700;
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.work-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(33, 42, 55, 0.04);
  pointer-events: none;
}

/* Hover overlay: dark veil + blurred thumbnail, vertical client/year at
   bottom-left, serif project title at bottom-right. Scales with the card
   via container-query units so half- and full-width cards match. */
.work-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  background:
    radial-gradient(130% 130% at 12% 105%, rgba(18, 19, 20, 0.96) 0%, rgba(30, 31, 32, 0.62) 48%, rgba(36, 37, 38, 0.34) 100%),
    linear-gradient(180deg, rgba(36, 37, 38, 0.14), rgba(36, 37, 38, 0.5));
}

.work-overlay__meta {
  position: absolute;
  left: 4cqw;
  bottom: 4.4cqw;
  display: flex;
  align-items: flex-end;
  gap: 0.8cqw;
}

.work-overlay__client,
.work-overlay__year {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
  letter-spacing: 0.04em;
  font-size: 3.4cqw;
  white-space: nowrap;
}

.work-overlay__client {
  font-weight: 700;
  color: #edf9fc;
  opacity: 0.85;
}

.work-overlay__year {
  font-weight: 400;
  color: #cde4f0;
  opacity: 0.7;
}

.work-overlay__title {
  position: absolute;
  right: 6cqw;
  bottom: 6cqw;
  margin: 0;
  text-align: right;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 8cqw;
  line-height: 1.16;
  letter-spacing: 0.03em;
  color: #edf3f5;
}

/* Full-width cards are ~2× wider, so scale their overlay text down a touch
   (relative to the half cards) to keep a sensible hierarchy. */
.work-item--full .work-overlay__title {
  font-size: 5cqw;
}

.work-item--full .work-overlay__client,
.work-item--full .work-overlay__year {
  font-size: 2.4cqw;
}

@media (hover: hover) {
  .work-item:hover img {
    transform: scale(1.05);
    filter: blur(4px) brightness(0.92);
  }

  .work-item:hover {
    box-shadow: 0 24px 55px -24px rgba(33, 42, 55, 0.4);
  }

  .work-item:hover .work-overlay {
    opacity: 1;
  }
}

.work-item img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.5s ease;
}

.work-item:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.work-item:focus-visible .work-overlay {
  opacity: 1;
}

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

.site-footer {
  margin-top: clamp(56px, 8vw, 100px);
  padding: 0 var(--page-pad) 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.footer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease;
}

/* Dark fill wipes in from the left; icon turns white (matches copy-email) */
.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-hero);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.15, 1);
}

.pill:hover::before,
.pill:focus-visible::before {
  transform: scaleX(1);
}

.pill:hover,
.pill:focus-visible {
  color: #fff;
}

.pill--icon {
  width: 50px;
}

.pill--icon .icon {
  width: 24px;
  height: 24px;
}

/* Click-to-copy email button — dark fill wipes in horizontally on hover,
   text swaps email -> "Copy email" -> "Email copied" (no avatar). */
.copy-email {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

.copy-email__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-hero);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.15, 1);
}

.copy-email:hover .copy-email__bg,
.copy-email:focus-visible .copy-email__bg,
.copy-email.is-copied .copy-email__bg {
  transform: scaleX(1);
}

.copy-email__txt {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.copy-email__txt--hover,
.copy-email__txt--done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
}

.copy-email:hover .copy-email__txt--default,
.copy-email:focus-visible .copy-email__txt--default {
  opacity: 0;
}

.copy-email:hover .copy-email__txt--hover,
.copy-email:focus-visible .copy-email__txt--hover {
  opacity: 1;
}

.copy-email.is-copied .copy-email__txt--default,
.copy-email.is-copied .copy-email__txt--hover {
  opacity: 0;
}

.copy-email.is-copied .copy-email__txt--done {
  opacity: 1;
}

.footer-copy {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.footer-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  flex: none;
}

/* ===================================================================
   Project / case-study page
   =================================================================== */

.case-intro {
  max-width: calc(1240px + 2 * var(--page-pad));
  margin: 56px auto 0;
  padding: 0 var(--page-pad);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.back-link:hover {
  opacity: 1;
}

.back-link svg {
  width: 16px;
  height: 16px;
}

/* Project pages: the sticky header swaps the logo for a "Back to projects"
   button. The main header keeps the logo (its own mobile-only swap lives in
   the mobile-nav block), and the in-content back-link above the title stays. */
.sticky-header--project .logo {
  display: none;
}

.sticky-header--project .header-back {
  display: inline-flex;
}

.case-title {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(38px, 5.6vw, 80px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ink-hero);
  text-wrap: balance;
}

.case-cols {
  display: flex;
  gap: 160px;
  align-items: flex-start;
  margin-top: 50px;
}

.case-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-main p {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: rgba(36, 37, 38, 0.9);
}

.case-main p strong,
.case-main p b {
  font-weight: 600;
  color: rgb(36, 37, 38);
}

.case-video {
  margin: 0 0 24px;
  aspect-ratio: 780 / 460;
  border-radius: var(--radius-card);
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.case-video--embed {
  aspect-ratio: 16 / 9;
}

.case-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.case-video__play {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.case-video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
}

/* Outcome stat tiles (big figure + label) */
.case-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 4px 0 24px;
}

.case-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(33, 42, 55, 0.14);
  border-radius: 14px;
  box-shadow: 0 4px 14px -6px rgba(33, 42, 55, 0.16);
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}

.case-stat:hover {
  border-color: rgba(36, 37, 38, 0.6);
  box-shadow: 0 14px 34px -10px rgba(33, 42, 55, 0.3);
}

.case-stat__value {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-hero);
}

.case-stat__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(36, 37, 38, 0.6);
}

/* Modules shown as a wrapping cluster of tag pills */
.case-tags {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.case-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid rgba(33, 42, 55, 0.14);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  box-shadow: 0 4px 14px -6px rgba(33, 42, 55, 0.16);
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}

.case-tag:hover {
  border-color: rgba(36, 37, 38, 0.6);
  box-shadow: 0 12px 32px -8px rgba(33, 42, 55, 0.3);
  z-index: 2;
}

.case-meta {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.meta-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-label {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-hero);
}

.meta-value {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: var(--ink-hero);
  opacity: 0.8;
}

.case-media {
  max-width: calc(var(--maxw) + 2 * var(--page-pad));
  margin: 77px auto 0;
  padding: 0 var(--page-pad);
}

.case-media__inner {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.case-media__inner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Clean lazy-load reveal. Images default to visible; JS adds .is-loading only
   to images not yet loaded, then removes it on load → soft fade-in. If JS is
   off (or the image is cached), nothing is hidden. */
.case-img {
  transition: opacity 0.7s ease;
}

.case-img.is-loading {
  opacity: 0;
}

/* Image blocks that follow their own text section sit closer to it, so the
   page reads as text / image / text / image with a clear rhythm. */
.case-media--tight {
  margin-top: clamp(32px, 4.5vw, 52px);
}

/* -------------------------------------------------------------------
   Alternating text sections (Ice Insights and later cases)
   ------------------------------------------------------------------- */

/* Lead line right under the intro, a touch larger and darker. */
.case-main .case-lead {
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  color: var(--ink-hero);
}

/* Emphasised transition line before the first numbered section. */
.case-main .case-emph {
  font-weight: 600;
  color: var(--ink-hero);
}

/* Small caption pointing at the slider. */
.case-hint {
  margin-top: 4px !important;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(36, 37, 38, 0.5);
}

/* A standalone text section, aligned to the same left edge as the intro,
   with its body kept to the reading column. */
.case-section {
  max-width: calc(1240px + 2 * var(--page-pad));
  margin: clamp(76px, 9vw, 116px) auto 0;
  padding: 0 var(--page-pad);
}

.case-section__body {
  max-width: 780px;
}

.case-section__body > p {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: rgba(36, 37, 38, 0.9);
}

.case-section__body > p strong,
.case-section__body > p b {
  font-weight: 600;
  color: rgb(36, 37, 38);
}

/* Numbered section heading. The number is absolutely positioned behind the
   title, in an icy blue, peeking out to the left. */
.case-section__title {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: var(--ink-hero);
  text-wrap: balance;
}

/* When the first section lives inside the intro's main column, give the
   heading a little air above it. */
.case-main .case-section__title {
  margin-top: 28px;
}

.case-section__num {
  width: 80px;
  display: block;
  position: absolute;
  text-align: right;
  left: -66px;
  top: -11px;
  z-index: -1;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.7em;
  line-height: 1;
  color: #7ba3dc; /* blue / ice / 400 */
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

/* Below the widescreen band the page padding shrinks, so pull the ghost
   number in a little to keep it from clipping against the viewport edge. */
@media (max-width: 1400px) {
  .case-section__num {
    width: 66px;
    left: -52px;
    top: -8px;
    font-size: 1.5em;
  }
}

.case-link {
  color: #5274a2;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.case-link:hover {
  color: #b28565;
}

/* -------------------------------------------------------------------
   Before / after comparison slider
   ------------------------------------------------------------------- */
.compare {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
  --pos: 30%;
}

/* Base image (before) sits in normal flow and defines the box height. */
.compare__base {
  display: block;
  width: 100%;
  height: auto;
}

/* Reveal layer (after) overlays the base, clipped to the left of the handle. */
.compare__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.compare__revealimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(24, 45, 70, 0.08);
  pointer-events: none;
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #509bff 0%, #0a5bc4 55%, #003f80 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  box-shadow: 0 6px 18px -4px rgba(0, 63, 128, 0.5),
    0 0 0 4px rgba(255, 255, 255, 0.85);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.compare__handle svg {
  width: 24px;
  height: 24px;
}

/* Dragging keeps the exact hover look: the pointer leaves the handle while
   dragging, so we hold the state with a class on the slider instead. */
.compare__handle:hover,
.compare.is-dragging .compare__handle {
  transform: translate(-50%, -50%) scale(1.06);
  background: linear-gradient(135deg, #2ae2f4 0%, #006ad5 100%);
}

.compare__handle:focus-visible {
  outline: none;
  box-shadow: 0 6px 18px -4px rgba(0, 63, 128, 0.5),
    0 0 0 4px rgba(255, 255, 255, 0.95), 0 0 0 7px rgba(80, 155, 255, 0.55);
}

/* Frosted peach-to-cream corner labels. */
.compare__label {
  position: absolute;
  bottom: 20px;
  padding: 0 24px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #102f48; /* blue / ice / 900 */
  background: linear-gradient(105deg, #ff8f84 0%, #ffd0a0 55%, #fff8c8 100%);
  box-shadow: 0 6px 16px -6px rgba(24, 45, 70, 0.35);
  pointer-events: none;
}

.compare__label--after {
  left: 20px;
}

.compare__label--before {
  right: 20px;
}

@media (max-width: 900px) {
  .case-cols {
    flex-direction: column;
    gap: 40px;
  }

  /* IceInsights only: the first numbered section lives inside .case-main, so
     the meta would otherwise land far below it. Pull the meta above the text. */
  .case-cols--meta-first .case-meta {
    order: -1;
  }

  /* Meta above the content: Role full-width (values in 2 cols),
     then Client + Year side by side. */
  .case-meta {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 24px;
  }

  .case-meta > .meta-group:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    row-gap: 12px;
  }

  .case-meta > .meta-group:first-child .meta-label {
    grid-column: 1 / -1;
  }

  /* Tighter line-height so wrapped values read as one item; the wider
     row-gap above keeps separate items clearly apart. */
  .case-meta .meta-value {
    line-height: 20px;
  }
}

@media (max-width: 680px) {
  .case-intro {
    margin-top: 32px;
  }

  .case-main p,
  .case-section__body > p,
  .meta-label,
  .meta-value {
    font-size: 16px;
    line-height: 26px;
  }

  .case-main .case-lead {
    font-size: 18px;
    line-height: 28px;
  }

  .case-media {
    margin-top: 48px;
  }

  /* On narrow screens the number stacks above the title instead of hanging
     into the (now tiny) side margin. */
  .case-section__num {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    left: auto;
    top: auto;
    z-index: auto;
    font-size: 40px;
    margin-bottom: 2px;
  }

  .compare__handle {
    width: 50px;
    height: 50px;
  }

  .compare__handle svg {
    width: 20px;
    height: 20px;
  }

  .compare__label {
    bottom: 12px;
    height: 38px;
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .compare__label--after,
  .compare__label--left {
    left: 12px;
  }

  .compare__label--before,
  .compare__label--right {
    right: 12px;
  }
}

/* ===================================================================
   About & Contact pages
   =================================================================== */

.about-wrap {
  max-width: calc(1000px + 2 * var(--page-pad));
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding: 0 var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(80px, 14vw, 150px);
  /* Shared left-column width + gap so the About text block and the Services
     philosophy block start at the same x (right blocks stay aligned). */
  --cols-left: 38%;
  --cols-gap: clamp(40px, 6vw, 72px);
}

.about,
.services {
  width: 100%;
}

/* About — grid so it reflows: desktop = photo left / title + text right;
   mobile = photo left + title right on top, text full width below. */
.about {
  display: grid;
  grid-template-columns: var(--cols-left) 1fr;
  grid-template-areas:
    "photo hello"
    "photo text";
  column-gap: var(--cols-gap);
  row-gap: 32px;
  align-items: start;
}

.about-photo {
  grid-area: photo;
  align-self: start;
  width: 100%;
  max-width: 389px;
  aspect-ratio: 389 / 479;
  border-radius: 20px;
  background: var(--surface);
  object-fit: cover;
  display: block;
}

.about-text {
  grid-area: text;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-hello {
  grid-area: hello;
  padding-top: 40px;
  position: relative;
  left: -150px;
  z-index: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(52px, 6.8vw, 90px);
  line-height: 1.16;
  letter-spacing: 0.03em;
  /* Knockout effect: white text reads dark on the page and light where it
     overlaps the (dark) photo, via difference blending. */
  color: #fff;
  mix-blend-mode: difference;
}

.about-intro {
  margin: 0;
  font-weight: 500;
  font-size: clamp(19px, 2.3vw, 24px);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink-hero);
  text-align: justify;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-bio p {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: rgba(36, 37, 38, 0.85);
  text-align: justify;
}

.about-bio p strong {
  font-weight: 600;
  color: rgb(36, 37, 38);
}

/* Services */
.services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.services-head-row {
  display: flex;
  gap: var(--cols-gap);
  align-items: flex-start;
  width: 100%;
  padding-bottom: 20px;
}

.services-head {
  flex: none;
  width: var(--cols-left);
  max-width: 389px;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1.18;
  letter-spacing: 0.03em;
  color: var(--ink-hero);
}

.services-philosophy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.services-philosophy p {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: rgba(36, 37, 38, 0.85);
  text-align: justify;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
}

.service {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 50px;
  background: #fff;
  border: 1px solid rgba(33, 42, 55, 0.12);
  border-radius: 6px;
  box-shadow: 0 6px 20px -12px rgba(33, 42, 55, 0.18);
}

.service__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0.03em;
  color: var(--ink-hero);
}

.service__text {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: rgba(36, 37, 38, 0.9);
}

.service--dark {
  background: #242526;
  border: none;
  box-shadow: 0 20px 50px -24px rgba(20, 22, 26, 0.5);
  transform: rotate(-1.5deg);
}

.service--dark .service__title {
  color: #fff;
}

.service--dark .service__text {
  color: #eff2f7;
  opacity: 0.8;
}

.services-note {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(36, 37, 38, 0.85);
}

/* Custom contact footer on the About page */
.about-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 8vw, 90px);
  width: 360px;
  max-width: 100%;
  padding-bottom: 64px;
}

.about-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.about-contact__head {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.03em;
  color: var(--ink-hero);
}

.about-contact__pills {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.copy-email--dark {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: #242526;
}

.copy-email--dark .copy-email__txt--default {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: #fff;
}

.copy-email--dark .copy-email__icon {
  width: 20px;
  height: 20px;
}

.copy-email--dark .copy-email__bg {
  background: #cde4f0;
}

.copy-email--dark .copy-email__txt--hover,
.copy-email--dark .copy-email__txt--done {
  color: #212a37;
  font-size: 15px;
}

.about-phone-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 60px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  color: #212a37;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  transition: background 0.25s ease;
}

.about-phone-pill:hover {
  background: #e6ebf3;
}

.about-phone-pill svg {
  width: 20px;
  height: 20px;
}

.about-contact__socials {
  gap: 20px;
}

@media (max-width: 900px) {
  /* Mobile: photo + overlapping title on top, text full width below */
  .about {
    grid-template-areas:
      "photo hello"
      "text  text";
    row-gap: 24px;
  }

  .about-hello {
    padding-top: 16px;
    left: -60px;
    font-size: clamp(32px, 10vw, 52px);
  }

  .services-head-row {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 8px;
  }

  .services-head {
    width: 100%;
  }

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

/* ---------- Contact page: full-screen location photo ---------- */

.contact-hero {
  position: relative;
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* visible viewport — keeps the bottom-anchored card in view without scrolling (excludes mobile address bar) */
  overflow: hidden;
}

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

/* Veil reversed horizontally (darker on the right, under the card).
   Layered twice — one full, one at 30% — matching the Figma. */
.contact-hero__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    130% 120% at 32% 22%,
    rgba(36, 37, 38, 0.35) 0%,
    rgba(36, 37, 38, 0.9) 100%
  );
}

.contact-hero__veil--dim {
  opacity: 0.3;
}

/* Location now bottom-left */
.contact-hero__place {
  position: absolute;
  left: var(--page-pad);
  bottom: calc(var(--page-pad) - 16px);
  text-align: left;
  color: #fff;
  z-index: 5;
}

/* Contact card on the right — dark glass panel, bottom-aligned with FRANCE.
   Only the area BEHIND the card is blurred (frosted glass), not the photo. */
.contact-card {
  position: absolute;
  z-index: 5;
  bottom: calc(var(--page-pad) - 16px + 14px);
  right: var(--page-pad);
  width: min(500px, calc(100vw - 48px));
  padding: 48px;
  background: rgba(30, 32, 34, 0.5);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid rgba(237, 249, 252, 0.2);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(8, 10, 14, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.contact-card__id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-shadow: 0 2px 8px rgba(36, 37, 38, 0.25);
}

.contact-card__name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #fff;
}

.contact-card__role {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 26px;
  letter-spacing: 0.03em;
  color: #edf9fc;
  opacity: 0.8;
}

.contact-card__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* White email button (keeps the copy-on-click behaviour) */
.copy-email--solid {
  width: 100%;
  height: 66px;
  padding: 0 20px;
  border-radius: 4px;
  background: #fff;
}

.copy-email--solid .copy-email__txt--default {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: #212a37;
}

.copy-email--solid .copy-email__icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.copy-email--solid .copy-email__txt--hover,
.copy-email--solid .copy-email__txt--done {
  font-size: 16px;
  color: #212a37;
}

/* Gentle hover: light-blue fill wipes in, text stays dark (no white→black flip) */
.copy-email--solid .copy-email__bg {
  background: #cde4f0;
}

/* Outlined phone button */
.contact-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 66px;
  border: 2px solid rgba(237, 249, 252, 0.5);
  border-radius: 4px;
  color: #fff;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.05em;
  opacity: 0.95;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.contact-phone svg {
  width: 24px;
  height: 24px;
}

.contact-phone:hover {
  border-color: rgba(237, 249, 252, 0.9);
  background: rgba(237, 249, 252, 0.08);
}

.contact-card__socials {
  display: flex;
  gap: 16px;
}

.contact-card__socials .pill {
  height: 40px;
}

.contact-card__socials .pill--icon {
  width: 40px;
}

.contact-card__socials .pill--icon .icon {
  width: 20px;
  height: 20px;
}

/* Match the email button: light-blue wipe, icon stays dark */
.contact-card__socials .pill::before {
  background: #cde4f0;
}

.contact-card__socials .pill:hover,
.contact-card__socials .pill:focus-visible {
  color: var(--ink);
}

@media (max-width: 720px) {
  .site-header--light {
    padding-top: 28px;
    padding-bottom: 40px;
  }
}

/* Hide the location label on every screen below 1000px */
@media (max-width: 999px) {
  .contact-hero__place {
    display: none;
  }
}

@media (max-width: 680px) {
  .contact-card {
    top: auto;
    bottom: var(--page-pad);
    left: var(--page-pad);
    right: var(--page-pad);
    width: auto;
    transform: none;
    padding: 32px 24px;
    gap: 28px;
  }

  .contact-card__name {
    font-size: 30px;
  }

  .copy-email--solid,
  .contact-phone {
    height: 58px;
  }

  .copy-email--solid .copy-email__txt--default {
    font-size: 19px;
  }

  .contact-phone {
    font-size: 19px;
  }

  .contact-card__role {
    font-size: 16px;
  }
}

.contact-hero__city {
  margin: 0 0 0 4px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.3;
  letter-spacing: 0.05em;
  color: #edf9fc;
  opacity: 0.9;
  text-shadow: 0 2px 8px rgba(36, 37, 38, 0.25);
}

.contact-hero__country {
  margin: 6px 0 0;
  font-weight: 700;
  font-size: clamp(46px, 6.6vw, 80px);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(36, 37, 38, 0.25);
}

/* Light header variant (overlaid on the photo) */
.site-header--light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-bottom: 44px;
  background: linear-gradient(
    to bottom,
    rgba(36, 37, 38, 0.35) 0%,
    rgba(36, 37, 38, 0) 100%
  );
}

.site-header--light .logo img {
  filter: brightness(0) invert(1);
}

.site-header--light .nav-link {
  color: #edf9fc;
  opacity: 0.8;
  text-shadow: 0 1px 3px rgba(36, 37, 38, 0.25);
}

.site-header--light .nav-link:hover {
  opacity: 1;
}

.site-header--light .nav-link.is-active {
  color: #fff;
  opacity: 1;
}

.site-header--light .nav-link.is-active::after {
  background: #fff;
}

.site-header--light .nav-toggle__bar {
  background: #fff;
}

/* When the white menu overlay is open, switch the X back to dark so it stays visible */
.site-header--light .nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: var(--ink);
}

/* ===================================================================
   Shared interaction polish
   =================================================================== */

body.nav-lock {
  overflow: hidden;
}

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

@media (max-width: 900px) {
  .site-header {
    padding-top: 32px;
    padding-bottom: 24px;
    gap: 16px;
  }

  .logo img {
    height: 40px;
  }

  .nav {
    gap: 24px;
  }

  .hero {
    margin: 56px auto 72px;
  }
}

/* Card radius (20/16/12) and grid gap (24/20/16) step down on smaller screens */
@media (max-width: 1024px) {
  :root {
    --radius-card: 16px;
    --gap: 20px;
  }
}

@media (max-width: 680px) {
  /* Work grid stays 2 columns on mobile (base rule); only tokens change here. */
  :root {
    --radius-card: 12px;
    --gap: 16px;
  }

  /* Bigger vertical client/year on the small mobile cards */
  .work-overlay__client,
  .work-overlay__year {
    font-size: 4.7cqw;
  }

  .work-item--full .work-overlay__client,
  .work-item--full .work-overlay__year {
    font-size: 2.7cqw;
  }

  /* Footer stacks: email on one line, the four icons on the line below */
  .footer-actions {
    flex-direction: column;
    gap: 18px;
  }

  .footer-socials {
    gap: 16px;
  }

  .copy-email {
    padding: 0 22px;
  }

  .copy-email__txt {
    font-size: 16px;
  }

  .footer-copy {
    font-size: 14px;
    gap: 14px;
    text-align: center;
  }
}

/* ---------- Mobile navigation ---------- */

@media (max-width: 720px) {
  .site-header:not(.site-header--light) {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    padding-top: 24px;
    padding-bottom: 20px;
  }

  /* Project pages: swap the logo for a header "Back to projects" button,
     and drop the in-content back-link above the title. */
  .site-header--project .logo {
    display: none;
  }

  .site-header--project .header-back {
    display: inline-flex;
  }

  .back-link {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: 0;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
    z-index: 55;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .nav-link {
    font-size: 26px;
    letter-spacing: 0.12em;
    opacity: 0.75;
  }

  .nav-link.is-active::after {
    bottom: -10px;
  }

  /* Contact page uses the light header (white links) over the photo, but the
     mobile menu overlay is white — so switch links back to dark once it opens. */
  .site-header--light .nav .nav-link {
    color: var(--ink);
    text-shadow: none;
  }

  .site-header--light .nav .nav-link.is-active,
  .site-header--light .nav .nav-link:hover {
    color: var(--ink);
    opacity: 1;
  }

  .site-header--light .nav .nav-link.is-active::after {
    background: var(--ink);
  }

  .nav-social {
    display: flex;
    gap: 16px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Positional aliases for the comparison labels, so a case can name its two
   sides instead of "before" / "after". */
.compare__label--left {
  left: 20px;
}

.compare__label--right {
  right: 20px;
}

/* -------------------------------------------------------------------
   Doryn skin for the comparison slider.
   Every value below is read from the Figma frame "Frame 331"
   (Case Doryn, 1400 x 800): handle at x 860, divider at x 888,
   "Dark Filled Chips" left, "Light Filled Chips" right.
   ------------------------------------------------------------------- */

/* Divider at x 888 + half its 5px width, over a 1400 frame. */
.compare--start-64 {
  --pos: 63.5%;
}

.compare--doryn .compare__divider {
  width: 5px;
  background: #fff;
  box-shadow: 0 0 8px 0 rgba(36, 37, 38, 0.4);
}

.compare--doryn .compare__handle {
  background: linear-gradient(225deg, #509bff 0%, #003f80 100%);
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px);
  box-shadow: 0 4px 12px -4px rgba(24, 45, 70, 0.18);
}

/* Hover keeps the designed fill; only the scale from the base rule reads. */
.compare--doryn .compare__handle:hover,
.compare--doryn.is-dragging .compare__handle {
  background: linear-gradient(225deg, #509bff 0%, #003f80 100%);
}

.compare--doryn .compare__handle:focus-visible {
  box-shadow: 0 4px 12px -4px rgba(24, 45, 70, 0.18),
    0 0 0 3px rgba(80, 155, 255, 0.55);
}

/* Chips: 50px tall, 24px side padding, 12px radius, 16px bold uppercase. */
.compare--doryn .compare__label {
  bottom: 20px;
  height: 50px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.6px;
}

/* Photographer side — Dark / Inverse / Convex. */
.compare--doryn .compare__label--left {
  color: #2b4457; /* text/high */
  background: linear-gradient(145.758deg, #eef4fc 0%, #f2d8c6 100%);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3),
    inset 1px 1px 0 0 #fff,
    inset -1px -1px 0 0 rgba(191, 122, 82, 0.5);
}

/* Parent side — Light / Inverse / Convex + Light / Inverse / Elevated / S. */
.compare--doryn .compare__label--right {
  color: #fff; /* text/inverse-high */
  background: linear-gradient(136.042deg, #3a5872 0%, #1d2e3e 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px -4px rgba(43, 68, 87, 0.12),
    inset 1px 1px 0 0 #5a88b0,
    inset -1px -1px 0 0 #181e27;
}

@media (max-width: 900px) {
  .compare--doryn .compare__label {
    bottom: 12px;
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 13px;
    letter-spacing: 1.3px;
  }
}

/* Phone: the image is ~190px tall and the two chips would collide. */
@media (max-width: 600px) {
  .compare--doryn .compare__label {
    bottom: 8px;
    height: 26px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 10px;
    letter-spacing: 0.8px;
  }

  .compare--doryn .compare__label--left {
    left: 8px;
  }

  .compare--doryn .compare__label--right {
    right: 8px;
  }
}

/* Inline code inside case prose (token and class names). */
.case-main p code,
.case-section__body p code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(33, 42, 55, 0.07);
  color: rgb(36, 37, 38);
}

/* ===================================================================
   CASE MEDIA GRID  —  introduced for the Champs Galottes case
   A 12 column grid shared by every media block of the case, so that
   images of different sizes still line up on the same vertical axes.
   Figures are top aligned, never bordered, and sized by span rather
   than being locked to half or full width.
   =================================================================== */

.case-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(56px, 7vw, 104px);
  align-items: start;
}

.case-fig {
  margin: 0;
}

.case-fig__frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(33, 42, 55, 0.04),
    0 10px 24px -8px rgba(33, 42, 55, 0.12),
    0 36px 64px -28px rgba(33, 42, 55, 0.22);
}

.case-fig__frame img,
.case-fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* Long page screenshots: capped height, anchored to the top of the page,
   so three pages of very different lengths still share a baseline. */
.case-fig__frame--clip img {
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.case-fig__frame--center img {
  object-position: center;
}

.case-fig figcaption {
  margin: 16px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(33, 42, 55, 0.6);
}

/* Column spans and offsets. Spans are written on grid-column-END so that
   an explicit start (.cg-s*) can be combined with them. */
.cg-c3  { grid-column-end: span 3; }
.cg-c4  { grid-column-end: span 4; }
.cg-c5  { grid-column-end: span 5; }
.cg-c6  { grid-column-end: span 6; }
.cg-c7  { grid-column-end: span 7; }
.cg-c8  { grid-column-end: span 8; }
.cg-c10 { grid-column-end: span 10; }
.cg-c12 { grid-column-end: span 12; }

.cg-s2 { grid-column-start: 2; }
.cg-s4 { grid-column-start: 4; }
.cg-s5 { grid-column-start: 5; }
.cg-s6 { grid-column-start: 6; }
.cg-s7 { grid-column-start: 7; }

/* Clip heights, named by role rather than by pixel value. */
.h-page   { height: clamp(360px, 38vw, 560px); }
.h-panel  { height: clamp(300px, 32vw, 470px); }
.h-strip  { height: clamp(260px, 28vw, 420px); }
.h-scene  { height: clamp(260px, 30vw, 460px); }

@media (max-width: 900px) {
  .case-grid {
    row-gap: clamp(40px, 9vw, 64px);
  }

  .case-grid > .case-fig {
    grid-column: 1 / -1 !important;
  }

  .h-page,
  .h-panel,
  .h-strip,
  .h-scene {
    height: auto;
  }

  .case-fig__frame--clip img {
    height: auto;
    object-fit: fill;
  }
}

/* Constraint / decision tables inside a case section. */

.case-table-wrap {
  overflow-x: auto;
  margin: clamp(20px, 2.6vw, 34px) 0;
}

.case-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}

.case-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(33, 42, 55, 0.5);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--divider);
}

.case-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}

.case-table td:first-child,
.case-table th:first-child {
  width: 38%;
  padding-right: 28px;
}

.case-table td:first-child {
  font-weight: 500;
}