/* ==========================================================================
   RAL PLANTATIONS SDN. BHD. — v3
   Design system: "Sequel" — private screening after dark.
   --------------------------------------------------------------------------
   THE RULE THAT GOVERNS EVERYTHING ELSE

   The interface is strictly achromatic: pure black, white, three neutral
   greys, and one warm off-white. 0% colorfulness. All warmth in this design
   comes from PHOTOGRAPHY, never from the chrome.

   That is why the forest green, agarwood brown and resin amber no longer
   appear as interface tones. The job amber used to do — marking an action —
   is now done by Lamp Cream #f5f5f0. Brown and green survive only inside the
   images, which are filtered warm-neutral to read as 35mm film stock.

   FONT SUBSTITUTION (both originals are licensed retail faces)
     VisueltPro -> Inter                    (grotesk, ss01 + cv11 on)
     Bradford   -> Instrument Serif italic  (display serif, italic only)
   Instrument Serif ships one weight (400) where Bradford specifies 500; at
   display sizes on black the difference is not legible.

   1.  Tokens
   2.  Reset & base
   3.  Type
   4.  Components
   5.  Navigation
   6.  Hero
   7.  Sections in document order
   8.  Footer
   9.  Responsive
   10. Reduced motion / print
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Colour — the entire system */
  --void:     #000000;
  --white:    #ffffff;
  --charcoal: #202020;
  --graphite: #333333;
  --cream:    #f5f5f0;
  --smoke:    #999999;

  /* Surfaces */
  --surface-0: var(--void);      /* canvas, nav, hero */
  --surface-1: var(--charcoal);  /* the single elevation step */
  --surface-2: var(--graphite);  /* hairlines, outlines */

  /* Type families */
  --f-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Instrument Serif", "Canela", "Tiempos Headline", Georgia, serif;

  /* Type scale — fluid, resolving to the spec sizes at 1440px */
  --t-display:  clamp(2.25rem, 1.2rem  + 4.2vw, 4.75rem);   /* ->  76px */
  --t-h1:       clamp(2.15rem, 1.35rem + 3.2vw, 3.5625rem); /* ->  57px */
  --t-h2:       clamp(1.9rem,  1.4rem  + 2.0vw, 3.375rem);  /* ->  54px */
  --t-h3:       clamp(1.35rem, 1.1rem  + 1.0vw, 1.875rem);  /* ->  30px */
  --t-body-lg:  1.25rem;   /* 20px */
  --t-body:     1rem;      /* 16px — never smaller for running text */
  --t-nav:      .9375rem;  /* 15px */
  --t-sm:       .875rem;   /* 14px */
  --t-label:    .75rem;    /* 12px */
  --t-label-sm: .6875rem;  /* 11px */
  --t-micro:    .625rem;   /* 10px — the floor */

  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;

  /* Spacing — 4px base */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-28: 28px; --s-32: 32px;
  --s-40: 40px; --s-64: 64px; --s-80: 80px; --s-96: 96px;

  /* Layout */
  --page: 1200px;
  --pad:  clamp(20px, 4vw, 40px);
  --sect: clamp(64px, 7vw, 120px);
  --gap:  var(--s-16);

  /* Radius */
  --r-card: 10px;
  --r-full: 9999px;

  /* Elevation — the ONLY two shadows in the system */
  --shadow-lg: rgba(0, 0, 0, .15) 0 4px 20px 0;
  --shadow-xl: rgba(0, 0, 0, .35) 0 10px 30px 0, rgba(255, 255, 255, .08) 0 1px 0 0 inset;

  /* Motion — slow-out, weighted, never springy */
  --e: cubic-bezier(.625, .05, 0, 1);
  --d: .28s;
  --d-fast: .2s;

  /* Art direction slots. One line each to swap in real photography. */
  /* Real photograph first, procedural placeholder second. A layer that
     fails to load simply is not painted, so the SVG shows through until
     hero-agarwood.jpg exists — the page never renders a blank hero. */
  --img-hero:       url("../img/hero-agarwood.jpg"), url("../img/tex-forest.svg");
  --img-origin:     url("../img/tex-foliage.svg");
  --img-wood:       url("../img/tex-wood.svg");
  --img-resin:      url("../img/tex-resin.svg");
  --img-oil:        url("../img/tex-oil.svg");
  --img-chips:      url("../img/tex-chips.svg");
  --img-block:      url("../img/tex-block.svg");
  --img-macro:      url("../img/tex-macro.svg");
  --img-plantation: url("../img/tex-plantation.svg");
}

/* Image slots applied through classes, never inline styles: url() in a custom
   property resolves against the DOCUMENT from an inline style attribute but
   against THIS FILE from a rule here. */
.i-hero       { background-image: var(--img-hero); }
.i-origin     { background-image: var(--img-origin); }
.i-wood       { background-image: var(--img-wood); }
.i-resin      { background-image: var(--img-resin); }
.i-oil        { background-image: var(--img-oil); }
.i-chips      { background-image: var(--img-chips); }
.i-block      { background-image: var(--img-block); }
.i-macro      { background-image: var(--img-macro); }
.i-plantation { background-image: var(--img-plantation); }

/* ------------------------------------------------------- 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }

body {
  margin: 0;
  background: var(--void);
  color: var(--white);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: 1.5;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--cream); color: var(--void); }

:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  padding: 12px 24px; border-radius: var(--r-full);
  background: var(--cream); color: var(--void);
  font-size: var(--t-sm); font-weight: var(--w-medium);
  transform: translateY(-300%);
  transition: transform var(--d) var(--e);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--pad); }
.sect { padding-block: var(--sect); }
.sect--tight { padding-block: calc(var(--sect) * .6); }

/* Section separator — graphite hairline only, never 1px solid white */
.rule { height: 1px; background: var(--graphite); border: 0; margin: 0; }

/* ------------------------------------------------------------- 3. TYPE */
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-light); }
p { margin: 0; }

/* Display — the signature. Weight 500 at true display sizes. */
.display {
  font-size: var(--t-display);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.h1 {
  font-size: var(--t-h1);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: -.05em;
  text-wrap: balance;
}
/* Narrative headline — hairline 300, the whisper. */
.h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-light);
  line-height: 1.2;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-light);
  line-height: 1.2;
  letter-spacing: -.025em;
}

/* The only typographic flourish in the system: one italic serif payoff word,
   inline, lowercase, at the same size as the sans around it. */
.payoff {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.03em;
}

.body-lg { font-size: var(--t-body-lg); line-height: 1.5; color: var(--white); max-width: 58ch; }
.body    { font-size: var(--t-body); line-height: 1.5; color: var(--smoke); max-width: 62ch; }
.body + .body { margin-top: var(--s-20); }

/* Uppercase tracked labels do the work most sites give to colour. */
.label {
  font-size: var(--t-label-sm);
  font-weight: var(--w-medium);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--smoke);
}
.label--white { color: var(--white); }
.label--micro { font-size: var(--t-micro); letter-spacing: .08em; }
.label--sm    { font-size: 13px; letter-spacing: .03em; font-weight: var(--w-regular); }

/* Tabular figures so digits keep a consistent width in the statistics row. */
.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- 4. COMPONENTS */

/* Primary filled pill — the only filled button treatment in the system. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  height: 48px; padding-inline: var(--s-24);
  border-radius: var(--r-full);
  background: var(--cream);
  color: var(--void);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transition: opacity var(--d) var(--e), transform var(--d) var(--e);
}
.btn:hover  { opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn--sm { height: 40px; padding-inline: var(--s-20); font-size: var(--t-nav); }

/* Ghost outline pill — the secondary, recedes into the canvas. */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
  height: 48px; padding-inline: var(--s-20);
  border: 1px solid var(--white); border-radius: var(--r-full);
  color: var(--white);
  font-size: var(--t-body); font-weight: var(--w-medium);
  white-space: nowrap;
  transition: background-color var(--d) var(--e), color var(--d) var(--e);
}
.btn-ghost:hover { background: var(--white); color: var(--void); }
.btn-ghost--sm { height: 40px; font-size: var(--t-nav); }

/* Frosted glass badge. The inset white top edge is what makes it read as
   glass catching light rather than a flat translucent chip. */
.badge {
  display: inline-flex; align-items: center;
  padding: var(--s-8) var(--s-16);
  border-radius: var(--r-full);
  background: rgba(200, 200, 200, .1);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  color: var(--white);
  font-size: var(--t-label-sm);
  font-weight: var(--w-medium);
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-xl);
}

/* Static chip on a solid surface — outlined, no glass, no shadow. */
.chip {
  display: inline-flex; align-items: center;
  padding: var(--s-8) var(--s-16);
  border: 1px solid var(--graphite);
  border-radius: var(--r-full);
  font-size: var(--t-label-sm);
  font-weight: var(--w-medium);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* Elevated card — one tone step above the void. Never a shadow. */
.card {
  background: var(--charcoal);
  border-radius: var(--r-card);
  overflow: hidden;
}
.card__pad { padding: var(--s-32); }

/* Cinematic media card — full-bleed photograph, scrim, overlaid text. */
.media {
  position: relative;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background-color: var(--charcoal);
  isolation: isolate;
}
.media__img {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  /* Warm-neutral, slightly desaturated — 35mm film stock, not saturated
     digital. Applied globally so client photography inherits the treatment. */
  filter: saturate(.6) sepia(.1) contrast(1.04) brightness(.96);
  transform: scale(1);
  transition: transform 1.2s var(--e);
}
.media:hover .media__img { transform: scale(1.03); }

/* Mandatory readability scrim. Text is never placed on raw photography. */
.media__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.media__scrim--full {
  background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%);
}
.media__body {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--s-8);
  min-height: 100%;
  padding: var(--s-28);
}
.media__badge { position: absolute; top: var(--s-20); right: var(--s-20); z-index: 2; }
.media__title { font-size: 21px; font-weight: var(--w-medium); line-height: 1.2; letter-spacing: -.02em; }

/* Circular play button — floating glass, never inside a card. */
.play {
  display: inline-flex; align-items: center; gap: var(--s-12);
  padding: var(--s-8) var(--s-20) var(--s-8) var(--s-8);
  border: 1px solid var(--white);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  color: var(--white);
  font-size: 13px; font-weight: var(--w-regular);
  letter-spacing: .03em; text-transform: uppercase;
  transition: background-color var(--d) var(--e);
}
.play:hover { background: rgba(255, 255, 255, .16); }
.play__disc {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
}
.play__disc svg { width: 10px; height: 10px; }

/* Text link with a rule that draws under it */
.tlink {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-size: var(--t-sm); font-weight: var(--w-medium);
  color: var(--white);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--cream), var(--cream));
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--d) var(--e);
}
.tlink:hover { background-size: 100% 1px; }
.tlink svg { transition: transform var(--d) var(--e); }
.tlink:hover svg { transform: translateX(3px); }

/* Section heading pair — line 1 context, line 2 the italic serif payoff. */
.pair { display: grid; gap: var(--s-24); max-width: 20ch; }
.pair--wide { max-width: 26ch; }

/* Spec rows — graphite hairlines, uppercase keys, white values. */
.rows { display: grid; }
.rows > div {
  display: grid; grid-template-columns: minmax(120px, 24%) 1fr; gap: var(--s-24);
  padding-block: var(--s-20);
  border-top: 1px solid var(--graphite);
}
.rows > div:last-child { border-bottom: 1px solid var(--graphite); }
.rows dt, .rows b {
  font-size: var(--t-label-sm); font-weight: var(--w-medium);
  letter-spacing: .05em; text-transform: uppercase; color: var(--smoke);
}
.rows span { font-size: var(--t-body); color: var(--white); }

/* ------------------------------------------------------ 5. NAVIGATION */
/* Transparent over the hero, solid black once the photograph is behind you. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--d) var(--e), border-color var(--d) var(--e);
}
.nav.is-solid { background: var(--void); border-bottom-color: var(--graphite); }
.nav__in { display: flex; align-items: center; gap: var(--s-32); height: 76px; }

.logo { display: inline-flex; align-items: center; gap: var(--s-12); }
.logo__mark { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.logo__mark i { display: block; width: 2px; background: var(--white); }
.logo__mark i:nth-child(1) { height: 8px; }
.logo__mark i:nth-child(2) { height: 16px; }
.logo__mark i:nth-child(3) { height: 11px; }
.logo__mark i:nth-child(4) { height: 5px; }
.logo__word { font-size: var(--t-body-lg); font-weight: var(--w-medium); letter-spacing: -.03em; }

.nav__links { display: flex; align-items: center; gap: var(--s-32); margin-inline: auto; }
/*
 * wp_nav_menu always emits <li>. Without a list-style reset those render as
 * bullets between the links. The <ul> carries the row layout so that the
 * no-menu-assigned fallback, which emits bare <a>, still lays out from
 * .nav__links above.
 */
.nav__list { display: flex; align-items: center; gap: var(--s-32); list-style: none; margin: 0; padding: 0; }
.menu__list { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: var(--t-nav); font-weight: var(--w-medium); color: var(--white);
  opacity: .7; transition: opacity var(--d-fast) var(--e);
}
.nav__links a:hover, .nav__links a[aria-current="true"] { opacity: 1; }

.burger { display: none; width: 44px; height: 44px; }
.burger i { display: block; width: 20px; height: 1px; background: var(--white); margin: 5px auto; transition: transform var(--d) var(--e), opacity var(--d-fast) var(--e); }
body.is-menu .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.is-menu .burger i:nth-child(2) { opacity: 0; }
body.is-menu .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed; inset: 76px 0 auto; z-index: 89;
  background: var(--void); border-bottom: 1px solid var(--graphite);
  padding: var(--s-24) var(--pad) var(--s-40);
  display: grid; gap: var(--s-4);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--d-fast) var(--e), transform var(--d) var(--e), visibility var(--d);
}
body.is-menu .menu { opacity: 1; visibility: visible; transform: none; }
.menu a { padding: var(--s-16) 0; font-size: 30px; font-weight: var(--w-light); letter-spacing: -.025em; }
.menu .btn { margin-top: var(--s-16); }

/* ------------------------------------------------------- 5b. THE FORM */
/* One form on the site. Achromatic like everything else: fields are holes in
   the surface marked by a hairline, not raised boxes. */
.form { display: grid; gap: var(--s-20); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-20); }
.form__field { display: grid; gap: var(--s-8); margin: 0; }

.form__field label {
  font-size: var(--t-sm); letter-spacing: .04em; text-transform: uppercase;
  color: var(--smoke);
}

.form input[type="text"],
.form input[type="email"],
.form select,
.form textarea {
  width: 100%;
  font: inherit; font-size: var(--t-body);
  color: var(--white);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--surface-2);
  border-radius: 0;              /* iOS rounds these by default. */
  padding: var(--s-12) 0;
  transition: border-color var(--d-fast) var(--e);
  -webkit-appearance: none; appearance: none;
}
.form textarea { resize: vertical; min-height: 120px; }

/* The select arrow, drawn rather than left to the platform, which would render
   a light-mode chevron on this dark surface. */
.form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
  padding-right: var(--s-24);
}
.form select option { background: var(--charcoal); color: var(--white); }

.form :is(input, select, textarea):focus-visible {
  outline: none; border-bottom-color: var(--white);
}
.form :is(input, textarea)::placeholder { color: var(--graphite); }
.form :is(input, select, textarea)[aria-invalid="true"] { border-bottom-color: var(--white); }

.form__err { font-size: var(--t-sm); color: var(--white); opacity: .85; }

.form__foot {
  display: flex; align-items: center; gap: var(--s-24);
  flex-wrap: wrap; margin-top: var(--s-12);
}
.form__hint { font-size: var(--t-sm); color: var(--smoke); }

.form__note {
  padding: var(--s-16) var(--s-20);
  border: 1px solid var(--surface-2);
  font-size: var(--t-body);
}
.form__note--ok  { border-color: var(--white); }
.form__note--bad { border-color: var(--smoke); color: var(--white); }

/* The honeypot. Removed from the layout without display:none, which some bots
   check for, and taken out of the accessibility tree by aria-hidden. */
.form__hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 600px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ 6. HERO */
/* The photograph IS the fold. No nav-bar fold, no above-the-fold block. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__img {
  position: absolute; inset: 0; z-index: -3;
  background-position: center; background-size: cover;
  /* The hero frame is greener than the rest of the library, so it takes a
     slightly harder pull toward warm-neutral than the global image grade. */
  filter: saturate(.5) sepia(.14) contrast(1.06) brightness(.88);
}
/*
 * Living smoke.
 *
 * The smoke is part of the photograph, so it cannot be animated on its own.
 * assets/js/ral-smoke.js draws a domain-warped noise field here instead and
 * screen-blends it over the frame, which is how backlit smoke behaves: it adds
 * light rather than covering what is behind it.
 *
 * It sits above the photograph and below the scrim, so the headline stays
 * readable no matter how thick the smoke gets. Hidden until the shader has
 * compiled, so a failed context leaves no empty blended box behind.
 */
.hero__smoke {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 1.2s var(--e);
}
.hero__smoke.is-live { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__smoke { display: none; }
}

/* The only gradient in the system: a readability layer, not decoration. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
}
.hero__in {
  width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-40);
  /* The block sits well clear of the bottom edge: the lower third of the
     frame is moss and shadow, and the headline reads better lifted off it. */
  padding-block: var(--s-64) clamp(72px, 15vh, 190px);
}
/* Internal pages: the hero introduces the page rather than being the page.
   Two thirds of the viewport keeps the first section of content in view. */
.hero--short { min-height: clamp(420px, 66svh, 680px); }

.hero__title { display: grid; gap: var(--s-24); }
.hero__meta { display: flex; gap: var(--s-24); }
.hero__aside { display: grid; justify-items: end; gap: var(--s-20); flex: none; }

/* --------------------------------------------------- 7. SECTIONS */

/* Statement — a single hairline narrative headline on the void. */
.statement { display: grid; gap: var(--s-40); }
.statement__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-64); align-items: start; }

/* Numbers — oversized, achromatic, static. */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); }
.figure {
  display: grid; gap: var(--s-12);
  padding: var(--s-40) var(--s-24) var(--s-40) 0;
  border-top: 1px solid var(--graphite);
}
.figure b {
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  font-weight: var(--w-light);
  line-height: 1; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.figure b sup { font-size: .34em; vertical-align: super; font-weight: var(--w-regular); }

/* Cinematic media grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.story .media { min-height: 460px; }

/* Products */
.prod .media { min-height: 520px; }
.prod__lead { min-height: 640px; }

/* Oud — full-bleed still with a charcoal spec panel beside it */
.oud__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap); align-items: stretch; }
.oud__media { min-height: 620px; }
.oud__panel { display: flex; flex-direction: column; justify-content: center; gap: var(--s-32); }

/* Sustainability journey — a sparse numbered list, no connectors */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--graphite); border-block: 1px solid var(--graphite); }
.journey__n { background: var(--void); padding: var(--s-32) var(--s-24); display: grid; gap: var(--s-12); }
.journey__n em { font-style: normal; font-size: var(--t-label-sm); letter-spacing: .05em; color: var(--smoke); }
.journey__n b { font-size: var(--t-h3); font-weight: var(--w-light); letter-spacing: -.025em; }
.journey__n span { font-size: var(--t-sm); color: var(--smoke); }

/* Plantation — full-bleed cinematic band */
.band { position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; }
.band__img { position: absolute; inset: 0; background-position: center; background-size: cover; filter: saturate(.6) sepia(.1) contrast(1.04) brightness(.88); }
.band__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%); }
.band__in { position: relative; width: 100%; padding-block: var(--s-64); }

/* Marquee — the single long-duration motion in the system */
.marquee { overflow: hidden; border-block: 1px solid var(--graphite); padding-block: var(--s-24); }
.marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee__track > span {
  display: inline-flex; align-items: center; gap: var(--s-64);
  padding-right: var(--s-64);
  font-size: var(--t-label); font-weight: var(--w-medium);
  letter-spacing: .08em; text-transform: uppercase; color: var(--smoke);
  white-space: nowrap;
}
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* Field notes — sparse rows. Hovering one dims the others. */
.notes { display: grid; }
.note {
  display: grid; grid-template-columns: 160px 1fr auto; gap: var(--s-32); align-items: center;
  padding-block: var(--s-24);
  border-top: 1px solid var(--graphite);
  transition: opacity var(--d) var(--e);
}
.note:last-of-type { border-bottom: 1px solid var(--graphite); }
.notes:hover .note { opacity: .45; }
.notes .note:hover { opacity: 1; }
.note__img { aspect-ratio: 16/10; border-radius: var(--r-card); background-position: center; background-size: cover; filter: saturate(.6) sepia(.1) contrast(1.04); }
.note__t { display: grid; gap: var(--s-8); }
.note__arrow { color: var(--smoke); transition: transform var(--d) var(--e), color var(--d) var(--e); }
.note:hover .note__arrow { transform: translateX(4px); color: var(--white); }

/* Contact */
.contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-64); align-items: center; }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-8); }

/* ------------------------------------- 7b. LONG-FORM CONTENT (WordPress)
   Everything the editor can produce inside a Field Note or a page. The rest of
   the site is composed markup; this is the one place arbitrary content lands,
   so it needs its own typographic contract. */
.note-body { max-width: 68ch; font-size: var(--t-body-lg); line-height: 1.6; color: #B9B4A9; }
.note-body > * + * { margin-top: var(--s-24); }
.note-body h2 { font-size: var(--t-h3); font-weight: var(--w-light); color: var(--white); margin-top: var(--s-64); letter-spacing: -.025em; }
.note-body h3 { font-size: var(--t-body-lg); font-weight: var(--w-medium); color: var(--white); margin-top: var(--s-40); letter-spacing: -.01em; }
.note-body a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--graphite); transition: text-decoration-color var(--d-fast) var(--e); }
.note-body a:hover { text-decoration-color: var(--cream); }
.note-body strong { color: var(--white); font-weight: var(--w-medium); }
.note-body em { font-family: var(--f-serif); font-style: italic; color: var(--white); }
.note-body ul, .note-body ol { padding-left: 1.2em; display: grid; gap: var(--s-8); }
.note-body li::marker { color: var(--smoke); }
.note-body img, .note-body figure img { border-radius: var(--r-card); width: 100%; }
.note-body figure { margin: var(--s-40) 0; }
.note-body figcaption { margin-top: var(--s-12); font-size: var(--t-label-sm); letter-spacing: .05em; text-transform: uppercase; color: var(--smoke); }
.note-body blockquote {
  margin: var(--s-40) 0; padding-left: var(--s-24);
  border-left: 1px solid var(--graphite);
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--t-h3); line-height: 1.3; color: var(--white);
}
.note-body hr { border: 0; height: 1px; background: var(--graphite); margin: var(--s-64) 0; }
.note-body code { font-size: .9em; background: var(--charcoal); padding: .1em .35em; border-radius: 4px; }
.note-body pre { background: var(--charcoal); padding: var(--s-24); border-radius: var(--r-card); overflow-x: auto; }

/* Pagination — WordPress markup, styled to the system */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px; padding-inline: var(--s-12);
  border: 1px solid var(--graphite); border-radius: var(--r-full);
  font-size: var(--t-sm); color: var(--smoke);
  transition: border-color var(--d-fast) var(--e), color var(--d-fast) var(--e);
}
.pagination .page-numbers:hover { border-color: var(--smoke); color: var(--white); }
.pagination .page-numbers.current { background: var(--cream); border-color: var(--cream); color: var(--void); }

/* Contact card padding — was an inline style, now a class */
.cta__card { padding: clamp(1.5rem, 1rem + 2.4vw, 3rem); }

/* Lead product card sits above the two-up grid */
.prod__lead { margin-bottom: var(--gap); }

/* WordPress core alignment + admin bar */
.alignwide { max-width: 1200px; }
.alignfull { max-width: none; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* ------------------------------------------------------------ 8. FOOTER */
.ftr { border-top: 1px solid var(--graphite); padding-block: var(--sect) var(--s-40); }
.ftr__display { margin-bottom: var(--s-80); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr repeat(3, .87fr); gap: var(--s-40); }
.ftr h4 { font-size: var(--t-label-sm); font-weight: var(--w-medium); letter-spacing: .05em; text-transform: uppercase; color: var(--smoke); margin-bottom: var(--s-20); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-12); font-size: var(--t-sm); }
.ftr ul a { opacity: .7; transition: opacity var(--d-fast) var(--e); }
.ftr ul a:hover { opacity: 1; }
.ftr__bot {
  display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-32); justify-content: space-between;
  margin-top: var(--s-64); padding-top: var(--s-24); border-top: 1px solid var(--graphite);
  font-size: var(--t-label-sm); letter-spacing: .05em; text-transform: uppercase; color: var(--smoke);
}

/* --------------------------------------------------------- 9. RESPONSIVE */
@media (max-width: 1100px) {
  .statement__grid,
  .oud__grid,
  .contact__grid { grid-template-columns: 1fr; gap: var(--s-40); }
  .oud__media { min-height: 460px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .nav__in { height: 68px; }
  .menu { inset-block-start: 68px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero__in { flex-direction: column; align-items: flex-start; gap: var(--s-32); }
  .hero__aside { justify-items: start; }
  .story .media, .prod .media, .prod__lead { min-height: 420px; }
}

@media (max-width: 600px) {
  /* Portrait viewports crop a 16:9 frame hard on both sides. Bias the crop
     right so the wood and smoke stay in shot instead of the empty left third. */
  .hero__img { background-position: 62% 50%; }

  .figures { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .note { grid-template-columns: 96px 1fr; gap: var(--s-20); }
  .note__arrow { display: none; }
  .ftr__grid { grid-template-columns: 1fr; gap: var(--s-32); }
  .rows > div { grid-template-columns: 1fr; gap: var(--s-8); }
  .card__pad { padding: var(--s-24); }
  .media__body { padding: var(--s-20); }
  .btn, .btn-ghost { width: 100%; }
  .hero__aside { width: 100%; }
}

/* -------------------------------------------- 10. REDUCED MOTION / PRINT */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; }
}

@media print {
  .nav, .menu, .skip, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
}