/* =====================================================================
   TRIWAYS — /capabilities/on-ground-operations/  ("The Operation")
   Loaded by that page only, after triways-article.css and
   triways-visual.css. Prefix: tv-op-   (body.tv-op)
   Colours and type come from the site tokens in triways-core.css
   (--hb-ink, --hb-ivory, --hb-white, --hb-gold, --hb-champagne, --hb-serif,
   --hb-sans) and --tv-brass-text from triways-visual.css. Nothing here
   styles the header, the navigation or the footer.

     .tv-op-hero    photograph behind the title, answer panel right
     .tv-op-strip   the four kinds of work across the hero foot
     .tv-op-band    text on ivory, a photograph running off the right edge
     .tv-op-quad    2 x 2 counted register on ink
     .tv-op-line    one line, five stages
     .tv-op-cases   scenario rows: the moment | behind the scenes | what you hear
     .tv-op-ph      dark ground for a photograph that has not been supplied
   ===================================================================== */

.tv-op {
  --tv-op-header: 3.8rem;                        /* the solid bar */
  --tv-op-pad: clamp(1.25rem, 4vw, 2.5rem);      /* .hb-wrap side padding */
  --tv-op-y: clamp(3.75rem, 2.4rem + 6vw, 8rem); /* section rhythm: about 60px on a phone, 124px at 1440 */
  --tv-op-rule: rgba(166, 138, 91, 0.45);        /* --hb-gold as a hairline on ivory */
  --tv-op-rule-dark: rgba(166, 138, 91, 0.5);    /* --hb-gold as a hairline on ink */
}

.tv-op .hb-section { padding-block: var(--tv-op-y); }
.tv-op-sprite { position: absolute; }
.tv-op-icon { display: block; flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--hb-gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Brass small type on the light grounds (4.9:1 on ivory) */
.tv-op .hb-section--ivory .hb-eyebrow,
.tv-op .tv-op-cases .art-cases__label { color: var(--tv-brass-text); }
.tv-op .hb-kicker::after { background: var(--hb-gold); opacity: 1; }

/* A photograph that has not arrived yet: a quiet dark ground, so the layout can be judged */
.tv-op-ph { background: linear-gradient(140deg, #2b2824 0%, #1c1b19 55%, var(--hb-ink) 100%); }

.tv-op a:focus-visible, .tv-op summary:focus-visible, .tv-op button:focus-visible { outline: 2px solid var(--hb-gold); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   1 · HERO
   ------------------------------------------------------------------- */
.hub-hero.tv-op-hero { padding: 0; border-bottom: 0; }
.tv-op-hero__stage { position: relative; isolation: isolate; overflow: hidden; }
.tv-op-hero__media { position: absolute; inset: var(--tv-op-header) 0 0; z-index: -1; overflow: hidden; }
.tv-op-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.tv-op-hero__media::after {
  content: ""; position: absolute; inset: -1px;
  background:
    linear-gradient(90deg, rgba(21, 21, 21, 0.9) 0%, rgba(21, 21, 21, 0.72) 34%, rgba(21, 21, 21, 0.42) 62%, rgba(21, 21, 21, 0.4) 100%),
    linear-gradient(180deg, rgba(21, 21, 21, 0.5) 0%, rgba(21, 21, 21, 0) 28%, rgba(21, 21, 21, 0) 62%, rgba(21, 21, 21, 0.72) 100%);
}
.tv-op-hero__inner {
  display: flex; flex-direction: column;
  min-height: clamp(33rem, 26rem + 14vw, 42rem);
  padding-top: calc(var(--tv-op-header) + clamp(1.5rem, 1rem + 1.8vw, 2.75rem));
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.tv-op-hero .hub-crumbs { margin-bottom: clamp(1rem, 2.4vw, 2rem); }
.tv-op-hero .hub-crumbs li { min-height: 2.75rem; }
.tv-op-hero .hub-crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; border-bottom: 0; }
.tv-op-hero .hub-crumbs a:hover, .tv-op-hero .hub-crumbs a:focus-visible { text-decoration: underline; text-underline-offset: 0.35em; }
.tv-op-hero__grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(2rem, 5vw, 6rem); align-items: center;
}
.tv-op-hero .hub-hero__title { font-size: clamp(3.1rem, 1.6rem + 4.2vw, 5.75rem); line-height: 1; }
.tv-op-hero .art-title-sub { margin-top: 1.1rem; font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); }

.tv-op-hero__panel { padding: 1.7rem 1.9rem 1.9rem; border: 1px solid var(--tv-op-rule-dark); background: rgba(21, 21, 21, 0.82); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tv-op-hero__panel { background: rgba(21, 21, 21, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.tv-op-hero__panel .art-hero__label { margin-bottom: 0.9rem; font-size: 0.68rem; line-height: 1.7; }
.tv-op-hero__panel p { font-size: 0.98rem; line-height: 1.75; color: rgba(244, 240, 232, 0.92); max-width: none; }

/* The four kinds of work, on near-black under the photograph */
.tv-op-strip { background: var(--tw-obsidian); border-top: 1px solid var(--tv-op-rule-dark); }
.art-named.tv-op-strip__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; row-gap: 0;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1.5; color: var(--hb-champagne);
}
.tv-op-strip__list li { display: flex; align-items: center; gap: 1rem; padding: 1.75rem 1.5rem; border-left: 1px solid var(--tv-op-rule-dark); }
.tv-op-strip__list li:first-child { padding-left: 0; border-left: 0; }
.tv-op-strip__list li::after { content: none; }

@media (max-width: 1023.98px) {
  .tv-op { --tv-op-header: 3.375rem; }
  .tv-op-hero__media::after {
    background: linear-gradient(180deg, rgba(21, 21, 21, 0.8) 0%, rgba(21, 21, 21, 0.74) 38%, rgba(21, 21, 21, 0.86) 68%, rgba(21, 21, 21, 0.94) 100%);
  }
  .tv-op-hero__inner { min-height: 0; }
  .tv-op-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 3rem); align-items: start; }
  .tv-op-hero__panel { max-width: 36rem; }
  .art-named.tv-op-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-op-strip__list li { padding: 1.25rem 1.25rem; }
  .tv-op-strip__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .tv-op-strip__list li:nth-child(n + 3) { border-top: 1px solid var(--tv-op-rule-dark); }
}
@media (max-width: 599.98px) {
  .tv-op-hero__panel { padding: 1.35rem 1.25rem 1.5rem; }
  .art-named.tv-op-strip__list { font-size: 0.64rem; letter-spacing: 0.16em; }
  .tv-op-strip__list li { gap: 0.75rem; padding: 1.1rem 0.9rem; }
  .tv-op-strip .tv-op-icon { width: 1.5rem; height: 1.5rem; }
}

/* ---------------------------------------------------------------------
   2 + 4 · BAND — heading and copy on the page measure (75rem), the
   photograph from the last 22rem of it out to the edge of the window.
   ------------------------------------------------------------------- */
.tv-op .tv-op-band {
  display: grid; padding: 0;
  grid-template-columns: minmax(var(--tv-op-pad), 1fr) minmax(0, 53rem) minmax(0, 22rem) minmax(0, 1fr);
}
.tv-op-band__body { grid-column: 2; padding: var(--tv-op-y) clamp(2rem, 5vw, 5rem) var(--tv-op-y) 0; min-width: 0; }
.tv-op-band__media { grid-column: 3 / -1; position: relative; margin: 0; overflow: hidden; }
.tv-op-band__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tv-op-band__split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.tv-op-band__head .hb-heading { margin: 0; font-size: clamp(2rem, 1.5rem + 1.7vw, 2.9rem); text-wrap: balance; }
.tv-op-band .art-prose__lead { max-width: 24ch !important; }
.tv-op-band .art-prose p { max-width: 54ch; }
.tv-op .art-prose a, .tv-op .art-cases-note a, .tv-op .hb-faq__item p a {
  color: var(--hb-ink); border-bottom: 0; text-decoration: underline; text-decoration-color: var(--hb-gold);
  text-decoration-thickness: 1px; text-underline-offset: 0.28em;
  transition: color 0.25s var(--hb-ease), text-decoration-color 0.25s var(--hb-ease);
}
.tv-op .art-prose a:hover, .tv-op .art-cases-note a:hover, .tv-op .hb-faq__item p a:hover { color: var(--tv-brass-text); text-decoration-color: var(--hb-ink); }

/* 4 · the statement, set as a line of tracked capitals */
.tv-op .art-prose p.tv-op-statement {
  margin-bottom: 1.4rem; max-width: 40ch;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1.75; text-transform: uppercase; color: var(--hb-ink);
}

/* 4 · one line, five stages: the same team at every point on it */
.tv-op-line {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  margin: clamp(2.75rem, 5vw, 4.25rem) 0 0; padding: 0; list-style: none;
}
.tv-op-line::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--hb-gold); }
.tv-op-line li {
  position: relative; padding: 1.5rem 0.75rem 0 0;
  font-family: var(--hb-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.3; color: var(--hb-ink);
}
.tv-op-line li::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--hb-gold); }
.tv-op-line li:last-child { padding-right: 0; text-align: right; }
.tv-op-line li:last-child::before { left: auto; right: 0; }

@media (max-width: 1023.98px) {
  .tv-op .tv-op-band { grid-template-columns: var(--tv-op-pad) minmax(0, 1fr) var(--tv-op-pad); }
  .tv-op-band__body { padding-right: 0; padding-bottom: clamp(2.5rem, 6vw, 3.5rem); }
  .tv-op-band__media { grid-column: 1 / -1; height: clamp(15rem, 54vw, 27rem); }
  .tv-op-band__split { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .tv-op-band .art-prose__lead { max-width: 30ch !important; }
}
@media (max-width: 559.98px) {
  .tv-op-line { grid-template-columns: minmax(0, 1fr); }
  .tv-op-line::before { left: 4px; right: auto; top: 0.6rem; bottom: 0.7rem; width: 1px; height: auto; }
  .tv-op-line li, .tv-op-line li:last-child { padding: 0 0 1.1rem 1.75rem; text-align: left; }
  .tv-op-line li:last-child { padding-bottom: 0; }
  .tv-op-line li::before, .tv-op-line li:last-child::before { left: 0; right: auto; top: 0.45rem; }
}

/* ---------------------------------------------------------------------
   3 · BEHIND THE ITINERARY — the register as 2 x 2 on ink, the radio
   photograph held back at the right edge.
   ------------------------------------------------------------------- */
.tv-op-behind { position: relative; isolation: isolate; overflow: hidden; }
.tv-op-behind__media { position: absolute; inset: 0 0 0 auto; width: min(36%, 32rem); z-index: -1; }
.tv-op-behind__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tv-op-behind__media::after {
  content: ""; position: absolute; inset: -1px;
  background: linear-gradient(90deg, var(--hb-ink) 0%, rgba(21, 21, 21, 0.9) 48%, rgba(21, 21, 21, 0.5) 100%);
}
.tv-op-behind .hb-intro { max-width: 40rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.tv-op-behind .hb-copy { color: rgba(244, 240, 232, 0.8); }

.tv-op-quad {
  counter-reset: tv-op-kind; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tv-op-rule-dark);
}
.tv-op-quad__item {
  counter-increment: tv-op-kind; position: relative;
  display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start;
  padding: clamp(2rem, 3.2vw, 2.9rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 3.2vw, 2.9rem) 0;
}
.tv-op-quad__item:nth-child(even) { padding-left: clamp(1.5rem, 3vw, 3rem); padding-right: 0; }
.tv-op-quad__item:nth-child(even)::before {              /* the upright rule between the columns */
  content: ""; position: absolute; left: 0; top: clamp(2rem, 3.2vw, 2.9rem); bottom: clamp(2rem, 3.2vw, 2.9rem); width: 1px; background: var(--tv-op-rule-dark);
}
.tv-op-quad__item:nth-child(n + 3) { border-top: 1px solid var(--tv-op-rule-dark); }
.tv-op-quad__mark::before {
  content: counter(tv-op-kind, decimal-leading-zero); display: block; margin-bottom: 1rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; line-height: 1.4; color: var(--hb-champagne);
}
.tv-op-quad__mark .tv-op-icon { width: 2.75rem; height: 2.75rem; stroke-width: 1; }   /* 1.5px on screen at this size */
.tv-op-quad .art-register__tag { margin-bottom: 0.55rem; line-height: 1.4; }
.tv-op-quad .art-register__name { font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem); }
.tv-op-quad p { margin-top: 0.85rem; font-size: 1rem; line-height: 1.8; color: rgba(244, 240, 232, 0.84); max-width: 44ch; }

@media (min-width: 1200px) {
  .tv-op-quad { margin-right: clamp(3rem, 8vw, 8rem); }
}
@media (max-width: 1023.98px) {
  .tv-op-behind__media { display: none; }
}
@media (max-width: 859.98px) {
  .tv-op-quad { grid-template-columns: minmax(0, 1fr); }
  .tv-op-quad__item, .tv-op-quad__item:nth-child(even) { padding-left: 0; padding-right: 0; }
  .tv-op-quad__item:nth-child(even)::before { content: none; }
  .tv-op-quad__item:nth-child(n + 2) { border-top: 1px solid var(--tv-op-rule-dark); }
  .tv-op-quad p { max-width: 58ch; }
}
@media (max-width: 479.98px) {
  .tv-op-quad__item { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; }
  .tv-op-quad__mark .tv-op-icon { width: 2.25rem; height: 2.25rem; stroke-width: 1.2; }
}

/* ---------------------------------------------------------------------
   4b · SCENARIOS — the moment, then two ruled columns
   ------------------------------------------------------------------- */
.tv-op-cases { background: var(--hb-white); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--tv-op-y); }
.tv-op-cases .art-cases { border-top: 1px solid var(--tv-op-rule); }
.tv-op-cases .art-cases__row {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem clamp(2rem, 4vw, 4rem); align-items: start;
  padding: clamp(2rem, 3.4vw, 3rem) 0; border-bottom-color: var(--tv-op-rule);
}
.tv-op-cases .art-cases__moment { max-width: 15ch; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.45rem); line-height: 1.14; }
.tv-op-cases .art-cases__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); }
.tv-op-cases .art-cases__body p { margin: 0; padding-left: clamp(1.1rem, 2vw, 1.75rem); border-left: 1px solid var(--hb-gold); font-size: 1rem; line-height: 1.75; }
.tv-op-cases .art-cases__label { margin-bottom: 0.6rem; }
.tv-op-cases .art-cases-note { margin-top: 1.75rem; font-size: 0.9rem; }

@media (max-width: 1023.98px) {
  .tv-op-cases .art-cases__row { grid-template-columns: minmax(0, 1fr); }
  .tv-op-cases .art-cases__moment { max-width: 22ch; }
}
@media (max-width: 599.98px) {
  .tv-op-cases .art-cases__body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   5 · QUESTIONS — native <details>; plus becomes minus, the answer fades in
   ------------------------------------------------------------------- */
.tv-op-faq .hb-faq { border-top-color: var(--tv-op-rule); }
.tv-op-faq .hb-faq__item { padding: 0; border-bottom-color: var(--tv-op-rule); }
.tv-op-faq .hb-faq__item > summary { min-height: 2.75rem; padding: 1.35rem 0; transition: color 0.25s var(--hb-ease); }
.tv-op-faq .hb-faq__item > summary::after { color: var(--tv-brass-text); transition: none; }
.tv-op-faq .hb-faq__item[open] > summary::after { content: "\2212"; transform: none; }
.tv-op-faq .hb-faq__item > p { margin: 0; padding: 0 2.5rem 1.6rem 0; font-size: 1rem; line-height: 1.75; color: var(--hb-text); max-width: 64ch; }
.tv-op-faq .hb-faq__item[open] > p { animation: tv-op-fade 0.28s var(--hb-ease) both; }
@keyframes tv-op-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   6 · BRIEF — underline fields on ink, champagne button
   ------------------------------------------------------------------- */
.tv-op-brief .art-enquiry__head .hb-heading { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.2rem); text-wrap: balance; }
.tv-op-brief .hb-copy { color: rgba(244, 240, 232, 0.8); }
.tv-op-brief .art-form { gap: 1.9rem clamp(1.5rem, 3vw, 2.5rem); }
.tv-op-brief .art-form label i { color: rgba(244, 240, 232, 0.66); }
.tv-op-brief .art-form input, .tv-op-brief .art-form select, .tv-op-brief .art-form textarea { border-bottom-color: rgba(244, 240, 232, 0.36); }
.tv-op-brief .art-form input::placeholder, .tv-op-brief .art-form textarea::placeholder { color: rgba(244, 240, 232, 0.58); }
.tv-op-brief .art-form__submit { margin-top: 0.75rem; }
.tv-op-brief .art-form__submit .hb-cta { min-height: 3rem; border-radius: 0; }
.tv-op-brief .art-enquiry__head .hb-link, .tv-op-brief .hub-close__direct { display: inline-flex; align-items: center; justify-content: flex-start; align-self: flex-start; min-height: 2.75rem; }
.tv-op-brief .art-enquiry__direct { margin-top: 0.75rem; }
.tv-op-brief .art-enquiry__aside a { display: inline-block; padding: 0.6rem 0; }

@media (prefers-reduced-motion: reduce) {
  .tv-op-faq .hb-faq__item[open] > p { animation: none !important; }
  .tv-op-faq .hb-faq__item > summary, .tv-op .art-prose a, .tv-op .art-cases-note a, .tv-op .hb-faq__item p a { transition: none !important; }
}

/* 1024 to 1199: the band's text column is too narrow for heading beside copy, so the heading sits above it */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .tv-op-band__split { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .tv-op-band .art-prose__lead { max-width: 30ch !important; }
}

/* The shared mobile CTA bar reserves space under <main>; the last section here is ink, so that space is ink too */
body.tv-op main { background-color: var(--hb-ink); }

/* Where each photograph holds its subject inside the crop */
.tv-op-hero__media img { object-position: 46% 45%; }
.tv-op-band__media--execution img { object-position: 60% 50%; }
.tv-op-band__media--accountable img { object-position: 76% 50%; }
.tv-op-behind__media img { object-position: 84% 50%; }
@media (max-width: 1023.98px) {
  .tv-op-band__media--execution img { object-position: 60% 38%; }
  .tv-op-band__media--accountable img { object-position: 70% 32%; }
}