/* ==========================================================================
   PAGE LAYOUTS
   ========================================================================== */

/* ---- Two column generic ---- */
.split-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
@media (max-width: 1024px) { .split-2col { grid-template-columns: 1fr; } }
.split-2col img { border-radius: var(--radius-card); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ---- Values / dual-mandate blocks ---- */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
@media (max-width: 1024px) { .value-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } }

.mandate-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); }
@media (max-width: 900px) { .mandate-split { grid-template-columns: 1fr; } }
.mandate-card { padding: var(--sp-4); }
.mandate-card h3 { margin-bottom: 8px; }
.mandate-card p { color: var(--color-grey-text); margin-bottom: var(--sp-2); }

.tbc-inline-note {
  display: inline-block; font-size: var(--fs-caption); background: #FBF3E7; color: var(--color-warning);
  padding: 4px 10px; border-radius: 6px; margin-top: 6px;
}

/* ---- Legal pages (Privacy / Terms / Shipping & Returns) ---- */
.legal-jumplinks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.legal-jumplinks a {
  font-size: var(--fs-caption); font-weight: 600; color: var(--color-blue);
  background: var(--color-grey-light); padding: 6px 14px; border-radius: 20px; text-decoration: none;
}
.legal-jumplinks a:hover { background: var(--color-border); }
.legal-section { padding: var(--sp-4); margin-bottom: var(--sp-3); scroll-margin-top: 90px; }
.legal-section h2 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.legal-section h3 { font-size: var(--fs-small); margin: var(--sp-2) 0 4px; }
.legal-section p, .legal-section li { color: var(--color-grey-text); font-size: var(--fs-small); line-height: 1.6; }
.legal-section ul { padding-left: 1.2em; margin-bottom: var(--sp-2); }
.legal-section p { margin-bottom: var(--sp-2); }
.legal-updated { font-size: var(--fs-caption); color: var(--color-grey-text); margin-bottom: var(--sp-4); }
.legal-decision-note {
  background: #FBF3E7; color: var(--color-warning); border-radius: 8px;
  padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-2);
}
.legal-decision-note p { color: var(--color-warning); font-size: var(--fs-caption); margin: 0; }
.legal-decision-note strong { display: inline-block; margin-bottom: 2px; }

/* ---- Cart page ----
   Item list adopts the same warm-neutral image stage, restrained borders
   and heading/body font pairing as the product cards and product-detail
   page, so the cart reads as a continuation of that experience rather
   than a plain data table. Every row stacks [image + name + remove] over
   [quantity + price] — this keeps every element comfortably tappable and
   never squeezes at narrow widths, from 320px up. Scoped entirely to
   cart-* class names so the shared .summary-card / .summary-row styles
   used by checkout and order-confirmation are left untouched. */
.cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; gap: var(--sp-4); } }

.cart-items-card { padding: 0 var(--sp-4); }

.cart-item { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; border-bottom: 1px solid var(--card-border, var(--color-border)); }
.cart-item:first-child { padding-top: var(--sp-4); }
.cart-item:last-child { border-bottom: none; }

.cart-item-top { display: flex; align-items: center; gap: var(--sp-2); }

.cart-item-media {
  width: 88px; height: 88px; flex-shrink: 0; padding: 10px; box-sizing: border-box;
  background: linear-gradient(180deg, var(--stage-start, #FBFBFA) 0%, var(--stage-end, #F3F1EE) 100%);
  border: 1px solid var(--card-border, var(--color-border)); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cart-item-media a { display: block; width: 100%; height: 100%; }
.cart-item-media img { width: 100%; height: 100%; object-fit: contain; }

.cart-item-info { flex: 1; min-width: 0; }
.cart-item-category { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-grey-text); font-weight: 500; margin: 0 0 4px; }
.cart-item-name { font-family: var(--font-heading); font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--color-charcoal); margin: 0; }
.cart-item-name a:hover { color: var(--color-blue); }

.cart-item-remove {
  flex-shrink: 0; background: none; border: none; width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--color-grey-text);
  transition: color .15s ease, background-color .15s ease;
}
.cart-item-remove .icon { width: 18px; height: 18px; }
.cart-item-remove:hover, .cart-item-remove:focus-visible { color: var(--color-error); background: var(--color-error-bg); }

.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }

.cart-item .qty-selector { height: 44px; }
.cart-item .qty-selector button { width: 36px; font-size: 16px; }
.cart-item .qty-selector input { width: 40px; font-size: var(--fs-small); }

.cart-item-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; text-align: right; }
.cart-item-unit-price { font-size: var(--fs-caption); color: var(--color-grey-text); }
.cart-item-unit-price.tbc { font-style: italic; }
.cart-item-line-total { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 700; letter-spacing: -0.01em; color: var(--color-charcoal); font-variant-numeric: tabular-nums; }
.cart-item-line-total.tbc { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; font-style: italic; color: var(--color-grey-text); }

.cart-continue-link { display: inline-block; margin-top: var(--sp-3); }

/* ---- Order summary (cart page only — deliberately not .summary-card,
   which checkout / order-confirmation also use) ---- */
.cart-summary-card { padding: var(--sp-4); position: sticky; top: 120px; }
.cart-summary-card h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--sp-2); }
.cart-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: 8px 0; font-size: var(--fs-small); color: var(--color-grey-text); }
.cart-summary-row span:last-child { font-variant-numeric: tabular-nums; color: var(--color-charcoal); font-weight: 500; }
.cart-summary-row.total { font-weight: 700; color: var(--color-charcoal); font-size: var(--fs-h3); border-top: 1px solid var(--card-border, var(--color-border)); margin-top: 6px; padding-top: var(--sp-3); }
.cart-summary-row.total span:last-child { color: var(--color-charcoal); font-weight: 700; font-size: var(--fs-h3); }
.cart-checkout-btn { margin-top: var(--sp-3); min-height: 54px; font-size: var(--fs-small); }
.cart-secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-grey-text); margin-top: var(--sp-2); text-align: center; }
.cart-secure-note .icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ---- Cart empty state (additive to the shared .empty-state used
   elsewhere — no rule here touches .empty-state itself) ---- */
.cart-empty-icon-wrap {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto var(--sp-3);
  background: linear-gradient(180deg, var(--stage-start, #FBFBFA) 0%, var(--stage-end, #F3F1EE) 100%);
  border: 1px solid var(--card-border, var(--color-border));
  display: flex; align-items: center; justify-content: center;
}
.cart-empty-icon-wrap .icon { width: 30px; height: 30px; color: var(--color-grey-text); }
.empty-state.cart-empty { padding: var(--sp-7) var(--sp-2); }
.empty-state.cart-empty h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.empty-state.cart-empty p { max-width: 380px; margin: 0 auto; }

@media (max-width: 900px) {
  .cart-summary-card { position: static; }
}

@media (max-width: 640px) {
  .cart-items-card { padding: 0 var(--sp-3); }
  .cart-item { padding: var(--sp-3) 0; gap: 10px; }
  .cart-item:first-child { padding-top: var(--sp-3); }
  .cart-item-media { width: 72px; height: 72px; }
  .empty-state.cart-empty { padding: var(--sp-6) var(--sp-2); }
}

@media (max-width: 380px) {
  .cart-item-media { width: 64px; height: 64px; }
  .cart-item .qty-selector button { width: 32px; }
}

/* ---- Checkout ---- */
.checkout-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
  .checkout-layout .summary-card { order: -1; margin-bottom: var(--sp-4); }
}

.checkout-steps { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.checkout-step { font-size: var(--fs-caption); color: var(--color-grey-text); display: flex; align-items: center; gap: 8px; font-weight: 500; }
.checkout-step .num { width: 22px; height: 22px; border-radius: 50%; background: var(--color-grey-light); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.checkout-step.is-active { color: var(--color-charcoal); font-weight: 600; }
.checkout-step.is-active .num { background: var(--color-blue); color: var(--color-white); }

/* Form sections read as one continuous, lightly-separated flow rather than
   three heavy boxed cards — each one keeps the shared .card surface but
   with generous, consistent spacing instead of ad hoc inline padding. */
.checkout-section { padding: var(--sp-4); margin-bottom: var(--sp-3); }
.checkout-section-title { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--sp-3); }

/* Inputs scoped to the checkout form only, so Contact / Quote forms
   elsewhere on the site are untouched. */
#checkout-form .form-group input {
  border-color: var(--card-border, var(--color-border));
  height: 52px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#checkout-form .form-group input:focus {
  border-color: var(--color-charcoal);
  box-shadow: 0 0 0 3px rgba(20,22,26,.06);
}
#checkout-form .form-group.has-error input { border-color: var(--color-error); }

.payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-option {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--card-border, var(--color-border)); border-radius: var(--radius-input);
  padding: 14px 16px; cursor: pointer; font-size: var(--fs-small); font-weight: 500; color: var(--color-charcoal);
  transition: border-color .15s ease, background-color .15s ease;
}
.payment-option input[type="radio"] { margin: 0; accent-color: var(--color-charcoal); }
.payment-option .icon { width: 20px; height: 20px; color: var(--color-grey-text); flex-shrink: 0; }
.payment-option.is-selected { border-color: var(--color-charcoal); background: var(--color-grey-light); }
.payment-option.is-selected .icon { color: var(--color-charcoal); }
.secure-note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--color-grey-text); margin-top: var(--sp-3); line-height: 1.5; }
.secure-note .icon { width: 16px; height: 16px; flex-shrink: 0; }

.checkout-submit-btn { min-height: 54px; font-size: var(--fs-small); }
.checkout-submit-note { text-align: center; font-size: var(--fs-caption); color: var(--color-grey-text); margin-top: var(--sp-2); }
.checkout-submit-note a { color: var(--color-grey-text); text-decoration: underline; }

/* Order-summary line items — same warm-neutral thumbnail stage as the
   cart, condensed for the checkout sidebar. */
.checkout-summary-items { display: flex; flex-direction: column; }
.checkout-summary-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--card-border, var(--color-border)); }
.checkout-summary-item:last-child { border-bottom: none; }
.checkout-summary-item-media {
  width: 44px; height: 44px; flex-shrink: 0; padding: 5px; box-sizing: border-box;
  background: linear-gradient(180deg, var(--stage-start, #FBFBFA) 0%, var(--stage-end, #F3F1EE) 100%);
  border: 1px solid var(--card-border, var(--color-border)); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.checkout-summary-item-media img { width: 100%; height: 100%; object-fit: contain; }
.checkout-summary-item-body { flex: 1; min-width: 0; }
.checkout-summary-item-name { font-size: var(--fs-caption); font-weight: 600; color: var(--color-charcoal); line-height: 1.4; overflow-wrap: break-word; }
.checkout-summary-item-qty { font-size: var(--fs-caption); color: var(--color-grey-text); }
.checkout-summary-item-total { font-size: var(--fs-caption); font-weight: 600; color: var(--color-charcoal); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 640px) {
  .checkout-section { padding: var(--sp-3); }
}

/* ---- Order summary (checkout + order-confirmation share these class
   names directly in their markup) ---- */
.summary-card { padding: var(--sp-4); position: sticky; top: 120px; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: 8px 0; font-size: var(--fs-small); color: var(--color-grey-text); }
.summary-row span:last-child { font-variant-numeric: tabular-nums; color: var(--color-charcoal); font-weight: 500; }
.summary-row.total { font-weight: 700; color: var(--color-charcoal); font-size: var(--fs-h3); border-top: 1px solid var(--card-border, var(--color-border)); margin-top: 10px; padding-top: var(--sp-3); }
.summary-row.total span:last-child { color: var(--color-charcoal); font-weight: 700; font-size: var(--fs-h3); }
@media (max-width: 900px) { .summary-card { position: static; } }

/* ---- Confirmation ---- */
.confirmation-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.confirmation-order-box { text-align: left; padding: var(--sp-3); margin: var(--sp-4) 0; }

/* ---- FAQ page ---- */
.faq-columns { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 820px; margin: 0 auto; }

/* ---- Contact page ---- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 1024px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-detail-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.contact-detail-item { display: flex; gap: var(--sp-2); }
.contact-detail-item .icon { color: var(--color-blue); flex-shrink: 0; margin-top: 3px; }
.contact-detail-item h4 { font-size: var(--fs-small); margin-bottom: 2px; }
.contact-detail-item p, .contact-detail-item a { color: var(--color-grey-text); font-size: var(--fs-small); }
.map-placeholder {
  background: var(--color-grey-light); border: 1px dashed var(--color-border); border-radius: var(--radius-card);
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  color: var(--color-grey-text); font-size: var(--fs-small); text-align: center;
}

/* ---- Account ---- */
.account-tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.account-tab { padding: 12px 4px; font-weight: 500; color: var(--color-grey-text); border-bottom: 2px solid transparent; }
.account-tab.is-active { color: var(--color-blue); border-color: var(--color-blue); }

/* ---- Related products ---- */
.related-heading { margin: var(--sp-6) 0 var(--sp-3); font-weight: 600; letter-spacing: -0.01em; }

/* ---- Utility ---- */
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.text-center{text-align:center}
.text-muted{color:var(--color-grey-text)}
.flex-center{display:flex;align-items:center;justify-content:center}

/* ---- Editorial visual break (full-width marketing image, no text baked into the image) ---- */
.editorial-visual { width: 100%; aspect-ratio: 21/9; overflow: hidden; }
.editorial-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 768px) { .editorial-visual { aspect-ratio: 4/3; } }

/* ---- Category hero: real HTML text overlaid on a marketing visual background ---- */
.visual-hero {
  position: relative; min-height: 420px; display: flex; align-items: center;
  background-size: cover; background-position: center; overflow: hidden;
}
.visual-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15,33,64,.94) 0%, rgba(15,33,64,.78) 45%, rgba(15,33,64,.42) 75%, rgba(15,33,64,.22) 100%);
}
.visual-hero .container { position: relative; z-index: 1; }
.visual-hero h1, .visual-hero p { color: var(--color-white); }
.visual-hero p.lead { color: rgba(255,255,255,.88); }
@media (max-width: 768px) {
  .visual-hero { min-height: 320px; }
  .visual-hero::before { background: linear-gradient(180deg, rgba(18,41,77,.78) 0%, rgba(18,41,77,.82) 100%); }
  /* Agriculture hero: intentional mobile focal point — keeps the
     palm fruit and oil cluster centered rather than a blind edge-to-edge crop. */
  .hero--agriculture { background-position: 38% center !important; min-height: 280px; }
}
@media (max-width: 430px) {
  .hero--agriculture { min-height: 240px; }
}

/* ---- Affiliate System ---- */
.demo-data-flag {
  display: inline-block; background: #FBF3E7; color: var(--color-warning); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 5px; margin-bottom: var(--sp-2);
}
.affiliate-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-2); }
@media (max-width: 900px) { .affiliate-steps { grid-template-columns: repeat(2,1fr); } }
.affiliate-step { text-align: center; padding: var(--sp-3); }
.affiliate-step .num { width: 40px; height: 40px; border-radius: 50%; background: var(--color-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto var(--sp-2); }

.stat-cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3); }
@media (max-width: 900px) { .stat-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { .stat-cards-grid { grid-template-columns: 1fr; } }
.stat-mini-card { padding: var(--sp-3); text-align: left; overflow: hidden; }
.stat-mini-card .label { font-size: var(--fs-caption); color: var(--color-grey-text); margin-bottom: 4px; }
.stat-mini-card .value { font-family: var(--font-heading); font-size: clamp(19px, 5vw, 28px); font-weight: 700; color: var(--color-charcoal); overflow-wrap: break-word; }

.affiliate-id-box { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3); background: var(--color-grey-light); border-radius: var(--radius-input); margin-bottom: var(--sp-3); flex-wrap: wrap; gap: var(--sp-2); }
.affiliate-id-box .id-value { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); color: var(--color-blue); }
.status-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-pill.active { background: var(--color-success-bg); color: var(--color-success); }
.status-pill.pending { background: #FBF3E7; color: var(--color-warning); }

.link-generator-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--sp-3); }
.link-generator-row .form-group { flex: 1; min-width: 200px; margin-bottom: 0; }
.generated-link-box { display: flex; gap: 8px; align-items: center; background: var(--color-grey-light); border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 12px; }
.generated-link-box input { flex: 1; min-width: 0; border: none; background: none; font-size: var(--fs-caption); color: var(--color-charcoal); text-overflow: ellipsis; }
.generated-link-box input:focus { outline: none; }
.generated-link-box .btn { flex-shrink: 0; }

.activity-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); table-layout: fixed; }
.activity-table th { text-align: left; font-size: var(--fs-caption); color: var(--color-grey-text); padding: 10px 8px; border-bottom: 1px solid var(--color-border); }
.activity-table td { padding: 12px 8px; border-bottom: 1px solid var(--color-border); overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 640px) { .activity-table { font-size: var(--fs-caption); } .activity-table th, .activity-table td { padding: 8px 4px; } }

.notification-card { display: flex; gap: var(--sp-2); align-items: flex-start; background: var(--color-success-bg); border: 1px solid #CDEBDA; border-radius: var(--radius-card); padding: var(--sp-3); margin-bottom: var(--sp-4); }
.notification-card .notif-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--color-success); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notification-card h4 { font-size: var(--fs-small); margin-bottom: 2px; }
.notification-card p { font-size: var(--fs-caption); color: var(--color-grey-text); margin-bottom: 4px; }

/* ==========================================================================
   HOMEPAGE — EDITORIAL REFINEMENT (v1.7.1)
   Scoped to homepage-only classes; does not alter the shared
   .company-card / .pillar-card / .product-card systems used elsewhere.
   ========================================================================== */

/* Section kicker — shared numbering system (index + hairline + label).
   New homepage-only component; never nests inside the shared .eyebrow
   markup used elsewhere, so other pages are unaffected. */
.section-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--sp-2); }
.section-kicker--center { display: flex; justify-content: center; }
.section-kicker-num { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--color-blue); }
.section-kicker-rule { width: 28px; height: 1px; background: var(--color-border); flex-shrink: 0; }
.section-kicker .eyebrow { display: inline; margin-bottom: 0; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-blue); }
.section-kicker--on-dark .section-kicker-num { color: rgba(255,255,255,.68); }
.section-kicker--on-dark .section-kicker-rule { background: rgba(255,255,255,.3); }
.section-kicker--on-dark .eyebrow { color: rgba(255,255,255,.68); }

/* Our Businesses — the visual centrepiece. Two large editorial columns,
   deliberately offset for asymmetry, each carrying a distinct but
   brand-cohesive photographic treatment; a centre hairline (echoing the
   hero divider) reads the pair as one system. */
.businesses-editorial .section-heading { margin-bottom: var(--sp-6); }

/* Two business stories, stacked full-width and each internally
   asymmetric — the photography leads from alternating sides rather
   than sitting in mirrored twin columns. Column ratios and image
   aspect ratios differ per story on purpose: one wide and
   landscape-led, one tall and portrait-led, so the asymmetry comes
   from the real photography rather than an arbitrary offset. */
.companies-editorial-grid { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: var(--sp-6); }

.company-editorial { display: grid; align-items: center; gap: var(--sp-6); }
/* Healthcare — typography leads on the left, image dominant on the right.
   Export — image dominant on the left, typography on the right. The two
   chapters read as mirrored halves of one editorial spread. */
.company-editorial--healthcare { grid-template-columns: 1fr 1.28fr; }
.company-editorial--healthcare .company-editorial-media { order: 2; }
.company-editorial--healthcare .company-editorial-body { order: 1; }
.company-editorial--export { grid-template-columns: 1.28fr 1fr; }
.company-editorial--export .company-editorial-media { order: 1; }
.company-editorial--export .company-editorial-body { order: 2; }
@media (max-width: 900px) {
  .company-editorial--healthcare, .company-editorial--export { grid-template-columns: 1fr; gap: var(--sp-4); }
  .company-editorial--healthcare .company-editorial-media,
  .company-editorial--healthcare .company-editorial-body,
  .company-editorial--export .company-editorial-media,
  .company-editorial--export .company-editorial-body { order: 0; }
}

.company-editorial-media { position: relative; width: 100%; overflow: hidden; border-radius: 2px; background: var(--color-charcoal); box-shadow: 0 24px 48px -20px rgba(18,30,54,.32); }
.company-editorial--healthcare .company-editorial-media { aspect-ratio: 4/5; }
.company-editorial--export .company-editorial-media { aspect-ratio: 3/2; }
.company-editorial-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.1) contrast(1.05) saturate(1.02); transition: transform 1.1s cubic-bezier(.16,.8,.24,1), filter .6s ease; }
.company-editorial-media::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; transition: opacity .5s ease; background: linear-gradient(200deg, rgba(18,41,77,.30) 0%, rgba(18,41,77,.04) 55%, rgba(8,14,26,.22) 100%); }
.company-editorial:hover .company-editorial-media img { transform: scale(1.035); filter: grayscale(0) contrast(1.05) saturate(1.06); }
.company-editorial:hover .company-editorial-media::after { opacity: .55; }

.company-editorial-body { position: relative; max-width: 460px; }
.company-editorial--healthcare .company-editorial-body { margin-left: auto; }
.company-editorial-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); }
.company-editorial-kicker .rule { width: 32px; height: 1px; display: block; flex-shrink: 0; }
.company-editorial--healthcare .company-editorial-kicker .rule { background: var(--color-blue); }
.company-editorial--export .company-editorial-kicker .rule { background: var(--color-red); }
.company-editorial-index { display: block; font-family: var(--font-heading); font-size: 13px; letter-spacing: .18em; font-weight: 700; }
.company-editorial--healthcare .company-editorial-index { color: var(--color-blue); }
.company-editorial--export .company-editorial-index { color: var(--color-red); }
.company-editorial-body h3 { font-family: var(--font-display); font-size: clamp(27px, 2.8vw, 38px); font-weight: 500; margin-bottom: 10px; letter-spacing: -.01em; line-height: 1.16; }
.company-editorial-tagline { font-family: var(--font-heading); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: var(--sp-3); color: var(--color-blue); }
.company-editorial--export .company-editorial-tagline { color: var(--color-red); }
.company-editorial-desc { color: var(--color-grey-text); font-size: var(--fs-small); line-height: 1.75; margin-bottom: var(--sp-4); }
@media (max-width: 900px) {
  .company-editorial-body, .company-editorial--healthcare .company-editorial-body { max-width: none; margin-left: 0; }
}
@media (max-width: 640px) {
  .company-editorial--healthcare .company-editorial-media,
  .company-editorial--export .company-editorial-media { aspect-ratio: 4/3.3; }
}

/* What We Offer — alternating editorial rows (imagery + copy, no cards) */
.offer-rows { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: var(--sp-5); }
.offer-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.offer-row--reverse .offer-row-media { order: 2; }
.offer-row--reverse .offer-row-copy { order: 1; margin-left: auto; }
@media (max-width: 900px) {
  .offer-row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .offer-row--reverse .offer-row-media, .offer-row--reverse .offer-row-copy { order: 0; margin-left: 0; }
}
.offer-row-media { width: 100%; aspect-ratio: 5/4; overflow: hidden; border-radius: 2px; border: 1px solid var(--color-border); }
.offer-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.offer-row:hover .offer-row-media img { transform: scale(1.03); }
.offer-row-copy { max-width: 440px; }
.offer-row-index { display: block; font-family: var(--font-heading); font-size: 13px; letter-spacing: .18em; color: var(--color-blue); font-weight: 700; margin-bottom: var(--sp-2); }
.offer-row-copy h3 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--sp-2); }
.offer-row-copy p { color: var(--color-grey-text); font-size: var(--fs-body); line-height: 1.7; }

/* Our Commitment — typographic triptych, deliberately card-free.
   Framed by hairlines top and bottom, each value marked with a quiet
   roman numeral rather than an icon. Given its own, more generous
   padding (rather than the shared .section--tight rhythm) so the
   triptych has room to breathe as a considered close to the page,
   not a compressed afterthought under "Our Businesses". */
.commitment-editorial { padding-top: clamp(88px, 10vw, 140px); padding-bottom: clamp(88px, 10vw, 140px); }
.commitment-editorial .container { position: relative; }
.commitment-editorial .section-heading { margin-bottom: 0; }
.commitment-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--color-border); }
@media (max-width: 900px) { .commitment-strip { grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-6); } }
.commitment-item { padding-left: var(--sp-5); border-left: 1px solid var(--color-border); }
.commitment-item:first-child { padding-left: 0; border-left: none; }
@media (max-width: 900px) {
  .commitment-item { padding-left: 0; border-left: none; padding-top: var(--sp-5); border-top: 1px solid var(--color-border); }
  .commitment-item:first-child { padding-top: 0; border-top: none; }
}
.commitment-item-num { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: .04em; color: var(--color-blue); opacity: .55; margin-bottom: var(--sp-3); }
.commitment-item h3 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-3); letter-spacing: -.01em; }
.commitment-item p { color: var(--color-grey-text); font-size: var(--fs-small); line-height: 1.75; max-width: 30ch; }

/* About — asymmetric label + copy grid, editorial rather than centred
   marketing text. A large ghost numeral anchors the label column,
   pure decoration (CSS-generated), no text content added. */
.about-editorial { padding-top: clamp(100px, 12.5vw, 176px); padding-bottom: clamp(100px, 12.5vw, 176px); }
.about-editorial-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--sp-7); align-items: start; position: relative; }
@media (max-width: 900px) { .about-editorial-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .about-editorial-copy { padding-top: 0; } }
.about-editorial-label { position: relative; }
.about-editorial-ghost {
  position: absolute; top: -.56em; left: -.08em; z-index: 0;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(130px, 15vw, 240px);
  line-height: 1; color: var(--color-blue); opacity: .045; pointer-events: none; user-select: none;
}
.about-editorial-label .section-kicker,
.about-editorial-label h2 { position: relative; z-index: 1; }
.about-editorial-label .section-kicker { margin-bottom: var(--sp-3); }
.about-editorial-label .eyebrow { display: inline; font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--color-blue); font-weight: 600; }
.about-editorial-label h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6vw, 88px); letter-spacing: -.02em; line-height: .98; }
.about-editorial-copy { max-width: 600px; position: relative; z-index: 1; padding-top: var(--sp-3); }
.about-editorial-copy p { font-size: var(--fs-body); line-height: 1.8; color: var(--color-grey-text); margin-bottom: var(--sp-4); max-width: 58ch; }
.about-editorial-copy p:last-of-type { margin-bottom: var(--sp-3); }
.about-editorial-copy .btn-text { margin-top: 4px; font-weight: 500; }
.about-lede { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); color: var(--color-charcoal); line-height: 1.52; max-width: 34ch; }
.about-lede::first-letter { font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 2.7em; line-height: .68; float: left; padding-right: 10px; padding-top: 8px; color: var(--color-blue); }
@media (max-width: 640px) { .about-editorial-ghost { display: none; } }
@media (max-width: 640px) { .about-editorial { padding-top: var(--section-pad-mobile); padding-bottom: var(--section-pad-mobile); } }

/* Partner With Us — a photographic closing statement rather than a flat
   colour banner. Base .cta-band / .bg-blue remain untouched so every
   other page using them is unaffected. */
.cta-band--partner { position: relative; padding: clamp(112px, 15vw, 192px) 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.14); }
.cta-band--partner-bg { position: absolute; inset: 0; background-size: cover; background-position: 50% 42%; filter: grayscale(.3) contrast(1.1) brightness(.82); transform: scale(1.04); }
/* Vignette + directional wash in place of the flat diagonal tint — keeps
   every corner of the frame (including bright highlights in the source
   photograph) settled evenly behind the centred type, so it reads as a
   deliberate cinematic close rather than a dark photo with a filter on it. */
.cta-band--partner-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(85% 120% at 50% 45%, rgba(6,12,24,.38) 0%, rgba(10,20,38,.74) 55%, rgba(6,10,20,.94) 100%),
    linear-gradient(150deg, rgba(8,14,26,.85) 0%, rgba(18,41,77,.8) 48%, rgba(8,14,26,.88) 100%);
}
.cta-band--partner .container { position: relative; z-index: 1; }
.cta-band--partner h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.8vw, 60px); letter-spacing: -.015em; margin-bottom: var(--sp-3); text-shadow: 0 1px 24px rgba(0,0,0,.22); }
.cta-band--partner p { max-width: 460px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,.8); font-size: var(--fs-body); line-height: 1.7; text-shadow: 0 1px 16px rgba(0,0,0,.18); }
.cta-band--partner .btn { margin-top: var(--sp-4); font-weight: 600; letter-spacing: .02em; padding: 16px 34px; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .25s ease; }
.cta-band--partner .btn:hover { transform: translateX(3px); }
@media (max-width: 640px) { .cta-band--partner-bg { background-position: 46% 42%; } }

/* Explore Our Products — quiet closing gateway, text-link only */
.gateway-cta-section { border-top: 1px solid var(--color-border); padding-top: clamp(76px, 9vw, 116px); padding-bottom: clamp(76px, 9vw, 116px); }
.gateway-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .01em;
  padding: 10px 6px;
  transition: transform .2s ease;
}
/* A quiet underline that's always faintly present (so the link reads as
   tappable on touch, where :hover never fires) and solidifies on
   hover/focus — replaces the shared .btn-text grow-from-left effect,
   which is invisible at rest and unsuited to a closing gateway link. */
.gateway-cta-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transition: opacity .2s ease, height .2s ease;
}
.gateway-cta-link:hover,
.gateway-cta-link:focus-visible { transform: translateX(2px); }
.gateway-cta-link:hover::after,
.gateway-cta-link:focus-visible::after { opacity: .9; height: 2px; }

/* Featured Products — curated spacing */
.section-featured-products { padding: var(--sp-7) 0; }
.section-featured-products .section-heading { margin-bottom: var(--sp-5); }
@media (max-width: 640px) { .section-featured-products { padding: var(--sp-6) 0; } }

/* ==========================================================================
   HOMEPAGE — CINEMATIC HERO
   Visual-first opening: a single full-viewport image carries the brand.
   Typography is reduced to a micro identifier and one restrained line —
   the two companies are introduced properly in the Businesses chapter
   that follows, not narrated here. Does not alter .hero or any other
   shared component.
   ========================================================================== */
.corporate-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  max-height: 980px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
/* ---- Full-hero slideshow: the COMPLETE hero card is the slideshow canvas.
   Every .hero-slide is one entire, full-bleed hero photograph of a single
   real product — same treatment for every product, no cutout-on-backdrop
   staging and no separate treatment per category — stacked and crossfaded
   as a single unit. There is no fixed background behind a small inset
   window: the whole photographic frame changes together. The shared
   wash/overlay scrim sits above all slides so text legibility and the
   dark cinematic identity stay constant across every slide. ---- */
.corporate-hero-slideshow {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #0a1220; /* prevents any flash between slides while images decode */
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 3.2s cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* The actual product photograph fills the entire hero — a very light
   softening blur plus a slight desaturation/darkening knits every product
   photo (studio or environmental) into one consistent, premium, cinematic
   frame without hiding what the product actually is. */
.hero-slide-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: contrast(1.05) saturate(.94) brightness(.93) blur(1.1px);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active .hero-slide-photo-img { animation: heroSlideSlowZoom 9s cubic-bezier(.2,.6,.3,1) forwards; }
}
@keyframes heroSlideSlowZoom { from { transform: scale(1.045); } to { transform: scale(1); } }

@media (max-width: 640px) {
  .hero-slide-photo-img { object-position: 50% 34%; }
}
/* Brand-tinted wash — knits the source photography into the corporate
   palette so it reads as atmosphere/texture rather than a literal product
   shot. Plain alpha compositing (no blend mode) so the darkening is
   consistent and predictable across every slide, including plain
   white-background product photography. */
.corporate-hero-wash {
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(9,16,32,.42) 0%, rgba(8,13,26,.36) 50%, rgba(5,9,18,.44) 100%);
}
/* Overlay: an even, corner-vignetted scrim rather than a single top/bottom
   fade — removes the bright mid-frame "hot spot" the raw photograph left
   behind and keeps the eye on the type instead of the product clutter.
   Lightened from the original pass so the product imagery reads clearly;
   the bottom-left corner (where the hero copy sits) stays darkest. */
.corporate-hero-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 95% at 26% 88%, rgba(4,8,18,.1) 0%, rgba(4,8,18,.3) 48%, rgba(4,8,18,.46) 100%),
    linear-gradient(180deg, rgba(4,8,18,.22) 0%, rgba(4,8,18,.1) 30%, rgba(4,8,18,.14) 60%, rgba(4,8,18,.38) 100%);
}
.corporate-hero-inner { position: relative; z-index: 1; padding: 0 0 clamp(64px, 9vw, 116px); }
.corporate-hero-content { display: block; max-width: 620px; margin: 0; }
/* Simplified hero copy: the two registered company names, and nothing
   else — no eyebrow, no descriptive line, no marketing paragraph. */
.corporate-hero-brand-name {
  display: block; font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(23px, 2.9vw, 36px); line-height: 1.28; letter-spacing: -.005em;
  color: #fff; max-width: 30ch;
  text-shadow: 0 1px 24px rgba(0,0,0,.22);
}
.corporate-hero-brand-divider {
  display: block; width: 46px; height: 1px; background: rgba(255,255,255,.5);
  margin: clamp(14px, 2vw, 20px) 0;
}
.corporate-hero-scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: rgba(255,255,255,.72);
  font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: color .25s ease;
}
.corporate-hero-scroll:hover { color: #fff; }
.corporate-hero-scroll-line { width: 1px; height: 30px; background: rgba(255,255,255,.42); position: relative; overflow: hidden; }
.corporate-hero-scroll-line::after {
  content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .corporate-hero-scroll-line::after { animation: heroScrollDrip 2.2s ease-in-out infinite; }
}
@keyframes heroScrollDrip { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
@media (max-width: 640px) {
  .corporate-hero { min-height: 82vh; min-height: 82svh; max-height: none; }
  .corporate-hero-inner { padding-bottom: clamp(72px, 16vw, 104px); }
  .corporate-hero-content { max-width: 320px; }
  .corporate-hero-brand-name { font-size: 22px; line-height: 1.32; max-width: 20ch; }
  .corporate-hero-brand-divider { width: 32px; margin: 12px 0; }
  .corporate-hero-scroll { display: none; }
}

/* Simple gateway CTA (Products section) — matches the section-heading
   type scale used elsewhere on the page (Our Businesses / Our Commitment)
   rather than falling back to browser-default h2 sizing. */
.gateway-cta { text-align: center; max-width: 640px; margin: 0 auto; }
.gateway-cta h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; margin-bottom: var(--sp-3); }
.gateway-cta p { color: var(--color-grey-text); max-width: 480px; margin: 0 auto var(--sp-4); line-height: 1.7; }

/* ==========================================================================
   MAIN PRODUCTS PAGE — unified catalogue
   Everything here is scoped under .catalogue-page / .catalogue-* so it can
   only ever match markup on pages/products.html. The shared .card /
   .product-card / .commodity-card / .product-grid / .filter-pill /
   .catalogue-toolbar / .sort-select rules in components.css are reused
   completely unmodified — this block only adds the page's own toolbar
   layout (search box, results count) and a couple of comfort tweaks
   (larger pill tap target) that belong to this page alone.
   ========================================================================== */
.catalogue-page .catalogue-toolbar { align-items: flex-start; }
.catalogue-page .filter-pill { padding: 10px 18px; }

.catalogue-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.catalogue-search { position: relative; display: flex; align-items: center; }
.catalogue-search .icon-search {
  position: absolute; left: 13px; width: 15px; height: 15px;
  color: var(--color-grey-text); pointer-events: none;
}
.catalogue-search input {
  width: 220px; max-width: 100%; height: 44px;
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: 0 14px 0 38px; font-size: var(--fs-caption); color: var(--color-charcoal);
  background: var(--color-white);
}
.catalogue-search input::placeholder { color: var(--color-grey-text); }
.catalogue-search input:focus {
  outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(27,58,107,.12);
}

.catalogue-page .sort-select { height: 44px; }

.catalogue-count { font-size: var(--fs-caption); margin: 0 0 var(--sp-3); }

@media (max-width: 640px) {
  .catalogue-controls { width: 100%; }
  .catalogue-search { flex: 1 1 160px; }
  .catalogue-search input { width: 100%; }
  .catalogue-page .sort-select { flex: 1 1 140px; }
}