/* ════════════════════════════════════════════════════════════════
VISHAL GLOBAL EXPORTS — DESIGN SYSTEM
Visual language: export manifest / customs ledger / ink stamp
════════════════════════════════════════════════════════════════ */
/* Fonts are loaded via + stylesheet in each page for faster first paint. */
:root{
/* ── Color tokens ── */
--ink: #0F1F38;
--ink-2: #1B3A63;
--ink-3: #14294A;
--paper: #FBFAF6;
--paper-deep: #F2ECD8;
--gold: #C8973C;
--gold-deep: #A87425;
--gold-pale: #E9D3A3;
--gold-on-ink: #D9A94E;
--gold-text: #8A5E1C; /* WCAG-AA gold for small text on paper (5.4:1) */
--error: #9B2C2C;
--charcoal: #2B2A26;
--charcoal-soft: #5C5A50;
--line: #DDD6C0;
--line-on-ink: rgba(255,255,255,0.16);
--white: #FFFFFF;
--success: #2F6B4F;
/* ── Type tokens ── */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
/* ── Spacing / layout ── */
--container: 1180px;
--container-narrow: 760px;
--radius-sm: 3px;
--radius-md: 6px;
}
/* ════════════════════════════════════════════════════════════════
RESET & BASE
════════════════════════════════════════════════════════════════ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
font-family: var(--font-body);
color: var(--charcoal);
background: var(--paper);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: inherit; }
/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
outline: 2px solid var(--gold);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.l-container{
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
}
.l-container--narrow{ max-width: var(--container-narrow); }
.l-section{ padding: 88px 0; }
.l-section--tight{ padding: 56px 0; }
.l-section--ink{ background: var(--ink); color: var(--white); }
.l-section--deep{ background: var(--paper-deep); }
@media (max-width: 720px){
.l-section{ padding: 56px 0; }
.l-section--tight{ padding: 36px 0; }
}
/* ════════════════════════════════════════════════════════════════
TYPOGRAPHY
════════════════════════════════════════════════════════════════ */
.t-eyebrow{
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-deep);
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.t-eyebrow::before{
content: '';
width: 22px;
height: 1px;
background: var(--gold-deep);
display: inline-block;
}
.l-section--ink .t-eyebrow,
.t-eyebrow--on-ink{ color: var(--gold-on-ink); }
.l-section--ink .t-eyebrow::before,
.t-eyebrow--on-ink::before{ background: var(--gold-on-ink); }
.t-h1{
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(36px, 5.2vw, 60px);
line-height: 1.08;
letter-spacing: -0.01em;
color: inherit;
}
.t-h2{
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(28px, 3.6vw, 40px);
line-height: 1.15;
letter-spacing: -0.005em;
}
.t-h3{
font-family: var(--font-display);
font-weight: 600;
font-size: 23px;
line-height: 1.3;
}
.t-lede{
font-size: 19px;
line-height: 1.65;
color: var(--charcoal-soft);
max-width: 56ch;
}
.l-section--ink .t-lede{ color: rgba(255,255,255,0.72); }
.t-body{ font-size: 16px; line-height: 1.7; color: var(--charcoal-soft); }
.t-mono{ font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }
/* ════════════════════════════════════════════════════════════════
BUTTONS
════════════════════════════════════════════════════════════════ */
.c-btn{
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 14px 26px;
border-radius: var(--radius-sm);
border: 1.5px solid transparent;
transition: all 0.18s ease;
white-space: nowrap;
}
.c-btn--gold{
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
.c-btn--gold:hover{ background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); }
.c-btn--outline-ink{
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.c-btn--outline-ink:hover{ background: var(--ink); color: var(--white); }
.c-btn--outline-white{
background: transparent;
color: var(--white);
border-color: rgba(255,255,255,0.5);
}
.c-btn--outline-white:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }
.c-btn--ghost{
background: transparent;
color: var(--ink);
border-color: transparent;
padding-left: 0;
padding-right: 0;
}
.c-btn--ghost:hover{ color: var(--gold-deep); }
.c-btn--ghost::after{ content: '→'; transition: transform 0.18s ease; }
.c-btn--ghost:hover::after{ transform: translateX(3px); }
/* ════════════════════════════════════════════════════════════════
MANIFEST STRIP — signature device, fact bar under nav
════════════════════════════════════════════════════════════════ */
.c-manifest{
background: var(--ink-3);
border-top: 1px solid var(--line-on-ink);
border-bottom: 1px solid var(--line-on-ink);
overflow-x: auto;
}
.c-manifest__row{
display: flex;
align-items: stretch;
max-width: var(--container);
margin: 0 auto;
}
.c-manifest__item{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.78);
padding: 10px 22px;
border-right: 1px solid var(--line-on-ink);
white-space: nowrap;
display: flex;
align-items: center;
gap: 7px;
}
.c-manifest__item:first-child{ padding-left: 28px; }
.c-manifest__item:last-child{ border-right: none; }
.c-manifest__item b{ color: var(--gold-on-ink); font-weight: 500; }
@media (max-width: 720px){
.c-manifest__item{ padding: 9px 14px; font-size: 10.5px; }
}
/* ════════════════════════════════════════════════════════════════
NAVIGATION
════════════════════════════════════════════════════════════════ */
.c-nav{
background: var(--ink);
position: sticky;
top: 0;
z-index: 100;
}
.c-nav__row{
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.c-nav__brand{
display: flex;
align-items: center;
gap: 11px;
}
.c-nav__brand img{ height: 34px; width: auto; }
.c-nav__brand-text{
display: flex;
flex-direction: column;
line-height: 1.15;
}
.c-nav__brand-text strong{
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--white);
letter-spacing: 0.01em;
white-space: nowrap;
}
.c-nav__brand-text span{
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.16em;
color: var(--gold-on-ink);
text-transform: uppercase;
white-space: nowrap;
}
.c-nav__links{
display: flex;
align-items: center;
gap: 36px;
}
.c-nav__links a{
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255,255,255,0.72);
transition: color 0.15s ease;
position: relative;
padding: 4px 0;
}
.c-nav__links a:hover{ color: var(--white); }
.c-nav__links a.is-active{ color: var(--gold-on-ink); }
.c-nav__links a.is-active::after{
content: '';
position: absolute;
left: 0; right: 0; bottom: -3px;
height: 2px;
background: var(--gold);
}
.c-nav__cta{
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
background: var(--gold);
padding: 10px 20px;
border-radius: var(--radius-sm);
transition: background 0.15s ease;
}
.c-nav__cta:hover{ background: var(--gold-deep); }
.c-nav__burger{
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 8px;
}
.c-nav__burger span{
width: 22px; height: 2px;
background: var(--white);
display: block;
}
@media (max-width: 900px){
.c-nav__links{
position: fixed;
top: 76px; left: 0; right: 0; bottom: 0;
background: var(--ink);
flex-direction: column;
align-items: flex-start;
padding: 28px;
gap: 22px;
transform: translateX(100%);
transition: transform 0.25s ease;
overflow-y: auto;
}
.c-nav__links.is-open{ transform: translateX(0); }
.c-nav__links a{ font-size: 15px; }
.c-nav__burger{ display: flex; flex-shrink: 0; }
.c-nav__cta{ display: none; }
.c-nav__links .c-nav__cta{ display: inline-flex; margin-top: 10px; }
}
/* Narrow phones: brand + language switcher + burger all fight for the
same 76px-tall row. Shrink them so nothing wraps or overflows. */
@media (max-width: 480px){
.c-nav__row{ height: 64px; }
.c-nav__brand{ gap: 8px; }
.c-nav__brand img{ height: 26px; }
.c-nav__brand-text strong{ font-size: 14px; }
.c-nav__brand-text span{ font-size: 7.5px; letter-spacing: 0.1em; }
.c-nav__burger{ padding: 6px; }
.c-nav__burger span{ width: 19px; }
.c-nav__links{ top: 64px; }
}
/* ════════════════════════════════════════════════════════════════
HERO
════════════════════════════════════════════════════════════════ */
.c-hero{
background:
radial-gradient(ellipse 900px 500px at 85% -10%, rgba(200,151,60,0.14), transparent 60%),
linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
color: var(--white);
padding: 84px 0 76px;
position: relative;
overflow: hidden;
}
.c-hero__grid{
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: center;
}
.c-hero__actions{
display: flex;
gap: 14px;
margin-top: 36px;
flex-wrap: wrap;
}
.c-hero__art{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.c-hero__art img{
max-width: 340px;
filter: drop-shadow(0 24px 48px rgba(0,0,0,0.35));
}
.c-hero__ring{
position: absolute;
width: 420px; height: 420px;
border: 1px dashed rgba(200,151,60,0.3);
border-radius: 50%;
}
@media (max-width: 900px){
.c-hero__grid{ grid-template-columns: 1fr; text-align: left; }
.c-hero__art{ display: none; }
}
/* ════════════════════════════════════════════════════════════════
PAGE HEADER (for inner pages — About, Products, etc.)
════════════════════════════════════════════════════════════════ */
.c-pagehead{
background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
color: var(--white);
padding: 56px 0 52px;
}
/* ════════════════════════════════════════════════════════════════
MANIFEST LINE-ITEM CARDS (products)
════════════════════════════════════════════════════════════════ */
.c-lineitem{
display: grid;
grid-template-columns: 110px 1fr;
gap: 28px;
padding: 32px 0;
border-bottom: 1px solid var(--line);
}
.c-lineitem:first-child{ border-top: 1px solid var(--line); }
.c-lineitem__code{
font-family: var(--font-mono);
font-size: 12px;
color: var(--gold-deep);
letter-spacing: 0.04em;
padding-top: 4px;
}
.c-lineitem__code span{
display: block;
font-size: 10px;
color: var(--charcoal-soft);
margin-top: 4px;
letter-spacing: 0.06em;
}
.c-lineitem__body{ display: grid; gap: 14px; }
.c-lineitem__head{
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
}
.c-lineitem__specs{
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 4px;
}
.c-lineitem__spec{
font-family: var(--font-mono);
font-size: 12px;
color: var(--charcoal-soft);
}
.c-lineitem__spec b{ color: var(--charcoal); font-weight: 600; }
@media (max-width: 640px){
.c-lineitem{ grid-template-columns: 1fr !important; gap: 10px; }
}
/* ════════════════════════════════════════════════════════════════
CARDS — generic content cards (why-choose-us, etc.)
════════════════════════════════════════════════════════════════ */
.c-cardgrid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.c-card{
background: var(--paper);
padding: 36px 30px;
}
.c-card__num{
font-family: var(--font-mono);
font-size: 12px;
color: var(--gold-deep);
letter-spacing: 0.06em;
margin-bottom: 18px;
display: block;
}
.c-card__title{
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.c-card__desc{
font-size: 14.5px;
color: var(--charcoal-soft);
line-height: 1.65;
}
/* ════════════════════════════════════════════════════════════════
CTA BAND
════════════════════════════════════════════════════════════════ */
.c-ctaband{
background: var(--ink);
color: var(--white);
padding: 64px 0;
text-align: center;
}
.c-ctaband .t-h2{ margin-bottom: 14px; }
.c-ctaband__actions{
display: flex;
gap: 14px;
justify-content: center;
margin-top: 30px;
flex-wrap: wrap;
}
/* ════════════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════════════ */
.c-footer{
background: var(--ink);
color: rgba(255,255,255,0.6);
padding: 64px 0 0;
}
.c-footer__grid{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
gap: 40px;
padding-bottom: 48px;
border-bottom: 1px solid var(--line-on-ink);
}
.c-footer__brand{ display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.c-footer__brand img{ height: 28px; }
.c-footer__brand strong{ font-family: var(--font-display); color: var(--white); font-size: 16px; }
.c-footer p{ font-size: 13.5px; line-height: 1.7; max-width: 32ch; }
.c-footer__heading{
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-on-ink);
margin-bottom: 16px;
display: block;
}
.c-footer__links li{ margin-bottom: 10px; }
.c-footer__links a{ font-size: 13.5px; transition: color 0.15s ease; }
.c-footer__links a:hover{ color: var(--white); }
.c-footer__contact li{ font-size: 13.5px; margin-bottom: 12px; line-height: 1.6; }
.c-footer__contact b{ display: block; color: rgba(255,255,255,0.8); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; margin-bottom: 3px; }
.c-footer__bottom{
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px 0;
font-family: var(--font-mono);
font-size: 11.5px;
flex-wrap: wrap;
gap: 10px;
}
.c-footer__bottom a{ transition: color 0.15s ease; }
.c-footer__bottom a:hover{ color: var(--white); }
@media (max-width: 860px){
.c-footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
.c-footer__grid{ grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════
FORMS (Contact page)
════════════════════════════════════════════════════════════════ */
.c-field{ margin-bottom: 22px; }
.c-field label{
display: block;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--charcoal-soft);
margin-bottom: 8px;
}
.c-field input, .c-field textarea, .c-field select{
width: 100%;
padding: 13px 15px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--charcoal);
font-size: 15px;
transition: border-color 0.15s ease;
}
.c-field input:focus, .c-field textarea:focus, .c-field select:focus{
border-color: var(--gold);
outline: none;
}
.c-field textarea{ resize: vertical; min-height: 130px; }
.c-field--row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; }
.c-field--row > *{ min-width: 0; }
@media (max-width: 600px){ .c-field--row{ grid-template-columns: 1fr; } }
/* ════════════════════════════════════════════════════════════════
UTILITY
════════════════════════════════════════════════════════════════ */
.u-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; min-width: 0; }
.u-grid-2 > *{ min-width: 0; }
@media (max-width: 860px){ .u-grid-2{ grid-template-columns: 1fr; gap: 32px; } }
.u-mt-sm{ margin-top: 16px; } .u-mt-md{ margin-top: 32px; } .u-mt-lg{ margin-top: 56px; }
.u-center{ text-align: center; margin-left: auto; margin-right: auto; }
.u-divider--ink{ background: var(--line-on-ink); }
.c-imgframe{
border: 1px solid var(--line);
padding: 10px;
background: var(--white);
}
.c-imgframe img{
width: 100%;
height: auto;
display: block;
background: linear-gradient(150deg, #0F1F38 0%, #1B3A63 100%);
}
.c-imgframe figcaption{
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.05em;
color: var(--charcoal-soft);
text-transform: uppercase;
padding: 10px 4px 2px;
}
.c-tag{
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 11px;
border: 1px solid var(--gold);
color: var(--gold-deep);
border-radius: var(--radius-sm);
}
.c-banner{
background: var(--paper-deep);
border: 1px solid var(--line);
padding: 20px 24px;
border-radius: var(--radius-md);
font-size: 14.5px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.c-banner b{ color: var(--ink); }
/* legal page typography */
.c-legal h2{ font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 36px 0 12px; color: var(--ink); }
.c-legal h2:first-child{ margin-top: 0; }
.c-legal p{ font-size: 15px; line-height: 1.75; color: var(--charcoal-soft); margin-bottom: 14px; }
/* whatsapp floating button */
.c-whatsapp-float{
position: fixed;
bottom: 26px;
right: 26px;
width: 58px; height: 58px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
z-index: 200;
transition: transform 0.2s ease;
}
.c-whatsapp-float:hover{ transform: scale(1.08); }
.c-whatsapp-float svg{ width: 28px; height: 28px; }
/* ════════════════════════════════════════════════════════════════
ANIMATIONS — Scroll reveals, entrances, hover enhancements
════════════════════════════════════════════════════════════════ */
/* ── KEYFRAMES ── */
@keyframes fadeUp{
from{ opacity:0; transform:translateY(28px); }
to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{
from{ opacity:0; }
to{ opacity:1; }
}
@keyframes slideInLeft{
from{ opacity:0; transform:translateX(-36px); }
to{ opacity:1; transform:translateX(0); }
}
@keyframes slideInRight{
from{ opacity:0; transform:translateX(36px); }
to{ opacity:1; transform:translateX(0); }
}
@keyframes scaleIn{
from{ opacity:0; transform:scale(0.88); }
to{ opacity:1; transform:scale(1); }
}
@keyframes drawLine{
from{ width:0; }
to{ width:22px; }
}
@keyframes pulseGlow{
0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,0.45); }
50%{ box-shadow:0 0 0 14px rgba(37,211,102,0); }
}
@keyframes heroGradient{
0%{ background-position:0% 50%; }
50%{ background-position:100% 50%; }
100%{ background-position:0% 50%; }
}
@keyframes ringPulse{
0%,100%{ opacity:0.3; transform:scale(1); }
50%{ opacity:0.12; transform:scale(1.06); }
}
@keyframes numberCount{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:translateY(0); }
}
@keyframes cardShine{
0%{ left:-100%; }
100%{ left:200%; }
}
/* ── SCROLL-REVEAL BASE (hidden until observed) ── */
.reveal{
opacity:0;
transform:translateY(28px);
transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible{
opacity:1;
transform:translateY(0);
}
/* Variants */
.reveal--left{ transform:translateX(-36px) translateY(0); }
.reveal--left.is-visible{ transform:translateX(0) translateY(0); }
.reveal--right{ transform:translateX(36px) translateY(0); }
.reveal--right.is-visible{ transform:translateX(0) translateY(0); }
.reveal--scale{ transform:scale(0.88); }
.reveal--scale.is-visible{ transform:scale(1); }
/* Stagger delays (applied via JS data-delay or CSS nth-child) */
.reveal--d1{ transition-delay:0.08s; }
.reveal--d2{ transition-delay:0.16s; }
.reveal--d3{ transition-delay:0.24s; }
.reveal--d4{ transition-delay:0.32s; }
.reveal--d5{ transition-delay:0.40s; }
.reveal--d6{ transition-delay:0.48s; }
/* ── HERO ENTRANCE ── */
.c-hero .t-eyebrow{
animation: fadeIn 0.6s 0.1s both;
}
.c-hero .t-h1{
animation: fadeUp 0.8s 0.2s cubic-bezier(0.16,1,0.3,1) both;
}
.c-hero .t-lede{
animation: fadeUp 0.8s 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
.c-hero__actions{
animation: fadeUp 0.8s 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.c-hero__art{
animation: fadeIn 1s 0.5s both;
}
.c-hero__ring{
animation: ringPulse 4s ease-in-out infinite;
}
/* ── PAGE HEADER ENTRANCE ── */
.c-pagehead .t-eyebrow{ animation: fadeIn 0.5s 0.1s both; }
.c-pagehead .t-h1{ animation: fadeUp 0.7s 0.15s cubic-bezier(0.16,1,0.3,1) both; }
.c-pagehead .t-lede{ animation: fadeUp 0.7s 0.3s cubic-bezier(0.16,1,0.3,1) both; }
/* ── EYEBROW LINE DRAW-IN ── */
.t-eyebrow.reveal.is-visible::before{
animation: drawLine 0.5s 0.1s cubic-bezier(0.16,1,0.3,1) both;
}
/* ── CARD HOVER ENHANCEMENTS ── */
.c-card{
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
position:relative;
overflow:hidden;
}
.c-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 32px rgba(0,0,0,0.08);
}
.c-card::after{
content:'';
position:absolute;
top:0; left:-100%;
width:50%; height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
transition: none;
}
.c-card:hover::after{
animation: cardShine 0.6s ease;
}
/* ── LINE ITEM HOVER ── */
.c-lineitem{
transition: background 0.2s ease, padding-left 0.25s ease;
}
.c-lineitem:hover{
background: rgba(200,151,60,0.04);
padding-left: 8px;
}
/* ── BUTTON HOVER GLOW ── */
.c-btn--gold{
transition: all 0.2s ease, box-shadow 0.3s ease;
}
.c-btn--gold:hover{
box-shadow: 0 6px 20px rgba(200,151,60,0.35);
}
/* ── IMAGE FRAME HOVER ── */
.c-imgframe{
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.c-imgframe:hover{
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}
.c-imgframe img{
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.c-imgframe:hover img{
transform: scale(1.03);
}
/* ── TAG HOVER ── */
.c-tag{
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.c-tag:hover{
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
/* ── WHATSAPP FLOAT PULSE ── */
.c-whatsapp-float{
animation: pulseGlow 2.5s ease-in-out infinite;
}
/* ── CTA BAND SEPARATOR GLOW ── */
.c-ctaband{
position:relative;
overflow:hidden;
}
.c-ctaband::before{
content:'';
position:absolute;
top:-1px; left:0; right:0;
height:2px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
opacity:0.5;
}
/* ── SMOOTH NAV SHADOW ON SCROLL ── */
.c-nav{
transition: box-shadow 0.3s ease;
}
.c-nav.is-scrolled{
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
/* ── FOOTER LINK UNDERLINE SLIDE ── */
.c-footer__links a{
position:relative;
}
.c-footer__links a::after{
content:'';
position:absolute;
bottom:-2px; left:0;
width:0; height:1px;
background:var(--gold);
transition:width 0.25s ease;
}
.c-footer__links a:hover::after{
width:100%;
}
/* ── NAV LINK UNDERLINE SLIDE ── */
.c-nav__links a:not(.is-active)::after{
content:'';
position:absolute;
left:0; right:0; bottom:-3px;
height:2px;
background:var(--gold);
transform:scaleX(0);
transition:transform 0.25s ease;
}
.c-nav__links a:not(.is-active):hover::after{
transform:scaleX(1);
}
/* ── FORM FIELD FOCUS ANIMATION ── */
.c-field input:focus, .c-field textarea:focus, .c-field select:focus{
box-shadow: 0 0 0 3px rgba(200,151,60,0.15);
transform: translateY(-1px);
transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* ── BANNER ENTRANCE ── */
.c-banner.reveal.is-visible{
animation: slideInLeft 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
/* ── RESPECT REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce){
.reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
.c-hero .t-eyebrow, .c-hero .t-h1, .c-hero .t-lede, .c-hero__actions,
.c-hero__art, .c-pagehead .t-eyebrow, .c-pagehead .t-h1, .c-pagehead .t-lede{
animation:none !important;
}
.c-hero__ring{ animation:none !important; }
.c-whatsapp-float{ animation:none !important; }
}
/* ════════════════════════════════════════════════════════════════
ELEVATION — Stats, Process Timeline, Quote Band, Markets
════════════════════════════════════════════════════════════════ */
/* ── HERO STATS ROW ── */
.c-herostats{
display:flex; gap:0; margin-top:44px;
border-top:1px solid rgba(255,255,255,0.14);
}
.c-herostat{ padding:18px 32px 0 0; margin-right:32px; }
.c-herostat b{
display:block; font-family:var(--font-display); font-size:30px;
font-weight:600; color:var(--gold); line-height:1.1;
}
.c-herostat span{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
text-transform:uppercase; color:rgba(255,255,255,0.55);
}
@media(max-width:640px){ .c-herostat{ padding-right:18px; margin-right:18px; } .c-herostat b{ font-size:24px; } }
/* ── FLOATING CREDENTIAL CHIPS ON HERO ART ── */
.c-hero__art{ position:relative; }
.c-herochip{
position:absolute; background:var(--ink-3);
border:1px solid rgba(200,151,60,0.4); border-radius:30px;
font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
color:var(--gold); padding:7px 14px; white-space:nowrap;
box-shadow:0 8px 24px rgba(0,0,0,0.3);
animation:chipFloat 5s ease-in-out infinite;
}
.c-herochip--1{ top:6%; left:-4%; animation-delay:0s; }
.c-herochip--2{ top:22%; right:-6%; animation-delay:1.2s; }
.c-herochip--3{ bottom:18%; left:-8%; animation-delay:2.4s; }
.c-herochip--4{ bottom:4%; right:-2%; animation-delay:3.6s; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media(max-width:900px){ .c-herochip{ display:none; } }
/* ── PROCESS TIMELINE ── */
.c-process{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; position:relative; margin-top:56px; }
.c-process::before{
content:""; position:absolute; top:26px; left:8.33%; right:8.33%;
height:1px; background:linear-gradient(90deg, var(--gold-pale), var(--gold), var(--gold-pale));
}
.c-step{ text-align:center; padding:0 10px; position:relative; }
.c-step__num{
width:52px; height:52px; border-radius:50%;
background:var(--paper); border:2px solid var(--gold);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--gold-deep);
margin:0 auto 16px; position:relative; z-index:1;
transition:all 0.25s ease;
}
.c-step:hover .c-step__num{ background:var(--gold); color:var(--ink); transform:scale(1.1); }
.c-step__title{ font-family:var(--font-display); font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.c-step__desc{ font-size:12.5px; line-height:1.55; color:var(--charcoal-soft); }
@media(max-width:900px){
.c-process{ grid-template-columns:repeat(3,1fr); gap:32px 0; }
.c-process::before{ display:none; }
}
@media(max-width:520px){ .c-process{ grid-template-columns:repeat(2,1fr); } }
/* ── FOUNDER QUOTE BAND ── */
.c-quoteband{
background:linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 100%);
color:var(--white); padding:72px 0;
}
.c-quoteband__grid{ display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center; max-width:900px; margin:0 auto; }
.c-quoteband__photo{
width:130px; height:130px; border-radius:50%; object-fit:cover; object-position:center top;
border:3px solid var(--gold); box-shadow:0 12px 32px rgba(0,0,0,0.35);
}
.c-quoteband__text{
font-family:var(--font-display); font-style:italic;
font-size:clamp(19px,2.6vw,24px); line-height:1.6; color:rgba(255,255,255,0.92);
}
.c-quoteband__attr{
margin-top:16px; font-family:var(--font-mono); font-style:normal;
font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold);
}
.c-quoteband__attr a{ color:inherit; border-bottom:1px solid rgba(200,151,60,0.4); padding-bottom:1px; transition:border-color 0.2s; }
.c-quoteband__attr a:hover{ border-color:var(--gold); }
@media(max-width:640px){
.c-quoteband__grid{ grid-template-columns:1fr; text-align:center; gap:24px; }
.c-quoteband__photo{ margin:0 auto; }
}
/* ── GLOBAL MARKETS ── */
.c-markets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:48px; }
.c-market{ background:var(--paper); padding:26px 24px; transition:background 0.2s ease; }
.c-market:hover{ background:var(--paper-deep); }
.c-market__region{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em;
text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px; display:block;
}
.c-market__countries{ font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.45; margin-bottom:6px; }
.c-market__focus{ font-size:12.5px; color:var(--charcoal-soft); }
/* ── PRODUCT THUMBNAILS ON LINE ITEMS ── */
.c-lineitem--photo{ grid-template-columns:110px 96px 1fr; }
.c-lineitem__thumb{
width:96px; height:96px; object-fit:cover; border-radius:var(--radius-md);
border:1px solid var(--line); background:linear-gradient(150deg,#0F1F38,#1B3A63);
}
@media(max-width:640px){
.c-lineitem--photo{ grid-template-columns:1fr !important; }
.c-lineitem__thumb{ width:100%; height:150px; }
}
/* ════════════════════════════════════════════════════════════════
PRODUCT SUB-GROUPS (tiers within a category)
════════════════════════════════════════════════════════════════ */
.c-prodgroup{
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
margin-top: 52px;
}
.c-prodgroup::after{
content: '';
flex: 1 1 40px;
height: 1px;
background: var(--line);
transform: translateY(-4px);
}
.c-prodgroup__label{
font-family: var(--font-display);
font-size: 21px;
font-weight: 600;
color: var(--ink);
margin: 0;
}
.c-prodgroup__note{
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--charcoal-soft);
}
.c-prodgroup__items .c-lineitem:first-child{ border-top: none; }
/* GI-registered tag variant */
.c-tag--gi{
background: var(--ink);
border-color: var(--ink);
color: var(--gold-pale);
}
.c-tag--gi:hover{
background: var(--ink-2);
border-color: var(--ink-2);
color: var(--gold-pale);
}
/* ════════════════════════════════════════════════════════════════
RFQ BUILDER (quote.html) — live manifest draft
════════════════════════════════════════════════════════════════ */
.c-rfq{ display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: flex-start; }
@media (max-width: 900px){ .c-rfq{ grid-template-columns: 1fr; } }
.c-rfq__doc{
position: sticky;
top: 96px;
background: var(--white);
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
box-shadow: 0 10px 34px rgba(15,31,56,0.08);
overflow: hidden;
}
.c-rfq__doc-head{
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: var(--ink);
color: var(--white);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.c-rfq__doc-head b{ color: var(--gold-pale); }
.c-rfq__doc-body{
padding: 22px 24px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.9;
color: var(--charcoal);
white-space: pre-wrap;
word-break: break-word;
min-height: 300px;
}
.c-rfq__doc-body.is-empty{ color: var(--charcoal-soft); opacity: 0.55; }
.c-rfq__doc-foot{
padding: 16px 20px 20px;
border-top: 1.5px dashed var(--line);
display: grid;
gap: 10px;
}
.c-rfq__doc-foot .c-btn{ width: 100%; justify-content: center; text-align: center; display: inline-flex; }
.c-rfq__stamp{
position: absolute;
right: 18px;
top: 62px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--gold-deep);
border: 1.5px solid var(--gold-deep);
border-radius: 3px;
padding: 4px 8px;
transform: rotate(6deg);
opacity: 0.75;
pointer-events: none;
text-transform: uppercase;
}
.c-rfq__doc{ position: sticky; }
.c-rfq__docwrap{ position: relative; }
@media (max-width: 900px){ .c-rfq__doc{ position: static; } }
.c-rfq legend{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-deep);
padding: 0 6px 0 0;
}
.c-rfq fieldset{
border: none;
border-top: 1.5px solid var(--line);
margin: 0 0 8px;
padding: 20px 0 6px;
}
.c-rfq fieldset:first-of-type{ border-top: none; padding-top: 0; }
/* ════════════════════════════════════════════════════════════════
FAQ ACCORDION (faq.html)
════════════════════════════════════════════════════════════════ */
.c-faq{ display: grid; gap: 0; border-top: 1.5px solid var(--line); }
.c-faq details{ border-bottom: 1.5px solid var(--line); }
.c-faq summary{
list-style: none;
cursor: pointer;
display: grid;
grid-template-columns: 76px 1fr 28px;
gap: 18px;
align-items: baseline;
padding: 22px 0;
}
.c-faq summary::-webkit-details-marker{ display: none; }
.c-faq__num{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
color: var(--charcoal-soft);
}
.c-faq__q{
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
color: var(--ink);
line-height: 1.35;
}
.c-faq__icon{
font-family: var(--font-mono);
font-size: 18px;
color: var(--gold-deep);
text-align: right;
transition: transform 0.2s ease;
}
.c-faq details[open] .c-faq__icon{ transform: rotate(45deg); }
.c-faq__a{
padding: 0 28px 26px 94px;
max-width: 70ch;
}
.c-faq__a p{ margin-bottom: 10px; }
.c-faq__a p:last-child{ margin-bottom: 0; }
@media (max-width: 640px){
.c-faq summary{ grid-template-columns: 1fr 24px; }
.c-faq__num{ display: none; }
.c-faq__a{ padding-left: 0; }
}
/* ════════════════════════════════════════════════════════════════
CREDENTIAL VERIFICATION LINKS (certifications.html)
════════════════════════════════════════════════════════════════ */
.c-verify{ display: grid; gap: 0; border-top: 1.5px solid var(--line); }
.c-verify__row{
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 18px;
align-items: center;
padding: 18px 0;
border-bottom: 1.5px solid var(--line);
}
.c-verify__code{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
color: var(--gold-deep);
text-transform: uppercase;
}
.c-verify__desc{ font-size: 14.5px; color: var(--charcoal); }
.c-verify__link{
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.05em;
color: var(--ink);
border: 1.5px solid var(--ink);
border-radius: var(--radius-sm);
padding: 8px 14px;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.c-verify__link:hover{ background: var(--ink); color: var(--white); }
@media (max-width: 680px){
.c-verify__row{ grid-template-columns: 1fr; gap: 8px; }
.c-verify__link{ justify-self: start; }
}
/* ════════════════════════════════════════════════════════════════
PER-PRODUCT QUOTE ACTIONS (products.html, injected by JS)
════════════════════════════════════════════════════════════════ */
.c-lineitem__actions{
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 2px;
}
.c-lineitem__action{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--gold-deep);
border-bottom: 1.5px solid var(--gold-pale);
padding-bottom: 2px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.c-lineitem__action:hover{ color: var(--ink); border-color: var(--ink); }
/* ════════════════════════════════════════════════════════════════
BACK TO TOP
════════════════════════════════════════════════════════════════ */
.c-totop{
position: fixed;
right: 24px;
bottom: 92px;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid var(--ink);
background: var(--paper);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
z-index: 60;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateY(6px);
box-shadow: 0 6px 20px rgba(15,31,56,0.15);
}
.c-totop.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.c-totop:hover{ background: var(--ink); color: var(--white); }
.c-tool__head{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 6px;
}
.c-tool__title{
font-family: var(--font-display);
font-size: 21px;
font-weight: 600;
color: var(--ink);
}
.c-tool__badge{
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-deep);
border: 1px solid var(--gold-pale);
border-radius: 3px;
padding: 3px 7px;
white-space: nowrap;
}
.c-tool__result{
margin-top: 6px;
background: var(--paper);
border: 1.5px dashed var(--line);
border-radius: var(--radius-sm);
padding: 16px 18px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.85;
color: var(--charcoal);
min-height: 58px;
white-space: pre-wrap;
}
.c-tool__result b{ color: var(--ink); font-size: 15px; }
.c-tool__note{
margin-top: 12px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--charcoal-soft);
line-height: 1.6;
}
/* ════════════════════════════════════════════════════════════════
FULL SPECIFICATION SHEETS (products.html, collapsible)
════════════════════════════════════════════════════════════════ */
.c-specsheet{ margin-top: 4px; }
.c-specsheet > summary{
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink);
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
padding: 7px 13px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.c-specsheet > summary::-webkit-details-marker{ display: none; }
.c-specsheet > summary:hover{ border-color: var(--ink); }
.c-specsheet > summary::after{
content: '+';
color: var(--gold-deep);
font-size: 14px;
line-height: 1;
}
.c-specsheet[open] > summary{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.c-specsheet[open] > summary::after{ content: '\2212'; color: var(--gold-pale); }
.c-spectable{
margin-top: 14px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--white);
}
.c-spectable__caption{
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 16px;
background: var(--ink);
color: var(--white);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.c-spectable__caption b{ color: var(--gold-pale); }
.c-spectable__grid{
display: grid;
grid-template-columns: 1fr 1fr;
}
.c-spectable__cell{
display: grid;
grid-template-columns: 46% 54%;
gap: 10px;
padding: 9px 16px;
border-top: 1px solid var(--line);
font-size: 13px;
line-height: 1.5;
}
.c-spectable__grid .c-spectable__cell:nth-child(-n+2){ border-top: none; }
.c-spectable__cell:nth-child(odd){ border-right: 1px solid var(--line); }
.c-spectable__cell dt{
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--charcoal-soft);
margin: 0;
padding-top: 2px;
}
.c-spectable__cell dd{ margin: 0; color: var(--charcoal); }
.c-spectable__cell dd b{ color: var(--ink); }
.c-spectable__foot{
padding: 9px 16px;
border-top: 1.5px dashed var(--line);
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--charcoal-soft);
line-height: 1.6;
}
@media (max-width: 640px){
.c-spectable__grid{ grid-template-columns: 1fr; }
.c-spectable__cell:nth-child(odd){ border-right: none; }
.c-spectable__grid .c-spectable__cell:nth-child(2){ border-top: 1px solid var(--line); }
}
/* ════════════════════════════════════════════════════════════════
CAPABILITY STRIP — full service chain, one line (Home)
════════════════════════════════════════════════════════════════ */
.c-capstrip{
background: var(--ink-3);
border-top: 1px solid var(--line-on-ink);
border-bottom: 1px solid var(--line-on-ink);
}
.c-capstrip__row{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px 28px;
row-gap: 8px;
}
.c-capstrip__item{
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(255,255,255,0.84);
white-space: nowrap;
}
.c-capstrip__item::after{
content: '\00B7';
color: var(--gold);
margin: 0 14px;
font-weight: 600;
}
.c-capstrip__item:last-child::after{ content: none; }
@media (max-width: 640px){
.c-capstrip__item{ font-size: 10.5px; }
.c-capstrip__item::after{ margin: 0 9px; }
}
/* ════════════════════════════════════════════════════════════════
ORIGINATION LEDGER — sourcing clusters table (Home)
════════════════════════════════════════════════════════════════ */
.c-ledger{
margin-top: 52px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--white);
box-shadow: 0 2px 14px rgba(15,31,56,0.05);
}
.c-ledger__head,
.c-ledger__row{
display: grid;
grid-template-columns: 88px 1.25fr 1.35fr 1fr;
gap: 20px;
align-items: center;
padding: 15px 24px;
}
.c-ledger__head{
background: var(--ink);
color: rgba(255,255,255,0.85);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.c-ledger__row{ border-top: 1px solid var(--line); transition: background 0.18s ease; }
.c-ledger__row:first-of-type{ border-top: none; }
.c-ledger__row:hover{ background: var(--paper); }
.c-ledger__code{
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--gold-deep);
letter-spacing: 0.06em;
}
.c-ledger__cluster b{
display: block;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.c-ledger__cluster span{ font-size: 12.5px; color: var(--charcoal-soft); }
.c-ledger__commodity{ font-size: 13.5px; line-height: 1.5; color: var(--charcoal); }
.c-ledger__status{
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--success);
display: inline-flex;
align-items: center;
gap: 8px;
}
.c-ledger__status::before{
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
}
.c-ledger__foot{
padding: 13px 24px;
border-top: 1px dashed var(--line);
background: var(--paper);
font-size: 12.5px;
color: var(--charcoal-soft);
}
@media (max-width: 860px){
.c-ledger__head{ display: none; }
.c-ledger__row{
grid-template-columns: 1fr;
gap: 7px;
padding: 18px 20px;
}
.c-ledger__row{ border-top: 1px solid var(--line); }
}
.c-gateway__mode{
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-deep);
display: inline-block;
border: 1px solid var(--gold-pale);
border-radius: 2px;
padding: 3px 9px;
margin-bottom: 14px;
background: rgba(233,211,163,0.18);
}
.c-gateway__name{
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px;
}
.c-gateway__desc{
font-size: 13.5px;
line-height: 1.6;
color: var(--charcoal-soft);
}
.c-gateway__lane{
margin-top: 16px;
padding-top: 13px;
border-top: 1px dashed var(--line);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--ink-2);
line-height: 1.7;
}
.c-gateway__lane b{ color: var(--gold-deep); font-weight: 600; }
/* ════════════════════════════════════════════════════════════════
FOOTER — official website / anti-fraud notice
════════════════════════════════════════════════════════════════ */
.c-footer__notice{
margin-top: 30px;
padding: 15px 20px;
border: 1px dashed var(--line-on-ink);
border-radius: var(--radius-sm);
font-size: 12.5px;
line-height: 1.65;
color: rgba(255,255,255,0.72);
}
.c-footer__notice b{ color: var(--gold-on-ink); font-weight: 600; }
.c-footer__notice a{ text-decoration: underline; text-underline-offset: 2px; }
.c-footer__notice a:hover{ color: var(--white); }
.c-grainroute__steps{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
position: relative;
z-index: 1;
}
.c-grainroute__step{ display: flex; flex-direction: column; }
.c-grainroute__node{
width: 66px; height: 66px;
border-radius: 50%;
background: var(--paper);
border: 2px solid var(--ink);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: var(--font-mono);
box-shadow: 0 0 0 6px var(--paper);
transition: transform .25s ease, border-color .25s ease;
}
.c-grainroute__no{ font-size: 17px; font-weight: 500; line-height: 1; color: var(--ink); }
.c-grainroute__code{ font-size: 8.5px; letter-spacing: .12em; color: var(--gold-deep); margin-top: 3px; }
.c-grainroute__step:hover .c-grainroute__node{ transform: rotate(-4deg); border-color: var(--gold-deep); }
.c-grainroute__step:last-child .c-grainroute__node{ border-color: var(--gold-deep); }
.c-grainroute__step:last-child .c-grainroute__no{ color: var(--gold-deep); }
.c-grainroute__title{
font-family: var(--font-display);
font-weight: 600; font-size: 16.5px;
color: var(--ink);
margin: 16px 0 6px;
}
.c-grainroute__desc{ font-size: 13px; color: var(--charcoal-soft); line-height: 1.55; }
.c-grainroute__meta{
font-family: var(--font-mono);
font-size: 10.5px; letter-spacing: .06em;
text-transform: uppercase;
color: var(--gold-deep);
margin-top: 8px;
}
.c-grainroute__foot{
margin-top: 52px;
border: 1px solid var(--line);
background: var(--paper-deep);
padding: 16px 22px;
display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
}
.c-grainroute__foot-stamp{
font-family: var(--font-mono);
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--gold-deep);
border: 1.5px solid var(--gold-deep);
padding: 4px 10px;
border-radius: var(--radius-sm);
transform: rotate(-1.5deg);
white-space: nowrap;
}
.c-grainroute__foot p{ font-size: 13.5px; color: var(--charcoal-soft); flex: 1; min-width: 260px; margin: 0; }
@media (max-width: 900px){
.c-grainroute__steps{ grid-template-columns: 1fr; gap: 34px; }
.c-grainroute__step{ flex-direction: row; gap: 20px; align-items: flex-start; display: grid; grid-template-columns: 66px 1fr; }
.c-grainroute__node{ grid-row: 1 / span 3; }
.c-grainroute__title{ margin-top: 4px; }
}
/* ════════════════════════════════════════════════════════════════
PACKAGING & PRIVATE LABEL — manifest table + wedge (products.html)
════════════════════════════════════════════════════════════════ */
.c-packwrap{
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 28px;
align-items: start;
}
.c-packtable{
border: 1.5px solid var(--ink);
background: var(--white);
border-radius: var(--radius-sm);
overflow: hidden;
}
.c-packtable__head{
display: grid;
grid-template-columns: 1.1fr 1.3fr 1.6fr;
gap: 14px;
font-family: var(--font-mono);
font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
background: var(--ink); color: var(--white);
padding: 11px 18px;
}
.c-packtable__row{
display: grid;
grid-template-columns: 1.1fr 1.3fr 1.6fr;
gap: 14px;
padding: 15px 18px;
border-top: 1px solid var(--line);
font-size: 13.5px;
align-items: baseline;
}
.c-packtable__row:first-of-type{ border-top: none; }
.c-packtable__sizes{ font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.c-packtable__bag{ font-weight: 600; color: var(--ink); }
.c-packtable__note{ color: var(--charcoal-soft); font-size: 12.5px; }
.c-packcard{
position: relative;
border: 1.5px solid var(--gold);
background: var(--paper-deep);
border-radius: var(--radius-sm);
padding: 26px 24px 24px;
}
.c-packcard__tab{
position: absolute; top: -11px; right: 14px;
font-family: var(--font-mono);
font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
background: var(--gold); color: var(--white);
padding: 3px 10px;
border-radius: var(--radius-sm);
}
.c-packcard__title{
font-family: var(--font-display);
font-weight: 600; font-size: 19px;
color: var(--ink);
margin-bottom: 8px;
}
.c-packcard__desc{ font-size: 13.5px; color: var(--charcoal-soft); }
.c-packcard__list{ margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.c-packcard__list li{
font-size: 13px; color: var(--charcoal);
padding-left: 20px; position: relative;
}
.c-packcard__list li::before{ content: "\2014"; position: absolute; left: 0; color: var(--gold-deep); }
@media (max-width: 900px){
.c-packwrap{ grid-template-columns: 1fr; }
.c-packtable__head, .c-packtable__row{ grid-template-columns: 1fr 1.2fr; font-size: 12.5px; }
.c-packtable__head span:last-child, .c-packtable__note{ display: none; }
}
/* ════════════════════════════════════════════════════════════════
LANGUAGE SWITCHER (styled Google Translate dropdown, on dark nav)
════════════════════════════════════════════════════════════════ */
.c-lang{
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: auto;
margin-right: 26px;
}
.c-lang__globe{
width: 15px; height: 15px;
color: rgba(255,255,255,0.72);
flex-shrink: 0;
transition: color 0.15s ease;
}
.c-lang:hover .c-lang__globe{ color: var(--gold); }
.c-lang__select{
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.82);
background-color: transparent;
border: 1px solid rgba(255,255,255,0.22);
border-radius: var(--radius-sm);
padding: 6px 27px 6px 10px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 9px center;
transition: border-color 0.15s ease, color 0.15s ease;
/* Some browsers size a closed