/* ============================================
   Sections — one file per section, merged
   Concatenated verbatim, in the exact order these files were linked from
   index.html. Nothing was edited: the cascade depends on this order.
   ============================================ */

/* ---------- header.css ---------- */
/* ============================================
   Header / Navigation
   ============================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.0);
  backdrop-filter: blur(0px);
  transition: background-color var(--duration-normal) var(--ease-out),
              backdrop-filter var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.header.scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border-color);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Logo - Typographic Wordmark */
.header__logo {
  display: flex;
  align-items: center;
  z-index: var(--z-header);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.header__logo:hover {
  opacity: 0.7;
}

.header__logo-mark {
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--color-black);
  line-height: 1;
  white-space: nowrap;
}

.header__logo-mk {
  font-weight: var(--weight-regular);
  font-size: 0.85em;
  color: var(--color-gray-500);
}

/* Nav */
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.header__nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-gray-600);
  transition: color var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-md);
}

.header__nav-link:hover {
  color: var(--color-black);
}

/* Dropdown */
.header__dropdown {
  position: relative;
}

.header__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-gray-600);
  transition: color var(--duration-fast) var(--ease-out);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.header__dropdown-trigger:hover {
  color: var(--color-black);
}

.header__dropdown-icon {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-normal) var(--ease-out);
}

.header__dropdown:hover .header__dropdown-icon {
  transform: rotate(180deg);
}

.header__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 200px;
  background-color: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal);
}

/* Bridge element to prevent hover dead-zone between trigger and menu */
.header__dropdown-menu::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 0;
  right: 0;
  height: var(--space-3);
}

.header__dropdown:hover .header__dropdown-menu,
.header__dropdown.dropdown-open .header__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.header__dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.header__dropdown-item:hover {
  background-color: var(--color-gray-100);
  color: var(--color-black);
}

/* Right section */
.header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Language Switch */
.lang-switch {
  display: flex;
  align-items: center;
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 0;
}

/* The control is an <a> wherever a sibling URL exists (see header.njk), so it
   has to shed the anchor defaults a <button> never had. */
a.lang-switch__btn {
  text-decoration: none;
  display: inline-block;
  line-height: inherit;
}
.lang-switch__btn {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-500);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast) var(--ease-out);
  text-transform: uppercase;
}

.lang-switch__btn.active {
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: var(--shadow-sm);
}

.lang-switch__btn:not(.active):hover {
  color: var(--color-black);
}

/* Contact Button */
.header__contact-btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
}

.header__contact-btn:hover {
  background-color: var(--color-gray-800);
  transform: translateY(-1px);
}

/* Mobile Menu Toggle */
.header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  height: 20px;
  cursor: pointer;
  z-index: var(--z-header);
}

.header__menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-fast);
  transform-origin: center;
}

.header__menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.header__menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Navigation */
.header__mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  background-color: #11151f;
  z-index: calc(var(--z-header) - 1);
  padding: calc(var(--header-height) + var(--space-8)) var(--container-padding) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal),
              transform var(--duration-normal) var(--ease-out);
  overflow-y: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.header__mobile-nav.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__mobile-nav-link {
  display: block;
  font-size: clamp(2rem, 9vw, 3.5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-white);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.header__mobile-nav .lang-switch {
  background: rgba(255,255,255,0.08);
  width: max-content;
}

.header__mobile-nav .lang-switch__btn {
  color: rgba(255,255,255,0.66);
}

.header__mobile-nav .lang-switch__btn.active {
  background: var(--color-white);
  color: var(--color-black);
}

body.menu-open .header {
  background-color: #11151f;
}

body.menu-open .header__logo-mark,
body.menu-open .header__logo-mk {
  color: var(--color-white);
}

body.menu-open .header__menu-toggle span {
  background-color: var(--color-white);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .header__nav {
    display: none;
  }

  .header__menu-toggle {
    display: flex;
  }

  .header__contact-btn {
    display: none;
  }
}

@media (max-width: 640px) {
  .header__logo-mark {
    font-size: 1.15rem;
  }
}

/* ---------- hero.css ---------- */
/* ============================================
   Hero Section — Vertical Layout with Full-Width Video
   Inspired by Clay.global's panoramic hero layout
   ============================================ */

.hero {
  padding-top: calc(var(--header-height) + var(--space-12));
  padding-bottom: var(--space-section);
}

/* Vertical stack: text on top, video below */
.hero__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* ---- Text Block ---- */
.hero__text {
  max-width: 900px;
  text-align: left;
}

.hero__title {
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: wordFadeIn 0.6s var(--ease-out) forwards;
}

@keyframes wordFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Ambient WebGL background ---- */
/* Sits behind .hero__container, which already carries z-index: 2. The element
   is in the markup at all widths; js/main.js only mounts a scene into it when
   the capability gates pass, so on the fallback path it stays an empty, inert,
   invisible layer over the hero's own #0a0a0a background. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ---- Video Block — Full-Width Panoramic ---- */
.hero__video {
  width: 100%;
  max-width: none;
  border-radius: 16px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

/* ---- Play Showreel Button ---- */
.hero__play-btn {
  position: absolute;
  right: 22px;
  bottom: 22px;
  transform: scale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(10, 10, 10, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: inherit;
  color: #ffffff;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
  z-index: 2;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.hero__play-btn:hover {
  background: rgba(10, 10, 10, 0.68);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
}

.hero__play-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.hero__play-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.hero__play-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Active state: when sound is playing */
.hero__play-btn--active {
  background: rgba(232, 200, 64, 0.95);
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--color-black);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.hero__play-btn--active svg {
  fill: currentColor;
}

.hero__play-btn--active:hover {
  background: var(--color-primary-light);
}

/* Pulse animation when sound is blocked by browser */
.hero__play-btn--pulse {
  animation: soundPulse 2s ease-in-out infinite;
}

@keyframes soundPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
  50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22), 0 0 0 6px rgba(0, 0, 0, 0.06); }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-height) + var(--space-8));
  }
  .hero__text {
    max-width: 100%;
  }
  .hero__video {
    border-radius: 12px;
  }
  .hero__play-btn {
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--header-height) + var(--space-6));
    padding-bottom: var(--space-12);
  }
  .hero__title {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
  }
  .hero__video {
    aspect-ratio: 4 / 5;
    border-radius: 10px;
  }
  .hero__play-btn {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
  }
  .hero__play-btn svg {
    width: 17px;
    height: 17px;
  }
}

/* ---------- showreel.css ---------- */
/* ============================================
   Showreel — standalone section
   The video used to be the full-bleed background of #hero, which put several
   megabytes on the critical path of the first screen. It now lives here and
   loads only once this section scrolls into view (see initPlayShowreel in
   js/main.js).
   ============================================ */

.showreel {
  background: var(--color-black);
}

/* The meta rail: authorship above the frame instead of chrome on it. */
.showreel__rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.showreel__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showreel__timecode {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* Full-bleed in layout; the inset lives in clip-path so expanding it costs no
   reflow and hijacks no scroll. Without JS the reel simply plays full-bleed. */
.showreel__stage {
  width: 100%;
}

.showreel__frame {
  position: relative;          /* .hero__play-btn positions against this */
  width: 100%;
  overflow: hidden;
  background: var(--color-gray-900);
  aspect-ratio: 16 / 9;        /* reserved before the video loads, so no CLS */
  clip-path: inset(0 var(--reel-inset, 0px) round var(--reel-radius, 0px));
  cursor: pointer;             /* the whole frame toggles sound */
}

/* The video keeps its .hero__video class so the existing object-fit and colour
   grading carry over unchanged; only the box that holds it is new. */
.showreel__frame .hero__video {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

@media (max-width: 640px) {
  .showreel__frame {
    aspect-ratio: 4 / 5;       /* matches the crop the mobile file is cut for */
  }
}

/* ---------- capabilities.css ---------- */
/* ============================================
   Capabilities / Services — 3 Column Layout
   ============================================ */

.capabilities {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-gray-200);
}

.capabilities__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.3fr;
  gap: var(--space-10);
  align-items: start;
}

.capabilities__intro {
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
}

/* Central Visual */
.capabilities__visual {
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.capabilities__visual img {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  aspect-ratio: 1 / 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Accordion */
.capabilities__list {
  display: flex;
  flex-direction: column;
}

/* Shared Accordion Styles */
.accordion-item {
  border-bottom: 1px solid var(--color-gray-200);
}

.accordion-item:first-child {
  border-top: 1px solid var(--color-gray-200);
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-gray-900);
  transition: color var(--duration-fast);
}

.accordion-header:hover {
  color: var(--color-primary);
}

.accordion-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* Icon */
.accordion-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: var(--space-4);
}

.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-gray-500);
  transition: transform var(--duration-normal) var(--ease-out);
}

.accordion-icon::before {
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  transform: translateY(-50%);
}

.accordion-icon::after {
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 2px;
  transform: translateX(-50%);
}

.accordion-item.active .accordion-icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* Content. Height is intrinsic — the 0fr/1fr grid transition replaces the old
   max-height animation, so a Spanish paragraph 20% longer than its English
   sibling can never be clipped and no script ever measures scrollHeight.
   Shared by capabilities and FAQ: one accordion mechanism for the page. */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.accordion-item.active .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-content__inner {
  overflow: hidden;
  min-height: 0;
  padding-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.accordion-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  max-width: 450px;
}

.accordion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.accordion-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-gray-500);
  background: var(--color-gray-100);
  padding: 3px 12px;
  border-radius: var(--radius-full);
}

/* Remove image from accordion content (now central) */
.accordion-image {
  display: none;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .capabilities__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .capabilities__intro {
    position: static;
    max-width: 600px;
  }
  .capabilities__visual {
    position: static;
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .accordion-title {
    font-size: var(--text-base);
  }
}

/* ---------- work-grid.css ---------- */
/* ============================================
   Work Grid — Staggered Layout like Clay.global
   ============================================ */

.work {
  padding-block: var(--space-section);
}

.work__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.work__title {
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

/* Grid Rows */
.work__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- The ledger: what the studio cannot prove yet ----
   Set as an account, not as a card. No fill, no shadow, no radius — the only
   structure is a rule per row and tabular figures, so the numbers line up and
   the section reads as a statement someone signed rather than as decoration.
   It uses tokens only, so the paper repaint (docs/direction.md 5.3) will carry
   it without edits. */
.work__ledger {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid currentColor;
  max-width: var(--container-narrow);
}

.work__ledger-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.work__ledger-lead {
  max-width: 46ch;
  opacity: 0.72;
  margin-bottom: var(--space-8);
}

.work__ledger-list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.work__ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid currentColor;
}

.work__ledger-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  opacity: 0.62;
}

.work__ledger-value {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

/* The note belongs to the row above it, so it spans both columns and sits
   under the label rather than beside the figure. */
.work__ledger-note {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  opacity: 0.62;
  max-width: 52ch;
}

.work__ledger-close {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
  max-width: 46ch;
}

@media (max-width: 640px) {
  .work__ledger-value {
    font-size: var(--text-2xl);
  }
}

.work__row {
  display: grid;
  gap: var(--space-6);
}

.work__row--two {
  grid-template-columns: 1.15fr 0.85fr;
}

.work__row--two-reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

.work__row--full {
  grid-template-columns: 1fr;
}

/* Card */
.work__card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-out);
}

.work__card:hover {
  transform: translateY(-6px);
}

/* Card Image / Video */
.work__card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.work__card-media img,
.work__card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.work__card:hover .work__card-media img,
.work__card:hover .work__card-media video {
  transform: scale(1.04);
}

/* Overlay */
.work__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    transparent 60%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.work__card:hover .work__card-overlay {
  opacity: 1;
}

.work__card-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: #ffffff;
  margin-bottom: var(--space-1);
}

.work__card-desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-3);
}

.work__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.work__card-tag {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

/* View Case Study Button */
.work__card-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #1a1a1a;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-out);
  pointer-events: none;
  white-space: nowrap;
}

.work__card:hover .work__card-cta {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Info below card (always visible) */
.work__card-info {
  padding: var(--space-4) var(--space-1) 0;
}

.work__card-info-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: 2px;
}

.work__card-info-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .work__row--two,
  .work__row--two-reverse {
    grid-template-columns: 1fr;
  }

  .work__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .work__card-overlay {
    opacity: 1;
  }

  .work__card-cta {
    display: none;
  }
}

/* ---------- about.css ---------- */
/* ============================================
   About Section — with Carousel Navigation
   ============================================ */

.about {
  padding-block: var(--space-section);
}

.about__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
  margin-bottom: var(--space-16);
}

.about__title {
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.about__text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}

/* Photo Carousel / Ticker with Navigation */
.about__carousel-wrapper {
  position: relative;
  width: 100vw;
  margin-left: calc(-1 * var(--container-padding));
  margin-bottom: var(--space-16);
}

.about__carousel {
  overflow: hidden;
}

.about__carousel-track {
  display: flex;
  gap: var(--space-4);
  animation: ticker 40s linear infinite;
  width: max-content;
}

.about__carousel-track:hover {
  animation-play-state: paused;
}

.about__carousel-track--manual {
  animation-play-state: paused;
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.about__carousel-item {
  flex-shrink: 0;
  width: 380px;
  height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about__carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.about__carousel-item:hover img {
  transform: scale(1.05);
}

/* Navigation Buttons */
.about__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-black);
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.about__carousel-btn:hover {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%) scale(1.05);
}

.about__carousel-btn--prev {
  left: var(--space-4);
}

.about__carousel-btn--next {
  right: var(--space-4);
}

/* Bottom text block */
.about__bottom {
  max-width: 700px;
}

.about__bottom-text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  margin-bottom: var(--space-6);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .about__content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about__carousel-item {
    width: 280px;
    height: 190px;
  }

  .about__carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* ---------- news.css ---------- */
/* ============================================
   Insights Section
   ============================================ */

.news {
  padding-block: var(--space-section);
  background-color: var(--color-black);
  color: var(--color-white);
}

.news__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.news__title {
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.news__link {
  color: var(--color-gray-400);
}

.news__link:hover {
  color: var(--color-white);
}

.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* News Card */
.news__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out);
}

.news__card:hover {
  transform: translateY(-4px);
}

.news__card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.news__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.news__card:hover .news__card-image img {
  transform: scale(1.04);
}

.news__card-body {
  padding: var(--space-5) var(--space-1);
}

.news__card-category {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.news__card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  color: var(--color-white);
}

.news__card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.news__card-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--color-gray-500);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .news__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}

/* ---------- ai-automation.css ---------- */
/* ============================================
   AI Automation Section — Premium Editorial
   ============================================ */

.ai-automation {
  padding-block: var(--space-section);
}

.ai-automation__card {
  position: relative;
  background: var(--color-black);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-10), 5vw, var(--space-16));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  overflow: hidden;
  min-height: 480px;
}

.ai-automation__content {
  position: relative;
  z-index: 2;
}

.ai-automation__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary);
  background: rgba(232, 200, 64, 0.1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  border: 1px solid rgba(232, 200, 64, 0.2);
}

.ai-automation__title {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
  margin-bottom: var(--space-5);
}

.ai-automation__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-400);
  margin-bottom: var(--space-8);
  max-width: 500px;
}

.ai-automation__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border: 1px solid rgba(232, 200, 64, 0.35);
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-out);
}

.ai-automation__cta:hover {
  background: rgba(232, 200, 64, 0.1);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* Metric Cards */
.ai-automation__visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-automation__metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  width: 100%;
  max-width: 320px;
  position: relative;
  z-index: 2;
}

.ai-automation__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

.ai-automation__metric:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(232, 200, 64, 0.2);
  transform: translateY(-2px);
}

.ai-automation__metric-value {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.ai-automation__metric-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Subtle circuit pattern - replaces neon grid */
.ai-automation__circuit {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(232, 200, 64, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(232, 200, 64, 0.02) 0%, transparent 40%);
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .ai-automation__card {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: var(--space-8);
  }
  .ai-automation__visual {
    min-height: auto;
  }
  .ai-automation__metrics {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
    gap: var(--space-3);
  }
  .ai-automation__metric {
    padding: var(--space-4);
  }
  .ai-automation__metric-value {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .ai-automation__metrics {
    grid-template-columns: 1fr;
  }
}

/* ---------- faq.css ---------- */
/* ============================================
   FAQ Section — Dark Background
   ============================================ */

.faq {
  padding-block: var(--space-section);
  background-color: #0d1b3e;
  color: #ffffff;
}

.faq__header {
  margin-bottom: var(--space-12);
}

.faq__title {
  font-size: clamp(var(--text-3xl), 3vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
}

.faq__list {
  max-width: 900px;
}

/* Override accordion styles for dark background */
.faq .accordion-item {
  border-color: rgba(255, 255, 255, 0.12);
}

.faq .accordion-header {
  color: #ffffff;
}

.faq .accordion-header:hover {
  color: #a5b4fc;
}

.faq .accordion-icon::before,
.faq .accordion-icon::after {
  background-color: #ffffff;
}

.faq .accordion-text {
  color: #94a3b8;
  max-width: 100%;
}

/* Reuses .accordion-item styles from capabilities.css */
.faq .accordion-content__inner {
  grid-template-columns: 1fr;
  max-width: 700px;
}

/* ---------- footer.css ---------- */
/* ============================================
   Footer — Light Gray like Clay.global
   ============================================ */

.footer {
  background-color: #f5f5f5;
  color: #1a1a1a;
  padding-top: var(--space-section);
  position: relative;
  overflow: hidden;
}

/* CTA */
.footer__cta {
  text-align: center;
  padding-bottom: var(--space-16);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: var(--space-12);
}

.footer__cta-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: #666;
  margin-bottom: var(--space-4);
}

.footer__cta-title {
  display: block;
  font-size: clamp(var(--text-5xl), 8vw, 8rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  color: #1a1a1a;
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease-out);
  line-height: 1;
}

.footer__cta-title:hover {
  color: var(--color-primary);
}

/* Contact */
.footer__contact {
  display: flex;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: var(--space-12);
}

.footer__contact-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: #888;
  margin-bottom: var(--space-1);
}

.footer__contact-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: #1a1a1a;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer__contact-value:hover {
  color: var(--color-primary);
}

/* Main Grid */
.footer__main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-16);
}

.footer__column-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: #888;
  margin-bottom: var(--space-5);
}

.footer__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav-link {
  font-size: var(--text-sm);
  color: #555;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer__nav-link:hover {
  color: #1a1a1a;
}

/* Offices */
.footer__offices {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.footer__office-city {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #1a1a1a;
  margin-bottom: var(--space-1);
}

.footer__office-address {
  font-size: var(--text-xs);
  color: #888;
  line-height: var(--leading-relaxed);
}

/* Newsletter */
.footer__newsletter-text {
  font-size: var(--text-sm);
  color: #666;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.footer__newsletter-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: #ffffff;
  color: #1a1a1a;
  transition: border-color var(--duration-fast);
}

.footer__newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.footer__newsletter-input::placeholder {
  color: #999;
}

.footer__newsletter-btn {
  padding: var(--space-2) var(--space-4);
  background-color: #1a1a1a;
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast);
  white-space: nowrap;
}

.footer__newsletter-btn:hover {
  background-color: #333;
}

.footer__newsletter-success {
  font-size: var(--text-sm);
  color: #16a34a;
}

/* Social */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer__social-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-full);
  color: #888;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: border-color var(--duration-fast), color var(--duration-fast);
}

.footer__social-link svg {
  display: none;
}

.footer__social-link:hover {
  border-color: rgba(0, 0, 0, 0.32);
  color: #1a1a1a;
}

/* Bottom */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.footer__copyright {
  font-size: var(--text-xs);
  color: #999;
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

.footer__legal-link {
  font-size: var(--text-xs);
  color: #999;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer__legal-link:hover {
  color: #1a1a1a;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .footer__main {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}

@media (max-width: 640px) {
  .footer__contact {
    flex-direction: column;
    gap: var(--space-6);
  }

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

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .footer__newsletter-form {
    flex-direction: column;
  }
}

/* ---------- modal.css ---------- */
/* ============================================
   Modal – Case Studies & News Articles
   ============================================ */

/* Backdrop & Container */
.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.detail-modal.active {
  pointer-events: all;
  opacity: 1;
  visibility: visible;
}

.detail-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 21, 31, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.detail-modal__container {
  position: relative;
  width: 90%;
  max-width: 920px;
  max-height: 88vh;
  background: #fff;
  border-radius: 28px;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(30px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-modal.active .detail-modal__container {
  transform: translateY(0) scale(1);
}

/* Scrollbar styling */
.detail-modal__container::-webkit-scrollbar {
  width: 6px;
}
.detail-modal__container::-webkit-scrollbar-track {
  background: transparent;
}
.detail-modal__container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

/* Close button */
.detail-modal__close {
  position: sticky;
  top: 16px;
  float: right;
  margin-right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.detail-modal__close:hover {
  background: rgba(0, 0, 0, 0.15);
  transform: scale(1.1);
}

/* ---- Case Study Modal ---- */
.modal-case__hero {
  width: 100%;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.modal-case__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-case__body {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.modal-case__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #b8860b;
  display: block;
  margin-bottom: 0.5rem;
}

.modal-case__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.modal-case__desc {
  max-width: 720px;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: #666;
  margin: 0 0 1.25rem;
}

.modal-case__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.modal-case__tag {
  font-size: 0.78rem;
  padding: 4px 14px;
  border-radius: 100px;
  border: 1px solid #e0e0e0;
  color: #555;
  background: #fafafa;
}

.modal-case__section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #f0f0f0;
}
.modal-case__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.modal-case__section h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  margin: 0 0 0.75rem;
}

.modal-case__section p {
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

.modal-case__section--result {
  background: #f7f5f0;
  border: 1px solid #e8e4d4;
  border-radius: 18px;
  padding: 1.5rem;
}
.modal-case__section--result h3 {
  color: #b8860b;
}
.modal-case__section--result p {
  font-weight: 500;
  color: #333;
}

/* ---- News Article Modal ---- */
.modal-news__hero {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.modal-news__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-news__body {
  padding: 2.5rem;
}

.modal-news__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: #888;
  margin-bottom: 1rem;
}
.modal-news__category {
  background: #1a1a1a;
  color: #fff;
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-news__title {
  font-family: 'Inter', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1.5rem;
  line-height: 1.3;
}

.modal-news__content {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
}
.modal-news__content p {
  margin: 0 0 1.25rem;
}
.modal-news__content .modal-news__list {
  padding-left: 0.5rem;
  border-left: 3px solid #e8e4d4;
  color: #555;
}

.modal-news__back {
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #1a1a1a;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.modal-news__back:hover {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .detail-modal__container {
    width: 95%;
    max-height: 92vh;
    border-radius: 12px;
  }
  .modal-case__hero,
  .modal-news__hero {
    height: 200px;
  }
  .modal-case__body,
  .modal-news__body {
    padding: 1.5rem;
  }
  .modal-case__title {
    font-size: 1.5rem;
  }
  .modal-news__title {
    font-size: 1.35rem;
  }
}

/* The homepage insight cards: links to the note pages, rendered at build time
   from the same data the pages use. They replaced a modal that carried an
   older draft of each article. */
.newscard {
  display: block;
  padding: var(--space-8) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease-out);
}

.newscard:hover { border-top-color: var(--color-primary); }

.newscard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.newscard__title {
  display: block;
  margin-top: var(--space-4);
  max-width: 22ch;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  transition: color 0.25s var(--ease-out);
}

.newscard:hover .newscard__title { color: var(--color-primary); }

/* The accordion row title is a link now — it must not inherit button styling. */
a.accordion-title { color: inherit; text-decoration: none; }
a.accordion-title:hover { color: #7A5C12; }

/* The two published cases on the homepage: plates that navigate. They replaced
   an empty container that waited for a client signature. */
.workplates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  margin-bottom: var(--space-12);
  background: rgba(10, 10, 10, 0.12);
  border-block: 1px solid rgba(10, 10, 10, 0.12);
}

.workplate {
  display: grid;
  gap: var(--space-3);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--color-paper, #f7f5f0);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s var(--ease-out);
}

.workplate:hover { background: #ffffff; }

.workplate__index {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: #6E675B;
}

.workplate__title {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  transition: color 0.25s var(--ease-out);
}

.workplate:hover .workplate__title { color: #7A5C12; }

.workplate__lead {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6E675B;
}

.workplate__figure {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  font-size: var(--text-sm);
  color: #6E675B;
}

.workplate__figure strong {
  display: block;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.accordion-more { display: inline-flex; margin-top: var(--space-5); }

/* ==========================================================================
   The colophon (src/_includes/colophon.njk)

   A printer's mark at the foot of every page, opening onto that page's own
   measurements. It is furniture at the very end of the document, so it is
   sized to be found rather than noticed: one hairline rule, a registration
   target, and figures set in the same tabular style as the work ledger it is
   a cousin of.

   Two things it must not assume.

   Its width. It aligns to --container-max / --container-padding rather than
   inventing its own, because it sits directly under blocks that use
   .container and a colophon on a different measure reads as a mistake before
   it reads as a margin note.

   Its ground. The page's three acts are painted by the canvas in
   js/terrain.js, not by a class on a section, so nothing in the markup knows
   whether this block landed on paper or on ink. Every colour here is
   therefore derived from currentColor and opacity instead of being named —
   the mark, the rules and the labels all resolve against whatever the stage
   is painting behind them.

   The one piece of motion earns its place: opening the disclosure draws the
   four crosshair arms inward until they meet the ring — plates coming into
   register, which is what the mark means and what the panel is claiming. One
   transform on one path, settled under prefers-reduced-motion.
   ========================================================================== */

.colophon {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: clamp(4rem, 9vw, 7rem);
  padding-inline: var(--container-padding);
  color: inherit;
}

.colophon__details {
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  padding-top: var(--space-4);
}

/* No entry in the audit payload means no figures were stamped. An empty
   disclosure that opens onto nothing is worse than no disclosure. */
.colophon:has(.colophon__body:empty) { display: none; }

.colophon__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity var(--duration-fast, 0.2s) var(--ease-out, ease);
}

.colophon__summary::-webkit-details-marker { display: none; }
.colophon__summary::marker { content: ""; }

.colophon__summary:hover,
.colophon__details[open] .colophon__summary { opacity: 1; }

.colophon__summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  opacity: 1;
}

.colophon__mark {
  flex: none;
  width: 22px;
  height: 22px;
}

.colophon__mark svg { width: 100%; height: 100%; overflow: visible; display: block; }

.colophon__mark-ring,
.colophon__mark-cross {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.colophon__mark-dot { fill: currentColor; opacity: 0; transition: opacity 0.35s ease; }

/* The arms sit long when closed and converge on open. */
.colophon__mark-cross {
  transform-origin: 16px 16px;
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.colophon__details[open] .colophon__mark-cross { transform: scale(0.42); }
.colophon__details[open] .colophon__mark-dot { opacity: 1; }

.colophon__hint {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
  opacity: 0.75;
}

.colophon__body { padding: var(--space-4) 0 var(--space-6); }

.colophon__figures {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.colophon__row {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.colophon__row dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.colophon__row dd {
  margin: var(--space-1) 0 0;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-variant-numeric: tabular-nums;
}

.colophon__note {
  margin: var(--space-4) 0 0;
  max-width: 66ch;
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.7;
}

.colophon__note a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .colophon__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .colophon__summary,
  .colophon__mark-cross,
  .colophon__mark-dot { transition: none; }
}