/* ===========================================
   RKG TIMBERS — design tokens
   =========================================== */
:root{
  --bark:        #2A1810;
  --walnut:      #4A2C1A;
  --rust:        #8C4A2B;
  --rust-light:  #C97A4A;
  --sand:        #F3E6D0;
  --cream:       #FBF6EC;
  --ink:         #241510;
  --paper:       #F8F1E4;

  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --max-w: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img, video{ max-width: 100%; height: auto; }
html, body{ max-width: 100vw; }

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

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

.serif-italic{ font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--rust); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 10px;
}

/* subtle grain overlay for texture, fixed across whole page */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===========================================
   HEADER
   =========================================== */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--cream);
  box-shadow: 0 2px 14px rgba(42,24,16,0.08);
}
.header-inner{
  max-width: 1320px; margin:0 auto; padding: 14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:600; font-size:1.05rem; letter-spacing:0.02em; color: var(--bark); }
.brand-logo{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ---- nav links + dropdowns (BFP-style) ---- */
.nav-links{ display:flex; align-items:center; gap:30px; font-size:0.88rem; font-weight:500; }
.nav-links > a{ position:relative; padding:6px 0; color: var(--walnut); transition: color 0.2s; }
.nav-links > a:hover{ color: var(--rust); }

.nav-item{ position:relative; }
.nav-item > .nav-parent{
  display:flex; align-items:center; gap:5px; padding:6px 0;
  color: var(--walnut); background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:0.88rem; font-weight:500; transition: color 0.2s;
}
.nav-item > .nav-parent:hover{ color: var(--rust); }
.nav-chevron{ width:9px; height:9px; transition: transform 0.2s; flex-shrink:0; }
.nav-item:hover > .nav-parent .nav-chevron{ transform: rotate(180deg); }

.dropdown-menu{
  position:absolute; top: 100%; left:50%; transform: translateX(-50%) translateY(6px);
  background: var(--cream); border-radius:10px; min-width:220px;
  box-shadow: 0 14px 32px rgba(42,24,16,0.16); border:1px solid rgba(42,24,16,0.06);
  padding:8px; margin-top:14px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index:50;
}
.nav-item::after{
  content:""; position:absolute; top:100%; left:0; right:0; height:14px;
}
.nav-item:hover > .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.dropdown-menu a{
  padding:9px 12px; border-radius:6px; font-size:0.86rem; color: var(--walnut);
  transition: background 0.15s, color 0.15s; white-space:nowrap;
}
.dropdown-menu a:hover{ background: var(--sand); color: var(--rust); }

/* ---- nested flyout (e.g. Teak -> origin countries) ---- */
.nested-item{ position:relative; }
.nested-item::after{ content: none; }
.nested-item::before{
  content:""; position:absolute; top:0; left:100%; width:12px; height:100%;
}
.nested-parent{
  width:100%; justify-content:space-between; padding:9px 12px; border-radius:6px;
  color: var(--walnut); font-size:0.86rem; font-weight:500;
}
.nav-item.nested-item > .nested-parent{ padding:9px 12px; }
.nested-parent:hover{ background: var(--sand); color: var(--rust); }
.nested-chevron{ width:6px; height:10px; transition:none; }
.nested-item:hover > .nested-parent .nested-chevron{ transform:none; }

.dropdown-menu.nested-flyout{
  top:-8px; left:100%; margin-top:0; margin-left:10px; min-width:230px;
  transform: translateX(6px);
}
.nested-item:hover > .dropdown-menu.nested-flyout{
  transform: translateX(0);
}

.nav-cta{
  font-family: var(--font-mono); font-size:0.74rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; padding:13px 26px; border-radius:4px;
  background: var(--bark); color: var(--cream); white-space:nowrap;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover{ background: var(--rust); transform: translateY(-1px); }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background: var(--bark); border-radius:2px; }
.nav-cta-mobile{ display:none; }

/* ===========================================
   HERO
   =========================================== */
.hero{
  position: relative;
  padding: clamp(80px,14vw,160px) var(--pad) 0;
  background: var(--bark);
  color: var(--cream);
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(26,15,10,0.86) 0%, rgba(26,15,10,0.76) 45%, rgba(26,15,10,0.9) 100%);
}
.hero-rings{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.ring{
  position:absolute; border-radius:50%; border: 1px solid rgba(243,230,208,0.08);
}
.ring-1{ width:520px; height:520px; right:-160px; top:-120px; }
.ring-2{ width:340px; height:340px; right:-40px; top:60px; }
.ring-3{ width:180px; height:180px; right:120px; top:160px; border-color: rgba(201,122,74,0.25); }

.hero-inner{ max-width: var(--max-w); margin:0 auto; position:relative; z-index:2; }
.hero-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.04;
  max-width: 880px;
  letter-spacing: -0.01em;
  animation: riseIn 0.8s ease both;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5);
}
.hero-title .cut{ color: var(--rust-light); margin: 0 10px; font-weight:300; }
.hero-sub{
  margin-top: 26px;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: rgba(243,230,208,0.92);
  max-width: 520px;
  animation: riseIn 0.8s ease 0.1s both;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.45);
}
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; animation: riseIn 0.8s ease 0.2s both; }

@keyframes riseIn{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---- Scroll reveal (pop-in) animation, applied via JS ---- */
.reveal{
  opacity:0;
  transform: translateY(30px) scale(0.965);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 28px; border-radius: 100px; font-weight:600; font-size:0.95rem;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s;
}
.btn-primary{ background: var(--rust); color: var(--cream); }
.btn-primary:hover{ background: var(--rust-light); transform: translateY(-2px); }
.btn-ghost{ border:1px solid rgba(243,230,208,0.35); color: var(--cream); }
.btn-ghost:hover{ border-color: var(--cream); background: rgba(243,230,208,0.08); }

.hero-tape{
  margin-top: clamp(60px,8vw,100px);
  border-top: 1px solid rgba(243,230,208,0.12);
  overflow:hidden; position:relative; z-index:2;
}
.tape-track{
  display:flex; gap:48px; padding: 18px 0;
  font-family: var(--font-mono); font-size:0.82rem; letter-spacing:0.18em;
  color: rgba(243,230,208,0.45);
  white-space:nowrap;
  animation: scrollTape 26s linear infinite;
  width: max-content;
}
.tape-track span::after{ content:"•"; margin-left:48px; color: var(--rust); }
@keyframes scrollTape{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===========================================
   SOLUTIONS
   =========================================== */
.solutions{ padding: clamp(70px,9vw,120px) var(--pad) clamp(20px,4vw,40px); }
.solutions-inner{ max-width: var(--max-w); margin:0 auto; }
.solutions-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 44px;
}
.solution-card{
  background: var(--cream); border: 1px solid rgba(42,24,16,0.1);
  border-radius: 16px; padding: 30px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.solution-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(42,24,16,0.1);
  border-color: var(--rust);
}
.solution-icon{
  width:48px; height:48px; border-radius:50%;
  background: var(--bark); color: var(--rust-light);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.solution-card h3{
  font-family: var(--font-display); font-weight:600; font-size:1.1rem; color: var(--bark); margin-bottom:10px;
}
.solution-card p{ font-size:0.9rem; color: var(--walnut); line-height:1.6; }

/* ===========================================
   INTRO STRIP
   =========================================== */
.intro{ background: var(--sand); padding: clamp(60px,8vw,100px) var(--pad); }
.intro-inner{ max-width: var(--max-w); margin:0 auto; }
.intro-line{
  font-family: var(--font-display); font-weight:400; font-size: clamp(1.3rem,2.6vw,2rem);
  line-height:1.35; max-width: 880px; color: var(--bark);
}
.intro-line .highlight{ color: var(--rust); font-style:italic; font-weight:500; }
.intro-stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 32px;
  margin-top: 56px; border-top: 1px solid rgba(42,24,16,0.12); padding-top: 36px;
}
.stat-num{
  font-family: var(--font-display); font-weight:600; font-size: clamp(2.2rem,4vw,3.4rem);
  color: var(--rust); display:block; line-height:1;
}
.stat-label{ font-size:0.86rem; color: var(--walnut); margin-top:8px; display:block; line-height:1.4; }

/* ===========================================
   ABOUT
   =========================================== */
.about{ background: var(--paper); padding: clamp(70px,9vw,120px) var(--pad); }
.about-inner{ max-width: var(--max-w); margin:0 auto; text-align:left; }
.about-inner h2{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.9rem,3.6vw,2.6rem); color: var(--bark); line-height:1.15;
}
.about-desc{
  margin-top: 22px; font-size:1.02rem; color: var(--walnut); line-height:1.75;
}
.about-badges{
  display:flex; gap:12px; flex-wrap:wrap; margin-top: 28px;
}
.about-badge{
  font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.04em;
  color: var(--rust); border: 1px solid rgba(140,74,43,0.35);
  padding: 8px 16px; border-radius:100px;
}
.advantage-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-top: 44px;
}
.advantage-card{
  background: var(--bark); color: var(--cream); border-radius:16px; padding: 30px 26px;
}
.advantage-mark{
  font-family: var(--font-mono); font-size:0.78rem; color: var(--rust-light); letter-spacing:0.08em;
}
.advantage-card h3{
  font-family: var(--font-display); font-weight:600; font-size:1.2rem; margin: 14px 0 10px;
}
.advantage-card p{ font-size:0.9rem; color: rgba(243,230,208,0.78); line-height:1.65; }

/* ===========================================
   SPECIES
   =========================================== */
.species{ padding: clamp(80px,10vw,140px) var(--pad); }
.species-inner{ max-width: var(--max-w); margin:0 auto; }
.section-head{ margin-bottom: clamp(40px,6vw,64px); }
.section-head h2{
  font-family: var(--font-display); font-weight:600; font-size: clamp(2rem,4vw,3rem);
  color: var(--bark); line-height:1.1;
}
.contact-direct{
  margin-top: 14px; font-size:0.92rem; color: var(--walnut);
}
.contact-direct a{ color: var(--rust); font-weight:600; }
.contact-direct a:hover{ text-decoration: underline; }

.species-row{
  display:grid;
  grid-template-columns: 70px 260px 1fr;
  gap: 32px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid rgba(42,24,16,0.12);
  transition: padding-left 0.35s ease, background 0.35s ease;
}
.species-row:last-child{ border-bottom: 1px solid rgba(42,24,16,0.12); }
.species-row:hover{
  padding-left: 18px;
}
.species-num{
  font-family: var(--font-mono); font-size:0.85rem; color: rgba(42,24,16,0.35); padding-top:6px;
}
.species-name h3{
  font-family: var(--font-display); font-weight:600; font-size: 1.9rem; color: var(--rust);
}
.species-tag{ font-size:0.86rem; color: var(--walnut); margin-top:6px; }
.species-desc{ font-size:0.98rem; color: var(--ink); line-height:1.65; max-width: 560px; }
.species-meta{
  grid-column: 2 / -1;
  display:flex; gap: 28px; flex-wrap:wrap;
  margin-top: 18px;
  font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.03em;
  color: var(--rust);
}
.species-price{
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--cream);
  background: var(--rust);
  padding: 5px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

/* ---- Origin detail page (e.g. teak-ghana.html) ---- */
.breadcrumb-bar{
  border-bottom: 1px solid rgba(42,24,16,0.08);
  background: var(--paper);
}
.breadcrumb-inner{
  max-width: var(--max-w); margin:0 auto; padding: 16px var(--pad);
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.02em;
  color: var(--walnut);
}
.breadcrumb-inner a{ color: var(--walnut); transition: color 0.2s; }
.breadcrumb-inner a:hover{ color: var(--rust); }
.breadcrumb-inner span{ color: rgba(42,24,16,0.35); }
.breadcrumb-current{ color: var(--rust); }

.origin-hero{
  padding: clamp(56px,8vw,96px) var(--pad) clamp(30px,5vw,50px);
  max-width: var(--max-w); margin:0 auto;
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items:center;
}
.origin-hero-inner{ max-width: 620px; }
.origin-hero-image{
  width:100%; aspect-ratio: 4 / 5; border-radius:18px; overflow:hidden;
  box-shadow: 0 20px 44px rgba(42,24,16,0.18);
}
.origin-hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 900px){
  .origin-hero{ grid-template-columns: 1fr; }
  .origin-hero-image{ order:-1; max-width:420px; margin:0 auto; }
}
.origin-title{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height:1.15;
  color: var(--bark); margin-top: 14px;
}
.origin-lede{
  margin-top: 20px; font-size:1.05rem; line-height:1.7;
  color: var(--walnut); max-width: 620px;
}

.origin-detail{
  padding: 0 var(--pad) clamp(60px,8vw,100px);
  max-width: var(--max-w); margin:0 auto;
}
.origin-detail-grid{
  display:grid; grid-template-columns: 1.6fr 1fr; gap: 60px;
  align-items:start;
}
.origin-copy h2{
  font-family: var(--font-display); font-weight:600; font-size:1.4rem;
  color: var(--bark); margin-bottom:14px;
}
.origin-copy h2:not(:first-child){ margin-top: 34px; }
.origin-copy .species-desc{ max-width: 100%; margin-bottom: 4px; }

.origin-specs{
  background: var(--paper); border-radius:14px; padding: 26px;
  border: 1px solid rgba(42,24,16,0.08); position:sticky; top:100px;
}
.origin-meta{
  grid-column: auto; flex-direction:column; gap:12px; margin-top:16px;
}
.origin-cta{ width:100%; justify-content:center; margin-top:22px; }

@media (max-width: 900px){
  .origin-detail-grid{ grid-template-columns: 1fr; }
  .origin-specs{ position:static; }
}

/* wood swatch accent line on hover, per-species tint */
.species-row{ position:relative; isolation:isolate; }
.species-row::before{
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:3px; background: var(--rust);
  transform: scaleY(0); transform-origin: top; transition: transform 0.35s ease;
}
.species-row:hover::before{ transform: scaleY(1); }
.species-row[data-wood="pine"]::before{ background:#C9A876; }
.species-row[data-wood="syp"]::before{ background:#A9763F; }
.species-row[data-wood="meranti"]::before{ background:#8C4A2B; }
.species-row[data-wood="teak"]::before{ background:#5A3825; }

/* ===========================================
   PROCESS
   =========================================== */
.process{ background: var(--bark); color: var(--cream); padding: clamp(80px,10vw,140px) var(--pad); }
.process .section-head h2{ color: var(--cream); }
.process .eyebrow{ color: var(--rust-light); }
.process-inner{ max-width: var(--max-w); margin:0 auto; }
.process-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 1px solid rgba(243,230,208,0.15);
}
.process-step{
  padding: 32px 24px;
  border-right: 1px solid rgba(243,230,208,0.15);
}
.process-step:last-child{ border-right:none; }
.process-mark{
  display:block; font-family: var(--font-display); font-weight:600; font-style:italic;
  color: var(--rust-light); font-size:1.3rem; margin-bottom:16px;
}
.process-step p{ font-size:0.92rem; color: rgba(243,230,208,0.75); line-height:1.6; }

/* ===========================================
   REACH
   =========================================== */
.reach{ padding: clamp(80px,10vw,140px) var(--pad); background: var(--paper); }
.reach-inner{
  max-width: var(--max-w); margin:0 auto;
  display:grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items:start;
}
.reach-text h2{ font-family: var(--font-display); font-weight:600; font-size: clamp(2rem,4vw,2.8rem); color: var(--bark); line-height:1.12; }
.reach-desc{ margin-top: 22px; font-size:1rem; color: var(--walnut); line-height:1.7; max-width: 520px; }
.reach-card{
  background: var(--bark); color: var(--cream); border-radius: 18px; padding: 36px;
}
.reach-card-label{ font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--rust-light); margin-bottom:20px; }
.reach-tags li{
  padding: 12px 0; border-top: 1px solid rgba(243,230,208,0.14); font-size:0.98rem;
}
.reach-tags li:first-child{ border-top:none; }

.locations{ padding: 0 var(--pad) clamp(80px,10vw,140px); background: var(--paper); }
.locations-grid{
  max-width: var(--max-w); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr; gap:28px;
}
.location-card{
  background: var(--cream); border-radius:16px; padding: 32px;
  border: 1px solid rgba(42,24,16,0.08);
  display:flex; flex-direction:column; gap:14px;
}
.location-icon{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(201,122,74,0.12); color: var(--rust);
}
.location-label{ font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--rust-light); }
.location-card h3{ font-family: var(--font-display); font-weight:600; font-size:1.3rem; color: var(--bark); }
.location-card p{ font-size:0.95rem; color: var(--walnut); line-height:1.6; }
.location-btn{ align-self:flex-start; margin-top:6px; }
@media (max-width: 720px){
  .locations-grid{ grid-template-columns: 1fr; }
}

/* ===========================================
   ENQUIRE / FORM
   =========================================== */
.enquire{ background: var(--sand); padding: clamp(80px,10vw,140px) var(--pad); }
.enquire-inner{ max-width: 760px; margin:0 auto; }
.enquire .section-head h2{ color: var(--bark); }

.enquire-form{ display:flex; flex-direction:column; gap:22px; margin-top: 12px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:0.84rem; font-weight:600; color: var(--walnut); }
.field input, .field textarea{
  font-family: inherit; font-size:1rem; padding: 13px 16px;
  border: 1px solid rgba(42,24,16,0.18); border-radius: 10px;
  background: var(--cream); color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
.field input:focus, .field textarea:focus{
  border-color: var(--rust); box-shadow: 0 0 0 3px rgba(140,74,43,0.12); outline:none;
}
.field input.invalid, .field textarea.invalid{ border-color:#B23A2A; }
.field-error{ font-size:0.78rem; color:#B23A2A; min-height: 1em; }

.wood-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{
  padding: 10px 20px; border-radius:100px; border:1px solid rgba(42,24,16,0.2);
  font-size:0.88rem; font-weight:500; color: var(--walnut);
  transition: all 0.2s ease;
}
.pill:hover{ border-color: var(--rust); color: var(--rust); }
.pill.active{ background: var(--rust); border-color: var(--rust); color: var(--cream); }

.btn-submit{ align-self:flex-start; margin-top:6px; }
.btn-submit.loading .btn-label{ opacity:0.6; }
.form-note{ font-size:0.88rem; min-height:1.2em; }
.form-note.success{ color:#3A6B3A; }
.form-note.error{ color:#B23A2A; }

/* ===========================================
   CTA BANNER
   =========================================== */
.cta-banner{
  background: var(--rust); color: var(--cream);
  padding: clamp(70px,9vw,110px) var(--pad); text-align:left;
}
.cta-banner .eyebrow{ color: rgba(251,246,236,0.85); }
.cta-banner h2{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(2rem,4.2vw,3rem); color: var(--cream); line-height:1.15;
}
.cta-banner h2 .serif-italic{ color: var(--bark); }
.cta-inner{ max-width: 680px; margin:0; }
.cta-sub{ margin-top:18px; font-size:1rem; color: rgba(251,246,236,0.88); }
.cta-actions{ display:flex; justify-content:flex-start; gap:16px; margin-top:36px; flex-wrap:wrap; }
.cta-actions .btn-primary{ border: 1px solid var(--cream); }
.btn-ghost-dark{ border:1px solid rgba(251,246,236,0.5); color: var(--cream); }
.btn-ghost-dark:hover{ border-color: var(--cream); background: rgba(251,246,236,0.12); }

/* ===========================================
   FOOTER
   =========================================== */
.site-footer{ background: var(--bark); color: rgba(243,230,208,0.7); }
.site-footer-minimal{ text-align:center; padding: 32px var(--pad); }
.footer-socials-minimal{ justify-content:center; margin: 0 0 16px; }
.footer-inner{
  max-width: var(--max-w); margin:0 auto; padding: 64px var(--pad) 40px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:48px;
}
.footer-brand .brand-text{ color: var(--cream); font-family: var(--font-display); font-weight:600; font-size:1.05rem; }
.footer-brand{ display:flex; flex-direction:column; gap:8px; max-width:240px; }
.footer-brand .brand-logo{ width:34px; height:34px; }
.footer-tag{ font-size:0.82rem; color: rgba(243,230,208,0.45); }
.footer-email{
  font-size:0.85rem; color: rgba(243,230,208,0.7); transition: color 0.2s;
  word-break: break-all;
}
.footer-email:hover{ color: var(--rust-light); }
.footer-insta{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-size:0.85rem; color: rgba(243,230,208,0.7); transition: color 0.2s;
}
.footer-insta:hover{ color: var(--rust-light); }
.footer-socials{ display:flex; gap:10px; margin-top:10px; }
.footer-social-icon{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(243,230,208,0.25); color: rgba(243,230,208,0.8);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-social-icon:hover{ color: var(--cream); border-color: var(--rust-light); background: rgba(201,122,74,0.15); }
.footer-cols{ display:flex; gap:64px; }
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-heading{ font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--rust-light); margin-bottom:6px; }
.footer-col a{ font-size:0.9rem; color: rgba(243,230,208,0.7); transition: color 0.2s; }
.footer-col a:hover{ color: var(--cream); }
.footer-static{ font-size:0.9rem; color: rgba(243,230,208,0.7); }
.footer-bottom{
  border-top: 1px solid rgba(243,230,208,0.12); padding: 20px var(--pad);
  text-align:center; font-size:0.8rem; color: rgba(243,230,208,0.45);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 900px){
  .process-grid{ grid-template-columns: repeat(2,1fr); }
  .process-step:nth-child(2){ border-right:none; }
  .process-step{ border-bottom: 1px solid rgba(243,230,208,0.15); }
  .reach-inner{ grid-template-columns: 1fr; }
  .species-row{ grid-template-columns: 40px 1fr; }
  .species-meta{ grid-column: 1 / -1; }
  .species-desc{ grid-column: 1 / -1; }
  .solutions-grid{ grid-template-columns: repeat(2,1fr); }
  .advantage-grid{ grid-template-columns: 1fr; }
  .footer-cols{ flex-wrap: wrap; gap: 32px; }
}

@media (max-width: 720px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-video{ display:none; }
  .hero{ background: var(--bark) url("hero-bg-poster.jpg") center/cover no-repeat; }
  .intro-stats{ grid-template-columns: 1fr; gap:24px; }
  .field-row{ grid-template-columns: 1fr; }
  .process-grid{ grid-template-columns: 1fr; }
  .process-step{ border-right:none; }
  .solutions-grid{ grid-template-columns: 1fr; }
  .cta-actions{ flex-direction:column; align-items:center; }
  .origin-hero-image{ max-width:340px; margin:0 auto; aspect-ratio: 1 / 1; }
  .location-card{ padding:24px; }
  .footer-inner{ flex-direction:column; gap:36px; }
  .footer-brand{ max-width:100%; }

  .nav-links.open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background: var(--paper); padding: 20px var(--pad) 28px;
    gap:2px; max-height: calc(100vh - 70px); overflow-y:auto;
    border-bottom: 1px solid rgba(42,24,16,0.1);
    box-shadow: 0 16px 32px rgba(42,24,16,0.18);
    z-index: 50;
  }
  .nav-links.open > a{
    padding: 12px 0;
    border-bottom: 1px solid rgba(42,24,16,0.08);
    font-size: 1rem;
  }
  .nav-links.open .nav-item{
    border-bottom: 1px solid rgba(42,24,16,0.08);
  }
  .nav-links.open .nav-parent{
    width:100%; justify-content:space-between; padding:12px 0; font-size:1rem;
  }
  .nav-links.open .nav-chevron{ transform: rotate(0deg); }
  .nav-links.open .nav-item.open .nav-chevron{ transform: rotate(180deg); }
  .nav-links.open .dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    display:none; box-shadow:none; border:none; background:transparent;
    padding: 0 0 10px 14px; min-width:0;
  }
  .nav-links.open .nav-item.open .dropdown-menu{ display:flex; }
  .nav-links.open .dropdown-menu a{ padding:9px 0; color: var(--walnut); }
  .nav-links.open .nav-cta-mobile{
    display:block; text-align:center; margin-top:14px;
    font-family: var(--font-mono); font-size:0.78rem; font-weight:600; letter-spacing:0.08em;
    text-transform:uppercase; padding:14px 20px; border-radius:4px;
    background: var(--bark); color: var(--cream);
  }
}