/* =====================================================================
   TRIWAYS — /capabilities/meet-assist/
   Loaded by that page only, after triways-article.css and
   triways-visual.css. Prefix: tv-ma-   (body.tv-ma)
   Colours and type come from the site tokens in triways-core.css
   (--hb-ink, --hb-ivory, --hb-white, --hb-gold, --hb-champagne).

   Patterns another inside page can take as they are (add the page's own
   body class next to them, or lift the block into a shared file):
     .tv-ma-hero    full-bleed photograph behind the title, answer panel right
     .tv-ma-wide    21:9 photograph across the measure, centred caption
     .tv-ma-steps   numbered markers on one line (add to <ol class="hub-steps">)
     .tv-ma-why     hairline rows for .art-cases
     .tv-ma-faq     plus / minus accordion on native <details> (with .tv-faq)
   ===================================================================== */

.tv-ma {
  --tv-ma-header: 3.8rem;                       /* the solid bar: 61px desktop, 54px mobile */
  --tv-ma-rule: rgba(166, 138, 91, 0.42);       /* --hb-gold as a hairline on ivory */
  --tv-ma-rule-dark: rgba(200, 183, 156, 0.5);  /* --hb-champagne as a hairline on ink */
  --tv-ma-marker: 2.75rem;
}

/* Brass small type on the light grounds (4.9:1 on ivory) */
.tv-ma .hb-section--ivory .hb-eyebrow,
.tv-ma .hb-section--white .hb-eyebrow { color: var(--tv-brass-text); }

/* ---------------------------------------------------------------------
   1 · HERO — the arrivals hall behind the title; the direct answer sits
   in a narrow column at the right under a brass hairline.
   ------------------------------------------------------------------- */
.tv-ma-hero { position: relative; isolation: isolate; overflow: hidden; padding: 0; }
.tv-ma-hero__media { position: absolute; inset: var(--tv-ma-header) 0 0; z-index: -1; overflow: hidden; background: var(--hb-ink); }
/* The photograph is 3:2: at 84% of the width it keeps both signs in a 620px band and puts the representative right of centre. */
.tv-ma-hero__media img { display: block; width: 84%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.tv-ma-hero__media::after {
  content: ""; position: absolute; inset: -1px;
  background:
    linear-gradient(90deg, rgba(21, 21, 21, 0.95) 0%, rgba(21, 21, 21, 0.88) 20%, rgba(21, 21, 21, 0.5) 33%, rgba(21, 21, 21, 0.06) 42%, rgba(21, 21, 21, 0.06) 54%, rgba(21, 21, 21, 0.88) 64%, var(--hb-ink) 83%),
    linear-gradient(180deg, rgba(21, 21, 21, 0.35) 0%, rgba(21, 21, 21, 0) 22%, rgba(21, 21, 21, 0) 70%, rgba(21, 21, 21, 0.5) 100%);
}
.tv-ma-hero__inner {
  display: flex; flex-direction: column;
  min-height: clamp(36rem, 26rem + 18vw, 48rem);
  padding-top: calc(var(--tv-ma-header) + clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem));
  padding-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);
}
.tv-ma-hero .hub-crumbs { margin-bottom: clamp(0.75rem, 2vw, 1.75rem); }
.tv-ma-hero .hub-crumbs li { min-height: 2.75rem; }
.tv-ma-hero .hub-crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; border-bottom: 0; }
.tv-ma-hero .hub-crumbs a:hover, .tv-ma-hero .hub-crumbs a:focus-visible { text-decoration: underline; text-underline-offset: 0.35em; }
.tv-ma-hero__grid {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20.5rem);
  gap: clamp(2rem, 5vw, 6rem); align-items: center;
}
.tv-ma-hero .hub-hero__title { font-size: clamp(2.6rem, 1.8rem + 2.7vw, 4.1rem); max-width: 15ch; }
.tv-ma-hero .art-title-sub { margin-top: 1.1rem; }
.tv-ma-hero__panel { padding-top: 1.35rem; border-top: 1px solid var(--hb-gold); }
.tv-ma-hero__panel p { font-size: 0.95rem; line-height: 1.75; color: rgba(244, 240, 232, 0.88); max-width: none; }
.tv-ma-hero__panel .art-named { margin-top: 1.4rem; font-size: 0.68rem; letter-spacing: 0.18em; }

@media (max-width: 1023.98px) {
  /* the photograph stays behind the words, under a heavier wash */
  .tv-ma { --tv-ma-header: 3.375rem; }
  .tv-ma-hero__media img { width: 100%; object-position: 60% 50%; }
  .tv-ma-hero__media::after {
    background: linear-gradient(180deg, rgba(21, 21, 21, 0.7) 0%, rgba(21, 21, 21, 0.78) 38%, rgba(21, 21, 21, 0.92) 68%, rgba(21, 21, 21, 0.96) 100%);
  }
  .tv-ma-hero__inner { min-height: 0; }
  .tv-ma-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 3rem); align-items: start; }
  .tv-ma-hero .hub-hero__title { max-width: 14ch; }
  .tv-ma-hero__panel { max-width: 34rem; }
}

/* ---------------------------------------------------------------------
   2 · THE FIRST PROOF POINT — heading left, the sentence and the reasoning
   right, then the photograph across the full measure.
   ------------------------------------------------------------------- */
.tv-ma-first .art-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.tv-ma-first .art-split__head { position: static; }
.tv-ma-first .art-split__head .hb-heading--h2 { max-width: 11ch; }
.tv-ma-first__body .art-prose__lead { font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.15rem) !important; line-height: 1.24 !important; max-width: 24ch !important; }
.tv-ma-first__body p:not(.art-prose__lead) { font-size: 1rem; line-height: 1.8; color: var(--hb-text); max-width: 60ch; }

.tv-ma-wide { margin: clamp(3rem, 6vw, 5rem) 0 0; }
.tv-ma-wide picture { display: block; }
.tv-ma-wide img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 10; object-fit: cover; object-position: 50% 10%; background: var(--hb-ink-soft); }
.tv-ma-wide figcaption {
  margin-top: 1.1rem; text-align: center;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.6; color: var(--hb-text-dim);
}
@media (max-width: 1023.98px) {
  .tv-ma-first .art-split { grid-template-columns: minmax(0, 1fr); }
  .tv-ma-first .art-split__head .hb-heading--h2 { max-width: 16ch; }
}
@media (max-width: 599.98px) {
  .tv-ma-wide img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
}

/* ---------------------------------------------------------------------
   3 · WHAT MEET & ASSIST INCLUDES — five steps in order, counted on one
   brass line. The numbers are CSS counters; the list is an <ol>.
   ------------------------------------------------------------------- */
.tv-ma-includes .hb-intro { max-width: 36rem; }
.hub-steps.tv-ma-steps {
  counter-reset: tv-ma-step;
  --tv-ma-gap: clamp(1.25rem, 2.6vw, 2.75rem);
  margin: 0; padding: 0; list-style: none; gap: 0 var(--tv-ma-gap); align-items: start;
}
.tv-ma-steps .hub-step { position: relative; counter-increment: tv-ma-step; padding: calc(var(--tv-ma-marker) + 1.6rem) 0 0; border: 0; }
.tv-ma-steps .hub-step::before {
  content: counter(tv-ma-step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center; width: var(--tv-ma-marker); height: var(--tv-ma-marker);
  border: 1px solid var(--hb-gold); border-radius: 50%; background: var(--hb-ink);
  font-family: var(--hb-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1; color: var(--hb-champagne);
}
.tv-ma-steps .hub-step::after {
  content: ""; position: absolute; top: calc(var(--tv-ma-marker) / 2); left: var(--tv-ma-marker); right: calc(-1 * var(--tv-ma-gap));
  height: 1px; background: var(--hb-gold);
}
.tv-ma-steps .hub-step:last-child::after { right: 0; }
.tv-ma-steps .hub-step__ord { margin-bottom: 0.7rem; font-size: 0.68rem; color: var(--hb-champagne); }
.tv-ma-steps .hub-step__name { margin-bottom: 0.75rem; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.65rem); color: var(--hb-white); text-wrap: balance; }
.tv-ma-steps .hub-step p { font-size: 0.95rem; line-height: 1.7; color: rgba(244, 240, 232, 0.8); }
.tv-ma-steps .hub-step a { color: var(--hb-champagne); border-bottom: 1px solid rgba(200, 183, 156, 0.45); transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease); }
.tv-ma-steps .hub-step a:hover, .tv-ma-steps .hub-step a:focus-visible { color: #fff; border-color: #fff; }

@media (max-width: 1023.98px) {
  /* a vertical list: the line runs down through the markers */
  .hub-steps.tv-ma-steps { border-left: 0; margin-left: 0; gap: 0; }
  .tv-ma-steps .hub-step { padding: 0.55rem 0 2.5rem calc(var(--tv-ma-marker) + 1.4rem); }
  .tv-ma-steps .hub-step:last-child { padding-bottom: 0; }
  .tv-ma-steps .hub-step::before { left: 0; top: 0; width: var(--tv-ma-marker); height: var(--tv-ma-marker); background: var(--hb-ink); }
  .tv-ma-steps .hub-step::after { top: var(--tv-ma-marker); bottom: 0; left: calc(var(--tv-ma-marker) / 2); right: auto; width: 1px; height: auto; }
  .tv-ma-steps .hub-step:last-child::after { content: none; }
  .tv-ma-steps .hub-step p { font-size: 1rem; max-width: 34rem; }
}

/* ---------------------------------------------------------------------
   4 · WHY THE FIRST MOMENT MATTERS — four rows under hairlines: the
   moment at the left, the two labelled lines at the right.
   ------------------------------------------------------------------- */
.tv-ma-why .hb-intro { max-width: 36rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.tv-ma-why .art-cases { border-top: 1px solid var(--tv-ma-rule); }
.tv-ma-why .art-cases__row {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start;
  padding: clamp(1.9rem, 3.4vw, 2.9rem) 0; border-bottom: 1px solid var(--tv-ma-rule);
}
.tv-ma-why .art-cases__moment { max-width: 13ch; font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.75rem); line-height: 1.14; overflow-wrap: break-word; }
.tv-ma-why .art-cases__body { min-width: 0; padding-top: 0.45rem; }
.tv-ma-why .art-cases__label { margin-bottom: 0.4rem; color: var(--tv-brass-text); }
.tv-ma-why .art-cases__body p { font-size: 1rem; line-height: 1.75; color: var(--hb-text); max-width: 54ch; }
.tv-ma-why .art-cases__body p + p { margin-top: 1.15rem; }
.tv-ma-why .art-cases-note { margin-top: 1.75rem; font-size: 0.9rem; }
@media (max-width: 767.98px) {
  .tv-ma-why .art-cases__row { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .tv-ma-why .art-cases__moment { max-width: 18ch; }
  .tv-ma-why .art-cases__body { padding-top: 0; }
}

/* ---------------------------------------------------------------------
   5 · QUESTIONS — native <details>; the plus becomes a minus, the answer
   fades in. The whole question row is the 44px+ target.
   ------------------------------------------------------------------- */
.tv-ma-faq .hb-faq { border-top-color: var(--tv-ma-rule); }
.tv-ma-faq .hb-faq__item { padding: 0; border-bottom-color: var(--tv-ma-rule); }
.tv-ma-faq .hb-faq__item > summary { min-height: 2.75rem; padding: 1.35rem 0; transition: color 0.25s var(--hb-ease); }
.tv-ma-faq .hb-faq__item > summary::after { color: var(--tv-brass-text); transition: none; }
.tv-ma-faq .hb-faq__item[open] > summary::after { content: "\2212"; transform: none; }
.tv-ma-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-ma-faq .hb-faq__item[open] > p { animation: tv-ma-fade 0.28s var(--hb-ease) both; }
@keyframes tv-ma-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   6 · BRIEF — underline fields on ink, champagne button
   ------------------------------------------------------------------- */
.tv-ma-brief .art-form { gap: 1.9rem clamp(1.5rem, 3vw, 2.5rem); }
.tv-ma-brief .art-form label { font-size: 0.68rem; }
.tv-ma-brief .art-form input, .tv-ma-brief .art-form select, .tv-ma-brief .art-form textarea { border-bottom-color: rgba(244, 240, 232, 0.34); }
.tv-ma-brief .art-form input:focus-visible, .tv-ma-brief .art-form select:focus-visible, .tv-ma-brief .art-form textarea:focus-visible { outline-color: var(--hb-champagne); }
.tv-ma-brief .art-form__submit { margin-top: 0.75rem; }
.tv-ma-brief .art-form__submit .hb-cta { min-height: 3rem; transition: background-color 0.25s var(--hb-ease), color 0.25s var(--hb-ease); }
.tv-ma-brief .art-enquiry__head .hb-link, .tv-ma-brief .hub-close__direct { display: inline-flex; align-items: center; justify-content: flex-start; align-self: flex-start; min-height: 2.75rem; }
.tv-ma-brief .art-enquiry__direct { margin-top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .tv-ma-faq .hb-faq__item[open] > p { animation: none !important; }
  .tv-ma-faq .hb-faq__item > summary, .tv-ma-brief .art-form__submit .hb-cta, .tv-ma-steps .hub-step a { transition: none !important; }
}