/* ========================================================================
   RESPONSIVE FINAL LAYER — v21
   Mobile/tablet ownership is intentionally centralized here.
   Loaded after style.css / subpage.css so legacy responsive declarations
   cannot accidentally win on specific viewport widths.
   ======================================================================== */

@media (max-width: 900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
  body.menu-open{overflow:hidden}
  .site-shell,.sub-shell{width:100%;max-width:100%;overflow:hidden}
  *,*:before,*:after{min-width:0}
  img,svg,video,canvas{max-width:100%;height:auto}
  iframe{border:0}
  .side-word,.sub-side-word,.story-line,.story-bead{display:none!important}

  /* Header */
  .site-header,.site-header.is-scrolled{
    width:100%!important;height:64px!important;padding:0 20px!important;
    transform:none!important;opacity:1!important;
  }
  .brand-mark{width:27px!important}.site-header.is-scrolled .brand-mark{width:24px!important}
  .mobile-menu-toggle{
    display:flex!important;position:relative;z-index:102;width:40px;height:40px;flex:0 0 40px;
    padding:0;border:0;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  }
  .mobile-menu-toggle span{display:block;width:20px;height:1px;background:var(--ink);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease}
  .site-header.menu-open .mobile-menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .site-header.menu-open .mobile-menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .site-header .site-nav{
    position:fixed!important;z-index:101;inset:0!important;width:100vw!important;height:100dvh!important;
    padding:88px 20px 42px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:center!important;gap:0!important;background:rgba(247,248,250,.975)!important;
    -webkit-backdrop-filter:blur(16px) saturate(115%);backdrop-filter:blur(16px) saturate(115%);
    opacity:0;visibility:hidden;pointer-events:none;transform:none!important;transition:opacity .28s ease,visibility .28s ease;
  }
  .site-header.menu-open .site-nav{opacity:1;visibility:visible;pointer-events:auto}
  .site-header .site-nav a,.site-header .site-nav a:nth-child(-n+3),.site-header .site-nav a:last-child{
    display:flex!important;width:100%!important;min-height:60px!important;padding:0!important;margin:0!important;
    align-items:center!important;border:0!important;border-bottom:1px solid rgba(24,34,46,.1)!important;border-radius:0!important;
    background:transparent!important;color:var(--ink)!important;font-size:16px!important;letter-spacing:.12em!important;
  }
  .site-header .site-nav a:first-child{border-top:1px solid rgba(24,34,46,.1)!important}
  .site-header .site-nav a:before,.site-header .site-nav a:after{display:none!important}

  /* Shared tablet rhythm */
  .section-grid,.content-section,.case-section,.page-hero,.site-footer{width:100%;max-width:100%;min-width:0}
}

/* ========================================================================
   PHONE — 620px and below
   ======================================================================== */
@media (max-width:620px){
  :root{--pad:20px}

  /* --------------------------------------------------------------------
     TOP
     -------------------------------------------------------------------- */
  .hero{
    width:100%!important;max-width:100%!important;min-height:84svh!important;height:auto!important;
    padding:92px 20px 48px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
    align-items:flex-start!important;overflow:hidden!important;
  }
  .hero-kicker{width:100%!important;padding:0!important;margin:0 0 32px!important;font-size:9px!important;line-height:1.7!important;letter-spacing:.13em!important}
  .hero-title{
    width:100%!important;max-width:100%!important;margin:0!important;white-space:normal!important;
    font-size:clamp(31px,9vw,40px)!important;line-height:1.36!important;letter-spacing:-.045em!important;
    word-break:keep-all!important;overflow-wrap:normal!important;text-wrap:balance!important;
  }
  .hero-title .hero-primary,.hero-title .hero-accent,.hero-title .hero-rest{
    display:inline!important;vertical-align:baseline!important;position:static!important;line-height:inherit!important;
  }
  .hero-title .hero-primary{font-size:1em!important;margin:0!important}
  .hero-title .hero-accent{margin:0 .03em 0 0!important}
  .hero-lead{width:100%!important;max-width:27em!important;margin:24px 0 0!important;font-size:12.5px!important;line-height:1.9!important;letter-spacing:.04em!important}
  .hero-line-wrap{width:70%!important;max-width:70%!important;margin:34px 0 0!important;align-self:flex-start!important}
  .scroll-cue{display:none!important}

  .section{width:100%!important;max-width:100%!important;padding:52px 20px!important;display:block!important}
  .section-index{width:100%!important;margin:0 0 16px!important;padding:0!important;font-size:8.7px!important;line-height:1.4!important;letter-spacing:.15em!important}
  .section h2,.projects-head h2{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;font-size:clamp(24px,6.7vw,29px)!important;line-height:1.52!important;letter-spacing:-.025em!important;word-break:keep-all!important;text-wrap:balance!important}
  .section-copy{width:100%!important;max-width:100%!important;margin:16px 0 0!important}
  .section-copy p{font-size:12.5px!important;line-height:1.9!important;margin:0 0 11px!important}

  /* Philosophy */
  .philosophy{padding-top:48px!important;padding-bottom:48px!important}

  /* Services */
  .services{padding-top:50px!important;padding-bottom:50px!important}
  .services h2{margin-bottom:22px!important}
  .service-list{width:100%!important;margin:0!important;border-top:1px solid var(--line)!important}
  .service-row{
    width:100%!important;min-height:0!important;padding:18px 0!important;display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:7px 10px!important;
    align-items:start!important;overflow:visible!important;
  }
  .service-no{grid-column:1!important;grid-row:1!important;font-size:13px!important;line-height:1.45!important}
  .service-name{grid-column:2!important;grid-row:1!important;width:100%!important}
  .service-name h3{margin:0!important;font-size:18px!important;line-height:1.35!important}
  .service-name small{display:block!important;margin-top:4px!important;font-size:8.5px!important;line-height:1.5!important;white-space:normal!important}
  .service-visual{display:none!important}
  .service-row>p{grid-column:1/3!important;grid-row:2!important;width:100%!important;max-width:100%!important;margin:3px 0 0!important;font-size:12.2px!important;line-height:1.82!important}
  .section-action{width:100%!important;margin-top:22px!important;padding-top:14px!important;display:block!important}
  .section-action p{font-size:11px!important;line-height:1.75!important;max-width:28em!important}
  .motion-link{margin-top:10px!important;min-height:42px!important;min-width:0!important;width:max-content!important}

  /* Projects */
  .projects{width:100%!important;height:auto!important;padding:50px 0 54px!important;overflow:hidden!important}
  .projects-sticky{position:relative!important;top:auto!important;min-height:0!important;height:auto!important;padding:0!important;display:block!important;overflow:visible!important}
  .projects-head{width:100%!important;margin:0 0 24px!important;padding:0 20px!important;display:block!important}
  .projects-head:after{bottom:-12px!important}
  .projects-head>p:last-child{width:100%!important;max-width:100%!important;margin:14px 0 0!important;font-size:12.2px!important;line-height:1.8!important}
  .projects-viewport{width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;padding:0 20px 10px!important;scroll-snap-type:x mandatory!important;scroll-padding-left:20px!important;-webkit-overflow-scrolling:touch}
  .projects-track{display:flex!important;width:max-content!important;padding-right:20px!important;gap:14px!important;transform:none!important;align-items:stretch!important}
  .project-card{
    width:min(82vw,312px)!important;max-width:calc(100vw - 40px)!important;min-width:0!important;scroll-snap-align:start!important;
    display:grid!important;grid-template-rows:auto auto auto 88px 64px auto!important;align-content:start!important;padding:0 0 3px!important;
  }
  .project-art{width:100%!important;height:auto!important;aspect-ratio:4/3!important;overflow:hidden!important}
  .project-site-preview iframe{max-width:none!important}
  .project-meta{margin:14px 0 5px!important;font-size:9px!important}
  .project-card h3{min-height:28px!important;margin:0 0 8px!important;font-size:18px!important;line-height:1.45!important}
  .project-card strong{height:88px!important;min-height:88px!important;overflow:hidden!important;font-size:16.5px!important;line-height:1.58!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important}
  .project-card>p:not(.project-meta):not(.project-deliverables){height:64px!important;min-height:64px!important;margin:6px 0 0!important;overflow:hidden!important;font-size:11.8px!important;line-height:1.8!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important}
  .project-deliverables{display:none!important}
  .project-actions{width:100%!important;margin-top:9px!important;padding-top:8px!important;border-top:1px solid rgba(24,34,46,.08)!important;gap:8px 14px!important}
  .project-detail-link,.project-site-link{min-height:38px!important;font-size:9px!important}
  .all-projects{display:inline-flex!important;width:auto!important;max-width:calc(100% - 40px)!important;min-height:40px!important;margin:18px 0 0 20px!important;padding:8px 12px!important;font-size:9px!important}

  /* Approach */
  .approach{padding-top:50px!important;padding-bottom:50px!important}
  .approach-intro{width:100%!important;margin:0 0 24px!important;display:block!important}
  .approach-intro h2{font-size:clamp(25px,6.8vw,30px)!important;line-height:1.5!important}
  .approach-intro p{margin-top:14px!important;font-size:12.3px!important;line-height:1.86!important;max-width:100%!important}
  .approach-line{display:none!important}
  .approach-grid{display:block!important;width:100%!important;border-top:1px solid rgba(24,34,46,.08)!important;border-bottom:0!important}
  .approach-grid article,.approach-grid article:nth-child(2n){width:100%!important;display:block!important;padding:16px 0 17px!important;border:0!important;border-bottom:1px solid rgba(24,34,46,.08)!important}
  .approach-grid article>span{display:block!important;margin:0 0 8px!important;font-size:18px!important;line-height:1!important}
  .approach-grid h3{margin:0 0 8px!important;font-size:9px!important;letter-spacing:.15em!important}
  .approach-grid strong{display:block!important;margin:0!important;font-size:15px!important;line-height:1.6!important}
  .approach-grid p{margin:6px 0 0!important;padding:0!important;font-size:11.8px!important;line-height:1.8!important}

  /* About */
  .about{padding-top:50px!important;padding-bottom:50px!important}
  .about-main{display:block!important;width:100%!important;max-width:100%!important}
  .about-copy,.digital-bg{width:100%!important;max-width:100%!important}
  .about-copy h2{margin:0 0 16px!important}
  .about-copy p,.digital-bg p{font-size:12.4px!important;line-height:1.9!important}
  .about-main blockquote{width:100%!important;margin:22px 0!important;font-size:19px!important;line-height:1.7!important}
  .about-photo{width:100%!important;min-height:260px!important;margin:24px 0 0!important}
  .digital-bg{margin-top:24px!important}
  .digital-bg ul{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px 12px!important;margin:16px 0 20px!important;font-size:11px!important}
  .digital-bg li{font-size:11px!important;overflow-wrap:anywhere!important}

  /* Full-bleed profile */
  .digital-partner.section-grid{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;display:block!important;background:#fff!important}
  .partner-panel{width:100%!important;min-height:0!important;padding:34px 20px 30px!important;border:0!important}
  .partner-panel .partner-kicker{margin:0 0 14px!important;font-size:9px!important}
  .partner-panel h2{width:100%!important;max-width:9em!important;margin:0!important;font-size:clamp(27px,7.3vw,32px)!important;line-height:1.48!important}
  .partner-panel .partner-copy{width:100%!important;max-width:28em!important;margin:17px 0 0!important;font-size:12.3px!important;line-height:1.85!important}
  .partner-link{margin-top:20px!important;width:max-content!important;color:#fff!important}
  .partner-info-wrap{display:block!important;width:100%!important;max-width:100%!important;border:0!important;background:#fff!important;overflow:hidden!important}
  .partner-info-head{width:100%!important;padding:28px 20px 0!important}
  .partner-info-head h3{margin:7px 0 0!important;font-size:21px!important}
  .partner-company-table{width:100%!important;padding:9px 20px 22px!important}
  .partner-company-row{display:block!important;width:100%!important;padding:11px 0!important;border-bottom:1px solid rgba(24,34,46,.08)!important}
  .partner-company-row span{display:block!important;margin-bottom:4px!important;font-size:9.5px!important}
  .partner-company-row strong{display:block!important;font-size:12.3px!important;line-height:1.75!important;overflow-wrap:anywhere!important}
  .partner-visual{width:100%!important;min-height:190px!important;border:0!important;border-top:1px solid rgba(24,34,46,.06)!important;background:linear-gradient(180deg,#fbfcfe,#f3f7fb)!important}
  .partner-visual svg{width:90%!important;max-width:420px!important}

  /* Contact on TOP */
  .contact{width:100%!important;max-width:100%!important;padding:48px 20px 54px!important;display:block!important;background:linear-gradient(180deg,rgba(241,245,249,.82),rgba(237,242,247,.98))!important}
  .contact:after{opacity:.12!important}.contact-glow{opacity:.2!important}
  .contact h2{width:100%!important;max-width:11em!important;margin:0!important;font-size:clamp(25px,6.8vw,30px)!important;line-height:1.5!important}
  .contact-copy{width:100%!important;max-width:100%!important;margin:18px 0 0!important;font-size:12.2px!important;line-height:1.85!important}
  .contact-button{position:static!important;transform:none!important;width:min(180px,100%)!important;min-width:0!important;min-height:46px!important;margin:24px auto 0!important;padding:0 18px!important;display:flex!important;justify-content:center!important;border:1px solid rgba(24,34,46,.18)!important;background:transparent!important}
  .contact-button:hover{transform:none!important}
  .contact-button span{font-size:9.5px!important;letter-spacing:.18em!important}

  /* --------------------------------------------------------------------
     SUBPAGES — all pages
     -------------------------------------------------------------------- */
  .sub-shell .page-hero{
    width:100%!important;max-width:100%!important;min-height:0!important;height:auto!important;
    padding:88px 20px 38px!important;display:block!important;overflow:hidden!important;
  }
  .page-no{width:100%!important;margin:0 0 20px!important;font-size:8.5px!important;line-height:1.4!important;letter-spacing:.15em!important}
  .page-title{width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(26px,7.1vw,32px)!important;line-height:1.52!important;letter-spacing:-.025em!important;word-break:keep-all!important;text-wrap:balance!important;overflow-wrap:normal!important}
  .page-title br{display:none!important}
  .page-lead{width:100%!important;max-width:30em!important;margin:15px 0 0!important;font-size:12.2px!important;line-height:1.88!important}
  .page-lead br{display:none!important}
  .page-rail{position:relative!important;left:auto!important;bottom:auto!important;width:54px!important;margin:22px 0 0!important}

  .content-section{width:100%!important;max-width:100%!important;padding:40px 20px!important;display:block!important}
  .content-section>*{max-width:100%!important}
  .eyebrow{font-size:8.3px!important;letter-spacing:.17em!important}
  .section-title{width:100%!important;max-width:100%!important;margin:10px 0 0!important;font-size:clamp(21px,5.9vw,26px)!important;line-height:1.55!important;letter-spacing:-.02em!important;word-break:keep-all!important;text-wrap:balance!important}
  .section-title br{display:none!important}
  .section-body{width:100%!important;max-width:100%!important;margin:13px 0 0!important;font-size:12.3px!important;line-height:1.92!important}
  .section-body p+p{margin-top:13px!important}
  .quiet-note{font-size:11px!important}

  /* Service subpage */
  .process,.capabilities,.consult-list,.price-wrap,.support-grid,.attitude-list,.career-flow,.company-table,.contact-layout,.works-list{width:100%!important;max-width:100%!important;margin-top:22px!important}
  .process{display:block!important}
  .process-line{display:none!important}
  .process article{width:100%!important;min-height:0!important;padding:17px 0 19px!important;border-right:0!important;border-bottom:1px solid var(--line)!important}
  .process article:first-of-type{border-top:1px solid var(--line)!important}
  .process article span{font-size:8px!important}.process article h3{margin-top:15px!important;font-size:17px!important}.process article strong{font-size:14px!important}.process article p{font-size:11.8px!important;line-height:1.8!important}
  .cap-row{width:100%!important;display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:8px 10px!important;padding:16px 0!important}
  .cap-no{grid-column:1!important}.cap-name{grid-column:2!important}.cap-name h3{font-size:17px!important}.cap-name small{font-size:8px!important;overflow-wrap:anywhere!important}
  .cap-row>p,.cap-examples{grid-column:1/3!important;width:100%!important;margin-left:0!important;margin-right:0!important}
  .cap-row>p{font-size:11.8px!important;line-height:1.8!important}.cap-examples{font-size:9px!important;line-height:1.65!important;overflow-wrap:anywhere!important}
  .consult-item{width:100%!important;display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;gap:8px!important;padding:14px 0!important}
  .consult-item span{font-size:9px!important}.consult-item p{margin:0!important;font-size:15px!important;line-height:1.6!important}
  .price-row{width:100%!important;display:block!important;padding:15px 0!important}.price-row h3{font-size:15px!important;line-height:1.6!important}.price-row p{margin-top:5px!important;font-size:11.5px!important;line-height:1.75!important}.price-row strong{display:block!important;margin-top:7px!important;font-size:17px!important}
  .support-grid{display:block!important}.support-plan{width:100%!important;padding:19px 0 22px!important;border-left:0!important;border-bottom:1px solid var(--line)!important}.support-plan:first-child{border-top:1px solid var(--line)!important}.support-plan h3{font-size:18px!important;line-height:1.55!important}.support-plan p,.support-plan li{font-size:11.6px!important;line-height:1.78!important}

  /* Works list subpage */
  .work-entry{width:100%!important;max-width:100%!important;padding:24px 0!important;display:flex!important;flex-direction:column!important;gap:16px!important}
  .work-entry:nth-child(even) .work-copy,.work-entry:nth-child(even) .work-visual{order:initial!important}
  .work-visual{order:0!important;width:100%!important;max-width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important}
  .work-visual iframe{width:160%!important;height:160%!important;max-width:none!important}
  .work-copy{order:1!important;width:100%!important;max-width:100%!important}
  .work-copy small{font-size:8px!important}.work-copy h2{margin:12px 0 5px!important;font-size:20px!important;line-height:1.45!important}.work-copy .work-meta{margin:0 0 15px!important;font-size:8.5px!important}
  .work-copy strong{display:block!important;font-size:16.5px!important;line-height:1.58!important}.work-copy p{margin-top:12px!important;font-size:11.8px!important;line-height:1.82!important}
  .work-actions{width:100%!important;margin-top:14px!important;padding-top:10px!important;border-top:1px solid rgba(24,34,46,.08)!important;gap:8px 14px!important}.work-detail-link,.work-site-link{min-height:38px!important;font-size:8.5px!important}

  /* Work detail */
  .case-hero{padding:86px 20px 28px!important}
  .case-client{width:100%!important;max-width:100%!important;margin:0!important;font-size:clamp(24px,6.6vw,29px)!important;line-height:1.42!important;letter-spacing:-.025em!important}
  .case-lead{width:100%!important;max-width:100%!important;margin:11px 0 0!important;font-size:clamp(17px,4.7vw,21px)!important;line-height:1.62!important;word-break:keep-all!important;text-wrap:balance!important}
  .case-meta-wrap{width:100%!important;margin-top:13px!important;text-align:left!important;justify-self:start!important;font-size:8.5px!important}
  .case-site-link{min-height:34px!important;margin-top:6px!important;font-size:8.5px!important}
  .case-visual{width:100%!important;padding:0 20px 22px!important}.case-visual-box{width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important}.case-visual-box iframe{width:160%!important;height:160%!important;max-width:none!important}
  .case-section{width:100%!important;max-width:100%!important;padding:27px 20px!important;display:block!important;border-top:1px solid rgba(24,34,46,.08)!important}
  .case-section:after{display:none!important}.case-index{display:block!important;width:100%!important;margin:0 0 7px!important;padding:0!important;font-size:8px!important;line-height:1!important}
  .case-section h2{display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;font-size:clamp(18.5px,5vw,22px)!important;line-height:1.58!important;letter-spacing:-.012em!important;white-space:normal!important;word-break:keep-all!important;text-wrap:balance!important;overflow-wrap:normal!important}
  .case-copy{display:block!important;width:100%!important;max-width:100%!important;margin:10px 0 0!important;font-size:11.9px!important;line-height:1.9!important}.case-copy p{margin:0 0 1.1em!important}
  .case-gallery{width:100%!important;margin-top:17px!important;display:block!important}.case-gallery figure{width:100%!important;min-height:0!important;aspect-ratio:4/3!important}.case-gallery figure+figure{margin-top:8px!important}
  .deliverables{width:100%!important;margin-top:18px!important}.deliverables div{display:flex!important;gap:12px!important;padding:10px 0!important;font-size:10.5px!important}.deliverables div span{min-width:0!important}
  .next-case-inner{padding:26px 20px 28px!important}.next-case small{font-size:8px!important}.next-case h2{margin:9px 0 4px!important;font-size:20px!important;line-height:1.5!important}.next-case p{font-size:11.5px!important}

  /* About subpage */
  .attitude{width:100%!important;display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;gap:8px!important;padding:13px 0!important}.attitude span{font-size:9px!important}.attitude h3{margin:0!important;font-size:16px!important;line-height:1.6!important}
  .career-flow{display:block!important}.career-flow div{width:100%!important;min-height:0!important;padding:16px 0!important;border-right:0!important;border-bottom:1px solid var(--line)!important}.career-flow strong{margin-top:12px!important;font-size:12px!important;line-height:1.65!important}
  .company-row{width:100%!important;display:block!important;padding:13px 0!important}.company-row span{display:block!important;margin-bottom:4px!important;font-size:10px!important}.company-row strong{display:block!important;font-size:12px!important;line-height:1.72!important;overflow-wrap:anywhere!important}

  /* Contact subpage */
  .contact-layout{display:block!important;width:100%!important;margin-top:20px!important}.contact-side{position:static!important;width:100%!important;max-width:100%!important;padding:0!important}.contact-side p{font-size:11.9px!important;line-height:1.86!important}.contact-form{width:100%!important;margin-top:20px!important;border-top:1px solid rgba(24,34,46,.18)!important}.field{width:100%!important;padding:12px 0!important}.field label{font-size:9.5px!important}.field input,.field textarea,.field select{width:100%!important;min-width:0!important;font-size:16px!important;box-sizing:border-box!important}.field textarea{min-height:120px!important}.submit-row{display:block!important;padding-top:16px!important}.form-status{font-size:10.5px!important;line-height:1.6!important}.submit-row button{width:100%!important;min-width:0!important;min-height:46px!important;margin-top:12px!important;text-align:center!important;font-size:10px!important}

  /* Privacy */
  .privacy-copy{width:100%!important;max-width:100%!important}.privacy-copy h2{margin:24px 0 8px!important;font-size:17px!important;line-height:1.55!important}.privacy-copy h2:first-child{margin-top:0!important}.privacy-copy p{font-size:11.9px!important;line-height:1.9!important}

  /* Shared lower CTA/footer */
  .cta-band{width:100%!important;background:var(--base)!important;border-top:1px solid rgba(24,34,46,.08)!important}.cta-inner{padding:38px 20px 42px!important}.cta-inner small{font-size:8px!important}.cta-inner h2{margin-top:12px!important;font-size:clamp(22px,6vw,27px)!important;line-height:1.55!important}.cta-inner h2 br{display:none!important}.text-link{margin-top:18px!important;min-height:40px!important;font-size:9px!important}
  .site-footer{display:grid!important;grid-template-columns:1fr auto!important;gap:18px!important;padding:38px 20px!important}.site-footer nav{display:none!important}.site-footer small{justify-self:end!important;white-space:nowrap!important;font-size:9px!important}
}

/* ========================================================================
   SMALL PHONE — 360px and below
   ======================================================================== */
@media (max-width:360px){
  :root{--pad:18px}
  .site-header,.site-header.is-scrolled{padding-left:18px!important;padding-right:18px!important}
  .hero{padding-left:18px!important;padding-right:18px!important}
  .hero-title{font-size:clamp(29px,8.8vw,34px)!important}
  .section,.content-section,.case-section{padding-left:18px!important;padding-right:18px!important}
  .projects-head{padding-left:18px!important;padding-right:18px!important}.projects-viewport{padding-left:18px!important;scroll-padding-left:18px!important}.projects-track{padding-right:18px!important}
  .project-card{width:min(84vw,296px)!important;max-width:calc(100vw - 36px)!important}.all-projects{margin-left:18px!important;max-width:calc(100% - 36px)!important}
  .sub-shell .page-hero,.case-hero{padding-left:18px!important;padding-right:18px!important}
  .case-visual{padding-left:18px!important;padding-right:18px!important}
  .partner-panel,.partner-info-head,.partner-company-table{padding-left:18px!important;padding-right:18px!important}
  .contact{padding-left:18px!important;padding-right:18px!important}
  .cta-inner,.site-footer{padding-left:18px!important;padding-right:18px!important}
}


/* ========================================================================
   v22 — MOBILE EDITORIAL REDUCTION + VIEWPORT SAFETY
   Smartphone is intentionally a shorter editorial cut of the desktop site.
   ======================================================================== */
.mobile-summary,.service-mobile-copy{display:none}

@media (max-width:620px){
  html,body,.site-shell,.sub-shell{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  main,section,article,header,footer,nav,div{max-width:100%}
  img,video,canvas,svg{max-width:100%!important;height:auto}
  input,select,textarea,button{max-width:100%;box-sizing:border-box}

  /* safer Japanese line breaking: no balanced-wrap surprises near the edge */
  .hero-title,.page-title,.page-lead,.section h2,.projects-head h2,.case-client,.case-lead,.case-section h2,.section-title,.contact h2{
    max-width:100%!important;
    text-wrap:wrap!important;
    word-break:normal!important;
    line-break:strict!important;
    overflow-wrap:break-word!important;
  }

  /* TOP hero — slightly shorter and guaranteed inside viewport */
  .hero{
    min-height:72svh!important;
    padding:88px 20px 42px!important;
    justify-content:center!important;
  }
  .hero-kicker{margin-bottom:24px!important}
  .hero-title{
    font-size:clamp(29px,8.2vw,35px)!important;
    line-height:1.4!important;
    letter-spacing:-.04em!important;
  }
  .hero-lead{margin-top:18px!important;font-size:12px!important;line-height:1.82!important}
  .hero-line-wrap{width:54%!important;max-width:54%!important;margin-top:26px!important}
  .hero-glow-a,.hero-glow-b,.hero-glow-c{max-width:none!important;pointer-events:none}

  /* Editorial reduction helpers */
  .desktop-copy,.service-desktop-copy,.approach-desktop-copy,.about-desktop-copy,.partner-desktop-copy,.mobile-optional{display:none!important}
  .mobile-summary,.service-mobile-copy{display:block!important}

  /* Philosophy — one thought only */
  .philosophy{padding-top:42px!important;padding-bottom:42px!important}
  .philosophy .section-copy{margin-top:12px!important}
  .philosophy .mobile-summary{margin:0!important;max-width:26em;font-size:12.5px!important;line-height:1.85!important;color:#526575}

  /* Services — title + one-line meaning only */
  .services{padding-top:44px!important;padding-bottom:44px!important}
  .services h2{margin-bottom:18px!important}
  .service-row{padding:15px 0!important;grid-template-rows:auto auto!important}
  .service-name small{display:none!important}
  .service-mobile-copy{
    grid-column:2/3!important;grid-row:2!important;
    margin:4px 0 0!important;padding:0!important;
    font-size:11.7px!important;line-height:1.65!important;color:#5c6d7d!important;
  }
  .section-action-service{margin-top:16px!important;padding-top:12px!important}
  .section-action-service p{display:none!important}
  .section-action-service .motion-link{margin-top:0!important}

  /* Works — image, name, main statement, actions. No extra description. */
  .projects{padding-top:44px!important;padding-bottom:48px!important}
  .projects-head{margin-bottom:20px!important}
  .projects-head>p:last-child{display:none!important}
  .project-card{
    grid-template-rows:auto auto auto minmax(52px,auto) auto!important;
  }
  .project-card>p:not(.project-meta):not(.project-deliverables){display:none!important}
  .project-card strong{
    height:auto!important;min-height:52px!important;
    -webkit-line-clamp:2!important;
    font-size:15.5px!important;line-height:1.58!important;
  }
  .project-actions{align-self:end!important;margin-top:8px!important}
  .all-projects{margin-top:14px!important}

  /* Approach — four compact steps. Descriptions belong on SERVICE. */
  .approach{padding-top:44px!important;padding-bottom:44px!important}
  .approach-intro{margin-bottom:18px!important}
  .approach-intro h2{font-size:24px!important;line-height:1.5!important}
  .approach-intro .motion-link{margin-top:14px!important}
  .approach-grid article,.approach-grid article:nth-child(2n){
    display:grid!important;grid-template-columns:40px 62px minmax(0,1fr)!important;
    align-items:center!important;column-gap:8px!important;padding:13px 0!important;
  }
  .approach-grid article>span{margin:0!important;font-size:16px!important}
  .approach-grid h3{margin:0!important;font-size:8px!important}
  .approach-grid strong{margin:0!important;font-size:13.5px!important;line-height:1.55!important}
  .approach-step-copy{display:none!important}

  /* ABOUT on TOP — only the core story + route to ABOUT. */
  .about{padding-top:44px!important;padding-bottom:44px!important}
  .about-copy h2{margin-bottom:12px!important}
  .about .mobile-summary{margin:0!important;font-size:12.2px!important;line-height:1.85!important;color:#526575}
  .about-main blockquote{margin:18px 0 0!important;font-size:18px!important;line-height:1.65!important}
  .about-photo,.digital-bg{display:none!important}
  .section-action-about{margin-top:18px!important;padding-top:12px!important}
  .section-action-about p{display:none!important}
  .section-action-about .motion-link{margin-top:0!important}

  /* PROFILE — blue identity panel + just core company facts. */
  .digital-partner.section-grid{background:#fff!important}
  .partner-panel{padding:28px 20px 26px!important}
  .partner-panel .partner-kicker{margin-bottom:10px!important}
  .partner-panel h2{max-width:100%!important;font-size:25px!important;line-height:1.5!important}
  .partner-link{margin-top:16px!important}
  .partner-info-head{padding:22px 20px 0!important}
  .partner-info-head h3{font-size:19px!important}
  .partner-company-table{padding:7px 20px 18px!important}
  .partner-company-row{display:none!important}
  .partner-company-row:nth-child(1),.partner-company-row:nth-child(3){display:block!important}
  .partner-company-row span{font-size:8.5px!important}
  .partner-company-row strong{font-size:12px!important}

  /* CONTACT — end simply */
  .contact{padding-top:42px!important;padding-bottom:48px!important}
  .contact h2{max-width:100%!important;font-size:24px!important;line-height:1.55!important}
  .contact-button{margin-top:20px!important}

  /* Subpage heroes: compact but not cramped; prevent any clipping */
  .sub-shell .page-hero,.case-hero{
    overflow:visible!important;
    padding:84px 20px 34px!important;
  }
  .page-title{font-size:clamp(24px,6.7vw,29px)!important;line-height:1.55!important}
  .page-lead{font-size:11.8px!important;line-height:1.82!important;max-width:100%!important}
  .page-rail{width:48px!important;margin-top:20px!important}

  /* Subpage rhythm: detail lives here, but remove repeated whitespace */
  .content-section{padding-top:36px!important;padding-bottom:36px!important}
  .content-section+.content-section{border-top-color:rgba(24,34,46,.07)!important}
  .section-title{font-size:20.5px!important;line-height:1.58!important}
  .section-body{margin-top:10px!important;font-size:11.9px!important;line-height:1.88!important}

  /* Work detail viewport safety */
  .case-client{font-size:23px!important;line-height:1.45!important}
  .case-lead{font-size:17px!important;line-height:1.62!important}
  .case-section h2{font-size:18.5px!important;line-height:1.62!important}
  .case-copy{font-size:11.7px!important;line-height:1.88!important}

  /* Never allow embedded previews to determine layout width */
  .project-site-preview,.work-visual,.case-visual-box{contain:layout paint!important}
  .project-site-preview iframe,.work-visual iframe,.case-visual-box iframe{
    max-width:none!important;min-width:0!important;
    pointer-events:none!important;
  }
}

@media (max-width:360px){
  .hero-title{font-size:28px!important}
  .hero,.sub-shell .page-hero,.case-hero{padding-left:18px!important;padding-right:18px!important}
  .approach-grid article,.approach-grid article:nth-child(2n){grid-template-columns:34px 54px minmax(0,1fr)!important;column-gap:6px!important}
  .approach-grid strong{font-size:12.8px!important}
}

/* v22.1 final clipping guard */
@media (max-width:620px){
  .sub-shell .page-hero,.case-hero{overflow:hidden!important;}
  .page-hero:before,.page-hero:after{pointer-events:none!important;}
  .hero-title,.page-title,.case-client,.case-lead,.section-title,.case-section h2{box-sizing:border-box!important;}
}
\n\n/* Work detail CMS image: on mobile, preserve the full screenshot instead of forcing it into 4:3. */\n@media (max-width:620px){\n  .case-visual-box.has-cms-image{\n    aspect-ratio:auto!important;\n    height:auto!important;\n    min-height:0!important;\n    overflow:hidden!important;\n  }\n  .case-visual-box.has-cms-image img{\n    position:static!important;\n    display:block!important;\n    width:100%!important;\n    max-width:100%!important;\n    height:auto!important;\n    max-height:none!important;\n    object-fit:contain!important;\n    object-position:center top!important;\n  }\n  .case-visual-box.is-fallback{\n    aspect-ratio:4/3!important;\n    min-height:0!important;\n  }\n}\n
/* WORKS detail image: final mobile override. CMS images must end exactly at the image edge. */
@media (max-width:620px){
  .case-visual-box.has-cms-image{
    width:100%!important;
    aspect-ratio:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    line-height:0!important;
    font-size:0!important;
    overflow:hidden!important;
  }
  .case-visual-box.has-cms-image img{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center top!important;
    vertical-align:top!important;
  }
}

/* ========================================================================
   MOBILE NAV — corporate visual language
   Lightweight CSS transitions only. No additional JS/GSAP is required.
   ======================================================================== */
@media (max-width:900px){
  .site-header .site-nav{
    position:fixed!important;
    z-index:101!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    padding:108px var(--pad) 54px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:0!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 82% 18%,rgba(77,178,255,.26),transparent 31%),
      radial-gradient(circle at 12% 88%,rgba(91,86,255,.17),transparent 34%),
      linear-gradient(128deg,#0d255f 0%,#123b9c 42%,#1c56d8 72%,#102d76 100%)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none!important;
    transition:opacity .24s ease,visibility .24s ease!important;
  }
  .site-header .site-nav:before{
    content:"MENU / NAVIGATION";
    position:absolute;
    top:88px;
    left:var(--pad);
    font-size:8px;
    line-height:1;
    letter-spacing:.18em;
    color:rgba(255,255,255,.48);
  }
  .site-header .site-nav:after{
    content:"";
    position:absolute;
    left:var(--pad);
    right:var(--pad);
    top:112px;
    height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.06));
  }
  .site-header.menu-open .site-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .site-header .site-nav a,
  .site-header .site-nav a:nth-child(-n+3),
  .site-header .site-nav a:last-child{
    position:relative!important;
    display:grid!important;
    grid-template-columns:44px 1fr auto!important;
    align-items:center!important;
    width:100%!important;
    min-height:68px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.16)!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:16px!important;
    font-weight:500!important;
    letter-spacing:.13em!important;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .24s ease,transform .32s cubic-bezier(.22,1,.36,1),background-color .18s ease!important;
  }
  .site-header .site-nav a:first-child{border-top:0!important}
  .site-header .site-nav a:before{
    display:block!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    background:none!important;
    border:0!important;
    color:rgba(255,255,255,.46)!important;
    font-size:8px!important;
    font-weight:400!important;
    letter-spacing:.08em!important;
    transform:none!important;
    opacity:1!important;
  }
  .site-header .site-nav a:nth-child(1):before{content:"01"!important}
  .site-header .site-nav a:nth-child(2):before{content:"02"!important}
  .site-header .site-nav a:nth-child(3):before{content:"03"!important}
  .site-header .site-nav a:nth-child(4):before{content:"04"!important}
  .site-header .site-nav a:after{
    content:"↗"!important;
    display:block!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    color:rgba(255,255,255,.46)!important;
    font-size:11px!important;
    line-height:1!important;
    transform:none!important;
    opacity:1!important;
  }
  .site-header .site-nav a[aria-current="page"]{
    color:#fff!important;
    background:rgba(255,255,255,.055)!important;
  }
  .site-header .site-nav a[aria-current="page"]:before{color:#9dc1ff!important}
  .site-header.menu-open .site-nav a{opacity:1;transform:translateY(0)}
  .site-header.menu-open .site-nav a:nth-child(1){transition-delay:.04s!important}
  .site-header.menu-open .site-nav a:nth-child(2){transition-delay:.08s!important}
  .site-header.menu-open .site-nav a:nth-child(3){transition-delay:.12s!important}
  .site-header.menu-open .site-nav a:nth-child(4){transition-delay:.16s!important}

  .site-header.menu-open{
    background:transparent!important;
    border-bottom-color:transparent!important;
    box-shadow:none!important;
  }
  .site-header.menu-open .brand-mark{position:relative;z-index:103}
  .site-header.menu-open .brand-mark svg{stroke:#fff!important}
  .site-header.menu-open .mobile-menu-toggle{color:#fff!important}
  .site-header.menu-open .mobile-menu-toggle span{background:#fff!important}
}

@media (max-width:620px){
  .site-header .site-nav{padding:100px 20px 42px!important}
  .site-header .site-nav:before{top:82px;left:20px}
  .site-header .site-nav:after{top:105px;left:20px;right:20px}
  .site-header .site-nav a,
  .site-header .site-nav a:nth-child(-n+3),
  .site-header .site-nav a:last-child{
    grid-template-columns:38px 1fr auto!important;
    min-height:64px!important;
    font-size:15px!important;
  }
}

@media (hover:hover) and (max-width:900px){
  .site-header .site-nav a:hover{background:rgba(255,255,255,.055)!important}
}

/* ========================================================================
   GLOBAL MENU — desktop + mobile
   HOME is always available in the menu. Desktop also labels the brand mark
   as a direct route back to TOP.
   ======================================================================== */
.mobile-menu-toggle{
  display:flex!important;
  position:relative;
  z-index:104;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.mobile-menu-toggle span{
  display:block;
  width:20px;
  height:1px;
  background:var(--ink);
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s ease,background-color .2s ease;
}
.site-header.menu-open .mobile-menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
.site-header.menu-open .mobile-menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.site-header .brand-mark{position:relative;z-index:104}
@media (min-width:901px){
  .site-header .brand-mark:after{
    content:"HOME";
    position:absolute;
    left:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%);
    font-size:8px;
    line-height:1;
    font-weight:500;
    letter-spacing:.14em;
    color:rgba(24,34,46,.48);
    white-space:nowrap;
    transition:color .2s ease,opacity .2s ease;
  }
  .site-header .brand-mark:hover:after{color:var(--blue)}
  .site-header.menu-open .brand-mark:after{color:rgba(255,255,255,.6)}
}

.site-header .site-nav{
  position:fixed!important;
  z-index:101!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  padding:clamp(112px,12vh,154px) max(var(--pad),8vw) clamp(54px,8vh,84px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 18%,rgba(77,178,255,.26),transparent 31%),
    radial-gradient(circle at 12% 88%,rgba(91,86,255,.17),transparent 34%),
    linear-gradient(128deg,#0d255f 0%,#123b9c 42%,#1c56d8 72%,#102d76 100%)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:none!important;
  transition:opacity .24s ease,visibility .24s ease!important;
}
.site-header .site-nav:before{
  content:"MENU / NAVIGATION";
  position:absolute;
  top:clamp(86px,10vh,116px);
  left:max(var(--pad),8vw);
  font-size:8px;
  line-height:1;
  letter-spacing:.18em;
  color:rgba(255,255,255,.48);
}
.site-header .site-nav:after{
  content:"";
  position:absolute;
  left:max(var(--pad),8vw);
  right:max(var(--pad),8vw);
  top:clamp(110px,12vh,140px);
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.06));
}
.site-header.menu-open .site-nav{opacity:1;visibility:visible;pointer-events:auto}
.site-header .site-nav a,
.site-header .site-nav a:nth-child(-n+4),
.site-header .site-nav a:last-child{
  position:relative!important;
  display:grid!important;
  grid-template-columns:52px 1fr auto!important;
  align-items:center!important;
  width:100%!important;
  min-height:clamp(66px,9vh,88px)!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.16)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:clamp(15px,1.35vw,20px)!important;
  font-weight:500!important;
  letter-spacing:.13em!important;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .24s ease,transform .32s cubic-bezier(.22,1,.36,1),background-color .18s ease!important;
}
.site-header .site-nav a:first-child{border-top:0!important}
.site-header .site-nav a:before{
  display:block!important;
  position:static!important;
  width:auto!important;height:auto!important;margin:0!important;
  background:none!important;border:0!important;
  color:rgba(255,255,255,.46)!important;
  font-size:8px!important;font-weight:400!important;letter-spacing:.08em!important;
  transform:none!important;opacity:1!important;
}
.site-header .site-nav a:nth-child(1):before{content:"01"!important}
.site-header .site-nav a:nth-child(2):before{content:"02"!important}
.site-header .site-nav a:nth-child(3):before{content:"03"!important}
.site-header .site-nav a:nth-child(4):before{content:"04"!important}
.site-header .site-nav a:nth-child(5):before{content:"05"!important}
.site-header .site-nav a:after{
  content:"↗"!important;
  display:block!important;position:static!important;width:auto!important;height:auto!important;
  background:none!important;color:rgba(255,255,255,.46)!important;
  font-size:11px!important;line-height:1!important;transform:none!important;opacity:1!important;
}
.site-header .site-nav a[aria-current="page"]{color:#fff!important;background:rgba(255,255,255,.055)!important}
.site-header .site-nav a[aria-current="page"]:before{color:#9dc1ff!important}
.site-header.menu-open .site-nav a{opacity:1;transform:translateY(0)}
.site-header.menu-open .site-nav a:nth-child(1){transition-delay:.03s!important}
.site-header.menu-open .site-nav a:nth-child(2){transition-delay:.06s!important}
.site-header.menu-open .site-nav a:nth-child(3){transition-delay:.09s!important}
.site-header.menu-open .site-nav a:nth-child(4){transition-delay:.12s!important}
.site-header.menu-open .site-nav a:nth-child(5){transition-delay:.15s!important}
.site-header.menu-open{background:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}
.site-header.menu-open .brand-mark svg{stroke:#fff!important}
.site-header.menu-open .mobile-menu-toggle span{background:#fff!important}
body.menu-open{overflow:hidden}

@media (hover:hover){
  .site-header .site-nav a:hover{background:rgba(255,255,255,.055)!important}
}
@media (max-width:900px){
  .site-header .site-nav{
    padding:108px var(--pad) 54px!important;
  }
  .site-header .site-nav:before{top:88px;left:var(--pad)}
  .site-header .site-nav:after{top:112px;left:var(--pad);right:var(--pad)}
  .site-header .site-nav a,
  .site-header .site-nav a:nth-child(-n+4),
  .site-header .site-nav a:last-child{
    grid-template-columns:44px 1fr auto!important;
    min-height:66px!important;
    font-size:16px!important;
  }
}
@media (max-width:620px){
  .site-header .site-nav{padding:100px 20px 42px!important}
  .site-header .site-nav:before{top:82px;left:20px}
  .site-header .site-nav:after{top:105px;left:20px;right:20px}
  .site-header .site-nav a,
  .site-header .site-nav a:nth-child(-n+4),
  .site-header .site-nav a:last-child{
    grid-template-columns:38px 1fr auto!important;
    min-height:60px!important;
    font-size:15px!important;
  }
}


/* ========================================================================
   FINAL MOBILE MENU ENTRY
   Desktop keeps the header hamburger. Mobile uses a thumb-reachable,
   lightweight glass pill at the bottom center to open the same navigation.
   ======================================================================== */
.bottom-menu-toggle{
  display:none;
}

@media (max-width:620px){
  .site-header > .mobile-menu-toggle{
    display:none!important;
  }

  .bottom-menu-toggle{
    position:fixed;
    z-index:106;
    left:50%;
    bottom:max(16px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:126px;
    height:46px;
    padding:0 18px;
    border:1px solid rgba(24,34,46,.14);
    border-radius:999px;
    background:rgba(255,255,255,.78);
    color:var(--ink);
    box-shadow:0 8px 28px rgba(20,34,58,.10);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
    backdrop-filter:blur(12px) saturate(120%);
    font:inherit;
    cursor:pointer;
    transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
  }

  .bottom-menu-toggle-lines{
    display:flex;
    width:17px;
    flex-direction:column;
    gap:5px;
  }
  .bottom-menu-toggle-lines i{
    display:block;
    width:17px;
    height:1px;
    background:currentColor;
    transform-origin:center;
    transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .18s ease;
  }
  .bottom-menu-toggle-label{
    font-size:9px;
    line-height:1;
    font-weight:500;
    letter-spacing:.16em;
  }

  body.menu-open .bottom-menu-toggle{
    color:#fff;
    border-color:rgba(255,255,255,.28);
    background:rgba(10,30,78,.34);
    box-shadow:0 8px 30px rgba(4,18,54,.18);
  }
  body.menu-open .bottom-menu-toggle-lines i:first-child{
    transform:translateY(3px) rotate(45deg);
  }
  body.menu-open .bottom-menu-toggle-lines i:last-child{
    transform:translateY(-3px) rotate(-45deg);
  }

  .site-footer{
    padding-bottom:max(82px,calc(62px + env(safe-area-inset-bottom)))!important;
  }
  .site-footer.top-footer{
    padding-bottom:max(72px,calc(56px + env(safe-area-inset-bottom)))!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .bottom-menu-toggle,
  .bottom-menu-toggle-lines i{
    transition:none!important;
  }
}


/* FINAL HOME ROUTE CLARITY ----------------------------------------------
   Make the first global-navigation item unmistakably the route back to TOP.
   The menu already contains the link; this only strengthens its visual role. */
.site-header .site-nav a:first-child{
  font-weight:600!important;
}
.site-header .site-nav a:first-child:after{
  content:"TOP"!important;
  font-size:8px!important;
  letter-spacing:.16em!important;
  color:rgba(255,255,255,.58)!important;
}
.site-header .site-nav a:first-child[aria-current="page"]:after{
  content:"CURRENT"!important;
  color:#9dc1ff!important;
}