:root{
  --ink:#0A1F33;
  --ink-2:#23374F;
  --ink-soft:#52678A;
  --base:#FFFFFF;
  --off:#FAFBFD;
  --muted:#F3F6FA;
  --border:#E5EBF1;
  --border-soft:#EEF2F6;

  --cyan-bright:#9FC9D0;
  --cyan:#7FB4BF;
  --sky:#A9C8DC;
  --blue:#7E9DC5;
  --purple:#B7A5C7;

  --grad-primary:linear-gradient(135deg,#B4DEE6 0%,#A5C2D9 45%,#B7A3C5 100%);
  --grad-cta:linear-gradient(135deg,#8FC9D6 0%,#8AA7CD 50%,#A58DB6 100%);
  --grad-deep:linear-gradient(135deg,#1A3148 0%,#2E476E 50%,#5A4782 100%);

  /* Layered shadows for 3D floating cards */
  --fl-1:0 1px 2px rgba(10,31,51,.04),0 2px 6px rgba(10,31,51,.04),0 12px 24px -10px rgba(10,31,51,.06);
  --fl-2:0 1px 2px rgba(10,31,51,.04),0 4px 10px rgba(10,31,51,.05),0 20px 36px -14px rgba(30,60,130,.08),0 40px 80px -30px rgba(130,110,170,.1);
  --fl-3:0 2px 4px rgba(10,31,51,.05),0 6px 14px rgba(10,31,51,.07),0 28px 52px -18px rgba(30,60,130,.12),0 56px 100px -40px rgba(130,110,170,.14);

  --ff-ja:"Zen Kaku Gothic New","Noto Sans JP",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ff-en:"Space Grotesk","Inter",system-ui,-apple-system,sans-serif;
  --header-h:64px;
  --max:1200px;
  --gutter:clamp(20px,4vw,40px);
  --section-y:clamp(88px,11vw,140px);
}
@media (max-width:767px){
  :root{--header-h:56px;--section-y:88px}
}

html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--ff-ja);
  color:var(--ink);
  background:var(--base);
  font-size:15px;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.7;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Subtle background grid */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:radial-gradient(rgba(10,31,51,.04) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 40%,#000 30%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 40%,#000 30%,transparent 85%);
  pointer-events:none;
  z-index:0;
  opacity:.55;
}

.container{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:2;
}

/* Gradient text accent */
.grad-text{
  background:var(--grad-primary);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:gradShift 10s ease-in-out infinite;
  display:inline-block;
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ============ Header ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--border);
  box-shadow:0 2px 16px -10px rgba(10,31,51,.18);
}
.header-inner{
  height:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--ff-en)}
.logo-globe{
  width:28px;height:28px;object-fit:contain;display:block;
  filter:drop-shadow(0 0 5px rgba(143,192,203,.45));
  animation:globeBreathe 4.5s ease-in-out infinite;
}
@keyframes globeBreathe{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(143,192,203,.4))}
  50%{transform:scale(1.06);filter:drop-shadow(0 0 9px rgba(165,141,182,.5))}
}
.logo-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--grad-primary);background-size:200% 200%;
  animation:gradShift 5s ease-in-out infinite,pulseDot 2.4s ease-in-out infinite;
  box-shadow:0 0 10px rgba(143,192,203,.45);
}
@keyframes pulseDot{
  0%,100%{transform:scale(1);box-shadow:0 0 10px rgba(143,192,203,.45)}
  50%{transform:scale(1.2);box-shadow:0 0 16px rgba(165,141,182,.55)}
}
.logo-mark{
  font-size:22px;font-weight:600;
  line-height:1;color:var(--ink);
  letter-spacing:-.04em;
}
.logo-sub{
  font-size:10px;font-weight:500;color:var(--ink-soft);
  letter-spacing:.22em;margin-left:4px;
  text-transform:uppercase;
}

.gnav-list{display:flex;gap:26px;align-items:center}
.gnav-list a{
  font-family:var(--ff-en);
  font-size:13px;font-weight:500;
  color:var(--ink);letter-spacing:.02em;
  position:relative;padding:6px 2px;
  transition:color .2s ease;
}
.gnav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grad-primary);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s ease;
}
.gnav-list a:hover{color:var(--blue)}
.gnav-list a:hover::after{transform:scaleX(1)}

.btn-contact{
  display:inline-block;padding:9px 18px !important;
  background:var(--grad-cta);background-size:200% 200%;
  color:var(--base) !important;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.04em !important;
  transition:background-position .6s ease,transform .2s ease,box-shadow .3s ease;
  box-shadow:0 4px 14px -4px rgba(126,157,197,.55);
}
.btn-contact::after{display:none !important}
.btn-contact:hover{
  background-position:100% 50%;color:var(--base) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 22px -4px rgba(165,141,182,.6);
}

.hamburger{display:none;width:40px;height:40px;position:relative}
.hamburger span{
  position:absolute;left:10px;right:10px;height:1.2px;background:var(--ink);
  transition:transform .3s ease,opacity .2s ease,top .3s ease;
}
.hamburger span:nth-child(1){top:14px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:24px}
.hamburger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){top:19px;transform:rotate(-45deg)}

@media (max-width:899px){
  /* Remove backdrop-filter on header: it creates a containing block
     that breaks position:fixed on descendant .gnav overlay. */
  .site-header{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.94);
  }
  .site-header.is-scrolled{background:rgba(255,255,255,.98)}
  .hamburger{display:block}
  .gnav{
    position:fixed;inset:var(--header-h) 0 0 0;
    background:#fff;
    padding:28px var(--gutter) 60px;
    transform:translateY(-120%);
    visibility:hidden;
    transition:transform .4s cubic-bezier(.7,0,.3,1),visibility 0s linear .4s;
    overflow-y:auto;
    z-index:99;
  }
  .gnav.is-open{
    transform:translateY(0);
    visibility:visible;
    transition:transform .4s cubic-bezier(.7,0,.3,1),visibility 0s;
  }
  .gnav-list{flex-direction:column;align-items:flex-start;gap:0}
  .gnav-list li{width:100%;border-bottom:1px solid var(--border-soft)}
  .gnav-list a{display:block;font-size:15px;padding:18px 0;width:100%}
  .gnav-list a::after{display:none}
  .gnav-cta{border-bottom:0 !important;margin-top:20px}
  .btn-contact{display:block !important;text-align:center;padding:14px !important;font-size:13px !important}
}

/* ============ Orbs ============ */
.orb{
  position:absolute;border-radius:50%;
  filter:blur(70px);opacity:.4;
  pointer-events:none;will-change:transform;
}
.orb-cyan{background:radial-gradient(circle at 40% 40%,#E8F4F7,#9FC9D0 70%)}
.orb-sky{background:radial-gradient(circle at 40% 40%,#DEE9F2,#A9C8DC 70%)}
.orb-purple{background:radial-gradient(circle at 40% 40%,#ECE4F1,#B7A5C7 70%)}

.section-orbs{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}

/* ============ Hero ============ */
.hero{
  position:relative;
  min-height:90svh;
  display:flex;align-items:center;
  background:transparent;color:var(--ink);
  padding-top:var(--header-h);
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg .orb-1{
  width:640px;height:640px;left:-10%;top:-15%;
  background:radial-gradient(circle at 40% 40%,#EAF2F5,#A9C8DC 70%);
  opacity:.52;
  animation:orbFloat1 18s ease-in-out infinite;
}
.hero-bg .orb-2{
  width:560px;height:560px;right:-12%;top:8%;
  background:radial-gradient(circle at 40% 40%,#EEE6F0,#B7A5C7 70%);
  opacity:.48;
  animation:orbFloat2 22s ease-in-out infinite;
}
.hero-bg .orb-3{
  width:440px;height:440px;left:30%;bottom:-18%;
  background:radial-gradient(circle at 50% 50%,#E8F2F4,#9FC9D0 70%);
  opacity:.4;
  animation:orbFloat3 20s ease-in-out infinite;
}
@keyframes orbFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(6%,8%) scale(1.08)}
  66%{transform:translate(-4%,10%) scale(.95)}
}
@keyframes orbFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-8%,6%) scale(1.08)}
}
@keyframes orbFloat3{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(10%,-6%) scale(1.12)}
  80%{transform:translate(-6%,-10%) scale(.92)}
}

.dot-field{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(10,31,51,.05) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 80%);
  opacity:.75;
}

/* ============ Single scroll-following globe ============ */
.bg-globe{
  position:fixed;
  top:50vh;left:50vw;
  translate:calc(-50% + 30vw) -50%;
  width:clamp(440px,48vw,680px);
  aspect-ratio:1;
  pointer-events:none;
  z-index:0;
  will-change:translate,scale,opacity;
}
.bg-globe .globe-svg-bg{
  width:100%;height:100%;overflow:visible;
  filter:
    drop-shadow(0 24px 48px rgba(130,120,160,.16))
    drop-shadow(0 8px 20px rgba(143,201,214,.14));
}
.bg-globe .globe-sphere{
  stroke:url(#globeCountry);stroke-opacity:.7;
  stroke-width:1.1;vector-effect:non-scaling-stroke;fill:none;
}
.bg-globe .globe-graticule path{
  fill:none;stroke:url(#globeCountry);stroke-opacity:.45;
  stroke-width:.5;vector-effect:non-scaling-stroke;pointer-events:none;
}
.bg-globe .globe-land path{
  fill:none;stroke:url(#globeMetal);
  stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.bg-globe .globe-orbits{transform-origin:center;transform-box:fill-box}
.bg-globe .orbit{opacity:.4;transform-origin:0 0;transform-box:view-box}
.bg-globe .orbit-1{animation:orbitSpin1 32s linear infinite}
.bg-globe .orbit-2{animation:orbitSpin2 24s linear infinite;transform:rotate(22deg)}
.bg-globe .orbit-3{animation:orbitSpin3 28s linear infinite reverse;transform:rotate(-18deg)}
.bg-globe .globe-whirl{
  position:absolute;inset:-10%;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(180,222,230,0)   0deg,
    rgba(180,222,230,.45) 50deg,
    rgba(143,167,205,.65) 130deg,
    rgba(183,163,197,.6)  210deg,
    rgba(180,222,230,.45) 300deg,
    rgba(180,222,230,0)   360deg);
  -webkit-mask:radial-gradient(circle, transparent 50%, #000 54%, #000 60%, transparent 64%);
          mask:radial-gradient(circle, transparent 50%, #000 54%, #000 60%, transparent 64%);
  filter:blur(4px);
  animation:whirlSpin 14s linear infinite;
  opacity:.7;
  z-index:0;
}

/* Main content layers above the bg-globe */
main,
.ticker,
.site-footer{
  position:relative;
  z-index:1;
}

/* Scroll-driven journey: size/position changes across sections */
@supports (animation-timeline: scroll()){
  .bg-globe{
    animation:bgGlobeJourney linear both;
    animation-timeline:scroll(root);
    animation-range:0 100%;
  }
  /* Hero position → smooth orbital journey through the page */
  @keyframes bgGlobeJourney{
      0% {translate:calc(-50% + 30vw) calc(-50%       ); scale:1.0;  opacity:1}
      8% {translate:calc(-50% + 28vw) calc(-50% - 2vh); scale:1.02; opacity:.92}
     16% {translate:calc(-50% + 22vw) calc(-50% - 6vh); scale:1.06; opacity:.78}
     24% {translate:calc(-50% + 12vw) calc(-50% - 9vh); scale:1.12; opacity:.68}
     32% {translate:calc(-50%        )calc(-50% - 10vh);scale:1.18; opacity:.6}
     40% {translate:calc(-50% - 12vw) calc(-50% - 8vh); scale:1.24; opacity:.56}
     48% {translate:calc(-50% - 22vw) calc(-50% - 3vh); scale:1.3;  opacity:.54}
     56% {translate:calc(-50% - 24vw) calc(-50% + 4vh); scale:1.34; opacity:.52}
     64% {translate:calc(-50% - 18vw) calc(-50% + 10vh);scale:1.34; opacity:.5}
     72% {translate:calc(-50% - 6vw)  calc(-50% + 14vh);scale:1.3;  opacity:.46}
     80% {translate:calc(-50% + 10vw) calc(-50% + 12vh);scale:1.24; opacity:.4}
     88% {translate:calc(-50% + 22vw) calc(-50% + 7vh); scale:1.16; opacity:.3}
     94% {translate:calc(-50% + 28vw) calc(-50% + 2vh); scale:1.1;  opacity:.18}
    100% {translate:calc(-50% + 30vw) calc(-50% - 2vh); scale:1.05; opacity:.1}
  }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: scroll()){
  .bg-globe{
    opacity:1;
    transition:translate .6s cubic-bezier(.2,.7,.2,1),
               scale .6s cubic-bezier(.2,.7,.2,1),
               opacity .4s linear;
  }
  .bg-globe.is-sect-0{translate:calc(-50% + 30vw) -50%;            scale:1.0;  opacity:1}
  .bg-globe.is-sect-1{translate:calc(-50% + 14vw) calc(-50% - 8vh);scale:1.15; opacity:.68}
  .bg-globe.is-sect-2{translate:calc(-50% - 18vw) calc(-50% - 4vh);scale:1.3;  opacity:.56}
  .bg-globe.is-sect-3{translate:calc(-50% - 20vw) calc(-50% + 8vh);scale:1.34; opacity:.5}
  .bg-globe.is-sect-4{translate:calc(-50% + 4vw)  calc(-50% + 12vh);scale:1.26;opacity:.45}
  .bg-globe.is-sect-5{translate:calc(-50% + 20vw) calc(-50% + 6vh);scale:1.18; opacity:.32}
  .bg-globe.is-sect-6{translate:calc(-50% + 28vw) calc(-50%);      scale:1.08; opacity:.15}
}

@media (max-width:767px){
  .bg-globe{
    width:min(120vw,680px);
    translate:-50% -50%;
  }
  @supports (animation-timeline: scroll()){
    @keyframes bgGlobeJourney{
        0% {translate:-50% -50%;                             scale:1.0;  opacity:1}
        8% {translate:-50% calc(-50% - 2vh);                 scale:1.02; opacity:.9}
       20% {translate:calc(-50% - 10vw) calc(-50% - 6vh);    scale:1.08; opacity:.7}
       35% {translate:calc(-50% + 12vw) calc(-50% - 4vh);    scale:1.15; opacity:.6}
       50% {translate:calc(-50% - 8vw)  calc(-50% + 4vh);    scale:1.22; opacity:.55}
       65% {translate:calc(-50% + 10vw) calc(-50% + 8vh);    scale:1.26; opacity:.5}
       80% {translate:calc(-50% - 6vw)  calc(-50% + 6vh);    scale:1.2;  opacity:.4}
       94% {translate:-50% -50%;                             scale:1.08; opacity:.18}
      100% {translate:-50% -50%;                             scale:1.05; opacity:.1}
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .bg-globe{animation:none;opacity:1;scale:1}
}

/* Orbital rings + whirl — shared keyframes */
@keyframes orbitSpin1{to{transform:rotate(360deg)}}
@keyframes orbitSpin2{from{transform:rotate(22deg)}to{transform:rotate(382deg)}}
@keyframes orbitSpin3{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}
@keyframes whirlSpin{to{transform:rotate(360deg)}}

/* Floating chip — single, minimal */
.float-chip{
  position:absolute;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px 8px 10px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--border);
  border-radius:999px;
  font-family:var(--ff-en);font-size:11px;font-weight:500;
  color:var(--ink);letter-spacing:.06em;
  box-shadow:var(--fl-1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:2;
}
.float-chip-1{
  right:14%;top:26%;
  animation:chipFloat1 10s ease-in-out infinite;
}
@keyframes chipFloat1{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-6px,-10px)}
}
.chip-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--grad-primary);background-size:200% 200%;
  animation:gradShift 4s ease-in-out infinite,pulseDot 1.8s ease-in-out infinite;
  box-shadow:0 0 6px rgba(143,192,203,.45);
}
@media (max-width:1023px){.float-chip-1{right:8%;top:18%}}
@media (max-width:767px){.float-chip-1{display:none}}

.hero-inner{
  position:relative;z-index:2;
  max-width:var(--max);margin-inline:auto;
  padding:44px var(--gutter) 52px;width:100%;
}
@media (min-width:1024px){
  .hero-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:48px;
    align-items:center;
    padding-left:calc(var(--gutter) + 56px);
  }
  .hero-title,
  .hero-sub,
  .hero-ctas{grid-column:1}
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-en);
  font-size:10px;font-weight:500;
  letter-spacing:.28em;color:var(--ink-2);
  margin-bottom:30px;padding:6px 14px 6px 10px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--border);border-radius:999px;
  backdrop-filter:blur(8px);
  box-shadow:var(--fl-1);
  text-transform:uppercase;
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--grad-primary);background-size:200% 200%;
  animation:gradShift 4s ease-in-out infinite,pulseDot 1.8s ease-in-out infinite;
  box-shadow:0 0 6px rgba(143,192,203,.45);
}
.hero-title{
  font-size:clamp(44px,7vw,104px);
  font-weight:700;
  line-height:.96;
  letter-spacing:-.045em;
  margin-bottom:32px;
  max-width:900px;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line-en{
  font-family:var(--ff-en);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.03em;
}
.hero-title .line-ja{
  font-family:var(--ff-ja);
  font-size:clamp(18px,1.9vw,26px);
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.4;
  color:var(--ink-2);
  margin-top:18px;
}
.hero-title .line{animation:heroRise 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero-title .line:nth-child(2){animation-delay:.12s}
.hero-title .line:nth-child(3){animation-delay:.28s}
@keyframes heroRise{
  from{opacity:0;transform:translateY(40%)}
  to{opacity:1;transform:translateY(0)}
}
.hero-sub{
  font-size:clamp(13px,1.25vw,15px);
  line-height:1.85;
  color:var(--ink-2);
  max-width:480px;margin-bottom:40px;
  animation:heroRise 1.1s .4s cubic-bezier(.2,.7,.2,1) both;
}
.hero-ctas{
  display:flex;flex-wrap:wrap;gap:12px;
  animation:heroRise 1.1s .6s cubic-bezier(.2,.7,.2,1) both;
}

.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;
  background:var(--grad-cta);background-size:200% 200%;
  color:var(--base);border-radius:999px;
  font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.02em;
  box-shadow:0 8px 24px -8px rgba(126,157,197,.5);
  transition:transform .2s ease,gap .2s ease,box-shadow .3s ease,background-position .6s ease;
}
.btn-primary span:first-child{font-family:var(--ff-ja);font-weight:500;letter-spacing:.04em}
.btn-primary .arrow{font-family:var(--ff-en);font-weight:500}
.btn-primary:hover{
  transform:translateY(-2px);gap:14px;background-position:100% 50%;
  box-shadow:0 14px 32px -8px rgba(165,141,182,.6);
}
.btn-primary-xl{padding:16px 32px;font-size:14px}

.btn-ghost{
  display:inline-flex;align-items:center;padding:14px 22px;
  background:rgba(255,255,255,.82);color:var(--ink);
  border:1px solid var(--border);border-radius:999px;
  font-family:var(--ff-ja);font-size:13px;font-weight:500;letter-spacing:.04em;
  box-shadow:var(--fl-1);backdrop-filter:blur(8px);
  transition:background .2s ease,transform .2s ease,border-color .2s ease,box-shadow .3s ease;
}
.btn-ghost:hover{
  background:#fff;transform:translateY(-2px);border-color:var(--sky);
  box-shadow:var(--fl-2);
}

.scroll-indicator{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-2);z-index:3;
}
.scroll-text{
  font-family:var(--ff-en);
  font-size:9px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;
}
.scroll-line{
  display:block;width:1px;height:52px;
  background:linear-gradient(180deg,rgba(10,31,51,.32),transparent);
  position:relative;overflow:hidden;
}
.scroll-line::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--blue),transparent);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* ============ Ticker ============ */
.ticker{
  position:relative;overflow:hidden;
  background:var(--grad-deep);color:#fff;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,rgba(10,31,51,1),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,rgba(74,52,158,1),transparent)}
.ticker-track{
  display:inline-flex;gap:28px;align-items:center;white-space:nowrap;
  animation:tickerScroll 34s linear infinite;will-change:transform;
}
.ticker-item{
  font-family:var(--ff-en);
  font-weight:500;
  font-size:clamp(13px,1.3vw,17px);
  letter-spacing:.12em;
  background:linear-gradient(135deg,#E7F1F4,#D0DEEB,#DDCFE0);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-transform:uppercase;
}
.ticker-sep{color:rgba(255,255,255,.28);font-size:12px}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ Sections ============ */
.section{
  padding:var(--section-y) 0;
  position:relative;
  background:transparent;
  transform-style:preserve-3d;
  isolation:isolate;
  overflow:hidden;
}

/* Per-section color themes */
.section.philosophy{--sec-tint-a:rgba(180,222,230,.5);--sec-tint-b:rgba(255,255,255,.9);--sec-accent:#7BC5D3}
.section.service{--sec-tint-a:rgba(220,210,235,.55);--sec-tint-b:rgba(255,255,255,.9);--sec-accent:#A58DB6}
.section.works{--sec-tint-a:rgba(145,180,200,.55);--sec-tint-b:rgba(236,243,248,.88);--sec-accent:#5B8FA8}
.section.clients{--sec-tint-a:rgba(210,222,235,.5);--sec-tint-b:rgba(255,255,255,.92);--sec-accent:#8BA3C9}
.section.company{--sec-tint-a:rgba(210,195,220,.55);--sec-tint-b:rgba(252,250,254,.9);--sec-accent:#967BA6}
.section.contact{--sec-tint-a:rgba(46,71,110,0);--sec-tint-b:rgba(255,255,255,.75);--sec-accent:#5A4782}

/* Tint + filter overlay in ::before — softens the bg globe */
.section::before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 110% 90% at 50% 40%, var(--sec-tint-a,transparent) 0%, var(--sec-tint-b,rgba(255,255,255,.85)) 75%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  backdrop-filter:blur(3px) saturate(1.08);
  -webkit-backdrop-filter:blur(3px) saturate(1.08);
}

/* ============ Dynamic per-section decoration layer ============ */
.section-orbs{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
}
.section-orbs > .orb{display:none}  /* reset legacy orbs; CSS layers replace them */

/* PHILOSOPHY (01) — original soft dot pattern kept */
.section.philosophy .section-orbs::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(123,197,211,.4) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%);
  opacity:.7;
}

/* SERVICE (02) — rotating sunburst + drifting orbs */
.section.service .section-orbs::before{
  content:'';position:absolute;inset:-30%;
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,           rgba(165,141,182,.22) 26deg,
    transparent 55deg,          transparent 170deg,
    rgba(165,141,182,.18) 200deg,transparent 230deg,
    transparent 310deg,         rgba(165,141,182,.22) 340deg,
    transparent 360deg);
  animation:svcSpin 48s linear infinite;
}
.section.service .section-orbs::after{
  content:'';position:absolute;inset:-5%;
  background:
    radial-gradient(circle 220px at 18% 28%, rgba(165,141,182,.32), transparent 70%),
    radial-gradient(circle 280px at 82% 78%, rgba(123,197,211,.24), transparent 70%),
    radial-gradient(circle 140px at 55% 18%, rgba(180,222,230,.22), transparent 75%);
  animation:svcDrift 28s ease-in-out infinite;
}
@keyframes svcSpin{to{transform:rotate(360deg)}}
@keyframes svcDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-4%,3%) scale(1.04)}
}

/* WORKS (03) — aurora-like soft light streak + slow drifting gradient blob */
.section.works .section-orbs::before{
  content:'';position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 55% 45% at 72% 36%, rgba(91,143,168,.38) 0%, transparent 68%),
    radial-gradient(ellipse 50% 40% at 22% 72%, rgba(139,163,201,.3) 0%, transparent 68%);
  filter:blur(2px);
  animation:worksAurora 30s ease-in-out infinite;
}
.section.works .section-orbs::after{
  content:'';position:absolute;inset:-10%;
  background:linear-gradient(118deg,
    transparent 22%,
    rgba(195,215,230,.35) 42%,
    rgba(180,222,230,.3) 52%,
    rgba(195,208,225,.25) 60%,
    transparent 74%);
  filter:blur(28px);
  animation:worksAurora 44s ease-in-out infinite reverse;
}
@keyframes worksAurora{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4%,-3%) scale(1.06)}
  66%{transform:translate(-3%,4%) scale(.96)}
}

/* CLIENTS (04) — concentric halo rings pulsing outward + soft gradient mesh */
.section.clients .section-orbs::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:140%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,
      transparent 0 22%,
      rgba(139,163,201,.14) 22.4% 23%,
      transparent 23.4% 32%,
      rgba(139,163,201,.11) 32.4% 33%,
      transparent 33.4% 44%,
      rgba(139,163,201,.09) 44.4% 45%,
      transparent 45.4% 58%,
      rgba(139,163,201,.07) 58.4% 59%,
      transparent 59.4% 100%);
  animation:cliRingsPulse 9s ease-out infinite;
}
.section.clients .section-orbs::after{
  content:'';position:absolute;inset:-10%;
  background:
    radial-gradient(circle 420px at 78% 22%, rgba(139,163,201,.36), transparent 70%),
    radial-gradient(circle 460px at 18% 78%, rgba(123,197,211,.28), transparent 70%),
    radial-gradient(circle 300px at 55% 50%, rgba(195,208,225,.24), transparent 75%);
  filter:blur(24px);
  animation:cliMeshDrift 24s ease-in-out infinite;
}
@keyframes cliRingsPulse{
  0%{transform:translate(-50%,-50%) scale(.68);opacity:.8}
  100%{transform:translate(-50%,-50%) scale(1.38);opacity:0}
}
@keyframes cliMeshDrift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(2%,-2%) scale(1.04)}
}

/* COMPANY (05) — blueprint grid + moving corner brackets */
.section.company .section-orbs::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(150,123,166,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,123,166,.22) 1px, transparent 1px),
    linear-gradient(rgba(150,123,166,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,123,166,.09) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px, 20px 20px, 20px 20px;
  animation:compShift 36s linear infinite;
  mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.section.company .section-orbs::after{
  content:'';position:absolute;inset:24px;
  background:
    /* Top-left bracket */
    linear-gradient(90deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat top left / 40px 2px,
    linear-gradient(180deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat top left / 2px 40px,
    /* Top-right */
    linear-gradient(-90deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat top right / 40px 2px,
    linear-gradient(180deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat top right / 2px 40px,
    /* Bottom-left */
    linear-gradient(90deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat bottom left / 40px 2px,
    linear-gradient(0deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat bottom left / 2px 40px,
    /* Bottom-right */
    linear-gradient(-90deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat bottom right / 40px 2px,
    linear-gradient(0deg, var(--sec-accent) 0, var(--sec-accent) 40px, transparent 40px) no-repeat bottom right / 2px 40px;
  opacity:.55;
  animation:compFrame 5s ease-in-out infinite;
}
@keyframes compShift{to{background-position:0 80px, 80px 0, 0 20px, 20px 0}}
@keyframes compFrame{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.01)}
}

@media (prefers-reduced-motion: reduce){
  .section.service .section-orbs::before,
  .section.service .section-orbs::after,
  .section.works .section-orbs::before,
  .section.works .section-orbs::after,
  .section.clients .section-orbs::before,
  .section.clients .section-orbs::after,
  .section.company .section-orbs::before,
  .section.company .section-orbs::after{animation:none}
}

/* Decorative watermark — large section number + label on the side */
.section::after{
  content:attr(data-stamp);
  position:absolute;
  top:50%;right:-6%;
  transform:translateY(-50%);
  font-family:var(--ff-en);
  font-size:clamp(220px,34vw,500px);
  font-weight:200;
  line-height:.85;
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--sec-accent,rgba(139,163,201,.5));
  opacity:.28;
  z-index:0;
  pointer-events:none;
  white-space:nowrap;
  user-select:none;
}
.section.philosophy::after,
.section.works::after{right:auto;left:-6%}
.section.contact::after{display:none}


/* Section eyebrow color mapped to theme */
.section:not(.contact) .section-eyebrow{
  color:var(--sec-accent);
  border-color:color-mix(in srgb, var(--sec-accent) 35%, transparent);
  background:color-mix(in srgb, var(--sec-accent) 8%, #fff);
}
.section:not(.contact) .eyebrow-dot{background:var(--sec-accent)}

/* Ensure content sits above decorative layers */
.section > .container{position:relative;z-index:2}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-en);
  font-size:10px;font-weight:500;
  letter-spacing:.28em;color:var(--ink-2);
  margin-bottom:18px;padding:6px 12px 6px 10px;
  background:var(--muted);
  border:1px solid var(--border-soft);
  border-radius:999px;
  text-transform:uppercase;
}
.section-title{
  font-size:clamp(26px,3.4vw,44px);
  font-weight:600;
  line-height:1.28;letter-spacing:-.025em;
  margin-bottom:44px;
}

/* Orb positions for sections */
.orb-sec-1{width:440px;height:440px;left:-12%;top:10%;opacity:.32;animation:orbFloat1 24s ease-in-out infinite}
.orb-sec-2{width:380px;height:380px;right:-8%;bottom:-10%;opacity:.28;animation:orbFloat2 22s ease-in-out infinite}
.orb-sec-3{width:460px;height:460px;left:-6%;top:-10%;opacity:.3;animation:orbFloat3 24s ease-in-out infinite}
.orb-sec-4{width:420px;height:420px;right:-12%;top:30%;opacity:.3;animation:orbFloat1 26s -5s ease-in-out infinite}
.orb-sec-5{width:320px;height:320px;left:40%;bottom:-12%;opacity:.22;animation:orbFloat2 28s ease-in-out infinite}
.orb-sec-6{width:460px;height:460px;left:-10%;top:20%;opacity:.28;animation:orbFloat2 24s ease-in-out infinite}
.orb-sec-7{width:400px;height:400px;right:-10%;bottom:-8%;opacity:.26;animation:orbFloat3 26s ease-in-out infinite}
.orb-sec-8{width:460px;height:460px;left:30%;top:20%;opacity:.24;animation:orbFloat1 26s ease-in-out infinite}

/* Philosophy */
.philosophy-body{
  max-width:680px;
  font-size:15px;line-height:1.95;color:var(--ink-2);
}
.philosophy-body p + p{margin-top:1.3em}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
  margin-top:56px;
}
@media (max-width:767px){.stats{grid-template-columns:1fr}}

/* ============ Manifest strip (editorial numbers) ============ */
.manifest{margin-top:56px;position:relative}
.manifest-head{
  display:flex;align-items:center;gap:16px;
  font-family:var(--ff-en);font-size:10px;letter-spacing:.28em;
  color:var(--ink-soft);text-transform:uppercase;
  margin-bottom:clamp(22px,2.4vw,32px);
}
.manifest-kicker{
  color:var(--sec-accent);font-weight:600;
  padding:5px 10px;border:1px solid color-mix(in srgb, var(--sec-accent) 28%, transparent);
  border-radius:999px;
}
.manifest-rule{
  flex:1;height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--sec-accent) 60%, transparent) 0%,
    transparent 80%);
}
.manifest-idx{font-weight:500;opacity:.7}
.manifest-list{
  display:flex;align-items:flex-end;
  gap:clamp(12px,1.8vw,26px);
  padding:0;margin:0;list-style:none;
}
.manifest-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:clamp(14px,1.5vw,22px);
  padding:0 2px;
}
.manifest-num{
  font-family:var(--ff-en);font-weight:500;
  font-size:clamp(64px,8.4vw,118px);
  line-height:.82;letter-spacing:-.055em;
  font-style:italic;
  display:block;white-space:nowrap;
}
.manifest-slash{
  flex:0 0 auto;list-style:none;
  font-family:var(--ff-en);
  font-size:clamp(56px,6.8vw,92px);
  font-weight:200;line-height:.82;font-style:italic;
  color:color-mix(in srgb, var(--sec-accent) 34%, transparent);
  transform:translateY(-4px);
  user-select:none;pointer-events:none;
  align-self:center;
}
.manifest-cap{
  display:flex;flex-direction:column;gap:6px;
  padding-top:14px;
  border-top:1px solid color-mix(in srgb, var(--sec-accent) 28%, transparent);
  position:relative;
}
.manifest-cap::before{
  content:"";position:absolute;top:-1px;left:0;
  width:clamp(24px,3vw,40px);height:2px;
  background:var(--sec-accent);
}
.manifest-ja{
  font-family:var(--ff-ja);font-size:14px;font-weight:600;
  color:var(--ink-1);letter-spacing:.02em;
}
.manifest-en{
  font-family:var(--ff-en);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;color:var(--ink-soft);text-transform:uppercase;
  line-height:1.55;
}
@media (max-width:767px){
  .manifest-head{gap:10px;font-size:9px}
  .manifest-list{
    flex-direction:column;align-items:stretch;
    gap:0;
  }
  .manifest-item{
    flex:none;width:100%;
    padding:22px 0;
    border-bottom:1px solid color-mix(in srgb, var(--sec-accent) 18%, transparent);
  }
  .manifest-item:last-of-type{border-bottom:none}
  .manifest-slash{display:none}
  .manifest-num{font-size:clamp(88px,24vw,132px)}
}

/* ============ Sub-title / sub-eyebrow ============ */
.sub-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-en);font-size:10px;font-weight:500;
  letter-spacing:.32em;color:var(--sec-accent);
  margin-bottom:12px;text-transform:uppercase;
}
.sub-eyebrow .eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--sec-accent);
}
.sub-title{
  font-family:var(--ff-ja);
  font-size:clamp(20px,2.2vw,28px);
  font-weight:600;letter-spacing:-.02em;
  margin-bottom:clamp(28px,3vw,40px);
  color:var(--ink);
}

/* ============ Values grid (Philosophy) ============ */
.values-block{
  margin-top:clamp(72px,8vw,110px);
  padding-top:clamp(56px,6vw,80px);
  border-top:1px solid var(--border-soft);
}
.values-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,1.6vw,22px);
  list-style:none;padding:0;margin:0;
  align-items:stretch;
}
.value-card{
  --val-ac:#7BC5D3;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:clamp(28px,2.6vw,34px) clamp(22px,2vw,26px) clamp(28px,2.6vw,34px);
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow:var(--fl-1);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
}
.value-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--fl-2);
  border-color:var(--border);
}
.value-card:hover .value-icon{transform:translateY(-2px)}
/* Faint editorial index, top-right */
.value-num{
  position:absolute;top:clamp(18px,1.8vw,24px);right:clamp(20px,2vw,26px);
  font-family:var(--ff-en);font-weight:600;
  font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:.01em;
  color:var(--ink);opacity:.09;
}
.value-icon{
  width:clamp(44px,4.2vw,50px);height:clamp(44px,4.2vw,50px);flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:12px;
  background:color-mix(in srgb, var(--val-ac) 8%, #fff);
  border:1px solid color-mix(in srgb, var(--val-ac) 22%, var(--border-soft));
  color:var(--val-ac);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  margin-bottom:clamp(18px,1.8vw,24px);
}
.value-icon svg{
  width:clamp(23px,2.3vw,26px);height:clamp(23px,2.3vw,26px);
  color:var(--val-ac);stroke:currentColor;
}
.value-card h4{
  font-size:clamp(16px,1.3vw,18px);font-weight:700;
  letter-spacing:.01em;margin:0 0 10px;
  color:var(--ink);
}
.value-card p{
  font-size:13px;line-height:1.8;color:var(--ink-2);margin:0;
}
.values-hint{display:none}

/* SP: 横スクロール */
@media (max-width:767px){
  .values-grid{
    display:flex;grid-template-columns:none;
    gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* edge bleed so cards peek at viewport sides */
    margin:0 calc(var(--gutter) * -1);
    padding:4px var(--gutter) 18px;
  }
  .values-grid::-webkit-scrollbar{display:none}
  .value-card{
    flex:0 0 76%;max-width:300px;
    scroll-snap-align:center;
  }
  .values-hint{
    display:block;text-align:right;
    font-family:var(--ff-en);font-size:11px;letter-spacing:.18em;
    color:var(--ink-soft);margin:2px 2px 0;
    animation:hintSlide 1.8s ease-in-out infinite;
  }
  @keyframes hintSlide{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(5px);opacity:1}}
}

/* ============ Card features list (Service cards) ============ */
.card-features{
  list-style:none;padding:0;margin:16px 0 0;
  border-top:1px dashed var(--border-soft);
  padding-top:16px;
}
.card-features li{
  position:relative;padding:7px 0 7px 22px;
  font-size:13px;line-height:1.6;color:var(--ink-2);
}
.card-features li::before{
  content:'';position:absolute;left:2px;top:14px;
  width:10px;height:2px;
  background:var(--sec-accent,#8BA3C9);border-radius:2px;
}
.card-features li + li{border-top:1px solid var(--border-soft)}

/* ============ Process steps (Service section) ============ */
.process{
  margin-top:clamp(72px,8vw,110px);
  padding-top:clamp(56px,6vw,80px);
  border-top:1px solid var(--border-soft);
}
.process-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px);
  list-style:none;padding:0;margin:0;
  counter-reset:step;
}
.process-step{
  position:relative;
  padding:26px 22px 24px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-soft);
  border-radius:16px;
  box-shadow:var(--fl-1);
}
.process-step::after{
  content:'→';
  position:absolute;right:-18px;top:50%;
  transform:translateY(-50%);
  color:var(--sec-accent);opacity:.5;
  font-size:18px;
}
.process-step:last-child::after{display:none}
.process-step .step-no{
  font-family:var(--ff-en);font-size:11px;font-weight:500;
  letter-spacing:.3em;color:var(--sec-accent);
  display:block;margin-bottom:12px;
}
.process-step h4{
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  margin-bottom:8px;color:var(--ink);
}
.process-step p{
  font-size:12.5px;line-height:1.7;color:var(--ink-2);margin:0;
}
@media (max-width:1023px){
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-step:nth-child(2)::after{display:none}
}
@media (max-width:500px){
  .process-steps{grid-template-columns:1fr}
  .process-step::after{display:none}
}

/* ============ Work features + category ============ */
.work-category{
  display:inline-block;
  font-family:var(--ff-en);font-size:10px;font-weight:500;
  letter-spacing:.28em;color:var(--sec-accent);
  margin-bottom:10px;text-transform:uppercase;
}
.work-features{
  list-style:none;padding:14px 0 0;margin:14px 0 18px;
  border-top:1px dashed var(--border-soft);
  display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;
}
.work-features li{
  position:relative;padding-left:18px;
  font-size:12.5px;line-height:1.55;color:var(--ink-2);
}
.work-features li::before{
  content:'';position:absolute;left:0;top:7px;
  width:8px;height:8px;border-radius:50%;
  background:color-mix(in srgb, var(--sec-accent) 40%, transparent);
  border:1px solid var(--sec-accent);
}

/* ============ Clients expanded items + tags ============ */
.clients-lead{
  font-size:15px;line-height:1.85;color:var(--ink-2);
  max-width:680px;margin:0 0 36px;
}
.client-item{
  display:flex;flex-direction:column;
  padding:30px 26px 28px !important;
  align-items:flex-start !important;
  gap:10px;
  text-align:left;
}
.client-industry{
  font-family:var(--ff-en);font-size:10px;font-weight:500;
  letter-spacing:.28em;color:var(--sec-accent);
  text-transform:uppercase;
}
.client-name{
  font-size:18px;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;
}
.client-note{
  font-size:13px;line-height:1.7;color:var(--ink-2);
}
.client-cta-tags{
  list-style:none;padding:0;margin:40px 0 0;
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;
}
.client-cta-tags li{
  font-family:var(--ff-en);font-size:11px;font-weight:500;
  letter-spacing:.12em;
  padding:8px 14px;border-radius:999px;
  color:var(--sec-accent);
  background:color-mix(in srgb, var(--sec-accent) 8%, #fff);
  border:1px solid color-mix(in srgb, var(--sec-accent) 22%, transparent);
}
.stat{
  display:flex;flex-direction:column;gap:6px;
  padding:26px 28px;background:var(--base);
  border:1px solid var(--border-soft);border-radius:16px;
  box-shadow:var(--fl-2);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.stat:hover{transform:translateY(-4px);box-shadow:var(--fl-3)}
.stat-num{
  font-family:var(--ff-en);
  font-size:clamp(30px,3.4vw,44px);
  font-weight:600;line-height:1;letter-spacing:-.03em;
}
.stat-label{
  font-family:var(--ff-en);
  font-size:10px;font-weight:500;
  color:var(--ink-soft);letter-spacing:.22em;text-transform:uppercase;
}

/* Cards */
.cards{display:grid;gap:clamp(16px,1.6vw,22px)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:899px){.cards-3,.cards-2{grid-template-columns:1fr}}

.float-card{
  background:var(--base);
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow:var(--fl-2);
  position:relative;
  overflow:hidden;
}

.card{
  padding:clamp(26px,2.6vw,36px);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-primary);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--fl-3)}
.card:hover::before{opacity:1}

.card-glow{
  position:absolute;inset:-1px;border-radius:inherit;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(165,194,217,.22),transparent 60%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1;
}
.tilt-card:hover .card-glow{opacity:1}

.card-icon-wrap{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,#F3F9FF,#E8EBFF);
  border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;position:relative;z-index:2;overflow:hidden;
  transition:transform .4s ease;
  box-shadow:var(--fl-1);
}
.card-icon-wrap::after{
  content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,transparent,rgba(165,194,217,.32),transparent 35%);
  animation:iconSpin 8s linear infinite;
  opacity:0;transition:opacity .3s ease;
}
.card:hover .card-icon-wrap::after{opacity:1}
.card:hover .card-icon-wrap{transform:translateY(-2px) rotate(-2deg)}
@keyframes iconSpin{to{transform:rotate(360deg)}}
.card-icon{width:32px;height:32px;position:relative;z-index:1;transition:transform .4s ease}
.card:hover .card-icon{transform:scale(1.06)}

.card-no{
  font-family:var(--ff-en);
  font-size:10px;font-weight:600;
  letter-spacing:.22em;color:var(--blue);
  margin-bottom:10px;position:relative;z-index:2;
  text-transform:uppercase;
}
.card-title{
  font-size:clamp(17px,1.5vw,20px);
  font-weight:600;
  line-height:1.45;
  margin-bottom:14px;letter-spacing:-.01em;
  position:relative;z-index:2;
}
.card-body{
  font-size:13.5px;line-height:1.85;color:var(--ink-2);
  position:relative;z-index:2;
}
.card-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;
  position:relative;z-index:2;
}
.card-tags li{
  font-family:var(--ff-en);
  font-size:10px;font-weight:500;
  letter-spacing:.06em;padding:4px 10px;border-radius:999px;
  background:var(--muted);color:var(--ink-2);
  border:1px solid var(--border-soft);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.card:hover .card-tags li{background:var(--base);border-color:var(--sky);color:var(--blue)}

/* Works */
.work-card{
  display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.work-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-primary);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:3;
}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--fl-3)}
.work-card:hover::before{opacity:1}
.work-thumb{aspect-ratio:16/10;position:relative;overflow:hidden;isolation:isolate}
.work-thumb-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:1;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .work-thumb-img{transform:scale(1.05)}
.work-thumb-01{background:linear-gradient(135deg,#CEE5EA 0%,#A5C2D9 55%,#B9A3C5 100%)}
.work-thumb-02{background:linear-gradient(135deg,#D5DEE8 0%,#8BA6C8 55%,#7B6FA0 100%)}
.thumb-orb{position:absolute;border-radius:50%;filter:blur(40px);mix-blend-mode:screen}
.thumb-orb-a{width:220px;height:220px;left:-10%;top:-10%;background:radial-gradient(circle,#E8F3F6,#A5C2D9 75%);animation:orbFloat1 12s ease-in-out infinite}
.thumb-orb-b{width:180px;height:180px;right:-5%;bottom:-5%;background:radial-gradient(circle,#EDE3F0,#B7A5C7 75%);animation:orbFloat2 14s ease-in-out infinite}
.thumb-orb-c{width:240px;height:240px;right:-10%;top:-10%;background:radial-gradient(circle,#DEE5F0,#8BA6C8 75%);animation:orbFloat3 15s ease-in-out infinite}
.thumb-orb-d{width:200px;height:200px;left:-5%;bottom:-5%;background:radial-gradient(circle,#DBEFEC,#9FC9D0 75%);animation:orbFloat1 13s -3s ease-in-out infinite}
.thumb-label{
  position:absolute;left:20px;top:20px;
  font-family:var(--ff-en);
  font-size:10px;font-weight:600;letter-spacing:.22em;
  color:rgba(255,255,255,.92);padding:5px 10px;
  background:rgba(10,31,51,.3);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;backdrop-filter:blur(6px);z-index:2;
  text-transform:uppercase;
}
.work-thumb::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px;mix-blend-mode:overlay;
}
.work-body{padding:clamp(20px,2.2vw,28px);position:relative;z-index:2;background:var(--base)}
.work-title{
  font-size:clamp(17px,1.5vw,20px);
  font-weight:600;margin-bottom:8px;letter-spacing:-.01em;
}
.work-desc{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin-bottom:18px}
.work-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-en);
  font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--blue);padding:6px 12px;border-radius:999px;
  background:var(--muted);border:1px solid var(--border-soft);
  transition:gap .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.work-card:hover .work-link{gap:12px;background:var(--grad-primary);color:#fff;border-color:transparent}

/* Clients */
.client-list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,18px);
}
@media (max-width:767px){.client-list{grid-template-columns:1fr}}
.client-item{
  padding:clamp(34px,4vw,50px) clamp(18px,2.4vw,28px);
  text-align:center;
  display:flex;align-items:center;justify-content:center;
  min-height:140px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.client-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-primary);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.client-item:hover{transform:translateY(-4px);box-shadow:var(--fl-3)}
.client-item:hover::before{opacity:1}
.client-item:hover .client-name{color:var(--blue)}
.client-name{
  font-size:clamp(14px,1.4vw,16px);
  font-weight:600;letter-spacing:.01em;
  color:var(--ink);position:relative;z-index:1;
  transition:color .3s ease;
}

/* Company */
.company-table{
  max-width:820px;margin:0 auto;
  padding:8px 28px;
}
@media (max-width:767px){.company-table{padding:4px 18px}}
.company-row{
  display:grid;grid-template-columns:160px 1fr;gap:28px;
  padding:22px 0;border-bottom:1px solid var(--border-soft);
  align-items:start;position:relative;
  transition:background .3s ease;
}
.company-row:last-child{border-bottom:0}
.company-row::before{
  content:"";position:absolute;left:-28px;top:0;bottom:0;width:2px;
  background:var(--grad-primary);
  transform:scaleY(0);transform-origin:top center;
  transition:transform .3s ease;
}
.company-row:hover::before{transform:scaleY(1)}
.company-row dt{
  font-family:var(--ff-en);
  font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--blue);text-transform:uppercase;padding-top:3px;
}
.company-row dd{font-size:14px;line-height:1.85;color:var(--ink-2)}
.placeholder-text{color:var(--ink-soft);font-style:italic;font-size:13px}
@media (max-width:767px){
  .company-row{grid-template-columns:1fr;gap:4px;padding:20px 0}
}

/* Contact */
.contact{background:var(--base)}
.contact-card{
  position:relative;
  padding:clamp(50px,6vw,88px) clamp(28px,4vw,68px);
  background:var(--grad-deep);
  color:#fff;
  border:0;
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--fl-3);
  text-align:center;
}
.contact-orbs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.contact-orb-1{
  width:540px;height:540px;left:-10%;top:-20%;
  background:radial-gradient(circle,#8BA6C8,#7B6FA0 75%);
  opacity:.6;filter:blur(70px);
  animation:orbFloat1 16s ease-in-out infinite;
}
.contact-orb-2{
  width:480px;height:480px;right:-10%;bottom:-20%;
  background:radial-gradient(circle,#C4D8E0,#8FC0CB 75%);
  opacity:.48;filter:blur(70px);
  animation:orbFloat2 18s ease-in-out infinite;
}
.contact-inner{position:relative;z-index:1}
.contact .section-eyebrow{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.2);
  color:#D6ECFF;box-shadow:none;
}
.contact .section-title{color:#fff;margin-bottom:20px}
.contact-lead{
  font-size:14px;line-height:1.95;color:rgba(255,255,255,.85);
  max-width:520px;margin:0 auto 36px;
}

/* ============ Footer ============ */
.site-footer{
  background:#07162A;color:rgba(255,255,255,.62);
  padding:60px 0 28px;position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;top:-200px;right:-10%;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(165,194,217,.22),transparent 65%);
  filter:blur(60px);
}
.footer-inner{display:grid;grid-template-columns:1fr 2fr;gap:36px;align-items:start;position:relative;z-index:1}
@media (max-width:767px){.footer-inner{grid-template-columns:1fr;gap:28px}}
.footer-brand .footer-logo{
  color:var(--base);font-size:26px;font-weight:600;margin-bottom:12px;
  display:inline-flex;align-items:center;gap:9px;
  letter-spacing:-.04em;
}
.footer-globe{
  width:30px;height:30px;object-fit:contain;display:block;
  filter:drop-shadow(0 0 6px rgba(191,220,226,.35));
}
.footer-address{font-size:11px;line-height:1.8}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:flex-end}
@media (max-width:767px){.footer-nav ul{justify-content:flex-start}}
.footer-nav a{
  font-family:var(--ff-en);font-size:12px;font-weight:500;
  letter-spacing:.04em;transition:color .2s ease;
}
.footer-nav a:hover{color:var(--base)}
.copyright{
  grid-column:1 / -1;margin-top:36px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  font-family:var(--ff-en);font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.34);
}

/* ============================================== */
/* Scroll-driven reveal animations                 */
/* Use translate/rotate/scale so hover transform   */
/* composes independently without conflict.        */
/* ============================================== */
@supports (animation-timeline: view()){
  .reveal-up{
    animation:revealUp linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 65%;
  }
  .reveal-pop{
    animation:revealPop linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 70%;
    animation-delay:var(--stagger,0ms);
  }
  .reveal-3d{
    animation:reveal3d linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 75%;
    animation-delay:var(--stagger,0ms);
    transform-origin:center 80%;
  }
  @keyframes revealUp{
    from{opacity:0;translate:0 48px}
    to{opacity:1;translate:0 0}
  }
  @keyframes revealPop{
    from{opacity:0;translate:0 60px;scale:.94}
    to{opacity:1;translate:0 0;scale:1}
  }
  @keyframes reveal3d{
    from{opacity:0;translate:0 72px;rotate:x 10deg;scale:.96}
    to{opacity:1;translate:0 0;rotate:x 0deg;scale:1}
  }

  .section-title.reveal-up{
    animation:revealUpPark linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 60%;
  }
  @keyframes revealUpPark{
    0%{opacity:0;translate:0 48px}
    30%{opacity:1;translate:0 0}
    100%{opacity:1;translate:0 -16px}
  }

  .section-orbs .orb{
    animation:sectionOrbDrift linear;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes sectionOrbDrift{
    from{translate:0 32px}
    to{translate:0 -32px}
  }
}

@supports not (animation-timeline: view()){
  .reveal-up,.reveal-pop,.reveal-3d{
    opacity:0;translate:0 32px;
    transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1),rotate .9s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--stagger,0ms);
    will-change:opacity,translate,scale;
  }
  .reveal-pop{translate:0 48px;scale:.94}
  .reveal-3d{translate:0 60px;scale:.96;rotate:x 8deg}
  .reveal-up.is-visible,.reveal-pop.is-visible,.reveal-3d.is-visible{
    opacity:1;translate:0 0;scale:1;rotate:x 0deg;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01s !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01s !important;
  }
  .reveal-up,.reveal-pop,.reveal-3d{opacity:1 !important;translate:0 !important;scale:1 !important;rotate:0 !important}
}

body.is-menu-open{overflow:hidden}

/* ============ Mobile refinements ============ */
@media (max-width:767px){
  /* Japanese line-break rules to avoid awkward mid-word breaks */
  h1,h2,h3,p,dt,dd,li,a,span{line-break:strict;overflow-wrap:anywhere}

  .hero{min-height:auto}
  .hero-inner{padding:100px var(--gutter) 150px}
  .hero-eyebrow{
    font-size:9px;padding:5px 12px 5px 10px;
    margin-bottom:32px;letter-spacing:.22em;
  }
  .hero-title{
    font-size:clamp(44px,13vw,68px);
    letter-spacing:-.035em;
    line-height:.98;
    margin-bottom:32px;
  }
  .hero-title .line-ja{
    font-size:14px;
    margin-top:14px;
  }
  .hero-sub{
    font-size:13.5px;line-height:1.9;
    margin-bottom:40px;max-width:100%;
  }
  .hero-ctas{gap:10px;flex-wrap:wrap}
  .hero-ctas > *{flex:1 1 140px;justify-content:center}

  .section-title{
    font-size:clamp(22px,5.5vw,30px);
    margin-bottom:32px;
    letter-spacing:-.02em;
  }
  .section-eyebrow{margin-bottom:14px;font-size:9px;letter-spacing:.22em}

  .stat{padding:22px 20px}
  .stat-num{font-size:clamp(26px,8vw,34px)}

  .card{padding:24px}
  .card-icon-wrap{width:48px;height:48px;margin-bottom:18px}
  .card-icon{width:28px;height:28px}
  .card-title{font-size:17px}
  .card-body{font-size:13.5px}

  .work-thumb{aspect-ratio:16/9}
  .work-body{padding:20px}
  .work-title{font-size:17px}

  .client-item{min-height:110px;padding:28px 18px}

  .company-table{padding:4px 18px}
  .company-row dt{font-size:11px}
  .company-row dd{font-size:13.5px;line-height:1.8}

  .contact-card{padding:44px 22px;border-radius:22px}
  .contact .section-title{font-size:clamp(20px,5.5vw,26px)}
  .contact-lead{font-size:13px;margin-bottom:28px}
  .btn-primary-xl{padding:14px 26px;font-size:13px;width:100%;justify-content:center}

  .ticker{padding:10px 0}
  .ticker-item{font-size:13px;letter-spacing:.1em}

  .float-chip{display:none}

  .site-footer{padding:48px 0 24px}
  .footer-brand .footer-logo{font-size:22px}
  .footer-nav a{font-size:11px}
}

@media (max-width:374px){
  /* iPhone SE and very narrow */
  :root{--gutter:18px}
  .bg-globe{width:min(130vw,560px)}
  .hero-title{font-size:42px;line-height:.98}
  .hero-ctas{flex-direction:column}
  .hero-ctas > *{width:100%;flex:none}
  .card{padding:22px}
  .company-row{gap:2px}
  .contact-card{padding:40px 18px}
  .ticker-track{gap:20px}
}