/* ---------- Foley — sound for film & advertising (WEBSITE) -----------------
   THE STRUCTURAL MOVE: the page is a BRACKET. Exactly two things bleed — the
   full-viewport studio-black stage at the top and the gapless six-up black wall
   at the bottom — and every one of the six sections between them is locked to a
   single measure, because `.ws-narrow` is pulled up to the same max-width as
   `.ws-container`. After the first screen the eye never re-measures the page.
   The zebra tint is switched off so the bone ground runs unbroken, the largest
   whitespace is stacked ABOVE each rung rather than inside it (padding-top
   only), and amber is spent in three places and no others: the hero CTA rule,
   the six feature icons, and whichever form field has focus. Every selector is
   a class — the hero is the first `section`, so :first-of-type / :nth-of-type
   would silently match it instead of the block intended. */
body.t-foley.ws-body {
  --bg: #f4f1ea; --fg: #4a4740; --heading: #14130f; --text: #4a4740; --muted: #86827a;
  --fo-line: #ddd7ca; --fo-black: #0d0d0d; --fo-amber: #c8761f;
  --hero-a: rgba(13, 13, 13, .40); --hero-b: rgba(13, 13, 13, .78);
}
body.t-foley { background: var(--bg); }

/* fixed and black, so the stage runs under it and the menu floats in the photograph */
body.t-foley .ws-nav { position: fixed; top: 0; left: 0; right: 0; border-bottom: 0;
  background: color-mix(in srgb, var(--fo-black) 60%, transparent); backdrop-filter: saturate(1.2) blur(8px); }
body.t-foley .ws-nav-inner { height: 74px; color: #f4f1ea; }
body.t-foley .ws-brand { text-transform: uppercase; letter-spacing: .34em; font-weight: 700; font-size: 13px; }
body.t-foley .ws-nav-links a { text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 700; opacity: .78; }

/* BLEED ONE — the whole first screen, three frames cross-fading under centred copy */
body.t-foley .ws-hero { min-height: 100vh; background-color: var(--fo-black); }
body.t-foley .ws-hero h1 { font-size: clamp(36px, 6.6vw, 76px); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
body.t-foley .ws-hero p { font-size: 15.5px; line-height: 1.8; max-width: 46ch; margin: 20px auto 40px; opacity: .9; }
body.t-foley.ws-body .ws-hero-cta.btn.brand { background: transparent; color: #f4f1ea; box-shadow: none; border-radius: 0;
  padding: 4px 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .26em;
  text-decoration: underline; text-decoration-color: var(--fo-amber); text-decoration-thickness: 2px; text-underline-offset: 11px; }

/* THE LOCK — one measure for six straight sections; narrow blocks widen to match */
body.t-foley .ws-container { max-width: 980px; padding: 0 28px; }
body.t-foley .ws-section { padding: 112px 0 0; }
body.t-foley .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-foley .ws-h2, body.t-foley .ws-story-copy h2 { text-align: left; text-transform: uppercase;
  letter-spacing: .26em; font-size: 11.5px; font-weight: 700; color: var(--heading); margin: 0 0 30px; }
body.t-foley .ws-feature h3, body.t-foley .ws-col-h { text-transform: uppercase; letter-spacing: .2em;
  font-size: 10.5px; font-weight: 700; color: var(--heading); margin: 0 0 12px; }
body.t-foley.ws-body .btn.brand { background: var(--heading); color: var(--bg); border-radius: 0; box-shadow: none;
  text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 700; padding: 16px 34px; }

/* split twice and mirrored — the plate changes side, the column edge does not */
body.t-foley .ws-story-media img { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
body.t-foley .ws-story-copy p, body.t-foley .ws-richtext p { font-size: 16.5px; line-height: 1.95; color: var(--text); margin: 0 0 20px; max-width: 64ch; }

/* six icons, two rows of three — the only amber between the two dark rooms */
body.t-foley .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
body.t-foley .ws-feature { text-align: left; padding: 0; }
body.t-foley .ws-feature-icon { color: var(--fo-amber); margin: 0 0 18px; }
body.t-foley .ws-feature p, body.t-foley .ws-col p { font-size: 14px; line-height: 1.8; color: var(--text); margin: 0; }

/* the client row — four across on a hairline, text only, no picture anywhere near it */
body.t-foley .ws-col { border-top: 1px solid var(--heading); padding: 15px 0 0; }

/* buried second-to-last, with far more air around it than its word count earns */
body.t-foley .ws-quoteblock { padding: 168px 0 152px; text-align: left; }
body.t-foley .ws-quote-t { font-size: clamp(19px, 2.3vw, 25px); font-weight: 400; font-style: normal;
  line-height: 1.65; color: var(--heading); max-width: 42ch; margin: 0 0 24px; }
body.t-foley .ws-quote-a { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted); }

/* BLEED TWO — the closing wall, six frames butted flush on studio black */
body.t-foley .ws-photogrid { padding: 0; background: var(--fo-black); }
body.t-foley .ws-photogrid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }

/* the form has no band of its own — it lands on bone straight off the black */
body.t-foley .ws-contact { padding: 82px 0 104px; }
body.t-foley .ws-contact .ws-form { margin: 0; max-width: 560px; gap: 22px; }
body.t-foley .ws-contact .ws-form > .btn.brand { align-self: flex-start; margin-top: 10px; }
body.t-foley .ws-field label { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted); }
body.t-foley .ws-field input, body.t-foley .ws-field textarea { background: transparent; border: 0;
  border-bottom: 1px solid var(--fo-line); border-radius: 0; color: var(--heading); padding: 12px 2px; }
body.t-foley .ws-field input:focus, body.t-foley .ws-field textarea:focus { outline: 0; border-bottom-color: var(--fo-amber); }
body.t-foley .ws-footer { border-top: 1px solid var(--fo-line); padding: 34px 0 42px; }

@media (max-width: 900px) {
  body.t-foley .ws-features-grid, body.t-foley .ws-cols-4, body.t-foley .ws-photogrid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-foley .ws-hero { min-height: 88vh; }
  body.t-foley .ws-section { padding-top: 76px; }
  body.t-foley .ws-quoteblock { padding: 100px 0 92px; }
  body.t-foley .ws-nav-links a { opacity: 1; }
}

/* foley by night — the bone goes to graphite and the two bleeds drop to true
   black, a shade under the ground, so the bracket still reads black-paper-black
   and the amber never moves off its three places */
html[data-theme="dark"] body.t-foley.ws-body {
  --bg: #161513; --fg: #a09b91; --heading: #f2efe7; --text: #a09b91; --muted: #7c776e;
  --fo-line: #2b2823; --fo-black: #000000;
  --hero-a: rgba(0, 0, 0, .44); --hero-b: rgba(0, 0, 0, .80);
}
html[data-theme="dark"] body.t-foley { background: var(--bg); }
html[data-theme="dark"] body.t-foley .ws-nav { background: color-mix(in srgb, #000000 66%, transparent); }