/* ================================================================
   GRADUATE RUNWAY 2026 — Website 3
   Colour System: White + Crimson Red
================================================================ */

:root {
  --bg: #FFFFFF;
  --bg-2: #F5F5F5;
  --bg-3: #EEEEEE;
  --bg-4: #E5E5E5;
  --cream: #111111;
  --cream-2: #444444;
  --muted: #888888;
  --gold: #DC143C;
  --gold-2: #b01030;
  --gold-3: #ff2952;
  --rule: rgba(0, 0, 0, .10);
  --rule-2: rgba(0, 0, 0, .06);

  --f-display: "Playfair Display", "Times New Roman", serif;
  --f-sans: "Montserrat", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;

  --max: 1440px;
  --pad: clamp(24px, 5vw, 80px);
  --r: 2px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.prl-loading {
  overflow: hidden;
}

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

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

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

::selection {
  background: var(--gold);
  color: var(--bg);
}

/* ── Shared helpers ─────────────────────────────────────────── */
.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.section-tag {
  display: block;
  color: var(--gold);
  margin-bottom: 10px;
}

.grp-left .section-tag {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.grp-left .section-tag::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--gold);
}

.display-h {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 60px);
  line-height: .94;
  letter-spacing: -.02em;
  margin: 0;
}

.display-h em {
  font-style: normal;
  font-weight: 700;
  color: var(--gold);
}

/* ================================================================
   PRELOADER
================================================================ */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .7s ease, visibility .7s ease;
}

#preloader.prl-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.prl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.prl-logo {
  width: 210px;
  filter: brightness(0);
  opacity: 0;
  animation: prlLogoIn .9s ease .3s forwards;
}

@keyframes prlLogoIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.prl-bar {
  width: 200px;
  height: 1px;
  background: rgba(0, 0, 0, .12);
}

.prl-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3));
  animation: prlFill 2.5s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes prlFill {
  0% {
    width: 0;
  }

  70% {
    width: 82%;
  }

  100% {
    width: 100%;
  }
}

.prl-text {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .22em;
  animation: prlLogoIn 1s ease .8s forwards;
  opacity: 0;
}

/* ================================================================
   NAVIGATION — identical to Website 1
================================================================ */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: clamp(14px, 3vw, 35px) clamp(16px, 5vw, 70px);
  background: transparent;
}

.logo-img-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  height: clamp(54px, 8vw, 100px);
  width: auto;
  max-width: clamp(120px, 22vw, 220px);
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.3s, opacity 0.3s, transform 0.3s;
}

.logo-img:hover {
  opacity: 0.85;
  transform: scale(1.04);
}

.nav-link-custom {
  color: white !important;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s;
  white-space: nowrap;
}

.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.35s ease;
}

.nav-link-custom:hover {
  color: var(--gold) !important;
}

.nav-link-custom:hover::after {
  width: 100%;
}

/* Mobile offcanvas */
.offcanvas.offcanvas-end {
  background: #080808;
  border-left: 2px solid var(--gold);
  /* border-radius: 24px 0 0 24px; */
  width: min(230px, 85vw);
}

/* Hamburger button */
.header .btn.p-0 {
  font-size: clamp(18px, 5vw, 22px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

/* ================================================================
   HERO VIDEO  — identical to Website 1
================================================================ */
.video-banner {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.video-bg-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.video-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  display: none;
}

.video-poster-img.visible {
  display: block;
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 320px;
  z-index: 5;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.65) 15%,
      rgba(0, 0, 0, 0.48) 30%,
      rgba(0, 0, 0, 0.30) 50%,
      rgba(0, 0, 0, 0.12) 72%,
      transparent 100%);
  pointer-events: none;
}

/* ================================================================
   INTRO / ABOUT
================================================================ */
.intro-section {
  background: var(--bg);
  padding: 130px var(--pad) 50px;
  overflow: hidden;
  position: relative;
}

.intro-layout {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(60px, 9vw, 140px);
  align-items: start;
}

/* LEFT */
.intro-left {
  position: sticky;
  top: 100px;
}

.intro-headline {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(46px, 6vw, 100px);
  line-height: .86;
  letter-spacing: -.03em;
  margin-bottom: 30px;
}

.intro-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  display: block;
}

.intro-gold-bar {
  width: 56px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 34px;
}

.intro-body p {
  font-size: 15px;
  line-height: 1.78;
  color: var(--cream-2);
  margin-bottom: 18px;
}

/* GFI — Organised By (W2 style) */
.gfi {
  max-width: var(--max);
  margin: 50px auto 0;
  padding-top: 60px;
  border-top: 1px solid var(--rule);
}

.gfi-tag {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .14em;
  margin-bottom: 32px;
  display: block;
}

.gfi-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.gfi-mark {
  border: 1px solid var(--cream);
  padding: 42px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gfi-mark-logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  filter: brightness(0);
}

.gfi-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cream-2);
  margin: 0 0 24px;
}

/* RIGHT — Collage */
.intro-right {
  padding-top: 10px;
}

.intro-collage {
  position: relative;
  height: clamp(520px, 70vh, 740px);
}

.ic-img {
  position: absolute;
  overflow: hidden;
  border-radius: var(--r);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .65);
}

.ic-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 9s ease;
}

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

/* Image positions */
.ic-1 {
  width: 56%;
  aspect-ratio: 3/4;
  top: 0;
  left: 0;
  z-index: 3;
}

.ic-2 {
  width: 44%;
  aspect-ratio: 3/4;
  top: 44px;
  right: 0;
  z-index: 2;
}

.ic-3 {
  width: 40%;
  aspect-ratio: 3/4;
  bottom: 0;
  left: 10%;
  z-index: 4;
}

.ic-4 {
  width: 34%;
  aspect-ratio: 3/4;
  bottom: 28px;
  right: 4%;
  z-index: 1;
  opacity: .72;
}

/* Overlay labels on collage */
.ic-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(7, 6, 10, .78);
  backdrop-filter: blur(8px);
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .22em;
  padding: 6px 12px;
  border: 1px solid rgba(220, 20, 60, .3);
}

.ic-label-2 {
  position: absolute;
  top: 14px;
  right: -14px;
  background: var(--gold);
  color: var(--bg);
  font-size: 9px;
  letter-spacing: .22em;
  padding: 6px 10px;
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  text-transform: uppercase;
}

.ic-float-text {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--f-display);
  font-size: 10px;
  letter-spacing: .35em;
  color: rgba(0, 0, 0, .07);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ic-grain {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .5;
  mix-blend-mode: overlay;
}

/* ================================================================
   INTRO / ABOUT — GRP SECTION (from W1, images left / text right)
================================================================ */
.grp-section {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.grp-glow-1 {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 55%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(220, 20, 60, .05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: grpGlow 9s ease-in-out infinite alternate;
}

.grp-glow-2 {
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 45%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(220, 20, 60, .03) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: grpGlow 12s ease-in-out infinite alternate-reverse;
}

@keyframes grpGlow {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(3%, 4%) scale(1.1);
  }
}

.grp-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  opacity: .045;
  pointer-events: none;
  z-index: 1;
}

.grp-side-label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-size: 8px;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .18);
  white-space: nowrap;
  z-index: 3;
  font-weight: 600;
  font-family: var(--f-display);
}

.grp-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

/* RIGHT column (text) — displayed on the right */
.grp-left {
  padding: 100px 80px 70px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  position: relative;
  isolation: isolate;
}

.grp-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/DSCF291-copy.webp');
  background-size: cover;
  background-position: center top;
  opacity: 0.055;
  z-index: -1;
  pointer-events: none;
}

.grp-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.grp-h1 {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 82px);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--cream);
  line-height: .9;
  letter-spacing: -.02em;
  margin: 0;
}

.grp-gold-rule {
  width: 48px;
  height: 3px;
  background: var(--cream);
  margin: 18px 0 0;
}

.grp-h2 {
  font-family: var(--f-display);
  font-size: clamp(60px, 8vw, 130px);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  color: var(--gold);
  line-height: .85;
  letter-spacing: -.03em;
  margin: 0;
}

.grp-h2 em {
  font-style: normal;
}

.grp-glass p {
  /* font-family: var(--f-mono); */
  font-size: 15px;
  line-height: 1.85;
  color: var(--cream-2);
  margin: 0 0 14px;
}

.grp-glass p:last-child {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════
   RIGHT COLUMN — GRID COLLAGE
══════════════════════════════════════════════════ */

.grp-right {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: white;
}

/* Subtle grain texture */
/* .grp-right::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px;
  opacity: .035;
  mix-blend-mode: overlay;
} */

/* ── Grid container ── */
.grp-coll {
  position: absolute;
  inset: 32px 20px 32px 12px;
  display: grid;
  grid-template-columns: 1.15fr 0.46fr 0.46fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  z-index: 3;
}

/* ── Base cell ── */
.gc-cell {
  position: relative;
  overflow: hidden;
  /* box-shadow:
    0 32px 64px rgba(0,0,0,.8),
    0 6px 20px  rgba(0,0,0,.55); */
}

.gc-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* filter: contrast(1.12) saturate(.65) brightness(.85); */
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1),
    filter .8s ease;
}

.gc-cell:hover img {
  transform: scale(1.05);
  filter: contrast(1.08) saturate(.8) brightness(.92);
}

/* ── Hero — spans both rows on the left ── */
.gc-hero {
  grid-column: 1;
  grid-row: 1 / 3;
  /* border: 1px solid rgba(255,255,255,.18); */
}

/* ── Top-right — spans both right columns ── */
.gc-c2 {
  grid-column: 2 / 4;
  grid-row: 1;
}

/* ── Bottom-right left cell ── */
.gc-c3 {
  grid-column: 2;
  grid-row: 2;
}

/* ── Bottom-right right cell ── */
.gc-c4 {
  grid-column: 3;
  grid-row: 2;
}

/* ── Cell footer labels ── */
.gc-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 12px 12px;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .88) 0%,
      rgba(0, 0, 0, .52) 50%,
      transparent 100%);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* ── Top-positioned label (used on c2) ── */
.gc-foot--top {
  top: 0;
  bottom: auto;
  padding: 12px 12px 28px;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .3) 60%,
      transparent 100%);
  align-items: flex-start;
}

.gc-issue {
  color: rgba(255, 255, 255, .4);
  font-size: 8.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.gc-tag {
  font-size: 8.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  padding: 4px 9px;
}


/* ══════════════════════════════════════════════════
   GRID COLLAGE — KEYFRAMES
══════════════════════════════════════════════════ */

@keyframes gcHeroIn {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gcC2In {
  0% {
    opacity: 0;
    transform: translateX(60px) scale(.94);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes gcC3In {
  0% {
    opacity: 0;
    transform: translateX(60px) translateY(40px) scale(.94);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes gcAccentIn {
  0% {
    opacity: 0;
    transform: rotate(-5deg) scale(.7);
  }

  100% {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
}

@keyframes gcFloat1 {

  0%,
  100% {
    transform: translateY(0px);
  }

  45% {
    transform: translateY(-9px);
  }

  70% {
    transform: translateY(-3px);
  }
}

@keyframes gcFloat2 {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes gcFloat3 {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(8px);
  }
}

@keyframes gcAccentFloat {

  0%,
  100% {
    transform: rotate(-5deg) translateY(0px);
  }

  50% {
    transform: rotate(-5deg) translateY(-10px);
  }
}

/* ── Apply animations ── */
.gc-hero {
  animation:
    gcHeroIn 1.4s cubic-bezier(.22, 1, .36, 1) .15s both,
    gcFloat1 9s ease-in-out 1.6s infinite;
}

.gc-c2 {
  animation:
    gcC2In 1.4s cubic-bezier(.22, 1, .36, 1) .4s both,
    gcFloat2 10s ease-in-out 1.85s infinite;
}

.gc-c3 {
  animation:
    gcC3In 1.4s cubic-bezier(.22, 1, .36, 1) .6s both,
    gcFloat3 12s ease-in-out 2.05s infinite;
}

.gc-c4 {
  animation:
    gcC3In 1.4s cubic-bezier(.22, 1, .36, 1) .75s both,
    gcFloat2 11s ease-in-out 2.2s infinite;
}

/* ── Vline grows down */
@keyframes grpVlineGrow {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/* ── Watermark drifts up */
@keyframes grpWmFade {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

/* ── Gold rule expands ── */
@keyframes grpRuleExpand {
  from {
    transform: scaleX(0);
    opacity: 0;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Watermark */
.grp-wm {
  position: absolute;
  bottom: 5%;
  right: 4%;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.2vw, 52px);
  font-weight: 900;
  color: rgba(255, 255, 255, .055);
  line-height: .82;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-align: right;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  animation: grpWmFade 2.4s ease 1.6s both;
}

/* Vertical accent line */
/* .grp-vline {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 2px;
  transform-origin: top;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--gold) 15%,
    var(--gold) 85%,
    transparent 100%);
  z-index: 7;
  animation: grpVlineGrow 1.6s cubic-bezier(.22,1,.36,1) .1s both;
} */

/* ── Meta strip ── */
.grp-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 17, 17, .15);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--cream-2);
}

.grp-meta-sep {
  color: rgba(17, 17, 17, .3);
}

/* ── Text panel — enhanced reveals ── */
.grp-gold-rule.reveal {
  transform-origin: left center;
  animation: grpRuleExpand 1s cubic-bezier(.22, 1, .36, 1) .55s both;
  opacity: 0;
}

.grp-gold-rule.reveal.visible {
  opacity: 1;
}

.grp-left .grp-h1.reveal {
  transition-duration: 1.1s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.grp-left .grp-h2.reveal {
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  transition-delay: .12s;
}

.grp-left .grp-glass.reveal {
  transition-delay: .28s;
}

.grp-left .section-tag.reveal {
  transition-delay: 0s;
}

/* ================================================================
   ORGANISED BY — red two-panel
================================================================ */
.grp-org {
  background-image: radial-gradient(ellipse 55% 90% at 18% 50%, rgba(255, 255, 255, .06) 0%, transparent 70%), linear-gradient(rgb(220 20 60 / 93%), rgb(220 20 60 / 90%)), url(../poweredbyGFI/1.webp);
  background-attachment: scroll, scroll, fixed;
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, center center;
  background-repeat: no-repeat;
  background-color: var(--gold);
  padding: 56px clamp(28px, 5vw, 80px);
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.grp-org::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
  opacity: .05;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.grp-org-inner {
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 275px 1fr;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* ── Left panel ── */
.grp-org-panel-l {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-right: 35px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  animation: orgInL .85s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes orgInL {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.grp-org-eyebrow {
  color: rgb(255, 255, 255);
  font-size: 14px;
  letter-spacing: .30em;
  text-transform: uppercase;
  display: block;
  text-align: start;
}

.grp-org-logo {
  width: 250px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  /* opacity: .9; */
  /* animation: orgLogoFloat 6s ease-in-out infinite; */
}

@keyframes orgLogoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

.grp-org-est {
  color: rgb(177 25 57);
  font-size: 8px;
  letter-spacing: .20em;
  text-transform: uppercase;
}

/* ── Right panel ── */
.grp-org-panel-r {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-left: 56px;
  animation: orgInR .85s cubic-bezier(.22, 1, .36, 1) .14s both;
}

@keyframes orgInR {
  from {
    opacity: 0;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.grp-org-name {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 60px);
  line-height: .94;
  letter-spacing: -.02em;
  /* color: rgba(255, 255, 255, .88); */
  color: white;
  margin: 0;
}

.grp-org-name em {
  font-style: normal;
  font-weight: 300;
  color: #fff;
}

.grp-org-rule {
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, .22);
  animation: orgRuleGrow .9s cubic-bezier(.22, 1, .36, 1) .55s forwards;
}

@keyframes orgRuleGrow {
  to {
    width: 100%;
  }
}

.grp-org-body {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  gap: 0 40px
}

.grp-org-para {
  font-size: 15px;
  line-height: 1.78;
  color: rgb(255, 255, 255);
  margin: 0;
  font-weight: 500;
}

.grp-org-body-wrap {
  position: relative;
}

.grp-org-readmore {
  display: none;
}

@media (max-width: 768px) {
  .grp-org-body-wrap {
    max-height: 140px;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.22, 1, .36, 1);
  }

  .grp-org-body-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, rgb(210 18 55));
    pointer-events: none;
    transition: opacity .3s;
  }

  .grp-org-body-wrap.expanded {
    max-height: 600px;
  }

  .grp-org-body-wrap.expanded::after {
    opacity: 0;
  }

  .grp-org-readmore {
    display: inline-flex;
  }
}

.grp-org-readmore {
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: none;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}

.grp-org-readmore::after {
  content: '→';
  font-size: 13px;
  letter-spacing: 0;
  transition: transform .25s;
}

.grp-org-readmore:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

.grp-org-readmore:hover::after {
  transform: translateX(4px);
}

.grp-org-readmore[aria-expanded="true"]::after {
  content: '↑';
  transform: none;
}

@media (max-width: 960px) {}

@media (max-width: 600px) {
  .grp-org-hl-heavy {
    font-size: clamp(30px, 9vw, 52px);
  }
}

@media (max-width: 1100px) {
  .grp-inner {
    grid-template-columns: 1fr;
  }

  .grp-right {
    min-height: 540px;
  }

  .grp-left {
    padding: 80px 48px;
  }
}

@media (max-width: 600px) {
  .grp-left {
    padding: 64px 24px;
    gap: 28px;
  }

  .grp-right {
    min-height: 380px;
  }

  .grp-side-label {
    display: none;
  }

  .grp-h2 {
    font-size: clamp(38px, 10vw, 72px);
    -webkit-text-stroke: 1px rgba(220, 20, 60, .1);
  }
}

/* ================================================================
   SERVICES
================================================================ */
.services-section {
  background: #fafafad1;
  padding: 64px var(--pad) 64px;
  /* border-top: 1px solid var(--rule); */
}

.svc-header {
  max-width: var(--max);
  margin: 0 auto 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.svc-header-left {
  flex: 1;
}

.svc-header-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 28px;
}

.svc-cd-heading {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0;
  opacity: 0.75;
  transition-delay: 0s;
}

.svc-cd-heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  display: inline-block;
  /* animation: svcEmPulse 3s ease-in-out infinite 1.5s; */
}

.svc-sub-label {
  display: block;
  color: var(--gold);
  font-size: 22px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.svc-heading {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 60px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
}

.svc-heading.reveal {
  transform: translateY(40px) skewY(2deg);
  transition-duration: 1.3s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.12s;
}

.svc-heading.reveal.revealed {
  transform: translateY(0) skewY(0deg);
}

.svc-heading em {
  font-style: normal;
  font-weight: 700;
  color: var(--gold);
  display: inline-block;
  /* animation: svcEmPulse 3s ease-in-out infinite 1.5s; */
}

@keyframes svcEmPulse {

  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 0 transparent;
  }

  50% {
    opacity: 0.82;
    text-shadow: 0 0 22px rgba(212, 175, 55, 0.55),
      0 0 50px rgba(212, 175, 55, 0.18);
  }
}

.svc-cd-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin: 0 0 10px;
  transition-delay: 0.22s;
}

/* Countdown */
.countdown-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2vw, 24px);
}

.cd-block {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 6px;
  min-width: 60px;
}

.cd-num {
  font-family: var(--f-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -.02em;
  text-align: center;
}

.cd-label {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .2em;
}

.cd-sep {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 36px);
  color: rgba(220, 20, 60, .45);
  margin-bottom: 18px;
  flex-shrink: 0;
}

/* Services — all 6 cards always visible */
.svc-more-wrap {
  display: none;
}

.svc-extra {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
}

.svc-extra.svc-show {
  display: flex !important;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-extra.svc-show.svc-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.svc-more-btn {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 14px 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .25s ease, color .25s ease;
}

.svc-more-btn:hover,
.svc-more-btn:active {
  background: var(--gold);
  color: #fff;
}

.svc-more-btn i {
  transition: transform .3s ease;
}

.svc-more-btn.is-open i {
  transform: rotate(180deg);
}

/* 6-card grid, 3×2 */
.svc-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.svc-card {
  position: relative;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
  color: #fff;
  border-radius: var(--r);
  isolation: isolate;
  cursor: default;
}

.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, rgba(10, 10, 10, .15) 0%, rgba(10, 10, 10, .0) 38%, rgba(10, 10, 10, .82) 100%);
  transition: background .45s ease;
}

.svc-card:hover::before {
  background: linear-gradient(155deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .82) 38%, rgba(0, 0, 0, .97) 100%);
}

.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(220, 20, 60, 0);
  transition: border-color .4s;
}

.svc-card:hover::after {
  border-color: rgba(220, 20, 60, .32);
}

.svc-card-top {
  color: white;
  font-size: 9px;
  letter-spacing: .22em;
  position: relative;
  z-index: 2;
}

.svc-card-body {
  position: relative;
  z-index: 2;
}

.svc-card-body h3 {
  font-family: var(--f-display);
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  transition: margin-bottom .5s cubic-bezier(.4, 0, .2, 1);
}

.svc-card:hover .svc-card-body h3 {
  margin-bottom: 7px;
}

/* Description collapses to zero height by default so the heading
   sits at the base of the card; hovering grows the row, which pushes
   the heading upward while the copy fades in beneath it. */
.svc-card-desc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.4, 0, .2, 1);
}

.svc-card:hover .svc-card-desc {
  grid-template-rows: 1fr;
}

.svc-card-desc>p {
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}

.svc-card:hover .svc-card-desc>p {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s .15s ease, transform .4s .15s ease;
}

/* ================================================================
   DESIGNERS — identical to Website 2
================================================================ */
.designers {
  background: var(--bg);
  padding: 60px 0;
  overflow: hidden;
  /* border-top: 1px solid var(--rule); */
}

.designers-head {
  max-width: var(--max);
  margin: 0 auto 50px;
  padding: 0 var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.mq-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.mq-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--cream);
  background: transparent;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.mq-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: scale(1.07);
}

.mq-btn:active {
  transform: scale(.95);
}

.designers-sub {
  font-family: var(--f-display);
  font-size: 19px;
  line-height: 1.4;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  text-align: right;
}

/* Marquee outer — positions nav arrows over the track */
.marquee-outer {
  position: relative;
}

.marquee-outer .mq-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(12px, 3vw, 40px);
  z-index: 10;
  pointer-events: none;
}

.marquee-outer .mq-nav .mq-btn {
  pointer-events: all;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.marquee-outer .mq-nav .mq-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* Marquee */
.marquee {
  overflow: hidden;
  padding: 12px 0;
}

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marq 30s linear infinite;
}

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

@keyframes marq {
  from {
    transform: translateX(var(--mq-nudge, 0px));
  }

  to {
    transform: translateX(calc(-50% + var(--mq-nudge, 0px)));
  }
}

.mcard {
  width: 280px;
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mcard-img-wrap {
  position: relative;
  overflow: hidden;
}

.mcard-img-wrap>img {
  width: 100%;
  aspect-ratio: 4 / 7;
  object-fit: cover;
  filter: contrast(1.02) saturate(.95);
  transition: filter .35s, transform .6s;
  display: block;
}

.mcard:hover .mcard-img-wrap>img {
  transform: scale(1.02);
  /* filter: contrast(1.1) saturate(1.1); */
}

.mcard-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top,
      rgba(10, 6, 4, 0.93) 0%,
      rgba(10, 6, 4, 0.55) 55%,
      transparent 100%);
  padding: 52px 14px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: padding .4s ease;
}

.mcard:hover .mcard-overlay {
  padding-bottom: 20px;
}

.designer-avatar {
  width: 62px;
  height: 62px;
  background: var(--gold);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform .4s ease, box-shadow .4s ease;
}

.designer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9);
  transition: filter .4s ease, transform .4s ease;
}

.mcard:hover .designer-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(220, 20, 60, .45), 0 6px 22px rgba(0, 0, 0, .60);
}

.mcard:hover .designer-avatar img {
  filter: saturate(1.05);
  transform: scale(1.06);
}

.mcard-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mcard-info .dname {
  font-family: var(--f-display);
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcard-info .dschool {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--gold);
  text-transform: uppercase;
}

/* ================================================================
   GALLERY — BTS editorial masonry grid (W2 style)
================================================================ */
.gallery {
  background: var(--bg);
  padding: 60px 0 100px;
  border-top: 1px solid var(--rule);
}

.gallery-head {
  max-width: var(--max);
  margin: 0 auto 40px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: end;
}

.gallery-sub {
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1.45;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  /* max-width: 420px; */
  text-align: end;
}

/* ── Masonry columns — no rigid boxes ── */
.gc-masonry {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  columns: 4;
  column-gap: 10px;
}

.gc-tile {
  position: relative;
  display: block;
  break-inside: avoid;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--bg-3);
}

/* All images stacked, fade between them */
.gc-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.gc-tile img.is-active {
  opacity: 1;
}

.gc-tile:hover img.is-active {
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 8s ease;
}

/* ── Three proper shapes — every tile is one of portrait / landscape /
      square, each a fixed height (image fills it via object-fit: cover,
      no gaps). Every group of 3 tiles (one column) contains exactly one
      portrait + one square + one landscape, so 480+260+370 = 1110px on
      every column at every breakpoint — a flat bottom edge throughout. ── */
.gc-portrait {
  height: 480px;
}

.gc-landscape {
  height: 260px;
}

.gc-square {
  height: 370px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .gc-masonry {
    columns: 3;
  }
}

@media (max-width: 640px) {
  .gc-masonry {
    columns: 2;
  }
}

@media (max-width: 400px) {
  .gc-masonry {
    columns: 2;
  }
}


/* ── Tile caption label ── */
.gc-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  opacity: 1;
  z-index: 4;
  pointer-events: none;
}

.gc-caption span {
  color: rgba(255, 255, 255, .88);
  font-size: 8px;
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  padding-left: 14px;
}

.gc-caption span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 1px;
  background: var(--gold);
}

/* ================================================================
   PRESS — Light Editorial
================================================================ */
.press-section {
  background: #ffffff;
  padding: 50px var(--pad) 60px;
  border-top: 1px solid var(--rule);
  position: relative;
}

.press-section .section-tag {
  color: var(--muted);
}

.press-section .display-h {
  color: var(--cream);
}

.press-header {
  max-width: var(--max);
  margin: 0 auto 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.press-header-left {
  flex: 1;
}

/* Stats cluster */
.press-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.ps-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.ps-num {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.2vw, 46px);
  color: var(--cream);
  line-height: 1;
  font-weight: 700;
}

.ps-sup {
  color: var(--gold);
  font-size: .6em;
  vertical-align: super;
}

.ps-label {
  font-family: var(--f-mono);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.ps-divider {
  width: 1px;
  height: 44px;
  background: var(--rule);
  flex-shrink: 0;
}

/* Ticker */
.press-ticker {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  margin-bottom: 4px;
}

.press-ticker-inner {
  display: flex;
  gap: 32px;
  width: max-content;
  align-items: center;
  white-space: nowrap;
  animation: tickerMove 38s linear infinite;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(15px, 2vw, 20px);
  color: var(--cream-2);
  letter-spacing: .02em;
}

.press-ticker:hover .press-ticker-inner {
  animation-play-state: paused;
}

@keyframes tickerMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.tk-dot {
  color: var(--gold);
  font-size: 7px;
  font-style: normal;
  opacity: .55;
}

/* Logo Ticker */
.logo-ticker {
  overflow: hidden;
  /* border-top: 1px solid var(--rule); */
  /* border-bottom: 1px solid var(--rule); */
  /* padding: 24px 0; */
  margin-bottom: 4px;
  background: transparent;
}

.logo-ticker-inner {
  display: flex;
  gap: 64px;
  width: max-content;
  align-items: center;
  animation: logoTickerMove 28s linear infinite;
}

.logo-ticker:hover .logo-ticker-inner {
  animation-play-state: paused;
}

.logo-slide {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.6);
  /* opacity: 0.7; */
  transition: opacity 0.3s, filter 0.3s;
  flex-shrink: 0;
}

.logo-slide:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

@keyframes logoTickerMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ── Editorial Grid ──────────────────────────────────────── */
.press-collage {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 278px;
  gap: 10px;
}

/* Hidden extras */
.pc-extra {
  display: none;
}

/* Card — full-image editorial tile */
.pc-clip {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Hero: 2 cols wide, 2 rows tall */
.pc-clip--hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

/* Image fills its grid cell */
.pc-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .85s cubic-bezier(.25, .46, .45, .94);
}

.pc-clip:hover .pc-img {
  transform: scale(1.07);
}

/* Full-card overlay gradient */
.pc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .90) 0%,
      rgba(0, 0, 0, .32) 52%,
      rgba(0, 0, 0, .06) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  transition: background .4s ease;
}

.pc-clip:hover .pc-overlay {
  background: linear-gradient(to top,
      rgba(0, 0, 0, .96) 0%,
      rgba(0, 0, 0, .48) 58%,
      rgba(0, 0, 0, .14) 100%);
}

/* Publication badge — glass pill top-left */
.pc-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(10px, 1vw, 13px);
  color: #fff;
  letter-spacing: .04em;
  background: var(--gold);
  padding: 5px 13px 6px;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

/* Content cluster — bottom of card */
.pc-content {
  position: relative;
  z-index: 2;
}

.pc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.pc-pub {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
}

.pc-dot-sep {
  color: var(--gold);
  font-size: 5px;
  opacity: .5;
  flex-shrink: 0;
}

.pc-date {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .42);
}

.pc-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.33;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0 0 0;
  transition: color .3s ease;
}

.pc-clip--hero .pc-title {
  font-size: clamp(18px, 1.9vw, 26px);
  margin-bottom: 12px;
}

.pc-clip:hover .pc-title {
  color: rgba(255, 255, 255, .92);
}

/* Excerpt — hidden on small cards, always visible on hero; revealed on hover */
.pc-excerpt {
  font-size: 12.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .52);
  margin-top: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s ease, opacity .4s ease;
}

.pc-clip--hero .pc-excerpt {
  max-height: 100px;
  opacity: .72;
}

.pc-clip:hover .pc-excerpt {
  max-height: 90px;
  opacity: .65;
}

/* Read link — slides up on hover */
.pc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, gap .25s ease;
}

.pc-clip--hero .pc-link {
  opacity: .88;
  transform: none;
}

.pc-clip:hover .pc-link {
  opacity: 1;
  transform: translateY(0);
  gap: 10px;
}

/* View More */
.press-more-wrap {
  max-width: var(--max);
  margin: 20px auto 0;
  text-align: center;
}

.press-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 34px;
  border: 1px solid var(--rule);
  color: var(--cream-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: border-color .3s, color .3s, background .3s;
}

.press-more-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(220, 20, 60, .08);
}

.pmb-icon {
  font-size: 10px;
  transition: transform .35s ease;
}

.press-more-btn.expanded .pmb-icon {
  transform: rotate(180deg);
}

/* ================================================================
   PRESS — Magazine / Newspaper Editorial Layout
================================================================ */

/* Warm cream background like a newspaper */
.press-section {
  background: #ffffff !important;
}

.logo-ticker {
  background: transparent !important;
}

/* 3-column equal grid */
.press-mag {
  max-width: var(--max);
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* border-top: 1px solid #bbb; */
}

/* Each column */
.pm-col {
  padding: 26px 28px 32px;
  border-right: 1px solid #ddd;
}

.pm-col:last-child {
  border-right: none;
}

/* ── Column header ─────────────────────────────────────── */
.pm-col-head {
  margin-bottom: 20px;
}

.pm-col-title {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #111;
  margin: 0 0 11px;
}

/* Thin gray rule under title — matches image */
.pm-col-rule {
  width: 100%;
  height: 1px;
  background: #bbb;
}

/* Middle column subtitle */
.pm-col-subtitle {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.65;
  color: #777;
  margin: 10px 0 0;
}

/* ── Article card ────────────────────────────────────────── */
.pm-card {
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid #ddd;
}

.pm-card:last-child {
  /* border-bottom: none; */
  margin-bottom: 0;
  /* padding-bottom: 0; */
}

/* Thumbnail */
.pm-card-thumb {
  overflow: hidden;
  margin-bottom: 13px;
}

.pm-card-thumb img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .8s ease;
}

.pm-card-thumb--lg img {
  aspect-ratio: 3/2;
}

.pm-card-thumb--mini img {
  aspect-ratio: 16/9;
}

.pm-card:hover .pm-card-thumb img {
  transform: scale(1.04);
}

/* Date — small gray, no caps */
.pm-date {
  display: block;
  font-family: var(--f-sans);
  font-size: 11px;
  color: #999;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 7px;
}

/* Article title — bold serif, like the image */
.pm-card-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #111;
  margin-bottom: 10px;
  transition: color .25s;
}

.pm-card-title--lg {
  font-size: 26px;
}

.pm-card:hover .pm-card-title {
  color: var(--gold);
}

/* Excerpt */
.pm-card-excerpt {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.72;
  color: #666;
  margin-bottom: 12px;
}

/* "Read more ○" — plain text with icon, matches image */
.pm-read-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  transition: color .25s;
}

.pm-read-more i {
  font-size: 13px;
  transition: transform .25s;
}

.pm-read-more:hover {
  color: var(--gold);
}

.pm-read-more:hover i {
  transform: translateX(3px);
}

.pm-read-more--sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: color .25s;
}

.pm-read-more--sm:hover {
  color: var(--gold);
}

/* ── Right column — BIG newspaper headline ─────────────── */
.pm-col-tag {
  display: block;
  font-family: var(--f-sans);
  font-size: 11px;
  color: #999;
  margin-bottom: 10px;
}

/* The huge headline — matches the prominent display in image */
.pm-editorial-heading {
  font-family: var(--f-display);
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #111;
  margin: 0 0 22px;
}

.pm-editorial-panel {
  margin-bottom: 6px;
}

/* "Employed people" style sub-label */
.pm-editorial-sub {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  color: #111;
  letter-spacing: .02em;
  margin-bottom: 8px;
}

.pm-editorial-text {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.72;
  color: #666;
  margin-bottom: 0;
}

/* Thin horizontal rule */
.pm-rule {
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 16px 0;
}

/* ── Author / publication profiles (matches image exactly) ── */
.pm-author {
  margin-bottom: 2px;
}

.pm-author-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* Circular avatar */
.pm-author-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #ddd;
}

.pm-author-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-author-name {
  display: block;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}

.pm-author-role {
  display: block;
  font-family: var(--f-sans);
  font-size: 12px;
  font-style: italic;
  color: #888;
  margin-top: 1px;
}

.pm-author-quote {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.7;
  color: #666;
  margin: 0;
}

/* Mini image card — bottom of right column */
.pm-card--mini {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.pm-card--mini .pm-card-thumb {
  margin-bottom: 8px;
}

.pm-card--mini .pm-card-title {
  font-size: 22px;
  margin-bottom: 10px;
  margin-top: 4px;
}

/* ── Extra cards (View More) ─────────────────────────────── */
.pm-extras {
  max-width: var(--max);
  margin: 0 auto;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  /* border-top: 1px solid #ddd; */
}

.pm-extras.is-open {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pm-extra-card {
  padding: 26px 28px;
  border-right: 1px solid #ddd;
  opacity: 0;
  transition: opacity .5s ease;
}

.pm-extra-card:last-child {
  border-right: none;
}

.pm-extra-card.visible {
  opacity: 1;
}

.pm-extra-card .pm-card-thumb {
  margin-bottom: 13px;
}

/* Publication badge */
.pm-badge {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 9px;
}

/* ── Stagger reveal delays ───────────────────────────────── */
.pm-col-a .pm-card:nth-of-type(1) {
  transition-delay: .08s;
}

.pm-col-a .pm-card:nth-of-type(2) {
  transition-delay: .18s;
}

.pm-col-b .pm-card:nth-of-type(1) {
  transition-delay: .10s;
}

.pm-col-b .pm-card:nth-of-type(2) {
  transition-delay: .20s;
}

.pm-col-c .pm-author:nth-of-type(1) {
  transition-delay: .14s;
}

.pm-col-c .pm-author:nth-of-type(2) {
  transition-delay: .24s;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .press-mag {
    grid-template-columns: 1fr 1fr;
  }

  .pm-col-c {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid #ddd;
  }

  .pm-extras {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .pm-col {
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding: 22px 0;
  }

  .pm-col-c {
    grid-column: auto;
    border-top: none;
  }

  .pm-extras {
    grid-template-columns: 1fr;
  }

  .pm-extra-card {
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
}

/* ================================================================
   TEXT TICKER SECTION
================================================================ */
@keyframes tk-scroll {
  0% {
    transform: translate3d(25%, 0, 0);
  }

  100% {
    transform: translate3d(-25%, 0, 0);
  }
}

.tk-group {
  width: 100vw;
  height: 100%;
  min-height: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
  position: static;
  z-index: auto;
}

.tk-row {
  width: 400vw;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  transform: translate3d(25%, 0, 0);
  white-space: nowrap;
  animation: tk-scroll 30s linear infinite;
}

.tk-row:hover {
  animation-play-state: paused;
}

.tk-row:nth-child(even) {
  animation-direction: reverse;
}

.tk-row span {
  font-family: 'IBM Plex Sans', sans-serif;
  color: transparent;
  font-size: clamp(48px, 8vw, 100px);
  font-weight: 700;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.12);
  padding: 0 20px;
}

@keyframes tk-logo-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.tk-logos {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  gap: 60px;
  padding: 0 30px;
  white-space: nowrap;
  animation: tk-logo-scroll 30s linear infinite;
}

.tk-logos-rev {
  animation-direction: reverse;
}

.tk-logos img {
  height: 100px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  /* filter: brightness(0) opacity(0.55); */
  flex-shrink: 0;
}

/* ================================================================
   PRESS — Scattered Photo Collage + Ticker Background
================================================================ */
.press-head {
  position: relative;
  z-index: 4;
  max-width: var(--max);
  margin: 0 auto 80px;
  display: block;
}

.press-sub-label {
  display: inline-block;
  color: var(--gold);
  font-size: 22px;
  letter-spacing: .22em;
  text-transform: uppercase;
  background-color: #ffffff;
  padding: 3px 14px;
  margin-bottom: 6px;
}

.press-main-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.8vw, 60px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--cream);
  display: inline;
  background-color: #ffffff;
  padding: 4px 14px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.press-main-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--gold);
}

.pc-wrap {
  background: #ffffff;
  padding: 62px var(--pad) 1400px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
}

.pc-heading {
  position: relative;
  z-index: 4;
  max-width: var(--max);
  margin: 0 auto 48px;
}

.pc-title {
  font-family: var(--f-display);
  font-size: clamp(42px, 5.5vw, 86px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--cream);
}

.pc-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

/* ── Logo ticker — full-width band at heading level ── */
.pc-logo-ticker {
  position: absolute;
  top: 119px;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 3;
  /* above bg, below heading (z-index 4) */
  pointer-events: none;
}

.pc-logo-track {
  display: flex;
  align-items: center;
  gap: 0;
  /* spacing handled per-image via margin-right */
  width: max-content;
  height: 100%;
  animation: pcLogoScroll 12s linear infinite;
}

.pc-logo-track img {
  height: 48px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  /* make logos black and remove any background */
  /* filter: brightness(0); */
  /* opacity: 0.82; */
  margin-right: 72px;
  /* uniform gap — same after EVERY logo including last, so loop is seamless */
}

@keyframes pcLogoScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Ticker fills the section background absolutely */
.pc-ticker-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.pc-ticker-bg .tk-group {
  width: 100vw;
  height: 100%;
  min-height: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
  position: static;
  z-index: auto;
}

/* Photos float above the ticker */
/* Fixed pixel canvas on desktop so the collage never rescales/shifts
   when the browser window or zoom level changes — screens narrower
   than 1440px simply crop the outer edges (see .pc-wrap overflow:hidden),
   instead of recomputing every photo's position. */
.pc-stage {
  position: relative;
  z-index: 3;
  width: 1440px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  height: 2232px;
}

.pc-stage.pc-open {
  padding-bottom: 82%;
}

.pc-more-wrap {
  text-align: center;
  margin-top: -10px;
}

.pc-more-btn {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 48px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.pc-more-btn:hover {
  background: var(--gold);
  color: #000;
}

.pc-photo {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
  border-radius: 15px;
}

/* .pc-photo::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #000000;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
} */

.pc-photo:hover {
  transform: scale(1.04);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  z-index: 100;
}

.pc-photo:hover::after {
  opacity: 1;
}

.pc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-p7 img,
.pc-p8 img,
.pc-p11 img {
  object-position: top;
}

/* hidden extras — after .pc-photo in source so opacity transition wins */
.pc-extra {
  display: none;
}

/* ── Row 1 — top (4 images) ── */
.pc-p1 {
  left: 17%;
  top: 48%;
  width: 57%;
  aspect-ratio: 16/9;
  z-index: 8;
}

.pc-p2 {
  left: 34%;
  top: 28%;
  width: 58%;
  aspect-ratio: 16/9;
  z-index: 7;
}

.pc-p3 {
  left: 15%;
  top: 20%;
  width: 22%;
  /* aspect-ratio: 4/5; */
  z-index: 5;
}

.pc-p4 {
  left: 3%;
  top: 67%;
  width: 54%;
  aspect-ratio: 16/9;
  z-index: 11;
}

/* ── Row 2 — middle (4 images) ── */
.pc-p5 {
  left: 16%;
  top: 96%;
  width: 32%;
  /* aspect-ratio: 7/8; */
  z-index: 13;
}

.pc-p6 {
  left: 70%;
  top: 6%;
  width: 23%;
  /* aspect-ratio: 2/3; */
  z-index: 6;
}

.pc-p7 {
  left: 43%;
  top: 118%;
  width: 27%;
  /* aspect-ratio: 4/5; */
  z-index: 15;
}

.pc-p8 {
  left: 66%;
  top: 58%;
  width: 24%;
  /* aspect-ratio: 3/4; */
  z-index: 9;
}

/* ── Row 3 — bottom (3 images) ── */
.pc-p9 {
  left: 46%;
  top: 82%;
  width: 55%;
  aspect-ratio: 16/9;
  z-index: 12;
}

.pc-p10 {
  left: 67%;
  top: 134%;
  width: 23%;
  /* aspect-ratio: 3/4; */
  z-index: 17;
}

.pc-p11 {
  left: 68%;
  top: 101%;
  width: 27%;
  /* aspect-ratio: 3/4; */
  z-index: 14;
}

/* ── Row 4 — new additions, packed into the same dense collage ── */
.pc-p12 {
  left: 8%;
  top: -1%;
  width: 67%;
  aspect-ratio: 16/9;
}

.pc-p13 {
  left: 18%;
  top: 126%;
  width: 26%;
  /* aspect-ratio: 3/4; */
  z-index: 16;
}

.pc-p14 {
  left: 50%;
  top: 142%;
  width: 21%;
  aspect-ratio: 3/4;
  z-index: 18;
}

/* ── Making Headlines: scattered layout is preserved on mobile.
   Only the bottom padding is reduced — see end-of-file overrides. ── */

/* ================================================================
   PRESS 2 — Light Bento Grid
================================================================ */
.pr2-wrap {
  background: #ffffff;
  padding: 72px var(--pad) 80px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

/* ── Header ── */
.pr2-header {
  max-width: var(--max);
  margin: 0 auto 48px;
}

.pr2-tag {
  display: inline-block;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pr2-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pr2-heading {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  color: #0a0a0a;
  line-height: 1.1;
  margin: 0;
}

.pr2-heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.pr2-meta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-bottom: 8px;
}

.pr2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pr2-stat-num {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  color: #0a0a0a;
  line-height: 1;
}

.pr2-stat-num sup {
  font-size: .5em;
  color: var(--gold);
  vertical-align: super;
}

.pr2-stat-label {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .4);
}

.pr2-divider-v {
  width: 1px;
  height: 44px;
  background: rgba(0, 0, 0, .12);
}

.pr2-rule {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, .08);
  margin-top: 28px;
}

/* ── Bento Grid ── */
.pr2-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 10px;
}

/* Tall feature tile spans both rows */
.pr2-tile--tall {
  grid-row: 1 / 3;
}

/* ── Tile ── */
.pr2-tile {
  position: relative;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .3s ease;
}

.pr2-tile:hover {
  border-color: var(--gold);
}

/* Corner brackets */
.pr2-tile::before,
.pr2-tile::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 3;
}

.pr2-tile::before {
  top: 8px;
  left: 8px;
  border-width: 1px 0 0 1px;
}

.pr2-tile::after {
  bottom: 8px;
  right: 8px;
  border-width: 0 1px 1px 0;
}

.pr2-tile:hover::before,
.pr2-tile:hover::after {
  opacity: 1;
}

/* Ghost index number */
.pr2-tile-num {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(0, 0, 0, .18);
  z-index: 2;
}

/* Image area — fills tile, ready for <img> */
.pr2-tile-img {
  flex: 1;
  background: #e8e8e8;
  overflow: hidden;
}

.pr2-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.pr2-tile:hover .pr2-tile-img img {
  transform: scale(1.05);
}

/* Footer strip */
.pr2-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  flex-shrink: 0;
}

.pr2-tile-pub {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .6);
}

.pr2-tile-yr {
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--gold);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pr2-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .pr2-tile--tall {
    grid-row: auto;
  }

  .pr2-tile {
    height: 240px;
  }
}

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

  .pr2-meta-row {
    display: none;
  }
}

/* ================================================================
   CONTACT  (Website 1 style)
================================================================ */
.contact-section {
  background: #fff;
  padding: 70px 0;
  padding-bottom: 0px;
  border-top: 1px solid var(--rule);
}

.contact-invite-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 45px);
  font-weight: 500;
  line-height: 1.15;
  color: #111;
  margin-bottom: 28px;
}

.contact-invite-title span {
  color: var(--gold);
}

.contact-invite-sub {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(0, 0, 0, .52);
  margin-bottom: 28px;
}

.contact-socials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.contact-social-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s;
}

.contact-social-item-ig span a {
  color: inherit;
  text-decoration: none;
  transition: color .3s;
}

.contact-social-item-ig span a:hover {
  color: var(--gold);
}

.contact-social-item i {
  width: 36px;
  height: 36px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background .3s;
}

.contact-social-item:hover {
  color: var(--gold);
}

.contact-social-item:hover i {
  background: var(--gold);
}

.contact-whatsapp-qr {
  display: flex;
  align-items: center;
  gap: 37px;
  margin-top: 20px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  /* width: fit-content; */
  max-width: 100%;
  text-decoration: none;
  transition: border-color .3s;
}

.contact-whatsapp-qr:hover {
  border-color: var(--gold);
}

.contact-whatsapp-qr img {
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
}

.contact-whatsapp-qr-text {
  display: flex;
  /* flex-direction: column; */
  gap: 19px;
  color: #111;
  font-size: 17px;
  font-weight: 500;
}

.contact-whatsapp-qr-text i {
  width: 40px;
  height: 40px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: background .3s;
}

.contact-whatsapp-qr:hover .contact-whatsapp-qr-text i {
  background: var(--gold);
}

.contact-video {
  margin-top: 28px;
  max-width: 380px;
  border-radius: 8px;
  overflow: hidden;
  /*box-shadow: 0 6px 24px rgba(0, 0, 0, .12);*/
}

.contact-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.contact-logo-big {
  margin-top: 36px;
  overflow: hidden;
}

.contact-logo-big img {
  display: block;
  margin-left: auto;
  width: 100%;
  max-width: 560px;
  height: auto;
  filter: brightness(0);
  /* opacity: .08; */
}

/* Form fields — W1 style */
.form-control.cfield {
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  padding: 14px 18px;
  font-size: 14px;
  color: #111;
  transition: border-color .3s, background .3s;
  width: 100%;
}

.form-control.cfield::placeholder {
  color: rgba(0, 0, 0, .32);
}

.form-control.cfield:focus {
  background: #fff;
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, .1);
}

/* Submit button */
.btn-luxe {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  border: 2px solid var(--gold);
  padding: 16px 48px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s, transform .2s;
}

.btn-luxe:hover {
  background: var(--gold-2);
  transform: translateY(-2px);
}

/* ================================================================
   FOOTER
================================================================ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: 0 var(--pad);
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
}

.footer-logo {
  height: 46px;
  width: auto;
  filter: brightness(0);
  /* opacity: .45; */
}

.footer-logo:hover {
  opacity: .85;
}

.footer-copy {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.footer-links a {
  transition: color .2s;
}

.footer-links a:hover {
  color: var(--gold);
}

/* ================================================================
   SCROLL REVEAL
================================================================ */
.reveal,
.reveal-r,
.reveal-l {
  opacity: 0;
  transition: opacity .95s ease, transform .95s ease;
}

.reveal {
  transform: translateY(22px);
}

.reveal-r {
  transform: translateX(22px);
}

.reveal-l {
  transform: translateX(-22px);
}

.reveal.revealed,
.reveal-r.revealed,
.reveal-l.revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger siblings */
.intro-headline .reveal:nth-child(2) {
  transition-delay: .1s;
}

.intro-headline .reveal:nth-child(3) {
  transition-delay: .2s;
}

.intro-body .reveal:nth-child(2) {
  transition-delay: .1s;
}

.intro-body .reveal:nth-child(3) {
  transition-delay: .2s;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1100px) {
  .intro-layout {
    grid-template-columns: 1fr;
  }

  .intro-left {
    position: static;
  }

  .intro-collage {
    height: clamp(380px, 55vw, 560px);
    margin-top: 64px;
  }

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

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .designers-head {
    grid-template-columns: 1fr;
  }

  .designers-sub {
    text-align: left;
  }

  .gfi-row {
    grid-template-columns: 1fr;
  }

  .gfi-mark {
    max-width: 340px;
  }

  .press-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .press-stats {
    align-self: flex-start;
  }

  .press-collage {
    grid-auto-rows: 240px;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none !important;
  }

  /* header already collapses to hamburger via Bootstrap d-none d-md-flex;
     ensure no overflow on very small viewports */
  .header {
    padding: clamp(10px, 3.5vw, 20px) clamp(14px, 4vw, 24px);
  }

  .svc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .svc-header {
    flex-direction: column;
    gap: 24px;
  }

  .ic-4 {
    display: none;
  }

  .ic-float-text,
  .ic-label-2 {
    display: none;
  }

  .gallery-head {
    grid-template-columns: 1fr;
  }

  .gallery-sub {
    text-align: left;
  }

  .cf-row {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 0;
    gap: 12px;
  }

  .press-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 210px;
    gap: 10px;
  }

  .pc-clip--hero {
    grid-column: 1 / -1;
    grid-row: span 1;
  }
}

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

  .ic-2,
  .ic-3 {
    display: none;
  }

  .ic-1 {
    width: 88%;
    left: 6%;
    position: relative;
    top: auto;
  }

  .intro-collage {
    height: auto;
  }

  .cd-num {
    font-size: 26px;
  }

  .cd-sep {
    font-size: 20px;
  }

  .countdown-wrap {
    gap: 8px;
  }

  .hvid-title {
    font-size: clamp(44px, 14vw, 80px);
  }

  .press-collage {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
    gap: 10px;
  }

  .pc-clip--hero {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
}

/* ================================================================
   PROFESSIONAL MOBILE RESPONSIVE — COMPLETE OVERRIDES
   Scope: fixes scattered-photo press section, service cards,
   gallery tile heights, iOS parallax, countdown overflow.
================================================================ */

/* ── 768px and below (phones + small tablets) ── */
@media (max-width: 768px) {

  /* ──────────────────────────────────────────────────────────────
     MAKING HEADLINES — all 11 photos, absolute scatter, mobile.
     Stage is 2.54× taller than wide so every photo fits inside.
     Each photo below has its own left/top/width/aspect-ratio —
     edit any value to reposition that image.
     Mix of landscape (16/9) and portrait (3/4, 7/8) matches the
     horizontal + vertical variety of the desktop layout.
  ────────────────────────────────────────────────────────────── */
  /* Stage bottom-padding covers the last photo's 35 px overhang */
  .pc-wrap {
    padding-bottom: 60px;
  }

  .pc-logo-ticker {
    top: 63px;
  }

  /* ── Scattered-overlap canvas — same editorial mechanism as desktop ──
     Stage is 290 % tall (≈ 971 px at 375 px phone).
     Photos are absolutely positioned and intentionally overlap,
     exactly like the desktop collage. Stacking follows DOM order
     so later photos sit on top (p11 is front-most).

     Verified gap map at 375 px (stage 335 × 971 px):
       p1 + p6  →   0 – 180 px   (p6 overlaps p1 right corner)
       p2       → 155 – 302 px   (overlaps p1 bottom by ~25 px)
       p3       → 194 – 429 px   (overlaps p2 right half)
       p11      → 291 – 445 px   (overlaps p2/p3 left corner, front)
       p7       → 272 – 489 px   (overlaps p3 right side)
       p4       → 447 – 583 px   (overlaps p7 bottom ~42 px)
       p5       → 466 – 673 px   (overlaps p4 right half)
       p8       → 641 – 792 px   (overlaps p5 bottom ~32 px)
       p9       → 680 – 808 px   (overlaps p8 right half, editorial)
       p10      → 777 – 924 px   (overlaps p9 bottom ~31 px)
  ────────────────────────────────────────────────────────────── */
  .pc-stage {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
    height: 0 !important;
    padding-bottom: 420% !important;
    display: block !important;
    position: relative !important;
    grid-template-columns: initial !important;
    align-items: initial !important;
    gap: initial !important;
  }

  /* Restore absolute positioning + strong shadow for depth */
  .pc-photo {
    position: absolute !important;
    width: 80% !important;
    /* safe fallback overridden per-photo */
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    aspect-ratio: 16 / 9 !important;
    /* safe fallback overridden per-photo */
    margin: 0 !important;
    overflow: hidden;
    box-shadow: 0 6px 32px rgba(0, 0, 0, .50) !important;
  }

  /* ── Landscape photos — anchored left, bleed off left edge ── */
  .pc-p1 {
    width: 85% !important;
    left: -2% !important;
    top: 2% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .pc-p2 {
    width: 78% !important;
    left: -2% !important;
    top: 14% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .pc-p4 {
    width: 92% !important;
    left: 10% !important;
    top: 39% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .pc-p8 {
    width: 87% !important;
    left: -2% !important;
    top: 55% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .pc-p9 {
    width: 93% !important;
    left: 11% !important;
    top: 78% !important;
    aspect-ratio: 16 / 9 !important;
  }

  .pc-p10 {
    width: 78% !important;
    left: -4% !important;
    top: 88% !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* ── Portrait photos — shifted right, overlap landscape right edges ── */
  .pc-p3 {
    width: 56% !important;
    left: 44% !important;
    top: 20% !important;
    aspect-ratio: 4 / 5 !important;
  }

  .pc-p5 {
    width: 54% !important;
    left: 48% !important;
    top: 49% !important;
    aspect-ratio: 7 / 8 !important;
  }

  .pc-p6 {
    width: 45% !important;
    left: 58% !important;
    top: 5% !important;
    aspect-ratio: 2 / 3 !important;
  }

  .pc-p7 {
    width: 52% !important;
    left: -4% !important;
    top: 67% !important;
    aspect-ratio: 4 / 5 !important;
  }

  .pc-p11 {
    width: 54% !important;
    left: -4% !important;
    top: 28% !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* ──────────────────────────────────────────────────────────────
     SERVICES — show card descriptions without hover
     (CSS :hover is unreliable on touch devices)
  ────────────────────────────────────────────────────────────── */
  .svc-card-body h3 {
    margin-bottom: 7px !important;
  }

  .svc-card-desc {
    grid-template-rows: 1fr !important;
  }

  .svc-card-desc>p {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Strengthen the gradient so text is legible over the photo */
  .svc-card::before {
    /* background: linear-gradient(170deg,
        rgba(0, 0, 0, .30) 0%,
        rgba(0, 0, 0, .10) 38%,
        rgba(0, 0, 0, .90) 100%); */
    background: linear-gradient(170deg, rgb(9 9 9 / 71%) 0%, rgb(0 0 0 / 56%) 38%, rgba(0, 0, 0, .90) 100%);
  }

  /* ──────────────────────────────────────────────────────────────
     GALLERY — scale tile heights for 2-column mobile layout
     (desktop heights are sized for ~340 px wide 4-column cells;
      at 2 columns on 375 px the cells are ~159 px wide, so the
      original heights create extreme 3:1 portrait strips)
  ────────────────────────────────────────────────────────────── */
  /* Hide remaining 6 tiles on mobile */
  .gc-t7,
  .gc-t8,
  .gc-t9,
  .gc-t10,
  .gc-t11,
  .gc-t12 {
    display: none;
  }

  /* ──────────────────────────────────────────────────────────────
     iOS/Android fix: background-attachment:fixed is broken on
     most mobile browsers — force scroll so the red org panel
     doesn't show a blank/white background on iOS
  ────────────────────────────────────────────────────────────── */
  .grp-org {
    background-attachment: scroll;
  }
}

/* ── Gallery: 2-column, 6 cards on very small phones (≤ 400px) ── */
@media (max-width: 400px) {

  .gc-t7,
  .gc-t8,
  .gc-t9,
  .gc-t10,
  .gc-t11,
  .gc-t12 {
    display: none;
  }
}

/* ── Countdown overflow fix on very narrow phones (≤ 380px) ── */
@media (max-width: 380px) {
  .countdown-wrap {
    gap: 6px;
  }

  .cd-num {
    font-size: 22px;
  }

  .cd-sep {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .cd-block {
    min-width: 38px;
  }

  .cd-label {
    font-size: 7.5px;
    letter-spacing: .10em;
  }
}

/* ── Organised By: stack paragraphs on very narrow phones ── */
@media (max-width: 480px) {
  .grp-org-body {
    grid-template-columns: 1fr;
    gap: 10px 0;
  }
}

/* ================================================================
   MOBILE SECTION PADDING — compact vertical + horizontal rhythm
================================================================ */
@media (max-width: 768px) {

  /* ── Hero Video — show full landscape ratio on mobile ── */
  .video-banner {
    height: 50.25vw !important;
    min-height: 200px;
  }

  /* ── About / Intro ── */
  .grp-left {
    padding: 40px 20px 32px !important;
    gap: 20px !important;
  }

  .grp-right {
    min-height: 300px !important;
  }

  .grp-h1 {
    font-size: clamp(32px, 8vw, 56px) !important;
  }

  .grp-h2 {
    font-size: clamp(52px, 13vw, 90px) !important;
  }

  .grp-glass p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* ── Organised By ── */
  .grp-org {
    padding: 44px clamp(16px, 5vw, 28px);
  }

  .grp-org-inner {
    grid-template-columns: min(150px, 36vw) 1fr;
  }

  .grp-org-panel-l {
    padding-right: clamp(12px, 3vw, 20px);
  }

  .grp-org-logo {
    width: min(130px, 32vw);
  }

  .grp-org-panel-r {
    padding-left: clamp(14px, 4vw, 26px);
    gap: 14px;
  }

  .grp-org-eyebrow {
    font-size: 11px;
    letter-spacing: .18em;
  }

  .grp-org-name {
    font-size: clamp(16px, 4.5vw, 28px);
  }

  .grp-org-body {
    gap: 0 20px;
  }

  .grp-org-para {
    font-size: 12px;
    line-height: 1.65;
  }

  /* ── Services ── */
  .services-section {
    padding: 36px 20px 40px !important;
  }

  .svc-header {
    margin-bottom: -25px !important;
  }

  .svc-sub-label {
    font-size: 10px !important;
    letter-spacing: .16em !important;
    margin-bottom: 6px !important;
  }

  .svc-heading {
    font-size: clamp(24px, 6vw, 38px) !important;
  }

  .svc-grid {
    gap: 8px !important;
  }

  .svc-card {
    padding: 16px 16px !important;
    aspect-ratio: auto !important;
    min-height: 220px !important;
  }

  .svc-card-body h3 {
    font-size: 14px !important;
  }

  .svc-card-desc>p {
    font-size: 11px !important;
  }

  /* ── Services: show all 6 cards, hide button on mobile ── */
  .svc-extra {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .svc-more-wrap {
    display: none !important;
  }

  /* ── Designers ── */
  .designers {
    padding: 36px 0 !important;
  }

  .designers-head {
    margin-bottom: 24px !important;
    padding: 0 20px !important;
  }

  .marquee-outer .mq-nav {
    display: none !important;
  }

  .display-h {
    font-size: clamp(24px, 6vw, 38px) !important;
  }

  /* ── Making Headlines top & sides ── */
  .pc-wrap {
    padding-top: 40px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .press-head {
    margin-bottom: 28px !important;
  }

  .press-sub-label {
    font-size: 10px !important;
    letter-spacing: .16em !important;
    margin-bottom: 6px !important;
  }

  .press-main-title {
    font-size: clamp(26px, 7vw, 44px) !important;
  }

  /* ── Gallery ── */
  .gallery {
    padding: 36px 0 52px !important;
  }

  .gallery-head {
    margin-bottom: 20px !important;
    padding: 0 20px !important;
  }

  .gc-masonry {
    padding: 0 16px !important;
    column-gap: 8px !important;
  }

  /* ── Contact ── */
  .contact-section {
    padding: 80px 0 !important;
    padding-bottom: 0 !important;
  }

  /* Unwrap columns so children become direct flex items of .row */
  .contact-col-info,
  .contact-col-form-r {
    display: contents;
  }

  /* Each unwrapped child needs explicit full width + side padding */
  .contact-col-info>*,
  .contact-col-form-r>* {
    width: 100%;
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 30px;
  }

  /* Mobile order: heading (1) → form (2) → links (3) → logo (4) */
  .section-tag,
  .contact-invite-title,
  .contact-invite-sub {
    order: 1;
  }

  #contactForm {
    order: 2;
  }

  .contact-socials {
    order: 3;
  }

  .contact-logo-big {
    order: 4;
  }

  .contact-row {
    row-gap: 0 !important;
  }

  /* Tighten heading group */
  .contact-section .section-tag {
    margin-bottom: 4px !important;
  }

  .contact-invite-title {
    font-size: clamp(18px, 5vw, 30px) !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
  }

  .contact-invite-sub {
    font-size: 13px !important;
    margin-bottom: 28px !important;
  }

  /* Space between major blocks */
  #contactForm {
    margin-bottom: 28px;
  }

  .contact-socials {
    gap: 10px !important;
  }

  .contact-social-item {
    font-size: 13px !important;
  }

  .contact-logo-big {
    margin-top: 24px !important;
  }

  .contact-whatsapp-qr {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding: 12px 16px !important;
    gap: 14px !important;
  }

  .contact-whatsapp-qr img {
    width: 64px !important;
    height: 64px !important;
  }

  .contact-whatsapp-qr-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
    font-size: 13px !important;
  }

  .contact-whatsapp-qr-text span {
    min-width: 0;
  }

  .contact-whatsapp-qr-text i {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    flex: 0 0 auto;
  }

  /* ── Footer ── */
  .site-footer {
    padding: 0 20px !important;
  }

  .footer-inner {
    padding: 16px 0 !important;
    gap: 10px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-logo-link {
    display: none !important;
  }

  .footer-copy,
  .footer-links {
    font-size: 9px !important;
  }
}

/* ================================================================
   SCROLL-REVEAL — section box animations
   Classes added by JS; elements slide in when entering viewport.
================================================================ */

/* ── Slide up (service cards, gallery tiles) ── */
.sr-up {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Slide from left ── */
.sr-left {
  opacity: 0;
  transform: translateX(-52px);
  transition: opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Slide from right ── */
.sr-right {
  opacity: 0;
  transform: translateX(52px);
  transition: opacity 0.72s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Revealed state — reset both opacity and position */
.sr-up.sr-in,
.sr-left.sr-in,
.sr-right.sr-in {
  opacity: 1;
  transform: none;
}

/* ── Fade only (press photos — avoids conflicting with hover transform) ── */
.sr-fade {
  opacity: 0;
}

.sr-fade.sr-in {
  opacity: 1;
  transition: opacity 0.85s ease;
}

/* Ensure hover effects still work on tiles after reveal */
.gc-tile.sr-up,
.svc-card.sr-up,
.svc-card.sr-left {
  will-change: transform, opacity;
}

/* ================================================================
   PRESS — Mobile Slider (Slick Carousel)
================================================================ */
.pc-mobile-slider {
  display: none;
  width: 100%;
}

.pc-mobile-slider .slick-list {
  overflow: visible !important;
  padding-top: 24px !important;
  padding-bottom: 10px !important;
}

.pc-mobile-slider .slick-slide {
  padding: 0;
  margin: 0 -50px;
  transform: scale(0.82);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.pc-mobile-slider .slick-center {
  transform: scale(1.18);
  z-index: 2;
  position: relative;
}

.pc-mobile-slider .slick-dots {
  display: flex !important;
  justify-content: center;
  list-style: none;
  padding: 14px 0 4px;
  gap: 7px;
}

.pc-mobile-slider .slick-dots li button {
  font-size: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.pc-mobile-slider .slick-dots li.slick-active button {
  background: var(--gold);
  transform: scale(1.3);
}

.pc-mobile-slider .rev_slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.pc-mobile-slider .slide-h {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 40px;
}

.pc-mobile-slider .slide-h img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.pc-mobile-slider .slide-v {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.pc-mobile-slider .slide-v img {
  display: block;
  height: clamp(140px, 80vw, 340px);
  width: auto;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* Lightbox */
.pc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.pc-lightbox.active {
  display: flex;
}

.pc-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6);
  animation: pcLbIn 0.25s ease;
}

@keyframes pcLbIn {
  from {
    transform: scale(0.88);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.pc-lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  opacity: 0.85;
}

.pc-lightbox-close:hover {
  opacity: 1;
}

.pc-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(120, 120, 120, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.15s ease;
  z-index: 2;
}

.pc-lightbox-nav:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.pc-lightbox-nav:active {
  transform: translateY(-50%) scale(0.92);
}

.pc-lightbox-prev {
  left: 16px;
}

.pc-lightbox-next {
  right: 16px;
}

@media (max-width: 480px) {
  .pc-lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .pc-lightbox-prev {
    left: 8px;
  }

  .pc-lightbox-next {
    right: 8px;
  }
}

/* Show slider, hide scattered stage on mobile */
@media (max-width: 768px) {
  .pc-stage {
    display: none !important;
  }

  .pc-mobile-slider {
    display: block;
  }

  .pc-wrap {
    padding-bottom: 48px !important;
  }
}
.video-banner { position: relative; }

.video-sound-btn {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
}

.video-sound-btn:hover { background: rgba(0, 0, 0, .7); transform: scale(1.06); }
.video-sound-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.video-sound-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
}
.video-sound-btn svg path:first-child { stroke: none; }

/* show the icon that matches the current state */
.video-sound-btn .icon-unmuted { display: none; }
.video-sound-btn.is-unmuted .icon-muted { display: none; }
.video-sound-btn.is-unmuted .icon-unmuted { display: block; }

@media (max-width: 575px) {
  .video-sound-btn { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  .video-sound-btn svg { width: 19px; height: 19px; }
}