/* BioPepSyn Lab identity system: clean white editorial surfaces, logo blue and green. */
:root {
  --brand-green: #157a2e;
  --brand-green-deep: #176f2e;
  --brand-blue: #143a2e;
  --brand-blue-deep: #002f63;
  --navy: var(--brand-blue);
  --navy-light: #edf4fa;
  --ink: #17324d;
  --muted: #5d6f82;
  --paper: #f6f9fc;
  --line: #dce6ef;
  --line-dark: #b8cadb;
  --accent: var(--brand-green);
  --control-border: #b4c5d6;
  --focus-ring: var(--brand-blue);
  --control-radius: 4px;
}

body { color: var(--ink); background: #fff; }
.site-header { background: rgba(255,255,255,.97); border-color: var(--line); }
.brand img { object-fit: contain; }
.desktop-nav > a::after { background: var(--brand-green); }
.desktop-nav > a[aria-current], .mobile-nav a[aria-current], .footer-pages a[aria-current] { color: var(--brand-blue); }
.nav-more-menu { box-shadow: 0 14px 34px rgba(0, 47, 99, .08); }
.nav-more-menu a:hover { background: var(--paper); color: var(--brand-blue); }
.eyebrow, .page-hero .eyebrow, .hero-kicker { color: var(--brand-green-deep); }
.button-primary { color: #fff; background: var(--brand-blue); border-color: var(--brand-blue); }
.button-primary:hover, .button-primary:focus-visible { color: #fff; background: var(--brand-blue-deep); border-color: var(--brand-blue-deep); box-shadow: 0 5px 16px rgba(20, 58, 46, .16); }
.text-link, .inline-link { color: var(--brand-blue); text-decoration-color: #9ab3ce; }
.text-link:hover, .inline-link:hover, .row-link:hover, .row-link:focus-visible { color: var(--brand-green-deep); }
.header-cta { border-color: var(--brand-blue); color: var(--brand-blue); }
.header-cta:hover { background: #edf4fa; }
.menu-toggle { color: var(--brand-blue); }
.mobile-nav { border-color: var(--line); box-shadow: 0 8px 22px rgba(0, 47, 99, .08); }
.nav-active, .breadcrumbs span[aria-hidden="true"] { color: var(--brand-green); }

/* Homepage keeps the supplied vial photograph and adds the logo's blue/green accents. */
.home-page .hero--product {
  color: var(--ink);
  background: #f7f8fb;
}
.home-page .hero--product .hero-content { min-height: min(620px, calc(100svh - 130px)); position: relative; }
.home-page .hero--product .hero-copy { width: auto; }
.home-page .hero--product h1 { color: var(--brand-blue); }
.home-page .hero--product .hero-positioning { color: var(--brand-blue); }
.home-page .hero--product .hero-intro,
.home-page .hero--product .hero-facts dd { color: var(--muted); }
.home-page .hero--product .hero-kicker-rule { background: var(--brand-green); }
.home-page .hero--product .hero-facts { border-color: var(--line); }
.home-page .hero--product .hero-facts > div { border-color: var(--line); }
.home-page .hero--product .hero-facts dt { color: var(--brand-blue); }
.home-page .hero--product .hero-product-media { isolation: isolate; }
.home-page .hero--product .hero-product-media::before { z-index: 1; border-color: rgba(20, 58, 46, .35); }
.home-page .hero--product .hero-product-media::after { z-index: 1; background: var(--brand-green); }
.home-page .hero--product .hero-product-link { z-index: 2; border-color: var(--line); background: #fff; box-shadow: 16px 18px 0 rgba(20, 58, 46, .08); }
.home-page .hero--product .hero-product-link picture { display: block; }
.home-page .hero--product .hero-product-media img { height: auto; aspect-ratio: 2.33 / 1; object-fit: cover; filter: none; }
.home-page .hero--product .hero-product-media figcaption { position: relative; z-index: 2; }
.home-page .hero--product .hero-product-media figcaption span { color: var(--brand-green-deep); }
.home-page .hero--product .hero-product-media figcaption strong { color: var(--brand-blue); }
.home-page .hero-actions .text-link { background: #edf4fa; color: var(--brand-blue); }
.home-page .hero-actions .text-link:hover { background: #e3edf7; }
.home-page .products-section { background: #fff; }
.home-page .home-products-heading { border-color: var(--line); }
.home-page .home-product-image { border-color: var(--line); background: #f4f8fc; }
.home-page .home-product h3 a { color: var(--brand-blue); }
.home-page .evidence-section {
  background-color: #f7fafd;
  background-image: linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)), url("/assets/brand-visuals/47-glass-plane-texture.jpg");
  background-position: center, right bottom;
  background-size: cover, 340px auto;
  background-repeat: no-repeat;
}
.home-page .contact-section {
  background-color: var(--brand-blue);
  background-image: linear-gradient(rgba(20, 58, 46, .88), rgba(20, 58, 46, .88)), url("/assets/brand-visuals/49-square-brand-art.jpg");
  background-position: center, right center;
  background-size: cover, min(44vw, 560px) auto;
  background-repeat: no-repeat;
}
.home-page .contact-section .eyebrow { color: #bfe5c8; }
.home-page .contact-layout > div > p:not(.eyebrow) { color: #e3edf7; }
.home-page .contact-actions .text-link { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.home-page .contact-actions .button-primary { color: #fff; background: var(--brand-green-deep); border-color: var(--brand-green-deep); }

/* Inner-page heroes use the same open, paper-white composition across every route. */
.inner-page .page-hero {
  min-height: 390px;
  align-items: center;
  color: var(--ink);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.inner-page .page-hero-media { left: 53%; width: 47%; background-color: #fff; background-position: center right; background-size: cover; background-repeat: no-repeat; }
.inner-page .page-hero-media { overflow: hidden; }
.inner-page .page-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: none; }
.inner-page .page-hero-overlay { display: block; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 40%, rgba(255,255,255,.42) 72%, rgba(255,255,255,0) 100%); }
.inner-page .page-hero-content { width: min(1280px, calc(100% - 96px)); padding-block: 58px; }
.inner-page .page-hero h1 { max-width: 700px; color: var(--brand-blue); }
.inner-page .page-hero .eyebrow { color: var(--brand-green-deep); }
.inner-page .page-lede { color: #536b81; }
.inner-page .page-hero .text-link, .inner-page .page-hero .inline-link { color: var(--brand-blue); }
.inner-page .page-hero::before { display: none; }
.inner-page .page-hero-content { z-index: 2; }
.inner-page .page-hero .page-actions { position: relative; z-index: 2; }
.inner-page .inner-section-dark {
  color: var(--ink);
  background: #f5f9fd;
  background-image: linear-gradient(rgba(245,249,253,.9), rgba(245,249,253,.9)), url("/assets/brand-visuals/48-sequence-light-texture.jpg");
  background-position: center, right bottom;
  background-size: cover, 320px auto;
  background-repeat: no-repeat;
  border-color: var(--line);
}
.inner-page .inner-section-dark .inner-copy > p:not(.eyebrow),
.inner-page .inner-section-dark .inner-list-row p,
.inner-page .inner-section-dark .page-lede { color: var(--muted); }
.inner-page .inner-section-dark .eyebrow,
.inner-page .inner-section-dark .row-number { color: var(--brand-green-deep); }
.inner-page .inner-section-dark .inner-list,
.inner-page .inner-section-dark .inner-list-row { border-color: var(--line); }
.inner-page .inner-section-dark .inline-link,
.inner-page .inner-section-dark .text-link { color: var(--brand-blue); }
.inner-page .page-contact {
  color: #fff;
  background: var(--brand-blue);
  border: 0;
}
.inner-page .page-contact .eyebrow { color: #bfe5c8; }
.inner-page .page-contact p:not(.eyebrow) { color: #e3edf7; }
.inner-page .page-contact .text-link { color: #fff; }
.inner-page .page-contact .button-primary { color: #fff; background: var(--brand-green-deep); border-color: var(--brand-green-deep); }
.inner-page .breadcrumbs { color: #6a7c8e; }
.inner-page .breadcrumbs a { color: var(--brand-blue); text-decoration-color: #bfd0e0; }
.inner-page .page-hero::after { content: ""; position: absolute; z-index: 1; right: 4%; bottom: 9%; width: min(17vw, 220px); aspect-ratio: 1; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: .12; pointer-events: none; }
.inner-page .hero-image-credit,
.inner-page .about-hero-photo-note { display: block; padding: 5px 8px; border: 1px solid rgba(20, 58, 46, .12); background: rgba(255, 255, 255, .9); color: var(--brand-blue); }
.inner-page .hero-image-credit a { color: var(--brand-blue); }
.page-type-product-detail .page-hero-media { left: 58%; width: 42%; background: #fff; }
.page-type-product-detail .page-hero-media img { display: block !important; width: 100%; height: 100%; padding: 30px; object-fit: contain; filter: none; }
.page-type-product-detail .page-hero::before { display: none; }
.inner-page.page-type-contact .inquiry-section {
  position: relative;
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 53%, rgba(255,255,255,.82) 100%), url("/assets/brand-visuals/12-contact-hero.jpg");
  background-position: center, right top;
  background-size: cover, min(48vw, 660px) auto;
  background-repeat: no-repeat;
}
.page-type-contact .inquiry-section > .page-width { position: relative; z-index: 1; }
.brand-motion-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: .74; pointer-events: none; }
.hero-product-media .brand-motion-video { z-index: 1; }
.brand-motion-frame { position: absolute; inset: 0 0 auto auto; z-index: 0; width: min(46vw, 620px); height: 400px; overflow: hidden; pointer-events: none; }

/* Page-specific illustrations are selected from the approved, logo-referenced library. */
body[data-brand-visual="02-catalog-overview"] .page-hero-media { background-image: url("/assets/brand-visuals/02-catalog-overview.jpg"); }
body[data-brand-visual="03-about-brand"] .page-hero-media { background-image: url("/assets/brand-visuals/03-about-brand.jpg"); }
body[data-brand-visual="04-quality-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/04-quality-hero.jpg"); }
body[data-brand-visual="05-factory-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/05-factory-hero.jpg"); }
body[data-brand-visual="06-supply-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/06-supply-hero.jpg"); }
body[data-brand-visual="07-custom-synthesis-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/07-custom-synthesis-hero.jpg"); }
body[data-brand-visual="08-oem-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/08-oem-hero.jpg"); }
body[data-brand-visual="09-fulfillment-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/09-fulfillment-hero.jpg"); }
body[data-brand-visual="10-documentation-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/10-documentation-hero.jpg"); }
body[data-brand-visual="11-resources-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/11-resources-hero.jpg"); }
body[data-brand-visual="12-contact-hero"] .page-hero-media { background-image: url("/assets/brand-visuals/12-contact-hero.jpg"); }
body[data-brand-visual="13-products-index"] .page-hero-media { background-image: url("/assets/brand-visuals/13-products-index.jpg"); }
body[data-brand-visual="14-category-metabolic"] .page-hero-media { background-image: url("/assets/brand-visuals/14-category-metabolic.jpg"); }
body[data-brand-visual="15-category-tissue"] .page-hero-media { background-image: url("/assets/brand-visuals/15-category-tissue.jpg"); }
body[data-brand-visual="16-category-signaling"] .page-hero-media { background-image: url("/assets/brand-visuals/16-category-signaling.jpg"); }
body[data-brand-visual="17-category-cellular"] .page-hero-media { background-image: url("/assets/brand-visuals/17-category-cellular.jpg"); }
body[data-brand-visual="18-category-neuro"] .page-hero-media { background-image: url("/assets/brand-visuals/18-category-neuro.jpg"); }
body[data-brand-visual="19-category-skin"] .page-hero-media { background-image: url("/assets/brand-visuals/19-category-skin.jpg"); }
body[data-brand-visual="20-category-solutions"] .page-hero-media { background-image: url("/assets/brand-visuals/20-category-solutions.jpg"); }
body[data-brand-visual="21-category-cosmetic"] .page-hero-media { background-image: url("/assets/brand-visuals/21-category-cosmetic.jpg"); }
body[data-brand-visual="22-category-other-materials"] .page-hero-media { background-image: url("/assets/brand-visuals/22-category-other-materials.jpg"); }
body[data-brand-visual="23-category-raw-materials"] .page-hero-media { background-image: url("/assets/brand-visuals/23-category-raw-materials.jpg"); }
body[data-brand-visual="24-batch-record-review"] .page-hero-media { background-image: url("/assets/brand-visuals/24-batch-record-review.jpg"); }
body[data-brand-visual="25-hplc-review"] .page-hero-media { background-image: url("/assets/brand-visuals/25-hplc-review.jpg"); }
body[data-brand-visual="26-synthesis-methods"] .page-hero-media { background-image: url("/assets/brand-visuals/26-synthesis-methods.jpg"); }
body[data-brand-visual="27-supplier-checklist"] .page-hero-media { background-image: url("/assets/brand-visuals/27-supplier-checklist.jpg"); }
body[data-brand-visual="28-moq-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/28-moq-guide.jpg"); }
body[data-brand-visual="29-pricing-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/29-pricing-guide.jpg"); }
body[data-brand-visual="30-global-fulfillment-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/30-global-fulfillment-guide.jpg"); }
body[data-brand-visual="31-oem-packaging-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/31-oem-packaging-guide.jpg"); }
body[data-brand-visual="32-coa-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/32-coa-guide.jpg"); }
body[data-brand-visual="33-research-supplier-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/33-research-supplier-guide.jpg"); }
body[data-brand-visual="34-document-fields-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/34-document-fields-guide.jpg"); }
body[data-brand-visual="35-procurement-brief-guide"] .page-hero-media { background-image: url("/assets/brand-visuals/35-procurement-brief-guide.jpg"); }

body[data-brand-detail="36-sample-preparation-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/36-sample-preparation-abstract.jpg"); }
body[data-brand-detail="37-sequence-study"] .page-hero::after { background-image: url("/assets/brand-visuals/37-sequence-study.jpg"); }
body[data-brand-detail="38-vial-format-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/38-vial-format-abstract.jpg"); }
body[data-brand-detail="39-packaging-format-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/39-packaging-format-abstract.jpg"); }
body[data-brand-detail="40-modular-materials"] .page-hero::after { background-image: url("/assets/brand-visuals/40-modular-materials.jpg"); }
body[data-brand-detail="41-accessory-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/41-accessory-abstract.jpg"); }
body[data-brand-detail="42-record-fields-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/42-record-fields-abstract.jpg"); }
body[data-brand-detail="43-production-planning-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/43-production-planning-abstract.jpg"); }
body[data-brand-detail="44-order-route-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/44-order-route-abstract.jpg"); }
body[data-brand-detail="45-contact-brief-abstract"] .page-hero::after { background-image: url("/assets/brand-visuals/45-contact-brief-abstract.jpg"); }
body[data-brand-detail="32-coa-guide"] .page-hero::after { background-image: url("/assets/brand-visuals/32-coa-guide.jpg"); }

/* Factory uses the supplied production photograph as its only hero media.
   Keep the abstract library out of this evidence-led route. */
.page-type-factory .page-hero-media { background-image: none; }
.page-type-factory .page-hero::after { display: none; }
.page-type-factory .hero-image-credit {
  right: max(32px, calc((100vw - 1200px) / 2));
  bottom: 18px;
  padding: 5px 8px;
  border: 1px solid rgba(20, 58, 46, .14);
  background: rgba(255, 255, 255, .92);
  color: var(--brand-blue);
  font-size: 10px;
}

.site-footer { background: #fff; border-top: 1px solid var(--line); }
.footer-bottom { border-color: var(--line); }
.floating-whatsapp { background: var(--brand-green); box-shadow: 0 8px 24px rgba(20, 58, 46, .2); }
.floating-whatsapp:hover { background: var(--brand-green-deep); }
.floating-whatsapp::after { background: var(--brand-blue); }
.home-page .home-capacity-note { background: #eff6fb; }
.home-page .home-capacity-note p { color: #294b6b; }
.directory-procurement-strip,
.home-page .home-product-image,
.page-type-category .inner-section:first-of-type { background-color: #f6f9fc; }
.catalog-product-media,
.product-detail-image,
.home-product-image,
.page-hero figure { border-color: var(--line); }

@media (max-width: 1100px) {
  .inner-page .page-hero-media { left: 47%; width: 53%; }
  .inner-page .page-hero::before { width: 54%; }
  .inner-page .page-hero-content { width: calc(100% - 48px); }
}
@media (max-width: 760px) {
  .home-page .hero--product { background: #fff; }
  .home-page .hero--product .hero-content { min-height: 0; padding-block: 35px 48px; }
  .home-page .hero--product .hero-product-media { width: min(100%, 330px); margin-top: 34px; }
  .home-page .hero--product .hero-product-link { box-shadow: 10px 12px 0 rgba(20, 58, 46, .08); }
  .home-page .contact-section { background-position: center, right bottom; background-size: cover, min(72vw, 320px) auto; }
  .inner-page .page-hero { min-height: 0; align-items: stretch; flex-direction: column; padding-top: 0; }
  .inner-page .page-hero-content { order: 0; width: calc(100% - 40px); padding-block: 32px 28px; }
  .inner-page .page-hero-media { position: relative; inset: auto; order: 1; display: block; width: 100%; height: clamp(185px, 54vw, 290px); }
  .page-type-product-detail .page-hero-media { width: 100%; height: clamp(210px, 64vw, 360px); }
  .page-type-product-detail .page-hero-media img { padding: 20px 34px; }
  .inner-page .page-hero::before { display: none; }
  .inner-page .page-hero-overlay { display: none; }
  .inner-page .page-hero::after { right: 20px; bottom: 28px; width: 104px; }
  .inner-page .page-hero h1 { font-size: clamp(30px, 8vw, 36px); }
  .inner-page .page-hero .page-actions { margin-top: 22px; }
  .inner-page .inner-section-dark { background: #f6f9fc; }
  .inner-page .inner-section-dark { background-image: linear-gradient(rgba(246,249,252,.92), rgba(246,249,252,.92)), url("/assets/brand-visuals/48-sequence-light-texture.jpg"); background-size: cover, 220px auto; }
  .page-type-contact .inquiry-section {
    background-image: linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.94)), url("/assets/brand-visuals/50-vertical-brand-art.jpg");
    background-position: center, right top;
    background-size: cover, min(72vw, 360px) auto;
  }
  .brand-motion-frame { width: 100%; height: 250px; }
  .home-page .evidence-section { background-size: cover, 220px auto; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-motion-video { display: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* 2026-10-25 visual close: give Supply and Contact their mapped abstract
   studies a deliberate stage without confusing them with evidence media. */
.inner-page.page-type-supply .page-hero {
  min-height: 292px;
  align-items: center;
  background: #fff;
}
.inner-page.page-type-supply .page-hero-overlay {
  z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 43%, rgba(255,255,255,.24) 76%, rgba(255,255,255,0) 100%);
}
.inner-page.page-type-supply .page-hero-content { position: relative; z-index: 2; padding-block: 48px 44px; }
.inner-page.page-type-supply .page-hero::after { display: none; }

.inner-page.page-type-contact .inquiry-section {
  overflow: hidden;
  background-color: #fff;
  background-image: none;
}
.page-type-contact .inquiry-visual-study {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(48%, 700px);
  height: 360px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.25) 58%, rgba(255,255,255,.06) 100%),
    url("/assets/brand-visuals/12-contact-hero.jpg");
  background-position: center, right top;
  background-size: cover, cover;
  background-repeat: no-repeat;
  opacity: .86;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}
.page-type-contact .inquiry-visual-study::after {
  content: "";
  position: absolute;
  inset: 24px 28px auto auto;
  width: 108px;
  height: 74px;
  border-top: 1px solid rgba(0,63,131,.28);
  border-right: 1px solid rgba(29,150,58,.32);
}
.page-type-contact .inquiry-visual-study span {
  position: absolute;
  top: 20px;
  right: 28px;
  color: var(--brand-blue);
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-type-contact .inquiry-section > .page-width { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .inner-page.page-type-supply .page-hero {
    min-height: 260px;
    align-items: stretch;
  }
  .inner-page.page-type-supply .page-hero-content { padding-block: 30px 32px; }
  .page-type-contact .inquiry-visual-study {
    width: 100%;
    height: 250px;
    opacity: .62;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.76) 58%, rgba(255,255,255,.98) 100%),
      url("/assets/brand-visuals/12-contact-hero.jpg");
    background-position: center, right top;
    background-size: cover, auto 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 54%, transparent 100%);
  }
  .page-type-contact .inquiry-visual-study::after { inset: 16px 20px auto auto; width: 76px; height: 54px; }
  .page-type-contact .inquiry-visual-study span { top: 13px; right: 20px; font-size: 8px; }
}

/* Editorial text templates need a quiet visual anchor too. These studies are
   generated brand atmosphere only; they never stand in for a facility, item,
   test record or certification. Keeping the artwork in a restrained rail
   preserves the information-first layout while giving the text pages the same
   visual signature as the evidence-led routes. */
.editorial-text-page .page-hero,
.product-overview .page-hero {
  min-height: 336px;
  align-items: center;
  color: var(--ink);
  background: #f1f6f4;
  border-bottom: 1px solid var(--line);
}
.editorial-text-page .page-hero-content,
.product-overview .page-hero-content {
  padding-block: 58px 52px;
}
.editorial-text-page .page-hero .eyebrow,
.product-overview .page-hero .eyebrow { color: var(--brand-green-deep); }
.editorial-text-page .page-hero h1,
.product-overview .page-hero h1 {
  position: relative;
  max-width: 780px;
  color: var(--brand-blue);
}
.editorial-text-page .page-lede,
.product-overview .page-lede { color: var(--muted); }
.editorial-text-page .page-hero::before,
.product-overview .page-hero::before {
  display: block;
  content: "BRAND VISUAL STUDY  ·  VISUAL-ONLY";
  position: absolute;
  top: 26px;
  right: max(28px, calc((100vw - 1280px) / 2));
  z-index: 2;
  color: var(--brand-blue);
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.editorial-text-page .page-hero::after,
.product-overview .page-hero::after {
  display: block;
  right: max(20px, calc((100vw - 1280px) / 2));
  bottom: -8px;
  width: min(31vw, 430px);
  aspect-ratio: 1.56 / 1;
  opacity: .76;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}
body.editorial-text-page[data-brand-visual="33-research-supplier-guide"] .page-hero::after {
  background-image: url("/assets/brand-visuals/33-research-supplier-guide.jpg");
}
body.editorial-text-page[data-brand-visual="11-resources-hero"] .page-hero::after {
  background-image: url("/assets/brand-visuals/11-resources-hero.jpg");
}
body.editorial-text-page[data-brand-visual="34-document-fields-guide"] .page-hero::after {
  background-image: url("/assets/brand-visuals/34-document-fields-guide.jpg");
}
body.editorial-text-page[data-brand-visual="35-procurement-brief-guide"] .page-hero::after {
  background-image: url("/assets/brand-visuals/35-procurement-brief-guide.jpg");
}
body.product-overview[data-brand-visual="13-products-index"] .page-hero::after {
  background-image: url("/assets/brand-visuals/13-products-index.jpg");
}

@media (max-width: 760px) {
  .editorial-text-page .page-hero,
  .product-overview .page-hero {
    min-height: 282px;
    align-items: center;
  }
  .editorial-text-page .page-hero-content,
  .product-overview .page-hero-content { padding-block: 34px 30px; }
  .editorial-text-page .page-hero::before,
  .product-overview .page-hero::before {
    top: 16px;
    right: 20px;
    font-size: 8px;
  }
  .editorial-text-page .page-hero::after,
  .product-overview .page-hero::after {
    right: -28px;
    bottom: -18px;
    width: 230px;
    opacity: .48;
  }
}

/* Simplified product pages: two short reviews, no related upsell, no rating badge. */
.product-related, .product-review-link { display: none !important; }
.product-customer-reviews .customer-review:nth-child(n+3) { display: none !important; }
.product-customer-reviews .customer-feedback-note:first-of-type { display: none !important; }
.footer-more{display:inline}.footer-more summary{display:inline;color:var(--muted);font-size:11px;font-weight:600;text-decoration:underline;cursor:pointer}.footer-more a{margin-left:10px;font-size:11px}

/* 2026-10 editorial direction: warm bone paper, deep forest ink, brass hairlines. */
.home-page .hero--product {
  background: #f4f0e7;
  border-bottom: 1px solid #dcd8cc;
}
.home-page .hero--product .hero-content { min-height: min(560px, calc(100svh - 130px)); }
.home-page .hero--product h1 {
  color: #102a22;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 600;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.home-page .hero--product .hero-positioning { color: #2f5d45; font-weight: 650; }
.home-page .hero--product .hero-kicker { color: #5e6d63; }
.home-page .hero--product .hero-kicker-rule { background: #b08a4f; }
.home-page .hero--product .hero-facts { border-color: #d8d2c4; }
.home-page .hero--product .hero-facts > div { border-color: #d8d2c4; }
.home-page .hero--product .hero-facts dt { color: #143a2e; }
.home-page .hero--product .hero-product-link { border-color: #d8d2c4; background: #fffdf8; box-shadow: 16px 18px 0 rgba(20,58,46,.08); }
.home-page .hero--product .hero-product-media::before { border-color: rgba(176,138,79,.45); }
.home-page .hero--product .hero-product-media::after { background: #b08a4f; }
.home-page .hero-actions .text-link { background: #e9e3d5; color: #143a2e; }
.home-page .hero-actions .text-link:hover { background: #dfd7c5; }
.site-header { background: #fffdf8; border-bottom-color: #dcd8cc; }
.products-section, .simple-order { background: #fffdf8; }
.home-product-image { background: #f4f0e7; border-color: #dcd8cc; }
.home-page .simple-order h2 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 600; color: #102a22; }
.simple-order-steps span { color: #b08a4f; }
@media (max-width: 760px) {
  .home-page .hero--product { background: #f4f0e7; }
  .home-page .hero--product h1 { font-size: clamp(40px, 11vw, 54px); }
}

/* Compact, tactile store widgets */
.home-page .hero-trust{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 26px;padding:0;list-style:none}
.home-page .hero-trust li{padding:7px 10px;border:1px solid #d8d2c4;border-radius:999px;background:#fffdf8;color:#4c5c51;font-size:11.5px;font-weight:650;line-height:1.2}
.home-page .hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:0}
.home-page .hero-facts>div{padding:10px 12px;border:1px solid #d8d2c4!important;border-radius:8px;background:#fffdf8}
.home-page .hero-facts dt{font-size:20px;line-height:1.1}
.home-page .hero-facts dd{font-size:10.5px}
.simple-order-steps>div{padding:16px;border:1px solid #d8d2c4;border-radius:8px;background:#fffdf8}
.simple-order-steps>div:hover{border-color:#b08a4f}
@media(max-width:760px){.home-page .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}