/* ==========================================================================
   Koladiya Industries — design system
   Brand ratio: black 60% / Catalina Blue #0A347F 20% / white 20%
   Type: Bahnschrift (brand) with Barlow Condensed / Semi Condensed fallback
   ========================================================================== */

:root{
  --ink:#0a0a0a;
  --ink-2:#161616;
  --ink-3:#3d3d3d;
  --ink-4:#5a5a5a;
  --mute:#8f8f8f;
  --mute-2:#9a9a9a;
  --line:#e7e7e7;
  --line-2:#efefef;
  --line-3:#d6d6d6;
  --paper:#fff;
  --paper-2:#fafafa;
  --blue:#0a347f;
  --blue-ink:#08295f;
  --on-dark:#c9c9c9;
  --on-dark-2:#8a8a8a;

  --display:'Bahnschrift','Barlow Condensed',system-ui,sans-serif;
  --body:'Bahnschrift','Barlow Semi Condensed',system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;

  --r:10px;
  --r-lg:14px;
  --r-xl:18px;
  --gut:clamp(18px,4.4vw,56px);
  --wrap:1240px;
  /* Section rhythm starts small and only opens up once there is room for it. */
  --sec-y:clamp(34px,4.6vw,68px);
  --sec-y-tight:clamp(24px,3vw,44px);
  --gap:clamp(12px,1.4vw,20px);
  --stack:clamp(12px,1.2vw,16px);
  --head-gap:clamp(16px,2vw,26px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 18px}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec-y)}
.sec--tight{padding-block:var(--sec-y-tight)}
.sec--line{border-top:1px solid var(--line-2)}
.sec--dark{background:var(--ink);color:var(--on-dark)}
.sec--dark .u-hl,.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .eyebrow{color:#8a8a8a}
.sec--paper{background:var(--paper-2)}
/* The brand runs 60 black / 20 Catalina Blue / 20 white, so the black belongs
   in whole sections rather than in type alone. */
.sec--ink{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.sec--ink .u-hl,.sec--ink h2,.sec--ink h3,.sec--ink .card__title,.sec--ink .stat{color:#fff}
.sec--ink .eyebrow,.sec--ink .meta,.sec--ink .lbl{color:#8a8a8a}
.sec--ink .lede,.sec--ink .card__body,.sec--ink .step__m{color:#b9b9b9}
.sec--ink .card{background:#141414;border-color:#262626}
.sec--ink .chip{background:transparent;border-color:#333;color:#c9c9c9}
.sec--ink .chip--static:hover{border-color:#333}
.sec--ink .link-more{color:#fff;border-color:#3a3a3a}
.sec--ink .link-more:hover{border-color:#fff}
/* A ghost button on black must read as an outline, not a white slab. */
.sec--ink .btn--ghost{background:transparent;color:#fff;border-color:#3d3d3d}
.sec--ink .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.sec--ink .figure__l{opacity:.5}
.sec--ink .note{color:#8a8a8a}
/* The trusted-by strip sits on ink on the homepage. */
.sec--ink .logo-strip .ph{background:#141414;border-color:#262626}
.sec--ink .logo-strip .ph__label{color:#6a6a6a}
/* The hero's white configurator is the one bright object on the black. */
.hero.sec--ink .cfg{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}

/* A light island inside a dark section. The section's colour overrides cascade
   into anything nested, so a white card would inherit white type on white —
   this stops that at the island's edge. */
.sec--ink .is-paper,.sec--blue .is-paper{background:var(--paper);color:var(--ink-2)}
.sec--ink .is-paper .card__title,.sec--ink .is-paper .cfg__q,.sec--ink .is-paper .cfg__val,
.sec--ink .is-paper h2,.sec--ink .is-paper h3,.sec--ink .is-paper strong,
.sec--blue .is-paper .card__title,.sec--blue .is-paper .cfg__q,.sec--blue .is-paper .cfg__val{color:var(--ink)}
.sec--ink .is-paper .eyebrow,.sec--ink .is-paper .lbl,.sec--ink .is-paper .meta,
.sec--blue .is-paper .eyebrow,.sec--blue .is-paper .lbl{color:var(--mute)}
.sec--ink .is-paper .card__body,.sec--ink .is-paper .step__m,.sec--ink .is-paper .lede{color:var(--ink-4)}
.sec--ink .is-paper .note{color:var(--ink-4)}
.sec--ink .is-paper .chip,.sec--blue .is-paper .chip{background:var(--paper);border-color:var(--line-3);color:var(--ink-3)}
.sec--ink .is-paper .chip:hover{border-color:var(--ink)}
.sec--ink .is-paper .chip.is-on,.sec--ink .is-paper .chip[aria-pressed="true"],
.sec--blue .is-paper .chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.sec--ink .is-paper .btn--ghost{background:var(--paper);color:var(--ink-2);border-color:var(--line-3)}
.sec--ink .sec-head,.sec--ink .wrap{position:relative;z-index:1}
.sec--ink .table-scroll{border-color:#262626}
.sec--ink table.tbl{background:#141414}
.sec--ink table.tbl th{color:#8a8a8a;border-bottom-color:#262626}
.sec--ink table.tbl td{border-bottom-color:#1e1e1e;color:#c9c9c9}
.sec--ink table.tbl td strong{color:#fff}
.sec--ink .acc details{border-bottom-color:#262626}
.sec--ink .acc{border-top-color:#262626}
.sec--ink .acc summary{color:#fff}
.sec--ink .acc__inner{color:#b9b9b9}
.sec--ink .ph{border-color:#2a2a2a}

/* Catalina Blue as a full field, for the one moment a page needs it. */
.sec--blue{background:var(--blue);color:#dbe3f2;position:relative;overflow:hidden}
.sec--blue .u-hl,.sec--blue h2,.sec--blue .stat{color:#fff}
.sec--blue .eyebrow,.sec--blue .lbl{color:#9fb0d4}
.sec--blue .lede{color:#c9d5ea}
.sec--blue .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.sec--blue .wrap{position:relative;z-index:1}

.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1024px){.g-5,.g-6{grid-template-columns:repeat(3,minmax(0,1fr))}.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4,.g-5,.g-6{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,44px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
.split--flip{grid-template-columns:.85fr 1.15fr}
@media (max-width:900px){.split,.split--even,.split--flip{grid-template-columns:1fr}}

.stack{display:flex;flex-direction:column;gap:var(--stack)}
.stack-sm{display:flex;flex-direction:column;gap:9px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.sec-head{align-items:flex-end;justify-content:space-between;margin-bottom:var(--head-gap);gap:12px}
.sec-head__text{max-width:62ch}
@media (max-width:620px){
  .sec-head{align-items:flex-start;flex-direction:column;gap:8px}
}

/* ---------- type ---------- */
.u-hl,h1,h2,h3,h4{
  font-family:var(--display);font-weight:600;color:var(--ink);
  margin:0;line-height:1.04;letter-spacing:-.004em;text-transform:uppercase;
  text-wrap:balance;
}
.h-xl{font-size:clamp(31px,6vw,74px)}
.h-lg{font-size:clamp(26px,4.4vw,52px)}
.h-md{font-size:clamp(21px,3vw,36px)}
.h-sm{font-size:clamp(19px,2vw,24px)}
.h-xs{font-size:16px;letter-spacing:.01em}

.eyebrow{
  font-family:var(--display);font-weight:500;font-size:12px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mute);
  display:block;
}

.lede{font-size:clamp(15px,1.35vw,18.5px);line-height:1.6;color:var(--ink-3);max-width:62ch;text-wrap:pretty;margin:0}
.prose p{margin:0 0 1em;text-wrap:pretty}
.prose>*:last-child{margin-bottom:0}
.note{font-size:13px;line-height:1.45;color:var(--ink-4);font-style:italic;margin:0}
.meta{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.stat{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--ink);display:block}
.sec--dark .stat{color:#fff}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.stat-row .stat{font-size:clamp(22px,2.3vw,29px)}
@media (max-width:620px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- controls ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:9px;border:1.5px solid var(--ink);
  background:var(--blue);color:#fff;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{background:var(--blue-ink);border-color:var(--blue-ink);text-decoration:none;color:#fff}
.btn--ghost{background:var(--paper);color:var(--ink-2);border-color:var(--line-3)}
.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.btn--dark{background:var(--ink);border-color:var(--ink)}
.btn--dark:hover{background:#000;border-color:#000}
.btn--onDark{background:#fff;color:var(--ink);border-color:#fff}
.btn--onDark:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.btn--sm{padding:8px 14px;font-size:11.5px;letter-spacing:.06em}
.btn--block{width:100%}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-3);border-radius:999px;padding:6px 13px;background:var(--paper);
  font-family:var(--display);font-weight:500;font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  cursor:pointer;
}
.chip:hover{border-color:var(--ink);text-decoration:none}
.chip[aria-pressed="true"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip--static{cursor:default}
.chip--static:hover{border-color:var(--line-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.link-more{
  font-family:var(--display);font-weight:500;font-size:12.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid var(--line-3);padding-bottom:2px;
}
.link-more:hover{border-color:var(--ink);text-decoration:none}

/* ---------- cards / media ---------- */
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);padding:clamp(14px,1.5vw,20px);display:flex;flex-direction:column;gap:10px}
.card--flat{border:0;padding:0}
.card--dark{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
/* Covers whichever heading level the card happens to use, plus the title class. */
.card--dark h2,.card--dark h3,.card--dark h4,.card--dark .u-hl,.card--dark .card__title{color:#fff}
.card--dark .card__body,.card--dark p{color:var(--on-dark)}
.card--dark .lbl,.card--dark .eyebrow{color:var(--on-dark-2)}
.card--pad{padding:clamp(18px,2.2vw,28px)}
.card__title{font-family:var(--display);font-weight:600;font-size:17px;text-transform:uppercase;color:var(--ink);margin:0;line-height:1.1}
.card__body{font-size:14.5px;line-height:1.55;color:var(--ink-4);margin:0}
a.card{color:inherit}
a.card:hover{border-color:var(--ink);text-decoration:none}

/* Photography placeholder — striped until real plant photography lands. */
/* A photography slot is a designed panel carrying the brand's own black, not a
   grey hatch that reads as an unfinished page. The caption still says what is
   to be shot, so the slot doubles as the brief. */
.ph{
  position:relative;overflow:hidden;border-radius:12px;border:1px solid #1e1e1e;
  background:
    radial-gradient(120% 90% at 20% 0%,#232323 0%,transparent 60%),
    linear-gradient(160deg,#141414 0%,#0a0a0a 100%);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
  aspect-ratio:4/3;
}
/* A hairline of brand blue along the top edge. */
.ph::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blue),transparent 70%);
}
.ph--wide{aspect-ratio:16/9}
.ph--tall{aspect-ratio:3/4}
.ph--sq{aspect-ratio:1}
.ph--pack{aspect-ratio:3/4}
/* Pack slots hold a drawn can, so they sit on paper rather than ink. */
.ph--can{
  background:linear-gradient(170deg,#f4f6f9 0%,#e7ebf1 100%);
  border-color:var(--line);padding:clamp(14px,2vw,26px);
}
.ph--can::after{content:none}
.ph--can .can{height:100%;width:auto;margin-inline:auto}
/* Trusted-by slots stay as plain outlines; they hold real client marks later. */
.sec--ink .logo-strip .ph{background:transparent;border-color:#2a2a2a}
.ph--hero{aspect-ratio:16/10}
.ph__label{
  font-family:var(--mono);font-size:9.5px;line-height:1.5;letter-spacing:.06em;
  color:#7b8496;max-width:86%;text-transform:uppercase;position:relative;
}
.ph--can .ph__label{color:#8d95a4}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph>img+.ph__label{display:none}
.ph--video::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:54px;height:54px;border-radius:50%;background:rgba(10,10,10,.82);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.ph--video::before{
  content:"";position:absolute;left:calc(50% + 3px);top:50%;translate:-50% -50%;z-index:2;
  border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;
}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
table.tbl{width:100%;border-collapse:collapse;min-width:640px;background:var(--paper)}
table.tbl th{
  font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);text-align:left;padding:14px 16px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.tbl td{padding:15px 16px;font-size:14.5px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td strong{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:15px}
.tbl--spec th{width:38%;color:var(--ink-4);font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:400;border-bottom:1px solid var(--line-2)}
.tbl--spec td{font-weight:500;color:var(--ink-2)}

/* ---------- accordion (native <details>) ---------- */
.acc{border-top:1px solid var(--line-2)}
.acc details{border-bottom:1px solid var(--line-2)}
.acc summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.6vw,19px);
  text-transform:uppercase;color:var(--ink);line-height:1.2;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;
  border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:translateY(-70%) rotate(45deg);
}
.acc details[open] summary::after{
  border-color:var(--blue);
  transform:translateY(-20%) rotate(-135deg);
}
.acc summary:hover{color:var(--blue)}
/* The body slides open rather than snapping. A grid row animates from 0fr to
   1fr, which is the one way to transition to a height you do not know. */
.acc__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1);
}
.acc details[open] .acc__body{grid-template-rows:1fr}
.acc__inner{
  overflow:hidden;
  padding:0 clamp(0px,6vw,80px) 0 0;
  font-size:15px;line-height:1.6;color:var(--ink-4);
}
.acc details[open] .acc__inner{padding-bottom:20px}
.acc__inner p{margin:0 0 .8em}
.acc__inner>*:last-child{margin-bottom:0}
/* The marker turns rather than swapping glyphs. */
.acc summary::after{transition:transform .28s cubic-bezier(.4,0,.2,1),color .16s ease}
.acc details[open] summary{color:var(--blue)}

/* ---------- header ---------- */
.topbar{
  background:var(--ink);color:var(--on-dark);font-size:12.5px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 0;
}
.topbar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%}
.topbar a{color:var(--on-dark)}
.topbar a:hover{color:#fff}
.topbar__certs{flex:1;min-width:0}
.topbar__sep{color:#585858}
@media (max-width:820px){.topbar__hide{display:none}}

.site-header{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.site-header[data-stuck="1"]{box-shadow:0 6px 20px -14px rgba(0,0,0,.5);border-color:var(--line-3)}
.site-header .wrap{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:11px;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
/* The packaged square mark sits beside a typeset name. */
.brand__mark{width:44px;height:44px;object-fit:contain;flex:none}
.brand__name{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.02;letter-spacing:.01em;white-space:nowrap;text-transform:uppercase}
/* An uploaded custom logo is the whole lockup — give it its own width. */
.brand__logo{width:auto;flex:none;object-fit:contain}
.brand__logo--header{height:42px;max-width:min(280px,34vw)}
.brand__logo--sheet{height:34px;max-width:60vw}
.brand__logo--footer{height:52px;max-width:250px}
.header__spacer{flex:1}
.header__actions{display:flex;align-items:center;gap:10px;flex:none}

.icon-btn{
  width:38px;height:38px;border:1px solid var(--line-3);border-radius:9px;background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;color:var(--ink-4);
}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- mega menu ---------- */
.nav{display:flex;gap:clamp(10px,1.3vw,20px);align-items:center;flex:1 1 auto;min-width:max-content}
.nav__item{position:static}
.nav__top{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:12px 2px;cursor:pointer;background:none;border:0;color:var(--ink-2);
  font-family:var(--display);font-weight:600;font-size:13.5px;
  letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;
  transition:color .16s ease;
}
/* The marker is a bar under the label, drawn in the brand blue. */
.nav__top::before{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--blue);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.nav__item:hover .nav__top,.nav__item:focus-within .nav__top,.nav__top[aria-expanded="true"]{color:var(--ink)}
.nav__item:hover .nav__top::before,.nav__item:focus-within .nav__top::before,.nav__top[aria-expanded="true"]::before{transform:scaleX(1)}
.nav__item.is-current .nav__top{color:var(--ink)}
.nav__item.is-current .nav__top::before{transform:scaleX(1)}
.nav__top::after{
  content:"";width:5px;height:5px;margin-left:2px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.6;
  transition:transform .22s ease,opacity .16s ease;
}
.nav__item:hover .nav__top::after,.nav__item:focus-within .nav__top::after,.nav__top[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg);opacity:1}
.nav__top--plain::after{content:none}

.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-3);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.3);
  z-index:70;padding-block:30px;
  display:none;
}
/* Hover opens the panel on a pointer device; keyboard focus does the same.
   Touch devices have no hover, so there site.js toggles data-open on tap. */
@media (hover:hover) and (pointer:fine){
  .nav__item:hover>.mega{display:block}
}
/* The header's bottom padding sits between the nav button and the panel, so
   moving the pointer down crosses ground that belongs to neither and the hover
   chain breaks. This transparent strip is part of the panel, so crossing it
   keeps .nav__item:hover true all the way in.
   Kept just tall enough to cover that gap: any taller and it would sit over the
   bottom of the neighbouring buttons and swallow their hover. */
.mega::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;
  height:var(--mega-bridge,10px);
}
.nav__item:focus-within>.mega,.mega[data-open="true"]{display:block}
.mega{animation:megaIn .2s cubic-bezier(.4,0,.2,1)}
.mega__inner,.mega__bar{position:relative}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega__inner{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)) .95fr;gap:clamp(18px,2.2vw,38px);align-items:start}
/* Four and five column panels drop the featured card, so no trailing track. */
.mega__inner:not(:has(.mega__feat)){grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:1320px){.mega__inner{gap:clamp(16px,1.8vw,28px)}}
.mega__col{display:flex;flex-direction:column;gap:10px;min-width:0}
.mega__h{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin:0}
.mega__l{font-size:14px;color:var(--ink-2);display:block;line-height:1.3}
.mega__l:hover{color:var(--blue);text-decoration:none}
.mega__l.is-current{color:var(--blue)}
.mega__l.is-current b::after{content:" ●";font-size:8px;vertical-align:middle;opacity:.7}
.mega__l b{font-weight:600;display:block}
.mega__sub{font-size:12px;color:var(--mute-2);line-height:1.35;display:block;margin-top:2px}
.mega__feat{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:11px;background:var(--paper-2)}
.mega__feat .ph{aspect-ratio:16/10}
.mega__bar{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-family:var(--display);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
}
.mega__bar .header__spacer{flex:1}

.nav-toggle{display:none}
/* Below this the seven sections no longer fit a single row, so the header
   swaps to the menu sheet. */
@media (max-width:1200px){
  .nav,.header__actions .btn{display:none}
  .nav-toggle{display:inline-flex}
}

/* ---------- mobile nav (dialog) ---------- */
dialog.sheet{
  border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;
  background:var(--paper);color:var(--ink-2);
}
dialog.sheet::backdrop{background:rgba(10,10,10,.55)}
.sheet__head{display:flex;align-items:center;gap:14px;padding:16px var(--gut);border-bottom:1px solid var(--line-2)}
.sheet__body{padding:8px var(--gut) 120px;overflow-y:auto;height:calc(100% - 74px)}
.sheet__foot{
  position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line-2);
  padding:12px var(--gut);display:flex;gap:10px;
}
.sheet__foot .btn{flex:1}
.m-acc details{border-bottom:1px solid var(--line-2)}
.m-acc summary{
  list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
}
.m-acc summary.is-current{color:var(--blue)}
.m-acc__links a.is-current{color:var(--blue);font-weight:600}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary::after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;font-size:20px;color:var(--mute)}
.m-acc details[open] summary::after{content:"−"}
.m-acc__links{display:flex;flex-direction:column;gap:12px;padding:0 0 18px}
.m-acc__links a{font-size:14.5px;color:var(--ink-3)}

/* ---------- search overlay ---------- */
dialog.search{
  border:0;padding:0;width:min(760px,94vw);border-radius:var(--r-xl);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);margin-top:8vh;
}
dialog.search::backdrop{background:rgba(10,10,10,.5)}
.search__bar{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.search__bar input{
  flex:1;border:0;outline:0;font-family:var(--display);font-weight:500;
  font-size:24px;text-transform:none;color:var(--ink);background:transparent;
}
.search__hint{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.search__foot{padding:14px 20px;background:var(--paper-2);border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-4);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- hero ---------- */
/* Image-led hero. The photograph runs full bleed behind the type, with a scrim
   weighted to the side the headline sits on so the copy stays readable over
   whatever the shot turns out to be. Until the shot exists the section is
   simply the black hero, so nothing is broken by a missing asset. */
.hero--shot{position:relative;isolation:isolate}
.hero__shot{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media{width:100%;height:100%;aspect-ratio:auto!important;border:0;border-radius:0;padding:0;background:none}
.hero__media::after{content:none}
.hero__media .slot__img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero--shot.has-shot .hero__shot::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.82) 38%,rgba(10,10,10,.34) 68%,rgba(10,10,10,.55) 100%),
    linear-gradient(0deg,rgba(10,10,10,.7) 0%,transparent 42%);
}
.hero--shot .wrap{position:relative;z-index:1}
@media (max-width:900px){
  /* On a phone the copy sits over the whole frame, so the scrim is even. */
  .hero--shot.has-shot .hero__shot::after{
    background:linear-gradient(180deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.78) 55%,rgba(10,10,10,.94) 100%);
  }
}
/* The brief shown in an empty slot reads as a spec, not as broken layout. */
.ph__brief{
  display:block;margin-top:8px;font-family:var(--body);font-size:11.5px;
  line-height:1.45;letter-spacing:0;text-transform:none;color:#5f6879;max-width:34ch;margin-inline:auto;
}
.slot__img{display:block;width:100%;height:100%;object-fit:cover}
.hero{padding-block:clamp(28px,4vw,60px)}
.hero__grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(22px,3.2vw,48px);align-items:start}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr}}
.breadcrumbs{font-size:12.5px;color:var(--mute);padding-block:11px;border-bottom:1px solid var(--line-2)}
.breadcrumbs a{color:var(--ink-4)}
.breadcrumbs span{color:var(--mute-2);padding-inline:5px}

/* ---------- configurator ---------- */
.cfg{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);overflow:hidden}
.cfg__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.cfg__step{padding:18px 20px;border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;gap:11px}
.cfg__q{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.cfg__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px 20px;background:var(--paper-2)}
@media (max-width:520px){.cfg__out{grid-template-columns:1fr 1fr}}
.cfg__val{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);line-height:1.1}
.cfg__foot{padding:16px 20px;display:flex;flex-direction:column;gap:9px}
input[type=range]{width:100%;accent-color:var(--blue)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea,.inp{
  width:100%;border:1px solid var(--line-3);border-radius:9px;padding:12px 13px;
  font-family:var(--body);font-size:15px;color:var(--ink-2);background:var(--paper);
}
.field textarea{min-height:104px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--mute-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,52,127,.12)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.form-grid{grid-template-columns:1fr}}
.form-grid .span-2{grid-column:1/-1}
.check{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-3);cursor:pointer;line-height:1.4}
.check input{accent-color:var(--blue);margin-top:3px;flex:none}
.form-note{font-size:12.5px;color:var(--mute-2)}
.form-status{font-size:14px;padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--paper-2)}
.form-status[data-state="ok"]{border-color:#bcd0b6;background:#f2f7f0;color:#2f5427}
.form-status[data-state="err"]{border-color:#e2bcbc;background:#fbf2f2;color:#7d2b2b}

/* ---------- product grid + filters ---------- */
/* ==========================================================================
   Product listing
   Mobile first: the filter panel is a bottom sheet by default and becomes a
   sidebar once there is room for one. Same markup, same inputs, no second copy
   to keep in step.
   ========================================================================== */

.shop{display:grid;grid-template-columns:1fr;gap:0}
.shop__results{min-width:0}

/* Two per row at every width — a pack shot is portrait, so two columns read
   better than one even on a small phone. */
.shop__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.shop__empty{
  margin:28px 0 0;padding:22px;border:1px dashed var(--line-3);border-radius:var(--r-lg);
  font-size:15px;color:var(--ink-4);text-align:center;
}
.shop__empty[hidden]{display:none}
.shop__empty .link-more{display:inline-flex;margin-left:6px}

/* --- the bar above the grid --------------------------------------------- */
.shop__bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line-2);
}
.shop__count{
  font-family:var(--display);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
.shop__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--blue);color:#fff;font-size:10.5px;line-height:1;letter-spacing:0;
}
.shop__badge[hidden]{display:none}
.shop__active{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.shop__active:empty{display:none}
.shop__pill{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--blue);border-radius:999px;padding:5px 7px 5px 11px;
  font-family:var(--display);font-weight:500;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--paper);
}
.shop__pill button{
  background:var(--blue-soft,#eaeff9);border:0;cursor:pointer;border-radius:50%;
  width:16px;height:16px;line-height:1;font-size:12px;color:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.shop__pill button:hover{background:var(--blue);color:#fff}

/* --- the panel ----------------------------------------------------------- */
.filters{display:flex;flex-direction:column;background:var(--paper)}
.filters__head{display:none}
.filters__close{display:none}
.shop-sec{overflow:visible}
.filters__body{display:flex;flex-direction:column;gap:4px}
.filters__group{border-bottom:1px solid var(--line-2)}
.filters__group:last-child{border-bottom:0}
.filters__legend{
  list-style:none;cursor:pointer;position:relative;padding:14px 26px 14px 0;
  font-family:var(--display);font-weight:600;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
}
.filters__legend::-webkit-details-marker{display:none}
.filters__legend::after{
  content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t) var(--ease);
}
.filters__group[open]>.filters__legend::after{transform:translateY(-20%) rotate(-135deg)}
.filters__opts{display:flex;flex-direction:column;gap:2px;padding:0 0 14px}
.filters__opts .check{
  padding:7px 4px;border-radius:7px;gap:10px;align-items:center;
  transition:background var(--t-fast) ease;
}
.filters__opts .check:hover{background:var(--paper-2)}
.check__n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--mute-2)}
.filters__foot{display:none}
.filters-backdrop{display:none}

/* --- phone: bottom sheet ------------------------------------------------- */
@media (max-width:899px){
  .filters{
    position:fixed;left:0;right:0;bottom:0;z-index:75;
    max-height:84vh;border-radius:18px 18px 0 0;
    box-shadow:0 -18px 50px -20px rgba(0,0,0,.55);
    transform:translateY(100%);visibility:hidden;
    transition:transform .3s var(--ease),visibility 0s linear .3s;
  }
  .filters[data-open="true"]{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  .filters__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px var(--gut);border-bottom:1px solid var(--line-2);flex:none;
  }
  .filters__close{display:inline-flex}
  .filters__title{
    font-family:var(--display);font-weight:600;font-size:15px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  }
  .filters__body{
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:4px var(--gut);flex:1;min-height:0;
  }
  .filters__foot{
    display:flex;gap:10px;flex:none;
    padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line-2);background:var(--paper);
  }
  .filters__foot .btn{flex:1}
  .filters__apply{flex:1.6!important}
  .filters-backdrop{
    display:block;position:fixed;inset:0;z-index:74;
    background:rgba(10,10,10,.5);opacity:0;transition:opacity .3s var(--ease);
  }
  .filters-backdrop:not([hidden]){opacity:1}
  .filters-backdrop[hidden]{display:none}
  /* The sheet owns the scroll while it is open. */
  body.is-filtering{overflow:hidden}
}

/* --- desktop: sidebar ---------------------------------------------------- */
@media (min-width:900px){
  .shop{grid-template-columns:246px minmax(0,1fr);gap:clamp(24px,3vw,44px)}
  .shop__grid{gap:clamp(14px,1.6vw,22px)}
  .filters{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
  .shop__filter-btn{display:none}
}


/* --- the product card ---------------------------------------------------- */
.p-card{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  overflow:hidden;display:flex;flex-direction:column;
}
.p-card:hover{border-color:var(--ink)}
.p-card__media{border:0;border-radius:0;border-bottom:1px solid var(--line-2)}
.p-card__body{padding:13px 14px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
/* Service names run long ("Tropical & Exotic Fruit Beverage Manufacturing"), so
   at two columns they must clamp — otherwise the tallest card sets every row's
   height and the shorter ones fill with dead space. */
.p-card__title{
  font-family:var(--display);font-weight:600;font-size:15.5px;text-transform:uppercase;
  line-height:1.12;color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.p-card__title a{color:inherit}
.p-card__sub{
  font-size:13px;color:var(--ink-4);line-height:1.4;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.p-card__seg{font-size:11.5px;color:var(--mute-2)}
.p-card__foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.p-card__price{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);text-transform:uppercase}

/* What the filter uses to take a card out of the grid. */
.is-hidden{display:none!important}

@media (max-width:600px){
  .p-card__body{padding:11px 12px;gap:5px}
  .p-card__title{font-size:13.5px}
  .p-card__sub{font-size:12px;-webkit-line-clamp:2}
  /* The industry line is the first thing to go when space is tight. */
  .p-card__seg{display:none}
  .p-card__foot{padding-top:8px;gap:7px}
  .p-card__price{font-size:13px}
}

/* The selection carried in from the product pages, shown at the top of the
   enquiry form so it is obvious the basket survived the journey. */
.picked{
  border:1px solid var(--blue);border-radius:var(--r-lg);
  background:var(--paper);padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
.picked[hidden]{display:none}
.picked__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.picked__clear{
  background:none;border:0;cursor:pointer;padding:0;
  font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line-3);
}
.picked__clear:hover{color:var(--ink);border-color:var(--ink)}
.picked__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.picked__item{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-3);border-radius:999px;padding:6px 8px 6px 13px;
  font-family:var(--display);font-weight:500;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:var(--paper);
}
.picked__x{
  background:var(--line-2);border:0;cursor:pointer;border-radius:50%;
  width:18px;height:18px;line-height:1;font-size:13px;color:var(--ink-4);
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.picked__x:hover{background:var(--ink);color:#fff}
.sec--ink .picked,.sec--blue .picked{background:#141414;border-color:var(--blue)}
.sec--ink .picked__item{background:transparent;border-color:#3a3a3a;color:#fff}

/* enquiry basket *//* enquiry basket */
.basket{border:1px solid var(--ink);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.basket__n{font-family:var(--display);font-weight:600;font-size:26px;line-height:1;color:var(--ink)}
.basket-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--ink);color:#fff;
  padding:12px var(--gut);display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  /* The bar sits above the mobile action bar, so a percentage slide alone does
     not clear the viewport — visibility is what actually hides it. */
  transform:translateY(140%);visibility:hidden;
  transition:transform .2s ease,visibility 0s linear .2s;
}
.basket-bar[data-on="1"]{transform:none;visibility:visible;transition:transform .2s ease}
@media (max-width:620px){
  /* No room for the item names beside the actions on a phone. */
  .basket-bar [data-basket-names]{display:none}
}
.basket-bar .header__spacer{flex:1;min-width:0}

/* ---------- process / timeline ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.step{scroll-snap-align:start}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:7px;background:var(--paper)}
.step__n{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--blue)}
.step__t{font-family:var(--display);font-weight:600;font-size:15.5px;text-transform:uppercase;color:var(--ink);line-height:1.15}
.step__m{font-size:12.5px;color:var(--mute-2)}

.timeline{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line)}
.timeline__item{padding:0 0 24px 24px;position:relative}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid var(--paper)}
.timeline__yr{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);line-height:1;display:block;margin-bottom:5px}

.stage{display:grid;grid-template-columns:56px 1fr .8fr;gap:clamp(16px,2.2vw,30px);align-items:start;padding-block:clamp(22px,2.8vw,36px);border-top:1px solid var(--line-2)}
@media (max-width:820px){.stage{grid-template-columns:1fr}}
.stage__n{font-family:var(--display);font-weight:600;font-size:40px;line-height:.9;color:#8b93a5}
.sec--ink .stage__n{color:#6b7488}

/* ---------- misc blocks ---------- */
.logo-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:center}
@media (max-width:820px){.logo-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.logo-strip .ph{aspect-ratio:5/2;background:var(--paper-2);border-color:var(--line)}
.logo-strip .ph::after{content:none}
.logo-strip .ph__label{color:var(--mute-2)}

.quote{border-left:3px solid var(--blue);padding-left:20px;font-size:clamp(16px,1.7vw,20px);line-height:1.5;color:var(--ink-2);font-style:normal;margin:0}
.quote__by{display:flex;align-items:center;gap:11px;margin-top:16px}
.quote__by .ph{width:44px;height:44px;aspect-ratio:1;border-radius:50%;flex:none}
/* Too small for a caption — the stripes alone read as "portrait to come". */
.quote__by .ph .ph__label,.author .ph .ph__label,.cert .ph .ph__label{display:none}

.checklist{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-3)}
.checklist li::before{content:"✓";color:var(--blue);font-weight:700;flex:none;line-height:1.5}

.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line-2);padding-bottom:14px;margin-bottom:22px}
.tab-panel[hidden]{display:none}

.cert{display:flex;flex-direction:column;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.cert .ph{width:64px;height:64px;aspect-ratio:1;border-radius:50%;background:var(--ink)}

.dl-row td:first-child{font-weight:500;color:var(--ink-2)}

.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery button{border:0;padding:0;background:none;cursor:pointer;display:block;width:100%;text-align:left}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,94vw)}
dialog.lightbox::backdrop{background:rgba(10,10,10,.85)}
.lightbox__cap{color:#fff;font-size:14px;padding:12px 4px;display:flex;justify-content:space-between;gap:12px}

.cta-band{background:var(--ink);color:var(--on-dark)}
.cta-band .u-hl,.cta-band h2{color:#fff}
.cta-band__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(22px,3vw,44px);align-items:center}
@media (max-width:820px){.cta-band__grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark);font-size:13.5px}
.site-footer a{color:var(--on-dark);transition:color var(--t-fast) ease}
.site-footer a:hover{color:#fff;text-decoration:none}

.footer__top{
  display:grid;grid-template-columns:1.5fr repeat(5,minmax(0,1fr));
  gap:clamp(14px,1.8vw,28px);padding-block:clamp(28px,3.4vw,46px);
}
@media (max-width:1240px){.footer__top{grid-template-columns:1.3fr repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.footer__top{grid-template-columns:1fr 1fr}}

.footer__brand img{filter:invert(1);mix-blend-mode:lighten}
.footer__brand .brand__mark{width:48px;height:48px}
.footer__blurb{margin:8px 0 0;font-size:13px;line-height:1.5;max-width:36ch;color:var(--on-dark-2)}
.footer__meta{gap:5px;margin-top:10px;font-size:13px}
.footer__social{gap:14px;margin-top:4px;font-size:12.5px}

.footer__h{
  font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 12px;
}
.footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px}

/* Columns fold on a phone; site.js opens them once there is room. */
.footer__col{border:0}
.footer__col>summary{list-style:none;cursor:pointer;position:relative}
.footer__col>summary::-webkit-details-marker{display:none}

.footer__mid{border-top:1px solid #262626;padding-block:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.footer__badges{display:flex;gap:8px;flex-wrap:wrap}
.footer__badges .ph{width:78px;aspect-ratio:5/2;background-color:#141414;border-color:#2a2a2a;padding:5px}
.footer__badges .ph__label{color:#6a6a6a;font-size:8.5px;white-space:nowrap}
.footer__bot{border-top:1px solid #262626;padding-block:16px;display:flex;gap:6px 20px;flex-wrap:wrap;font-size:12px;color:var(--on-dark-2)}
.footer__bot .header__spacer{flex:1}

@media (max-width:860px){
  /* One column per row on a phone, each closed until it is asked for. */
  .footer__top{grid-template-columns:1fr;gap:0;padding-block:26px}
  .footer__brand{margin-bottom:18px}
  .footer__blurb,.footer__deskonly{display:none}
  .footer__col{border-top:1px solid #262626}
  .footer__col>summary{padding:14px 28px 14px 0;margin:0}
  .footer__col>summary::after{
    content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;
    border-right:2px solid #6a6a6a;border-bottom:2px solid #6a6a6a;
    transform:translateY(-70%) rotate(45deg);transition:transform var(--t) var(--ease);
  }
  .footer__col[open]>summary::after{transform:translateY(-20%) rotate(-135deg)}
  .footer__list{padding:0 0 16px;gap:11px;font-size:14px}
  .footer__mid{flex-direction:column;align-items:flex-start;gap:16px}
  .footer__badges .ph{width:64px}
}

.newsletter{display:flex;flex-wrap:wrap;gap:8px;max-width:340px}
.form-status--news{flex:1 0 100%;margin:2px 0 0;font-size:13px}
.newsletter input{flex:1;border:1px solid #333;background:#141414;color:#fff;border-radius:9px;padding:11px 12px;font-family:var(--body);font-size:14px}
.newsletter input::placeholder{color:#6a6a6a}

/* ---------- sticky mobile CTA ---------- */
.mobile-cta{display:none}
@media (max-width:760px){
  .mobile-cta{
    display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--paper);border-top:1px solid var(--line-2);padding:10px 14px;
  }
  .mobile-cta .btn{flex:1}
  body{padding-bottom:66px}
  .basket-bar{bottom:66px}
}

/* ---------- cookie banner ---------- */
.cookie{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:80;max-width:640px;
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:0 20px 50px -20px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:12px;
}
.cookie[hidden]{display:none}
@media (max-width:760px){.cookie{bottom:80px}}

/* ---------- sitemap ---------- */
.sitemap-cols{columns:3;column-gap:clamp(24px,3vw,44px)}
.sitemap-cols>*{break-inside:avoid;margin:0 0 30px}
@media (max-width:900px){.sitemap-cols{columns:2}}
@media (max-width:600px){.sitemap-cols{columns:1}}

/* ==========================================================================
   Phone
   The desktop layout carries detail a phone has no room for. Rather than
   shrinking everything, secondary actions, captions and side rails step out,
   and dense rows become swipe rails.
   ========================================================================== */
@media (max-width:760px){
  /* One certification line, clipped rather than wrapped to three. */
  .topbar{padding:7px 0;font-size:11.5px}
  .topbar .wrap{flex-wrap:nowrap}
  .topbar__certs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .site-header .wrap{padding-block:10px;gap:8px}
  .brand__logo--header{height:34px;max-width:52vw}
  /* Search and menu sit at the right edge; the free space falls between them
     and the logo. */
  .header__actions{margin-left:auto;gap:6px}
  .icon-btn{width:38px;height:38px}

  /* Two calls to action is the most a phone screen can carry at once. */
  .hero .row .btn:nth-child(n+3){display:none}
  .hero{padding-block:24px}

  /* Swipe rails instead of tall stacks. */
  .steps{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:64%;
    overflow-x:auto;scroll-snap-type:x proximity;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  }
  .steps::-webkit-scrollbar{display:none}

  .logo-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .stat-row{gap:14px 12px}
  .stat-row .stat{font-size:26px}

  /* Shorter crops so a page of photography is not a page of scrolling. */
  .ph{aspect-ratio:3/2}
  .ph--hero,.ph--wide{aspect-ratio:16/10}
  .ph--tall,.ph--pack{aspect-ratio:4/5}

  .card{gap:9px}
  .quote{padding-left:14px;font-size:16px}
  .stage{gap:14px}
  .stage__n{font-size:30px}

  /* Table headers on a phone are noise; the rows carry their own labels. */
  table.tbl th{font-size:10px;padding:10px 12px}
  table.tbl td{padding:11px 12px;font-size:13.5px}

  .acc summary{font-size:15.5px;padding:15px 34px 15px 0}
  .cta-band__grid{gap:18px}
  .sec--dark .stat-row{gap:12px}
}

/* Tablet: the side rail is the first thing to go. */
@media (max-width:900px){
  .filters{gap:16px}
}

/* ==========================================================================
   Brand graphics
   ========================================================================== */

/* The drawn can. The plant fills one format, so it is the site's main object. */
.can{width:100%;height:100%;max-height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 14px 22px rgba(10,52,127,.22))}
.can-row{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,20px)}
.can-row .can{height:clamp(140px,20vw,240px);width:auto}
.can-row .can--back{height:clamp(112px,16vw,196px);opacity:.75}

/* The mark, oversized and faint, as a ground for dark panels. */
.watermark{
  position:absolute;pointer-events:none;
  width:min(38%,340px);height:auto;right:-4%;bottom:-16%;
  color:#fff;opacity:.035;
}
.sec--blue .watermark{opacity:.07}
@media (max-width:760px){.watermark{width:54%;right:-12%;bottom:-10%}}

/* The production route, as a connected sequence. */
.flow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative;
}
.flow__step{position:relative;padding:0 10px;text-align:center;display:flex;flex-direction:column;gap:7px;align-items:center}
/* The rule that joins the stages, stopping short of each end. */
.flow__step::before{
  content:"";position:absolute;top:19px;left:-50%;width:100%;height:2px;background:#e2e6ee;z-index:0;
}
.flow__step:first-child::before{content:none}
.flow__dot{
  position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue);color:#fff;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;
  box-shadow:0 0 0 5px var(--paper);
}
.flow__label{font-family:var(--display);font-weight:600;font-size:14px;text-transform:uppercase;color:var(--ink);line-height:1.15}
/* Stage labels are sometimes links; they must take the label's colour, not the
   global link blue, which is unreadable on the black panel. */
.flow__label a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t-fast) ease}
.flow__label a:hover{border-bottom-color:currentColor}
.flow__meta{font-size:12px;color:var(--mute-2);line-height:1.35}
.sec--ink .flow__step::before{background:#2a2a2a}
.sec--ink .flow__dot{box-shadow:0 0 0 5px var(--ink)}
.sec--ink .flow__label,.sec--ink .flow__label a{color:#fff}
.sec--paper .flow__dot{box-shadow:0 0 0 5px var(--paper-2)}
@media (max-width:820px){
  .flow{grid-auto-flow:row;grid-auto-columns:none;gap:0;text-align:left}
  .flow__step{flex-direction:row;align-items:flex-start;gap:14px;text-align:left;padding:0 0 20px;flex-wrap:wrap}
  .flow__step::before{top:38px;left:18px;width:2px;height:100%}
  .flow__step:first-child::before{content:""}
  .flow__step:last-child::before{display:none}
  .flow__label{flex:1;min-width:0}
  .flow__meta{width:100%;padding-left:52px;margin-top:-4px}
}

/* Accurate Natural Earth map with export routes from Mundra. */
.mapfield{
  position:relative;overflow:hidden;border-radius:var(--r-lg);isolation:isolate;
  background:
    radial-gradient(80% 72% at 62% 45%,rgba(26,67,132,.36) 0%,transparent 70%),
    linear-gradient(150deg,#0d1730 0%,#080d18 100%);
  border:1px solid #253759;aspect-ratio:1000/563;min-height:260px;margin:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.mapfield::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,13,25,.2),transparent 25%,transparent 76%,rgba(7,13,25,.18));
}
.mapfield__world,.mapfield__routes{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.mapfield__world{z-index:1;object-fit:fill;opacity:.94}
.mapfield__routes{z-index:2;overflow:visible}
.mapfield__routes path{
  fill:none;stroke:#769bec;stroke-width:1.35;stroke-linecap:round;
  stroke-dasharray:4 6;opacity:.55;vector-effect:non-scaling-stroke;
}
.mapfield__legend{
  position:absolute;z-index:5;left:14px;bottom:12px;padding:6px 8px;
  border:1px solid rgba(133,164,221,.28);border-radius:4px;
  background:rgba(5,11,24,.72);backdrop-filter:blur(5px);
  color:#b9c9e7;font-family:var(--display);font-size:9px;font-weight:600;
  letter-spacing:.12em;line-height:1;text-transform:uppercase;
}
.mapfield__pin{
  position:absolute;z-index:6;left:var(--x);top:var(--y);width:0;height:0;
  font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#e0e8f7;
  text-shadow:0 1px 3px #050a14;
}
.mapfield__pin i{
  position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:#72a0ff;border:1px solid #c7d9ff;
  box-shadow:0 0 0 4px rgba(79,125,219,.2),0 0 14px 2px rgba(79,125,219,.65);
}
.mapfield__pin>span{
  position:absolute;left:var(--lx);top:var(--ly);white-space:nowrap;
  padding:3px 4px;border-radius:3px;background:rgba(5,11,24,.66);
}
.mapfield__pin--origin{color:#fff}
.mapfield__pin--origin i{
  width:10px;height:10px;left:-5px;top:-5px;background:#fff;border-color:#fff;
  box-shadow:0 0 0 5px rgba(75,128,235,.28),0 0 20px 4px rgba(75,128,235,.8);
}
@media (prefers-reduced-motion:no-preference){
  .mapfield__routes path{animation:map-route 14s linear infinite}
  .mapfield__pin--origin i{animation:map-origin 2.4s ease-out infinite}
}
@keyframes map-route{to{stroke-dashoffset:-100}}
@keyframes map-origin{0%,45%{box-shadow:0 0 0 4px rgba(75,128,235,.34),0 0 18px 3px rgba(75,128,235,.75)}100%{box-shadow:0 0 0 12px rgba(75,128,235,0),0 0 18px 3px rgba(75,128,235,.5)}}
@media (max-width:760px){
  .mapfield{min-height:0}
  .mapfield__pin{font-size:8px;letter-spacing:.055em}
  .mapfield__pin>span{padding:2px 3px}
  .mapfield__legend{left:8px;bottom:8px;font-size:7.5px;padding:5px 6px}
  .mapfield__routes path{stroke-width:1}
}
@media (max-width:620px){
  .mapfield__pin{font-size:8px}
  .mapfield__pin>span{left:var(--mlx);top:var(--mly)}
}

/* Oversized figures used as the visual, not as a caption. */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:clamp(14px,2vw,28px)}
.figures>*{min-width:0}
.figure__n{
  font-family:var(--display);font-weight:600;line-height:.9;letter-spacing:-.015em;
  /* Sized so the longest figure on the site — 12,500 — still fits its track. */
  font-size:clamp(34px,4.2vw,72px);color:var(--ink);display:block;white-space:nowrap;
}
/* Three figures share the hero's narrower column. */
.hero .figure__n{font-size:clamp(28px,3.1vw,50px)}
.sec--ink .figure__n{color:#fff}
.sec--blue .figure__n{color:#fff}
.figure__l{
  display:block;margin-top:8px;padding-top:9px;border-top:1px solid currentColor;
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;
}


/* ==========================================================================
   Optical centring of uppercase controls
   The display face reserves a descender band that uppercase text never uses,
   so symmetric padding paints about 4px more space below the caps than above
   (measured on .btn at 13px). Two mechanisms are needed because text-box-trim
   only acts on block containers — it does nothing for the inline-flex controls,
   where the text sits in an anonymous flex item.
   ========================================================================== */

/* Block-level uppercase text: trim the line box to the cap and baseline edges
   so padding becomes optical rather than metric, at any size. */
@supports (text-box: trim-both cap alphabetic){
  .acc summary,.m-acc summary,.footer__col>summary,.card__title,.flow__label,
  .step__t,.footer__h,.eyebrow,.lbl,.meta,.mega__h,.cfg__q,.shop__count,.u-hl{
    text-box:trim-both cap alphabetic;
  }
  /* Restated because the trim removes real height from the disclosure rows. */
  .acc summary{padding-block:23px}
  .m-acc summary{padding-block:20px}
}

/* Inline-flex controls: shift the text down by half the measured skew. The
   offset is in em so it tracks each control's own font-size, and the box height
   is unchanged because the two paddings move by equal and opposite amounts. */
/* Half the measured skew. The smaller controls sit at 11.5px where the skew
   works out proportionally smaller, so they get their own value. */
:root{--cap-shift:.153em;--cap-shift-sm:.111em}
.btn{padding-top:calc(12px + var(--cap-shift));padding-bottom:calc(12px - var(--cap-shift))}
.btn--sm{padding-top:calc(8px + var(--cap-shift-sm));padding-bottom:calc(8px - var(--cap-shift-sm))}
.chip{padding-top:calc(6px + var(--cap-shift-sm));padding-bottom:calc(6px - var(--cap-shift-sm))}
.nav__top{padding-top:calc(12px + var(--cap-shift));padding-bottom:calc(12px - var(--cap-shift))}
.filters__toggle{padding-top:calc(14px + var(--cap-shift));padding-bottom:calc(14px - var(--cap-shift))}

/* ---------- motion ---------- */
/* One easing and one duration scale, so nothing on the site moves in a way
   that feels borrowed from somewhere else. */
:root{--ease:cubic-bezier(.4,0,.2,1);--t-fast:.16s;--t:.24s;--t-slow:.4s}

/* Each page settles in rather than appearing.
   Opacity only, and on <main> rather than <body>: a transform on the body —
   even an identity one left behind by a finished animation — makes the body a
   containing block, which would break every position:fixed element on the page
   (sticky header, mobile action bar, cookie banner, popup). */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
#main{animation:pageIn .22s var(--ease)}

@keyframes dialogIn{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
dialog[open]{animation:dialogIn var(--t) var(--ease)}
dialog[open]::backdrop{animation:fadeIn var(--t) var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@keyframes popIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.popup:not([hidden]),.cookie:not([hidden]){animation:popIn var(--t-slow) var(--ease)}

/* Cards and chips lift very slightly under the pointer. */
a.card,.p-card{transition:border-color var(--t-fast) ease,transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
a.card:hover,.p-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -18px rgba(0,0,0,.45)}
.chip{transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.link-more{transition:border-color var(--t-fast) ease,color var(--t-fast) ease}
.icon-btn{transition:border-color var(--t-fast) ease,color var(--t-fast) ease}

@media (prefers-reduced-motion:reduce){
  #main{animation:none}
  .acc__body{transition:none}
}

/* ---------- first-visit popup ---------- */
.popup{
  position:fixed;right:16px;bottom:16px;z-index:85;width:min(400px,calc(100vw - 32px));
  background:var(--paper);border:1px solid var(--ink);border-radius:var(--r-lg);
  padding:22px 24px;box-shadow:0 24px 60px -22px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:11px;
}
.popup[hidden]{display:none}
.popup__x{
  position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer;
  font-size:15px;line-height:1;color:var(--mute);padding:4px;
}
.popup__x:hover{color:var(--ink)}
@media (max-width:760px){.popup{bottom:80px}}
/* Two floating prompts at once is one too many. */
.cookie:not([hidden]) ~ .popup{display:none}

/* ---------- article extras ---------- */
.share{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.share a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line-3);border-radius:8px;padding:7px 12px;
  font-family:var(--display);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.share a:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.author{display:flex;gap:12px;align-items:center}
.author .ph{width:46px;height:46px;aspect-ratio:1;border-radius:50%;flex:none}

/* ---------- editor content fallback ---------- */
.entry-content{max-width:74ch}
.entry-content h2{font-size:clamp(24px,3vw,34px);margin:1.6em 0 .5em}
.entry-content h3{font-size:clamp(19px,2vw,24px);margin:1.4em 0 .4em}
.entry-content p,.entry-content ul,.entry-content ol{font-size:16px;line-height:1.7;color:var(--ink-3)}
.entry-content img{border-radius:var(--r-lg);margin-block:1.4em}
.entry-content blockquote{border-left:3px solid var(--blue);padding-left:20px;margin-left:0;font-size:18px;color:var(--ink-2)}
.entry-content a{text-decoration:underline}