/* Layout refinements are deliberately restricted to phones and small tablets.
   The original stylesheet and all desktop rules remain unchanged. */
@media (min-width: 601px) and (max-width: 1024px) {
  .footer-bottom nav a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 850px) {
  html { scroll-padding-top: 84px; }
  [id] { scroll-margin-top: 0; }
  .nav-shell { min-height: 68px; padding-block: 10px; }
  .js-nav .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 12px 24px 16px;
    max-height: calc(100vh - 68px);
    max-height: calc(100svh - 68px);
    overflow-y: auto;
    background: var(--forest);
    border-bottom: 1px solid var(--dark-line);
    box-shadow: 0 12px 20px #0c231e20;
  }
  .site-nav a { min-height: 44px; }
  .finalized-hero .hero-art { height: 350px; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 80px; }
  [id], input, select, textarea { scroll-margin-top: 0; }
  .container { width: calc(100% - 40px); }
  .section { padding-block: 48px; }
  h1 { font-size: clamp(40px, 10vw, 48px); }
  h2 { font-size: clamp(31px, 8.2vw, 38px); }
  .eyebrow { margin-bottom: 16px; }
  .large-copy { font-size: 19px; }

  .nav-shell { min-height: 64px; gap: 8px; }
  .brand { gap: 10px; }
  .brand-mark { width: 32px; height: 32px; font-size: 29px; }
  .brand-type { font-size: 10.5px; }
  .brand-type small { font-size: 7px; line-height: 1.4; max-width: 125px; margin-top: 4px; }
  .menu-toggle { min-height: 44px; padding: 8px 13px; font-size: 12px; }
  .js-nav .site-nav { padding-inline: 20px; }

  .finalized-hero { padding-top: 24px; }
  .finalized-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .finalized-hero .hero-copy { padding-block: 0; }
  .finalized-hero .hero-wordmark { font-size: clamp(46px, 13vw, 60px); margin-bottom: 20px; }
  .finalized-hero .hero-copy h1 { font-size: clamp(24px, 6.4vw, 29px); line-height: 1.2; margin-bottom: 18px; }
  .finalized-hero h1 > span { font-size: .76em; line-height: 1.4; margin-top: 9px; }
  .finalized-hero .hero-intro { font-size: 15px; line-height: 1.65; margin-bottom: 16px; max-width: 38ch; }
  .finalized-hero .hero-tagline { font-size: 21px; line-height: 1.35; margin-bottom: 20px; }
  .finalized-hero .actions { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; }
  .finalized-hero .actions .button { min-height: 48px; width: 100%; padding: 11px 10px; font-size: 12px; gap: 8px; }
  .finalized-hero .hero-art { height: clamp(230px, 68vw, 292px); width: 100%; max-width: 390px; }
  .finalized-hero .orb { width: 132px; height: 132px; margin-left: -66px; top: 50px; }
  .finalized-hero .orbit-one { width: 220px; height: 110px; margin-left: -110px; top: 64px; }
  .finalized-hero .orbit-two { width: 140px; height: 200px; margin-left: -70px; top: 22px; }
  .finalized-hero .landscape-back { top: 184px; }
  .finalized-hero .landscape-front { top: 225px; }
  .finalized-hero .art-coordinate { top: 22px; }
  .finalized-hero .cross-one { top: 135px; left: 22px; }
  .finalized-hero .cross-two { top: 180px; right: 22px; }
  .hero-baseline { padding-block: 20px; gap: 12px; }
  .principle-strip .container { padding-block: 14px; row-gap: 4px; }

  .section-heading { margin-bottom: 26px; }
  .section-heading h2 { margin-bottom: 18px; }
  .section-heading p { font-size: 15px; line-height: 1.6; }
  .section-heading .text-link { margin-top: 6px; }
  .service-row { grid-template-columns: 22px minmax(0, 1fr) 34px; gap: 5px 12px; padding: 16px 0; min-height: 80px; }
  .service-row h3 { font-size: clamp(20px, 5.5vw, 23px); line-height: 1.18; }
  .service-row p { font-size: 13px; line-height: 1.5; }
  .service-row .row-arrow { width: 32px; height: 32px; font-size: 18px; }

  .project-grid { gap: 24px; }
  .project-art { height: clamp(260px, 78vw, 320px); }
  .project-art .mock-top { top: 22px; left: 22px; right: 22px; }
  .project-art .mock-top b { font-size: 24px; }
  .project-art .mock-title { top: 78px; left: 22px; font-size: clamp(34px, 9.5vw, 41px); }
  .project-art .mock-pill { top: 188px; left: 22px; padding: 8px 10px; font-size: 6.5px; }
  .project-art .mock-bottom { bottom: 18px; left: 22px; right: 22px; font-size: 7px; }
  .project-art .field-sun { width: 96px; height: 96px; right: 22px; top: 106px; }
  .project-art .hill-one { top: 208px; }
  .project-art .hill-two { top: 264px; }
  .project-art .forma-shape { width: 145px; height: 190px; right: 1px; top: 90px; }
  .project-art .shape-two { width: 90px; height: 135px; right: 88px; top: 168px; }
  .project-info { padding-block: 16px 12px; gap: 12px; }
  .project-info .eyebrow { margin-bottom: 6px; }
  .project-info h3 { font-size: 24px; margin-bottom: 5px; }
  .project-info p { font-size: 12px; }
  .round-arrow { margin-right: 4px; font-size: 23px; }
  .work-section .caption { margin-top: 12px; }

  .philosophy h2 { font-size: clamp(34px, 9vw, 39px); margin-top: 14px; }
  .philosophy .large-copy { font-size: 18px; line-height: 1.55; }
  .philosophy p { font-size: 15px; }
  .line-flower { font-size: 52px; }
  .process-grid { gap: 26px 20px; }
  .process-grid article { padding-top: 16px; }
  .process-grid article .eyebrow { margin-bottom: 16px; }
  .process-grid h3 { font-size: 19px; margin-bottom: 12px; }
  .process-grid p { font-size: 13px; line-height: 1.6; }

  .page-hero { padding-block: 36px; }
  .page-hero h1 { font-size: clamp(38px, 10vw, 48px); }
  .hero-bottom p { font-size: 15px; }
  .service-jump { padding-block: 12px; gap: 2px 18px; }
  .service-jump a { min-height: 44px; display: inline-flex; align-items: center; }
  .service-detail { padding-block: 38px; }
  .service-detail h2 { font-size: clamp(32px, 8.5vw, 39px); }
  .service-detail .large-copy { font-size: 18px; }
  .service-detail > div > p { font-size: 15px; }
  .scope-panel { padding: 22px; }
  .faq-grid h2 { margin-bottom: 24px; }
  .portfolio-intro { margin-bottom: 28px; }
  .portfolio-item { margin-bottom: 38px; padding-bottom: 38px; }
  .portfolio-item .project-art { height: clamp(280px, 82vw, 340px); margin-bottom: 22px; }
  .portfolio-item .mock-title { font-size: clamp(35px, 10vw, 43px); top: 82px; }
  .portfolio-item .mock-pill { top: 202px; }
  .portfolio-item .current .mock-title { font-size: clamp(33px, 9.5vw, 41px); }
  .portfolio-item .current .mock-pill { top: 218px; }
  .portfolio-item .current-bolt { height: 220px; width: 120px; top: 83px; }
  .project-description h2 { font-size: 33px; }
  .project-description > p:not(.eyebrow):not(.project-type) { font-size: 15px; }
  .about-grid { gap: 28px; }
  .about-art { height: 340px; }
  .about-art > p { font-size: 57px; }
  .about-grid h2 { font-size: 35px; }
  .about-grid p, .values-grid p, .collaboration-grid p { font-size: 15px; }
  .values-grid article { margin-bottom: 28px; }
  .value-symbol { margin-bottom: 16px; }

  .contact-section { padding-block: 36px 44px; gap: 28px; }
  .contact-copy h1 { font-size: clamp(46px, 12vw, 56px); margin-bottom: 22px; }
  .contact-direct { margin-top: 22px; padding-top: 18px; }
  .booking-placeholder { margin-top: 20px; gap: 14px; }
  .inquiry-panel { padding: 24px 20px; }
  .inquiry-panel h2 { font-size: 26px; }
  .field { margin-bottom: 18px; }
  .contact-next { padding-block: 38px; }
  .contact-next .process-grid { gap: 22px; }
  .legal-copy { padding-block: 36px 48px; }

  .closing-cta { padding-block: 34px; }
  .closing-cta > .container { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 18px; }
  .closing-cta .eyebrow { font-size: 8px; letter-spacing: .12em; margin-bottom: 12px; }
  .closing-cta h2 { font-size: clamp(27px, 7.2vw, 32px); line-height: 1.12; }
  .circle-link { width: 72px; height: 72px; margin: 0; gap: 5px; align-self: center; }
  .circle-link > span:first-child { font-size: 28px; }
  .circle-link > span:last-child { font-size: 7px; }
  .site-footer { padding-block: 30px 18px; }
  .footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px 12px; padding-bottom: 22px; }
  .footer-top > p { margin: 0; font-size: 17px; line-height: 1.35; justify-self: end; }
  .footer-top .brand { min-width: 0; }
  .footer-top .brand-type small { font-size: 6.5px; }
  .footer-email { grid-column: 1 / -1; font-size: 13px; min-height: 44px; padding-block: 8px; display: inline-flex; align-items: center; gap: 12px; }
  .footer-email span { margin-left: 0; }
  .footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-top: 16px; gap: 8px 12px; font-size: 10px; }
  .footer-bottom nav { grid-column: 1 / -1; gap: 0 18px; font-size: 12px; }
  .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .footer-bottom > span:last-child { grid-column: 2; grid-row: 1; text-align: right; }
}

@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .brand-type small { font-size: 6.5px; max-width: 118px; }
  .menu-toggle { padding-inline: 11px; }
  .finalized-hero .hero-copy h1 { font-size: 24px; }
  .finalized-hero .hero-intro { font-size: 14px; }
  .finalized-hero .hero-tagline { font-size: 20px; }
  .closing-cta > .container { grid-template-columns: minmax(0, 1fr) 64px; gap: 14px; }
  .circle-link { width: 64px; height: 64px; }
  .closing-cta h2 { font-size: 26px; }
  .footer-top { grid-template-columns: minmax(0, 1fr) 112px; gap: 16px 8px; }
  .footer-top > p { font-size: 15px; }
}