/* ============================================================
   THE CODE CORP — Awwwards SOTD Target v2.0
   Editorial × Brutalism × Cinematic 3D
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
    /* Palette — Editorial Dark */
    --bg: #0b0b0d;
    --bg-soft: #111115;
    --bg-elev: #16161b;
    --paper: #ebe7dd;         /* off-white paper */
    --paper-dim: #c9c5ba;
    --ink: #0a0a0c;
    --line: rgba(235, 231, 221, 0.12);
    --line-strong: rgba(235, 231, 221, 0.28);
    --text: #e6e3d9;
    --text-mute: #8a8479;
    --text-dim: #4a4842;

    /* Accents — Electric Lime + Molten Orange */
    --accent: #c8ff1e;         /* electric lime — signature */
    --accent-2: #ff5b1f;       /* molten orange — secondary */
    --accent-3: #4A9EFF;       /* legacy blue (retained sparingly) */
    --accent-soft: rgba(200, 255, 30, 0.12);

    /* Typography */
    --font-display: 'Fraunces', 'Noto Serif JP', Georgia, serif;
    --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-jp: 'Noto Sans JP', -apple-system, sans-serif;
    --font-jp-serif: 'Noto Serif JP', serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Layout */
    --nav-h: 72px;
    --frame: 14px;        /* editorial side frames */
    --container-max: 1480px;
    --gutter: clamp(20px, 3.6vw, 72px);

    /* Z-index */
    --z-cursor: 10000;
    --z-preloader: 9999;
    --z-grain: 9998;
    --z-menu: 9000;
    --z-nav: 8000;
    --z-frame: 500;
    --z-sound: 7500;
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:auto;scroll-behavior:auto!important;-webkit-text-size-adjust:100%;font-feature-settings:"palt" 1,"kern" 1}
body{
    font-family:var(--font-sans);
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    line-height:1.6;
    font-feature-settings:"palt" 1,"kern" 1;
    text-rendering:optimizeLegibility;
}
body.loading,body.menu-open{overflow:hidden}
::-webkit-scrollbar{display:none}
*{-ms-overflow-style:none;scrollbar-width:none}
::selection{background:var(--accent);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{border:none;background:none;cursor:pointer;color:inherit;font-family:inherit}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);width:100%}
.section{position:relative}

/* Utility */
.text-accent{color:var(--accent)}
.text-accent-2{color:var(--accent-2)}
.font-black{font-weight:900}
.serif{font-family:var(--font-display)}
.mono{font-family:var(--font-mono)}
.jp{font-family:var(--font-jp)}

/* ============================================================
   EDITORIAL FRAME — Left/Right/Bottom fixed borders with marks
   Signature Awwwards-level detail
   ============================================================ */
.editorial-frame{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:var(--z-frame);
    mix-blend-mode:difference;
}
.ef-side{
    position:absolute;
    top:var(--frame);
    bottom:var(--frame);
    width:1px;
    background:rgba(235,231,221,0.14);
}
.ef-left{left:var(--frame)}
.ef-right{right:var(--frame)}
.ef-bar{
    position:absolute;
    left:var(--frame);
    right:var(--frame);
    height:1px;
    background:rgba(235,231,221,0.14);
}
.ef-top{top:var(--frame)}
.ef-bottom{bottom:var(--frame)}

/* Corner tick marks */
.ef-corner{
    position:absolute;
    width:10px;
    height:10px;
    border-color:rgba(235,231,221,0.4);
    border-style:solid;
    border-width:0;
}
.ef-corner.tl{top:var(--frame);left:var(--frame);border-top-width:1px;border-left-width:1px;transform:translate(-4px,-4px)}
.ef-corner.tr{top:var(--frame);right:var(--frame);border-top-width:1px;border-right-width:1px;transform:translate(4px,-4px)}
.ef-corner.bl{bottom:var(--frame);left:var(--frame);border-bottom-width:1px;border-left-width:1px;transform:translate(-4px,4px)}
.ef-corner.br{bottom:var(--frame);right:var(--frame);border-bottom-width:1px;border-right-width:1px;transform:translate(4px,4px)}

/* Editorial side labels (vertical text) */
.ef-vlabel{
    position:absolute;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--text-mute);
    font-weight:500;
}
.ef-vlabel-left{
    left:calc(var(--frame) + 14px);
    top:50%;
    transform:translateY(-50%);
}
.ef-vlabel-right{
    right:calc(var(--frame) + 14px);
    top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-lr;
}

/* Section scroll indicator — fixed right side */
.section-indicator{
    position:fixed;
    right:calc(var(--frame) + 36px);
    top:50%;
    transform:translateY(-50%);
    z-index:var(--z-frame);
    display:flex;
    flex-direction:column;
    gap:14px;
    pointer-events:none;
    mix-blend-mode:difference;
}
.si-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:0.2em;
    color:var(--text-dim);
    transition:color 0.5s var(--ease-out-expo),opacity 0.5s;
    opacity:0.55;
}
.si-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--text-dim);
    transition:background 0.4s,transform 0.4s var(--ease-spring),width 0.4s,height 0.4s;
}
.si-item.active{color:var(--accent);opacity:1}
.si-item.active .si-dot{background:var(--accent);width:10px;height:10px;box-shadow:0 0 12px var(--accent)}
.si-num{font-variant-numeric:tabular-nums}

@media (max-width:900px){
    .ef-vlabel,.section-indicator{display:none}
    .ef-side,.ef-bar,.ef-corner{opacity:0.5}
}

/* ============================================================
   GRAIN / NOISE
   ============================================================ */
#grain-overlay{
    position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
    opacity:0.045;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat:repeat;
    animation:grain 0.5s steps(1) infinite;
}
@keyframes grain{
    0%,100%{transform:translate(0,0)}
    10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}
    30%{transform:translate(7%,-15%)}40%{transform:translate(-5%,15%)}
    50%{transform:translate(-15%,10%)}60%{transform:translate(15%,0)}
    70%{transform:translate(0,10%)}80%{transform:translate(3%,20%)}
    90%{transform:translate(-10%,10%)}
}

/* ============================================================
   HERO 3D CANVAS (Three.js) — RIGHT HALF, MAJOR ROLE
   ============================================================ */
.hero-3d-wrap{
    position:absolute;
    top:0;
    right:-8%;
    bottom:0;
    width:48%;
    z-index:1;
    pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    opacity:0.6;
    /* fix: left-edge fade so 3D dissolves into darkness toward the title */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 18%, #000 45%, #000 100%);
    mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 18%, #000 45%, #000 100%);
}
#hero-3d-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:auto;  /* enable hover interaction */
}

/* Circular ring text around the 3D sphere */
.hero-3d-ring-text{
    position:absolute;
    width:min(92%, 720px);
    aspect-ratio:1;
    pointer-events:none;
    z-index:2;
    animation:ringTextRotate 40s linear infinite;
    opacity:0.6;
}
.hero-3d-ring-text svg{width:100%;height:100%;overflow:visible}
.ring-text-path{
    font-family:var(--font-mono);
    font-size:6.2px;
    letter-spacing:0.35em;
    fill:var(--paper);
    text-transform:uppercase;
    opacity:0.55;
}
@keyframes ringTextRotate{to{transform:rotate(360deg)}}

/* Cursor particle canvas (global trail) */
#cursor-trail-canvas{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:var(--z-frame);
    mix-blend-mode:screen;
}

/* Background WebGL (subtle) */
#webgl-canvas{
    position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
    opacity:0.75;
}

/* ============================================================
   PRELOADER
   ============================================================ */
/* ------------------------------------------------------------
   Namma-inspired opening: wireframe → liquid fill → zoom blur
------------------------------------------------------------ */
.pl-root{
    position:fixed;inset:0;z-index:var(--z-preloader);
    background:#000;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    --pl-dur: 1;
}

/* Four corner utility labels */
.pl-corner{
    position:absolute;z-index:4;
    display:flex;flex-direction:column;gap:6px;
    opacity:0;
    font-family:var(--font-mono);
    font-size:10px;letter-spacing:0.28em;text-transform:uppercase;
    color:rgba(255,255,255,0.78);font-weight:500;line-height:1.2;
}
.pl-corner-tl{top:28px;left:32px;align-items:flex-start}
.pl-corner-tr{top:28px;right:32px;align-items:flex-end;text-align:right}
.pl-corner-bl{bottom:28px;left:32px;align-items:flex-start}
.pl-corner-br{bottom:28px;right:32px;align-items:flex-end;text-align:right}
.pl-utility-sub{color:rgba(255,255,255,0.45);font-size:9px;letter-spacing:0.22em}
#pl-progress-num{font-variant-numeric:tabular-nums;color:#c8ff1e}
#pl-clock{font-variant-numeric:tabular-nums}

/* Stage (center content) */
.pl-stage{
    position:relative;z-index:2;
    width:min(92vw, 1400px);
    display:flex;flex-direction:column;align-items:center;
    will-change:transform,filter,opacity;
}
/* ---- Text stack (simplified, Safari-compat using plain color & clip-path) ---- */
.pl-text-wrap{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    line-height:1;
}
.pl-text{
    position:absolute;
    top:0;left:0;right:0;
    margin:0;padding:0;
    text-align:center;
    /* Impact is preinstalled on macOS & Windows — no font-load dependency */
    font-family:Impact,'Arial Narrow Bold','Helvetica Neue',sans-serif;
    font-weight:900;
    font-size:clamp(80px, 18vw, 260px);
    letter-spacing:0.02em;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}
/* 1. Dim outline-like text (dim gray, no stroke — avoids Safari AA bugs) */
.pl-text-outline{
    color:rgba(255,255,255,0.25);
    opacity:0;
}
/* 2. Main white text — revealed from bottom via clip-path inset animation */
.pl-text-main{
    color:#ffffff;
    opacity:0;
    clip-path:inset(100% 0 0 0);
    -webkit-clip-path:inset(100% 0 0 0);
}
/* 3. Invisible reference copy — takes up space so wrap has correct height */
.pl-text-measure{
    position:relative;
    color:transparent;
    visibility:hidden;
    pointer-events:none;
}

/* Nodes overlay (blueprint vertices) */
#pl-nodes{
    position:absolute;
    inset:0;
    pointer-events:none;
}
#pl-nodes .pl-node{
    position:absolute;
    width:10px;height:10px;
    border-radius:50%;
    background:#c8ff1e;
    transform:translate(-50%, -50%) scale(0);
    will-change:transform;
    box-shadow:0 0 12px rgba(200,255,30,0.6);
}

/* Caption under the logo */
.pl-caption{
    margin-top:28px;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    opacity:0;
}
.pl-caption-en{
    font-family:var(--font-mono);
    font-size:10px;letter-spacing:0.5em;text-transform:uppercase;
    color:rgba(255,255,255,0.55);font-weight:500;
}
.pl-caption-jp{
    font-family:var(--font-jp);
    font-size:11px;letter-spacing:0.3em;color:rgba(255,255,255,0.4);font-weight:300;
}

/* Thin progress hairline at top */
.pl-hairline{
    position:absolute;top:0;left:0;
    height:1px;width:0%;
    background:#c8ff1e;
    z-index:5;
    box-shadow:0 0 12px rgba(200,255,30,0.5);
}

/* Exit curtain (splits black panel) */
.pl-curtain{
    position:absolute;left:0;right:0;height:50%;
    background:#000;z-index:10;
    transform:translateY(0);
    will-change:transform;
}
.pl-curtain-top{top:0}
.pl-curtain-bottom{bottom:0}

/* Mobile shrink */
@media (max-width: 768px){
    .pl-corner{font-size:9px;letter-spacing:0.2em}
    .pl-corner-tl,.pl-corner-tr{top:20px}
    .pl-corner-bl,.pl-corner-br{bottom:20px}
    .pl-corner-tl,.pl-corner-bl{left:20px}
    .pl-corner-tr,.pl-corner-br{right:20px}
    .pl-utility-sub{display:none}
    .pl-caption{margin-top:20px}
    .pl-caption-en{font-size:8px;letter-spacing:0.35em}
    .pl-caption-jp{font-size:10px}
}
@media (prefers-reduced-motion: reduce){
    .pl-root *{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}

/* ============================================================
   SOUND TOGGLE
   ============================================================ */
.sound-btn{
    position:fixed;bottom:calc(var(--frame) + 24px);right:calc(var(--frame) + 24px);
    z-index:var(--z-sound);
    display:flex;align-items:center;gap:10px;
    padding:10px 16px;
    border:1px solid var(--line);
    border-radius:100px;
    backdrop-filter:blur(10px);
    background:rgba(11,11,13,0.6);
    transition:border-color 0.4s var(--ease-out-expo),background-color 0.4s var(--ease-out-expo);
}
.sound-btn:hover{border-color:var(--accent);background:rgba(200,255,30,0.05)}
.sound-bars{display:flex;align-items:center;gap:2px;height:14px}
.sound-bars span{display:block;width:2px;height:4px;background:var(--accent);border-radius:1px;transition:height 0.2s}
.sound-btn.active .sound-bars span:nth-child(1){animation:soundBar 0.6s ease-in-out infinite alternate}
.sound-btn.active .sound-bars span:nth-child(2){animation:soundBar 0.6s ease-in-out 0.1s infinite alternate}
.sound-btn.active .sound-bars span:nth-child(3){animation:soundBar 0.6s ease-in-out 0.2s infinite alternate}
.sound-btn.active .sound-bars span:nth-child(4){animation:soundBar 0.6s ease-in-out 0.3s infinite alternate}
@keyframes soundBar{0%{height:4px}100%{height:14px}}
.sound-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-mute);font-weight:600}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot,.cursor-outline{
    position:fixed;top:0;left:0;transform:translate(-50%,-50%);border-radius:50%;
    z-index:var(--z-cursor);pointer-events:none;will-change:transform;mix-blend-mode:difference;
}
.cursor-dot{width:6px;height:6px;background:var(--paper)}
.cursor-outline{width:36px;height:36px;border:1px solid rgba(235,231,221,0.5);
    transition:width 0.4s var(--ease-out-expo),height 0.4s var(--ease-out-expo),background-color 0.4s var(--ease-out-expo),border-color 0.4s var(--ease-out-expo)}
body.cursor-hover .cursor-outline{width:72px;height:72px;background:var(--accent);border-color:transparent;mix-blend-mode:difference}
body.cursor-hover .cursor-dot{opacity:0;transform:translate(-50%,-50%) scale(0)}
body.cursor-text .cursor-outline{width:120px;height:120px;background:rgba(200,255,30,0.15);border-color:var(--accent)}
@media (hover:none) and (pointer:coarse){.cursor-dot,.cursor-outline{display:none!important}}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
    display:flex;justify-content:space-between;align-items:center;
    padding:0 calc(var(--gutter) + var(--frame));height:var(--nav-h);
    mix-blend-mode:difference;pointer-events:none;
}
.nav>*{pointer-events:auto}
.nav-logo{display:flex;align-items:baseline;font-family:var(--font-display);font-size:20px;font-weight:500;font-style:italic;letter-spacing:-0.01em;text-transform:none}
.nav-logo-text{}
.nav-logo-dot{color:var(--accent);margin-left:1px;font-weight:700;transition:opacity 0.3s}
.nav-logo:hover .nav-logo-dot{opacity:0.4}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-time{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.18em;color:var(--text-mute);font-variant-numeric:tabular-nums}
.nav-menu-btn{display:flex;align-items:center;gap:12px;padding:8px 0}
.menu-trigger-lines{display:flex;flex-direction:column;gap:6px;width:22px}
.menu-line{display:block;height:1px;background:var(--paper);transition:transform 0.6s var(--ease-out-expo),opacity 0.3s}
.menu-line-1{width:100%}
.menu-line-2{width:60%;transition:width 0.4s var(--ease-out-expo),transform 0.6s var(--ease-out-expo)}
.nav-menu-btn:hover .menu-line-2{width:100%}
body.menu-open .menu-line-1{transform:rotate(45deg) translateY(3.5px)}
body.menu-open .menu-line-2{width:100%;transform:rotate(-45deg) translateY(-3.5px)}
.menu-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;font-weight:600}

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */
.menu-overlay{position:fixed;inset:0;z-index:var(--z-menu);pointer-events:none;visibility:hidden}
.menu-overlay.is-open{pointer-events:auto;visibility:visible}
.menu-overlay-bg{position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity 0.6s var(--ease-out-expo)}
.menu-overlay.is-open .menu-overlay-bg{opacity:0.98}
.menu-content{position:relative;z-index:2;display:flex;height:100%;padding:calc(var(--nav-h) + 60px) calc(var(--gutter) + var(--frame)) 60px;gap:80px}
.menu-col-links{flex:2;display:flex;align-items:center}
.menu-col-info{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:40px;padding-bottom:20px}
.menu-links{list-style:none;width:100%}
.menu-item{overflow:visible;border-top:1px solid var(--line);position:relative}
.menu-item:last-child{border-bottom:1px solid var(--line)}
.menu-link{display:flex;align-items:baseline;gap:32px;padding:24px 0;transition:padding 0.5s var(--ease-out-expo),color 0.4s}
.menu-link:hover{padding-left:40px;color:var(--accent)}
.menu-link-index{font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;color:var(--text-mute);min-width:32px}
.menu-link-text-wrap{display:flex;flex-direction:column;gap:4px}
.menu-link-text{font-family:var(--font-display);font-size:clamp(36px,6vw,72px);font-weight:400;font-style:italic;line-height:1;letter-spacing:-0.02em}
.menu-link-jp{font-family:var(--font-jp);font-size:clamp(11px,1.1vw,14px);font-weight:300;color:var(--text-mute);letter-spacing:0.2em;transition:color 0.4s}
.menu-link:hover .menu-link-jp{color:var(--accent)}
.menu-info-block{}
.menu-info-label{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;
    color:var(--text-mute);font-weight:500;margin-bottom:12px;display:flex;align-items:center;
}
.info-label-jp{font-family:var(--font-jp);font-size:9px;font-weight:400;letter-spacing:0.1em;color:var(--text-dim);margin-left:8px;opacity:0.7;text-transform:none}
.menu-info-block p{font-size:14px;line-height:1.7;color:var(--text)}
.menu-info-en{font-size:11px;color:var(--text-dim);letter-spacing:0.15em;display:block;margin-top:4px;font-family:var(--font-mono)}
.menu-info-link{color:var(--accent);border-bottom:1px solid var(--accent-soft);transition:border-color 0.3s}
.menu-info-link:hover{border-color:var(--accent)}
.menu-socials{display:flex;gap:20px;flex-wrap:wrap}
.menu-social-link{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--text-mute);padding-bottom:2px;border-bottom:1px solid transparent;transition:color 0.3s,border-color 0.3s;
}
.menu-social-link:hover{color:var(--accent);border-color:var(--accent)}

/* Replay opening button in menu */
.menu-replay-btn{
    display:inline-flex;align-items:center;gap:14px;
    padding:14px 22px 14px 18px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:100px;
    color:var(--text);
    cursor:pointer;
    transition:border-color 0.4s var(--ease-out-expo), background-color 0.4s var(--ease-out-expo), color 0.4s var(--ease-out-expo), padding 0.4s var(--ease-out-expo);
    font-family:inherit;
}
.menu-replay-btn:hover{
    border-color:var(--accent);
    background:rgba(200,255,30,0.06);
    color:var(--accent);
    padding-right:26px;
}
.menu-replay-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:20px;height:20px;
    color:var(--accent);
    flex-shrink:0;
    transition:transform 0.4s var(--ease-out-expo);
}
.menu-replay-btn:hover .menu-replay-icon{transform:translateX(2px) scale(1.1)}
.menu-replay-icon svg{width:100%;height:100%;display:block}
.menu-replay-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}
.menu-replay-en{
    font-family:var(--font-mono);
    font-size:11px;letter-spacing:0.22em;text-transform:uppercase;font-weight:500;
}
.menu-replay-jp{
    font-family:var(--font-jp);
    font-size:10px;letter-spacing:0.15em;color:var(--text-dim);font-weight:400;
}
.menu-replay-btn:hover .menu-replay-jp{color:rgba(200,255,30,0.7)}

/* ============================================================
   HERO SECTION — Editorial Split Layout (Left copy / Right 3D)
   ============================================================ */
.hero-section{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    padding:calc(var(--nav-h) + 40px) calc(var(--gutter) + var(--frame)) calc(var(--frame) + 28px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.hero-content{position:relative;z-index:3;display:flex;flex-direction:column;height:100%;flex:1}

/* Top row — meta info */
.hero-meta-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:24px;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
    margin-bottom:auto;
    opacity:0;
}
.hero-meta-item{font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-mute)}
.hero-meta-item strong{color:var(--paper);font-weight:500;display:block;margin-top:6px;font-size:11px;letter-spacing:0.18em}
.hero-meta-item .hm-jp{font-family:var(--font-jp);font-size:9px;letter-spacing:0.15em;text-transform:none;color:var(--text-dim);margin-top:4px;display:block}
.hero-meta-right{text-align:right}
.hero-meta-center{text-align:center}

/* Hero body grid — left copy / right reserved for 3D */
.hero-body-grid{
    display:grid;
    grid-template-columns:minmax(0, 62%) minmax(0, 38%); /* fix: wider left so title has full canvas */
    gap:40px;
    flex:1;
    align-items:center;
    padding:32px 0;
}
.hero-left{display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative;z-index:5}
.hero-right{min-width:0}  /* 3D sits behind via absolute */
/* fix: subtle backdrop under title to guarantee legibility over 3D sphere on small screens */
@media (max-width:1100px){
    .hero-left::before{
        content:"";
        position:absolute;
        inset:-24px -32px;
        background:radial-gradient(ellipse at center left, rgba(11,11,13,0.85) 0%, rgba(11,11,13,0.6) 50%, transparent 90%);
        z-index:-1;
        pointer-events:none;
    }
}

/* MAIN HERO TITLE — controlled size, left aligned */
.hero-title{
    font-family:var(--font-display);
    font-size:clamp(64px, 10.5vw, 190px);
    font-weight:400;
    line-height:1.08; /* fix: raised from 1.02 to guarantee descender room even with italic ink overflow */
    letter-spacing:-0.035em;
    color:var(--paper);
    margin-bottom:28px;
}
/* fix: NUCLEAR OPTION — overflow:visible guarantees zero clipping of any ink.
   Mask effect for GSAP reveal is sacrificed, but typography integrity comes first. */
.hero-title-line{
    display:block;
    overflow:visible;
    position:relative;
}
.hero-word{display:inline-block;will-change:transform}
/* fix: italic words need right padding so ink overflow (d, f ascender) is not clipped */
.hero-word-thin{font-weight:300;font-style:italic;padding-right:0.05em}
.hero-word-accent{font-weight:500;color:var(--paper);position:relative}
.hero-word-accent::after{
    content:".";
    color:var(--accent);
    font-weight:700;
    font-style:normal;
    display:inline-block;
    margin-left:4px;
}
.hero-word-outline{
    -webkit-text-stroke:1.5px var(--paper);
    color:transparent;
    font-weight:500;
    font-style:italic;
}

.hero-description{
    font-family:var(--font-jp-serif);
    font-size:clamp(13px, 1vw, 16px);
    font-weight:400;
    line-height:2;
    color:var(--text);
    letter-spacing:0.03em;
    opacity:0;
    max-width:520px;
    margin-bottom:40px;
}
.hero-description strong{color:var(--accent);font-weight:500}

/* Explicit CTA row */
.hero-cta-row{
    display:flex;flex-wrap:wrap;gap:16px;align-items:center;
    opacity:0;
}
.hero-cta{
    display:inline-flex;align-items:center;gap:16px;
    padding:18px 28px 18px 24px;
    background:var(--accent);color:var(--ink);
    border:1px solid var(--accent);
    border-radius:100px;
    transition:background 0.4s var(--ease-out-expo),color 0.4s var(--ease-out-expo),padding 0.4s var(--ease-out-expo);
    font-family:var(--font-mono);
}
.hero-cta:hover{background:var(--paper);border-color:var(--paper);padding-right:36px}
.hero-cta-label{font-size:12px;letter-spacing:0.25em;text-transform:uppercase;font-weight:600}
.hero-cta-jp{font-family:var(--font-jp);font-size:10px;letter-spacing:0.18em;opacity:0.65}
.hero-cta-arrow{display:flex;align-items:center;justify-content:center;transition:transform 0.4s var(--ease-out-expo)}
.hero-cta:hover .hero-cta-arrow{transform:translateX(4px)}

.hero-cta-ghost{
    display:inline-flex;align-items:center;gap:14px;
    padding:16px 20px;
    border:1px solid var(--line-strong);border-radius:100px;
    color:var(--paper);
    transition:border-color 0.4s,color 0.4s,padding 0.4s var(--ease-out-expo);
}
.hero-cta-ghost:hover{border-color:var(--accent);color:var(--accent);padding-right:28px}
.hero-cta-ghost span:first-child{font-family:var(--font-mono);font-size:12px;letter-spacing:0.25em;text-transform:uppercase;font-weight:500}

/* Hero bottom bar */
.hero-bottom{
    display:grid;grid-template-columns:auto 1fr auto;gap:24px;
    align-items:center;
    padding-top:20px;
    border-top:1px solid var(--line);
}
.hero-bottom-label{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--text-mute);
}
.hero-bottom-jp{font-family:var(--font-jp);font-size:9px;letter-spacing:0.15em;color:var(--text-dim);margin-left:8px}
.hero-scroll-indicator{display:flex;align-items:center;gap:14px;justify-content:center;opacity:0}
.scroll-text{font-family:var(--font-mono);font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--text-mute)}
.scroll-text-jp{font-family:var(--font-jp);font-size:9px;letter-spacing:0.15em;color:var(--text-dim);margin-left:6px;text-transform:none}
.scroll-line{width:80px;height:1px;background:rgba(235,231,221,0.15);position:relative;overflow:hidden}
.scroll-line-progress{position:absolute;top:0;left:0;height:100%;width:30%;background:var(--accent);animation:scrollLineAnim 2.4s infinite var(--ease-io-quart)}
@keyframes scrollLineAnim{0%{left:-30%}100%{left:100%}}

.hero-bg-gradient{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(200,255,30,0.04) 0%,transparent 60%);z-index:1;pointer-events:none}
.hero-deco{display:none}

/* ============================================================
   MARQUEE
   ============================================================ */
/* ------------------------------------------------------------
   MARQUEE — v5.2 "Status Bar"
   A quiet ticker, not a headline. 1行の極細ステータスバー。
   ------------------------------------------------------------ */
.marquee-section{
    padding:0;
    height:28px;                       /* 極細バー */
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    background:var(--bg);              /* bg-soft→bg で段差解消 */
    position:relative;z-index:2;
    display:flex;align-items:center;
    /* 両端フェード、読まれる"中央"のみ明瞭に */
    mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.marquee-track{display:flex;white-space:nowrap;animation:marqueeScroll 90s linear infinite;will-change:transform}
.marquee-content{display:flex;align-items:center;gap:28px;padding-right:28px}
.marquee-content span{
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:400;
    font-style:normal;
    color:var(--text-mute);
    letter-spacing:0.28em;
    text-transform:uppercase;
    white-space:nowrap;
    opacity:0.55;
}
.marquee-content .mq-accent{
    color:var(--accent);
    font-weight:500;
    opacity:0.8;
}
.marquee-dot{color:var(--text-dim)!important;font-size:8px!important;font-style:normal!important;font-weight:400!important;opacity:0.5!important}
@keyframes marqueeScroll{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION HEADER — editorial
   ============================================================ */
.section-header{
    display:flex;align-items:center;gap:24px;margin-bottom:60px;
    padding-bottom:20px;border-bottom:1px solid var(--line);
}
.section-index{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;
    color:var(--accent);font-weight:500;
}
.section-index::before{content:"◆ ";color:var(--text-dim)}
.section-label{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
    color:var(--text-mute);font-weight:500;
}
.section-label-jp{font-family:var(--font-jp);font-size:9px;font-weight:400;letter-spacing:0.15em;color:var(--text-dim);margin-left:8px;opacity:0.7;text-transform:none}
.section-line{flex:1;height:1px;background:var(--line)}

/* ============================================================
   PHILOSOPHY SECTION
   ============================================================ */
.philosophy-section{
    padding:140px 0 160px;
    position:relative;
    background:var(--bg);
}
.philosophy-glow{
    position:absolute;top:30%;right:-20%;width:80%;height:80%;
    background:radial-gradient(circle,rgba(200,255,30,0.05) 0%,transparent 60%);
    pointer-events:none;z-index:0;
}

/* Right-side vertical aside meta (fills the white space) */
.philosophy-aside{
    position:absolute;
    top:50%;
    right:calc(var(--frame) + 56px);
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    z-index:1;
    pointer-events:none;
}
.ph-aside-num{
    font-family:var(--font-display);
    font-size:clamp(120px,16vw,260px);
    font-weight:400;
    font-style:italic;
    color:var(--paper);
    line-height:0.85;
    letter-spacing:-0.05em;
    -webkit-text-stroke:1px var(--line-strong);
    color:transparent;
    opacity:0.5;
}
.ph-aside-line{width:1px;height:120px;background:var(--line-strong)}
.ph-aside-label{
    writing-mode:vertical-rl;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--text-mute);
    text-align:center;
    line-height:1.8;
}
.ph-aside-jp{font-family:var(--font-jp);font-size:9px;letter-spacing:0.2em;color:var(--text-dim);text-transform:none}

@media (max-width:1200px){
    .philosophy-aside{display:none}
}
.philosophy-content{position:relative;z-index:2;max-width:1200px}
.philosophy-heading-block{margin-bottom:80px}
.philosophy-heading{
    font-family:var(--font-display);
    line-height:1.12; /* fix: raised further to prevent any ink overflow clipping */
    letter-spacing:-0.03em;
    color:var(--paper);
    margin-bottom:48px;
    font-weight:400;
}
/* fix: overflow:visible — absolutely no clipping of ink */
.heading-line{
    display:block;
    overflow:visible;
}
.ph-line-small{
    display:inline-block;font-weight:300;font-style:italic;
    font-size:clamp(26px,3.5vw,48px);color:var(--text-mute);
}
.ph-line-huge{
    display:inline-block;font-weight:500;
    font-size:clamp(60px,10vw,180px);
    letter-spacing:-0.04em;
}
.ph-line-mid{
    display:inline-block;font-weight:400;font-style:italic;
    font-size:clamp(34px,4.5vw,68px);color:var(--paper);
    padding-left:8vw;
}
.ph-keyword{color:var(--accent);font-style:italic;font-weight:500;position:relative}
.ph-keyword::after{
    content:"";position:absolute;bottom:0.08em;left:0;right:0;
    height:0.08em;background:var(--accent);opacity:0.3;
    transform:scaleX(0);transform-origin:left;transition:transform 0.8s var(--ease-out-expo) 0.5s;
}
.philosophy-heading.is-visible .ph-keyword::after{transform:scaleX(1)}
.ph-dot{color:var(--accent-2);font-weight:700}

.philosophy-jp-block{display:flex;align-items:flex-start;gap:20px;max-width:640px}
.ph-jp-bar{display:block;width:2px;background:var(--accent);flex-shrink:0;min-height:60px;margin-top:6px}
.philosophy-heading-jp{
    font-family:var(--font-jp-serif);
    font-size:clamp(15px,1.3vw,20px);font-weight:400;line-height:2;color:var(--text);
    letter-spacing:0.05em;
}
.philosophy-heading-jp em{font-style:normal;color:var(--accent);font-weight:500}

.philosophy-divider{display:flex;align-items:center;gap:20px;margin:72px 0 56px}
.ph-divider-line{flex:1;height:1px;background:var(--line)}
.ph-divider-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-mute)}

.philosophy-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:40px;
}
.philosophy-text-block{position:relative;padding-top:24px;border-top:1px solid var(--line)}
.ph-block-num{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;
    color:var(--accent);font-weight:500;display:block;margin-bottom:16px;
}
.philosophy-lead{
    font-family:var(--font-jp-serif);
    font-size:clamp(15px,1.25vw,19px);line-height:2;color:var(--text);font-weight:400;
}
.philosophy-lead strong{color:var(--accent);font-weight:500}
.philosophy-text-block p{
    font-family:var(--font-jp-serif);
    font-size:clamp(14px,1.1vw,16px);line-height:2;color:var(--text-mute);font-weight:400;
}
.philosophy-text-block p strong{color:var(--paper);font-weight:500}

.philosophy-visual{display:none}

/* ============================================================
   EXPERTISE — editorial cards
   ============================================================ */
.expertise-section{padding:140px 0 160px;background:var(--bg-soft);position:relative;overflow:hidden}

/* Expertise heading wrap — 2-column layout */
.expertise-heading-wrap{
    display:grid;
    grid-template-columns:1fr auto;
    gap:60px;
    align-items:center;
    margin-bottom:80px;
    position:relative;
}
.expertise-aside{
    position:relative;
    display:flex;
    align-items:center;
    gap:32px;
    padding-right:12px;
}
.ex-aside-top{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-right:24px;
    border-right:1px solid var(--line-strong);
    font-family:var(--font-mono);
}
.ex-aside-num{
    font-size:44px;font-weight:500;color:var(--accent);line-height:1;
    font-family:var(--font-display);font-style:italic;
}
.ex-aside-label{font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-mute)}
.ex-aside-vertical{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--text-mute);
}
.ex-aside-vertical span{display:block;transition:color 0.3s}
.ex-aside-vertical span:hover{color:var(--accent)}
.ex-aside-huge{
    position:absolute;
    top:50%;
    right:-40px;
    transform:translate(100%, -50%);
    font-family:var(--font-display);
    font-size:clamp(120px,14vw,220px);
    font-weight:300;
    font-style:italic;
    color:transparent;
    -webkit-text-stroke:1px var(--line-strong);
    line-height:0.85;
    letter-spacing:-0.05em;
    opacity:0.4;
    pointer-events:none;
    white-space:nowrap;
}
.ex-aside-huge em{color:var(--accent);-webkit-text-stroke:0;font-style:normal;opacity:0.8}

@media (max-width:1200px){
    .expertise-heading-wrap{grid-template-columns:1fr;gap:32px}
    .expertise-aside{display:none}
}

.heading-bilingual{margin-bottom:0}
.expertise-heading,.cases-heading,.contact-heading,.identity-heading{
    font-family:var(--font-display);
    font-size:clamp(50px,8vw,140px);
    font-weight:400;
    line-height:1.1; /* fix: raised further */
    letter-spacing:-0.035em;
    color:var(--paper);
}
/* fix: overflow:visible — no clipping anywhere */
.expertise-heading .heading-line,.cases-heading .heading-line,
.contact-heading .heading-line,.identity-heading .heading-line{
    display:block;
    overflow:visible;
}
.expertise-heading .heading-line:first-child,.cases-heading .heading-line:first-child,
.contact-heading .heading-line:first-child,.identity-heading .heading-line:first-child{font-weight:300;font-style:italic;color:var(--text-mute)}
.expertise-heading .text-accent,.cases-heading .text-accent,
.contact-heading .text-accent,.identity-heading .text-accent{color:var(--paper);font-style:normal}

.heading-jp{
    font-family:var(--font-jp);font-size:clamp(13px,1.1vw,16px);font-weight:300;
    color:var(--text-mute);letter-spacing:0.12em;line-height:1.8;margin-top:24px;
}

.expertise-list{display:flex;flex-direction:column}
.expertise-item{
    position:relative;border-top:1px solid var(--line);
    transition:background 0.6s var(--ease-out-expo);
    cursor:pointer;
}
.expertise-item:last-child{border-bottom:1px solid var(--line)}
.expertise-item-bg{
    position:absolute;inset:0;background:var(--accent);z-index:0;
    transform:scaleY(0);transform-origin:bottom;
    transition:transform 0.6s var(--ease-out-expo);
}
.expertise-item:hover .expertise-item-bg{transform:scaleY(1);transform-origin:top}
.expertise-item-inner{
    position:relative;z-index:2;display:grid;
    grid-template-columns:80px 1fr 1.5fr auto 60px;
    align-items:center;gap:32px;
    padding:40px 24px;
    transition:color 0.5s var(--ease-out-expo),transform 0.6s var(--ease-out-expo);
}
.expertise-item:hover .expertise-item-inner{color:var(--ink)}
.expertise-num{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;
    color:var(--text-dim);font-weight:500;
    transition:color 0.5s;
}
.expertise-item:hover .expertise-num{color:var(--ink)}
.expertise-title{
    font-family:var(--font-display);
    font-size:clamp(28px,3.5vw,56px);font-weight:400;
    line-height:1;letter-spacing:-0.02em;color:var(--paper);
    transition:color 0.5s;
}
.expertise-item:hover .expertise-title{color:var(--ink);font-style:italic}
.expertise-title-jp{
    display:block;font-family:var(--font-jp);font-size:clamp(11px,1vw,14px);
    font-weight:300;letter-spacing:0.15em;color:var(--text-mute);margin-top:8px;
    transition:color 0.5s;
}
.expertise-item:hover .expertise-title-jp{color:rgba(10,10,12,0.65)}
.expertise-desc{
    font-size:14px;line-height:1.7;color:var(--text-mute);max-width:480px;
    transition:color 0.5s;
}
.expertise-item:hover .expertise-desc{color:rgba(10,10,12,0.85)}
.expertise-tags{display:flex;flex-wrap:wrap;gap:8px}
.expertise-tag{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.15em;
    padding:5px 10px;border:1px solid var(--line-strong);border-radius:40px;
    color:var(--text-mute);transition:color 0.5s,border-color 0.5s;text-transform:uppercase;
}
.expertise-item:hover .expertise-tag{color:var(--ink);border-color:var(--ink)}
.expertise-arrow{
    width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:center;
    transition:all 0.5s var(--ease-out-expo);color:var(--paper);
}
.expertise-item:hover .expertise-arrow{
    background:var(--ink);border-color:var(--ink);color:var(--accent);
    transform:rotate(45deg);
}

/* ============================================================
   METRICS / EDITORIAL MANIFESTO
   — Magazine-spread composition: one stat per screen, asymmetric grid,
     narrative voice, editorial sourcing. Inspired by WePresent / Pentagram.
   ============================================================ */
.metrics-editorial{
    background:var(--bg);
    position:relative;
    color:var(--paper);
    padding:0;
}
.counter-value{display:inline-block;font-variant-numeric:tabular-nums}

/* ---------- COVER / CHAPTER OPENER ---------- */
.me-cover{
    padding:160px 0 120px;
    border-bottom:1px solid var(--line);
    position:relative;
}
.me-cover::before{
    content:"IMPACT · IMPACT · IMPACT · IMPACT · IMPACT · IMPACT · IMPACT · ";
    position:absolute;top:24px;left:0;right:0;
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.4em;
    color:var(--line-strong);white-space:nowrap;overflow:hidden;
    opacity:0.4;pointer-events:none;
}
.me-cover-grid{
    display:grid;
    grid-template-columns:1fr 2.2fr 1fr;
    gap:48px;
    align-items:end;
    min-height:56vh;
}
.me-cover-left{display:flex;flex-direction:column;gap:8px}
.me-index{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.3em;
    color:var(--accent);text-transform:uppercase;
}
.me-chapter{
    font-family:var(--font-display);font-size:14px;font-style:italic;
    color:var(--text-mute);font-weight:300;
}

.me-cover-center .me-title{
    font-family:var(--font-display);
    font-weight:400;
    line-height:0.95;
    letter-spacing:-0.035em;
    color:var(--paper);
    margin:0;
}
.me-title-small{
    display:block;
    font-style:italic;
    font-weight:300;
    font-size:clamp(28px,3.5vw,54px);
    color:var(--text-mute);
    margin-bottom:8px;
}
.me-title-huge{
    display:block;
    font-size:clamp(68px,11vw,200px);
    font-weight:500;
    line-height:0.92;
}
.me-title-huge em{
    font-style:italic;font-weight:400;color:var(--accent);
    font-feature-settings:"liga","dlig";
}
.me-title-jp{
    font-family:var(--font-jp);font-weight:300;
    font-size:clamp(13px,1vw,16px);
    letter-spacing:0.15em;color:var(--text-mute);
    margin-top:32px;
}

.me-cover-right{
    display:flex;flex-direction:column;gap:12px;
    align-self:end;padding-bottom:16px;
}
.me-meta-row{
    display:flex;justify-content:space-between;gap:16px;
    padding:8px 0;border-top:1px solid var(--line);
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;
}
.me-meta-row:last-child{border-bottom:1px solid var(--line)}
.me-meta-k{color:var(--text-mute);text-transform:uppercase}
.me-meta-v{color:var(--paper);text-align:right}

/* ---------- ENTRY / ARTICLE ---------- */
.me-entry{
    padding:140px 0;
    border-bottom:1px solid var(--line);
    position:relative;
}
.me-entry-last{border-bottom:none}
.me-entry::before{
    content:"";
    position:absolute;left:0;top:140px;
    width:32px;height:1px;
    background:var(--accent);
}

.me-entry-grid{
    display:grid;
    grid-template-columns:1fr 2.2fr;
    grid-template-areas:
        "meta hero"
        "meta foot";
    gap:40px 64px;
    align-items:start;
}
/* Alternate entries invert the layout for visual rhythm */
.me-entry-alt .me-entry-grid{
    grid-template-columns:2.2fr 1fr;
    grid-template-areas:
        "hero meta"
        "foot meta";
}

.me-entry-meta{
    grid-area:meta;
    display:flex;flex-direction:column;gap:14px;
    position:sticky;top:120px;
    padding-top:8px;
}
.me-entry-num{
    font-family:var(--font-display);font-style:italic;
    font-size:clamp(48px,6vw,92px);font-weight:300;
    line-height:0.9;color:var(--paper);
    letter-spacing:-0.04em;
}
.me-entry-tag{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;
    color:var(--accent);text-transform:uppercase;
    padding:4px 10px;border:1px solid var(--accent);
    align-self:flex-start;border-radius:20px;
}
.me-entry-kicker{
    font-family:var(--font-display);font-weight:400;
    font-size:clamp(20px,1.6vw,26px);
    line-height:1.25;letter-spacing:-0.01em;color:var(--paper);
    margin:4px 0 0;
}
.me-entry-kicker-jp{
    font-family:var(--font-jp);font-weight:300;
    font-size:12px;letter-spacing:0.1em;color:var(--text-mute);
}

/* HERO (big stat + lede) */
.me-entry-hero{
    grid-area:hero;
    display:flex;flex-direction:column;gap:48px;
    padding-bottom:24px;border-bottom:1px solid var(--line);
}
.me-stat{
    display:flex;align-items:baseline;gap:0;
    font-family:var(--font-display);font-weight:400;
    line-height:0.85;color:var(--paper);
    letter-spacing:-0.05em;
}
.me-stat-quote{
    font-size:clamp(50px,6vw,92px);
    font-style:italic;font-weight:300;
    color:var(--text-mute);
    margin-right:12px;
    line-height:1;
    align-self:flex-start;
    margin-top:0.1em;
}
.me-stat-value{
    display:inline-flex;align-items:baseline;gap:0;
    font-size:clamp(120px,20vw,360px);
    line-height:0.85;
    white-space:nowrap;
}
.me-stat-unit{
    font-size:0.32em;
    color:var(--accent);
    font-style:italic;
    font-weight:400;
    margin-left:6px;
    letter-spacing:-0.02em;
}

.me-entry-lede{
    font-family:var(--font-jp);font-weight:300;
    font-size:clamp(16px,1.3vw,21px);
    line-height:2;letter-spacing:0.04em;
    color:var(--text);
    max-width:720px;
}
.me-entry-lede strong{
    color:var(--paper);font-weight:500;
    background:linear-gradient(to top, rgba(200,255,30,0.18) 0%, rgba(200,255,30,0.18) 35%, transparent 35%);
    padding:0 2px;
}

/* FOOT (quote + source) */
.me-entry-foot{
    grid-area:foot;
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:48px;
    padding-top:32px;
}
.me-entry-quote{
    display:flex;flex-direction:column;gap:12px;
    position:relative;padding-left:20px;
}
.me-quote-mark{
    position:absolute;left:0;top:4px;
    color:var(--accent);font-size:14px;
}
.me-entry-quote blockquote{
    font-family:var(--font-jp);
    font-size:clamp(14px,1.05vw,17px);
    line-height:1.9;letter-spacing:0.03em;
    color:var(--paper);
    font-weight:400;
    margin:0;
    font-feature-settings:"palt";
}
.me-entry-quote cite{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;
    color:var(--text-mute);text-transform:uppercase;
    font-style:normal;
}

.me-entry-source{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px 16px;
    align-content:start;
    padding-top:4px;
    border-top:1px solid var(--line);
    padding:12px 0 0;
}
.me-source-k{
    font-family:var(--font-mono);font-size:9px;letter-spacing:0.25em;
    color:var(--text-dim);text-transform:uppercase;
    padding-top:3px;
}
.me-source-v{
    font-family:var(--font-display);font-style:italic;
    font-size:13px;font-weight:300;
    color:var(--text);line-height:1.5;
}

/* ---------- COLOPHON ---------- */
.me-colophon{padding:120px 0 160px}
.me-colophon-inner{
    display:flex;align-items:center;gap:32px;
    justify-content:center;text-align:center;
}
.me-colophon-line{
    flex:1;height:1px;background:var(--line);max-width:160px;
}
.me-colophon-text{
    font-family:var(--font-display);
    font-size:clamp(18px,1.8vw,26px);
    line-height:1.6;color:var(--text-mute);
    font-weight:300;
    margin:0;
}
.me-colophon-text em{color:var(--paper);font-weight:400}
.me-colophon-jp{
    display:block;
    font-family:var(--font-jp);
    font-size:13px;font-weight:300;
    letter-spacing:0.1em;
    color:var(--text-dim);
    margin-top:8px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
    .me-cover-grid{grid-template-columns:1fr;gap:40px;align-items:start;min-height:auto}
    .me-cover-right{flex-direction:row;flex-wrap:wrap;gap:8px 24px;padding-bottom:0}
    .me-meta-row{flex:1 1 auto;min-width:140px}
    .me-entry-grid,
    .me-entry-alt .me-entry-grid{
        grid-template-columns:1fr;
        grid-template-areas:"meta" "hero" "foot";
        gap:32px;
    }
    .me-entry-meta{position:static;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:16px}
    .me-entry-num{font-size:clamp(40px,8vw,64px)}
}
@media (max-width:768px){
    .me-cover{padding:100px 0 80px}
    .me-entry{padding:100px 0}
    .me-entry::before{top:100px}
    .me-entry-foot{grid-template-columns:1fr;gap:24px}
    .me-stat-value{font-size:clamp(100px,24vw,180px)}
    .me-stat-quote{font-size:clamp(40px,8vw,64px)}
}

/* ============================================================
   UNIVERSAL EDITORIAL CHAPTER OPENER
   Shared by Cases, Message, Company — keeps a consistent magazine
   typography language across the whole site.
   ============================================================ */
.cases-opener,.msg-opener,.id-opener{
    padding:140px 0 100px;
    border-bottom:1px solid var(--line);
    position:relative;
}
.cases-opener-grid,.msg-opener-grid,.id-opener-grid{
    display:grid;
    grid-template-columns:1fr 2.2fr 1fr;
    gap:48px;
    align-items:end;
    min-height:40vh;
}
.co-left{display:flex;flex-direction:column;gap:8px}
.co-index{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.3em;
    color:var(--accent);text-transform:uppercase;
}
.co-chapter{
    font-family:var(--font-display);font-size:14px;font-style:italic;
    color:var(--text-mute);font-weight:300;
}
.co-center .co-title{
    font-family:var(--font-display);
    font-weight:400;
    line-height:0.95;
    letter-spacing:-0.035em;
    color:var(--paper);
    margin:0;
}
.co-title-small{
    display:block;font-style:italic;font-weight:300;
    font-size:clamp(26px,3.2vw,48px);
    color:var(--text-mute);
    margin-bottom:8px;
}
.co-title-huge{
    display:block;font-size:clamp(60px,10vw,180px);
    font-weight:500;line-height:0.92;
}
.co-title-huge em{
    font-style:italic;font-weight:400;color:var(--accent);
}
.co-title-jp{
    font-family:var(--font-jp);font-weight:300;
    font-size:clamp(13px,1vw,16px);
    letter-spacing:0.15em;color:var(--text-mute);
    margin-top:32px;
}
.co-right{
    display:flex;flex-direction:column;gap:12px;
    align-self:end;padding-bottom:16px;
}
.co-meta{
    display:flex;justify-content:space-between;gap:16px;
    padding:8px 0;border-top:1px solid var(--line);
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;
}
.co-meta:last-child{border-bottom:1px solid var(--line)}
.co-meta-k{color:var(--text-mute);text-transform:uppercase}
.co-meta-v{color:var(--paper);text-align:right}

/* Shared colophon */
.cases-colophon{padding:100px 0 140px}
.cases-colophon-inner{
    display:flex;align-items:center;gap:32px;
    justify-content:center;text-align:center;
}

@media (max-width:1100px){
    .cases-opener-grid,.msg-opener-grid,.id-opener-grid{
        grid-template-columns:1fr;gap:32px;align-items:start;min-height:auto;
    }
    .co-right{flex-direction:row;flex-wrap:wrap;gap:8px 24px;padding-bottom:0}
    .co-meta{flex:1 1 auto;min-width:140px}
}

/* ============================================================
   CASE STUDIES — FULL-BLEED EDITORIAL FEATURES
   ============================================================ */
.cases-editorial{
    background:var(--bg);
    color:var(--paper);
    padding:0;
    position:relative;
}

.case-feature{
    position:relative;
    border-bottom:1px solid var(--line);
}
.case-feature-media{
    position:relative;
    width:100%;
    min-height:72vh;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
}
.case-feature-media-tone{
    position:absolute;inset:0;
    background:
        linear-gradient(to bottom, rgba(11,11,13,0.3) 0%, rgba(11,11,13,0.1) 40%, rgba(11,11,13,0.95) 100%),
        linear-gradient(to right, rgba(11,11,13,0.5) 0%, transparent 40%);
    pointer-events:none;
    mix-blend-mode:multiply;
}
.case-feature-media::after{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(11,11,13,0.6) 100%);
    pointer-events:none;
    filter:grayscale(0.3) contrast(1.05);
}
.case-feature-media-caption{
    position:absolute;bottom:28px;left:var(--gutter);
    display:flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.25em;
    color:var(--paper);text-transform:uppercase;
    opacity:0.85;z-index:2;
}
.cf-caption-icon{color:var(--accent)}

.case-feature-body{
    padding:100px 0 140px;
    background:var(--bg);
    position:relative;
}
.case-feature-alt .case-feature-body{background:var(--bg-soft)}

.cf-body-grid{
    display:grid;
    grid-template-columns:1fr 2.2fr;
    gap:48px 80px;
    align-items:start;
}

.cf-meta{
    position:sticky;top:120px;
    display:flex;flex-direction:column;gap:20px;
    padding-top:8px;border-top:1px solid var(--accent);
}
.cf-num{
    font-family:var(--font-display);font-style:italic;
    font-size:clamp(28px,3vw,48px);font-weight:300;
    color:var(--paper);letter-spacing:-0.02em;line-height:1;
    padding-top:16px;
}
.cf-sector{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.25em;
    color:var(--accent);text-transform:uppercase;
}
.cf-facts{
    display:flex;flex-direction:column;gap:10px;
    margin-top:12px;padding-top:20px;border-top:1px solid var(--line);
}
.cf-facts > div{display:flex;flex-direction:column;gap:2px}
.cf-fact-k{
    font-family:var(--font-mono);font-size:9px;letter-spacing:0.3em;
    color:var(--text-dim);text-transform:uppercase;
}
.cf-fact-v{
    font-family:var(--font-display);font-style:italic;
    font-size:14px;font-weight:300;color:var(--text);
    line-height:1.4;
}

.cf-main{
    display:flex;flex-direction:column;gap:40px;
    max-width:820px;
}
.cf-title{
    font-family:var(--font-display);
    font-size:clamp(32px,4.5vw,68px);
    font-weight:400;line-height:1.15;letter-spacing:-0.025em;
    color:var(--paper);margin:0;
}
.cf-title em{
    font-style:italic;font-weight:300;
    color:var(--accent);
}
.cf-title strong{
    font-weight:500;
    background:linear-gradient(to top, rgba(200,255,30,0.22) 0%, rgba(200,255,30,0.22) 35%, transparent 35%);
    padding:0 2px;
}
.cf-lede{
    font-family:var(--font-jp);font-weight:300;
    font-size:clamp(15px,1.2vw,19px);
    line-height:2;letter-spacing:0.04em;
    color:var(--text);margin:0;
    font-feature-settings:"palt";
}
.cf-lede strong{
    color:var(--paper);font-weight:500;
    border-bottom:1px solid var(--accent);
    padding-bottom:1px;
}

/* Pull quote */
.cf-pull{
    position:relative;
    padding:28px 32px 28px 48px;
    border-left:2px solid var(--accent);
    background:rgba(200,255,30,0.04);
}
.cf-pull-mark{
    position:absolute;top:16px;left:20px;
    font-family:var(--font-display);font-style:italic;
    font-size:36px;color:var(--accent);line-height:1;
}
.cf-pull p{
    font-family:var(--font-display);
    font-size:clamp(18px,1.7vw,26px);
    font-weight:400;font-style:italic;
    line-height:1.5;color:var(--paper);
    margin:0 0 12px;
}
.cf-pull cite{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.25em;
    color:var(--text-mute);text-transform:uppercase;font-style:normal;
}

/* Stats row */
.cf-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    padding-top:32px;
    border-top:1px solid var(--line);
}
.cf-stat{display:flex;flex-direction:column;gap:6px}
.cf-stat-v{
    font-family:var(--font-display);
    font-size:clamp(36px,4.5vw,64px);font-weight:500;
    line-height:1;letter-spacing:-0.03em;color:var(--paper);
    font-variant-numeric:tabular-nums;
}
.cf-stat-u{
    font-size:0.45em;font-style:italic;font-weight:400;
    color:var(--accent);margin-left:2px;
}
.cf-stat-u2{font-size:1em;margin:0}
.cf-stat-k{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;
    color:var(--text-mute);text-transform:uppercase;line-height:1.5;
}

@media (max-width:1100px){
    .case-feature-media{min-height:50vh}
    .cf-body-grid{grid-template-columns:1fr;gap:32px}
    .cf-meta{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:16px}
    .cf-facts{flex-direction:row;flex-wrap:wrap;gap:16px;width:100%;margin-top:8px}
    .cf-facts > div{flex:1 1 140px}
    .cf-stats{grid-template-columns:1fr;gap:20px}
}
@media (max-width:768px){
    .case-feature-body{padding:60px 0 80px}
}

/* ============================================================
   MESSAGE (CEO Interview)
   ============================================================ */
.message-editorial{
    background:var(--bg-soft);
    color:var(--paper);
    padding:0;
}
.msg-interview{padding:100px 0 160px}
.msg-interview-grid{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:80px;
    align-items:start;
}

.msg-portrait-col{
    position:sticky;top:120px;
    display:flex;flex-direction:column;gap:48px;
}
.msg-portrait-frame{
    position:relative;
    aspect-ratio:3/4;
    background:linear-gradient(135deg, #0d0f14 0%, #1a1d26 50%, #0d0f14 100%);
    border:1px solid var(--line-strong);
    overflow:hidden;
}
.msg-portrait-frame::before{
    content:"";position:absolute;inset:14px;
    border:1px solid var(--line);pointer-events:none;
}
.msg-portrait-mark{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:16px;
}
.msg-portrait-initial{
    font-family:var(--font-display);font-style:italic;
    font-size:clamp(120px,16vw,240px);font-weight:300;
    color:var(--paper);opacity:0.4;
    letter-spacing:-0.05em;line-height:1;
}
.msg-portrait-badge{
    font-size:12px;color:var(--accent);
    letter-spacing:0.3em;
}
.msg-portrait-caption{
    position:absolute;bottom:20px;left:20px;right:20px;
    display:flex;flex-direction:column;gap:4px;
    padding-top:16px;border-top:1px solid var(--line);
}
.msg-portrait-name{
    font-family:var(--font-display);font-style:italic;font-weight:400;
    font-size:22px;color:var(--paper);line-height:1;
}
.msg-portrait-role{
    font-family:var(--font-mono);font-size:9px;letter-spacing:0.22em;
    color:var(--text-mute);text-transform:uppercase;
}

.msg-signature{
    display:flex;flex-direction:column;gap:8px;
    color:var(--text-mute);
    opacity:0.7;
    padding-top:20px;border-top:1px dashed var(--line);
}
.msg-signature svg{width:100%;max-width:260px;height:auto}
.msg-signature-label{
    font-family:var(--font-mono);font-size:9px;letter-spacing:0.3em;
    color:var(--text-dim);text-transform:uppercase;
}

.msg-qa-col{
    display:flex;flex-direction:column;gap:56px;
}
.msg-qa{
    display:grid;
    grid-template-columns:60px 1fr;
    gap:16px 32px;
    padding-bottom:56px;
    border-bottom:1px solid var(--line);
}
.msg-qa-last{border-bottom:none}
.msg-q-num{
    font-family:var(--font-display);font-style:italic;
    font-size:clamp(32px,3.5vw,52px);font-weight:300;
    color:var(--accent);line-height:1;
    letter-spacing:-0.02em;grid-row:1 / span 2;
}
.msg-q{
    font-family:var(--font-display);
    font-size:clamp(22px,2.2vw,34px);font-weight:400;
    line-height:1.35;letter-spacing:-0.015em;
    color:var(--paper);margin:0;
    padding-top:8px;
}
.msg-a{
    grid-column:2;
    display:flex;flex-direction:column;gap:18px;
    padding-top:12px;
}
.msg-a p{
    font-family:var(--font-jp-serif,var(--font-jp));
    font-size:clamp(14px,1.1vw,17px);
    line-height:2.1;letter-spacing:0.04em;
    color:var(--text);margin:0;font-weight:400;
    font-feature-settings:"palt";
}
.msg-a p strong{
    color:var(--paper);font-weight:500;
    background:linear-gradient(to top, rgba(200,255,30,0.18) 0%, rgba(200,255,30,0.18) 40%, transparent 40%);
    padding:0 2px;
}
.msg-a p em{
    font-style:italic;color:var(--accent-2,var(--accent));font-weight:500;
}
.msg-signature-line{
    margin-top:12px!important;
    color:var(--text-mute)!important;
    font-style:italic;
}
.msg-signature-line em{color:var(--accent)!important}

@media (max-width:1100px){
    .msg-interview-grid{grid-template-columns:1fr;gap:48px}
    .msg-portrait-col{position:static;flex-direction:row;gap:24px;align-items:flex-start}
    .msg-portrait-frame{flex:1;max-width:300px}
    .msg-signature{flex:1;padding-top:0;border-top:none;border-left:1px dashed var(--line);padding-left:20px}
}
@media (max-width:768px){
    .msg-portrait-col{flex-direction:column}
    .msg-signature{border-left:none;padding-left:0}
    .msg-qa{grid-template-columns:1fr;gap:12px}
    .msg-q-num{grid-row:auto}
    .msg-a{grid-column:1}
}

/* ============================================================
   HORIZONTAL STATEMENT (kept, slight polish)
   ============================================================ */
.horizontal-section{position:relative;height:100vh;overflow:hidden;background:var(--bg)}
.horizontal-pin{height:100vh;position:relative;display:flex;align-items:center}
.horizontal-track{display:flex;will-change:transform}
.horizontal-slide{
    width:100vw;min-width:100vw;height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:0 var(--gutter);position:relative;
}
.h-slide-1{background:var(--bg)}
.h-slide-2{background:var(--bg-soft)}
.h-slide-3{background:var(--bg);color:var(--paper)}
.h-statement-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:1100px;text-align:center}
.h-statement{
    font-family:var(--font-display);
    font-size:clamp(44px,7vw,120px);font-weight:300;font-style:italic;
    line-height:1.1;letter-spacing:-0.035em;color:var(--text-mute);
    margin:0;
}
.h-statement em{font-style:italic;color:var(--accent);font-weight:500}
.h-statement-final{color:var(--paper);font-style:normal;font-weight:400}
.h-statement-final em{color:var(--accent-2,var(--accent))}
.h-statement-jp{font-family:var(--font-jp);font-size:clamp(14px,1.4vw,20px);font-weight:300;color:var(--text-dim);letter-spacing:0.25em;margin:0}
.h-statement-jp-final{font-size:clamp(18px,1.8vw,26px);font-weight:400;color:var(--text-mute)}

/* ============================================================
   COMPANY / IDENTITY — FACT SHEET
   ============================================================ */
.identity-editorial{
    background:var(--bg);
    color:var(--paper);
    padding:0;
}
.id-factsheet{padding:100px 0 140px}
.id-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px 48px;
}
.id-block{
    display:flex;flex-direction:column;gap:16px;
    padding-top:24px;border-top:1px solid var(--accent);
    position:relative;
}
.id-block-wide{grid-column:1 / -1;margin-top:20px;border-top-color:var(--line-strong)}
.id-block-index{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;
    color:var(--accent);text-transform:uppercase;
}
.id-block-title{
    font-family:var(--font-display);
    font-size:clamp(24px,2.2vw,36px);
    font-weight:400;font-style:italic;
    color:var(--paper);line-height:1.1;letter-spacing:-0.02em;
}
.id-block-title-jp{
    font-family:var(--font-jp);font-weight:300;
    font-size:12px;letter-spacing:0.2em;
    color:var(--text-mute);
    margin-bottom:8px;
}
.id-dl{margin:0;display:flex;flex-direction:column;gap:0}
.id-dl-row{
    display:grid;grid-template-columns:120px 1fr;
    gap:16px;padding:16px 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
}
.id-dl-row:last-child{border-bottom:none}
.id-dl dt{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;
    color:var(--text-mute);text-transform:uppercase;
    margin:0;
}
.id-dl dd{
    margin:0;font-family:var(--font-jp);
    font-size:clamp(13px,1vw,16px);line-height:1.7;
    color:var(--paper);font-weight:400;letter-spacing:0.03em;
    font-feature-settings:"palt";
}
.id-sub{
    display:block;font-family:var(--font-mono);
    font-size:10px;letter-spacing:0.12em;
    color:var(--text-mute);
    margin-top:6px;text-transform:none;
    font-feature-settings:normal;
    line-height:1.6;
}
.id-mono{font-family:var(--font-mono);font-size:13px;letter-spacing:0.08em;color:var(--paper)}
.identity-link{color:var(--accent);border-bottom:1px solid var(--accent-soft,rgba(200,255,30,0.3));transition:border-color 0.3s}
.identity-link:hover{border-color:var(--accent)}

.id-practice{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.id-practice li{
    display:grid;
    grid-template-columns:36px 1fr;
    gap:12px;padding:12px 0;
    border-bottom:1px dashed var(--line);
    align-items:baseline;
}
.id-practice li:last-child{border-bottom:none}
.id-practice-num{
    font-family:var(--font-display);font-style:italic;
    font-size:18px;font-weight:400;color:var(--accent);
}
.id-practice-text{
    display:flex;flex-direction:column;gap:4px;
    font-family:var(--font-display);font-size:17px;font-weight:400;
    color:var(--paper);line-height:1.3;
}

.id-manifesto{
    display:grid;grid-template-columns:1fr 1fr;gap:48px;
    padding-top:20px;
}
.id-man-item{display:flex;flex-direction:column;gap:14px}
.id-man-k{
    font-family:var(--font-display);font-style:italic;
    font-size:clamp(22px,2vw,32px);font-weight:400;
    color:var(--accent);letter-spacing:-0.01em;line-height:1;
}
.id-man-v{
    font-family:var(--font-jp-serif,var(--font-jp));font-weight:400;
    font-size:clamp(16px,1.3vw,21px);line-height:2;
    color:var(--paper);margin:0;letter-spacing:0.04em;
    font-feature-settings:"palt";
}
.id-man-sub{margin-top:6px}

@media (max-width:1100px){
    .id-grid{grid-template-columns:1fr 1fr;gap:32px}
    .id-manifesto{grid-template-columns:1fr;gap:32px}
}
@media (max-width:768px){
    .id-grid{grid-template-columns:1fr}
    .id-dl-row{grid-template-columns:1fr;gap:4px}
}

/* ============================================================
   PARTNERS — TECH STACK MANIFESTO
   ============================================================ */
.partners-editorial{
    background:var(--bg-soft);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:0;position:relative;
    overflow:hidden;
}
.partners-inner{padding:140px 0 100px;position:relative}

.partners-head{
    display:flex;flex-direction:column;gap:20px;
    margin-bottom:80px;max-width:1000px;
}
.partners-index{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.3em;
    color:var(--accent);text-transform:uppercase;
}
.partners-heading{
    font-family:var(--font-display);
    font-weight:400;line-height:0.95;letter-spacing:-0.035em;
    color:var(--paper);margin:0;
}
.partners-heading-small{
    display:block;font-style:italic;font-weight:300;
    font-size:clamp(22px,2.8vw,42px);color:var(--text-mute);
    margin-bottom:8px;
}
.partners-heading-huge{
    display:block;
    font-size:clamp(56px,9vw,160px);font-weight:500;line-height:0.92;
}
.partners-heading-huge em{font-style:italic;font-weight:400;color:var(--accent)}
.partners-heading-jp{
    font-family:var(--font-jp);font-weight:300;
    font-size:clamp(13px,1vw,16px);
    letter-spacing:0.15em;color:var(--text-mute);margin:0;
}

.partners-list{
    display:flex;flex-direction:column;gap:0;
    border-top:1px solid var(--line-strong);
    margin-bottom:80px;
}
.partner-row{
    display:grid;
    grid-template-columns:60px 1fr 2fr;
    gap:24px;
    padding:22px 0;border-bottom:1px solid var(--line);
    align-items:baseline;
    transition:padding 0.4s var(--ease-out-expo),color 0.4s;
    cursor:default;
}
.partner-row:hover{padding-left:20px}
.partner-row:hover .partner-name{color:var(--accent)}
.partner-idx{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.25em;
    color:var(--text-dim);text-transform:uppercase;
}
.partner-name{
    font-family:var(--font-display);font-style:italic;font-weight:400;
    font-size:clamp(24px,2.8vw,42px);color:var(--paper);
    line-height:1;letter-spacing:-0.015em;
    transition:color 0.4s;
}
.partner-tag{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;
    color:var(--text-mute);text-transform:uppercase;
    justify-self:end;
}

.partners-underline-marquee{
    overflow:hidden;
    border-top:1px dashed var(--line);
    padding:10px 0;
    opacity:0.4;
    /* 両端フェードで"装飾"の主張を弱める */
    mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.partners-underline-track{
    display:flex;gap:48px;
    animation:partnerScroll 120s linear infinite;will-change:transform;
    white-space:nowrap;
}
.partners-underline-track span{
    font-family:var(--font-mono);font-size:9px;letter-spacing:0.32em;
    color:var(--text-dim);text-transform:uppercase;
}
@keyframes partnerScroll{to{transform:translateX(-50%)}}

@media (max-width:900px){
    .partner-row{grid-template-columns:50px 1fr;grid-template-rows:auto auto;gap:4px 20px}
    .partner-tag{grid-column:2;justify-self:start}
}

/* ============================================================
   CONTACT — EDITORIAL CLOSING
   ============================================================ */
.contact-editorial{
    padding:180px 0 120px;
    background:var(--bg);
    position:relative;
    overflow:hidden;
}
.contact-editorial::before{
    content:"";
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(200,255,30,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 0%, rgba(255,91,31,0.04) 0%, transparent 60%);
    pointer-events:none;
    z-index:0;
}
.contact-editorial .container{position:relative;z-index:2}

.ct-chapter-mark{
    display:flex;justify-content:space-between;align-items:baseline;
    gap:24px;padding-bottom:24px;
    border-bottom:1px solid var(--line);
    margin-bottom:60px;
}
.ct-chapter-index{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.3em;
    color:var(--accent);text-transform:uppercase;
}
.ct-chapter-label{
    font-family:var(--font-display);font-size:14px;font-style:italic;
    color:var(--text-mute);font-weight:300;
}

.ct-huge{
    font-family:var(--font-display);font-weight:400;
    line-height:0.92;letter-spacing:-0.04em;
    color:var(--paper);margin:0 0 24px;
}
.ct-line{display:block}
.ct-line-1{
    font-style:italic;font-weight:300;
    font-size:clamp(40px,6vw,100px);
    color:var(--text-mute);
    padding-left:4vw;
}
.ct-line-1 em{font-style:italic;color:var(--accent)}
.ct-line-2{
    font-weight:500;
    font-size:clamp(68px,13vw,240px);
    letter-spacing:-0.045em;
    line-height:0.92;
}
.ct-line-3{
    font-weight:500;
    font-size:clamp(68px,13vw,240px);
    letter-spacing:-0.045em;
    line-height:0.92;
    padding-left:8vw;
}
.ct-accent-dot{color:var(--accent)}
.ct-jp{
    font-family:var(--font-jp);font-weight:300;
    font-size:clamp(14px,1.2vw,18px);
    letter-spacing:0.18em;color:var(--text-mute);
    margin:0 0 80px;
}

.ct-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:start;
    padding-top:60px;
    border-top:1px solid var(--line);
    margin-bottom:100px;
}
.ct-col-lede .ct-lede{
    font-family:var(--font-jp-serif,var(--font-jp));
    font-size:clamp(15px,1.3vw,20px);
    line-height:2.1;letter-spacing:0.04em;
    color:var(--text);margin:0;
    font-feature-settings:"palt";
    max-width:520px;
}
.ct-col-lede .ct-lede strong{
    color:var(--paper);font-weight:500;
    background:linear-gradient(to top, rgba(200,255,30,0.22) 0%, rgba(200,255,30,0.22) 38%, transparent 38%);
    padding:0 2px;
}

.ct-col-channels{display:flex;flex-direction:column;gap:32px}
.ct-primary{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:4px 20px;
    padding:28px 32px;
    border:1px solid var(--line-strong);
    background:transparent;
    text-decoration:none;
    transition:background 0.5s var(--ease-out-expo),border-color 0.5s,padding 0.5s var(--ease-out-expo);
}
.ct-primary:hover{background:var(--accent);border-color:var(--accent);padding-left:40px}
.ct-primary:hover .ct-primary-k,.ct-primary:hover .ct-primary-v{color:var(--ink)}
.ct-primary:hover .ct-primary-arrow{transform:rotate(45deg);color:var(--ink)}
.ct-primary-k{
    grid-column:1;grid-row:1;
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;
    color:var(--text-mute);text-transform:uppercase;transition:color 0.5s;
}
.ct-primary-v{
    grid-column:1;grid-row:2;
    font-family:var(--font-mono);font-size:clamp(16px,1.8vw,22px);
    color:var(--paper);letter-spacing:0.08em;font-weight:500;
    transition:color 0.5s;
}
.ct-primary-arrow{
    grid-column:2;grid-row:1 / span 2;
    display:flex;align-items:center;justify-content:center;
    color:var(--paper);
    transition:transform 0.5s var(--ease-out-expo),color 0.5s;
}

.ct-secondary{
    display:flex;flex-direction:column;gap:0;
}
.ct-sec-row{
    display:flex;justify-content:space-between;align-items:baseline;
    gap:16px;padding:12px 0;
    border-bottom:1px solid var(--line);
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;
}
.ct-sec-row:first-child{border-top:1px solid var(--line)}
.ct-sec-k{color:var(--text-mute);text-transform:uppercase}
.ct-sec-v{color:var(--paper);text-align:right}

.ct-colophon{
    display:flex;align-items:center;gap:20px;
    padding-top:40px;
}
.ct-colophon-line{flex:1;height:1px;background:var(--line)}
.ct-colophon-content{
    display:flex;align-items:center;gap:14px;
    text-align:center;
}
.ct-colophon-mark{color:var(--accent);font-size:12px}
.ct-colophon-text{
    font-family:var(--font-display);font-weight:300;
    font-size:clamp(16px,1.5vw,22px);line-height:1.6;
    color:var(--text-mute);margin:0;
}
.ct-colophon-text em{color:var(--paper);font-style:italic;font-weight:400}
.ct-colophon-jp{
    display:block;font-family:var(--font-jp);
    font-size:12px;letter-spacing:0.12em;color:var(--text-dim);
    font-weight:300;margin-top:4px;
}

@media (max-width:1100px){
    .ct-grid{grid-template-columns:1fr;gap:40px}
    .ct-line-1{padding-left:0}
    .ct-line-3{padding-left:0}
}
@media (max-width:768px){
    .ct-chapter-mark{flex-direction:column;align-items:flex-start;gap:8px}
    .ct-colophon{flex-direction:column;gap:12px}
    .ct-colophon-line{display:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
    padding:60px 0 40px;border-top:1px solid var(--line);background:var(--bg-soft);
}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:40px}
.footer-logo{font-family:var(--font-display);font-size:28px;font-weight:500;font-style:italic;letter-spacing:-0.01em;color:var(--paper)}
.footer-logo .text-accent{color:var(--accent);font-weight:700}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-link{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--text-mute);transition:color 0.3s;
}
.footer-link:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:0.15em;color:var(--text-dim)}
.footer-credit{font-family:var(--font-jp);font-size:11px;letter-spacing:0.08em;color:var(--text-dim)}

/* ============================================================
   FLOATING IMAGE (expertise hover)
   ============================================================ */
.floating-image{
    position:fixed;top:0;left:0;z-index:500;
    width:280px;height:360px;overflow:hidden;
    opacity:0;transform:scale(0.9);pointer-events:none;
    border:1px solid var(--accent);
    will-change:transform,opacity;
}
.floating-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(0.2) contrast(1.1)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal-ready{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo)}
.reveal-ready.is-visible{opacity:1;transform:translateY(0)}

/* fix: reveal animation no longer relies on translateY(60%) which can clip during scroll.
   Now uses opacity + smaller translate that never exceeds padding compensation */
.heading-reveal .heading-line{opacity:0;transform:translateY(24px);transition:opacity 0.9s var(--ease-out-expo),transform 0.9s var(--ease-out-expo)}
.heading-reveal.is-visible .heading-line{opacity:1;transform:translateY(0)}

.case-card.reveal-ready{transform:translateY(48px)}
.identity-row.reveal-ready{transform:translateY(20px)}
.expertise-item.reveal-ready{transform:translateY(24px)}
.me-entry.reveal-ready{transform:translateY(32px)}
.me-cover.reveal-ready,.me-colophon.reveal-ready{transform:translateY(20px)}

.philosophy-text-block.reveal-ready{transform:translateY(40px)}
.philosophy-jp-block.reveal-ready,.philosophy-divider.reveal-ready{transform:translateY(20px)}

.contact-sub.reveal-ready,.contact-heading-jp.reveal-ready{transform:translateY(16px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
    .philosophy-grid{grid-template-columns:1fr;gap:48px}
    .cases-grid{grid-template-columns:repeat(2,1fr)}
    .message-layout{grid-template-columns:1fr;gap:48px}
    .message-visual{position:relative;top:0}
    .expertise-item-inner{grid-template-columns:60px 1fr 1.2fr auto;padding:32px 16px}
    .expertise-desc{grid-column:2 / span 2;max-width:100%}
    .expertise-tags{grid-column:2 / span 2}
}

@media (max-width:1100px){
    .hero-body-grid{grid-template-columns:1fr;gap:24px}
    /* fix: on tablet, shrink 3D to top-right corner and reduce opacity so it never overlaps title */
    .hero-3d-wrap{
        width:60%;
        height:55%;
        top:auto;
        bottom:8%;
        right:-8%;
        opacity:0.28;
    }
    .hero-3d-ring-text{display:none} /* fix: hide ring text on tablet (too noisy over title) */
    .hero-left{position:relative;z-index:10} /* fix: bumped from 2 to 10 to guarantee above 3D */
}

@media (max-width:768px){
    /* fix: on mobile, 3D sphere sinks behind bottom-right corner only */
    .hero-3d-wrap{
        width:85%;
        height:40%;
        bottom:-10%;
        right:-20%;
        opacity:0.18;
    }
}

@media (max-width:900px){
    :root{--frame:8px;--nav-h:64px}
    .hero-section{padding-top:calc(var(--nav-h) + 24px);padding-bottom:24px}
    .hero-meta-row{grid-template-columns:1fr;gap:8px;padding-bottom:16px;margin-bottom:24px}
    .hero-meta-center,.hero-meta-right{text-align:left}
    .hero-title{font-size:clamp(48px,15vw,100px);margin-bottom:24px}
    .hero-bottom{grid-template-columns:1fr;gap:12px;text-align:left}
    .hero-scroll-indicator{justify-content:flex-start}
    .hero-cta{padding:14px 22px 14px 20px}
    .hero-cta-label{font-size:11px}
    .hero-cta-ghost{padding:13px 18px}
    .philosophy-section,.expertise-section,.metrics-editorial,.cases-section,.message-section,.identity-section,.contact-section{padding:100px 0 120px}
    .cases-grid{grid-template-columns:1fr}
    .expertise-item-inner{grid-template-columns:1fr;gap:16px;padding:28px 12px}
    .expertise-arrow{justify-self:end;margin-top:-24px}
    .identity-row{grid-template-columns:1fr;gap:8px;padding:20px 0}
    .menu-content{flex-direction:column;gap:40px;padding-top:calc(var(--nav-h) + 40px)}
    .menu-col-info{padding-bottom:0}
    .ph-line-huge{font-size:clamp(52px,13vw,90px)}
    .ph-line-small{font-size:clamp(22px,5vw,36px)}
    .ph-line-mid{font-size:clamp(28px,6.5vw,48px);padding-left:0}
    .philosophy-divider{margin:48px 0 32px}
    .footer-top{flex-direction:column;align-items:flex-start}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}

@media (max-width:600px){
    .hero-title{font-size:clamp(44px,16vw,78px)}
    .section-header{flex-wrap:wrap;gap:12px;margin-bottom:40px}
    .section-line{display:none}
    .expertise-heading,.cases-heading,.contact-heading,.identity-heading{font-size:clamp(38px,12vw,64px)}
    .h-statement{font-size:clamp(32px,10vw,56px)}
    .floating-image{display:none}
    .nav{padding:0 calc(var(--gutter) + 4px)}
    .ef-vlabel{display:none}
    .sound-btn{bottom:12px;right:12px;padding:8px 12px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
    .marquee-track,.partners-track{animation:none!important}
    #webgl-canvas,#hero-3d-canvas{display:none}
    .hero-bg-gradient{opacity:1}
    .reveal-ready,.heading-reveal .heading-line{opacity:1!important;transform:none!important}
}

/* ============================================================
   FOCUS (A11Y)
   ============================================================ */
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.skip-link{
    position:absolute;top:-100px;left:20px;z-index:99999;
    background:var(--accent);color:var(--ink);padding:12px 20px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;
    transition:top 0.3s;
}
.skip-link:focus{top:20px}

/* Screen-reader only (SEO/A11Y helper — visually hidden but crawlable) */
.sr-only{
    position:absolute!important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}