/* ==========================================================================
   Astratech Solutions — Layout
   Container, grid, section rhythm and per-section structural layout.
   Deliberate asymmetry in the promise, standards and working sections.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

section[data-section] {
  padding-block: var(--space-section);
  /* Anchor targets land below the sticky header rather than under it. */
  scroll-margin-top: 5.5rem;
}

/* -- Section heads --------------------------------------------------------- */

.section-head {
  max-width: 62rem;
  margin-bottom: var(--space-7);
}

.section-title {
  font-size: var(--text-3xl);
  max-width: 22ch;
}

.section-title--on-dark { color: var(--color-text-on-dark); }

.section-intro {
  margin-top: var(--space-5);
  color: var(--color-text-secondary);
  max-width: 58ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.eyebrow--on-dark { color: var(--color-accent-300); }

/* -- Site header ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-hairline);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

/* Once the page has scrolled the header lifts off the content by a hair, so
   the boundary reads without a heavier rule. Class set in js/scroll.js. */
.site-header.is-scrolled {
  box-shadow: 0 12px 32px -24px rgba(7, 19, 22, 0.45);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

/* -- Wordmark --------------------------------------------------------------
   The company mark plus the name set in the body face, Title Case, with a
   weight step: "Astratech" carries the emphasis and "Solutions" recedes.

   It was previously the whole name lowercased in the display serif, inherited
   from the template this site was built from. That reads as a lifestyle brand,
   not as an exporter a buyer opens a letter of credit with — and the wonky
   serif fought the flat geometry of the mark. A clean grotesque in Title Case
   pairs with the mark and reads as a company name.

   Used at three scales — header, footer and legal pages — from one class. */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: var(--text-md);
  letter-spacing: -0.012em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text-primary);
}

/* Sized from the type, not in pixels, so the lockup holds together at every
   scale. The mark is 364x238, so height drives it and width follows. */
.wordmark__logo {
  height: 1.55em;
  width: auto;
  flex: none;
}

.wordmark__type { display: inline-block; }

.wordmark__a { font-weight: var(--weight-semibold); }

.wordmark__b {
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
}

/* On dark grounds the recessive half needs lifting, or it disappears. The
   mark carries its own colours and is left alone on both grounds. */
.wordmark--on-dark { color: var(--color-text-on-dark); }
.wordmark--on-dark .wordmark__b { color: var(--color-ink-200); }

.wordmark--lg { font-size: var(--text-xl); }

/* The desktop header — inline nav, header CTA, larger wordmark — switches on
   at 70rem rather than the 64rem the rest of the layout uses. At 64rem the six
   nav links, the wordmark and the CTA do not fit on one line: "Fish meal" and
   "How we work" broke onto two lines and the header grew by a third. Between
   64 and 70rem the page keeps the compact header with the menu button. */
@media (min-width: 70rem) {
  .wordmark { font-size: var(--text-lg); }
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Scoped to .site-header so this wins over the .btn display rule in
   components.css, which is loaded after this file and has equal specificity. */
.site-header .site-header__cta { display: none; white-space: nowrap; }

@media (min-width: 70rem) {
  .site-nav { display: flex; }
  .site-header .site-header__cta { display: inline-flex; }
}

/* Mobile nav panel */
@media (max-width: 69.999rem) {
  .site-nav[data-open="true"] {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-5) var(--container-pad) var(--space-6);
    background: var(--color-surface);
    border-bottom: var(--border-hairline);
  }
  .site-nav[data-open="true"] .site-nav__link {
    padding-block: var(--space-3);
    font-size: var(--text-md);
  }
}

/* -- 1. Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  overflow: clip;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  min-height: min(44rem, 88svh);
  padding-block: var(--space-8) var(--space-7);
}

@media (min-width: 48rem) {
  .hero__grid { padding-block: var(--space-9) var(--space-8); }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 44rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
}

/* The tricolour after "India": three stripes, cap-height tall, sitting on
   the baseline of the uppercase text beside it. Saffron, white and green are
   the flag's own values and are deliberately not tokens. */
.flag-in {
  display: inline-block;
  width: 1.08em;
  height: 0.72em;
  margin-left: 0.45em;
  vertical-align: 0;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(7, 19, 22, 0.35);
}

.hero__title {
  font-size: var(--text-4xl);
  max-width: 18ch;
  color: var(--color-text-on-dark);
}

.hero__lede {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  color: var(--color-text-on-dark-muted);
  max-width: 46ch;
  line-height: var(--leading-snug);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  /* The poster is painted here as well as on the video, so the video can
     fade in over it once it is actually playing (see animations.css) and a
     visitor who never gets the video — reduced motion, Data Saver, no JS —
     still sees a finished hero. Same crop and focal point as the video. */
  background: var(--color-surface-dark) url('../assets/images/hero-video-poster.webp') 61% center / cover no-repeat;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The clip is framed with its subject about 61% across. On a wide hero the box
   is wider than 16:9, so cover fills the width and this has no effect — the
   composition comes from the crop baked into the file. On a narrow, tall
   viewport the box is taller than 16:9, cover fills the height and crops the
   sides instead; without this the subject would fall outside the visible slice
   and the hero would be nothing but cloud. */
.hero__media video { object-position: 61% center; }

/* Mobile: text spans the full width, so the scrim is vertical and heavy
   behind the copy, easing off at the top where there is no text. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-ink-900) 55%, transparent) 0%,
    color-mix(in srgb, var(--color-ink-900) 86%, transparent) 42%,
    color-mix(in srgb, var(--color-ink-900) 96%, transparent) 100%
  );
}

/* Desktop: copy occupies the left columns, so the scrim is horizontal and
   releases across the right half to let the photograph read. */
@media (min-width: 64rem) {
  .hero__media::after {
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--color-ink-900) 94%, transparent) 0%,
      color-mix(in srgb, var(--color-ink-900) 86%, transparent) 34%,
      color-mix(in srgb, var(--color-ink-900) 58%, transparent) 62%,
      color-mix(in srgb, var(--color-ink-900) 30%, transparent) 86%,
      color-mix(in srgb, var(--color-ink-900) 40%, transparent) 100%
    );
  }
}

/* -- 4. The promise -------------------------------------------------------- */

.promise { background: var(--color-surface); }

.pillar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-7);
  border-top: var(--border-hairline);
}

/* The last pillar closes on the section padding, not on its own. */
.pillar:last-child { padding-bottom: 0; }

.pillar__index {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent-500);
  letter-spacing: var(--tracking-tight);
}

.pillar__title { font-size: var(--text-2xl); margin-bottom: var(--space-5); }

.pillar__lede {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-5);
  max-width: 54ch;
}

.pillar__text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  max-width: 62ch;
}

.pillar__points {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.pillar__points li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.pillar__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: var(--space-4);
  height: 1px;
  background: var(--color-accent-500);
}

.pillar__figure { margin: 0; }

.pillar__figure img {
  width: 100%;
  height: clamp(14rem, 26vw, 22rem);
  object-fit: cover;
}

.pillar__split {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-hairline);
}

.pillar__split-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-3);
}

.pillar__split-text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  max-width: 44ch;
}

/* Asymmetry: pillar A leads left with a figure right; pillar B is inset. */
@media (min-width: 64rem) {
  .pillar {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    row-gap: var(--space-6);
    padding-block: var(--space-8);
    align-items: start;
  }

  .pillar__index { grid-column: 1 / span 1; grid-row: 1; }

  /* Alternating rhythm: the figure sits right on the first pillar and left on
     the second, so neither block leaves an empty column standing. */
  .pillar--a .pillar__body   { grid-column: 2 / span 6;  grid-row: 1; }
  .pillar--a .pillar__figure { grid-column: 9 / span 4;  grid-row: 1; }

  .pillar--b .pillar__figure { grid-column: 2 / span 4;  grid-row: 1; }
  .pillar--b .pillar__body   { grid-column: 7 / span 6;  grid-row: 1; }

  .pillar__split { grid-template-columns: 1fr 1fr; }
}

/* -- 3. Product range ------------------------------------------------------ */

.range { background: var(--color-surface-alt); padding-bottom: var(--space-section-sm); }

.range__head { display: block; }
.range__head-cols { display: grid; gap: var(--space-5); }

/* the intro carries its own top margin in the single-column stack; in the
   two-column layout the shared baseline does the alignment instead */
.range__head-cols .section-intro { margin-top: 0; }

.range__rail-wrap { padding-block: var(--space-2) 0; }

.range__empty {
  padding-block: var(--space-8);
  color: var(--color-text-secondary);
}

@media (min-width: 64rem) {
  .range__head-cols {
    grid-template-columns: 1fr 26rem;
    /* first baselines line up, which is what "aligned" means for type of
       two different sizes — matching the box tops would not look aligned */
    align-items: baseline;
    gap: var(--space-8);
  }
}

/* -- 3b. Crossover feature (the sourcing and control section) ---------------
   A dark full-width band of its own, so how the company works at origin reads
   as a position rather than as another card. */

.crossover {
  background: var(--color-ink-700);
  color: var(--color-text-on-dark);
}

.crossover__grid { display: grid; gap: var(--space-7); }

.crossover__figure { margin: 0; }

.crossover__figure img {
  width: 100%;
  height: clamp(14rem, 34vw, 26rem);
  object-fit: cover;
}

.crossover__text {
  margin-top: var(--space-5);
  color: var(--color-text-on-dark-muted);
  max-width: 52ch;
}

.crossover__split {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hairline-dark);
}

.crossover__split-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: var(--space-3);
}

.crossover__split-text {
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-muted);
  max-width: 40ch;
}

.crossover__note {
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent-500);
  font-size: var(--text-sm);
  color: var(--color-text-on-dark);
  max-width: 46ch;
}

@media (min-width: 64rem) {
  .crossover__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    align-items: start;
  }
  /* asymmetric: image runs off the left edge of the text column */
  .crossover__figure { grid-column: 1 / span 5; }
  .crossover__body { grid-column: 7 / span 6; }
  .crossover__split { grid-template-columns: 1fr 1fr; }
  .crossover__figure img { height: clamp(20rem, 30vw, 30rem); }
}

/* -- 5. Standards ----------------------------------------------- */

.standards {
  background: var(--color-surface-dark);
  color: var(--color-text-on-dark);
  padding-bottom: 0;
}

.standards__grid { display: grid; gap: var(--space-8); }

.standards__intro {
  margin-top: var(--space-5);
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-sm);
  max-width: 34ch;
}

.standards__list { display: grid; gap: var(--space-6); }

.qitem { padding-top: var(--space-5); border-top: var(--border-hairline-dark); }

.qitem__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: var(--space-3);
}

.qitem__text {
  color: var(--color-text-on-dark-muted);
  max-width: 62ch;
  font-size: var(--text-sm);
}

.qitem--emphasis .qitem__text { color: var(--color-text-on-dark); }

@media (min-width: 64rem) {
  .standards__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
  }
  .standards__aside { grid-column: 1 / span 4; }
  .standards__list {
    grid-column: 6 / span 7;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--grid-gutter);
  }
  .qitem--emphasis { grid-column: 1 / -1; }
}

/* Sticky label pins within its section then releases at the section end. */
.section-label {
  position: sticky;
  top: calc(var(--space-8) + var(--space-3));
}

/* -- 6. Working with us -------------------------------------------------------- */

.working { background: var(--color-surface); }

.working__grid { display: grid; gap: var(--space-8); }

.working__note {
  margin-top: var(--space-5);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent-500);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  max-width: 34ch;
}

.working__steps { display: grid; gap: var(--space-7); }

.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}

.step__num {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-500);
}

/* Title and body both sit in the second column. Without this the third child
   would wrap onto a new row and land back in the narrow number column. */
.step__title {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-lg);
  align-self: baseline;
}
.step__text { grid-column: 2; grid-row: 2; }

.step__text {
  color: var(--color-text-secondary);
  max-width: 60ch;
  font-size: var(--text-sm);
}

/* Loading ports and destinations. Deliberately a flat set of labelled lists
   rather than a map: a buyer wants to read the port name their forwarder will
   recognise, and a stylised map of India answers a question nobody asked. */
.ports {
  display: grid;
  gap: var(--space-6) var(--grid-gutter);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-hairline);
}

.ports__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-3);
}

.ports__list {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.ports__note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 62ch;
}

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

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

.working__figure { margin: var(--space-8) 0 0; }

.working__figure img {
  width: 100%;
  height: clamp(12rem, 26vw, 22rem);
  object-fit: cover;
}

@media (min-width: 64rem) {
  .working__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
  }
  .working__aside { grid-column: 1 / span 4; }
  .working__steps { grid-column: 6 / span 7; }
}

/* -- 7. Contact ------------------------------------------------------------ */

.contact {
  background: var(--color-ink-900);
  color: var(--color-text-on-dark);
  /* Contact and footer share a ground, so their paddings add up visually.
     The section gives up most of its bottom padding to the footer's top. */
  padding-bottom: var(--space-section-sm);
}

.contact__grid { display: grid; gap: var(--space-8); }

.contact__text {
  margin-top: var(--space-5);
  color: var(--color-text-on-dark-muted);
  max-width: 46ch;
}

.contact__direct {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-hairline-dark);
}

.contact__direct-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: var(--space-3);
}

.contact__direct-line {
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-sm);
}

/* Same treatment as the footer legal block: these sit on their own lines under
   a label, so the underline adds noise rather than clarity. It resolves on
   hover, where it confirms the target. */
.contact__direct-line a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.contact__direct-line a:hover,
.contact__direct-line a:focus-visible {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-accent-500);
}

@media (min-width: 64rem) {
  .contact__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
  }
  .contact__intro { grid-column: 1 / span 5; }
  .enquiry { grid-column: 7 / span 6; }
}

/* -- Product pages (products/<id>.html, generated) ------------------------- */

.product-page { background: var(--color-surface); }

.product-page__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.product-page__crumbs a { text-decoration: none; }
.product-page__crumbs a:hover { color: var(--color-text-primary); }
.product-page__crumbs li + li::before { content: '›'; margin-right: var(--space-2); color: var(--color-accent-500); }

.product-page__grid { display: grid; gap: var(--space-7); }

/* Grid items default to min-width:auto, so the grade table's minimum width
   would force the column — and the page — wider than the viewport. */
.product-page__figure,
.product-page__body { min-width: 0; }

.product-page__figure { margin: 0; background: var(--color-ground-200); }

.product-page__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-page__hs {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-2);
  background: var(--color-ink-900);
  color: var(--color-accent-300);
  border-radius: var(--radius-sm);
}

.product-page__title { font-size: var(--text-3xl); max-width: 18ch; }

.product-page__subtitle {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
}

.product-page__description {
  margin-top: var(--space-5);
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.product-page__subhead {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-600);
  padding-top: var(--space-5);
  margin: var(--space-6) 0 var(--space-4);
  border-top: var(--border-hairline);
}

.product-page__callout {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  padding: var(--space-5);
  background: var(--color-ink-900);
  color: var(--color-text-on-dark);
  margin: var(--space-6) 0 var(--space-5);
  border-left: 2px solid var(--color-accent-500);
  max-width: 62ch;
}

.product-page__note {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding: var(--space-4);
  background: var(--color-ground-200);
  margin-bottom: var(--space-6);
  border-left: 2px solid var(--color-accent-500);
  max-width: 62ch;
}

.product-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.product-page__related {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-hairline);
}

.product-page__related-list {
  display: grid;
  gap: var(--space-3) var(--grid-gutter);
  margin-top: var(--space-4);
}

.product-page__related-list a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: var(--border-hairline);
  text-decoration: none;
  color: var(--color-text-primary);
}

.product-page__related-list a:hover { color: var(--color-accent-600); }

.product-page__related-list small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

@media (min-width: 48rem) {
  .product-page__related-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .product-page__grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    align-items: start;
  }
  .product-page__figure { grid-column: 1 / span 5; position: sticky; top: 6rem; }
  .product-page__body { grid-column: 7 / span 6; }
  .product-page__related-list { grid-template-columns: 1fr 1fr 1fr; }
}

/* -- Legal pages (privacy notice, terms of sale) --------------------------- */

.legal-page { background: var(--color-surface); }

.legal-page__inner { max-width: 46rem; }

.legal-page__intro {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border-left: 2px solid var(--color-accent-500);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.legal-page__meta {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.legal-page__h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
}

.legal-page__list {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
}

.legal-page__list li {
  position: relative;
  padding-left: var(--space-6);
}

.legal-page__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: var(--space-4);
  height: 1px;
  background: var(--color-accent-500);
}

/* Every policy page carries the full set, so a reader arriving from a bank's
   compliance checklist can move between them without going back to the
   footer. */
.policy-nav {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
}

.policy-nav__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-600);
  margin-bottom: var(--space-3);
}

.policy-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.policy-nav__link {
  display: inline-block;
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.policy-nav__link:hover { border-color: var(--color-accent-500); color: var(--color-text-primary); }

.policy-nav__link[aria-current="page"] {
  background: var(--color-ink-900);
  border-color: var(--color-ink-900);
  color: var(--color-ground-100);
}

.legal-page__text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.legal-page__back {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  font-size: var(--text-sm);
}

/* -- 8. Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--color-ink-900);
  color: var(--color-text-on-dark-muted);
  border-top: var(--border-hairline-dark);
  padding-block: var(--space-8) var(--space-6);
}

/* Four columns on a desktop — company, products, sections, policies. The
   policy column is the reason the footer exists in this form: an importer's
   bank or compliance team looks for these pages, and they should be one
   click from anywhere. */
.site-footer__grid {
  display: grid;
  gap: var(--space-7) var(--grid-gutter);
  padding-bottom: var(--space-7);
  border-bottom: var(--border-hairline-dark);
}

/* The tagline is the thesis in nine words, set in the display face so it
   reads as a statement rather than as a line of small print. */
.site-footer__tagline {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
  max-width: 24ch;
}

/* Contact list: one icon, one line, one action. The icons are a hidden SVG
   sprite at the top of the footer, drawn in currentColor so they take the
   accent and sit quietly beside the text. WhatsApp uses its own glyph because
   buyers in our markets look for it specifically. */
.site-footer__contact {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  line-height: var(--leading-snug);
}

.site-footer__icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-accent-300);
}

.site-footer__muted {
  font-size: var(--text-xs);
  color: var(--color-ink-400);
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: var(--space-4);
}

.site-footer__list {
  display: grid;
  gap: var(--space-2);
}

.site-footer__list .site-footer__link { display: inline-block; line-height: var(--leading-snug); }

@media (min-width: 40rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
  .site-footer__brand { grid-column: auto; padding-right: var(--space-6); }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-size: var(--text-sm);
}

.site-footer__copyright { color: var(--color-ink-400); }

.site-footer__legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }