/* ============================================================
   GIA DAI — Premium Vietnamese Seafood & Agricultural Export
   Design system · "Clean & Bold" (Direction A — Market)
   Layout restructured to the client's reference screenshots.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* paper / ink — Cream & Dark Red */
  --paper:   #fbf8f1;   /* cream canvas */
  --paper-2: #f4eee2;   /* warm cream band */
  --paper-3: #ebe2d2;   /* deeper cream */
  --ink:     #231a15;   /* warm near-black */
  --ink-2:   #5c5046;   /* warm taupe */
  --ink-3:   #8d8275;   /* muted warm grey */
  --line:    #e7ddcd;   /* warm hairline */
  --line-2:  #d8ccb6;

  /* primary accent — dark red */
  --red:      #9e1f2c;
  --red-deep: #7d1622;
  --red-tint: #f6e7e8;
  --red-line: #e9c9cc;

  /* secondary — kept on the two-colour scheme */
  --gold:     #9e1f2c;
  --gold-2:   #7d1622;

  /* deep surface — dark red (footer, hero, page hero) */
  --navy:   #5e1219;
  --navy-2: #430d12;

  /* type */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;

  --radius: 2px;
  --radius-lg: 2px;
  --radius-xl: 3px;
  --wrap: 1280px;
  --shadow-card: 0 14px 36px rgba(24,20,18,.08);
  --shadow-lift: 0 26px 56px rgba(24,20,18,.14);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; letter-spacing:-0.02em; line-height:1.02; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:3px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,56px); }
.section{ padding-block:clamp(56px,8vw,112px); }
.section-tight{ padding-block:clamp(40px,5vw,72px); }

/* ---------- eyebrow ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--display);
  font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); display:inline-block; flex:none; }
.eyebrow.no-rule::before{ display:none; }
.eyebrow.is-light{ color:#fff; }
.eyebrow.is-light::before{ background:#fff; }
.eyebrow.center{ justify-content:center; }

/* ---------- section heading helpers ---------- */
.h-xl{ font-size:clamp(40px,6vw,82px); text-transform:uppercase; line-height:.94; }
.h-lg{ font-size:clamp(32px,4.6vw,60px); text-transform:uppercase; }
.h-md{ font-size:clamp(26px,3.2vw,42px); text-transform:uppercase; }
.lead{ font-size:clamp(17px,1.4vw,20px); line-height:1.65; color:var(--ink-2); }
.measure{ max-width:56ch; }
.center{ text-align:center; }
.muted{ color:var(--ink-3); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--radius); border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s, color .2s, border-color .2s, box-shadow .2s; white-space:nowrap; }
.btn:hover{ transform:translateY(-2px); }
.btn .arr{ transition:transform .2s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 22px rgba(158,31,44,.26); }
.btn-primary:hover{ background:var(--red-deep); box-shadow:0 14px 28px rgba(158,31,44,.3); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:var(--paper-2); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-sm{ padding:11px 18px; font-size:12.5px; }
.link-arrow{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--red); display:inline-flex; gap:8px; align-items:center; }
.link-arrow .arr{ transition:transform .2s; }
.link-arrow:hover .arr{ transform:translateX(4px); }

/* ---------- styled placeholders (tasteful) ---------- */
.ph{ position:relative; display:grid; place-items:center; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(0,0,0,.015), transparent),
    repeating-linear-gradient(-45deg, var(--paper-2) 0 14px, var(--paper-3) 14px 28px);
  border-radius:var(--radius); }
.ph-label{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; letter-spacing:.04em;
  color:var(--ink-3); background:rgba(255,255,255,.78); border:1px solid var(--line);
  padding:5px 11px; border-radius:100px; backdrop-filter:blur(4px); text-align:center; }
.ph.t-warm{ background:repeating-linear-gradient(-45deg,#f4e3d6 0 14px,#edd6c4 14px 28px); }
.ph.t-red{ background:repeating-linear-gradient(-45deg,#f6d9d5 0 14px,#efc7c1 14px 28px); }
.ph.t-sea{ background:repeating-linear-gradient(-45deg,#dbe6ec 0 14px,#cad9e2 14px 28px); }
.ph.t-green{ background:repeating-linear-gradient(-45deg,#e0e8d6 0 14px,#d2ddc3 14px 28px); }
.ph.t-amber{ background:repeating-linear-gradient(-45deg,#f6e8c8 0 14px,#efddb4 14px 28px); }
.ph.dark{ background:repeating-linear-gradient(-45deg,#3a1416 0 16px,#2a0e10 16px 32px); }
.ph.dark .ph-label{ background:rgba(0,0,0,.34); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.82); }

/* ============================================================
   HEADER  (logo · search · nav · CTA)
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid var(--line); }
.topbar{ background:var(--ink); color:rgba(255,255,255,.78); font-size:12.5px; }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar a{ color:rgba(255,255,255,.78); }
.topbar a:hover{ color:#fff; }
.tb-left{ font-weight:500; letter-spacing:.02em; }
.tb-right{ display:flex; align-items:center; gap:16px; }
.tb-right .div{ width:1px; height:13px; background:rgba(255,255,255,.22); }
.lang{ display:inline-flex; gap:8px; }
.lang a{ font-weight:700; opacity:.55; }
.lang a.on{ opacity:1; color:#fff; }
@media(max-width:760px){ .tb-left{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,30px); height:82px; }
.brand{ display:flex; align-items:center; gap:13px; flex:none; }
.brand-mark{ width:44px; height:44px; border-radius:3px; display:grid; place-items:center;
  background:var(--red); color:#fff; flex:none;
  box-shadow:0 6px 16px rgba(158,31,44,.3); }
.brand-mark svg{ width:26px; height:26px; stroke-width:2; }
.brand-name{ display:block; font-family:var(--display); font-weight:900; font-size:21px; letter-spacing:.02em; line-height:1; }
.brand-sub{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:4px; }
/* real client logo — wordmark in header */
.brand-logo{ height:46px; width:auto; display:block; }
@media(max-width:480px){ .brand-logo{ height:36px; } }
/* full logo blended onto the dark footer (knocked out to white) */
.footer-logo{ display:inline-block; line-height:0; margin-bottom:22px; }
.footer-logo img{ height:120px; width:auto; display:block;  }

/* search */
.nav-search{ flex:1; max-width:360px; margin-inline:auto; position:relative; }
.nav-search input{ width:100%; font-family:var(--body); font-size:14px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line); border-radius:100px;
  padding:11px 18px 11px 42px; transition:border-color .2s, background .2s; }
.nav-search input::placeholder{ color:var(--ink-3); }
.nav-search input:focus{ outline:none; border-color:var(--line-2); background:#fff; }
.nav-search svg{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-3); }

.nav-links{ display:flex; align-items:center; gap:clamp(16px,1.6vw,24px); list-style:none; margin:0; padding:0; flex:none; }
.nav-links a{ font-family:var(--display); font-weight:700; font-size:13.5px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--ink-2); position:relative; padding-block:6px; transition:color .15s; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red); }
.nav-cta{ flex:none; }
.nav-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line); background:#fff;
  border-radius:var(--radius); cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-toggle span{ width:18px; height:2px; background:var(--ink); display:block; }

@media(max-width:1100px){ .nav-search{ display:none; } }
@media(max-width:1040px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav{ justify-content:space-between; }
  .nav.open .nav-links{ display:flex; position:absolute; left:0; right:0; top:100%; flex-direction:column;
    align-items:flex-start; gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 0; z-index:99; }
  .nav.open .nav-links li{ width:100%; }
  .nav.open .nav-links a{ display:block; padding:14px clamp(20px,5vw,56px); width:100%; }
  .nav.open .nav-cta{ display:flex; padding:14px clamp(20px,5vw,56px); }
}

/* ============================================================
   HERO  (full-bleed photo · bold overlay · carousel)
   ============================================================ */
.hero{ position:relative; overflow:hidden; background:var(--navy); }
.hero-track{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.hero-slide.on{ opacity:1; }
.hero-slide .ph{ position:absolute; inset:0; border-radius:0; }
.hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(38,13,15,.46) 0%, rgba(38,13,15,.3) 38%, rgba(38,13,15,.8) 100%); }
.hero-inner{ position:relative; z-index:3; min-height:min(78vh,720px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding-block:clamp(72px,11vw,140px); }
.hero .eyebrow{ color:#f4ddc8; } .hero .eyebrow::before{ background:#f0a79d; }
.hero h1{ color:#fff; font-size:clamp(44px,8vw,118px); font-weight:900; text-transform:uppercase;
  line-height:.86; letter-spacing:-0.035em; margin-top:22px; text-shadow:0 4px 30px rgba(0,0,0,.35); }
.hero h1 em{ font-style:normal; color:#f0a79d; }
.hero-sub{ margin-top:8px; font-family:var(--display); font-weight:700; color:rgba(255,255,255,.86);
  font-size:clamp(14px,1.6vw,18px); letter-spacing:.28em; text-transform:uppercase; }
.hero-lead{ color:rgba(255,255,255,.86); margin-top:24px; max-width:54ch; font-size:clamp(16px,1.3vw,19px); }
.hero-actions{ display:flex; gap:13px; flex-wrap:wrap; justify-content:center; margin-top:34px; }
.hero-arrows{ position:absolute; right:clamp(16px,4vw,40px); bottom:clamp(20px,4vw,40px); z-index:4; display:flex; gap:10px; }
.hero-arrows button{ width:48px; height:48px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.18); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:20px;
  backdrop-filter:blur(6px); transition:.2s; }
.hero-arrows button:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.hero-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(20px,4vw,40px); z-index:4; display:flex; gap:9px; }
.hero-dots button{ width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.4); cursor:pointer; transition:.2s; padding:0; }
.hero-dots button.on{ background:#fff; width:26px; border-radius:5px; }

/* ============================================================
   ABOUT SPLIT  (facility photo + est. badge · copy + feature cards)
   ============================================================ */
.about-split{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,76px); align-items:center; }
.about-media{ position:relative; }
.about-media .ph{ aspect-ratio:4/3.5; border:1px solid var(--line); border-radius:var(--radius-xl); }
.est-badge{ position:absolute; right:-22px; bottom:-22px; background:var(--red); color:#fff;
  border-radius:var(--radius-lg); padding:18px 26px; text-align:center; box-shadow:var(--shadow-lift); z-index:2; }
.est-badge .y{ font-family:var(--display); font-weight:900; font-size:30px; line-height:1; }
.est-badge .l{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; margin-top:6px; opacity:.9; }
.about-copy h2{ font-size:clamp(28px,3.4vw,46px); text-transform:uppercase; margin:14px 0 16px; }
.about-feats{ display:grid; gap:14px; margin-top:28px; }
.feat-card{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--radius-lg); padding:18px 20px; transition:transform .2s, box-shadow .2s; }
.feat-card:hover{ transform:translateX(4px); box-shadow:var(--shadow-card); }
.feat-ico{ color:var(--red); display:grid; place-items:center; flex:none; padding-top:3px; }
.feat-ico svg{ width:30px; height:30px; stroke-width:1.5; }
.feat-card h4{ font-size:16px; text-transform:uppercase; margin-bottom:4px; }
.feat-card p{ font-size:14.5px; color:var(--ink-2); }
@media(max-width:880px){ .about-split{ grid-template-columns:1fr; } .est-badge{ right:18px; } }

/* ============================================================
   FEATURE TRIO  (image-topped category cards)
   ============================================================ */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.trio-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden;
  transition:transform .25s, box-shadow .25s; display:flex; flex-direction:column; }
.trio-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.trio-card .ph{ aspect-ratio:16/10; border-radius:0; }
.trio-card .body{ padding:22px 24px 26px; }
.trio-card .k{ font-family:var(--display); font-weight:800; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.trio-card h3{ font-size:23px; text-transform:uppercase; margin:8px 0 10px; }
.trio-card p{ font-size:14.5px; color:var(--ink-2); }
@media(max-width:820px){ .trio{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* ============================================================
   PORTFOLIO  (big gradient category cards, numbered)
   ============================================================ */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px); }
.sec-head h2{ font-size:clamp(34px,4.8vw,64px); text-transform:uppercase; max-width:16ch; margin-top:16px; }

.portfolio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.pf-card{ position:relative; display:block; color:#fff; border-radius:var(--radius-xl); overflow:hidden;
  isolation:isolate; min-height:clamp(300px,32vw,420px); }
.pf-card .ph{ position:absolute; inset:0; border-radius:0; }
.pf-card::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(70,16,20,.18) 22%, rgba(50,10,14,.94) 100%); transition:background .35s; }
.pf-card:hover::after{ background:linear-gradient(180deg, rgba(158,31,44,.28) 0%, rgba(94,18,25,.95) 100%); }
.pf-tag{ position:absolute; z-index:2; top:20px; left:20px; background:rgba(255,255,255,.92); color:var(--ink);
  font-family:ui-monospace,monospace; font-size:12px; padding:7px 14px; border-radius:100px; display:flex; gap:8px; align-items:center; }
.pf-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); }
.pf-foot{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; }
.pf-foot .num{ font-family:var(--display); font-weight:800; font-size:13px; color:rgba(255,255,255,.66); letter-spacing:.08em; }
.pf-foot h3{ color:#fff; font-size:clamp(22px,2.4vw,30px); text-transform:uppercase; line-height:.98; margin-top:6px; }
.pf-foot .go{ width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55); display:grid; place-items:center; flex:none; font-size:18px; transition:.2s; }
.pf-card:hover .pf-foot .go{ background:#fff; color:var(--red); border-color:#fff; }
@media(max-width:880px){ .portfolio{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .portfolio{ grid-template-columns:1fr; } }

/* ============================================================
   PRODUCTS GRID  (featured / catalogue cards)
   ============================================================ */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); }
.prod-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s; }
.prod-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:var(--line-2); }
.prod-thumb{ position:relative; aspect-ratio:1/1; border-bottom:1px solid var(--line); }
.prod-thumb .ico{ position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(40px,5vw,64px); }
.prod-badge{ position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-family:var(--display);
  font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:var(--radius); }
.prod-card .body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.prod-card .cat{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.prod-card h3{ font-size:17px; text-transform:uppercase; margin:6px 0 3px; }
.prod-card .sub{ font-size:13.5px; color:var(--ink-3); }
.prod-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.stock{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px rgba(94,18,25,.12); }
@media(max-width:980px){ .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .prod-grid{ grid-template-columns:1fr; } }

/* ============================================================
   BRANDS CAROUSEL
   ============================================================ */
.brands{ background:var(--paper-2); border-block:1px solid var(--line); }
.brands .head{ text-align:center; margin-bottom:clamp(30px,4vw,46px); }
.brands .head h2{ font-size:clamp(28px,3.4vw,46px); text-transform:uppercase; margin-top:12px; }
.brands-rail{ display:flex; align-items:center; gap:14px; }
.brands-viewport{ overflow:hidden; flex:1; }
.brands-track{ display:flex; gap:14px; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.brand-cell{ flex:0 0 calc((100% - 4*14px)/5); aspect-ratio:16/8; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); display:grid; place-items:center; transition:.2s; }
.brand-cell:hover{ border-color:var(--red); transform:translateY(-3px); box-shadow:var(--shadow-card); }
.brand-cell .bn{ font-family:var(--display); font-weight:900; font-size:clamp(14px,1.4vw,18px); letter-spacing:.02em; color:var(--ink-2); text-transform:uppercase; }
.brand-cell:hover .bn{ color:var(--red); }
.rail-btn{ width:46px; height:46px; flex:none; border-radius:50%; border:1.5px solid var(--line-2); background:#fff;
  color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:18px; transition:.2s; }
.rail-btn:hover{ background:var(--red); color:#fff; border-color:var(--red); }
@media(max-width:880px){ .brand-cell{ flex-basis:calc((100% - 2*14px)/3); } }
@media(max-width:520px){ .brand-cell{ flex-basis:calc((100% - 14px)/2); } }

/* ============================================================
   DUO BANNER  (catalogue dark · partner gold)
   ============================================================ */
.duo{ display:grid; grid-template-columns:1fr 1fr; }
.duo-panel{ padding:clamp(32px,4.5vw,60px); display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,2.5vw,34px); align-items:center; }

/* magazine-style catalogue cover */
.cat-cover{ aspect-ratio:3/4; background:var(--paper); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:clamp(14px,1.4vw,20px) clamp(10px,1vw,14px); text-align:center; position:relative;
  overflow:hidden; box-shadow:0 16px 34px rgba(0,0,0,.32); }
.cat-cover::before{ content:""; position:absolute; inset:7px; border:1px solid var(--red-line); pointer-events:none; }
.cat-cover .cc-kick{ position:relative; font-family:var(--display); font-weight:800;
  font-size:clamp(7px,.62vw,9px); letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.cat-cover img{ position:relative; width:84%; height:auto; }
.cat-cover .cc-year{ position:relative; font-family:var(--display); font-weight:900;
  font-size:clamp(12px,1.1vw,16px); letter-spacing:.12em; color:var(--ink); }
.duo-dark{ background:var(--ink); color:#fff; }
.duo-red{ background:var(--red); color:#fff; }
.duo-panel .vis{ width:clamp(96px,11vw,150px); }
.duo-panel .vis .ph{ aspect-ratio:3/4; border-radius:var(--radius); border:1px solid rgba(255,255,255,.18); }
.duo-red .vis{ color:#fff; display:grid; place-items:center; }
.duo-red .vis svg{ width:clamp(56px,8vw,92px); height:auto; stroke-width:1.4; }
.duo-dark .vis svg{ width:clamp(56px,8vw,92px); height:auto; color:#fff; stroke-width:1.4; }
.duo-panel h3{ font-size:clamp(24px,2.6vw,34px); text-transform:uppercase; line-height:1; }
.duo-dark h3, .duo-red h3{ color:#fff; }
.duo-panel p{ margin:14px 0 22px; font-size:15px; max-width:34ch; }
.duo-dark p{ color:rgba(255,255,255,.78); }
.duo-red p{ color:rgba(255,255,255,.85); }
@media(max-width:820px){ .duo{ grid-template-columns:1fr; } }
@media(max-width:480px){ .duo-panel{ grid-template-columns:1fr; text-align:left; } }

/* ============================================================
   CONTACT CTA  (copy + contact card)
   ============================================================ */
.contact-cta{ background:var(--paper-2); }
.contact-cta .wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,5vw,72px); align-items:center; }
.contact-cta h2{ font-size:clamp(32px,4.4vw,58px); text-transform:uppercase; margin:16px 0 18px; max-width:14ch; }
.contact-cta .actions{ display:flex; gap:13px; flex-wrap:wrap; margin-top:28px; }
.contact-card{ position:relative; background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%); color:#fff;
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); border-top:3px solid var(--red);
  padding:clamp(30px,3vw,42px); display:grid; gap:0; box-shadow:var(--shadow-lift); overflow:hidden; }
.contact-card .cc-head{ margin-bottom:26px; }
.contact-card .row{ padding:18px 0; border-top:1px solid rgba(255,255,255,.1); }
.contact-card .row:first-of-type{ border-top:0; padding-top:0; }
.contact-card .row:last-of-type{ padding-bottom:0; }
.contact-card .row .kk{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#f0a79d; }
.contact-card .row .vv{ font-size:19px; font-weight:600; margin-top:8px; display:block; line-height:1.45; color:#fff; }
.contact-card .row .vv a{ transition:color .2s ease; }
.contact-card .row .vv a:hover{ color:#f4ddc8; }
@media(max-width:820px){ .contact-cta .wrap{ grid-template-columns:1fr; } }

/* ============================================================
   RED CTA BAND  (inner pages)
   ============================================================ */
.cta-red{ background:var(--red); color:#fff; text-align:center; }
.cta-red h2{ color:#fff; font-size:clamp(32px,4.6vw,62px); text-transform:uppercase; max-width:18ch; margin:14px auto 0; }
.cta-red p{ color:rgba(255,255,255,.88); margin:16px auto 0; max-width:46ch; }
.cta-red .actions{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* ============================================================
   PAGE HERO  (inner pages)
   ============================================================ */
.page-hero{ background:var(--navy); color:#fff; position:relative; overflow:hidden; padding-block:clamp(52px,7vw,96px); }
.page-hero::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.3px, transparent 1.3px); background-size:26px 26px; }
.page-hero .wrap{ position:relative; }
.crumb{ font-size:13px; color:rgba(255,255,255,.6); font-weight:600; letter-spacing:.02em; margin-bottom:18px; }
.crumb a:hover{ color:#fff; }
.crumb .sep{ margin-inline:9px; color:rgba(255,255,255,.3); }
.page-hero .eyebrow{ color:#f0a79d; } .page-hero .eyebrow::before{ background:#f0a79d; }
.page-hero h1{ color:#fff; font-size:clamp(40px,6vw,82px); text-transform:uppercase; line-height:.94; margin-top:14px; }
.page-hero .lead{ color:rgba(255,255,255,.78); margin-top:20px; max-width:58ch; }

/* ============================================================
   PROSE / GENERIC CONTENT
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,76px); align-items:center; }
.split.media-right{ direction:ltr; }
.split .ph{ aspect-ratio:5/4; border:1px solid var(--line); border-radius:var(--radius-xl); }
.split h2{ font-size:clamp(28px,3.4vw,46px); text-transform:uppercase; margin:14px 0 16px; }
.split p + p{ margin-top:14px; }
@media(max-width:880px){ .split{ grid-template-columns:1fr; } }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.stat-cell{ background:#fff; padding:clamp(24px,3vw,40px); }
.stat-cell .num{ font-family:var(--display); font-weight:900; font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-.03em; }
.stat-cell .num span{ color:var(--red); }
.stat-cell .lbl{ font-size:12.5px; color:var(--ink-3); margin-top:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:820px){ .stat-row{ grid-template-columns:1fr 1fr; } }

.timeline{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.tl-row{ background:#fff; padding:clamp(22px,2.6vw,34px); display:grid; grid-template-columns:160px 1fr; gap:clamp(20px,3vw,40px); align-items:start; }
.tl-row .yr{ font-family:var(--display); font-weight:900; font-size:clamp(24px,2.4vw,32px); color:var(--red); }
.tl-row h4{ font-size:18px; text-transform:uppercase; margin-bottom:6px; }
.tl-row p{ color:var(--ink-2); font-size:15px; }
@media(max-width:620px){ .tl-row{ grid-template-columns:1fr; gap:8px; } }

/* value props (3-up bordered) */
.vals{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; }
.val{ background:#fff; padding:clamp(28px,3vw,44px); border-top:3px solid transparent; transition:border-color .25s; }
.val:hover{ border-top-color:var(--red); }
.val .k{ font-family:var(--display); font-weight:800; font-size:12px; letter-spacing:.16em; color:var(--red); }
.val h3{ font-size:24px; text-transform:uppercase; margin:14px 0 11px; }
.val p{ color:var(--ink-2); font-size:15px; }
@media(max-width:820px){ .vals{ grid-template-columns:1fr; } }

/* steps (numbered process) */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); counter-reset:step; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:clamp(24px,2.6vw,32px); position:relative; }
.step .n{ font-family:var(--display); font-weight:900; font-size:46px; color:var(--red-tint); line-height:1; }
.step h4{ font-size:18px; text-transform:uppercase; margin:6px 0 8px; }
.step p{ font-size:14.5px; color:var(--ink-2); }
@media(max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* category section blocks (products page) */
.cat-block{ scroll-margin-top:120px; }
.cat-block + .cat-block{ margin-top:clamp(48px,6vw,84px); }
.cat-block .head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:26px; border-bottom:2px solid var(--ink); }
.cat-block .head .ix{ font-family:var(--display); font-weight:900; font-size:clamp(24px,2.6vw,34px); color:var(--red); }
.cat-block .head h2{ font-size:clamp(24px,2.8vw,38px); text-transform:uppercase; }
.cat-block .head .count{ margin-left:auto; font-size:13px; color:var(--ink-3); font-weight:600; }

/* category chips (products page nav) */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--line-2); border-radius:100px; color:var(--ink-2); transition:.2s; }
.chip:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* brands grid (brands page) */
.bgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,22px); }
.bgrid-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.bgrid-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); }
.bgrid-logo{ aspect-ratio:16/9; display:grid; place-items:center; border-bottom:1px solid var(--line); background:var(--paper-2); }
.bgrid-logo .bn{ font-family:var(--display); font-weight:900; font-size:clamp(18px,2vw,26px); text-transform:uppercase; color:var(--ink); }
.bgrid-card .body{ padding:18px 20px 20px; }
.bgrid-card .body .tag{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.bgrid-card .body p{ font-size:14px; color:var(--ink-2); margin-top:8px; }
@media(max-width:900px){ .bgrid{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .bgrid{ grid-template-columns:1fr; } }

/* form (contact / wholesale) */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.field input, .field select, .field textarea{ font-family:var(--body); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line-2); border-radius:var(--radius); padding:13px 15px; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-tint); }
.field textarea{ resize:vertical; min-height:130px; }
@media(max-width:620px){ .form-grid{ grid-template-columns:1fr; } }

.info-list{ display:grid; gap:22px; }
.info-list .row .kk{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.info-list .row .vv{ font-size:17px; margin-top:6px; display:block; line-height:1.5; }
.info-list .row .vv a:hover{ color:var(--red); }

.note-card{ background:var(--navy); color:#fff; border-radius:var(--radius-xl); padding:clamp(26px,3vw,38px); }
.note-card h3{ color:#fff; font-size:22px; text-transform:uppercase; margin-bottom:12px; }
.note-card p{ color:rgba(255,255,255,.78); font-size:15px; }
.note-card ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.note-card li{ display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:15px; color:rgba(255,255,255,.86); }
.note-card li::before{ content:"→"; color:#f0a79d; font-weight:700; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.7); padding-block:clamp(56px,7vw,88px) 32px; }
.site-footer .brand-sub{ color:rgba(255,255,255,.55); }
.site-footer .brand-name{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:clamp(28px,4vw,56px); }
.site-footer h4{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.site-footer ul a{ color:rgba(255,255,255,.7); font-size:14.5px; }
.site-footer ul a:hover{ color:#fff; }
.site-footer ul li{ font-size:14.5px; line-height:1.5; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  font-size:13px; color:rgba(255,255,255,.5); }
.footer-bottom .pill{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.24); padding:8px 16px; border-radius:100px; }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PHOTOS  (real imagery dropped into .ph slots)
   ============================================================ */
.ph.real{ background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.ph.real .ph-label{ display:none; }
.pf-card:hover .ph.real{ transform:scale(1.07); }
.trio-card:hover .ph.real{ transform:scale(1.05); }
.prod-card:hover .prod-thumb .ph.real{ transform:scale(1.06); }
.prod-thumb{ overflow:hidden; }
.prod-thumb .ph{ position:absolute; inset:0; border-radius:0; }
/* hero ken-burns */
.hero-slide.on .ph.real{ animation:kenburns 9s ease-out both; }
@keyframes kenburns{ from{ transform:scale(1.03); } to{ transform:scale(1.13); } }
@media(prefers-reduced-motion:reduce){ .hero-slide.on .ph.real{ animation:none; } .ph.real{ transition:none; } }

/* ============================================================
   CERTIFICATIONS ROW
   ============================================================ */
.cert-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
.cert-cell{ background:#fff; padding:clamp(28px,3vw,40px) clamp(22px,2.2vw,30px); position:relative; transition:background .25s; }
.cert-cell::before{ content:""; position:absolute; left:0; top:0; width:3px; height:0; background:var(--red); transition:height .3s cubic-bezier(.2,.7,.3,1); }
.cert-cell:hover{ background:var(--paper-2); }
.cert-cell:hover::before{ height:100%; }
.cert-cell a{ display:block; color:inherit; }
.cert-cell .cm{ color:var(--red); margin-bottom:18px; line-height:0; }
.cert-cell .cm svg{ width:34px; height:34px; stroke-width:1.5; }
.cert-cell .cn{ font-family:var(--display); font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.01em; }
.cert-cell .cd{ font-size:13px; color:var(--ink-3); margin-top:6px; }
@media(max-width:760px){ .cert-row{ grid-template-columns:1fr 1fr; } }

/* markets list */
.markets{ display:flex; flex-wrap:wrap; gap:10px; }
.market-pill{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.02em;
  padding:10px 18px; border:1px solid var(--line-2); border-radius:100px; color:var(--ink-2); background:#fff; transition:.2s; }
.market-pill:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* live map */
.map-embed{ border:0; width:100%; aspect-ratio:21/8; border-radius:var(--radius-xl); display:block; filter:grayscale(.15) contrast(1.04); }
@media(max-width:600px){ .map-embed{ aspect-ratio:4/3; } }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ============================================================
   PRODUCT DETAIL (data-driven)
   ============================================================ */
.pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
@media(max-width:820px){ .pd-grid{ grid-template-columns:1fr; } }
.pd-img{ aspect-ratio:1/1; border:1px solid var(--line); border-radius:var(--radius-xl); background-size:cover; background-position:center; background-repeat:no-repeat; }
.pd-vn{ font-family:var(--display); font-weight:800; color:var(--red); letter-spacing:.01em; text-transform:uppercase; font-size:15px; margin-top:8px; }
.pd-meta{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 4px; }
.pd-tag{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border-radius:100px; border:1px solid var(--line-2); color:var(--ink-2); }
.pd-tag.is-stock{ border-color:transparent; background:var(--red-tint); color:var(--red-deep); display:inline-flex; align-items:center; gap:7px; }
.pd-tag.is-stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:#2ea44f; }
.pd-desc{ margin-top:20px; }
.pd-specs{ list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line); }
.pd-specs li{ display:grid; grid-template-columns:170px 1fr; gap:16px; padding:13px 2px; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink-2); }
.pd-specs .k{ color:var(--ink-3); font-weight:700; font-family:var(--display); text-transform:uppercase; font-size:11.5px; letter-spacing:.1em; align-self:center; }
@media(max-width:520px){ .pd-specs li{ grid-template-columns:1fr; gap:2px; } }
a.prod-card{ color:inherit; }