/* A separate editorial composition for phones. Desktop art direction is unchanged. */
.mobile-rail-controls { display: none; }

@media (max-width: 700px) {
  :root {
    --mobile-gutter: 24px;
    --type-title-size: clamp(42px, 12.2vw, 68px);
    --type-title-leading: 1.01;
    --type-section-size: clamp(42px, 11.8vw, 64px);
    --type-card-size: 27px;
  }
  [lang=zh-CN] {
    --type-title-size: clamp(37px, 10.6vw, 58px);
    --type-title-leading: 1.2;
    --type-section-size: clamp(36px, 10.3vw, 56px);
    --type-card-size: 25px;
  }
  html { scroll-padding-top: 100px; }
  .wrap { width: calc(100% - 2 * var(--mobile-gutter)); }
  .section { padding-block: 80px; }
  .header, .header.scrolled {
    position: fixed;
    height: 76px;
    padding-inline: var(--mobile-gutter);
    border: 0;
    background: #fff;
    backdrop-filter: none;
  }
  .header .brand { gap: 10px; }
  .header .brand-mark { width: 42px; height: 42px; }
  .header .brand-name { font-size: 8px; letter-spacing: .045em; }
  .header .brand-name small { font-size: 6px; }
  .header-actions { gap: 13px; }
  .header-cta { display: none; }
  .language { min-width: 44px; min-height: 44px; font-size: 10px; }
  .menu-toggle { display: block; position: relative; width: 44px; height: 44px; padding: 12px; background: #111; }
  .menu-toggle span { position: absolute; left: 12px; top: 17px; width: 20px; height: 1px; margin: 0; background: #fff; transition: transform .2s, top .2s; }
  .menu-toggle span:last-child { top: 25px; }
  .menu-toggle[aria-expanded=true] span { top: 21px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: rotate(-45deg); }
  .mobile-nav { inset: 76px 0 0; padding: 37px var(--mobile-gutter) max(28px, env(safe-area-inset-bottom)); background: #f0f0ec; overflow-y: auto; overscroll-behavior: contain; counter-reset: navigation; }
  .mobile-nav:not([hidden]) { gap: 0; }
  .mobile-nav > .eyebrow { margin-bottom: 25px; color: #777; font-size: 8px; }
  .mobile-nav > a:not(.button) { counter-increment: navigation; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-block: 13px; font-size: clamp(27px, 7.7vw, 43px); line-height: 1.12; letter-spacing: -.045em; }
  .mobile-nav > a:not(.button)::before { content: counter(navigation, decimal-leading-zero); padding-top: 5px; font: 8px/1.7 var(--mono); color: #888; letter-spacing: 0; }
  .mobile-nav .button { margin: 30px 0 0; width: 100%; min-height: 56px; font-size: 11px; }
  [lang=zh-CN] .mobile-nav > a:not(.button) { font-size: clamp(27px, 7.6vw, 40px); line-height: 1.25; }
  .eyebrow { font-size: 8px; letter-spacing: .06em; }
  .text-link { border: 0; min-height: 44px; }
  .button { min-height: 54px; }

  /* Cover: type, architectural image, then the introduction. */
  .home-hero { padding: 108px 0 0; }
  .home-hero .hero-topline { margin-bottom: 24px; align-items: start; gap: 20px; }
  .home-hero .hero-topline .eyebrow { font-size: 7px; line-height: 1.6; }
  .home-hero .hero-topline > span:first-child { max-width: 185px; }
  .home-hero .hero-topline > span:last-child { white-space: nowrap; }
  .home-hero .hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; margin: 0; }
  .home-hero .hero-content { display: contents; }
  .home-hero h1 { grid-row: 1; margin: 0 var(--mobile-gutter); font-size: clamp(51px, 16vw, 110px); line-height: .9; letter-spacing: -.075em; }
  .home-hero h1 > span:nth-child(2) { text-align: right; color: #8b8b85; }
  .home-hero .hero-visual { grid-row: 2; width: calc(100% - var(--mobile-gutter)); margin: 27px 0 0 var(--mobile-gutter); }
  .home-hero .hero-image-frame { height: min(95vw, 510px); }
  .home-hero .hero-visual img { object-position: center 61%; }
  .home-hero .hero-image-note { display: none; }
  .home-hero .hero-visual figcaption { margin: 14px var(--mobile-gutter) 0 0; font-size: 6px; gap: 12px; }
  .home-hero .hero-introduction { grid-row: 3; display: block; margin: 29px var(--mobile-gutter) 33px; }
  .home-hero .hero-description { max-width: 305px; font-size: 14px; line-height: 1.85; }
  .home-hero .hero-actions { display: flex; margin-top: 25px; gap: 8px; }
  .home-hero .button { width: 100%; min-height: 56px; padding: 18px 21px; }
  .home-hero .hero-secondary { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-size: 11px; color: #777; }
  .home-hero .hero-bottom { margin-top: 0; min-height: 64px; padding: 20px var(--mobile-gutter); font-size: 8px; }
  [lang=zh-CN] .home-hero h1 { font-size: clamp(63px, 19.7vw, 120px); line-height: 1.01; letter-spacing: -.07em; }

  /* A quieter opening statement and an unruled service directory. */
  #overview { padding-block: 82px 86px; }
  #overview .section-kicker { margin-bottom: 30px; }
  #overview h2 { font-size: clamp(42px, 12.1vw, 65px); line-height: 1.02; letter-spacing: -.06em; }
  #overview .intro-copy { margin-top: 35px; padding-left: 28px; max-width: none; }
  #overview .intro-copy .lead { font-size: 22px; line-height: 1.4; text-wrap: balance; margin-bottom: 22px; }
  #overview .intro-copy > p:not(.lead) { font-size: 13px; line-height: 1.9; }
  #overview .intro-copy > p:nth-of-type(3) { display: none; }
  #overview .intro-copy .text-link { width: 100%; min-width: 0; margin-top: 21px; padding: 16px 0; background: transparent; font-size: 9px; }
  [lang=zh-CN] #overview h2 { font-size: clamp(38px, 10.8vw, 60px); line-height: 1.2; }
  .home-business { padding-block: 77px 63px; background: #edede9; }
  .home-business-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-business-intro { display: block; }
  .home-business-intro > .eyebrow { margin-bottom: 27px; }
  .home-business-intro h2 { font-size: clamp(40px, 11.6vw, 62px); line-height: 1.04; }
  .home-business-intro .text-link { margin-top: 17px; font-size: 9px; }
  .home-business-image { width: calc(100% + var(--mobile-gutter)); margin-left: calc(-1 * var(--mobile-gutter)); }
  .home-business-image img { height: min(78vw, 420px); object-position: center 56%; }
  .home-business-image figcaption { margin: 15px 0 0 var(--mobile-gutter); font-size: 7px; }
  .home-service-list { margin: 3px 0 0; gap: 4px; }
  .home-service-list a, .home-service-list a:nth-child(even) { grid-template-columns: 20px minmax(0, 1fr) 24px; min-height: 78px; padding: 20px 0; gap: 15px; font-size: 25px; font-weight: 600; line-height: 1.1; letter-spacing: -.04em; background: transparent; }
  .home-service-list a::before { font-size: 8px; }
  .home-service-list a > span:last-child { font-size: 26px; font-weight: 400; }
  .home-service-list a:hover { color: #555; }
  [lang=zh-CN] .home-business-intro h2 { font-size: clamp(37px, 10.5vw, 58px); line-height: 1.2; }
  [lang=zh-CN] .home-service-list a { font-size: 23px; line-height: 1.25; }

  /* Deliberate, touch-first membership decks; every price and term stays visible. */
  .home-pricing { padding-block: 76px 65px; }
  .home-pricing .section-heading { margin-bottom: 35px; }
  .home-pricing .section-heading h2 { font-size: clamp(43px, 12vw, 66px); line-height: 1.02; }
  .home-pricing .section-aside { display: none; }
  .home-plan-grid.mobile-rail, .membership .pricing-grid.mobile-rail {
    display: flex;
    width: calc(100% + var(--mobile-gutter));
    gap: 12px;
    padding: 6px var(--mobile-gutter) 10px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    align-items: stretch;
  }
  .mobile-rail::-webkit-scrollbar { display: none; }
  .home-pricing .home-plan, .membership .mobile-rail .price-card {
    flex: 0 0 calc(100% - 12px);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .home-pricing .home-plan { padding: 28px 25px 25px; min-height: 390px; background: #eaeae6; color: #111; }
  .home-pricing .home-plan > .eyebrow { color: #777; font-size: 8px; }
  .home-pricing .home-plan h3 { font-size: 36px; line-height: 1.1; margin-top: 24px; }
  .home-pricing .home-plan-description { color: #626262; font-size: 13px; line-height: 1.8; }
  .home-pricing .home-plan-price { margin-top: 28px; gap: 6px; }
  .home-pricing .home-plan-price > span { font-size: 54px; }
  .home-pricing .home-plan-price > small, .home-pricing .home-plan-term { color: #666; }
  .home-pricing .home-plan-term { margin-bottom: 27px; font-size: 8px; }
  .home-pricing .home-plan > a { background: #111; color: #fff; min-height: 53px; padding: 15px 17px; font-size: 11px; }
  .mobile-rail-controls { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 11px; color: #aaa; font: 8px/1.6 var(--mono); }
  .mobile-rail-controls > div { display: flex; gap: 14px; align-items: center; }
  .mobile-rail-controls button { width: 44px; height: 44px; background: #292929; color: #fff; font: 23px/1 var(--sans); }
  .mobile-rail-controls button:disabled { color: #666; cursor: default; }
  .mobile-rail-controls output { min-width: 39px; text-align: center; font-variant-numeric: tabular-nums; }
  .home-pricing-foot { margin-top: 28px; gap: 21px; }
  .home-pricing-foot > span { font-size: 8px; }
  .home-pricing-foot > .button { width: 100%; min-height: 55px; }
  [lang=zh-CN] .home-pricing .section-heading h2 { font-size: clamp(37px, 10.5vw, 58px); line-height: 1.2; }

  /* One full editorial cover, followed by two compact reading entries. */
  .insights { background: #fff; border: 0; }
  .insights .section-heading { margin-bottom: 38px; }
  .insights .section-heading h2 { font-size: clamp(41px, 11.8vw, 63px); line-height: 1.05; }
  .insights .section-aside { max-width: 290px; font-size: 13px; line-height: 1.85; margin-top: 21px; }
  .insights .insight-grid { display: block; border: 0; }
  .insights .insight-grid .insight-card, .insights .insight-grid .insight-card:first-child, .insights .insight-grid .insight-card:last-child { border: 0; padding: 0; min-height: 0; background: transparent; }
  .insights .insight-grid .insight-card:first-child { display: flex; }
  .insights .insight-grid .insight-card:first-child .insight-media { height: min(104vw, 480px); margin-bottom: 24px; }
  .insights .insight-grid .insight-card:first-child .insight-meta { margin: 0 0 16px; }
  .insights .insight-grid .insight-card:first-child .insight-title { font-size: 34px; line-height: 1.1; max-width: none; }
  .insights .insight-summary { font-size: 13px; line-height: 1.8; max-width: none; margin-top: 16px; }
  .insights .insight-read { padding-top: 22px; font-size: 8px; }
  .insights .insight-number { display: none; }
  .insights .insight-grid .insight-card:not(:first-child) { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 21px; margin-top: 39px; }
  .insights .insight-grid .insight-card:not(:first-child) .insight-media { grid-column: 1; grid-row: 1/3; height: 135px; min-height: 0; max-height: none; margin: 0; }
  .insights .insight-grid .insight-card:not(:first-child) .insight-meta { grid-column: 2; margin: 4px 0 14px; }
  .insights .insight-grid .insight-card:not(:first-child) .insight-title { grid-column: 2; font-size: 24px; line-height: 1.13; }
  .insights .insight-card:not(:first-child) .insight-summary, .insights .insight-card:not(:first-child) .insight-read { display: none; }
  [lang=zh-CN] .insights .section-heading h2 { font-size: clamp(36px, 10.2vw, 55px); line-height: 1.2; }
  [lang=zh-CN] .insights .insight-grid .insight-card:first-child .insight-title { font-size: 30px; line-height: 1.3; }
  [lang=zh-CN] .insights .insight-grid .insight-card:not(:first-child) .insight-title { font-size: 22px; line-height: 1.3; }

  .home-contact { padding-block: 76px; background: #e8e8e3; }
  .home-contact-top { margin-bottom: 39px; }
  .home-contact-top > .eyebrow { font-size: 7px; }
  .home-contact-layout { display: block; }
  .home-contact h2 { font-size: clamp(68px, 20.5vw, 120px); line-height: .91; letter-spacing: -.065em; }
  .home-contact-aside { margin-top: 39px; }
  .home-contact-aside > p { max-width: 290px; font-size: 13px; line-height: 1.85; margin-bottom: 29px; }
  .home-contact-link { min-height: 65px; padding: 20px 22px; font-size: 15px; }
  .home-contact-link.secondary { background: transparent; padding-inline: 0; margin-top: 3px; }
  [lang=zh-CN] .home-contact h2 { font-size: clamp(58px, 17.6vw, 100px); line-height: 1.08; }

  /* Secondary pages use the same art direction with readable long-form content. */
  .page-section, .page-section.section { padding-top: 114px; }
  .breadcrumbs { font-size: 8px; margin-bottom: 38px; gap: 11px; }
  .page-section .section-heading { margin-bottom: 38px; }
  .page-section .section-heading .section-aside { max-width: 305px; margin-top: 26px; font-size: 13px; line-height: 1.85; }
  .page-section .intro-layout { display: block; }
  .page-section.intro .intro-copy { margin-top: 34px; padding: 0 0 0 22px; }
  .page-section.intro .intro-foot { margin-top: 36px; padding-top: 0; border: 0; font-size: 7px; gap: 15px; }
  .agency-visuals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 39px; margin-top: 46px; }
  .agency-frame:first-child { width: calc(100% + var(--mobile-gutter)); margin-left: calc(-1 * var(--mobile-gutter)); }
  .agency-frame:first-child img { aspect-ratio: 4/5; height: auto; }
  .agency-frame:first-child figcaption { margin-left: var(--mobile-gutter); }
  .agency-frame:last-child { width: 82%; justify-self: end; }
  .agency-frame:last-child img { aspect-ratio: 3/4; height: auto; }
  .agency-frame figcaption { font-size: 6px; }
  .agency-frame figcaption > span:last-child { display: none; }
  .manifesto h2 { font-size: clamp(42px, 11.6vw, 64px); line-height: 1.05; }
  [lang=zh-CN] .manifesto h2 { font-size: clamp(36px, 10vw, 56px); line-height: 1.3; }
  .expertise-layout { display: block; }
  .atelier { width: calc(100% + var(--mobile-gutter)); margin-left: calc(-1 * var(--mobile-gutter)); }
  .atelier img { width: 100%; height: min(88vw, 460px); aspect-ratio: auto; object-position: center 58%; }
  .atelier figcaption { margin-left: var(--mobile-gutter); font-size: 6px; }
  .service-list { margin-top: 34px; border: 0; }
  .service { background: #e6e6e2; border: 0; margin-bottom: 9px; padding: 23px 20px; }
  .service[open] { background: #fff; }
  .service summary { grid-template-columns: 18px minmax(0, 1fr) 20px; gap: 12px; }
  body[data-page=services] .service h3 { font-size: 26px; line-height: 1.15; }
  .service-content { padding: 21px 0 0 30px; }
  .service-content > p { font-size: 13px; line-height: 1.85; }
  .service-tags { gap: 8px 12px; }
  .service-tags span { font-size: 7px; }
  .world-note, .platform-row { border: 0; }
  .steps { margin-top: 35px; }
  .steps article { border: 0; background: #f0f0ec; padding: 26px 24px 28px 50px; margin-bottom: 10px; }
  .steps article > span { left: 21px; top: 31px; }
  .steps article:last-child { padding-bottom: 28px; }

  .talent-layout { display: block; }
  .talent-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; }
  .talent-tab { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 17px; padding: 19px 17px; min-height: 137px; border: 0; background: #eeeeea; color: #777; }
  body[data-page=creators] .talent-tab > strong { font-size: 22px; line-height: 1.1; letter-spacing: -.035em; }
  .talent-tab > span:first-child { font-size: 7px; }
  .talent-tab > span:last-child { display: none; }
  .talent-tab[aria-selected=true] { background: #111; color: #fff; }
  .talent-tab[aria-selected=true] > span:first-child { color: #aaa; }
  .talent-side-note { margin: 22px 0 30px; font-size: 11px; }
  .talent-panel { border: 0; padding: 28px 24px; background: #f0f0ec; }
  .talent-panel-index { font-size: 55px; color: #c0c0b8; }
  .talent-steps li { border: 0; padding-block: 10px; font-size: 13px; line-height: 1.75; }
  .talent-actions .button { min-height: 54px; }
  .talent-foot { border: 0; }
  [lang=zh-CN] body[data-page=creators] .talent-tab > strong { font-size: 22px; line-height: 1.3; }

  .membership .price-tabs { gap: 6px; margin-inline: 0 calc(-1 * var(--mobile-gutter)); padding-inline: 0 var(--mobile-gutter); scrollbar-width: none; }
  .membership .price-tabs::-webkit-scrollbar { display: none; }
  .membership .price-tab { font-size: 11px; padding: 15px 18px; min-height: 48px; }
  .membership .pricing-intro { margin: 24px 0 22px; }
  .membership .pricing-intro p { font-size: 12px; line-height: 1.8; }
  .membership .mobile-rail .price-card { padding: 28px 24px 25px; min-height: 520px; }
  .membership .plan-top { margin-bottom: 26px; }
  body[data-page=pricing] .membership .price-card h3 { font-size: 34px; }
  .membership .plan-price { font-size: 45px; gap: 6px; margin-top: 24px; }
  .membership .price-range { font-size: 32px; }
  .membership .plan-term { font-size: 8px; }
  .membership .plan-features { display: block; font-size: 12px; line-height: 1.8; margin-bottom: 27px; }
  .membership .plan-features li { margin: 10px 0; }
  .membership .plan-select { min-height: 54px; font-size: 11px; }
  .membership .pricing-note { font-size: 11px; line-height: 1.9; margin-top: 28px; }
  .membership .price-actions { align-items: stretch; }
  .membership .price-actions .text-link { justify-content: space-between; font-size: 9px; min-height: 53px; }
  .signature-row { border: 0; background: #eee; margin-bottom: 12px; padding: 26px 19px; }
  .faq-item, .faq-item:first-child { border: 0; background: #f0f0ec; padding: 22px; margin-bottom: 8px; }
  .faq-item summary { font-size: 14px; }
  .faq-item p { font-size: 13px; padding: 0; }
  .page-cta { padding-block: 62px; }
  .page-cta > .wrap { display: block; }
  .page-cta-links { margin-top: 32px; }
  .page-cta .button { min-height: 56px; }

  .article-lead { display: flex; flex-direction: column; gap: 32px; align-items: stretch; }
  .article-summary { font-size: 15px; line-height: 1.8; margin-top: 25px; }
  .article-cover { width: calc(100% + var(--mobile-gutter)); margin-right: calc(-1 * var(--mobile-gutter)); }
  .article-cover img { height: min(110vw, 530px); object-position: center 60%; }
  .article-reading { margin-top: 44px; }
  .article-reading p { font-size: 15px; line-height: 1.95; }
  .article-reading h2 { font-size: 27px; line-height: 1.2; }
  .article-navigation { margin-top: 49px; padding: 27px 24px; border: 0; background: #efefeb; }
  .contact-intro { position: static; }
  .contact-layout { display: block; }
  .contact-intro > p:not(.eyebrow) { max-width: 300px; }
  .contact-form-shell { margin-top: 37px; padding: 28px 22px; background: #eeeee9; }
  .contact-form-shell input, .contact-form-shell select, .contact-form-shell textarea { font-size: 16px; min-height: 50px; border: 0; background: #fff; }
  .contact-form-shell .button { min-height: 56px; }
  .field-row { display: block; }
  .contact-details { font-size: 8px; }
  .contact-form-body .dialog-subtitle { font-size: 13px; line-height: 1.85; }
  dialog .dialog-body { padding-inline: 24px; }
  .dialog-close { width: 44px; height: 44px; }
  .search-field input { font-size: 16px; }

  .footer { padding: 52px 0 28px; }
  .footer-top { gap: 23px; padding-bottom: 23px; }
  .footer-top .brand-mark { width: 54px; height: 54px; }
  .footer-top > p { font-size: 17px; max-width: 270px; line-height: 1.5; }
  .back-top { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-directory { grid-template-columns: 1fr 1fr; gap: 28px 20px; border: 0; padding-block: 23px; }
  .footer-directory > div { gap: 6px; }
  .footer-directory > div:last-child { grid-column: 1/-1; }
  .footer-directory a { font-size: 12px; min-height: 35px; display: flex; align-items: center; }
  .footer-directory .eyebrow { font-size: 7px; }
  .footer-bottom { border: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding-top: 16px; font-size: 7px; }
  .footer-bottom > div { gap: 24px; }
  .footer-bottom button { min-height: 36px; font-size: 9px; }
}

@media (max-width: 360px) {
  :root { --mobile-gutter: 20px; }
  .header .brand-name { font-size: 7px; }
  .header .brand { gap: 7px; }
  .header-actions { gap: 7px; }
  #overview .intro-copy { padding-left: 14px; }
  .insights .insight-grid .insight-card:not(:first-child) { grid-template-columns: 86px minmax(0, 1fr); gap: 16px; }
  .insights .insight-grid .insight-card:not(:first-child) .insight-title { font-size: 22px; }
  body[data-page=creators] .talent-tab > strong { font-size: 20px; }
  .home-pricing .home-plan, .membership .mobile-rail .price-card { padding-inline: 21px; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  html, .mobile-rail { scroll-behavior: auto; }
  .menu-toggle span { transition: none; }
}