/* ===== index (extracted from index.html) ===== */
/* ============================================================ 01 · TOKENS */
:root{
  --bg-900:#FFFFFF;          /* 主体白 */
  --bg-800:#F5F7F6;          /* 交替浅灰带 */
  --bg-700:#FFFFFF;          /* 卡片面 */
  --bg-600:#EDF1EF;          /* 卡片 hover */

  --brand:#264F47;
  --brand-lit:#2F6159;
  --brand-deep:#1B3A34;
  --brand-lift:#5A9E90;

  /* 浅色底专用文字色；--silver/--white/--muted 继续留给深色区使用 */
  --ink:#0F1714;             /* 浅底主文字，近黑 */
  --ink-2:#5B6863;           /* 浅底次文字 */
  --ink-3:#8A9691;           /* 浅底弱文字 */
  --accent:#2F6159;          /* 浅底品牌强调，对比 7:1 */
  --brand-on-dark:#5A9E90;   /* 深色区品牌强调 */

  --silver:#C9C9C9;
  --white:#F5F7F6;
  --muted:#A8B5B0;

  --line-1:rgba(15,23,20,.08);
  --line-2:rgba(15,23,20,.14);
  --line-3:rgba(15,23,20,.26);

  --line-dark-1:rgba(201,201,201,.10);
  --line-dark-2:rgba(201,201,201,.20);

  --plate:#FFFFFF;
  --plate-ink:#0F1714;
  --plate-muted:#5B6863;

  --dark:#0B1512;            /* 顶栏 / 页脚 */

  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --display:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  --num:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;

  --shell:1240px;
  --gut:clamp(20px,4.2vw,44px);
  --sect:clamp(84px,8.6vw,150px);
  --nav-h:76px;

  --r-xs:8px;
  --r-sm:14px;
  --r:24px;
  --r-lg:32px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ============================================================= 02 · RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg-900);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
em{font-style:normal}
address{font-style:normal}
::selection{background:var(--brand);color:#FFFFFF}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

.shell{width:100%;max-width:none;margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:1440px){.shell{width:85vw}}
.idx-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gut);top:-70px;z-index:200;padding:12px 20px;border-radius:var(--r-xs);background:var(--dark);color:#FFFFFF;font-weight:500;transition:top .3s var(--ease)}
.skip:focus{top:14px}

/* ========================================================== 03 · CONTROL */
.index-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.index-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand) 46%,var(--brand-lift) 100%);will-change:transform}

/* ============================================================= 04 · TYPE */
.index-head{max-width:760px}
.index-head--center{margin-inline:auto;text-align:center}
/* #about header: let the long company title fit on one line */
#about .index-head{max-width:none}
.index-head__label{display:inline-flex;align-items:center;gap:11px;font-family:var(--num);font-weight:600;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.index-head__label::before{content:'';width:24px;height:1px;background:currentColor;flex:none}
.index-head--center .index-head__label::after{content:'';width:24px;height:1px;background:currentColor;flex:none}
.index-head__title{margin-top:22px;font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.3vw,3.35rem);line-height:1.06;letter-spacing:-.025em;color:var(--ink)}
/* emphasis stays inside the display family (weight + colour), never a second
   typeface dropped into the middle of a headline */
.index-head__title em{font-weight:500;color:var(--accent);letter-spacing:-.01em;padding-inline:.04em}
.index-head__sub{margin-top:18px;max-width:60ch;font-size:1.0625rem;color:var(--ink-2)}
.index-head--center .index-head__sub{margin-inline:auto}

/* =========================================================== 05 · BUTTON */
.idx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 30px;border-radius:999px;overflow:hidden;isolation:isolate;
  font-family:var(--sans);font-weight:500;font-size:.9375rem;letter-spacing:.012em;white-space:nowrap;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),background-color .35s var(--ease),
             border-color .35s var(--ease),color .35s var(--ease)}
.idx-btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px}
.idx-btn span::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;opacity:.7;transition:transform .5s var(--ease-out)}
.idx-btn:hover span::after{transform:scaleX(1)}
.idx-btn::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.16) 48%,transparent 64%);
  transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.idx-btn:hover::before{transform:translateX(120%)}
.idx-btn:active{transform:scale(.98)}

.idx-btn--brand{background:var(--brand);color:#FFFFFF;
  box-shadow:0 10px 24px -16px rgba(38,79,71,.75)}
.idx-btn--brand:hover{background:var(--brand-lit);
  box-shadow:0 18px 40px -16px rgba(38,79,71,.8),0 0 0 1px rgba(38,79,71,.22)}

.idx-btn--ghost{border:1px solid var(--line-3);color:var(--ink)}
.idx-btn--ghost:hover{border-color:var(--brand);background:rgba(38,79,71,.06);
  box-shadow:0 12px 28px -18px rgba(38,79,71,.5)}
/* Request a Quote: no hover-expand underline (keep border/background hover) */
.idx-btn--ghost span::after{display:none!important}

.idx-btn--light{background:var(--dark);color:#FFFFFF}
.idx-btn--light:hover{background:#17241F;box-shadow:0 18px 40px -20px rgba(15,23,20,.55)}

/* 深色区（顶栏 / 大 banner）上的描边按钮走浅色，避免深字压深底 */
.index-nav .idx-btn--ghost{border-color:var(--line-dark-2);color:#FFFFFF}
.index-nav .idx-btn--ghost:hover{border-color:#FFFFFF;background:rgba(245,247,246,.12);box-shadow:none}
.index-hero .idx-btn--ghost{border-color:var(--line-3);color:var(--ink);
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.index-hero .idx-btn--ghost:hover{border-color:var(--brand);background:rgba(255,255,255,.88);box-shadow:none}

.idx-btn--sm{min-height:44px;padding:0 22px;font-size:.875rem}

/* ============================================================== 06 · NAV */
.index-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center}
.index-nav__bg{position:absolute;inset:0;background:rgba(11,21,18,.94);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-dark-2);opacity:1;transition:opacity .45s var(--ease)}
.index-nav.is-scrolled .index-nav__bg{opacity:1;background:var(--dark)}
.index-nav__in{position:relative;z-index:1;width:100%;max-width:none;margin-inline:auto;
  padding-inline:var(--gut);display:flex;align-items:center;gap:28px}
@media (min-width:1440px){.index-nav__in{width:85vw}}
.index-brand{display:flex;align-items:center;gap:13px;flex:none}
.index-brand img{height:32px;width:auto}
.index-brand__txt{display:flex;flex-direction:column;line-height:1.06}
.index-brand__txt b{font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:.09em;color:var(--white)}
.index-brand__txt i{font-family:var(--num);font-weight:600;font-size:.66rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--brand-on-dark);padding-left:.1em}
.index-nav__links{display:flex;align-items:center;gap:6px;margin-left:auto}
.index-nav__links > a,.index-nav__links .nav-item__top{position:relative;display:inline-flex;align-items:center;
  gap:7px;padding:9px 15px;border-radius:999px;font-size:.9rem;font-weight:400;
  color:var(--muted);transition:color .3s var(--ease),background-color .3s var(--ease)}
.index-nav__links > a::after,.index-nav__links .nav-item__top::after{content:'';position:absolute;
  left:15px;right:15px;bottom:4px;height:1px;
  background:#FFFFFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .42s var(--ease-out)}
.index-nav__links > a:hover,.index-nav__links .nav-item__top:hover{color:#FFFFFF}
.index-nav__links > a:hover::after,.index-nav__links .nav-item__top:hover::after,
.index-nav__links > a.is-active::after,.index-nav__links .nav-item__top.is-active::after{transform:scaleX(1)}
.index-nav__links > a.is-active,.index-nav__links .nav-item__top.is-active{color:#FFFFFF}

/* 二级栏目下拉 */
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-caret{flex:none;width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.75;
  transition:transform .35s var(--ease-out),opacity .3s var(--ease)}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(225deg) translateY(-1px);opacity:1}
.nav-drop{position:absolute;top:calc(100% + 12px);right:0;z-index:120;min-width:252px;padding:10px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(13,24,20,.98);border:1px solid var(--line-dark-2);border-radius:16px;
  box-shadow:0 28px 60px -24px rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .32s var(--ease-out),visibility .3s}
.nav-drop::before{content:'';position:absolute;top:-13px;left:0;right:0;height:13px}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:none}
.nav-drop a{position:static;display:block;padding:11px 14px;border-radius:10px;
  font-family:var(--sans);font-size:.88rem;font-weight:400;letter-spacing:0;color:#DDE5E1;
  opacity:1;transform:none;background:transparent;
  transition:background-color .25s var(--ease),color .25s var(--ease),padding-left .25s var(--ease)}
.nav-drop a::after{display:none}
.nav-drop a:hover,.nav-drop a.is-active{background:rgba(255,255,255,.07);color:#FFFFFF;padding-left:20px}
.nav-drop a.is-active{box-shadow:inset 2px 0 0 var(--brand-on-dark)}
.index-nav__act{display:flex;align-items:center;gap:12px;flex:none}

.index-burger{display:none;width:46px;height:46px;border:1px solid var(--line-dark-2);border-radius:var(--r-sm);
  position:relative;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.index-burger:hover{border-color:#FFFFFF;background:rgba(201,201,201,.12)}
.index-burger i{position:absolute;left:50%;width:18px;height:1.4px;margin-left:-9px;background:#FFFFFF;
  border-radius:2px;transition:transform .45s var(--ease-out),opacity .3s var(--ease)}
.index-burger i:nth-child(1){top:19px}
.index-burger i:nth-child(2){top:25px}
.is-menu .index-burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.is-menu .index-burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.index-drawer{position:fixed;inset:0;z-index:99;background:rgba(11,21,18,.97);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);display:flex;flex-direction:column;
  justify-content:center;padding:calc(var(--nav-h) + 24px) var(--gut) 42px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.index-drawer[hidden]{display:none}
.is-menu .index-drawer{opacity:1;visibility:visible}
.index-drawer nav{display:flex;flex-direction:column}
.index-drawer a{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,8vw,2.8rem);
  letter-spacing:-.02em;color:#FFFFFF;padding:16px 0;border-bottom:1px solid var(--line-dark-1);
  opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s}
.is-menu .index-drawer a{opacity:1;transform:none;transition-delay:calc(var(--i,0)*70ms + 90ms)}
.index-drawer a:hover{color:var(--brand-on-dark)}
.index-drawer__foot{margin-top:34px;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.875rem}
.index-drawer__foot a{font-family:var(--sans);font-weight:400;font-size:.9375rem;border:0;padding:0;color:var(--brand-on-dark)}

/* 移动端抽屉：二级栏目折叠组 */
.drawer-group{border-bottom:1px solid var(--line-dark-1)}
.drawer-row{display:flex;align-items:center;gap:12px}
.drawer-row > a{flex:1;border-bottom:0}
.drawer-toggle{flex:none;width:44px;height:44px;border:1px solid var(--line-dark-2);border-radius:50%;
  background:transparent;position:relative;cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.drawer-toggle:hover{border-color:#FFFFFF;background:rgba(201,201,201,.12)}
.drawer-toggle i{position:absolute;left:50%;top:50%;width:14px;height:1.4px;margin:-0.7px 0 0 -7px;
  background:#FFFFFF;border-radius:2px}
.drawer-toggle i::after{content:'';position:absolute;inset:0;background:#FFFFFF;border-radius:2px;
  transform:rotate(90deg);transition:transform .35s var(--ease-out)}
.drawer-group.is-open .drawer-toggle i::after{transform:rotate(0)}
.drawer-sub{display:flex;flex-direction:column;padding:0 0 0 20px;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease-out),opacity .35s var(--ease),padding .45s var(--ease-out)}
.drawer-group.is-open .drawer-sub{max-height:560px;padding-bottom:14px;opacity:1}
.drawer-sub a{font-family:var(--sans);font-weight:400;font-size:clamp(1rem,4.6vw,1.18rem);letter-spacing:0;
  padding:10px 0;border-bottom:0;color:var(--muted);
  opacity:1;transform:none;transition:color .3s var(--ease)}
.drawer-sub a:hover,.drawer-sub a.is-active{color:var(--brand-on-dark)}

/* ============================================================= 07 · HERO */
/* hero: one value proposition, four text elements, nothing else. top padding is
   capped so the copy never floats halfway down the viewport */
.index-hero{position:relative;display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-end;overflow:hidden;
  min-height:clamp(560px,80svh,860px);
  padding:calc(var(--nav-h) + clamp(56px,7vw,104px)) 0 clamp(56px,6.4vw,96px);
  background:var(--bg-900);isolation:isolate}
/* 大 banner：照片通栏铺满，文案压在左下角；图是明亮实景，故用浅色幕布 + 深色文字 */
.index-hero__bg{position:absolute;inset:0;z-index:0}
.index-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.index-hero__scrim{display:block;position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(0deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.62) 22%,rgba(255,255,255,.16) 48%,rgba(255,255,255,0) 74%),
    linear-gradient(96deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.50) 32%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 80%)}
.index-hero__in{position:relative;z-index:3}
.index-hero__eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--num);font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.index-hero__eyebrow::before{content:'';width:34px;height:1px;background:currentColor;flex:none}
.index-hero__title{margin-top:clamp(22px,3vw,34px);font-family:var(--display);font-weight:700;
  font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.04;letter-spacing:-.03em;color:var(--ink)}
.index-hero__line{display:block}
.index-hero__line--alt em{font-weight:500;letter-spacing:-.03em;color:var(--accent);padding-right:.04em}
.index-hero__lede{margin-top:clamp(20px,2.4vw,30px);max-width:47ch;font-size:clamp(1rem,1.20vw,1.15rem);
  line-height:1.66;color:var(--ink-2)}
.index-hero__cta{margin-top:clamp(28px,3.4vw,42px);display:flex;flex-wrap:wrap;gap:14px}

/* ========================================================= 08 · FEATURES */
/* six cells, six different footprints: two carry photography, one is a tinted
   band, so the grid never reads as six identical text tiles */
.index-features{padding:var(--sect) 0;background:var(--bg-800);scroll-margin-top:var(--nav-h)}
.index-features__grid{margin-top:clamp(46px,5.4vw,74px);display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.index-feature{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);
  background:var(--bg-700);border:1px solid var(--line-1);
  transition:border-color .5s var(--ease),background-color .5s var(--ease)}
.index-feature:hover{border-color:var(--line-2);background:var(--bg-600)}
.index-feature__in{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.6vw,34px)}
.index-feature--a{grid-column:span 3}
.index-feature--b{grid-column:span 3}
.index-feature--c{grid-column:span 2}
.index-feature--d{grid-column:span 2}
.index-feature--e{grid-column:span 2}
.index-feature--band{grid-column:span 6;flex-direction:row;align-items:center;gap:clamp(20px,3vw,44px);
  background:linear-gradient(100deg,#E7EEEC 0%,var(--bg-700) 62%);border-color:var(--line-1)}
.index-feature--band .index-feature__in{flex-direction:row;align-items:center;gap:clamp(20px,3vw,44px);
  padding:clamp(22px,2.4vw,32px) clamp(24px,2.8vw,36px)}

.index-feature__media{margin:0;overflow:hidden;background:var(--bg-900)}
.index-feature__media img{width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform 1.15s var(--ease-out)}
.index-feature--a .index-feature__media img{aspect-ratio:4/3}
.index-feature:hover .index-feature__media img{transform:scale(1.05)}

.index-feature__ic{display:flex;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r-xs);color:var(--accent);
  transition:color .45s var(--ease),border-color .45s var(--ease)}
.index-feature:hover .index-feature__ic{color:var(--brand);border-color:var(--line-3)}
.index-feature__ic svg{width:22px;height:22px;fill:currentColor;stroke:none;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.index-feature h3{margin-top:22px;font-family:var(--display);font-weight:600;font-size:1.12rem;
  letter-spacing:-.008em;color:var(--ink)}
.index-feature__in>h3:first-child{margin-top:0}
.index-feature p{margin-top:11px;font-size:.92rem;line-height:1.66;color:var(--ink-2);max-width:46ch}
.index-feature--band p{max-width:62ch}
.index-feature--band .index-feature__ic{flex:none}
.index-feature--band h3{margin-top:0;flex:none;min-width:min(280px,42%)}

/* ======================================================== 09 · PRODUCTS */
.index-products{position:relative;padding:var(--sect) 0;background:var(--bg-900);scroll-margin-top:var(--nav-h)}
.index-products::before{content:'';position:absolute;left:50%;top:12%;width:min(880px,86vw);height:420px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(38,79,71,.10),transparent 72%)}
/* stage wraps the scroll grid + fixed overlay arrows (arrows must not scroll with cards) */
.index-products__stage{position:relative;margin:clamp(46px,5.4vw,74px) calc(50% - 50vw) -44px}
.index-products__grid{--prod-gap:clamp(18px,2.2vw,28px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--prod-gap);list-style:none;
  padding:10px var(--gut) 44px;overflow:visible}
.index-products__grid:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.index-products__note{margin-top:26px;max-width:52ch;font-size:.86rem;line-height:1.66;color:var(--ink-2)}
.idx-car{display:none}
.idx-car__btn{position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-3);
  background:var(--bg-700);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;pointer-events:auto;box-shadow:0 4px 16px rgba(15,23,20,.12);
  transition:opacity .3s var(--ease-out),border-color .3s,color .3s,background .3s,transform .3s var(--ease-out)}
.idx-car__btn[data-car-prev]{left:8px}
.idx-car__btn[data-car-next]{right:8px}
.idx-car__btn:hover{border-color:rgba(38,79,71,.45);color:var(--accent);background:var(--bg-800);transform:translateY(calc(-50% - 2px))}
.idx-car__btn[disabled]{opacity:.32;pointer-events:none}
.idx-car__btn svg{width:18px;height:18px;fill:currentColor;stroke:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.idx-car__dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
.idx-car.is-static .idx-car__dots{display:none}
.idx-car__dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--line-3);cursor:pointer;
  transition:background .3s,transform .3s}
.idx-car__dot.is-on{background:var(--accent);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.index-products__grid{scroll-behavior:auto}}
/* 大屏：产品区整体收窄 15%（视口居中 85vw），避免卡片过大，且永不溢出 */
@media (min-width:1440px){.index-products__stage{width:85vw;margin:clamp(46px,5.4vw,74px) calc(50% - 42.5vw) -44px}}
.index-prod{display:flex;flex-direction:column;min-width:0}
.index-prod__card{position:relative;display:flex;flex-direction:column;width:100%;border-radius:var(--r-lg);
  overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F5F6F5 100%);
  border:1px solid var(--line-2);
  box-shadow:0 16px 36px -28px rgba(15,23,20,.35);
  transition:box-shadow .6s var(--ease),border-color .5s var(--ease)}
.index-prod__card:hover{border-color:rgba(38,79,71,.32);box-shadow:0 26px 54px -30px rgba(15,23,20,.42)}
.index-prod__plate{position:relative;overflow:hidden;background:var(--plate);
  border-bottom:1px solid rgba(38,79,71,.12)}
.index-prod__plate img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.15s var(--ease-out)}
.index-prod__card:hover .index-prod__plate img{transform:scale(1.06)}
.index-prod__media{display:block;color:inherit;text-decoration:none;cursor:pointer}
.index-prod__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 22px}
/* the category sits under the photograph, never as a pill floating on it */
.index-prod__cat{font-family:var(--num);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.index-prod__body h3{margin-top:10px;font-family:var(--display);font-weight:700;font-size:1.12rem;
  letter-spacing:-.012em;color:var(--plate-ink)}
.index-prod__body>p{margin-top:10px;font-size:.88rem;line-height:1.64;color:var(--plate-muted)}
.index-prod__link{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:9px;
  font-size:.85rem;font-weight:500;color:var(--plate-ink)}
.index-prod__link svg{width:15px;height:15px;fill:currentColor;stroke:none;stroke-width:1.6;
  transition:transform .5s var(--ease-out)}
.index-prod__card:hover .index-prod__link svg{transform:translateX(5px)}

/* ============================================================ 10 · NEWS */
/* editorial rows, not a second card grid: a thumbnail, a date, a headline */
.index-news{padding:clamp(40px,4vw,64px) 0;background:var(--bg-800);scroll-margin-top:var(--nav-h)}
.index-news__list{margin-top:clamp(40px,4.6vw,64px);border-top:1px solid var(--line-2)}
.index-news__row{border-bottom:1px solid var(--line-2)}
.index-post{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(20px,3vw,40px);
  align-items:center;padding:clamp(20px,2.4vw,30px) 0}
.index-post__media{margin:0;overflow:hidden;border-radius:var(--r-sm);background:var(--bg-700)}
.index-post__media img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform 1.15s var(--ease-out)}
.index-news__row:hover .index-post__media img{transform:scale(1.05)}
.index-post:hover .index-post__body h3{color:var(--accent)}
.index-post__meta{display:flex;align-items:center;gap:14px;font-family:var(--num);font-weight:600;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.index-post__meta time{color:var(--accent)}
.index-post__cat{color:var(--ink-2)}
.index-post__body h3{margin-top:12px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.08rem,1.6vw,1.34rem);line-height:1.26;letter-spacing:-.014em;color:var(--ink)}
.index-post__body>p{margin-top:11px;max-width:62ch;font-size:.92rem;line-height:1.68;color:var(--ink-2)}
.index-post__more{margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.index-post__more svg{width:14px;height:14px;fill:currentColor;stroke:none;stroke-width:1.6;
  transition:transform .45s var(--ease-out)}
.index-post:hover .index-post__more svg{transform:translateX(4px)}

/* ======================================================= 10 · LIFESTYLE */
.index-lifestyle{position:relative;overflow-x:clip;padding:var(--sect) 0 clamp(40px,4vw,64px);background:var(--bg-800);scroll-margin-top:var(--nav-h)}
/* full-screen block: drop the 1240px shell frame for this section so the copy
   column can breathe. --shell is re-pointed at 100vw so the bleed slabs still
   cancel exactly the gutter (no phantom horizontal scroll). The photograph keeps
   its fixed 844px width below; only the text column grows to fill the rest. */
.index-lifestyle .shell{width:100%;max-width:none;--shell:100vw}
.index-lifestyle .index-head--center{max-width:min(720px,92vw)}
.index-lifestyle .index-head--center .index-head__title{max-width:20ch;margin-inline:auto}
.index-lifestyle .index-head--center .index-head__sub{max-width:54ch;margin-top:20px;line-height:1.7}
/* Split layout: no overlap, no card chrome. Text column and photograph sit
   side by side, and every other row swaps sides so the rhythm keeps moving.
   The photograph bleeds to the right screen edge on HTML rows. */
.index-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,844px);
  gap:clamp(30px,4.4vw,72px);align-items:center;
  margin-top:clamp(76px,8.4vw,132px)}
.index-story:first-of-type{margin-top:clamp(52px,6vw,84px)}
/* consecutive rows butt together: the alternating bleed slabs connect into
   one continuous staggered ribbon instead of floating apart in white space */
.index-story + .index-story{margin-top:0}
.index-story__media{position:relative;grid-column:2;grid-row:1;
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg-700);
  box-shadow:0 0 0 1px var(--line-2),0 30px 60px -38px rgba(15,23,20,.42),0 0 48px -34px rgba(38,79,71,.28);
  transform-style:preserve-3d;transition:transform .8s var(--ease-out),box-shadow .7s var(--ease)}
.index-story__media:hover{box-shadow:0 0 0 1px rgba(38,79,71,.35),0 36px 70px -38px rgba(15,23,20,.5),0 0 58px -28px rgba(38,79,71,.4)}
.index-story__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 1.15s var(--ease-out)}
.index-story__media:hover img{transform:scale(1.04)}
/* functional caption sits under the frame, no pill, no corner brackets */
.index-story__cap{margin-top:14px;font-family:var(--num);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.index-story__copy{position:relative;grid-column:1;grid-row:1;z-index:2;
  padding:clamp(4px,1vw,14px) 0;
  /* keep the copy in its own stacking context so the media tilt can never overlap it */
  transform:translateZ(0);perspective:none}
.index-story__copy h3{margin-top:14px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.55rem,2.9vw,2.5rem);line-height:1.11;letter-spacing:-.024em;color:var(--ink);
  max-width:17ch}
.index-story__copy h3 em{font-weight:500;color:var(--accent)}
.index-story__copy p{margin-top:18px;font-size:1rem;line-height:1.72;color:var(--ink-2);max-width:44ch}
.index-story__list{margin-top:26px;display:grid;gap:12px}
.index-story__list li{position:relative;padding-left:22px;font-size:.9rem;color:var(--ink-2)}
.index-story__list li::before{content:'';position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--accent)}
/* flipped row: photograph left, text right, image bleeds off the left edge */
.index-story--flip .index-story__media{grid-column:1}
.index-story--flip .index-story__copy{grid-column:2}
/* flipped row keeps the same 65/35 split, just mirrored: photo left, text right */
.index-story--flip{grid-template-columns:minmax(0,844px) minmax(0,1fr)}
.index-story--tall .index-story__media img{aspect-ratio:4/3}
/* full-bleed slab rows: square corners, no shadow, photograph runs the full row
   height and out to the viewport edge on its side. The negative margin cancels
   both the shell gutter and the centering gap (capped at the gutter itself). */
@media (min-width:993px){
  .index-story--bleed-r .index-story__media,
  .index-story--bleed-l .index-story__media{
    align-self:stretch;display:flex;border-radius:0;box-shadow:none}
  .index-story--bleed-r .index-story__media:hover,
  .index-story--bleed-l .index-story__media:hover{box-shadow:none}
  .index-story--bleed-r .index-story__media img,
  .index-story--bleed-l .index-story__media img{aspect-ratio:auto;object-fit:cover}
  .index-story--bleed-r .index-story__media{
    margin-right:min(calc(var(--gut) * -1),calc((var(--shell) - 100vw) / 2 - var(--gut)))}
  .index-story--bleed-l .index-story__media{
    margin-left:min(calc(var(--gut) * -1),calc((var(--shell) - 100vw) / 2 - var(--gut)))}
  /* wide rows give the photograph two thirds — a landscape scene, not a square crop.
     The text column keeps its own width, so the title must opt out of the narrow measure. */
  .index-story--wide{grid-template-columns:minmax(0,1fr) minmax(0,844px)}
  .index-story--wide .index-story__copy h3{max-width:none}
  /* flipped row keeps the same feel: the photograph on the left stays a fixed 844px */
  .index-story--flip.index-story--wide{grid-template-columns:minmax(0,844px) minmax(0,1fr)}
}

/* ============================================ 10b · WARM LIFESTYLE ROWS */
/* Zigzag rows for "Three products, one standard". Palette unchanged — the
   tokens below alias the existing ones; only layout, radius and shadow are new. */
:root{
  --wz-radius:18px;
  --wz-shadow:0 24px 50px -28px rgba(15,23,20,.30);
  --wz-btn-bg:var(--accent);
  --wz-btn-fg:#FFFFFF;
  --wz-icon-bg:var(--bg-600);
}
/* full-bleed zigzag: break the container, image and text share 50/50 */
.wz-wrap{margin-top:clamp(56px,6.4vw,104px);width:100%;max-width:none;display:block}
.wz-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);width:100%;margin:0;padding:0;
  align-items:stretch;overflow:hidden}
.wz-row .wz-media{grid-column:1;grid-row:1}
.wz-row .wz-copy{grid-column:2;grid-row:1}
.wz-row--reverse{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.wz-row--reverse .wz-media{grid-column:2}
.wz-row--reverse .wz-copy{grid-column:1}
.wz-row + .wz-row{margin-top:clamp(16px,2vw,28px)}  /* thin gap strip between blocks */
/* image flush to the viewport edge: no margin, no padding, no radius */
.wz-media{position:relative;margin:0;padding:0;border-radius:0;box-shadow:none;
  width:100%;height:auto;min-height:0;aspect-ratio:4/3;align-self:center;
  background:var(--bg-600);overflow:hidden}
.wz-media .index-ph{width:100%;height:100%;aspect-ratio:auto}
.wz-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.15s var(--ease-out)}
.wz-row:hover .wz-media img{transform:scale(1.03)}

.wz-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,3vw,48px) clamp(28px,7vw,120px);background:var(--bg-800)}
.wz-eyebrow{margin:0;font-family:var(--num);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.wz-copy h3{margin-top:14px;font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.45rem);line-height:1.12;letter-spacing:-.022em;color:var(--ink)}
.wz-desc{margin-top:16px;max-width:46ch;font-size:1rem;line-height:1.7;color:var(--ink-2)}

.wz-grid{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px}
.wz-grid li{display:flex;gap:12px;align-items:flex-start}
.wz-ic{flex:none;width:40px;height:40px;border-radius:50%;background:var(--wz-icon-bg);
  display:flex;align-items:center;justify-content:center;color:var(--accent)}
.wz-ic svg{width:20px;height:20px;fill:currentColor;stroke:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.wz-grid strong{display:block;font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:-.01em;color:var(--ink)}
.wz-grid__txt{display:block;margin-top:3px;font-size:.82rem;line-height:1.55;color:var(--ink-2)}

.wz-icons{margin-top:28px;display:flex;gap:22px;flex-wrap:wrap}
.wz-icons li{display:flex;flex-direction:column;align-items:center;gap:9px}
.wz-icons .wz-ic{width:48px;height:48px}
.wz-icons__lbl{font-family:var(--num);font-weight:600;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

.wz-btn{margin-top:30px;display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:999px;background:var(--wz-btn-bg);color:var(--wz-btn-fg);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;line-height:1;text-decoration:none;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),background .3s var(--ease)}
.wz-btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px -18px rgba(15,23,20,.55)}
.wz-btn svg{width:15px;height:15px;fill:currentColor;stroke:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:768px){
  .wz-wrap{margin-top:clamp(28px,6vw,52px);padding:0 var(--gut)}
  .wz-row,.wz-row--reverse{grid-template-columns:minmax(0,1fr)}
  .wz-row .wz-media,.wz-row--reverse .wz-media{
    grid-column:1;grid-row:1;border-radius:16px;height:auto;min-height:0;aspect-ratio:4/3;align-self:start}
  .wz-row .wz-copy,.wz-row--reverse .wz-copy{
    grid-column:1;grid-row:2;padding:20px 0 0;background:transparent}
  .wz-grid{grid-template-columns:minmax(0,1fr)}
  .wz-row + .wz-row{margin-top:clamp(22px,5vw,38px)}
}

/* =========================================================== 11 · STATS */
.index-stats{position:relative;overflow:hidden;padding:clamp(40px,4vw,64px) 0 clamp(40px,4vw,64px);background:var(--bg-800);isolation:isolate}
.index-stats__bg{position:absolute;inset:-11% 0;z-index:0;opacity:.09;will-change:transform}
.index-stats__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:grayscale(100%)}
.index-stats__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#F5F7F6 0%,rgba(245,247,246,.95) 22%,rgba(245,247,246,.93) 62%,#F5F7F6 100%)}
.index-stats__in{position:relative;z-index:2}
.index-stats__grid{margin-top:clamp(48px,5.6vw,76px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-1)}
.index-stat{padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,32px);background:rgba(255,255,255,.62)}
.index-stat__top{display:flex;align-items:baseline;gap:7px;font-family:var(--num);font-variant-numeric:tabular-nums}
.index-stat__num{font-weight:700;font-size:clamp(2rem,3.7vw,3.05rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.index-stat__unit{font-weight:600;font-size:1.02rem;letter-spacing:.02em;color:var(--accent)}
.index-stat__rule{margin-top:20px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.index-stat__rule::after{content:'';position:absolute;inset:0;background:var(--brand);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease-out)}
.index-stats.is-in .index-stat__rule::after{transform:scaleX(1)}
.index-stat__label{margin-top:16px;font-size:.8rem;letter-spacing:.07em;color:var(--ink-2)}
/* placeholder blocks replacing photos in Products / Story (real images to follow) */
.index-ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;
  background:var(--bg-600);color:var(--ink-3);font-size:.82rem;letter-spacing:.06em;
  text-align:center;padding:1rem}
@media (min-width:993px){
  .index-story--bleed-r .index-story__media .index-ph,
  .index-story--bleed-l .index-story__media .index-ph{aspect-ratio:auto;height:100%;min-height:220px}
}
/* ---- About hero: factory photo bg + green curtain + text + 4 stat modules ---- */
.index-abouthero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(72px,10vw,120px) 0 clamp(56px,7vw,88px);color:#FFFFFF;scroll-margin-top:var(--nav-h)}
.index-abouthero__bg{position:absolute;inset:0;z-index:0}
.index-abouthero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.index-abouthero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(38,79,71,.80) 0%,rgba(21,52,46,.88) 100%)}
.index-abouthero__in{position:relative;z-index:2}
.index-abouthero .index-head__label{color:rgba(255,255,255,.82)}
.index-abouthero .index-head__title{color:#FFFFFF}
.index-abouthero__lead{margin:clamp(22px,2.6vw,34px) auto 0;max-width:none;text-align:justify;text-align-last:center}
.index-abouthero__lead p{font-size:clamp(1rem,1.1vw,1.12rem);line-height:1.82;color:rgba(255,255,255,.9);margin-top:1.1em}
.index-abouthero__lead p:first-child{margin-top:0}
.index-abouthero__stats{margin-top:clamp(40px,5vw,64px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.index-abouthero__stat{padding-top:22px;border-top:1px solid rgba(255,255,255,.42)}
.index-abouthero__stat-n{margin:0;font-family:var(--num);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1;letter-spacing:-.03em;color:#FFFFFF}
.index-abouthero__stat-l{margin:12px 0 0;font-size:.82rem;letter-spacing:.05em;color:rgba(255,255,255,.8)}
@media (max-width:900px){.index-abouthero__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,24px)}}
@media (max-width:520px){.index-abouthero__stats{grid-template-columns:minmax(0,1fr)}}

/* ========================================================= 12 · CONTACT */
.index-contact{position:relative;overflow:hidden;padding:var(--sect) 0;isolation:isolate}
.index-contact__bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(118% 132% at 16% 0%,#FFFFFF 0%,#F4F7F6 42%,#EBF1EF 76%,#E3EBE8 100%)}
.index-contact__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(38px,5vw,76px);align-items:start}
.index-contact__list{margin-top:clamp(30px,3.6vw,46px);display:grid;gap:26px}
.index-contact__list li{display:flex;gap:18px;align-items:flex-start}
.index-contact__ic{flex:none;display:flex;width:46px;height:46px;align-items:center;justify-content:center;
  border-radius:var(--r-xs);border:1px solid rgba(38,79,71,.18);color:var(--brand);
  background:rgba(38,79,71,.05);transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.index-contact__list li:hover .index-contact__ic{background:rgba(38,79,71,.12);border-color:rgba(38,79,71,.38)}
.index-contact__ic svg{width:21px;height:21px;fill:currentColor;stroke:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.index-contact__list h3{font-family:var(--num);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.index-contact__list p{margin-top:6px;font-size:.98rem;line-height:1.6;color:var(--ink);max-width:34ch}
.index-contact__list a{border-bottom:1px solid rgba(38,79,71,.35);transition:border-color .3s var(--ease)}
.index-contact__list a:hover{border-color:var(--brand)}
.index-contact__legal{margin-top:clamp(30px,3.4vw,44px);display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:.78rem;color:var(--ink-2)}

.index-contact__form{display:flex;flex-direction:column;gap:18px;padding:clamp(26px,3.2vw,40px);
  border-radius:var(--r);background:#FFFFFF;border:1px solid var(--line-2);
  box-shadow:0 30px 70px -44px rgba(15,23,20,.32)}
.index-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.index-form__row--foot{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.index-form__field{display:flex;flex-direction:column;gap:8px;min-width:0}
.index-form__field label{font-family:var(--num);font-weight:600;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.index-form__field label b{color:var(--brand)}
.index-form__field input,.index-form__field textarea{width:100%;min-width:0;padding:13px 16px;border-radius:12px;
  background:#FFFFFF;border:1px solid var(--line-3);color:var(--ink);font-size:.94rem;
  transition:border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.index-form__field textarea{resize:vertical;min-height:112px}
.index-form__capq{margin:0 0 8px;font-family:var(--num);font-weight:600;font-size:.95rem;letter-spacing:.04em;color:var(--accent)}
.index-form__field input::placeholder,.index-form__field textarea::placeholder{color:var(--ink-3)}
.index-form__field input:focus,.index-form__field textarea:focus{outline:0;border-color:var(--brand);
  background:#FFFFFF;box-shadow:0 0 0 3px rgba(38,79,71,.12)}
.index-form__field input.is-bad,.index-form__field textarea.is-bad{border-color:#D93025}
/* error copy lives directly under the field it belongs to */
.index-form__err{font-size:.78rem;line-height:1.5;color:#B3261E}
.index-form__err[hidden]{display:none}
.index-captcha{display:flex;align-items:stretch;gap:10px}
.index-captcha span{flex:none;display:flex;align-items:center;justify-content:center;min-width:74px;padding:0 12px;
  border-radius:12px;background:rgba(38,79,71,.06);border:1px dashed rgba(38,79,71,.28);
  font-family:var(--num);font-weight:700;font-size:1rem;letter-spacing:.06em;color:var(--brand);user-select:none}
.index-captcha input{flex:1}
.index-form__send{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:47px;
  padding:0 26px;border-radius:999px;background:var(--brand);color:#FFFFFF;font-weight:500;font-size:.94rem;
  transition:transform .4s var(--ease-out),background-color .3s var(--ease),box-shadow .4s var(--ease),opacity .3s var(--ease)}
.index-form__send:hover{background:var(--brand-lit);box-shadow:0 16px 34px -18px rgba(38,79,71,.6)}
.index-form__send:active{transform:scale(.97)}
.index-form__send[disabled]{opacity:.65;cursor:default}
.index-form__send svg{width:15px;height:15px;fill:currentColor;stroke:none;stroke-width:1.7;
  transition:transform .45s var(--ease-out)}
.index-form__send:hover svg{transform:translateX(4px)}
.index-form__msg{min-height:1.2em;font-size:.82rem;color:var(--ink-2)}
.index-form__msg.is-bad{color:#B3261E}
.index-form__msg.is-ok{color:var(--brand)}

/* backend verification code (also injected by /js/inquiry.js on other pages) */
.inq-cap{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;margin:0}
.inq-cap__label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2)}
.inq-cap__label b{color:var(--brand)}
.inq-cap__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inq-cap__input{width:130px;min-width:100px;flex:0 0 auto;padding:13px 16px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--bg-700);color:var(--ink);
  font-family:var(--num);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;box-sizing:border-box}
.inq-cap__input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(38,79,71,.12)}
.inq-cap__input.is-bad,.inq-cap__input[aria-invalid="true"]{border-color:#D93025}
.inq-cap__img{display:block;width:86px;height:34px;border:1px solid var(--line-2);
  border-radius:8px;background:#F3F7F5;object-fit:contain;cursor:pointer}
.inq-cap__refresh{border:0;background:none;padding:4px 2px;color:var(--accent);
  font-family:var(--sans);font-size:.82rem;font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.inq-cap__refresh:hover{color:var(--brand-lit)}
.inq-cap__hint{font-size:.74rem;line-height:1.5;color:var(--ink-3);margin:0}
.inq-cap__err,.inq-cap-err{font-size:.78rem;line-height:1.5;color:#B3261E;margin:0}
.inq-cap__err[hidden],.inq-cap-err[hidden]{display:none}
.inq-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  overflow:hidden!important;opacity:0!important;pointer-events:none!important}
@media(max-width:520px){.inq-cap__input{flex:1 1 120px;width:auto}}

/* ========================================================== 14 · FOOTER */
.index-footer{position:relative;background:var(--dark);border-top:1px solid var(--line-dark-1);
  padding:clamp(64px,7vw,104px) 0 34px;scroll-margin-top:var(--nav-h)}
.index-footer__top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(34px,4vw,58px)}
.index-footer__brand{display:flex;align-items:center;gap:13px}
.index-footer__brand img{height:40px;width:auto}
.index-footer__brand b{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:.1em;color:var(--white)}
.index-footer__brand i{display:block;font-family:var(--num);font-weight:600;font-size:.66rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--brand-lift);padding-left:.1em;margin-top:2px}
.index-footer__desc{margin-top:22px;max-width:38ch;font-size:.92rem;line-height:1.72;color:var(--muted)}
.index-social{margin-top:26px;display:flex;gap:10px}
.index-social a{display:flex;width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--line-dark-2);border-radius:var(--r-xs);color:var(--muted);
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease),transform .45s var(--ease-out)}
.index-social a:hover{color:#FFFFFF;border-color:rgba(201,201,201,.45);background:rgba(201,201,201,.10);transform:translateY(-3px)}
.index-social svg{width:18px;height:18px;fill:currentColor;stroke:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round}
.index-footer h4{font-family:var(--num);font-weight:600;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand-on-dark)}
.index-footer__links{margin-top:20px;display:grid;gap:12px}
.index-footer__links a{font-size:.92rem;color:var(--muted);transition:color .3s var(--ease),transform .4s var(--ease-out);
  display:inline-block}
.index-footer__links a:hover{color:var(--silver);transform:translateX(4px)}
.index-footer__links li{display:flex}
.index-footer address{margin-top:20px;display:grid;gap:12px;font-size:.92rem;color:var(--muted)}
.index-footer address a{color:var(--silver);transition:color .3s var(--ease)}
.index-footer address a:hover{color:var(--white)}
.index-footer__note{margin-top:20px;font-size:.78rem;line-height:1.6;color:rgba(168,181,176,.72)}
.index-footer__bot{margin-top:clamp(46px,5vw,70px);padding-top:26px;border-top:1px solid var(--line-dark-1);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.82rem;color:var(--muted)}
.index-footer__bot ul{display:flex;gap:22px;flex-wrap:wrap}
.index-footer__bot a{transition:color .3s var(--ease)}
.index-footer__bot a:hover{color:var(--silver)}
.index-top{display:inline-flex;align-items:center;gap:9px;transition:color .3s var(--ease)}
.index-top svg{width:14px;height:14px;fill:currentColor;stroke:none;stroke-width:1.6;transition:transform .4s var(--ease-out)}
.index-top:hover{color:var(--silver)}
.index-top:hover svg{transform:translateY(-3px)}

/* ========================================================== 16 · MOTION */
.has-js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out);
  transition-delay:calc(var(--i,0) * 78ms)}
.has-js [data-reveal].is-in{opacity:1;transform:none}
.has-js [data-reveal="rise"]{transform:translateY(40px) scale(.985)}

.has-js .index-hero [data-hero-line]{opacity:0;transform:translateY(34px);
  transition:opacity 1.05s var(--ease-out),transform 1.05s var(--ease-out)}
.has-js .index-hero.is-ready [data-hero-line]{opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * 120ms + 150ms)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .has-js [data-reveal],.has-js .index-hero [data-hero-line]{opacity:1 !important;transform:none !important;transition:none !important}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ================================================== 17 · PREMIUM MOTION */
/* --- kinetic marquee band --- */
.idx-marquee{position:relative;overflow:hidden;background:var(--bg-800);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:clamp(20px,2.4vw,30px) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.idx-marquee__track{display:flex;width:max-content;animation:idx-marq 30s linear infinite}
.idx-marquee:hover .idx-marquee__track,.idx-marquee.is-off .idx-marquee__track{animation-play-state:paused}
.idx-marquee__seq{display:inline-flex;align-items:center;gap:clamp(22px,3vw,44px);
  padding-right:clamp(22px,3vw,44px);white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.8rem);
  letter-spacing:-.01em;color:var(--ink)}
.idx-marquee__seq i{font-style:normal;color:var(--accent)}
@keyframes idx-marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --- pointer spotlight on imagery --- */
.index-prod__plate::after,.wz-media::after,.index-post__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;
  background:radial-gradient(closest-side circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.46),rgba(255,255,255,0) 74%);
  transition:opacity .5s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .index-prod__plate:hover::after,.wz-media:hover::after,.index-post__media:hover::after{opacity:1}
}

/* --- hero ambient zoom --- */
.has-js .index-hero__bg img{transform:scale(1.1);transform-origin:50% 42%;
  transition:transform 9.5s cubic-bezier(.16,1,.3,1)}
.has-js .index-hero.is-ready .index-hero__bg img{transform:scale(1)}

/* --- curtain reveal --- */
.has-js .wz-media[data-reveal],.has-js .index-post__media[data-reveal]{clip-path:inset(0 0 100% 0)}
.has-js .wz-media[data-reveal].is-in,.has-js .index-post__media[data-reveal].is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--ease-out),opacity .95s var(--ease-out),transform .95s var(--ease-out)}
.has-js .index-head__title{clip-path:inset(-9% 0 108% 0);transition:clip-path 1.05s var(--ease-out)}
.has-js .index-head.is-in .index-head__title,.has-js .index-head__title.is-in{clip-path:inset(-9% 0 -12% 0)}

/* --- floating back-to-top --- */
.idx-totop{position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:110;
  width:48px;height:48px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(15,23,20,.18));
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.idx-totop.is-on{opacity:1;transform:none;pointer-events:auto}
.idx-totop__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.idx-totop__bg{fill:rgba(255,255,255,.94);stroke:var(--line-2);stroke-width:2;transition:fill .3s var(--ease)}
.idx-totop__fg{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:125.66;stroke-dashoffset:125.66;transition:stroke-dashoffset .12s linear}
.idx-totop__arw{position:relative;width:18px;height:18px;stroke:var(--accent);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.idx-totop:hover .idx-totop__bg{fill:#fff}
.idx-totop:hover .idx-totop__arw{transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  .idx-marquee__track{animation:none}
  .has-js .index-hero__bg img{transform:none !important;transition:none !important}
  .has-js .wz-media[data-reveal],.has-js .index-post__media[data-reveal],
  .has-js .index-head__title{clip-path:none !important}
  .idx-totop{transition:opacity .2s var(--ease)}
}


/* ====================================================== 17 · BREAKPOINTS */
@media (max-width:1200px){
  :root{--shell:1080px}
  .index-head__title{font-size:clamp(1.9rem,4vw,2.9rem)}
  .index-post{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
}

@media (max-width:992px){
  :root{--nav-h:70px;--sect:clamp(74px,8vw,104px)}
  .index-nav__links,.index-nav__act .idx-btn{display:none}
  .index-burger{display:block}
  /* bento collapses to two columns; the wide band stays full width */
  .index-features__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index-feature--a{grid-column:1 / -1}
  .index-feature--b,.index-feature--c,.index-feature--d,.index-feature--e{grid-column:span 1}
  .index-feature--band{grid-column:1 / -1}
  .index-story{grid-template-columns:minmax(0,1fr);gap:0}
  /* stacked layout: restore vertical rhythm between stories */
  .index-story + .index-story{margin-top:clamp(56px,9vw,84px)}
  .index-story__media,.index-story--flip .index-story__media{grid-column:1;grid-row:1}
  .index-story__copy,.index-story--flip .index-story__copy{grid-column:1;grid-row:2;padding:26px 0 0;
    transform:translateZ(0);perspective:none}
  .index-story--bleed-l .index-story__media{margin-left:0}
  .index-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* product grid: two columns per row on tablet */
  .index-products__grid{--prod-gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .index-post{grid-template-columns:minmax(0,1fr);gap:16px}
  .index-post__media{width:100%;max-width:420px}
  .index-contact__in{grid-template-columns:minmax(0,1fr)}
  .index-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index-footer__brandcol{grid-column:1 / -1}
}

@media (max-width:768px){
  :root{--nav-h:66px}
  body{font-size:15.5px}
  .index-hero{min-height:clamp(440px,70svh,640px);
    padding-top:calc(var(--nav-h) + 56px);padding-bottom:44px}
  .index-hero__bg img{object-position:42% 50%}
  .index-hero__title{font-size:clamp(2.4rem,12.2vw,3.7rem);line-height:1.02;letter-spacing:-.03em}
  .index-story__copy{padding:22px 0 0}
  .index-story__copy h3{max-width:18ch}
  .index-stats__grid{background:transparent;gap:0}
  .index-stat{background:transparent;padding:24px 0;border-top:1px solid var(--line-2)}
  .index-form__row,.index-form__row--foot{grid-template-columns:minmax(0,1fr)}
  .index-form__send{width:100%}
  .index-footer__top{grid-template-columns:minmax(0,1fr)}
  .index-footer__brandcol{grid-column:auto}
  .index-footer__bot{flex-direction:column;align-items:flex-start}
}

@media (max-width:576px){
  :root{--gut:18px;--sect:clamp(64px,11vw,84px)}
  .index-hero__eyebrow{font-size:.68rem}
  .index-hero__cta{gap:10px}
  .index-hero__cta .idx-btn{flex:1 1 100%}
  /* single column bento: the band stacks its icon above the text */
  .index-features__grid{grid-template-columns:minmax(0,1fr)}
  .index-feature--a,.index-feature--b,.index-feature--c,
  .index-feature--d,.index-feature--e,.index-feature--band{grid-column:1 / -1}
  .index-feature--band .index-feature__in{flex-direction:column;align-items:flex-start;gap:14px}
  .index-feature p{max-width:none}
  .index-products__grid{grid-template-columns:1fr}
  .index-head__title{font-size:clamp(1.72rem,8.4vw,2.2rem)}
  .index-story__copy h3{font-size:1.44rem;max-width:none}
  .index-stats__grid{grid-template-columns:minmax(0,1fr)}
  .index-footer__bot ul{gap:14px}
}

/* Short laptop viewports (1366x768 and friends): tighten the hero rhythm so
   the headline, lede and CTAs still clear the fold without scrolling. */
@media (min-width:769px) and (max-height:820px){
  .index-hero{padding-top:calc(var(--nav-h) + 18px);padding-bottom:52px}
  .index-hero__title{font-size:clamp(2.2rem,5.2vw,3.95rem)}
  .index-hero__lede{margin-top:16px}
  .index-hero__cta{margin-top:22px}
}

@media (min-width:769px) and (max-height:660px){
  .index-hero{padding-top:calc(var(--nav-h) + 12px);padding-bottom:40px}
  .index-hero__title{font-size:clamp(2rem,4.4vw,3.2rem)}
  .index-hero__lede{margin-top:12px}
  .index-hero__cta{margin-top:18px}
}

@media print{
  .index-nav,.index-drawer,.index-progress{display:none}
  body{background:#fff;color:#111}
}

/* small screen: home carousel full-bleed + side teal strips */
@media (max-width:768px){
  .index-products__stage{position:relative}
  .index-products__stage::before,.index-products__stage::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:var(--brand);z-index:6;pointer-events:none}
  .index-products__stage::before{left:0}
  .index-products__stage::after{right:0}
}