/* ==========================================================================
   Elan Impex — "The Still"
   A botanical, technical design system. Deep distillery green, amber oil, warm paper. Serif display for heritage, grotesque for reading, mono for
   specification data.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2?v=1dc044f4") format("woff2");
  font-weight:400 700;font-display:swap;font-style:normal;}/* ---------- tokens ----------
   Palette per the client's design brief: Deep Navy, Warm Off-White, Muted Sage and
   Warm Sand/Brass over Charcoal text. The brief also says explicitly not to use the
   traditional green/orange/yellow "essential oil" scheme, which is what this
   replaced.

   Two of the brief's five colours cannot carry small text on the brief's own
   background: Muted Sage #879C8A is 2.7:1 and Brass #C5A66A is 2.1:1, against the
   4.5:1 that AA requires. Both are kept at their specified values for large text, rules, dots and icons, with darker variants alongside for anything set small.
   ---------------------------------------------------------------------------- */
:root{
  --navy:#123047;
  --navy-deep:#0C1F2E;
  --navy-mid:#2D485B;
  --charcoal:#283238;
  --brass:#C5A66A;
  --brass-bright:#D8BE8A;
  --brass-glow:#E8D3A6;
  --paper:#F7F5F0;
  --paper-2:#ECECE6;
  --paper-3:#E1E3DC;
  --sage:#566859;          /* sage darkened for small text: 4.6:1 on off-white */
  --sage-light:#879C8A;    /* the brief's Muted Sage: 2.7:1, decorative only */
  --faint:#5A6660;         /* "On request" and em-dash placeholders */
  --brass-text:#785F2F;    /* the brief's Brass is 2.1:1, so large text only */
  --line:#DADAD6;
  --line-dark:#2A4257;
  --white:#fff;

  /* Newsreader: a text serif drawn for reading — calmer than Fraunces, whose
     SOFT/WONK axes read as eccentric at display sizes.
     Source Sans 3: humanist, large x-height, open apertures. Easier on the eye
     than IBM Plex Sans, which is an engineered face and reads mechanical. */
  /* The brief specifies Inter and one consistent family throughout, so all three
     roles resolve to it. --f-mono survives as a role, not a face: figures that need
     to line up in a column get tabular-nums from Inter instead of a second file. */
  --f-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1220px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(52px,6.2vw,94px);   /* was up to 132px top AND bottom: 264px of air between bands */
  --r:2px;                 /* deliberately near-square: apothecary label, not app UI */

  --ease:cubic-bezier(.22,.61,.36,1);
  /* Card and step titles: an H3 role, kept inside the brief's 22-28px H3 band. */
  --h3-card:clamp(1.375rem,1.5vw,1.5rem);
  --ease-out:cubic-bezier(.16,1,.3,1);
}*, *::before, *::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{
  margin:0;background:var(--paper);color:var(--charcoal);
  font-family:var(--f-body);font-size:17.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* `clip` guards overflow WITHOUT making body a scroll container,
     which `hidden` does — and that silently breaks position:sticky. */
  overflow-x:clip;
}img{max-width:100%;height:auto;display:block}a{color:inherit}button{font:inherit}::selection{background:var(--brass-glow);color:var(--navy-deep)}:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}/* ---------- type ---------- */
/* Sizes and weights are the brief's table verbatim: H1 48-56/34-40, H2 32-40/28-32, H3 22-28/21-24, headings at 1.15-1.3 line spacing. The clamps hit the mobile
   figure at 375px and the desktop figure by 1400px. */
h1, h2, h3, h4{font-family:var(--f-display);font-weight:600;line-height:1.22;
  letter-spacing:-.018em;margin:0;text-wrap:balance}h1{font-size:clamp(2.125rem,4.7vw,3.5rem);font-weight:700;line-height:1.15;letter-spacing:-.022em}h2{font-size:clamp(1.75rem,3vw,2.5rem)}h3{font-size:clamp(1.3125rem,2vw,1.75rem);letter-spacing:-.012em}h4{font-size:1.0625rem;font-weight:600;letter-spacing:-.006em}p{margin:0 0 1.1em}.lead{font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.6;color:#343E45;max-width:62ch}.eyebrow{
  font-family:var(--f-body);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-text);display:inline-flex;align-items:center;gap:.7em;margin:0 0 1.1rem;
  font-weight:500;
}.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}.on-dark .eyebrow{color:var(--brass-bright)}.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0}/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}.wrap-narrow{max-width:860px;margin-inline:auto;padding-inline:var(--gut)}section{padding-block:var(--sec)}.tight{padding-block:clamp(34px,4.4vw,58px)}.on-dark{background:var(--navy-deep);color:#E8ECF0}.on-dark h1, .on-dark h2, .on-dark h3{color:var(--paper)}.on-dark .lead{color:#BAC4CC}.on-paper-2{background:var(--paper-2)}.grid{display:grid;gap:clamp(14px,1.8vw,22px)}.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}.g3-even{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.g3-even{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g3-even{grid-template-columns:1fr}}.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,64px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  background:var(--navy-deep);color:#AAB7C1;font-size:.8rem;
  font-family:var(--f-body);letter-spacing:.01em;
}.topbar .wrap{display:flex;gap:1.5rem;justify-content:space-between;align-items:center;
  min-height:38px;flex-wrap:wrap}.topbar a{color:#D0D9DF;text-decoration:none;transition:color .25s}.topbar a:hover{color:var(--brass-glow)}.topbar-links{display:flex;gap:1.4rem}
@media (max-width:700px){.topbar-tag{display:none}}.site-head{
  position:sticky;top:0;z-index:90;background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s;
}
/* backdrop-filter only where the nav is NOT position:fixed.
   A filter or backdrop-filter makes the element a containing block for fixed
   descendants, so on mobile it collapsed the off-canvas nav to the header's
   own box — the panel opened 128px tall with its links overflowing outside. */
@media (min-width:961px){
  .site-head{
    background:rgba(247,245,240,.86);
    backdrop-filter:saturate(1.4) blur(14px);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
  }
}.site-head.stuck{border-bottom-color:var(--line);box-shadow:0 6px 30px -22px rgba(12,31,46,.5)}.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:78px;transition:min-height .3s var(--ease)}.site-head.stuck .wrap{min-height:64px}.brand{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex-shrink:0}.brand-lockup{height:44px;width:auto;display:block}
@media (max-width:520px){.brand-lockup{height:38px}}.brand-text{display:flex;flex-direction:column;line-height:1}.brand-name{font-family:var(--f-body);font-size:1.05rem;font-weight:500;color:var(--charcoal);
  letter-spacing:.19em;text-transform:uppercase}.brand-sub{font-family:var(--f-body);font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sage);margin-top:5px}.nav{display:flex;align-items:center;gap:.35rem}.nav a{
  position:relative;text-decoration:none;color:var(--charcoal);font-size:.94rem;font-weight:500;
  padding:.55rem .85rem;border-radius:var(--r);transition:color .25s;
}.nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:1.5px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease-out);
}.nav a:hover::after, .nav a[aria-current="page"]::after{transform:scaleX(1)}.nav a[aria-current="page"]{color:var(--navy)}.btn{
  --btn-bg:var(--navy);--btn-fg:var(--paper);
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);
  padding:.82em 1.5em;font-size:.93rem;font-weight:500;border-radius:var(--r);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease-out),box-shadow .3s,color .3s;
}.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);
  transform:translateY(101%);transition:transform .42s var(--ease-out);
}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(12,31,46,.6)}.btn:hover::before{transform:translateY(0)}.btn:hover{color:#241A0A}.btn-ghost{--btn-bg:transparent;--btn-fg:var(--navy);border-color:var(--line-dark)}.on-dark .btn-ghost{--btn-fg:var(--paper);border-color:rgba(222,232,240,.32)}.btn-brass{--btn-bg:var(--brass);--btn-fg:#241A0A}.btn-brass::before{background:var(--navy)}.btn-brass:hover{color:var(--paper)}.btn-sm{padding:.6em 1.1em;font-size:.86rem}.btn .arw{transition:transform .35s var(--ease-out)}.btn:hover .arw{transform:translateX(4px)}.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--navy)}.nav-toggle svg{display:block}

@media (max-width:960px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,84vw);background:var(--paper);
    z-index:1;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:6rem 1.6rem 2rem;transform:translateX(100%);transition:transform .45s var(--ease-out);
    box-shadow:-24px 0 60px -30px rgba(12,31,46,.5);overflow-y:auto;
  }
  .nav.open{transform:translateX(0)}
  .nav a{padding:1rem .2rem;border-bottom:1px solid var(--line);font-size:1.06rem}
  .nav a::after{display:none}
  .nav .btn{margin-top:1.4rem;justify-content:center}
  .nav-backdrop{position:fixed;inset:0;background:rgba(12,31,46,.42);opacity:0;pointer-events:none;
    transition:opacity .4s;z-index:85}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
}/* ==========================================================================
   Hero — layered botanical + slow amber "oil" motion
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;background:var(--navy-deep);color:var(--paper);
  padding-block:clamp(84px,13vw,150px);isolation:isolate;
}.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}.hero-blob{
  position:absolute;border-radius:50%;filter:blur(66px);opacity:.5;
  animation:drift 24s var(--ease) infinite alternate;
}.hero-blob.b1{width:46vw;height:46vw;min-width:340px;min-height:340px;
  background:radial-gradient(circle at 35% 35%,#2D5F86,transparent 68%);top:-12%;right:-8%}.hero-blob.b2{width:38vw;height:38vw;min-width:280px;min-height:280px;
  background:radial-gradient(circle at 50% 50%,var(--brass),transparent 66%);
  bottom:-16%;left:-6%;opacity:.34;animation-duration:31s;animation-direction:alternate-reverse}.hero-blob.b3{width:26vw;height:26vw;min-width:200px;min-height:200px;
  background:radial-gradient(circle at 50% 50%,#4A7FA5,transparent 70%);
  top:38%;left:44%;opacity:.28;animation-duration:27s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3vw,-3vh,0) scale(1.1)}100%{transform:translate3d(-2vw,4vh,0) scale(.95)}
}.hero-grain{position:absolute;inset:0;z-index:-1;opacity:.055;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}.hero .wrap{position:relative;z-index:2}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:center}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr}}.hero h1{color:var(--paper);font-variation-settings:"opsz" 60}.hero h1 em{font-style:italic;color:var(--brass-glow);font-variation-settings:"opsz" 60}/* line-by-line mask reveal */
.line-mask{display:block;overflow:hidden}.line-mask > span{display:block;transform:translateY(105%);
  animation:lineUp .95s var(--ease-out) forwards}.line-mask:nth-of-type(2) > span{animation-delay:.1s}.line-mask:nth-of-type(3) > span{animation-delay:.2s}
@keyframes lineUp{to{transform:translateY(0)}}.hero-sub{max-width:52ch;color:#BEC9D1;font-size:clamp(1.02rem,1.6vw,1.2rem);
  margin:1.6rem 0 2.3rem;opacity:0;animation:fadeUp .9s var(--ease-out) .38s forwards}.hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;opacity:0;
  animation:fadeUp .9s var(--ease-out) .52s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pulseRing{0%, 100%{transform:scale(1);opacity:.7}50%{transform:scale(1.05);opacity:.28}}
@keyframes bob{0%, 100%{transform:translateY(0)}50%{transform:translateY(-14px)}}.stat .n{font-family:var(--f-display);font-size:clamp(2rem,3.6vw,2.9rem);color:var(--brass-glow);
  line-height:1;font-variation-settings:"opsz" 44}.stat .l{font-family:var(--f-body);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:#94A1AB;margin-top:.5rem}/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}.reveal.in{opacity:1;transform:none}.reveal[data-d="1"]{transition-delay:.09s}.reveal[data-d="2"]{transition-delay:.18s}.reveal[data-d="3"]{transition-delay:.27s}.reveal[data-d="4"]{transition-delay:.36s}.reveal[data-d="5"]{transition-delay:.45s}/* ==========================================================================
   Section headers
   ========================================================================== */
.sec-head{max-width:62ch;margin-bottom:clamp(22px,2.8vw,38px)}.sec-head.center{margin-inline:auto;text-align:center}.sec-head.center .eyebrow{justify-content:center}.sec-head p{color:#424D55;font-size:1.02rem;margin-top:.7rem}.on-dark .sec-head p{color:#AAB7C1}.on-dark .rule-head{border-bottom-color:rgba(222,232,240,.16)}.p-noimg{font-family:var(--f-display);font-size:2.6rem;color:var(--sage-light);opacity:.5}.p-card .cas{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.8125rem;color:var(--sage);letter-spacing:.02em}.p-card .bot{font-style:italic;font-size:.86rem;color:#5B656D;margin-top:-.15rem}.p-card-foot .arw{transition:transform .4s var(--ease-out)}.p-card:hover .p-card-foot .arw{transform:translateX(5px)}.pill{display:inline-block;font-family:var(--f-body);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.3em .6em;border-radius:var(--r);background:var(--paper-3);
  color:#4D5860;align-self:flex-start}/* filter bar */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}.filters button{
  background:transparent;border:1px solid var(--line);color:#424D55;cursor:pointer;
  padding:.55em 1.05em;border-radius:var(--r);font-size:.88rem;font-weight:500;
  transition:all .3s var(--ease);
}.filters button:hover{border-color:var(--sage)}.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);
  color:var(--paper)}.p-card.hide{display:none}/* ==========================================================================
   Spec table
   ========================================================================== */
.spec{width:100%;border-collapse:collapse;font-size:.96875rem;background:var(--white);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}.spec th, .spec td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.5}.spec tr:last-child th, .spec tr:last-child td{border-bottom:0}.spec th{width:44%;font-weight:600;color:var(--navy);letter-spacing:0;text-transform:none;
  font-family:var(--f-body)}.spec thead th{color:var(--navy);font-weight:600;background:var(--paper);
  border-bottom:1px solid var(--line)}.spec td{font-weight:400;color:var(--charcoal)}.spec td em{font-style:italic;font-weight:400}.spec .na{color:var(--faint);font-weight:400}table.data{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}table.data th, table.data td{text-align:left;padding:.9rem 1.15rem;border-bottom:1px solid var(--line)}table.data thead th{background:var(--paper-2);font-family:var(--f-body);font-size:.72rem;
  letter-spacing:.11em;text-transform:uppercase;color:#4D5860;font-weight:600;white-space:nowrap}table.data tbody tr:last-child td{border-bottom:0}table.data tbody tr{transition:background .25s}table.data tbody tr:hover{background:var(--paper)}/* ==========================================================================
   Feature / step cards
   ========================================================================== */
.f-card{padding:clamp(24px,3vw,34px);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);height:100%;transition:transform .45s var(--ease-out),box-shadow .45s}.f-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -30px rgba(12,31,46,.5)}.f-card h3{font-size:var(--h3-card);margin-bottom:.6rem}.f-card p{color:#4D5860;font-size:.97rem;margin:0}.on-dark .f-card{background:rgba(255,255,255,.04);border-color:rgba(222,232,240,.14)}.on-dark .f-card p{color:#AAB7C1}.f-icon{width:44px;height:44px;margin-bottom:1.1rem;color:var(--brass)}.f-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}.step{position:relative;padding-left:3.6rem}.step-n{position:absolute;left:0;top:0;width:2.5rem;height:2.5rem;display:grid;place-items:center;
  border:1px solid var(--brass);color:var(--brass);border-radius:50%;font-family:var(--f-body);
  font-size:.86rem;font-weight:500}.step h3{font-size:var(--h3-card);margin-bottom:.45rem}.step p{color:#4D5860;font-size:.96rem;margin:0}.on-dark .step p{color:#AAB7C1}/* ==========================================================================
   Certifications
   ========================================================================== */
.cert{display:flex;flex-direction:column;gap:.8rem;padding:clamp(22px,2.6vw,30px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);height:100%;
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .4s}.cert:hover{transform:translateY(-5px);border-color:var(--brass);
  box-shadow:0 22px 40px -30px rgba(12,31,46,.5)}.cert h3{font-size:var(--h3-card);font-weight:600;letter-spacing:0}.cert p{font-size:.92rem;color:#4D5860;margin:0;flex:1}.cert a{display:inline-flex;align-items:center;gap:.45em;font-size:.83rem;font-weight:500;
  color:var(--navy);text-decoration:none;font-family:var(--f-body);letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid transparent;align-self:flex-start;
  transition:border-color .3s,color .3s;padding-bottom:2px}.cert a:hover{border-bottom-color:var(--brass);color:var(--brass)}
@keyframes slide{to{transform:translateX(-50%)}}/* ==========================================================================
   Forms
   ========================================================================== */
.form{display:grid;gap:1.15rem}
@media (max-width:620px){.row2{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:.42rem}.field label{font-family:var(--f-body);font-size:.78rem;letter-spacing:.04em;text-transform:none;
  color:#4D5860;font-weight:500}.field label .req{color:var(--brass-text)}.field input, .field select, .field textarea{
  font:inherit;font-size:.98rem;padding:.85rem 1rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--white);color:var(--charcoal);width:100%;
  transition:border-color .3s,box-shadow .3s;
}.field textarea{resize:vertical;min-height:132px}.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(197,166,106,.13)}.field input::placeholder, .field textarea::placeholder{color:#9FA7AD}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.form-note{font-size:.86rem;color:var(--sage)}.form-msg{padding:1rem 1.15rem;border-radius:var(--r);font-size:.95rem;display:none}.form-msg.ok{display:block;background:rgba(30,122,87,.1);border:1px solid rgba(30,122,87,.35);
  color:#14563E}.form-msg.err{display:block;background:rgba(168,50,38,.08);border:1px solid rgba(168,50,38,.3);
  color:#8C2A20}/* contact rail */
.contact-rail{display:flex;flex-direction:column;gap:1.6rem}.c-item{display:flex;gap:1rem;align-items:flex-start}.c-item svg{width:20px;height:20px;color:var(--brass);flex-shrink:0;margin-top:4px;
  stroke:currentColor;fill:none;stroke-width:1.5}.c-item .k{font-family:var(--f-body);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sage);margin-bottom:.2rem}.c-item .v{font-size:1rem;font-weight:500}.c-item a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s}.c-item a:hover{border-bottom-color:var(--brass)}/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{position:relative;overflow:hidden;background:var(--navy);color:var(--paper);
  text-align:center;isolation:isolate}.cta-band::before{content:none}.cta-band h2{color:var(--paper)}.cta-band p{color:#BEC9D1;max-width:56ch;margin-inline:auto}.cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{background:var(--navy-deep);color:#AAB7C1;padding-block:clamp(52px,7vw,84px) 0}.foot-grid{display:grid;grid-template-columns:1.6fr .9fr .9fr 1.1fr 1fr;gap:clamp(26px,3vw,44px)}
@media (max-width:1120px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;}.foot-grid>:first-child{grid-column:1 / -1}}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}.site-foot h4{color:var(--paper);font-family:var(--f-body);font-size:.8125rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:1.2rem;font-weight:500}.site-foot a{color:#AAB7C1;text-decoration:none;transition:color .28s}.site-foot a:hover{color:var(--brass-glow)}.foot-links{display:flex;flex-direction:column;gap:.65rem;font-size:.94rem}.foot-brand .brand-name{color:var(--paper)}.foot-brand p{font-size:.94rem;margin-top:1rem;max-width:34ch}.foot-bot{margin-top:clamp(38px,5vw,58px);padding-block:1.5rem;
  border-top:1px solid rgba(222,232,240,.13);display:flex;justify-content:space-between;
  gap:1.2rem;flex-wrap:wrap;font-size:.83rem;color:#7F8B95}.social{display:flex;gap:.75rem;margin-top:1.3rem}.social a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(222,232,240,.2);transition:all .3s var(--ease)}.social a:hover{border-color:var(--brass);color:var(--brass-glow);transform:translateY(-3px)}.social svg{width:16px;height:16px;fill:currentColor}/* ==========================================================================
   Floating actions
   ========================================================================== */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:.6rem}.fab a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 12px 26px -12px rgba(12,31,46,.6);transition:transform .3s var(--ease-out);
  color:#fff;text-decoration:none}.fab a:hover{transform:scale(1.08)}.fab .wa{background:var(--navy)}.fab .ph{background:var(--navy)}.fab svg{width:24px;height:24px;fill:currentColor}
@media (min-width:961px){.fab .ph{display:none}}/* ==========================================================================
   Page header (interior)
   ========================================================================== */
.page-head{position:relative;background:var(--navy-deep);color:var(--paper);
  padding-block:clamp(64px,9vw,116px) clamp(52px,7vw,92px);overflow:hidden;isolation:isolate}.page-head::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse at 82% 8%,rgba(45,72,91,.62),transparent 58%),
             radial-gradient(ellipse at 10% 96%,rgba(197,166,106,.26),transparent 56%)}.page-head h1{color:var(--paper);max-width:19ch}.page-head .lead{color:#BEC9D1;margin-top:1.3rem}.crumbs{font-family:var(--f-body);font-size:.8rem;letter-spacing:.03em;text-transform:none;
  color:#909DA7;margin-bottom:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap}.crumbs a{color:#909DA7;text-decoration:none;transition:color .25s}.crumbs a:hover{color:var(--brass-glow)}/* prose */
.prose p{color:#3D4850;max-width:66ch}.prose h2{margin-top:2rem;margin-bottom:.55rem;
  letter-spacing:-.005em}.prose h2:first-child{margin-top:0}.prose h3{font-size:var(--h3-card);font-weight:600}.prose h3{margin-top:1.5rem;margin-bottom:.45rem}.prose ul{padding-left:0;list-style:none;margin:0 0 1.3rem}.prose ul li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;color:#3D4850;max-width:64ch}.prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;
  background:var(--brass);border-radius:50%}

/* ==========================================================================
   Motion off
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .line-mask > span{transform:none}
  .hero-sub,.hero-cta,.hero-vial{opacity:1}
}

/* print */
@media print{
  .site-head,.topbar,.fab,.cta-band,.site-foot{display:none}
  body{background:#fff;font-size:11pt}
  .hero,.page-head{background:#fff;color:#000}
  .hero h1,.page-head h1{color:#000}
}/* skip link — visible only on keyboard focus */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);
  color:var(--paper);padding:.8rem 1.2rem;text-decoration:none;border-radius:0 0 2px 0}.skip:focus{left:0}/* ==========================================================================
   Fixes verified against measured contrast + rendered output
   ========================================================================== */

/* `.nav a` (0, 1, 1) was beating `.btn` (0, 1, 0) and painting the header CTA's
   label in ink on dark green — measured 1.32:1. */
.nav a.btn{color:var(--btn-fg)}.nav a.btn::after{display:none}.nav a.btn:hover{color:#241A0A}/* The CTA band is dark but not `.on-dark`, so the ghost button inherited the
   dark-green foreground and vanished — measured 1.00:1. */
.cta-band .btn-ghost, .hero .btn-ghost, .page-head .btn-ghost, .on-dark .btn-ghost{
  --btn-fg:var(--paper);border-color:rgba(222,232,240,.34)}.cta-band .btn-ghost:hover, .hero .btn-ghost:hover, .page-head .btn-ghost:hover, .on-dark .btn-ghost:hover{color:#241A0A}/* ---------- hero specimen card ----------
   Product photography is shot on white. Rather than fight it with blend modes{min-height:auto}.specimen-label .nm{font-family:var(--f-display);font-size:1.02rem;color:var(--charcoal);
  font-variation-settings:"opsz" 22}.specimen-label .nm em{display:block;font-size:.76rem;font-style:italic;color:var(--sage);
  font-family:var(--f-body);margin-top:2px}.specimen-label .cs{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--brass);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.specimen{animation:none}}/* ---------- mobile overflow ----------
   Two real causes found at 390px, both of which Chrome hid by widening the
   layout viewport to 718px (so scrollWidth === innerWidth and naive
   overflow checks pass):
   1. grid/flex children default to min-width:auto, so `table{min-width:620px}`
      forced its wrapper to 622px instead of scrolling inside it;
   2. the off-canvas nav sits at translateX(100%), extending the scroll area. */
.grid > *, .split > *, .hero-grid > *, .foot-grid > *{min-width:0}html{overflow-x:clip}.nav{visibility:hidden}.nav.open{visibility:visible}
@media (min-width:961px){.nav{visibility:visible}}/* ==========================================================================
   MOTION LAYER
   Three signature moments, restrained everywhere else. A procurement buyer
   should read "precise", not "showreel".
   ========================================================================== */

/* ---------- cross-page morphing (Chrome/Edge; ignored elsewhere) ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .28s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .38s var(--ease-out) both}
}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}/* ---------- scroll progress rail ---------- */
.scroll-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;pointer-events:none}.scroll-rail span{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-glow));
  transform:scaleX(0);transform-origin:left;will-change:transform}/* ---------- hero canvas ---------- */
#distillate{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}.hero-bg{z-index:-2}/* ---------- word-by-word heading reveal ---------- */
[data-words] .w{display:inline-block;overflow:hidden;vertical-align:bottom}[data-words] .w > span{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform .8s var(--ease-out),opacity .8s var(--ease-out)}[data-words].in .w > span{transform:none;opacity:1}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .p-card:hover{transform:translateY(-7px) perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
  .p-card::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .45s;border-radius:inherit;
    background:radial-gradient(320px circle at var(--gx) var(--gy),rgba(216,190,138,.13),transparent 62%);
  }
  .p-card:hover::after{opacity:1}
}/* ==========================================================================
   Distillation sequence — sticky diagram driven by scroll
   ========================================================================== */
.seq{--p:0;position:relative;background:var(--navy-deep);color:#E8ECF0;padding:0;
  height:220vh}
@media (max-width:900px){
  /* no sticky on small screens, so the tall scroll track must collapse too —
     otherwise it leaves ~3 screens of empty green below the content. */
  .seq{height:auto}
  .seq-inner{grid-template-columns:1fr;min-height:auto;position:static;
    padding-block:clamp(48px,9vw,80px)}
  .seq-stage{margin-top:2rem}
}.seq-step.on{opacity:1;transform:none}.seq-step .n{
  position:absolute;left:0;top:1.05rem;width:2.3rem;height:2.3rem;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(222,232,240,.24);font-family:var(--f-body);
  font-size:.78rem;color:#909DA7;transition:all .5s var(--ease);
}.seq-step.on .n{border-color:var(--brass);color:#241A0A;background:var(--brass)}.seq-draw.hot{stroke:var(--brass-bright);stroke-width:2.6}
@media (prefers-reduced-motion:reduce){
  .seq-fill,.seq-vapour,.seq-glow{opacity:.85}
}

/* the drip that falls once the condenser is drawn */
@keyframes drip{0%{transform:translateY(0);opacity:0}12%{opacity:1}70%{opacity:1}100%{transform:translateY(58px);opacity:0}}
@media (prefers-reduced-motion:reduce){.seq-drip{animation:none}}.cmp{display:grid;grid-template-columns:1.6fr 1fr 1fr 30px;gap:1rem;align-items:center;
  padding:.95rem 1.2rem;border-bottom:1px solid var(--hair-2,var(--line));text-decoration:none;
  color:inherit;transition:background .25s}.cmp:last-of-type{border-bottom:0}.cmp:hover{background:var(--paper-2)}.cmp:hover .cmp-go{opacity:1;transform:translateX(3px)}.cmp.hide{display:none}.cmp-empty{padding:1.6rem 1.2rem;margin:0;color:var(--sage);font-size:.95rem}
@media (max-width:700px){
  .cmp{grid-template-columns:1fr auto;gap:.35rem .8rem}
  .cmp-fam,.cmp-go{display:none}
  .cmp-head{display:none}
}
@keyframes flicker{0%, 100%{opacity:.85;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.14)}}
@keyframes wisp{0%, 100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-7px)}}

@media (prefers-reduced-motion:reduce){
  .s1,.s2,.s3,.s4{opacity:1}
  .seq-flame,.seq-wisp{animation:none}
}
@media (max-width:900px){
  .seq-label text{font-size:15px}
  .seq-draw{stroke-width:3}
}/* ---------- optional art slots (see optimise.mjs) ---------- */
.hero-plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;
  opacity:.42;filter:saturate(.8);
}.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(100deg,var(--navy-deep) 0%,rgba(12,31,46,.92) 34%,rgba(12,31,46,.55) 62%,rgba(12,31,46,.35) 100%),
    linear-gradient(to bottom,rgba(12,31,46,.5),transparent 38%,rgba(12,31,46,.55));
}
@media (max-width:860px){
  .hero::before{background:linear-gradient(to bottom,rgba(12,31,46,.86),rgba(12,31,46,.72))}
}.f-card.has-art{padding:0;overflow:hidden;display:flex;flex-direction:column}.f-card.has-art:hover .cat-art img{transform:scale(1.05)}.f-card.has-art h3, .f-card.has-art p, .f-card.has-art .p-card-foot{
  padding-inline:clamp(20px,2.4vw,28px)}.f-card.has-art h3{margin-top:clamp(18px,2vw,24px)}.f-card.has-art p{padding-bottom:0}.f-card.has-art .p-card-foot{padding-bottom:clamp(20px,2.4vw,28px)}/* ==========================================================================
   Generated art layers
   All decorative: desktop-only where heavy, screen-blended where the source is
   white-on-black, and every one of them optional.
   ========================================================================== */

/* real film grain, replacing the SVG turbulence */
.hero-grain{
  background-image:url("/assets/webp/grain.webp?v=1a17667c");
  background-size:420px 420px;background-repeat:repeat;
  mix-blend-mode:screen;opacity:.16;
}/* slow oil sheen from the displacement map{
  position:absolute;inset:-12%;z-index:-2;pointer-events:none;
  background:url("/assets/webp/displace.webp?v=e59ddd0f") center/cover no-repeat;
  mix-blend-mode:soft-light;opacity:.34;
  animation:sheen 46s ease-in-out infinite alternate;will-change:transform;
}
@keyframes sheen{0%{transform:scale(1.05) translate3d(0,0,0)}100%{transform:scale(1.22) translate3d(-3%,2%,0)}
}.hl{position:absolute;will-change:transform;filter:saturate(.95) brightness(1.06);
  background-repeat:no-repeat;background-size:contain;background-position:center;display:block}/* hl1 and hl3 bleed off the edges on purpose. hl2 is the one specimen that
   should read whole{width:min(34vw,380px);aspect-ratio:1;left:-9%;bottom:-15%;opacity:.40;transform:rotate(-14deg)}

/* Declared only here on purpose. An <img> in a display:none container is still
   downloaded; a background-image behind a non-matching media query is not — so
   phones never pay for decoration they cannot see. */
@media (min-width:901px){
  .hl1{background-image:url("/assets/webp/layer-1.webp?v=f98e187c")}
  .hl2{background-image:url("/assets/webp/layer-2.webp?v=68b45a82")}
  .hl3{background-image:url("/assets/webp/layer-3.webp?v=1328d189")}
}
@media (max-width:900px){
  .hero-layers,.hero-sheen{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-sheen{animation:none}}/* vapour in the distillation diagram */
/* alpha-keyed, so no blend mode: mix-blend-mode inside an SVG blends against
   the SVG canvas, not the page{opacity:.85;
  animation:vapour 9s ease-in-out infinite;transform-origin:125px 160px}
@keyframes vapour{0%, 100%{opacity:.55;transform:translateY(4px) scaleY(.97)}50%{opacity:.95;transform:translateY(-8px) scaleY(1.05)}
}
@media (prefers-reduced-motion:reduce){.seq-steam{animation:none;opacity:.8}}/* ============================================================ technical UI
   Added for the data-led rebuild: the audience scans for identifiers, so
   materials are rows with their numbers rather than photo cards{ border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .m-row { grid-template-columns: 1fr; gap: .5rem; }
  .m-row-ids { white-space: normal; }
  .m-row-go { display: none; }
}/* --- specification tables ------------------------------------------------ */
.spec-h2{ margin-bottom: 1.1rem; }/* An uppercase group label above a specification table, not a reading heading, so it
   sits in the brief's 14-15px small-text band rather than its 22-28px H3 band. */
.spec-h{
  font-size: .875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage); margin: 2.4rem 0 .8rem; font-family: var(--f-body); font-weight: 600;
}.spec-3 th:first-child{ width: 40%; }.spec-3 thead th, .spec-wide thead th{
  color: var(--navy); font-weight: 600; text-align: left;
  border-bottom: 1px solid var(--line);
}.spec-wide th{ width: 30%; }.spec-wide td{ line-height: 1.55; }.spec-wrap{ display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .spec-wrap { grid-template-columns: 1fr; gap: 2rem; } }.spec-aside{ display: grid; gap: 1rem; }.aside-card{ background: var(--paper-2); border: 1px solid var(--line); border-radius: 2px; padding: 1.3rem 1.4rem; }.aside-card ul{ list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .45rem; }.aside-card li{ font-size: .9rem; color: #3D4850; padding-left: 1rem; position: relative; }.aside-card li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--brass); border-radius: 50%; }.detail-cta{ display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }/* --- notices ------------------------------------------------------------- */
.notice{
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 3px solid var(--green-mid, #2E4454); border-radius: 2px;
  padding: 1.1rem 1.3rem;
}.notice p{ margin: 0; font-size: .94rem; color: #3D4850; max-width: 82ch; }.chip{
  font: inherit; font-size: .84rem; padding: .45rem .85rem; cursor: pointer;
  background: transparent; color: #3D4850;
  border: 1px solid var(--line); border-radius: 100px;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}.chip .mono{ font-size: .74rem; opacity: .65; }.chip:hover{ border-color: #A0AAB2; }.chip.is-on{ background: var(--green-deep, #123047); color: var(--paper); border-color: transparent; }.chip.is-on .mono{ opacity: .8; }.cat-count{ font-size: .84rem; color: var(--sage); margin: 0; }.cat-table{ width: 100%; border-collapse: collapse; min-width: 660px; font-size: .9rem; }.cat-table thead th{
  position: sticky; top: 0; z-index: 2; background: var(--paper-2);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage);
  font-weight: 600; text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line);
}.cat-table td{ padding: .62rem .9rem; border-bottom: 1px solid #EBE7DE; vertical-align: baseline; }.cat-table tbody tr:hover{ background: var(--paper-2); }.cat-table .c-code{ font-size: .76rem; color: var(--sage); white-space: nowrap; }.cat-table .c-name{ font-weight: 500; }.cat-table .c-name a{ text-decoration: none; border-bottom: 1px solid var(--brass); }.cat-table .alt{ color: var(--faint); }.cat-table .na{ color: var(--faint); }.tds-flag{
  display: inline-block; margin-left: .5rem; font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brass-text); border: 1px solid currentColor;
  border-radius: 100px; padding: .05rem .42rem; vertical-align: 1px;
}.cat-empty{ margin-top: 1.6rem; font-size: .95rem; color: #4D5860; }.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}/* --- certificates -------------------------------------------------------- */
.cert-grid{ align-items: start; }.cert-card{
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  padding: 1.35rem 1.4rem 1.3rem; display: grid; gap: .8rem; align-content: start;
}.cert-card h3{ font-size: var(--h3-card); margin: .45rem 0 .3rem; }.cert-card header p{ font-size: .92rem; color: #4D5860; margin: 0; }.cert-card .spec th{ width: 42%; font-size: .82rem; }.cert-card .spec td{ font-size: .86rem; }.cert-card .btn{ justify-self: start; }/* --- steps + shipments --------------------------------------------------- */
.steps{ list-style: none; padding: 0; margin: 0; }/* The shared .step pins .step-n absolutely at top:0 and clears it with padding-left.
   That breaks the moment the step gains top padding -- the content moves down and
   the badge does not, which left the number sitting 13px above its heading. Inside
   .steps the badge is a real grid column instead, so the two cannot drift apart. */
.steps > .step{
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1.15rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}.steps > .step:first-child{ border-top: 1px solid var(--line); }.steps > .step .step-n{
  position: static;
  color: var(--brass-text);        /* digits are 13.8px, so not the brand amber */
  /* optically centre the badge on the heading's first line rather than its box */
  margin-top: -0.62rem;
}.steps > .step p{ max-width: 76ch; }.ship-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }.ship{ margin: 0; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--paper-2); }.ship img{ display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }/* The specimen card sits inside the dark hero{
  display: grid; gap: .18rem; padding: .9rem 1rem 1rem; text-align: left;
}.specimen figcaption .mono{ color: var(--sage); font-size: .78rem; }/* The page head is forest-deep, so the eyebrow needs the bright amber there —
   --brass-text is tuned for paper and drops to 2.8:1 on dark. */
.page-head .eyebrow, .cta-band .eyebrow, .seq .eyebrow, .on-dark .eyebrow{ color: var(--brass-bright); }/* Certificate cards are narrow, and a label like "Natural origin index" needs
   more than 42% of that width — it wrapped and collided with its value. Stack
   the label above the value inside these cards instead. */
.cert-card .spec th, .cert-card .spec td{ display: block; width: auto; padding: .55rem 0 0; border-bottom: 0; }.cert-card .spec th{ padding-top: .8rem; color: var(--sage); }.cert-card .spec td{ padding-bottom: .8rem; border-bottom: 1px solid var(--line); }.cert-card .spec tr:last-child td{ border-bottom: 0; }/* Catalogue: the default view is capped, so this is the way out of it. */
.cat-more{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.4rem; margin-bottom: clamp(34px, 4.5vw, 64px); }/* Footer lockup — same artwork as the header, reversed for the dark ground. */
.foot-lockup{ display: block; height: 46px; width: auto; margin-bottom: 1.1rem; }/* Certificate register: a fixed three-up grid of equal-height cards. Cards were
   sizing to their content before, which read as scattered rather than as a
   register. The download control is pinned to the bottom so it lines up. */
.cert-grid{
  display: grid; gap: 1.1rem; align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}.cert-card{ height: 100%; grid-template-rows: auto 1fr auto; }.cert-card header{ min-height: 6.6rem; }.cert-card .spec{ align-self: start; width: 100%; }.cert-foot{ margin-top: auto; padding-top: .4rem; }.cert-flag{
  margin: 0; font-size: .84rem; color: var(--brass-text);
  border-left: 2px solid var(--brass); padding-left: .7rem;
}
@media (max-width: 700px) { .cert-card header { min-height: 0; } }/* Hero headline sits in a ~600px column, so the global h1 clamp (up to 5rem) made
   "aromatic chemicals, " wrap and pushed the buttons and stats below the fold.
   Cap it at the size where each written line fits on one rendered line. */
.hero h1{ font-size: clamp(2.35rem, 4.4vw, 3.85rem); }/* Catalogue registers: each is its own section{ display: none; }.cat-total{ font-size: .9rem; color: var(--sage); margin: 0; }/* Industry cards, with an optional photograph. The card stays a clean text card
   when no image has been supplied{ display: flex; flex-direction: column; overflow: hidden; padding: 0; }.i-card.has-photo .i-body{ padding-top: 1.1rem; }/* Product photograph on a data-sheet page. */
.p-photo{ margin: 0 0 2rem; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--paper-2); }.p-photo img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }.p-photo figcaption{
  padding: .75rem 1rem; font-size: .86rem; color: var(--sage);
  border-top: 1px solid var(--line); background: #fff;
}/* ============================================================ spec redesign
   Components for the structure the client's brief specifies: two product groups, the three home-page answers, product cards with applications, and the quote form.
   Aromatic chemicals read navy/technical; essential oils carry a sage accent. One
   brand, two registers, per the brief.
   ------------------------------------------------------------------------- */

/* --- hero without the specimen card --------------------------------------- */
.hero-single{ grid-template-columns: minmax(0, 760px); }.hero-single .hero-sub{ max-width: 56ch; }.ans{ border-top: 2px solid var(--navy); padding-top: 1.1rem; }/* --- product group sections ---------------------------------------------- */
.grp{ padding-block: var(--sec); }.grp-sage .eyebrow{ color: var(--sage); }.grp-sage .sec-head h2{ color: var(--navy); }.p-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }.p-item{
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}.p-item:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(12,31,46,.42); }.p-item-img{ display: block; background: var(--paper-2); }.p-item-img img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }.p-item-body{ padding: 1.35rem 1.45rem 1.5rem; display: flex; flex-direction: column; flex: 1; }.p-item-body h3{ font-size: var(--h3-card); margin-bottom: .3rem; }.p-item-body h3 a{ color: inherit; text-decoration: none; }.p-item-body h3 a:hover{ color: var(--brass-text); }.p-item-cas{ font-size: .78rem; color: var(--sage); margin: 0 0 .7rem; }.p-item-blurb{ font-size: .93rem; color: #4A5A50; margin: 0 0 1rem; }.p-item-label{
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--sage); margin: 0 0 .45rem; font-weight: 600;
}.p-item-apps{ list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .3rem; }.p-item-apps li{
  font-size: .76rem; padding: .18rem .5rem; border: 1px solid var(--line);
  border-radius: 100px; color: #4A5A50; background: var(--paper);
}.grp-sage .p-item-apps li{ border-color: #C6D2C7; }.p-item-go{
  margin-top: auto; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brass-text); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
}.p-item-go:hover{ color: var(--navy); }.grp-card.grp-sage{ border-top: 3px solid var(--sage-light); }.grp-card.grp-navy{ border-top: 3px solid var(--navy); }/* --- lists --------------------------------------------------------------- */
.ticks, .principles{ list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .5rem; }.ticks li, .principles li{ position: relative; padding-left: 1.6rem; color: #3F4E45; }.ticks li::before{
  content: ""; position: absolute; left: 0; top: .48em; width: 8px; height: 8px;
  border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass);
  transform: rotate(-45deg);
}.principles li{ font-family: var(--f-display); font-size: 1.14rem; color: var(--navy); }.principles li::before{
  content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; background: var(--brass);
}.aside-links{ list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .45rem; }.aside-links a{ font-size: .93rem; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }.aside-links a:hover{ border-bottom-color: var(--brass); }/* --- quote form ---------------------------------------------------------- */
.qgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }.qgrid .span2{ grid-column: 1 / -1; }
@media (max-width: 620px) { .qgrid { grid-template-columns: 1fr; } }.quote-form input[type="file"]{
  width: 100%; font: inherit; font-size: .9rem; padding: .7rem .9rem;
  border: 1px dashed var(--line-dark); border-radius: var(--r); background: var(--paper);
}/* --- catalogue landing --------------------------------------------------- */
.cat-hero{ display: grid; grid-template-columns: 1.3fr .7fr; gap: 2.6rem; align-items: start; }
@media (max-width: 860px) { .cat-hero { grid-template-columns: 1fr; } }.cat-listing{ display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 620px) { .cat-listing { grid-template-columns: 1fr; } }.cat-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }.cat-list li{ display: flex; flex-direction: column; gap: .1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }.cat-list a{ color: var(--navy); text-decoration: none; font-weight: 500; }.cat-list a:hover{ color: var(--brass-text); }.cat-list .mono{ font-size: .74rem; color: var(--sage); }.cat-dl{ background: var(--navy); color: var(--paper); padding: 1.7rem 1.8rem; border-radius: var(--r); }.cat-dl h2{ color: var(--paper); margin-bottom: .6rem; }.cat-dl p{ color: #C3D2DE; font-size: .93rem; margin-bottom: 1.3rem; }/* --- capability list, replacing four boxed cards ------------------------- */
.caps{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.2rem; }
@media (max-width: 780px) { .caps { grid-template-columns: 1fr; } }.cap{
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.1rem;
  padding: 1.35rem 0; border-top: 1px solid var(--line); align-items: start;
}.cap-icon{ width: 26px; height: 26px; color: var(--brass-text); margin: 0; }.cap-icon svg{ width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }.cap h3{ font-size: var(--h3-card); margin-bottom: .28rem; }.cap p{ margin: 0; font-size: .92rem; color: #4A5560; }/* --- sector list, replacing six boxed cards ------------------------------ */
.sect-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 2.6rem; }.sect{ padding: 1rem 0; border-top: 1px solid var(--line); }.sect h3{ font-size: var(--h3-card); margin-bottom: .2rem; }.sect p{ margin: 0; font-size: .87rem; color: #4A5560; }EOF_CT
cat >> assets/css/site.css <<'EOF_CERTT'

/* --- certificate register: one row per certificate ----------------------- */
.cert-table{ min-width: 860px; }.cert-table .pill{ justify-self: start; }.pack-table th{ width: 32%; }EOF_CERTT
node build.mjs >/dev/null 2>&1 && cd /private/tmp/claude-501/-Users-divyanshdixit/7b25444c-29f7-4110-a697-6439ef32872f/scratchpad && node rhythm.js 2>&1 | tail -10
/* --- declarations summary strip on product pages ------------------------- */
.decl{ display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }.decl .btn{ flex-shrink: 0; }/* group sections carry their own rhythm; the global section padding doubled it */
.grp{ padding-block: clamp(40px, 5vw, 72px); }/* --- certificate cards: denser rows than a page-level spec table ---------- */
.cert-card .spec th, .cert-card .spec td{ padding-block: .42rem; }.cert-card .spec th{ padding-top: .6rem; font-size: .74rem; letter-spacing: .04em; }.cert-card .spec td{ font-size: .87rem; }.cert-card header p{ font-size: .88rem; }/* ============================================================ homepage v2
   The ten core products visible on the homepage, a featured-product block for
   DHM, and industry cards that carry photography once all six exist.
   ------------------------------------------------------------------------- */

/* --- the two ranges, listed in full ------------------------------------- */
.range{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 56px); }
@media (max-width: 780px) { .range { grid-template-columns: 1fr; } }.range-head{ display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .9rem;
  padding-bottom: .8rem; border-bottom: 2px solid var(--navy); min-height: 4.5rem; }.range-head .eyebrow{ margin: 0; }.molecule{ width: 104px; height: 52px; color: var(--navy); flex-shrink: 0;
  margin-bottom: -.15rem; }/* --- featured product ---------------------------------------------------- */
.feature{ background: var(--navy); color: var(--paper); padding-block: clamp(44px, 5vw, 76px); }.feature-in{ display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 820px) { .feature-in { grid-template-columns: 1fr; } }.feature-img{ border-radius: 2px; overflow: hidden; background: var(--navy-mid); }.feature-img img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }.feature .eyebrow{ color: var(--brass-bright); }.feature h2{ color: var(--paper); font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .5rem; }.feature-lead{ color: #C3D2DE; max-width: 56ch; margin-bottom: 1.4rem; }.feature-facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem 1.4rem; margin: 0 0 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(222,232,240,.2); }.feature-facts dt{ font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: #93A9BC; margin-bottom: .25rem; }.feature-facts dd{ margin: 0; font-size: .95rem; color: var(--paper); }.feature-cta{ display: flex; gap: .8rem; flex-wrap: wrap; }.feature .btn-ghost{ --btn-fg: var(--paper); border-color: rgba(222,232,240,.36); }/* --- industry cards with photography ------------------------------------- */
.ind-card{ display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: 2px; }.ind-img{ display: block; background: var(--paper-2); }.ind-img img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }.ind-body{ padding: 1.1rem 1.2rem 1.3rem; }.ind-body h3{ font-size: var(--h3-card); margin-bottom: .3rem; }.ind-body p{ margin: 0; font-size: .89rem; color: #4A5560; }/* --- notice with an action ------------------------------------------------
   The paragraph is capped at 82 characters so it stays readable, which in a
   full-width box left almost half the width empty. Where the notice is an
   invitation to make contact, the freed space carries the action instead. */
.notice-act{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem 2.6rem;
  align-items: center; padding: 1.5rem 1.7rem; }
@media (max-width: 820px) { .notice-act { grid-template-columns: 1fr; } }.notice-txt p{ margin: 0; }.notice-lead{ font-family: var(--f-display); font-size: 1.14rem; color: var(--navy);
  margin-bottom: .5rem !important; max-width: 46ch; }.notice-do{ display: flex; flex-direction: column; gap: .6rem; }.notice-do .btn{ justify-content: center; white-space: nowrap; }
@media (max-width: 820px) { .notice-do { flex-direction: row; flex-wrap: wrap; } }

/* ============================================================ section heads
   Headings and their standfirst were stacked in a single 62ch column, so on a
   1220px page up to 717px of every section head sat empty. The measure has to
   stay near 62ch to be readable, so instead of widening the text the heading and
   its standfirst sit side by side and the width gets used.
   A heading with no standfirst spans both columns, hence the :last-child rules.
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .sec-head { max-width: none; }
  .sec-head > h2 { max-width: none; }
  .sec-head > p:not(.eyebrow) { max-width: none; font-size: 1.15rem; line-height: 1.62; }
  .sec-head.center { max-width: 68ch; margin-inline: auto; }

  .page-head h1 { max-width: none; }
  .page-head .lead { max-width: none; margin-top: 1.1rem; font-size: 1.18rem; }
}/* --------------------------------------------------------------------------
   Brief section 12: the document types a buyer receives, listed under the
   homepage quality block. Deliberately a list and not another row of cards -
   the page already carries enough of those.
   -------------------------------------------------------------------------- */
.doc-chips{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.55rem}.doc-chips li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:baseline}.doc-chip-n{font-weight:600;color:var(--navy);font-size:.9rem;letter-spacing:.02em;
  white-space:nowrap;padding:.16rem .5rem;border:1px solid var(--line);border-radius:3px;
  background:#fff}.doc-chip-d{color:#4A5560;font-size:.94rem;line-height:1.5}

/* The quote CTA is a NAV entry now, so it inherits the nav's stacked layout on
   mobile; this keeps it a full-width tap target there rather than a stray pill. */
@media (max-width:900px){.nav-cta{width:100%;justify-content:center;margin-top:.6rem}}

/* --------------------------------------------------------------------------
   The brief sets a separate mobile column for every size, so the phone figures
   are declared rather than left to inherit the desktop ones.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  body{font-size:16.5px}
  .nav a,.nav .btn{font-size:16px}
  .btn{font-size:15.5px}
  table.spec th,table.spec td,.cat-table th,.cat-table td{font-size:14.5px}
  .form-note,.eyebrow{font-size:13.5px}
  :root{--h3-card:1.3125rem}
}/* --------------------------------------------------------------------------
   Brief section 8: homepage product cards. Two columns of five on desktop, one column on a phone. The image slot only renders when all ten photographs
   exist, so the card works with or without it.
   -------------------------------------------------------------------------- */
.pcards{display:grid;gap:.7rem}.pcard{display:grid;grid-template-columns:1fr;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:border-color .28s var(--ease-out),transform .28s var(--ease-out),
    box-shadow .28s var(--ease-out)}.pcard:hover{border-color:var(--brass);transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(18,48,71,.09)}.pcards.has-art .pcard{grid-template-columns:132px 1fr}.pcard-img{display:block;overflow:hidden;background:var(--paper-2)}.pcard-img img{width:100%;height:100%;object-fit:cover}.pcard-body{display:block;padding:.95rem 1.15rem}.pcard-name{display:block;font-weight:600;font-size:1.0625rem;color:var(--navy);
  letter-spacing:-.006em;margin-bottom:.2rem}.pcard-desc{display:block;font-size:.9375rem;line-height:1.5;color:#4A5560}.pcard-cas{display:block;font-size:.8125rem;color:var(--sage-text);margin-top:.35rem;
  font-variant-numeric:tabular-nums}.pcard-go{display:inline-flex;align-items:center;gap:.4em;margin-top:.55rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-text)}.pcard:hover .pcard-go{color:var(--navy)}
@media (max-width:560px){.pcards.has-art .pcard{grid-template-columns:100px 1fr}}

/* WCAG 2.2 target size (2.5.8) asks for 24 CSS px on anything that is not an inline
   link inside a sentence, and the brief asks for large tap targets on mobile. These
   are the components that came in under it: breadcrumbs, the top bar, the "view
   product" affordance and the contact links. */
@media (max-width:700px){
  .crumbs a,.topbar-links a,.p-item-go,.c-item .v a{
    min-height:24px;display:inline-flex;align-items:center}
  .foot-links a{min-height:26px;display:inline-flex;align-items:center}
}.aside-links a{min-height:26px;display:inline-flex;align-items:center}/* Brief section 18: the short introduction sits directly under the product name, ahead of the first table, so it needs the spacing the removed heading used to give. */
.product-intro{margin-bottom:2rem}.spec-h2{margin-top:2.6rem}.spec-h2:first-of-type{margin-top:0}/* --------------------------------------------------------------------------
   Homepage company introduction. Not a .sec-head: that grid bottom-aligns the
   heading against a short standfirst, which strands the heading low when the
   text is a full paragraph. Here both columns start at the top and the button
   sits under the heading, so neither column is mostly empty.
   -------------------------------------------------------------------------- */
.intro-head h2{margin-bottom:1rem}.intro-body .lead{max-width:none;font-size:1.15rem;line-height:1.62}.intro-body .lead:last-child{margin-bottom:0}.intro-split .btn{margin-top:1.7rem}
@media (max-width:900px){.intro-split .btn{margin-top:1.2rem}}/* --------------------------------------------------------------------------
   Prose that is not sharing its row with anything: the heading owns its line
   and the paragraphs run underneath. .prose p is capped at 66ch for reading, which would leave the right half of a full-width block empty, so this
   variant widens the measure and sets the paragraphs a shade smaller so a
   long line stays comfortable.
   -------------------------------------------------------------------------- */
.prose-wide p{max-width:none;font-size:1.0625rem;line-height:1.66}.prose-wide h2{margin-top:2.6rem}.prose-wide h2:first-child{margin-top:0}.prose-wide .principles, .prose-wide .ticks{max-width:none}/* A list of short items reads better in two columns than as one tall stack
   across a full-width block. */
.ticks-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,52px)}
@media (max-width:700px){.ticks-2{grid-template-columns:1fr}}/* Build credit. Quiet by default and only picking up the brass on hover, so it reads
   as a credit rather than a third party advertising inside the client's footer. */
.foot-credit{color:#7F8B95}.foot-credit a{color:#9AA7B1;text-decoration:none;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s}.foot-credit a:hover{color:var(--brass-bright);border-bottom-color:var(--brass)}
@media (max-width:820px){.foot-bot{flex-direction:column;gap:.7rem}}/* --------------------------------------------------------------------------
   Complete range list under each product group. Names run down the columns so
   an alphabetical scan reads vertically, and the CAS number is pushed to the
   right of each row so the numbers line up as a column of their own.
   -------------------------------------------------------------------------- */
.range-full{margin-top:clamp(30px,3.4vw,46px);border-top:1px solid var(--line);
  padding-top:clamp(24px,2.8vw,34px)}.range-full-head{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1.2rem 2.4rem;align-items:center;margin-bottom:0}.range-full-head h3{margin-bottom:.4rem}.range-full-head p{margin:0;color:#4A5560;font-size:.95rem;max-width:70ch}.range-full-head .btn{white-space:nowrap}
@media (max-width:700px){.range-full-head{grid-template-columns:1fr}}