/* Section rhythm and system theme. Brand ink and image colors stay constant. */
:root{color-scheme:light;--page:#fff;--page-text:#191919;--page-secondary:#454545;--page-panel:#f3f3f3;--page-rule:#ccc;--header:#fffffff5;--focus:#191919}
body{background:var(--page);color:var(--page-text);font-size:16px}
.skip-link{color:var(--ink)}
main>section[data-surface='light'],.site-footer{--surface:#fff;--text:#191919;--secondary:#454545;--panel:#f4f4f4;--rule:#ccc;--focus:#191919;color-scheme:light}
main>section[data-surface='dark']{--surface:#191919;--text:#fff;--secondary:#ededed;--panel:#292929;--rule:#666;--focus:#ffdc28;color-scheme:dark}
main>section[data-surface],.site-footer{background:var(--surface);color:var(--text)}
.site-header{background:var(--header);color:var(--page-text);border-color:var(--page-rule)}
.preview-note{background:var(--page-panel);color:var(--page-text);font-size:12px;letter-spacing:.06em}
.preview-note span{color:var(--page-secondary)}
.main-nav a{color:var(--page-secondary);font-size:14px}
.main-nav a:is(:hover,:focus-visible,.is-active){color:var(--page-text)}
.section-top{border-color:var(--rule);color:var(--secondary);font-size:12px}
body .section-top .eyebrow,body .eyebrow{font-size:12px;letter-spacing:.1em;color:var(--secondary,var(--page-secondary))}
body .hero-copy>.eyebrow,body .about-copy>.eyebrow,body .case-extra-copy>.eyebrow,body .final-cta .eyebrow{font-size:12px}
body .section-heading>p{font-size:16px;line-height:1.8;color:var(--secondary)}
body .case-study .section-heading>p,body .improvements .section-heading>p{font-size:16px;color:var(--secondary)}
main>section[data-surface='dark'] h2 em,main>section[data-surface='dark'] .section-top .eyebrow{color:var(--yellow)}
body :is(a,button,input,summary,[tabindex='0']):focus-visible{outline-color:var(--focus)}
body .text-link{color:var(--text,var(--page-text));font-size:14px;min-height:44px}
body .hero-actions .text-link{font-size:14px}
body .text-link:is(:hover,:focus-visible,.is-pressed){color:var(--text,var(--page-text))}
main>section[data-surface='dark'] .text-link:is(:hover,:focus-visible,.is-pressed){color:var(--yellow)}
body .button,body .hero-actions .button,body .case-extra .button{font-size:14px;min-height:52px}
body .button-small{min-height:48px}
body .button-yellow{color:var(--ink)}
body .button-yellow:is(:hover,:focus-visible,.is-pressed){background:var(--ink);color:var(--yellow);border-color:var(--yellow)}
body .button-yellow:is(:hover,:focus-visible,.is-pressed) .button-arrow{background:var(--yellow);color:var(--ink)}
.hero-copy>.eyebrow,.hero-lede,.hero-signature p>span,.hero-bottom p{color:var(--secondary)}
body .hero-lede{font-size:18px;line-height:1.75}
.highlight{background:var(--yellow);color:var(--ink);padding:0 .04em}
.highlight:after{display:none}
body .hero-signature p>strong{font-size:14px;color:var(--text)}
body .hero-signature p>span{font-size:13px;line-height:1.7;max-width:340px}
body .hero-bottom p,body .hero-bottom a{font-size:14px;line-height:1.7}
body .hero-bottom a{min-height:44px}
.hero-bottom{border-color:var(--rule)}
.hero-bottom strong{color:var(--text)}
.hero-visual{--focus:#191919;color:var(--ink)}
body .showcase-topline{font-size:12px;letter-spacing:.05em;gap:12px;flex-wrap:wrap}
body .showcase-caption small{font-size:12px;line-height:1.6}
.showcase-caption .round-arrow{color:var(--ink)}
body .approach-grid>.eyebrow{color:var(--secondary)}
.approach-copy{color:var(--secondary);font-size:16px;line-height:1.8}
.approach-copy .text-link{color:var(--text)}

/* Gallery remains a dark presentation surface in both modes. Screenshot
   backgrounds stay white; no CSS filters alter portfolio evidence. */
body .case-study .section-top{border-color:var(--rule);color:var(--secondary)}
body .case-description p,body .case-extra-copy>p:not(.eyebrow){font-size:16px;line-height:1.8;color:var(--secondary)}
.case-tab{color:var(--text);background:var(--panel);border-color:var(--rule)}
body .case-tab{font-size:14px;line-height:1.4}
.case-tab span{font-size:12px;opacity:1}
.case-tab[aria-selected='true'],.case-tab:is(:hover,:focus-visible,.is-pressed){color:var(--ink)}
.case-panel,.case-extra{background:var(--panel);border-color:var(--rule)}
body .gallery-category,body .gallery-counter{font-size:12px;line-height:1.5}
.gallery-category,.gallery-date,.compare-control{color:var(--secondary)}
.gallery-toolbar p{flex-wrap:wrap;line-height:1.5}
body .gallery-zoom-actions button,body .layout-button{font-size:14px;line-height:1.4;min-height:44px}
.layout-button,.gallery-zoom-actions button{color:var(--text)}
body .compare-control,body .compare-control #compare-value{font-size:12px;line-height:1.5}
.compare-control input{min-height:44px}
body .compare-label,body .side-comparison figcaption{font-size:12px;letter-spacing:.07em}
body .gallery-date,body .case-caption{font-size:12px;line-height:1.8;color:var(--secondary)}
body .case-tags li{font-size:12px;line-height:1.4;color:var(--secondary);border-color:var(--rule)}
body .case-extra-copy>.eyebrow{color:var(--yellow)}
body .case-extra .text-link{font-size:14px;color:var(--text);line-height:1.6}
.gallery-arrows button{color:var(--text);border-color:var(--rule)}
.gallery-arrows button:is(:hover,:focus-visible,.is-pressed){background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* Pricing cards carry their own text palette inside the dark section. */
.package{--card-surface:#fff;--card-text:#191919;--card-secondary:#454545;--card-rule:#c7c7c7;--focus:var(--card-text);background:var(--card-surface);color:var(--card-text);border-color:var(--card-rule)}
.package-plus{--card-surface:#292929;--card-text:#fff;--card-secondary:#ededed;--card-rule:#777;border-color:var(--yellow)}
body .package .package-kicker{color:var(--card-secondary);font-size:12px;line-height:1.6;letter-spacing:.06em}
body .package .package-tag{font-size:12px;background:var(--yellow);color:var(--ink)}
body .package .package-intro{font-size:16px;color:var(--card-secondary);line-height:1.8}
body .package .feature-list strong{font-size:16px;line-height:1.5;color:var(--card-text)}
body .package .feature-list span{font-size:16px;line-height:1.7;color:var(--card-secondary)}
.package .feature-list li,.package .package-link{border-color:var(--card-rule)}
.package .package-link{color:var(--card-text);font-size:14px;line-height:1.6;min-height:64px}
.package .package-link .round-arrow{width:44px;height:44px;color:var(--card-text);border-color:var(--card-rule)}
.package .package-link:is(:hover,:focus-visible,.is-pressed){background:var(--yellow);color:var(--ink)}
.package .package-link:is(:hover,:focus-visible,.is-pressed) .round-arrow{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
body .packages-note{max-width:1000px;font-size:14px;line-height:1.8;color:var(--secondary)}

/* Native expandable cards, including every selected/hover state. */
.service-card,.process-card{background:var(--panel);color:var(--text);border-color:var(--rule)}
.service-card:is(:hover,:focus-within),.process-card:is(:hover,:focus-within){border-color:var(--focus)}
.service-trigger,.process-trigger{color:var(--text)}
body .service-description{font-size:16px;line-height:1.8;color:var(--secondary);font-weight:500}
body .service-card>.card-detail{background:var(--panel);color:var(--text);font-size:16px;line-height:1.8;border-color:var(--rule)}
.service-card .card-detail p,.service-card .card-detail p strong,.service-card .card-detail .text-link{color:var(--text)}
body .service-card .card-detail .text-link{font-size:14px}
body .service-extra{font-size:16px;line-height:1.8;color:var(--secondary)}
body .card-action{font-size:12px}
.service-card[open]>.service-trigger{background:var(--yellow);color:var(--ink)}
.service-card[open] .service-description,.service-card[open] .service-title{color:var(--ink)}
.process-trigger{min-height:365px}
.process-number{color:var(--text)}
body .process-description{font-size:16px;line-height:1.8;color:var(--secondary)}
body .process-more{font-size:12px;line-height:1.5;color:var(--text)}
body .process-card .card-detail{background:var(--panel);color:var(--text);border-color:var(--rule);font-size:16px;line-height:1.8;border-radius:0 0 13px 13px}
.process-card .card-detail p strong{color:var(--text)}
.process-card[open]>.process-trigger{background:var(--yellow);color:var(--ink)}
.process-card[open] .process-number,.process-card[open] .process-description,.process-card[open] .process-more{color:var(--ink)}
.process-card[open] .card-toggle{background:var(--ink);color:var(--yellow)}
@media(hover:hover) and (pointer:fine){
 .service-trigger:hover{color:var(--ink)}
 .service-trigger:hover .service-title,.service-trigger:hover .service-description{color:var(--ink)}
 .process-trigger:hover{background:var(--yellow);color:var(--ink)}
 .process-trigger:hover .process-number,.process-trigger:hover .process-description,.process-trigger:hover .process-more{color:var(--ink)}
 .process-trigger:hover .card-toggle{background:var(--ink);color:var(--yellow)}
}

/* The person behind the work leads directly into the final contact. */
.about-copy>.eyebrow,.about-note p{color:var(--secondary)}
body .about-copy>p:not(.eyebrow){font-size:16px;line-height:1.8;max-width:520px;color:var(--secondary)}
.about-photo{background:var(--panel)}
body .about-photo figcaption{color:var(--secondary);font-size:12px;line-height:1.7;flex-wrap:wrap}
.about-photo figcaption>span:first-child,.about-note strong{color:var(--text)}
.about-note{border-color:var(--rule)}
.about-note>span{background:var(--yellow);color:var(--ink);flex:none}
body .about-note p{font-size:16px;line-height:1.7}
.about-contact{margin-top:20px}
body .final-cta .eyebrow{color:var(--yellow)}
.final-cta h2 em{color:var(--yellow)}
body .cta-detail>p{color:var(--secondary);font-size:16px;line-height:1.8;max-width:440px}
body .contact-handle{color:var(--secondary);font-size:12px;line-height:1.7}
.final-cta .button-dark{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.final-cta .button-dark .button-arrow{background:var(--ink);color:var(--yellow)}
.final-cta .button-dark:is(:hover,:focus-visible,.is-pressed){background:#fff;color:var(--ink);border-color:#fff}
.final-cta .button-dark:is(:hover,:focus-visible,.is-pressed) .button-arrow{background:var(--ink);color:#fff}
body .footer-inner>p,body .footer-inner>span{font-size:12px;line-height:1.7;color:var(--secondary)}
.back-top{border-color:var(--rule)}
.back-top:hover{color:var(--ink)}

/* The dialog sits outside main, so it needs the page palette explicitly. */
.image-dialog{--focus:var(--page-text);background:var(--page);color:var(--page-text);border-color:var(--page-rule);color-scheme:inherit}
body .dialog-header .eyebrow,body .dialog-date{font-size:12px;line-height:1.7;color:var(--page-secondary)}
.dialog-version{background:var(--page-panel);border-color:var(--page-rule)}
.dialog-version button,.dialog-close,.dialog-scale{color:var(--page-text);border-color:var(--page-rule)}
body .dialog-version button,body .dialog-scale,body .dialog-footer button{font-size:14px;line-height:1.5;min-height:44px}
.dialog-tools,.dialog-footer{flex-wrap:wrap}
.dialog-version button[aria-pressed='true'],.dialog-version button:is(:hover,:focus-visible,.is-pressed),.dialog-scale:is(:hover,:focus-visible,.is-pressed),.dialog-footer button:is(:hover,:focus-visible,.is-pressed){background:var(--yellow);color:var(--ink)}
.dialog-version button[aria-pressed='true']:is(:hover,:focus-visible,.is-pressed){background:var(--ink);color:var(--yellow)}
.dialog-close:is(:hover,:focus-visible,.is-pressed){background:var(--yellow);color:var(--ink)}

@media(max-width:1000px){.process-trigger{min-height:325px}}
@media(max-width:850px){.gallery-bottom{flex-wrap:wrap}.gallery-date{width:100%}.gallery-zoom-actions{margin-left:0}.gallery-arrows{margin-left:auto}}
@media(max-width:680px){
 body .hero-copy>.eyebrow{font-size:12px;letter-spacing:.06em}
 body .hero-lede{font-size:16px}
 body .hero-signature p>span{font-size:13px;max-width:100%;line-height:1.7}
 body .hero-actions .button,body .hero-actions .text-link{font-size:14px}
 .hero-actions{gap:14px;align-items:center}
 body .hero-bottom p{font-size:13px;max-width:185px}
 body .hero-bottom a{font-size:12px;white-space:normal;gap:10px;max-width:125px}
 body .menu-button{min-height:44px;min-width:98px}
 body .menu-button .menu-label,body .menu-button[aria-expanded='true'] .menu-label{font-size:14px}
 body .brand-name>.brand-subline{font-size:12px;letter-spacing:.14em}
 body .section-top .eyebrow{font-size:12px;letter-spacing:.07em}
 body .case-tab{font-size:14px;padding:14px 11px;gap:8px;min-height:60px;align-items:flex-start}
 body .case-tab>span{font-size:12px;padding-top:1px;flex:none}
 .gallery-toolbar{flex-wrap:wrap}
 body .gallery-category{display:inline;font-size:12px;letter-spacing:.04em}
 body .gallery-counter{font-size:12px}
 body .layout-button{font-size:14px;padding:8px}
 .gallery-bottom{gap:10px}
 .gallery-zoom-actions{gap:8px;flex-wrap:wrap;width:100%;order:3}
 body .gallery-zoom-actions button{font-size:14px;padding:10px}
 body .gallery-date{font-size:12px;width:auto;flex:1;margin:0}
 .gallery-arrows{margin-left:auto}
 .compare-control{gap:10px;flex-wrap:wrap}
 body .compare-control label{font-size:12px;max-width:none;width:100%}
 body .compare-control #compare-value{font-size:12px}
 body .compare-label,body .side-comparison figcaption{font-size:12px;padding:7px 9px;letter-spacing:.04em}
 .package-head{flex-wrap:wrap}
 body .package .package-tag{font-size:12px}
 body .service-description,body .service-card>.card-detail,body .process-description,body .process-card .card-detail{font-size:16px}
 body .card-action,body .process-more{font-size:12px}
 .about-contact{width:100%;max-width:340px;gap:16px;text-align:left}
 body .about-copy>.eyebrow{font-size:12px}
 .cta-detail .button{width:100%;max-width:340px}
 .footer-inner>span{border-color:var(--rule)}
 body .dialog-version button{padding:10px 11px}
 body .dialog-footer button{font-size:14px;max-width:145px}
 .dialog-date{order:3;width:100%;text-align:center}
}
@media(max-width:430px){.process-trigger{min-height:0}}
@media(max-width:360px){.header-inner{gap:15px}.brand{gap:8px}}

/* No script or stored preference: CSS responds to system changes immediately.
   Light mode has white/black alternation; dark mode uses two dark surfaces. */
@media(prefers-color-scheme:dark){
 :root{color-scheme:dark;--page:#141414;--page-text:#fff;--page-secondary:#e2e2e2;--page-panel:#222;--page-rule:#686868;--header:#141414f5;--focus:#ffdc28}
 main>section[data-surface='light'],.site-footer{--surface:#141414;--text:#fff;--secondary:#e2e2e2;--panel:#242424;--rule:#686868;--focus:#ffdc28;color-scheme:dark}
 main>section[data-surface='dark']{--surface:#242424;--text:#fff;--secondary:#ededed;--panel:#303030;--rule:#777;--focus:#ffdc28}
 .package{--card-surface:#303030;--card-text:#fff;--card-secondary:#ededed;--card-rule:#777}
 .package-plus{--card-surface:#191919;--card-text:#fff;--card-secondary:#ededed;--card-rule:#777}
 .header-action{background:var(--yellow);color:var(--ink)}
 .header-action .button-arrow{background:var(--ink);color:var(--yellow)}
 .header-action:is(:hover,:focus-visible,.is-pressed){background:#fff;color:var(--ink);border-color:#fff}
 .header-action:is(:hover,:focus-visible,.is-pressed) .button-arrow{background:var(--ink);color:#fff}
 .brand:is(:hover,:focus-visible,.is-pressed){background:var(--yellow);color:var(--ink)}
 .digital-sign{background:#303030;color:#fff;border-color:#777}
 .brand:is(:hover,:focus-visible,.is-pressed) .digital-sign{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
 .main-nav a:is(:hover,:focus-visible,.is-pressed){background:#ffdc2820;color:#fff}
 .mobile-nav:not([hidden]){border-color:#777}
 .menu-button{background:#303030;color:#fff;border-color:#777}
 .menu-button:is(:hover,:focus-visible,.is-pressed),.menu-button[aria-expanded='true']{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
 .service-number{background:var(--yellow);color:var(--ink)}
 .back-top:hover{background:var(--yellow);color:var(--ink)}
}