/* LIXITO — quiet catalog. White space, hairlines, one accent (cobalt).
   Logo = the previous site's wordmark: "LIXITO" in Noto Sans JP 700, letter-spaced. */
@font-face{font-family:"LX Logo";src:url(/assets/fonts/logo.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"LX Latin";src:url(/assets/fonts/montserrat-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"LX Latin";src:url(/assets/fonts/montserrat-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#FAFAF7; --white:#FFFFFF; --tint:#F2F2ED; --ink:#16181D; --sub:#43464E; --rule:#E2E2DB;
  --cobalt:#1D3BD1; --cobalt-soft:#EDF0FD;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  --zh:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif;
  --en:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:var(--jp);
  --gutter:clamp(18px,4.5vw,48px);
  --radius:10px;
}
.lang-en{--body:var(--en),var(--jp)}
.lang-zh{--body:var(--zh)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.95;letter-spacing:.01em}
.lang-en{letter-spacing:0;line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:600;line-height:1.45}
ul,ol,dl,dd{margin:0;padding:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow>*{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);padding:8px 14px;z-index:50}
.skip:focus{left:8px}

/* type */
.h1{font-size:clamp(28px,3.8vw,46px);line-height:1.45;letter-spacing:.03em}
.h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:.03em}
.lang-en .h1,.lang-en .h2{letter-spacing:-.01em;line-height:1.2}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:"LX Latin",var(--en);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--sub);margin-bottom:18px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cobalt)}
.lead{font-size:clamp(16.5px,1.5vw,18px);color:var(--sub);max-width:36em}
.muted{color:var(--sub)}
.prose{display:grid;gap:18px;max-width:36em;align-content:start;justify-items:start}

/* logo */
.logo,.wordmark{font-family:"LX Logo",var(--jp);font-weight:700;letter-spacing:.06em;text-decoration:none;line-height:1}
.logo{font-size:21px}

/* buttons and links */
.actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.actions.center{justify-content:center;margin-top:56px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:var(--cobalt)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--white)}
button.btn{font-family:inherit;cursor:pointer}
button.btn[disabled]{opacity:.55;cursor:progress}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);padding-block:6px;border-bottom:1px solid currentColor}
.link:hover{color:var(--cobalt)}
.link-sub{color:var(--sub);border-bottom-color:transparent}
.link-light{color:var(--white)}
.link-light:hover{color:#AFC0FF}
.arr{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .2s}
a:hover>.arr{transform:translateX(3px)}

/* tags */
.tag{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.04em;padding:3px 10px;border-radius:999px;line-height:1.5}
.tag-dist{background:var(--cobalt-soft);color:var(--cobalt)}
.tag-own{background:var(--tint);color:var(--ink)}
.tag-partner{box-shadow:inset 0 0 0 1px var(--rule);color:var(--sub)}

/* header */
.site-header{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:rgba(250,250,247,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:32px;min-height:68px}
.nav{margin-left:auto}
.nav ul,.langs{display:flex;gap:26px;list-style:none;align-items:center}
.nav a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--sub);padding-block:4px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.langs{gap:2px;padding-left:26px;border-left:1px solid var(--rule)}
.langs a{display:block;padding:3px 9px;border-radius:999px;font-size:13.5px;text-decoration:none;color:var(--sub)}
.langs a:hover{color:var(--ink)}
.langs a[aria-current]{background:var(--ink);color:var(--white)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;gap:7px}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .2s}
.menu[open] summary span:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu[open] summary span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 22px}
.menu-panel ul{list-style:none;display:grid}
.menu-panel a{display:block;padding:14px 0;text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule)}
.langs-m{display:flex!important;gap:18px;margin-top:12px}
.langs-m a{border:0;font-weight:500;color:var(--sub)}
.langs-m a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}
@media (max-width:900px){.nav,.bar>.langs{display:none}.menu{display:block}}

/* hero */
.hero{padding-top:clamp(56px,9vw,120px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end}
.wordmark{font-size:clamp(68px,12.5vw,176px);letter-spacing:.05em;margin-left:-.04em}
.wordmark-sub{margin-top:18px;font-size:14px;letter-spacing:.24em;color:var(--sub)}
.hero-copy{display:grid;gap:22px;justify-items:start;padding-bottom:10px}
.hero-copy .h1{font-size:clamp(24px,2.6vw,34px)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;align-items:start}}

.hero{padding-bottom:clamp(48px,6vw,80px);border-bottom:1px solid var(--rule)}
.hero-cats{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(48px,6vw,72px);padding-top:22px;border-top:1px solid var(--rule);font-size:15px;color:var(--sub)}
.hero-cats li{display:flex;align-items:center;gap:10px}
.hero-cats li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cobalt)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* sections */
.sec{padding-block:clamp(72px,9vw,120px)}
.sec-first{padding-top:clamp(48px,6vw,72px)}
.sec-flush{padding-top:0}
.sec-tint{background:var(--tint)}
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 24px;margin-bottom:clamp(36px,4.5vw,56px)}
.sec-head .eyebrow{grid-column:1/-1;margin-bottom:6px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.phead{padding-block:clamp(56px,8vw,104px) clamp(36px,4vw,56px);border-bottom:1px solid var(--rule)}
.phead .lead{margin-top:22px}

.biz{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.biz-item{border-top:1px solid var(--ink);padding-top:22px;display:grid;gap:10px;align-content:start}
.biz-n{font-family:"LX Latin",var(--en);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--cobalt)}
.biz-item h3{font-size:19px}
.biz-item p{color:var(--sub);font-size:15.5px}
@media (max-width:860px){.biz{grid-template-columns:1fr}}
.cats{margin-top:56px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.cats h3{font-size:14px;color:var(--sub);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips li{background:var(--white);border:1px solid var(--rule);font-size:14.5px;padding:6px 14px;border-radius:999px}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.stat{display:grid;gap:2px;padding:20px 0;border-bottom:1px solid var(--rule)}
.stat b{font-family:"LX Latin",var(--en);font-weight:500;font-size:clamp(34px,4vw,48px);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat span{font-size:14px;color:var(--sub)}

/* brands */
.bgrid-big{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,20px);margin-top:clamp(16px,2.4vw,28px)}
@media (max-width:1020px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.bgrid-big{grid-template-columns:1fr}}
@media (max-width:520px){.bgrid{grid-template-columns:1fr}}
.bcard{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.bbody{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1;align-items:flex-start}
.bbody p{color:var(--sub);font-size:15px;line-height:1.9}
.bcard .actions{margin-top:auto;padding-top:10px}
.bname{font-family:"LX Latin",var(--en);font-weight:600;font-size:20px;letter-spacing:-.005em;line-height:1.2}
.big .bname{font-size:clamp(22px,2.4vw,28px)}
.bimg{display:block;aspect-ratio:16/10;background:var(--white);overflow:hidden;border-bottom:1px solid var(--rule);padding:clamp(20px,3vw,36px)}
.bimg img{width:100%;height:100%;object-fit:contain;transition:transform .6s ease}
.big:hover .bimg img{transform:scale(1.03)}
.bthumb{display:block;aspect-ratio:4/3;background:var(--white);padding:24px;border-bottom:1px solid var(--rule)}
.bthumb img{width:100%;height:100%;object-fit:contain}
.blist{list-style:none;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--ink)}
.blist li{display:grid;grid-template-columns:9em 12em 1fr;gap:6px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.blist .tag{justify-self:start}
.blist b{font-family:"LX Latin",var(--en);font-weight:600;font-size:17px}
.blist .muted{font-size:15px}
@media (max-width:760px){.blist li{grid-template-columns:1fr}}

/* partner band, cta */
.partner-band{background:var(--ink);color:var(--white)}
.partner-band .eyebrow{color:rgba(255,255,255,.6)}
.partner-band .eyebrow::before{background:#8FA2FF}
.partner-band .prose p{color:rgba(255,255,255,.78)}
.cta-band{border-top:1px solid var(--rule);background:var(--white);padding-block:clamp(40px,5vw,56px)}
.cta-grid{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.cta-text{font-size:clamp(17px,1.8vw,20px);font-weight:600}
.cta-name{font-family:"LX Latin",var(--en);font-weight:600;font-size:clamp(22px,2.4vw,28px);margin-top:8px;line-height:1.2}

.flow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:f}
.flow li{position:relative;padding:30px 24px 0 0;border-top:1px solid var(--ink);display:grid;gap:8px;align-content:start}
.flow li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--cobalt)}
.flow-n{font-family:"LX Latin",var(--en);font-weight:600;font-size:13px;color:var(--cobalt);letter-spacing:.14em}
.flow h3{font-size:17px}
.flow p{font-size:15px;color:var(--sub);line-height:1.85}
@media (max-width:960px){.flow{grid-template-columns:1fr}.flow li{border-top:0;border-left:1px solid var(--ink);padding:0 0 30px 28px}.flow li::before{top:10px;left:-4px}.flow li:last-child{padding-bottom:0}}

/* tables */
.facts{display:grid;border-top:1px solid var(--ink)}
.facts>div{display:grid;grid-template-columns:minmax(120px,14em) 1fr;gap:4px 24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.facts dt{color:var(--sub);font-size:14.5px;font-weight:600}
.facts dd{overflow-wrap:anywhere}
@media (max-width:560px){.facts>div{grid-template-columns:1fr}}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.form .wide{grid-column:1/-1}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:15px;display:flex;gap:8px;align-items:center}
.req,.opt{font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:3px;letter-spacing:.04em}
.req{background:var(--ink);color:var(--white)}
.opt{box-shadow:inset 0 0 0 1px var(--rule);color:var(--sub)}
.field input,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--rule);border-radius:8px;padding:12px 14px;width:100%;transition:border-color .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{resize:vertical;min-height:180px}
.field.is-invalid input,.field.is-invalid textarea{border-color:#C0392B}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.note{font-size:14px;color:var(--sub)}
.note a{color:var(--ink)}
.submit{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.status{font-size:14px;font-weight:600}
.status.is-ok{color:#1B6B3A}
.status.is-error{color:#B03A2E}
.form.is-sent .field,.form.is-sent .note,.form.is-sent button{display:none}

/* footer */
.site-footer{border-top:1px solid var(--rule);padding-block:56px calc(40px + env(safe-area-inset-bottom,0px))}
.foot{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px}
.foot .logo{font-size:24px}
.foot-brand{display:grid;gap:16px;max-width:34em;font-size:14px;color:var(--sub)}
.foot-nav{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;align-content:start;font-size:14.5px}
.foot-nav a{text-decoration:none;color:var(--sub)}
.foot-nav a:hover{color:var(--ink)}
.foot-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:20px;font-size:13px;color:var(--sub)}
.build{font-family:ui-monospace,Menlo,monospace}
@media (max-width:700px){.foot{grid-template-columns:1fr}}

/* brand pages */
.bhero{padding-block:clamp(48px,7vw,88px);border-bottom:1px solid var(--rule)}
.bhero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
@media (max-width:900px){.bhero-grid{grid-template-columns:1fr}}
.bhero-copy{display:grid;gap:18px;justify-items:start}
.crumbs{display:flex;gap:10px;font-size:13.5px;color:var(--sub)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.bh1{font-family:"LX Latin",var(--en);font-weight:600;font-size:clamp(38px,5.6vw,72px);line-height:1.02;letter-spacing:-.025em}
.kana{color:var(--sub);margin-top:-8px;font-size:15px;letter-spacing:.08em}
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.badges li{font-size:13.5px;padding:4px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--white)}
.bhero-img img{width:100%;border-radius:var(--radius);border:1px solid var(--rule);background:var(--white)}

.feats{display:grid;gap:clamp(48px,7vw,96px)}
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,88px);align-items:center}
.feat:nth-child(even) img{order:2}
.feat img{width:100%;border-radius:var(--radius);max-height:520px;object-fit:contain;background:var(--white)}
.feat>div{display:grid;gap:14px;max-width:30em}
.feat h3{font-size:clamp(20px,2.2vw,26px)}
.feat p{color:var(--sub)}
@media (max-width:760px){.feat{grid-template-columns:1fr}.feat:nth-child(even) img{order:0}}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:clamp(48px,6vw,80px)}
.note-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:24px 26px;display:grid;gap:8px}
.note-card h3{font-size:17px}
.note-card p{color:var(--sub);font-size:15.5px}

.steps-wrap{display:grid;gap:clamp(24px,5vw,64px);margin-top:36px;align-items:start}
.steps-wrap.has-img{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:860px){.steps-wrap.has-img{grid-template-columns:1fr}}
.steps{list-style:none;counter-reset:s;border-top:1px solid var(--ink)}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:"LX Latin",var(--en);font-weight:600;font-size:14px;color:var(--cobalt);letter-spacing:.1em}
.steps-img img{border-radius:var(--radius);width:100%}

.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.proof-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:18px;display:grid;grid-template-columns:112px 1fr;gap:20px;align-items:center}
.proof-card img{border-radius:6px}
.proof-card h3{font-size:16px;margin-bottom:4px}
.proof-card p{color:var(--sub);font-size:15px}

.video{position:relative;display:block;border-radius:var(--radius);overflow:hidden;max-width:880px;margin-inline:auto;background:var(--ink);text-decoration:none;color:var(--white)}
.video img{width:100%;opacity:.82;transition:opacity .25s}
.video:hover img{opacity:.7}
.play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--white)}
.play::after{content:"";position:absolute;left:29px;top:23px;border-left:18px solid var(--ink);border-top:13px solid transparent;border-bottom:13px solid transparent}
.video-label{position:absolute;left:22px;bottom:18px;display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:14px}

.nf{display:grid;gap:48px}
.nf>div{display:grid;gap:12px;justify-items:start}
.dated{margin-top:28px;font-size:14px}
html{scroll-padding-top:84px}

/* ---------------------------------------------------------------- v1.3: dark openings and motion */
:root{--night:#0D0F14;--night-2:#161A24;--bright:#5B78FF;--hh:69px}
.dark{position:relative;overflow:hidden;background:var(--night);color:var(--white);isolation:isolate}
.dark .eyebrow{color:rgba(255,255,255,.66)}
.dark .eyebrow::before{background:var(--bright)}
.dark .lead{color:rgba(255,255,255,.76)}
.glow{position:absolute;z-index:-1;inset:-30% -10% auto auto;width:min(900px,90vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(40,70,235,.55),rgba(40,70,235,.12) 55%,transparent);filter:blur(10px);animation:drift 16s ease-in-out infinite alternate}
.phead .glow{inset:-60% -10% auto auto;width:min(700px,80vw)}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-18%,14%) scale(1.15)}}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--bright);color:var(--white)}
.btn-line-light{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn-line-light:hover{background:var(--white);color:var(--ink)}

/* header floats over the dark opening, turns solid once scrolled (JS adds .js and .scrolled) */
.js .dark-top .site-header:not(.scrolled){background:transparent;border-bottom-color:rgba(255,255,255,.1);backdrop-filter:none;-webkit-backdrop-filter:none}
.js .dark-top .site-header:not(.scrolled) .logo,.js .dark-top .site-header:not(.scrolled) .nav a{color:rgba(255,255,255,.86)}
.js .dark-top .site-header:not(.scrolled) .nav a:hover,.js .dark-top .site-header:not(.scrolled) .nav a[aria-current]{color:var(--white);border-bottom-color:var(--white)}
.js .dark-top .site-header:not(.scrolled) .langs{border-left-color:rgba(255,255,255,.18)}
.js .dark-top .site-header:not(.scrolled) .langs a{color:rgba(255,255,255,.7)}
.js .dark-top .site-header:not(.scrolled) .langs a[aria-current]{background:var(--white);color:var(--ink)}
.js .dark-top .site-header:not(.scrolled) .menu summary span{background:var(--white)}
.site-header{transition:background-color .3s,border-color .3s}
.dark-top main>.dark:first-child{margin-top:calc(-1 * var(--hh) - env(safe-area-inset-top,0px));padding-top:calc(var(--hh) + env(safe-area-inset-top,0px) + clamp(56px,8vw,112px))}
.dark-top main>.phead.dark:first-child{padding-bottom:clamp(48px,6vw,80px)}

/* hero */
.hero.dark{padding-bottom:clamp(48px,6vw,72px);border-bottom:0}
.hero .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"mark tiles" "copy tiles";align-items:center;row-gap:clamp(36px,5vw,56px)}
.hero-mark{grid-area:mark}
.hero-copy{grid-area:copy;padding-bottom:0}
.tiles{grid-area:tiles;justify-self:end}
.dark .wordmark-sub{color:rgba(255,255,255,.6)}
.dark .hero-cats{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.dark .hero-cats li::before{background:var(--bright)}
.wordmark{display:flex;clip-path:inset(-20% -20% 0 -5%);padding-bottom:.04em;font-size:clamp(64px,10.5vw,156px)}
.wordmark span{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
.wordmark span:nth-child(2){animation-delay:.06s}.wordmark span:nth-child(3){animation-delay:.12s}
.wordmark span:nth-child(4){animation-delay:.18s}.wordmark span:nth-child(5){animation-delay:.24s}.wordmark span:nth-child(6){animation-delay:.3s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero-copy,.wordmark-sub,.hero-cats{animation:fade 1s .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the logo mark, alive: the blue "picked" item moves around, shapes breathe between square and round */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);width:clamp(180px,24vw,320px);aspect-ratio:1}
.tiles i{display:block;background:rgba(255,255,255,.16);border-radius:12%;animation:pick 8s ease-in-out infinite,shape 8s ease-in-out infinite}
.tiles i:nth-child(1){background:var(--white);animation-delay:0s,0s}
.tiles i:nth-child(2){border-radius:50%;animation-delay:2s,4s}
.tiles i:nth-child(4){animation-delay:4s,0s}
.tiles i:nth-child(3){border-radius:50%;animation-delay:6s,4s}
@keyframes pick{0%,24%,100%{box-shadow:inset 0 0 0 0 var(--bright)}6%,18%{box-shadow:inset 0 0 0 200px var(--bright)}}
@keyframes shape{0%,40%,100%{border-radius:12%}50%,90%{border-radius:50%}}
.tiles i:nth-child(2),.tiles i:nth-child(3){animation-name:pick,shape-r}
@keyframes shape-r{0%,40%,100%{border-radius:50%}50%,90%{border-radius:12%}}
@media (max-width:900px){.hero .hero-grid{grid-template-columns:1fr;grid-template-areas:"mark" "copy" "tiles"}.tiles{justify-self:start;width:160px}}

/* sections appear as they scroll into view (only when JS is on, so nothing is ever stuck hidden) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.1,1)}
.js .rv.in{opacity:1;transform:none}
.bcard{transition:transform .35s ease,box-shadow .35s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,15,20,.08)}
.bthumb img{transition:transform .5s ease}
.bcard:hover .bthumb img{transform:scale(1.04)}
.link{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .3s,color .2s}
.link:hover{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .glow,.wordmark span,.hero-copy,.wordmark-sub,.hero-cats,.tiles i{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .bcard:hover{transform:none}
}

/* ---------------------------------------------------------------- v1.5: fuller top page */
.biz-top{margin-top:clamp(48px,6vw,80px)}
.contact-lead{margin-top:18px}
#contact .form{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(22px,3vw,36px)}

.bblocks{display:grid;gap:clamp(20px,2.4vw,28px);margin-top:clamp(20px,2.4vw,28px)}
.bblock{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,40px);background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(20px,2.6vw,32px)}
.bblock-head{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.bblock-head p{color:var(--sub);font-size:15px}
.bblock-head .actions{margin-top:auto;padding-top:6px}
@media (max-width:860px){.bblock{grid-template-columns:1fr}}
.pgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;align-content:start}
.ptile{display:grid;gap:6px;align-content:start}
.pimg{display:block;aspect-ratio:1;background:var(--tint);border-radius:8px;padding:14px;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease}
.pimg:hover img{transform:scale(1.06)}
.pname{font-size:14px;font-weight:600;line-height:1.5}
.plinks{display:flex;gap:12px;font-size:12.5px}
.plinks a{display:inline-flex;align-items:center;gap:4px;color:var(--sub);text-decoration:none}
.plinks a:hover{color:var(--cobalt)}
.plinks .arr{width:11px;height:11px}

.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px)}
.shop-grid .sec-head{margin-bottom:16px}
@media (max-width:860px){.shop-grid{grid-template-columns:1fr}}
.stores,.socials{display:grid;gap:12px;margin-top:24px}
.store,.social{position:relative;display:grid;gap:2px;padding:20px 52px 20px 22px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--white);text-decoration:none;transition:border-color .2s,transform .25s}
.store:hover,.social:hover{border-color:var(--ink);transform:translateY(-2px)}
.store>.arr,.social>.arr{position:absolute;right:20px;top:50%;margin-top:-7px}
.store-name{font-family:"LX Latin",var(--en);font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--cobalt);text-transform:uppercase}
.store b{font-size:18px}
.store .muted,.social .muted{font-size:14px}
.social{grid-template-columns:40px 1fr;align-items:center;column-gap:16px}
.social>span{display:grid}
.social svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social svg .fill{fill:var(--ink);stroke:none}
.social-youtube:hover svg{stroke:#E0282A}.social-youtube:hover svg .fill{fill:#E0282A}
.social-instagram:hover svg{stroke:#C13584}.social-instagram:hover svg .fill{fill:#C13584}
.social-tiktok:hover svg{stroke:var(--ink)}
.social svg.arr{width:14px;height:14px;stroke-width:1.8}