:root{
    --paper:#f4f0e8;        /* 生成り base */
    --paper-2:#ece6da;      /* deeper paper / alt blocks */
    --ink:#211e19;          /* warm near-black */
    --ink-2:#6f6a60;        /* muted text */
    --ink-3:#9b968b;        /* faint */
    --line:rgba(33,30,25,.16);
    --line-soft:rgba(33,30,25,.09);
    --accent:#ab4a34;       /* terracotta vermilion */
    --accent-soft:rgba(171,74,52,.10);
    --ph:transparent;           /* photo placeholder warm gray */
    --ph-2:#bbb3a4;
    --maxw:1240px;
    --pad:48px;
    --header-h:84px;
    --serif:'Noto Serif JP', serif;
    --latin:'Cormorant Garamond', 'Noto Serif JP', serif;
    --sans:'Helvetica Neue', Arial, 'Noto Serif JP', sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;background:var(--paper);}

  body{
    margin:0;
    background:transparent;
    color:var(--ink);
    font-family:var(--serif);
    font-weight:400;
    line-height:2;
    letter-spacing:.03em;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../img/noise.png") repeat;
  opacity: 0.02;
  pointer-events: none;
  z-index: 9999;
}
  ::selection{background:var(--accent-soft);}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

  /* ---------- small caps label utility ---------- */
  .eyebrow{
    font-family:var(--sans);
    font-size:11px;
    font-weight:500;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink-2);
    line-height:1;
  }
  .mono{
    font-family:var(--sans);
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  /* =========================================================
     OPENING / LOADER
  ========================================================= */
  html.opening-active,html.opening-active body{overflow:hidden;}
  #opening{
    position:fixed;inset:0;z-index:300;background:var(--paper);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
    transition:opacity .9s ease, visibility .9s;
  }
  #opening.done{opacity:0;visibility:hidden;}
  .opening-mark{
    width:104px;height:auto;display:block;
    clip-path:inset(100% 0 0 0);
  }
  .opening-mark .st0{fill:var(--accent);}
  #opening.play .opening-mark{
    animation:maskRise 1.7s cubic-bezier(.66,0,.2,1) .35s forwards;
  }
  @keyframes maskRise{
    from{clip-path:inset(100% 0 0 0);}
    to{clip-path:inset(0 0 0 0);}
  }
  .opening-typ{
    width:170px;height:auto;display:block;
    opacity:0;transform:translateY(6px);
  }
  .opening-typ .st0{fill:var(--ink);}
  #opening.play .opening-typ{
    animation:openWord 1.1s cubic-bezier(.2,.7,.2,1) 1.5s forwards;
  }
  @keyframes openWord{to{opacity:1;transform:none;}}

  /* ---- back to top button ---- */
  #toTop{
    position:fixed;right:var(--pad);bottom:36px;z-index:130;
    width:60px;height:60px;display:block;cursor:pointer;border:none;background:none;padding:0;
    opacity:0;visibility:hidden;transform:translateY(14px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), visibility .5s;
  }
  body.scrolled #toTop{opacity:1;visibility:visible;transform:none;}
  #toTop svg{width:100%;height:100%;display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1);}
  #toTop:hover svg{transform:translateY(-5px);}
  #toTop .st0{fill:var(--ink);transition:fill .4s;}
  #toTop .st1{fill:none;stroke:var(--paper);stroke-width:6;stroke-linecap:square;stroke-linejoin:miter;}
  #toTop:hover .st0{fill:var(--accent);}
  @media (max-width:900px){#toTop{width:50px;height:50px;bottom:24px;right:24px;}}
  @media (prefers-reduced-motion: reduce){
    .opening-mark{clip-path:none;}
    #opening.play .opening-mark,#opening.play .opening-typ{animation:none;}
    .opening-typ{opacity:1;transform:none;}
  }

  /* =========================================================
     HEADER / NAV
  ========================================================= */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
    border-bottom:1px solid transparent;
  }
  header.solid{
    background:rgba(244,240,232,.82);
    backdrop-filter:blur(14px) saturate(120%);
    border-bottom:1px solid var(--line-soft);
  }
  .nav{
    max-width:var(--maxw);margin:0 auto;
    padding:16px var(--pad);
    display:flex;align-items:center;justify-content:flex-end;gap:24px;
  }
  /* independent logo, aligned to the content container; offset below the header bar */
  .site-logo{
    position:fixed; top: calc(var(--header-h));left:0;right:0;margin:0 auto;
    max-width:var(--maxw);padding:0 var(--pad);
    z-index:120;pointer-events:none;
    transition:top 1s cubic-bezier(.2,.7,.2,1);
  }
  .site-logo .brand-logo{
    height: 65px;
    width: auto;
    display: block;
    pointer-events: auto;
    transition: height 1s cubic-bezier(.2,.7,.2,1);
}
  body.scrolled .site-logo{top:33px;}
  body.scrolled .site-logo .brand-logo{height:40px;}
  /* scrolled: grow the header band (symmetric padding keeps the menu vertically centered) */
  body.scrolled .nav{padding-top:24px;padding-bottom:24px;}s
  .brand{display:flex;align-items:center;line-height:1;}
  .brand-logo{height:72px;width:auto;display:block;}
  .brand-logo .st2{fill:var(--accent);}
  .brand-logo .st0{fill:var(--paper);}
  .brand-logo .st1{fill:var(--ink);}
  .brand .mark{
    font-family:var(--latin);
    font-size:25px;font-weight:600;letter-spacing:.06em;
    color:var(--ink);
  }
  .brand .mark b{font-weight:600;}
  .brand .sub{
    font-family:var(--sans);
    font-size:9px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-2);padding-bottom:3px;white-space:nowrap;
  }
  @media (max-width:1180px){.brand .sub{display:none;}}
  .navlinks{display:flex;align-items:center;gap:42px;}
  .navlinks a{
    font-family:var(--sans);
    font-size:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink);position:relative;padding:4px 0;
  }
  .navlinks a .jp{
    display:block;font-family:var(--serif);font-size:13px;letter-spacing:.12em;
    color:var(--ink-3);margin-top:4px;text-transform:none;text-align:center;
  }
  .navlinks a:not(.nav-logo-link)::after{
    content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
    background:var(--accent);transition:right .4s cubic-bezier(.2,.7,.2,1);
  }
  .navlinks a:not(.nav-logo-link):hover::after{right:0;}
  .nav-cta{
    display:flex;align-items:center;gap:14px;
  }
  .nav-cta .txt{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
  .nav-dot{
    width:52px;height:52px;border-radius:50%;
    background:var(--ink);color:var(--paper);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;line-height:1;
    transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s;
    flex-shrink:0;
  }
  .nav-cta:hover .nav-dot{transform:rotate(45deg);background:var(--accent);}
  .nav-logo-link{display:flex;align-items:center;flex-shrink:0;margin-left:6px;transition:opacity .4s ease;}
  .nav-logo-link:hover{opacity:.62;}
  .nav-logo-link .nav-logo{
    height: 45px;
    width: auto;
    display: block;
}

  .burger{display:none;width:34px;height:34px;position:relative;cursor:pointer;}
  .burger span{position:absolute;left:4px;right:4px;height:1.4px;background:var(--ink);transition:.35s;}
  .burger span:nth-child(1){top:12px;}
  .burger span:nth-child(2){top:21px;}
  body.menu-open .burger span:nth-child(1){top:16px;transform:rotate(45deg);}
  body.menu-open .burger span:nth-child(2){top:16px;transform:rotate(-45deg);}

  /* mobile fullscreen menu */
  .mobile-menu{
    position:fixed;inset:0;z-index:90;background:var(--paper);
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    padding:0 var(--pad);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .5s ease, transform .5s ease, visibility .5s;
  }
  body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;}
  .mobile-menu a{
    font-family:var(--serif);font-size:30px;font-weight:500;padding:14px 0;
    border-bottom:1px solid var(--line-soft);display:flex;align-items:baseline;gap:18px;
  }
  .mobile-menu a .n{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--accent);}
  .mobile-menu a .en{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-left:auto;}

  /* =========================================================
     HERO
  ========================================================= */
  .hero{
    position:relative;min-height:100svh;
    display:flex;align-items:flex-end;
    overflow:hidden;
  }
  .hero-media{
    position:fixed;inset:0;z-index:-1;
    background:var(--ph);
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
  }
  .hero-media video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  }
  .hero-media::after{
    content:"MAIN VISUAL";
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:var(--sans);font-size:11px;letter-spacing:.34em;color:rgba(33,30,25,.34);
    display:none;
  }
  /* paper fade so overlaid text stays legible */
  .hero-scrim{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(244,240,232,.30) 0%, rgba(244,240,232,0) 26%),
      linear-gradient(95deg, rgba(244,240,232,.55) 0%, rgba(244,240,232,.12) 46%, rgba(244,240,232,0) 70%);
  }
  .hero-inner{
    position:relative;z-index:3;width:100%;
    max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 13vh;
  }
  .hero h1{
    font-size:clamp(2.3rem, 4.6vw, 4.3rem);
    font-weight:600;line-height:1.62;letter-spacing:.04em;margin:0;
    color:var(--ink);
  }
  .hero h1 .em{color:var(--accent);}
  .hero-sub{
    margin-top:34px;display:flex;align-items:center;gap:18px;
  }
  .hero-sub .lbl{font-family:var(--latin);font-size:21px;letter-spacing:.08em;font-weight:500;}
  .hero-sub .lbl-logo{height:21px;width:auto;display:block;}
  .hero-sub .lbl-logo .st0{fill:var(--ink);}
  .hero-sub .x{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2);}

  .scroll-ind{
    position:absolute;right:var(--pad);bottom:36px;z-index:4;
    display:flex;flex-direction:column;align-items:center;gap:20px;
  }
  .scroll-ind .ln{width:1.5px;height:96px;background:var(--ink);position:relative;overflow:hidden;}
  .scroll-ind .ln::after{
    content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--accent);
    animation:scrolldrop 2.4s cubic-bezier(.6,0,.2,1) infinite;
  }
  @keyframes scrolldrop{0%{top:-40%}60%,100%{top:100%}}
  .scroll-ind .t{
    font-family:var(--sans);font-size:14px;letter-spacing:.3em;color:var(--ink-2);
    writing-mode:vertical-rl;
  }

  /* =========================================================
     SECTION SCAFFOLD
  ========================================================= */
  section.block{padding:clamp(96px,15vh,184px) 0;background:var(--paper);position:relative;}
  .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:54px;}
  .sec-head .no{
    font-family:var(--latin);font-size:34px;font-weight:500;line-height:1;color:var(--ink);
  }
  .sec-head .lbl{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);}
  .sec-head .rule{flex:1;height:1px;background:var(--line);margin-bottom:6px;}

  /* ---- 01 INTRODUCTION ---- */
  .intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;}
  .intro-grid h2{
    font-size:clamp(1.8rem,3.3vw,2.9rem);font-weight:600;line-height:1.66;letter-spacing:.03em;margin:0;
  }
  .intro-grid h2 .em{color:var(--accent);}
  .intro-body p{margin:0 0 1.5em;font-size:1rem;line-height:2.15;color:var(--ink-2);}
  .intro-body p:last-child{margin-bottom:0;}
  .intro-body .sig{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;}

  .wide-photo{
  margin-top:88px;
  height:clamp(280px,42vw,520px);
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.wide-photo img{width:100%;height:100%;object-fit:cover;display:block;}


  /* photo placeholder generic */
  .ph-box{
    position:relative;background:var(--ph);overflow:hidden;

  }
  .ph-box .ph-label{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:var(--sans);font-size:10px;letter-spacing:.3em;color:rgba(33,30,25,.34);white-space:nowrap;
  }

  /* ---- 02 PHILOSOPHY ---- */
  .phil-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
  .phil-grid h2{font-size:clamp(1.8rem,3.3vw,2.9rem);font-weight:600;line-height:1.6;letter-spacing:.03em;margin:0 0 36px;}
  .phil-text p{margin:0 0 1.4em;font-size:.98rem;line-height:2.15;color:var(--ink-2);}
  .phil-text p:last-child{margin-bottom:0;}

  /* circle diagram shell */
  .diagram-wrap{display:flex;flex-direction:column;align-items:center;gap:28px;}
  .diagram{position:relative;width:min(100%,440px);aspect-ratio:1;}
  .diagram .variant{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease;}
  .diagram .variant.on{opacity:1;visibility:visible;}
  .dg-center{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:54%;text-align:center;
  }
  .dg-center .c-jp{
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink);
    letter-spacing: .04em;
}
  .dg-center .c-en{margin-top:12px;font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);}
  .dg-node{position:absolute;text-align:center;transform:translate(-50%,-50%);}
  .dg-node .en{font-family:var(--latin);font-size:25px;font-weight:600;letter-spacing:.06em;color:var(--accent);line-height:1;}
  .dg-node .jp{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;letter-spacing:.1em;}
  .dg-node.n{top:2%;left:50%;}
  .dg-node.e{top:50%;left:98%;}
  .dg-node.s{top:98%;left:50%;}
  .dg-node.w{top:50%;left:2%;}

  .variant-switch{display:flex;align-items:center;gap:10px;}
  .variant-switch .vlabel{font-family:var(--sans);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-right:4px;}
  .variant-switch button{
    width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
    background:transparent;color:var(--ink-2);cursor:pointer;
    font-family:var(--sans);font-size:11px;letter-spacing:.04em;
    transition:.3s;
  }
  .variant-switch button:hover{border-color:var(--accent);color:var(--accent);}
  .variant-switch button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}

  .phil-photo{margin-top:64px;width:min(560px,80%);height:clamp(220px,30vw,360px);}

  /* full-bleed slow looping image band */
  .phil-marquee{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:72px;overflow:hidden;}
  .phil-marquee .marquee-track{display:flex;width:max-content;animation:marquee 60s linear infinite;will-change:transform;}
  .phil-marquee .marquee-item{flex:0 0 auto;height:clamp(220px,26vw,460px);}
.phil-marquee .marquee-item img{height:100%;width:auto;display:block;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){.phil-marquee .marquee-track{animation:none;}}

  /* ---- 03 PROJECTS ---- */
  .proj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:56px;}
  .proj-head .lead{display:flex;align-items:baseline;gap:18px;}
  .proj-head .no{font-family:var(--latin);font-size:34px;font-weight:500;line-height:1;}
  .proj-head .lbl{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);}
  .view-all{
    font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
    display:inline-flex;align-items:center;gap:12px;padding-bottom:3px;position:relative;
  }
  .view-all .arr{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
  .view-all:hover .arr{transform:translateX(8px);}
  .view-all::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--line);}

  .project{
    display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
    padding:56px 0;border-top:1px solid var(--line-soft);
  }
  .project:last-child{border-bottom:none;}
  .project.flip .p-media{order:2;}
.p-media{height:clamp(280px,32vw,420px);position:relative;overflow:hidden;}
.p-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

  .p-tag{font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
  .p-title{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;line-height:1.5;margin:0 0 8px;}
  .p-sub{font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:var(--ink-3);margin-bottom:26px;text-transform:uppercase;}
  .p-body{font-size:.96rem;line-height:2.1;color:var(--ink-2);margin:0 0 26px;}
  .p-more{font-family:var(--sans);font-size:12px; font-weight: bold; ;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--accent);}
  .p-more .arr{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
  .p-more:hover .arr{transform:translateX(10px);}

  /* magazine-ish mock inside first project photo */
  .mag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
  .mag .cover{
    width:46%;aspect-ratio:.72;background:var(--paper);box-shadow:0 24px 50px rgba(33,30,25,.22);
    transform:rotate(-4deg);position:relative;
    display:flex;flex-direction:column;justify-content:space-between;padding:14px;
  }
  .mag .cover .mt{font-size:11px;letter-spacing:.18em;color:var(--ink);}
  .mag .cover .mimg{flex:1;margin:10px 0;background:var(--ph-2);background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px);}
  .mag .cover .mf{font-family:var(--sans);font-size:8px;letter-spacing:.16em;color:var(--ink-3);}

  /* ---- alt background section ---- */
  section.block.alt{background:var(--paper-2);}

  /* ---- 04 SERVICE ---- */
  .service-top{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;margin-bottom:88px;}
  .loc-head{font-family:var(--latin);font-size:clamp(2rem,3.6vw,3.3rem);font-weight:600;line-height:1.28;letter-spacing:.02em;margin:0 0 28px;}
  .loc-head .nx{color:var(--accent);}
  .loc-head .jp{display:block;font-family:var(--serif);font-size:.32em;font-weight:400;letter-spacing:.12em;line-height:1.9;color:var(--ink-2);margin-top:18px;}
  .service-top p{font-size:.98rem;line-height:2.15;color:var(--ink-2);margin:0 0 32px;}
  .btn-ghost{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);border-radius:40px;padding:12px 30px;transition:.4s;}
  .btn-ghost:hover{background:var(--ink);color:var(--paper);}
  .btn-ghost .arr{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
  .btn-ghost:hover .arr{transform:translateX(6px);}
  .service-orbit{position:relative;aspect-ratio:1;width:min(100%,400px);justify-self:center;}
  .service-orbit .oc{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
  .service-orbit .oc .a{font-family:var(--latin);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.06em;}
  .service-orbit .oc .b{font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;}

  /* ---- Japan map (official SVG) ---- */
  .service-map{position:relative;width:min(100%,500px);justify-self:center;}
  .jp-map{width:100%;height:auto;display:block;overflow:visible;}
  .jp-map .jp-land{fill:var(--accent);opacity:.17;}
  .jp-map .mk-dot{fill:var(--accent);transform-box:fill-box;transform-origin:center;}
  .jp-map .mk-wave{fill:none;stroke:var(--accent);stroke-width:.55;transform-box:fill-box;transform-origin:center;opacity:0;}
  /* markers hidden until the map scrolls into view */
  html.anim .jp-map .mk-grp{opacity:0;}
  html.anim .reveal.in .jp-map .mk-grp{animation:mkAppear .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--mkd,0s);}
  html.anim .reveal.in .jp-map .mk-grp .mk-dot{animation:mkPop .55s cubic-bezier(.2,1.5,.4,1) forwards;animation-delay:var(--mkd,0s);}
  /* clear expanding wave, starts after the dot lands, loops */
  html.anim .reveal.in .jp-map .mk-wave{animation:mkWave 2.6s ease-out infinite;animation-delay:calc(var(--mkd,0s) + .45s);}
  html.anim .reveal.in .jp-map .mk-wave.w2{animation-delay:calc(var(--mkd,0s) + 1.75s);}
  @keyframes mkAppear{from{opacity:0;}to{opacity:1;}}
  @keyframes mkPop{0%{transform:scale(0);}60%{transform:scale(1.25);}100%{transform:scale(1);}}
  @keyframes mkWave{0%{transform:scale(.3);opacity:.85;}75%{opacity:0;}100%{transform:scale(4.4);opacity:0;}}
  .jp-map .mk-en{font-family:var(--sans);font-size:3.1px;font-weight:500;letter-spacing:.45px;fill:var(--ink);}
  .jp-map .mk-jp{font-family:var(--serif);font-size:3.5px;letter-spacing:.3px;fill:var(--ink-2);}
  .service-cap{margin-top:22px;text-align:center;font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);}
  @media (prefers-reduced-motion: reduce){
    html.anim .jp-map .mk-grp{opacity:1;}
    html.anim .reveal.in .jp-map .mk-grp,html.anim .reveal.in .jp-map .mk-grp .mk-dot,html.anim .reveal.in .jp-map .mk-wave{animation:none;}
  }

  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;border-top:1px solid var(--line);padding-top:48px;}
  .svc-col h4{font-size:1.15rem;font-weight:600;margin:0 0 6px;letter-spacing:.04em;}
  .svc-col .en{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;}
  .svc-col ul{list-style:none;margin:0;padding:0;}
  .svc-col li{font-size:.92rem;color:var(--ink-2);padding:13px 0;border-bottom:1px solid var(--line-soft);letter-spacing:.04em;}

  /* ---- 05 MESSAGE ---- */
  .msg-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:start;}
  .msg-grid h2{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:600;line-height:1.55;letter-spacing:.03em;margin:0;}
  .msg-grid h2 .em{color:var(--accent);}
  .msg-body p{font-size:1rem;line-height:2.2;color:var(--ink-2);margin:0 0 1.5em;}
  .msg-body p:last-of-type{margin-bottom:0;}
  .msg-sign{margin-top:38px;display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding-top:26px;}
  .msg-sign .role{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);}
  .msg-sign .name{font-size:1.25rem;font-weight:600;letter-spacing:.04em;}

  /* ---- 06 FOLLOW ---- */
  .sns-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
  .sns-card{display:flex;flex-direction:column;}
  .sns-h{display:flex;align-items:center;gap:11px;margin-bottom:5px;}
  .sns-mark{width:30px;height:30px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .sns-mark img{width:20px;height:20px;object-fit:contain;display:block;}
  .sns-name{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;}
  .handle{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin:0 0 18px;}
  .sns-thumb{aspect-ratio:1;background:var(--ink);position:relative;overflow:hidden;}
  .sns-thumb.light{background:var(--ph);background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px);}
  .sns-thumb .lab{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--sans);font-size:9px;letter-spacing:.22em;color:rgba(244,240,232,.45);white-space:nowrap;}
  .sns-thumb.light .lab{color:rgba(33,30,25,.4);}
  .sns-card p{font-size:.86rem;line-height:1.95;color:var(--ink-2);margin:18px 0 16px;}
  .sns-follow{margin-top:auto;font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;color:var(--ink);}
  .sns-follow .arr{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
  .sns-follow:hover .arr{transform:translateX(6px);}

  /* ---- 07 CONTACT ---- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
  .contact-grid h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:600;line-height:1.5;letter-spacing:.03em;margin:0;}
  .contact-grid h2 .em{color:var(--accent);}
  .contact-lead{font-size:.96rem;line-height:2.1;color:var(--ink-2);margin:32px 0 0;max-width:34ch;}
  .contact-side{display:flex;flex-direction:column;gap:16px;margin-top:42px;border-top:1px solid var(--line);padding-top:30px;}
  .contact-side .row{display:flex;gap:16px;font-size:.95rem;color:var(--ink);}
  .contact-side .row .k{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);min-width:74px;padding-top:4px;}

  .form .field{margin-bottom:26px;}
  .form label{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;}
  .form label .req{color:var(--accent);margin-left:4px;}
  .form input,.form textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);padding:11px 0;font-family:var(--serif);font-size:1rem;color:var(--ink);letter-spacing:.03em;transition:border-color .3s;}
  .form textarea{resize:vertical;min-height:120px;line-height:1.9;}
  .form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);}
  .form input::placeholder,.form textarea::placeholder{color:var(--ink-3);}
  .form .err{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--accent);margin-top:9px;opacity:0;height:0;overflow:hidden;transition:opacity .3s;}
  .form .field.invalid .err{opacity:1;height:auto;}
  .form .field.invalid input,.form .field.invalid textarea{border-color:var(--accent);}
  .submit-btn{margin-top:8px;display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:20px 42px;border-radius:40px;transition:.4s;}
  .submit-btn:hover{background:var(--accent);}
  .submit-btn .arr{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
  .submit-btn:hover .arr{transform:translateX(6px);}
  .submit-btn:disabled{opacity:.55;cursor:default;}
  .submit-btn:disabled:hover{background:var(--ink);}
  .hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}
  .form-error{margin:18px 0 0;font-family:var(--sans);font-size:11px;letter-spacing:.04em;line-height:1.8;color:var(--accent);display:none;}
  .form-error.show{display:block;}
  .form.hide{display:none;}
  .form-success{display:none;}
  .form-success.show{display:block;animation:fadeUp .7s cubic-bezier(.2,.7,.2,1);}
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  .form-success .ck{width:50px;height:50px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:24px;}
  .form-success h4{font-size:1.4rem;font-weight:600;margin:0 0 12px;letter-spacing:.04em;}
  .form-success p{color:var(--ink-2);font-size:.95rem;line-height:2;margin:0;}

  /* =========================================================
     FOOTER
  ========================================================= */
  footer{border-top:1px solid var(--line);padding:80px 0 40px;background:var(--paper);position:relative;}
  .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:56px;}
  .foot-logo{height:96px;width:auto;display:block;margin-bottom:18px;}
  .foot-logo .st2{fill:var(--accent);}
  .foot-logo .st0{fill:var(--paper);}
  .foot-logo .st1{fill:var(--ink);}
  .foot-brand .mark{font-family:var(--latin);font-size:30px;font-weight:600;letter-spacing:.06em;margin-bottom:16px;}
  .foot-brand .tag{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);line-height:2;}
  .foot-col h5{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px;}
  .foot-col a,.foot-col p{display:block;font-size:.92rem;color:var(--ink-2);margin:0 0 13px;}
  .foot-col a{transition:color .3s;width:fit-content;}
  .foot-col a:hover{color:var(--accent);}
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line-soft);padding-top:28px;flex-wrap:wrap;}
  .foot-bottom .cp{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
  .foot-bottom .links{display:flex;gap:26px;}
  .foot-bottom .links a{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:color .3s;}
  .foot-bottom .links a:hover{color:var(--accent);}

  /* =========================================================
     REVEAL
  ========================================================= */
  .reveal{opacity:1;transform:none;}
  html.anim .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
  html.anim .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    html.anim .reveal{opacity:1;transform:none;transition:none;}
    .scroll-ind .ln::after{animation:none;}
    html{scroll-behavior:auto;}
  }

  /* =========================================================
     RESPONSIVE
  ========================================================= */
  @media (max-width:900px){
    :root{--pad:24px;}
    .navlinks{display:none;}
    .nav-dot{display:none;}
    .burger{display:block;}
    .intro-grid,.phil-grid,.project,.project.flip{grid-template-columns:1fr;gap:38px;}
    .project.flip .p-media{order:0;}
    .phil-grid{gap:48px;}
    .proj-head{flex-direction:column;align-items:flex-start;gap:18px;}
    .phil-photo{width:100%;}
    .service-top,.msg-grid,.contact-grid{grid-template-columns:1fr;gap:44px;}
    .svc-grid{grid-template-columns:1fr;gap:36px;}
    .sns-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
    .foot-top{grid-template-columns:1fr 1fr;gap:36px;}
    .foot-brand{grid-column:1 / -1;}
    .service-orbit{width:min(78%,340px);}
    .service-map{width:min(86%,380px);}
    :root{--header-h:64px;}
    .site-logo .brand-logo{height:56px;}
    body.scrolled .site-logo .brand-logo{height:44px;}
  }