/* ==========================================================================
   Vetriva B.V. — Global Trading
   Design system + site styles
   --------------------------------------------------------------------------
   Edit the tokens in :root to re-skin the whole site.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted) --------------------------------------
   Served from assets/fonts/ rather than the Google Fonts CDN: no third-party
   request, no IP sent abroad on page load (relevant under GDPR for an EU
   company), and one less network dependency.
   ------------------------------------------------------------------------ */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/fraunces-latin-500-italic.woff2') format('woff2')}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Brand */
  --ink:            #06101F;
  --navy:           #0B1E3A;
  --navy-700:       #12305A;
  --navy-500:       #1B4A87;
  /* Deep, authoritative blue — restrained rather than electric */
  --accent:         #1B5FA6;
  --accent-600:     #144B85;
  --accent-700:     #0F3B69;
  --accent-soft:    #EBF1F8;
  --accent-line:    #C6D7EA;
  --gold:           #A98B2E;
  --gold-soft:      #F7F2E2;

  /* Peacock spectrum — used for thin accent rules & highlights only */
  --spectrum: linear-gradient(90deg,#E8174B 0%,#F2542D 14%,#F8B324 28%,#5CC63D 42%,#12B5C9 56%,#1E88E5 70%,#7B3FE4 84%,#E0269B 100%);

  /* Neutrals */
  --white:          #FFFFFF;
  --paper:          #F7F9FC;
  --paper-2:        #EEF2F8;
  --line:           #DCE4EF;
  --line-soft:      #E9EEF6;
  --body:           #3D4B60;
  --muted:          #6B7A90;

  /* Type */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --gutter: 24px;
  /* Squared geometry — corporate rather than consumer */
  --radius: 5px;
  --radius-lg: 8px;
  --radius-sm: 3px;
  --radius-btn: 3px;

  /* Elevation — restrained, no coloured glow */
  --shadow-sm: 0 1px 2px rgba(11,30,58,.05), 0 1px 4px rgba(11,30,58,.04);
  --shadow:    0 1px 3px rgba(11,30,58,.06), 0 8px 20px rgba(11,30,58,.07);
  --shadow-lg: 0 2px 6px rgba(11,30,58,.06), 0 20px 44px rgba(11,30,58,.11);

  --header-h: 84px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent-600);text-decoration:none}
a:hover{color:var(--accent)}
button{font:inherit}
h1,h2,h3,h4,h5{
  margin:0 0 .5em;
  color:var(--navy);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.3rem,1.4rem + 3.2vw,4rem)}
h2{font-size:clamp(1.85rem,1.3rem + 2vw,2.85rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.15em}
li{margin-bottom:.4em}
hr{border:0;height:1px;background:var(--line);margin:3rem 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- 3. Layout helpers -------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding:clamp(60px,7vw,110px) 0}
.section--tight{padding:clamp(44px,4.5vw,72px) 0}
.section--paper{background:var(--paper)}
.section--ink{background:var(--ink);color:#C3CEDE}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.grid{display:grid;gap:28px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split--wide-left{grid-template-columns:1.15fr .85fr}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- 4. Type utilities -------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-600);margin:0 0 18px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--spectrum)}
.section--ink .eyebrow{color:#94B9DD}
.lede{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--muted);line-height:1.7}
.section--ink .lede{color:#9FB0C6}
.section-head{max-width:680px;margin-bottom:clamp(36px,4vw,60px)}
.section-head.center{margin-inline:auto}
.serif{font-family:var(--font-serif);font-weight:600;font-style:normal}

/* ---------- 5. Buttons --------------------------------------------------- */
/* Squared, weighted, no lift and no glow. State is carried by colour and a
   crisp 1px border — the way corporate/industrial sites signal seriousness. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 26px;min-height:48px;
  border-radius:var(--radius-btn);border:1px solid transparent;
  font-weight:600;font-size:.9rem;line-height:1;letter-spacing:.015em;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn svg{flex:none;opacity:.85;transition:transform .2s ease}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn--primary:active{background:var(--accent-700);border-color:var(--accent-700)}

.btn--ghost{background:#fff;border-color:var(--line);color:var(--navy)}
.btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-600)}

.btn--light{background:#fff;border-color:#fff;color:var(--navy)}
.btn--light:hover{background:#EDF2F8;border-color:#EDF2F8;color:var(--accent-600)}

.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);color:#fff}

.btn--sm{min-height:40px;padding:0 18px;font-size:.84rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* Text link with a rule that draws in on hover */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:.92rem;letter-spacing:.015em;
  color:var(--accent-600);padding-bottom:3px;
  border-bottom:1px solid var(--accent-line);
  transition:border-color .16s ease,color .16s ease;
}
.link-arrow:hover{color:var(--accent-700);border-bottom-color:var(--accent-600)}
.link-arrow svg{transition:transform .2s ease}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- 6. Header ---------------------------------------------------- */
.topbar{
  background:var(--ink);color:#8EA1BA;font-size:.8rem;letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:40px}
.topbar a{color:#B9C8DC}
.topbar a:hover{color:#fff}
.topbar__meta{display:flex;gap:22px;align-items:center}

.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-header::after{content:"";display:block;height:2px;background:var(--spectrum);opacity:.75}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}

.brand{display:flex;align-items:center;gap:13px}
.brand img{height:42px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand{flex:none}
.brand__name{font-size:1.32rem;font-weight:800;color:var(--navy);letter-spacing:.14em;white-space:nowrap}
.brand__tag{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:5px;white-space:nowrap}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  padding:10px 14px;border-radius:var(--radius-sm);font-size:.93rem;font-weight:600;color:var(--navy);
  white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
/* Keep the eight-item nav on one line down to the mobile breakpoint, whatever font loads. */
@media (max-width:1320px){
  .nav a{padding:10px 10px;font-size:.88rem}
  .header-cta{padding:12px 20px;font-size:.88rem}
}
@media (max-width:1140px){
  .nav a{padding:9px 7px;font-size:.84rem}
  .header-cta{padding:11px 16px;font-size:.84rem}
}
/* Only in the band where the full nav is still shown and space is tight is the
   tagline dropped. Below 1000px the nav is a burger, so it comes back. */
@media (min-width:1001px) and (max-width:1140px){
  .brand__tag{display:none}
}
.nav a:hover{background:var(--accent-soft);color:var(--accent-600)}
.nav a.is-active{color:var(--accent-600)}
.nav a::after{content:"";display:block;height:2px;background:var(--accent);margin-top:5px;
  transform:scaleX(0);transform-origin:center;transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.nav a:hover::after{transform:scaleX(.5)}
.nav a.is-active::after{transform:scaleX(1)}
.header-cta{margin-left:8px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px}
.nav-toggle span+span{margin-top:5px}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(27,95,166,.46), transparent 62%),
    radial-gradient(760px 520px at 8% 100%, rgba(158,42,110,.16), transparent 60%),
    linear-gradient(160deg,#071427 0%,#0B1E3A 45%,#123058 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 40%,#000 25%,transparent 78%);
}
.hero__inner{position:relative;padding-block:clamp(72px,9vw,130px) clamp(64px,7vw,104px)}
.hero h1{color:#fff;max-width:14ch}
.hero h1 em{font-family:var(--font-serif);font-style:italic;font-weight:500;color:#9DC4E8}
.hero__lede{color:#B4C4DA;font-size:clamp(1.05rem,1rem + .45vw,1.3rem);max-width:56ch;margin-bottom:34px}
/* Quiet credential bar: a single spectrum hairline instead of a rainbow chip. */
.hero__badge{
  display:inline-flex;align-items:center;gap:14px;padding:9px 18px 9px 0;
  border-left:2px solid transparent;border-image:var(--spectrum) 1;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#A9BED6;margin-bottom:30px;padding-left:16px;
}
.hero__badge b{color:#fff;font-weight:700;letter-spacing:.14em}
.hero__badge span{color:#7C93AE}
.hero__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;margin-top:clamp(48px,6vw,76px);
}
.hero__stat{background:rgba(6,16,31,.55);padding:26px 24px}
.hero__stat b{display:block;font-size:clamp(1.7rem,1.2rem + 1.4vw,2.4rem);font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}
.hero__stat span{display:block;margin-top:10px;font-size:.82rem;color:#8FA3BC;letter-spacing:.04em}

/* Page hero (interior pages) */
.page-hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(900px 500px at 82% 0%, rgba(27,95,166,.42), transparent 62%),
    linear-gradient(160deg,#071427 0%,#0B1E3A 60%,#12305A 100%);
  padding:clamp(56px,6vw,92px) 0 clamp(52px,5.5vw,80px);
}
.page-hero h1{color:#fff;margin-bottom:.35em}
.page-hero .lede{color:#A9BBD2;max-width:62ch}
.crumbs{font-size:.82rem;color:#7F93AD;margin-bottom:20px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.crumbs a{color:#9FB7D3}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}

/* ---------- 8. Cards ----------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex;flex-direction:column;height:100%;
}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent-line)}
.card__body{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.card__body p{color:var(--muted);font-size:.95rem;margin-bottom:1em}
.card__body h3{margin-bottom:.4em}
.card__foot{margin-top:auto;padding-top:6px}

/* Category card with image slot */
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--navy);min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:#fff}
.cat-card__media{position:absolute;inset:0;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.cat-card__media img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.cat-card:hover .cat-card__media,.cat-card:hover .cat-card__media img{transform:scale(1.05)}
.cat-card__body>*{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.cat-card:hover .cat-card__body>*{transform:translateY(-3px)}
.cat-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,11,22,.92) 8%,rgba(4,11,22,.55) 48%,rgba(4,11,22,.15) 100%)}
.cat-card__body{position:relative;padding:26px 26px 28px}
.cat-card__body h3{color:#fff;margin-bottom:6px;font-size:1.4rem}
.cat-card__body p{color:#BFCEE1;font-size:.9rem;margin:0 0 14px}
.cat-card__tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);padding:5px 11px;border-radius:2px;margin-bottom:14px;backdrop-filter:blur(4px)}
.cat-card__more{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:#9DC4E8}

/* Feature / value tiles */
.tile{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px 28px;height:100%;transition:border-color .2s ease,box-shadow .2s ease}
.tile:hover{border-color:var(--accent-line);box-shadow:var(--shadow-sm)}
.tile__icon{width:46px;height:46px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-600);margin-bottom:18px}
.tile__icon svg{width:24px;height:24px}
.tile__icon{transition:background .22s ease,color .22s ease,transform .22s cubic-bezier(.22,.61,.36,1)}
.tile:hover .tile__icon{background:var(--accent);color:#fff;transform:translateY(-2px)}
.section--ink .tile:hover .tile__icon{background:var(--accent);color:#fff}
.tile h3{font-size:1.12rem;margin-bottom:.45em}
.tile p{font-size:.94rem;color:var(--muted);margin:0}
.section--ink .tile{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.section--ink .tile:hover{border-color:rgba(255,255,255,.22)}
.section--ink .tile p{color:#9FB0C6}
.section--ink .tile__icon{background:rgba(27,95,166,.24);color:#9DC4E8}

/* ---------- 9. Image placeholder slots ----------------------------------- */
/* Replace .img-slot markup with a real <img> when photography is supplied.  */
.img-slot{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,var(--tint-a,#132D52) 0%,var(--tint-b,#0B1E3A) 100%);
  display:grid;place-items:center;color:rgba(255,255,255,.52);
}
.img-slot::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:18px 18px;
}
.img-slot__label{
  position:relative;text-align:center;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:0 16px;line-height:1.7;
}
.img-slot--1x1{aspect-ratio:1/1}
.img-slot--3x4{aspect-ratio:3/4}
.img-slot--16x9{aspect-ratio:16/9}
.img-slot--wide{aspect-ratio:21/9}
.img-slot--tall{aspect-ratio:2/3}
.img-slot--light{background:linear-gradient(135deg,#EAF1FA 0%,#D8E4F3 100%);color:#5E7CA6}
.img-slot--light::before{background-image:radial-gradient(rgba(11,30,58,.12) 1px,transparent 1px)}
.img-slot--hero{aspect-ratio:auto;height:100%;min-height:420px}
.img-slot--portrait{aspect-ratio:4/5}

/* decorative spectrum frame */
.framed{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.framed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--spectrum);opacity:.85}

/* ---------- 10. Stats / logos strip -------------------------------------- */
.strip{border-block:1px solid var(--line);background:var(--paper)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:20px 48px;align-items:center;justify-content:space-between;padding-block:22px}
.strip__label{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.strip__items{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center}
.strip__item{font-size:.92rem;font-weight:700;color:var(--navy);letter-spacing:.02em;opacity:.72}

/* ---------- 11. Process timeline ----------------------------------------- */
.steps{counter-reset:step;display:grid;gap:0}
.step{position:relative;display:grid;grid-template-columns:96px 1fr;gap:28px;padding:34px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__no{
  counter-increment:step;font-family:var(--font-serif);font-size:2.6rem;font-weight:600;
  color:var(--navy);line-height:1;letter-spacing:-.03em;
}
.step__no::before{content:"0" counter(step)}
.step__no::after{content:"";display:block;width:32px;height:2px;background:var(--spectrum);margin-top:14px}
.step h3{margin-bottom:.35em}
.step p{margin:0;color:var(--muted)}

/* ---------- 12. Tables --------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
thead th{
  background:var(--navy);color:#fff;text-align:left;font-weight:700;font-size:.78rem;
  letter-spacing:.09em;text-transform:uppercase;padding:14px 18px;white-space:nowrap;
}
tbody td{padding:14px 18px;border-top:1px solid var(--line-soft);color:var(--body);vertical-align:top}
tbody tr:nth-child(even) td{background:var(--paper)}
tbody tr:hover td{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}
td b,td strong{color:var(--navy)}

/* ---------- 13. Accordion (FAQ) ------------------------------------------ */
.acc{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.acc__item+.acc__item{border-top:1px solid var(--line-soft)}
.acc__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:0;padding:22px 24px;text-align:left;cursor:pointer;
  font-size:1.02rem;font-weight:700;color:var(--navy);
}
.acc__q:hover{background:var(--paper)}
.acc__q svg{flex:none;width:18px;height:18px;color:var(--accent);transition:transform .25s ease}
.acc__item.is-open .acc__q svg{transform:rotate(45deg)}
/* 0fr -> 1fr animates cleanly without knowing the content height */
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
/* The track child carries no padding of its own, so 0fr collapses it to exactly 0. */
.acc__a-inner{overflow:hidden;min-height:0;padding:0}
.acc__a p{
  margin:0;padding:0 24px 24px;color:var(--muted);font-size:.97rem;max-width:74ch;
  opacity:0;transform:translateY(-4px);
  transition:opacity .26s ease .06s, transform .26s ease .06s;
}
.acc__item.is-open .acc__a{grid-template-rows:1fr}
.acc__item.is-open .acc__a p{opacity:1;transform:none}

/* ---------- 14. Team ----------------------------------------------------- */
.person{text-align:left}
.person .img-slot{aspect-ratio:4/5;margin-bottom:18px}
.person h3{margin-bottom:2px;font-size:1.16rem}
.person__role{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-600);margin-bottom:12px}
.person p{font-size:.93rem;color:var(--muted);margin:0}
.person .is-photo img{object-position:center 22%}
.person__where{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted);margin:-6px 0 12px}
.person__where svg{flex:none;color:var(--accent-600)}
.person__link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--accent-600)}
.person__link:hover{text-decoration:underline}

/* ---------- 15. Forms ---------------------------------------------------- */
.form{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.82rem;font-weight:700;color:var(--navy);letter-spacing:.03em}
.field input,.field select,.field textarea{
  font:inherit;font-size:.96rem;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(27,95,166,.16);
}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{font-size:.82rem;color:var(--muted);margin:0}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3.5vw,42px);box-shadow:var(--shadow)}
.form-status{display:none;padding:14px 18px;border-radius:var(--radius-sm);background:var(--gold-soft);border:1px solid #E6D9A8;color:#7A6314;font-size:.9rem}
.form-status.is-shown{display:block}

/* ---------- 16. Contact / info blocks ------------------------------------ */
.info-list{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.info-list li{display:grid;grid-template-columns:44px 1fr;gap:16px;margin:0}
.info-list .ico{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent-600);display:grid;place-items:center}
.info-list .ico svg{width:20px;height:20px}
.info-list b{display:block;color:var(--navy);font-size:.94rem;margin-bottom:2px}
.info-list span{font-size:.94rem;color:var(--muted)}
.section--ink .info-list .ico{background:rgba(27,95,166,.24);color:#9DC4E8}
.section--ink .info-list b{color:#fff}
.section--ink .info-list span{color:#9FB0C6}

/* ---------- 17. CTA band ------------------------------------------------- */
.cta-band{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(800px 420px at 85% 10%,rgba(27,95,166,.46),transparent 60%),linear-gradient(140deg,#071427,#0F2A4E);
}
.cta-band::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--spectrum);opacity:.8}
.cta-band .wrap{padding-block:clamp(52px,6vw,84px);display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cta-band h2{color:#fff;margin-bottom:.4em}
.cta-band p{color:#A9BBD2;margin:0;max-width:52ch}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}

/* ---------- 18. Footer --------------------------------------------------- */
.site-footer{background:var(--ink);color:#8FA3BC;font-size:.92rem}
.site-footer a{color:#B9C8DC}
.site-footer a:hover{color:#fff}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-block:clamp(48px,5vw,72px)}
/* Same lockup as the header: mark and wordmark side by side, aspect preserved.
   width:auto is load-bearing here — without it the mark stretches to the column. */
.footer-brand .brand{margin-bottom:22px}
.footer-brand .brand img{height:44px;width:auto}
.footer-brand .brand__name{color:#fff;font-size:1.22rem}
.footer-brand .brand__tag{display:block;color:#7A8FA8}
.footer-brand p{font-size:.92rem;color:#8FA3BC;max-width:36ch}
.footer-col h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:10px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:.84rem;color:#6F84A0}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- 19. Product detail page -------------------------------------- */
.prod-head{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,60px);align-items:start}
.prod-gallery{display:grid;gap:14px}
.prod-gallery__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.spec-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.spec-pills li{margin:0;font-size:.82rem;font-weight:600;color:var(--navy);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 14px}
.variety{border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.variety .img-slot{border-radius:0}
.variety__body{padding:22px 22px 24px}
.variety__body h3{font-size:1.08rem;margin-bottom:.3em}
.variety__body p{font-size:.92rem;color:var(--muted);margin-bottom:.9em}
.variety__meta{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.variety__meta li{margin:0;font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--accent-600);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:2px;padding:5px 10px}
.cat-switch{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.cat-switch a{font-size:.87rem;font-weight:600;padding:9px 16px;border-radius:var(--radius-btn);border:1px solid var(--line);color:var(--navy);background:#fff;transition:background .16s ease,border-color .16s ease,color .16s ease}
.cat-switch a:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-600)}
.cat-switch a.is-active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- 20. Map ------------------------------------------------------ */
.map-frame{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.map-frame iframe{display:block;width:100%;height:440px;border:0;filter:saturate(.9)}

/* ---------- 21. Misc ----------------------------------------------------- */
.note{background:var(--gold-soft);border:1px dashed #DCCB8C;border-radius:var(--radius-sm);padding:16px 18px;font-size:.88rem;color:#6F5A12}
.note b{color:#4F400A}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:.95rem}
.kv dt{font-weight:700;color:var(--navy);margin:0}
.kv dd{margin:0;color:var(--muted)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.pill-row li{margin:0;font-size:.85rem;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 15px}
.section--ink .pill-row li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#D6E2F1}
/* Scroll reveal. --d is set per element by main.js to stagger grid children. */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .55s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;will-change:auto}

/* ---------- 22. Responsive ----------------------------------------------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:1000px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:14px var(--gutter) 22px;
    box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 10px}
  .nav a.is-active::after{display:none}
  .header-cta{display:none}
  .nav-toggle{display:block}
  .site-header .wrap{position:relative}
  .split,.split--wide-left,.prod-head{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .cta-band .wrap{grid-template-columns:1fr}
  .cta-band__actions{justify-content:flex-start}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .topbar__meta{gap:16px}
}
@media (max-width:720px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .step__no{font-size:2.1rem}
  .field--row{grid-template-columns:1fr}
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:2px;padding-block:8px}
  .img-slot--hero{min-height:280px}
  .prod-gallery__thumbs{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero__inner>*,.hero__stat,.page-hero .crumbs,.page-hero h1,.page-hero .lede{opacity:1;transform:none}
  .scroll-progress{display:none}
  .acc__a p{opacity:1;transform:none}
  .spec-pills li,.facts__row{opacity:1!important;transform:none!important}
  .eyebrow::before,.step__no::after{transform:none!important}
}
@media print{
  .site-header,.topbar,.site-footer,.cta-band,.nav-toggle{display:none!important}
  body{color:#000}
}


/* ---------- 23. Motion ---------------------------------------------------
   Entrance, scroll progress, and the sticky-header state change. All of it
   is disabled by the prefers-reduced-motion rule in section 22.
   ------------------------------------------------------------------------ */

/* Hero entrance — staggered, runs once on load */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero__inner>*{animation:rise .7s cubic-bezier(.22,.61,.36,1) both}
.hero__inner>.hero__badge{animation-delay:.05s}
.hero__inner>h1{animation-delay:.15s}
.hero__inner>.hero__lede{animation-delay:.27s}
.hero__inner>.btn-row{animation-delay:.38s}
.hero__inner>.hero__stats{animation-delay:.5s}
.hero::before{animation:fade 1.4s ease both}

/* Interior page heroes get the same treatment, quicker */
.page-hero .crumbs{animation:rise .55s cubic-bezier(.22,.61,.36,1) both .04s}
.page-hero h1{animation:rise .55s cubic-bezier(.22,.61,.36,1) both .12s}
.page-hero .lede{animation:rise .55s cubic-bezier(.22,.61,.36,1) both .22s}

/* Hero stat cells wash in one after another */
.hero__stat{animation:fade .5s ease both}
.hero__stat:nth-child(1){animation-delay:.60s}
.hero__stat:nth-child(2){animation-delay:.68s}
.hero__stat:nth-child(3){animation-delay:.76s}
.hero__stat:nth-child(4){animation-delay:.84s}

/* Reading-progress bar in the brand spectrum */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none;background:transparent;
}
.scroll-progress span{
  display:block;height:100%;width:0;background:var(--spectrum);
  transform-origin:left center;transition:width .12s linear;
}

/* Sticky header condenses once the page is scrolled */
.site-header{transition:box-shadow .25s ease,background-color .25s ease}
.site-header .wrap{transition:min-height .28s cubic-bezier(.22,.61,.36,1)}
.site-header .brand img{transition:height .28s cubic-bezier(.22,.61,.36,1)}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line),0 6px 24px rgba(11,30,58,.09);background:rgba(255,255,255,.97)}
.site-header.is-stuck .wrap{min-height:68px}
.site-header.is-stuck .brand img{height:36px}
/* The tagline stays readable when condensed — it is part of the lockup. */
.site-header.is-stuck .brand__name{font-size:1.18rem}
.site-header.is-stuck .brand__tag{font-size:.64rem;margin-top:4px}
.site-header .brand__name,.site-header .brand__tag{
  transition:font-size .28s cubic-bezier(.22,.61,.36,1),margin-top .28s ease;
}

/* Mobile menu slides down rather than snapping */
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav.is-open{animation:menuIn .24s cubic-bezier(.22,.61,.36,1) both}
.nav-toggle span{transition:transform .24s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Counters hold their width so the layout does not jitter while counting */
.hero__stat b{font-variant-numeric:tabular-nums}

/* Table rows and spec pills ease rather than snap */
tbody td{transition:background-color .18s ease}
.spec-pills li,.pill-row li{transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.spec-pills li:hover,.pill-row li:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-600)}

/* Framed images settle up slightly when revealed */
.framed{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease}
.framed:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* Step rows tint as you pass them */
.step{transition:background-color .25s ease}
.step:hover{background:var(--paper)}
.step:hover .step__no{color:var(--accent-600);transition:color .25s ease}


/* ==========================================================================
   24. MOBILE
   A dedicated block rather than scattered tweaks, so phone behaviour is
   readable in one place and easy to adjust.
   ========================================================================== */

/* Respect notched displays */
@supports (padding: max(0px)) {
  .wrap{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
}

/* No grey flash on tap */
a,button,summary{-webkit-tap-highlight-color:rgba(27,95,166,.12)}

/* ---- Tables become stacked records on small screens ---------------------
   A six-column specification table is unreadable on a phone. Below 900px each
   row turns into its own labelled block. main.js writes the data-label values
   from the table head, so this works for every table on the site. */
@media (max-width:900px){
  .table-wrap{border:0;background:none;box-shadow:none;overflow:visible}
  table{min-width:0;width:100%;display:block}
  thead{display:none}
  tbody,tr,td{display:block;width:100%}
  tbody tr{
    border:1px solid var(--line);border-radius:var(--radius);background:#fff;
    margin-bottom:14px;padding:6px 0;box-shadow:var(--shadow-sm);
  }
  tbody tr:nth-child(even) td{background:transparent}
  tbody tr:hover td{background:transparent}
  tbody td{
    border:0;padding:9px 16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    gap:14px;align-items:baseline;font-size:.92rem;
  }
  tbody td+td{border-top:1px solid var(--line-soft)}
  tbody td::before{
    content:attr(data-label);
    font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);line-height:1.5;
  }
  tbody td:first-child{
    background:var(--paper);margin:-6px 0 0;padding:14px 16px;
    grid-template-columns:1fr;border-bottom:1px solid var(--line);
    border-radius:var(--radius) var(--radius) 0 0;
  }
  tbody td:first-child::before{display:none}
  tbody td:first-child b{font-size:1rem}
  tbody tr:last-child{margin-bottom:0}
}

/* ---- Category switcher scrolls instead of wrapping into a block --------- */
@media (max-width:760px){
  .cat-switch{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    padding-bottom:4px;
  }
  .cat-switch::-webkit-scrollbar{display:none}
  .cat-switch a{flex:none;scroll-snap-align:start;min-height:42px;display:inline-flex;align-items:center}
}

/* ---- Touch targets ------------------------------------------------------ */
@media (max-width:1000px){
  .nav-toggle{min-width:44px;min-height:44px;display:grid;place-items:center}
  .nav-toggle span{width:20px}
  .nav a{min-height:48px;display:flex;align-items:center}
}
@media (max-width:760px){
  .topbar .wrap{gap:6px;padding-block:10px}
  .topbar__meta{gap:20px}
  .topbar a{display:inline-block;padding-block:7px;min-height:32px}
  .footer-col li{margin-bottom:2px}
  .footer-col a{display:inline-block;padding-block:9px;min-height:40px}
  .footer-legal a{display:inline-block;padding-block:8px}
  .link-arrow{min-height:40px;align-items:center}
  .acc__q{padding:20px 18px;min-height:56px}
  .acc__a p{padding:0 18px 20px}
  .btn{width:100%;min-height:52px;white-space:normal}
  .btn-row{gap:10px}
  .btn-row .btn{width:100%}
}

/* ---- Legibility: nothing below 12px on a phone -------------------------- */
@media (max-width:760px){
  .brand__tag{font-size:.62rem;letter-spacing:.2em}
  .strip__label{font-size:.75rem}
  .img-slot__label{font-size:.7rem;letter-spacing:.1em}
  .cat-card__tag{font-size:.7rem}
  .eyebrow{font-size:.72rem;letter-spacing:.14em}
  .topbar{font-size:.78rem}
  .form-note,.footer-bottom{font-size:.8rem}
  .person__role,.step p,.tile p{font-size:.95rem}
}

/* ---- iOS zooms any input under 16px on focus — so never go under it ----- */
@media (max-width:760px){
  .field input,.field select,.field textarea{font-size:16px;padding:14px 15px}
  .field textarea{min-height:130px}
}

/* ---- Rhythm and proportion at phone size -------------------------------- */
@media (max-width:760px){
  :root{--gutter:20px}
  .section{padding:52px 0}
  .section--tight{padding:38px 0}
  .grid{gap:18px}
  .hero__inner{padding-block:56px 48px}
  .hero__stats{margin-top:40px}
  .hero__stat{padding:20px 18px}
  .page-hero{padding:44px 0 40px}
  .section-head{margin-bottom:30px}
  .form-card{padding:24px 20px}
  .prod-gallery__thumbs{grid-template-columns:repeat(3,1fr);gap:10px}
  .map-frame iframe{height:300px}
  .cta-band .wrap{padding-block:48px}
  .strip .wrap{padding-block:18px;gap:12px 24px}
  .strip__items{gap:10px 20px}
  .variety__body{padding:18px}
  .card__body{padding:20px}
  .tile{padding:24px 20px}
  .note{font-size:.86rem}
}

/* ---- Very small phones (320–360) ---------------------------------------- */
@media (max-width:380px){
  :root{--gutter:16px}
  h1{font-size:2rem}
  h2{font-size:1.6rem}
  .hero__stats{grid-template-columns:1fr}
  .brand__name{font-size:1.12rem}
  .brand img{height:34px}
  .spec-pills li,.pill-row li{font-size:.78rem;padding:6px 11px}
  .step__no{font-size:1.9rem}
}

/* ---- Landscape phones: reclaim vertical space --------------------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero__inner{padding-block:40px 32px}
  .site-header .wrap{min-height:64px}
  .nav{max-height:70vh;overflow-y:auto}
}


/* ==========================================================================
   25. Accessibility & rendering performance
   ========================================================================== */

/* Keyboard users land here first */
.skip-link{
  position:absolute;left:12px;top:-56px;z-index:200;
  background:var(--accent);color:#fff;
  padding:12px 20px;border-radius:var(--radius-btn);
  font-size:.9rem;font-weight:600;
  transition:top .18s ease;
}
.skip-link:focus{top:12px;color:#fff}
#main:focus{outline:none}

/* NOTE: content-visibility:auto was trialled here and removed. Sections on
   this site range from 700px to 4000px tall, so any contain-intrinsic-size
   guess is wrong by a wide margin, which made scroll position and in-page
   anchors jump. Paint cost is already low (LCP well under 1s), so the
   optimisation was not worth the scrolling regression. */

/* Reserve the aspect ratio for every image slot so nothing shifts on load */
.img-slot img{display:block;width:100%;height:100%;object-fit:cover}

/* Selection in brand colour */
::selection{background:var(--accent);color:#fff}

/* Scrollbar on dark sections keeps the palette */
.cat-switch{scrollbar-color:var(--line) transparent}

/* Print: the spec tables are the reason anyone prints this */
@media print{
  .img-slot,.map-frame,.scroll-progress,.skip-link{display:none!important}
  .section{padding:18px 0!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  .table-wrap{break-inside:avoid}
  thead th{background:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}


/* ==========================================================================
   26. Touch-target sizing (all viewports)
   Small inline links in the top bar, breadcrumbs, footer and contact list
   were 18–22px tall. Padding brings every one to a comfortable target
   without changing how they look.
   ========================================================================== */
.topbar a{display:inline-flex;align-items:center;min-height:40px}
.topbar .wrap{min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:40px}
.footer-col a{display:inline-flex;align-items:center;min-height:40px}
.footer-col li{margin-bottom:0}
.footer-legal a{display:inline-flex;align-items:center;min-height:40px}
.footer-bottom{padding-block:14px}
.info-list a{display:inline-flex;align-items:center;min-height:40px}
.link-arrow{min-height:40px;align-items:center}
.cat-card__more,.card__foot .link-arrow{min-height:36px}

/* ==========================================================================
   27. Minimum legible type
   Nothing on the page renders below 12px.
   ========================================================================== */
.brand__tag{font-size:.7rem}
.eyebrow{font-size:.78rem}
.img-slot__label{font-size:.76rem}
.cat-card__tag{font-size:.76rem}
.strip__label{font-size:.78rem}
.variety__meta li{font-size:.78rem}
.footer-col h4{font-size:.8rem}
.form-note{font-size:.84rem}
.footer-bottom{font-size:.86rem}
.topbar{font-size:.82rem}
tbody td::before{font-size:.74rem}
@media (max-width:760px){
  .hero__badge{
    gap:10px;padding:7px 0 7px 13px;font-size:.7rem;letter-spacing:.1em;
    flex-wrap:wrap;row-gap:2px;
  }
  .hero__badge span{display:none}
  .brand__tag{font-size:.66rem;letter-spacing:.18em}
  .eyebrow{font-size:.76rem;letter-spacing:.13em}
  .img-slot__label{font-size:.75rem;letter-spacing:.09em}
  .cat-card__tag{font-size:.76rem}
}


/* ==========================================================================
   28. Reserved space for JS-rendered regions (Cumulative Layout Shift)
   --------------------------------------------------------------------------
   The catalogue renders from products.json after the HTML paints, so without
   a reservation the footer is shoved down the moment the data lands — a CLS
   of ~0.57 on the product page. Each value below sits just UNDER the smallest
   real height measured at that breakpoint, so the reservation is always
   absorbed by real content and never leaves a gap.

   If you add varieties or table rows, these stay correct: content taller than
   the reservation simply grows past it. Only shrinking a category well below
   these figures would need them revisited.
   ========================================================================== */
#product-detail{min-height:2350px}
#category-grid,#home-categories{min-height:820px}

@media (max-width:1000px){
  #product-detail{min-height:3350px}
  #category-grid,#home-categories{min-height:1100px}
}
@media (max-width:720px){
  #product-detail{min-height:4250px}
  #category-grid,#home-categories{min-height:1980px}
}

/* Once rendered, the reservation is released so a short category cannot leave
   dead space. main.js adds this class after it writes the markup. */
.is-rendered{min-height:0!important}


/* ==========================================================================
   29. Photography
   The aspect-ratio box is always present; the photo sits inside it. That way
   the slot holds its space whether the image loads, fails, or was never
   supplied — so remote images cannot cause layout shift.
   ========================================================================== */
.img-slot.is-photo,.cat-card__media.is-photo{overflow:hidden}
.img-slot.is-photo::before{opacity:0}

.img-slot img,.cat-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .45s ease;
}
.img-slot img.is-loaded,.cat-card__media img.is-loaded{opacity:1}

/* If a photo fails (offline, CDN change, blocked network) the slot falls back
   to the tinted placeholder rather than showing a broken-image icon. */
.img-slot.is-failed img,.cat-card__media.is-failed img{display:none}
.img-slot.is-failed::after,.cat-card__media.is-failed::after{
  content:attr(data-fallback);
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 16px;color:rgba(255,255,255,.55);
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.img-slot.is-failed::before{opacity:.5}

/* A gentle zoom on the framed page images, matching the category cards */
.framed .img-slot img{transition:opacity .45s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.framed:hover .img-slot img{transform:scale(1.03)}

/* Photos on dark sections get a touch more contrast against the background */
.cat-card__media.is-photo img{filter:saturate(1.04)}


/* ==========================================================================
   30. Category card geometry
   --------------------------------------------------------------------------
   .cat-card__media is declared position:absolute, but .img-slot (defined
   later) reset it to position:relative — so a card WITH a placeholder was
   laid out differently from a card WITH a photo, and they came out different
   heights. The media layer is always the background; this makes that explicit
   regardless of which classes it carries.
   ========================================================================== */
.cat-card__media,
.cat-card__media.img-slot{position:absolute;inset:0;aspect-ratio:auto}

/* With the media behind the text, the card needs real height to let the
   photography read. */
.cat-card{min-height:400px}
@media (max-width:1000px){.cat-card{min-height:360px}}
@media (max-width:720px){.cat-card{min-height:320px}}

/* Darken a touch more behind the text now that real photos sit underneath */
.cat-card__media::after{
  background:linear-gradient(to top,rgba(4,11,22,.94) 6%,rgba(4,11,22,.62) 46%,rgba(4,11,22,.22) 100%);
}
.cat-card__media.is-photo::after{content:"";position:absolute;inset:0;z-index:1}
.cat-card__body{z-index:2}


/* ==========================================================================
   31. Build notes
   --------------------------------------------------------------------------
   The yellow .note boxes are instructions for whoever is finishing the site
   (what content the client still owes, how to edit the catalogue). They are
   hidden by default so the site presents as a finished product.

   To see them while working, add data-dev to the html tag of any page:
       <html lang="en" data-dev>
   ========================================================================== */
.note{display:none}
[data-dev] .note{display:block}

/* A real failure must always be visible, dev mode or not. */
.note--error{
  display:block;
  background:#FDECEC;border:1px solid #F0BDBD;color:#8A2A2A;
}
.note--error b{color:#6E1F1F}

/* Loading placeholder: visible, but quiet and unbranded. */
.note--loading{
  display:block;background:none;border:0;padding:0;
  color:var(--muted);font-size:.92rem;
}


/* ==========================================================================
   32. Key-facts list
   A plain definition list of the things buyers ask first. It also happens to
   be the single most useful block for answer engines (ChatGPT, Perplexity,
   Google AI Overviews): each row is a short, self-contained, quotable fact
   in real HTML, which is exactly what they extract.
   ========================================================================== */
.facts{
  margin:0;display:grid;gap:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);
}
.facts__row{
  display:grid;grid-template-columns:minmax(180px,.28fr) 1fr;
  gap:24px;padding:16px 24px;align-items:baseline;
  transition:background-color .18s ease;
}
.facts__row+.facts__row{border-top:1px solid var(--line-soft)}
.facts__row:nth-child(even){background:var(--paper)}
.facts__row:hover{background:var(--accent-soft)}
.facts dt{
  margin:0;font-size:.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);line-height:1.6;
}
.facts dd{margin:0;color:var(--navy);font-size:.97rem;line-height:1.65}
@media (max-width:760px){
  .facts__row{grid-template-columns:1fr;gap:5px;padding:15px 18px}
  .facts dd{font-size:.94rem}
}


/* ==========================================================================
   33. Micro-interactions
   Small, functional movement only. Each one confirms something the visitor
   just did or draws the eye to where an action is. Nothing loops, nothing
   moves on its own, nothing plays while the page is being read — a trading
   company's site should feel steady. All of it is off under
   prefers-reduced-motion via the rule in section 22.
   ========================================================================== */

/* -- Primary buttons: a light sweep crosses on hover, once ---------------- */
.btn--primary{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.17) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn--primary:hover::before{transform:translateX(120%);transition:transform .62s cubic-bezier(.22,.61,.36,1)}

/* -- Eyebrow rule draws itself in when its section arrives ---------------- */
.reveal .eyebrow::before,.section-head .eyebrow::before{
  transform-origin:left center;transform:scaleX(0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1) .12s;
}
.reveal.is-in .eyebrow::before,.is-in .eyebrow::before{transform:scaleX(1)}
.page-hero .eyebrow::before{transform:none}

/* -- Spec pills settle in one after another ------------------------------- */
.spec-pills li{
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.is-in .spec-pills li,.prod-head.is-in .spec-pills li{opacity:1;transform:none}
.spec-pills li:nth-child(1){transition-delay:.05s}
.spec-pills li:nth-child(2){transition-delay:.1s}
.spec-pills li:nth-child(3){transition-delay:.15s}
.spec-pills li:nth-child(4){transition-delay:.2s}
.spec-pills li:nth-child(5){transition-delay:.25s}

/* -- Process steps: the number rule extends as the row is revealed -------- */
.step__no::after{transform-origin:left center;transform:scaleX(.35);transition:transform .5s cubic-bezier(.22,.61,.36,1) .1s}
.step.is-in .step__no::after,.steps .reveal.is-in .step__no::after{transform:scaleX(1)}
.step:hover .step__no::after{transform:scaleX(1.25)}

/* -- Stat cells lift a touch under the pointer ---------------------------- */
.hero__stat{transition:background-color .3s ease}
.hero__stat:hover{background:rgba(27,95,166,.22)}

/* -- Info list icons nudge toward their text ------------------------------ */
.info-list li .ico{transition:transform .25s cubic-bezier(.22,.61,.36,1),background-color .25s ease}
.info-list li:hover .ico{transform:translateX(3px)}

/* -- Footer links slide slightly on hover --------------------------------- */
.footer-col a{transition:color .16s ease,transform .18s cubic-bezier(.22,.61,.36,1)}
.footer-col a:hover{transform:translateX(3px)}

/* -- Accordion rows tint while open --------------------------------------- */
.acc__item{transition:background-color .25s ease}
.acc__item.is-open{background:var(--paper)}
.acc__item.is-open .acc__q{color:var(--accent-600)}

/* -- Table rows shift a hair on hover, like a ledger ---------------------- */
@media (min-width:901px){
  tbody tr{transition:transform .18s cubic-bezier(.22,.61,.36,1)}
  tbody tr:hover{transform:translateX(2px)}
}

/* -- Category switcher: active pill keeps a subtle spectrum underline ----- */
.cat-switch a.is-active{position:relative;overflow:hidden}
.cat-switch a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--spectrum);
}

/* -- Logo settles on first paint ------------------------------------------ */
@keyframes markIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.site-header .brand img{animation:markIn .5s cubic-bezier(.22,.61,.36,1) both}

/* -- Form fields lift their label on focus -------------------------------- */
.field{position:relative}
.field label{transition:color .18s ease}
.field:focus-within label{color:var(--accent-600)}

/* -- Facts rows reveal sequentially --------------------------------------- */
.facts.is-in .facts__row{animation:factIn .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes factIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.facts.is-in .facts__row:nth-child(1){animation-delay:.02s}
.facts.is-in .facts__row:nth-child(2){animation-delay:.05s}
.facts.is-in .facts__row:nth-child(3){animation-delay:.08s}
.facts.is-in .facts__row:nth-child(4){animation-delay:.11s}
.facts.is-in .facts__row:nth-child(5){animation-delay:.14s}
.facts.is-in .facts__row:nth-child(6){animation-delay:.17s}
.facts.is-in .facts__row:nth-child(n+7){animation-delay:.2s}

/* --- brand wall ------------------------------------------------------- */
.brand-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.brand-wall li{background:#fff;aspect-ratio:5/2;display:grid;place-items:center;padding:10px}
.brand-wall span{font-size:.76rem;font-weight:600;color:#9aa8a3;text-align:center}
.brand-wall img{max-width:76%;max-height:60%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.78;transition:filter .2s ease,opacity .2s ease}
.brand-wall li:hover img{filter:none;opacity:1}
@media (max-width:900px){.brand-wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.brand-wall{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   24. REFINEMENT LAYER — September 2026
   --------------------------------------------------------------------------
   A design pass over the whole site. It only overrides, so nothing above
   needed rewriting and the build script is unaffected.

   What changed and why:
   · The rainbow "spectrum" rules read consumer-tech. Redefining one token
     turns every one of them (eyebrow, header hairline, framed images, step
     numbers) into a single brushed-gold rule — trading-house, not start-up.
   · Display headings move to Fraunces. The serif was already loaded and only
     used for one italic word; used properly it carries the authority that a
     bold sans-serif at 800 weight cannot.
   · Hover lifts on cards are gone. Colour and a crisp border carry state.
   · Tighter vertical rhythm, longer measure control, heavier section heads.
   ========================================================================== */

:root{
  --gold:        #B08D3A;
  --gold-600:    #92722A;
  --gold-line:   #E0CFA0;
  --gold-soft:   #FBF7EC;
  /* One hairline, used everywhere the rainbow used to be. */
  --spectrum: linear-gradient(90deg,#8C6C22 0%,#C9A651 38%,#E3CE93 68%,rgba(176,141,58,.18) 100%);
  --shadow-sm: 0 1px 2px rgba(11,30,58,.04);
  --shadow:    0 1px 3px rgba(11,30,58,.05), 0 10px 26px -14px rgba(11,30,58,.22);
  --shadow-lg: 0 2px 8px rgba(11,30,58,.06), 0 28px 60px -30px rgba(11,30,58,.30);
}

/* ---- Display typography -------------------------------------------------- */
h1,h2{
  font-family:var(--font-serif);font-weight:600;
  letter-spacing:-.018em;line-height:1.07;
}
h1{font-size:clamp(2.5rem,1.4rem + 3.4vw,4.15rem)}
h2{font-size:clamp(2rem,1.3rem + 2.1vw,3.05rem)}
h3{font-weight:700;letter-spacing:-.012em}
.lede{max-width:64ch}
.section-head{max-width:720px}
.section-head h2{margin-bottom:.42em}
p{max-width:74ch}
.cat-card__body p,.tile p,.card__body p,.hero__stat span,.footer-col p,td,th{max-width:none}

/* Eyebrow: quieter, with the gold rule rather than a colour chip. */
.eyebrow{font-size:.72rem;letter-spacing:.2em;color:var(--gold-600);gap:12px}
.eyebrow::before{width:28px;height:1px;background:var(--spectrum)}
.section--ink .eyebrow{color:var(--gold-line)}

/* ---- Buttons ------------------------------------------------------------- */
.btn{min-height:50px;font-size:.92rem;letter-spacing:.02em;padding:0 28px}
.btn--primary{background:var(--navy-700);border-color:var(--navy-700)}
.btn--primary:hover{background:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-600)}
.btn:active{transform:none}

/* ---- Header -------------------------------------------------------------- */
.site-header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.site-header::after{height:2px;opacity:1}
.brand__name{letter-spacing:.16em;font-weight:700}
.brand img{height:44px}
.nav a{font-weight:600;color:var(--navy)}
.nav a:hover{background:transparent;color:var(--gold-600)}
.nav a::after{background:var(--gold);height:2px}
.nav a.is-active{color:var(--navy)}
.header-cta{min-height:44px;padding:0 20px}
.topbar{letter-spacing:.03em}

/* ---- Home hero ----------------------------------------------------------- */
/* A photograph behind the type. The gradient alone read like a template. */
.hero{isolation:isolate}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.42;filter:saturate(.72) contrast(1.05);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(105deg,rgba(4,11,22,.95) 0%,rgba(6,20,40,.86) 44%,rgba(8,26,52,.55) 100%),
    linear-gradient(to top,rgba(4,11,22,.9) 0%,transparent 42%);
}
.hero::before{opacity:.55;background-size:76px 76px}
.hero__inner{padding-block:clamp(88px,10vw,148px) clamp(56px,6vw,92px)}
.hero h1{max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 em{color:#E4C67F;font-style:italic}
.hero__lede{color:#C3D2E4;max-width:54ch}
.hero__badge{
  border-left:0;border-image:none;position:relative;padding:0 0 0 40px;
  color:#C9B788;letter-spacing:.2em;font-size:.72rem;
}
.hero__badge::before{
  content:"";position:absolute;left:0;top:50%;width:28px;height:1px;background:var(--spectrum);
}
.hero__badge b{color:#F0E2BE}
.hero__badge span{color:#7E8FA6}
.hero .btn--light{background:var(--gold);border-color:var(--gold);color:#1C1405}
.hero .btn--light:hover{background:#C9A651;border-color:#C9A651;color:#1C1405}

.hero__stats{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);
  border-radius:0;border-left:0;border-right:0;
}
.hero__stat{background:rgba(6,16,31,.42);padding:28px 26px;position:relative}
.hero__stat::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--gold);opacity:.9}
.hero__stat b{font-family:var(--font-serif);font-weight:600;letter-spacing:-.02em}
.hero__stat span{color:#9AAEC6}

/* ---- Interior page hero -------------------------------------------------- */
.page-hero{
  padding:clamp(64px,7vw,104px) 0 clamp(58px,6vw,88px);
  border-bottom:2px solid transparent;border-image:var(--spectrum) 1;
}
.page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 40%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 40%,transparent);
}
.page-hero>*{position:relative;z-index:1}
.page-hero h1{max-width:20ch}
.crumbs{letter-spacing:.06em;font-size:.78rem}

/* ---- Cards --------------------------------------------------------------- */
/* State through border and shadow — no translation. */
.card,.tile{border-color:var(--line);box-shadow:none}
.card--link:hover,.tile:hover{transform:none;border-color:var(--gold-line);box-shadow:var(--shadow)}
.card__body{padding:28px 28px 30px}
.tile{padding:32px 30px;position:relative}
.tile::before{
  content:"";position:absolute;top:-1px;left:-1px;width:0;height:2px;background:var(--gold);
  transition:width .3s cubic-bezier(.22,.61,.36,1);
}
.tile:hover::before{width:56px}
.tile__icon{border-radius:2px;background:var(--gold-soft);color:var(--gold-600)}
.tile:hover .tile__icon{background:var(--navy-700);color:#fff;transform:none}
.section--ink .tile__icon{background:rgba(176,141,58,.18);color:var(--gold-line)}
.section--ink .tile:hover .tile__icon{background:var(--gold);color:#1C1405}

.cat-card{min-height:368px;border-radius:var(--radius)}
.cat-card:hover{transform:none;box-shadow:var(--shadow-lg)}
.cat-card__media::after{background:linear-gradient(to top,rgba(4,11,22,.95) 6%,rgba(4,11,22,.62) 46%,rgba(4,11,22,.12) 100%)}
.cat-card__body{padding:28px 28px 30px}
.cat-card__body h3{font-family:var(--font-serif);font-weight:600;font-size:1.5rem;letter-spacing:-.015em}
.cat-card__tag{
  background:transparent;border:0;border-left:2px solid var(--gold);border-radius:0;
  padding:0 0 0 10px;color:var(--gold-line);letter-spacing:.16em;backdrop-filter:none;margin-bottom:16px;
}
.cat-card__more{color:var(--gold-line)}
.cat-card:hover .cat-card__body>*{transform:none}

/* ---- Product varieties --------------------------------------------------- */
.variety{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.variety:hover{border-color:var(--gold-line)}
.variety__body{padding:24px 24px 26px}
.variety__body h3{font-size:1.18rem;margin-bottom:.4em}
.variety__meta{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft)}
.variety__meta li{
  margin:0;padding:7px 0;font-size:.85rem;color:var(--muted);
  border-bottom:1px dotted var(--line);
}
.variety__meta li:first-child{
  color:var(--navy);font-weight:700;letter-spacing:.04em;font-size:.76rem;text-transform:uppercase;
}
.variety__meta li:last-child{border-bottom:0;padding-bottom:0}

.spec-pills li,.pill-row li{border-color:var(--line);background:#fff}

/* ---- Tables -------------------------------------------------------------- */
.table-wrap{box-shadow:none;border-color:var(--line)}
thead th{background:var(--navy);font-size:.72rem;letter-spacing:.12em;padding:15px 18px}
tbody td{padding:15px 18px;font-size:.9rem}
tbody tr:nth-child(even) td{background:#FAFBFD}
tbody tr:hover td{background:var(--gold-soft)}

/* ---- Process steps ------------------------------------------------------- */
.step{padding:38px 0}
.step__no{font-size:2.9rem;color:var(--navy-700)}
.step__no::after{width:36px;height:1px}
.step h3{font-size:1.24rem}

/* ---- Forms --------------------------------------------------------------- */
.field input,.field select,.field textarea,input[type="text"],input[type="email"],input[type="tel"],select,textarea{
  min-height:50px;border-radius:var(--radius-sm);
}
textarea{min-height:140px}

/* ---- Brand wall ---------------------------------------------------------- */
.brand-wall{border-radius:var(--radius);border-color:var(--line)}
.brand-wall li{aspect-ratio:5/2}

/* ---- Notes, CTA band, footer -------------------------------------------- */
.note{border-left:2px solid var(--gold-line);background:var(--gold-soft)}
.cta-band{position:relative}
.cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--spectrum)}
.cta-band h2{font-size:clamp(1.8rem,1.2rem + 1.7vw,2.6rem)}
.footer-top{padding-block:clamp(48px,5vw,76px)}
.footer-col h4{letter-spacing:.14em;font-size:.76rem;text-transform:uppercase;color:#fff}

/* ---- Framed images ------------------------------------------------------- */
.framed{box-shadow:var(--shadow-lg);border-radius:var(--radius)}
.framed::after{height:2px;opacity:1}

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cat-card__media,.cat-card__media img,.tile::before{transition:none !important}
}

/* ---- Small screens ------------------------------------------------------- */
@media (max-width:760px){
  .hero__inner{padding-block:64px 44px}
  .hero__stat{padding:20px 18px}
  .hero__bg{opacity:.3}
  .section-head{margin-bottom:32px}
  .tile{padding:26px 22px}
}

/* ==========================================================================
   25. PALETTE, BUTTONS, SPEC LISTS, MOBILE — September 2026
   --------------------------------------------------------------------------
   · Palette moves from corporate mid-blue to deep petrol-teal with brass.
     Every token below overrides section 1, so components follow automatically.
   · Buttons get one consistent size, real touch targets and full width on
     phones.
   · Specification tables are gone. Data now renders as .spec-list cards —
     no horizontal scroll, readable at any width.
   ========================================================================== */

:root{
  /* Brand — deep petrol teal */
  --ink:          #05191B;
  --navy:         #0A2A2C;
  --navy-700:     #10484A;
  --navy-500:     #1A6E6A;
  --accent:       #15716B;
  --accent-600:   #0F5A56;
  --accent-700:   #0A4441;
  --accent-soft:  #E9F2F0;
  --accent-line:  #BCD8D3;

  /* Brass — the single warm accent */
  --gold:         #B9873A;
  --gold-600:     #95682A;
  --gold-line:    #E2CCA2;
  --gold-soft:    #FBF6EC;

  /* Neutrals — warm-leaning greys, not blue-greys */
  --paper:        #F2F5F4;
  --paper-2:      #E7EEEC;
  --line:         #D8E2DF;
  --line-soft:    #E8EFED;
  --body:         #334549;
  --muted:        #627679;
}

/* ---- Dark surfaces ------------------------------------------------------- */
.hero{
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(21,113,107,.46), transparent 62%),
    linear-gradient(160deg,#04161A 0%,#0A2A2C 46%,#10484A 100%);
}
.hero::after{
  background:
    linear-gradient(105deg,rgba(3,17,19,.95) 0%,rgba(6,32,34,.86) 44%,rgba(10,52,52,.52) 100%),
    linear-gradient(to top,rgba(3,17,19,.92) 0%,transparent 44%);
}
.page-hero{
  background:
    radial-gradient(900px 500px at 82% 0%, rgba(21,113,107,.40), transparent 62%),
    linear-gradient(160deg,#04161A 0%,#0A2A2C 60%,#10484A 100%);
}
.section--ink{background:var(--ink)}
.cat-card__media::after{background:linear-gradient(to top,rgba(3,17,19,.95) 6%,rgba(3,17,19,.62) 46%,rgba(3,17,19,.12) 100%)}
.cat-card{background:var(--navy)}
.hero__stat{background:rgba(4,22,24,.46)}
.topbar{background:var(--ink)}

/* ---- Buttons — one size, real touch targets ----------------------------- */
.btn{
  min-height:52px;padding:14px 30px;font-size:.93rem;line-height:1.25;
  white-space:normal;text-align:center;border-radius:var(--radius-btn);
  -webkit-tap-highlight-color:transparent;
}
.btn svg{opacity:1}
.btn--primary{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn--primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--primary:active{background:var(--accent-700);border-color:var(--accent-700)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--navy)}
.btn--ghost:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-600)}
.btn--light{background:var(--gold);border-color:var(--gold);color:#1C1405}
.btn--light:hover{background:#CE9C4A;border-color:#CE9C4A;color:#1C1405}
.btn--outline-light{border-color:rgba(255,255,255,.42);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn--sm{min-height:44px;padding:11px 20px;font-size:.86rem}
.btn-row{gap:14px;margin-top:10px}
.header-cta{min-height:46px;padding:12px 22px;font-size:.88rem}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- Specification lists (replaces the spec tables) --------------------- */
.spec-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.spec-row{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:22px 24px 18px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.spec-row:hover{border-color:var(--gold-line);border-left-color:var(--gold);box-shadow:var(--shadow)}
.spec-row__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.spec-row__head h3{
  margin:0;font-family:var(--font-sans);font-weight:700;font-size:1.1rem;
  letter-spacing:-.01em;color:var(--navy);
}
.spec-row__tag{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-600);background:var(--accent-soft);padding:4px 10px;border-radius:2px;
}
.spec-row__facts{margin:0;padding:0;display:grid}
.spec-row__facts>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:9px 0;border-top:1px dotted var(--line);
}
.spec-row__facts dt{color:var(--muted);font-size:.84rem;flex:none;max-width:54%}
.spec-row__facts dd{margin:0;text-align:right;font-size:.87rem;font-weight:600;color:var(--navy)}

/* ---- Accents that still pointed at blue --------------------------------- */
.link-arrow{color:var(--accent-600);border-bottom-color:var(--accent-line)}
.link-arrow:hover{color:var(--gold-600);border-bottom-color:var(--gold)}
.nav a.is-active{color:var(--accent-600)}
.acc__q{color:var(--navy)}
.tile__icon{background:var(--accent-soft);color:var(--accent-600)}
.tile:hover .tile__icon{background:var(--accent);color:#fff}
a{color:var(--accent-600)}
a:hover{color:var(--gold-600)}
tbody tr:hover td{background:var(--accent-soft)}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width:1000px){
  .hero h1{max-width:none}
  .nav{max-height:calc(100vh - var(--header-h));overflow-y:auto}
  .nav a{padding:15px 10px;font-size:1rem;border-bottom:1px solid var(--line-soft)}
}
@media (max-width:760px){
  :root{--gutter:18px}
  h1{font-size:clamp(2.05rem,1.2rem + 3.4vw,2.7rem)}
  h2{font-size:clamp(1.62rem,1.1rem + 2.2vw,2.15rem)}
  h3{font-size:1.12rem}
  .section{padding:54px 0}
  .section--tight{padding:40px 0}
  .section-head{margin-bottom:28px}

  .btn{width:100%;min-height:50px}
  .btn-row{gap:10px;width:100%}
  .btn-row .btn{flex:1 1 100%}
  .cta-band__actions{width:100%}
  .cta-band__actions .btn{width:100%}

  .hero__inner{padding-block:60px 40px}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .hero__stat{padding:18px 16px}
  .hero__stat b{font-size:1.5rem}
  .hero__badge{padding-left:34px;font-size:.68rem}

  .spec-list{grid-template-columns:1fr;gap:12px}
  .spec-row{padding:20px 18px 16px}
  .brand-wall{grid-template-columns:repeat(2,1fr)}
  .cat-card{min-height:296px}
  .cat-card__body{padding:22px 20px 24px}
  .img-slot--hero{min-height:240px}
  .person .img-slot{aspect-ratio:1/1}
  .variety__body{padding:20px 18px 22px}
  .strip .wrap{gap:10px 20px;padding-block:16px}
  .footer-top{gap:30px}
  .framed{border-radius:var(--radius)}
}
@media (max-width:430px){
  .hero__stats{grid-template-columns:1fr}
  .hero__stat::before{width:28px}
  .spec-row__facts>div{flex-direction:column;gap:2px;padding:8px 0}
  .spec-row__facts dt{max-width:none}
  .spec-row__facts dd{text-align:left}
  .brand img{height:36px}
  .brand__name{font-size:1.1rem;letter-spacing:.12em}
  .brand__tag{font-size:.54rem}
  .eyebrow{font-size:.68rem;letter-spacing:.16em}
}

/* ---- Text on dark surfaces: warm-neutral greys to match the teal base --- */
.section--ink{color:#BCCDCB}
.section--ink .eyebrow{color:var(--gold-line)}
.section--ink .lede,.section--ink .tile p,.section--ink .info-list span{color:#9BB0AE}
.section--ink .tile__icon,.section--ink .info-list .ico{background:rgba(21,113,107,.26);color:#9AD0C7}
.page-hero .lede{color:#A6BDBA}
.hero__lede{color:#B9CCC9}
.hero__stat span{color:#93AAA7}
.cat-card__body p{color:#BCCDCB}
.cta-band p{color:#A6BDBA}
.site-footer{color:#8FA5A3}
.footer-brand p{color:#8FA5A3}

/* ---- Info list without icons -------------------------------------------- */
.info-list--plain li{grid-template-columns:1fr;padding-left:16px;position:relative}
.info-list--plain li::before{
  content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}
.info-list--plain{gap:16px}

/* ==========================================================================
   27. FIXES — 21 September 2026
   · The header CTA was wrapping onto two lines after buttons were allowed to
     wrap in section 25.
   · The condensed-header state resized the logo and wordmark on scroll, which
     reflowed the whole header bar. It now only changes its shadow.
   · .variety__meta was still flex from section 19, so the spec rows added in
     section 24 rendered as overflowing pills. Reset properly here.
   ========================================================================== */

/* Header CTA: never wrap, never reflow on scroll */
.header-cta,.btn--nowrap{white-space:nowrap}
.site-header .wrap{min-height:var(--header-h);transition:min-height .2s ease}
.site-header.is-stuck .wrap{min-height:72px}
.site-header.is-stuck .brand img{height:44px}
.site-header.is-stuck .brand__name{font-size:1.32rem}
.site-header.is-stuck .brand__tag{font-size:.6rem;margin-top:5px}
.brand__name,.brand__tag,.brand img{transition:none}
html{scrollbar-gutter:stable}

/* Variety spec rows: a list, not pills */
.variety__meta{display:block;gap:0}
.variety__meta li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:transparent;border:0;border-bottom:1px dotted var(--line);border-radius:0;
  color:var(--muted);font-weight:500;letter-spacing:normal;font-size:.85rem;padding:8px 0;
}
.variety__meta li:hover{background:transparent;color:var(--muted)}
.variety__meta li:first-child{
  color:var(--accent-600);background:var(--accent-soft);border-radius:2px;
  font-weight:700;letter-spacing:.1em;font-size:.68rem;text-transform:uppercase;
  padding:5px 10px;display:inline-block;margin-bottom:10px;border-bottom:0;
}
.variety__meta li:last-child{border-bottom:0;padding-bottom:0}

/* Pills elsewhere keep their box, but never clip their text */
.spec-pills li,.pill-row li{white-space:normal;line-height:1.35;padding:7px 14px}

@media (max-width:760px){
  .header-cta{display:none}
  .site-header.is-stuck .wrap{min-height:64px}
}

/* ==========================================================================
   28. PRODUCT DETAIL PAGES — September 2026
   Photographic hero, sticky category switcher, key facts as a checked list,
   and a per-variety enquiry link that carries the product into the form.
   ========================================================================== */

.page-hero--photo{isolation:isolate;overflow:hidden}
.page-hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.34;filter:saturate(.7) contrast(1.04);
}
.page-hero--photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(3,17,19,.95) 0%,rgba(6,32,34,.84) 52%,rgba(10,52,52,.56) 100%);
}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:24px 0 0;padding:0}
.hero-facts li{position:relative;padding-left:16px;margin:0;font-size:.86rem;color:#B9CCC9}
.hero-facts li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold);
}

/* Category switcher stays reachable while the page scrolls */
.strip--sticky{
  position:sticky;top:72px;z-index:40;
  background:rgba(242,245,244,.94);backdrop-filter:saturate(160%) blur(10px);
}
.cat-switch{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0}
.cat-switch::-webkit-scrollbar{display:none}
.cat-switch a{white-space:nowrap;flex:none}
.cat-switch a.is-active{background:var(--accent-600);border-color:var(--accent-600)}

/* Key facts */
.check-list{list-style:none;margin:4px 0 28px;padding:0;display:grid;gap:11px;grid-template-columns:repeat(2,1fr)}
.check-list li{display:flex;gap:11px;align-items:flex-start;margin:0;font-size:.92rem;color:var(--body)}
.check-list svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--gold)}

/* Variety cards */
.variety{display:flex;flex-direction:column}
.variety__body{display:flex;flex-direction:column;flex:1}
.variety__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;
  font-size:.86rem;font-weight:700;color:var(--accent-600);align-self:flex-start;
}
.variety__cta:hover{color:var(--gold-600)}
.variety__cta svg{transition:transform .2s ease}
.variety:hover .variety__cta svg{transform:translateX(3px)}
.prod-gallery__thumbs .img-slot{border-radius:var(--radius)}

@media (max-width:760px){
  .strip--sticky{top:64px;padding-inline:0}
  .check-list{grid-template-columns:1fr;gap:9px}
  .hero-facts{gap:8px 18px;margin-top:18px}
  .hero-facts li{font-size:.82rem}
}

/* ==========================================================================
   29. PALETTE — GRAPHITE
   --------------------------------------------------------------------------
   No colour preference was given, so this is a decision rather than a guess,
   and the reasoning is written down so it can be argued with:

   The Vetriva mark is a multicoloured peacock — red, amber, cyan, magenta.
   Any saturated brand colour competes with it, which is what made the blue
   and then the teal feel busy. So the site is now graphite and white: neutral
   surfaces, one restrained slate-blue for links and active states, brass kept
   only as hairlines. The logo becomes the only saturated thing on the page,
   which is how a mark like that is normally handled.

   To go back to a coloured scheme, delete this block — sections 25 and 28
   still hold the teal values underneath.
   ========================================================================== */

:root{
  --ink:          #0D1418;
  --navy:         #16212A;
  --navy-700:     #24333F;
  --navy-500:     #3A4E5C;

  --accent:       #1A5B7A;
  --accent-600:   #14506D;
  --accent-700:   #0F4058;
  --accent-soft:  #EDF2F5;
  --accent-line:  #C8D6DE;

  --gold:         #A8823C;
  --gold-600:     #8A6A2D;
  --gold-line:    #DCCCA8;
  --gold-soft:    #F8F5EE;

  --paper:        #F4F6F7;
  --paper-2:      #E8ECEE;
  --line:         #DCE2E5;
  --line-soft:    #EAEEF0;
  --body:         #3A464E;
  --muted:        #6B7880;
}

/* Dark surfaces — graphite, not coloured */
.hero{
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(58,78,92,.55), transparent 62%),
    linear-gradient(160deg,#0A1014 0%,#16212A 48%,#24333F 100%);
}
.hero::after{
  background:
    linear-gradient(105deg,rgba(8,13,16,.95) 0%,rgba(16,24,30,.86) 46%,rgba(30,42,52,.58) 100%),
    linear-gradient(to top,rgba(8,13,16,.92) 0%,transparent 44%);
}
.page-hero{
  background:
    radial-gradient(900px 500px at 82% 0%, rgba(58,78,92,.5), transparent 62%),
    linear-gradient(160deg,#0A1014 0%,#16212A 60%,#24333F 100%);
}
.page-hero--photo::before{
  background:linear-gradient(100deg,rgba(8,13,16,.95) 0%,rgba(16,24,30,.85) 52%,rgba(30,42,52,.58) 100%);
}
.cat-card__media::after{background:linear-gradient(to top,rgba(8,13,16,.95) 6%,rgba(8,13,16,.62) 46%,rgba(8,13,16,.12) 100%)}
.hero__stat{background:rgba(13,20,24,.5)}
.strip--sticky{background:rgba(244,246,247,.94)}

/* Text on dark surfaces */
.section--ink{color:#B9C3C9}
.section--ink .lede,.section--ink .tile p,.section--ink .info-list span{color:#98A5AD}
.section--ink .tile__icon,.section--ink .info-list .ico{background:rgba(255,255,255,.07);color:#C8D6DE}
.page-hero .lede,.cta-band p{color:#A4B1B9}
.hero__lede{color:#B4C1C8}
.hero__stat span,.site-footer,.footer-brand p{color:#8D9AA2}
.cat-card__body p{color:#B9C3C9}
.hero-facts li{color:#B4C1C8}
.crumbs a{color:#A4B1B9}

/* Primary action in graphite; the accent is for links and active states */
.btn--primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn--primary:hover{background:var(--accent-600);border-color:var(--accent-600)}
.btn--primary:active{background:var(--accent-700);border-color:var(--accent-700)}
.hero .btn--light{background:#fff;border-color:#fff;color:var(--navy)}
.hero .btn--light:hover{background:#E9EEF0;border-color:#E9EEF0;color:var(--accent-600)}
.cat-switch a.is-active{background:var(--navy);border-color:var(--navy)}

/* Accents that carried the old hue */
.tile__icon{background:var(--accent-soft);color:var(--accent-600)}
.tile:hover .tile__icon{background:var(--navy);color:#fff}
.variety__meta li:first-child{background:var(--paper-2);color:var(--navy)}
.spec-row{border-left-color:var(--navy-500)}
.spec-row:hover{border-left-color:var(--gold)}
.spec-row__tag{background:var(--paper-2);color:var(--navy)}
.check-list svg{color:var(--accent)}

/* ==========================================================================
   30. HOME HERO (photographic) + BRAND WALL — September 2026
   ========================================================================== */

.hero--photo .hero__bg{opacity:.5;filter:saturate(.55) contrast(1.06)}
.hero--photo::after{
  background:
    linear-gradient(180deg,rgba(8,13,16,.72) 0%,rgba(8,13,16,.55) 45%,rgba(8,13,16,.88) 100%);
}
.hero--photo .hero__inner{text-align:center;padding-block:clamp(84px,11vw,150px) clamp(54px,6vw,92px)}

.hero__title{
  font-family:var(--font-sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,1rem + 6.6vw,6rem);line-height:.94;letter-spacing:-.035em;
  color:#fff;max-width:none;margin:0 0 24px;text-shadow:0 2px 44px rgba(0,0,0,.45);
}
.hero__title span{display:block}
.hero__title-accent{color:#8FBBD4}

.hero--photo .hero__lede{margin:0 auto 0;max-width:54ch;text-align:center;color:#C6D2D8}
.hero__actions{justify-content:center;margin-top:34px}
.btn--hero{
  background:transparent;border:1.5px solid rgba(255,255,255,.62);color:#fff;
  border-radius:999px;padding:16px 34px;font-size:.98rem;min-height:56px;white-space:nowrap;
}
.btn--hero:hover{background:#fff;border-color:#fff;color:var(--navy)}
.hero__pill{
  display:inline-block;margin:34px 0 0;padding:11px 26px;
  border:1px solid rgba(255,255,255,.32);border-radius:999px;
  font-size:.88rem;font-weight:600;color:#D4DEE3;background:rgba(13,20,24,.38);
  backdrop-filter:blur(6px);max-width:none;
}
.hero--photo .hero__stats{margin-top:clamp(50px,6vw,84px);text-align:left}

/* Brand logos read as brands, not as greyed-out placeholders */
.brand-wall li{padding:14px 18px}
.brand-wall img{filter:none;opacity:1;max-width:82%;max-height:56%}
.brand-wall li:hover img{transform:scale(1.04);transition:transform .2s ease}

@media (max-width:760px){
  .hero__title{font-size:clamp(2.1rem,1rem + 8vw,3.2rem);letter-spacing:-.025em}
  .hero--photo .hero__inner{padding-block:66px 44px}
  .btn--hero{min-height:52px;padding:14px 24px;white-space:normal}
  .hero__pill{font-size:.8rem;padding:10px 18px}
}

/* ==========================================================================
   31. HERO IN BLUE + UNIFORM BRAND LOGOS — September 2026
   The hero photograph is duotoned blue rather than sitting under a black
   wash, and every brand logo is given an identical box so the wall reads as
   a grid instead of as 22 differently-sized pictures.
   ========================================================================== */

/* --- Hero: blue duotone ---------------------------------------------- */
.hero--photo{background:#0B3F6B}
.hero--photo .hero__bg{
  opacity:1;filter:grayscale(1) contrast(1.06) brightness(1.06);
}
.hero--photo::after{
  background:linear-gradient(180deg,#12588F 0%,#0E4A7B 44%,#08304F 100%);
  mix-blend-mode:multiply;opacity:.9;
}
.hero--photo::before{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  opacity:.5;
}
.hero--photo .hero__inner{position:relative;z-index:3}
.hero--photo .hero__title{text-shadow:0 3px 26px rgba(4,26,45,.5)}
.hero__title-accent{color:#41B0E8}
.hero--photo .hero__lede{color:#D5E4EE}
.hero--photo .hero__pill{
  border-color:rgba(255,255,255,.42);color:#E4EEF4;background:rgba(8,48,79,.42);
}
.hero--photo .btn--hero{border-color:rgba(255,255,255,.75)}
.hero--photo .btn--hero:hover{background:#fff;border-color:#fff;color:#0E4A7B}
.hero--photo .hero__stats{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.2)}
.hero--photo .hero__stat{background:rgba(8,48,79,.4)}
.hero--photo .hero__stat::before{background:#41B0E8}
.hero--photo .hero__stat span{color:#AFC8D8}

/* --- Brand wall: one box, one size ----------------------------------- */
.brand-wall li{aspect-ratio:5/2;padding:0;display:grid;place-items:center;background:#fff}
.brand-wall img{
  width:140px;height:58px;max-width:78%;max-height:62%;
  object-fit:contain;object-position:center;
  mix-blend-mode:multiply;filter:none;opacity:1;
}
.brand-wall li:hover img{transform:none}

@media (max-width:760px){
  .brand-wall img{width:110px;height:46px}
}

/* ==========================================================================
   32. BRAND WALL — optically balanced
   --------------------------------------------------------------------------
   Constraining every logo to the same box made them equal in area but not to
   the eye: a wide wordmark like Nescafé fills its box while a round mark like
   Lindt looks lost in the same space. Each logo now sets its own scale factor
   (--s in the markup, tuned per brand) against a shared baseline height, which
   is how a printed logo sheet is set. Cells stay identical; the marks inside
   them are balanced.
   ========================================================================== */

.brand-wall{
  grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.brand-wall li{
  aspect-ratio:3/2;padding:18px;background:#fff;display:grid;place-items:center;
  transition:background-color .18s ease;
}
.brand-wall li:hover{background:#FAFBFC}
.brand-wall img{
  height:calc(44px * var(--s,1));width:auto;
  max-width:80%;max-height:70%;object-fit:contain;
  mix-blend-mode:multiply;filter:none;opacity:1;transform:none;
}

@media (max-width:1080px){.brand-wall{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){
  .brand-wall{grid-template-columns:repeat(3,1fr)}
  .brand-wall li{padding:12px;aspect-ratio:3/2}
  .brand-wall img{height:calc(32px * var(--s,1))}
}
@media (max-width:430px){.brand-wall{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   32. HERO SENTENCE HEADLINE + BRAND WALL, SECOND PASS — September 2026
   ========================================================================== */

/* Sentence-case display headline (keeps the scale, drops the shouting) */
.hero__title--sentence{
  text-transform:none;letter-spacing:-.032em;line-height:1.02;
  font-size:clamp(2.2rem,1rem + 4.8vw,4.7rem);
  max-width:17ch;margin-inline:auto;
}
.hero__title--sentence .hero__title-accent{display:inline}
.hero--photo .hero__lede{max-width:64ch;font-size:clamp(1.02rem,.98rem + .45vw,1.22rem)}

/* --- Brand wall, second pass ------------------------------------------
   Bigger cells, real whitespace around each mark, a hairline grid instead
   of hard borders, and one logo box so nothing looks bigger than anything
   else. Marks sit slightly muted and come to full strength on hover. */
.brands-section .brand-wall{
  grid-template-columns:repeat(6,1fr);
  background:var(--line-soft);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;gap:1px;
}
.brand-wall li{
  aspect-ratio:auto;min-height:120px;padding:24px 20px;background:#fff;
  display:grid;place-items:center;
}
.brand-wall img{
  width:132px;height:54px;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;mix-blend-mode:multiply;
  filter:grayscale(.25);opacity:.92;
  transition:filter .2s ease,opacity .2s ease;
}
.brand-wall li:hover img{filter:none;opacity:1;transform:none}

@media (max-width:1080px){
  .brands-section .brand-wall{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .brands-section .brand-wall{grid-template-columns:repeat(3,1fr)}
  .brand-wall li{min-height:92px;padding:16px 12px}
  .brand-wall img{width:96px;height:40px}
}
@media (max-width:460px){
  .brands-section .brand-wall{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   33. WORLDWIDE TRADE ROUTES MAP — September 2026
   Land outlines are Natural Earth data (public domain) decoded from
   world-atlas and written inline, so the map needs no external request.
   ========================================================================== */

.routes-section{background:var(--paper)}
.routes{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:#07223A;box-shadow:var(--shadow-lg);
}
.routes__map{width:100%;height:auto;display:block}
.routes__grid path{stroke:#1D4F7A;stroke-width:.6;fill:none;opacity:.4}
.routes__land path{fill:#123A5E;stroke:#2A6A9C;stroke-width:.5}

.route{
  fill:none;stroke:#35A7E5;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:route-draw 2.1s cubic-bezier(.3,.7,.3,1) forwards;
  animation-delay:calc(.13s * var(--i));
}
@keyframes route-draw{to{stroke-dashoffset:0}}
.node{
  fill:#35A7E5;opacity:0;
  animation:route-node .45s ease forwards;
  animation-delay:calc(.13s * var(--i) + 1.05s);
}
@keyframes route-node{to{opacity:1}}
.hq{fill:#fff}
.hq-glow{fill:#35A7E5;opacity:.24;animation:hq-pulse 3.2s ease-in-out infinite}
@keyframes hq-pulse{0%,100%{opacity:.16}50%{opacity:.34}}

.routes__hq{
  position:absolute;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:#1E8FD5;color:#fff;font-size:.86rem;font-weight:700;
  padding:9px 17px;border-radius:999px;box-shadow:0 8px 22px rgba(3,20,36,.45);
}
.routes__hq svg{width:16px;height:16px;flex:none}

.routes__legend{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;margin:28px 0 0;padding:0;
}
.routes__legend li{margin:0;padding-top:15px;border-top:2px solid var(--line)}
.routes__legend b{display:block;color:var(--navy);font-size:.96rem;margin-bottom:3px}
.routes__legend span{font-size:.88rem;color:var(--muted)}

@media (max-width:860px){
  .routes__legend{grid-template-columns:repeat(2,1fr);gap:16px}
  .routes__hq{font-size:.72rem;padding:7px 12px;gap:6px}
  .routes__hq svg{width:13px;height:13px}
  .route{stroke-width:3}
  .node{r:9}
}
@media (max-width:480px){
  .routes__legend{grid-template-columns:1fr}
  .routes__hq span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .route{stroke-dashoffset:0}
  .node{opacity:1}
}

/* ==========================================================================
   34. LEADERSHIP — PHOTO LEFT, TEXT RIGHT (September 2026)
   The three-up grid stretched each portrait to full column width, so the
   photographs dominated the page. They are now small and fixed, with the
   biography running beside them.
   ========================================================================== */

.people{display:grid;gap:18px}
.person{
  display:grid;grid-template-columns:168px 1fr;gap:clamp(20px,3vw,34px);
  align-items:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;text-align:left;
}
.person__photo .img-slot{
  aspect-ratio:1/1;width:168px;border-radius:var(--radius);margin:0;
}
.person__photo .img-slot img{object-position:center 20%}
.person__info{display:flex;flex-direction:column}
.person__info h3{margin:0 0 3px;font-size:1.24rem}
.person__info p{margin:0;max-width:72ch}
.person__role{margin-bottom:8px}
.person__where{margin:0 0 12px}
.person__link{margin-top:14px;align-self:flex-start}

@media (max-width:640px){
  .person{grid-template-columns:1fr;gap:16px;padding:20px}
  .person__photo .img-slot{width:120px}
}

/* Person card — centred circular photo (Option C) */
.people--grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.person-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 20px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.person-card:hover{
  box-shadow:0 6px 24px rgba(11,30,58,.09);
  transform:translateY(-3px);
  border-color:var(--accent-line);
}
.person-card__photo{
  width:115px;
  height:115px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--accent-soft);
  margin-bottom:14px;
  flex:none;
}
.person-card__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.person-card__name{
  font-size:1rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 5px;
  line-height:1.3;
}
.person-card__role{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-600);
  margin-bottom:8px;
}
.person-card__where{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:16px;
}
.person-card__where svg{flex:none;opacity:.7}
.person-card__link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:#fff;
  background:var(--accent-600);
  padding:6px 16px;
  border-radius:20px;
  text-decoration:none;
  transition:background .18s;
}
.person-card__link:hover{
  background:var(--accent-700);
  color:#fff;
  text-decoration:none;
}
@media (max-width:860px){
  .people--grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:540px){
  .people--grid{grid-template-columns:1fr;gap:14px}
}

/* ==========================================================================
   35. ABOUT PAGE COMPONENTS — September 2026
   ========================================================================== */

/* Quote band */
.quote-band{padding:clamp(44px,5vw,72px) 0}
.quote-band__text{
  font-family:var(--font-serif);font-weight:600;color:#fff;margin:0 auto 10px;
  font-size:clamp(1.4rem,1rem + 1.7vw,2.2rem);line-height:1.25;max-width:24ch;
}
.quote-band__by{margin:0;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-line)}

/* Vision / mission panels */
.panel-lg{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,38px);height:100%;
}
.panel-lg h3{font-size:1.32rem;margin-bottom:.5em}
.panel-lg p{color:var(--muted);margin:0}

/* Capability lists */
.cap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px)}
.cap-block h3{font-size:1.1rem;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--gold-line)}
.cap-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cap-list li{
  position:relative;margin:0;padding-left:20px;font-size:.93rem;color:var(--body);
}
.cap-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--gold);
}
@media (max-width:820px){.cap-grid{grid-template-columns:1fr;gap:28px}}

/* Checked list without icons */
.checks--plain li{position:relative;padding-left:22px;display:block}
.checks--plain li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--gold);
}

/* ==========================================================================
   36. INFO LIST SAFETY NET — September 2026
   .info-list reserves a 44px column for its icon. A list item written without
   one had its text squeezed into that column, one word per line. Items with
   no icon now take the full width whether or not the --plain class is used.
   ========================================================================== */
.info-list li:not(:has(.ico)){grid-template-columns:1fr}
.info-list--plain li{grid-template-columns:1fr}

/* ==========================================================================
   37. PRODUCT IMAGERY — September 2026
   A larger lead image with switchable thumbnails, deeper category cards, and
   a slow zoom on variety photographs so the pages carry the pictures better.
   ========================================================================== */

.prod-gallery{gap:12px}
.prod-gallery__main .img-slot{aspect-ratio:4/3;border-radius:var(--radius-lg)}
.prod-gallery__main img{transition:opacity .25s ease}
.prod-gallery__thumbs{grid-template-columns:repeat(4,1fr);gap:12px}
.prod-gallery__thumb{
  padding:0;border:0;background:none;cursor:pointer;border-radius:var(--radius);
  overflow:hidden;position:relative;display:block;
}
.prod-gallery__thumb .img-slot{border-radius:var(--radius);margin:0}
.prod-gallery__thumb::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  border:2px solid transparent;transition:border-color .18s ease;
}
.prod-gallery__thumb:hover::after{border-color:var(--gold-line)}
.prod-gallery__thumb.is-active::after{border-color:var(--gold)}
.prod-gallery__thumb img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.prod-gallery__thumb:hover img{transform:scale(1.06)}

/* Category cards carry their photograph better when they are taller */
.cat-card{min-height:400px}
.cat-card .img-slot,.cat-card__media img{transition:transform .8s cubic-bezier(.22,.61,.36,1)}

/* Variety photographs */
.variety .img-slot{overflow:hidden}
.variety .img-slot img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.variety:hover .img-slot img{transform:scale(1.05)}

@media (max-width:760px){
  .cat-card{min-height:320px}
  .prod-gallery__thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
}

/* ==========================================================================
   38. LOGISTICS BLOCK + INCOTERMS — September 2026
   ========================================================================== */

.logistics-photo{position:relative}
.ship-modes{
  position:absolute;left:clamp(14px,3%,28px);right:clamp(14px,3%,28px);bottom:clamp(14px,3%,26px);
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
}
.ship-modes li{
  display:flex;align-items:center;gap:12px;margin:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-radius:999px;padding:12px 20px;
  font-size:.92rem;font-weight:700;color:var(--navy);
}
.ship-modes svg{width:19px;height:19px;flex:none;color:var(--accent)}

.inco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.inco{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 20px;text-align:center;transition:border-color .2s ease,box-shadow .2s ease;
}
.inco:hover{border-color:var(--gold-line);box-shadow:var(--shadow)}
.inco b{
  display:block;font-family:var(--font-sans);font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);
  font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1;
}
.inco span{display:block;margin-top:9px;font-size:.9rem;color:var(--muted)}

@media (max-width:760px){
  .inco-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .inco{padding:24px 12px}
  .ship-modes{position:static;margin-top:12px}
  .ship-modes li{background:var(--paper);border:1px solid var(--line);font-size:.86rem;padding:11px 16px}
}
@media (max-width:420px){.inco-grid{grid-template-columns:1fr}}

/* ==========================================================================
   39. COMPACT ROUTES GRAPHIC — September 2026
   The same drawn map used on the home page, at contact-panel size.
   ========================================================================== */
.routes--compact{border-radius:var(--radius);box-shadow:var(--shadow)}
.routes--compact .routes__hq{font-size:.68rem;padding:6px 11px;gap:5px}
.routes--compact .routes__hq svg{width:12px;height:12px}
.routes--compact .route{stroke-width:3.2}
@media (max-width:520px){
  .routes--compact .routes__hq span{display:none}
}

/* ==========================================================================
   40. HEADER CTA CLIPPING — September 2026
   The header is a flex row, and the CTA was allowed to shrink below its own
   text. Before the web fonts load the nav links are set in the fallback face
   and run wider, so the button lost width and clipped "Get a quote"; once the
   fonts swapped in, the space came back and it looked fine. Pinning the button
   and letting the nav absorb the difference fixes it at every stage of load.
   ========================================================================== */
.site-header .brand{flex:0 0 auto}
.site-header .nav{flex:1 1 auto;min-width:0;justify-content:flex-end}
.header-cta{flex:0 0 auto;white-space:nowrap}
@media (max-width:1000px){
  .site-header .nav{flex:initial;justify-content:flex-start}
}

/* ==========================================================================
   41. HEADER OVERFLOW — September 2026
   Pinning the CTA in section 40 stopped it clipping, but the nav then had
   nowhere to give: eight links plus the brand plus the button do not fit
   between roughly 1000 and 1240px, and with the nav right-aligned the overflow
   spilled left across the wordmark. The nav no longer shrinks below its
   content, and the burger takes over earlier, before the row gets that tight.
   ========================================================================== */
.site-header .nav{flex:0 1 auto;min-width:auto;justify-content:flex-start;flex-wrap:nowrap}

@media (max-width:1240px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 22px;box-shadow:var(--shadow);
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 10px;font-size:1rem;min-height:48px;display:flex;align-items:center;
         border-bottom:1px solid var(--line-soft)}
  .nav a::after,.nav a.is-active::after{display:none}
  .nav a.is-active{color:var(--accent-600)}
  .nav-toggle{display:grid;min-width:44px;min-height:44px;place-items:center}
  .site-header .wrap{position:relative}
  .header-cta{display:inline-flex}
}
@media (max-width:640px){
  .header-cta{display:none}
}