:root {
  --paper: #e8e5d8;
  --ink: #182019;
  --moss: #2d4433;
  --khaki: #aaa987;
  --clay: #9e6d50;
  --line: rgba(24, 32, 25, .22);
  --mono: 'DM Mono', monospace;
  --sans: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
.site-header { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 23px 30px; color: var(--paper); pointer-events: none; }
.site-header:before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: 86px; background: linear-gradient(180deg, rgba(16,24,17,.68), transparent); pointer-events: none; }
.site-header > * { pointer-events: auto; }
.wordmark { color: inherit; text-decoration: none; font-size: 22px; font-weight: 600; letter-spacing: -.08em; }
.header-note, .eyebrow, .section-label, .story-meta, .site-footer { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.header-note { opacity: .75; }
.site-header nav { display: flex; justify-content: flex-end; gap: 24px; }
.site-header nav a { color: inherit; text-decoration: none; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; opacity: .82; }
.site-header nav a:hover, .text-link:hover { opacity: 1; }
.story { position: relative; background: #101811; }
.story-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; background: #18251a; }
.story-track { height: 470vh; }
.story-poster, .story-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-poster { z-index: 0; filter: saturate(.84); }
.story-stage canvas { z-index: 1; }
.stage-wash { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, rgba(12,20,13,.58), transparent 58%), linear-gradient(0deg, rgba(12,20,13,.42), transparent 45%); pointer-events: none; }
.story-copy { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; padding: 140px 8vw 90px; color: #fff; pointer-events: none; }
.scene-copy { position: absolute; max-width: 640px; opacity: 0; transform: translateY(22px); transition: opacity .45s ease, transform .65s cubic-bezier(.2,.75,.2,1); pointer-events: none; }
.scene-copy.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.eyebrow { margin: 0 0 21px; color: var(--khaki); }
.story-copy .eyebrow, .story-copy em { color: #fff; }
h1, h2 { font-weight: 500; letter-spacing: -.085em; line-height: .9; margin: 0; }
h1 { font-size: clamp(60px, 9vw, 148px); }
h2 { font-size: clamp(54px, 8vw, 124px); }
em { font-style: normal; color: var(--khaki); }
.scene-body { max-width: 340px; margin: 29px 0 27px; color: rgba(255,255,255,.82); font-size: 17px; }
.text-link { display: inline-flex; gap: 15px; align-items: center; color: #fff; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; opacity: .86; }
.text-link span { font-size: 19px; line-height: 0; }
.story-meta { position: absolute; z-index: 4; bottom: 28px; left: 30px; right: 30px; display: flex; align-items: center; gap: 13px; color: rgba(232,229,216,.72); }
.meta-line { width: 80px; height: 1px; background: currentColor; }
.story-meta span:last-child { margin-left: auto; }
.section-grid { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 30px; padding: 150px 30px 160px; }
.section-label { display: flex; gap: 22px; color: rgba(24,32,25,.67); }
.section-label span:first-child { color: var(--clay); }
.section-content { max-width: 920px; }
.lead { max-width: 490px; font-size: 21px; margin: 42px 0 80px; color: rgba(24,32,25,.75); }
.feature-list { border-top: 1px solid var(--line); }
.feature-list > div { display: grid; grid-template-columns: 55px 180px 1fr; gap: 20px; padding: 21px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.feature-list span { font-family: var(--mono); font-size: 11px; color: var(--clay); }
.feature-list strong { font-size: 19px; font-weight: 500; }
.feature-list p { margin: 0; color: rgba(24,32,25,.68); font-size: 15px; }
.gallery { background: #d4d2c2; }
.gallery-content { min-width: 0; }
.gallery-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 68px; }
.gallery-heading h2 { font-size: clamp(55px, 7vw, 112px); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.gallery-card { min-width: 0; }
.gallery-card { display: block; color: inherit; text-decoration: none; }
.gallery-image { overflow: hidden; aspect-ratio: 3 / 4; background: #a9a78d; }
.gallery-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.gallery-card:hover .gallery-image img { transform: scale(1.035); }
.gallery-card:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; }
.gallery-caption { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.gallery-caption span { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--clay); }
.gallery-caption strong { max-width: 190px; font-size: 15px; font-weight: 500; line-height: 1.25; }
.approach { background: var(--moss); color: var(--paper); }
.approach .section-label { color: rgba(232,229,216,.66); }
.approach-content { display: grid; grid-template-columns: 1.25fr 1fr; gap: 70px; align-items: end; }
.approach-image { overflow: hidden; aspect-ratio: 1.25; background: var(--khaki); }
.approach-image img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: contrast(1.03); }
.approach-copy { padding-bottom: 5px; }
.approach-copy h2 { font-size: clamp(46px, 6vw, 95px); margin-bottom: 30px; }
.approach-copy em { color: var(--khaki); }
.approach-copy > p:last-child { max-width: 390px; color: rgba(232,229,216,.75); font-size: 17px; }
.notes { padding-bottom: 110px; }
.notes-content { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.notes-heading h2 { font-size: clamp(55px, 7vw, 112px); }
.notes-list { align-self: end; border-top: 1px solid var(--line); }
.notes-list div { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.notes-list span { font-size: 17px; }
.notes-list small { font-family: var(--mono); color: rgba(24,32,25,.64); font-size: 10px; text-transform: uppercase; }
.round-link { display: grid; place-items: center; position: absolute; right: 0; bottom: -95px; width: 60px; height: 60px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 24px; text-decoration: none; }
.site-footer { display: flex; justify-content: space-between; gap: 15px; padding: 22px 30px; border-top: 1px solid var(--line); color: rgba(24,32,25,.65); }
@media (max-width: 800px) {
  .site-header { grid-template-columns: 1fr auto; padding: 18px 16px; }
  .header-note { display: none; }
  .site-header nav { gap: 12px; }
  .site-header nav a { font-size: 9px; }
  .story-stage { min-height: 600px; }
  .story-track { height: 320vh; }
  .story-copy { padding: 120px 22px 90px; align-items: flex-end; }
  .scene-copy { max-width: calc(100vw - 44px); padding-bottom: 35px; }
  h1 { font-size: clamp(54px, 15vw, 95px); }
  h2 { font-size: clamp(48px, 14vw, 85px); }
  .scene-body { margin: 22px 0; font-size: 15px; }
  .story-meta { left: 16px; right: 16px; bottom: 18px; }
  .section-grid { grid-template-columns: 1fr; gap: 60px; padding: 100px 18px 110px; }
  .section-label { justify-content: space-between; }
  .lead { font-size: 18px; margin: 30px 0 58px; }
  .feature-list > div { grid-template-columns: 35px 1fr; gap: 9px; }
  .feature-list strong { font-size: 17px; }
  .feature-list p { grid-column: 2; }
  .gallery-heading { display: block; margin-bottom: 42px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 44px; }
  .gallery-image { aspect-ratio: 4 / 5; }
  .gallery-caption { padding-top: 12px; }
  .approach-content, .notes-content { grid-template-columns: 1fr; gap: 50px; }
  .approach-copy h2 { font-size: clamp(44px, 13vw, 78px); }
  .notes-list { margin-top: 10px; }
  .round-link { bottom: -84px; }
  .site-footer { flex-direction: column; padding: 20px 18px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-copy { transition: none; }
  .gallery-image img { transition: none; }
  .gallery-card:hover .gallery-image img { transform: none; }
}
/* Local contrast corrections; preserve the campaign white and dark-section palette. */
.system .eyebrow, .gallery .eyebrow, .notes .eyebrow { color: #5c5b47; }
.system h2 em, .gallery h2 em, .notes h2 em { color: #77765d; }
.system .section-label span:first-child, .gallery .section-label span:first-child,
.notes .section-label span:first-child, .feature-list span, .gallery-caption span { color: #78513c; }
.approach .section-label span:first-child, .approach .eyebrow { color: #aeae8b; }
/* Static reading order only for reduced motion or unavailable canvas rendering. */
.story.is-static .story-stage { position: relative; height: auto; min-height: 0; }
.story.is-static .story-copy { position: relative; display: block; }
.story.is-static .scene-copy { position: relative; opacity: 1; transform: none; transition: none; pointer-events: auto; }
.story.is-static .scene-copy + .scene-copy { margin-top: 100px; }
.story.is-static .story-track, .story.is-static .story-meta { display: none; }
.product-page .site-header { color: var(--ink); }
.product-page .site-header:before { background: linear-gradient(180deg, rgba(232,229,216,.96), rgba(232,229,216,0)); }
.product-page .site-header a { color: inherit; }
.back-link { color: inherit; text-decoration: none; }
.back-link:focus-visible, .wordmark:focus-visible, .site-header nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.product-page main { padding-top: 1px; }
.product-hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 118px 30px 28px; background: #18251a; color: #fff; }
.product-hero-image, .product-hero-wash { position: absolute; inset: 0; }
.product-hero-image { background: #18251a; }
.product-hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.product-hero-wash { background: linear-gradient(90deg, rgba(10,19,12,.84), rgba(10,19,12,.28) 57%, rgba(10,19,12,.12)), linear-gradient(0deg, rgba(10,19,12,.72), transparent 48%, rgba(10,19,12,.22)); pointer-events: none; }
.product-hero-top, .product-hero-content, .product-hero-meta { position: relative; z-index: 1; }
.product-hero-top { display: flex; justify-content: space-between; gap: 24px; color: rgba(255,255,255,.88); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.product-hero-top a { color: inherit; }
.product-hero-content { display: flex; align-items: end; min-height: 0; padding: 80px 8vw 50px; }
.product-copy { max-width: 850px; }
.product-copy .eyebrow { color: #d9d5a7; }
.product-copy h1 { font-size: clamp(58px, 8vw, 128px); color: #fff; }
.product-copy h1 em { color: #fff; }
.product-copy .lead { max-width: 410px; margin: 35px 0 0; color: rgba(255,255,255,.9); }
.product-hero-meta { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.74); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.product-hero-meta .meta-line { width: 80px; background: currentColor; }
.product-hero-meta span:last-child { margin-left: auto; }
.product-details { background: #d4d2c2; }
.product-details-content { min-width: 0; }
.product-details-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 68px; }
.product-details-heading h2 { font-size: clamp(54px, 7vw, 112px); }
.product-notes { border-top: 1px solid var(--line); }
.product-note { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.product-note strong { font-size: 19px; font-weight: 500; }
.product-note p { max-width: 480px; margin: 0; color: rgba(24,32,25,.72); font-size: 17px; }
.product-field-story { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 30px; padding: 135px 30px 150px; background: var(--moss); color: var(--paper); }
.product-field-story .section-label { color: rgba(232,229,216,.66); }
.product-field-story-content { min-width: 0; }
.product-field-story-content > h2 { max-width: 800px; margin-bottom: 62px; font-size: clamp(52px, 7vw, 112px); }
.product-field-story-content > h2 em { color: var(--khaki); }
.product-field-story-copy { max-width: 500px; margin: 0 0 65px; color: rgba(232,229,216,.78); font-size: 19px; }
.product-rituals { border-top: 1px solid rgba(232,229,216,.3); }
.product-ritual { display: grid; grid-template-columns: 55px 180px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 21px 0; border-bottom: 1px solid rgba(232,229,216,.3); }
.product-ritual > span { font-family: var(--mono); font-size: 11px; color: var(--khaki); }
.product-ritual strong { font-size: 19px; font-weight: 500; }
.product-ritual p { max-width: 420px; margin: 0; color: rgba(232,229,216,.72); font-size: 15px; }
.product-related { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 30px; padding: 135px 30px 150px; background: var(--paper); }
.product-related-content { min-width: 0; }
.product-related-heading { margin-bottom: 68px; }
.product-related-heading h2 { font-size: clamp(54px, 7vw, 112px); }
.product-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.product-related-card { display: block; min-width: 0; color: inherit; text-decoration: none; }
.product-related-image { overflow: hidden; aspect-ratio: 4 / 5; background: #a9a78d; }
.product-related-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.product-related-card:hover .product-related-image img { transform: scale(1.035); }
.product-related-card:focus-visible { outline: 2px solid var(--clay); outline-offset: 6px; }
.product-related-caption { display: flex; justify-content: space-between; gap: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.product-related-caption span { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: #78513c; }
.product-related-caption strong { max-width: 240px; font-size: 15px; font-weight: 500; line-height: 1.25; }
.product-return { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 30px; padding: 110px 30px 125px; background: var(--moss); color: var(--paper); }
.product-return .section-label { color: rgba(232,229,216,.66); }
.product-return-content { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.product-return h2 { max-width: 700px; font-size: clamp(48px, 6vw, 94px); }
.product-return h2 em { color: var(--khaki); }
.product-return-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
.product-return-links a { color: var(--paper); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; }
.product-return-links a:focus-visible { outline: 2px solid var(--paper); outline-offset: 5px; }
@media (max-width: 800px) {
  .product-hero { min-height: 100svh; padding: 100px 18px 18px; }
  .product-hero-top { font-size: 10px; }
  .product-hero-content { padding: 60px 4px 34px; }
  .product-copy h1 { font-size: clamp(54px, 15vw, 94px); }
  .product-copy .lead { margin-top: 24px; font-size: 16px; }
  .product-hero-meta { font-size: 9px; }
  .product-hero-meta .meta-line { width: 46px; }
  .product-details-heading { display: block; margin-bottom: 42px; }
  .product-note { grid-template-columns: 1fr; gap: 8px; }
  .product-field-story { grid-template-columns: 1fr; gap: 60px; padding: 90px 18px 105px; }
  .product-field-story-content > h2 { margin-bottom: 42px; font-size: clamp(48px, 13vw, 82px); }
  .product-field-story-copy { margin-bottom: 46px; font-size: 17px; }
  .product-ritual { grid-template-columns: 35px 1fr; gap: 9px; }
  .product-ritual p { grid-column: 2; }
  .product-related { grid-template-columns: 1fr; gap: 60px; padding: 90px 18px 105px; }
  .product-related-heading { margin-bottom: 42px; }
  .product-related-heading h2 { font-size: clamp(48px, 13vw, 82px); }
  .product-related-grid { grid-template-columns: 1fr; gap: 44px; }
  .product-related-caption { padding-top: 12px; }
  .product-return { grid-template-columns: 1fr; gap: 60px; padding: 90px 18px 105px; }
  .product-return-content { display: block; }
  .product-return-links { justify-content: flex-start; margin-top: 38px; }
}
