/* =========================================================================
   Prime Paddy LLC — Pony Rice
   Premium Thai Hom Mali rice brand. Deep green + gold + cream.
   ========================================================================= */

:root {
  /* Brand palette */
  --green-forest: #0B3D2E;
  --green-deep:   #123F32;
  --green-800:    #082A1B;
  --green-700:    #0C3623;
  --gold:         #C9A227;
  --gold-light:   #E1C45A;
  --gold-soft:    #F0D879;
  --cream:        #F8F5EA;
  --cream-deep:   #F1EBD8;
  --white:        #FFFFFF;
  --ink:          #1B2923;
  --ink-soft:     #4A5850;

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  /* Height of the sticky nav — the hero subtracts this so a full-height
     hero fits the screen instead of overflowing by the nav's height. */
  --nav-h: 72px;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(11, 61, 46, 0.08);
  --shadow-md: 0 14px 40px rgba(11, 61, 46, 0.14);
  --shadow-lg: 0 30px 80px rgba(8, 42, 27, 0.28);
  --ring: 0 0 0 3px rgba(201, 162, 39, 0.45);

  --ease: cubic-bezier(0.16, 0.8, 0.3, 1);
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* --------------------------------------------------------------- Helpers */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), 1360px); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--green-800); padding: 10px 16px;
  border-radius: 8px; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold);
  display: inline-block;
}
.eyebrow.center { justify-content: center; }
.eyebrow.on-dark { color: var(--gold-light); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-title { font-size: clamp(1.9rem, 4vw, 3rem); }
.lead { font-size: 1.15rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--green-800);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  border: 1.5px solid transparent; background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), color .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(201,162,39,.32); }
.btn:active { transform: translateY(0); }
.btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--green-800); }
.btn-outline {
  background: transparent; color: var(--green-forest);
  border-color: rgba(11,61,46,.35);
}
.btn-outline:hover { border-color: var(--green-forest); box-shadow: none; background: rgba(11,61,46,.04); }
.btn-ghost-gold { background: transparent; color: var(--gold-light); border-color: rgba(225,196,90,.5); }
.btn-ghost-gold:hover { background: rgba(225,196,90,.12); box-shadow: none; color: var(--white); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* =================================================================== NAV */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 245, 234, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(11, 61, 46, 0.08);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow-sm); background: rgba(248,245,234,.95); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .6rem; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { height: 52px; width: auto; }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--green-forest); letter-spacing: .02em; }
.brand .brand-sub { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 3px; }

.nav-links { display: flex; align-items: center; gap: .35rem; }
.nav-links a.navlink {
  padding: .55rem .9rem; border-radius: var(--radius-pill);
  font-weight: 500; color: var(--ink); position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-links a.navlink:hover { color: var(--green-forest); background: rgba(11,61,46,.05); }
.nav-links a.navlink[aria-current="page"] { color: var(--green-forest); }
.nav-links a.navlink[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .28rem; width: 18px; height: 2px; background: var(--gold); border-radius: 2px;
}
.nav-cta { margin-left: .4rem; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 12px;
  background: transparent; border: 1px solid rgba(11,61,46,.15);
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--green-forest); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================== HERO */
/* The hero is a vertical flex column: content row on top, field row beneath.
   Because the field is a real flex item (not absolutely positioned), the
   content can never overlap it — no matter how long the copy or how short
   the viewport. If content outgrows the space, the hero simply gets taller. */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 62%, #EFE8D2 100%);
  isolation: isolate;
  display: flex; flex-direction: column;
  min-height: max(640px, calc(100vh - var(--nav-h)));
  min-height: max(640px, calc(100svh - var(--nav-h))); /* svh: ignores mobile URL-bar collapse */
}
.hero-grid {
  position: relative; z-index: 3;
  flex: 1 1 auto;              /* claims every pixel above the field */
  display: grid; grid-template-columns: 1fr; justify-items: start;
  align-content: center;       /* centres the copy within that clear space */
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem); /* real breathing gap, not a guess */
}
.hero-copy { max-width: 600px; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.04;
  letter-spacing: -0.02em; margin-bottom: 1.2rem;
}
.hero h1 .accent { color: var(--gold); font-style: italic; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: 1.8rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-meta { display: flex; gap: 1.6rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-meta .item { font-size: .82rem; color: var(--ink-soft); }
.hero-meta .item strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--green-forest); font-weight: 700; }

/* Product presentation */
.hero-product { position: relative; display: grid; place-items: center; }
.hero-product .glow {
  position: absolute; inset: 6% 4%; z-index: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.95), rgba(248,245,234,.6) 45%, rgba(225,196,90,.18) 70%, transparent 78%);
  border-radius: 50%;
}
.hero-product .disc {
  position: absolute; width: 78%; aspect-ratio: 1; z-index: 0;
  border: 1px solid rgba(201,162,39,.35); border-radius: 50%;
}
.hero-product .disc.two { width: 90%; border-style: dashed; opacity: .5; }
.hero-product img.product {
  position: relative; z-index: 2; width: min(100%, 560px);
  filter: drop-shadow(0 30px 45px rgba(8,42,27,.28));
}
.badge {
  position: absolute; z-index: 4;
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  border: 1px solid rgba(201,162,39,.4); border-radius: var(--radius-pill);
  padding: .5rem .95rem; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600; color: var(--green-forest); white-space: nowrap;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.2); }
.badge.b1 { top: 8%; left: -2%; }
.badge.b2 { top: 44%; right: -4%; }
.badge.b3 { bottom: 10%; left: 4%; }

/* Rice field lives at the bottom of the hero — now an in-flow flex item, so
   it reserves its own space instead of floating over the copy. The SVG uses
   preserveAspectRatio="xMidYMax slice", so shrinking this height crops the
   top of the artwork and keeps it bottom-anchored. The 34vh cap stops the
   field eating the screen on short viewports. */
.hero-field {
  position: relative; z-index: 1;
  flex: none; width: 100%;
  /* Height is a PURE multiple of viewport width — no px offset, no vh term.
     That keeps the container's aspect ratio constant (1 / 0.26 = 3.85:1) at
     every width, so the SVG's `slice` crop line lands on the exact same user
     unit (y=185.6 of 560) from 769px all the way to 2923px. Any offset or vh
     cap would make the crop vary with viewport size — that was the 2309px bug.
     26vw is chosen so f(768px) = 200px, keeping phones and tablets unchanged. */
  height: clamp(200px, 26vw, 760px);
  /* The artwork's sky rect starts abruptly at the crop line, which reads as a
     hard horizontal edge against the cream hero. Fading the top of the field
     hides it. Stops are PERCENTAGES, so the fade distance scales with the
     container's own height and stays proportional at every width. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  margin-bottom: -1px; /* hides the sub-pixel seam at the section edge */
  pointer-events: none;
}
.ricefield { width: 100%; height: 100%; }
/* (The old .hero-field::after gradient was a no-op — both of its stops were
   fully transparent, so it painted nothing. The mask-image above replaces it.) */

/* Rice-field stalk artwork styling */
.stem { fill: none; stroke: url(#rf-gold); stroke-width: 2.4; stroke-linecap: round; }
.leaf { fill: url(#rf-gold); opacity: .78; }
.branch { fill: none; stroke: url(#rf-gold); stroke-width: 1.3; opacity: .85; }
.grain { fill: url(#rf-gold); }
.awn { fill: none; stroke: var(--gold-soft); stroke-width: 1; opacity: .65; }
.s-far .stem { stroke: url(#rf-gold-far); stroke-width: 2; }
.s-far .grain, .s-far .leaf { fill: url(#rf-gold-far); }
.s-far .branch { stroke: url(#rf-gold-far); }
.layer-far { opacity: .5; }
.layer-mid { opacity: .82; }
.layer-near { opacity: 1; }

/* Growth + sway animations.
   The grow (hidden->full) initial state is gated behind `.js`, so browsers with
   JavaScript disabled always render the full, static field. */
.js .stalk-grow {
  transform-box: fill-box; transform-origin: bottom center;
  transform: scaleY(0);
  animation: rf-grow var(--grow-dur, 1.6s) var(--ease) forwards;
  animation-delay: var(--grow-delay, 0s);
}
@keyframes rf-grow { to { transform: scaleY(1); } }
.stalk-sway {
  transform-box: fill-box; transform-origin: bottom center;
  animation: rf-sway var(--sway-dur, 6s) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
}
@keyframes rf-sway { from { transform: rotate(-1.7deg); } to { transform: rotate(2deg); } }

/* Hero content reveal on load (hidden only when JS can un-hide it) */
.js .reveal { opacity: 0; transform: translateY(18px); }
.hero-loaded .reveal { animation: rf-rise .9s var(--ease) forwards; }
.hero-loaded .reveal.d1 { animation-delay: .05s; }
.hero-loaded .reveal.d2 { animation-delay: .18s; }
.hero-loaded .reveal.d3 { animation-delay: .3s; }
.hero-loaded .reveal.d4 { animation-delay: .42s; }
.js .badge { opacity: 0; }
.hero-loaded .badge { animation: rf-rise .8s var(--ease) forwards; }
.hero-loaded .badge.b1 { animation-delay: .9s; }
.hero-loaded .badge.b2 { animation-delay: 1.05s; }
.hero-loaded .badge.b3 { animation-delay: 1.2s; }
@keyframes rf-rise { to { opacity: 1; transform: none; } }

.badge.float { animation: badge-float 6s ease-in-out infinite alternate; }
@keyframes badge-float { to { transform: translateY(-8px); } }

/* ====================================================== SECTION: TASTE */
.taste { background: var(--white); }
.taste-inner { display: grid; grid-template-columns: 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; max-width: 760px; margin-inline: auto; }
.taste-copy p { color: var(--ink-soft); font-size: 1.08rem; }
.taste-quote {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.3; color: var(--green-forest); font-style: italic;
  border-left: 3px solid var(--gold); padding-left: 1.4rem; margin: 1.5rem 0;
}
.grain-strip { display: flex; gap: .5rem; margin-top: 1.5rem; }
.grain-strip span { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); opacity: .5; }
.grain-strip span:nth-child(2){opacity:.7} .grain-strip span:nth-child(3){opacity:.9} .grain-strip span:nth-child(4){opacity:1}

/* =============================================== CARDS (highlights/why) */
.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--white); border: 1px solid rgba(11,61,46,.08);
  border-radius: var(--radius); padding: 2rem 1.7rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(201,162,39,.4); }
.card .icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(201,162,39,.16), rgba(201,162,39,.06));
  color: var(--gold); margin-bottom: 1.1rem; border: 1px solid rgba(201,162,39,.25);
}
.card .icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .98rem; margin: 0; }
.card .num { font-family: var(--font-display); font-size: .9rem; color: var(--gold); font-weight: 700; letter-spacing: .05em; }

/* ==================================================== FIELD TO TABLE */
.f2t { background: linear-gradient(180deg, var(--cream), var(--cream-deep)); position: relative; overflow: hidden; }
.f2t-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; margin-top: 1rem; }
.f2t-line { position: absolute; top: 46px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px); opacity: .6; z-index: 0; }
.f2t-step { position: relative; z-index: 1; text-align: center; }
.f2t-dot {
  width: 92px; height: 92px; margin: 0 auto 1.1rem; border-radius: 50%;
  background: var(--white); border: 1px solid rgba(201,162,39,.4);
  display: grid; place-items: center; box-shadow: var(--shadow-sm); color: var(--green-forest);
}
.f2t-dot svg { width: 40px; height: 40px; }
.f2t-step h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.f2t-step p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.f2t-step .k { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; display: block; margin-bottom: .3rem; }

/* ================================================= PRIME PADDY INTRO */
.intro { background: var(--white); }
.intro-inner { display: grid; grid-template-columns: 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; max-width: 760px; margin-inline: auto; }
.intro-figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, #164A34, var(--green-forest) 60%, var(--green-800));
  min-height: 360px; display: grid; place-items: center; padding: 2rem;
  box-shadow: var(--shadow-md);
}
.intro-figure img { width: min(78%, 340px); filter: drop-shadow(0 24px 40px rgba(0,0,0,.4)); }
.intro-figure .seal {
  position: absolute; bottom: 1.2rem; right: 1.2rem;
  background: rgba(248,245,234,.95); color: var(--green-forest);
  border-radius: 12px; padding: .7rem 1rem; font-size: .78rem; font-weight: 600;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(201,162,39,.4);
}
.intro-figure .corner { position: absolute; width: 44px; height: 44px; border: 2px solid rgba(201,162,39,.5); }
.intro-figure .corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.intro-figure .corner.br { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }

/* ================================================== CTA BAND (green) */
.ctaband { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, var(--green-deep), var(--green-forest) 55%, var(--green-800)); color: var(--cream); }
.ctaband::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 8% 100%, rgba(201,162,39,.22), transparent 60%);
}
.ctaband .wrap { position: relative; z-index: 1; text-align: center; padding-block: clamp(3.5rem,7vw,5.5rem); }
.ctaband h2 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1rem; }
.ctaband p { color: rgba(248,245,234,.85); font-size: 1.15rem; max-width: 60ch; margin: 0 auto 2rem; }
.on-dark .section-title { color: var(--white); }
.ctaband .btn-outline { color: var(--cream); border-color: rgba(248,245,234,.4); }
.ctaband .btn-outline:hover { background: rgba(248,245,234,.08); border-color: var(--cream); }

/* ================================================ AGRICULTURAL BAND */
.agri { position: relative; overflow: hidden; background: var(--green-forest); color: var(--cream); }
.agri .agri-field { position: absolute; inset: auto 0 0 0; height: 70%; opacity: .9; z-index: 0; }
.agri .agri-field .ricefield { height: 100%; }
.agri-inner { position: relative; z-index: 2; max-width: 640px; padding-block: clamp(4rem,9vw,7rem); }
.agri-inner h2 { color: var(--white); font-size: clamp(2rem,4.5vw,3rem); margin-bottom: 1rem; }
.agri-inner p { color: rgba(248,245,234,.85); font-size: 1.12rem; }
.agri::before { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, var(--green-forest) 30%, rgba(11,61,46,.55) 60%, rgba(11,61,46,.1)); }

/* =================================================== ABOUT specifics */
.page-hero { position: relative; overflow: hidden; background: radial-gradient(130% 120% at 100% 0%, var(--green-deep), var(--green-forest) 60%, var(--green-800)); color: var(--cream); text-align: center; padding-block: clamp(4.5rem, 9vw, 7rem); }
.page-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(50% 60% at 50% 120%, rgba(201,162,39,.2), transparent 70%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); font-size: clamp(2.4rem, 5.5vw, 4rem); margin-bottom: 1rem; }
.page-hero p { color: rgba(248,245,234,.88); font-size: 1.2rem; max-width: 60ch; margin-inline: auto; }

.story { background: var(--white); }
.story-inner { max-width: 780px; margin-inline: auto; text-align: center; }
.story-inner p { font-size: 1.12rem; color: var(--ink-soft); }
.story-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--gold-light), var(--gold)); border-radius: 3px; margin: 2rem auto; }

.values .card-grid { grid-template-columns: repeat(4, 1fr); }

/* ==================================================== CONTACT page */
.contact-wrap { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact-aside { position: relative; }
.contact-card {
  background: radial-gradient(130% 120% at 0% 0%, var(--green-deep), var(--green-forest) 65%, var(--green-800));
  color: var(--cream); border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.contact-card::after { content:""; position:absolute; right:-40px; bottom:-40px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(201,162,39,.25), transparent 70%); }
.contact-card .product-mini { width: min(56%, 220px); margin: 0 auto 1.5rem; filter: drop-shadow(0 18px 30px rgba(0,0,0,.4)); position: relative; z-index: 1; }
.contact-card h2 { color: var(--white); font-size: 1.5rem; margin-bottom: .4rem; }
.contact-card .card-sub { color: rgba(248,245,234,.82); font-size: .98rem; margin-bottom: 1.6rem; }
.contact-list { display: grid; gap: 1rem; position: relative; z-index: 1; }
.contact-list a, .contact-list .ci { display: flex; gap: .9rem; align-items: flex-start; color: var(--cream); }
.contact-list .ci-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; background: rgba(201,162,39,.18); display: grid; place-items: center; color: var(--gold-light); border: 1px solid rgba(201,162,39,.35); }
.contact-list .ci-ic svg { width: 20px; height: 20px; }
.contact-list .ci-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.contact-list .ci-value { font-weight: 500; }
.contact-list a:hover .ci-value { color: var(--gold-light); }

/* Form */
.form-panel { background: var(--white); border: 1px solid rgba(11,61,46,.08); border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }

.coming-soon-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: rgba(248, 245, 234, 0.72);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-radius: var(--radius);
}
.coming-soon-overlay .cs-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(201,162,39,.16);
  border: 1px solid rgba(201,162,39,.4);
  color: var(--green-forest);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.coming-soon-overlay h3 {
  font-size: 1.5rem;
  color: var(--green-forest);
  margin-bottom: .6rem;
}
.coming-soon-overlay p {
  color: var(--ink-soft);
  max-width: 32ch;
  margin: 0;
}
.form-panel h2 { font-size: 1.6rem; margin-bottom: .4rem; }
.form-panel .form-intro { color: var(--ink-soft); margin-bottom: 1.6rem; font-size: .98rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.col-span { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: var(--green-forest); }
.field .req { color: var(--gold); }
.field .optional { color: var(--ink-soft); font-weight: 400; font-size: .78rem; }
.form-control {
  width: 100%; padding: .8rem .95rem; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(11,61,46,.16); background: var(--cream);
  color: var(--ink); font-size: 1rem; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.form-control::placeholder { color: #97a29b; }
.form-control:focus { border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 3px rgba(201,162,39,.18); outline: none; }
select.form-control { appearance: none; 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='%230B3D2E' stroke-width='2.4'%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; }
textarea.form-control { resize: vertical; min-height: 120px; }
.field .errorlist { list-style: none; margin: .2rem 0 0; padding: 0; color: #b3261e; font-size: .82rem; }
.field.has-error .form-control { border-color: #d9534f; background: #fdf3f2; }
.helptext { font-size: .8rem; color: var(--ink-soft); }

.radio-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.radio-row label { position: relative; cursor: pointer; }
.radio-row input { position: absolute; opacity: 0; inset: 0; }
.radio-row .pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem;
  border: 1.5px solid rgba(11,61,46,.16); border-radius: var(--radius-pill);
  font-size: .9rem; font-weight: 500; color: var(--ink); background: var(--cream);
  transition: all .2s var(--ease);
}
.radio-row input:checked + .pill { border-color: var(--gold); background: rgba(201,162,39,.12); color: var(--green-forest); }
.radio-row input:focus-visible + .pill { box-shadow: var(--ring); }

.form-actions { grid-column: 1/-1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(8,42,27,.35); border-top-color: var(--green-800);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Alerts */
.alert { border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 1.4rem; font-size: .96rem; display: flex; gap: .7rem; align-items: flex-start; }
.alert svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.alert-success { background: #edf7f0; border: 1px solid #bfe3cc; color: #12603c; }
.alert-error { background: #fdf3f2; border: 1px solid #f2c9c6; color: #97231d; }

/* =================================================== FOOTER */
.footer { background: linear-gradient(180deg, var(--green-forest), var(--green-800)); color: rgba(248,245,234,.82); position: relative; }
.footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2.5rem; padding-block: clamp(3rem,6vw,4.5rem) 2.5rem; }
.footer-brand img { height: 74px; background: rgba(255,255,255,.06); border-radius: 12px; padding: 6px; }
.footer-brand .fb-name { font-family: var(--font-display); color: var(--white); font-size: 1.35rem; margin: 1rem 0 .4rem; }
.footer-brand p { max-width: 34ch; font-size: .95rem; }
.footer h4 { color: var(--gold-light); font-family: var(--font-body); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 600; }
.footer-nav a { display: inline-block; padding: .3rem 0; transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--gold-light); }
.footer-contact a, .footer-contact .fc { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem 0; }
.footer-contact svg { flex: none; width: 18px; height: 18px; color: var(--gold-light); margin-top: 3px; }
.footer-contact a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid rgba(248,245,234,.12); padding-block: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.footer-bottom .made { color: rgba(248,245,234,.6); }

/* =================================================== RESPONSIVE */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .card-grid, .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .values .card-grid { grid-template-columns: repeat(2, 1fr); }
  .taste-inner, .intro-inner, .contact-wrap { grid-template-columns: 1fr; }
  .intro-figure { min-height: 300px; }
  .f2t-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
  .f2t-line { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: .2rem; background: var(--cream); padding: 1rem var(--gutter) 1.6rem;
    border-bottom: 1px solid rgba(11,61,46,.1); box-shadow: var(--shadow-md);
    transform: translateY(-140%); transition: transform .35s var(--ease); z-index: 90;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a.navlink { padding: .85rem 1rem; border-radius: 12px; font-size: 1.05rem; }
  .nav-links a.navlink[aria-current="page"]::after { display: none; }
  .nav-links a.navlink[aria-current="page"] { background: rgba(11,61,46,.06); }
  .nav-cta { margin: .6rem 0 0; }
  .nav-cta .btn { width: 100%; }
  .nav-toggle { display: inline-flex; }
  .brand .brand-text { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .card-grid, .card-grid.cols-3, .values .card-grid { grid-template-columns: 1fr; }
  .f2t-steps { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 auto; }
  /* Keep the three facts on one compact row instead of letting them wrap to
     three stacked rows — reclaims ~75px of hero height on phones. */
  .hero-copy .hero-meta {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .7rem; margin-top: 1.3rem;
  }
  .hero-meta .item { font-size: .72rem; }
  .hero-meta .item strong { font-size: .92rem; }
  .hero-copy .hero-sub { margin-bottom: 1.3rem; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .badge.b2 { right: 2%; } .badge.b1 { left: 2%; }
}

@media (max-width: 400px) {
  :root { --gutter: 1.1rem; --nav-h: 64px; } /* brand logo shrinks below, so does the nav */
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .brand img { height: 44px; }
}

/* Short viewports (laptop with browser chrome, landscape phones): give the
   copy priority and let the field shrink further rather than crowd it. The
   display headline is the biggest consumer of vertical space, so it is the
   first thing capped when height — not width — is the constraint. */
@media (max-height: 700px) {
  .hero { min-height: max(560px, calc(100svh - var(--nav-h))); }
  /* Also a pure multiple of width, for the same reason as the base rule —
     a smaller coefficient, but still a constant aspect ratio at every width. */
  .hero-field { height: clamp(150px, 19vw, 420px); }
  .hero-grid { padding-top: clamp(1.25rem, 3vw, 2rem); }
  .hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: .8rem; }
  .hero-copy .hero-sub { margin-bottom: 1.2rem; }
  .hero-copy .hero-meta { margin-top: 1.2rem; }
}

/* =================================================== 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; }
  .stalk-grow { transform: none !important; animation: none !important; }
  .stalk-sway { animation: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .badge { opacity: 1 !important; }
  .btn:hover, .card:hover { transform: none; }
}