:root { --scrim: 40, 48, 18; }
.pr-fill-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-edge-start { padding-inline-start: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.pr-edge-end { padding-inline-end: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.pr-art { color: var(--olive-400); }
.pr-art svg { width: 100%; height: auto; }
.pr-art svg * { stroke-width: 1; }
.pr-dark-crumbs .crumbs { color: var(--cream-70); }
.pr-dark-crumbs .crumbs a { color: var(--cream); }
.pr-dark-crumbs .crumbs li + li::before { color: var(--cream-70); }
.pr-dark-crumbs .crumbs [aria-current] { color: var(--white); }
.pr-h2 { font-size: clamp(32px, 1.5rem + 2.3vw, 54px); line-height: 1; letter-spacing: -0.01em; color: var(--olive-900); }

/* full-bleed photo bands with scrim (hub hero, final calls) */
.pr-photo-band { position: relative; overflow: hidden; background: var(--olive-900); color: var(--white); display: grid; align-items: end; }
.pr-photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--scrim), 0.6) 0%, rgba(var(--scrim), 0) 24%), linear-gradient(to top, rgba(var(--scrim), 0.88) 0%, rgba(var(--scrim), 0.5) 42%, rgba(var(--scrim), 0.12) 80%); }
.pr-photo-band > .wrap { position: relative; z-index: 1; }
.pr-photo-band .btn-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

/* hub hero */
.hub-hero { min-height: 88vh; min-height: 88svh; }
.hub-hero .crumbs { position: absolute; top: 0; inset-inline: 0; }
.hub-hero .copy { padding-block: calc(var(--header-h) + 72px) clamp(48px, 9vh, 96px); }
.hub-hero h1 { font-size: clamp(42px, 30px + 3.4vw, 80px); line-height: 0.96; letter-spacing: -0.01em; max-width: 19ch; }
.hub-hero .lede { margin-top: 24px; max-width: 42ch; color: var(--white); font-size: clamp(16px, 0.95rem + 0.2vw, 18px); }

/* hub compare: products set as large-type rows */
.hub-list { padding-block: clamp(80px, 10vw, 140px) clamp(64px, 8vw, 120px); }
.hub-list .pr-h2 { max-width: 20ch; }
.hub-rows { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; border-top: 1px solid var(--olive-900); }
.hub-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px var(--gutter); padding-block: clamp(22px, 2.6vw, 36px); border-bottom: 1px solid var(--line); align-items: start; }
.hub-name { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.hub-name img { width: clamp(84px, 9vw, 132px); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; flex: none; transition: transform 0.5s var(--ease-out); }
.hub-name h3 { font-size: clamp(32px, 1.4rem + 2.4vw, 60px); line-height: 0.95; letter-spacing: -0.015em; color: var(--olive-900); }
.hub-name a { text-decoration: none; color: inherit; }
.hub-name a::after { content: ""; position: absolute; inset: 0; }
.hub-name a:focus-visible { outline: none; }
.hub-row:has(a:focus-visible) { outline: 2px solid var(--olive-400); outline-offset: 4px; }
.hub-facts { margin: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: 16px 28px; }
.hub-facts dt { font-size: var(--small); color: var(--olive-600); }
.hub-facts dd { margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.hub-facts dd strong { display: block; font-weight: 500; color: var(--olive-800); }
@media (hover: hover) and (pointer: fine) {
  .hub-row:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .hub-row:hover img { transform: scale(1.04); }
}

/* hub statement with botanical */
.hub-say { padding-block: clamp(72px, 12vh, 150px); }
.hub-say-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gutter); align-items: center; }
.hub-say .pr-art { grid-column: 9 / span 3; grid-row: 1; }
.hub-say .say-text { grid-column: 1 / span 7; grid-row: 1; }
.hub-say .h2 { font-size: clamp(32px, 1.5rem + 2.4vw, 56px); line-height: 1.02; color: var(--olive-900); }
.hub-say p.body { margin-top: 26px; max-width: 46ch; }

/* olive band: packing routes */
.pr-band { background: var(--olive-900); color: var(--cream); padding-block: clamp(72px, 9vw, 128px); }
.pr-band .h2 { color: var(--cream); font-size: clamp(32px, 1.5rem + 2.4vw, 54px); line-height: 1; max-width: 20ch; }
.pack-routes { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: 32px var(--gutter); }
.pack-routes dt { font-size: clamp(24px, 1.1rem + 1vw, 34px); line-height: 1.1; color: var(--white); }
.pack-routes dd { margin: 10px 0 0; color: var(--cream-70); max-width: 32ch; }
.band-foot { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line-dark); color: var(--cream); max-width: 72ch; }

/* split with photo bleeding off an edge */
.pr-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(88px, 11vw, 150px); }
.pr-split .split-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-start-end-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
.pr-split .split-text p { margin-top: 22px; max-width: 44ch; }
.pr-split .split-text .btn-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* final call */
.pr-final { min-height: 80vh; min-height: 80svh; }
.pr-final .copy { padding-block: calc(var(--header-h) + 48px) clamp(56px, 9vw, 110px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px var(--gutter); align-items: end; }
.pr-final h2 { font-size: clamp(36px, 1.7rem + 3vw, 70px); line-height: 0.98; letter-spacing: -0.01em; max-width: 17ch; }
.pr-final .desk strong { display: block; font-weight: 500; font-size: 20px; }
.pr-final .desk p { margin-top: 8px; max-width: 32ch; }
.pr-final .desk a { color: var(--white); }

/* ---------- spec page ---------- */
.sp-hero { background: var(--olive-900); color: var(--white); overflow: hidden; }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 80px); align-items: end; min-height: 86vh; min-height: 86svh; }
.sp-hero-text { padding-block: 0 clamp(48px, 8vh, 96px); align-self: stretch; display: flex; flex-direction: column; }
.sp-hero-text .crumbs { padding-bottom: clamp(40px, 8vh, 96px); }
.sp-hero-text .grow { margin-top: auto; }
.sp-hero h1 { font-size: clamp(40px, 28px + 3.1vw, 76px); line-height: 0.97; letter-spacing: -0.01em; max-width: 17ch; }
.sp-hero .lede { margin-top: 24px; max-width: 42ch; color: var(--cream); font-size: clamp(16px, 0.95rem + 0.2vw, 18px); }
.sp-hero .btn-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.sp-hero-photo { align-self: stretch; padding-top: calc(var(--header-h) + 24px); }
.sp-hero-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 35%; border-start-start-radius: var(--radius-card); }
@media (prefers-reduced-motion: no-preference) {
  .sp-hero-photo img, .hub-hero .pr-fill-media { animation: pr-settle 1.6s var(--ease-out) both; }
  @keyframes pr-settle { from { transform: scale(1.04); opacity: 0.6; } to { transform: none; opacity: 1; } }
}

/* spec facts as large type */
.sp-facts { padding-block: clamp(80px, 10vw, 140px) clamp(56px, 7vw, 96px); }
.sp-dl { margin: 0; border-top: 1px solid var(--olive-900); }
.sp-dl > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px var(--gutter); padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--line); }
.sp-dl dt { color: var(--olive-600); padding-top: 0.5em; }
.sp-dl dd { margin: 0; font-size: clamp(24px, 1.1rem + 1.4vw, 40px); line-height: 1.12; letter-spacing: -0.01em; color: var(--olive-900); max-width: 30ch; }
.sp-dl dd small { display: block; margin-top: 8px; font-size: 15px; letter-spacing: 0; color: var(--olive-600); line-height: 1.4; }
.sp-grades { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 20px var(--gutter); }
.sp-grades .h3 { padding-top: 4px; }
.sp-grades .ref-table td, .sp-grades .ref-table tbody th { font-size: clamp(17px, 1rem + 0.4vw, 22px); }
.sp-vars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gutter); }
.sp-vars b { display: block; font-weight: 400; font-size: clamp(26px, 1.2rem + 1.2vw, 40px); line-height: 1; color: var(--olive-900); }
.sp-vars span { display: block; margin-top: 8px; color: var(--ink); }

/* rejection driver statement and tolerance table */
.sp-risk { padding-block: clamp(56px, 8vw, 110px) clamp(88px, 11vw, 150px); }
.sp-risk-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gutter); align-items: center; }
.sp-risk .pr-art { grid-column: 1 / span 3; }
.sp-risk .say-text { grid-column: 5 / span 8; }
.sp-risk.no-art .say-text { grid-column: 2 / span 9; }
.sp-risk .h2 { font-size: clamp(34px, 1.6rem + 2.6vw, 60px); line-height: 1; color: var(--olive-900); max-width: 18ch; }
.sp-risk p.body { margin-top: 26px; max-width: 46ch; }
.sp-tol { margin-top: clamp(56px, 7vw, 96px); margin-inline-start: calc((100% + var(--gutter)) / 12 * 4); }
.sp-risk.no-art .sp-tol { margin-inline-start: calc((100% + var(--gutter)) / 12); }

/* documents on olive */
.sp-docs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px var(--gutter); align-items: start; }
.sp-docs-grid p.lead { margin-top: 22px; color: var(--cream); max-width: 38ch; }
.sp-docs-grid p.lead a { color: var(--white); }
.sp-doclists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px var(--gutter); }
.sp-doclists h3 { font-size: 15px; color: var(--cream-70); margin-bottom: 14px; }
.sp-doclists ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-doclists li { font-size: clamp(18px, 1rem + 0.4vw, 22px); line-height: 1.3; color: var(--cream); }
.sp-doclists .extra li { color: var(--white); }

/* markets and notes */
.sp-markets { padding-block: clamp(88px, 11vw, 150px) clamp(48px, 6vw, 80px); }
.sp-markets-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px clamp(32px, 6vw, 110px); align-items: start; }
.sp-notes p { margin-top: 20px; max-width: 52ch; font-size: clamp(17px, 1rem + 0.3vw, 20px); line-height: 1.5; }
.sp-notes p strong { font-weight: 500; color: var(--olive-800); }
.sp-mlinks h3 { margin-bottom: 14px; }
.sp-mlinks ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sp-mlinks li { border-bottom: 1px solid var(--line); }
.sp-mlinks li a { display: block; padding-block: 14px; font-size: clamp(22px, 1.1rem + 0.8vw, 30px); line-height: 1.1; color: var(--olive-900); text-decoration: none; }
.sp-mlinks li a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sp-mlinks .check { margin-top: 26px; }

/* terms beside a photo bleeding off the inline start */
.sp-terms { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.sp-terms dl { margin: 30px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; }
.sp-terms dt { font-size: var(--small); color: var(--olive-600); }
.sp-terms dd { margin: 4px 0 0; font-size: clamp(18px, 1rem + 0.4vw, 22px); line-height: 1.3; color: var(--olive-900); }
.sp-terms .wide { grid-column: 1 / -1; }
.sp-terms .wide dd { font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 52ch; }
.sp-terms .split-photo img { object-position: 50% 30%; }
.sp-terms .wide.pk dd { font-size: clamp(18px, 1rem + 0.4vw, 22px); line-height: 1.3; color: var(--olive-900); }

/* related spices */
.sp-related { padding-block: 0 clamp(88px, 11vw, 150px); }
.sp-rel { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sp-rel a { display: grid; gap: 10px; color: var(--olive-900); text-decoration: none; }
.sp-rel img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.sp-rel a:hover .h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sp-rel small { font-size: var(--small); color: var(--olive-600); }
.sp-rel-all { margin-top: 28px; }
@media (max-width: 700px) { .sp-rel { grid-template-columns: 1fr; } }

/* faq */
.sp-faq { padding-block: clamp(48px, 6vw, 80px) clamp(88px, 11vw, 150px); }
.sp-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px var(--gutter); align-items: start; }

@media (max-width: 900px) {
  .hub-row, .hub-say-grid, .pack-routes, .pr-split, .pr-final .copy, .sp-hero-grid, .sp-dl > div, .sp-grades, .sp-risk-grid, .sp-docs-grid, .sp-markets-grid, .sp-faq-grid, .sp-terms { grid-template-columns: 1fr; }
  .hub-facts { grid-template-columns: 1fr 1fr; }
  .hub-facts > div:first-child { grid-column: 1 / -1; }
  .hub-say .pr-art, .hub-say .say-text, .sp-risk .pr-art, .sp-risk .say-text, .sp-risk.no-art .say-text { grid-column: auto; grid-row: auto; }
  .hub-say .pr-art { width: min(44%, 200px); justify-self: end; }
  .sp-risk .pr-art { width: min(44%, 200px); }
  .sp-tol, .sp-risk.no-art .sp-tol { margin-inline-start: 0; }
  .sp-hero-grid { min-height: 0; }
  .sp-hero-text { padding-inline-end: var(--gutter); }
  .sp-hero-text .crumbs { padding-bottom: 32px; }
  .sp-hero-photo { padding-top: 0; padding-inline-start: var(--gutter); order: 2; }
  .sp-hero-photo img { min-height: 0; aspect-ratio: 4 / 3; height: auto; border-end-start-radius: 0; }
  .sp-hero-text { padding-bottom: 0; }
  .pr-split .split-photo { padding-inline-end: var(--gutter); }
  .pr-split .split-text { padding-inline: var(--gutter); }
  .sp-terms .split-photo { order: 2; }
}
@media (max-width: 560px) {
  .hub-facts, .sp-doclists, .sp-terms dl, .sp-vars { grid-template-columns: 1fr; }
  .hub-name img { width: 76px; border-radius: 14px; }
}