/* =========================================================
   RAY Inc. — Company HP  |  KOZ-STYLE × NEON PINK (dark cinematic)
   Divisions: RAY WORKS (client) / RAY ENTERTAINMENT (IP)
   ========================================================= */

:root{
  --bg:#08080a;
  --panel:#0e0e12;
  --ink:#f2f2f5;
  --sub:#9a9aa4;
  --mute:#63636e;
  --line:rgba(255,255,255,.13);
  --line-soft:rgba(255,255,255,.07);
  --pink:#ff1e8c;
  --pink2:#ff5cae;

  --disp:"Bebas Neue",sans-serif;
  --sans:"Archivo","Helvetica Neue",sans-serif;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  --container:1300px;
  --gutter:34px;
  --easing:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--jp); line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--pink); color:#0a0a0a; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* film grain */
.grain{ position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* helpers */
.eyebrow{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.2em; color:var(--pink); text-transform:uppercase; display:inline-flex; align-items:center; gap:12px; }
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--pink); box-shadow:0 0 10px var(--pink); }
.h-display{ font-family:var(--disp); font-weight:400; text-transform:uppercase; line-height:.86; letter-spacing:.005em; }
.pink{ color:var(--pink); }

/* reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--easing), transform 1s var(--easing); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

/* =========================================================
   Header
   ========================================================= */
.header{ position:fixed; top:0; left:0; width:100%; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:22px var(--gutter); transition:background .4s var(--easing), padding .4s var(--easing), border-color .4s; border-bottom:1px solid transparent; }
.header.is-scrolled{ background:rgba(8,8,10,.78); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); padding:14px var(--gutter); border-bottom:1px solid var(--line-soft); }
.header__logo{ display:flex; align-items:center; gap:10px; }
.header__logo img{ height:26px; width:auto; }
.header.is-scrolled .header__logo img{ height:23px; }
.header__nav{ display:flex; align-items:center; gap:28px; }
.header__nav a{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.16em; color:var(--ink); text-transform:uppercase; position:relative; padding:4px 0; }
.header__nav a:not(.header__cta)::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--pink); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--easing); }
.header__nav a:not(.header__cta):hover::after{ transform:scaleX(1); transform-origin:left; }
.header__cta{ color:var(--pink) !important; }
.header__toggle{ display:none; }

/* =========================================================
   Hero (cinematic full-bleed)
   ========================================================= */
.hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; display:flex; align-items:flex-end; }
.hero__img{ position:absolute; inset:0; z-index:0; }
.hero__img img{ width:100%; height:100%; object-fit:cover; object-position:center 26%; filter:contrast(1.06) saturate(.92) brightness(.82); }
.hero__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,8,10,.96),rgba(8,8,10,.15) 46%,rgba(8,8,10,.5)); }
.hero__glow{ position:absolute; z-index:1; left:-8%; bottom:-14%; width:60%; height:60%; background:radial-gradient(circle at 30% 70%,rgba(255,30,140,.5),transparent 66%); filter:blur(50px); mix-blend-mode:screen; pointer-events:none; }
.hero__in{ position:relative; z-index:2; width:100%; padding:0 var(--gutter) 7vh; }
.hero__eye{ margin-bottom:20px; }
.hero__h{ font-family:var(--disp); font-size:clamp(60px,13.5vw,210px); line-height:.92; text-transform:uppercase; letter-spacing:.015em; margin:0; }
.hero__sub{ font-family:var(--jp); font-weight:900; font-size:clamp(16px,2.4vw,30px); margin:22px 0 0; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:30px; z-index:3; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.24em; color:var(--sub); writing-mode:vertical-rl; }

/* =========================================================
   Marquee
   ========================================================= */
.marquee{ background:var(--pink); color:#0a0a0a; overflow:hidden; padding:12px 0; }
.marquee__track{ display:flex; width:max-content; animation:mq 22s linear infinite; }
.marquee__track:hover{ animation-play-state:paused; }
.marquee__item{ font-family:var(--disp); font-size:clamp(18px,2.6vw,34px); text-transform:uppercase; white-space:nowrap; display:inline-flex; }
.marquee__item span{ padding:0 .5em; }
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========================================================
   Sections
   ========================================================= */
.section{ padding:clamp(80px,11vw,150px) 0; position:relative; }
.section--line{ border-top:1px solid var(--line); }
.section--panel{ background:var(--panel); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

.sec-head{ margin-bottom:6px; }
.sec-title{ font-family:var(--disp); font-size:clamp(48px,8.5vw,128px); line-height:.94; text-transform:uppercase; letter-spacing:.015em; margin:14px 0 0; }
.sec-brand{ font-family:var(--sans); font-weight:800; font-size:13px; letter-spacing:.14em; color:var(--sub); margin-top:14px; }
.sec-brand b{ color:var(--pink); }
.lead{ font-family:var(--jp); font-weight:700; font-size:15px; color:var(--sub); max-width:34em; margin-top:20px; line-height:2; }
.lead strong{ color:var(--ink); }
.body-text{ font-size:15px; color:var(--sub); line-height:2.15; margin:22px 0 0; max-width:40em; }
.body-text strong{ color:var(--ink); }

/* statement */
.statement{ font-family:var(--jp); font-weight:900; font-size:clamp(20px,3vw,40px); line-height:1.6; letter-spacing:.02em; margin:0; max-width:20em; }
.statement .pink{ color:var(--pink); }
.statement--tilt{ display:inline-block; transform-origin:0 50%; }
.statement--tilt.reveal{ transform:translateY(26px) rotate(-3.5deg); }
.statement--tilt.reveal.is-in{ transform:rotate(-3.5deg); }

/* =========================================================
   Business pillars diagram (WORKS <-> ENTERTAINMENT)
   ========================================================= */
.pillars{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; margin-top:44px; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.pillar{ padding:clamp(28px,4vw,48px); background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); }
.pillar__no{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.16em; color:var(--pink); }
.pillar__en{ font-family:var(--disp); font-size:clamp(26px,3.6vw,48px); text-transform:uppercase; line-height:1; letter-spacing:.01em; margin:12px 0 6px; }
.pillar__jp{ font-family:var(--jp); font-weight:900; font-size:16px; color:var(--ink); }
.pillar__d{ font-size:13px; color:var(--sub); margin-top:12px; line-height:1.8; }
.pillars__loop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 clamp(18px,3vw,40px); border-left:1px solid var(--line); border-right:1px solid var(--line); background:rgba(255,30,140,.05); }
.pillars__loop-icon{ font-size:clamp(34px,4vw,52px); color:var(--pink); text-shadow:0 0 20px rgba(255,30,140,.65); animation:spin 9s linear infinite; }
.pillars__loop-label{ font-family:var(--sans); font-weight:800; font-size:10px; letter-spacing:.1em; color:var(--sub); text-align:center; line-height:1.5; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .pillars__loop-icon{ animation:none; } }
@media (max-width:760px){
  .pillars{ grid-template-columns:1fr; }
  .pillars__loop{ flex-direction:row; gap:14px; padding:14px; border-left:0; border-right:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
}

/* =========================================================
   Artist feature (RAY ENTERTAINMENT)
   ========================================================= */
.feature{ position:relative; height:78vh; min-height:520px; overflow:hidden; display:flex; align-items:flex-end; margin-top:52px; border:1px solid var(--line); }
.feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 24%; filter:contrast(1.05) brightness(.9); transition:transform 1.6s var(--easing); }
.feature:hover img{ transform:scale(1.04); }
.feature::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,8,10,.92),transparent 55%); z-index:1; }
.feature__in{ position:relative; z-index:2; padding:44px; }
.feature__cat{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.16em; color:var(--pink); }
.feature__n{ font-family:var(--sans); font-weight:800; font-size:clamp(34px,6vw,74px); line-height:1; letter-spacing:-.01em; text-transform:none; margin-top:8px; }
.feature__branch{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--pink); display:inline-block; margin-bottom:12px; }
/* feature nested inside a label card */
.feature--in-card{ margin-top:0; border:0; border-radius:0; height:clamp(320px,50vh,540px); }
.feature__arrow{ font-family:var(--sans); font-size:.34em; font-weight:800; color:var(--pink); vertical-align:super; margin-left:.1em; transition:transform .4s var(--easing); display:inline-block; }
a.feature:hover .feature__arrow{ transform:translate(4px,-4px); }
a.feature{ cursor:pointer; }
.feature__d{ font-family:var(--jp); font-weight:700; font-size:14px; color:var(--sub); margin-top:10px; }

.thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.thumb{ position:relative; overflow:hidden; border:1px solid var(--line); }
.thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; filter:contrast(1.05) brightness(.86); transition:transform 1.1s var(--easing), filter .5s; }
.thumb:hover img{ transform:scale(1.05); filter:contrast(1.05) brightness(1); }
.thumb__l{ position:absolute; left:16px; bottom:14px; z-index:2; font-family:var(--sans); font-weight:800; font-size:10px; letter-spacing:.14em; color:#fff; }

/* projects list (label / group) */
.projects{ margin-top:44px; border-top:1px solid var(--line); }
.project-row{ display:grid; grid-template-columns:70px 1fr auto; gap:clamp(16px,3vw,40px); align-items:baseline; padding:26px 4px; border-bottom:1px solid var(--line); transition:padding-left .5s var(--easing); }
.project-row:hover{ padding-left:14px; }
.project-row .pnum{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--pink); }
.project-row .pname{ font-family:var(--sans); font-weight:800; font-size:clamp(20px,2.6vw,32px); letter-spacing:-.01em; text-transform:none; line-height:1.1; }
.project-row .pdesc{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--mute); text-align:right; line-height:1.8; }
.project-sub{ display:grid; grid-template-columns:70px 1fr auto; gap:clamp(16px,3vw,40px); align-items:baseline; padding:18px 4px; border-bottom:1px solid var(--line); }
.project-sub .pbranch{ color:var(--pink); font-size:15px; text-align:right; }
.project-sub .psub-name{ font-family:var(--sans); font-weight:800; font-size:clamp(16px,1.9vw,23px); letter-spacing:-.01em; line-height:1.1; }
.project-sub .psub-desc{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--mute); text-align:right; line-height:1.8; }

/* =========================================================
   Label card (marshmallow records + roster)
   ========================================================= */
.label-card{ margin-top:48px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }
.label-card__top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(16px,3vw,30px); padding:clamp(26px,3.6vw,40px); position:relative; }
.label-card__top::after{ content:""; position:absolute; left:clamp(26px,3.6vw,40px); right:clamp(26px,3.6vw,40px); bottom:0; height:1px; background:var(--line); }
.label-card__tag{ font-family:var(--sans); font-weight:800; font-size:10px; letter-spacing:.18em; color:#0a0a0a; background:linear-gradient(90deg,var(--pink),var(--pink2)); padding:7px 13px; border-radius:999px; box-shadow:0 0 20px rgba(255,30,140,.45); white-space:nowrap; }
.label-card__name{ font-family:var(--sans); font-weight:800; font-size:clamp(22px,2.9vw,38px); letter-spacing:-.015em; }
.label-card__desc{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.04em; color:var(--mute); text-align:right; white-space:nowrap; }
.label-card__roster{ padding:10px clamp(20px,3vw,34px) clamp(16px,2vw,22px); }
.roster{ display:flex; align-items:center; gap:18px; position:relative; padding:22px 12px 22px 44px; border-radius:8px; transition:background .45s var(--easing), padding-left .45s var(--easing); }
.roster::before{ content:""; position:absolute; left:14px; top:-11px; bottom:50%; width:20px; border-left:1.5px solid rgba(255,30,140,.55); border-bottom:1.5px solid rgba(255,30,140,.55); border-bottom-left-radius:9px; }
.roster:hover{ background:rgba(255,30,140,.07); padding-left:52px; }
.roster__name{ font-family:var(--sans); font-weight:800; font-size:clamp(19px,2.3vw,28px); letter-spacing:-.01em; }
.roster__role{ font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.1em; color:var(--mute); }
.roster__cta{ margin-left:auto; font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.12em; color:var(--pink); display:inline-flex; align-items:center; gap:6px; opacity:.7; transition:opacity .35s, transform .35s var(--easing); }
.roster__cta span{ transition:transform .35s var(--easing); }
.roster:hover .roster__cta{ opacity:1; }
.roster:hover .roster__cta span{ transform:translate(3px,-3px); }
@media (max-width:640px){
  .label-card__top{ grid-template-columns:auto 1fr; }
  .label-card__desc{ grid-column:1 / -1; text-align:left; white-space:normal; }
  .roster{ flex-wrap:wrap; gap:6px 14px; }
  .roster__cta{ margin-left:0; width:100%; margin-top:6px; }
}

/* =========================================================
   Solution / Works (RAY WORKS)
   ========================================================= */
.sol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); margin-top:50px; }
.sol-card{ padding:clamp(30px,4vw,48px); border-right:1px solid var(--line); }
.sol-card:last-child{ border-right:0; }
.sol-card__no{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.16em; color:var(--pink); }
.sol-card__t{ font-family:var(--disp); font-size:clamp(28px,3vw,38px); text-transform:uppercase; margin:10px 0 4px; }
.sol-card__j{ font-family:var(--jp); font-weight:900; font-size:16px; color:var(--sub); margin-bottom:22px; }
.sol-card__l{ list-style:none; padding:0; margin:0; }
.sol-card__l li{ padding:14px 0 14px 20px; border-top:1px solid var(--line); font-size:14px; color:var(--sub); position:relative; line-height:1.8; }
.sol-card__l li::before{ content:""; position:absolute; left:0; top:21px; width:8px; height:2px; background:var(--pink); }
.note{ margin:40px 0 0; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--mute); text-align:center; }

/* case */
.cases{ margin-top:50px; border-top:1px solid var(--line); }
.case{ display:grid; grid-template-columns:110px 1fr; gap:clamp(20px,4vw,56px); padding:clamp(26px,3vw,42px) 0; border-bottom:1px solid var(--line); }
.case__no{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.16em; color:var(--pink); padding-top:4px; }
.case__row{ display:grid; grid-template-columns:70px 1fr; gap:18px; padding:8px 0; font-size:14px; }
.case__row .k{ font-family:var(--sans); font-weight:800; font-size:10px; letter-spacing:.14em; color:var(--mute); padding-top:4px; }
.case__row .v{ color:var(--sub); line-height:1.85; }

/* profile table */
.profile{ margin:0; border-top:1px solid var(--line); }
.profile__row{ display:grid; grid-template-columns:160px 1fr; gap:24px; padding:22px 4px; border-bottom:1px solid var(--line-soft); }
.profile__row dt{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.12em; color:var(--mute); padding-top:4px; }
.profile__row dd{ margin:0; font-size:14px; color:var(--sub); line-height:1.9; }
.split{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,6vw,80px); align-items:start; }
.split__aside{ position:sticky; top:120px; }

/* duo (fields/strength) */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); margin-top:44px; }
.duo__col h4{ font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.16em; color:var(--pink); margin:0 0 14px; }
.duo__col ul{ list-style:none; padding:0; margin:0; }
.duo__col li{ padding:13px 0; border-top:1px solid var(--line-soft); font-size:14px; color:var(--sub); }

/* message */
.message{ text-align:center; }
.message__text{ font-family:var(--jp); font-weight:500; font-size:clamp(18px,2.1vw,25px); line-height:2.05; letter-spacing:.02em; margin:0 auto; max-width:26em; color:var(--ink); }
.message__sign{ margin:40px 0 0; font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.2em; color:var(--pink); }

/* =========================================================
   CTA
   ========================================================= */
.cta{ position:relative; overflow:hidden; text-align:center; padding:clamp(90px,13vw,170px) 0; border-top:1px solid var(--line); }
.cta::before{ content:""; position:absolute; left:50%; bottom:-30%; transform:translateX(-50%); width:80%; height:90%; background:radial-gradient(ellipse at 50% 100%,rgba(255,30,140,.42),transparent 68%); filter:blur(60px); pointer-events:none; }
.cta .container{ position:relative; z-index:2; }
.cta__h{ font-family:var(--disp); font-size:clamp(46px,8.5vw,128px); line-height:.94; text-transform:uppercase; letter-spacing:.015em; margin:0; }
.cta__h .pink{ color:var(--pink); }
.cta__text{ font-size:14px; color:var(--sub); line-height:2; margin:26px 0 40px; }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:800; font-size:13px; letter-spacing:.12em; padding:18px 42px; background:var(--pink); color:#0a0a0a; border:0; box-shadow:0 0 40px rgba(255,30,140,.5); transition:background .3s, box-shadow .3s; cursor:pointer; }
.btn:hover{ background:var(--pink2); box-shadow:0 0 56px rgba(255,30,140,.7); }
.btn--ghost{ background:transparent; color:var(--pink); border:1px solid var(--pink); box-shadow:none; }
.btn--ghost:hover{ background:var(--pink); color:#0a0a0a; }

/* =========================================================
   Page head (sub pages)
   ========================================================= */
.page-head{ position:relative; padding-top:clamp(150px,20vh,220px); padding-bottom:clamp(40px,6vw,70px); overflow:hidden; }
.page-head__h{ font-family:var(--disp); font-size:clamp(54px,11vw,160px); line-height:.92; text-transform:uppercase; letter-spacing:.015em; margin:14px 0 20px; }
.page-head::before{ content:""; position:absolute; z-index:0; top:-10%; right:-6%; width:min(40vw,420px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,30,140,.32),transparent 68%); filter:blur(50px); pointer-events:none; }
.page-head>*{ position:relative; z-index:1; }

/* form */
.form__row{ margin-bottom:32px; }
.form__label{ display:block; font-family:var(--sans); font-weight:800; font-size:11px; letter-spacing:.12em; color:var(--mute); margin-bottom:12px; text-transform:uppercase; }
.form__label .req{ color:var(--pink); margin-left:4px; }
.form__input{ width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; font-family:var(--jp); font-size:15px; color:var(--ink); padding:10px 2px; transition:border-color .4s var(--easing); }
.form__input:focus{ outline:none; border-bottom-color:var(--pink); }
textarea.form__input{ resize:vertical; }
.form__select{ position:relative; }
.form__select::after{ content:"▾"; position:absolute; right:6px; top:10px; color:var(--mute); pointer-events:none; }
.form__select select{ width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; font-family:var(--jp); font-size:15px; color:var(--ink); padding:10px 2px; appearance:none; -webkit-appearance:none; border-radius:0; }
.form__select select option{ background:#14141a; color:var(--ink); }
.form__select select:focus{ outline:none; border-bottom-color:var(--pink); }

/* thanks */
.thanks{ min-height:70vh; display:flex; align-items:center; text-align:center; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ padding:80px 0 40px; border-top:1px solid var(--line); }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.footer__logo .m{ font-family:var(--disp); font-size:32px; letter-spacing:.04em; }
.footer__logo .m i{ color:var(--pink); font-style:normal; }
.footer__tag{ font-size:13px; color:var(--sub); line-height:2; margin:16px 0 0; }
.footer__title{ font-family:var(--sans); font-weight:800; font-size:10px; letter-spacing:.16em; color:var(--pink); margin-bottom:16px; text-transform:uppercase; }
.footer__links{ list-style:none; padding:0; margin:0; }
.footer__links li{ font-size:13px; color:var(--sub); margin-bottom:12px; }
.footer__links a:hover{ color:var(--ink); }
.footer__bottom{ margin-top:60px; padding-top:24px; border-top:1px solid var(--line-soft); font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.08em; color:var(--mute); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  :root{ --gutter:20px; }
  .header__nav{ position:fixed; top:0; left:0; width:100%; height:100vh; height:100dvh; background:rgba(8,8,10,.97); backdrop-filter:blur(10px); flex-direction:column; justify-content:center; align-items:center; gap:26px; transform:translateY(-100%); transition:transform .6s var(--easing); }
  .header__nav.is-open{ transform:translateY(0); }
  .header__nav a{ font-size:16px; letter-spacing:.16em; }
  .header__toggle{ display:flex; flex-direction:column; justify-content:center; gap:6px; width:34px; height:34px; background:none; border:0; cursor:pointer; z-index:110; padding:0; }
  .header__toggle span{ display:block; width:26px; height:1.5px; background:var(--ink); transition:transform .4s var(--easing), opacity .3s; }
  .header.is-nav-open .header__toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .header.is-nav-open .header__toggle span:nth-child(2){ opacity:0; }
  .header.is-nav-open .header__toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .thumbs,.sol-grid,.duo,.split{ grid-template-columns:1fr; }
  .sol-card{ border-right:0; border-bottom:1px solid var(--line); }
  .sol-card:last-child{ border-bottom:0; }
  .split__aside{ position:static; }
  .case{ grid-template-columns:1fr; gap:14px; }
  .project-row,.project-sub{ grid-template-columns:44px 1fr; }
  .project-row .pdesc,.project-sub .psub-desc{ grid-column:2; text-align:left; margin-top:4px; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:28px; }
}