/* r17/r18 brand: big logo lockup hero (brand sheet: Charcoal #0F0F0F, Warm Off-White #FAF8F2, Fresh Green #6CBF5B).
   Loaded after buttons.css on index, privacy and terms. The lockup is a traced SVG (assets/brand/bywill-lockup.svg, 731x268), inlined in the hero so it paints with the first frame (no image request on the LCP path). */
html body .site-header .brand{width:auto;height:50px;max-width:none;aspect-ratio:731/268}
html body .footer-brand .brand-footer{width:auto;height:64px;aspect-ratio:731/268}
html body .site-header,html body .site-header.bw-opening-header{background:#FAF8F2}

/* r18 hero: only the lockup + tagline "Greater capacity and stronger support." with an entrance animation,
   soft drifting brand-colour shapes and a scroll cue. Animations run under prefers-reduced-motion too (Will has
   Windows animations off), just slower and with smaller movement. Everything animates transform/opacity only;
   the section has a fixed min-height so nothing shifts (CLS 0). Animated text starts at opacity .01 (not 0) so
   it still counts as painted on the first frame for LCP. */
.bw-brand{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;
 min-height:calc(100vh - 82px);min-height:calc(100svh - 82px);max-height:none;box-sizing:border-box;padding:48px 15px 96px;background:#FAF8F2;color:#0F0F0F;text-align:center}
@media(min-height:1000px){.bw-brand{min-height:860px}}
.bw-brand-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bw-orb{position:absolute;border-radius:50%;will-change:transform}
.bw-orb-1{width:620px;height:620px;left:calc(50% - 640px);top:-180px;background:radial-gradient(closest-side,rgba(108,191,91,.30),rgba(108,191,91,0));animation:bw-drift-1 18s ease-in-out infinite alternate}
.bw-orb-2{width:560px;height:560px;right:calc(50% - 660px);bottom:-200px;background:radial-gradient(closest-side,rgba(108,191,91,.24),rgba(108,191,91,0));animation:bw-drift-2 22s ease-in-out infinite alternate}
.bw-orb-3{width:420px;height:420px;left:calc(50% + 120px);top:-120px;background:radial-gradient(closest-side,rgba(15,15,15,.06),rgba(15,15,15,0));animation:bw-drift-3 26s ease-in-out infinite alternate}
@keyframes bw-drift-1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(140px,90px,0) scale(1.15)}}
@keyframes bw-drift-2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-160px,-70px,0) scale(.92)}}
@keyframes bw-drift-3{from{transform:translate3d(0,0,0)}to{transform:translate3d(-120px,110px,0)}}

.bw-brand-logo{position:relative;margin:0 auto;line-height:0;animation:bw-logo-in 1.1s cubic-bezier(.2,.8,.2,1) both}
.bw-brand-logo .bw-brand-svg{display:block;width:min(600px,84vw);height:auto;aspect-ratio:731/268;margin:0 auto}
/* a soft green glow blooms behind the lockup, then breathes gently */
.bw-brand-logo::before{content:"";position:absolute;left:50%;top:50%;width:130%;height:190%;margin:-95% 0 0 -65%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(108,191,91,.28),rgba(108,191,91,.10) 55%,rgba(108,191,91,0));animation:bw-glow-in 1.4s .3s ease-out both,bw-glow 6s 1.7s ease-in-out infinite alternate}
@keyframes bw-logo-in{from{opacity:.01;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes bw-glow-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes bw-glow{from{opacity:1;transform:scale(1)}to{opacity:.65;transform:scale(1.08)}}

.bw-tagline{margin:30px auto 0;max-width:900px;font:800 32px/1.2 BywillHeadline,Montserrat,Helvetica,sans-serif;letter-spacing:-.6px;color:#0F0F0F;text-wrap:balance}
.bw-tagline span{display:inline-block;animation:bw-word-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.75s + var(--i,0) * .14s)}
.bw-tagline span:last-child{color:#4f9a40}
@keyframes bw-word-in{from{opacity:.01;transform:translateY(.55em)}to{opacity:1;transform:none}}
.bw-tagline::after{content:"";display:block;width:84px;height:4px;margin:22px auto 0;border-radius:4px;background:linear-gradient(90deg,#6CBF5B,#4f9a40,#6CBF5B);background-size:200% 100%;transform-origin:center;animation:bw-bar-in .8s 1.6s cubic-bezier(.2,.8,.2,1) both,bw-bar-flow 4s 2.4s linear infinite}
@keyframes bw-bar-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bw-bar-flow{from{background-position:0 0}to{background-position:200% 0}}

.bw-scroll-cue{position:absolute;left:50%;bottom:26px;width:28px;height:44px;margin-left:-14px;border:2px solid #0F0F0F;border-radius:16px;opacity:.7;animation:bw-fade-in .8s 2s both}
.bw-scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#4f9a40;animation:bw-cue 1.8s 2.4s ease-in-out infinite}
.bw-scroll-cue:hover{opacity:1}
@keyframes bw-fade-in{from{opacity:0}to{opacity:.7}}
@keyframes bw-cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}}
.bw-brand :focus-visible{outline:3px solid #9b542b;outline-offset:4px}
#bw-opening{scroll-margin-top:82px}

/* header logo hides while the big hero logo is on screen (hero.js toggles .bw-hero-logo-on) */
html body .site-header .logo-link{transition:opacity .35s ease,visibility .35s}
html body .site-header.bw-hero-logo-on .logo-link{opacity:0;visibility:hidden}

/* reduced motion: still animates (Will's request), but slower and with smaller movement */
@media(prefers-reduced-motion:reduce){
 .bw-brand-logo{animation-duration:1.6s;animation-name:bw-logo-in-soft}
 @keyframes bw-logo-in-soft{from{opacity:.01;transform:scale(.97)}to{opacity:1;transform:none}}
 .bw-tagline span{animation-duration:1s;animation-name:bw-word-in-soft;animation-delay:calc(.9s + var(--i,0) * .18s)}
 @keyframes bw-word-in-soft{from{opacity:.01;transform:translateY(.2em)}to{opacity:1;transform:none}}
 .bw-orb-1{animation-duration:30s}.bw-orb-2{animation-duration:36s}.bw-orb-3{animation-duration:42s}
 .bw-scroll-cue span{animation-duration:2.6s}
}

/* second section: the former hero headline with the typing word */
.bw-opening{background:#FFFFFF;padding:80px 15px 72px}
.bw-opening .bw-discover{margin:22px auto 24px}
.bw-opening h2{box-sizing:content-box;font:900 64px/1.1 BywillHeadline,Helvetica,sans-serif;letter-spacing:-1.3px;max-width:1200px;padding:10px 0;margin:0 auto;text-wrap:balance;color:#0F0F0F}
.bw-opening .bw-benefit-line{display:block;min-height:1.1em}

@media(max-width:1050px){.bw-opening h2{font-size:clamp(40px,6.4vw,62px);line-height:1.04;letter-spacing:-.03em}}
@media(max-width:770px){
 html body .site-header .brand{height:42px}
 .bw-brand{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);padding:32px 15px 90px}
 .bw-brand-logo .bw-brand-svg{width:min(360px,88vw)}
 .bw-tagline{margin-top:22px;font-size:23px;letter-spacing:-.3px;max-width:340px}
 .bw-tagline::after{width:64px;margin-top:18px}
 .bw-orb-1{width:420px;height:420px;left:-220px;top:-140px}
 .bw-orb-2{width:400px;height:400px;right:-220px;bottom:-140px}
 .bw-orb-3{width:280px;height:280px;left:auto;right:-90px;top:-80px}
 #bw-opening{scroll-margin-top:72px}
 .bw-scroll-cue{bottom:104px}
 .bw-opening{padding:52px 15px 48px}
 .bw-opening h2{font-size:clamp(28px,8.4vw,38px);line-height:1.08;letter-spacing:-.8px}
}

/* r18 "On GitHub" strip at the end of the Tools section, and X/GitHub icons in About Will (reuses .footer-social) */
.gh-strip{margin-top:2.4rem;padding:1.6rem;border:1px solid #0f0f0f1f;border-radius:16px;background:#FAF8F2;display:grid;grid-template-columns:minmax(180px,240px) 1fr auto;gap:1.4rem 2rem;align-items:center}
.gh-head{display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;align-items:center}
.gh-mark{display:inline-flex;width:40px;height:40px;border-radius:50%;background:#0F0F0F;color:#fff;align-items:center;justify-content:center;grid-row:span 2}
.gh-head h3{margin:0;font-size:1.05rem;line-height:1.2}
.gh-head p{margin:0;color:#5c5f57;font-size:.85rem}
.gh-repos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.gh-repo a{display:flex;flex-direction:column;gap:.25rem;height:100%;box-sizing:border-box;padding:.85rem 1rem;border:1px solid #0f0f0f1f;border-radius:10px;background:#fff;color:#0F0F0F;text-decoration:none;transition:border-color .2s,transform .2s}
.gh-repo a:hover{border-color:#4f9a40;transform:translateY(-2px)}
.gh-name{font-weight:700;font-size:.92rem;overflow-wrap:anywhere}
.gh-desc{font-size:.84rem;line-height:1.4;color:#4a4d46}
.gh-strip .gh-all{min-height:48px;white-space:nowrap}
.gh-strip :focus-visible{outline:3px solid #9b542b;outline-offset:3px}
.founder-social{margin-top:1.6rem}
@media(max-width:900px){.gh-strip{grid-template-columns:1fr;padding:1.2rem}.gh-strip .gh-all{width:100%}}
/* r19: centred, static "Start here for free" CTA block in the white section */
.bw-opening .bw-discover{margin:22px auto 30px}
.bw-cta-block{display:flex;flex-direction:column;align-items:center;max-width:520px;margin:0 auto;padding:0 0 4px}
.bw-start{margin:0 0 14px;font:800 15px/1.2 BywillHeroText,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#4f9a40}
html body .bw-opening #bw-hero-entry{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:460px;margin:0 auto}
html body .bw-opening #bw-hero-email{width:100%;box-sizing:border-box;height:52px;border-radius:var(--btn-radius,10px);text-align:center}
html body .bw-opening #bw-hero-entry button{width:100%;flex:none;height:58px;border-radius:var(--btn-radius,10px);font-size:16px;letter-spacing:.08em}
/* every "Build my AI prototype" label in capitals (CSS, so screen readers still read words, not letters) */
html body :is([data-prototype-cta],#bw-hero-entry button,.dx-btn-primary){text-transform:uppercase;letter-spacing:.06em}
/* r19: nothing labelled "Build my AI prototype" follows the page while scrolling.
   The header stays sticky, but its CTA button is removed (the mobile menu's CTA only shows inside the opened menu).
   The chat widget's floating "Build My AI Prototype" bubble is hidden; the chat still opens from the CTAs/handover
   via window.bywillChat.open(), and the open panel keeps its own close button. */
html body .site-header .header-cta{display:none!important}
html body .bw-root .bw-bubble{display:none!important}
/* r19: GitHub strip as its own compact block after About Will */
.gh-section{padding:0 clamp(15px,4vw,40px);margin:0 auto clamp(48px,6vw,80px);max-width:1200px;box-sizing:content-box}
.gh-section .gh-strip{margin-top:0}
/* r20: merged "Meet Will Fernandes" + "About Will"; X/GitHub icons sit directly under the name */
/* r20: merged "Meet Will" section on cream: dark X/GitHub icons, paragraph spacing */
.founder-intro .founder-social{margin:1.1rem 0 1.4rem}
.founder-intro .founder-social a{color:#0F0F0F;border-color:#0f0f0f40;width:44px;height:44px}
.founder-intro .founder-social a:hover{background:#0F0F0F;border-color:#0F0F0F;color:#fff}
.founder-intro .founder-social a:focus-visible{outline:3px solid #9b542b;outline-offset:3px}
.founder-intro>div:last-child>p:not(.eyebrow)+p{margin-top:1rem}

/* r22: prototype chat as a centred modal (wraps chat.bywill.ai/widget.js panel; widget itself untouched) */
html.bw-modal-open,html.bw-modal-open body{overflow:hidden!important}
html.bw-modal-open body{padding-right:var(--bw-scrollbar,0px)}
.bw-modal-backdrop{position:fixed;inset:0;z-index:99998;background:rgba(15,15,15,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.bw-modal-backdrop[hidden]{display:none}
html body .bw-root.bw-modal .bw-panel{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(920px,calc(100vw - 32px));height:min(720px,calc(100dvh - 32px));border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
html body .bw-root.bw-modal .bw-head{padding:12px 12px 12px 18px}
html body .bw-root.bw-modal .bw-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid #0f0f0f26;font-size:26px;color:#0F0F0F;background:#fff;transition:background .2s,color .2s}
html body .bw-root.bw-modal .bw-close:hover{background:#0F0F0F;color:#fff}
html body .bw-root.bw-modal .bw-close:focus-visible{outline:3px solid #4f9a40;outline-offset:2px}
@media(max-width:640px){html body .bw-root.bw-modal .bw-panel{width:100vw;height:100dvh;border-radius:0;border:0}}

/* r22: header menu, desktop and mobile: Services, Consulting, Journal, About Will, Contact (+ BUILD MY AI PROTOTYPE inside the mobile menu only) */
html body .site-header nav .mobile-nav-cta{text-transform:uppercase;letter-spacing:.06em}

/* r22: general-enquiry chat in Contact (Grok via /api/chat) */
.enquiry .ask{grid-column:1/-1;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,72px);margin-top:clamp(36px,5vw,64px);padding-top:clamp(32px,4vw,52px);border-top:1px solid #ffffff2e;align-items:start}
.ask-kicker{margin:0 0 .6rem;color:#8fd17f;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ask-copy h3{margin:0 0 .8rem;color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.03em}
.ask-copy p{color:#ffffffc7;line-height:1.6;margin:0 0 .9rem}
.ask-copy .ask-powered{font-size:.82rem;color:#ffffffa3}
.ask-copy .ask-powered a{color:#fff;border-bottom:1px solid currentColor}
.ask-card{display:flex;flex-direction:column;height:400px;background:#FAF8F2;border-radius:16px;overflow:hidden;color:#0F0F0F;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.ask-log{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.ask-log:focus-visible{outline:3px solid #4f9a40;outline-offset:-3px}
.ask-m{max-width:85%;padding:10px 14px;border-radius:12px;font-size:.95rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ask-m.a{align-self:flex-start;background:#fff;border:1px solid #0f0f0f1a;border-bottom-left-radius:4px}
.ask-m.u{align-self:flex-end;background:#0F0F0F;color:#fff;border-bottom-right-radius:4px}
.ask-m.typing{color:#8a8a84}
.ask-form{display:flex;gap:8px;padding:12px;border-top:1px solid #0f0f0f1a;background:#fff}
.ask-form[hidden],.ask-off[hidden]{display:none}
.ask-form textarea{flex:1;resize:none;min-height:48px;max-height:120px;border:1px solid #cfcbc0;border-radius:10px;padding:12px;font:inherit;font-size:16px;background:#fff;color:#0F0F0F}
.ask-form textarea:focus{outline:2px solid #4f9a40;outline-offset:-1px}
.ask-form button{min-width:84px;min-height:48px;border:0;border-radius:10px;background:#0F0F0F;color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ask-form button:disabled{opacity:.5;cursor:default}
.ask-form button:focus-visible{outline:3px solid #4f9a40;outline-offset:2px}
.ask-off{padding:16px 18px 18px;border-top:1px solid #0f0f0f1a;background:#fff}
.ask-off p{margin:0 0 12px;font-size:.92rem;line-height:1.5;color:#3c3f38}
.ask-off .ask-off-btn{width:100%;justify-content:center}
.ask-nojs{margin:0;padding:12px 18px;font-size:.9rem}
@media(max-width:900px){.enquiry .ask{grid-template-columns:1fr}.ask-card{height:440px}}
/* r22: contact chat overrides for the generic .enquiry form/label rules */
html body .enquiry .ask .ask-form{display:flex;grid-template-columns:none;align-items:stretch;gap:8px;padding:12px;border-radius:0;background:#fff;color:#0F0F0F}
html body .enquiry .ask .ask-form[hidden]{display:none}
html body .enquiry .ask .bw-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html body .enquiry .ask .ask-form textarea{flex:1;width:auto;min-height:48px;border-radius:10px;padding:12px;border:1px solid #cfcbc0}
html body .enquiry .ask .ask-form button{flex:0 0 auto;grid-column:auto;border-radius:10px;padding:0 18px}
html body .enquiry .ask .ask-off .ask-off-btn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:100px;background:#0F0F0F;color:#fff;text-transform:uppercase;letter-spacing:.06em}
html body .site-header.menu-open nav .mobile-nav-cta{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
/* r23: logo is never on a plate, box or tile. Footer uses the free-floating light lockup on the dark footer. */
html body .footer-brand>span{background:none;border-radius:0;padding:0;box-shadow:none}
/* r23: nav "Start here" button, shown on desktop too; opens the prototype modal */
@media (min-width:821px){html body .site-header nav a.mobile-nav-cta.nav-start{display:inline-flex;min-height:40px;padding:0 18px;margin:0;border-bottom:0;color:var(--btn-primary-fg)}}
/* r24: homepage About teaser + /about/ page */
.about-teaser .button{margin-top:1.4rem;display:inline-flex}
.pg-about .founder-intro{padding-top:clamp(3rem,6vw,5.5rem)}
.pg-about .founder-intro h1{letter-spacing:-.075em;margin:0;font-size:clamp(3rem,5.7vw,6.4rem);font-weight:650;line-height:.89}
.pg-about .founder-intro h1 em{color:var(--deep-green);font-family:Georgia,serif;font-weight:400}
@media (max-width:820px){.pg-about .founder-intro h1{font-size:3.2rem}}
.about-teaser h2+p{margin-top:1.2rem}