/* Final responsive layer: phone layouts win over the desktop presentation theme. */
.personal-wordmark .personal-logo-frame{height:25.36px}
@media(max-width:1100px){.personal-wordmark .personal-logo-frame{height:22.19px}}
.dialog:not([open]){display:none}
.dialog-fallback[open]{display:block;position:fixed;inset:0;margin:auto;z-index:100;box-shadow:0 0 0 100vmax #161d427d;overflow-y:auto}
@media(max-width:1024px){
  .header-inner{gap:.75rem}
  .header-inner>.button{flex-shrink:0}
  .personal-wordmark .personal-logo-frame{width:180px;height:19.02px}
  .learning-motion-ready .live-build-story{height:auto}
  .learning-motion-ready .live-build-pin{position:relative;top:auto;min-height:0}
  .editorial-heading{flex-wrap:wrap;gap:1.25rem}
  .capability-grid,.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .build-panel{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .build-poster.skill-poster{width:100%;max-width:620px;margin-inline:auto;min-height:0}
  .backend-layout{grid-template-columns:minmax(0,1fr)}
  .backend-intro{position:static}
  .about-layout>h2.about-closing-line{white-space:normal;font-size:2rem;line-height:1.35;text-wrap:balance}
}
@media(max-width:760px){
  html{scroll-padding-top:5rem}
  
  .container,.contact-inner{width:calc(100% - 2rem);max-width:100%;min-width:0}
  main,section,.header-inner,.learning-stage,.hero-copy,.editorial-heading,.section-heading,.work-heading-main,.about-copy,.live-build-copy,.build-explainer,.contact-copy,.dialog-shell{min-width:0}
  h1,h2,h3,p,li,dd,.cta-label,.text-link{overflow-wrap:break-word;word-wrap:break-word}
  h1,h2,h3{max-width:100%;letter-spacing:-.015em}
  .type-word,.scroll-word{max-width:100%;white-space:normal;overflow-wrap:break-word}
  .type-cursor{display:none}
  .header-inner{height:auto;min-height:72px;padding-block:.6rem;gap:.5rem}
  .personal-wordmark .personal-logo-frame{width:140px;height:14.79px}
  .header-inner>.button{font-size:.875rem;line-height:1.25;padding:.6rem .75rem;min-height:44px;max-width:140px}
  .menu-toggle{flex:0 0 44px;min-width:44px;min-height:44px}
  .mobile-nav{max-height:calc(100vh - 72px);max-height:calc(100svh - 72px);padding:.5rem 1rem 1rem;overflow-y:auto}
  .mobile-nav a{min-height:48px;font-size:1rem}
  .hero{padding:0 0 1rem;gap:0}
  .hero .hero-copy{min-height:0;padding:2.5rem 0 1.75rem;width:100%}
  .hero h1{font-size:2.5rem;font-size:clamp(2.25rem,9.5vw,4rem);line-height:1.14;white-space:normal;max-width:100%;margin:0}
  .hero-title-row{display:block}
  .hero-description{font-size:1rem;line-height:1.65;max-width:36rem;margin-top:1.25rem}
  .role-line{font-size:.8125rem;line-height:1.5;gap:.4rem;margin-top:1rem}
  .role-line span{padding:.35rem .6rem;max-width:100%}
  .hero-actions{width:100%;gap:.5rem;margin-top:1.4rem;flex-direction:column}
  .hero-actions .button{width:100%;max-width:360px;min-height:50px;font-size:1rem}
  .hero-actions .text-link{min-height:44px;font-size:1rem}
  .hero>.section-particles{height:calc(100% + 28px)}
  .pillar-window{padding-block:1.25rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .pillar-strip{min-width:0;display:flex;gap:.6rem;width:max-content;padding:12px 1rem 22px}
  .pillar-slot{flex:0 0 auto;width:74px;min-height:56px}
  .pillar-slot .pillar-card{min-height:56px;font-size:.9375rem;border-radius:12px;padding:.7rem .4rem;transform:none}
  .pillar-strip>.pillar-separator[aria-hidden]{font-size:.75rem;flex:none}
  .section,.manifesto,.learning-showcase,.guide-section,.learning-comparison{padding-block:3rem}
  .manifesto h2{font-size:2rem;font-size:clamp(2rem,7.4vw,3rem);line-height:1.18;margin:1.6rem 0}
  .manifesto-bottom{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
  .manifesto-bottom p{font-size:1rem;line-height:1.65;width:100%}
  .manifesto-bottom .orb-link{margin-top:0;min-width:54px;min-height:54px}
  .section-kicker,.eyebrow,.mini-label,.about-label{font-size:.8125rem;line-height:1.5;letter-spacing:.035em;white-space:normal}
  .learning-intro .eyebrow{font-size:.8125rem;padding:.5rem .7rem;margin-bottom:.5rem;max-width:100%}
  .learning-intro h2{font-size:2rem;font-size:clamp(1.95rem,7.3vw,3rem);line-height:1.2;margin:1rem 0 1.2rem}
  .learning-intro>.learning-tagline,.learning-intro>.learning-intro-copy{font-size:1rem;line-height:1.65;max-width:100%;text-wrap:pretty}
  .learning-intro>.button{min-height:52px;font-size:1rem;padding:.85rem 1rem;max-width:360px}
  .learning-intro .learning-format{font-size:.875rem;line-height:1.6;max-width:100%}
  .learning-path-cards{display:grid;grid-template-columns:minmax(0,1fr);margin:2rem auto 0;padding:0;gap:1.4rem;max-width:460px}
  .learning-path-card,.learning-path-card:hover,.learning-path-card:focus-within{grid-column:1;grid-row:auto;--card-offset:0px;--card-angle:0deg;transform:none;padding:1.25rem;min-width:0;border-radius:20px}
  .learning-path-card h3{font-size:1.5rem;line-height:1.25}
  .learning-path-card .lesson-outcomes{font-size:1rem;line-height:1.5;margin:1rem 0 1.2rem}
  .lesson-outcomes li{padding:.25rem 0 .25rem 1.3rem}
  .lesson-index{font-size:.8125rem;line-height:1.5;margin:.8rem 0 .6rem}
  .lesson-visual{height:auto;aspect-ratio:3/2;transform:none;margin-bottom:1rem}
  .lesson-visual img{height:auto;aspect-ratio:3/2;object-fit:cover}
  .learning-path-card .button{min-height:50px;font-size:1rem;padding:.75rem .8rem}
  .lesson-detail{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:.9375rem;margin-top:.5rem}
  .learning-path-card>.lesson-business-note{font-size:.875rem;line-height:1.6}
  .work-orbit-section{margin-top:0}
  .work-orbit-section.orbit-ready{height:calc(100vh + var(--orbit-distance,2600px));height:calc(100svh + var(--orbit-distance,2600px))}
  .work-orbit-section.orbit-ready .work-orbit-stage{height:100vh;height:100svh;min-height:0;overflow:hidden;overflow:clip}
  .work-orbit-section.orbit-ready .section-heading{width:calc(100% - 2rem);top:max(1rem,env(safe-area-inset-top));gap:.5rem}
  .orbit-ready .section-heading h2{font-size:1.85rem;font-size:clamp(1.65rem,6.8vw,2.5rem);line-height:1.2}
  .work-orbit-section.orbit-ready .project{top:50%}
  .work-orbit-section.orbit-ready .work-orbit-footer{width:calc(100% - 2rem);bottom:max(.5rem,env(safe-area-inset-bottom));gap:.5rem;font-size:.8125rem}
  .orbit-ready .work-orbit-footer p{max-width:65%;font-size:.8125rem;line-height:1.4}
  .work-orbit-section.orbit-ready .orbit-skip{font-size:.875rem;min-height:44px}
  .work-orbit-section .project[aria-hidden=true]{pointer-events:none}
  .work-orbit-section:not(.orbit-ready) .projects{width:calc(100% - 2rem);grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .work-orbit-section:not(.orbit-ready) .project-cover{height:250px;padding:1.2rem}
  .work-orbit-section:not(.orbit-ready) .project-info h3{font-size:1.25rem;white-space:normal}
  .work-orbit-section .project-cover .cover-top,.work-orbit-section .project-cover .cover-bottom{flex-wrap:wrap;max-width:100%}
  .work-orbit-section:not(.orbit-ready) .project-brand{min-height:68px;font-size:1.25rem}
  .project-brand .supplied-logo{max-width:100%;max-height:80px}
  .about-layout{gap:1.75rem;padding-block:3rem}
  .portrait-stage{max-width:350px;margin:0 auto;width:100%}
  .about-copy .large-copy{font-size:1.4rem;line-height:1.45}
  .about-copy p{font-size:1rem;line-height:1.65}
  .about-layout>h2.about-closing-line{font-size:1.65rem;font-size:clamp(1.5rem,5.8vw,2.25rem);line-height:1.35;white-space:normal;max-width:100%;text-wrap:balance}
  .about-links{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
  .about-links .button{width:100%;min-height:50px;margin:0;font-size:1rem}
  .about-statement h2,.contact-inner h2,.editorial-heading h2,.backend-intro h2,.faq-intro h2,.live-build-copy h2,.comparison-heading h2{font-size:2rem;font-size:clamp(1.95rem,7.2vw,3rem);line-height:1.2;letter-spacing:-.015em}
  .learning-motion-ready .live-build-pin,.live-build-pin{padding:3rem 0;min-height:0}
  .live-build-layout{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .scroll-writing{font-size:1.25rem;line-height:1.5;min-height:0;max-width:100%}
  .live-project-map{padding:1.1rem;transform:none}
  .live-milestones li{gap:.7rem;padding:.7rem 0;transform:none;opacity:1}
  .live-milestones li>div{min-width:0}
  .live-milestones h3{font-size:1rem;line-height:1.4}
  .live-milestones p{font-size:.9375rem;line-height:1.5}
  .live-scope-note,.live-map-caption,.map-label{font-size:.875rem;line-height:1.55}
  .capability-grid,.notes-grid,.process-grid{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .capability-card{min-height:0;padding:1.4rem}
  .capability-card h3,.note-card h3,.build-explainer h3{font-size:1.4rem;line-height:1.3;letter-spacing:0}
  .capability-card p,.note-card>p:last-child,.process-grid p,.build-explainer>p{font-size:1rem;line-height:1.65}
  .capability-card .mini-label{font-size:.8125rem}
  .editorial-heading{margin-bottom:1.6rem;gap:1rem}
  .editorial-heading>p{font-size:1rem;line-height:1.65;margin-top:1rem}
  .motion-ribbon{padding-block:2rem;overflow:hidden;overflow:clip}
  .ribbon-line{font-size:2.3rem;font-size:clamp(2rem,8.5vw,3.75rem);line-height:1.2}
  .automation-layout{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .flow-demo{padding:1rem;min-width:0}
  .demo-heading{display:flex;flex-wrap:wrap;gap:.5rem}
  .demo-heading .mini-label,.demo-badge{font-size:.75rem;line-height:1.45;white-space:normal}
  .demo-scenarios{display:flex;gap:.5rem;flex-wrap:wrap}
  .demo-scenarios button{min-height:44px;font-size:.9375rem;padding:.65rem .8rem}
  .flow-board.system-diagram{padding:.65rem;gap:.9rem;min-height:0;transform:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .automation-node{padding:.65rem;min-height:155px;animation:none}
  .automation-node strong{font-size:.9375rem;line-height:1.35;letter-spacing:0}
  .automation-node small,.node-number{font-size:.75rem;line-height:1.4;letter-spacing:0}
  .automation-node .line-icon{width:27px;height:27px;margin:.7rem 0}
  .demo-controls{flex-wrap:wrap;gap:.75rem}
  .demo-controls .button{min-height:48px}
  .flow-status{min-height:0;font-size:.9375rem;line-height:1.6}
  .demo-invalid{font-size:.875rem;line-height:1.55}
  .automation-actions .button,.build-explainer>.button{width:100%;min-height:50px;font-size:1rem}
  .build-selector{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .build-selector button{width:100%;font-size:1rem;min-height:48px;padding:.75rem 1rem;line-height:1.4}
  .build-panel{padding:1rem;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
  .build-poster.skill-poster{padding:1rem;min-height:0;gap:.8rem;width:100%;max-width:100%}
  .scene-viewport{max-height:none;aspect-ratio:4/3}
  .scene-chrome{font-size:.75rem;flex-wrap:wrap;line-height:1.4}
  .scene-footer>strong{font-size:1.15rem;line-height:1.35}
  .scene-steps{font-size:.875rem;line-height:1.4}
  .build-explainer{padding:0}
  .build-explainer dl>div{grid-template-columns:minmax(0,1fr);font-size:1rem;gap:.35rem}
  .tool-library{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-top:2rem}
  .tool-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .tool-links>a{padding:.85rem;min-height:78px}
  .tool-links strong{font-size:1rem;overflow-wrap:anywhere}
  .tool-links span{font-size:.875rem;line-height:1.4}
  .note-visual{aspect-ratio:1.6;padding:1.25rem;margin-bottom:1rem}
  .note-visual span{font-size:1.75rem;font-size:clamp(1.75rem,6.8vw,2.5rem);line-height:1.2}
  .process-section{padding-bottom:3rem}
  .process-heading{padding-top:1.5rem}
  .process-grid article{grid-template-columns:36px minmax(0,1fr);gap:.75rem;padding:.5rem 0}
  .process-grid h3{font-size:1.2rem;line-height:1.3}
  /* Keep the original comparison table inside its own touch-scroll region. */
  .comparison-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;transform:none}
  .learning-table{font-size:.9375rem;min-width:560px}
  .learning-table th,.learning-table td{padding:1rem;font-size:.9375rem;line-height:1.55}
  .learning-table thead th{font-size:1rem}
  .comparison-bottom{display:block}
  .comparison-bottom .button{width:100%;min-height:50px}
  .faq-section{grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-top:1.5rem;padding-bottom:3rem}
  .faq-list summary{font-size:1rem;gap:1rem;padding:1rem 0;min-height:54px}
  .faq-list summary>span{flex:none}
  .faq-list details p{font-size:1rem;line-height:1.65;padding-right:0}
  .faq-intro .button{width:100%;min-height:50px;font-size:1rem}
  .contact-section.learning-close{padding-block:3rem}
  .contact-inner{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .contact-inner h2{font-size:2.3rem;font-size:clamp(2.1rem,8vw,3.5rem)}
  .contact-actions .button{min-height:50px;font-size:1rem;padding:.85rem 1rem}
  .contact-copy p{font-size:1rem;line-height:1.65}
  .social-links{display:flex;flex-wrap:wrap;gap:.5rem 1rem}
  .social-links a{min-height:44px;display:inline-flex;align-items:center;font-size:1rem}
  .site-footer{grid-template-columns:minmax(0,1fr);grid-template-areas:'credit' 'top' 'services';gap:.75rem;padding:1.5rem 0 calc(5rem + env(safe-area-inset-bottom));text-align:center}
  .site-footer .footer-top,.site-footer .footer-services{justify-self:center;text-align:center;max-width:100%;font-size:.875rem}
  .site-footer .footer-credit>a{min-height:44px;font-size:1rem}
  body .whatsapp-float.radiant-control{position:fixed;inset:auto 1rem 1rem auto;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));width:48px;height:48px;min-height:48px;padding:0;max-width:48px}
  .whatsapp-float>span,.whatsapp-float .cta-label{display:none}
  .dialog{width:calc(100% - 2rem);max-width:560px;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:auto}
  .dialog-shell{padding:3.5rem 1.25rem 1.5rem;max-width:100%}
  .dialog-close{min-width:44px;min-height:44px;top:.65rem;right:.65rem}
  .dialog h2{font-size:1.75rem;line-height:1.25}
  .dialog-actions{display:flex;flex-direction:column;align-items:stretch;gap:.7rem}
  .dialog-actions .button,.dialog-actions .text-link{width:100%;min-height:48px;font-size:1rem;justify-content:center}
  .dialog input:not([type=radio]):not([type=checkbox]),.dialog select,.dialog textarea{font-size:1rem;max-width:100%;width:100%;min-height:44px}
  .choice-grid{grid-template-columns:minmax(0,1fr)}
  .choice-grid span{font-size:1rem;min-height:48px;display:flex;align-items:center}
  .project-detail-grid{grid-template-columns:minmax(0,1fr)}
  .dialog-intro,.project-detail-grid p,.project-detail-grid li{font-size:1rem;line-height:1.65}
}
@media(max-width:360px){
  .personal-wordmark .personal-logo-frame{width:115px;height:12.15px}
  .header-inner>.button{padding:.6rem .55rem;font-size:.8125rem;max-width:112px}
  .hero h1{font-size:2.1rem;line-height:1.16}
  .learning-intro h2{font-size:1.9rem}
  .flow-demo{padding:.75rem}
  .automation-node{padding:.5rem;min-height:155px}
  .automation-node strong{font-size:.875rem}
  .tool-links{grid-template-columns:minmax(0,1fr)}
  .learning-path-card{padding:1rem}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:600px){
  .hero .hero-copy{min-height:0;padding-block:1.75rem}
  .portrait-stage{max-width:300px}
}
@media(hover:none),(pointer:coarse){
  .button:hover,.learning-path-card:hover,.learning-path-card:focus-within,.comparison-scroll.is-comparison-hover{transform:none}
  .learning-path-card:hover .lesson-visual img{transform:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Older layout engines still receive useful dimensions instead of empty artwork. */
@supports not (aspect-ratio:1){
 @media(max-width:760px){
  .portrait-stage{height:300px}
  .portrait-frame{height:0;padding-bottom:68%}
  .portrait-frame img{position:absolute;inset:0}
  .scene-viewport{height:0;padding-bottom:75%}
  .scene-viewport svg{position:absolute;inset:0}
 }
}