/* Three deliberate layouts: phone, tablet, and laptop/desktop. */
.footer-bottom{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(0,2fr) auto;gap:28px;align-items:start}
.footer-bottom nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px}
.footer-bottom nav a,.footer-bottom nav button{font-size:13px;line-height:1.5;min-height:36px;display:flex;align-items:center}
.prose a:not(.button){text-decoration:underline;text-underline-offset:3px}
.legal-content{width:min(100% - 48px,780px);margin:0 auto 72px}
.local-services .article-card{min-width:0}
.local-services .article-card h3{font-size:clamp(24px,2.6vw,34px);line-height:1.1}
.page-head h1{overflow-wrap:break-word}
.studio-service,.studio-hero,.studio-founder,.studio-end{min-width:0}
.studio-location,.studio-hero .studio-kicker{font-size:11px;line-height:1.7}
.studio-btn,.studio-link{font-size:14px}
.studio-tags>span,.demo-disclosure,.credential-note{font-size:11px;line-height:1.6}
.system-scenarios button,.view-switch button,.flow-switch button,.hire-roles button,.hire-steps button{min-height:44px}
.system-topline>.studio-mono,.stage-note{font-size:10px}
.system-explanation strong{font-size:14px}
.system-explanation p{font-size:13px}
.system-node small{font-size:10px}
.system-scenarios button{font-size:12px}
.flow-switch button,.hire-roles button,.hire-steps button{font-size:13px}
.workflow-status,.capacity-mini>p,.hire-step-copy,.sales-action>p{font-size:13px;line-height:1.6}
.manual-flow>div{font-size:12px}
.connected-flow strong{font-size:13px}
.connected-flow small{font-size:11px}
.pipeline-stage-label{font-size:11px}
.pipeline-card>strong{font-size:13px}
.pipeline-card>small,.pipeline-card>.studio-mono,.lead-owner{font-size:10px;line-height:1.5}
.role-card p{font-size:13px}
.role-criteria>span{font-size:11px}
.sales-next,.sales-reset{min-height:44px}
.online-enquiry p,.field-help,.brief-send-note{font-size:14px;line-height:1.65}
.intake-hint{font-size:13px;line-height:1.6}
.intake-areas label>span{font-size:16px}
.intake-areas small{font-size:12px}
.intake-areas input{width:18px;height:18px}
.intake-field>label{font-size:14px}
.intake-field input,.intake-field select,.intake-field textarea,.brief-panel input,.brief-panel textarea,.brief-panel select{font-size:16px}
.studio-dialog-body .brief-subtitle{font-size:15px}

/* Laptop: preserve the side-by-side composition with bounded line lengths. */
@media(min-width:1101px){
 .studio-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:4%;padding-block:52px}
 .studio-hero h1{font-size:clamp(68px,6.8vw,98px)}
 .studio-lead{font-size:18px;max-width:46ch!important}
 .studio-service-copy>p{max-width:48ch;font-size:17px}
 .studio-system{width:100%}
 .site-header{padding-block:6px}
}

/* Tablet: full-width hero and demonstrations; two-column service choices. */
@media(min-width:601px) and (max-width:1100px){
 :root{--studio-gutter:32px}
 .studio-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding:42px var(--studio-gutter)}
 .studio-hero h1{font-size:clamp(52px,8vw,82px);line-height:1.02;max-width:none}
 .studio-hero h1 br{display:none}
 .studio-hero h1 span{display:block}
 .studio-system{width:100%;max-width:740px;justify-self:center}
 .studio-lead{font-size:18px;max-width:55ch!important}
 .studio-service-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .studio-service-copy>p,.range-service-intro p,.founder-copy>p:not(.studio-kicker){font-size:17px}
 .package-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .package-result{gap:24px;flex-wrap:wrap}
 .footer-bottom{grid-template-columns:minmax(0,1fr);gap:20px}
 .footer-bottom nav{grid-template-columns:repeat(3,minmax(0,1fr))}
 .services-layout{grid-template-columns:170px minmax(0,1fr);gap:28px}
 .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .local-services .article-card:last-child{grid-column:1/-1}
}

/* Phone: readable stacked sections, comfortable controls and no compressed copy. */
@media(max-width:600px){
 :root{--studio-gutter:22px}
 .studio-hero{padding:32px var(--studio-gutter);gap:30px}
 .studio-hero h1{font-size:clamp(48px,13.8vw,74px);line-height:1;letter-spacing:-.065em}
 .studio-hero .studio-kicker{font-size:10px;margin-bottom:26px}
 .studio-lead{font-size:16px;line-height:1.65}
 .studio-location{font-size:10px;letter-spacing:0;margin-top:24px}
 .studio-actions{gap:16px}
 .studio-hero .studio-actions{align-items:stretch;gap:16px}
 .studio-hero .studio-btn{font-size:13px;padding:13px 16px;gap:15px}
 .studio-hero .studio-actions>.studio-link{font-size:12px;gap:8px;min-height:44px}
 .studio-system{width:100%;max-width:none}
 .system-topline{padding:16px 12px 0;gap:8px}
 .system-topline>.studio-mono{font-size:9px;max-width:12ch}
 .view-switch button{font-size:11px;padding:7px}
 .system-stage{aspect-ratio:1;min-height:300px}
 .system-node{width:43%;padding:10px 7px;min-height:66px;gap:5px}
 .system-node.build,.system-node.grow{left:1%}
 .system-node.streamline,.system-node.hire{right:1%}
 .system-node strong{font-size:13px}
 .system-node small{font-size:10px;line-height:1.4}
 .node-symbol{min-width:17px;font-size:17px}
 .node-indicator{display:none}
 .system-core svg{width:60px;height:60px}
 .system-core>span{font-size:8px}
 .stage-note{font-size:8px;letter-spacing:0}
 .system-scenarios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}
 .system-scenarios button{font-size:12px;min-height:44px}
 .system-explanation{padding:16px 12px;gap:8px}
 .system-explanation strong{font-size:14px}
 .system-explanation p{font-size:13px}
 .studio-service{padding-block:36px}
 .studio-service-copy>p,.range-service-intro p,.package-heading>p,.proof-heading>p:last-child,.founder-copy>p:not(.studio-kicker),.studio-end>div:last-child>p{font-size:16px;line-height:1.65}
 .studio-section-label{font-size:10px;line-height:1.6}
 .studio-section-label>span:last-child{font-size:9px}
 .studio-tags>span{font-size:11px}
 .studio-service-copy h2,.range-service-intro h2{font-size:clamp(36px,10.5vw,49px)}
 .studio-disciplines small{font-size:11px}
 .manual-flow{gap:10px}
 .manual-flow>div{font-size:12px;padding:12px 8px;min-height:60px}
 .workflow-top{padding:14px 12px;flex-wrap:wrap}
 .workflow-top>.studio-mono{font-size:10px;max-width:none}
 .capacity-mini>summary,.capacity-fields>label{font-size:13px}
 .pipeline-track{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pipeline-card{padding:12px 9px}
 .pipeline-card>strong{font-size:14px}
 .pipeline-card>small,.pipeline-card>.studio-mono,.lead-owner{font-size:11px}
 .sales-action>p,.hire-step-copy{font-size:13px}
 .hire-roles{flex-wrap:wrap}
 .hire-steps{gap:7px;flex-wrap:wrap}
 .hire-steps button{font-size:12px}
 .package-option>span:last-child{font-size:12px;line-height:1.5}
 .package-option{padding:16px;min-height:160px}
 .package-output>p{font-size:14px}
 .package-deliverables>span{font-size:12px}
 .package-presets>button{font-size:12px;min-height:44px}
 .package-unsure,.package-unsure button{font-size:13px}
 .proof-card details,.proof-card details p,.proof-lab>p{font-size:15px}
 .founder-technology>p:not(.credential-note){font-size:13px}
 .credential-row>span{font-size:12px}
 .credential-row small,.credential-note{font-size:11px}
 .studio-email{font-size:14px;overflow-wrap:anywhere}
 .footer-top{grid-template-columns:minmax(0,1fr);gap:18px}
 .footer-top p,.footer-top>a:last-child{font-size:14px}
 .footer-bottom{grid-template-columns:minmax(0,1fr);gap:22px;font-size:13px}
 .footer-bottom nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
 .footer-bottom nav a,.footer-bottom nav button{font-size:14px;min-height:44px}
 .article-grid{grid-template-columns:minmax(0,1fr)}
 .legal-content{width:auto;margin:0 22px 48px}
 .prose p,.prose li{font-size:16px;overflow-wrap:anywhere}
 .prose h2{font-size:30px;line-height:1.15}
 .prose h3{font-size:23px;line-height:1.2}
 .analytics-choice{padding:14px;max-height:45dvh;overflow:auto}
 .analytics-choice strong{font-size:16px}
 .analytics-choice p{font-size:13px;margin:6px 0 10px}
 .studio-dialog-body{padding:24px 18px}
 .studio-dialog-body h2{font-size:32px}
 .studio-dialog-body .brief-subtitle{font-size:15px}
 .intake-areas{grid-template-columns:minmax(0,1fr)}
 .intake-areas label{padding:14px;min-height:62px}
 .intake-areas small{max-width:none}
 .brief-export .studio-btn{font-size:13px;min-height:44px}
}