@media (min-width: 640px) {
  body{background:#fcfcf9}
  main{max-width:none}
  .hero{
    min-height:705px;
    background-color:#233a2b;
    background-image:linear-gradient(90deg,rgba(16,34,24,.64) 0%,rgba(16,34,24,.40) 37%,rgba(16,34,24,.10) 70%,rgba(16,34,24,.06) 100%),url('/studio-sunlit.webp');
    background-size:cover;
    background-position:center 60%;
  }
  .hero:before{inset:110px 6% 0;background-size:25% 180px}
  .hero header{max-width:1320px;width:calc(100% - 56px);top:20px;padding:13px 24px}
  .hero .copy{max-width:620px;padding:clamp(150px,22svh,220px) 0 110px;margin-left:clamp(42px,7vw,105px)}
  .hero .eyebrow{font-size:11px;letter-spacing:2.4px}
  .hero h1{font-size:clamp(50px,7.2vw,78px);letter-spacing:-.045em;line-height:1.02;margin:24px 0 32px}
  .hero .note{font-size:14px;max-width:none}
  .hero-buttons{max-width:370px}
  .hero .hero-buttons .pill{font-size:15px;min-height:58px}
  .sheet{border-radius:52px 52px 0 0}
  #services.editorial-services{padding:80px clamp(42px,7vw,105px) 85px}
  #services h2{font-size:clamp(42px,5.5vw,64px);letter-spacing:-.045em}
  #services .editorial-lead{font-size:19px;max-width:620px}
  #services .editorial-eligibility{font-size:17px;max-width:620px}
  #services .editorial-rows li{padding:27px 0}
  .section{padding:80px clamp(42px,7vw,105px)}
  .section h2{font-size:clamp(42px,5.5vw,64px);letter-spacing:-.045em}
  .dark{border-radius:45px;margin:0 clamp(18px,3vw,44px)}
  .dark .process-intro{font-size:18px;max-width:640px}
  .practice-story{max-width:1100px;margin:0 auto}
  .practice-scene{gap:24px;padding:55px 0 65px}
  .practice-heading{min-height:0}
  .practice-heading h3{font-size:clamp(32px,3.8vw,43px);max-width:none;min-height:0}
  .practice-visual{width:min(100%,760px);margin:0}
  .practice-caption{font-size:17px;max-width:570px;min-height:0}
  #about>p:not(.eyebrow){max-width:650px;font-size:18px}
  .founder-profiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:42px}
  .founder-photo{aspect-ratio:5/4;object-position:center 26%}
  .founder-bio{padding:30px}
  .faq{padding-block:clamp(48px,5vw,80px)}
  .faq summary{font-size:20px}
  .faq p{font-size:17px;max-width:760px}
  .closing{margin:0 clamp(18px,3vw,44px);padding:80px 42px;border-radius:45px}
  .closing>p:not(.eyebrow){max-width:640px;margin-left:auto;margin-right:auto;font-size:17px}
  .closing-buttons{grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px}
  footer{padding:50px clamp(42px,7vw,105px);font-size:13px}
}

@media (min-width: 960px) {
  .hero header,.hero header:has(.menu[open]){width:calc(100% - 80px);padding:12px 28px;align-items:center}
  .hero header{
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* Give the header and dropdown independent layers so both blur the studio behind them. */
  .hero header::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    pointer-events:none;
  }
  .hero header::before,.hero .menu .menu-panel{
    background:var(--header-glass-tint);
    backdrop-filter:var(--header-glass-blur);
    -webkit-backdrop-filter:var(--header-glass-blur);
  }
  .hero header .brand{font-size:26px}
  .hero header .header-emblem{width:36px;height:46px}
  .hero .menu summary{min-width:44px;min-height:44px}
  .hero .menu .menu-panel{
    top:calc(100% + 8px);
    left:auto;
    right:0;
    width:248px;
    padding:8px;
    border:1px solid #ffffff26;
    border-radius:18px;
    box-shadow:0 12px 36px #10251d33;
  }
  .hero .menu .menu-panel a{text-shadow:0 1px 3px #10251d,0 0 6px #10251dcc}
  #services.editorial-services{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);column-gap:clamp(65px,10vw,160px);align-items:start;padding-top:110px;padding-bottom:115px}
  #services>.eyebrow{grid-column:1;grid-row:1}
  #services>h2{grid-column:1;grid-row:2}
  #services>.editorial-lead{grid-column:1;grid-row:3}
  #services>.editorial-eligibility{grid-column:1;grid-row:4}
  #services>.editorial-offer{grid-column:2;grid-row:1 / span 4;margin-top:0}
  #services .editorial-rows li:first-child{padding-top:18px}
  #services .editorial-note{font-size:22px}
  .dark{padding-top:100px;padding-bottom:100px}
  .founder-profiles,.faq > h2,.faq > details{max-width:1300px}
  .founder-profiles{gap:32px}
  .founder-bio{padding:36px}
  .founder-bio p{font-size:16px}
}

@media (min-width: 1500px) {
  #services.editorial-services,.section:not(.dark):not(.closing),footer{padding-left:max(7vw,calc((100vw - 1380px)/2));padding-right:max(7vw,calc((100vw - 1380px)/2))}
}

@media (min-width: 640px) and (max-height: 700px) {
  .hero .copy{padding-top:135px}
  .hero h1{font-size:clamp(46px,6vw,65px);margin:18px 0 22px}
}

@media (min-width: 640px) and (max-width: 1199px) and (min-aspect-ratio: 1 / 1) {
  .hero .copy{padding-top:clamp(128px,18svh,176px)}
  .hero h1{font-size:clamp(46px,6.1vw,70px)}
}

/* On upright screens, keep the camera in view and reserve the wall for copy. */
@media (min-width: 640px) and (max-aspect-ratio: 1 / 1) {
  .hero{background-position:74% center}
  .hero .copy{
    max-width:min(46vw,420px);
    margin-left:clamp(28px,5vw,64px);
    padding-top:clamp(124px,16svh,178px);
  }
  .hero h1{font-size:clamp(39px,5.8vw,64px)}
}