/* ═══════════════════════════════════════════════════════
   THE PERSON — Brand Guidelines Site
   Inspired by creative.starbucks.com
   ═══════════════════════════════════════════════════════ */

/* ─── Font Face ─── */
@font-face{font-family:'Gotham';src:url('../fonts/GothamBook.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/GothamMedium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/GothamBold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/GothamBlack.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}

/* ─── Tokens ─── */
:root{
  --pri:#E2792E;
  --pri-light:#FDF8F4;
  --pri-dark:#C96A28;
  --sec:#FFB11B;
  --blk:#1C1C1C;
  --wht:#FFFFFB;
  --gry:#B4B5B4;
  --gry-d:#8A8B8A;
  --gry-l:#EEEDEB;
  --gry-xl:#F7F6F2;
  --sky:#51A8DD;
  --grn:#227D51;
  --blue:#004D80;
  --red:#D64545;
  --font-en:'Gotham',sans-serif;
  --font-ja:'Noto Sans JP',sans-serif;
  --header-h:64px;
  --sidebar-w:48px;
  --max-w:1200px;
}

/* ─── Reset ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-ja);
  color:var(--blk);
  background:var(--wht);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{list-style:none}

/* ─── Header ─── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  padding:0 40px;
  background:var(--blk);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .logo{
  font-family:var(--font-en);
  font-weight:700;
  font-size:13px;
  letter-spacing:3px;
  color:#fff;
}
.site-header .logo span{
  color:var(--gry-d);
  font-weight:400;
  margin-left:16px;
  font-size:11px;
  letter-spacing:1.5px;
}
.site-header .nav-toggle{
  margin-left:auto;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;
  color:rgba(255,255,255,.6);
  font-size:11px;
  font-family:var(--font-en);
  font-weight:500;
  letter-spacing:2px;
  transition:color .2s;
}
.site-header .nav-toggle:hover{color:#fff}
.site-header .nav-toggle .hamburger{
  width:20px;height:14px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.site-header .nav-toggle .hamburger span{
  display:block;height:2px;background:currentColor;border-radius:1px;
  transition:transform .3s,opacity .3s;
}

/* ─── Sidebar "Contents" ─── */
.contents-label{
  position:fixed;top:var(--header-h);right:0;z-index:90;
  width:var(--sidebar-w);height:calc(100vh - var(--header-h));
  display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;
  font-family:var(--font-en);font-size:10px;font-weight:500;
  letter-spacing:3px;color:var(--pri);
  cursor:pointer;
  border-left:1px solid var(--gry-l);
  background:var(--wht);
  transition:background .2s;
}
.contents-label:hover{background:var(--gry-xl)}

/* ─── Navigation Overlay ─── */
.nav-overlay{
  position:fixed;inset:0;z-index:200;
  background:var(--blk);
  display:flex;flex-direction:column;
  padding:40px;
  opacity:0;pointer-events:none;
  transition:opacity .4s;
}
.nav-overlay.open{opacity:1;pointer-events:all}
.nav-overlay .nav-close{
  align-self:flex-end;
  font-family:var(--font-en);font-size:12px;font-weight:500;
  letter-spacing:2px;color:rgba(255,255,255,.5);
  cursor:pointer;margin-bottom:auto;
  transition:color .2s;
}
.nav-overlay .nav-close:hover{color:#fff}
.nav-overlay .nav-links{
  display:flex;flex-direction:column;gap:8px;
  margin:auto 0;
  padding-left:80px;
}
.nav-overlay .nav-links a{
  font-family:var(--font-en);
  font-size:48px;font-weight:700;
  color:rgba(255,255,255,.25);
  letter-spacing:-1px;
  transition:color .25s;
  line-height:1.3;
}
.nav-overlay .nav-links a:hover{color:var(--pri)}
.nav-overlay .nav-links a.active{color:#fff}
.nav-overlay .nav-footer{
  margin-top:auto;
  font-size:11px;color:rgba(255,255,255,.2);
  letter-spacing:1px;
}

/* ─── Main content ─── */
main{
  margin-top:var(--header-h);
  margin-right:var(--sidebar-w);
}

/* ─── Hero (TOP page) ─── */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  background:var(--gry-xl);
  display:flex;align-items:center;
  padding:80px 100px;
  overflow:hidden;
}
@keyframes blob-idle{
  0%,100%{border-radius:50%;transform:translateY(-50%) translate(0,0)}
  25%{border-radius:47% 53% 51% 49% / 52% 48% 52% 48%;transform:translateY(-50%) translate(6px,-8px)}
  50%{border-radius:52% 48% 49% 51% / 48% 53% 47% 52%;transform:translateY(-50%) translate(-4px,5px)}
  75%{border-radius:49% 51% 53% 47% / 51% 49% 51% 49%;transform:translateY(-50%) translate(5px,7px)}
}
.hero-circle{
  position:absolute;
  width:65vw;height:65vw;
  max-width:800px;max-height:800px;
  border-radius:50%;
  background:var(--pri);
  left:-12vw;top:50%;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  animation:blob-idle 14s ease-in-out infinite;
  cursor:pointer;
  will-change:border-radius,transform;
}
.hero-illust{
  width:52%;height:auto;
  filter:brightness(0) invert(1);
  opacity:.18;
}
.hero-content{
  position:relative;z-index:2;
  margin-left:42vw;
  max-width:520px;
}
.hero-title{
  font-family:var(--font-en);
  font-size:clamp(36px,5vw,64px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-1px;
  color:var(--blk);
  margin-bottom:24px;
}
.hero-sub{
  font-size:14px;
  color:var(--gry-d);
  line-height:1.8;
  max-width:400px;
}
.hero-brand-name{
  font-family:var(--font-en);
  font-size:clamp(24px,3vw,36px);
  font-weight:700;
  letter-spacing:6px;
  color:var(--blk);
  margin-bottom:8px;
}
.hero-brand-sub{
  font-family:var(--font-en);
  font-size:clamp(14px,1.8vw,20px);
  font-weight:500;
  letter-spacing:3px;
  color:var(--gry-d);
  margin:0 0 24px;
}
.hero-divider{
  width:64px;height:3px;
  background:var(--blk);
  margin-bottom:28px;
}
.hero-desc{
  font-size:13px;
  color:#666;
  line-height:2.2;
  max-width:420px;
  margin-bottom:16px;
}
.hero-closing{
  font-size:14px;
  font-weight:700;
  color:var(--blk);
  letter-spacing:.05em;
}

/* ─── Philosophy Section (TOP page) ─── */
.philosophy-section{
  padding:100px 100px 100px 160px;
  position:relative;
  max-width:900px;
}
.philosophy-section .section-label{
  position:absolute;left:60px;top:100px;
  writing-mode:vertical-rl;
  font-family:var(--font-en);
  font-size:9px;font-weight:700;
  letter-spacing:4px;
  color:var(--pri);
}
.philosophy-section .section-icon{
  position:absolute;left:48px;bottom:100px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
}
.philosophy-section .section-icon svg{width:100%;height:auto;opacity:.15}
.philosophy-text-block{
  font-size:17px;line-height:2.2;color:#444;
  max-width:600px;
}
.philosophy-text-block p+p{margin-top:28px}
.philosophy-text-block strong{color:var(--blk);font-weight:700}
.phil-hl{
  background:var(--pri);
  color:#fff;
  padding:2px 8px;
  font-weight:700;
  display:inline;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ─── Contents Grid (TOP page) ─── */
.contents-grid-section{
  padding:80px 100px;
  background:var(--gry-xl);
}
.contents-grid-section h2{
  font-family:var(--font-en);
  font-size:11px;font-weight:700;
  letter-spacing:4px;color:var(--pri);
  margin-bottom:48px;
}
.contents-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1px;
}
.contents-card{
  padding:36px 32px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--gry-l);
  transition:background .3s,border-color .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}
.contents-card:hover{
  background:#fff;
  border-color:rgba(226,121,46,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.contents-card .cc-num{
  font-family:var(--font-en);
  font-size:11px;font-weight:500;
  color:var(--gry-d);letter-spacing:2px;
  margin-bottom:12px;
}
.contents-card .cc-title{
  font-family:var(--font-en);
  font-size:28px;font-weight:700;
  color:var(--blk);letter-spacing:-0.5px;
  line-height:1.2;margin-bottom:8px;
}
.contents-card .cc-desc{
  font-size:12px;color:var(--gry-d);
  line-height:1.6;margin-top:auto;
  padding-top:16px;
}

/* ─── Footer ─── */
.site-footer{
  background:var(--blk);color:#fff;
  padding:clamp(60px,8vw,100px) clamp(40px,6vw,100px) 48px;
  border-top:none;text-align:left;
}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-brand{margin-bottom:60px}
.footer-brand-logo{
  font-family:var(--font-en);
  font-size:18px;font-weight:700;
  letter-spacing:6px;color:#fff;
  margin-bottom:24px;
}
.footer-brand-title{
  font-family:var(--font-en);
  font-weight:700;line-height:.92;
}
.footer-brand-title .ft-line1{
  font-size:clamp(56px,10vw,120px);
  color:#fff;display:block;
}
.footer-brand-title .ft-line2{
  font-size:clamp(56px,10vw,120px);
  font-weight:500;
  color:var(--gry);display:block;
}
.footer-info{
  border-top:1px solid rgba(255,255,255,.15);
  margin-bottom:56px;
}
.footer-info-row{
  display:flex;justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.footer-info-label{color:rgba(255,255,255,.35);font-family:var(--font-en);font-size:12px;letter-spacing:1px}
.footer-info-value{color:rgba(255,255,255,.6);text-align:right;font-family:var(--font-en);font-size:13px}
.footer-nav{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 40px;margin-bottom:56px;
}
.footer-nav a{
  font-family:var(--font-en);
  font-size:13px;font-weight:500;
  letter-spacing:1px;
  color:rgba(255,255,255,.35);
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .2s;
}
.footer-nav a:hover{color:var(--pri)}
.footer-copy{
  font-size:11px;color:rgba(255,255,255,.2);
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  line-height:1.8;
}

/* ─── Section Page Layout ─── */
.section-hero{
  min-height:50vh;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:80px 100px;
  position:relative;
}
.section-hero.dark{background:var(--blk);color:#fff}
.section-hero.orange{background:var(--pri);color:#fff}
.section-hero.light{background:var(--gry-xl);color:var(--blk)}
.section-hero .sh-label{
  font-family:var(--font-en);
  font-size:11px;font-weight:600;
  letter-spacing:6px;
  opacity:.4;margin-bottom:20px;
}
.section-hero .sh-title{
  font-family:var(--font-en);
  font-size:clamp(48px,8vw,96px);
  font-weight:700;letter-spacing:-2px;
  line-height:.95;margin-bottom:24px;
}
.section-hero .sh-tagline{
  font-size:18px;font-weight:400;
  line-height:2;letter-spacing:.5px;
  opacity:.6;max-width:400px;
}

/* ─── Section Content Blocks ─── */
.section-block{
  padding:80px 100px;
  border-bottom:1px solid var(--gry-l);
}
.section-block:last-child{border-bottom:none}
.section-block.alt{background:var(--gry-xl)}
.section-block.dark{background:var(--blk);color:#fff}

.block-label{
  font-family:var(--font-en);
  font-size:9px;font-weight:700;
  letter-spacing:4px;color:var(--pri);
  margin-bottom:12px;
}
.block-title{
  font-size:28px;font-weight:800;
  letter-spacing:-0.5px;line-height:1.2;
  margin-bottom:8px;
}
.block-sub{
  font-size:12px;color:var(--gry-d);
  line-height:1.6;margin-bottom:32px;
}

/* ─── Two-column layout ─── */
.two-col{display:flex;gap:64px;align-items:flex-start}
.two-col .col-left{flex:1}
.two-col .col-right{flex:1}

/* ─── VMV Spread (Vision/Mission/Value) ─── */
.vmv-block{
  display:flex;gap:0;
  min-height:60vh;
  border-bottom:1px solid var(--gry-l);
}
.vmv-text-col{
  flex:0 0 40%;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:64px 56px;
}
.vmv-text-col .vmv-label{
  font-family:var(--font-en);
  font-size:9px;font-weight:700;
  letter-spacing:4px;color:var(--pri);
  margin-bottom:16px;
}
.vmv-text-col .vmv-ja{
  font-size:32px;font-weight:800;
  line-height:1.4;letter-spacing:-0.5px;
  margin-bottom:12px;
}
.vmv-text-col .vmv-en{
  font-family:var(--font-en);
  font-size:12px;font-weight:400;
  color:var(--gry-d);line-height:1.6;
}
.vmv-photo-col{
  flex:1;
  background-size:cover;
  background-position:center;
  min-height:400px;
}
.vmv-caption{
  padding:48px 56px;
  font-size:17px;line-height:2.2;
  color:#444;max-width:600px;
}

/* ─── Direction Cards ─── */
.dir-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.dir-card{
  padding:36px 32px;
  border-radius:10px;
  border-left:4px solid var(--pri);
}
.dir-card:nth-child(1){background:#FDF8F4}
.dir-card:nth-child(2){background:#F3FAF5}
.dir-card:nth-child(3){background:var(--gry-xl)}
.dir-card h3{font-size:24px;font-weight:800;line-height:1.1;margin-bottom:4px}
.dir-card .dir-en{font-family:var(--font-en);font-size:10px;color:var(--gry-d);margin-bottom:16px}
.dir-card p{font-size:12px;line-height:2;color:#444}

/* ─── Voice Archetype Cards ─── */
.arch-cards{display:flex;gap:24px}
.arch-card{flex:1;border-radius:12px;padding:32px 28px}
.arch-card.cg{background:var(--blk);color:var(--wht)}
.arch-card.js{background:var(--sec);color:var(--blk)}
.arch-card .arch-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.arch-card .arch-name{font-size:18px;font-weight:800}
.arch-card .arch-pct{font-size:32px;font-weight:800;opacity:.25}
.arch-card .arch-desc{font-size:11px;line-height:1.8;opacity:.8}

/* ─── DO/DON'T Grid ─── */
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.dd-col h3{font-size:14px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.dd-col h3 .badge{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
.dd-col h3 .badge.do{background:var(--grn)}
.dd-col h3 .badge.dont{background:var(--red)}
.dd-item{padding:16px;border-radius:8px;margin-bottom:12px}
.dd-item.do{background:rgba(34,125,81,.03);border-left:3px solid var(--grn)}
.dd-item.dont{background:rgba(214,69,69,.03);border-left:3px solid var(--red)}
.dd-item .dd-q{font-size:14px;font-weight:600;margin-bottom:4px}
.dd-item .dd-r{font-size:10px;color:var(--gry-d)}

/* ─── Avoid Words ─── */
.avoid-grid{
  display:flex;flex-wrap:wrap;gap:24px 48px;
  align-items:center;padding:32px 0;
}
.avoid-word{
  font-size:36px;font-weight:700;
  color:rgba(214,69,69,.18);
  text-decoration:line-through;
  text-decoration-color:var(--red);
  text-decoration-thickness:3px;
}

/* ─── Logo Showcase ─── */
.logo-showcase{display:flex;min-height:50vh}
.logo-showcase .ls-left{
  flex:1;background:var(--gry-xl);
  display:flex;align-items:center;justify-content:center;
  padding:48px;
}
.logo-showcase .ls-right{flex:1;display:flex;flex-direction:column}
.logo-showcase .ls-dark{flex:1;background:var(--blk);display:flex;align-items:center;justify-content:center}
.logo-showcase .ls-light{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid var(--gry-l)}
.logo-mark{
  font-family:var(--font-en);
  font-size:28px;font-weight:700;
  letter-spacing:4px;
}

/* ─── Logo Don'ts Grid ─── */
.ld-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.ld-item .ld-label{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:600;margin-bottom:8px;
}
.ld-x{
  width:20px;height:20px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
}
.ld-card{
  border-radius:10px;height:120px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.ld-card.light{background:#fff;border:1px solid var(--gry-l)}
.ld-card.dark{background:var(--blk)}

/* ─── Color Strips ─── */
.color-strips{display:flex;min-height:50vh}
.clr-strip{
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:40px 32px;
}
.clr-strip-tag{
  display:inline-block;font-size:8px;font-weight:600;
  letter-spacing:1px;padding:3px 8px;border-radius:4px;
  border:1px solid rgba(255,255,255,.3);width:fit-content;
  margin-bottom:8px;
}
.clr-strip-title{font-size:22px;font-weight:800;line-height:1.2}
.clr-strip-desc{font-size:10px;opacity:.75;line-height:1.6;max-width:240px}
.clr-strip-name{font-size:12px;font-weight:700}
.clr-strip-hex{font-size:10px;opacity:.6;font-family:monospace;letter-spacing:.5px}

/* ─── Illustration Spread ─── */
.illust-spread{display:flex;min-height:60vh}
.illust-left{
  flex:0 0 40%;background:var(--pri);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:56px;position:relative;overflow:hidden;
}
.illust-left::after{
  content:'';position:absolute;top:-60px;right:-60px;
  width:200px;height:200px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
}
.illust-right{
  flex:1;background:var(--gry-xl);
  display:flex;align-items:center;justify-content:center;
  padding:48px;
}
.illust-right svg{width:300px;height:auto;filter:drop-shadow(0 8px 32px rgba(28,28,28,.08))}

/* ─── Typography Specimen ─── */
.typ-specimen{
  display:flex;align-items:flex-start;gap:48px;
  padding:48px 0;
  border-bottom:1px solid var(--gry-l);
}
.typ-specimen:last-child{border-bottom:none}
.typ-meta{flex:0 0 200px}
.typ-meta h3{font-size:13px;font-weight:700;margin-bottom:4px}
.typ-meta .typ-props{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.typ-meta .typ-prop{font-size:10px;color:var(--gry-d)}
.typ-sample{flex:1}
.typ-sample .sample-large{font-size:48px;font-weight:700;line-height:1.1;margin-bottom:16px}
.typ-sample .sample-body{font-size:14px;line-height:1.8;color:#444;max-width:400px}

/* ─── Sub-brand Cards ─── */
.sb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sb-card{border-radius:10px;overflow:hidden;border:1px solid var(--gry-l)}
.sb-card-head{padding:24px;color:#fff}
.sb-card-head h3{font-size:18px;font-weight:800;margin-bottom:2px}
.sb-card-head p{font-size:9px;opacity:.7}
.sb-card-body{padding:20px 24px}
.sb-mod{margin-bottom:12px}
.sb-mod-lbl{font-size:7px;font-weight:700;letter-spacing:2px;color:var(--gry-d);margin-bottom:2px}
.sb-mod-val{font-size:10px;line-height:1.5}

/* ─── Trainer Competency Cards ─── */
.tc-cards{display:flex;gap:24px}
.tc-card{flex:1;border-radius:12px;padding:36px 28px;color:#fff}
.tc-card.ign{background:linear-gradient(140deg,var(--pri),#C96A28)}
.tc-card.cmf{background:var(--blk)}
.tc-card h3{font-size:24px;font-weight:800;margin-bottom:4px}
.tc-card .tc-en{font-family:var(--font-en);font-size:8px;opacity:.4;letter-spacing:2px;margin-bottom:16px}
.tc-card p{font-size:11px;line-height:1.8;opacity:.85;margin-bottom:16px}
.tc-card ul{display:flex;flex-direction:column;gap:8px}
.tc-card li{font-size:11px;padding:10px 14px;border-radius:6px;background:rgba(255,255,255,.1);font-weight:600}

/* ─── Competency Spectrum ─── */
.comp-axis{
  position:relative;height:200px;
  max-width:680px;margin:40px auto;
}
.comp-line{
  position:absolute;top:50%;left:60px;right:60px;
  height:3px;background:linear-gradient(90deg,var(--pri),var(--blk));
  border-radius:2px;
}
.comp-end{
  position:absolute;top:50%;transform:translateY(-50%);
  text-align:center;
}
.comp-end.left{left:0}
.comp-end.right{right:0}
.comp-icon{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:#fff;
  margin:0 auto 8px;
}
.comp-icon.ign{background:var(--pri)}
.comp-icon.cmf{background:var(--blk)}
.comp-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:#fff;padding:8px 20px;
  border-radius:20px;border:2px solid var(--gry-l);
  font-size:10px;font-weight:700;color:var(--pri);
}

/* ─── Application Gallery ─── */
.app-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.app-card{
  border-radius:12px;overflow:hidden;
  background:var(--gry-xl);
  min-height:300px;
  position:relative;
}
.app-card .app-label{
  position:absolute;top:20px;left:24px;
  font-family:var(--font-en);
  font-size:9px;font-weight:700;
  letter-spacing:1.5px;color:var(--gry-d);
}

/* ─── Section Nav (bottom of each page) ─── */
.section-nav{
  display:flex;
  border-top:1px solid var(--gry-l);
}
.section-nav a{
  flex:1;padding:32px 40px;
  display:flex;flex-direction:column;gap:4px;
  transition:background .2s;
}
.section-nav a:hover{background:var(--gry-xl)}
.section-nav a:last-child{text-align:right;border-left:1px solid var(--gry-l)}
.section-nav .sn-dir{font-size:10px;color:var(--gry-d);letter-spacing:1px}
.section-nav .sn-title{font-family:var(--font-en);font-size:20px;font-weight:700}

/* ═══════════════════════════════════════
   WEB-SPECIFIC SECTION PAGE STYLES
   ═══════════════════════════════════════ */

/* ─── Philosophy Quote ─── */
.philosophy-quote{
  font-size:clamp(20px,2.5vw,28px);
  font-weight:300;
  line-height:2;
  color:var(--blk);
  letter-spacing:.05em;
}

/* ─── Social Value Diagram (Web) ─── */
.sv-diagram{position:relative;width:280px;height:280px}
.circles{position:relative;width:100%;height:100%}
.cr{border-radius:50%;position:absolute;display:flex;align-items:center;justify-content:center}
.cr4{width:280px;height:280px;background:var(--gry-xl);border:1px solid var(--gry-l);top:0;left:0}
.cr3{width:210px;height:210px;background:rgba(81,168,221,.1);border:1px solid rgba(81,168,221,.3);top:35px;left:35px}
.cr2{width:140px;height:140px;background:rgba(255,177,27,.1);border:1px solid rgba(255,177,27,.3);top:70px;left:70px}
.cr1{width:80px;height:80px;background:var(--pri);top:100px;left:100px}
.cr1 span{color:#fff;font-size:9px;font-weight:700;text-align:center;line-height:1.4}
.cr-lbl{font-size:10px;font-weight:700;color:var(--gry-d);position:absolute}
.cl4{top:8px;left:50%;transform:translateX(-50%)}
.cl3{top:8px;left:50%;transform:translateX(-50%);color:var(--sky)}
.cl2{top:8px;left:50%;transform:translateX(-50%);color:var(--sec)}
.sv-items{display:flex;flex-direction:column;gap:20px}
.sv-item{padding-left:20px;border-left:3px solid var(--gry-l)}
.sv-item-h{font-size:13px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.sv-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.sv-item p{font-size:12px;line-height:1.7;color:#555}

/* ─── Voice Page ─── */
.tone-dim-web{display:flex;flex-direction:column;gap:12px}
.tone-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gry-d)}
.tone-row span{min-width:70px;font-size:10px}
.tone-row span:last-child{text-align:right}
.tone-bar-web{flex:1;height:8px;background:var(--gry-l);border-radius:4px;overflow:hidden}
.tone-fill-web{height:100%;background:var(--pri);border-radius:4px}
.kw-tag{
  display:inline-block;padding:6px 16px;
  border:1px solid var(--gry-l);border-radius:20px;
  font-size:12px;color:var(--blk);
}

/* ─── DO/DON'T Grid (Web) ─── */
.dd-grid-web{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px}
.dd-col-header{
  font-size:14px;font-weight:700;padding:16px 0;
  border-bottom:2px solid;margin-bottom:16px;
}
.dd-col-header.do{border-color:#227D51;color:#227D51}
.dd-col-header.dont{border-color:#cc0000;color:#cc0000}
.dd-item-web{padding:16px 0;border-bottom:1px solid var(--gry-l)}
.dd-quote{font-size:14px;font-weight:700;line-height:1.6;margin-bottom:8px;color:var(--blk)}
.dd-reason{font-size:11px;line-height:1.6;color:var(--gry-d)}
.do-item{border-left:3px solid #227D51;padding-left:16px}
.dont-item{border-left:3px solid #cc0000;padding-left:16px}

/* ─── Logo Don'ts Grid (Web) ─── */
.logo-donts-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;margin-top:32px;
}
.ld-item-web{text-align:center}
.ld-card-web{
  height:100px;border-radius:10px;
  background:#fff;border:1px solid var(--gry-l);
  display:flex;align-items:center;justify-content:center;
  position:relative;margin-bottom:8px;
}
.ld-label-web{font-size:11px;color:var(--gry-d);display:flex;align-items:center;justify-content:center;gap:4px}

/* ─── Color Strips (Web) ─── */
.color-strips-web{display:flex;min-height:50vh}
.color-strip-web{
  flex:1;display:flex;flex-direction:column;
  justify-content:space-between;padding:40px 32px;
}
.cs-top{padding-bottom:24px}
.cs-bottom{margin-top:auto}
.cs-name{font-size:13px;font-weight:700;margin-bottom:4px}
.cs-hex{font-family:var(--font-en);font-size:20px;font-weight:700;margin-bottom:4px}
.cs-rgb{font-size:10px;opacity:.6}

/* ─── Color Combinations Grid ─── */
.color-combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.cc-card-web{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.cc-card-top{height:100px;display:flex;align-items:center;justify-content:center}
.cc-card-bottom{display:flex;height:24px}
.cc-card-bottom>div{flex:1}
.cc-card-label{display:block;padding:10px 14px;font-size:10px;font-weight:600;letter-spacing:1px;color:var(--gry-d)}

/* ─── Typography Specimen (Web) ─── */
.typ-specimen{margin-top:32px}
.typ-props-web{display:flex;gap:24px;margin-bottom:32px}
.typ-prop-web{flex:1}
.typ-prop-label{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gry-d);margin-bottom:8px}
.typ-prop-specs{display:flex;flex-wrap:wrap;gap:8px}
.typ-prop-specs span{
  padding:4px 12px;background:var(--gry-xl);
  border-radius:4px;font-size:11px;color:var(--blk);
}
.typ-sample-web{margin-bottom:24px}
.typ-body-web{border-top:1px solid var(--gry-l);padding-top:16px}
.typ-body-web p{font-size:14px;line-height:1.8;color:#555}

/* ─── Typography Rules Grid ─── */
.typ-rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tr-card-web{background:#fff;border-radius:12px;overflow:hidden;padding:16px}
.tr-badge-web{
  display:inline-block;padding:2px 10px;border-radius:4px;
  font-size:10px;font-weight:700;margin-bottom:8px;
}
.tr-badge-web.ng-b{background:#cc0000;color:#fff}
.tr-badge-web.ok-b{background:#227D51;color:#fff}
.tr-vis-web{
  height:80px;border-radius:8px;
  background:#fff;border:1px solid var(--gry-l);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;overflow:hidden;
}
.tr-card-web p{font-size:11px;color:var(--gry-d);line-height:1.5}

/* ─── Typography in Action Grid ─── */
.typ-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.ta-card-web{background:var(--gry-xl);border-radius:12px;padding:24px}
.ta-label{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gry-d);margin-bottom:16px}
.ta-demo{margin-bottom:12px}
.ta-note{font-size:10px;color:var(--gry);border-top:1px solid var(--gry-l);padding-top:8px}

/* ─── Sub-brand Grid (Web) ─── */
.sb-grid-web{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.sb-card-web{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.sb-head-web{padding:24px;color:#fff}
.sb-head-web h3{font-size:18px;font-weight:700;margin-bottom:4px}
.sb-head-web p{font-size:11px;opacity:.7}
.sb-body-web{padding:20px}
.sb-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--gry-xl);font-size:12px}
.sb-lbl{font-weight:700;color:var(--gry-d);min-width:80px;font-size:10px;letter-spacing:1px}
.sb-example{margin-top:12px;padding:12px;background:var(--gry-xl);border-radius:8px;font-size:13px;font-style:italic;color:#555;line-height:1.6}

/* ─── Trainer Competency Cards (Web) ─── */
.tc-card-web{flex:1;background:#fff;border-radius:16px;padding:32px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tc-card-web.ign{border-top:4px solid var(--pri)}
.tc-card-web.cmf{border-top:4px solid var(--sky)}
.tc-header-web h3{font-size:20px;font-weight:700;margin-bottom:4px}
.tc-en-web{font-family:var(--font-en);font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gry-d)}
.tc-desc-web{font-size:13px;line-height:1.8;color:#555;margin:16px 0}
.tc-skills-web{list-style:none;padding:0;margin:0}
.tc-skills-web li{
  padding:8px 0;border-top:1px solid var(--gry-xl);
  font-size:12px;color:var(--blk);
}
.tc-skills-web li::before{content:"→ ";color:var(--pri);font-weight:700}

/* ─── Competency Spectrum (Web) ─── */
.csp-axis-web{
  display:flex;align-items:center;gap:24px;
  margin-top:40px;padding:32px 0;
}
.csp-end-web{text-align:center;flex-shrink:0}
.csp-icon{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;margin:0 auto 8px;
}
.csp-end-title-web{font-size:14px;font-weight:700}
.csp-end-en-web{font-family:var(--font-en);font-size:10px;color:var(--gry-d);letter-spacing:2px}
.csp-line-web{
  flex:1;height:4px;background:linear-gradient(90deg,var(--pri),var(--gry-l),var(--sky));
  border-radius:2px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.csp-marker{
  width:16px;height:16px;background:#fff;border:3px solid var(--blk);
  border-radius:50%;position:absolute;
}
.csp-line-web span{
  position:absolute;top:16px;font-size:10px;color:var(--gry-d);white-space:nowrap;
}

/* ─── Logo Switcher (Starbucks-style) ─── */
.logo-switcher{margin-bottom:16px}
.ls-dots{
  display:flex;gap:10px;
  margin-bottom:24px;
}
.ls-dot{
  width:36px;height:36px;border-radius:50%;
  border:3px solid transparent;
  cursor:pointer;
  transition:border-color .2s,transform .15s;
  position:relative;
  padding:0;
}
.ls-dot::after{
  content:"";display:block;
  width:100%;height:100%;border-radius:50%;
  background:var(--dot-bg);
}
.ls-dot:nth-child(1){--dot-bg:#1C1C1C}
.ls-dot:nth-child(2){--dot-bg:#E2792E}
.ls-dot:nth-child(3){--dot-bg:#FFFFFF;box-shadow:inset 0 0 0 1px #ddd}
.ls-dot:nth-child(4){--dot-bg:#EEEDEB;box-shadow:inset 0 0 0 1px #ccc}
.ls-dot:nth-child(5){--dot-bg:#FFB11B}
.ls-dot.active{border-color:var(--blk);transform:scale(1.1)}
.ls-dot:nth-child(3).active,.ls-dot:nth-child(4).active{border-color:var(--gry-d)}
.ls-dot:hover:not(.active){transform:scale(1.08)}
.ls-preview{
  border-radius:12px;
  height:320px;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .4s ease;
  overflow:hidden;
  border:1px solid var(--gry-l);
}
.ls-logo{
  font-family:var(--font-en);
  font-size:clamp(28px,4vw,48px);
  font-weight:700;
  letter-spacing:6px;
  transition:color .4s ease;
  white-space:nowrap;
}
.ls-illust{
  width:auto;height:55%;
  transition:filter .4s ease;
}

/* ─── Color Page (Starbucks-style) ─── */
.clr-hero{
  padding:clamp(80px,10vw,140px) clamp(40px,6vw,100px);
  background:var(--gry-xl);
  min-height:80vh;
  display:flex;align-items:center;
}
.clr-hero-inner{
  display:flex;gap:clamp(32px,5vw,80px);
  max-width:1100px;width:100%;
}
.clr-hero-label{
  font-family:var(--font-en);
  font-size:15px;font-weight:700;
  color:var(--blk);white-space:nowrap;
  padding-top:12px;min-width:80px;
}
.clr-hero-body{max-width:600px}
.clr-hero-statement{
  font-size:clamp(24px,3.2vw,38px);
  font-weight:400;line-height:1.55;
  color:var(--blk);margin-bottom:24px;
  letter-spacing:.02em;
}
.clr-hero-desc{
  font-size:14px;line-height:1.9;
  color:#666;max-width:480px;
}
.clr-hero-arrow{
  font-size:28px;color:var(--gry);
  margin-top:48px;
}

/* Color sections */
.clr-section{
  padding:clamp(40px,5vw,80px) clamp(40px,6vw,100px);
  background:var(--gry-xl);
}
.clr-section-inner{max-width:1100px;margin:0 auto}
.clr-divider{
  height:2px;background:var(--pri);
  margin-bottom:16px;
}
.clr-section-title{
  font-family:var(--font-en);
  font-size:14px;font-weight:700;
  letter-spacing:3px;color:var(--blk);
  margin-bottom:8px;
}
.clr-section-desc{
  font-size:14px;line-height:1.8;color:#666;
  max-width:560px;margin-bottom:32px;
}

/* Color card grid */
.clr-grid{display:grid;gap:6px;margin-bottom:6px}
.clr-grid-2{grid-template-columns:1.6fr 1fr}
.clr-grid-4{grid-template-columns:1fr 1fr}
.clr-grid-5{grid-template-columns:repeat(5,1fr)}
.clr-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;
}
.clr-card-lg .clr-swatch{min-height:280px}
.clr-swatch{
  flex:1;min-height:180px;
  padding:20px 24px;
  display:flex;align-items:flex-start;
  position:relative;
}
.clr-card-name{
  font-family:var(--font-en);
  font-size:11px;font-weight:700;
  letter-spacing:2.5px;
}
.clr-card-meta{
  background:#fff;padding:12px 24px 16px;
  border-top:1px solid var(--gry-l);
}
.clr-meta-row{
  display:flex;align-items:baseline;gap:12px;
  padding:3px 0;
}
.clr-meta-label{
  font-family:var(--font-en);
  font-size:10px;font-weight:700;
  letter-spacing:1.5px;color:var(--gry-d);
  min-width:32px;
}
.clr-meta-value{
  font-family:var(--font-en);
  font-size:13px;color:var(--blk);
  letter-spacing:.5px;
}

/* ─── Application Label ─── */
.app-label-web{
  position:absolute;top:24px;left:24px;
  font-family:var(--font-en);font-size:10px;font-weight:600;
  letter-spacing:2px;color:var(--gry-d);z-index:2;
}

/* ─── Temperature Table ─── */
.temp-table-web{width:100%;border-collapse:collapse;font-size:12px}
.temp-table-web th{
  text-align:left;padding:8px 12px;font-size:10px;font-weight:700;
  letter-spacing:1px;color:var(--gry-d);border-bottom:2px solid var(--gry-l);
}
.temp-table-web td{padding:10px 12px;border-bottom:1px solid var(--gry-xl)}
.temp-table-web .temp-val{font-family:var(--font-en);font-weight:700;color:var(--pri)}

/* ─── Photography Page (Starbucks-style) ─── */
.photo-grid{
  display:grid;gap:4px;
  border:1px solid #ddd;overflow:hidden;
}
.photo-grid img{width:100%;height:100%;object-fit:cover;display:block}
.photo-grid-2{grid-template-columns:1.5fr 1fr}
.photo-grid-3{grid-template-columns:1fr 1fr 1fr}
.photo-grid-2e{grid-template-columns:1fr 1fr}
.photo-grid-item{min-height:320px;overflow:hidden;position:relative}
.photo-grid-item.tall{min-height:420px}
.photo-grid-item img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:cover;
}
.photo-usage{
  display:grid;grid-template-columns:220px 1fr;
  border:1px solid #ddd;border-top:none;
}
.photo-usage-left{
  padding:28px 32px;
  border-right:1px solid #ddd;
}
.photo-usage-label{
  font-family:var(--font-en);
  font-size:11px;font-weight:700;
  letter-spacing:2px;color:var(--blk);
  margin-bottom:20px;
}
.photo-usage-tag{
  font-family:var(--font-en);
  font-size:10px;font-weight:700;
  letter-spacing:1.5px;color:var(--gry-d);
  text-align:center;
  padding:3px 0;
}
.photo-usage-right{padding:28px 32px}
.photo-usage-right h4{
  font-size:15px;font-weight:700;
  margin-bottom:8px;color:var(--blk);
}
.photo-usage-right p{
  font-size:14px;line-height:1.9;color:#555;
}
.photo-usage-right ul{
  list-style:none;padding:0;margin:12px 0 0;
}
.photo-usage-right li{
  font-size:13px;line-height:1.8;color:#555;
  padding-left:16px;position:relative;
}
.photo-usage-right li::before{
  content:"—";position:absolute;left:0;color:var(--gry);
}
.photo-desc{
  font-size:14px;line-height:1.9;
  color:#555;max-width:640px;
  margin-bottom:32px;
}

/* ─── Voice Page (Starbucks-style) ─── */
.voc-divider{
  font-family:var(--font-en);
  font-size:12px;font-weight:700;
  letter-spacing:3px;color:var(--blk);
  padding:20px 0;
  border-top:1px solid var(--blk);
  border-bottom:1px solid var(--blk);
  margin-bottom:48px;
}
.voc-compare{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid #ddd;
}
.voc-compare-col + .voc-compare-col{border-left:1px solid #ddd}
.voc-compare-header{
  padding:32px 40px 28px;
  background:var(--pri-light);
  border-bottom:1px solid #ddd;
}
.voc-compare-header h3{
  font-size:clamp(22px,2.5vw,30px);
  font-weight:400;color:var(--blk);
}
.voc-compare-body{padding:32px 40px}
.voc-compare-body p{font-size:14px;line-height:1.9;color:#555}
.voc-examples-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px 40px;
}
.voc-example-label{
  font-family:var(--font-en);
  font-size:11px;font-weight:700;
  letter-spacing:3px;color:var(--blk);
  margin-bottom:16px;
}
.voc-example-card{
  border:1px solid #ddd;background:#fff;
  min-height:260px;display:flex;
  flex-direction:column;justify-content:center;
  overflow:hidden;
}
.voc-example-card .vec-inner{padding:32px 36px}
.voc-example-card .vec-dark{
  background:var(--blk);color:#fff;
  padding:32px 36px;min-height:260px;
  display:flex;flex-direction:column;justify-content:center;
}
.voc-example-card .vec-orange{
  background:var(--pri);color:#fff;
  padding:32px 36px;min-height:260px;
  display:flex;flex-direction:column;justify-content:center;
}
.voc-example-card .vec-light{
  background:var(--gry-xl);
  padding:32px 36px;min-height:260px;
  display:flex;flex-direction:column;justify-content:center;
}

/* ─── UI Design Page ─── */
.ui-demo-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:24px;margin:32px 0;
}
.ui-demo-card{
  border:1px solid #ddd;border-radius:12px;overflow:hidden;
}
.ui-demo-card-header{
  padding:12px 20px;font-family:var(--font-en);
  font-size:11px;font-weight:700;letter-spacing:2px;
  display:flex;align-items:center;gap:8px;
}
.ui-demo-card-header.do{background:#eef7f0;color:#227D51;border-bottom:2px solid #227D51}
.ui-demo-card-header.dont{background:#fef0f0;color:#cc0000;border-bottom:2px solid #cc0000}
.ui-demo-card-body{
  padding:32px 24px;background:#fff;
  min-height:220px;display:flex;align-items:center;justify-content:center;
}
.ui-rule-num{
  font-family:var(--font-en);font-size:11px;font-weight:700;
  letter-spacing:1px;color:var(--pri);margin-bottom:4px;
}
.ui-rule-title{
  font-size:20px;font-weight:700;line-height:1.4;margin-bottom:12px;
}
.ui-rule-desc{font-size:14px;line-height:1.9;color:#555;max-width:640px;margin-bottom:0}
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-en);font-size:12px;font-weight:700;
  letter-spacing:1px;border-radius:6px;
  padding:12px 28px;cursor:default;white-space:nowrap;
}
.ui-btn-pri{background:var(--pri);color:#fff;border:2px solid var(--pri)}
.ui-btn-sec{background:transparent;color:var(--pri);border:2px solid var(--pri)}
.ui-btn-ter{background:transparent;color:var(--pri);border:2px solid transparent}
.ui-contrast-row{
  display:flex;align-items:center;gap:16px;
  padding:14px 20px;border-radius:8px;margin-bottom:8px;
}
.ui-contrast-text{flex:1;font-size:14px;font-weight:700}
.ui-contrast-ratio{
  font-family:var(--font-en);font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:4px;
}
.ui-contrast-ratio.pass{background:#eef7f0;color:#227D51}
.ui-contrast-ratio.fail{background:#fef0f0;color:#cc0000}
.ui-spacing-box{
  display:flex;flex-direction:column;gap:0;width:100%;
}
.ui-spacing-item{
  padding:12px 16px;background:var(--gry-xl);
  border:1px solid var(--gry-l);font-size:12px;color:var(--blk);
}
.ui-spacing-gap{
  font-family:var(--font-en);font-size:9px;font-weight:700;
  color:var(--pri);text-align:center;padding:2px 0;
  background:repeating-linear-gradient(90deg,var(--pri) 0,var(--pri) 4px,transparent 4px,transparent 8px);
  background-size:100% 1px;background-repeat:no-repeat;
  background-position:center;line-height:1;
}
.ui-spacing-gap span{background:#fff;padding:0 6px}

/* ─── Illustration In Use Grid ─── */
.ill-use-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.ill-use-item{text-align:center}
.ill-use-card{
  border-radius:10px;overflow:hidden;
  position:relative;
  aspect-ratio:1;
  border:1px solid var(--gry-l);
}
.ill-use-label{
  font-family:var(--font-en);font-size:9px;font-weight:700;
  letter-spacing:1.5px;color:var(--gry-d);
  margin-top:10px;
}

/* ─── Illustration Page (Starbucks-style) ─── */
.ill-style-box{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;border:1px solid #ddd;
}
.ill-style-col{padding:40px}
.ill-style-col + .ill-style-col{border-left:1px solid #ddd}
.ill-style-badge{
  font-family:var(--font-en);font-size:10px;font-weight:700;
  letter-spacing:2px;padding:5px 16px;
  border:1px solid var(--blk);border-radius:20px;
  display:inline-block;margin-bottom:20px;
}
.ill-style-showcase{
  display:flex;gap:20px;flex-wrap:wrap;
  align-items:center;justify-content:center;
  min-height:180px;padding:24px;
  background:var(--gry-xl);border-radius:8px;
  margin-bottom:20px;
}
.ill-style-showcase img.ico-prev{width:36px;height:36px}
.ill-style-showcase img.ill-prev{width:100px;height:auto}
.ill-style-desc{font-size:14px;line-height:1.9;color:#555}
.ill-style-specs{
  margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;
}
.ill-style-specs span{
  font-family:var(--font-en);font-size:10px;font-weight:600;
  letter-spacing:1px;padding:4px 12px;
  background:var(--gry-xl);border-radius:4px;color:var(--gry-d);
}
.ill-cat-header{
  font-family:var(--font-en);font-size:11px;font-weight:700;
  letter-spacing:2px;color:var(--gry-d);
  padding:12px 0;border-bottom:1px solid var(--gry-l);
  margin-top:40px;margin-bottom:16px;
}
.ill-cat-header:first-of-type{margin-top:0}
.ill-icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:4px;
}
.ill-icon-cell{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:12px 4px 8px;border-radius:6px;
  transition:background .2s;
}
.ill-icon-cell:hover{background:var(--gry-xl)}
.ill-icon-cell img{width:32px;height:32px}
.ill-icon-cell span{
  font-size:8px;color:var(--gry-d);text-align:center;
  line-height:1.2;max-width:72px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.ill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
.ill-card{
  display:flex;flex-direction:column;align-items:center;
  padding:20px 12px 12px;background:#fff;
  border:1px solid var(--gry-l);border-radius:8px;
  transition:box-shadow .2s,transform .15s;
}
.ill-card:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.ill-card img{width:100%;max-width:140px;height:auto;margin-bottom:10px}
.ill-card span{
  font-size:9px;color:var(--gry-d);text-align:center;
  line-height:1.3;
}

/* ─── Responsive ─── */
@media(max-width:1024px){
  .hero{padding:60px 40px}
  .hero-content{margin-left:35vw}
  .section-block,.philosophy-section,.contents-grid-section,.site-footer{padding-left:40px;padding-right:40px}
  .contents-label{display:none}
  main{margin-right:0}
}
@media(max-width:768px){
  .hero-circle{width:80vw;height:80vw;left:-20vw}
  .hero-content{margin-left:30vw;max-width:none}
  .two-col,.dir-cards,.ld-grid,.sb-grid,.tc-cards,.arch-cards{flex-direction:column}
  .dir-cards,.ld-grid,.sb-grid{grid-template-columns:1fr}
  .vmv-block{flex-direction:column}
  .vmv-photo-col{min-height:300px}
  .logo-showcase{flex-direction:column}
  .illust-spread{flex-direction:column}
  .color-strips{flex-direction:column}
  .app-gallery{grid-template-columns:1fr}
  .dd-grid{grid-template-columns:1fr}
  .nav-overlay .nav-links a{font-size:32px}
  .nav-overlay .nav-links{padding-left:20px}
  /* Web section pages */
  .clr-hero-inner{flex-direction:column;gap:16px}
  .clr-hero-label{padding-top:0}
  .clr-grid-2,.clr-grid-4{grid-template-columns:1fr}
  .clr-grid-5{grid-template-columns:repeat(2,1fr)}
  .clr-card-lg .clr-swatch{min-height:200px}
  .color-strips-web{flex-direction:column}
  .color-strip-web{min-height:200px}
  .logo-donts-grid{grid-template-columns:repeat(2,1fr)}
  .dd-grid-web{grid-template-columns:1fr}
  .color-combo-grid{grid-template-columns:1fr}
  .typ-rules-grid{grid-template-columns:1fr}
  .typ-action-grid{grid-template-columns:1fr}
  .sb-grid-web{grid-template-columns:1fr}
  .typ-props-web{flex-direction:column}
  .csp-axis-web{flex-direction:column;gap:16px}
  .csp-line-web{width:100%;height:4px;min-height:4px}
  .section-hero-title{font-size:clamp(36px,10vw,72px)}
  .voc-compare{grid-template-columns:1fr}
  .voc-compare-col + .voc-compare-col{border-left:none;border-top:1px solid #ddd}
  .voc-examples-grid{grid-template-columns:1fr}
  .photo-grid-2,.photo-grid-3,.photo-grid-2e{grid-template-columns:1fr}
  .photo-grid-item{min-height:240px}
  .photo-grid-item.tall{min-height:280px}
  .photo-usage{grid-template-columns:1fr}
  .photo-usage-left{border-right:none;border-bottom:1px solid #ddd}
  .footer-nav{grid-template-columns:repeat(2,1fr);gap:0 24px}
  .footer-info-row{flex-direction:column;gap:4px}
  .footer-info-value{text-align:left}
  .ill-style-box{grid-template-columns:1fr}
  .ill-style-col + .ill-style-col{border-left:none;border-top:1px solid #ddd}
  .ill-icon-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .ill-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .ill-use-grid{grid-template-columns:repeat(2,1fr)}
  .ui-demo-row{grid-template-columns:1fr}
}