/* Professional conversion/readability layer — loaded after the legacy theme. */
:root{--gray:#c9c2b7;--gray-dark:#8e8578;--bg-card:#100d0a;--bg-card-hover:#1b1510}
body{cursor:auto;font-feature-settings:"cv01","ss03"}
.cursor-dot,.cursor-ring{display:none!important}
nav{background:linear-gradient(180deg,rgba(7,5,3,.94),rgba(7,5,3,.72));backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav-links{gap:20px}.nav-links a{color:#d4cec4;font-size:12px;font-weight:600}.nav-logo{white-space:nowrap}
.hero-sub{color:#ded8cf!important;max-width:760px;font-size:clamp(17px,2vw,22px)!important;line-height:1.55!important}
.hero-status-line{color:#93e9ce!important}
.project-card,.service-card,.skill-card,.cert-card,.phone-tier,.latest-card{border-color:rgba(255,255,255,.12)!important;background-color:rgba(18,14,10,.92)!important}
.project-card p,.service-card p,.phone-cap p,.timeline-item p,.seo-summary p,.about-lead,.contact-info p{color:#c9c2b7!important;line-height:1.7}
.project-subtitle,.project-label,.section-label{color:#e9c982!important}
.form-group input,.form-group textarea,.form-group select{color:#f7f4ef!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.17)!important}
.form-group input::placeholder,.form-group textarea::placeholder{color:#8e8578!important}
.project-matcher-inner,.seo-summary-inner{border-color:rgba(255,255,255,.12)!important;box-shadow:0 28px 90px rgba(0,0,0,.34)}
.btn-primary{box-shadow:0 16px 45px rgba(255,160,80,.2)}
.holo-stage::before{content:'AI PROJECT CONCIERGE  •  ONLINE';position:absolute;left:8px;bottom:40px;color:#bff9e7;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-shadow:0 0 12px rgba(52,211,153,.5);white-space:nowrap}
#holoChatInput{font-size:13px!important;color:#fff!important;background:rgba(10,8,6,.88)!important;border-color:rgba(255,210,119,.42)!important}
.holo-bubble{font-size:13px!important;line-height:1.5!important;color:#fff!important;background:linear-gradient(145deg,rgba(18,13,9,.96),rgba(35,20,10,.94))!important;border-color:rgba(255,210,119,.45)!important;max-height:190px!important}
@media(max-width:1100px){.nav-links{gap:13px}.nav-links a{font-size:10px}}
@media(max-width:720px){.holo-stage::before{bottom:42px;font-size:8px}.holo-bubble{top:-305px!important;max-height:180px!important}.hero-cta .btn{width:100%;justify-content:center}.seo-summary p{font-size:15px!important}}
/* 20260923v4 — usability + readability fixes (the hologram rules above stay as they are) */
/* the legacy theme's mono shorthands reference this token but never defined it */
:root{--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace}
/* the old theme hid the pointer on buttons for a custom cursor that is now switched off */
.btn,.hamburger{cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* dark halo behind the hero copy so the bright particle R never sits behind the text */
.hero-content::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:min(1100px,112vw);height:120%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(7,5,3,.74),rgba(7,5,3,.5) 55%,rgba(7,5,3,0));pointer-events:none}
.hero-title,.hero-sub,.hero-status-line{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 22px rgba(7,5,3,.9)}
.hero-sub,.proof-ticker{margin-left:auto!important;margin-right:auto!important}
.seo-summary-inner{background:linear-gradient(135deg,rgba(26,19,11,.95),rgba(12,9,6,.96))!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* opaque fields (no particles behind what people type) + the select chevron the shorthand above wiped */
.form-group input,.form-group textarea,.form-group select{background-color:rgba(16,12,8,.94)!important}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e9c982' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 16px center!important;padding-right:44px!important}
/* the availability badge sat underneath the nav bar */
.avail-badge{top:calc(84px + env(safe-area-inset-top,0px))}
/* trailing gap = flex gap, so translateX(-50%) lands exactly on the repeat (no jump at the loop) */
.proof-track{padding-right:40px}.marquee-track{padding-right:48px}
/* open mobile menu: hide the concierge so the lower menu links are tappable */
body:has(.mobile-menu.open) .holo-stage,body:has(.mobile-menu.open) #holoCanvas{display:none!important}
@media(max-width:1180px){.term-btn{display:none}}
/* 16px fields stop iOS Safari zooming the page when a field is focused */
@media(max-width:900px){.form-group input,.form-group textarea,.form-group select{font-size:16px!important}}
@media(max-width:720px){#holoChatInput{font-size:16px!important}}

/* 20260923v4 — the sub pages opt in to cross-document view transitions;
   opting in here too lets /work/ ↔ / cross-fade instead of aborting */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pv-vt-out .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: pv-vt-in .52s cubic-bezier(.16,1,.3,1) both; }
@keyframes pv-vt-out { to { opacity: 0; transform: translateY(-14px) scale(.992); } }
@keyframes pv-vt-in { from { opacity: 0; transform: translateY(22px) scale(1.004); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* 20260923v4 — readability: #particleCanvas is position:fixed; z-index:0,
   which paints it OVER non-positioned section content (the voice-signal
   formation sat on top of the AI phone pitch, the paper plane on top of
   the contact form). Lift section content one layer so formations stay
   visible in the gaps and behind cards, but never over text or fields. */
#ai-search-summary > *, #speed > *, #about > *, #skills > *, #experience > *,
#certifications > *, #services > *, #ai-phone > *, #contact > * { position: relative; z-index: 1; }
#projects-wrapper { z-index: 1; }
/* text blocks that sit directly on a bright formation get the same soft
   backdrop as the hero copy — the formation still reads around the edges */
#ai-phone .phone-hero::before, #speed > .reveal:first-child::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: min(1040px, 112vw); height: 135%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(7,5,3,.84), rgba(7,5,3,.58) 58%, rgba(7,5,3,0));
  pointer-events: none;
}