/* ALAPMET surface. Passport: docs/design-passport.md, "ALAPMET SURFACE
 * PASSPORT". Their brand on our discipline: light paper, the logo's teal as
 * the ONE accent, rectangles only, Satoshi headings, Clash for the numbers.
 * Gate: tests/static/passport.mjs --surface alapmet. */

:root {
  --bg: #eef1f4;          /* paper */
  --card: #f7f9fb;        /* raised */
  --ink: #2a2b2b;         /* the logo's dark peak */
  --ink-dim: #55606a;
  --hair: rgba(42, 43, 43, 0.14);
  --accent: #106888;      /* the logo's blue peak */
  --accent-hover: #0c5069;
  --on-accent: #ffffff;

  --font-display: "Clash Display", "Satoshi", sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;

  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xl: 32px;
  --fs-xxl: 48px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  /* scrollbar-passport: the page scrolls, so the page's scrollbar is themed */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }

a { color: var(--accent); text-decoration: none; transition: color 200ms var(--ease); }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { font-family: var(--font-body); font-weight: 700; line-height: 1.2; }
h1 { font-size: var(--fs-xxl); letter-spacing: -0.02em; max-width: 16ch; }
h2 { font-size: var(--fs-xl); margin-bottom: 32px; }
h3 { font-size: var(--fs-md); margin-bottom: 8px; }
p { max-width: 65ch; }

/* ---- header -------------------------------------------------------------- */
.top {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 24px;
  border-bottom: 1px solid var(--hair);
}
.brand img { display: block; width: 132px; height: auto; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a, .top-phone {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.nav a:hover { color: var(--accent); border-color: var(--accent); }
.top-phone { color: var(--accent); font-variant-numeric: tabular-nums; }
.top-phone:hover { color: var(--accent-hover); }

/* ---- hero ---------------------------------------------------------------- */
.hero { padding: 96px 0 80px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}

/* The ingot scene and its stand-in trade places on the passport easing:
   the mark cedes, the canvas takes over, nothing snaps. */
.hero-visual { position: relative; aspect-ratio: 1 / 1; min-height: 320px; }
.hero-visual .hero-mark {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70%;
  height: auto;
  opacity: 1;
  transition: opacity 500ms var(--ease);
}
.hero-visual .hero-mark.ceded { opacity: 0; }
#cast {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
#cast.live { opacity: 1; }
.hero-slogan {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  margin: 24px 0 16px;
}
.hero-lede { color: var(--ink-dim); margin-bottom: 32px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 4px;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }

/* ---- the numbers band. The ridge cut at the seam echoes the logo's peaks:
   the one decorative shape this surface is allowed. ----------------------- */
.band {
  background: var(--card);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 56px 0;
  clip-path: polygon(0 0, calc(50% - 28px) 0, 50% 14px, calc(50% + 28px) 0, 100% 0, 100% 100%, 0 100%);
}
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.stat { display: grid; gap: 4px; }
.stat-n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- sections ------------------------------------------------------------ */
.section { padding: 88px 0; }
.section.alt {
  background: var(--card);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.section p + p { margin-top: 16px; }

.pillars { list-style: none; margin-top: 48px; }
.pillars li { padding: 24px 0; border-top: 1px solid var(--hair); }
.pillars p { color: var(--ink-dim); }

.grid-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.why { padding: 24px 0; border-top: 1px solid var(--hair); }
.why p { color: var(--ink-dim); }

.grid-prod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.prod {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 32px;
}
.section:not(.alt) .prod { background: var(--card); }
.formula {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--accent);
  margin-left: 8px;
}
.prod p { color: var(--ink-dim); }

/* A lede under a section title. One line of orientation, never a paragraph
   explaining the section to the person already reading it. */
.lede { color: var(--ink-dim); margin: -16px 0 40px; }

/* The guaranteed composition. Data, so it stays selectable: a buyer quotes
   these figures straight into a contract. Two columns, hairline rows, the
   element in the accent so the eye finds it without a heavier weight. */
.spec { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.spec caption {
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 8px;
}
.spec th, .spec td {
  font-size: var(--fs-base);
  text-align: left;
  padding: 8px 0;
  border-top: 1px solid var(--hair);
}
.spec th { font-weight: 700; color: var(--accent); width: 30%; }
.spec td { font-variant-numeric: tabular-nums; }

/* Installed capacity. The same table, reading the other way round: the line is
   the label and the tonnage is the figure, so the process name takes the width
   and the number sits at the right edge where the eye compares them. */
.capacity { max-width: 560px; }
.capacity th { width: 68%; color: var(--ink); font-weight: 500; }
.capacity td { text-align: right; }
.capacity + .fig-note { margin-bottom: 32px; }

/* A sub-heading inside a section that already has its h2. */
.sub { margin-top: 40px; }

/* THE PROJECT BLOCK. Everything below this line is not for sale yet, and the
   page has to say so louder than a caption: its own heading, a pill on the
   heading, and cards held back from the accent the real products carry. */
.project-block { margin-top: 72px; border-top: 1px solid var(--hair); padding-top: 40px; }
.project-head { font-size: var(--fs-lg); margin-bottom: 16px; }
.pill {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 10px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  vertical-align: middle;
}
.prod.project { background: transparent; }
.section:not(.alt) .prod.project { background: transparent; }
.prod.project .spec caption { color: var(--accent); }

/* The composition figure. Built by alapmet-spec.js from the table below it,
   so the two can never disagree; with the script off, the table stands alone
   and nothing is missing. The canvas is chrome around data the table already
   carries, so it is hidden from assistive technology, not duplicated to it. */
.spec-fig { margin: 0 0 24px; display: grid; gap: 8px; }
.spec-fig canvas { display: block; width: 100%; }
.spec-fig .lattice { margin-top: 8px; }
.fig-note { font-size: var(--fs-sm); color: var(--ink-dim); max-width: 60ch; }

/* Sizing, packing, minimum lot. Label above value, so a long sizing line
   wraps under its own label instead of pushing the column. */
.prod-meta { display: grid; gap: 16px; }
.prod-meta > div { display: grid; gap: 4px; }
.prod-meta dt {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prod-meta dd { font-size: var(--fs-base); }

/* The route through the shops. The counter is the plant's own order of
   operations, so it is numbered by the list and not by hand. */
.flow { list-style: none; counter-reset: step; display: grid; gap: 0; }
.flow li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 48px minmax(0, 240px) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
}
.flow li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.flow-n { font-weight: 700; font-size: var(--fs-md); }
.flow p { color: var(--ink-dim); }

/* The laboratory. Text, not cards: the section is read, not scanned. */
.lab-intro { max-width: 65ch; margin-bottom: 48px; }
.lab-intro p + p { margin-top: 16px; }
.grid-lab { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.lab { padding: 24px 0; border-top: 1px solid var(--hair); }
.lab p { color: var(--ink-dim); }

/* Delivery terms and contact details share one row shape: a small uppercase
   label against the value it belongs to. */
.contact .row, .terms .row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}
.contact dt, .terms dt {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 2px;
}

/* ---- the site band: the plant's place and its live sky ------------------- */
.site {
  background: var(--accent);
  color: var(--on-accent);
  padding: 88px 0 0;
}
.site h2 { color: var(--on-accent); margin-bottom: 8px; }
.site-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 48px;
  align-items: end;
  padding-bottom: 56px;
}
.site-sub { color: rgba(255, 255, 255, 0.72); }
.site-coords {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
.site-live {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.live { display: grid; gap: 4px; }
.live-n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}
.live-l { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }
/* Fixed digit cells for the clock: Clash has no tabular figures, so each
   character owns a constant-width slot and a tick cannot move the line. */
.live-n .td { display: inline-block; width: 0.62em; text-align: center; }
.live-n .tc { display: inline-block; width: 0.34em; text-align: center; }

.site-map { position: relative; }
#sitemap { display: block; width: 100%; height: 340px; }
.site-attr {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-dim);
}

/* ---- contact ------------------------------------------------------------- */
.contact dd a { font-variant-numeric: tabular-nums; }

/* ---- footer -------------------------------------------------------------- */
.foot { border-top: 1px solid var(--hair); padding: 40px 0; }
.foot-in { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.foot-in img { width: 96px; height: auto; }
.foot-in nav { display: flex; gap: 24px; margin-left: auto; }
.foot-in nav a { color: var(--ink-dim); font-size: var(--fs-sm); font-weight: 700; }
.foot-in nav a:hover { color: var(--accent); }
.foot-in p { width: 100%; font-size: var(--fs-sm); color: var(--ink-dim); }

/* ---- motion: scroll reveal only, eased in place -------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  a, .nav a, .btn { transition: none; }
  /* The scene never boots under reduced motion; the mark stands still. */
  .hero-visual .hero-mark, #cast { transition: none; }
}

/* ---- mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  .top { flex-wrap: wrap; gap: 16px; }
  .nav { margin-left: 0; gap: 16px; }
  .nav a, .top-phone { min-height: 44px; display: inline-flex; align-items: center; }
  .hero { padding: 56px 0; }
  h1 { font-size: var(--fs-xl); }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { min-height: 240px; aspect-ratio: 4 / 3; }
  .stats { grid-template-columns: 1fr 1fr; }
  .grid-why, .grid-prod, .grid-lab { grid-template-columns: 1fr; }
  .prod { padding: 24px; }
  /* The pill is a second line on a phone, never a fragment wrapped mid-word
     off the end of the heading it belongs to. */
  .pill { display: block; width: fit-content; margin: 8px 0 0; }
  .capacity th { width: 55%; }
  /* The step number leaves the grid on a phone and sits above its own step,
     so the description keeps the full width instead of a 96px gutter. */
  .flow li { grid-template-columns: 1fr; gap: 8px; }
  .terms .row { grid-template-columns: 1fr; gap: 4px; }
  .site-head { grid-template-columns: 1fr; gap: 32px; }
  .site-live { grid-template-columns: 1fr 1fr; }
  #sitemap { height: 260px; }
  .contact .row { grid-template-columns: 1fr; gap: 4px; }
  .foot-in nav { margin-left: 0; }
}

/* Approved multi-page publication. Values entered in the passport first. */
.site-header { border-bottom: 1px solid var(--hair); }
.top { border-bottom: 0; justify-content: space-between; gap: 16px; }
.brand { flex: 0 0 auto; }
.header-actions { display: flex; align-items: center; gap: 24px; }
.languages { display: flex; }
.languages a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-bottom: 2px solid transparent; font-weight: 700; }
.languages [aria-current] { border-color: var(--accent); }
.nav { margin: 0 auto; width: 100%; gap: 32px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); }
.nav a { flex: 0 0 auto; min-height: 48px; display: flex; align-items: center; white-space: nowrap; }
.nav [aria-current] { border-color: var(--accent); color: var(--accent); }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--accent); }
.secondary { background: transparent; color: var(--accent); }
.secondary:hover { background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: absolute; transform: translateY(-160%); padding: 12px 24px; background: var(--card); z-index: 10; }
.skip-link:focus { transform: translateY(0); }
.hero-copy h1 { max-width: 20ch; font-size: var(--fs-xl); margin-bottom: 24px; }
.hero-copy p { color: var(--ink-dim); }
.page-content { padding-top: 48px; padding-bottom: 64px; }
.page-content > h1 { max-width: 28ch; margin-bottom: 40px; overflow-wrap: anywhere; }
.page-content p + p { margin-top: 16px; }
.page-content ul { padding-left: 24px; max-width: 72ch; margin: 16px 0; }
.page-content li + li { margin-top: 8px; }
.breadcrumbs { margin-bottom: 24px; font-size: var(--fs-sm); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.content-section { padding: 32px 0; border-top: 1px solid var(--hair); scroll-margin-top: 24px; }
.content-section h2 { margin-bottom: 24px; font-size: var(--fs-lg); }
.content-section > .btn { margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.closing-actions { padding-bottom: 64px; }
.product-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.product-card > a { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.product-card h3 { overflow-wrap: anywhere; }
.grid-prod { margin: 32px 0; }
.table-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg); scrollbar-gutter: stable; }
.table-wrap table { table-layout: fixed; min-width: 280px; }
.table-wrap th, .table-wrap td { padding: 12px 16px; vertical-align: top; overflow-wrap: anywhere; }
.table-wrap th { width: auto; }
.table-wrap thead th { background: var(--card); color: var(--ink-dim); font-size: var(--fs-sm); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.product-disclaimer { color: var(--ink-dim); margin: 32px 0; }
.related { border-top: 1px solid var(--hair); margin-top: 32px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.related a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-grid h2 { font-size: var(--fs-base); margin-bottom: 16px; }
.footer-grid a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); padding: 8px 0; overflow-wrap: anywhere; }
.footer-bottom { margin-top: 32px; font-size: var(--fs-sm); color: var(--ink-dim); }
.enquiry-context { min-height: 64px; margin-top: 24px; }
.spec-fig .composition-canvas { width: 100%; display: block; }
.spec-fig { margin-bottom: 24px; }
@media (max-width: 767px) {
  .header-actions { gap: 8px; }
  .header-actions .btn { padding: 8px 12px; max-width: 160px; }
  .top .brand img { width: 96px; height: auto; }
  .nav { gap: 24px; }
  .page-content { padding-top: 32px; }
  .page-content > h1 { font-size: var(--fs-xl); }
  .photo-grid, .footer-grid { grid-template-columns: 1fr; }
  .table-wrap th, .table-wrap td { padding: 12px 8px; }
  .hero { padding: 40px 0; }
}
@media (max-width: 399px) {
  .top { padding: 12px 16px; }
  .top .brand img { width: 80px; }
  .header-actions { gap: 4px; }
  .header-actions .btn { max-width: 128px; font-size: var(--fs-sm); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation: none; transition: none; }
}
/* Photographs. Fixed 16:9 box with the photo's own dark ground, so the space
   is held before the file arrives and nothing shifts when it lands. */
.photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--ink); margin: 24px 0; }
.photo-grid .photo { align-self: start; }