/* Phone-first refinement of the approved desktop design. */
button,a,select{-webkit-tap-highlight-color:transparent}
button,a[href],select{touch-action:manipulation}
.wechat-dialog{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.dialog-close-row{position:sticky;top:0;z-index:1;background:var(--cream-2)}
.dialog-body img{height:auto}
section[tabindex="-1"]:focus{outline:none}

@media(max-width:820px){
  :root{
    --header-h:calc(68px + env(safe-area-inset-top,0px));
    --phone-gutter:clamp(20px,6.15vw,32px);
    --phone-left:max(var(--phone-gutter),env(safe-area-inset-left,0px));
    --phone-right:max(var(--phone-gutter),env(safe-area-inset-right,0px));
    --page:var(--phone-gutter);
  }
  html{scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{padding-bottom:0;font-size:16px;line-height:1.8}
  .site-header,.site-header.is-scrolled{
    height:var(--header-h);
    padding:env(safe-area-inset-top,0px) var(--phone-right) 0 var(--phone-left);
    background:#faf8f3;
    box-shadow:0 1px 0 #253f3514;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .brand{gap:15px;min-height:44px}
  .brand-en,.site-header.is-scrolled .brand-en{padding-left:15px;font-size:17px}
  .menu-button{min-width:48px;min-height:44px;border-radius:12px;background:transparent;font-size:14px}
  .primary-nav{
    position:absolute;
    inset:100% 0 auto;
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px var(--phone-right) calc(20px + env(safe-area-inset-bottom,0px)) var(--phone-left);
    background:#faf8f3;
    box-shadow:0 18px 24px #173d3112;
  }
  .primary-nav a{min-height:56px;font-family:var(--serif);font-size:20px;letter-spacing:.1em}
  .primary-nav a[aria-current="location"]{color:#315f49;font-weight:900}

  .hero{padding-top:var(--header-h)}
  .hero-scene{height:clamp(260px,74vw,410px)}
  .hero-scene img{object-position:25% center}
  .hero-story{padding:27px var(--phone-right) 28px var(--phone-left)}
  .person-line{font-size:21px;line-height:1.5;letter-spacing:.03em}
  .person-line span{font-size:18px}
  .role-line{font-size:13px;letter-spacing:.045em;margin:6px 0 22px;line-height:1.7}
  .hero h1{font-size:clamp(33px,9.1cqw,52px);line-height:1.22;letter-spacing:-.04em}
  .hero h1::after{right:0;bottom:-19px;width:130px;height:39px}
  .hero-lead{font-family:var(--sans);font-size:15px;line-height:1.8;letter-spacing:0;margin-top:25px;max-width:30em}
  .hero-actions{margin-top:22px}
  .hero-actions .primary-button{min-height:52px;height:auto;font-size:17px;background:#315b43}
  .hero-actions .primary-button img{width:25px;height:25px}
  .hero-steps{padding:24px var(--phone-right) 28px var(--phone-left);gap:0;background:#f0f0e7;border-top:0}
  .hero-step,.hero-step:first-child{padding:0 12px;gap:10px}
  .hero-step:first-child{padding-left:0}
  .hero-step:last-child{padding-right:0}
  .hero-step + .hero-step{border-left:1px solid #cdd2c3}
  .step-number{font-size:26px;color:#697760}
  .hero-step h2{font-size:15px;white-space:nowrap;line-height:1.5}
  .hero-step p{font-family:var(--sans);font-size:12px;line-height:1.8;color:#60695e}

  .section{padding:58px var(--phone-right) 60px var(--phone-left)}
  .section-kicker{font-size:12px;letter-spacing:.2em;margin-bottom:18px}
  .section-title{font-size:clamp(32px,8.7vw,46px);font-weight:900;line-height:1.3;letter-spacing:-.035em}
  .about-grid{gap:26px}
  .about-copy{font-size:20px;line-height:1.85;letter-spacing:0}
  .about-meta{margin-top:22px;font-size:13px;line-height:1.9}
  .about-principles{gap:0;margin-top:6px}
  .principle{display:grid;grid-template-columns:90px minmax(0,1fr);gap:15px;padding:22px 0}
  .principle:last-child{padding-bottom:0}
  .principle b{margin:0;font-size:18px;line-height:1.8}
  .principle p{font-size:15px;line-height:1.85}

  .services.section{padding:0}
  .services .needs-heading{padding:44px var(--phone-right) 30px var(--phone-left)}
  .services .needs-kicker{font-size:12px;letter-spacing:.18em}
  .services .needs-heading h2{font-size:clamp(32px,8.7vw,48px);line-height:1.25;letter-spacing:-.035em}
  .services .needs-intro{font-size:15px;line-height:1.85;margin-top:18px}
  .services .needs-landscape{height:clamp(175px,49vw,300px);object-position:62% bottom}
  .services .needs-annotation{right:var(--phone-right);font-size:12px;bottom:12px}
  .services .needs-tabs{padding:12px 8px 0;gap:0;min-height:0;background:#faf8f3}
  .services .needs-tab{padding:16px 5px 17px;min-height:88px;align-items:center;text-align:center;border-bottom:3px solid transparent}
  .services .needs-tab + .needs-tab::before{content:none}
  .services .needs-tab[aria-selected="true"]{background:#edf0e5;border-bottom-color:#315b43}
  .services .needs-number{font-size:18px;line-height:1.1}
  .services .needs-name{font-size:clamp(12px,3.6vw,17px);line-height:1.7;max-width:none;white-space:nowrap;margin-top:7px;letter-spacing:-.02em}
  .services .needs-categories,.services .needs-indicator{display:none}
  .services .needs-detail{padding:30px var(--phone-right) 32px var(--phone-left)}
  .services .needs-service-heading{gap:8px;font-size:14px;flex-wrap:wrap}
  .services .needs-service-divider,.services .needs-picker,.services [data-service-single]{display:none!important}
  .services .needs-service-copy h3{font-size:clamp(27px,7.7vw,38px);line-height:1.38;letter-spacing:-.04em;margin-top:16px}
  .services .needs-service-copy>p{font-family:var(--sans);font-size:15px;line-height:1.9;margin-top:18px}
  .services .needs-scope-label{font-size:14px;letter-spacing:.03em}
  .services .needs-scope-items{font-size:15px;line-height:2}
  .services .needs-consult{min-height:52px;font-size:17px;box-shadow:none}
  .services .needs-closing{min-height:0;padding:22px var(--phone-right) 26px var(--phone-left);font-family:var(--sans);font-size:13px;gap:12px;letter-spacing:0}

  .process-head{margin-bottom:28px}
  .process-note{font-size:15px;line-height:1.9;margin-top:22px}
  .process-item{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:10px;padding:25px 0}
  .process-item::before{grid-column:1;grid-row:1/3;align-self:start;margin:4px 0 0;font-size:30px;color:#6f7d63}
  .process-item h3{grid-column:2;margin:0;font-size:23px;line-height:1.5}
  .process-item p{grid-column:2;font-size:15px;line-height:1.85}

  .promise.section{padding:0}
  .promise-copy{padding:46px var(--phone-right) 30px var(--phone-left)}
  .promise-kicker{font-size:12px;line-height:1.8;letter-spacing:.07em;margin-bottom:22px}
  .promise-kicker span[lang]{letter-spacing:.12em}
  .promise-quote{font-size:clamp(30px,8.1vw,48px);line-height:1.4;letter-spacing:-.045em}
  .promise-quote span:first-child{text-indent:-.5em}
  .promise-description{font-size:16px;line-height:1.85;margin-top:24px}
  .promise-consult{width:100%;max-width:360px;min-height:52px;margin-top:26px;font-size:17px}
  .promise-author{margin-top:18px;font-size:15px}
  .promise-photo{height:clamp(235px,65vw,380px);object-position:right center}
  .promise-principles{padding:6px var(--phone-right) 28px var(--phone-left)}
  .promise-principle,.promise-principle + .promise-principle{padding:26px 0}
  .promise-value{font-size:14px;letter-spacing:.07em}
  .promise-principle h3{font-size:clamp(22px,5.85vw,30px);line-height:1.5}
  .promise-detail{font-family:var(--sans);font-size:15px;line-height:1.8;margin-top:8px}

  .contact{background:#e1eae4}
  .contact::before{opacity:.07}
  .contact-grid{gap:28px}
  .contact-title{font-size:clamp(32px,8.7vw,46px)}
  .contact-lead{font-size:16px;line-height:1.9;margin-top:22px}
  .contact-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
  .contact-actions .primary-button{grid-column:1/-1;min-width:0;min-height:54px;box-shadow:none;font-size:17px}
  .contact-actions .outline-button{min-width:0;min-height:50px;padding:10px 8px;font-size:15px;background:#ffffff40}
  .phone-line{width:max-content;max-width:100%;font-size:23px;letter-spacing:.04em;margin-top:24px;min-height:44px;display:flex;align-items:center}
  .status{margin:6px 0 0;min-height:0;font-size:13px;line-height:1.8}
  .status:empty{display:none}
  .contact-card{padding:26px 22px 18px;max-width:380px;justify-self:center;box-shadow:none;background:#fffdf8c7;border-color:#cbd6ca;border-radius:12px;backdrop-filter:none}
  .contact-card img{width:176px;height:auto;margin-bottom:18px}
  .contact-card strong{font-size:20px}
  .contact-card p{font-size:14px;line-height:1.8;margin:10px 0 16px}
  .save-qr{min-height:48px;font-size:15px}
  .site-footer{gap:10px;padding:28px var(--phone-right) calc(28px + env(safe-area-inset-bottom,0px)) var(--phone-left);font-size:12px;line-height:1.9;color:#e2e9df}

  .wechat-dialog{width:calc(100% - 32px);max-width:400px;border-radius:18px;margin:auto}
  .dialog-close-row{padding:12px 12px 0}
  .dialog-close{min-height:44px;min-width:52px}
  .dialog-body{padding:10px 24px calc(28px + env(safe-area-inset-bottom,0px))}
  .dialog-body h2{font-size:26px;line-height:1.5}
  .dialog-body p{font-size:15px;line-height:1.8;margin:10px 0 18px}
  .dialog-body img{width:min(56vw,220px)}
  .dialog-body .primary-button{min-width:0;min-height:52px;font-size:16px;box-shadow:none}
  .reveal{transform:translateY(14px);transition-duration:.45s}
  .reveal.is-visible{transform:none}
}
@media(max-width:360px){
  .hero-step,.hero-step:first-child{padding-right:8px}
  .hero-step + .hero-step{padding-left:8px}
  .hero-step h2{font-size:14px}
  .hero-step p{font-size:12px}
  .principle{grid-template-columns:1fr;gap:7px;padding:20px 0}
  .role-line{font-size:12px}
  .promise-kicker{font-size:11px}
}
@media(max-width:820px) and (max-height:500px) and (orientation:landscape){
  .hero-scene{height:230px}
  .primary-nav{padding-top:4px;padding-bottom:10px}
  .primary-nav a{min-height:48px}
  .dialog-body img{width:150px}
}
@media(hover:none){
  .primary-button:hover,.hero-actions .primary-button:hover,.promise-consult:hover,.services .needs-consult:hover{transform:none;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transform:none}
}
