/* Suisse Intl @font-face rules removed 2026-09-24: the site now uses IBM Plex
   (free, OFL licence), loaded from Google Fonts in index.html. */
/* ============================================================
   Elegant Strand — homepage replica
   Fonts, tokens, base
   ============================================================ */

:root {
  --ink:            #1C1B1B;
  --ink-warm:       #2C2B27;
  --text-body:      #5A5A5A;
  --text-muted:     #6A6A6A;
  --text-link-warm: #4A4843;
  --text-price:     #7A7670;
  --text-sub-warm:  #9A9589;
  --text-eyebrow:   #9A9490;
  --text-label:     #B0AA9F;
  --bg:             #FFFFFF;
  --bg-cream:       #F7F5F0;
  --bg-badge:       #F3EFE8;
  --bg-blog-badge:  #F1F1F1;
  --line:           #E4DFD7;
  --line-grey:      #DDDDDD;
  --swatch-border:  #D8D8D8;
  --pill-border:    #C4BCAF;
  --announce-bg:    #293439;
  --italian-badge:  #344650;
  --italian-text:   #F8F5EF;
  --brown:          #8B7355;
  --author:         #2F4751;

  --serif: Baskerville, "Baskerville Old Face", "Libre Baskerville", Georgia, serif;
  --sans: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Buttons & micro elements ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  font-family: var(--sans);
}

.btn--hero {
  background: linear-gradient(145deg, #FFF, #ECECEC);
  border: 1px solid #fff;
  padding: 14px 48px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  min-height: 47px;
  transition: opacity .3s ease;
}
.btn--hero:hover { opacity: .85; }

.btn--banner {
  background: linear-gradient(145deg, #FFF, #ECECEC);
  border: 1px solid #fff;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  gap: 10px;
}
.btn--banner:hover { opacity: .85; }

.btn--outline {
  background: transparent;
  border: 1px solid var(--ink);
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-body);
  transition: background .3s ease, color .3s ease;
}
.btn--outline:hover { background: var(--ink); color: #fff; }

.underline-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: transform .35s ease-out, opacity .35s ease-out;
}
.underline-link:hover { transform: translateX(6px); opacity: .6; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  transition: transform .35s ease-out, opacity .35s ease-out;
}
.arrow-link__icon { transition: transform .35s ease-out; }
.arrow-link:hover { transform: translateX(6px); opacity: .6; }
.arrow-link:hover .arrow-link__icon { transform: translateX(4px); }

.glyph-arrow {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-warm);
  padding: 0 9px;
  transition: opacity .3s ease;
}
.glyph-arrow:hover { opacity: .5; }

/* ============================================================
   1. Announcement bar
   ============================================================ */

.announce {
  background: var(--announce-bg);
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 15px;
}
.announce a {
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .8px;
  text-align: center;
}

/* ============================================================
   2. Header
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
}

.header__burger { display: none; }

.header__logo { flex: 0 0 auto; }
.header__logo img { width: 70px; height: 51px; object-fit: contain; }

.header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  gap: 28px;
  padding-left: 40px;
}
.header__nav a {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2C2A27;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.header__nav a:hover { opacity: .6; }

.header__icons {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header__icons a { display: inline-flex; }

/* Mobile category bar */
.catbar { display: none; }

/* Mobile drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 200;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw);
  background: #fff;
  z-index: 201;
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer__nav { padding: 10px 20px; }
.drawer__nav a {
  display: block;
  padding: 14px 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2C2A27;
  border-bottom: .5px solid var(--line);
}
.drawer__sub { padding: 6px 20px 30px; }
.drawer__sub a {
  display: block;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================
   3. Hero
   ============================================================ */

.hero { position: relative; background: #121212; overflow: hidden; }
.hero--mobile { display: none; }

.hero--desktop { height: 600px; }
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 33px 42px;
}
.hero__inner { padding: 0 16px; max-width: 900px; }

.hero__title {
  font-family: var(--serif);
  font-size: 66px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.32px;
  color: #fff;
}
.hero__title em { font-style: italic; font-weight: 700; }

.hero__sub {
  font-size: 20px;
  font-weight: 300;
  line-height: 40px;
  color: #fff;
  margin-top: 18px;
}

.hero__buttons {
  display: flex;
  gap: 16px;
  margin-top: 60px;
}

.hero__guarantee {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

/* ============================================================
   4. Why Elegant Strand
   ============================================================ */

.why {
  background: #fff;
  padding: 48px 48px 44px;
  display: grid;
  grid-template-columns: 270px 1fr;
  column-gap: 40px;
  align-items: center;
}

.why__title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink-warm);
}

.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.why__col {
  padding: 0 16px;
  border-right: 1px solid var(--line);
}
.why__col:last-child { border-right: 0; }

.why__col h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .4px;
  color: var(--ink);
  margin-bottom: 8px;
}

.why__col p {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .26px;
  color: var(--text-body);
  line-height: 1.55;
}
.why__long { display: none; }

/* ============================================================
   5 & 7. Sidebar + right-bleeding rail sections
   ============================================================ */

.rail-section {
  background: var(--bg-cream);
  padding: 56px 0 56px 48px;
  overflow: hidden;
}

.rail-section__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  column-gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.rail-section__inner--weave { grid-template-columns: 250px 1fr; }

/* Sidebar */
.rail-sidebar__title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.18;
  color: var(--ink-warm);
  margin-bottom: 16px;
}
.rail-sidebar__title em { font-style: italic; }

.rail-sidebar__sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--text-sub-warm);
  margin-bottom: 40px;
}

.rail-sidebar__label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: 12px;
}

.rail-sidebar__list li {
  border-bottom: .5px solid var(--line);
}
.rail-sidebar__list li:last-child { border-bottom: 0; }

.rail-sidebar__list a,
.weave-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .015em;
  color: var(--text-link-warm);
  transition: transform .35s ease-out, opacity .35s ease-out;
}
.rail-sidebar__list a:hover,
.weave-tab:hover { transform: translateX(6px); opacity: .6; }

.weave-tab.is-active {
  font-weight: 500;
  color: var(--ink-warm);
  transform: translateX(6px);
}
.weave-tab.is-active:hover { opacity: 1; }

.rail-sidebar__shopall { margin-top: 60px; }

/* Rail: right-bleeding */
.rail-wrap { min-width: 0; }

.rail-wrap--art .rail {
  width: calc(100vw - 336px - max(0px, 50vw - 724px));
}
.rail-wrap--weave .rail {
  width: calc(100vw - 346px - max(0px, 50vw - 724px));
}

.rail {
  display: grid;
  grid-auto-flow: column;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-right: 48px;
  overscroll-behavior-inline: contain;
}
.rail::-webkit-scrollbar { display: none; }

.rail--cards { grid-auto-columns: minmax(380px, 34%); }
.rail--products { grid-auto-columns: minmax(350px, 30%); }
.rail--products[hidden] { display: none; }

/* Section 5 category cards */
.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.cat-card:hover img { transform: scale(1.04); }

.cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,16,14,.65) 0%, rgba(18,16,14,.08) 50%, transparent 100%);
}

.cat-card__text {
  position: absolute;
  left: 0; bottom: 0;
  padding: 24px 22px;
}
.cat-card__text h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .01em;
  color: #fff;
  margin-bottom: 16px;
}
.cat-card__cta {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  border-bottom: .5px solid rgba(255, 255, 255, .35);
  padding-bottom: 3px;
  transition: opacity .3s ease;
}
.cat-card:hover .cat-card__cta { opacity: .65; }

/* Controls */
.rail-controls {
  display: flex;
  justify-content: flex-end;
  margin: 14px 48px 0 0;
}
.rail-controls__shopall { display: none; }
.rail-controls--italian { display: none; }

/* Section 7 product cards */
.product-card {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.product-card__imgwrap {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.product-card__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__badge {
  position: absolute;
  top: 15px;
  left: 14px;
  background: var(--bg-badge);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.product-card__ribbon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--italian-badge);
  color: var(--italian-text);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 10px;
  white-space: nowrap;
}

.product-card__info { padding: 12px 14px 16px; }

.product-card__title {
  font-family: "Cormorant", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .4px;
  color: var(--ink);
  margin-bottom: 10px;
}

.swatches { display: flex; gap: 11px; margin-bottom: 10px; }
.swatch {
  width: 30px;
  height: 30px;
  border: 1px solid var(--swatch-border);
  border-radius: 0;
  overflow: hidden;
  flex: 0 0 auto;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch.is-active { box-shadow: inset 0 0 0 2px var(--ink); }
.swatch:hover { outline: 1px solid #D2D2D2; }

.product-card__price {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 1.65px;
  color: var(--text-price);
}

/* Weave pills (mobile only) */
.weave-pills { display: none; }

/* ============================================================
   6. Fabric banner
   ============================================================ */

.fabric-banner { background: #fff; padding: 24px 44px; }
.fabric-banner--mobile { display: none; }

.fabric-banner__frame {
  position: relative;
  height: 280px;
  border: 2px solid #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fabric-banner__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fabric-banner__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}
.fabric-banner__content h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .68px;
  color: var(--ink);
}
.fabric-banner__content p {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .21px;
  color: var(--ink);
  margin-top: 10px;
}
.fabric-banner__content .btn { margin-top: 30px; width: 200px; min-height: 42px; }

/* ============================================================
   8. Founder
   ============================================================ */

.founder { background: #fff; }

.founder__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}

.founder__img img { width: 200px; height: 200px; object-fit: cover; }

.founder__text h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.34px;
  color: var(--ink);
  margin-bottom: 20px;
}
.founder__text > p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 14px;
}

.founder__sig {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
  margin: 22px 0 6px !important;
}
.founder__role {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 18px !important;
}

/* ============================================================
   9. Italian collections — expanding cards
   ============================================================ */

.italian {
  background: var(--bg-cream);
  padding: 40px 0;
  overflow: hidden;
}

.italian__head { padding: 0 16px; }
.italian__head h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  color: #1A1A1A;
  margin-bottom: 36px;
}
.italian__head p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  margin: -24px 0 30px;
}

.italian__row {
  display: flex;
  gap: 6px;
  height: clamp(420px, 42vw, 620px);
}

.italian-card {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  min-width: 0;
  transition: flex-grow .9s cubic-bezier(.19, 1, .22, 1);
}
.italian-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.italian-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
}

.italian-card__dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.19, 1, .22, 1);
}

.italian-card__content {
  position: absolute;
  left: 0; bottom: 0;
  padding: 32px 24px;
  max-width: 92%;
  color: #fff;
  transition: opacity .9s cubic-bezier(.19, 1, .22, 1);
}
.italian-card__content h3 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  white-space: nowrap;
}
.italian-card__spec {
  font-size: 13px;
  font-weight: 400;
  opacity: .85;
  margin-bottom: 10px;
}
.italian-card__desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  margin-bottom: 0;
  transition: max-height .9s cubic-bezier(.19, 1, .22, 1),
              opacity .9s cubic-bezier(.19, 1, .22, 1),
              transform .9s cubic-bezier(.19, 1, .22, 1),
              margin .9s cubic-bezier(.19, 1, .22, 1);
}
.italian-card__price {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  margin: 10px 0;
}
.italian-card__explore {
  font-size: 14px;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (min-width: 750px) {
  .italian__row:hover .italian-card .italian-card__dim { opacity: .45; }
  .italian__row:hover .italian-card .italian-card__content { opacity: .65; }
  .italian__row .italian-card:hover { flex-grow: 2.4; }
  .italian__row .italian-card:hover .italian-card__dim { opacity: 0; }
  .italian__row .italian-card:hover .italian-card__content { opacity: 1; }
  .italian__row .italian-card:hover .italian-card__desc {
    max-height: 16em;
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   10 & 11. 50/50 splits
   ============================================================ */

.split {
  display: flex;
  background: #fff;
  min-height: 475px;
}
.split--reverse { flex-direction: row-reverse; }

.split__media { flex: 0 0 50%; position: relative; overflow: hidden; }
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 64px 52px;
}
.split__text--right { justify-content: flex-end; }
.split__text--left { justify-content: flex-start; }

.split__block { max-width: 480px; }

.split__eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: 18px;
}

.split__block h2 {
  font-family: "Libre Baskerville", Baskerville, Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .68px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 22px;
}
.split__block h2 em { font-style: italic; }

.split__block p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-body);
  margin-bottom: 12px;
}

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

.video-band {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #121212;
}
.video-band iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 1425px);
  height: 1200px;
  margin-top: -120px;
  border: 0;
  pointer-events: none;
}

/* ============================================================
   13. Testimonials
   ============================================================ */

.testimonials {
  background: var(--bg-cream);
  padding: 44px 44px 60px;
}
.testimonials > h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  color: #000;
  text-align: center;
  margin-bottom: 32px;
}

.tslider { position: relative; }
.tslider__viewport { overflow: hidden; }
.tslider__track {
  display: flex;
  gap: 20px;
  transition: transform .5s cubic-bezier(.25, .46, .45, .94);
  will-change: transform;
}

.tslide {
  flex: 0 0 calc((100% - 40px) / 3);
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 181px;
}

.tslide--feature {
  background: var(--brown);
  padding: 36px 30px;
  color: #fff;
  justify-content: flex-start;
}
.tslide__feature-title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}
.tslide__feature-sub {
  font-family: "Montserrat", var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 34px;
}

.stars { display: flex; gap: 3px; }
.stars svg { width: 18px; height: 18px; fill: var(--brown); }

.tslide__quote {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  margin: 20px 0;
  flex: 1;
}
.tslide__author {
  font-size: 13px;
  font-weight: 300;
  color: var(--author);
}

.tslider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 3;
}
.tslider:hover .tslider__nav { opacity: 1; }
.tslider__nav--prev { left: 5%; }
.tslider__nav--next { right: 5%; }
.tslider__nav[disabled] { opacity: 0 !important; pointer-events: none; }

/* ============================================================
   14. Designer's Corner / blog
   ============================================================ */

.blog-head {
  background: #fff;
  padding: 44px 80px 20px;
  text-align: center;
}
.blog-head h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--ink);
}
.blog-head p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-body);
  margin-top: 8px;
}

.blog {
  background: #fff;
  padding: 36px 55px 72px;
}

.bslider { position: relative; }
.bslider__viewport { overflow: hidden; }
.bslider__track {
  display: flex;
  gap: 50px;
  transition: transform .3s ease;
  will-change: transform;
}

.bslide {
  flex: 0 0 calc((100% - 50px * .2) / 1.2);
  display: grid;
  grid-template-columns: 610px 1fr;
  gap: 50px;
  min-height: 407px;
}

.bslide__img { position: relative; overflow: hidden; }
.bslide__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bslide__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.bslide__badge {
  background: var(--bg-blog-badge);
  padding: 4px 20px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-body);
}
.bslide__body h3 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .8px;
  color: #000;
  margin: 20px 0 12px;
}
.bslide__body p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-body);
}
.bslide__body .btn { margin-top: 40px; }

.bslider__nav {
  position: absolute;
  top: calc(50%);
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity .25s ease;
}
.bslider__nav--prev { left: -17px; }
.bslider__nav--next { right: -17px; }

/* ============================================================
   15. Shipping bar
   ============================================================ */

.shipping {
  background: var(--bg-cream);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.shipping p {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .42px;
  color: var(--ink);
}

/* ============================================================
   16. Footer
   ============================================================ */

.footer {
  background: #fff;
  border-top: 1px solid var(--line-grey);
  padding: 45px 0 10px;
}

.footer__container {
  padding: 0 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__col { padding: 0 25px; }
.footer__col--news { flex: 0 0 auto; }

.footer__news-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 24px;
}

.footer__form {
  position: relative;
  width: 255px;
  height: 48px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
}
.footer__form input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 14px 48px 14px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
}
.footer__form input::placeholder { color: var(--text-price); }
.footer__form button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
}

.footer__social {
  display: flex;
  gap: 30px;
  margin-top: 24px;
}
.footer__social a { display: inline-flex; transition: opacity .3s ease; }
.footer__social a:hover { opacity: .6; }
.footer__follow { display: none; }

.footer__col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}
.footer__col-title--static { cursor: default; }
.footer__chev { display: none; }

.footer__links li { margin-bottom: 12px; }
.footer__links a {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--text-price);
  line-height: 1.5;
  transition: opacity .3s ease;
}
.footer__links a:hover { opacity: .6; }
.footer__note {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted);
}

.footer__legal {
  margin-top: 30px;
  border-top: 1px solid var(--line);
  padding: 10px 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.footer__legal a,
.footer__legal span {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--text-price);
}

/* ============================================================
   Responsive — ≤1007px
   ============================================================ */

@media (max-width: 1007px) {
  .founder__container { grid-template-columns: 240px 1fr; gap: 40px; }
  .founder__img img { width: 240px; height: 240px; }
}

/* ============================================================
   Responsive — mobile ≤749px
   ============================================================ */

@media (max-width: 749px) {

  /* Header */
  .header {
    height: 81px;
    padding: 15px 18px;
  }
  .header__burger { display: inline-flex; }
  .header__nav { display: none; }
  .header__account { display: none; }
  .header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .catbar {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 15px 15px 10px;
    background: #fff;
  }
  .catbar::-webkit-scrollbar { display: none; }
  .catbar a {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2C2A27;
  }

  /* Hero */
  .hero--desktop { display: none; }
  .hero--mobile { display: block; height: 520px; }
  .hero__m-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 20px 20px 28px;
  }
  .hero__m-title {
    font-family: var(--serif);
    font-size: 42px;
    font-weight: 500;
    line-height: 50px;
    color: #fff;
  }
  .hero__m-title em { font-style: italic; font-weight: 700; }
  .hero__m-sub {
    font-size: 16px;
    font-weight: 300;
    line-height: 22.4px;
    color: #fff;
    margin-bottom: 22px;
  }
  .hero__m-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
  }
  .hero__m-buttons .btn--hero {
    padding: 14px 10px;
    width: 145px;
    font-size: 10px;
  }
  .hero__m-guarantee {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
  }

  /* Why */
  .why {
    grid-template-columns: 1fr;
    padding: 68px 28px;
    row-gap: 24px;
  }
  .why__title { font-size: 26px; }
  .why__grid { grid-template-columns: 1fr; row-gap: 12px; }
  .why__col { border-right: 0; padding: 0; }
  .why__short { display: none; }
  .why__long {
    display: block;
    font-size: 14px;
    line-height: 21px;
  }

  /* Rail sections */
  .rail-section { padding: 28px 20px 24px; }
  .rail-section__inner,
  .rail-section__inner--weave {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .rail-sidebar__title {
    font-size: 28px;
    white-space: nowrap;
  }
  .rail-sidebar__title br { display: none; }
  .rail-sidebar__sub {
    margin-bottom: 8px;
    margin-right: 45px;
  }
  .rail-sidebar__label,
  .rail-sidebar__list,
  .rail-sidebar__shopall { display: none; }

  .rail-wrap--art .rail,
  .rail-wrap--weave .rail {
    width: 100vw;
    margin-left: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .rail--cards { grid-auto-columns: minmax(280px, 80vw); }
  .rail--products { grid-auto-columns: minmax(310px, 72vw); }

  .rail-controls {
    margin: 14px 0 0;
    align-items: center;
  }
  .rail-controls--weave { justify-content: space-between; }
  .rail-controls__shopall {
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
  }

  /* Weave pills */
  .weave-pills {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .weave-pill {
    border: 1px solid var(--pill-border);
    border-radius: 0;
    background: transparent;
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-link-warm);
  }
  .weave-pill.is-active {
    background: var(--ink-warm);
    border-color: var(--ink-warm);
    color: var(--italian-text);
  }

  .swatches { gap: 9px; }
  .swatch { width: 27px; height: 27px; }

  /* Fabric banner */
  .fabric-banner--desktop { display: none; }
  .fabric-banner--mobile { display: block; padding: 20px; }
  .fabric-banner--mobile .fabric-banner__frame { height: 350px; }
  .fabric-banner__content h2 { font-size: 28px; }
  .fabric-banner__content p { font-size: 14px; line-height: 22.4px; }

  /* Founder */
  .founder__container {
    display: block;
    padding: 56px 24px;
  }
  .founder__text h2 { font-size: 28px; margin-bottom: 24px; }
  .founder__img {
    float: left;
    margin: 4px 20px 10px 0;
  }
  .founder__img img { width: 130px; height: 130px; }
  .founder__text > p { font-size: 14px; line-height: 22.4px; }
  .founder__text::after { content: ""; display: table; clear: both; }
  .founder__sig, .founder__role { clear: both; }

  /* Italian collections → swipe carousel */
  .italian__head h2 { font-size: 28px; }
  .italian__row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: 20px;
    height: clamp(440px, 125vw, 560px);
  }
  .italian__row::-webkit-scrollbar { display: none; }
  .italian-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .italian-card__desc { display: none; }
  .rail-controls--italian {
    display: flex;
    margin: 14px 20px 0 0;
  }

  /* Splits */
  .split, .split--reverse {
    flex-direction: column;
    min-height: 0;
  }
  .split__media {
    flex: 0 0 auto;
    order: -1;
    height: 280px;
    width: 100%;
  }
  .split__text { padding: 36px 24px 44px; }
  .split__block h2 { font-size: 28px; }

  /* Video */
  .video-band { height: 480px; }
  .video-band iframe {
    width: max(100vw, 854px);
    height: 854px;
    margin-top: 0;
  }

  /* Testimonials */
  .testimonials { padding: 36px 20px 44px; }
  .testimonials > h2 {
    font-size: 28px;
    text-align: left;
  }
  .tslide {
    flex: 0 0 calc(100% / 1.2 - 20px * .2 / 1.2);
    min-height: 255px;
    padding: 36px;
  }
  .tslider__nav { display: none; }

  /* Blog */
  .blog-head { padding: 36px 20px 12px; }
  .blog-head h2 { font-size: 28px; }
  .blog { padding: 24px 20px 48px; }
  .bslider__track { gap: 20px; }
  .bslide {
    flex: 0 0 calc(100% / 1.2 - 20px * .2 / 1.2);
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
  }
  .bslide__img { aspect-ratio: 1 / 1; }
  .bslide__img img { position: absolute; }
  .bslide__body { row-gap: 0; }
  .bslide__body .btn { margin-top: 24px; }
  .bslider__nav { display: none; }

  /* Shipping */
  .shipping {
    flex-direction: column;
    gap: 10px;
    padding: 14px 24px;
    text-align: center;
  }
  .shipping p { font-size: 12px; line-height: 18.6px; }

  /* Footer */
  .footer { padding: 40px 0 10px; }
  .footer__container {
    flex-direction: column;
    padding: 0 24px;
  }
  .footer__col { padding: 0; width: 100%; }
  .footer__col--news { text-align: center; }
  .footer__form { width: 100%; max-width: 292px; margin: 0 auto; }
  .footer__social--desktop { display: none; }

  .footer__accordion { border-bottom: .5px solid var(--line); }
  .footer__accordion .footer__col-title {
    width: 100%;
    justify-content: space-between;
    padding: 16px 0;
    margin: 0;
    cursor: pointer;
  }
  .footer__chev { display: inline-block; transition: transform .3s ease; }
  .footer__accordion.is-open .footer__chev { transform: rotate(180deg); }
  .footer__accordion .footer__links {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .footer__accordion.is-open .footer__links {
    max-height: 400px;
    padding-bottom: 16px;
  }

  .footer__col--contact {
    text-align: center;
    margin-top: 24px;
  }
  .footer__col--contact .footer__col-title { justify-content: center; }

  .footer__follow {
    display: block;
    text-align: center;
    margin-top: 24px;
  }
  .footer__follow .footer__social { justify-content: center; }

  .footer__legal {
    flex-direction: row;
    gap: 16px 24px;
    padding: 16px 24px 0;
  }
  .footer__legal span { flex-basis: 100%; text-align: center; }
}

/* ============================================================
   17. First-visit popup ("First Look, First Offer")
   ============================================================ */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 27, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
  z-index: 500;
}
.popup-overlay.is-open { opacity: 1; visibility: visible; }

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(420px, calc(100vw - 40px));
  background: #fff;
  padding: 48px 40px 40px;
  text-align: center;
  z-index: 501;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease, transform .4s ease;
}
.popup.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.popup__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.popup__close:hover { opacity: .6; }

.popup__logo {
  display: block;
  margin: 0 auto 20px;
}

.popup__title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
}
.popup__title em { font-style: italic; }

.popup__sub {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 320px;
  margin: 0 auto 28px;
}

.popup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup__form input {
  height: 48px;
  border: 1px solid var(--ink);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  text-align: center;
}
.popup__form input::placeholder { color: var(--text-price); }
.popup__form button {
  height: 48px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.popup__form button:hover { opacity: .85; }

.popup__success {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  padding: 14px 0;
}

.popup__dismiss {
  display: block;
  margin: 18px auto 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.popup__dismiss:hover { opacity: .7; }

@media (max-width: 749px) {
  .popup { padding: 40px 24px 32px; }
  .popup__title { font-size: 24px; }
}


/* ============================================================
   Glenmar additions (see GLENMAR_CONTENT_CHANGES.md)
   ============================================================ */

/* Header "Get a Quote" button: replaces the account + cart icons */
.btn--quote {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
  padding: 10px 20px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.btn--quote:hover { opacity: .85; }
.header__icons a.btn--quote { display: inline-flex; }

/* Stock count above each category card title */
.cat-card__stock {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 10px;
}

/* Trademark / non-affiliation line under the legal row */
.footer__disclaimer {
  max-width: 900px;
  margin: 14px auto 0;
  padding: 0 40px 24px;
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--text-price);
}

/* The Glenmar nav labels are much longer than the bedding ones, and the quote
   button is wider than the icons it replaced: at 1024px the header measured
   1070px wide and pushed the page sideways. Tighten it between phone and
   full-desktop widths instead of letting it overflow. */
@media (min-width: 750px) and (max-width: 1279px) {
  .header { padding-left: 24px; padding-right: 24px; }
  .header__nav { gap: 16px; padding-left: 20px; }
  .header__nav a { letter-spacing: 1px; }
}
/* HEADCO machine names are longer than the template's collection names; with the
   template's one-line rule they were cut off on every screen narrower than 1366px
   ("Multi-Spindle Turning", "Wire EDM & Tool Room"). Let them wrap instead. */
.italian-card__content h3 { white-space: normal; line-height: 1.15; }

/* Keep the phone number itself on one line wherever the call line wraps */
.hero__guarantee a, .hero__m-guarantee a { white-space: nowrap; }

/* Configuration codes (E,40,C,X,A-55TE,B,L): the template's Cormorant has old-style
   numerals, so digits sat at different heights from the capitals and the codes looked
   uneven. Use the site's sans with lining, equal-width figures instead. */
.rail--products .product-card__title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;   /* every character the same width: reads as a part number */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Founder note without the signature/title lines: keep the link from sitting tight
   under the last paragraph */
.founder__text .underline-link { margin-top: 14px; }

/* ---- Real Glenmar photos (2026-09-24) ---- */

/* Section 5 unit cards: product photos on light warehouse backgrounds. Deepen the
   bottom-up gradient (dark at the bottom, transparent by ~60% of the height) so the
   white stock count, title and "View units" stay legible. */
.cat-card__overlay {
  background: linear-gradient(to top,
    rgba(18, 16, 14, .88) 0%,
    rgba(18, 16, 14, .62) 22%,
    rgba(18, 16, 14, .22) 45%,
    rgba(18, 16, 14, 0) 62%);
}
.cat-card__text { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* Section 6 banner: dark text over a busy warehouse photo. A soft white veil,
   strongest behind the text and lighter at the edges, keeps it readable while the
   machines still show. */
.fabric-banner__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, .84) 0%,
    rgba(255, 255, 255, .62) 55%,
    rgba(255, 255, 255, .3) 100%);
}

/* Section 8: the logo replaces a square portrait, so show all of it instead of
   cropping it to a square */
.founder__img img { width: 170px; height: auto; object-fit: contain; }   /* Sam, 2026-10-01: 170px wide everywhere */

/* Section 7 configuration cards: the Rhino photo is portrait in a landscape frame;
   aim the crop lower so it shows the pump, follower plate and drum (where the
   configurations differ) rather than the top of the control column */
.rail--products .product-card__imgwrap img { object-position: center 62%; }

/* Section 9 HEADCO cards: lighter shop photos need a deeper bottom gradient too */
.italian-card__gradient {
  background: linear-gradient(to top,
    rgba(0, 0, 0, .8) 0%,
    rgba(0, 0, 0, .45) 30%,
    rgba(0, 0, 0, 0) 60%);
}

/* Drumman Adhesives logo: wider than the template's square mark (1.62:1), so it
   gets 82px of width at the same 51px height */
.header__logo img { width: 82px; height: 51px; }

/* Hero: the Rhino warehouse photo is bright, unlike the template's dark bedroom,
   so the white headline needs shading. Desktop text sits bottom-left: darken from
   the bottom up and from the left in. */
.hero--desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .35) 50%, rgba(10, 10, 10, .05) 85%),
    linear-gradient(to right, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, 0) 65%);
}

/* Video band: a local <video> instead of the template's Vimeo iframe */
.video-band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Readability (Sam, 2026-09-24): larger running text ----
   The template set paragraphs at 13-14px in a light weight, below the ~16px that
   reads comfortably (and that iOS treats as normal). Placed after the template's
   rules, so these win on desktop AND phones. Small uppercase labels (badges,
   eyebrows, buttons, legal) are left as designed. Line height is proportional so
   the bigger text doesn't get cramped lines. */
.rail-sidebar__sub,
.fabric-banner__content p,
.founder__text > p,
.italian__head p,
.split__block p {
  font-size: 16px;
  line-height: 1.6;
}
/* .why__col prefix: the template styles these via `.why__col p`, which is more specific */
.why__col .why__short,
.why__col .why__long,
.tslide__quote,
.tslide__feature-sub,
.shipping p,
.italian-card__price {
  font-size: 15px;
  line-height: 1.55;
}
.italian-card__spec,
.tslide__author,
.footer__links a { font-size: 14px; }

/* ---- Typeface: IBM Plex (Sam, 2026-09-24) ----
   Replaces the bedding template's Baskerville + Suisse Intl. Plex was designed
   by IBM for engineering use: its serif/sans/mono are built to work together,
   it keeps a strong light-vs-bold contrast for emphasis, and it's free (OFL),
   which also removes the Suisse Intl licensing problem.
   - headings: IBM Plex Serif (emphasis = bold italic)
   - text:     IBM Plex Sans (light 300 body, heavier weights for labels)
   - part/configuration codes: IBM Plex Mono */
:root {
  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}
/* the template hard-coded these three instead of using the tokens */
.split__block h2,
.tslide__feature-title { font-family: var(--serif); }
.tslide__feature-sub { font-family: var(--sans); }

/* Hero headline "Genuine Nordson and Atlas SCA / Original Equipment. Better Value."
   is nearly twice as long as the old one; at the template's fixed 66px it filled
   4 lines of the desktop photo. Scale with the viewport and widen the line so each
   sentence fits on one line on desktop. */
.hero__title { font-size: clamp(44px, 4.6vw, 60px); line-height: 1.08; }
.hero__inner { max-width: 1100px; }

/* Sidebar descriptions ("Eight Rhino XD3 configurations in stock...", "Original
   manufacturer hardware..."): half a size up from the 16px readability pass,
   at Sam's request (2026-09-24). Declared after that pass, so this wins. */
.rail-sidebar__sub { font-size: 16.5px; }

/* Hero: a little breathing room between "Genuine Nordson and Atlas SCA" and
   "Original Equipment. Better Value." - enough to separate the two sentences,
   well under a paragraph gap so they still read as one statement. The emphasis
   line becomes a block so the gap can be set exactly (in em, so it scales with
   the viewport-sized headline). */
.hero__title em,
.hero__m-title em { display: block; margin-top: .22em; }

/* Light gray instead of the template's beige (Sam, 2026-09-24). Every beige
   surface comes from these three tokens, so redefining them here recolours all of
   them (the alternating section backgrounds, product badges and divider lines)
   without touching the template. The names stay as the template's for that reason. */
:root {
  --bg-cream: #F4F4F5;   /* was #F7F5F0 (beige) */
  --bg-badge: #EAEBED;   /* was #F3EFE8 */
  --line:     #E2E3E6;   /* was #E4DFD7 (warm) */

  /* More text contrast (Sam, 2026-09-24): the template's warm greys were faint;
     two failed the 4.5:1 readability standard outright (sidebar descriptions
     2.72:1, uppercase labels 2.10:1). Darker neutral greys that match the gray
     palette; every one now clears 4.5:1 on both white and #F4F4F5. Headings and
     bold text are unchanged, so the light-vs-bold weight contrast stays. */
  --text-body:     #45454A;   /* was #5A5A5A  6.27 -> 8.67:1 */
  --text-muted:    #55555B;   /* was #6A6A6A  4.92 -> 6.74:1 */
  --text-price:    #5E5E64;   /* was #7A7670  4.11 -> 5.86:1 */
  --text-sub-warm: #5E5E64;   /* was #9A9589  2.72 -> 5.86:1 */
  --text-eyebrow:  #66666C;   /* was #9A9490  2.72 -> 5.19:1 */
  --text-label:    #6B6B71;   /* was #B0AA9F  2.10 -> 4.82:1 */
}

/* Tablets (iPad portrait is 768-834px). The template was only built for 1440px
   desktop and 390px phone; between 750 and 959px the full desktop menu and the
   5-column footer don't fit and pushed the page sideways by up to 223px. Tablets
   now get the phone header (burger + drawer with every link + category bar),
   keeping the "Get a Quote" button, and a wrapping footer grid. */
/* Upper bound raised from 959px to 1023px when the wider Drumman logo went in: at
   960px the full menu then had only 10px left before the icons. */
@media (min-width: 750px) and (max-width: 1023px) {
  .header { height: 81px; padding: 15px 24px; }
  .header__burger { display: inline-flex; }
  .header__nav { display: none; }
  .header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .catbar {
    display: flex;
    justify-content: center;
    gap: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 15px 15px 10px;
    background: #fff;
  }
  .catbar::-webkit-scrollbar { display: none; }
  .catbar a {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2C2A27;
  }
}
@media (min-width: 750px) and (max-width: 1007px) {
  .footer__container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 32px;
    padding: 0 40px;
  }
  .footer__col { padding: 0; }
  .footer__col--news { grid-column: 1 / -1; }
  .footer__links a { overflow-wrap: anywhere; }

  /* "Why Glenmar?" title above its three columns instead of beside them */
  .why { grid-template-columns: 1fr; row-gap: 24px; padding: 40px; }

  /* Machine cards: the phone swipe carousel, two cards visible, instead of four
     184px strips */
  .italian__row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: 40px;
    height: clamp(420px, 60vw, 560px);
  }
  .italian__row::-webkit-scrollbar { display: none; }
  .italian-card {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
  .italian__row .italian-card:hover { flex-grow: 0; }
  .rail-controls--italian {
    display: flex;
    margin: 14px 40px 0 0;
  }
}

@media (max-width: 749px) {
  /* The announcement wraps to two lines on phones; let the bar grow instead of spilling */
  .announce { height: auto; min-height: 41px; padding: 8px 15px; }
  .announce a { line-height: 1.5; }

  /* Hero title on phones: centred in the space above the text and buttons instead
     of pinned to the top edge (auto margins in the template's flex column) */
  .hero__m-title {
    margin-top: auto;
    margin-bottom: auto;
    font-size: clamp(28px, 8.5vw, 36px);   /* was a fixed 42px: 5-6 lines with the new copy */
    line-height: 1.15;
  }

  /* "Call our OEM Solutions Team" centred like the rest of the phone hero */
  .hero__m-guarantee { justify-content: center; text-align: center; }

  /* Hero on phones: title at the top, text and buttons at the bottom, so shade both
     ends and leave the middle (the machines) lighter */
  .hero--mobile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* the title now sits mid-photo, so the middle needs shading too */
    background: linear-gradient(to bottom,
      rgba(10, 10, 10, .4) 0%,
      rgba(10, 10, 10, .5) 45%,
      rgba(10, 10, 10, .78) 100%);
  }

  /* Banner on phones: the frame is tall and the title spans the machine frames, so the
     veil needs to be stronger and more even than on desktop */
  .fabric-banner__frame::after {
    background: radial-gradient(ellipse at center,
      rgba(255, 255, 255, .9) 0%,
      rgba(255, 255, 255, .78) 60%,
      rgba(255, 255, 255, .6) 100%);
  }

  /* Founder note: the template floats the photo left so the title and text wrap
     beside it. Stack it instead: photo, title, text, link, all centred. */
  .founder__container { text-align: center; }
  .founder__img { float: none; margin: 0 0 24px; }
  .founder__img img { width: 170px; height: auto; margin: 0 auto; }

  /* Configuration cards line up with the heading and text above them (20px from the
     edge) and every swipe snaps the next card to that same line; a slice of the next
     card peeks in on the right to show there is more. (Sam, 2026-10-01; replaces the
     centred layout.) Cards are 310px, narrower on small phones so the peek survives:
     at 320px a card is 256px with 38px of the next one showing. */
  .rail-wrap--weave .rail--products {
    grid-auto-columns: min(310px, calc(100vw - 64px));
    padding-left: 20px;
    padding-right: 20px;
    scroll-padding-left: 20px;
  }
  .rail--products .product-card { scroll-snap-align: start; }

  /* Industries slider ("Where These Systems Run"): the template hid its arrows on
     phones and it has no swipe, so it couldn't move at all. The arrows now sit under
     the cards on the right, always visible (faded at either end). Swipe is in main.js. */
  .tslider { padding-bottom: 54px; }
  .tslider__nav {
    display: flex;
    top: auto;
    bottom: 0;
    transform: none;
    opacity: 1;
  }
  .tslider__nav--prev { left: auto; right: 46px; }
  .tslider__nav--next { right: 0; }
  .tslider__nav[disabled] { opacity: .3 !important; }

  /* Shipping note: more room before the footer (it was 14px) */
  .shipping { padding: 24px 24px 32px; }

  /* catbar + drawer already carry "Get a Quote" on mobile */
  .header__icons a.btn--quote { display: none; }
  .footer__disclaimer { padding: 0 20px 24px; }

  /* The template forces sidebar titles onto one line on mobile (nowrap + hidden <br>).
     The Glenmar titles are longer: "The Same Equipment, Without the List Price" was
     clipped on every phone, "Find Your Exact Configuration" on 320-360px phones (and it
     widened its column, cutting the paragraph and arrows below). Both now break at
     their <br>, the same as on desktop. */
  .rail-sidebar__title { white-space: normal; }
  .rail-sidebar__title br { display: inline; }
}

/* Touch screens can't hover, and the industries slider only showed its arrows on hover:
   show them all the time there. */
@media (hover: none) {
  .tslider__nav { opacity: 1; }
}

/* ============================================================
   Inner pages (rhino-xd3.html, about.html, ...). Placeholders for now:
   a title block, a "details on the way" note with the phone number and
   quote link, and simple sections. Same fonts and tokens as the homepage.
   ============================================================ */
.page { background: #fff; }
.page-hero,
.page-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px 40px;
}
.page-hero__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 20px;
}
.page-hero h1 em { font-weight: 700; }
.page-hero__lead {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink);
  max-width: 680px;
}
.page-hero__lead a,
.page-note a,
.page-section a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.page-note {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--bg-cream);
  border-left: 3px solid var(--ink);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn--solid {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #fff;
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: opacity .3s ease;
}
.btn--solid:hover { opacity: .85; }

.page-section {
  padding-top: 40px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;            /* anchor links land below the header */
}
.page-section h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
}
.page-section__sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 24px 0 12px;
  scroll-margin-top: 90px;
}
.page-section p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--ink); margin-bottom: 12px; }
.page-logo { width: 170px; height: auto; margin-bottom: 20px; }

.config-list, .contact-list { list-style: none; display: grid; gap: 8px; margin-bottom: 16px; }
.config-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 16px;
  background: var(--bg-cream);
  scroll-margin-top: 90px;
}
.config-item:target { outline: 2px solid var(--ink); }   /* the configuration a homepage card linked to */
.config-item__code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 16px; font-weight: 500; }
.config-item__meta { font-size: 14px; font-weight: 300; color: var(--text-muted); }
.contact-list li { font-size: 16px; font-weight: 300; line-height: 1.6; }
.contact-list span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bullet-list { padding-left: 20px; margin-bottom: 12px; }
.bullet-list li { font-size: 16px; font-weight: 300; line-height: 1.7; }

@media (max-width: 749px) {
  .page-hero, .page-section { padding: 40px 20px 28px; }
  .page-hero h1 { font-size: 34px; }
  .page-hero__lead { font-size: 16px; }
  .page-section h2 { font-size: 26px; }
  .page-actions .btn { flex: 1 1 100%; }
}

/* Industry cards on the homepage are links to their section on industries.html */
a.tslide { color: inherit; text-decoration: none; transition: box-shadow .25s ease; }
a.tslide:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.tslide__feature-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
}

/* Equipment pages: the same photo as the homepage card, beside the text on desktop
   (cropped 3:4 like the card) and above it on phones (square, so the text isn't
   pushed far down). */
.page-hero--media {
  display: grid;                         /* same 880px width as the sections below, so the edges line up */
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: start;
}
.page-hero__media { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-cream); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 749px) {
  .page-hero--media { grid-template-columns: 1fr; gap: 24px; }
  .page-hero__media { order: -1; aspect-ratio: 1 / 1; }
  .page-hero__media img { object-position: center 35%; }
}
@media (min-width: 750px) and (max-width: 1023px) {
  .page-hero--media { grid-template-columns: 1fr 260px; gap: 32px; }   /* tablets: keep the text column readable */
}

/* Industries photo cards (section 9): 5 cards instead of the original 4. Desktop
   (1008px+) keeps the template's hover row, with slightly tighter type so the four
   narrow cards stay readable while one is expanded; tablets and phones swipe (the
   tablet and phone rules above). Measured: no clipped text from 1008px up. */
@media (min-width: 1008px) {
  .italian-card__content { padding: 28px 16px; max-width: 100%; }
  .italian-card__content h3 { font-size: 19px; }
  .italian-card__spec { font-size: 12px; }
}
@media (min-width: 1280px) {
  .italian-card__content { padding: 32px 20px; }
  .italian-card__content h3 { font-size: 22px; }
}

/* Founder note (Sam, 2026-10-01): wherever the logo sits beside the text (tablet and
   up) it is centred vertically against the text, still in the left column; on
   desktop it is back to 200px wide (phones and tablets keep 170px). */
@media (min-width: 750px) {
  .founder__container { align-items: center; }
}
@media (min-width: 1008px) {
  .founder__img img { width: 200px; }
}

/* Side-by-side sections ("The Drumman Promise", "The Rhino XD3, Up Close"): each half
   slides in from its own side and they meet in the middle, once, as the section
   scrolls into view. main.js sets data-reveal (left/right, or "up" when the halves are
   stacked on phones) and adds .js-reveal only if it can run the animation, so
   without JavaScript, or with "reduce motion" switched on, everything simply shows. */
.split { overflow: hidden; }   /* the halves start off to the side: no sideways scroll meanwhile */
.js-reveal .split [data-reveal] {
  opacity: 0;
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.19, 1, .22, 1);
}
.js-reveal .split [data-reveal="left"]  { transform: translateX(-80px); }
.js-reveal .split [data-reveal="right"] { transform: translateX(80px); }
.js-reveal .split [data-reveal="up"]    { transform: translateY(40px); }
.js-reveal .split .split__text[data-reveal] { transition-delay: .15s; }   /* text follows its photo */
.js-reveal .split [data-reveal].is-in { opacity: 1; transform: none; }

/* How buying surplus works: three steps leading into the footer. Same light-grey
   box as the old shipping note, whose text is now step 03. */
.steps {
  background: var(--bg-cream);
  padding: 64px 40px 72px;
  text-align: center;
}
.steps__title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 40px;
}
.steps__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1040px;
  margin: 0 auto 44px;
  text-align: left;
}
.steps__num {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--text-muted);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.steps__item h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.steps__item p { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink); }
.steps__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
}
.steps__cta a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 749px) {
  .steps { padding: 44px 20px 52px; }
  .steps__title { font-size: 26px; margin-bottom: 28px; }
  .steps__list { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
}

/* Equipment and configuration rails (sections 5 and 7) on big screens (Sam, 2026-10-01):
   the template capped this block at 1400px and centred it, while the cards run off the
   right edge, so above 1440px the sidebar drifted right (277px from the edge at 1920px,
   597px at 2560px) while the logo and "Why" section stay at 48px. Now the sidebar keeps
   the same 48px margin on every screen. Cards keep their size while they overflow (you
   swipe or use the arrows); once all of them fit, they stretch to fill the row, so the
   spare width isn't just moved to the right-hand side instead.
   Only above 1440px: below that the template's cap never kicked in, so nothing changes.
   (The template also subtracted the old centring offset from the rail width; that
   offset is gone, so the rails now simply run to the right edge.) */
@media (min-width: 1441px) {
  .rail-section__inner { max-width: none; }
  .rail-wrap--art .rail { width: calc(100vw - 336px); }
  .rail-wrap--weave .rail { width: calc(100vw - 346px); }
  .rail--cards { grid-auto-columns: minmax(380px, 1fr); }
  .rail--products { grid-auto-columns: minmax(350px, 1fr); }
}

/* Section 6 banner ("Not Sure Which Unit Fits Your Line?"), Sam 2026-10-01: the photo
   now fills the whole band edge to edge, with no white frame around it. New photo
   (bulk-melters-banner.webp, 1545px, 202 KB). The white veil stays, so the text reads. */
.fabric-banner,
.fabric-banner--mobile { padding: 0; background: none; }
.fabric-banner__frame { border: 0; height: 340px; }
@media (max-width: 749px) {
  .fabric-banner--mobile .fabric-banner__frame { height: 380px; }
}

/* Equipment and configuration rails: wider text column on desktop (Sam: ~125%), taken
   from the cards' share. 240px -> 300px and 250px -> 312px; each rail's width formula
   subtracts the new column (+48px margin, +48px gap) so the cards still end at the
   screen edge. From 1280px only: on smaller laptops the cards need the room. */
@media (min-width: 1280px) {
  .rail-section__inner { grid-template-columns: 300px 1fr; }
  .rail-section__inner--weave { grid-template-columns: 312px 1fr; }
  .rail-wrap--art .rail { width: calc(100vw - 396px - max(0px, 50vw - 724px)); }
  .rail-wrap--weave .rail { width: calc(100vw - 408px - max(0px, 50vw - 724px)); }
}
@media (min-width: 1441px) {
  .rail-wrap--art .rail { width: calc(100vw - 396px); }
  .rail-wrap--weave .rail { width: calc(100vw - 408px); }
}

/* Banner text over the busy melter photo (Sam, 2026-10-01: "hard to read").
   Heavier weights (title 400 -> 500, line 300 -> 500), a little bigger on
   desktop, and a soft white glow around the letters that lifts them off the
   machines behind without a visible box. */
.fabric-banner__content h2 {
  font-weight: 500;
  text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 0 6px rgba(255, 255, 255, .9);
}
.fabric-banner__content p {
  font-weight: 500;
  color: var(--ink);
  text-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 4px rgba(255, 255, 255, .95);
}
@media (min-width: 750px) {
  .fabric-banner__content h2 { font-size: 38px; }
  .fabric-banner__content p { font-size: 17px; }
}

/* Product pages filled from the datasheet (2026-10-02): feature grid, spec tables,
   and wide tables (parts, configuration code) that scroll sideways inside their
   own box on phones instead of widening the page. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}
.feature h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}
.page-section .feature p { font-size: 15px; margin-bottom: 0; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 16px;
}
.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 300;
  line-height: 1.5;
}
.spec-table tbody th { font-weight: 500; width: 38%; }
.spec-table tbody tr:nth-child(odd) { background: var(--bg-cream); }
.spec-table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--ink);
}
.spec-table--cols td:nth-child(3) { white-space: nowrap; }
.code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.table-scroll .spec-table { margin-bottom: 0; }

@media (max-width: 749px) {
  .feature-grid { grid-template-columns: 1fr; gap: 22px; }
  .spec-table { font-size: 14px; }
  .spec-table th, .spec-table td { padding: 10px; }
  .spec-table tbody th { width: 44%; }
  .spec-table--cols { min-width: 560px; }       /* 4-column tables scroll inside .table-scroll */
  .spec-table--guide { min-width: 0; }          /* the 3-column code table fits a phone */
}
.spec-table--guide td:nth-child(3) { white-space: normal; }   /* "Meaning" column wraps (the nowrap is for "In stock") */

/* ============================================================
   Product photo galleries (equipment pages, 2026-10-02)
   One big photo, thumbnails underneath, arrows, swipe, keyboard,
   and a full-screen zoom. Only the photo being viewed (plus the
   next one) is downloaded. Without JavaScript the first photo shows.
   ============================================================ */
.page--product .page-section { max-width: 1080px; }      /* product pages are wider, so the gallery has room */
.product-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.product-hero__text { padding-top: 8px; }
.gallery { min-width: 0; }
.product-hero__text h1 {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 20px;
}
.product-hero__text h1 em { font-weight: 700; }

.gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: zoom-in;
  touch-action: pan-y;                 /* vertical scrolling stays native; sideways swipes change photo */
}
.gallery__stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;                 /* every photo shown whole, portrait or landscape */
  display: none;
}
.gallery__img.is-active { display: block; }
.gallery__nav,
.gallery__zoom {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.gallery__nav:hover, .gallery__zoom:hover { background: #fff; border-color: var(--ink); }
.gallery__nav { top: 50%; transform: translateY(-50%); }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__zoom { top: 12px; right: 12px; }
.gallery__count {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  padding: 3px 9px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.gallery__thumb {
  padding: 0;
  border: 1px solid var(--line);
  background: #fff;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  opacity: .72;
  transition: opacity .2s ease, border-color .2s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { opacity: 1; border: 2px solid var(--ink); }

/* Full-screen zoom */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(17, 17, 17, .94);
  display: none;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 86vh; object-fit: contain; background: #fff; }
.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(0, 0, 0, .6); border-color: #fff; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__close { top: 16px; right: 16px; font-size: 24px; }
.lightbox__caption {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  padding: 0 72px;
}

@media (min-width: 750px) and (max-width: 1007px) {
  .product-hero { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .product-hero__text h1 { font-size: 36px; }
}
@media (max-width: 749px) {
  .product-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 20px 28px; }   /* minmax(0, ...): the thumbnail strip scrolls instead of widening the page */
  .product-hero__text h1 { font-size: 34px; }
  .gallery__nav { width: 36px; height: 36px; font-size: 22px; }
  /* phones: one swipeable strip of thumbnails instead of rows */
  .gallery__thumbs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .gallery__thumb { flex: 0 0 60px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 48px; transform: none; }
  .lightbox__caption { bottom: 112px; padding: 0 20px; }
}
.spec-table td .code { overflow-wrap: anywhere; }   /* long model codes (VD200-UD6F6HN/XFACAWXEDE) wrap on small phones */

/* ============================================================
   Inner pages, shared structure (2026-10-06): photo banner, wide
   content blocks, closing call-to-action band. Used by Industries,
   Contact, Quote, Configuration Guide, Datasheets, Shipping.
   ============================================================ */
.page-banner {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #222;
}
.page-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14, 14, 14, .82) 0%, rgba(14, 14, 14, .45) 55%, rgba(14, 14, 14, .25) 100%);
}
.page-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px 44px;
  color: #fff;
}
.page-banner__eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 12px;
}
.page-banner h1 {
  font-family: var(--serif);
  font-size: 50px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 16px;
}
.page-banner h1 em { font-weight: 700; }
.page-banner__lead { font-size: 18px; font-weight: 400; line-height: 1.6; max-width: 660px; opacity: .95; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 56px 24px; }
.wrap--tight { padding-top: 32px; padding-bottom: 32px; }
.band-grey { background: var(--bg-cream); }
.section-head { max-width: 720px; margin-bottom: 32px; }
.section-head h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px;
}
.section-head h2 em { font-weight: 700; }
.section-head p, .prose p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--ink); margin-bottom: 12px; }
.prose a, .section-head a { text-decoration: underline; text-underline-offset: 3px; }
.prose h3 { font-size: 18px; font-weight: 500; color: var(--ink); margin: 20px 0 8px; }
.prose ul { padding-left: 20px; margin-bottom: 12px; }
.prose li { font-size: 16px; font-weight: 300; line-height: 1.7; }
.kicker {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Pills: jump links and "equipment that fits" links */
.pill-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  transition: background .2s ease, color .2s ease;
}
.pill:hover { background: var(--ink); color: #fff; }

/* Closing call-to-action band, same on every inner page */
.cta-band { background: var(--ink); color: #fff; text-align: center; padding: 64px 24px; }
.cta-band h2 { font-family: var(--serif); font-size: 34px; font-weight: 400; margin-bottom: 10px; }
.cta-band p { font-size: 16px; font-weight: 300; opacity: .9; margin-bottom: 28px; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-band .btn--solid { background: #fff; color: var(--ink); border-color: #fff; }
.cta-band .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
.cta-band .btn--outline:hover { background: #fff; color: var(--ink); }

/* Numbered option / step cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.card__num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.card h3 { font-size: 19px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.card p, .card li { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--ink); }
.card ul { padding-left: 18px; margin-top: 4px; }

/* FAQ accordion (native details/summary, no JavaScript needed) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  position: relative;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 24px; font-weight: 300; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 0 18px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--ink); max-width: 760px; }

/* Forms (Contact, Quote) */
.form-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .fieldset legend {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: #A1261B; }
.field .opt { font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;                  /* 16px stops iPhones zooming into the field */
  font-weight: 300;
  color: var(--ink);
  background: #fff;
  border: 1px solid #B9BBC0;
  border-radius: 0;
  padding: 12px 14px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #A1261B; }
.fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.fieldset legend { display: block; width: 100%; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.check-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.check-pills label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #B9BBC0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.check-pills input { width: auto; accent-color: var(--ink); }
.check-pills label:has(input:checked) { border-color: var(--ink); background: var(--bg-cream); font-weight: 500; }
.form-note { font-size: 14px; font-weight: 300; color: var(--text-muted); margin-top: 14px; line-height: 1.6; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.form-status { margin-top: 16px; padding: 14px 16px; background: var(--bg-cream); border-left: 3px solid var(--ink); font-size: 15px; line-height: 1.6; }
.form-status[hidden] { display: none; }
.form-aside { background: var(--bg-cream); padding: 30px 28px; position: sticky; top: 100px; }
.form-aside h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; margin-bottom: 14px; color: var(--ink); }
.form-aside ol { padding-left: 20px; margin-bottom: 20px; }
.form-aside li, .form-aside p { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--ink); margin-bottom: 8px; }
.form-aside a { text-decoration: underline; text-underline-offset: 3px; }
.form-aside .contact-list { margin-top: 8px; }

/* Full-width map */
.map-band { position: relative; background: var(--bg-cream); }
.map-band iframe { display: block; width: 100%; height: 70vh; min-height: 420px; max-height: 720px; border: 0; }
.map-band__label {
  position: absolute;
  z-index: 1;
  left: 24px;
  top: 24px;
  background: #fff;
  padding: 16px 20px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 300px;
}
.map-band__label strong { display: block; font-weight: 500; margin-bottom: 4px; }
.map-band__label a { text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }

@media (max-width: 1007px) {
  .cards-3 { grid-template-columns: 1fr; }
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form-aside { position: static; }
}
@media (max-width: 749px) {
  .page-banner { min-height: 300px; }
  .page-banner__inner { padding: 56px 20px 32px; }
  .page-banner h1 { font-size: 36px; }
  .page-banner__lead { font-size: 16px; }
  .wrap { padding: 40px 20px; }
  .section-head h2, .cta-band h2 { font-size: 28px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .map-band iframe { height: 60vh; min-height: 360px; }
  .map-band__label { position: static; max-width: none; border-width: 0 0 1px; box-shadow: none; }
}

/* ---------- Industries page: alternating photo / text rows ---------- */
.ind-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.ind-row:first-of-type { border-top: 0; }
.ind-row:nth-of-type(even) .ind-row__media { order: 2; }
.ind-row__media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-cream); overflow: hidden; }
.ind-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-tag {
  position: absolute;
  left: 12px; bottom: 12px;
  background: rgba(255, 255, 255, .92);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.ind-row h2 { font-family: var(--serif); font-size: 34px; font-weight: 400; color: var(--ink); margin-bottom: 14px; }
.ind-row__intro { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--ink); margin-bottom: 22px; }
.ind-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-bottom: 22px; }
.ind-lists h3 { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.ind-lists ul { list-style: none; }
.ind-lists li { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--ink); padding: 5px 0 5px 16px; position: relative; }
.ind-lists li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 1px; background: var(--ink); }
@media (max-width: 1007px) {
  .ind-row { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0; }
  .ind-row:nth-of-type(even) .ind-row__media { order: 0; }
}
@media (max-width: 749px) {
  .ind-lists { grid-template-columns: minmax(0, 1fr); }
  .ind-row h2 { font-size: 28px; }
}

/* ---------- Configuration guide: machine tabs + code decoder ---------- */
.tabs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
.tabs__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease;
}
.tabs__tab img { width: 52px; height: 52px; object-fit: contain; background: #fff; flex: 0 0 auto; }
.tabs__tab small { display: block; font-size: 12px; font-weight: 300; color: var(--text-muted); }
.tabs__tab:hover { border-color: var(--ink); }
.tabs__tab[aria-selected="true"] { border: 2px solid var(--ink); background: var(--bg-cream); }
.tabs__panel[hidden] { display: none; }

.decoder { background: var(--bg-cream); padding: 28px; margin-bottom: 28px; }
.decoder__label { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.decoder__code { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.decoder__seg {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 22px;
  font-weight: 500;
  min-width: 42px;
  padding: 8px 10px;
  border: 1px solid #B9BBC0;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.decoder__sep { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 22px; color: var(--text-muted); align-self: center; }
.decoder__seg:hover, .decoder__seg.is-hot { background: var(--ink); color: #fff; border-color: var(--ink); }
.decoder__readout { min-height: 3.2em; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink); }
.decoder__readout strong { font-weight: 500; }
.spec-table tr.is-hot { outline: 2px solid var(--ink); outline-offset: -2px; }
.guide-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.guide-figure { margin: 0; background: #fff; border: 1px solid var(--line); }
.guide-figure img { width: 100%; height: auto; display: block; }
.guide-figure figcaption { padding: 12px 14px; font-size: 14px; font-weight: 300; color: var(--text-muted); }
@media (max-width: 1007px) {
  .tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 749px) {
  .decoder { padding: 20px 16px; }
  .decoder__seg { font-size: 17px; min-width: 34px; padding: 7px 8px; }
  .tabs__tab img { width: 40px; height: 40px; }
  .tabs__tab { font-size: 14px; }
}

/* ---------- Datasheets: download cards ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.dl-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; transition: box-shadow .25s ease, transform .25s ease; }
.dl-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.dl-card__img { aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.dl-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dl-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.dl-card h3 { font-size: 19px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.dl-card p { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink); margin-bottom: 16px; flex: 1; }
.dl-card__meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.dl-card__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dl-card .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.dl-card__alt { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
/* Decoder: compact enough that the Rhino code fits on one line beside the nameplate photo */
.decoder__code { gap: 3px; }
.decoder__seg { font-size: 18px; min-width: 32px; padding: 6px 7px; }
.decoder__sep { font-size: 18px; padding: 0 1px; }

/* ---------- About page ---------- */
.about-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.about-split--reverse > figure { order: -1; }
.about-figure { margin: 0; }
.about-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.about-figure figcaption { padding-top: 10px; font-size: 14px; font-weight: 300; color: var(--text-muted); }
.about-figure--logo { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); aspect-ratio: 4 / 3; }
.about-figure--logo img { width: 60%; height: auto; aspect-ratio: auto; object-fit: contain; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.stat { padding: 8px 12px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat__num { display: block; font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1.05; color: var(--ink); }
.stat__label { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.promise { max-width: 720px; margin: 0 auto; text-align: center; }
.promise h2 { font-family: var(--serif); font-size: 34px; font-weight: 400; color: var(--ink); margin-bottom: 14px; }
.promise h2 em { font-weight: 700; }
.promise p { font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--ink); margin-bottom: 20px; }
@media (max-width: 1007px) {
  .about-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .about-split--reverse > figure { order: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 749px) {
  .stat__num { font-size: 40px; }
}

/* ---------- Legal pages (Terms, Privacy): plain banner, table of contents, readable text ---------- */
.page-banner--plain { min-height: 0; background: var(--bg-cream); }
.page-banner--plain::after { display: none; }
.page-banner--plain .page-banner__inner { color: var(--ink); padding: 64px 24px 40px; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal__toc { position: sticky; top: 100px; }
.legal__toc summary { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; margin-bottom: 12px; }
.legal__toc ol { list-style: none; border-left: 1px solid var(--line); }
.legal__toc li a { display: block; padding: 5px 0 5px 14px; font-size: 14px; font-weight: 300; color: var(--ink); text-decoration: none; }
.legal__toc li a:hover { text-decoration: underline; }
.legal__body { max-width: 760px; }
.legal__summary { background: var(--bg-cream); border-left: 3px solid var(--ink); padding: 24px 28px; margin-bottom: 36px; }
.legal__summary h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 12px; }
.legal__section { padding-top: 8px; margin-bottom: 28px; scroll-margin-top: 90px; }
.legal__section h2 { font-size: 20px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.legal__conspicuous { font-weight: 500 !important; font-size: 15px !important; line-height: 1.7; padding: 16px 18px; border: 1px solid var(--ink); background: #fff; }
.legal__small { font-size: 14px !important; color: var(--text-muted) !important; }
@media (max-width: 1007px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal__toc { position: static; background: var(--bg-cream); padding: 16px 18px; }
  .legal__toc summary { margin-bottom: 0; }
  .legal__toc details[open] summary { margin-bottom: 12px; }
}
.footer__form-note { font-size: 15px; font-weight: 400; color: var(--ink); padding: 14px 0; }

/* ============================================================
   Homepage design pass (2026-10-06)
   ============================================================ */
/* "Not Sure Which Unit Fits Your Line?": dark veil + white type instead of the
   white wash and glow, so it matches the hero's look */
.fabric-banner__frame::after {
  background: radial-gradient(ellipse at center, rgba(12, 12, 12, .74) 0%, rgba(12, 12, 12, .6) 60%, rgba(12, 12, 12, .5) 100%);
}
.fabric-banner__content h2,
.fabric-banner__content p {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}
.fabric-banner__content h2 { font-weight: 400; }
.fabric-banner__content p { font-weight: 400; opacity: .92; }

/* Hero: Get a Quote is the primary action; See Units is the quieter outline */
.btn--hero.btn--hero-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .85);
  color: #fff;
}
.btn--hero.btn--hero-ghost:hover { background: rgba(255, 255, 255, .12); opacity: 1; }

/* Configuration cards: clean product shot on white, shown whole */
.rail--products .product-card__imgwrap { background: #fff; }
.rail--products .product-card__imgwrap img { object-fit: contain; object-position: center; padding: 30px 6px 26px; }

/* "Where These Systems Run" heading lines up with the other sections' left edge */
@media (min-width: 1008px) {
  .italian__head { padding: 0 48px; }
}

/* Brand navy (2026-10-06): taken from the logo's dark navy (#081828), lifted a touch so
   it reads as a colour rather than black. Used for the page's two "bookends": the
   announcement bar at the top and the closing call-to-action band at the bottom of
   every page. Body text keeps the warm ink colour. */
:root { --brand-navy: #0F2236; }
.announce { background: var(--brand-navy); }
.cta-band { background: var(--brand-navy); }
.cta-band .btn--solid { color: var(--brand-navy); }
.cta-band p { opacity: .85; }

/* Solid call-to-action buttons in brand navy (2026-10-07): the header "Get a Quote",
   product-page/quote/contact/datasheet buttons. Buttons that sit on dark photos or on
   the navy band stay white (hero, .cta-band), so they keep their contrast. */
.btn--quote,
.btn--solid {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}
.btn--quote:hover,
.btn--solid:hover { background: #1B3550; border-color: #1B3550; opacity: 1; }
.cta-band .btn--solid { background: #fff; border-color: #fff; color: var(--brand-navy); }
.cta-band .btn--solid:hover { background: #E8ECF1; border-color: #E8ECF1; }

/* Wide picture under the product gallery (equipment pages, 2026-10-07):
   same width as the gallery above it, so the page keeps one clean column. */
.product-banner { max-width: 1080px; margin: 0 auto 8px; padding: 0 24px; }
.product-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: 50% 30%;
}
@media (max-width: 749px) {
  .product-banner { padding: 0 16px; }
  .product-banner img { aspect-ratio: 4 / 3; }
}




/* Four product cards in one row (landing page, 2026-10-07): 4 across, 2 x 2 on tablets, stacked on phones */
.dl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1023px) { .dl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .dl-grid--4 { grid-template-columns: 1fr; } }

/* Tables, consistent width across the site (2026-10-07): the parts page uses the same
   1080px column as the equipment pages, and part numbers and model codes in the
   multi-column tables never break onto two lines (on phones the table scrolls sideways
   inside its own box instead). The configuration guide keeps its own layout. */
.page--wide .page-hero,
.page--wide .page-section { max-width: 1080px; }
.page--wide .page-hero__lead { max-width: 760px; }
.spec-table--cols:not(.spec-table--guide) .code { white-space: nowrap; }