/* SW Technologies · shared styles
   Light green and white, after swssglobal.com; one typeface. */
:root{
  --wash-rgb:242,249,237;
  --ink:#1B2716;
  --white:#FFFFFF;
  --grey:#5E6B57;
  --green:#6AA744;
  --green-deep:#4E7C33;
  --mint:#F2F9ED;
  --leaf:#E3F0D9;
  --line:rgba(47,81,35,.16);
  --media-bg:#DDEBD2;
  --gut:clamp(16px,2.2vw,32px);
  --font:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
  --space:clamp(48px,6vw,88px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.45 var(--font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--leaf)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:var(--gut);top:-60px;z-index:100;background:var(--ink);color:var(--white);padding:10px 14px}
.skip:focus{top:12px}
.u{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:1px;text-underline-offset:.18em}
.u:hover{text-decoration-thickness:2px}
.arrow::after{content:"\2197";display:inline-block;margin-left:.3em;transition:transform .3s var(--ease)}
a:hover .arrow::after,a.arrow:hover::after{transform:translate(2px,-2px)}
.muted{color:var(--grey)}
.accent{color:var(--green-deep)}
.nowrap{white-space:nowrap}
.mint{background:var(--mint)}
.leaf{background:var(--leaf)}
.light{background:var(--white)}
.pad{padding-inline:var(--gut)}

/* Header: clear over the hero, a frosted bar once the page scrolls */
/* Navigation: floating capsules of liquid glass, as on iPhone. Each one blurs and deepens what passes behind it, with a bright
   rim along its top edge, light gathering along its lower edge and a soft shadow, so it floats over the page. The header
   row itself is see-through and lets clicks pass between the capsules. Inside the links capsule a lens rests on the current
   page and glides to the link under the pointer or keyboard focus (site.js). The opening-screen links use the same glass. */
.header{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px var(--gut);color:var(--ink);font-size:15px;line-height:1.2;pointer-events:none}
.header>*{pointer-events:auto}
/* The header steps aside while the Sustainability film is under it (site.js) */
.header{transition:opacity .3s var(--ease),visibility .3s,translate .3s var(--ease)}
.header.is-away{opacity:0;visibility:hidden;translate:0 -14px}
.header__brand,.header__nav,.header__cta,.header__menu,.hero__links a,.theme{border-radius:999px;background:radial-gradient(140% 130% at 16% -30%,rgba(255,255,255,.72),rgba(255,255,255,0) 55%),radial-gradient(110% 120% at 86% 135%,rgba(255,255,255,.42),rgba(255,255,255,0) 58%),rgba(255,255,255,.58);-webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.45),inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(255,255,255,.4),inset 0 -10px 16px -12px rgba(255,255,255,.85),0 10px 30px -10px rgba(27,39,22,.3),0 1px 3px rgba(27,39,22,.1)}
.header__brand,.header__cta,.header__menu{display:inline-flex;align-items:center;height:44px;padding:0 18px}
.header__brand{justify-self:start;font-weight:500;letter-spacing:-.01em}
/* Selected SW shield and horizontal wordmark; follow the saved site theme before first paint. */
.brand-logo{display:block;position:relative;flex:none;width:200px;aspect-ratio:560/104}
.brand-logo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.brand-logo__symbol,.brand-logo__dark{display:none}
[data-theme="dark"] .brand-logo__light{display:none}
[data-theme="dark"] .brand-logo__full.brand-logo__dark{display:block}
.header .header__brand{height:auto;min-height:57px;padding:6px 13px}
.menu__brand{display:inline-flex;align-items:center}
.menu .menu__top{align-items:center}
.footer__brand{display:inline-flex;margin-bottom:24px}
.footer__brand .brand-logo{width:240px}
@media(max-width:480px){
  .header__brand .brand-logo,.menu__brand .brand-logo{width:170px}
}
/* Keep the SW shield clear when a narrow phone header has less room. */
@media(max-width:380px){
  .header .header__brand{width:70px;height:56px;min-height:56px}
  .header__brand .brand-logo{width:44px;aspect-ratio:1}
  .header__brand .brand-logo__full{display:none!important}
  .header__brand .brand-logo__symbol.brand-logo__light{display:block}
  [data-theme="dark"] .header__brand .brand-logo__symbol.brand-logo__light{display:none}
  [data-theme="dark"] .header__brand .brand-logo__symbol.brand-logo__dark{display:block}
}
.header__nav{position:relative;display:flex;gap:2px;padding:4px}
.header__nav a{position:relative;z-index:1;display:flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;transition:color .25s var(--ease)}
.header__lens{position:absolute;left:0;top:4px;bottom:4px;border-radius:999px;background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.55),0 3px 10px -2px rgba(27,39,22,.2);pointer-events:none}
.header__lens.is-ready{transition:transform .45s cubic-bezier(.34,1.4,.5,1),width .45s cubic-bezier(.34,1.4,.5,1)}
.header__nav a[aria-current="page"]{color:var(--green-deep)}
.header__nav a:hover,.header__cta:hover{color:var(--green-deep)}
.header__cta{justify-self:end}
.header__menu{display:none;justify-self:end}
/* The right end of the header: the light and dark switch, then Contact us (or Menu on smaller screens) */
.header__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.theme{--ts:36px;position:relative;display:none;align-items:center;justify-content:space-between;flex:none;width:calc(var(--ts) * 2 + 12px);height:44px;padding:0 4px}
.js .theme{display:inline-flex}
.theme__lens{position:absolute;left:4px;top:calc((44px - var(--ts)) / 2);width:var(--ts);height:var(--ts);border-radius:50%;background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.55),0 3px 10px -2px rgba(27,39,22,.2);transition:transform .45s cubic-bezier(.34,1.4,.5,1)}
[data-theme="dark"] .theme__lens{transform:translateX(calc(var(--ts) + 4px))}
.theme__icon{position:relative;z-index:1;width:var(--ts);height:var(--ts);padding:calc((var(--ts) - 18px) / 2);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--grey);transition:color .3s var(--ease)}
.theme__icon--sun,[data-theme="dark"] .theme__icon--moon{color:var(--green-deep)}
[data-theme="dark"] .theme__icon--sun{color:var(--grey)}
@media (max-width:480px){
  .header{gap:8px}
  .header__end{gap:6px}
  .theme{--ts:30px}
  .header__menu{padding:0 14px}
}
@media (max-width:960px){
  .header{grid-template-columns:1fr auto}
  .header__end{grid-column:2}
  .header__nav,.header__cta{display:none}
  .header__menu{display:inline-flex}
}
.menu{position:fixed;inset:0;z-index:60;background:var(--mint);color:var(--ink);padding:20px var(--gut) 32px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.menu.is-open{opacity:1;visibility:visible}
.menu__top{display:flex;justify-content:space-between;font-size:15px}
.menu__links{margin-top:auto;display:grid;gap:10px;font-size:clamp(32px,9vw,44px);letter-spacing:-.03em;line-height:1.05}
.menu__foot{margin-top:40px;font-size:15px;color:var(--grey);display:grid;gap:4px}

/* Home: the film as the page's background. The stage stays pinned while the page scrolls past it, and the film follows
   the scroll both ways (site.js). --len is the screen heights of scroll the film takes, the values included. */
/* --pace stretches the film's scroll room (1.5 = half as much again), so it plays closer to its natural speed */
.reel{position:relative;height:calc((var(--len) * var(--pace,1) + 1) * 100svh);background:var(--mint)}
.reel__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#EDF6EF}
.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0}
/* Dark theme only: a soft layer of light on the film's final glove. It fades out well inside the glove's outline, so the film's
   own edges and shading stay as they are and the glove simply looks better lit (--held, --glove-light for how much). */
.reel__glove{display:none;position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transform-origin:0 0;pointer-events:none}
/* While the glove zooms out, the film's edges melt into the mint (--f grows with the zoom) */
.reel__stage.is-zoomed .reel__video{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent),linear-gradient(to bottom,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent),linear-gradient(to bottom,transparent,#000 var(--f),#000 calc(100% - var(--f)),transparent);mask-composite:intersect}
/* A mint wash on the text side: full under the opening headline (--hero) and while a title is on screen (--wash) */
.reel__shade{position:absolute;inset:0;pointer-events:none}
.reel__shade::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--wash-rgb),.95),rgba(var(--wash-rgb),.8) var(--wash-mid,36%),rgba(var(--wash-rgb),0) var(--wash-to,64%));opacity:max(var(--hero,1),var(--wash,0))}
/* ...and on the right, for a scene whose text sits right of the hand (the responsiveness proof) */
.reel__shade::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(var(--wash-rgb),.92),rgba(var(--wash-rgb),.74) 24%,rgba(var(--wash-rgb),0) 38%);opacity:var(--wash-r,0)}
/* ...and low on the left, under a title that sits on the bench (--wash-f): it stops below the scientist, so she stays clear */
.reel__foot{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(var(--wash-rgb),.95),rgba(var(--wash-rgb),.86) 24%,rgba(var(--wash-rgb),0) 40%);-webkit-mask-image:linear-gradient(90deg,#000 46%,transparent 68%);mask-image:linear-gradient(90deg,#000 46%,transparent 68%);opacity:var(--wash-f,0)}
/* ...and along the foot of the opening screen, under its line of text, so it reads over any part of the film */
.reel__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:clamp(150px,26svh,260px);pointer-events:none;background:linear-gradient(0deg,rgba(var(--wash-rgb),.94),rgba(var(--wash-rgb),.82) 45%,rgba(var(--wash-rgb),0));opacity:var(--hero,1)}
.reel__track{position:absolute;inset:0;z-index:3;pointer-events:none}
.rcard{position:absolute;pointer-events:auto}
.rcard--hero{left:0;top:0;display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100svh;padding:clamp(110px,16vh,170px) var(--gut) 26px}
.rmark{position:absolute;left:0;top:calc(var(--at) * var(--pace,1) * 100svh);width:1px;height:1px}
/* Page heroes (Products & Technologies): the headline at the top, a row of notes at the foot. The home page's opening
   screen (.rcard--hero) uses the same headline and foot. The main titles are set in Medium, so they read as the page's title without shouting. */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(110px,16vh,170px) var(--gut) 26px}
.hero__title{font-size:clamp(40px,5.6vw,88px);line-height:1;letter-spacing:-.04em;font-weight:500;max-width:15ch}
/* The home title: three lines on wide screens, with open line spacing */
.hero__title--home{max-width:none;font-size:clamp(40px,5vw,80px);line-height:1.3}
.hero__foot{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);align-items:end;font-size:15px;line-height:1.3;margin-top:48px}
.hero__down{grid-column:4;justify-self:end;font-size:18px;color:var(--green-deep)}
/* Home opening screen: the sentence sits under the title, set like the text in the film's scenes, and the links stay at the
   foot. Narrow screens, where the glove stands in the middle of the film: the sentence sits at the foot, above the links. */
.hero__lead{max-width:52ch;margin-top:clamp(14px,1.5vw,22px);font-size:clamp(17px,1.3vw,21px);line-height:1.45;color:#33402D;text-wrap:pretty;text-align:justify;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}
.hero__foot--home{margin-top:auto}
.hero__foot--home .hero__links{grid-column:3;grid-row:1}
.hero__foot--home .hero__down{grid-column:4;grid-row:1}
@media (max-width:1100px),(max-aspect-ratio:1/1){
  .hero__lead{margin-top:auto;max-width:none;font-size:14.5px}
  .hero__foot--home{margin-top:14px}
}
@media (max-width:760px){
  .hero__foot--home{row-gap:8px}
  .hero__foot--home .hero__links{grid-column:1/-1;grid-row:2}
  .hero__foot--home .hero__down{grid-column:2;grid-row:1}
}
/* Products opening screen: the R&D lab film fills the right part of the screen and fades softly into the mint on its left,
   so the title stays on a clean background and the two scientists sit to its right. A light mint veil at the top keeps the
   header readable. Phones: the film is a band between the title and the text below. It fades out and back in at each
   loop (site.js). */
.hero--video{position:relative;isolation:isolate;overflow:hidden}
/* Products title: large, filling the clean space to the left of the film */
.hero__title--products{max-width:none;font-size:clamp(46px,7.2vw,150px);line-height:.98;letter-spacing:-.045em}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .hero__title--products{font-size:clamp(40px,11.2vw,64px)}
  .hero--video:has(.hero__title--products) .hero__media{top:39%;bottom:24%}
}
.hero__media{position:absolute;top:0;right:0;bottom:0;width:min(64%,1240px);z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.hero__video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:opacity .8s var(--ease)}
.hero__video.is-dipping{opacity:0}
.hero__media::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(90px,14svh,140px);pointer-events:none;background:linear-gradient(180deg,rgba(var(--wash-rgb),.88),rgba(var(--wash-rgb),0))}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .hero__media{top:26%;bottom:34%;width:100%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent)}
  .hero__video{object-position:45% 38%}
  .hero__media::after{display:none}
}

/* Titles over the film. The script sets --e (0 to 1 as a title arrives), --x (0 to 1 as it leaves) and --lift (--x,
   gathering speed) from the scroll. Each line rises out of its own mask, one after another (--i), then the text follows;
   the title then holds, solid, while it is read, and leaves by lifting up and off the screen, never fading. Nothing here
   runs on a timer, so it follows the scroll exactly, both ways. */
.reel__titles{position:absolute;inset:0;z-index:2;pointer-events:none}
.rtitle{--e:0;--x:0;position:absolute;left:var(--gut);top:50%;display:grid;gap:clamp(14px,1.5vw,22px);width:min(54vw,820px);translate:0 calc(-50% - var(--lift,0) * (50svh + 50% + 60px));visibility:hidden}
.rtitle.is-on{visibility:visible}
.rtitle__title{font-size:clamp(44px,5.6vw,96px);font-weight:500;line-height:.98;letter-spacing:-.045em;color:var(--ink)}
.rtitle em{font-style:normal;color:var(--green-deep)}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:inline-block;translate:0 calc((1 - clamp(0,var(--e) * 1.8 - var(--i) * .2,1)) * 115%)}
.rtitle__text{max-width:52ch;text-wrap:pretty;font-size:clamp(17px,1.3vw,21px);line-height:1.45;color:#33402D;text-align:justify;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal;opacity:clamp(0,var(--e) * 2 - .9,1);translate:0 calc((1 - clamp(0,var(--e) * 2 - .9,1)) * 18px)}
.rtitle__note{font-size:13px;color:var(--grey);opacity:clamp(0,var(--e) * 2 - 1.2,1)}
.rtitle sup{font-size:.55em}
/* Three big words, each with its line beside it: drier / hydrated / balanced, and in work / in hand / in the world */
.rtitle--trio{width:min(66vw,1000px)}
.trio{display:grid;grid-template-columns:max-content minmax(0,32ch);align-items:baseline;gap:clamp(8px,1.2vw,16px) clamp(20px,2.4vw,40px);margin:0;padding:0;list-style:none}
.trio li{display:contents}
.trio .ln{font-size:clamp(40px,4.6vw,80px);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--ink)}
.trio p{font-size:clamp(15px,1.1vw,18px);line-height:1.4;color:#33402D;opacity:clamp(0,var(--e) * 2.4 - var(--n,0) * .35 - .7,1)}
.trio li:nth-child(2) p{--n:1}
.trio li:nth-child(3) p{--n:2}
.rtitle--wellness .trio .ln>span{color:var(--ink)}
.rtitle--wellness .trio{grid-template-columns:max-content minmax(0,26ch)}
/* A title with a long last line */
.rtitle--wide{width:min(62vw,1040px)}
/* The scientist beside the glove: the text keeps to a column on her left */
.rtitle--left{width:min(33.5vw,640px)}
.rtitle--left .ln>span{white-space:nowrap}
.rtitle--left .rtitle__text{max-width:30vw}
.br-narrow{display:none}
/* The scientist at the microscope: the title sits on the bench below her, its first two phrases on one line */
.rtitle--foot{top:auto;bottom:clamp(20px,4svh,44px);width:min(47vw,900px);translate:0 calc(var(--lift,0) * -100svh)}
.rtitle--foot .rtitle__title{font-size:clamp(40px,4.2vw,84px)}
.rtitle--foot .ln:nth-child(-n+2){display:inline-block;vertical-align:bottom}
.rtitle--foot .ln:first-child{margin-right:.26em}
/* What we offer: three short items in calmer, smaller type */
.rtitle--soft .trio{grid-template-columns:max-content minmax(0,30ch);row-gap:clamp(14px,1.6vw,24px)}
.rtitle--soft .trio .ln{font-size:clamp(28px,2.7vw,46px);letter-spacing:-.035em}
/* What we offer: three points in large type, each with a small green marker */
.rtitle--points{width:min(62vw,1040px)}
.points{display:grid;gap:clamp(4px,.8vw,12px);margin:0;padding:0;list-style:none}
.points .ln{font-size:clamp(40px,4.6vw,80px);font-weight:500;line-height:1.04;letter-spacing:-.04em;color:var(--ink)}
.points em{font-style:normal;color:var(--green-deep)}
/* Responsiveness: the time is the highlight. A green line draws under "one business day" as the title arrives,
   then the seal (turning with the scroll) and the 99% count follow. Wide screens: the title sits left of the raised
   glove and the proof right of the furthest point the rising hand reaches (--hand-l, --hand-reach from the script). */
.rtitle--answer{left:var(--gut);right:var(--gut);width:auto;grid-template-columns:calc(var(--hand-l,38vw) - var(--gut) - 2vw) minmax(0,1fr);column-gap:calc(var(--hand-reach,66vw) - var(--hand-l,38vw) + 4vw);align-items:center;row-gap:clamp(14px,2svh,24px)}
.rtitle--answer .rtitle__title{grid-column:1;grid-row:1/3;font-size:clamp(36px,3.85vw,76px);white-space:nowrap;transform:translateY(24svh)}
.rtitle--answer .answer__proof{grid-column:2;grid-row:1;align-self:end}
.rtitle--answer .rtitle__text{grid-column:2;grid-row:2;align-self:start}
/* The proof appears only as the title settles, once the rising hand has moved into the middle and cleared its side */
.rtitle--answer .answer__proof,.rtitle--answer .rtitle__text{opacity:clamp(0,var(--e) * 10 - 9,1);translate:0 calc((1 - clamp(0,var(--e) * 10 - 9,1)) * 14px)}
.mark{position:relative;display:inline-block}
.answer__proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-content:start;column-gap:clamp(18px,2vw,32px);opacity:clamp(0,var(--e) * 2 - .6,1);translate:0 calc((1 - clamp(0,var(--e) * 2 - .6,1)) * 18px)}
.seal{width:clamp(96px,8vw,136px);height:auto;filter:drop-shadow(0 12px 22px rgba(47,81,35,.2))}
.seal__turn{transform-origin:100px 100px;transform:rotate(calc(var(--e) * 150deg + var(--x) * 60deg))}
.seal__ring{fill:#fff;font:600 14px var(--font)}
.seal__sw{fill:var(--green-deep);font:700 42px var(--font);letter-spacing:-.03em;text-anchor:middle}
.seal__day{fill:var(--green-deep);font:600 7.5px var(--font);letter-spacing:.14em;text-anchor:middle}
.answer__stat{display:grid;gap:6px}
.answer__num{font-size:clamp(52px,5vw,88px);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--green-deep);font-variant-numeric:tabular-nums}
.answer__label{max-width:26ch;font-size:clamp(13px,.95vw,15px);font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;color:var(--green-deep)}
/* The partnership statement around the held glove: its first sentence in a column ending just before the hand, its
   second in a column starting just after it (--hand-l and --hand-r, from the script). */
.rtitle--spread{left:var(--gut);right:var(--gut);width:auto;opacity:clamp(0,var(--e) * 1.8,1)}
.spread{display:grid;grid-template-columns:calc(var(--hand-l,38vw) - var(--gut) - 2vw) minmax(0,1fr);column-gap:calc(var(--hand-r,64vw) - var(--hand-l,38vw) + 4vw);align-items:center;font-size:clamp(30px,3.4vw,66px);font-weight:500;line-height:1.45;letter-spacing:-.035em;color:var(--ink)}
.spread__half{display:block;text-wrap:balance}
.spread__half--l{text-align:right}
.spread em{font-style:normal;color:var(--green-deep)}
.spread .w{opacity:.16;transition:opacity .35s var(--ease)}
.spread .w.on{opacity:1}
@media (max-width:760px){
  .hero__foot{grid-template-columns:1fr 1fr}
  .hero__down{grid-column:2}
  .hero__foot p:nth-child(2){grid-row:2}
}
/* Narrow and portrait screens: the glove stands in the middle of the film. The opening screen keeps its wash at the top
   (under the headline) and the foot (under its text). The text of every scene is centred: it rises to the middle of the
   screen as the page scrolls (--e), holds there on its own soft band of wash, then lifts away (--lift). */
@media (max-width:1100px),(max-aspect-ratio:1/1){
  .reel__shade::after,.reel__foot{display:none}
  .reel__shade::before{background:linear-gradient(180deg,rgba(var(--wash-rgb),.94),rgba(var(--wash-rgb),.84) 30%,rgba(var(--wash-rgb),.62) 40%,rgba(var(--wash-rgb),0) 52%,rgba(var(--wash-rgb),0) 56%,rgba(var(--wash-rgb),.72) 70%,rgba(var(--wash-rgb),.96));opacity:var(--hero,1)}
  .rcard--hero{padding-top:clamp(92px,12svh,130px);text-align:center}
  .hero__lead{margin-inline:auto;max-width:38ch;font-size:15.5px;line-height:1.5;text-align:center;text-wrap:balance}
  .hero__foot--home{display:flex;flex-direction:column;align-items:center;margin-top:14px}
  .hero__links{justify-content:center}
  .rtitle,.rtitle--trio,.rtitle--wide,.rtitle--left,.rtitle--foot,.rtitle--answer,.rtitle--spread{top:50%;bottom:auto;left:var(--gut);right:var(--gut);width:auto;justify-items:center;text-align:center;translate:0 calc(-50% + (1 - var(--e)) * (1 - var(--e)) * 58svh - var(--lift,0) * (50svh + 50% + 60px))}
  .rtitle::before{content:"";position:absolute;z-index:-1;inset:-120px calc(var(--gut) * -1);background:linear-gradient(180deg,rgba(var(--wash-rgb),0),rgba(var(--wash-rgb),.3) 48px,rgba(var(--wash-rgb),.84) 120px,rgba(var(--wash-rgb),.84) calc(100% - 120px),rgba(var(--wash-rgb),.3) calc(100% - 48px),rgba(var(--wash-rgb),0));opacity:clamp(0,var(--e) * 1.6,1)}
  .rtitle__title,.rtitle--foot .rtitle__title{font-size:clamp(34px,8.6vw,56px)}
  .br-narrow{display:inline}
  .rtitle--four .ln{display:inline-block;vertical-align:bottom}
  .rtitle--foot .ln:nth-child(-n+2){display:block}
  .rtitle--foot .ln:first-child{margin-right:0}
  .rtitle__text,.rtitle--left .rtitle__text{max-width:38ch;font-size:15.5px;line-height:1.5;text-align:center;text-wrap:balance}
  .trio{grid-template-columns:1fr;row-gap:2px}
  .trio .ln,.rtitle--soft .trio .ln{font-size:clamp(26px,7vw,44px)}
  .rtitle--soft .trio,.rtitle--wellness .trio{grid-template-columns:1fr;row-gap:2px}
  .points .ln{font-size:clamp(28px,7.4vw,44px)}
  .trio p{font-size:13.5px;margin-bottom:8px}
  .rtitle--answer{grid-template-columns:minmax(0,1fr);column-gap:0}
  .rtitle--answer .rtitle__title,.rtitle--answer .answer__proof,.rtitle--answer .rtitle__text{grid-column:1;grid-row:auto;white-space:normal}
  .rtitle--answer .rtitle__title{font-size:clamp(34px,8.6vw,56px);transform:none}
  .rtitle--answer .answer__proof{opacity:clamp(0,var(--e) * 2 - .6,1);translate:0 calc((1 - clamp(0,var(--e) * 2 - .6,1)) * 18px)}
  .rtitle--answer .rtitle__text{opacity:clamp(0,var(--e) * 2 - .9,1);translate:0 calc((1 - clamp(0,var(--e) * 2 - .9,1)) * 18px)}
  .answer__proof{column-gap:16px;justify-content:center}
  .answer__stat{text-align:left}
  .seal{width:76px}
  .answer__num{font-size:clamp(48px,13vw,68px)}
  .answer__label{font-size:12px}
  /* The statement: both sentences together */
  .spread{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:clamp(14px,2.4svh,26px);justify-items:center;font-size:clamp(24px,6.4vw,38px);line-height:1.3}
  .spread__half,.spread__half--l{text-align:center}
}

/* Full-width film that grows as it scrolls in */
.film{position:relative;height:100svh;min-height:420px;overflow:hidden}
.film__media{position:absolute;inset:0;background:var(--media-bg);--i:calc((1 - var(--p,0)) * 7vw);clip-path:inset(var(--i) var(--i) 0 var(--i) round calc((1 - var(--p,0)) * 16px));will-change:clip-path}
.film__media video,.film__media img{width:100%;height:100%;object-fit:cover}
/* The film fades into the mint page at its foot, where the label sits */
.film__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--wash-rgb),.92),rgba(var(--wash-rgb),0) 42%)}
.film__label{position:absolute;left:0;right:0;bottom:7%;z-index:2;text-align:center;font-size:clamp(34px,5.6vw,88px);letter-spacing:-.035em;line-height:1;color:var(--ink)}
.film__label sup{font-size:.4em;vertical-align:super}
@media (max-width:760px){.film{height:72svh}}
/* A film with its own on-screen text is shown whole: no cropping, no fade over its lower part, and its label above it */
/* The Sustainability film fills the screen, with its heading above it, and holds there for a short stretch of scroll. --w is the
   film's width: as large as the screen needs, but never trimming more than 4% from its sides or 6% from its top and bottom, so its own
   text is always whole (it starts over 6% in from the sides and 7% from the top and bottom). Any gap left on an unusually wide or square window is the colour of the film's own edges.
   Portrait screens: the film runs edge to edge at its own shape, which keeps its text readable. */
.film--fit{display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible;padding:0}
.film--fit::after{content:"";flex:none;height:45svh}
.film--fit .film__label{position:static;order:-1;padding:clamp(18px,2.4vw,34px) var(--gut) clamp(12px,1.6vw,24px)}
.film--fit .film__media{--w:min(max(100vw,calc(100svh * 16 / 9)),calc(100svh * 16 / 9 / .88),calc(100vw / .92));position:sticky;top:0;inset-inline:auto;bottom:auto;width:100%;height:100svh;overflow:hidden;background:#01160F}
.film--fit .film__media::after{display:none}
.film--fit .film__media video{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--w);height:calc(var(--w) * 9 / 16);max-width:none;object-fit:cover}
@media (min-aspect-ratio:202/100){.film--fit .film__media video{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}}
@media (max-aspect-ratio:1/1){
  .film--fit::after{display:none}
  .film--fit .film__media{position:relative;height:auto;aspect-ratio:16/9}
  .film--fit .film__media video{position:static;translate:none;display:block;width:100%;height:100%}
}

/* Big statement, revealed word by word */
.statement{padding:var(--space) var(--gut)}
.statement p{max-width:22em;margin-inline:auto;font-size:clamp(26px,3.5vw,56px);line-height:1.1;letter-spacing:-.03em;text-align:justify;text-align-last:center}
@media (max-width:760px){.statement p{text-align:center}}
.statement a{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:.12em}
.statement .w{opacity:.2;transition:opacity .4s var(--ease)}
.statement .w.on{opacity:1}

/* Label-left, text-right rows with hairlines */
.rows{padding-inline:var(--gut)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);padding:22px 0 44px;border-top:1px solid var(--line)}
.row__label{font-size:17px;line-height:1.3;white-space:pre-line}
.row__body{max-width:38ch;display:grid;gap:1em;font-size:17px}
.row__body .arrow{justify-self:start;margin-top:.4em}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:14px;padding-bottom:44px}}

/* Section heading bar: title left, link right */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 var(--gut) 18px;font-size:17px}
.big-title{font-size:clamp(40px,5vw,80px);font-weight:300;letter-spacing:-.035em;line-height:1;padding:0 var(--gut);margin-bottom:clamp(24px,3vw,44px)}
/* Five values, at the end of the home film. The glove zooms out to a large glove in the lower middle of the screen, a
   light comes on at each fingertip and a fine line grows from it, and at its end the value appears: its photo beside its
   number, tag, name and promise. Wide screens: the five sit around the glove (03 above the middle finger, 02 and 04
   beside the fingers, 01 and 05 beside the palm) and stay there together; pointing at one (or focusing or tapping it)
   shows its description. Narrow screens: the glove moves up and the values form a list beneath it, each with a small
   photo. The script places the glove, the fingertip lights and the lines for any screen. */
.reel__values{position:absolute;inset:0;z-index:2;visibility:hidden;opacity:0;transition:opacity .5s var(--ease),visibility .5s}
.reel__values.is-on{visibility:visible;opacity:1}
.reel__bar{position:absolute;left:var(--gut);right:var(--gut);top:clamp(72px,10svh,100px);z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.reel__heading{grid-column:2;font-size:clamp(28px,2.6vw,44px);font-weight:500;letter-spacing:-.035em;line-height:1;text-align:center;color:var(--ink)}
.reel__cta{grid-column:3;justify-self:end;padding:10px 16px;font-size:14px}
.reel__hand{position:absolute;inset:0;z-index:3;pointer-events:none}
/* A green numbered circle at each fingertip, just above it. A gentle pulse invites pointing at them while nothing is in
   focus; the one in focus grows and glows. */
.finger{position:absolute;display:grid;place-items:center;translate:-50% -78%;pointer-events:auto;outline:none;cursor:pointer;opacity:0;scale:.4;transition:opacity .4s var(--ease),scale .45s var(--ease)}
.finger.is-in{opacity:1;scale:1}
.finger__num{display:grid;place-items:center;width:clamp(26px,2.1vw,34px);aspect-ratio:1;border-radius:50%;background:var(--green-deep);color:var(--white);font:600 clamp(12px,.95vw,15px)/1 var(--font);box-shadow:0 0 0 4px rgba(106,167,68,.28),0 6px 14px rgba(31,52,25,.25);transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.reel__values:not(.has-focus) .finger.is-in .finger__num{animation:finger-pulse 2.8s ease-in-out infinite}
@keyframes finger-pulse{50%{box-shadow:0 0 0 9px rgba(106,167,68,.1),0 6px 14px rgba(31,52,25,.25)}}
.finger:hover .finger__num,.finger.is-on .finger__num{background:var(--green);transform:scale(1.28);box-shadow:0 0 0 7px rgba(106,167,68,.3),0 0 26px rgba(78,124,51,.55)}
.finger:focus-visible .finger__num{outline:2px solid var(--ink);outline-offset:3px}

/* One value: its photo, then the number and tag, the name and the promise. A small dot on its edge facing the hand is
   where its line arrives. */
.reel__vals{position:absolute;inset:0;pointer-events:none;--blk:clamp(320px,28.5vw,480px);--vtop:calc(clamp(72px,10svh,100px) + clamp(48px,7svh,76px));--vgap:clamp(12px,1.2vw,20px)}
.val{position:absolute;width:var(--blk);display:grid;grid-template-columns:46% minmax(0,1fr);align-items:center;column-gap:var(--vgap);pointer-events:auto;opacity:0;visibility:hidden;translate:0 14px;transition:opacity .4s var(--ease),translate .45s var(--ease),scale .45s var(--ease),visibility .5s}
.val.is-in{opacity:1;visibility:visible;translate:none}
/* The value in focus lifts a little and sits on a soft white card with a green edge */
.val{isolation:isolate}
.val::before{content:"";position:absolute;inset:-10px -16px -14px;z-index:-1;border-radius:16px;background:rgba(255,255,255,.78);box-shadow:0 18px 40px rgba(31,52,25,.14),0 0 0 1.5px rgba(106,167,68,.6);opacity:0;transition:opacity .35s var(--ease)}
.val.is-on{translate:0 -3px;scale:1.035}
.val.is-on::before{opacity:1}
.val__img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;box-shadow:0 12px 28px rgba(31,52,25,.16);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.val__head{display:grid;gap:clamp(4px,.7svh,8px);text-align:left;cursor:pointer}
.val__line{display:flex;align-items:center;gap:10px;line-height:1}
.val__num{padding-right:10px;border-right:1px solid rgba(78,124,51,.5);font-size:clamp(14px,1.12vw,17px);font-weight:600;color:var(--green-deep);font-variant-numeric:tabular-nums}
.val__tag{font-size:clamp(10px,.8vw,12.5px);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.val__name{font-size:clamp(21px,1.95vw,34px);font-weight:500;line-height:1.04;letter-spacing:-.03em;color:var(--ink);transition:color .3s var(--ease)}
.val__lead{font-size:clamp(14px,1.15vw,19px);line-height:1.3;color:var(--green-deep)}
.val sup{font-size:.6em}
/* Where each value sits (02 and 01 down the left, 03 above the glove, 04 and 05 down the right), and where on its edge
   its line arrives */
.val[data-value="0"]{left:3vw;bottom:3.5%}
.val[data-value="1"]{left:3vw;top:calc(var(--vtop) + 3svh)}
.val[data-value="2"]{left:calc(50% - var(--blk) * .46 - var(--vgap) / 2);top:var(--vtop)}
.val[data-value="3"]{right:3vw;top:calc(var(--vtop) + 3svh)}
.val[data-value="4"]{right:3vw;bottom:3.5%}
.val.is-on .val__name{color:var(--green-deep)}
.val.is-on .val__img{transform:translateY(-3px);box-shadow:0 18px 36px rgba(31,52,25,.22)}
.val__head:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
/* The description, always shown with its value: under the photo and text, across the value's full width, after a fine line */
.val__more{grid-column:1/-1;margin-top:clamp(10px,1.4svh,14px);padding-top:clamp(8px,1.1svh,12px);border-top:1px solid rgba(47,81,35,.18)}
.val__text{font-size:clamp(14.5px,1.1vw,17px);line-height:1.45;color:#3A4734}
.reel__values.has-focus .val.is-in:not(.is-on){opacity:.5}
/* Shorter wide screens: a little smaller, so the five and the glove all fit */
@media (min-width:1180px) and (min-aspect-ratio:4/3) and (max-height:820px){
  .reel__vals{--blk:clamp(300px,27.5vw,430px);--vtop:calc(clamp(72px,10svh,100px) + 60px)}
  .val__name{font-size:clamp(19px,1.7vw,28px)}
  .val__lead{font-size:clamp(13px,1.05vw,16px)}
  .val__text{font-size:14px;line-height:1.4}
}
/* Narrow screens: a list under the glove (which the script moves to the top), each value with a small photo */
@media (max-width:1179.98px),(max-aspect-ratio:1333/1000){
  .reel__bar{top:74px;grid-template-columns:minmax(0,1fr) auto}
  .reel__heading{grid-column:1;text-align:left;white-space:nowrap;font-size:clamp(18px,4.6vw,28px)}
  .reel__cta{grid-column:2}
  .reel__bar .reel__cta{min-height:0;padding:8px 12px;font-size:13px}
  .reel__vals{inset:auto var(--gut) calc(20px + env(safe-area-inset-bottom));top:calc(var(--glove-bottom,50%) + 18px);display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;max-width:560px;margin-inline:auto}
  .val[data-value]{position:relative;inset:auto;width:auto;grid-template-columns:clamp(50px,13vw,68px) minmax(0,1fr);column-gap:12px}
  .val__img{border-radius:8px;aspect-ratio:4/3;box-shadow:none}
  .val__head{gap:1px}
  .val__line{display:none}
  .finger{translate:-50% -55%}
  .finger__num{width:21px;font-size:11px;box-shadow:0 0 0 3px rgba(106,167,68,.28),0 4px 10px rgba(31,52,25,.25)}
  .val.is-on{translate:none;scale:1}
  .val::before{inset:-6px -8px;border-radius:12px}
  .val__name{font-size:clamp(18px,5vw,24px)}
  .val__lead{font-size:13px}
  .val[data-value] .val__more{position:static;grid-column:2;max-height:0;overflow:hidden;margin-top:0;padding:0;border-top:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;translate:none;transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .35s var(--ease),visibility .35s}
  .val.is-on .val__more{max-height:160px;margin-top:6px}
  /* When an opened value needs more room than is left under the glove, the list rises over the glove's foot, on its own panel */
  .reel__vals{transform:translateY(calc(var(--list-lift,0px) * -1));transition:transform .45s var(--ease)}
  .reel__vals::before{content:"";position:absolute;z-index:-1;inset:-14px calc(var(--gut) * -1) -60px;border-radius:16px 16px 0 0;background:var(--mint);box-shadow:0 -12px 30px rgba(31,52,25,.12);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
  .reel__values.is-lifted .reel__vals::before{opacity:1}
  .reel__values.is-lifted .reel__hand{z-index:0}
  .val__text{font-size:14.5px}
}

/* The narrowest phones: the values heading and its button keep clear of each other */
@media (max-width:380px){.reel__heading{font-size:16px}}
@media (max-width:340px){.reel__bar .reel__cta{padding:7px 10px;font-size:12px}.reel__bar .reel__cta::after{display:none}}

/* Partnership benefits: numbered rows in large type */
.benefits{padding:var(--space) var(--gut) 0}
.benefits__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-bottom:clamp(28px,4vw,56px)}
.benefits__title{font-size:clamp(32px,3.6vw,56px);font-weight:300;letter-spacing:-.035em;line-height:1}
/* Section headings on both pages, set like the film titles: Medium, tight, the last words in green */
.section-title{font-weight:500;letter-spacing:-.04em}
.benefits__head p{font-size:clamp(18px,1.6vw,22px);line-height:1.3;max-width:30ch}
.benefits__list{margin:0 0 40px;padding:0;list-style:none}
.benefit{display:grid;grid-template-columns:minmax(40px,.25fr) 1.6fr 1fr;gap:var(--gut);align-items:baseline;padding:22px 0 30px;border-top:1px solid var(--line)}
.benefit:last-child{border-bottom:1px solid var(--line)}
.benefit__num{font-size:14px;color:var(--green-deep);font-weight:500}
.benefit__name{font-size:clamp(26px,3vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1.05;transition:transform .5s var(--ease),color .5s var(--ease)}
.benefit:hover .benefit__name{transform:translateX(8px);color:var(--green-deep)}
.benefit__text{font-size:16px;color:#4C5946;max-width:38ch}
.benefit sup{font-size:.6em}
@media (max-width:760px){
  .benefits__head{grid-template-columns:1fr;gap:12px}
  .benefit{grid-template-columns:36px 1fr;gap:10px 12px}
  .benefit__text{grid-column:2}
}

/* About: our story as a timeline. The green line draws itself with the scroll (--p), and each chapter lights up as the line reaches it. */
.story{position:relative;margin:clamp(24px,4vw,64px) var(--gut) 0;padding:0;list-style:none}
.story::before,.story::after{content:"";position:absolute;left:50%;top:10px;bottom:0;width:2px;margin-left:-1px;background:var(--line)}
.story::after{background:var(--green);transform-origin:top;transform:scaleY(var(--p,0))}
.chapter{position:relative;display:grid;grid-template-columns:1fr 1fr;padding-bottom:clamp(40px,4.6vw,68px)}
.chapter:last-child{padding-bottom:0}
.chapter__dot{position:absolute;left:50%;top:6px;z-index:1;width:22px;height:25px;margin-left:-11px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#C9DFBA;transition:background .5s var(--ease)}
.chapter__dot::before{content:"";position:absolute;inset:2px;clip-path:inherit;background:var(--white);transition:background .5s var(--ease)}
.chapter.is-reached .chapter__dot,.chapter.is-reached .chapter__dot::before{background:var(--green)}
.chapter__when{padding-right:clamp(32px,4vw,64px);text-align:right;font-size:clamp(30px,3.6vw,60px);font-weight:300;letter-spacing:-.035em;line-height:1;color:#7D8E74;transition:color .5s var(--ease)}
.chapter.is-reached .chapter__when{color:var(--green-deep)}
.chapter__body{padding-left:clamp(32px,4vw,64px);display:grid;gap:14px;align-content:start}
.chapter__title{font-size:clamp(24px,2.4vw,36px);font-weight:300;letter-spacing:-.03em;line-height:1.08}
.chapter__body>p{max-width:46ch;font-size:17px;color:#3D4A37}
/* The portrait in the Leadership chapter: in the empty space left of the timeline. Phones: above the chapter's text */
.chapter__portrait{position:absolute;left:0;top:0;width:clamp(150px,21vw,340px);margin:0}
.chapter__portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:14px;box-shadow:0 18px 40px -18px rgba(27,39,22,.35)}
@media (max-width:760px){.chapter__portrait{position:static;width:min(100%,280px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chips li{border:1px solid var(--line);background:var(--mint);border-radius:999px;padding:8px 14px;font-size:14px;line-height:1.1}
.chapter__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);max-width:56ch}
.chapter__stats p{font-size:15px;color:#3D4A37}
.chapter__num{display:block;margin-bottom:8px;font-size:clamp(44px,4.6vw,72px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--green-deep)}
@media (max-width:760px){
  .story::before,.story::after{left:10px}
  .chapter{grid-template-columns:1fr;gap:12px;padding-left:40px;padding-bottom:56px}
  .chapter__dot{left:10px;top:3px}
  .chapter__when{padding:0;text-align:left;font-size:30px}
  .chapter__body{padding:0}
  .chapter__stats{grid-template-columns:1fr}
}
/* Scrolling strip of technology names */
.ticker{overflow:hidden;padding:clamp(28px,3.4vw,48px) 0;border-bottom:1px solid var(--line)}
.ticker__track{display:flex;gap:clamp(40px,5vw,80px);width:max-content;animation:ticker 45s linear infinite}
.ticker__track span{font-size:clamp(24px,2.6vw,40px);letter-spacing:-.025em;white-space:nowrap}
.ticker__track sup{font-size:.45em;vertical-align:super;color:var(--green)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* At a glance: draggable strip of cards */
.glance{padding:var(--space) 0 clamp(28px,3vw,44px)}
.glance__viewport{overflow:hidden;cursor:grab;touch-action:pan-y;padding-left:var(--gut)}
.glance__viewport.is-dragging{cursor:grabbing}
.glance__track{display:flex;gap:14px;width:max-content;will-change:transform}
.gcard{position:relative;flex:0 0 auto;width:clamp(280px,25vw,380px);height:clamp(420px,33vw,480px);border-radius:10px;border:1px solid var(--line);overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) 168px;container-type:inline-size;background:var(--media-bg);user-select:none;-webkit-user-select:none}
.bar h2{font-size:inherit}
.gcard a{pointer-events:auto}
/* Every card has one shape: its picture on top and, below it, one wording panel of the same height and style: a small
   label, a title on one line, a short description and, where there is one, a link. Sizes follow the card's width. */
.gcard__text{display:flex;flex-direction:column;min-height:0;padding:14px 18px;background:var(--white);color:var(--ink);border-top:1px solid var(--line)}
.gcard__label{font-size:14px;line-height:1.3;opacity:.72}
.gcard__title{margin-top:4px;font-size:clamp(20px,2vw,30px);font-size:clamp(20px,7.8cqi,30px);line-height:1.18;letter-spacing:-.02em;white-space:nowrap}
.gcard__title sup{font-size:.55em;line-height:0;vertical-align:super}
.gcard__body{margin-top:6px;font-size:clamp(14.5px,4.2cqi,16px);line-height:1.32;letter-spacing:-.005em}
.gcard__more{margin-top:auto;font-size:15px;line-height:1.3}
/* The picture half */
.gcard__pic{position:relative;min-height:0;overflow:hidden}
.gcard__pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gcard--lab .gcard__pic>img{object-position:50% 20%}
.gcard--hq .gcard__pic>img{object-position:50% 100%}
.gcard--gloves .gcard__pic>img{object-position:50% 12%}
.gcard__pic--art,.gcard__pic--badge{display:flex;align-items:center;justify-content:center;padding:16px}
.gcard__pic--art>img,.gcard__pic--badge>img{position:static;width:auto;height:auto;max-height:100%}
.gcard__pic--art>img{max-width:82%;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent);mask-image:radial-gradient(closest-side,#000 74%,transparent)}
.gcard__pic--badge>img{max-width:68%}
.gcard__pic--tall>img{max-width:44%}
.gcard--line{background:var(--white)}
.gcard--sigma{background:#E0EDD9}
.gcard--eco{background:var(--leaf)}
.gcard--eco .gcard__pic--art>img{max-width:100%;-webkit-mask-image:none;mask-image:none}
.gcard--tech{background:var(--green)}
.gcard--bcorp{background:var(--green-deep)}
/* B Corp: the official white logo on the darkened leaves */
.gcard__logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3)}
.gcard__logo img{width:auto;height:64%;pointer-events:none}
/* Six Sigma belts, as a share of all staff */
.belts{display:grid;gap:12px}
.belt{display:grid;gap:6px}
.belt__bar{display:block;height:12px;width:calc(var(--w) * 2%);border-radius:3px}
.belt__bar--white{background:var(--white);box-shadow:inset 0 0 0 1px #BCD3AC}
.belt__bar--green{background:var(--green)}
.belt__bar--black{background:var(--ink)}
.belt__label{font-size:14px;line-height:1.2}
@media (prefers-reduced-motion:reduce){
  .glance__viewport{overflow-x:auto;cursor:auto}
  .ticker__track{animation:none}
}

/* Glove Academy: a panel that leads to gloveacademy.org. Its blue seal slides in from the left, always upright (it never
   turns), as the panel scrolls into view (--p, set by site.js). Only the dashed orbit around it turns, slowly. The panel
   blends the academy's blue into SW's mint. */
.academy{padding:0 var(--gut) var(--space)}
.academy__panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,96px);align-items:center;padding:clamp(28px,5vw,80px);border-radius:clamp(16px,1.6vw,24px);background:radial-gradient(circle at 24% 50%,rgba(16,102,150,.13),rgba(16,102,150,0) 52%),linear-gradient(120deg,#EAF3F8,var(--mint) 70%);overflow:hidden}
.academy__seal{--p:1;position:relative;display:block;width:min(100%,clamp(200px,27vw,440px));aspect-ratio:1;justify-self:center;translate:calc((1 - var(--p)) * -40%) 0;opacity:calc(.2 + var(--p) * .8);transition:scale .4s var(--ease)}
.academy__seal:hover{scale:1.03}
.academy__seal img{position:absolute;inset:8%;width:84%;height:84%;filter:drop-shadow(0 18px 28px rgba(16,102,150,.24))}
.academy__orbit{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#106696;stroke-opacity:.4;stroke-width:.8;stroke-dasharray:1.5 5;stroke-linecap:round;animation:orbit 48s linear infinite}
@keyframes orbit{to{rotate:360deg}}
.academy__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:16px;font-size:15px;color:#106696}
.academy__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#106696}
.academy__eyebrow span{color:var(--grey)}
.academy__title{font-size:clamp(32px,3.6vw,56px);line-height:1.08;text-wrap:balance}
.academy__title .accent{white-space:nowrap}
.academy__text{max-width:46ch;margin-top:18px;font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:#33402D}
.academy__topics{margin:26px 0 30px;padding:0;list-style:none;border-top:1px solid rgba(16,102,150,.2)}
.academy__topics a{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid rgba(16,102,150,.2);font-size:clamp(19px,1.6vw,24px);letter-spacing:-.02em;transition:padding .3s var(--ease),color .3s}
.academy__topics a:hover,.academy__topics a:focus-visible{padding-left:8px;color:var(--green-deep)}
.academy__num{min-width:2ch;font-size:13px;letter-spacing:0;color:#106696}
.academy__go{margin-left:auto;color:var(--green-deep);transition:transform .3s var(--ease)}
.academy__topics a:hover .academy__go{transform:translate(2px,-2px)}
@media (max-width:860px){
  .academy__panel{grid-template-columns:1fr;gap:20px}
  .academy__seal{width:min(58vw,240px);justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .academy__orbit{animation:none}
  .academy__seal{translate:none;opacity:1}
}

.section-top{padding-top:var(--space)}
.section-bottom{padding-bottom:var(--space)}

/* Pickers (product range, technologies): names | one beehive | details of the chosen item.
   Cells are pointy-top hexagons on a grid of half-width columns and quarter-height rows;
   each cell sets its own place (--r, --c, and --mr, --mc on phones where it differs). */
[data-key="single"]{--tone:#FFFFFF}
[data-key="mechanical"]{--tone:#E4F2DA}
[data-key="chemical"]{--tone:#C4E1AE}
.picker{display:grid;grid-template-columns:minmax(180px,.75fr) auto minmax(260px,1fr);grid-template-areas:"names hive panel";gap:clamp(28px,3.6vw,64px);align-items:center;padding:clamp(24px,3vw,48px) var(--gut) 0}
/* A compact section heading: the title and its text side by side (Technologies; About, with one larger statement) */
.sec-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.6vw,64px);align-items:end;padding:0 var(--gut)}
.sec-head .big-title{padding:0;margin:0}
.sec-head__label{margin-top:8px;font-size:17px;line-height:1.3}
.sec-head>p{max-width:50ch;font-size:16px;line-height:1.45;color:#3D4A37}
.sec-head--two{grid-template-columns:auto minmax(0,1fr)}
.sec-head--two>p{max-width:none;font-size:clamp(19px,1.9vw,34px);line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
#about{scroll-margin-top:clamp(84px,10svh,120px)}
@media (max-width:900px){.sec-head,.sec-head--two{grid-template-columns:1fr;gap:10px}}
/* Technologies: the list, the hive and the details start together at the top; the photo is wide and short */
.picker--tech{align-items:start}
#technologies{padding-bottom:clamp(24px,3vw,44px)}
.picker--tech .panel__img{width:100%;max-width:420px;aspect-ratio:16/9}
.picker__names{grid-area:names;display:grid}
.pick{display:flex;align-items:center;gap:12px;width:100%;padding:16px 0;border-top:1px solid var(--line);text-align:left;color:var(--grey);transition:color .3s var(--ease),border-color .3s var(--ease)}
.pick:last-child{border-bottom:1px solid var(--line)}
.picker--tech .pick{padding:11px 0}
.pick__num{min-width:1.6em;font-size:13px}
.pick__name{flex:1;font-size:clamp(19px,1.6vw,26px);letter-spacing:-.025em;line-height:1.1}
.pick__name sup,.hex__title sup,.panel__title sup{font-size:.45em;vertical-align:super}
/* The ™ glyph is much smaller than ®, so it needs a larger size to read the same */
sup.tm{font-size:.62em}
.pick::after{content:"\2192";color:var(--green);opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pick:hover,.pick.is-on{color:var(--ink)}
.pick.is-on .pick__name{color:var(--green-deep)}
.pick.is-on::after{opacity:1;transform:none}
.pick__swatch,.hex{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--edge,#BCD8A8)}
.pick__swatch{position:relative;flex:0 0 auto;width:16px;height:19px}
.pick__swatch::before,.hex::before{content:"";position:absolute;inset:1.5px;clip-path:inherit;background:var(--tone,var(--white));transition:background .35s var(--ease)}
.pick.is-on .pick__swatch{--edge:var(--green)}
.hive{grid-area:hive;--w:clamp(120px,10vw,164px);--h:calc(var(--w) * 1.1547);display:grid;grid-template-columns:repeat(8,calc(var(--w) / 2));grid-auto-rows:calc(var(--h) / 4)}
.hive--tech{--w:clamp(130px,10.8vw,176px);grid-template-columns:repeat(7,calc(var(--w) / 2))}
.hex{grid-area:var(--r)/var(--c)/span 4/span 2;position:relative;margin:4px;display:grid;place-items:center;text-align:center;transition:background .35s var(--ease),opacity .35s var(--ease)}
.hex__in{position:relative;z-index:1;display:grid;justify-items:center;gap:7px;width:74%}
.hex__level{font-size:12px;letter-spacing:.02em;color:var(--green-deep);font-weight:500}
.hex__logo{width:88%;height:calc(var(--w) * .17);object-fit:contain}
.hex__tag{font-size:11px;line-height:1.25;color:#4C5946}
.hex__go{font-size:14px;line-height:1;color:var(--green-deep);transition:transform .3s var(--ease)}
.hex__title{font-size:clamp(15px,1.25vw,20px);letter-spacing:-.02em;line-height:1.1}
a.hex:hover,a.hex:focus-visible,.hex.is-lit{outline:none;--edge:var(--green)}
a.hex:hover .hex__go{transform:translate(2px,-2px)}
/* While the range is in use, the other categories step back */
/* Technologies: each cell is one of SW's framed plaques. Black frame, white mat, the technology's artwork,
   then the SW shield, the white wordmark and one line on top.
   Insets are 1.1547x taller than wide so the frame and mat keep an even width on every side of the hexagon. */
.hive--tech{filter:drop-shadow(0 8px 12px rgba(24,34,18,.2))}
.hive--tech .hex{--fw:calc(var(--w) * .052);--mw:calc(var(--w) * .03);--edge:linear-gradient(150deg,#45494A,#101112 45%,#1E2021 75%,#3A3E3F);transition:transform .4s var(--ease),opacity .35s var(--ease)}
.hive--tech .hex::before{inset:calc(var(--fw) * 1.1547) var(--fw);background:#F6F6F2}
.hex__art,.hive--tech .hex::after{position:absolute;top:calc((var(--fw) + var(--mw)) * 1.1547);left:calc(var(--fw) + var(--mw));width:calc(100% - 2 * (var(--fw) + var(--mw)));height:calc(100% - 2.3094 * (var(--fw) + var(--mw)));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex__art{object-fit:cover;transition:filter .4s var(--ease),transform .6s var(--ease)}
/* A soft shade behind the white type, as on the printed plaques */
.hive--tech .hex::after{content:"";background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(6,14,20,.3),rgba(6,14,20,.04))}
.hive--tech .hex__in{z-index:2;width:76%;gap:calc(var(--w) * .035);color:#fff}
.hex__sw{width:calc(var(--w) * .15);height:auto}
.hex__mark{width:86%;max-height:calc(var(--w) * .16);object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.hive--tech .hex__tag{max-width:92%;font-size:10.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* The chosen plaque steps forward in an SW green frame; the others step back a little */
.hive--tech .hex.is-lit{z-index:3;transform:scale(1.05);--edge:linear-gradient(150deg,#9BD474,#6AA744 45%,#4E7C33)}
.hive--tech .hex:not(.is-lit) .hex__art{filter:saturate(.88) brightness(.93)}
.hive--tech .hex.is-lit .hex__art{transform:scale(1.04)}
.hive--tech .hex:hover:not(.is-lit){--edge:linear-gradient(150deg,#6AA744,#2B3A22)}
/* The guide cell: for anyone not sure where to start */
.hex--guide{--tone:var(--green);--edge:var(--green)}
.hex--guide .hex__level,.hex--guide .hex__go{color:var(--ink)}
a.hex--guide:hover{--edge:var(--green-deep)}
a.hex--guide:hover::before{background:#7DB656}
.picker__panels{grid-area:panel}
.panel{display:grid;gap:14px;align-content:start;justify-items:start;max-width:46ch}
.panel+.panel{margin-top:48px}
/* With JS the panels share one spot and cross-fade; without it they simply stack */
.js .picker__panels{display:grid;align-items:start;transition:height .45s var(--ease)}
.js .panel{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.js .panel.is-on{opacity:1;visibility:visible;transform:none}
.panel__eyebrow{font-size:14px;color:var(--grey)}
.panel__title{font-size:clamp(28px,2.7vw,44px);font-weight:300;letter-spacing:-.035em;line-height:1.02}
.panel__text{font-size:17px;color:#3D4A37}
.panel__text sup{font-size:.6em}
.panel__list{width:100%;border-top:1px solid var(--line)}
.panel__list li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.panel__list li span:last-child{color:var(--green-deep)}
.panel .btn{margin-top:6px}
.panel__img{width:min(100%,280px);aspect-ratio:1;margin-bottom:6px;border-radius:10px;overflow:hidden;background:var(--leaf)}
.panel__img img{width:100%;height:100%;object-fit:cover}
.panel__sub{margin-top:4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.panel__sub+.panel__list{margin-top:-8px}
.panel__list li span:last-child{text-align:right}
.panel__links{display:flex;flex-wrap:wrap;gap:8px 22px}
@media (max-width:1360px){.hex__tag{display:none}}
@media (max-width:1180px){
  .picker{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"names names" "hive panel"}
  .picker__names{display:flex;flex-wrap:wrap;gap:8px}
  .pick,.pick:last-child,.picker--tech .pick{width:auto;padding:10px 16px;border:1px solid var(--line);border-radius:999px}
  .pick.is-on{border-color:var(--green-deep)}
  .pick__name{font-size:16px}
  .pick::after{display:none}
  .hive{--w:clamp(104px,12vw,150px)}
  .hive--tech{--w:clamp(110px,13vw,160px)}
}
@media (max-width:760px){
  .picker{grid-template-columns:minmax(0,1fr);grid-template-areas:"names" "hive" "panel"}
  .pick__num{display:none}
  .hive,.hive--tech{justify-self:center;--w:min(150px,calc((100vw - 2 * var(--gut)) / 3))}
  .hive{grid-template-columns:repeat(6,calc(var(--w) / 2))}
  /* Three staggered rows of three: three and a half cells wide */
  .hive--tech{--w:min(150px,calc((100vw - 2 * var(--gut)) / 3.5));grid-template-columns:repeat(7,calc(var(--w) / 2))}
  .hive--tech .hex__in{width:84%}
  .hive--tech .hex__mark{width:94%}
  .hex{grid-area:var(--mr,var(--r))/var(--mc,var(--c))/span 4/span 2}
  .hex__level{font-size:11px}
  .hex__title{font-size:15px}
}
/* EcoTek result */
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid var(--green-deep);border-radius:999px;color:var(--green-deep);font-size:15px;line-height:1;transition:background .25s,color .25s}
.btn:hover{background:var(--green-deep);color:var(--white)}

/* Hero: two quiet links */
.hero__links{display:flex;flex-wrap:wrap;gap:10px;font-weight:500;color:var(--ink)}
.hero__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;text-decoration:none;transition:translate .3s var(--ease)}
.hero__links a:hover{translate:0 -1px}
@media (min-width:761px){.hero__links{flex-wrap:nowrap;white-space:nowrap}}
@media (max-width:760px){.hero__links{grid-column:1/-1;grid-row:3}}

/* Products: SW's guidance tools, for anyone not sure where to start */
/* Product range showroom (products-technologies.html). One material for the conveyor, the shelves and the Explore buttons:
   matte white tops with a faint mint tint, thin sage undersides and soft shadows that make them float.
   Default (phones, reduced motion, no script): normal flow, a swipeable conveyor gallery and filled shelves.
   .showroom--live (wide screens, set by site.js): a tall section whose stage holds on screen while copies of the products
   drop from the conveyor to their shelves. The title area and the conveyor keep their size throughout. */
.range{padding-bottom:var(--space)}
.showroom{--sage:#CADABF;--sage-deep:#B4C7A6;--glow:#8DD35C;--forest:#24461E;--row:118px}
.showroom__stage{position:relative;padding:var(--space) var(--gut) 0}
.showroom__top{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,3vw,56px);align-items:center}
.showroom__intro{min-width:0}
.showroom__eyebrow{display:inline-block;padding-bottom:10px;border-bottom:2px solid var(--green);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.showroom__title{margin-top:clamp(12px,2svh,24px);font-size:clamp(48px,5.2vw,92px);line-height:.95;white-space:nowrap}
.showroom__sub{margin-top:clamp(10px,1.8svh,18px);font-size:clamp(16px,1.35vw,21px);line-height:1.3}

/* Details of the family under the pointer, beside the title */
.showroom__detail{align-self:center;min-width:0;padding-left:clamp(18px,1.8vw,28px);border-left:2px solid rgba(141,211,92,.55);opacity:0;translate:0 8px;transition:opacity .3s var(--ease),translate .3s var(--ease);pointer-events:none}
.showroom__detail.is-on{opacity:1;translate:none}
.detail__cat{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}
.detail__name{margin-top:6px;font-size:clamp(26px,2.5vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.05}
.detail__desc{margin-top:8px;font-size:clamp(15px,1.15vw,18px);line-height:1.35;color:#3D4A37}
.detail__level{margin-top:6px;font-size:14px;color:var(--green-deep)}

/* The floating conveyor: a straight top surface the boxes stand on, a front face with a gently curved lip, a thin sage
   underside, a fine green light strip along the front edge, and gallery edges that fade */
.conveyor{--ch:clamp(88px,12.5svh,140px);--cw:calc(var(--ch) * 1.86);--cgap:clamp(20px,2.2vw,36px);--top:clamp(26px,3.8svh,38px);--front:clamp(38px,5.2svh,52px);--vpad:12px;position:relative;min-width:0;margin-right:calc(-1 * var(--gut))}
.conveyor__deck{position:absolute;z-index:0;left:0;right:0;top:calc(var(--vpad) + var(--ch) - var(--top) * .55);height:calc(var(--top) + var(--front))}
.conveyor__deck::before,.conveyor__deck::after{content:"";position:absolute;left:0;right:0}
.conveyor__deck::before{top:0;height:var(--top);border-radius:var(--top) 0 0 var(--top) / calc(var(--top) * .5) 0 0 calc(var(--top) * .5);background:linear-gradient(180deg,#FFFFFF,#F0F7EB);box-shadow:inset 0 1px 0 #fff,0 -4px 10px -6px rgba(27,39,22,.12)}
.conveyor__deck::after{top:var(--top);height:var(--front);border-radius:0 0 50% 50% / 0 0 calc(var(--front) * .42) calc(var(--front) * .42);background:linear-gradient(180deg,#FAFCF8,#E7F0E0);box-shadow:0 4px 0 var(--sage),0 6px 0 var(--sage-deep),0 30px 36px -14px rgba(27,39,22,.26)}
.conveyor__light{position:absolute;z-index:1;left:2%;right:0;top:calc(var(--top) - 1px);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--glow) 6%,var(--glow));box-shadow:0 0 8px rgba(141,211,92,.7);opacity:.75}
.conveyor__viewport{position:relative;z-index:1;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-top:var(--vpad);padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 86%,transparent)}
.conveyor__viewport::-webkit-scrollbar{display:none}
.conveyor__track{display:flex;gap:var(--cgap);width:max-content;margin:0;padding:0 var(--cgap) 0 calc(var(--cgap) * 1.4);list-style:none}
.cbox{flex:0 0 var(--cw);scroll-snap-align:center}
.cbox__link{position:relative;display:flex;flex-direction:column;align-items:center;-webkit-user-drag:none;user-select:none}
.cbox__media{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:var(--ch)}
.cbox__media img{display:block;height:100%;width:auto;max-width:none;margin-bottom:calc(var(--top) * -.4);filter:drop-shadow(0 8px 8px rgba(27,39,22,.14));transition:translate .35s var(--ease),filter .35s var(--ease)}
.cbox__media::after{content:"";position:absolute;z-index:-1;left:12%;right:12%;bottom:calc(var(--top) * -.55);height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(27,39,22,.24),rgba(27,39,22,0));transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cbox__link::after{content:"";position:absolute;left:16%;right:16%;top:calc(var(--ch) + var(--top) * .45 - 1px);height:3px;border-radius:3px;background:var(--glow);box-shadow:0 0 12px 2px rgba(141,211,92,.7);opacity:0;transition:opacity .35s var(--ease)}
.cbox__name{display:block;margin-top:calc(var(--top) * .5 + 10px);font-size:clamp(14px,1.1vw,17px);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.cbox__link:focus-visible{outline:2px solid var(--green-deep);outline-offset:6px;border-radius:10px}
@media (hover:hover){
  .cbox__link:hover img{translate:0 -6px;filter:drop-shadow(0 16px 12px rgba(27,39,22,.24))}
  .cbox__link:hover .cbox__media::after{opacity:.7;transform:scaleX(.9)}
  .cbox__link:hover::after{opacity:1}
}
.cbox__link:focus-visible img{translate:0 -6px}
.cbox__link:focus-visible::after{opacity:1}

/* Three category displays, equal in width and height; headings share a baseline, Explore buttons share a bottom line */
.displays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,44px);margin-top:clamp(12px,2svh,30px);padding-top:clamp(12px,2svh,22px);border-top:1px solid var(--line)}
.display{display:flex;flex-direction:column;min-width:0}
.display__head{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(6px,1.2svh,14px)}
.display__num{font-size:clamp(22px,1.9vw,30px);font-weight:500;letter-spacing:-.02em;color:var(--green-deep)}
.display__name{font-size:clamp(18px,1.75vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
.display__count{margin-top:4px;font-size:15px;color:var(--grey)}
.display__shelves{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly;gap:6px;margin:0;padding:0;list-style:none}

/* A floating shelf, as in the reference image: a white platform seen slightly from above (a top surface with rounded
   ends, a front lip that curves gently towards the viewer and carries the family name, a thin sage rim underneath and a
   soft shadow below). The product stands in the middle of the shelf. Its description and SW range classification are in
   the link for screen readers and show beside the title on hover. A spotlight shines down from one point above the shelf
   onto the product and leaves a pool of light on the middle of the platform (hover or keyboard focus). */
.pshelf__row{--slab:clamp(28px,3.4svh,34px);--plate:clamp(12px,1.4svh,15px);position:relative;display:block;height:var(--row);color:var(--ink)}
.pshelf__set{position:absolute;z-index:0;inset:0 6% calc(var(--slab) - var(--plate) * .5);pointer-events:none;overflow:hidden}
.pshelf__backdrop{position:absolute;inset:0;background:radial-gradient(34% 80% at 50% 100%,rgba(214,234,201,.5),rgba(227,240,217,.16) 60%,rgba(var(--wash-rgb),0))}
/* The spotlight: a small light at the top, a cone that widens as it falls onto the product, feathered at its edges */
.pshelf__beam{position:absolute;left:50%;top:0;bottom:0;width:58%;translate:-50% 0;filter:blur(5px);opacity:0;transition:opacity .3s var(--ease)}
.pshelf__beam::before{content:"";position:absolute;inset:0;clip-path:polygon(48.5% 0,51.5% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(236,250,226,.35),rgba(222,245,206,.62) 45%,rgba(214,242,196,.88))}
.pshelf__beam::after{content:"";position:absolute;left:50%;top:-4px;width:12px;height:12px;translate:-50% 0;border-radius:50%;background:#fff;box-shadow:0 0 10px 4px rgba(214,244,190,.9),0 0 22px 8px rgba(186,232,156,.5)}
.pshelf__slab{position:absolute;z-index:0;left:0;right:0;bottom:0;height:var(--slab);pointer-events:none;filter:drop-shadow(0 12px 10px rgba(27,39,22,.13));transition:translate .3s var(--ease)}
.pshelf__slab::before,.pshelf__slab::after{content:"";position:absolute;left:0;right:0}
/* Front lip, under the top surface: deepest at the middle, with the sage rim along its curved lower edge */
.pshelf__slab::before{top:calc(var(--plate) * .5);bottom:3px;border-radius:0 0 50% 50% / 0 0 34% 34%;background:linear-gradient(180deg,#F7FBF4,#E0EAD7);box-shadow:0 2px 0 var(--sage),0 3px 0 var(--sage-deep)}
/* Top surface: a white plate with rounded ends; a faint shadow gap behind it */
.pshelf__slab::after{top:0;height:var(--plate);border-radius:clamp(26px,3vw,44px) / 50%;background:radial-gradient(120% 160% at 50% 15%,#FFFFFF,#F6FAF2 55%,#EAF2E3);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(196,212,184,.7),0 -3px 6px -3px rgba(27,39,22,.12);transition:box-shadow .3s var(--ease)}
/* The pool of light the spotlight leaves on the top surface, under the product */
.pshelf__pool{position:absolute;z-index:0;left:0;right:0;margin-inline:auto;width:46%;bottom:calc(var(--slab) - var(--plate) * 1.3);height:calc(var(--plate) * 1.6);border-radius:50%;background:radial-gradient(closest-side,#FFFFFF,rgba(232,249,219,.9) 45%,rgba(205,238,184,0));opacity:0;pointer-events:none;transition:opacity .3s var(--ease),translate .3s var(--ease)}
/* The product stands in the middle of the shelf, its base resting on the top surface */
.pshelf__media{position:absolute;z-index:1;left:0;right:0;margin-inline:auto;width:max-content;bottom:calc(var(--slab) - var(--plate) * .62);height:calc((var(--row) - var(--slab) + var(--plate) * .62) * 1.06);display:flex;align-items:flex-end;justify-content:center;transition:translate .3s var(--ease),filter .3s var(--ease)}
.pshelf__media img{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 6px 6px rgba(27,39,22,.14))}
.pshelf__media::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;bottom:-4px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(27,39,22,.28),rgba(27,39,22,0));transition:opacity .35s var(--ease)}
/* Only the family name shows on the shelf, on the front lip; description and classification stay in the link text */
.pshelf__text{position:absolute;z-index:1;left:0;right:0;bottom:3px;height:calc(var(--slab) - var(--plate) - 3px);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transition:translate .3s var(--ease)}
.pshelf__name{font-size:clamp(12.5px,.95vw,15px);font-weight:600;letter-spacing:-.01em;line-height:1}
.pshelf__desc,.pshelf__level{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.pshelf__row:focus-visible{outline:2px solid var(--green-deep);outline-offset:3px;border-radius:14px}
/* Lit: the spotlight shines, the pool of light appears, the platform's edge catches it, product and platform lift */
.pshelf__row:focus-visible :is(.pshelf__beam,.pshelf__pool){opacity:1}
.pshelf__row:focus-visible .pshelf__slab::after{box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(141,211,92,.9),0 0 18px 2px rgba(186,232,156,.45)}
.pshelf__row:focus-visible :is(.pshelf__slab,.pshelf__media,.pshelf__text){translate:0 -3px}
.pshelf__row:focus-visible .pshelf__pool{translate:0 -3px}
.pshelf__row:focus-visible .pshelf__media{filter:brightness(1.06)}
@media (hover:hover){
  .pshelf__row:hover :is(.pshelf__beam,.pshelf__pool){opacity:1}
  .pshelf__row:hover .pshelf__slab::after{box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(141,211,92,.9),0 0 18px 2px rgba(186,232,156,.45)}
  .pshelf__row:hover :is(.pshelf__slab,.pshelf__media,.pshelf__text){translate:0 -3px}
  .pshelf__row:hover .pshelf__pool{translate:0 -3px}
  .pshelf__row:hover .pshelf__media{filter:brightness(1.06)}
}
/* Touch screens: a soft, constant light instead of a hover spotlight, and the SW range level under the name */
@media (hover:none){
  .pshelf__beam{opacity:.35}
  .pshelf__pool{opacity:.6}
  .pshelf__level{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;margin-top:3px;font-size:11.5px;line-height:1;color:var(--green-deep)}
  .pshelf__row{--slab:42px}
}

/* Explore buttons: light, see-through green tabs with a curved lower lip and a white arrow disc set into a cutout */
.explore{--disc:42px;position:relative;display:flex;align-items:center;height:52px;margin-top:clamp(8px,1.6svh,18px);color:var(--forest);filter:drop-shadow(0 6px 10px rgba(27,39,22,.1));transition:translate .3s var(--ease),filter .3s var(--ease)}
.explore::before{content:"";position:absolute;z-index:-1;left:14px;right:calc(var(--disc) + 10px);bottom:-4px;height:12px;border-radius:0 0 50% 50% / 0 0 100% 100%;background:rgba(141,211,92,.22);box-shadow:0 2px 0 rgba(181,199,166,.5)}
.explore__body{flex:1 1 auto;display:flex;align-items:center;height:100%;min-width:0;padding:0 calc(var(--disc) + 24px) 0 26px;border-radius:999px 20px 20px 999px;background:linear-gradient(180deg,rgba(188,232,158,.42),rgba(141,211,92,.26));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(106,167,68,.38);font-size:clamp(15px,1.12vw,17px);font-weight:600;white-space:nowrap;-webkit-mask:radial-gradient(circle at calc(100% - var(--disc) / 2 - 2px) 50%,transparent calc(var(--disc) / 2 + 4px),#000 calc(var(--disc) / 2 + 5px));mask:radial-gradient(circle at calc(100% - var(--disc) / 2 - 2px) 50%,transparent calc(var(--disc) / 2 + 4px),#000 calc(var(--disc) / 2 + 5px));transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.explore__disc{position:absolute;right:2px;top:50%;display:grid;place-items:center;width:var(--disc);height:var(--disc);translate:0 -50%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#F2F9ED 70%,#E3F0D9);box-shadow:inset 0 0 0 1px rgba(141,211,92,.6),0 2px 6px rgba(27,39,22,.1)}
.explore__disc svg{width:20px;height:20px;fill:none;stroke:var(--forest);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--ease)}
.explore:hover,.explore:focus-visible{translate:0 -2px;filter:drop-shadow(0 9px 12px rgba(27,39,22,.14))}
.explore:hover .explore__body,.explore:focus-visible .explore__body{background:linear-gradient(180deg,rgba(188,232,158,.6),rgba(141,211,92,.38));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(106,167,68,.6)}
.explore:hover svg,.explore:focus-visible svg{translate:2px -2px}
.explore:focus-visible{outline:2px solid var(--green-deep);outline-offset:5px;border-radius:999px}


/* Live: the stage holds on screen while the copies drop (site.js sets --row so the displays fit under the title area) */
.showroom--live{height:calc(var(--len,3) * 100svh)}
.showroom--live .showroom__stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:calc(64px + 1svh) var(--gut) clamp(12px,2svh,22px)}
.showroom--live .conveyor__viewport{overflow:hidden;scroll-snap-type:none;cursor:grab;touch-action:pan-y}
.showroom--live .conveyor__viewport.is-dragging{cursor:grabbing}
.showroom--live .pshelf:not(.is-stocked) .pshelf__media img{opacity:0}
.showroom--live .pshelf:not(.is-stocked) .pshelf__media::after{opacity:0}
.showroom__fly{position:absolute;inset:0;z-index:20;pointer-events:none}
.showroom__fly .fly{position:absolute;left:0;top:0;transform-origin:0 0;visibility:hidden;will-change:transform}
.showroom__fly .fly img{display:block;width:100%;height:100%;filter:drop-shadow(0 14px 12px rgba(27,39,22,.2))}
@media (max-height:780px) and (min-width:1024px){
  .showroom__eyebrow{display:none}
  .showroom__title{margin-top:0;font-size:clamp(44px,4.4vw,70px)}
  .display__count{display:none}
}

@media (max-width:1180px){
  .showroom__top{grid-template-columns:auto minmax(0,1fr)}
  .showroom__detail{display:none}
}
@media (max-width:1023px){
  .displays{grid-template-columns:minmax(0,640px);gap:clamp(36px,7vw,56px)}
  .display__name{white-space:normal;font-size:clamp(22px,4.6vw,28px)}
  .display__shelves{gap:10px}
}
@media (max-width:899px){
  .showroom__top{grid-template-columns:1fr;gap:18px}
  .showroom__title{font-size:clamp(48px,13vw,76px)}
  .conveyor{--ch:clamp(92px,24vw,130px);margin-left:calc(-1 * var(--gut))}
  .conveyor__deck::before{border-radius:0}
  .conveyor__viewport{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .conveyor__track{padding-left:var(--gut)}
}
@media (max-width:560px){
  .showroom{--row:128px}
  .explore{height:52px}
  .explore__body{font-size:15px;padding-left:22px}
}
@media (prefers-reduced-motion:reduce){
  .cbox__link img,.pshelf__media,.pshelf__slab,.pshelf__pool,.explore,.explore__disc svg,.showroom__detail{transition:none}
  .cbox__link:hover img,.cbox__link:focus-visible img,.pshelf__row:hover :is(.pshelf__slab,.pshelf__media),.pshelf__row:focus-visible :is(.pshelf__slab,.pshelf__media),.explore:hover,.explore:focus-visible{translate:none}
}


/* Footer: the closing line with its three ways in, then contact, links and social, a row of certification badges and
   the address line */
.footer{padding:clamp(40px,4.4vw,64px) var(--gut) 22px}
/* Desktop: the last column is never narrower than its row of social tiles */
.footer__top{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(2,minmax(0,1fr)) minmax(max-content,1fr);gap:var(--gut);align-items:start}
.footer__line{font-size:clamp(24px,2.3vw,38px);letter-spacing:-.03em;line-height:1.08;max-width:20ch}
.footer__ways{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.footer__contact .muted,.footer__social .muted{margin-bottom:4px}
.footer__col{display:grid;gap:4px;align-content:start;font-size:16px}
.footer__col a:hover{color:var(--green-deep)}
/* Certification logos: the logos alone on the footer's green, in one row, sized to look alike (round seals full height,
   wordmarks a little lower, the wide My Green Lab mark lower still) */
.footer__logos{--lh:clamp(54px,5vw,84px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(18px,2.6vw,44px);margin:clamp(30px,3.6vw,48px) 0 0;padding:clamp(18px,2vw,26px) 0 0;border-top:1px solid var(--line);list-style:none}
.footer__logos li{display:flex;align-items:center}
/* The line above the logos: the divider moves above it and the logos follow close beneath */
.footer__note{margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--line);font-size:14px;line-height:1.45;padding-right:max(0px,calc(100% - 90ch))}
.footer__note+.footer__logos{margin-top:clamp(14px,1.6vw,20px);padding-top:0;border-top:0}
.lg{display:block;width:auto;height:var(--lh);transition:transform .35s var(--ease)}
.lg--tall{height:calc(var(--lh) * .96)}
.lg--word{height:calc(var(--lh) * .76)}
.lg--wide{height:calc(var(--lh) * .56)}
.footer__logos li:hover .lg{transform:translateY(-2px)}
/* Icons: thin lines in the text's colour; the social ones sit in a ring */
.ico{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor;stroke:none}
.ilink{display:inline-flex;align-items:center;gap:9px}
.ilink .ico{color:var(--green-deep)}
.btn .ico{margin-left:-2px}
/* The social links: SW's six accounts as a row of equal tiles in their own brand logos and colours, and the Glove Academy
   LinkedIn as a bar of the same width beneath. The surfaces stay light in both themes so that the logos keep their colours. */
.footer__social{--tile:36px;--logo:calc(var(--tile) * .61);width:max-content;max-width:100%;gap:8px}
.social-row{display:grid;grid-template-columns:repeat(6,var(--tile));gap:8px}
.social-tile,.social-bar{background:#fff;border:1px solid rgba(47,81,35,.1);border-radius:10px;box-shadow:0 1px 2px rgba(27,39,22,.06);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.social-tile{display:grid;place-items:center;height:var(--tile)}
.social-tile svg,.social-bar svg{display:block;flex:none;width:var(--logo);height:var(--logo)}
.social-tile:hover,.social-bar:hover{transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(27,39,22,.35)}
.social-bar{display:flex;align-items:center;gap:10px;height:calc(var(--tile) + 6px);padding:0 13px 0 calc((var(--tile) - var(--logo)) / 2 - 1px);font-size:15px;white-space:nowrap}
.footer__col .social-bar,.footer__col .social-bar:hover{color:#1B2716}
.social-bar.arrow::after{margin-left:auto}
[data-theme="dark"] .social-tile,[data-theme="dark"] .social-bar{background:#F1F5EC;border-color:transparent;box-shadow:none}
.footer__bottom{margin-top:clamp(22px,2.6vw,32px);padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--grey)}
@media (max-width:1100px){
  .footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__top>div:first-child{grid-column:1/-1;margin-bottom:8px}
  .footer__logos{justify-content:flex-start;column-gap:clamp(22px,4vw,40px);row-gap:20px}
}
@media (min-width:768px) and (max-width:860px){
  .footer__social{--tile:32px}
}
@media (max-width:767px){
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__top>.footer__col:last-child{grid-column:1/-1}
  .footer__social{--tile:40px}
}
@media (max-width:560px){
  .footer__logos{--lh:46px;justify-content:center}
}

/* Fade-in when a block scrolls into view */
.js [data-fade]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-fade].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .finger__num{animation:none!important}
  .js [data-fade]{opacity:1;transform:none;transition:none}
  .statement .w{opacity:1}
  .reel__vals,.reel__vals::before,.finger,.finger__num,.val,.val::before,.val__more,.val__img,.reel__values,.spread .w,.benefit__name,.header__lens.is-ready,.pick,.pick::after,.hex,.hex::before,.hex__art,.js .panel,.js .picker__panels,.chapter__dot,.chapter__dot::before,.chapter__when{transition:none}
}

/* Sustainability (Products page): the latest figures as cards, then certifications, recognitions and EcoTek */
/* A full-bleed climate visual fills the left-hand box; the supporting figures stay readable alongside it. */
.sust__overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,30px);margin:0 var(--gut);padding-top:24px;border-top:1px solid var(--line)}
.sust__summary{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.sust__intro h2{margin-bottom:14px;font-size:clamp(24px,2.2vw,34px);line-height:1.12;letter-spacing:-.025em}
.sust__intro p{max-width:62ch;font-size:clamp(16px,1.15vw,18px);line-height:1.45}
.climate{position:relative;isolation:isolate;overflow:hidden;width:100%;min-width:0;aspect-ratio:2/1;min-height:100%;border-radius:14px;background:#061B10;color:#fff}
.climate__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.climate::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(2,20,10,.42),transparent 76%),linear-gradient(0deg,rgba(2,17,9,.94),rgba(2,17,9,.15) 37%,transparent 70%);pointer-events:none}
.climate__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:22px;height:100%;padding:clamp(24px,2.5vw,42px)}
.climate__brand{font-size:clamp(10px,.8vw,12px);font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:#E5EFDD}
.climate__target{font-size:clamp(21px,1.9vw,30px);line-height:1.15;letter-spacing:-.02em;color:#fff}
.climate__year{display:flex;align-items:baseline;gap:10px;margin-top:4px;font-size:clamp(76px,8.4vw,136px);font-weight:400;line-height:.92;letter-spacing:-.065em;font-variant-numeric:lining-nums}
.climate__year small{font-size:.2em;letter-spacing:-.02em;color:#D4EBC0}
.climate__detail{display:flex;align-items:center;gap:16px;max-width:56ch;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);color:#F5F9F0}
.climate__detail strong{flex:none;font-size:clamp(32px,3.2vw,50px);font-weight:400;letter-spacing:-.045em;line-height:1}
.climate__detail span{max-width:37ch;font-size:clamp(13px,1vw,16px);line-height:1.4}
.sust__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin:clamp(18px,2vw,30px) var(--gut) 0;padding:0;list-style:none}
.sust__stats li{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2vw,30px);border:1px solid rgba(197,214,184,.75);border-radius:14px;background:rgba(255,255,255,.72)}
.sust__stats--targets{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.sust__num{font-size:clamp(38px,4.2vw,68px);font-weight:300;letter-spacing:-.04em;line-height:1;color:var(--green-deep)}
.sust__text{max-width:32ch;font-size:15px;line-height:1.4;color:#3D4A37}
@media (max-width:1100px){
  .sust__overview{grid-template-columns:1fr}
  .climate{min-height:0}
  .climate__year{font-size:clamp(90px,12vw,136px)}
}
@media (max-width:760px){
  .sust__stats:not(.sust__stats--targets){grid-template-columns:1fr}
  .climate{aspect-ratio:3/2}
}
@media (max-width:480px){
  .climate{aspect-ratio:1}
  .climate__image{object-position:72% center}
  .climate__content{padding:24px;gap:18px}
  .climate__year{font-size:clamp(80px,24vw,112px)}
  .climate__detail{gap:12px}
  .sust__stats--targets li{padding:18px 14px}
  .sust__stats--targets .sust__text{font-size:14px}
}

/* Certifications and recognition: badge tiles moving sideways; the track holds the list twice, so -50% has no seam */
.creds{margin-top:clamp(32px,4.4vw,64px)}
.creds__title{padding:0 var(--gut);margin-bottom:clamp(14px,1.8vw,24px);font-size:clamp(26px,2.6vw,42px);line-height:1.05}
.creds__strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.creds__track{display:flex;width:max-content;animation:ticker 80s linear infinite}
.creds__strip:hover .creds__track{animation-play-state:paused}
.creds__list{display:flex;gap:clamp(10px,1.2vw,18px);margin:0;padding:0 clamp(10px,1.2vw,18px) 0 0;list-style:none}
.cred{flex:0 0 auto;display:flex;flex-direction:column;width:clamp(190px,16vw,240px);padding:clamp(14px,1.3vw,20px);border:1px solid rgba(197,214,184,.75);border-radius:14px;background:#fff}
.cred__badge{display:flex;align-items:center;justify-content:center;height:clamp(84px,7vw,108px);margin-bottom:12px}
.cred__badge img{display:block;width:auto;height:auto;max-width:100%;max-height:100%}
.cred__badge--text{font-size:clamp(15px,1.2vw,18px);font-weight:600;line-height:1.3;letter-spacing:.02em;text-align:center;color:var(--green-deep)}
.cred__name{font-size:16px;font-weight:500;letter-spacing:-.015em;line-height:1.2}
.cred__sub{margin-top:4px;font-size:13.5px;line-height:1.3;color:var(--grey)}
@media (prefers-reduced-motion:reduce){
  .creds__strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .creds__track{animation:none}
  .creds__list[aria-hidden]{display:none}
}

/* EcoTek: a full-width panel with the photo, the description, the result with its test conditions, and the links */
.eco{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);margin:clamp(32px,4.4vw,64px) var(--gut) 0;overflow:hidden;border:1px solid rgba(197,214,184,.75);border-radius:14px;background:rgba(255,255,255,.82)}
.eco__photo{position:relative}
.eco__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
/* A graphic rather than a photo: shown whole, on the same pale green as the home EcoTek card */
.eco__photo--art{--pad:clamp(18px,2.8vw,44px);background:var(--leaf)}
.eco__photo--art img{inset:var(--pad);width:calc(100% - var(--pad) * 2);height:calc(100% - var(--pad) * 2);object-fit:contain;object-position:50% 50%}
.eco__main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);padding:clamp(22px,3vw,48px)}
.eco__copy{display:grid;align-content:start;gap:14px;font-size:clamp(16px,1.2vw,18px);line-height:1.45;color:#33402D}
.eco__title{margin-bottom:4px;font-size:clamp(28px,2.8vw,46px);line-height:1.08;color:var(--ink)}
.eco__title sup{font-size:.45em;vertical-align:super}
.eco__result{padding-left:clamp(18px,2.4vw,40px);border-left:1px solid var(--line)}
.eco__num{font-size:clamp(54px,5.6vw,92px);font-weight:300;letter-spacing:-.04em;line-height:.95;color:var(--green-deep)}
.eco__what{margin-top:10px;font-size:16px;line-height:1.35}
.eco__specs{display:grid;gap:8px;margin-top:16px;font-size:14.5px;line-height:1.35;color:var(--grey)}
.eco__specs b{font-weight:500;color:var(--ink)}
.eco__main .btns{grid-column:1/-1}
@media (max-width:1023px){
  .eco{grid-template-columns:1fr}
  .eco__photo{aspect-ratio:16/9}
  .eco__photo--art{--pad:16px;aspect-ratio:auto;height:clamp(215px,68vw,380px)}
}
@media (max-width:760px){
  .eco__main{grid-template-columns:1fr}
  .eco__result{padding:16px 0 0;border-left:0;border-top:1px solid var(--line)}
}

/* ------------------------------------------------------------------------------------------------------------------
   Dark theme ([data-theme="dark"] on <html>, set by the switch in the header and remembered). A deep forest black with
   soft ivory type, luminous SW green accents, hairline edges, and the films lit like a studio: dimmed to the edges with a
   pool of light on the subject. The light theme above is untouched; everything here only applies in dark.
   ------------------------------------------------------------------------------------------------------------------ */
[data-theme="dark"]{color-scheme:dark;--ink:#EFF4EA;--white:#090E0A;--grey:#A3B09B;--green:#7FBF5B;--green-deep:#A9DD84;--mint:#0D1410;--leaf:#131C15;--line:rgba(206,232,190,.14);--media-bg:#18221A;--wash-rgb:9,14,10;--body:#C6D1BF;--card:linear-gradient(160deg,#18211A,#101712);--card-edge:rgba(206,232,190,.13)}
[data-theme="dark"] ::selection{background:#34552B}
[data-theme="dark"] :is(.hero__title .accent,.section-title .accent){text-shadow:0 0 44px rgba(150,220,110,.3)}
[data-theme="dark"] :is(.hero__lead,.rtitle__text,.trio p,.val__text,.benefit__text,.chapter__body>p,.chapter__stats p,.academy__text,.sec-head>p,.panel__text,.detail__desc,.sust__text,.eco__copy){color:var(--body)}
[data-theme="dark"] .sec-head--two>p{color:var(--ink)}

/* Glass: smoked instead of milky, with a finer rim */
[data-theme="dark"] :is(.header__brand,.header__nav,.header__cta,.header__menu,.hero__links a,.theme){background:radial-gradient(140% 130% at 16% -30%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),radial-gradient(110% 120% at 86% 135%,rgba(180,235,145,.09),rgba(255,255,255,0) 58%),rgba(15,22,17,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(255,255,255,.08),inset 0 -10px 16px -12px rgba(170,230,130,.2),0 12px 32px -10px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.45)}
[data-theme="dark"] .header .header__brand{color:var(--ink)}
[data-theme="dark"] .header__brand .brand-logo{--sw-logo-accent:#9BD46F}
[data-theme="dark"] :is(.header__lens,.theme__lens){background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(255,255,255,.08),0 3px 12px -2px rgba(0,0,0,.6)}

/* Films: the studio light. Dim overall, a pool of light where the subject stands, nearly black at the edges */
[data-theme="dark"] .reel__stage{background:var(--mint)}
[data-theme="dark"] .reel__glove{display:block;opacity:calc(var(--held,0) * var(--glove-light,.5))}
[data-theme="dark"] .reel__stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(calc(var(--glove-r,50vh) * .6) calc(var(--glove-r,50vh) * .72) at var(--glove-x,50%) var(--glove-y,50%),rgba(6,12,8,0) 42%,rgba(6,12,8,var(--zoom,0))),radial-gradient(62% 80% at 56% 50%,rgba(6,12,8,calc(.06 + .14 * var(--veil,0) + .5 * var(--zoom,0))),rgba(6,12,8,calc(.16 + .26 * var(--veil,0) + .32 * var(--zoom,0))) 58%,rgba(6,12,8,calc(.5 + .2 * var(--veil,0) + .25 * var(--zoom,0))))}
@media (max-width:1100px),(max-aspect-ratio:1/1){[data-theme="dark"] .reel__stage::before{background:radial-gradient(calc(var(--glove-r,50vh) * .6) calc(var(--glove-r,50vh) * .72) at var(--glove-x,50%) var(--glove-y,50%),rgba(6,12,8,0) 42%,rgba(6,12,8,var(--zoom,0))),radial-gradient(85% 60% at 50% 42%,rgba(6,12,8,calc(.06 + .14 * var(--veil,0) + .5 * var(--zoom,0))),rgba(6,12,8,calc(.18 + .26 * var(--veil,0) + .32 * var(--zoom,0))) 62%,rgba(6,12,8,calc(.46 + .26 * var(--veil,0) + .23 * var(--zoom,0))))}}
/* The statement around the glove has text on both sides, so in dark it takes the right-hand wash too */
[data-theme="dark"] .reel__shade::after{opacity:max(var(--wash-r,0),var(--wash-s,0))}
[data-theme="dark"] .hero__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 95% at 62% 42%,rgba(6,12,8,.36),rgba(6,12,8,.72))}
[data-theme="dark"] .seal{filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
[data-theme="dark"] .seal>circle:nth-of-type(2){fill:#101812}
[data-theme="dark"] .seal>circle:nth-of-type(3){stroke:#3F5636}
[data-theme="dark"] .finger__num{box-shadow:0 0 0 4px rgba(127,191,91,.3),0 6px 14px rgba(0,0,0,.5)}
[data-theme="dark"] .val::before{background:rgba(16,23,18,.88);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1.5px rgba(150,220,110,.55)}
[data-theme="dark"] .val__img{box-shadow:0 12px 28px rgba(0,0,0,.5)}
[data-theme="dark"] .val__more{border-top-color:var(--line)}
[data-theme="dark"] .val__num{border-right-color:rgba(169,221,132,.4)}

/* Cards and surfaces */
[data-theme="dark"] :is(.gcard--line,.sust__stats li,.cred,.eco){background:var(--card);border-color:var(--card-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
[data-theme="dark"] .gcard{border-color:var(--card-edge)}
[data-theme="dark"] .gcard__text{background:var(--card);border-top-color:var(--card-edge)}
[data-theme="dark"] .gcard--tech{background:#1D3618}
[data-theme="dark"] .gcard--tech .gcard__pic>img{filter:brightness(.72) saturate(1.05)}
[data-theme="dark"] .gcard--bcorp{background:#1D3618}
[data-theme="dark"] :is(.gcard--since,.gcard--lab,.gcard--supply,.gcard--hq,.gcard--gloves) .gcard__pic>img{filter:brightness(.8)}
[data-theme="dark"] .gcard--sigma{background:var(--leaf)}
[data-theme="dark"] .gcard--sigma .gcard__pic--art>img{filter:invert(1) hue-rotate(180deg)}
[data-theme="dark"] .chapter__dot{background:#3A4C33}
[data-theme="dark"] .chapter__when{color:#8A9B80}

/* Glove Academy keeps its blue, as a night glow */
[data-theme="dark"] .academy__panel{background:radial-gradient(circle at 24% 50%,rgba(60,150,205,.2),rgba(60,150,205,0) 55%),linear-gradient(120deg,#0F1D26,#0D1410 72%);box-shadow:inset 0 0 0 1px rgba(150,205,235,.1)}
[data-theme="dark"] .academy__orbit{stroke:#7CC6EE}
[data-theme="dark"] :is(.academy__eyebrow,.academy__num){color:#7CC6EE}
[data-theme="dark"] .academy__eyebrow::before{background:#7CC6EE}
[data-theme="dark"] :is(.academy__topics,.academy__topics a){border-color:rgba(124,198,238,.2)}

/* Technology plaques: brushed-metal frames on a dark mat */
[data-theme="dark"] .hive--tech{filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
[data-theme="dark"] .hive--tech .hex{--edge:linear-gradient(150deg,#6D7374,#23272A 45%,#33383A 75%,#5B6163)}
[data-theme="dark"] .hive--tech .hex::before{background:#1B211C}
[data-theme="dark"] .hive--tech .hex.is-lit{--edge:linear-gradient(150deg,#B6E892,#7FBF5B 45%,#4E7C33)}

/* Showroom: a graphite conveyor and shelves, so the product boxes and the spotlights do the talking */
[data-theme="dark"] .showroom{--sage:#34443A;--sage-deep:#1F2B23;--forest:#E4F3D8}
[data-theme="dark"] .conveyor__deck::before{background:linear-gradient(180deg,#2B372D,#1A231C);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -4px 10px -6px rgba(0,0,0,.5)}
[data-theme="dark"] .conveyor__deck::after{background:linear-gradient(180deg,#1E2820,#121A14);box-shadow:0 4px 0 var(--sage),0 6px 0 var(--sage-deep),0 30px 40px -14px rgba(0,0,0,.8)}
[data-theme="dark"] :is(.cbox__media::after,.pshelf__media::after){background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0))}
[data-theme="dark"] .pshelf__backdrop{background:radial-gradient(34% 80% at 50% 100%,rgba(130,200,95,.2),rgba(130,200,95,.06) 60%,rgba(130,200,95,0))}
[data-theme="dark"] .pshelf__slab{filter:drop-shadow(0 12px 12px rgba(0,0,0,.55))}
[data-theme="dark"] .pshelf__slab::before{background:linear-gradient(180deg,#252F27,#151D17);box-shadow:0 2px 0 var(--sage),0 3px 0 var(--sage-deep)}
[data-theme="dark"] .pshelf__slab::after{background:radial-gradient(120% 160% at 50% 15%,#3D4A3E,#2B362D 55%,#1F2821);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),0 -3px 6px -3px rgba(0,0,0,.4)}
[data-theme="dark"] .explore{filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
[data-theme="dark"] .explore::before{background:rgba(141,211,92,.12);box-shadow:0 2px 0 rgba(141,211,92,.18)}
[data-theme="dark"] .explore__body{background:linear-gradient(180deg,rgba(150,220,110,.2),rgba(110,180,80,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(150,220,110,.3)}
[data-theme="dark"] :is(.explore:hover,.explore:focus-visible) .explore__body{background:linear-gradient(180deg,rgba(150,220,110,.32),rgba(110,180,80,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(170,235,130,.55),0 0 22px rgba(130,200,95,.18)}
[data-theme="dark"] .explore__disc{background:radial-gradient(circle at 35% 30%,#364339,#1A231C 70%);box-shadow:inset 0 0 0 1px rgba(150,220,110,.5),0 2px 6px rgba(0,0,0,.4)}

/* Sustainability */
[data-theme="dark"] .climate{box-shadow:0 0 0 1px rgba(206,232,190,.16)}
[data-theme="dark"] .cred__badge:not(.cred__badge--text){padding:10px;border-radius:10px;background:#F5F8F1}
[data-theme="dark"] .eco__photo:not(.eco__photo--art) img{filter:brightness(.74)}

/* Footer logos: B Corp in its white version; ACT and Greenhealth, whose wording is dark, on a small light plate */
[data-theme="dark"] .lg[src*="b-corp"]{filter:invert(1)}
[data-theme="dark"] :is(.lg[src*="my-green-lab"],.lg[src*="greenhealth"]){padding:7px 9px;border-radius:10px;background:#F5F8F1}

@media (prefers-reduced-motion:reduce){.theme__lens,.theme__icon{transition:none}}
/* The change of theme opens as a circle from the switch */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
::view-transition-old(root){z-index:1}