/* ============================================================
   JONATHAN BURTON — Photography & Creative Partner
   Stylesheet: Cinematic / Editorial Luxury
   ============================================================ */

/* ────────────────────────────────────────
   CUSTOM PROPERTIES
──────────────────────────────────────── */
:root {
  /* Palette */
  --bg:          #FFFFFF;
  --bg-2:        #F5F5F5;
  --bg-3:        #ECECEC;
  --bg-card:     #F5F5F5;
  --text:        #1A1A1A;
  --text-sub:    #3D3D3D;
  --text-muted:  #7A7A7A;
  --gold:        #1A1A1A;
  --gold-light:  #4A4A4A;
  --gold-dim:    rgba(0,0,0,0.05);
  --teal:        #1A1A1A;
  --teal-light:  #4A4A4A;
  --border:      rgba(0,0,0,0.08);
  --border-gold: rgba(0,0,0,0.2);

  /* Typography */
  --font-display: 'Josefin Sans', Futura, 'Century Gothic', sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;

  /* Spacing */
  --container:  min(90vw, 1280px);
  --section-py: clamp(80px, 10vw, 140px);

  /* Easing */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
}

/* ────────────────────────────────────────
   DARK BAND  (Marketing world accent)
   Add class="band-dark" to a single section/header. It remaps the
   tokens *for that block only* to a soft warm graphite + off-white,
   so the Marketing pages stay light but get a dark accent band
   (used on the page header). Lightest-touch world distinction.
──────────────────────────────────────── */
.band-dark {
  --bg:          #1E2024;
  --bg-2:        #24272C;
  --bg-3:        #2B2E33;
  --bg-card:     #24272C;
  --text:        #F4F3F1;
  --text-sub:    #CFCECB;
  --text-muted:  #9A9A98;
  --gold:        #F4F3F1;   /* accent → off-white */
  --gold-light:  #C8C7C4;
  --gold-dim:    rgba(255,255,255,0.06);
  --teal:        #F4F3F1;
  --teal-light:  #C8C7C4;
  --border:      rgba(255,255,255,0.14);
  --border-gold: rgba(255,255,255,0.4);

  background: var(--bg);
  color: var(--text);
}
/* Button/element fixes inside a dark band (rules with hardcoded light colours) */
.band-dark .btn-gold { color: #1E2024; }            /* off-white button → dark text */
.band-dark .btn-ghost { color: var(--text); border-color: rgba(255,255,255,0.35); }
.band-dark .btn-ghost:hover { background: var(--text); color: #1E2024; }

/* When the page opens on a dark header band, the (transparent) nav sits
   over it — so make the un-scrolled nav text light. Once scrolled, the
   nav gets its own light background and reverts to the normal dark text. */
.nav-over-dark .nav:not(.nav--scrolled) .nav-links a,
.nav-over-dark .nav:not(.nav--scrolled) .nav-logo-name {
  color: rgba(255,255,255,0.92);
  /* Soft shadow keeps links readable over bright hero photos too. */
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 1px 12px rgba(0,0,0,0.35);
}
.nav-over-dark .nav:not(.nav--scrolled) .nav-logo-sub,
.nav-over-dark .nav:not(.nav--scrolled) .nav-worlds a:not(.nav-world--active) {
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.nav-over-dark .nav:not(.nav--scrolled) .nav-links a:hover { color: #fff; }
.nav-over-dark .nav:not(.nav--scrolled) .nav-toggle span { background: #fff; }
.nav-over-dark .nav:not(.nav--scrolled) .nav-cta { color: #fff !important; border-color: rgba(255,255,255,0.5); }
.nav-over-dark .nav:not(.nav--scrolled) .nav-cta:hover { background: #fff; color: #1E2024 !important; }
.nav-over-dark .nav:not(.nav--scrolled) .nav-worlds { border-color: rgba(255,255,255,0.25); }
.nav-over-dark .nav:not(.nav--scrolled) .nav-world--active { background: #fff; color: #1E2024; }
/* logo image is a dark mark — invert it to white while over the dark band */
.nav-over-dark .nav:not(.nav--scrolled) .nav-logo-img { filter: brightness(0) invert(1); }

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

::selection { background: rgba(0,0,0,0.18); color: inherit; }
::-moz-selection { background: rgba(0,0,0,0.18); color: inherit; }

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
select, input, textarea { font: inherit; color: inherit; }

/* ────────────────────────────────────────
   FILM GRAIN OVERLAY
──────────────────────────────────────── */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.5'/></svg>");
  animation: grain-shift 6s steps(1) infinite;
}
@keyframes grain-shift {
  0%,100%{ transform: translate(0,0) }
  10%    { transform: translate(-2%,-3%) }
  20%    { transform: translate(3%,2%) }
  30%    { transform: translate(-1%,4%) }
  40%    { transform: translate(4%,-1%) }
  50%    { transform: translate(-3%,3%) }
  60%    { transform: translate(2%,-4%) }
  70%    { transform: translate(-4%,1%) }
  80%    { transform: translate(1%,-2%) }
  90%    { transform: translate(3%,4%) }
}

/* ────────────────────────────────────────
   SCROLL PROGRESS BAR
──────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ────────────────────────────────────────
   FLOATING CART BUTTON
──────────────────────────────────────── */
.cart-fab {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 52px; height: 52px;
  background: var(--gold);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s;
}
.cart-fab:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(0,0,0,0.28); }
.cart-fab-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.65rem;
  font-weight: 500;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
}
.cart-fab-count[data-count="0"] { display: none; }

/* ────────────────────────────────────────
   NAVIGATION
──────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 5vw;
  transition: background 0.4s, padding 0.4s, backdrop-filter 0.4s;
}
.nav.nav--scrolled {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 5vw;
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-logo-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1;
}
.nav-logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease-smooth);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  padding: 7px 18px;
  border: 1px solid var(--border-gold);
  border-radius: 1px;
  color: var(--gold) !important;
  font-style: normal !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: background 0.2s, color 0.2s !important;
}
.nav-cta:hover { background: var(--gold) !important; color: var(--bg) !important; }
.nav-cta::after { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1px;
  background: var(--text);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    width: 280px; height: 100vh;
    background: var(--bg-2);
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 60px 40px;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-smooth);
    border-left: 1px solid var(--border);
  }
  .nav-links.open { transform: translateX(0); }
  /* The drawer is always a light panel, whatever hero sits behind it —
     force dark link text so the nav-over-dark white-link treatment
     can't bleed in and wash the menu out. */
  .nav-links a { font-size: 0.9rem; color: var(--text) !important; text-shadow: none !important; }
  .nav-links .nav-world--active { color: var(--text) !important; }
  /* Solid gold CTA: the old rule set light text but never gave the
     button a fill, leaving it white-on-white and invisible. */
  .nav-links .nav-cta {
    display: inline-block;
    align-self: flex-start;
    white-space: nowrap;
    padding: 10px 22px;
    color: var(--bg) !important;
    background: var(--gold);
    border-color: var(--gold);
  }
}

/* ────────────────────────────────────────
   SHARED SECTION STYLES
──────────────────────────────────────── */
.section { padding: var(--section-py) 0; position: relative; }
.container { width: var(--container); margin-inline: auto; }

.section-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-kicker::before {
  content: '';
  display: block;
  width: 32px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--text);
  letter-spacing: 0.04em;
}
.section-title em { font-style: italic; color: var(--text-sub); }

/* Section subtitle — sits under the (promoted) title; the line that used
   to be the main heading, now a softer supporting line. */
.section-sub {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--text-sub);
  margin-top: 14px;
}
.section-sub em { font-style: italic; }

/* Gallery subfolder section headings — optional client/event logo inline before the title */
.section-heading-logo {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.section-heading-logo img {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.section-heading-logo img.invert { filter: invert(1); }

.section-intro {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-sub);
  max-width: 580px;
  margin-top: 24px;
  line-height: 1.75;
}

/* Events grid — short text blocks per event/category, used on gallery pages */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-top: 56px;
}
.events-grid-item {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.events-grid-item h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 12px;
}
.events-grid-item p {
  font-size: 0.92rem;
  color: var(--text-sub);
  line-height: 1.75;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-smooth),
              transform 0.9s var(--ease-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2)  { transition-delay: 0.1s; }
.reveal:nth-child(3)  { transition-delay: 0.2s; }
.reveal:nth-child(4)  { transition-delay: 0.3s; }
.reveal:nth-child(5)  { transition-delay: 0.4s; }

/* Unfold reveal — paper fold from top, used on story chapters */
.reveal-unfold {
  opacity: 0;
  transform: perspective(900px) rotateX(-7deg) translateY(24px);
  transform-origin: top center;
  transition: opacity 0.8s var(--ease-smooth),
              transform 0.85s var(--ease-smooth);
}
.reveal-unfold.visible {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) translateY(0);
}

/* Story chapter text: animate each child individually, not the block */
.story-chapter-text.reveal-unfold {
  opacity: 1;
  transform: none;
  transition: none;
}
.story-chapter-text.reveal-unfold > * {
  opacity: 0;
  transform: perspective(900px) rotateX(-6deg) translateY(16px);
  transform-origin: top center;
  transition: opacity 0.65s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}
.story-chapter-text.reveal-unfold.visible > * {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) translateY(0);
}
.story-chapter-text.reveal-unfold.visible > *:nth-child(1) { transition-delay: 0.06s; }
.story-chapter-text.reveal-unfold.visible > *:nth-child(2) { transition-delay: 0.18s; }
.story-chapter-text.reveal-unfold.visible > *:nth-child(3) { transition-delay: 0.30s; }
.story-chapter-text.reveal-unfold.visible > *:nth-child(4) { transition-delay: 0.42s; }
.story-chapter-text.reveal-unfold.visible > *:nth-child(5) { transition-delay: 0.54s; }
.story-chapter-text.reveal-unfold.visible > *:nth-child(6) { transition-delay: 0.66s; }

/* Image placeholder */
.img-placeholder {
  width: 100%;
  aspect-ratio: 3/2;
  background: var(--ph, #1a1410);
  display: flex;
  align-items: flex-end;
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
}
.img-placeholder span {
  position: relative;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  z-index: 1;
}

/* Shared link arrow */
.link-arrow {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
  margin-top: 16px;
}
.link-arrow:hover { gap: 10px; }

/* ────────────────────────────────────────
   BUTTONS
──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 1px;
  transition: all 0.25s var(--ease-smooth);
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  color: #FFFFFF;
  border: 1px solid var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: #FFFFFF; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.2);
}
.btn-ghost:hover { border-color: var(--text); }
.btn-outline-sm {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  border-radius: 1px;
  transition: all 0.2s;
  margin-top: 24px;
}
.btn-outline-sm:hover { background: var(--gold); color: #FFFFFF; }
.btn-full { width: 100%; justify-content: center; }

/* ────────────────────────────────────────
   LOGO IMAGE
──────────────────────────────────────── */
.nav-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
  max-width: 160px;
  transition: filter 0.3s var(--ease-smooth);
}
.nav--scrolled .nav-logo-img { filter: brightness(0); }
.nav-logo-fallback {
  flex-direction: column;
  gap: 1px;
}

/* ────────────────────────────────────────
   01. HERO
──────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Crossfade slideshow */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;
}
.hero-slide--active {
  opacity: 1;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;  /* sits above .hero-bg-overlay (z-index:1) */
  text-align: center;
  padding: 0 5vw;
  padding-top: 80px;
}
/* Hero logo (large, centred, white) */
.hero-logo {
  height: clamp(100px, 18vw, 220px);
  width: auto;
  max-width: 600px;
  display: block;
  margin: 0 auto 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition-delay: 0.05s;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 200;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;
  margin-bottom: 24px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.hero-name-first { transition-delay: 0.1s; }
.hero-name-last  { transition-delay: 0.18s; color: rgba(255,255,255,0.82); }

.hero-rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 20px;
  transition-delay: 0.24s;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  transition-delay: 0.3s;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.hero-location {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 32px;
  transition-delay: 0.36s;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  transition-delay: 0.44s;
}
.hero-actions .btn-ghost {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.45);
}
.hero-actions .btn-ghost:hover { border-color: #FFFFFF; }
.hero-scroll {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.hero-scroll span {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  writing-mode: horizontal-tb;
}
.hero-scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50%       { transform: scaleY(0.6); opacity: 1; }
}
.hero-overlay-text {
  position: absolute;
  bottom: 28px; right: 5vw;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  z-index: 3;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* International badge */
.intl-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 20px;
  border: 1px solid var(--border-gold);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
}
.intl-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse-dot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

/* IOM travel destinations */
.iom-travel { margin-top: 28px; }
.iom-travel-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.travel-destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.travel-destinations span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color 0.2s, color 0.2s;
}
.travel-destinations span:hover { border-color: var(--border-gold); color: var(--gold); }

/* ────────────────────────────────────────
   02. SERVICES OVERVIEW / PILLARS
──────────────────────────────────────── */
.overview {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}
.overview-col .section-intro { margin-top: 1.2rem; }
.overview-col .intl-badge { margin-top: 1rem; }

/* ── Overview statements (marketing) ─────────────────────────
   The blurbs are gone; these two statements ARE the pitch, so they
   get stage presence: each line rises out of a mask in sequence,
   then the copy performs itself — "manufactured" is struck through
   (found, not manufactured) and "One contact." is underlined (the
   promise, anchored). Keyed off the existing .reveal observer. */
.ov-statement {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1.18;
  color: var(--text);
}
.ov-line { display: block; overflow: hidden; }
.ov-line-in {
  display: block;
  transform: translateY(112%);
  transition: transform 0.85s var(--ease-smooth);
}
.overview-col.reveal.visible .ov-line-in { transform: translateY(0); }
.overview-col.reveal.visible .ov-line:nth-child(1) .ov-line-in { transition-delay: 0.15s; }
.overview-col.reveal.visible .ov-line:nth-child(2) .ov-line-in { transition-delay: 0.32s; }
.overview-col.reveal.visible .ov-line:nth-child(3) .ov-line-in { transition-delay: 0.49s; }

/* strike drawn through "manufactured" after the lines land */
.ov-strike {
  position: relative;
  white-space: nowrap;
  transition: color 0.5s ease 1.5s;
}
.ov-strike::after {
  content: '';
  position: absolute;
  left: -1%; right: -1%;
  top: 56%;
  height: 2px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease-smooth) 1.2s;
}
.overview-col.reveal.visible .ov-strike { color: var(--text-muted); }
.overview-col.reveal.visible .ov-strike::after { transform: scaleX(1); }

/* hairline drawn under "One contact." — the promise, anchored */
.ov-underline { position: relative; }
.ov-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-smooth) 1.2s;
}
.overview-col.reveal.visible .ov-underline::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .ov-line-in { transform: none; transition: none; }
  .ov-strike, .ov-strike::after, .ov-underline::after { transition: none; }
  .ov-strike::after, .ov-underline::after { transform: scaleX(1); }
}

@media (max-width: 768px) {
  .overview-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Section bg alternation: Story=white, then alternate grey/white down */
.story { background: var(--bg); }
.portfolio { background: var(--bg-2); }

/* Shop is hidden for now — re-enable by removing this rule and restoring the nav link */
#prints-cta { display: none; }
.overview .container { margin-bottom: 64px; }

.pillars {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
}
.pillar {
  background: var(--bg-2);
  padding: clamp(24px, 3.5vw, 48px) clamp(20px, 2.5vw, 36px);
  transition: background 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pillar:hover { background: var(--bg-3); }
.pillar-num {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--border-gold);
  line-height: 1;
  margin-bottom: 20px;
}
.pillar-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  color: var(--text);
}
.pillar > p {
  font-size: 0.85rem;
  color: var(--text-sub);
  line-height: 1.7;
  margin-bottom: 0;
}

.pillar-num,
.pillar-title,
.pillar > p,
.pillar > a {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .pillars { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────
   REAL IMAGE CONTAINERS
──────────────────────────────────────── */
/* Story chapter images fill their container */
.story-chapter-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Schools & IOM section images */
.schools-image img,
.iom-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ────────────────────────────────────────
   03. THE STORY
──────────────────────────────────────── */
.story-intro {
  margin-bottom: clamp(60px, 8vw, 100px);
}
.story-interlude {
  padding: clamp(60px, 8vw, 100px) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.story-interlude .credentials {
  grid-template-columns: 1fr;
  margin-top: 0;
}
.story-lede {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: var(--text-sub);
  border-left: 2px solid var(--gold);
  padding-left: 28px;
  max-width: 820px;
  margin-top: 24px;
}

.story-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 60vh;
}
.story-chapter--flip { }

.story-chapter-text {
  padding: clamp(48px, 8vw, 100px) clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  background: var(--bg);
}
.story-chapter-text > * { max-width: 32rem; width: 100%; }
.story-chapter-image {
  position: relative;
  overflow: hidden;
  min-height: 500px;
}
.story-chapter-image .img-placeholder {
  height: 100%;
  aspect-ratio: unset;
}
.story-chapter--flip .story-chapter-text { order: 2; }
.story-chapter--flip .story-chapter-image { order: 1; }

.story-chapter-full {
  margin: 0;
  line-height: 0;
}
.story-chapter-full img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.chapter-stamp {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.chapter-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.story-chapter-text p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 18px;
}
.story-chapter-text p em { color: var(--text); font-style: italic; }

.inline-quote {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  border-left: 1px solid var(--border-gold);
  padding: 16px 20px;
  margin-top: 8px;
  line-height: 1.5;
  background: var(--gold-dim);
}

.credentials {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  margin-top: 1px;
}
.credential {
  background: var(--bg);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.credential-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.credential-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .story-chapter { grid-template-columns: 1fr; }
  .story-chapter--flip .story-chapter-text { order: 2; }
  .story-chapter--flip .story-chapter-image { order: 1; min-height: 300px; }
  .story-chapter-image { min-height: 300px; }
  .credentials { grid-template-columns: repeat(2, 1fr); }
  .story-interlude { grid-template-columns: 1fr; }
  .story-interlude .credentials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .credentials { grid-template-columns: repeat(2, 1fr); }
}

/* Press & Editorial Credits */
.press-credits {
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--border);
}
.press-credits-kicker {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.press-credits-list {
  display: flex;
  flex-direction: column;
}
.press-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-sub);
  transition: color 0.2s;
  flex-wrap: nowrap;
}
.press-item:last-child {
  border-bottom: none;
}
.press-item:hover {
  color: var(--text);
}
.press-item:hover .press-outlet {
  color: var(--gold);
}
.press-item:hover .press-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}
.press-outlet {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 160px;
  transition: color 0.2s;
}
.press-sep {
  color: var(--border-gold);
  flex-shrink: 0;
  font-weight: 300;
}
.press-headline {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.4;
  flex: 1;
}
.press-arrow {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.25s var(--ease-smooth);
}
@media (max-width: 600px) {
  .press-outlet { min-width: 120px; font-size: 0.62rem; }
  .press-headline { font-size: 0.82rem; }
  .press-sep { display: none; }
}

/* ────────────────────────────────────────
   04. PORTFOLIO — GALLERY CARDS
──────────────────────────────────────── */
.portfolio .container { margin-bottom: 48px; }

.gallery-cards {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

/* Scroll "unfold" reveal for gallery cards — each card folds up from a
   slightly tilted, lifted state as it scrolls into view, with a stagger
   across the row. Driven by the existing IntersectionObserver: the card gets
   .is-in when it enters the viewport. Respects reduced-motion. */
.gallery-card--unfold {
  opacity: 0;
  transform: perspective(1200px) rotateX(-14deg) translateY(42px);
  transform-origin: top center;
  transition: opacity 0.7s var(--ease-smooth), transform 0.8s var(--ease-smooth);
  will-change: transform, opacity;
}
.gallery-card--unfold.is-in {
  opacity: 1;
  transform: perspective(1200px) rotateX(0deg) translateY(0);
}
/* Per-column stagger so each row unfolds left-to-right. */
.gallery-cards .gallery-card--unfold:nth-child(3n+2) { transition-delay: 0.09s; }
.gallery-cards .gallery-card--unfold:nth-child(3n+3) { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .gallery-card--unfold { opacity: 1; transform: none; transition: none; }
}

/* Group heading above a set of gallery cards (Isle of Man / Beyond the Island) */
.gallery-group-head {
  margin-top: clamp(40px, 6vw, 72px);
  margin-bottom: 22px;
}
.gallery-group-head:first-of-type { margin-top: 8px; }
.gallery-group-kicker {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.gallery-group-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--text);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.gallery-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/5;
  background: var(--bg-3);
  display: block;
  outline: none;
}
.gallery-card:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.gallery-card-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-smooth);
}
.gallery-card:hover .gallery-card-img img { transform: scale(1.07); }

.gallery-card-info {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.28) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px;
}
.gallery-card-count {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
}
.gallery-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  margin: 0;
  transition: color 0.25s;
}
.gallery-card:hover .gallery-card-title { color: rgba(255,255,255,0.85); }

.gallery-card-desc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.78);
  margin-top: 5px;
  line-height: 1.5;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s var(--ease-smooth), opacity 0.35s;
}
.gallery-card:hover .gallery-card-desc { max-height: 36px; opacity: 1; }

.gallery-card-arrow {
  position: absolute;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.8) translateX(-4px);
  transition: opacity 0.3s, transform 0.35s var(--ease-smooth);
}
.gallery-card:hover .gallery-card-arrow { opacity: 1; transform: scale(1) translateX(0); }

/* ── Gallery Overlay ── */
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-smooth);
  pointer-events: none;
}
.gallery-overlay.open {
  transform: translateX(0);
  pointer-events: auto;
}

.gallery-overlay-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  height: 64px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gallery-overlay-back {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
  justify-self: start;
}
.gallery-overlay-back:hover { color: var(--gold); }
.gallery-overlay-back svg { transition: transform 0.2s; }
.gallery-overlay-back:hover svg { transform: translateX(-3px); }

.gallery-overlay-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  margin: 0;
}
.gallery-overlay-close {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.2s;
  padding: 6px;
}
.gallery-overlay-close:hover { color: var(--text); }

.gallery-overlay-grid {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  position: relative;
}

.gallery-overlay-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.gallery-overlay-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-smooth);
}
.gallery-overlay-item:hover img { transform: scale(1.03); }

/* Editorial cards: width/height/position set by JS justified layout */

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 52%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-overlay-item:hover .portfolio-overlay { opacity: 1; }

.portfolio-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text);
  display: block;
  margin-bottom: 3px;
}
.portfolio-cat {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Gallery editorial cards — compact 1×1 cell ── */
.gallery-editorial-wrapper {
  /* 1×1 by default — sits in a small image slot */
}
.gallery-editorial-card {
  height: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: clamp(22px, 3vw, 32px) clamp(18px, 2.5vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.gallery-editorial-card--cta {
  background: var(--bg-3);
}
.gallery-editorial-card--hero {
  background: var(--bg-3);
  border-left: none;
  border-top: 3px solid var(--gold);
  padding: 16px clamp(18px, 2.5vw, 28px);
  overflow: auto;
}
.gec-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.gec-cta { margin-top: 12px; display: inline-block; }
.gec-school-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.gec-school-list li {
  font-size: 0.72rem;
  color: var(--text-sub);
  padding: 4px 0 4px 14px;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.gec-school-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.6rem;
}
@media (max-width: 600px) {
  .gec-hero-content { grid-template-columns: 1fr; gap: 24px; }
  .gec-school-list { grid-template-columns: 1fr; }
}
.gec-kicker {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.gec-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 12px;
}
.gec-body {
  font-size: 0.78rem;
  color: var(--text-sub);
  line-height: 1.65;
  margin-bottom: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.gec-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gec-btn { font-size: 0.82rem; }
.gec-link {
  font-size: 0.82rem;
  color: var(--text-sub);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.gec-link:hover { color: var(--gold); }

@media (max-width: 900px) {
  .gallery-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gallery-cards { grid-template-columns: 1fr; }
  .gallery-card { aspect-ratio: 3/2; }
  .gallery-overlay-header { padding: 0 16px; }
  .gallery-overlay-title { font-size: 0.72rem; }
}

/* ────────────────────────────────────────
   05. SCHOOLS
──────────────────────────────────────── */
.schools {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.schools-inner {
  width: var(--container);
  margin-inline: auto;
}
.schools-text .section-title { margin-bottom: 24px; }
.schools-text p { font-size: 0.95rem; color: var(--text-sub); line-height: 1.8; margin-bottom: 16px; }
.school-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin: 24px 0;
}
.school-list li {
  font-size: 0.8rem;
  color: var(--text-sub);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.school-list li::before {
  content: '—';
  color: var(--gold);
  font-size: 0.6rem;
}
.text-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.text-link:hover { border-bottom-color: var(--gold); }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 8px;
  margin: 28px 0 0;
  align-items: center;
}
.logo-item {
  margin: 0; padding: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.logo-item img {
  max-width: 100%;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.logo-item img:hover { opacity: 1; }
/* Logos originally designed for dark backgrounds (white-on-transparent) — invert so they show on white */
.logo-item--invert img { filter: invert(1); }
.logo-item--text {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-sub);
  opacity: 0.75;
  text-align: center;
  line-height: 1.5;
  border: 1px solid var(--border);
  padding: 8px 6px;
  height: 52px;
  box-sizing: border-box;
}

/* ────────────────────────────────────────
   BRAND GRID  (Trusted By — about.html)
   Two columns, like the photography category pages with subfolders:
   a static, quiet grid of greyscale logos on the LEFT, and the
   selected brand's example of work in a sticky preview on the RIGHT.
   Each logo is a button; selecting one (hover on pointer, click on
   touch) loads its work into the preview and turns the logo full
   colour. Works identically on touch and desktop.
──────────────────────────────────────── */
.brand-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
  margin: 36px 0 0;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.brand-tile {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}
.brand-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Logos are greyscale by default; full colour on hover and when active */
.brand-tile-logo {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.brand-tile-logo.invert { filter: grayscale(1) invert(1); opacity: 0.5; }

.brand-tile:hover .brand-tile-logo,
.brand-tile[aria-pressed="true"] .brand-tile-logo {
  filter: none;
  opacity: 1;
}
.brand-tile:hover .brand-tile-logo.invert,
.brand-tile[aria-pressed="true"] .brand-tile-logo.invert {
  filter: invert(1);
  opacity: 1;
}

.brand-tile-wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--text-sub);
  opacity: 0.62;
  text-align: center;
  line-height: 1.3;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.brand-tile:hover .brand-tile-wordmark,
.brand-tile[aria-pressed="true"] .brand-tile-wordmark {
  color: var(--text);
  opacity: 1;
}

/* ── Selected work preview panel ──
   Sits in the right column (sticky, like the photography subfolder
   pages). The image is shown in full — never cropped or stretched —
   so vertical/portrait shots appear complete. */
.brand-preview {
  position: sticky;
  top: 120px;
  margin: 0;
}
.brand-preview-imgwrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.brand-preview-img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity 0.35s var(--ease-smooth);
}
.brand-preview-img.is-fading { opacity: 0; }
.brand-preview-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}
.brand-preview-kicker {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.brand-preview-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--text);
}
.brand-preview-case {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color 0.2s ease, gap 0.2s ease;
}
.brand-preview-case:hover { border-bottom-color: var(--gold); gap: 9px; }
.brand-preview-case[hidden] { display: none; }

@media (max-width: 1024px) {
  .brand-layout { grid-template-columns: 280px 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .schools-inner { grid-template-columns: 1fr; }
  .school-list { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }

  /* Trusted By on mobile: stack the two columns, then pack the unit —
     logos + selected image — into a single screen so the connected work
     is visible without scrolling. Reclaim vertical space: tighter
     section, smaller title, no intro paragraph, denser grid, capped image. */
  #brands.section { padding: 48px 0; }
  #brands .section-kicker { margin-bottom: 10px; }
  #brands .schools-text .section-title {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
  #brands .schools-text > p { display: none; }

  .brand-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
  }
  .brand-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }
  .brand-tile { padding: 5px; }
  .brand-tile-wordmark { font-size: 0.6rem; }

  .brand-preview { position: static; }
  .brand-preview-img { max-height: 32vh; }
  .brand-preview-caption { margin-top: 8px; }
  .brand-preview-name { font-size: 1rem; }
}

/* ────────────────────────────────────────
   CASE STUDIES CAROUSEL  (marketing.html)
   One slide visible at a time; the track slides horizontally.
   Arrows + dots drive it; JS (initCaseCarousel) sets --cs-index.
──────────────────────────────────────── */
.case-studies { background: var(--bg); }
.case-studies .container { margin-bottom: 36px; }

.cs-carousel {
  position: relative;
  width: var(--container);
  margin-inline: auto;
}
.cs-carousel__viewport { overflow: hidden; border-radius: 4px; }
.cs-carousel__track {
  --cs-index: 0;
  display: flex;
  transform: translateX(calc(var(--cs-index) * -100%));
  transition: transform 0.6s var(--ease-smooth);
}

.cs-slide { flex: 0 0 100%; min-width: 0; }
.cs-slide__link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.cs-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-smooth);
}
.cs-slide__link:hover .cs-slide__img,
.cs-slide__link:focus-visible .cs-slide__img { transform: scale(1.04); }
.cs-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.35) 55%, rgba(10,10,10,0.85) 100%);
}
.cs-slide__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(24px, 4vw, 56px);
  max-width: 640px;
}
.cs-slide__kicker {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 12px;
}
.cs-slide__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  margin-bottom: 12px;
}
.cs-slide__desc {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: 18px;
}
.cs-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 3px;
  transition: gap 0.2s ease, border-color 0.2s ease;
}
.cs-slide__link:hover .cs-slide__cta,
.cs-slide__link:focus-visible .cs-slide__cta { gap: 11px; border-bottom-color: #fff; }

.cs-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.cs-carousel__arrow:hover { background: #fff; }
.cs-carousel__arrow svg { width: 24px; height: 24px; }
.cs-carousel__arrow--prev { left: 16px; }
.cs-carousel__arrow--next { right: 16px; }
.cs-carousel__arrow[disabled] { opacity: 0; pointer-events: none; }

.cs-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.cs-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-gold);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-carousel__dot.is-active { background: var(--text); transform: scale(1.25); }

@media (max-width: 768px) {
  .cs-slide__link { aspect-ratio: 4 / 5; }
  .cs-carousel__arrow { width: 40px; height: 40px; }
  .cs-carousel__arrow svg { width: 20px; height: 20px; }
  .cs-carousel__arrow--prev { left: 8px; }
  .cs-carousel__arrow--next { right: 8px; }
}

/* ────────────────────────────────────────
   06. TESTIMONIALS
──────────────────────────────────────── */
.testimonials { background: var(--bg-2); }
.testimonials .container { margin-bottom: 48px; }
.testimonial-track {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
.testimonial {
  background: var(--bg-card);
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  position: relative;
}
.testimonial::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.7;
  color: var(--gold);
  opacity: 0.25;
  position: absolute;
  top: 24px; left: 24px;
}
.testimonial p {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-sub);
  position: relative;
  padding-top: 24px;
}
.testimonial footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.testimonial cite {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}

@media (max-width: 900px) { .testimonial-track { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────
   07. SERVICES DETAIL
──────────────────────────────────────── */
.services { background: var(--bg); border-top: 1px solid var(--border); }
.services .container { margin-bottom: 56px; }


/* ── Services accordion ── */
.services-accordion {
  display: flex;
  gap: 6px;
  width: var(--container);
  margin: 0 auto;
  min-height: clamp(520px, 60vh, 720px);
}
.acc-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: flex 0.7s var(--ease-smooth), background 0.4s var(--ease-smooth);
  min-width: 0;
}
.acc-panel.acc-panel--open {
  flex: 5;
  background: var(--bg);
}
.acc-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
  height: 100%;
  padding: clamp(20px, 2.5vw, 32px) clamp(18px, 2vw, 28px);
  border: none;
  background: transparent;
  cursor: default;
  text-align: left;
  color: inherit;
  font: inherit;
  z-index: 2;
}
.acc-panel.acc-panel--open .acc-trigger {
  pointer-events: none;
}
.acc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text);
  flex-shrink: 0;
  transition: color 0.4s;
}
.acc-icon svg { width: 100%; height: 100%; }
.acc-num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-top: auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: opacity 0.3s;
}
.acc-panel.acc-panel--open .acc-num {
  writing-mode: horizontal-tb;
  transform: none;
  margin-top: 0;
  margin-bottom: 4px;
}
.acc-title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1.1;
  transition: font-size 0.4s var(--ease-smooth);
}
.acc-panel.acc-panel--open .acc-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.acc-body {
  position: absolute;
  inset: 0;
  padding: clamp(28px, 3.5vw, 56px);
  padding-top: clamp(120px, 14vw, 200px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-smooth);
  transition-delay: 0s;
  overflow: hidden;
  z-index: 1;
}
.acc-panel.acc-panel--open .acc-body {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.25s;
}
.acc-lead {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-style: italic;
  font-weight: 300;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
  max-width: 38ch;
}
.acc-body > p {
  font-size: 0.92rem;
  color: var(--text-sub);
  line-height: 1.75;
  margin: 0;
  max-width: 56ch;
}
.acc-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 28px;
  max-width: 58ch;
}
.acc-list li {
  font-size: 0.78rem;
  color: var(--text-sub);
  padding-left: 14px;
  position: relative;
  line-height: 1.6;
}
.acc-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text);
  font-size: 0.7rem;
}
.acc-cta {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  align-self: flex-start;
  padding-bottom: 4px;
  margin-top: 10px;
  transition: opacity 0.2s;
}
.acc-cta:hover { opacity: 0.6; }

/* Tablet/mobile: stacked vertical accordion, all open */
@media (max-width: 1024px) {
  .services-accordion {
    flex-direction: column;
    height: auto;
    gap: 1px;
    background: var(--border);
  }
  .acc-panel,
  .acc-panel.acc-panel--open {
    flex: 1 1 auto;
    background: var(--bg);
    border: none;
  }
  .acc-trigger {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 22px clamp(18px, 4vw, 32px);
    height: auto;
  }
  .acc-num,
  .acc-panel.acc-panel--open .acc-num {
    writing-mode: horizontal-tb;
    transform: none;
    margin: 0;
  }
  .acc-title,
  .acc-panel.acc-panel--open .acc-title {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: 0;
  }
  .acc-body {
    position: static;
    padding: 0 clamp(18px, 4vw, 32px) 28px clamp(60px, 9vw, 78px);
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
  }
  .acc-list { grid-template-columns: 1fr; }
}

.retainer-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 48px;
}
.retainer-banner h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
}
.retainer-banner p {
  font-size: 0.9rem;
  color: var(--text-sub);
  line-height: 1.7;
  max-width: 600px;
}

.partnership-note {
  margin-top: clamp(48px, 6vw, 80px);
  max-width: 760px;
}
.partnership-note p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.85;
  margin-bottom: 18px;
}
.partnership-note p:first-child::first-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
.partnership-note p:last-child {
  font-size: 0.92rem;
  color: var(--text-sub);
  font-style: italic;
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .retainer-banner { flex-direction: column; align-items: flex-start; }
}

/* ────────────────────────────────────────
   08. ISLE OF MAN
──────────────────────────────────────── */
.iom { background: var(--bg-2); border-top: 1px solid var(--border); }
.iom-inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.iom-image { position: relative; overflow: hidden; }
.iom-image .img-placeholder { width: 100%; }

.iom-text .section-title { margin-bottom: 24px; }
.iom-text p { font-size: 0.95rem; color: var(--text-sub); line-height: 1.8; margin-bottom: 16px; }
.iom-quote {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-style: italic;
  font-weight: 300;
  color: var(--text-sub);
  border-left: 2px solid var(--gold);
  padding: 16px 24px;
  margin: 28px 0;
  line-height: 1.55;
}
.iom-targets p {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.target-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.target-pills span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 1px;
  transition: border-color 0.2s, color 0.2s;
}
.target-pills span:hover { border-color: var(--border-gold); color: var(--gold); }

@media (max-width: 900px) {
  .iom-inner { grid-template-columns: 1fr; }
  .iom-image { order: 2; }
  .iom-text  { order: 1; }
}

/* ────────────────────────────────────────
   09. PRINTS CTA (landing page teaser)
──────────────────────────────────────── */
.prints-cta {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.prints-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 28px 40px;
  align-items: center;
}
.prints-cta-text { grid-column: 1; }
.prints-cta-text .section-kicker { margin-bottom: 12px; }
.prints-cta-text .section-title  { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 16px; }
.prints-cta-text p  { font-size: 0.9rem; color: var(--text-sub); max-width: 480px; line-height: 1.7; }
.prints-cta-images {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  gap: 3px;
  align-self: stretch;
  max-height: 260px;
}
.prints-cta-images img {
  width: 130px;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-smooth);
}
.prints-cta-images img:hover { transform: scale(1.03); }
.prints-cta-btn { grid-column: 1; align-self: start; }
@media (max-width: 768px) {
  .prints-cta-inner { grid-template-columns: 1fr; }
  .prints-cta-images { grid-column: 1; grid-row: auto; max-height: 160px; }
  .prints-cta-images img { width: 100%; flex: 1; }
}

/* ────────────────────────────────────────
   09. FINE ART PRINTS (shop page)
──────────────────────────────────────── */
.prints { background: var(--bg); border-top: 1px solid var(--border); }
.prints .container { margin-bottom: 48px; }
.prints-intro {
  font-size: 1rem;
  color: var(--text-sub);
  max-width: 600px;
  margin-top: 20px;
  line-height: 1.75;
}
.prints-grid {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--border);
  margin-bottom: 40px;
}
.print-card {
  background: var(--bg-card);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s;
  position: relative;
}
.print-card:hover { background: var(--bg-3); }
.print-card-img {
  position: relative;
  overflow: hidden;
}
.print-card-img .img-placeholder { aspect-ratio: 3/2; }
.print-card-img img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-smooth);
}
.print-card:hover .img-placeholder,
.print-card:hover img { transform: scale(1.04); }
.print-card-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(13,13,13,0.85);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border-gold);
}
.print-card-body {
  padding: 20px 22px 22px;
}
.print-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 4px;
}
.print-card-subtitle {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.print-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.print-card-price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
}
.print-card-price span {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: var(--font-body);
  letter-spacing: 0.08em;
}
.print-card-editions {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.prints-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

@media (max-width: 900px) { .prints-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prints-grid { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────
   10. CONTACT
──────────────────────────────────────── */
.contact { background: var(--bg-2); border-top: 1px solid var(--border); }
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: start;
}
.contact-text .section-title { margin-bottom: 20px; }
.contact-text > p { font-size: 0.95rem; color: var(--text-sub); line-height: 1.8; margin-bottom: 32px; }
.contact-details { display: flex; flex-direction: column; gap: 14px; }
.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-sub);
  transition: color 0.2s;
}
.contact-link:hover { color: var(--text); }
.contact-link svg { color: var(--gold); flex-shrink: 0; }
.contact-link--whatsapp:hover { color: #25D366; }
.contact-link--whatsapp:hover svg { color: #25D366; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.required { color: var(--gold); }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A7570' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--border-gold); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-success {
  font-size: 0.85rem;
  color: #5ba77a;
  background: rgba(91,167,122,0.08);
  border: 1px solid rgba(91,167,122,0.2);
  padding: 12px 16px;
  text-align: center;
}
.form-error {
  font-size: 0.85rem;
  color: #c06060;
  background: rgba(192,96,96,0.08);
  border: 1px solid rgba(192,96,96,0.2);
  padding: 12px 16px;
  text-align: center;
}
[hidden] { display: none !important; }

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────
   FOOTER
──────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
  background: var(--bg);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand { grid-column: 1; }
.footer-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 4px;
}
.footer-descriptor {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
}
.footer-nav a {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
}
.footer-nav a:hover { color: var(--gold); }
.footer-social {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.footer-social a {
  color: var(--text-muted);
  transition: color 0.2s;
}
.footer-social a:hover { color: var(--gold); }
.footer-copy {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  width: var(--container);
  margin-inline: auto;
}

@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-social { justify-content: center; }
  .footer-nav { justify-content: center; }
}

/* ────────────────────────────────────────
   CART SIDEBAR
──────────────────────────────────────── */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-smooth);
}
.cart.open { transform: translateX(0); }
.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-header h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
}
.cart-close {
  color: var(--text-muted);
  transition: color 0.2s;
  padding: 4px;
}
.cart-close:hover { color: var(--text); }
.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--text-muted);
  padding: 40px 28px;
  text-align: center;
}
.cart-empty p { font-size: 0.85rem; line-height: 1.6; }
.cart-empty-icon {
  width: 48px; height: 48px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
}
.cart-item-img {
  width: 72px; height: 52px;
  object-fit: cover;
}
.cart-item-img-ph {
  width: 72px; height: 52px;
  background: var(--ph, #1a1410);
}
.cart-item-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 3px;
}
.cart-item-size {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cart-item-price { font-family: var(--font-display); font-size: 1rem; color: var(--gold); }
.cart-item-remove {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.2s;
  padding: 4px;
  align-self: center;
}
.cart-item-remove:hover { color: #c06060; }
.cart-footer {
  border-top: 1px solid var(--border);
  padding: 24px 28px;
  flex-shrink: 0;
  background: var(--bg-3);
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.cart-total-row span:first-child {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#cart-total-display {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
}
#paypal-button-container { margin-bottom: 14px; }
.cart-secure-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cart-secure-note svg { flex-shrink: 0; color: var(--gold); }

/* ────────────────────────────────────────
   PORTFOLIO LIGHTBOX
──────────────────────────────────────── */
/* ────────────────────────────────────────
   STATIC PHOTO GRID  (category pages)
   Simple CSS masonry. Edit images via js/galleries.js.
──────────────────────────────────────── */
.photo-grid {
  columns: 3 280px;
  column-gap: 6px;
  width: var(--container);
  margin: 48px auto 0;
}
.photo-item {
  break-inside: avoid;
  margin: 0 0 6px;
  overflow: hidden;
  background: var(--bg-3);
  cursor: pointer;
}
.photo-item img {
  width: 100%;
  display: block;
  transition: transform 0.6s var(--ease-smooth), opacity 0.4s;
}
.photo-item:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .photo-grid { columns: 2 160px; } }

/* ────────────────────────────────────────
   EVENT SCROLL  (category pages with multiple subfolders)
   Left: sticky nav — logo, name, short write-up per event/subfolder.
   Right: stacked photo sections, one per event. Scrolling the right
   column updates which left-nav entry is active (see initEventScroll).
   Mobile: nav collapses to a horizontal row of logo-only pills.
──────────────────────────────────────── */
.event-scroll {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  width: var(--container);
  margin: 48px auto 0;
  align-items: start;
}

.event-scroll__nav {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-scroll__item {
  display: block;
  padding: 18px 4px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.4s var(--ease-smooth);
}
.event-scroll__item:first-child { border-top: none; }
.event-scroll__item.is-active { opacity: 1; }

.event-scroll__item-logo {
  display: block;
  height: 30px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 12px;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}
.event-scroll__item-logo.invert { filter: grayscale(1) invert(1); }
.event-scroll__item.is-active .event-scroll__item-logo { filter: none; }
.event-scroll__item.is-active .event-scroll__item-logo.invert { filter: invert(1); }

/* RC mark: pre-cropped square of the green circle monogram (crookall-mark.png). */
.event-scroll__item-logo.rc-mark {
  width: 34px;
  height: 34px;
  max-width: none;
  object-fit: contain;
}

.event-scroll__item-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 8px;
}
.event-scroll__item-blurb {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-sub);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease-smooth), opacity 0.4s ease;
}
.event-scroll__item.is-active .event-scroll__item-blurb {
  max-height: 280px;
  opacity: 1;
}

.event-scroll__section-note {
  font-size: 0.9rem;
  color: var(--text-sub);
  margin: 0 0 20px;
}
.event-scroll__section-note .link-arrow { font-size: 0.9rem; }

.event-scroll__feed {
  display: flex;
  flex-direction: column;
  gap: 80px;
  min-width: 0;
}
.event-scroll__section { scroll-margin-top: 120px; }
.event-scroll__section .photo-grid { width: 100%; margin: 0; }

/* Mobile: nav becomes a bar fixed to the bottom of the screen, logo-only pills,
   horizontally scrollable if there isn't room for all of them. */
@media (max-width: 900px) {
  .event-scroll { grid-template-columns: 1fr; gap: 28px; padding-bottom: 84px; }
  .event-scroll__nav {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  }
  .event-scroll__item {
    flex: 0 0 auto;
    border-top: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 16px;
    opacity: 0.6;
    white-space: nowrap;
  }
  .event-scroll__item.is-active { opacity: 1; border-color: var(--border-gold); }
  .event-scroll__item-logo { height: 18px; margin-bottom: 0; max-width: 100px; }
  .event-scroll__item-blurb { display: none; }
  /* Logo-only on mobile — but if an event has no logo, fall back to its name so the pill isn't empty */
  .event-scroll__item:has(.event-scroll__item-logo) .event-scroll__item-name { display: none; }
  .event-scroll__item-name { font-size: 0.8rem; margin-bottom: 0; }

  /* Uniform nav (Ramsey Crookall): every event shares the same circular
     mark, so the logo alone can't tell them apart. Show a small circle icon
     + the event NAME, in compact pills that fit the bar without horizontal
     scrolling. Scoped to .event-scroll__nav--uniform so mixed-logo navs
     (e.g. the Events page) keep the standard scrollable-pill layout above
     rather than being crammed into equal-width pills. */
  .event-scroll__nav--uniform {
    gap: 6px;
    padding: 10px 10px;
    justify-content: space-between;
  }
  .event-scroll__nav--uniform .event-scroll__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    border-radius: 12px;
    justify-content: center;
  }
  .event-scroll__nav--uniform .event-scroll__item-logo.rc-mark { width: 22px; height: 22px; flex: 0 0 auto; }
  /* override the logo-hides-name rule for uniform navs, and show short labels */
  .event-scroll__nav--uniform .event-scroll__item .event-scroll__item-name { display: block; }
  .event-scroll__nav--uniform .event-scroll__item-name {
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* swap to short label text where provided */
  .event-scroll__nav--uniform .event-scroll__item-name[data-short]::after {
    content: attr(data-short);
  }
  .event-scroll__nav--uniform .event-scroll__item-name[data-short] { font-size: 0; }
  .event-scroll__nav--uniform .event-scroll__item-name[data-short]::after { font-size: 0.7rem; }
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5,5,5,0.96);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-close {
  position: absolute;
  top: 24px; right: 28px;
  color: var(--text-muted);
  transition: color 0.2s;
  padding: 8px;
  z-index: 10;
}
.lightbox-close:hover { color: var(--text); }
.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: var(--text-muted);
  padding: 16px 20px;
  transition: color 0.2s;
  z-index: 10;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-prev:hover, .lightbox-next:hover { color: var(--text); }
.lightbox-inner {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox-img-wrap { position: relative; }
#lightbox-img {
  max-width: 85vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}
.lightbox-placeholder {
  max-width: 85vw;
  min-width: 400px;
  min-height: 300px;
  background: var(--ph, #1a1410);
}

/* Editorial card displayed as a lightbox slide */
.lightbox-placeholder.lb-editorial {
  background: var(--bg-2);
  min-width: 0;
  min-height: 0;
  width: min(680px, 85vw);
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  scrollbar-width: none;
}
.lightbox-placeholder.lb-editorial::-webkit-scrollbar { display: none; }
.lightbox-placeholder.lb-editorial .gallery-editorial-card {
  background: transparent;
  border: none;
  border-left: none;
  padding: 0;
}

/* Editorial panel — sits beside the image in a row layout */
.lightbox-editorial-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
}
.lightbox-editorial-panel.visible {
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 52px);
  border-left: 1px solid var(--border);
  max-height: 90vh;
}
.lightbox-editorial-panel.visible::-webkit-scrollbar { display: none; }
.lightbox-editorial-panel .gallery-editorial-card {
  background: transparent;
  border: none;
  padding: 0;
}
.lightbox-editorial-panel .gec-title {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  max-width: 16ch;
}
.lightbox-editorial-panel .gec-body {
  max-width: 38ch;
}
/* Switch lightbox to side-by-side when panel is active */
.lightbox.has-editorial .lightbox-inner {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  max-width: min(1360px, 96vw);
  max-height: 90vh;
  overflow: hidden;
}
.lightbox.has-editorial .lightbox-img-wrap {
  flex: 0 0 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lightbox.has-editorial #lightbox-img {
  max-width: 100%;
  max-height: 86vh;
  height: auto;
  width: auto;
  object-fit: contain;
}
.lightbox.has-editorial .lightbox-meta { display: none; }
.lightbox.has-editorial .lightbox-editorial-panel {
  flex: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  .lightbox-editorial-panel { display: none !important; }
  .lightbox.has-editorial .lightbox-inner {
    flex-direction: column;
    max-width: 90vw;
    max-height: 90vh;
  }
  .lightbox.has-editorial .lightbox-img-wrap { flex: none; padding: 0; }
  .lightbox.has-editorial #lightbox-img { max-height: 60vh; max-width: 90vw; }
  .lightbox.has-editorial .lightbox-meta { display: block; }
}
.lightbox-meta { text-align: center; }
.lightbox-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 400;
}
.lightbox-year {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}

/* ────────────────────────────────────────
   PRINT DETAIL MODAL
──────────────────────────────────────── */
.print-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.print-modal-overlay.open { opacity: 1; pointer-events: all; }
.print-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  width: min(880px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  z-index: 401;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s var(--ease-smooth);
}
.print-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%);
}
.print-modal-close {
  position: absolute;
  top: 20px; right: 20px;
  color: var(--text-muted);
  transition: color 0.2s;
  padding: 6px;
  z-index: 10;
}
.print-modal-close:hover { color: var(--text); }
.print-modal-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
}
.print-modal-img {
  position: relative;
}
.print-modal-img .img-placeholder { height: 100%; aspect-ratio: unset; }
.print-modal-img img { width: 100%; height: auto; display: block; }
.print-modal-body { padding: 36px 32px; }
.print-modal-category {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.print-modal-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 6px;
}
.print-modal-subtitle {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.print-modal-desc {
  font-size: 0.88rem;
  color: var(--text-sub);
  line-height: 1.75;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.print-modal-edition {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.print-modal-edition::before {
  content: '';
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.print-modal-sizes { margin-bottom: 24px; }
.print-modal-sizes-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.size-options { display: flex; flex-direction: column; gap: 6px; }
.size-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 1px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 0.85rem;
  color: var(--text-sub);
}
.size-option input[type="radio"] { display: none; }
.size-option:has(input:checked),
.size-option.selected { border-color: var(--border-gold); background: var(--gold-dim); color: var(--text); }
.size-option-price { font-family: var(--font-display); font-size: 1rem; color: var(--gold); }
.print-modal-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.print-modal-materials {
  margin-top: 20px;
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

@media (max-width: 700px) {
  .print-modal-inner { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────
   WHATSAPP FLOATING BUTTON
──────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: 92px; right: 28px;
  width: 48px; height: 48px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 499;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  color: white;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.5); }

/* ────────────────────────────────────────
   RESPONSIVE UTILITIES
──────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .retainer-banner { flex-direction: column; }
}

/* ────────────────────────────────────────
   SERVICE PIN  (Marketing page)
   Adapted from the Orchard "sectors" framework: ONE pinned section.
   As the user scrolls through it, a full-bleed visual cross-fades per
   service, a numbered sidebar tracks the active one, and a glass text
   card swaps. Seven services × 100vh of scroll. JS toggles .is-active.
──────────────────────────────────────── */
.svc-pin {
  position: relative;
  background: #000;
  min-height: 700vh;          /* 7 services × 100vh */
}
.svc-pin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
.svc-pin__stage { position: relative; width: 100%; height: 100%; }

/* Cross-fading full-bleed visuals */
.svc-pin__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s ease, transform 1.4s ease;
}
.svc-pin__slide.is-active { opacity: 1; transform: scale(1); }

/* Device slide (Web Design): a clean dark surface holding the laptop
   mockup — NOT a full-bleed video. The laptop floats; the glass card
   sits over it. */
/* Plain dark slide (Web Design): a clean dark surface — the laptop lives
   INSIDE the card, not in the background. */
.svc-pin__slide--plain {
  background: radial-gradient(130% 120% at 60% 35%, #2a2c31 0%, #15161a 72%);
}
.svc-pin__slide--video,
.svc-pin__slide--mosaic {
  background: #0a0a0c;
  overflow: hidden;
}
.svc-pin__slide-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* Big faint watermark of the service name, sitting high on the slide so
   it reads across the top, above the card. */
.svc-pin__wm {
  position: absolute;
  left: 50%; top: clamp(40px, 9vh, 110px);
  transform: translateX(-50%);
  width: 130%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(5rem, 15vw, 15rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  color: #fff;
  opacity: 0.08;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Wide card (Web Design): transparent wrapper — no glass background.
   Laptop sits freely on the dark slide. Text column gets its own glass box. */
.svc-pin__card--wide {
  left: 50%;
  transform: translate(-50%, calc(-50% + 16px));
  width: min(84vw, 1100px);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: 0;
  align-items: center;
  overflow: visible;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}
.svc-pin__card--wide .svc-pin__card-text {
  /* background: rgba(255,255,255,0.88); */
  /* backdrop-filter: blur(18px) saturate(1.4); */
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 4px;
  /* box-shadow: 0 18px 60px rgba(0,0,0,0.28); */
  padding: 2.5rem 2.5rem;
  color: var(--text);
}
.svc-pin__card--wide.is-active {
  transform: translate(-50%, -50%);
}
.svc-pin__card-text,
.svc-pin__card-visual { min-width: 0; }
.svc-pin__card-visual { order: 1; }   /* visual first = left */
.svc-pin__card-text   { order: 2; }
/* Flipped: visual on the right */
.svc-pin__card--wide.svc-pin__card--flip { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.svc-pin__card--flip .svc-pin__card-visual { order: 2; }
.svc-pin__card--flip .svc-pin__card-text   { order: 1; align-self: center; }
/* E-E-A-T grid fills the full right column height */
.svc-pin__card--flip .svc-eeat-grid {
  margin: -3.25rem -3.5rem -3.25rem -1rem;
}
/* In-card images sit flat, rounded; device mockups / RD shot stay clean */
.svc-pin__card-img { width: 100%; display: block; border-radius: 4px; box-shadow: 0 16px 38px rgba(0,0,0,0.22); }
.svc-pin__card-img.svc-plain-shot { box-shadow: none; border-radius: 0; }
/* SEO E-E-A-T grid */
.svc-eeat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  position: relative;
  align-self: stretch;
}
/* Single horizontal line */
.svc-eeat-grid::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 1;
}
/* Single vertical line */
.svc-eeat-grid::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 1;
}
.svc-eeat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  background: transparent;
}
.svc-eeat-cell svg {
  width: 80px;
  height: 80px;
  color: var(--text);
  opacity: 0.65;
  flex-shrink: 0;
}
.svc-eeat-cell span {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.7;
}
/* Communication — typewriter visual */
.svc-words-visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(28px, 4vw, 52px);
  min-height: 200px;
}
/* Communication card: wider text column, glass background restored */
.svc-pin__card--comm {
  grid-template-columns: 1fr 1.1fr;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
  border-radius: 4px;
  padding: 0;
}
.svc-pin__card--comm .svc-pin__card-text {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  padding: 2.5rem 3rem 2.5rem 2rem;
}
.svc-words-quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 100;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--text);
  white-space: pre-wrap;
}
.svc-words-quote::after {
  content: '|';
  display: inline;
  margin-left: 2px;
  color: var(--text);
  animation: cursorBlink 0.7s step-end infinite;
}
.svc-words-quote.svc-words--done::after {
  animation: none;
  opacity: 0;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Content Creation — collage image fits within the visual column */
.svc-content-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-content-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.18));
}
/* Background-image visual panel (Marketing Design card) */
.svc-pin__card-visual--bg {
  background-size: cover;
  background-position: center;
  opacity: 1;
  border-radius: 4px;
  min-height: 280px;
}
/* tighter list in the text column */
.svc-pin__card--wide .svc-pin__card-list { grid-template-columns: 1fr 1fr; gap: 5px 16px; margin-bottom: 1.1rem; }
.svc-pin__card--wide h2 { margin-bottom: 0.8rem; }
.svc-pin__card--wide .svc-pin__card-text > p { margin-bottom: 0.9rem; }
/* the laptop sits flat inside the card — no extra box/shadow */
.svc-pin__card-visual .laptop-device { width: 100%; filter: drop-shadow(0 16px 38px rgba(0,0,0,0.3)); }

/* Web Design card: laptop bleeds outside the tile on the left so it
   straddles the tile edge (roughly 50/50). Width is boosted so the
   device reads large; negative margin pulls it into the dark slide bg. */
[data-laptop] {
  margin-right: -40px;
  width: 100%;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.55));
  position: relative;
  z-index: 2;
}

@media (max-width: 820px) {
  .svc-social-slide--iom { grid-template-columns: 1fr; }
  .svc-social-slide__iom-img { display: none; }
  .svc-social-slide__title { font-size: 1.1rem; }
  #svc-card-social-media .svc-pin__card-list { grid-template-columns: 1fr; }
}

.svc-pin__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0.5) 55%, rgba(10,10,12,0.78) 100%);
}

/* Back-to-top X (only when the stage fills the viewport) */
.svc-pin__top {
  position: absolute; top: 2rem; right: 2.5rem; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: #fff; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.35); border-radius: 50%;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transform: scale(0.85);
  transition: background 0.25s, transform 0.3s, border-color 0.25s, opacity 0.3s;
}
.svc-pin__top.is-visible { opacity: 1; pointer-events: auto; transform: scale(1); }
.svc-pin__top:hover { background: rgba(255,255,255,0.15); transform: scale(1.08); }

/* Numbered sidebar nav */
.svc-pin__nav {
  position: absolute; top: 50%; left: 4rem; transform: translateY(-50%);
  z-index: 3; max-width: 460px;
}
.svc-pin__eyebrow {
  font-family: var(--font-display);
  font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 1.6rem;
}
.svc-pin__list { list-style: none; padding: 0; margin: 0; }
.svc-pin__list-item { position: relative; margin: 0; }
.svc-pin__list-item::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -2rem; right: -1.5rem;
  background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0) 100%);
  opacity: 0; transition: opacity 0.4s ease; z-index: 0; pointer-events: none;
}
.svc-pin__list-item.is-active::before { opacity: 1; }
.svc-pin__list-item a {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0;
  font-family: var(--font-display); font-size: 1rem; font-weight: 300; line-height: 1.25;
  letter-spacing: 0.02em; color: rgba(255,255,255,0.55); text-decoration: none;
  transition: color 0.3s, transform 0.3s, font-size 0.3s;
}
.svc-pin__list-item a:hover { color: #fff; }
.svc-pin__list-item.is-active a { color: #fff; font-size: 1.18rem; transform: translateX(8px); }
.svc-pin__list-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; opacity: 0.6; }
.svc-pin__list-icon svg { width: 1.25rem; height: 1.25rem; display: block; }
.svc-pin__list-item.is-active .svc-pin__list-icon { opacity: 1; }

/* Glass text card (swaps per service) */
.svc-pin__cards {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 0 2rem;
}
.svc-pin__card {
  position: absolute;
  top: calc(50% + 44px);
  left: 50%;
  transform: translate(-50%, calc(-50% + 16px));
  width: min(90vw, 1280px);
  max-width: none;
  padding: 3.75rem 3.5rem;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 4px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.svc-pin__card.is-active { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.svc-pin__card-kicker {
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.7rem;
}
.svc-wm-label {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  min-height: 1em;
}
.svc-pin__card h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: 0.02em;
  margin: 0 0 1.1rem; color: var(--text);
}
.svc-pin__card p { margin: 0 0 1.2rem; font-size: 0.96rem; line-height: 1.72; color: var(--text-sub); }
.svc-pin__card-list {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px;
  margin: 0 0 1.4rem;
}
.svc-pin__card-list li { font-size: 0.78rem; color: var(--text-sub); padding-left: 15px; position: relative; }
.svc-pin__card-list li::before { content: '—'; position: absolute; left: 0; color: var(--text-muted); }
.svc-pin__card .btn { margin-top: 0.3rem; }

/* Prev/next bottom nav (shown when the sidebar is hidden) */
.svc-pin__bottom-nav {
  display: none; position: absolute; left: 0; right: 0; bottom: 1.75rem; z-index: 3;
  align-items: center; justify-content: space-between; gap: 1rem; padding: 0 2.5rem;
}
.svc-pin__arrow {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.2rem;
  color: rgba(255,255,255,0.92); text-decoration: none; max-width: 48%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: color 0.25s, transform 0.25s, opacity 0.25s;
}
.svc-pin__arrow--prev:hover { transform: translateX(-3px); }
.svc-pin__arrow--next:hover { transform: translateX(3px); }
.svc-pin__arrow.is-disabled { opacity: 0; pointer-events: none; }
.svc-pin__arrow svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.85; }
.svc-pin__arrow-label { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.svc-pin__arrow--next .svc-pin__arrow-label { text-align: right; }
.svc-pin__arrow-dir {
  font-family: var(--font-display); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7;
}
.svc-pin__arrow-name {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.2rem;
}

/* Invisible scroll anchors — each occupies one viewport so #links land right */
.svc-pin__anchors { position: absolute; inset: 0; pointer-events: none; }
.svc-pin__anchor { position: absolute; left: 0; width: 1px; height: 1px; }
.svc-pin__anchor:nth-child(1) { top: 0; }
.svc-pin__anchor:nth-child(2) { top: 100vh; }
.svc-pin__anchor:nth-child(3) { top: 200vh; }
.svc-pin__anchor:nth-child(4) { top: 300vh; }
.svc-pin__anchor:nth-child(5) { top: 400vh; }
.svc-pin__anchor:nth-child(6) { top: 500vh; }
.svc-pin__anchor:nth-child(7) { top: 600vh; }

/* Hide sidebar list on narrower screens; show prev/next + dock card */
/* When the wide card crowds the vertical sidebar, the services nav
   becomes a horizontal numbered bar docked at the bottom. */
@media (max-width: 1800px) {
  .svc-pin__nav {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    max-width: none;
    z-index: 4;
    padding: 0.75rem 1.5rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(8,8,10,0.72));
  }
  .svc-pin__eyebrow { display: none; }
  .svc-pin__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: clamp(0.75rem, 2.5vw, 2.5rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .svc-pin__list::-webkit-scrollbar { display: none; }
  .svc-pin__list-item::before { display: none; }   /* drop the vertical highlight bar */
  .svc-pin__list-item a {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0;
    white-space: nowrap;
    font-size: 0.78rem;
  }
  .svc-pin__list-item.is-active a { font-size: 0.82rem; transform: none; }
  .svc-pin__list-icon { width: 1.25rem; opacity: 0.7; }
  .svc-pin__list-icon svg { width: 1.1rem; height: 1.1rem; }
  .svc-pin__cards { padding-bottom: 5.5rem; }       /* keep card clear of the bottom bar */
  .svc-pin__bottom-nav { display: none; }           /* horizontal list replaces arrows */
}
@media (max-width: 900px) {
  /* ── Mobile: each card fills the full viewport above the bottom nav ── */
  .svc-pin__cards { padding: 0; }

  /* All card variants: full-bleed, single column, glass restored */
  .svc-pin__card,
  .svc-pin__card--wide,
  .svc-pin__card--wide.svc-pin__card--flip,
  .svc-pin__card--comm {
    position: absolute;
    top: 58px; /* clear fixed nav */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100% - 58px - 4rem); /* viewport minus nav and bottom bar */
    transform: none !important;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Restore glass for all wide-card variants */
    background: rgba(245,245,245,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .svc-pin__card.is-active,
  .svc-pin__card--wide.is-active { transform: none !important; }

  /* ── MOBILE CARD LAYOUT: text top 2/3, visual bottom 1/3 ── */

  /* Text column: top 2/3 */
  .svc-pin__card-text {
    order: 1;
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Visual column: bottom 1/3 */
  .svc-pin__card-visual {
    order: 2;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    margin: 0 !important;
    position: relative;
  }
  /* Any img/video inside the visual strip fills it — except inside the
     laptop, whose bezel + Orchard mini-site imgs size themselves. */
  .svc-pin__card-visual img:not(.laptop-device *),
  .svc-pin__card-visual video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* PNG collage: contain so it's not cropped */
  .svc-pin__card-visual img[src*="Untitled"] {
    object-fit: contain;
    background: transparent;
  }

  /* Web Design: the same live Orchard laptop miniature as desktop
     (the autoplay video fallback is gone); centre it in its zone. */
  [data-laptop-track] .svc-pin__card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Marketing Design: bg-image fills the visual area */
  .svc-pin__card-visual--bg {
    height: 100%;
    border-radius: 0;
    opacity: 0.7;
  }

  /* E-E-A-T grid fills the visual area */
  .svc-eeat-grid { height: 100%; }
  .svc-eeat-cell { padding: 12px; gap: 8px; }
  .svc-eeat-cell svg { width: 32px; height: 32px; }
  .svc-pin__card--flip .svc-eeat-grid { margin: 0 !important; }

  /* Communication: typewriter lives in visual area */
  .svc-words-visual {
    order: 2;
    flex: 1;
    height: auto;
    min-height: 0;
    padding: 1rem 1.5rem;
    align-items: center;
    background: transparent;
  }
  .svc-words-quote { font-size: clamp(1.1rem, 4.5vw, 1.6rem); }
  .svc-pin__card--comm { grid-template-columns: unset; }

  /* Social media: unlike the other cards (whose bottom third is a solid
     image/grid that fills its zone), this card's reel is text on the same
     light background as the copy — so any flex-centring slack in BOTH zones
     collapses into one visible void, stranding the title high with a gap in
     the middle. Fix: size text and reel to their content and centre the
     whole stack as one group, so space sits above and below the pair, not
     between them. */
  #svc-card-social-media { justify-content: center; }
  #svc-card-social-media .svc-pin__card-text {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }
  #svc-card-social-media .svc-pin__card-visual {
    flex: 0 0 auto;
    min-height: 0;
  }
  #svc-card-social-media .svc-social-reel { min-height: 0; }
  #svc-card-social-media .svc-social-slide { padding: 16px 28px; }
  #svc-card-social-media .svc-social-reel__dots { padding: 8px 0; }

  /* Content Creation: give the head-collage PNG the larger share so it
     renders bigger; text takes the smaller share. The card runs to the
     viewport bottom (not stopping above the service bar) so the collage
     anchors at the very bottom of the screen, behind the bottom nav. */
  #svc-card-content-creation {
    height: calc(100% - 58px);
  }
  #svc-card-content-creation .svc-pin__card-visual {
    background: transparent !important;
    flex: 2;
  }
  #svc-card-content-creation .svc-pin__card-visual img[src*="Untitled"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
  #svc-card-content-creation .svc-pin__card-text {
    flex: 1.2;
  }
  /* Kill any inherited background on the content creation slide */
  .svc-pin__slide--mosaic { background: transparent; }

  /* Typography: tightened for one screen */
  .svc-pin__card h2 {
    font-size: clamp(1.25rem, 5vw, 1.6rem);
    margin-bottom: 0.5rem;
    line-height: 1.15;
  }
  .svc-pin__card p {
    font-size: 0.82rem;
    line-height: 1.55;
    margin-bottom: 0.5rem;
  }
  .svc-pin__card-list {
    grid-template-columns: 1fr 1fr;
    gap: 3px 10px;
    margin-bottom: 0.75rem;
    margin-top: 0.4rem;
  }
  .svc-pin__card-list li { font-size: 0.72rem; }
  .svc-pin__card .btn { margin-top: 0.5rem; padding: 0.6rem 1.4rem; font-size: 0.7rem; }

  .svc-pin__top { top: 0.75rem; right: 0.75rem; width: 34px; height: 34px; font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .svc-pin__card-list { grid-template-columns: 1fr; gap: 3px; }
  .svc-pin__list-label { display: none; }
  .svc-pin__list-icon { width: 1.5rem; opacity: 0.75; }
  .svc-pin__list-icon svg { width: 1.4rem; height: 1.4rem; }
  .svc-pin__list-item.is-active .svc-pin__list-icon { opacity: 1; }
  .svc-pin__list-item a { font-size: 0.72rem; padding: 0.4rem 0.2rem; }
  .svc-pin__nav { padding: 0.5rem 1rem 0.75rem; }
  .svc-pin__card-visual { max-height: 200px; }
  /* Content Creation + Web Design laptop: lift the 200px cap so the head
     collage and the laptop miniature can fill their flex share uncropped.
     Social media: the reel sizes to its own content (see above), so the cap
     would clip its slides — lift it here too. */
  #svc-card-content-creation .svc-pin__card-visual,
  #svc-card-social-media .svc-pin__card-visual,
  [data-laptop-track] .svc-pin__card-visual { max-height: none; }
  .svc-words-quote { font-size: clamp(1.1rem, 5vw, 1.5rem); }
}

/* ────────────────────────────────────────
   SCROLLBAR
──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ────────────────────────────────────────
   FOCUS STYLES (accessibility)
──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ────────────────────────────────────────
   WEB DESIGN SHOWCASE  (Marketing page)
   RD / RD2 cards layer the mockup over its *Bc background,
   which animates on hover. Orchard card plays a video.
──────────────────────────────────────── */
.web-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.web-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  isolation: isolate;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transition: box-shadow 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}
.web-card:hover { box-shadow: 0 18px 50px rgba(0,0,0,0.20); transform: translateY(-4px); }

/* Background layer (the *Bc image) */
.web-card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: saturate(0.85) brightness(0.78);
  transition: transform 1.1s var(--ease-smooth), filter 0.6s ease;
}
.web-card:hover .web-card-bg { transform: scale(1.14); filter: saturate(1.05) brightness(1); }

/* Foreground mockup / video, framed and floating */
.web-card-fg {
  position: absolute;
  left: 50%; top: 50%;
  width: 78%;
  transform: translate(-50%, -50%) translateY(6px);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.6s var(--ease-smooth), width 0.6s var(--ease-smooth);
  display: block;
}
.web-card:hover .web-card-fg { transform: translate(-50%, -50%) translateY(0); width: 84%; }

/* Caption */
.web-card-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 40px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.78));
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-smooth);
}
.web-card:hover .web-card-cap { opacity: 1; transform: translateY(0); }
.web-card-cap-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.web-card-cap-sub {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .web-showcase { grid-template-columns: 1fr; gap: 18px; }
  .web-card { aspect-ratio: 16 / 10; }
  .web-card-cap { opacity: 1; transform: none; } /* always show on touch */
}

/* Wide variant — single full-width showcase card (Web Design service) */
.web-card--wide {
  aspect-ratio: 16 / 8;
  max-width: 1100px;
  margin: 0 auto;
}
.web-card--wide .web-card-fg { width: 62%; }
.web-card--wide:hover .web-card-fg { width: 66%; }
@media (max-width: 700px) {
  .web-card--wide { aspect-ratio: 16 / 11; }
  .web-card--wide .web-card-fg { width: 86%; }
}

/* ────────────────────────────────────────
   SERVICE CARDS GRID  (Marketing index → service pages)
──────────────────────────────────────── */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  margin-top: 48px;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  padding: 36px 30px 30px;
  transition: background 0.3s ease, transform 0.3s var(--ease-smooth);
}
.service-card:hover { background: var(--bg-2); }
.service-card-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.service-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.service-card-desc {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
  flex: 1;
}
.service-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
  transition: gap 0.3s var(--ease-smooth), color 0.2s;
}
.service-card:hover .service-card-arrow { gap: 14px; color: var(--gold); }
@media (max-width: 900px) { .service-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-cards { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────
   LAPTOP + SCROLLING VIDEO SHOWCASE  (Web Design service)
   Big heading left · laptop with scroll-driven video right
──────────────────────────────────────── */
/* Pin track — its height is the scroll distance the user travels while
   the showcase stays pinned and the video scrubs. The extra height
   beyond 100vh (here 1.2 viewports) is the scrub distance (~3s). */
.laptop-track {
  position: relative;
  height: 220vh;
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}
.laptop-showcase {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.laptop-showcase-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/* No-JS / reduced-motion fallback: don't pin, just show normally */
.laptop-track.no-pin { height: auto; }
.laptop-track.no-pin .laptop-showcase {
  position: static;
  height: auto;
  padding: clamp(50px, 8vw, 110px) 0;
}
.laptop-showcase-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: 0.02em;
  color: var(--text);
}
.laptop-showcase-sub {
  margin-top: 22px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-sub);
  max-width: 30rem;
}

/* The device: PNG frame on a layer below, video inset to the glass */
.laptop-device {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;   /* matches Laptop.png */
}
.laptop-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* frame/bezel below; video sits in the glass above */
  pointer-events: none;
}
/* Glass rectangle inside the bezel (measured from Laptop.png).
   Sits above the frame so the video replaces the baked-in wallpaper,
   while the surrounding bezel from the PNG still shows. */
.laptop-screen {
  position: absolute;
  left: 16.14%;
  top: 7.35%;
  width: 68.98%;
  height: 79.44%;
  z-index: 2;
  overflow: hidden;
  background: #000;
  border-radius: 2px;
  /* Mask the hairline seam where Laptop.png's baked screen edge peeks out
     around the glass at fractional device-pixel ratios / mid-scroll subpixel
     positions: a black ring outside the box, blending into the bezel. */
  box-shadow: 0 0 0 3px #000;
}
.laptop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* ── Orchard mini-site inside the Web Design laptop ──────────
   A live miniature of the Orchard Recruitment home page: dark
   navbar + the maze→logo zoom hero, scrubbed by scroll (js/site.js).
   The page renders at a fixed virtual desktop size (1440×933,
   same aspect as the laptop glass) and is scaled down to fit,
   so typography and layout match the real site at desktop width.
   Sizes are absolute px in virtual-canvas space — not vw/vh. */
.orch-mini {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Backdrop matches the mini page in front of it (charcoal header band,
     white hero below) so the scaled page's antialiased edges blend invisibly
     instead of reading as a light hairline over the navbar. */
  background: linear-gradient(to bottom, #262729 0 14.1%, #fff 14.1% 100%);
}
.orch-mini__page {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 933px;
  transform-origin: 0 0;               /* scale set by JS to fit the glass */
  background: #fff;
  font-family: 'Instrument Sans', 'Barlow', sans-serif;
  pointer-events: none;
}
.orch-mini__header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 132px;
  background: #262729;                  /* Orchard header charcoal */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  z-index: 5;
}
.orch-mini__logo { height: 100px; width: auto; display: block; }
.orch-mini__nav { display: flex; align-items: center; gap: 9px; }
.orch-mini__nav span {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.85);
  padding: 4px 7px;
  white-space: nowrap;
}
.orch-mini__nav .orch-mini__nav-cta {
  background: #e52125;
  color: #fff;
  border-radius: 4px;
  padding: 5px 10px;
}
.orch-mini__hero {
  position: absolute;
  top: 132px; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: #fff;
}
.orch-mini__iom {
  position: absolute;
  top: 50%; left: 50%;
  width: 497px; height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.16;
}
.orch-mini__maze {
  position: absolute;
  top: 50%; left: 50%;
  width: 769px; height: 769px;
  transform: translate(-50%, -55%);
  transform-origin: 50% 55%;
  will-change: transform, left;
}
.orch-mini__maze svg { width: 100%; height: 100%; display: block; overflow: visible; }
.orch-mini__real {
  position: absolute;
  top: 50%; left: 50%;
  height: 729px; width: auto;
  aspect-ratio: 1569 / 2047;
  transform: translate(-45%, -63.5%);
  transform-origin: 45% 63.5%;
  opacity: 0;
  z-index: 1;
  will-change: opacity, left, transform;
}
.orch-mini__real svg { width: 100%; height: 100%; display: block; overflow: visible; }
.orch-mini__text {
  position: absolute;
  top: 50%; left: 50%;
  width: 460px;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: left;
  will-change: left, transform;
}
.orch-mini__wordmark {
  margin: 0 0 20px;
  font-family: 'Rubik', 'Instrument Sans', sans-serif;
  line-height: 0.95;
  text-transform: lowercase;
}
.orch-mini__wordmark-name {
  display: block;
  font-size: 88px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #262729;
}
.orch-mini__wordmark-sub {
  display: block;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.2em;
  margin-left: 0.1em;
  margin-top: 6px;
  color: #e52125;
}
.orch-mini__tagline {
  font-size: 29px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #262729;
  font-family: inherit;
}
.orch-mini__strapline {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 28px;
  color: #44464a;
  font-family: inherit;
}
.orch-mini__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.orch-mini__btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
}
.orch-mini__btn--primary {
  background: #e52125;
  color: #fff;
  box-shadow: 0 8px 24px rgba(229,33,37,0.25);
}
.orch-mini__btn--outline {
  color: #e52125;
  border: 1.5px solid #e52125;
}

@media (max-width: 820px) {
  .laptop-showcase-grid { grid-template-columns: 1fr; gap: 30px; }
  .laptop-showcase-heading { text-align: center; }
  .laptop-showcase-sub { margin-inline: auto; text-align: center; }
}

/* ────────────────────────────────────────
   SERVICE PAGE  (service.html)
──────────────────────────────────────── */
/* Full-width SEO hero: RD foreground over blurred RDBc background */
.service-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(60px, 9vw, 120px) 0;
  text-align: center;
}
.service-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
}
.service-hero--blur .service-hero-bg { filter: blur(14px) saturate(1.05) brightness(0.7); }
.service-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10,10,10,0.28);
}
.service-hero-inner {
  width: var(--container);
  margin-inline: auto;
}
.service-hero-fg {
  width: min(100%, 980px);
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  display: block;
}
.service-hero-label {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

/* Detail grid: copy + deliverables */
.service-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.service-detail-copy p { margin-bottom: 18px; color: var(--text-sub); }
.service-detail-list .section-kicker { margin-bottom: 18px; }
.service-image img { width: 100%; border-radius: 4px; }
@media (max-width: 820px) {
  .service-detail-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────
   PAGE HEADER  (replaces hero on Photography / Marketing)
──────────────────────────────────────── */
.page-header {
  padding: calc(var(--section-py) + 96px) 0 calc(var(--section-py) - 20px);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.page-header .section-kicker { justify-content: center; }
.page-header .section-title { margin-bottom: 20px; }
.page-header-sub {
  font-size: 0.95rem;
  color: var(--text-sub);
  max-width: 620px;
  margin: 0 auto 28px;
  line-height: 1.8;
}
.page-header-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ────────────────────────────────────────
   PAGE HEADER — HERO VARIANT
   Full-bleed image behind the header text,
   used on individual gallery pages.
──────────────────────────────────────── */
.page-header--hero {
  position: relative;
  padding: 0;
  background: #000;
  border-bottom: none;
  min-height: 92vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
/* Full-viewport variant — the hero owns the whole first screen (Marketing). */
.page-header--hero--full {
  min-height: 100vh;
  min-height: 100svh;
}
.page-header--hero .page-header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.page-header--hero:hover .page-header-bg { transform: scale(1); }
/* Integrity (Photography hero): subject sits low in the frame — keep
   the bottom in view on tall/short and wide viewports alike. */
.page-header-bg--integrity { object-position: center bottom; }
/* Chicago hero: flapper in profile, left of centre with her face in the
   upper third — bias the crop toward her so she stays in frame when the
   sides or top get cropped. */
.page-header--hero .page-header-bg--chicago { object-position: 42% 30%; }
.page-header--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Directional scrim: darkens the left/bottom where the text column sits,
     fading to clear on the right so the photograph still breathes. */
  background:
    linear-gradient(105deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 34%, rgba(0,0,0,0.12) 62%, rgba(0,0,0,0) 82%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}
.page-header--hero .container {
  position: relative;
  z-index: 1;
  padding-top: clamp(96px, 16vh, 160px);
  padding-bottom: clamp(72px, 12vh, 132px);
  text-align: left;
  max-width: min(90vw, 860px);
  margin-left: 5vw;
  /* Column layout: the whole content group (kicker → heading → blurb →
     actions) sits in the lower portion of the hero, dropped away from the
     top so it clears the nav and reads as a deliberate anchor. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
/* Reading order: kicker/stamp → heading → blurb → actions, grouped together. */
.page-header--hero .section-kicker  { order: 1; }
.page-header--hero .chapter-stamp   { order: 1; }
.page-header--hero .section-title   { order: 2; }
.page-header--hero .page-header-sub,
.page-header--hero .page-header-body {
  order: 3;
  margin-top: 0;
}
.page-header--hero .page-header-actions { order: 4; margin-top: 1.8rem; }
/* Keep the hero blurb to a single paragraph so the content block is shorter
   and sits lower in the frame. Extra paragraphs stay in the DOM (readable to
   assistive tech / crawlers) but are hidden from the visible hero. */
.page-header--hero .page-header-body ~ .page-header-body { display: none; }
.page-header--hero .section-kicker { justify-content: flex-start; color: rgba(255,255,255,0.7); }
.page-header--hero .chapter-stamp {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-style: italic;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
  font-weight: 300;
}
.page-header--hero .section-title {
  color: #fff;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 4px 32px rgba(0,0,0,0.5);
}
.page-header--hero .page-header-sub {
  color: rgba(255,255,255,0.92);
  max-width: 600px;
  margin: 0 0 1.4rem;
  font-size: 1rem;
  /* Stronger soft shadow keeps the blurb readable over bright photos now that
     the hero gradient is gone (acts as a local scrim, not a full overlay). */
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 18px rgba(0,0,0,0.7);
}
.page-header--hero .page-header-body {
  color: rgba(255,255,255,0.9);
  max-width: 580px;
  font-size: 0.95rem;
  line-height: 1.78;
  margin-bottom: 0.9rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 18px rgba(0,0,0,0.7);
}
.page-header--hero .page-header-body em {
  color: #fff;
  font-style: italic;
}
/* Kicker + serif stamp also get a readable shadow over bright imagery. */
.page-header--hero .section-kicker,
.page-header--hero .chapter-stamp {
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.6);
}
.page-header--hero .page-header-actions { justify-content: flex-start; margin-top: 2rem; }
/* Right-aligned text variant — subject is bottom-left (e.g. Corporate) */
.page-header--hero--right .container {
  margin-left: auto;
  margin-right: 5vw;
  text-align: left;
}
/* Mirror the directional scrim so it darkens the right side where the text sits. */
.page-header--hero--right::after {
  background:
    linear-gradient(255deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 34%, rgba(0,0,0,0.12) 62%, rgba(0,0,0,0) 82%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0) 55%);
}
/* Top-aligned text variant — subject is at the bottom (e.g. Photography hero) */
.page-header--hero--top {
  align-items: flex-start;
}
.page-header--hero--top .container {
  padding-top: clamp(100px, 14vw, 160px);
  padding-bottom: 0;
  justify-content: flex-start;
}
/* Gradient darkens top instead of bottom */
.page-header--hero--grad-top::after {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.45) 35%,
    rgba(0,0,0,0.1) 65%,
    transparent 100%
  );
}
.page-header--hero .btn-ghost {
  border-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.9);
}
.page-header--hero .btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ── Editorial split hero ─────────────────────────────────────
   A solid dark panel on the left holds the text; the hero photo
   sits on the right. Magazine-style. Used on the Photography page. */
.page-header--hero--editorial {
  align-items: stretch;
  background: #14140F;
}
/* Photo occupies the right portion instead of full-bleed. */
.page-header--hero--editorial .page-header-bg {
  left: auto;
  right: 0;
  width: 58%;
  transform: none;
}
.page-header--hero--editorial:hover .page-header-bg { transform: none; }
/* A solid dark panel over the left, with a short feathered seam into the photo
   so the join reads as intentional (editorial), not a hard cut. */
.page-header--hero--editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  right: 42%;
  background: #14140F;
  z-index: 1;
}
.page-header--hero--editorial::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  right: auto;
  width: 120px;
  inset: auto auto auto 42%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(to right, #14140F 0%, rgba(20,20,15,0) 100%);
  z-index: 1;
}
/* Text lives inside the dark panel (left ~42%), vertically centred with the
   content flowing naturally (no push-to-bottom void). */
.page-header--hero--editorial .container {
  z-index: 2;
  max-width: min(90vw, 640px);
  margin-left: clamp(1.5rem, 5vw, 5rem);
  margin-right: 0;
  width: 42%;
  padding-right: clamp(1.5rem, 3vw, 3rem);
  justify-content: center;   /* centre the block in the tall panel */
}
/* Override the full-bleed hero's push-to-bottom: keep the blurb with the
   heading/buttons as one centred group. */
.page-header--hero--editorial .page-header-sub,
.page-header--hero--editorial .page-header-body {
  margin-top: 1.6rem;
  padding-top: 0;
}
.page-header--hero--editorial .page-header-actions { margin-top: 1.8rem; }
/* On the solid panel the heavy text-shadows aren't needed — soften them. */
.page-header--hero--editorial .section-title { text-shadow: none; }
.page-header--hero--editorial .page-header-sub,
.page-header--hero--editorial .page-header-body,
.page-header--hero--editorial .section-kicker { text-shadow: none; }
/* A thin accent rule under the kicker for the editorial feel. */
.page-header--hero--editorial .section-kicker { margin-bottom: 1.6rem; }

@media (max-width: 900px) {
  /* Stack: photo on top, dark panel with text below — keeps it readable. */
  .page-header--hero--editorial .page-header-bg { width: 100%; }
  .page-header--hero--editorial::before { right: 0; top: auto; height: 62%; bottom: 0; }
  .page-header--hero--editorial::after { display: none; }
  .page-header--hero--editorial .container { width: 100%; max-width: 100%; }
}

@media (max-width: 768px) {
  .page-header--hero {
    min-height: unset;
    align-items: flex-start;
    flex-direction: column;
    background: var(--bg);
    overflow: visible;
  }
  /* image flows above text as a natural block */
  .page-header--hero .page-header-bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 56vw;
    min-height: 240px;
    max-height: 420px;
    object-fit: cover;
    transform: none;
    transition: none;
    opacity: 1;
    display: block;
    flex-shrink: 0;
  }
  .page-header--hero:hover .page-header-bg { transform: none; }
  /* hide the gradient overlay — not needed when image is separate */
  .page-header--hero::after { display: none; }
  .page-header--hero .container {
    position: relative;
    margin-left: 0;
    max-width: 100%;
    padding: 28px 5vw 44px;
  }
  /* text reverts to dark on white background */
  .page-header--hero .section-kicker { color: var(--text-muted); }
  .page-header--hero .section-title { color: var(--text); }
  .page-header--hero .page-header-sub,
  .page-header--hero .page-header-body { color: var(--text-sub); }
  .page-header--hero .btn-ghost {
    border-color: var(--border-gold);
    color: var(--text);
  }
  .page-header--hero .section-title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
  .page-header--hero .chapter-stamp {
    font-size: 0.72rem;
    color: var(--text-muted);
  }
  .page-header--hero .page-header-body {
    font-size: 0.88rem;
    line-height: 1.7;
  }
  /* On very small screens hide the second body paragraph to reduce clutter */
  .page-header--hero .page-header-body + .page-header-body {
    display: none;
  }
  .page-header--hero .page-header-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 1.4rem;
  }
  .page-header--hero .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  /* Photo grid: single column on mobile */
  .photo-grid {
    columns: 1;
    width: 100%;
    padding: 0 4vw;
    margin-top: 24px;
  }
}

/* ────────────────────────────────────────
   WORLD TOGGLE NAV  (Photography ⇄ Marketing)
   Shared between photography.html & marketing.html
──────────────────────────────────────── */
.nav-worlds {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--gold-dim);
}
.nav-worlds a {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 7px 16px;
  border-radius: 1px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-worlds a::after { display: none; }
.nav-worlds a:hover { color: var(--text); }
.nav-worlds a.nav-world--active {
  color: var(--bg);
  background: var(--gold);
}
.nav-worlds a.nav-world--active:hover { color: var(--bg); }

@media (max-width: 768px) {
  .nav-worlds {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
  }
  .nav-worlds a {
    font-size: 0.85rem;
    padding: 12px 16px;
    border: 1px solid var(--border);
    text-align: left;
  }
}


/* ────────────────────────────────────────
   SOCIAL MEDIA REEL  (inside svc-pin social card)
──────────────────────────────────────── */

.svc-social-reel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
  display: flex;
  flex-direction: column;
}

/* All slides: stacked, hidden by default */
.svc-social-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth);
  pointer-events: none;
  background: transparent;
  padding: 32px 28px;
}
.svc-social-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* ── Slide 0: two-column IOM layout ── */
.svc-social-slide--iom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  background: transparent;
}
.svc-social-slide--iom .svc-social-slide__inner {
  min-width: 0;
}
.svc-social-slide__iom-img {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.6s 0.2s var(--ease-smooth), transform 0.6s 0.2s var(--ease-smooth);
}
.svc-social-slide--iom.is-active .svc-social-slide__iom-img {
  opacity: 1;
  transform: translateX(0);
}
.svc-social-slide__iom-img img {
  width: 100%;
  max-width: none;
  /* PNG is white — keep as white so it shows on the dark card background */
  opacity: 0.55;
}

/* ── Slides 1-3: standard single-column layout ── */
.svc-social-slide__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Icon badge */
.svc-social-slide__badge {
  width: 38px;
  height: 38px;
  border-radius: 3px;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Kicker */
.svc-social-slide__kicker {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Accent rule */
.svc-social-slide__rule {
  height: 2px;
  width: 0;
  background: var(--text);
  margin-bottom: 14px;
  transition: width 0.5s 0.1s var(--ease-smooth);
}
.svc-social-slide.is-active .svc-social-slide__rule { width: 44px; }

/* Title */
.svc-social-slide__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

/* Body */
.svc-social-slide__body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-sub);
  line-height: 1.65;
}

/* Joke line */
.svc-social-slide__joke {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Dot nav */
.svc-social-reel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 14px 0 16px;
  flex-shrink: 0;
  background: transparent;
}

.svc-social-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-gold);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}
.svc-social-dot.is-active,
.svc-social-dot:hover {
  background: var(--text);
  transform: scale(1.4);
}

@media (max-width: 820px) {
  .svc-social-slide--iom { grid-template-columns: 1fr; }
  .svc-social-slide__iom-img { display: none; }
  .svc-social-slide__title { font-size: 1.1rem; }
  #svc-card-social-media .svc-pin__card-list { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────
   REPORTING DASHBOARD  (inside svc-pin reporting card)
   Mock client dashboard echoing the Regent Dental Forms admin screen:
   stat tiles + a 12-month trend chart. Dark "product screen" panel on
   the light glass card. site.js counts the numbers up and grows the
   bars (.is-run) when the card becomes active.
──────────────────────────────────────── */
.svc-dash {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-right: 0.5rem;
  background: linear-gradient(160deg, #23252b 0%, #17181d 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: clamp(20px, 2.2vw, 30px);
  box-shadow: 0 16px 38px rgba(0,0,0,0.25);
}

/* Header row: live dot · client name · sample-data tag */
.svc-dash__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.svc-dash__dot {
  flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: #F4F3F1;
  animation: dashPulse 2.4s ease-in-out infinite;
}
.svc-dash__title {
  font-family: var(--font-display);
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244,243,241,0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-dash__tag {
  flex-shrink: 0; margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244,243,241,0.4);
  border: 1px solid rgba(244,243,241,0.18);
  border-radius: 2px;
  padding: 3px 7px 2px;
}
@keyframes dashPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* Stat tiles */
.svc-dash__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.svc-dash__tile {
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 14px 16px 12px;
  min-width: 0;
}
.svc-dash__tile-label {
  font-family: var(--font-display);
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,243,241,0.55);
}
.svc-dash__tile-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 300; line-height: 1;
  color: #F4F3F1;
  font-variant-numeric: tabular-nums;
}
.svc-dash__tile-change {
  font-size: 0.58rem; letter-spacing: 0.04em;
  color: rgba(244,243,241,0.6);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
}
.svc-dash.is-run .svc-dash__tile-change { opacity: 1; transform: none; }

/* 12-month trend bars — single monochrome series, current month accented */
.svc-dash__chart-title {
  font-family: var(--font-display);
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,243,241,0.55);
  margin: 0 0 10px;
}
.svc-dash__bars {
  display: flex; align-items: flex-end; gap: 8px;
  height: clamp(72px, 10vh, 110px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.svc-dash__bars span {
  flex: 1;
  height: calc(var(--v) * 100%);
  background: rgba(244,243,241,0.5);
  border-radius: 2px 2px 0 0;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.7s var(--ease-smooth);
  transition-delay: calc(var(--i) * 45ms);
}
.svc-dash__bars span:last-child { background: #F4F3F1; }
.svc-dash.is-run .svc-dash__bars span { transform: scaleY(1); }
.svc-dash__axis {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244,243,241,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .svc-dash__dot { animation: none; }
  .svc-dash__bars span { transition: none; transform: scaleY(1); }
  .svc-dash__tile-change { transition: none; opacity: 1; transform: none; }
}

/* Mobile: dash fills the bottom visual strip as a full-bleed dark band */
@media (max-width: 900px) {
  .svc-dash {
    height: 100%;
    justify-content: center;
    gap: 10px;
    margin: 0;
    border: none; border-radius: 0;
    padding: 12px 18px;
    box-shadow: none;
  }
  .svc-dash__head { display: none; }
  .svc-dash__tile { padding: 8px 10px 7px; gap: 3px; }
  .svc-dash__tile-value { font-size: 1.3rem; }
  .svc-dash__tile-label { font-size: 0.48rem; }
  .svc-dash__tile-change { font-size: 0.5rem; }
  .svc-dash__chart-title { display: none; }
  .svc-dash__bars { height: 52px; gap: 5px; }
  .svc-dash__axis { font-size: 0.44rem; }
}

/* ────────────────────────────────────────
   REGENT MOSAIC — content creation visual
   Mirrors video frames 110-176 (19-cell gallery wall)
   12 cols × 5 rows, pixel-exact at 1920×1080 ratio
──────────────────────────────────────── */

/*
  Column widths in the video (at 1920px):
    BASE_CW = 156px, first 4 cols = 157px, gap = 4px
  Row heights: [212, 212, 212, 212, 216], gap = 4px
  We replicate proportionally via percentage of a 1920×1080 canvas.
  Container uses aspect-ratio: 1920/1080 and position: relative.
  Each cell uses CSS custom props --ci, --ri, --cs, --rs for grid placement.
*/

.rc-mosaic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1A1B1E;
  opacity: 0.6;
}

/* ── Cell positioning via custom properties ── */
/*
  12 cols. px at 1920: cols 0-3 = 157px, cols 4-11 = 156px. gap=4px
  Express as % of 1920:
    col 0-3 x-start = (ci*156 + min(ci,4)*1 + ci*4) / 1920 * 100%
    General: colX(ci) = (ci * BASE_CW + min(ci,4)*1 + ci*GAP) / VW
    width of span: (cs*156 + overlap_extra + (cs-1)*4) / VW

  We encode the exact pixel values as CSS calc() using a scale factor.
  The mosaic div is 1920 units wide (via a CSS transform scale trick):
  we set the mosaic inner to 1920px × 1080px and scale it to fit the container.
*/

.rc-mosaic-inner {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
}

.rc-cell {
  position: absolute;
  overflow: hidden;
  will-change: transform, opacity;
}


.rc-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Subtle dark vignette overlay on each cell */
.rc-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(26,27,30,0.3) 100%);
  pointer-events: none;
}

/* ────────────────────────────────────────
   MOBILE: no text shadows anywhere.
   On small screens heroes and overlays flow to dark-on-light layouts
   where drop shadows on text look muddy — remove them site-wide.
   Placed last + with !important so it also overrides per-page <style> blocks.
──────────────────────────────────────── */
@media (max-width: 768px) {
  * { text-shadow: none !important; }
}

/* ────────────────────────────────────────
   FOLIO HERO  (Photography page)
   Full-viewport opener: the text tile sits on the left and the
   galleries themselves are the hero — a masonry of linked tiles on
   the right. On load each image folds down out of the tile above it
   (every tile clips its own image, which starts one tile-height up).
   photography.html adds .is-live to the grid once the lead images
   have decoded, which starts the cascade.
──────────────────────────────────────── */
.page-header--hero--folio {
  display: grid;
  grid-template-columns: minmax(340px, 37fr) 63fr;
  column-gap: 6px;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
}
/* The folio hero is a white text tile beside a photo grid — it needs no
   photo scrim, so cancel the full-bleed hero's directional darkening. */
.page-header--hero--folio::after { display: none; }

/* Text tile: a centred block (overrides the full-bleed hero's
   5vw margin and push-the-blurb-to-the-bottom layout). */
.page-header--hero--folio .container {
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding-top: clamp(96px, 15vh, 150px);
  padding-bottom: clamp(40px, 7vh, 80px);
  padding-left: clamp(1.5rem, 4.5vw, 4.5rem);
  padding-right: clamp(1.2rem, 2.5vw, 3rem);
  justify-content: center;
}
/* Light tile: dark type over the white ground (the base hero rules
   above assume a photo behind the text and paint it white). */
.page-header--hero--folio .section-kicker {
  color: var(--text-muted);
  text-shadow: none;
}
.page-header--hero--folio .section-kicker::before { background: var(--text-muted); }
.page-header--hero--folio .section-title {
  color: var(--text);
  text-shadow: none;
}
.page-header--hero--folio .page-header-sub {
  margin-top: 1.6rem;
  padding-top: 0;
  text-shadow: none;
  color: var(--text-sub);
}
/* Read as heading → blurb → CTA. The full-bleed hero drops its blurb to
   the bottom and lifts the buttons up (order 3/4 + margin-top:auto); on
   the folio hero the text is a normal top-down stack, so restore the
   natural order: kicker, title, blurb, then the actions last. */
.page-header--hero--folio .section-kicker      { order: 1; }
.page-header--hero--folio .section-title       { order: 2; }
.page-header--hero--folio .page-header-sub      { order: 3; margin-top: 1.6rem; }
.page-header--hero--folio .page-header-actions  { order: 4; margin-top: 2rem; }
.page-header--hero--folio .btn-ghost {
  border-color: var(--border-gold);
  color: var(--text);
}
.page-header--hero--folio .btn-ghost:hover { background: var(--gold-dim); }

/* Text rises in on load (CSS-only, independent of the grid JS). */
@keyframes folio-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.page-header--hero--folio .section-kicker      { animation: folio-rise 0.7s var(--ease-smooth) 0.05s backwards; }
.page-header--hero--folio .section-title       { animation: folio-rise 0.8s var(--ease-smooth) 0.15s backwards; }
.page-header--hero--folio .page-header-sub     { animation: folio-rise 0.8s var(--ease-smooth) 0.30s backwards; }
.page-header--hero--folio .page-header-actions { animation: folio-rise 0.8s var(--ease-smooth) 0.42s backwards; }

/* Masonry: three uneven columns, flush to the right/bottom edges,
   white showing through the 6px seams. The top margin mats the grid
   below the (transparent, dark-text) nav like a print in a frame. */
.folio-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr 0.92fr 1fr;
  gap: 6px;
  min-height: 0;
  margin-top: clamp(76px, 10vh, 110px);
}
.folio-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

/* Tiles ARE the gallery links. --g = share of column height (desktop),
   --rs = row span (mobile), --d = position in the fold-out cascade. */
.folio-tile {
  position: relative;
  display: block;
  flex: var(--g, 1) 1 0px;
  min-height: 0;
  overflow: hidden;
}
.folio-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Off-stage exactly one tile-height up: sliding down, it reads as
     being pushed out of the bottom of the tile above. */
  transform: translateY(-103%);
  transition: transform 0.6s var(--ease-smooth);
}
.folio-grid.is-live .folio-tile img {
  transform: none;
  animation: folio-fold 0.95s var(--ease-smooth) var(--d, 0s) backwards;
}
@keyframes folio-fold {
  from { transform: translateY(-103%); }
}
.folio-grid.is-live .folio-tile:hover img,
.folio-grid.is-live .folio-tile:focus-visible img { transform: scale(1.05); }
.folio-tile:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: -6px;
}

/* Caption pinned to the tile's lower edge, fading in as the image lands. */
.folio-tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.6vw, 20px);
  background: linear-gradient(to top, rgba(10,10,7,0.72), rgba(10,10,7,0.25) 55%, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.folio-grid.is-live .folio-tile-label {
  opacity: 1;
  transition-delay: calc(var(--d, 0s) + 0.55s);
}
.folio-tile-count {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}
.folio-tile-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.25vw, 1.25rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff;
}

/* Four-column hero variant (12 gallery tiles). */
.folio-grid--quad { grid-template-columns: 1.15fr 0.9fr 1.05fr 0.95fr; }

/* Folio band: an archive strip further down the page, same fold-out
   language as the hero. Tiles are direct children (no columns). */
.folio-grid--band {
  width: var(--container);
  margin: 48px auto 0;
  height: min(58vh, 520px);
  grid-template-columns: 1.4fr 1fr;
}

/* Folio wall: a taller in-page grid of gallery tiles in columns
   (About page galleries), same fold-out language. */
.folio-grid--wall {
  width: var(--container);
  margin: 48px auto 0;
  height: min(74vh, 680px);
  grid-template-columns: 1.1fr 0.9fr 1.05fr 0.95fr;
}

/* Arrow cue on hover, matching the gallery cards further down. */
.folio-tile::after {
  content: '→';
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 1;
  color: #fff;
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-smooth);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  pointer-events: none;
}
.folio-grid.is-live .folio-tile:hover::after,
.folio-grid.is-live .folio-tile:focus-visible::after {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  /* Stack: text tile first, masonry flows below in two columns. */
  .page-header--hero--folio {
    display: block;
    min-height: unset;
  }
  .page-header--hero--folio .container {
    max-width: 100%;
    padding: calc(68px + 9vw) 5vw 40px;
  }
  .folio-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 8.5vw;
    grid-auto-flow: row dense;
    margin-top: 0;
  }
  /* Columns dissolve; tiles place themselves by their --rs spans. */
  .folio-col { display: contents; }
  .folio-tile { grid-row: span var(--rs, 4); }
  .folio-grid--band { height: auto; margin-top: 32px; }
  .folio-grid--wall { height: auto; margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-header--hero--folio .section-kicker,
  .page-header--hero--folio .section-title,
  .page-header--hero--folio .page-header-actions,
  .page-header--hero--folio .page-header-sub,
  .folio-grid.is-live .folio-tile img { animation: none; }
  .folio-tile img { transform: none; transition: none; }
  .folio-tile-label { opacity: 1; transition: none; }
}

/* ────────────────────────────────────────
   GALLERY FOLD-OUT  (category pages)
   The photo-grid masonry inherits the folio hero's language: as
   each image enters the viewport it slides down out of the image
   above it. site.js adds .is-in (staggered via --d) per figure
   once its image has loaded and it scrolls into view.
──────────────────────────────────────── */
.photo-item img { transform: translateY(-103%); }
.photo-item.is-in img {
  transform: none;
  animation: folio-fold 0.9s var(--ease-smooth) var(--d, 0s) backwards;
}
/* Hover zoom only once revealed (the base :hover rule above would
   otherwise pull a hidden image into view). */
.photo-item:not(.is-in):hover img { transform: translateY(-103%); }
.photo-item.is-in:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .photo-item img,
  .photo-item:not(.is-in):hover img { transform: none; }
  .photo-item.is-in img { animation: none; }
}

/* ────────────────────────────────────────
   WORLD-NEUTRAL NAV
   .nav--no-worlds hides the Photography/Marketing switch — used by
   the About page when the visitor arrives from inside the site.
──────────────────────────────────────── */
.nav--no-worlds .nav-worlds { display: none; }

/* ────────────────────────────────────────
   NAV OVER LIGHT
   Pages that open on a white hero (Photography folio): the natural
   logo mark is light, so paint it dark before the nav has scrolled
   into its own background.
──────────────────────────────────────── */
.nav-over-light .nav:not(.nav--scrolled) .nav-logo-img { filter: brightness(0); }