/* Responsive layouts share the desktop artwork, copy and interaction states. */
@media (max-width:1024px) {
  :root { --gutter:clamp(20px,5vw,48px); --body:18px; }
  h2 { font-size:clamp(32px,4.6vw,44px); line-height:1.2; }
  .section { padding-block:72px; }
  .hero-stage { top:min(0px,calc(100svh - var(--hero-stage-height,740px))); padding-bottom:0; }
  .masthead { height:84px; min-height:0; padding:20px var(--gutter); }
  .masthead img { width:112px; min-width:0; }
  .motion-control { min-height:44px; padding:10px 15px; font-size:12px; }
  .hero-wrap { padding:0; }
  .hero { aspect-ratio:auto; min-height:620px; border-radius:0; }
  .opening { padding:40px var(--gutter) 0; width:78%; }
  .hero h1 { font-size:clamp(42px,5.6vw,56px); line-height:1.12; max-width:660px; }
  .problem { width:min(360px,100%); margin-top:32px; font-size:20px; line-height:1.3; }
  .problem .answer { margin-bottom:20px; }
  .partnership { left:auto; top:auto; right:var(--gutter); bottom:52px; width:50%; font-size:19px; line-height:1.35; }
  .page-content { margin-top:0; }
  .trusted { padding-block:28px 34px; min-height:0; gap:32px; }
  .trusted>p { font-size:15px; }
  .logo-track li { width:110px; height:36px; }
  .overview { padding-top:42px; padding-bottom:0; }
  .intro-grid { grid-template-columns:1fr; gap:28px; margin-bottom:40px; }
  .intro-grid h2 { max-width:750px; line-height:1.2; }
  .intro-copy { max-width:720px; line-height:1.45; }
  .comparison-scroll { height:auto; }
  .comparison-sticky { position:relative; top:0; }
  .comparison-labels { margin-bottom:10px; gap:14px; font-size:13px; }
  .comparison-labels button { min-height:44px; text-align:left; }
  .comparison-labels button:last-child { text-align:right; }
  .comparison { min-height:410px; height:410px; aspect-ratio:auto; }
  .growth-lead { font-size:16px; }
  .vendor { font-size:15px; padding:10px; border-radius:8px; text-align:center; }
  .vendor span { font-size:13px; line-height:1.25; }
  .partner-owner { font-size:19px; }
  .partner-owner span { font-size:14px; }
  .service { font-size:15px; border-radius:8px; }
  .founder { grid-template-columns:1fr; align-items:start; gap:40px; padding-block:80px 100px; }
  .founder-intro { width:100%; max-width:700px; min-height:0; display:grid; grid-template-columns:96px minmax(0,1fr); gap:24px 20px; align-items:center; margin-inline:auto; }
  .founder-intro h2 { grid-column:1/-1; line-height:1.28; }
  .founder-quote-break { display:inline; }
  .founder-credit { grid-column:2; grid-row:2; margin:0; font-size:17px; line-height:1.35; }
  .founder-portrait { grid-column:1; grid-row:2; margin:0; width:96px; height:96px; border-radius:10px; }
  /* The stacked layout shows the letter immediately below the portrait. */
  .founder .envelope-scene { width:100%; max-width:700px; min-height:0; padding:0; margin:0 auto; perspective:none; }
  .founder .envelope-art { display:none; }
  .founder .envelope-motion,
  .founder .envelope-scene .letter,
  .founder .envelope-scene .letter-stage { animation:none!important; transform:none!important; clip-path:none!important; }
  .letter { left:0; width:100%; min-height:0; padding:30px; border-radius:14px; }
  .letter .eyebrow { font-size:12px; margin:0 0 24px; padding-bottom:16px; }
  .letter-copy { font-size:18px; line-height:1.45; }
  .letter-copy p { margin-bottom:22px; }
  .signature { width:30%; height:32px; margin:22px 0 0 auto; }
  .results { padding-block:64px; }
  .results-grid { grid-template-columns:1fr; gap:40px; }
  .results h2 { margin-bottom:32px; }
  .primary-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; max-width:none; gap:20px; }
  .primary-stats>div { border:0; border-right:1px solid #c9ccbf; padding:0 16px 0 0; }
  .primary-stats>div:last-child { border:0; padding:0; }
  .primary-stats .count { font-size:clamp(36px,6.2vw,58px); }
  .primary-stats p { font-size:17px; line-height:1.3; }
  .result-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .result-card { min-height:235px; padding:26px; border-radius:14px; box-shadow:none; }
  .result-card>p:first-child { font-size:16px; line-height:1.3; }
  .result-card .count { font-size:48px; margin:28px 0 16px; }
  .result-card>p:last-child { font-size:17px; line-height:1.4; }
  .working { padding-block:64px; }
  .chat-grid { grid-template-columns:1fr; gap:48px; max-width:720px; }
  .label-pill { font-size:16px; }
  .chat-column h2 { font-size:23px; line-height:1.3; margin:16px 0 24px; }
  .chat { font-size:14px; line-height:1.45; min-height:0; }
  .message { grid-template-columns:28px minmax(0,1fr); gap:10px; margin-bottom:20px; }
  .message-by { gap:6px; }
  .message-by time { font-size:10px; }
  .avatar { width:28px; height:28px; }
  .messages { padding:20px 18px 24px; }
  .chat-tabs { gap:24px; }
  .attachment { max-width:100%; overflow-wrap:anywhere; }
  .slack-ambient { width:170%; left:-35%; }
  .offers { grid-template-columns:1fr; gap:64px; padding-block:72px 48px; max-width:760px; }
  .offers .eyebrow { font-size:13px; line-height:1.3; margin-bottom:18px; }
  .offer h2 { font-size:clamp(32px,4.6vw,44px); min-height:0; max-width:720px; }
  .offer-description { min-height:0; margin:20px 0 30px; max-width:100%; font-size:18px; line-height:1.45; }
  .offer-diagram.offer-map { border-radius:16px; margin-bottom:28px; }
  .button { min-height:52px; font-size:17px; padding:15px 24px; gap:24px; }
  .text-link { min-height:44px; font-size:17px; align-content:center; }
  .portfolio { padding-block:48px 64px; }
  .portfolio-layout { grid-template-columns:1fr; gap:22px; }
  .portfolio .portfolio-intro h2 { width:100%; max-width:580px; font-size:clamp(32px,4.6vw,44px); }
  .portfolio .text-link { margin-top:18px; }
  .portfolio-scene { width:calc(100% + var(--gutter)*2); height:340px; min-height:0; margin:0 calc(-1 * var(--gutter)); }
  .testimonials { padding-block:64px; }
  .testimonial-heading { margin-bottom:32px; }
  .testimonial-heading h2 { font-size:clamp(32px,4.6vw,44px); }
  .clutch-rating { font-size:16px; margin-top:20px; }
  .testimonial-track { --testimonial-card-width:350px; --testimonial-gap:20px; }
  .testimonial-set .testimonial { padding:28px; min-height:370px; }
  .testimonial .quote-mark { width:30px; margin-bottom:28px; }
  .testimonial .quote-heading { font-size:23px; line-height:1.25; }
  .testimonial blockquote { font-size:17px; line-height:1.4; }
  .testimonial figcaption strong,.testimonial figcaption small { font-size:16px; line-height:1.35; }
  .call-to-action { padding:72px var(--gutter); }
  .call-to-action h2 { font-size:clamp(36px,5.8vw,54px); line-height:1.15; }
  .call-to-action p { font-size:18px; line-height:1.4; max-width:360px; margin:24px auto; }
  .footer { padding:56px 0 28px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; font-size:17px; }
  .footer h2 { font-size:12px; letter-spacing:.04em; margin-bottom:16px; }
  .footer nav a,.footer-grid>div>a { display:flex; align-items:center; min-height:44px; }
  .footer address { font-size:16px; }
  .footer .socials { padding-top:0; font-size:15px; gap:0; }
  .copyright { margin-top:36px; padding-top:20px; flex-wrap:wrap; gap:8px 20px; font-size:12px; }
  .copyright a { min-height:44px; display:flex; align-items:center; }
  .back-top { margin-left:0; }
}

.connections-mobile { display:none; }
@media (max-width:640px) {
  :root { --gutter:20px; }
  .masthead { height:76px; padding-block:16px; }
  .masthead img { width:100px; }
  .motion-control { padding:10px 12px; }
  .hero { display:flex; flex-direction:column; min-height:0; padding:34px var(--gutter) 52px; gap:64px; }
  .opening { width:100%; padding:0; }
  .hero h1 { font-size:clamp(34px,8.9vw,48px); line-height:1.12; text-wrap:balance; max-width:none; }
  .problem { width:100%; max-width:360px; font-size:18px; line-height:1.35; margin-top:30px; }
  .problem .answer { margin-bottom:18px; }
  .arrow { margin-top:5px; }
  .partnership { position:relative; inset:auto; width:100%; font-size:18px; line-height:1.4; margin:0; }
  .orbit-position { width:190%; left:50%; top:79%; }
  .trusted { flex-direction:column; align-items:stretch; padding-block:26px 30px; gap:22px; }
  .trusted>p { font-size:14px; }
  .trusted>p br { display:none; }
  .logo-track li { width:102px; height:32px; }
  .logo-track ul { gap:32px; padding-right:32px; }
  .overview { padding-top:30px; }
  .intro-grid h2 { font-size:32px; line-height:1.2; text-wrap:pretty; }
  .intro-copy { font-size:17px; line-height:1.45; }
  .comparison-labels { margin-inline:-4px; font-size:12px; }
  .comparison { width:calc(100% + 16px); margin-inline:-8px; min-height:550px; height:550px; border-radius:16px; }
  .growth-lead { top:28px; padding:9px 17px; font-size:15px; }
  .before-view>.connections { display:none; }
  .connections-mobile { display:block; position:absolute; inset:0; width:100%; height:100%; }
  .vendor { left:50px; right:auto; width:calc((100% - 112px)/2); height:87px; top:148px; font-size:clamp(12px,3.4vw,15px); border-radius:7px; padding:8px; line-height:1.2; }
  .vendor span { font-size:clamp(11px,3vw,13px); margin-top:7px; }
  .vendor-1,.vendor-3,.vendor-5 { left:auto; right:50px; }
  .vendor-2,.vendor-4 { left:50px; right:auto; }
  .vendor-2,.vendor-3 { top:279px; }
  .vendor-4,.vendor-5 { top:410px; }
  .partner-owner { top:101px; font-size:17px; padding-inline:32px; }
  .partner-owner span { max-width:250px; font-size:13px; line-height:1.3; margin:auto; }
  .after-connectors { top:176px; left:11%; width:78%; height:25px; }
  .after-view .service-grid { top:207px; bottom:40px; left:50px; right:50px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:10px; }
  .service { padding:9px; font-size:clamp(12px,3.45vw,15px); border-radius:7px; gap:4px; }
  .service>span { max-width:70%; }
  .service .service-metal-icon { position:static; transform:none; width:28%; height:42px; max-height:100%; flex:none; object-fit:contain; }
  .service-motion .service-metal-icon,.service-landing .service-metal-icon { width:30%; }
  .founder { padding-block:64px 72px; gap:30px; }
  .founder-intro { grid-template-columns:84px minmax(0,1fr); gap:24px 18px; }
  .founder-intro h2 { font-size:30px; line-height:1.28; }
  .founder-portrait { width:84px; height:84px; }
  .founder-credit { font-size:16px; }
  .letter { padding:24px 22px; border-radius:12px; }
  .letter .eyebrow { font-size:11px; line-height:1.3; margin-bottom:22px; padding-bottom:14px; }
  .letter-copy { font-size:17px; line-height:1.4; }
  .letter-copy p { margin-bottom:20px; }
  .signature { height:30px; width:34%; margin-top:20px; }
  .results { padding-block:56px; }
  .results-grid { gap:32px; }
  .primary-stats { gap:12px; }
  .primary-stats>div { padding-right:10px; }
  .primary-stats .count { font-size:clamp(31px,9vw,42px); }
  .primary-stats p { font-size:14px; }
  .result-cards { gap:14px; }
  .result-card { padding:22px 17px; min-height:250px; }
  .result-card>p:first-child { font-size:14px; }
  .result-card .count { font-size:38px; margin:24px 0 14px; }
  .result-card>p:last-child { font-size:16px; line-height:1.35; }
  .working { padding-block:56px; }
  .chat-grid { width:calc(100% - 32px); gap:44px; }
  .chat-column h2 { font-size:21px; margin-bottom:22px; }
  .chat { font-size:13px; }
  .chat-header { padding:14px 12px; font-size:14px; }
  .chat-members { font-size:11px; }
  .chat-tabs { padding-inline:14px; }
  .messages { padding:18px 12px 24px; }
  .message { grid-template-columns:26px minmax(0,1fr); gap:8px; }
  .avatar { width:26px; height:26px; }
  .offers { padding-block:64px 32px; gap:56px; }
  .offer h2 { font-size:32px; }
  .offer-description { font-size:17px; margin:18px 0 26px; }
  .offer-diagram.offer-map { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px 12px; height:auto; min-height:0; aspect-ratio:auto; padding:24px 20px 28px; font-size:15px; }
  .map-brace-full,.team-brace,.lean-brace { display:none; }
  .map-full .map-owner { position:static; grid-column:1/-1; font-size:17px; max-width:none; padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid #c6c9bd; }
  .map-owner br { display:none; }
  .map-owner strong { display:block; }
  .map-owner span { font-size:14px; max-width:none; margin-top:6px; }
  .offer-map .lever { position:relative; inset:auto; width:auto; height:44px; grid-column:span 3; padding:0 4px; font-size:15px; line-height:1.15; --pill-height:44px; --pill-radius:22px; --blur-top:1px; --blur-bottom:6px; --blur-bleed:18px; }
  .map-team-label,.map-lean-label { position:static; grid-column:1/-1; width:auto; font-size:17px; font-weight:500; margin-bottom:2px; }
  .map-team-label { order:0; }
  .map-creative .lever-0,.map-creative .lever-1 { order:1; }
  .map-lean-label { order:2; padding-top:18px; border-top:1px solid #c6c9bd; margin-top:6px; }
  .map-creative .lever-2,.map-creative .lever-3,.map-creative .lever-4 { order:3; grid-column:span 2; font-size:14px; }
  .map-creative .lever-5,.map-creative .lever-6 { order:4; }
  .portfolio { padding-block:32px 48px; }
  .portfolio .portfolio-intro h2 { font-size:32px; }
  .portfolio-layout { gap:8px; }
  .portfolio-scene { height:clamp(260px,72vw,340px); }
  .testimonials { padding-block:56px; }
  .testimonial-track { --testimonial-card-width:min(350px,calc(100vw - 56px)); --testimonial-gap:16px; }
  .testimonial-heading h2 { font-size:32px; }
  .testimonial-set .testimonial { min-height:365px; padding:25px; }
  .testimonial .quote-heading { font-size:22px; }
  .testimonial figcaption strong,.testimonial figcaption small { font-size:15px; }
  .call-to-action { padding-block:64px; }
  .call-to-action h2 { font-size:36px; }
  .footer-grid { gap:28px 20px; font-size:16px; }
  .footer-grid>div:nth-child(3) { grid-column:1/-1; }
  .footer .socials { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; gap:6px 24px; font-size:14px; }
  .copyright { font-size:12px; }
}

@media (max-width:360px) {
  :root { --gutter:16px; }
  .hero { gap:48px; padding-bottom:44px; }
  .hero h1 { font-size:33px; }
  .partnership,.problem { font-size:17px; }
  .comparison-labels { font-size:11px; }
  .vendor { left:48px; width:calc((100% - 106px)/2); }
  .vendor-1,.vendor-3,.vendor-5 { left:auto; right:48px; }
  .vendor-2,.vendor-4 { left:48px; }
  .after-view .service-grid { left:48px; right:48px; gap:8px; }
  .service { padding:7px; font-size:12px; }
  .result-cards { grid-template-columns:1fr; }
  .result-card { min-height:0; padding:24px; }
  .result-card .count { margin-top:20px; }
  .offer-diagram.offer-map { padding:22px 16px 26px; gap:12px 10px; }
  .offer-map .lever { font-size:14px; }
  .map-creative .lever-2,.map-creative .lever-3,.map-creative .lever-4 { font-size:13px; }
}

@media (prefers-reduced-motion:reduce) and (max-width:1024px) {
  .hero-stage { position:relative; top:0; }
}