/* solantex.net/jobber/ 4.2.0 (2026-11-13). 4.0.0 structure on the ad treatment: hero collage with slow zoom, floating typing phone,
   gold icon row, photo band, add-ons over sunlit water. Palette: lagoon #0A6E7A, sun #F5B301, shell #F2F7F9, deep navy veils. */
.jx { --lagoon:#0A6E7A; --pool:#19B5C4; --sun:#F5B301; --shell:#F2F7F9; --deep:10,46,64; }
.jx > section { padding:88px 0; position:relative; }
.jx h2 { font-size:clamp(30px,3.6vw,46px); font-weight:800; letter-spacing:-1px; line-height:1.08; color:var(--ink); margin-bottom:12px; }
.jx h3 { color:var(--ink); font-weight:700; }
.jx-sub { color:var(--dim); font-size:18px; }
.jx-btn { display:inline-block; background:var(--sun); color:var(--navy); font-weight:800; font-size:16px; padding:16px 30px; border-radius:999px; text-decoration:none; box-shadow:0 10px 26px rgba(245,179,1,.35); }
.jx-link { color:#fff; font-weight:600; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.6); padding-bottom:2px; }
.jx-actions { display:flex; flex-wrap:wrap; gap:26px; align-items:center; }

/* Hero: crossfading full-bleed trade photos with a slow zoom */
.jx > section.jx-hero { padding:110px 0 150px; color:#fff; overflow:hidden; background:#0A2E40; }
.jx-collage { position:absolute; inset:0; background:var(--img) center/cover no-repeat; animation:jx-drift 40s ease-in-out infinite alternate; transform-origin:30% 50%; }
@keyframes jx-drift { from { transform:scale(1); } to { transform:scale(1.05); } }
.jx-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(var(--deep),.80) 0%, rgba(var(--deep),.50) 32%, rgba(var(--deep),0) 55%); }
.jx-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; }
.jx-eyebrow { display:inline-block; font-size:13px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--navy); background:var(--sun); border-radius:999px; padding:6px 14px; margin-bottom:20px; }
.jx-hero h1 { color:#fff; font-size:clamp(42px,5.8vw,78px); font-weight:800; line-height:1.0; letter-spacing:-2px; max-width:640px; margin-bottom:22px; text-shadow:0 2px 24px rgba(var(--deep),.4); }
.jx-lede { color:#EAF4F7; font-size:19px; line-height:1.55; max-width:520px; margin-bottom:32px; }
.jx-trades { list-style:none; padding:0; margin:34px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.jx-trades li { font-size:13px; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); backdrop-filter:blur(6px); border-radius:999px; padding:6px 13px; }
.jx-phone { justify-self:end; width:300px; margin:0; background:#FCFDFE; border-radius:34px; padding:12px; box-shadow:0 30px 70px rgba(var(--deep),.5), 0 0 0 8px rgba(255,255,255,.18); transform:rotate(2deg) translateY(30px); animation:jx-float 7s ease-in-out infinite; }
@keyframes jx-float { 50% { transform:rotate(2deg) translateY(18px); } }
.jx-phone-bar { display:flex; align-items:center; gap:9px; padding:10px 12px 12px; border-bottom:1px solid var(--line); }
.jx-phone-bar img { width:30px; height:30px; }
.jx-phone-bar span { font-weight:800; color:var(--navy); font-size:16px; flex:1; }
.jx-phone-bar em { font-style:normal; font-size:11.5px; font-weight:700; color:var(--navy); background:var(--sun); border-radius:7px; padding:4px 8px; }
.jx-chat { display:flex; flex-direction:column; gap:9px; padding:14px 6px 10px; min-height:330px; }
.jx-msg { margin:0; font-size:13.5px; line-height:1.45; padding:9px 12px; border-radius:16px; max-width:88%; color:var(--ink); animation:jx-in .45s ease-out both; }
.jx-msg.me { align-self:flex-end; background:var(--lagoon); color:#fff; border-bottom-right-radius:5px; }
.jx-msg.sunny { align-self:flex-start; background:var(--shell); border-bottom-left-radius:5px; }
.jx-msg b { display:inline-block; min-width:40px; color:var(--lagoon); }
.jx-msg:nth-child(2) { animation-delay:1.2s; } .jx-msg:nth-child(3) { animation-delay:2.4s; } .jx-msg:nth-child(4) { animation-delay:3.4s; }
@keyframes jx-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.jx-wave { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:90px; z-index:3; }
.jx-wave path { fill:var(--shell); }

/* Six things, plain row on shell, icons in sun discs */
.jx > section.jx-does { background:var(--shell); padding-top:64px; }
.jx-six { list-style:none; padding:0; margin:40px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px 46px; }
.jx-six svg { width:52px; height:52px; padding:12px; border-radius:50%; background:linear-gradient(135deg,#FFD24D,var(--sun)); box-shadow:0 8px 20px rgba(245,179,1,.35); fill:none; stroke:var(--navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; }
.jx-six h3 { font-size:19px; margin-bottom:6px; }
.jx-six p { font-size:15.5px; line-height:1.55; margin:0; }

/* Photo band: steps over a full-bleed work photo */
.jx > section.jx-band { padding:110px 0; background:var(--img) center/cover; color:#fff; }
.jx-band::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(var(--deep),.86), rgba(var(--deep),.45)); }
.jx-band-in { position:relative; }
.jx-band-q { font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-1px; color:#fff; margin-bottom:34px; max-width:760px; }
.jx-steps { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:16px 44px; }
.jx-steps li { display:flex; align-items:center; gap:12px; font-weight:600; font-size:17px; color:#fff; }
.jx-steps span { width:36px; height:36px; border-radius:50%; background:var(--sun); color:var(--navy); font-weight:800; display:grid; place-items:center; flex:0 0 36px; }

/* Add-ons over sunlit water */
.jx > section.jx-addons { background:linear-gradient(180deg, rgba(242,247,249,.80), rgba(242,247,249,.92)), var(--tex) center/cover; }
.jx-addons-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:center; }
.jx-addons-head p { font-size:18px; line-height:1.6; max-width:420px; }
.jx-tile { background:rgba(255,255,255,.82); backdrop-filter:blur(10px); border-radius:24px; overflow:hidden; box-shadow:0 30px 60px rgba(var(--deep),.18); }
.jx-tile-img { height:220px; background:var(--img) center/cover; position:relative; }
.jx-tile-img span { position:absolute; left:20px; top:18px; background:var(--lagoon); color:#fff; font-size:12px; font-weight:700; border-radius:999px; padding:5px 12px; }
.jx-tile-body { padding:24px 28px 28px; }
.jx-tile h3 { font-size:24px; font-weight:800; letter-spacing:-.4px; line-height:1.2; margin:0 0 8px; }
.jx-tile p { font-size:16px; line-height:1.55; }
.jx-lockup { display:flex; align-items:center; gap:12px; margin:-58px 0 16px; position:relative; }
.jx-avatar { width:76px; height:76px; background:#fff; border-radius:50%; padding:6px; box-shadow:0 8px 20px rgba(var(--deep),.2); }
.jx-lname { font-weight:800; font-size:26px; letter-spacing:-.5px; color:var(--lagoon); margin-top:30px; }
.jx-lname span { color:#E8A400; }
.jx-by { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); }
.jx-by img { height:15px; width:auto; }
.jx-mini { display:flex; flex-direction:column; gap:7px; max-width:420px; margin-left:auto; }
.jx-mini p { margin:0; font-size:14px; line-height:1.45; padding:8px 12px; border-radius:14px; }
.jx-mini .me { align-self:flex-end; background:var(--lagoon); color:#fff; }
.jx-mini .sunny { align-self:flex-start; background:var(--shell); color:var(--ink); }
.jx-mini b { color:var(--lagoon); } .jx-mini span { display:block; margin-top:5px; color:var(--dim); }

/* Plans */
.jx > section.jx-plans { background:linear-gradient(180deg, var(--shell), #E7EEF3); }
.jx-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:28px; }
.jx-tiers > div { background:rgba(255,255,255,.75); border-radius:20px; padding:30px; border:1px solid var(--line); }
.jx-tiers > .jx-pick { background:#FCFDFE; border:2px solid var(--sun); box-shadow:0 18px 40px rgba(245,179,1,.18); }
.jx-price { font-size:44px; font-weight:800; color:var(--navy); letter-spacing:-1px; margin:6px 0 8px; }
.jx-price small { font-size:15px; font-weight:600; color:var(--dim); }
.jx-note { margin-top:20px; text-align:center; } .jx-center { text-align:center; margin-top:30px; }
.jx > section.jx-fine { padding:26px 0; background:#E7EEF3; border-top:1px solid var(--line); }
.jx-fine p { font-size:13.5px; color:var(--dim); max-width:860px; }
.jx-sticky { display:none; }
@media (max-width:860px) {
  .jx > section { padding:60px 0; }
  .jx > section.jx-hero { padding:64px 0 110px; }
  .jx-hero::after { background:linear-gradient(180deg, rgba(var(--deep),.78), rgba(var(--deep),.4)); }
  .jx-hero-grid, .jx-addons-grid { grid-template-columns:1fr; gap:36px; }
  .jx-phone { justify-self:center; transform:none; animation:none; width:min(300px,88vw); }
  .jx-six, .jx-tiers { grid-template-columns:1fr; }
  .jx > section.jx-band { background-attachment:scroll; }
}
@media (prefers-reduced-motion:reduce) { .jx-msg, .jx-phone, .jx-collage { animation:none; } }