/* syx.solutions showpiece layer (Nov 10 2026). Loaded after syx.css on every page.
   Holds: the homepage hero deck of real client sites, the stacked work showcase, the featured
   testimonial block, the answer blocks, the inline lead form band and the area grid.
   Every word stays HTML. Motion is transform only, driven by scroll progress, and switches
   off under prefers-reduced-motion. With no JavaScript the deck renders flat and complete. */

/* ───────── hero deck: real client sites in depth ───────── */
.hero-x{overflow-x:clip}
.xstage{position:relative;margin:clamp(40px,5.5vw,68px) auto 0;max-width:1320px;padding-inline:var(--gutter);--p:1;--mx:0;--my:0}
.xstage-art{position:absolute;left:50%;top:-14%;width:min(1560px,128vw);transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:.95;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 52%,#000 30%,transparent 76%);
  mask-image:radial-gradient(ellipse 60% 62% at 50% 52%,#000 30%,transparent 76%)}
.xstage-art img{width:100%;height:auto;display:block}
.xdeck{position:relative;perspective:1900px;perspective-origin:50% 20%;aspect-ratio:16/8.1;max-width:1180px;margin-inline:auto}
.xf,.xph{position:absolute;margin:0;display:block;overflow:hidden;transition:transform 420ms var(--ease),box-shadow 420ms var(--ease)}
.xstage.moving .xf,.xstage.moving .xph{transition:none;will-change:transform}
.xf{border-radius:16px;background:#fff;border:1px solid rgba(10,10,10,.12);box-shadow:var(--shadow-3)}
.xbar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#f6f6f6;border-bottom:1px solid var(--line)}
.xbar i{width:8px;height:8px;border-radius:50%;background:#dedede;flex:0 0 auto}
.xbar span{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xf img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.xf-c{left:17%;width:66%;top:0;z-index:3;transform-origin:50% 100%;
  transform:translate3d(calc(var(--mx)*-6px),calc(var(--my)*-4px),0) rotateX(calc((1 - var(--p))*18deg))}
.xf-l{left:0;width:42%;top:15%;z-index:1;transform-origin:0 60%;
  transform:translate3d(calc(var(--mx)*-18px),calc(var(--my)*-9px),-140px) rotateY(calc(16deg + (1 - var(--p))*12deg)) rotateX(calc((1 - var(--p))*8deg))}
.xf-r{right:0;width:42%;top:15%;z-index:1;transform-origin:100% 60%;
  transform:translate3d(calc(var(--mx)*-18px),calc(var(--my)*-9px),-140px) rotateY(calc(-16deg - (1 - var(--p))*12deg)) rotateX(calc((1 - var(--p))*8deg))}
.xph{width:13.5%;border-radius:clamp(14px,2vw,26px);border:clamp(3px,.45vw,6px) solid #131313;background:#131313;z-index:4;
  box-shadow:0 30px 60px -20px rgba(10,10,10,.5),0 8px 18px -8px rgba(10,10,10,.3)}
.xph img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center;border-radius:clamp(10px,1.5vw,20px)}
.xph-1{left:11%;bottom:-4%;transform:translate3d(calc(var(--mx)*-30px),calc(var(--my)*-16px + (1 - var(--p))*22px),80px) rotate(-3deg)}
.xph-2{right:11%;bottom:-9%;transform:translate3d(calc(var(--mx)*-30px),calc(var(--my)*-16px + (1 - var(--p))*34px),80px) rotate(3deg)}
.xcap{margin-top:clamp(64px,8.5vw,118px);text-align:center;font-size:13px;color:var(--mute)}
.xcap b{color:var(--ink);font-weight:500}
.xcap a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2)}
.hero-kw{margin:14px auto 0;max-width:60ch;font-size:13.5px;color:var(--mute)}
.hero-kw a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2)}
@media (max-width:760px){
  .xdeck{aspect-ratio:16/11.6;perspective:1200px}
  .xf-l,.xf-r{display:none}
  .xf-c{left:0;width:100%}
  .xph{width:25%}
  .xph-1{left:5%;bottom:0}
  .xph-2{right:5%;bottom:-5%}
  .xbar{height:24px}.xbar span{font-size:10px}
  .xstage-art{top:6%;width:190vw}
  .xcap{margin-top:72px}
}
@media (prefers-reduced-motion:reduce){.xf,.xph{transition:none}}

/* ───────── work showcase: five real builds, stacked ───────── */
.show{position:relative;background:var(--deep);color:#fafafa;border-radius:var(--r-xl);margin-inline:clamp(8px,1.6vw,24px);
  padding:clamp(56px,7vw,112px) 0 clamp(40px,5vw,80px);isolation:isolate}
.show-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.show-bg img{position:absolute;top:0;left:0;width:100%;height:min(100%,1100px);object-fit:cover;opacity:.75;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.show .eyebrow{color:var(--mute-dark)}
.show .h2{color:#fafafa}
.show .lede{color:var(--mute-dark)}
.show .head-row .btn-light{background:rgba(255,255,255,.06);color:#fafafa;border-color:rgba(255,255,255,.16)}
.show-list{list-style:none;margin:clamp(32px,4.4vw,64px) 0 0;padding:0;counter-reset:sc}
.scard{position:sticky;top:calc(92px + var(--n,0)*16px);margin-bottom:clamp(18px,2.4vw,32px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3.4vw,56px);align-items:center;
  border-radius:var(--r-xl);border:1px solid rgba(255,255,255,.1);padding:clamp(22px,3.2vw,48px);overflow:hidden;
  background:
    radial-gradient(80% 120% at 100% 0%,color-mix(in srgb,var(--c,#f99c00) 26%,transparent),transparent 62%),
    radial-gradient(60% 80% at 0% 100%,color-mix(in srgb,var(--c,#f99c00) 9%,transparent),transparent 70%),
    #101010;
  box-shadow:0 -18px 50px -24px rgba(0,0,0,.9)}
.scard-n{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute-dark)}
.scard-n b{font-weight:500;color:#fafafa}
.scard-n::after{content:"";height:1px;flex:1 1 auto;max-width:90px;background:rgba(255,255,255,.18)}
.scard h3{margin-top:18px;font-size:clamp(30px,4.2vw,58px);font-weight:700;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.scard-k{margin-top:12px;font-size:13.5px;color:color-mix(in srgb,var(--c,#f99c00) 55%,#fff);font-weight:500}
.scard-d{margin-top:16px;font-size:clamp(15px,1.15vw,16.5px);line-height:1.6;color:#c9c9c9;max-width:46ch}
.scard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding:0;list-style:none}
.scard-tags li{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#d6d6d6;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 10px}
.scard-links{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:26px}
.scard-links .btn{background:#fafafa;color:var(--ink);border-color:transparent}
.scard-links .lnk{font-size:14px;color:#fafafa;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.scard-vis{position:relative;perspective:1600px;padding:0 0 9% 0}
.scard-frame{display:block;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);
  transform:rotateY(-11deg) rotateX(4deg) translate3d(0,0,0);transform-origin:100% 50%;transition:transform 900ms var(--ease)}
.scard-frame .xbar{background:#1b1b1b;border-bottom-color:rgba(255,255,255,.08)}
.scard-frame .xbar i{background:#3a3a3a}
.scard-frame .xbar span{color:#9a9a9a}
.scard-frame img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.scard-phone{position:absolute;left:-3%;bottom:0;width:22%;border-radius:clamp(14px,1.8vw,24px);border:clamp(3px,.4vw,5px) solid #1c1c1c;background:#1c1c1c;overflow:hidden;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.95);transform:translate3d(0,14px,60px);transition:transform 900ms var(--ease)}
.scard-phone img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center;border-radius:clamp(10px,1.4vw,19px)}
.scard.in .scard-frame,.scard:hover .scard-frame{transform:rotateY(-4deg) rotateX(1.5deg)}
.scard.in .scard-phone,.scard:hover .scard-phone{transform:translate3d(0,0,60px)}
.show-more{margin-top:clamp(18px,2.4vw,32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.show-more a{display:flex;gap:16px;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:14px;background:rgba(255,255,255,.03);
  transition:background 200ms var(--ease),border-color 200ms var(--ease)}
.show-more a:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.show-more img{width:132px;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;flex:0 0 auto}
.show-more b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em}
.show-more span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--mute-dark)}
.show-foot{margin-top:clamp(28px,3.6vw,48px);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(22px,3vw,34px)}
.show-foot p{font-size:clamp(18px,1.9vw,24px);font-weight:600;letter-spacing:-.02em;max-width:30ch;text-wrap:balance}
.show-foot .btn-light{background:#fafafa;border-color:transparent}
.show-foot .btn-ghost{color:#fafafa;border-color:rgba(255,255,255,.22)}
@media (max-width:900px){
  .scard{position:relative;top:auto;grid-template-columns:1fr;box-shadow:none}
  .scard-vis{order:-1;padding-bottom:6%}
  .scard-frame{transform:none!important}
  .scard-phone{left:auto;right:4%;width:24%;transform:none!important}
  .show-more{grid-template-columns:1fr}
  .show-more img{width:104px}
}
@media (prefers-reduced-motion:reduce){
  .scard{position:relative;top:auto}
  .scard-frame,.scard-phone{transition:none;transform:none!important}
}

/* ───────── testimonials: one lead voice, then the rest ───────── */
.voices{display:grid;gap:14px;margin-top:clamp(26px,3.4vw,44px)}
.vlead{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,3.4vw,56px);align-items:center;
  background:var(--ink);color:#fafafa;border-radius:var(--r-xl);padding:clamp(26px,4vw,60px);overflow:hidden;isolation:isolate}
.vlead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 110% at 0% 0%,rgba(249,156,0,.2),transparent 60%)}
.vlead blockquote{margin:0}
.vlead .qm,.vcard .qm{display:block;width:30px;height:23px;fill:var(--accent)}
.vlead blockquote p{margin-top:20px;font-size:clamp(21px,2.5vw,34px);line-height:1.28;letter-spacing:-.025em;font-weight:500;text-wrap:pretty}
.vwho{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.8vw,34px)}
.vlogo{flex:0 0 auto;width:92px;height:52px;border-radius:12px;background:#0b1730;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;padding:8px}
.vlogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.vlogo.lt{background:#fff;border-color:var(--line)}
.vlogo.rd{width:52px;border-radius:50%;padding:0;overflow:hidden}
.vlogo.rd img{width:100%;height:100%;object-fit:cover}
.vwho b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.vwho span{display:block;margin-top:2px;font-size:13.5px;color:var(--mute-dark)}
.vlead .vlinks{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:24px}
.vlead .vlinks .btn{background:#fafafa;color:var(--ink);border-color:transparent}
.vlead .vlinks a.lnk{font-size:14px;color:#fafafa;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.vshot{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#fff;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transform-origin:100% 50%;transition:transform 900ms var(--ease)}
.vlead:hover .vshot{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.vshot .xbar{background:#1b1b1b;border-bottom-color:rgba(255,255,255,.08)}
.vshot .xbar i{background:#3a3a3a}.vshot .xbar span{color:#9a9a9a}
.vshot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vcard{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.vcard blockquote{margin:0;flex:1 1 auto}
.vcard blockquote p{margin-top:16px;font-size:16.5px;line-height:1.55;color:var(--ink);letter-spacing:-.005em}
.vcard .vwho{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.vcard .vwho span{color:var(--mute)}
.vcard .vcs{margin-top:16px;font-size:13px;font-weight:500;color:var(--ink);align-self:flex-start;border-bottom:1px solid var(--line-2);padding-bottom:2px}
@media (max-width:900px){
  .vlead{grid-template-columns:1fr}
  .vshot{transform:none!important}
  .vgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.vshot{transition:none;transform:none!important}}

/* ───────── answer blocks (AEO): question, short answer first, then detail ───────── */
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(26px,3.4vw,44px)}
.ans{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px)}
.ans h3{font-size:clamp(18px,1.6vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.ans .short{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink)}
.ans .more{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--mute)}
.ans .more a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line-2)}
.ans ul{margin:10px 0 0;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--mute)}
.ans ul li{margin-top:4px}
@media (max-width:860px){.answers{grid-template-columns:1fr}}

/* ───────── lead band: short form beside the booking pitch ───────── */
.leadband{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,4vw,56px)}
.leadband .checks{margin-top:20px}
.leadband .form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px)}
.leadband .form button{width:100%}
@media (max-width:900px){.leadband{grid-template-columns:1fr}}

/* ───────── area and trade grids on the local pages ───────── */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(26px,3.4vw,44px)}
.area{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.area small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.area b{display:block;margin-top:8px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.area p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--mute)}
.area a{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:500;border-bottom:1px solid var(--line-2)}
@media (max-width:900px){.areas{grid-template-columns:1fr}}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.cmp th,.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.cmp th{font-size:12px;font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);font-weight:500}
.cmp td:first-child{font-weight:600;white-space:nowrap}

/* ───────── logo rail: a mark made for dark grounds sits on its own tile ───────── */
.logo img.dk{background:#0b1730;border-radius:10px;padding:7px 12px;max-height:50px;mix-blend-mode:normal;filter:grayscale(1) contrast(1.1);opacity:.92;box-sizing:border-box}
@media (hover:hover) and (pointer:fine){.logo:hover img.dk{filter:none;opacity:1}}
.logo img.mk{max-height:38px;filter:none;opacity:.9;mix-blend-mode:normal}

/* CTA panel with art */
.cta-panel.has-art{isolation:isolate}
.cta-panel.has-art .cta-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.9;pointer-events:none}

@media (max-height:760px){.scard{position:relative;top:auto}}

/* Nov 10 2026: hero frames play real scroll recordings of the live sites; hover brings a side frame forward */
.xf .xvid{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:#f6f6f6}
.xph .xvid{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center;border-radius:clamp(10px,1.5vw,20px);background:#fff}
.scard-phone .xvid{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center;border-radius:clamp(10px,1.4vw,19px);background:#fff}
.xopen{position:absolute;inset:0;z-index:2}
@media (hover:hover) and (min-width:761px){
  .xf-l:hover,.xf-r:hover{z-index:6;transform:translate3d(0,-2%,120px) rotateY(0deg) rotateX(0deg) scale(1.04);box-shadow:0 40px 80px -24px rgba(10,10,10,.45)}
  .xph:hover{z-index:7}
}

/* Nov 10 2026: Ask your AI about us, restored in the footer */
.foot-ai{margin-top:22px}
.foot-ai-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.foot-ai .ai-row{display:flex;flex-wrap:wrap;gap:10px}
.foot-ai .ai-chip{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);color:var(--ink);background:transparent;transition:transform .2s,border-color .2s}
.foot-ai .ai-chip:hover{transform:translateY(-2px);border-color:var(--ink)}
.foot-ai .ai-chip svg{width:20px;height:20px;display:block}
.foot-ai-note{font-size:12px;color:var(--mute);margin:10px 0 0;max-width:34ch}

/* ───────── Nov 10 2026: call samples ("Hear it answer") ─────────
   One card per recorded demo call: play button, waveform you can seek, the transcript
   lighting up line by line, and what the agent did. Audio loads only when play is pressed. */
.calls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(26px,3.4vw,44px)}
.call{position:relative;display:flex;flex-direction:column;min-width:0;background:#101010;color:#fafafa;border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:clamp(18px,2.2vw,28px);overflow:hidden;isolation:isolate}
.call::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--c,#f99c00) 20%,transparent),transparent 62%)}
.call-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute-dark)}
.call-top b{font-weight:500;color:color-mix(in srgb,var(--c,#f99c00) 60%,#fff)}
.call h3{margin-top:14px;font-size:clamp(19px,1.9vw,24px);font-weight:600;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.call-biz{margin-top:6px;font-size:13.5px;color:var(--mute-dark)}
.call-ctl{display:flex;align-items:center;gap:14px;margin-top:18px}
.call-play{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;background:#fafafa;color:#101010;display:grid;place-items:center;cursor:pointer;
  transition:transform 160ms var(--ease),background 160ms var(--ease)}
.call-play:hover{background:#fff}
.call-play:active{transform:scale(.96)}
.call-play:focus-visible{outline:2px solid #fafafa;outline-offset:3px;border-radius:50%}
.call-play svg{width:20px;height:20px;fill:currentColor}
.call-play .ic-pause,.call.playing .call-play .ic-play{display:none}
.call.playing .call-play .ic-pause{display:block}
.call-wave{position:relative;flex:1 1 auto;min-width:0;height:52px;cursor:pointer;touch-action:none;border-radius:6px;--p:0%}
.call-wave:focus-visible{outline:2px solid #fafafa;outline-offset:4px}
.call-wave svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.call-wave .wv-a{fill:rgba(255,255,255,.26)}
.call-wave .wv-u{fill:rgba(255,255,255,.13)}
.call-wave .wv-on{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.call-wave .wv-on .wv-a,.call-wave .wv-on .wv-u{fill:var(--c,#f99c00)}
.call-wave .wv-on .wv-u{fill:color-mix(in srgb,var(--c,#f99c00) 55%,#fff)}
.call-time{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--mute-dark);font-variant-numeric:tabular-nums;min-width:86px;text-align:right}
.call-key{display:flex;gap:14px;margin-top:10px;font-size:11.5px;color:var(--mute-dark)}
.call-key span{display:inline-flex;align-items:center;gap:6px}
.call-key i{width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.3)}
.call-key span+span i{background:rgba(255,255,255,.14)}
.call-did{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.call-did li{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#e4e4e4;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 11px 6px 9px}
.call-did li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,#f99c00);flex:0 0 auto}
.call-tx{position:relative;margin:16px 0 0;padding:4px 0;list-style:none;max-height:188px;overflow-y:auto;overscroll-behavior:contain;
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);scrollbar-width:thin;scrollbar-color:#3a3a3a transparent}
.call-tx li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;padding:8px 8px 8px 6px;border-radius:8px;font-size:14px;line-height:1.5;color:#8d8d8d;cursor:pointer;
  transition:color 200ms var(--ease),background 200ms var(--ease)}
.call-tx li b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding-top:3px;color:#6f6f6f}
.call-tx li.ag b{color:color-mix(in srgb,var(--c,#f99c00) 45%,#8d8d8d)}
.call-tx li:hover{color:#cfcfcf}
.call-tx li.on{color:#fafafa;background:rgba(255,255,255,.06)}
.call-tx li.on b{color:var(--c,#f99c00)}
.call-tx li.on.cl b{color:#fafafa}
.call-tx li.was{color:#b9b9b9}
.call-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--mute-dark)}
.call-note b{font-weight:500;color:#e4e4e4}
.call-err{margin-top:10px;font-size:13px;color:#ffb4a8}
.call audio{display:none}
/* the featured call: text on the left, player on the right */
.callfeat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.callfeat .call{padding:clamp(20px,2.6vw,34px)}
.callfeat .call-tx{max-height:236px}
.calls-foot{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--mute);max-width:78ch}
@media (max-width:900px){
  .calls{grid-template-columns:1fr}
  .callfeat{grid-template-columns:1fr}
}
@media (max-width:480px){
  .call-ctl{gap:10px}
  .call-play{width:46px;height:46px}
  .call-time{min-width:0;font-size:11px}
  .call-tx li{grid-template-columns:48px minmax(0,1fr);font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.call-play,.call-tx li{transition:none}}

/* ───────── Nov 10 2026: content and ads showcase ─────────
   Vertical spots play muted while on screen (video.xvid), sound is opt in per clip.
   Image ads sit in a plain grid. Every piece carries one line on what it was for. */
.reel{position:relative;background:var(--deep);color:#fafafa;border-radius:var(--r-xl);margin-inline:clamp(8px,1.6vw,24px);
  padding:clamp(48px,6vw,96px) 0 clamp(40px,5vw,72px);isolation:isolate;overflow:hidden}
.reel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 0%,rgba(249,156,0,.14),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(34,211,238,.07),transparent 70%)}
.reel .eyebrow{color:var(--mute-dark)}
.reel .h2{color:#fafafa}
.reel .lede{color:var(--mute-dark)}
.reel .head-row .btn-light{background:rgba(255,255,255,.06);color:#fafafa;border-color:rgba(255,255,255,.16)}
.spots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin:clamp(28px,3.6vw,52px) 0 0;padding:0;list-style:none}
.spots.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
.spots>li{min-width:0}
.spot{min-width:0;margin:0}
.spot-v{position:relative;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;background:#161616;border:1px solid rgba(255,255,255,.12);aspect-ratio:9/16;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.spot-v video,.spot-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.spot-snd{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:rgba(10,10,10,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fafafa;font-size:12px;font-weight:500;padding:8px 12px 8px 10px;cursor:pointer}
.spot-snd:hover{background:rgba(10,10,10,.8)}
.spot-snd:focus-visible{outline:2px solid #fafafa;outline-offset:2px;border-radius:999px}
.spot-snd svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spot-snd .ic-on,.spot-snd[aria-pressed="true"] .ic-off{display:none}
.spot-snd[aria-pressed="true"] .ic-on{display:block}
.spot-snd[aria-pressed="true"]{background:#fafafa;color:#101010;border-color:transparent}
.spot figcaption{margin-top:14px}
.spot figcaption small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute-dark)}
.spot figcaption b{display:block;margin-top:6px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.spot figcaption span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:#b9b9b9}
.reel-sub{margin-top:clamp(40px,5vw,72px);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(22px,3vw,34px)}
.reel-sub h3{font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.025em}
.reel-sub p{font-size:14.5px;color:var(--mute-dark);max-width:52ch}
.adgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin:clamp(20px,2.6vw,32px) 0 0;padding:0;list-style:none}
.adgrid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.adgrid figure{margin:0;min-width:0}
.adgrid img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:clamp(10px,1.2vw,16px);border:1px solid rgba(255,255,255,.12);background:#161616}
.adgrid figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:#b9b9b9}
.adgrid figcaption b{display:block;font-size:14px;font-weight:600;color:#fafafa;letter-spacing:-.01em}
.reel-foot{margin-top:clamp(28px,3.6vw,48px);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(22px,3vw,34px)}
.reel-foot p{font-size:13.5px;line-height:1.6;color:var(--mute-dark);max-width:64ch}
.reel-foot .btn-light{background:#fafafa;border-color:transparent}
@media (max-width:900px){
  .spots,.spots.s5{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .spots::-webkit-scrollbar{display:none}
  .spots>li{scroll-snap-align:start}
  .adgrid,.adgrid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═════════ Nov 10 2026, later: the five-pattern pass ═════════
   1. Mirror test: the hero copy is in index.html. Here the hero is sized so real client work
      is already on the first screen under the one call to action.
   2. One accent, one job: orange marks the primary action (book the call, run the check) and
      the underline of a text link. It is off every dot, quote mark, heading and illustration.
   3. Depth: the booking button and the centre site are the two lifted things.
   4. Motion with a job: nothing fades in on the first screen, one clip plays at a time, idle
      loops are off. html.still (reduced motion, or the visitor's own toggle) holds everything.
   5. The instant website check: form and report styles. */

/* ── 2. accent ── */
.eyebrow::before{background:currentColor;opacity:.45}
.vlead .qm,.vcard .qm,.quote svg.qm{fill:currentColor;opacity:.3}
.phero-meta span::before{background:var(--mute)}
.prose blockquote{border-left-color:var(--ink)}
.bk-cal small{background:var(--ink-2);color:#fafafa}
.cc-av::after{border-color:var(--mute-dark)}
.art svg .acc{color:#e8e8e8}
.scard-k{color:#c9c9c9}
.call-top b{color:#d6d6d6}
.call-did li::before{background:#8d8d8d}
.eq i{background:#fafafa;animation:none;height:22px;opacity:.85}
.eq i:nth-child(2),.eq i:nth-child(6){height:40px}.eq i:nth-child(3),.eq i:nth-child(5){height:56px}.eq i:nth-child(4){height:34px}

a.btn[href$="//syx.solutions/book/"],.nav-cta,.mobnav .m-cta,.btn-accent{background:var(--accent);color:#1a1200;border-color:transparent;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px -12px rgba(138,84,0,.65),0 2px 5px rgba(10,10,10,.08)}
.nav-cta{box-shadow:none}
@media (hover:hover) and (pointer:fine){
  a.btn[href$="//syx.solutions/book/"]:hover,.nav-cta:hover,.btn-accent:hover{background:#ffab1f;border-color:transparent}
}
a.btn[href$="//syx.solutions/book/"]:focus-visible,.nav-cta:focus-visible,.btn-accent:focus-visible{outline-color:var(--ink)}
.on-dark a.btn[href$="//syx.solutions/book/"]:focus-visible,.show a.btn[href$="//syx.solutions/book/"]:focus-visible,.panel .btn-accent:focus-visible,.cta-panel a.btn[href$="//syx.solutions/book/"]:focus-visible{outline-color:#fafafa}
.textlink,.hero-note a,.hero-kw a,.xcap a{border-bottom-color:var(--accent)}
.prose a{text-decoration-color:var(--accent)}
.scard-links .lnk{border-bottom-color:var(--accent)}

/* ── 1 + 3. hero: copy, one action, real work on the first screen ── */
.hero.hero-x{padding-top:clamp(104px,13vh,136px)}
.hero-x .h-display{font-size:clamp(33px,5.1vw,66px);line-height:1.03;max-width:19ch;margin-top:clamp(18px,2.2vw,24px)}
.hero-x .lede{max-width:54ch;margin-top:clamp(16px,1.8vw,22px)}
.hero-x .cta-row{margin-top:clamp(22px,2.4vw,30px)}
.hero-x .cta-row .btn{min-height:52px;padding:14px 28px;font-size:16px}
.hero-x .status{padding-left:15px}
.hero-x .hero-note{margin-top:14px}
.xstage{margin-top:clamp(30px,3.4vw,44px);--mx:0!important;--my:0!important}
.xstage-art{display:none}
.xf-l,.xf-r{box-shadow:var(--shadow-2)}
.xf-c{box-shadow:0 44px 90px -30px rgba(10,10,10,.42),0 10px 24px -10px rgba(10,10,10,.14)}
.xcap{margin-top:clamp(52px,6vw,84px)}
.xstage .hero-kw{text-align:center}
.js .hero .rise,.js .phero .rise{opacity:1;transform:none;transition:none}
.dot::after{animation:none}

/* ── 4. motion ── */
.logos{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:6px}
.logos [data-dupe]{display:none}
.logos-rail{-webkit-mask-image:none;mask-image:none}
#mx-btn,#mx-btn::after,.mx-eye{animation:none!important}
html.still{scroll-behavior:auto}
.still .rise{opacity:1!important;transform:none!important;transition:none!important}
.still .xstage{--p:1!important}
.still .xf,.still .xph,.still .scard-frame,.still .scard-phone,.still .vshot{transition:none}
.still .scard-frame,.still .scard-phone{transform:none!important}
.still .scard-win img{transform:none!important}
.still .art svg path,.still .art svg circle,.still .art svg rect,.still .art svg line{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important;transition:none!important}
.still .btn .arr,.still .btn{transition:none}

.motion-tg{position:fixed;left:12px;bottom:12px;z-index:55;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px 7px 10px;
  font:500 12px/1 var(--body);color:var(--ink);background:rgba(250,250,250,.94);border:1px solid var(--line-2);border-radius:999px;cursor:pointer;
  box-shadow:var(--shadow-1);-webkit-tap-highlight-color:transparent}
.motion-tg svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.motion-tg .mt-off{display:none}
.motion-tg[aria-pressed="false"] .mt-on{display:none}
.motion-tg[aria-pressed="false"] .mt-off{display:block}
.motion-tg[aria-pressed="false"]{color:var(--mute)}
.motion-tg[disabled]{cursor:default}
@media (max-width:640px){.motion-tg{left:8px;bottom:8px}}
@media print{.motion-tg{display:none}}

/* Work cards: the real page travels inside the frame as the visitor scrolls ours. */
.scard-win{display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.scard.near .scard-frame .scard-win img{will-change:transform}
.scard-frame .scard-win img{aspect-ratio:auto;width:100%;height:auto;object-fit:fill;
  transform:translate3d(0,calc(var(--sp,0)*-77.5%),0)}
@media (prefers-reduced-motion:reduce){.scard-frame .scard-win img{transform:none}}

/* ── 5. instant website check ── */
.wcband{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(22px,4vw,64px);align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,3.4vw,48px)}
.wcband .h2{font-size:clamp(26px,3.2vw,42px)}
.wcband .lede{margin-top:14px}
@media (max-width:900px){.wcband{grid-template-columns:1fr}}
.wc-form{display:grid;gap:12px}
.wc-form label{display:block;font-size:13.5px;font-weight:500}
.wc-form input[type=text],.wc-form input[type=url],.wc-form input[type=email]{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px 14px;min-height:50px;width:100%}
.wc-form input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(23,23,23,.08)}
.wc-row{display:flex;gap:10px;align-items:stretch}
.wc-row input{flex:1 1 auto;min-width:0}
.wc-row .btn{flex:0 0 auto;min-height:50px}
@media (max-width:520px){.wc-row{flex-direction:column}.wc-row .btn{width:100%}}
.wc-form .fine{font-size:12.5px;line-height:1.5;color:var(--mute);font-weight:400}
.wc-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wc-opt{font-weight:400;color:var(--mute)}

.wc-out{margin-top:clamp(20px,3vw,36px)}
.wc-out[hidden]{display:none}
.wc-status{font-size:15px;color:var(--mute)}
.wc-err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#7f1d1d;border-radius:var(--r-md);padding:12px 14px;font-size:14.5px}
.wc-head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.wc-head h2{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.wc-head p{font-size:13.5px;color:var(--mute)}
.wc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,3vw,40px);margin-top:20px;align-items:start}
@media (max-width:900px){.wc-grid{grid-template-columns:1fr}}
.wc-list{list-style:none;display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.wc-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:15px 16px;border-top:1px solid var(--line)}
.wc-list li:first-child{border-top:0}
.wc-list b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.wc-list div>span{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
.wc-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;font-size:12px;font-weight:700;line-height:1}
.wc-ic[data-s=pass]{background:rgba(22,163,74,.12);color:#15803d}
.wc-ic[data-s=warn]{background:rgba(23,23,23,.07);color:var(--ink)}
.wc-ic[data-s=fail]{background:rgba(220,38,38,.1);color:#b91c1c}
.wc-ic[data-s=unknown]{background:transparent;border:1px dashed var(--line-2);color:var(--mute)}
.wc-speed{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);padding:18px}
.wc-speed h3,.wc-steps h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--mute)}
.wc-score{margin-top:10px;font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.wc-score small{font-size:16px;font-weight:500;letter-spacing:0;color:var(--mute)}
.wc-speed p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--mute)}
.wc-speed p.wc-src{font-size:12.5px}
.wc-steps{margin-top:14px;background:var(--ink);color:#fafafa;border-radius:var(--r-lg);padding:20px}
.wc-steps h3{color:var(--mute-dark)}
.wc-steps ol{margin:12px 0 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:12px}
.wc-steps li{counter-increment:st;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:14.5px;line-height:1.55}
.wc-steps li::before{content:counter(st);font-family:var(--mono);font-size:12px;color:var(--mute-dark);padding-top:3px}
.wc-steps .cta-row{margin-top:18px}
.wc-steps .wc-soft{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-dark);font-size:14.5px;color:#d6d6d6}
.wc-notes{margin-top:14px;font-size:13px;line-height:1.55;color:var(--mute)}
.wc-notes p+p{margin-top:6px}

@media (max-width:640px){.logos .logo{width:27vw;margin-inline:1.5vw;height:54px}}
.still .mx-live{animation:none!important}

/* ════════ Nov 11 2026: studio positioning pass ════════
   1. Work list, one project at a time (.show-list.solo). Each project is a track: its card pins
      under the nav and the capture of the real page travels inside the frame while the track's
      spacer scrolls past. Native scrolling only, so nothing can trap the visitor. Motion off,
      reduced motion, short viewports or a card taller than the viewport: plain stacked cards.
   2. Point of view, pillars list, artist figure, call card.
   3. Text over art: the closing panel's image is dimmed to a texture and its text lightened. */
.solo .scard{position:relative;top:auto;display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;
  margin-bottom:clamp(18px,2.4vw,32px)}
.solo .scard-pin{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3.4vw,56px);align-items:center;
  border-radius:var(--r-xl);border:1px solid rgba(255,255,255,.1);padding:clamp(20px,2.6vw,40px);overflow:hidden;
  background:
    radial-gradient(80% 120% at 100% 0%,color-mix(in srgb,var(--c,#f99c00) 22%,transparent),transparent 62%),
    #101010}
.solo .scard-frame,.solo .scard-phone{transform:none!important;transition:none}
.solo .scard h3{margin-top:14px;font-size:clamp(28px,3.4vw,48px)}
.solo .scard-d{color:#d4d4d4}
.solo .scard-win{position:relative}
.solo .scard-win::after{content:"";position:absolute;right:4px;top:calc(4px + var(--sp,0)*(100% - 8px - 22%));width:4px;height:22%;border-radius:4px;
  background:rgba(10,10,10,.42);pointer-events:none}
@media (min-width:901px) and (min-height:540px){
  .solo .scard.run:not(.nopin)::after{content:"";display:block;height:var(--run,1080px)}
  .solo .scard.run:not(.nopin) .scard-pin{position:sticky;top:max(88px,calc(50vh - 262px))}
}
@media (max-width:900px){
  .solo .scard-pin{grid-template-columns:1fr;gap:16px;padding:14px 14px 18px}
  .solo .scard-vis{order:-1;padding-bottom:0}
  .solo .scard-phone{display:none}
  .solo .scard h3{margin-top:10px;font-size:26px}
  .solo .scard-k{margin-top:6px}
  .solo .scard-d{margin-top:10px;font-size:14.5px;line-height:1.5}
  .solo .scard-tags{margin-top:12px}
  .solo .scard-links{margin-top:16px}
}
@media (max-width:900px) and (min-height:600px){
  .solo .scard.run:not(.nopin)::after{content:"";display:block;height:var(--run,620px)}
  .solo .scard.run:not(.nopin) .scard-pin{position:sticky;top:84px}
}
.still .solo .scard.run::after{display:none}
.still .solo .scard.run .scard-pin{position:relative;top:auto}
.still .solo .scard-win::after{display:none}
@media (prefers-reduced-motion:reduce){
  .solo .scard.run::after,.solo .scard-win::after{display:none}
  .solo .scard.run .scard-pin{position:relative;top:auto}
}
.show .skip:focus{position:static;display:inline-block;margin-top:18px;background:#fafafa;color:var(--ink)}
.show-sub{margin-top:clamp(36px,5vw,72px);outline:0}
.show-sub h3{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;color:#fafafa}
.show-sub p{margin-top:6px;font-size:15px;color:#c9c9c9}
.show-more.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.show-more.three img{width:96px;aspect-ratio:1/1}
.show-more span{color:#c9c9c9}
.show-more b{color:#fafafa}
@media (max-width:1000px){.show-more.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.show-more.three{grid-template-columns:1fr}}

.pov{padding-block:clamp(64px,10vw,150px)}
.pov-h{margin-top:18px;font-size:clamp(40px,8vw,118px);font-weight:700;line-height:.98;letter-spacing:-.05em;text-wrap:balance;max-width:14ch}
.pov-body{margin-top:clamp(28px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,48px);max-width:980px;margin-left:auto}
.pov-body p{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
@media (max-width:760px){.pov-body{grid-template-columns:1fr}}

.pillars{list-style:none;margin:clamp(28px,4vw,56px) 0 0;padding:0;border-top:1px solid var(--line-2)}
.pl{display:grid;grid-template-columns:64px minmax(0,5fr) minmax(0,6fr);gap:6px clamp(16px,3vw,48px);align-items:baseline;padding:clamp(20px,2.6vw,34px) 0;border-bottom:1px solid var(--line-2)}
.pl-n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute)}
.pl h3{font-size:clamp(24px,3vw,42px);font-weight:700;line-height:1.04;letter-spacing:-.035em}
.pl h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size 300ms var(--ease)}
.pl h3 a:hover,.pl h3 a:focus-visible{background-size:100% 2px}
.pl p{font-size:clamp(15px,1.25vw,17.5px);line-height:1.5;color:var(--ink-2);max-width:48ch}
.pl-sub{grid-column:3;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:13.5px}
.pl-sub a{color:var(--mute);border-bottom:1px solid var(--line-2);padding-bottom:1px}
.pl-sub a:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:820px){
  .pl{grid-template-columns:40px minmax(0,1fr)}
  .pl p,.pl-sub{grid-column:2}
}

.artist{margin:0;justify-self:center;width:min(440px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:14px;box-shadow:var(--shadow-2)}
.artist img{width:100%;height:auto;border-radius:calc(var(--r-xl) - 10px)}
.artist figcaption{padding:16px 6px 4px;display:grid;gap:4px}
.artist figcaption b{font-size:17px;letter-spacing:-.015em}
.artist figcaption span{font-size:14px;color:var(--mute);line-height:1.5}
.artist audio{width:100%;margin-top:12px;height:40px}

.callcard2{justify-self:center;width:min(380px,100%);background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-1)}
.cc2-k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500}
.cc2-num{margin-top:14px;font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc2-s{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--mute)}
.callcard2 .btn{margin-top:22px;width:100%;justify-content:center}

/* The older phone mock (voice pages): same calm card. No equalizer, no green, nothing loops. */
.phone{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:0;box-shadow:var(--shadow-1);width:min(380px,100%)}
.phone-in{background:none;border-radius:0;color:var(--ink);text-align:left;min-height:0;align-items:stretch;padding:clamp(24px,3vw,36px)}
.phone-in small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500}
.phone-in .num{margin-top:14px;font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.035em;white-space:nowrap}
.phone-in .who{margin-top:8px;font-size:14.5px;color:var(--mute)}
.phone .eq{display:none}
.phone-in .dial{margin-top:22px;justify-content:center;background:var(--ink);color:#fafafa}

.whofor{margin-top:clamp(36px,5vw,64px);padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--line-2)}
.who-lab{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:500}
.whofor .ind{margin-top:16px}
.hero-x .hero-note a{border-bottom-color:var(--accent)}

/* Text over art. The horizon image stays only as a faint texture, and the copy is light enough
   to clear 4.5:1 against the brightest pixel behind it. */
.cta-panel.has-art .cta-art{opacity:.22;filter:grayscale(1)}
.cta-panel p{color:#dcdcdc}
.cta-panel .fine{color:#c8c8c8}
.show .lede{color:#c9c9c9}
.show .eyebrow{color:#c9c9c9}
@media (max-width:900px){.solo .scard-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}}