/* ==========================================================================
   v3 theme for aneilrazvi.com (Nov 2026)
   Loaded AFTER site.css on every page that uses it. Remove the one <link> to roll back.
   Moves: blueprint grid, mono eyebrows, condensed numbers and card titles,
   corner brackets, crisper corners, one footer. Logo, palette and DM Serif stay.
   ========================================================================== */
:root{
  --cond:'Big Shoulders Display','Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --radius:6px; --radius-sm:4px;
  --deep:#070C12;
  --grid-d:rgba(255,255,255,.055);
  --grid-l:rgba(15,25,35,.07);
}

/* ---------- nav: same markup and logo, quieter type ---------- */
nav.site-nav{border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
nav.site-nav.scrolled{background:rgba(7,12,18,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.09)}
.nav-links{gap:30px}
.nav-links a{font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav-links a.active{color:var(--teal)}
.nav-cta{border-radius:4px;letter-spacing:.02em}

/* ---------- eyebrows: dot + mono label ---------- */
.section-tag,.hero-tag,.cs2-eyebrow,.cs-eyebrow,.cs-category,.cs-tag-line,.pf-category,.talk-event,.hw-co,.work-co{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:.16em!important}
.section-tag{display:inline-flex;align-items:center;gap:12px;font-size:11.5px}
.section-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,188,212,.18);flex:none}
/* plain .eyebrow labels on the Work With Me pages get the same dot + mono */
.eyebrow{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:.16em!important;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,188,212,.18);flex:none}

/* ---------- buttons: crisper ---------- */
.btn-primary,.btn-ghost,.btn-outline,.cs2-btn,.form-submit,.work-cta{border-radius:4px!important}
.btn-primary svg,.btn-ghost svg,.cs2-btn svg{transition:transform .2s}
.btn-primary:hover svg,.btn-ghost:hover svg,.cs2-btn:hover svg{transform:translateX(4px)}

/* ---------- blueprint grid on dark heroes ---------- */
#hero,.page-hero,.cs2-hero,.cs-hero,.speaking-page-hero,.contact-hero{position:relative;isolation:isolate}
#hero::after,.page-hero::after,.cs2-hero::after,.speaking-page-hero::after,.contact-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);
  background-size:88px 88px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.cs2-hero{z-index:0}
.cs2-sec.dark,.cs-section-dark{background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);background-size:88px 88px}

/* ---------- condensed numbers ---------- */
.hero-stat .num,.cs-stat .s-num,.cs2-stats .n,.cs-result .r-num,.work-card .work-num,.work-result strong{font-family:var(--cond)!important;font-weight:800!important;letter-spacing:.01em}
.cs2-stats .n{font-size:2.3rem}
.hero-stat .num{font-size:2.6rem}

/* ---------- condensed card titles ---------- */
.service-card h3,.hw-card h3,.work-card h3,.pf-title,.talk-title,.cs-card-title,.spot-copy h3{font-family:var(--cond)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
.service-card h3,.work-card h3,.talk-title{font-size:1.7rem}
.pf-title{font-size:1.65rem}
.hw-card h3{font-size:1.6rem}
.cs-card-title{font-size:1.35rem}

/* ---------- corner brackets on cards ---------- */
.service-card,.work-card,.pf-card,.talk-card,.hw-card,.cred-card,.contact-card,.cs-card,.v3-xh{position:relative}
.service-card::after,.work-card::after,.pf-card::after,.talk-card::after,.hw-card::after,.cred-card::after,.contact-card::after,.cs-card::after,.v3-xh::after{
  --c:rgba(0,188,212,.55);
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-repeat:no-repeat;
  background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  opacity:.75;transition:opacity .25s}
.service-card:hover::after,.work-card:hover::after,.pf-card:hover::after,.hw-card:hover::after,.cs-card:hover::after,.v3-xh:hover::after{opacity:1}
.service-card,.talk-card,.pf-card,.contact-card,.cred-card{box-shadow:none}
.service-card:hover,.pf-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,25,35,.12)}

/* ---------- one footer for every page ---------- */
.v3-footer{background:#060A0F;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.55);padding:56px 5% 34px;font:400 14px/1.6 'Inter',sans-serif}
.v3-footer .v3f-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;max-width:1240px;margin:0 auto;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08)}
.v3-footer .v3f-brand{font-family:'DM Serif Display',serif;font-size:1.35rem;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.v3-footer .v3f-brand img{width:28px;height:28px;border-radius:6px}
.v3-footer .v3f-brand b{font-weight:400;color:var(--teal)}
.v3-footer p.v3f-line{margin:14px 0 0;max-width:300px;color:rgba(255,255,255,.6)}
.v3-footer h4{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 16px}
.v3-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.v3-footer a{color:rgba(255,255,255,.72);text-decoration:none}
.v3-footer a:hover{color:var(--teal)}
.v3-footer .v3f-bottom{max-width:1240px;margin:0 auto;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 10.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
@media (max-width:820px){.v3-footer .v3f-top{grid-template-columns:1fr 1fr}.v3-footer .v3f-top>div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){.service-card:hover,.pf-card:hover{transform:none}}

/* ---------- secondary nav (Work With Me group and the Course): one component everywhere ----------
   Underline tabs on a quiet band that sticks under the main nav. Section label on the left,
   one optional call to action (a.go) on the right. No pills, no boxes. */
nav.subnav{--sub-accent:#00BCD4;display:block;margin-top:68px;position:sticky;top:68px;z-index:50;
  background:rgba(8,14,20,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09)}
nav.subnav .subnav-in{max-width:none;margin:0;padding:0 5%;display:flex;align-items:center;gap:30px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.subnav .subnav-in::-webkit-scrollbar{display:none}
nav.subnav .subnav-in[data-label]::before{content:attr(data-label);flex:none;white-space:nowrap;
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--sub-accent);
  padding-right:24px;margin-right:-6px;border-right:1px solid rgba(255,255,255,.14)}
nav.subnav a{flex:none;white-space:nowrap;text-decoration:none;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
  padding:20px 0 18px;margin:0;transition:color .2s,border-color .2s}
nav.subnav a:hover{color:#fff;background:none}
nav.subnav a[aria-current="page"]{color:#fff;background:none;border-bottom-color:var(--sub-accent)}
nav.subnav a:focus-visible{outline:2px solid var(--sub-accent);outline-offset:-2px}
nav.subnav a.go{margin-left:auto;padding:10px 16px;border:0;border-radius:4px;background:var(--sub-go,#F6C445);color:#14161A;letter-spacing:.1em;font-weight:500}
nav.subnav a.go:hover{filter:brightness(1.06);color:#14161A}
@media (max-width:760px){
  nav.subnav .subnav-in{gap:24px}
  nav.subnav .subnav-in[data-label]::before{display:none}
  nav.subnav a.go{display:none}
}

/* ---------- Listen: read a blog post aloud with the device's own voice ---------- */
.v3-listen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 32px;padding:14px 16px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:6px;position:relative}
.v3-listen[hidden]{display:none}
.v3-listen .ls-play{flex:none;width:44px;height:44px;border-radius:4px;border:0;background:var(--teal);color:#062A30;display:grid;place-items:center;cursor:pointer}
.v3-listen .ls-play:hover{filter:brightness(1.07)}
.v3-listen .ls-play svg{width:18px;height:18px}
.v3-listen .ls-meta{flex:1 1 180px;min-width:0}
.v3-listen .ls-t{font:600 .95rem/1.25 'Inter',sans-serif;margin:0}
.v3-listen .ls-s{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:4px 0 0}
.v3-listen .ls-bar{flex-basis:100%;height:3px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;order:5}
.v3-listen .ls-bar i{display:block;height:100%;width:0;background:var(--teal);transition:width .3s}
.v3-listen .ls-ctl{display:flex;gap:6px;flex:none}
.v3-listen .ls-ctl button{height:34px;min-width:44px;padding:0 10px;border-radius:4px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:500 11px/1 var(--mono);letter-spacing:.08em;cursor:pointer}
.v3-listen .ls-ctl button:hover{border-color:var(--teal);color:var(--teal)}
.v3-listen .ls-ctl button[hidden]{display:none}
.v3-listen::after{--c:rgba(0,188,212,.55);content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-repeat:no-repeat;background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
.ls-on{background:rgba(0,188,212,.12);box-shadow:-10px 0 0 rgba(0,188,212,.12),10px 0 0 rgba(0,188,212,.12);border-radius:2px;transition:background .3s}

/* ---------- a slow, slight zoom on every hero image (like the home page) ---------- */
@keyframes v3zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
html body .abx-portrait,html body .csx-img,html body .hero .photo,html body .p-zoom,html body .pf-feat-img{overflow:hidden}
html body .p-zoom{display:block;border-radius:4px;line-height:0}
html body .abx-portrait img,html body .csx-img img,html body .hero .photo img,html body .p-zoom img{
  animation:v3zoom 24s ease-in-out infinite alternate;transform-origin:55% 45%;will-change:transform}
/* the portfolio flagship image is a background, so a layer inside it does the zooming */
html body .pf-feat-img{position:relative}
html body .pf-feat-img::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:cover;background-position:inherit;
  animation:v3zoom 24s ease-in-out infinite alternate;transform-origin:55% 45%}
@media (max-width:1000px){html body .bx-feature .p-zoom{order:-1}}
@media (prefers-reduced-motion:reduce){
  html body .abx-portrait img,html body .csx-img img,html body .hero .photo img,html body .p-zoom img,html body .pf-feat-img::before{animation:none}}

/* ---------- page menu that follows you (assets/v3/pagenav.js) ----------
   at most two bars on a computer, one bar while reading on a phone */
.pj-dock{position:fixed;left:0;right:0;top:68px;z-index:990;height:48px;background:rgba(7,12,18,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);transform:translateY(-110%);opacity:0;visibility:hidden;transition:transform .28s ease,opacity .2s,visibility .28s,top .28s ease}
.pj-dock.on{transform:none;opacity:1;visibility:visible}
.pj-dock .in{max-width:1200px;margin:0 auto;padding:0 6%;display:flex;height:100%;overflow-x:auto;scrollbar-width:none}
.pj-dock .in::-webkit-scrollbar{display:none}
.pj-dock a{flex:none;display:flex;align-items:center;padding:0 18px 0 0;margin-right:18px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-decoration:none;border-right:1px solid rgba(255,255,255,.1);white-space:nowrap;position:relative}
.pj-dock a:last-child{border-right:0;margin-right:0}
.pj-dock a span{color:var(--pj-accent,#00BCD4);margin-right:10px}
.pj-dock a:hover,.pj-dock a.on{color:#fff}
.pj-dock a.on::after{content:"";position:absolute;left:0;right:18px;bottom:0;height:2px;background:var(--pj-accent,#00BCD4)}
.pj-dock a:last-child.on::after{right:0}
.pj-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pj-accent,#00BCD4);transform-origin:0 50%;transform:scaleX(0);opacity:.5}
html.pj nav.site-nav{transition:transform .28s ease,background .3s}
html.pj nav.subnav{transition:transform .28s ease}
html.pj-sub.pj-down nav.subnav{transform:translateY(calc(-100% - 1px))}
html.pj-phone.pj-down nav.site-nav{transform:translateY(-100%)}
html.pj-phone.pj-down nav.subnav{transform:translateY(calc(-100% - 70px))}
@media (max-width:900px){.pj-dock{height:44px}.pj-dock a{font-size:10px;letter-spacing:.12em;padding-right:14px;margin-right:14px}.pj-dock a.on::after{right:14px}}
@media (prefers-reduced-motion:reduce){.pj-dock,html.pj nav.site-nav,html.pj nav.subnav{transition:none}}