/* =====================================================================
   SALSA International Business Associates — Design System
   Every token below maps 1:1 to an Elementor Global (see docs/elementor-mapping.md)
   ===================================================================== */

:root {
  /* Brand — sampled from the SALSA logo */
  --green-900: #022B24;   /* footer, deep panels        */
  --green-800: #033F35;   /* primary brand green (logo) */
  --green-700: #0F5A47;   /* hover / links              */
  --green-100: #E4EEE9;   /* tinted surface             */
  --amber-500: #FCAA32;   /* logo ring — CTA, rule      */
  --amber-600: #E3921C;   /* CTA hover                  */
  --amber-100: #FBF0DD;
  --ember-700: #B80000;   /* logo ring / tagline — used sparingly */

  /* Neutrals */
  --ink:       #17201D;
  --ink-2:     #3C4744;
  --muted:     #66716D;
  --line:      #D8DDD9;
  --stone:     #F1F2EE;   /* light background            */
  --paper:     #FFFFFF;

  /* Type */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Scale (Elementor Global Typography) */
  --fs-display: clamp(2.3rem, 4.4vw, 3.9rem);   /* H1 */
  --fs-h2:      clamp(1.75rem, 2.9vw, 2.55rem);
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-h4:      1.2rem;
  --fs-lead:    clamp(1.125rem, 1.4vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;   /* 15px — captions, meta, footer, form notes */
  --fs-tiny:    0.8125rem;   /* 13px — labels, chips */

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 84px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--green-800); text-decoration: none; }
a:hover { color: var(--green-700); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; margin: 0 0 .6em; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: var(--fs-display); font-weight: 800; line-height: 1.06; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1.1em; font-size: var(--fs-body); line-height: 1.65; }
p.lead { font-size: var(--fs-lead); }
p.small, .small { font-size: var(--fs-small); }
p.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--muted); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--amber-500); color: var(--ink); padding: .5rem 1rem; z-index: 200; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--amber-500); outline-offset: 3px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.container { width: min(100% - 2*var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.bg-stone { background: var(--stone); }
.bg-green { background: var(--green-800); color: #fff; }
.bg-green h1, .bg-green h2, .bg-green h3, .bg-green p { color: #fff; }
.bg-green .muted { color: rgba(255,255,255,.72); }

/* Brand rule — the brochure's green bar + orange slash, reduced to a device */
.rule { display: flex; width: 72px; height: 4px; margin-bottom: 1.6rem; }
.rule::before { content:""; flex: 0 0 48px; background: var(--green-800); }
.rule::after  { content:""; flex: 1; background: var(--amber-500); }
.bg-green .rule::before { background: rgba(255,255,255,.6); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem;
  font-weight: 700; font-family: var(--font-display); letter-spacing: -0.005em; font-size: 1rem; line-height: 1; border: 1.5px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  cursor: pointer; font-family: var(--font-body);
}
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--amber-500); color: var(--ink); }
.btn--primary:hover { background: var(--amber-600); color: var(--ink); }
.btn--dark { background: var(--green-800); color: #fff; }
.btn--dark:hover { background: var(--green-700); color: #fff; }
.btn--outline { border-color: currentColor; color: var(--green-800); background: transparent; }
.btn--outline:hover { background: var(--green-800); color: #fff; }
.bg-green .btn--outline { color: #fff; }
.bg-green .btn--outline:hover { background: #fff; color: var(--green-800); }
.btn--white { background: #fff; color: var(--green-800); border-color: #fff; box-shadow: 0 8px 24px -12px rgba(0,0,0,.45); }
.btn--white:hover { background: var(--green-100); color: var(--green-900); }
.btn--text { padding: 0; background: none; color: var(--green-800); border-bottom: 1.5px solid var(--amber-500); border-radius: 0; padding-bottom: .2rem; }
.btn--text:hover { color: var(--green-700); }

/* ---------- Utility bar ---------- */
.topbar { background: var(--green-900); color: rgba(255,255,255,.8); font-size: var(--fs-tiny); }
.topbar .container { display:flex; justify-content:space-between; align-items:center; gap:1rem; height: 36px; }
.topbar a { color: #fff; }
.topbar a:hover { color: var(--amber-500); }
.topbar__links { display:flex; gap: 1.5rem; }
.topbar__links a::before { content:""; display:inline-block; width:5px; height:5px; background: var(--amber-500); transform: rotate(45deg); margin-right:.5rem; vertical-align: middle; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, height .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(2,43,36,.35); }
.site-header::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height: 3px; background: linear-gradient(90deg, var(--green-800) 0 70%, var(--amber-500) 70%); opacity: 0; transition: opacity .3s; }
.site-header.is-scrolled::after { opacity: 1; }
.site-header { position: sticky; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 2rem; }
.brand img { height: 46px; width: auto; }
.brand { display: inline-flex; align-items: center; }
.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav a { color: var(--ink); font-weight: 600; font-size: 1rem; position: relative; padding-block: .5rem; }
.nav a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--amber-500); transition: width .25s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav .has-menu { position: static; }
.nav .has-menu > a { display:inline-flex; align-items:center; gap:.35rem; }
.nav .has-menu > a svg { width: 12px; height: 12px; transition: transform .2s; }
.has-menu:hover > a svg, .has-menu:focus-within > a svg { transform: rotate(180deg); }
.site-header .container { position: relative; }
.mega {
  position: absolute; top: 100%; left: 0; right: 0; width: 100%; margin-top: 0;
  background: #fff; border-top: 3px solid var(--amber-500); box-shadow: 0 40px 70px -40px rgba(2,43,36,.55), 0 1px 0 var(--line);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
}
.has-menu:hover .mega, .has-menu:focus-within .mega { opacity:1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1.25fr; }
.mega__grid > * { padding: 1.6rem 1.6rem 1.4rem; }
.mega__grid > * + * { border-left: 1px solid var(--line); }
.mega__head { margin: 0 0 .8rem; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-tiny); letter-spacing: .06em; text-transform: uppercase; color: var(--green-800); }
.mega__cats { background: var(--stone); display:grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; align-content:start; }
.mega__cats .mega__head { grid-column: 1 / -1; }
.mega__cat { display:grid; grid-template-columns: 52px 1fr; gap: .7rem; align-items:center; padding: .45rem; background:#fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .15s, transform .15s var(--ease), box-shadow .15s; }
.mega__cat img { width: 52px; height: 52px; object-fit: cover; }
.mega__cat strong { display:block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); line-height:1.2; }
.mega__cat small { display:block; font-size: var(--fs-tiny); color: var(--muted); margin-top: .15rem; }
.mega__cat:hover { border-color: var(--amber-500); transform: translateY(-1px); box-shadow: 0 10px 20px -14px rgba(2,43,36,.4); color: var(--ink); }
.mega__col ul { list-style:none; margin:0 0 1.2rem; padding:0; }
.mega__col ul:last-child { margin-bottom: 0; }
.mega__col li a { display:flex; align-items:center; gap:.6rem; padding: .42rem 0; font-weight: 500; font-size: 1rem; color: var(--ink-2); border-bottom: 1px solid transparent; }
.mega__col li a::before { content:""; width: 6px; height: 6px; background: var(--line); transform: rotate(45deg); flex:none; transition: background .15s; }
.mega__col li a:hover { color: var(--green-800); }
.mega__col li a:hover::before { background: var(--amber-500); }
.mega__col li a::after { display:none; }
.mega__feature { background: var(--green-800); color: #fff; display:flex; flex-direction:column; gap: 1rem; padding: 0 !important; }
.mega__feature img { width:100%; height: 150px; object-fit: cover; }
.mega__feature > div { padding: 0 1.4rem 1.4rem; }
.mega__feature .mega__head { color: var(--amber-500); }
.mega__feature strong { display:block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin-bottom: .5rem; }
.mega__feature p { font-size: var(--fs-small); color: rgba(255,255,255,.8); margin-bottom: 1rem; }
.mega__feature .btn { font-size: var(--fs-small); padding: .75rem 1.2rem; }
.mega__foot { display:flex; justify-content:space-between; align-items:center; gap: 1rem; padding: .85rem 1.6rem; background: var(--stone); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.mega__foot a { font-weight: 700; color: var(--green-800); display:inline-flex; align-items:center; gap:.5rem; }
.mega__foot a svg { width: 14px; height: 14px; }
.nav .mega a::after { display: none; }
.nav .mega a { font-weight: inherit; padding: 0; }
.header-cta { display: inline-flex; }
.nav-toggle { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.nav-toggle span { display:block; width: 26px; height: 2px; background: var(--ink); margin: 6px 0; transition: transform .3s var(--ease), opacity .3s; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; background: var(--green-800); color:#fff; padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem; transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; display: none; }
.drawer.is-open { transform: none; }
.drawer a { color: #fff; }
.drawer .drawer-nav { display: grid; gap: .25rem; margin-bottom: 2rem; }
.drawer .drawer-nav > a { font-family: var(--font-display); font-weight:700; font-size: 1.6rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.drawer .drawer-cats { display: grid; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.drawer .drawer-cats a { display:flex; justify-content: space-between; padding: .5rem 0; opacity: .85; }
.drawer .drawer-contact { font-size: var(--fs-small); opacity: .8; }

/* ---------- Hero (home) — background video ---------- */
.hero { position: relative; background: var(--green-900); color:#fff; overflow: hidden; min-height: calc(100vh - var(--header-h)); max-height: 900px; display:flex; flex-direction:column; }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; z-index:0; }
.hero__overlay { position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg, rgba(3,63,53,.78) 0%, rgba(3,63,53,.55) 55%, rgba(3,63,53,.35) 100%),
  linear-gradient(180deg, rgba(2,43,36,.1) 0%, rgba(2,43,36,.45) 100%); }
.hero__inner { position: relative; z-index: 2; flex: 1; display:flex; align-items:center; padding-block: clamp(4rem,9vw,7rem) clamp(4rem,8vw,6rem); }
.hero__copy { max-width: 720px; }
.hero__copy .origin { font-size: var(--fs-small); font-weight: 600; color: rgba(255,255,255,.85); margin-bottom: 1.4rem; display:flex; align-items:center; gap: .8rem; }
.hero__copy .origin::before { content:""; width: 28px; height: 3px; background: var(--amber-500); }
.hero h1 { color:#fff; font-size: clamp(2.5rem, 5.2vw, 4.4rem); font-weight: 800; line-height: 1.04; max-width: 15ch; margin-bottom: 1.4rem; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero p.lead { color: rgba(255,255,255,.9); max-width: 50ch; margin-bottom: 2.2rem; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
.hero__actions { display:flex; flex-wrap: wrap; gap: 1rem; }
.hero__routes { list-style:none; margin: 2.4rem 0 0; padding: 1.1rem 0 0; display:flex; flex-wrap:wrap; gap: .4rem 1.5rem; border-top: 1px solid rgba(255,255,255,.28); font-size: var(--fs-small); font-weight: 600; color: rgba(255,255,255,.85); }
.hero__routes li { display:flex; align-items:center; gap:.5rem; }
.hero__routes li::before { content:""; width:6px; height:6px; background: var(--amber-500); }

/* page-load reveal (single orchestrated moment) */
.reveal > * { opacity: 0; transform: translateY(14px); animation: rise .8s var(--ease) forwards; }
.reveal > *:nth-child(2){ animation-delay:.08s } .reveal > *:nth-child(3){ animation-delay:.16s } .reveal > *:nth-child(4){ animation-delay:.24s } .reveal > *:nth-child(5){ animation-delay:.32s }
@keyframes rise { to { opacity:1; transform:none; } }

.hero__ticker { position:relative; z-index: 3; background: rgba(2,43,36,.88); backdrop-filter: blur(6px); border-top: 1px solid rgba(252,170,50,.35); overflow:hidden; }
.hero__ticker::before, .hero__ticker::after { content:""; position:absolute; top:0; bottom:0; width: 90px; z-index:2; pointer-events:none; }
.hero__ticker::before { left:0; background: linear-gradient(90deg, rgba(2,43,36,1), rgba(2,43,36,0)); }
.hero__ticker::after { right:0; background: linear-gradient(270deg, rgba(2,43,36,1), rgba(2,43,36,0)); }
.hero__ticker ul { list-style:none; margin:0; padding:0; display:flex; width:max-content; animation: marquee 48s linear infinite; }
.hero__ticker:hover ul, .hero__ticker:focus-within ul { animation-play-state: paused; }
.hero__ticker li { padding: 1.1rem 2.4rem; white-space: nowrap; font-size: 1.15rem; color: rgba(255,255,255,.9); display:flex; align-items:center; gap: .8rem; }
.hero__ticker li::before { content:""; width: 7px; height: 7px; background: var(--amber-500); transform: rotate(45deg); flex: none; }
.hero__ticker li strong { color: var(--amber-500); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-right: .25rem; letter-spacing: .01em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Intro (asymmetric editorial) ---------- */
.intro { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.intro h2 { max-width: 16ch; }
.intro__body p:first-child { font-size: var(--fs-lead); color: var(--ink-2); }
.intro__media { margin: 1.8rem 0 0; position:relative; aspect-ratio: 4/3; overflow:hidden; }
.intro__media img { width:100%; height:100%; object-fit:cover; }
.intro__media figcaption { position:absolute; left:0; bottom:0; font-size: var(--fs-tiny); color:#fff; background: rgba(2,43,36,.78); padding:.35rem .6rem; border-left: 2px solid var(--amber-500); }
.intro__facts { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.intro__facts div strong { display:block; font-family: var(--font-display); font-weight:700; font-size: 1.1rem; margin-bottom: .2rem; }
.intro__facts div span { font-size: var(--fs-small); color: var(--muted); }

/* ---------- Commodity register (signature component) ---------- */
.register { border-top: 1px solid var(--line); }
.register__row { display: grid; grid-template-columns: 90px 1.2fr 1.6fr 1fr auto; align-items: center; gap: 2rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); position: relative; cursor: pointer; transition: background .25s; }
.register__row:hover { background: var(--stone); }
.register__row:hover .register__thumb { transform: scale(1.03); }
.register__index { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--muted); }
.register__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.8rem); margin:0; letter-spacing:-0.02em; }
.register__items { color: var(--muted); line-height: 1.5; }
.register__thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.register__thumb img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); }
.register__link { font-weight: 600; white-space: nowrap; display:inline-flex; align-items:center; gap:.5rem; }
.register__link svg { width:16px; height:16px; }
.register__row.is-expanded { grid-template-columns: 90px 1.2fr 1.6fr 1fr auto; }
.register__detail { grid-column: 2 / -1; display: none; padding: 0 0 .6rem; }
.register__row.is-expanded .register__detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: .75rem 1.5rem; }
.register__detail a { font-size: var(--fs-small); color: var(--ink-2); padding: .35rem 0; border-bottom: 1px dotted var(--line); display:flex; justify-content: space-between; }
.register__detail a:hover { color: var(--green-800); }
.register__row a.register__cover { position:absolute; inset:0; }
.register__note { font-size: var(--fs-small); color: var(--muted); margin-top: 1rem; }

/* ---------- Featured products (uneven editorial grid) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 160px; gap: 1.2rem; }
.feature-grid .pcard:nth-child(1) { grid-column: span 6; grid-row: span 3; }
.feature-grid .pcard:nth-child(2) { grid-column: span 3; grid-row: span 2; }
.feature-grid .pcard:nth-child(3) { grid-column: span 3; grid-row: span 2; }
.feature-grid .pcard:nth-child(4) { grid-column: span 3; grid-row: span 2; }
.feature-grid .pcard:nth-child(5) { grid-column: span 3; grid-row: span 2; }
.feature-grid .pcard:nth-child(6) { grid-column: span 4; grid-row: span 2; }
.feature-grid .pcard:nth-child(7) { grid-column: span 4; grid-row: span 2; }
.feature-grid .pcard:nth-child(8) { grid-column: span 4; grid-row: span 2; }

.pcard { position: relative; overflow: hidden; background: var(--stone); color: #fff; display:block; }
.pcard img { width:100%; height:100%; object-fit: cover; transition: transform .8s var(--ease); position:absolute; inset:0; }
.pcard:hover img { transform: scale(1.04); }
.pcard::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,43,36,0) 35%, rgba(2,43,36,.82) 100%); }
.pcard__body { position: absolute; inset: auto 0 0 0; padding: 1.4rem; z-index: 2; }
.pcard__cat { font-size: var(--fs-tiny); color: var(--amber-500); font-weight: 600; margin-bottom: .3rem; display:block; }
.pcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color:#fff; margin: 0 0 .25rem; }
.feature-grid .pcard:first-child .pcard__name { font-size: 1.7rem; font-weight: 800; }
.pcard__desc { font-size: var(--fs-small); color: rgba(255,255,255,.8); margin: 0; max-width: 42ch; }
.pcard__cta { margin-top: .7rem; font-size: var(--fs-small); color:#fff; font-weight: 600; border-bottom: 1.5px solid var(--amber-500); display:inline-block; }

/* ---------- Why SALSA (statement list, not icon cards) ---------- */
.why { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem,5vw,5rem); }
.why__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
.why__item { padding: 1.8rem 1.8rem 1.8rem 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.why__item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); padding-right: 1.8rem; }
.why__item:nth-child(even) { padding-left: 1.8rem; }
.why__item h3 { font-size: 1.3rem; margin-bottom: .5rem; color:#fff; }
.why__item p { color: rgba(255,255,255,.78); margin: 0; }
.why__item svg { width: 28px; height: 28px; color: var(--amber-500); margin-bottom: .9rem; }

/* ---------- Origin ---------- */
.origin { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.origin__media { position: relative; min-height: 520px; }
.origin__media img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.origin__media figcaption { position:absolute; left: 1.2rem; bottom: 1rem; font-size: var(--fs-tiny); color: rgba(255,255,255,.8); background: rgba(2,43,36,.55); padding: .3rem .6rem; }
.origin__copy { padding: clamp(2.5rem,6vw,6rem); background: var(--stone); display:flex; flex-direction:column; justify-content:center; }
.origin__copy h2 { max-width: 15ch; }
.origin__list { list-style:none; margin: 1.8rem 0 0; padding:0; display:grid; gap: .8rem; }
.origin__list li { display:grid; grid-template-columns: 150px 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.origin__list li strong { font-weight: 600; }
.origin__list li span { color: var(--muted); }

/* ---------- Export flow ---------- */
.flow { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; counter-reset: step; }
.flow::before { content:""; position:absolute; left:0; right:0; top: 22px; height: 1px; background: var(--line); }
.flow li { padding: 0 1.5rem 0 0; position: relative; counter-increment: step; }
.flow li::before { content: counter(step, decimal-leading-zero); display:inline-flex; align-items:center; justify-content:center; width: 44px; height: 44px; border: 1px solid var(--line); background:#fff; font-family: var(--font-display); font-weight:700; font-size: var(--fs-small); margin-bottom: 1.2rem; color: var(--green-800); position: relative; z-index:1; }
.flow li:last-child::before { background: var(--amber-500); border-color: var(--amber-500); }
.flow h3 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 600; margin-bottom: .35rem; }
.flow p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.flow__media { margin-top: 3.5rem; aspect-ratio: 21/8; overflow:hidden; }
.flow__media img { width:100%; height:100%; object-fit: cover; }

/* ---------- Enquiry CTA band (amber) ---------- */
.cta-band-section { background: var(--amber-500); color: var(--ink); position: relative; overflow:hidden; }
.cta-band-section::before { content:""; position:absolute; right:-6%; top:-30%; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(23,32,29,.12); pointer-events:none; }
.cta-band-section::after { content:""; position:absolute; right:-2%; top:-20%; width: 32%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(23,32,29,.12); pointer-events:none; }
.cta-band { display:grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items:center; position:relative; z-index:1; }
.cta-band h2 { color: var(--ink); max-width: 18ch; font-weight: 800; }
.cta-band p { color: rgba(23,32,29,.8); max-width: 48ch; }
.cta-band .rule::before { background: var(--green-800); } .cta-band .rule::after { background: #fff; }
.cta-band .btn--primary { background: var(--green-800); color:#fff; }
.cta-band .btn--primary:hover { background: var(--green-900); color:#fff; }
.cta-band__aside { border-left: 1.5px solid rgba(23,32,29,.2); padding-left: 2.5rem; }
.cta-band__aside dl { margin:0; display:grid; grid-template-columns: auto 1fr; gap: .6rem 1.5rem; }
.cta-band__aside dt { color: rgba(23,32,29,.6); font-weight: 600; }
.cta-band__aside dd { margin:0; color: var(--ink); }
.cta-band__aside a { color: var(--ink); border-bottom: 1.5px solid var(--green-800); }
.cta-band__aside a:hover { color: var(--green-800); }

/* ---------- Footer (light, amber accents) ---------- */
.site-footer { background: #fff; color: var(--ink-2); border-top: 6px solid var(--amber-500); }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--green-800); }
.footer-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: 1.5rem; padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.footer-top .brand img { height: 52px; }
.footer-top .footer-motto { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--green-800); }
.footer-top .footer-motto span { color: var(--amber-600); }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 3rem; padding: 3rem 0; }
.footer-grid p { font-size: var(--fs-small); }
.site-footer h4 { color: var(--ink); font-size: var(--fs-small); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--amber-500); display:inline-block; }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size: var(--fs-small); }
.site-footer address { font-style: normal; font-size: var(--fs-small); line-height: 1.75; }
.site-footer address .tin { color: var(--muted); }
.footer-bottom { background: var(--ink); color: rgba(255,255,255,.75); }
.footer-bottom .container { display:flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding: 1.1rem 0; font-size: var(--fs-tiny); }
.footer-bottom a { color: rgba(255,255,255,.85); }
.footer-bottom a:hover { color: var(--amber-500); }
.footer-bottom ul { display:flex; gap: 1.5rem; }


/* ---------- Patterned green surfaces (brand green + #FCAA32 lattice) ---------- */
.bg-green, .drawer, .hero__ticker, .page-hero {
  background-color: var(--green-800);
  background-image:
    radial-gradient(60% 80% at 100% 0%, rgba(252,170,50,.16) 0%, rgba(252,170,50,0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M28 0L56 28 28 56 0 28z' fill='none' stroke='%23FCAA32' stroke-opacity='.13' stroke-width='1'/><path d='M28 14L42 28 28 42 14 28z' fill='none' stroke='%23FCAA32' stroke-opacity='.07' stroke-width='1'/></svg>");
  background-size: auto, 56px 56px;
  background-position: top right, center;
}
.bg-green { position: relative; }
.bg-green::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,43,36,.35) 0%, rgba(2,43,36,0) 30%, rgba(2,43,36,0) 70%, rgba(2,43,36,.35) 100%); pointer-events:none; }
.bg-green > * { position: relative; }
.hero__ticker { background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M28 0L56 28 28 56 0 28z' fill='none' stroke='%23FCAA32' stroke-opacity='.10' stroke-width='1'/></svg>");
  background-size: 56px 56px; background-color: rgba(2,43,36,.9); }
.page-hero::after { background:
    linear-gradient(90deg, rgba(3,63,53,.88) 0%, rgba(3,63,53,.62) 60%, rgba(3,63,53,.38) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M28 0L56 28 28 56 0 28z' fill='none' stroke='%23FCAA32' stroke-opacity='.12' stroke-width='1'/></svg>");
  background-size: auto, 56px 56px; }
.hero__overlay { background:
    linear-gradient(90deg, rgba(3,63,53,.80) 0%, rgba(3,63,53,.56) 55%, rgba(3,63,53,.34) 100%),
    linear-gradient(180deg, rgba(2,43,36,.1) 0%, rgba(2,43,36,.5) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><path d='M28 0L56 28 28 56 0 28z' fill='none' stroke='%23FCAA32' stroke-opacity='.09' stroke-width='1'/></svg>");
  background-size: auto, auto, 56px 56px; }
/* amber edge accent on green sections */
.bg-green.section { border-top: 4px solid var(--amber-500); }
.split-quote.bg-green { border-left: 6px solid var(--amber-500); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; background: var(--green-800); color:#fff; overflow:hidden; }
.page-hero .container { position: relative; z-index:2; padding-block: clamp(4rem,8vw,7rem) clamp(3rem,6vw,5rem); }
.page-hero h1 { color:#fff; max-width: 18ch; text-shadow: 0 2px 20px rgba(0,0,0,.2); }
.page-hero p.lead { color: rgba(255,255,255,.82); max-width: 52ch; }
.page-hero__img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.page-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(3,63,53,.86) 0%, rgba(3,63,53,.62) 60%, rgba(3,63,53,.4) 100%); z-index:1; }
.page-hero__img--blur { filter: blur(6px); transform: scale(1.06); }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin: 0 0 1.5rem; padding:0; font-size: var(--fs-small); color: rgba(255,255,255,.7); }
.breadcrumb a { color: var(--amber-500); font-weight: 600; }
.breadcrumb a:hover { color: #fff; }
.page-hero .cat, .page-hero .cat a { color: var(--amber-500) !important; font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-tiny); display:inline-block; margin-bottom: .8rem; }
.page-hero a { color: var(--amber-500); }
.breadcrumb li + li::before { content:"/"; margin-right:.5rem; opacity:.5; }

/* ---------- About ---------- */
.story { display:grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem,5vw,5rem); }
.story--flip { grid-template-columns: 8fr 4fr; }
.story__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
.story__aside .rule { margin-bottom: 1rem; }
.story__aside h2 { font-size: var(--fs-h3); }
.story__body p:first-of-type { font-size: var(--fs-lead); color: var(--ink-2); }
.story__media { aspect-ratio: 3/2; overflow:hidden; margin-top: 2rem; }
.story__media img { width:100%; height:100%; object-fit: cover; }
.split-quote { display:grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.split-quote > div { padding: clamp(2.5rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; }
.split-quote img { width:100%; height:100%; object-fit:cover; }
.split-quote blockquote { margin:0; font-family: var(--font-display); font-weight:600; font-size: clamp(1.3rem,2vw,1.75rem); line-height:1.35; letter-spacing:-0.01em; }
.split-quote cite { display:block; margin-top: 1.2rem; font-style: normal; font-size: var(--fs-small); color: var(--muted); }
.portfolio-strip { display:grid; grid-template-columns: repeat(6,1fr); gap: .6rem; }
.portfolio-strip figure { margin:0; aspect-ratio: 1; overflow:hidden; position:relative; }
.portfolio-strip img { width:100%; height:100%; object-fit:cover; }
.portfolio-strip figcaption { position:absolute; inset:auto 0 0 0; padding:.45rem .6rem; font-size: var(--fs-tiny); color:#fff; background: linear-gradient(transparent, rgba(2,43,36,.75)); }

/* ---------- Products directory ---------- */
.cat-block { display:grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem,5vw,4rem); padding-block: clamp(3rem,6vw,5rem); border-top: 1px solid var(--line); }
.cat-block__head { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self:start; }
.cat-block__head .index { font-family: var(--font-display); font-weight:600; color: var(--muted); margin-bottom: .6rem; }
.cat-block__head p { color: var(--ink-2); }
.cat-block__head img { aspect-ratio: 4/3; object-fit: cover; margin-top: 1.4rem; }
.plist { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.plist li a { display:grid; grid-template-columns: 120px 1fr; gap: 1.1rem; align-items:center; padding: 1rem; background:#fff; border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, transform .2s var(--ease); }
.plist li a:hover { border-color: var(--green-800); transform: translateY(-2px); }
.plist img { aspect-ratio: 1; object-fit: cover; }
.plist strong { display:block; font-family: var(--font-display); font-weight:600; font-size: 1.05rem; margin-bottom:.2rem; }
.plist span { font-size: var(--fs-small); color: var(--muted); }
.plist .tag { display:inline-block; font-size: var(--fs-tiny); color: var(--green-800); background: var(--green-100); padding: .15rem .5rem; margin-top: .4rem; }
.cat-anchors { display:flex; flex-wrap:wrap; gap:.6rem; margin-top: 1.5rem; }
.cat-anchors a { border: 1px solid rgba(255,255,255,.35); color:#fff; padding:.45rem .9rem; font-size: var(--fs-small); }
.cat-anchors a:hover { background:#fff; color: var(--green-800); }

/* ---------- Single product ---------- */
.product-hero { display:grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.product-hero__media { aspect-ratio: 4/3; overflow:hidden; background: var(--stone); }
.product-hero__media img { width:100%; height:100%; object-fit: cover; }
.product-hero__thumbs { display:grid; grid-template-columns: repeat(4,1fr); gap:.6rem; margin-top:.6rem; }
.product-hero__thumbs button { padding:0; border: 1px solid var(--line); background:none; cursor:pointer; aspect-ratio: 4/3; overflow:hidden; }
.product-hero__thumbs button[aria-pressed="true"] { border-color: var(--green-800); }
.product-hero__thumbs img { width:100%; height:100%; object-fit:cover; }
.product-hero__copy .cat { color: var(--green-800); font-weight:600; margin-bottom: .8rem; display:block; }
.product-hero__copy h1 { font-size: clamp(2.2rem,3.6vw,3.2rem); }
.product-hero__copy .enquire-box { margin-top: 2rem; padding: 1.5rem; background: var(--stone); border-left: 3px solid var(--amber-500); }
.product-hero__copy .enquire-box p { margin: 0 0 1rem; font-size: var(--fs-small); color: var(--ink-2); }
.enquire-box__alt { margin: 1rem 0 0 !important; font-size: var(--fs-small) !important; color: var(--muted) !important; }
.spec { display:grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem,5vw,5rem); }
.spec__nav { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; list-style:none; margin:0; padding:0; display:grid; gap:.2rem; border-left: 1px solid var(--line); }
.spec__nav a { display:block; padding: .5rem 1rem; color: var(--muted); border-left: 2px solid transparent; margin-left:-1px; }
.spec__nav a:hover, .spec__nav a.is-active { color: var(--ink); border-left-color: var(--amber-500); }
.spec__block { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.spec__block:last-child { border:0; }
.spec table { width:100%; border-collapse: collapse; }
.spec th, .spec td { text-align:left; padding: .8rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 34%; font-weight: 600; color: var(--ink-2); }
.spec td { color: var(--ink); }
.placeholder { color: var(--muted); font-style: italic; }
.related { display:grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.related a { color: var(--ink); }
.related .img { aspect-ratio: 4/3; overflow:hidden; margin-bottom:.8rem; }
.related img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.related a:hover img { transform: scale(1.04); }
.related strong { font-family: var(--font-display); font-weight:600; font-size:1rem; display:block; }
.related span { font-size: var(--fs-small); color: var(--muted); }

/* ---------- Contact ---------- */
.contact { display:grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
.contact__info { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.contact__info dl { display:grid; grid-template-columns: 110px 1fr; gap: .8rem 1.2rem; margin: 1.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.contact__info dt { color: var(--muted); }
.contact__info dd { margin:0; }
.contact__info figure { margin: 2rem 0 0; aspect-ratio: 4/3; overflow:hidden; }
.contact__info figure img { width:100%; height:100%; object-fit:cover; }
.form { display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem; padding: clamp(1.5rem,4vw,2.8rem); background: var(--stone); }
.form .full { grid-column: 1 / -1; }
.form label { display:block; font-weight:600; font-size: var(--fs-small); margin-bottom:.4rem; }
.form label small { font-weight: 400; color: var(--muted); }
.form input, .form select, .form textarea { width:100%; padding:.85rem 1rem; border: 1px solid var(--line); background:#fff; font: inherit; color: var(--ink); border-radius:0; transition: border-color .2s; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--green-800); outline: 0; box-shadow: 0 0 0 3px rgba(240,160,48,.35); }
.form textarea { min-height: 140px; resize: vertical; }
.form .checks { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: .4rem .8rem; }
.form .checks label { display:flex; gap:.5rem; align-items:center; font-weight: 400; font-size: var(--fs-small); margin:0; }
.form .checks input { width:auto; }
.form .error { color: var(--ember-700); font-size: var(--fs-small); display:none; margin-top:.3rem; }
.form .is-invalid + .error { display:block; }
.form .is-invalid { border-color: var(--ember-700); }
.form__note { font-size: var(--fs-small); color: var(--muted); margin:0; }
.form__success { display:none; padding: 2rem; background: var(--green-100); border-left: 3px solid var(--green-800); }
.form__success.is-shown { display:block; }

/* ---------- Scroll reveals (opt-in via [data-reveal]) ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__ticker ul { width: 100%; overflow-x: auto; }
  [data-reveal] { opacity:1; transform:none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   RESPONSIVE — intentional layouts, not just stacking
   ===================================================================== */
@media (max-width: 1100px) {
  .feature-grid { grid-auto-rows: 140px; }
  .mega__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .mega__feature { display:none; }
  .topbar > .container > span:first-child { display:none; }
}
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .brand img { height: 40px; }
  .nav, .header-cta, .topbar { display:none; }
  .nav-toggle { display:block; }
  .drawer { display:block; }
  body.drawer-open { overflow:hidden; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg);} .nav-toggle.is-open span:nth-child(2){opacity:0} .nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg);}

  .hero { min-height: 82vh; max-height: none; }
  .hero__overlay { background: linear-gradient(180deg, rgba(3,63,53,.55) 0%, rgba(3,63,53,.78) 100%); }

  .intro, .why, .story, .story--flip, .cat-block, .spec, .contact, .product-hero, .cta-band { grid-template-columns: 1fr; }
  .story__aside, .cat-block__head, .spec__nav, .contact__info { position: static; }
  .spec__nav { display:flex; flex-wrap:wrap; border:0; gap:.4rem; }
  .spec__nav a { border: 1px solid var(--line); margin:0; }
  .spec__nav a.is-active { border-color: var(--amber-500); background: var(--amber-100); }
  .origin { grid-template-columns: 1fr; }
  .origin__media { min-height: 320px; }
  .split-quote { grid-template-columns: 1fr; }
  .split-quote img { max-height: 320px; }
  .cta-band__aside { border-left:0; padding-left:0; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .flow { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .flow::before { display:none; }
  .register__row { grid-template-columns: 1fr; gap: .6rem; padding: 1.4rem 0; }
  .register__index { display:none; }
  .register__thumb { order: -1; aspect-ratio: 21/9; }
  .register__link { margin-top:.4rem; }
  .register__detail { grid-column: 1 / -1; }
  .plist { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr 1fr; }
  .portfolio-strip { grid-template-columns: repeat(3,1fr); }
  .intro__facts { grid-template-columns: 1fr; gap: 1rem; }
  .intro__media { aspect-ratio: 16/9; }
  .why__list { grid-template-columns: 1fr; }
  .why__item, .why__item:nth-child(odd), .why__item:nth-child(even) { padding: 1.4rem 0; border-right: 0; }
}
@media (max-width: 600px) {
  :root { --fs-display: 2.35rem; --fs-h2: 1.75rem; }
  .feature-grid { display:grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: .7rem; }
  .feature-grid .pcard { grid-column: span 1 !important; grid-row: span 1 !important; }
  .feature-grid .pcard:first-child { grid-column: span 2 !important; grid-row: span 1 !important; }
  .feature-grid .pcard:first-child .pcard__name { font-size: 1.5rem; }
  .pcard__desc { display:none; }
  .pcard__body { padding: 1rem; }
  .form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .flow { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr; }
  .hero__actions .btn { width:100%; justify-content:center; }
  .hero__ticker li { padding: .9rem 1.5rem; font-size: 1rem; }
  .hero__ticker li strong { font-size: 1.05rem; }
  .hero__ticker ul { animation-duration: 30s; }
  .cta-band-section::before, .cta-band-section::after { display:none; }
  .btn { padding: .9rem 1.3rem; }
  .hero h1 { font-size: 2.3rem; }
  .hero__routes { display:none; }
  .origin__list li { grid-template-columns: 1fr; gap: .2rem; }
  .contact__info dl { grid-template-columns: 1fr; gap: .2rem .8rem; }
  .contact__info dt { margin-top:.6rem; }
  .product-hero__thumbs { grid-template-columns: repeat(4,1fr); }
  .portfolio-strip { grid-template-columns: 1fr 1fr; }
  .cat-block { padding-block: 2.5rem; }
}