/* ==========================================================================
   T3 Services Group — interior pages
   Loaded AFTER index-c.css. Everything here is either a component the home
   page doesn't have (article body, team grid, roles list, lightbox) or a
   sub-page variant of one it does. Tokens, buttons, type scale, header and
   footer all come from index-c.css — nothing is redefined.
   ========================================================================== */

/* --- Active page in the bar --------------------------------------------- */
.nav__links a[aria-current="page"] { color: var(--white); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__panel a[aria-current="page"] { color: var(--orange); }

/* --- Page hero ----------------------------------------------------------- */
/* Same dark field as the home hero, sized for a page that leads with words. */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(2.75rem, 4.5vw, 4.25rem);
  background-color: var(--ink); color: var(--white);
  background-image:
    radial-gradient(58% 62% at 92% -14%, rgba(255,87,34,.20), rgba(255,87,34,0) 62%),
    radial-gradient(66% 60% at 2% 106%, rgba(26,58,99,.46), rgba(26,58,99,0) 64%),
    linear-gradient(180deg, #17171A 0%, #1A1A1D 46%, #121215 100%);
}
.page-hero::before {
  -webkit-mask-image: radial-gradient(ellipse 84% 118% at 88% -12%, #000 8%, transparent 74%);
          mask-image: radial-gradient(ellipse 84% 118% at 88% -12%, #000 8%, transparent 74%);
  opacity: .075;
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 20ch; text-wrap: balance; margin-bottom: var(--s-2); }
.page-hero .lead { color: var(--on-dark-muted); max-width: 62ch; }
.page-hero .accent-rule { margin-bottom: var(--s-2); }
.page-hero__grid { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: end; }
@media (min-width: 940px) { .page-hero__grid { grid-template-columns: 1.35fr 1fr; } }

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs { font-size: var(--fs-caption); margin-bottom: var(--s-2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crumbs li { display: flex; align-items: center; gap: .5rem; color: var(--on-dark-muted); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.3); }
.crumbs a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current="page"] { color: var(--white); }

/* --- Section rhythm on interior pages ------------------------------------ */
.section--narrow > .wrap { max-width: 900px; }
.stack > * + * { margin-top: var(--s-2); }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem; border-radius: var(--radius-pill);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em;
  background: var(--tint); color: var(--orange-deep);
}
.pill--quiet { background: var(--tint-navy); color: var(--slate); letter-spacing: 0; }

/* --- Purpose / vision / mission, values ---------------------------------- */
.trio { display: grid; gap: var(--s-1); grid-template-columns: 1fr; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3,1fr); } }
.trio .card { display: flex; flex-direction: column; height: 100%; }
.trio .card h3 {
  font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: .75rem;
}
.trio .card p { font-size: var(--fs-lead); color: var(--navy); line-height: 1.5; }

.values { display: grid; gap: var(--s-1); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .values { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .values { grid-template-columns: repeat(3,1fr); } }
.value {
  padding: clamp(1.5rem,2.2vw,1.875rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
}
.value__letter {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: var(--s-1);
  border-radius: var(--radius); background: var(--tint);
  color: var(--orange-deep); font-family: var(--font-display); font-weight: 600;
}
.value h3 { margin-bottom: .375rem; }
.value p { color: var(--slate); font-size: 1rem; }

/* --- Anchored function blocks (What We Do detail) ------------------------ */
.fn { scroll-margin-top: 110px; padding-block: clamp(2rem,3.5vw,3rem); border-top: 1px solid var(--line); }
.fn:first-child { border-top: 0; padding-top: 0; }
.fn__grid { display: grid; gap: clamp(1.5rem,3vw,3rem); }
@media (min-width: 860px) { .fn__grid { grid-template-columns: 20rem 1fr; } }
.fn__n {
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  color: var(--orange-deep); font-variant-numeric: tabular-nums; margin-bottom: .5rem;
}
.fn h2 { font-size: clamp(1.375rem,2vw,1.75rem); }
.fn p { color: var(--slate); }
.fn p + p { margin-top: var(--s-1); }

/* --- Brand cards --------------------------------------------------------- */
.brands { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .brands { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1160px) { .brands { grid-template-columns: repeat(3,1fr); } }
.brand {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.brand:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.brand__logo {
  display: grid; place-items: center; padding: var(--s-2);
  min-height: 132px; background: var(--neutral); border-bottom: 1px solid var(--line-soft);
}
.brand__logo img { max-height: 76px; width: auto; object-fit: contain; }
.brand__body { padding: clamp(1.25rem,2vw,1.75rem); display: flex; flex-direction: column; flex: 1; }
.brand__year {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-deep); margin-bottom: .5rem;
}
.brand h3 { margin-bottom: .25rem; font-size: 1.1875rem; }
.brand__where { font-size: .9375rem; color: var(--slate); margin-bottom: .75rem; }
.brand p { color: var(--slate); font-size: 1rem; margin-bottom: 1rem; }
.brand .pill-row { margin-bottom: 1.125rem; }
.brand__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --- Team ---------------------------------------------------------------- */
.team { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .team { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1020px) { .team { grid-template-columns: repeat(3,1fr); } }
.person {
  padding: clamp(1.5rem,2.2vw,1.875rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
  height: 100%;
}
/* Monogram stands in until real headshots land — a grey silhouette would read
   as a missing image, an initial reads as a deliberate placeholder. */
.person__avatar {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-1);
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, #23242A 0%, #16161A 100%);
  color: var(--orange); font-family: var(--font-display); font-weight: 600;
  font-size: 1.25rem; letter-spacing: -.02em;
}
.person h3 { margin-bottom: .125rem; }
.person__role {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange-deep); margin-bottom: .75rem;
}
.person p { color: var(--slate); font-size: 1rem; }

/* --- News: archive ------------------------------------------------------- */
.post-lead {
  display: grid; gap: clamp(1.5rem,3vw,3rem); align-items: center;
  padding: clamp(1.25rem,2vw,1.75rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
}
@media (min-width: 900px) { .post-lead { grid-template-columns: 1.15fr 1fr; } }
.post-lead img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); }
.post-lead h2 { font-size: clamp(1.5rem,2.6vw,2.125rem); margin-block: .5rem .75rem; }
.post-lead p { color: var(--slate); margin-bottom: var(--s-1); }

.posts { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .posts { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .posts { grid-template-columns: repeat(3,1fr); } }
.post {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.post:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.post__media { position: relative; display: block; }
.post__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post__body { padding: clamp(1.25rem,2vw,1.625rem); display: flex; flex-direction: column; flex: 1; }
.post h3 { font-size: 1.1875rem; margin-block: .625rem .5rem; }
.post h3 a { transition: color var(--dur) var(--ease); }
.post:hover h3 a { color: var(--orange-deep); }
.post p { color: var(--slate); font-size: 1rem; margin-bottom: 1rem; }
.post .post-meta { margin-top: auto; }

.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--fs-caption); color: var(--slate);
}
.post-meta > * + *::before { content: "·"; margin-right: .5rem; color: var(--line); }
.on-dark .post-meta, .page-hero .post-meta { color: var(--on-dark-muted); }

/* Category filter row — static links now, a WP term archive later */
.termbar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-bottom: var(--s-2); margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.termbar a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); font-size: .9375rem; font-weight: 500; color: var(--slate);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.termbar a:hover { border-color: var(--navy); color: var(--navy); }
.termbar a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* Pagination */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem;
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.pager a, .pager span {
  display: inline-grid; place-items: center; min-width: 46px; min-height: 46px;
  padding: 0 .75rem; border-radius: var(--radius);
  border: 1px solid var(--line); font-weight: 600; font-size: .9375rem; color: var(--slate);
}
.pager a:hover { border-color: var(--navy); color: var(--navy); }
.pager [aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pager .is-disabled { opacity: .4; }

/* --- News: single post --------------------------------------------------- */
.article { display: grid; gap: clamp(2rem,4vw,3.5rem); }
@media (min-width: 1060px) { .article { grid-template-columns: minmax(0,1fr) 17rem; } }
.article__figure { margin: 0 0 var(--s-3); }
.article__figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); }
.article__figure figcaption {
  margin-top: .75rem; font-size: var(--fs-caption); color: var(--slate);
}

/* Article body. Measure is capped here, not on the grid, so pull quotes and
   figures can still break out to the full column. */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-2); }
.prose p { color: var(--slate); font-size: var(--fs-lead); line-height: 1.7; }
.prose h2 { font-size: clamp(1.375rem,2.2vw,1.75rem); margin-top: var(--s-3); }
.prose h3 { margin-top: var(--s-2); }
.prose h2 + p, .prose h3 + p { margin-top: var(--s-1); }
.prose ul, .prose ol { display: grid; gap: .75rem; padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { color: var(--slate); font-size: var(--fs-lead); line-height: 1.6; padding-left: .25rem; }
.prose li::marker { color: var(--orange); }
.prose a:not(.btn) {
  color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.prose blockquote {
  margin: var(--s-3) 0; padding: var(--s-2) 0 var(--s-2) var(--s-2);
  border-left: 3px solid var(--orange);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.1875rem,1.9vw,1.5rem); line-height: 1.45;
  letter-spacing: -.015em; color: var(--navy);
}
.prose blockquote cite {
  display: block; margin-top: .75rem; font-family: var(--font);
  font-size: .9375rem; font-style: normal; font-weight: 600; color: var(--slate);
}
.prose figure { margin: var(--s-3) 0; }
.prose figure img { width: 100%; border-radius: var(--radius); }
.prose figcaption { margin-top: .625rem; font-size: var(--fs-caption); color: var(--slate); }

/* Sidebar */
.aside { display: grid; gap: var(--s-2); align-content: start; }
@media (min-width: 1060px) { .aside { position: sticky; top: 108px; } }
.aside__box { padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.aside__box h2 {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); margin-bottom: var(--s-1);
}
.toc { display: grid; gap: .25rem; }
.toc a {
  display: block; padding: .5rem .75rem; border-radius: var(--radius);
  font-size: .9375rem; font-weight: 500; color: var(--slate); border-left: 2px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.toc a:hover { color: var(--navy); background: var(--neutral); border-left-color: var(--orange); }

.share { display: flex; flex-wrap: wrap; gap: .5rem; }
.share a {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--slate);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.share a:hover { border-color: var(--navy); color: var(--navy); }
.share svg { width: 18px; height: 18px; }

/* Author box + tags */
.authorbox {
  display: flex; gap: var(--s-2); align-items: flex-start; flex-wrap: wrap;
  margin-top: var(--s-4); padding: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--neutral);
}
.authorbox .person__avatar { margin-bottom: 0; flex: none; }
.authorbox h2 { font-size: 1.0625rem; font-family: var(--font-display); margin-bottom: .125rem; }
.authorbox p { color: var(--slate); font-size: 1rem; max-width: 56ch; }
.taglist { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-3); }
.taglist a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .375rem .875rem; border-radius: var(--radius-pill);
  background: var(--tint-navy); color: var(--slate); font-size: var(--fs-caption); font-weight: 600;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.taglist a:hover { background: var(--navy); color: var(--white); }

/* Prev / next */
.postnav { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
@media (min-width: 760px) { .postnav { grid-template-columns: repeat(2,1fr); } }
.postnav a {
  display: block; padding: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.postnav a:hover { border-color: var(--navy); background: var(--neutral); }
.postnav span {
  display: block; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-deep); margin-bottom: .375rem;
}
.postnav b { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.postnav .is-next { text-align: right; }

/* --- Careers ------------------------------------------------------------- */
.roles { display: grid; gap: .75rem; }
.role {
  display: grid; gap: .75rem; align-items: center;
  padding: clamp(1.25rem,2vw,1.625rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
@media (min-width: 880px) { .role { grid-template-columns: 1.5fr 1fr auto; gap: var(--s-2); } }
.role:hover { border-color: var(--line); box-shadow: var(--shadow); transform: translateY(-2px); }
.role h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.role__brand { font-size: .9375rem; color: var(--slate); }
.role__where { font-size: .9375rem; color: var(--slate); }
.role .btn { justify-self: start; }
@media (min-width: 880px) { .role .btn { justify-self: end; } }

.hiring { counter-reset: step; display: grid; gap: var(--s-2); }
@media (min-width: 880px) { .hiring { grid-template-columns: repeat(4,1fr); } }
.hiring li { position: relative; padding-top: var(--s-2); border-top: 2px solid var(--line); }
.hiring li::before {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  position: absolute; top: -.9rem; left: 0;
  padding-right: .625rem; background: var(--neutral);
  font-family: var(--font-display); font-weight: 600; color: var(--orange-deep);
  font-variant-numeric: tabular-nums;
}
.hiring h3 { margin-bottom: .375rem; font-size: 1.0625rem; }
.hiring p { color: var(--slate); font-size: 1rem; }

/* --- Video lightbox ------------------------------------------------------ */
/* Native <dialog> so focus trapping, inertness and Escape come from the
   platform rather than a hand-rolled trap. */
.lightbox {
  width: min(100% - 2rem, 1100px);
  padding: 0; border: 0; background: transparent;
  color: var(--white); overflow: visible;
}
.lightbox::backdrop { background: rgba(10,10,12,.86); backdrop-filter: blur(4px); }
.lightbox__frame {
  position: relative; aspect-ratio: 16/9; width: 100%;
  background: #000; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9);
}
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  margin-bottom: .75rem;
}
.lightbox__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.lightbox__close {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.06); color: var(--white);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox[open] { animation: lb-in 180ms var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }


/* ==========================================================================
   Round-3 adjustments
   ========================================================================== */

/* Outbound arrow. `.ico` is only sized inside .btn, so anywhere else the SVG
   had no intrinsic box and collapsed. */
.ico--ext { width: 13px; height: 13px; flex: none; opacity: .72; }
.btn .ico--ext { width: 14px; height: 14px; opacity: 1; }
a:hover > .ico--ext, .btn:hover .ico--ext { opacity: 1; }
.nav__links a { gap: .3125rem; }
.nav__panel a:not(.btn) { display: flex; align-items: center; gap: .4375rem; }
.footer__list li a .ico--ext { opacity: .6; }

/* Article column. The prose measure caps at 68ch, so a full-width wrap left a
   300px void between the text and the sidebar. Narrow the container instead. */
.section--article > .wrap { max-width: 1120px; }

/* News hero: heading left, standfirst right — the single-column version left
   the whole right half empty. */
.page-hero__grid > .lead { padding-bottom: .375rem; }

/* Archive leads with the featured post, so it does not need a full section's
   worth of air above it. */
.section--pull-up { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Touch minimum: the TOC rows were coming out at 41px. */
.toc a { display: flex; align-items: center; min-height: 44px; }
.taglist a { min-height: 44px; }
.site-footer nav > h2 { font-family: var(--font); }

/* --- Leadership team cards ---------------------------------------------- */
/* Photo-led now that real headshots are in. Seven people sit as 4 + 3 at the
   widest breakpoint, which balances better than 3 + 3 + 1. */
.team { gap: var(--s-1); }
@media (min-width: 620px)  { .team { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1020px) { .team { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1280px) { .team { grid-template-columns: repeat(4,1fr); } }

.person {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.person:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.person__photo {
  aspect-ratio: 1 / 1; background: var(--tint-navy);
  border-bottom: 1px solid var(--line-soft);
}
.person__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Black and white by design. Drop this line to restore the colour originals —
     the files in assets/img/team/ are untouched. The slight contrast lift stops
     desaturated skin tones going flat. */
  filter: grayscale(1) contrast(1.05);
}
.person__body { padding: clamp(1.125rem, 1.8vw, 1.5rem); }
.person__body h3 { font-size: 1.125rem; }

@media (prefers-reduced-motion: reduce) {
  .person { transition: none; }
  .person:hover { transform: none; }
}

/* ==========================================================================
   Photo hero (About Us, Our Brands, Our Team — not News)
   The photo is a layer inside the existing dark field, not a replacement for
   it. Layer order, top to bottom:
     1. orange bloom   — sits above the scrims so the brand light still reads
     2. navy glow
     3. lateral scrim  — heaviest on the left, where the headline sits
     4. vertical scrim — kills the near-white sky at the top, grounds the base
     5. the photograph
     6. the original ink gradient, as the floor
   ========================================================================== */
.page-hero--photo {
  min-height: clamp(360px, 52vh, 540px);
  display: flex;
  align-items: center;
  background-color: var(--ink);
  background-image:
    radial-gradient(58% 62% at 92% -14%, rgba(255,87,34,.26), rgba(255,87,34,0) 62%),
    radial-gradient(66% 60% at 2% 106%, rgba(26,58,99,.52), rgba(26,58,99,0) 64%),
    linear-gradient(96deg,
      rgba(16,16,19,.97) 0%,
      rgba(16,16,19,.94) 28%,
      rgba(16,16,19,.84) 50%,
      rgba(16,16,19,.70) 72%,
      rgba(16,16,19,.76) 100%),
    linear-gradient(180deg,
      rgba(16,16,19,.72) 0%,
      rgba(16,16,19,.20) 30%,
      rgba(16,16,19,.30) 60%,
      rgba(16,16,19,.78) 100%),
    url("../img/hero-truckbridge-1920px.webp"),
    linear-gradient(180deg, #17171A 0%, #1A1A1D 46%, #121215 100%);
  background-size: cover, cover, cover, cover, cover, cover;
  background-position: center, center, center, center, 50% 68%, center;
  background-repeat: no-repeat;
}
.page-hero--photo > .wrap { width: min(100% - 2.5rem, var(--wrap)); }
@media (min-width: 768px) {
  .page-hero--photo > .wrap { width: min(100% - 5rem, var(--wrap)); }
}

/* The mark tile moves to the flat left side. Sitting top-right it would have
   landed on the busiest part of the photograph and read as dirt. */
.page-hero--photo::before {
  -webkit-mask-image: radial-gradient(ellipse 76% 128% at 4% 46%, #000 4%, transparent 70%);
          mask-image: radial-gradient(ellipse 76% 128% at 4% 46%, #000 4%, transparent 70%);
  opacity: .06;
}

/* Over a photograph the stat panel needs to be a panel, not a hairline box —
   otherwise the figures inherit whatever is behind them. */
.page-hero--photo .hero__stats {
  background: linear-gradient(180deg, rgba(19,19,22,.74) 0%, rgba(19,19,22,.60) 100%);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-color: rgba(255,255,255,.16);
}
@supports not (backdrop-filter: blur(2px)) {
  .page-hero--photo .hero__stats {
    background: linear-gradient(180deg, rgba(19,19,22,.92) 0%, rgba(19,19,22,.86) 100%);
  }
}

/* Portrait crops hard into a 16:9 frame, so bias the crop toward the roadway
   and hold a bit more scrim under the copy. */
@media (max-width: 720px) {
  .page-hero--photo {
    min-height: 0;
    background-position: center, center, center, center, 58% 46%, center;
    background-image:
      radial-gradient(58% 62% at 92% -14%, rgba(255,87,34,.26), rgba(255,87,34,0) 62%),
      radial-gradient(66% 60% at 2% 106%, rgba(26,58,99,.52), rgba(26,58,99,0) 64%),
      linear-gradient(180deg,
        rgba(16,16,19,.94) 0%,
        rgba(16,16,19,.90) 16%,
        rgba(16,16,19,.72) 40%,
        rgba(16,16,19,.78) 72%,
        rgba(16,16,19,.94) 100%),
      linear-gradient(180deg, rgba(16,16,19,.26), rgba(16,16,19,.26)),
      url("../img/hero-truckbridge-1920px.webp"),
      linear-gradient(180deg, #17171A 0%, #1A1A1D 46%, #121215 100%);
  }
}

/* An element carrying its own background should not inherit its contrast from
   whatever happens to sit behind it. Over a photograph the 10%-orange pill let
   the sky through and dropped the label to ~3.2:1; a near-opaque ink pill puts
   it back to a deterministic ~4.8:1 whatever the crop does. */
.page-hero--photo .eyebrow {
  /* Fully opaque, not 94%: at 6% transmission a bright sky behind the pill
     still moved the label's contrast around between crops. Opaque makes it
     deterministic at 6.0:1 wherever the photo lands. */
  background: #101013;
  border-color: rgba(255,87,34,.45);
}
.page-hero--photo .eyebrow__n { border-right-color: rgba(255,138,101,.5); }

/* --- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); } }

.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: .4375rem; margin-bottom: var(--s-2); }
.field-row { display: grid; gap: var(--s-2); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Visible labels, always — a placeholder disappears the moment someone types,
   taking the only description of the field with it. */
.field label { font-size: .9375rem; font-weight: 600; color: var(--navy); }
.field .req { color: var(--orange-deep); }
.field .hint { font-size: var(--fs-caption); color: var(--slate); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px;
  padding: .8125rem 1rem;
  font: inherit; font-size: 1rem; color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355595F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
  padding-right: 2.75rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C9CDD3; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--orange-cta); outline: 2px solid var(--orange-deep); outline-offset: 1px;
}
/* Only flag a field the visitor has actually left, never one they are mid-way
   through filling in. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid { border-color: #C0392B; }
.form-card .btn { width: 100%; margin-top: var(--s-1); }
@media (min-width: 620px) { .form-card .btn { width: auto; } }
.form-note { margin-top: var(--s-1); font-size: var(--fs-caption); color: var(--slate); }

.contact-aside { display: grid; gap: var(--s-1); align-content: start; }
.contact-card {
  padding: clamp(1.375rem, 2.2vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--neutral);
}
.contact-card h2 { font-size: 1.0625rem; font-family: var(--font-display); margin-bottom: .5rem; }
.contact-card p { color: var(--slate); font-size: 1rem; }
.contact-card p + p, .contact-card .link-arrow { margin-top: .625rem; }
.contact-card a:not(.btn):not(.link-arrow) {
  color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px;
}
.contact-card--accent { background: var(--tint); border-color: rgba(255,87,34,.22); }

/* Runtime badge on a story poster — sets the expectation before the click. */
.play__time {
  position: absolute; right: .75rem; bottom: .75rem;
  padding: .25rem .5rem; border-radius: var(--radius);
  background: rgba(10,10,12,.78);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  color: #fff; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* Phone and email are the primary contact route on this page — they need to be
   tappable, not just readable. */
.contact-card--accent p a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1.0625rem; font-weight: 600;
}