/* ==========================================================================
   Solland theme styles
   --------------------------------------------------------------------------
   Visual brief: white ground, dark grey text, one restrained construction
   colour (deep slate blue), a warm accent reserved for CTAs. Large clear
   product photography, an even grid, no gradients on body copy, no decorative
   effects competing with the product images.

   Sections
     1  Design tokens
     2  Reset and base type
     3  Layout primitives
     4  Buttons and form controls
     5  Header, utility bar, navigation
     6  Hero carousel
     7  Trust strip and data band
     8  Section headers and cards
     9  Product page
    10  Taxonomy / pillar page
    11  Comparison table, FAQ, tables
    12  Video
    13  Blog and articles
    14  Inquiry band and forms
    15  Footer, sticky CTA, floating buttons
    16  Pagination, utilities, screen-reader
    17  Print
    18  Responsive (kept last so its rules win)
   ========================================================================== */

/* === 1. Design tokens ==================================================== */

:root {
  /* Deep slate blue: reads as a building-material brand rather than a
     consumer-decor brand, and stays quiet behind product photography. */
  --primary:        #1d3a5f;
  --primary-dark:   #14293f;
  --primary-light:  #2f5c92;
  --primary-wash:   #eef2f7;

  /* Warm accent, used only for actions. A site where everything is orange
     is a site where nothing is. */
  --accent:         #d1651a;
  --accent-dark:    #b05414;
  --accent-wash:    #fdf1e8;

  --ink:            #21262d;   /* body copy */
  --ink-strong:     #14181d;   /* headings */
  --ink-muted:      #5c6672;   /* secondary */
  --ink-faint:      #8a929c;

  --line:           #e3e6ea;
  --line-soft:      #eef0f3;
  --bg:             #ffffff;
  --bg-alt:         #f6f7f9;
  --bg-dark:        #1b2430;

  --ok:             #1f7a4d;
  --warn:           #9a6a00;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1280px;
  --wrap-narrow: 820px;
  --gap: 24px;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(20, 25, 33, .06);
  --shadow-md: 0 2px 10px rgba(20, 25, 33, .08);
  --shadow-lg: 0 8px 28px rgba(20, 25, 33, .12);

  --header-h: 72px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* === 2. Reset and base type ============================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img, picture, video, svg, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--ink-strong);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: color .15s var(--ease);
}
a:hover { color: var(--accent-dark); }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

strong, b { font-weight: 650; color: var(--ink-strong); }

table { border-collapse: collapse; width: 100%; }

code, kbd, pre { font-family: var(--mono); font-size: .9em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--primary-light);
  background: var(--primary-wash);
  color: var(--ink-strong);
}

::selection { background: var(--primary); color: #fff; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* === 3. Layout primitives ================================================ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.site-main { min-height: 50vh; }

.section { padding: clamp(36px, 4.2vw, 62px) 0; }
.section--alt { background: var(--bg-alt); }

.block { margin: 0 0 clamp(30px, 3.6vw, 52px); }
.block:last-child { margin-bottom: 0; }

.block-title {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--line);
}

.block__note { font-size: .9rem; color: var(--ink-muted); margin-top: .75rem; }
.block__more { margin-top: 1.25rem; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/*
 * The seven decorative-surface categories are a catalogue index, and they read
 * better as a dense wall than as three tall rows. Four across fits them in two
 * rows: the block goes 1716px -> 1154px and nothing is hidden.
 */
@media (min-width: 1100px) {
  .section--pillars .grid--3 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

.sec-head { margin-bottom: 2rem; max-width: 760px; }
.sec-eyebrow {
  margin: 0 0 .4rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary-light);
}
.sec-title { margin: 0 0 .6rem; }
.sec-intro { margin: 0; color: var(--ink-muted); font-size: 1.05rem; }

.sec-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-weight: 600;
}
.sec-more:hover { text-decoration: none; }

.arr { transition: transform .18s var(--ease); }
a:hover .arr { transform: translateX(3px); }

.eyebrow {
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: .5rem;
}
.lead { font-size: 1.15rem; color: var(--ink-muted); }

/* === 4. Buttons and form controls ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .1s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .55rem 1.1rem; font-size: .875rem; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn--outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: #fff; }

.btn--ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(47, 92, 146, .12);
}
textarea { resize: vertical; min-height: 96px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235c6672' stroke-width='1.8' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2.2rem;
}
label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }

/* === 5. Header =========================================================== */

.utility-bar {
  background: var(--bg-dark);
  color: #cbd3dc;
  font-size: .82rem;
}
.utility-bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  flex-wrap: wrap;
}
.utility-bar__msg { margin: 0; color: #9aa5b1; }
.utility-bar__links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.utility-bar__links li { margin: 0; }
.utility-bar__links a { color: #dfe5eb; }
.utility-bar__links a:hover { color: #fff; }

.solland-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.header-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* Logo: plain <div class="logo">. the_custom_logo() emits its own <a>, so no
   extra anchor may wrap it. */
.logo { flex: 0 0 auto; display: flex; align-items: center; }
/*
 * The SOLLAND mark is a stacked lockup — hexagon above the wordmark — so it
 * carries its own proportions and needs more height than a single-line logo.
 * 46px was set for a wide one-line lockup and squeezed the hexagon down to
 * roughly 20px, which read as a smudge next to the nav.
 */
.logo img,
.custom-logo { max-height: 64px; width: auto; display: block; }
/* The registered mark is a stacked lockup, so give it its own box instead of
   inheriting the one-line wordmark height. */
.logo__mark { display: flex; align-items: center; text-decoration: none; }
.logo__mark img { max-height: 62px; width: auto; display: block; }
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name { font-size: 1.35rem; font-weight: 800; color: var(--ink-strong); letter-spacing: -.02em; }
.logo__tag { font-size: .68rem; color: var(--ink-muted); letter-spacing: .04em; text-transform: uppercase; }

.primary-nav { flex: 1 1 auto; }
.nav-menu { display: block; }
.nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
/*
 * WordPress emits .menu-item, not .nav-item. The old selector block matched
 * nothing, so the sub-menu stayed at opacity 0 / visibility hidden for good:
 * the Products dropdown never opened and the top level read as one run of
 * undifferentiated words. Both class names are kept so a hand-built fallback
 * menu (solland_fallback_menu(), which uses .nav-item) keeps working.
 */
.nav-item,
.menu-item { position: relative; margin: 0; }
.nav-item > a,
.nav-item__link,
.menu-item > a {
  display: block;
  padding: .6rem .8rem;
  font-size: .94rem;
  font-weight: 550;
  color: var(--ink);
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-item > a:hover, .nav-item__link:hover,
.menu-item > a:hover,
.menu-item.current-menu-item > a,
.menu-item.current-menu-parent > a,
.menu-item.current_page_item > a { color: var(--primary); background: var(--primary-wash); }

/* Caret marks an item that actually opens something. */
.menu-item-has-children > a::after,
.nav-item--has-children > a::after {
  content: "";
  display: inline-block;
  width: .4em;
  height: .4em;
  margin-left: .45em;
  vertical-align: .28em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s var(--ease);
}
.menu-item-has-children:hover > a::after,
.menu-item-has-children:focus-within > a::after { transform: rotate(225deg); }

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 70;
}
.nav-item:hover > .sub-menu,
.nav-item:focus-within > .sub-menu,
.menu-item:hover > .sub-menu,
.menu-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sub-menu .menu-item,
.sub-menu .nav-item { margin: 0; }
.sub-menu .menu-item > a,
.sub-menu .nav-item > a {
  display: block;
  padding: .55rem 1.1rem;
  font-size: .9rem;
  font-weight: 400;
  color: var(--ink);
  border-radius: 0;
  white-space: normal;
}
.sub-menu .menu-item > a:hover,
.sub-menu .nav-item > a:hover { background: var(--primary-wash); color: var(--primary); }
.sub-menu .menu-item--hub > a { font-weight: 650; color: var(--primary-light); border-top: 1px solid var(--line-soft); margin-top: .25rem; padding-top: .7rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .5rem .6rem;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 20px; }
.nav-toggle__bars i {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 4px 0;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}

.header-cta { display: flex; gap: .5rem; flex: 0 0 auto; }

.page-top { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: .75rem 0; font-size: .85rem; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; color: var(--ink-muted); }
.crumbs li + li::before { content: "/"; color: var(--ink-faint); }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* === 6. Hero ============================================================= */

.hero { position: relative; background: var(--bg-dark); overflow: hidden; }
.hero__track { position: relative; }
.hero__slide {
  display: none;
  position: relative;
  min-height: clamp(560px, 78vh, 780px);
  align-items: center;
}
.hero__slide.is-active { display: flex; }

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*
 * The scrim is a sibling overlay, not a background on the <img>.
 * A background set on a replaced element paints behind the image and is
 * completely invisible, so the headline sat directly on a bright chandelier
 * and became unreadable at desktop widths. An ::after on the wrapper stacks
 * above the image and below .hero__inner (z-index 1).
 */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Left-weighted so the headline stays legible over any photograph while the
     right-hand side — where the room or product sits — stays bright. */
  background:
    linear-gradient(100deg, rgba(15, 22, 31, .86) 0%, rgba(15, 22, 31, .7) 45%, rgba(15, 22, 31, .22) 75%, rgba(15, 22, 31, .06) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.hero__copy { max-width: 620px; color: #fff; padding: 60px 0; }

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .8rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero__title { color: #fff; margin-bottom: 1rem; text-wrap: balance; }
.hero__sub { font-size: clamp(1rem, 1.6vw, 1.18rem); color: rgba(255, 255, 255, .88); margin-bottom: 1.75rem; max-width: 34em; }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero__cta .btn--outline { border-color: rgba(255, 255, 255, .7); color: #fff; }
.hero__cta .btn--outline:hover { background: #fff; color: var(--ink-strong); }

.hero__certs { display: flex; gap: .6rem; flex-wrap: wrap; list-style: none; margin: 2rem 0 0; padding: 0; }
.hero__certs li {
  margin: 0;
  padding: .35rem .8rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 600;
  color: #e8edf2;
}

.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .16s var(--ease);
}
.hero__nav:hover { background: rgba(255, 255, 255, .28); }
.hero__nav--prev { left: 24px; }
.hero__nav--next { right: 24px; }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.hero__dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background-color .16s var(--ease), width .16s var(--ease);
}
.hero__dot.is-active { background: #fff; width: 46px; }

/* === 7. Trust strip and data band ======================================== */

.trust-strip { background: var(--primary); color: #fff; padding: 1.5rem 0; }
.trust-strip__list {
  display: flex;
  justify-content: space-around;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.trust-strip__item { margin: 0; text-align: center; }
.trust-strip__num { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.1; }
.trust-strip__lbl { display: block; font-size: .82rem; color: rgba(255, 255, 255, .78); margin-top: .15rem; }

.databand { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.5rem 0; }
.databand__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.databand__list li { margin: 0; text-align: center; }
.databand__num { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; color: var(--primary); line-height: 1.1; }
.databand__lbl { display: block; font-size: .85rem; color: var(--ink-muted); margin-top: .3rem; }

.trust-band { background: var(--primary-wash); border-top: 1px solid var(--line); padding: 2rem 0; }
.trust-band__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-band__list li { margin: 0; }
.trust-band__v { display: block; font-weight: 750; color: var(--primary); font-size: 1.05rem; }
.trust-band__l { display: block; font-size: .82rem; color: var(--ink-muted); }

/* === 8. Section headers and cards ======================================== */

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.card:hover { border-color: #cfd6de; box-shadow: var(--shadow-md); transform: translateY(-2px); }

.card__media {
  display: block;
  position: relative;
  /*
   * 16:10 rather than 4:3. Four card grids stack down the homepage; at 4:3 each
   * row of media is ~330px tall at 1440px, and the accumulated height was the
   * single biggest reason the page ran to ten screens. 16:10 keeps the card
   * readable and reclaims ~55px per row.
   */
  aspect-ratio: 16 / 10;
  background: var(--bg-alt);
  overflow: hidden;
}

/*
 * Text-only article card header.
 *
 * None of the 20 legacy articles contains a photograph of its own, so the
 * cards have no media area. A tinted band carrying the category keeps the grid
 * visually even without implying an illustration exists. Sizing it to the same
 * 4:3 as an image would leave a large empty block; a slim band reads as
 * intentional.
 */
.card--post--bare .card__band {
  padding: 1.5rem 1.25rem;
  background: linear-gradient(135deg, var(--primary-wash), #e3eaf3);
  border-bottom: 3px solid var(--primary);
}
.card__band-cat {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.card--post--bare .card__meta { margin-top: .9rem; }
.card__media img,
.card__media picture { width: 100%; height: 100%; }
.card__media img { object-fit: cover; transition: transform .35s var(--ease); }
.card:hover .card__media img { transform: scale(1.035); }
.card__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: .25rem .6rem;
  background: rgba(255, 255, 255, .95);
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 650;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.35rem; }
.card__sub { margin: 0 0 .35rem; font-size: .8rem; color: var(--ink-muted); font-weight: 600; }
.card__title { margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.3; }
.card__title a { color: var(--ink-strong); }
.card__title a:hover { color: var(--primary-light); }
.card__text { margin: 0 0 .75rem; font-size: .92rem; color: var(--ink-muted); }
.card__meta { margin: 0 0 .5rem; font-size: .8rem; color: var(--ink-faint); display: flex; gap: .75rem; }
.card__cta { margin-top: auto; font-size: .88rem; font-weight: 650; color: var(--primary-light); display: inline-flex; gap: .35rem; }
.card__foot {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.card__sku { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); }

.card__specs { list-style: none; margin: 0 0 .85rem; padding: 0; font-size: .85rem; }
.card__specs li { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem 0; margin: 0; border-bottom: 1px dotted var(--line); align-items: flex-start; }
.card__specs li:last-child { border-bottom: 0; }
.cs__k { flex: 0 0 auto; color: var(--ink-muted); }
/*
 * Spec values can be a long size list. Without clamping they ran past the card
 * edge and were cut mid-token ("…1830x366"), which reads as a rendering fault
 * rather than as brevity. Two lines with an ellipsis ends the line cleanly.
 */
.cs__v {
  font-weight: 600;
  text-align: right;
  color: var(--ink-strong);
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cap {
  padding: 1.4rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cap__title { font-size: 1.05rem; margin-bottom: .5rem; }
.cap__text { margin: 0; font-size: .92rem; color: var(--ink-muted); }

.gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.gallery-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gallery-grid__item { margin: 0; }
.gallery-grid__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }

/*
 * Factory page with a one-photo library.
 *
 * A single image inside a "photo gallery" heading reads as a failed load, so
 * the thin-library case drops the gallery framing: one photo at a readable
 * size with an honest caption, followed by what the base actually does.
 */
.factory-solo { margin: 0 0 1.5rem; }
.factory-solo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); }
.factory-solo__cap {
  margin-top: .75rem;
  padding: .85rem 1.1rem;
  background: var(--primary-wash);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--ink-muted);
}

/* Legacy deep-link targets: present in the DOM, zero visual footprint. */
.gallery-anchors span { display: block; height: 0; overflow: hidden; }

.hub-bar { background: var(--bg-dark); color: #fff; padding: clamp(40px, 5vw, 64px) 0; }.hub-bar__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hub-bar__eyebrow { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: #9fb3cc; font-weight: 650; }
.hub-bar__title { color: #fff; margin-bottom: .75rem; }
.hub-bar__text { color: rgba(255, 255, 255, .75); margin-bottom: 1.5rem; }
.hub-bar__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.hub-bar__links li { margin: 0; }
.hub-bar__links a {
  display: block;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  color: #e4eaf1;
  font-size: .9rem;
  font-weight: 550;
}
.hub-bar__links a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Category list rows (hub pages). */
.cat-list, .doc-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cat-list__row + .cat-list__row, .doc-list__row + .doc-list__row { border-top: 1px solid var(--line); }
.cat-list__row a, .doc-list__row a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  color: var(--ink);
}
.cat-list__row a:hover, .doc-list__row a:hover { background: var(--primary-wash); text-decoration: none; }
.cat-list__name, .doc-list__name { flex: 1; font-weight: 600; color: var(--ink-strong); }
.cat-list__count, .doc-list__meta { font-size: .85rem; color: var(--ink-muted); }
.cat-list__go, .doc-list__go { color: var(--accent); font-weight: 700; }

.cat-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.cat-chips li { margin: 0; }
.cat-chips a {
  display: inline-block;
  padding: .5rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 550;
  color: var(--ink);
}
.cat-chips a:hover { border-color: var(--primary); color: var(--primary); }

.sample-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sample-list li { margin: 0; }
.sample-list label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .85rem;
  align-items: baseline;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  margin: 0;
  font-weight: 500;
}
.sample-list label:hover { border-color: var(--primary-light); background: var(--primary-wash); }
.sample-list input { width: 18px; height: 18px; accent-color: var(--primary); }
.sample-list__name { font-weight: 650; color: var(--ink-strong); }
.sample-list__hint { grid-column: 2; font-size: .85rem; color: var(--ink-muted); font-weight: 400; }

/* === 9. Product page ==================================================== */

.product { padding-bottom: clamp(40px, 5vw, 70px); }
.product__top { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); padding-top: clamp(28px, 4vw, 48px); align-items: start; }

.gallery__main {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /*
   * The catalogue photography is 750x750 — square — because that is how the
   * legacy site shot it. A 4:3 frame with object-fit: cover therefore cut the
   * top and bottom off every product; a 1:1 frame with contain shows the whole
   * thing, and a non-square upload letterboxes instead of being cropped.
   */
  aspect-ratio: 1 / 1;
}
.gallery__main img, .gallery__main picture { width: 100%; height: 100%; }
.gallery__main img { object-fit: contain; }
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.gallery__nav:hover { background: #fff; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }

.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; list-style: none; margin: 12px 0 0; padding: 0; }
.gallery__thumbs li { margin: 0; }
.gallery__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active, .gallery__thumb:hover { border-color: var(--primary); }

.product__cat { margin: 0 0 .6rem; font-size: .85rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.product__title { margin-bottom: .5rem; }
.product__sub { font-size: 1.1rem; color: var(--ink-muted); margin-bottom: 1rem; }

.product__marks { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.mark {
  padding: .3rem .7rem;
  background: var(--primary-wash);
  border: 1px solid #d6e0ec;
  border-radius: 3px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
}
.mark--sku { font-family: var(--mono); background: var(--bg-alt); border-color: var(--line); color: var(--ink-muted); }
.mark--3d { background: var(--accent-wash); border-color: #f2d5bd; color: var(--accent-dark); }

.product__cta { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-bottom: 1.75rem; }
.product__reach { display: flex; gap: 1rem; list-style: none; margin: .25rem 0 0; padding: 0; width: 100%; }
.product__reach li { margin: 0; }
.product__reach a { font-size: .88rem; font-weight: 600; }

.product__specs { border-top: 2px solid var(--line); padding-top: 1.25rem; }
.product__specs .block-title { border: 0; padding: 0; font-size: 1.15rem; margin-bottom: .75rem; }

.spec-table { font-size: .93rem; }
.spec-table th, .spec-table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec-table thead th { background: var(--bg-alt); font-weight: 650; color: var(--ink-strong); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.spec-table tbody th { font-weight: 600; color: var(--ink-muted); width: 40%; }
.spec-table tbody tr:hover { background: var(--primary-wash); }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.feature-list li { display: flex; gap: 1rem; margin: 0; align-items: flex-start; }
.feature-list__n {
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 700;
}
.feature-list strong { display: block; margin-bottom: .15rem; }
.feature-list p { margin: 0; font-size: .93rem; color: var(--ink-muted); }

.color-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; list-style: none; margin: 0; padding: 0; }
.color-item {
  margin: 0;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.color-item__name { display: block; font-weight: 650; color: var(--ink-strong); }
.color-item__note { display: block; font-size: .85rem; color: var(--ink-muted); }

.scene-card { padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.scene-card__title { font-size: 1rem; margin-bottom: .4rem; }
.scene-card__text { margin: 0; font-size: .9rem; color: var(--ink-muted); }

/* === 10. Taxonomy / pillar page ========================================= */

.page-banner { position: relative; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.page-banner__media { position: absolute; inset: 0; overflow: hidden; }
.page-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.page-banner::after {
  /* Scrim only on the image variant; the plain variant needs none.
     The first version ran 96% white all the way across, which was right when
     the banners were flat grey placeholders and wrong the moment real
     photography arrived — the picture was there but nobody could see it.
     Now the white is concentrated behind the headline and released by the
     right-hand third, so the photo does the work and the copy stays legible. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .86) 34%, rgba(255, 255, 255, .28) 68%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.page-banner--plain::after { background: none; }

.page-banner__inner { position: relative; z-index: 1; padding: clamp(28px, 4vw, 52px) 24px; max-width: var(--wrap); }
.page-banner__title { margin-bottom: .4rem; max-width: 20ch; }
.page-banner__lead { margin: 0; max-width: 60ch; color: var(--ink-muted); font-size: 1.05rem; }
.page-banner__kicker { margin: 0 0 .3rem; font-size: .85rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--primary-light); }
.page-banner__count { margin: .5rem 0 0; font-size: .9rem; color: var(--ink-muted); }

.cat-intro { max-width: 78ch; }

.filter { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; }
.filter__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.filter__actions { display: flex; gap: .6rem; margin-top: 1rem; }

/* === 11. Comparison table, FAQ, tables =================================== */

.section--compare { background: var(--bg-alt); border-top: 1px solid var(--line); }

/*
 * Horizontal scroll container.
 *
 * `overflow-x: auto` alone is not enough: the table's min-width would still
 * contribute to the document's scroll width unless every ancestor in the
 * chain is width-constrained. max-width:100% on both the wrapper and the
 * table pins the overflow inside the wrapper so the page itself never
 * scrolls sideways on a phone.
 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-scroll > * { max-width: 100%; }

.cmp-table {
  min-width: 620px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cmp-table th, .cmp-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.cmp-table thead th { background: var(--primary); color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.cmp-table tbody th { font-weight: 650; color: var(--ink-strong); background: var(--bg-alt); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:hover td { background: var(--primary-wash); }

.cmp-notes { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.cmp-notes li { margin: 0; }
.cmp-notes a { font-weight: 600; font-size: .92rem; }

.faq-list { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 3rem;
  transition: background-color .15s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:hover { background: var(--primary-wash); }
.faq-item__a { padding: 0 1.25rem 1.15rem; color: var(--ink-muted); }
.faq-item__a p:last-child { margin-bottom: 0; }

/* === 12. Video ========================================================== */

.section--video { background: var(--bg-alt); border-top: 1px solid var(--line); }
.product-video { max-width: 960px; }

.solland-video { position: relative; background: #000; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; }
.solland-video__media, .solland-video iframe { width: 100%; height: 100%; display: block; border: 0; }
.solland-video__frame { position: relative; width: 100%; }
.solland-video.is-file { aspect-ratio: auto; }

.solland-video__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(140deg, #1b2430, #2c3b4d);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.solland-video__facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
}
.solland-video__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(209, 101, 26, .95);
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.solland-video__facade:hover .solland-video__play { transform: scale(1.08); background: var(--accent-dark); }
.solland-video__play svg { width: 34px; height: 24px; }
.solland-video__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
}

.vg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.vg-card { margin: 0; }
.vg-card__cap { margin: .65rem 0 .15rem; font-weight: 650; color: var(--ink-strong); }
.vg-card__note { margin: 0; font-size: .85rem; color: var(--ink-muted); }

/* === 13. Blog and articles ============================================== */

.article { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(40px, 5vw, 70px); min-width: 0; }

/*
 * Article + rail.
 * The article used to carry max-width:880px, which capped the whole page into
 * a single centred column and left the right half of every screen empty. The
 * width now lives on .article-layout: the body takes the flexible track and
 * the rail takes a fixed one.
 */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.article__body { max-width: 760px; }

.article__kicker {
  display: inline-block;
  margin-bottom: .7rem;
  padding: .22rem .7rem;
  background: var(--primary-wash);
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}

.article__dot { color: var(--ink-faint); }
.article__readtime { color: var(--ink-muted); }

/* --- the rail --- */
.rail { position: sticky; top: calc(var(--header-h) + 18px); }

.rail__block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.rail__title {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.rail__list { list-style: none; margin: 0; padding: 0; }
.rail__list li { border-top: 1px solid var(--line-soft); }
.rail__list li:first-child { border-top: 0; }

.rail__toc .rail__list li a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid transparent;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
}
.rail__toc .rail__list li a:hover {
  color: var(--primary);
  border-left-color: var(--accent);
}

.rail__list--guides li a { display: block; padding: 10px 0; text-decoration: none; }
.rail__date { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.rail__name { display: block; font-size: .89rem; line-height: 1.45; color: var(--ink); }
.rail__list--guides li a:hover .rail__name { color: var(--primary); }

.rail__cta { background: var(--primary-wash); border-color: #dbe3ec; }
.rail__text { font-size: .87rem; color: var(--ink-muted); margin: 0 0 14px; }

/* On a single column the rail reads as a normal block, so drop the sticky
   offset and let it sit under the article. */
@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; }
  .rail { position: static; }
  .rail__toc { order: -1; }
  .article__body { max-width: none; }
}
.article__head { margin-bottom: 1.75rem; }
.article__title { margin-bottom: .5rem; }
.article__meta { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0; font-size: .88rem; color: var(--ink-muted); }
.article__hero { margin: 0 0 2rem; }
.article__hero img { width: 100%; border-radius: var(--radius-lg); }
.article__foot { margin-top: 3rem; }

.prose { max-width: 78ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin-top: 2.25rem; padding-top: .5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose ul, .prose ol { margin-bottom: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose table { font-size: .92rem; margin: 1.5rem 0; }
.prose table th, .prose table td { padding: .55rem .7rem; border: 1px solid var(--line); text-align: left; }
.prose table thead th { background: var(--bg-alt); font-weight: 650; }
.prose > table { display: block; overflow-x: auto; }

.page-head { padding: clamp(28px, 4vw, 48px) 0 1.5rem; }
.page-head__title { margin: 0; }

/* === 14. Inquiry band and forms ========================================== */

.inquiry-band { background: var(--bg-dark); color: #fff; padding: clamp(40px, 5vw, 68px) 0; }
.inquiry-band--product { border-top: 1px solid rgba(255, 255, 255, .08); }
.inquiry-band__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.inquiry-band__title { color: #fff; margin-bottom: .75rem; }
.inquiry-band__text { color: rgba(255, 255, 255, .78); margin-bottom: 1.25rem; }
.inquiry-band__points { list-style: none; margin: 0; padding: 0; }
.inquiry-band__points li {
  position: relative;
  margin: 0 0 .55rem;
  padding-left: 1.6rem;
  color: rgba(255, 255, 255, .85);
  font-size: .93rem;
}
.inquiry-band__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.inquiry-band .block__note a { color: #9fc4ee; }
.inquiry-band--inline { margin-top: 3rem; border-radius: var(--radius-lg); }

.inq { background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: 1.75rem; }
.inq__title { margin-bottom: .4rem; font-size: 1.25rem; }
.inq__intro { font-size: .9rem; color: var(--ink-muted); margin-bottom: 1.25rem; }
.inq__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.inq__field { margin-bottom: 1rem; }
.inq__field .req { color: var(--accent); }
.inq__actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: .5rem; }
.inq__note { margin: 1rem 0 0; font-size: .8rem; color: var(--ink-muted); }
.inq__status { margin-top: .75rem; font-size: .9rem; }
.inq__status.is-ok { color: var(--ok); font-weight: 600; }
.inq__status.is-error { color: #b32d2e; font-weight: 600; }

/* Honeypot: must stay in the DOM (bots read it) but never be visible. */
.inq__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.inq.is-sent { background: var(--ok); color: #fff; }
.inq.is-sent .inq__title, .inq.is-sent .inq__intro { color: #fff; }

/* --- 14b. Inquiry dialog ------------------------------------------------
   Every quote button on the site used to be an anchor to #inquiry. On a long
   product page that threw the viewport thousands of pixels down the document
   and then left the reader there — jarring, and it lost their place. The
   buttons still carry the same href (so the page degrades to the old
   behaviour without JavaScript), but the click is intercepted and this
   overlay opens instead: the document underneath never scrolls.
   ====================================================================== */

.inq-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
.inq-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s var(--ease), visibility 0s;
}

/* Scroll lock. The padding is written by JS to exactly the scrollbar width,
   so hiding the scrollbar does not shunt the sticky header sideways. */
html.has-modal { overflow: hidden; }

.inq-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 20, 28, .58);
  -webkit-backdrop-filter: blur(6px) saturate(.85);
  backdrop-filter: blur(6px) saturate(.85);
}

.inq-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 620px;
  max-height: min(92vh, 880px);
  max-height: min(92dvh, 880px);
  background: #fff;
  border: 1px solid rgba(20, 25, 33, .06);
  border-radius: 16px;
  box-shadow:
    0 32px 80px -24px rgba(11, 17, 26, .5),
    0 4px 14px rgba(11, 17, 26, .08);
  overflow: hidden;
  transform: translateY(18px) scale(.985);
  opacity: 0;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.inq-modal.is-open .inq-modal__panel {
  transform: none;
  opacity: 1;
  transition-delay: .04s;
}

/*
 * No top accent strip. An earlier version drew a 3px band of --primary along
 * the top edge; against the darkened, blurred backdrop the navy read as a
 * black seam rather than as brand colour, and it looked like something that
 * had failed to render. The radius, the depth of the shadow and the orange
 * eyebrow already carry the hierarchy on their own.
 */

.inq-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.inq-modal__close:hover { color: var(--ink-strong); background: var(--bg-alt); }
.inq-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.inq-modal__head { padding: clamp(26px, 4vw, 34px) clamp(20px, 4vw, 36px) 0; }

.inq-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.inq-modal__eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
}

.inq-modal__title {
  margin: 0 0 .45rem;
  padding-right: 2rem;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--ink-strong);
}

.inq-modal__lead {
  margin: 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Only this region scrolls, so the heading and the trust points stay put on
   short laptop screens. */
.inq-modal__body {
  padding: 1.35rem clamp(20px, 4vw, 36px) .5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cfd5dc transparent;
}
.inq-modal__body::-webkit-scrollbar { width: 8px; }
.inq-modal__body::-webkit-scrollbar-thumb {
  background: #d6dbe1;
  border-radius: 4px;
}
.inq-modal__body::-webkit-scrollbar-thumb:hover { background: #c2c9d1; }

/* The panel is already the card — the form inside it must be invisible. */
.inq-modal .inq,
.inq-modal .inq.is-compact {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.inq-modal .inq__field { margin-bottom: .85rem; }
.inq-modal .inq__field label {
  display: block;
  margin-bottom: .32rem;
  font-size: .8rem;
  font-weight: 650;
  color: var(--ink-muted);
}
.inq-modal .inq__field input,
.inq-modal .inq__field textarea {
  padding: .7rem .85rem;
  border-radius: 8px;
  font-size: .95rem;
}
.inq-modal .inq__hp { display: none; }

/*
 * On a 720px-tall laptop the panel runs out of room before the submit button,
 * which left a half-drawn orange bar at the edge — it reads as a bug rather
 * than as "there is more below". Pinning the action row to the bottom of the
 * scroll area keeps the one control that matters always visible; the fields
 * simply pass underneath it.
 */
.inq-modal .inq__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  align-items: center;
  gap: .75rem;
  margin-top: .35rem;
  padding: .85rem 0 .6rem;
  background: #fff;
}
/*
 * The shadow only earns its place once the panel is actually scrolling: on a
 * tall screen nothing moves, and a stray line above the button looks like a
 * rule someone forgot to remove.
 */
@media (max-height: 840px) {
  .inq-modal .inq__actions { box-shadow: 0 -14px 16px -14px rgba(20, 25, 33, .16); }
}
.inq-modal .inq__actions .btn--primary { min-width: 168px; }
/* The points bar under the panel already states both of these; printing them
   again above the button was pure duplication. */
.inq-modal .inq__note { display: none; }
.inq-modal .inq__status { margin-top: .6rem; }
.inq-modal .inq.is-sent { background: transparent; color: var(--ink); }
.inq-modal .inq.is-sent .inq__title,
.inq-modal .inq.is-sent .inq__intro { color: var(--ink-strong); }

/*
 * Three equal cells rather than a wrapping flex row: wrapping left two points
 * on one line and one orphan beneath it, which read as an accident. Fixed
 * cells keep the icons on one baseline and the block the same height on every
 * page no matter how the copy is translated.
 */
.inq-modal__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem 1.1rem;
  margin: 0;
  padding: 1rem clamp(20px, 4vw, 36px) 1.15rem;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-alt);
  list-style: none;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.inq-modal__points li {
  display: grid;
  grid-template-columns: 13px 1fr;
  align-items: start;
  gap: .4rem;
  margin: 0;
}
.inq-modal__points li::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-top: .18em;
  border-radius: 50%;
  background: var(--ok);
  /* Tick drawn as a mask so it inherits nothing and stays crisp. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.6l-3.9-3.9 1.5-1.5 2.4 2.4 5.3-5.3 1.5 1.5-6.8 6.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.6l-3.9-3.9 1.5-1.5 2.4 2.4 5.3-5.3 1.5 1.5-6.8 6.8z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(36px, 5vw, 64px) 24px; align-items: start; }
.contact__list { list-style: none; margin: 1.5rem 0; padding: 0; }
.contact__list li { margin: 0 0 .85rem; }
.cl__k { display: block; font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

.search-form { display: flex; gap: .6rem; margin: 1.25rem 0; max-width: 560px; }
.search-form input[type="search"] { flex: 1; }

.empty-note {
  padding: 1.5rem;
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-muted);
}

/* === 15. Footer, sticky CTA, floating buttons ============================ */

.site-footer { background: var(--bg-dark); color: #aeb8c4; padding: clamp(40px, 5vw, 64px) 0 0; }

.footer-trust { padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 2.5rem; }
.footer-trust ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-trust li { margin: 0; }
.footer-trust__k { display: block; font-size: 1.15rem; font-weight: 750; color: #fff; }
.footer-trust__v { display: block; font-size: .82rem; color: #8d99a6; }

/*
 * Five tracks for five columns: brand, decorative surfaces, wood panels,
 * company, applications. The grid used to carry four tracks while the markup
 * held five blocks, so Applications stacked inside Company and doubled that
 * column's height — every other column then stretched to match, which is what
 * made the footer look empty on the right.
 */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.25rem;
  align-items: start;
}
.footer-title { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.footer-title--spaced { margin-top: 1.75rem; }
.footer-about { font-size: .88rem; line-height: 1.7; margin-bottom: 1.25rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .55rem; }
.footer-list a { color: #aeb8c4; font-size: .88rem; }
.footer-list a:hover { color: #fff; }

.logo--footer { margin-bottom: 1rem; }
.logo--footer img { max-height: 38px; }
.logo--footer .logo__name { color: #fff; }

.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { margin-bottom: .6rem; font-size: .88rem; }
.fc__k { display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: #7d8894; }
.footer-contact a { color: #d3dae2; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .84rem;
}
.footer-copy { margin: 0; color: #7d8894; }
.footer-legal { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin: 0; }
.footer-legal a { color: #aeb8c4; }

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  background: rgba(27, 36, 48, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(100%);
  transition: transform .25s var(--ease);
}
.sticky-cta:not([hidden]) { transform: translateY(0); }
.sticky-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 24px; flex-wrap: wrap; }
.sticky-cta__msg { margin: 0; color: #d3dae2; font-size: .9rem; font-weight: 550; }
.sticky-cta__btns { display: flex; gap: .6rem; }

.wa-bubble {
  position: fixed;
  right: 20px;
  bottom: 92px;
  z-index: 66;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem .7rem .8rem;
  background: #25d366;
  color: #fff;
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
  font-size: .88rem;
  font-weight: 650;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wa-bubble:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 10px 34px rgba(37, 211, 102, .4); }
.wa-bubble__label { display: none; }

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 66;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
}
.to-top:not([hidden]) { opacity: 1; visibility: visible; }
.to-top:hover { border-color: var(--primary); color: var(--primary); }

/* === 16. Pagination, utilities, screen-reader ============================ */

.pager { margin-top: 2.5rem; }
.pager ul { display: flex; gap: .4rem; justify-content: center; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pager li { margin: 0; }
.pager a, .pager span {
  display: block;
  min-width: 40px;
  padding: .5rem .75rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.pager [aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager__nav a { min-width: auto; }

.navigation.pagination { margin-top: 2.5rem; }
.navigation.pagination .nav-links { display: flex; gap: .4rem; justify-content: center; }
.navigation.pagination .page-numbers {
  display: block;
  min-width: 40px;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.navigation.pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 999;
  width: auto;
  height: auto;
  padding: .75rem 1.25rem;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  clip: auto;
}

/* === 17. Print ========================================================== */

@media print {
  .utility-bar, .solland-header, .sticky-cta, .wa-bubble, .to-top,
  .site-footer, .inquiry-band, .hero__nav, .hero__dots, .filter { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .wrap { max-width: 100%; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .product__top { grid-template-columns: 1fr; }
}

/* === 18. Responsive ===================================================== */

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.75rem; }
  .footer-col--about { grid-column: 1 / -1; }
}

/* Nothing on the page may exceed the viewport width. */
html, body { max-width: 100%; overflow-x: hidden; }
img, table, picture, svg, iframe { max-width: 100%; }
.prose > table { display: block; overflow-x: auto; max-width: 100%; }
.gallery-strip, .gallery-grid, .grid, .card, .spec-table { max-width: 100%; }

@media (max-width: 980px) {
  :root { --header-h: 62px; }

  /*
   * The header becomes a three-row stack: logo + toggle + CTA on row one,
   * the nav panel on row two. Without flex-wrap the three items stay on one
   * line and push the row to ~630px, which scrolls the whole page sideways
   * on a 390px phone.
   */
  .header-in {
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
    min-height: auto;
  }

  .logo {
    flex: 1 1 auto;
    min-width: 0;
    /* A long company name must not set the row width. */
    max-width: 100%;
  }
  .logo__text { min-width: 0; }
  .logo__name {
    /* Shrink before it can overflow the viewport. */
    font-size: clamp(.95rem, 4.2vw, 1.15rem);
    overflow-wrap: anywhere;
  }
  .logo__tag { font-size: .62rem; }

  /*
   * The toggle lives inside .primary-nav, and .primary-nav used to be forced to
   * a full-width row — so the header stacked into three bands on a phone
   * (utility bar, logo + CTA, then a lone hamburger) and ate roughly 150px of
   * the first screen. The nav is now width-less and the menu drops out of the
   * sticky header as an overlay, which puts logo, CTA and toggle on one row.
   */
  .nav-toggle { display: block; margin-left: 0; flex: 0 0 auto; }
  .header-cta { order: 2; flex: 0 0 auto; }
  .header-cta .btn--ghost { display: none; }
  .header-cta .btn { padding: .5rem .85rem; font-size: .82rem; white-space: nowrap; }

  .primary-nav {
    order: 3;
    flex: 0 0 auto;
    min-width: 0;
  }
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
    padding: .5rem 1.25rem .9rem;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav.is-open .nav-menu { display: block; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; }
  .nav-item > a, .nav-item__link { padding: .8rem 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 .5rem .75rem;
    padding: 0;
    min-width: 0;
  }
  .sub-menu .menu-item > a { padding: .55rem .9rem; border-bottom: 0; }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hub-bar__in { grid-template-columns: 1fr; gap: 2rem; }
  .product__top { grid-template-columns: 1fr; }
  .inquiry-band__in { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }

  .utility-bar__msg { display: none; }
  .utility-bar__in { justify-content: center; }
  /* Three links at the default gap wrapped the phone number and "Request
     samples" onto second lines inside a 34px bar. Tighten the row and drop the
     email below 520px: it is the one item nobody taps on a phone. */
  .utility-bar__links { gap: .9rem; font-size: .78rem; }
  .utility-bar__links a { white-space: nowrap; }
  @media (max-width: 520px) {
    .utility-bar__links { gap: .7rem; font-size: .74rem; }
    .utility-bar__links li:first-child { display: none; }
  }

  /*
   * Card grids stay two-up on a phone. Collapsing every grid to a single
   * column turned the homepage into 20 screens of scrolling — the seven
   * category cards alone ran 3,400px — because each card carried a full-width
   * photo. Two columns halves that and still leaves 170px per tile, which is
   * the width the big marketplaces ship on mobile.
   * .grid--2 is left alone: it holds the text-beside-image blocks, which do
   * need the full width.
   */
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /*
   * Product cards are the exception: each one carries a spec mini-table, an
   * SKU and a quote button. At half width the table truncates to "169x24mm ·
   * 4m…", the SKU wraps to two lines and the button spills out of the card.
   * They keep the full width and stack.
   */
  .section--products .grid--4 { grid-template-columns: 1fr; gap: 18px; }

  .grid--3 .card__body, .grid--4 .card__body { padding: .8rem .85rem 1rem; }
  .grid--3 .card__body h3, .grid--4 .card__body h3,
  .grid--3 .card__title, .grid--4 .card__title { font-size: 1rem; line-height: 1.28; }
  .grid--3 .card__body p, .grid--4 .card__body p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .82rem;
    line-height: 1.45;
  }

  .hub-bar__links { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .hub-bar__links a { padding: .55rem .6rem; font-size: .82rem; }

  /*
   * .gallery-strip asks for minmax(180px, 1fr), and a 358px phone screen fits
   * exactly one of those — two would need 372px. Four factory photographs then
   * stacked down 1,468px. Two fixed columns halves it.
   */
  .gallery-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .hero__slide { min-height: 520px; }
  .hero__copy { padding: 40px 0 72px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__nav { display: none; }
  /* Vertical scrim on narrow screens, applied to the same overlay. */
  .hero__media::after {
    background: linear-gradient(180deg, rgba(15, 22, 31, .72) 0%, rgba(15, 22, 31, .8) 55%, rgba(15, 22, 31, .88) 100%);
  }

  .trust-strip__list { justify-content: space-between; gap: 1rem; }
  .trust-strip__item { flex: 1 1 40%; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .inq__row { grid-template-columns: 1fr; gap: 0; }
  .inq__actions { flex-direction: column; }
  .inq__actions .btn { width: 100%; }

  .sticky-cta__in { flex-direction: column; align-items: stretch; padding: .6rem 16px; }
  .sticky-cta__msg { font-size: .82rem; text-align: center; }
  .sticky-cta__btns { justify-content: center; }
  .sticky-cta__btns .btn { flex: 1; }

  .wa-bubble { bottom: 108px; right: 14px; padding: .7rem; }
  .wa-bubble__label { display: none; }
  .to-top { right: 14px; bottom: 14px; }

  .page-banner::after { background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .92) 100%); }

  .feature-list li { flex-direction: column; gap: .5rem; }
  .search-form { flex-direction: column; }
}

@media (max-width: 480px) {
  .header-cta .btn { padding: .5rem .8rem; font-size: .82rem; }
  .cat-chips a { font-size: .85rem; padding: .45rem .8rem; }
  .databand__list { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero__slide { transition: none; }
}

/* ------------------------------------------------------------------
   Trade terms band — product page §2.4-14.
   Sits between FAQ and related products: the buyer has just read the
   spec, so the commercial terms belong there rather than above it.
   ------------------------------------------------------------------ */
.terms-band {
  background: var(--primary-wash);
  border: 1px solid #dbe3ec;
  border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
}

.terms-band__title {
  font-size: 1.06rem;
  letter-spacing: .02em;
  margin: 0 0 14px;
  color: var(--primary-dark);
}

.terms-band__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 22px;
  margin: 0;
}

.terms-band__item { margin: 0; }

.terms-band__item dt {
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 3px;
}

.terms-band__item dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.45;
}

.terms-band__note {
  margin: 16px 0 0;
  font-size: .82rem;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------
   Factory gallery — one real photo, reserved slots for the rest.
   The old site reused a single file across all five Factory pages, so
   the slots are labelled rather than blank: a visitor should read
   "record still being built", not "page is broken".
   ------------------------------------------------------------------ */
.gallery-grid--sparse {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gallery-grid__item--placeholder { margin: 0; }

.gallery-placeholder {
  aspect-ratio: 4 / 3;
  border: 1px dashed #c3cddb;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      -45deg,
      #f5f8fb 0 10px,
      #eef2f7 10px 20px
    );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  text-align: center;
}

.gallery-placeholder__label {
  font-weight: 600;
  color: var(--primary-dark);
  font-size: .94rem;
}

.gallery-placeholder__note {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.factory-gallery__note {
  margin: 16px 0 0;
  font-size: .86rem;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------
   Blog index — vertical list plus rail.
   The competitor's news page runs the same shape. A vertical list suits
   technical copy better than a card grid: the excerpt is what sells the
   guide, and thumbnails are the one thing the archive does not have.
   ------------------------------------------------------------------ */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 88px);
}

.blog-row {
  display: grid;
  /*
   * The thumbnail track is opt-in. The legacy articles carry no images, so a
   * fixed 210px column rendered as a hole beside every row and squeezed the
   * excerpt into a narrow ribbon. Templates add --has-media only when there
   * is actually something to show.
   */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.blog-row--has-media { grid-template-columns: 210px minmax(0, 1fr); }

.blog-row:first-child { border-top: 0; padding-top: 8px; }

.blog-row__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.blog-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.blog-row:hover .blog-row__media img { transform: scale(1.04); }

.blog-row__meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .5rem;
  font-size: .76rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.blog-row__title { font-size: 1.42rem; line-height: 1.25; margin: 0 0 .55rem; }
.blog-row__title a { text-decoration: none; color: var(--ink-strong); }
.blog-row__title a:hover { color: var(--primary); }

.blog-row__excerpt { font-size: .97rem; color: var(--ink-muted); max-width: 68ch; }
.blog-row__excerpt p { margin: 0 0 .9rem; }

.blog-row__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}
.blog-row__more::after { content: "\2192"; transition: transform .16s var(--ease); }
.blog-row__more:hover::after { transform: translateX(3px); }

/* Topic list inside the rail */
.rail__tags li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 7px 0;
  font-size: .89rem;
  color: var(--ink);
  text-decoration: none;
}
.rail__tags li a:hover { color: var(--primary); }
.rail__count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-alt);
  font-size: .72rem;
  color: var(--ink-muted);
  text-align: center;
}

.btn--block { display: block; width: 100%; text-align: center; }

@media (max-width: 980px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-row--has-media { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
  .blog-row__title { font-size: 1.18rem; }
}

@media (max-width: 560px) {
  .blog-row { grid-template-columns: 1fr; }
  .blog-row__media { aspect-ratio: 16 / 9; }
}


/* ------------------------------------------------------------------
   Solution page — hero, fact strip, material roles, build sequence.
   Shaped after the competitor's solutions pages, which read as a briefing
   document rather than a product page: the numbers first, then what goes
   where, then the order of work.
   ------------------------------------------------------------------ */
.sol-hero {
  background:
    linear-gradient(100deg, rgba(15, 22, 31, .93) 0%, rgba(15, 22, 31, .88) 52%, rgba(15, 22, 31, .74) 100%),
    var(--primary);
  color: #fff;
  padding: clamp(40px, 6vw, 76px) 0 clamp(36px, 5vw, 64px);
}
.sol-hero__inner { max-width: 860px; }
.sol-hero .breadcrumbs, .sol-hero .crumb { color: rgba(255, 255, 255, .7); }
.sol-hero .breadcrumbs a, .sol-hero .crumb a { color: rgba(255, 255, 255, .82); }

.sol-hero__kicker {
  margin: 0 0 .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.sol-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  color: #fff;
}
.sol-hero__lead {
  margin: 0 0 1.8rem;
  max-width: 660px;
  font-size: 1.06rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .84);
}
.sol-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.sol-hero .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.sol-hero .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); }

/* Fact strip — the four numbers, immediately under the hero */
.sol-facts { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.sol-facts__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  padding: 0;
}
.sol-fact {
  background: #fff;
  padding: 22px 18px;
  text-align: center;
}
.sol-fact__value {
  display: block;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
  letter-spacing: -.01em;
}
.sol-fact__label {
  display: block;
  margin-top: .35rem;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.35;
}

/* Section eyebrow above each block title */
.section-eyebrow {
  margin: 0 0 .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

/* Material role cards */
.role-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
  transition: box-shadow .16s var(--ease), transform .16s var(--ease);
}
.role-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.role-card__title { font-size: 1.06rem; line-height: 1.3; margin: 0; color: var(--ink-strong); }
.role-card__text { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-muted); flex: 1 1 auto; }
.role-card__link {
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}
.role-card__link::after { content: " \2192"; }
.role-card__link:hover { color: var(--accent); }

/* Numbered build sequence */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.steps__item:last-child { border-bottom: 1px solid var(--line); }
.steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-wash);
  border: 1px solid #dbe3ec;
  color: var(--primary);
  font-weight: 700;
  font-size: .98rem;
}
.steps__title { margin: 0 0 .35rem; font-size: 1.08rem; color: var(--ink-strong); }
.steps__text { margin: 0; font-size: .94rem; line-height: 1.62; color: var(--ink-muted); max-width: 720px; }

@media (max-width: 560px) {
  .steps__item { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .steps__num { width: 32px; height: 32px; font-size: .88rem; }
}


/* ------------------------------------------------------------------
   Solution hero — optional photograph layer.
   The hero already carries a dark gradient, so the photograph sits under it
   and the scrim keeps the headline legible on any exposure.
   ------------------------------------------------------------------ */
.sol-hero { position: relative; overflow: hidden; }

.sol-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sol-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Scrim sits above the photo, below the copy (z-index 1 on .sol-hero__inner). */
.sol-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(15, 22, 31, .93) 0%, rgba(15, 22, 31, .86) 52%, rgba(15, 22, 31, .7) 100%);
}
.sol-hero__inner { position: relative; z-index: 1; }

/* ------------------------------------------------------------------
   Labelled slot for a missing application photograph.
   Dashed rather than solid so it reads as a slot waiting for art, not as
   a grey box someone forgot to fill.
   ------------------------------------------------------------------ */
.sol-shot {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 44px) 0;
}
.sol-shot__inner { max-width: 860px; }

.sol-shot__label {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .24rem .75rem;
  border: 1px dashed #c3cddb;
  border-radius: 999px;
  background: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sol-shot__text {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-muted);
}


/* ------------------------------------------------------------------
   Hub pages — /solutions/ and /resources/.

   Both hubs are built so they read as complete without photography. Only
   some application pages carry a header image, and the resources hub has
   none at all, so a media-first grid would leave empty boxes on a live site.
   ------------------------------------------------------------------ */

/* --- application cards -------------------------------------------- */
.app-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.app-card:hover {
  border-color: #cfd6de;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.app-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--bg-alt);
  overflow: hidden;
}
.app-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.app-card:hover .app-card__media img { transform: scale(1.04); }

/*
 * Numbered fallback panel. The gradient is the same one the solution-page
 * hero uses, so an image-less card looks like part of the system rather than
 * a missing file.
 */
/*
 * The image-less variant is a slim labelled band, not a full-bleed panel.
 * At 3:2 it read as six dark rectangles with a floating number — closer to a
 * failed image load than a design. At 16:5 it works as a tab header: the
 * number sits right, the card body carries the name.
 */
.app-card__media--plain {
  aspect-ratio: 16 / 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background:
    linear-gradient(100deg, rgba(15, 22, 31, .94) 0%, rgba(15, 22, 31, .82) 62%, rgba(15, 22, 31, .68) 100%),
    var(--primary);
}
/* A faint rule runs the length of the band so it does not read as flat fill. */
.app-card__media--plain::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-right: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .18) 100%);
}
.app-card__index {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .55);
}

.app-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 20px 22px 24px;
  flex: 1 1 auto;
}
.app-card__title { font-size: 1.14rem; line-height: 1.3; margin: 0; }
.app-card__title a { text-decoration: none; color: var(--ink-strong); }
.app-card__title a:hover { color: var(--primary); }
.app-card__text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-muted);
  flex: 1 1 auto;
}
.app-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent-dark);
}
.app-card__cta .arr { transition: transform .16s var(--ease); }
.app-card:hover .app-card__cta .arr { transform: translateX(3px); }

/* --- documents on /resources/ ------------------------------------- */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 22px 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: box-shadow .16s var(--ease), transform .16s var(--ease), border-left-color .16s var(--ease);
}
.doc-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-left-color: var(--accent);
}
.doc-card__kind {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.doc-card__title { font-size: 1.04rem; font-weight: 650; color: var(--ink-strong); line-height: 1.3; }
.doc-card__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-muted); flex: 1 1 auto; }
.doc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent-dark);
}
.doc-card__cta .arr { transition: transform .16s var(--ease); }
.doc-card:hover .doc-card__cta .arr { transform: translateX(3px); }

/* --- standards reference ------------------------------------------ */
.std-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.std-list__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.std-list__code {
  font-size: .95rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.01em;
}
.std-list__body { display: flex; flex-direction: column; gap: .25rem; }
.std-list__title { font-size: 1rem; font-weight: 600; color: var(--ink-strong); }
.std-list__text { font-size: .92rem; line-height: 1.6; color: var(--ink-muted); }

@media (max-width: 700px) {
  .std-list__row { grid-template-columns: 1fr; gap: .4rem; }
}

/* --- closing call to action --------------------------------------- */
.hub-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding: clamp(24px, 3vw, 34px);
  background: var(--primary-wash);
  border: 1px solid #dbe3ec;
  border-radius: var(--radius-lg);
}
.hub-actions__title { margin: 0 0 .4rem; font-size: 1.22rem; color: var(--ink-strong); }
.hub-actions__text { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--ink-muted); max-width: 60ch; }
.hub-actions__links { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 900px) {
  .hub-actions { grid-template-columns: 1fr; align-items: start; }
}


/* ------------------------------------------------------------------
   Products dropdown — two columns.

   The dropdown now lists all fourteen categories plus the hub link, which is
   fifteen rows: a single column ran off the bottom of a 768px-tall viewport.
   CSS columns balance it into two without needing extra markup.
   ------------------------------------------------------------------ */
.menu-item--mega > .sub-menu {
  min-width: 520px;
  columns: 2;
  column-gap: 6px;
}
.menu-item--mega > .sub-menu > li {
  break-inside: avoid;
  page-break-inside: avoid;
}
/* Slightly tighter rows so both columns fit inside a laptop viewport. */
.menu-item--mega > .sub-menu .menu-item > a {
  padding: .46rem 1rem;
  font-size: .875rem;
}

@media (max-width: 1100px) {
  .menu-item--mega > .sub-menu { min-width: 420px; }
}

/* The collapsed mobile nav is an accordion, so it stays a single column. */
@media (max-width: 900px) {
  .menu-item--mega > .sub-menu {
    columns: 1;
    min-width: 0;
  }
  .menu-item--mega > .sub-menu .menu-item > a { padding: .55rem .9rem; }
}


/* ------------------------------------------------------------------
   Editorial hero — About and Factory.

   Dark full-bleed band with the photograph behind a scrim. The scrim is a
   pseudo-element rather than a background on the <img> for the same reason as
   the homepage hero: a background painted on a replaced element sits behind
   the image and never shows.
   ------------------------------------------------------------------ */
.ed-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  color: #fff;
  padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px);
}
.ed-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ed-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(15, 22, 31, .95) 0%, rgba(15, 22, 31, .88) 48%, rgba(15, 22, 31, .66) 100%);
}
.ed-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
}
.ed-hero .breadcrumbs, .ed-hero .crumb { color: rgba(255, 255, 255, .68); }
.ed-hero .breadcrumbs a, .ed-hero .crumb a { color: rgba(255, 255, 255, .85); }

.ed-hero__kicker {
  margin: 0 0 .8rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.ed-hero__title {
  margin: 0 0 1.1rem;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
}
.ed-hero__lead {
  margin: 0 0 1.9rem;
  max-width: 660px;
  font-size: 1.06rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, .82);
}
.ed-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.ed-hero .btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}
.ed-hero .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); }

/* --- figure band -------------------------------------------------- */
.ed-figures {
  background: var(--primary-dark);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ed-figures__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .10);
}
.ed-figure {
  background: var(--primary-dark);
  padding: 26px 16px;
  text-align: center;
}
.ed-figure__num {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}
.ed-figure__lbl {
  display: block;
  margin-top: .45rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}

/* --- two-column statement + mosaic -------------------------------- */
.ed-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.ed-split__title {
  margin: 0 0 1.1rem;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--ink-strong);
}
.ed-split__note {
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.ed-split__mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ed-mosaic__cell {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  text-decoration: none;
}
.ed-mosaic__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.ed-mosaic__cell:hover img { transform: scale(1.05); }
.ed-mosaic__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(0deg, rgba(15, 22, 31, .82) 0%, rgba(15, 22, 31, 0) 100%);
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
}

/* --- milestone rail on dark --------------------------------------- */
.ed-timeline-band {
  background: var(--bg-dark);
  color: #fff;
  padding: clamp(48px, 6vw, 84px) 0;
  margin: clamp(36px, 4vw, 56px) 0;
}
.block-title--light { color: #fff; }
.ed-timeline {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.ed-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  padding: 0 0 34px 30px;
}
.ed-timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(209, 101, 26, .18);
}
.ed-timeline__when {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  padding-top: 2px;
}
.ed-timeline__title { margin: 0 0 .4rem; font-size: 1.14rem; color: #fff; }
.ed-timeline__text { margin: 0; font-size: .95rem; line-height: 1.65; color: rgba(255, 255, 255, .72); max-width: 66ch; }

@media (max-width: 760px) {
  .ed-timeline__item { grid-template-columns: 1fr; gap: .35rem; padding-left: 22px; }
}

/* --- certification blocks ----------------------------------------- */
.ed-certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.ed-cert {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius-lg);
}
.ed-cert__code {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--primary);
}
.ed-cert__text { font-size: .9rem; line-height: 1.55; color: var(--ink-muted); }

/* ------------------------------------------------------------------
   Factory photo record.
   One real frame at display size, then labelled slots. The slots exist so a
   single photograph does not have to pretend to be a gallery.
   ------------------------------------------------------------------ */
.fac-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.fac-gallery__hero {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  position: relative;
}
.fac-gallery__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
}
.fac-gallery__hero figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 13px;
  background: linear-gradient(0deg, rgba(15, 22, 31, .84) 0%, rgba(15, 22, 31, 0) 100%);
  font-size: .82rem;
  letter-spacing: .04em;
  color: #fff;
}

.fac-gallery__slots {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}
.fac-slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: 18px 20px;
  border: 1px dashed #c8d2e0;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.fac-slot__label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}
.fac-slot__note {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .ed-split { grid-template-columns: 1fr; }
  .fac-gallery { grid-template-columns: 1fr; }
  .fac-gallery__slots { grid-template-rows: none; }
}


/* ------------------------------------------------------------------
   Editorial prose — the imported company copy on /about/.
   ------------------------------------------------------------------ */
.ed-split__lede {
  margin: 0 0 1.1rem;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink-muted);
  max-width: 52ch;
}
.ed-split__links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

.ed-prose {
  /*
   * Measure-width column, centred in the wrap. Left-aligned at 980px it left a
   * 380px hole on the right at desktop width and the page read as if the text
   * had slid off to one side. Centring the container (rather than each child)
   * is what actually works here: the per-child rule lost to `.ed-prose p {
   * margin: 0 0 1.15rem }` on specificity, so the paragraphs stayed flush left.
   */
  max-width: 74ch;
  margin-inline: auto;
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--ink-muted);
}
.ed-prose > * { max-width: 74ch; }

.ed-prose h2 {
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--ink-strong);
}
.ed-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ed-prose h3 {
  margin: 2rem 0 .6rem;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ink-strong);
}

.ed-prose p { margin: 0 0 1.15rem; }

/* Long bullet lists read better in two columns at desktop widths. */
.ed-prose ul,
.ed-prose ol {
  margin: 0 0 1.6rem;
  padding-left: 1.2rem;
  columns: 2;
  column-gap: clamp(24px, 4vw, 56px);
}
.ed-prose li {
  break-inside: avoid;
  margin-bottom: .5rem;
  max-width: 46ch;
}
.ed-prose li::marker { color: var(--accent); }

@media (max-width: 760px) {
  .ed-prose ul, .ed-prose ol { columns: 1; }
}


/* ------------------------------------------------------------------
   Sparse category grid.

   Consolidating colour and grade variants left several categories with one or
   two products. In the standard three-column grid that reads as a broken row;
   a centred auto-fit row with a capped card width looks deliberate instead.
   Applies from the taxonomy template only, so the homepage grids are untouched.
   ------------------------------------------------------------------ */
.grid--sparse {
  grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  justify-content: center;
}


/* ------------------------------------------------------------------
   Products hub — figure strip and two-column board index.

   The hub opened on a bare white banner and then a single-column list of eight
   board categories, which read as an index nobody had finished. The figures
   give the page a headline; the two-column list halves its height.
   ------------------------------------------------------------------ */
.hub-figures {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.hub-figures__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
}
.hub-figure {
  background: var(--bg-alt);
  padding: 20px 16px;
  text-align: center;
}
.hub-figure__num {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--primary);
}
.hub-figure__lbl {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Eight board categories fit in two columns without a lonely tail row. */
.cat-list--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cat-list--2col .cat-list__row + .cat-list__row { border-top: 1px solid var(--line); }
.cat-list--2col .cat-list__row:nth-child(2) { border-top: 0; }

@media (max-width: 800px) {
  .cat-list--2col { grid-template-columns: 1fr; }
  .cat-list--2col .cat-list__row:nth-child(2) { border-top: 1px solid var(--line); }
}


/* ------------------------------------------------------------------
   Plywood solutions page — scene slots and role meta.

   The scene grid holds four application photographs. While a slot has no
   image it renders a dashed labelled panel, so the page can be published
   before the photography exists without showing empty frames.
   ------------------------------------------------------------------ */
.role-card__meta {
  display: inline-block;
  align-self: flex-start;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--primary-wash);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}

.spec-scroll { overflow-x: auto; }
.spec-table--wide { min-width: 620px; }

.scene-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.scene-card {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.scene-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.scene-card__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  aspect-ratio: 3 / 2;
  background: var(--bg-alt);
  border-bottom: 1px dashed #c8d2e0;
}
.scene-card__label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}
.scene-card__note {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.scene-card figcaption {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 16px 18px 18px;
}
.scene-card__title { font-size: .98rem; font-weight: 650; color: var(--ink-strong); }
.scene-card__text { font-size: .89rem; line-height: 1.55; color: var(--ink-muted); }

@media (max-width: 760px) {
  .scene-grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------
   FAQ page.
   A sticky section rail on the left, the answers on the right. The rail is
   the difference between a wall of questions and something a buyer can scan
   for their own stage of the order.
   ------------------------------------------------------------------ */
.faq-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-top: clamp(28px, 4vw, 48px);
}

.faq-rail {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.faq-rail .rail__title {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.faq-rail .rail__list { list-style: none; margin: 0; padding: 0; }
.faq-rail .rail__list li { border-top: 1px solid var(--line-soft); }
.faq-rail .rail__list li:first-child { border-top: 0; }
.faq-rail .rail__list a {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 2px solid transparent;
  font-size: .89rem;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
}
.faq-rail .rail__list a:hover {
  color: var(--primary);
  border-left-color: var(--accent);
}

.faq-body { min-width: 0; }
.faq-list { margin: 0; }
.faq-item {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item dt {
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink-strong);
  margin-bottom: .5rem;
}
.faq-item dd {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 74ch;
}
.faq-sublist { margin: .5rem 0 0; padding-left: 1.2rem; }
.faq-sublist li { margin-bottom: .3rem; }
.faq-sublist li::marker { color: var(--accent); }

@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-rail { position: static; }
}

/* ------------------------------------------------------------------
   Label / value rows — what to send, what ships with the order.
   ------------------------------------------------------------------ */
.need-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.need-list__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.need-list__label {
  font-size: .95rem;
  font-weight: 650;
  color: var(--ink-strong);
}
.need-list__text {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .need-list__row { grid-template-columns: 1fr; gap: .3rem; }
}

/* Timing chip on a process step. */
.steps__meta {
  display: inline-block;
  margin-left: .6rem;
  padding: .14rem .55rem;
  border-radius: 999px;
  background: var(--primary-wash);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary);
  vertical-align: .1em;
}

/* === 19. Inquiry dialog — small screens and motion preferences =========== */

/*
 * On a phone a centred card wastes the top of the screen and fights the
 * keyboard, so the dialog becomes a sheet anchored to the bottom edge.
 */
@media (max-width: 640px) {
  .inq-modal { padding: 0; align-items: flex-end; }
  .inq-modal__panel {
    max-width: none;
    max-height: 93vh;
    /* dvh tracks the visual viewport, so raising the on-screen keyboard
       shrinks the sheet instead of pushing the submit button out of reach. */
    max-height: 93dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    transform: translateY(60px);
  }
  .inq-modal.is-open .inq-modal__panel { transform: none; }
  .inq-modal__head { padding-top: 22px; }
  .inq-modal__points { grid-template-columns: 1fr; gap: .45rem; }
  /*
   * No sticky actions here: two stacked full-width buttons would park
   * themselves on top of a form field and hide it, which looks broken. On a
   * sheet the reader is scrolling through the fields anyway, so the buttons
   * belong at the end of them.
   */
  .inq-modal .inq__actions {
    position: static;
    padding-bottom: .2rem;
    box-shadow: none;
  }
  .inq-modal .inq__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .inq-modal,
  .inq-modal__panel { transition: none; }
  .inq-modal__panel { transform: none; }
}