/* ============================================================================
   Catalogue — the category tree and the product grid.

   Structure follows dealer.arkel.eu, which is what the client asked for: a fixed
   left rail carrying a three-level tree, a card grid beside it, numbered pages at
   the bottom. Every colour, radius and typeface comes from our own tokens.css
   instead, so the shape is theirs and the identity is ours.

   Measured from the reference and kept: 12px of indent per level, 14px links,
   ~280px of image box, four columns at the widest.
   ============================================================================ */

/* ---------------------------------------------------------------- layout */
.catalogue {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 62rem) {
  .catalogue {
    /* The rail is fixed-width: category names are short and predictable, and a
       fluid rail makes the grid reflow every time the window nudges. */
    grid-template-columns: 16.5rem minmax(0, 1fr);
  }
  .catalogue-rail {
    position: sticky;
    top: var(--s-5);
    /* Long branches scroll inside the rail rather than pushing the page down. */
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.catalogue-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
}

.rail-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------- tree */
.tree-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 0.875rem;          /* 14px, as measured on the reference */
  line-height: 1.5;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.tree-link > a {
  color: inherit;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.tree-link:hover {
  background: var(--surface-inset);
}

/* The open branch is tinted; only the page you are actually on gets the accent.
   Colouring every ancestor the same as the leaf makes the rail read as four
   selected items. */
.tree-link.is-open-path {
  color: var(--text);
  font-weight: 600;
}

.tree-link.is-current {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* Nesting. Each level steps in by 0.75rem — the reference's 12px. */
.tree-children {
  padding-inline-start: 0.75rem;
}

/* details/summary carries a default triangle in every engine; ours is drawn
   below, so the built-in one has to go in both syntaxes. */
.tree-branch > summary {
  list-style: none;
}
.tree-branch > summary::-webkit-details-marker {
  display: none;
}

.tree-chevron {
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  /* Points down when closed. RTL-safe: the rotation is about the box centre. */
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  opacity: 0.55;
}

.tree-branch[open] > summary .tree-chevron {
  transform: rotate(-135deg);
}

.tree-leaf {
  justify-content: flex-start;
}

/* ---------------------------------------------------------------- toolbar */
.catalogue-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-5);
}

.catalogue-count {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------- grid */
.product-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(13, 27, 42, 0.4);
}

.product-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.product-figure {
  /* Fixed box, `contain` inside it. Arkel's photography arrives in a dozen
     aspect ratios, and `cover` would crop the terminals off a control panel —
     the part of the picture an installer is actually looking at. */
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  background: var(--surface-2);
}

.product-figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Not every part has a photograph yet. An honest empty state beats a broken
   image icon or a stock picture of the wrong component. */
.product-figure.is-empty {
  color: var(--text-faint);
  font-size: 0.8125rem;
  text-align: center;
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex: 1;
}

.product-name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  /* Part names run long and vary wildly in length; clamping keeps the cards on a
     shared baseline without truncating so hard the model number is lost. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-sku {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin: 0;
}

.product-price {
  margin-block-start: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.product-price.is-inquiry {
  color: var(--text-muted);
  font-weight: 500;
}

/* The reason a product is on enquiry. Quiet, but directly under the price where the
   number would have been - it is the answer to the question the missing price asks. */
.inquiry-reason {
  margin-block-start: var(--s-2);
  margin-block-end: var(--s-4);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Prices are demonstration figures until the client supplies a real list. The note
   says so wherever a total is shown, and disappears with one switch in the panel. */
.note-warn {
  border-inline-start-color: var(--warn);
  background: var(--warn-soft);
  margin-block-start: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- empty */
.catalogue-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- pager */
.pager {
  margin-block-start: var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.pager-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pager-item > a,
.pager-item > span {
  display: grid;
  place-items: center;
  min-inline-size: 2.25rem;
  block-size: 2.25rem;
  padding-inline: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}

.pager-item > a:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}

.pager-item.is-current > span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Disabled arrows stay in the layout rather than disappearing: a control that
   vanishes on the first page makes the row jump as you page through. */
.pager-item.is-disabled > span {
  color: var(--text-faint);
  background: var(--surface-2);
}

.pager-item.is-gap > span {
  border-color: transparent;
  background: none;
  color: var(--text-faint);
}

.pager-count {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================================
   Partner / client logo strips
   ============================================================================ */

.strip {
  padding-block: var(--s-6);
  border-block-start: 1px solid var(--border);
}
.strip-caption {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin: 0 0 var(--s-4);
}

/* Few enough to show as they are. */
.strip-static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}

/* Enough to flow. */
.strip-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
}

.strip-track {
  display: flex;
  inline-size: max-content;
  animation: strip-flow 48s linear infinite;
  /* Its own compositor layer: with dozens of images the main thread would drop
     frames the moment anything else on the page did work. */
  will-change: transform;
}

.strip-half {
  display: flex;
  flex: none;
  align-items: center;
}

/* -50% is not a stylistic choice. The track renders its chips twice, so half the
   track is exactly one full set, and landing there puts the second copy precisely
   where the first started. Any other value tears visibly on each loop. */
@keyframes strip-flow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* An RTL page reads right to left, so the strip should travel with the text, not
   against it. Without this the logos scroll the "wrong" way and the eye fights it. */
[dir="rtl"] .strip-track {
  animation-name: strip-flow-rtl;
}
@keyframes strip-flow-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50%, 0, 0); }
}

/* Stop on hover so a logo can be looked at — and, once these become links, clicked. */
.strip-viewport:hover .strip-track {
  animation-play-state: paused;
}

/* Motion that cannot be stopped is a barrier for vestibular disorders. The strip
   still shows every logo; it just holds still. */
@media (prefers-reduced-motion: reduce) {
  .strip-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    inline-size: 100%;
  }
  .strip-half[aria-hidden="true"] { display: none; }
}

.strip .chip {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 4.5rem;
  padding-inline: var(--s-4);
  margin-inline: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-muted);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.strip .chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ═══════════════════════════════════════════════════════ SITE SEARCH */
.search-main-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.search-main-form > svg { inline-size: 24px; block-size: 24px; color: var(--text-faint); }
.search-main-form input { min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem; }
.search-result-head { margin-block: var(--s-7) var(--s-4); }
.search-result-head :is(h2,p) { margin: 0; }
.search-results { display: grid; gap: var(--s-3); }
.search-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-3); }
.search-result-image { inline-size: 130px; block-size: 94px; overflow: hidden; border-radius: var(--radius); background: var(--surface-inset); }
.search-result-image img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.search-result-body { display: grid; justify-items: start; gap: var(--s-2); }
.search-result-body :is(h2,p) { margin: 0; }
@media (max-width: 640px) {
  .search-main-form { grid-template-columns: auto minmax(0, 1fr); }
  .search-main-form .btn { grid-column: 1 / -1; inline-size: 100%; justify-content: center; }
  .search-result { grid-template-columns: 82px minmax(0, 1fr); align-items: start; }
  .search-result-image { inline-size: 82px; block-size: 82px; }
  .search-result > .btn { grid-column: 1 / -1; justify-self: start; }
  .search-result:not(:has(.search-result-image)) .search-result-body { grid-column: 1 / -1; }
}

.strip .chip-lg {
  block-size: 5.5rem;
  padding-inline: var(--s-5);
}

.strip .chip img {
  /* Height fixed, width free: client artwork arrives in every proportion there is,
     and `contain` is what keeps a wide wordmark and a square badge in one row. */
  block-size: 2.5rem;
  inline-size: auto;
  max-inline-size: 11rem;
  object-fit: contain;
}

.strip .chip-lg img {
  block-size: 3.25rem;
  max-inline-size: 14rem;
}

.strip .chip-wordmark {
  white-space: nowrap;
  font-weight: 600;
  font-size: 1rem;
}

.strip .chip-lg .chip-wordmark {
  font-size: 1.15rem;
}

/* ============================================================================
   Dealer directory
   ============================================================================ */

.province-grid {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.province {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.province:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* A province with nobody listed is dimmed but still reachable. Hiding it would
   leave a visitor from that province unsure whether they had looked in the wrong
   place; "no representative listed here" is an answer, a missing link is not. */
.province.is-empty {
  color: var(--text-muted);
  background: var(--surface-2);
}

.province-count {
  font-size: 0.8125rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.office-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.office {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.office > * + * { margin-block-start: var(--s-2); }

.note {
  margin-block-start: var(--s-5);
  padding: var(--s-4);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}

/* ============================================================================
   Prose pages: about, contact, technology, downloads, legal
   ============================================================================ */

.prose > * + * { margin-block-start: var(--s-4); }
.prose h2 { margin-block-start: var(--s-6); }
.prose ul, .prose ol { padding-inline-start: var(--s-5); }
.prose li + li { margin-block-start: var(--s-2); }

.stat-row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-block-start: var(--s-6);
}

.stat {
  text-align: center;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.stat b { display: block; font-size: 2rem; color: var(--accent-ink); line-height: 1.2; }
.stat span { font-size: 0.875rem; color: var(--text-muted); }

.feature-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.feature {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.feature h2 { margin: 0 0 var(--s-2); }
.feature p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.8; }

.tag-list {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; margin: 0; padding: 0;
}
.tag-list li {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  background: var(--surface);
}

/* ---------------------------------------------------------------- contact */
.contact-layout {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 55rem) {
  .contact-layout { grid-template-columns: 20rem minmax(0, 1fr); }
}

.contact-block + .contact-block { margin-block-start: var(--s-5); }
.contact-block h2 { margin: 0 0 var(--s-2); }
.contact-block p { margin: 0 0 var(--s-1); }
.contact-block a { color: var(--accent-ink); text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }

.stack > * + * { margin-block-start: var(--s-4); }

.field { display: block; }
.field > span { display: block; margin-block-end: var(--s-1); font-size: 0.875rem; font-weight: 500; }
.field input, .field textarea, .field select {
  inline-size: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field .err { display: block; margin-block-start: var(--s-1); color: var(--accent-ink); font-size: 0.8125rem; font-style: normal; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   inputs, and the point is that they fill it in. Kept out of the tab order and
   out of the accessibility tree so no real person ever meets it. */
.hp {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.legal-note {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--border);
  color: var(--text-faint);
}

/* ============================================================================
   Blog
   ============================================================================ */

.post-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }

.post-cat {
  align-self: flex-start;
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.post-title { margin: 0; font-size: 1.05rem; line-height: 1.7; }
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: var(--accent-ink); }

.post-excerpt {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.8;
}

.post-meta {
  margin: 0;
  margin-block-start: auto;
  font-size: 0.8125rem;
  color: var(--text-faint);
}

/* An article is read, not scanned — so it gets a wider line height and a measure
   capped in characters rather than pixels, which is what actually governs how far
   the eye has to travel back on a Persian line. */
.article .prose { line-height: 2; }
.article .prose h2 {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--border);
}
.article .prose ul { line-height: 1.9; }

/* ============================================================================
   Selection wizard
   ============================================================================ */

.finder { display: grid; gap: var(--s-5); max-inline-size: 46rem; }

.finder-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s-4) var(--s-5);
  margin: 0;
}

.finder-step legend {
  font-weight: 600;
  font-size: 0.9375rem;
  padding-inline: var(--s-2);
}

.choice-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* The whole tile is the target, not just the radio dot. On a phone in a machine
   room, a 16px circle is not a realistic thing to hit. */
.choice {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9375rem;
  background: var(--surface-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-sm { padding: 0.5rem 0.9rem; }
.field-narrow { max-inline-size: 10rem; }

/* ---------------------------------------------------------------- results */
.result-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.result {
  position: relative;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.result.is-best { border-color: var(--accent); }

.result-badge {
  position: absolute;
  inset-block-start: -0.7rem;
  inset-inline-start: var(--s-4);
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.result h3 { margin: 0 0 var(--s-3); }
.result h3 a { color: inherit; text-decoration: none; }
.result h3 a:hover { color: var(--accent-ink); }

.spec-list {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.spec-list li + li { margin-block-start: var(--s-1); }

.ruled-out {
  margin-block-start: var(--s-5);
  padding: var(--s-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.ruled-out summary { cursor: pointer; font-weight: 500; color: var(--text); }
.ruled-out ul { margin: var(--s-3) 0 0; padding-inline-start: var(--s-5); }
.ruled-out li + li { margin-block-start: var(--s-2); }

.spec-table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.spec-table th, .spec-table td {
  padding: var(--s-3);
  border-block-end: 1px solid var(--border);
  text-align: start;
}
.spec-table th { font-weight: 500; color: var(--text-muted); inline-size: 40%; }

/* ============================================================================
   Shop
   ============================================================================ */

.cart-table {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cart-table th, .cart-table td {
  padding: var(--s-3) var(--s-4);
  text-align: start;
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
}
.cart-table th { background: var(--surface-2); font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.cart-table tr:last-child td { border-block-end: none; }
.cart-table a { color: inherit; text-decoration: none; }
.cart-table a:hover { color: var(--accent-ink); }
.cart-table .hint { display: block; font-size: 0.72rem; color: var(--text-faint); }

.cart-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: var(--s-4);
}
.cart-total { margin: 0; font-size: 1.05rem; }
.cart-total b { color: var(--accent-ink); }

.narrow-form { max-inline-size: 30rem; }
.narrow-form > * + * { margin-block-start: var(--s-4); }

/* Wide, spaced and monospaced: a five-digit code is read back character by
   character while typing it, and a normal input makes that harder than it
   needs to be. */
.code-input {
  font-size: 1.6rem;
  letter-spacing: 0.6em;
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.checkout-layout {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 58rem) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.checkout-summary {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.summary-list { list-style: none; margin: var(--s-3) 0; padding: 0; font-size: 0.9rem; }
.summary-list li {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding-block: var(--s-2);
  border-block-end: 1px solid var(--border);
}
.summary-list li:last-child { border-block-end: none; }

.order-ref {
  padding: var(--s-4);
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  font-size: 1.05rem;
}
.order-ref b { font-size: 1.3rem; color: var(--accent-ink); letter-spacing: 0.05em; }

.order-card {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-block-end: var(--s-3);
}
.order-card p { margin: var(--s-1) 0 0; }

.cart-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: inherit; text-decoration: none; font-size: 0.9rem;
}
.cart-count {
  display: grid; place-items: center;
  min-inline-size: 1.3rem; block-size: 1.3rem;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 600;
}

/* Card image placeholder.

   The prototype had photography for all three of its cards; the real catalogue is 330
   parts and the client's own photographs have not been supplied for most of them.
   Saying so inside the frame keeps the grid even — an empty .media collapses and the
   row of cards stops lining up. */
.p-card .media-none {
  color: var(--text-faint);
  font-size: 0.8125rem;
  text-align: center;
  line-height: 1.7;
  padding: var(--s-4);
}

/* ═══════════════════════════════════════════════ THE COMPARISON TABLE
   A comparison page's job is to show differences. This one showed four rows read
   from the finder's data, and three of the five families share the same numbers on
   all four — so it presented three identical columns and answered nothing.
   ------------------------------------------------------------------------- */

/* The photograph is what makes a column a thing rather than a label. */
.cmp-shot { display: block; margin-block-end: 8px; }
.cmp-shot img {
  inline-size: 100%;
  max-inline-size: 120px;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--surface-2, #f4f6f8);
  border-radius: 10px;
}

/* Rows that separate the families carry the weight; rows where everything matches
   step back. Both stay readable — this is emphasis, not hiding. */
.tbl tr.is-same th[scope="row"],
.tbl tr.is-same td { color: var(--ink-2); }
.tbl tr.is-differing th[scope="row"] { font-weight: 700; }

.cmp-same-mark {
  display: inline-grid;
  place-items: center;
  inline-size: 16px;
  block-size: 16px;
  margin-inline-start: 6px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--surface-2, #eef1f4);
  color: var(--ink-3, #8b99a9);
}

/* Set by the checkbox, which is opt-in: the first time somebody reads this table
   they want the whole specification, not an edit of it. */
.cmp-diff-only .tbl tr.is-same { display: none; }

/* ── the dealer map ─────────────────────────────────────────────────────
   The dealer page used to be thirty-one identical tiles in alphabetical order —
   a list of province NAMES, when the question a visitor arrives with is
   geographic. The map answers that question by being looked at.

   White with borders and nothing else, as asked. The only colour on it carries
   one fact: whether that province has a listed representative. */
.map-wrap { margin-block-end: var(--s-7); }

.map-figure {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(12px, 2.5vw, 28px);
}

.iran-map {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: min(72vh, 640px);

  /* Clipped, not visible. The regional map's neighbouring countries are clamped two
     degrees beyond the frame so a country running off the edge keeps a straight edge
     instead of losing its whole ring — which puts real path data at x = -74 and
     x = 1074 in a 1000-wide viewBox. `overflow: visible` painted every bit of it,
     straight through the card and across whatever was beside it. */
  overflow: hidden;
}

/* The map is one <a> per province, so keyboard and touch both reach it — there is
   no hover on a phone, and a map you can only use with a mouse is a picture. */
.iran-map .mp path {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .14s ease, stroke .14s ease;
}

.iran-map .mp.has-dealer path { fill: var(--accent-soft); stroke: var(--accent); }

.iran-map .mp:hover path,
.iran-map .mp:focus-visible path,
.iran-map .mp.is-lit path {
  fill: var(--accent);
  stroke: var(--accent-hover);
}

/* Focus has to be visible on a shape, and an outline around a bounding box is not
   it: the ring would sit in the sea for a coastal province. The fill IS the state,
   and this raises the stroke so it also reads without colour. */
.iran-map .mp:focus-visible { outline: none; }
.iran-map .mp:focus-visible path { stroke-width: 2.6; }

/* Hovering lifts a province above its neighbours so its outline is not clipped by
   the ones drawn after it. */
.iran-map .mp:hover,
.iran-map .mp.is-lit { isolation: isolate; }

.map-tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -140%);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: #0D1B2A;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(13, 27, 42, .22);
}
.map-tip .n { opacity: .72; font-weight: 500; margin-inline-start: 6px; }

.map-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block-start: var(--s-3);
  font-size: 13px;
  color: var(--text);
  opacity: .72;
}
.map-key-item { display: inline-flex; align-items: center; gap: 6px; }
.map-key .sw {
  inline-size: 14px;
  block-size: 14px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.map-key .sw.on { background: var(--accent-soft); border-color: var(--accent); }

/* The province tiles, lit from the map. */
.card.is-lit { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Under about 640px the map is small enough that a province is below a comfortable
   touch target, so it stops being the way in and becomes an illustration. The list
   below it does the work — which is why the list is not a fallback. */
@media (max-width: 640px) {
  .iran-map { max-block-size: 46vh; }
  .iran-map .mp { pointer-events: none; }
  .map-tip { display: none; }
}

/* ── the regional map ───────────────────────────────────────────────────
   The two offices abroad. Same rules as the Iran map: white, borders only, one
   colour carrying one fact — this country has an office in it. */
.region-map {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: min(46vh, 380px);
  overflow: hidden;     /* see the note on .iran-map — this is the map it was written for */
}

/* The neighbours. Present so the region is recognisable, quiet enough that they
   are clearly not the subject. */
.region-map .rg-context {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.region-map .rg path {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .14s ease;
}

.region-map .rg:hover path,
.region-map .rg:focus-visible path,
.region-map .rg.is-lit path { fill: var(--accent); }

.region-map .rg:focus-visible { outline: none; }
.region-map .rg:focus-visible path { stroke-width: 2.6; }

.region-map .rg-pin circle { fill: var(--accent); }
.region-map .rg-pin .rg-pin-dot { fill: #fff; }
.region-map .rg-pin text {
  font-size: 15px;
  font-weight: 600;
  fill: var(--text);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;      /* a halo, so a label crossing a border stays readable */
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .region-map { max-block-size: 32vh; }
  .region-map .rg-pin text { font-size: 20px; }
}

/* ── the maps, told what colour to be ────────────────────────────────────
   Both maps borrowed the page's surface tokens, which works in light and collapses
   in dark: the province fill resolved to rgb(27,33,42) against a figure background of
   rgb(27,33,42) — the same colour — so the land was invisible and only a hairline
   border in rgb(58,66,78) remained. The regional map was worse, because its
   neighbouring countries sat four values away from the background.

   Four tokens instead, defined per theme, so the relationship between land, border
   and ground is stated rather than inherited from whatever the surrounding card
   happens to use. */
:root {
  --map-ground:  #FFFFFF;   /* the figure behind the map */
  --map-land:    #FFFFFF;   /* a province or country with nothing to say */
  --map-border:  #A8B3C1;   /* every border on the map */
  --map-context: #F1F4F8;   /* countries that are only there for context */
  --map-mark:    var(--accent);      /* has a dealer, has an office */
  --map-ink:     var(--accent);      /* the hover and pin colour */
}

/* Dark is the site's default; only the switch in the header turns it light. */
:root:not([data-theme="light"]) {
  /* Land lighter than the ground rather than equal to it, and a border bright
     enough to read at a 1px stroke on a dark field. */
  --map-ground:  #141A22;
  --map-land:    #273040;
  --map-border:  #5B6779;
  --map-context: #1B222C;
  --map-mark:    #F0857D;
  --map-ink:     #F0857D;
}

:root[data-theme="dark"] {
  --map-ground:  #141A22;
  --map-land:    #273040;
  --map-border:  #5B6779;
  --map-context: #1B222C;
  --map-mark:    #F0857D;
  --map-ink:     #F0857D;
}

.map-figure { background: var(--map-ground); }

.iran-map .mp path {
  fill: var(--map-land);
  stroke: var(--map-border);
}
.iran-map .mp.has-dealer path {
  fill: color-mix(in srgb, var(--map-mark) 22%, var(--map-land));
  stroke: var(--map-mark);
}
.iran-map .mp:hover path,
.iran-map .mp:focus-visible path,
.iran-map .mp.is-lit path {
  fill: var(--map-ink);
  stroke: var(--map-ink);
}

.map-key .sw { background: var(--map-land); border-color: var(--map-border); }
.map-key .sw.on {
  background: color-mix(in srgb, var(--map-mark) 22%, var(--map-land));
  border-color: var(--map-mark);
}

.region-map .rg-context { fill: var(--map-context); stroke: var(--map-border); }

.region-map .rg path {
  fill: color-mix(in srgb, var(--map-mark) 22%, var(--map-land));
  stroke: var(--map-mark);
}
.region-map .rg:hover path,
.region-map .rg:focus-visible path,
.region-map .rg.is-lit path { fill: var(--map-ink); stroke: var(--map-ink); }

.region-map .rg-pin circle { fill: var(--map-ink); }
.region-map .rg-pin .rg-pin-dot { fill: var(--map-ground); }

/* The label's halo takes the map's own ground, not the page's — the two are
   different colours now, and a halo in the wrong one draws a box round the word. */
.region-map .rg-pin text { stroke: var(--map-ground); }


/* ═══════════════════════════════════════════ ARKEL POSTERS · PRODUCTS PAGE
   The hero posters from Arkel's dealer portal, as a row that snaps a poster at a
   time. With JavaScript off it is simply a row that scrolls; the script adds the dots
   and the slow advance. Wide cut on desktop, Arkel's squarer cut on a phone.
   ------------------------------------------------------------------------- */
.poster-rail { padding-block: var(--s-5) 0; }

.poster-track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.poster-track::-webkit-scrollbar { display: none; }

.poster {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  aspect-ratio: 1800 / 470;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0d2a4d;
}
.poster a,
.poster picture,
.poster img { display: block; inline-size: 100%; block-size: 100%; }
.poster img { object-fit: cover; }

.poster-dots { display: flex; justify-content: center; gap: 8px; margin-block-start: var(--s-3); }
.poster-dot {
  inline-size: 8px; block-size: 8px; padding: 0;
  border: 0; border-radius: 99px;
  background: var(--border-strong);
  cursor: pointer;
  transition: inline-size .25s ease, background-color .25s ease;
}
.poster-dot.is-on { inline-size: 22px; background: var(--brand, #D62828); }
.poster-dot:focus-visible { outline: 2px solid var(--brand, #D62828); outline-offset: 3px; }

@media (max-width: 720px) {
  /* A peek of the next poster, which is what says "swipe". */
  .poster { flex-basis: 86%; aspect-ratio: 356 / 381; }
}

/* ═══════════════════════════════════════════════════ HOME · FOUR FAMILIES
   Four cards to a row now that Hydraulic joined ARCODE, ARCUBE and ADRIVE. The spec
   chips wrap rather than squeezing, and the photograph keeps its whole panel. */
.family-grid .p-card .body { padding: var(--s-4); }

/* The badge sat under the photograph: both are absolutely placed in the media box and
   the image comes later in the markup. Harmless while the shots were narrow cabinets
   with room beside them; a full-width photograph covered "best seller" completely. */
.p-card .media .badge { z-index: 1; }
.family-grid .p-specs { gap: var(--s-1) var(--s-3); font-size: 12.5px; }

/* ═══════════════════════════════════════════════════ THE CATALOGUE TABLE */
.doc-table td:first-child { min-inline-size: 15rem; }
/* "ARCODE" broke as "ARCOD / E" and "6.2 MB" over two lines in a narrow column. */
.doc-table td:not(:first-child),
.doc-table .badge { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════ PROJECTS */
.project-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.project-media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  min-block-size: 0;
  background: #111923;
}
.project-media img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }

.project-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  inline-size: 56px; block-size: 56px;
  border-radius: 50%;
  background: rgb(0 0 0 / .55);
  color: #fff;
}
.project-play svg { inline-size: 24px; block-size: 24px; margin-left: 3px; }
.project-video-badge {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(3 11 23 / .78);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.projects-section--video { background: var(--bg-alt); border-block: 1px solid var(--border); }
.project-grid--videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-grid--videos .project-body { padding: var(--s-4); }
.project-grid--videos .project-body .small { display: none; }
.project-grid--photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .project-grid--videos, .project-grid--photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .project-grid--videos, .project-grid--photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card .project-body { padding: var(--s-3); }
  .project-card .project-body .small { display: none; }
}
@media (max-width: 620px) {
  .project-grid--videos, .project-grid--photos { grid-template-columns: 1fr; }
}

.project-body { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }

.project-player {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.project-player iframe,
.project-player video,
.project-player img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  border: 0;
  object-fit: contain;
}
.project-player.is-image,
.project-player.is-video { inline-size: min(100%, 620px); aspect-ratio: 9 / 16; margin-inline: auto; }
.project-player.is-image { background: #111923; }
.project-player.is-image img { object-fit: contain; }

.project-gallery img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #111923;
  border-radius: var(--radius);
}

/* ═══════════════════════════════════════════ ARK PUBLICATIONS / FLIPBOOK */
.publication-feature {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 7vw, 92px);
  border-block: 1px solid var(--border);
  background:
    radial-gradient(800px 460px at 8% 0%, color-mix(in srgb, var(--tech) 18%, transparent), transparent 70%),
    radial-gradient(760px 520px at 94% 100%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%),
    var(--bg-alt);
}
.publication-feature--home { margin-block: clamp(26px, 4vw, 60px) 0; }
.publication-feature-grid {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(32px, 7vw, 96px);
}
.publication-cover-stack {
  position: relative;
  justify-self: center;
  inline-size: min(100%, 330px);
  aspect-ratio: 827 / 1169;
  perspective: 1200px;
}
.publication-cover-stack img,
.publication-sheet {
  position: absolute;
  inset: 0;
  border-radius: 4px 12px 12px 4px;
  box-shadow: 0 24px 55px rgb(3 11 23 / .25);
}
.publication-cover-stack img { inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 3; }
.publication-sheet { background: #f8f8f6; border: 1px solid #d4dae2; }
.publication-sheet--mid { z-index: 2; transform: translate(11px, 8px) rotate(2deg); }
.publication-sheet--back { z-index: 1; transform: translate(20px, 15px) rotate(4deg); }
[dir="rtl"] .publication-sheet--mid { transform: translate(-11px, 8px) rotate(-2deg); }
[dir="rtl"] .publication-sheet--back { transform: translate(-20px, 15px) rotate(-4deg); }
.publication-page-count {
  position: absolute;
  z-index: 4;
  inset-inline-end: 14px;
  inset-block-end: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgb(3 11 23 / .8);
  color: #fff;
  font-size: .76rem;
  backdrop-filter: blur(8px);
}
.publication-feature-copy { display: grid; justify-items: start; gap: var(--s-4); }
.publication-feature-copy :is(.h1,.h2,.lead) { margin: 0; }
.publication-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.publication-meta li {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--text-muted);
  font-size: .82rem;
}
.publication-actions { margin-block-start: var(--s-2); }
.publication-actions svg { inline-size: 20px; block-size: 20px; }

.publication-manuals { border-block-end: 1px solid var(--border); }
.publication-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.publication-card { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; padding: 0; overflow: hidden; }
.publication-card-cover { display: block; min-block-size: 330px; background: var(--surface-inset); overflow: hidden; }
.publication-card-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.publication-card:hover .publication-card-cover img { transform: scale(1.025); }
.publication-card-body { display: grid; align-content: center; justify-items: start; gap: var(--s-3); padding: var(--s-5); }
.publication-card-body :is(.h3,p) { margin: 0; }
.publication-card-meta { color: var(--text-faint); }

.publication-reader-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); margin-block-end: var(--s-6); }
.publication-reader-head :is(.h1,.lead) { margin-block-end: 0; }
.flipbook {
  --paper: #f8f8f6;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.flipbook-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-block-end: 1px solid var(--border);
  background: var(--surface);
}
.flipbook-toolbar svg { inline-size: 17px; block-size: 17px; }
.flipbook-status { min-inline-size: 130px; margin: 0; text-align: center; color: var(--text-muted); font-size: .9rem; }
.flipbook-fullscreen { margin-inline-start: auto; }
.flipbook-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: min(72vh, 820px);
  padding: clamp(18px, 4vw, 48px);
  overflow: auto;
  outline: none;
  perspective: 1800px;
  background:
    linear-gradient(90deg, transparent 49.85%, rgb(0 0 0 / .08) 50%, transparent 50.15%),
    radial-gradient(ellipse at center, rgb(255 255 255 / .08), transparent 62%),
    #182433;
}
.flipbook-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.flipbook-page {
  position: relative;
  max-inline-size: min(100%, 620px);
  transform-origin: left center;
  transition: transform .18s var(--ease), opacity .18s ease;
  filter: drop-shadow(0 24px 32px rgb(0 0 0 / .35));
}
[dir="rtl"] .flipbook-page { transform-origin: right center; }
.flipbook-page.is-turning-next { transform: rotateY(-13deg) translateX(-8px); opacity: .55; }
.flipbook-page.is-turning-prev { transform: rotateY(13deg) translateX(8px); opacity: .55; }
[dir="rtl"] .flipbook-page.is-turning-next { transform: rotateY(13deg) translateX(8px); }
[dir="rtl"] .flipbook-page.is-turning-prev { transform: rotateY(-13deg) translateX(-8px); }
.flipbook-page img { display: block; max-inline-size: 100%; max-block-size: min(72vh, 790px); inline-size: auto; block-size: auto; background: var(--paper); }
.flipbook-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 12px 0 18px rgb(0 0 0 / .06), inset -1px 0 rgb(0 0 0 / .08);
}
.flipbook-range-label { display: grid; grid-template-columns: auto minmax(140px, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); color: var(--text-muted); font-size: .82rem; }
.flipbook-range-label input { inline-size: 100%; accent-color: var(--accent); }
.flipbook:fullscreen { background: #101923; border: 0; border-radius: 0; }
.flipbook:fullscreen .flipbook-stage { min-block-size: calc(100vh - 116px); }
.publication-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.publication-more-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: var(--s-4); min-block-size: 178px; padding: var(--s-3); overflow: hidden; }
.publication-more-cover { position: relative; display: block; inline-size: 104px; aspect-ratio: 827 / 1169; overflow: hidden; border-radius: 7px; background: var(--surface-inset); }
.publication-more-cover img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.publication-more-copy { display: grid; min-inline-size: 0; align-content: center; gap: 6px; }
.publication-more-card small { color: var(--text-muted); }
.home-manuals-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: clamp(24px, 4vw, 44px); border-inline-start: 4px solid var(--accent); }
.home-manuals-card :is(.h3,p) { margin-block-end: 0; }

@media (max-width: 900px) {
  .publication-feature-grid { grid-template-columns: minmax(180px, 270px) minmax(0, 1fr); gap: var(--s-6); }
  .publication-card-grid { grid-template-columns: 1fr; }
  .publication-more-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .publication-feature-grid { grid-template-columns: 1fr; }
  .publication-cover-stack { inline-size: min(72vw, 280px); }
  .publication-feature-copy { text-align: center; justify-items: center; }
  .publication-meta, .publication-actions { justify-content: center; }
  .publication-actions .btn { inline-size: 100%; justify-content: center; }
  .publication-card { grid-template-columns: 108px 1fr; }
  .publication-card-cover { min-block-size: 250px; }
  .publication-card-body { padding: var(--s-4); }
  .publication-card-body .row-tight .btn { inline-size: 100%; justify-content: center; }
  .publication-more-card { grid-template-columns: 82px minmax(0, 1fr); min-block-size: 142px; gap: var(--s-3); }
  .publication-more-cover { inline-size: 82px; }
  .publication-reader-head { display: grid; }
  .flipbook-toolbar { flex-wrap: wrap; }
  .flipbook-status { order: -1; flex-basis: 100%; }
  .flipbook-fullscreen { margin-inline-start: 0; }
  .flipbook-stage { min-block-size: 60vh; padding: var(--s-3); }
  .flipbook-range-label { grid-template-columns: 1fr; }
  .home-manuals-card { align-items: stretch; flex-direction: column; }
}

/* ═════════════════════════════════════════════ PRODUCT PAGE: THE SHOWCASE
   The client's choice among four layouts: the product large beside its name and its
   one action, then highlights, then prose beside the numbers, then the family.
   Everything is on the theme tokens, so light and dark come for free. */

.pv-hero {
  position: relative;
  padding-block: var(--s-5) clamp(40px, 6vw, 80px);
  background:
    radial-gradient(900px 520px at 12% 20%, var(--accent-soft), transparent 70%),
    radial-gradient(1100px 620px at 88% 0%, var(--tech-soft), transparent 65%),
    var(--bg-alt);
  border-block-end: 1px solid var(--border);
}
.pv-hero .crumbs { margin-block-end: var(--s-6); }
.pv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

/* the stage — a lit plinth the photograph stands on. Light in both themes: Arkel's
   product photographs are shot on white, and a white rectangle inside a dark box is
   exactly what made the old page look unfinished. `multiply` lets the photograph's
   white melt into the stage's own gradient, so no rectangle shows at all. */
.pv-media { display: flex; flex-direction: column; gap: var(--s-3); min-inline-size: 0; }
.pv-stage {
  --text: #0D1B2A; --text-muted: #5B6573; --accent-ink: #C81A1A;
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  padding: clamp(24px, 5vw, 64px);
  border-radius: 28px;
  border: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 42%, #FFFFFF 0%, #FFFFFF 38%, #E9EDF2 100%);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  overflow: hidden;
}
.pv-stage img {
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.pv-stage-code {
  display: grid; justify-items: center; gap: var(--s-3);
  text-align: center; color: var(--text-muted);
}
.pv-stage-code svg { inline-size: 64px; block-size: 64px; color: var(--accent-ink); opacity: .8; }
.pv-stage-code .lat {
  font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: .02em;
  color: var(--text);
}
.pv-stage-code small { font-size: 13px; }

.pv-thumbs { display: flex; gap: var(--s-2); overflow-x: auto; padding-block-end: var(--s-1); }
.pv-thumbs button {
  flex: none; inline-size: 72px; block-size: 72px; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #FFFFFF; display: grid; place-items: center;
  transition: border-color var(--dur-micro) var(--ease);
}
.pv-thumbs button img { max-block-size: 100%; inline-size: auto; object-fit: contain; }
.pv-thumbs button:hover { border-color: var(--border-strong); }
.pv-thumbs button[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* the text column */
.pv-intro { display: flex; flex-direction: column; gap: var(--s-4); min-inline-size: 0; }
.pv-eyebrow { margin-block-end: 0; }
.pv-eyebrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.pv-title {
  font-size: clamp(24px, 3vw, 38px); font-weight: 700; line-height: 1.4;
  text-wrap: balance; overflow-wrap: anywhere;
}
.nw { white-space: nowrap; }
.pv-lead { font-size: 17px; line-height: 1.95; color: var(--text-muted); max-inline-size: 62ch; }

.pv-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}
.pv-facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-fact {
  padding: var(--s-3) var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.pv-fact dt { font-size: 12px; color: var(--text-muted); margin-block-end: 2px; }
.pv-fact dd { font-size: 16px; font-weight: 600; margin: 0; }

.pv-buy {
  display: grid; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.pv-buy-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.pv-buy-price { font-size: 22px; font-weight: 700; line-height: 1.5; }
.pv-buy-note { margin: 0; }
.pv-buy-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: stretch; }
.pv-buy-actions .btn { flex: 1 1 190px; }

.pv-trust {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: 14px; color: var(--text-muted);
}
.pv-trust li { display: inline-flex; align-items: center; gap: var(--s-2); }
.pv-trust svg { color: var(--ok); inline-size: 16px; block-size: 16px; }

.pv-models-link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 14px; font-weight: 500; color: var(--accent-ink);
}
.pv-models-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.pv-models-link svg { inline-size: 16px; block-size: 16px; }

/* highlights */
.pv-highlights { background: var(--bg); }
.pv-highlights .section-head { margin-block-end: var(--s-6); }
.pv-features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.pv-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-feature {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pv-feature:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.pv-feature-icon {
  flex: none; inline-size: 40px; block-size: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
}
.pv-feature-icon svg { inline-size: 20px; block-size: 20px; }
.pv-feature p { font-size: 15px; line-height: 1.85; margin: 0; }

/* prose beside the numbers */
.pv-about { background: var(--bg-alt); border-block: 1px solid var(--border); }
.pv-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}
.pv-about-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.pv-about-grid.is-single .pv-specs { max-inline-size: 760px; }
.pv-prose .h2 { margin-block-end: var(--s-5); }
.pv-prose p { font-size: 16px; line-height: 2.05; max-inline-size: 72ch; margin-block-end: var(--s-4); }
.pv-list { display: grid; gap: var(--s-2); margin-block: var(--s-4); padding-inline-start: 0; }
.pv-list li { position: relative; padding-inline-start: var(--s-5); line-height: 1.9; }
.pv-list li::before {
  content: ''; position: absolute; inset-inline-start: 4px; inset-block-start: .85em;
  inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--accent);
}
.pv-advice {
  display: grid; gap: var(--s-4);
  margin-block-start: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(600px 240px at 100% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
}
.pv-advice-title { font-size: 18px; font-weight: 600; margin-block-end: var(--s-1); }
.pv-advice .small { margin: 0; }
.pv-advice-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pv-advice-actions .btn { flex: 1 1 160px; }

.pv-details {
  display: grid; margin-block-start: var(--s-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface);
}
.pv-details > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--border); font-size: 14px;
}
.pv-details > div:last-child { border-block-end: 0; }
.pv-details dt { color: var(--text-muted); }
.pv-details dd { margin: 0; font-weight: 500; }

.pv-specs {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.pv-specs-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-inset); border-block-end: 1px solid var(--border);
}
.pv-specs-head svg { color: var(--accent-ink); }
.pv-spec {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-block-end: 1px solid var(--border); font-size: 14px; line-height: 1.7;
}
.pv-spec:last-child { border-block-end: 0; }
.pv-spec:nth-child(even) { background: var(--surface-2); }
.pv-spec dt { color: var(--text-muted); }
.pv-spec dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* the family */
.pv-table tr.active td { background: var(--accent-soft); }
.pv-table tr.active .badge { margin-inline-start: var(--s-2); }
.pv-table tr[hidden] { display: none; }
.pv-row-enquire { color: var(--accent-ink); font-weight: 500; white-space: nowrap; }
.pv-row-enquire:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 961px) {
  /* The table follows the reader down the prose on wide screens. */
  .pv-about-grid:not(.is-single) .pv-specs { position: sticky; inset-block-start: calc(var(--header-h) + 16px); }
}
@media (max-width: 1100px) {
  .pv-features-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pv-hero-grid, .pv-about-grid { grid-template-columns: minmax(0, 1fr); }
  .pv-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-stage { aspect-ratio: 4 / 3; border-radius: 22px; }
}
@media (max-width: 620px) {
  .pv-hero .crumbs { margin-block-end: var(--s-4); }
  .pv-lead { font-size: 16px; }
  .pv-facts, .pv-facts-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-features, .pv-features-4 { grid-template-columns: minmax(0, 1fr); }
  .pv-buy { padding: var(--s-4); }
  .pv-buy-actions .btn { flex-basis: 100%; }
  .pv-spec, .pv-details > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ═════════════════════════════════════════════════════ ABOUT: THE FILM
   The teaser in a black 16:9 frame, one large play button over the poster, the
   browser's own controls once it plays. The play glyph points right in both
   directions (a media convention, not reading order), so its optical nudge is a
   physical margin, not a logical one. */
.film { margin: 0; }
.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}
.film-frame video {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: contain;
  background: #000;
}
.film-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 55%);
  color: #fff;
  cursor: pointer;
}
.film-play[hidden] { display: none; }
.film-play span {
  display: grid; place-items: center;
  inline-size: 88px; block-size: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .2s ease, background-color .2s ease;
}
.film-play svg { inline-size: 32px; block-size: 32px; margin-left: 5px; }
.film-play:hover span,
.film-play:focus-visible span { transform: scale(1.06); background: rgba(255, 255, 255, .24); }
.film-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.film figcaption {
  margin-block-start: var(--s-3);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
@media (max-width: 560px) {
  .film-play span { inline-size: 64px; block-size: 64px; }
  .film-play svg { inline-size: 24px; block-size: 24px; margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-play span { transition: none; }
}

/* ══════════════════════════════════════════ ABOUT: THE MANAGEMENT PHOTO
   Opens the CEO's message on the dark band; the photograph's own navy backdrop is the
   band's colour, so it sits in it rather than on it. */
.management-photo { margin: 0 0 var(--s-8); }
.management-photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* The photograph's own shape: a 16:10 frame cut the flags off at the edges. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.management-photo figcaption {
  margin-block-start: var(--s-3);
  font-size: 14px;
  color: #9AA9BC;
  text-align: center;
}

/* ═════════════════════════════════════════════ CATALOGUE: MEMBERS ONLY
   The card that stands where the list would be for a visitor who has not joined, the
   page a manual's link leads to, and the line that greets somebody who just joined. */
.join-welcome { margin-block-end: var(--s-4); }

.join-member {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-block: 0 var(--s-3);
}
.join-member svg { inline-size: 16px; block-size: 16px; color: var(--ok, #1f9d55); flex: none; }

.join-card {
  max-inline-size: 720px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  gap: var(--s-4);
}

.join-card .h2,
.join-card .lead { margin: 0; }

/* The one mark that says "closed" before a word is read. */
.join-lock {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.join-lock svg { inline-size: 24px; block-size: 24px; }

/* What joining opens, in numbers: the value is shown before the number is asked for.
   One row at every width, however many figures there are, so on a phone they do not
   stack into a second screen between the visitor and the form. */
.join-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-3);
}
.join-stats li {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.join-stats b { font-size: 26px; line-height: 1.2; }
.join-stats span { font-size: 13px; color: var(--text-muted); }

@media (max-width: 720px) {
  .join-stats { gap: var(--s-2); }
  .join-stats li { padding: var(--s-2) var(--s-3); }
  .join-stats b { font-size: 20px; }
  .join-stats span { font-size: 12px; line-height: 1.5; }
}

.join-file {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}

/* ═════════════════════════════════════════════ ACCOUNT: FOLLOWING AN ORDER
   The client's six steps as a track: done steps ticked, the current one ringed, the
   ones ahead quiet. Horizontal where it fits; a column on a phone, because six
   Persian labels do not fit side by side in 375px and a sideways scroll hides the
   step the customer came to see. */
.order-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
  counter-reset: none;
}
.order-track li {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}
.order-track li::before {
  /* the rail between two dots */
  content: "";
  position: absolute;
  inset-block-start: 17px;
  inset-inline-start: calc(-50% + 18px);
  inline-size: calc(100% - 36px);
  block-size: 2px;
  background: var(--border);
}
.order-track li:first-child::before { display: none; }
.order-track li.is-done::before,
.order-track li.is-current::before { background: var(--ok); }
.order-track-dot {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.order-track-dot svg { inline-size: 18px; block-size: 18px; }
.order-track li.is-done .order-track-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.order-track li.is-current .order-track-dot { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.order-track li.is-done,
.order-track li.is-current { color: var(--text); }
.order-track li.is-current .order-track-label { font-weight: 700; }

@media (max-width: 720px) {
  .order-track { grid-template-columns: 1fr; gap: var(--s-3); }
  .order-track li { grid-template-columns: 36px 1fr auto; justify-items: start; text-align: start; align-items: center; }
  .order-track li::before {
    inset-block-start: calc(-50% - 4px);
    inset-inline-start: 17px;
    inline-size: 2px;
    block-size: calc(100% - 28px);
  }
}

/* Files a customer can download: title and size on one line, the button beside it. */
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.file-list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
}
.file-list li > svg { inline-size: 22px; block-size: 22px; flex: none; color: var(--accent); }
.file-list-name { flex: 1; min-inline-size: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }

/* ═════════════════════════════════════════════ THE ORDER FORM, ONLINE
   The paper's sections as cards, its fields in a grid that is three wide on a desk
   and one wide on a phone. Choices are real controls with big hit areas: this form is
   filled in on site, often on a phone, often with gloves recently taken off. */
.order-form { display: grid; gap: var(--s-5); }
.of-section { border: 1px solid var(--border); margin: 0; min-inline-size: 0; }
.of-section > legend { padding-inline: var(--s-2); }
.of-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-4);
}
.of-wide { grid-column: 1 / -1; }
.of-choice { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.of-choice > legend { font-size: 0.875rem; margin-block-end: var(--s-2); padding: 0; }
.of-options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.of-option {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-inset);
  cursor: pointer;
  min-block-size: 44px;
}
.of-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.of-option input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); }

/* Page 2's grid of floor numbers: eight across on a desk, as on the paper. */
.of-stops { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.of-stop {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  font-weight: 600;
}
.of-stop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.of-stop:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.of-stop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) { .of-stops { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.of-qty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-2); }
.of-qty-row {
  display: grid;
  grid-template-columns: 1fr 5.5rem auto;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.of-qty-row .input { padding-block: 6px; }

.signature-pad {
  inline-size: 100%;
  max-inline-size: 600px;
  aspect-ratio: 600 / 180;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

/* The same form, read back: the paper's sections, label then answer. */
.of-summary { display: grid; gap: var(--s-4); }
.of-summary-section h3 { font-size: 0.9375rem; margin: 0 0 6px; }
.of-summary-section dl {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) 1fr;
  gap: 4px 12px;
  margin: 0;
}
.of-summary-section dt { color: var(--text-muted); }
.of-summary-section dd { margin: 0; }
@media (max-width: 720px) { .of-summary-section dl { grid-template-columns: 1fr; } .of-summary-section dd { margin-block-end: 6px; } }

/* ═══════════════════════════════════════════════════════ TRAINING VIDEOS
   Built mobile first: one column and a thumb-sized everything, widening from there.
   The training section has two doors — the library and the films — and a strip of tabs
   says so on both. */
.training-tabs {
  display: flex;
  gap: var(--s-1);
  margin-block-end: var(--s-6);
  border-block-end: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.training-tabs::-webkit-scrollbar { display: none; }
.training-tabs a {
  flex: none;
  display: inline-flex; align-items: center;
  min-block-size: 48px;
  padding-inline: var(--s-4);
  margin-block-end: -1px;
  border-block-end: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.training-tabs a:hover { color: var(--text); }
.training-tabs a[aria-current="page"] { color: var(--text); border-color: var(--accent); }

.video-tools { display: grid; gap: var(--s-4); margin-block-end: var(--s-6); }
.video-search { display: flex; gap: var(--s-2); max-inline-size: 36rem; }
.video-search .input { flex: 1; min-inline-size: 0; }
.video-topics {
  display: flex; gap: var(--s-2);
  overflow-x: auto; padding-block-end: var(--s-1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.video-topics::-webkit-scrollbar { display: none; }
.video-topics .chip { flex: none; white-space: nowrap; }
.video-topics .chip .count { margin-inline-start: var(--s-2); color: var(--text-muted); font-weight: 400; font-size: 12px; }
.video-filtered { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--text-muted); }

.video-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.video-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.video-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-inset);
  overflow: hidden;
}
.video-thumb img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.video-card:hover .video-thumb img { transform: scale(1.03); }
.video-thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); }
.video-thumb-empty svg { inline-size: 64px; block-size: 64px; }
.video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  border-radius: 50%;
  background: rgb(0 0 0 / .6);
  color: #fff;
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.video-play svg { inline-size: 22px; block-size: 22px; margin-left: 3px; }
.video-card:hover .video-play { background: var(--accent); transform: translate(-50%, -50%) scale(1.06); }
.video-time {
  position: absolute; inset-block-end: var(--s-2); inset-inline-start: var(--s-2);
  padding: 1px 8px; border-radius: 6px;
  background: rgb(0 0 0 / .74); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.7;
}
.video-body { padding: var(--s-4) var(--s-5) var(--s-5); display: grid; gap: var(--s-2); align-content: start; flex: 1; }
.video-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); color: var(--text-muted); }
.video-body .h4 { margin: 0; }
.video-body .h4 a { color: inherit; text-decoration: none; }
.video-body .h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.video-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.tag {
  display: inline-flex; align-items: center;
  min-block-size: 32px; padding-inline: var(--s-3);
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  font-size: 13px; text-decoration: none;
}
.tag:hover, .tag.is-on { border-color: var(--accent); color: var(--accent-ink); }
.tag.is-on { background: var(--accent-soft); }
.video-cloud { margin-block-start: var(--s-8); display: grid; gap: var(--s-3); }
.video-cloud .h4 { margin: 0; }

/* The film's own page. */
.video-layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .video-layout { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s-8); align-items: start; }
  .video-aside { position: sticky; inset-block-start: calc(var(--header-h, 72px) + var(--s-4)); }
}
.video-main { display: grid; gap: var(--s-5); min-inline-size: 0; }
.video-head { display: grid; gap: var(--s-3); }
.video-head .h2, .video-head .eyebrow, .video-head .lead { margin: 0; }
.video-head .eyebrow { text-decoration: none; }
.video-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; color: var(--text-muted); font-size: 14px; }
.video-nofile { display: grid; place-items: center; text-align: center; padding: var(--s-5); color: var(--text-muted); }
.video-nofile p { position: static; }
.video-text { display: grid; gap: var(--s-3); padding-block-start: var(--s-5); border-block-start: 1px solid var(--border); }
.video-text .h3 { margin: 0; }
.video-aside { display: grid; gap: var(--s-4); align-content: start; }
.video-aside .card { display: grid; gap: var(--s-3); }
.video-aside .h4 { margin: 0; }
.video-families { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.video-families a { display: flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.video-families a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .video-thumb img, .video-play { transition: none; }
  .video-card:hover .video-thumb img { transform: none; }
}

/* ============================================================================
   ARTICLES, REDONE
   Every card the same shape, every picture framed the same way, and a body that looks
   the way it was typed. The client's words: the cards were uneven and the pictures sat
   in their frames at whatever angle they happened to have.
   ============================================================================ */

/* ── the topics, a row above the list ───────────────────────────────────── */
.topic-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-6);
}
.topic {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 44px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: .9375rem;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), background-color var(--dur-micro) var(--ease);
}
.topic .count { font-size: .8125rem; color: var(--text-faint); }
.topic:hover { color: var(--text); border-color: var(--text-faint); text-decoration: none; }
.topic.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.topic.is-on .count { color: rgba(255, 255, 255, .8); }

/* ── the grid and the card ──────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .blog-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }

.blog-card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.blog-card:hover,
.blog-card:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -22px color-mix(in srgb, var(--text) 55%, transparent);
}

/* One proportion for every picture. The photograph is contained, not cropped — these
   are cut-out shots of whole cabinets, and a tall one cropped to a landscape frame is
   half a cabinet — and it fills the frame in whichever direction it is longer, so a wide
   panel and a slim one come out the same size on the page. */
.blog-figure {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, var(--surface-2, var(--surface-inset)) 0%, var(--surface-inset) 100%);
  border-block-end: 1px solid var(--border);
}
/* Placed, not flowed: a tall photograph in a grid cell makes the cell as tall as the
   photograph, and the frame stops being a frame. */
.blog-figure > img {
  position: absolute;
  inset: var(--s-4);
  inline-size: calc(100% - 2 * var(--s-4));
  block-size: calc(100% - 2 * var(--s-4));
  object-fit: contain;
  transition: transform 520ms var(--ease);
}
.blog-card:hover .blog-figure > img { transform: scale(1.04); }
.blog-figure-logo { position: absolute; inset: 0; display: grid; place-items: center; opacity: .55; }
.blog-figure-logo img { inline-size: 62%; block-size: auto; }

.blog-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  flex: 1;
  padding: var(--s-5);
}
.blog-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  /* Two lines, always: a one-line title would otherwise pull its card shorter. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 3.5em;
}
.blog-title a { color: inherit; text-decoration: none; }
.blog-title a:hover { color: var(--accent-ink); }
.blog-excerpt {
  margin: 0;
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--s-2);
  color: var(--text-faint);
  font-size: .8125rem;
}
.blog-finder { margin-block-start: var(--s-6); text-align: center; }

/* ── the article ────────────────────────────────────────────────────────── */
.article-figure {
  position: relative;
  aspect-ratio: 16 / 9;
  max-block-size: 440px;
  inline-size: 100%;
  margin: var(--s-5) auto var(--s-6);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 50% 40%, var(--surface-2, var(--surface-inset)) 0%, var(--surface-inset) 100%);
}
.article-figure img {
  position: absolute;
  inset: var(--s-5);
  inline-size: calc(100% - 2 * var(--s-5));
  block-size: calc(100% - 2 * var(--s-5));
  object-fit: contain;
}
.article-end { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-7); }

/* ── a body typed as plain text (see App\Support\RichText) ──────────────── */
.prose p { margin-block: 0; }
.prose h2, .prose h3, .prose h4 { line-height: 1.6; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.2rem; margin-block-start: var(--s-6); }
.prose h4 { font-size: 1.05rem; margin-block-start: var(--s-5); }
.prose .lead-in { margin-block-end: calc(var(--s-3) * -1); }

.prose .plain-list { list-style: none; padding: 0; margin-inline: 0; display: grid; gap: var(--s-3); }
.prose .plain-list > li { display: flex; align-items: flex-start; gap: var(--s-3); margin: 0; }
.prose .plain-list > li + li { margin-block-start: 0; }
/* A plain dash or bullet becomes the page's own: a small accent dot. */
.prose .plain-list:not(.is-marked) > li::before {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-block-start: .95em;
  border-radius: 50%;
  background: var(--accent);
}
/* A number or an emoji keeps exactly what the author typed. */
.prose .plain-list .mark {
  flex: none;
  min-inline-size: 2.2ch;
  color: var(--accent-ink);
  font-weight: 700;
  text-align: start;
}
.prose .plain-list.is-pictograph .mark { min-inline-size: 1.8em; font-size: 1.1em; line-height: 1.7; }
.prose .plain-list .item { min-inline-size: 0; }

.prose blockquote {
  margin-inline: 0;
  padding: var(--s-4) var(--s-5);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}
.prose blockquote p + p { margin-block-start: var(--s-3); }
.prose hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--s-6); }
.prose strong { font-weight: 700; }

/* ============================================================================
   PROJECTS, REDONE
   The client's posters are finished designs, so they are shown whole and in one frame:
   the films vertical (9:16) and all alike, the wall 4:5 and all alike. What replaced was
   cards of three different shapes with the pictures cut off in some and padded with blur
   in others.
   ============================================================================ */

.proj-stats { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.proj-stats li {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); font-size: .9375rem;
}
.proj-stats b { color: var(--text); font-size: 1.125rem; }

/* ── the films ──────────────────────────────────────────────────────────── */
.proj-films {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0; padding: 0; list-style: none;
}
.proj-film {
  position: relative; display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-inset);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.proj-film > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.proj-film:hover, .proj-film:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--text) 60%, transparent);
}
/* Physical left/top: centred the same way in every language. */
.proj-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  inline-size: 58px; block-size: 58px; border-radius: 50%;
  background: rgba(214, 40, 40, .94); color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform var(--dur) var(--ease);
}
.proj-play svg { inline-size: 24px; block-size: 24px; margin-left: 3px; }
.proj-film:hover .proj-play { transform: translate(-50%, -50%) scale(1.1); }
.proj-film-title { margin: var(--s-3) 0 0; text-align: center; font-size: .9375rem; font-weight: 600; line-height: 1.7; }
.proj-film-title a { color: inherit; text-decoration: none; }
.proj-film-title a:hover { color: var(--accent-ink); }

@media (max-width: 1000px) {
  /* Five across no longer fits; one row that scrolls sideways does, and the next card
     peeking in says so. */
  .proj-films {
    display: flex; gap: var(--s-3);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-block-end: var(--s-2); scrollbar-width: thin;
  }
  .proj-films > li { flex: 0 0 min(46vw, 230px); scroll-snap-align: start; }
}

/* ── the wall ───────────────────────────────────────────────────────────── */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 1000px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .proj-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }

.proj-card {
  display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.proj-card:hover, .proj-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--text) 60%, transparent);
}
.proj-figure { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-inset); }
.proj-figure > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform 520ms var(--ease); }
.proj-card:hover .proj-figure > img { transform: scale(1.03); }
.proj-badge {
  position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: rgba(10, 18, 30, .78); color: #fff; font-size: .75rem; font-weight: 600;
}
.proj-badge svg { inline-size: 12px; block-size: 12px; }
.proj-body { display: grid; gap: 2px; align-content: start; padding: var(--s-4) var(--s-5) var(--s-5); min-block-size: 5.6rem; }
.proj-title { margin: 0; font-size: 1.0625rem; line-height: 1.7; }
.proj-title a { color: inherit; text-decoration: none; }
.proj-title a:hover { color: var(--accent-ink); }
.proj-place { margin: 0; color: var(--text-muted); font-size: .875rem; }

.proj-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--surface);
}
.proj-cta h2 { margin: 0 0 var(--s-2); }
.proj-cta p { margin: 0; color: var(--text-muted); }

/* ── a project's own page ───────────────────────────────────────────────── */
.proj-detail {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 400px);
  justify-content: center;
  align-items: start;
  gap: var(--s-6);
  margin-block-start: var(--s-5);
}
.proj-detail.is-single { grid-template-columns: minmax(0, 560px); }
@media (max-width: 960px) {
  .proj-detail, .proj-detail.is-single { grid-template-columns: minmax(0, 560px); }
}
.proj-hero { margin: 0; }
.proj-hero-link {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-inset);
}
.proj-hero-link img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.proj-side { display: grid; gap: var(--s-4); align-content: start; }

.proj-player {
  position: relative; overflow: hidden;
  inline-size: 100%; margin-inline: auto;
  border-radius: var(--radius-lg); background: #000;
}
.proj-player.is-video { aspect-ratio: 9 / 16; max-block-size: 700px; }
.proj-player.is-embed { aspect-ratio: 16 / 9; }
.proj-player video, .proj-player iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; object-fit: contain; }

.proj-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.proj-thumbs a {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-inset);
}
.proj-thumbs img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ── the film in a dialog ───────────────────────────────────────────────── */
.film-dialog {
  padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden;
  inline-size: min(94vw, 440px); max-block-size: 96vh;
  background: #05090F; color: #fff;
}
.film-dialog[open] { display: flex; flex-direction: column; }
.film-dialog::backdrop { background: rgba(7, 14, 21, .86); }
.film-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.film-dialog-title { margin: 0; min-inline-size: 0; font-size: .9375rem; font-weight: 600; }
.film-dialog-video { display: block; inline-size: 100%; aspect-ratio: 9 / 16; max-block-size: calc(96vh - 64px); background: #000; object-fit: contain; }

/* ============================================================================
   A SEPARATE AGENCY'S CATALOGUE — Liftena
   Its own header, in its own colour, above the ordinary catalogue.
   ============================================================================ */
.agency {
  border-block: 1px solid var(--border);
  background:
    radial-gradient(560px 280px at 92% 0%, rgba(10, 154, 205, .20), transparent 70%),
    linear-gradient(135deg, #0A2234 0%, #0B3048 100%);
  color: #fff;
}
.agency-inner {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  padding-block: var(--s-7);
}
@media (max-width: 860px) {
  .agency-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-6); }
}
.agency-mark {
  display: grid; place-items: center;
  padding: var(--s-6);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .04);
}
.agency-mark img { display: block; inline-size: min(100%, 280px); block-size: auto; }
.agency-copy { display: grid; gap: var(--s-3); justify-items: start; }
.agency .eyebrow { color: #6FD3F5; }
.agency .h1 { color: #fff; margin: 0; }
.agency .lead { color: rgba(255, 255, 255, .82); margin: 0; }
.agency .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .4); background: transparent; }
.agency .btn-secondary:hover { background: rgba(255, 255, 255, .12); }
.agency-soon { margin-block: var(--s-6); }

/* The way through the training gate: one button, and a line under it. */
.gate-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.gate-actions .btn { min-inline-size: 16rem; justify-content: center; }
@media (max-width: 520px) { .gate-actions .btn { inline-size: 100%; min-inline-size: 0; } }

/* A film's cover above its gate, when the gate is standing on one film's address. */
.gate-cover {
  display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--border);
}

/* A project with no poster of its own: the brand stands in the frame, and a project with a
   film and nothing else is that film alone, centred. */
.proj-figure-logo { position: absolute; inset: 0; display: grid; place-items: center; opacity: .5; }
.proj-figure-logo img { inline-size: 58%; block-size: auto; }
.proj-detail.is-side-only { grid-template-columns: minmax(0, 420px); }

/* The first block after the page heading sits close to it; the sections below keep their air. */
.section-sm + .proj-section { padding-block-start: var(--s-4); }

/* The heading block of the projects page hands over to the first row without a gap of its own. */
.proj-intro { padding-block-end: var(--s-6); }
.proj-intro .section-head { margin-block-end: 0; }

/* ── Liftena's photographs ───────────────────────────────────────────────────
   Shot on near-black with a cyan glow, not on white like Arkel's. Set on the pale plinths
   the Arkel pictures stand on, each would be a black rectangle in a light frame, so wherever
   one is shown its frame takes the photograph's own colour and the picture fills it. The
   file's folder is what marks it, found with :has(), so no template has to know; in a
   browser without it the photograph still shows, in the ordinary frame. */
.p-card .media:has(img[src*="/catalogue/liftena/"]) { background: #00060d; }
.p-card .media:has(img[src*="/catalogue/liftena/"]) img { padding: 0; inset: 0; block-size: 100%; }
.p-card .media:has(> .badge):has(img[src*="/catalogue/liftena/"]) img { inset-block-start: 0; block-size: 100%; }

.pv-stage:has(> img[src*="/catalogue/liftena/"]) {
  --text: #F5F7FA;
  padding: 0;
  background: #00060d;
  border-color: #14222f;
}
.pv-stage:has(> img[src*="/catalogue/liftena/"]) img { mix-blend-mode: normal; }

.pv-thumbs button:has(> img[src*="/catalogue/liftena/"]) { padding: 0; overflow: hidden; background: #00060d; }
.pv-thumbs button:has(> img[src*="/catalogue/liftena/"]) img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════ PRODUCT · GUIDE, PRICE, QUESTIONS
   The text under the specification: what the part is for, how to choose one, what it
   costs and the questions people ask. Prose on the left, the way on to other pages on
   the right; one column on a phone. */
.pv-seo { border-block-start: 1px solid var(--border); }
.pv-seo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: var(--s-8);
  align-items: start;
}
.pv-seo-main { max-inline-size: 78ch; }
.pv-seo-main > h2 { font-size: 1.35rem; margin-block-start: var(--s-7); }
.pv-seo-main > h2:first-child { margin-block-start: 0; }
.pv-seo-main > h3 {
  font-size: 1.05rem; line-height: 1.8; margin-block-start: var(--s-5);
  color: var(--text);
}
.pv-seo-main > p { font-size: 16px; line-height: 2.05; }
.pv-seo-main > h3 + p { margin-block-start: var(--s-2); }
.pv-seo-aside { display: grid; gap: var(--s-4); position: sticky; inset-block-start: calc(var(--header-h, 72px) + var(--s-4)); }
.pv-seo-box {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pv-seo-box h2 { margin-block-end: var(--s-3); }
.pv-seo-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pv-seo-box a { display: block; padding-block: var(--s-1); line-height: 1.8; color: var(--accent-ink); }
.pv-seo-box a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .pv-seo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .pv-seo-aside { position: static; }
}

/* ═══════════════════════════════════════════════════════ LONG COPY UNDER A PAGE
   The text written for search and for the buyer who reads before they ask: a group's
   description, how to choose, the questions. Below the grid or the tool, on the page's own
   background, in the width a paragraph reads at. */
.seo-copy { border-block-start: 1px solid var(--border); background: var(--bg-alt); }
.seo-copy .prose { max-inline-size: 82ch; }
.seo-copy .prose > h2 { font-size: 1.4rem; margin-block-start: var(--s-7); }
.seo-copy .prose > h2:first-child { margin-block-start: 0; }
.seo-copy .prose h3 { font-size: 1.08rem; line-height: 1.8; margin-block-start: var(--s-5); }
.seo-copy .prose p { font-size: 16px; line-height: 2.05; }
.seo-copy .prose h3 + p { margin-block-start: var(--s-2); }
.seo-copy .prose ul { display: grid; gap: var(--s-2); }
.seo-copy .prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.seo-copy .prose ul { list-style: none; padding-inline-start: 0; margin-inline: 0; }
.seo-copy .prose li { position: relative; padding-inline-start: var(--s-5); line-height: 1.95; }
.seo-copy .prose li::before {
  content: ''; position: absolute; inset-inline-start: 4px; inset-block-start: .9em;
  inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--accent);
}