body { font-family: Nunito Sans, Helvetica, Arial, sans-serif } {} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } @media (max-width: 639px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 767px) and (min-width: 640px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 991px) and (min-width: 768px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (min-width: 1200px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } :root { --jl-blue: #1B2A4A; --jl-night: #0F1A2E; --jl-ink: #080D16; --jl-panel: rgba(13, 18, 29, .78); --jl-panel-strong: rgba(8, 13, 22, .88); --jl-gold: #C4953A; --jl-gold-2: #E7C36A; --jl-green: #2D4A3E; --jl-cream: #F5F0E8; --jl-paper: #FFFDF8; --jl-muted: #AEB6C4; --jl-text: #172033; --jl-line: rgba(245, 240, 232, .16); --jl-shadow: 0 30px 100px rgba(0, 0, 0, .38); --jl-wrap: min(1180px, calc(100% - 40px)); --jl-radius: 8px; --jl-nav: 76px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--jl-cream); background: radial-gradient(900px 540px at 72% 10%, rgba(196,149,58,.17), transparent 62%), radial-gradient(680px 420px at 8% 72%, rgba(45,74,62,.26), transparent 62%), linear-gradient(160deg, #2B3137 0%, #161C25 42%, #0A101B 100%); line-height: 1.55; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(#000, transparent 78%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 34%, transparent 0 18%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.34) 100%); } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; } :focus-visible { outline: 3px solid rgba(231,195,106,.64); outline-offset: 3px; } .jl-wrap { width: var(--jl-wrap); margin: 0 auto; } .jl-topbar { position: fixed; inset: 0 0 auto; z-index: 90; border-bottom: 1px solid rgba(245,240,232,.12); background: rgba(8, 13, 22, .68); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .jl-nav { min-height: var(--jl-nav); display: flex; align-items: center; justify-content: space-between; gap: 22px; } .jl-logo { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; } .jl-logo strong { font-family: "Playfair Display", Georgia, serif; font-size: 28px; letter-spacing: -.02em; } .jl-logo span { color: rgba(245,240,232,.62); font-size: 9.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .jl-menu { display: flex; align-items: center; gap: 24px; color: rgba(245,240,232,.82); font-size: 14px; font-weight: 800; } .jl-menu a:not(.jl-btn):hover { color: var(--jl-gold-2); } .jl-menu-toggle { display: none; } .jl-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--jl-radius); overflow: hidden; font-weight: 900; line-height: 1; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; } .jl-btn:hover { transform: translateY(-2px); } .jl-btn-primary { color: #111622; background: linear-gradient(135deg, var(--jl-gold-2), var(--jl-gold)); box-shadow: 0 18px 48px rgba(196,149,58,.3); } .jl-btn-primary::after { content: ""; position: absolute; inset: -60% auto -60% -80%; width: 54%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transition: left .72s ease; } .jl-btn-primary:hover::after { left: 120%; } .jl-btn-ghost { color: var(--jl-cream); border-color: rgba(245,240,232,.22); background: rgba(255,255,255,.07); } .jl-btn-ghost:hover { border-color: rgba(231,195,106,.58); background: rgba(196,149,58,.13); } .jl-stage { position: relative; min-height: 100svh; padding: calc(var(--jl-nav) + 34px) 0 38px; overflow: visible; } .jl-stage::before { content: "JOSE LUIS"; position: absolute; left: 50%; top: 86px; transform: translateX(-50%); z-index: 0; width: 100%; color: rgba(245,240,232,.095); font-size: clamp(78px, 15vw, 210px); font-weight: 900; line-height: .78; letter-spacing: -.08em; text-align: center; white-space: nowrap; text-shadow: 0 18px 42px rgba(0,0,0,.28); } .jl-stage::after { content: "PROGRaMARTE.TS"; position: absolute; right: 18px; top: 180px; z-index: 1; writing-mode: vertical-rl; color: rgba(245,240,232,.24); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .jl-stage-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr minmax(280px, .64fr) .92fr; grid-template-areas: "intro person process" "trust person calendar"; gap: 22px; align-items: end; min-height: calc(100svh - var(--jl-nav) - 90px); max-width: 100%; } .jl-panel { position: relative; z-index: 3; min-width: 0; border: 1px solid rgba(245,240,232,.14); border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.1), transparent 34%), linear-gradient(180deg, rgba(13,18,29,.48), rgba(9,14,24,.36)); box-shadow: 0 26px 82px rgba(0,0,0,.24); -webkit-backdrop-filter: blur(10px) saturate(1.08); backdrop-filter: blur(10px) saturate(1.08); } .jl-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,.1), transparent 22%, transparent 78%, rgba(255,255,255,.05)), radial-gradient(420px 220px at 18% 0%, rgba(231,195,106,.08), transparent 62%); opacity: .58; } .jl-panel > * { position: relative; z-index: 1; } .jl-panel h1, .jl-panel h2, .jl-panel h3, .jl-panel p, .jl-panel span { text-shadow: 0 2px 12px rgba(0,0,0,.28); } .jl-panel h1, .jl-panel h2, .jl-panel h3, .jl-calendar h2 { margin: 0; font-family: Inter, system-ui, sans-serif; line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; } .jl-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--jl-gold-2); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .jl-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; } .jl-intro { grid-area: intro; z-index: 5; align-self: center; padding: 30px; } .jl-intro h1 { margin-bottom: 12px; color: var(--jl-cream); font-size: clamp(42px, 5.8vw, 74px); } .jl-role { margin: 0 0 22px; color: rgba(245,240,232,.74); font-size: 16px; font-weight: 850; letter-spacing: .02em; } .jl-intro p { margin: 0 0 22px; color: rgba(245,240,232,.76); font-size: 15.5px; } .jl-actions { display: flex; flex-wrap: wrap; gap: 12px; } .jl-person { grid-area: person; position: relative; z-index: 2; min-height: clamp(720px, 84vh, 860px); display: grid; align-items: end; justify-items: center; pointer-events: none; } .jl-person picture { position: relative; z-index: 2; display: grid; justify-items: center; width: auto; height: clamp(690px, 84vh, 900px); } .jl-person img { position: relative; z-index: 2; width: auto; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 34px 48px rgba(0,0,0,.38)); transform: none; transform-origin: center bottom; } .jl-person-ring { position: absolute; z-index: 2; right: -28px; top: 242px; width: 180px; height: 180px; border-radius: 50%; border: 1px dashed rgba(245,240,232,.28); color: rgba(245,240,232,.46); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; display: grid; place-items: center; } .jl-process { grid-area: process; z-index: 5; align-self: center; padding: 28px; } .jl-process h2 { margin-bottom: 22px; color: var(--jl-cream); font-size: clamp(29px, 4vw, 45px); } .jl-step { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(245,240,232,.12); } .jl-step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #111622; background: var(--jl-gold-2); font-weight: 950; } .jl-step h3 { margin-bottom: 5px; color: var(--jl-gold-2); font-size: 15px; letter-spacing: .02em; } .jl-step p { margin: 0; color: rgba(245,240,232,.72); font-size: 13.7px; } .jl-process-note { margin-top: 18px; color: var(--jl-cream); font-size: 14px; font-weight: 850; } .jl-trust { grid-area: trust; z-index: 5; padding: 26px; } .jl-trust h2 { margin-bottom: 16px; color: var(--jl-cream); font-size: clamp(28px, 4vw, 40px); } .jl-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .jl-metric { padding: 14px; border: 1px solid rgba(245,240,232,.1); border-radius: 8px; background: rgba(255,255,255,.055); } .jl-metric strong { display: block; color: var(--jl-gold-2); font-size: 24px; line-height: 1; } .jl-metric span { color: rgba(245,240,232,.7); font-size: 12px; font-weight: 800; } .jl-tags { display: flex; flex-wrap: wrap; gap: 8px; } .jl-tags span { padding: 7px 10px; border-radius: 999px; color: rgba(245,240,232,.78); background: rgba(196,149,58,.12); border: 1px solid rgba(196,149,58,.22); font-size: 12px; font-weight: 800; } .jl-calendar-card { grid-area: calendar; z-index: 5; align-self: stretch; display: grid; align-content: end; padding: 28px; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,253,248,.76)), radial-gradient(420px 210px at 10% 0%, rgba(196,149,58,.12), transparent 62%); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); color: var(--jl-text); } .jl-calendar-card h2 { margin-bottom: 12px; color: var(--jl-blue); font-size: clamp(29px, 4vw, 46px); } .jl-calendar-card p { margin-bottom: 18px; color: #344052; font-size: 15px; font-weight: 700; } .jl-status { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 14px; padding: 8px 12px; border-radius: 999px; color: var(--jl-green); background: rgba(45,74,62,.1); border: 1px solid rgba(45,74,62,.22); font-size: 12px; font-weight: 900; } .jl-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jl-green); box-shadow: 0 0 0 5px rgba(45,74,62,.12); } .jl-calendar-section { position: relative; z-index: 6; padding: 34px 0 70px; } .jl-calendar-shell { overflow: hidden; border: 1px solid rgba(245,240,232,.18); border-radius: 12px; background: rgba(255,253,248,.96); box-shadow: var(--jl-shadow); } .jl-calendar-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 34px 36px 20px; color: var(--jl-text); background: radial-gradient(620px 280px at 18% 0%, rgba(196,149,58,.18), transparent 62%), var(--jl-paper); } .jl-calendar-head h2 { margin: 0 0 8px; color: var(--jl-blue); font-family: Inter, system-ui, sans-serif; font-size: clamp(31px, 4vw, 52px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; } .jl-calendar-head p { margin: 0; color: #5A6B7C; font-weight: 600; } .jl-calendly-frame { padding: 14px; background: linear-gradient(135deg, rgba(27,42,74,.09), rgba(196,149,58,.12)), var(--jl-cream); } .jl-calendly-box { position: relative; overflow: hidden; border: 1px solid rgba(8,17,31,.08); border-radius: 8px; background: #fff; } .calendly-inline-widget { min-width: 320px; height: 1120px; background: #fff; } .jl-noscript { margin: 0; padding: 22px; color: var(--jl-text); background: #fff; text-align: center; font-weight: 700; } .jl-noscript a { color: var(--jl-blue); text-decoration: underline; text-underline-offset: 4px; } .jl-calendly-loader { position: absolute; inset: 0; z-index: 30; display: grid; place-items: start center; padding: 86px 22px 22px; color: var(--jl-blue); background: radial-gradient(420px 240px at 50% 12%, rgba(196,149,58,.14), transparent 62%), linear-gradient(180deg, rgba(255,253,248,.96), rgba(245,240,232,.9)); text-align: center; transition: opacity .35s ease, visibility .35s ease; pointer-events: none; } .jl-calendly-box.is-loaded .jl-calendly-loader { opacity: 0; visibility: hidden; pointer-events: none; } .jl-loader-card { max-width: 430px; padding: 28px 26px; border: 1px solid rgba(196,149,58,.22); border-radius: 10px; background: rgba(255,255,255,.68); box-shadow: 0 18px 44px rgba(8,17,31,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .jl-coffee { display: inline-block; margin-bottom: 14px; font-size: 42px; transform-origin: 50% 80%; animation: jl-coffee-wiggle 1.35s ease-in-out infinite; } .jl-loader-card strong { display: block; margin-bottom: 8px; font-family: Inter, system-ui, sans-serif; font-size: 23px; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; } .jl-loader-card p { margin: 0; color: #5A6B7C; font-size: 14.5px; font-weight: 700; } @keyframes jl-coffee-wiggle { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-5px) rotate(-8deg); } 55% { transform: translateY(0) rotate(6deg); } 75% { transform: translateY(-2px) rotate(-3deg); } } .jl-close { position: relative; z-index: 6; padding: 34px 0 54px; } .jl-close-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 30px; border: 1px solid rgba(245,240,232,.12); border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 34%), radial-gradient(520px 260px at 10% 0%, rgba(196,149,58,.18), transparent 64%), rgba(8,13,22,.42); box-shadow: var(--jl-shadow); -webkit-backdrop-filter: blur(10px) saturate(1.08); backdrop-filter: blur(10px) saturate(1.08); } .jl-close h2 { margin: 0 0 8px; color: var(--jl-cream); font-family: Inter, system-ui, sans-serif; font-size: clamp(27px, 3.6vw, 46px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; } .jl-close p { margin: 0; color: rgba(245,240,232,.72); font-weight: 700; } .jl-close a:not(.jl-btn) { color: var(--jl-gold-2); text-decoration: underline; text-underline-offset: 4px; } .jl-footer { padding: 38px 0 46px; border-top: 1px solid rgba(245,240,232,.1); background: rgba(8,13,22,.86); color: rgba(245,240,232,.68); } .jl-footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 26px; } .jl-footer p { margin: 11px 0 0; font-size: 14px; } .jl-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 20px; color: var(--jl-gold-2); font-size: 14px; font-weight: 800; } .jl-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(8,13,22,.94); border-top: 1px solid rgba(196,149,58,.28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .jl-mobile-cta .jl-btn { width: 100%; min-height: 50px; } [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .jl-person-ring { animation: jl-float 6s ease-in-out infinite; } @keyframes jl-float { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-8px) rotate(-7deg); } } } @media (min-width: 1081px) { .jl-person { grid-column: 1 / -1; grid-row: 1 / 3; justify-self: center; width: 100%; transform: translateY(-18px); } .jl-person picture { width: auto; height: clamp(700px, 86vh, 920px); } .jl-person img { transform: translate(-15%, -50%) scale(.65); } } @media (min-width: 1081px) and (max-width: 1440px) { .jl-stage { padding-top: calc(var(--jl-nav) + 26px); } .jl-stage-grid { grid-template-columns: minmax(300px, .96fr) minmax(230px, .5fr) minmax(300px, .96fr); gap: 18px; min-height: calc(100svh - var(--jl-nav) - 74px); } .jl-intro { padding: 26px; } .jl-intro h1 { font-size: clamp(42px, 4.8vw, 64px); } .jl-role, .jl-intro p { font-size: 14.5px; } .jl-process, .jl-trust, .jl-calendar-card { padding: 24px; } .jl-process h2, .jl-trust h2, .jl-calendar-card h2 { font-size: clamp(28px, 3.35vw, 39px); } .jl-step { grid-template-columns: 38px 1fr; gap: 12px; padding: 13px 0; } .jl-person { min-height: clamp(640px, 78vh, 760px); } .jl-person picture { height: clamp(620px, 78vh, 760px); } .jl-person-ring { right: -12px; top: 210px; width: 150px; height: 150px; font-size: 9.5px; } } @media (min-width: 1081px) and (max-width: 1366px) { .jl-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "intro process" "trust calendar"; align-items: stretch; } .jl-intro, .jl-process, .jl-trust, .jl-calendar-card { align-self: stretch; } .jl-person { position: absolute; grid-area: 1 / 1 / 3 / 3; inset: 8px 0 auto; justify-self: center; width: min(42vw, 500px); min-height: 0; height: min(76vh, 720px); z-index: 2; opacity: .92; transform: none; } .jl-person picture { height: 100%; } .jl-person img { transform: translate(-15%, -48%) scale(.58); } .jl-person-ring { display: none; } } @media (max-width: 1080px) { .jl-stage-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "person" "process" "trust" "calendar"; min-height: 0; } .jl-person { min-height: 0; max-width: 100%; overflow: hidden; padding: 8px 0 2px; } .jl-person picture { width: min(340px, 52vw); height: auto; } .jl-person img { width: 100%; height: auto; transform: none; } .jl-person { z-index: 2; } .jl-person-ring { display: none; } .jl-intro h1 { font-size: clamp(38px, 5.4vw, 58px); } .jl-process h2, .jl-calendar-card h2 { font-size: clamp(28px, 4.6vw, 38px); } } @media (max-width: 780px) { :root { --jl-nav: 68px; } .jl-wrap { width: min(100% - 32px, 1180px); } .jl-logo strong { font-size: 23px; } .jl-logo span { font-size: 8px; letter-spacing: .13em; } .jl-menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(196,149,58,.35); border-radius: 8px; color: var(--jl-cream); background: rgba(255,255,255,.08); } .jl-menu-toggle span, .jl-menu-toggle::before, .jl-menu-toggle::after { content: ""; width: 20px; height: 2px; border-radius: 999px; background: currentColor; transition: transform .22s ease, opacity .18s ease; } .jl-menu-toggle::before { transform: translateY(-7px); } .jl-menu-toggle::after { transform: translateY(7px); } .jl-topbar.is-menu-open .jl-menu-toggle span { opacity: 0; } .jl-topbar.is-menu-open .jl-menu-toggle::before { transform: translateY(2px) rotate(45deg); } .jl-topbar.is-menu-open .jl-menu-toggle::after { transform: translateY(-2px) rotate(-45deg); } .jl-menu { position: absolute; top: calc(100% + 10px); left: 16px; right: 16px; display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(196,149,58,.26); border-radius: 8px; background: rgba(8,13,22,.98); box-shadow: 0 24px 52px rgba(0,0,0,.32); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s ease; } .jl-topbar.is-menu-open .jl-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .jl-menu a:not(.jl-btn) { padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,.06); } .jl-menu .jl-btn { display: none; } .jl-stage { min-height: auto; padding: calc(var(--jl-nav) + 34px) 0 28px; overflow: hidden; } .jl-stage::before { top: 88px; font-size: clamp(64px, 20vw, 120px); white-space: normal; } .jl-stage::after { display: none; } .jl-stage-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "person" "process" "trust" "calendar"; gap: 16px; } .jl-intro, .jl-process, .jl-trust, .jl-calendar-card { padding: 22px; } .jl-actions .jl-btn { width: 100%; } .jl-person { min-height: 420px; order: 2; z-index: 1; } .jl-person picture { width: min(350px, 100%); height: auto; } .jl-person img { width: 100%; height: auto; transform: translateY(8px); } .jl-person-ring { display: none; } .jl-metrics { grid-template-columns: 1fr; } .jl-calendar-head, .jl-close-inner { grid-template-columns: 1fr; padding: 24px 22px; } .jl-calendly-frame { padding: 8px; } .calendly-inline-widget { height: 1080px; } .jl-calendly-loader { padding-top: 64px; } .jl-loader-card { padding: 24px 20px; } .jl-footer { padding-bottom: 96px; } .jl-footer-grid { flex-direction: column; align-items: flex-start; } .jl-footer-links { justify-content: flex-start; } .jl-mobile-cta { display: block; } } @media (max-width: 420px) { .jl-wrap { width: min(100% - 24px, 1180px); } .jl-logo strong { font-size: 21px; } .jl-logo span { max-width: 190px; line-height: 1.25; } .jl-intro h1 { font-size: clamp(36px, 14vw, 54px); } .jl-process h2, .jl-trust h2, .jl-calendar-card h2, .jl-calendar-head h2, .jl-close h2 { font-size: clamp(27px, 10vw, 40px); } .jl-person picture { width: min(320px, 100%); } .jl-panel, .jl-calendar-shell, .jl-close-inner { border-radius: 8px; } .jl-calendly-loader { padding: 46px 14px 16px; } .jl-loader-card strong { font-size: 20px; } .jl-coffee { font-size: 36px; } }