:root {
    --navy: #304D8B;
    --ink: #1B2A45;
    --gold: #F2B01E;
    --wash: #EEF2F8;
    --white: #FFFFFF;
    --hairline: #D8DEE8;
    --display-font: 'Fraunces', serif;
    --body-font: 'Public Sans', sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--body-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; }

  .wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ---- Nav bar ---- */
  .case-nav {
    background: var(--navy);
    color: var(--white);
  }
  .case-nav .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  .case-nav a {
    text-decoration: none;
    color: var(--white);
    opacity: 0.9;
    transition: opacity 0.15s ease;
  }
  .case-nav a:hover { opacity: 1; }
  .case-nav .back::before { content: "← "; }
  .case-nav .next::after { content: " →"; }

  /* ---- Specimen label (signature element) ---- */
  .specimen-label {
    display: inline-block;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    padding: 6px 0;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
  }

  /* ---- Header ---- */
  .case-header {
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--hairline);
  }
  .case-header h1 {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: clamp(32px, 4vw, 48px);
    margin: 18px 0 8px;
    color: var(--ink);
  }
  .case-header .byline {
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: var(--navy);
    margin: 0;
  }

  /* ---- Main content grid ---- */
  .case-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    padding: 48px 0 64px;
  }
  .case-body.no-media { grid-template-columns: 1fr; }

  .media-col .lead-image {
    width: 100%;
    object-fit: contain;
    background: var(--wash);
    display: block;
    border: 1px solid var(--hairline);
  }

  .thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
  .thumb-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--wash);
    display: block;
    border: 1px solid var(--hairline);
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  .thumb-grid img:hover { border-color: var(--gold); }
  .thumb-grid figure { margin: 0; }
  /* Some thumbs link to a real case-study/news page and/or carry a short
     WP caption (e.g. "Before"/"After") — added for Vulpex's in-use strip,
     the first product page with this richer source data. */
  .thumb-grid a { display: block; text-decoration: none; }

  /* Nylon Gossamer IWM "In Use" gallery: real Elementor structure is a
     65.258/34.742 two-column split (confirmed via _inline_size, not the
     misleading legacy _column_size=50/50) -- 2x2 native-aspect photo grid
     alongside one standalone photo. Border-radius values (29px/36px) and
     the 4-photo grid order/captions are real source data; gap spacing is
     a deliberate modernisation choice (source's own spacing setting was
     0px but relied on WP-default gallery.css margins we're not reusing).
     Captions reuse the shared .thumb-caption look for consistency, not
     the old theme's two mismatched raw caption styles. */
  .iwm-gallery-split {
    display: grid;
    grid-template-columns: 65.258% 34.742%;
    gap: 24px;
    margin-top: 8px;
  }
  .iwm-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .iwm-gallery-grid figure,
  .iwm-gallery-standalone {
    margin: 0;
  }
  .iwm-gallery-grid img,
  .iwm-gallery-standalone img {
    width: 100%;
    display: block;
    border: 1px solid var(--hairline);
  }
  .iwm-gallery-grid img { border-radius: 29px; }
  .iwm-gallery-standalone img { border-radius: 36px; }
  /* .lead-figure wraps a news article's hero photo when the old site gave it
     a [caption] label (post 794 only -- see LEAD_IMAGE_CAPTIONS in
     generate_news.py). Reuses the shared .thumb-caption look for consistency,
     same choice as the IWM gallery above. The 32px bottom margin moves here
     from the img so the caption stays attached to its photo. */
  .lead-figure {
    margin: 0 0 32px;
  }
  .thumb-grid .thumb-caption,
  .iwm-gallery-grid .thumb-caption,
  .iwm-gallery-standalone .thumb-caption,
  .lead-figure .thumb-caption {
    display: block;
    font-size: 12px;
    color: var(--ink);
    text-align: center;
    margin-top: 4px;
  }
  @media (max-width: 860px) {
    .iwm-gallery-split { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .iwm-gallery-grid { grid-template-columns: 1fr; }
  }

  .text-col p {
    margin: 0 0 18px;
    font-size: 16px;
    color: var(--ink);
  }
  .text-col .maker-link {
    display: inline-block;
    margin-bottom: 28px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
  }

  .product-tag {
    background: var(--wash);
    border: 1px solid var(--hairline);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
  }
  .product-tag img {
    width: 44px;
    height: auto;
    flex-shrink: 0;
  }
  .product-tag .tag-text .kicker {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 2px;
  }
  .product-tag .tag-text .product-name {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
  }
  /* News articles wrap .product-tag in a link through to the tagged
     product page now that the cross-linking/slug scheme is resolved
     (build plan Section 4) — plain passthrough styling, .product-tag
     itself still owns the visual chrome. */
  .product-tag-link { display: block; text-decoration: none; color: inherit; }

  /* ---- Related strip ---- */
  .related-strip {
    background: var(--wash);
    padding: 48px 0 56px;
  }
  .related-strip h2 {
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    text-align: center;
    margin: 0 0 28px;
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }
  .related-grid .card {
    background: var(--white);
    border: 1px solid var(--hairline);
    text-align: center;
    overflow: hidden;
  }
  .related-grid .card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--wash);
    display: block;
  }
  .related-grid .card .card-title {
    font-size: 13px;
    padding: 10px 8px;
    color: var(--ink);
  }

  /* ---- Responsive ---- */
  @media (max-width: 860px) {
    .case-body { grid-template-columns: 1fr; gap: 32px; }
    .related-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 480px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .thumb-grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }

  /* Visible keyboard focus */
  a:focus-visible, img:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  /* =====================================================================
     SITE CHROME — shared header + footer for core/product/gallery/news
     pages. NOT used on gallery case-study detail pages, which keep the
     lighter .case-nav back/next bar defined above.
     ===================================================================== */

  .site-header {
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 32px;
    position: relative;
  }
  .site-logo {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 21px;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .site-logo .mark { color: var(--gold); }

  .nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
  .nav-toggle {
    display: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline);
    color: var(--navy);
  }
  .nav-toggle svg { width: 16px; height: 16px; }

  .site-nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px 22px;
  }
  .site-nav-links a {
    display: inline-block;
    font-family: var(--body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .site-nav-links a:hover { color: var(--navy); }
  .site-nav-links a[aria-current="page"] {
    color: var(--navy);
    border-bottom-color: var(--gold);
  }

  @media (max-width: 980px) {
    .nav-toggle { display: flex; }
    .site-nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      background: var(--white);
      border-bottom: 1px solid var(--hairline);
      padding: 8px 32px 20px;
      gap: 4px;
    }
    .nav-toggle-input:checked ~ .site-nav .site-nav-links { display: flex; }
    .site-nav-links a { padding: 10px 0; border-bottom: 1px solid var(--wash); }
  }

  .site-footer {
    background: var(--ink);
    color: var(--white);
    padding: 52px 0 26px;
  }
  .site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
  }
  .site-footer h3 {
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 14px;
  }
  .site-footer p {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
  }
  .site-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
  }
  .site-footer a:hover { color: var(--white); }
  .site-footer .footer-brand {
    font-family: var(--display-font);
    font-size: 20px;
    color: var(--white);
    margin: 0 0 10px;
  }
  .footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }
  .footer-social a {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .footer-social a:hover { border-color: var(--gold); background: rgba(242, 176, 30, 0.1); }
  .footer-social svg { width: 15px; height: 15px; }
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 40px;
    padding-top: 18px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
  }
  @media (max-width: 860px) {
    .site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  }

  /* =====================================================================
     PAGE HEADER — lighter-weight variant of .case-header for core pages
     that don't carry a byline (About, Contact, FAQs, Sustainability,
     Testimonials, News hub).
     ===================================================================== */

  .page-header {
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--hairline);
    background: var(--wash);
  }
  .page-header h1 {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 44px);
    margin: 16px 0 0;
    color: var(--ink);
  }
  .page-header .lede {
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: var(--navy);
    margin: 10px 0 0;
    max-width: 620px;
  }

  /* =====================================================================
     RICH TEXT CONTENT PAGE — About, Contact, FAQs, Sustainability
     ===================================================================== */

  .content-body { padding: 48px 0 72px; }
  .content-body .wrap { max-width: 760px; }
  .rich-text h2 {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 24px;
    color: var(--navy);
    margin: 40px 0 14px;
  }
  .rich-text h2:first-child { margin-top: 0; }
  .rich-text p { margin: 0 0 18px; font-size: 16px; color: var(--ink); }
  .rich-text strong { color: var(--navy); }
  .rich-text a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
  }
  .rich-text img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--hairline);
    margin: 8px 0 28px;
  }
  .rich-text ul, .rich-text ol { margin: 0 0 18px; padding-left: 22px; }
  .rich-text li { margin-bottom: 8px; font-size: 16px; }

  /* FAQ-specific: each Q/A pair is a paragraph led by a bold question --
     add breathing room and a hairline separator between pairs. */
  .faq-list .rich-text p {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--hairline);
  }
  .faq-list .rich-text p:last-child { border-bottom: none; }
  .faq-list .rich-text strong {
    display: block;
    font-family: var(--display-font);
    font-size: 17px;
    margin-bottom: 4px;
  }

  /* Contact page: address/detail card reusing the .product-tag surface
     language from the gallery template for visual consistency. */
  .contact-card {
    background: var(--wash);
    border: 1px solid var(--hairline);
    padding: 24px 26px;
    margin-top: 8px;
  }
  .contact-card .kicker {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 8px;
  }
  .contact-card p { margin: 0 0 4px; font-size: 15px; }

  /* =====================================================================
     HOME PAGE
     ===================================================================== */

  .hero-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-carousel::-webkit-scrollbar { display: none; }
  .hero-carousel .slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
  }
  .hero-carousel img {
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    display: block;
  }
  .hero-carousel .slide-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 28px 32px;
    background: linear-gradient(to top, rgba(27, 42, 69, 0.75), transparent);
    color: var(--white);
  }
  .hero-carousel .slide-caption .specimen-label {
    border-color: var(--gold);
    color: var(--white);
    background: none;
  }
  .hero-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 14px 0;
    background: var(--ink);
  }
  .hero-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
  }
  .hero-dots span:first-child { background: var(--gold); }

  .section-intro {
    text-align: center;
    padding: 56px 0 8px;
  }
  .section-intro .specimen-label { margin-bottom: 14px; }
  .section-intro p {
    max-width: 620px;
    margin: 14px auto 0;
    font-size: 16px;
    color: var(--ink);
  }

  .product-strip {
    padding: 32px 0 8px;
  }
  .product-strip .strip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .product-strip .product-card {
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
  }
  .product-strip .product-card:hover { border-color: var(--gold); }
  .product-strip .product-card img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .product-strip .product-card .product-name {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
  }

  .gallery-preview { padding: 24px 0 64px; }
  .gallery-preview .related-grid { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 860px) {
    .product-strip .strip-grid { grid-template-columns: 1fr; }
    .gallery-preview .related-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 480px) {
    .gallery-preview .related-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* =====================================================================
     TESTIMONIALS PAGE
     ===================================================================== */

  .video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 40px 0;
  }
  .video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border: 1px solid var(--hairline);
  }
  .video-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }

  .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 8px 0 64px;
  }
  .testimonial-card {
    background: var(--wash);
    border: 1px solid var(--hairline);
    padding: 26px 24px;
    position: relative;
  }
  .testimonial-card::before {
    content: "\201C";
    font-family: var(--display-font);
    font-size: 48px;
    color: var(--gold);
    line-height: 1;
    display: block;
    margin-bottom: 4px;
  }
  .testimonial-card p {
    font-size: 15px;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .testimonial-card .attribution {
    font-family: var(--display-font);
    font-weight: 600;
    font-style: italic;
    font-size: 15px;
    color: var(--navy);
  }
  .testimonial-card .attribution span {
    display: block;
    font-family: var(--body-font);
    font-style: normal;
    font-weight: 400;
    font-size: 12.5px;
    color: var(--ink);
    opacity: 0.65;
    margin-top: 2px;
  }
  @media (max-width: 860px) {
    .video-grid, .testimonial-grid { grid-template-columns: 1fr; }
  }

  /* =====================================================================
     NEWS HUB (listing) PAGE
     ===================================================================== */

  .news-list { padding: 8px 0 64px; }
  .news-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .news-item:first-child { padding-top: 0; }
  .news-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--wash);
    border: 1px solid var(--hairline);
    display: block;
  }
  .news-item .news-date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 6px;
  }
  .news-item h2 {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 10px;
  }
  .news-item h2 a { color: var(--ink); text-decoration: none; }
  .news-item h2 a:hover { color: var(--navy); }
  .news-item p.excerpt {
    font-size: 15px;
    color: var(--ink);
    margin: 0 0 12px;
  }
  .news-item .read-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
  }
  @media (max-width: 700px) {
    .news-item { grid-template-columns: 1fr; }
  }

  /* =====================================================================
     PRODUCT PAGES
     ===================================================================== */

  /* Single-link variant of .case-nav — same navy bar, but products only
     have a "back to listing" link, no next/previous pair. */
  .case-nav.single-link .wrap { justify-content: flex-start; }

  .product-hero {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    padding: 48px 0;
  }
  .product-hero > * {
    min-width: 0;
  }
  .product-hero .product-media {
    background: var(--wash);
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 32px;
  }
  .product-hero .product-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .product-hero .product-media.no-image {
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.6;
  }
  .product-hero .product-text .rich-text p:first-child { margin-top: 0; }

  .size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 8px 0 40px;
  }
  .size-card {
    border: 1px solid var(--hairline);
    padding: 20px 22px;
  }
  .size-card .size-name {
    display: block;
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .size-card p {
    font-size: 14.5px;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .size-card .order-min {
    display: block;
    font-size: 12px;
    color: var(--navy);
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-top: 8px;
  }
  .size-card img {
    display: block;
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    margin-bottom: 10px;
  }

  .product-section { padding: 8px 0 8px; }
  .product-section > .wrap > h2.section-heading {
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0 0 20px;
  }

  @media (max-width: 860px) {
    .product-hero { grid-template-columns: 1fr; }
    .size-grid { grid-template-columns: 1fr; }
  }

  /* =====================================================================
     INDEX / HUB PAGES — Our Products (111, 7 tiles) and
     Customer Gallery (132, 28 tiles). Both source from the same
     Elementor "image-box" widget, but get different tile treatments:
     Products have a title + descriptive blurb worth reading before you
     click; Gallery tiles are caption-only browsing, so they reuse the
     plain photo-card language already established by .related-grid
     (related products / home gallery preview) rather than a new pattern.
     ===================================================================== */

  .products-index { padding: 8px 0 64px; }
  .products-index-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .product-index-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
  }
  .product-index-card:hover { border-color: var(--gold); }
  .product-index-card .product-index-media {
    background: var(--wash);
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
  .product-index-card .product-index-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .product-index-card .product-index-name {
    display: block;
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    margin: 0 0 8px;
  }
  .product-index-card .product-index-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .product-index-card .product-index-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
  }

  /* Gallery hub reuses .related-grid/.card as-is (see PRODUCT PAGES /
     HOME sections above) — just a wider grid since this is the full
     listing, not a teaser strip. */
  .gallery-index { padding: 8px 0 64px; }
  .gallery-index .related-grid { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 860px) {
    .products-index-grid { grid-template-columns: 1fr; }
    .gallery-index .related-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 480px) {
    .gallery-index .related-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* =====================================================================
     PUBLICATIONS HUB — 12-tile grid (reuses .related-grid/.card as-is,
     same plain photo-card language as Customer Gallery) plus the
     lightbox shell. Stage 1: shell only, no flip-book viewer yet.
     ===================================================================== */

  .publications-index { padding: 8px 0 64px; }
  .publications-index .related-grid { grid-template-columns: repeat(4, 1fr); }

  .pub-tile {
    display: block;
    width: 100%;
    border: 1px solid var(--hairline);
    background: var(--white);
    padding: 0;
    font: inherit;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
  }
  .pub-tile:hover { border-color: var(--gold); }
  .pub-tile img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }
  .pub-tile .card-title {
    font-size: 13px;
    padding: 10px 8px;
    color: var(--ink);
  }

  .pub-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(27, 42, 69, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
  }
  .pub-lightbox[hidden] { display: none; }
  .pub-lightbox-panel {
    background: var(--white);
    width: 100%;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
  }
  .pub-lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    padding: 4px 8px;
  }

  @media (max-width: 860px) {
    .publications-index .related-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 480px) {
    .publications-index .related-grid { grid-template-columns: repeat(2, 1fr); }
  }

  .pub-viewer-title {
    font-family: var(--display-font);
    font-weight: 600;
    font-size: 20px;
    color: var(--ink);
    margin: 0 40px 16px 0;
  }
  .pub-viewer-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  .pub-btn {
    background: var(--white);
    border: 1px solid var(--hairline);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }
  .pub-btn:hover { border-color: var(--gold); }
  .pub-page-indicator {
    font-size: 13px;
    color: var(--navy);
    min-width: 90px;
    text-align: center;
  }
  .pub-book {
    display: flex;
    justify-content: center;
  }

  .pub-page-group {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--navy);
  }
  .pub-page-input {
    width: 40px;
    text-align: center;
    font-size: 13px;
    border: 1px solid var(--hairline);
    padding: 6px 4px;
  }
  .pub-page-total { color: var(--navy); }
  .pub-page-error {
    text-align: center;
    font-size: 12px;
    color: #b3261e;
    margin: 4px 0 0;
  }

  .pub-lightbox-panel:fullscreen {
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
  }
  .pub-lightbox-panel:fullscreen .pub-book {
    flex: 1;
  }

  .pub-lightbox-panel { overflow: auto; }
  .pub-viewer-controls { flex-wrap: wrap; }
  .pub-book-zoom-layer {
    transition: transform 0.15s ease;
  }
  .pub-zoom-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
  }
  .pub-zoom-level {
    font-size: 12px;
    color: var(--navy);
    min-width: 38px;
    text-align: center;
  }
  .pub-btn-text {
    width: auto;
    padding: 0 10px;
    font-size: 13px;
  }

  .pub-book-zoom-layer { position: relative; }
  .pub-pan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    touch-action: none;
  }