/* ==========================================================================
   Tristar Enterprises — site.css
   1. Tokens          5. Hero + slider      9. Cross-link / CTA
   2. Base            6. Feature block     10. Footer
   3. Layout          7. Chips / specs     11. Forms
   4. Header / nav    8. Cards / grids     12. Utilities + motion
   ========================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root {
  /* colour */
  --ink:            #0B1B2B;
  --ink-deep:       #07131E;
  --ink-raise:      #12293D;
  --ink-muted:      #33465A;
  --ink-soft:       #5B6E82;
  --surface:        #FFFFFF;
  --surface-alt:    #F2F0EC;
  --line:           rgba(11, 27, 43, 0.10);
  --line-strong:    rgba(11, 27, 43, 0.22);
  --line-dark:      rgba(255, 255, 255, 0.14);
  --accent:         #C8862A;   /* fills, borders, marks — never small text on white */
  --accent-lift:    #DFA24A;   /* primary button hover fill                          */
  --accent-hover:   #6E460C;   /* hover for accent-coloured text on light surfaces   */
  --accent-ink:     #8A5A12;   /* accent used as text on light surfaces (AA 5.9:1)   */
  --accent-on-dark: #E0A64B;   /* accent used as text on ink surfaces (AA 8.1:1)     */
  --on-dark:        #FFFFFF;
  --on-dark-muted:  rgba(255, 255, 255, 0.72);
  --error:          #B3261E;   /* form and chat error text and borders */
  --glow:           #3E7398;   /* the cool second glow in the footer      */

  /* type */
  --font-sans: "Google Sans Flex", "Inter", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-h1:      clamp(2.5rem, 5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      1.25rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8125rem;
  --fs-index:   0.875rem;
  /* One size for every piece of header and footer chrome: nav links, the
     dropdown buttons, the header button, footer headings, links and the legal
     row. The dropdown buttons used to inherit body size and sat 2px larger. */
  --fs-nav:     0.9375rem;

  /* space scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 140 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 140px;

  /* structure */
  --container:  1280px;
  --gutter:     clamp(20px, 5vw, 64px);
  --section-y:  clamp(64px, 10vw, 140px);
  --header-h:   76px;
  --tabs-h:     60px;
  /* Shape rule, used everywhere: buttons and pills are fully round, cards
     and pop-ups take 20px, inputs and small inner items 12px. */
  --radius:      12px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  --shadow:     0 18px 40px rgba(7, 19, 30, 0.10);
  --ease:       cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast:     200ms;
  --t-base:     250ms;
  --t-slow:     600ms;
}

@media (min-width: 1024px) { :root { --header-h: 80px; } }

/* 2. BASE --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* No blue "tap highlight" box when tapping links and buttons on phones
   (Chrome/Android, Safari/iOS). Buttons and links show their own pressed
   and hover states instead. */
html { -webkit-tap-highlight-color: transparent; }
/* No focus ring after a mouse click or a tap. Keyboard users still get the
   ring (:focus-visible), which the site styles in its own accent colour. */
:focus:not(:focus-visible) { outline: none; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0, "wdth" 100, "GRAD" 0, "ROND" 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img, svg, video { display: block; max-width: 100%; }
/* Media slot — the resolver swaps <img> and <video> inside this wrapper, so
   both must fill it identically whichever one wins. */
.media { position: relative; width: 100%; height: 100%; }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; display: block; }
[hidden] { display: none !important; }
img, video { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; color: inherit; }
/* Hero and main headings, and the header/nav chrome, are set in caps per the
   house style; the hero's supporting sentence and all long-form copy stay
   in sentence case, because a paragraph in capitals reads slowly. */
h1, .hero__h2, .eyebrow, .nav__link, .nav__parent, .header-cta,
.mobile-nav__list a { text-transform: uppercase; }
/* Uppercase widens text ~10-15%, which can force an ugly mid-word break at
   narrow widths; prefer wrapping at whole words, falling back to a hyphen
   only when a single word can't fit. */
h1, .hero__h2 { overflow-wrap: normal; word-break: normal; hyphens: auto; }
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
p  { margin: 0 0 var(--s-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
/* Inline links only inside running text — never in chrome (header, footer, nav). */
.prose a:not(.link), .form__note a, .form__status a:not(.btn), .section__head p a, .block__body p a {
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
}
.prose a:not(.link):hover, .form__note a:hover, .form__status a:not(.btn):hover,
.section__head p a:hover, .block__body p a:hover { color: var(--accent-hover); }
.section--ink .section__head p a, .section--ink .block__body p a { color: var(--accent-on-dark); }
strong { font-weight: 600; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
::selection { background: var(--accent); color: #fff; }

/* 3. LAYOUT ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt  { background: var(--surface-alt); }
.section--ink  { background: var(--ink); color: var(--on-dark); }
.section--ink h2, .section--ink h3 { color: var(--on-dark); }
.section--tight-top { padding-block-start: 0; }

.section__head { max-width: 62ch; margin-bottom: var(--s-7); }
.section__head p { color: var(--ink-muted); margin-top: var(--s-4); }
.section--ink .section__head p { color: var(--on-dark-muted); }

.eyebrow {
  display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.eyebrow::before {
  content: ""; flex: 0 0 auto;
  width: 28px; height: 1px; background: currentColor;
}
.section--ink .eyebrow, .hero .eyebrow { color: var(--accent-on-dark); }

.lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--ink-muted); max-width: 60ch; }
.muted { color: var(--ink-muted); }
.section--ink .muted { color: var(--on-dark-muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 14px var(--s-5);
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-lift); }
.btn--arrow svg { transition: transform var(--t-fast) var(--ease); }
.btn--arrow:hover svg { transform: translateX(4px); }
.btn--ghost { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-raise); }
/* Needs an explicit background: a <button> otherwise takes the UA default. */
.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

/* Text link with rule */
/* Text + arrow, not an underline — arrow steps 4px right on hover, matching
   the .card__arrow / .tile motion language used everywhere else. */
.link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-small);
  color: var(--accent-ink);
  transition: color var(--t-fast) var(--ease);
}
.link::after {
  content: "";
  width: 16px; height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M10.5 1 15 5l-4.5 4M15 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M10.5 1 15 5l-4.5 4M15 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-fast) var(--ease);
}
.link:hover { color: var(--accent-hover); }
.link:hover::after { transform: translateX(4px); }
.section--ink .link, .hero .link { color: var(--accent-on-dark); }
.section--ink .link:hover, .hero .link:hover { color: #fff; }

/* Skip link */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); font-size: var(--fs-small); font-weight: 600;
}
.skip-link:focus { top: var(--s-4); }

/* 4. HEADER / NAV -------------------------------------------------------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.site-header__inner { display: flex; align-items: center; gap: var(--s-6); width: 100%; }
.site-header.is-top { background: transparent; }
.site-header.is-solid { background: var(--ink-deep); border-bottom-color: var(--line-dark); }

.site-header__logo { display: block; flex: 0 0 auto; }
/* One logo size for the header and the open mobile menu, so the logo does
   not change when the menu opens. */
:root { --logo-h: 46px; }
.site-header__logo img, .mobile-nav__top img { width: auto; height: var(--logo-h); }
/* The solid bar is the ink token, so both header states are dark grounds and
   both carry the light lockup. The standard dark lockup ships for light
   contexts (documents, print, a white-header theme variant). */
.site-header__logo .logo--dark { display: none; }
.site-header__logo .logo--light { display: block; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); }
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--s-2);
  font-size: var(--fs-nav); font-weight: 500; line-height: 1.5; letter-spacing: 0.04em; color: #fff;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--accent-on-dark); }
.nav__link.is-active { color: var(--accent-on-dark); }
.nav__link.is-active::after, .nav__link:hover::after { transform: scaleX(1); }

.nav__item--has-panel { position: relative; }
.nav__parent { display: inline-flex; align-items: center; gap: var(--s-2); background: none; border: 0; font: inherit; cursor: pointer;
  font-size: var(--fs-nav); font-weight: 500; line-height: 1.5; letter-spacing: 0.04em; color: #fff; }
.nav__caret { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.nav__item--has-panel.is-open .nav__caret { transform: translateY(1px) rotate(-135deg); }

.nav__panel {
  position: absolute; top: calc(100% + var(--s-3)); left: -20px; min-width: 248px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: var(--s-2); border-radius: var(--radius-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.nav__item--has-panel.is-open .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel a {
  display: block; padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small); color: var(--ink); border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__panel a:hover, .nav__panel a.is-active { background: var(--surface-alt); color: var(--accent-ink); }

.header-cta { flex: 0 0 auto; font-size: var(--fs-nav); letter-spacing: 0.04em; padding-block: 12px; }
.nav-toggle {
  display: none; flex: 0 0 auto; margin-inline-start: auto;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; margin-block: 5px; transition: background-color var(--t-base) var(--ease); }

/* Mobile overlay */
.mobile-nav {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ink-deep); color: #fff;
  transform: translateX(100%);
  transition: transform 300ms var(--ease);
  display: flex; flex-direction: column;
  /* 16px top: the logo and close button land exactly where the header's
     logo and menu button were, so opening the menu does not shift them. */
  padding: 16px var(--gutter) var(--s-8);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.mobile-nav__close { width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.mobile-nav__list { margin-block: var(--s-8) var(--s-6); display: grid; gap: var(--s-5); }
.mobile-nav__list a { color: #fff; font-size: 1.5rem; font-weight: 500; }
.mobile-nav__list a.is-active { color: var(--accent-on-dark); }
.mobile-nav__meta { margin-top: auto; color: var(--on-dark-muted); font-size: var(--fs-small); display: grid; gap: var(--s-2); }
.mobile-nav__meta a { color: var(--on-dark-muted); }
.mobile-nav__meta a:hover { color: var(--accent-on-dark); }

@media (max-width: 1023px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: block; }
  :root { --logo-h: 40px; }
}
@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* 5. HERO + SLIDER ------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(460px, 68vh, 720px);
  padding-block: calc(var(--header-h) + var(--s-8)) var(--s-9);
  color: #fff; background: var(--ink); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,19,30,0.72) 0%, rgba(7,19,30,0.42) 40%, rgba(7,19,30,0.88) 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--ink-deep) 72%, transparent) 0%, color-mix(in srgb, var(--ink-deep) 42%, transparent) 40%, color-mix(in srgb, var(--ink-deep) 88%, transparent) 100%);
}
/* Dark pool anchored behind the text block, 80% opacity fading to 0% moving
   right across the hero — a second, distinct overlay from .hero__overlay
   (which darkens top/bottom for legibility everywhere); this one is the
   "pop" vignette specifically behind the heading. */
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 18% 55%, rgba(5,13,21,0.8) 0%, rgba(5,13,21,0.45) 45%, rgba(5,13,21,0) 80%); background: radial-gradient(60% 90% at 18% 55%, color-mix(in srgb, var(--ink-deep) 80%, transparent) 0%, color-mix(in srgb, var(--ink-deep) 45%, transparent) 45%, color-mix(in srgb, var(--ink-deep) 0%, transparent) 80%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__index {
  font-size: var(--fs-index); font-variant-numeric: tabular-nums;
  color: var(--accent-on-dark); letter-spacing: 0.08em; margin-bottom: var(--s-5);
}
.hero h1 { max-width: 20ch; }
.hero__h2 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.02em; max-width: 20ch; color: #fff; }
.hero__deck { margin-top: var(--s-5); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--on-dark-muted); max-width: 58ch; }
.hero__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4); }

.breadcrumb { margin-bottom: var(--s-5); font-size: var(--fs-small); color: var(--on-dark-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--s-3); color: rgba(255,255,255,0.4); }
.breadcrumb a { color: var(--on-dark-muted); }
.breadcrumb a:hover { color: var(--accent-on-dark); }
.breadcrumb [aria-current] { color: #fff; }

/* Home slider */
.hero--slider { min-height: 100vh; min-height: 100svh; align-items: center; }
.slider__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow);
}
.slider__slide.is-active { opacity: 1; visibility: visible; }
.slider__slide img, .slider__slide video { width: 100%; height: 100%; object-fit: cover; }
.slider__content { position: relative; z-index: 3; width: 100%; }
.slider__panel { display: none; }
.slider__panel.is-active { display: block; }
/* Counter and dots take the bottom-left; the play/pause control owns the
   bottom-right on every hero and CTA. */
.slider__controls {
  position: relative; z-index: 4; margin-top: var(--s-6);
  display: flex; align-items: center; gap: var(--s-5);
}
.slider__count { font-size: var(--fs-index); font-variant-numeric: tabular-nums; color: #fff; letter-spacing: 0.1em; }
.slider__dots { display: flex; gap: var(--s-3); }
.slider__dot {
  width: 40px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.35);
  transition: background-color var(--t-fast) var(--ease);
}
.slider__dot.is-active { background: var(--accent); }
.slider__dot:focus-visible { outline-offset: 6px; }

/* Play/pause control for a motion slot — square, ink-on-glass, matching the
   button language rather than a floating translucent circle. Hidden by JS
   whenever the slot resolved to a still, so it is never a dead control. */
.media-toggle {
  position: absolute; z-index: 4; right: var(--gutter); bottom: var(--s-6);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(7, 19, 30, 0.55); background: color-mix(in srgb, var(--ink-deep) 55%, transparent);
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  color: #fff; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.media-toggle:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
/* Downloading — a spinner inside the button, in place of the glyph, so the
   wait is visibly acknowledged whether the download started on its own or
   because someone tapped. The button is inert meanwhile, so hover holds the
   resting colours rather than offering an interaction that does nothing. */
.media-toggle.is-loading { cursor: progress; }
.media-toggle.is-loading:hover {
  background: rgba(7, 19, 30, 0.55); background: color-mix(in srgb, var(--ink-deep) 55%, transparent); border-color: var(--line-dark); color: #fff;
}
.media-toggle.is-loading::before {
  content: ""; width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--accent);
  border-radius: 50%; animation: media-spin 700ms linear infinite;
}
@keyframes media-spin { to { transform: rotate(360deg); } }
/* Still an arc rather than a spin, which reads as busy next to aria-busy. */
@media (prefers-reduced-motion: reduce) { .media-toggle.is-loading::before { animation: none; } }
.media-toggle .icon-play { margin-left: 2px; }
/* The icon that is coming in scales up as it fades, so the state change reads
   as a change rather than a swap. */
.media-toggle .icon-play, .media-toggle .icon-pause {
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.media-toggle[aria-pressed="false"] .icon-play,
.media-toggle[aria-pressed="true"] .icon-pause { transform: scale(1); opacity: 1; }
.media-toggle .icon-play[hidden], .media-toggle .icon-pause[hidden] { transform: scale(0.6); opacity: 0; }
/* Paused reads at a glance: a slow accent ring behind the button. Excluded
   while loading — that state also carries aria-pressed="false", and with equal
   specificity on the same pseudo-element this rule won on source order and
   silently replaced the spinner with the paused pulse. */
.media-toggle[aria-pressed="false"]:not(.is-loading)::after {
  content: ""; position: absolute; inset: -4px;
  border: 1px solid var(--accent); border-radius: inherit;
  animation: media-pulse 2.4s var(--ease) infinite;
}
@keyframes media-pulse {
  0%   { opacity: 0.9; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .media-toggle[aria-pressed="false"]:not(.is-loading)::after { animation: none; }
  .media-toggle .icon-play, .media-toggle .icon-pause { transition: none; }
}

/* 6. FEATURE BLOCK ------------------------------------------------------- */
.block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.block + .block { margin-top: var(--section-y); }
.block__media { position: relative; }
.block__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.block__body h2 { margin-bottom: var(--s-5); }
.block__body p + p { margin-top: var(--s-4); }
.block__body p { color: var(--ink-muted); }
.section--ink .block__body p { color: var(--on-dark-muted); }
.block__actions { margin-top: var(--s-6); }
/* Mirrored variant — single mechanism: order on the media child */
.block--mirror .block__media { order: 2; }
@media (max-width: 899px) {
  .block { grid-template-columns: 1fr; gap: var(--s-6); }
  .block__media, .block--mirror .block__media { order: -1; }
}

/* 7. CHIPS / SPEC PROFILE ------------------------------------------------ */
.chips__list { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.chips__list li {
  display: inline-flex; align-items: center;
  padding: 10px var(--s-4);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: var(--fs-small); color: var(--ink);
}
.section--ink .chips__list li { border-color: var(--line-dark); color: #fff; }
.chips__actions { margin-top: var(--s-6); }

/* "Trade profile" card — rounded, shadowed, single column, tight label/value
   rows, replacing the earlier full-bleed bordered-row grid. */
.specs {
  display: block;
  padding: var(--s-6);
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.specs__eyebrow {
  display: block; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.06em;
  color: var(--accent-ink); margin-bottom: var(--s-4);
}
.specs__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-3); border-bottom: 1px solid var(--line);
}
.specs__row:last-child { border-bottom: 0; }
.specs dt { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft); flex: 0 0 auto; }
.specs dd { margin: 0; color: var(--ink); font-weight: 500; text-align: right; }
.specs__flag { color: var(--accent-ink); font-weight: 600; }

/* Definition list — company facts / contact details */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.facts > div { background: var(--ink); padding: var(--s-5); }
.facts dt { font-size: var(--fs-eyebrow); color: var(--accent-on-dark); letter-spacing: 0.04em; margin-bottom: var(--s-2); }
.facts dd { margin: 0; color: #fff; }

/* Itemised list */
.list-items { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.list-items li { padding-left: var(--s-5); position: relative; color: var(--ink-muted); }
.list-items li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--accent); }
.section--ink .list-items li { color: var(--on-dark-muted); }

/* 8. CARDS / GRIDS ------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); }
.card {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--ink-muted); font-size: var(--fs-small); }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__arrow { margin-top: var(--s-5); display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); }
.card__arrow svg { transition: transform var(--t-fast) var(--ease); }
.card:hover, .card:focus-within { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover .card__arrow svg, .card:focus-within .card__arrow svg { transform: translateX(4px); }
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.card__link:focus-visible { outline: none; }
.card--media { padding: 0; overflow: hidden; }
.card--media .card__media { aspect-ratio: 16 / 10; }
.card--media .card__media img, .card--media .card__media video { width: 100%; height: 100%; object-fit: cover; }
.card--media .card__body { padding: var(--s-6); }
.section--ink .card { background: var(--ink-raise); border-color: var(--line-dark); }
.section--ink .card p { color: var(--on-dark-muted); }
.section--ink .card__arrow { color: var(--accent-on-dark); }

/* Tile strip (commodities) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.tile {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-6) var(--s-5); background: var(--surface-alt);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.tile svg { color: var(--accent); transition: transform var(--t-fast) var(--ease); }
.tile:hover, .tile:focus-visible { border-color: var(--accent); transform: translateY(-4px); background: var(--surface); }
.tile:hover svg, .tile:focus-visible svg { transform: translateX(4px); }

/* Plain feature list (why us / values) */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-7) var(--s-6); }
.points__item h3 { margin-bottom: var(--s-3); }
.points__item p { color: var(--ink-muted); font-size: var(--fs-small); }
.section--ink .points__item p { color: var(--on-dark-muted); }
.points__item { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.section--ink .points__item { border-top-color: var(--line-dark); }

/* Numbered sequence — renewable project delivery ONLY */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); counter-reset: step; }
.steps__item { border-top: 2px solid var(--accent); padding-top: var(--s-5); }
.steps__no { display: block; font-size: var(--fs-index); font-variant-numeric: tabular-nums; color: var(--accent-on-dark); margin-bottom: var(--s-3); letter-spacing: 0.08em; }
.steps__item h3 { margin-bottom: var(--s-3); }
.steps__item p { font-size: var(--fs-small); color: var(--on-dark-muted); }

/* 9. CROSS-LINK / CTA ---------------------------------------------------- */
.crosslink__head { margin-bottom: var(--s-7); max-width: 56ch; }
.crosslink__head h2 { margin-block: var(--s-3) var(--s-4); }
.crosslink__head p { color: var(--ink-muted); }

.cta-band { position: relative; background: var(--ink); color: #fff; padding-block: var(--section-y); overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; }
.cta-band__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
/* Text left, the single button right and vertically centred. */
.cta-band__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.cta-band__body { max-width: 34ch; display: grid; gap: var(--s-5); }
.cta-band__action { justify-self: end; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-dark-muted); }
@media (max-width: 899px) {
  .cta-band__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .cta-band__action { justify-self: start; }
}

/* Sticky anchor tabs (catalogue) */
.anchor-tabs {
  position: sticky; top: var(--header-h); z-index: 60;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.anchor-tabs__list { display: flex; gap: var(--s-6); overflow-x: auto; scrollbar-width: none; height: var(--tabs-h); align-items: center; }
.anchor-tabs__list::-webkit-scrollbar { display: none; }
.anchor-tabs a {
  position: relative; white-space: nowrap; font-size: var(--fs-small); font-weight: 500;
  color: var(--ink-muted); padding-block: var(--s-2);
  transition: color var(--t-fast) var(--ease);
}
.anchor-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
.anchor-tabs a:hover { color: var(--ink); }
.anchor-tabs a.is-active { color: var(--accent-ink); }
.anchor-tabs a.is-active::after { transform: scaleX(1); }

.group { scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + 24px); }
.group + .group { margin-top: var(--section-y); }
.group__head { display: grid; gap: var(--s-4); max-width: 68ch; margin-bottom: var(--s-6); }
/* Per group: the image spans the full content width, then the product text
   and the trade-profile card sit below it as equal halves. */
.group__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.group__image { grid-column: 1 / -1; margin-bottom: var(--s-2); }
.group__image .media { aspect-ratio: 21 / 9; border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 899px) {
  /* Stacked: image → product detail text → spec card. Grid items honour
     `order` the same as flex items, so no layout-mode switch is needed. */
  .group__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .group__image { order: -2; margin-bottom: 0; }
  .group__image .media { aspect-ratio: 3 / 4; }
  .group__grid > div:not(.group__image):first-of-type { order: -1; }
}

/* 10. FOOTER -------------------------------------------------------------
   Contact first: four tiles for the four ways to reach the desk. Then the
   brand and three short link groups (the old five-column link farm is gone),
   the legal row, and a large faint wordmark that closes the page. The
   wordmark is decorative and is also the space the chat button floats over,
   so the button never covers a link. Type in the footer uses the header's
   size (--fs-nav) throughout. */
.site-footer {
  position: relative; overflow: hidden;
  color: var(--on-dark-muted);
  /* Two soft glows, gold top-left and blue top-right. Sized in px, not %, so
     they stay round on a tall phone footer instead of stretching into
     vertical streaks down the edges. --foot-glow-* shrink them on phones. */
  --foot-glow-a: 820px 440px; --foot-glow-b: 600px 400px; --foot-glow-b-y: 280px;
  background: radial-gradient(var(--foot-glow-a) at 0% 0%, rgba(200, 134, 42, 0.10), rgba(200, 134, 42, 0) 70%),
    radial-gradient(var(--foot-glow-b) at 100% var(--foot-glow-b-y), rgba(62, 115, 152, 0.10), rgba(62, 115, 152, 0) 70%),
    var(--ink-deep); background: radial-gradient(var(--foot-glow-a) at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 70%),
    radial-gradient(var(--foot-glow-b) at 100% var(--foot-glow-b-y), color-mix(in srgb, var(--glow) 10%, transparent), color-mix(in srgb, var(--glow) 0%, transparent) 70%),
    var(--ink-deep);
  padding-top: var(--s-9);
}
.site-footer a { transition: color var(--t-fast) var(--ease); }

.foot-contact__title { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; margin-bottom: var(--s-6); }
.foot-contact__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.foot-tile {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  height: 100%; min-height: 132px; padding: var(--s-5) var(--s-5) var(--s-5);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease), transform 400ms var(--ease);
}
.foot-tile:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(224, 166, 75, 0.45); border-color: color-mix(in srgb, var(--accent-on-dark) 45%, transparent); transform: translateY(-2px); }
.foot-tile__label { font-size: var(--fs-small); color: var(--on-dark-muted); padding-right: 48px; }
.foot-tile__value { margin-top: auto; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: #fff; overflow-wrap: break-word; }
.foot-tile__go {
  position: absolute; top: var(--s-4); right: var(--s-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, 0.08);
  transition: background-color 400ms var(--ease), color 400ms var(--ease), transform 400ms var(--ease);
}
.foot-tile__go svg { transform: rotate(-45deg); }
.foot-tile:hover .foot-tile__go { background: var(--accent); color: var(--ink); transform: translate(2px, -2px); }

.foot-main {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: var(--s-8);
  margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line-dark);
}
.foot-brand img { width: auto; height: 52px; margin-bottom: var(--s-5); }
.foot-brand p { font-size: var(--fs-nav); max-width: 34ch; }
.foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.foot-nav__title {
  font-size: var(--fs-nav); line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 500; color: #fff; margin-bottom: var(--s-4);
}
.foot-nav li + li { margin-top: var(--s-3); }
.foot-nav a { font-size: var(--fs-nav); color: var(--on-dark-muted); }
.foot-nav a:hover, .site-footer__legal a:hover { color: var(--accent-on-dark); }

/* Copyright and the three legal links read as one pipe-separated line. It only
   wraps on small phones, where forcing one line would overflow. */
.site-footer__legal {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line-dark);
  font-size: var(--fs-nav);
}
.site-footer__legal ul { display: flex; align-items: baseline; gap: var(--s-4); }
.site-footer__legal li { white-space: nowrap; }
.site-footer__legal a { font-size: inherit; color: var(--on-dark-muted); }
.site-footer__legal li + li::before { content: "|"; margin-inline-end: var(--s-4); color: rgba(255, 255, 255, 0.28); }

.foot-mark {
  margin-top: var(--s-7); margin-bottom: -0.14em;
  font-size: clamp(4.25rem, 16vw, 15rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.02em;
  text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 90%);
  -webkit-background-clip: text; background-clip: text;
}

@media (max-width: 767px) and (min-width: 600px) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1099px) {
  .foot-contact__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-main { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 599px) {
  .site-footer { padding-top: var(--s-8); --foot-glow-a: 520px 420px; --foot-glow-b: 440px 440px; --foot-glow-b-y: 360px; }
  .foot-contact__tiles { grid-template-columns: 1fr; }
  .foot-tile { min-height: 0; padding: var(--s-4) var(--s-5); }
  .foot-tile__value { margin-top: 0; }
  .foot-main { margin-top: var(--s-8); padding-top: var(--s-7); }
  .foot-nav { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .site-footer__legal ul { flex-wrap: wrap; row-gap: var(--s-2); column-gap: var(--s-5); }
  .site-footer__legal li:first-child { flex-basis: 100%; }
  .site-footer__legal li + li::before { content: none; }
  .foot-mark { margin-top: var(--s-6); }
}

/* 11. FORMS -------------------------------------------------------------- */
/* Enquiry: heading and intro on the left, fields on the right. */
.enquiry { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.enquiry__intro .section__head { margin-bottom: var(--s-5); }
@media (max-width: 899px) { .enquiry { grid-template-columns: 1fr; gap: var(--s-7); } }
.form { display: grid; gap: var(--s-5); }
.form__note { font-size: var(--fs-small); color: var(--ink-muted); border-left: 2px solid var(--accent); padding-left: var(--s-4); max-width: 60ch; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 699px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.field .req { color: var(--accent-ink); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-small); color: var(--ink);
  padding: 13px var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,134,42,0.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { font-size: 0.875rem; color: var(--error); min-height: 0; }
.field__error:empty { display: none; }
/* Honeypot. Taken off screen rather than display:none or hidden, because a
   bot worth catching skips fields the browser reports as hidden. It is out of
   the tab order and aria-hidden, so nobody using the form ever meets it. */
.form__trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Sent, or not sent — replaces the form in place. */
.form__status {
  padding: var(--s-6); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface-alt);
}
.form__status:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.form__status h2 { font-size: 1.5rem; margin-bottom: var(--s-3); }
.form__status p { max-width: 58ch; }
.form__status p + p { margin-top: var(--s-4); }
.form__status--ok { border-color: var(--accent); }
.form__status-mark { color: var(--accent-ink); display: block; margin-bottom: var(--s-4); }
.form__status-alt { font-size: var(--fs-small); color: var(--ink-muted); }
/* The thank-you arrives after the reveal has run, so it carries its own
   entrance: one soft rise, then still. */
.form__status { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.form__status--ok { animation: form-thanks 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes form-thanks { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.form__status .form__status-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.form__status .form__status-actions .btn { text-decoration: none; }
@media (max-width: 599px) {
  .form__status { padding: var(--s-5); }
  .form__status h2 { font-size: 1.25rem; }
}

/* FAQ — native <details>, so it opens without JavaScript, is keyboard
   operable for free, and the answers stay in the DOM where a crawler reads
   them. */
.faq { display: grid; gap: 0; max-width: 80ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; gap: var(--s-4);
  /* Comfortably past the 44px minimum tap target on a phone. */
  padding: var(--s-5) 0; min-height: 44px;
  font-weight: 500; font-size: 1.0625rem; line-height: 1.45;
  color: var(--ink); cursor: pointer; list-style: none;
  transition: color var(--t-fast) var(--ease);
}
/* Suppress both spellings of the native marker so ours is the only one. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { color: var(--accent-ink); }
.faq__q:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* Only the question text grows. This has to name the label rather than say
   `.faq__q span`, which would also match the icon — and beat its own
   `flex: 0 0 auto` on specificity, stretching the icon across the row and
   turning its two bars into a long rule and a tall vertical line. */
.faq__label { flex: 1 1 auto; min-width: 0; }
/* Plus turning to minus. margin-top nudges it onto the first line of a
   question that wraps to two or three lines on a narrow screen. */
.faq__icon {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
  position: relative; color: var(--accent-ink);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1.5px; background: currentColor;
  /* translateY centres the bar on the midpoint; `inset: 50%` would put its top
     edge there and sit it half a stroke low. */
  transform: translateY(-50%);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translateY(-50%) rotate(0); opacity: 0; }
.faq__a { padding: 0 0 var(--s-5); color: var(--ink-soft); max-width: 68ch; }
.faq__a p + p { margin-top: var(--s-4); }
@media (max-width: 599px) {
  .faq__q { font-size: 1rem; gap: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .faq__icon::before, .faq__icon::after { transition: none; }
}

/* Contact details */
/* Head-office panel: bordered fact rows on the left, an embedded map on the
   right — replaces the earlier 6-card grid + separate location photo. */
.office-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.office-panel__heading { margin-block: var(--s-3) var(--s-6); text-transform: none; }
.office-facts { border-top: 1px solid var(--line); }
.office-facts__row { display: flex; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.office-facts dt { font-size: var(--fs-eyebrow); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; flex: 0 0 auto; }
.office-facts dd { margin: 0; text-align: right; color: var(--ink); }
.office-facts a { color: var(--ink); }
.office-facts a:hover { color: var(--accent-ink); }
.office-panel__maplink { margin-top: var(--s-6); }
.office-panel__map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.office-panel__map iframe { width: 100%; height: 100%; border: 0; }
.office-panel__footnote { margin-top: var(--s-6); }
@media (max-width: 899px) { .office-panel { grid-template-columns: 1fr; gap: var(--s-6); } }
/* Narrow screens can't fit a label and a long value (an email address, a
   packing spec) on one row — stack them instead of letting them overflow. */
@media (max-width: 599px) {
  .office-facts__row, .specs__row { display: block; }
  .office-facts dd, .specs dd { text-align: left; margin-top: var(--s-2); }
}

/* Legal pages */
.prose { max-width: 72ch; }
.prose h2 { margin-block: var(--s-7) var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul { display: grid; gap: var(--s-3); margin-block: var(--s-4); }
.prose li { padding-left: var(--s-5); position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--accent); }
.page-head { padding-block: calc(var(--header-h) + var(--s-8)) var(--s-7); background: var(--surface-alt); }
.notfound__code {
  font-size: clamp(5rem, 18vw, 11rem); line-height: 0.9; font-weight: 600;
  letter-spacing: -0.04em; color: var(--accent); margin: var(--s-4) 0 var(--s-5);
}
.notfound__links { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.notfound__links li { padding-left: 0; }
.notfound__links li::before { content: none; }

/* 12. UTILITIES + MOTION -------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.no-scroll { overflow: hidden; }

/* Bottom-right rail: cookie preferences sits above back-to-top so neither
   covers the other. Both buttons are the same size. */
.button-rail {
  position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.rail-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: var(--accent); color: var(--ink);
  border: 1px solid rgba(11, 27, 43, 0.18); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 50%;
  cursor: pointer; box-shadow: var(--shadow);
  transition: background-color var(--t-fast) var(--ease), opacity 300ms ease, transform 300ms ease, visibility 300ms;
}
.rail-btn:hover { background: var(--accent-lift); }
/* Back-to-top only appears once the reader is well down the page. While it is
   away it collapses to nothing — height and the flex gap it contributes — so
   the cookie button drops into the bottom position instead of hovering above
   an empty square, then slides back up when back-to-top returns. Transitioning
   height and margin rather than toggling display keeps that a movement rather
   than a jump. */
.scroll-top {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  /* border-width too: a 1px border top and bottom is still 2px of rail even
     at zero height, which leaves the cookie button just off the bottom. */
  height: 0; border-width: 0; margin-top: calc(var(--s-3) * -1); overflow: hidden;
  transition: background-color var(--t-fast) var(--ease), opacity 300ms ease,
              transform 300ms ease, height 300ms var(--ease),
              border-width 300ms var(--ease), margin-top 300ms var(--ease),
              visibility 300ms;
}
.scroll-top.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0);
  height: 48px; border-width: 1px; margin-top: 0;
}
.cookie-button { background: var(--ink); color: #fff; border-color: var(--line-dark); }
.cookie-button:hover { background: var(--ink-raise); }

/* Consent box — sits above the rail until a choice is made. */
.cookie {
  position: fixed; right: var(--s-6); bottom: calc(var(--s-6) + 48px + var(--s-4));
  z-index: 95; width: min(360px, calc(100vw - var(--s-6) * 2));
  padding: var(--s-5);
  background: var(--ink); color: var(--on-dark-muted);
  border: 1px solid var(--line-dark); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.cookie.is-open { opacity: 1; transform: translateY(0); }
.cookie__text { font-size: var(--fs-small); margin-bottom: var(--s-5); }
.cookie__text a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; gap: var(--s-3); }
.cookie__actions .btn { flex: 1 1 auto; justify-content: center; }
.cookie__actions .btn--outline { border-color: var(--line-dark); color: #fff; }
.cookie__actions .btn--outline:hover { border-color: #fff; }
@media (max-width: 599px) {
  .cookie { right: var(--s-4); left: var(--s-4); width: auto; }
  .button-rail { right: var(--s-4); bottom: var(--s-4); }
}

/* Cinematic reveal ------------------------------------------------------
   Text, buttons and in-page images arrive over 300ms — on first load, on
   reload, and as each one scrolls into view. The `has-reveal` class is set by
   js/reveal-init.js in <head> before first paint, so with JavaScript off
   nothing is ever hidden. */
.has-reveal :is(h1, h2, h3, h4, p, li, .eyebrow, .btn, .link, .card, img) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.has-reveal :is(h1, h2, h3, h4, p, li, .eyebrow, .btn, .link, .card, img).is-visible,
.has-reveal .is-visible :is(h1, h2, h3, h4, p, li, .eyebrow, .btn, .link, img) {
  opacity: 1;
  transform: translateY(0);
}
/* Primary focal points stay put: hero and CTA images and video never animate
   in, so the thing the eye lands on first is stable from the first frame. */
.has-reveal :is(.hero__media, .cta-band__media) :is(img, video, .media, .media *) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* Chrome that must never flicker. */
.has-reveal :is(.site-header, .mobile-nav, .scroll-top, .cookie, .media-toggle, .anchor-tabs, .chat-panel, .chat-launcher, .form__status) :is(h1, h2, h3, h4, p, li, img, .btn, .link) {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .card:hover, .tile:hover { transform: none; }
}
@media print {
  .site-header, .mobile-nav, .cta-band, .hero__media, .anchor-tabs { display: none !important; }
  body { color: #000; }
}

/* 13. RESTRUCTURED NAVIGATION + PAGE COMPONENTS -------------------------
   Added with the information-architecture rebuild. Everything here reuses the
   existing tokens, spacing scale, easing and transition timings — this is new
   structure in the established visual language, not a new design system. */

/* Mega-menu. Shares the .is-open hook and timing of the simple .nav__panel it
   replaces, so the dropdown behaviour and its JS are unchanged. */
.nav__mega {
  position: absolute; top: calc(100% + var(--s-3)); left: 50%;
  width: min(680px, calc(100vw - var(--gutter) * 2));
  transform: translate(-50%, -6px);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-radius: var(--radius-lg); padding: var(--s-6);
  opacity: 0; visibility: hidden;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.nav__item--has-panel.is-open .nav__mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__mega-inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s-6); align-items: start; }
.nav__mega-lead { border-right: 1px solid var(--line); padding-right: var(--s-6); }
.nav__mega-lead p { font-size: var(--fs-small); color: var(--ink-muted); margin: var(--s-3) 0 0; }
.nav__mega-title {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-small); color: var(--accent-ink);
  text-transform: none; letter-spacing: 0;
}
.nav__mega-title svg { transition: transform var(--t-fast) var(--ease); }
.nav__mega-title:hover svg { transform: translateX(4px); }
.nav__mega-list { display: grid; gap: var(--s-1); }
.nav__mega-list a {
  display: block; padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease);
}
.nav__mega-list a:hover, .nav__mega-list a:focus-visible { background: var(--surface-alt); }
.nav__mega-name { display: block; font-weight: 500; color: var(--ink); }
.nav__mega-list a:hover .nav__mega-name { color: var(--accent-ink); }
.nav__mega-note { display: block; font-size: var(--fs-eyebrow); color: var(--ink-soft); margin-top: 2px; }

/* Mobile: Trading and Renewable Energy expand in place. */
.mobile-nav__parent {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 1.5rem; font-weight: 500; color: #fff;
  text-transform: uppercase; text-align: left;
}
.mobile-nav__caret {
  flex: 0 0 auto; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.mobile-nav__parent[aria-expanded="true"] { color: var(--accent-on-dark); }
.mobile-nav__parent[aria-expanded="true"] .mobile-nav__caret { transform: translateY(2px) rotate(-135deg); }
.mobile-nav__sub { display: grid; gap: var(--s-4); margin: var(--s-4) 0 0 var(--s-4); padding-left: var(--s-4); border-left: 1px solid var(--line-dark); }
.mobile-nav__sub a { font-size: 1.0625rem; font-weight: 400; color: var(--on-dark-muted); text-transform: none; }
.mobile-nav__sub a:hover { color: #fff; }

/* Product / technology / service cards. */
.card--product { display: flex; }
.card--product .card__body { display: flex; flex-direction: column; }
.card__meta {
  margin-top: var(--s-3); font-size: var(--fs-eyebrow); color: var(--ink-soft);
  line-height: 1.5;
}
.card__meta span {
  display: block; color: var(--ink); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6875rem;
  margin-bottom: 2px;
}
.card--product .card__arrow { margin-top: auto; padding-top: var(--s-5); }

/* Steps and points sit on light sections now as well as ink ones. */
.steps__item p { color: var(--ink-muted); }
.steps__no { color: var(--accent-ink); }
.section--ink .steps__item p { color: var(--on-dark-muted); }
.section--ink .steps__no { color: var(--accent-on-dark); }
.section--ink .points__item p { color: var(--on-dark-muted); }
.section--ink .points__item { border-top-color: var(--line-dark); }

/* Sub-headings inside a long section, and a section-level CTA button. */
.section__sub { margin-top: var(--s-8); margin-bottom: var(--s-5); max-width: 62ch; }
.section__sub h3 { font-size: 1.375rem; }
.section__sub p { margin-top: var(--s-3); color: var(--ink-muted); }
.section__cta { margin-top: var(--s-7); }

/* A spec table that runs the full column rather than sitting in a half. */
.spec-wide .specs { max-width: 960px; }
.chips__intro { max-width: 62ch; color: var(--ink-muted); margin-top: var(--s-4); }

@media (max-width: 899px) {
  .nav__mega-inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .nav__mega-lead { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: var(--s-5); }
}
@media (max-width: 599px) {
  .section__sub { margin-top: var(--s-7); }
  .card__meta { font-size: 0.8125rem; }
}


/* 14. REFINEMENT PASS ------------------------------------------------------
   Anti-template pass: type that wraps well, tactile controls, a hero that
   fits its viewport, and tap targets that meet 44px. Same tokens, same
   language; nothing here introduces a new colour or radius. */

/* Headings balance their lines; running text avoids a one-word last line. */
h1, h2, h3, .hero__h2 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Inner-page hero: the headline is capped at three lines on desktop by giving
   it a wider measure and a scale planned against the photograph. */
.hero h1, .hero .hero__h2 {
  font-size: clamp(2.125rem, 4vw, 3.5rem);
  max-width: 24ch; line-height: 1.04;
}
.hero { min-height: clamp(460px, 68vh, 720px); min-height: clamp(460px, 68dvh, 720px); }
.hero--slider { min-height: 100vh; min-height: 100dvh; }
.hero__deck { max-width: 52ch; }

/* Press feedback: a pixel of travel, so a click reads as a click. */
.btn:active, .rail-btn:active, .tile:active, .chat-launcher:active { transform: translateY(1px); }

/* Slider: the counter was a second, redundant pager beside the dots; it stays
   for screen readers only. The dots keep their 3px bar but take a 44px hit
   area. */
.slider__count {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.slider__dot { position: relative; height: 44px; background: none; }
.slider__dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%);
  background: rgba(255,255,255,0.35); transition: background-color var(--t-fast) var(--ease);
}
.slider__dot.is-active { background: none; }
.slider__dot.is-active::before { background: var(--accent); }

/* Section heads without their old labels: the heading carries the section. */
.section__head h2, .block__body h2, .chips h2, .crosslink__head h2 { margin-top: 0; }

/* Cookie notice on a phone: a compact bottom sheet that leaves the hero CTA
   visible instead of a tall card over the middle of the screen. */
@media (max-width: 599px) {
  .cookie {
    left: var(--s-4); right: var(--s-4); bottom: var(--s-4); width: auto;
    padding: var(--s-4);
  }
  .cookie__text { font-size: 0.875rem; margin-bottom: var(--s-3); }
  .cookie__actions .btn { padding-block: 10px; }
}

/* Grids fill their rows. A grid holds exactly as many cells as it has items
   and no row ends in a hole: 4 and 8 run four across, 6 and 9 three across,
   5 splits 3 + 2 and 7 splits 4 + 3, each row spanning the full width. The
   auto-fit rules above remain the fallback where :has() is unsupported. */
@media (min-width: 1100px) {
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(3):last-child),
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(6):last-child),
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(4):last-child),
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(7):last-child) > * { grid-column: span 3; }
  :is(.card-grid, .points, .steps, .tiles, .facts):has(> :nth-child(7):last-child) > :nth-child(n+5) { grid-column: span 4; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  :is(.card-grid, .points, .steps, .tiles, .facts) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.card-grid, .points, .steps, .tiles, .facts) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Specification sheet: label above value, two columns, left-aligned. Still the rounded trade-profile card; the
   right-aligned value column wrapped into ragged lines, and a rule under
   every row is the laziest form a spec sheet can take. */
.spec-wide .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
.spec-wide .specs__row { display: block; border: 0; padding: 0; }
.spec-wide .specs dt { margin-bottom: var(--s-2); text-transform: uppercase; letter-spacing: 0.06em; }
.spec-wide .specs dd { text-align: left; font-weight: 400; line-height: 1.5; }
@media (max-width: 699px) { .spec-wide .specs { grid-template-columns: 1fr; gap: var(--s-5); } }

/* 15. FAQ INDEX ------------------------------------------------------------
   One page for every question on the site: a search field, a topic list that
   sticks beside the answers on desktop and scrolls sideways on a phone. */
.breadcrumb--light { color: var(--ink-soft); }
.breadcrumb--light a { color: var(--ink-soft); }
.breadcrumb--light a:hover { color: var(--accent-ink); }
.breadcrumb--light [aria-current] { color: var(--ink); }
.breadcrumb--light li + li::before { color: var(--line-strong); }
.faq-head h1 { max-width: 20ch; }
.faq-head__lead { margin-top: var(--s-4); color: var(--ink-muted); font-size: 1.125rem; }
.faq-search { margin-top: var(--s-6); max-width: 640px; display: grid; gap: var(--s-2); }
.faq-search__label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.faq-search__input {
  width: 100%; min-height: 52px; padding: 12px var(--s-4);
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.faq-search__input::placeholder { color: var(--ink-soft); }
.faq-search__input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(200, 134, 42, 0.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.faq-search__count { min-height: 1.5em; font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }

.faq-index__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.faq-index__nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.faq-index__nav ul { display: grid; gap: 2px; }
.faq-index__nav a {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: 10px var(--s-3); border-radius: var(--radius);
  font-size: var(--fs-small); color: var(--ink-muted);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq-index__nav a span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.faq-index__nav a:hover, .faq-index__nav a.is-current { background: var(--surface-alt); color: var(--ink); }
.faq-index__nav a.is-current { box-shadow: inset 2px 0 0 var(--accent); }
.faq-index__groups { display: grid; gap: var(--s-8); }
.faq-group { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.faq-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.faq-group__head h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); }
.faq-group .faq { max-width: none; }
.faq-empty { padding: var(--s-7); background: var(--surface-alt); border-radius: var(--radius-lg); }
.faq-empty h2 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.faq-empty p { color: var(--ink-muted); }
.faq-empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

@media (max-width: 899px) {
  .faq-index__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .faq-index__nav {
    position: sticky; top: var(--header-h); z-index: 5;
    margin-inline: calc(var(--gutter) * -1); padding: var(--s-3) var(--gutter);
    background: var(--surface); border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .faq-index__nav::-webkit-scrollbar { display: none; }
  .faq-index__nav ul { display: flex; gap: var(--s-2); width: max-content; }
  .faq-index__nav a { border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 14px; white-space: nowrap; }
  .faq-index__nav a.is-current { box-shadow: none; border-color: var(--accent); }
}

/* 16. CHAT ASSISTANT ---------------------------------------------------------
   Bottom-left, opposite the cookie / back-to-top rail. Same ink, accent and
   radius as the rest of the site: a 4px panel, pill-free buttons, square-ish
   bubbles. The panel is built by js/chat.js on first open. */
.chat-launcher {
  position: fixed; left: var(--s-6); bottom: var(--s-6); z-index: 90;
  display: inline-flex; align-items: center; gap: var(--s-3);
  height: 52px; padding: 0 var(--s-5) 0 var(--s-4);
  font: inherit; font-size: var(--fs-nav); font-weight: 600; letter-spacing: 0.01em;
  color: #fff; background: var(--ink);
  border: 1px solid var(--line-dark); border-radius: 26px;
  box-shadow: 0 14px 34px rgba(7, 19, 30, 0.28); box-shadow: 0 14px 34px color-mix(in srgb, var(--ink-deep) 28%, transparent);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-base) var(--ease);
}
.chat-launcher:hover { background: var(--ink-raise); }
.chat-launcher__icon { color: var(--accent-on-dark); flex: 0 0 auto; }
.chat-launcher[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.chat-launcher[aria-expanded="true"] { background: var(--ink-raise); }

.chat-panel {
  position: fixed; left: var(--s-6); bottom: calc(var(--s-6) + 52px + var(--s-3)); z-index: 110;
  width: min(384px, calc(100vw - var(--s-6) * 2));
  height: min(580px, calc(100vh - 140px)); height: min(580px, calc(100dvh - 140px));
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(7, 19, 30, 0.28); box-shadow: 0 24px 60px color-mix(in srgb, var(--ink-deep) 28%, transparent);
  opacity: 0; transform: translateY(12px); transform-origin: bottom left;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.chat-panel.is-open { opacity: 1; transform: translateY(0); }
.chat-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--ink); color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.chat-head__mark {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius);
  background: url("../assets/image/logo/tristar-mark-light.svg") center / 22px no-repeat, var(--ink-raise);
}
.chat-head__titles { flex: 1 1 auto; min-width: 0; }
.chat-head__title { font-size: var(--fs-nav); font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.chat-head__sub { margin: 0; font-size: 0.8125rem; color: var(--on-dark-muted); }
.chat-head__btn {
  flex: 0 0 auto; min-width: 36px; height: 36px; padding: 0 var(--s-2);
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 0.8125rem; color: var(--on-dark-muted);
  background: none; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
}
.chat-head__btn:hover { color: #fff; border-color: var(--line-dark); }

.chat-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--surface-alt);
}
.chat-log:focus-visible { outline-offset: -3px; }
.chat-msg { display: flex; flex-direction: column; gap: var(--s-2); max-width: 88%; }
.chat-msg--user { align-self: flex-end; align-items: flex-end; }
.chat-msg--bot { align-self: flex-start; }
.chat-bubble {
  margin: 0; padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small); line-height: 1.55;
  border-radius: 10px; overflow-wrap: anywhere;
}
.chat-msg--bot .chat-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top-left-radius: 2px; }
.chat-msg--user .chat-bubble { background: var(--ink); color: #fff; border-top-right-radius: 2px; }
.chat-bubble p { margin: 0; max-width: none; }
.chat-bubble p + p { margin-top: var(--s-2); }
.chat-bubble__title { font-weight: 600; }

.chat-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chat-action {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chat-action:hover { border-color: var(--accent); color: var(--accent-ink); }
.chat-action.is-primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.chat-action.is-primary:hover { background: var(--accent-lift); color: var(--ink); }

.chat-suggest, .chat-related { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chat-related__label { flex: 1 0 100%; margin: var(--s-1) 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.chat-chip {
  min-height: 34px; padding: 6px 12px; text-align: left;
  font: inherit; font-size: 0.875rem; color: var(--ink);
  background: transparent; border: 1px solid var(--line-strong); border-radius: 17px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chat-chip:hover { border-color: var(--accent); background: var(--surface); }

.chat-typing { flex-direction: row; gap: 4px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; border-top-left-radius: 2px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: chat-dot 1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.chat-form { display: flex; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--line); background: var(--surface); }
.chat-input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 1rem; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
}
.chat-input::placeholder { color: var(--ink-soft); }
.chat-input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(200, 134, 42, 0.22); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.chat-send {
  flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--accent); border: 0; border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chat-send:hover { background: var(--accent-lift); }
.chat-send:active { transform: translateY(1px); }
.chat-foot { margin: 0; padding: 0 var(--s-4) var(--s-3); font-size: 0.8125rem; color: var(--ink-soft); background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.chat-foot a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 599px) {
  .chat-launcher { left: var(--s-4); bottom: var(--s-4); width: 52px; padding: 0; justify-content: center; }
  .chat-launcher__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* The consent sheet spans the bottom of a phone; the button waits. */
  .cookie.is-open ~ .chat-launcher { opacity: 0; pointer-events: none; }
  .chat-panel {
    left: var(--s-2); right: var(--s-2); bottom: var(--s-2); width: auto;
    height: calc(100vh - 72px); height: calc(100dvh - 72px);
  }
  .chat-is-open .chat-launcher { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel { transition: none; }
  .chat-typing span { animation: none; }
}
@media print { .chat-launcher, .chat-panel { display: none !important; } }
.faq-index { padding-top: var(--s-8); }
@media (max-width: 899px) { .faq-index { padding-top: var(--s-5); } .faq-index__groups { gap: var(--s-7); } }


/* 17. SOFT SHAPES ------------------------------------------------------------
   Rounder, softer controls and pop-ups (Taste soft-skill, applied in the
   site's own palette). One rule, followed everywhere:
     pill (999px)  buttons, CTAs, chips, toggles, the chat button
     20px          cards, tiles, images, menus, cookie box, chat panel
     12px          inputs, list rows inside menus, chat bubbles' tails aside */
.btn, .header-cta, .chat-action, .chat-send, .skip-link, .media-toggle,
.cookie__actions .btn, .faq-empty .btn { border-radius: var(--radius-pill); }
.btn { padding: 13px var(--s-5); }
/* Button-in-button: the arrow sits in its own small round well, flush with
   the button's inner edge, and nudges forward on hover. */
.btn--arrow { padding-right: 7px; gap: var(--s-4); }
.btn--arrow svg {
  box-sizing: content-box; width: 14px; height: 9px; padding: 11px 10px;
  border-radius: 50%; background: rgba(11, 27, 43, 0.12); background: color-mix(in srgb, var(--ink) 12%, transparent);
  transition: transform 400ms var(--ease), background-color var(--t-fast) var(--ease);
}
.btn--ghost.btn--arrow svg, .btn--ink.btn--arrow svg { background: rgba(255, 255, 255, 0.14); }
.btn--outline.btn--arrow svg { background: var(--surface-alt); }
.btn--arrow:hover svg { transform: translate(3px, -1px) scale(1.05); }
.btn:active, .header-cta:active { transform: scale(0.98); }
.header-cta { padding-inline: var(--s-5); }

/* Cards, panels and pop-ups: 20px and a soft, diffuse ink-tinted shadow. */
.card, .tile, .nav__mega, .nav__panel, .cookie, .chat-panel, .faq-empty,
.spec-wide .specs, .office-panel__map, .group__image .media { border-radius: var(--radius-lg); }
.card { overflow: hidden; }
.block__media img, .block__media .media { border-radius: var(--radius-lg); }
.card__media, .card__media img { border-radius: 0; }
.facts { border-radius: var(--radius-lg); overflow: hidden; }
.nav__mega, .cookie, .chat-panel { box-shadow: 0 30px 70px -20px rgba(7, 19, 30, 0.35), 0 0 0 1px rgba(7, 19, 30, 0.04); box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--ink-deep) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--ink-deep) 4%, transparent); }
.chat-head { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.chat-foot { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.chat-head__mark { border-radius: 10px; }
.chat-bubble { border-radius: 16px; }
.chat-msg--bot .chat-bubble, .chat-typing { border-top-left-radius: 6px; }
.chat-msg--user .chat-bubble { border-top-right-radius: 6px; }
.chat-chip { border-radius: var(--radius-pill); }
.chat-input, .faq-search__input, .field input, .field select, .field textarea { border-radius: var(--radius); }
.nav__mega-list a, .nav__panel a, .faq-index__nav a { border-radius: var(--radius); }
@media (max-width: 899px) { .faq-index__nav a { border-radius: var(--radius-pill); } }

/* Pop-ups open with a little spring rather than a flat fade. */
.cookie { transform-origin: bottom right; }
.cookie.is-open { animation: soft-pop 420ms var(--ease) both; }
@keyframes soft-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


@media (prefers-reduced-motion: reduce) {
  .cookie.is-open { animation: none; }
  .btn--arrow:hover svg { transform: none; }
}

/* Chat: the name-and-email step, and messages that pop in. */
.chat-gate { flex: 1 1 auto; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); background: var(--surface-alt); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.chat-gate[hidden] { display: none; }
.chat-gate .chat-msg { max-width: 100%; }
.chat-gate__field { display: grid; gap: 6px; }
.chat-gate__label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.chat-gate__error { margin: 0; min-height: 0; font-size: 0.8125rem; color: var(--error); }
.chat-gate__error:empty { display: none; }
.chat-gate .chat-input[aria-invalid="true"] { border-color: var(--error); }
.chat-gate__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.chat-gate__note { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }
.chat-gate__note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.chat-gate__go { justify-content: center; width: 100%; }
.chat-foot__change {
  padding: 0; font: inherit; color: var(--accent-ink); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.chat-msg { animation: chat-pop 380ms var(--ease) both; }
.chat-msg--bot { transform-origin: bottom left; }
.chat-msg--user { transform-origin: bottom right; }
.chat-actions, .chat-suggest, .chat-related { animation: chat-pop 380ms var(--ease) 90ms both; }
@keyframes chat-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
  70%  { opacity: 1; transform: translateY(-1px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-panel { transform-origin: bottom left; }
.chat-panel.is-open { animation: soft-pop 360ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .chat-msg, .chat-actions, .chat-suggest, .chat-related, .chat-panel.is-open { animation: none; }
}

/* Home hero: the bottom of the hero is kept clear for the chat button, and
   on short screens (laptops at 1366x657, phones in a short browser) the type
   scales with the screen height, so the headline, button and slide bars all
   sit above the chat button instead of behind it. */
.hero--slider { padding-bottom: calc(var(--s-6) + 52px + var(--s-6) + var(--s-3)); }
@media (max-width: 599px) { .hero--slider { padding-bottom: calc(var(--s-4) + 52px + var(--s-5)); } }
.chat-foot__who { display: block; margin-top: 2px; }

/* 18. MOBILE HERO HEIGHT --------------------------------------------------
   On phones and tablets the hero is as tall as its content, not a share of
   the screen: the fixed minimum height and the desktop padding left 230px
   or more of empty photo under the text. The home slider stacks its panels
   in one grid cell so the hero takes the height of the longest slide and
   does not jump as the slides change. */
.slider__content { display: grid; }
.slider__panel, .slider__panel.is-active { display: block; grid-row: 1; grid-column: 1; align-self: end; }
.slider__panel { visibility: hidden; opacity: 0; transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow); }
.slider__panel.is-active { visibility: visible; opacity: 1; }
.slider__controls { grid-row: 2; grid-column: 1; }
@media (max-width: 899px) {
  .hero, .hero--slider { min-height: 0; }
  .hero { padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-7); }
  .hero--slider { padding-bottom: calc(var(--s-6) + 52px + var(--s-5)); }
  .page-head { padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-6); }
  .hero__actions { margin-top: var(--s-6); }
}
@media (max-width: 599px) {
  .hero--slider { padding-bottom: calc(var(--s-4) + 52px + var(--s-5)); }
}

/* 19. FLOATING ISLAND HEADER -----------------------------------------------
   Over a hero the header stays clear. Once the page scrolls (or on pages
   without a hero) it becomes a floating, frosted pill set in from the edges,
   instead of a bar glued to the top of the window (Taste soft-skill). */
.site-header__inner {
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease),
              box-shadow 500ms var(--ease), height 500ms var(--ease), padding 500ms var(--ease);
  border: 1px solid transparent; border-radius: var(--radius-pill);
}
.site-header.is-solid { background: transparent; border-bottom-color: transparent; }
.site-header.is-solid .site-header__inner {
  width: min(calc(100% - 2 * var(--s-3)), calc(var(--container) - 2 * var(--s-5)));
  height: calc(var(--header-h) - 2 * var(--s-2));
  padding-inline: var(--s-5) var(--s-2);
  background: rgba(7, 19, 30, 0.86); background: color-mix(in srgb, var(--ink-deep) 86%, transparent);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px -18px rgba(7, 19, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink-deep) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-solid .site-header__inner {
    background: rgba(7, 19, 30, 0.84); background: color-mix(in srgb, var(--ink-deep) 84%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  }
}
.site-header.is-solid .header-cta { padding-block: 10px; }
@media (max-width: 1023px) {
  .site-header.is-solid .site-header__inner { padding-inline: var(--s-5) var(--s-3); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-solid .site-header__inner { background: var(--ink-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Cards lift a touch under the pointer: movement that answers the hover. */
.card--product, .card--media, .tile {
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .card--product:hover, .card--media:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(7, 19, 30, 0.35); box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ink-deep) 35%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .card--product:hover, .card--media:hover { transform: none; }
}

/* 20. BUTTON HOVER -----------------------------------------------------------
   A fill rises from the bottom of the pill in the site's own pair of
   colours: ink on light grounds, white on dark ones (hero, CTA bands, ink
   sections, footer, cookie box), amber on ink buttons. Text and the arrow's
   well flip with it, so the label stays readable through the whole move. */
.btn { position: relative; overflow: hidden; isolation: isolate; --btn-fill: var(--ink); --btn-on-fill: #fff; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill); border-radius: inherit;
  transform: translateY(102%);
  transition: transform 520ms var(--ease);
}
.btn { transition: color 380ms var(--ease), border-color 380ms var(--ease), background-color 380ms var(--ease), transform var(--t-fast) var(--ease); }
.btn:focus-visible::before { transform: translateY(0); }
.btn:focus-visible { color: var(--btn-on-fill); border-color: var(--btn-fill); }
/* The fill follows a mouse only. A tap on a phone would leave a button
   "hovered" and filled after the finger lifts, so touch screens keep the
   plain buttons and the press-down feedback. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: translateY(0); }
  .btn:hover { color: var(--btn-on-fill); border-color: var(--btn-fill); }
}
/* The base fills no longer change on hover; the rising fill does the work. */
.btn--primary:hover { background: var(--accent); }
.btn--ghost:hover { background: transparent; }
.btn--ink:hover { background: var(--ink); }
.btn--outline:hover { color: var(--btn-on-fill); }

.btn--ink { --btn-fill: var(--accent); --btn-on-fill: var(--ink); }
:is(.hero, .cta-band, .section--ink, .site-header, .site-footer, .cookie, .mobile-nav) .btn,
.btn--ghost { --btn-fill: #fff; --btn-on-fill: var(--ink); }
:is(.hero, .cta-band, .section--ink, .site-header, .site-footer, .cookie, .mobile-nav) .btn--ink { --btn-fill: var(--accent); --btn-on-fill: var(--ink); }

.btn--arrow:focus-visible svg { background: rgba(255, 255, 255, 0.16); }
@media (hover: hover) and (pointer: fine) { .btn--arrow:hover svg { background: rgba(255, 255, 255, 0.16); } }
:is(.hero, .cta-band, .section--ink, .site-header, .site-footer, .cookie, .mobile-nav) .btn--arrow:hover svg,
.btn--ghost.btn--arrow:hover svg, .btn--ink.btn--arrow:hover svg { background: rgba(11, 27, 43, 0.12); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.btn[disabled]::before { transform: translateY(102%); }
@media (prefers-reduced-motion: reduce) { .btn::before { transition: none; } }

/* 21. HOME HERO CONTROLS ROW -------------------------------------------------
   The slide bars and the play/pause button share one row at the foot of the
   hero: bars on the left, button on the right, centred on the same line at
   every screen size. The row sits above the chat and cookie buttons, and
   the hero's bottom padding keeps the text clear of the row. The headline and
   intro use the same sizes as the inner pages. */
.hero--slider {
  --ctl-bottom: calc(var(--s-6) + 52px + var(--s-4));
  padding-bottom: calc(var(--ctl-bottom) + 44px + var(--s-6));
}
.hero--slider .slider__controls {
  position: absolute; z-index: 4; left: var(--gutter); bottom: var(--ctl-bottom);
  height: 44px; margin: 0; display: flex; align-items: center; justify-content: flex-start;
}
.hero--slider .media-toggle { bottom: var(--ctl-bottom); right: var(--gutter); }
@media (max-width: 599px) {
  .hero--slider { --ctl-bottom: calc(var(--s-4) + 52px + var(--s-3)); padding-bottom: calc(var(--ctl-bottom) + 44px + var(--s-5)); }
}

/* 22. HOME HERO ON PHONES AND TABLETS ----------------------------------------
   Built like the inner pages (/trading/rice/): as tall as its content, text
   starting just under the header, no screen-height minimum. The slide bars
   and the play/pause button form one row directly under the text, bars left,
   button right. */
@media (max-width: 899px) {
  .hero--slider {
    --ctl-bottom: var(--s-6);
    min-height: 0; align-items: flex-start;
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: calc(var(--ctl-bottom) + 44px + var(--s-5));
  }
  .hero--slider .slider__panel, .hero--slider .slider__panel.is-active { align-self: start; }
}

/* 23. PRIVATE LABEL ------------------------------------------------------------
   The Rice page's private-label section, and the link card to it on the home
   page. Same tokens, radii and colours as the rest of the site. */
.checklist { display: grid; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0; }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist li { position: relative; padding-left: 26px; font-size: var(--fs-small); color: var(--ink); line-height: 1.5; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 0.35em; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.section--ink .checklist li, .pl-close .checklist li { color: #fff; }
.pl-note { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-muted); }
.pl-varieties .block__body h3, .pl-panel h3, .pl-duo h3, .pl-close h3 { font-size: 1.375rem; margin-bottom: var(--s-3); }
.pl-varieties .block__body > p:not(.pl-note) { color: var(--ink-muted); }

.pl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-8); }
.pl-panel {
  padding: var(--s-6); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: 0 20px 40px -28px rgba(7, 19, 30, 0.25); box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--ink-deep) 25%, transparent);
}
.pl-panel > p:first-of-type { color: var(--ink-muted); }
.pl-panel .chips__list { margin-top: var(--s-4); }
.pl-panel .chips__list li { background: var(--surface-alt); }

.pl-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); }
.pl-segments li { display: grid; gap: 4px; padding: var(--s-4) 0; border-top: 1px solid var(--line-strong); }
.pl-segments strong { font-size: 1.0625rem; color: var(--ink); }
.pl-segments span { font-size: var(--fs-small); color: var(--ink-muted); }

.pl-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); margin-top: var(--s-8); }
.pl-duo > div { padding-top: var(--s-5); border-top: 2px solid var(--accent); }
.pl-duo p { color: var(--ink-muted); }

.pl-close {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6);
  margin-top: var(--s-8); padding: var(--s-7); border-radius: var(--radius-lg);
  color: var(--on-dark-muted);
  background: radial-gradient(60% 80% at 100% 0%, rgba(200, 134, 42, 0.22), rgba(200, 134, 42, 0) 70%),
    var(--ink); background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 0%, transparent) 70%),
    var(--ink);
}
.pl-close h3 { color: #fff; }
.pl-close__line { margin-top: var(--s-3); color: #fff; font-weight: 500; }
.pl-close__action { margin: 0; }

@media (max-width: 899px) {
  .pl-pair, .pl-duo { grid-template-columns: 1fr; }
  .pl-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-close { grid-template-columns: 1fr; padding: var(--s-6); }
}
@media (max-width: 599px) {
  .checklist--2 { grid-template-columns: 1fr; }
  .pl-segments { grid-template-columns: 1fr; }
  .pl-panel { padding: var(--s-5); }
}

/* Home: the private-label link card. The whole card is the link. */
.feature-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch;
  border-radius: var(--radius-lg); overflow: hidden; color: inherit;
  background: var(--surface-alt); border: 1px solid var(--line);
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease), border-color var(--t-fast) var(--ease);
}
.feature-card__media { min-height: 320px; }
.feature-card__media .media, .feature-card__media img { height: 100%; }
.feature-card__media img { object-fit: cover; transition: transform 900ms var(--ease); }
.feature-card__body { display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: var(--s-7); }
.feature-card__body h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.feature-card__body > p { color: var(--ink-muted); }
.feature-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.feature-card__tags li {
  padding: 6px 12px; font-size: 0.875rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.feature-card__cta { display: inline-flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); font-weight: 600; color: var(--accent-ink); }
.feature-card__go {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent); color: var(--ink);
  transition: transform 450ms var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.feature-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) {
  .feature-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(7, 19, 30, 0.4); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink-deep) 40%, transparent); border-color: rgba(200, 134, 42, 0.5); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
  .feature-card:hover .feature-card__media img { transform: scale(1.04); }
  .feature-card:hover .feature-card__go { background: var(--ink); color: #fff; transform: translateX(4px); }
}
@media (max-width: 899px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-card__media { min-height: 0; aspect-ratio: 16 / 10; }
  .feature-card__body { padding: var(--s-6); }
}
@media (max-width: 599px) { .feature-card__body { padding: var(--s-5); } }
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card__media img, .feature-card__go { transition: none; }
  .feature-card:hover, .feature-card:hover .feature-card__media img { transform: none; }
}

/* Cards that lead somewhere are links from edge to edge (heading, text and
   the "Explore ..." arrow alike). The old stretched-link overlay sat inside
   the heading, and the heading's reveal transform trapped it there, so only
   the heading was clickable. */
a.card--link { color: inherit; text-decoration: none; cursor: pointer; }
a.card--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a.card--link h3 { color: var(--ink); transition: color var(--t-fast) var(--ease); }
.section--ink a.card--link h3 { color: var(--on-dark); }
@media (hover: hover) { a.card--link:hover h3 { color: var(--accent-ink); } .section--ink a.card--link:hover h3 { color: var(--accent-on-dark); } }

/* 24. NOT FOUND (404.shtml) ----------------------------------------------------
   The site's own dark hero, with the footer's faint wordmark as the "404". */
.nf-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(var(--header-h) + var(--s-9)) 0 var(--s-9);
  background:
    radial-gradient(55% 60% at 10% 0%, rgba(200, 134, 42, 0.16), rgba(200, 134, 42, 0) 70%),
    radial-gradient(45% 55% at 100% 100%, rgba(62, 115, 152, 0.18), rgba(62, 115, 152, 0) 70%),
    var(--ink-deep);
}
.nf-hero__mark {
  position: absolute; right: -0.04em; bottom: -0.18em; z-index: 0;
  font-size: clamp(9rem, 34vw, 30rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 85%);
  -webkit-background-clip: text; background-clip: text;
  user-select: none; pointer-events: none;
}
.nf-hero__inner { position: relative; z-index: 1; }
.nf-hero h1 { max-width: 16ch; font-size: clamp(2.125rem, 4vw, 3.5rem); line-height: 1.04; }
.nf-hero .hero__deck { max-width: 52ch; }
.nf-search { display: flex; gap: var(--s-2); max-width: 560px; margin-top: var(--s-6); }
.nf-search__input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px var(--s-5);
  font: inherit; color: #fff; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill);
}
.nf-search__input::placeholder { color: rgba(255, 255, 255, 0.55); }
.nf-search__input:focus { outline: none; border-color: var(--accent-on-dark); box-shadow: 0 0 0 3px rgba(200, 134, 42, 0.25); }
.nf-search__go { flex: 0 0 auto; }
@media (max-width: 899px) { .nf-hero { padding: calc(var(--header-h) + var(--s-7)) 0 var(--s-8); } }
@media (max-width: 599px) {
  .nf-search { flex-direction: column; }
  .nf-search__go { justify-content: center; }
}


/* 25. RISING FILL ON THE OTHER BUTTONS (desktop only) ---------------------------
   The same rising fill as .btn, on the round and small controls: chat button,
   cookie and back-to-top, video play/pause, and the chat's send, chips and
   actions. Done with a background gradient whose height grows, because
   several of these already use ::before / ::after (the video button's
   spinner). Each keeps its own resting colour; the fill is the site's other
   colour of the pair. Text links, menus and the slide bars are left as they
   are on purpose. */
@media (hover: hover) and (pointer: fine) {
  .chat-launcher, .rail-btn, .media-toggle, .chat-send, .chat-chip, .chat-action, .chat-head__btn {
    --fill: var(--ink); --fill-on: #fff;
    background-image: linear-gradient(var(--fill), var(--fill));
    background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  }
  .chat-launcher:hover, .rail-btn:hover, .media-toggle:hover, .chat-send:hover, .chat-chip:hover, .chat-action:hover, .chat-head__btn:hover {
    background-image: linear-gradient(var(--fill), var(--fill));
    background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 100%;
    color: var(--fill-on);
  }

  /* Resting colours (restated: older hover rules used the background
     shorthand, which would otherwise wipe the fill). */
  .chat-launcher, .chat-launcher:hover { background-color: var(--ink); --fill: var(--accent); --fill-on: var(--ink); }
  .chat-launcher:hover .chat-launcher__icon { color: var(--ink); }
  .chat-launcher__icon { transition: color 380ms var(--ease); }
  .cookie-button, .cookie-button:hover { background-color: var(--ink); --fill: var(--accent); --fill-on: var(--ink); }
  .scroll-top, .scroll-top:hover { background-color: var(--accent); --fill: var(--ink); --fill-on: #fff; }
  .media-toggle, .media-toggle:hover { background-color: rgba(7, 19, 30, 0.55); --fill: #fff; --fill-on: var(--ink); }
  .chat-send, .chat-send:hover { background-color: var(--accent); --fill: var(--ink); --fill-on: #fff; }
  .chat-chip, .chat-chip:hover { background-color: transparent; }
  .chat-chip:hover { border-color: var(--ink); }
  .chat-action, .chat-action:hover { background-color: var(--surface); }
  .chat-action:hover { border-color: var(--ink); }
  .chat-action.is-primary, .chat-action.is-primary:hover { background-color: var(--accent); }
  .chat-head__btn, .chat-head__btn:hover { background-color: transparent; --fill: rgba(255, 255, 255, 0.14); --fill-on: #fff; }

  /* Their transitions, restated with the fill added (a transition list
     cannot be extended, only replaced). */
  .chat-launcher { transition: background-size 520ms var(--ease), color 380ms var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-base) var(--ease); }
  .rail-btn { transition: background-size 520ms var(--ease), color 380ms var(--ease), opacity 300ms ease, transform 300ms ease, visibility 300ms; }
  .scroll-top {
    transition: background-size 520ms var(--ease), color 380ms var(--ease), opacity 300ms ease,
                transform 300ms ease, height 300ms var(--ease), border-width 300ms var(--ease),
                margin-top 300ms var(--ease), visibility 300ms;
  }
  .media-toggle { transition: background-size 520ms var(--ease), color 380ms var(--ease), border-color var(--t-fast) var(--ease); }
  .chat-send { transition: background-size 520ms var(--ease), color 380ms var(--ease), transform var(--t-fast) var(--ease); }
  .chat-chip, .chat-action, .chat-head__btn { transition: background-size 520ms var(--ease), color 380ms var(--ease), border-color 380ms var(--ease); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .chat-launcher, .rail-btn, .media-toggle, .chat-send, .chat-chip, .chat-action, .chat-head__btn { transition: none; }
}