/* ============================================================
   STUDIO LOMO — main.css
   Design System · Components · Sections · Animations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --bg:          #0A0A0C;
  --bg-alt:      #0a0a0a;
  --surface:     #131316;
  --surface-2:   #15151C;
  --text:        #F4F3F0;
  --muted:       #9A9AA3;
  --muted-2:     #555;
  --line:        rgba(255,255,255,.08);
  --line-2:      rgba(255,255,255,.05);
  --accent:      #e8a943;
  --accent-ink:  #0A0A0C;
  --accent-dim:  rgba(232,169,67,.16);
  --accent-glow: rgba(232,169,67,.45);
  --white:       #ffffff;

  --font-display: 'Syne', sans-serif;
  --font-body:    'Manrope', sans-serif;

  --container:   1400px;
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-full: 999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nav is fixed site-wide (lomo-parallax-hero site-nav), so anchor jumps
     (#photo, #motion, etc.) need offset room or the header covers the
     target heading. */
  scroll-padding-top: 120px;
}

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

body.lomo-no-scroll { overflow: hidden; }

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

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
strong,
small {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ── TYPE SCALE (editorial) ───────────────────────────────────
   Display headings use --font-display; body copy --font-body.
   Components with their own bespoke size keep it — this sets the
   default so anything that doesn't opt out reads as one system. */
h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 1.05; font-weight: 700; }
h2 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; font-weight: 700; }
h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
body { font-size: 1.0625rem; line-height: 1.7; }
small { font-size: .875rem; }

.lomo-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── FOCUS ────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ── LAYOUT UTILITIES ─────────────────────────────────────── */
.lomo-container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

.lomo-main { padding-top: 0; }
.lomo-view { display: none; }
.lomo-view.is-active { display: block; }
.lomo-center { text-align: center; }

.lomo-not-found {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text);
}

.lomo-not-found .wp-block-group__inner-container {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  width: 100%;
}

.lomo-not-found .wp-block-heading {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text);
}

.lomo-not-found p {
  max-width: 36rem;
  color: var(--muted);
  font-size: 1rem;
}

.lomo-not-found .wp-block-button__link {
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #111;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0.85rem 1.2rem;
}

/* Section label pill */
.lomo-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .38em;
  color: var(--muted);
  margin-bottom: 28px;
}

.lomo-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── SCROLL REVEAL ──────────────────────────────────────────
   Trigger: IntersectionObserver threshold 0.2, fires once.
   500ms, --ease-out-expo (cubic-bezier(0.16,1,0.3,1)), translateY 24px.
   prefers-reduced-motion collapses everything to opacity-only (see reset above). */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease-out-expo),
              transform .5s var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="left"] {
  transform: translateX(-24px);
}
[data-reveal="left"].is-visible {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(24px);
}
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(.96);
}
[data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* Stagger children — 80ms delay per item */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease-out-expo),
              transform .5s var(--ease-out-expo);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── NAVIGATION ───────────────────────────────────────────── */
.lomo-nav-wrap {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: transparent;
  transition: background .3s ease, backdrop-filter .3s ease, padding .3s var(--ease-out-expo);
  padding: 28px 0;
}

.lomo-nav-wrap.is-scrolled {
  background: rgba(10,10,12,.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.lomo-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.lomo-logo img { display: block; max-width: 100%; }

.lomo-logo {
  border: 0;
  background: transparent;
  color: var(--white);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  line-height: 1;
  font-family: var(--font-display);
  text-decoration: none;
  transition: opacity .2s ease;
}
.lomo-logo:hover { opacity: .75; }

.lomo-logo span {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.lomo-logo small {
  font-size: 9px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .5em;
  opacity: .45;
  font-weight: 600;
}

/* Desktop nav */
.lomo-nav-desktop { display: flex; align-items: center; gap: 8px; }

.lomo-nav-desktop button,
.lomo-nav-desktop a {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.lomo-nav-desktop button:hover,
.lomo-nav-desktop a:hover {
  color: var(--white);
  background: rgba(255,255,255,.06);
}

/* Hard guard: prevent external/global style overrides on nav buttons */
.lomo-nav-wrap .lomo-nav-desktop button,
.lomo-nav-wrap .lomo-nav-desktop a {
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.65) !important;
  border-radius: var(--radius-full) !important;
}

.lomo-nav-wrap .lomo-nav-desktop button:hover,
.lomo-nav-wrap .lomo-nav-desktop a:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--white) !important;
}

.lomo-nav-cta {
  background: var(--white) !important;
  color: #000 !important;
  padding: 12px 26px !important;
  margin-left: 8px;
  font-weight: 800 !important;
  text-decoration: none;
}

.lomo-nav-cta:hover {
  background: var(--accent) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}

/* Hamburger */
.lomo-menu-btn {
  display: none;
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: var(--white);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: background .2s ease;
}
.lomo-menu-btn:hover { background: rgba(255,255,255,.13); }
.lomo-menu-btn span { width: 18px; height: 1.5px; background: var(--white); display: block; border-radius: 2px; }

/* Mobile menu */
.lomo-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  transform: translateY(-100%);
  transition: transform .65s var(--ease-out-expo);
}

.lomo-mobile-menu.is-open { transform: translateY(0); }

.lomo-mobile-menu-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 48px;
}

.lomo-mobile-menu-inner button,
.lomo-mobile-menu-inner a {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.55);
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.2rem, 10vw, 4rem);
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
  line-height: 1.1;
}

.lomo-mobile-menu-inner button:hover,
.lomo-mobile-menu-inner a:hover { color: var(--white); }

.lomo-mobile-cta {
  margin-top: 24px !important;
  color: var(--accent) !important;
  font-size: clamp(2.2rem, 10vw, 4rem) !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.lomo-btn-primary,
.lomo-btn-ghost,
.lomo-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-full);
  padding: 18px 36px;
  font-family: var(--font-body);
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
  transition: background .25s ease,
              color .25s ease,
              transform .25s var(--ease-out-expo),
              box-shadow .25s ease;
  text-decoration: none;
}

.lomo-btn-primary {
  background: var(--accent);
  color: var(--accent-ink, #000);
}
.lomo-btn-primary:hover {
  background: #d1963a; /* --accent darkened ~8% */
  color: var(--accent-ink, #000);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(232,169,67,.3);
}

.lomo-btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.2);
}
.lomo-btn-ghost:hover {
  border-color: rgba(255,255,255,.6);
  background: var(--surface);
  transform: translateY(-2px);
}

/* Small ghost button variant */
.lomo-btn-sm {
  padding: 12px 22px;
  font-size: .82rem;
  letter-spacing: .1em;
}

/* ── HERO ─────────────────────────────────────────────────── */
.lomo-hero {
  position: relative;
  width: 100%;
  line-height: 0;
}

.lomo-hero--video {
  min-height: 0;
  padding: 0;
  background: #000;
  position: relative;
  overflow: hidden;
  height: 100vh;
  max-height: 900px;
}

/* Hero statement — text section below the video */
.lomo-hero--statement {
  background: var(--bg);
  padding: clamp(80px, 12vw, 148px) 0;
  line-height: normal;
}

.lomo-hero--statement h1,
.lomo-hero--statement p,
.lomo-hero--statement p span {
  color: var(--text);
}

.lomo-hero--statement p {
  color: var(--muted);
}

.lomo-hero--statement h1 strong {
  color: var(--accent);
}

.lomo-hero--statement h1 em {
  font-style: italic;
  color: var(--accent);
}

/* Hero text mask-reveal — each line clips in an overflow-hidden wrapper and
   translates up into place on page load, 600ms, 80ms stagger per line. */
.lomo-mask-line {
  display: block;
  overflow: hidden;
}

.lomo-mask-line > span {
  display: block;
  transform: translateY(110%);
  animation: lomo-mask-in .6s var(--ease-out-expo) forwards;
}

.lomo-mask-line:nth-child(1) > span { animation-delay: 0ms; }
.lomo-mask-line:nth-child(2) > span { animation-delay: 80ms; }
.lomo-mask-line:nth-child(3) > span { animation-delay: 160ms; }

@keyframes lomo-mask-in {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lomo-mask-line > span { transform: translateY(0); }
}

/* Hero — static image background modifier */
.lomo-hero--image {
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  min-height: 100svh;
}

.lomo-hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.lomo-hero--image > * {
  position: relative;
  z-index: 1;
}

.lomo-hero-video {
  display: block;
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  opacity: 0;
  animation: lomo-hero-media-in .8s ease forwards;
  /* Subtle parallax — moves opposite to scroll as the hero rolls out of view. */
  transform: translateY(var(--parallax-y, 0px));
}

@keyframes lomo-hero-media-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lomo-hero-video { animation: none; opacity: 1; transform: none; }
}

.lomo-badge {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-full);
  padding: 8px 16px 8px 12px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  margin-bottom: 32px;
}

.lomo-badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.lomo-hero h1 {
  font-family: var(--font-display);
  margin: 0 0 30px;
  font-size: clamp(3.4rem, 9.2vw, 8.1rem);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 800;
}

.lomo-hero h1 em { font-style: italic; }
.lomo-hero h1 strong {
  color: var(--accent);
  font-weight: 800;
  overflow-wrap: normal;
  word-break: normal;
}

.lomo-hero p {
  margin: 0;
  max-width: 580px;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.55;
}

.lomo-hero p span {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-weight: 600;
}

.lomo-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.restaurant-strip {
  width: 100%;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #111;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.restaurant-strip-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.restaurant-strip p {
  margin: 0;
  color: rgba(255,255,255,.8);
  font-size: .94rem;
  line-height: 1.5;
}

.restaurant-strip strong {
  color: rgba(255,255,255,.88);
  font-weight: 700;
}

.restaurant-strip a {
  color: var(--accent);
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, transform .2s ease;
}

.restaurant-strip a:hover {
  color: #ffd071;
  transform: translateX(2px);
}

/* ── MARQUEE ──────────────────────────────────────────────── */
.lomo-marquee {
  background: #030303;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  padding: 22px 0;
}

.lomo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 22px;
  animation: marquee 60s linear infinite;
}

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

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

.lomo-marquee span {
  color: rgba(241,238,231,.85);
  text-transform: uppercase;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: 0;
  font-weight: 800;
  white-space: nowrap;
}

.lomo-marquee i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent, #e8a943);
  display: inline-block;
  flex-shrink: 0;
}

/* ── PORTFOLIO ────────────────────────────────────────────── */
.lomo-portfolio {
  padding: clamp(80px, 13vw, 160px) 0;
  background: var(--bg);
}

.lomo-portfolio-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.lomo-portfolio-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

.lomo-portfolio-head h2 em { font-style: italic; color: var(--accent); }

.lomo-portfolio-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  flex-shrink: 0;
}

.lomo-filter-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all .25s ease;
}

.lomo-filter-btn:hover,
.lomo-filter-btn.is-active {
  background: var(--white);
  color: #000;
  border-color: var(--white);
}

/* Asymmetric masonry grid */
/* CaseCard grid — 2 columns desktop, 1 column mobile, uniform 4:5 cards. */
.lomo-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.lomo-work-card {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  /* Scroll-scrub unfurl — clip reveals top-to-bottom as the card enters the
     viewport; --unfurl defaults to 1 (fully open) so cards still show fully
     with JS disabled. Cursor tilt — per-card only, desktop pointer only. */
  clip-path: inset(0 0 calc((1 - var(--unfurl, 1)) * 100%) 0);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(calc(0.96 + var(--unfurl, 1) * 0.04));
  transition: transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .lomo-work-card {
    clip-path: none;
    transform: none;
  }
}

.lomo-work-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lomo-work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out-expo),
              filter .7s ease;
}

.lomo-work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 50%, transparent 100%);
  transition: opacity .4s ease;
  z-index: 1;
}

.lomo-work-card:hover img {
  transform: scale(1.04);
}

.lomo-work-card:hover .lomo-work-card-info h3 {
  text-decoration-color: currentColor;
}

.lomo-work-overlay {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 4.2rem);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .82;
  color: rgba(247,176,53,.96);
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
  transform: translateY(4px);
  transition: transform .45s var(--ease-out-expo), color .3s ease;
}

.lomo-work-card:hover .lomo-work-overlay {
  transform: translateY(0);
  color: #ffd071;
}

.lomo-work-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 2;
  transform: translateY(8px);
  transition: transform .4s var(--ease-out-expo);
}

.lomo-work-card:hover .lomo-work-card-info {
  transform: translateY(0);
}

.lomo-work-cat {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(234,88,12,.25);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  margin-bottom: 10px;
}

.lomo-work-card-info h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .3s ease;
  overflow: hidden;
  word-break: break-word;
}

.lomo-work-card-info p {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  margin: 0;
  font-weight: 500;
  max-width: 92%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lomo-work-card[data-category].is-hidden {
  display: none;
}

.lomo-portfolio-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  color: var(--muted);
  text-align: center;
  font-size: .95rem;
}

.lomo-portfolio-cta {
  text-align: center;
  margin-top: 64px;
}

/* ── S4 · DEMO REEL ───────────────────────────────────────── */
.lomo-reel {
  padding: clamp(70px, 11vw, 140px) 0;
  background: var(--bg);
}

.lomo-reel-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
  color: var(--text);
  margin: 4px 0 40px;
}

.lomo-reel-heading em {
  font-style: italic;
  color: var(--accent);
}

/* Grow-to-fullscreen scroll-scrub: tall runway (.lomo-reel-scroll) pins
   .lomo-reel-sticky at the viewport while main.js drives --reel-scale
   (1 → enough to cover 100vw/100vh) and --reel-progress (0 → 1) off real
   scroll position — same rAF/custom-property pattern as the Work grid
   unfurl and hero/case parallax. */
.lomo-reel-scroll {
  position: relative;
  height: 220vh;
}

.lomo-reel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lomo-reel-scroll { height: auto; }
  .lomo-reel-sticky { position: static; height: auto; overflow: visible; }
}

.lomo-reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: calc(var(--radius-lg) * (1 - var(--reel-progress, 0)));
  overflow: hidden;
  background: var(--surface);
  transform: scale(var(--reel-scale, 1));
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .lomo-reel-frame {
    border-radius: var(--radius-lg);
    transform: none;
  }
}

.lomo-reel-frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: .95rem;
  aspect-ratio: 16 / 9;
  text-align: center;
  padding: 24px;
}

.lomo-reel-poster,
.lomo-reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lomo-reel-video {
  opacity: 0;
  transition: opacity .5s ease;
}

.lomo-reel-frame.is-playing .lomo-reel-video {
  opacity: 1;
}

.lomo-reel-frame.is-playing .lomo-reel-poster {
  opacity: 0;
}

.lomo-reel-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  z-index: 2;
}

.lomo-reel-play:hover,
.lomo-reel-play:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: scale(1.06);
}

.lomo-reel-frame.is-playing .lomo-reel-play {
  opacity: 0;
  pointer-events: none;
}

/* ── S5 · FEATURED CASES ──────────────────────────────────── */
.lomo-featured-cases {
  padding: clamp(70px, 11vw, 140px) 0;
  background: var(--bg);
}

.lomo-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Card 1: full-width. Cards 2–3: half + half. Unequal rhythm, never a wall
   of identical tiles (SPEC Home v2 §3). */
.lomo-featured-card--1 {
  grid-column: 1 / -1;
}

.lomo-featured-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.lomo-featured-card--1 .lomo-featured-card-media {
  aspect-ratio: 16 / 8;
}

/* Landscape, not portrait — a 4:5 card here towered over the "Our
   Expertise" row right below it (5-up, squared at desktop). Keeping cards
   2–3 wide-ish keeps the two sections' scale from lurching. Rule also
   covers cards 4–5, used by /work Tier 1 (5 cards: 1 full + two pairs). */
.lomo-featured-card--2 .lomo-featured-card-media,
.lomo-featured-card--3 .lomo-featured-card-media,
.lomo-featured-card--4 .lomo-featured-card-media,
.lomo-featured-card--5 .lomo-featured-card-media {
  aspect-ratio: 4 / 3;
}

.lomo-featured-card-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.lomo-featured-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.15) contrast(1.02);
  transition: transform .7s var(--ease-out-expo), filter .5s ease;
}

.lomo-featured-card:hover .lomo-featured-card-media img {
  transform: scale(1.03);
  filter: grayscale(0) contrast(1.02);
}

.lomo-featured-card-copy {
  padding-top: 20px;
}

.lomo-featured-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.lomo-featured-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 8px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 6px;
  transition: text-decoration-color .3s ease, color .3s ease;
}

.lomo-featured-card:hover .lomo-featured-name {
  text-decoration-color: var(--accent);
}

.lomo-featured-line {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
}

.lomo-featured-more {
  text-align: center;
  margin-top: 48px;
}

.lomo-featured-more a {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.lomo-featured-more a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 860px) {
  .lomo-featured-grid {
    grid-template-columns: 1fr;
  }
}

/* ── /work · FLAGSHIP DENSITY ─────────────────────────────── */
/* Unequal scale by design (flagship_scale) — never a uniform grid. */
.lomo-flagship-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}

.lomo-flagship-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.lomo-flagship-card--large { grid-column: 1 / -1; }
.lomo-flagship-card--medium { grid-column: span 2; }

.lomo-flagship-card--large .lomo-flagship-media { aspect-ratio: 16 / 8; }
.lomo-flagship-card--medium .lomo-flagship-media { aspect-ratio: 4 / 3; }

.lomo-flagship-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.lomo-flagship-media img,
.lomo-flagship-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lomo-flagship-video {
  opacity: 0;
  transition: opacity .5s ease;
}

.lomo-flagship-media.is-playing .lomo-flagship-video { opacity: 1; }
.lomo-flagship-media.is-playing img { opacity: 0; }

@media (max-width: 860px) {
  .lomo-flagship-grid { grid-template-columns: 1fr; }
  .lomo-flagship-card--medium { grid-column: 1 / -1; }
}

/* ── /work · LIST DENSITY ─────────────────────────────────── */
/* Typographic entries, SPEC 5.1 formula. Hover-video is desktop-only and
   built lazily by JS — see main.js "WORK LIST HOVER VIDEO". */
.lomo-work-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  margin-bottom: 48px;
}

.lomo-work-list-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.lomo-work-list-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.lomo-work-list-thumb img,
.lomo-work-list-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lomo-work-list-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  flex: 1;
}

.lomo-work-list-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  flex-basis: 100%;
}

.lomo-work-list-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--white);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color .3s ease;
}

.lomo-work-list-item:hover .lomo-work-list-name {
  text-decoration-color: var(--accent);
}

.lomo-work-list-line {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .lomo-work-list-thumb { width: 56px; }
}

/* ── /work · TAIL DENSITY ─────────────────────────────────── */
.lomo-work-tail {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 48px;
}

.lomo-work-tail-label {
  color: var(--text);
  font-weight: 600;
  margin-right: 6px;
}

.lomo-work-tail a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.lomo-work-tail a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── CASE SINGLE — hook line + art-directed gallery ──────────────────── */
.lomo-case-hook {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 600;
  color: var(--white);
  margin: 8px 0 24px;
}

/* Behance-style project canvas: pieces sit edge-to-edge, full-bleed, zero
   gap, no card chrome. Breaks out of the 940px reading column the way
   .lomo-single-project-image already does — this is what gives it weight
   instead of floating as spaced-out cards. */
.lomo-case-gallery {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 40px;
  margin-bottom: 40px;
}

.lomo-case-gallery-item {
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
}

.lomo-case-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lomo-case-gallery-item--large { grid-column: span 6; aspect-ratio: 16 / 9; }
.lomo-case-gallery-item--medium { grid-column: span 3; aspect-ratio: 4 / 3; }
.lomo-case-gallery-item--small { grid-column: span 2; aspect-ratio: 1 / 1; }

@media (max-width: 640px) {
  .lomo-case-gallery-item--medium,
  .lomo-case-gallery-item--small { grid-column: span 3; }
}

/* ── VIEW TRANSITIONS — card → case (native, progressive enhancement) ── */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── PROJECT MODAL (Preview) ──────────────────────────────── */
.lomo-project-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.lomo-project-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lomo-project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lomo-project-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 30px));
  max-height: calc(100vh - 30px);
  margin: 15px auto;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #090909;
  padding: 22px;
}

.lomo-project-modal-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .6);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lomo-project-modal-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 8px;
}

.lomo-project-modal-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(247,176,53,.35);
  background: rgba(247,176,53,.12);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  font-weight: 800;
  padding: 6px 10px;
}

.lomo-project-modal-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: 0;
}

.lomo-project-modal-text {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.lomo-project-modal-video {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.lomo-project-modal-video iframe,
.lomo-project-modal-video video {
  width: 100%;
  display: block;
  border: 0;
  aspect-ratio: 16 / 9;
}

.lomo-project-modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lomo-project-modal-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

/* ── ABOUT STUDIO ─────────────────────────────────────────── */
.lomo-about-studio {
  padding: clamp(96px, 12vw, 160px) 0;
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--line);
}

.lomo-about-studio .lomo-label {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: 10px;
  font-weight: 800;
  margin: 0 0 20px;
}

.lomo-about-studio-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

.lomo-about-studio-inner > * {
  min-width: 0;
}

.lomo-about-studio-text {
  container-type: inline-size;
}

.lomo-about-studio-text h2 {
  font-family: var(--font-display);
  /* cqw, not vw — same fix as the footer/workflow headings: this sits in
     a 50% grid column, so viewport-relative sizing let long words
     outgrow the column. 9.2cqw measured wider than the column at real
     container widths ("Small Team." / "Same Hands." both overflowed a
     650px container), wrapping each line into two — 7.4cqw leaves a
     safety margin so each line stays on one line. */
  font-size: clamp(1.6rem, 7.4cqw, 4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: 0;
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: var(--text);
}

.lomo-about-studio-text h2 em {
  font-style: italic;
  color: var(--accent);
}

.lomo-about-studio-text p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 1rem;
  max-width: 500px;
}

.lomo-about-studio-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lomo-stat-card {
  background: var(--bg);
  color: var(--text);
  padding: clamp(24px, 3vw, 42px) clamp(16px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}

.lomo-stat-card strong {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.9rem);
  font-weight: 800;
  line-height: .95;
  color: var(--accent);
  max-width: 100%;
}

/* A place name isn't a metric — giving "Concord, CA" the same giant
   bold-amber treatment as "20+" made location read like a fabricated
   achievement stat sitting next to a real one. Downscale it to plain
   text so the row reads as one real number + one factual detail. */
.lomo-stat-card--place strong {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
}

.lomo-stat-card span {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 768px) {
  .lomo-about-studio-inner {
    grid-template-columns: 1fr;
  }
  .lomo-about-studio-text p {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  /* Stacked instead of a fixed 2-up grid — at half-width on a narrow
     phone, longer values like "Concord, CA" were overflowing their
     column and getting clipped by the grid's overflow:hidden. */
  .lomo-about-studio-stats { grid-template-columns: 1fr; }
}

/* ── EXPERTISE (Categories) ───────────────────────────────── */
.lomo-expertise {
  padding: clamp(80px, 13vw, 160px) 0;
  background: var(--bg-alt);
}

.lomo-expertise-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
}

.lomo-expertise-head > div {
  /* flex-basis:0 (via `flex: 1 1 0%`) gives this item a size that comes
     from the flex algorithm, not its content — required for
     container-type to work at all here. Without an explicit basis,
     `contain: inline-size` (which container-type implies) cuts off the
     item's normal content-based auto-sizing with nothing to replace it,
     and the container collapses to 0 width instead of querying anything.
     `width: 100%` is defensive insurance against the same collapse in
     case this ever gets a flex-direction:column override at some
     breakpoint (see the team-head version of this comment for the
     real-world failure that caused). */
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
}

.lomo-expertise-head > div p {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: 10px;
  font-weight: 800;
  margin: 0 0 16px;
}

.lomo-expertise-head h2 {
  font-family: var(--font-display);
  margin: 0;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0;
  /* cqw — this heading's flex row has no wrap fallback and its sibling
     is capped at 260px, so a vw-sized heading had no way to yield space
     and overflowed past its own box. */
  font-size: clamp(1.7rem, 11cqw, 5rem);
  line-height: .88;
  font-weight: 800;
}

.lomo-expertise-head > p {
  max-width: 260px;
  margin: 0;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.8;
  font-size: 10px;
  font-weight: 600;
}

.lomo-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lomo-category-grid--five {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) and (min-width: 901px) {
  .lomo-category-grid--five { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) and (min-width: 641px) {
  .lomo-category-grid--five { grid-template-columns: repeat(2, 1fr); }
}

/* Five-up cards at the full 500px min-height read as tall vertical
   strips rather than cards — square them up at desktop widths where
   there's room for 5 columns side by side. */
@media (min-width: 1101px) {
  .lomo-category-grid--five .lomo-category-card {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
}

.lomo-category-card {
  container-type: inline-size;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 500px;
  position: relative;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--accent);
  transition: border-color .3s ease;
}

.lomo-category-card:hover { border-color: rgba(255,255,255,.2); }

.lomo-category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo);
}

.lomo-category-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 700;
  opacity: .5;
}

.lomo-category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 45%, transparent 100%);
}

.lomo-category-card div {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
}

.lomo-category-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(.8rem, 8cqw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: 0;
  font-style: italic;
  font-weight: 800;
  line-height: .95;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--accent);
  text-shadow: 0 4px 16px rgba(0,0,0,.35);
}

.lomo-category-card p,
.lomo-category-card small {
  grid-column: 1 / -1;
  margin: 0;
  margin-top: 0;
  max-width: 92%;
  color: rgba(255,255,255,.78);
  font-size: .86rem;
  line-height: 1.5;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s ease, max-height .3s ease, margin-top .3s ease;
}

.lomo-category-card:hover p,
.lomo-category-card:focus-visible p,
.lomo-category-card:hover small,
.lomo-category-card:focus-visible small {
  opacity: 1;
  max-height: 200px;
  margin-top: 10px;
}

.lomo-category-card small {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(247,176,53,.35);
  border-radius: var(--radius-full);
  background: rgba(247,176,53,.12);
  color: var(--accent);
  padding: 6px 10px;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

@media (prefers-reduced-motion: reduce) {
  .lomo-category-card p,
  .lomo-category-card small {
    transition: none;
  }
}

.lomo-category-card span {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: grid;
  place-items: center;
  font-size: 24px;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
  transition: all .3s ease;
}

.lomo-category-card:hover img { transform: scale(1.06); }
.lomo-category-card:hover span { background: var(--accent); border-color: var(--accent); }
.lomo-category-card:hover h3 { color: #ffd071; }

.lomo-center { margin-top: 52px; }

/* ── ABOUT US (TEAM) ───────────────────────────────────────── */
.lomo-team {
  padding: clamp(96px, 13vw, 164px) 0;
  background: var(--bg-alt);
  color: var(--text);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lomo-team-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 68px;
}

.lomo-team-head > div {
  /* flex-basis:0 required for container-type to have anything to query —
     see the identical comment on .lomo-expertise-head > div. `width:100%`
     is the real fix for a nastier failure: at the ≤980px breakpoint below,
     `.lomo-team-head` switches to `flex-direction: column; align-items:
     flex-start`, which flips `flex: 1 1 0%` onto the vertical axis and
     leaves this container with zero width signal at all (`align-items:
     flex-start` won't stretch it, and `contain: inline-size` from
     container-type blocks it from sizing off its own content) — the
     result was every single letter of the heading wrapping onto its own
     line. `width: 100%` gives it an explicit size on the cross axis
     regardless of flex-direction. */
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
}

.lomo-team-head .lomo-label {
  color: var(--muted);
}

.lomo-team-head .lomo-label::before {
  background: var(--accent);
}

.lomo-team-head h2 {
  font-family: var(--font-display);
  /* cqw — same nowrap-flex-row-with-capped-sibling issue as expertise-head. */
  font-size: clamp(1.7rem, 10.5cqw, 4.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .86;
  margin: 0;
}

.lomo-team-head h2 em {
  font-style: italic;
  color: var(--accent);
}

.lomo-team-head > p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.lomo-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.lomo-team-card {
  display: grid;
  grid-template-columns: minmax(180px, 38%) 1fr;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  transition: transform .35s var(--ease-out-expo), border-color .3s ease, box-shadow .35s ease;
}

.lomo-team-photo {
  position: relative;
  min-height: 100%;
  background: #0b0b0e;
  overflow: hidden;
}

.lomo-team-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, .05) 45%, transparent);
  pointer-events: none;
  z-index: 1;
  transition: opacity .35s ease;
}

.lomo-team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transform: scale(1);
  transform-origin: center top;
  transition: transform .75s var(--ease-out-expo), filter .45s ease;
}

.lomo-team-photo-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  font-weight: 800;
  color: var(--accent);
  background:
    radial-gradient(circle at 30% 20%, rgba(247,176,53,.22), transparent 42%),
    linear-gradient(150deg, #101010, #0a0a0a 60%);
  text-transform: uppercase;
}

.lomo-team-card-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .35s var(--ease-out-expo);
}

.lomo-team-card-body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.05;
}

.lomo-team-role {
  margin: 0 0 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 800;
}

.lomo-team-bio {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  line-height: 1.76;
}

.lomo-team-card:hover {
  transform: translateY(-5px);
  border-color: rgba(247,176,53,.45);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .34);
}

.lomo-team-card:hover .lomo-team-photo img {
  transform: scale(1.025);
}

.lomo-team-card:hover .lomo-team-photo::after {
  opacity: .7;
}

.lomo-team-card:hover .lomo-team-card-body {
  transform: translateY(-2px);
}

/* ── WORKFLOW ─────────────────────────────────────────────── */
.lomo-workflow {
  background: var(--bg);
  color: var(--text);
  padding: clamp(80px, 13vw, 160px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lomo-workflow::before {
  content: '';
  position: absolute;
  width: clamp(280px, 34vw, 560px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  top: -20%;
  right: -8%;
  background: radial-gradient(circle, rgba(247,176,53,.14) 0%, rgba(247,176,53,0) 68%);
  filter: blur(4px);
  pointer-events: none;
  animation: lomo-workflow-glow 16s ease-in-out infinite;
}

@keyframes lomo-workflow-glow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .42; }
  50% { transform: translate3d(-28px, 22px, 0) scale(1.08); opacity: .75; }
}

.lomo-workflow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.lomo-workflow-grid > * {
  min-width: 0;
}

.lomo-workflow-grid > div:first-child {
  container-type: inline-size;
}

.lomo-workflow h2 {
  font-family: var(--font-display);
  margin: 0 0 24px;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0;
  line-height: .86;
  /* cqw (container width), not vw — this heading sits in a 50% grid
     column, so sizing off the full viewport let "conversation" outgrow
     its column and overflow uncontained instead of wrapping. Same root
     cause as the footer CTA fix. Floor measured against the actual
     rendered word "engagements" (541px wide at 40px/Syne) so the clamp
     floor itself can't force a size bigger than the cqw value would
     have picked — that's what caused the very bug this comment
     describes even after the first attempt at this fix. */
  font-size: clamp(1.8rem, 7cqw, 6rem);
  font-weight: 800;
}

.lomo-workflow > .lomo-container > .lomo-workflow-grid > div:first-child > p {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 380px;
}

.lomo-workflow u {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  color: var(--text);
}

.lomo-steps article {
  position: relative;
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: linear-gradient(120deg, rgba(255,255,255,.015), rgba(255,255,255,.005));
  transition: transform .35s var(--ease-out-expo), border-color .35s ease, background .35s ease;
}

.lomo-steps article:last-child { margin-bottom: 0; }

.lomo-steps {
  position: relative;
}

.lomo-steps::before,
.lomo-steps::after {
  display: none;
}

.lomo-workflow.is-live .lomo-steps::after {
  transform: none;
}

.lomo-steps b {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0f0f0f;
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: color .3s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .35s var(--ease-out-expo);
}

.lomo-steps b::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(247,176,53,.26);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .4s var(--ease-out-expo);
}

.lomo-steps h3 {
  font-family: var(--font-display);
  margin: 0 0 8px;
  text-transform: uppercase;
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: 0;
  font-weight: 700;
  padding-top: 10px;
  transition: color .25s ease, transform .35s var(--ease-out-expo);
}

.lomo-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  transition: color .25s ease;
}

.lomo-steps article:hover,
.lomo-steps article.is-active {
  border-color: rgba(247,176,53,.35);
  background: linear-gradient(120deg, rgba(247,176,53,.1), rgba(247,176,53,.02));
  transform: translateX(8px);
}

.lomo-steps article:hover b,
.lomo-steps article.is-active b {
  color: var(--accent);
  border-color: rgba(247,176,53,.56);
  background: rgba(247,176,53,.14);
  box-shadow: 0 0 0 4px rgba(247,176,53,.08);
  transform: scale(1.03);
}

.lomo-steps article:hover b::after,
.lomo-steps article.is-active b::after {
  opacity: 1;
  transform: scale(1);
}

.lomo-steps article:hover h3,
.lomo-steps article.is-active h3 {
  color: var(--accent);
  transform: translateX(4px);
}

.lomo-steps article:hover p,
.lomo-steps article.is-active p {
  color: rgba(255,255,255,.8);
}

/* ── TESTIMONIALS ─────────────────────────────────────────── */
.lomo-testimonials {
  padding: clamp(80px, 13vw, 160px) 0;
  background: var(--bg-alt);
  overflow: hidden;
}

/* TestimonialBlock — one large quote per viewport, never a card grid or carousel. */
.lomo-testimonial-single {
  padding: clamp(96px, 12vw, 160px) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lomo-testimonial-single-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.lomo-testimonial-single-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.lomo-testimonial-single-author {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lomo-testimonial-single-author strong {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.lomo-testimonial-single-author span {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--muted);
}

.lomo-testimonials-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.lomo-testimonials-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .88;
  margin: 0;
}

.lomo-testimonials-head h2 em { font-style: italic; color: var(--accent); }

.lomo-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lomo-testimonial-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transition: border-color .3s ease, transform .4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.lomo-testimonial-card.is-priority {
  grid-column: span 2;
  background:
    radial-gradient(circle at 88% -18%, rgba(247,176,53,.2), transparent 55%),
    var(--surface);
}

.lomo-testimonial-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out-expo);
}

.lomo-testimonial-card:hover {
  border-color: rgba(255,255,255,.2);
  transform: translateY(-4px);
}

.lomo-testimonial-card:hover::before { transform: scaleX(1); }

.lomo-testimonial-card.is-priority::before { transform: scaleX(1); }

.lomo-testimonial-stars {
  display: flex;
  gap: 4px;
}

.lomo-testimonial-stars span {
  color: var(--accent);
  font-size: 14px;
}

.lomo-testimonial-quote {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255,255,255,.82);
  flex: 1;
}

.lomo-testimonial-quote::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: .5;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
  font-weight: 800;
}

.lomo-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.lomo-testimonial-author img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.lomo-testimonial-author > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lomo-testimonial-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

.lomo-testimonial-role {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 500;
}

/* ── FAQ ──────────────────────────────────────────────────── */
.lomo-faq {
  padding: clamp(80px, 13vw, 160px) 0;
  background: var(--bg);
}

.lomo-faq-wrap { max-width: 960px; }

.lomo-faq-head { text-align: center; margin-bottom: 60px; }

.lomo-faq-head h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0;
  font-weight: 800;
}

.lomo-faq-head p {
  margin: 12px 0 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 11px;
  font-weight: 600;
}

.lomo-faq-item {
  border-bottom: 1px solid var(--line);
}

.lomo-faq-item:first-child { border-top: 1px solid var(--line); }

.lomo-faq-item > button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  cursor: pointer;
  transition: color .2s ease;
}

.lomo-faq-item > button:hover { color: var(--accent); }

.lomo-faq-item > button .lomo-faq-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: all .35s var(--ease-out-expo);
  flex-shrink: 0;
  color: var(--muted);
  font-style: normal;
}

.lomo-faq-item.is-active > button .lomo-faq-icon {
  transform: rotate(180deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.lomo-faq-item > div {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s var(--ease-out-expo),
              opacity .4s ease,
              padding .35s ease;
}

.lomo-faq-item.is-active > div {
  max-height: 400px;
  opacity: 1;
  padding-bottom: 28px;
}

.lomo-faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  line-height: 1.7;
}

/* ── CONTACT ──────────────────────────────────────────────── */
.lomo-contact {
  padding: clamp(80px, 13vw, 160px) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.lomo-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.lomo-contact-grid > * {
  min-width: 0;
}

.lomo-contact-left {
  container-type: inline-size;
}

.lomo-contact-left h1,
.lomo-contact-left h2 {
  font-family: var(--font-display);
  /* cqw — same 50%-grid-column overflow as about-studio/workflow/footer.
     Covers both tags: the standalone /contact/ page uses <h1>, the
     home-page embedded contact section uses <h2> (correctly, since a
     page can only have one real h1) — same class, different heading
     level depending on where it's used. */
  font-size: clamp(1.7rem, 9.5cqw, 4.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .86;
  margin: 0 0 28px;
}

.lomo-contact-left h1 em,
.lomo-contact-left h2 em {
  font-style: italic;
  color: var(--accent);
}

.lomo-contact-left > p {
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 48px;
  max-width: 420px;
}

.lomo-contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lomo-contact-detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lomo-contact-detail-item span {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35em;
  color: var(--muted-2);
}

.lomo-contact-detail-item a,
.lomo-contact-detail-item p {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  margin: 0;
  transition: color .2s ease;
}

.lomo-contact-detail-item a:hover { color: var(--accent); }

.lomo-contact-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted-2);
  margin-top: 40px;
}

.lomo-contact-note::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,.4);
}

@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Form */
.lomo-form-wrap { width: 100%; }

.lomo-booking-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lomo-form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lomo-form-field label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--muted);
}

.lomo-form-field input:not([type="checkbox"]):not([type="radio"]),
.lomo-form-field textarea,
.lomo-form-field select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 16px 18px;
  transition: border-color .25s ease, background .25s ease;
  width: 100%;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}

.lomo-form-field input:focus,
.lomo-form-field textarea:focus,
.lomo-form-field select:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  outline: none;
}

.lomo-form-field input::placeholder,
.lomo-form-field textarea::placeholder {
  color: var(--muted-2);
}

.lomo-form-field textarea { min-height: 130px; }

.lomo-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lomo-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-full);
  padding: 20px 40px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  margin-top: 8px;
  transition: background .25s ease,
              transform .3s var(--ease-out-expo),
              box-shadow .3s ease;
  width: 100%;
}

.lomo-form-submit:hover {
  background: var(--white);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(234,88,12,.3);
}

.lomo-form-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.lomo-form-message {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.lomo-form-message.success {
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
  color: #4ade80;
}

.lomo-form-message.error {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  color: #f87171;
}

.lomo-form-privacy {
  font-size: .78rem;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.5;
  margin-top: 4px;
}

/* ── SERVICES PAGE ────────────────────────────────────────── */
.lomo-services-page {
  min-height: calc(100vh - 160px);
  padding: 56px 0 80px;
}

.lomo-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 36px;
  transition: color .2s ease;
  padding: 0;
}

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

.lomo-services-page h1 {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(3rem, 9vw, 7.5rem);
  text-transform: uppercase;
  letter-spacing: 0;
  font-style: italic;
  line-height: .86;
  font-weight: 800;
}

.lomo-services-page h1 span { color: var(--accent); }

.lomo-services-page > .lomo-container > p {
  margin: 24px 0 52px;
  color: var(--muted);
  max-width: 700px;
  font-size: clamp(.95rem, 1.8vw, 1.25rem);
  line-height: 1.65;
}

.lomo-service-group-intro {
  margin: 0 0 14px;
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  letter-spacing: .02em;
}

.lomo-service-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lomo-service-columns > article {
  padding: 28px;
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.lomo-service-columns > article:last-child { border-right: 0; }

.lomo-service-photo-block { margin-top: 26px; }

.lomo-service-photo-block .lomo-service-columns { grid-template-columns: 1fr; }

.lomo-service-cat {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 220px;
  margin-bottom: 24px;
}

.lomo-service-cat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .6s var(--ease-out-expo);
}

.lomo-service-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  transition: .4s ease;
}

.lomo-service-cat h2 {
  position: absolute;
  left: 18px;
  bottom: 46px;
  margin: 0;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.9rem;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0;
  font-weight: 800;
}

.lomo-service-cat:not(:has(p)) h2 {
  bottom: 14px;
}

.lomo-service-cat p {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  line-height: 1.35;
}

.lomo-service-columns > article:hover .lomo-service-cat img { transform: scale(1.06); }
.lomo-service-columns > article:hover .lomo-service-cat::after { background: rgba(0,0,0,.1); }

.lomo-service-item {
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.lomo-service-item:last-of-type { border: 0; padding-bottom: 0; }

.lomo-service-item h3 {
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0;
  font-weight: 700;
  overflow-wrap: normal;
  word-break: normal;
}

.lomo-service-item h3 span {
  color: var(--white);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1;
  justify-self: start;
  text-align: left;
  white-space: normal;
}

.lomo-service-item p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.6;
  font-size: .9rem;
}

.lomo-service-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.lomo-service-item small {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 9px;
  font-weight: 800;
}

.lomo-request-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
}

.lomo-request-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.lomo-example-link {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 6px 0;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}

.lomo-example-link:hover {
  color: var(--accent);
  transform: translateX(2px);
}

.lomo-service-preview-popover,
.lomo-service-preview-inline {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background:
    linear-gradient(160deg, rgba(247,176,53,.14), rgba(0,0,0,.78) 55%),
    rgba(10,10,10,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lomo-service-preview-popover {
  position: absolute;
  z-index: 1300;
  width: min(360px, calc(100vw - 32px));
  padding: 12px;
  box-shadow: 0 24px 40px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.lomo-service-preview-popover.is-open {
  opacity: 1;
  transform: translateY(0);
}

.lomo-service-preview-inline {
  margin-top: 12px;
  padding: 12px;
  display: none;
}

.lomo-service-preview-inline.is-open {
  display: block;
}

.lomo-service-preview-title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.84);
}

.lomo-service-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lomo-service-preview-card {
  margin: 0;
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 5;
  cursor: zoom-in;
  transition: transform .18s ease, border-color .18s ease;
}

.lomo-service-preview-card:hover {
  transform: translateY(-1px) scale(1.01);
  border-color: rgba(247,176,53,.7);
}

.lomo-service-preview-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lomo-service-preview-card img,
.lomo-service-preview-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lomo-service-preview-card video {
  background: #000;
}

.lomo-service-preview-card figcaption {
  display: none !important;
}

.lomo-service-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
}

.lomo-service-zoom-modal.is-open {
  display: block;
}

.lomo-service-zoom-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.74);
  cursor: zoom-out;
}

.lomo-service-zoom-dialog {
  position: relative;
  width: min(860px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  margin: 12px auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(160deg, rgba(247,176,53,.16), rgba(0,0,0,.86) 55%),
    rgba(10,10,10,.98);
  box-shadow: 0 24px 48px rgba(0,0,0,.45);
}

.lomo-service-zoom-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.46);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}

.lomo-service-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
  z-index: 3;
}

.lomo-service-zoom-nav:hover {
  transform: translateY(-50%) scale(1.06);
  border-color: var(--accent);
}

.lomo-service-zoom-nav:disabled,
.lomo-service-zoom-nav[hidden] {
  opacity: 0;
  pointer-events: none;
}

.lomo-service-zoom-nav-prev {
  left: 16px;
}

.lomo-service-zoom-nav-next {
  right: 16px;
}

.lomo-service-zoom-close:hover {
  transform: scale(1.06);
  border-color: var(--accent);
}

.lomo-service-zoom-media {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  max-height: calc(100vh - 110px);
}

.lomo-service-zoom-media img,
.lomo-service-zoom-media video {
  width: 100%;
  max-height: calc(100vh - 110px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.lomo-service-zoom-caption {
  display: none !important;
}

.lomo-service-preview-note {
  margin: 8px 0 0;
  font-size: .72rem;
  color: rgba(255,255,255,.66);
}

/* ── FOOTER ───────────────────────────────────────────────── */
.lomo-footer {
  border-top: 1px solid var(--line);
  padding: clamp(80px, 12vw, 160px) 0 44px;
  background: var(--bg);
}

.lomo-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 50px;
  margin-bottom: 100px;
}

.lomo-footer-grid > * {
  min-width: 0;
}

.lomo-footer-grid > *:first-child {
  container-type: inline-size;
}

.lomo-footer h2 {
  font-family: var(--font-display);
  margin: 0 0 36px;
  text-transform: uppercase;
  font-style: italic;
  line-height: .82;
  letter-spacing: 0;
  /* cqw (container width), not vw — this heading sits in a ~55% grid
     column, so sizing off the full viewport let its longest word
     ("Results?") outgrow the column and force a mid-word break. */
  font-size: clamp(3rem, 11.5cqw, 6rem);
  font-weight: 800;
  overflow-wrap: normal;
  word-break: normal;
}

.lomo-footer h2 span { color: var(--accent); }

.lomo-footer-cta {
  background: var(--white);
  color: #000;
  border: 0;
}

.lomo-footer-cta:hover {
  background: var(--accent);
  color: var(--white);
  transform: translateY(-2px);
}

.lomo-footer-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.lomo-footer-label {
  margin: 0 0 10px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 9px;
  font-weight: 800;
}

.lomo-email,
.lomo-whatsapp-footer a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color .2s ease;
}

.lomo-email:hover,
.lomo-whatsapp-footer a:hover { color: var(--accent); }

.lomo-location {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 8px;
}

.lomo-whatsapp-footer {
  margin: 8px 0 0;
}

.lomo-whatsapp-icon {
  display: inline-flex;
  width: .95em;
  height: .95em;
  margin-right: .28em;
  transform: translateY(.04em);
}

.lomo-whatsapp-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.lomo-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 40px;
}

.lomo-footer-cols a {
  display: block;
  text-decoration: none;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  transition: color .2s ease;
}

.lomo-footer-cols a:hover { color: var(--accent); }

.lomo-philosophy {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.5;
  font-size: .95rem;
  font-weight: 700;
  font-family: var(--font-display);
}

.lomo-whatsapp-note {
  margin: 16px 2px 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.lomo-whatsapp-note a {
  color: var(--white);
  text-decoration: none;
}

.lomo-whatsapp-note a:hover { color: var(--accent); }

.lomo-wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  z-index: 980;
  transition: transform .15s ease;
}

.lomo-wa-float:hover { transform: scale(1.06); }

.lomo-copyright {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.lomo-logo-small span { font-size: 26px; }
.lomo-logo-small small { font-size: 7px; }

.lomo-copyright p {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 9px;
  color: rgba(255,255,255,.3);
  text-align: center;
}

/* ── SINGLE PROJECT ────────────────────────────────────────── */
.lomo-single-project-main {
  padding: clamp(120px, 14vw, 180px) 0 clamp(72px, 10vw, 120px);
  background: var(--bg);
}

.lomo-single-project-wrap {
  width: min(940px, calc(100% - 40px));
  margin: 0 auto;
}

/* CaseHero — full-bleed 16:9 media, breaking out of the contained column. */
.lomo-single-project-image {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 32px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
}

.lomo-single-project-image img {
  position: absolute;
  top: -10%;
  left: 0;
  display: block;
  width: 100%;
  height: 120%;
  object-fit: cover;
  /* Parallax — image drifts opposite to scroll within its crop, headroom
     sized to the max offset the JS ever applies. */
  transform: translateY(var(--parallax-y, 0px));
}

@media (prefers-reduced-motion: reduce) {
  .lomo-single-project-image img { transform: none; }
}

.lomo-single-project-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 40%, transparent 65%);
  pointer-events: none;
}

/* Hero "contain" mode — for pre-diagrammed hero pieces where cropping would
   cut into the design. Shows the full image; no forced 16:9 crop, no
   overscan/parallax (both exist only to serve the cover-crop). */
body.lomo-project-hero-contain .lomo-single-project-image {
  aspect-ratio: auto;
  background: #000;
}

body.lomo-project-hero-contain .lomo-single-project-image img {
  position: static;
  height: auto;
  object-fit: contain;
  transform: none;
}

body.lomo-project-hero-contain .lomo-single-project-image::after {
  content: none;
}

.lomo-single-project-terms {
  margin: 0 0 16px;
  text-align: center;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 800;
}

.lomo-single-project-title {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .92;
  font-size: clamp(2rem, 7vw, 4.2rem);
}

.lomo-single-project-excerpt {
  margin: 0 auto 22px;
  max-width: 640px;
  text-align: center;
  color: var(--text);
  opacity: .9;
  font-size: 1.15rem;
  line-height: 1.7;
}

.lomo-project-showcase {
  margin: 0 0 26px;
  display: grid;
  gap: 16px;
}

.lomo-project-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lomo-project-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(247, 176, 53, .45);
  background: rgba(247, 176, 53, .14);
  color: #f7b035;
  padding: 8px 14px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-weight: 800;
}

.lomo-project-video {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.lomo-project-video iframe,
.lomo-project-video video {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Same Behance-style full-bleed/zero-gap treatment as .lomo-case-gallery —
   this is the fallback gallery, it should carry the same weight. */
.lomo-project-media-grid {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.lomo-project-media-item {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
}

.lomo-project-media-item img,
.lomo-project-media-item video,
.lomo-project-media-item iframe {
  width: 100%;
  display: block;
  border: 0;
}

.lomo-project-media-item img,
.lomo-project-media-item video {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lomo-project-media-item iframe {
  aspect-ratio: 16 / 9;
}

/* "Stacked" layout — for galleries of pre-diagrammed pieces (moodboards,
   composed mockups) where a forced crop would cut into the design itself.
   One column, full width, no aspect-ratio lock — the image dictates its
   own height instead of being cropped to fit a uniform grid cell. */
.lomo-project-media-grid--stacked {
  grid-template-columns: 1fr;
}

.lomo-project-media-grid--stacked .lomo-project-media-item img,
.lomo-project-media-grid--stacked .lomo-project-media-item video {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.lomo-project-media-item a {
  display: block;
  padding: 16px 18px;
  color: var(--accent);
  text-decoration: none;
  font-size: .84rem;
  letter-spacing: .04em;
  word-break: break-word;
}

.lomo-single-project-content {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.lomo-single-project-content > * {
  margin: 0 0 18px;
}

.lomo-single-project-content h2,
.lomo-single-project-content h3,
.lomo-single-project-content h4 {
  color: var(--text);
  margin-top: 26px;
  margin-bottom: 12px;
}

.lomo-single-project-back {
  margin: 30px 0 0;
}

.lomo-single-project-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 12px 22px;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .8rem;
  transition: all .2s ease;
}

.lomo-single-project-back a:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, .06);
}

/* ── NICHE LANDING: RESTAURANTS ─────────────────────────── */
.lomo-niche-main {
  padding-top: 0;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% -12%, rgba(234, 88, 12, .12), transparent 42%),
    radial-gradient(circle at 104% 6%, rgba(234, 88, 12, .07), transparent 30%),
    linear-gradient(180deg, #050505 0%, #090909 58%, #050505 100%);
}

.lomo-niche-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity: .02;
  pointer-events: none;
  z-index: -1;
}

.lomo-niche-hero {
  padding: clamp(104px, 11vw, 152px) 0 56px;
}

.lomo-niche-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .82fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}

.lomo-label-niche {
  margin-bottom: 16px;
}

.lomo-niche-hero h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.7rem);
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 12.5ch;
}

.lomo-niche-subheadline {
  max-width: 68ch;
  color: rgba(243, 243, 243, .9);
  font-size: clamp(1rem, 1.55vw, 1.24rem);
  line-height: 1.72;
  margin-bottom: 16px;
}

.lomo-niche-positioning {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  border: 1px solid rgba(234, 88, 12, .45);
  background: rgba(234, 88, 12, .12);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .72rem;
  font-weight: 800;
}

.lomo-niche-positioning::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(234, 88, 12, .18);
}

.lomo-niche-hero-quick {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
}

.lomo-niche-hero-quick li:nth-child(3) {
  grid-column: 1 / -1;
}

.lomo-niche-hero-quick li {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 13px;
  background: rgba(255, 255, 255, .02);
  padding: 10px 12px;
  font-size: .74rem;
  line-height: 1.42;
  font-weight: 650;
}

.lomo-niche-bullet-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .74rem;
  color: #101010;
  background: var(--accent);
  font-weight: 900;
}

.lomo-niche-hero-panel {
  justify-self: end;
  width: min(420px, 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  padding: clamp(18px, 2vw, 24px);
  background:
    linear-gradient(140deg, rgba(234, 88, 12, .16), rgba(234, 88, 12, .01) 42%),
    rgba(14, 14, 14, .88);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
}

.lomo-niche-panel-eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: .68rem;
  color: rgba(243, 243, 243, .72);
}

.lomo-niche-hero-panel h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.3vw, 2.45rem);
  line-height: .98;
  letter-spacing: 0;
}

.lomo-niche-hero-panel > p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.68;
}

.lomo-niche-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.lomo-niche-metric-item {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, .04);
}

.lomo-niche-metric-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: 3px;
}

.lomo-niche-metric-item span {
  display: block;
  color: rgba(243, 243, 243, .77);
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
}

.lomo-niche-mini-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .71rem;
  font-weight: 800;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 3px;
}

.lomo-niche-mini-cta::after {
  content: '↗';
  color: var(--accent);
  transition: transform .25s ease;
}

.lomo-niche-mini-cta:hover::after {
  transform: translate3d(3px, -3px, 0);
}

.lomo-niche-proof-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 7, 7, .8);
  overflow: hidden;
}

.lomo-niche-proof-strip .lomo-container {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lomo-niche-proof-strip .lomo-container::-webkit-scrollbar {
  display: none;
}

.lomo-niche-proof-scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  padding: 12px 0;
}

.lomo-niche-proof-scroll span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243, 243, 243, .88);
  white-space: nowrap;
}

.lomo-niche-proof-scroll span::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.lomo-niche-section {
  padding: clamp(62px, 9vw, 118px) 0;
}

.lomo-anchor-offset {
  display: block;
  position: relative;
  top: -110px;
  visibility: hidden;
  height: 0;
}

.lomo-niche-kicker {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: .67rem;
  font-weight: 800;
  color: rgba(243, 243, 243, .66);
}

.lomo-niche-head {
  max-width: 860px;
  margin-bottom: 30px;
}

.lomo-niche-head h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: .93;
  text-transform: uppercase;
  letter-spacing: 0;
}

.lomo-niche-head p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.96rem, 1.45vw, 1.1rem);
  line-height: 1.72;
}

.lomo-niche-pain {
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .008), rgba(255, 255, 255, .004));
}

.lomo-niche-pain .lomo-niche-head h2 {
  max-width: 16ch;
  font-size: clamp(1.8rem, 3.9vw, 3.05rem);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.03;
}

.lomo-niche-pain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: niche-pain;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lomo-niche-pain-list li {
  counter-increment: niche-pain;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .007));
  padding: 17px 18px 17px 54px;
  font-size: clamp(.93rem, 1.2vw, 1.02rem);
  line-height: 1.6;
}

.lomo-niche-pain-list li::before {
  content: counter(niche-pain, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 14px;
  color: rgba(234, 88, 12, .92);
  font-size: .64rem;
  letter-spacing: .1em;
  font-weight: 900;
}

.lomo-niche-pain-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.lomo-niche-case-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.lomo-before-after-case {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  color: var(--text);
  font-size: .7rem;
  font-weight: 760;
  line-height: 1.34;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  padding: 10px;
  cursor: pointer;
  display: grid;
  gap: 9px;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}

.lomo-before-after-case.is-active {
  border-color: rgba(234, 88, 12, .48);
  background: rgba(234, 88, 12, .15);
  color: #fff;
}

.lomo-before-after-case:hover {
  transform: translateY(-2px);
}

.lomo-before-after-case-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.lomo-before-after-case-media img {
  width: 100%;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #0d0d0d;
}

.lomo-before-after-case-media img.is-before {
  filter: saturate(.6) brightness(.8);
}

.lomo-before-after-case-title {
  display: block;
}

.lomo-before-after {
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: rgba(12, 12, 12, .95);
  padding: 14px;
}

.lomo-before-after--empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  border-style: dashed;
}

.lomo-before-after--empty p {
  margin: 0;
  text-align: center;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .7rem;
  line-height: 1.6;
  max-width: 520px;
}

.lomo-before-after-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  aspect-ratio: 16 / 9;
  background: #111;
  cursor: col-resize;
}

.lomo-before-after-layer {
  position: absolute;
  inset: 0;
  margin: 0;
}

.lomo-before-after-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lomo-before-after-layer.is-before img {
  filter: saturate(.64) contrast(.9) brightness(.82);
}

.lomo-before-after-layer.is-after {
  width: var(--after-width, 50%);
  overflow: hidden;
}

.lomo-before-after-handle {
  position: absolute;
  top: 0;
  left: var(--after-width, 50%);
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .32);
}

.lomo-before-after-handle::before {
  content: '↔';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(5, 5, 5, .94);
  border: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .86rem;
}

.lomo-before-after-range {
  width: 100%;
  margin: 12px 0 5px;
  accent-color: var(--accent);
}

.lomo-before-after-labels {
  display: flex;
  justify-content: space-between;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(243, 243, 243, .64);
  font-weight: 800;
}

.lomo-niche-sample-story {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .02);
  padding: 18px;
}

.lomo-niche-sample-story h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.1;
}

.lomo-niche-sample-row {
  display: grid;
  gap: 10px;
}

.lomo-niche-sample-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: .95rem;
}

.lomo-niche-sample-row strong {
  color: var(--text);
}

.lomo-niche-services {
  border-top: 1px solid var(--line-2);
}

.lomo-niche-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lomo-niche-service-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .35s var(--ease-out-expo),
              border-color .25s ease,
              box-shadow .25s ease,
              background .25s ease;
}

.lomo-niche-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(234, 88, 12, .4);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
  background: linear-gradient(165deg, rgba(234, 88, 12, .13), rgba(255, 255, 255, .03));
}

.lomo-niche-service-media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0d0d0d;
}

.lomo-niche-service-media img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  transition: transform .6s var(--ease-out-expo), filter .35s ease;
}

.lomo-niche-service-card:hover .lomo-niche-service-media img {
  transform: scale(1.05);
  filter: saturate(1.08);
}

.lomo-niche-service-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.lomo-niche-service-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.42rem);
  line-height: 1.08;
  letter-spacing: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lomo-niche-service-price {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .7rem;
  font-weight: 900;
  justify-self: end;
  text-align: right;
  max-width: 100%;
  white-space: normal;
}

.lomo-niche-service-card > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: .93rem;
}

.lomo-niche-service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lomo-niche-service-list li {
  position: relative;
  padding-left: 18px;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(243, 243, 243, .9);
}

.lomo-niche-service-list li::before {
  content: '';
  position: absolute;
  top: .58em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(234, 88, 12, .8);
}

.lomo-niche-service-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .68rem;
  font-weight: 800;
  padding-top: 6px;
}

.lomo-niche-service-cta::after {
  content: '→';
  color: var(--accent);
}

.lomo-niche-retainer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lomo-niche-retainer-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .02);
  padding: 24px 20px;
  transition: transform .35s var(--ease-out-expo),
              border-color .25s ease,
              box-shadow .25s ease,
              background .25s ease;
}

.lomo-niche-retainer-card.is-highlight {
  border-color: rgba(234, 88, 12, .45);
  background: linear-gradient(160deg, rgba(234, 88, 12, .2), rgba(255, 255, 255, .03));
}

.lomo-niche-retainer-card:hover {
  transform: translateY(-6px);
  border-color: rgba(234, 88, 12, .45);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .33);
}

.lomo-niche-retainer-tag {
  display: inline-flex;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-full);
  padding: 7px 11px;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
}

.lomo-niche-retainer-card h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 2vw, 1.8rem);
  letter-spacing: 0;
}

.lomo-niche-retainer-price {
  margin: 0 0 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .71rem;
  font-weight: 900;
}

.lomo-niche-retainer-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.lomo-niche-workflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lomo-niche-workflow-list li {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(234, 88, 12, .16), rgba(234, 88, 12, .03));
  padding: 20px;
}

.lomo-niche-workflow-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(234, 88, 12, .6);
  color: var(--accent);
  font-size: .73rem;
  font-weight: 900;
  margin-bottom: 13px;
}

.lomo-niche-workflow-list p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  font-weight: 640;
}

.lomo-niche-testimonials {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.lomo-niche-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lomo-niche-testimonial-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .02);
  padding: 20px;
}

.lomo-niche-testimonial-quote {
  margin: 0 0 14px;
  color: rgba(243, 243, 243, .92);
  line-height: 1.68;
}

.lomo-niche-testimonial-name {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .69rem;
  font-weight: 900;
}

.lomo-niche-testimonial-result {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .64rem;
  font-weight: 850;
}

.lomo-niche-faq {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.lomo-niche-faq .lomo-faq-wrap {
  max-width: 1120px;
}

.lomo-niche-faq .lomo-faq-head {
  text-align: left;
}

.lomo-niche-faq .lomo-faq-head p {
  letter-spacing: .11em;
}

.lomo-niche-final {
  padding: clamp(72px, 10vw, 128px) 0;
}

.lomo-niche-final-wrap {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 34px;
  align-items: start;
}

.lomo-niche-final-copy {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  background:
    linear-gradient(155deg, rgba(234, 88, 12, .2), rgba(255, 255, 255, .02) 52%),
    rgba(14, 14, 14, .95);
}

.lomo-niche-final-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lomo-niche-guarantee-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.lomo-niche-guarantee-list li {
  position: relative;
  padding-left: 24px;
  color: rgba(243, 243, 243, .88);
  line-height: 1.58;
}

.lomo-niche-guarantee-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}

.lomo-niche-form-wrap {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
}

.lomo-niche-form-wrap .lomo-form-row {
  grid-template-columns: 1fr 1fr;
}

/* ── RESPONSIVE: NICHE LANDING ─────────────────────────── */
@media (max-width: 1240px) {
  .lomo-niche-hero-grid {
    grid-template-columns: 1fr;
  }
  .lomo-niche-hero-panel {
    justify-self: start;
    width: min(520px, 100%);
  }
  .lomo-niche-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .lomo-niche-hero-quick,
  .lomo-niche-pain-list,
  .lomo-niche-case-switch,
  .lomo-niche-retainer-grid,
  .lomo-niche-workflow-list,
  .lomo-niche-testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lomo-niche-metric-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .lomo-niche-final-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .lomo-niche-hero-quick,
  .lomo-niche-pain-list,
  .lomo-niche-case-switch,
  .lomo-niche-service-grid,
  .lomo-niche-retainer-grid,
  .lomo-niche-workflow-list,
  .lomo-niche-testimonial-grid,
  .lomo-niche-form-wrap .lomo-form-row {
    grid-template-columns: 1fr;
  }
  .lomo-niche-proof-scroll {
    padding: 12px 0;
  }
  .lomo-niche-pain .lomo-niche-head h2 {
    max-width: none;
  }
  .lomo-before-after-labels {
    letter-spacing: .12em;
    font-size: .6rem;
  }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1380px) {
  .lomo-service-item h3 {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .lomo-service-item h3 span {
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 1200px) {
  .lomo-hero-bg { width: 55%; }
  .lomo-service-columns { grid-template-columns: 1fr; }
  .lomo-service-columns > article { border-right: 0; border-bottom: 1px solid var(--line); }
  .lomo-service-columns > article:last-child { border-bottom: 0; }
  .lomo-service-item h3 {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .lomo-service-item h3 span {
    justify-self: start;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .lomo-service-meta {
    justify-content: flex-start;
    gap: 10px;
  }
  .lomo-request-btn {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }
  .lomo-testimonials-grid { grid-template-columns: 1fr 1fr; }
  .lomo-testimonial-card.is-priority { grid-column: span 2; }

  .lomo-footer-grid { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 980px) {
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lomo-nav-desktop { display: none; }
  .lomo-menu-btn { display: inline-flex; }
  .lomo-hero-bg { width: 100%; opacity: .28; }
  .lomo-category-grid { grid-template-columns: 1fr; }
  .lomo-category-card { min-height: 380px; }
  .lomo-team-head { flex-direction: column; align-items: flex-start; }
  .lomo-team-grid { grid-template-columns: 1fr; }
  .lomo-team-card { grid-template-columns: minmax(180px, 34%) 1fr; }
  .lomo-workflow-grid { grid-template-columns: 1fr; gap: 48px; }
  .lomo-steps::before,
  .lomo-steps::after { left: 23px; }
  .lomo-steps article { transform: none; }
  .lomo-contact-grid { grid-template-columns: 1fr; gap: 60px; }
  .lomo-footer-grid { grid-template-columns: 1fr; }
  .lomo-footer-cols { grid-template-columns: 1fr 1fr; }
  .lomo-portfolio-head { flex-direction: column; align-items: flex-start; }
  .lomo-testimonials-head { flex-direction: column; align-items: flex-start; }
  .lomo-testimonials-grid { grid-template-columns: 1fr; }
  .lomo-testimonial-card.is-priority { grid-column: span 1; }
  .lomo-main { padding-top: 0; }
  .lomo-service-columns > article {
    padding: 22px 18px;
  }
}

@media (max-width: 768px) {
  .lomo-container { width: min(var(--container), calc(100% - 28px)); }
  .lomo-hero h1,
  .lomo-portfolio-head h2,
  .lomo-about-studio-text h2,
  .lomo-expertise-head h2,
  .lomo-team-head h2,
  .lomo-workflow h2,
  .lomo-testimonials-head h2,
  .lomo-faq-head h2,
  .lomo-contact-left h2,
  .lomo-services-page h1,
  .lomo-service-cat h2,
  .lomo-footer h2,
  .lomo-niche-hero h1,
  .lomo-niche-head h2,
  .lomo-niche-final-copy h2,
  .lomo-single-project-title,
  .lomo-not-found .wp-block-heading {
    max-width: 100%;
    letter-spacing: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  /* .lomo-expertise-head h2, .lomo-workflow h2, .lomo-contact-left h2,
     .lomo-footer h2, .lomo-about-studio-text h2, and .lomo-team-head h2
     are deliberately excluded from this flat mobile size — they now use
     cqw-based sizing (see their own rules) that adapts to their actual
     grid-column width instead of a flat guess, which is what let
     multi-syllable words ("engagements", "conversation") overflow or
     force-break here before. */
  .lomo-hero h1,
  .lomo-portfolio-head h2,
  .lomo-testimonials-head h2,
  .lomo-faq-head h2 {
    font-size: 2.45rem;
    line-height: 1.02;
  }
  .lomo-services-page h1,
  .lomo-niche-hero h1,
  .lomo-niche-head h2,
  .lomo-niche-final-copy h2,
  .lomo-single-project-title,
  .lomo-not-found .wp-block-heading {
    font-size: 2.15rem;
    line-height: 1.08;
  }
  .lomo-nav-wrap { padding: 14px 0; }
  .lomo-nav-wrap.is-scrolled { padding: 10px 0; }
  .lomo-logo span { font-size: 32px; }
  .lomo-hero { min-height: 85vh; padding: 40px 0; }
  .lomo-hero--video { min-height: 0; padding: 0; }
  .lomo-hero--statement {
    min-height: 0;
    padding: clamp(56px, 10vw, 88px) 0;
  }
  .restaurant-strip {
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
  }
  .restaurant-strip a {
    white-space: normal;
  }
  .lomo-marquee-track { animation-duration: 40s; }
  .lomo-workflow::before { opacity: .45; right: -14%; }
  .lomo-steps::before,
  .lomo-steps::after { display: none; }
  .lomo-steps article { padding: 14px 12px; border-color: var(--line); background: var(--surface); }
  .lomo-steps article:hover,
  .lomo-steps article.is-active { transform: none; border-color: rgba(247,176,53,.4); background: linear-gradient(120deg, rgba(247,176,53,.14), rgba(247,176,53,.04)); }
  .lomo-team-card { grid-template-columns: 1fr; min-height: 0; }
  .lomo-team-photo { aspect-ratio: 4 / 5; min-height: 0; }
  .lomo-team-photo img { object-position: 50% 14%; }
  .lomo-team-card-body { padding: 20px; }
  .lomo-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lomo-work-overlay {
    left: 14px;
    right: 14px;
    bottom: 10px;
    font-size: clamp(1.4rem, 10vw, 2.6rem);
  }
  .lomo-single-project-wrap { width: min(940px, calc(100% - 28px)); }
  .lomo-project-media-grid { grid-template-columns: 1fr; }
  .lomo-single-project-content { font-size: 1rem; line-height: 1.75; }
  .lomo-project-modal-dialog { width: calc(100% - 20px); max-height: calc(100vh - 20px); margin: 10px auto; padding: 16px; }
  .lomo-project-modal-gallery { grid-template-columns: 1fr; }
  .lomo-form-row { grid-template-columns: 1fr; }
  .lomo-copyright { flex-direction: column; }
  .lomo-portfolio-filters { gap: 6px; }

  .lomo-footer-grid,
  .lomo-footer-right,
  .lomo-footer-cols,
  .lomo-footer-label,
  .lomo-footer h2,
  .lomo-philosophy,
  .lomo-whatsapp-footer,
  .lomo-location,
  .lomo-copyright {
    text-align: center;
  }

  .lomo-footer-right {
    align-items: center;
    gap: 24px;
  }

  .lomo-footer-cols {
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 8px;
  }

  .lomo-footer-cta {
    margin-inline: auto;
  }

  .lomo-service-item h3,
  .lomo-niche-service-head {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .lomo-service-item h3 span,
  .lomo-niche-service-price {
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .lomo-service-preview-inline {
    padding: 10px;
  }

  .lomo-service-preview-inline .lomo-service-preview-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }

  .lomo-service-preview-inline .lomo-service-preview-card {
    flex: 0 0 min(72vw, 240px);
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }

  .lomo-service-preview-inline .lomo-service-preview-card figcaption {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .lomo-service-preview-inline .lomo-service-preview-card {
    flex-basis: min(78vw, 240px);
  }

  .lomo-service-zoom-dialog {
    width: calc(100% - 14px);
    max-height: calc(100vh - 14px);
    margin: 7px auto;
    padding: 10px;
  }

  .lomo-service-zoom-nav {
    width: 34px;
    height: 34px;
    font-size: 24px;
  }

  .lomo-service-zoom-nav-prev {
    left: 8px;
  }

  .lomo-service-zoom-nav-next {
    right: 8px;
  }

  .lomo-service-zoom-media,
  .lomo-service-zoom-media img,
  .lomo-service-zoom-media video {
    max-height: calc(100vh - 150px);
  }
}

@media (max-width: 420px) {
  .lomo-container { width: min(var(--container), calc(100% - 20px)); }
  .lomo-hero h1,
  .lomo-portfolio-head h2,
  .lomo-testimonials-head h2,
  .lomo-faq-head h2 {
    font-size: 2.08rem;
  }
  .lomo-services-page h1,
  .lomo-niche-hero h1,
  .lomo-niche-head h2,
  .lomo-niche-final-copy h2,
  .lomo-single-project-title,
  .lomo-not-found .wp-block-heading {
    font-size: 1.9rem;
  }
  .lomo-badge,
  .lomo-label {
    letter-spacing: .12em;
    line-height: 1.3;
  }

}

@media (max-width: 760px) {
  .lomo-wa-float {
    right: 16px;
    bottom: 86px;
    width: 56px;
    height: 56px;
  }
}

/* ── P1 NEW PAGES — baseline styling (Work index, Services, Studio, Contact, Case beats) ── */
.lomo-work-archive .lomo-portfolio-head { margin-bottom: 24px; }
.lomo-section-sub { color: var(--muted); font-family: var(--font-body); font-size: 1.05rem; margin-top: 8px; }

.lomo-services-intro,
.lomo-studio-intro {
  padding: clamp(64px, 10vw, 120px) 0 40px;
}
.lomo-services-intro .lomo-container,
.lomo-studio-intro .lomo-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.lomo-studio-intro p { color: var(--muted); font-family: var(--font-body); max-width: 640px; margin-top: 14px; line-height: 1.7; }

/* Visual-first rework (reference: Athletics NYC "Approach" — big real
   image carries each discipline, text never stands alone). Alternating
   image-left/image-right rhythm keeps 5 sections in a row from reading as
   one repeated template. Real tagged work in the category is its own
   full-width strip below the pitch — the actual proof, not a decorative
   afterthought under the CTA. */
.lomo-service-pillar-wrap {
  border-top: 1px solid var(--line);
}

.lomo-service-pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

.lomo-service-pillar--right { direction: rtl; }
.lomo-service-pillar--right > * { direction: ltr; }

.lomo-service-pillar-media {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.lomo-service-pillar-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lomo-service-pillar-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: clamp(40px, 5vw, 80px);
}

.lomo-service-pillar-copy b {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  opacity: .85;
  margin-bottom: 8px;
}
.lomo-service-pillar-copy h2 { font-family: var(--font-display); margin: 0 0 16px; font-size: clamp(1.8rem, 3.2vw, 2.75rem); line-height: 1.1; }
.lomo-service-pillar-copy p { color: var(--muted); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; max-width: 480px; margin-bottom: 20px; }
.lomo-service-pillar-copy ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 24px; }

/* Pills jump to the matching loose piece below (see main.js "SERVICE
   PILL JUMP") when that sub-service has a tagged piece; otherwise inert —
   still reads as a capability tag, doesn't imply a broken link. */
.lomo-service-pillar-bullet {
  color: var(--text);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.lomo-service-pillar-bullet:hover,
.lomo-service-pillar-bullet:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* Pills and their matching piece are usually both onscreen already (the
   section isn't tall enough to force a scroll), so this pulse — not the
   scroll — is what actually confirms the click did something. Needs to
   read clearly even sitting on top of a busy photo/video thumbnail. */
.lomo-service-pillar-piece.is-jump-target {
  animation: lomo-jump-highlight 1.6s ease;
  z-index: 1;
}

@keyframes lomo-jump-highlight {
  0% { box-shadow: inset 0 0 0 0 var(--accent); outline: 3px solid transparent; transform: scale(1); }
  15% { box-shadow: inset 0 0 0 5px var(--accent); outline: 3px solid var(--accent); outline-offset: 3px; transform: scale(1.03); }
  50% { box-shadow: inset 0 0 0 5px var(--accent); outline: 3px solid var(--accent); outline-offset: 3px; transform: scale(1.03); }
  100% { box-shadow: inset 0 0 0 0 var(--accent); outline: 3px solid transparent; outline-offset: 0; transform: scale(1); }
}
.lomo-service-pillar-cta { color: var(--accent); font-family: var(--font-body); font-weight: 700; text-decoration: none; letter-spacing: .02em; }
.lomo-service-pillar-cta:hover { text-decoration: underline; }

.lomo-service-pillar-proof {
  font-style: italic;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin-bottom: 20px;
}

/* Real tagged work in this discipline — the actual proof, full width of
   the section, sized to be seen (not a decorative row easy to miss). */
.lomo-service-pillar-pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
  background: var(--line);
}

.lomo-service-pillar-piece {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.lomo-service-pillar-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out-expo);
}

.lomo-service-pillar-piece:hover img { transform: scale(1.05); }

.lomo-service-pillar-piece-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .3s ease;
}

.lomo-service-pillar-piece:hover .lomo-service-pillar-piece-caption {
  text-decoration-color: var(--accent);
}

/* Loose one-off piece — à la carte work, no named client, no case to link
   to. Still clickable (opens the lightbox, see main.js), just no caption —
   the missing name is itself the signal this isn't a client case. Slightly
   dimmed at rest so it doesn't compete with the named cards' full-opacity
   look; brightens on hover/focus to confirm it's interactive. */
.lomo-service-pillar-piece--loose img {
  opacity: .82;
  transition: opacity .3s ease, transform 600ms var(--ease-out-expo);
}
.lomo-service-pillar-piece--loose:hover img,
.lomo-service-pillar-piece--loose:focus-visible img {
  opacity: 1;
}

.lomo-service-pillar-piece-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(10,10,12,.5);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  pointer-events: none;
}

/* ── Piece lightbox — contained, never cropped (fixes vertical video/
   Reels being unviewable inside a 4:3 grid tile). ──────────────────── */
.lomo-piece-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.lomo-piece-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lomo-piece-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,6,.92);
}

.lomo-piece-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.lomo-piece-lightbox-stage {
  position: relative;
  width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lomo-piece-lightbox-stage img,
.lomo-piece-lightbox-stage video {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .lomo-service-pillar,
  .lomo-service-pillar--right {
    grid-template-columns: 1fr;
    direction: ltr;
    min-height: 0;
  }
  .lomo-service-pillar-media { aspect-ratio: 4 / 3; }
  .lomo-service-pillar-body { padding: 32px 24px; }
  .lomo-service-pillar-pieces { grid-template-columns: repeat(2, 1fr); }
}

/* CTABlock — full-width closer, last section of every page. */
.lomo-cta-block {
  padding: clamp(96px, 12vw, 160px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  text-align: center;
}
.lomo-cta-block h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 32px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.lomo-cta-block .lomo-btn-primary { display: inline-block; text-decoration: none; }

.lomo-case-beat {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 24px;
}
.lomo-case-beat h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 10px; }
.lomo-case-beat p { color: var(--muted); font-family: var(--font-body); line-height: 1.7; }
.lomo-case-beat blockquote { margin-top: 16px; border-left: 2px solid var(--accent); padding-left: 16px; }
.lomo-case-beat blockquote p { color: var(--text); font-style: italic; }
.lomo-case-beat cite { display: block; margin-top: 8px; color: var(--muted); font-style: normal; font-size: .9rem; }

.lomo-single-project-meta {
  text-align: center;
  color: var(--muted);
  font-family: var(--font-body);
  letter-spacing: .04em;
  margin: 12px 0 24px;
}

.lomo-case-next {
  max-width: 420px;
  margin: 48px auto 0;
  padding: 0 24px;
  text-align: center;
}
.lomo-case-next .lomo-work-card { display: block; margin-bottom: 24px; }

/* Contact page fieldsets (checkboxes/radios) */
.lomo-booking-form fieldset.lomo-form-field {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.lomo-booking-form fieldset.lomo-form-field legend {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--muted);
  padding: 0 6px;
}
.lomo-booking-form fieldset.lomo-form-field label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--text);
  margin: 6px 14px 6px 0;
  cursor: pointer;
}
.lomo-booking-form fieldset.lomo-form-field input[type="checkbox"],
.lomo-booking-form fieldset.lomo-form-field input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}