/* ==========================================================================
   FINE ART PRODUCTION — Homepage feature blocks
   Bigger, more editorial sections so the page stops reading as one repeated
   "centred heading + card grid" pattern. Loaded only by index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Full-bleed helper — breaks an element out of the centred container
   -------------------------------------------------------------------------- */
.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Infinite photo strip — two rows drifting in opposite directions
   -------------------------------------------------------------------------- */
.photo-strip {
  --strip-gap: clamp(0.6rem, 1vw, 1rem);
  display: flex;
  gap: var(--strip-gap);
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.photo-strip + .photo-strip { margin-top: var(--strip-gap); }

.photo-strip__track {
  display: flex;
  gap: var(--strip-gap);
  flex-shrink: 0;
  animation: stripScroll var(--strip-speed, 80s) linear infinite;
}
.photo-strip--reverse .photo-strip__track { animation-direction: reverse; }
.photo-strip:hover .photo-strip__track { animation-play-state: paused; }

@keyframes stripScroll {
  to { transform: translateX(calc(-100% - var(--strip-gap))); }
}

.photo-strip figure {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 20vw, 310px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}
.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.photo-strip figure:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .photo-strip { overflow-x: auto; }
  .photo-strip__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Showreel band — click to play, so the video costs nothing until wanted
   -------------------------------------------------------------------------- */
.showreel {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  isolation: isolate;
}
.showreel__media { position: absolute; inset: 0; z-index: -2; }
.showreel__media img,
.showreel__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showreel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 80% at 50% 50%, rgba(12, 10, 8, 0.32), rgba(12, 10, 8, 0.86));
  transition: opacity 0.6s var(--ease-out);
}
.showreel.is-playing .showreel__media::after { opacity: 0; }

.showreel__inner {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--space-md);
  min-height: clamp(420px, 62vh, 660px);
  padding: var(--space-xl) var(--gutter);
  text-align: center;
  color: #fff;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.showreel.is-playing .showreel__inner { opacity: 0; visibility: hidden; }

.showreel h2 { color: #fff; max-width: 16ch; }
.showreel .eyebrow { color: var(--gold-300); }

.showreel__play {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(82px, 8.5vw, 112px);
  height: clamp(82px, 8.5vw, 112px);
  color: var(--ink-900);
  background: #fff;
  border-radius: 50%;
  transition: transform 0.5s var(--ease-spring), background 0.4s var(--ease-out);
}
.showreel__play:hover { transform: scale(1.09); background: var(--gold-300); }
.showreel__play svg { width: 30%; height: 30%; margin-left: 8%; }

.showreel__play::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: reelPulse 2.6s var(--ease-out) infinite;
}
@keyframes reelPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .showreel__play::before { animation: none; } }

.showreel__note {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   Asymmetric editorial collage
   -------------------------------------------------------------------------- */
.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.collage__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.collage__item:hover img { transform: scale(1.05); }
.collage__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.55), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.collage__item:hover::after { opacity: 1; }

.collage__item--a { grid-column: 1 / 6;  aspect-ratio: 4 / 5; }
.collage__item--b { grid-column: 6 / 13; aspect-ratio: 16 / 11; align-self: end; }
.collage__item--c { grid-column: 1 / 5; }  /* no ratio — stretches to the row set by d/e */
.collage__item--d { grid-column: 5 / 9;  aspect-ratio: 3 / 4; }
.collage__item--e { grid-column: 9 / 13; aspect-ratio: 3 / 4; }

@media (max-width: 800px) {
  .collage__item--a { grid-column: 1 / 13; aspect-ratio: 4 / 3; }
  .collage__item--b { grid-column: 1 / 13; }
  .collage__item--c { grid-column: 1 / 7; aspect-ratio: 3 / 4; }
  .collage__item--d { grid-column: 7 / 13; }
  .collage__item--e { grid-column: 1 / 13; aspect-ratio: 16 / 10; }
}

.collage__cap {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.collage__item:hover .collage__cap { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Full-bleed quote break
   -------------------------------------------------------------------------- */
.break {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(380px, 54vh, 600px);
  overflow: hidden;
  background: var(--ink-900);
  isolation: isolate;
  text-align: center;
}
.break__media { position: absolute; inset: -14% 0; z-index: -2; }
.break__media img { width: 100%; height: 100%; object-fit: cover; }
.break__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 8, 0.62);
}
.break__inner { padding: var(--space-xl) var(--gutter); max-width: 62ch; }
.break blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.8vw, 3rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.28;
  color: #fff;
}
.break cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* --------------------------------------------------------------------------
   Numbered process steps
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; }
.steps__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  border-top: 1px solid var(--border);
  transition: padding-left 0.5s var(--ease-out);
}
.steps__item:last-child { border-bottom: 1px solid var(--border); }
.steps__item:hover { padding-left: 0.75rem; }

.steps__item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--accent);
  opacity: 0.4;
  transition: opacity 0.4s var(--ease-out);
}
.steps__item:hover::before { opacity: 1; }

.steps__body { max-width: 62ch; }
.steps__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  font-weight: 400;
  line-height: 1.2;
}
.steps__text { margin-top: 0.5rem; color: var(--text-muted); line-height: 1.75; }

/* --------------------------------------------------------------------------
   Service tiles — full-height image with the copy sitting on it
   -------------------------------------------------------------------------- */
.svc {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  background: var(--ink-800);
  aspect-ratio: 3 / 4;
}
.svc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}
.svc:hover img { transform: scale(1.07); }
.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, 0.92) 0%, rgba(12, 10, 8, 0.35) 46%, rgba(12, 10, 8, 0.04) 100%);
}
.svc__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  color: #fff;
}
.svc__num {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--gold-300);
}
.svc__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
}
.svc__text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease-out), opacity 0.45s var(--ease-out), margin-top 0.5s var(--ease-out);
}
.svc:hover .svc__text { max-height: 9rem; opacity: 1; margin-top: 0.6rem; }

.svc__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9rem;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.svc__go svg { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease-out); }
.svc:hover .svc__go svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Intro block — larger, offset image pair
   -------------------------------------------------------------------------- */
.intro-art {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 6vw;
}
.intro-art__a { grid-column: 1 / 7; grid-row: 1 / 8; z-index: 1; }
.intro-art__b { grid-column: 5 / 9; grid-row: 5 / 11; z-index: 2; box-shadow: var(--shadow-lg); }
.intro-art figure {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.intro-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.intro-art figure:hover img { transform: scale(1.05); }

.intro-art__badge {
  position: absolute;
  right: 4%;
  top: 2%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 118px);
  height: clamp(84px, 9vw, 118px);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
}
.intro-art__badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .intro-art { grid-auto-rows: 9vw; }
  .intro-art__badge { width: 74px; height: 74px; font-size: 0.5rem; }
  .intro-art__badge b { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Process section — top-align the copy with the first step
   -------------------------------------------------------------------------- */
.section--process .split { align-items: start; }
@media (min-width: 901px) {
  .section--process .split > *:first-child { position: sticky; top: calc(var(--header-h) + 3rem); }
}