:root{
  --paper:#EDE8DF;
  --paper-2:#F6F2EA;
  --paper-3:#DDD6CA;
  --ink:#2D2D2D;
  --muted:#716D66;
  --green:#1B4332;
  --green-2:#2F654E;
  --line:rgba(45,45,45,.15);
  --accent:#8B3A3A;
  --accent-soft:rgba(139,58,58,.13);
  --shadow:0 24px 70px rgba(35,30,25,.12);
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 8% 26%,rgba(255,255,255,.48),transparent 30rem),
    linear-gradient(180deg,var(--paper-2),var(--paper));
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.28;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.6) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 64%,rgba(78,65,50,.08) 0 1px,transparent 1.5px);
  background-size:23px 23px,31px 31px;
}

img{display:block;max-width:100%}
a{color:inherit}
button,a{font:inherit}
button{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.shell{width:min(1180px,calc(100% - 48px));margin:0 auto}
.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  color:var(--green-2);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow::before{content:"";width:38px;height:1px;background:currentColor}
.serif{font-family:var(--serif);font-weight:400}
.muted{color:var(--muted)}
.skip-link{
  position:fixed;
  left:18px;
  top:-100px;
  z-index:100;
  padding:10px 14px;
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
.skip-link:focus{top:18px}

.topbar{
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  height:78px;
  color:#F5F0E8;
  transition:background .25s,color .25s,backdrop-filter .25s;
}
.topbar.is-scrolled{
  color:var(--ink);
  background:rgba(237,232,223,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.topbar-inner{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.brand{
  justify-self:center;
  text-decoration:none;
  text-align:center;
  line-height:1;
}
.brand strong{
  display:block;
  font-family:var(--serif);
  font-size:1.14rem;
  font-weight:500;
  letter-spacing:.28em;
}
.brand span{
  display:block;
  margin-top:6px;
  font-family:Georgia,serif;
  font-size:.62rem;
  letter-spacing:.2em;
  opacity:.7;
}
.back-link,.top-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  text-decoration:none;
  font-size:.82rem;
  letter-spacing:.08em;
}
.top-link{justify-self:end}
.back-link::before{content:"←";font-family:Georgia,serif;font-size:1.1rem}
.top-link::after{content:"↗";font-size:.8rem}

.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  align-items:end;
  color:#F6F1E9;
  background:#241F1C;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.025);
  transition:opacity .35s ease,transform 1.2s ease;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(12,11,10,.8) 0%,rgba(12,11,10,.44) 46%,rgba(12,11,10,.12) 72%),
    linear-gradient(0deg,rgba(12,11,10,.85) 0%,transparent 54%);
}
.hero::after{
  content:"";
  position:absolute;
  right:-12vw;
  bottom:-30vw;
  z-index:1;
  width:64vw;
  height:64vw;
  border-radius:50%;
  background:var(--accent);
  opacity:.26;
  filter:blur(90px);
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.52fr);
  align-items:end;
  gap:60px;
  padding:150px 0 86px;
}
.hero-copy{max-width:760px}
.hero-kicker{
  margin:0 0 16px;
  font-family:Georgia,serif;
  font-size:.8rem;
  font-style:italic;
  letter-spacing:.2em;
  opacity:.82;
}
.hero h1{
  margin:0;
  font-size:clamp(3.6rem,8.8vw,8.5rem);
  line-height:.92;
  letter-spacing:-.05em;
}
.hero h1 .small{
  display:block;
  margin-top:16px;
  font-family:Georgia,serif;
  font-size:clamp(1rem,1.8vw,1.45rem);
  font-style:italic;
  font-weight:400;
  letter-spacing:.08em;
}
.hero-lead{
  max-width:660px;
  margin:28px 0 0;
  font-family:var(--serif);
  font-size:clamp(1.1rem,2vw,1.45rem);
  line-height:1.75;
  letter-spacing:.04em;
}
.hero-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:620px;
  margin-top:34px;
  border-top:1px solid rgba(255,255,255,.35);
}
.hero-meta div{padding:15px 18px 0 0}
.hero-meta b{display:block;margin-bottom:5px;font-size:.75rem;letter-spacing:.08em}
.hero-meta span{font-size:.78rem;line-height:1.55;opacity:.74}
.hero-bottle{
  justify-self:end;
  align-self:end;
  width:min(25vw,320px);
  max-height:60vh;
  object-fit:contain;
  filter:drop-shadow(0 28px 35px rgba(0,0,0,.34));
  transform:translateY(18px);
}
.scroll-cue{
  position:absolute;
  z-index:3;
  right:28px;
  bottom:30px;
  writing-mode:vertical-rl;
  font-family:Georgia,serif;
  font-size:.68rem;
  letter-spacing:.2em;
  opacity:.62;
}

.dye-switch{
  position:sticky;
  top:0;
  z-index:24;
  background:rgba(237,232,223,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.dye-switch-inner{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,3vw,42px);
  overflow-x:auto;
  scrollbar-width:none;
}
.dye-switch-inner::-webkit-scrollbar{display:none}
.dye-chip{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:16px 0 14px;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  cursor:pointer;
  font-size:.82rem;
  white-space:nowrap;
  opacity:.55;
}
.dye-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--chip)}
.dye-chip.is-active{border-color:var(--chip);opacity:1;font-weight:600}

.section{padding:118px 0}
.section.tight{padding:88px 0}
.section.dark{color:#F2EDE6;background:var(--green)}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(320px,1.15fr);
  gap:70px;
  align-items:end;
  margin-bottom:52px;
}
.section-head h2{
  margin:0;
  font-size:clamp(2.3rem,4.8vw,4.7rem);
  line-height:1.08;
  letter-spacing:-.03em;
}
.section-head p{
  max-width:660px;
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.95;
}
.dark .section-head p{color:rgba(242,237,230,.7)}
.dark .eyebrow{color:#BDD0C3}

.origin-grid{
  display:grid;
  grid-template-columns:1.16fr .82fr .82fr;
  min-height:620px;
  overflow:hidden;
  border-radius:22px;
  box-shadow:var(--shadow);
  background:#D7CFC1;
}
.origin-card{
  position:relative;
  overflow:hidden;
  min-height:460px;
  background:#CFC8BD;
}
.origin-card img{width:100%;height:100%;object-fit:cover}
.origin-card.material img{object-position:center}
.origin-card.liquid{
  display:grid;
  place-items:center;
  padding:70px 22px 78px;
  background:
    radial-gradient(circle at 50% 70%,var(--accent-soft),transparent 46%),
    linear-gradient(155deg,#F5F0E8,#D7CFC1);
}
.origin-card.liquid img{
  width:min(78%,290px);
  height:min(76%,430px);
  object-fit:contain;
  filter:drop-shadow(0 24px 28px rgba(38,31,27,.22));
}
.origin-label{
  position:absolute;
  z-index:2;
  left:22px;
  bottom:18px;
  padding:9px 12px;
  border-radius:999px;
  color:#F5F0E8;
  background:rgba(20,18,16,.62);
  backdrop-filter:blur(10px);
  font-size:.75rem;
  letter-spacing:.08em;
}
.origin-card.liquid .origin-label{color:var(--ink);background:rgba(245,240,232,.75)}

.spec-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:68px;
  align-items:start;
}
.spec-title{
  position:sticky;
  top:126px;
}
.spec-title h2{margin:0;font-size:clamp(2.6rem,5.4vw,5.2rem);line-height:1}
.spec-title .origin-note{
  margin:25px 0 0;
  padding-left:18px;
  border-left:3px solid var(--accent);
  color:var(--muted);
  font-size:.95rem;
  line-height:1.85;
}
.spec-list{margin:0;border-top:1px solid var(--line)}
.spec-row{
  display:grid;
  grid-template-columns:126px 1fr;
  gap:24px;
  padding:23px 0;
  border-bottom:1px solid var(--line);
}
.spec-row dt{color:var(--muted);font-size:.78rem;letter-spacing:.1em}
.spec-row dd{margin:0;font-family:var(--serif);font-size:1.06rem;line-height:1.75}
.fact-note{
  margin-top:26px;
  padding:18px 20px;
  border:1px solid rgba(27,67,50,.22);
  border-radius:10px;
  background:rgba(255,255,255,.32);
  color:var(--muted);
  font-size:.82rem;
  line-height:1.8;
}

.swatch-stage{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.72fr);
  align-items:stretch;
  min-height:650px;
  overflow:hidden;
  border-radius:22px;
  background:#E2DBCF;
  box-shadow:var(--shadow);
}
.swatch-stage figure{margin:0;background:#F2EEE7}
.swatch-stage figure img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:contain;
  background:#F2EEE7;
}
.swatch-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px;
  color:#F2EDE6;
  background:var(--green);
}
.swatch-copy .big{
  display:block;
  margin-bottom:26px;
  font-family:var(--serif);
  font-size:clamp(3.5rem,7vw,7rem);
  line-height:.9;
  color:var(--accent);
}
.swatch-copy h3{margin:0 0 18px;font-family:var(--serif);font-size:2rem;font-weight:400}
.swatch-copy p{margin:0;color:rgba(242,237,230,.7);font-size:.9rem;line-height:1.9}

.service-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.service-card{
  min-height:240px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.28);
}
.service-card .no{font-family:Georgia,serif;color:var(--accent);font-style:italic}
.service-card h3{margin:55px 0 12px;font-family:var(--serif);font-size:1.35rem;font-weight:400}
.service-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.78}

.clients-section{
  padding-top:104px;
  padding-bottom:104px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(255,255,255,.38),transparent 48%),
    var(--paper);
}
.clients-layout{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.55fr);
  gap:clamp(50px,7vw,96px);
  align-items:start;
}
.clients-copy h2{
  max-width:390px;
  margin:0;
  font-size:clamp(2.6rem,4.5vw,4.8rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.035em;
}
.clients-copy>p:last-child{
  max-width:390px;
  margin:24px 0 0;
  color:var(--muted);
  line-height:1.9;
}
.clients-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.clients-grid span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:104px;
  padding:20px 14px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-size:clamp(.95rem,1.35vw,1.22rem);
  letter-spacing:.04em;
  text-align:center;
}

.cta-panel{
  position:relative;
  overflow:hidden;
  padding:88px clamp(30px,7vw,92px);
  border-radius:24px;
  color:#F4EFE7;
  background:var(--green);
}
.cta-panel::after{
  content:"";
  position:absolute;
  right:-10%;
  bottom:-120%;
  width:55%;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(255,255,255,.04),0 0 0 110px rgba(255,255,255,.03);
}
.cta-panel h2{
  position:relative;
  z-index:1;
  max-width:780px;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,4.9rem);
  font-weight:400;
  line-height:1.15;
}
.cta-panel p{position:relative;z-index:1;max-width:680px;margin:22px 0 0;color:rgba(244,239,231,.7);line-height:1.85}
.actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.05em;
  transition:transform .2s,background .2s,color .2s;
}
.button.primary{color:var(--green);background:var(--paper);border-color:var(--paper)}
.button:hover{transform:translateY(-2px)}
.button.ghost:hover{background:rgba(255,255,255,.1)}

.footer{
  padding:44px 0 110px;
  color:var(--muted);
  font-size:.76rem;
}
.footer-inner{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:24px}

/* 面料染色页 */
.service-hero .hero-inner{grid-template-columns:minmax(0,1fr)}
.service-hero h1{max-width:900px;font-size:clamp(3.2rem,8vw,7.6rem)}
.service-hero .hero-lead{max-width:720px}
.service-hero::after{background:#8C7A62}
.service-hero .hero-meta{max-width:760px}
.card-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:30px;
}
.filter-button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.3);
  cursor:pointer;
}
.filter-button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--chip)}
.filter-button.is-active{color:#F6F1E9;border-color:var(--chip);background:var(--chip)}
.card-atlas{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.48fr);
  overflow:hidden;
  min-height:710px;
  border-radius:22px;
  background:#D7CFC3;
  box-shadow:var(--shadow);
}
.card-atlas-main{position:relative;overflow:hidden;background:#F2EDE5}
.card-atlas-main img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.card-atlas-info{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:48px;
  color:#F4EFE7;
  background:var(--green);
}
.card-atlas-info .count{font-family:Georgia,serif;font-style:italic;opacity:.55}
.card-atlas-info h3{margin:auto 0 14px;font-family:var(--serif);font-size:clamp(2rem,4vw,3.8rem);font-weight:400}
.card-atlas-info p{margin:0;color:rgba(244,239,231,.7);font-size:.88rem;line-height:1.85}
.atlas-thumbs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}
.atlas-thumb{
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid transparent;
  border-radius:12px;
  background:none;
  cursor:pointer;
  aspect-ratio:3/4;
}
.atlas-thumb img{width:100%;height:100%;object-fit:cover}
.atlas-thumb.is-active{border-color:var(--green);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--green)}
.sample-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.sample-card{
  position:relative;
  overflow:hidden;
  margin:0;
  border:1px solid rgba(38,36,31,.1);
  border-radius:15px;
  background:#F5F1E9;
}
.sample-card img{width:100%;aspect-ratio:2/3;object-fit:contain;background:#F5F1E9}
.sample-card figcaption{
  padding:11px 14px 12px;
  border-top:1px solid rgba(38,36,31,.08);
  color:var(--muted);
  font-size:.76rem;
  letter-spacing:.04em;
}
.process{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(242,237,230,.24);
}
.process-step{padding:28px 24px 32px;border-right:1px solid rgba(242,237,230,.2)}
.process-step:last-child{border-right:0}
.process-step .no{font-family:Georgia,serif;color:#BFD1C4;font-style:italic}
.process-step h3{margin:38px 0 12px;font-family:var(--serif);font-size:1.25rem;font-weight:400}
.process-step p{margin:0;color:rgba(242,237,230,.66);font-size:.84rem;line-height:1.75}
.screen-note{
  margin-top:18px;
  padding:14px 16px;
  border-left:3px solid var(--accent);
  color:var(--muted);
  background:rgba(255,255,255,.28);
  font-size:.8rem;
  line-height:1.75;
}

.mobile-action{display:none}

@media (max-width:900px){
  .shell{width:min(100% - 32px,720px)}
  .topbar{height:66px}
  .topbar-inner{grid-template-columns:1fr auto}
  .brand{justify-self:end;text-align:right}
  .brand strong{font-size:1rem}
  .top-link{display:none}
  .hero-inner{grid-template-columns:1fr;gap:28px;padding:118px 0 78px}
  .hero h1{font-size:clamp(3.4rem,18vw,6.2rem)}
  .hero-bottle{position:absolute;right:-24px;bottom:44px;width:42vw;max-height:42vh;opacity:.92}
  .hero-copy{position:relative;z-index:2;padding-right:18vw}
  .hero-lead{font-size:1.05rem}
  .hero-meta{grid-template-columns:1fr;max-width:66%;margin-top:24px}
  .hero-meta div{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.18)}
  .scroll-cue{display:none}
  .dye-switch-inner{justify-content:flex-start}
  .section{padding:82px 0}
  .section.tight{padding:65px 0}
  .section-head{grid-template-columns:1fr;gap:22px;margin-bottom:34px}
  .origin-grid{grid-template-columns:1fr 1fr;min-height:0}
  .origin-card{min-height:400px}
  .origin-card.material{grid-column:1/3;min-height:500px}
  .spec-grid{grid-template-columns:1fr;gap:40px}
  .spec-title{position:static}
  .swatch-stage{grid-template-columns:1fr;min-height:0}
  .swatch-stage figure{min-height:560px}
  .swatch-copy{padding:36px}
  .service-cards{grid-template-columns:1fr}
  .service-card{min-height:0}
  .service-card h3{margin-top:30px}
  .clients-section{padding:78px 0}
  .clients-layout{grid-template-columns:1fr;gap:38px}
  .clients-copy h2{max-width:none}
  .clients-copy>p:last-child{max-width:620px}
  .clients-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card-atlas{grid-template-columns:1fr;min-height:0}
  .card-atlas-main{min-height:610px}
  .card-atlas-info{min-height:300px;padding:34px}
  .card-atlas-info h3{margin:auto 0 14px}
  .sample-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .process-step{border-bottom:1px solid rgba(242,237,230,.2)}
  .process-step:nth-child(2){border-right:0}
  .footer{padding-bottom:100px}
  .mobile-action{
    position:fixed;
    z-index:28;
    left:14px;
    right:14px;
    bottom:max(14px,env(safe-area-inset-bottom));
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:54px;
    padding:0 18px;
    border-radius:999px;
    color:#F5F0E8;
    background:var(--green);
    box-shadow:0 16px 44px rgba(20,40,31,.28);
    text-decoration:none;
    font-size:.86rem;
  }
}

@media (max-width:560px){
  .shell{width:calc(100% - 28px)}
  .topbar-inner{grid-template-columns:1fr auto}
  .back-link span{display:none}
  .hero{min-height:92svh}
  .hero::before{background:linear-gradient(0deg,rgba(12,11,10,.9),rgba(12,11,10,.2) 72%)}
  .hero-inner{padding-top:100px}
  .hero-copy{padding-right:0}
  .hero-bottle{right:-28px;bottom:26px;width:50vw;opacity:.55}
  .hero h1{font-size:clamp(3.2rem,19vw,5rem)}
  .hero-lead{max-width:78%;font-size:.98rem}
  .hero-meta{max-width:72%}
  .dye-switch-inner{min-height:62px;gap:20px}
  .dye-chip{font-size:.77rem}
  .origin-grid{display:block;border-radius:15px}
  .origin-card,.origin-card.material{min-height:420px}
  .origin-card.liquid{min-height:360px}
  .spec-row{grid-template-columns:92px 1fr;gap:14px}
  .swatch-stage{border-radius:15px}
  .swatch-stage figure{min-height:430px}
  .swatch-copy .big{font-size:4.2rem}
  .clients-section{padding:68px 0}
  .clients-layout{gap:30px}
  .clients-copy h2{font-size:2.7rem}
  .clients-copy>p:last-child{margin-top:18px;font-size:.9rem}
  .clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clients-grid span{min-height:82px;padding:16px 8px;font-size:.92rem}
  .cta-panel{border-radius:17px;padding:58px 25px}
  .actions{display:grid}
  .button{width:100%}
  .footer-inner{display:block}
  .footer-inner span{display:block;margin-top:8px}
  .atlas-thumbs{grid-template-columns:repeat(5,74px);overflow-x:auto;padding:4px}
  .card-atlas-main{min-height:455px}
  .card-atlas{border-radius:15px}
  .sample-grid{grid-template-columns:1fr;gap:12px}
  .sample-card{width:100%;height:auto}
  .process{grid-template-columns:1fr}
  .process-step{border-right:0}
}

/* 染料完整产品详情页 v1.1 */
.product-hero{
  min-height:900px;
  max-height:1080px;
}
.product-hero .hero-bg{
  opacity:.72;
  filter:saturate(.82) contrast(.98);
}
.product-hero::before{
  background:
    linear-gradient(90deg,rgba(12,15,13,.92) 0%,rgba(12,15,13,.72) 48%,rgba(12,15,13,.24) 76%),
    linear-gradient(0deg,rgba(12,15,13,.9) 0%,transparent 58%);
}
.product-hero .hero-inner{
  grid-template-columns:minmax(0,.92fr) minmax(390px,.62fr);
  align-items:center;
  padding:146px 0 86px;
}
.product-hero .hero-copy{max-width:720px}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:22px;
}
.hero-tags span{
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  font-size:.72rem;
  letter-spacing:.06em;
}
.product-hero h1{
  font-size:clamp(4.4rem,8.5vw,8.8rem);
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:34px;
}
.button.light{
  min-height:52px;
  color:var(--green);
  border-color:var(--paper-2);
  background:var(--paper-2);
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#F5F0E8;
  text-decoration:none;
  font-size:.86rem;
}
.text-link span{font-size:1rem;transition:transform .2s}
.text-link:hover span{transform:translate(3px,-3px)}
.hero-product{
  position:relative;
  justify-self:end;
  width:min(100%,470px);
  margin:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:24px;
  background:rgba(246,242,234,.94);
  box-shadow:0 34px 90px rgba(0,0,0,.32);
  transform:rotate(1.2deg);
}
.hero-product::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(27,67,50,.14);
  border-radius:14px;
  pointer-events:none;
}
.hero-product-label{
  position:absolute;
  z-index:2;
  top:28px;
  left:28px;
  padding:7px 10px;
  border-radius:999px;
  color:var(--green);
  background:rgba(246,242,234,.88);
  box-shadow:0 8px 25px rgba(26,31,26,.12);
  font-size:.7rem;
  letter-spacing:.08em;
}
.hero-bucket{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:14px;
  transition:opacity .28s ease;
}
.switch-label{
  flex:none;
  padding-right:22px;
  border-right:1px solid var(--line);
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.12em;
}

.section-index{
  display:flex;
  align-items:baseline;
  gap:11px;
  margin-bottom:26px;
  color:var(--green);
}
.section-index::after{
  content:"";
  flex:1;
  height:1px;
  margin-left:10px;
  background:var(--line);
}
.section-index span{
  font-family:Georgia,serif;
  font-size:1.15rem;
  font-style:italic;
}
.section-index em{
  font-size:.66rem;
  font-style:normal;
  letter-spacing:.18em;
}
.light-index{color:#C8D8CD}
.light-index::after{background:rgba(255,255,255,.18)}

.product-overview{
  padding-top:92px;
  background:linear-gradient(180deg,#E8E2D8,#F4F0E8 55%,var(--paper));
}
.product-panel{
  display:grid;
  grid-template-columns:minmax(430px,.9fr) minmax(0,1.1fr);
  gap:0;
  overflow:hidden;
  border:1px solid rgba(45,45,45,.12);
  border-radius:24px;
  background:rgba(250,248,243,.78);
  box-shadow:var(--shadow);
}
.product-gallery{
  display:grid;
  grid-template-rows:minmax(0,1fr) 190px;
  min-height:830px;
  padding:22px;
  background:
    radial-gradient(circle at 35% 35%,var(--accent-soft),transparent 38%),
    linear-gradient(150deg,#E9E3D9,#D8D0C4);
}
.product-gallery figure{margin:0}
.product-main{
  overflow:hidden;
  border-radius:16px;
  background:#EEE9E0;
}
.product-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#EEE9E0;
  transition:opacity .28s ease;
}
.product-thumbs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.product-thumbs figure{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#D5CDC1;
}
.product-thumbs img{width:100%;height:100%;object-fit:cover}
#productSwatch{object-fit:contain;background:#F2EEE7}
.product-thumbs figcaption{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 9px;
  border-radius:999px;
  color:#F8F4EC;
  background:rgba(22,20,18,.62);
  backdrop-filter:blur(8px);
  font-size:.68rem;
}
.product-copy{padding:clamp(42px,5vw,72px)}
.product-copy h2{
  margin:0;
  font-size:clamp(2.8rem,5vw,5.1rem);
  line-height:1.04;
  letter-spacing:-.04em;
}
.product-summary{
  margin:25px 0 28px;
  padding-left:18px;
  border-left:3px solid var(--accent);
  color:var(--muted);
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.9;
}
.quickfacts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:30px;
  border:1px solid var(--line);
  border-radius:12px;
}
.quickfacts div{min-height:94px;padding:18px}
.quickfacts div:nth-child(odd){border-right:1px solid var(--line)}
.quickfacts div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.quickfacts b{
  display:block;
  margin-bottom:9px;
  color:var(--muted);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.08em;
}
.quickfacts strong{
  display:block;
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:500;
  line-height:1.5;
}
.spec-list.compact .spec-row{grid-template-columns:94px 1fr;padding:17px 0}
.spec-list.compact .spec-row dd{font-size:.94rem}
.product-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.button.solid{color:#F4EFE7;border-color:var(--green);background:var(--green)}
.button.outline{color:var(--green);border-color:rgba(27,67,50,.36)}
.button.outline:hover{background:rgba(27,67,50,.06)}

.origin-section{padding-top:96px}
.origin-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-height:0;
}
.origin-card{margin:0}
.origin-card.material,.origin-card.liquid{min-height:590px}
.origin-card.liquid{padding:0;background:#E2DBD0}
.origin-card.liquid img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  filter:none;
}
.origin-card.swatch{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:#F2EEE7;
}
.origin-card.swatch img{
  width:100%;
  height:clamp(560px,72vw,900px);
  object-fit:contain;
  background:#F2EEE7;
}
.origin-card figcaption{
  position:absolute;
  z-index:2;
  right:18px;
  bottom:18px;
  left:18px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#F8F4EC;
  background:rgba(20,18,16,.64);
  backdrop-filter:blur(12px);
}
.origin-card figcaption span{
  grid-row:1/3;
  align-self:center;
  font-family:Georgia,serif;
  color:rgba(255,255,255,.6);
  font-style:italic;
}
.origin-card figcaption b{font-size:.8rem;font-weight:600}
.origin-card figcaption small{margin-top:3px;font-size:.65rem;opacity:.62}
.origin-card.swatch figcaption{
  position:static;
  right:auto;
  bottom:auto;
  left:auto;
  order:-1;
  margin:0;
  padding:18px 22px;
  border:0;
  border-radius:0;
  background:var(--green);
  backdrop-filter:none;
}

.production-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 0%,rgba(128,158,136,.18),transparent 28rem),
    #173D2E;
}
.production-section .section-head{margin-bottom:42px}
.production-hero{
  position:relative;
  height:min(62vw,650px);
  margin:0;
  overflow:hidden;
  border-radius:20px;
}
.production-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(10,25,19,.72),transparent 48%);
}
.production-hero img{width:100%;height:100%;object-fit:cover}
.production-hero figcaption{
  position:absolute;
  z-index:2;
  left:30px;
  bottom:28px;
}
.production-hero figcaption span{
  display:block;
  margin-bottom:7px;
  color:#C7D7CC;
  font-size:.68rem;
  letter-spacing:.16em;
}
.production-hero figcaption strong{
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:400;
}
.production-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.production-steps article{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}
.production-steps img{width:100%;height:235px;object-fit:cover}
.production-steps article>div{padding:22px 22px 25px}
.production-steps span{color:#BCD0C2;font-family:Georgia,serif;font-size:.68rem;font-style:italic;letter-spacing:.1em}
.production-steps h3{margin:12px 0 8px;font-family:var(--serif);font-size:1.28rem;font-weight:400}
.production-steps p{margin:0;color:rgba(242,237,230,.66);font-size:.82rem;line-height:1.75}

.dyeing-capability{background:#F3EFE7}
.capability-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  grid-template-rows:repeat(2,310px);
  gap:14px;
}
.capability-card{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#CFC8BD;
}
.capability-card.wide{grid-row:1/3}
.capability-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(13,18,15,.78),transparent 60%);
}
.capability-card img{width:100%;height:100%;object-fit:cover}
.capability-card>div{
  position:absolute;
  z-index:2;
  right:24px;
  bottom:22px;
  left:24px;
  color:#F5F0E8;
}
.capability-card span{font-family:Georgia,serif;font-size:.7rem;font-style:italic;opacity:.62}
.capability-card h3{margin:8px 0 5px;font-family:var(--serif);font-size:1.45rem;font-weight:400}
.capability-card p{margin:0;color:rgba(245,240,232,.7);font-size:.78rem;line-height:1.65}
.material-band{
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;
  gap:18px 26px;
  margin-top:14px;
  padding:26px 30px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.46);
}
.material-band>span{color:var(--muted);font-size:.72rem;letter-spacing:.08em}
.material-band>div{display:flex;flex-wrap:wrap;gap:9px}
.material-band b{
  min-width:70px;
  padding:9px 13px;
  border-radius:999px;
  background:var(--green);
  color:#F5F0E8;
  text-align:center;
  font-family:var(--serif);
  font-size:.86rem;
  font-weight:400;
}
.material-band p{
  grid-column:2;
  margin:0;
  color:var(--muted);
  font-size:.74rem;
  line-height:1.65;
}

.colour-section{background:#E8E1D6}
.swatch-stage{min-height:590px}
.swatch-copy .micro{
  margin:0 0 8px;
  color:rgba(242,237,230,.5);
  font-family:Georgia,serif;
  font-size:.65rem;
  letter-spacing:.15em;
}
.swatch-copy>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-top:28px;
  color:#F2EDE6;
  text-decoration:none;
  font-size:.8rem;
}
.spectrum-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin:64px 0 24px;
}
.spectrum-head span{color:var(--green-2);font-size:.67rem;letter-spacing:.16em}
.spectrum-head h3{margin:7px 0 0;font-size:2rem;font-weight:400}
.spectrum-head p{max-width:400px;margin:0;color:var(--muted);font-size:.82rem;line-height:1.7}
.spectrum-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.spectrum-grid button{
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(45,45,45,.1);
  border-radius:13px;
  background:#F4F0E9;
  cursor:pointer;
  text-align:left;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.spectrum-grid button:hover{transform:translateY(-4px)}
.spectrum-grid button.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent),0 14px 34px rgba(40,35,31,.12);
}
.spectrum-grid img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:contain;
  background:#F2EEE7;
}
.spectrum-grid button>span{display:flex;justify-content:space-between;gap:6px;padding:13px}
.spectrum-grid b{font-size:.78rem}
.spectrum-grid small{color:var(--muted);font-family:Georgia,serif;font-size:.62rem}

.company-section{
  position:relative;
  overflow:hidden;
  background:#F3EFE7;
}
.company-grid{
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(370px,.84fr);
  align-items:stretch;
  min-height:620px;
  overflow:hidden;
  border-radius:20px;
  box-shadow:var(--shadow);
  background:#DED6CA;
}
.company-image{position:relative;margin:0}
.company-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(12,17,14,.58),transparent 42%);
}
.company-image img{width:100%;height:100%;object-fit:cover}
.company-image figcaption{
  position:absolute;
  z-index:2;
  left:24px;
  bottom:20px;
  color:#F5F0E8;
  font-size:.78rem;
  letter-spacing:.08em;
}
.company-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(38px,5vw,66px);
  color:#F3EEE6;
  background:var(--green);
}
.company-copy .eyebrow{color:#BFD1C4}
.company-copy h2{margin:0;font-size:clamp(2.7rem,4.8vw,4.8rem);line-height:1.07}
.company-copy>p:not(.eyebrow){margin:26px 0 0;color:rgba(243,238,230,.7);font-size:.9rem;line-height:1.9}
.company-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:35px;
  border-top:1px solid rgba(255,255,255,.2);
}
.company-facts div{padding:20px 13px 0 0}
.company-facts strong{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:400}
.company-facts span{display:block;margin-top:6px;color:rgba(243,238,230,.52);font-size:.66rem}
.evidence-head{
  display:grid;
  grid-template-columns:1fr minmax(320px,.75fr);
  align-items:end;
  gap:40px;
  margin:72px 0 28px;
}
.evidence-head h3{margin:0;font-size:2.2rem;font-weight:400}
.evidence-head>p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.75}
.evidence-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.evidence-grid article{
  display:grid;
  grid-template-columns:145px 1fr;
  min-height:210px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.44);
}
.evidence-grid img{width:100%;height:100%;object-fit:cover;object-position:top}
.evidence-grid article>div{padding:22px 19px}
.evidence-grid span{color:var(--green-2);font-size:.65rem;letter-spacing:.1em}
.evidence-grid h4{margin:10px 0 10px;font-family:var(--serif);font-size:1rem;font-weight:500;line-height:1.45}
.evidence-grid p{margin:0;color:var(--muted);font-size:.72rem;line-height:1.7}

.applications-section{
  background:
    radial-gradient(circle at 90% 20%,var(--accent-soft),transparent 25rem),
    var(--paper);
}
.application-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.application-grid article{
  min-height:230px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.38);
  transition:transform .2s,background .2s;
}
.application-grid article:hover{transform:translateY(-4px);background:rgba(255,255,255,.65)}
.application-grid span{font-family:Georgia,serif;color:var(--accent);font-size:.75rem;font-style:italic}
.application-grid h3{margin:55px 0 10px;font-family:var(--serif);font-size:1.25rem;font-weight:400}
.application-grid p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.7}

.fulfilment-section{background:#173D2E}
.fulfilment-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.fulfilment-grid article{
  min-height:270px;
  padding:30px 25px;
  border-right:1px solid rgba(255,255,255,.18);
}
.fulfilment-grid article:last-child{border-right:0}
.fulfilment-grid .no{font-family:Georgia,serif;color:#BFD1C4;font-style:italic}
.fulfilment-grid h3{margin:65px 0 12px;font-family:var(--serif);font-size:1.25rem;font-weight:400}
.fulfilment-grid p{margin:0;color:rgba(242,237,230,.66);font-size:.82rem;line-height:1.75}
.delivery-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
}
.delivery-facts div{
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
.delivery-facts small{display:block;margin-bottom:7px;color:rgba(242,237,230,.5);font-size:.66rem;letter-spacing:.08em}
.delivery-facts strong{font-family:var(--serif);font-size:.92rem;font-weight:400}

@media (max-width:1080px){
  .product-hero .hero-inner{grid-template-columns:minmax(0,1fr) minmax(340px,.58fr);gap:38px}
  .product-panel{grid-template-columns:minmax(380px,.85fr) minmax(0,1.15fr)}
  .product-gallery{min-height:780px}
  .product-copy{padding:42px}
  .evidence-grid article{grid-template-columns:115px 1fr}
}

@media (max-width:900px){
  .product-hero{min-height:850px;max-height:none}
  .product-hero .hero-inner{grid-template-columns:1fr 320px;gap:26px}
  .product-hero .hero-copy{padding-right:0}
  .product-hero h1{font-size:clamp(3.8rem,12vw,6.3rem)}
  .hero-product{width:100%;transform:none}
  .switch-label{display:none}
  .product-panel{grid-template-columns:1fr}
  .product-gallery{grid-template-rows:minmax(520px,1fr) 180px;min-height:0}
  .product-main img{object-fit:contain;background:#EEE9E0}
  .origin-grid{grid-template-columns:1fr 1fr}
  .origin-card.material{grid-column:auto}
  .origin-card.material,.origin-card.liquid{min-height:500px}
  .production-steps{grid-template-columns:1fr}
  .production-steps article{display:grid;grid-template-columns:45% 1fr}
  .production-steps img{height:100%;min-height:220px}
  .capability-grid{grid-template-rows:repeat(2,260px)}
  .spectrum-grid{grid-template-columns:repeat(5,180px);overflow-x:auto;padding:4px 3px 16px}
  .company-grid{grid-template-columns:1fr;min-height:0}
  .company-image{min-height:520px}
  .evidence-grid{grid-template-columns:1fr}
  .evidence-grid article{grid-template-columns:170px 1fr;min-height:210px}
  .application-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fulfilment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fulfilment-grid article:nth-child(2){border-right:0}
  .fulfilment-grid article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18)}
  .delivery-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:680px){
  .product-hero{
    min-height:0;
    padding-top:86px;
  }
  .product-hero::before{
    background:linear-gradient(0deg,rgba(12,15,13,.94),rgba(12,15,13,.55) 62%,rgba(12,15,13,.38));
  }
  .product-hero .hero-inner{
    grid-template-columns:1fr;
    gap:32px;
    padding:50px 0 62px;
  }
  .product-hero .hero-copy{order:2}
  .product-hero h1{font-size:clamp(3.4rem,18vw,5.2rem)}
  .product-hero .hero-lead{max-width:none}
  .hero-product{
    order:1;
    justify-self:center;
    width:min(100%,410px);
  }
  .hero-tags{margin-bottom:15px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:17px}
  .dye-switch{top:0}
  .product-overview{padding-top:54px}
  .section-index{margin-bottom:20px}
  .product-panel{border-radius:16px}
  .product-gallery{grid-template-rows:minmax(0,1fr) 130px;padding:12px}
  .product-main{aspect-ratio:1}
  .product-main img{object-fit:cover}
  .product-copy{padding:34px 22px}
  .product-copy h2{font-size:clamp(2.5rem,13vw,3.8rem)}
  .quickfacts{grid-template-columns:1fr}
  .quickfacts div:nth-child(odd){border-right:0}
  .quickfacts div:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .product-buttons{display:grid}
  .origin-grid{display:block}
  .origin-card,.origin-card.material{min-height:390px}
  .production-hero{height:390px;border-radius:14px}
  .production-steps article{grid-template-columns:1fr}
  .production-steps img{height:230px;min-height:0}
  .capability-grid{display:block}
  .capability-card,.capability-card.wide{height:390px;margin-bottom:12px}
  .material-band{grid-template-columns:1fr;padding:23px}
  .material-band p{grid-column:1}
  .swatch-stage figure{min-height:390px}
  .spectrum-head{display:block;margin-top:46px}
  .spectrum-head p{margin-top:12px}
  .spectrum-grid{grid-template-columns:repeat(5,160px)}
  .company-image{min-height:380px}
  .company-copy{padding:38px 24px}
  .company-facts{grid-template-columns:1fr}
  .company-facts div{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .evidence-head{grid-template-columns:1fr;gap:16px;margin-top:52px}
  .evidence-grid article{grid-template-columns:118px 1fr;min-height:190px}
  .application-grid{grid-template-columns:1fr}
  .application-grid article{min-height:190px}
  .application-grid h3{margin-top:38px}
  .fulfilment-grid{grid-template-columns:1fr}
  .fulfilment-grid article{
    min-height:0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .fulfilment-grid article:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18)}
  .fulfilment-grid article:last-child{border-bottom:0}
  .fulfilment-grid h3{margin-top:32px}
  .delivery-facts{grid-template-columns:1fr 1fr}
}

@media (max-width:420px){
  .product-gallery{grid-template-rows:minmax(0,1fr) 112px}
  .product-copy{padding:30px 18px}
  .spec-list.compact .spec-row{grid-template-columns:82px 1fr}
  .origin-card,.origin-card.material{min-height:350px}
  .evidence-grid article{display:block}
  .evidence-grid img{width:100%;height:210px}
  .delivery-facts{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}