/* Phone art direction. Desktop composition and the original diagonal wall are preserved. */
@media (max-width:767px) {
  :root { --studio-gutter:24px; --mobile-film-scale:1.55; }
  body>header.studio-header.studio-header--signature {
    left:16px; right:16px; width:auto; max-width:none;
    top:max(12px,env(safe-area-inset-top)); min-height:62px;
    padding:6px 7px 6px 13px; border-radius:19px;
  }
  body .studio-header.studio-header--signature .monogram { min-height:48px; }
  body .studio-header.studio-header--signature #menu-toggle { min-height:46px; min-width:94px; }
  body .studio-header.studio-header--signature #navigation { width:100%; max-width:none; padding:12px; border-radius:20px; }
  body .studio-header.studio-header--signature #navigation a { min-height:64px; font-size:17px; }
  body .studio-header.studio-header--signature #navigation button { min-height:54px; font-size:13px; }
  .hero__copy { --mobile-copy-top:clamp(108px,13svh,124px); left:24px; right:24px; }
  .hero__copy .eyebrow { font-size:9px; letter-spacing:.18em; margin-bottom:17px; }
  .hero__copy h1 { font-size:clamp(40px,12.2vw,56px); line-height:1.02; letter-spacing:-.06em; }
  .hero__copy h1 .brand-tail { line-height:1.08; }
  .hero__details, .is-static .hero__details { top:calc(47svh + 46.209375vw + 18px - var(--mobile-copy-top)); }
  .hero__lede { font-size:14px; line-height:1.6; margin:0 0 21px; max-width:38ch; color:#d3cbd5; }
  .hero__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hero__actions .studio-primary { min-height:52px; padding:0 14px; gap:10px; font-size:11px; border-radius:13px; white-space:nowrap; }
  .hero__actions .studio-text-link { justify-content:center; min-height:52px; padding:0 10px; gap:8px; font-size:11px; border:1px solid #d8c1a035; border-radius:13px; background:#ffffff05; }
  .hero__meta { left:24px; right:24px; bottom:max(14px,env(safe-area-inset-bottom)); padding-top:11px; }
  .hero__meta p { font-size:9px; letter-spacing:.1em; }
  .hero__meta .hero-preview-link { font-size:10px; }
  /* The fallback has the same opening crop as the canvas, without a second logo. */
  .hero__poster { overflow:hidden; background:radial-gradient(ellipse at 75% 45%,#4b34243d,transparent 70%),#09080c; }
  .hero__poster img { width:155%; height:auto; max-width:none; left:-45.1%; top:calc((100svh - 87.1875vw)*.47); object-fit:contain; background:transparent; mask-image:linear-gradient(transparent,#000 5%,#000 86%,transparent); }
  .muse-hero:not(.is-live) .hero__brand-shade { --brand-frame-width:155vw; --brand-frame-height:87.1875vw; --brand-frame-x:-45.1vw; --brand-frame-y:calc((100svh - 87.1875vw)*.47); }
  .hero__stage .s2-panel { border-top:1px solid #e2cb9a0c; }
  .hero__stage .s2-state { left:24px; right:24px; }
  .hero__stage .s2-state .eyebrow { font-size:10px; color:#d8c098; letter-spacing:.15em; }
  .hero__stage .s2-state .s2-title { font-family:"Helvetica Neue",Arial,sans-serif; font-size:32px; line-height:1.05; letter-spacing:-.05em; }
  .hero__stage .s2-state p:not(.eyebrow):not(.s2-title) { font-size:13px; line-height:1.6; color:#c8c0cf; }
  .is-motion .s3a-copy { left:24px; right:24px; }
  .s3a .eyebrow { font-size:10px; }
  .s3a-odo-label { font-size:11px; letter-spacing:.14em; color:#b8a8c0; }
  .s3a-sub { font-size:14px; line-height:1.65; }
  .studio-approach { padding:108px 24px 42px; background:radial-gradient(ellipse at 90% 40%,#5f3c751c,transparent 65%),#0c0b12; }
  .studio-approach h2 { font-size:clamp(44px,12.8vw,58px); line-height:1.02; max-width:10ch; }
  .approach-eyebrow { font-size:10px; }
  .approach-lead { font-size:14px; line-height:1.7; margin-top:22px; }
  .approach-intro { margin-bottom:30px; }
  .approach-prompt { font-size:12px; margin-bottom:16px; }
  .approach-tabs { gap:8px; border:0; }
  .approach-tab { min-height:116px; padding:15px 11px; border:1px solid #c6afd220; border-radius:15px; background:#ffffff03; gap:12px; top:0; }
  .approach-number { font-size:9px; }
  .approach-goal { font-size:16px; line-height:1.25; }
  .approach-tab[aria-selected=true] { border:1px solid #d4b98a7a; background:linear-gradient(145deg,#d4b98a20,#d4b98a06); box-shadow:inset 0 1px 0 #f5e2bb15; }
  .approach-results { padding-top:16px; }
  .approach-panel { min-height:0; padding:25px 21px; border:1px solid #d2bc9225; border-radius:23px; background:radial-gradient(ellipse at 100% 0,#c8a2770c,transparent 65%),#14111a; }
  .approach-service { font-size:9px; letter-spacing:.08em; gap:9px; }
  .studio-approach .approach-panel h3 { font-size:30px; line-height:1.12; letter-spacing:-.045em; }
  .approach-description { font-size:13px; line-height:1.7; }
  .approach-deliverables { gap:12px; }
  .approach-deliverables li { font-size:12px; line-height:1.55; }
  .approach-examples { font-size:11px; line-height:1.65; }
  .approach-examples>span { font-size:8px; }
  .approach-cta { width:100%; min-height:52px; font-size:12px; border-radius:12px; }
  .approach-footer { margin-top:26px; }
  .approach-footer>span { font-size:8px; }
  .approach-footer a { font-size:11px; }
  .is-motion .s3w-head { top:108px; left:24px; right:24px; }
  .s3w .eyebrow { font-size:9px; }
  .s3w-title { font-size:clamp(46px,13vw,64px); line-height:.96; }
  .s3w-line { font-size:14px; line-height:1.5; max-width:28ch; }
  .s3w .showcase-note { font-size:10px; line-height:1.55; max-width:30ch; }
  .is-motion .s3w-rail { left:20px; right:20px; bottom:max(24px,env(safe-area-inset-bottom)); padding:16px 18px; border:1px solid #d6bc8845; border-radius:16px; background:#141019df; backdrop-filter:blur(20px); }
  .s3w-rail strong { font-size:23px; }
  .s3w-rail small { font-size:10px; }
  .s3w-rail em { font-size:12px; }
  .s3w-hint { font-size:9px; }
  #collaborate.s3c { padding:108px 24px max(22px,env(safe-area-inset-bottom)); }
  #collaborate>.s3c-title { font-size:clamp(52px,14.5vw,66px); max-width:10ch; }
  #collaborate>.s3c-lede { font-size:15px; line-height:1.7; }
  #collaborate>.s3c-icons { gap:12px; }
  #collaborate .s3c-icons .s2-icon { width:48px; height:48px; border-radius:15px; }
  #collaborate .s3c-icons .s2-icon svg { width:20px; height:20px; }
  #collaborate>.s3c-note { font-size:11px; }
  #collaborate>.s3c-nav { justify-content:space-between; gap:12px; font-size:11px; }
  #collaborate>.footer-bottom { font-size:10px; letter-spacing:.02em; }
  #collaborate>.footer-bottom :is(a,button) { font-size:11px; }
}
@media (max-width:700px) {
  #brief-dialog { width:calc(100vw - 20px); max-height:calc(100svh - 20px); border-radius:24px; }
  #brief-dialog .brief-layout { max-height:calc(100svh - 22px); }
  #brief-dialog .brief-welcome { order:-1; min-height:210px; border:0; border-bottom:1px solid #d2b88525; background:#19121d; }
  #brief-dialog .brief-portrait { width:58%; left:auto; right:0; object-position:79% 45%; }
  #brief-dialog .brief-welcome::after { background:linear-gradient(90deg,#17121cff 0%,#17121cf0 37%,#17121c25 70%),linear-gradient(0deg,#17121c,transparent 45%); }
  #brief-dialog .brief-welcome-copy { left:22px; right:auto; bottom:23px; width:55%; }
  #brief-dialog .brief-welcome .eyebrow { font-size:8px; line-height:1.5; letter-spacing:.1em; max-width:20ch; margin-bottom:12px; }
  #brief-dialog .brief-welcome h3 { font-size:25px; line-height:1.08; margin-bottom:10px; }
  #brief-dialog .brief-welcome-copy>p:last-child { font-size:11px; line-height:1.55; color:#c8c0cf; }
  #brief-dialog #brief-form { padding:28px 22px; }
  #brief-dialog #brief-title { font-size:36px; }
  #brief-dialog .brief-service { min-height:46px; font-size:12px; }
  #brief-dialog input { height:50px; border-radius:12px; }
  #brief-dialog textarea { border-radius:12px; min-height:115px; }
  #brief-dialog label { font-size:13px; }
  #brief-dialog .cut-button { min-height:54px; border-radius:13px; }
}
@media (max-width:767px) and (max-height:699px) {
  :root { --mobile-film-scale:1.2; }
  .hero__copy { --mobile-copy-top:92px; }
  .hero__copy .eyebrow { font-size:8px; margin-bottom:10px; }
  .hero__copy h1 { font-size:clamp(34px,10.5vw,42px); }
  .hero__details,.is-static .hero__details { top:calc(47svh + 35.775vw + 12px - var(--mobile-copy-top)); }
  .hero__lede { font-size:12px; line-height:1.5; margin-bottom:14px; }
  .hero__actions .studio-primary,.hero__actions .studio-text-link { min-height:46px; font-size:10px; padding:0 10px; }
  .hero__meta { bottom:8px; padding-top:8px; }
  .hero__meta p { font-size:8px; }
  .hero__meta .hero-preview-link { font-size:9px; }
  .hero__poster img { width:120%; left:-16.4%; top:calc((100svh - 67.5vw)*.47); }
  .muse-hero:not(.is-live) .hero__brand-shade { --brand-frame-width:120vw; --brand-frame-height:67.5vw; --brand-frame-x:-16.4vw; --brand-frame-y:calc((100svh - 67.5vw)*.47); }
}
@media (max-width:360px) {
  :root { --studio-gutter:20px; }
  .hero__copy,.hero__meta { left:20px; right:20px; }
  .studio-approach { padding-left:20px; padding-right:20px; }
  .studio-approach h2 { font-size:44px; }
  .approach-goal { font-size:14px; }
  .approach-tab { padding:13px 9px; min-height:110px; }
  .approach-panel { padding:23px 17px; }
  .studio-approach .approach-panel h3 { font-size:27px; }
  #collaborate.s3c { padding-left:20px; padding-right:20px; }
  #collaborate>.s3c-icons { gap:8px; }
  #brief-dialog .brief-welcome { min-height:230px; }
  #brief-dialog .brief-welcome-copy { left:18px; width:56%; }
  #brief-dialog .brief-welcome h3 { font-size:23px; }
  #brief-dialog #brief-form { padding-left:18px; padding-right:18px; }
  #brief-dialog .brief-service { font-size:11px; padding:10px; }
}

/* A turned phone uses two columns so its short screen still exposes the actions. */
@media (max-width:767px) and (orientation:landscape) {
 body>header.studio-header.studio-header--signature { width:270px; right:auto; top:10px; }
 body .studio-header.studio-header--signature #navigation { max-height:calc(100svh - 92px); }
 .hero__copy { --mobile-copy-top:96px; left:24px; right:auto; width:43%; }
 .hero__copy .eyebrow { font-size:7px; margin-bottom:10px; }
 .hero__copy h1 { font-size:32px; }
 .hero__details,.is-static .hero__details { position:static; margin-top:15px; }
 .hero__lede { font-size:11px; line-height:1.5; margin-bottom:12px; }
 .hero__actions { gap:8px; }
 .hero__actions .studio-primary,.hero__actions .studio-text-link { font-size:9px; min-height:44px; padding:0 8px; }
 .hero__meta { left:24px; right:24px; bottom:4px; padding-top:5px; }
 .hero__poster img { width:100%; height:100%; left:0; top:0; object-fit:contain; object-position:50% 47%; mask-image:none; }
 .muse-hero:not(.is-live) .hero__brand-shade { --brand-frame-width:100vw; --brand-frame-height:56.25vw; --brand-frame-x:0px; --brand-frame-y:calc((100svh - 56.25vw)*.47); }
 .hero__stage .s2-panel { top:94px; bottom:auto; width:45%; height:230px; background:linear-gradient(90deg,#09090eef,#09090eaa 75%,transparent); }
 .hero__stage .s2-state,.hero__stage .s2-state[data-state="3"] { top:12px; bottom:auto; left:24px; right:12px; }
 .hero__stage .s2-state .s2-title { font-size:27px; }
 .hero__stage .s2-state p:not(.eyebrow):not(.s2-title) { font-size:11px; line-height:1.5; }
 .is-motion .s3w-head { top:100px; max-width:45%; }
 .s3w-title { font-size:42px; }
 .is-motion .s3w-rail { left:auto; width:42%; right:20px; bottom:18px; }
}