/* ============================================================
     TOKENS
  ============================================================ */
  :root{
    color-scheme: light only;
    --night:      #17110c;
    --espresso:   #2b1c12;
    --espresso-2: #241709;
    --ember:      #5c3a22;
    --brass:      #c69a52;
    --brass-dim:  #a67f3f;
    --dawn:       #e8c98f;
    --cream:      #f6f1e6;
    --paper:      #fbf8f2;
    --ink:        #241a12;
    --ink-soft:   #5a4c3d;
    --vermillion: #b23a2e;
    --line:       rgba(36,26,18,.12);
    --line-dark:  rgba(246,241,230,.14);

    --serif-jp: 'Shippori Mincho', serif;
    --serif-en: 'Cormorant', serif;
    --sans-jp:  'Noto Sans JP', sans-serif;
    --brush:    'Yuji Syuku', 'Shippori Mincho', serif;

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; background:var(--cream); }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    font-family:var(--sans-jp);
    background:var(--cream);
    color:var(--ink);
    line-height:1.9;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }
  section{ position:relative; }

  .eyebrow{
    font-family:var(--sans-jp);
    font-size:.72rem;
    letter-spacing:.28em;
    color:var(--brass-dim);
    font-weight:700;
    text-transform:uppercase;
    display:inline-block;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:'';
    display:inline-block;
    width:22px; height:1px;
    background:var(--brass-dim);
    margin-right:10px;
    vertical-align:middle;
  }
  section.dark .eyebrow{ color:var(--dawn); }
  section.dark .eyebrow::before{ background:var(--dawn); }

  h1,h2,h3{ font-family:var(--serif-jp); font-weight:600; line-height:1.4; }
  .h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom:20px; }

  .wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
  .pad{ padding:120px 0; }
  @media (max-width:760px){ .pad{ padding:80px 0; } .wrap{ padding:0 22px; } }

  section.dark{ background:var(--espresso); color:var(--cream); }
  section.dark h1, section.dark h2, section.dark h3{ color:var(--cream); }
  section.dark p{ color:rgba(246,241,230,.78); }

  /* buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    padding:17px 34px;
    font-family:var(--sans-jp);
    font-size:.92rem;
    letter-spacing:.04em;
    font-weight:500;
    border:1px solid transparent;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    transition:color .5s var(--ease), border-color .5s var(--ease);
  }
  .btn::before{
    content:'';
    position:absolute; inset:0;
    background:var(--brass);
    transform:translateX(-101%);
    transition:transform .55s var(--ease);
    z-index:-1;
  }
  .btn:hover::before{ transform:translateX(0); }
  .btn-gold{ background:var(--dawn); color:var(--night); border-color:var(--dawn); }
  .btn-gold::before{ background:var(--night); }
  .btn-gold:hover{ color:var(--dawn); }
  .btn-dark{ background:var(--night); color:var(--dawn); border-color:rgba(232,201,143,.35); }
  .btn-dark:hover{ color:var(--night); }
  .btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
  .btn-outline::before{ background:var(--ink); }
  .btn-outline:hover{ color:var(--cream); }

  /* ============================================================
     SCROLL PROGRESS — rising-sun arc
  ============================================================ */
  #sun-progress{
    position:fixed; top:0; left:0; right:0; height:3px;
    z-index:9000; background:rgba(23,17,12,.12);
  }
  #sun-progress-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--vermillion), var(--brass), var(--dawn));
    transition:width .08s linear;
  }

  /* ============================================================
     PRELOADER
  ============================================================ */
  #preloader{
    position:fixed; inset:0; z-index:10000;
    background:var(--night);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .8s var(--ease), visibility .8s var(--ease);
  }
  #preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .pre-scene{ position:relative; width:200px; height:200px; }
  .pre-scene svg{ width:100%; height:100%; overflow:visible; }
  #pre-badge{ fill:#e63f26; opacity:0; animation:fadeIn .5s var(--ease) forwards; }
  #pre-sun{
    fill:#ffffff;
    animation:sunrise 1.8s var(--ease) forwards;
    filter:drop-shadow(0 0 14px rgba(255,255,255,.55));
  }
  @keyframes sunrise{
    0%{ transform:translateY(60px); }
    100%{ transform:translateY(0); }
  }
  @keyframes fadeIn{ to{ opacity:1; } }
  .pre-lineart{ opacity:0; animation:fadeIn .5s var(--ease) forwards .35s; }
  #pre-kanji{
    position:absolute; left:0; right:0; bottom:-46px; text-align:center;
    font-family:var(--serif-jp); font-size:1.6rem; color:var(--cream);
    opacity:0; letter-spacing:.15em;
    animation:kanjiIn .9s var(--ease) forwards 1.1s;
  }
  @keyframes kanjiIn{ to{ opacity:1; } }
  .pre-label{
    position:absolute; left:0; right:0; bottom:-76px; text-align:center;
    font-family:var(--serif-en); font-size:.78rem; letter-spacing:.35em;
    color:var(--dawn); opacity:0; white-space:nowrap;
    animation:kanjiIn .8s var(--ease) forwards 1.4s;
  }
  @media (prefers-reduced-motion: reduce){
    #pre-sun, #pre-badge, #pre-kanji, .pre-label, .pre-lineart{ animation-duration:.01s !important; }
  }


  /* ============================================================
     HEADER / NAV
  ============================================================ */
  header.site-header{
    position:fixed; top:0; left:0; right:0; z-index:900;
    padding:22px 0; background:transparent;
    transition:padding .4s var(--ease), background .4s var(--ease);
    /* NOTE: do not add transform/filter/will-change here. Any of them makes
       this element the containing block for position:fixed descendants, which
       traps the mobile nav panel inside the header's ~70px box. */
  }
  header.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  header.site-header .brand-text, header.site-header nav.main-nav a{
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }
  header.site-header.scrolled{
    /* Was backdrop-filter:blur(8px) here unconditionally, with a
       <1024px override below turning it off. That override existed
       because a position:fixed element with backdrop-filter forces the
       browser to re-blur everything scrolling underneath it on every
       single frame — expensive anywhere, but assumed "desktop can
       afford it." It can't: same cost, and a wide monitor has MORE
       pixels behind the header to re-sample every frame, not fewer.
       Solid tint now applies at every width; the <1024px media query
       below is kept only as a comment marker, not because it still
       does anything a smaller screen needs and a bigger one doesn't. */
    background:rgba(23,17,12,.82);
    padding:14px 0;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-logo{ height:40px; width:auto; }
  .brand svg{ width:38px; height:38px; flex-shrink:0; }
  .brand-text{ font-family:var(--serif-jp); color:var(--cream); line-height:1.3; }
  .brand-text .b1{ font-size:.68rem; letter-spacing:.15em; opacity:.85; display:block; }
  .brand-text .b2{ font-size:1.15rem; font-weight:700; }

  nav.main-nav{ display:flex; align-items:center; }
  .nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
  nav.main-nav a{
    font-size:.85rem; color:var(--cream); letter-spacing:.05em;
    position:relative; padding-bottom:4px; display:inline-block;
  }
  nav.main-nav a::after{
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--dawn); transition:width .4s var(--ease);
  }
  nav.main-nav a:hover::after{ width:100%; }
  /* desktop shows the Japanese label only */
  .nav-links i, .nav-links em{ display:none; }
  .nav-links b{ font-weight:400; }
  .nav-foot{ display:none; }
  .nav-backdrop{ display:none; }

  .nav-toggle{ display:none; width:26px; height:20px; position:relative; z-index:950; }
  .nav-toggle span{
    position:absolute; left:0; right:0; height:2px; background:var(--cream);
    transition:transform .35s var(--ease), opacity .3s var(--ease);
  }
  .nav-toggle span:nth-child(1){ top:0; }
  .nav-toggle span:nth-child(2){ top:9px; }
  .nav-toggle span:nth-child(3){ top:18px; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  @media (max-width:1180.98px){
    .nav-toggle{ display:block; }

    .nav-backdrop{
      display:block; position:fixed; inset:0; z-index:890;
      background:rgba(10,7,4,.55);
      opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
    }
    .nav-backdrop.open{ opacity:1; pointer-events:auto; }

    nav.main-nav{
      position:fixed; top:0; right:0; bottom:0; left:auto;
      width:min(320px,82vw); z-index:940;
      background:linear-gradient(160deg,#1d1610 0%, var(--night) 55%);
      border-left:1px solid var(--line-dark);
      /* flex-start, NOT center. With justify-content:center an overflowing
         flex column spills past BOTH edges, and the top overflow can never
         be scrolled to — that's what made the first items vanish. */
      flex-direction:column; justify-content:flex-start; align-items:stretch;
      gap:0; padding:66px 22px 20px;
      transform:translateX(100%); transition:transform .5s var(--ease);
      overflow-y:auto; -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
    }
    /* short screens: trim the top clearance further */
    @media (max-height:680px){
      nav.main-nav{ padding-top:56px; padding-bottom:16px; }
      nav.main-nav a{ padding:8px 2px; }
      .nav-foot{ margin-top:14px; }
    }
    nav.main-nav.open{ transform:translateX(0); }

    .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
    .nav-links li{ border-bottom:1px solid var(--line-dark); }
    .nav-links li:first-child{ border-top:1px solid var(--line-dark); }
    /* Links are ALWAYS visible. They previously animated in from opacity:0
       with staggered delays, which meant any state desync (or reopening
       mid-fade) left the panel black and empty. The panel slide is the
       animation; navigation itself is never hidden behind a transition. */
    nav.main-nav a{
      display:grid; grid-template-columns:auto 1fr; align-items:baseline;
      column-gap:11px; padding:10px 2px; font-size:.94rem;
      transition:color .3s var(--ease);
    }
    nav.main-nav a::after{ content:none; }

    .nav-links i{
      display:block; grid-row:1 / span 2;
      font-family:var(--serif-en); font-style:normal;
      font-size:.66rem; letter-spacing:.1em; color:var(--brass-dim);
    }
    .nav-links b{ display:block; font-weight:400; font-family:var(--serif-jp); letter-spacing:.06em; }
    .nav-links em{
      display:block; grid-column:2; font-style:normal;
      font-family:var(--serif-en); font-size:.58rem; letter-spacing:.13em;
      color:rgba(246,241,230,.38); margin-top:0; line-height:1.4;
    }
    nav.main-nav a:active b{ color:var(--dawn); }

    .nav-foot{ display:block; margin-top:18px; }
    .nav-tel{
      display:block; font-family:var(--serif-en); font-size:1.12rem;
      color:var(--dawn); letter-spacing:.04em; line-height:1.2;
    }
    .nav-tel::after{ content:none; }
    .nav-hours{ display:block; font-size:.62rem; color:rgba(246,241,230,.42); margin:2px 0 11px; }
    /* quieter than the solid gold slab — an outlined link that fills on tap */
    .nav-cta{
      display:flex; width:100%; justify-content:center;
      padding:11px 14px; font-size:.78rem; letter-spacing:.06em;
      background:transparent; color:var(--dawn);
      border:1px solid var(--brass-dim); border-radius:2px;
      transition:background .3s var(--ease), color .3s var(--ease);
    }
    .nav-cta::after{ content:none; }
    .nav-cta:active{ background:var(--dawn); color:var(--night); }
  }

  /* ============================================================
     HERO
  ============================================================ */
  .hero{
    height:100vh;      /* fallback */
    height:100svh;     /* iOS: stable — plain vh changes as the URL bar hides */
    min-height:640px;
    display:flex; align-items:center;
    position:relative; color:var(--cream); overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(23,17,12,.55) 0%, rgba(23,17,12,.35) 45%, rgba(23,17,12,.88) 100%),
      url('../img/hero-bg.webp');
    background-size:cover; background-position:center;
    /* Static on mobile — animating this layer mid-scroll was the lag. */
  }
  @keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
  /* Desktop only: the original slow zoom-out on load. It's a one-shot
     animation that finishes before you've scrolled far, and desktop GPUs
     handle it fine. Phones/tablets keep the static background. */
  @media (min-width:1025px){
    .hero-bg{
      transform:scale(1.08);
      animation:heroZoom 12s var(--ease) forwards;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-bg{ animation:none; transform:none; }
  }
  .hero-content{ position:relative; z-index:2; padding-bottom:0; width:100%; text-align:center; }
  .hero-eyebrow{
    font-family:var(--serif-en); font-size:.95rem; letter-spacing:.3em;
    color:var(--dawn); margin-bottom:18px; opacity:0;
    animation:riseIn .9s var(--ease) forwards .6s;
  }
  .hero-title{
    font-family:var(--serif-en); font-weight:500;
    font-size:clamp(3.2rem, 9vw, 7rem);
    letter-spacing:.06em; line-height:1;
    display:flex; justify-content:center; gap:.02em; overflow:hidden;
  }
  .hero-title span{
    display:inline-block; opacity:0; transform:translateY(100%);
    animation:riseIn .9s var(--ease) forwards;
  }
  .hero-tagline{
    font-family:var(--brush); font-size:clamp(1.05rem,2.1vw,1.35rem);
    margin:26px auto 40px; color:rgba(246,241,230,.92); letter-spacing:.06em;
    line-height:1.95;
    opacity:0; animation:riseIn .9s var(--ease) forwards 1.5s;
  }
  /* each phrase is an inline-block, so a wrap can only happen between them —
     never mid-phrase, which was splitting 安心・安全・幸福 */
  .hero-tagline span{ display:inline-block; }
  .hero-tagline span + span{ margin-left:.35em; }
  @media (max-width:600px){
    .hero-tagline{ letter-spacing:.04em; }
    .hero-tagline span + span{ margin-left:0; }
  }
  .hero-ctas{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; opacity:0; animation:riseIn .9s var(--ease) forwards 1.7s; }
  @keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }

  .scroll-cue{
    position:absolute; right:32px; bottom:36px; z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-size:.72rem; letter-spacing:.2em; color:rgba(246,241,230,.7);
    opacity:0; animation:riseIn .9s var(--ease) forwards 2s;
  }
  .scroll-cue .line{ width:1px; height:46px; background:rgba(246,241,230,.4); position:relative; overflow:hidden; }
  .scroll-cue .line::after{
    /* animates transform, not `top` — animating top triggers layout+paint
       every frame, permanently, right in the hero */
    content:''; position:absolute; top:0; left:0; right:0; height:100%;
    background:var(--dawn); transform:translateY(-100%);
    animation:scrollLine 1.8s ease-in-out infinite;
    will-change:transform;
  }
  @keyframes scrollLine{ 50%{ transform:translateY(100%); } 100%{ transform:translateY(100%); } }

  @media (max-width:760px){
    /* centred via full-width flex, NOT translateX — the riseIn animation
       ends on transform:translateY(0) and would wipe out any transform here */
    .scroll-cue{
      left:0; right:0; bottom:24px;
      font-size:.62rem; letter-spacing:.16em; gap:8px;
    }
    .scroll-cue .line{ height:34px; }
    /* the travelling highlight is an INFINITE animation — it never stops,
       so it keeps the compositor busy the whole time the hero is on screen.
       Static gradient line on phones instead. */
    .scroll-cue .line::after{
      animation:none; top:0;
      background:linear-gradient(180deg, var(--dawn), transparent);
      opacity:.75;
    }
  }

  /* ============================================================
     REVEAL utility
  ============================================================ */
  .reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-stagger.in > *{ transition-delay:calc(var(--i,0) * 90ms); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* ============================================================
     ABOUT
  ============================================================ */
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
  .about-body p{ color:var(--ink-soft); max-width:46ch; margin-bottom:34px; }
  .feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 34px; margin-bottom:40px; }
  .feature-grid h3{ font-size:1.02rem; margin-bottom:8px; display:flex; align-items:center; gap:10px; }
  .feature-grid h3::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--brass); flex-shrink:0; }
  .feature-grid p{ font-size:.88rem; color:var(--ink-soft); }

  .about-media{ position:relative; height:520px; }
  .ph{
    position:relative; overflow:hidden;
    background:linear-gradient(145deg,#e4d5b8,#c9a876 55%,#a9814f);
  }
  .ph::after{
    content:attr(data-caption);
    position:absolute; left:14px; bottom:12px;
    font-size:.62rem; letter-spacing:.05em; color:rgba(255,255,255,.75);
    font-family:var(--sans-jp);
  }
  .ph::before{
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
  }
  .ph.photo-filled{ background-size:cover; background-position:center; background-repeat:no-repeat; }
  .ph.photo-filled::before, .ph.photo-filled::after{ content:none; display:none; }
  .about-media .ph:nth-child(1){ position:absolute; top:0; left:0; width:62%; height:70%; }
  .about-media .ph:nth-child(2){ position:absolute; bottom:0; right:0; width:56%; height:62%; box-shadow:-24px 24px 60px rgba(23,17,12,.25); }

  @media (max-width:900px){
    .about-grid{ grid-template-columns:1fr; gap:50px; }
    .about-media{ height:400px; }
  }
  @media (max-width:560px){
    .feature-grid{ grid-template-columns:1fr; }
  }

  /* ============================================================
     SERVICES (dark)
  ============================================================ */
  .services-outer{ padding:0 32px; }
  .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-dark); margin-top:60px; }
  .svc-card{
    background:var(--espresso); padding:38px 34px 42px;
    transition:background .4s var(--ease);
  }
  .svc-card:hover{ background:var(--espresso-2); }
  .svc-num{ font-family:var(--serif-en); font-size:2.4rem; color:var(--brass-dim); margin-bottom:22px; display:block; }
  .svc-thumb{
    height:260px; margin-bottom:22px; position:relative; overflow:hidden;
    background:linear-gradient(150deg,#3a2a1c,#20140c);
  }
  .svc-thumb::after{
    content:attr(data-caption); position:absolute; left:10px; bottom:8px;
    font-size:.65rem; color:rgba(246,241,230,.35);
  }
  .svc-thumb.photo-filled{ background-size:cover; background-position:center; }
  .svc-thumb.photo-filled::after{ content:none; display:none; }
  .svc-card h3{ font-size:1.25rem; margin-bottom:12px; }
  .svc-card p{ font-size:.95rem; }

  @media (max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){
    .services-grid{ grid-template-columns:1fr; margin-top:40px; }
    .services-outer{ padding:0 14px; }
    .svc-card{ padding:30px 18px 34px; }
    .svc-num{ font-size:2rem; margin-bottom:16px; }
    .svc-thumb{ height:190px; margin-bottom:18px; }
    /* lighter reveal — transform on large photos janks badly on mobile */
    .svc-card.reveal{ transform:none; transition:opacity .5s var(--ease); }
    .svc-card.reveal.in{ transform:none; }
  }

  /* ============================================================
     PREVIOUS WORK — carousel
  ============================================================ */
  .works-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:20px; }
  .works-arrows{ display:flex; gap:12px; }
  .works-arrows button{
    width:52px; height:52px; border-radius:50%;
    border:1px solid var(--brass-dim); background:transparent; color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    position:relative; isolation:isolate; overflow:hidden;
    -webkit-tap-highlight-color:transparent;
    transition:color .4s var(--ease), border-color .4s var(--ease), transform .2s var(--ease);
  }
  .works-arrows button::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    background:var(--ink); transform:scale(0); z-index:-1;
    transition:transform .45s var(--ease);
  }
  .works-arrows button svg{
    width:20px; height:20px; fill:none;
    stroke:currentColor; stroke-width:1.4;
    stroke-linecap:round; stroke-linejoin:round;
    transition:transform .4s var(--ease);
  }
  .works-arrows button:hover{ color:var(--cream); border-color:var(--ink); }
  .works-arrows button:hover::before{ transform:scale(1); }
  .works-arrows button:active{ transform:scale(.93); }
  .works-arrows button.prev:hover svg{ transform:translateX(-3px); }
  .works-arrows button.next:hover svg{ transform:translateX(3px); }

  .works-track{
    display:block; overflow:hidden; padding:50px 0 20px;
    cursor:grab; touch-action:pan-y;
  }
  .works-track.dragging{ cursor:grabbing; }
  .works-marquee{
    display:flex; gap:24px; align-items:flex-start;
    width:max-content;              /* size to content, not to the track */
    will-change:transform; transform:translate3d(0,0,0);
  }
  .work-card{
    flex:0 0 clamp(240px, 26vw, 320px);
  }
  .work-photo{
    height:460px; position:relative; overflow:hidden; margin-bottom:20px;
    background:linear-gradient(150deg,#d9c39a,#b3906020);
    background:linear-gradient(150deg,#dcc79f,#a9814f);
  }
  .work-photo::after{
    content:attr(data-caption); position:absolute; right:12px; bottom:14px;
    font-size:.6rem; color:rgba(36,26,18,.5); background:rgba(255,255,255,.5); padding:2px 6px;
  }
  .work-photo.photo-filled{ background-size:cover; background-position:center; }
  .work-photo.photo-filled::after{ content:none; display:none; }
  .work-tag{
    position:absolute; top:14px; left:14px; background:var(--paper);
    padding:6px 14px; font-size:.72rem; letter-spacing:.04em; color:var(--ink);
  }
  .work-date{
    position:absolute; top:14px; right:14px; background:rgba(23,17,12,.7); color:var(--cream);
    padding:6px 12px; font-size:.68rem;
  }
  .work-more{
    position:absolute; left:14px; bottom:14px; background:var(--paper); color:var(--ink);
    padding:8px 18px; font-size:.72rem; letter-spacing:.03em; border-radius:999px;
    transition:background .3s var(--ease), color .3s var(--ease);
  }
  .work-more:hover{ background:var(--ink); color:var(--cream); }
  .work-card h3{ font-size:1.05rem; margin-bottom:6px; }
  .work-card p{ font-size:.85rem; color:var(--ink-soft); }

  @media (max-width:640px){
    .work-card{ flex:0 0 74vw; }
    .works-track{ padding:34px 0 16px; }
    .works-marquee{ gap:16px; }
    .works-arrows button{ width:46px; height:46px; }
    .works-arrows button svg{ width:18px; height:18px; }
  }


  /* ============================================================
     BANNER CTA
  ============================================================ */
  .banner{
    min-height:60vh; min-height:60svh; display:flex; align-items:center; justify-content:center;
    text-align:center; position:relative; color:var(--cream); overflow:hidden;
  }
  .banner-bg{
    position:absolute; inset:0;
    background:
      linear-gradient(160deg, rgba(23,17,12,.72), rgba(23,17,12,.55)),
      url('../img/banner.webp') center/cover no-repeat,
      linear-gradient(140deg,#3a2a1c,#1c130b);
  }
  .banner-inner{ position:relative; z-index:2; padding:0 24px; }
  .banner-inner .hero-eyebrow{ justify-content:center; display:flex; }
  .banner-title{ font-family:var(--serif-en); font-size:clamp(2.4rem,6vw,4.4rem); margin-bottom:18px; }
  .banner-sub{ font-family:var(--brush); font-size:1.08rem; letter-spacing:.06em; line-height:1.95; color:rgba(246,241,230,.88); margin-bottom:36px; max-width:34em; margin-left:auto; margin-right:auto; }
  .banner-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

  /* phones: two equal stacked buttons, sized so they don't dominate */
  @media (max-width:600px){
    .hero-ctas, .banner-ctas{
      flex-direction:column; align-items:center; gap:10px;
    }
    .hero-ctas .btn, .banner-ctas .btn{
      width:100%; max-width:230px;
      padding:13px 16px; font-size:.82rem; letter-spacing:.02em;
    }
  }

  /* ============================================================
     WHY AKATSUKI
  ============================================================ */
  .why-row{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:90px; }
  .why-row:last-child{ margin-bottom:0; }
  .why-row.rev .why-media{ order:2; }
  .why-row.rev .why-text{ order:1; }
  .why-media{ height:340px; }
  .why-text h3{ font-family:var(--brush); font-size:1.5rem; margin-bottom:16px; letter-spacing:.05em; }
  .why-text p{ color:var(--ink-soft); max-width:48ch; }
  @media (max-width:900px){
    .why-row, .why-row.rev{ grid-template-columns:1fr; }
    .why-row.rev .why-media, .why-row.rev .why-text{ order:0; }
  }

  /* ============================================================
     PROCESS
  ============================================================ */
  .process{ position:relative; }
  .process-list{ margin-top:60px; position:relative; }
  .process-list::before{
    content:''; position:absolute; left:64px; top:10px; bottom:10px; width:1px;
    background:var(--line);
  }
  .process-line-fill{
    position:absolute; left:64px; top:10px; width:1px; height:0%;
    background:var(--brass); transition:height .1s linear;
  }
  .p-step{ display:grid; grid-template-columns:130px 1fr; gap:0; padding:38px 0; position:relative; }
  .p-step:not(:last-child){ border-bottom:1px solid var(--line); }
  .p-num{
    font-family:var(--serif-en); font-size:2rem; color:var(--brass-dim);
    position:relative; z-index:2;
  }
  .p-num::before{
    content:''; position:absolute; left:57.5px; top:6px; width:9px; height:9px; border-radius:50%;
    background:var(--paper); border:2px solid var(--brass-dim);
  }
  .p-body h3{ font-size:1.12rem; margin-bottom:10px; }
  .p-body p{ font-size:.9rem; color:var(--ink-soft); max-width:62ch; }
  .process-note{
    margin-top:50px; padding-top:40px; border-top:1px solid var(--line);
    font-size:.78rem; color:var(--ink-soft); line-height:2;
  }
  @media (max-width:640px){
    .process-list::before, .process-line-fill{ left:10px; }
    .p-step{ grid-template-columns:54px 1fr; padding:30px 0; }
    .p-num{ font-size:1.3rem; padding-left:26px; }
    .p-num::before{ left:3.5px; top:4px; }
  }


  /* ============================================================
     COMPANY OVERVIEW (会社概要)
  ============================================================ */
  .company-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
    margin-top:56px;
  }
  .company-table{ width:100%; border-collapse:collapse; }
  .company-table th, .company-table td{
    text-align:left; vertical-align:top; padding:16px 0;
    border-bottom:1px solid var(--line); font-weight:400;
  }
  .company-table tr:first-child th, .company-table tr:first-child td{ border-top:1px solid var(--line); }
  .company-table th{
    width:34%; font-family:var(--sans-jp); font-size:.78rem; letter-spacing:.08em;
    color:var(--brass-dim); white-space:nowrap; padding-right:16px;
  }
  .company-table td{ font-size:.92rem; color:var(--ink); line-height:1.9; }
  .company-table td a{ color:inherit; border-bottom:1px solid var(--line); }
  .company-table td a:hover{ color:var(--dawn); border-bottom-color:var(--dawn); }
  .company-note{ font-size:.78rem; color:var(--ink-soft); margin-top:18px; line-height:1.9; }
  .company-photo{
    min-height:100%; background-size:cover; background-position:center;
    border:1px solid var(--line);
  }
  @media (max-width:860px){
    .company-grid{ grid-template-columns:1fr; gap:34px; margin-top:40px; }
    .company-photo{ min-height:240px; order:-1; }
    .company-table th{ font-size:.72rem; width:32%; }
    .company-table td{ font-size:.86rem; }
    .company-table th, .company-table td{ padding:13px 0; }
  }
  /* ============================================================
     CONTACT / MAP
  ============================================================ */
  .contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; }
  .contact-map{ min-height:520px; background:#3a2a1c; position:relative; }
  .contact-map iframe{ width:100%; height:100%; min-height:520px; border:0; filter:grayscale(.3) contrast(1.05); }
  .contact-form-wrap{ padding:80px 60px; }
  .contact-form-wrap p.lead{ margin-bottom:36px; color:rgba(246,241,230,.75); font-size:.92rem; }
  .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .f-group{ margin-bottom:22px; }
  .f-group label{ display:block; font-size:.78rem; letter-spacing:.05em; margin-bottom:8px; color:var(--dawn); }
  .f-group input, .f-group select, .f-group textarea{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-dark);
    color:var(--cream); font-family:var(--sans-jp); font-size:.95rem; padding:10px 2px;
    transition:border-color .3s var(--ease);
  }
  .f-group select option{ color:var(--ink); }
  .f-group input:focus, .f-group select:focus, .f-group textarea:focus{
    outline:none; border-color:var(--dawn);
  }
  .f-group textarea{ resize:vertical; min-height:100px; }
  .f-group.invalid input, .f-group.invalid select, .f-group.invalid textarea{ border-color:#d0553f; }
  .f-radio-row{ display:flex; gap:22px; padding-top:6px; }
  .f-radio-row label{
    display:flex; align-items:center; gap:8px; margin:0; cursor:pointer;
    font-size:.88rem; letter-spacing:0; color:var(--cream);
  }
  .f-radio-row input[type="radio"]{ width:auto; accent-color:var(--dawn); }
  .f-consent{ display:flex; align-items:flex-start; gap:10px; margin-bottom:24px; }
  .f-consent input[type="checkbox"]{ width:auto; margin-top:3px; accent-color:var(--dawn); flex:0 0 auto; }
  .f-consent label{ font-size:.82rem; color:rgba(246,241,230,.75); letter-spacing:0; margin:0; cursor:pointer; }
  .f-consent.invalid label{ color:#d0553f; }
  .f-consent a{ color:var(--dawn); text-decoration:underline; }
  .form-error{
    display:none; font-size:.8rem; color:#d0553f; margin-top:14px;
  }
  .form-error.show{ display:block; }
  .form-note{ font-size:.72rem; color:rgba(246,241,230,.5); margin-top:18px; }

  /* privacy policy modal */
  .policy-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.62);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:12000;
  }
  .policy-overlay.show{ opacity:1; pointer-events:auto; }
  .policy-box{
    background:var(--espresso); border:1px solid var(--brass-dim); border-radius:3px;
    max-width:520px; width:100%; max-height:78vh; overflow-y:auto;
    padding:30px 26px 26px; position:relative;
    transform:scale(.95); transition:transform .25s var(--ease);
  }
  .policy-overlay.show .policy-box{ transform:scale(1); }
  .policy-box h3{
    font-family:var(--serif-jp); color:var(--dawn);
    margin:0 0 18px; font-size:1.1rem; letter-spacing:.04em;
  }
  .policy-body{ font-size:.84rem; line-height:2; color:rgba(246,241,230,.72); }
  .policy-body p{ margin:0 0 15px; }
  .policy-close{
    position:absolute; top:12px; right:14px; background:none; border:none;
    color:rgba(246,241,230,.6); font-size:1.5rem; line-height:1; cursor:pointer;
    padding:4px 8px; transition:color .3s var(--ease);
  }
  .policy-close:hover{ color:var(--dawn); }
  .form-success{
    display:none; margin-top:18px; padding:14px 18px; border:1px solid rgba(232,201,143,.4);
    color:var(--dawn); font-size:.85rem;
  }
  .form-success.show{ display:block; }
  @media (max-width:900px){
    .contact-grid{ grid-template-columns:1fr; }
    .contact-form-wrap{ padding:70px 26px; }
    .f-row{ grid-template-columns:1fr; }
  }

  /* ============================================================
     FOOTER
  ============================================================ */
  footer{ background:var(--night); color:rgba(246,241,230,.7); padding:70px 0 30px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; margin-bottom:60px; }
  .foot-brand .brand-text .b2{ font-size:1.3rem; }
  .foot-brand p{ margin-top:18px; font-size:.85rem; max-width:34ch; color:rgba(246,241,230,.55); }
  .foot-col h4{ font-size:.8rem; letter-spacing:.1em; color:var(--dawn); margin-bottom:18px; }
  .foot-col a, .foot-col p{ display:block; font-size:.86rem; margin-bottom:12px; color:rgba(246,241,230,.65); }
  .foot-col a:hover{ color:var(--dawn); }
  .foot-bottom{
    border-top:1px solid var(--line-dark); padding-top:26px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:.75rem; color:rgba(246,241,230,.4);
  }
  @media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:36px; } }
  .foot-contact a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(246,241,230,.25); }
  .foot-contact a:hover{ color:var(--dawn); border-bottom-color:var(--dawn); }
  /* ============================================================
     WORK MODAL (see more)
  ============================================================ */
  #workModal{ position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; padding:24px; }
  #workModal.open{ display:flex; }
  .wm-backdrop{ position:absolute; inset:0; background:rgba(23,17,12,.86); backdrop-filter:blur(6px); }
  .wm-box{
    position:relative; z-index:1; max-width:880px; width:100%; max-height:88vh; overflow-y:auto;
    background:var(--cream); color:var(--ink);
    opacity:0; transform:translateY(16px) scale(.98);
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  #workModal.open .wm-box{ opacity:1; transform:translateY(0) scale(1); }
  .wm-photo{ position:relative; width:100%; height:min(48vh,420px); background:#dcc79f; overflow:hidden; }
  .wm-slide{
    position:absolute; inset:0; background-size:cover; background-position:center;
    opacity:0; transition:opacity .4s var(--ease);
  }
  .wm-slide.active{ opacity:1; }
  .wm-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    width:38px; height:38px; border-radius:50%; background:rgba(23,17,12,.55); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem; line-height:1;
    transition:background .3s var(--ease);
  }
  .wm-arrow:hover{ background:var(--vermillion); }
  .wm-arrow.prev{ left:14px; }
  .wm-arrow.next{ right:14px; }
  .wm-dots{ position:absolute; bottom:12px; left:0; right:0; z-index:2; display:flex; justify-content:center; gap:7px; }
  .wm-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); transition:background .3s var(--ease); cursor:pointer; }
  .wm-dot.active{ background:#fff; }
  .wm-photo.single .wm-arrow, .wm-photo.single .wm-dots{ display:none; }
  .wm-body{ padding:32px 36px 44px; }
  .wm-tags{ display:flex; gap:10px; align-items:center; margin-bottom:14px; }
  .wm-tag{
    font-size:.72rem; letter-spacing:.04em; padding:5px 12px;
    background:var(--espresso); color:var(--cream);
  }
  .wm-date{ font-family:var(--serif-en); font-size:.78rem; letter-spacing:.05em; color:var(--ink-soft); }
  .wm-box h3{ font-family:var(--serif-jp); font-size:1.55rem; margin-bottom:16px; line-height:1.5; }
  .wm-box p{ font-size:.95rem; line-height:2; color:var(--ink-soft); }
  .wm-close{
    position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%;
    background:rgba(23,17,12,.55); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; line-height:1; transition:background .3s var(--ease);
  }
  .wm-close:hover{ background:var(--vermillion); }
  @media (max-width:640px){
    .wm-body{ padding:26px 22px 34px; }
    .wm-box h3{ font-size:1.3rem; }
  }

/* ============================================================
   WORDPRESS OVERRIDE ARMOUR
   This design was written as a standalone document. Inside WordPress,
   the theme, Gutenberg and the Xserver/TypeSquare webfont service all
   inject global rules. Critically, a direct rule (h1{color:#000})
   always beats an inherited colour — which is why headings went black
   on the dark sections. Everything below re-asserts what the design
   assumes. Keep this block LAST in the file.
============================================================ */

/* some themes set html{font-size:62.5%}, which shrinks every rem value */
html{ font-size:100%; }

/* headings take their colour from the section they sit in */
h1, h2, h3, h4, h5, h6,
.h2, .hero-title, .work-card h3, .why-text h3, .svc-card h3{
  color:inherit !important;
}

/* font stack — TypeSquare replaces fonts site-wide */
.hero-title, .svc-num, .p-num, .work-date, .nav-tel,
.nav-links i, .nav-links em, .eyebrow, .hero-eyebrow, .banner-title{
  font-family:var(--serif-en) !important;
}
.h2, .why-text h3, .work-card h3, .svc-card h3, .policy-box h3,
.nav-links b, .company-table td{
  font-family:var(--serif-jp) !important;
}
.hero-tagline, .banner-sub{ font-family:var(--brush) !important; }
body, p, .lead, label, input, select, textarea,
button, .company-table th, .form-note, .foot-contact{
  font-family:var(--sans-jp) !important;
}

/* readable sizes — the theme's base was shrinking body copy */
.lead{ font-size:1.02rem; line-height:2; }
.company-table td{ font-size:1rem; }
.company-table th{ font-size:.84rem; }
.f-group label{ font-size:.86rem; }
.f-group input, .f-group select, .f-group textarea{ font-size:1rem; }
.f-consent label{ font-size:.88rem; }
.work-card h3{ font-size:1.12rem; }
.work-card p{ font-size:.92rem; }
.svc-card p{ font-size:.95rem; }
.p-body{ font-size:.95rem; }
.foot-contact{ font-size:.9rem; }

/* the select was clipping its text */
.f-group select{ line-height:1.6; height:auto; padding:12px 2px; }

/* Gutenberg/theme layout constraints */
.wrap{ max-width:1200px; }
img{ max-width:100%; height:auto; }
figure{ margin:0; }

/* ---- desktop header: give the nav some presence ---- */
@media (min-width:1181px){
  .nav-links{ gap:26px; align-items:flex-start; }
  nav.main-nav a{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding-bottom:7px;
  }
  .nav-links i{ display:none; }
  .nav-links b{
    display:block; font-weight:400;
    font-size:.92rem; letter-spacing:.1em; line-height:1.3;
  }
  .nav-links em{
    display:block; font-style:normal;
    font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
    color:rgba(246,241,230,.5); line-height:1;
  }
  nav.main-nav a:hover em{ color:var(--dawn); }
}

/* ============================================================
   LARGE-SCREEN SCALING
   The design was built against a 1200px canvas. On a big monitor that
   leaves everything looking small and marooned in the middle. Scaling
   the ROOT font size lifts every rem-based value at once — text, spacing
   and component sizes stay in proportion instead of drifting apart.
============================================================ */
@media (min-width:1500px){
  html{ font-size:106.25%; }          /* 17px base */
  .wrap{ max-width:1340px; }
  .work-card{ flex:0 0 350px; }
  .svc-thumb{ height:290px; }
  .why-media{ height:380px; }
}
@media (min-width:1800px){
  html{ font-size:112.5%; }           /* 18px */
  .wrap{ max-width:1480px; }
  .work-card{ flex:0 0 380px; }
  .svc-thumb{ height:320px; }
  .why-media{ height:420px; }
  .pad{ padding:150px 0; }
}
@media (min-width:2300px){
  html{ font-size:125%; }             /* 20px */
  .wrap{ max-width:1700px; }
  .work-card{ flex:0 0 430px; }
}

/* body copy generally — was reading small at every width */
body{ font-size:1rem; line-height:1.95; }
.lead{ font-size:1.08rem; }
.svc-card p{ font-size:1rem; }
.p-body{ font-size:1rem; }
.why-text p{ font-size:1rem; }
.about-body p{ font-size:1.02rem; }
.company-table td{ font-size:1.02rem; }
.company-table th{ font-size:.9rem; }
.work-card h3{ font-size:1.18rem; }
.work-card p{ font-size:.96rem; }
.f-group label{ font-size:.9rem; }
.f-group input, .f-group select, .f-group textarea{ font-size:1.02rem; }
.foot-contact{ font-size:.95rem; }
.eyebrow{ font-size:.76rem; letter-spacing:.22em; }

/* ---- desktop header: larger, more presence ---- */
@media (min-width:1181px){
  .nav-links{ gap:30px; }
  .nav-links b{ font-size:1.02rem; letter-spacing:.12em; }
  .nav-links em{ font-size:.62rem; letter-spacing:.22em; }
  .brand-logo{ height:60px; }
}
@media (min-width:1500px){
  .nav-links{ gap:36px; }
  .nav-links b{ font-size:1.08rem; }
  .nav-links em{ font-size:.66rem; }
  .brand-logo{ height:66px; }
}

/* ============================================================
   PHONE SCROLL PERFORMANCE + NAV TEL
============================================================ */
@media (max-width:1180.98px){
  /* Each work card carries a full-size photo. Telling the browser these
     boxes are self-contained lets it skip re-painting off-screen ones
     while the page scrolls, which is most of the stutter. */
  .work-card, .svc-card, .why-row, .company-photo{
    contain:paint;
  }
  /* don't hold a promoted layer for the whole strip when it isn't moving */
  .works-marquee{ will-change:auto; }

  /* swipe feel: let the finger move the strip without the browser
     also trying to interpret a horizontal page gesture */
  .works-track{ touch-action:pan-y; }

  /* the phone number was set in Cormorant, a light display serif —
     thin and hard to read at a glance, and it's the one thing on the
     menu a customer actually needs to act on */
  .nav-tel{
    font-family:var(--sans-jp) !important;
    font-size:1.32rem !important;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--dawn);
  }
  .nav-hours{ font-size:.68rem; }
}

/* ============================================================
   PHONE SCROLL FEEL
   Three things were making every scrolled frame expensive.
============================================================ */
@media (max-width:900px){

  /* 1. A CSS filter on a live Google Maps IFRAME. The browser has to
        composite and re-filter an independently-rendering document every
        frame it's on screen. This is the single worst offender. */
  .contact-map iframe{ filter:none; }

  /* 2. Reveal transitions ran 0.9s on opacity AND transform, on dozens of
        elements, firing continuously as you scroll. Shorter, fade only,
        no movement — far less compositing during the scroll itself. */
  .reveal{ transform:none; transition:opacity .45s var(--ease); }
  .reveal.in{ transform:none; }
  .reveal-stagger.in > *{ transition-delay:0s; }

  /* 3. scroll-behavior:smooth on the root fights iOS momentum scrolling
        and makes the page feel heavy under the finger. */
  html{ scroll-behavior:auto; }

  /* the scroll cue's infinite animation only matters in the hero */
  .scroll-cue .line::after{ will-change:auto; }
}


/* ============================================================
   HEADER: STOP ANIMATING LAYOUT
   The header transitioned `padding`, which changes its height — a
   LAYOUT property. Animating it for 400ms at the moment you cross
   scrollY>60 forced re-layout + repaint every frame, exactly at the
   hero/next-section boundary. That was the stutter.
   Height is now constant; the logo shrinks with transform (compositor
   only) and the background just cross-fades (paint only).
============================================================ */
header.site-header{
  padding:16px 0 !important;
  transition:background .35s var(--ease) !important;
}
header.site-header.scrolled{
  padding:16px 0 !important;
}
.brand-logo{
  transform-origin:left center;
  transition:transform .35s var(--ease);
}
header.site-header.scrolled .brand-logo{
  transform:scale(.86);
}

/* ---- hero CTAs: distinct actions ---- */
.btn-line{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
}
.btn-line svg{ width:19px; height:19px; flex:0 0 auto; }
@media (max-width:600px){
  .btn-line svg{ width:17px; height:17px; }
}

/* ============================================================
   SECTION TITLE COLOUR
   Softer than the near-black ink, on light sections only.
   Dark sections and the hero keep inheriting cream — a flat
   override here would have made those titles unreadable.
============================================================ */
.h2{ color:#544648 !important; }
.why-text h3{ color:#544648 !important; }

/* dark sections + hero keep their inherited light colour */
section.dark .h2,
.banner .h2,
.banner-title,
.hero-title,
.contact-form-wrap .h2{ color:inherit !important; }

/* ============================================================
   NAV FOOTER — phone number + CTA
   `nav.main-nav a` (0,1,2) sets display:grid with a two-column
   template for the numbered menu rows. `.nav-cta` / `.nav-tel`
   (0,1,0) lost to it, so both stayed grid items pinned to the first
   column — which is why the button label sat hard left. These
   selectors outrank it.
============================================================ */
@media (max-width:1180.98px){

  nav.main-nav a.nav-tel{
    display:block;
    grid-template-columns:none;
    /* same serif as the menu labels, so it reads as part of the set
       rather than a pasted-in system font */
    font-family:var(--serif-jp) !important;
    font-size:1.42rem !important;
    font-weight:500;
    letter-spacing:.06em;
    line-height:1.25;
    color:var(--dawn);
    padding:0;
    text-align:left;
  }

  nav.main-nav a.nav-cta{
    display:flex;
    grid-template-columns:none;
    align-items:center;
    justify-content:center;      /* centres the label properly */
    text-align:center;
    width:100%;
    padding:13px 14px;
    font-family:var(--serif-jp);
    font-size:.9rem;
    letter-spacing:.1em;
  }
}

/* ============================================================
   DESKTOP NAV FIT  (v23)
   The horizontal nav used to switch on at 901px. Seven items — each one
   a Japanese label stacked over an English one — need roughly 1000px of
   run before the logo is even counted, so between 901 and ~1180 the flex
   items were squeezed and the labels broke MID-WORD. Japanese has no
   word boundaries, so the browser is free to break anywhere: ホー/ム,
   サービ/ス, お問い合わ/せ. Two fixes, both needed:

   1. The hamburger now takes over below 1181px (CSS + the resize handler
      in akatsuki.js — keep those two numbers in sync).
   2. Above it, the nav scales fluidly instead of in 901/1500/1800 steps,
      and the labels are nowrap so they can never break again even if a
      webfont (TypeSquare) loads wider than the fallback.
============================================================ */
@media (min-width:1181px){
  header.site-header .wrap{ gap:24px; }
  .brand{ flex:0 0 auto; }
  .brand-logo{ height:clamp(46px, 4.4vw, 66px); }

  nav.main-nav{ flex:0 1 auto; min-width:0; justify-content:flex-end; }

  .nav-links{
    gap:clamp(15px, 2vw, 36px);
    flex-wrap:nowrap;
  }
  .nav-links li{ flex:0 0 auto; }

  /* the actual bug: without this the label wraps character by character */
  .nav-links b,
  .nav-links em{ white-space:nowrap; }

  .nav-links b{
    font-size:clamp(.9rem, 1.02vw, 1.08rem);
    letter-spacing:.1em;
    line-height:1.3;
  }
  .nav-links em{
    font-size:clamp(.54rem, .6vw, .66rem);
    letter-spacing:clamp(.12em, .2vw, .22em);
    line-height:1;
  }
}

/* ============================================================
   WORK MODAL — WIDE LAYOUT + SWIPE  (v23)
   The modal was one 880px column: a letterboxed photo stacked over the
   text. On a 1440px+ monitor that wastes the whole screen and leaves the
   photo — the actual point of "see more" — small. From 1000px up it now
   splits into two columns: a tall photo on the left, the copy on the
   right. Phones keep the stacked layout, which was already fine.
============================================================ */
@media (min-width:1000px){
  #workModal{ padding:40px; }

  .wm-box{
    max-width:min(1060px, 94vw);
    /* a fixed box height is what lets the photo column fill vertically —
       with auto height the row collapses to the (short) text and the
       photo shrinks with it */
    height:min(640px, 82vh);
    max-height:none;
    display:grid;
    /* Photo column is near-square (~0.95:1). It started at 1.4:1, but most
       of the genba photos are PORTRAIT, and background-size:cover in a wide
       box was cutting roughly 45% off the top and bottom. Narrowing the
       column to about 610px against the same 640px height drops that to
       ~20%. Narrower, NOT shorter — reducing the height would crop more,
       not less. */
    grid-template-columns:minmax(0, 1.36fr) minmax(300px, 1fr);
    overflow:hidden;              /* the body column scrolls, not the box */
  }

  .wm-photo{
    height:100%;
    min-height:0;
  }

  .wm-body{
    display:flex; flex-direction:column; justify-content:center;
    padding:48px 46px;
    overflow-y:auto;
  }
  .wm-box h3{ font-size:1.75rem; }
  .wm-box p{ font-size:1rem; }

  /* bigger hit targets now that there's room for them */
  .wm-arrow{ width:46px; height:46px; font-size:1.3rem; }
  .wm-arrow.prev{ left:18px; }
  .wm-arrow.next{ right:18px; }
  .wm-dots{ bottom:16px; }
  .wm-dot{ width:8px; height:8px; }

  /* close sits over the cream text column here, so give it contrast */
  .wm-close{ top:16px; right:16px; background:rgba(23,17,12,.72); }
}

@media (min-width:1500px){
  .wm-box{ max-width:min(1180px, 92vw); height:min(690px, 82vh); }
}

/* the photo area owns horizontal gestures; vertical panning stays with
   the page so the modal body can still be scrolled from over the photo */
.wm-photo{ touch-action:pan-y; }