:root{
    --bg:#f7f7f7;
    --surface:#ffffff;
    --ink:#000000;
    --ink-soft:#2e2e2e;
    --ink-faint:#8c8c8c;
    --line:rgba(0,0,0,0.15);
    --line-strong:rgba(0,0,0,0.32);
    --accent:#000000;
    --accent-soft:#eeeeee;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-weight:400;
    line-height:1.7;
    overflow-x:hidden;
  }
  ::selection{background:var(--accent); color:#fff;}

  .mono{
    font-family:"JetBrains Mono", ui-monospace, monospace;
  }
  .eyebrow{
    font-family:"JetBrains Mono", ui-monospace, monospace;
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink-faint);
    display:flex;
    align-items:center;
    gap:.6em;
    margin-bottom:1.1em;
  }
  .eyebrow::before{
    content:"";
    width:1.6em;
    height:1px;
    background:var(--line-strong);
  }

  a{color:inherit;}

  /* ---- frame & registration marks ---- */
  .sheet-frame{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:40;
  }
  .reg{
    position:absolute;
    width:16px;
    height:16px;
  }
  .reg::before,.reg::after{
    content:"";
    position:absolute;
    background:var(--line-strong);
  }
  .reg::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%);}
  .reg::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%);}
  .reg.tl{ top:14px; left:14px; }
  .reg.tr{ top:14px; right:14px; }
  .reg.bl{ bottom:14px; left:14px; }
  .reg.br{ bottom:14px; right:14px; }
  @media (max-width:640px){ .reg{display:none;} }

  .scale-rule{
    position:fixed;
    top:0; right:0;
    width:3px;
    height:100%;
    background:var(--line);
    z-index:41;
  }
  .scale-fill{
    width:100%;
    height:0%;
    background:var(--accent);
    transition:height .05s linear;
  }
  @media (max-width:640px){ .scale-rule{width:2px;} }

  /* ---- shell ---- */
  .page{
    max-width:1080px;
    margin:0 auto;
    padding:0 clamp(20px,5vw,64px);
    position:relative;
  }
  section{
    border-top:1px solid var(--line);
    padding:clamp(52px,9vw,104px) 0;
  }
  section:first-of-type{ border-top:none; }

  /* ---- hero ---- */
  .hero{
    padding-top:clamp(28px,4vw,48px);
    padding-bottom:clamp(40px,6vw,64px);
    text-align:center;
  }
  .plate{
    width:min(220px,44vw);
    margin:0 auto;
  }
  .plate img{
    display:block;
    width:100%;
    height:auto;
  }

  /* ---- intro (tagline + about, two columns) ---- */
  section.intro-grid{
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(28px,5vw,64px);
    align-items:center;
  }
  @media (max-width:760px){
    section.intro-grid{ grid-template-columns:1fr; gap:32px; }
  }
  .hero-tagline{
    margin:0;
    font-weight:900;
    font-size:clamp(1.5rem,2.8vw,2.1rem);
    line-height:1.45;
    letter-spacing:-.005em;
    color:var(--ink);
    max-width:800px;
  }
  /* tagline resolves into focus character by character, like a plotter tracing each glyph */
  .cchar{
    display:inline-block;
    opacity:0;
    filter:blur(7px);
    transform:translateY(16px);
    animation:charIn .55s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.35s + var(--ci,0) * 28ms);
  }
  @keyframes charIn{
    from{ opacity:0; filter:blur(7px); transform:translateY(16px); }
    to{ opacity:1; filter:blur(0); transform:translateY(0); }
  }

  /* ---- reveal: elements "develop" into color as they scroll in, like a print exposing ---- */
  [data-reveal]{
    opacity:0;
    transform:translateY(38px) scale(.96);
    filter:grayscale(1) contrast(.85) brightness(1.35);
    transition:
      opacity .5s cubic-bezier(.16,1,.3,1),
      filter .8s cubic-bezier(.16,1,.3,1),
      transform .85s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--d,0s);
  }
  [data-reveal].in{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:grayscale(0) contrast(1) brightness(1);
  }

  .hero [data-reveal]{ transition-delay:var(--d,0s); }

  @keyframes riseIn{
    from{ opacity:0; transform:translateY(40px) scale(.96); filter:grayscale(1) contrast(.85) brightness(1.35); }
    to{ opacity:1; transform:translateY(0) scale(1); filter:grayscale(0) contrast(1) brightness(1); }
  }
  .hero-load{
    animation:riseIn .9s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--d,0s);
  }

  /* logo keeps a slow, quiet drift after it lands, so the fold is never fully still */
  @keyframes plateFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
  }
  .plate.hero-load{
    animation:
      riseIn .9s cubic-bezier(.16,1,.3,1) both,
      plateFloat 5.5s ease-in-out infinite;
    animation-delay:var(--d,0s), 1.1s;
  }

  /* ---- mission ---- */
  .mission-lead{
    font-weight:400;
    font-size:clamp(1rem,1.6vw,1.12rem);
    line-height:1.7;
    color:var(--ink-soft);
    max-width:800px;
    margin:0 0 1.2em;
  }
  .mission-body{
    font-weight:400;
    font-size:clamp(1rem,1.6vw,1.12rem);
    color:var(--ink-soft);
    max-width:800px;
  }

  /* ---- business ---- */
  .biz-list{
    display:flex;
    flex-direction:column;
  }
  .biz-item{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:20px clamp(20px,4vw,56px);
    padding:34px 0;
    border-top:1px solid var(--line);
    align-items:start;
  }
  .biz-item:first-child{ border-top:none; padding-top:8px; }
  .biz-num{
    font-family:"JetBrains Mono", monospace;
    font-weight:700;
    font-size:clamp(2.2rem,5vw,3.4rem);
    color:var(--line-strong);
    line-height:1;
    display:inline-block;
    transition:color .4s ease;
  }
  .biz-item:hover .biz-num{ color:var(--accent); }
  .biz-item.in .biz-num{
    animation:numFlash .7s cubic-bezier(.65,0,.35,1) both;
    animation-delay:calc(var(--d,0s) + .1s);
  }
  @keyframes numFlash{
    0%{ color:var(--line-strong); }
    22%{ color:var(--accent); }
    100%{ color:var(--line-strong); }
  }
  .biz-heads{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
  .biz-en{
    font-family:"JetBrains Mono", monospace;
    font-size:.72rem;
    letter-spacing:.18em;
    color:var(--ink-faint);
    text-transform:uppercase;
  }
  .biz-ja{
    font-weight:900;
    font-size:clamp(1.25rem,2.6vw,1.65rem);
  }
  .biz-desc{
    font-weight:400;
    color:var(--ink-soft);
    max-width:800px;
    font-size:1rem;
  }
  @media (max-width:560px){
    .biz-item{ grid-template-columns:1fr; gap:8px; }
    .biz-num{ font-size:1.6rem; }
  }

  /* ---- profile / titleblock ---- */
  .tblock{
    border:1px solid var(--line);
  }
  .trow{
    display:grid;
    grid-template-columns:minmax(120px,220px) 1fr;
  }
  .trow + .trow{ border-top:1px solid var(--line); }
  .trow > *{ padding:18px 22px; }
  .trow .tlabel{
    font-family:"JetBrains Mono", monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    color:var(--ink-faint);
    text-transform:uppercase;
    border-right:1px solid var(--line);
    display:flex;
    align-items:center;
  }
  .trow .tvalue{
    font-family:"JetBrains Mono", monospace;
    font-size:.95rem;
    color:var(--ink-faint);
    display:flex;
    align-items:center;
    word-break:break-word;
  }
  @media (max-width:560px){
    .trow{ grid-template-columns:1fr; }
    .trow .tlabel{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:6px; }
  }

  /* ---- contact form ---- */
  .cform{
    border:1px solid var(--line);
  }
  .frow{
    display:grid;
    grid-template-columns:minmax(120px,220px) 1fr;
    border-top:1px solid var(--line);
  }
  .cform .frow:first-of-type{ border-top:none; }
  .frow > *{ padding:18px 22px; }
  .flabel{
    font-family:"JetBrains Mono", monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    color:var(--ink-faint);
    text-transform:uppercase;
    border-right:1px solid var(--line);
    display:flex;
    align-items:center;
  }
  .freq{ color:var(--ink); margin-left:.3em; }
  .finput{
    font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
    font-size:1rem;
    font-weight:500;
    color:var(--ink);
    border:none;
    background:transparent;
    width:100%;
    outline:none;
  }
  .finput:focus{ background:var(--accent-soft); }
  textarea.finput{
    resize:vertical;
    min-height:120px;
    line-height:1.7;
    font-family:inherit;
  }
  .frow-message .flabel{
    align-items:flex-start;
    padding-top:22px;
  }

  /* honeypot field: hidden from sighted users, still reachable by simple bots */
  .hp-wrap{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }

  .cform-foot{
    scroll-margin-top:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:20px 22px;
    border-top:1px solid var(--line);
  }
  .cform-msg{
    margin:0;
    font-size:.85rem;
    color:var(--ink-faint);
  }
  .cform-msg[data-state="success"]{ color:var(--ink); font-weight:700; }
  .cform-msg[data-state="error"]{ color:#b00020; font-weight:700; }

  .cform-submit{
    appearance:none;
    border:1px solid var(--ink);
    background:var(--ink);
    color:#fff;
    font-size:.8rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:14px 32px;
    cursor:pointer;
    transition:background .3s ease, color .3s ease;
  }
  .cform-submit:hover{ background:#fff; color:var(--ink); }

  @media (max-width:560px){
    .frow{ grid-template-columns:1fr; }
    .flabel{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:8px; }
    .cform-foot{ flex-direction:column; align-items:stretch; }
    .cform-submit{ width:100%; }
  }

  /* ---- footer ---- */
  footer{
    border-top:1px solid var(--line);
    padding:32px 0 56px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  footer .mono{
    font-size:.72rem;
    letter-spacing:.08em;
    color:var(--ink-faint);
  }

  @media (prefers-reduced-motion: reduce){
    [data-reveal]{ opacity:1; transform:none; filter:none; transition:none; }
    .hero-load{ animation:none; opacity:1; filter:none; }
    .plate.hero-load{ animation:none; }
    .biz-item.in .biz-num{ animation:none; }
    .scale-fill{ transition:none; }
    .cchar{ animation:none !important; opacity:1 !important; filter:none !important; transform:none !important; }
  }