/* ================================================================
   JZ CREATES — AI CONTENT CREATION offer page
   Design system matched to the "Limitless Creative" homepage:
   warm charcoal #0c0c0e, Playfair Display + Inter + Crimson Pro logo,
   locked red→magenta gradient, cursor glow, purple card hover glow,
   per-character heading reveals, 9:16 click-to-play reels.
   All rules scoped under .jzc so nothing leaks into the WP theme.
   ================================================================ */


.jzc{
  --bg:#0c0c0e; --bg-2:#16161a; --ink:#f6f3ef; --muted:#c0bbb2;
  --line:rgba(246,243,239,.09);
  --crimson:#ff2438; --gold:#e8c47c;
  --grad:linear-gradient(92deg,#ff0000 0%,#d600ed 100%);
  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-logo:"Crimson Pro",Georgia,serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --maxw:1600px; --pad:5%;
  position:relative;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* warmth at the true top of the page only */
.jzc::before{content:"";position:absolute;top:0;left:0;right:0;height:1500px;z-index:0;pointer-events:none;background:radial-gradient(ellipse 130% 100% at 50% 0%,var(--bg-2),transparent 72%)}
.jzc *{margin:0;padding:0;box-sizing:border-box}
.jzc ::selection{background:var(--crimson);color:#fff}
.jzc img,.jzc svg,.jzc video{display:block;max-width:100%}
.jzc a{color:inherit;text-decoration:none}
.jzc ul,.jzc ol{list-style:none}
.jzc h1,.jzc h2,.jzc h3{font-family:var(--font-display);font-weight:500;letter-spacing:.005em;line-height:1.2}
/* Elementor's global kit (post-6104.css) colours bare h1-h4 (#444/#D50000/#780000),
   forces Oswald + capitalize and fixed sizes. The mu-plugin dequeues the kit on this
   page, but re-assert here so the page is correct even if it ever loads. */
.jzc h1,.jzc h2,.jzc h3,.jzc h4,.jzc h5,.jzc h6{color:var(--ink);text-transform:none;font-style:normal}
.jzc :focus-visible{outline:2px solid #d600ed;outline-offset:3px;border-radius:4px}

/* content sits above the top glow + cursor glow */
.jzc__main,.jzc .nav,.jzc .footer,.jzc .sticky{position:relative;z-index:1}

.jzc .grad{font-style:italic;font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.08em;padding-left:.1em;margin-left:-.1em;padding-bottom:.14em;margin-bottom:-.14em}
.jzc .eyebrow{font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}
.jzc .head p.eyebrow{margin-top:0;font-size:1rem}
.jzc .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* film grain */
.jzc .grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:200;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:jzc-grain 9s steps(6) infinite}
@keyframes jzc-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

/* red glow that follows the cursor (desktop only) */
.jzc .bgglow{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(560px circle at var(--gx,50%) var(--gy,20%),rgba(255,0,0,.15),rgba(255,40,60,.05) 34%,transparent 62%)}

/* ---------- buttons ---------- */
.jzc .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.9rem;font-weight:500;letter-spacing:.03em;padding:.95rem 1.9rem;border-radius:999px;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s,border-color .35s;will-change:transform;border:none;cursor:pointer}
.jzc .btn--primary{background:var(--grad);color:#fff !important;box-shadow:0 0 0 rgba(255,36,56,0)}
.jzc .btn--primary:hover,.jzc .btn--primary:focus{transform:translateY(-2px);color:#fff !important;box-shadow:0 12px 40px rgba(255,36,56,.35)}
.jzc .btn--ghost{border:1px solid var(--line);color:var(--ink) !important;background:rgba(255,255,255,.02);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.jzc .btn--ghost:hover,.jzc .btn--ghost:focus{border-color:rgba(246,243,239,.3);color:var(--ink) !important;transform:translateY(-2px)}
.jzc .btn--big{padding:1.15rem 2.6rem;font-size:1rem}

/* ---------- reveals (no-JS safe: everything visible until JS says otherwise) ---------- */
.jzc .reveal{opacity:1;transform:none}
html.jzc-js .jzc .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.jzc-js .jzc .reveal.in{opacity:1;transform:none}

/* per-character heading reveal (matches the homepage split) */
.jzc [data-split] .wd{display:inline-block;white-space:nowrap}
html.jzc-js .jzc [data-split] .ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(24px);transition:opacity .8s var(--ease-out),filter .8s var(--ease-out),transform .8s var(--ease-out)}
html.jzc-js .jzc [data-split].in .ch{opacity:1;filter:blur(0);transform:none}

/* small elements that stagger in (chips, dots, reels) — delays set in JS */
html.jzc-js .jzc .stag{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
html.jzc-js .jzc .in .stag,html.jzc-js .jzc .stag.in{opacity:1;transform:none}

/* ---------- glow card (homepage .card behaviour) ---------- */
.jzc .gcard{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .45s var(--ease-out),border-color .45s,opacity .9s var(--ease-out)}
.jzc .gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(140,50,230,.18),transparent 45%);opacity:0;transition:opacity .45s;pointer-events:none}
.jzc .gcard:hover{transform:translateY(-6px);border-color:rgba(214,0,237,.4)}
.jzc .gcard:hover::before{opacity:1}
.jzc .gcard--flat:hover{transform:none}
.jzc .gcard>*{position:relative;z-index:1}

/* ---------- nav (solid blurred bar from first paint) ---------- */
.jzc .nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:1.1rem 0;background:rgba(12,12,14,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transition:background .4s,padding .4s,border-color .4s}
.jzc .nav.is-scrolled{background:rgba(12,12,14,.72);padding:.8rem 0}
.jzc .nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between}
.jzc .nav__logo{display:inline-flex;align-items:baseline;gap:.5rem}
.jzc .nav__logo-jz{font-family:var(--font-logo);font-style:normal;font-weight:500;font-size:1.5rem;line-height:1;color:var(--ink)}
.jzc .nav__logo-creates{font-family:var(--font-logo);font-style:italic;font-weight:600;font-size:1.35rem;letter-spacing:.1em;text-transform:uppercase;padding:0 .1em .06em 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.jzc .nav__right{display:flex;align-items:center;gap:1rem}
.jzc .nav__msg{font-size:.98rem;font-weight:450;color:var(--muted);letter-spacing:.04em;transition:color .3s}
.jzc .nav__msg:hover{color:var(--ink)}
.jzc .nav__cta{padding:.6rem 1.35rem;font-size:.84rem}
@media(max-width:560px){.jzc .nav__msg{display:none}}

/* ---------- hero ---------- */
.jzc .hero{position:relative;overflow:hidden;padding:20vh 0 6vh}
.jzc .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;align-items:center}
.jzc .hero__title{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.06}
.jzc .hero__sub{margin-top:1.4rem;color:var(--muted);font-size:clamp(1.15rem,1.35vw,1.35rem);line-height:1.55;max-width:52ch}
.jzc .hero__ctas{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.jzc .hero__proof{display:flex;align-items:center;gap:.8rem;margin-top:1.8rem;color:var(--muted);font-size:.98rem}
.jzc .hero__proof .stars{color:#ffd98a;letter-spacing:.14em;text-shadow:0 0 18px rgba(255,210,130,.5)}
.jzc .hero__media{position:relative;width:100%;max-width:620px;margin-left:auto}

/* 1:1 video slot — blank placeholder until the film is ready */
.jzc .vid1x1{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 90px rgba(0,0,0,.55);background:linear-gradient(150deg,#17171c,#0a0a0c)}
.jzc .vid1x1 iframe,.jzc .vid1x1 video{width:100%;height:100%;border:0;display:block;object-fit:cover}
.jzc .vid1x1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a0a0c}
/* The cover is a designed 1:1 still, so it fills the frame exactly. The film itself
   is a 9:16 Short, so once it plays YouTube pillarboxes it inside the square.
   The glow only sits over the poster; once the embed is in it would tint the film. */
.jzc .vid1x1[data-short]:not([data-embedded])::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(214,0,237,.10),transparent 70%)}
.jzc .vid1x1[data-short]{cursor:pointer}
.jzc .vid1x1__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:1px solid rgba(246,243,239,.35);background:rgba(6,6,7,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:3;transition:transform .4s var(--ease-out),background .4s,border-color .4s}
.jzc .vid1x1__play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:16px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.jzc .vid1x1:hover .vid1x1__play{transform:translate(-50%,-50%) scale(1.1);background:rgba(255,36,56,.55);border-color:transparent}
.jzc .vid1x1--empty{display:grid;place-items:center}
.jzc .vid1x1--empty span{position:relative;z-index:1;font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:rgba(246,243,239,.28)}
.jzc .vid1x1--empty::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(214,0,237,.12),transparent 70%)}

/* ---------- section shell (headings run the full container width) ---------- */
.jzc section.blk{padding:9vh 0}
.jzc .head{margin:0 auto 4rem}
.jzc .head h2{font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1.06;max-width:none}
.jzc .head p{margin-top:1.4rem;color:var(--muted);max-width:62ch;font-size:clamp(1.15rem,1.35vw,1.35rem);line-height:1.55}
.jzc .head--mid{text-align:center}
.jzc .head--mid p{margin-left:auto;margin-right:auto}

/* ---------- 1. the four growth automations ---------- */
.jzc .autos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.jzc .auto{display:flex;flex-direction:column;padding:2.6rem 2.4rem 2.2rem}
.jzc .auto__ico{width:44px;height:44px;margin-bottom:1.6rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.25}
.jzc .auto__kick{font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:var(--crimson);margin-bottom:.9rem}
.jzc .auto h3{font-size:1.7rem;font-weight:500;margin-bottom:.4rem}
.jzc .auto__sub{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.jzc .auto ul li{font-size:.98rem;color:rgba(246,243,239,.8);line-height:1.5;padding:.7rem 0;border-bottom:1px solid var(--line)}
.jzc .auto ul li:last-child{border-bottom:none}
.jzc .auto--tbd{border-style:dashed}
.jzc .auto__note{color:var(--gold) !important;font-style:italic;opacity:.9}

/* ---------- 2. system diagram ---------- */
.jzc .sys{display:grid;grid-template-columns:280px 1fr;gap:1.4rem;align-items:stretch}
.jzc .sys__src{display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:2.4rem 2.1rem;border-radius:20px;border:1px solid rgba(232,196,124,.4);background:radial-gradient(ellipse 90% 70% at 20% 20%,rgba(232,196,124,.09),transparent 65%),linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.jzc .sys__src span{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,196,124,.85)}
.jzc .sys__src h3{font-size:1.55rem;font-weight:500;color:var(--gold)}
.jzc .sys__src p{color:var(--muted);font-size:1rem;line-height:1.55}
.jzc .lanes{display:flex;flex-direction:column;gap:1rem}
.jzc .lane{padding:1.6rem 1.8rem;display:grid;grid-template-columns:180px 1fr;gap:1.4rem;align-items:center}
.jzc .lane__name{font-family:var(--font-display);font-size:1.35rem;font-weight:500;line-height:1.2}
.jzc .lane__name small{display:block;font-family:var(--font-body);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.jzc .flow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.jzc .flow .st{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.02);font-size:.94rem;line-height:1.2;white-space:nowrap;transition:border-color .45s var(--ease-out),opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.jzc .lane:hover .st{border-color:rgba(214,0,237,.45)}
.jzc .flow .st--you{border-color:rgba(232,196,124,.75) !important;color:var(--gold);box-shadow:0 0 22px rgba(232,196,124,.16)}
.jzc .flow .ar{color:rgba(246,243,239,.3);font-size:1rem;flex:none}
.jzc .sys__legend{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2.2rem;color:var(--muted);font-size:.98rem}
.jzc .sys__legend span{display:inline-flex;align-items:center;gap:.6rem}
.jzc .sys__legend i{width:14px;height:14px;border-radius:999px;border:1px solid rgba(214,0,237,.6);display:inline-block;flex:none}
.jzc .sys__legend i.you{border-color:rgba(232,196,124,.9)}

/* ---------- 3. examples of automations ---------- */
.jzc .ex{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.jzc .ex__card{display:flex;flex-direction:column;gap:.8rem;padding:2.1rem 2rem}
.jzc .tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.32rem .85rem;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.06em}
.jzc .tag--n8n{border:1px solid rgba(214,0,237,.5);color:#e79bf5;background:rgba(214,0,237,.08)}
.jzc .tag--ghl{border:1px solid rgba(232,196,124,.5);color:var(--gold);background:rgba(232,196,124,.07)}
.jzc .ex__card h3{font-size:1.32rem;font-weight:500;line-height:1.25}
.jzc .ex__card p{color:var(--muted);font-size:1rem;line-height:1.55}
.jzc .ex__card--cta{border-style:dashed;align-items:flex-start;justify-content:center;gap:1.1rem}
.jzc .ex__card--cta h3{font-size:1.5rem}

/* ---------- 4. stack (with logo marks) ---------- */
.jzc .stack{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.jzc .tool{padding:2.2rem 2rem}
.jzc .tool__logo{width:52px;height:52px;margin-bottom:1.4rem;fill:none;stroke:url(#jzcGrad);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jzc .tool b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:500;margin-bottom:.7rem}
.jzc .tool span{color:var(--muted);font-size:1.02rem;line-height:1.55;display:block}

/* ---------- 5. before / after ---------- */
.jzc .cmp{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.jzc .cmp__card{padding:2.8rem 2.6rem}
.jzc .cmp__card--after{border-color:rgba(214,0,237,.35);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(214,0,237,.10),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .cmp__label{font-size:.86rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.jzc .cmp__card--after .cmp__label{color:var(--ink)}
.jzc .dots{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:1.9rem}
.jzc .dots i{width:26px;height:26px;border-radius:7px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.02);display:block;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.jzc .dots--one i{width:100%;height:26px;border-radius:7px;border-color:rgba(214,0,237,.6);background:var(--grad);opacity:.85}
html.jzc-js .jzc .dots--one .stag.in{opacity:.85}
.jzc .cmp__big{font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:500;line-height:1.1;margin-bottom:.6rem}
.jzc .cmp__card--after .cmp__big{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jzc .cmp__card p{color:var(--muted);font-size:1.05rem;line-height:1.55}
.jzc .cmp__meter{display:flex;align-items:baseline;gap:1rem;margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.jzc .cmp__meter b{font-family:var(--font-display);font-size:1.7rem;font-weight:500}
.jzc .cmp__meter span{font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- 6. stat band (animated counters) ---------- */
.jzc .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3.6rem 0}
.jzc .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.jzc .stat b{display:block;font-family:var(--font-display);font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:500;line-height:1;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.6rem}
.jzc .stat span{color:var(--muted);font-size:1.02rem;line-height:1.5;display:block;max-width:24ch}

/* ---------- 7. who it's for ---------- */
.jzc .who{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.jzc .who__card{padding:2.2rem 2rem}
.jzc .who__card svg{width:28px;height:28px;margin-bottom:1.3rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.3}
.jzc .who__card h3{font-size:1.35rem;font-weight:500;margin-bottom:.5rem}
.jzc .who__card p{color:var(--muted);font-size:1rem;line-height:1.55}

/* ---------- 8. process (glowing step numbers, no box) ---------- */
.jzc .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2.8rem}
.jzc .step{position:relative;padding-top:2.4rem;border-top:1px solid var(--line)}
.jzc .step__num{position:absolute;top:-1.15rem;left:0;padding-right:1rem;font-family:var(--font-display);font-style:italic;font-size:2.1rem;color:var(--crimson);text-shadow:0 0 26px rgba(255,36,56,.55),0 0 6px rgba(12,12,14,.9)}
.jzc .step h3{font-size:1.6rem;font-weight:500;margin-bottom:.7rem}
.jzc .step p{color:var(--muted);font-size:1.02rem;line-height:1.6}

/* ---------- 9. engagements ---------- */
.jzc .pricing{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(214,0,237,.08),transparent 60%)}
.jzc .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch}
.jzc .tier{display:flex;flex-direction:column;padding:3rem 2.7rem;border-radius:22px}
.jzc .tier--feat{border-color:rgba(255,36,56,.4);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,36,56,.1),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .tier__badge{position:absolute;top:1.4rem;right:1.6rem;z-index:2;background:var(--grad);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.38rem 1rem;border-radius:999px}
.jzc .tier__name{font-size:.86rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.jzc .tier__line{font-family:var(--font-display);font-size:2.1rem;font-weight:500;line-height:1.15;margin:.7rem 0 .9rem}
.jzc .tier__for{color:var(--muted);font-size:1.02rem;line-height:1.55;margin-bottom:1.7rem;min-height:3.4em}
.jzc .tier ul{margin-bottom:2rem;flex:1}
.jzc .tier ul li{font-size:.98rem;color:rgba(246,243,239,.8);padding:.72rem 0;border-bottom:1px solid var(--line);display:flex;gap:.8rem;align-items:flex-start;line-height:1.5}
.jzc .tier ul li:last-child{border-bottom:none}
.jzc .tier ul li::before{content:"\2726";color:var(--crimson);font-size:.78rem;margin-top:.42rem;flex:none}
.jzc .tier .btn{width:100%}

/* discovery-call note strip */
.jzc .note{max-width:1300px;margin:2.6rem auto 0;padding:2rem 2.4rem;border-radius:20px;border:1px solid rgba(232,196,124,.32);background:rgba(232,196,124,.055);display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.jzc .note h3{font-size:1.55rem;font-weight:500}
.jzc .note p{color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:64ch;margin-top:.4rem}

/* ---------- 10. reviews ---------- */
.jzc .rev__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.jzc .rev{display:flex;flex-direction:column;padding:2.6rem 2.4rem}
.jzc .rev__stars{color:#ffd98a;letter-spacing:.3em;font-size:1.15rem;margin-bottom:1.3rem;text-shadow:0 0 18px rgba(255,210,130,.5)}
.jzc .rev p{font-family:var(--font-display);font-size:1.3rem;font-weight:500;line-height:1.4;margin-bottom:1.6rem;flex:1}
.jzc .rev footer strong{display:block;font-size:.98rem;font-weight:600}
.jzc .rev footer span{font-size:.88rem;color:var(--muted)}
.jzc .rev__badges{margin:2.6rem auto 0;display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;font-size:.98rem;color:var(--muted)}
.jzc .rev__badges a{font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--ink);border-bottom:1px solid rgba(246,243,239,.25);padding-bottom:.1rem;transition:color .3s,border-color .3s}
.jzc .rev__badges a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- 11. FAQ ---------- */
.jzc .faq{max-width:1180px;margin:0 auto}
.jzc .faq details{border-bottom:1px solid var(--line)}
.jzc .faq details:first-of-type{border-top:1px solid var(--line)}
.jzc .faq summary{position:relative;list-style:none;cursor:pointer;padding:1.7rem 3.4rem 1.7rem 0;font-family:var(--font-display);font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:500;transition:color .3s}
.jzc .faq summary::-webkit-details-marker{display:none}
.jzc .faq summary:hover{color:#f0a9ff}
.jzc .faq summary::after{content:"";position:absolute;right:.6rem;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(92deg,#ff0000,#d600ed);-webkit-mask:linear-gradient(#000 0 0) center/14px 2px no-repeat,linear-gradient(#000 0 0) center/2px 14px no-repeat;mask:linear-gradient(#000 0 0) center/14px 2px no-repeat,linear-gradient(#000 0 0) center/2px 14px no-repeat;transition:transform .4s var(--ease-out)}
.jzc .faq details[open] summary::after{transform:rotate(135deg)}
.jzc .faq details p{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:88ch;padding:0 3.4rem 1.8rem 0}

/* ---------- 12. final ---------- */
.jzc .final{position:relative;text-align:center;padding:15vh var(--pad) 10vh;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 115%,rgba(255,36,56,.16),transparent 70%)}
.jzc .final h2{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.06;margin:0 auto;max-width:24ch}
.jzc .final__sub{margin-top:1.3rem;color:var(--muted);font-size:clamp(1.15rem,1.35vw,1.35rem);line-height:1.55;max-width:52ch;margin-left:auto;margin-right:auto}
.jzc .final__actions{margin-top:2.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.jzc .contact{max-width:820px;margin:3.6rem auto 0;border-radius:16px;overflow:hidden;background:#f6f4f0;box-shadow:0 30px 90px rgba(0,0,0,.5);text-align:left}
.jzc .contact iframe{min-height:660px;width:100%;display:block;border:0}
.jzc .final__direct{margin-top:2.4rem;font-size:1rem;color:var(--muted)}
.jzc .final__direct a{color:var(--ink);border-bottom:1px solid var(--line);transition:color .3s}
.jzc .final__direct a:hover{color:var(--gold)}

/* ---------- footer ---------- */
.jzc .footer{border-top:1px solid var(--line);padding:3.4rem var(--pad) 2.4rem}
.jzc .footer__top,.jzc .footer__bottom{max-width:var(--maxw);margin-inline:auto}
.jzc .footer__top{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem}
.jzc .footer__nav{display:flex;gap:2rem;flex-wrap:wrap}
.jzc .footer__nav a{font-size:.98rem;color:var(--muted);transition:color .3s}
.jzc .footer__nav a:hover{color:var(--ink)}
.jzc .footer__social{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center}
.jzc .footer__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--muted);transition:color .3s,border-color .3s,background .3s,transform .3s}
.jzc .footer__social a:hover{color:var(--ink);border-color:rgba(214,0,237,.5);transform:translateY(-3px)}
.jzc .footer__social svg{width:18px;height:18px;fill:currentColor;display:block}
.jzc .footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.88rem;color:rgba(192,187,178,.7)}
.jzc .footer__bottom a{text-decoration:underline;text-underline-offset:3px}
.jzc .footer__made{font-family:var(--font-display);font-style:italic}

/* sticky mobile CTA */
.jzc .sticky{display:none}
@media(max-width:760px){
  .jzc .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:250;padding:.8rem var(--pad) calc(.8rem + env(safe-area-inset-bottom));background:rgba(12,12,14,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .jzc .sticky .btn{width:100%}
}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .jzc .sys{grid-template-columns:1fr}
  .jzc .lane{grid-template-columns:160px 1fr}
}
@media (max-width:1024px){
  .jzc .bgglow{display:none}
  .jzc .hero{padding:16vh 0 4vh}
  .jzc .hero__grid{grid-template-columns:1fr;gap:2.6rem}
  /* stacked layout leads with the film — it sells the offer faster than the headline */
  .jzc .hero__media{order:-1;margin-inline:auto}
  .jzc .autos,.jzc .stack,.jzc .who,.jzc .ex{grid-template-columns:1fr 1fr}
  .jzc .steps{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
  .jzc .rev__grid{grid-template-columns:repeat(2,1fr)}
  .jzc .tiers{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  .jzc .tier--feat{order:-1}
  .jzc .stats__grid{grid-template-columns:1fr 1fr;gap:2.4rem}
  .jzc .lane{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:640px){
  .jzc .autos,.jzc .stack,.jzc .who,.jzc .ex,.jzc .cmp,.jzc .steps,.jzc .rev__grid{grid-template-columns:1fr}
  .jzc .flow .st{font-size:.88rem;padding:.45rem .85rem}
  .jzc .hero__ctas .btn,.jzc .final__actions .btn{width:100%}
  .jzc .final{padding-bottom:16vh}
  .jzc .footer{padding-bottom:5.5rem}
}
@media (prefers-reduced-motion:reduce){
  .jzc .grain{animation:none}
  .jzc .bgglow{display:none}
  .jzc .reveal,html.jzc-js .jzc .reveal,
  html.jzc-js .jzc [data-split] .ch,
  html.jzc-js .jzc [data-split] .grad,
  html.jzc-js .jzc .stag{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}
  .jzc .gcard:hover{transform:none}
}

/* ================================================================
   MARKETING AUTOMATION — page-specific visual components
   ================================================================ */

/* ---------- the gradient phrase in a split heading ----------
   It is never split per-letter (per-letter transforms break background-clip:text),
   so the walker tags the whole <em> with .ch. But .ch also applies filter:blur(),
   and a filter on a background-clip:text element makes Chrome flatten the clip —
   the phrase then just sits there while the plain letters animate around it.
   So: give it its own reveal, opacity + travel only, no filter, timed to land
   just after the last character of the line. */
html.jzc-js .jzc [data-split] .grad{opacity:0;filter:none;transform:translateY(22px);transition:opacity .95s var(--ease-out) .26s,transform .95s var(--ease-out) .26s}
html.jzc-js .jzc [data-split].in .grad{opacity:1;filter:none;transform:none}

/* ---------- shared small parts ---------- */
.jzc .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.025);font-size:.93rem;line-height:1.2;color:rgba(246,243,239,.85);transition:border-color .4s var(--ease-out),color .4s,opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.jzc .chip--gold{border-color:rgba(232,196,124,.6);color:var(--gold)}
.jzc .chip--grad{border-color:rgba(214,0,237,.45);color:#f0a9ff;background:rgba(214,0,237,.07)}
.jzc .chips{display:flex;flex-wrap:wrap;gap:.6rem}
.jzc .cta-mid{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:3.4rem}

/* ---------- 1. the problem ---------- */
.jzc .prob{display:grid;grid-template-columns:1.25fr .75fr;gap:1.4rem;align-items:stretch}
.jzc .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;align-content:stretch}
.jzc .tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.4rem 1rem;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:.92rem;line-height:1.35;color:rgba(246,243,239,.76);text-align:center;transition:border-color .4s var(--ease-out),color .4s,opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.jzc .tiles:hover .tile{border-color:rgba(255,36,56,.22)}
.jzc .tile small{display:block;margin-top:.55rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,36,56,.75)}
.jzc .cost{display:flex;flex-direction:column;justify-content:center;padding:2.6rem 2.4rem;gap:1.1rem}
.jzc .cost__k{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.jzc .cost__n{font-family:var(--font-display);font-size:clamp(2.6rem,4.4vw,3.8rem);font-weight:500;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jzc .cost__p{color:var(--muted);font-size:1.02rem;line-height:1.55}
.jzc .bars{display:flex;flex-direction:column;gap:.7rem;margin-top:.4rem}
.jzc .bar{display:grid;grid-template-columns:96px 1fr;gap:.9rem;align-items:center;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.jzc .bar i{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.jzc .bar i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--w,50%);border-radius:999px;background:var(--grad)}

/* ---------- 2. team vs system ---------- */
.jzc .duo{display:grid;grid-template-columns:1fr 74px 1fr;gap:1rem;align-items:stretch}
.jzc .duo__card{padding:2.7rem 2.5rem;display:flex;flex-direction:column;gap:1.3rem}
.jzc .duo__card h3{font-size:1.9rem;font-weight:500}
.jzc .duo__k{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.jzc .duo__card--sys{border-color:rgba(214,0,237,.35);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(214,0,237,.1),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .duo__mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;color:rgba(246,243,239,.35)}
.jzc .duo__mid b{font-family:var(--font-display);font-size:2rem;font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jzc .duo__mid i{display:block;width:1px;flex:1;min-height:40px;background:linear-gradient(180deg,transparent,rgba(246,243,239,.22),transparent)}

/* ---------- 3. the content engine (fan diagram) ---------- */
.jzc .engine{display:block}
.jzc .eng__src{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem 3rem;align-items:center;padding:2.4rem 2.8rem;border-radius:20px;border:1px solid rgba(232,196,124,.45);background:radial-gradient(ellipse 90% 70% at 20% 20%,rgba(232,196,124,.1),transparent 65%),linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.jzc .eng__src span{font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,196,124,.85)}
.jzc .eng__src h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2.05rem);line-height:1.2;font-weight:500;color:var(--gold);margin:.7rem 0 .5rem}
.jzc .eng__src p{color:var(--muted);font-size:.98rem;line-height:1.55}
.jzc .eng__fan{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.jzc .eng__link{position:relative;height:54px}
.jzc .eng__link::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(232,196,124,.55),rgba(214,0,237,.65))}
.jzc .eng__link::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;margin-left:-4px;border-right:1px solid rgba(214,0,237,.8);border-bottom:1px solid rgba(214,0,237,.8);transform:rotate(45deg)}
.jzc .eng__link--out::before{background:linear-gradient(180deg,rgba(214,0,237,.65),rgba(232,196,124,.55))}
.jzc .oc{position:relative;text-align:center;padding:1.05rem 1rem;border-radius:12px;border:1px solid rgba(246,243,239,.14);background:rgba(255,255,255,.025);font-size:.93rem;line-height:1.25;color:rgba(246,243,239,.85);transition:border-color .4s var(--ease-out),transform .5s var(--ease-out),opacity .6s var(--ease-out)}
.jzc .eng__fan:hover .oc{border-color:rgba(214,0,237,.4)}
.jzc .eng__end{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.jzc .node{flex:1 1 220px;max-width:340px;padding:1.3rem 1.4rem;border-radius:14px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.03);text-align:center}
.jzc .node b{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.jzc .node small{display:block;margin-top:.25rem;font-size:.82rem;color:var(--muted)}
.jzc .node--you{border-color:rgba(232,196,124,.75);color:var(--gold);box-shadow:0 0 26px rgba(232,196,124,.14)}
.jzc .node--out{border-color:rgba(214,0,237,.5);background:radial-gradient(ellipse 80% 80% at 50% 0%,rgba(214,0,237,.14),transparent 70%)}
.jzc .node__ar{flex:none;color:rgba(246,243,239,.35);font-size:1.2rem;line-height:1}

/* ---------- 4. the rail (idea to execution) ---------- */
.jzc .rail{display:grid;grid-template-columns:repeat(7,1fr);gap:.7rem;position:relative}
.jzc .rail::before{content:"";position:absolute;left:3%;right:3%;top:26px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,36,56,.5),rgba(214,0,237,.5),transparent)}
.jzc .rs{position:relative;text-align:center;padding-top:3.9rem}
.jzc .rs__dot{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:41px;height:41px;border-radius:50%;border:1px solid rgba(214,0,237,.55);background:#0c0c0e;display:grid;place-items:center;font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:var(--ink)}
.jzc .rs--you .rs__dot{border-color:rgba(232,196,124,.9);color:var(--gold);box-shadow:0 0 26px rgba(232,196,124,.4)}
.jzc .rs b{display:block;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.jzc .rs--you b{color:var(--gold)}
.jzc .rs p{font-family:var(--font-display);font-size:1.25rem;font-weight:500;line-height:1.25}
.jzc .rs small{display:block;margin-top:.45rem;font-size:.9rem;color:var(--muted);line-height:1.45}

/* ---------- 5. use case cards ---------- */
.jzc .cases{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.jzc .cases::-webkit-scrollbar{display:none}
.jzc .cases.is-drag{cursor:grabbing}
.jzc .cases__hint{max-width:var(--maxw);margin:1.2rem auto 0;padding:0 var(--pad);text-align:center;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(192,187,178,.6)}
.jzc .cases__track{display:flex;gap:1.3rem;width:max-content;padding:.5rem 0 1rem}
.jzc .case{display:flex;flex-direction:column;width:340px;min-height:262px;flex:none;padding:2.2rem 2.1rem}
.jzc .case svg{width:26px;height:26px;margin-bottom:1.1rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.jzc .case h3{font-size:1.22rem;font-weight:500;margin-bottom:.45rem}
.jzc .case p{color:var(--muted);font-size:.97rem;line-height:1.5}

/* ---------- 6. repurposing ---------- */
.jzc .repur{display:grid;grid-template-columns:300px 1fr;gap:2.4rem;align-items:center}
.jzc .repur__src{padding:2.2rem 2rem;text-align:center;border-radius:20px;border:1px solid rgba(255,36,56,.4);background:radial-gradient(ellipse 80% 70% at 50% 20%,rgba(255,36,56,.12),transparent 70%)}
.jzc .repur__src svg{width:40px;height:40px;margin:0 auto 1.1rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.3}
.jzc .repur__src b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:500}
.jzc .repur__src span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--muted)}
.jzc .repur__out{position:relative;padding-left:2.4rem}
.jzc .repur__out::before{content:"";position:absolute;left:0;top:4%;bottom:4%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,36,56,.5),rgba(214,0,237,.5),transparent)}

/* ---------- 7. three layers ---------- */
.jzc .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.jzc .layer{padding:2.4rem 2.2rem;display:flex;flex-direction:column}
.jzc .layer__k{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--crimson);margin-bottom:.8rem}
.jzc .layer h3{font-size:1.7rem;font-weight:500;margin-bottom:.4rem}
.jzc .layer__sub{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.jzc .layer ul li{font-size:.97rem;color:rgba(246,243,239,.8);line-height:1.5;padding:.62rem 0;border-bottom:1px solid var(--line)}
.jzc .layer ul li:last-child{border-bottom:none}

/* ---------- 8. monday morning dashboard mock ---------- */
.jzc .mon{max-width:1320px;margin:0 auto;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,#141418,#0b0b0d);overflow:hidden;box-shadow:0 40px 110px rgba(0,0,0,.6)}
.jzc .mon__bar{display:flex;align-items:center;gap:.9rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);flex-wrap:wrap}
.jzc .mon__dots{display:flex;gap:.4rem}
.jzc .mon__dots i{width:10px;height:10px;border-radius:50%;background:rgba(246,243,239,.18)}
.jzc .mon__dots i:first-child{background:rgba(255,36,56,.7)}
.jzc .mon__title{font-size:.92rem;color:var(--muted);letter-spacing:.04em}
.jzc .mon__title b{color:var(--ink);font-weight:600}
.jzc .mon__stamp{margin-left:auto;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,196,124,.85)}
.jzc .mon__body{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.6rem}
.jzc .mblk{border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.022);padding:1.4rem 1.4rem 1rem}
.jzc .mblk h4{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.jzc .mblk h4::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(214,0,237,.8);flex:none}
.jzc .mblk--warn{border-color:rgba(232,196,124,.35)}
.jzc .mblk--warn h4{color:var(--gold)}
.jzc .mblk--warn h4::before{background:var(--gold)}
.jzc .mrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px dashed rgba(246,243,239,.09);font-size:.95rem;color:rgba(246,243,239,.82);line-height:1.35}
.jzc .mrow:last-child{border-bottom:none}
.jzc .mrow b{font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--ink);flex:none}
.jzc .mrow--gold{color:var(--gold)}
.jzc .mrow--gold b{color:var(--gold)}
.jzc .mon__foot{padding:1.1rem 1.6rem 1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem;text-align:center}

/* ---------- 9. human + AI ---------- */
.jzc .hai{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.jzc .hai__card{padding:2.6rem 2.4rem}
.jzc .hai__card h3{font-size:1.7rem;font-weight:500;margin-bottom:.4rem}
.jzc .hai__k{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.jzc .hai__card--h{border-color:rgba(232,196,124,.4);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(232,196,124,.08),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.jzc .hai__card--h h3,.jzc .hai__card--h .hai__k{color:var(--gold)}
.jzc .hai__k--red{color:var(--crimson)}

/* ---------- 10. tools ---------- */
.jzc .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.jzc .tgrp{padding:2rem 1.9rem}
.jzc .tgrp h4{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}

/* ---------- 11. automation audit ---------- */
.jzc .audit{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.jzc .audit__card{padding:2.8rem 2.6rem;display:flex;flex-direction:column}
.jzc .audit__card h3{font-size:1.8rem;font-weight:500;margin-bottom:1.3rem}
.jzc .audit__card--out{border-color:rgba(214,0,237,.4);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(214,0,237,.11),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .checks{flex:1}
.jzc .checks li{display:flex;gap:.85rem;align-items:flex-start;font-size:1rem;color:rgba(246,243,239,.82);line-height:1.5;padding:.6rem 0;border-bottom:1px solid var(--line)}
.jzc .checks li:last-child{border-bottom:none}
.jzc .checks li::before{content:"\2726";color:var(--crimson);font-size:.76rem;margin-top:.4rem;flex:none}
.jzc .audit__card .btn{margin-top:1.9rem;width:100%}

/* ---------- 12. pricing tweaks (no dollar figures) ---------- */
.jzc .tier{position:relative}
.jzc .note{width:min(1300px,90%)}
.jzc .steps--six{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.jzc .steps--six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.jzc .steps--six{grid-template-columns:1fr}}
.jzc .tier__quote{font-size:.84rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}

/* ---------- responsive for the new parts ---------- */
@media (max-width:1280px){
  .jzc .eng__fan{grid-template-columns:repeat(3,1fr)}
  .jzc .rail{grid-template-columns:repeat(4,1fr);gap:1.8rem .7rem}
  .jzc .rail::before{display:none}
  .jzc .mon__body{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .jzc .prob,.jzc .repur,.jzc .hai,.jzc .audit,.jzc .layers{grid-template-columns:1fr}
  .jzc .tiles{align-content:start}
  .jzc .repur__out{padding-left:0;padding-top:1.6rem}
  .jzc .repur__out::before{left:6%;right:6%;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,36,56,.5),rgba(214,0,237,.5),transparent)}
  .jzc .tiles{grid-template-columns:repeat(4,1fr)}
  .jzc .tools{grid-template-columns:repeat(2,1fr)}
  .jzc .duo{grid-template-columns:1fr}
  .jzc .duo__mid{flex-direction:row;padding:.4rem 0}
  .jzc .duo__mid i{width:auto;height:1px;min-height:0;flex:1;background:linear-gradient(90deg,transparent,rgba(246,243,239,.22),transparent)}
}
@media (max-width:640px){
  .jzc .tiles{grid-template-columns:repeat(2,1fr)}
  .jzc .eng__fan{grid-template-columns:1fr 1fr}
  .jzc .eng__src{grid-template-columns:1fr}
  .jzc .node__ar{display:none}
  .jzc .eng__end{flex-direction:column;align-items:stretch}
  .jzc .node{flex:none;width:100%;max-width:none;padding:1.1rem 1.2rem}
  .jzc .rail{grid-template-columns:1fr 1fr}
  .jzc .tools,.jzc .mon__body{grid-template-columns:1fr}
  .jzc .case{width:min(78vw,320px);min-height:240px}
  .jzc .cta-mid .btn{width:100%}
}

/* ==================================================================
   AI CONTENT CREATION — this page's own sections.
   Everything else (tokens, buttons, gcard, hero, tiers, reviews, faq,
   final CTA, sticky) comes from the shared foundation.
   ================================================================== */

/* backstop: the Elementor global kit reddens bare headings if it ever loads */
.jzc h1,.jzc h2,.jzc h3,.jzc h4,.jzc h5,.jzc h6{color:var(--ink);text-transform:none}

/* ---------- 1. WHAT WE CREATE — capability cards ---------- */
.jzc .cap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.jzc .cap__card{padding:2.4rem 2.1rem 2.2rem;display:flex;flex-direction:column}
.jzc .cap__ic{display:block;width:38px;height:38px}
.jzc .cap__ic svg{width:100%;height:100%;fill:none;stroke:url(#jzcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .cap__card h3{font-size:1.35rem;margin:1.6rem 0 .8rem}
.jzc .cap__card p{color:var(--muted);font-size:.99rem;line-height:1.62}
.jzc .cap__for{margin-top:auto;padding-top:1.4rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(192,187,178,.72)}

/* ---------- 2. THE CONTENT CAPACITY GAP ---------- */
.jzc .cmpx{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:stretch}
.jzc .cmpx__card{padding:2.4rem 2.4rem 2.2rem;display:flex;flex-direction:column}
.jzc .cmpx__card--ai{border-color:rgba(214,0,237,.34);background:radial-gradient(ellipse 80% 70% at 20% 0%,rgba(214,0,237,.10),transparent 62%),rgba(255,255,255,.02)}
.jzc .cmpx__who{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* the asset squares — 10 vs 50, the whole argument in one look */
.jzc .cmpx__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:1.8rem 0 1.4rem;align-content:start}
/* both cards render the same 50-cell canvas — only the fill differs, so the
   two counts line up and the gap is the only thing the eye reads */
.jzc .cmpx__grid i{display:block;aspect-ratio:1/1;border-radius:4px;border:1px solid rgba(246,243,239,.06);background:rgba(246,243,239,.025)}
.jzc .cmpx__grid i.on{border-color:rgba(246,243,239,.16);background:rgba(246,243,239,.14)}
.jzc .cmpx__grid--full i.on{border-color:rgba(214,0,237,.3);background:var(--grad);opacity:.9}
.jzc .cmpx__n{font-family:var(--font-display);font-size:1.35rem;font-weight:500}
.jzc .cmpx__n b{font-size:2.4rem;font-style:italic;line-height:1;margin-right:.35rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .cmpx__card:not(.cmpx__card--ai) .cmpx__n b{background:none;color:rgba(246,243,239,.62)}
.jzc .cmpx__facts{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.55rem}
.jzc .cmpx__facts li{position:relative;padding-left:1.4rem;color:var(--muted);font-size:.97rem;line-height:1.55}
.jzc .cmpx__facts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:rgba(246,243,239,.32)}
.jzc .cmpx__card--ai .cmpx__facts li::before{background:var(--grad)}
.jzc .cmpx__foot{margin-top:1.4rem;color:rgba(192,187,178,.72);font-size:.94rem}
.jzc .cmpx__foot em{font-family:var(--font-display);font-style:italic;color:rgba(246,243,239,.9);font-size:1.05rem}

/* the three pressures */
.jzc .press{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:3.2rem}
.jzc .press__card{position:relative;padding:2.3rem 2.1rem}
.jzc .press__n{position:absolute;top:1.5rem;right:1.8rem;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.5rem;line-height:1;color:rgba(255,36,56,.55);text-shadow:0 0 26px rgba(255,36,56,.28)}
.jzc .press__card h3{font-size:1.4rem;margin-bottom:.8rem;padding-right:3rem}
.jzc .press__card p{color:var(--muted);font-size:.99rem;line-height:1.62}
.jzc .press__note{margin-top:2.6rem;padding:2rem 2.4rem;border-radius:22px;border:1px solid rgba(214,0,237,.35);background:radial-gradient(ellipse 70% 100% at 10% 0%,rgba(214,0,237,.12),transparent 62%),rgba(255,255,255,.02);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.jzc .press__ic{display:block;width:42px;height:42px;flex:none}
.jzc .press__ic svg{width:100%;height:100%;fill:none;stroke:url(#jzcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .press__note h3{font-size:1.6rem;margin-bottom:.6rem}
.jzc .press__note p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch}

/* ---------- 3. CREATIVE LEVERAGE — the fan ---------- */
.jzc .lev{display:grid;grid-template-columns:1.25fr .75fr;gap:3.2rem;align-items:center}
.jzc .lev__fig{width:100%;margin:0}
.jzc .lev__fig svg{display:block;width:100%;height:auto;overflow:visible}

.jzc .lev__lines path{fill:none;stroke:rgba(246,243,239,.16);stroke-width:1.4;transition:stroke .35s var(--ease-out),stroke-width .35s var(--ease-out)}
.jzc .lev__lines path.is-on{stroke:url(#jzcGrad);stroke-width:2.6}

.jzc .lev__hub circle{fill:rgba(214,0,237,.07);stroke:rgba(214,0,237,.4);stroke-width:1.4}
.jzc .lev__hub text.a{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:34px;fill:var(--ink)}

.jzc .lev__out rect{fill:rgba(255,255,255,.03);stroke:rgba(246,243,239,.14);stroke-width:1.2;transition:fill .35s var(--ease-out),stroke .35s var(--ease-out)}
.jzc .lev__out text{font-family:var(--font-body);font-size:17px;letter-spacing:.02em;fill:rgba(192,187,178,.9);dominant-baseline:middle;transition:fill .35s var(--ease-out)}
.jzc .lev__out.is-on rect{fill:rgba(214,0,237,.14);stroke:rgba(214,0,237,.6)}
.jzc .lev__out.is-on text{fill:var(--ink)}
.jzc .lev__out{cursor:pointer}

.jzc .lev__side{display:flex;flex-direction:column;gap:1.4rem}
.jzc .lev__hint{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(192,187,178,.6)}
.jzc .lev__detail{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start;padding:2rem 2.1rem;border-radius:20px;border:1px solid rgba(214,0,237,.3);background:radial-gradient(ellipse 80% 100% at 10% 0%,rgba(214,0,237,.11),transparent 65%),rgba(255,255,255,.02);min-height:210px}
.jzc .lev__detail-n{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .lev__detail-t{display:block;font-family:var(--font-display);font-weight:500;font-size:1.5rem;margin-bottom:.7rem}
.jzc .lev__detail-p{color:var(--muted);font-size:1rem;line-height:1.62}
.jzc .lev__foot{font-family:var(--font-display);font-size:1.3rem}
.jzc .lev__foot em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* mobile layout, and the single source the detail panel reads from */
.jzc .lev__list{display:none;flex-direction:column;gap:.9rem}
.jzc .lev__row{display:grid;grid-template-columns:52px 1fr;gap:1.1rem;align-items:start;padding:1.1rem 1.2rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .lev__row b{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.7rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .lev__row strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin-bottom:.3rem}
.jzc .lev__row span{color:var(--muted);font-size:.95rem;line-height:1.55}

/* ---------- shared media components ---------- */

/* 16:9 click-to-play film */
.jzc .vid169{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(150deg,#17171c,#0a0a0c);cursor:pointer;transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.jzc .vid169:hover{border-color:rgba(214,0,237,.55);box-shadow:0 0 46px rgba(214,0,237,.35)}
.jzc .vid169 img,.jzc .vid169 iframe{width:100%;height:100%;border:0;object-fit:cover;display:block;background:#0a0a0c}
.jzc .vid169 button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:1px solid rgba(246,243,239,.35);background:rgba(6,6,7,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:3;transition:transform .4s var(--ease-out),background .4s}
.jzc .vid169 button::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.jzc .vid169:hover button{transform:translate(-50%,-50%) scale(1.1);background:rgba(214,0,237,.4)}
.jzc .vid169[data-embedded] button{display:none}

/* 9:16 click-to-play reels */
.jzc .reel{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.jzc .reel--3{grid-template-columns:repeat(3,1fr)}
.jzc .reel--4{grid-template-columns:repeat(4,1fr)}
.jzc .reel__f{position:relative;aspect-ratio:9/16;border-radius:34px;padding:10px;border:1px solid rgba(246,243,239,.16);background:linear-gradient(150deg,#17171c,#0a0a0c);cursor:pointer;transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.jzc .reel__f:hover{border-color:rgba(214,0,237,.55);box-shadow:0 0 42px rgba(214,0,237,.45)}
.jzc .reel__f img,.jzc .reel__f iframe{width:100%;height:100%;border:0;border-radius:26px;object-fit:cover;display:block;background:#0a0a0c}
.jzc .reel__f button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(246,243,239,.35);background:rgba(6,6,7,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:3;transition:transform .4s var(--ease-out),background .4s}
.jzc .reel__f button::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.jzc .reel__f:hover button{transform:translate(-50%,-50%) scale(1.1);background:rgba(214,0,237,.35)}
.jzc .reel__f[data-embedded] button{display:none}

/* rotating image carousel - data-per slides visible, data-auto ms per step */
/* CSS owns the slide width, so the first layout is already correct and a flex
   track can never inflate the grid column it sits in (min-width:0 does the rest) */
.jzc .gal{position:relative;--per:2;--gal-gap:1.1rem;min-width:0}
.jzc .gal--tall{--per:3}
.jzc .gal__vp{overflow:hidden;border-radius:20px;min-width:0}
.jzc .gal__track{display:flex;gap:var(--gal-gap);transition:transform .8s var(--ease-out);will-change:transform}
.jzc .gal__s{flex:none;width:calc((100% - (var(--per) - 1) * var(--gal-gap)) / var(--per));margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0a0a0c}
.jzc .gal__s img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.jzc .gal--tall .gal__s img{aspect-ratio:9/16}
.jzc .gal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(246,243,239,.22);background:rgba(6,6,7,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background .35s,border-color .35s}
.jzc .gal__nav:hover{background:rgba(214,0,237,.42);border-color:transparent}
.jzc .gal__nav::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink)}
.jzc .gal__nav--prev{left:-14px}
.jzc .gal__nav--prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.jzc .gal__nav--next{right:-14px}
.jzc .gal__nav--next::after{transform:translate(-70%,-50%) rotate(45deg)}

/* ---------- 4. FROM PRODUCT TO POSSIBILITY - real work ---------- */
.jzc .wcases{display:flex;flex-direction:column;gap:5.5rem}
.jzc .wcase__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.jzc .wcase__k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.jzc .wcase__hd h3{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.jzc .wcase__link{color:var(--ink);font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(214,0,237,.5);padding-bottom:2px;white-space:nowrap;transition:border-color .35s,color .35s}
.jzc .wcase__link:hover{color:#fff;border-bottom-color:#ff2438}
.jzc .wcase__d{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch;margin-bottom:1.8rem}
/* the media reads better narrower than the full container */
.jzc .wcase__media{max-width:1180px;margin-inline:auto}
.jzc .wcase .vid169{margin-bottom:1.1rem}

/* ---------- 5. PROOF - reels row ---------- */
.jzc .pull .wcase__link{display:inline-block;margin-top:1.2rem}
.jzc .reel--4.wrap{margin-top:2.8rem}

/* ---------- 6. SKETCH TO FILM ---------- */
.jzc .s2f__k{margin-top:3.4rem;margin-bottom:1.2rem;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* no column gap: the arrow column runs edge to edge so the line touches both frames */
.jzc .s2f{display:grid;grid-template-columns:1fr 132px 1fr;gap:0;align-items:center}
.jzc .s2f figure{margin:0}
/* height:auto is required — a definite width AND height attribute beats aspect-ratio */
.jzc .s2f__from img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:1px dashed rgba(246,243,239,.24);background:#0a0a0c}
.jzc .s2f figcaption{margin-top:.9rem;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(192,187,178,.72)}
.jzc .s2f__to figcaption{color:rgba(246,243,239,.92)}
/* The line and the head are ONE path on purpose: an objectBoundingBox
   gradient cannot paint a shape with a zero-height bounding box, so a bare
   horizontal line stroked with url(#jzcGrad) rendered nothing and only the
   arrowhead showed, which read as an arrow stuck against the right frame. */
.jzc .s2f__arrow svg{display:block;width:100%;height:26px;fill:none;stroke:url(#jzcGrad);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 7b. ICONIC - boards beside the finished film ---------- */
.jzc .icon__hd{margin-top:3.4rem;margin-bottom:2rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.jzc .icon__hd h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-top:.5rem}
.jzc .icon__hd p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch;margin-top:.8rem}
/* one 4-column grid shared by the carousel and the film, with the carousel's
   own gap matched to the grid gap - so a board slide is exactly one column
   wide, the film is exactly one column wide, and both stand the same height */
.jzc .icon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;align-items:start}
.jzc .icon__left{grid-column:span 3}
.jzc .icon__right{grid-column:span 1}
.jzc .icon__left,.jzc .icon__right{min-width:0}
.jzc .icon__lbl{margin-bottom:.9rem;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- 8b. TWO FILMS SIDE BY SIDE ---------- */
.jzc .duo169{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:2.6rem}

/* ---------- 12. ABOUT JZ CREATES ---------- */
.jzc .about{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.jzc .about__copy h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08;margin-top:1rem}
.jzc .about__copy p{color:var(--muted);font-size:1.08rem;line-height:1.62;max-width:56ch;margin-top:1.4rem}
.jzc .about__ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- 5. PROOF — pull quote under the stats ---------- */
.jzc .pull{margin-top:2.8rem;padding:2.2rem 2.6rem;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02);max-width:1000px}
.jzc .pull p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.4}
.jzc .pull footer{margin-top:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.jzc .pull footer strong{font-weight:600;font-size:1rem}
.jzc .pull footer span{color:var(--muted);font-size:.95rem}

/* ---------- 6. HOW IT WORKS ---------- */
.jzc .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.jzc .proc__step{position:relative;padding:2.4rem 2rem 2.2rem}
.jzc .proc__n{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1;margin-bottom:1.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .proc__step h3{font-size:1.28rem;margin-bottom:.8rem}
.jzc .proc__step p{color:var(--muted);font-size:.98rem;line-height:1.62}
.jzc .proc__note{margin-top:2.6rem;padding:2rem 2.4rem;border-radius:22px;border:1px solid rgba(232,196,124,.34);background:radial-gradient(ellipse 70% 100% at 10% 0%,rgba(232,196,124,.09),transparent 62%),rgba(255,255,255,.02);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.jzc .proc__note .press__ic svg{stroke:var(--gold)}
.jzc .proc__note h3{font-size:1.55rem;margin-bottom:.6rem}
.jzc .proc__note p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch}

/* ---------- 7. AI-AMPLIFIED — the two pipelines ---------- */
.jzc .pipe{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:stretch}
.jzc .pipe__col{padding:2.2rem 2.3rem;border-radius:22px;border:1px solid rgba(214,0,237,.32);background:radial-gradient(ellipse 80% 70% at 15% 0%,rgba(214,0,237,.10),transparent 62%),rgba(255,255,255,.02);display:flex;flex-direction:column}
.jzc .pipe__col--thin{border-color:var(--line);background:rgba(255,255,255,.015)}
.jzc .pipe__k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.8rem}
/* vertical flow: a wrapped horizontal row leaves arrows dangling at the end of
   a line, so the steps stack and every connector visibly touches both pills */
.jzc .pipe__flow{display:flex;flex-direction:column;align-items:stretch;gap:0}
.jzc .pipe__node{padding:.72rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:rgba(246,243,239,.04);font-size:.95rem;line-height:1.25;text-align:center}
.jzc .pipe__node--ai{border-color:rgba(214,0,237,.55);background:rgba(214,0,237,.14);color:var(--ink)}
.jzc .pipe__node--good{border-color:transparent;background:var(--grad);color:#fff;font-weight:600}
.jzc .pipe__node--bad{border-color:rgba(246,243,239,.14);background:rgba(246,243,239,.03);color:rgba(192,187,178,.75)}
/* the connector starts on one pill's edge and tucks under the next */
.jzc .pipe__arrow{display:block;width:1px;height:20px;margin:0 auto;background:rgba(246,243,239,.28);flex:none;position:relative}
.jzc .pipe__arrow::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border-top:5px solid rgba(246,243,239,.4);border-left:3.5px solid transparent;border-right:3.5px solid transparent}
.jzc .pipe__col:not(.pipe__col--thin) .pipe__arrow{background:rgba(214,0,237,.45)}
.jzc .pipe__col:not(.pipe__col--thin) .pipe__arrow::after{border-top-color:rgba(214,0,237,.7)}
.jzc .pipe__out{margin-top:auto;padding-top:1.8rem;font-family:var(--font-display);font-style:italic;font-size:1.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .pipe__out--bad{background:none;color:rgba(192,187,178,.68)}

.jzc .taste{margin-top:2.6rem;padding:2.4rem 2.6rem;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .taste h3{font-size:1.7rem;margin-bottom:.7rem}
.jzc .taste>p{color:var(--muted);font-size:1.04rem;line-height:1.6;max-width:76ch;margin-bottom:1.6rem}
.jzc .taste__foot{margin-top:1.6rem;font-family:var(--font-display);font-style:italic;font-size:1.28rem;color:rgba(246,243,239,.92)}

/* ---------- 8. WHY JZ CREATES (shared pattern, copied from the social page) ---------- */
.jzc .whyc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.jzc .whyc__card{padding:2.4rem 2.1rem}
.jzc .whyc__ic{display:block;width:38px;height:38px;margin-bottom:1.5rem}
.jzc .whyc__ic svg{width:100%;height:100%;fill:none;stroke:url(#jzcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .whyc__card h3{font-size:1.35rem;margin-bottom:.8rem}
.jzc .whyc__card p{color:var(--muted);font-size:.99rem;line-height:1.62}
.jzc .suit{margin-top:3rem;padding:2.2rem 2.4rem;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .suit h3{font-size:1.5rem;margin-bottom:.6rem}
.jzc .suit>p{color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:70ch;margin-bottom:1.6rem}
.jzc .suit__foot{margin-top:1.6rem;font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:rgba(246,243,239,.9)}

/* ---------- 9. ENGAGEMENTS — the pilot band ---------- */
.jzc .engc__note{max-width:1300px;margin:2.6rem auto 0;padding:2.4rem 2.6rem;border-radius:22px;border:1px solid rgba(214,0,237,.35);background:radial-gradient(ellipse 70% 100% at 12% 0%,rgba(214,0,237,.12),transparent 62%),rgba(255,255,255,.02);display:grid;grid-template-columns:1fr auto;gap:1.8rem;align-items:center}
.jzc .engc__note p.k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.jzc .engc__note h3{font-size:1.75rem;margin-top:.7rem}
.jzc .engc__note p.d{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:72ch;margin-top:.8rem}
.jzc .engc__note p.q{margin-top:1rem;font-family:var(--font-display);font-style:italic;font-size:1.28rem;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .jzc .lev{gap:2.2rem}
  .jzc .proc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  /* stacked hero leads with the film, so it only needs to clear the fixed nav */
  .jzc .hero{min-height:0;padding:92px 0 4vh}
  .jzc .cap,.jzc .whyc{grid-template-columns:repeat(2,1fr)}
  .jzc .about{grid-template-columns:1fr;gap:2.6rem}
  .jzc .icon{grid-template-columns:1fr;gap:2.4rem}
  .jzc .icon__left,.jzc .icon__right{grid-column:auto}
  .jzc .icon__right{max-width:340px}
  .jzc .press{grid-template-columns:1fr}
  .jzc .pipe{grid-template-columns:1fr}
  .jzc .engc__note,.jzc .press__note,.jzc .proc__note{grid-template-columns:1fr}
}
/* below this the fan pills are too small to aim at — swap the panel for the
   plain list, which carries the same twelve descriptions */
@media (max-width:900px){
  .jzc .lev{grid-template-columns:1fr}
  .jzc .lev__side{display:none}
  .jzc .lev__list{display:flex}
}
@media (max-width:760px){
  .jzc .cmpx{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* the arrow only reads horizontally - stack and drop it */
  .jzc .s2f{grid-template-columns:1fr;gap:1.8rem}
  .jzc .s2f__arrow{display:none}
  .jzc .duo169{grid-template-columns:1fr}
  .jzc .reel--4{grid-template-columns:repeat(2,1fr)}
  .jzc .gal{--per:1}
  .jzc .gal--tall{--per:2}
  .jzc .gal__nav--prev{left:6px}
  .jzc .gal__nav--next{right:6px}
}
@media (max-width:640px){
  .jzc .cap,.jzc .whyc,.jzc .proc{grid-template-columns:1fr}
  .jzc .reel--3{grid-template-columns:repeat(2,1fr)}
  .jzc .reel--3 .reel__f:nth-child(3){display:none}
  .jzc .lev__row{grid-template-columns:38px 1fr;gap:.9rem}
  .jzc .press__n{font-size:2.1rem}
}

/* SVG label text is sized in viewBox units, so it shrinks with the figure.
   Below ~900px the fan is the mobile list, but the hub still shows above that —
   scale the labels back up so nothing falls under 12px. */
@media (max-width:1100px){
  .jzc .lev__out text{font-size:20px}
  .jzc .lev__hub text.a{font-size:38px}
}

/* ---------- hero sits centred in the viewport ----------
   Matches the social production page, which was the only one of the four that
   centred its hero. The others pushed the content down with top padding alone,
   so it sat low on the screen. Desktop only: the phone layout keeps its own
   compact padding. */
@media (min-width: 1025px) {
  .jzc .hero{min-height:100svh;display:flex;align-items:center;padding:11vh 0 5vh}
  .jzc .hero__grid{width:100%}
}


/* =========================================================
   jzc-svc additions (2026-10-08)
   The service pages rebuilt off Elementor (motion, 3D, video editing,
   digital marketing x2, generative AI) plus About and the agency
   partner page share the AI Creative Content bundle above. These are
   the few pieces those pages need that the AI page never did.
   ========================================================= */

/* four-up card rows (eight services read better as 4 + 4 than 3 + 3 + 2) */
.jzc .cap--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.jzc .cap--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.jzc .cap--4{grid-template-columns:1fr}}
.jzc .cap__card .wcase__link{align-self:flex-start;margin-top:1.4rem}
.jzc .cap__card .chips{margin-top:1.3rem}
.jzc .cap__card .chip{font-size:.8rem;padding:.38rem .8rem}

/* tool / platform cards: logo, name, one line */
.jzc .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.jzc .tool{padding:1.9rem 1.7rem 2rem}
.jzc .tool__logo{width:56px;height:56px;border-radius:14px;background:#f6f3ef;display:grid;place-items:center;overflow:hidden}
.jzc .tool__logo img{width:78%;height:78%;object-fit:contain;display:block}
.jzc .tool h3{font-size:1.18rem;margin:1.3rem 0 .55rem}
.jzc .tool p{color:var(--muted);font-size:.96rem;line-height:1.58}
.jzc .tools__more{text-align:center;margin-top:2.4rem;color:var(--muted);font-family:var(--font-display);font-style:italic;font-size:clamp(1.2rem,1.6vw,1.5rem)}
@media (max-width:1100px){.jzc .tools{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.jzc .tools{grid-template-columns:1fr}}

/* a 16:9 film beside a 9:16 film at one height (256:81 columns) */
.jzc .pairs{display:grid;gap:1.3rem;max-width:1180px;margin-inline:auto}
.jzc .pair{display:grid;grid-template-columns:minmax(0,256fr) minmax(0,81fr);gap:1.3rem;align-items:stretch}
.jzc .pair .reel__f{aspect-ratio:auto;height:100%}
@media (max-width:760px){
  .jzc .pair{grid-template-columns:1fr}
  .jzc .pair .reel__f{aspect-ratio:9/16;height:auto;width:100%;max-width:340px;margin:0 auto}
}

/* plain list with gradient dots */
.jzc .ticks{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.95rem;max-width:60ch}
.jzc .ticks li{position:relative;padding-left:1.9rem;color:var(--muted);font-size:1.04rem;line-height:1.58}
.jzc .ticks li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:50%;background:var(--grad)}
.jzc .ticks li b{color:var(--ink);font-weight:600}

/* split section media can be a still as well as a film */
.jzc .about__media>img{width:100%;height:auto;display:block;border-radius:20px}
.jzc .about--flip .about__media{order:-1}
@media (max-width:900px){.jzc .about--flip .about__media{order:0}}
.jzc .about__copy .head__p{color:var(--muted);font-size:1.08rem;line-height:1.62;max-width:56ch;margin-top:1.4rem}

/* About: founder card, awards, studios, profile links */
.jzc .founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3.4rem;align-items:center}
.jzc .founder__img{border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:#0a0a0c}
.jzc .founder__img img{width:100%;height:100%;object-fit:cover;display:block}
.jzc .founder__copy h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08}
.jzc .founder__role{margin-top:.8rem;color:var(--gold);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}
.jzc .founder__copy p{color:var(--muted);font-size:1.08rem;line-height:1.65;max-width:60ch;margin-top:1.3rem}
.jzc .founder__links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem}
@media (max-width:900px){.jzc .founder{grid-template-columns:1fr;gap:2.4rem}.jzc .founder__img{max-width:420px}}
.jzc .awards{max-width:1180px;margin:0 auto;border-top:1px solid var(--line)}
.jzc .award{display:grid;grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1fr);gap:1.4rem;padding:1.25rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.jzc .award__y{font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:rgba(255,36,56,.75)}
.jzc .award__w{font-family:var(--font-display);font-size:1.2rem;line-height:1.35}
.jzc .award__p{color:var(--muted);font-size:.98rem}
@media (max-width:700px){.jzc .award{grid-template-columns:4rem minmax(0,1fr)}.jzc .award__p{grid-column:2}}
.jzc .studios{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:1000px;margin:0 auto}
.jzc .studios .chip{font-size:1rem;padding:.65rem 1.25rem}
.jzc .fnote{max-width:72ch;margin:1.8rem auto 0;text-align:center;color:rgba(192,187,178,.75);font-size:.95rem;line-height:1.6}

/* agency page: who-does-what table */
.jzc .split2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.jzc .split2 .gcard{padding:2.3rem 2.2rem}
.jzc .split2 h3{font-size:1.4rem;margin-bottom:1rem}
@media (max-width:800px){.jzc .split2{grid-template-columns:1fr}}
.jzc .split__extra{margin-top:1.6rem}
.jzc .about__copy h2 .ix{display:block;font-size:.42em;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body);font-style:normal;font-weight:600;color:var(--muted);margin-bottom:1rem}
.jzc .reel--2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}

/* work tiles (Generative AI page): thumb + name + category, linking to the piece */
.jzc .wtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.jzc .wtile{display:block;text-decoration:none;color:var(--ink);padding:0}
.jzc .wtile img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform 1s var(--ease-out)}
.jzc .wtile:hover img{transform:scale(1.04)}
.jzc .wtile__meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 1.4rem 1.3rem}
.jzc .wtile__meta strong{font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.jzc .wtile__meta span{color:var(--muted);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-align:right}
@media (max-width:1000px){.jzc .wtiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.jzc .wtiles{grid-template-columns:1fr}}

/* =========================================================
   Legacy-layout pass (2026-10-08, Jay): the six service pages keep the
   section order of their old Elementor layouts, restyled. These are the
   pieces that layout needs.
   ========================================================= */

/* full-height video hero, the /work/ + /insight/ hero (.phero) in .jzc terms:
   black ground, muted looping YouTube cropped to cover, 45% veil, a short fade
   into the page, headline letters animate in */
.jzc .vhero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:10rem 0 6rem;background:#000;z-index:1}
.jzc .vhero__video{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;transition:opacity 1.6s var(--ease-out)}
.jzc .vhero__video.is-ready{opacity:1}
.jzc .vhero__video iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.jzc .vhero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 0%,transparent 72%,var(--bg) 100%),rgba(6,6,7,.45)}
.jzc .vhero__inner{position:relative;z-index:2;max-width:1500px}
.jzc .vhero__title{font-size:clamp(2.8rem,6.4vw,6rem);line-height:1.04;font-weight:500}
.jzc .vhero__rule{display:block;width:84px;height:2px;margin:2rem auto 0;background:var(--grad);border-radius:2px}
.jzc .vhero__sub{margin:1.6rem auto 0;max-width:62ch;color:var(--ink);opacity:.86;font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.55}
html.jzc-js .jzc .vhero__sub.reveal.in{opacity:.86}
@media (max-width:767px){.jzc .vhero{min-height:92vh;min-height:92svh;padding:8.5rem 0 4.5rem}.jzc .vhero__title{font-size:clamp(2.5rem,10vw,3.4rem)}}

/* desktop shows the 16:9 films, phones the 9:16 cut of the same idea
   (the old pages hid one or the other per device) */
.jzc .only-m{display:none}
@media (max-width:760px){.jzc .only-d{display:none}.jzc .only-m{display:grid}}
.jzc .duo169.only-d{margin-top:0}
.jzc .reel--2{grid-template-columns:repeat(2,1fr)}
.jzc .cta-mid{margin-top:2.6rem}

/* "Let's start creating!" - the form beside two vertical films */
.jzc .sform{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3.4rem;align-items:center}
.jzc .sform h2{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.06}
.jzc .sform .contact{margin:2.2rem 0 0;max-width:none}
.jzc .sform__reel{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:900px){.jzc .sform{grid-template-columns:1fr}.jzc .sform__reel{max-width:520px;margin:0 auto;width:100%}}

/* phone still | film | laptop still, in one row (Digital Marketing Agency) */
.jzc .mrow{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.7fr) minmax(0,1fr);gap:2rem;align-items:center;margin:3.4rem auto}
.jzc .mrow img{width:100%;height:auto;display:block}
@media (max-width:760px){.jzc .mrow{grid-template-columns:1fr 1fr}.jzc .mrow .vid169{grid-column:1/-1;order:-1}}

/* tool cards that show two logos (Presentations, Email) */
.jzc .tool__logos{display:flex;gap:.6rem}

/* social platforms strip */
.jzc .socials{display:flex;justify-content:center;gap:1.1rem;flex-wrap:wrap}
.jzc .socials>*{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:#f6f3ef;transition:border-color .35s,box-shadow .35s,transform .35s var(--ease-out)}
.jzc .socials>*:hover{border-color:rgba(214,0,237,.55);box-shadow:0 0 30px rgba(214,0,237,.35);transform:translateY(-3px)}
.jzc .socials img{width:26px;height:26px;object-fit:contain;display:block}
.jzc section.blk--tight{padding:3vh 0}

/* closing band, the old site-wide "Let's Talk Creative / Let's Start Creating" pair */
.jzc .talk{padding:4vh 0 12vh}
.jzc .talk__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.jzc .talk__card{padding:3rem 2.8rem;text-align:center}
.jzc .talk__card h3{font-size:clamp(1.8rem,2.8vw,2.5rem);line-height:1.1}
.jzc .talk__card p{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:46ch;margin:1rem auto 1.8rem}
@media (max-width:800px){.jzc .talk__grid{grid-template-columns:1fr}.jzc .talk__card{padding:2.4rem 1.6rem}}

/* Generative AI: split hero with an autoplaying vertical film */
.jzc .hsplit{position:relative;padding:20vh 0 8vh}
.jzc .hsplit__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:5rem;align-items:center}
.jzc .hsplit__media{max-width:400px;width:100%;margin-left:auto}
.jzc .ytbg{position:relative;aspect-ratio:9/16;border-radius:34px;padding:10px;border:1px solid rgba(246,243,239,.16);background:linear-gradient(150deg,#17171c,#0a0a0c);box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 60px rgba(214,0,237,.18)}
.jzc .ytbg__in{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#0a0a0c}
.jzc .ytbg__in>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jzc .ytbg__v{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease-out)}
.jzc .ytbg__v.is-ready{opacity:1}
.jzc .ytbg__v iframe{position:absolute;top:50%;left:50%;width:104%;height:104%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.jzc .about__media .ytbg{max-width:380px;margin:0 auto}
@media (max-width:900px){.jzc .hsplit{padding:16vh 0 6vh}.jzc .hsplit__grid{grid-template-columns:1fr;gap:3rem}.jzc .hsplit__media{margin:0 auto;max-width:320px}}

/* film captions under the two brand films */
.jzc .film__cap{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;padding:0 .3rem}
.jzc .film__cap strong{font-family:var(--font-display);font-size:1.2rem;font-weight:500}
.jzc .film__cap span{color:var(--muted);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}

/* seven work tiles as 4 + 3 */
.jzc .wtiles--7{grid-template-columns:repeat(12,1fr)}
.jzc .wtiles--7>*{grid-column:span 3}
.jzc .wtiles--7>:nth-child(n+5){grid-column:span 4}
@media (max-width:1000px){.jzc .wtiles--7{grid-template-columns:repeat(2,1fr)}.jzc .wtiles--7>*,.jzc .wtiles--7>:nth-child(n+5){grid-column:auto}}
@media (max-width:600px){.jzc .wtiles--7{grid-template-columns:1fr}}

/* the darker "production stack" band */
.jzc .band{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* closing split: copy beside the form (Generative AI) */
.jzc .fsplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem;align-items:center}
.jzc .fsplit h2{font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:1.06}
.jzc .fsplit p{color:var(--muted);font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.6;margin:1.3rem 0 2rem;max-width:46ch}
.jzc .fsplit .contact{margin:0;max-width:none}
@media (max-width:900px){.jzc .fsplit{grid-template-columns:1fr;gap:2.6rem}}

/* round 3 (Jay 2026-10-08): no divider under the hero headline, tool cards
   without logos (the name links out instead), keyword line as the h1 */
.jzc .vhero__rule{display:none}
.jzc h1.vhero__sub{font-family:var(--font-body);font-weight:400;letter-spacing:0;line-height:1.55}
.jzc .tool h3{margin-top:0}
.jzc .tool h3 a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .4s var(--ease-out)}
.jzc .tool h3 a:hover{background-size:100% 1px}
.jzc .tool h3 a::after{content:" \2197";font-size:.7em;color:var(--muted)}
.jzc .about__copy p a,.jzc .head p a,.jzc .cap__card p a{color:var(--ink);border-bottom:1px solid rgba(214,0,237,.55);transition:color .3s}
.jzc .about__copy p a:hover,.jzc .head p a:hover,.jzc .cap__card p a:hover{color:var(--gold)}

/* the hero's big line keeps the display face when it is a <p> (DMS, where the
   keyword line carries the h1) */
.jzc .vhero__title{font-family:var(--font-display);font-weight:500;letter-spacing:.005em}
.jzc .vhero__ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
@media (max-width:640px){.jzc .vhero__ctas .btn{width:100%}}

/* round 5 (Jay 2026-10-08, About + partner) */
/* hero reads like /work/: one-line headline, one-line description */
.jzc .vhero__title{font-size:clamp(2.6rem,6vw,5.6rem)}
@media (min-width:901px){.jzc .vhero__title{white-space:nowrap}.jzc .vhero__sub{max-width:none}}

/* numbered cards, three across (number above the heading) */
.jzc .proc--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.jzc .proc--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.jzc .proc--3{grid-template-columns:1fr}}

/* LA gallery: square frames, three at a time */
.jzc .gal--sq{--per:3}
.jzc .gal--sq .gal__s img{aspect-ratio:1/1}
@media (max-width:760px){.jzc .gal--sq{--per:1}}

/* transparent phone mockups beside copy */
.jzc .about__media>img.phonepng{max-width:440px;margin:0 auto;border-radius:0;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}

/* closing band, the /work/ + /insight/ .pcta */
.jzc .pcta2{text-align:center;padding:9rem var(--pad) 8rem;border-top:1px solid var(--line);background:radial-gradient(ellipse 60% 70% at 70% 80%,rgba(255,36,56,.12),transparent 70%)}
.jzc .pcta2 h2{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.06}
.jzc .pcta2 p{margin:1.4rem auto 2.6rem;max-width:54ch;color:var(--muted);font-size:1.15rem;line-height:1.6}
.jzc .pcta2__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.jzc .fnote--link{margin-top:2.4rem}
/* three reviews fill the row (About) */
@media (min-width:1101px){.jzc .rev__grid--3{grid-template-columns:repeat(3,1fr)}}
/* founder portrait, square (Jay 2026-10-08) */
.jzc .founder__img{aspect-ratio:1/1}

/* =========================================================
   Case study pieces (2026-10-09, /case-study/ Shaq)
   ========================================================= */
.jzc .vhero__still{background-size:cover;background-position:center;opacity:1;transform:scale(1.04);animation:jzcStill 18s ease-out forwards}
@keyframes jzcStill{to{transform:scale(1)}}
.jzc .vhero__eb{margin-bottom:1.4rem;color:var(--ink);opacity:.8}
.jzc .facts{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02);overflow:hidden}
.jzc .fact{padding:1.6rem 1.4rem;border-right:1px solid var(--line)}
.jzc .fact:last-child{border-right:0}
.jzc .fact__k{display:block;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.jzc .fact__v{display:block;font-family:var(--font-display);font-size:clamp(1.1rem,1.4vw,1.35rem);line-height:1.25}
@media (max-width:1100px){.jzc .facts{grid-template-columns:repeat(3,1fr)}.jzc .fact:nth-child(3){border-right:0}.jzc .fact:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:600px){.jzc .facts{grid-template-columns:repeat(2,1fr)}.jzc .fact{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)}.jzc .fact:nth-child(2n){border-right:0!important}}
.jzc .proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:start}
.jzc .proof{margin:0;padding:.9rem;border-radius:18px}
.jzc .proof img{display:block;width:100%;height:auto;border-radius:12px}
@media (max-width:900px){.jzc .proofs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.jzc .proofs{grid-template-columns:1fr}}
/* the picture stays put while the page scrolls past it (Jay 2026-10-09): a fixed image
   seen through the strip's clip-path window; works on iOS, unlike background-attachment */
.jzc .wall{position:relative;height:100vh;height:100svh;min-height:420px;overflow:hidden;clip-path:inset(0);margin:4vh 0}
.jzc .wall__img{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;object-fit:cover;display:block}

.jzc .gimgs{display:grid;gap:1.3rem}
.jzc .gimgs--2{grid-template-columns:1fr 1fr}
.jzc .gimgs--3{grid-template-columns:repeat(3,1fr)}
.jzc .gimg{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0a0a0c}
.jzc .gimg img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.jzc .gimgs--2 .gimg img{aspect-ratio:16/10}
@media (max-width:760px){.jzc .gimgs--3{grid-template-columns:1fr 1fr}.jzc .gimgs--3 .gimg:nth-child(3){grid-column:1/-1}.jzc .gimgs--3 .gimg:nth-child(3) img{aspect-ratio:16/10}.jzc .gimgs--2{grid-template-columns:1fr}}
.jzc .solo{max-width:400px;margin:0 auto;padding:0 1.25rem;box-sizing:content-box}
.jzc .solo .reel__f{width:100%;display:block}
.jzc .prose p{max-width:74ch}
.jzc .prose p{color:var(--muted);font-size:clamp(1.08rem,1.25vw,1.22rem);line-height:1.7;margin-top:1.2rem}
.jzc .prose p:first-child{margin-top:0}
.jzc .stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.jzc .stat4{padding:2.2rem 1.8rem;text-align:center}
.jzc .stat4__n{display:block;font-family:var(--font-display);font-style:normal;font-weight:700;font-variant-numeric:lining-nums tabular-nums;font-size:clamp(2.6rem,4.4vw,4rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0 .08em .1em}
.jzc .stat4__l{display:block;margin-top:.9rem;color:var(--muted);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.jzc .stats4{grid-template-columns:1fr 1fr}}

/* case study round 2 (Jay 2026-10-09) */
.jzc .vhero__mp4 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jzc .vsplit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5rem;align-items:center}
.jzc .vsplit h2{font-size:clamp(2.4rem,4.8vw,4.4rem);line-height:1.06}
.jzc .vsplit__copy>p.reveal{color:var(--muted);font-size:clamp(1.1rem,1.3vw,1.3rem);line-height:1.6;margin-top:1.4rem;max-width:52ch}
.jzc .vsplit__media .reel__f{height:min(86vh,920px);width:auto;aspect-ratio:9/16;display:block}
@media (max-width:900px){.jzc .vsplit{grid-template-columns:1fr;gap:2.6rem}.jzc .vsplit__media{max-width:420px;width:100%;margin:0 auto}.jzc .vsplit__media .reel__f{height:auto;width:100%}}
.jzc .gal--proof{--per:3}
.jzc .gal--proof .gal__track{align-items:center}
.jzc .gal--proof .gal__s{border:0;background:transparent;border-radius:16px}
.jzc .gal--proof .gal__s img{aspect-ratio:auto;height:auto;object-fit:contain;border-radius:16px}
@media (max-width:1000px){.jzc .gal--proof{--per:2}}
@media (max-width:640px){.jzc .gal--proof{--per:1}}
/* facts strip on phones: breathing room around and inside (Jay 2026-10-09) */
@media (max-width:600px){
  .jzc section#facts{padding:7vh 0 4vh}
  .jzc .fact{padding:1.6rem 1.3rem 1.7rem}
  .jzc .fact__v{font-size:1.15rem}
}
/* facts strip on desktop: roomier cells; the box sits inside .wrap, so it lines up with the nav bar */
@media (min-width:601px){
  .jzc section#facts{padding:6vh 0}
  .jzc .fact{padding:2.3rem 2rem 2.4rem}
}
/* WP Rocket adds width/height attributes to images on live pages; a height
   attribute beats aspect-ratio, so ratio-shaped images say height:auto */
.jzc .gimg img,.jzc .proof img,.jzc .about__media>img,.jzc .mrow img{height:auto}

/* Shaqzilla static case study (2026-10-09) */
.jzc .vstack{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3.4rem;align-items:start}
.jzc .vstack__film .reel__f{height:min(84vh,860px);width:auto;aspect-ratio:9/16;display:block}
.jzc .vstack__k{font-size:.85rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.jzc .vstack__list{display:grid;gap:.8rem}
.jzc .vstack__list figure{margin:0;padding:.7rem;border-radius:16px}
.jzc .vstack__list img{display:block;width:100%;height:auto;border-radius:10px}
@media (max-width:900px){.jzc .vstack{grid-template-columns:1fr}.jzc .vstack__film{max-width:420px;width:100%;margin:0 auto}.jzc .vstack__film .reel__f{height:auto;width:100%}}
.jzc .cmp2{max-width:1100px;margin:0 auto;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.02)}
.jzc .cmp2 table{width:100%;border-collapse:collapse}
.jzc .cmp2 th,.jzc .cmp2 td{padding:1.25rem 1.6rem;text-align:left;border-bottom:1px solid var(--line);font-size:1.02rem;line-height:1.5}
.jzc .cmp2 th{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jzc .cmp2 tr:last-child td{border-bottom:0}
.jzc .cmp2 td:first-child{font-family:var(--font-display);font-size:1.15rem}
.jzc .cmp2 td:nth-child(2){color:var(--muted)}
.jzc .cmp2 td:nth-child(3){color:var(--ink)}
.jzc .cmp2 th:nth-child(3){background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (max-width:700px){.jzc .cmp2 th,.jzc .cmp2 td{padding:1rem .9rem;font-size:.92rem}.jzc .cmp2 td:first-child{font-size:1rem}}
.jzc .quote{font-family:var(--font-display);font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--ink);margin-top:1.4rem}
/* mini stat grid inside a split's copy column (case study "The Video") */
.jzc .minis{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:1.6rem;max-width:520px}
.jzc .minis>div{border:1px solid var(--line);border-radius:14px;padding:.9rem .8rem;text-align:center;background:rgba(255,255,255,.02)}
.jzc .minis b{display:block;font-family:var(--font-display);font-style:normal;font-weight:700;font-variant-numeric:lining-nums tabular-nums;font-size:1.6rem;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0 .06em .08em}
.jzc .minis span{display:block;margin-top:.3rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:420px){.jzc .minis{grid-template-columns:repeat(2,1fr)}}