/* SCALE corporate — provisional demo. Brand: black base / warm accent / white.
   Tone: quiet, refined, premium. (c) SCALE Inc. */
:root{
  --bg:#0d0d0f; --bg-2:#141418; --bg-3:#1a1a1f;
  --fg:#f4f3f1; --muted:#9b9ba1; --faint:#6c6c72;
  --accent:#c97a52; --accent-soft:rgba(201,122,82,.14);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --maxw:1140px; --pad:clamp(20px,5vw,40px);
  --sec:clamp(80px,13vh,168px);
  --r:14px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
  font-weight:400;line-height:1.85;letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(56px,8vh,96px)}
.divider{height:1px;background:var(--line-2);border:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:700;line-height:1.32;letter-spacing:.01em}
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:26px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);opacity:.7}
.h-xl{font-size:clamp(2.3rem,5.6vw,4.3rem);line-height:1.22;letter-spacing:.005em}
.h-lg{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.3}
.h-md{font-size:clamp(1.25rem,2.2vw,1.6rem)}
.lead{font-size:clamp(1rem,1.5vw,1.18rem);color:var(--fg);line-height:1.95}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.en{font-family:"Noto Sans JP",sans-serif;letter-spacing:.06em}
p+p{margin-top:1em}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.btn{
  --bd:var(--line);
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 28px;border-radius:999px;font-size:.92rem;font-weight:700;
  letter-spacing:.04em;border:1px solid var(--bd);
  transition:.45s var(--ease);white-space:nowrap;
}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#1a1109}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.btn--block{width:100%;justify-content:center;padding-block:18px}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;transition:.5s var(--ease)}
.hd::after{content:"";position:absolute;inset:0;background:rgba(11,11,13,.92);
  backdrop-filter:blur(14px);opacity:0;transition:.5s var(--ease);z-index:-1;
  border-bottom:1px solid transparent}
.hd.is-stuck::after{opacity:1;border-bottom-color:var(--line-2)}
.hd-in{display:flex;align-items:center;justify-content:space-between;
  height:84px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  transition:height .5s var(--ease)}
.hd.is-stuck .hd-in{height:68px}
.logo{font-size:1.32rem;font-weight:700;letter-spacing:.26em;padding-left:.26em}
.logo span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
.nav a{font-size:.86rem;font-weight:500;letter-spacing:.08em;color:var(--muted);
  transition:color .3s;position:relative;padding-block:6px}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}
.nav a:not(.nav-login)::after{content:"";position:absolute;left:0;right:100%;bottom:0;
  height:1px;background:var(--accent);transition:right .4s var(--ease)}
.nav a:not(.nav-login):hover::after{right:0}
.nav-login{display:inline-flex;align-items:center;gap:8px;color:var(--fg)!important;
  border:1px solid var(--line);padding:9px 20px;border-radius:999px;letter-spacing:.06em}
.nav-login:hover{border-color:var(--accent);color:var(--accent)!important}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);
  border-radius:50%;background:none;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;width:20px;height:1.5px;background:var(--fg);
  transition:.4s var(--ease)}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:24px}
.is-open .burger i:nth-child(1){top:20px;transform:rotate(45deg)}
.is-open .burger i:nth-child(2){top:20px;transform:rotate(-45deg)}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:45;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:var(--pad);transform:translateY(-100%);transition:transform .6s var(--ease);
  visibility:hidden}
.is-open .mnav{transform:none;visibility:visible}
.mnav a{font-size:1.7rem;font-weight:700;letter-spacing:.04em;padding:14px 0;
  border-bottom:1px solid var(--line-2);color:var(--fg);
  display:flex;justify-content:space-between;align-items:center}
.mnav a small{font-size:.7rem;color:var(--faint);letter-spacing:.2em;font-weight:500}
.mnav a .accent{color:var(--accent)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;
  padding-top:140px;padding-bottom:120px;overflow:hidden}
.hero::before{content:"";position:absolute;width:120vmax;height:120vmax;
  right:-40vmax;top:-46vmax;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 62%);
  pointer-events:none}
.hero h1{margin:6px 0 30px;max-width:18ch}
.hero .lead{max-width:42ch;color:var(--muted)}
.hero .sub{margin-top:26px;max-width:46ch;color:var(--faint);font-size:.96rem}
.mark{position:relative;white-space:nowrap}
.mark::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;
  height:.34em;background:var(--accent);opacity:.28;z-index:-1;border-radius:2px}
.scrolldown{position:absolute;left:var(--pad);bottom:34px;font-size:.7rem;
  letter-spacing:.28em;color:var(--faint);display:flex;align-items:center;gap:12px}
.scrolldown::after{content:"";width:1px;height:46px;background:linear-gradient(var(--faint),transparent);
  animation:sd 2.4s var(--ease) infinite}
@keyframes sd{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- generic blocks ---------- */
.grid{display:grid;gap:clamp(22px,3vw,40px)}
.lead-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.sec-head{max-width:60ch}
.sec-head .h-lg{margin-top:4px}
.sec-head p{margin-top:22px;color:var(--muted)}

.ph{position:relative;background:linear-gradient(135deg,var(--bg-2),var(--bg-3));
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;inset:0;display:grid;
  place-items:center;font-size:.7rem;letter-spacing:.24em;color:var(--faint);
  text-transform:uppercase}
.ph--16x9{aspect-ratio:16/9}.ph--4x3{aspect-ratio:4/3}.ph--1x1{aspect-ratio:1/1}
.ph--tall{aspect-ratio:3/4}

/* values */
.values{display:grid;gap:0;margin-top:54px;border-top:1px solid var(--line-2)}
.value{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(16px,3vw,48px);padding:42px 0;border-bottom:1px solid var(--line-2);
  align-items:start}
.value .no{font-size:1rem;color:var(--accent);font-weight:700;letter-spacing:.1em}
.value h3{font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:.06em}
.value .jp{color:var(--accent);font-size:.92rem;margin-top:10px;font-weight:500}
.value p{color:var(--muted);font-size:.97rem}

/* business cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px);margin-top:56px}
.card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(28px,3.4vw,46px);transition:.5s var(--ease)}
.card:hover{border-color:var(--line);transform:translateY(-4px)}
.card .no{font-size:.78rem;letter-spacing:.2em;color:var(--faint)}
.card h3{font-size:clamp(1.3rem,2vw,1.7rem);margin:14px 0 6px}
.card .en{color:var(--muted);font-size:.82rem;letter-spacing:.14em}
.card .catch{color:var(--accent);font-weight:700;margin:22px 0 14px;font-size:1.05rem}
.card .lbl{font-size:.74rem;letter-spacing:.16em;color:var(--faint);margin-top:20px;text-transform:uppercase}
.card p{color:var(--muted);font-size:.93rem;margin-top:6px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{font-size:.74rem;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px}

/* members */
.members{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);margin-top:54px}
.member .ph{margin-bottom:26px}
.member .role{font-size:.78rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.member h3{font-size:1.4rem;margin:10px 0 4px}
.member .romaji{color:var(--faint);font-size:.82rem;letter-spacing:.12em}
.member p{color:var(--muted);margin-top:18px;font-size:.95rem}

/* spec table */
.spec{margin-top:46px;border-top:1px solid var(--line-2)}
.spec dl{display:grid;grid-template-columns:200px 1fr;gap:0;
  border-bottom:1px solid var(--line-2)}
.spec dt{padding:20px 0;font-size:.86rem;color:var(--faint);letter-spacing:.08em}
.spec dd{padding:20px 0;color:var(--fg);font-size:.95rem}

/* work-at / list items */
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);margin-top:54px}
.item{border:1px solid var(--line-2);border-radius:var(--r);padding:clamp(26px,3vw,40px);
  background:var(--bg-2)}
.item .no{color:var(--accent);font-weight:700;letter-spacing:.14em;font-size:.85rem}
.item h3{font-size:1.18rem;margin:14px 0 12px;line-height:1.5}
.item p{color:var(--muted);font-size:.93rem}
.checklist{margin-top:50px;display:grid;gap:2px}
.checklist li{list-style:none;display:flex;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--line-2);font-size:clamp(1rem,1.6vw,1.2rem)}
.checklist li::before{content:"—";color:var(--accent)}
.positions{margin-top:50px;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,32px)}
.pos h3{font-size:.8rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;
  padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:18px}
.pos ul{list-style:none;display:grid;gap:10px}
.pos li{color:var(--muted);font-size:.95rem}

/* cta cards */
.cta-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,26px);margin-top:56px}
.cta-card{border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(34px,4vw,60px);background:linear-gradient(160deg,var(--bg-2),var(--bg));
  transition:.5s var(--ease)}
.cta-card:hover{border-color:var(--line)}
.cta-card .sub{font-size:.76rem;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.cta-card h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:18px 0 14px}
.cta-card p{color:var(--muted);font-size:.95rem;margin-bottom:30px}

/* ---------- contact form ---------- */
.form{margin-top:8px;display:grid;gap:26px;max-width:680px}
.field label{display:block;font-size:.82rem;letter-spacing:.1em;color:var(--muted);
  margin-bottom:10px}
.field label .req{color:var(--accent);margin-left:6px;font-size:.7rem}
.field input,.field textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:15px 18px;color:var(--fg);font:inherit;font-size:.96rem;
  transition:border-color .3s}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:150px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.chk{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:999px;padding:11px 20px;cursor:pointer;font-size:.9rem;
  color:var(--muted);transition:.3s}
.chk:hover{border-color:rgba(255,255,255,.26)}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.note{color:var(--faint);font-size:.82rem;margin-top:6px}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line-2);padding-block:clamp(56px,8vh,90px) 40px}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
.ft .logo{font-size:1.5rem;margin-bottom:24px;display:inline-block}
.ft-catch{font-size:1.05rem;line-height:1.9;font-weight:700}
.ft-catch span{color:var(--muted);font-weight:400;font-size:.92rem;display:block;margin-top:10px}
.ft h4{font-size:.74rem;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;margin-bottom:20px}
.ft ul{list-style:none;display:grid;gap:13px}
.ft ul a,.ft address{color:var(--muted);font-size:.92rem;font-style:normal;transition:color .3s}
.ft ul a:hover{color:var(--fg)}
.ft-btm{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:16px;margin-top:clamp(48px,7vh,80px);padding-top:30px;border-top:1px solid var(--line-2)}
.ft-btm small{color:var(--faint);font-size:.8rem;letter-spacing:.04em}
.ft-tag{color:var(--accent);font-size:.78rem;letter-spacing:.18em}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .scrolldown::after{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .lead-grid{grid-template-columns:1fr;gap:20px}
  .cards,.members,.items,.positions,.cta-cards{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-top>div:first-child{grid-column:1/-1}
  .value{grid-template-columns:56px 1fr;row-gap:8px}
  .value p{grid-column:1/-1}
  .spec dl{grid-template-columns:130px 1fr}
}
@media (max-width:720px){
  .nav{display:none}
  .burger{display:block}
  .hero{padding-top:120px}
  .ft-top{grid-template-columns:1fr}
}