/* ==========================================================================
   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.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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(23, 19, 15, 0.32), rgba(23, 19, 15, 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);
  /* This label names the section, so it is read at a distance. */
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.34em;
}

.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);
  column-gap: clamp(0.75rem, 1.4vw, 1.25rem);
  row-gap: clamp(1.5rem, 2.6vw, 2.2rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
/* Each frame carries its own line, the way a plate is captioned in a book,
   rather than a label that only appears when a mouse happens to pass over it. */
.collage__item {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.85rem;
}
.collage__frame {
  position: relative;
  display: block;
  height: 100%;
  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__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(23, 19, 15, 0.42), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.collage__item:hover .collage__frame::after { opacity: 1; }

/* Every frame in a row is the same height and starts on the same line. A tall
   portrait beside a short landscape, one of them dropped to the foot of the
   row, read as a mistake rather than a composition. */
/* Three plates on one line, the same height, the same width. */
.collage__item { grid-column: span 4; }

.collage__item .collage__frame { height: clamp(300px, 26vw, 400px); }

@media (max-width: 800px) {
  .collage__item { grid-column: 1 / 13; }
  .collage__item .collage__frame { height: auto; aspect-ratio: 4 / 3; }
}

.collage__cap {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.collage__cap i {
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}
.collage__item:hover .collage__cap { color: var(--text); }

/* --------------------------------------------------------------------------
   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(23, 19, 15, 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(23, 19, 15, 0.92) 0%, rgba(23, 19, 15, 0.35) 46%, rgba(23, 19, 15, 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); }

/* --------------------------------------------------------------------------
   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); }
}

/* ==========================================================================
   Blocks the rebuilt homepage adds to the original system.
   The nine sections the client's script fixes are rendered with the
   original design vocabulary — hero slideshow, collage, invert band, 3D
   review carousel, showreel, break panel, drifting photo strips, CTA band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 3 — Chirali and Amish, one frame set over the corner of another
   -------------------------------------------------------------------------- */
.founders { position: relative; }
.founders__main {
  overflow: hidden;
  border-radius: var(--radius);
  /* The frame takes the photograph's own shape, so the whole picture is
     on the page rather than a crop of it. */
  aspect-ratio: 1050 / 1400;
  background: var(--bg-alt);
}
.founders__main img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Section 4 — the directed / unguarded pair
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.frame--tall { aspect-ratio: 4 / 5; }
/* Side by side on the homepage they take a set height rather than a 4:5 column. */
.grid-2 > .frame--tall { aspect-ratio: auto; height: clamp(300px, 27vw, 400px); }
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.frame:hover img { transform: scale(1.05); }
.frame figcaption {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: rgba(12, 10, 8, 0.55);
  backdrop-filter: blur(6px);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
}

/* Stat pairs inside the inverted band */
.grid--stats .stat b { display: block; }

/* --------------------------------------------------------------------------
   Section 6 — the showreel plays in place
   -------------------------------------------------------------------------- */
.showreel[data-video] { cursor: pointer; }
.showreel__lede {
  max-width: 54ch;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}
.showreel iframe {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  border: 0;
}
button.showreel__play { border: 0; cursor: pointer; font: inherit; }

/* --------------------------------------------------------------------------
   Section 7 — the anniversary panel
   -------------------------------------------------------------------------- */
.break--campaign .break__inner { max-width: 68ch; }
.anniv-mark {
  display: inline-grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-md);
  border: 1px solid var(--gold-300);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-300);
  text-align: center;
}
.anniv-mark b { display: block; font-size: 1.9rem; font-weight: 300; letter-spacing: 0; }
.break__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 20ch;
  margin-inline: auto;
}
.break__lede {
  margin-top: var(--space-md);
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.8);
}

/* --------------------------------------------------------------------------
   Section 9 — the closing band carries the inquiry
   -------------------------------------------------------------------------- */
.split--form { align-items: start; gap: clamp(2rem, 5vw, 4.5rem); }

.reach {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-md);
}
.reach a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.35em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #fff;
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
.reach a:hover { border-color: var(--gold-300); background: rgba(255, 255, 255, 0.08); }
.reach svg { width: 1.05em; height: 1.05em; flex: none; }
.reach__line {
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.78);
}

/* The closing band.
   The band centres its text, which is right for a headline on its own but
   wrong here: it centred the labels over their fields and the sentence over
   the row of buttons. This half of the page reads left.
   The form is a grid, and a grid stretches its rows into whatever height it is
   given; beside a tall column that left a hand's width of air above a button
   as tall as a door. Its rows now keep their own height.
   The fields were filled with near black and set straight on the photograph,
   which is why they read as empty boxes. They sit on a panel of their own now,
   as lines rather than boxes. */
.cta-band .split--form { text-align: left; align-items: center; }
.cta-band .split--form .lead { margin-inline: 0; }

.form--onphoto {
  align-content: start;
  gap: clamp(1rem, 2vw, 1.45rem);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: rgba(14, 11, 9, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}
.form--onphoto .field label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}
.form--onphoto .field input,
.form--onphoto .field select,
.form--onphoto .field textarea {
  padding-block: 0.7rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  color: #fff;
}
.form--onphoto .field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.form--onphoto .field input:focus,
.form--onphoto .field select:focus {
  border-bottom-color: var(--gold-300);
  background: transparent;
  outline: none;
}
.btn--full { width: 100%; justify-content: center; }
.form--onphoto .btn--full { margin-top: 0.5rem; padding-block: 1.05em; }
/* The message under the button sat on the panel's own pale background with
   pale text on it, so it could not be read at all. */
.form--onphoto .form__status {
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.24);
}
.form--onphoto .form__status.is-error {
  background: rgba(120, 30, 24, 0.5);
  border-color: rgba(255, 176, 160, 0.5);
}
.form--onphoto .field textarea {
  min-height: 4.5rem;
  resize: vertical;
}
.form--onphoto .field select { color: #fff; }
.form--onphoto .field select option { color: var(--text); background: #fff; }
@media (max-width: 640px) { .form--onphoto .form__row { grid-template-columns: 1fr; } }

/* The closing band needs its copy legible over the photograph. */
.cta-band .eyebrow,
.cta-band h2,
.cta-band .lead { color: #fff; }
.cta-band .eyebrow { color: var(--gold-300); }
.cta-band .lead { color: rgba(255, 255, 255, 0.84); }

/* The locked headline is far longer than the one this hero was built for,
   so it takes a smaller face and a tighter measure. Without this the
   sub-line, the action and the numbers all fall below the fold. */
.hero__title {
  font-size: clamp(2.3rem, 5.4vw, 5rem);
  max-width: 19ch;
}
.hero__sub { max-width: 52ch; }
@media (max-width: 700px) {
  .hero__title { font-size: clamp(2rem, 8.2vw, 2.9rem); max-width: 16ch; }
}

/* The anniversary frame is bright sand and open sky, so the campaign panel
   carries a deeper scrim than the quote break it borrows its shape from. */
.break--campaign .break__media::after {
  background: linear-gradient(to bottom, rgba(18, 14, 10, 0.5), rgba(18, 14, 10, 0.78));
}

/* ==========================================================================
   LEGIBILITY OVER PHOTOGRAPHS — homepage
   Same principle as the rest of the site: a shadow behind the letters rather
   than a heavier wash over the picture, so the words hold wherever the frame
   happens to be bright and the photograph keeps its own light.
   ========================================================================== */
:root {
  --on-photo: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .42);
  --on-photo-lite: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 14px rgba(0, 0, 0, .34);
}

.hero__eyebrow,
.hero__title,
.hero__sub,
.hero__meta,
.scroll-cue,
.showreel .eyebrow,
.showreel h2,
.showreel__lede,
.showreel__note,
.break blockquote,
.break cite,
.break__title,
.break__lede,
.anniv-mark,
.cta-band .eyebrow,
.cta-band h2,
.cta-band .lead,
.reach__line { text-shadow: var(--on-photo); }

.frame figcaption,
.reach a { text-shadow: var(--on-photo-lite); }
.anniv-mark { box-shadow: 0 2px 20px rgba(0, 0, 0, .35); }

/* The hero headline sits left, so that flank carries a little more wash. */
.hero__media::after {
  background:
    var(--scrim),
    linear-gradient(to right, rgba(23, 19, 15, 0.6) 0%, rgba(23, 19, 15, 0.26) 32%, rgba(23, 19, 15, 0) 60%),
    radial-gradient(120% 90% at 50% 100%, rgba(23, 19, 15, 0.72), transparent 65%);
}
@media (max-width: 700px) {
  .hero__media::after {
    background:
      linear-gradient(to top,
        rgba(20, 16, 12, 0.9) 0%,
        rgba(20, 16, 12, 0.74) 26%,
        rgba(20, 16, 12, 0.46) 46%,
        rgba(20, 16, 12, 0.16) 64%,
        rgba(20, 16, 12, 0) 80%),
      linear-gradient(to bottom, rgba(20, 16, 12, 0.5) 0%, rgba(20, 16, 12, 0) 18%);
  }
}

/* The showreel copy sits dead centre of a bright frame, so its wash is
   centred too rather than pulled to one edge. */
.showreel__media::after {
  background:
    radial-gradient(78% 82% at 50% 50%, rgba(18, 14, 10, 0.62), rgba(18, 14, 10, 0.88));
}

/* Same for the homepage's small tracked labels. */
.hero__eyebrow,
.scroll-cue,
.showreel .eyebrow,
.showreel__note,
.cta-band .eyebrow {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .78),
    0 2px 10px rgba(0, 0, 0, .6),
    0 4px 26px rgba(0, 0, 0, .45);
}

/* Same treatment for the homepage's photographic bands on small screens:
   the copy carries its own ground so the picture above it stays bright. */
@media (max-width: 700px) {
  .hero__inner,
  .break__inner,
  .cta-band .wrap { position: relative; }

  .hero__inner::before,
  .break__inner::before,
  .cta-band .wrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    top: -3rem;
    bottom: -8rem;
    pointer-events: none;
    background: linear-gradient(to top,
      rgba(20, 16, 12, 0.94) 0%,
      rgba(20, 16, 12, 0.9) 58%,
      rgba(20, 16, 12, 0.74) 80%,
      rgba(20, 16, 12, 0.36) 92%,
      rgba(20, 16, 12, 0) 100%);
  }

  .hero__media::after {
    background:
      linear-gradient(to top,
        rgba(20, 16, 12, 0.5) 0%,
        rgba(20, 16, 12, 0.24) 32%,
        rgba(20, 16, 12, 0) 60%),
      linear-gradient(to bottom, rgba(20, 16, 12, 0.5) 0%, rgba(20, 16, 12, 0) 18%);
  }
}

/* ===========================================================================
   FOLLOW ALONG — the live Instagram and Facebook feeds
   Both are cross-origin iframes with fixed intrinsic sizes, so each sits in a
   frame that owns its own height. The height is reserved before the iframe
   arrives, otherwise swapping it in on scroll would shift the whole band.
   ======================================================================== */
.social__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.social__head .lead { margin-top: 1.25rem; }

.social__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.social__col {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.social__bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--border);
}
.social__bar svg { width: 1.15rem; height: 1.15rem; color: var(--gold-500); flex: none; }
.social__who {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
}
.social__at {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The reserved box. Both embeds report roughly this ratio at this width. */
.social__frame {
  position: relative;
  min-height: 560px;
  background: var(--bg-alt);
}
.social__frame iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
.social__frame:not([data-loaded])::after {
  content: "Loading the feed\2026";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.social__go {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding: 1.05rem 1.35rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.social__go svg { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease-out); }
.social__go:hover { color: var(--gold-600); background: var(--bg-alt); }
.social__go:hover svg { transform: translateX(4px); }

@media (max-width: 700px) {
  .social__frame, .social__frame iframe { min-height: 560px; height: 560px; }
  .social__frame--ig.is-posts { height: 560px; }
}

/* The Instagram column when the studio has not supplied post links yet, and
   the stacked post embeds once it has. */
/* Four post embeds stack to ~2000px; cap the column at the Facebook frame's
   height and let the stack scroll inside it, so the two cards stay level. */
/* The Instagram column reads as a grid of photographs. Instagram's own embed
   carries a header with a View profile button, a like bar and a comment box;
   each post is cropped to its picture inside its tile, so none of that chrome
   is on the page. The tile carries the link and the frame takes no clicks. */
/* The card keeps the height of the Facebook card beside it and the wall of
   photographs scrolls inside it, rather than the band growing to hold every
   tile. */
.social__frame--ig.is-posts {
  height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-300) transparent;
}
.social__frame--ig.is-posts::-webkit-scrollbar { width: 4px; }
.social__frame--ig.is-posts::-webkit-scrollbar-thumb { background: var(--gold-300); border-radius: 4px; }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.ig-tile { aspect-ratio: 1 / 1; }
.ig-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-alt);
  isolation: isolate;
}
.ig-tile iframe {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Instagram's header is a fixed height whatever the frame is wide, so the
     frame is pulled up by exactly that much and run long enough that the bar
     beneath the picture falls below the tile. The frame is also set wider than
     the tile: a reel or a square post renders shorter than a portrait, and at
     the tile's own width their like bar rose into view. */
  top: calc(var(--ig-chrome) * -1);
  width: 152%;
  height: calc(100% + var(--ig-chrome) + 420px);
  border: 0;
  pointer-events: none;
}
.ig-grid { --ig-chrome: 56px; }
.ig-tile--reel iframe { width: 224%; }
.ig-tile__go {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 2.4rem 0.9rem 0.8rem;
  background: linear-gradient(to top, rgba(23, 19, 15, 0.72), transparent);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.ig-tile:hover .ig-tile__go,
.ig-tile:focus-visible .ig-tile__go { opacity: 1; }

/* On a phone the column is no longer holding itself level with Facebook, so
   the tiles take their own square shape. A tall tile on a narrow screen would
   run past the foot of the photograph and show the bar beneath it. */
@media (min-width: 901px) {
  /* The photographs carry the band; the page card sits beside them. */
  .social__grid { grid-template-columns: 1.85fr 1fr; }
}

@media (max-width: 700px) {
  .social__frame--ig.is-posts { height: 520px; min-height: 0; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  /* Nine tiles leave a gap in the last row of a two column grid. */
  .ig-grid > :nth-child(n + 9) { display: none; }
  .ig-grid { grid-template-rows: none; grid-auto-rows: auto; height: auto; }
  .ig-tile { aspect-ratio: 1 / 1; }
}

.social__follow {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: left;
}
.social__follow svg { width: 2.4rem; height: 2.4rem; color: var(--gold-500); }
.social__follow b {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: var(--text);
}
.social__follow p {
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
}
.social__follow-go {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-400);
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.social__follow-go:hover { color: var(--gold-600); }

/* Homepage "Meet the People": the same fix as the editorial rows. The 4:5
   frame made a 722px photograph beside 459px of text; on desktop the photo now
   takes its height from the row and the text centres against it. */
@media (min-width: 901px) {
  .split { align-items: stretch; }
  /* Text columns centre against the column beside them; only the photographic
     columns below stretch. A stretched text column pinned its words to the top
     and left the rest of the row empty. */
  .split > div { align-self: center; }
  /* Beside the photograph of Chirali and Amish the words run the whole height
     of the picture: the label at its top edge, the action at its foot. */
  /* The photograph keeps its own shape, so its height follows its width. A
     narrower column brings that height close to what the words need, and the
     words carry a little more weight -- otherwise holding the two to the same
     height opened a hand's width between every paragraph. */
  .split--people { grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr); }
  .split > .people__copy {
    align-self: stretch;
    display: grid;
    align-content: space-between;
    gap: clamp(0.9rem, 1.8vw, 1.4rem);
  }
  .split > .people__copy > * { margin-top: 0; }
  .people__copy h2 { font-size: clamp(2.4rem, 4.1vw, 3.7rem); }
  .people__copy .lead { font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.8; }
  .people__copy .flow p + p { font-size: 1.04rem; line-height: 1.85; }
  .split > .frame--tall { align-self: stretch; display: flex; flex-direction: column; }
  .split > .frame--tall {
    position: relative;
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: clamp(340px, 28vw, 440px);
  }
  .split > .frame--tall img {
    position: absolute;
    inset: 0;
    /* Chirali and Amish stand near the top of this frame; a centred crop took
       their heads off. */
    object-position: 50% 0%;
  }
}

/* --------------------------------------------------------------------------
   Opening statement
   The headline used to sit in one half of a two-column row while a short
   paragraph sat in the other, which left a quarter of the band empty and made
   a seventeen-word sentence break over six narrow lines. The sentence now
   takes the full measure, and the paragraph and its action close the block
   beneath a hairline, so nothing is left hanging.
   -------------------------------------------------------------------------- */
.statement {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  /* The gap between the columns is wide; the gap under the label is not. One
     value for both left the label floating a hand's width above its headline. */
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: clamp(0.6rem, 1.2vw, 1rem);
  align-items: start;
  padding-bottom: clamp(1.5rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--border);
}
/* The label sits over both columns, so the headline and the paragraph beside
   it start on the same line. */
.statement > .eyebrow { grid-column: 1 / -1; }
.statement__title {
  margin-top: 0;
  font-size: clamp(1.7rem, 2.9vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* The action sits under the headline it belongs to, so the left column is not
   left half empty while the right carries everything. */
.statement__head {
  display: grid;
  justify-items: start;
  gap: clamp(1.4rem, 2.8vw, 2rem);
}
.statement__aside {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: clamp(1.25rem, 2.5vw, 1.8rem);
  margin-top: 0;
}
.statement__aside .lead { max-width: 46ch; }
@media (max-width: 760px) {
  .statement { grid-template-columns: 1fr; gap: 1.5rem; }
  .statement__aside { margin-top: 0; }
}

/* The content creation page shows the work itself: three reels in their own
   shape, cropped to the film rather than to Instagram's frame. */
.social__frame--reels {
  height: auto;
  min-height: 0;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  background: none;
  overflow: visible;
}
.social__frame--reels .ig-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  height: auto;
}
.social__frame--reels .ig-tile {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
}
/* A reel embeds inside a wide box with the film centred in it. A tall tile
   needs a closer crop than a square one to hold only the film. */
.social__frame--reels .ig-tile--reel iframe { width: 330%; }
.social__frame--reels .ig-tile__go { opacity: 1; }
@media (max-width: 700px) {
  .social__frame--reels .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .social__frame--reels .ig-grid > :nth-child(n + 3) { display: none; }
}

/* Chrome paints a remembered value on a pale blue field; on this dark panel
   that turned three fields into bright boxes. The fill stays dark. */
.form--onphoto .field input:-webkit-autofill,
.form--onphoto .field select:-webkit-autofill,
.form--onphoto .field textarea:-webkit-autofill,
.form--onphoto .field input:-webkit-autofill:hover,
.form--onphoto .field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1a1612 inset;
  box-shadow: 0 0 0 1000px #1a1612 inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.34);
  transition: background-color 9999s ease-out 0s;
}

/* Plate captions read at AA contrast in both themes. */
.collage__cap { color: #635a50; }
.collage__cap i { color: var(--gold-700); }
:root[data-theme="dark"] .collage__cap { color: var(--text-muted); }
:root[data-theme="dark"] .collage__cap i { color: var(--gold-300); }

/* The live feeds scroll inside their cards, both the same height. */
.social__frame--widget {
  height: 560px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--gold-300) transparent;
}
.social__frame--widget::-webkit-scrollbar { width: 4px; }
.social__frame--widget::-webkit-scrollbar-thumb { background: var(--gold-300); border-radius: 4px; }
.social__frame--widget behold-widget { display: block; }
@media (max-width: 700px) {
  .social__frame--widget { height: 520px; }
}

/* The New Client form on the photograph: chips, dates and hints in light ink. */
.form--onphoto .field__hint { color: rgba(255, 255, 255, 0.6); }
.form--onphoto .chips legend { color: rgba(255, 255, 255, 0.72); font-size: 0.62rem; letter-spacing: 0.22em; }
.form--onphoto .chips .chip span { color: #fff; border-color: rgba(255, 255, 255, 0.34); }
.form--onphoto .chips .chip:hover span { border-color: var(--gold-300); }
.form--onphoto .chips .chip input:checked + span { background: var(--gold-400); border-color: var(--gold-400); color: #17130f; }
.form--onphoto .dates__pick input[type="date"] { color-scheme: dark; }
.form--onphoto .dates__list li { color: #fff; border-color: var(--gold-300); }
.form--onphoto .dates__list button { color: rgba(255, 255, 255, 0.7); }
.form--onphoto .dates__list button:hover { color: #fff; }
.form--onphoto .field__hint a { color: #fff; }
.form--onphoto + .form__done { margin-top: 0; }
.form--onphoto .chips .chip { font-size: inherit; letter-spacing: 0.04em; }
.form--onphoto .chips .chip span { font-size: 0.78rem; padding: 0.45rem 0.8rem; }
.form--onphoto .dates__pick input[type="date"] { font-size: 0.95rem; padding-block: 0.7rem; }

/* Compact New Client form on the photograph. */
.form--onphoto.nc-compact { gap: 1rem; padding: clamp(1.4rem, 2.6vw, 2.1rem); }
.form--onphoto .multi__btn { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.34); }
.form--onphoto .multi__value.is-empty,
.form--onphoto.nc-compact .field select:invalid { color: rgba(255, 255, 255, 0.5); }
.form--onphoto .multi__panel { background: #1b1612; border-color: rgba(255, 255, 255, 0.18); }
.form--onphoto .field .multi__opt { color: #fff; font-size: 0.88rem; letter-spacing: 0.01em; }
.form--onphoto .field .multi__opt input { border-color: rgba(255, 255, 255, 0.45); }
.form--onphoto .field .multi__opt input:checked { background: var(--gold-400); border-color: var(--gold-400); box-shadow: inset 0 0 0 3px #1b1612; }
.form--onphoto .field .multi__opt input:focus-visible { outline-color: var(--gold-300); }
.form--onphoto .field input::placeholder { color: rgba(255, 255, 255, 0.5); }
/* Checkbox and radio boxes inside the dropdowns, not underlined fields. */
.form--onphoto .field .multi__opt input {
  padding: 0; width: 16px; height: 16px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 2px; background: transparent;
}
.form--onphoto .field .multi__opt input[type="radio"] { border-radius: 50%; }
.form--onphoto .field .multi__opt input:checked { background: var(--gold-400); border-color: var(--gold-400); box-shadow: inset 0 0 0 3px #1b1612; }
.form--onphoto .places__list { background: #1b1612; border-color: rgba(255, 255, 255, 0.18); }
.form--onphoto .places__list li strong { color: #fff; }
.form--onphoto .places__list li span { color: rgba(255, 255, 255, 0.55); }

/* The thank-you that replaces the form on the photograph: the same dark
   glass panel as the form, sized to its words. */
.cta-band .nc-form { align-self: center; }
.cta-band .form__done {
  align-self: start;
  gap: 1rem;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  background: rgba(14, 11, 9, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 189, 133, 0.45);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
  text-align: left;
}
.cta-band .form__done h2 { color: #fff; text-shadow: none; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.cta-band .form__done p { color: rgba(255, 255, 255, 0.78); }
.cta-band .form__done a { color: var(--gold-300); }
.cta-band .form__done .ed-action {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 0.3rem;
}
.cta-band .form__done .ed-action svg { width: 16px; height: 16px; }