/* ============================================================
   UMI — Uyz Mai Industry
   Shared stylesheet. One file for the whole site.

   Brand rules encoded here:
   - The warm gradient is UMI. Blue (--moon) means a partner or
     client and is never used for buttons, links or headings.
   - The sun is nested shells; the single moon sits centred on a
     shell contour so it straddles the line.
   - One grain layer over everything unifies flat colour,
     gradient and photography, and hides gradient banding.
   ============================================================ */

:root{
  /* ground — four steps of one narrow grey-green family */
  --g0:#F1F4F3; --g1:#E4EAE8; --g2:#D5DEDB; --g3:#C3CECA;
  --ink:#101413; --body:#5B6463;
  /* sun */
  --sun-a:#FDBC4B; --sun-b:#F89B4A; --sun-c:#F05A3C;
  /* moon — partners only */
  --moon:#2B5EA0;
  --line:rgba(16,20,19,.14); --hair:rgba(16,20,19,.07);
  --grain-op:.085; --grain-mode:multiply;
  --f:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --cn:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans SC","Heiti SC",sans-serif;
  --gut:clamp(20px,5vw,76px);
  /* container width, and the viewport margin outside it */
  --maxw:1300px;
  /* vertical rhythm — every section and block steps off these */
  --sec:clamp(60px,8vw,112px);      /* section top/bottom */
  --blk:clamp(34px,4.6vw,60px);     /* heading to content */
  --cel:clamp(26px,3vw,42px);       /* cell padding inside grid sets */
  --rul:clamp(20px,2.2vw,34px);     /* horizontal padding between cells */
  --sun-grad:linear-gradient(200deg,var(--sun-a) 0%,var(--sun-b) 46%,var(--sun-c) 100%);
}
:root:not([data-theme="light"]){@media (prefers-color-scheme: dark){
  --g0:#161C1B; --g1:#0F1413; --g2:#1D2423; --g3:#2A3331;
  --ink:#E7EDEB; --body:#98A3A1; --moon:#5E8FCC;
  --line:rgba(231,237,235,.16); --hair:rgba(231,237,235,.08);
  --grain-op:.07; --grain-mode:overlay;
}}
:root[data-theme="dark"]{
  --g0:#161C1B; --g1:#0F1413; --g2:#1D2423; --g3:#2A3331;
  --ink:#E7EDEB; --body:#98A3A1; --moon:#5E8FCC;
  --line:rgba(231,237,235,.16); --hair:rgba(231,237,235,.08);
  --grain-op:.07; --grain-mode:overlay;
}

/* ---------- Montserrat ----------
   LAUNCH STATE: loaded from Google Fonts via the <link> in each page's
   <head>. Works everywhere except mainland China, where Google Fonts is
   blocked and the page will silently fall back to a system sans.

   TO SELF-HOST (required before the Chinese version is promoted):
     1. Put montserrat-300/400/500/600.woff2 in assets/fonts/
        (Latin + Cyrillic subsets — download from fonts.google.com).
     2. Uncomment the four rules below.
     3. Delete the three Google Fonts <link> lines from every page's <head>.
   Leaving the rules commented out until the files exist avoids four
   failed requests on every page load.

@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/montserrat-300.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/montserrat-500.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/montserrat-600.woff2") format("woff2")}
*/

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--g1);color:var(--ink);font-family:var(--f);
  font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:lang(zh){font-family:var(--cn)}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) h4{letter-spacing:0;font-weight:600}
/* CJK needs more leading and no negative tracking to stay readable */
:lang(zh) body,:lang(zh) p,:lang(zh) li,:lang(zh) td,:lang(zh) th{line-height:1.8;letter-spacing:0}
:lang(zh) .hero h1,:lang(zh) .phead h1{line-height:1.25}
:lang(zh) .head h2,:lang(zh) .cta h2,:lang(zh) .band h2{line-height:1.3}
:lang(zh) .sc strong,:lang(zh) .pr .fig,:lang(zh) .item .fig{letter-spacing:0}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.025em}
section{padding-block:var(--sec)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
@media(min-width:1500px){:root{--maxw:min(1480px,92vw)}}
@media(min-width:1800px){:root{--maxw:min(1680px,90vw)}}
@media(min-width:2200px){:root{--maxw:min(1880px,88vw)}}
:focus-visible{outline:2.5px solid var(--sun-c);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:12px;z-index:99;background:var(--ink);color:var(--g1);padding:10px 16px;border-radius:3px}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-mode);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

/* ---------- the sun ---------- */
.sun{position:relative;aspect-ratio:1}
.sun .sh{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--sun-grad)}
.sun .sh1{width:100%;height:100%}
.sun .sh2{width:79%;height:79%;box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.05)}
.sun .sh3{width:58%;height:58%;box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.10)}
.sun .sh4{width:37%;height:37%;box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.15)}
.sun .moon{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%)}
.sun .moon i{position:absolute;left:50%;top:0;width:var(--md,26px);height:var(--md,26px);
  margin-left:calc(var(--md,26px)/-2);margin-top:calc(var(--md,26px)/-2);
  border-radius:50%;background:var(--moon);display:block}
/* cropped suns: the moon drifts along the visible arc and never leaves the page */
@keyframes drift{from{transform:translate(-50%,-50%) rotate(197deg)}to{transform:translate(-50%,-50%) rotate(251deg)}}
/* whole suns: a full, very slow orbit */
@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
.sun--whole .moon{animation:orbit 78s linear infinite;animation-delay:-29s}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--g1);border-bottom:1px solid var(--hair)}
.top-in{display:flex;align-items:center;gap:clamp(14px,2.6vw,38px);height:76px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.mark .o{width:26px;height:26px;border-radius:50%;background:var(--sun-grad)}
.mark b{font-weight:500;font-size:23px;letter-spacing:.12em}
.nav{display:none;gap:clamp(18px,2.1vw,30px);margin-inline-start:auto;font-size:15px}
@media(min-width:1060px){.nav{display:flex}}
.nav a{text-decoration:none;color:var(--body);padding-block:8px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--sun-c)}
.lang{display:flex;gap:1px;margin-inline-start:auto;font-size:12.5px;align-items:center}
@media(min-width:1060px){.lang{margin-inline-start:0}}
.lang a,.lang span{font:inherit;letter-spacing:.06em;text-decoration:none;color:var(--body);padding:6px 9px;border-radius:40px}
.lang a[aria-current="true"]{color:var(--ink);background:var(--g2)}
.lang span.soon{opacity:.42;cursor:not-allowed}
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)}
.foot a:hover{border-bottom-color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-size:15px;font-weight:500;padding:13px 26px;border-radius:40px;border:1.5px solid transparent;
  cursor:pointer;font-family:var(--f)}
.btn-sun{background:var(--sun-grad);color:#fff}
.btn-sun:hover{filter:saturate(1.12) brightness(1.04)}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--sun-c)}
.btn-clear{border-color:rgba(255,255,255,.6);color:#fff}
.btn-clear:hover{background:rgba(255,255,255,.14)}
.top .btn{display:none;flex:none;padding:11px 22px}
@media(min-width:720px){.top .btn{display:inline-flex}}
/* mobile menu */
.burger{display:inline-flex;flex:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
@media(min-width:1060px){.burger{display:none}}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor}
.burger span::before{top:-7px}.burger span::after{top:7px}
.drawer{display:none;border-top:1px solid var(--hair);background:var(--g1)}
.drawer.open{display:block}
.drawer a{display:block;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--hair);font-size:17px}
@media(min-width:1060px){.drawer{display:none!important}}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(600px,88svh,940px);padding-block:clamp(48px,8vh,110px) clamp(44px,7vh,96px)}
.hero-sun{--s:min(126vw,540px);position:absolute;width:var(--s);height:var(--s);
  top:calc(var(--s) * -0.30);inset-inline-end:calc(var(--s) * -0.22);
  pointer-events:none;z-index:0;--md:clamp(18px,3vw,44px)}
@media(min-width:760px){.hero-sun{--s:min(104vw,1120px);top:calc(var(--s) * -0.34);inset-inline-end:calc(var(--s) * -0.16)}}
.hero-sun .moon{animation:drift 46s ease-in-out infinite alternate}
.hero-in{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(35px,5.4vw,78px);line-height:1.03;letter-spacing:-.033em;max-width:15ch}
.hero .sub{margin-top:clamp(20px,2.4vw,30px);max-width:52ch;font-size:clamp(16.5px,1.4vw,19px);color:var(--body)}

/* ---------- page head (inner pages) ---------- */
.phead{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(400px,58svh,640px);padding-block:clamp(44px,7vh,90px) var(--sec)}
.phead-sun{--s:min(104vw,420px);position:absolute;width:var(--s);height:var(--s);
  top:calc(var(--s) * -0.32);inset-inline-end:calc(var(--s) * -0.24);z-index:0;pointer-events:none;
  --md:clamp(16px,2.4vw,34px)}
@media(min-width:760px){.phead-sun{--s:min(88vw,820px);top:calc(var(--s) * -0.36);inset-inline-end:calc(var(--s) * -0.18)}}
.phead-sun .moon{animation:drift 46s ease-in-out infinite alternate}
.phead-in{position:relative;z-index:2;width:100%}
.crumb{font-size:12.5px;letter-spacing:.14em;color:var(--body);margin-bottom:22px}
.crumb a{text-decoration:none}
.phead h1{font-size:clamp(32px,4.8vw,62px);line-height:1.03;letter-spacing:-.033em;max-width:14ch}
.phead .sub{margin-top:22px;max-width:52ch;font-size:clamp(16px,1.35vw,18.5px);color:var(--body)}

/* ---------- figures strip ---------- */
.scale{border-block:1px solid var(--line)}
.scale-in{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.scale-in{grid-template-columns:repeat(4,1fr)}}
.sc{padding:clamp(24px,3vw,38px) 20px clamp(24px,3vw,38px) clamp(16px,2vw,28px);border-inline-start:1px solid var(--hair)}
.sc:first-child{border-inline-start:0;padding-inline-start:0}
@media(max-width:899px){.sc:nth-child(3){border-inline-start:0;padding-inline-start:0}}
.sc strong{display:block;font-weight:400;font-size:clamp(27px,3.6vw,46px);line-height:1.05;letter-spacing:-.03em;min-height:1.05em}
.sc span{display:block;margin-top:10px;font-size:13.5px;color:var(--body);max-width:22ch;min-height:3.4em}

/* ---------- headings ---------- */
.head{max-width:62ch}
.head h2{font-size:clamp(27px,4vw,50px);line-height:1.06}
.head p{margin-top:18px;color:var(--body);max-width:56ch}
.head+*{margin-top:var(--blk)}

/* ---------- photo band ---------- */
.band{position:relative}
.band img{width:100%;height:clamp(290px,44vw,540px);object-fit:cover}
.band .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,14,13,.8) 0%,rgba(9,14,13,.44) 50%,rgba(9,14,13,.08) 100%)}
.band .cap{position:absolute;inset:0;display:flex;align-items:flex-end}
.band .cap .wrap{width:100%;padding-bottom:clamp(26px,4vw,54px)}
.band h2{color:#fff;font-size:clamp(25px,3.8vw,48px);line-height:1.05;max-width:16ch}
.band p{color:rgba(255,255,255,.82);margin-top:14px;max-width:46ch;font-size:15px}

/* ---------- transformation (home) ---------- */
.tf-track{height:230vh;position:relative}
.tf-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.tf-art{position:absolute;left:50%;top:46%;width:0;height:0}
.tf-art .shell{position:absolute;left:0;top:0;border-radius:50%;background:var(--sun-grad);will-change:width,height,transform,opacity}
.tf-art .shell.b{box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.05)}
.tf-art .shell.c{box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.10)}
.tf-art .shell.d{box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.15)}
.tf-art .pd{position:absolute;left:0;top:0;border-radius:50%;opacity:0;background:var(--sun-grad);will-change:width,height,transform,opacity}
.tf-art .path{position:absolute;left:0;top:0;border-radius:50%;border:1px solid var(--line);transform:translate(-50%,-50%);opacity:0}
.tf-art .mo{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;
  animation:orbit 72s linear infinite;animation-delay:-27s}
.tf-art .mo i{position:absolute;left:50%;top:0;width:var(--md,22px);height:var(--md,22px);
  margin-left:calc(var(--md,22px)/-2);margin-top:calc(var(--md,22px)/-2);border-radius:50%;background:var(--moon);display:block}
.tg{position:absolute;left:0;top:0;width:166px;margin-left:-83px;text-align:center;opacity:0}
.tg b{display:block;font-weight:500;font-size:13.5px}
.tg span{display:block;margin-top:3px;font-size:12px;color:var(--body)}
.tf-words{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(46px,7.5vh,92px);display:grid;place-items:center}
.tf-scene{grid-area:1/1;text-align:center;max-width:820px;opacity:0}
.tf-scene h2{font-size:clamp(27px,4.4vw,54px);line-height:1.06}
.tf-scene p{margin-top:14px;color:var(--body);max-width:42ch;margin-inline:auto;font-size:15.5px}


/* ---------- grid sets ----------
   Rows of cells that must align with the page gutter above them.
   One cell per column; the first cell in each row starts flush on
   the gutter so its text lines up with every heading on the page. */
.gridset{display:grid;gap:0;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);border-block:1px solid var(--line)}
.gridset > *{padding-block:var(--cel);padding-inline:0;
  border-top:1px solid var(--hair);background:none}
.gridset > :first-child{border-top:0}
@media(min-width:760px){
  .gridset--2,.gridset--4{grid-template-columns:1fr 1fr}
  .gridset--2 > *,.gridset--4 > *{border-top:0;
    border-inline-start:1px solid var(--line);padding-inline:var(--rul)}
  .gridset--2 > :nth-child(odd),.gridset--4 > :nth-child(odd){
    border-inline-start:0;padding-inline-start:0}
  .gridset--4 > :nth-child(n+3){border-top:1px solid var(--line)}
}
@media(min-width:880px){
  .gridset--3{grid-template-columns:repeat(3,1fr)}
  .gridset--3 > *{border-top:0;border-inline-start:1px solid var(--line);padding-inline:var(--rul)}
  .gridset--3 > :first-child{border-inline-start:0;padding-inline-start:0}
  .gridset--3 > :last-child{padding-inline-end:0}
}
@media(min-width:1180px){
  .gridset--4{grid-template-columns:repeat(4,1fr)}
  .gridset--4 > *{border-top:0;border-inline-start:1px solid var(--line);padding-inline:var(--rul)}
  .gridset--4 > :nth-child(odd){border-inline-start:1px solid var(--line);padding-inline-start:var(--rul)}
  .gridset--4 > :first-child{border-inline-start:0;padding-inline-start:0}
  .gridset--4 > :last-child{padding-inline-end:0}
}

/* ---------- product cards (home) ---------- */
.pr{display:flex;flex-direction:column}
.pr .fig{font-weight:300;font-size:clamp(38px,4.4vw,54px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(200deg,var(--sun-a),var(--sun-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.pr .fig--text{font-size:clamp(23px,2.5vw,31px);line-height:1.12;letter-spacing:-.02em}
.pr .figlab{font-size:12.5px;color:var(--body);margin-top:8px;min-height:3.4em}
.pr h3{margin-top:24px;font-size:19px;line-height:1.24;min-height:2.5em}
.pr .lede{margin-top:12px;font-size:14.5px;color:var(--body);flex:1}
.pr ul{margin:18px 0 0;padding:0;list-style:none;font-size:14px}
.pr li{padding:9px 0;border-top:1px solid var(--hair);display:flex;gap:12px;justify-content:space-between}
.pr li span{color:var(--body);text-align:end}
.pr .more{margin-top:auto;padding-top:22px;font-size:14px;text-decoration:none;color:var(--ink);
  border-bottom:1.5px solid var(--sun-c);align-self:flex-start;padding-bottom:3px}

/* ---------- product detail (products page) ---------- */
.jump{border-block:1px solid var(--line)}
.jump-in{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){.jump-in{grid-template-columns:repeat(4,1fr)}}
.jump a{text-decoration:none;padding:22px clamp(14px,2vw,26px) 24px;border-inline-start:1px solid var(--hair);display:block}
.jump a:first-child{border-inline-start:0;padding-inline-start:0}
@media(max-width:959px){.jump a:nth-child(3){border-inline-start:0;padding-inline-start:0}}
.jump b{display:block;font-weight:500;font-size:15.5px}
.jump span{display:block;margin-top:5px;font-size:13px;color:var(--body)}
.jump a:hover b{color:var(--sun-c)}
.item{padding-block:clamp(52px,7.5vw,104px);border-bottom:1px solid var(--line)}
.item-top{display:grid;gap:clamp(26px,4vw,60px)}
@media(min-width:960px){.item-top{grid-template-columns:1.05fr .95fr;align-items:start}}
.eyebrow{font-size:12.5px;letter-spacing:.14em;color:var(--body);margin-bottom:14px}
.item .fig{font-weight:300;font-size:clamp(52px,8vw,104px);line-height:.92;letter-spacing:-.05em;
  background:linear-gradient(200deg,var(--sun-a),var(--sun-c));-webkit-background-clip:text;background-clip:text;color:transparent}
.item .fig--text{font-size:clamp(26px,3.8vw,46px);line-height:1.06;letter-spacing:-.03em;max-width:11ch}
.item .figlab{font-size:13px;color:var(--body);margin-top:10px}
.item h2{margin-top:clamp(22px,3vw,34px);font-size:clamp(26px,3.6vw,44px);line-height:1.06}
.item .lede{margin-top:18px;color:var(--body);max-width:48ch}
.item .use{margin-top:22px;max-width:48ch}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec caption{text-align:start;font-size:12.5px;letter-spacing:.14em;color:var(--body);padding-bottom:14px}
.spec th,.spec td{text-align:start;padding:11px 0;border-bottom:1px solid var(--hair);font-weight:400;vertical-align:baseline}
.spec th{color:var(--body);padding-inline-end:20px}
.spec td{text-align:end;font-weight:500}
.spec td.soft{font-weight:400;color:var(--body)}
.effects{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,30px)}
.effects h4{font-size:12.5px;letter-spacing:.14em;color:var(--body);font-weight:400;margin:0 0 18px}
.eff{display:grid;gap:clamp(18px,2.4vw,36px)}
@media(min-width:760px){.eff--3{grid-template-columns:repeat(3,1fr)}}
.eff b{display:block;font-weight:500;font-size:15px;margin-bottom:7px}
.eff p{font-size:14.5px;color:var(--body);max-width:44ch}
.item-foot{display:grid;gap:clamp(22px,3vw,44px);margin-top:clamp(30px,4vw,52px)}
@media(min-width:760px){.effects{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--line);padding-top:clamp(20px,2.4vw,30px)}
.effects h4{font-size:12.5px;letter-spacing:.14em;color:var(--body);font-weight:400;margin:0 0 18px}
.eff{display:grid;gap:clamp(18px,2.4vw,36px)}
@media(min-width:760px){.eff--3{grid-template-columns:repeat(3,1fr)}}
.eff b{display:block;font-weight:500;font-size:15px;margin-bottom:7px}
.eff p{font-size:14.5px;color:var(--body);max-width:44ch}
.item-foot{grid-template-columns:1fr 1fr auto;align-items:end}}
.meta h4{font-size:12.5px;letter-spacing:.14em;color:var(--body);font-weight:400}
.meta p{margin-top:10px;font-size:15px}
.helper{background:var(--g0)}
.helper-in{display:grid;gap:clamp(28px,4vw,60px);align-items:center}
@media(min-width:900px){.helper-in{grid-template-columns:1fr 1fr}}
.helper h2{font-size:clamp(25px,3.4vw,42px);line-height:1.07}
.helper p{margin-top:18px;color:var(--body);max-width:46ch}
.matrix{width:100%;border-collapse:collapse;font-size:14.5px}
.matrix th,.matrix td{text-align:start;padding:13px 10px 13px 0;border-bottom:1px solid var(--line)}
.matrix thead th{font-size:12px;letter-spacing:.12em;color:var(--body);font-weight:400}
.matrix tbody th{font-weight:500}
.matrix td{color:var(--body)}

/* ---------- process flow (production) ---------- */
.node{}
.node i{font-style:normal;font-size:12.5px;color:var(--sun-c);letter-spacing:.1em}
.node b{display:block;margin:12px 0 8px;font-weight:500;font-size:17px;min-height:1.3em}
.node p{font-size:14.5px;color:var(--body)}
.divider{display:flex;align-items:center;gap:18px;padding-block:clamp(26px,3.4vw,44px)}
.divider span{font-size:12.5px;letter-spacing:.14em;color:var(--body);flex:none}
.divider em{height:1px;background:var(--line);flex:1;display:block}
.branches{display:grid;gap:clamp(20px,2.6vw,36px)}
@media(min-width:880px){.branches{grid-template-columns:1fr 1fr}}
.branch{border-top:2px solid var(--ink);padding-top:22px}
.branch h3{font-size:20px}
.branch .why{margin-top:10px;font-size:14.5px;color:var(--body)}
.branch ol{list-style:none;counter-reset:s;margin:22px 0 0;padding:0}
.branch li{counter-increment:s;padding:13px 0 13px 42px;border-top:1px solid var(--hair);position:relative;font-size:15px}
.branch li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:14px;font-size:12.5px;color:var(--sun-c)}
.outs{margin-top:24px;display:grid;gap:10px}
.out{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:3px;
  background:var(--sun-grad);color:#fff;font-weight:500;font-size:15.5px}
.out small{margin-inline-start:auto;font-weight:400;opacity:.85;font-size:13px}
.mean{}
.mean h3{font-size:18px;min-height:2.4em}
.mean p{margin-top:12px;font-size:14.5px;color:var(--body)}

/* ---------- quality chain ---------- */
.qual,.lab{background:var(--g0)}
.qual-in,.lab-in{display:grid;gap:clamp(30px,4vw,64px);align-items:start}
@media(min-width:940px){.qual-in,.lab-in{grid-template-columns:1.02fr .98fr}}
.pledge{border-inline-start:3px solid var(--sun-c);padding-inline-start:clamp(18px,2vw,28px)}
.pledge h2{font-size:clamp(25px,3.4vw,42px);line-height:1.07}
.pledge p{margin-top:18px;color:var(--body);max-width:45ch}
.chain{list-style:none;margin:0;padding:0}
.chain li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:17px 0;border-top:1px solid var(--line)}
.chain li:last-child{border-bottom:1px solid var(--line)}
.chain i{font-style:normal;font-size:12.5px;color:var(--sun-c);padding-top:4px}
.chain h4{font-size:16px}
.chain p{margin-top:5px;font-size:14.5px;color:var(--body)}

/* ---------- side-by-side text + image ---------- */
.tech-in,.store-in,.base-in{display:grid;gap:clamp(30px,4vw,60px);align-items:center}
@media(min-width:940px){.tech-in,.store-in,.base-in{grid-template-columns:1fr 1fr}}
.tech img,.store img,.base img{width:100%;height:clamp(250px,32vw,420px);object-fit:cover;border-radius:3px}
.tech h2,.store h2,.base h2{font-size:clamp(25px,3.4vw,42px);line-height:1.07}
.tech p,.store p,.base p{margin-top:18px;color:var(--body);max-width:46ch}
.pts{margin-top:26px;display:grid;gap:13px}
.pt{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.pt em{font-style:normal;width:9px;height:9px;border-radius:50%;background:linear-gradient(200deg,var(--sun-a),var(--sun-c))}
.pt span{font-size:15px}

/* ---------- story & leadership (company) ---------- */
.story{display:grid;gap:clamp(26px,4vw,64px)}
@media(min-width:900px){.story{grid-template-columns:1fr 1fr}}
.story p{color:var(--body)}
.story p+p{margin-top:18px}
.story .lead{color:var(--ink);font-size:clamp(18px,1.9vw,23px);line-height:1.45;letter-spacing:-.015em}
.person{}
.portrait{width:clamp(112px,15vw,164px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--g2);display:grid;place-items:center}
.portrait span{font-weight:300;font-size:clamp(26px,3.2vw,38px);letter-spacing:.04em;color:var(--body)}
.portrait img{width:100%;height:100%;object-fit:cover}
.person h3{margin-top:clamp(22px,2.6vw,32px);font-size:clamp(20px,2.2vw,25px);line-height:1.15}
.person .role{margin-top:9px;font-size:12px;letter-spacing:.14em;color:var(--sun-c)}
.person .bio{margin-top:16px;font-size:14.5px;color:var(--body)}
.person .bio.tbd{font-style:italic;opacity:.7}

/* ---------- philosophy ---------- */
.phil,.prox{background:var(--g0)}
.phil-in,.prox-in{display:grid;gap:clamp(34px,5vw,72px);align-items:center}
@media(min-width:960px){.phil-in,.prox-in{grid-template-columns:.9fr 1.1fr}}
.phil .sun,.prox .sun{width:min(66vw,340px);--md:clamp(18px,3vw,28px);margin-inline:auto}
.phil h2,.prox h2{font-size:clamp(26px,3.6vw,46px);line-height:1.05;max-width:16ch}
.phil .intro,.prox p{margin-top:18px;color:var(--body);max-width:48ch}
.laws,.rings{margin-top:clamp(26px,3.2vw,42px);border-top:1px solid var(--line)}
.law,.ringrow{display:grid;gap:6px 26px;padding:18px 0;border-bottom:1px solid var(--hair)}
@media(min-width:620px){.law{grid-template-columns:170px 1fr}.ringrow{grid-template-columns:180px 1fr}}
.law b,.ringrow b{font-weight:500;font-size:16.5px}
.law span,.ringrow span{color:var(--body);font-size:14.5px}

/* ---------- partners ---------- */
/* Logo wall. Tiles hold a wordmark set in type until the real
   logo files arrive; swap <b> for <img> and nothing else moves. */
.logowall{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(min-width:620px){.logowall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.logowall{grid-template-columns:repeat(4,1fr)}}
.logo{background:var(--g1);display:grid;place-items:center;align-content:center;
  text-align:center;padding:clamp(20px,2.6vw,32px) 14px;min-height:clamp(112px,13vw,152px)}
.logo img{max-height:56px;width:auto;filter:grayscale(1);opacity:.8}
.logo b{font-weight:500;font-size:clamp(13px,1.25vw,15.5px);line-height:1.3;letter-spacing:-.01em}
.logo small{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.13em;color:var(--body)}
.wall-note{margin-top:20px;font-size:13px;color:var(--body)}
.geo-compact{border-top:1px solid var(--line)}
.geo-compact .ringrow{grid-template-columns:150px 1fr}

.market{border-top:1px solid var(--line);padding-block:clamp(26px,3.4vw,44px)}
.market:last-of-type{border-bottom:1px solid var(--line)}
.market-in{display:grid;gap:clamp(18px,3vw,48px)}
@media(min-width:900px){.market-in{grid-template-columns:260px 1fr;align-items:start}}
.market .meta h3{font-size:clamp(21px,2.4vw,28px)}
.market .meta p{margin-top:8px;font-size:13.5px;color:var(--body)}
.market .meta .dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--moon);margin-inline-end:9px}
.names{display:grid}
.names p{padding:12px 0;border-bottom:1px solid var(--hair);font-size:clamp(17px,1.8vw,22px);
  letter-spacing:-.02em;display:flex;gap:16px;justify-content:space-between;align-items:baseline}
.names p:last-child{border-bottom:0}
.names small{font-size:12.5px;color:var(--body);letter-spacing:.08em;flex:none}
.pending{color:var(--body);font-style:italic}
.seg{}
.seg h3{font-size:19px;min-height:2.4em}
.seg p{margin-top:12px;font-size:14.5px;color:var(--body)}
.seg .buys{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-size:14px}
.seg .buys b{display:block;font-size:12px;letter-spacing:.13em;color:var(--body);font-weight:400;margin-bottom:7px}

/* ---------- contact form ---------- */
.main-in{display:grid;gap:clamp(34px,5vw,72px);align-items:start}
@media(min-width:1000px){.main-in{grid-template-columns:1.25fr .75fr}}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,38px)}
.chip{font:inherit;font-size:14.5px;padding:10px 18px;border-radius:40px;cursor:pointer;
  border:1.5px solid var(--line);background:none;color:var(--body)}
.chip[aria-pressed="true"]{border-color:transparent;color:#fff;background:var(--sun-grad)}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]:hover{color:#fff}
.fields{display:grid;gap:18px}
@media(min-width:640px){.fields{grid-template-columns:1fr 1fr}}
.f{display:flex;flex-direction:column;gap:7px}
.f.full{grid-column:1/-1}
.f label{font-size:12.5px;letter-spacing:.1em;color:var(--body)}
.f label .req{color:var(--sun-c)}
.f input,.f select,.f textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--g0);
  border:1px solid var(--line);border-radius:3px;padding:13px 14px;width:100%}
.f textarea{resize:vertical;min-height:110px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--sun-c);outline-offset:1px;border-color:transparent}
.f .hint{font-size:12.5px;color:var(--body)}
.f.err input,.f.err select,.f.err textarea{border-color:var(--sun-c)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding-top:6px;font-size:13.5px;color:var(--body)}
.consent input{width:18px;height:18px;margin-top:4px;accent-color:var(--sun-c)}
.formfoot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
#msg{font-size:14px;color:var(--sun-c);max-width:40ch}
.aside{display:grid;gap:clamp(24px,3vw,40px)}
.promise{background:var(--g0);border:1px solid var(--line);border-radius:3px;padding:clamp(22px,2.4vw,30px)}
.promise h3{font-size:17px}
.promise ul{list-style:none;margin:16px 0 0;padding:0}
.promise li{padding:11px 0;border-top:1px solid var(--hair);font-size:14.5px;color:var(--body);
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline}
.promise li em{font-style:normal;width:8px;height:8px;border-radius:50%;background:linear-gradient(200deg,var(--sun-a),var(--sun-c))}
.route{}
.route h3{font-size:17.5px}
.route p{margin-top:11px;font-size:14.5px;color:var(--body)}

/* ---------- cards, cta, footer ---------- */
.cts,.locs{display:grid;gap:clamp(24px,4vw,52px)}
@media(min-width:780px){.cts,.locs{grid-template-columns:1fr 1fr}}
.card{border-top:2px solid var(--ink);padding-top:20px}
.card h3{font-size:18px}
.card p{margin-top:13px;color:var(--body);font-size:15px}
.card a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.cta{background:var(--sun-grad);color:#fff;border-radius:4px;overflow:hidden;position:relative}
.cta .ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.22);width:58vw;aspect-ratio:1;top:-30%;inset-inline-end:-16%}
.cta .ring2{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16);width:78vw;aspect-ratio:1;top:-44%;inset-inline-end:-30%}
.cta-in{padding:clamp(32px,5vw,68px);position:relative;z-index:2}
.cta h2{font-size:clamp(26px,3.6vw,46px);line-height:1.05;max-width:18ch}
.cta p{margin-top:18px;max-width:46ch;color:rgba(255,255,255,.88)}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.cta .acts,.hero .acts{margin-top:clamp(26px,3.2vw,38px)}
.doors{display:grid;gap:1px;background:rgba(255,255,255,.3);margin-top:clamp(30px,4vw,52px);border-radius:3px;overflow:hidden}
@media(min-width:800px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{background:transparent;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;text-decoration:none}
.door h3{font-size:18px;color:#fff}
.door p{margin-top:10px;font-size:14px;color:rgba(255,255,255,.86)}
.door em{font-style:normal;margin-top:20px;font-size:14px;border-bottom:1.5px solid rgba(255,255,255,.6);align-self:flex-start;padding-bottom:2px}
.door:hover{background:rgba(255,255,255,.12)}
.foot{border-top:1px solid var(--hair);padding-block:32px 42px;font-size:13px;color:var(--body)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .tf-track{height:auto}
  .tf-stick{position:static;height:auto;padding-block:60px}
}