/* ======================================================
   UNP — ROOT TOKENS (Single Source of Truth)
   - Consolidated from previous multiple :root blocks
   - Values preserved (last-defined wins)
   ====================================================== */
:root {
  /* Core brand */
  --unp-dark: #181615;
  --unp-ink: #F9F7F5;
  --unp-pink: #FF4B9E;
  --unp-blue: #00A4FF;
  --unp-cream: #F9F7F5;
  --unp-gray: #e5e0dc;

  /* RGB tokens */
  --unp-dark-rgb: 24,22,21;
  --unp-ink-rgb: 249,247,245;
  --unp-pink-rgb: 255,75,158;

  /* Typography */
  --font-head: "Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
  --unp-head: var(--font-display);

  /* Aliases / compatibility */
  --text-dark: var(--unp-dark);
  --text-light: #F4EFEA;
  --unp-charcoal: var(--unp-dark);
  --unp-text-main: var(--unp-dark);
  --unp-text-muted: rgba(var(--unp-dark-rgb), 0.78);
  --unp-muted: rgba(var(--unp-dark-rgb), 0.72);
  --unp-muted-2: rgba(var(--unp-dark-rgb), 0.12);
  --muted: rgba(var(--unp-dark-rgb), 0.7);

  /* Layout + radius */
  --radius: 1.5rem;
  --unp-radius: 28px;
  --overlap: 52px;

  /* Motion */
  --t-med: 260ms;
  --e-out: cubic-bezier(.2,.7,.2,1);

  /* Shadows */
  --ring: 0 12px 36px rgba(0, 0, 0, 0.22);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  --unp-shadow: 0 18px 40px rgba(0,0,0,.35);

  /* Semantic accents */
  --accent-primary: var(--unp-pink);
  --accent-secondary: var(--unp-ink);
  --card: var(--unp-ink);

  /* Other tokens (preserved) */
  --unp-body: var(--font-body);
}

/* ===== Global base (Golive safe) ===== */
/* (Variables consolidated in UNP — ROOT TOKENS at top of file) */


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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body:not(.wp-admin) {
  background: var(--unp-ink);
  color: var(--unp-dark);
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: clamp(16px, 1.1vw, 18px);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  line-height: 1.1;
  color: var(--unp-dark);
}

h1 { margin-bottom: 0.4em; }
h2, h3 { margin-top: 1.6em; margin-bottom: 0.6em; }

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

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

/* Special template background (explicitly not in wp-admin) */
body.local-silo:not(.wp-admin) {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 75, 158, 0.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(24, 22, 21, 0.15), transparent 50%),
    var(--unp-ink);
  color: var(--unp-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* WP.com coming soon styling */
body.wpcom-coming-soon-body {
  background-color: #000;
  color: #fff;
}

body.wpcom-coming-soon-body a.button-secondary {
  background-color: #000;
  color: #fff;
  border-color: #fff;
}

.ms-hero-img {
  display: block;
  max-width: 70%;
  height: auto;
  margin: 0 auto 1.2rem;
  border-radius: 18px;
}

@media (max-width: 720px) {
  .ms-hero-img { max-width: 100%; }
}

/* ===== Header & navigation (Golive safe) ===== */
.main-header-bar,
.ast-primary-header-bar,
.ast-header-break-point .main-header-bar {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ast-desktop .main-header-bar .ast-main-header-wrap {
  flex-wrap: nowrap;
}

.site-branding img {
  max-height: 40px;
  width: auto;
}

body:not(.ast-header-break-point) .main-header-menu > .menu-item {
  margin: 0 0.4rem;
}

body:not(.ast-header-break-point) .main-header-menu > .menu-item > a {
    color: var(--unp-dark);
    font-weight: 500;
    font-size: 0.86rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    transition: color var(--t-med) var(--e-out);
}

.ast-header-break-point .main-header-menu > .menu-item > a {
  color: var(--unp-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color var(--t-med) var(--e-out);
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item.current-menu-ancestor > a,
.main-header-menu > .menu-item.current_page_item > a {
  color: var(--unp-pink) !important;
}

.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item.current-menu-ancestor > a,
.main-header-menu > .menu-item.current_page_item > a {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.ast-transparent-header .main-header-bar,
.ast-transparent-header .ast-primary-header-bar {
  background: transparent !important;
}


/* ======================================================
   UNP HERO — EDITORIAL AUTHORITY (FINAL · PRINT DEPTH)
   Full-Bleed Top · Weighted Bottom · Ink Depth Typography
   ====================================================== */

#unp-hero.uh-hero {
  position: relative;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}

#unp-hero .uh-media {
  position: relative;
  min-height: min(75vh, 780px);
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  box-shadow: var(--shadow);
  background: var(--unp-dark);
}

#unp-hero .uh-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inner cinematic hairline frame */
#unp-hero .uh-media::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.4vw, 16px);
  border: 1px solid rgba(var(--unp-ink-rgb), 0.18);
  border-radius: 0 0 max(4px, calc(40px - 14px)) max(4px, calc(40px - 14px));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.08);
  pointer-events: none;
  z-index: 2;
}

/* Gradient overlay — text-first */
#unp-hero .uh-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 35%,
      rgba(0,0,0,0) 38%,
      rgba(0,0,0,.35) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,0) 90%);
  pointer-events: none;
  z-index: 1;
}

#unp-hero .uh-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2.5rem, 6vw, 4rem);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  color: var(--unp-ink);
  z-index: 3;
}

/* Eyebrow — restrained print authority */
#unp-hero .uh-eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.55;
  color: rgba(var(--unp-ink-rgb), 1);
}

/* =========================
   H1 — INK DEPTH (KEY PART)
   ========================= */

#unp-hero .uh-title {
  margin: 0 0 1.2rem;
  font-family: var(--font-head);
  font-weight: 950;
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--unp-ink);

  /* INK-LAYER DEPTH — subtle, editorial, permanent */
  text-shadow:
    0 1px 0 rgba(0,0,0,.22),
    0 2px 0 rgba(0,0,0,.12);
}
#unp-hero .uh-dash {
  display: inline-block;
  margin-inline: .15em;
  opacity: 0.85;
  transform: translateY(-0.05em);
  color: rgba(var(--unp-ink-rgb), 0.9);
}

/* Micro-highlight on em dash — museum subtle */
#unp-hero .uh-title .uh-dash {
  opacity: .55;
  font-weight: 900;
}

/* Lead */
#unp-hero .uh-lead {
  max-width: 46ch;
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(var(--unp-ink-rgb), .95);
}

#unp-hero .uh-pink {
  color: var(--unp-pink);
}

/* Secondary CTA copy */
#unp-hero .uh-secondary {
  font-size: 0.82rem;
  opacity: 0.72;
  max-width: 34ch;
  line-height: 1.5;
  margin: 0;
}

/* CTA row — vertical rhythm only */
#unp-hero .uh-cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

/* IMPORTANT: CTA pill sizing only — colour untouched */
.uh-cta-pill {
  padding: 0.75rem 2.2rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

/* ===== Trusted Band (Stable & Fixed) ===== */
#unp-trusted.unptb-band {
  background: var(--unp-ink);
  color: var(--unp-dark);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid rgba(var(--unp-dark-rgb), 0.05);
  border-bottom: 1px solid rgba(var(--unp-dark-rgb), 0.04);

}

#unp-trusted .unptb-wrap {
  max-width: 1180px;
  margin-inline: auto;
}

#unp-trusted .unptb-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25em;
  align-items: baseline;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.4rem, 3.6vw, 3rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* Specificity fix: Ensure BEST is pink without needing !important */
#unp-trusted .unptb-title .unptb-title-best {
  font-family: var(--font-body);
  color: var(--unp-pink);
  font-size: 1.25em;
  text-decoration: underline;
  text-decoration-color: var(--unp-pink);
  text-underline-offset: .18em;
}

#unp-trusted .unptb-strap {
  margin: .8rem 0 0;
  font-family: var(--font-head);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--unp-text-muted);
}

/* Grid Logic */
#unp-trusted .unptb-grid {
  margin-top: clamp(2rem, 3vw, 2.6rem);
  border-top: 1px solid rgba(var(--unp-dark-rgb), 0.1);
}

#unp-trusted .unptb-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(1.4rem, 2.8vw, 2.4rem);
  padding-block: 1rem;
  border-bottom: 1px solid rgba(var(--unp-dark-rgb), 0.05);
}

#unp-trusted .unptb-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--unp-dark);
  /* Subtler text shadow for better legibility */
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* Tablet Fix */
@media(max-width: 900px) {
  #unp-trusted .unptb-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1rem;
  }
}

/* Mobile Fix: Replacing 'display: contents' with a stable Flex layout */
@media(max-width: 640px) {
  #unp-trusted .unptb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    border: none;
    padding-block: 1.5rem;
  }

  #unp-trusted .unptb-name {
    flex: 1 1 calc(50% - 0.8rem); /* Two columns */
    padding: 0.8rem;
    border: 1px solid rgba(var(--unp-dark-rgb), 0.1);
    border-radius: 12px;
    text-align: center;
    background: rgba(255,255,255,0.5);
    font-size: 0.75rem;
  }
}

/* ======================================================
   UNP — SILO SYSTEM v1.0 (CONSOLIDATED)
   Scope:
   - Service silos (/pr-photographer/, etc.)
   - Event silos
   - Local photographer silos
   Replaces:
   - Legacy "Specialty Silos"
   - Interim Silo Layout blocks
   Status:
   ✔ Production
   ✔ Cross-browser
   ✔ CTA-safe
   ✔ Editorial-grade
   ====================================================== */


/* ======================================================
   1) PAGE CANVAS (NEUTRAL, NO BRAND INJECTION)
   ====================================================== */
body.service-silo,
body.event-silo,
body.local-silo {
  background: var(--unp-ink);
  color: var(--unp-dark);
  font-family: var(--font-body, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* ======================================================
   2) CONTENT SHELL
   ====================================================== */
.es-shell,
.silo-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 5.5rem) 1.4rem;
}


/* ======================================================
   3) PRIMARY EDITORIAL CARD
   ====================================================== */
.es-card,
.silo-card {
  position: relative;
  background: var(--unp-ink);
  border-radius: 32px;
  overflow: visible;
  box-shadow: 0 32px 80px rgba(0,0,0,.36);
}


/* ======================================================
   4) SECTION RHYTHM
   ====================================================== */
.es-section,
.silo-section {
  padding:
    clamp(2.2rem, 4vw, 3rem)
    clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.es-section:last-child,
.silo-section:last-child {
  border-bottom: none;
}


/* ======================================================
   5) TYPOGRAPHY — EDITORIAL SYSTEM
   (Guardian / FT inspired, modern studio-grade)
   ====================================================== */
.es-eyebrow,
.silo-eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .6rem;
}

.es-title-xl,
.silo-title-xl {
  margin: 0 0 .9rem;
  font-weight: 800;
  font-size: clamp(2.3rem, 4.2vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.es-h2,
.silo-h2 {
  margin: 0 0 .8rem;
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  display: inline-block;
  padding-bottom: .35rem;
  border-bottom: 2px solid rgba(255,75,158,.55); /* thinner, calmer */
}

.es-h3,
.silo-h3 {
  margin: 1.6rem 0 .6rem;
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
}


/* ======================================================
   6) BODY COPY
   ====================================================== */
.es-intro,
.silo-section-intro {
  max-width: 60ch;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: .9rem;
}

.es-body,
.es-list,
.silo-section p,
.silo-section ul {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: .9rem;
}

.es-list,
.silo-list {
  padding-left: 1.2rem;
}

/* ======================================================
   UNP — SUPER FRAME
   Photographic authority · Material truth · Kinetic Final
   ====================================================== */

.es-hero-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background: #000;

  /* Quiet physical edge (demoted wire) */
  border: 1px solid rgba(255,255,255,0.26);

  /* Editorial depth — calibrated, not decorative */
  box-shadow:
    0 48px 96px -24px rgba(0,0,0,0.55),
    0 12px 24px -8px rgba(0,0,0,0.28);

  /* Cross-engine stability */
  transform: translateZ(0);
}
/* ======================================================
   ES HERO — UI ESCAPE LAYER
   Allows CTAs to render above photographic frame
   ====================================================== */

.es-hero-copy {
  position: relative;
  z-index: 5;
  overflow: visible;
}

/* Explicitly allow pills to escape frame clipping */
.es-hero-copy :is(
  .unp-cta-pill,
  .unp-cta--pill,
  .unp-float-cta
){
  overflow: visible;
}

/* ------------------------------------------------------
   IMAGE — sovereign, untouched
   ------------------------------------------------------ */
.es-hero-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------
   MATERIAL RIM — refractive, no blur, no spill
   ------------------------------------------------------ */
.es-hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;

  /* Refractive density (light transport, not effects) */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02) 40%,
    rgba(0,0,0,0.08)
  );

  /* Studio-grade termination + depth */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.28), /* cut line */
    inset 0 12px 28px rgba(255,255,255,0.11), /* upper diffusion */
    inset 0 -22px 36px rgba(0,0,0,0.42);      /* mass + gravity */
}

/* ------------------------------------------------------
   SPECULAR — controlled, frame-only highlight
   ------------------------------------------------------ */
.es-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;

  background:
    radial-gradient(
      120% 80% at 18% 10%,
      rgba(255,255,255,0.45),
      transparent 55%
    ),
    radial-gradient(
      120% 80% at 85% 92%,
      rgba(255,255,255,0.18),
      transparent 60%
    );

  opacity: 0.35;
  mix-blend-mode: screen;
}
/* ======================================================
   8) TWO-COLUMN EDITORIAL LAYOUT
   ====================================================== */
.es-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.9rem;
}

@media (max-width: 900px) {
  .es-two-col {
    grid-template-columns: 1fr;
  }
}


/* ======================================================
   GALLERY — MUSEUM GLASS GRID (CLEAN & STABLE)
   Chrome / Firefox / Safari Safe
   ====================================================== */

/* ------------------------------------------
   1) GALLERY CANVAS
   ------------------------------------------ */
.es-gallery {
  background: #f2f2f2; /* neutral paper tone */
  border-radius: 32px;
  box-shadow: 0 28px 70px rgba(0,0,0,.18);
  padding: clamp(2rem, 4vw, 3rem);
  box-sizing: border-box;
}

/* ------------------------------------------
   2) GRID
   ------------------------------------------ */
.es-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.8vw, 2.2rem);
}

@media (max-width: 960px) {
  .es-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ------------------------------------------
   3) CARD — SINGLE SOURCE OF TRUTH
   ------------------------------------------ */
.es-gallery-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;

  padding: 1rem; /* ✅ correct place */

  border: 1.25px solid rgba(0,0,0,0.12);

  box-shadow: 0 18px 42px rgba(0,0,0,0.14);

  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}

/* ------------------------------------------
   4) HOVER — LIFT ONLY
   ------------------------------------------ */
.es-gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 68px rgba(0,0,0,0.18);
  border-color: rgba(0,0,0,0.22);
}

/* ------------------------------------------
   5) IMAGE FRAME — NO MARGINS
   ------------------------------------------ */
.es-gallery-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.es-gallery-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: inherit;
}

/* ------------------------------------------
   6) CAPTION SLAB
   ------------------------------------------ */
.es-gallery-meta {
  padding: 1.25rem 0 0;
  background: none;
  border-top: none;
}

/* ------------------------------------------
   7) TITLE
   ------------------------------------------ */
.es-gallery-title {
  margin: 0 0 .35rem;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--unp-dark);
}

/* ------------------------------------------
   8) CAPTION
   ------------------------------------------ */
.es-gallery-caption {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: #555;
}

/* ------------------------------------------
   9) REDUCED MOTION
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .es-gallery-card { transition: none; }
}


/* ======================================================
   10) SERVICES & PILLS
   ====================================================== */
.es-services {
  background: #f3ece7;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding: clamp(2rem, 3.5vw, 2.6rem);
}

.es-pill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .9rem;
}

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

.es-pill {
  padding: .85rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--unp-dark);
  color: var(--unp-ink);
  box-shadow: 0 18px 40px rgba(0,0,0,.33);
}

/* ======================================================
   KINETIC FLOATING CTA — FINAL GLIDE (SVH SAFE)
   ====================================================== */

#es-floating-cta {
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  z-index: 2147483646;
  transform: translateX(-50%);
  pointer-events: none;
}

#es-floating-cta .unp-float-cta {
  pointer-events: auto;
  display: inline-flex;
  isolation: isolate;

  /* Centre-screen relative to bottom anchor */
  transform: translate3d(0, calc(-50svh + 2.5rem), 0);
  opacity: 0;

  backface-visibility: hidden;
  will-change: transform, opacity;

  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease;
}

/* STATE: Centered */
#es-floating-cta.centered .unp-float-cta {
  opacity: 1;
  transform: translate3d(0, calc(-50svh + 2.5rem), 0);
}

/* STATE: Sticky */
#es-floating-cta.sticky .unp-float-cta {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Pre-flight lock */
#es-floating-cta:not(.centered):not(.sticky) .unp-float-cta {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, calc(-50svh + 2.5rem), 0);
}

/* --------------------------------------
   SCALE LAYER (The actual button)
   Apply the scale here to keep text sharp
   -------------------------------------- */
#es-floating-cta .unp-global-pill {
  display: inline-flex;
  white-space: nowrap;
  
  /* GPU Hint only on the scaling element */
  will-change: transform;
  transform: scale(1);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When the parent is centered, scale the child */
#es-floating-cta.centered .unp-global-pill {
  transform: scale(1.06);
}

/* ======================================================
   LOCAL SILO — CANVAS RESET (AUTHORITATIVE)
   ====================================================== */

body.local-silo,
body[class*="photographer-in"] {
  background: var(--unp-ink) !important;
}

/* ==========================================================
   UNP — OBSIDIAN EDITORIAL PILL
   Purpose: Editorial Label / Tag (NON-CTA)
   Status: 2028-Ready · PSI-Safe · Cross-Platform Stable
   ========================================================== */

.es-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .75rem 1.45rem;
  border-radius: 999px;

  /* ── POLISHED OBSIDIAN CORE ── */
  background:
    linear-gradient(
      180deg,
      #1b1a19 0%,
      #161514 48%,
      #0f0e0d 100%
    );

  color: var(--unp-ink);
  font-family: var(--font-head);
  font-weight: 750;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;

  /* Editorial containment */
  white-space: normal;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;

  /* ── MATERIAL DEPTH (STATIC, NO MOTION) ── */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 10px 18px rgba(255,255,255,0.04),
    inset 0 -14px 24px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.45);

  isolation: isolate; /* ✔ confirmed */
}

/* ── CONTENT LAYER AUTHORITY ── */
.es-pill > * {
  position: relative;
  z-index: 3; /* ✔ Text always above optical layers */
}

/* ── SHARP REFRACTIVE HIGHLIGHT (TOP EDGE) ── */
.es-pill::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 2px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.85),
    transparent
  );

  opacity: .75;
  pointer-events: none;
  border-radius: 1px;
  z-index: 1;
}

/* ── SOFT POLISH / LIGHT-LEAK GHOST ── */
.es-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      120% 80% at 30% -10%,
      rgba(255,255,255,0.12),
      transparent 55%
    ),
    radial-gradient(
      100% 60% at 85% 120%,
      rgba(255,75,158,0.06),
      transparent 60%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04);

  opacity: .9;
}
.es-pill {
  /* Lock ink in case global token ever shifts */
  color: #f9f7f5;

  /* Graceful handling of unexpected long labels */
  word-break: break-word;
}

/* ── ACCESSIBILITY (EDITORIAL, NOT CTA) ── */
.es-pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 75, 158, 0.4), /* Pink halo */
    0 6px 18px rgba(0, 0, 0, 0.45);   /* Grounding preserved */
}

/* ── MOBILE REFINEMENT ── */
@media (max-width: 520px) {
  .es-pill {
    letter-spacing: .1em;
    padding: .7rem 1.2rem;
  }
}
/* ======================================================
   ACCESSIBILITY — REDUCED MOTION (TARGETED)
   Only neutralises intentional kinetic systems
   ====================================================== */

@media (prefers-reduced-motion: reduce) {

  /* Floating CTA — skip glide, appear settled */
  #es-floating-cta .unp-float-cta {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    transition: none !important;
  }

  /* Gallery lift & image motion */
  .es-gallery-card,
  .es-gallery-frame img {
    transform: none !important;
    transition: none !important;
  }

  /* Material-lite pills */
  .es-pill {
    transform: none !important;
    transition: none !important;
  }
} 


/* ======================================================
   UNP — HERO CANVAS (IMAGE + EDITORIAL COPY)
   Structural role:
   - Establishes page authority
   - Separates visual impact from content flow
   ====================================================== */

.unp-hero-photo-block {
  padding: 0;
  margin-top: 0;
  background: var(--unp-ink);
}

.unp-hero-photo {
  margin: 0;
}

.unp-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.unp-hero-copy {
  max-width: 1120px;
  margin: 1.8rem auto 2.6rem;
  padding-inline: clamp(1rem, 4vw, 2rem);
  color: var(--unp-dark);
}

.unp-hero-eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.unp-hero-title {
  margin: 0 0 1.5rem 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  max-width: 900px;
  color: var(--unp-charcoal);
  text-transform: uppercase;
}

.unp-hero-title::after {
  content: "";
  display: block;
  margin-top: 0.55rem;
  width: 130px;
  height: 3px;
  background: var(--unp-pink);
}

.unp-hero-lead {
  font-family: var(--font-body);
  max-width: 680px;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: var(--muted);
}

.unp-hero-lead .for30 {
  font-weight: 800;
  font-size: 1.15em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--unp-pink);
}


/* ======================================================
   UNP — RECENT WORK (ARCHITECTURAL AUTHORITY)
   Clean, Editorial, Unified Specialty Logic
   ====================================================== */

#unp-recent-work {
  position: relative;
  isolation: isolate;
  background: #F9F7F5;
  padding-block: clamp(4rem, 8vw, 6rem);
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid rgba(24, 22, 21, .05);
}

/* Subtle editorial texture */
#unp-recent-work::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 30% 20%, rgba(24, 22, 21, .035), transparent 60%),
    radial-gradient(55% 60% at 70% 70%, rgba(24, 22, 21, .025), transparent 62%);
  filter: blur(18px);
  opacity: .45;
  pointer-events: none;
  z-index: -1;
}

#unp-recent-work .unp-recent-inner {
  max-width: 1200px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------
   HEADER — ASYMMETRICAL BALANCE
   ------------------------------------------------------ */

#unp-recent-work .unp-recent-head {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 3rem;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
  align-items: end;
}

@media (max-width: 900px) {
  #unp-recent-work .unp-recent-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

#unp-recent-work .unp-recent-eyebrow {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .226em;
  text-transform: uppercase;
  color: rgba(24, 22, 21, .55);
}

#unp-recent-work .unp-recent-title {
  margin: 0;
  font-weight: 950;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: .95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: right;
  color: #181615;
}

#unp-recent-work .unp-recent-title .line-2 {
  display: block;
  color: rgba(24, 22, 21, .75);
}

/* ------------------------------------------------------
   CASE GRID & MUSEUM CARDS
   ------------------------------------------------------ */

.unp-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.unp-case-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.unp-case-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 0 0 1px rgba(24, 22, 21, .10),
    12px 12px 0 rgba(24, 22, 21, .035);
  transition:
    transform 700ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 700ms cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------
   IMAGE FRAME — RAZOR CLEAN
   ------------------------------------------------------ */

.unp-case-media {
  padding: 10px;
  background: #fdfdfd;
  position: relative;
}

.unp-case-media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(24, 22, 21, .14);
  pointer-events: none;
}

.unp-case-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  transform: scale(1.015);
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------
   COPY & CTA ANCHORING
   ------------------------------------------------------ */

.unp-case-body-wrap {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Anchors the CTA to the bottom of the card */
}

.unp-case-tag {
  margin: 0 0 .3rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(24, 22, 21, .55);
}

.unp-case-title {
  margin: 0;
  font-weight: 750;
  font-size: 1.02rem;
  line-height: 1.3;
  color: #181615;
}

.unp-case-body {
  margin: .55rem 0 1.2rem;
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(24, 22, 21, .75);
}

.unp-case-view {
  margin-top: auto; /* Pushes to bottom regardless of text length */
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #181615;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.unp-case-view::after {
  content: "";
  width: 6px;
  height: 1px;
  background: #181615;
  transition: width 400ms cubic-bezier(.16, 1, .3, 1), background 400ms ease;
}

/* ------------------------------------------------------
   HOVER INTERACTIONS — THE "PINK MOMENT"
   ------------------------------------------------------ */

.unp-case-link:hover .unp-case-card {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 75, 158, .85),
    16px 16px 0 rgba(255, 75, 158, .12);
}

.unp-case-link:hover .unp-case-media img {
  transform: scale(1.06);
}

.unp-case-link:hover .unp-case-view::after {
  width: 18px;
  background: #FF4B9E;
}

/* ------------------------------------------------------
   SECTION MASTER CTA
   ------------------------------------------------------ */

#unp-recent-work .unp-recent-cta {
  margin-top: clamp(3.5rem, 6vw, 4.5rem);
  display: flex;
  justify-content: center;
}
/* -----------------------------------------------
   RECENT WORK — CAPTION BREATHING SPACE
   ----------------------------------------------- */

.unp-case-credit-strip {
  margin-top: 0.55rem;              /* creates air from image */
  padding: .55rem 1rem .6rem;       /* slightly taller */
  font-size: .74rem;                /* a touch quieter */
  letter-spacing: .10em;
  color: rgba(24,22,21,.62);        /* lighter ink */
  background: none;                 /* remove canvas feel */
  border: none;                     /* let space do the work */
}

/* ======================================================
   UNP — FOOTER (STUDIO-GRADE MASTER FULL)
   ====================================================== */

.unp-footer {
  position: relative;
  z-index: 2;
  /* Atmospheric Charcoal with subtle depth */
  background: radial-gradient(circle at 20% 20%, rgba(var(--unp-dark-rgb), 0.95) 0%, var(--unp-dark) 100%);
  color: var(--unp-ink);
  font-family: var(--font-body);
  padding: 4.5rem 1.75rem 3rem;
  margin-top: 5rem;
  border-top: 1px solid rgba(var(--unp-ink-rgb), 0.08);
  overflow: hidden;
}

/* Atmospheric Mesh overlay */
.unp-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 40% at 80% 10%, rgba(var(--unp-pink-rgb), 0.03), transparent),
    radial-gradient(50% 50% at 10% 90%, rgba(var(--unp-blue-rgb), 0.02), transparent);
  pointer-events: none;
}

/* Ensure Astra theme defaults stay transparent */
.site-footer, 
.site-footer .ast-footer-overlay {
  background: transparent !important;
}

.unp-footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* Layout Split */
.unp-footer-top {
  display: grid;
  grid-template-columns: minmax(300px, 360px) 1fr;
  gap: 4rem;
  padding-bottom: 3.5rem;
}
.unp-footer-copy span {
    color: var(--unp-pink); /* Only makes the brand name pink, not the dates */
}

/* ======================================================
   BRAND / GLASS COLUMN (STUDIO-GRADE UPDATED)
   ====================================================== */

.unp-footer-brand {
  position: relative;
  padding: 2.5rem 2rem; /* Slightly more vertical breathing room */
  background: rgba(var(--unp-ink-rgb), 0.02);
  border: 1px solid rgba(var(--unp-ink-rgb), 0.06);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.unp-footer-brand::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(var(--unp-ink-rgb), 0.04);
  border-radius: 16px;
  pointer-events: none;
}

.unp-footer-logo img {
  width: 100px;
  height: auto;
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.unp-footer-tagline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  color: #fff;
}

.unp-footer-address {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(var(--unp-ink-rgb), 0.7);
  margin-bottom: 1.5rem;
}

/* --- THE NEW CONTACT GRID FIX --- */

.unp-footer-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.unp-footer-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.unp-contact-item {
    text-decoration: none;
    font-size: 0.88rem;
    color: rgba(var(--unp-ink-rgb), 0.85);
    transition: all var(--t-fast) var(--e-out);
    display: flex;
    align-items: center;
}

.unp-contact-item:hover {
    color: var(--unp-pink);
}

.unp-contact-label {
    font-weight: 800;
    color: var(--unp-pink);
    margin-right: 0.4rem;
    font-size: 0.75rem;
}

/* WhatsApp / Viber Specialty Accent */
.unp-contact-item.unp-wa {
    background: rgba(var(--unp-pink-rgb), 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(var(--unp-pink-rgb), 0.15);
    font-weight: 600;
    font-size: 0.8rem;
}

.unp-contact-item.unp-wa:hover {
    background: var(--unp-pink);
    color: var(--unp-dark);
}

/* ======================================================
   FOOTER NAVIGATION GRID
   ====================================================== */

.unp-footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

.unp-footer-heading {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--unp-pink);
  margin-bottom: 1.2rem;
}

.unp-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.unp-footer-list li {
  margin-bottom: 0.5rem;
}

.unp-footer-list a {
  text-decoration: none;
  font-size: 0.88rem;
  color: rgba(var(--unp-ink-rgb), 0.6);
  transition: all var(--t-fast) var(--e-out);
}

.unp-footer-list a:hover {
  color: #fff;
  transform: translateX(4px);
  display: inline-block;
}

/* ======================================================
   PRECISION SOCIALS
   ====================================================== */

.unp-footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.unp-footer-social-link {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(var(--unp-pink-rgb), 0.3) !important;
  background: rgba(var(--unp-pink-rgb), 0.05) !important;
  color: #fff !important;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--t-med) var(--e-out) !important;
}

.unp-footer-social-link:hover {
  background: var(--unp-pink) !important;
  color: var(--unp-dark) !important;
  border-color: var(--unp-pink) !important;
  box-shadow: 0 0 20px rgba(var(--unp-pink-rgb), 0.4);
  transform: translateY(-3px) scale(1.05);
}

/* ======================================================
   COPYRIGHT BAR
   ====================================================== */

.unp-footer-copy {
  border-top: 1px solid rgba(var(--unp-ink-rgb), 0.06);
  padding-top: 2rem;
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(var(--unp-ink-rgb), 0.4);
}

.unp-footer-copy span {
  color: rgba(var(--unp-ink-rgb), 0.8);
  font-weight: 600;
}

/* ======================================================
   MOBILE OPTIMIZATION
   ====================================================== */

@media (max-width: 1040px) {
  .unp-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .unp-footer-top { grid-template-columns: 1fr; gap: 3rem; }
  .unp-footer-brand { max-width: 420px; margin: 0 auto; text-align: center; }
  .unp-footer-logo img { margin: 0 auto 1.2rem; }
  .unp-footer-social { justify-content: center; }
}

@media (max-width: 600px) {
  .unp-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
.case-study-balanced .csb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}


/* ======================================================
   1. CASE STUDY: BUSINESS PORTRAITS (RESTORED)
   Original Desktop Logic + Surgical Mobile Fixes
   ====================================================== */

.case-study-balanced {
  background: var(--unp-ink);
  padding: clamp(5rem, 10vw, 8rem) 16px;
  color: var(--unp-dark);
  font-family: var(--font-body);
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--unp-dark-rgb), 0.05);
}

/* INNER GRID — Restored to 1fr 1.1fr 1fr */
.csb-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: clamp(30px, 4vw, 80px);
  align-items: center;
}

.csb-left, .csb-right {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

.csb-right > .csb-landscape:first-child {
  margin-top: 0.5rem;
}

/* THE MUSEUM FRAME — Restored Original Logic */
.csb-upright, .csb-landscape {
  position: relative;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  border-radius: 24px;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  box-shadow: 
    inset 0 0 0 1px var(--unp-dark), 
    14px 14px 0 rgba(var(--unp-dark-rgb), 0.045);
  transition: transform 600ms var(--e-out), box-shadow 600ms var(--e-out);
}

.csb-upright { aspect-ratio: 2 / 3; }
.csb-landscape { aspect-ratio: 3 / 2; }

:is(.csb-upright, .csb-landscape) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 15px; 
  box-sizing: border-box;
  filter: grayscale(18%);
  transition: filter 600ms ease;
  image-rendering: -webkit-optimize-contrast;
}

/* INTERACTION */
:is(.csb-upright, .csb-landscape):hover {
  transform: translate3d(-6px, -6px, 0);
  box-shadow: 
    inset 0 0 0 1.5px var(--unp-pink), 
    18px 18px 0 var(--unp-pink);
}

:is(.csb-upright, .csb-landscape):hover img { filter: grayscale(0%); }

/* TYPOGRAPHY */
.csb-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.csb-title span {
  color: var(--unp-pink);
  display: inline-block;
  position: relative;
}

.csb-title span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 3px;
  background: var(--unp-pink);
  opacity: 0.8;
}

/* ======================================================
   SURGICAL MOBILE FIX (NO OVERRIDES)
   ====================================================== */
@media (max-width: 900px) {
  .csb-inner { 
    grid-template-columns: 1fr; 
    gap: 4rem; 
  }
  
  .csb-middle { 
    order: -1; 
    text-align: left; /* Better for mobile readability */
    width: 100%;
    min-width: 0; /* Prevents text-squish line bug */
  }

  .csb-title {
    font-size: 1.8rem;
    white-space: normal; /* Forces text to wrap correctly */
    overflow-wrap: break-word;
  }

  .csb-left, .csb-right { gap: 2rem; }
  .csb-right > .csb-landscape:first-child { margin-top: 0; }
}
/* ======================================================
   CASE STUDY — MOBILE TRANSLATION (INTENTIONAL)
   Does NOT touch desktop
   ====================================================== */

@media (max-width: 820px) {

  .case-study-balanced .csb-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Order the narrative */
  .case-study-balanced .csb-left {
    order: 1; /* Hero image first */
  }

  .case-study-balanced .csb-right {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .case-study-balanced .csb-middle {
    order: 3; /* Copy last */
  }

  /* Let images breathe */
  .case-study-balanced .csb-upright,
  .case-study-balanced .csb-landscape {
    max-width: 100%;
  }

}

/* ======================================================
   UNP — METRICS BAND (FINAL STABLE STUDIO CONFIG)
   Integrated Isolation + Glass Whisper + Centred Gravity
   ====================================================== */

#unp-metrics.umx-band {
  --umx-radius: 24px;
  isolation: isolate;
  background: #F9F7F5;
  padding: clamp(4.5rem, 9vw, 7rem) 20px;
}

#unp-metrics .umx-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* ── PSI-SAFE SPECIALTY TITLE ── */

#unp-metrics .umx-title {
  margin: 0 0 1rem 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #181615;
}

#unp-metrics .umx-title span {
  display: inline-block;
  padding: 0.14em 0.6em 0.18em;
  font-weight: 900;

  /* PRIMARY SURFACE: obsidian (quiet authority) */
  background: linear-gradient(
    180deg,
    #1b1a19,
    #141312
  );

  /* TEXT: calm editorial light */
  color: #f5f4f2;

  border-radius: 999px;
  transform: rotate(-1.2deg);
  margin: 0 4px;

  /* PINK = ACCENT ONLY (not substrate) */
  box-shadow:
    /* precision pink hairline */
    0 0 0 1.5px rgba(255, 75, 158, 0.65),

    /* structural obsidian shell */
    0 0 0 5px #181615,

    /* subtle optical depth */
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}

/* ── GRID ── */

#unp-metrics .umx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── CARD BASE ── */

#unp-metrics .umx-card {
  position: relative;
  isolation: isolate;
  padding: 48px 32px;
  border-radius: var(--umx-radius);
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.90)
  );
  transition:
    transform 0.55s cubic-bezier(0.2, 1, 0.2, 1),
    box-shadow 0.4s ease;
}

/* Ensure content always sits above optical layers */
#unp-metrics .umx-card > * {
  position: relative;
  z-index: 2;
}

/* ── REFRACTIVE EDGE ── */

#unp-metrics .umx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  border: 0.75px solid rgba(24, 22, 21, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  transition: border-color 0.4s ease;
}

/* ── CONSOLIDATED OBSIDIAN LENS (Glass + Recess) ── */

@supports (backdrop-filter: blur(1px)) {
  #unp-metrics .umx-card::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--umx-radius) - 6px);
    pointer-events: none;
    z-index: 0;

    /* Obsidian tint */
    background: linear-gradient(
      180deg,
      rgba(24, 22, 21, 0.06),
      rgba(24, 22, 21, 0.12)
    );

    /* Glass optics */
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);

    /* Structural depth */
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.1),
      inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* ── INTERACTION ── */

@media (hover: hover) {
  #unp-metrics .umx-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
  }

  #unp-metrics .umx-card:hover::before {
    border-color: var(--unp-pink);
  }
}

/* ── COUNTERS ── */

#unp-metrics .umx-figure {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 24px;
}

#unp-metrics .umx-counter {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.8rem, 4vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: #181615;
  font-variant-numeric: tabular-nums;
}

#unp-metrics .umx-suffix {
  margin-left: 2px;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--unp-pink);
  transform: translateY(-0.1em);
}

#unp-metrics .umx-label {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  color: rgba(24, 22, 21, 0.6);
  text-transform: uppercase;
}

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
  #unp-metrics .umx-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #unp-metrics .umx-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #unp-metrics .umx-card {
    padding: 32px 24px;
  }
}

/* ======================================================
   UNP — CONTACT PAGE (BALANCED STUDIO EDITION)
   High-Contrast · Refined Typography · Editorial Grid
   ====================================================== */

#unp-contact-page .unp-contact-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* ------------------------------------------------------
   HERO HEADER: OVERLAP LAYOUT
   ------------------------------------------------------ */

#unp-contact-page .unp-contact-header {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

/* Massive background word */
#unp-contact-page .unp-contact-title-massive {
  display: block;
  font: 900 clamp(4.5rem, 10vw, 8.5rem)/0.85 var(--font-head);
  letter-spacing: -0.045em;
  color: var(--unp-dark);
  margin-left: -4px;
}

/* Secondary line - Tucked under massive text */
#unp-contact-page .unp-contact-title-main {
  display: block;
  font: 800 clamp(1.6rem, 3.2vw, 2.4rem)/1.25 var(--font-head);
  letter-spacing: -0.02em;
  margin-top: -6px;
  color: var(--unp-dark);
}

#unp-contact-page .unp-contact-pink {
  color: var(--unp-pink);
}

#unp-contact-page .unp-contact-standfirst,
#unp-contact-page .unp-contact-intro {
  max-width: 46rem;
  font: 500 1.1rem/1.65 var(--font-body);
  color: rgba(var(--unp-dark-rgb), 0.75);
  margin: 1.6rem 0 3rem;
}

/* ------------------------------------------------------
   HERO IMAGE & CREDIT PILL
   ------------------------------------------------------ */

#unp-contact-page .unp-contact-hero-figure {
  position: relative;
  margin: 0 0 3.5rem;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

#unp-contact-page .unp-contact-hero-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

#unp-contact-page .unp-contact-hero-credit {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: #fff;
  padding: 7px 16px;
  border-radius: 999px;
  font: 800 0.7rem/1 var(--font-head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* ------------------------------------------------------
   STAFF SECTION (5-UP GRID)
   ------------------------------------------------------ */

#unp-contact-page .unp-contact-staff {
  background: #F9F7F5;
  padding: clamp(4rem, 7vw, 5.5rem) 0;
  margin: clamp(3rem, 6vw, 4.5rem) 0;
}

#unp-contact-page .unp-staff-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}

#unp-contact-page .unp-staff-photo {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform .35s cubic-bezier(.2,1,.2,1);
}

#unp-contact-page .unp-staff-photo:hover {
  transform: translateY(-4px);
}

/* ------------------------------------------------------
   FORM ELEMENTS
   ------------------------------------------------------ */

#unp-contact-page .unp-contact-field {
  margin-bottom: 2.5rem;
  max-width: 650px;
}

#unp-contact-page .unp-contact-field label {
  display: block;
  margin-bottom: 0.75rem;
  font: 800 0.75rem/1 var(--font-head);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--unp-dark);
}

#unp-contact-page input,
#unp-contact-page select,
#unp-contact-page textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(var(--unp-pink-rgb), 0.2);
  background: transparent;
  padding: 10px 0;
  font: 400 1.05rem var(--font-body);
  color: var(--unp-dark);
  border-radius: 0;
  transition: all 0.3s ease;
}

#unp-contact-page input:focus,
#unp-contact-page textarea:focus {
  outline: none;
  border-bottom-color: var(--unp-pink);
  background: rgba(var(--unp-pink-rgb), 0.02);
}

#unp-contact-page .unp-contact-submit {
  padding: 1rem 3rem;
  border-radius: 999px;
  border: 1px solid var(--unp-dark);
  background: transparent;
  font: 800 0.85rem var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

#unp-contact-page .unp-contact-submit:hover {
  background: var(--unp-pink);
  border-color: var(--unp-pink);
  color: #fff;
  transform: translateY(-2px);
}

/* ------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------ */

@media (max-width: 1024px) {
  #unp-contact-page .unp-staff-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  #unp-contact-page .unp-contact-title-massive { font-size: 4.5rem; }
  #unp-contact-page .unp-staff-gallery { grid-template-columns: repeat(2, 1fr); }
  #unp-contact-page .unp-contact-hero-credit { padding: 6px 12px; font-size: 0.65rem; }
  #unp-contact-page .unp-contact-submit { width: 100%; }
}
/* ======================================================
   FINAL CALL TO ACTION (CTA) REFINEMENT
   ====================================================== */

#unp-contact-page .unp-contact-cta-final {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--unp-dark);
  border-left: 3px solid var(--unp-pink); /* Editorial accent bar */
  padding-left: 1.5rem;
  margin-top: 2.5rem;
}

/* Ensure bold text renders with studio weight */
#unp-contact-page .unp-contact-cta-final strong {
  font-weight: 800;
  color: var(--unp-dark);
}

@media (max-width: 640px) {
  #unp-contact-page .unp-contact-cta-final {
    font-size: 1.05rem;
    padding-left: 1.25rem;
  }
}


/* ======================================================
   UNP — PREMIER STUDIO BOOKING PAGE
   ====================================================== */

:root {
  --unp-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

#unp-book-page {
  background: var(--unp-cream);
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow-x: clip; /* Modern safety for iOS */
  -webkit-font-smoothing: antialiased;
}

#unp-book-page .unp-book-shell {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 2.5rem);
}

/* -------- Hero: Editorial Overlap -------- */

#unp-book-page .unp-book-header {
  margin-bottom: clamp(4rem, 10vw, 7rem);
  /* Ensures text doesn't hide behind iPhone notches */
  padding-top: env(safe-area-inset-top, 0); 
}

#unp-book-page .unp-book-title-massive {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(4rem, 16vw, 9.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--unp-dark);
  /* Safety: prevents top-clipping of tall capitals */
  padding-top: 0.05em;
  /* Optical shift for high-end alignment */
  transform: translateX(-0.04em);
}

#unp-book-page .unp-book-title-main {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  letter-spacing: -0.02em;
  margin-top: -0.25em; /* Studio overlap */
  color: var(--unp-dark);
}

#unp-book-page .unp-pink {
  color: var(--unp-pink);
  text-shadow: 0 0 1px rgba(var(--unp-pink-rgb), 0.12);
}

/* -------- Form: Studio Minimal Skin -------- */

#unp-book-page input,
#unp-book-page select,
#unp-book-page textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(var(--unp-dark-rgb), 0.14);
  background: transparent;
  padding-block: 0.75rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--unp-dark);
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color 0.35s var(--unp-ease), background 0.35s var(--unp-ease);
}

#unp-book-page input:focus,
#unp-book-page textarea:focus {
  outline: none;
  border-bottom-color: var(--unp-pink);
  background: linear-gradient(to right, rgba(var(--unp-pink-rgb), 0.04), transparent);
}

#unp-book-page .unp-book-submit {
  margin-top: 1.5rem;
  padding: 1.2rem 3.5rem;
  border-radius: 100px;
  background: var(--unp-dark);
  color: #fff;
  border: 1px solid var(--unp-dark);
  font: 800 0.8rem/1 var(--font-head);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s var(--unp-ease);
}

#unp-book-page .unp-book-submit:hover {
  background: var(--unp-pink);
  border-color: var(--unp-pink);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(var(--unp-pink-rgb), 0.25);
}

/* -------- Staff: Gallery & Image Contract -------- */

#unp-book-page .unp-book-staff {
  padding-block: clamp(3rem, 7vw, 5rem);
}

#unp-book-page .unp-book-staff-grid {
  display: grid;
  gap: 1.5rem;
  /* Fluid mobile grid */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

#unp-book-page .unp-book-staff-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  transition: transform 0.4s var(--unp-ease);
}

#unp-book-page .unp-book-staff-card:hover {
  transform: translateY(-5px);
}

#unp-book-page .unp-book-staff-card img {
  width: 100%;
  aspect-ratio: 4 / 5;   /* Locked Editorial Ratio */
  object-fit: cover;     /* Prevent distortion */
  object-position: 50% 30%; /* Focus on faces/eyes */
  display: block;
}

#unp-book-page .unp-book-staff-card figcaption {
  padding: 1.2rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--unp-dark);
}

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

@media (max-width: 640px) {
  #unp-book-page .unp-book-title-massive {
    font-size: 18vw;
    line-height: 0.9;
  }
  #unp-book-page .unp-book-submit {
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  #unp-book-page .unp-book-staff-grid {
    /* The UNP signature 5-column desktop look */
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1440px) {
  #unp-book-page .unp-book-staff-grid {
    max-width: 1100px;
    margin-inline: auto;
  }
}

/* ======================================================
   UNP — STUDIO GRID & FILTER SYSTEM (CLEANSED)
   Use this for: Services Hub, Case Studies, or Blog Index
   ====================================================== */

.unp-studio-hero {
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: 2.5rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(var(--unp-dark-rgb, 0, 0, 0), 0.08);
}

.unp-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  font: 800 0.75rem/1 var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--unp-dark);
  opacity: 0.5;
}

.unp-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.unp-back-link:hover {
  color: var(--unp-pink);
  opacity: 1;
  transform: translateX(-3px);
}

.unp-hero-tagline {
  max-width: 520px;
  font: 500 1.1rem/1.6 var(--font-body);
  color: var(--unp-dark);
  opacity: 0.8;
}
/* ------------------------------------------------------
   PILL FILTERS
   ------------------------------------------------------ */
.unp-studio-filters {
  margin-bottom: 3rem;
}

.filter-label {
  display: block;
  font: 800 0.7rem/1 var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.2rem;
  opacity: 0.4;
}

.filter-scroll-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.unp-pill {
  display: inline-flex;
  padding: 0.7rem 1.4rem;
  border: 1px solid rgba(var(--unp-dark-rgb, 0,0,0), 0.12);
  border-radius: 100px;
  text-decoration: none;
  color: var(--unp-dark);
  font: 600 0.85rem/1 var(--font-body);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: #fff;
}

.unp-pill:hover, 
.unp-pill.active {
  background: var(--unp-dark);
  color: #fff;
  border-color: var(--unp-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
/* ======================================================
   ASTRA STICKY HEADER OFFSET
   Push first content section below header
   ====================================================== */
/* Logged-in admin bar safety */
body.admin-bar.page .unp-studio-wrapper,
body.admin-bar.page #unp-services {
  padding-top: calc(2rem + var(--ast-header-height, 96px) + 32px);
}

/* ======================================================
   UNP MASTER CSS — BALANCED STUDIO SYSTEM
   Canonical Global Stylesheet (LOCKED)
   ====================================================== */

/* ------------------------------------------------------
   GLOBAL VARIABLES
   ------------------------------------------------------ */
/* (Variables consolidated in UNP — ROOT TOKENS at top of file) */


/* ======================================================
   SECTION 1: STANDARD / BOOKING / CONTACT (LIGHT MODE)
   ====================================================== */

#unp-book-page,
.unp-standard-page {
  background: var(--unp-cream);
  color: var(--unp-dark);
}

.unp-book-shell,
.unp-studio-wrapper {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}

/* ======================================================
   SECTION 2: STUDIO GRID & FILTER SYSTEM (EDITORIAL)
   ====================================================== */

/* --- HERO --- */
.unp-studio-hero {
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(var(--unp-dark-rgb), 0.08);
  padding-bottom: 2.5rem;
}

.unp-hero-meta {
  font-weight: 600;
  opacity: 0.6;
}

.unp-hero-content {
  max-width: 520px;
}

/* --- FILTER PILLS --- */
.unp-studio-filters {
  margin-bottom: 3rem;
}

.filter-label {
  font: 800 0.7rem/1 var(--font-head);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 1.2rem;
}

.filter-scroll-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.unp-pill {
  display: inline-flex;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--unp-dark-rgb), 0.12);
  background: #fff;
  color: var(--unp-dark);
  font: 600 0.85rem/1 var(--font-body);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.unp-pill:hover,
.unp-pill.active {
  background: var(--unp-dark);
  color: #fff;
  border-color: var(--unp-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* ======================================================
   STUDIO GRID (LIGHT EDITORIAL CARDS)
   ====================================================== */

.unp-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 3.5rem 2rem;
}

.unp-studio-grid .wp-block-post {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: transform 0.4s ease;
}

/* Image */
.unp-studio-grid .wp-block-post-featured-image {
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: 0 15px 45px rgba(0,0,0,0.08);
}

.unp-studio-grid .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.unp-studio-grid .wp-block-post:hover img {
  transform: scale(1.05);
}

/* Title */
.unp-studio-grid .wp-block-post-title {
  font: 800 1.4rem/1.2 var(--font-head);
  margin-bottom: 0.6rem;
}

.unp-studio-grid .wp-block-post-title a {
  color: var(--unp-dark);
  text-decoration: none;
}

.unp-studio-grid .wp-block-post:hover .wp-block-post-title a {
  color: var(--unp-pink);
}

/* Excerpt */
.unp-studio-grid .wp-block-post-excerpt {
  font: 400 0.95rem/1.6 var(--font-body);
  opacity: 0.7;
  margin-bottom: 1.2rem;
}

/* Read More (Editorial Accent) */
.unp-studio-grid .wp-block-read-more a {
  font: 800 0.75rem/1 var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--unp-dark);
  border-bottom: 2px solid rgba(var(--unp-pink-rgb), 0.3);
  padding-bottom: 4px;
  transition: all 0.3s ease;
}

.unp-studio-grid .wp-block-read-more a:hover {
  border-bottom-color: var(--unp-pink);
  color: var(--unp-pink);
}

/* ======================================================
   MOBILE OPTIMISATION
   ====================================================== */

@media (max-width: 720px) {
  .filter-scroll-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.8rem;
  }

  .filter-scroll-track::-webkit-scrollbar {
    height: 4px;
  }

  .filter-scroll-track::-webkit-scrollbar-thumb {
    background: rgba(var(--unp-dark-rgb), 0.25);
    border-radius: 10px;
  }
}

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

/* ======================================================
   UNP — LATEST FEATURED WORK
   Editorial Highlight Module (System-Aligned)
   ====================================================== */

#unp-latest {
  background: var(--unp-cream);
  color: var(--unp-dark);
  padding: clamp(4.5rem, 9vw, 7rem) 1rem clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}

#unp-latest .ulf-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* HEADER */
#unp-latest .ulf-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

#unp-latest .ulf-kicker {
  font: 800 0.75rem/1 var(--font-head);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--unp-pink);
  margin-bottom: 1rem;
}

#unp-latest .ulf-title {
  font: 900 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--font-head);
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
}

#unp-latest .ulf-title span {
  font-style: italic;
  color: var(--unp-pink);
}

#unp-latest .ulf-sub {
  font: 500 1.05rem/1.7 var(--font-body);
  color: rgba(var(--unp-dark-rgb), 0.7);
  max-width: 68ch;
}

/* CARD */
#unp-latest .ulf-card {
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
  border: 1px solid rgba(var(--unp-dark-rgb), 0.08);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 28px 72px rgba(17,16,15,.14);
  transition: transform .5s cubic-bezier(.2,1,.2,1),
              box-shadow .5s cubic-bezier(.2,1,.2,1),
              border-color .35s ease;
}

#unp-latest .ulf-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--unp-pink-rgb), 0.28);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 48px 110px rgba(17,16,15,.18);
}

/* IMAGE */
#unp-latest .ulf-frame {
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  background: var(--unp-cream);
  border-radius: 22px 22px 0 0;
}

#unp-latest .ulf-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1s cubic-bezier(.2,1,.2,1);
}

#unp-latest .ulf-card:hover .ulf-frame img {
  transform: scale(1.05);
}

/* META */
#unp-latest .ulf-meta {
  padding: clamp(1.6rem, 3vw, 2.5rem);
}

#unp-latest .ulf-tag {
  font: 800 0.72rem/1 var(--font-head);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--unp-pink);
  margin-bottom: 0.8rem;
}

#unp-latest .ulf-post-title {
  font: 800 clamp(1.4rem, 2vw, 1.85rem)/1.2 var(--font-head);
  margin-bottom: 1.25rem;
}

#unp-latest .ulf-post-title a {
  color: var(--unp-dark);
  text-decoration: none;
}

#unp-latest .ulf-post-title a:hover {
  color: var(--unp-pink);
}

/* FOOTER LINK */
#unp-latest .ulf-footer-text {
  font: 800 0.8rem/1 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--unp-dark-rgb), 0.75);
  text-decoration: none;
  border-bottom: 2px solid rgba(var(--unp-pink-rgb), 0.25);
  padding-bottom: 0.4rem;
  transition: all .25s ease;
}

#unp-latest .ulf-footer-text:hover {
  color: var(--unp-dark);
  border-bottom-color: var(--unp-pink);
}

/* MOTION SAFETY */
@media (prefers-reduced-motion: reduce) {
  #unp-latest * {
    transition: none !important;
    transform: none !important;
  }
}

/* ======================================================
   SECTION 4: FEATURED HERO (THE BIG SHOWCASE)
   ====================================================== */

.unp-featured-latest {
  margin: clamp(3rem, 6vw, 4.5rem) 0;
}

.unp-featured-inner {
  max-width: 1180px; /* Aligned with your other shells */
  margin: 0 auto;
  padding: 0 1.5rem;
}

.unp-featured-card {
  /* Dramatic Dark Background */
  background: linear-gradient(180deg, #181615 0%, #050404 100%);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 32px 90px rgba(0,0,0,0.3);
  color: var(--unp-cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.unp-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 110px rgba(0,0,0,0.5);
  border-color: rgba(var(--unp-pink-rgb), 0.4);
}

/* Image Scale Logic */
.unp-featured-media {
  position: relative;
  aspect-ratio: 16 / 9; /* Wider for a hero feel */
  overflow: hidden;
}

.unp-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.unp-featured-card:hover .unp-featured-media img {
  transform: scale(1.05);
}

/* 2-Column Desktop Body */
.unp-featured-body {
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Responsive Fix for Featured Body */
@media (max-width: 850px) {
  .unp-featured-body {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.unp-featured-title {
  font: 800 2rem/1.2 var(--font-head);
  margin: 0.5rem 0 1rem;
}

.unp-featured-title a {
  color: #fff;
  text-decoration: none;
  /* Signature Pink Underline */
  box-shadow: inset 0 -0.15em 0 rgba(var(--unp-pink-rgb), 0.4);
  transition: box-shadow 0.3s ease;
}

.unp-featured-title a:hover {
  box-shadow: inset 0 -0.4em 0 rgba(var(--unp-pink-rgb), 0.6);
}
.unp-featured-excerpt {
  font: 400 1rem/1.7 var(--font-body);
  color: rgba(249,247,245,0.85);
  margin: 0 0 1.5rem;
}

.unp-featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  background: var(--unp-pink);
  color: var(--unp-dark);
  font: 800 0.75rem/1 var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.unp-featured-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
/* ======================================================
   UNP — ARCHIVE GRID (EDITORIAL COLLECTION)
   Use for: Blog archive / Category pages
   ====================================================== */

.unp-archive-list {
  max-width: 1200px;
  margin: 0 auto clamp(3rem, 6vw, 4rem);
}

.unp-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.unp-archive-card {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(circle at bottom, rgba(24,22,21,0.9), #040404);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--unp-cream);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.unp-archive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.9);
}

/* Media */
.unp-archive-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.unp-archive-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform .35s ease;
}

.unp-archive-card:hover img {
  transform: scale(1.08);
}

/* Body */
.unp-archive-body {
  padding: 1.2rem 1.4rem;
}

.unp-archive-category {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}

.unp-archive-title {
  font-size: 1.05rem;
  margin: .4rem 0;
}

.unp-archive-title a {
  color: var(--unp-cream);
  text-decoration: none;
  box-shadow: inset 0 -0.08em 0 rgba(255,75,158,.35);
}

.unp-archive-excerpt {
  font-size: .88rem;
  line-height: 1.6;
  opacity: .85;
}
/* ======================================================
   UNP — HOME INSIGHTS (EDITORIAL, PSI-SAFE)
   Scope: #unp-latest ONLY
   ====================================================== */

#unp-latest {
  --insight-motion-ease: cubic-bezier(.16,1,.3,1);
  --insight-motion-dur: 900ms;
  --insight-motion-delay: 120ms;
}

/* ------------------------------------------------------
   HEADER — INSIGHTS PILL (PSI-SAFE, INLINE)
   ------------------------------------------------------ */

#unp-latest .ulf-insight-pill {
  display: inline-block;

  color: var(--unp-pink);
  background: rgb(var(--unp-dark-rgb));

  padding: 0.12em 0.5em 0.18em;
  margin-left: .25em;
  border-radius: 999px;

  border: 1px solid rgba(255, 75, 158, 0.55);

  box-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 0 0 3px rgba(var(--unp-dark-rgb), 0.85);

  font-weight: 900;
  font-size: 0.9em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ------------------------------------------------------
   SYSTEM LABEL (REPLACES “UNCATEGORIZED” VISUALLY)
   ------------------------------------------------------ */

#unp-latest .ulf-tag {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: .6rem;
  color: transparent;
}

#unp-latest .ulf-tag::before {
  content: "UNP INSIGHT";
  color: var(--unp-pink);
}

/* ------------------------------------------------------
   CARD LAYOUT — EDITORIAL SLAB
   ------------------------------------------------------ */

#unp-latest .ulf-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 3vw, 2.6rem);

  background: rgba(249,247,245,.96);
  border-radius: 28px;
  padding: clamp(1.8rem, 3vw, 2.4rem);

  box-shadow:
    0 28px 80px rgba(0,0,0,.18),
    0 0 0 1px rgba(24,22,21,.06);
}

@media (max-width: 820px) {
  #unp-latest .ulf-card {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------
   IMAGE — EDITORIAL CROP + MOTION
   ------------------------------------------------------ */

#unp-latest .ulf-frame {
  border-radius: 22px;
  overflow: hidden;
}

#unp-latest .ulf-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.035) translateX(-1%);
  transition:
    transform var(--insight-motion-dur) var(--insight-motion-ease),
    filter var(--insight-motion-dur) ease;

  filter: saturate(1.03) contrast(1.02);
}

#unp-latest .ulf-card:hover .ulf-frame img {
  transform: scale(1.08) translateX(1%);
}

/* ------------------------------------------------------
   META — TITLE
   ------------------------------------------------------ */

#unp-latest .ulf-post-title {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.15;
  font-weight: 900;
  margin: 0 0 .8rem;
}


/* ======================================================
   IN THE PRESS — UNP EDITORIAL AUTHORITY
   Calm · Credible · Trade-facing · Picture-desk-led
   ====================================================== */
/* ======================================================
   IN THE PRESS — HERO SPACING CORRECTION
   ====================================================== */

.es-section:first-of-type {
  padding-top: clamp(5.5rem, 10vw, 7.5rem);
}


/* ======================================================
   SECTION CANVAS — EDITORIAL DESK
   ====================================================== */

#unp-latest {
  background:
    radial-gradient(
      circle at top left,
      rgba(var(--unp-pink-rgb), 0.08),
      transparent 55%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(var(--unp-dark-rgb), 0.08),
      transparent 50%
    ),
    var(--unp-ink);

  padding: clamp(4.5rem, 9vw, 7rem) 1rem;
}

/* ======================================================
   FEATURED INSIGHT CARD
   ====================================================== */

#unp-latest .ulf-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--unp-radius);

  border: 1px solid rgba(var(--unp-dark-rgb), 0.10);

  box-shadow:
    0 24px 60px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.35);

  overflow: hidden;

  transition:
    transform .45s var(--e-out),
    box-shadow .45s var(--e-out);
}

#unp-latest .ulf-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 36px 80px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.45);
}

/* Logo / publication mark — editorial label */
#unp-latest .ulf-logo-overlay {
  position: absolute;
  bottom: 18px;
  right: 18px;

  width: 48px;
  height: 48px;

  background: rgba(255,255,255,0.92);

  border-radius: 10px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(var(--unp-dark-rgb), 0.12);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.22);
}

/* ======================================================
   PRESS GRID — ARCHIVAL, NOT MARKETING
   ====================================================== */

.unp-press-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Individual press tile */
.unp-press-item {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;

  border: 1px solid rgba(var(--unp-dark-rgb), 0.12);

  box-shadow:
    0 18px 42px rgba(0,0,0,0.18);

  transition:
    transform var(--t-med) var(--e-out),
    box-shadow var(--t-med) var(--e-out),
    border-color .2s ease;
}

/* Hover — editorial lift */
.unp-press-item:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--unp-pink-rgb), 0.6);
  box-shadow:
    0 30px 64px rgba(0,0,0,0.22);
}

/* Thumbnail canvas — neutral paper */
.unp-press-thumb {
  background: #f3f2f1;
}

/* Caption block */
.unp-press-caption {
  padding: 1rem 1.05rem 1.15rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--unp-muted);
}

/* Publication kicker */
.unp-press-kicker {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b6561;
  margin-bottom: .25rem;
}

/* ======================================================
   EDITORIAL EMPHASIS (PRWeek)
   ====================================================== */
/* Editorial emphasis — feature, not selection */
.unp-press-item--prweek {
  grid-column: span 2;
}
.unp-press-item {
  position: relative;
}

/* Shared editorial rule — calm, archival */
.unp-press-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(var(--unp-dark-rgb), 0.06);
}

/* Feature tile gets slightly stronger weight */
.unp-press-item--prweek::before {
  box-shadow:
    inset 0 0 0 1px rgba(var(--unp-pink-rgb), 0.35);
}

.unp-press-grid {
  margin-top: 2.8rem;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 960px) {
  .unp-press-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .unp-press-item--prweek {
    grid-column: span 1;
  }
}
@media (min-width: 1024px) {
  .unp-press-caption {
    padding: 1.15rem 1.2rem 1.3rem;
  }
}


/* ======================================================
   GLOBAL BOX MODEL RESET (DO NOT REMOVE)
   ====================================================== */

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

/* ======================================================
   UNP — MASTER CASE STUDY SYSTEM (Unified & Enhanced)
   Scope: TV / NHS / EV Pages
   ====================================================== */

/* ------------------------------------------------------
   1. BASE CONFIGURATION & SECTOR COLORS
   ------------------------------------------------------ */

.case-page {
  /* Default Accent */
  --cs-accent: var(--unp-pink);
  
  /* Layout Variables */
  --header-offset: 88px; /* Adjustable based on Nav height */
  
  /* Page Setup */
  background: linear-gradient(180deg, #F3F1EE 0%, #F9F7F5 100%);
  padding-top: calc(clamp(3rem, 6vw, 5rem) + var(--header-offset));
  padding-bottom: 4rem;
  font-family: var(--font-body);
}

/* Client Specific Overrides */
.case-page--tv  { --cs-accent: var(--unp-pink); }
.case-page--nhs { --cs-accent: var(--unp-blue); }
.case-page--ev  { --cs-accent: #99CC00; }

/* Mobile Header Adjustment */
@media (max-width: 768px) {
  .case-page { --header-offset: 96px; }
}

/* ------------------------------------------------------
   2. LAYOUT SHELL & CARD
   ------------------------------------------------------ */

.case-page .cs-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.case-page .cs-card {
  background: #ffffff;
  border-radius: 28px;
  padding: clamp(2.4rem, 4vw, 3.4rem);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  position: relative;
  z-index: 10;
}

.case-page .cs-inner {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}

/* ------------------------------------------------------
   3. TYPOGRAPHY & MONOGRAPH CAPTIONS
   ------------------------------------------------------ */

.case-page .cs-eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: .6rem;
  color: rgba(var(--unp-dark-rgb), .65);
}

.case-page .cs-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.case-page .cs-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  border-bottom: 3px solid var(--cs-accent);
  display: inline-block;
  padding-bottom: .3rem;
  margin: 2rem 0 .8rem;
}

.case-page .cs-subline {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(var(--unp-dark-rgb), .78);
  max-width: 72ch;
}

.case-page .cs-body {
  font-size: .98rem;
  line-height: 1.7;
  color: rgba(var(--unp-dark-rgb), .8);
}

/* Monograph Caption System (Vertical Line) */
.case-page .cs-credit-strip,
.case-page .cs-photo-caption-wrap {
  margin-top: .75rem;
  font-size: .75rem;
  line-height: 1.55;
  color: rgba(var(--unp-dark-rgb), .6);
  max-width: 56ch;
  position: relative;
  padding-left: .9rem;
}

.case-page .cs-credit-strip::before,
.case-page .cs-photo-caption-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15rem;
  width: 2px;
  height: calc(100% - .3rem);
  background: linear-gradient(180deg, var(--cs-accent), rgba(var(--unp-dark-rgb), .15));
  border-radius: 2px;
}

/* Location Tag */
.case-page .cs-photo-location {
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(var(--unp-dark-rgb), .45);
  display: block;
  margin-top: 0.2rem;
}

.case-page .cs-photo-location span {
  font-weight: 600;
  color: rgba(var(--unp-dark-rgb), .65);
}

/* ------------------------------------------------------
   4. IMAGE SYSTEM (3:2 RATIO ENHANCED)
   ------------------------------------------------------ */

/* The Container */
.case-page .cs-hero-media,
.case-page .cs-photo-media {
  /* Enforce global standard ratio */
  aspect-ratio: 3 / 2;
  position: relative;
  
  /* Shape & Wireframe */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--unp-dark-rgb), .12);
  
  /* Background ensures shape holds before image loads */
  background: rgba(var(--unp-ink-rgb), 0.5);
  
  /* Depth */
  box-shadow: 0 14px 40px rgba(0,0,0,.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Micro-Interaction: Subtle Lift */
.case-page .cs-hero-media:hover,
.case-page .cs-photo-media:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
}

/* The Image */
.case-page .cs-hero-media img,
.case-page .cs-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures 3:2 frame is always filled */
  display: block;
}

/* ------------------------------------------------------
   5. LAYOUT COMPONENTS (HERO & GRID)
   ------------------------------------------------------ */

/* Hero Section */
.case-page .cs-hero-wrap header { max-width: 860px; }
.case-page .cs-hero-figure { margin-top: 2rem; margin-bottom: 2rem; }

/* Quote Block */
.case-page .cs-quote-block {
  background: rgba(var(--unp-ink-rgb), .6);
  border-left: 4px solid var(--cs-accent);
  padding: 1.6rem 1.8rem;
  border-radius: 14px;
}

/* Top Split Layout */
.case-page .cs-top-layout {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr;
  gap: 2rem;
}

/* ------------------------------------------------------
   6. THE MOSAIC GRID (HERO + SIDE + WIDE/SPLIT)
   ------------------------------------------------------ */

.case-page .cs-photo-mosaic {
  display: grid;
  grid-template-columns: 1.1fr 1.45fr 1.1fr;
  grid-template-areas:
    "side1 hero side2"
    "wide  wide wide";
  gap: 1.1rem;
  margin-top: 1rem;
}

/* Grid Assignments */
.case-page .cs-photo.hero   { grid-area: hero; }
.case-page .cs-photo.side-1 { grid-area: side1; }
.case-page .cs-photo.side-2 { grid-area: side2; }

/* The Bottom Split Row (2 images side-by-side) */
.case-page .cs-photo-wide {
  grid-area: wide;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

/* ------------------------------------------------------
   7. STICKY CTA (Kinetic-Aligned, JS-Driven)
   ------------------------------------------------------ */

.case-page .cs-global-cta{
  position: fixed;
  left: 50%;
  z-index: 100;

  padding: .78rem 2.2rem;
  border-radius: 999px;

  background: var(--unp-ink);
  color: var(--unp-dark);

  font-family: var(--font-head);
  font-weight: 850;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  border: 1px solid rgba(var(--unp-dark-rgb), .35);

  /* Depth + kinetic wire */
  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 0 0 3px rgba(var(--unp-dark-rgb), .85),
    0 0 0 4px var(--cs-accent);

  backdrop-filter: blur(10px);
  isolation: isolate;

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    box-shadow .45s cubic-bezier(.2,.7,.2,1),
    letter-spacing .45s cubic-bezier(.2,.7,.2,1),
    opacity .45s cubic-bezier(.2,.7,.2,1);
}

/* Text + underline carrier */
.case-page .cs-global-cta span{
  position: relative;
}

/* Superslim kinetic underline */
.case-page .cs-global-cta span::after{
  content:"";
  position:absolute;
  left: 18%;
  right: 18%;
  bottom: -.38em;

  height: 1px;
  background: currentColor;
  box-shadow: 0 3px 0 0 var(--cs-accent);

  opacity: .35;
  transform: scaleX(.82);
  transform-origin: center;

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    opacity .45s cubic-bezier(.2,.7,.2,1);
}

/* ----------------------------------
   Default Sticky Position (Bottom)
   ---------------------------------- */
.case-page .cs-global-cta{
  bottom: 1.6rem;
  transform: translateX(-50%);
}

/* ----------------------------------
   Centered Start State (JS-controlled)
   ---------------------------------- */
.case-page .cs-global-cta.centered{
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* ----------------------------------
   Sticky State (JS-controlled)
   ---------------------------------- */
.case-page .cs-global-cta.sticky{
  top: auto;
  bottom: 1.6rem;
  transform: translateX(-50%);
}

/* ----------------------------------
   Hover / Focus polish
   ---------------------------------- */
.case-page .cs-global-cta:hover{
  letter-spacing: .26em;

  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 0 0 3px rgba(var(--unp-dark-rgb), .85),
    0 0 0 4px var(--cs-accent),
    0 16px 40px -12px var(--cs-accent);
}

.case-page .cs-global-cta:hover span::after{
  opacity: 1;
  transform: scaleX(1);
}

.case-page .cs-global-cta:focus-visible{
  outline: 2px solid var(--cs-accent);
  outline-offset: 4px;
}


/* ------------------------------------------------------
   8. MOBILE RESPONSIVE
   ------------------------------------------------------ */

@media (max-width: 880px) {
  /* Stack Top Layout */
  .case-page .cs-top-layout {
    grid-template-columns: 1fr;
  }

  /* Stack Mosaic */
  .case-page .cs-photo-mosaic {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "side1"
      "side2"
      "wide";
  }
  
  /* Stack the Wide Split */
  .case-page .cs-photo-wide {
    grid-template-columns: 1fr;
  }
}
/* ---------------------------------------------
   REFINED IMAGE LOADING (ANTI-BLACK SCREEN)
--------------------------------------------- */
.case-page .cs-photo-media,
.case-page .cs-hero-media {
    background-color: #1a1a1a; /* The 'Ink' frame */
    position: relative;
    overflow: hidden;
}

.case-page .cs-photo-media img,
.case-page .cs-hero-media img {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    position: relative;
    z-index: 2;
}

/* The 'Loaded' State */
.case-page .cs-photo-media img.loaded,
.case-page .cs-hero-media img.loaded {
    opacity: 1 !important;
}

/* EMERGENCY FALLBACK: 
   If JS fails, this shows images automatically after 2 seconds 
   so the user never sees a permanent black box. */
@keyframes autoReveal { to { opacity: 1; } }
.case-page .cs-photo-media img:not(.loaded),
.case-page .cs-hero-media img:not(.loaded) {
    animation: autoReveal 0.5s forwards;
    animation-delay: 2.5s; 
}

/* =====================================================
   UNP — CONTACT HERO (EDITORIAL SYSTEM)
   Refined + production-safe
   ===================================================== */

.unp-contact-hero {
  margin-bottom: clamp(3rem, 8vw, 6rem);
  isolation: isolate;
  min-width: 0;
}

.unp-contact-eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--unp-dark-rgb, 24,22,21), 0.55);
}

/* -----------------------------------------------------
   TITLE BLOCK (EDITORIAL)
   ----------------------------------------------------- */

.unp-contact-title {
  margin: 0 0 1.5rem;
  line-height: 0.92;
  font-family: "Montserrat", system-ui, sans-serif;
}

.unp-contact-title-massive {
  display: block;
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.045em; /* refined */
  color: var(--unp-dark, #181615);
  text-transform: uppercase;
}

.unp-contact-title-main {
  display: block;
  margin-top: 0.2em;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--unp-dark, #181615);
}

.unp-contact-pink {
  color: var(--unp-pink, #FF4B9E);
}

/* -----------------------------------------------------
   EDITORIAL COPY
   ----------------------------------------------------- */

.unp-contact-standfirst {
  margin: 1.5rem 0 1rem;
  max-width: 60ch;
  font-family: Georgia, serif;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(var(--unp-dark-rgb, 24,22,21), 0.85);
}

.unp-contact-intro {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(var(--unp-dark-rgb, 24,22,21), 0.7);
}

/* -----------------------------------------------------
   HERO IMAGE PANEL
   ----------------------------------------------------- */

.unp-contact-hero-figure {
  position: relative;
  margin: 2.5rem 0;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #F9F7F5;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.unp-contact-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* -----------------------------------------------------
   CREDIT BADGE
   ----------------------------------------------------- */

.unp-contact-hero-credit-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #181615;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(24,22,21,0.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* =====================================================
   UNP — EDITORIAL, CONTACT & CASE UI SUPPORT (GLOBAL)
   Scope: Contact context, typography, case studies & highlights
   ===================================================== */

/* -----------------------------------------------------
   1. CONTACT CONTEXT (Team / Office Images)
   ----------------------------------------------------- */
.unp-contact-context__img {
  border-radius: 14px;
  overflow: hidden;
  background: #E9E4DD;
  border: 1px solid rgba(var(--unp-dark-rgb, 24,22,21), .10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.unp-contact-context__img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.unp-contact-context__title {
  margin: 0 0 .25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--unp-dark, #181615);
}

.unp-contact-context__meta {
  margin: 0;
  color: rgba(var(--unp-dark-rgb, 24,22,21), .70);
  font-size: .95rem;
  line-height: 1.55;
}

/* -----------------------------------------------------
   2. EDITORIAL EMPHASIS (Pink underline + highlights)
   ----------------------------------------------------- */
.unptb-title-best {
  color: var(--unp-text-main, #181615) !important;
  text-decoration: underline;
  text-decoration-color: var(--unp-pink, #FF4B9E);
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
}

.case-study-balanced h1 span,
.case-study-balanced h2 span,
.case-study-balanced h3 span,
.case-study-balanced .csb-title span,
.case-study-balanced .csb-strap span {
  color: #181615 !important;
  background: rgba(255,75,158,.14) !important;
  padding: .02em .22em !important;
  border-radius: .25em !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* -----------------------------------------------------
   3. CONTENT BANDS (Text safety)
   ----------------------------------------------------- */
.unptb-band,
.unptb-band p,
.unptb-band li {
  color: var(--unp-text-muted, #555) !important;
}

.unptb-band h2,
.unptb-band h3 {
  color: var(--unp-text-main, #181615) !important;
}

/* -----------------------------------------------------
   4. CASE STUDY CTA (Primary pill button)
   ----------------------------------------------------- */
.unp-case-view a,
a.unp-case-view,
.unp-case-card a.unp-case-view {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: #181615 !important;
  color: #F9F7F5 !important;
  border: 1px solid rgba(255,75,158,.85) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: .85rem;
  transition: transform .3s var(--e-out), box-shadow .3s var(--e-out), background .3s var(--e-out);
}

.unp-case-view a:hover,
a.unp-case-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,75,158,.15);
  background: #221f1e !important;
}

/* -----------------------------------------------------
   5. EYEBROWS, KICKERS & LATEST SECTION
   ----------------------------------------------------- */
.csb-eyebrow,
.ulf-kicker {
  color: var(--unp-text-main, #181615) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-size: .7rem;
}

#unp-latest .ulf-title span,
#unp-latest .ulf-kicker span {
  border-bottom: 2px solid rgba(255,75,158,.9) !important;
}

/* -----------------------------------------------------
   6. METRICS & UI TONE
   ----------------------------------------------------- */
#unp-metrics .umx-sub,
#unp-metrics .umx-caption {
  color: rgba(24,22,21,0.85) !important;
}

/* -----------------------------------------------------
   7. SITE TITLE — SCREEN READER ONLY
   ----------------------------------------------------- */
.site-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =====================================================
   UNP — HOME COVERAGE MAP (EDITORIAL EVOLUTION)
   Combined: Muted Heading + UK-WIDE Tablet + Glass Map
   ===================================================== */

#unp-coverage-hero {
  --uc-pink: #FF4B9E;
  --uc-dark: #181615;
  --uc-dark-rgb: 24, 22, 21;
  background: #F9F7F5;
  padding: clamp(4.5rem, 8vw, 6.5rem) 20px;
  overflow: hidden;
}

#unp-coverage-hero .uc-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: grid;
  /* Text gets 1.15fr to ensure "PHOTOGRAPHERS" never clips again */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* -----------------------------------------------------
   THE HEADLINE — EDITORIAL HIERARCHY
   ----------------------------------------------------- */

#unp-coverage-hero .uc-title {
  margin: 0 0 1.6rem;
  font-weight: 950;
  /* Reduced max size slightly for absolute safety on tablets */
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  line-height: 1.15; 
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--uc-dark);
}

/* Line 1: Muted Editorial */
#unp-coverage-hero .uc-muted {
  display: inline-block;
  color: rgba(24, 22, 21, 0.62); /* UNP charcoal */
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none; /* kills inherited underline */
}

/* Line 2: The UK-WIDE Tablet */
#unp-coverage-hero .uc-uk-tablet {
  display: inline-block;
  background: var(--uc-dark);
  color: #fff;
  padding: 0.15em 0.55em;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 
    0 0 0 1px rgba(255, 75, 158, 0.35), 
    0 12px 28px rgba(0, 0, 0, 0.14);
}

/* -----------------------------------------------------
   MAP — GLASS PORTAL (PINK WIRE SHADOW)
   ----------------------------------------------------- */

#unp-coverage-hero .uc-map-link {
  display: block;
  text-decoration: none;
}

#unp-coverage-hero .uc-map-panel {
  position: relative;
  background: #fff;
  padding: 10px;
  border-radius: 20px;
  /* The "Pink Wire" Border */
  border: 1px solid rgba(255, 75, 158, 0.25);
  box-shadow: 
    0 15px 45px rgba(0,0,0,0.05),
    0 0 30px rgba(255, 75, 158, 0.05);
  transition: all 600ms cubic-bezier(.16,1,.3,1);
}

#unp-coverage-hero .uc-map-img {
  display: block;
  width: 100%;
  border-radius: 14px;
  filter: contrast(1.02) saturate(0.85);
  transition: filter 400ms ease;
}

#unp-coverage-hero .uc-map-link:hover .uc-map-panel {
  transform: translateY(-8px) scale(1.01);
  border-color: var(--uc-pink);
  box-shadow: 
    0 35px 70px rgba(0,0,0,0.1),
    0 0 40px rgba(255, 75, 158, 0.2);
}

/* -----------------------------------------------------
   COPY PANEL & UI
   ----------------------------------------------------- */

#unp-coverage-hero .uc-copy-panel {
  border-left: 1px solid rgba(var(--uc-dark-rgb), .12);
  padding-left: clamp(1.6rem, 3vw, 2.6rem);
}

#unp-coverage-hero .uc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin-bottom: 2.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(var(--uc-dark-rgb), 0.75);
}

#unp-coverage-hero .uc-meta li::before {
  content: "";
  color: var(--uc-pink);
  margin-right: 8px;
}

/* Responsive Reset */
@media (max-width: 1024px) {
  #unp-coverage-hero .uc-inner { grid-template-columns: 1fr; }
  #unp-coverage-hero .uc-copy-panel {
    border-left: none;
    border-top: 1px solid rgba(var(--uc-dark-rgb), .12);
    padding: 2rem 0 0;
  }
}

/* ======================================================
   UNP — AREAS DIRECTORY (EDITORIAL INDEX BAND)
   Purpose: Geographic & Service Navigation
   Language: Ink-first · Glass-lite · PSI-Safe
   ====================================================== */
#unp-areas {
  --uag-ink: var(--unp-ink, #F9F7F5);
  --uag-dark: var(--unp-dark, #181615);
  --uag-pink: var(--unp-pink, #FF4B9E);
  --uag-dark-rgb: var(--unp-dark-rgb, 24,22,21);
}

#unp-areas.uag-band {
  position: relative;
  background: var(--uag-ink);
  color: var(--uag-dark);
  padding: clamp(4rem, 8vw, 6rem) 16px;
  border-top: 1px solid rgba(var(--uag-dark-rgb), .08);
  overflow: hidden;
  isolation: isolate;
}

#unp-areas.uag-band::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 60% at 20% 15%, rgba(255,255,255,.75), transparent 70%), radial-gradient(55% 65% at 85% 0%, rgba(255,75,158,.035), transparent 72%);
  pointer-events: none;
  z-index: -1;
  filter: saturate(.95);
}

#unp-areas .uag-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

#unp-areas .uag-title {
  margin: 0;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -0.035em;
  font-size: clamp(3rem, 7vw, 5.6rem);
  text-transform: uppercase;
}

#unp-areas .uag-title .uag-pink {
  display: inline-block;
  width: max-content;
  margin-top: .18em;
  color: var(--uag-pink);
  background: rgba(var(--uag-dark-rgb), .98);
  padding: .16em .65em .20em;
  border-radius: 999px;
  border: 1px solid rgba(249,247,245,.18);
  box-shadow: 0 0 0 5px rgba(var(--uag-dark-rgb), .92), 0 0 0 6px rgba(255, 75, 158, .75);
  letter-spacing: -0.01em;
}

#unp-areas .uag-directory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(var(--uag-dark-rgb), .14);
}

#unp-areas .uag-col {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(var(--uag-dark-rgb), .10);
  border-radius: 20px;
  padding: 1.4rem 1.25rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 26px rgba(0,0,0,.05);
  transition: all .25s var(--e-out);
}

#unp-areas .uag-col:hover {
  border-color: rgba(var(--uag-dark-rgb), .16);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 14px 34px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

#unp-areas .uag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .44rem .5rem;
}

#unp-areas .uag-link {
  position: relative;
  display: inline-flex;
  padding: .48rem .82rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(var(--uag-dark-rgb), .92);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(var(--uag-dark-rgb), .16);
  transition: all 220ms var(--e-out);
}

#unp-areas .uag-link:hover {
  transform: translateY(-1px);
  background: var(--uag-dark);
  color: var(--uag-ink);
  border-color: var(--uag-dark);
  box-shadow: 0 0 0 3px rgba(var(--uag-dark-rgb), .05), 0 0 0 4px rgba(255, 75, 158, .25);
}

@media (max-width: 1024px) {
  #unp-areas .uag-directory { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  #unp-areas .uag-directory { grid-template-columns: 1fr; }
  #unp-areas .uag-title { font-size: 3.1rem; }
}
/* 1. Push the pill down from the grid */
#unp-areas .uag-cta {
  margin-top: 3.5rem; /* Increased from 1.6rem to clear the overlap */
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 5; /* Ensures pill stays above any background effects */
}

/* 2. Adjust section padding to prevent edge collision */
#unp-areas.uag-band {
  /* ... existing properties ... */
  padding-bottom: 5rem; /* Added extra room at the bottom for the pill's shadow and wire */
}




/* ==================================================
   UNP STORY PAGE — GALLERY CALM
   Editorial · Credible · Picture-desk-led
   Scope: .story-shell
   ================================================== */

/* --------------------------------------------------
   PAGE SHELL & CARD
-------------------------------------------------- */

.story-shell {
  background: var(--unp-cream);
  padding: clamp(4rem, 8vw, 7rem) 1.25rem;
}

.story-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem);

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.62),
    rgba(255,255,255,.38)
  );
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);

  border-radius: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 22px 60px -20px rgba(24,22,21,.22);

  overflow: hidden;
}

/* --------------------------------------------------
   HERO GRID
-------------------------------------------------- */

.story-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 1024px) {
  .story-hero-grid {
    grid-template-columns: 1.15fr .85fr;
  }
}

.story-eyebrow {
  font-family: var(--font-head);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--unp-pink);
  margin-bottom: 1.1rem;
}

.story-title-xl {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.2rem, 5.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--unp-dark);
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--unp-pink);
}

/* --------------------------------------------------
   HERO IMAGE — GALLERY CALM FRAME
-------------------------------------------------- */

.story-hero-img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;

  border-radius: 22px;
  filter: grayscale(10%);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 18px 42px rgba(24,22,21,.15);

  transition: filter 500ms ease;
}

@media (hover: hover) {
  .story-hero-img:hover {
    filter: grayscale(0%);
  }
}

/* --------------------------------------------------
   SECTIONS
-------------------------------------------------- */

.story-section {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.story-section:not(:last-of-type) {
  border-bottom: 1px solid rgba(var(--unp-dark-rgb), .08);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* --------------------------------------------------
   HEADINGS & BODY
-------------------------------------------------- */

.story-h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--unp-dark);
  margin-bottom: 1.5rem;
  max-width: 75ch;
}

.story-intro {
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 75ch;
  margin-bottom: 1.25rem;
  color: var(--unp-dark);
}

.story-body {
  font-size: .98rem;
  line-height: 1.85;
  max-width: 75ch;
  margin-bottom: 1.1rem;
  color: var(--unp-muted);
}

/* --------------------------------------------------
   TWO COLUMN LAYOUT
-------------------------------------------------- */

.story-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .story-two-col {
    grid-template-columns: 2fr 1fr;
    align-items: flex-start;
  }
}

/* --------------------------------------------------
   QUOTE
-------------------------------------------------- */

.story-quote-block {
  margin-top: 2.25rem;
  padding-left: 2rem;
  border-left: 4px solid var(--unp-pink);
  font-style: italic;
  max-width: 75ch;
}

.quote-author {
  display: block;
  font-style: normal;
  font-weight: 700;
  margin-top: .75rem;
}

/* --------------------------------------------------
   STATS PANEL — GLASS EDITORIAL
-------------------------------------------------- */

.editorial-glass {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.7),
    rgba(255,255,255,.45)
  );
  backdrop-filter: blur(8px);

  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 14px 36px -12px rgba(24,22,21,.12);
}

.story-stat-tag {
  font-family: var(--font-head);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--unp-pink);
  margin-bottom: 1.25rem;
}

.story-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.story-stat-number {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--unp-dark);
}

.story-stat-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--unp-muted);
}

.story-stat-footnote {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--unp-muted);
}

/* --------------------------------------------------
   CTA ROW (PILLS ALREADY GLOBAL)
-------------------------------------------------- */

.story-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* --------------------------------------------------
   MOTION SAFETY
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .story-shell * {
    transition: none !important;
    transform: none !important;
  }
}


/* =====================================================
   ASTRA STICKY HEADER — PRODUCTION FIX (UNP)
   Safe for Astra + Rank Math + CWV
   ===================================================== */

/* -----------------------------------------------------
   0. Safety tokens (only if not already defined)
   ----------------------------------------------------- */
/* (Variables consolidated in UNP — ROOT TOKENS at top of file) */


/* -----------------------------------------------------
   1. Sticky header container (ALL Astra variants)
   ----------------------------------------------------- */
.ast-sticky-header-active .site-header,
.main-header-bar.ast-sticky-active {
  background: rgba(var(--unp-dark-rgb), 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--unp-shadow);
  transition: background 0.3s var(--e-out),
              box-shadow 0.3s var(--e-out);
}

/* -----------------------------------------------------
   2. Primary navigation links
   ----------------------------------------------------- */
.ast-sticky-header-active .main-header-menu > li > a,
.ast-sticky-header-active .ast-header-sections-navigation .main-header-menu > li > a {
  color: var(--unp-ink) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hover + active state */
.ast-sticky-header-active .main-header-menu > li:hover > a,
.ast-sticky-header-active .main-header-menu > li.current-menu-item > a {
  color: var(--unp-pink) !important;
}

/* -----------------------------------------------------
   3. Dropdown / sub-menu styling
   ----------------------------------------------------- */
.ast-sticky-header-active .sub-menu {
  background: var(--unp-dark) !important;
  border-top: 2px solid var(--unp-pink);
  box-shadow: var(--unp-shadow);
}

.ast-sticky-header-active .sub-menu li a {
  color: var(--unp-ink) !important;
  font-size: 0.85rem;
}

.ast-sticky-header-active .sub-menu li a:hover {
  background: rgba(255,255,255,0.04);
  color: var(--unp-pink) !important;
}

/* -----------------------------------------------------
   4. Mobile hamburger + toggle icons
   ----------------------------------------------------- */
.ast-sticky-header-active .ast-mobile-menu-trigger span,
.ast-sticky-header-active .ast-mobile-menu-trigger svg {
  color: var(--unp-ink) !important;
  fill: var(--unp-ink) !important;
}

/* -----------------------------------------------------
   5. Logo + utility icon protection
   ----------------------------------------------------- */
.ast-sticky-header-active .site-logo-img img {
  opacity: 1 !important;
  filter: brightness(1.05);
  max-width: 180px !important; 
  transition: max-width 0.3s var(--e-out);
}

.ast-sticky-header-active .ast-header-widget-area svg,
.ast-sticky-header-active .ast-search-menu-icon .astra-search-icon {
  fill: var(--unp-ink) !important;
}

/* -----------------------------------------------------
   6. JS SAFETY NET SUPPORT (MutationObserver Support)
   ----------------------------------------------------- */
.main-header-menu.menu-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =====================================================
   UNP — CURATED EDITORIAL SPREAD
   Portfolio-first · Museum Mount · Staggered Brutalism
   ===================================================== */

#unp-silos {
  --silo-dark: #181615;
  --silo-ink: #F9F7F5;
  --silo-pink: #FF4B9E;

  background: var(--silo-ink);
  padding: clamp(5rem, 10vw, 8rem) 20px;
}

#unp-silos .unp-silos-inner {
  max-width: 1300px;
  margin: 0 auto;
}

/* -----------------------------------------------------
   SECTION HEAD
   ----------------------------------------------------- */

#unp-silos .unp-silos-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 52ch;
}

#unp-silos .unp-silos-title {
  margin: 0 0 .75rem;
  font-family: var(--font-head, "Montserrat", system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.03em;
}

#unp-silos .unp-silos-title .thin {
  font-weight: 500;
  opacity: .55;
  margin-right: .35em;
}

#unp-silos .unp-silos-sub {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(24,22,21,.65);
}

/* -----------------------------------------------------
   CURATED GRID (STAGGERED RHYTHM)
   ----------------------------------------------------- */

#unp-silos .unp-silos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: start;
}

/* Default: balanced */
#unp-silos .unp-silo-card {
  grid-column: span 3;
}

/* Editorial rhythm */
@media (min-width: 1024px) {
  #unp-silos .unp-silo-card:nth-child(1) { grid-column: span 4; } /* Anchor */
  #unp-silos .unp-silo-card:nth-child(2) { grid-column: span 2; } /* Counterpoint */
  #unp-silos .unp-silo-card:nth-child(3) { grid-column: span 2; }
  #unp-silos .unp-silo-card:nth-child(4) { grid-column: span 4; } /* Anchor */

  #unp-silos .unp-silo-card:nth-child(5) { grid-column: span 3; } /* Dialogue */
  #unp-silos .unp-silo-card:nth-child(6) { grid-column: span 3; }

  #unp-silos .unp-silo-card:nth-child(7) { grid-column: span 4; } /* Final statement */
  #unp-silos .unp-silo-card:nth-child(8) { grid-column: span 2; } /* Quiet exit */
}

/* ======================================================
   UNP SILOS — MUSEUM GLASS FINAL
   22px Safety Mount · 16px Internal Radius · Crystal Edge
   ====================================================== */

#unp-silos .unp-silo-link {
  display: block;
  text-decoration: none;
  background: #ffffff;
  padding: 12px; 
  /* The Safety Refinement: 22px for better rendering */
  border-radius: 22px; 
  border: 1px solid rgba(24, 22, 21, 0.06);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
  transition: all 700ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  isolation: isolate;
}

#unp-silos .unp-silo-link:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 75, 158, 0.3);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

/* ── THE CRYSTAL CHAMBER (Image Container) ── */
#unp-silos .unp-silo-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px; 
  background: #181615;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ── THE REFRACTIVE WIRE (Glass Thickness) ── */
#unp-silos .unp-silo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  
  /* Top-down light refraction on the glass edge */
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  
  border: 1px solid rgba(24, 22, 21, 0.08);
}

#unp-silos .unp-silo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.02) saturate(0.95);
  transform: scale(1.01);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease;
}

#unp-silos .unp-silo-link:hover img {
  transform: scale(1.06);
  filter: contrast(1.05) saturate(1.02);
}
/* -----------------------------------------------------
   IMAGE FRAME (3:2 HARD RULE)
   ----------------------------------------------------- */

#unp-silos .unp-silo-figure {
  margin: 0;
}

#unp-silos .unp-silo-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #000;
}

#unp-silos .unp-silo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter: contrast(1.02) saturate(.9);
  transform: scale(1.02);
  transition:
    transform 900ms cubic-bezier(.16,1,.3,1),
    filter 600ms ease;
}

#unp-silos .unp-silo-link:hover img {
  transform: scale(1.05);
  filter: contrast(1.05) saturate(1);
}

/* ======================================================
   UNP SILOS — META (PSI ACCESSIBILITY FIX)
   High-contrast, high-legibility editorial footers
   ====================================================== */

#unp-silos .unp-silo-meta {
  padding: 1.2rem 0.5rem 0.4rem;
  background-color: #fff; /* Ensures 100% flat contrast against text */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* Specialty Title */
#unp-silos .unp-silo-meta h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 950; /* Heavier weight for authority */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silo-dark);
}

/* Credit line — DARKER for PSI Compliance */
.unp-silo-credit {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Deep charcoal for guaranteed visibility */
  color: #403d3b; 
  opacity: 1 !important; /* Forces full visibility */
}

/* Hover State: Subtle Pink Shift on Credit */
#unp-silos .unp-silo-link:hover .unp-silo-credit {
  color: var(--silo-pink);
  transition: color 400ms ease;
}
/* =====================================================
   UNP — 404 "OUT ON ASSIGNMENT" 
   Consolidated & Contrast-Optimized
   ===================================================== */

/* 1. Page background (viewfinder grid) */
.error404 .site-content {
  background-color: var(--unp-ink);
  background-image:
    linear-gradient(rgba(24,22,21,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,22,21,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  padding-block: clamp(4rem, 8vw, 10rem);
  position: relative;
}

/* 2. Large outlined 404 backdrop */
.error404 .error-404 .page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(8rem, 20vw, 15rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--unp-dark);
  opacity: 0.06;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* 3. Main content card */
.error404 .page-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  background: #ffffff;
  padding: clamp(2.5rem, 5vw, 4rem);
  border-radius: 28px;
  box-shadow: var(--unp-shadow);
  border: 1px solid rgba(24,22,21,0.06);
  text-align: center;
}

/* 4. Missing image placeholder (Polaroid) */
.error404 .page-content::before {
  content: "IMAGE NOT FILED";
  width: 120px;
  height: 140px;
  margin: 0 auto 2.25rem;
  background: #e5e2dd;
  border: 6px solid #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  transform: rotate(-4deg);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(24,22,21,.38);
}

/* 5. Primary Recovery CTAs (Book / Home) */
.error404 .page-content a[href*="book"],
.error404 .page-content a[href*="home"],
.error404 .page-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 6px;
  padding: 12px 26px;
  background: var(--unp-dark);
  color: var(--unp-ink) !important;
  border-radius: 999px;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s var(--e-out), background .25s var(--e-out);
}

.error404 .page-content a[href*="book"]:hover,
.error404 .page-content a[href*="home"]:hover,
.error404 .page-content .wp-block-button__link:hover {
  background: var(--unp-pink);
  transform: translateY(-2px);
}

/* 6. Search Bar Integration */
.error404 .search-form {
  display: flex;
  gap: 10px;
  margin: 2.5rem auto 2rem;
  max-width: 440px;
}

.error404 .search-field {
  background: var(--unp-ink);
  border: 1px solid rgba(24,22,21,.16);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: .9rem;
  width: 100%;
}

.error404 .search-submit {
  background: var(--unp-dark);
  color: var(--unp-ink);
  border: none;
  border-radius: 999px;
  padding: 0 26px;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--e-out), transform .25s var(--e-out);
}

.error404 .search-submit:hover {
  background: var(--unp-pink);
  transform: translateY(-1px);
}

/* 7. Quick Link Section & Chips */
.error404 .popular-pages {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(24,22,21,.08);
}

.error404 .popular-pages strong {
  color: rgba(24,22,21,.7);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  display: block;
}

.error404 .popular-pages a {
  display: inline-flex;
  margin: 6px;
  padding: 9px 22px;
  background: #ffffff;
  color: rgba(24,22,21,.78) !important;
  border: 1px solid rgba(24,22,21,.22);
  border-radius: 999px;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .25s var(--e-out);
}

.error404 .popular-pages a:hover {
  color: var(--unp-pink) !important;
  border-color: rgba(255,75,158,.55);
  transform: translateY(-1px);
}

/* UNP - Editorial Gallery System */

.es-gallery {
  background: #F9F7F5;
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .16);
  padding: clamp(2rem, 3.5vw, 2.6rem);
  position: relative;
  overflow: hidden;
}

.es-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 75, 158, 0.04),
    transparent 45%,
    rgba(24, 22, 21, 0.03)
  );
  pointer-events: none;
}

.es-gallery-grid {
  margin-top: 1.4rem;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1.1rem, 2vw, 1.7rem) !important;
  position: relative;
  z-index: 1;
}

.es-gallery-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .08);
  border-top: 3px solid #FF4B9E;
  transition: transform .28s ease-out, box-shadow .28s ease-out;
  margin: 0;
}

.es-gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .16);
}

.es-gallery-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.es-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  transition: transform .4s ease-out;
}

.es-gallery-card:hover .es-gallery-frame img {
  transform: scale(1.07);
}

.es-gallery-meta {
  padding: .85rem 1rem 1rem;
}

.es-gallery-title {
  margin: 0 0 .15rem;
  font-weight: 700;
  font-size: .98rem;
  color: #181615;
}

.es-gallery-caption {
  margin: 0;
  font-size: .83rem;
  color: #6b6b6b;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .es-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .es-gallery-grid {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================
   UNP — ASTRA HEADER SAFETY OFFSET
   Prevents logo / menu collisions on silos
   ========================================= */

/* Ensure content never sits under header */
body:not(.ast-header-break-point) .es-shell {
  padding-top: clamp(7rem, 9vw, 9rem);
}

/* Mobile / hamburger state */
@media (max-width: 921px) {
  .es-shell {
    padding-top: clamp(6.5rem, 10vw, 8rem);
  }
}

/* Sticky header compensation */
.ast-sticky-active + .site-content .es-shell,
.ast-sticky-header-active + .site-content .es-shell {
  padding-top: clamp(7.5rem, 10vw, 9.5rem);
}

/* =========================================
   UNP — SILO HERO OPTICAL TRIM
   Reduces perceived drop without touching header safety
   ========================================= */

.es-section:first-of-type {
  padding-top: clamp(2.2rem, 3vw, 2.7rem);
}

/* =========================================================
   UNP — Silo Headline Reveal & Glitch System
   ========================================================= */

/* ---------------------------------------------------------
   0. Baseline (No JS fallback — SEO & accessibility safe)
   --------------------------------------------------------- */
.silo-head {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   1. JS-enabled initial state
   (Headline is hidden slightly until revealed)
   --------------------------------------------------------- */
.js .silo-head {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  position: relative;
  isolation: isolate; /* Prevent stacking bugs */
}

/* ---------------------------------------------------------
   2. Triggered state (added by JS)
   --------------------------------------------------------- */
.js .silo-head.is-glitching {
  opacity: 1;
  transform: translateY(0);
  animation: unp-glitch-snap 0.3s
    cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

/* ---------------------------------------------------------
   3. Glitch ghost layers
   --------------------------------------------------------- */
.js .silo-head.is-glitching::before,
.js .silo-head.is-glitching::after {
  content: attr(data-text, "");
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
  white-space: nowrap;
}

/* Cyan channel */
.js .silo-head.is-glitching::before {
  color: #0ff;
  z-index: 1;
  animation: unp-glitch-offset 0.3s
    cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

/* UNP Pink channel */
.js .silo-head.is-glitching::after {
  color: var(--unp-pink, #FF4B9E);
  z-index: 2;
  animation: unp-glitch-offset 0.3s
    cubic-bezier(0.25, 0.46, 0.45, 0.94)
    reverse both;
}

/* ---------------------------------------------------------
   4. Keyframes
   --------------------------------------------------------- */
@keyframes unp-glitch-snap {
  0% {
    transform: translateY(10px);
  }
  30% {
    transform: skewX(5deg) translateX(-2px);
  }
  60% {
    transform: skewX(-5deg) translateX(2px);
  }
  100% {
    transform: translateY(0) skewX(0);
  }
}

@keyframes unp-glitch-offset {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-3px, 2px);
  }
  40% {
    transform: translate(-3px, -2px);
  }
  60% {
    transform: translate(3px, 2px);
  }
  80% {
    transform: translate(3px, -2px);
  }
  100% {
    transform: translate(0);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   5. Accessibility — Reduced Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .silo-head {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .silo-head.is-glitching {
    animation: none !important;
  }

  .js .silo-head.is-glitching::before,
  .js .silo-head.is-glitching::after {
    display: none !important;
  }
}

/* ============================================================
   UNP — COVERAGE PAGE (REFINED GLASS EDITORIAL)
   Calm authority · Frosted layers · Modern hierarchy
   Scope: #unp-coverage-page
   ============================================================ */

#unp-coverage-page {
  /* Local aliases (readability, not duplication) */
  --ink-1: var(--unp-dark);
  --ink-2: var(--unp-muted);
  --muted: rgba(var(--unp-dark-rgb), .55);
  --pink: var(--unp-pink);
  --pink-rgb: var(--unp-pink-rgb);
  --line: rgba(var(--unp-dark-rgb), .08);
  --glass: rgba(var(--unp-ink-rgb), .55);
  --radius-lg: var(--unp-radius);

  /* Page-level presentation */
  background: var(--unp-cream);
  color: var(--unp-dark);
  font-family: var(--font-body);
  line-height: 1.65;
}
#unp-coverage-page {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}


/* ------------------------------------------------------------
   SECTION LAYOUT — FLOATING GLASS PANELS
   ------------------------------------------------------------ */
#unp-coverage-page > section {
  max-width: 1200px;
  margin: clamp(3rem, 6vw, 6rem) auto;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.62),
      rgba(255,255,255,.38)
    );

  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);

  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 22px 60px -20px rgba(24,22,21,.22);
}

/* Remove hard borders */
#unp-coverage-page > section + section {
  border-top: none;
}

/* ------------------------------------------------------------
   TYPOGRAPHY — EDITORIAL, NOT SHOUTY
   ------------------------------------------------------------ */
#unp-coverage-page h1,
#unp-coverage-page h2,
#unp-coverage-page h3,
#unp-coverage-page h4 {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-transform: none;
}

/* Hero headline */
#unp-coverage-page h1 {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  max-width: 14ch;
}

/* Section headings */
#unp-coverage-page h2 {
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
}

/* Small labels keep authority */
#unp-coverage-page h4 {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .75rem;
  color: var(--pink);
}

/* Body */
#unp-coverage-page p,
#unp-coverage-page li {
  color: var(--ink-2);
  margin-bottom: 1.15rem;
}
#unp-coverage-page strong {
  color: var(--ink-1);
  font-weight: 600;
}

/* ------------------------------------------------------------
   ACCENT RULE — GLASS PINK THREAD
   ------------------------------------------------------------ */
.unp-coverage-hero h1::after,
.unp-city-coverage h2::after,
.unp-editorial-evidence h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 1.1rem;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(var(--pink-rgb), .85),
      rgba(var(--pink-rgb), .25)
    );
}

/* ------------------------------------------------------------
   IMAGE PANELS — GLASS FRAME, NOT BOX
   ------------------------------------------------------------ */
.unp-coverage-map-image figure,
.unp-picture-desk figure {
  position: relative;
  margin: 3rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.65),
      rgba(255,255,255,.4)
    );

  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 26px 70px -25px rgba(24,22,21,.28);
}

.unp-coverage-map-image img,
.unp-picture-desk img {
  width: 100%;
  height: auto;
  display: block;
}

.unp-coverage-map-image figcaption,
.unp-picture-desk figcaption {
  padding: 1.4rem 1.8rem;
  font-size: .85rem;
  color: rgba(24,22,21,.6);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}

/* ------------------------------------------------------------
   STATS — QUIET CONFIDENCE
   ------------------------------------------------------------ */
.unp-coverage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 2.25rem;
  margin: 3rem 0;
}
.unp-coverage-stats div {
  padding-left: 1.5rem;
  border-left: 3px solid rgba(var(--pink-rgb), .6);
}
.unp-coverage-stats strong {
  font-size: clamp(2rem,3.6vw,2.6rem);
  line-height: 1;
}

/* ------------------------------------------------------------
   CITY GRID — LIGHT GLASS TILES
   ------------------------------------------------------------ */
.unp-location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1rem 1.2rem;
  list-style: none;
  padding: 2rem 0 3rem;
}

.unp-location-grid a {
  display: block;
  padding: .7rem .9rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink-1);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.6),
      rgba(255,255,255,.4)
    );

  backdrop-filter: blur(6px);
  border: 1px solid rgba(24,22,21,.08);
  transition: transform .3s ease, border-color .3s ease;
}

.unp-location-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--pink-rgb), .4);
  color: var(--ink-1);
}

/* ------------------------------------------------------------
   EXTENDED CITY GRID
   ------------------------------------------------------------ */
.unp-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 3rem 2rem;
}

.unp-city-grid ul {
  list-style:none;
  padding:0;
  margin:0;
}

.unp-city-grid li {
  font-size:.95rem;
  margin-bottom:.4rem;
}

/* ------------------------------------------------------------
   MOBILE REFINEMENT
   ------------------------------------------------------------ */
@media (max-width:768px){
  #unp-coverage-page > section {
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 18px;
  }
}
/* ------------------------------------------------------------
   JUMP LINKS — GLASS EDITORIAL NAV
   Calm · Architectural · Non-invasive
   ------------------------------------------------------------ */

.unp-jump-links {
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  padding: 1.25rem 1.75rem;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.55),
      rgba(255,255,255,.35)
    );

  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);

  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 18px 45px -22px rgba(24,22,21,.25);
}

/* Nav container */
.unp-jump-links nav {
  display: flex;
  justify-content: center;
}

/* Link list */
.unp-jump-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;

  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual links */
.unp-jump-links-list a {
  position: relative;
  text-decoration: none;

  font-family: "Montserrat", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;

  color: var(--ink-2);
  white-space: nowrap;

  transition:
    color .3s ease,
    letter-spacing .3s ease;
}

/* Subtle editorial underline */
.unp-jump-links-list a::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -0.35em;

  height: 1px;
  background: var(--pink);
  opacity: .25;

  transform: scaleX(.75);
  transition:
    transform .3s ease,
    opacity .3s ease;
}

/* Hover / focus */
.unp-jump-links-list a:hover,
.unp-jump-links-list a:focus-visible {
  color: var(--ink-1);
  letter-spacing: .26em;
}

.unp-jump-links-list a:hover::after,
.unp-jump-links-list a:focus-visible::after {
  opacity: .85;
  transform: scaleX(1);
}

/* Accessibility */
.unp-jump-links-list a:focus-visible {
  outline: none;
}
@media (min-width: 1024px) {
  .unp-jump-links {
    position: sticky;
    top: 1.25rem;
    z-index: 5;
  }
}

/* ------------------------------------------------------------
   EDITORIAL EVIDENCE LINKS — REFINED BYLINES
   ------------------------------------------------------------ */
.unp-editorial-evidence ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.unp-editorial-evidence li {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    border: 1px solid var(--line);
    transition: all 0.3s ease;
}

.unp-editorial-evidence li:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(var(--pink-rgb), 0.3);
    transform: translateX(5px);
}

.unp-editorial-evidence a {
    color: var(--pink);
    text-decoration: none;
    font-weight: 600;
}
/* ------------------------------------------------------------
   JUMP LINKS — MOBILE BEHAVIOUR
   Soft glass card, calmer density
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .unp-jump-links {
    border-radius: 18px; /* Softer than pill, still intentional */
    padding: 1rem 1.25rem;

    /* Slightly reduce visual mass on small screens */
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.55),
      0 14px 32px -18px rgba(24,22,21,.22);
  }

  .unp-jump-links-list {
    gap: .9rem 1.4rem;
  }

  .unp-jump-links-list a {
    font-size: .68rem; /* Improves scanability */
    letter-spacing: .20em;
  }
}


/* ==========================================================
   UNP — GLOBAL KINETIC SYSTEM (FROSTED GLASS · REFINED)
   Material-synced · Charcoal Ink · Refractive Ring Hover
   ========================================================== */

:is(
  .unp-cta-pill, .unp-cta--pill, .uh-cta, .uc-pill, .csb-pill,
  .unp-float-cta, .unp-pill, .uwt-cta-primary, .uwt-cta-secondary,
  a.unp-case-view, a.unp-recent-more, a.uag-more,
  #unp-global-cta .unp-global-pill
){
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .9rem 2.4rem;
  border-radius: 999px;

  /* ── FROSTED GLASS CARRIER ── */
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.34) 40%,
      rgba(255,255,255,0.18)
    );
  
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);

  /* Typography: Always Charcoal */
  color: var(--unp-dark);
  font-family: var(--font-head);
  font-weight: 850;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  
  /* Initial Border: Invisible/Clear */
  border: 1px solid transparent;
  isolation: isolate;

  /* ── THE MATERIAL STACK ── */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.65),
    inset 0 10px 20px rgba(255,255,255,0.22),
    inset 0 -16px 26px rgba(0,0,0,0.12),
    0 18px 45px -16px rgba(0,0,0,0.25);

  transition:
    transform var(--t-med) var(--e-out),
    box-shadow var(--t-med) var(--e-out),
    letter-spacing var(--t-med) var(--e-out),
    background var(--t-med) var(--e-out),
    border-color var(--t-med) var(--e-out);
}

/* ----------------------------------------------------------
   HOVER — THE REFRACTIVE GLOW-LINE (REFINED)
   ---------------------------------------------------------- */
:is(
  .unp-cta-pill, .unp-cta--pill, .uh-cta, .uc-pill, .csb-pill,
  .unp-float-cta, .unp-pill, .uwt-cta-primary, .uwt-cta-secondary,
  a.unp-case-view, a.unp-recent-more, a.uag-more,
  #unp-global-cta .unp-global-pill
):hover{
  transform: translateY(-2px);
  letter-spacing: .30em;
  
  /* Text stays Charcoal for specialty legibility */
  color: var(--unp-dark);

  /* The outer ring refinement */
  border-color: rgba(var(--unp-pink-rgb), 0.35);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.42) 40%,
      rgba(255,255,255,0.22)
    );

  /* THE UPDATED PHYSICS STACK */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.85),    /* Internal top bevel */
    inset 0 14px 24px rgba(255,255,255,0.28), /* Light diffusion */
    inset 0 -20px 32px rgba(0,0,0,0.18),      /* Material mass */
    0 0 0 1px rgba(var(--unp-pink-rgb), 0.35), /* The "Refractive Ring" */
    0 28px 60px -15px rgba(0,0,0,0.35);       /* Gravity shadow */
}


/* ----------------------------------------------------------
   SUPERSLIM DOUBLE UNDERLINE — Editorial Logic
   ---------------------------------------------------------- */
:is(
  .unp-cta-pill, .unp-cta--pill, .uh-cta, .uc-pill, .csb-pill,
  .unp-float-cta, .unp-pill, .uwt-cta-primary, .uwt-cta-secondary,
  a.unp-case-view, a.unp-recent-more, a.uag-more,
  #unp-global-cta .unp-global-pill
)::after{
  content:"";
  position:absolute;
  left: 20%;
  right: 20%;
  bottom: .58em;
  height: 1px;
  background: var(--unp-dark); 
  box-shadow: 0 3px 0 0 var(--unp-pink);
  opacity: .28;
  transform: scaleX(.82);
  transition: transform var(--t-med) var(--e-out), opacity var(--t-med) var(--e-out);
}

:is(
  .unp-cta-pill, .unp-cta--pill, .uh-cta, .uc-pill, .csb-pill,
  .unp-float-cta, .unp-pill, .uwt-cta-primary, .uwt-cta-secondary,
  a.unp-case-view, a.unp-recent-more, a.uag-more,
  #unp-global-cta .unp-global-pill
):hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* ----------------------------------------------------------
   GLOBAL FLOATING CTA — Positioning Fix
   ---------------------------------------------------------- */
#unp-global-cta {
  position: fixed;
  left: 50%;
  bottom: clamp(1.4rem, 3vw, 2.5rem);
  transform: translateX(-50%);
  z-index: 2147483646;
}
/* ----------------------------------------------------------
   UTILITY & ACCESSIBILITY
   ---------------------------------------------------------- */
:is(
  .unp-cta-pill, .unp-cta--pill, .uh-cta, .uc-pill, .csb-pill,
  .unp-float-cta, .unp-pill, .uwt-cta-primary, .uwt-cta-secondary,
  a.unp-case-view, a.unp-recent-more, a.uag-more
):focus-visible{
  outline: 2px solid var(--unp-pink);
  outline-offset: 4px;
}

.uwt-arrow{
  font-size: 1rem;
  transition: transform var(--t-med) var(--e-out);
}

:is(.unp-pill, .uwt-cta-primary, .uwt-cta-secondary):hover .uwt-arrow{
  transform: translate(4px, -2px);
}

.entry-content, .ast-container, .wp-block-cover {
  overflow: visible;
}
/* ==========================================================
   UNP — PILL RESTING MATERIAL HARD-ASSERT
   Prevents header / Astra flattening (Optimised)
   ========================================================== */

.site-header :is(
  .unp-cta-pill, .unp-cta--pill, .unp-header-phone,
  .uwt-cta-primary, .uwt-cta-secondary
){
  /* Targeted override: Themes love to force solid backgrounds in headers */
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.34) 40%,
      rgba(255,255,255,0.18)
    ) !important;

  /* Physics & Ink: Inherited naturally from Global system */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.65),
    inset 0 10px 20px rgba(255,255,255,0.22),
    inset 0 -16px 26px rgba(0,0,0,0.12),
    0 18px 45px -16px rgba(0,0,0,0.25);

  color: var(--unp-dark);
}

/* ==========================================================
   UNP — GLOBAL FLOATING CTA (Single Instance, Site-Wide)
   ========================================================== */

#unp-global-cta {
  position: fixed;
  left: 50%;
  bottom: clamp(1.4rem, 3vw, 2.5rem);
  transform: translateX(-50%);
  z-index: 2147483646;
}

/* Pill styling — scoped */
#unp-global-cta .unp-global-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;

  padding: .9rem 2.4rem;
  border-radius: 999px;

  background: rgba(var(--unp-dark-rgb), .98);
  color: var(--unp-ink);

  font-family: var(--font-head);
  font-weight: 850;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  border: 1px solid rgba(var(--unp-ink-rgb), .12);

  box-shadow:
    0 0 0 5px rgba(var(--unp-dark-rgb), .92),
    0 0 0 6px rgba(var(--unp-pink-rgb), .95);

  isolation: isolate;

  transition:
    transform var(--t-med) var(--e-out),
    box-shadow var(--t-med) var(--e-out),
    letter-spacing var(--t-med) var(--e-out),
    background var(--t-med) var(--e-out);
}

/* Underline */
#unp-global-cta .unp-global-pill::after{
  content:"";
  position:absolute;
  left:20%;
  right:20%;
  bottom:.58em;
  height:1px;
  background:var(--unp-ink);
  box-shadow:0 3px 0 var(--unp-pink);
  opacity:.28;
  transform:scaleX(.82);
  transition:transform var(--t-med) var(--e-out), opacity var(--t-med) var(--e-out);
}

#unp-global-cta .unp-global-pill:hover{
  transform:translateY(-2px);
  letter-spacing:.30em;
}

#unp-global-cta .unp-global-pill:hover::after{
  opacity:1;
  transform:scaleX(1);
}

#unp-global-cta .unp-global-pill:focus-visible{
  outline:2px solid var(--unp-pink);
  outline-offset:4px;
}

/* =========================================
   UNP — EDITORIAL INLINE CTA (Quiet)
   Opts out of pill + Astra link styling
   ========================================= */

a.unp-cta-inline{
  all: unset;
  position: relative;
  display: inline-block;

  font-family: var(--font-head);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .26em;
  text-transform: uppercase;

  color: var(--unp-dark);
  cursor: pointer;
}

/* Pink underline accent */
a.unp-cta-inline::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.25em;
  height:1px;
  background: var(--unp-pink);
  opacity:.7;
  transform: scaleX(.45);
  transform-origin: left;
  transition: transform .25s ease, opacity .25s ease;
}

a.unp-cta-inline:hover::after{
  transform: scaleX(1);
  opacity: 1;
}

/* Accessibility */
a.unp-cta-inline:focus-visible{
  outline: 2px solid var(--unp-pink);
  outline-offset: 4px;
}



/* ==========================================================
   UNP — HOME: LET’S WORK (UWT) — SECTION FRAME ONLY
   Uses GLOBAL pill system via:
   - .unp-cta--pill (primary)
   - .unp-pill      (secondary)
   ========================================================== */

#unp-work-together.uwt-band{
  position: relative;
  padding: clamp(2.4rem, 5vw, 3.4rem) 1.5rem;
  background: var(--unp-dark, #181615);
  background-image: none !important;
}

/* Hide the corner plus decor from the HTML */
#unp-work-together .uwt-plus{ display:none !important; }
#unp-work-together.uwt-band::before,
#unp-work-together.uwt-band::after{ content:none !important; }

/* Glass inner panel */
#unp-work-together .uwt-inner{
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(1.9rem, 3.6vw, 2.4rem) clamp(1.7rem, 3.6vw, 2.3rem);

  border-radius: 24px;
  text-align: center;

  position: relative;
  overflow: hidden;

  background: rgba(var(--unp-ink-rgb, 249,247,245), .78);
  color: var(--unp-dark, #181615);

  border: 1px solid rgba(var(--unp-dark-rgb, 24,22,21), .08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 26px 70px rgba(0,0,0,.22),
    0 10px 26px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,255,255,.22) inset;

  isolation: isolate;
}

/* Soft sheen */
#unp-work-together .uwt-inner::before{
  content:"";
  position:absolute;
  inset:-55% -25% auto -25%;
  height:95%;
  background:
    radial-gradient(60% 55% at 18% 22%, rgba(255,255,255,.50), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 55%);
  opacity:.8;
  pointer-events:none;
  z-index:0;
}

/* Inner wire frame */
#unp-work-together .uwt-inner::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:20px;
  border: 1px solid rgba(var(--unp-dark-rgb, 24,22,21), .14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
  pointer-events:none;
  z-index:1;
}

/* Content above sheen/wire */
#unp-work-together .uwt-inner > *{
  position: relative;
  z-index: 2;
}

/* Typography */
#unp-work-together .uwt-kicker{
  margin: 0 0 .35rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-head, "Montserrat", system-ui, sans-serif);
  color: rgba(var(--unp-dark-rgb, 24,22,21), .62);
}

#unp-work-together .uwt-title{
  margin: 0 0 .55rem;
  font-family: var(--font-head, "Montserrat", system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  letter-spacing: -.01em;
  color: var(--unp-dark, #181615);
}

#unp-work-together .uwt-title span{
  color: var(--unp-pink, #FF4B9E);
}

#unp-work-together .uwt-lead{
  max-width: 40rem;
  margin: 0 auto 1.3rem;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(var(--unp-dark-rgb, 24,22,21), .80);
}

/* Layout */
#unp-work-together .uwt-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  justify-content:center;
  margin-top:.4rem;
}

/* Let the GLOBAL pill rules do the look.
   We only handle sizing/stacking for this section + click safety. */
#unp-work-together .uwt-cta-row a{
  flex: 1 1 260px;
  max-width: 520px;
  min-width: 280px;

  position: relative;
  z-index: 3;
}

/* Tags */
#unp-work-together .uwt-tags{
  margin-top: 1.1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .8rem;
  justify-content:center;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.85;
}

#unp-work-together .uwt-tag{
  padding:.25rem .8rem;
  border-radius:999px;
  border:1px solid rgba(var(--unp-dark-rgb, 24,22,21), 0.14);
  background:rgba(255,255,255,0.9);
  color:rgba(var(--unp-dark-rgb, 24,22,21), 0.75);
}

/* Mobile stacking */
@media (max-width:640px){
  #unp-work-together .uwt-cta-row{ flex-direction:column; }
  #unp-work-together .uwt-cta-row a{
    width:100%;
    max-width:100%;
    min-width:0;
    white-space: normal;
  }
}
#unp-work-together .uwt-cta-row a{
  color: var(--unp-ink, #F9F7F5);
}
/* ======================================================
   UWT — CTA TEXT AFFORDANCE (ASTRA-SAFE)
   ====================================================== */

/* STATIC STATE — calm charcoal */
#unp-work-together .uwt-cta-row a {
  color: var(--unp-dark, #181615);
  text-decoration: none;

  /* prepares hover affordance without layout shift */
  letter-spacing: 0;
  transition:
    color .25s ease,
    letter-spacing .25s ease,
    text-decoration-color .25s ease;
}

/* HOVER / FOCUS — clear click signal */
@media (hover: hover) {
  #unp-work-together .uwt-cta-row a:hover,
  #unp-work-together .uwt-cta-row a:focus-visible {
    color: #000; /* ink-black intent */

    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
    text-decoration-color: rgba(var(--unp-dark-rgb, 24,22,21), .65);

    /* micro emphasis, PSI-safe */
    letter-spacing: .02em;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  #unp-work-together .uwt-cta-row a {
    transition: none !important;
  }
}

/* ======================================================
   UNP — Services (Coherent Bento + Editorial Edition)
   ====================================================== */

#unp-services {
  /* Global token mapping with hard fallbacks */
  --charcoal: var(--unp-dark, #181615);
  --cream:    var(--unp-ink,  #F9F7F5);
  --pink:     var(--unp-pink, #FF4B9E);
  --blue:     var(--unp-blue, #00A4FF);
  --muted:    var(--unp-text-muted, #5A6A78);

  --radius:    22px;
  --wireInset: 10px;
  --ring:      0 18px 48px rgba(17,16,15,.10);

  /* Typography */
  --font: var(--font-head, "Plus Jakarta Sans", system-ui, -apple-system, sans-serif);
}

#unp-services,
#unp-services * {
  box-sizing: border-box;
}

/* Base Container */
#unp-services.unp-services {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
}

#unp-services .us-wrap {
  max-width: 1160px;
  margin: 0 auto;
  /* Increased from 72px to 120px to prevent logo collision */
  padding: 120px 24px 64px; 
}
/* ======================================================
   UNP — Card Polish & Safari Rendering Fix
   ====================================================== */

#unp-services .us-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(17,16,15,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), var(--ring);
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;

  /* The Safari Fix: Prevents image "bleed" during hover transforms */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  
  /* Force hardware acceleration for smoother animation */
  will-change: transform;
}
#unp-services {
  --radius: 22px;
  --ring: 0 18px 48px rgba(17,16,15,.10);
  scroll-margin-top: 100px; /* Keep this for the anchor link fix! */
}

/* =====================
   Header
   ===================== */

#unp-services .us-eyebrow {
  margin: 0;
  font: 700 .85rem/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
}

#unp-services .us-title {
  margin: .6rem 0 0;
  font: 900 2.4rem/1.05 var(--font);
  letter-spacing: -.01em;
  color: var(--charcoal);
}

@media (min-width: 900px) {
  #unp-services .us-title { font-size: 3.2rem; }
}

#unp-services .us-title::after {
  content: "";
  display: block;
  width: 92px;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), rgba(255,75,158,.18));
}

#unp-services .us-sub {
  margin: .9rem 0 0;
  max-width: 62ch;
  font: 400 1.1rem/1.6 var(--font);
  color: var(--muted);
}

/* =====================
   Bento Grid (12-column)
   ===================== */

#unp-services .us-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: 34px;
  padding: 0;
  list-style: none;
}

#unp-services .us-card { grid-column: span 4; }

/* Large bento items */
#unp-services .us-card:nth-child(3),
#unp-services .us-card:nth-child(6),
#unp-services .us-card:nth-child(9) {
  grid-column: span 8;
}

@media (max-width: 1100px) {
  #unp-services .us-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  #unp-services .us-card { grid-column: span 3; }
  #unp-services .us-card:nth-child(3),
  #unp-services .us-card:nth-child(6) { grid-column: span 6; }
}

@media (max-width: 560px) {
  #unp-services .us-grid { grid-template-columns: 1fr; }
  #unp-services .us-card { grid-column: auto; }
}

/* =====================
   The "Wireframe" Card Design
   ===================== */

#unp-services .us-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17,16,15,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), var(--ring);
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#unp-services .us-link:hover {
  transform: translateY(-4px);
  border-color: rgba(255,75,158,.28);
  box-shadow: 0 0 0 1px rgba(255,75,158,.25), 0 26px 62px rgba(17,16,15,.20);
}

/* 3:2 Ratio Image Frame with Inset Wire */
#unp-services .us-frame,
#unp-services .us-editorial-hero-frame,
#unp-services .us-editorial-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
  isolation: isolate;
}

#unp-services .us-frame::before,
#unp-services .us-editorial-hero-frame::before,
#unp-services .us-editorial-frame::before {
  content: "";
  display: block;
  padding-top: 66.6667%;
}

#unp-services .us-frame::after,
#unp-services .us-editorial-hero-frame::after,
#unp-services .us-editorial-frame::after {
  content: "";
  position: absolute;
  inset: var(--wireInset);
  border: 1px solid rgba(24,22,21,.18);
  border-radius: calc(var(--radius) - var(--wireInset));
  pointer-events: none;
  z-index: 2;
}

#unp-services .us-img,
#unp-services .us-editorial-hero-frame img,
#unp-services .us-editorial-frame img {
  position: absolute;
  inset: var(--wireInset);
  width: calc(100% - (var(--wireInset) * 2));
  height: calc(100% - (var(--wireInset) * 2));
  object-fit: cover;
  border-radius: calc(var(--radius) - var(--wireInset));
  z-index: 1;
  display: block;
  transition: transform .55s ease;
}

/* Sheen & Interaction */
#unp-services .us-sheen {
  pointer-events: none;
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(120% 80% at 120% -10%, rgba(255,75,158,.18), transparent 60%),
    radial-gradient(90% 70% at -10% 120%, rgba(0,164,255,.14), transparent 55%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 3;
}

#unp-services .us-link:hover .us-sheen { opacity: .55; }

/* Meta & CTA */
#unp-services .us-meta {
  display: flex;
  justify-content: space-between;
  padding: 14px 14px 16px;
  gap: 12px;
  align-items: flex-start;
}

#unp-services .us-h3 {
  margin: 0;
  font: 850 1.06rem/1.2 var(--font);
  color: var(--charcoal);
}

#unp-services .us-cta {
  white-space: nowrap;
  font: 700 .8rem/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink);
  align-self: flex-end;
}

#unp-services .us-cta::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .4rem;
  background: var(--pink);
  transform: scaleX(.2);
  transform-origin: left;
  transition: transform .22s ease;
}

#unp-services .us-link:hover .us-cta::after { transform: scaleX(1); }

/* =====================
   Editorial Section
   ===================== */

#unp-services .us-editorial {
  margin: 56px 0 0;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(24,22,21,.035), transparent);
  border: 1px solid rgba(24,22,21,.08);
  position: relative;
}

#unp-services .us-editorial-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* =====================
   Safety / Reveal 
   ===================== */

#unp-services .us-card,
#unp-services .us-editorial-hero,
#unp-services .us-editorial-item {
  opacity: 1;
  transform: none;
}

#unp-insights-hub{
  background:#F9F7F5 !important;
  background-image:none !important;
  -webkit-font-smoothing:antialiased;
}
#unp-insights-hub .wp-block-group,
#unp-insights-hub .wp-block-cover,
#unp-insights-hub .entry-content,
#unp-insights-hub .unp-featured-latest,
#unp-insights-hub .unp-insight-deck {
  background: transparent !important;
  background-image: none !important;
}

/* Layout */
#unp-insights-hub .unp-insight-deck{margin-top:clamp(1.8rem,3vw,2.6rem)}
#unp-insights-hub .unp-deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 1rem}
#unp-insights-hub .unp-deck-head h2{margin:0;font-family:"Montserrat",system-ui,sans-serif;font-weight:900;letter-spacing:-.02em}
#unp-insights-hub .unp-deck-viewall{text-decoration:none;font-weight:700}

#unp-insights-hub .unp-deck-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.4rem);
}
@media (max-width: 820px){
  #unp-insights-hub .unp-deck-grid{grid-template-columns:1fr}
}

/* Featured card */
#unp-insights-hub .unp-featured-card{
  border-radius:22px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 20px 60px rgba(0,0,0,.14);
}

/* Featured media (fix black canvas + keep clean corners) */
#unp-insights-hub .unp-featured-media{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:22px 22px 0 0;
  background:transparent !important; /* <- removes the “black canvas” look */
  isolation:isolate;
}
#unp-insights-hub .unp-featured-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
  background:transparent !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* Featured text slab */
#unp-insights-hub .unp-featured-body{
  background:rgba(249,247,245,.96) !important;
  color:#181615 !important;
  border-top:1px solid rgba(24,22,21,.10) !important;
}
#unp-insights-hub .unp-featured-tag,
#unp-insights-hub .unp-featured-title a,
#unp-insights-hub .unp-featured-date{
  color:#181615 !important;
}
#unp-insights-hub .unp-featured-date::before{
  content:"·" !important;
  margin:0 .75rem 0 .35rem;
  color:#FF4B9E !important;
  font-weight:900;
}

/* Featured meta layout (prevents CTA/image “collision” feel) */
#unp-insights-hub .unp-featured-meta{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
#unp-insights-hub .unp-featured-meta > *{min-width:0}
#unp-insights-hub .unp-featured-meta .unp-featured-date{white-space:nowrap}

/* Deck cards */
#unp-insights-hub .unp-deck-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#181615;
  border-top:3px solid #FF4B9E;
  box-shadow:0 14px 38px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease;
  isolation:isolate;
}
#unp-insights-hub .unp-deck-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px rgba(0,0,0,.16);
}
#unp-insights-hub .unp-deck-link{display:block;text-decoration:none;color:inherit;position:relative}
#unp-insights-hub .unp-deck-media{width:100%;aspect-ratio:3/2;position:relative;z-index:1}
#unp-insights-hub .unp-deck-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* Overlay */
#unp-insights-hub .unp-deck-overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:1rem 1.05rem 1.05rem;
  background:linear-gradient(to top, rgba(24,22,21,.70), rgba(24,22,21,0)) !important;
  z-index:4; /* keep text above wire/glass */
}
#unp-insights-hub .unp-deck-cat{
  margin:0 0 .35rem;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(249,247,245,.92);
}
#unp-insights-hub .unp-deck-title{
  margin:0;
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.12;
  color:#F9F7F5;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
#unp-insights-hub .unp-deck-loading{padding:1rem;opacity:.75}

/* --- Wire / Glass treatment (apply to Featured + Deck cards; guaranteed visible) --- */
#unp-insights-hub :is(.unp-featured-media, .unp-deck-card){
  will-change:transform;
  transform:translateZ(0);
}

/* Image “expensive” zoom */
#unp-insights-hub :is(.unp-featured-media img, .unp-deck-media img){
  transform:scale(1.02);
  transition:
    transform 0.8s cubic-bezier(.16,1,.3,1),
    filter 0.8s ease;
  filter:saturate(1.02) contrast(1.02);
}
#unp-insights-hub .unp-featured-media:hover img{transform:scale(1.08)}
#unp-insights-hub .unp-deck-card:hover .unp-deck-media img{transform:scale(1.08)}

/* Glass sheen */
#unp-insights-hub :is(.unp-featured-media, .unp-deck-card)::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  pointer-events:none;
  z-index:3;
  background:
    linear-gradient(120deg,
      rgba(249,247,245,0) 20%,
      rgba(249,247,245,.18) 35%,
      rgba(255,75,158,.14) 45%,
      rgba(249,247,245,0) 60%);
  transform:rotate(8deg);
  opacity:.55;
  transition:
    transform 0.9s cubic-bezier(.16,1,.3,1),
    opacity 0.5s ease;
}
#unp-insights-hub :is(.unp-featured-media:hover, .unp-deck-card:hover)::after{
  transform:translateX(25%) rotate(8deg);
  opacity:.9;
}

/* Wireframe corners (always on top, not hidden by overlay) */
#unp-insights-hub :is(.unp-featured-media, .unp-deck-card)::before{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  border-radius:16px;
  z-index:5;
  box-shadow:
    0 0 0 1px rgba(249,247,245,.10),
    0 0 0 2px rgba(255,75,158,.28);
  background:
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) left top / 12px 1px no-repeat,
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) left top / 1px 12px no-repeat,
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) right top / 12px 1px no-repeat,
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) right top / 1px 12px no-repeat,
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) left bottom / 12px 1px no-repeat,
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) left bottom / 1px 12px no-repeat,
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) right bottom / 12px 1px no-repeat,
    linear-gradient(rgba(255,75,158,.9), rgba(255,75,158,.9)) right bottom / 1px 12px no-repeat;
  opacity:.7;
  transition:
    inset var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1)),
    opacity var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1));
}
#unp-insights-hub :is(.unp-featured-media:hover, .unp-deck-card:hover)::before{
  inset:7px;
  opacity:1;
}

/* --- CTA: make it match your GLOBAL Kinetic Button System (without needing JS changes) --- */
#unp-insights-hub :is(.unp-featured-cta, #unp-insights-more){
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;

  padding:.95rem 2.6rem !important;
  border-radius:2px !important;

  background:rgba(var(--unp-ink-rgb, 249,247,245), .94) !important;
  background-image:none !important;
  color:var(--unp-dark, #181615) !important;
  text-shadow:none !important;

  font-family:var(--font-head, "Montserrat", system-ui, sans-serif) !important;
  font-weight:800 !important;
  font-size:.72rem !important;
  letter-spacing:.3em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  white-space:nowrap;

  border:1px solid rgba(var(--unp-dark-rgb, 24,22,21), .12) !important;

  box-shadow:
    0 0 0 4px rgba(var(--unp-ink-rgb, 249,247,245), .92),
    0 0 0 5px var(--unp-pink, #FF4B9E),
    0 12px 35px rgba(0,0,0,.05) !important;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  isolation:isolate;
  transition:
    transform var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1)),
    box-shadow var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1)),
    border-color var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1)),
    background var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1));
}

/* Viewfinder corners on CTA */
#unp-insights-hub :is(.unp-featured-cta, #unp-insights-more)::before{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  background:
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) left top / 10px 1px no-repeat,
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) left top / 1px 10px no-repeat,
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) right top / 10px 1px no-repeat,
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) right top / 1px 10px no-repeat,
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) left bottom / 10px 1px no-repeat,
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) right bottom / 10px 1px no-repeat,
    linear-gradient(var(--unp-pink, #FF4B9E), var(--unp-pink, #FF4B9E)) right bottom / 1px 10px no-repeat;
  opacity:.6;
  transition:inset var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1)), opacity var(--t-med, 260ms) var(--e-out, cubic-bezier(.2,.8,.2,1));
}

#unp-insights-hub :is(.unp-featured-cta:hover, #unp-insights-more:hover){
  transform:translateY(-1.5px);
  background:var(--unp-ink, #F9F7F5) !important;
  box-shadow:
    0 0 0 2px rgba(var(--unp-ink-rgb, 249,247,245), .92),
    0 0 0 3px var(--unp-pink, #FF4B9E),
    0 20px 50px rgba(0,0,0,.08) !important;
}
#unp-insights-hub :is(.unp-featured-cta:hover, #unp-insights-more:hover)::before{
  inset:6px;
  opacity:1;
}
#unp-insights-hub :is(.unp-featured-cta, #unp-insights-more):focus-visible{
  outline:2px solid var(--unp-pink, #FF4B9E);
  outline-offset:4px;
}

/* Keep CTA from “hugging” the cards too tightly */
#unp-insights-hub #unp-insights-more{
  margin-top:clamp(1.2rem, 2vw, 1.8rem);
}

/* If your “Load more” is a button element, normalize it */
#unp-insights-hub #unp-insights-more{
  cursor:pointer;
  appearance:none;
}

/* ======================================================
   UNP — EDITORIAL HERO & GALLERY SYSTEM
   3:2 Editorial Hero · Neutral Evidence Gallery
   Chrome · Safari · Firefox · 2026–2028 Safe
   ====================================================== */

/* ------------------------------------------------------
   Shell & Card
------------------------------------------------------ */

.es-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.4rem;
}

.es-card {
  background: #ffffff;
  border-radius: 32px;
  box-shadow: var(--unp-shadow);
  margin: 2rem 0 4rem;

  /* Critical cross-browser clipping */
  overflow: hidden;
  isolation: isolate;

  /* Safari corner stability */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

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

.es-section--hero {
  padding: 0;
  margin: 0;
}

/* Figure container */
.es-hero-photo {
  margin: 0;
  padding: 0;
}

/* Image frame (isolates wireframe from caption) */
.es-hero-frame {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* True editorial 35mm frame */
.es-hero-frame img {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: 3 / 2;
  object-fit: cover;

  /* Match card top only */
  border-radius: 32px 32px 0 0;

  /* Cross-browser stability */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

/* ======================================================
   UNP — HERO GLASS FRAME (UNIFIED)
   Applies to:
   - Service silos
   - Event silos
   - Local silos
   ====================================================== */

.es-hero-photo::after,
.es-hero-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(24,22,21,.14),         
    inset 0 0 0 2px rgba(var(--unp-pink-rgb), .22); 
}

/* Caption (editorial, untouched by wireframe) */
.es-hero-photo figcaption {
  padding: 1.1rem 2.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--unp-muted);
  background: rgba(var(--unp-dark-rgb), 0.025);
  border-bottom: 1px solid var(--unp-muted-2);
}

/* Hero copy */
.es-hero-copy {
  max-width: 58rem;
  padding: 3.5rem 2.6rem 2.5rem;
}

/* ------------------------------------------------------
   Typography
------------------------------------------------------ */

.es-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--unp-pink);
}

.es-title-xl {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.3rem, 4.2vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.2rem;
  color: var(--unp-dark);
}

/* ------------------------------------------------------
   Sections
------------------------------------------------------ */

.es-section {
  padding: 3rem 2.6rem;
  border-bottom: 1px solid var(--unp-muted-2);
}

/* ------------------------------------------------------
   Gallery — Editorial Neutral (Evidence Mode)
------------------------------------------------------ */

.es-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.5rem;
  padding: 2rem 0;
}

.es-gallery-card {
  display: flex;
  flex-direction: column;
}

/* Neutral containment — NO pink */
.es-gallery-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  overflow: hidden;
  background: #f5f4f3;
  border: 1px solid rgba(var(--unp-dark-rgb), 0.12);
  box-shadow: none;
}

.es-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Subtle, professional hover only */
@media (prefers-reduced-motion: no-preference) {
  .es-gallery-card:hover .es-gallery-frame img {
    transform: scale(1.03);
  }
}

/* ------------------------------------------------------
   Mobile Refinements
------------------------------------------------------ */

@media (max-width: 768px) {
  .es-shell {
    padding: 0 1rem;
  }

  .es-card {
    border-radius: 22px;
  }

  .es-hero-frame img {
    border-radius: 22px 22px 0 0;
  }

  .es-hero-frame::after {
    inset: 14px;
    border-radius: 12px;
  }

  .es-hero-copy,
  .es-section {
    padding: 2.2rem 1.5rem;
  }

  .es-gallery-frame {
    border-radius: 18px;
  }
}


/* ==========================================================
   UNP MASTER SITEMAP: HERO CLEARANCE + 3-COLUMN GRID
   ========================================================== */

/* 1. HERO COVER: High-End Agency Clearance */
.agency-glass-frame {
  margin-top: 80px !important; /* Forces image below the Nav Menu */
  border-radius: 40px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 1;
}

/* 2. HERO TYPOGRAPHY: Pure White & Readable */
.agency-glass-frame h1,
.agency-glass-frame p,
.agency-glass-frame .wp-block-cover__inner-container {
  color: #ffffff !important;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9);
  font-weight: 500;
  letter-spacing: 1px;
}

/* 3. SITEMAP CONTAINER: Charcoal/Pink Professionalism */
.rank-math-html-sitemap {
  background-color: #111111;
  padding: 60px 40px;
  border-radius: 30px;
  margin-top: 40px;
  border: 1px solid #222;
}

/* 4. THE GRID: 3-Column Specialty Layout */
.rank-math-html-sitemap section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-top: 20px;
}

/* 5. INTERNAL IMAGES: Glass & Wire Effect (22px) */
.rank-math-html-sitemap img,
.rank-math-html-sitemap .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;

  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transition: transform .25s ease, border-color .25s ease;
}

.rank-math-html-sitemap img:hover,
.rank-math-html-sitemap .wp-block-image img:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 30, 99, 0.4); /* UNP Pink Glow */
}

/* 6. HEADERS: Specialty Titles */
.rank-math-html-sitemap h2 {
  font-size: 1.1rem !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #e91e63 !important;
  border-bottom: 2px solid rgba(233, 30, 99, 0.2);
  padding-bottom: 12px;
}

/* 7. LINKS: Interactive Hover */
.rank-math-html-sitemap li a {
  color: #dddddd;
  font-size: 0.95rem;
  line-height: 1.6;
  text-decoration: none;
  transition: all 0.3s ease;
}

.rank-math-html-sitemap li a:hover {
  color: #e91e63;
  padding-left: 8px;
}

/* 8. MOBILE OPTIMISATION */
@media (max-width: 900px) {
  .rank-math-html-sitemap section { grid-template-columns: 1fr; }
  .agency-glass-frame { margin-top: 60px !important; }
}

/* =====================================================
   UNP — RESEARCH PAPER (CANONICAL)
   Scope: #unp-research-paper only
   ===================================================== */

#unp-research-paper{
  background:#ffffff;
  color:#181615;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.8;
}

/* Layout */
#unp-research-paper .unp-wrap{
  max-width:760px;
  margin:0 auto;
  padding:clamp(3rem,6vw,5rem) 1.25rem;
}

/* Typography */
#unp-research-paper .unp-kicker{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(24,22,21,.6);
  margin-bottom:.75rem;
  font-weight:600;
}

#unp-research-paper .unp-title{
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:clamp(2rem,4.5vw,3rem);
  line-height:1.15;
  margin-bottom:1.5rem;
}

#unp-research-paper .unp-meta{
  font-size:.95rem;
  border-left:3px solid #FF4B9E;
  padding-left:1.25rem;
  margin-bottom:3.5rem;
  color:#444;
}

/* Abstract */
#unp-research-paper .unp-abstract-section{
  background:#F9F7F5;
  border-left:4px solid #FF4B9E;
  padding:2rem 2.25rem;
  margin:3rem 0 4rem;
}

#unp-research-paper .unp-abstract-title{
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:1.2rem;
  margin-bottom:1rem;
}

/* Sections */
#unp-research-paper .unp-section{
  margin-bottom:3.5rem;
}

#unp-research-paper .unp-section h2{
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:1.6rem;
  margin-top:2.5rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid rgba(0,0,0,.05);
  padding-bottom:.5rem;
}

#unp-research-paper .unp-section h3{
  font-size:1.25rem;
  margin:1.75rem 0 .75rem;
}

#unp-research-paper .unp-section p{
  margin-bottom:1.5rem;
}

/* Inline citations */
#unp-research-paper .unp-cite-inline{
  font-weight:600;
}

/* Research figure */
#unp-research-paper .unp-research-figure{
  margin:2.5rem 0;
  text-align:center;
  background:#F9F7F5;
  padding:2rem;
  border:1px solid rgba(24,22,21,.08);
}

#unp-research-paper .unp-figure-caption{
  font-size:.85rem;
  color:rgba(24,22,21,.65);
  margin-top:1rem;
  font-style:italic;
}

/* References */
#unp-research-paper .unp-refs-section{
  background:#F9F7F5;
  border-top:1px solid #eee;
  padding:3.5rem 0;
}

#unp-research-paper .unp-refs-list{
  list-style:none;
  padding:0;
  margin:0;
}

#unp-research-paper .unp-refs-list li{
  font-size:.9rem;
  margin-bottom:.85rem;
  line-height:1.6;
}

/* Citation box */
#unp-research-paper .unp-citation-box{
  background:#ffffff;
  border:1px solid #ddd;
  padding:1.75rem;
  margin-top:2.5rem;
}

#unp-research-paper .unp-citation-box code{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85rem;
  margin-bottom:1rem;
  white-space:pre-wrap;
  word-break:break-word;
}

#unp-research-paper .unp-copy-btn{
  background:#181615;
  color:#ffffff;
  border:none;
  padding:.7rem 1.25rem;
  font-size:.85rem;
  cursor:pointer;
}

/* Print handling */
@media print {
  #unp-research-paper .unp-copy-btn{
    display:none;
  }

  #unp-research-paper .unp-citation-box{
    border:1px solid #000;
  }

  #unp-research-paper .unp-pill--research::after{
    display:none;
  }
}

/* ==============================
   RESEARCH VARIANT — QUIET MODE
============================== */

a.unp-pill--research{
  position: relative;
  background: transparent;
  color: #181615;
  border-color: rgba(24,22,21,.25);

  box-shadow: none;
  padding: .6rem 0;
  border-radius: 0;
  font-weight: 700;
}

/* Kill bloom, keep underline intelligence */
a.unp-pill--research::after{
  left: 0;
  right: 0;
  bottom: -.25em;

  background: #FF4B9E;
  box-shadow: none;
  opacity: .6;
  transform: scaleX(.4);
}

a.unp-pill--research:hover{
  transform: none;
  background: transparent;
  letter-spacing: .28em;
  box-shadow: none;
}

a.unp-pill--research:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

#unp-home-research{
  scroll-margin-top: 6rem;
}
/* =====================================================
   UNP — HOME: Research Entry Point
   ===================================================== */

#unp-home-research{
  background:#F9F7F5;
}

#unp-home-research .unp-home-research-wrap{
  max-width:760px;
  margin:0 auto;
  padding:clamp(3rem,6vw,5rem) 1.25rem;
}

#unp-home-research .unp-home-research-kicker{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(24,22,21,.6);
  margin-bottom:.75rem;
  font-weight:600;
}

#unp-home-research .unp-home-research-title{
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:clamp(1.8rem,4vw,2.4rem);
  line-height:1.2;
  margin-bottom:1rem;
  color:#181615;
}

#unp-home-research .unp-home-research-desc{
  max-width:60ch;
  font-size:1rem;
  line-height:1.65;
  color:rgba(24,22,21,.75);
  margin-bottom:1.75rem;
}

/* Quiet research CTA — opt out of pill engine */
#unp-home-research a.unp-pill--research{
  all: unset;
  position: relative;
  display: inline-block;
  font-family: var(--font-head, Montserrat, sans-serif);
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-size:.75rem;
  color:#181615;
  cursor:pointer;
}

/* Underline */
#unp-home-research a.unp-pill--research::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.25em;
  height:1px;
  background:#FF4B9E;
  transform:scaleX(.4);
  transform-origin:left;
  transition:transform .25s ease;
  opacity:.7;
}

#unp-home-research a.unp-pill--research:hover::after{
  transform:scaleX(1);
  opacity:1;
}

/* Accessibility */
#unp-home-research a.unp-pill--research:focus-visible{
  outline:2px solid #FF4B9E;
  outline-offset:4px;
}
/* ======================================================
   UNP — AUTHORITY / LONGFORM SYSTEM
   Editorial · Trust-led · Token-native
   Replaces legacy "UNP Authority System"
   ====================================================== */

/* ======================================================
   1) CANVAS
   ====================================================== */

.unp-authority {
  max-width: 860px;                 /* reading measure, not layout */
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6.5rem) 1.6rem;

  background: transparent;
  color: var(--unp-dark);
  font-family: var(--font-body);
}

/* ======================================================
   2) TYPOGRAPHY — WORDS FIRST
   ====================================================== */

.unp-authority h1,
.unp-authority h2,
.unp-authority h3 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.unp-authority h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.3rem);
}

.unp-authority h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin-top: 3.2rem;
}

.unp-authority h3 {
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  margin-top: 2.2rem;
}

.unp-authority p {
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--unp-muted);
  margin: 0 0 1.2rem;
}

/* ======================================================
   3) EYEBROW / KICKER
   ====================================================== */

.unp-authority .unp-eyebrow {
  display: block;
  margin-bottom: .8rem;

  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

/* ======================================================
   4) HERO (STRUCTURE ONLY)
   ====================================================== */

.unp-authority .unp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 4.5vw, 3.6rem);

  margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

@media (min-width: 900px) {
  .unp-authority .unp-hero {
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
  }
}

.unp-authority .unp-hero-text {
  max-width: 60ch;
}

.unp-authority .unp-intro {
  font-size: 1.05rem;
  color: var(--unp-dark);
}

/* ======================================================
   5) IMAGES — EDITORIAL SUPPORT
   ====================================================== */

.unp-authority figure {
  margin: 0;
}

.unp-authority figure img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: var(--unp-radius);
  background: #f4f3f2;
  border: 1px solid rgba(0,0,0,.08);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 18px 42px rgba(0,0,0,.18);
}

.unp-authority figcaption {
  margin-top: .6rem;
  max-width: 60ch;

  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ======================================================
   6) IMAGE PAIRS / SPLITS
   ====================================================== */

.unp-authority .unp-image-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 4.5vw, 3.6rem);

  margin: clamp(4rem, 8vw, 6rem) 0;
}

@media (min-width: 900px) {
  .unp-authority .unp-image-split {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* ======================================================
   7) AUTHORITY BLOCK (PULLED TEXT)
   ====================================================== */

.unp-authority .unp-authority-block {
  margin: clamp(3rem, 6vw, 4.5rem) 0;
  padding-left: 1.6rem;

  border-left: 3px solid var(--unp-pink);
}

.unp-authority .unp-authority-block p {
  margin-bottom: 1rem;
}

/* ======================================================
   8) TABLE OF CONTENTS (EDITORIAL)
   ====================================================== */

.unp-authority .unp-toc {
  margin: clamp(3.5rem, 7vw, 5rem) 0;
  padding: 1.6rem 1.8rem;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #ffffff;
}

.unp-authority .unp-toc ul {
  list-style: none;
  padding: 0;
  margin: .8rem 0 0;
}

.unp-authority .unp-toc li {
  margin: .45rem 0;
}

.unp-authority .unp-toc a {
  text-decoration: none;
  color: var(--unp-dark);
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.unp-authority .unp-toc a:hover {
  border-bottom-color: var(--unp-pink);
}

/* ======================================================
   9) LINKS
   ====================================================== */

.unp-authority a {
  color: var(--unp-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.unp-authority a:hover {
  color: var(--unp-pink);
  border-bottom-color: var(--unp-pink);
}

/* ======================================================
   10) CTA SECTIONS (STRUCTURAL ONLY)
   ====================================================== */

.unp-authority .unp-authority-cta {
  margin-top: clamp(4.5rem, 9vw, 6.5rem);
}

/* ======================================================
   11) FOOTER META (OPTIONAL)
   ====================================================== */

.unp-authority .unp-article-meta {
  margin-top: clamp(4rem, 8vw, 6rem);
  font-size: .85rem;
  color: var(--muted);
  max-width: 65ch;
}

/* ======================================================
   UNP — COPYRIGHT & INTELLECTUAL PROPERTY
   Legal · Editorial · Authority
   ====================================================== */

/* ---- PAGE CONTEXT ---- */
.lp-shell {
  max-width: 900px;
  margin: 0 auto;
  padding:
    clamp(5.8rem, 10vw, 7.2rem) /* ⬅ breathing room under nav */
    1.6rem
    clamp(4rem, 8vw, 5.5rem);
  background: var(--unp-ink);
}

/* ---- CARD ---- */
.lp-card {
  background: #fff;
  border-radius: 32px;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  box-shadow:
    0 28px 72px rgba(0,0,0,.16),
    0 0 0 1px rgba(0,0,0,.05);
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--unp-dark);
  -webkit-font-smoothing: antialiased;
}

/* ---- EYEBROW ---- */
.lp-eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--unp-muted);
  margin-bottom: .6rem;
}

/* ---- PRIMARY HEADING ---- */
.lp-h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
  letter-spacing: -0.03em;
}

/* ---- INTRO / SUBTITLE ---- */
.lp-subtitle {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--unp-muted);
  max-width: 62ch;
  margin-bottom: 1.6rem;
}

/* ---- HERO IMAGE ---- */
.lp-hero {
  margin: 1.6rem 0 2.2rem;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0,0,0,.16),
    0 0 0 1px rgba(0,0,0,.04);
}

.lp-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- SECTION HEADINGS ---- */
.lp-h2 {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  margin-bottom: .7rem;
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  position: relative;
}

.lp-h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: .55rem;
  border-radius: 999px;
  background: var(--unp-pink);
}

/* ---- BODY COPY ---- */
.lp-body {
  font-size: .98rem;
  line-height: 1.75;
  color: var(--unp-muted);
  margin-bottom: 1rem;
  max-width: 74ch;
}

.lp-body strong {
  color: var(--unp-dark);
  font-weight: 600;
}

/* ---- LISTS ---- */
.lp-list {
  margin: .4rem 0 1.4rem 1.2rem;
  color: var(--unp-muted);
  font-size: .95rem;
}

.lp-list li {
  margin-bottom: .6rem;
  line-height: 1.6;
}

/* ---- ILLUSTRATION ---- */
.lp-illustration {
  margin: clamp(2.6rem, 5vw, 3.4rem) auto;
  max-width: 640px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.05);
}

.lp-illustration img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- NOTES ---- */
.lp-note {
  margin-top: 1.8rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--unp-muted);
}

/* ---- LINKS ---- */
.lp-card a {
  color: inherit;
  text-underline-offset: 3px;
}

.lp-card a:hover {
  color: var(--unp-dark);
}

/* ---- MOBILE TWEAK ---- */
@media (max-width: 720px) {
  .lp-shell {
    padding-top: 5.2rem; /* keeps nav clear on small screens */
  }
}
/* ======================================================
   UNP — ACCESSIBILITY STATEMENT (MUSEUM SPEC)
   Inclusive · Authority · Material Truth
   ====================================================== */

.accessibility-page {
  background: var(--unp-ink);
  color: var(--unp-dark);
  -webkit-font-smoothing: antialiased;
}

.ap-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(3.8rem, 7vw, 6.2rem) 1.6rem;
}

/* 1. THE ARCHIVAL CARD */
.ap-card {
  background: #fff;
  border-radius: 28px;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  box-shadow: 
    0 28px 72px rgba(24, 22, 21, 0.12), 
    0 0 0 1px rgba(24, 22, 21, 0.05);
}

/* 2. THE MUSEUM FIGURE (STATIONARY SPEC)
   Accessibility images should be calm. We use the 'Matte' 
   padding but remove kinetic hover to ensure stability. */

.ap-figure {
  isolation: isolate;
  position: relative;
  width: 100%;
  margin: clamp(2.4rem, 5vw, 3.2rem) auto;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;

  /* The Museum Shadow: Subtle & Permanent */
  box-shadow: 
    inset 0 0 0 1px var(--unp-dark), 
    12px 12px 0 rgba(24, 22, 21, 0.04);
}

.ap-figure img {
  display: block;
  width: 100%;
  height: auto;
  padding: 14px; /* The Internal Mount */
  box-sizing: border-box;
  filter: grayscale(100%); /* Editorial restraint */
  opacity: 0.92;
  transition: opacity 0.4s ease;
}

.ap-figure:hover img {
  opacity: 1;
  filter: grayscale(0%); /* Subtly reveals inclusive detail */
}

.ap-figure figcaption {
  padding: 0 14px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted, var(--unp-muted));
  font-style: italic;
}

/* 3. TYPOGRAPHY: THE AUTHORITY VOICE */
.ap-eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted, var(--unp-muted));
  margin-bottom: .6rem;
}

.ap-h1 {
  font-family: var(--font-head);
  font-weight: 850;
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 1.4rem;
  letter-spacing: -0.03em;
}

.ap-h1 .accent {
  color: var(--unp-pink);
}

.ap-h2 {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  margin-bottom: .7rem;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 750;
  color: var(--unp-dark);
}

.ap-h2::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: .6rem;
  border-radius: 999px;
  background: var(--unp-pink);
}

/* 4. INCLUSIVE BODY COPY */
.ap-body {
  font-size: 1.05rem; /* Slightly larger for accessibility */
  line-height: 1.8;
  color: var(--muted, var(--unp-muted));
  margin-bottom: 1.2rem;
  max-width: 68ch;
}

.ap-list {
  margin: 1rem 0 1.8rem 1.4rem;
  color: var(--muted, var(--unp-muted));
  list-style: none;
}

.ap-list li {
  position: relative;
  margin-bottom: 0.65rem;
  padding-left: 1.4rem;
  line-height: 1.6;
}

/* Use the Em-Dash bullet for archival feel */
.ap-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--unp-pink);
  font-weight: 800;
}

/* 5. ACCESSIBILITY OVERRIDES */
@media (prefers-reduced-motion: reduce) {
  .ap-figure img {
    transition: none;
  }
}

@media (max-width: 480px) {
  .ap-body { font-size: .98rem; }
  .ap-h1  { font-size: 1.95rem; }
}
/* ======================================================
   UNP — LEGAL & COMPLIANCE (MUSEUM ARCHIVE)
   Privacy · Cookies · Governance · Material Truth
   ====================================================== */

.cp-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(3.8rem, 7vw, 6.2rem) 1.6rem;
  color: var(--unp-dark);
}

/* 1. THE ARCHIVAL CARD */
.cp-card {
  background: #fff;
  border-radius: 28px;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  box-shadow: 
    0 28px 72px rgba(24, 22, 21, 0.08), 
    0 0 0 1px rgba(24, 22, 21, 0.05);
}

/* 2. THE MUSEUM FRAME (LEGAL SPEC)
   Updated to match the Museum Frame logic but with a 
   softer "Grounding" shadow for compliance. */

.cp-hero, .cp-illustration {
  isolation: isolate;
  position: relative;
  width: 100%;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
  background: #ffffff; /* The Paper Matte */
  overflow: hidden;
  border-radius: 24px;
  
  /* Layout Control */
  aspect-ratio: 16 / 7; /* Wide editorial strip for legal headers */
  
  /* The Museum Shadow: Subtle & Defined */
  box-shadow: 
    inset 0 0 0 1px var(--unp-dark), 
    10px 10px 0 rgba(24, 22, 21, 0.03); /* Lighter than editorial */
  
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-hero img, .cp-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 12px; /* The Internal Mount */
  box-sizing: border-box;
  filter: grayscale(100%); /* Compliance pages stay strictly monochrome */
  opacity: 0.9;
  transition: opacity 600ms ease, filter 600ms ease;
}

/* Subtly bring back life on hover without being 'flashy' */
.cp-hero:hover img, .cp-illustration:hover img {
  filter: grayscale(20%);
  opacity: 1;
}

/* 3. TYPOGRAPHY: THE AUTHORITY VOICE */
.cp-h1 {
  font-family: var(--font-head);
  font-weight: 850;
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.cp-h2 {
  margin-top: clamp(2.8rem, 5vw, 3.8rem);
  margin-bottom: .8rem;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 750;
  color: var(--unp-dark);
}

.cp-h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-top: 0.6rem;
  border-radius: 999px;
  background: var(--unp-pink);
  opacity: 0.7; /* Softened for legal */
}

/* 4. CONTENT & LISTS */
.cp-body {
  font-size: 1.02rem;
  line-height: 1.8; /* Increased for legibility */
  color: var(--muted, var(--unp-muted));
  margin-bottom: 1.2rem;
  max-width: 68ch;
}

.cp-list {
  margin: 1rem 0 1.8rem 1.4rem;
  color: var(--muted, var(--unp-muted));
  list-style-type: none;
}

.cp-list li {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 1.2rem;
}

/* Custom minimal bullet */
.cp-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--unp-pink);
  font-weight: 800;
}

/* 5. MOBILE REFINEMENT */
@media (max-width: 600px) {
  .cp-hero, .cp-illustration {
    aspect-ratio: 3 / 2; /* Taller on mobile */
    box-shadow: inset 0 0 0 1px var(--unp-dark), 6px 6px 0 rgba(24, 22, 21, 0.03);
  }
}
/* ======================================================
   UNP — LEGAL & GOVERNANCE PAGES
   Editorial · Calm · Authority
   ====================================================== */

/* ---- PAGE SHELL ---- */
.ms-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(3.8rem, 7vw, 6.2rem) 1.6rem;
  color: var(--unp-dark);
}

/* ---- CARD (paper, not glass) ---- */
.ms-card {
  background: #fff;
  border-radius: 28px;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  box-shadow:
    0 28px 72px rgba(0,0,0,.16),
    0 0 0 1px rgba(0,0,0,.05);
}

/* ---- TYPOGRAPHY ---- */
.ms-h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.ms-meta {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--unp-muted);
  margin-bottom: 2rem;
}

/* ---- SECTION HEADINGS ---- */
.ms-h2 {
  margin-top: clamp(2.8rem, 5vw, 3.8rem);
  margin-bottom: .8rem;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -.01em;
  position: relative;
}

.ms-h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  margin-top: .55rem;
  border-radius: 999px;
  background: var(--unp-pink);
}

/* ---- BODY COPY ---- */
.ms-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--unp-muted);
  margin-bottom: 1rem;
  max-width: 70ch;
}

.ms-body strong {
  color: var(--unp-dark);
}

/* ---- LINKS ---- */
.ms-body a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ms-body a:hover {
  color: var(--unp-dark);
}

/* ---- LISTS ---- */
.ms-list {
  margin: .6rem 0 1.4rem 1.2rem;
  color: var(--unp-muted);
}

.ms-list li {
  margin-bottom: .55rem;
  line-height: 1.6;
}

/* ---- HERO IMAGE (single, quiet) ---- */
.ms-hero-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.8rem 0 2.2rem;
  border-radius: 22px;
  background: var(--unp-ink);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 22px 48px rgba(0,0,0,.18);
}

/* ---- SIGNOFF ---- */
.ms-signoff {
  margin-top: clamp(3rem, 5vw, 4.2rem);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--unp-muted);
}

/* ---- SMALL SCREENS ---- */
@media (max-width: 480px) {
  .ms-body { font-size: .95rem; }
  .ms-h1 { font-size: 1.9rem; }
}
/* ======================================================
   UNP — FREELANCE PHOTOGRAPHER (GALLERY CALM · ALIGNED)
   Editorial · Museum Frame · Performance Safe
   Scope: Freelance Photographer pages
   ====================================================== */

/* ------------------------------------------------------
   PAGE CANVAS
------------------------------------------------------ */

body.page-freelance-photographer,
body[class*="freelance-photographer"] {
  background: var(--unp-cream);
  color: var(--unp-dark);

  /* Image ratio token (override per page if needed) */
  --fp-lead-ratio: 3 / 2;
}

/* ------------------------------------------------------
   CONTENT SHELL — MATCHES STORY / PRESS
------------------------------------------------------ */

.fp-lead-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding:
    clamp(6rem, 10vw, 9rem)   /* header-safe top headroom */
    clamp(1.5rem, 3vw, 2.5rem)
    clamp(4rem, 8vw, 5.5rem);

  /* iOS safe areas */
  padding-left: max(1.6rem, env(safe-area-inset-left));
  padding-right: max(1.6rem, env(safe-area-inset-right));
}

/* Constrain editorial text measure (not images) */
.fp-lead-shell > *:not(.fp-lead-figure) {
  max-width: 860px;
}

/* ------------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------ */

.fp-lead-kicker {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--unp-pink);
  margin-bottom: 1.6rem;
}

.fp-lead-title {
  max-width: 18ch;
  margin-bottom: 1.6rem;
}

.fp-lead-intro,
.fp-lead-body {
  max-width: 62ch;
  color: var(--unp-muted);
}

.fp-lead-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.4rem;
}

.fp-lead-body {
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

/* ------------------------------------------------------
   HERO IMAGE — MUSEUM FRAME (ALIGNED MOTION)
------------------------------------------------------ */

.fp-lead-figure {
  position: relative;
  width: 100%;
  margin: clamp(2.5rem, 6vw, 3.8rem) 0;
  isolation: isolate;

  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;

  aspect-ratio: var(--fp-lead-ratio);

  /* Museum shadow */
  box-shadow:
    inset 0 0 0 1px var(--unp-dark),
    14px 14px 0 rgba(var(--unp-dark-rgb), 0.045);

  /* GPU-safe motion */
  backface-visibility: hidden;
  transform: translateZ(0);
  transition:
    transform 600ms var(--e-out),
    box-shadow 600ms var(--e-out);
}

.fp-lead-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 15px; /* the matte */
  box-sizing: border-box;

  /* Refined Focus Logic */
  filter: grayscale(18%);
  transform-origin: center center;
  transition: filter 600ms ease, transform 600ms var(--e-out);
  image-rendering: -webkit-optimize-contrast;
}

@media (hover: hover) {
  .fp-lead-figure:hover img {
    filter: grayscale(0%);
    transform: scale(1.01); /* The centered focal pop */
  }
}
/* ------------------------------------------------------
   INTERACTION — INWARD CONFIDENCE (SYSTEM CONSISTENT)
------------------------------------------------------ */

@media (hover: hover) {
  .fp-lead-figure {
    will-change: transform, box-shadow;
  }

  .fp-lead-figure:hover {
    transform: translate3d(3px, 3px, 0);
    box-shadow:
      inset 0 0 0 1.5px var(--unp-pink),
      18px 18px 0 rgba(var(--unp-pink-rgb), 0.18);
  }

  .fp-lead-figure:hover img {
    filter: grayscale(0%);
  }
}

/* ------------------------------------------------------
   CAPTION — GLASS PLAQUE
------------------------------------------------------ */

.fp-lead-caption {
  position: absolute;
  inset: auto 30px 30px 30px;
  z-index: 3;

  padding: 12px 16px;
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(var(--unp-dark-rgb), 0.1);

  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--unp-dark);
}

/* ------------------------------------------------------
   ACCESSIBILITY & MOBILE
------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .fp-lead-figure {
    transition: none;
    transform: none;
  }
}

@media (max-width: 720px) {
  body.page-freelance-photographer {
    --fp-lead-ratio: 3 / 4;
  }

  .fp-lead-figure {
    box-shadow:
      inset 0 0 0 1px var(--unp-dark),
      8px 8px 0 rgba(var(--unp-dark-rgb), 0.045);
  }
}


/* ======================================================
   UNP — ABOUT PAGE (HARMONISED AUTHORITY)
   Editorial · Museum Rhythm · Token-Native · Stable
   ====================================================== */

/* ── 1. PAGE WRAP ── */
.unp-about-page {
  background: var(--unp-cream, #F9F7F5);
  color: var(--unp-dark, #181615);
  isolation: isolate;
}

/* ── 2. CANVAS ── */
.au-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 5.5rem) 1.4rem;
}

/* ── 3. MUSEUM CARD (SINGLE MATERIAL LANGUAGE) ── */
.au-card {
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(24,22,21,.06);
  box-shadow:
    0 32px 80px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

/* ── 4. HERO LAYOUT ── */
.au-hero {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(2.4rem, 4.5vw, 3.8rem);
  align-items: center;
}

@media (max-width: 900px) {
  .au-hero { grid-template-columns: 1fr; }
}

/* ── 5. TYPOGRAPHY (EDITORIAL FIRST) ── */
.au-eyebrow {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--unp-pink);
  margin-bottom: .8rem;
}

.au-title-xl {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin-bottom: 1.2rem;
}

.au-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(24,22,21,.85);
  max-width: 56ch;
}

/* ── 6. HERO MEDIA (MATERIAL LENS) ── */
.au-hero-frame {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #181615;
  isolation: isolate;
  box-shadow:
    0 24px 56px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.au-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(24,22,21,.08);
  z-index: 2;
}

.au-hero-frame img {
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(1.02) saturate(.98);
  transform: scale(1.01);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}

@media (hover:hover) {
  .au-hero-frame:hover img { transform: scale(1.025); }
}

/* ── 7. KINETIC OBSIDIAN BUTTON (REVAMPED) ── */
.unp-kinetic-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #1b1a19 0%, #0f0e0d 100%);
  color: #F9F7F5;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
  overflow: hidden;
  isolation: isolate;
  margin-top: 1.5rem;
}

.unp-kinetic-button::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: transform 0.8s ease;
  z-index: 1;
}

@media (hover:hover) {
  .unp-kinetic-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(255, 75, 158, 0.15);
  }
  .unp-kinetic-button:hover::before { transform: translateX(100%); }
}

/* ── 8. SECTION RHYTHM ── */
.au-section {
  padding: clamp(2.8rem, 5vw, 3.6rem) clamp(2rem, 3vw, 2.8rem);
  border-top: 1px solid rgba(24,22,21,.05);
}

.au-section:first-of-type { border-top: none; }

/* ── 9. VALUES (EDITORIAL MATERIAL) ── */
.au-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1.6rem, 3vw, 2.2rem);
  margin-top: 2.4rem;
}

@media (max-width: 900px) { .au-value-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .au-value-grid { grid-template-columns: 1fr; } }

.au-value-card {
  background: rgba(255,255,255,.65);
  border-radius: 20px;
  padding: 1.8rem;
  border: 1px solid rgba(24,22,21,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
  transition: border-color 0.4s ease;
}

@media (hover:hover) {
  .au-value-card:hover { border-color: rgba(255,75,158,.45); }
}

/* ── 10. QUOTES & LINKS ── */
.au-quote-block,
.au-link-card {
  background: rgba(255,255,255,.7);
  border-radius: 22px;
  padding: 2rem;
  border: 1px solid rgba(24,22,21,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  transition: box-shadow 0.4s ease;
}

.au-link-card { text-decoration: none; color: inherit; display: block; }

@media (hover:hover) {
  .au-link-card:hover { box-shadow: 0 20px 48px rgba(0,0,0,.09); }
}
/* ============================================================
   UNP — IN THE PRESS MASTER (GALLERY CALM EDITION)
   Logic: Glass Editorial · GPU Optimized · Performance Ready
   Scope: .press-page
   ============================================================ */

/* 1. PAGE CANVAS & GLOBAL HEADROOM */
.press-page {
  background: var(--unp-cream);
  color: var(--unp-dark);
  font-family: var(--font-body);
}

/* Headroom: Ensures content starts below fixed nav. 
   Adjust top clamp if your header height changes. 
*/
.press-shell {
  padding-top: clamp(6rem, 10vw, 9rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}


/* 2. THE MAIN GLASS CONTAINER */
.press-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .62),
    rgba(255, 255, 255, .38)
  );

  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);

  border-radius: var(--unp-radius);
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    0 22px 60px -20px rgba(24, 22, 21, .22);

  overflow: hidden;
}

/* 3. HERO SECTION MEDIA */
.au-hero-frame {
  position: relative;
  border-radius: 24px;
  padding: 14px; /* The Museum Matte signature */
  background: #ffffff;
  border: 1px solid rgba(var(--unp-dark-rgb), 0.08);
  box-shadow: 10px 10px 0 rgba(var(--unp-dark-rgb), 0.05);
  margin-bottom: 2rem;
}

.au-hero-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  filter: grayscale(10%);
}

/* 4. THE PRESS GRID (Editorial Tile System) */
.unp-press-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 3.5rem;
}

/* 5. INDIVIDUAL GLASS TILES */
.unp-press-item {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .7),
    rgba(255, 255, 255, .45)
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  
  border-radius: 22px;
  padding: 10px; /* Internal Matte */
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  box-shadow: 0 12px 30px -10px rgba(24, 22, 21, 0.08);

  /* Performance: Transitioning only the transform for GPU efficiency */
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1), 
              box-shadow 500ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform; 
}

.unp-press-item img {
  width: 100%;
  display: block;
  border-radius: 12px;
  filter: grayscale(10%);
  
  /* Pro Refinement: Centered scale pop */
  transform-origin: center center;
  transition: filter 500ms ease, transform 500ms ease;
  will-change: filter, transform;
}

/* 6. INTERACTION — INWARD CONFIDENCE */
@media (hover: hover) {
  .unp-press-item:hover {
    transform: translate3d(3px, 3px, 0); 
    border-color: rgba(var(--unp-pink-rgb), .45);
    box-shadow: 8px 8px 0 rgba(var(--unp-pink-rgb), 0.15);
  }
  
  .unp-press-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.01);
  }
}

/* 7. CAPTIONS & TYPOGRAPHY */
.unp-press-caption {
  padding: 1rem 0.5rem 0.5rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--unp-muted);
}

.unp-press-kicker {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--unp-pink);
  margin-bottom: .35rem;
}

/* Highlight Tile (e.g. PRWeek Hero Hit) */
.unp-press-item--prweek {
  grid-column: span 2;
  border-left: 4px solid var(--unp-pink);
}

/* 8. ACCESSIBILITY POLISH */
@media (prefers-reduced-motion: reduce) {
  .unp-press-item,
  .unp-press-item img {
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* 9. RESPONSIVE BEHAVIOUR */
@media (max-width: 1024px) {
  .unp-press-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .unp-press-item--prweek {
    grid-column: span 1;
  }

  .press-card {
    padding: 2.5rem 1.25rem;
  }

  /* Soften depth on small screens */
  .unp-press-item {
    box-shadow: 0 10px 24px -12px rgba(24,22,21,0.1);
  }
}

/* ============================================================
   UNP — ABOUT / OUR TEAM
   Gallery Calm Edition
   Editorial · Human · Picture-Desk-Led
   ============================================================ */

/* ------------------------------------------------------------
   PAGE SHELL & CARD
   ------------------------------------------------------------ */

.au-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 6.5rem) 1.4rem;
}

.au-card {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.62),
    rgba(255,255,255,.38)
  );
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-radius: var(--unp-radius);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 22px 60px -20px rgba(24,22,21,.22);
  overflow: hidden;
}

/* ------------------------------------------------------------
   SECTION RHYTHM
   ------------------------------------------------------------ */

.au-section {
  padding:
    clamp(2.8rem, 4.8vw, 3.8rem)
    clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.au-section:last-child {
  border-bottom: none;
}

/* ------------------------------------------------------------
   HERO LAYOUT
   ------------------------------------------------------------ */

.au-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.4rem, 4.8vw, 4rem);
  align-items: flex-start;
}

@media (max-width: 900px) {
  .au-hero {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

.au-hero-flag,
.au-eyebrow {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--unp-muted);
  margin-bottom: .7rem;
}

.au-title-xl {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.au-intro {
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--unp-muted);
  margin-bottom: 1.1rem;
}

.au-hero-highlight {
  font-weight: 700;
  color: var(--unp-dark);
}

.au-body {
  max-width: 62ch;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--unp-muted);
  margin-bottom: .95rem;
}

.au-hero-note {
  margin-top: 1.2rem;
  font-size: .9rem;
  color: var(--unp-muted);
}

.au-h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  margin-bottom: .9rem;
}

/* ------------------------------------------------------------
   INLINE FIGURE — GALLERY CALM
   ------------------------------------------------------------ */

.au-inline-figure {
  margin: 2rem 0;
  max-width: 420px;
}

.au-inline-frame {
  padding: 12px;
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(var(--unp-dark-rgb), .08);
  box-shadow: 8px 8px 0 rgba(var(--unp-dark-rgb), .05);
}

.au-inline-frame img {
  width: 100%;
  display: block;
  border-radius: 12px;
  filter: grayscale(10%);
}

.au-inline-caption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--unp-muted);
}

/* ------------------------------------------------------------
   HERO MEDIA FRAME — MATCHED SYSTEM
   ------------------------------------------------------------ */

.au-hero-frame {
  padding: 14px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(var(--unp-dark-rgb), .08);
  box-shadow: 10px 10px 0 rgba(var(--unp-dark-rgb), .05);
  transition:
    transform 500ms cubic-bezier(.16,1,.3,1),
    box-shadow 500ms cubic-bezier(.16,1,.3,1);
}

.au-hero-frame img {
  width: 100%;
  display: block;
  border-radius: 12px;
  filter: grayscale(10%);
  transition: filter 400ms ease;
}

@media (hover: hover) {
  .au-hero-frame:hover {
    transform: translate3d(3px,3px,0);
    box-shadow:
      inset 0 0 0 1px var(--unp-pink),
      12px 12px 0 rgba(var(--unp-pink-rgb), .25);
  }

  .au-hero-frame:hover img {
    filter: grayscale(0%);
  }
}

.au-hero-badge {
  margin-top: 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--unp-dark);
}

/* ------------------------------------------------------------
   VALUE GRID
   ------------------------------------------------------------ */

.au-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .au-value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .au-value-grid { grid-template-columns: 1fr; }
}

.au-value-card {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.7),
    rgba(255,255,255,.45)
  );
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 1.6rem;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 12px 30px -10px rgba(24,22,21,.08);
}

.au-value-label {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--unp-muted);
  margin-bottom: .5rem;
}

.au-value-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.au-value-body {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--unp-muted);
}

/* ------------------------------------------------------------
   TWO COLUMN & QUOTE
   ------------------------------------------------------------ */

.au-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 2.2rem;
}

@media (max-width: 900px) {
  .au-two-col { grid-template-columns: 1fr; }
}

.au-quote-block {
  padding: 1.8rem 2rem;
  border-radius: 18px;
  background: rgba(var(--unp-dark-rgb), .04);
  border-left: 4px solid var(--unp-pink);
}

.au-quote-mark {
  font-size: 3rem;
  line-height: 1;
  color: var(--unp-pink);
}

.au-quote-text {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: .6rem 0;
}

.au-quote-attrib {
  font-size: .85rem;
  color: var(--unp-muted);
}

/* ------------------------------------------------------------
   LISTS & LINK GRID — GALLERY CALM
   ------------------------------------------------------------ */

.au-list {
  padding-left: 1.2rem;
  margin: 1rem 0;
}

.au-list li {
  margin-bottom: .5rem;
  color: var(--unp-muted);
}

/* ------------------------------------------------------------
   LINK GRID
   ------------------------------------------------------------ */

.au-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .au-link-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   LINK CARD — GLASS EDITORIAL TILE
   ------------------------------------------------------------ */

.au-link-card {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.7),
    rgba(255,255,255,.45)
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-radius: 22px;
  padding: 1.8rem;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 12px 30px -10px rgba(24,22,21,.08);

  text-decoration: none;
  color: inherit;

  transition:
    transform 500ms cubic-bezier(.16,1,.3,1),
    box-shadow 500ms cubic-bezier(.16,1,.3,1),
    border-color 250ms ease;

  will-change: transform;
}

/* ------------------------------------------------------------
   LINK CARD CONTENT
   ------------------------------------------------------------ */

.au-link-kicker {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--unp-muted);
}

.au-link-title {
  margin: .4rem 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.au-link-body {
  font-size: .95rem;
  color: var(--unp-muted);
}

.au-link-cta {
  margin-top: .9rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--unp-pink);
}

/* ------------------------------------------------------------
   INTERACTION — INWARD CONFIDENCE
   ------------------------------------------------------------ */

@media (hover: hover) {
  .au-link-card:hover {
    transform: translate3d(3px, 3px, 0);
    border-color: rgba(var(--unp-pink-rgb), .45);
    box-shadow: 8px 8px 0 rgba(var(--unp-pink-rgb), .15);
  }
}

/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .au-link-card {
    transition: none;
    transform: none;
    will-change: auto;
  }
}

/* ------------------------------------------------------------
   SPACER
   ------------------------------------------------------------ */

.au-spacer {
  height: 2.5rem;
}

/* ============================================================
   UNP — PHOTOGRAPHERS PAGE (GLASS EDITORIAL)
   Calm · Professional · Gallery Calm Edition
   Scope: .photographers-page
   ============================================================ */

.photographers-page {
  background: var(--unp-cream);
  color: var(--unp-dark);
  font-family: var(--font-body);
}

.fp-shell {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* 1. THE MAIN GLASS CONTAINER */
.fp-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(to bottom, rgba(255,255,255,.62), rgba(255,255,255,.38));
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-radius: var(--unp-radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 22px 60px -20px rgba(24,22,21,.25);
  overflow: hidden; 
}

/* 2. MUSEUM FRAME — EDITORIAL LEFT FLOAT */
.fp-inline-image {
  max-width: 440px;
  float: left; 
  margin: 0.5rem 3rem 2rem 0;
  padding: 14px; /* The white matte */
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 
    inset 0 0 0 1px var(--unp-dark), 
    10px 10px 0 rgba(var(--unp-dark-rgb), 0.05);
  
  transition: 
    transform 500ms cubic-bezier(.16,1,.3,1), 
    box-shadow 500ms cubic-bezier(.16,1,.3,1);
}

.fp-inline-image img {
  width: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.8);
  filter: grayscale(10%); /* Subtle editorial desaturation */
  transition: filter 500ms ease;
}

/* 3. INTERACTION — SOFTENED PINK POP */
@media (hover: hover) {
  .fp-inline-image:hover {
    transform: translate3d(3px, 3px, 0); /* Gentle inward shift */
    box-shadow: 
      inset 0 0 0 1px var(--unp-pink), 
      10px 10px 0 rgba(var(--unp-pink-rgb), .25);
  }
  .fp-inline-image:hover img { 
    filter: grayscale(0%); 
  }
}

/* 4. LAYOUT UTILITIES */
.fp-card section::after { 
  content: ""; 
  display: table; 
  clear: both; 
}

@media (max-width: 850px) {
  .fp-inline-image { 
    float: none; 
    margin: 2rem auto; 
    max-width: 100%; 
  }
}

/* 5. TYPOGRAPHY & SPACING (RETAINED) */
.fp-card header { margin-bottom: 3.5rem; }
.fp-eyebrow { font-family: var(--font-head); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--unp-muted); margin-bottom: 1.2rem; }
.fp-h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.15; margin-bottom: 1.2rem; }
.fp-hero-declaration { font-family: var(--font-head); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--unp-muted); margin-bottom: 1.4rem; }
.fp-intro { max-width: 60ch; margin-bottom: 1.1rem; color: var(--unp-muted); }
.fp-h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: 1.25rem; }
.fp-body { color: var(--unp-muted); margin-bottom: 1rem; }

/* ======================================================
   UNP — FAQ PAGE (GALLERY CALM · SYSTEM MASTER)
   Editorial · Credible · Picture-desk-led
   Scope: .faq-page
   ====================================================== */

.faq-page {
  background: var(--unp-cream);
}

/* ---------- Canvas & Shell ---------- */
.faq-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding:
    clamp(6rem, 10vw, 9rem) 
    clamp(1.5rem, 3vw, 2.5rem)
    clamp(4rem, 8vw, 6rem);
}

/* ---------- Main Editorial Card ---------- */
.faq-card {
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .7),
    rgba(255, 255, 255, .45)
  );
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  
  border-radius: 32px;
  padding: clamp(2.5rem, 5vw, 4rem);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    0 22px 60px -20px rgba(24, 22, 21, .22);
}

/* ---------- Typography ---------- */
.faq-eyebrow {
  font-family: var(--font-head);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--unp-pink);
  margin-bottom: 1.2rem;
}

.faq-h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--unp-dark);
  margin-bottom: 1.4rem;
  max-width: 28ch;
}

.faq-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--unp-muted);
  max-width: 65ch;
  margin-bottom: 1.4rem;
}

/* ---------- Hero Image (Museum Matte System) ---------- */
.faq-hero {
  margin: clamp(2.5rem, 6vw, 3.8rem) 0;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--unp-dark),
    14px 14px 0 rgba(var(--unp-dark-rgb), .045);
  
  /* Inward Shift Physics */
  transition: transform 600ms var(--e-out), box-shadow 600ms var(--e-out);
  will-change: transform;
}

.faq-hero img {
  display: block;
  width: 100%;
  height: auto;
  padding: 15px; /* The Matte */
  box-sizing: border-box;
  object-fit: cover;
  filter: grayscale(18%);
  
  /* GPU Focal Pop */
  transform-origin: center center;
  transition: filter 600ms ease, transform 600ms var(--e-out);
}

@media (hover: hover) {
  .faq-hero:hover {
    transform: translate3d(3px, 3px, 0);
    box-shadow:
      inset 0 0 0 1px var(--unp-pink),
      18px 18px 0 rgba(var(--unp-pink-rgb), 0.18);
  }
  
  .faq-hero:hover img {
    filter: grayscale(0%);
    transform: scale(1.01);
  }
}

/* ---------- Content Sections ---------- */
.faq-h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin: clamp(3rem, 5vw, 4rem) 0 1.2rem;
  color: var(--unp-dark);
  letter-spacing: -0.02em;
}

.faq-body {
  font-size: .98rem;
  line-height: 1.8;
  color: var(--unp-muted);
  max-width: 70ch;
  margin-bottom: 1.2rem;
}

/* ---------- Accordion (Glass-on-Glass) ---------- */
.faq-accordion {
  margin-top: 2.5rem;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.5)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 18px 48px -12px rgba(24, 22, 21, 0.12);
}

.faq-item {
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 1.4rem 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  outline: none;

  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--unp-dark);
  transition: background .25s ease, color .25s ease;
}

.faq-item.active .faq-question {
  background: rgba(var(--unp-pink-rgb), .06);
  color: var(--unp-pink);
}

.faq-toggle {
  font-size: 1.2rem;
  transition: transform .25s ease;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.6rem 1.4rem;
}

.faq-answer p {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--unp-muted);
  margin-bottom: .9rem;
}

@media (hover: hover) {
  .faq-question:hover {
    color: var(--unp-pink);
    background: rgba(var(--unp-pink-rgb), 0.02);
  }
}

/* ---------- Links & Safety ---------- */
.faq-card a {
  color: var(--unp-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.faq-card a:hover {
  color: var(--unp-pink);
}

@media (prefers-reduced-motion: reduce) {
  .faq-hero, .faq-hero img, .faq-toggle {
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}