:root{
    --navy:#0B2346;
    --navy-soft:#16305e;
    --bg:#FAFAFA;
    --ink:#222222;
    --ink-soft:#5b5b5b;
    --gold:#D4AF37;
    --gold-soft:#e6c874;
    --dawn-1:#0B2346;
    --dawn-2:#4d3f66;
    --dawn-3:#b57a54;
    --dawn-4:#e8b978;
    --card:#F1ECE3;
    --line:rgba(11,35,70,0.1);
    --maxw:1320px;
    --e-out:cubic-bezier(.16,1,.3,1);
    --e-inout:cubic-bezier(.76,0,.24,1);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Noto Sans JP','Inter',sans-serif;
    line-height:1.85;
    overflow-x:clip;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
    [data-reveal],.line-mask span,.hero-inner{opacity:1 !important;transform:none !important;}
    .cursor-ring,.grain{display:none !important;}
  }

  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}

  /* Japanese wraps anywhere by default, which splits words mid-phrase.
     auto-phrase breaks at phrase boundaries instead; browsers that don't
     know the value drop the declaration and fall back to normal wrapping. */
  h1,h2,h3,p,dd,.svc-jp,.purpose-foot div,.history-item .desc,.foot-tag{
    word-break:auto-phrase;
    line-break:strict;
  }
  /* Built by breakOnPunctuation(): one chunk per 、 so the browser can only
     break between them. max-width lets an over-long chunk wrap internally
     instead of running off the edge. */
  .jp-chunk{display:inline-block;max-width:100%;}

  /* ---------- optical typography ----------
     Japanese punctuation carries a full em of its own, so 「、」 and 「。」 tear
     a hole in a headline set at 90px. "palt" swaps in the proportional widths
     the typeface ships with, closing those gaps — roughly 14% narrower on the
     hero line. Tracking then tightens as the type grows, because the letterfit
     that reads correctly at 15px looks slack at display size.

     Body copy is deliberately left alone: at reading size the full-width
     punctuation is what gives Japanese text its rhythm. */
  .hero h1, .sec-head h2, .purpose h2, .legal h1,
  .phi-item h3, .svc-jp, .curri-card h3, .faq-q{
    font-feature-settings:"palt" 1;
    font-kerning:normal;
  }
  .purpose h2{letter-spacing:-0.025em;}
  .sec-head h2, .legal h1{letter-spacing:-0.02em;}
  .phi-item h3, .svc-jp{letter-spacing:-0.01em;}
  .eyebrow{
    font-family:'Inter',sans-serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;}
  @media (max-width:768px){ .wrap{padding:0 24px;} }

  /* ---------- scroll progress ---------- */
  .scroll-progress{
    position:fixed;top:0;left:0;height:2px;width:100%;z-index:400;
    background:linear-gradient(90deg,var(--gold),var(--gold-soft),#fff);
    transform:scaleX(0);transform-origin:0 50%;
    will-change:transform;
  }
  @supports (animation-timeline: scroll()){
    .scroll-progress{
      animation:progressGrow linear forwards;
      animation-timeline:scroll(root block);
    }
    @keyframes progressGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  }

  /* ---------- cursor follower ---------- */
  .cursor-ring{
    position:fixed;top:0;left:0;z-index:500;pointer-events:none;
    width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(212,175,55,0.85);
    margin:-17px 0 0 -17px;
    opacity:0;
    transition:opacity .35s ease, width .35s var(--e-out), height .35s var(--e-out),
               background .35s ease, border-color .35s ease, margin .35s var(--e-out);
    will-change:transform;
  }
  .cursor-ring.on{opacity:1;}
  .cursor-ring.grow{
    width:64px;height:64px;margin:-32px 0 0 -32px;
    background:rgba(212,175,55,0.14);border-color:rgba(212,175,55,0.5);
  }
  @media (hover:none),(max-width:900px){ .cursor-ring{display:none;} }

  /* ---------- film grain ---------- */
  .grain{
    position:fixed;inset:-150%;z-index:390;pointer-events:none;
    opacity:0.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    animation:grainShift 1.1s steps(4) infinite;
  }
  @keyframes grainShift{
    0%{transform:translate(0,0);}25%{transform:translate(-4%,-3%);}
    50%{transform:translate(3%,-5%);}75%{transform:translate(-2%,4%);}
    100%{transform:translate(0,0);}
  }

  /* ---------- horizon signature element ---------- */
  .horizon{
    position:relative;
    height:2px;
    width:100%;
    background:linear-gradient(90deg,var(--dawn-1),var(--dawn-2) 35%,var(--dawn-3) 68%,var(--dawn-4));
    background-size:200% 100%;
    animation:horizonDrift 14s ease-in-out infinite;
    opacity:0.85;
  }
  @keyframes horizonDrift{
    0%{background-position:0% 0;}
    50%{background-position:100% 0;}
    100%{background-position:0% 0;}
  }

  /* ---------- nav ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:200;
    padding:22px 0;
    transition:background .5s var(--e-out), padding .5s var(--e-out),
               box-shadow .5s var(--e-out), transform .6s var(--e-out);
  }
  header.scrolled{
    background:rgba(250,250,250,0.82);
    backdrop-filter:blur(14px) saturate(1.4);
    padding:14px 0;
    box-shadow:0 1px 0 var(--line);
  }
  header.hide{transform:translateY(-104%);}
  header .wrap{display:flex;align-items:center;justify-content:space-between;}
  .logo{
    position:relative;
    display:flex;align-items:center;gap:10px;
    font-family:'Inter',sans-serif;
    font-weight:700;font-size:17px;letter-spacing:0.06em;
    color:var(--navy);
    transition:transform .5s var(--e-out);
  }
  .logo:hover{transform:scale(1.04);}
  .logo-img{height:22px;width:auto;flex-shrink:0;transition:opacity .45s var(--e-out);}
  /* The navy mark stacks on the white one and fades in once the bar turns
     opaque; the white one carries the layout so the header never shifts. */
  .logo-on-bar{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;}
  header.scrolled .logo-on-photo{opacity:0;}
  header.scrolled .logo-on-bar{opacity:1;}
  nav.mainnav ul{display:flex;gap:40px;list-style:none;}
  nav.mainnav a{
    font-size:13px;letter-spacing:0.12em;font-weight:500;
    font-family:'Inter',sans-serif;
    /* white while overlaying the hero, navy once the bar goes solid */
    color:#fff;
    transition:color .5s var(--e-out);
    position:relative;
    padding-bottom:4px;
  }
  header.scrolled nav.mainnav a{color:var(--navy);}
  nav.mainnav a::after{
    content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:100% 50%;
    transition:transform .5s var(--e-out);
  }
  nav.mainnav a:hover::after{transform:scaleX(1);transform-origin:0 50%;}
  .nav-cta{
    border:1px solid rgba(255,255,255,0.6);
    color:#fff;
    padding:9px 22px;
    font-size:12px;letter-spacing:0.1em;
    border-radius:2px;
    position:relative;overflow:hidden;
    transition:color .4s var(--e-out), border-color .5s var(--e-out);
    will-change:transform;
  }
  header.scrolled .nav-cta{border-color:var(--navy);color:var(--navy);}
  .nav-cta::before{
    content:'';position:absolute;inset:0;background:rgba(255,255,255,0.18);z-index:-1;
    transform:translateY(101%);transition:transform .5s var(--e-out), background .5s var(--e-out);
  }
  header.scrolled .nav-cta::before{background:var(--navy);}
  .nav-cta:hover{color:#fff;}
  .nav-cta:hover::before{transform:translateY(0);}
  /* The bars are 24x15, but that is the only way to navigate on a phone, so
     the button is padded out to a 44px touch target around them. */
  .menu-btn{
    display:none;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;cursor:pointer;background:none;border:none;
    width:44px;height:44px;margin:-14px -10px -14px 0;
  }
  .menu-btn span{width:24px;height:1.5px;background:#fff;transition:transform .4s var(--e-out), background .5s var(--e-out);}
  header.scrolled .menu-btn span{background:var(--navy);}
  .menu-btn:hover span:nth-child(1){transform:translateX(-3px);}
  .menu-btn:hover span:nth-child(3){transform:translateX(3px);}
  @media (max-width:900px){
    nav.mainnav, .nav-cta{display:none;}
    .menu-btn{display:flex;}
  }

  /* mobile drawer */
  .drawer{
    position:fixed;inset:0;background:var(--navy);z-index:300;
    display:flex;flex-direction:column;justify-content:center;padding:48px;
    clip-path:inset(0 0 100% 0);
    /* clip-path hides it but leaves its links in the tab order, so keyboard
       users were tabbing through six controls they could not see. visibility
       takes them out; it is delayed on close so the wipe still plays. */
    visibility:hidden;
    transition:clip-path .8s var(--e-inout), visibility 0s linear .8s;
    pointer-events:none;
  }
  .drawer.open{
    clip-path:inset(0 0 0 0);
    visibility:visible;
    transition:clip-path .8s var(--e-inout), visibility 0s;
    pointer-events:auto;
  }
  .drawer ul{list-style:none;display:flex;flex-direction:column;gap:26px;}
  .drawer li{overflow:hidden;}
  .drawer a{
    color:#fff;font-size:28px;font-weight:500;display:block;
    transform:translateY(110%);
    transition:transform .7s var(--e-out);
  }
  .drawer.open a{transform:translateY(0);}
  .drawer.open li:nth-child(1) a{transition-delay:.18s;}
  .drawer.open li:nth-child(2) a{transition-delay:.24s;}
  .drawer.open li:nth-child(3) a{transition-delay:.30s;}
  .drawer.open li:nth-child(4) a{transition-delay:.36s;}
  .drawer.open li:nth-child(5) a{transition-delay:.42s;}
  .drawer.open li:nth-child(6) a{transition-delay:.48s;}
  .drawer.open li:nth-child(7) a{transition-delay:.54s;}
  .drawer-close{position:absolute;top:26px;right:32px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;transition:transform .4s var(--e-out);}
  .drawer-close:hover{transform:rotate(90deg);}

  /* ---------- plain content pages (no hero photo underneath) ----------
     header.scrolled is toggled by scroll position, which assumes every
     page opens on a dark hero photo. Pages like this one open directly
     on light content, so the header must render in its solid/navy state
     from y=0 — !important overrides the JS toggle regardless of scroll. */
  body.legal-page header{
    background:rgba(250,250,250,0.82) !important;
    backdrop-filter:blur(14px) saturate(1.4) !important;
    padding:14px 0 !important;
    box-shadow:0 1px 0 var(--line) !important;
  }
  body.legal-page .logo-on-photo{opacity:0 !important;}
  body.legal-page .logo-on-bar{opacity:1 !important;}
  body.legal-page nav.mainnav a{color:var(--navy) !important;}
  body.legal-page .nav-cta{border-color:var(--navy) !important;color:var(--navy) !important;}
  body.legal-page .nav-cta::before{background:var(--navy) !important;}
  body.legal-page .menu-btn span{background:var(--navy) !important;}

  /* ---------- legal / policy content ---------- */
  .legal .wrap{max-width:840px;}
  .legal h1{font-size:clamp(28px,4vw,44px);font-weight:700;color:var(--navy);margin-top:18px;}
  .legal .updated{font-size:13px;color:var(--ink-soft);margin:16px 0 60px;}
  .legal h2{
    font-size:20px;font-weight:700;color:var(--navy);
    margin:52px 0 18px;padding-top:36px;border-top:1px solid var(--line);
  }
  .legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0;}
  .legal p{font-size:15px;color:var(--ink-soft);margin-bottom:14px;}
  .legal ul{margin:0 0 14px 1.4em;color:var(--ink-soft);font-size:15px;}
  .legal li{margin-bottom:6px;}
  .legal .contact-block{
    background:var(--card);padding:28px 32px;border-radius:2px;
    font-size:14px;color:var(--ink);line-height:2;
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;height:100svh;min-height:680px;
    /* overrides the generic section padding — the hero lays itself out
       edge to edge and its own padding lives on .hero-inner */
    padding:0;
    display:flex;flex-direction:column;justify-content:flex-end;
    overflow:hidden;
    background:linear-gradient(160deg,var(--dawn-1) 0%, var(--dawn-2) 46%, var(--dawn-3) 78%, var(--dawn-4) 100%);
  }
  /* Key visual: the Milky Way over the Yamaga valley at dawn.
     Slowly drifts in scale so the still image never feels static. */
  .hero-photo{
    position:absolute;inset:0;pointer-events:none;
    background:url("../images/imageTOP.webp") center/cover no-repeat;
    animation:heroDrift 26s ease-in-out infinite;
    will-change:transform;
  }
  @keyframes heroDrift{
    0%,100%{transform:scale(1.04);}
    50%{transform:scale(1.13);}
  }
  /* Darkens the lower-left so the headline keeps contrast over the
     bright horizon, without flattening the sky. */
  .hero-scrim{
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(0deg, rgba(6,14,32,0.86) 0%, rgba(6,14,32,0.45) 32%, rgba(6,14,32,0) 62%),
      linear-gradient(90deg, rgba(6,14,32,0.55) 0%, rgba(6,14,32,0.10) 45%, rgba(6,14,32,0) 70%);
  }

  .hero-noise{position:absolute;inset:0;opacity:0.06;mix-blend-mode:overlay;pointer-events:none;}
  .hero-inner{position:relative;z-index:2;padding:0 48px 88px;will-change:transform;}
  @media (max-width:768px){.hero-inner{padding:0 24px 64px;}}
  .hero-eyebrow{color:rgba(255,255,255,0.75);letter-spacing:0.32em;font-size:12px;font-family:'Inter';margin-bottom:26px;}
  /* Desktop has room for one line; the forced break only applies once the
     hero copy stacks to mobile width, where natural wrapping could otherwise
     strand "COMPANY" alone depending on the device's exact viewport width. */
  .hero-eyebrow-break{display:none;}
  @media (max-width:768px){ .hero-eyebrow-break{display:inline;} }
  .hero h1{
    font-size:clamp(42px, 7vw, 108px);
    font-weight:900;color:#fff;
    line-height:1.15;
    /* negative at display size — see the optical typography block above */
    letter-spacing:-0.03em;
    /* em, not ch: ch measures the Latin "0" (~0.6em), far too narrow for
       full-width Japanese — it was forcing a second, unwanted wrap inside
       lines already broken deliberately with <br>. Sized with headroom for
       the longest line used across pages so far (12 full-width characters
       plus letter-spacing), not just the current shortest case. */
    max-width:15em;
  }
  .hero h1 .grad{
    background:linear-gradient(100deg,#fff 10%, var(--gold-soft) 55%, #fff 90%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:shimmer 7s ease-in-out infinite;
  }
  @keyframes shimmer{0%,100%{background-position:0% 0;}50%{background-position:100% 0;}}
  .hero-sub{
    color:rgba(255,255,255,0.8);
    max-width:520px;margin-top:28px;font-size:16px;font-weight:300;
  }
  .hero-cta{display:block;margin-top:48px;}
  .hero-cta > span{display:flex;gap:18px;flex-wrap:wrap;}
  .hero-since{
    position:absolute;right:48px;bottom:32px;z-index:2;
    font-family:'Inter';font-size:11px;letter-spacing:0.3em;
    color:rgba(255,255,255,0.55);
  }
  @media (max-width:768px){.hero-since{display:none;}}

  .btn{
    font-family:'Inter';font-size:13px;letter-spacing:0.08em;
    padding:15px 30px;border-radius:2px;
    /* Filled and outlined buttons sit side by side, so the filled one carries
       an invisible border of the same width — without it the outlined button
       stands 2px taller and the pair no longer shares a baseline. */
    border:1px solid transparent;
    display:inline-flex;align-items:center;gap:10px;
    position:relative;overflow:hidden;
    transition:color .4s var(--e-out), border-color .4s var(--e-out);
    will-change:transform;
  }
  .btn::before{
    content:'';position:absolute;inset:0;z-index:-1;
    transform:translateY(101%);transition:transform .55s var(--e-out);
  }
  .btn-solid{background:var(--gold);color:var(--navy);font-weight:600;}
  .btn-solid::before{background:#fff;}
  .btn-solid:hover::before{transform:translateY(0);}
  .btn-outline{border:1px solid rgba(255,255,255,0.55);color:#fff;}
  .btn-outline::before{background:rgba(255,255,255,0.16);}
  .btn-outline:hover{border-color:#fff;}
  .btn-outline:hover::before{transform:translateY(0);}

  /* Centred along the bottom edge: at the left it collided with the CTA
     buttons. Stacked vertically so it reads as a downward cue. */
  .scroll-cue{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
    color:rgba(255,255,255,0.7);font-size:11px;letter-spacing:0.2em;
    display:flex;flex-direction:column;align-items:center;gap:10px;font-family:'Inter';
  }
  /* On phones the hero is already tall enough to imply scrolling, and the
     cue only crowds the copy. */
  @media (max-width:768px){.scroll-cue{display:none;}}
  .scroll-line{width:1px;height:40px;background:rgba(255,255,255,0.4);position:relative;overflow:hidden;}
  .scroll-line::after{content:'';position:absolute;top:-40px;left:0;width:100%;height:40%;background:#fff;animation:scrollMove 2.2s ease-in-out infinite;}
  @keyframes scrollMove{0%{top:-40%;}100%{top:100%;}}

  /* ---------- reveal system ----------
     Every rule that hides content up front is scoped to html.js, so a failed
     or blocked script leaves the page fully readable rather than blank. */
  /* no will-change here: this matches ~60 elements and holding a
     compositor layer for each of them costs more than it saves */
  .js [data-reveal]{
    opacity:0;transform:translateY(32px);
    transition:opacity 1s var(--e-out) var(--d,0s), transform 1s var(--e-out) var(--d,0s);
  }
  .js [data-reveal].in{opacity:1;transform:none;}
  /* legacy hook kept for safety */
  .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e-out), transform .9s var(--e-out);}
  .js .reveal.in{opacity:1;transform:translateY(0);}

  /* line-mask: text slides up from behind a clipped edge */
  .line-mask{overflow:hidden;}
  .js .line-mask > span{
    display:block;
    transform:translateY(110%);
    transition:transform 1.1s var(--e-out) var(--d,.6s);
    will-change:transform;
  }
  .js .loaded .line-mask > span{transform:translateY(0);}

  /* split-heading lines (built by JS) */
  .s-line{display:block;overflow:hidden;}
  .js .s-line > span{
    display:block;
    transform:translateY(110%);
    transition:transform 1.05s var(--e-out);
  }
  .js [data-split].in .s-line > span{transform:translateY(0);}
  .js [data-split].in .s-line:nth-child(1) > span{transition-delay:.02s;}
  .js [data-split].in .s-line:nth-child(2) > span{transition-delay:.12s;}
  .js [data-split].in .s-line:nth-child(3) > span{transition-delay:.22s;}
  .js [data-split].in .s-line:nth-child(4) > span{transition-delay:.32s;}
  /* hero heading fires on load, not on scroll */
  .js .hero h1[data-split] .s-line > span{transform:translateY(110%);}
  .js .loaded .hero h1[data-split] .s-line > span{transform:translateY(0);}
  .js .loaded .hero h1[data-split] .s-line:nth-child(1) > span{transition-delay:.34s;}
  .js .loaded .hero h1[data-split] .s-line:nth-child(2) > span{transition-delay:.46s;}

  section{padding:150px 0;position:relative;}
  @media (max-width:768px){section{padding:96px 0;}}

  /* ---------- purpose ---------- */
  .purpose{background:var(--navy);color:#fff;text-align:left;}
  .purpose .eyebrow{color:var(--gold);}
  .purpose h2{
    font-size:clamp(30px,4.6vw,64px);
    font-weight:700;line-height:1.6;
    /* em, not ch: ch measures the Latin "0" (~0.6em), which is far too
       narrow for full-width Japanese and forced the lines to wrap. */
    margin-top:34px;max-width:18em;
  }
  @media (max-width:768px){
    /* The longest line is 17 full-width characters and a full-width
       character is exactly 1em, so it needs 17em to sit on one line.
       At 4.9vw that is 83.3vw, inside the 100vw − 48px the wrap allows
       on any phone down to ~287px. Sized by the text, not by taste. */
    .purpose h2{font-size:4.9vw;margin-top:24px;}
  }
  .purpose .accent{color:var(--gold-soft);font-weight:900;}
  .purpose-foot{
    margin-top:60px;padding-top:40px;border-top:1px solid rgba(255,255,255,0.15);
    display:flex;gap:60px;flex-wrap:wrap;
  }
  .purpose-foot div{max-width:280px;font-size:14px;color:rgba(255,255,255,0.65);font-weight:300;}
  .purpose-foot strong{display:block;color:#fff;font-weight:600;margin-bottom:8px;font-size:15px;}

  /* ---------- marquee ---------- */
  .marquee{
    background:var(--navy);
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(255,255,255,0.1);
    overflow:hidden;padding:26px 0;display:flex;
  }
  .marquee-track{display:flex;flex-shrink:0;animation:marquee 34s linear infinite;}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  .marquee span{
    font-family:'Inter',sans-serif;
    font-size:clamp(26px,4.6vw,62px);
    font-weight:900;letter-spacing:0.04em;
    white-space:nowrap;flex-shrink:0;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,0.32);
    padding-right:.4em;
  }
  .marquee em{
    font-style:normal;color:var(--gold);
    -webkit-text-stroke:0;
    padding:0 .45em;font-size:.5em;vertical-align:middle;
  }
  /* the track holds two identical copies, so one loop travels exactly half
     its width — translating the full width would leave a gap each cycle */
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ---------- section headers ---------- */
  .sec-head{margin-bottom:70px;}
  .sec-head h2{
    font-size:clamp(30px,4vw,52px);
    font-weight:700;margin-top:18px;line-height:1.25;
    /* em, not ch — see .hero h1 for why */
    max-width:13em;
  }
  .sec-head p{margin-top:20px;max-width:46ch;color:var(--ink-soft);font-weight:300;}

  /* ---------- services (sticky stacked cards) ---------- */
  .services{padding:0;}
  .svc-card{
    position:sticky;top:0;
    height:100svh;min-height:640px;
    /* Centred rather than bottom-aligned: the next card rises from the
       bottom to cover this one, so text sitting low is the first thing
       to disappear. Centring roughly doubles how long it stays readable. */
    display:flex;align-items:center;
    overflow:hidden;
  }
  .svc-bg{
    position:absolute;inset:-12% 0;
    transition:transform 1.2s var(--e-out);
    will-change:transform;
  }
  .svc-card:hover .svc-bg{transform:scale(1.06);}
  /* Text is left-aligned and vertically centred, so the scrim runs left to
     right — it protects the copy while leaving the right of the photo open. */
  .svc-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(90deg, rgba(4,10,24,0.86) 0%, rgba(4,10,24,0.66) 34%, rgba(4,10,24,0.20) 64%, rgba(4,10,24,0) 100%),
      linear-gradient(0deg, rgba(4,10,24,0.42), rgba(4,10,24,0.12) 55%);
  }
  @media (max-width:768px){
    /* narrow screens: copy spans the full width, so darken evenly */
    .svc-overlay{background:linear-gradient(0deg, rgba(4,10,24,0.80), rgba(4,10,24,0.55) 60%, rgba(4,10,24,0.45));}
  }
  .svc-content{position:relative;z-index:2;padding:70px 48px;width:100%;color:#fff;}
  @media (max-width:768px){.svc-content{padding:48px 24px;}}
  .svc-num{
    position:absolute;top:-8px;right:48px;
    font-family:'Inter';font-size:clamp(60px,11vw,150px);font-weight:900;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.18);
    line-height:1;pointer-events:none;
  }
  @media (max-width:768px){.svc-num{right:24px;}}
  .svc-tag{font-family:'Inter';font-size:12px;letter-spacing:0.3em;color:var(--gold-soft);margin-bottom:18px;}
  .svc-title{font-size:clamp(32px,6vw,84px);font-weight:900;letter-spacing:0.02em;}
  .svc-jp{font-size:clamp(16px,2vw,22px);font-weight:400;margin-top:14px;color:rgba(255,255,255,0.85);}
  .svc-desc{max-width:46ch;margin-top:20px;font-weight:300;color:rgba(255,255,255,0.72);font-size:15px;}
  .svc-link{
    display:inline-flex;align-items:center;gap:10px;margin-top:30px;
    font-family:'Inter';font-size:13px;letter-spacing:0.06em;color:#fff;
    padding-bottom:5px;position:relative;
  }
  .svc-link::after{
    content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
    background:rgba(255,255,255,0.45);
    transform:scaleX(1);transform-origin:100% 50%;
    transition:transform .5s var(--e-out);
  }
  .svc-link:hover::after{transform:scaleX(0);}
  .svc-link i{font-style:normal;transition:transform .5s var(--e-out);}
  .svc-link:hover i{transform:translateX(8px);}

  /* Key visuals. The gradient is listed second so it still fills the card
     if the artwork is slow or fails to load — swap the image URL for a
     photograph when real photography is available. */
  .svc-bg{background-size:cover;background-position:center;}
  /* Ceremony uses the real hall, shot under the stars. The portrait crop
     is served to narrow screens so the building isn't cropped away. */
  .bg-ceremony{background-image:url("../images/hero-bg.jpg"),
    linear-gradient(135deg, #0B2346 0%, #1c2f4d 55%, #3a3630 100%);}
  @media (max-width:768px){
    .bg-ceremony{background-image:url("../images/hero-mobile.jpg"),
      linear-gradient(135deg, #0B2346 0%, #1c2f4d 55%, #3a3630 100%);}
  }
  .bg-design{background-image:url("../images/design.webp"),
    linear-gradient(135deg, #10203a 0%, #2b2438 60%, #4d3f66 100%);}
  .bg-branding{background-image:url("../images/Branding.webp"),
    linear-gradient(135deg, #0B2346 0%, #4d3f66 60%, #b57a54 100%);}
  .bg-event{background-image:url("../images/event.webp"),
    linear-gradient(135deg, #1c2f4d 0%, #b57a54 65%, #e8b978 100%);}
  .bg-ai{background-image:url("../images/AIseminar.webp"),
    linear-gradient(135deg, #050d1c 0%, #0B2346 55%, #16305e 100%);}

  /* ---------- philosophy ---------- */
  .philosophy{background:var(--navy);color:#fff;}
  .phi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  @media (max-width:900px){.phi-grid{grid-template-columns:1fr;}}
  .phi-item{
    padding:50px 44px;border-left:1px solid rgba(255,255,255,0.14);
    position:relative;transition:background .6s var(--e-out);
  }
  .phi-item::before{
    content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--gold);
    transform:scaleY(0);transform-origin:50% 100%;
    transition:transform .7s var(--e-out);
  }
  .phi-item:hover::before{transform:scaleY(1);transform-origin:50% 0;}
  .phi-item:hover{background:rgba(255,255,255,0.03);}
  .phi-item:first-child{border-left:none;}
  @media (max-width:900px){
    .phi-item{border-left:none;border-top:1px solid rgba(255,255,255,0.14);}
    .phi-item:first-child{border-top:none;}
    .phi-item::before{display:none;}
  }
  .phi-item .eyebrow{color:var(--gold-soft);}
  .phi-item h3{font-size:26px;font-weight:700;line-height:1.4;margin:18px 0 16px;}
  .phi-item p{color:rgba(255,255,255,0.68);font-weight:300;font-size:15px;}

  /* ---------- company ---------- */
  .company .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:90px;}
  @media (max-width:900px){.company .wrap{grid-template-columns:1fr;gap:56px;}}
  /* The visual carries the company's namesake: 天の川, a river of stars. */
  .company-visual{
    aspect-ratio:4/5;border-radius:2px;overflow:hidden;position:relative;
    background-image:url("../images/art-milkyway.svg"),
      linear-gradient(160deg,#0B2346,#4d3f66 60%, #b57a54 100%);
    background-size:cover;background-position:center;
  }
  .company-visual::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 30% 20%, rgba(212,175,55,0.22), transparent 60%);
    animation:visualPulse 11s ease-in-out infinite;
  }
  @keyframes visualPulse{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}}
  /* Labelled on both sides so the figure reads unambiguously as the
     company's age, never as a person's. */
  .company-years{
    position:absolute;top:30px;left:30px;right:30px;z-index:2;color:#fff;
    line-height:1;
  }
  .yr-label{
    display:block;font-size:11px;letter-spacing:0.22em;
    opacity:.75;margin-bottom:10px;
  }
  .yr-figure{display:flex;align-items:baseline;gap:6px;}
  .yr-figure em{
    font-style:normal;font-family:'Inter';
    font-size:56px;font-weight:900;letter-spacing:-0.02em;
  }
  .yr-figure i{font-style:normal;font-size:20px;font-weight:500;}
  .yr-since{
    display:block;font-size:11px;letter-spacing:0.06em;
    opacity:.68;margin-top:12px;
    padding-top:12px;border-top:1px solid rgba(255,255,255,0.22);
    max-width:15em;
  }
  .company-quote{
    position:absolute;bottom:30px;left:30px;right:30px;color:#fff;z-index:2;
    font-size:14px;font-weight:300;line-height:1.9;
  }
  .company-quote strong{display:block;font-weight:700;margin-top:14px;font-size:15px;}

  .info-row{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:140px 1fr;gap:20px;}
  .info-row:last-child{border-bottom:1px solid var(--line);}
  .info-row dt{font-family:'Inter';font-size:12px;letter-spacing:0.1em;color:var(--ink-soft);}
  .info-row dd{font-size:15px;}
  @media (max-width:560px){.info-row{grid-template-columns:1fr;gap:6px;}}
  .history-list{margin-top:14px;}
  .history-item{display:flex;gap:22px;padding:14px 0;border-top:1px solid var(--line);}
  .history-item:first-child{border-top:none;}
  .history-item .yr{font-family:'Inter';font-weight:600;color:var(--navy);min-width:92px;}
  .history-item .desc{font-size:14px;color:var(--ink-soft);}

  /* ---------- contact ---------- */
  .contact{background:var(--bg);}
  .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:90px;}
  @media (max-width:900px){.contact .wrap{grid-template-columns:1fr;gap:50px;}}
  .form-row{margin-bottom:24px;position:relative;}
  .form-row label{display:block;font-size:12px;font-family:'Inter';letter-spacing:0.08em;color:var(--ink-soft);margin-bottom:10px;transition:color .4s ease;}
  .form-row input, .form-row textarea, .form-row select{
    width:100%;border:none;border-bottom:1px solid var(--line);
    background:transparent;padding:12px 4px;font-size:15px;font-family:inherit;color:var(--ink);
  }
  .form-row::after{
    content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
    transform:scaleX(0);transform-origin:0 50%;
    transition:transform .5s var(--e-out);
  }
  .form-row:focus-within::after{transform:scaleX(1);}
  .form-row:focus-within label{color:var(--gold);}
  .form-row input:focus, .form-row textarea:focus, .form-row select:focus{outline:none;}
  .form-row textarea{resize:vertical;min-height:110px;}
  .contact-side{display:flex;flex-direction:column;justify-content:space-between;}
  .contact-info{margin-top:40px;}
  .contact-info div{margin-bottom:22px;}
  .contact-info .eyebrow{display:block;margin-bottom:6px;}
  /* Honeypot. Taken out of the layout and off the tab order, but not
     display:none — some bots skip fields that are outright hidden. */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .form-error{
    display:none;margin:0 0 18px;font-size:13px;color:#b3372c;
    padding:12px 14px;background:rgba(179,55,44,0.07);
    border-left:2px solid #b3372c;
  }
  .form-error.show{display:block;}
  .form-note{margin-top:16px;font-size:13px;color:var(--ink-soft);}
  .form-note a{color:var(--navy);border-bottom:1px solid var(--line);transition:color .4s var(--e-out), border-color .4s var(--e-out);}
  .form-note a:hover{color:var(--gold);border-color:var(--gold);}
  .form-check{
    display:flex;align-items:flex-start;gap:10px;margin-top:22px;
    font-size:14px;color:var(--ink);cursor:pointer;user-select:none;
  }
  /* Browsers ignore padding on a checkbox, so the touch target comes from the
     wrapping <label> being 44px tall — the whole line toggles it. */
  .form-check{min-height:44px;align-items:center;}
  .form-check input{width:20px;height:20px;flex-shrink:0;accent-color:var(--gold);cursor:pointer;}
  #submitBtn[disabled]{opacity:.55;cursor:progress;}

  /* Hides reCAPTCHA v3's default corner badge. Google's terms require the
     text notice near the form (see .form-note) to stay visible instead —
     removing both the badge and the notice is not permitted. */
  .grecaptcha-badge{visibility:hidden !important;}
  .thanks{display:none;padding:60px 0;text-align:center;}
  .thanks.show{display:block;animation:thanksIn .8s var(--e-out);}
  @keyframes thanksIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
  .thanks h3{font-size:24px;font-weight:700;color:var(--navy);}
  .thanks p{margin-top:12px;color:var(--ink-soft);}

  /* ---------- map ---------- */
  .map-section{padding:0;background:var(--bg);}
  .map-frame{
    position:relative;width:100%;height:460px;
    filter:grayscale(0.25) contrast(1.05);
  }
  .map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  @media (max-width:768px){.map-frame{height:320px;}}
  .map-cta{
    max-width:var(--maxw);margin:0 auto;padding:22px 48px;
    display:flex;justify-content:flex-end;
  }
  @media (max-width:768px){.map-cta{padding:18px 24px;}}
  .map-cta a{
    font-family:'Inter';font-size:13px;letter-spacing:0.06em;color:var(--navy);
    border-bottom:1px solid var(--line);padding-bottom:3px;
    transition:border-color .4s var(--e-out), color .4s var(--e-out);
  }
  .map-cta a:hover{color:var(--gold);border-color:var(--gold);}

  /* outbound reference link, e.g. history-item citations (event.html) */
  .ext-link{
    display:inline-block;margin-top:10px;
    font-family:'Inter';font-size:12px;letter-spacing:0.04em;color:var(--navy);
    border-bottom:1px solid var(--line);padding-bottom:2px;
    transition:color .4s var(--e-out), border-color .4s var(--e-out);
  }
  .ext-link:hover{color:var(--gold);border-color:var(--gold);}

  /* ---------- footer ---------- */
  footer{background:var(--navy);color:rgba(255,255,255,0.6);padding:70px 0 34px;}
  .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,0.12);}
  .foot-logo{height:24px;width:auto;}
  .foot-tag{margin-top:14px;font-size:13px;max-width:32ch;font-weight:300;}
  .foot-cols{display:flex;gap:70px;flex-wrap:wrap;}
  .foot-col h4{font-family:'Inter';font-size:12px;letter-spacing:0.1em;color:var(--gold-soft);margin-bottom:16px;}
  .foot-col ul{list-style:none;}
  .foot-col li{margin-bottom:10px;font-size:13px;}
  .foot-col a{position:relative;display:inline-block;transition:color .4s var(--e-out), transform .4s var(--e-out);}
  .foot-col a:hover{color:#fff;transform:translateX(5px);}
  .foot-bottom{display:flex;justify-content:space-between;padding-top:26px;font-size:11px;flex-wrap:wrap;gap:10px;}
  .foot-sns{display:flex;gap:10px;margin-top:20px;}
  .foot-sns-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.6);transition:background .3s,border-color .3s,color .3s;}
  .foot-sns-btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:#fff;}

  /* This page's H1 lines run longer (up to 10 full-width characters) than
     the homepage's ("想いを、" / "未来へ。", 4-5 chars), which the shared
     .hero h1 42px floor was sized around. At that floor, this page's lines
     don't fit a phone's width even with the <br> already placed, and wrap
     a second time in an uncontrolled spot. Scoped to this page's hero only. */
  @media (max-width:480px){
    #ait-top h1{font-size:clamp(30px, 9vw, 108px);}
  }
  /* "人が集まる場を、" is 8 full-width characters — still enough to
     overflow a phone width at the 42px floor (8×42=336px vs. ~327px
     available), if only by a hair. */
  @media (max-width:480px){
    #ev-top h1{font-size:clamp(36px, 7vw, 108px);}
  }

  /* ==================================================================
     AI TRAINING PAGE (ai-training.html)
     Reuses global tokens, .hero/.purpose/.info-row/.recruit/.btn/.eyebrow
     etc. from the rest of the site; only page-specific patterns follow.
     ================================================================== */

  /* hero photo swap: same treatment as the homepage hero, different
     source image. Declared after .hero-photo so it wins on cascade order
     without needing extra specificity. */
  .hero-photo--ai{background-image:url("../images/AIseminar.webp");}
  .hero-photo--event{background-image:url("../images/event.webp");}

  /* ---- pain points ---- */
  .pain-grid{
    list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
    background:var(--line);margin-top:10px;
  }
  @media (max-width:900px){.pain-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.pain-grid{grid-template-columns:1fr;}}
  .pain-item{
    background:var(--bg);padding:32px;font-size:15px;line-height:1.9;color:var(--ink);
    position:relative;padding-left:52px;
  }
  .pain-item::before{
    content:'';position:absolute;left:28px;top:36px;width:8px;height:8px;
    border-radius:50%;background:var(--gold);
  }
  .pain-note{margin-top:32px;font-size:14px;color:var(--ink-soft);}

  /* ---- pillars (about) ---- */
  .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:70px;}
  @media (max-width:900px){.pillar-grid{grid-template-columns:1fr;gap:44px;}}
  /* 2-column variant for sections whose items carry longer paragraphs —
     3 columns reads cramped there. */
  .pillar-grid--2col{grid-template-columns:repeat(2,1fr);}
  @media (max-width:900px){.pillar-grid--2col{grid-template-columns:1fr;}}
  .pillar-num{font-family:'Inter';font-weight:900;font-size:15px;letter-spacing:0.1em;color:var(--gold);margin-bottom:14px;}
  .pillar-item h3{font-size:22px;font-weight:700;color:var(--navy);margin-bottom:12px;}
  .pillar-item p{font-size:14px;color:var(--ink-soft);}

  /* ---- why us (dark) ---- */
  .reasons-section{background:var(--navy);color:#fff;}
  .reasons-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:20px;}
  @media (max-width:900px){.reasons-grid{grid-template-columns:1fr;}}
  .reasons-item{
    padding:44px;border-top:1px solid rgba(255,255,255,0.14);
    border-left:1px solid rgba(255,255,255,0.14);
  }
  @media (max-width:900px){.reasons-item{border-left:none;}}
  .reasons-item:nth-child(odd){border-left:none;}
  .reasons-num{
    font-family:'Inter';font-weight:900;font-size:36px;line-height:1;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.4);margin-bottom:16px;
  }
  .reasons-item h3{font-size:19px;font-weight:700;margin-bottom:12px;}
  .reasons-item p{font-size:14px;color:rgba(255,255,255,0.68);font-weight:300;}

  /* ---- curriculum ---- */
  .curri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);margin-top:10px;}
  @media (max-width:900px){.curri-grid{grid-template-columns:1fr;}}
  .curri-card{background:var(--bg);padding:40px;}
  .curri-tag{font-family:'Inter';font-size:11px;letter-spacing:0.24em;color:var(--gold);margin-bottom:16px;}
  .curri-card h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:14px;line-height:1.5;}
  .curri-lead{font-size:13.5px;color:var(--ink-soft);margin-bottom:22px;line-height:1.8;}
  .curri-card ul{list-style:none;}
  .curri-card li{
    font-size:14px;color:var(--ink-soft);padding:12px 0;border-top:1px solid var(--line);
  }
  .curri-card li:first-child{border-top:none;}

  /* ---- implementation support ---- */
  .support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);margin-top:10px;}
  @media (max-width:700px){.support-grid{grid-template-columns:1fr;}}
  .support-item{background:#fff;padding:40px;}
  .support-item h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:12px;}
  .support-item p{font-size:14px;color:var(--ink-soft);}

  /* ---- title+description card grid (3-up, reused across pages) ---- */
  .role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);margin-top:10px;}
  @media (max-width:900px){.role-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.role-grid{grid-template-columns:1fr;}}
  .role-item{background:#fff;padding:34px;}
  .role-item h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:10px;}
  .role-item p{font-size:13.5px;color:var(--ink-soft);}

  /* ---- target chips ---- */
  .chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
  .chip{
    background:#fff;border:1px solid var(--line);border-radius:100px;
    padding:13px 26px;font-size:14px;color:var(--navy);
  }

  /* ---- flow ---- */
  .flow-list{margin-top:20px;}
  .flow-item{display:flex;gap:32px;padding:36px 0;border-top:1px solid var(--line);align-items:flex-start;}
  .flow-item:first-child{border-top:none;}
  .flow-num{
    font-family:'Inter';font-weight:900;font-size:15px;letter-spacing:0.05em;
    color:var(--gold);min-width:34px;padding-top:3px;
  }
  .flow-body h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:8px;}
  .flow-body p{font-size:14px;color:var(--ink-soft);max-width:56ch;}

  /* ---- FAQ (native <details>, no JS needed) ---- */
  .faq-list{max-width:880px;margin-top:20px;}
  .faq-item{border-top:1px solid var(--line);}
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-item summary{
    cursor:pointer;list-style:none;padding:28px 0;
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    font-weight:600;font-size:16px;color:var(--navy);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+';font-family:'Inter';font-size:24px;font-weight:300;color:var(--gold);
    flex-shrink:0;transition:transform .4s var(--e-out);
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-a{font-size:14.5px;color:var(--ink-soft);line-height:1.9;max-width:70ch;padding:0 0 28px;}

  /* ---- final CTA phone line ---- */
  .cta-tel{
    margin-top:22px;font-family:'Inter';font-size:14px;letter-spacing:0.04em;
    color:rgba(255,255,255,0.85);
  }

  /* ---- 404 ---- */
  .notfound-links{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 8px;}
  .btn-outline-dark{border:1px solid var(--navy);color:var(--navy);}
  .btn-outline-dark::before{background:var(--navy);}
  .btn-outline-dark:hover{color:#fff;}

  ::selection{background:var(--gold);color:var(--navy);}

  /* ---- hero easter egg + hidden mini game ---- */
  /* The mark is a white silhouette, so it reads straight against the night-sky
     hero with no plate behind it — just a gold glow to hint it's interactive. */
  .hero-easter{
    position:absolute;width:34px;height:34px;
    cursor:pointer;z-index:3;
    filter:drop-shadow(0 0 7px rgba(212,175,55,0.45));
    animation:easterPulse 3.4s ease-in-out infinite;
    transition:filter .3s ease, transform .3s var(--e-out);
  }
  .hero-easter-img{width:100%;height:100%;object-fit:contain;display:block;}
  .hero-easter:hover{
    filter:drop-shadow(0 0 16px rgba(212,175,55,0.9));
    transform:scale(1.25) rotate(-4deg);
  }
  @keyframes easterPulse{
    0%,100%{opacity:.62;}
    50%{opacity:1;}
  }

  /* ---- arcade shell ---- */
  .invaders-overlay{
    position:fixed;inset:0;z-index:9999;
    background:radial-gradient(circle at 50% 18%, #16305e, #04091a 78%);
    display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;
    font-family:'Press Start 2P','DotGothic16',monospace;
    -webkit-font-smoothing:none;
  }
  .invaders-overlay.show{display:flex;animation:invBoot .5s var(--e-out);}
  /* CRT power-on: a hard horizontal line that opens out into the full frame. */
  @keyframes invBoot{
    0%{clip-path:inset(50% 0 50% 0);filter:brightness(3);}
    45%{clip-path:inset(48.5% 0 48.5% 0);filter:brightness(2.4);}
    100%{clip-path:inset(0 0 0 0);filter:brightness(1);}
  }
  /* Scanlines + vignette, drawn over everything but never eating clicks. */
  .invaders-crt{
    position:absolute;inset:0;pointer-events:none;z-index:20;
    background:
      repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 1px, rgba(0,0,0,0) 1px 3px),
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
    animation:crtFlicker 5.5s steps(1) infinite;
  }
  @keyframes crtFlicker{
    0%,96%,100%{opacity:1;}
    97%{opacity:.82;}
    98%{opacity:1;}
    99%{opacity:.9;}
  }

  /* ---- title screen ---- */
  .invaders-title{
    position:relative;
    width:min(92vw, 420px);
    max-height:88vh;
    aspect-ratio:1024/1536;
    animation:titleIn .55s var(--e-out) both;
  }
  @keyframes titleIn{
    from{opacity:0;transform:scale(.94);}
    to{opacity:1;transform:scale(1);}
  }
  .invaders-title.hide{display:none;}
  .invaders-title-img{
    width:100%;height:100%;object-fit:cover;display:block;
    border-radius:3px;
    image-rendering:pixelated;
  }
  .invaders-title-btn{
    position:absolute;background:transparent;border:none;padding:0;margin:0;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    border-radius:2px;
    transition:background .18s linear, box-shadow .18s linear;
  }
  .invaders-btn-start{left:32%;top:78%;width:30%;height:4.3%;}
  .invaders-btn-exit{left:37%;top:82.8%;width:22%;height:4.3%;}
  /* Arcade menu highlight — a flat gold wash, no soft blur, to stay in period. */
  .invaders-title-btn:hover,
  .invaders-title-btn:focus-visible{
    background:rgba(212,175,55,0.28);
    box-shadow:0 0 0 2px rgba(232,200,120,0.75);
    outline:none;
  }
  .invaders-btn-start{animation:startBlink 1.15s steps(1) infinite;}
  @keyframes startBlink{
    0%,55%{background:rgba(212,175,55,0);}
    56%,100%{background:rgba(212,175,55,0.16);}
  }
  .invaders-btn-start:hover{animation:none;}
  .invaders-press{
    position:absolute;left:0;right:0;bottom:-30px;
    text-align:center;font-size:9px;letter-spacing:0.18em;
    color:var(--gold-soft);
    animation:pressBlink 1.15s steps(1) infinite;
  }
  @keyframes pressBlink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

  /* ---- opening crawl ---- */
  .invaders-opening{
    display:none;flex-direction:column;align-items:center;justify-content:center;
    width:min(92vw, 460px);text-align:center;padding:24px;
  }
  .invaders-opening.show{display:flex;}
  .inv-op-warning{
    font-size:22px;letter-spacing:0.24em;color:#e8433c;
    text-shadow:0 3px 0 #5a0d0a;margin-bottom:28px;
    animation:warnBlink .55s steps(1) infinite;
  }
  @keyframes warnBlink{ 0%,49%{opacity:1;} 50%,100%{opacity:.12;} }
  .inv-op-line{
    font-family:'DotGothic16',monospace;
    font-size:14px;line-height:2;letter-spacing:0.06em;color:#fff;
    opacity:0;
    animation:opLineIn .45s steps(4) forwards;
    animation-delay:var(--d);
  }
  /* breathing room where the story moves to its next beat */
  .inv-op-gap{margin-top:15px;}
  @keyframes opLineIn{
    from{opacity:0;transform:translateY(7px);}
    to{opacity:1;transform:translateY(0);}
  }
  .inv-op-save{
    margin-top:28px;font-size:17px;letter-spacing:0.16em;
    color:var(--gold-soft);text-shadow:0 3px 0 #6b4c00;
    opacity:0;
    animation:opSaveIn 1.9s steps(1) forwards;
    animation-delay:var(--d);
  }
  /* lands with a punch, then flashes like a credit prompt */
  @keyframes opSaveIn{
    0%{opacity:0;transform:scale(.8);}
    12%{opacity:1;transform:scale(1.14);}
    22%{transform:scale(1);}
    38%{opacity:.3;} 48%{opacity:1;}
    64%{opacity:.3;} 74%{opacity:1;}
    100%{opacity:1;transform:scale(1);}
  }
  .inv-op-skip{
    margin-top:34px;font-size:8px;letter-spacing:0.16em;color:rgba(255,255,255,0.4);
    animation:pressBlink 1.15s steps(1) infinite;
  }
  @media (max-width:600px){
    .inv-op-warning{font-size:17px;margin-bottom:22px;}
    .inv-op-line{font-size:12px;}
    .inv-op-save{font-size:14px;}
  }

  /* ---- game screen ---- */
  .invaders-game{display:none;position:relative;flex-direction:column;align-items:center;}
  .invaders-game.show{display:flex;animation:titleIn .4s var(--e-out) both;}
  /* HUD sits over the playfield like a cabinet bezel, inside the stage so it
     tracks the canvas rather than the viewport. */
  .invaders-topbar{
    position:absolute;top:9px;left:9px;right:9px;z-index:10;
    display:flex;justify-content:space-between;align-items:center;color:#fff;line-height:1;
  }
  .invaders-score{font-size:11px;letter-spacing:0.12em;color:var(--gold-soft);}
  .invaders-score span{color:#fff;}
  /* Nudge on every score change so points feel like they land. */
  .invaders-score span.bump{animation:scoreBump .22s steps(2);}
  @keyframes scoreBump{ 50%{transform:translateY(-3px);color:var(--gold);} }
  .invaders-tools{display:flex;align-items:center;gap:10px;}
  .invaders-icon-btn{
    background:none;border:2px solid rgba(255,255,255,0.35);color:#fff;
    min-width:34px;height:30px;padding:0 7px;font-size:9px;line-height:1;
    font-family:inherit;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s linear, border-color .2s linear, color .2s linear;
  }
  .invaders-icon-btn:hover{background:rgba(212,175,55,0.25);border-color:var(--gold-soft);}
  .invaders-icon-btn[aria-pressed="false"]{color:rgba(255,255,255,0.4);border-color:rgba(255,255,255,0.18);}
  .invaders-close{font-size:15px;}

  .invaders-stage{position:relative;line-height:0;}
  #invadersCanvas{
    background:#070f22;border:2px solid rgba(212,175,55,0.45);
    max-width:100%;touch-action:none;image-rendering:pixelated;
    box-shadow:0 0 34px rgba(22,48,94,0.9) inset, 0 0 20px rgba(0,0,0,0.6);
  }
  .invaders-hint{
    margin-top:18px;color:rgba(255,255,255,0.45);font-size:9px;
    letter-spacing:0.06em;font-family:'DotGothic16',monospace;text-align:center;line-height:1.9;
  }

  /* Wave / bonus banner flashed over the playfield. */
  .invaders-banner{
    position:absolute;left:0;right:0;top:42%;
    text-align:center;font-size:15px;letter-spacing:0.14em;line-height:1.6;
    color:var(--gold-soft);text-shadow:0 2px 0 #6b4c00;
    opacity:0;pointer-events:none;
  }
  .invaders-banner.show{animation:bannerFlash 1.5s steps(1) forwards;}
  @keyframes bannerFlash{
    0%,10%{opacity:1;} 15%{opacity:0;} 20%{opacity:1;} 25%{opacity:0;}
    30%,75%{opacity:1;} 100%{opacity:0;}
  }

  /* ---- fusuma wipe (Yachiyoza stage) ---- */
  .invaders-fusuma{
    position:absolute;inset:0;pointer-events:none;z-index:8;
    display:none;
    /* the panels park outside the frame between sweeps — clip them there */
    overflow:hidden;
  }
  .invaders-fusuma.run{display:block;}
  .inv-fusuma-panel{
    position:absolute;top:0;bottom:0;width:50.5%;
    background:
      linear-gradient(90deg, rgba(0,0,0,0.22), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.22)),
      repeating-linear-gradient(90deg, #d9cbab 0 14px, #cfc0a0 14px 15px),
      #d9cbab;
    border-top:5px solid #4a3a24;
    border-bottom:5px solid #4a3a24;
    box-sizing:border-box;
  }
  /* slides shut, holds, then draws back — 1.35s all told */
  .inv-fusuma-l{left:-51%;border-right:3px solid #4a3a24;}
  .inv-fusuma-r{right:-51%;border-left:3px solid #4a3a24;}
  .invaders-fusuma.run .inv-fusuma-l{animation:fusumaL 1.35s cubic-bezier(.5,0,.2,1) forwards;}
  .invaders-fusuma.run .inv-fusuma-r{animation:fusumaR 1.35s cubic-bezier(.5,0,.2,1) forwards;}
  @keyframes fusumaL{
    0%{transform:translateX(0);}
    37%,63%{transform:translateX(101%);}
    100%{transform:translateX(0);}
  }
  @keyframes fusumaR{
    0%{transform:translateX(0);}
    37%,63%{transform:translateX(-101%);}
    100%{transform:translateX(0);}
  }

  .invaders-gameover{
    position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;
    background:rgba(4,9,26,0.9);line-height:1.6;
  }
  .invaders-gameover.show{display:flex;animation:goIn .45s steps(3) both;}
  @keyframes goIn{ from{opacity:0;} to{opacity:1;} }
  .invaders-gameover-title{
    font-size:26px;line-height:1.5;letter-spacing:0.1em;color:#fff;text-align:center;
    text-shadow:0 3px 0 #7a1020;
    animation:goGlitch 2.6s steps(1) infinite;
  }
  @keyframes goGlitch{
    0%,92%,100%{transform:translate(0,0);}
    93%{transform:translate(-2px,1px);}
    95%{transform:translate(2px,-1px);}
    97%{transform:translate(-1px,0);}
  }
  .invaders-gameover-score{color:var(--gold-soft);font-size:11px;letter-spacing:0.1em;}
  .invaders-gameover-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
  .invaders-menu-btn{
    background:none;border:2px solid var(--gold-soft);color:var(--gold-soft);
    font-family:inherit;font-size:10px;letter-spacing:0.12em;
    padding:11px 16px;cursor:pointer;
    transition:background .18s linear, color .18s linear;
  }
  .invaders-menu-btn:hover,.invaders-menu-btn:focus-visible{background:var(--gold-soft);color:#0B2346;outline:none;}

  @media (max-width:600px){
    .invaders-score{font-size:9px;letter-spacing:0.08em;}
    .invaders-icon-btn{min-width:28px;height:26px;padding:0 5px;font-size:8px;}
    .invaders-close{font-size:13px;}
    .invaders-gameover-title{font-size:21px;}
    .invaders-hint{font-size:8px;}
  }