/* Technical skeleton only — not the final UI Specification V1.1. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; color: #222; background: #fff; }

/* Global container system: backgrounds are full-bleed; content lives in .section-container.
   Standard 1240px (max-width includes padding); horizontal padding 16 / 24 / 32px. */
.section-container { box-sizing: border-box; width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
/* Long-text blocks INSIDE the standard container: Reading 960px / Narrow 720px, left-aligned with the heading. */
.section-measure { box-sizing: border-box; width: 100%; }
.section-measure--reading { max-width: 960px; }
.section-measure--narrow { max-width: 720px; }
@media (min-width: 768px) { .section-container { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1280px) { .section-container { padding-left: 32px; padding-right: 32px; } }

/* Header: Minimal Agricultural Editorial. Full-bleed white, content in the global container.
   Desktop (>=1100px): logo left, navigation right, CTA last. Below: logo + Menu toggle, nav opens as a panel. */
:root { --color-brown: #5D2710; --color-terracotta: #B0613F; --color-green: #66A504; --color-green-cta: #477A03; --color-green-cta-hover: #3B6803; --color-cream: #F8F3EA; --color-cream-text: #EBDCCB; --color-terracotta-light: #E3B79B; --color-white-warm: #FFFDF9; --header-height: 80px; }
.site-header { position: relative; z-index: 10; background: #fff; border-bottom: 1px solid #E4D6C3; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.site-header .brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; text-decoration: none; }
.brand-logo { display: block; width: auto; max-width: 100%; height: 44px; }
.site-nav ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.site-nav li a { display: flex; align-items: center; min-height: 44px; padding: 0 0.25rem; font-weight: 500; color: var(--color-brown); text-decoration: none; border-bottom: 1px solid #F0E8DB; }
.site-nav li a:hover { color: var(--color-terracotta); }
.site-cta { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 1rem; padding: 0 1.25rem; border-radius: 4px; background: var(--color-green-cta); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-cta:hover { background: var(--color-green-cta-hover); }
.nav-toggle { display: none; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--color-brown); border-radius: 4px; background: #fff; color: var(--color-brown); font: inherit; font-weight: 600; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; content: ""; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }
.site-header a:focus-visible, .nav-toggle:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 2px; }
.js .nav-toggle { display: inline-flex; }
@media (max-width: 359px) { .brand-logo { height: 36px; } }
@media (max-width: 1099px) {
    .site-header-inner { flex-wrap: wrap; }
    .site-nav { flex: 1 0 100%; padding-bottom: 1rem; }
    .js .site-nav:not(.is-open) { display: none; }
}
@media (min-width: 1100px) {
    .site-header-inner { min-height: var(--header-height); }
    .brand-logo { height: 56px; }
    .js .nav-toggle { display: none; }
    .site-nav { display: flex; align-items: center; gap: 1.5rem; }
    .site-nav ul { flex-direction: row; gap: 0.25rem 1.25rem; }
    .site-nav li a { border-bottom: 0; padding: 0 0.125rem; font-size: 0.9375rem; }
    .nav-mobile-only { display: none; }
    .site-cta { margin-top: 0; }
}

.section { min-height: min(40vh, 420px); padding-top: 3rem; padding-bottom: 3rem; border-bottom: 1px solid #eee; scroll-margin-top: 1rem; }
.section h2 { margin: 0; }

/* Footer: full-bleed #B0613F, cream type on the container axis. Row 1: wordmark + section links; thin divider; row 2: description + copyright. Stacked and left-aligned on mobile. */
.site-footer { padding-top: 2rem; padding-bottom: 2rem; background: #B0613F; color: #FFFDF9; }
.site-footer .section-container { display: flex; flex-direction: column; gap: 1.25rem; }
.site-footer p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.footer-row { display: flex; flex-direction: column; gap: 0.75rem; }
.site-footer .brand { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 600; color: #FFFDF9; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-nav a:focus-visible { outline: 3px solid #FFFDF9; outline-offset: 2px; text-decoration: underline; }
.footer-row--bottom { padding-top: 1.25rem; border-top: 1px solid rgba(255, 253, 249, 0.4); }
.footer-desc, .footer-copy { color: rgba(255, 253, 249, 0.92); }
@media (min-width: 768px) {
    .footer-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .footer-row--bottom { align-items: flex-start; }
    .footer-copy { text-align: right; }
}

/* Floating quick-contact group: fixed at the right edge; --fa-lift (set by floating-actions.js) keeps it above the footer; below the drawer and About popup. */
.floating-actions { position: fixed; right: max(0.75rem, env(safe-area-inset-right)); bottom: calc(1rem + var(--fa-lift, 0px)); z-index: 40; display: flex; flex-direction: column; gap: 0.625rem; }
.floating-action, .floating-top { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 48px; height: 48px; padding: 0; font: inherit; color: #fff; border: 2px solid #FFFDF9; border-radius: 50%; box-shadow: 0 2px 6px rgba(40, 16, 6, 0.3); cursor: pointer; text-decoration: none; }
.floating-action svg, .floating-top svg { display: block; flex: none; }
.floating-action img { display: block; flex: none; width: 36px; height: 36px; max-width: none; object-fit: contain; }
.floating-action--phone { background: var(--color-green-cta); }
.floating-action--zalo { background: var(--color-brown); }
.floating-action--messenger { background: #B0613F; }
.floating-top { color: var(--color-brown); background: var(--color-cream); border-color: var(--color-brown); }
.floating-action--phone:hover { background: var(--color-green-cta-hover); }
.floating-action--zalo:hover { background: #4a1f0c; }
.floating-action--messenger:hover { background: #8f4c30; }
.floating-top:hover { background: #fff; }
.floating-action:focus-visible, .floating-top:focus-visible { outline: 3px solid var(--color-brown); outline-offset: 3px; box-shadow: 0 0 0 3px #FFFDF9; }
.floating-top[hidden] { display: none; }
.floating-actions.is-in-contact .floating-action { display: none; }
@media (max-width: 767px) { .floating-actions { gap: 0.5rem; } }
/* Hero (CMS-14B-1): with an image it is a full-width photographic background (the CMS <img>, absolutely positioned, object-fit: cover,
   subject kept to the right) under a warm-white gradient that keeps the brown copy readable; without an image it stays a warm-white text hero.
   Below it the benefit strip in #5D2710. Content only is editable. */
.section-hero { min-height: 0; padding: 0; background: #FFFDF9; color: var(--color-brown); border-bottom: 0; }
.hero-stage { position: relative; display: flex; align-items: center; isolation: isolate; overflow: hidden; background: #FFFDF9; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.hero-copy { position: relative; z-index: 2; min-width: 0; overflow-wrap: anywhere; }
.hero-eyebrow { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--color-terracotta); }
.hero-headline { margin: 0 0 1rem; font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-brown); }
.hero-subheadline { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; color: var(--color-terracotta); }
.hero-description { max-width: 36rem; margin: 0 0 1.75rem; font-size: 1.0625rem; color: #4a3a30; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.5rem; border: 2px solid var(--color-brown); border-radius: 4px; text-decoration: none; font-weight: 700; }
.btn-primary { background: var(--color-green-cta); border-color: var(--color-green-cta); color: #fff; }
.btn-primary:hover { background: var(--color-green-cta-hover); border-color: var(--color-green-cta-hover); }
.btn-secondary { background: transparent; color: var(--color-brown); }
.btn-secondary:hover { background: var(--color-cream); }
.btn:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 2px; }
.hero-grid--text .hero-copy { max-width: 52rem; }

/* Image hero: the figure is the background of .hero-stage, the gradient sits between it and the copy. */
.hero-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; margin: 0; }
.hero-image { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 73% 50%; }
.hero-stage--image { align-items: flex-start; min-height: 36rem; }
.hero-stage--image::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 253, 249, 0.95) 0%, rgba(255, 253, 249, 0.9) 56%, rgba(255, 253, 249, 0.3) 80%, rgba(255, 253, 249, 0) 100%); } }
.hero-stage--image .hero-description { color: #3d2c22; }
.hero-stage--image .btn-secondary { background: rgba(255, 253, 249, 0.9); }
.hero-stage--image .btn-secondary:hover { background: #fff; }

/* Four-value strip: icon + label, #5D2710 band directly below the hero. Mobile 2 x 2, desktop 4 equal columns with separators. */
.hero-strip { background: var(--color-brown); color: var(--color-cream); }
.hero-benefits { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.hero-benefits li { display: flex; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.75rem 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; border-top: 1px solid rgba(248, 243, 234, 0.2); }
.hero-benefits li:first-child { border-top: 0; }
.hero-benefits__icon { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--color-cream-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-benefits__label { min-width: 0; }
@media (min-width: 360px) {
    .hero-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
    .hero-benefits li:nth-child(2) { border-top: 0; }
}
@media (min-width: 768px) {
    .hero-grid { padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .hero-stage--image { align-items: center; min-height: 34rem; }
    .hero-stage--image::before { background: linear-gradient(90deg, rgba(255, 253, 249, 0.95) 0%, rgba(255, 253, 249, 0.88) 42%, rgba(255, 253, 249, 0.4) 68%, rgba(255, 253, 249, 0) 88%); }
    .hero-stage--image .hero-copy { max-width: 34rem; }
    .hero-image { object-position: 80% 50%; }
}
@media (min-width: 1100px) {
    .hero-grid { padding-top: 4rem; padding-bottom: 4rem; }
    .hero-stage--image { min-height: clamp(35rem, 44vw, 40rem); }
    .hero-stage--image .hero-copy { max-width: 36rem; }
    .hero-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
    .hero-benefits li { justify-content: center; min-height: 80px; padding: 1.25rem 1rem; border-top: 0; border-left: 1px solid rgba(248, 243, 234, 0.2); }
    .hero-benefits li:first-child { border-left: 0; }
}

/* Product Collection (Section 02): Natural Precision — browns #5D2710 / #B0613F on white and cream. */
/* Section background is full-bleed; content sits in the global .section-container. */
.section-products { background: #F8F3EA; color: #5D2710; }
.section-products h2 { margin: 0 0 2rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; }
/* Heading block: optional eyebrow, the H2, optional subline. Its own bottom margin is the gap to the products. */
.products-heading { margin: 0 0 2rem; }
.products-heading h2 { margin: 0 0 0.75rem; overflow-wrap: anywhere; }
.products-heading > :last-child { margin-bottom: 0; }
.products-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: none; overflow-wrap: anywhere; }
.products-subline { max-width: 44rem; margin: 0; font-size: 1.0625rem; line-height: 1.7; color: #4a3a30; overflow-wrap: anywhere; }

/* Shared media box (also used inside the drawer as .product-media--detail; sized per context below). */
.product-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: #EFE6D8; border-radius: 4px; }
.product-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.product-media--empty { background: #EFE6D8; }

/* CMS-14B-2: Featured frames follow the source proportions (shape + fit classes are set in PHP; the drawer's .product-media--detail
   keeps its own 4:3 box). Fit = the whole picture is shown (contain, 3% breathing room); fill = it already matches the frame, so cover trims almost nothing. */
.product-media--portrait { aspect-ratio: 4 / 5; }
.product-media--square { aspect-ratio: 1 / 1; }
.product-media--landscape { aspect-ratio: 4 / 3; }
.product-media--wide { aspect-ratio: 3 / 2; }
.product-media--fit { padding: 3%; }
.product-media--fill img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.product-name { margin: 0; overflow-wrap: anywhere; line-height: 1.3; }

.product-detail-trigger { font: inherit; font-weight: 600; padding: 0.5rem 0.9rem; border: 2px solid #B0613F; border-radius: 4px; background: transparent; color: #B0613F; cursor: pointer; }
.product-detail-trigger:disabled { border-color: #D9C3B1; color: #8A6A58; background: transparent; cursor: not-allowed; }
.product-detail-trigger--primary:enabled { background: var(--color-green-cta); border-color: var(--color-green-cta); color: #fff; }   /* green only on the primary CTA */
.product-detail-trigger--primary:enabled:hover { background: var(--color-green-cta-hover); border-color: var(--color-green-cta-hover); }
.product-detail-trigger--primary:disabled { background: #EFE6D8; }
.product-detail-trigger:focus-visible { outline: 3px solid #5D2710; outline-offset: 2px; }

/* Featured: one editorial block. Mobile: image first, then text. Desktop: image 55% / text 45%, text top-aligned. */
.product-featured { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 0 0 2rem; padding: 1rem; background: #fff; border: 1px solid #E4D3C0; border-radius: 8px; }
.product-featured-body { min-width: 0; }
.product-label { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #B0613F; }
.product-featured .product-name { margin-bottom: 0.75rem; font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.2; }
.product-summary { margin: 0 0 1.25rem; max-width: 36rem; overflow-wrap: anywhere; }
.product-featured .product-detail-trigger { min-height: 44px; padding: 0.625rem 1.5rem; }
/* Featured picture: shown whole and prominent, but a tall frame is capped so the block never grows taller than the viewport. */
.product-featured .product-media { width: 100%; margin-left: auto; margin-right: auto; }
.product-featured .product-media--empty { aspect-ratio: 4 / 3; }
.product-featured .product-media--portrait { max-width: 16rem; }
.product-featured .product-media--square { max-width: 20rem; }

/* Grid: 1 column under 360px, 2 columns 360-899px, 3 columns from 900px. Cards in a row stretch to equal height. */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.product-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; padding: 0.6rem; background: #fff; border: 1px solid #E4D3C0; border-radius: 8px; }
.product-card .product-name { font-size: 0.95rem; font-weight: 600; }
/* Grid cards share one square outer region so a row has one rhythm whatever the proportions; the picture inside is always shown whole. */
.product-card .product-media { aspect-ratio: 1 / 1; background: #F6F1E8; }
.product-card .product-media--empty { background: #F6F1E8; }
.product-card .product-detail-trigger { min-height: 44px; margin-top: auto; align-self: flex-start; padding: 0.5rem 0.9rem; font-size: 0.875rem; }

@media (max-width: 359px) {
    .product-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
    /* Featured (desktop): picture panel 45% / content 55%, content centred beside it. The panel keeps one proportion for every picture and
       the picture is shown whole inside it (contain, never cropped or stretched), so the card stays compact (about 440px at 1440px). */
    .product-featured { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; gap: 2.5rem; padding: 1.5rem; }
    .product-featured .product-media { aspect-ratio: 5 / 4; max-width: none; margin: 0; padding: 4%; background: #F6F1E8; }
    .product-featured .product-media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
    .product-featured-body { padding-top: 0; }
}
@media (min-width: 900px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    .product-card { padding: 0.75rem; }
    .product-card .product-name { font-size: 1.05rem; }
}

/* Product detail drawer (CMS-05B-2): slides in from the right on desktop, full-screen on mobile. */
html.drawer-open, html.drawer-open body { overflow: hidden; }
.product-drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; display: flex; justify-content: flex-end; }
.product-drawer[hidden] { display: none; }
.product-drawer__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(93, 39, 16, 0.35); opacity: 0; transition: opacity 0.24s ease; }
.product-drawer__panel { position: relative; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; background: #fff; color: #5D2710; box-shadow: -8px 0 24px rgba(93, 39, 16, 0.18); transform: translateX(100%); transition: transform 0.24s ease; }
.product-drawer.is-open .product-drawer__backdrop { opacity: 1; }
.product-drawer.is-open .product-drawer__panel { transform: translateX(0); }
.product-drawer__bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid #E4D3C0; background: #fff; }
.product-drawer__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #B0613F; }
.product-drawer__close { min-height: 44px; padding: 0.5rem 1rem; font: inherit; font-weight: 600; color: #B0613F; background: #fff; border: 2px solid #B0613F; border-radius: 4px; cursor: pointer; }
.product-drawer__body { flex: 1 1 auto; min-height: 0; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; }

.product-detail { overflow-wrap: anywhere; }
.product-detail .product-media { aspect-ratio: 4 / 3; }
.product-detail__name { margin: 1.25rem 0 0.5rem; font-size: clamp(1.4rem, 4vw, 1.75rem); line-height: 1.2; }
.product-detail__lead { margin: 0 0 1rem; font-weight: 600; }
.product-detail__text p, .product-detail__block p { margin: 0; }
.product-detail__block { margin-top: 1.5rem; }
.product-detail__block h3 { margin: 0 0 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #B0613F; }
.product-detail__specs { margin: 0; }
.product-detail__specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; padding: 0.6rem 0; border-top: 1px solid #EFE6D8; }
.product-detail__specs dt { font-weight: 600; }
.product-detail__specs dd { margin: 0; }

@media (min-width: 768px) {
    .product-drawer__panel { width: 560px; max-width: 100%; }
    .product-drawer__bar { padding: 0.75rem 1.5rem; }
    .product-drawer__body { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .product-drawer__backdrop, .product-drawer__panel { transition: none; }
}

/* Benefits (Section 03): compact, full-bleed #5D2710, content in the global container. Desktop (>=900px): text part (eyebrow, heading,
   divider, intro, wide image) 55% / list of benefits 45%; below that one column: eyebrow, heading, intro, image, list. The image is always
   a wide frame with square corners (cover). No animation. Text colours on the brown: #F8F3EA headings, #EBDCCB body, #E3B79B eyebrow and
   icons (all >=6.5:1); #B0613F is for lines only. */
.section-benefits { min-height: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; background: #5D2710; color: #EBDCCB; border-bottom: 0; }
.benefits-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.benefits-text, .benefit-list { min-width: 0; }
.benefits-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; color: #E3B79B; overflow-wrap: anywhere; }
.section-benefits h2 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.01em; color: #F8F3EA; }
.benefits-intro { max-width: 36rem; margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.7; overflow-wrap: anywhere; }
.benefits-text > :last-child { margin-bottom: 0; }
.benefits-media { margin: 0; overflow: hidden; background: #4a1f0c; aspect-ratio: 16 / 9; }
.benefits-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Without a list the picture is the only other element: keep it a sensible size instead of the full container width. */
.benefits-layout--text .benefits-media { max-width: 40rem; }

.benefit-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(248, 243, 234, 0.2); }
.benefit-item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0; padding: 1.125rem 0; border-top: 1px solid rgba(248, 243, 234, 0.2); }
.benefit-item__icon { display: block; width: 2.25rem; height: 2.25rem; fill: none; stroke: #E3B79B; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.benefit-item__body { min-width: 0; overflow-wrap: anywhere; }
.benefit-item__title { margin: 0; font-size: 1.1875rem; line-height: 1.3; color: #F8F3EA; }
.benefit-item__detail { margin: 0.375rem 0 0; font-size: 1rem; line-height: 1.6; }

@media (min-width: 768px) {
    .section-benefits { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
@media (min-width: 900px) {
    .benefits-layout { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 3.5rem; align-items: center; }
    .benefits-layout--text { grid-template-columns: minmax(0, 1fr); }
    .benefits-media { aspect-ratio: 2 / 1; }
}
/* Applications (Section 04): warm-white full-bleed, content in the global container. Image-led cards: a 4:3 panel (picture shown
   whole on a neutral ground) over title + description; thin borders, no shadow, numbering, icon, CTA or animation. Columns follow the
   item count: <768 one; 768-899 two; 900-1099 three for 3 items, 2 x 2 for 4; >=1100 four for 4, three for 3. */
.section-applications { min-height: 0; padding-top: 3rem; padding-bottom: 3rem; background: var(--color-white-warm); color: var(--color-brown); border-bottom: 0; }
.section-applications h2 { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; }
.applications-intro { max-width: 40rem; margin: 0 0 2.5rem; font-size: 1.0625rem; line-height: 1.7; color: #4a3a30; }
.application-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.application-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid #E4D6C3; border-radius: 8px; }
.application-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: #F6F1E8; }
.application-media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.application-media--fill img { width: 100%; height: 100%; object-fit: cover; }
.application-body { padding: 1.25rem; overflow-wrap: anywhere; }
.application-title { margin: 0; font-size: 1.25rem; line-height: 1.3; color: var(--color-brown); }
.application-description { margin: 0.625rem 0 0; font-size: 1rem; line-height: 1.6; color: #4a3a30; }
.application-grid--n1 { max-width: 28rem; }
@media (min-width: 768px) {
    .section-applications { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .application-grid { gap: 1.5rem; }
    .application-grid--n2, .application-grid--n3, .application-grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .application-grid--n2 { max-width: 50rem; }
}
@media (min-width: 900px) {
    .application-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .application-grid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Split sections (05 Brand Story, 06 Quality): editorial two columns from 900px. The image column runs the full
   height of the section and reaches the viewport edge (object-fit: cover); the text column keeps the global
   container's left/right edge, so the section grows with its text. Stacked on mobile. The section title is not
   shown as a label: the eyebrow sits above the headline (the H2). No card, gradient, shadow or animation. */
.section-brand-story, .section-quality { container-type: inline-size; min-height: 0; padding: 0; border-bottom: 0; --story-gutter: 16px; --story-edge: max(var(--story-gutter), calc((100cqw - 1240px) / 2 + var(--story-gutter))); }
@media (min-width: 768px) { .section-brand-story, .section-quality { --story-gutter: 24px; } }
@media (min-width: 1280px) { .section-brand-story, .section-quality { --story-gutter: 32px; } }
.story-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.brand-story, .quality { display: grid; grid-template-columns: minmax(0, 1fr); }
.brand-story__copy, .quality-copy { box-sizing: border-box; min-width: 0; padding: 3rem var(--story-edge); overflow-wrap: anywhere; }
.brand-story__media, .quality-media { min-width: 0; margin: 0; }
.brand-story__frame, .quality-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.brand-story__frame img, .quality-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Brand Story (Section 05): full-bleed #5D2710. Text left; from 900px the image column runs the full section height to the right viewport edge (cover, via the
   shared split rules); below 900px text first, then the image across the full width. The shared split rules (padding from --story-edge, grid, frame) are reused as they were. */
.section-brand-story { background: var(--color-brown); color: var(--color-cream-text); }
.brand-story__frame { background: #4a1f0c; }
.brand-story__eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; color: var(--color-terracotta-light); }
.section-brand-story .brand-story__headline { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-cream); }
.brand-story__description { max-width: 36rem; margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; }
.brand-story__more { margin: 1.75rem 0 0; }
/* The button needs JavaScript (it opens the About Us popup), so it is shown only under .js. */
.brand-story__cta { display: none; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.5rem; font: inherit; font-weight: 700; color: #fff; background: var(--color-green-cta); border: 2px solid var(--color-green-cta); border-radius: 4px; cursor: pointer; }
.js .brand-story__cta { display: inline-flex; }
.brand-story__cta:hover { background: var(--color-green-cta-hover); border-color: var(--color-green-cta-hover); }
.brand-story__cta:focus-visible { outline: 3px solid var(--color-cream); outline-offset: 2px; }

/* Quality Commitments (Section 06): warm cream, brown type, terracotta accents. Image column LEFT, full section height to the left viewport edge from 900px (shared split
   rules); image first on narrow screens, shown at its natural proportions across the full width. Right column: heading, divider, description and the commitments as a 2 x 2 grid
   with circular 01-04 markers (CSS counter). */
.section-quality { background: var(--color-cream); color: var(--color-brown); }
.quality-frame { background: #EFE6D8; }
.quality-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; }
.section-quality .quality-headline { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; }
.quality-description { max-width: 36rem; margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.7; }
.quality-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2rem; margin: 0; padding: 0; list-style: none; counter-reset: quality; }
.quality-item { min-width: 0; margin: 0; counter-increment: quality; }
.quality-item::before { content: counter(quality, decimal-leading-zero); display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2.75rem; height: 2.75rem; margin-bottom: 0.75rem; font-size: 1rem; font-weight: 700; line-height: 1; color: #fff; background: var(--color-terracotta); border-radius: 50%; }
.quality-item__body { min-width: 0; }
.quality-item__title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.quality-item__text { margin: 0.375rem 0 0; font-size: 1rem; line-height: 1.6; }
.quality:not(.quality--image) .quality-copy { max-width: 56rem; }
@media (max-width: 767px) {
    /* Phones: one horizontal row per commitment, marker left, text right, aligned at the top. */
    .quality-list { gap: 1.25rem; }
    .quality-item { display: flex; align-items: flex-start; gap: 1rem; }
    .quality-item::before { flex: none; margin-bottom: 0; }
}
@media (min-width: 768px) {
    .quality-list--n2, .quality-list--n3, .quality-list--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .quality-item { display: flex; align-items: flex-start; gap: 1rem; }
    .quality-item::before { flex: none; margin-bottom: 0; }
}
/* Below 900px the image keeps its natural proportions across the full width (very tall pictures are capped and cropped). */
@media (max-width: 899px) {
    .brand-story__frame, .quality-frame { aspect-ratio: auto; }
    .brand-story__frame img, .quality-frame img { height: auto; max-height: 34rem; }
}

@media (min-width: 768px) {
    .brand-story__copy, .quality-copy { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}
@media (min-width: 900px) {
    .brand-story--image, .quality--image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .brand-story__media, .quality-media { position: relative; min-height: 26rem; }
    .brand-story__frame, .quality-frame { position: absolute; inset: 0; aspect-ratio: auto; }
    .brand-story--image .brand-story__copy { padding-right: 4rem; align-self: center; }
    .quality--image .quality-copy { padding-left: 4rem; align-self: center; }
    /* Quality: 40% image / 60% content. */
    .section-quality .quality--image { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (min-width: 900px) and (max-width: 1199px) {
    .quality--image .quality-copy { padding-left: 2.5rem; padding-right: 2rem; }
    .quality--image .quality-list { column-gap: 1.5rem; }
}
/* About Us dialog (opened from Brand Story): centred modal up to 900px on desktop, near full-screen on mobile, the
   text scrolls inside. Cream panel, brown text; no gradient or animation. */
html.about-open, html.about-open body { overflow: hidden; }
.about-dialog { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 0; background: rgba(40, 16, 6, 0.6); }
.about-dialog[hidden] { display: none; }
.about-dialog__panel { position: relative; display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; background: var(--color-cream); color: var(--color-brown); outline: none; }
.about-dialog__body { flex: 1 1 auto; min-height: 0; padding: 3.5rem 1.25rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.about-dialog__close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font: inherit; font-size: 1.75rem; line-height: 1; color: var(--color-brown); background: var(--color-cream); border: 2px solid var(--color-brown); border-radius: 4px; cursor: pointer; }
.about-dialog__close:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 2px; }
.about-dialog__body:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: -3px; }
.about-dialog h2 { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; color: var(--color-brown); }
.about-dialog h2::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: 0.75rem; background: var(--color-terracotta); }
.about-dialog__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 1.5rem; object-fit: cover; border-radius: 8px; background: #EFE6D8; }
.about-dialog__text { max-width: 40rem; }
.about-dialog__text p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; }
@media (min-width: 768px) {
    .about-dialog { padding: 2rem; }
    .about-dialog__panel { height: auto; max-width: 900px; max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); border-radius: 8px; }
    .about-dialog__body { padding: 3.5rem 3rem 2rem; }
}
/* Contact & Quotation (Section 09): full-bleed #5D2710 background, content in the global container.
   Only presentation: form markup, names, ids, token and honeypot are untouched. */
.section-contact { min-height: 0; padding-top: 3rem; padding-bottom: 5rem; background: #5D2710; color: #EBDCCB; border-bottom: 0; }
.contact-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-terracotta-light); }   /* #E3B79B on #5D2710 (terracotta #B0613F is too dark here) */
.section-contact .contact-headline { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; color: #F8F3EA; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.contact-info { min-width: 0; overflow-wrap: anywhere; }
.contact-intro { margin: 0 0 1.5rem; max-width: 32rem; font-size: 1.0625rem; line-height: 1.6; }
.contact-details { margin: 0; max-width: 32rem; border-bottom: 1px solid rgba(248, 243, 234, 0.25); }
.contact-details > div { padding: 0.875rem 0; border-top: 1px solid rgba(248, 243, 234, 0.25); }
.contact-details dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #E3B79B; }
.contact-details dd { margin: 0.25rem 0 0; font-size: 1.0625rem; color: #F8F3EA; }
.contact-details a { color: inherit; text-decoration: none; }
.contact-details a:hover { color: #E3B79B; text-decoration: underline; text-underline-offset: 4px; }
.contact-details a:focus-visible { color: #E3B79B; outline: 3px solid #E3B79B; outline-offset: 3px; text-decoration: underline; text-underline-offset: 4px; }

.contact-form-card { min-width: 0; padding: 1.25rem; background: #F8F3EA; color: #5D2710; border: 1px solid #E4D6C3; border-radius: 8px; }
.quote-form__title { margin: 0 0 1.25rem; font-size: 1.375rem; line-height: 1.3; color: #5D2710; }
.quote-form .field { margin-bottom: 1.125rem; }
.quote-form label { display: block; margin-bottom: 0.375rem; font-size: 0.9375rem; font-weight: 600; color: #5D2710; }
.quote-form input, .quote-form select, .quote-form textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 44px; padding: 0.625rem 0.75rem; font: inherit; color: #222; background: #fff; border: 1px solid #8F7157; border-radius: 6px; }
.quote-form select { padding-right: 2rem; }
.quote-form textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.quote-form input:hover, .quote-form select:hover, .quote-form textarea:hover { border-color: #5D2710; }
.quote-form input:focus-visible, .quote-form select:focus-visible, .quote-form textarea:focus-visible { outline: 3px solid #B0613F; outline-offset: 1px; border-color: #5D2710; }
.quote-form [aria-invalid="true"] { border-color: #9B2C1D; border-width: 2px; }
.quote-required { margin: 0 0 1rem; font-size: 0.875rem; color: #5D2710; }
.field-error { margin: 0.375rem 0 0; font-size: 0.875rem; font-weight: 600; color: #9B2C1D; }
.form-alert { margin: 0 0 1.25rem; padding: 0.75rem 1rem; color: #7A1F14; background: #FBEDEA; border: 1px solid #9B2C1D; border-left-width: 4px; border-radius: 6px; }
.quote-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* green = the primary CTA only; white on #477A03 = 5.18:1 (AA normal text), hover #3B6803 = 6.63:1 */
.quote-submit { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 0.75rem 1.75rem; font: inherit; font-size: 1.2rem; font-weight: 700; color: #fff; background: var(--color-green-cta); border: 2px solid var(--color-green-cta); border-radius: 6px; cursor: pointer; }
.quote-submit:hover { background: var(--color-green-cta-hover); border-color: var(--color-green-cta-hover); }
.quote-submit:focus-visible { outline: 3px solid #5D2710; outline-offset: 2px; }
.quote-submit:disabled, .quote-submit[aria-disabled="true"] { color: #fff; background: #7C8C6A; border-color: #7C8C6A; cursor: not-allowed; }
.field-note { margin: 0.4rem 0 0; font-size: 0.9rem; color: #7A1F14; }
.field-note[hidden] { display: none; }
.product-detail__cta { margin-top: 2rem; }
.product-quote-cta { min-height: 44px; padding: 0.8rem 1.75rem; font: inherit; font-weight: 700; color: #fff; background: var(--color-green-cta); border: 2px solid var(--color-green-cta); border-radius: 4px; cursor: pointer; }   /* green = primary CTA */
.product-quote-cta:hover { background: var(--color-green-cta-hover); border-color: var(--color-green-cta-hover); }
.product-quote-cta:focus-visible { outline: 3px solid #5D2710; outline-offset: 2px; }
.quote-success h3 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.quote-success p { margin: 0 0 0.75rem; }
.quote-success a { color: #5D2710; font-weight: 600; }

@media (min-width: 768px) {
    .section-contact { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .contact-form-card { padding: 2rem; }
    .quote-submit { width: auto; min-width: 12rem; }
}
@media (min-width: 900px) {
    .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; }
}

/* Real Gallery & Customer Stories (section 07): warm white, brown text. Eyebrow above the headline (the H2).
   Gallery: editorial, asymmetric grid chosen by the number of photos shown (1-8): the first photo is the feature
   (2 columns x 2 rows) when there are 3, 4, 5, 7 or 8 photos. Photos fill their frame (object-fit: cover), no
   shadow, card, slider or animation. Customer stories: two columns on desktop, separated by thin rules. */
.section-gallery-stories { min-height: 0; padding: 0; background: var(--color-white-warm); color: var(--color-brown); border-bottom: 0; }
.gallery-band { padding-top: 3rem; padding-bottom: 3rem; }
.customer-stories-band { padding-top: 3rem; padding-bottom: 3rem; background: var(--color-cream); }
.section-gallery-stories .section-container { overflow-wrap: anywhere; }
.gallery-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-terracotta); }
.section-gallery-stories .gallery-headline { margin: 0 0 2rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; }
.gallery-grid, .customer-slides { margin: 0; padding: 0; list-style: none; }
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 1rem; }
.gallery-item { min-width: 0; display: flex; }
.gallery-figure { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin: 0; }
.gallery-frame { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #EFE6D8; }
.gallery-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-caption { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-terracotta); }
.gallery-grid--n1 { max-width: 56rem; }
.gallery-grid--n1 .gallery-frame { aspect-ratio: 16 / 9; }
/* Customer Stories: one review at a time (slider), the photo of the active review (customer_stories[i].image_id) on the left from
   900px, stacked on mobile with the photo on top; photo and text change together. Without JavaScript every review is shown in turn; the script adds
   .is-enhanced (one review visible, all slides share one grid cell so the height never jumps). */
.customer-stories__media { position: relative; display: block; margin: 0 0 1.5rem; padding: 0; list-style: none; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #EFE6D8; }
.customer-media { position: absolute; inset: 0; margin: 0; }
.customer-media:not(:first-child) { display: none; }
.customer-media__frame { position: absolute; inset: 0; }
.customer-media__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.customer-stories.is-enhanced .customer-media { display: block; visibility: hidden; opacity: 0; transition: opacity 0.5s ease, visibility 0.5s; }
.customer-stories.is-enhanced .customer-media.is-active { visibility: visible; opacity: 1; }
.customer-stories.is-textonly .customer-stories__media { display: none; }
.customer-stories__copy { min-width: 0; }
.customer-stories__eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-terracotta); }
.section-gallery-stories .customer-stories__headline { margin: 0 0 1.75rem; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; }
.customer-slider { min-width: 0; }
.customer-slides { display: block; }
.customer-story { min-width: 0; padding: 1.5rem 0; border-top: 1px solid #E4D6C3; }
.customer-story:first-child { border-top: 0; padding-top: 0; }
.customer-story-figure { margin: 0; }
.customer-story-quote { margin: 0; padding: 0; }
.customer-story-quote p { margin: 0; font-size: 1.25rem; line-height: 1.65; }
.customer-story-author { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.25rem; }
.customer-story-who { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.customer-story-name { font-weight: 700; line-height: 1.4; }
.customer-story-role { font-size: 0.9375rem; line-height: 1.4; color: var(--color-terracotta); }
.customer-slider.is-enhanced .customer-slides { display: grid; }
.customer-slider.is-enhanced .customer-story { grid-area: 1 / 1; padding: 0; border-top: 0; visibility: hidden; opacity: 0; transition: opacity 0.5s ease, visibility 0.5s; }
.customer-slider.is-enhanced .customer-story.is-active { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .customer-slider.is-enhanced .customer-story, .customer-stories.is-enhanced .customer-media { transition: none; } }
.customer-slider__controls { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #E4D6C3; }
.customer-slider__controls[hidden] { display: none; }
.customer-slider__button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-brown); border-radius: 50%; background: transparent; color: var(--color-brown); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.customer-slider__button:hover { background: var(--color-brown); color: #fff; }
.customer-slider__button:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 2px; }
.customer-slider__status { min-width: 3.5rem; margin: 0; text-align: center; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.05em; }
@media (min-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 600-899px: two columns; the first photo spans both, a last photo left alone spans both. */
@media (min-width: 600px) and (max-width: 899px) {
    .gallery-grid:not(.gallery-grid--n1):not(.gallery-grid--n2) .gallery-item:first-child { grid-column: span 2; }
    .gallery-grid:not(.gallery-grid--n1):not(.gallery-grid--n2) .gallery-item:first-child .gallery-frame { aspect-ratio: 16 / 9; }
    .gallery-grid:not(.gallery-grid--n1):not(.gallery-grid--n2) .gallery-item:last-child:nth-child(even) { grid-column: span 2; }
    .gallery-grid:not(.gallery-grid--n1):not(.gallery-grid--n2) .gallery-item:last-child:nth-child(even) .gallery-frame { aspect-ratio: 16 / 9; }
}
@media (min-width: 768px) {
    .gallery-band, .customer-stories-band { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .customer-story-quote p { font-size: 1.375rem; }
}
@media (min-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
    .gallery-grid--n1 { grid-template-columns: minmax(0, 1fr); }
    .gallery-grid--n2 .gallery-item { grid-column: span 2; }
    .gallery-grid--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* Feature layouts: photo 1 = 2 columns x 2 rows, its frame fills the height of the two rows beside it. */
    .gallery-grid--n3 .gallery-item:first-child, .gallery-grid--n4 .gallery-item:first-child, .gallery-grid--n5 .gallery-item:first-child,
    .gallery-grid--n7 .gallery-item:first-child, .gallery-grid--n8 .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
    .gallery-grid--n3 .gallery-item:first-child .gallery-frame, .gallery-grid--n4 .gallery-item:first-child .gallery-frame, .gallery-grid--n5 .gallery-item:first-child .gallery-frame,
    .gallery-grid--n7 .gallery-item:first-child .gallery-frame, .gallery-grid--n8 .gallery-item:first-child .gallery-frame { flex: 1 1 auto; min-height: 18rem; aspect-ratio: auto; }
    /* Photos that take 2 columns beside / below the feature. */
    .gallery-grid--n3 .gallery-item:nth-child(n+2), .gallery-grid--n4 .gallery-item:nth-child(4), .gallery-grid--n7 .gallery-item:nth-child(n+6), .gallery-grid--n8 .gallery-item:nth-child(8) { grid-column: span 2; }
    .gallery-grid--n3 .gallery-item:nth-child(n+2) .gallery-frame { aspect-ratio: 16 / 9; }
    .gallery-grid--n4 .gallery-item:nth-child(4) .gallery-frame, .gallery-grid--n7 .gallery-item:nth-child(n+6) .gallery-frame, .gallery-grid--n8 .gallery-item:nth-child(8) .gallery-frame { aspect-ratio: 2 / 1; }
    .customer-stories--image { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: stretch; }
    .customer-stories--image .customer-stories__media { margin: 0; min-height: 26rem; aspect-ratio: auto; }
    .customer-stories--image.is-textonly { display: block; }
    .customer-stories--image.is-textonly .customer-stories__copy { max-width: 48rem; }
    .customer-stories--image .customer-stories__copy { align-self: center; }
    .customer-stories:not(.customer-stories--image) .customer-stories__copy { max-width: 48rem; }
}

/* FAQ (Section 08): Natural Precision on warm white. No cards, shadows or gradients; thin dividers between questions.
   Heading left and accordion right from 900px, one column below. Without JS every answer is open (buttons disabled);
   faq.js adds .is-enhanced to the list, which collapses the answers and enables the buttons. */
.section-faq { min-height: 0; padding-top: 3.5rem; padding-bottom: 3.5rem; background: var(--color-white-warm); color: var(--color-brown); border-bottom: 0; overflow-wrap: anywhere; }
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.faq-eyebrow { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-terracotta); }
.faq-headline { margin: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; }
.faq-list { box-sizing: border-box; width: 100%; max-width: 720px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-terracotta-light); }
.faq-item { margin: 0; padding: 0; border-top: 1px solid var(--color-terracotta-light); }
.faq-heading { margin: 0; font-size: 1rem; line-height: 1.4; }
.faq-question { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 44px; margin: 0; padding: 1rem 0; border: 0; background: transparent; color: var(--color-brown); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.faq-question:disabled { color: var(--color-brown); cursor: default; }
.faq-question:focus-visible { outline: 2px solid var(--color-green-cta); outline-offset: 2px; }
.faq-question__text { flex: 1 1 auto; min-width: 0; }
.faq-question__icon { position: relative; flex: 0 0 auto; width: 14px; height: 14px; color: var(--color-terracotta); }
.faq-question__icon::before, .faq-question__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform 0.2s ease; }
.faq-question__icon::after { transform: rotate(90deg); }
.faq-question[aria-expanded="true"] .faq-question__icon::after { transform: rotate(0deg); }
.faq-list:not(.is-enhanced) .faq-question__icon { display: none; }
.faq-panel__inner p { margin: 0; padding: 0 0 1.25rem; line-height: 1.65; }
.faq-list.is-enhanced .faq-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s; }
.faq-list.is-enhanced .faq-item.is-open .faq-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.faq-list.is-enhanced .faq-panel__inner { min-height: 0; overflow: hidden; }
@media (min-width: 900px) {
    .section-faq { padding-top: 5rem; padding-bottom: 5rem; }
    .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-list.is-enhanced .faq-panel, .faq-question__icon::before, .faq-question__icon::after { transition: none; }
}