/* Shared interface tokens and component rules, loaded after page styles. */
:root{--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--radius-card:12px;--radius-pill:999px;--control-size:44px;--content-gutter:5%;--focus-dark:var(--forest);--focus-light:var(--lime)}
.header{padding-inline:var(--content-gutter);gap:var(--space-4)}
.header-end{gap:var(--space-4)}
.header .language{min-height:var(--control-size);align-items:center}
.contact-link,.hero-bottom .round-link,.form-submit,.contact-layout .form-submit,.play-button,.legal-settings{min-height:var(--control-size);border-radius:var(--radius-pill);font-size:13px;line-height:1.4;display:inline-flex;align-items:center;justify-content:center;padding:14px 22px}
.service-toggle{width:var(--control-size);height:var(--control-size);padding:0;line-height:1;place-items:center;transform-origin:center}
.service-toggle svg{display:block;width:24px;height:24px;flex:none}
.service-item summary{grid-template-columns:64px 1fr 260px var(--control-size)}
.contact-layout .contact-side,.contact-layout .contact-grid{gap:var(--space-4)}
.contact-layout .contact-email>span:nth-child(2),.contact-side>div>a,.social-links{margin-top:var(--space-2)}
.contact-side .social-links a{margin-top:0;width:var(--control-size);height:var(--control-size)}
.social-links{gap:var(--space-1)}.social-links svg{display:block;width:20px;height:20px}
.contact-label{font-size:11px;line-height:1.5;letter-spacing:1.2px}
.form-fields label{line-height:1.5}.contact-layout .form-fields label{gap:var(--space-1);font-size:13px}
.contact-layout .form-fields input{min-height:var(--control-size)}
.form-fields input:focus,.form-fields textarea:focus{border-bottom-color:var(--lime)}
.contact-layout .form-note,.contact-layout .form-privacy{font-size:12px}
.site-footer{padding:var(--space-5) var(--content-gutter);gap:var(--space-4);min-height:110px}
.site-footer .legal-links{gap:var(--space-4);font-size:12px}
.legal-links a{display:inline-flex;align-items:center;min-height:var(--control-size);text-underline-offset:5px}
.legal-links a[aria-current=page]{text-decoration:underline}
.site-footer>.copyright{font-size:12px}
.work-preview{border-radius:var(--radius-card);outline-offset:5px}
.work-card{border-radius:var(--radius-card)}
.work-caption h3 a{transition:color .2s}
.work-card:focus-within .work-caption h3 a,.work-card:hover .work-caption h3 a{color:var(--lime)}
.work-preview:focus-visible img{transform:scale(1.035)}
.work-tags li{font-size:11px}.work-visit{font-size:12px;line-height:1.5;padding:10px 14px}
.work-caption{gap:var(--space-1)}.work-caption>span{font-size:12px}
.legal-body{max-width:none}.legal-body section{margin-top:var(--space-5)}
.legal-body h2{margin-bottom:var(--space-2)}
.legal-document h1{font-weight:500}
.legal-page .header .contact-link:focus-visible{outline-color:var(--focus-light)}
@media(max-width:1100px){.service-item summary{grid-template-columns:50px 1fr var(--control-size)}.header nav{gap:20px}.header-end{gap:20px}}
@media(max-width:800px){.site-footer .legal-links{gap:8px 20px}.site-footer{row-gap:16px}}
@media(max-width:700px){:root{--content-gutter:6%}.header{gap:12px}.header-end{gap:12px}.header .contact-link{font-size:11px;padding:10px 13px}.service-item summary{grid-template-columns:28px minmax(0,1fr) var(--control-size);gap:12px}.service-content{padding-left:40px}.service-toggle svg{width:22px;height:22px}.site-footer{padding-block:24px}.site-footer .legal-links{flex-direction:row;justify-content:flex-start;gap:4px 16px}.work-tags li{font-size:11px}.contact-label{font-size:11px}}
@media(max-width:380px){.header{padding-inline:5%;gap:8px}.header-end{gap:8px}.header .contact-link{padding:10px;font-size:10px}.header a.brand img.brand-lockup{width:156px}.site-footer .legal-links{flex-direction:column;gap:0}}
@media(prefers-reduced-motion:reduce){.work-preview:hover img,.work-preview:focus-visible img{transform:none}}

/* Persistent navigation, shared by the landing and legal pages. */
:root{--header-height:90px}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.header{position:sticky;top:0;z-index:15;background:var(--ink);height:var(--header-height)}
.header nav{gap:24px}.header nav a{white-space:nowrap}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid #ffffff50;border-radius:999px;background:transparent;font-size:12px}
.menu-toggle svg{width:20px;height:20px;display:block}
.menu-open .menu-toggle{background:var(--paper);color:var(--ink)}
@media(max-width:1280px){
.menu-toggle{display:inline-flex}
.header nav{display:none;position:absolute;top:100%;left:0;right:0;padding:16px var(--content-gutter) 24px;background:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 18px 28px #0003;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;max-height:calc(100svh - var(--header-height));overflow:auto}
.header.menu-open nav{display:grid}
.header nav a{display:flex;align-items:center;min-height:48px;padding:10px 0;font-size:15px}
}
@media(max-width:700px){:root{--header-height:70px}.header-end{gap:12px}.header-end .contact-link{display:none}.header nav{grid-template-columns:1fr 1fr;gap:8px 24px}.menu-toggle{padding:10px 12px}.header a.brand img.brand-lockup{width:180px}}
@media(max-width:380px){.header a.brand img.brand-lockup{width:145px}.header-end{gap:8px}.menu-toggle{padding:10px;font-size:11px}}
/* Section anchors meet the sticky header without revealing the previous section. */
html{scroll-padding-top:var(--header-height)}
main[tabindex="-1"]:focus,main>section[tabindex="-1"]:focus{outline:none}

/* Hero: clear proposition, a single primary action, an organic digital canopy. */
.hero{padding-top:72px;min-height:740px;height:calc(100svh - var(--header-height));max-height:980px}
.hero-copy{margin:0;max-width:1400px}
.hero h1{font-size:clamp(84px,8.4vw,132px);line-height:1.01;letter-spacing:-.065em}
.hero-bottom{flex-direction:column;align-items:flex-start;gap:28px;margin-top:32px;max-width:440px}
.hero-bottom p{max-width:390px;font-size:16px;line-height:1.8;color:#bdcec2}
.hero-bottom .round-link{background:var(--lime);border-color:var(--lime);color:var(--ink);padding:17px 27px;font-size:14px;box-shadow:0 0 36px #d5f2770a;transition:background .2s,box-shadow .2s}
.hero-bottom .round-link:hover{background:var(--paper);border-color:var(--paper);box-shadow:0 0 40px #d5f27718}
.hero-art{left:35%;right:-8%;top:-5%;bottom:-8%;opacity:1}
.hero-art:after{background:linear-gradient(90deg,var(--ink),#091c1670 12%,transparent 32%)}
@media(min-width:1700px){.hero{padding-top:80px}.hero-art{left:37%;right:0}}
@media(max-width:1100px) and (min-width:701px){.hero{min-height:700px;padding-top:72px}.hero h1{font-size:clamp(76px,9.3vw,102px)}.hero-art{left:28%;right:-25%;opacity:.85}.hero-bottom{max-width:370px}}
@media(max-width:700px){.hero{padding-top:42px;min-height:890px;height:auto;max-height:none}.hero h1{font-size:clamp(49px,12.7vw,84px);line-height:1.06}.hero-bottom{gap:22px;margin-top:26px;max-width:360px}.hero-bottom p{font-size:14px;line-height:1.75;max-width:330px}.hero-bottom .round-link{font-size:13px;padding:15px 23px}.hero-art{left:-14%;right:-14%;top:370px;bottom:0;opacity:1}.hero-art:after{background:linear-gradient(180deg,var(--ink) 0%,transparent 22%,transparent 88%,var(--ink))}}

/* Entry points and practical answers for small business owners. */
.needs{background:var(--ink);border-top:1px solid var(--line)}
.needs h2 em{color:var(--lime)}
.needs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.need-card{display:flex;flex-direction:column;align-items:flex-start;padding:32px;border:1px solid var(--line);border-radius:var(--radius-card);background:#ffffff03;min-width:0}
.need-icon{width:36px;height:36px;color:var(--lime);margin-bottom:32px}
.need-card h3{font:500 clamp(24px,2.2vw,32px)/1.2 Manrope,sans-serif;letter-spacing:-.04em;max-width:320px}
.need-card p{font-size:15px;line-height:1.8;color:var(--muted);margin:20px 0 24px}
.need-link{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;margin-top:auto;font-size:13px;color:var(--lime);text-decoration:underline;text-underline-offset:6px;text-decoration-color:#d5f27760;transition:text-decoration-color .2s}
.need-link:hover{text-decoration-color:var(--lime)}
.faq{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;border-top:1px solid #091c161a;align-items:start}
.faq h2{font-size:clamp(40px,4.6vw,69px)}
.faq-list{border-top:1px solid #091c1625;min-width:0}
.faq-item{border-bottom:1px solid #091c1625}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;list-style:none;font:500 21px/1.4 Manrope,sans-serif;letter-spacing:-.025em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-toggle{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #091c1635;border-radius:50%}
.faq-toggle svg{display:block;width:24px;height:24px;transition:transform .2s}
.faq-item[open] .faq-toggle{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.faq-item[open] .faq-toggle svg{transform:rotate(45deg)}
.faq-item p{font-size:16px;line-height:1.8;color:#59695f;padding:0 68px 24px 0}
.faq-item summary:focus-visible{outline:3px solid var(--forest);outline-offset:5px}
@media(min-width:1281px){.header nav{gap:18px}}
@media(max-width:1000px){.needs-grid{gap:16px}.need-card{padding:24px}.faq{gap:40px;grid-template-columns:1fr}}
@media(max-width:700px){.needs-grid{grid-template-columns:1fr;margin-top:32px}.need-card{padding:24px}.need-icon{margin-bottom:24px}.need-card h3{font-size:27px;max-width:none}.need-card p{margin:16px 0;font-size:15px}.faq{gap:32px}.faq h2{font-size:42px}.faq-item summary{font-size:19px;gap:16px;padding:18px 0}.faq-item p{font-size:15px;padding-right:0}.faq-toggle{flex-basis:44px}}
@media(prefers-reduced-motion:reduce){.faq-toggle svg,.need-link{transition:none}}

/* Light entry section separates the hero from the service list. */
.needs{background:#eaf0e8;color:var(--ink);border-top:0}
.needs h2 em,.needs .need-icon{color:var(--forest)}
.needs .need-card{background:var(--paper);border-color:#215c4526}
.needs .need-card p{color:#59695f}
.needs .need-link{color:var(--forest);text-decoration-color:#215c4555}
.needs .need-link:hover{text-decoration-color:var(--forest)}
.needs .need-link:focus-visible{outline-color:var(--forest)}
/* Native radio semantics, fully styled choices, no platform dropdown chrome. */
.subject-field{border:0;margin:0;padding:0;min-width:0}
.subject-field legend{font:400 13px/1.5 Inter,Arial,sans-serif;color:var(--muted);padding:0;margin-bottom:12px}
.subject-options{display:flex;flex-wrap:wrap;gap:8px}
.contact-layout .form-fields .subject-choice{position:relative;display:block;cursor:pointer}
.contact-layout .form-fields .subject-choice input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.subject-choice span{display:flex;align-items:center;min-height:44px;padding:11px 16px;border:1px solid #ffffff45;border-radius:var(--radius-pill);font-size:13px;line-height:1.5;color:var(--paper);transition:background .2s,border-color .2s,color .2s}
.subject-choice:hover span{border-color:var(--lime)}
.subject-choice input:checked+span{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.subject-choice input:focus-visible+span{outline:3px solid var(--lime);outline-offset:4px}
@media(max-width:380px){.subject-choice span{padding-inline:13px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.subject-choice span{transition:none}}

/* Separate portfolio from AI; keep the demonstration itself dark. */
.intelligence{background:var(--paper);color:var(--ink);border-top:0}
.intelligence .ai-heading h2 em{color:var(--forest)}
.intelligence .flow-demo{color:var(--paper);border-radius:var(--radius-card);overflow:hidden}
/* Choice controls stay secondary to the single lime submission action. */
.subject-choice span{gap:9px}
.subject-choice span:before{content:"";display:block;width:12px;height:12px;flex:0 0 12px;border:1px solid #afbeb480;border-radius:50%;box-sizing:border-box}
.subject-choice input:checked+span{background:#ffffff0c;border-color:#afbeb4;color:var(--paper)}
.subject-choice input:checked+span:before{border-color:var(--paper);background:var(--paper);box-shadow:inset 0 0 0 3px var(--ink)}
.subject-choice:hover span{border-color:var(--paper)}

.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.form-submit:disabled{opacity:.65;cursor:wait}
/* Contact links follow the text on each line, without a full-column hit area. */
.contact-side>div>a{display:inline;margin:0}
.contact-side>div:has(>a)>.contact-label{margin-bottom:var(--space-2)}

/* A clear, compact form panel with individually outlined text fields. */
.contact-layout .project-form{padding:28px;border:1px solid #ffffff26;border-radius:20px;background:#ffffff03}
.contact-layout .form-fields{gap:20px}
.contact-layout .form-fields>label{gap:8px}
.contact-layout .form-fields>label>input,.contact-layout .form-fields>label>textarea{border:1px solid #ffffff38;border-radius:10px;background:#ffffff04;padding:12px 14px;font-size:16px;line-height:1.5;outline-offset:3px;transition:border-color .2s,background .2s}
.contact-layout .form-fields>label>input{min-height:48px}
.contact-layout .form-fields>label>textarea{min-height:112px}
.contact-layout .form-fields>label>input:focus,.contact-layout .form-fields>label>textarea:focus{border-color:var(--lime);background:#ffffff07}
@media(max-width:700px){.contact-layout .project-form{padding:20px 16px;border-radius:16px}.contact-layout .form-fields{gap:18px}.contact-layout .subject-options{gap:8px}.contact-layout .subject-choice span{padding:10px 12px;font-size:13px}}