/* YURON static site.
   Sizes are in rem. Above 1100px the root font scales with the viewport so the 1530px design keeps its proportions. */
:root {
  --ink: #203928;
  --ink-strong: #173725;
  --brand: #08400a;
  --brand-soft: #1b4f2a;
  --moss: #2f5a2d;
  --text: #1c2b21;
  --muted: #5d6b62;
  --line: #d9dcc8;
  --line-soft: #e4e6e0;
  --pill: #e2eed2;
  --bg-soft: #f5f7f2;
  --bg-nav: var(--bg-soft);
  --bg-about: var(--bg-soft);
  --bg-collection: var(--bg-soft);
  --bg-card: #edf2e8;
  --bg-green: #e8f0e3;
  --bg-faq: var(--bg-soft);
  --bg-standards: var(--bg-soft);
  --placeholder: #dfebc2;
  --u: clamp(12.2px, calc(9.3px + .22vw), 13.5px); /* type unit */
  --h-page: calc(4.2 * var(--u));
  --h-section: calc(3.6 * var(--u));
  --footer: #203928;
  --footer-text: #f7f9c4;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --serif-ui: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; -webkit-text-size-adjust: 100%; }
@media (min-width: 1101px) { html { font-size: min(1.0458vw, 112.5%); } }
body { margin: 0; background: #fff; color: var(--text); font: 400 max(13px, calc(1.3 * var(--u)))/1.45 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
* { font-variant-numeric: lining-nums !important; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, .slide__title { text-wrap: balance; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--ink); line-height: 1.08; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
.icon { width: 1em; height: 1em; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -5rem; background: #fff; padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { top: 1rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; border-radius: .375rem; color: #fff; transition: background-color .2s; }
.btn-serif { background: var(--brand); font: 400 max(13px, calc(1.7 * var(--u)))/1 var(--serif-ui); padding: .55rem .95rem; }
.btn-sans { background: var(--brand-soft); font: 600 max(13px, calc(1.25 * var(--u)))/1 var(--sans); padding: .95rem 2.2rem; border-radius: .3rem; min-width: 16rem; }
.btn:hover { background: #2f5a2d; }
.btn:disabled { opacity: .6; cursor: wait; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; height: 5.2rem; padding: 0 3.2rem; background: var(--bg-nav); }
.logo { font: 700 max(13px, calc(2.75 * var(--u)))/1 var(--serif-ui); color: var(--ink); letter-spacing: .01em; }
.site-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.site-nav > ul { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .9rem; white-space: nowrap; }
.nav-link { display: block; font: 400 max(13px, calc(1.7 * var(--u)))/1 var(--serif-ui); color: var(--brand); letter-spacing: .012em; padding: .55rem .95rem; border-radius: 2rem; transition: background-color .2s; }
.nav-link { position: relative; isolation: isolate; }
.nav-link::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pill); opacity: 0; transform: scaleX(.72) scaleY(.82); transition: opacity .3s, transform .55s var(--ease); }
.nav-link.is-active::before, .nav-link:hover::before, .nav-link:focus-visible::before, .has-menu:hover > .nav-link::before, .has-menu:focus-within > .nav-link::before { opacity: 1; transform: none; }
.has-menu { position: relative; }
.submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 17rem; padding: .6rem; margin-top: .5rem; background: var(--bg-nav); border: 1px solid var(--line-soft); border-radius: .5rem; box-shadow: 0 .75rem 2rem rgba(23, 55, 37, .12); opacity: 0; visibility: hidden; transition: opacity .15s; }
.submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
.has-menu:hover .submenu, .has-menu:focus-within .submenu, .has-menu.is-open .submenu { opacity: 1; visibility: visible; }
.submenu a { display: block; padding: .7rem .9rem; font: 400 max(13px, calc(1.4 * var(--u)))/1.15 var(--serif-ui); color: var(--brand); border-radius: .3rem; }
.submenu a { transition: background-color .3s, padding-left .45s var(--ease); }
.submenu a:hover, .submenu a:focus-visible { background: var(--pill); padding-left: 1.25rem; }
.nav-toggle { display: none; }

/* Shared type */
.eyebrow-serif { font: 500 max(13px, calc(1.28 * var(--u)))/1.2 var(--serif); color: var(--ink); letter-spacing: .03em; }
.eyebrow-italic { font: italic 600 max(13px, calc(1.25 * var(--u)))/1.2 var(--serif); color: var(--ink); }
.eyebrow-green { font-size: max(13px, calc(1.1 * var(--u))); color: #4e9a5a; margin-bottom: .25rem; }

/* Home: hero */
.home-hero { position: relative; height: clamp(26rem, 78svh, 50rem); background: var(--bg-about); overflow: hidden; }
.hero-track { position: absolute; inset: 0; overflow: hidden; }
.slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.slide.is-active, .slide.is-leaving { visibility: visible; }
/* The photo is always shown whole. Any leftover width is filled by a blurred copy of the same photo. */
.slide { background: var(--ink-strong); }
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(36px) brightness(.72) saturate(1.1); transform: scale(1.15); }
.slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.slide::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, rgba(12, 22, 15, .62)); pointer-events: none; }
.slide__cap { position: absolute; left: 4.55rem; bottom: 3.4rem; z-index: 1; max-width: 68rem; color: #fff; }
.slide__mask { display: block; overflow: hidden; padding-bottom: .12em; }
.slide__eyebrow { display: block; font: 500 max(13px, calc(1.3 * var(--u)))/1.3 var(--sans); letter-spacing: .01em; }
.slide__heading { font: 600 max(13px, calc(4.3 * var(--u)))/1.14 var(--serif); color: #fff; margin: .7rem 0 1.5rem; }
.slide__title { display: block; }
.slide__link { display: inline-flex; align-items: center; gap: .45em; font: 400 max(13px, calc(1.5 * var(--u)))/1.3 var(--serif-ui); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .6); padding-bottom: .15rem; }
.hero-ctrl { display: none; }
.js .hero-ctrl { position: absolute; right: 4.55rem; bottom: 3.6rem; z-index: 3; display: flex; align-items: center; gap: .8rem; color: #fff; }
.hero-count, .hero-count * { font-variant-numeric: lining-nums tabular-nums !important; }
.hero-count { font: 400 max(13px, calc(1.05 * var(--u)))/1 var(--sans); margin-right: .5rem; }
.hero-count b { font-weight: 500; font-size: max(13px, calc(1.3 * var(--u))); }
.hero-count span { margin: 0 .35em; opacity: .6; }
.hero-bars { display: flex; gap: .4rem; margin-right: .8rem; }
.hero-bar { position: relative; width: 3.6rem; height: 2.4rem; }
.hero-bar::before, .hero-bar i { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, .35); }
.hero-bar i { background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-bar.is-active i { transform: scaleX(1); }
.hero-btn { display: flex; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; font-size: max(13px, calc(1.2 * var(--u))); transition: background-color .3s, color .3s, border-color .3s; }
.hero-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-btn:focus-visible, .slide__link:focus-visible { outline-color: #fff; }
.hero-ic-play, .home-hero.is-stopped .hero-ic-pause { display: none; }
.home-hero.is-stopped .hero-ic-play { display: block; }

/* Home: about */
.home-about { background: var(--bg-about); padding: 5.5rem 3.2rem; }
.home-about__inner { display: grid; grid-template-columns: 44rem 1fr; gap: 3rem; align-items: center; }
.home-about__inner > img { width: 44rem; height: 34.6rem; object-fit: cover; }
.home-about h2 { font-size: var(--h-section); margin: .4rem 0 2.5rem; line-height: 1.15; }
.lede { font-size: max(13px, calc(1.32 * var(--u))); line-height: 1.53; max-width: 44.5rem; margin-bottom: 2.5rem; }

/* Home: why */
.why { text-align: center; padding: 5rem 2rem 5.5rem; }
.why h2 { font-size: var(--h-section); margin: 1.2rem 0 1.6rem; }
.why__sub { font-size: max(13px, calc(1.3 * var(--u))); }
.why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 21.9rem)); justify-content: center; gap: 2.4rem; margin-top: 3rem; text-align: left; }
.why-card { min-height: 18rem; padding: 1.8rem 1.7rem; border-radius: 1rem; box-shadow: 0 .4rem 1.1rem rgba(0, 0, 0, .15); }
.why-card h3 { font-size: max(13px, calc(1.95 * var(--u))); font-weight: 500; margin: 2rem 0 1.5rem; }
.why-card p { font-size: max(13px, calc(1.25 * var(--u))); font-weight: 400; line-height: 1.5; }
.why-icon { width: 3.2rem; height: 3.2rem; stroke-width: 1; }
.why-card--dark { background: var(--ink-strong); color: #fff; }
.why-card--dark h3 { color: #fff; }
.why-card--green { background: #eaf2e0; }
.why-card--stone { background: #f3f2f0; }
.why-card--pill { background: var(--pill); }


/* Home: collection */
.collection { background: var(--bg-collection); padding: 5.5rem 4.05rem; }
.collection__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.collection__head h2 { font-size: var(--h-section); margin-top: .4rem; }
.collection__head > p { max-width: 33rem; font-size: max(13px, calc(1.3 * var(--u))); line-height: 1.6; margin-bottom: .3rem; }
.collection__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; margin-top: 3.2rem; }

/* Product cards */
.product-card { display: block; }
.product-card__media, .news-card__media { display: block; overflow: hidden; }
.product-card img { width: 100%; aspect-ratio: 327 / 269; object-fit: cover; }
.product-card__label { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .6rem; background: var(--bg-card); padding: 1.1rem .9rem .95rem; transition: background-color .3s; }
.product-card__label small, .product-card__label strong { grid-column: 1; }
.product-card__label .icon { grid-column: 2; grid-row: 1 / 3; font-size: max(13px, calc(1.5 * var(--u))); color: var(--ink); opacity: 0; translate: -.4rem .4rem; transition: opacity .4s, translate .6s var(--ease); }
.product-card:hover .product-card__label .icon { opacity: 1; translate: 0 0; }
@media (hover: none) { .product-card__label .icon { opacity: .6; translate: 0 0; } }
.product-card:hover .product-card__label { background: var(--pill); }
.product-card small { display: block; font-size: max(13px, calc(1 * var(--u))); line-height: 1.1; color: var(--muted); }
.product-card strong { display: block; font: 600 max(13px, calc(1.68 * var(--u)))/1.25 var(--serif); color: var(--ink); }

/* Home: decorative diamonds behind How we work and News */
.diamonds { position: relative; isolation: isolate; overflow: clip; }
.diamonds::before { content: ''; position: absolute; inset: -8rem 0 0; z-index: -1; pointer-events: none; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 1500'%3E%3Cg fill='%23f5f5f5'%3E%3Cpath d='M-60 420 340 820 -60 1220zM350 950 700 1300 350 1650 0 1300zM-120 1120 190 1430 -120 1740zM640 700 880 940 640 1180 400 940z'/%3E%3C/g%3E%3C/svg%3E") left bottom / 58rem auto no-repeat; -webkit-mask-image: linear-gradient(#000 62%, transparent 94%); mask-image: linear-gradient(#000 62%, transparent 94%); }

/* Home: how we work */
.how { padding: 5.5rem 3.1rem 0; }
.how > .eyebrow-serif, .how > h2 { margin-left: 6.2rem; }
.how > h2 { font-size: var(--h-section); margin-top: .3rem; color: #173f22; }
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 1rem; margin: 2.6rem 8.2rem 0 6.3rem; }
.steps::before { content: ''; position: absolute; left: 0; right: 0; top: 1.4rem; border-top: 1px solid #4d6b53; }
.steps__dot { position: relative; display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: max(13px, calc(1.45 * var(--u))); }
.steps h3 { font-size: max(13px, calc(1.55 * var(--u))); font-weight: 600; margin: 3rem 0 1.25rem; }
.steps p { font-size: max(13px, calc(1 * var(--u))); font-weight: 400; line-height: 1.42; max-width: 12rem; }
.how__frame { margin-top: 2.6rem; border-radius: 1rem; overflow: hidden; }
.how__photo { width: 100%; height: 48.2rem; object-fit: cover; object-position: 50% 50%; }
.px-frame { overflow: hidden; }

/* Home: news */
.home-news { padding: 5.5rem 6rem; }
.home-news h2 { font-size: var(--h-section); }
.home-news__sub { margin-top: .9rem; font-size: max(13px, calc(1.3 * var(--u))); }
.home-news__layout { display: grid; grid-template-columns: 27.9rem 1fr; gap: 0; margin-top: 3rem; }
.home-news__tabs { display: grid; padding-top: 1.7rem; }
.home-news__tab { padding-right: 2.5rem; min-height: 5rem; align-items: flex-start; display: flex; gap: .75rem; text-align: left; color: #5d6b62; font: 600 max(13px, calc(1.58 * var(--u)))/1.2 var(--serif); }
.home-news__tab small { font: 400 max(13px, calc(1.05 * var(--u)))/1.2 var(--sans); }
.home-news__tab span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: .25rem; transition: background-size .7s var(--ease); }
.home-news__tab.is-active span { background-size: 100% 1px; }
.home-news__tab.is-active { color: var(--ink); }
.home-news__tab.is-active small { color: var(--moss); }
.home-news__all { display: inline-flex; align-items: center; gap: .6rem; margin: 2.3rem 0 0 4rem; font: italic 600 max(13px, calc(1.2 * var(--u)))/1 var(--sans); color: var(--muted); }
.home-news__panel { display: grid; grid-template-columns: 27.6rem 1fr; gap: 1.9rem; padding: .7rem 1.6rem .9rem .7rem; background: var(--bg-card); border-radius: .5rem; min-height: 22rem; }
.home-news__panel img { width: 100%; height: 20.7rem; object-fit: cover; border-radius: .5rem; }
.home-news__no { font-size: max(13px, calc(1 * var(--u))); color: var(--muted); margin-top: .6rem; }
.home-news__panel h3 { font-size: max(13px, calc(1.68 * var(--u))); font-weight: 700; color: #17231b; margin: 1.3rem 0 .4rem; line-height: 1.17; max-width: 25rem; }
.home-news__excerpt { font-size: max(13px, calc(1.14 * var(--u))); font-weight: 400; line-height: 1.3; color: #3f4f45; }
.home-news__date { font: italic 400 max(13px, calc(1.02 * var(--u)))/1 var(--sans); color: var(--muted); margin-top: 1.7rem; }
.home-news__more { display: flex; justify-content: flex-end; align-items: center; gap: .9rem; margin-top: .9rem; font: italic 400 max(13px, calc(1.2 * var(--u)))/1 var(--sans); color: var(--ink); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { display: flex; align-items: center; gap: .7rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { font-size: .85em; stroke-width: 2; transition: transform .2s; }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq details > p { font-size: max(13px, calc(1.15 * var(--u))); line-height: 1.5; color: #3f4f45; padding-bottom: 1.2rem; }
.faq--serif summary { font: 500 max(13px, calc(1.42 * var(--u)))/1.2 var(--serif); padding: 1.05rem 0 1.15rem; color: var(--ink); }
.faq--sans summary { font: 500 max(13px, calc(1.3 * var(--u)))/1.35 var(--sans); padding: 1.6rem 0; color: var(--ink); align-items: baseline; }
.faq--sans details > p { padding-left: 1.75rem; }

/* Home: FAQ */
.home-faq { display: grid; grid-template-columns: 1fr 48rem; gap: 3rem; background: var(--bg-faq); padding: 5.5rem 6.8rem 6rem; }
.home-faq h2 { font-size: var(--h-section); line-height: 1.12; max-width: 25rem; margin-top: .9rem; }
.home-faq__intro p { font-size: max(13px, calc(1.1 * var(--u))); line-height: 1.37; max-width: 23.5rem; margin-top: 2.2rem; color: #3e4c43; }
.home-faq .faq { margin-top: 2.2rem; }

/* Home: standards */
.standards { display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-top: 1px solid var(--line-soft); background: var(--bg-standards); padding: 2.6rem 4.05rem 2.65rem 5.5rem; }
.standards h2 { font-size: max(13px, calc(1.8 * var(--u))); color: var(--ink); }
.standards__logos { display: flex; align-items: center; gap: 3.1rem; }
.standards__logos img { flex: none; width: 4.65rem; }
.standards__logos .logo-iso { width: 5.4rem; }
.standards__logos .logo-sedex { width: 7.25rem; }
.standards__logos .logo-esg { width: 6.5rem; }

/* CTA band */
.cta-wrap { padding: 4rem 5.95rem; }
.cta { position: relative; border-radius: 1.8rem; overflow: hidden; height: 27.9rem; }
.cta > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.cta::after { content: ''; position: absolute; inset: 0; background: rgba(14, 34, 22, .6); }
.cta__body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 1rem; }
.cta h2 { font-size: var(--h-section); color: #fff; }
.cta p { font-size: max(13px, calc(1.3 * var(--u))); margin: 1.05rem 0 2rem; }
.cta .btn { background: #f4f6e6; color: var(--brand); font-size: max(13px, calc(1.55 * var(--u))); padding: .7rem 1.3rem; }
.cta .btn:hover { background: #fff; }

/* Footer */
.site-footer { background: var(--footer); color: var(--footer-text); padding: 4.7rem 1.3rem 1.8rem; }
.footer-grid { display: grid; grid-template-columns: 28rem 19.4rem 17rem 1fr; padding-left: 4.9rem; }
.footer-logo { display: inline-block; font: 500 max(13px, calc(2.75 * var(--u)))/1 var(--serif); padding-bottom: 1.3rem; position: relative; }
.footer-logo::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.7rem; border-top: 1px solid currentColor; }
.footer-brand p { font: italic 600 max(13px, calc(1.33 * var(--u)))/1.25 var(--serif); margin-top: 1.5rem; max-width: 18rem; }
.footer-social { display: flex; gap: 1.1rem; margin-top: 1.8rem; align-items: center; }
.footer-social a { display: flex; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; }
.footer-social img { max-width: 100%; max-height: 100%; width: auto; }
.site-footer h2 { font: 400 max(13px, calc(1.35 * var(--u)))/1.2 var(--sans); color: inherit; padding-bottom: 1.3rem; position: relative; margin-bottom: 1.55rem; }
.site-footer h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.85rem; border-top: 1px solid currentColor; }
.site-footer li { margin-bottom: 1.33rem; font-size: max(13px, calc(1.2 * var(--u))); line-height: 1.2; }
.site-footer .roomy li { margin-bottom: 1.8rem; }
.site-footer li a:hover { text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: -.5rem; }
.footer-wordmark { width: 59rem; }
.footer-bottom p { font: 400 max(13px, calc(.85 * var(--u)))/1 var(--ui); color: #cfd6c9; white-space: nowrap; margin-bottom: .2rem; }
.footer-wordmark { flex: 0 1 59rem; min-width: 0; }
.footer-bottom .footer-legal { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .7rem 1.4rem; min-width: 0; line-height: 1.3; white-space: normal; }
.footer-legal span { white-space: nowrap; }
.footer-legal a, .footer-legal button { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* About */
.about-intro { text-align: center; padding: 4rem 6.6rem 0; }
.about-intro h1 { font-size: var(--h-page); color: #0a0f0b; line-height: 1.17; font-weight: 600; }
.about-intro p { font-size: max(13px, calc(1.31 * var(--u))); letter-spacing: -.012em; line-height: 1.5; max-width: 62rem; margin: 2rem auto 2.6rem; }
.about-intro img { width: 100%; height: 44.7rem; object-fit: cover; }
.about-facts { display: grid; grid-template-columns: 37rem 1fr; gap: 5rem; padding: 4.5rem 6.6rem 5rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.stats > div { padding: 2.4rem 0 2.9rem 1.5rem; border-bottom: 2px solid #d4d4d4; }
.stats > div:nth-child(odd) { border-right: 2px solid #d4d4d4; }
.stats > div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 1.8rem; }
.stats > div:nth-child(-n+2) { padding-top: 1.2rem; }
.stats dd { font-size: max(13px, calc(1.82 * var(--u))); line-height: 1.2; }
.stats dt { font-size: max(13px, calc(1.15 * var(--u))); font-weight: 400; margin-top: 1.05rem; }
.about-facts__text p { font-size: max(13px, calc(1.32 * var(--u))); font-weight: 400; line-height: 1.56; color: #1c1c1c; }
.about-facts__text p + p { margin-top: 2rem; }
.about-quote { display: flex; align-items: center; justify-content: center; min-height: 19rem; background: var(--bg-green); padding: 2rem; text-align: center; }
.about-quote blockquote { font: italic 600 max(13px, calc(2.95 * var(--u)))/1.15 var(--serif); color: #3a6431; max-width: 66rem; }
.about-press { padding: 4.5rem 6.15rem 0; }
.about-press img { width: 100%; height: 46.6rem; object-fit: cover; }
.history { display: grid; grid-template-columns: 32.25rem 1fr; padding: 4.5rem 6rem 0; }
.history__intro h2 { font-size: var(--h-section); line-height: 1.17; color: var(--ink); margin-top: .3rem; }
.history__intro p { font-size: max(13px, calc(1.32 * var(--u))); line-height: 1.12; margin-top: 1.9rem; max-width: 26rem; }
.timeline { border-left: 2px solid #5f7e5a; padding: 2.2rem 0 1rem 7.1rem; }
.timeline li { position: relative; padding-bottom: 4rem; }
.timeline li:last-child { padding-bottom: 1.4rem; }
.timeline li::before { content: ''; position: absolute; left: -7.85rem; top: .1rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #3a6431; }
.timeline__years { font: 600 max(13px, calc(1.6 * var(--u)))/1.1 var(--serif); color: #2f7a24; }
.timeline h3 { font-size: max(13px, calc(1.92 * var(--u))); font-weight: 700; color: #151d17; margin: .55rem 0 2rem; line-height: 1.15; }
.timeline p:not(.timeline__years) { font-size: max(13px, calc(1.38 * var(--u))); font-weight: 400; line-height: 1.24; max-width: 44rem; }
.timeline p + p:not(.timeline__years) { margin-top: 1.8rem; }
.areas { padding: 4.5rem 5rem; }
.areas h2 { font-size: var(--h-section); margin-left: .25rem; }
.areas__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.7rem; margin: 2.8rem 0; }
.areas__grid img { width: 100%; aspect-ratio: 310 / 262; object-fit: cover; }
.areas > p { font-size: max(13px, calc(1.42 * var(--u))); line-height: 1.45; margin-left: .25rem; }
.vision { position: relative; }
.vision__bg { display: block; width: 100%; height: auto; }
.vision__body { position: absolute; left: 3.7rem; top: 9.4rem; width: 35rem; }
.vision h2 { display: inline-block; font-size: var(--h-section); border-bottom: 2px solid #5b8a56; line-height: 1.12; margin-bottom: 2.5rem; color: #2a4a2f; }
.vision p { font-size: max(13px, calc(1.38 * var(--u))); line-height: 1.25; }
.vision__steps { display: flex; gap: 2.1rem; margin-top: 3.2rem; }
.vision__steps li { width: 4.7rem; text-align: center; font: 600 max(13px, calc(1.02 * var(--u)))/1.15 var(--sans); color: #2a5a30; }
.vision__steps span { display: flex; align-items: center; justify-content: center; width: 4.45rem; height: 4.45rem; margin: 0 auto .6rem; border-radius: 50%; background: #dfebc2; padding: .6rem; }
.sites { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; padding: 5.5rem 5.75rem 4.5rem; }
.sites img, .sites__placeholder { width: 100%; height: 24.2rem; object-fit: cover; }
.sites__placeholder { background: var(--placeholder); }
.sites h2 { font: 500 max(13px, calc(1.92 * var(--u)))/1.1 var(--serif); color: #2a4f2e; margin: 1.75rem 0 1.6rem; letter-spacing: .01em; }
.sites p { font-size: max(13px, calc(1.27 * var(--u))); font-weight: 400; line-height: 1.2; max-width: 40rem; }
.certs { padding: 1rem 6.15rem 1rem; }
.certs h2 { font-size: var(--h-section); }
.certs > p { font-size: max(13px, calc(1.38 * var(--u))); font-weight: 400; margin-top: 1.6rem; }
.certs__grid { display: grid; grid-template-columns: repeat(5, 14.3rem); justify-content: space-between; margin-top: 2.8rem; }
.certs__grid img { width: 100%; aspect-ratio: 229 / 328; object-fit: cover; box-shadow: .35rem .5rem .9rem rgba(0, 0, 0, .18); }

/* Product pages */
.product-hero { position: relative; overflow: hidden; height: clamp(26rem, 78svh, 50rem); background: var(--ink-strong); }
.product-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(36px) brightness(.72) saturate(1.1); transform: scale(1.15); }
.product-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(transparent, rgba(12, 22, 15, .66)); }
.product-hero__text { position: absolute; left: 4.55rem; right: 4.55rem; bottom: 2.7rem; z-index: 1; color: #fff; }
.product-hero__text p { font-size: max(13px, calc(1.82 * var(--u))); font-weight: 500; }
.product-hero__text h1 { font-size: max(13px, calc(4.4 * var(--u))); font-weight: 600; line-height: 1.22; color: #fff; margin-top: .9rem; max-width: 76rem; }
.product-row { border-bottom: 1px solid var(--line); padding: 3.4rem 0; }
.product-row__inner { display: grid; grid-template-columns: 24rem minmax(0, 1fr); margin: 0 6.8rem; }
.product-row:first-of-type { padding-top: 4.2rem; }
.product-row h2 { font-size: max(13px, calc(2.7 * var(--u))); font-weight: 600; color: #2a4f2e; line-height: 1.1; padding-right: 1.5rem; }
.product-row p { font-size: max(13px, calc(1.25 * var(--u))); font-weight: 400; line-height: 1.5; }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 3rem; }
.types li { position: relative; padding-left: 1.05rem; }
.types li::before { content: ''; position: absolute; left: 0; top: .78rem; width: .25rem; height: .25rem; border-radius: 50%; background: #2a4f2e; }
.types h3 { font-size: max(13px, calc(1.33 * var(--u))); font-weight: 600; line-height: 1.3; color: #2a4f2e; }
.types p { font-size: max(13px, calc(1.05 * var(--u))); line-height: 1.75; color: #2a4f2e; margin: .1rem 0 0 .2rem; }
.section-head { margin: 0 6.8rem; }
.section-head h2 { font-size: var(--h-section); font-weight: 600; line-height: 1.17; }
.gallery { padding-top: 4rem; }
.gallery .section-head { margin-bottom: 2.4rem; }
.gallery__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; overflow: clip; }
.gallery__pair img { width: 100%; height: 30rem; object-fit: cover; }
.gallery__pair .crop-bottom { object-position: 50% 58%; }
.gallery__wide { margin-bottom: 1rem; }
.gallery__wide img { width: 100%; height: 42.6rem; object-fit: cover; }
.product-faq { padding: 4rem 0 4.5rem; }
.product-faq .faq { margin: 2.2rem 6.8rem 0; }
.others { border-top: 1px solid var(--line-soft); padding: 4rem 0 0; }
.others__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin: 2.6rem 6.8rem 0; }

/* News list */
.news-page { padding: 4rem 6.5rem 0; }
.news-page h1 { font-size: var(--h-page); color: #0a0f0b; font-weight: 600; }
.news-tools { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.news-tabs { display: flex; gap: 6.2rem; }
.news-tabs button { font-size: max(13px, calc(1.3 * var(--u))); color: #7c8780; }
.news-tabs button:hover, .news-tabs .is-active { color: var(--moss); }
.news-search { position: relative; display: block; width: 20.65rem; }
.news-search input { width: 100%; height: 2.65rem; padding: 0 2.6rem 0 1rem; border: 1px solid #cfd3c0; border-radius: .25rem; font: 400 max(13px, calc(1.05 * var(--u)))/1 var(--ui); background: #fff; }
.news-search .icon { position: absolute; right: .85rem; top: .7rem; width: 1.3rem; height: 1.3rem; color: #8b9c7f; }
.news-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3.4rem 2.5rem; padding: 3.1rem 2.35rem 0; }
.news-card { grid-column: span 2; background: #fff; border: 1px solid #9ba49d; }
.news-card.is-large { grid-column: span 3; }
.news-card > a { display: flex; flex-direction: column; height: 100%; }
.news-card img { width: 100%; aspect-ratio: 374 / 237; object-fit: cover; }
.news-card__body { display: flex; flex-direction: column; flex: 1; padding: .9rem .65rem 1rem; }
.news-card__meta { font-size: max(13px, calc(.95 * var(--u))); color: var(--moss); }
.news-card h3 { font-size: max(13px, calc(1.25 * var(--u))); font-weight: 600; color: #17231b; margin: 1rem 0 .55rem; line-height: 1.2; }
.news-card__excerpt { font-size: max(13px, calc(.89 * var(--u))); font-weight: 400; color: #4b5a50; line-height: 1.27; }
.read-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .55rem; font: italic 600 max(13px, calc(1 * var(--u)))/1 var(--sans); color: #6d8a69; }
.news-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.news-card.is-large img { aspect-ratio: 431 / 273; }
.news-card.is-large .news-card__body { padding: 1rem .95rem 1.1rem; }
.news-card.is-large .news-card__meta { font-size: max(13px, calc(1.05 * var(--u))); }
.news-card.is-large h3 { font-size: max(13px, calc(1.7 * var(--u))); margin: 1.05rem 0 1rem; }
.news-card.is-large .news-card__excerpt { font-size: max(13px, calc(1.1 * var(--u))); line-height: 1.3; }
.news-card.is-large .read-more { font-size: max(13px, calc(1.22 * var(--u))); padding-top: 1rem; }
.news-empty { text-align: center; padding: 5rem 0; color: var(--muted); }
.pager { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; }
.pager button { width: 2.5rem; height: 2.5rem; border: 1px solid var(--ink); font-size: max(13px, calc(1.15 * var(--u))); }
.pager .is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Article */
.article { max-width: 63.4rem; margin: 0 auto; padding: 4rem 0 0; }
.article h1 { font-size: var(--h-page); font-weight: 700; color: #050806; line-height: 1.17; }
.article__meta { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 2.2rem 0 2rem; padding: .9rem 0; max-width: 60.7rem; border-block: 1px solid var(--line); font-size: max(13px, calc(1.3 * var(--u))); }
.article__meta b { font-weight: 400; }
.article__meta strong { font-weight: 500; }
.article__meta span { color: #54605a; }
.article > p { font-size: max(13px, calc(1.3 * var(--u))); font-weight: 400; line-height: 1.27; color: #2b2f2c; margin-bottom: 1.75rem; }
.article__img { width: 100%; aspect-ratio: 1014 / 600; object-fit: cover; margin: 2.8rem 0; }
.article__img.is-small { width: auto; max-width: 100%; aspect-ratio: auto; }
.article-nav { display: flex; justify-content: space-between; padding: 2.5rem 7.3rem 3.5rem; }
.article-nav a { display: inline-flex; align-items: center; gap: .8rem; font-size: max(13px, calc(1.28 * var(--u))); font-weight: 400; color: var(--moss); }
.article-nav a:hover { text-decoration: underline; }
.article-nav .icon { width: 1.6rem; height: 1.6rem; stroke-width: 1.3; }
.related { background: var(--bg-green); padding: 3rem 4.1rem 3.5rem; }
.related__eyebrow { display: flex; align-items: center; gap: .6rem; font-size: max(13px, calc(1.27 * var(--u))); color: var(--moss); }
.related__eyebrow::before { content: ''; width: 3.7rem; border-top: 1px solid currentColor; }
.related h2 { font-size: var(--h-section); margin: 1.2rem 0 1.7rem; }
.related__grid { display: grid; grid-template-columns: repeat(3, 24.3rem); justify-content: space-between; }
.related .news-card { grid-column: auto; }
.related .news-card img { aspect-ratio: 389 / 245; }

/* Studio */
.studio-intro { text-align: center; padding: 4rem 7.2rem 0; }
.studio-intro h1 { font-size: var(--h-page); max-width: 70rem; margin: 0 auto; line-height: 1.17; font-weight: 600; }
.studio-intro p { font-size: max(13px, calc(1.32 * var(--u))); line-height: 1.38; max-width: 60rem; margin: 2rem auto 2.4rem; }
.studio-intro img { width: 100%; height: 47.4rem; object-fit: cover; }
.zones { margin: 3.4rem 6.8rem 0; border-top: 1px solid var(--line); }
.zone { display: grid; grid-template-columns: 40.4rem 1fr; gap: 2.2rem; align-items: center; padding: 3.2rem 0; border-bottom: 1px solid var(--line); }
.zone img { width: 100%; height: 30.3rem; object-fit: cover; }
.zone--flip img { order: 2; }
.zone:last-child img { height: 23.8rem; }
.zone--flip { grid-template-columns: 1fr 40.4rem; }
.zone__label { display: flex; gap: 1.2rem; font-size: max(13px, calc(1.1 * var(--u))); color: var(--moss); }
.zone h2 { font: 600 max(13px, calc(2.5 * var(--u)))/1.15 var(--serif); color: var(--ink); margin: 1rem 0 1.3rem; }
.zone div > p:not(.zone__label) { font-size: max(13px, calc(1.32 * var(--u))); font-weight: 400; line-height: 1.27; max-width: 38rem; }
.approach { text-align: center; padding: 4.5rem 2rem 5rem; }
.approach__eyebrow { font-size: max(13px, calc(1.1 * var(--u))); color: var(--moss); }
.approach h2 { font: italic 600 max(13px, calc(4.2 * var(--u)))/1.14 var(--serif); color: #3a6431; margin: 1.8rem 0 1.7rem; }
.approach > p:last-child { font-size: max(13px, calc(1.32 * var(--u))); font-weight: 400; }
.tour-band { display: grid; grid-template-columns: 56rem 1fr; align-items: center; background: #ebf0e6; padding: 3.8rem 6.8rem; }
.tour-band h2 { font-size: var(--h-section); color: var(--brand); font-weight: 600; }
.tour-band p { font-size: max(13px, calc(1.15 * var(--u))); line-height: 1.3; max-width: 34rem; margin-top: 2.3rem; color: #173f22; }
.tour-band .btn { justify-self: end; margin-left: 0; font-size: max(13px, calc(1.55 * var(--u))); padding: .7rem 1.45rem; }

/* Forms */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.45rem; }
.field { display: block; margin-bottom: 1.45rem; }
.field__label { display: block; font: 600 max(13px, calc(.93 * var(--u)))/1.2 var(--ui); color: #111; margin-bottom: .95rem; }
.field__label em, .check em { font-style: normal; color: #d33; }
.field__label small { font: 400 max(13px, calc(.93 * var(--u)))/1 var(--ui); margin-left: .55rem; }
.field input:not([type='file']), .field select, .field textarea { width: 100%; min-height: 3.3rem; padding: 0 .85rem; border: 1px solid var(--line-soft); border-radius: .2rem; background: #fff; font: 400 max(13px, calc(1 * var(--u)))/1.3 var(--ui); }
.field textarea { padding: .9rem .85rem; resize: vertical; min-height: 8.9rem; display: block; }
.field select:invalid { color: #6c7570; }
::placeholder { color: #6c7570; opacity: 1; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: #c33 !important; }
.check.is-invalid span { color: #b02a2a; }
.file-box { display: block; background: var(--bg-green); border: 1px solid #89928b; border-radius: .25rem; padding: .95rem; }
.file-box input { width: 100%; font: 400 max(13px, calc(.95 * var(--u)))/1.2 var(--ui); }
.check { display: flex; gap: .95rem; align-items: flex-start; font: 400 max(13px, calc(1 * var(--u)))/1.2 var(--ui); color: #4e5551; }
.check input { flex: none; width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; accent-color: var(--moss); }
.check a { font-weight: 500; color: #111; text-decoration: underline; }
.form-error { margin-top: 1rem; font: 500 max(13px, calc(1 * var(--u)))/1.3 var(--ui); color: #b02a2a; }

/* Quote */
.quote-page { padding: 4.3rem 3.1rem 0; }
.quote-page h1 { font-size: var(--h-page); font-weight: 600; color: #050806; line-height: 1.1; max-width: 62rem; letter-spacing: -.012em; }
.quote-page__sub { font-size: max(13px, calc(1.25 * var(--u))); font-weight: 400; line-height: 1.27; color: #1c3a22; max-width: 45rem; margin-top: 2.2rem; }
.quote-grid { display: grid; grid-template-columns: 45.9rem 1fr; gap: 2.3rem; margin-top: 3.1rem; align-items: start; }
.quote-form { border: 1px solid #a9aca9; padding: 1rem 1rem 1.3rem 1.3rem; }
.quote-form h2 { font-size: max(13px, calc(2 * var(--u))); font-weight: 500; color: #111c15; margin: 0 0 1.15rem; }
.quote-form .field:last-of-type { margin-bottom: 1rem; }
.quote-form .form-row + h2, .quote-form .field + h2 { margin-top: 2.4rem; }
.quote-form > h2:first-child { margin-left: .6rem; }
.quote-form > .btn { margin-top: 1.6rem; min-width: 17rem; padding: 1.1rem 2rem; }
.quote-aside > img { width: 100%; height: 49.7rem; object-fit: cover; border-radius: .6rem; }
.quote-aside ul { margin-top: 1.6rem; }
.quote-aside li { display: flex; gap: 1.1rem; align-items: center; padding: 1.55rem 0; border-top: 1px solid var(--line); }
.badge { display: flex; flex: none; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--bg-green); font: 500 max(13px, calc(1.5 * var(--u)))/1 var(--ui); color: #143d1b; }
.quote-aside h3 { font: 500 max(13px, calc(1.35 * var(--u)))/1.2 var(--ui); color: #1f3d27; letter-spacing: -.01em; }
.quote-aside p { font-size: max(13px, calc(1 * var(--u))); font-weight: 400; color: #2e4a35; margin-top: .4rem; }

/* Schedule */
.schedule-page { padding: 3.5rem 4.5rem 0; }
.schedule-page h1 { text-align: center; font-size: var(--h-page); color: var(--brand); line-height: 1.1; }
.schedule-page__sub { text-align: center; font: 400 max(13px, calc(1.25 * var(--u)))/1.38 var(--ui); color: #38423b; max-width: 62rem; margin: 3.5rem auto 0; }
.schedule-grid { display: grid; grid-template-columns: 19.75rem 1fr; gap: 3.5rem; margin-top: 4.7rem; align-items: start; }
.tour-info > img { width: 100%; height: 14.7rem; object-fit: cover; }
.tour-info h2 { font-size: max(13px, calc(3.05 * var(--u))); font-weight: 500; color: var(--brand); margin: 1.7rem 0 2.3rem; }
.tour-info__facts li { display: flex; align-items: center; gap: .85rem; font-size: max(13px, calc(1.02 * var(--u))); margin-bottom: 1.15rem; }
.tour-info .icon { font-size: max(13px, calc(1.15 * var(--u))); }
.tour-info h3 { font: 500 max(13px, calc(.78 * var(--u)))/1 var(--sans); letter-spacing: .13em; color: #36523c; border-top: 1px solid var(--line-soft); margin-top: 1.5rem; padding-top: 1.7rem; }
.tour-info__topics { margin-top: 1.4rem; }
.tour-info__topics li { display: flex; align-items: center; gap: .85rem; font-size: max(13px, calc(.95 * var(--u))); margin-bottom: 1.15rem; }
.picker { border: 1px solid #dfe2d1; border-radius: .6rem; padding: 1.9rem 1.95rem 1.65rem; }
.picker h2 { font: 400 max(13px, calc(1.95 * var(--u)))/1.15 var(--serif-ui); color: var(--brand); padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1.6rem; }
.picker__grid { display: grid; grid-template-columns: 27.5rem 1fr; gap: 2.4rem; }
.calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.calendar__head h3 { font: 400 max(13px, calc(1.6 * var(--u)))/1 var(--serif-ui); color: var(--brand); }
.calendar__head button { width: 2.2rem; height: 2.2rem; }
.calendar__head button:disabled { opacity: .3; cursor: default; }
.calendar__head .icon { display: block; margin: auto; font-size: max(13px, calc(1.25 * var(--u))); }
.calendar__week, .calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .43rem .55rem; text-align: center; }
.calendar__week { font: 500 max(13px, calc(.8 * var(--u)))/1 var(--ui); color: #55605a; margin-bottom: .85rem; }
.calendar__days > * { height: 2.5rem; border-radius: .25rem; background: #fbfbf8; }
.calendar__days button { position: relative; background: #e7ece0; font: 500 max(13px, calc(.9 * var(--u)))/1 var(--ui); color: #233a29; }
.calendar__days button:not(:disabled)::after { content: ''; position: absolute; left: 50%; bottom: .32rem; width: .2rem; height: .2rem; margin-left: -.1rem; border-radius: 50%; background: currentColor; }
.calendar__days button:disabled { background: #fbfbf8; color: #b9bcb4; cursor: default; }
.calendar__days button:not(:disabled):hover { background: var(--pill); }
.calendar__days .is-selected, .calendar__days .is-selected:hover { background: var(--moss) !important; color: #fff; font-weight: 600; }
.calendar__note { position: relative; margin-top: 1rem; padding-left: .95rem; font: 400 max(13px, calc(.8 * var(--u)))/1 var(--sans); color: #6b736e; }
.calendar__note::before { content: ''; position: absolute; left: .1rem; top: .28rem; width: .28rem; height: .28rem; border-radius: 50%; background: var(--moss); }
.slots__date { font: 600 max(13px, calc(1 * var(--u)))/1.2 var(--sans); color: var(--moss); }
.slots__hint { font-size: max(13px, calc(.85 * var(--u))); color: #6b736e; margin-top: .5rem; }
.tz { position: relative; display: flex; align-items: center; margin: 1.1rem 0; }
.tz > .icon { position: absolute; pointer-events: none; }
.tz > .icon:first-of-type { left: .8rem; font-size: max(13px, calc(1.1 * var(--u))); }
.tz > .icon:last-of-type { right: .8rem; font-size: max(13px, calc(1 * var(--u))); }
.tz select { width: 100%; height: 3.05rem; padding: 0 2.3rem; border: 1px solid #dfe2d1; border-radius: .25rem; background: #fff; font: 400 max(13px, calc(.9 * var(--u)))/1 var(--sans); appearance: none; -webkit-appearance: none; }
.slots__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .45rem; }
.slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.slot span { display: flex; align-items: center; justify-content: center; gap: .55rem; height: 2.75rem; border: 1px solid #dcdfcf; border-radius: .25rem; background: #fdfcf8; font: 400 max(13px, calc(.95 * var(--u)))/1 var(--sans); cursor: pointer; }
.slot span .icon { display: none; font-size: max(13px, calc(.9 * var(--u))); }
.slot span:hover { background: var(--pill); }
.slot input:checked + span { background: var(--moss); border-color: var(--moss); color: #fff; }
.slot input:checked + span .icon { display: block; }
.slot input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.slots__note { font-size: max(13px, calc(.8 * var(--u))); color: #6b736e; margin-top: 1.05rem; }
.schedule-form__title { font: 400 max(13px, calc(1.95 * var(--u)))/1.15 var(--serif-ui); color: var(--brand); margin-top: 2.2rem; }
.schedule-form__hint { font-size: max(13px, calc(.85 * var(--u))); color: #6b736e; margin: 1.15rem 0 1.65rem; }
.schedule-form .field__label { font-size: max(13px, calc(1.05 * var(--u))); margin-bottom: .75rem; }
.schedule-form .form-row { gap: 0 3.5rem; }
.schedule-form .field { margin-bottom: 1.2rem; }
.schedule-form .field input:not([type='file']) { min-height: 2.85rem; }
.schedule-form .field textarea { min-height: 6rem; }
.field--count { position: relative; }
.field--count small { position: absolute; right: .9rem; bottom: .75rem; font: 400 max(13px, calc(.72 * var(--u)))/1 var(--ui); color: #7b827e; pointer-events: none; }
.check--small { font-size: max(13px, calc(.8 * var(--u))); color: #222; gap: .75rem; align-items: center; }
.check--small input { width: 1rem; height: 1rem; margin: 0; }
.booking-bar { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 2rem; padding: 2.1rem 1.6rem 2.1rem 1.6rem; background: var(--bg-green); border-radius: .5rem; }
.booking-bar__date { font: 400 max(13px, calc(1.75 * var(--u)))/1.1 var(--serif-ui); color: var(--brand); }
.booking-bar__time { font-size: max(13px, calc(.85 * var(--u))); margin-top: .8rem; }
.booking-bar__type { font-size: max(13px, calc(.8 * var(--u))); color: #6b736e; margin-top: .5rem; }
.booking-bar .btn { font-size: max(13px, calc(1.7 * var(--u))); padding: .7rem 1.6rem; flex: none; }

/* Thanks */
.thanks { padding: 5.5rem 2rem; }
.thanks__card { max-width: 57.6rem; margin: 0 auto; padding: 5rem 2rem 4.5rem; border: 2px solid #d6d8d6; border-radius: .6rem; text-align: center; }
.thanks h1 { font-size: max(13px, calc(3.1 * var(--u))); font-style: italic; font-weight: 600; color: #15201a; }
.thanks p { font-size: max(13px, calc(1.3 * var(--u))); line-height: 1.27; color: #5e6862; max-width: 45rem; margin: 3.7rem auto 4.8rem; }
.thanks .btn { min-width: 17rem; }

/* FAQ page */
.faq-page { padding: 4rem 6.5rem 1rem; }
.faq-page h1 { font-size: var(--h-page); color: #0a0f0b; font-weight: 600; }
.faq-page__sub { font-size: max(13px, calc(1.3 * var(--u))); line-height: 1.5; max-width: 52rem; margin-top: 1.6rem; color: #3e4c43; }
.faq-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 4rem; margin-top: 2.6rem; align-items: start; border-top: 1px solid var(--line); padding-top: 3.4rem; }
.faq-nav { position: sticky; top: 7rem; display: grid; gap: .25rem; }
.faq-nav a { display: block; padding: .6rem 1rem; border-radius: 2rem; font: 400 max(13px, calc(1.5 * var(--u)))/1.2 var(--serif-ui); color: var(--brand); transition: background-color .35s; }
.faq-nav a:hover, .faq-nav a.is-active { background: var(--pill); }
.faq-group + .faq-group { margin-top: 3.4rem; }
.faq-group { scroll-margin-top: 7rem; }
.faq-group h2 { font-size: calc(2.7 * var(--u)); font-weight: 600; color: #2a4f2e; margin-bottom: 1.2rem; }
.home-faq__all { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; font: italic 600 max(13px, calc(1.2 * var(--u)))/1 var(--sans); color: var(--muted); }
.home-faq__all .icon { transition: transform .5s var(--ease); }
.home-faq__all:hover .icon { transform: translateX(.3em); }

/* Contact page */
.contact-page { padding: 4rem 6.5rem 0; }
.contact-page h1 { font-size: var(--h-page); color: #0a0f0b; font-weight: 600; }
.contact-page__sub { font-size: max(13px, calc(1.3 * var(--u))); line-height: 1.5; max-width: 52rem; margin-top: 1.6rem; color: #3e4c43; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 45.9rem; gap: 3rem; margin-top: 3.6rem; align-items: start; }
.contact-aside > img { height: 24rem; }
.contact-aside p a:hover { text-decoration: underline; }
.contact-aside .badge .icon { font-size: 1.5rem; }
.contact-links { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; padding-top: 1.55rem; border-top: 1px solid var(--line); }
.contact-links a { display: inline-flex; align-items: center; gap: .6rem; font: italic 600 max(13px, calc(1.25 * var(--u)))/1.2 var(--sans); color: var(--moss); }
.contact-links .icon { transition: transform .5s var(--ease); }
.contact-links a:hover .icon { transform: translateX(.3em); }
.contact-sites { padding: 4.5rem 6.5rem 0; }
.contact-sites h2 { font-size: var(--h-section); }
.contact-sites ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; margin-top: 2.8rem; }
.contact-sites li { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.contact-sites h3 { font: 500 max(13px, calc(1.6 * var(--u)))/1.15 var(--serif); color: #2a4f2e; letter-spacing: .01em; }
.contact-sites p { font-size: max(13px, calc(1.1 * var(--u))); line-height: 1.45; margin-top: .9rem; }

/* Hero: first slide's supporting line and actions */
.slide__sub { max-width: 54rem; margin-bottom: 1.5rem; }
.slide__sub span { display: block; font: 400 max(13px, calc(1.3 * var(--u)))/1.45 var(--sans); color: #fff; }
.slide__row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.slide__row .btn { background: #f4f6e6; color: var(--brand); }
.slide__row .btn:hover { background: #fff; }

/* Home: who we work with */
.audience { padding: 5.5rem 4.05rem; }
.audience .collection__head h2 { font-size: var(--h-section); margin-top: .4rem; }
.audience .collection__head > p { max-width: 33rem; font-size: max(13px, calc(1.3 * var(--u))); line-height: 1.6; margin-bottom: .3rem; }
.audience__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; margin-top: 3rem; }
.audience-card { display: flex; flex-direction: column; padding: 1.8rem 1.8rem 1.6rem; min-height: 14rem; background: var(--bg-card); border-radius: .5rem; transition: background-color .4s; }
.audience-card:hover { background: var(--pill); }
.audience-card small { font-size: max(13px, calc(1 * var(--u))); color: var(--muted); }
.audience-card h3 { font-size: calc(2 * var(--u)); font-weight: 600; margin: 1rem 0 .9rem; }
.audience-card p { font-size: max(13px, calc(1.2 * var(--u))); line-height: 1.5; color: #3f4f45; }
.audience-card__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.4rem; font: italic 600 max(13px, calc(1.1 * var(--u)))/1 var(--sans); color: var(--moss); }
.audience-card__more .icon { transition: transform .5s var(--ease); }
.audience-card:hover .audience-card__more .icon { transform: translateX(.3em); }

/* Home: production sites */
.bases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.4rem; max-width: 50rem; margin-bottom: 2.6rem; }
.bases li { border-top: 1px solid var(--line); padding-top: .8rem; }
.bases strong { display: block; font: 600 max(13px, calc(1.5 * var(--u)))/1.2 var(--serif); color: var(--ink); }
.bases span { display: block; margin-top: .35rem; font-size: max(13px, calc(1.05 * var(--u))); line-height: 1.4; color: #3f4f45; }

/* Shared page intro, and zones used as content rows */
.page-intro { padding: 4rem 6.8rem 0; }
.page-intro h1 { font-size: var(--h-page); color: #0a0f0b; font-weight: 600; }
.text-link { color: var(--moss); text-decoration: underline; text-underline-offset: .2em; }
.page-intro p { font-size: max(13px, calc(1.3 * var(--u))); line-height: 1.5; max-width: 52rem; margin-top: 1.6rem; color: #3e4c43; }
.zones--even { margin-top: 2.6rem; }
.zones--even .zone:last-child img { height: 30.3rem; }
.zones--even .zone:last-child { border-bottom: 0; }
.zone { scroll-margin-top: 6rem; }
.zone__list { margin: 1.2rem 0 0; display: grid; gap: .7rem; max-width: 38rem; }
.zone__list li { position: relative; padding-left: 1.05rem; font-size: max(13px, calc(1.2 * var(--u))); line-height: 1.45; }
.zone__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: .25rem; height: .25rem; border-radius: 50%; background: #2a4f2e; }
.zone__more { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem; font: italic 600 max(13px, calc(1.25 * var(--u)))/1.2 var(--sans); color: var(--moss); }
.zone__more .icon { transition: transform .5s var(--ease); }
.zone__more:hover .icon { transform: translateX(.3em); }

/* Structures & finishes */
.sf { padding: 0 6.8rem; margin-top: 2.6rem; }
.sf-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.4rem; align-items: start; padding: 3.2rem 0; border-top: 1px solid var(--line); scroll-margin-top: 6rem; }
.sf-row--flip .sf-media { order: 2; }
.sf-media { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sf-media img { width: 100%; height: 13rem; object-fit: cover; }
.sf-media img:first-child { grid-column: 1 / -1; height: 25rem; }
.sf-row h2 { font-size: var(--h-section); margin: .8rem 0 1.4rem; }
.sf-list li { padding: .85rem 0; border-top: 1px solid var(--line-soft); }
.sf-list strong { display: block; font: 600 max(13px, calc(1.5 * var(--u)))/1.2 var(--serif); color: var(--ink); }
.sf-list span { display: block; margin-top: .3rem; font-size: max(13px, calc(1.15 * var(--u))); line-height: 1.45; color: #3f4f45; }

/* Privacy settings banner */
.consent { position: fixed; left: 2rem; right: 2rem; bottom: 2rem; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.8rem; background: #fff; border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 1rem 3rem rgba(23, 55, 37, .18); }
.consent__title { font: 600 max(14px, calc(1.5 * var(--u)))/1.2 var(--serif); color: var(--ink); margin-bottom: .4rem; }
.consent p:not(.consent__title) { font-size: max(13px, calc(1.1 * var(--u))); line-height: 1.45; color: #3f4f45; }
.consent a { color: var(--moss); text-decoration: underline; text-underline-offset: .2em; }
.consent__actions { display: flex; flex: none; gap: .7rem; }
.consent__btn { min-width: 8rem; padding: .7rem 1.2rem; border: 1px solid var(--brand); border-radius: .3rem; background: var(--brand); color: #fff; font: 600 max(13px, calc(1.1 * var(--u)))/1 var(--sans); transition: background-color .3s, color .3s; }
.consent__btn:hover { background: var(--moss); }
.consent__btn[data-consent="declined"] { background: #fff; color: var(--brand); }
.consent__btn[data-consent="declined"]:hover { background: var(--pill); }

/* Legal text */
.legal { max-width: 54rem; padding: 2rem 6.8rem 5rem; box-sizing: content-box; }
.legal h2 { font-size: calc(2.2 * var(--u)); font-weight: 600; color: #2a4f2e; margin: 2.2rem 0 .8rem; }
.legal p { font-size: max(14px, calc(1.2 * var(--u))); line-height: 1.6; color: #2b2f2c; margin-bottom: .8rem; }
.legal a { color: var(--moss); text-decoration: underline; text-underline-offset: .2em; }
.legal .btn { margin-top: 1.8rem; }

/* Tablet and phone: single-column layouts with a fixed root size */
@media (max-width: 1100px) {
  :root { --u: 1rem; --h-page: 3.4rem; --h-section: 3rem; }
  html { font-size: 75%; }
  body { font-size: 1.33rem; }
  .contact-page { padding: 3.5rem 1.33rem 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
  .contact-aside > img { height: auto; aspect-ratio: 16 / 10; }
  .contact-sites { padding: 3.5rem 1.33rem 0; }
  .contact-sites ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.33rem; margin-top: 1.8rem; }
  .slide__sub { margin-bottom: 1rem; }
  .audience { padding: 4rem 1.33rem; }
  .audience .collection__head h2 { font-size: 3.4rem; }
  .audience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.33rem; margin-top: 2.5rem; }
  .audience-card { min-height: 0; }
  .audience-card h3 { font-size: 1.95rem; }
  .page-intro { padding: 3.5rem 1.33rem 0; }
  .zones--even { margin-top: 1.5rem; }
  .zones--even .zone:last-child img { height: auto; }
  .zone__list li { font-size: 1.33rem; }
  .sf { padding: 0 1.33rem; margin-top: 1.5rem; }
  .sf-row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2.5rem 0; }
  .sf-row--flip .sf-media { order: 0; }
  .sf-media img { height: auto; aspect-ratio: 4 / 3; }
  .sf-media img:first-child { height: auto; aspect-ratio: 16 / 10; }
  .sf-list span { font-size: 1.3rem; }
  .consent { left: 1rem; right: 1rem; bottom: 1rem; flex-direction: column; align-items: stretch; gap: 1.2rem; padding: 1.4rem; }
  .consent__title { font-size: 1.8rem; }
  .consent p:not(.consent__title) { font-size: 1.25rem; }
  .consent__btn { flex: 1; min-height: 3.67rem; font-size: 1.3rem; }
  .legal { padding: 1rem 1.33rem 3.5rem; box-sizing: border-box; max-width: none; }
  .legal h2 { font-size: 2.2rem; }
  .legal p { font-size: 1.33rem; }
  .footer-legal { flex-wrap: wrap; gap: .8rem 1.4rem; }
  .faq-page { padding: 3.5rem 1.33rem 1rem; }
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 2.5rem; padding-top: 1.5rem; }
  .faq-nav { position: static; display: flex; gap: .4rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .faq-nav a { flex: none; padding: .9rem 1.2rem; }
  .faq-group + .faq-group { margin-top: 3.5rem; }
  .site-header { height: 5.5rem; padding: 0 1.33rem; justify-content: space-between; }
  .logo { font-size: 2.5rem; }
  .nav-toggle { display: flex; font-size: 2.3rem; width: 3.67rem; height: 3.67rem; align-items: center; justify-content: center; color: var(--ink); }
  .nav-toggle .icon:last-child, .nav-open .nav-toggle .icon:first-child { display: none; }
  .nav-open .nav-toggle .icon:last-child { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 1rem 1.33rem 2rem; flex-direction: column; align-items: stretch; gap: 1rem; background: var(--bg-nav); border-top: 1px solid var(--line-soft); box-shadow: 0 1rem 2rem rgba(23, 55, 37, .12); max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
  .nav-open .site-nav { display: flex; }
  .site-nav > ul { position: static; transform: none; white-space: normal; flex-direction: column; align-items: stretch; gap: .25rem; }
  .nav-link { width: 100%; text-align: left; font-size: 1.8rem; border-radius: .5rem; padding: 1.1rem 1rem; }
  .submenu { position: static; transform: none; opacity: 1; visibility: visible; display: block; margin: 0; box-shadow: none; border: 0; padding-left: 1rem; background: none; }
  .submenu a { font-size: 1.6rem; padding: 1rem; }
  .nav-cta { align-self: flex-start; padding: 1rem 1.6rem; }

  .home-hero { height: clamp(36rem, 68svh, 56rem); }
  .slide__cap { left: 1.33rem; right: 1.33rem; bottom: 7rem; }
  .slide__heading { font-size: 3.2rem; }
  .slide__eyebrow { font-size: 1.3rem; }
  .js .hero-ctrl { left: 1.33rem; right: 1.33rem; bottom: 1.5rem; }
  .hero-bars { flex: 1; margin-right: 0; }
  .hero-bar { flex: 1; width: auto; height: 3.67rem; }
  .hero-btn { width: 3.67rem; height: 3.67rem; flex: none; }
  .home-about, .why, .collection, .how, .home-news, .home-faq, .standards, .about-facts, .history, .areas, .sites, .certs, .news-page, .related, .quote-page, .schedule-page, .studio-intro, .about-intro { padding-left: 1.33rem; padding-right: 1.33rem; }
  .home-about { padding-top: 4rem; padding-bottom: 4rem; }
  .home-about__inner, .home-faq, .about-facts, .history, .quote-grid, .schedule-grid, .picker__grid, .tour-band { grid-template-columns: minmax(0, 1fr); }
  .home-about__inner > img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .home-about h2, .why h2, .how > h2, .home-news h2, .areas h2, .certs h2, .tour-band h2 { font-size: 3rem; }
  .collection__head h2, .home-faq h2 { font-size: 3.4rem; }
  .why { padding-top: 4rem; padding-bottom: 4rem; }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.33rem; }
  .why-card { min-height: 0; }
  .approach h2 { font-size: 3rem; }
  .zone h2 { font-size: 2.3rem; }
  .collection { padding-top: 4rem; padding-bottom: 4rem; }
  .collection__head { flex-direction: column; align-items: flex-start; }
  .collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.33rem; margin-top: 2.5rem; }
  .diamonds::before { display: none; }
  .how { padding-top: 4rem; }
  .how > .eyebrow-serif, .how > h2 { margin-left: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); margin: 2.5rem 0 0; gap: 0; }
  .steps::before { left: 1.62rem; right: auto; top: 1rem; bottom: 4rem; border-top: 0; border-left: 1px solid #4d6b53; }
  .steps li { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1.2rem; padding-bottom: 2rem; }
  .steps__dot { grid-row: span 2; width: 3.25rem; height: 3.25rem; }
  .steps h3 { margin: .6rem 0 .5rem; font-size: 1.75rem; }
  .steps p { max-width: none; font-size: 1.25rem; }
  .how__frame { margin-top: 1.5rem; }
  .how__photo { height: auto; aspect-ratio: 16 / 10; }
  .home-news { padding-top: 4rem; padding-bottom: 4rem; }
  .home-news__layout { grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; gap: 2rem; }
  .home-news__tabs { padding-top: 0; }
  .home-news__all { margin: 1.5rem 0 0; }
  .home-news__panel { grid-template-columns: minmax(0, 1fr); padding: .7rem .7rem 1.5rem; gap: 1rem; }
  .home-news__panel img { height: auto; aspect-ratio: 16 / 10; }
  .home-news__panel > div { padding: 0 .7rem; }
  .home-faq { padding-top: 4rem; padding-bottom: 4rem; gap: 2rem; }
  .home-faq h2, .home-faq__intro p { max-width: none; }
  .home-faq__intro p { margin-top: 1.2rem; font-size: 1.33rem; }
  .faq details > p { font-size: 1.3rem; }
  .standards { flex-direction: column; align-items: flex-start; padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .standards__logos { flex-wrap: wrap; gap: 1.5rem 2rem; }
  .cta-wrap { padding: 3rem 1.33rem; }
  .cta { height: auto; min-height: 28rem; display: grid; }
  .cta h2 { font-size: 3.2rem; }
  .cta > img { position: absolute; inset: 0; }
  .cta__body { position: relative; padding: 3rem 1.5rem; }
  .site-footer { padding: 3.5rem 1.33rem 1.5rem; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; gap: 2.5rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-top: 1rem; overflow-x: clip; }
  .footer-wordmark { flex: none; width: 100%; }
  .footer-bottom .footer-legal { justify-content: flex-start; }
  .footer-bottom p { white-space: normal; }
  .site-footer li a { display: inline-block; padding: .2rem 0; }

  .about-intro { padding-top: 3.5rem; }
  .about-intro h1, .news-page h1, .studio-intro h1, .quote-page h1, .schedule-page h1, .article h1 { font-size: 3.4rem; }
  .about-intro p { margin: 2rem 0; }
  .about-intro img, .about-press img, .studio-intro img { height: auto; aspect-ratio: 16 / 10; }
  .about-facts { gap: 3rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .about-quote { min-height: 18rem; }
  .about-quote blockquote { font-size: 2.5rem; }
  .about-press { padding: 3rem 1.33rem 0; }
  .history { padding-top: 3.5rem; gap: 2rem; }
  .timeline { padding-left: 2rem; margin-left: .7rem; }
  .timeline li { padding-bottom: 3rem; }
  .timeline li::before { left: -2.75rem; }
  .areas { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.33rem; margin: 2rem 0; }
  .vision__body { position: static; width: auto; padding: 3rem 1.33rem 2rem; }
  .vision { display: flex; flex-direction: column-reverse; background: #f4f6f1; }
  .vision__steps { gap: .5rem; justify-content: space-between; flex-wrap: wrap; }
  .vision__bg { aspect-ratio: 16 / 10; object-fit: cover; object-position: 100% 50%; }
  .sites { padding-top: 3.5rem; padding-bottom: 3.5rem; gap: 2.5rem 1.33rem; }
  .sites img, .sites__placeholder { height: auto; aspect-ratio: 16 / 10; }
  .certs__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }

  .product-hero { height: clamp(30rem, 62svh, 50rem); }
  .product-hero__text { left: 1.33rem; right: 1.33rem; bottom: 1.5rem; }
  .product-hero__text p { font-size: 1.33rem; }
  .product-hero__text h1 { font-size: 3.1rem; }
  .product-hero::after { height: 70%; background: linear-gradient(transparent, rgba(0, 0, 0, .5)); }
  .product-row, .product-row:first-of-type { padding: 3rem 0; }
  .product-row__inner { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin: 0; padding: 0 1.33rem; }
  .product-row p, .types p { font-size: 1.33rem; }
  .types { grid-template-columns: minmax(0, 1fr); }
  .section-head, .others .section-head { margin: 0 1.33rem; }
  .gallery { padding-top: 3rem; }
  .gallery .section-head { margin-bottom: 2rem; }
  .gallery__pair { gap: .5rem; margin-bottom: 2rem; }
  .gallery__pair img { height: auto; aspect-ratio: 4 / 3; }
  .gallery__wide { margin-bottom: 2rem; }
  .gallery__wide img { height: auto !important; aspect-ratio: 16 / 9; }
  .product-faq { padding: 3rem 0 3.5rem; }
  .product-faq .faq { margin: 2rem 1.33rem 0; max-width: none; }
  .others { padding-top: 3rem; }
  .others__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 1.33rem 0; gap: 1rem; }

  .news-page { padding-top: 3.5rem; }
  .news-tools { flex-direction: column-reverse; align-items: stretch; gap: 1.2rem; margin-top: 2rem; }
  .news-tabs { gap: 1.8rem; overflow-x: auto; white-space: nowrap; padding-bottom: .3rem; }
  .news-tabs button { padding: .6rem 0; }
  .news-search { width: 100%; }
  .news-search input { height: 3.67rem; font-size: 1.33rem; }
  .news-search .icon { top: 1.1rem; }
  .news-grid { padding: 2rem 0 0; gap: 2rem 1.33rem; }
  .news-card h3, .news-card.is-large h3 { font-size: 1.85rem; }
  .news-card__meta, .news-card.is-large .news-card__meta { font-size: 1.08rem; }
  .news-card__excerpt, .news-card.is-large .news-card__excerpt { font-size: 1.25rem; }
  .read-more, .news-card.is-large .read-more { font-size: 1.25rem; padding-top: 1rem; }
  .article { padding: 3.5rem 1.33rem 0; }
  .article__img { margin: 2rem 0; }
  .article-nav { padding: 1.5rem 1.33rem 2.5rem; }
  .related { padding-top: 3rem; padding-bottom: 3rem; }
  .related h2 { font-size: 3rem; }
  .related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

  .studio-intro { padding-top: 3.5rem; }
  .studio-intro p { margin: 2rem auto; }
  .zones { margin: 3rem 1.33rem 0; }
  .zone, .zone--flip { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2.5rem 0; }
  .zone img, .zone:last-child img { height: auto; aspect-ratio: 4 / 3; }
  .zone--flip img { order: 0; }
  .approach { padding-top: 3rem; padding-bottom: 3rem; }
  .tour-band { padding: 3rem 1.33rem; gap: 2rem; }
  .tour-band p { margin-top: 1.2rem; font-size: 1.33rem; }
  .tour-band .btn { margin-left: 0; }

  .quote-page { padding-top: 3rem; }
  .quote-grid { gap: 2rem; }
  .quote-form { padding: 1.33rem; }
  .quote-form > h2:first-child { margin-left: 0; }
  .field__label { font-size: 1.2rem; }
  .field__label small { font-size: 1.1rem; }
  .field input:not([type='file']), .field select, .field textarea, .schedule-form .field input:not([type='file']) { min-height: 4rem; font-size: 16px; }
  .quote-aside > img { height: auto; aspect-ratio: 4 / 3.6; }
  .quote-aside p { font-size: 1.25rem; }
  .schedule-page { padding-top: 3rem; }
  .schedule-page__sub { margin-top: 1.5rem; }
  .schedule-grid { margin-top: 2.5rem; gap: 2rem; }
  .tour-info > img { height: auto; aspect-ratio: 16 / 10; }
  .tour-info__facts li, .tour-info__topics li { font-size: 1.25rem; }
  .tour-info h3 { font-size: 1.05rem; }
  .picker { padding: 1.33rem; }
  .calendar__days > * { height: 3.67rem; }
  .calendar__days button { font-size: 1.2rem; }
  .calendar__week { font-size: 1.05rem; }
  .calendar__note, .slots__hint, .slots__note, .schedule-form__hint { font-size: 1.1rem; }
  .slots__date { font-size: 1.35rem; }
  .tz select { font-size: 16px; height: 4rem; }
  .slot span { height: 3.67rem; font-size: 1.25rem; }
  .schedule-form .form-row { gap: 0 1.33rem; }
  .schedule-form .field__label { font-size: 1.2rem; }
  .check--small { font-size: 1.1rem; }
  .check--small input { width: 1.5rem; height: 1.5rem; }
  .booking-bar__time, .booking-bar__type { font-size: 1.1rem; }
  .thanks { padding-top: 4rem; }
  .thanks__card { padding: 4rem 1.5rem; }
  .thanks p { margin: 2rem auto 2.5rem; }
}

@media (max-width: 640px) {
  .contact-sites ul, .audience__grid, .bases { grid-template-columns: minmax(0, 1fr); }
  .product-hero { height: auto; }
  .product-hero__bg, .product-hero::after { display: none; }
  .product-hero__img { position: static; height: 56.25vw; }
  .product-hero__text { position: static; padding: 1.8rem 1.33rem 2.2rem; }
  /* Phones: photo on top at its own shape, text underneath */
  .home-hero { height: calc(56.25vw + 34rem); }
  .slide__bg { display: none; }
  .slide__img { inset: 0 0 auto; height: 56.25vw; }
  .slide::after { display: none; }
  .slide__cap { top: calc(56.25vw + 1.6rem); bottom: auto; }
  .audience .collection__head h2 { font-size: 2.8rem; }
  .why__grid, .others__grid, .related__grid, .sites, .form-row, .schedule-form .form-row { grid-template-columns: minmax(0, 1fr); }
  .news-card, .news-card.is-large { grid-column: 1 / -1; }
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .certs__grid { display: flex; overflow-x: auto; gap: 1rem; padding: 0 0 1rem; scroll-snap-type: x proximity; }
  .certs__grid img { flex: 0 0 55%; scroll-snap-align: start; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-grid > div:last-child { grid-column: 1 / -1; }
  .home-about h2, .why h2, .how > h2, .home-news h2, .areas h2, .certs h2, .tour-band h2, .collection__head h2, .home-faq h2 { font-size: 2.8rem; }
  .about-intro h1, .news-page h1, .studio-intro h1, .quote-page h1, .schedule-page h1, .article h1 { font-size: 3rem; }
  .product-hero__text h1 { font-size: 2.7rem; }
  .cta h2 { font-size: 2.7rem; }
  .hero-btn--arrow { display: none; }
  .slide__heading { font-size: 2.7rem; }
  .booking-bar { flex-direction: column; align-items: stretch; }
  .gallery__pair { grid-template-columns: minmax(0, 1fr); }
  .news-tabs { gap: 1.5rem; }
}

/* ---------- Motion ----------
   Everything that starts hidden is scoped to html.motion, which is only set when JS runs and the visitor
   has not asked for reduced motion. The language is slow and quiet: long expo easing, a lid-lifting
   image reveal, no bounce. */
:root { --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.76, 0, .18, 1); interpolate-size: allow-keywords; }
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }

/* Until motion.js has tagged the page, keep it from flashing its final state */
.motion:not(.fx-ready) main, .motion:not(.fx-ready) .site-footer { visibility: hidden; }

/* Header: hides while reading down, returns on the way up */
.site-header { transition: transform .6s var(--ease), box-shadow .4s; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line-soft), 0 .6rem 1.8rem rgba(23, 55, 37, .05); }
.site-header.is-hidden { transform: translateY(-101%); }

/* Slideshow */
.motion .slide.is-entering { z-index: 2; animation: slide-next 1.5s var(--ease-io) both; }
.motion .slide.is-entering.is-back { animation-name: slide-prev; }
.motion .slide.is-leaving { z-index: 1; }
.motion .slide.is-leaving > img { translate: -7% 0; transition: translate 1.5s var(--ease-io); }
.motion .slide.is-leaving.is-back > img { translate: 7% 0; }
.motion .slide.is-active > .slide__img, .motion .slide.is-leaving > .slide__img { animation: slide-settle 1.8s var(--ease) both; }
.motion .slide.is-active > .slide__bg, .motion .slide.is-leaving > .slide__bg { animation: slow-push 9s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes slide-next { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes slide-prev { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes slow-push { from { scale: 1.13; } to { scale: 1; } }
@keyframes slide-settle { from { opacity: .4; scale: 1.025; } to { opacity: 1; scale: 1; } }
.motion .slide__eyebrow, .motion .slide__title, .motion .slide__sub span, .motion .slide__row { translate: 0 115%; transition: translate 1.2s var(--ease); }
.motion .slide.is-active .slide__eyebrow, .motion .slide.is-active .slide__title, .motion .slide.is-active .slide__sub span, .motion .slide.is-active .slide__row { translate: 0 0; }
.motion .slide.is-active .slide__eyebrow { transition-delay: .55s; }
.motion .slide.is-active .slide__title { transition-delay: .65s; }
.motion .slide.is-active .slide__sub span { transition-delay: .75s; }
.motion .slide.is-active .slide__row { transition-delay: .85s; }
.motion .hero-bar.is-active i { animation: bar-fill var(--hero-time, 6.5s) linear both; }
@keyframes bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.home-hero.is-paused .hero-bar.is-active i { animation-play-state: paused; }
.home-hero { touch-action: pan-y; }
@media (min-width: 1101px) {
  .motion .hero-track { clip-path: inset(calc(var(--hero, 0) * 3rem) calc(var(--hero, 0) * 3.2rem) 0 round calc(var(--hero, 0) * 1.4rem)); translate: 0 calc(var(--hero, 0) * 6rem); }
  .motion .slide__cap { translate: 0 calc(var(--hero, 0) * -5rem); opacity: calc(1 - var(--hero, 0) * 1.6); }
  .motion .hero-ctrl { opacity: calc(1 - var(--hero, 0) * 2.2); }
}

/* Scroll reveals */
.motion .fx { opacity: 0; translate: 0 2rem; transition: opacity 1.1s var(--ease), translate 1.2s var(--ease); transition-delay: var(--d, 0s); }
.motion .fx.fx-in { opacity: 1; translate: 0 0; }
.motion .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.motion .fx-w > span { display: inline-block; translate: 0 110%; transition: translate 1.25s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 45ms); }
.motion .fx-words.fx-in .fx-w > span { translate: 0 0; }
.motion .fx-cur { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); transition-delay: var(--d, 0s); }
.motion .fx-cur--l { clip-path: inset(0 100% 0 0); }
.motion .fx-cur--r { clip-path: inset(0 0 0 100%); }
.motion .fx-cur--up { clip-path: inset(100% 0 0 0); }
.motion .fx-cur.fx-in { clip-path: inset(-1% -1% -1% -1%); }
.motion img.fx-cur { scale: 1.07; transition: clip-path 1s var(--ease), scale 1.6s var(--ease); transition-delay: var(--d, 0s); }
.motion img.fx-cur.fx-in { scale: 1; }
.motion .fx-cur > img:not([data-parallax]) { scale: 1.14; transition: scale 1.9s var(--ease), filter .6s; transition-delay: var(--d, 0s); }
.motion .fx-cur.fx-in > img:not([data-parallax]) { scale: 1; }

/* Hairlines draw themselves on product pages */
.motion .product-row { position: relative; border-bottom-color: transparent; }
.motion .product-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 1px solid var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-io); }
.motion .product-row.fx-line::after { transform: scaleX(1); }

/* Line icons and the vision arc draw on */
.motion .fx-draw .why-icon > *, .motion .fx-draw > path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.8s var(--ease-io), opacity .2s; transition-delay: calc(var(--d, 0s) + .25s); }
.motion .fx-draw.fx-in .why-icon > *, .motion .fx-draw.fx-in > path { stroke-dashoffset: 0; opacity: 1; }

/* Parallax: images sit slightly enlarged in a clipped frame and drift with the page */
@media (min-width: 1101px) {
  .motion [data-parallax] { scale: 1.12; translate: 0 calc(var(--py, 0) * 5%); will-change: translate; }
  .motion .gallery__wide { overflow: hidden; }
  .motion [data-open] { clip-path: inset(0 calc((1 - var(--open, 1)) * 7%) round calc(1rem + (1 - var(--open, 1)) * 1.5rem)); }
  .motion .cta[data-open] { clip-path: inset(0 calc((1 - var(--open, 1)) * 7%) round 1.8rem); }
  .motion .diamonds::before { translate: 0 calc(var(--py, 0) * 6rem); }
}
.motion .product-hero__img { animation: slide-settle 1.8s var(--ease) both; }

/* Steps: the line follows the scroll and lights each stage in turn */
.motion .steps::after { content: ''; position: absolute; left: 0; right: 0; top: 1.4rem; border-top: 1px solid var(--brand); transform: scaleX(var(--prog, 0)); transform-origin: left; }
.motion .steps::before { border-top-color: var(--line); }
.motion .steps__dot { z-index: 1; background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1px #9bb09f; transition: background-color .6s, color .6s, box-shadow .6s, scale .8s var(--ease); scale: .86; }
.motion .steps li > h3, .motion .steps li > p { opacity: .32; translate: 0 .6rem; transition: opacity .8s, translate 1s var(--ease); }
.motion .steps li.is-on .steps__dot { background: var(--brand); color: #fff; box-shadow: inset 0 0 0 1px var(--brand); scale: 1; }
.motion .steps li.is-on > h3, .motion .steps li.is-on > p { opacity: 1; translate: 0 0; }

/* Timeline */
.motion .timeline { position: relative; border-left-color: var(--line); }
.motion .timeline::before { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; border-left: 2px solid #3a6431; transform: scaleY(var(--prog, 0)); transform-origin: top; }
.motion .timeline li::before { background: #cfd8c8; scale: .7; transition: background-color .6s, scale .9s var(--ease); }
.motion .timeline li > * { opacity: .3; translate: 0 1rem; transition: opacity .9s, translate 1.1s var(--ease); }
.motion .timeline li.is-on::before { background: #3a6431; scale: 1; }
.motion .timeline li.is-on > * { opacity: 1; translate: 0 0; }

/* Quote: words light up as it crosses the screen */
.motion .fx-lit span { opacity: .16; transition: opacity .5s; }
.motion .fx-lit span.is-on { opacity: 1; }

/* Hover */
.btn .icon, .slide__link .icon, .read-more .icon, .home-news__more .icon, .home-news__all .icon, .article-nav .icon { transition: transform .5s var(--ease); }
.btn:hover .icon, .slide__link:hover .icon { transform: translate(.14em, -.14em); }
.read-more:hover .icon, .news-card:hover .read-more .icon, .home-news__panel:hover .home-news__more .icon, .home-news__all:hover .icon { transform: translateX(.3em); }
.article-nav a:first-child:hover .icon { transform: translateX(-.3em); }
.article-nav a:last-child:hover .icon { transform: translateX(.3em); }
.btn { transition: background-color .35s, translate .5s var(--ease), box-shadow .5s; }
.btn:hover:not(:disabled) { translate: 0 -2px; box-shadow: 0 .6rem 1.4rem rgba(8, 64, 10, .2); }
@media (hover: hover) {
  .product-card img, .news-card img, .home-news__panel img, .zone img, .areas__grid img { transition: scale 1.1s var(--ease); }
  .product-card:hover img, .news-card:hover img, .motion .product-card:hover .fx-cur.fx-in > img:not([data-parallax]), .motion .news-card:hover .fx-cur.fx-in > img:not([data-parallax]) { scale: 1.055; }
  .motion .why-card.fx, .motion .certs__grid img.fx { transition: opacity 1.1s var(--ease), translate .9s var(--ease), box-shadow .7s var(--ease); transition-delay: var(--d, 0s); }
  .why-card, .certs__grid img { transition: translate .7s var(--ease), box-shadow .7s var(--ease); }
  .why-card:hover, .motion .why-card.fx-in:hover { translate: 0 -.7rem; box-shadow: 0 1.4rem 2.6rem rgba(23, 55, 37, .18); }
  .motion .certs__grid img.fx-in:hover, .certs__grid img:hover { translate: 0 -.5rem; box-shadow: .6rem 1.1rem 1.8rem rgba(0, 0, 0, .22); }
  .home-news__tab:hover { color: var(--ink); }
}
.submenu { transform: translate(-50%, .5rem); transition: opacity .3s, transform .5s var(--ease), visibility .3s; }
.has-menu:hover .submenu, .has-menu:focus-within .submenu, .has-menu.is-open .submenu { transform: translate(-50%, 0); }

/* Home news tabs and panel */
.home-news__tab { transition: color .4s; }
.motion .home-news__panel:not([hidden]) { animation: panel-in .9s var(--ease) both; }
.motion .home-news__panel:not([hidden]) img { animation: panel-img 1.2s var(--ease-io) both; }
.motion .home-news__panel:not([hidden]) > div > * { animation: panel-text .9s var(--ease) both; }
.motion .home-news__panel > div > :nth-child(2) { animation-delay: .06s !important; }
.motion .home-news__panel > div > :nth-child(3) { animation-delay: .12s !important; }
.motion .home-news__panel > div > :nth-child(4) { animation-delay: .18s !important; }
.motion .home-news__panel > div > :nth-child(5) { animation-delay: .24s !important; }
@keyframes panel-in { from { opacity: .3; } }
@keyframes panel-img { from { clip-path: inset(0 100% 0 0 round .5rem); } to { clip-path: inset(0 round .5rem); } }
@keyframes panel-text { from { opacity: 0; translate: 0 1rem; } }

/* News filter */
.motion .news-grid.is-filtering .news-card:not([hidden]) { animation: card-in .8s var(--ease) both; }
@keyframes card-in { from { opacity: 0; translate: 0 1.5rem; } }

/* FAQ opens smoothly where ::details-content is supported, instantly elsewhere */
.faq-plus { transition: transform .5s var(--ease); }
.faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .6s var(--ease), opacity .4s, content-visibility .6s allow-discrete; }
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq summary { transition: color .3s, padding-left .5s var(--ease); }
.faq summary:hover { color: var(--moss); padding-left: .4rem; }

/* Form focus */
.field input:not([type='file']), .field select, .field textarea, .news-search input { transition: border-color .3s, box-shadow .3s; }
.field input:not([type='file']):focus, .field select:focus, .field textarea:focus, .news-search input:focus { outline: 0; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(47, 90, 45, .12); }
.slot span, .calendar__days button { transition: background-color .25s, color .25s, border-color .25s; }

/* Phones and tablets: lighter, no scrubbed scaling */
@media (max-width: 1100px) {
  .motion .fx { translate: 0 1.4rem; }
  .motion .steps::after { left: 1.62rem; right: auto; top: 1rem; bottom: 4rem; border-top: 0; border-left: 1px solid var(--brand); transform: scaleY(var(--prog, 0)); transform-origin: top; }
  .motion .steps::before { border-left-color: var(--line); }
  .motion .nav-open .site-nav { animation: nav-in .5s var(--ease) both; }
  @keyframes nav-in { from { opacity: 0; translate: 0 -.8rem; } }
  .site-header.is-hidden { transform: none; }
  .submenu, .has-menu:hover .submenu, .has-menu:focus-within .submenu, .has-menu.is-open .submenu { transform: none; }
}

@media print {
  .motion .fx, .motion .fx-cur, .motion .fx-w > span, .motion .steps li > *, .motion .timeline li > * { opacity: 1 !important; translate: none !important; clip-path: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  @view-transition { navigation: none; }
}