/* ===================== ROOT LUXURY COLORS ===================== */

:root {
  --brand-main: #282d3c;
  /* deep navy */
  --brand-accent: #c8a24d;
  /* luxury gold */
  --dark-text: #0b0f19;
  --light-bg: #f4f6f9;
  --white: #ffffff;
  --footer-dark: #0a0f18;
  --soft-border: #e1e5ea;
}

/* ===================== GLOBAL RESET ===================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

body {
  background: var(--light-bg);
  color: var(--dark-text);
  scroll-behavior: smooth;
}

/* ===================== TOP BAR ===================== */

.top-bar {
  background: var(--brand-main);
  color: var(--white);

  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

/* ===================== HEADER ===================== */

header {
  position: sticky;
  top: 0;
  background: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  z-index: 1000;
  transition: 0.3s;
}

header.scrolled {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.logo {
  font-size: 26px;
  font-weight: 700;
  color: var(--brand-main);
  display: flex;
  align-items: center;
}

nav a {
  margin: 0 12px;
  text-decoration: none;
  color: var(--brand-main);
  font-weight: 500;
}

nav a.active {
  border-bottom: 2px solid var(--brand-accent);
  padding-bottom: 4px;
}

/* button */

.btn {
  background: linear-gradient(135deg, var(--brand-main), var(--brand-accent));
  color: var(--white) !important;
  padding: 9px 18px;
  border-radius: 6px;
}

/* ===================== HERO SLIDER ===================== */

.hero-slider {
  width: 100%;
  /* Banners are 2152x731 (2.94:1) and drawn with background-size:contain.
     Fixed pixel heights fought that ratio — at 360px the banner rendered
     only 122px tall inside a 150px box, leaving dead space and unreadable
     artwork. aspect-ratio makes the box match the banner exactly at every
     width, so the artwork is always as large as it can be. */
  aspect-ratio: 2152 / 731;
  height: auto;
  max-height: 430px;
  position: relative;
  overflow: hidden;
}

.slides {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  /* IMPORTANT */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: 0.5s;
}

.slides.active {
  opacity: 1;
}

/* 🔥 MOST IMPORTANT */
.slides img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* NO CUT */
  background: #f5f5f5;
}

/* overlay premium look */

.slides::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, .45); */
}

/* hero text */

.hero-content {
  position: absolute;
  bottom: 20%;
  left: 8%;
  color: var(--white);
  max-width: 520px;
  z-index: 2;
}

.hero-content h1 {
  font-size: 44px;
  font-weight: 700;
}

.hero-content p {
  font-size: 18px;
  opacity: .9;
}

/* arrows */

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  z-index: 5;
}

.prev {
  left: 20px
}

.next {
  right: 20px
}

/* dots */

.dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.dot {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  margin: 0 6px;
  opacity: .5;
}

.dot.active {
  opacity: 1
}

/* ===================== ABOUT ===================== */

.about {
  display: flex;
  gap: 40px;
  padding: 70px;
}

.media-placeholder video {
  width: 100%;
  height: 90%;
  object-fit: cover;
  border-radius: 12px;
}

/* ================= INFRASTRUCTURE SINGLE IMAGE ================= */

.infrastructure-section {
  padding: 80px 60px;
  background: #ffffff;
}

.infra-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* TEXT */

.infra-subtitle {
  color: var(--brand-accent);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}

.infra-content h2 {
  font-size: 42px;
  color: var(--brand-main);
  margin-bottom: 15px;
}

.infra-highlight {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

.infra-list {
  list-style: none;
  padding: 0;
}

.infra-list li {
  margin-bottom: 14px;
  line-height: 1.7;
  padding-left: 22px;
  position: relative;
}

.infra-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand-accent);
  font-size: 18px;
}

/* IMAGE */

.infra-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

/* ================= TESTIMONIAL SECTION ================= */

.testimonial-section {
  padding: 80px 60px;
  background: #ffffff;
}

.testimonial-container {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* LEFT IMAGE */

.testimonial-image {
  flex: 1;
}

.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}

/* RIGHT CONTENT */

.testimonial-content {
  flex: 1;
  background: #b63a1c;
  padding: 50px;
  color: #ffffff;
  border-radius: 12px;
}

.testimonial-tag {
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.testimonial-content h2 {
  font-size: 38px;
  margin-bottom: 30px;
}

/* ITEMS */

.testimonial-item {
  margin-bottom: 28px;
}

.arrow-icon {
  font-size: 20px;
  margin-right: 8px;
}

.testimonial-item p {
  display: inline;
  font-size: 16px;
  line-height: 1.6;
}

.testimonial-item strong {
  display: block;
  margin-top: 6px;
  font-weight: 600;
}

/* ================= STATS RESPONSIVE FIX ================= */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.stats div {
  flex: 1 1 200px;
  min-width: 150px;
  text-align: center;
}

/* ===================== PRODUCTS ===================== */

.products {
  padding: 70px;
  text-align: center;
}

.filters button {
  margin: 6px;
  padding: 9px 18px;
  border: 1px solid var(--brand-main);
  background: none;
  cursor: pointer;
  border-radius: 4px;
}

.filters button.active,
.filters button:hover {
  background: var(--brand-main);
  color: var(--white);
}

/* product grid */

.grid {
  margin-top: 35px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

/* ===================== PREMIUM PRODUCT CARD ===================== */

.item {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
  transition: .35s ease;
}

.img-wrap {
  overflow: hidden
}

.item img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  transition: .4s;
}

.item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
}

.item:hover img {
  transform: scale(1.05);
}

/* info */

.premium-info {
  padding: 16px;
}

.premium-info h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-main);
}

.premium-info span {
  font-size: 13px;
  color: #666;
}

/* ===================== STATS ===================== */

.stats {
  background: linear-gradient(135deg, #0d1324, #121826);
  color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 60px 20px;
}

.stats h3 {
  font-size: 38px;
}

.stats p {
  font-size: 14px;
  opacity: .9;
}

/* ===================== CONTACT ===================== */

.contact {
  display: flex;
  gap: 40px;
  padding: 70px;
}

.contact input,
.contact textarea,
select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--soft-border);
  margin-bottom: 12px;
}

.contact button {
  background: linear-gradient(135deg, var(--brand-main), var(--brand-accent));
  color: #fff;
  padding: 12px;
  border: none;
}

/* ===================== POPUP FIX (SAFE) ===================== */

#popupOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 9998;
}

#popupForm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  width: 360px;
  max-width: 92%;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  display: none;
  z-index: 9999;
}

/* heading */
#popupForm h3 {
  margin-bottom: 15px;
  color: #111;
}

/* inputs */
#popupForm input,
#popupForm textarea,
#popupForm select {
  width: 100%;
  padding: 11px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

/* button */
#popupForm button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #111, #333);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* close icon */
#popupClose {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  cursor: pointer;
  color: #000;
}

#popupOverlay,
#popupForm {
  display: none;
}


/* ===================== FOOTER ===================== */

.site-footer {
  background: linear-gradient(135deg, #070b14, #0e1626);
  color: #e4e9f0;
  padding-top: 60px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  padding: 0 20px 50px;
}

.footer-col h3,
.footer-col h4 {
  color: var(--brand-accent);
}

.footer-col a {
  color: #cfd6e4;
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--brand-accent);
}

.footer-bottom {
  background: #050810;
  text-align: center;
  padding: 15px;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.clients-section {
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 60px 5%;
  font-family: 'Poppins', Arial, sans-serif;
}

.clients-text {
  max-width: 420px;
}

.small-heading {
  font-size: 14px;
  color: #444;
  letter-spacing: 1px;
}

.clients-text h2 {
  font-size: 46px;
  font-weight: 700;
  color: #b3472a;
  line-height: 1.15;
  margin: 15px 0;
}

.clients-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}

.clients-text .sub-text {
  font-size: 15px;
  color: #666;
}

.clients-image img {
  max-width: 100%;
  border-radius: 16px;
}


/* ===================== MOBILE ===================== */

.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
  margin-left: auto;
}

@media (max-width: 992px) {
  .clients-section {
    flex-direction: column;
    text-align: center;
  }

  .clients-text {
    max-width: 100%;
  }

  .clients-text h2 {
    font-size: 38px;
  }
}

/* ========================= */
/* MOBILE RESPONSIVE */
/* ========================= */
@media (max-width: 576px) {
  .clients-section {
    padding: 40px 20px;
  }

  .clients-text h2 {
    font-size: 30px;
  }

  .clients-text p {
    font-size: 15px;
  }

  .small-heading {
    font-size: 13px;
  }
}

@media(max-width:820px) {

  .menu-toggle {
    display: block
  }

  header {
    position: relative;
  }

  /* Scoped to #mainNav specifically — a bare "nav" selector here used to
     catch every <nav> on the page, including the "Bag materials" strip
     and the breadcrumb, silently pinning them to position:absolute and
     stacking them on top of whatever content followed. */
  #mainNav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    display: none;
    flex-direction: column;
    padding: 10px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  }

  #mainNav.active {
    display: flex
  }

  #mainNav a {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }

  #mainNav .btn {
    display: none
  }
}

/* ===================== ULTRA MOBILE ===================== */

@media(max-width:360px) {

  .hero-slider {
    max-height: 60vh;
  }

  .hero-content h1 {
    font-size: 22px
  }

  .arrow {
    display: none
  }

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

  .item img {
    height: 240px
  }

  .contact,
  .about {
    padding: 40px 16px;
    flex-direction: column;
  }

}

/* ===== ABOUT SECTION STACK FIX @727px ===== */

@media (max-width: 728px) {

  .about {
    flex-direction: column;
  }

  /* text first */
  .about-text {
    order: 1;
  }

  /* video below text */
  .media-placeholder {
    order: 2;
    margin-top: 15px;
  }

}

/* Tablet view */

@media (max-width: 768px) {

  .stats {
    padding: 40px 15px;
  }

  .stats h3 {
    font-size: 30px;
  }

  .stats p {
    font-size: 13px;
  }

}

/* Mobile view */

@media (max-width: 480px) {

  .stats {
    flex-direction: column;
    gap: 25px;
  }

  .stats div {
    width: 100%;
  }

  .stats h3 {
    font-size: 26px;
  }

}


/* ================= MOBILE RESPONSIVE ================= */

@media(max-width:900px) {

  .testimonial-container {
    flex-direction: column;
  }

  .testimonial-content {
    padding: 35px 25px;
  }

  .testimonial-content h2 {
    font-size: 26px;
  }

}

@media(max-width:480px) {

  .testimonial-section {
    padding: 50px 15px;
  }

  .testimonial-content {
    padding: 25px 18px;
  }

}

/* ================= RESPONSIVE ================= */

@media(max-width: 900px) {

  .infra-wrapper {
    grid-template-columns: 1fr;
  }

  .infra-image img {
    height: 320px;
  }

}

@media(max-width: 480px) {

  .infrastructure-section {
    padding: 50px 18px;
  }

  .infra-content h2 {
    font-size: 26px;
  }

  .infra-image img {
    height: 260px;
  }

}


/* ================= MOBILE RESPONSIVE ================= */

@media(max-width: 900px) {

  .infra-wrapper {
    grid-template-columns: 1fr;
  }

  .infra-images {
    grid-template-columns: 1fr 1fr;
  }

}

@media(max-width: 480px) {

  .infra-images {
    grid-template-columns: 1fr;
  }

  .infra-content h2 {
    font-size: 28px;
  }

  .infrastructure-section {
    padding: 50px 20px;
  }

}

.stats div {
  transition: .3s ease;
}

.stats div:hover {
  transform: translateY(-5px);
}

/* ===== HEADER: BUTTON HIDE ===== */

@media (max-width: 920px) {

  header .btn {
    display: none !important;
  }

}

/* ===== UNIVERSAL PRODUCT CARD FIX (ALL PAGES) ===== */

/* Desktop */
.item img {
  width: 100%;
  height: 360px;
  object-fit: contain;
}

/* Tablet */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .item img {
    height: 300px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    /* full width */
  }

  .item img {
    height: 320px;
    /* mobile me badi image */
  }

  .item {
    width: 100%;
  }

  .products {
    padding: 20px;
    text-align: center;
  }
}

@media (max-width: 768px) {

  .hero-slider {
    max-height: 320px;
  }

}

@media (max-width: 768px) {
  .hero-slider {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .hero-slider {
    max-height: 220px;
  }
}

@media (max-width: 360px) {
  .hero-slider {
    max-height: 180px;
  }
}

/* =========================================================================
   ============  ABOUT PAGE (2026 UPDATE)  ================================
   Added block. Nothing above this line was modified.
   Page-specific rules are scoped to  body.page-about
   ========================================================================= */

:root {
  --navy-soft: #1b2436;
  --ink-muted: #5b6376;
  --gold-tint: rgba(200, 162, 77, .12);
  --gold-line: rgba(200, 162, 77, .38);
  --wrap: 1200px;
  --sec-y: clamp(56px, 7vw, 104px);
  --sec-x: clamp(18px, 5vw, 60px);
  --card-shadow: 0 10px 30px rgba(18, 24, 38, .07);
  --card-shadow-hi: 0 22px 48px rgba(18, 24, 38, .16);
}

/* ---------- SCROLL REVEAL (the .reveal class had no CSS before) -------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal.active {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .dl-bar span {
    transition: none !important;
  }
}

/* ---------- CLICKABLE TOP BAR + FOOTER CONTACTS ----------------------- */

.top-bar a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

.top-bar a:hover {
  color: var(--brand-accent);
}

.footer-col p a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

.footer-col p a:hover {
  color: var(--brand-accent);
}

.footer-mini {
  margin-top: 10px;
  font-size: 13px;
  color: var(--brand-accent);
  letter-spacing: .3px;
}

.footer-addr {
  margin-top: 12px;
  line-height: 1.7;
  opacity: .92;
}

/* ---------- SHARED ABOUT-PAGE TYPE + UTILITIES ----------------------- */

body.page-about h1,
body.page-about h2,
body.page-about h3,
body.page-about .num,
body.page-about .cap-card__value,
body.page-about .rail__num {
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.015em;
}

body.page-about section:not(.hero-slider) {
  padding: var(--sec-y) var(--sec-x);
}

/* the hero slider has a fixed height + absolutely positioned .slides,
   so it must never receive section padding */
body.page-about .hero-slider {
  padding: 0;
}

body.page-about h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 18px;
}

body.page-about h2 {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.18;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 16px;
}

body.page-about p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

.eyebrow {
  display: inline-block;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 14px;
  padding-left: 40px;
  position: relative;
}

.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 2px;
  background: var(--brand-accent);
}

.eyebrow--center {
  padding-left: 0;
}

.eyebrow--center::before {
  display: none;
}

.eyebrow--light {
  color: var(--brand-accent);
}

/* ---------- BREADCRUMB ----------------------------------------------- */

.crumb {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--sec-x) 0;
  font-size: 13.5px;
  color: var(--ink-muted);
}

.crumb a {
  color: var(--ink-muted);
  text-decoration: none;
}

.crumb a:hover {
  color: var(--brand-accent);
}

.crumb span {
  margin: 0 8px;
  opacity: .5;
}

.crumb strong {
  color: var(--brand-main);
  font-weight: 600;
}

/* ---------- BUTTONS -------------------------------------------------- */

.ab-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.ab-cta-row--center {
  justify-content: center;
}

.btn-solid,
.btn-ghost {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}

.btn-solid {
  background: var(--brand-accent);
  color: var(--brand-main);
  box-shadow: 0 8px 22px rgba(200, 162, 77, .32);
}

.btn-solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(200, 162, 77, .45);
}

.btn-ghost {
  border: 1.5px solid var(--brand-main);
  color: var(--brand-main);
}

.btn-ghost:hover {
  background: var(--brand-main);
  color: #fff;
  transform: translateY(-3px);
}

.btn-ghost--light {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.btn-ghost--light:hover {
  background: #fff;
  color: var(--brand-main);
}

.btn-solid:focus-visible,
.btn-ghost:focus-visible,
.top-bar a:focus-visible,
.crumb a:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 3px;
}

/* ---------- 1. STORY ------------------------------------------------- */

.ab-story {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--light-bg);
}

.ab-story .lead {
  font-size: clamp(16.5px, 1.35vw, 19px);
  color: var(--brand-main);
  border-left: 3px solid var(--brand-accent);
  padding-left: 20px;
  margin-bottom: 22px;
}

.ab-story__kicker {
  background: var(--gold-tint);
  border-radius: 6px;
  padding: 16px 20px;
  color: var(--brand-main) !important;
  margin-bottom: 0;
}

.ab-story__media {
  position: relative;
}

.ab-story__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: var(--card-shadow-hi);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.ab-story__media:hover img {
  transform: translateY(-6px) scale(1.012);
}

.ab-badge {
  position: absolute;
  left: -14px;
  bottom: 26px;
  background: var(--brand-main);
  color: #fff;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: var(--card-shadow-hi);
  border-left: 3px solid var(--brand-accent);
}

.ab-badge b {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 19px;
  color: var(--brand-accent);
  letter-spacing: .02em;
}

/* ---------- 2. NUMBERS BAND (reuses .stats so counters keep working) -- */

.stats.numbers-band {
  display: block;
  padding: var(--sec-y) var(--sec-x);
  background: linear-gradient(150deg, #0d1324 0%, #121826 55%, #18203a 100%);
  position: relative;
  overflow: hidden;
}

.stats.numbers-band::after {
  content: "";
  position: absolute;
  inset: auto -10% -55% 55%;
  height: 340px;
  background: radial-gradient(closest-side, rgba(200, 162, 77, .16), transparent);
  pointer-events: none;
}

.numbers-band__title {
  color: #fff !important;
  text-align: center;
  max-width: var(--wrap);
  margin: 0 auto 44px;
  position: relative;
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  max-width: var(--wrap);
  margin: 0 auto;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.stats.numbers-band .numbers-grid>div {
  background: rgba(255, 255, 255, .015);
  padding: 30px 18px;
  text-align: center;
  min-width: 0;
  transition: background .35s ease, transform .35s ease;
}

.stats.numbers-band .numbers-grid>div:hover {
  background: rgba(200, 162, 77, .1);
  transform: none;
}

.numbers-band .num {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--brand-accent);
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.numbers-band .num small {
  font-size: .48em;
  font-weight: 600;
  letter-spacing: .02em;
}

.stats.numbers-band .numbers-grid p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
  margin: 0;
  opacity: 1;
}

/* ---------- 3. SPLIT SECTION ---------------------------------------- */

.ab-split {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
}

.ab-split__media img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1), box-shadow .6s ease;
}

.ab-split__media:hover img {
  transform: scale(1.02);
  box-shadow: var(--card-shadow-hi);
}

.ab-quote {
  margin-top: 26px;
  background: #fff;
  border-left: 4px solid var(--brand-accent);
  border-radius: 0 8px 8px 0;
  padding: 22px 26px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--brand-main);
  box-shadow: var(--card-shadow);
}

.ab-quote strong {
  color: var(--brand-main);
}

/* ---------- CLIENT LOGOS -------------------------------------------- */

.ab-logos {
  text-align: center;
  background: #fff;
}

.ab-logos__sub {
  max-width: 720px;
  margin: 0 auto 34px;
}

.ab-logos__wrap {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  padding: 14px;
  background: var(--light-bg);
  box-shadow: var(--card-shadow);
}

.ab-logos__wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ---------- 4. CAPACITY -------------------------------------------- */

.ab-capacity {
  max-width: var(--wrap);
  margin: 0 auto;
}

.ab-capacity__head {
  max-width: 760px;
  margin-bottom: 40px;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}

.cap-card {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-top: 3px solid var(--brand-accent);
  border-radius: 10px;
  padding: 30px 26px;
  box-shadow: var(--card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}

.cap-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--card-shadow-hi);
}

.cap-card__label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.cap-card__value {
  display: block;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-main);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.cap-card__unit {
  display: block;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-muted);
}

.cap-card--proof {
  background: var(--brand-main);
  border-color: var(--brand-main);
}

.cap-card--proof .cap-card__label {
  color: var(--brand-accent);
}

.cap-card--proof .cap-card__value {
  color: #fff;
}

.cap-card--proof .cap-card__unit {
  color: rgba(255, 255, 255, .78);
}

.cap-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cap-photos img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.cap-photos img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--card-shadow-hi);
}

/* ---------- 5. DELIVERY COMPARISON (signature element) ------------- */

.ab-delivery {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  background: #fff;
  border-radius: 0;
}

.ab-delivery__chart {
  background: var(--light-bg);
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 38px);
}

.dl-row+.dl-row {
  margin-top: 24px;
}

.dl-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.dl-row--ours .dl-label {
  color: var(--brand-main);
}

.dl-bar {
  background: rgba(18, 24, 38, .06);
  border-radius: 6px;
  height: 52px;
  overflow: hidden;
}

.dl-bar span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: 0;
  padding-right: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--brand-accent), #dcbc6c);
  transition: width 1.25s cubic-bezier(.22, .61, .36, 1) .25s;
}

.dl-bar--muted span {
  background: linear-gradient(90deg, #6c7488, #8b93a6);
}

.dl-bar span b {
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-main);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dl-bar--muted span b {
  color: #fff;
}

.reveal.active .dl-bar span {
  width: var(--w);
}

.dl-note {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed var(--gold-line);
  font-size: 15px;
  color: var(--ink-muted);
}

.dl-note strong {
  font-family: "Archivo", sans-serif;
  font-size: 26px;
  color: var(--brand-main);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 6. CAPABILITIES ---------------------------------------- */

.ab-capab {
  max-width: var(--wrap);
  margin: 0 auto;
}

.ab-capab__head {
  max-width: 760px;
  margin-bottom: 40px;
}

.ab-capab__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 50px);
}

.capab-block h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-main);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--soft-border);
}

.tick-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.tick-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--brand-main);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-tint);
  border: 1.5px solid var(--brand-accent);
}

.tick-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  transform: rotate(40deg);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--gold-line);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-main);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.chip:hover {
  background: var(--brand-main);
  color: var(--brand-accent);
  transform: translateY(-3px);
}

.capab-block__img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  margin-top: 22px;
  box-shadow: var(--card-shadow);
}

/* ---------- 7. QUALITY --------------------------------------------- */

.ab-quality {
  text-align: center;
  background: #fff;
}

.ab-quality__intro,
.ab-quality__sys {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.q-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 38px auto;
}

.q-card {
  background: var(--light-bg);
  border: 1px solid var(--soft-border);
  border-radius: 10px;
  padding: 30px 20px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.q-card:hover {
  transform: translateY(-7px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow-hi);
}

.q-card strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-accent);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.q-card span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.triad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
}

.triad span {
  font-family: "Archivo", sans-serif;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 700;
  color: var(--brand-main);
  padding: 0 clamp(16px, 3vw, 34px);
  position: relative;
}

.triad span+span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
}

/* ---------- 8. USE CASES ------------------------------------------- */

.ab-usecase {
  max-width: var(--wrap);
  margin: 0 auto;
}

.ab-usecase__head {
  max-width: 780px;
  margin-bottom: 40px;
}

.uc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 50px;
}

.uc-card {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-radius: 10px;
  padding: 26px 22px;
  box-shadow: var(--card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}

.uc-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--card-shadow-hi);
}

.uc-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 12px;
}

.uc-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--brand-main);
}

.uc-sub {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.chip-row--wide {
  gap: 12px;
}

/* ---------- 9. PROCESS RAIL ---------------------------------------- */

.ab-approach {
  background: var(--brand-main);
}

.ab-approach__head {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}

.ab-approach__head .eyebrow {
  padding-left: 0;
}

.ab-approach__head .eyebrow::before {
  display: none;
}

body.page-about .ab-approach h2 {
  color: #fff;
}

body.page-about .ab-approach p {
  color: rgba(255, 255, 255, .72);
}

.rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: var(--wrap);
  margin: 0 auto;
  position: relative;
}

.rail::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 26px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 12%, var(--gold-line) 88%, transparent);
}

.rail__step {
  padding: 0 16px;
  text-align: center;
  position: relative;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.reveal.active .rail__step {
  opacity: 1;
  transform: none;
}

.reveal.active .rail__step:nth-child(1) {
  transition-delay: .10s;
}

.reveal.active .rail__step:nth-child(2) {
  transition-delay: .22s;
}

.reveal.active .rail__step:nth-child(3) {
  transition-delay: .34s;
}

.reveal.active .rail__step:nth-child(4) {
  transition-delay: .46s;
}

.reveal.active .rail__step:nth-child(5) {
  transition-delay: .58s;
}

.rail__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--brand-main);
  border: 2px solid var(--brand-accent);
  color: var(--brand-accent);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

.rail__step:hover .rail__num {
  background: var(--brand-accent);
  color: var(--brand-main);
  transform: translateY(-4px);
}

body.page-about .rail__step h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

body.page-about .rail__step p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .66);
  margin: 0;
}

/* ---------- 10. WHY BRANDS CHOOSE SELMORE -------------------------- */

.ab-why {
  text-align: center;
  max-width: var(--wrap);
  margin: 0 auto;
}

.why-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
  text-align: left;
}

.why-grid li {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-radius: 10px;
  padding: 24px 22px 24px 54px;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 600;
  color: var(--brand-main);
  position: relative;
  box-shadow: var(--card-shadow);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.why-grid li:hover {
  transform: translateY(-6px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow-hi);
}

.why-grid li::before {
  content: "✔";
  position: absolute;
  left: 22px;
  top: 24px;
  color: var(--brand-accent);
  font-size: 16px;
}

/* ---------- 11. CLOSING CTA --------------------------------------- */

.ab-close {
  background:
    linear-gradient(135deg, rgba(13, 19, 36, .94), rgba(18, 24, 38, .88)),
    url("../images/About image/factory-stitching-floor.webp") center/cover no-repeat;
  text-align: center;
}

.ab-close__inner {
  max-width: 820px;
  margin: 0 auto;
}

body.page-about .ab-close h2 {
  color: #fff;
}

body.page-about .ab-close p {
  color: rgba(255, 255, 255, .78);
}

.ab-close__motto {
  font-family: "Archivo", sans-serif;
  font-size: clamp(17px, 2.2vw, 24px) !important;
  font-weight: 600;
  color: var(--brand-accent) !important;
  line-height: 1.6 !important;
  margin: 26px 0 !important;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

/* =========================================================================
   ABOUT PAGE — RESPONSIVE
   ========================================================================= */

@media (max-width: 1100px) {

  .numbers-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .uc-grid,
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rail {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 0;
  }

  .rail::before {
    display: none;
  }
}

@media (max-width: 900px) {

  .ab-story,
  .ab-split,
  .ab-delivery,
  .ab-capab__cols {
    grid-template-columns: 1fr;
  }

  .ab-split__media {
    order: 2;
  }

  .ab-split__media img {
    max-height: 340px;
  }

  .ab-story__media img {
    max-height: 460px;
    object-fit: cover;
  }

  .ab-badge {
    left: 14px;
  }

  .cap-grid,
  .q-grid {
    grid-template-columns: 1fr;
  }

  .cap-photos {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .cap-photos img {
    height: 170px;
  }
}

@media (max-width: 640px) {

  .numbers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats.numbers-band .numbers-grid>div {
    padding: 22px 12px;
  }

  .rail {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: left;
  }

  .rail__step {
    text-align: left;
    padding: 0 0 0 74px;
  }

  .rail__num {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }

  .uc-grid,
  .why-grid,
  .tick-list {
    grid-template-columns: 1fr;
  }

  .cap-photos {
    grid-template-columns: 1fr;
  }

  .cap-photos img {
    height: 210px;
  }

  .capab-block__img {
    height: 220px;
  }

  .ab-story .lead {
    padding-left: 16px;
  }

  .dl-bar {
    height: 46px;
  }

  .dl-bar span b {
    font-size: 14px;
  }

  .triad span {
    padding: 6px 14px;
  }

}

/* ---------- ABOUT PAGE: align + harmonise the pre-existing sections ---- */

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

body.page-about .ab-split__media img {
  max-height: 470px;
  object-position: center;
}

body.page-about .infrastructure-section,
body.page-about .products,
body.page-about .testimonial-section {
  padding: var(--sec-y) var(--sec-x);
}

body.page-about .infra-wrapper,
body.page-about .testimonial-container,
body.page-about .products .grid {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

body.page-about .products h2 {
  max-width: var(--wrap);
  margin: 0 auto 34px;
  text-align: center;
}

body.page-about .infra-subtitle {
  color: var(--brand-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.page-about .tick-list {
  align-content: start;
}

/* Testimonials: navy card so it sits inside the navy + gold system */

body.page-about .testimonial-content {
  background: linear-gradient(150deg, #121826, #1b2436);
  border-left: 3px solid var(--brand-accent);
}

body.page-about .testimonial-content h2 {
  color: #fff;
}

body.page-about .testimonial-tag {
  color: var(--brand-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

body.page-about .testimonial-item p {
  color: rgba(255, 255, 255, .82);
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
}

body.page-about .testimonial-item strong {
  color: var(--brand-accent);
  font-size: 13.5px;
  letter-spacing: .04em;
}

body.page-about .arrow-icon {
  color: var(--brand-accent);
}

/* =========================================================================
   ============  ABOUT PAGE — POLISH LAYER  ===============================
   Staggered child reveals, image wipes, nav + heading micro-interactions.
   ========================================================================= */

/* smooth scroll only works on the root element, not on body */
html {
  scroll-behavior: smooth;
}

/* ---------- SCROLL PROGRESS BAR (progressive enhancement) ------------- */

.scroll-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 1200;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--brand-accent), #e0c47e);
    animation: sp-grow linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes sp-grow {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }
}

/* ---------- STAGGERED CHILD REVEALS ---------------------------------- */

.reveal .cap-card,
.reveal .cap-photos img,
.reveal .uc-card,
.reveal .why-grid li,
.reveal .q-card,
.reveal .numbers-grid>div,
.reveal .tick-list li,
.reveal .chip,
.reveal .triad span,
.reveal .item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1),
    box-shadow .35s ease, background .35s ease, border-color .35s ease;
}

.reveal.active .cap-card,
.reveal.active .cap-photos img,
.reveal.active .uc-card,
.reveal.active .why-grid li,
.reveal.active .q-card,
.reveal.active .numbers-grid>div,
.reveal.active .tick-list li,
.reveal.active .chip,
.reveal.active .triad span,
.reveal.active .item {
  opacity: 1;
  transform: none;
}

/* delays — the container's own fade lands first, children follow */
.reveal.active .cap-card:nth-child(1),
.reveal.active .cap-photos img:nth-child(1),
.reveal.active .uc-card:nth-child(1),
.reveal.active .why-grid li:nth-child(1),
.reveal.active .q-card:nth-child(1),
.reveal.active .numbers-grid>div:nth-child(1),
.reveal.active .tick-list li:nth-child(1),
.reveal.active .chip:nth-child(1),
.reveal.active .triad span:nth-child(1),
.reveal.active .item:nth-child(1) {
  transition-delay: .08s;
}

.reveal.active .cap-card:nth-child(2),
.reveal.active .cap-photos img:nth-child(2),
.reveal.active .uc-card:nth-child(2),
.reveal.active .why-grid li:nth-child(2),
.reveal.active .q-card:nth-child(2),
.reveal.active .numbers-grid>div:nth-child(2),
.reveal.active .tick-list li:nth-child(2),
.reveal.active .chip:nth-child(2),
.reveal.active .triad span:nth-child(2),
.reveal.active .item:nth-child(2) {
  transition-delay: .15s;
}

.reveal.active .cap-card:nth-child(3),
.reveal.active .cap-photos img:nth-child(3),
.reveal.active .uc-card:nth-child(3),
.reveal.active .why-grid li:nth-child(3),
.reveal.active .q-card:nth-child(3),
.reveal.active .numbers-grid>div:nth-child(3),
.reveal.active .tick-list li:nth-child(3),
.reveal.active .chip:nth-child(3),
.reveal.active .triad span:nth-child(3),
.reveal.active .item:nth-child(3) {
  transition-delay: .22s;
}

.reveal.active .uc-card:nth-child(4),
.reveal.active .why-grid li:nth-child(4),
.reveal.active .numbers-grid>div:nth-child(4),
.reveal.active .tick-list li:nth-child(4),
.reveal.active .chip:nth-child(4),
.reveal.active .item:nth-child(4) {
  transition-delay: .29s;
}

.reveal.active .why-grid li:nth-child(5),
.reveal.active .numbers-grid>div:nth-child(5),
.reveal.active .tick-list li:nth-child(5),
.reveal.active .chip:nth-child(5),
.reveal.active .item:nth-child(5) {
  transition-delay: .36s;
}

.reveal.active .why-grid li:nth-child(6),
.reveal.active .numbers-grid>div:nth-child(6),
.reveal.active .tick-list li:nth-child(6),
.reveal.active .chip:nth-child(6),
.reveal.active .item:nth-child(6) {
  transition-delay: .43s;
}

.reveal.active .why-grid li:nth-child(7),
.reveal.active .numbers-grid>div:nth-child(7),
.reveal.active .tick-list li:nth-child(7),
.reveal.active .chip:nth-child(7),
.reveal.active .item:nth-child(7) {
  transition-delay: .50s;
}

.reveal.active .why-grid li:nth-child(8),
.reveal.active .numbers-grid>div:nth-child(8),
.reveal.active .tick-list li:nth-child(8),
.reveal.active .chip:nth-child(8),
.reveal.active .item:nth-child(8) {
  transition-delay: .57s;
}

.reveal.active .numbers-grid>div:nth-child(9),
.reveal.active .chip:nth-child(9) {
  transition-delay: .64s;
}

.reveal.active .numbers-grid>div:nth-child(10),
.reveal.active .chip:nth-child(10) {
  transition-delay: .71s;
}

.reveal.active .chip:nth-child(n+11) {
  transition-delay: .78s;
}

/* ---------- IMAGE WIPE REVEAL ---------------------------------------- */

.reveal .ab-story__media img,
.reveal .ab-split__media img,
.reveal .ab-logos__wrap,
.reveal .capab-block__img,
.reveal .infra-image img,
.reveal .testimonial-image img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(.22, .61, .36, 1) .12s,
    transform .6s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}

.reveal.active .ab-story__media img,
.reveal.active .ab-split__media img,
.reveal.active .ab-logos__wrap,
.reveal.active .capab-block__img,
.reveal.active .infra-image img,
.reveal.active .testimonial-image img {
  clip-path: inset(0 0 0 0);
}

/* ---------- HEADING ACCENT LINE THAT DRAWS IN ------------------------ */

body.page-about h2 {
  position: relative;
  padding-bottom: 16px;
}

body.page-about h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--brand-accent);
  transition: width .85s cubic-bezier(.22, .61, .36, 1) .3s;
}

.reveal.active h2::after {
  width: 62px;
}

/* centred sections get a centred rule */
body.page-about .ab-logos h2::after,
body.page-about .ab-quality h2::after,
body.page-about .ab-why h2::after,
body.page-about .ab-approach h2::after,
body.page-about .ab-close h2::after,
body.page-about .products h2::after,
body.page-about .numbers-band__title::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- NAV HOVER UNDERLINE -------------------------------------- */

nav a:not(.btn) {
  position: relative;
}

nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--brand-accent);
  transition: width .3s ease;
}

nav a:not(.btn):hover::after {
  width: 100%;
}

/* ---------- CARD HOVER: GOLD EDGE ------------------------------------ */

.cap-card,
.uc-card,
.q-card,
.why-grid li {
  position: relative;
  overflow: hidden;
}

.cap-card::before,
.uc-card::before,
.q-card::before,
.why-grid li::before {
  z-index: 1;
}

.uc-card::after,
.q-card::after,
.why-grid li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--brand-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.uc-card:hover::after,
.q-card:hover::after,
.why-grid li:hover::after {
  transform: scaleY(1);
}

/* ---------- BUTTON SHEEN --------------------------------------------- */

.btn-solid {
  position: relative;
  overflow: hidden;
}

.btn-solid::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
}

.btn-solid:hover::after {
  left: 130%;
}

/* ---------- PROCESS RAIL: NODE PULSE ON THE SPINE -------------------- */

.rail__num::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .4s ease, transform .4s ease;
}

.rail__step:hover .rail__num::after {
  opacity: 1;
  transform: scale(1);
}

/* ---------- REDUCED MOTION: TURN ALL OF THE ABOVE OFF --------------- */

@media (prefers-reduced-motion: reduce) {

  .reveal .cap-card,
  .reveal .cap-photos img,
  .reveal .uc-card,
  .reveal .why-grid li,
  .reveal .q-card,
  .reveal .numbers-grid>div,
  .reveal .tick-list li,
  .reveal .chip,
  .reveal .triad span,
  .reveal .item,
  .reveal .ab-story__media img,
  .reveal .ab-split__media img,
  .reveal .ab-logos__wrap,
  .reveal .capab-block__img,
  .reveal .infra-image img,
  .reveal .testimonial-image img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  body.page-about h2::after {
    width: 62px;
    transition: none;
  }

  .scroll-progress {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Widget styles (WhatsApp + AI chat launcher) now live inside
   js/widgets.js, so the widget works even if this file is not updated. */

/* =========================================================================
   ============  RESPONSIVE FIXES (2026)  =================================
   Appended. Nothing above this line was changed except the hero heights,
   which are noted inline where they live.
   ========================================================================= */

/* ---------- product cards ------------------------------------------- */

/* 360px-tall images made every card a full phone screen, so eight products
   became an endless scroll. Cap the image on small screens and go to two
   columns as soon as there is room. */

/* Between phone and desktop the grid was stuck at 2 wide, leaving big gaps
   on a tablet. Three columns fit comfortably from 700px up. */
@media (min-width: 700px) and (max-width: 1199px) {
  .products .grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .item img {
    height: 260px;
  }
}

@media (max-width: 600px) {
  .products .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  .item img {
    height: 175px;
  }

  .premium-info h4 {
    font-size: 15px;
  }

  .premium-info span {
    font-size: 11.5px;
  }
}

@media (max-width: 380px) {
  .item img {
    height: 155px;
  }
}

/* ---------- slider controls: usable tap targets --------------------- */

/* 12px dots and thin arrows are far below the ~40px a thumb needs.
   The visible size stays the same; the touchable area grows around it. */

.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.dot {
  box-sizing: content-box;
  padding: 14px 7px;
  margin: 0;
  background-clip: content-box;
  cursor: pointer;
}

.hero-slider .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(18, 24, 38, .32);
  color: #fff;
  transition: background .25s ease;
}

.hero-slider .arrow:hover {
  background: rgba(18, 24, 38, .55);
}

@media (max-width: 480px) {
  .hero-slider .arrow {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }

  .dot {
    padding: 14px 6px;
  }
}

/* ---------- filter buttons ------------------------------------------ */

.filters button {
  text-transform: capitalize;
  min-height: 40px;
}

@media (max-width: 480px) {
  .filters {
    gap: 8px;
  }

  .filters button {
    font-size: 13.5px;
    padding: 9px 16px;
  }
}

/* ---------- top bar: stop the contact strip crowding on phones ------- */



/* ---------- header logo ---------------------------------------------- */

@media (max-width: 480px) {
  header .logo img {
    width: 140px;
    height: auto;
  }
}

/* ---------- about page: minimum readable label size ------------------ */

body.page-about .uc-card__tag {
  font-size: 11.5px;
}

/* ---------- footer on phones ----------------------------------------- */

@media (max-width: 640px) {
  .footer-container {
    gap: 26px;
  }

  .footer-col h3 {
    font-size: 20px;
  }

  .footer-col h4 {
    font-size: 15px;
  }
}

/* ---------- never let a stray element cause sideways scrolling ------- */

/* overflow-x:hidden turns the body into a scroll container, and a sticky
   header inside a scroll container sticks to that container rather than to
   the viewport — which is why the header stopped following the page.
   overflow-x:clip trims the same stray horizontal pixels without creating
   a scroll container, so sticky keeps working. */
html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {

  html,
  body {
    overflow-x: hidden;
  }
}

img,
video {
  max-width: 100%;
}

/* =========================================================================
   ============  PRODUCT CONTENT PAGES (.page-doc)  =======================
   Shares the about page's type scale and components. Add "page-doc" to the
   body of any product page to pick all of this up.
   ========================================================================= */

body.page-doc h1,
body.page-doc h2,
body.page-doc h3,
body.page-doc .rail__num,
body.page-doc .cap-card__value {
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.015em;
}

body.page-doc section:not(.hero-slider) {
  padding: var(--sec-y) var(--sec-x);
}

body.page-doc .hero-slider {
  padding: 0;
}

body.page-doc h1 {
  font-size: clamp(28px, 3.9vw, 46px);
  line-height: 1.12;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 6px;
}

body.page-doc h2 {
  font-size: clamp(23px, 2.9vw, 36px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 16px;
}

body.page-doc h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--brand-accent);
  transition: width .85s cubic-bezier(.22, .61, .36, 1) .3s;
}

body.page-doc .reveal.active h2::after {
  width: 62px;
}

body.page-doc .numbers-band__title::after,
body.page-doc .hp-branding h2::after,
body.page-doc .ab-why h2::after,
body.page-doc .pg-faq h2::after,
body.page-doc .ab-approach h2::after,
body.page-doc .ab-close h2::after,
body.page-doc .products h2::after {
  left: 50%;
  transform: translateX(-50%);
}

body.page-doc p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-muted);
  margin-bottom: 16px;
}

body.page-doc .pg-sub {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 600;
  color: var(--brand-accent);
  margin-bottom: 20px;
}

body.page-doc .pg-center {
  max-width: 700px;
  margin: 0 auto;
}

body.page-doc .pg-note {
  font-size: 14.5px;
  margin-top: 18px;
}

body.page-doc .ab-story,
body.page-doc .ab-split,
body.page-doc .ab-capab,
body.page-doc .ab-usecase,
body.page-doc .ab-why,
body.page-doc .pg-uses,
body.page-doc .pg-types,
body.page-doc .pg-bulk,
body.page-doc .pg-faq {
  max-width: var(--wrap);
  margin: 0 auto;
}

body.page-doc .ab-why,
body.page-doc .pg-faq {
  text-align: center;
}

body.page-doc .ab-why .why-grid {
  text-align: left;
}

body.page-doc .ab-approach h2,
body.page-doc .ab-close h2 {
  color: #fff;
}

body.page-doc .ab-approach p,
body.page-doc .ab-close p {
  color: rgba(255, 255, 255, .74);
}

body.page-doc .ab-approach .rail__step h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

body.page-doc .products,
body.page-doc .infrastructure-section {
  padding: var(--sec-y) var(--sec-x);
}

body.page-doc .products .grid {
  max-width: var(--wrap);
  margin: 0 auto;
}

body.page-doc .products h2 {
  max-width: var(--wrap);
  margin: 0 auto 34px;
  text-align: center;
}

/* ---------- tick lists ------------------------------------------------ */

.tick-list--wide {
  grid-template-columns: repeat(3, 1fr);
  font-size: 16px;
}

.tick-list--one {
  grid-template-columns: 1fr;
}

/* ---------- product type cards ---------------------------------------- */

.type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 38px;
}

.type-card {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-top: 3px solid var(--brand-accent);
  border-radius: 10px;
  padding: 26px 22px;
  box-shadow: var(--card-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}

.type-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--card-shadow-hi);
}

body.page-doc .type-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 10px;
  padding-bottom: 0;
}

body.page-doc .type-card p {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}

/* ---------- 8-step rail ------------------------------------------------ */

.rail--8 {
  grid-template-columns: repeat(8, 1fr);
}

.rail--8 .rail__step {
  padding: 0 8px;
}

/* ---------- FAQ accordion ---------------------------------------------- */

.faq-list {
  max-width: 820px;
  margin: 36px auto 0;
  text-align: left;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.faq-item[open] {
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow);
}

.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-main);
  transition: color .25s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--brand-accent);
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--brand-accent);
  border-bottom: 2px solid var(--brand-accent);
  transform: rotate(45deg);
  transition: transform .3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

body.page-doc .faq-item p {
  padding: 0 22px 20px;
  margin: 0;
  font-size: 15.5px;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1100px) {
  .type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rail--8 {
    grid-template-columns: repeat(4, 1fr);
    gap: 34px 0;
  }

  .rail--8::before {
    display: none;
  }

  .uc-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .tick-list--wide {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .rail--8 {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .rail--8 .rail__step {
    padding: 0 0 0 74px;
  }

  .tick-list--wide {
    grid-template-columns: 1fr;
  }

  .faq-item summary {
    font-size: 15px;
    padding: 16px 46px 16px 18px;
  }

  body.page-doc .faq-item p {
    padding: 0 18px 18px;
  }
}

/* =========================================================================
   ============  HEADER FIT (2026)  =======================================
   The seven menu links needed about 1030px of room, but the layout only
   switched to the hamburger at 855px. Between roughly 856px and 920px the
   links had nowhere to go and wrapped over the logo. The nav now tightens
   in two steps before it collapses, so it always has the room it needs.
   ========================================================================= */

#mainNav {
  flex-wrap: nowrap;
}

header nav a {
  white-space: nowrap;
}

/* step 1 — tighten spacing once the Contact button is the only slack */
@media (max-width: 1100px) and (min-width: 991px) {
  header {
    padding: 16px 22px;
  }

  header .logo img {
    width: 160px;
    height: auto;
  }

  header nav a {
    margin: 0 8px;
    font-size: 15px;
  }
}

/* step 2 — last squeeze before the menu collapses */
@media (max-width: 990px) and (min-width: 821px) {
  header {
    padding: 14px 16px;
  }

  header .logo img {
    width: 132px;
    height: auto;
  }

  header nav a {
    margin: 0 5px;
    font-size: 13.8px;
    letter-spacing: -.01em;
  }
}

/* the collapsed menu itself: full-width rows, comfortable to tap */
@media (max-width: 820px) {
  header nav a {
    margin: 0;
    padding: 13px 4px;
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--soft-border);
  }

  header nav a:last-child {
    border-bottom: none;
  }

  header nav a.active {
    padding-bottom: 13px;
  }

  header nav a:not(.btn)::after {
    display: none;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

/* footer contact links */
.footer-col p a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

.footer-col p a:hover {
  color: var(--brand-accent);
}

/* =========================================================================
   ============  SHARED HEADER & FOOTER (identical on every page)  ========
   The page-level type rules (body.page-about p, body.page-doc p) were
   leaking into the footer, so the same footer rendered larger and more
   spaced on those pages than on the others. Everything here uses two
   classes so it outranks those page rules, and the header and footer now
   render identically across all seven pages.
   ========================================================================= */

/* ---------- top bar --------------------------------------------------- */

body .top-bar {
  font-size: 13.5px;
  line-height: 1.7;
  padding: 0px 30px;
}

body .top-bar a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  line-height: inherit;
  transition: color .25s ease;
}

body .top-bar a:hover {
  color: var(--brand-accent);
}

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

body header#header {
  padding: 10px 30px;
}

body header#header .logo img {
  width: 150px;
  height: auto;
  display: block;
}

body header#header nav a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- footer ---------------------------------------------------- */

body .site-footer {
  padding-top: 60px;
}

body .site-footer .footer-container {
  gap: 40px;
}

body .site-footer .footer-col h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 12px;
  padding-bottom: 0;
  color: var(--brand-accent);
}

body .site-footer .footer-col h3::after {
  display: none;
}

body .site-footer .footer-col h4 {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 14px;
  color: var(--brand-accent);
}

body .site-footer .footer-col p {
  font-size: 14.5px;
  line-height: 1.75;
  margin: 0 0 10px;
  color: #cdd4e0;
}

body .site-footer .footer-col p:last-child {
  margin-bottom: 0;
}

body .site-footer .footer-col .footer-mini {
  font-size: 13px;
  line-height: 1.7;
  color: var(--brand-accent);
  margin-top: 12px;
}

body .site-footer .footer-col .footer-addr {
  margin-top: 14px;
  line-height: 1.7;
}

body .site-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body .site-footer .footer-col ul li {
  margin-bottom: 9px;
  line-height: 1.5;
}

body .site-footer .footer-col ul li:last-child {
  margin-bottom: 0;
}

body .site-footer .footer-col a {
  font-size: 14.5px;
  line-height: 1.75;
  color: #cdd4e0;
  text-decoration: none;
  transition: color .25s ease;
}

body .site-footer .footer-col a:hover {
  color: var(--brand-accent);
}

body .site-footer .footer-bottom {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 18px 20px;
  margin-top: 46px;
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 640px) {

  body header#header {
    padding: 12px 16px;
  }

  body .site-footer {
    padding-top: 44px;
  }

  body .site-footer .footer-container {
    gap: 28px;
  }

  body .site-footer .footer-col h3 {
    font-size: 20px;
  }

  body .site-footer .footer-col h4 {
    font-size: 15px;
  }

  body .site-footer .footer-bottom {
    margin-top: 32px;
  }
}

/* =========================================================================
   ============  TOP BAR FIT  =============================================
   The bar only needs about 375px for both columns, but it was stacking at
   640px — nearly 270px of room wasted. It now tightens in two steps and
   only stacks once the two columns genuinely cannot sit side by side.
   ========================================================================= */

@media (max-width: 760px) and (min-width: 561px) {
  body .top-bar {
    padding: 8px 18px;
    font-size: 13px;
  }
}

@media (max-width: 560px) and (min-width: 421px) {
  body .top-bar {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.65;
  }
}

@media (max-width: 420px) {
  body .top-bar {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.6;
  }
}

/* =========================================================================
   ============  FOOTER CONTACT LINKS  ====================================
   They were already real tel: / mailto: links, but they looked exactly
   like plain text, so nobody knew they could be tapped. Now they show a
   pointer, underline on hover, and turn gold — without shouting.
   ========================================================================= */

body .site-footer .footer-col p a,
body .site-footer .footer-col ul a {
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

body .site-footer .footer-col p a:hover,
body .site-footer .footer-col ul a:hover {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

body .site-footer .footer-col p a:focus-visible,
body .site-footer .footer-col ul a:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* the quote link reads as an action, not another page */
body .site-footer .footer-col .footer-quote a {
  color: var(--brand-accent);
  font-weight: 600;
}

body .site-footer .footer-col .footer-quote a:hover {
  color: #e0c47e;
  border-bottom-color: #e0c47e;
}

/* on a phone give each contact line a proper tap height */
@media (max-width: 640px) {

  body .site-footer .footer-col p a,
  body .site-footer .footer-col ul a {
    padding: 4px 0;
  }
}

/* auto-generated contact links (created by js/widgets.js) */
.top-bar a.sw-auto-link,
.site-footer a.sw-auto-link {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.top-bar a.sw-auto-link:hover,
.site-footer a.sw-auto-link:hover {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

.top-bar a.sw-auto-link:focus-visible,
.site-footer a.sw-auto-link:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================================
   ============  HOME PAGE  ===============================================
   Built on the shared .page-doc scale. Only the pieces unique to the home
   page live here.
   ========================================================================= */

body.page-home .hp-branding,
body.page-home .hp-cats,
body.page-home .hp-value,
body.page-home .hp-video {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- branding statement --------------------------------------- */

.hp-branding {
  text-align: center;
  background: #fff;
}

.hp-branding__inner {
  max-width: 820px;
  margin: 0 auto;
}

body.page-home .hp-branding h2 {
  text-align: center;
}

body.page-home .hp-branding h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.hp-line {
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: clamp(19px, 2.4vw, 27px) !important;
  font-weight: 700;
  line-height: 1.4 !important;
  color: var(--brand-main) !important;
  margin: 32px auto 0 !important;
  padding: 24px 0 0;
  border-top: 1px solid var(--gold-line);
  max-width: 620px;
}

.hp-line--dark {
  text-align: center;
}

/* ---------- product category cards ----------------------------------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.cat-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  padding: 30px 26px 26px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1), box-shadow .38s ease, border-color .38s ease;
}

.cat-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.cat-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow-hi);
}

.cat-card:hover::before {
  transform: scaleX(1);
}

.cat-card:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 3px;
}

.cat-card__n {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--brand-accent);
  margin-bottom: 14px;
}

body.page-home .cat-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 12px;
  padding-bottom: 0;
}

body.page-home .cat-card p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
}

.cat-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand-main);
  transition: gap .3s ease, color .3s ease;
}

.cat-card__go::after {
  content: "→";
  color: var(--brand-accent);
  transition: transform .3s ease;
}

.cat-card:hover .cat-card__go {
  color: var(--brand-accent);
  gap: 12px;
}

/* ---------- numbers band extras --------------------------------------- */

.numbers-band__intro,
.numbers-band__foot {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
  color: rgba(255, 255, 255, .76) !important;
  position: relative;
}

.numbers-band__foot {
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 15px !important;
}

.numbers-grid--6 {
  grid-template-columns: repeat(6, 1fr);
}

/* ---------- proof row ------------------------------------------------- */

.proof-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 26px 0 6px;
}

.proof {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-radius: 9px;
  padding: 18px 14px;
  text-align: center;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.proof:hover {
  transform: translateY(-5px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow);
}

.proof strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-main);
  font-variant-numeric: tabular-nums;
  margin-bottom: 7px;
}

.proof strong span {
  font-size: .6em;
  color: var(--brand-accent);
}

.proof>span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---------- industries foot ------------------------------------------- */

.uc-card--soft {
  background: var(--gold-tint);
  border-style: dashed;
}

.uc-foot {
  max-width: 820px;
  margin-top: 34px !important;
}

/* ---------- value list ------------------------------------------------ */

.hp-value {
  background: #fff;
}

.hp-value__head {
  max-width: 780px;
  margin-bottom: 34px;
}

.value-list {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--soft-border);
}

.value-list li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--soft-border);
  font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.6;
  color: var(--brand-main);
  transition: padding-left .35s ease, color .35s ease;
}

.value-list li:hover {
  padding-left: 14px;
  color: var(--brand-accent);
}

.value-list__n {
  flex: none;
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--brand-accent);
  min-width: 30px;
}

/* ---------- factory video --------------------------------------------- */

.hp-video {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.hp-video__media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #0f141f;
  box-shadow: var(--card-shadow-hi);
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 1100px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .numbers-grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .hp-video {
    grid-template-columns: 1fr;
  }

  .proof-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .numbers-grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-list li {
    gap: 14px;
    padding: 16px 2px;
  }

  .hp-line {
    padding-top: 20px;
    margin-top: 26px !important;
  }
}

/* =========================================================================
   ============  HOME PAGE: ITS OWN OPENING  ==============================
   The home page and the about page were both opening with the same
   two-column story block, so the two pages read as the same page. The home
   page now opens centred and full width, with a material strip instead of
   a portrait image — the portrait-plus-badge treatment stays unique to the
   about page.
   ========================================================================= */

.hp-intro {
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: center;
}

.hp-intro__head {
  max-width: 900px;
  margin: 0 auto;
}

body.page-home .hp-intro h1 {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.08;
  margin-bottom: 14px;
}

.hp-intro__sub {
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: clamp(16px, 1.8vw, 21px) !important;
  font-weight: 600;
  color: var(--brand-accent) !important;
  margin-bottom: 30px !important;
}

.hp-intro__body {
  max-width: 940px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--soft-border);
}

.hp-intro__lead {
  font-size: clamp(17px, 1.7vw, 20.5px) !important;
  line-height: 1.75 !important;
  color: var(--brand-main) !important;
  max-width: 780px;
  margin: 0 auto 26px !important;
}

.hp-intro__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  text-align: left;
}

body.page-home .hp-intro__cols p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
}

body.page-home .hp-intro .ab-cta-row {
  margin-top: 34px;
}

/* ---------- material strip ------------------------------------------- */

.mat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 52px;
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.mat-strip a {
  position: relative;
  display: block;
  padding: 22px 14px;
  text-decoration: none;
  border-right: 1px solid var(--soft-border);
  transition: background .3s ease, transform .3s ease;
}

.mat-strip a:last-child {
  border-right: none;
}

.mat-strip a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.mat-strip a:hover {
  background: var(--light-bg);
}

.mat-strip a:hover::after {
  transform: scaleX(1);
}

.mat-strip a:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: -3px;
}

.mat-strip__k {
  display: block;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 5px;
  transition: color .3s ease;
}

.mat-strip a:hover .mat-strip__k {
  color: var(--brand-accent);
}

.mat-strip__v {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* ---------- why selmore, full width ---------------------------------- */

.hp-why {
  background: #fff;
}

.hp-why__inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

.hp-why__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 50px);
  margin-top: 8px;
}

body.page-home .hp-why__cols p {
  margin: 0;
}

body.page-home .hp-why .hp-line {
  text-align: center;
  margin-top: 40px !important;
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 900px) {
  .mat-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .mat-strip a:nth-child(3) {
    border-right: none;
  }

  .mat-strip a:nth-child(n+4) {
    border-top: 1px solid var(--soft-border);
  }

  .hp-intro__cols,
  .hp-why__cols {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .mat-strip {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 38px;
  }

  .mat-strip a:nth-child(2n) {
    border-right: none;
  }

  .mat-strip a:nth-child(n+3) {
    border-top: 1px solid var(--soft-border);
  }

  .mat-strip a {
    padding: 16px 12px;
  }

  .hp-intro__body {
    padding-top: 22px;
  }
}

/* =========================================================================
   ============  HOME: BRAND SHOWCASE STRIP  ==============================
   Sits between the branding statement and the detail copy — four real
   bags, so the claim above it is backed by something to look at before
   the reader is asked to read more.
   ========================================================================= */

.hp-showcase {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-top: 0 !important;
}

.hp-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
}

.hp-showcase__grid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  background: var(--light-bg);
  box-shadow: var(--card-shadow);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.22, .61, .36, 1),
    transform .5s cubic-bezier(.22, .61, .36, 1),
    box-shadow .4s ease;
}

.reveal.active .hp-showcase__grid img {
  clip-path: inset(0 0 0 0);
}

.reveal.active .hp-showcase__grid img:nth-child(1) {
  transition-delay: .05s;
}

.reveal.active .hp-showcase__grid img:nth-child(2) {
  transition-delay: .18s;
}

.reveal.active .hp-showcase__grid img:nth-child(3) {
  transition-delay: .31s;
}

.reveal.active .hp-showcase__grid img:nth-child(4) {
  transition-delay: .44s;
}

.hp-showcase__grid img:hover {
  transform: translateY(-7px) scale(1.015);
  box-shadow: var(--card-shadow-hi);
}

.hp-showcase__grid figcaption {
  grid-column: 1 / -1;
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* the intro now follows the images, so it keeps its own breathing room */
body.page-home .hp-intro {
  padding-top: clamp(46px, 6vw, 84px);
}

@media (max-width: 900px) {
  .hp-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .hp-showcase__grid img {
    height: 230px;
  }
}

@media (max-width: 480px) {
  .hp-showcase__grid img {
    height: 165px;
  }

  .hp-showcase__grid figcaption {
    font-size: 12.5px;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-showcase__grid img {
    clip-path: none;
    transition: none;
  }
}

/* =========================================================================
   ============  BOPP PAGE  ===============================================
   Deliberately built from different parts to the canvas page: a drawn
   two-layer diagram instead of a photo-and-badge opener, a numbered spec
   list instead of tick lists, and a real data table for applications.
   ========================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.page-bopp .bp-open,
body.page-bopp .bp-build,
body.page-bopp .bp-print,
body.page-bopp .bp-apps,
body.page-bopp .bp-carry,
body.page-bopp .bp-why,
body.page-bopp .bp-quote {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- opening + layer diagram ---------------------------------- */

.bp-open {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}

body.page-bopp .bp-open .lead {
  font-size: clamp(16.5px, 1.35vw, 19px) !important;
  color: var(--brand-main) !important;
  border-left: 3px solid var(--brand-accent);
  padding-left: 20px;
  margin-bottom: 22px !important;
}

.bp-open__diagram {
  perspective: 1000px;
}

.layer {
  position: relative;
  display: block;
  padding: 26px 26px 24px;
  border-radius: 12px;
  border: 1px solid var(--soft-border);
  background: #fff;
  box-shadow: var(--card-shadow);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.layer+.layer {
  margin-top: 14px;
}

.layer strong {
  display: block;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: 18.5px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 8px;
}

.layer__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 12px;
}

.layer__note {
  display: block;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* the film layer sits visibly on top of the woven base */
.layer--film {
  background: linear-gradient(140deg, #fff, #fbf7ec);
  border-color: var(--gold-line);
  z-index: 2;
}

.layer--film::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -21px;
  width: 2px;
  height: 14px;
  background: var(--gold-line);
}

.layer--weave {
  background:
    repeating-linear-gradient(45deg, rgba(18, 24, 38, .035) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(-45deg, rgba(18, 24, 38, .035) 0 6px, transparent 6px 12px),
    #fff;
}

.reveal .layer {
  opacity: 0;
  transform: translateY(26px) rotateX(8deg);
}

.reveal.active .layer {
  opacity: 1;
  transform: none;
}

.reveal.active .layer--film {
  transition-delay: .1s;
}

.reveal.active .layer--weave {
  transition-delay: .3s;
}

.bp-open__diagram:hover .layer--film {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hi);
}

.bp-open__cap {
  margin-top: 18px !important;
  font-size: 13.5px !important;
  text-align: center;
  color: var(--ink-muted) !important;
}

/* ---------- numbered spec list ---------------------------------------- */

.bp-build__head,
.bp-apps__head,
.bp-carry__head {
  max-width: 780px;
  margin-bottom: 38px;
}

.spec-list {
  list-style: none;
  counter-reset: spec;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--soft-border);
}

.spec-list li {
  display: flex;
  gap: clamp(16px, 3vw, 34px);
  padding: 24px 6px;
  border-bottom: 1px solid var(--soft-border);
  transition: background .35s ease, padding-left .35s ease;
}

.spec-list li:hover {
  background: var(--light-bg);
  padding-left: 16px;
}

.spec-list__n {
  flex: none;
  font-family: "Archivo", sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-line);
  min-width: 46px;
  transition: color .35s ease;
}

.spec-list li:hover .spec-list__n {
  color: var(--brand-accent);
}

body.page-bopp .spec-list h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 6px;
  padding-bottom: 0;
}

body.page-bopp .spec-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

.bp-note {
  max-width: 820px;
  margin-top: 30px !important;
  padding-left: 18px;
  border-left: 2px solid var(--gold-line);
  font-size: 15px !important;
}

/* ---------- printing block -------------------------------------------- */

.bp-print {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  background: #fff;
}

.bp-print__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.22, .61, .36, 1) .1s, transform .5s ease;
}

.reveal.active .bp-print__media img {
  clip-path: inset(0 0 0 0);
}

.bp-print__media:hover img {
  transform: scale(1.015);
}

.print-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin: 22px 0;
  padding: 22px 0;
  border-top: 1px solid var(--soft-border);
  border-bottom: 1px solid var(--soft-border);
}

.print-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-main);
}

.print-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-accent);
  transform: rotate(45deg);
}

/* ---------- applications table ---------------------------------------- */

.app-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.app-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.app-table th,
.app-table td {
  text-align: left;
  padding: 16px 22px;
  font-size: 15.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--soft-border);
}

.app-table thead th {
  background: var(--brand-main);
  color: #fff;
  font-family: "Archivo", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: none;
}

.app-table tbody th {
  font-weight: 700;
  color: var(--brand-main);
  width: 38%;
}

.app-table tbody td {
  color: var(--ink-muted);
}

.app-table tbody tr {
  transition: background .3s ease;
}

.app-table tbody tr:hover {
  background: var(--gold-tint);
}

.app-table tbody tr:last-child th,
.app-table tbody tr:last-child td {
  border-bottom: none;
}

.bp-callout {
  margin-top: 26px;
  padding: 24px 26px;
  border-radius: 12px;
  background: var(--brand-main);
  border-left: 4px solid var(--brand-accent);
}

.bp-callout__tag {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 10px;
}

body.page-bopp .bp-callout p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 15.5px;
}

/* ---------- carry cards ------------------------------------------------ */

.carry-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.carry-card {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-radius: 10px;
  padding: 24px 20px;
  box-shadow: var(--card-shadow);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.carry-card:hover {
  transform: translateY(-7px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow-hi);
}

body.page-bopp .carry-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 9px;
  padding-bottom: 0;
}

body.page-bopp .carry-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- why: four columns ------------------------------------------ */

.bp-why {
  text-align: center;
  background: #fff;
}

body.page-bopp .bp-why h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.why-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  text-align: left;
  border: 1px solid var(--soft-border);
  border-radius: 12px;
  overflow: hidden;
}

.why-four>div {
  padding: 28px 24px;
  border-right: 1px solid var(--soft-border);
  transition: background .35s ease;
}

.why-four>div:last-child {
  border-right: none;
}

.why-four>div:hover {
  background: var(--gold-tint);
}

.why-four strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 17px;
  color: var(--brand-main);
  margin-bottom: 10px;
}

body.page-bopp .why-four p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
}

/* ---------- quote sheet ------------------------------------------------- */

.bp-quote {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.quote-sheet {
  list-style: none;
  counter-reset: q;
  background: var(--brand-main);
  border-radius: 12px;
  padding: 12px 26px;
  box-shadow: var(--card-shadow-hi);
}

.quote-sheet li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 15.5px;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.reveal.active .quote-sheet li {
  opacity: 1;
  transform: none;
}

.reveal.active .quote-sheet li:nth-child(1) {
  transition-delay: .08s;
}

.reveal.active .quote-sheet li:nth-child(2) {
  transition-delay: .17s;
}

.reveal.active .quote-sheet li:nth-child(3) {
  transition-delay: .26s;
}

.reveal.active .quote-sheet li:nth-child(4) {
  transition-delay: .35s;
}

.reveal.active .quote-sheet li:nth-child(5) {
  transition-delay: .44s;
}

.reveal.active .quote-sheet li:nth-child(6) {
  transition-delay: .53s;
}

.quote-sheet li:last-child {
  border-bottom: none;
}

.quote-sheet li span {
  flex: none;
  font-family: "Archivo", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--brand-accent);
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1100px) {
  .carry-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-four {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-four>div:nth-child(2n) {
    border-right: none;
  }

  .why-four>div:nth-child(n+3) {
    border-top: 1px solid var(--soft-border);
  }
}

@media (max-width: 900px) {

  .bp-open,
  .bp-print,
  .bp-quote {
    grid-template-columns: 1fr;
  }

  .bp-print__media {
    order: 2;
  }

  .bp-print__media img {
    max-height: 320px;
  }
}

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

  .why-four {
    grid-template-columns: 1fr;
  }

  .why-four>div {
    border-right: none;
    border-top: 1px solid var(--soft-border);
  }

  .why-four>div:first-child {
    border-top: none;
  }

  .print-list {
    grid-template-columns: 1fr;
  }

  .spec-list li {
    gap: 14px;
    padding: 18px 4px;
  }

  .spec-list__n {
    min-width: 34px;
  }

  .app-table th,
  .app-table td {
    padding: 13px 16px;
    font-size: 14.5px;
  }

  .quote-sheet {
    padding: 8px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .reveal .layer,
  .reveal .quote-sheet li,
  .reveal .bp-print__media img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   ============  NON-WOVEN PAGE  ==========================================
   Its own set again: a journey rail instead of a photo or diagram, wide
   numbered range rows, a definition list for applications, and a plainly
   styled honesty note that deliberately does not look like a sales point.
   ========================================================================= */

body.page-nonwoven .nw-open,
body.page-nonwoven .nw-intro,
body.page-nonwoven .nw-range,
body.page-nonwoven .nw-benefits,
body.page-nonwoven .nw-trust,
body.page-nonwoven .nw-apps,
body.page-nonwoven .nw-why {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- opening + journey rail ------------------------------------ */

.nw-open {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}

body.page-nonwoven .nw-open .lead {
  font-size: clamp(16.5px, 1.35vw, 19px) !important;
  color: var(--brand-main) !important;
  border-left: 3px solid var(--brand-accent);
  padding-left: 20px;
  margin-bottom: 22px !important;
}

.nw-journey {
  background: var(--brand-main);
  border-radius: 14px;
  padding: 32px 30px 26px;
  box-shadow: var(--card-shadow-hi);
}

.nw-journey__title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 24px;
}

.journey {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0 0 0 26px;
}

.journey::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-accent), rgba(200, 162, 77, .15));
}

.journey li {
  position: relative;
  padding-bottom: 24px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.reveal.active .journey li {
  opacity: 1;
  transform: none;
}

.reveal.active .journey li:nth-child(1) {
  transition-delay: .12s;
}

.reveal.active .journey li:nth-child(2) {
  transition-delay: .28s;
}

.reveal.active .journey li:nth-child(3) {
  transition-delay: .44s;
}

.reveal.active .journey li:nth-child(4) {
  transition-delay: .60s;
}

.journey li:last-child {
  padding-bottom: 8px;
}

.journey__dot {
  position: absolute;
  left: -26px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-main);
  border: 2px solid var(--brand-accent);
}

.journey li:last-child .journey__dot {
  background: var(--brand-accent);
}

.journey strong {
  display: block;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  color: #fff;
  margin-bottom: 4px;
}

.journey em {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
}

.nw-journey__foot {
  margin: 18px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px !important;
  color: var(--brand-accent) !important;
}

/* ---------- intro statement ------------------------------------------- */

.nw-intro {
  text-align: center;
  background: #fff;
}

.nw-intro__inner {
  max-width: 840px;
  margin: 0 auto;
}

body.page-nonwoven .nw-intro h2::after,
body.page-nonwoven .pg-faq h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.stat-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 6px;
}

.stat-pills span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 100px;
  border: 1px solid var(--gold-line);
  background: var(--gold-tint);
  font-size: 14px;
  color: var(--ink-muted);
}

.stat-pills b {
  font-family: "Archivo", sans-serif;
  font-size: 17px;
  color: var(--brand-main);
}

/* ---------- range rows -------------------------------------------------- */

.nw-range__head,
.nw-benefits__head,
.nw-apps__head,
.nw-why__head {
  max-width: 780px;
  margin-bottom: 38px;
}

.range-rows {
  border-top: 1px solid var(--soft-border);
}

.range-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3.5vw, 42px);
  padding: 26px 8px;
  border-bottom: 1px solid var(--soft-border);
  transition: background .35s ease, padding-left .35s ease;
}

.range-row:hover {
  background: var(--light-bg);
  padding-left: 18px;
}

.range-row__n {
  flex: none;
  font-family: "Archivo", sans-serif;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-line);
  min-width: 54px;
  transition: color .35s ease;
}

.range-row:hover .range-row__n {
  color: var(--brand-accent);
}

body.page-nonwoven .range-row h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 8px;
  padding-bottom: 0;
}

body.page-nonwoven .range-row p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 720px;
}

body.page-nonwoven .nw-range .ab-cta-row {
  margin-top: 34px;
}

/* ---------- benefits ---------------------------------------------------- */

.ben-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ben {
  padding: 26px 24px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--soft-border);
  border-bottom: 3px solid var(--gold-line);
  box-shadow: var(--card-shadow);
  transition: transform .35s ease, box-shadow .35s ease, border-bottom-color .35s ease;
}

.ben:hover {
  transform: translateY(-7px);
  border-bottom-color: var(--brand-accent);
  box-shadow: var(--card-shadow-hi);
}

body.page-nonwoven .ben h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 9px;
  padding-bottom: 0;
}

body.page-nonwoven .ben p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
}

.nw-straight {
  margin-top: 30px;
  padding: 26px 28px;
  border: 1px dashed var(--gold-line);
  border-radius: 12px;
  background: var(--gold-tint);
  max-width: 900px;
}

.nw-straight__tag {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 10px;
}

body.page-nonwoven .nw-straight p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--brand-main);
}

/* ---------- trust row ---------------------------------------------------- */

.nw-trust {
  background: #fff;
}

.nw-trust__inner {
  max-width: 900px;
  margin: 0 auto;
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 30px 0;
  border-top: 1px solid var(--soft-border);
  border-bottom: 1px solid var(--soft-border);
}

.trust-row>div {
  padding: 22px 12px;
  text-align: center;
  border-right: 1px solid var(--soft-border);
}

.trust-row>div:last-child {
  border-right: none;
}

.trust-row strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.trust-row span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---------- applications: definition list -------------------------------- */

.app-defs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 56px);
  margin: 0;
}

.app-defs>div {
  display: grid;
  grid-template-columns: minmax(170px, 34%) 1fr;
  gap: 18px;
  padding: 20px 6px;
  border-bottom: 1px solid var(--soft-border);
  transition: border-color .35s ease;
}

.app-defs>div:hover {
  border-bottom-color: var(--brand-accent);
}

.app-defs dt {
  font-family: "Archivo", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--brand-main);
  line-height: 1.45;
}

.app-defs dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ---------- why: checks --------------------------------------------------- */

.why-checks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.why-checks li {
  position: relative;
  padding: 22px 22px 22px 26px;
  border-left: 3px solid var(--brand-accent);
  background: var(--light-bg);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  transition: transform .35s ease, background .35s ease;
}

.why-checks li:hover {
  transform: translateX(6px);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.why-checks strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  color: var(--brand-main);
  margin-bottom: 7px;
}

body.page-nonwoven .nw-why .hp-line {
  text-align: center;
  margin-top: 46px !important;
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1100px) {

  .ben-grid,
  .why-checks {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .trust-row>div:nth-child(3n) {
    border-right: none;
  }

  .trust-row>div:nth-child(n+4) {
    border-top: 1px solid var(--soft-border);
  }
}

@media (max-width: 900px) {
  .nw-open {
    grid-template-columns: 1fr;
  }

  .app-defs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {

  .ben-grid,
  .why-checks {
    grid-template-columns: 1fr;
  }

  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-row>div:nth-child(2n) {
    border-right: none;
  }

  .trust-row>div:nth-child(n+3) {
    border-top: 1px solid var(--soft-border);
  }

  .app-defs>div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .range-row {
    gap: 14px;
    padding: 20px 4px;
  }

  .range-row__n {
    min-width: 38px;
  }

  .nw-journey {
    padding: 26px 22px 22px;
  }

  .stat-pills span {
    padding: 9px 16px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .journey li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   ============  TRIM: FOOTER, PRE-FOOTER CTA, TOP BAR, MOBILE MENU  ======
   Appended last so it wins. Applies identically on every page.
   ========================================================================= */

/* ---------- 1. footer: same everywhere, noticeably shorter ------------ */

body .site-footer {
  padding-top: 40px;
}

body .site-footer .footer-container {
  gap: 30px;
  padding-bottom: 6px;
}

body .site-footer .footer-col h3 {
  font-size: 19px;
  margin-bottom: 8px;
}

body .site-footer .footer-col h4 {
  font-size: 14.5px;
  margin-bottom: 10px;
}

body .site-footer .footer-col p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 6px;
}

body .site-footer .footer-col .footer-mini {
  font-size: 12px;
  margin-top: 8px;
}

body .site-footer .footer-col .footer-addr {
  margin-top: 10px;
  line-height: 1.55;
}

body .site-footer .footer-col ul li {
  margin-bottom: 5px;
  line-height: 1.4;
}

body .site-footer .footer-col a {
  font-size: 13.5px;
  line-height: 1.6;
}

body .site-footer .footer-col p a,
body .site-footer .footer-col ul a {
  padding: 1px 0;
}

body .site-footer .footer-bottom {
  font-size: 12.5px;
  padding: 13px 20px;
  margin-top: 26px;
}

/* ---------- 2. the CTA band sitting just above the footer ------------- */

body .ab-close {
  padding-top: clamp(32px, 3.4vw, 50px) !important;
  padding-bottom: clamp(32px, 3.4vw, 50px) !important;
}

body .ab-close__inner {
  max-width: 760px;
}

body .ab-close h2 {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.22;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

body .ab-close p {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 10px;
}

body .ab-close .ab-close__motto {
  font-size: clamp(15px, 1.6vw, 17.5px) !important;
  line-height: 1.5 !important;
  margin: 14px 0 !important;
  padding: 12px 0;
}

body .ab-close .ab-cta-row {
  margin-top: 18px;
}

body .ab-close .eyebrow {
  margin-bottom: 10px;
}

/* ---------- 3. top bar: two columns, phone to phone --------------------
   It only needs about 293px of text, so it never has to stack — even a
   320px phone has room. It was breaking into two centred rows purely
   because of an early breakpoint. */

@media (max-width: 420px) {
  body .top-bar {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    gap: 8px;
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.55;
  }

  body .top-bar span:last-child {
    text-align: right;
  }
}

@media (max-width: 340px) {
  body .top-bar {
    font-size: 10.5px;
    padding: 6px 8px;
  }
}

/* ---------- 4. mobile menu: a proper translucent panel ----------------- */

@media (max-width: 820px) {

  header#header nav {
    top: calc(100% + 8px);
    left: auto;
    right: 12px;
    width: min(280px, calc(100vw - 24px));
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 22px 50px rgba(18, 24, 38, .18);
    overflow: hidden;
  }

  /* main.js toggles .active, so animate from that */
  header#header nav.active {
    animation: nav-in .3s cubic-bezier(.22, .61, .36, 1) both;
  }

  @keyframes nav-in {
    from {
      opacity: 0;
      transform: translateY(-10px) scale(.97);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  header#header nav a {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(18, 24, 38, .07);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--brand-main);
    transition: background .25s ease, color .25s ease, padding-left .25s ease;
  }

  header#header nav a:last-child {
    border-bottom: none;
  }

  header#header nav a:hover,
  header#header nav a:focus-visible {
    background: rgba(200, 162, 77, .16);
    color: var(--brand-main);
    padding-left: 20px;
  }

  header#header nav a.active {
    background: var(--brand-main);
    color: #fff;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: none;
  }

  header#header nav a.btn {
    display: block;
    margin-top: 6px;
    text-align: center;
    color: #fff !important;
    border-bottom: none;
  }

  /* the hamburger becomes a cross while the menu is open */
  .menu-toggle {
    border-radius: 9px;
    color: var(--brand-main);
    transition: background .25s ease, transform .3s ease;
  }

  .menu-toggle:hover {
    background: rgba(18, 24, 38, .06);
  }

  .menu-toggle.open {
    background: var(--brand-main);
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  header#header nav.active {
    animation: none;
  }
}

/* =========================================================================
   ============  TOTE PAGE  ===============================================
   Its own components again: a spec-tag panel, a side-by-side cotton vs
   canvas comparison with an "or" divider, wrapping tag lists, a connected
   step ladder, and a checklist.
   ========================================================================= */

body.page-tote .tt-open,
body.page-tote .tt-choose,
body.page-tote .tt-who,
body.page-tote .tt-canvas,
body.page-tote .tt-process,
body.page-tote .tt-bulk,
body.page-tote .tt-order {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- opening + spec panel -------------------------------------- */

.tt-open {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
}

body.page-tote .tt-open .lead {
  font-size: clamp(16.5px, 1.35vw, 19px) !important;
  color: var(--brand-main) !important;
  border-left: 3px solid var(--brand-accent);
  padding-left: 20px;
  margin-bottom: 22px !important;
}

.tt-spec {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-top: 3px solid var(--brand-accent);
  border-radius: 12px;
  padding: 28px 26px 24px;
  box-shadow: var(--card-shadow);
}

.tt-spec__title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 18px;
}

.spec-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.spec-tags li {
  padding: 9px 15px;
  border-radius: 7px;
  background: var(--light-bg);
  border: 1px solid var(--soft-border);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand-main);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1),
    background .3s ease, border-color .3s ease;
}

.reveal.active .spec-tags li {
  opacity: 1;
  transform: none;
}

.reveal.active .spec-tags li:nth-child(1) {
  transition-delay: .06s;
}

.reveal.active .spec-tags li:nth-child(2) {
  transition-delay: .13s;
}

.reveal.active .spec-tags li:nth-child(3) {
  transition-delay: .20s;
}

.reveal.active .spec-tags li:nth-child(4) {
  transition-delay: .27s;
}

.reveal.active .spec-tags li:nth-child(5) {
  transition-delay: .34s;
}

.reveal.active .spec-tags li:nth-child(6) {
  transition-delay: .41s;
}

.reveal.active .spec-tags li:nth-child(7) {
  transition-delay: .48s;
}

.spec-tags li:hover {
  background: var(--gold-tint);
  border-color: var(--gold-line);
}

body.page-tote .tt-spec__foot {
  margin: 20px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--soft-border);
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ---------- cotton vs canvas ------------------------------------------- */

.tt-choose {
  text-align: center;
  background: #fff;
}

.tt-choose__head {
  max-width: 780px;
  margin: 0 auto 42px;
}

body.page-tote .tt-choose h2::after,
body.page-tote .pg-faq h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.5vw, 30px);
  align-items: stretch;
  text-align: left;
}

.vs-card {
  position: relative;
  padding: 32px 30px;
  border-radius: 14px;
  border: 1px solid var(--soft-border);
  background: var(--light-bg);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

.vs-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow-hi);
}

.vs-card--canvas {
  background: var(--brand-main);
  border-color: var(--brand-main);
}

.vs-card__tag {
  display: inline-block;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 14px;
}

body.page-tote .vs-card h3 {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 12px;
  padding-bottom: 0;
}

body.page-tote .vs-card p {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 20px;
}

body.page-tote .vs-card--canvas h3 {
  color: #fff;
}

body.page-tote .vs-card--canvas p {
  color: rgba(255, 255, 255, .78);
}

.vs-specs {
  margin: 0;
  border-top: 1px solid var(--soft-border);
}

.vs-card--canvas .vs-specs {
  border-top-color: rgba(255, 255, 255, .16);
}

.vs-specs>div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--soft-border);
}

.vs-card--canvas .vs-specs>div {
  border-bottom-color: rgba(255, 255, 255, .12);
}

.vs-specs>div:last-child {
  border-bottom: none;
}

.vs-specs dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 2px;
}

.vs-card--canvas .vs-specs dt {
  color: var(--brand-accent);
}

.vs-specs dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--brand-main);
}

.vs-card--canvas .vs-specs dd {
  color: rgba(255, 255, 255, .86);
}

.vs__or {
  align-self: center;
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 4px;
  position: relative;
}

.vs__or::before,
.vs__or::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 40px;
  background: var(--soft-border);
}

.vs__or::before {
  top: -46px;
}

.vs__or::after {
  bottom: -46px;
}

.tt-note {
  max-width: 820px;
  margin-top: 30px !important;
  padding-left: 18px;
  border-left: 2px solid var(--gold-line);
  font-size: 15px !important;
  text-align: left;
}

.tt-note--center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- who orders them --------------------------------------------- */

.tt-who {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.tt-who__kicker {
  background: var(--gold-tint);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--brand-main) !important;
  margin-bottom: 0 !important;
}

.who-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.who-tags li {
  padding: 12px 20px;
  border-radius: 100px;
  border: 1px solid var(--soft-border);
  background: #fff;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--brand-main);
  box-shadow: var(--card-shadow);
  transition: transform .3s ease, border-color .3s ease, color .3s ease;
}

.who-tags li:hover {
  transform: translateY(-4px);
  border-color: var(--brand-accent);
  color: var(--brand-accent);
}

/* ---------- canvas reasons ---------------------------------------------- */

.tt-canvas__head {
  max-width: 700px;
  margin-bottom: 34px;
}

.canvas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--soft-border);
  border-bottom: 1px solid var(--soft-border);
}

.cv {
  padding: 28px 22px;
  border-right: 1px solid var(--soft-border);
  transition: background .35s ease;
}

.cv:last-child {
  border-right: none;
}

.cv:hover {
  background: #fff;
}

.cv strong {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  color: var(--brand-main);
  margin-bottom: 10px;
}

body.page-tote .cv p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- step ladder --------------------------------------------------- */

.tt-process {
  background: #fff;
}

.tt-process__head {
  max-width: 780px;
  margin-bottom: 40px;
}

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: st;
}

.steps li {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 12px;
  background: var(--light-bg);
  border: 1px solid var(--soft-border);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.steps li:hover {
  transform: translateY(-6px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow-hi);
}

.steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-main);
  color: var(--brand-accent);
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  transition: background .35s ease, color .35s ease;
}

.steps li:hover .steps__n {
  background: var(--brand-accent);
  color: var(--brand-main);
}

body.page-tote .steps h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 8px;
  padding-bottom: 0;
}

body.page-tote .steps p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
}

/* ---------- bulk ---------------------------------------------------------- */

.tt-bulk__inner {
  max-width: 900px;
}

body.page-tote .tt-bulk .chip-row {
  margin: 28px 0;
}

body.page-tote .tt-bulk__note {
  padding-left: 18px;
  border-left: 2px solid var(--gold-line);
  font-size: 15px !important;
  margin-bottom: 0 !important;
}

/* ---------- pre-order checklist -------------------------------------------- */

.tt-order {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  background: #fff;
}

.tt-order__line {
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--gold-tint);
  color: var(--brand-main) !important;
  font-size: 15px !important;
}

.order-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin: 0;
  padding: 0;
}

.order-list li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--soft-border);
  font-size: 15px;
  color: var(--brand-main);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.reveal.active .order-list li {
  opacity: 1;
  transform: none;
}

.reveal.active .order-list li:nth-child(1) {
  transition-delay: .05s;
}

.reveal.active .order-list li:nth-child(2) {
  transition-delay: .11s;
}

.reveal.active .order-list li:nth-child(3) {
  transition-delay: .17s;
}

.reveal.active .order-list li:nth-child(4) {
  transition-delay: .23s;
}

.reveal.active .order-list li:nth-child(5) {
  transition-delay: .29s;
}

.reveal.active .order-list li:nth-child(6) {
  transition-delay: .35s;
}

.reveal.active .order-list li:nth-child(7) {
  transition-delay: .41s;
}

.reveal.active .order-list li:nth-child(8) {
  transition-delay: .47s;
}

.order-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--gold-line);
  transition: background .3s ease, border-color .3s ease;
}

.order-list li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 21px;
  width: 4px;
  height: 7px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(40deg);
  transition: border-color .3s ease;
}

.order-list li:hover::before {
  background: var(--gold-tint);
  border-color: var(--brand-accent);
}

.order-list li:hover::after {
  border-right-color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

/* ---------- responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
  .canvas-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cv:nth-child(2n) {
    border-right: none;
  }

  .cv:nth-child(n+3) {
    border-top: 1px solid var(--soft-border);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {

  .tt-open,
  .tt-who,
  .tt-order {
    grid-template-columns: 1fr;
  }

  .vs {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vs__or {
    text-align: center;
    padding: 4px;
  }

  .vs__or::before,
  .vs__or::after {
    display: none;
  }
}

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

  .cv {
    border-right: none;
    border-top: 1px solid var(--soft-border);
  }

  .cv:first-child {
    border-top: none;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .order-list {
    grid-template-columns: 1fr;
  }

  .vs-card {
    padding: 26px 22px;
  }

  .who-tags li {
    padding: 10px 16px;
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .reveal .spec-tags li,
  .reveal .order-list li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   ============  JUTE PAGE  ===============================================
   Its own components again: a woven texture panel drawn in CSS, a three-
   step material scale from pure jute to pure cotton, a horizontal build
   rail, and numbered quote cards.
   ========================================================================= */

body.page-jute .jt-open,
body.page-jute .jt-material,
body.page-jute .jt-for,
body.page-jute .jt-print,
body.page-jute .jt-build,
body.page-jute .jt-bulk,
body.page-jute .jt-quote {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- opening + texture panel ----------------------------------- */

.jt-open {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
}

body.page-jute .jt-open .lead {
  font-size: clamp(16.5px, 1.35vw, 19px) !important;
  color: var(--brand-main) !important;
  border-left: 3px solid var(--brand-accent);
  padding-left: 20px;
  margin-bottom: 22px !important;
}

.jt-texture {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--soft-border);
  background: #fff;
  box-shadow: var(--card-shadow);
}

/* a jute weave, drawn rather than photographed */
.jt-texture__weave {
  height: 190px;
  background:
    repeating-linear-gradient(90deg,
      rgba(150, 116, 58, .34) 0 7px,
      rgba(150, 116, 58, .10) 7px 14px),
    repeating-linear-gradient(0deg,
      rgba(120, 92, 44, .30) 0 7px,
      rgba(120, 92, 44, .07) 7px 14px),
    linear-gradient(135deg, #e8dcc4, #d9c9a8);
  background-blend-mode: multiply, multiply, normal;
  position: relative;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.jt-texture:hover .jt-texture__weave {
  transform: scale(1.03);
}

.jt-texture__weave::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, .5));
}

.jt-texture figcaption {
  padding: 24px 26px 26px;
}

.jt-texture__tag {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 12px;
}

body.page-jute .jt-texture p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

/* ---------- material scale --------------------------------------------- */

.jt-material__head,
.jt-build__head {
  max-width: 780px;
  margin-bottom: 38px;
}

.mat-scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--soft-border);
  background: #fff;
}

.mat {
  position: relative;
  padding: 30px 26px;
  border-right: 1px solid var(--soft-border);
  transition: background .4s ease;
}

.mat:last-child {
  border-right: none;
}

/* the scale runs from raw jute on the left to clean cotton on the right */
.mat:nth-child(1) {
  background: linear-gradient(180deg, rgba(150, 116, 58, .10), transparent 60%);
}

.mat:nth-child(2) {
  background: linear-gradient(180deg, rgba(150, 116, 58, .05), transparent 60%);
}

.mat:hover {
  background: var(--gold-tint);
}

.mat--blend::before,
.mat--blend::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--brand-accent);
  border-right: 1.5px solid var(--brand-accent);
}

.mat--blend::before {
  left: -4px;
  transform: rotate(-135deg);
}

.mat--blend::after {
  right: -4px;
  transform: rotate(45deg);
}

.mat__label {
  display: block;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 12px;
}

body.page-jute .mat p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
}

.jt-note {
  max-width: 860px;
  margin-top: 28px !important;
  padding-left: 18px;
  border-left: 2px solid var(--gold-line);
  font-size: 15px !important;
}

/* ---------- who we build for -------------------------------------------- */

.jt-for {
  text-align: center;
  background: #fff;
}

.jt-for__head {
  margin-bottom: 34px;
}

body.page-jute .jt-for h2::after,
body.page-jute .pg-faq h2::after {
  left: 50%;
  transform: translateX(-50%);
}

.for-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  text-align: left;
}

.for-grid li {
  padding: 20px 20px 20px 22px;
  border-left: 2px solid var(--gold-line);
  background: var(--light-bg);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-main);
  transition: border-left-color .3s ease, transform .3s ease, background .3s ease;
}

.for-grid li:hover {
  border-left-color: var(--brand-accent);
  background: #fff;
  transform: translateX(5px);
}

/* ---------- printing ----------------------------------------------------- */

.jt-print {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 58px);
  align-items: center;
}

.jt-print__example {
  background: var(--gold-tint);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--brand-main) !important;
  margin-bottom: 0 !important;
}

.jt-print__spec {
  background: var(--brand-main);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: var(--card-shadow-hi);
}

.jt-print__spec-title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 18px;
}

.spec-cols {
  list-style: none;
  counter-reset: sc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 20px;
  margin: 0;
  padding: 0;
}

.spec-cols li {
  counter-increment: sc;
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .88);
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.reveal.active .spec-cols li {
  opacity: 1;
  transform: none;
}

.reveal.active .spec-cols li:nth-child(1) {
  transition-delay: .06s;
}

.reveal.active .spec-cols li:nth-child(2) {
  transition-delay: .12s;
}

.reveal.active .spec-cols li:nth-child(3) {
  transition-delay: .18s;
}

.reveal.active .spec-cols li:nth-child(4) {
  transition-delay: .24s;
}

.reveal.active .spec-cols li:nth-child(5) {
  transition-delay: .30s;
}

.reveal.active .spec-cols li:nth-child(6) {
  transition-delay: .36s;
}

.reveal.active .spec-cols li:nth-child(7) {
  transition-delay: .42s;
}

.reveal.active .spec-cols li:nth-child(8) {
  transition-delay: .48s;
}

.spec-cols li::before {
  content: counter(sc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 11px;
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-accent);
}

/* ---------- build rail ---------------------------------------------------- */

.jt-build {
  background: #fff;
}

.build-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}

.build-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-accent), rgba(200, 162, 77, .15));
}

.brick {
  padding: 26px 20px 22px;
  border-radius: 0 0 10px 10px;
  background: var(--light-bg);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.brick:hover {
  transform: translateY(-6px);
  background: #fff;
  box-shadow: var(--card-shadow-hi);
}

body.page-jute .brick h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 9px;
  padding-bottom: 0;
}

body.page-jute .brick p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- bulk ----------------------------------------------------------- */

.jt-bulk__inner {
  max-width: 900px;
}

.jt-bulk__sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 28px 0 16px;
}

.weigh-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 26px;
  margin: 0 0 24px;
  padding: 0;
}

.weigh-list li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--soft-border);
  font-size: 15px;
  color: var(--brand-main);
}

.weigh-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand-accent);
  transform: rotate(45deg);
}

body.page-jute .jt-bulk__note {
  padding-left: 18px;
  border-left: 2px solid var(--gold-line);
  font-size: 15px !important;
  margin-bottom: 0 !important;
}

/* ---------- quote cards ----------------------------------------------------- */

.jt-quote {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(28px, 5vw, 58px);
  align-items: center;
  background: #fff;
}

.quote-cards {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.quote-cards li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--soft-border);
  background: var(--light-bg);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--brand-main);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.quote-cards li:last-child {
  grid-column: 1 / -1;
}

.quote-cards li:hover {
  transform: translateY(-4px);
  border-color: var(--gold-line);
  background: #fff;
}

.quote-cards li span {
  flex: none;
  font-family: "Archivo", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--brand-accent);
}

/* ---------- responsive ------------------------------------------------------- */

@media (max-width: 1100px) {
  .for-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .build-rail {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
  }
}

@media (max-width: 900px) {

  .jt-open,
  .jt-print,
  .jt-quote {
    grid-template-columns: 1fr;
  }

  .mat-scale {
    grid-template-columns: 1fr;
  }

  .mat {
    border-right: none;
    border-bottom: 1px solid var(--soft-border);
  }

  .mat:last-child {
    border-bottom: none;
  }

  .mat--blend::before,
  .mat--blend::after {
    display: none;
  }
}

@media (max-width: 640px) {

  .for-grid,
  .weigh-list,
  .quote-cards,
  .spec-cols {
    grid-template-columns: 1fr;
  }

  .build-rail {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .brick {
    border-radius: 10px;
    padding: 22px 18px;
  }

  .build-rail::before {
    display: none;
  }

  .jt-texture__weave {
    height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .spec-cols li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   ============  LARGE SCREEN ALIGNMENT  ==================================
   Page content is centred in a 1200px column, but the top bar, header and
   footer were full-bleed with a fixed 30px edge padding. On a 1920px
   screen that left the logo 330px away from where the content actually
   started; on 2560px, 650px. Their inner edges now line up with the
   content column at every width, and the column itself grows on very
   large displays instead of stranding a narrow strip in the middle.
   ========================================================================= */

/* The gutter each full-bleed strip needs so its contents sit on the same
   left and right edges as the centred content column. Never smaller than
   the original padding. */
:root {
  /* matches the section gutter, so a strip's inner edge lands exactly
     where the content column starts */
  --edge: max(var(--sec-x), calc((100% - var(--wrap)) / 2 + var(--sec-x)));
}

/* Below 900px the phone and tablet paddings set earlier are already
   tuned, so the gutter only takes over from there up. */
@media (min-width: 900px) {

  body .top-bar {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }

  body header#header {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
}

/* below 900px the container keeps its own 20px padding — the gutter
   rules only take over from 900px up */
@media (min-width: 900px) {
  body .site-footer .footer-container {
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 900px) {
  body .site-footer {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
}

@media (min-width: 900px) {
  body .site-footer .footer-bottom {
    margin-left: calc(var(--edge) * -1);
    margin-right: calc(var(--edge) * -1);
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
}

/* full-bleed bands: keep the background edge-to-edge, align the contents */
@media (min-width: 900px) {

  body .numbers-band,
  body .ab-close,
  body .ab-approach,
  body .hp-branding,
  body .nw-intro,
  body .tt-choose,
  body .jt-for,
  body .bp-why,
  body .infrastructure-section,
  body .testimonial-section,
  body .clients-section,
  body .contact,
  body .products {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
}

/* the mobile menu panel hangs off the same gutter, not the raw edge */
@media (max-width: 820px) {
  body header#header nav {
    right: var(--edge);
  }
}

/* ---------- let the column breathe on very large displays ------------- */

@media (min-width: 1700px) {
  :root {
    --wrap: 1340px;
  }

  body header#header .logo img {
    width: 200px;
  }

  body header#header nav a {
    font-size: 17px;
    margin: 0 14px;
  }

  body .top-bar {
    font-size: 14.5px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

@media (min-width: 2100px) {
  :root {
    --wrap: 1520px;
    --sec-y: clamp(56px, 5.4vw, 118px);
  }

  body {
    font-size: 17px;
  }

  body header#header .logo img {
    width: 220px;
  }

  body header#header nav a {
    font-size: 18px;
  }
}

@media (min-width: 2800px) {
  :root {
    --wrap: 1720px;
  }
}

/* ---------- hero on very large displays ------------------------------
   The banner is drawn with background-size:contain and capped at 430px
   tall, so on a wide screen it sat as a small strip with dead grey space
   either side. Above 1700px it becomes a deliberate centred banner that
   lines up with the content column, and the height cap rises so the
   artwork fills its box exactly instead of floating inside it. */

/* The banner is 2152x731, so its natural height passes the 430px cap at
   about 1265px wide. Past that point a full-bleed hero letterboxes: the
   artwork shrinks to 1264px and leaves dead grey either side. From 1200px
   up the hero is therefore a centred banner aligned to the content column,
   with a height cap high enough that the artwork always fills its box. */

@media (min-width: 1200px) {
  body .hero-slider {
    max-width: calc(var(--wrap) + var(--sec-x) * 2);
    max-height: 470px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
  }
}

@media (min-width: 1700px) {
  body .hero-slider {
    max-height: 540px;
  }
}

@media (min-width: 2100px) {
  body .hero-slider {
    max-height: 600px;
  }
}

@media (min-width: 2800px) {
  body .hero-slider {
    max-height: 680px;
  }
}

/* =========================================================================
   ============  PREMIUM UI — 2026  =======================================
   Appended last, so it settles every earlier rule it needs to.
   Four jobs: hold the layout together at any zoom, modernise the header
   and hero furniture, calm the spacing, and run the logo marquee.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ONE CONTAINER RULE FOR EVERYTHING

   Zooming out makes the viewport enormous — at 50% zoom a 1540px screen
   reports 3080px. Sections that were never capped then stretched to the
   full width while the capped ones stayed centred, which is why the page
   looked like it fell apart on the left. Everything is now measured from
   the same column.
   ------------------------------------------------------------------------- */

:root {
  --shell: min(100% - var(--sec-x) * 2, var(--wrap));
}

body .clients-section,
body .contact,
body .hp-video,
body .testimonial-section,
body .infrastructure-section,
body .logos {
  padding-left: var(--edge);
  padding-right: var(--edge);
}

body .clients-section,
body .contact {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  max-width: var(--wrap);
  margin-inline: auto;
}

@media (min-width: 900px) {

  body .clients-section,
  body .contact {
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
  }
}

/* any stray full-bleed child gets pulled back in line */
body .clients-image,
body .clients-text,
body .contact form,
body .hp-video__text,
body .hp-video__media {
  max-width: 100%;
  min-width: 0;
}

/* -------------------------------------------------------------------------
   2. LOGO MARQUEE
   Two rows drifting in opposite directions reads as movement without
   anything actually demanding to be read. Pauses on hover so a visitor can
   actually look at a brand they recognise.
   ------------------------------------------------------------------------- */

.logos {
  max-width: 100%;
  overflow: hidden;
  background: #fff;
  padding-top: clamp(48px, 5.5vw, 88px);
  padding-bottom: clamp(48px, 5.5vw, 88px);
}

.logos__head {
  max-width: 720px;
  margin: 0 auto clamp(34px, 4vw, 54px);
  text-align: center;
}

body .logos__head h2 {
  text-align: center;
}

body .logos__head h2::after {
  left: 50%;
  transform: translateX(-50%);
}

body .logos__head p {
  font-size: 15.5px;
  margin-bottom: 0;
}

.mq {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mq+.mq {
  margin-top: 14px;
}

.mq__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.mq--left .mq__track {
  animation: mq-l 42s linear infinite;
}

.mq--right .mq__track {
  animation: mq-r 38s linear infinite;
}

.mq:hover .mq__track {
  animation-play-state: paused;
}

@keyframes mq-l {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes mq-r {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.mq__track li {
  flex: none;
  display: flex;
  align-items: center;
  height: 62px;
}

.mq__track img {
  height: 100%;
  width: auto;
  /* A wordmark like Pioneer is six times wider than a roundel like Dabur.
     Capping the width lets the wide ones shrink in height instead, so no
     single brand dominates the row. */
  max-width: 150px;
  display: block;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .58;
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}

.mq__track li:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

@media (max-width: 640px) {
  .mq__track li {
    height: 46px;
  }

  .mq__track img {
    max-width: 112px;
  }

  .mq__track {
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mq__track {
    animation: none !important;
  }

  .mq {
    overflow-x: auto;
  }
}

/* -------------------------------------------------------------------------
   3. HEADER — glass, and it gets out of the way as you read
   ------------------------------------------------------------------------- */

body header#header {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: padding .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body header#header.scrolled,
body header#header.px-stuck {
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(255, 255, 255, .86);
  border-bottom-color: rgba(18, 24, 38, .08);
  box-shadow: 0 10px 30px -18px rgba(18, 24, 38, .5);
}

body header#header.px-stuck .logo img {
  width: 150px;
  transition: width .35s ease;
}

body header#header nav a:not(.btn) {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--brand-main);
  opacity: .78;
  transition: opacity .25s ease;
}

body header#header nav a:not(.btn):hover,
body header#header nav a.active {
  opacity: 1;
}

/* the Contact button, restyled to look current */
body header#header nav a.btn {
  background: var(--brand-main);
  color: #fff !important;
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px -8px rgba(18, 24, 38, .8);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, background .3s ease;
}

body header#header nav a.btn:hover {
  background: #1b2436;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(18, 24, 38, .9);
}

/* top bar reads as a thin utility strip, not a second header */
body .top-bar {
  font-size: 12.5px;
  letter-spacing: .01em;
  padding-top: 8px;
  padding-bottom: 8px;
  opacity: .96;
}

/* -------------------------------------------------------------------------
   4. HERO FURNITURE — the arrows and dots were the most dated thing on the page
   ------------------------------------------------------------------------- */

body .hero-slider {
  border-radius: 16px;
  overflow: hidden;
}

body .hero-slider .arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(18, 24, 38, .07);
  box-shadow: 0 8px 24px -12px rgba(18, 24, 38, .5);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease, background .3s ease;
}

body .hero-slider:hover .arrow {
  opacity: 1;
}

body .hero-slider .arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--brand-main);
  border-right: 2px solid var(--brand-main);
}

body .hero-slider .prev::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}

body .hero-slider .next::before {
  transform: rotate(45deg) translate(-2px, 2px);
}

body .hero-slider .arrow:hover {
  background: #fff;
  transform: scale(1.06);
}

body .hero-slider .dots {
  bottom: 16px;
}

body .hero-slider .dot {
  width: 7px;
  height: 7px;
  background: rgba(18, 24, 38, .28);
  opacity: 1;
  border-radius: 100px;
  transition: width .4s cubic-bezier(.22, .61, .36, 1), background .3s ease;
}

body .hero-slider .dot.active {
  width: 26px;
  background: var(--brand-main);
}

@media (max-width: 640px) {
  body .hero-slider .arrow {
    opacity: 1;
    width: 36px;
    height: 36px;
  }
}

/* -------------------------------------------------------------------------
   5. PRODUCT CARDS — one frame, so a shelf of mixed photography reads as a set
   ------------------------------------------------------------------------- */

body .products .item {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--soft-border);
  box-shadow: 0 1px 2px rgba(18, 24, 38, .04);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, border-color .45s ease;
}

body .products .item:hover {
  transform: translateY(-6px);
  border-color: rgba(200, 162, 77, .4);
  box-shadow: 0 26px 50px -26px rgba(18, 24, 38, .45);
}

body .products .img-wrap {
  background: linear-gradient(170deg, #f7f8fa, #eef1f5);
  overflow: hidden;
}

body .products .item img {
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  mix-blend-mode: multiply;
}

body .products .item:hover img {
  transform: scale(1.06);
}

body .premium-info {
  padding: 16px 16px 18px;
  text-align: center;
}

body .premium-info h4 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}

body .premium-info span {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-muted);
}

/* filter buttons, current-looking */
body .filters button {
  border-radius: 100px;
  border: 1px solid var(--soft-border);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 20px;
  color: var(--ink-muted);
  transition: all .3s ease;
}

body .filters button:hover {
  border-color: var(--brand-main);
  color: var(--brand-main);
}

body .filters button.active {
  background: var(--brand-main);
  border-color: var(--brand-main);
  color: #fff;
}

/* -------------------------------------------------------------------------
   6. TYPE AND SPACING — the quiet half of "premium"
   ------------------------------------------------------------------------- */

body h1,
body h2,
body h3 {
  letter-spacing: -.022em;
}

body h1 {
  line-height: 1.06;
}

body h2 {
  line-height: 1.14;
}

body .eyebrow {
  font-size: 11.5px;
  letter-spacing: .24em;
}

/* sections were carrying more air than they needed once every block had
   its own internal padding too */
:root {
  --sec-y: clamp(48px, 5.2vw, 92px);
}

@media (min-width: 2100px) {
  :root {
    --sec-y: clamp(56px, 4.6vw, 108px);
  }
}

body .ab-story,
body .ab-split,
body .bp-open,
body .nw-open,
body .tt-open,
body .jt-open,
body .hp-intro {
  padding-top: clamp(44px, 5vw, 84px);
  padding-bottom: clamp(44px, 5vw, 84px);
}

/* consecutive white sections should not read as one long empty page */
body section+section {
  border-top: 0;
}

/* -------------------------------------------------------------------------
   7. WIDE SCREENS — give the column real room instead of stranding it
   ------------------------------------------------------------------------- */

@media (min-width: 2400px) {
  :root {
    --wrap: 1800px;
  }

  body {
    font-size: 18px;
  }
}

@media (min-width: 3000px) {
  :root {
    --wrap: 2040px;
  }

  body {
    font-size: 19px;
  }

  body header#header .logo img {
    width: 240px;
  }
}


/* the header, restated after everything else so nothing outranks it */
body header#header {
  position: sticky;
  top: 0;
  z-index: 1000;
}


/* =========================================================================
   ============  PERFORMANCE  =============================================
   The page felt heavy, and these were the three most expensive things on
   it. None of them was carrying its weight visually.
   ========================================================================= */

/* mix-blend-mode forces every product image onto its own compositing layer
   and re-blends it against the card on each paint. With 36 images in the
   grid that is the single biggest cost on the home page — for an effect
   almost nobody would notice. The gradient frame alone does the job. */
body .products .item img {
  mix-blend-mode: normal;
}

/* the grain overlay repainted a full-viewport noise texture above every
   scroll and every blurred surface */
.px-grain::after {
  display: none;
}

/* one blurred surface is a nice touch; blurring several at once is where
   scrolling starts to stutter on an ordinary laptop */
body .lb__veil {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (max-width: 900px),
(prefers-reduced-motion: reduce) {

  /* on a phone the header blur costs far more than it adds */
  body header#header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
  }

  body .lb__veil {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 12, 20, .84);
  }
}

/* hint the browser about the marquee without pinning layers permanently */
.mq__track {
  will-change: auto;
}

.mq:hover .mq__track,
.mq__track {
  contain: layout paint;
}

/* =========================================================================
   ============  FIX PASS — Aug 24 2026  ==================================
   Five concrete issues: the video/poster size jump, the two spacing
   complaints, the grayscale logos, and the plain contact form. Appended
   last, so every rule here wins over what came before.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. FACTORY VIDEO — poster and video no longer disagree on shape

   The poster image is close to square (705x770); the actual video is
   16:9 (1280x720). Before playback the box took its size from the poster,
   then jumped to a much shorter box the moment the video's real dimensions
   arrived — which is the empty space the section was leaving. The box is
   now locked to 16:9 always, so nothing moves; poster and video both fill
   it with object-fit instead of setting the box's shape.
   ------------------------------------------------------------------------- */

.hp-video__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0f141f;
  box-shadow: var(--card-shadow-hi);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.hp-video__media:hover {
  box-shadow: 0 32px 70px -28px rgba(18, 24, 38, .5);
}

.hp-video__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 0;
  box-shadow: none;
  background: #0f141f;
}

/* a quiet play affordance until the browser's own controls take over */
.hp-video__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .28) 100%);
  opacity: 1;
  transition: opacity .35s ease;
}

.hp-video__media:has(video:not([paused]))::before {
  opacity: 0;
}

/* -------------------------------------------------------------------------
   2. SPACING — less air above "Our Product Range", more between the
   filters and the first row of photos
   ------------------------------------------------------------------------- */

body.page-home #products {
  padding-top: clamp(18px, 2.6vw, 34px);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 clamp(30px, 4vw, 46px);
}

.filters button {
  margin: 0;
}

.grid {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   3. CLIENT LOGOS — full colour, on a card, not grayscale
   ------------------------------------------------------------------------- */

.mq__track li {
  padding: 10px 20px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--soft-border);
  box-shadow: 0 1px 2px rgba(18, 24, 38, .04);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

.mq__track img {
  filter: none;
  opacity: 1;
}

.mq__track li:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 162, 77, .4);
  box-shadow: 0 18px 34px -18px rgba(18, 24, 38, .35);
}

.mq__track li:hover img {
  transform: none;
}

@media (max-width: 640px) {
  .mq__track li {
    padding: 8px 14px;
  }
}

/* -------------------------------------------------------------------------
   4. PRODUCT PHOTOS — a clear, premium "open" affordance on hover
   ------------------------------------------------------------------------- */

body .products .img-wrap {
  position: relative;
}

body .products .img-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 20px -8px rgba(18, 24, 38, .5);
  opacity: 0;
  transform: translateY(8px) scale(.85);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121826' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3Cpath d='M11 8.3v5.4M8.3 11h5.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px;
}

body .products .item:hover .img-wrap::after {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------------
   5. CONTACT — a real two-column section instead of a bare form
   ------------------------------------------------------------------------- */

body .contact {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
  background: #fff;
}

.cf-intro .eyebrow {
  padding-left: 0;
}

.cf-intro .eyebrow::before {
  display: none;
}

body .cf-intro h2 {
  margin-bottom: 10px;
}

body .cf-intro p {
  max-width: 460px;
  margin-bottom: 26px;
}

.cf-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
}

.cf-points li {
  padding: 10px 18px;
  border-radius: 100px;
  background: var(--gold-tint, rgba(200, 162, 77, .12));
  border: 1px solid var(--gold-line, rgba(200, 162, 77, .3));
  font-size: 13.5px;
  color: var(--brand-main);
}

.cf-points li span {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  color: var(--brand-accent);
  margin-right: 5px;
}

.cf-direct {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--soft-border);
  max-width: 340px;
}

.cf-direct__row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brand-main);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}

.cf-direct__row svg {
  flex: none;
  color: var(--brand-accent);
}

.cf-direct__row:hover {
  color: var(--brand-accent);
  transform: translateX(4px);
}

.cf-card {
  background: #fff;
  border: 1px solid var(--soft-border);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 30px 70px -34px rgba(18, 24, 38, .28);
}

.cf-form {
  display: grid;
  gap: 14px;
}

.cf-field {
  position: relative;
  display: flex;
  align-items: center;
}

.cf-field svg {
  position: absolute;
  left: 15px;
  color: var(--ink-muted);
  pointer-events: none;
  transition: color .25s ease;
  z-index: 1;
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--brand-main);
  background: var(--light-bg, #f7f8fa);
  border: 1.5px solid var(--soft-border);
  border-radius: 10px;
  padding: 14px 16px 14px 44px;
  margin: 0;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.cf-field--area textarea {
  padding-left: 16px;
  resize: vertical;
  min-height: 92px;
}

.cf-field--select select {
  appearance: none;
  -webkit-appearance: none;
  color: var(--brand-main);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6376' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(200, 162, 77, .14);
}

.cf-field input:focus+svg,
.cf-field select:focus~svg {
  color: var(--brand-accent);
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: #9aa1b0;
}

/* ".contact button" (a class + an element) outranks a single class like
   ".cf-submit" no matter what order the rules are in, so this needs the
   same shape of selector to actually win. */
body .cf-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: 10px;
  padding: 15px 22px;
  margin-top: 4px;
  background: var(--brand-main);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, background .3s ease;
}

.cf-submit svg {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.cf-submit:hover {
  background: #1b2436;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(18, 24, 38, .7);
}

.cf-submit:hover svg {
  transform: translateX(4px);
}

.cf-submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}

.cf-submit:hover::after {
  left: 130%;
}

.cf-note {
  font-size: 12.5px;
  color: var(--ink-muted);
  text-align: center;
  margin: 4px 0 0 !important;
}

/* the "Sent Successfully" line main.js appends directly into the form */
.cf-form p[style*="color:green"],
.cf-form p[style*="color: green"] {
  grid-column: 1 / -1;
  margin: 2px 0 0 !important;
  padding: 12px 16px;
  border-radius: 10px;
  background: #eef8f1;
  border: 1px solid #bfe6cc;
  color: #1e7d3f !important;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 900px) {
  body .contact {
    grid-template-columns: 1fr;
  }

  .cf-direct {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hp-video__media,
  .cf-submit,
  .cf-submit::after,
  .mq__track li {
    transition: none;
  }
}

/* =========================================================================
   ============  FIX PASS 2 — Aug 26 2026  ================================
   ========================================================================= */

/* -------------------------------------------------------------------------
   MOBILE MENU — active link text was invisible

   "body header#header nav a:not(.btn)" sets color:var(--brand-main) with no
   media query, so it applies everywhere including inside the open mobile
   menu. Its specificity (1 id, 1 pseudo-class, 4 elements) is HIGHER than
   the mobile-only ".active" rule that tries to set color:#fff on the same
   navy pill background — so the text was rendering navy-on-navy: present,
   just unreadable. This wins the tie deliberately with !important, since
   "the active item must be readable" is not something a future rule should
   accidentally undo again.
   ------------------------------------------------------------------------- */

@media (max-width: 820px) {
  body header#header nav a.active {
    color: #fff !important;
    opacity: 1 !important;
  }
}

/* -------------------------------------------------------------------------
   HERO — taller on mobile, dots moved below as their own strip
   -------------------------------------------------------------------------
   The banner is a wide 2.94:1 graphic. Letting aspect-ratio drive the box
   made it correctly proportioned but only ~130px tall on a phone — too
   short to read the text baked into the artwork. Below 640px the box now
   holds a sensible fixed height instead, with background-size:contain
   keeping the whole graphic visible (letterboxed on a soft brand tint
   rather than cropped), and the dots live in their own strip underneath
   instead of overlapping the image.
   ------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body .hero-slider {
    aspect-ratio: auto;
    height: clamp(190px, 52vw, 260px);
    max-height: none;
    background: linear-gradient(135deg, #f3ede0, #e9e2d2);
  }

  body .hero-slider .slides {
    background-size: contain;
  }
}

@media (max-width: 420px) {
  body .hero-slider {
    height: clamp(170px, 50vw, 220px);
  }
}

/* the dots strip, now a sibling right after .hero-slider rather than an
   overlay on top of it */
.dots--under {
  position: static !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 14px 0 4px;
  bottom: auto;
}

.dots--under .dot {
  width: 6px;
  height: 6px;
  background: rgba(18, 24, 38, .22);
  opacity: 1;
  border-radius: 100px;
  margin: 0;
  transition: width .4s cubic-bezier(.22, .61, .36, 1), background .3s ease;
}

.dots--under .dot.active {
  width: 22px;
  background: var(--brand-main);
}

@media (max-width: 640px) {
  .dots--under {
    margin: 10px 0 2px;
    gap: 5px;
  }

  .dots--under .dot {
    width: 5px;
    height: 5px;
  }

  .dots--under .dot.active {
    width: 18px;
  }
}

/* -------------------------------------------------------------------------
   HERO — draggable on desktop, swipeable on mobile

   The arrows still work exactly as before; this adds a second way to move
   between slides without needing them. cursor:grab signals it on desktop;
   touch-action:pan-y lets a vertical scroll still pass through on mobile
   while a horizontal drag is read as a swipe.
   ------------------------------------------------------------------------- */

body .hero-slider {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

body .hero-slider.px-dragging {
  cursor: grabbing;
}

/* =================================================================== */

body.page-collection .nc-open,
body.page-collection .nc-order 
{
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- opening ---------------------------------------------------- */

.nc-open {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
}

body.page-collection .nc-open .lead {
  font-size: clamp(16.5px, 1.35vw, 19px) !important;
  color: var(--brand-main) !important;
  border-left: 3px solid var(--brand-accent);
  padding-left: 20px;
  margin-bottom: 22px !important;
}

/* ---------- "what you will find here" panel ---------------------------- */

.nc-highlights {
  background: var(--brand-main);
  border-radius: 14px;
  padding: 32px 30px 26px;
  box-shadow: var(--card-shadow-hi);
}

.nc-highlights__tag {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: 22px;
}

.nc-highlights__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nc-highlights__list li {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .14);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.reveal.active .nc-highlights__list li {
  opacity: 1;
  transform: none;
}

.reveal.active .nc-highlights__list li:nth-child(1) {
  transition-delay: .10s;
}

.reveal.active .nc-highlights__list li:nth-child(2) {
  transition-delay: .20s;
}

.reveal.active .nc-highlights__list li:nth-child(3) {
  transition-delay: .30s;
}

.reveal.active .nc-highlights__list li:nth-child(4) {
  transition-delay: .40s;
}

.nc-highlights__list li:last-child {
  border-bottom: none;
}

.nc-highlights__list strong {
  display: block;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

body.page-collection .nc-highlights__note {
  margin: 18px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px !important;
  color: var(--brand-accent) !important;
}

/* ---------- how to order ----------------------------------------------- */

.nc-order {
  background: #fff;
}

.nc-order__head {
  max-width: 780px;
  margin-bottom: 38px;
}

.nc-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nc-steps li {
  padding: 26px 22px;
  border-radius: 12px;
  background: var(--light-bg);
  border: 1px solid var(--soft-border);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

.nc-steps li:hover {
  transform: translateY(-6px);
  border-color: var(--gold-line);
  box-shadow: var(--card-shadow-hi);
}

.nc-steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-main);
  color: var(--brand-accent);
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 16px;
  transition: background .35s ease, color .35s ease;
}

.nc-steps li:hover .nc-steps__n {
  background: var(--brand-accent);
  color: var(--brand-main);
}

body.page-collection .nc-steps h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--brand-main);
  margin-bottom: 8px;
  padding-bottom: 0;
}

body.page-collection .nc-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.nc-note {
  max-width: 860px;
  margin-top: 30px !important;
  padding-left: 18px;
  border-left: 2px solid var(--gold-line);
  font-size: 15px !important;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1100px) {
  .nc-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .nc-open {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nc-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .nc-highlights {
    padding: 26px 22px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .nc-highlights__list li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   NAV SQUEEZE — specificity fix

   The squeeze rules in the "HEADER FIT" block use `header nav a`, but a
   later rule uses `body header#header nav a:not(.btn)` — an ID plus more
   elements, so it always won and the font-size never actually shrank.
   With 8 menu items that mattered: between 821 and 990px the links needed
   more room than the header had and wrapped onto a second row.

   These repeat the squeeze at matching specificity so it takes effect.
   ------------------------------------------------------------------------- */

@media (max-width: 990px) and (min-width: 821px) {

  body header#header nav a:not(.btn) {
    font-size: 13px;
    letter-spacing: -.015em;
    margin: 0 4px;
  }

  body header#header nav a.btn {
    padding: 9px 14px;
    font-size: 13px;
  }

  body header#header .logo img {
    width: 120px;
  }

  body header#header {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------- footer legal links (Privacy / Disclaimer) ---------- */
.footer-legal {
  text-align: center;
  padding: 14px 0 0;
  font-size: 13.5px;
}

.footer-legal a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  padding: 0 4px;
  transition: color .25s ease;
}

.footer-legal a:hover {
  color: var(--brand-accent, #c8a24d);
}

.footer-legal span {
  color: rgba(255, 255, 255, .28);
  margin: 0 4px;
}