/* ============================================================
   Page sections: hero, page header, CTA band, specialised blocks
   ============================================================ */

/* ── Homepage hero slider ─────────────────────────────────── */

.hero {
  /* The controls are pinned to the bottom of the hero and overlay the slide,
     so the slide must reserve room for them. Both the reserve and the
     controls read from here, because sizing them independently is exactly
     how the dots ended up on top of the second call to action. */
  --hero-controls-reserve: 5.5rem;

  position: relative;
  background: var(--ink-900) url('../img/coatpro-home-hero.webp') center / cover no-repeat;
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero--slider {
  background-image: none;
}

.hero--slider::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(8, 13, 20, .94) 0%, rgba(8, 13, 20, .82) 37%, rgba(8, 13, 20, .35) 72%, rgba(8, 13, 20, .18) 100%), linear-gradient(0deg, rgba(8, 13, 20, .68) 0%, transparent 34%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 32rem at 78% 22%, rgba(201, 151, 43, 0.15), transparent 62%),
    radial-gradient(38rem 24rem at 6% 92%, rgba(201, 151, 43, 0.07), transparent 60%);
  pointer-events: none;
}

/* Slides stack in one grid cell and cross-fade, so the hero never changes
   height between slides — a sliding hero that jumps is worse than no slider. */
.hero__track {
  display: grid;
  grid-template-areas: 'slide';
  position: relative;
  z-index: 1;
}

.hero-slide {
  grid-area: slide;
  /* All slides share one grid cell, so the hero's height is set by the
     tallest. Centre the content or short slides hang off the top. */
  display: grid;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 520ms var(--ease-out),
              transform 520ms var(--ease-out),
              visibility 520ms;
  pointer-events: none;
  position: relative;
  background-image: var(--hero-slide-image);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 13, 20, .93) 0%, rgba(8, 13, 20, .80) 38%, rgba(8, 13, 20, .34) 72%, rgba(8, 13, 20, .18) 100%), linear-gradient(0deg, rgba(8, 13, 20, .65), transparent 42%);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.hero-slide__inner {
  display: grid;
  gap: var(--s6);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem) var(--hero-controls-reserve);
  width: 100%;
}

@media (min-width: 62rem) {
  .hero-slide__inner { grid-template-columns: minmax(0, 1fr); }
}

.hero-slide__copy { min-width: 0; }

.hero-slide__title {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 1.8vw + 1.35rem, 2.625rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}

.hero-slide__title em {
  font-style: normal;
  background: linear-gradient(120deg, #F6E9C4 0%, #EDD597 35%, #DDB65A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-slide__body {
  margin-top: var(--s5);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-muted);
  max-width: 46ch;
}

.hero-slide__actions {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.hero .eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--gold-400);
  margin-bottom: var(--s5);
}

/* ── Slide artwork ───────────────────────────────────────── */

@media (max-width: 61.99rem) {
  .hero-slide__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  /* 45 characters of tracked-out caps wrap to two lines on a phone and the
     orphan reads as a mistake. Tighter tracking keeps it on one. */
  .hero .eyebrow { font-size: 0.625rem; letter-spacing: 0.07em; }

  /* 1.75 is a comfortable desktop measure; at 34 characters per line it just
     pushes the call to action further down the screen. */
  .hero-slide__body { line-height: 1.55; margin-top: var(--s4); }
  .hero-slide__actions { margin-top: var(--s5); }
  /* Dots and arrows wrap onto two rows at phone width — 44px each plus the
     gap — so the reserve has to cover both, not the single row it was sized
     for, and leave the buttons clear air underneath. */
  .hero { --hero-controls-reserve: 9.5rem; }
  .hero-slide__inner { padding-block: var(--s6) var(--hero-controls-reserve); gap: var(--s5); }
  .hero-slide { background-position: 62% center; }
  .hero-slide::before { background: linear-gradient(90deg, rgba(8,13,20,.91), rgba(8,13,20,.66)), linear-gradient(0deg, rgba(8,13,20,.76), transparent 70%); }
}

/* ── Controls ────────────────────────────────────────────── */

.hero__controls {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: .5rem;
  pointer-events: none;
}

.hero__controls > * { pointer-events: auto; }

.hero__dots { display: flex; align-items: center; gap: var(--s2); }

.hero__dot {
  width: 2.25rem;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: grid;
  align-items: center;
}

.hero__dot::before {
  content: '';
  display: block;
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.22);
  transition: background var(--dur) var(--ease);
}

.hero__dot:hover::before { background: rgba(255, 255, 255, 0.4); }

.hero__dot-fill {
  position: absolute;
  height: 3px;
  width: 0;
  border-radius: var(--r-full);
  background: var(--gold-500);
  pointer-events: none;
}

.hero__dot { position: relative; }

/* The active dot's fill sweeps across as the autoplay timer runs, so the
   carousel shows how long is left rather than moving without warning. */
.hero__dot.is-active .hero__dot-fill {
  width: 2.25rem;
  transition: width var(--slide-duration, 7s) linear;
}

.hero__dot.is-active.is-paused .hero__dot-fill { transition: none; }

.hero__arrows { display: flex; align-items: center; gap: var(--s3); }

.hero__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--text-on-dark);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.hero__arrow:hover {
  border-color: var(--gold-500);
  background: rgba(201, 151, 43, 0.12);
  color: var(--gold-300);
}

.hero__arrow svg { width: 1.125rem; height: 1.125rem; }

.hero__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
  min-width: 5.5ch;
  text-align: center;
}

/* Without motion, slides swap instantly and autoplay is off (see app.js). */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero__dot.is-active .hero__dot-fill { transition: none; width: 2.25rem; }
}

/* ── Editorial split ──────────────────────────────────────
   A heading or supporting panel that stays with the reader while the body
   scrolls. Same proportions as .faq-block on purpose, so long-form pages
   across the site share one rhythm instead of each inventing its own. */

.editorial {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 62rem) {
  .editorial {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
  }

  .editorial__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s5));
  }

  /* Intro reads body-first with the facts alongside. The panel is second in
     source as well as on screen, so a screen reader and a crawler get the
     narrative before the summary — no order juggling needed. */
  .editorial--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
}

.editorial .prose { max-width: 42rem; }
.doc-intro__image {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0 0 var(--s6) !important;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  object-fit:cover;
}
.editorial__aside h2 { margin: 0; }

/* No aside to place — drop the second column rather than leave a gap. */
.editorial--plain { grid-template-columns: minmax(0, 1fr) !important; }

/* ── Document sections ────────────────────────────────────
   A full-width section opens like a chapter: rule, number, heading. The
   content below then owns the whole container instead of being pushed into
   a column beside an empty one. */

.doc-section__head {
  max-width: 46rem;
  margin-bottom: var(--s7);
  padding-top: var(--s5);
  border-top: 2px solid var(--gold-400);
}

.doc-section__head h2 { margin: 0; }

.doc-section__num {
  display: block;
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-700);
}

/* In the sidebar layout the number sits above the heading and the rule
   belongs to the column, not to a full-width header. */
.editorial__aside .doc-section__num { margin-bottom: var(--s3); }

.editorial__aside h2 {
  margin: 0;
  padding-top: var(--s5);
  border-top: 2px solid var(--gold-400);
}

.doc-section__body .prose { max-width: 46rem; }
.doc-section__body .term-grid { margin-top: 0; }

/* The lead paragraph of the page reads as a standfirst, not body copy. */
.doc-intro__lead > p:first-child {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text);
}

/* ── Term cards ───────────────────────────────────────────
   A bold-led list rendered as cards. They break out of the body column so
   the grid uses the width the prose measure deliberately gives up. */

.term-grid {
  list-style: none;
  padding-left: 0;
  margin-block: var(--s6);
  display: grid;
  gap: var(--s4);
}

@media (min-width: 48rem) {
  .term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Given the whole container, three across reads as a considered grid;
   two across leaves the cards stretched and the rhythm slack. */
@media (min-width: 64rem) {
  .term-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.term-card {
  margin-top: 0 !important;
  max-width: none;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-top: 2px solid var(--gold-400);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.term-card:hover {
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

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

.term-card__title {
  margin: 0 0 var(--s2);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.term-card__body {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}

/* The section--alt band behind a card grid would make white cards vanish. */
.section--alt .term-card { background: var(--surface); }

/* ── Mission / vision statements ──────────────────────────
   Deliberately larger than body copy: these are the two sentences a visitor
   is most likely to read in full, and they carry no detail to crowd them. */

.card--statement .card__body p {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text);
}

/* ── Numbered method grid ─────────────────────────────────
   Six steps read badly in the 4-up grid used for the seven-step process. */

@media (min-width: 48rem) {
  .process--grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .process--grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Leave room for the counter in the top-right corner. */
.process--grid-3 .process__step h3 { padding-right: var(--s7); }

/* ── Person and address blocks ────────────────────────────── */

.about-person { display: grid; gap: 2px; }
.about-person span { color: var(--text-muted); font-size: var(--fs-sm); }

.about-address {
  font-style: normal;
  line-height: var(--lh-relaxed);
}

/* ── Technology family links ──────────────────────────────── */

.tech-link {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s2);
  padding: var(--s5) var(--s6) var(--s5) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.tech-link:hover {
  border-color: var(--gold-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.tech-link__title {
  font-size: var(--fs-base);
  font-weight: 600;
  margin: 0;
  padding-right: var(--s5);
}

.tech-link__body {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

.tech-link__more {
  position: absolute;
  top: var(--s5);
  right: var(--s4);
  color: var(--gold-600);
  transition: transform var(--dur) var(--ease);
}

.tech-link__more svg { width: 1rem; height: 1rem; }
.tech-link:hover .tech-link__more { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .tech-link:hover { transform: none; }
  .tech-link:hover .tech-link__more { transform: none; }
}

/* ── Interior page header ─────────────────────────────────── */

.page-header {
  position: relative;
  background: var(--ink-900);
  color: var(--text-on-dark);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}

.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(48rem 24rem at 88% 10%, rgba(201, 151, 43, 0.15), transparent 66%);
}

.page-header h1 { color: #fff; max-width: 24ch; }
.page-header__lead { margin-top: var(--s4); font-size: var(--fs-lg); color: var(--text-on-dark-muted); max-width: 46rem; }
.page-header__actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }

.page-header--light {
  background: var(--ivory);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.page-header--light::after { display: none; }
.page-header--light h1 { color: var(--text); }
.page-header--light .page-header__lead { color: var(--text-muted); }
.page-header--light .eyebrow { color: var(--gold-700); }

/* ── Trust / stats strip ──────────────────────────────────── */

.stats-strip {
  border-block: 1px solid var(--line);
  background: var(--surface-alt);
  padding-block: var(--s7);
}

.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s6) var(--s5);
}

@media (min-width: 48rem) { .stats-strip__grid { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 48rem) {
  .stats-strip__grid > * + * { border-left: 1px solid var(--line); }
}

/* ── CTA band ─────────────────────────────────────────────── */

.cta-band {
  position: relative;
  background: var(--ink-900);
  color: var(--text-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(52rem 28rem at 15% 0%, rgba(201, 151, 43, 0.17), transparent 64%);
}

.cta-band__inner {
  display: grid;
  gap: var(--s7);
  padding-block: var(--section-y);
  align-items: start;
}

@media (min-width: 62rem) {
  .cta-band__inner { grid-template-columns: 1fr 1.05fr; gap: var(--s8); }
}

.cta-band h2 { color: #fff; font-size: var(--fs-3xl); }
.cta-band__lead { margin-top: var(--s4); color: var(--text-on-dark-muted); font-size: var(--fs-lg); }

.cta-band__contacts {
  margin-top: var(--s6);
  display: grid;
  gap: var(--s4);
  list-style: none;
  padding: 0;
}

.cta-band__contacts li { display: flex; gap: var(--s3); align-items: flex-start; margin-top: 0; }
.cta-band__contacts svg { width: 1.125rem; height: 1.125rem; color: var(--gold-500); flex-shrink: 0; margin-top: 4px; }
.cta-band__contacts a { color: #fff; font-weight: 600; text-decoration: none; }
.cta-band__contacts a:hover { color: var(--gold-300); }
.cta-band__contacts span { display: block; font-size: var(--fs-sm); color: var(--text-on-dark-muted); }

.cta-form {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: var(--s6);
}

@media (max-width: 30rem) { .cta-form { padding: var(--s5); } }

/* ── Process timeline ─────────────────────────────────────── */

.process { counter-reset: step; display: grid; gap: var(--s5); }

@media (min-width: 48rem) {
  .process--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
  .process--grid { grid-template-columns: repeat(4, 1fr); }
}

.process__step {
  counter-increment: step;
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.process__step:hover { border-color: var(--gold-400); box-shadow: var(--shadow-md); }

.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-200);
  font-variant-numeric: tabular-nums;
}

.process__step h3 { font-size: var(--fs-lg); padding-right: 3rem; margin-bottom: var(--s3); }
.process__step p { font-size: var(--fs-base); color: var(--text-muted); max-width: none; }

/* Horizontal process indicator used for the four-step homepage overview. */
.process--grid .process__step {
  padding:4.5rem clamp(1.25rem,2vw,1.75rem) clamp(1.35rem,2vw,1.75rem);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-alt) 100%);
}
.process--grid .process__step::before {
  top:1.25rem;
  right:auto;
  left:clamp(1.25rem,2vw,1.75rem);
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  border:1px solid var(--gold-300);
  border-radius:var(--r-full);
  background:var(--gold-050);
  color:var(--gold-700);
  font-size:var(--fs-sm);
  box-shadow:0 0 0 .35rem var(--surface);
}
.process--grid .process__step:not(:last-child)::after {
  content:'';
  position:absolute;
  z-index:2;
  top:2.48rem;
  right:calc(var(--s5) * -1 - .15rem);
  width:calc(var(--s5) + .3rem);
  height:1px;
  background:linear-gradient(90deg,var(--gold-400),var(--gold-200));
  clip-path:polygon(0 0,calc(100% - 5px) 0,calc(100% - 5px) -2px,100% 50%,calc(100% - 5px) calc(100% + 2px),calc(100% - 5px) 100%,0 100%);
}
.process--grid .process__step h3 { padding-right:0; }
@media (max-width:71.99rem) {
  .process--grid .process__step:not(:last-child)::after {
    display:block;
    top:auto;
    bottom:calc(var(--s5) * -1 - .15rem);
    right:auto;
    left:50%;
    width:.7rem;
    height:calc(var(--s5) + .3rem);
    background:linear-gradient(180deg,var(--gold-300),var(--gold-500));
    clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% + 2px) calc(100% - 5px),50% 100%,-2px calc(100% - 5px),0 calc(100% - 5px));
  }
}
@media (max-width:47.99rem) {
  .process--grid { gap:var(--s4); }
  .process--grid .process__step { padding-top:4.25rem; }
}

/* Vertical variant, used on the custom-development page */
.process--vertical { gap: 0; }

.process--vertical .process__step {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  padding: 0 0 var(--s7) var(--s7);
  background: none;
}

.process--vertical .process__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.process--vertical .process__step:hover { box-shadow: none; }

.process--vertical .process__step::before {
  top: 0;
  left: 0;
  right: auto;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: var(--fs-base);
  background: var(--gold-050);
  border: 2px solid var(--gold-400);
  border-radius: var(--r-full);
  color: var(--gold-700);
}

.process--vertical .process__step h3 { padding-right: 0; padding-top: var(--s2); }

/* Alternating image and copy timeline for the seven-step development page. */
.process--image-timeline {
  position:relative;
  display:grid;
  gap:clamp(2.5rem,5vw,4.5rem);
  padding-block:var(--s4);
}
.process--image-timeline::before {
  content:'';
  position:absolute;
  top:2rem;
  bottom:2rem;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold-300),var(--line-strong) 18%,var(--line-strong) 82%,var(--gold-300));
}
.process--image-timeline .process__step {
  display:grid;
  grid-template-columns:minmax(0,1fr) 4.25rem minmax(0,1fr);
  align-items:center;
  gap:clamp(1rem,2.5vw,2.25rem);
  min-height:16rem;
  border:0;
  padding:0;
  background:transparent;
}
.process--image-timeline .process__step:hover { box-shadow:none; }
.process--image-timeline .process__step::before { content:none; }
.process--image-timeline .process__visual {
  grid-column:1;
  grid-row:1;
  overflow:hidden;
  aspect-ratio:1.78;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface-alt);
  box-shadow:var(--shadow-sm);
}
.process--image-timeline .process__visual img {
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  transition:transform 650ms var(--ease-out);
}
.process--image-timeline .process__step:hover .process__visual img { transform:scale(1.035); }
.process--image-timeline .process__marker {
  z-index:1;
  grid-column:2;
  grid-row:1;
  display:grid;
  place-items:center;
  justify-self:center;
  width:3.25rem;
  height:3.25rem;
  border:2px solid var(--gold-400);
  border-radius:var(--r-full);
  background:var(--surface);
  color:var(--gold-700);
  font-size:var(--fs-sm);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 .4rem var(--surface);
}
.process--image-timeline .process__content {
  grid-column:3;
  grid-row:1;
  padding:clamp(1rem,2.5vw,2rem);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.process--image-timeline .process__content h3 { padding:0; margin:0 0 var(--s3); }
.process--image-timeline .process__content p { margin:0; color:var(--text-muted); }
.process--image-timeline .process__step:nth-child(even) .process__visual { grid-column:3; }
.process--image-timeline .process__step:nth-child(even) .process__content { grid-column:1; }
@media (max-width:47.99rem) {
  .process--image-timeline { gap:var(--s6); padding-left:3.5rem; }
  .process--image-timeline::before { left:1.375rem; }
  .process--image-timeline .process__step {
    grid-template-columns:minmax(0,1fr);
    gap:var(--s4);
    min-height:0;
  }
  .process--image-timeline .process__marker {
    position:absolute;
    left:1.375rem;
    transform:translateX(-50%);
    width:2.75rem;
    height:2.75rem;
  }
  .process--image-timeline .process__visual,
  .process--image-timeline .process__step:nth-child(even) .process__visual,
  .process--image-timeline .process__content,
  .process--image-timeline .process__step:nth-child(even) .process__content {
    grid-column:1;
    grid-row:auto;
  }
  .process--image-timeline .process__visual { width:100%; }
  .process--image-timeline .process__content { padding:var(--s5); }
}
@media (prefers-reduced-motion:reduce) {
  .process--image-timeline .process__visual img { transition:none; }
  .process--image-timeline .process__step:hover .process__visual img { transform:none; }
}

/* ── Feature list with icons ──────────────────────────────── */

.feature-list { display: grid; gap: var(--s5); list-style: none; padding: 0; }

@media (min-width: 48rem) { .feature-list--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .feature-list--3 { grid-template-columns: repeat(3, 1fr); } }

.feature-list li { display: flex; gap: var(--s4); margin-top: 0; }

.feature-list__icon {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--gold-050);
  border: 1px solid var(--gold-200);
  color: var(--gold-700);
}

.feature-list__icon svg { width: 1.25rem; height: 1.25rem; }

.feature-list strong {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-md);
  margin-bottom: var(--s1);
}

.feature-list p { font-size: var(--fs-base); color: var(--text-muted); max-width: none; }

.section--dark .feature-list__icon {
  background: rgba(201, 151, 43, 0.12);
  border-color: rgba(201, 151, 43, 0.3);
  color: var(--gold-300);
}

/* ── Document list (TDS / SDS) ────────────────────────────── */

.doc-list { display: grid; gap: var(--s3); list-style: none; padding: 0; }

.doc-list li { margin-top: 0; }

.doc-item {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: all var(--dur-fast) var(--ease);
}

.doc-item:hover { border-color: var(--gold-500); background: var(--gold-050); color: var(--text); }

.doc-item__icon {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  color: var(--ink-600);
}

.doc-item:hover .doc-item__icon { background: var(--gold-200); color: var(--gold-700); }
.doc-item__icon svg { width: 1.25rem; height: 1.25rem; }

.doc-item__text { flex: 1; min-width: 0; }
.doc-item__text strong { display: block; font-family: var(--font-head); font-size: var(--fs-base); }
.doc-item__text span { display: block; font-size: var(--fs-sm); color: var(--text-muted); }

.doc-item__action { flex-shrink: 0; color: var(--gold-700); }
.doc-item__action svg { width: 1.25rem; height: 1.25rem; }

/* ── Post cards & article layout ──────────────────────────── */

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  margin-bottom: var(--s3);
}

.post-card__meta time { font-variant-numeric: tabular-nums; }

.article__head { max-width: 46rem; }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.article__body { max-width: 44rem; }
.article__body > * + * { margin-top: var(--s5); }
.article__body h2 { font-size: var(--fs-2xl); margin-top: var(--s8); }
.article__body h3 { font-size: var(--fs-xl); margin-top: var(--s7); }
.article__body ul, .article__body ol { display: grid; gap: var(--s3); }
.article__body li { max-width: none; }
.article__body table { margin-block: var(--s6); font-size: var(--fs-base); }
.article__body th { background: var(--surface-alt); }

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.share__label {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.share a, .share button {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}

.share a:hover, .share button:hover { border-color: var(--gold-500); color: var(--gold-700); background: var(--gold-050); }
.share svg { width: 1.125rem; height: 1.125rem; }

/* ── Glossary ─────────────────────────────────────────────── */

.glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.glossary-index a {
  display: grid;
  place-items: center;
  min-width: 40px; min-height: 40px;
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
}

.glossary-index a:hover { border-color: var(--gold-500); color: var(--gold-700); background: var(--gold-050); }
.glossary-index span { opacity: 0.35; pointer-events: none; }

.glossary-group + .glossary-group { margin-top: var(--s8); }

.glossary-group__letter {
  font-family: var(--font-head);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--gold-600);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--gold-200);
  margin-bottom: var(--s5);
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}

.glossary-term { padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.glossary-term h3 { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.glossary-term h3 a { color: inherit; text-decoration: none; }
.glossary-term h3 a:hover { color: var(--gold-700); }
.glossary-term p { color: var(--text-muted); font-size: var(--fs-base); }
.glossary-term__aka { font-size: var(--fs-sm); color: var(--text-subtle); margin-top: var(--s2); }

/* ── Job listing ──────────────────────────────────────────── */

.job-card {
  display: grid;
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.job-card:hover { border-color: var(--gold-400); box-shadow: var(--shadow-md); }

@media (min-width: 48rem) {
  .job-card { grid-template-columns: 1fr auto; align-items: center; }
}

.job-card__meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* ── Contact detail blocks ────────────────────────────────── */

.contact-card {
  display: grid;
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  height: 100%;
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md);
  background: var(--gold-050);
  border: 1px solid var(--gold-200);
  color: var(--gold-700);
}

.contact-card__icon svg { width: 1.375rem; height: 1.375rem; }
.contact-card h3 { font-size: var(--fs-lg); }
.contact-card address { font-style: normal; color: var(--text-muted); line-height: var(--lh-relaxed); }
.contact-card a { font-weight: 600; text-decoration: none; word-break: break-word; }

.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-sunken);
  aspect-ratio: 16 / 9;
}

.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Related content rail ─────────────────────────────────── */

.related { border-top: 1px solid var(--line); padding-top: var(--s7); margin-top: var(--s8); }

/* ── Empty state ──────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--s9) var(--s5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}

.empty-state svg { width: 2.5rem; height: 2.5rem; color: var(--text-subtle); margin: 0 auto var(--s4); }
.empty-state p { margin-inline: auto; color: var(--text-muted); }

/* ── Error page ───────────────────────────────────────────── */

.error-page {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 60vh;
  padding-block: var(--s9);
}

.error-page__code {
  font-family: var(--font-head);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 700;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* Industry imagery and application-card system */
.product-card { padding:0; }
.product-card__media {
  position:relative;
  overflow:hidden;
  aspect-ratio:1.78;
  background:var(--surface-alt);
}
.product-card__media::after {
  content:'';
  position:absolute;
  inset:48% 0 0;
  background:linear-gradient(180deg,transparent,rgba(8,13,20,.3));
  pointer-events:none;
}
.product-card__image {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 650ms var(--ease-out);
}
.product-card__image-label {
  position:absolute;
  z-index:1;
  left:var(--s5);
  bottom:var(--s4);
  padding:.35rem .65rem;
  border:1px solid rgba(255,255,255,.46);
  border-radius:var(--r-full);
  background:rgba(8,13,20,.58);
  color:#fff;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.product-card__content {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:clamp(1.25rem,2vw,1.75rem);
}
.product-card__title { margin-bottom:var(--s3); }
.product-card__body p {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.product-card__foot { margin-top:auto; padding-top:var(--s4); }
.product-card:hover .product-card__image,
.product-card:focus-within .product-card__image { transform:scale(1.035); }
@media (prefers-reduced-motion:reduce) { .product-card__image { transition:none; } .product-card:hover .product-card__image,.product-card:focus-within .product-card__image { transform:none; } }

.product-hero {
  min-height:clamp(22rem,30vw,30rem);
  display:flex;
  align-items:center;
  background:var(--ink-900);
}
.product-hero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--product-hero-image);
  background-size:cover;
  background-position:center;
}
/* The scrim has to finish behind the copy, not before it. A clip-path wedge
   cannot guarantee that: its edge is a fixed percentage while the panel is
   min(58%, 48rem), so at most widths the headline ran past the wedge onto the
   bright part of the photograph — 97px of it at 1440. A gradient that stays
   opaque past the panel's widest possible edge and only then falls away keeps
   the diagonal feel without the text ever leaving cover. */
.product-hero::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(100deg,
    rgba(8,13,20,.93) 0%,
    rgba(8,13,20,.88) 52%,
    rgba(8,13,20,.74) 66%,
    rgba(8,13,20,.34) 86%,
    rgba(8,13,20,.20) 100%);
}
.product-hero .container { width:100%; }
.product-hero__panel {
  position:relative;
  z-index:1;
  width:min(58%,48rem);
  padding-block:clamp(1rem,2vw,2rem);
}
.product-hero__panel h1 { max-width:18ch; }
.product-hero__panel .page-header__lead { max-width:42rem; }
@media (max-width:48rem) {
  .product-hero { min-height:25rem; padding-block:var(--s6); }
  .product-hero::before { background-position:65% center; }

  /* At phone width the copy spans essentially the whole column, so there is
     no "right side" left to reveal the photograph through. Cover the full
     width evenly and let the image read as texture behind the words. */
  .product-hero::after {
    background:linear-gradient(180deg,
      rgba(8,13,20,.90) 0%,
      rgba(8,13,20,.84) 48%,
      rgba(8,13,20,.92) 100%);
  }

  .product-hero__panel { width:100%; }
}

.application-hero { min-height:clamp(28rem,38vw,36rem); display:flex; align-items:center; padding-block:clamp(3.5rem,7vw,5.5rem); background:var(--ink-900); }
.application-hero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(90deg,rgba(8,13,20,.98) 0%,rgba(8,13,20,.92) 31%,rgba(8,13,20,.72) 55%,rgba(8,13,20,.55) 100%),linear-gradient(0deg,rgba(8,13,20,.58),transparent 72%),var(--application-hero-image);
  background-size:cover;
  background-position:center 48%;
}
.application-hero__grid { width:100%; }
.application-hero__copy { max-width:42rem; }
.application-hero__copy h1 { max-width:16ch; }
.application-hero__copy .page-header__lead { max-width:38rem; }
.application-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2rem); }
.application-card { padding:0; }
.application-card__image { display:block; width:100%; aspect-ratio:1.72; object-fit:cover; background:var(--surface-alt); }
.application-card__content { display:flex; flex:1; flex-direction:column; padding:clamp(1.25rem,2.4vw,2rem); }
.application-card__content .card__title { font-size:var(--fs-xl); }
.application-card__challenges { margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line); }
.application-card__challenges h3 { margin-bottom:var(--s3); color:var(--text-muted); font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; }
.application-card__challenges ul { display:grid; gap:var(--s2); }
.application-card__link { margin-top:auto; padding-top:var(--s5); }
.application-card:hover .application-card__image { transform:scale(1.025); }
@media (prefers-reduced-motion:reduce) { .application-card:hover .application-card__image { transform:none; } }
.application-teaser-card { padding:0; overflow:hidden; }
.application-teaser-card__media { position:relative; display:block; overflow:hidden; aspect-ratio:1.78; background:var(--surface-alt); }
.application-teaser-card__media::after { content:''; position:absolute; inset:48% 0 0; background:linear-gradient(180deg,transparent,rgba(8,13,20,.34)); pointer-events:none; }
.application-teaser-card__image { display:block; width:100%; height:100%; object-fit:cover; transition:transform 650ms var(--ease-out); }
.application-teaser-card__label { position:absolute; z-index:1; left:var(--s5); bottom:var(--s4); padding:.35rem .65rem; border:1px solid rgba(255,255,255,.46); border-radius:var(--r-full); background:rgba(8,13,20,.58); color:#fff; font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.application-teaser-card__content { display:flex; flex:1; flex-direction:column; padding:clamp(1.25rem,2vw,1.75rem); }
.application-teaser-card .card__title { margin-bottom:var(--s3); }
.application-teaser-card .card__body p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.application-teaser-card .card__foot { margin-top:auto; padding-top:var(--s4); }
.application-teaser-card:hover .application-teaser-card__image,.application-teaser-card:focus-within .application-teaser-card__image { transform:scale(1.035); }
@media (prefers-reduced-motion:reduce) { .application-teaser-card__image { transition:none; } .application-teaser-card:hover .application-teaser-card__image,.application-teaser-card:focus-within .application-teaser-card__image { transform:none; } }
@media (max-width:48rem) {
  .application-hero { min-height:31rem; padding-block:var(--s8); }
  .application-hero::before { background-image:linear-gradient(90deg,rgba(8,13,20,.94),rgba(8,13,20,.78)),linear-gradient(0deg,rgba(8,13,20,.62),transparent 78%),var(--application-hero-image); background-position:62% center; }
  .application-grid { grid-template-columns:minmax(0,1fr); }
}