/* ================================================================
   JZ CREATES — WEB DESIGN & DEVELOPMENT 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%}
}
/* ==================================================================
   WEB DESIGN & DEVELOPMENT — this page's own sections.
   Everything else (tokens, buttons, gcard, hero, stats, chips, 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}
/* eight capabilities read as two clean rows of four, not three-three-two */
.jzc .cap--four{grid-template-columns:repeat(4,1fr)}
.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.3rem;margin:1.5rem 0 .75rem}
.jzc .cap__card p{color:var(--muted);font-size:.97rem;line-height:1.6}
.jzc .cap__for{margin-top:auto;padding-top:1.3rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(192,187,178,.72)}

/* ---------- 2. THE OLD WAY / THE NEW WAY — two vertical 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)}

/* shared band used under the pipelines and again under the taste section */
.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.65rem;margin-bottom:.7rem}
.jzc .taste>p{color:var(--muted);font-size:1.03rem;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.26rem;color:rgba(246,243,239,.92)}

/* ---------- 3. THE EXECUTION GAP ---------- */
.jzc .gapx{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:stretch}
.jzc .gapx__card{padding:2.4rem 2.4rem 2.2rem;border-radius:22px;border:1px solid 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);display:flex;flex-direction:column}
.jzc .gapx__card--thin{border-color:var(--line);background:rgba(255,255,255,.015)}
.jzc .gapx__k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* both cards render the same twelve-month canvas — only the fill differs, so the
   two counts line up and the gap is the only thing the eye has to read */
.jzc .gapx__matrix{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin:1.9rem 0 .8rem;align-content:start}
.jzc .gapx__matrix 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 .gapx__matrix i.on{border-color:rgba(246,243,239,.16);background:rgba(246,243,239,.14)}
.jzc .gapx__matrix--full i.on{border-color:rgba(214,0,237,.3);background:var(--grad);opacity:.9}
.jzc .gapx__axis{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(192,187,178,.5)}
.jzc .gapx__count{margin-top:1.6rem;font-family:var(--font-display);font-size:1.3rem;font-weight:500}
.jzc .gapx__count 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 .gapx__card--thin .gapx__count b{background:none;color:rgba(246,243,239,.62)}
.jzc .gapx__note{margin-top:auto;padding-top:1.1rem;color:var(--muted);font-size:.97rem;line-height:1.6}

/* the three consequences */
.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.38rem;margin-bottom:.8rem;padding-right:3rem}
.jzc .press__card p{color:var(--muted);font-size:.99rem;line-height:1.62}
.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}

/* ---------- 4. WEBSITE -> PLATFORM -> INTELLIGENT SYSTEM ---------- */
.jzc .evo{display:grid;grid-template-columns:1fr;gap:1.6rem}
/* the three stages sit on one track; each dot is tucked onto the line above it
   so the connector visibly arrives at the stage rather than floating near it */
.jzc .evo__fig{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;padding-top:38px}
.jzc .evo__track{position:absolute;top:6px;left:16.7%;right:16.7%;height:1px;background:rgba(246,243,239,.18)}
.jzc .evo__stage{position:relative;display:block;width:100%;text-align:left;padding:1.9rem 1.9rem 1.7rem;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:inherit;font:inherit;cursor:pointer;transition:border-color .5s var(--ease-out),background .5s var(--ease-out),transform .5s var(--ease-out)}
.jzc .evo__dot{position:absolute;top:-32px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;border:1px solid rgba(246,243,239,.32);background:#0c0c0e;transition:background .5s var(--ease-out),border-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.jzc .evo__stage b{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.6rem;line-height:1;color:rgba(246,243,239,.4)}
.jzc .evo__stage strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.42rem;margin:.7rem 0 .35rem}
.jzc .evo__stage>span{display:block;color:var(--muted);font-size:.95rem;line-height:1.5}
.jzc .evo__stage.is-on{border-color:rgba(214,0,237,.45);background:radial-gradient(ellipse 80% 100% at 20% 0%,rgba(214,0,237,.12),transparent 64%),rgba(255,255,255,.03)}
.jzc .evo__stage.is-on .evo__dot{background:var(--grad);border-color:transparent;box-shadow:0 0 0 6px rgba(214,0,237,.14)}
.jzc .evo__stage.is-on b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.jzc .evo__detail{padding:2.3rem 2.5rem;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .evo__detail-n{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.15rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .evo__detail-t{font-size:1.75rem;margin:.35rem 0 .7rem}
.jzc .evo__detail-p{color:var(--muted);font-size:1.03rem;line-height:1.62;max-width:80ch}
.jzc .evo__detail-l{list-style:none;margin-top:1.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem 1.6rem}
.jzc .evo__detail-l li{position:relative;padding-left:1.35rem;color:rgba(246,243,239,.86);font-size:.97rem;line-height:1.5}
.jzc .evo__detail-l li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--grad)}

/* the same three descriptions, as the layout below 900px */
.jzc .evo__list{display:none;flex-direction:column;gap:1.1rem}
.jzc .evo__row{padding:1.9rem 1.8rem;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .evo__row b{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .evo__row strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.35rem;margin:.3rem 0 .5rem}
.jzc .evo__row>span{display:block;color:var(--muted);font-size:.98rem;line-height:1.6}
.jzc .evo__row i{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;font-style:normal}
.jzc .evo__row i em{font-style:normal;padding:.4rem .85rem;border-radius:999px;border:1px solid rgba(246,243,239,.14);background:rgba(255,255,255,.025);font-size:.87rem;line-height:1.2;color:rgba(246,243,239,.85)}

.jzc .evo__foot{margin-top:2.4rem;text-align:center;color:rgba(192,187,178,.72);font-size:.98rem}
.jzc .evo__foot em{font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:rgba(246,243,239,.9)}

/* ---------- 5. SELECTED WORK — portfolio slots ---------- */
.jzc .show{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.jzc .show__slot{margin:0}
.jzc .show__ph{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;border:1px dashed rgba(246,243,239,.16);background:linear-gradient(150deg,#17171c,#0a0a0c);display:grid;place-items:center}
/* websites are wide — the slots should be the shape of the thing that goes in */
.jzc .show--wide .show__ph{aspect-ratio:16/10}
.jzc .show__ph::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 50% 45%,rgba(214,0,237,.13),transparent 70%)}
.jzc .show__ph span{position:relative;z-index:1;font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:rgba(246,243,239,.26)}
.jzc .show__slot figcaption{margin-top:1.1rem}
.jzc .show__slot figcaption strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.22rem;margin-bottom:.35rem}
.jzc .show__slot figcaption span{color:var(--muted);font-size:.96rem;line-height:1.55}
.jzc .show__foot{margin-top:2.4rem;margin-bottom:3.2rem;text-align:center;color:rgba(192,187,178,.72);font-size:.95rem}
.jzc .show__foot em{font-family:var(--font-display);font-style:italic;font-size:1.08rem;color:rgba(246,243,239,.9)}

/* ---------- 6. WHAT THE TOOL DOES / WHAT STAYS HUMAN ---------- */
.jzc .split2{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:stretch}
.jzc .split2__card{padding:2.3rem 2.4rem 2.1rem;display:flex;flex-direction:column}
.jzc .split2__card--on{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 .split2__k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.6rem}
.jzc .split2__l{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.jzc .split2__l li{position:relative;padding-left:1.5rem;color:rgba(246,243,239,.86);font-size:1rem;line-height:1.55}
.jzc .split2__l li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:rgba(246,243,239,.3)}
.jzc .split2__card--on .split2__l li::before{background:var(--grad)}
.jzc .split2__out{margin-top:auto;padding-top:1.8rem;font-family:var(--font-display);font-style:italic;font-size:1.28rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .split2__out--bad{background:none;color:rgba(192,187,178,.68)}

/* ---------- 7. OUR PROCESS ---------- */
.jzc .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
/* six steps read as two rows of three */
.jzc .proc--six{grid-template-columns:repeat(3,1fr)}
.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}

/* ---------- 8. WHY JZ CREATES ---------- */
.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.32rem;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, reused under the gap ---------- */
.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.72rem;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.26rem;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1440px){
  .jzc .cap--four{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1280px){
  .jzc .evo__detail-l{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 .cap--four,.jzc .whyc,.jzc .show{grid-template-columns:repeat(2,1fr)}
  .jzc .press{grid-template-columns:1fr}
  .jzc .pipe,.jzc .split2{grid-template-columns:1fr}
  .jzc .proc--six{grid-template-columns:repeat(2,1fr)}
  .jzc .engc__note,.jzc .proc__note{grid-template-columns:1fr}
}
/* below this the three stage cards are too narrow to read side by side — swap
   the figure and the panel for the plain list, which carries the same content */
@media (max-width:900px){
  .jzc .evo__fig,.jzc .evo__detail{display:none}
  .jzc .evo__list{display:flex}
}
@media (max-width:760px){
  .jzc .gapx{grid-template-columns:1fr}
}
@media (max-width:640px){
  .jzc .cap,.jzc .cap--four,.jzc .whyc,.jzc .show,.jzc .proc,.jzc .proc--six{grid-template-columns:1fr}
  .jzc .press__n{font-size:2.1rem}
  .jzc .gapx__card{padding:1.9rem 1.6rem 1.7rem}
  .jzc .gapx__matrix{gap:4px}
  .jzc .taste,.jzc .suit,.jzc .engc__note,.jzc .proc__note{padding-left:1.6rem;padding-right:1.6rem}
}

/* a filled portfolio slot. The mockups are cut out on transparency, so they sit
   inside the frame rather than filling it edge to edge. */
.jzc .show__img{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(150deg,#17171c,#0a0a0c)}
.jzc .show__img::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 50% 45%,rgba(214,0,237,.13),transparent 70%)}
.jzc .show__img img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:6%;display:block;transition:transform .6s var(--ease-out)}
.jzc a.show__img:hover img{transform:scale(1.03)}

/* ---------- 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%}
}