/*
Theme Name: Global Link Traders Blue
Theme URI: https://www.globallinktraderz.com
Author: Global Link Traders
Author URI: https://www.globallinktraderz.com
Description: Premium tobacco export website theme for Global Link Traders (Pvt) Ltd & PT Indo Pak Group. Corporate blue design system matched to the company logo, with Elementor-editable homepage sections.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: global-link-traders-blue
*/
/* =========================================================
   GLOBAL LINK TRADERS — Premium Tobacco Exports
   Corporate blue design system
   Brand colours are sampled from the company logo:
   blue #1739B6, red #ED1C24.
   ========================================================= */

:root{
  --bg:#F7F9FC;
  --bg-2:#EDF1F9;
  --white:#ffffff;
  --ink:#0E1533;
  --ink-soft:#2A3358;
  --muted:#667090;
  --muted-2:#8B94AE;
  --brand:#1739B6;
  --brand-2:#2E52D8;
  --brand-soft:#A9B8E8;
  --brand-tint:#E8EDFB;
  --brand-deep:#0F2478;
  /* --red is the exact logo red, for accents and small highlights.
     The two button reds are stepped a shade darker so white label text
     clears WCAG AA (4.5:1) across the whole gradient — the logo red alone
     only reaches 4.38:1 behind 14px bold text. */
  --red:#ED1C24;
  --red-2:#E81B23;
  --red-deep:#C2171E;
  --line:#DFE5F2;
  --line-2:#CDD6EC;
  --shadow-sm:0 4px 14px rgba(15,30,90,.06);
  --shadow:0 18px 44px rgba(15,30,90,.10);
  --shadow-lg:0 36px 80px rgba(15,30,90,.16);
  --r:16px;
  --r-lg:26px;
  --maxw:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:"Lora","Playfair Display",Georgia,serif;
  --sans:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:104px 0}
.section--tight{padding:76px 0}

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--brand);display:inline-block}
.eyebrow.center::after{content:"";width:26px;height:1.5px;background:var(--brand);display:inline-block}
.eyebrow.center{justify-content:center}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.h-sec{font-size:clamp(2rem,4vw,3rem);margin:16px 0 0}
.lead{font-size:1.06rem;color:var(--muted);max-width:60ch}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head.center{margin-inline:auto;text-align:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:.92rem;letter-spacing:.02em;
  padding:15px 30px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
}
.btn svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 12px 26px rgba(14,21,51,.22)}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(14,21,51,.28)}
.btn-outline{border-color:var(--line-2);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-3px)}
/* Primary call-to-action — logo red. Reserved for the main action in a section. */
.btn-cta{background:linear-gradient(135deg,var(--red-2),var(--red-deep));color:#fff}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(237,28,36,.34)}
/* Secondary solid — logo blue. */
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(23,57,182,.34)}

/* ============ HEADER ============ */
/* The bar carries its white background from the top of the page rather than
   fading one in on scroll. The home hero is a dark photograph, and the nav links
   and the black type in the logo are both dark — over that photo they simply
   disappeared. Scrolling now only tightens the bar and lifts its shadow. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:box-shadow .35s,padding .35s;
  padding:18px 0;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.site-header.scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(15,30,90,.06);padding:12px 0}
.site-header .wrap{max-width:100%;padding-left:48px;padding-right:48px}
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
/* The header logo is a single-line wordmark (roughly 11:1), so it is sized by
   height to land near 340px wide. The 52px used for a stacked two-line mark
   would drag this one out to almost 600px. */
.brand img,.brand .custom-logo{height:30px;width:auto;max-width:none}
.brand .bmark{display:flex;flex-direction:column;line-height:1}
.brand .bmark b{font-family:var(--serif);font-size:1.12rem;letter-spacing:.01em}
.brand .bmark span{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:.92rem;font-weight:600;color:var(--ink-soft);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--brand);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* ---- Products dropdown ---- */
.has-drop{position:relative}
.drop-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:.92rem;font-weight:600;color:var(--ink-soft);
  background:none;border:0;padding:4px 0;cursor:pointer;position:relative;
}
.drop-toggle::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--brand);transition:width .3s var(--ease)}
.has-drop:hover .drop-toggle,.drop-toggle.active{color:var(--ink)}
.has-drop:hover .drop-toggle::after,.drop-toggle.active::after{width:100%}
.drop-toggle .chev{width:13px;height:13px;transition:transform .3s var(--ease)}
.has-drop:hover .drop-toggle .chev,.has-drop.open .drop-toggle .chev{transform:rotate(180deg)}
.drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:190px;padding:8px;margin-top:12px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
/* Bridges the gap between the trigger and the panel so the pointer can travel
   down without the menu closing under it. */
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{display:block;padding:11px 14px;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.drop a::after{display:none}
.drop a:hover,.drop a.active{background:var(--brand-tint);color:var(--brand)}

/* ---- Tobacco sub-dropdown (nested flyout) ---- */
.has-sub{position:relative}
.drop .drop-parent{display:flex;align-items:center;justify-content:space-between;gap:12px}
.subchev{width:15px;height:15px;flex:none;color:var(--muted);transition:transform .25s var(--ease)}
.has-sub:hover .subchev{color:var(--brand);transform:translateX(2px)}
.subdrop{
  position:absolute;top:-8px;left:100%;
  min-width:238px;padding:8px;margin-left:7px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateX(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
/* Bridge the gap so the pointer can cross into the flyout without it closing. */
.subdrop::before{content:"";position:absolute;left:-11px;top:0;bottom:0;width:11px}
.has-sub:hover .subdrop,.has-sub:focus-within .subdrop{opacity:1;visibility:visible;transform:translateX(0)}

.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:11px 22px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:150px 0 70px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%,#fff 0%,var(--bg) 55%,var(--bg-2) 100%);
}
.hero-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-deco .glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(760px,86vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(23,57,182,.20) 0%,rgba(23,57,182,.08) 40%,transparent 68%);
  filter:blur(6px);
}
.hero-deco .ring{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(640px,72vw);aspect-ratio:1;border-radius:50%;border:1px solid var(--brand-soft);opacity:.5;
}
.hero-inner{position:relative;z-index:3;width:100%;text-align:center}
.hero-eyebrow{justify-content:center;margin-bottom:26px}
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(320px,46vh,520px);margin:10px 0 6px}
.hero-word{
  position:relative;z-index:3;
  font-family:var(--serif);font-weight:600;
  /* Size tracks the letter count, because a fixed 20vw was tuned for the 7 of
     TOBACCO and swallowed the first and last letter of anything longer.
     --word-len is set inline from the word itself.
     --word-fit is how wide the word runs: at 140 a 7-letter word bleeds just off
     both edges, which is the original 20vw. Lower it to pull the word in. */
  font-size:clamp(3.2rem,calc(var(--word-fit,140) * 1vw / var(--word-len,7)),20rem);line-height:.8;letter-spacing:-.02em;
  /* A soft wash that sits behind the leaves rather than competing with them.
     Each stop is luminance-matched to the tint it replaces, so the word keeps
     the same visual weight it had in the original design. */
  background:linear-gradient(180deg,#BCC9F2 0%,#94A7EB 45%,#6580DF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none;white-space:nowrap;
  filter:drop-shadow(0 4px 10px rgba(255,255,255,.55)) drop-shadow(0 10px 24px rgba(15,30,90,.30));
}
.hero-bg-leaves{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:clamp(320px,52vh,560px);width:auto;z-index:1;
  filter:drop-shadow(0 34px 56px rgba(15,30,90,.28));
  animation:floaty 8s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-54%)}}

/* ---- Photo hero (home) ----
   The company exports three ranges, so no single cut-out product can stand for
   all of them; the home hero uses a full-bleed photograph instead. The image
   must be a direct child of .hero — .hero-inner is position:relative, so an
   absolutely positioned image nested inside it anchors to the 1200px content
   column rather than the full-bleed section.
   Everything in .hero was drawn for a light background, so this modifier flips
   the text to its on-dark colours. */
.hero--photo{background:#0A1130}
.hero-cover{
  position:absolute;left:0;top:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
/* .hero-deco doubles as the scrim between photo and copy. Heaviest at the top,
   where it has to carry the white header's edge, and at the bottom, where the
   page returns to its light background. */
.hero--photo .hero-deco{
  z-index:1;
  background:linear-gradient(180deg,rgba(9,16,46,.86) 0%,rgba(9,16,46,.66) 45%,rgba(9,16,46,.95) 100%);
}
.hero--photo .hero-deco .glow,.hero--photo .hero-deco .ring{display:none}
/* With no cut-out product to make room for, the stage only has to hold the word. */
.hero--photo .hero-stage{min-height:clamp(200px,28vh,320px)}
.hero--photo .hero-word{filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.hero--photo .hero-title{color:#fff}
.hero--photo .hero-title em{color:var(--brand-soft)}
/* Tobacco / Vegetable / Fruit picked out in the same blue as "Exporter",
   but upright (not italic). */
.hero--photo .hero-title .hl{color:var(--brand-soft)}
.hero--photo .hero-sub{color:#fff}
.hero--photo .hero-eyebrow{color:#fff}
.hero--photo .hero-eyebrow::before{background:#fff}
.hero--photo .hero-eyebrow::after{background:#fff}
.hero--photo .hero-scroll{color:#8B94AE}
.hero--photo .hero-scroll .mouse{border-color:rgba(255,255,255,.35)}
.hero--photo .btn-outline{border-color:rgba(255,255,255,.32);color:#EDF1FB}
.hero--photo .btn-outline:hover{border-color:#fff;color:#fff}

/* ---- Brand-blue wordmark over a photo hero (Tobacco / front page) ----
   Pairs with .hero--photo, so it inherits the full-bleed image and the
   on-dark copy colours and only changes what the photograph demands.
   The pale lavender wordmark was drawn for the white hero; over a photo it
   needs the logo blue and a white halo, or the letters sink into the image.
   The scrim is also lifted off the middle of the frame so the photograph
   still reads behind the type. */
.hero--brandword .hero-deco{
  background:
    radial-gradient(70% 55% at 50% 52%,rgba(255,255,255,.14) 0%,transparent 70%),
    linear-gradient(180deg,rgba(6,12,38,.74) 0%,rgba(6,12,38,.42) 40%,rgba(6,12,38,.62) 72%,rgba(6,12,38,.92) 100%);
}
.hero--brandword .hero-stage{min-height:clamp(170px,25vh,290px)}
.hero--brandword .hero-word{
  /* With no cut-out leaf behind it the word can sit fully inside the frame,
     so it is pulled in from the 140 that deliberately bled off both edges. */
  --word-fit:124;
  background:linear-gradient(180deg,var(--brand-2) 0%,var(--brand) 55%,var(--brand-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.42))
    drop-shadow(0 12px 26px rgba(0,0,0,.45));
}
.hero--brandword .hero-title{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero--brandword .hero-sub{color:#E7ECF8;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero--brandword .btn-outline{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.06);backdrop-filter:blur(2px)}
.hero--brandword .btn-outline:hover{background:rgba(255,255,255,.14)}

.hero-title{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.6rem);margin-top:8px}
.hero-title em{color:var(--brand);font-style:italic}
.hero-sub{max-width:56ch;margin:18px auto 0;color:var(--muted);font-size:1.05rem}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--muted-2);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll .mouse{width:22px;height:34px;border:1.5px solid var(--line-2);border-radius:12px;position:relative}
.hero-scroll .mouse::after{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:3px;height:6px;border-radius:2px;background:var(--brand);animation:scroll 1.6s infinite}
@keyframes scroll{0%{opacity:0;top:6px}40%{opacity:1}100%{opacity:0;top:16px}}

/* ============ MARQUEE / TRUST ============ */
.trust{background:var(--ink);color:#E8EDFB;padding:20px 0;overflow:hidden}
.trust .track{display:flex;gap:60px;white-space:nowrap;animation:marq 26s linear infinite;width:max-content}
.trust .track span{display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-size:1.15rem;color:#DDE4F8;opacity:.9}
.trust .track span i{color:var(--brand-2);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ STATS ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:34px 28px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s}
.stat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--serif);font-size:2.7rem;color:var(--ink);line-height:1}
.stat b em{color:var(--brand);font-style:normal}
.stat span{display:block;margin-top:10px;font-size:.86rem;color:var(--muted);letter-spacing:.02em}

/* ============ ABOUT / SPLIT ============ */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split.rev .split-media{order:2}
.split-media{position:relative}
.split-media .frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-2)}
.split-media .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split-media .badge{
  position:absolute;left:-26px;bottom:34px;background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:20px 24px;box-shadow:var(--shadow);max-width:230px;
}
.split-media .badge b{font-family:var(--serif);font-size:1.5rem;color:var(--brand);display:block}
.split-media .badge span{font-size:.82rem;color:var(--muted)}
.split-body p{color:var(--muted);margin-top:18px}
/* CEO portrait: cap the photo so it doesn't fill the whole column. */
.ceo-media .frame{max-width:300px;margin:0 auto}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.mini{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.mini .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--brand-tint);display:grid;place-items:center;color:var(--brand)}
.mini .ic svg{width:19px;height:19px}
.mini b{font-size:.95rem;display:block}
.mini span{font-size:.82rem;color:var(--muted)}

/* ============ PRODUCTS ============ */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;
}
.pcard::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,var(--brand-tint),transparent 60%);opacity:0;transition:opacity .4s}
.pcard:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--brand-soft)}
.pcard:hover::before{opacity:1}
.pcard .pimg{position:relative;z-index:1;height:210px;display:grid;place-items:center;margin-bottom:18px}
.pcard .pimg img{max-height:210px;width:auto;filter:drop-shadow(0 18px 26px rgba(15,30,90,.22));transition:transform .5s var(--ease)}
.pcard:hover .pimg img{transform:scale(1.06) rotate(-1deg)}
.pcard .tag{position:relative;z-index:1;display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:var(--brand-tint);padding:5px 12px;border-radius:100px;margin-bottom:12px}
.pcard h3{position:relative;z-index:1;font-size:1.3rem}
.pcard p{position:relative;z-index:1;color:var(--muted);font-size:.92rem;margin-top:8px}
.pcard .plink{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-weight:700;font-size:.86rem;color:var(--ink)}
.pcard .plink svg{width:15px;height:15px;transition:transform .3s}
.pcard:hover .plink{color:var(--brand)}
.pcard:hover .plink svg{transform:translateX(4px)}

/* ============ WHY / FEATURES ============ */
.why{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.feat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px 26px;transition:transform .35s var(--ease),box-shadow .35s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feat .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--brand-2),var(--brand));display:grid;place-items:center;color:#fff;margin-bottom:20px}
.feat .ic svg{width:24px;height:24px}
.feat h3{font-size:1.18rem}
.feat p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* ============ GLOBAL REACH ============ */
.reach{position:relative;color:#EDF1FB;overflow:hidden;border-radius:var(--r-lg)}
.reach .bg{position:absolute;inset:0}
.reach .bg img{width:100%;height:100%;object-fit:cover}
.reach .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,16,46,.92) 0%,rgba(9,16,46,.72) 45%,rgba(9,16,46,.4) 100%)}
.reach-inner{position:relative;z-index:2;padding:70px 60px;max-width:640px}
.reach-inner .eyebrow{color:var(--brand-2)}
.reach-inner h2{color:#fff}
.reach-inner p{color:#BFC8E4;margin-top:16px}
.markets{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.markets span{border:1px solid rgba(169,184,232,.38);color:#C5CDED;padding:9px 18px;border-radius:100px;font-size:.86rem;font-weight:600}

/* ============ TESTIMONIAL / QUOTE ============ */
.pull{text-align:center;max-width:820px;margin:0 auto}
.pull .mark{font-family:var(--serif);font-size:4rem;color:var(--brand-soft);line-height:.5}
.pull blockquote{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;color:var(--ink);margin:14px 0 24px;font-weight:500}
.pull cite{font-style:normal;color:var(--muted);font-weight:600}
.pull cite b{color:var(--brand);display:block}

/* ============ CTA BAND ============ */
.cta-band{position:relative;background:var(--ink);color:#EDF1FB;border-radius:var(--r-lg);overflow:hidden;text-align:center;padding:76px 30px}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(46,82,216,.38),transparent 65%)}
.cta-band::before{width:420px;height:420px;left:-120px;top:-160px}
.cta-band::after{width:420px;height:420px;right:-120px;bottom:-200px}
.cta-band .inner{position:relative;z-index:2}
.cta-band h2{color:#fff;font-size:clamp(2rem,4vw,3rem)}
.cta-band p{color:#BCC5E0;max-width:52ch;margin:14px auto 0}
.cta-band .hero-actions{margin-top:30px}

/* ============ FOOTER ============ */
.footer{background:#0B1030;color:#A9B2CC;padding:78px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:44px}
.footer .brand .bmark b{color:#fff}
.footer .brand .bmark span{color:#7C86A6}
.foot-about{margin-top:20px;font-size:.9rem;color:#98A2BE;max-width:34ch}
.foot-social{display:flex;gap:12px;margin-top:22px}
.foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid #232A4D;display:grid;place-items:center;color:#A9B2CC;transition:.3s}
.foot-social a:hover{background:var(--brand);color:#ffffff;border-color:var(--brand);transform:translateY(-3px)}
.foot-col h4{font-family:var(--sans);color:#fff;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.foot-col ul li{margin-bottom:12px}
.foot-col ul li a{font-size:.92rem;color:#A9B2CC;transition:.25s}
.foot-col ul li a:hover{color:var(--brand-2);padding-left:4px}
.foot-office{font-size:.9rem;color:#98A2BE;line-height:1.8}
.foot-office b{color:#fff;display:block;font-family:var(--serif);font-size:1rem;margin-bottom:6px}
.foot-office .row{display:flex;gap:9px;margin-top:8px}
.foot-office .row svg{width:15px;height:15px;color:var(--brand-2);flex:0 0 auto;margin-top:4px}
.foot-bottom{border-top:1px solid #1E2547;margin-top:52px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:#7C86A6}
.foot-bottom a{color:#98A2BE}

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{position:relative;padding:180px 0 80px;text-align:center;background:radial-gradient(110% 100% at 50% 0,#fff,var(--bg) 60%,var(--bg-2))}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);margin-top:14px}
.page-hero p{max-width:60ch;margin:16px auto 0;color:var(--muted)}
/* Fruits hero: a real orchard photo sits behind the text as a faded wash.
   The heavy light overlay keeps the dark heading and body copy readable.
   (The labelled varieties chart was tried here first but its big text ghosted
   through the fade, so a clean photo is used instead.) */
.page-hero--fruit{
  background:
    linear-gradient(180deg,rgba(247,249,252,.86),rgba(247,249,252,.80)),
    url("assets/web/fruit-orchard-main.png") center 55%/cover no-repeat,
    radial-gradient(110% 100% at 50% 0,#fff,var(--bg) 60%,var(--bg-2));
}
/* Over the photo the default muted grey reads too light, so the crumb and the
   intro copy are darkened for this hero only. */
.page-hero--fruit .crumb,
.page-hero--fruit .crumb a,
.page-hero--fruit p{color:var(--ink-soft)}
/* Vegetables hero: potatoes-and-onions photo behind the text as a faded wash,
   with the crumb and intro copy darkened for readability over it. */
.page-hero--veg{
  background:
    linear-gradient(180deg,rgba(247,249,252,.86),rgba(247,249,252,.80)),
    url("assets/web/veg-potato-onion.jpg") center 50%/cover no-repeat,
    radial-gradient(110% 100% at 50% 0,#fff,var(--bg) 60%,var(--bg-2));
}
.page-hero--veg .crumb,
.page-hero--veg .crumb a,
.page-hero--veg p{color:var(--ink-soft)}
/* Rice hero: a paddy-field photo behind the text as a faded wash, same
   treatment as the fruit and vegetable heroes so the three range pages stay
   a set. The crop is held low so the green fields, not the pale sky, sit
   behind the heading. */
.page-hero--rice{
  background:
    linear-gradient(180deg,rgba(247,249,252,.86),rgba(247,249,252,.80)),
    url("assets/web/rice-paddy-hero.jpg") center 60%/cover no-repeat,
    radial-gradient(110% 100% at 50% 0,#fff,var(--bg) 60%,var(--bg-2));
}
.page-hero--rice .crumb,
.page-hero--rice .crumb a,
.page-hero--rice p{color:var(--ink-soft)}
/* Logistics section: a port / shipping photo behind the copy. A moderate wash
   softens it, and the long body text sits on a frosted white card so it stays
   crisp and readable. */
.fruit-logistics{
  background:
    linear-gradient(180deg,rgba(244,247,251,.78),rgba(244,247,251,.82)),
    url("assets/web/fruit-logistics-bg.png") center/cover no-repeat;
}
.veg-logistics{
  background:
    linear-gradient(180deg,rgba(244,247,251,.78),rgba(244,247,251,.82)),
    url("assets/web/veg-warehouse-bg.jpg") center/cover no-repeat;
}
/* The rice mill photo is darker and busier than the port and warehouse shots,
   so its wash runs a little heavier to keep the prose card's edge readable. */
.rice-logistics{
  background:
    linear-gradient(180deg,rgba(244,247,251,.82),rgba(244,247,251,.86)),
    url("assets/web/rice-milling-bg.jpg") center/cover no-repeat;
}
.fruit-logistics .prose-card,
.rice-logistics .prose-card,
.veg-logistics .prose-card{
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 42px;box-shadow:var(--shadow-sm);
}
@media(max-width:600px){.fruit-logistics .prose-card{padding:26px 22px}}

/* Rice overview: photo on the right, copy on the left. The copy runs three
   full paragraphs, so the photo stretches to the column height rather than
   holding its 5:4 crop and leaving a gap beside the text. */
.rice-overview .psplit{align-items:stretch}
.rice-overview .pmedia .frame{height:100%}
.rice-overview .pmedia .frame img{aspect-ratio:auto;height:100%;min-height:440px}
/* Matches the breakpoint where .psplit collapses to one column — stacked, the
   photo goes back to its normal crop. */
@media(max-width:1000px){
  .rice-overview .pmedia .frame img{min-height:0;aspect-ratio:5/4}
}
.crumb{font-size:.82rem;color:var(--muted);letter-spacing:.04em}
.crumb a:hover{color:var(--brand)}

/* value cards */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Four-across variant, used for the vegetable and fruit item lists. */
.val-grid.four{grid-template-columns:repeat(4,1fr)}
.val{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;box-shadow:var(--shadow-sm)}
.val .num{font-family:var(--serif);font-size:1.1rem;color:var(--brand);border:1.5px solid var(--brand-soft);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px}
.val h3{font-size:1.2rem}
.val p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* spec / packing tables — used on the fruit & vegetable range pages */
.spec-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.spec-card h3{font-family:var(--serif);font-size:1.3rem;padding:24px 28px 0}
.spec-card > p{color:var(--muted);font-size:.92rem;padding:6px 28px 0}
.spec-table{width:100%;border-collapse:collapse;margin-top:18px}
.spec-table th,.spec-table td{text-align:left;padding:14px 28px;font-size:.94rem;border-top:1px solid var(--line)}
.spec-table th{width:44%;font-weight:700;color:var(--ink-soft);background:var(--bg)}
.spec-table td{color:var(--muted)}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:1px solid var(--line-2)}
.spec-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.variety-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.variety{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.variety:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.variety b{font-family:var(--serif);font-size:1.12rem;color:var(--ink);display:block}
.variety span{font-size:.86rem;color:var(--muted);margin-top:4px;display:block}
@media(max-width:900px){.spec-2,.variety-grid{grid-template-columns:1fr}}
@media(max-width:600px){.spec-table th,.spec-table td{padding:12px 18px}.spec-card h3,.spec-card > p{padding-left:18px;padding-right:18px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:8px;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--white);
  font-family:inherit;font-size:.95rem;color:var(--ink);transition:.25s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.field textarea{resize:vertical;min-height:130px}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px;box-shadow:var(--shadow)}

/* contact form 7 — make the plugin form match the theme's demo form */
.form-card .wpcf7 p{margin:0 0 18px}
.form-card .wpcf7 label{display:block;font-size:.82rem;font-weight:700;margin-bottom:8px;color:var(--ink-soft)}
.form-card .wpcf7 input[type=text],
.form-card .wpcf7 input[type=email],
.form-card .wpcf7 input[type=tel],
.form-card .wpcf7 select,
.form-card .wpcf7 textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--white);
  font-family:inherit;font-size:.95rem;color:var(--ink);transition:.25s;
}
.form-card .wpcf7 input:focus,.form-card .wpcf7 select:focus,.form-card .wpcf7 textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)
}
.form-card .wpcf7 textarea{resize:vertical;min-height:130px}
.form-card .wpcf7 input[type=submit]{
  width:100%;padding:16px 24px;border:none;border-radius:999px;background:var(--red-2);color:#fff;
  font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:.25s;
}
.form-card .wpcf7 input[type=submit]:hover{filter:brightness(1.08);transform:translateY(-2px)}
.form-card .wpcf7-spinner{display:block;margin:12px auto 0}
.form-card .wpcf7-not-valid{border-color:var(--red-2)}
.form-card .wpcf7-not-valid-tip{color:var(--red-2);font-size:.82rem;margin-top:6px}
.form-card .wpcf7-response-output{
  margin:16px 0 0;padding:12px 16px;border-radius:12px;border:1.5px solid var(--line-2);
  font-size:.9rem;text-align:center;color:var(--ink-soft)
}
.form-card .wpcf7 form.sent .wpcf7-response-output{border-color:var(--brand);color:var(--brand)}
.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.failed .wpcf7-response-output{border-color:var(--red-2);color:var(--red-2)}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px 28px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.info-card b{font-family:var(--serif);font-size:1.15rem}
.info-card .row{display:flex;gap:12px;margin-top:12px;color:var(--muted);font-size:.92rem}
.info-card .row svg{width:17px;height:17px;color:var(--brand);flex:0 0 auto;margin-top:3px}

/* product split (image + content sections) */
.psplit{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.psplit .pmedia .frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);position:relative}
.psplit .pmedia .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;display:block;transition:transform .6s var(--ease)}
.psplit .pmedia:hover .frame img{transform:scale(1.04)}
.psplit.rev .pmedia{order:2}
.psplit .pbody p{color:var(--muted);margin-top:16px}
.psplit .pbody .btn{margin-top:26px}
.psplit .pbody .plist{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.psplit .pbody .plist li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:.95rem}
.psplit .pbody .plist li svg{width:18px;height:18px;color:var(--brand);flex:0 0 auto;margin-top:3px}

/* team */
/* process flow — vertical timeline, image and text alternating either side */
.flow{list-style:none;max-width:1000px;margin:0 auto;position:relative;padding:4px 0}
/* the spine */
.flow::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.flow-step{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;gap:0}
.flow-step + .flow-step{margin-top:54px}
.flow-num{grid-column:2;justify-self:center;position:relative;z-index:2;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--white);border:2px solid var(--brand);color:var(--brand);font-family:var(--serif);font-size:1.12rem;font-weight:600;box-shadow:0 0 0 8px var(--bg-2)}
.flow-media{grid-column:1;grid-row:1}
.flow-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow-sm);display:block}
.flow-body{grid-column:3;grid-row:1;padding-left:36px}
.flow-body h3{font-family:var(--serif);font-size:1.32rem;color:var(--ink)}
.flow-body p{color:var(--muted);margin-top:10px;font-size:.95rem}
/* every second step swaps sides */
.flow-step:nth-child(even) .flow-media{grid-column:3}
.flow-step:nth-child(even) .flow-body{grid-column:1;padding-left:0;padding-right:36px;text-align:right}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s;text-decoration:none;color:inherit}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.bimg{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.bimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.bcard:hover .bimg img{transform:scale(1.05)}
.bbody{padding:22px;display:flex;flex-direction:column;flex:1}
.bmeta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
.bcat{color:var(--brand);font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:.72rem}
.bcard h3{font-family:var(--serif);font-size:1.12rem;line-height:1.35;margin-top:10px;color:var(--ink)}
.bexcerpt{font-size:.9rem;color:var(--muted);margin-top:10px;flex:1}
.blink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.84rem;font-weight:600;color:var(--brand)}
.blink svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.bcard:hover .blink svg{transform:translateX(4px)}

.ceo-sign{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.ceo-sign b{display:block;font-family:var(--serif);font-size:1.18rem;color:var(--ink)}
.ceo-sign span{display:block;font-size:.84rem;color:var(--brand);font-weight:600;letter-spacing:.03em;margin-top:3px}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1100px;margin:0 auto}
.member{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s;text-align:center;padding-bottom:22px}
.member:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.mphoto{width:150px;height:150px;border-radius:50%;overflow:hidden;background:var(--bg-2);margin:28px auto 0;box-shadow:var(--shadow-sm)}
.mphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;transition:transform .5s var(--ease)}
.member:hover .mphoto img{transform:scale(1.05)}
.member b{display:block;font-family:var(--serif);font-size:1.18rem;margin-top:18px}
.member span{display:block;font-size:.84rem;color:var(--brand);font-weight:600;letter-spacing:.03em;margin-top:3px}

/* reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .stats,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .val-grid{grid-template-columns:1fr}
  .val-grid.four{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:40px}
  .split.rev .split-media{order:0}
  .psplit{grid-template-columns:1fr;gap:34px}
  .psplit.rev .pmedia{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .reach-inner{padding:54px 40px}
}
@media(max-width:860px){
  /* spine moves to the left edge; image and text stack beside it */
  .flow::before{left:29px;margin-left:0}
  .flow-step{grid-template-columns:58px 1fr;gap:0 22px}
  .flow-step + .flow-step{margin-top:38px}
  .flow-num{grid-column:1;grid-row:1;justify-self:start}
  .flow-media,.flow-step:nth-child(even) .flow-media{grid-column:2;grid-row:1}
  .flow-body,.flow-step:nth-child(even) .flow-body{grid-column:2;grid-row:2;padding:16px 0 0;text-align:left}
}
@media(max-width:760px){
  .section{padding:74px 0}
  .nav-links,.nav-cta .btn-line{display:none}
  .burger{display:flex}
  /* The wordmark is a single line at roughly 11:1, so at the desktop 30px it
     runs about 339px wide — with the 48px gutters that is wider than a 390px
     phone, and the burger was pushed off the right edge where it could not be
     tapped. Tighter gutters and a shorter mark bring the row back inside. */
  .site-header .wrap{padding-left:16px;padding-right:16px}
  .brand img,.brand .custom-logo{height:24px}
  .nav-links.open{display:flex;position:absolute;top:100%;left:16px;right:16px;flex-direction:column;gap:0;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);align-items:stretch}
  .nav-links.open a{padding:13px 14px;border-radius:10px}
  .nav-links.open a:hover{background:var(--brand-tint)}
  /* No hover on touch, so the dropdown becomes a tap-to-open accordion that
     pushes the rest of the menu down instead of floating over it. */
  .nav-links.open .has-drop{width:100%}
  .drop-toggle{width:100%;justify-content:space-between;padding:13px 14px}
  .drop-toggle::after{display:none}
  .drop{
    position:static;transform:none;margin:0;padding:0 0 0 10px;
    border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;
    min-width:0;display:none;opacity:1;visibility:visible;background:none;
  }
  .drop::before{display:none}
  .has-drop.open .drop{display:block}
  .has-drop:hover .drop{opacity:1;visibility:visible;transform:none}
  /* Nested Tobacco grades: show inline & indented instead of a side flyout. */
  .subdrop{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:2px 0 6px 10px;padding:0 0 0 10px;
    border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;background:none;
  }
  .subdrop::before{display:none}
  .subchev{display:none}
  .hero{min-height:auto;padding:130px 0 60px}
  .hero-bg-leaves{height:min(320px,40vh)}
  /* Portrait phones crop a landscape photo hard — hold the centre of the
     frame, and pull the wordmark in so it clears the gutters. */
  .hero--brandword .hero-cover{object-position:50% 45%}
  .hero--brandword .hero-word{--word-fit:108}
  .hero--brandword .hero-deco{
    background:linear-gradient(180deg,rgba(6,12,38,.80) 0%,rgba(6,12,38,.58) 40%,rgba(6,12,38,.94) 100%);
  }
  .contact-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .split-media .badge{left:16px}
  .mini-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .blog-grid{grid-template-columns:1fr}
  /* Below this the logo, the quote button and the burger no longer fit on one
     row. The button goes — Contact is still one tap away inside the menu. */
  .nav-cta .btn{display:none}
}
/* Smallest phones (iPhone SE and similar): even the 24px mark plus the burger
   overruns 320px, so the gutters, the row gap and the mark all step down once
   more. Measured: 226 + 24 + 10 + 40 = 300px inside a 320px screen. */
@media(max-width:400px){
  .site-header .wrap{padding-left:12px;padding-right:12px}
  .nav{gap:10px}
  .brand img,.brand .custom-logo{height:20px}
}
@media(max-width:460px){
  .stats,.feat-grid{grid-template-columns:1fr}
  .val-grid.four{grid-template-columns:1fr}
  .btn{padding:13px 24px}
}

/* ============================================================
   TOBACCO GRADE DETAIL PAGE
   ============================================================ */
.page-hero--grade{background:radial-gradient(120% 100% at 50% 0,#fff,var(--brand-tint) 68%,var(--bg-2))}

.grade-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start}

.grade-figure{width:170px;margin:0 0 24px;border-radius:var(--r);overflow:hidden;background:var(--white);padding:10px;box-shadow:var(--shadow);border:1px solid var(--line)}
.grade-figure img{border-radius:calc(var(--r) - 6px)}

.grade-body{color:var(--muted)}
.grade-body h2{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--ink);margin:4px 0 16px}
.grade-body h3{font-family:var(--serif);font-size:1.28rem;color:var(--brand-deep);margin:30px 0 4px}
.grade-body>p{margin:0 0 16px}
.grade-region{font-weight:600;color:var(--ink);margin:0 0 12px}

.grade-specs{margin:0 0 20px}
.grade-specs li{position:relative;padding:9px 0 9px 26px;color:var(--muted);border-bottom:1px solid var(--line)}
.grade-specs li:last-child{border-bottom:0}
.grade-specs li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.grade-specs li b{color:var(--ink);font-weight:600}
.grade-specs--wide{margin-top:26px;border-top:2px solid var(--brand-tint);padding-top:8px}

.grade-side{position:sticky;top:100px}
.grade-side-card{background:linear-gradient(180deg,var(--brand-tint),var(--bg-2));border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 22px;box-shadow:var(--shadow-sm)}
.grade-side-card h3{font-family:var(--serif);text-align:center;font-size:1.4rem;color:var(--ink);margin-bottom:22px}
.grade-nav{display:flex;flex-direction:column;gap:12px}
.gnav{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:15px 16px;font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.35;transition:.22s var(--ease)}
.gnav svg{width:22px;height:22px;color:var(--brand);flex:none}
.gnav:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateX(3px);box-shadow:var(--shadow-sm)}
.gnav:hover svg{color:#fff}
.gnav.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.gnav.is-active svg{color:#fff}

@media(max-width:900px){
  .grade-layout{grid-template-columns:1fr;gap:40px}
  .grade-side{position:static}
  .grade-figure{margin:0 auto 24px}
}


/* ===== Success Story gallery ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.gallery-item{padding:0;margin:0;border:0;background:none;cursor:pointer;position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:block}
.gallery-item img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s var(--ease)}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,30,90,.30));opacity:0;transition:opacity .3s}
.gallery-item::before{content:"";position:absolute;z-index:2;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%) scale(.6);border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231739B6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/22px no-repeat;opacity:0;transition:opacity .3s,transform .3s}
.gallery-item:hover img{transform:scale(1.07)}
.gallery-item:hover::after{opacity:1}
.gallery-item:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ===== Lightbox ===== */
.glt-lightbox{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(8,14,40,.93);padding:30px}
.glt-lightbox.open{display:flex;animation:gltFade .25s ease}
@keyframes gltFade{from{opacity:0}to{opacity:1}}
.glt-lb-img{max-width:90vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.glt-lb-btn{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;cursor:pointer;width:52px;height:52px;border-radius:50%;font-size:1.4rem;line-height:1;display:grid;place-items:center;transition:background .2s}
.glt-lb-btn:hover{background:rgba(255,255,255,.30)}
.glt-lb-close{top:24px;right:24px;font-size:1.9rem}
.glt-lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.glt-lb-next{right:24px;top:50%;transform:translateY(-50%)}
.glt-lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-size:.85rem;letter-spacing:.05em;opacity:.85}
@media(max-width:560px){.glt-lb-btn{width:42px;height:42px}.glt-lb-close{top:14px;right:14px}.glt-lb-prev{left:10px}.glt-lb-next{right:10px}}

/* ===== Rice FOB price table ===== */
.price-heading{display:flex;align-items:center;gap:14px;font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--ink);margin-bottom:8px}
.price-heading-bar{flex:none;width:6px;height:1.4em;border-radius:4px;background:var(--brand);display:inline-block}
.price-heading small{font-weight:500;color:var(--muted);font-size:.62em}
.price-table-wrap{overflow-x:auto;margin-top:26px;border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--brand-soft);-webkit-overflow-scrolling:touch}
.price-table{width:100%;border-collapse:collapse;min-width:640px;background:#fff}
.price-table thead th{background:var(--brand-deep);color:#fff;text-align:left;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:18px 26px;font-weight:700;white-space:nowrap}
.price-table thead th:last-child{text-align:right}
.price-table tbody td{padding:17px 26px;border-top:1px solid var(--bg-2);color:var(--muted);font-size:.96rem;vertical-align:middle}
.price-table tbody td:first-child{color:var(--ink);font-weight:700}
.price-table tbody td:last-child{text-align:right;color:var(--ink);font-weight:700;white-space:nowrap}
.price-table tbody tr:nth-child(even){background:var(--bg)}
.price-table tbody tr:hover{background:var(--brand-tint)}
.price-note{margin-top:18px;color:var(--muted);font-size:.9rem;max-width:80ch}
.price-note a{color:var(--brand);font-weight:600}