/* Shared reference direction: Satoshi, charcoal, lime, offset surfaces.
   Existing particle, orbit, typing and workflow choreography stays in its own files. */
@font-face{font-family:Satoshi;src:url('/assets/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url('/assets/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url('/assets/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url('/assets/fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Sedgwick Ave';src:url('/assets/fonts/sedgwick-ave.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--font:Satoshi,'Google Sans Flex',Arial,sans-serif;--ink:#131311;--navy:#131311;--blue:#131311;--blueberry:#6c6c6a;--muted:#6c6c6a;--sky:#c6fd50;--pale:#f4f4f4;--line:#dfdfdf;--white:#fafafa;--one-lime:#c6fd50;--one-dark:#131311;--one-paper:#fafafa;--one-ease:cubic-bezier(.215,.61,.355,1);--control-surface:linear-gradient(110deg,#131311,#1c1d1a 58%,#2a2a27);--footer-surface:linear-gradient(110deg,#131311,#1c1d1a 58%,#2a2a27);--heading-spectrum:linear-gradient(100deg,#131311,#41413f);--heading-spectrum-light:linear-gradient(100deg,#c6fd50,#e2ffab);--prism-blue:#131311;--prism-violet:#41413f;--prism-mint:#517900;--prism-peach:#6c6c6a;--prism-pink:#41413f;--panel-accent:#131311;--panel-wash:#f4f4f4;--panel-edge:#dfdfdf;--glass-light:linear-gradient(145deg,#fafafaf5,#f4f4f4e8);--glass-dark:linear-gradient(130deg,#131311ed,#2a2a27e8);--glass-edge:#dfdfdf;--glass-shadow:0 8px 24px #1313110a;--particle-light:#41413f;--particle-dark:#c6fd50}
body{font-family:var(--font);color:var(--ink);background:var(--one-paper)}
button,input,select,textarea{font-family:var(--font)}
::selection{background:#c6fd50;color:#131311}
h1,h2,h3,h4{font-family:Satoshi,'Google Sans Flex',Arial,sans-serif;font-weight:900;letter-spacing:-.035em;text-wrap:balance}
body h1,body h2,body h3,body h4{color:var(--ink)}
p{letter-spacing:-.005em}
body .page-atmosphere{background:#fafafa}
body .hero{background:radial-gradient(ellipse at 72% 46%,#f4f4f4 0%,#f4f4f4 43%,transparent 70%)}
body .site-header{background:#fafafaf2;border-color:#dfdfdf;box-shadow:none;backdrop-filter:blur(16px)}
body .site-header.is-scrolled{background:#fafafaf5;box-shadow:0 4px 18px #13131108}
body .site-header .desktop-nav{padding:0 18px;gap:22px;border-radius:12px;background:#131311;color:#fafafa;min-height:48px}
body .desktop-nav>a,body .desktop-nav .learning-menu,body .desktop-nav .learning-menu summary{color:#fafafa;font-weight:700}
body .desktop-nav a:hover,body .desktop-nav .learning-menu[open]>summary{color:#c6fd50}
body .desktop-nav a:after{background:#c6fd50}
body .learning-menu-panel{background:#fafafa;border:1px solid #131311;border-radius:12px;box-shadow:4px 4px #131311}
body .learning-menu-panel a{color:#131311!important;border-radius:6px}
body .learning-menu-panel a:hover{background:#c6fd50}
body .mobile-nav{background:#fafafa;border-color:#dfdfdf}
body .mobile-nav a,body .mobile-nav summary,body .menu-toggle{color:#131311}
body .scroll-progress{background:#c6fd50;box-shadow:0 0 8px #c6fd5040}
body .hero-copy h1{font-weight:900;line-height:1.02;letter-spacing:-.055em}
body .hero-radiant,body .radiant-word,body .blue-text,body .hero-radiant .type-char,body .radiant-word .type-char,body .hero-copy .blue-text .type-char,body .about-closing-line .blue-text,body .live-build-copy h2>.radiant-word{background:none!important;color:#131311!important;-webkit-text-fill-color:#131311!important}
body .hero-radiant,body .about-closing-line .blue-text{background:linear-gradient(transparent 78%,#c6fd50 78%)!important}
body .eyebrow,body .section-kicker,body .about-label,body .mini-label,body .lesson-index,body .card-index,body .featured-number{color:#6c6c6a;font-weight:700}
body .hero-description,body .about-copy p,body .editorial-heading>p,body .process-grid p,body .faq-list details p,body .service-block p{color:#6c6c6a}
body .role-line span{background:#f4f4f4;color:#131311;border-color:#dfdfdf;border-radius:7px;box-shadow:none}
body .pillar-card{background:#f4f4f4!important;border-color:#131311!important;border-radius:10px;box-shadow:4px 4px #131311!important}
body .pillar-card .pillar-label{background:none;color:#131311;-webkit-text-fill-color:#131311;font-weight:900}
body .pillar-separator{color:#131311}
body .button,body .button:hover,body .button:focus-visible,body .particle-cta,body .particle-cta:hover,body .learning-cta{background:#c6fd50!important;color:#131311!important;border:1.5px solid #131311;border-radius:10px;box-shadow:4px 3px 0 #131311;min-height:48px;font-weight:700;transition:transform .28s var(--one-ease),box-shadow .28s var(--one-ease),background-color .28s}
body .button .cta-label,body .particle-cta .cta-label,body .button svg,body .particle-cta svg{color:#131311!important;-webkit-text-fill-color:#131311!important;background:none!important;font-weight:700}
body .button:hover{transform:translate(-2px,-2px);box-shadow:6px 5px #131311;background:#d3ff78!important}
body .button:active{transform:translate(3px,3px);box-shadow:1px 0 #131311}
body .particle-cta::after{opacity:.18;background-image:radial-gradient(circle at 15px 19px,#131311 1px,transparent 1.6px),radial-gradient(circle at 43px 8px,#517900 .9px,transparent 1.5px),radial-gradient(circle at 17px 34px,#131311 .8px,transparent 1.4px)}
body .radiant-control::before{background-image:conic-gradient(from var(--cta-angle),#c6fd5000,#c6fd50 20%,#fafafa 45%,#96d411 65%,#c6fd5000);filter:drop-shadow(0 0 3px #c6fd5050)}
body .text-link{color:#131311;border-color:#131311;transition:color .2s,box-shadow .25s}
body .text-link:hover{box-shadow:0 2px 0 #c6fd50}
body a:focus-visible,body button:focus-visible,body summary:focus-visible{outline-color:#517900}
body .round-button{background:#131311;color:#c6fd50;border-color:#131311;box-shadow:4px 4px #13131120}
body .round-button svg{color:inherit}
body .learning-showcase,body .contact-section.learning-close,body .motion-ribbon{--learning-surface:#131311;background:var(--footer-surface)!important;color:#fafafa}
body .learning-showcase::before,body .contact-section::before{background-image:radial-gradient(ellipse at 75% 40%,#c6fd5010,transparent 52%)}
body .learning-intro h2,body .contact-inner h2,body .motion-ribbon h2{color:#fafafa}
body .learning-intro .radiant-word,body .learning-intro .radiant-word .type-char,body .learning-intro .learn-highlight,body .contact-inner .radiant-word,body .contact-inner .radiant-word .type-char{background:none!important;color:#c6fd50!important;-webkit-text-fill-color:#c6fd50!important}
body .learning-intro .eyebrow{color:#c6fd50;background:#c6fd5014;border:1px solid #c6fd5033;border-radius:7px}
body .learning-intro-copy,body .learning-tagline,body .learning-format,body .contact-copy p,body .contact-inner .eyebrow{color:#dfdfdf}
body .learning-path-card{background:#fafafa!important;border:1.5px solid #131311;border-radius:16px;color:#131311;box-shadow:6px 6px #c6fd50}
body .learning-path-card h3,body .lesson-outcomes{color:#131311}
body .lesson-outcomes li:before{color:#517900}
body .lesson-visual{border-radius:10px;border:1px solid #dfdfdf;box-shadow:none}
body .lesson-detail{color:#131311}
body .lesson-business-note{background:#eff8dd;color:#41413f;border-color:#d7e7b4;border-radius:8px}
body .service-card,body .featured-project,body .directory-project,body .capability-card,body .build-explainer,body .note-card,body .process-grid article,body .flow-demo,body .comparison-scroll,body .faq-list details{background:#f4f4f4!important;border:1px solid #131311;border-radius:16px;box-shadow:4px 4px #131311;backdrop-filter:none;transition:box-shadow .3s var(--one-ease),border-color .3s}
body .service-card h3,body .directory-copy h3,body .directory-copy h4,body .featured-project h3,body .service-block h2,body .service-hero h1,body .about-page-hero h1,body .page-links strong,body .page-links a{color:#131311}
body .service-card a,body .service-note a,body .service-block>p a,body .service-checks li:before,body .project-url,body .featured-project>span:last-child{color:#517900!important}
body .service-note{background:#eff8dd;border-color:#d7e7b4;color:#41413f;border-radius:12px}
body .service-block{border-color:#dfdfdf}
body .service-hero-image,body .about-page-portrait,body .project-screenshot img{border:1.5px solid #131311;box-shadow:5px 5px #131311;border-radius:16px}
body .about-page-portrait{border-radius:50%}
body .project-screenshot img{box-shadow:none;border-radius:10px}
body .shot-unavailable{background:#fafafa;border-color:#dfdfdf;border-radius:10px;color:#6c6c6a}
body .work-filters button,body .build-selector button{background:#fafafa;color:#131311;border:1px solid #131311;border-radius:10px;box-shadow:none}
body .work-filters button[aria-pressed=true],body .build-selector button[aria-selected=true]{background:#131311!important;color:#c6fd50!important;box-shadow:3px 3px #c6fd50}
body .work-orbit-section .project{border-color:#131311;box-shadow:5px 5px #131311;border-radius:16px}
body .work-orbit-section .project-cover{border-radius:12px}
body .work-orbit-section .project h3{color:inherit}
body .work-orbit-section .work-orbit-hub{background:#c6fd50;color:#131311;border:1px solid #131311;box-shadow:0 0 35px #c6fd5025,4px 4px #131311}
body .work-orbit-portal{background:#c6fd50}
body .work-orbit-heading p,body .work-orbit-footer,body .work-orbit-footer p{color:#6c6c6a}
body .portrait-frame{border-color:#131311;box-shadow:5px 5px #13131120}
body .about-closing-line{font-weight:900}
body .profile-studio{color:#131311}
body .live-project-map{background:#f4f4f4;border-color:#131311;box-shadow:4px 4px #131311}
body .live-milestones li{background:#fafafa;color:#41413f;border-color:#dfdfdf}
body .live-milestones li.is-current{background:#131311;color:#c6fd50;border-color:#131311}
body .live-milestones li.is-current span,body .live-milestones li.is-current strong,body .live-milestones li.is-current h3{color:#c6fd50}
body .live-milestones li.is-current p{color:#dfdfdf}
body .live-progress{background:#c6fd50}
body .ribbon-phrase{color:#fafafa;-webkit-text-fill-color:#fafafa;text-shadow:none}
body .ribbon-outline{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke-color:#c6fd50}
body .brand-band{background:#f4f4f4;border-color:#dfdfdf}
body .brand-band h2{color:#131311}
body .brand-item{background:#fafafa;border-color:#dfdfdf}
body .build-poster.skill-poster,body .build-poster.skill-automation,body .build-poster.skill-digital{--scene-accent:#131311;--scene-highlight:#517900;--scene-soft:#eff8dd;background:#f4f4f4;border:1px solid #131311;box-shadow:4px 4px #131311;color:#131311;border-radius:16px}
body .scene-chrome,body .scene-steps b,body .scene-heading,body .scene-footer,body .scene-viewport{color:#131311}
body .scene-chrome>span{background:#c6fd50;border-color:#131311;color:#131311}
body .scene-progress>span{background:#c6fd50}
body .build-explainer .mini-label,body .build-explainer .learn-points li:before{color:#131311}
body .flow-board.system-diagram{background:#fafafa;border-color:#dfdfdf}
body .automation-node{--node-accent:#131311;--node-wash:#f4f4f4;--node-edge:#dfdfdf;background:#fafafa;border-color:#dfdfdf;box-shadow:0 4px 0 #dfdfdf}
body .automation-node .line-icon,body .automation-node small,body .node-number{color:#41413f}
body .automation-node.is-running{background:#eff8dd!important;border-color:#96d411;box-shadow:0 0 18px #c6fd5050}
body .automation-node.is-complete{background:#eff8dd!important;border-color:#517900}
body .automation-node.is-error{background:#fff1f0!important;border-color:#a73e31}
body .automation-node.is-error small{color:#a73e31}
body .flow-edge{stroke:#b9b9b7}
body .flow-edge.is-running,body .flow-edge.is-complete{stroke:#517900}
body .demo-scenarios button,body .demo-scenarios button:hover{background:#fafafa;color:#131311;border:1px solid #131311;border-radius:10px;box-shadow:none}
body .demo-scenarios button[aria-pressed=true]{background:#131311;color:#c6fd50}
body .demo-badge{background:#eff8dd;color:#517900;border-color:#d7e7b4}
body .demo-invalid input{accent-color:#517900}
body .flow-status{color:#41413f}
body .note-visual i,body .note-system i,body .note-first i{color:#13131118}
body .note-card h3{color:#131311}
body .learning-table thead th,body .service-table thead th{background:#131311!important;color:#fafafa!important}
body .learning-table tbody th,body .learning-table tbody td,body .service-table tbody td{background:#fafafa;color:#41413f;border-color:#dfdfdf}
body .learning-table tbody th:last-child,body .learning-table tbody td:last-child{background:#eff8dd;color:#131311}
body .comparison-bottom p{color:#6c6c6a}
body .faq-list summary>span{color:#517900}
body .faq-list details[open]{background:#eff8dd!important}
body .tool-links>a{--tool-accent:#131311;--tool-wash:#f4f4f4;background:#f4f4f4;border:1px solid #131311;border-radius:12px;box-shadow:3px 3px #131311}
body .tool-links strong{color:#131311}
body .social-links a,body .contact-copy>.text-link{color:#c6fd50;border-color:#c6fd5045;text-shadow:none}
body .site-footer{background:#fafafa;color:#6c6c6a;border-color:#dfdfdf}
body .site-footer .footer-credit>a,body .site-footer .footer-top{color:#131311}
body .whatsapp-float{background:#c6fd50!important;color:#131311!important;border:1px solid #131311;border-radius:12px;box-shadow:4px 4px #131311}
body .whatsapp-float svg{color:#131311!important}
body .dialog{background:#fafafa;border-color:#131311;border-radius:20px;box-shadow:6px 6px #131311}
body .dialog::backdrop{background:#131311a0}
body .dialog-close{background:#131311;color:#fafafa}
body .dialog input,body .dialog select,body .dialog textarea{border-color:#b9b9b7;accent-color:#517900;background:#fff;color:#131311}
body .choice-grid input:checked+span{background:#eff8dd;border-color:#517900;color:#131311}
body .dialog-role{color:#517900}
/* Motion uses an independent translate channel: no overriding orbit or tilt transforms. */
.one-reveal{transition:opacity .7s var(--one-ease),translate .7s var(--one-ease);transition-delay:var(--one-delay,0ms)}
.one-reveal.one-pending{opacity:0;translate:0 10px}
.one-reading .one-word{color:#6c6c6a;transition:color .22s ease}
.one-reading .one-word.is-read{color:#131311}
.one-handwritten{font-family:'Sedgwick Ave',Satoshi,sans-serif;font-weight:400;letter-spacing:0}
@media(hover:hover) and (pointer:fine){body .service-card:hover,body .featured-project:hover,body .directory-project:hover{box-shadow:7px 7px #131311;border-color:#131311}body .service-hero-image:hover{box-shadow:8px 8px #131311;transition:box-shadow .35s var(--one-ease)}body .work-filters button:hover,body .build-selector button:hover{background:#eff8dd}}
@media(max-width:1200px){body .site-header .desktop-nav{display:none}body .mobile-nav .learning-menu[open]>summary{color:#517900}}
@media(max-width:760px){body .hero-copy h1{font-size:clamp(2.5rem,11vw,4.2rem);letter-spacing:-.04em}body .learning-intro h2{font-size:clamp(2rem,8.3vw,3rem)}body .service-card,body .featured-project,body .directory-project,body .learning-path-card{border-radius:12px;box-shadow:3px 3px #131311}body .learning-path-card{box-shadow:3px 3px #c6fd50}body .button{font-size:.9375rem;min-height:48px}body .site-header .header-inner>.button{font-size:.8125rem;min-height:44px;padding:10px 12px}body .hero-copy h1,body .service-hero h1{overflow-wrap:normal}body .one-handwritten{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.one-reveal,.one-reveal.one-pending{opacity:1;translate:none;transition:none}.one-reading .one-word{color:#131311;transition:none}body .button,body .service-card,body .featured-project{transition:none}body .button:hover{transform:none}}
@media(forced-colors:active){body .hero-radiant,body .radiant-word,body .hero-radiant .type-char,body .radiant-word .type-char,body .button .cta-label{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}body .button{background:ButtonFace!important;color:ButtonText!important;box-shadow:none}.one-reading .one-word{color:CanvasText}}
/* Small UI accents follow the same palette, including inline scene artwork. */
body .line-icon,body .automation-principles .line-icon{color:#131311}
body .scene-svg text{font-family:Satoshi,Arial,sans-serif;fill:#131311}
body .scene-svg .scene-light{fill:#fafafa}
body .scene-svg .scene-face{fill:#fafafa;stroke:#b9b9b7}
body .scene-svg .scene-back,body .scene-svg .scene-mid{fill:#dfdfdf}
body .scene-svg .scene-connector{stroke:#b9b9b7}
body .scene-svg .scene-soft{fill:#eff8dd}
body .scene-svg .scene-highlight{fill:#517900}
body .scene-svg rect[fill="#087763"]{fill:#131311}
body .scene-svg rect[fill="#ead8f8"],body .scene-svg rect[fill="#e5d9fa"],body .scene-svg rect[fill="#d4e5ff"],body .scene-svg rect[fill="#f7e5ca"],body .scene-svg rect[fill="#e4eefc"],body .scene-svg rect[fill="#f5eaf9"]{fill:#eff8dd}
body .scene-svg .scene-light.scene-small{fill:#fafafa}
body .scene-steps li,body .scene-steps span{color:#41413f}
body .build-explainer .skill-meta span,body .build-explainer .build-meta span{background:#eff8dd;color:#131311;border-color:#d7e7b4}
body .service-table-wrap th{background:#131311;color:#fafafa}
body .service-table-wrap td{border-color:#dfdfdf}
body .about-copy .about-statement{color:#131311}
@media(hover:hover) and (pointer:fine){body .project-screenshot{overflow:hidden;border-radius:10px}body .project-screenshot img{transition:transform .65s var(--one-ease)}body .directory-project:hover .project-screenshot img{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){body .directory-project:hover .project-screenshot img{transform:none;transition:none}}
body .build-explainer dt{color:#131311}
body .build-explainer dd{color:#6c6c6a}
body .map-label,body .scene-footer strong{color:#131311}
body .hero-copy h1 .type-cursor{background:#131311}

/* V50: one light canvas; constrained containers never paint a different strip. */
body,body.detail-page{background:var(--one-paper)}
body main,body .page-atmosphere{background:var(--one-paper)}
body .hero,body .manifesto,body .work-orbit-section,body .about-layout,body .live-build-story,body .capability-section,body .automation-section,body .brand-band,body .guide-section,body .process-section,body .notes-section,body .learning-comparison,body .faq-section,body .site-footer,body .page-links,body .service-content{background:transparent}
body .brand-band{border:0}
body .process-heading{border-top:0}
body .capability-section,body .process-section,body .about-layout{border:0}
/* Cards keep their functional borders and visual surfaces. */
body .build-explainer{padding:32px;min-width:0}
body .build-explainer>h3,body .build-explainer>p,body .build-explainer dl{max-width:100%;overflow-wrap:break-word}
body .build-explainer dl>div{grid-template-columns:minmax(72px,105px) minmax(0,1fr)}
body .note-card{overflow:hidden;padding:0}
body .note-card .note-visual{margin:0;border-radius:15px 15px 0 0}
body .note-copy{padding:24px}
body .note-copy h3{margin:12px 0}
body .note-copy>p:last-child{font-size:1rem;line-height:1.7;color:var(--muted);margin:0;overflow-wrap:break-word}
body .site-header .personal-logo-frame{width:220px;height:auto;aspect-ratio:7.51;display:flex;align-items:center;overflow:visible}
body .site-header .personal-logo{position:static;inset:auto;width:100%;height:auto;max-width:100%;object-fit:contain;filter:none}
@media(max-width:1200px){body .site-header .personal-logo-frame{width:180px}}
@media(max-width:760px){body .build-explainer{padding:22px}body .note-copy{padding:24px}body .site-header .personal-logo-frame{width:140px}body .site-header .header-inner>.button{max-width:126px}body .build-explainer dl>div{grid-template-columns:minmax(68px,84px) minmax(0,1fr);gap:10px}}
@media(max-width:360px){body .site-header .personal-logo-frame{width:114px}body .site-header .header-inner>.button{max-width:100px;font-size:.75rem;padding:10px 8px}body .build-panel{padding:12px}body .build-explainer{padding:20px}body .build-explainer dl>div{grid-template-columns:1fr;gap:4px}}

/* V51: black shared header, white navigation and a lime learning action. */
body .site-header,body .site-header.is-scrolled,body.detail-page .site-header{background:#131311;border-bottom-color:#2a2a27;box-shadow:none;color:#fafafa}
body .site-header .desktop-nav{background:#fafafa;color:#131311;border:1px solid #fafafa;box-shadow:0 2px 8px #0002}
body .site-header .desktop-nav>a,body .site-header .desktop-nav .learning-menu,body .site-header .desktop-nav .learning-menu summary{color:#131311}
body .site-header .desktop-nav>a,body .site-header .desktop-nav .learning-menu summary{border-radius:6px;padding:6px 8px;transition:background-color .2s,color .2s}
body .site-header .desktop-nav{gap:6px;padding-inline:10px}
body .site-header .desktop-nav>a:hover,body .site-header .desktop-nav .learning-menu summary:hover,body .site-header .desktop-nav .learning-menu[open]>summary{background:#c6fd50;color:#131311}
body .site-header .learning-menu-panel{background:#fafafa;border-color:#dfdfdf;box-shadow:4px 4px #fafafa40}
body .site-header .header-inner>.button{border-color:#fafafa;box-shadow:4px 3px #fafafa}
body .site-header .header-inner>.button:hover{box-shadow:6px 5px #fafafa}
body .site-header .header-inner>.button:active{box-shadow:1px 0 #fafafa}
body .site-header .menu-toggle{color:#fafafa}
body .site-header .menu-toggle:focus-visible{outline-color:#c6fd50}
body .site-header .mobile-nav{background:#fafafa;border-top-color:#dfdfdf;color:#131311}
body .site-header .mobile-nav>a,body .site-header .mobile-nav summary{color:#131311;border-radius:6px}
body .site-header .mobile-nav>a:hover,body .site-header .mobile-nav summary:hover,body .site-header .mobile-nav .learning-menu[open]>summary{background:#c6fd50;color:#131311}
body .site-header a:focus-visible,body .site-header summary:focus-visible{outline-color:#517900}
body .site-header .header-inner>.button:focus-visible{outline-color:#c6fd50}
/* Shared header-to-left navigation, excluding the standalone profile. */
body .site-header{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s;}
html.navigation-docked body .site-header{transform:translateY(-110%);opacity:0;pointer-events:none;}
.scroll-navigation{position:fixed;left:max(10px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;gap:12px;perspective:600px;}
.scroll-navigation[hidden]{display:none!important;}
.scroll-navigation>a,.scroll-navigation>details>summary{display:flex;align-items:center;justify-content:center;width:80px;min-height:68px;padding:8px 5px;border:1px solid #131311;border-radius:12px;background:#fafafa;color:#131311;font:700 .82rem/1.2 Satoshi,sans-serif;text-align:center;box-shadow:4px 5px 0 #131311;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;list-style:none;text-decoration:none;}
.scroll-navigation summary::-webkit-details-marker{display:none;}
.scroll-navigation>a:hover,.scroll-navigation summary:hover,.scroll-navigation details[open]>summary{background:#c6fd50;transform:translate(2px,2px);box-shadow:2px 3px 0 #131311;}
.scroll-navigation :focus-visible{outline:3px solid #c6fd50;outline-offset:5px;}
.scroll-navigation>details{position:relative;}
.scroll-navigation .learning-menu-panel{position:absolute;left:calc(100% + 14px);top:0;right:auto;width:230px;max-width:calc(100vw - 116px);padding:10px;background:#fafafa;border:1px solid #131311;border-radius:12px;box-shadow:4px 5px 0 #131311;}
.scroll-navigation .learning-menu-panel a{display:block;padding:12px;color:#131311;border-radius:7px;font-size:.9rem;}
.scroll-navigation .learning-menu-panel a:hover{background:#c6fd50;}
/* Fixed side navigation overlays the page without reserving a gutter. */
@media(max-width:1200px){.scroll-navigation{left:max(6px,env(safe-area-inset-left));gap:9px;}.scroll-navigation>a,.scroll-navigation>details>summary{width:60px;min-height:54px;font-size:.75rem;border-radius:10px;box-shadow:3px 4px 0 #131311;}.scroll-navigation .learning-menu-panel{left:calc(100% + 10px);max-width:calc(100vw - 88px);}}
@media(max-height:420px){.scroll-navigation{gap:6px;}.scroll-navigation>a,.scroll-navigation>details>summary{min-height:44px;}}
@media(prefers-reduced-motion:reduce){body .site-header,.scroll-navigation>a,.scroll-navigation summary{transition:none;}}

/* Full-height portfolio preview with equal card insets and an uncropped capture. */
.directory-project .full-site-preview{position:relative;align-self:stretch;min-height:620px;padding-bottom:34px;}
.full-site-preview .capture-window{position:absolute;inset:0 0 34px;overflow:auto;border:1px solid #dfdfdf;border-radius:10px;background:#fff;overscroll-behavior:contain;scrollbar-width:thin;}
body .full-site-preview .capture-window img{display:block;width:100%;height:auto;aspect-ratio:auto;max-width:100%;border:0;border-radius:0;transform:none!important;}
.full-site-preview .screenshot-caption{position:absolute;bottom:0;left:0;right:0;margin:0!important;line-height:1.4;}
.full-site-preview .capture-window:focus-visible{outline:3px solid #c6fd50;outline-offset:3px;}
@media(max-width:1024px){.directory-project .full-site-preview{min-height:520px;}}
@media(max-width:760px){.directory-project .full-site-preview{min-height:440px;padding-bottom:42px;}.full-site-preview .capture-window{bottom:42px;}}

.tabbed-site-preview .capture-window{top:58px;}
.tabbed-site-preview .capture-window[hidden]{display:none!important;}
.preview-tabs{display:flex;gap:8px;position:absolute;top:0;left:0;right:0;}
.preview-tabs button{flex:1;min-width:0;min-height:44px;padding:8px;border:1px solid #131311;border-radius:9px;background:#fafafa;color:#131311;font:700 .875rem Satoshi,sans-serif;cursor:pointer;}
.preview-tabs button[aria-selected=true]{background:#c6fd50;box-shadow:2px 3px 0 #131311;}
.preview-tabs button:focus-visible{outline:3px solid #131311;outline-offset:2px;}

/* Mobile/tablet refinement: retain the top header and a full-width content canvas. */
@media(max-width:1200px),(hover:none),(pointer:coarse){
 .scroll-navigation{display:none!important}
 html.navigation-docked body{padding-left:0!important}
 html.navigation-docked body .site-header,html.work-immersive body .site-header{transform:none!important;opacity:1!important;pointer-events:auto!important}
 body .site-header{position:sticky;top:0;z-index:120}
 body .site-header .mobile-nav[hidden]{display:none!important}
 body .site-header .learning-menu-panel{max-width:100%}
 body .build-panel,body .service-hero-grid,body .about-page-hero{grid-template-columns:minmax(0,1fr)}
 body .build-panel>*,body .service-hero-grid>*,body .about-page-hero>*,body .directory-project>*,body .page-links>div{min-width:0}
}
@media(max-width:760px){
 body .container,body .contact-inner{width:calc(100% - 32px);max-width:100%;min-width:0}
 body main,body section,body article,body .header-inner{min-width:0}
 body h1,body h2,body h3,body h4,body p,body li,body dd,body .cta-label{overflow-wrap:break-word;max-width:100%}
 body .hero-copy h1{font-size:clamp(2.15rem,9vw,3.5rem);line-height:1.16;white-space:normal;overflow-wrap:break-word}
 body .service-hero h1,body .about-page-hero h1{font-size:clamp(2rem,7.8vw,3rem);line-height:1.18;overflow-wrap:break-word}
 body .section-heading h2,body .editorial-heading h2,body .learning-intro h2,body .manifesto h2,body .contact-inner h2,body .comparison-heading h2,body .faq-intro h2,body .backend-intro h2,body .live-build-copy h2{font-size:clamp(1.8rem,6.7vw,2.6rem);line-height:1.22;letter-spacing:-.025em}
 body .about-layout>h2.about-closing-line{white-space:normal;font-size:clamp(1.6rem,6vw,2.3rem);line-height:1.3;text-align:center;width:100%;margin-inline:auto}
 body .service-block h2{font-size:clamp(1.65rem,6vw,2.25rem);line-height:1.25}
 body .service-block p,body .service-checks li,body .directory-copy p,body .note-copy>p:last-child,body .build-explainer>p{font-size:1rem;line-height:1.65}
 body .button{max-width:100%;white-space:normal;line-height:1.35;text-align:center}
 body .button .cta-label{white-space:normal}
 body .site-header .header-inner{gap:8px;min-height:72px}
 body .site-header .personal-logo-frame{width:clamp(110px,32vw,140px);flex-shrink:1}
 body .site-header .header-inner>.button{font-size:.8125rem;max-width:120px;padding:10px;flex-shrink:0}
 body .site-header .menu-toggle{flex:0 0 44px}
 body .site-header .mobile-nav{padding:8px 16px 16px}
 body .site-header .mobile-nav>a,body .site-header .mobile-nav summary,body .site-header .mobile-nav .learning-menu-panel a{font-size:1rem;line-height:1.4;white-space:normal;min-height:44px}
 body .learning-path-card{transform:none!important;min-width:0}
 body .learning-path-card h3,body .build-explainer h3,body .note-copy h3{font-size:1.4rem;line-height:1.3}
 body .build-explainer{padding:22px}
 body .build-explainer dl>div{grid-template-columns:minmax(0,1fr);gap:5px}
 body .build-explainer dt,body .build-explainer dd{font-size:1rem;line-height:1.55;margin:0}
 body .build-selector{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 body .build-selector button{font-size:1rem;white-space:normal;min-height:48px}
 body .build-panel{padding:16px;gap:20px}
 body .scene-viewport{max-width:100%;width:100%}
 body .featured-work,body .project-directory,body .service-grid{grid-template-columns:minmax(0,1fr)}
 body .directory-project{grid-template-columns:minmax(0,1fr);padding:18px;gap:24px}
 body .featured-project{padding:22px}
 body .project-url{overflow-wrap:anywhere}
 body .directory-project .full-site-preview{min-height:440px}
 body .preview-tabs{gap:5px}
 body .preview-tabs button{padding:8px 4px;font-size:.8125rem}
 body .note-copy{padding:24px}
 body .page-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-block:24px}
 body .page-links>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:auto}
 body .page-links strong{font-size:.875rem;line-height:1.4;overflow-wrap:break-word;margin-bottom:6px}
 body .page-links a{font-size:.875rem;line-height:1.4;min-height:44px;white-space:normal;overflow-wrap:break-word}
 body .site-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;padding-block:20px 24px;align-items:center}
 body .site-footer .footer-top{grid-column:1;grid-row:1;justify-self:start;font-size:.875rem;margin:0;min-height:44px}
 body .site-footer .footer-services{grid-column:2;grid-row:1;width:auto;max-width:none;justify-self:end;text-align:right;font-size:.8125rem;line-height:1.5;margin:0}
 body .site-footer .footer-credit{grid-column:1/-1;grid-row:2;width:100%;gap:2px;text-align:center}
 body .site-footer .footer-credit>a{font-size:.9375rem;line-height:1.4}
 body .site-footer .footer-copyright{font-size:.8125rem;line-height:1.5}
 body .work-orbit-section.orbit-ready .section-heading{top:88px}
 body .work-orbit-section.orbit-ready .orbit-core{max-width:48vw}
}
@media(max-width:360px){
 body .container,body .contact-inner{width:calc(100% - 24px)}
 body .site-header .header-inner{gap:6px}
 body .site-header .header-inner>.button{max-width:104px;font-size:.8125rem;padding:9px 7px}
 body .build-panel{padding:12px}
 body .build-explainer{padding:20px}
 body .flow-board.system-diagram{grid-template-columns:minmax(0,1fr)}
}

/* Personal portfolio finishing: charcoal, lime and neutral surfaces. */
body .process-grid article{--panel-accent:#131311;--panel-wash:#eff8dd;--panel-edge:#c6fd50}
body .process-grid article>span{background:#c6fd50;background-image:none;color:#131311;border-color:#131311;box-shadow:2px 2px #131311}
body .process-grid article:hover{background:#eff8dd!important;border-color:#131311}
body .note-visual{background:linear-gradient(135deg,#eff8dd,#c6fd50);color:#131311;box-shadow:none}
body .note-visual.note-system{background:linear-gradient(135deg,#131311,#2a2a27);color:#fafafa;box-shadow:none}
body .note-visual.note-first{background:linear-gradient(135deg,#f4f4f4,#e7e7e4);color:#131311;box-shadow:none}
body .note-visual i{color:#13131126}
body .note-visual.note-system i{color:#c6fd5066}
body .about-page-portrait{display:block;width:100%;max-width:380px;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center;border-radius:50%!important;overflow:hidden;box-shadow:0 12px 32px #13131118}
/* Footer service label is one complete line, with room on narrow screens. */
body .site-footer .footer-services{white-space:nowrap;word-break:normal;overflow-wrap:normal}
@media(max-width:760px){body .site-footer .footer-services{grid-column:1/-1;grid-row:2;justify-self:center;text-align:center;max-width:100%;font-size:clamp(.75rem,2.7vw,.875rem)}body .site-footer .footer-credit{grid-row:3}}
body .site-footer .footer-services{max-width:none;width:auto}
@media(min-width:1025px){body .site-footer{grid-template-columns:minmax(100px,1fr) minmax(220px,2fr) max-content}}

/* Full-width canvas with editorial spacing, independent of the overlay menu. */
html body{padding-inline:0!important;margin-inline:0!important;--page-gutter:clamp(24px,3.2vw,56px);--visual-gutter:clamp(12px,1.4vw,24px)}
html body .container,html body .contact-inner,html body main.service-content{width:100%!important;max-width:none!important;min-width:0;margin-inline:0!important;padding-inline:var(--page-gutter)!important}
html body main{margin-inline:0!important;max-width:none!important;min-width:0}
html body .hero.container,html body .notes-section.container,html body .learning-comparison.container{padding-inline:var(--visual-gutter)!important}
html body .work-orbit-section,html body .brand-band,html body .motion-ribbon,html body .pillar-window{width:100%;margin-inline:0;padding-inline:0}
html body main.service-content>.service-hero,html body main.service-content>.about-page-hero{margin-inline:calc(var(--page-gutter) * -.35)}
html.navigation-docked body{padding-inline:0!important}
html body>.scroll-navigation{position:fixed!important;width:max-content!important;margin:0!important;padding:0!important;z-index:110;gap:10px}
html body>.scroll-navigation>a,html body>.scroll-navigation>details>summary{width:70px;min-height:56px;font-size:.75rem}
html body .container>*{min-width:0}
html body .site-header .header-inner{padding-inline:clamp(12px,2vw,32px)!important}
@media(max-width:760px){html body{--page-gutter:20px;--visual-gutter:12px}html body .site-header .header-inner{padding-inline:10px!important}html body main.service-content>.service-hero,html body main.service-content>.about-page-hero{margin-inline:0}}
@media(max-width:360px){html body{--page-gutter:16px;--visual-gutter:10px}}
/* Compact lime-edged floating navigation. */
html body>.scroll-navigation{gap:8px}
html body>.scroll-navigation>a,html body>.scroll-navigation>details>summary{min-height:44px;height:44px;padding:6px 5px;box-shadow:3px 4px 0 #c6fd50;border-color:#a6cc57}
html body>.scroll-navigation>a:hover,html body>.scroll-navigation summary:hover{box-shadow:1px 2px 0 #c6fd50}
html body .rail-current{transform-origin:left center;will-change:translate,scale}
@media(prefers-reduced-motion:reduce){html body .rail-current{transition:none!important}}

/* Bottom-left rail: page enters beside it, then opens above it. */
/* Stable desktop content clearance; backgrounds remain full-width. */
@media(min-width:1201px) and (hover:hover) and (pointer:fine){
 html body{--rail-clearance:112px}
 html body>.scroll-navigation{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;max-height:calc(100svh - 36px);gap:7px}
 html body .container,html body .contact-inner,html body main.service-content{padding-left:var(--rail-clearance)!important;padding-right:var(--page-gutter)!important}
 html body .hero.container,html body .notes-section.container,html body .learning-comparison.container{padding-left:var(--rail-clearance)!important;padding-right:var(--visual-gutter)!important}
 html body .site-header .header-inner{padding-inline:clamp(12px,2vw,32px)!important}
 html body main.service-content>.service-hero,html body main.service-content>.about-page-hero{margin-inline:0!important}
 html body main>.pillar-window,html body main>.brand-band>.brand-window,html body main>.motion-ribbon{padding-left:var(--rail-clearance)!important}
 html body .work-orbit-scene{margin-left:var(--rail-clearance);width:calc(100% - var(--rail-clearance))}
}