/* brand.css — /brand/ layout only (12 Sep 2026). The components are styled by
   their own stylesheets; this file arranges the specimens and their captions. */
.brand-main{--brand-gap:clamp(18px,2.2vw,28px)}
.brand-index{position:sticky;top:calc(var(--header-h) + 8px);z-index:20;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;margin:0 auto clamp(12px,2vw,24px);padding:6px;border-radius:var(--r-pill);width:fit-content;max-width:calc(100% - 2 * var(--gutter));
  background:rgba(14,14,18,.62);border:1px solid var(--border-hi);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.brand-index::-webkit-scrollbar{display:none}
.brand-index a{flex:none;padding:9px 14px;border-radius:var(--r-pill);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .25s var(--ease),background .25s var(--ease)}
.brand-index a:hover{color:var(--text);background:var(--surface-hi)}
.brand-sec{padding-block:clamp(56px,8vw,112px) 0}
.brand-sec-head{display:grid;gap:10px;margin-bottom:clamp(26px,3.4vw,44px);max-width:720px}
.brand-sec-n{color:var(--dim)}
.brand-sec-title{margin:0;font-size:var(--fs-title);font-weight:400;letter-spacing:var(--ls-display);line-height:1.08}
.brand-sec-intro{margin:0;color:var(--muted)}
.brand-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:14px 0 0}
.brand-cap .overline{color:var(--text)}
.brand-cap-spec{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--dim)}
.brand-cap-spec b{font-weight:400;color:var(--muted)}
.brand-grid{display:grid;gap:var(--brand-gap)}
.brand-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:var(--brand-gap)}
.brand-stage{position:relative;border:1px solid var(--border);border-radius:var(--r-tile);background:var(--surface);overflow:hidden}
.brand-stage--hero{padding:clamp(40px,7vw,96px) clamp(16px,3vw,40px);display:flex;justify-content:center}
.brand-hero-title{margin:0}
.brand-grid--type{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(28px,4vw,48px)}
.brand-spec{padding:clamp(20px,2.6vw,32px);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);min-width:0}
.brand-spec > :first-child{margin-top:0}
.brand-demo-title{margin:0}
.brand-spec .page-lede{margin:0}
.brand-spec--btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.brand-spec--btns .brand-cap{flex-basis:100%}
.brand-grid--sw{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.brand-sw{margin:0}
.brand-sw-chip{display:block;aspect-ratio:4/3;border-radius:var(--r-card);border:1px solid var(--border-hi)}
.brand-sw figcaption{display:grid;gap:4px;margin-top:10px}
.brand-grid--mat{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,4vw,48px)}
.brand-mat{min-width:0}
.brand-mat > :first-child{height:220px;border-radius:var(--r-tile)}
.brand-pearl{display:block;--pearl-size:160px;margin:30px auto 0;height:160px!important;border-radius:50%!important}
.brand-card{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:22px}
.brand-glass{display:flex;align-items:flex-end;padding:22px;border:1px solid var(--border-hi)}
.brand-grid--glass{grid-template-columns:repeat(3,minmax(0,1fr))}
.brand-obj{margin:0;min-width:0}
.brand-obj-host{position:relative;aspect-ratio:1;border-radius:var(--r-tile);border:1px solid var(--border);background:radial-gradient(120% 90% at 50% 20%,rgba(129,140,248,.12),transparent 60%),var(--bg-2);overflow:hidden}
.brand-grid--ico{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.brand-ico{margin:0;display:grid;gap:10px;justify-items:center;text-align:center}
.brand-ico-box{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:var(--r-card);border:1px solid var(--border);background:var(--surface)}
.brand-ico-box .chip-ico{width:44px;height:44px;color:var(--text)}
.brand-ico figcaption{color:var(--muted);font-size:var(--fs-label-m)}
.brand-stage--dot{display:grid;place-items:center;height:clamp(240px,30vw,340px);background:radial-gradient(60% 60% at 50% 55%,rgba(129,140,248,.10),transparent 70%),var(--surface)}
.brand-dot{width:132px;height:132px;cursor:pointer}
.brand-dot-states{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--brand-gap);background:none;border:0;padding:0}
.brand-dot-btn{flex:0 0 auto!important;padding:9px 14px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--muted);text-transform:lowercase;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;background:var(--surface);cursor:pointer}
.brand-dot-btn[aria-pressed="true"]{color:#0d0d14;background:var(--text);border-color:var(--text)}
.brand-roll{font-family:var(--mono);font-size:var(--fs-head);letter-spacing:-.01em;color:var(--text);min-width:7ch}
.brand-tl{margin-top:clamp(36px,5vw,64px);max-width:760px}
.brand-anchor{position:relative;top:-120px}
.brand-main #offer,.brand-main #chips,.brand-main #services,.brand-main #work,.brand-main .brand-clients{padding-top:clamp(24px,3vw,40px)}
@media (max-width:760px){
  .brand-grid--type,.brand-grid--mat,.brand-grid--glass{grid-template-columns:1fr}
  .brand-index{top:calc(var(--header-h) + 4px)}
}