/* ==========================================================================
   CV MAJU MAKMUR RAYA — Company Profile
   Palette derived from the client's gold monogram: #433711 / #8F7743 / #B19353
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  /* Ground — warm near-black */
  --ink-950: #070605;
  --ink-900: #0C0A09;
  --ink-850: #121010;
  --ink-800: #171413;
  --ink-750: #1D1918;
  --ink-700: #241F1D;
  --ink-600: #2E2825;

  /* Gold ramp — sampled from the logo, extended for legibility on black */
  --gold-100: #F6ECD5;
  --gold-200: #E9D8AE;
  --gold-300: #D9BF83;
  --gold-400: #C9A96A;
  --gold-500: #B19353;
  --gold-600: #8F7743;
  --gold-700: #6B5A2E;
  --gold-800: #433711;

  /* Semantic */
  --bg: var(--ink-900);
  --bg-deep: var(--ink-950);
  --bg-alt: var(--ink-850);
  --surface: var(--ink-800);
  --surface-2: var(--ink-750);
  --card: var(--ink-700);
  --card-hover: var(--ink-600);

  --text: #F6F2EA;
  --text-dim: #C4BCAE;
  --text-mute: #8B8378;

  --accent: var(--gold-400);
  --accent-strong: var(--gold-300);
  --accent-deep: var(--gold-600);
  --on-accent: #100D0A;

  --line: #302A25;
  --line-gold: rgba(201, 169, 106, 0.22);
  --line-gold-soft: rgba(201, 169, 106, 0.12);
  --wash: rgba(201, 169, 106, 0.06);
  --wash-2: rgba(201, 169, 106, 0.10);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px -24px rgba(0, 0, 0, .9);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, .5), 0 28px 60px -28px rgba(0, 0, 0, .95),
                 0 0 0 1px var(--line-gold), 0 0 44px -14px rgba(201, 169, 106, .22);
  --shadow-gold: 0 14px 34px -14px rgba(201, 169, 106, .38);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.9rem, 1.5rem + 5.6vw, 6.25rem);
  --fs-h2: clamp(2.1rem, 1.25rem + 3.4vw, 3.9rem);
  --fs-h3: clamp(1.55rem, 1.15rem + 1.6vw, 2.35rem);
  --fs-h4: clamp(1.15rem, 1.05rem + 0.42vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 0.99rem + 0.34vw, 1.28rem);
  --fs-body: clamp(0.96rem, 0.93rem + 0.16vw, 1.05rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  /* Space & shape */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.75rem);
  --section-y: clamp(4.5rem, 2.5rem + 8vw, 9rem);
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .22s;
  --t: .38s;
  --t-slow: .7s;

  --header-h: 74px;
  color-scheme: dark;
}

/* Light theme — cream paper with the logo's own deep gold */

/* ---------- 2. Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--t) var(--ease-soft), color var(--t) var(--ease-soft);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 .55em;
  color: var(--text);
  text-wrap: balance;
}

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease-soft); }
a:hover { color: var(--accent-strong); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  padding: .8rem 1.3rem; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout primitives ---------- */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); }
.section--hair { border-top: 1px solid var(--line); }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin-bottom: .38em; }
.section-head .lead { font-size: var(--fs-lead); color: var(--text-dim); margin: 0; }

.grid { display: grid; gap: clamp(1rem, .55rem + 1.5vw, 1.6rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }

/* ---------- 4. Texture layers ---------- */

.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 5. Eyebrow / rules ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ""; width: 30px; height: 1px; background: currentColor; opacity: .55;
  transform-origin: left; transform: scaleX(0);
  transition: transform .9s var(--ease) .15s;
}
.is-in .eyebrow::before, .eyebrow.is-in::before { transform: scaleX(1); }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::after {
  content: ""; width: 30px; height: 1px; background: currentColor; opacity: .55;
  transform-origin: right; transform: scaleX(0);
  transition: transform .9s var(--ease) .15s;
}
.is-in .section-head--center .eyebrow::after { transform: scaleX(1); }

.vision .eyebrow::after {
  content: ""; width: 30px; height: 1px; background: currentColor; opacity: .55;
}

/* ---------- 6. Buttons ---------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem; padding: .92rem 1.7rem;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .045em;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease-soft), color var(--t) var(--ease-soft),
              border-color var(--t) var(--ease-soft);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .38) 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .85s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0); }

.btn--primary { background: linear-gradient(135deg, var(--gold-300), var(--gold-500) 62%, var(--gold-600)); color: #120E08; }

.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-gold);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--wash); box-shadow: none; }

/* WhatsApp actions are rendered in the brand's gold rather than WhatsApp green,
   so the palette stays black-and-gold; the glyph still names the channel.
   To go back to WhatsApp green, swap the two rules below for:
     background: #1FA855; color: #fff;                                          */
.btn--wa { background: linear-gradient(135deg, var(--gold-300), var(--gold-500) 62%, var(--gold-600)); color: #120E08; }
.btn--wa:hover { box-shadow: var(--shadow-gold); }

.btn--sm { padding: .62rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1.06rem 2.1rem; font-size: .95rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em;
  color: var(--accent);
}
.link-arrow span { white-space: nowrap; }

/* The two division links are the main route into the catalogues, so they get
   a pulsing gold halo rather than reading as plain text links. */
.link-arrow--glow {
  padding: .8rem 1.45rem;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-pill);
  background: var(--wash);
  animation: ctaGlow 2.8s var(--ease-soft) infinite;
  transition: background-color var(--t) var(--ease-soft), border-color var(--t) var(--ease-soft),
              transform var(--t) var(--ease);
}
.link-arrow--glow:hover {
  background: var(--wash-2);
  border-color: var(--accent);
  transform: translateY(-2px);
  animation-play-state: paused;
}
@keyframes ctaGlow {
  0%   { box-shadow: 0 0 0 0 rgba(201, 169, 106, .38), 0 0 16px -6px rgba(201, 169, 106, .5); }
  70%  { box-shadow: 0 0 0 13px rgba(201, 169, 106, 0), 0 0 28px -4px rgba(201, 169, 106, .8); }
  100% { box-shadow: 0 0 0 0 rgba(201, 169, 106, 0), 0 0 16px -6px rgba(201, 169, 106, .5); }
}
.link-arrow svg { width: 18px; height: 18px; flex: none; transition: transform var(--t) var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* Inline SVGs carry a viewBox but no width/height, so they would fall back to
   the 300x150 replaced-element default. Size every one explicitly. */
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--lg svg { width: 20px; height: 20px; }
.btn--sm svg { width: 15px; height: 15px; }
.wa-fab svg { width: 26px; height: 26px; }
.product__art svg,
.hero__botanical svg,
.split__media svg,
.vision__mark { width: 100%; height: auto; }

/* ---------- 7. Header ---------- */

.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t) var(--ease-soft), border-color var(--t) var(--ease-soft),
              backdrop-filter var(--t) var(--ease-soft), height var(--t) var(--ease-soft);
}
.header.is-stuck {
  height: 64px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
.header__inner { display: flex; align-items: center; gap: 1.5rem; width: 100%; }

.brand { display: flex; align-items: center; gap: .78rem; margin-right: auto; }
.brand__mark {
  width: 40px; height: 40px; object-fit: contain; flex: none;
  filter: drop-shadow(0 2px 10px rgba(201, 169, 106, .3));
  transition: transform var(--t-slow) var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.06rem; letter-spacing: .04em; color: var(--text);
}
.brand__sub {
  font-size: .5625rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent);
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav__link {
  position: relative; padding: .55rem .85rem;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .015em;
  color: var(--text-dim); border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-soft);
}
.nav__link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--accent); }
.nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: .6rem; }

/* Language toggle */
.langtoggle {
  position: relative; display: flex; align-items: center;
  padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--wash);
}
.langtoggle__thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  transition: transform .42s var(--ease);
}
.langtoggle[data-lang="id"] .langtoggle__thumb { transform: translateX(100%); }
.langtoggle__btn {
  position: relative; z-index: 1; min-width: 38px;
  padding: .3rem .1rem; background: none; border: 0; cursor: pointer;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  color: var(--text-mute);
  transition: color var(--t) var(--ease-soft);
}
.langtoggle__btn.is-active { color: #120E08; }

.burger { display: none; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg-deep);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column; gap: .2rem;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease), visibility var(--t);
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__link {
  padding: 1rem 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  color: var(--text); border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color var(--t-fast);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 55ms + 90ms); }
.drawer__link:hover, .drawer__link.is-active { color: var(--accent); }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .8rem; }

/* ---------- 8. Hero ---------- */

.hero {
  position: relative; isolation: isolate;
  min-height: min(94svh, 940px);
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + clamp(3rem, 1.5rem + 6vw, 6rem)) clamp(3.5rem, 2rem + 6vw, 7rem);
  background: var(--bg-deep);
  overflow: hidden;
}
.hero--page { min-height: auto; }

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 46% at 16% 6%, rgba(201, 169, 106, .17), transparent 62%),
    radial-gradient(46% 40% at 88% 22%, rgba(143, 119, 67, .20), transparent 60%),
    radial-gradient(70% 55% at 50% 118%, rgba(201, 169, 106, .10), transparent 64%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 76% 62% at 50% 44%, transparent 32%, rgba(0, 0, 0, .62) 100%);
}

/* Botanical line art, drawn once and echoed */
.hero__botanical {
  position: absolute; z-index: -1; pointer-events: none;
  color: var(--accent); opacity: .1;
}
.hero__botanical--r { right: -6%; top: 4%; width: min(48vw, 620px); }
.hero__botanical path, .hero__botanical circle, .hero__botanical ellipse {
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200);
  animation: draw 3.4s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Slow drifting glow */
.hero__orb {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201, 169, 106, .16), transparent 68%);
  filter: blur(28px);
  animation: drift 22s ease-in-out infinite alternate;
}
.hero__orb--a { width: 46vw; height: 46vw; left: 4%; top: 8%; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3.5%, -5%, 0) scale(1.12); }
}

.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 880px; }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.022em;
  margin-bottom: .34em;
}
.hero h1 em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(120deg, var(--gold-200), var(--gold-400) 42%, var(--gold-600));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero__lead {
  font-size: var(--fs-lead); color: var(--text-dim);
  max-width: 62ch; margin-bottom: 2.3rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: clamp(2.75rem, 1.5rem + 4vw, 4.75rem); }

.hero__tagline {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  color: var(--accent); margin-bottom: 1.35rem;
}
.hero__tagline::before, .hero__tagline::after {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5;
}

/* Hero entrance stagger — only when JS is running, so the content is never
   left invisible if the script fails or is blocked. */
.js .hero__content > * {
  opacity: 0; transform: translateY(26px);
  animation: rise .95s var(--ease) both;
}
.js .hero__content > *:nth-child(1) { animation-delay: .12s; }
.js .hero__content > *:nth-child(2) { animation-delay: .22s; }
.js .hero__content > *:nth-child(3) { animation-delay: .32s; }
.js .hero__content > *:nth-child(4) { animation-delay: .42s; }
.js .hero__content > *:nth-child(5) { animation-delay: .52s; }
.js .hero__content > *:nth-child(6) { animation-delay: .62s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: grid; place-items: center; gap: .6rem;
  font-size: .625rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-mute);
}
.js .hero__scroll { opacity: 0; animation: rise .9s var(--ease) 1.1s both; }
.hero__scroll span::after {
  content: ""; display: block; width: 1px; height: 42px; margin: .6rem auto 0;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollpulse 2.2s var(--ease-soft) infinite;
}
@keyframes scrollpulse { 0%, 100% { transform: scaleY(.4); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- 9. Stats ---------- */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem, .5rem + 2vw, 2.4rem);
  padding-top: clamp(1.75rem, 1rem + 2vw, 2.6rem);
  border-top: 1px solid var(--line-gold-soft);
}
.stat__value {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1; color: var(--accent); letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: .06em;
}
.stat__label {
  margin-top: .55rem; font-size: var(--fs-xs); color: var(--text-mute);
  letter-spacing: .09em; text-transform: uppercase; font-weight: 500;
}

/* ---------- 10. Ticker ---------- */

.ticker {
  position: relative; overflow: hidden;
  padding-block: 1.1rem;
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 1.6rem;
  padding-inline: 1.6rem;
  font-family: var(--font-display); font-size: 1.1rem; font-style: italic;
  color: var(--text-mute); white-space: nowrap;
}
.ticker__item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 11. Cards ---------- */

.card {
  position: relative; isolation: isolate;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  box-shadow: var(--shadow-card);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease-soft),
              box-shadow var(--t) var(--ease), background-color var(--t) var(--ease-soft);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, var(--wash-2), transparent 46%);
  opacity: 0; transition: opacity var(--t) var(--ease-soft);
}
.card:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: var(--shadow-lift); }
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1.25rem;
  border: 1px solid var(--line-gold); border-radius: var(--r);
  background: var(--wash); color: var(--accent);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease-soft);
}
.card:hover .card__icon { transform: translateY(-2px) scale(1.05); background: var(--wash-2); }
.card__icon svg { width: 23px; height: 23px; }
.card h3, .card h4 { font-size: var(--fs-h4); margin-bottom: .5rem; letter-spacing: 0; }
.card p { color: var(--text-dim); font-size: var(--fs-sm); margin: 0; }

.card--num { padding-top: 2.4rem; }
.card__num {
  position: absolute; top: 1.1rem; right: 1.35rem;
  font-family: var(--font-display); font-size: 3rem; font-weight: 600;
  line-height: 1; color: var(--accent); opacity: .16;
  transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease);
}
.card--num:hover .card__num { opacity: .34; transform: translateY(-3px); }

/* ---------- 12. Division cards ---------- */

.division {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease-soft), box-shadow var(--t) var(--ease);
}
.division::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(88% 70% at 82% 6%, var(--div-tint, rgba(201, 169, 106, .16)), transparent 62%);
  transition: opacity var(--t-slow) var(--ease-soft);
}
.division::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .8s var(--ease);
}
.division:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: var(--shadow-lift); }
.division:hover::after { transform: scaleX(1); }
.division:hover .division__art { transform: rotate(5deg) scale(1.08); opacity: .17; }
.division h3 { font-size: var(--fs-h3); margin-bottom: .3rem; }

.chip {
  padding: .34rem .78rem;
  font-size: var(--fs-xs); color: var(--text-dim);
  background: var(--wash); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.division:hover .chip { border-color: var(--line-gold-soft); }

/* ---------- 13. Product catalogue ---------- */

.filters {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.filter {
  position: relative; padding: .56rem 1.1rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em;
  color: var(--text-dim); background: transparent;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
              background-color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease);
}
.filter::before {
  content: ""; position: absolute; left: .78rem; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%; background: var(--dot, var(--accent));
  opacity: 0; transform: scale(.4);
  transition: opacity var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease);
}
.filter[data-dot] { padding-left: 1.85rem; }
.filter[data-dot]::before { opacity: .85; transform: none; }
.filter:hover { color: var(--text); border-color: var(--line-gold); transform: translateY(-1px); }
.filter.is-active {
  color: var(--on-accent); border-color: transparent;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
}
.filter.is-active::before { background: var(--on-accent); }

.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: clamp(.9rem, .5rem + 1.2vw, 1.4rem); }

.product {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease-soft), box-shadow var(--t) var(--ease);
}
.product:hover { transform: translateY(-5px); border-color: var(--line-gold); box-shadow: var(--shadow-lift); }
.product.is-hidden { display: none; }

.product__figure {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
}
.product__figure::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 32%, var(--tint, rgba(201, 169, 106, .3)), transparent 70%);
  opacity: .5;
  transition: opacity var(--t-slow) var(--ease-soft), transform 1s var(--ease);
}
.product:hover .product__figure::before { opacity: .8; transform: scale(1.1); }
.product__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product__art {
  position: relative; width: 58%; color: var(--tint-ink, var(--accent));
  transition: transform .9s var(--ease);
}
.product:hover .product__art { transform: scale(1.09) rotate(-3deg); }

.product__band {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--tint-ink, var(--accent)); opacity: .75;
}
.product__body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.product__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.15; margin: 0 0 .1rem; }
.product__alt { font-size: var(--fs-xs); color: var(--text-mute); margin: 0 0 .5rem; }
.product__botanical { font-size: var(--fs-xs); font-style: italic; color: var(--accent); opacity: .85; margin: 0 0 .7rem; }
.product__desc { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.62; margin: 0 0 .9rem; }
.product__note {
  display: flex; gap: .4rem; align-items: flex-start;
  margin: 0 0 .85rem; padding: .45rem .6rem;
  font-size: .6875rem; line-height: 1.5; color: var(--accent-strong);
  background: var(--wash); border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.product__origin {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .75rem; padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute);
}
.product__origin svg { width: 12px; height: 12px; flex: none; opacity: .8; }
.product__origin-label { color: var(--accent); opacity: .8; }
.product__origin-label::after { content: ":"; }

.catalogue-empty {
  padding: 3rem 1rem; text-align: center; color: var(--text-mute);
  grid-column: 1 / -1; display: none;
}
.catalogue-empty.is-shown { display: block; }

/* ---------- 14. Split feature ---------- */

.split {
  display: grid; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.split__media {
  position: relative; aspect-ratio: 4 / 3.2;
  border: 1px solid var(--line-gold); border-radius: var(--r-xl);
  background:
    radial-gradient(72% 60% at 30% 20%, var(--wash-2), transparent 66%),
    linear-gradient(155deg, var(--surface), var(--bg-deep));
  display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.split__media svg { width: 62%; height: auto; color: var(--accent); opacity: .55; }
.split__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(201, 169, 106, .1) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: sheen 6.5s var(--ease-soft) infinite;
}
@keyframes sheen { 0%, 62% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---------- 15. Vision / mission ---------- */

.vision {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--wash-2), transparent 55%), var(--bg-deep);
  text-align: center;
}
.vision__mark {
  width: 62px; margin: 0 auto 1.6rem; opacity: .9;
  animation: floaty 7s var(--ease-soft) infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.vision__text {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.5rem);
  line-height: 1.34; color: var(--text); max-width: 30ch; margin-inline: auto;
  text-wrap: balance;
}
.vision__text strong { font-weight: 600; color: var(--accent); font-style: italic; }

.mission { display: grid; gap: .8rem; counter-reset: m; }
.mission__item {
  position: relative; display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.15rem 1.35rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color var(--t) var(--ease-soft), transform var(--t) var(--ease), background-color var(--t) var(--ease-soft);
}
.mission__item:hover { border-color: var(--line-gold); transform: translateX(5px); background: var(--card-hover); }
.mission__item::before {
  counter-increment: m; content: counter(m, decimal-leading-zero);
  flex: none; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--accent); opacity: .75; padding-top: .1rem; letter-spacing: .04em;
}
.mission__item p { font-size: var(--fs-sm); color: var(--text-dim); }

/* ---------- 16. Timeline ---------- */

.timeline { position: relative; padding-left: 2.6rem; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: .6rem; bottom: .6rem; width: 1px;
  background: linear-gradient(var(--line-gold), var(--line-gold-soft), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.6s var(--ease) .1s;
}
.timeline.is-in::before { transform: scaleY(1); }

.tl__item { position: relative; padding-bottom: clamp(2rem, 1.2rem + 2vw, 3.2rem); }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before {
  content: ""; position: absolute; left: -2.6rem; top: .55rem;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px -2px rgba(201, 169, 106, .5);
}
.tl__item::after {
  content: ""; position: absolute; left: calc(-2.6rem + 4px); top: calc(.55rem + 4px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  transform: scale(0);
  transition: transform .5s var(--ease);
}
.tl__item.is-in::after { transform: scale(1); }
.tl__year {
  display: inline-block; margin-bottom: .4rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.tl__item h3 { font-size: var(--fs-h4); margin-bottom: .4rem; }
.tl__item p { color: var(--text-dim); font-size: var(--fs-sm); max-width: 62ch; }

/* ---------- 17. Specs table ---------- */

.specs { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.specs__row {
  display: grid; grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 1rem; padding: 1.05rem clamp(1rem, .7rem + 1vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease-soft);
}
.specs__row:last-child { border-bottom: 0; }
.specs__row:hover { background: var(--wash); }
.specs__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.specs__value { font-size: var(--fs-sm); color: var(--text); }

/* ---------- 18. FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: clamp(1.08rem, 1rem + .4vw, 1.35rem); font-weight: 600;
  color: var(--text);
  transition: color var(--t-fast) var(--ease-soft);
}
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; flex: none; width: 20px; height: 20px; margin-top: .28rem; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease-soft);
}
.faq__icon::before { width: 15px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 15px; }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .48s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: 1.5rem; padding-right: 2.5rem;
  color: var(--text-dim); font-size: var(--fs-sm); max-width: 76ch;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .4s var(--ease-soft) .06s, transform .4s var(--ease) .06s;
}
.faq__item.is-open .faq__a p { opacity: 1; transform: none; }

/* ---------- 19. CTA band ---------- */

.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
  text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 100% at 50% 0%, var(--wash-2), transparent 68%),
    radial-gradient(40% 80% at 12% 100%, var(--wash), transparent 70%);
}
.cta-band h2 { font-size: var(--fs-h2); margin-bottom: .4em; }
.cta-band p { font-size: var(--fs-lead); color: var(--text-dim); max-width: 58ch; margin: 0 auto 2.1rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* ---------- 20. Contact ---------- */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }

.field { margin-bottom: 1.05rem; }
.field label {
  display: block; margin-bottom: .45rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-mute);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft),
              background-color var(--t-fast) var(--ease-soft);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.65; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); opacity: .75; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 106, .16);
  background: var(--card-hover);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A96A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.contact-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
}
.contact-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-item:first-child { padding-top: 0; }
.contact-item__icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line-gold); border-radius: var(--r);
  background: var(--wash); color: var(--accent);
}
.contact-item__icon svg { width: 18px; height: 18px; }
.contact-item__label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: .18rem; }
.contact-item__value { font-size: var(--fs-sm); color: var(--text); line-height: 1.6; }
.contact-item__value a { color: var(--text); }
.contact-item__value a:hover { color: var(--accent); }

.form-note {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 1rem; padding: .85rem 1rem;
  background: var(--wash); border: 1px solid var(--line-gold-soft); border-radius: var(--r);
  font-size: var(--fs-xs); color: var(--text-dim);
}
.form-note svg { flex: none; width: 15px; height: 15px; color: var(--accent); margin-top: .18rem; }

/* ---------- 21. Footer ---------- */

.footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.footer__grid {
  display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
}
.footer__brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.footer__brand img { width: 42px; }
.footer__blurb { font-size: var(--fs-sm); color: var(--text-mute); max-width: 42ch; margin-bottom: 1.4rem; }
.footer h2 {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.05rem;
}
.footer li { margin-bottom: .6rem; }
.footer li a, .footer li span { font-size: var(--fs-sm); color: var(--text-mute); }
.footer li a { position: relative; }
.footer li a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding-block: 1.5rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-mute);
}

/* ---------- 22. Floating WhatsApp ---------- */

.wa-fab {
  position: fixed; right: clamp(1rem, .5rem + 1.5vw, 1.85rem); bottom: clamp(1rem, .5rem + 1.5vw, 1.85rem);
  z-index: 90; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500) 65%, var(--gold-600));
  color: #120E08;
  box-shadow: 0 10px 30px -8px rgba(201, 169, 106, .5);
  opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none;
  transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.wa-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.wa-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); animation: halo 2.4s var(--ease-soft) infinite;
}
@keyframes halo {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
.wa-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 38px -8px rgba(201, 169, 106, .6); }
.wa-fab svg { width: 26px; height: 26px; }

/* ---------- 23. Scroll reveal ---------- */

.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal--scale { transform: scale(.96); }
.reveal--left.is-in, .reveal--right.is-in, .reveal--scale.is-in { transform: none; }

/* Progress bar */
.progress {
  position: fixed; top: 0; left: 0; z-index: 101; height: 2px; width: 100%;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
}

/* ---------- 24. Responsive ---------- */

@media (max-width: 1024px) {
  .nav, .header__actions .btn { display: none; }
  /* Bars are absolutely positioned so the open state is an exact X — stacking
     them in flow left them offset and the cross rendered as a chevron. */
  .burger {
    display: block; position: relative; width: 40px; height: 40px;
    background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
    cursor: pointer;
  }
  .burger span {
    position: absolute; left: 50%; top: 50%;
    width: 18px; height: 1.6px; margin-left: -9px;
    background: var(--text); border-radius: 2px;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease-soft);
  }
  .burger span:nth-child(1) { transform: translateY(-6px); }
  .burger span:nth-child(2) { transform: translateY(0); }
  .burger span:nth-child(3) { transform: translateY(6px); }
  .burger.is-open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
  .burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
  .burger.is-open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
}

@media (min-width: 1025px) { .drawer { display: none; } }

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .field-row { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .specs__row { grid-template-columns: 1fr; gap: .3rem; }
  .stats { text-align: left; }
}

@media print {
  .header, .drawer, .wa-fab, .progress, .grain, .hero__scroll, .ticker { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 25. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero__content > *, .hero__scroll { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero__botanical path, .hero__botanical circle, .hero__botanical ellipse { stroke-dashoffset: 0 !important; }
  .timeline::before { transform: scaleY(1) !important; }
}

/* ---------- 26. Touch & mobile refinement ---------- */

/* Touch devices: every control gets a ~44px target, regardless of its visual size. */
@media (pointer: coarse) {
  .burger { width: 44px; height: 44px; }
  .langtoggle { padding: 4px; }
  .langtoggle__btn { min-width: 46px; padding-block: .78rem; }

  /* The phone number is a link inside a text block — give it a real target. */
  .contact-item__value a { display: inline-block; padding-block: .6rem; }
  .langtoggle__thumb { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); }

  .link-arrow { padding-block: .55rem; }
  .nav__link { padding-block: .8rem; }

  /* Footer and drawer links are text-sized; pad them out to a real target. */
  .footer li { margin-bottom: .2rem; }
  .footer li a,
  .footer li span { display: inline-block; padding-block: .55rem; }

  .filter { padding-block: .72rem; }

  /* With the wordmark hidden the logo link shrinks to the 38px mark. */
  .header .brand { min-height: 44px; padding: 3px 7px; margin-left: -7px; }
  .faq__q { padding-block: 1.15rem; }
  .product { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 640px) {
  /* Two columns instead of one — a single-column catalogue ran the whole
     27-line list far down the page. Card content is tightened to fit. */
  .catalogue { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .product__figure { aspect-ratio: 4 / 3; }
  .product__art { width: 42%; }
  .product__body { padding: .75rem .8rem .9rem; }
  .product__name { font-size: 1rem; line-height: 1.2; }
  .product__alt { font-size: .6875rem; margin-bottom: .35rem; }
  .product__botanical { font-size: .6875rem; margin-bottom: .5rem; }
  .product__desc { font-size: .6875rem; line-height: 1.5; margin-bottom: .6rem; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .product__origin { margin-top: .5rem; padding-top: .5rem; font-size: .625rem; flex-wrap: wrap; }
  .product__glyph { width: 26px; height: 26px; right: .4rem; bottom: .4rem; }
  .product__glyph svg { width: 15px; height: 15px; }

  /* The full wordmark cannot fit beside the language and menu controls at this
     width — it wrapped to three lines and overflowed the header. The monogram
     carries the identity on its own; the full name stays in the footer. */
  .header .brand__text { display: none; }
  .header .brand { margin-right: auto; }
  .brand__mark { width: 38px; height: 38px; }
  .header__inner { gap: .75rem; }
  .header__actions { gap: .4rem; }

  /* Wide tracking eats horizontal space on a phone. */
  .eyebrow { letter-spacing: .14em; }

  /* Nothing below 12px on a phone. */
  :root { --fs-eyebrow: 0.75rem; }
  .brand__sub { font-size: .625rem; letter-spacing: .2em; }
  .product__origin,
  .product__note,
  .stat__label,
  .contact-item__label,
  .specs__label { font-size: .75rem; }

  /* Full-width primary actions read better and are easier to hit. */
  .hero__actions,
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn,
  .cta-band__actions .btn { width: 100%; }

  /* The scroll cue competes with the stats block on a short screen. */
  .hero__scroll { display: none; }
}

/* Keep the category filter reachable through a long catalogue: one sticky,
   horizontally scrollable strip instead of three wrapped rows. */
@media (max-width: 900px) {
  .filters {
    position: sticky;
    top: calc(var(--header-h) - 2px);
    z-index: 20;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: .7rem var(--gutter);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; white-space: nowrap; }
}

/* Mobile paint budget: a fixed blended grain layer and large blurred orbs
   repaint on every scroll frame. Drop them where they cost the most and
   contribute the least. */
@media (max-width: 900px) {
  .grain { display: none; }
  .hero__orb { display: none; }
  .hero__botanical--r { width: min(62vw, 320px); opacity: .07; }
  .split__media::after { animation: none; }
  .header.is-stuck {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.drawer { overscroll-behavior: contain; }

/* ---------- 27. Photography ---------- */

/* Only photographs that passed the product check are published; the rest keep
   the line-art tile. Both treatments have to sit in the same grid, so the
   photographic ones are graded toward the palette rather than left raw. */

picture { display: contents; }

/* Product tiles ------------------------------------------------------------ */

.product__figure--photo { background: var(--ink-950); }
.product__figure--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter var(--t-slow) var(--ease-soft);
  /* Exposure, warmth and saturation are graded in build/images.py, so the
     stylesheet only handles the hover lift. */
  filter: brightness(.97);
}
.product:hover .product__figure--photo img {
  transform: scale(1.08);
  filter: brightness(1.08);
}

/* A gold scrim ties 14 different sources into one set. */
.product__figure--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 6, 5, 0) 45%, rgba(7, 6, 5, .5) 100%),
    linear-gradient(155deg, var(--tint, rgba(201, 169, 106, .26)), transparent 62%);
  opacity: .9;
  transition: opacity var(--t-slow) var(--ease-soft);
}
.product:hover .product__figure--photo::after { opacity: .55; }

/* The glyph stays as a corner mark: it names the commodity even when a
   photograph is ambiguous, and keeps photo and non-photo cards related. */
.product__glyph {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--gold-200);
  background: rgba(7, 6, 5, .58);
  border: 1px solid rgba(201, 169, 106, .32);
  border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease-soft);
}
.product__glyph svg { width: 20px; height: 20px; }
.product:hover .product__glyph { transform: translateY(-2px); background: rgba(7, 6, 5, .75); }

/* Seafood panels ----------------------------------------------------------- */

/* The base panel centres its SVG with grid; a photograph has to fill it
   instead, so switch to a positioned box. */
.split__media--photo { display: block; position: relative; padding: 0; overflow: hidden; }
.split__media--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.92);
  transition: transform 1.2s var(--ease), filter var(--t-slow) var(--ease-soft);
}
.split__media--photo:hover img { transform: scale(1.05); filter: brightness(1.02); }
.split__media--photo::after {
  background: linear-gradient(155deg, rgba(201, 169, 106, .14), transparent 55%);
  transform: none; animation: none;
}

/* Category cards ----------------------------------------------------------- */

.card--photo { padding-top: 0; overflow: hidden; }
.card__photo {
  position: relative;
  margin: calc(clamp(1.4rem, 1rem + 1.1vw, 2rem) * -1);
  margin-bottom: 1.25rem;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.8);
  transition: transform 1.1s var(--ease), filter var(--t-slow) var(--ease-soft);
}
.card--photo:hover .card__photo img { transform: scale(1.07); filter: brightness(.92); }
.card__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(7, 6, 5, .5) 100%),
    linear-gradient(150deg, var(--tint-ink, var(--accent)), transparent 58%);
  opacity: .42;
}

/* Mobile & motion ---------------------------------------------------------- */

@media (max-width: 900px) {
}

@media (prefers-reduced-motion: reduce) {
  .product__figure--photo img,
  .split__media--photo img,
  .card__photo img { transition: none !important; transform: none !important; }
}

/* Hero photograph -------------------------------------------------------- */

.hero--photo .hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
/* <picture> is display:contents, so the shared rule below has to name the
   image itself as well as the poster/video children. */
.hero--photo .hero__media img,
.hero--photo .hero__media > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  filter: brightness(.62) saturate(.92);
}
/* The poster carries the hero until the video is decoded, and stays put on
   phones, where the video is never fetched. */
.hero--photo .hero__poster {
  transform: scale(1.04);
  animation: heroDrift 30s ease-in-out infinite alternate;
  transition: opacity .9s var(--ease-soft);
}
.hero--photo .hero__video { opacity: 0; transition: opacity 1.1s var(--ease-soft); }
.hero--photo.is-playing .hero__video { opacity: 1; }
.hero--photo.is-playing .hero__poster { opacity: 0; animation: none; }
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.4%, 0); }
}
/* Two scrims: one to set the type on, one to hold the palette gold. */
.hero--photo .hero__bg::before {
  background:
    linear-gradient(100deg, rgba(7, 6, 5, .93) 0%, rgba(7, 6, 5, .72) 34%,
                            rgba(7, 6, 5, .28) 64%, rgba(7, 6, 5, .06) 100%),
    radial-gradient(58% 46% at 16% 6%, rgba(201, 169, 106, .12), transparent 62%);
}
.hero--photo .hero__bg::after {
  background:
    radial-gradient(ellipse 92% 82% at 46% 46%, transparent 34%, rgba(0, 0, 0, .48) 100%),
    linear-gradient(180deg, transparent 66%, var(--bg-deep) 99%);
}
@media (max-width: 900px) {
  .hero--photo .hero__poster { animation: none; transform: scale(1.06); filter: brightness(.58) saturate(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__poster { animation: none !important; transform: scale(1.04) !important; }
}

/* ---------- 28. Layout variety & motion ---------- */

/* Every section used to be "heading + row of equal cards", and every element
   used the same fade-up. These are the alternative arrangements and the extra
   reveal variants that break that rhythm. */

/* --- A. Editorial split: sticky statement beside a running list ----------- */

.editorial {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: start;
}
.editorial__aside { position: static; }
.editorial__aside .lead { font-size: var(--fs-lead); color: var(--text-dim); }

.pillars { border-top: 1px solid var(--line); counter-reset: pil; }
.pillar {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, .6rem + 1vw, 2rem);
  padding: clamp(1.4rem, 1rem + 1vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--t) var(--ease);
}
.pillar::before {
  counter-increment: pil; content: counter(pil, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: var(--accent); opacity: .6; line-height: 1.2;
  transition: opacity var(--t) var(--ease-soft);
}
.pillar::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px;
  background: var(--accent);
  transition: width .55s var(--ease);
}
.pillar:hover { padding-left: .9rem; }
.pillar:hover::before { opacity: 1; }
.pillar:hover::after { width: 100%; }
/* Place explicitly: the numeral owns column 1 across both rows, the text
   owns column 2. Auto-placement was dropping the paragraph into column 1. */
.pillar::before { grid-column: 1; grid-row: 1 / span 2; }
.pillar h3 { grid-column: 2; grid-row: 1; font-size: var(--fs-h4); margin-bottom: .35rem; }
.pillar p { grid-column: 2; grid-row: 2; font-size: var(--fs-sm); color: var(--text-dim); margin: 0; }

/* --- B. Showcase: full-bleed alternating rows ----------------------------- */

.showcase {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  align-items: center;
  gap: clamp(1.75rem, 1rem + 4vw, 4.5rem);
  margin-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.showcase__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Sized inside the container: a viewport-wide bleed kept the image the same
     large size at every zoom level. */
  /* An explicit width is required: everything inside is absolutely positioned,
     so without it the box shrinks to nothing once it stops being stretched. */
  width: 100%;
  max-width: 460px;
  justify-self: start;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.showcase--flip { direction: rtl; }
.showcase--flip > * { direction: ltr; }
/* direction: rtl already flips the column order, so start is the outer edge. */
.showcase__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.95) saturate(.95);
  transform: scale(1.06);
  transition: transform 1.4s var(--ease), filter var(--t-slow) var(--ease-soft);
}
.showcase:hover .showcase__media img { transform: scale(1.12); filter: brightness(1.05) saturate(1); }
.showcase__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(7, 6, 5, .18), transparent 48%),
              linear-gradient(0deg, var(--tint, rgba(201, 169, 106, .1)), transparent 55%);
}
.showcase__body h3 { font-size: var(--fs-h2); margin-bottom: .2em; }
.showcase__sub {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 1.15rem;
}
.showcase__body > p { color: var(--text-dim); margin-bottom: 1.4rem; }
.showcase__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.7rem; }

/* --- D. Zigzag: alternating numbered list --------------------------------- */

.zigzag { position: relative; counter-reset: zz; }
.zigzag::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(var(--line-gold-soft), var(--line-gold), var(--line-gold-soft));
  transform: translateX(-50%) scaleY(0); transform-origin: top;
  transition: transform 1.6s var(--ease);
}
.zigzag.is-in::before { transform: translateX(-50%) scaleY(1); }
.zz {
  position: relative; width: calc(50% - clamp(1.5rem, 3vw, 3rem));
  padding: clamp(1.1rem, .8rem + 1vw, 1.7rem) 0;
}
.zz:nth-child(even) { margin-left: auto; }
/* Interleave the two columns so the opposite side is not left empty. */
.zz:nth-child(even) { margin-top: clamp(-5.5rem, -5vw, -2rem); }
.zz__mark {
  display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem;
}
.zz__num {
  counter-increment: zz; font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem); font-weight: 600;
  color: var(--accent); opacity: .5; line-height: 1;
}
.zz__num::before { content: counter(zz, decimal-leading-zero); }
.zz__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--line-gold); border-radius: var(--r);
  background: var(--wash); color: var(--accent);
}
.zz__icon svg { width: 20px; height: 20px; }
.zz h3 { font-size: var(--fs-h4); margin-bottom: .35rem; }
.zz p { font-size: var(--fs-sm); color: var(--text-dim); margin: 0; }
.zz::after {                       /* dot on the spine */
  content: ""; position: absolute; top: clamp(1.6rem, 1.2rem + 1vw, 2.3rem);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
  transform: scale(0); transition: transform .5s var(--ease) .1s;
}
.zz:nth-child(odd)::after { right: calc(clamp(1.5rem, 3vw, 3rem) * -1 - 4px); }
.zz:nth-child(even)::after { left: calc(clamp(1.5rem, 3vw, 3rem) * -1 - 5px); }
.zz.is-in::after { transform: scale(1); }

/* --- E. Stepper: horizontal process band ---------------------------------- */

.stepper { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.stepper::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 27px; height: 1px;
  background: var(--line);
}
.stepper::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 27px; height: 1px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-300));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.8s var(--ease) .2s;
}
.stepper.is-in::after { transform: scaleX(1); }
.step { position: relative; padding: 0 clamp(.5rem, 1vw, 1rem); text-align: center; }
.step__dot {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 1.1rem;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--accent);
  background: var(--bg); border: 1px solid var(--line-gold); border-radius: 50%;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease-soft),
              color var(--t) var(--ease-soft);
}
.step:hover .step__dot {
  transform: translateY(-3px) scale(1.06);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--on-accent);
}
.step h3 { font-size: 1rem; margin-bottom: .4rem; letter-spacing: 0; }
.step p { font-size: var(--fs-xs); color: var(--text-dim); margin: 0; }

/* --- F. Quote band -------------------------------------------------------- */

.quote-band {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
  text-align: center;
}
.quote-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 120% at 50% 0%, var(--wash-2), transparent 70%);
}
.quote-band__mark {
  width: 46px; margin: 0 auto 1.6rem; color: var(--accent); opacity: .55;
}
.quote-band__mark svg { width: 100%; height: auto; }
.quote-band p {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 2vw, 2.6rem);
  line-height: 1.32; color: var(--text);
  max-width: 26ch; margin: 0 auto 1.6rem; text-wrap: balance;
}
.quote-band cite {
  font-style: normal; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute);
}

/* --- G. Reveal variants --------------------------------------------------- */

/* The wipe clips the CHILD, never the observed element itself: an element
   clipped to zero area reports no intersection, so it would never receive
   .is-in and would stay hidden for good. */
.js .reveal--wipe > * {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal--wipe.is-in > * { clip-path: inset(0 0 0 0); }

.js .reveal--blur {
  opacity: 0; filter: blur(14px); transform: translateY(14px);
  transition: opacity .9s var(--ease-soft), filter 1s var(--ease-soft), transform .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal--blur.is-in { opacity: 1; filter: blur(0); transform: none; }

.js .reveal--zoom {
  opacity: 0; transform: scale(1.06);
  transition: opacity 1s var(--ease-soft), transform 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal--zoom.is-in { opacity: 1; transform: none; }

.js .reveal--rise-rotate {
  opacity: 0; transform: translateY(30px) rotate(-1.2deg);
  transition: opacity .9s var(--ease-soft), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal--rise-rotate.is-in { opacity: 1; transform: none; }

/* Word-by-word heading rise, applied by main.js to [data-split] */
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--w, 0) * 55ms);
}
.is-in .split-word > span,
.split-word.is-in > span { transform: none; }

/* Parallax layers get their offset from main.js */
[data-parallax] { will-change: transform; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 980px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial__aside { position: static; }
  .stepper { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .stepper::before, .stepper::after { display: none; }
}

@media (max-width: 860px) {
  /* The alternating left/right layout uses order:1/2 on the two children so
     desktop's 2-column grid can flip sides per row. On a single mobile
     column that same order still applies vertically, so every other product
     had its image pushed BELOW its text and spec table instead of above it.
     Force natural DOM order here: image first, then text, for every item. */
  .split { grid-template-columns: 1fr; }
  .split > * { order: 0 !important; }
  .split__media {
    /* Auto margins on a grid item cancel the default stretch-to-fill
       behaviour; since the photo inside is absolutely positioned (no in-flow
       content to size from), the box collapsed to ~2px. An explicit width
       keeps it anchored to the column before max-width caps it. */
    width: 100%;
    aspect-ratio: 16 / 10;
    max-width: 420px;
    margin-inline: auto;
  }

  .showcase, .showcase--flip { grid-template-columns: 1fr; direction: ltr; }
  .showcase__media,
  .showcase--flip .showcase__media {
    max-width: 100%; margin-inline: 0;
    aspect-ratio: 16 / 10;
  }
  .zigzag::before { left: 7px; transform: scaleY(0); }
  .zigzag.is-in::before { transform: scaleY(1); }
  .zz { width: 100%; padding-left: 2.2rem; }
  .zz:nth-child(even) { margin-left: 0; margin-top: 0; }
  .zz:nth-child(odd)::after,
  .zz:nth-child(even)::after { left: 3px; right: auto; }
}

@media (max-width: 640px) {
  .stepper { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .link-arrow--glow {
    animation: none !important;
    box-shadow: 0 0 18px -6px rgba(201, 169, 106, .6);
  }
  .js .reveal--wipe > * { clip-path: none !important; }
  .js .reveal--blur,
  .js .reveal--zoom,
  .js .reveal--rise-rotate { opacity: 1 !important; filter: none !important; transform: none !important; }
  .split-word > span { transform: none !important; }
  .zigzag::before, .stepper::after { transform: scaleY(1) scaleX(1) !important; }
  [data-parallax] { transform: none !important; }
}

/* ---------- 29. Page hero backgrounds ---------- */

/* The interior heroes are shorter than the homepage one, so the scrim is
   tuned separately: darker under the text, clearer on the right. */
.hero--page.hero--photo { min-height: min(62svh, 560px); }
.hero--page.hero--photo .hero__media img {
  object-position: center 52%;
  filter: brightness(.6) saturate(.9);
  animation: none;
  transform: scale(1.03);
}
.hero--page.hero--photo .hero__bg::before {
  background:
    linear-gradient(100deg, rgba(7, 6, 5, .94) 0%, rgba(7, 6, 5, .76) 36%,
                            rgba(7, 6, 5, .34) 68%, rgba(7, 6, 5, .1) 100%),
    radial-gradient(58% 46% at 14% 4%, rgba(201, 169, 106, .12), transparent 62%);
}
.hero--page.hero--photo .hero__bg::after {
  background:
    radial-gradient(96% 88% at 44% 46%, transparent 36%, rgba(0, 0, 0, .42) 100%),
    linear-gradient(180deg, transparent 62%, var(--bg-deep) 99%);
}
.hero--page.hero--photo .hero__botanical { opacity: .05; }

@media (max-width: 900px) {
  .hero--page.hero--photo { min-height: auto; }
  .hero--page.hero--photo .hero__media img { filter: brightness(.5) saturate(.9); }
}

/* ---------- 30. Division brand marks ---------- */

/* Each division now carries its own logo rather than a lettered pill. */
.showcase__mark {
  height: 60px; width: auto;
  margin-bottom: 1.15rem;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
  transition: transform var(--t-slow) var(--ease);
}
.showcase:hover .showcase__mark { transform: translateY(-3px) scale(1.04); }

.hero__mark {
  height: 72px; width: auto;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .6));
}

@media (max-width: 640px) {
  .showcase__mark { height: 50px; }
  .hero__mark { height: 58px; margin-bottom: 1.1rem; }
}

/* ---------- 22. Sea cucumber grades ---------- */
/* Dried sea cucumber ships in seven grades. They hang off the parent product
   panel as thumbnails so they read as one line's variants, not as seven lines. */

.variants {
  margin: -1.5rem 0 0;
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.variants__head { margin-bottom: 1.25rem; }
.variants__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  margin: 0 0 .35rem;
  letter-spacing: 0;
}
.variants__note {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  line-height: 1.62;
  margin: 0;
  max-width: 62ch;
}

.variants__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.7rem, .5rem + .7vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 480px) { .variants__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .variants__grid { grid-template-columns: repeat(4, 1fr); } }

.variant {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md, var(--r-lg));
  overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease-soft);
}
.variant:hover { transform: translateY(-4px); border-color: var(--line-gold); }

.variant__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.variant__media picture, .variant__media img { display: block; width: 100%; height: 100%; }
.variant__media img { object-fit: cover; }

.variant__body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .12rem; }
.variant__name {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; line-height: 1.2;
  color: var(--text);
}
.variant__alt { font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.4; }

.variants__cta { margin: 1.35rem 0 0; }

@media (max-width: 560px) {
  .variants { margin-top: -1rem; }
}

/* The toggle is authored resting on EN. When a returning visitor's saved language
   is ID, the first apply() moves the thumb — without this the move animates on
   every page load and looks like the site is switching language by itself.
   i18n.js drops .lang-boot after the first paint, so real clicks still slide. */
.lang-boot .langtoggle__thumb,
.lang-boot .langtoggle__btn { transition: none !important; }

/* ---------- 23. First-visit language gate ---------- */
/* No splash page: the page loads, dims, and only the header language toggle
   stays lit until the visitor picks. Hidden unless the pre-paint script in
   <head> adds .langgate-open, so with JS off the site behaves normally. */

.langgate-veil { display: none; }

.langgate-open .langgate-veil {
  display: block;
  position: fixed; inset: 0;
  z-index: 150;                     /* over the header (100), under the toggle */
  background: rgba(7, 6, 5, .82);
  animation: langgate-veil-in .35s var(--ease-soft, ease-out) both;
}
@keyframes langgate-veil-in { from { opacity: 0; } to { opacity: 1; } }

/* Freeze the page behind the veil. */
.langgate-open, .langgate-open body { overflow: hidden; }

/* The header sits in its own stacking context, so the toggle can only rise
   above the veil if the header does. Its own surface is dropped so the header
   strip dims with everything else. */
.langgate-open .header {
  z-index: 160;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.langgate-open .header::before,
.langgate-open .header::after { opacity: 0; }

/* Everything in the header except the toggle dims and stops responding. */
.langgate-open .header__inner > *:not(.header__actions),
.langgate-open .header__actions > *:not(.langtoggle) {
  opacity: .26;
  pointer-events: none;
  transition: opacity var(--t, .3s) var(--ease-soft, ease);
}

/* The toggle is left exactly as it looks elsewhere on the site; the gate only
   lifts it through the veil and puts a soft halo behind it. */
.langgate-open .langtoggle {
  position: relative;
  z-index: 1;
  animation: langgate-glow 2.6s var(--ease-soft, ease-in-out) infinite;
}
@keyframes langgate-glow {
  0%, 100% { box-shadow: 0 0 16px 2px rgba(201, 169, 106, .28), 0 8px 26px rgba(0, 0, 0, .55); }
  50%      { box-shadow: 0 0 26px 6px rgba(201, 169, 106, .16), 0 8px 26px rgba(0, 0, 0, .55); }
}

/* Callout under the toggle. */
.langgate-tip { display: none; }
.langgate-open .langgate-tip {
  display: block;
  position: absolute; top: calc(100% + .85rem); right: 0;
  width: max-content; max-width: min(17rem, calc(100vw - 2rem));
  padding: .7rem .95rem;
  text-align: left;
  background: var(--ink-800, #171413);
  border: 1px solid var(--line-gold, rgba(201, 169, 106, .34));
  border-radius: var(--r-md, 8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  animation: langgate-tip-in .4s .12s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
}
/* Arrow pointing up at the toggle. */
.langgate-open .langgate-tip::before {
  content: ""; position: absolute; top: -5px; right: 2.1rem;
  width: 9px; height: 9px;
  background: var(--ink-800, #171413);
  border-left: 1px solid var(--line-gold, rgba(201, 169, 106, .34));
  border-top: 1px solid var(--line-gold, rgba(201, 169, 106, .34));
  transform: rotate(45deg);
}
@keyframes langgate-tip-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.langgate-tip__title {
  margin: 0; font-size: .82rem; font-weight: 600; line-height: 1.3;
  color: var(--accent, #C9A96A);
}
.langgate-tip__sub {
  margin: .12rem 0 0; font-size: .72rem; line-height: 1.4;
  color: var(--text-dim, #C4BCAE);
}

@media (max-width: 560px) {
  .langgate-open .langgate-tip { right: -.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .langgate-open .langgate-veil,
  .langgate-open .langtoggle,
  .langgate-open .langgate-tip { animation: none; }
}

/* Caption for a panel photo that is itself one of the grades. */
.split__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.7rem 1.05rem .8rem;
  font-size: var(--fs-xs); letter-spacing: .04em;
  color: var(--text); text-align: left;
  background: linear-gradient(to top, rgba(7, 6, 5, .9), transparent);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  pointer-events: none;
}