/* ============================================================
   SERVICES — round 2 (2026-09-27). Page-only styles; site.css untouched.
   · glass: the console and the drawer sit on a soft ambient glow drawn
     from the chapter's own picture, so the frosted surfaces have something
     real to frost
   · 3D: the finished reel arrives inside the film as a phone that turns
     toward you; the church posters stand as a small fan with depth
   · sound switch, quiet caption beats, the proof section, the "also" row
   Reduced motion: nothing tilts or glides; layouts stay the same.
   ============================================================ */

/* ---- ambient glow behind the stage (the glass needs something to frost) ---- */
.crm-ambient{position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:center/cover no-repeat;filter:blur(80px) saturate(125%);opacity:.34;
  transform:translateZ(0);transition:background-image .8s ease}
:root[data-theme="dark"] .crm-ambient{opacity:.26}

/* ---- glass: the console bar and the drawer ---- */
.crm-bar{margin-top:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.13);
  border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 40px rgba(0,0,0,.28)}
.crm-drawer-in{border-radius:16px;border-color:rgba(255,255,255,.13);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 24px 60px rgba(0,0,0,.35)}
.crm-screen{border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
.crm-b{border-radius:999px}
.crm-ch{border-radius:10px;background:rgba(255,255,255,.025)}

/* ---- the sound switch ---- */
.crm-b-snd{border-color:rgba(245,242,236,.28);color:rgba(245,242,236,.9);background:rgba(255,255,255,.04)}
.crm-b-snd svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crm-b-snd:hover{border-color:var(--crm-brass);color:var(--crm-brass)}
.crm-b-snd[aria-checked="true"]{border-color:rgba(198,164,94,.7);color:#F2DDA8;background:rgba(198,164,94,.14)}
.crm-b-snd[aria-checked="true"] svg{animation:svrPulse 2.4s ease-in-out infinite}
/* round 3: a real switch — track + knob + the state in words, so it reads as a state, never a command */
.crm-b-snd{gap:8px}
.crm-b-snd .snd-sw{position:relative;flex:0 0 auto;width:30px;height:17px;border-radius:999px;
  background:rgba(245,242,236,.14);border:1px solid rgba(245,242,236,.42);transition:background .25s,border-color .25s}
.crm-b-snd .snd-sw i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:rgba(245,242,236,.9);transition:transform .25s ease,background .25s}
.crm-b-snd[aria-checked="true"] .snd-sw{background:var(--crm-brass);border-color:var(--crm-brass)}
.crm-b-snd[aria-checked="true"] .snd-sw i{transform:translateX(13px);background:#171A1E}
.crm-b-snd .snd-st{min-width:4.2em;text-align:left;letter-spacing:.12em;opacity:.8}
.crm-b-snd[aria-checked="true"] .snd-st{opacity:1}
@keyframes svrPulse{50%{opacity:.55}}
.crm-b-snd:focus-visible{outline:2px solid var(--crm-brass);outline-offset:3px}

/* ---- captions: quiet beats while the phone or the reel speaks ---- */
.crm-cap .c-line,.crm-cap .c-ey{transition:opacity .6s ease,filter .6s ease,transform .6s ease}
.crm-cap.is-quiet .c-line,.crm-cap.is-quiet .c-ey{opacity:0;filter:blur(6px)}
.crm-cap .c-line{font-size:clamp(1.1rem,2.3vw,2.05rem)}

/* ---- the finished reel, inside the film ---- */
.crm-freel{position:absolute;inset:0;z-index:1;overflow:hidden;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.crm-freel[hidden]{display:none}
.crm-freel.is-on{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.crm-freel-bg{position:absolute;inset:-10%;background:center/cover no-repeat;
  filter:blur(34px) brightness(.42) saturate(120%);transform:scale(1.08)}
.crm-freel-stage{position:absolute;inset:0;perspective:1400px}
.crm-freel-phone{position:absolute;right:10%;top:50%;height:90%;aspect-ratio:9/16;
  border-radius:clamp(10px,2.2vw,26px);overflow:hidden;background:#000;
  border:2px solid rgba(255,255,255,.2);
  box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 6px rgba(20,22,26,.85),0 0 0 7px rgba(255,255,255,.12);
  transform:translateY(-50%) rotateY(-22deg) rotateX(4deg) scale(.9);transform-origin:50% 50%;
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.crm-freel.is-on .crm-freel-phone{transform:translateY(-50%) rotateY(-8deg) rotateX(1.5deg) scale(1)}
.crm-freel-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a sheen across the glass of the phone */
.crm-freel-phone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%)}
.crm-screen.is-reel .crm-scrim{background:linear-gradient(100deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,.25) 48%,rgba(8,9,11,0) 70%)}
.crm-screen.is-reel .crm-cap .c-line{max-width:14ch}

/* ---- the drawer reel: two examples ---- */
.svr-pickrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.svr-pick[aria-pressed="true"]{background:var(--crm-brass);border-color:var(--crm-brass);color:#171A1E}
.svr-phone.phone-reel::before{background-image:var(--svr-bg)}
.crm-reelbox .phone{cursor:pointer}

/* ---- sticky jump-nav (was inline styles) ---- */
.svr-jump{position:sticky;top:var(--svr-navh,66px);z-index:90;background:var(--ink);border-bottom:1px solid rgba(198,164,94,.28)}
.svr-jump .wrap{padding-top:12px;padding-bottom:12px}
.svr-jump-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.svr-jump-row::-webkit-scrollbar{display:none}
.svr-jump a{white-space:nowrap;font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(245,242,236,.78);padding:8px 15px;border-radius:40px;
  border:1px solid rgba(245,242,236,.2);transition:border-color .25s,color .25s}
.svr-jump a:hover,.svr-jump a:focus-visible{border-color:#C6A45E;color:#C6A45E}
.svr-jump a.is-proof{border-color:rgba(198,164,94,.55);color:#E3C889}

/* ---- the reel in the Reels detail block ---- */
.svr-detail-reel{min-height:520px}
.svr-detail-reel .phone-reel::before{background-image:var(--svr-bg)}

/* ---- proof: work already out in the world ---- */
.svr-proof{position:relative;overflow:hidden;background:var(--page-2);border-top:1px solid var(--line)}
.svr-proof::before,.svr-proof::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);opacity:.5}
.svr-proof::before{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(198,164,94,.38),transparent 70%)}
.svr-proof::after{width:620px;height:620px;right:-200px;bottom:-240px;background:radial-gradient(circle,rgba(38,62,120,.28),transparent 70%)}
:root[data-theme="dark"] .svr-proof::before{opacity:.35}
.svr-proof-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.svr-proof .sec-head{margin-bottom:28px}
.svr-plan{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:svr}
.svr-plan li{counter-increment:svr;position:relative;padding:14px 16px 14px 54px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-theme="dark"] .svr-plan li{background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.svr-plan li::before{content:counter(svr,decimal-leading-zero);position:absolute;left:16px;top:15px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--accent)}
.svr-plan b{display:block;font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.2;color:var(--tx)}
.svr-plan span{display:block;margin-top:3px;font-size:.9rem;line-height:1.5;color:var(--tx-soft)}
.svr-credit{margin-top:22px;font-size:.86rem;line-height:1.6;color:var(--tx-soft);max-width:52ch}
.svr-credit a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}

.svr-fan{position:relative;height:clamp(420px,46vw,600px);perspective:1500px}
.svr-fan-in{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svr-card{position:absolute;margin:0;border-radius:10px;overflow:hidden;background:#0B1433;
  box-shadow:0 24px 50px rgba(10,14,30,.35),0 0 0 1px rgba(255,255,255,.08);
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.svr-card img,.svr-card video{display:block;width:100%;height:100%;object-fit:cover}
.svr-card figcaption{position:absolute;left:10px;bottom:10px;font-family:var(--sans);font-weight:600;font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:#F5F2EC;background:rgba(10,11,13,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:5px 9px;border-radius:20px}
.svr-c1{width:44%;aspect-ratio:4/5;left:2%;top:9%;transform:translateZ(-70px) rotateZ(-7deg)}
.svr-c2{width:44%;aspect-ratio:4/5;left:30%;top:0;transform:translateZ(10px)}
.svr-c3{width:44%;aspect-ratio:4/5;right:0;top:11%;transform:translateZ(-70px) rotateZ(7deg)}
.svr-c4{width:29%;aspect-ratio:9/16;right:6%;bottom:0;border-radius:16px;
  box-shadow:0 30px 60px rgba(10,14,30,.45),0 0 0 5px #15181d,0 0 0 6px rgba(255,255,255,.12);
  transform:translateZ(90px) rotateZ(3deg)}
.svr-fan:hover .svr-c1{transform:translateZ(-60px) rotateZ(-10deg) translateX(-10px)}
.svr-fan:hover .svr-c3{transform:translateZ(-60px) rotateZ(10deg) translateX(10px)}

/* round 5 · five different kinds of work: a web page, a roll-up banner, a poster, a bookmark, a reel.
   Built so the three already-published pieces (page, poster, reel) still compose on their own
   when the two pending ones (banner, bookmark) are hidden at cut-over. */
.rel-public [data-release="pending"]{display:none!important}
.svr-fan5{height:clamp(430px,44vw,580px)}
.svr-fan5 .svr-card{background:#0B1433}
.svr-k-web{width:80%;aspect-ratio:16/10;left:10%;top:0;border-radius:10px;transform:translateZ(-90px) rotateZ(-1.5deg)}
.svr-k-web::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border-bottom:1px solid rgba(255,255,255,.1)}
.svr-k-web img{object-position:top center}
.svr-fan5 .svr-k-web figcaption{top:22px;bottom:auto;left:12px}
.svr-k-banner{width:16.5%;aspect-ratio:420/1008;left:0;top:24%;border-radius:6px;transform:translateZ(-30px) rotateZ(-6deg)}
.svr-k-poster{width:28%;aspect-ratio:9/16;right:5%;top:20%;border-radius:10px;transform:translateZ(20px) rotateZ(4deg)}
.svr-k-mark{width:12%;aspect-ratio:360/1031;right:0;bottom:1%;border-radius:4px;transform:translateZ(70px) rotateZ(9deg)}
.svr-k-reel{width:27%;aspect-ratio:9/16;left:25%;bottom:0;border-radius:16px;
  box-shadow:0 30px 60px rgba(10,14,30,.45),0 0 0 5px #15181d,0 0 0 6px rgba(255,255,255,.12);
  transform:translateZ(90px) rotateZ(-3deg)}
.svr-fan5 .svr-card figcaption{white-space:nowrap}
.svr-k-banner figcaption,.svr-k-mark figcaption{left:50%;transform:translateX(-50%);bottom:8px;font-size:.5rem;padding:4px 7px}
.svr-fan5:hover .svr-k-banner{transform:translateZ(-20px) rotateZ(-9deg) translateX(-8px)}
.svr-fan5:hover .svr-k-mark{transform:translateZ(80px) rotateZ(12deg) translateX(8px)}
.svr-fan5:hover .svr-k-web{transform:translateZ(-90px) rotateZ(-1.5deg) translateY(-6px)}

/* ---- the three smaller services, in one row ---- */
.svr-more .feat{display:flex;flex-direction:column}
.svr-more .feat .more{margin-top:auto;padding-top:14px;align-self:flex-start}
.svr-more .feat p{margin-bottom:6px}

/* ---- phone + tablet ---- */
@media(max-width:1000px){
  .svr-proof-grid{grid-template-columns:1fr}
  .svr-fan{height:clamp(380px,92vw,560px);max-width:560px;margin:0 auto;width:100%}
}
@media(max-width:760px){
  .crm-bar{border-radius:12px;padding:8px}
  .crm-freel-phone{right:7%;height:92%}
  .crm-b-snd{flex:0 0 auto}
  .svr-detail-reel{min-height:460px}
  .svr-fan{height:clamp(360px,112vw,520px)}
  .svr-card figcaption{font-size:.5rem;left:7px;bottom:7px}
  .svr-fan5{height:clamp(360px,108vw,480px)}
  .svr-k-banner figcaption,.svr-k-mark figcaption{display:none}
  .svr-k-reel{width:30%;left:22%;bottom:4%}
  .svr-k-mark{right:4%;bottom:6%}
  .svr-k-poster{top:18%}
  .svr-fan5 .svr-card figcaption{font-size:.46rem;letter-spacing:.1em;padding:4px 7px}
}

/* ---- reduced motion: nothing glides or tilts ---- */
@media(prefers-reduced-motion:reduce){
  .crm-ambient,.crm-freel,.crm-freel-phone,.svr-fan-in,.svr-card,.crm-cap .c-line,.crm-cap .c-ey{transition:none}
  .crm-b-snd[aria-checked="true"] svg{animation:none}
  .crm-b-snd .snd-sw,.crm-b-snd .snd-sw i{transition:none}
  .crm-freel-phone,.crm-freel.is-on .crm-freel-phone{transform:translateY(-50%) rotateY(-8deg)}
}

/* ---- round 3: the chat greeting steps away when it would sit on text (desktop; services.js decides) ---- */
.cb-greet.svc-greet-away{opacity:0!important;visibility:hidden!important;transform:translateY(8px)!important;pointer-events:none}