/** * JTTA global styles (header, footer, home sections). * * Responsive SoT (see theme RESPONSIVE.md): * ≥ 1440px → Desktop multi-column SoT — node 73:736 * 1024–1199 → Desktop reduced columns * 768–1023 → Tablet-specific arrangement * ≤ 767px → Mobile Figma phone SoT (~425) — node 142:98 * ≤ 360px → Proportional scale of 425 phone band (360/420) * ≤ 325px → Proportional scale of 425 phone band (325/420) * * Fix priority: line-height → font-size/weight → margin/padding → gap → border → layout. */ :root { --jtta-red: #e63946; --jtta-red-deep: #e32225; --jtta-red-text: #dc2626; --jtta-navy: #0d1b2a; --jtta-navy-footer: #0b132b; --jtta-navy-card: #072359; --jtta-navy-deep: #001b40; --jtta-ink: #0d1b2a; --jtta-btn-ink: #0f172a; --jtta-slate: #94a3b8; --jtta-muted: #475569; --jtta-mist: #f8fafc; --jtta-white: #fffefe; --jtta-blue: #4087ef; --jtta-blue-soft: #3094eb; --jtta-hero-bg: #0a1931; --jtta-header-h: 103px; /* Figma 73:752 — fixed 717px (never 100vh) */ --jtta-hero-h: 717px; /* Figma Home page design 73:736 — 1440 × 10244 */ --jtta-canvas: 1440px; --jtta-content: 1374px; /* header Frame 3 */ --jtta-row: 1352px; /* 1440 − 2×44 section inset */ --jtta-gutter: 33px; --jtta-section-x: 44px; --jtta-section-y: 22px; --jtta-font-display: "Anton", sans-serif; --jtta-font-nav: "Montserrat", sans-serif; --jtta-font-body: "Poppins", sans-serif; --jtta-font-ui: "Inter", sans-serif; --jtta-fs-display: 64px; /* Figma text roles — use these instead of ad-hoc line-heights */ --jtta-lh-display: 0.9644; /* Anton display (hero / marks) */ --jtta-lh-tight: 0.89135; /* Anton multi-line section titles — Figma 89.135% */ --jtta-lh-card-title: 1.342; /* Montserrat large card titles */ --jtta-lh-overline: 1.372; /* Montserrat overlines + 16px Poppins copy */ --jtta-lh-body: 1.398; /* 18px+ Poppins / Inter body & UI */ --jtta-lh-lead: 1.67; /* Roomier Poppins leads (Figma future lead) */ --jtta-lh-nav: 1.25; /* Header / footer nav */ --jtta-radius-cta: 11.257px; --jtta-radius-btn: 9.112px; --jtta-radius-card: 37px; --jtta-radius-photo: 40px; } /* Laptop 1024 view: desktop 44px gutters; row shrinks inside the inset. */ @media (min-width: 1024px) and (max-width: 1199px) { :root { --jtta-section-x: 44px; --jtta-section-y: 22px; --jtta-content: 936px; --jtta-row: 936px; --jtta-gutter: 24px; --jtta-fs-display: 46px; --jtta-header-h: 90px; } } /* Mid desktop (1200–1439): same 44px gutters; row is 100% of the padded box */ @media (min-width: 1200px) and (max-width: 1439px) { :root { --jtta-section-x: 44px; --jtta-row: 1352px; } } /* Mobile Figma band — phones (≤767) + base for tablet overrides */ @media (max-width: 1023px) { :root { --jtta-fs-display: 36px; --jtta-section-x: 20px; --jtta-header-h: 84px; --jtta-lh-tight: 0.9644; /* mobile Anton titles use 96.44% */ } } /* Tablet 768 view: 20px gutters; row fills the padded box */ @media (min-width: 768px) and (max-width: 1023px) { :root { --jtta-fs-display: 42px; --jtta-section-x: 20px; --jtta-section-y: 20px; --jtta-header-h: 90px; --jtta-content: calc(100vw - 40px); --jtta-row: 100%; --jtta-lh-tight: 0.9644; } } /* * Hero height stays Figma 717 on desktop — never calc(100vh − header). */ /* * Desktop Figma shell (≥1024). Divi defaults squeeze to 1080/80% — unlock. * Rows must keep a centered Figma content width; width:100% + flex-start * otherwise parks fixed cards on the left with a huge empty right gap. */ @media (min-width: 1024px) { :root, body.jtta-site { --content-width: 100%; --content-max-width: none; } body.jtta-site #page-container, body.jtta-site #et-main-area, body.jtta-site #main-content, body.jtta-site #main-content .container, body.jtta-site .entry-content, body.jtta-site .et-l.et-l--post, body.jtta-site .et_builder_inner_content { width: 100%; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; } body.jtta-site #main-content .container { padding-top: 0; } /* Full-bleed section shells; inner rows keep Figma max-widths below */ body.jtta-site .et_pb_section.jtta-hero, body.jtta-site .et_pb_section.jtta-marks, body.jtta-site .et_pb_section.jtta-future, body.jtta-site .et_pb_section.jtta-gap, body.jtta-site .et_pb_section.jtta-exists, body.jtta-site .et_pb_section.jtta-dims, body.jtta-site .et_pb_section.jtta-way, body.jtta-site .et_pb_section.jtta-inside, body.jtta-site .et_pb_section.jtta-journey, body.jtta-site .et_pb_section.jtta-depth, body.jtta-site .et_pb_section.jtta-outcomes, body.jtta-site .et_pb_section.jtta-parents, body.jtta-site .et_pb_section.jtta-proof, body.jtta-site .et_pb_section.jtta-experience, body.jtta-site .et_pb_section.jtta-faq, body.jtta-site .et_pb_section.jtta-cta { width: 100%; max-width: none; box-sizing: border-box; } /* * Center every home section row to Figma content band (1352). * Highest-priority layout lock for 1024 / 1440+ desktop. * Excludes: hero (own layout), gap banner, proof (section is flex row), cta. */ body.jtta-site .et_pb_section.jtta-marks > .et_pb_row, body.jtta-site .et_pb_section.jtta-future > .et_pb_row, body.jtta-site .et_pb_section.jtta-exists > .et_pb_row, body.jtta-site .et_pb_section.jtta-dims > .et_pb_row, body.jtta-site .et_pb_section.jtta-way > .et_pb_row, body.jtta-site .et_pb_section.jtta-inside > .et_pb_row, body.jtta-site .et_pb_section.jtta-journey > .et_pb_row, body.jtta-site .et_pb_section.jtta-depth > .et_pb_row, body.jtta-site .et_pb_section.jtta-outcomes > .et_pb_row, body.jtta-site .et_pb_section.jtta-parents > .et_pb_row, body.jtta-site .et_pb_section.jtta-experience > .et_pb_row, body.jtta-site .et_pb_section.jtta-faq > .et_pb_row, body.jtta-site .et_pb_section.jtta-marks > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-future > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-exists > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-dims > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-way > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-inside > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-journey > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-depth > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-outcomes > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-parents > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-experience > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-faq > .et_block_row.et_pb_row { width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; float: none; box-sizing: border-box; } /* Gap intro stays centered; banner stays full-bleed */ body.jtta-site .et_pb_section.jtta-gap > .jtta-gap__intro.et_pb_row, body.jtta-site .et_pb_section.jtta-gap > .jtta-gap__intro.et_block_row.et_pb_row { width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; float: none; box-sizing: border-box; } /* Proof section is itself a horizontal flex band — center the whole section content */ body.jtta-site .et_pb_section.jtta-proof, body.jtta-site .et_pb_section.jtta-proof.et_block_section { justify-content: center; max-width: none; } /* Full-bleed exceptions — gap banner only (CTA must stay centered) */ body.jtta-site .et_pb_section.jtta-gap > .jtta-gap__banner.et_pb_row, body.jtta-site .et_pb_section.jtta-gap > .jtta-gap__banner.et_block_row.et_pb_row { max-width: none; width: 100%; margin-left: 0; margin-right: 0; } /* CTA inner row — Figma 1340 centered inside full-bleed red band */ body.jtta-site .et_pb_section.jtta-cta > .jtta-cta__row.et_pb_row, body.jtta-site .et_pb_section.jtta-cta > .jtta-cta__row.et_block_row.et_pb_row { width: 100%; max-width: 1340px; margin-left: auto; margin-right: auto; float: none; box-sizing: border-box; } } /* ------------------------------------------------------------------------- Divi chrome reset — frozen. Do not copy !important into page CSS. ------------------------------------------------------------------------- */ body.jtta-site.et_non_fixed_nav #page-container, body.jtta-site #page-container, body.jtta-site.et_fixed_nav #page-container { padding-top: 0 !important; overflow: visible; } body.jtta-site #top-header, body.jtta-site .et_slide_in_menu_container, body.jtta-site #et_top_search, body.jtta-site .et_search_outer { display: none !important; } /* ------------------------------------------------------------------------- Header — Figma 1440 × 103 (node 73:737). Gap 105 / nav 56 / CTA 197×56. ------------------------------------------------------------------------- */ #main-header.jtta-header, #main-header.jtta-header.et-fixed-header { position: sticky !important; top: 0 !important; left: 0; right: 0; z-index: 99999; background: var(--jtta-white); box-shadow: none; filter: none !important; border: 0 !important; border-bottom: 0 !important; height: var(--jtta-header-h) !important; min-height: var(--jtta-header-h); max-height: none; padding: 0 !important; margin: 0 !important; width: 100%; box-sizing: border-box; overflow: visible; transform: none !important; transition: none !important; } /* Header shadow removed per request — flat header on all breakpoints. */ #main-header.jtta-header, #main-header.jtta-header.et-fixed-header { box-shadow: none !important; border: 0 !important; border-bottom: 0 !important; outline: none !important; } /* Kill Divi’s 1px header hairline (box-shadow: 0 1px 0 …) under the white bar */ body.jtta-site #main-header.jtta-header::after, body.jtta-site #main-header.jtta-header::before { content: none; display: none !important; border: 0 !important; box-shadow: none !important; } body.admin-bar #main-header.jtta-header, body.admin-bar #main-header.jtta-header.et-fixed-header { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar #main-header.jtta-header, body.admin-bar #main-header.jtta-header.et-fixed-header { top: 46px !important; } } .jtta-header__inner { display: flex; align-items: center; justify-content: flex-start; gap: 105px; /* Figma Frame 3: 1374 @ x=33 on 1440 — center the frame, no extra gutter. */ max-width: var(--jtta-content); height: var(--jtta-header-h); margin: 0 auto; padding: 0; box-sizing: border-box; overflow: visible; } .jtta-header__logo { display: flex; align-items: center; flex: 0 0 auto; line-height: 0; } .jtta-header__logo img { display: block; width: 178px; height: 97px; object-fit: contain; } .jtta-header__nav { flex: 0 1 auto; display: flex; justify-content: flex-start; min-width: 0; } .jtta-header__menu { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 56px; margin: 0; padding: 0; list-style: none; } .jtta-header__menu li { margin: 0; padding: 0; } .jtta-header__menu a { font-family: var(--jtta-font-nav); font-weight: 500; font-size: 16px; line-height: var(--jtta-lh-nav); color: var(--jtta-ink); text-decoration: none; white-space: nowrap; letter-spacing: 0; } .jtta-header__menu a:hover, .jtta-header__menu .current-menu-item > a, .jtta-header__menu .current_page_item > a { color: var(--jtta-red); } .jtta-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .jtta-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; border: 0; cursor: pointer; transform: translateY(0); transition: opacity 0.2s ease, background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .jtta-btn:hover { opacity: 1; transform: translateY(-2px); } .jtta-btn:active { transform: translateY(0) scale(0.98); } .jtta-btn--primary { width: 197px; height: 56.286px; padding: 11.257px 36.586px; background: var(--jtta-red); color: #fff; border-radius: var(--jtta-radius-cta); font-family: var(--jtta-font-display); font-size: 25.329px; font-weight: 400; line-height: 1; text-align: center; letter-spacing: 0; white-space: nowrap; box-shadow: none; filter: none; text-shadow: none; } .jtta-btn--primary:hover, .jtta-btn--primary:focus { color: #fff; background: var(--jtta-red-deep); box-shadow: 0 8px 20px rgba(227, 34, 37, 0.35); } .jtta-btn--primary:active { box-shadow: 0 3px 10px rgba(227, 34, 37, 0.28); } .jtta-header__toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .jtta-header__toggle-bar { display: block; width: 22px; height: 2px; background: var(--jtta-ink); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; } .jtta-header__toggle[aria-expanded="true"] .jtta-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .jtta-header__toggle[aria-expanded="true"] .jtta-header__toggle-bar:nth-child(2) { opacity: 0; } .jtta-header__toggle[aria-expanded="true"] .jtta-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .jtta-skip { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; /* Do NOT use top:-48px — expands scroll area and leaves white gap above header on mobile */ } .jtta-skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100000; width: auto; height: auto; margin: 0; padding: 8px 14px; overflow: visible; clip: auto; white-space: normal; background: var(--jtta-navy); color: #fff; font-family: var(--jtta-font-ui); font-size: 14px; text-decoration: none; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .jtta-btn, .jtta-header__toggle-bar { transition: none; } } /* ------------------------------------------------------------------------- Footer (Figma 73:930 — 1440 × 378) ------------------------------------------------------------------------- */ .jtta-footer { position: relative; box-sizing: border-box; background-color: var(--jtta-navy-footer); /* Decorative fill via `.jtta-footer__bg` (child-theme SVG) — not CSS url */ background-image: none; min-height: 378px; /* Figma 73:930 — px 44 / py 22 */ padding: 22px var(--jtta-section-x); color: var(--jtta-slate); overflow: hidden; } /* Absolute fill — was in-flow + parent-theme 404 → broken icon + huge empty top */ .jtta-footer__bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; object-fit: cover; object-position: center; pointer-events: none; } .jtta-footer__inner { position: relative; z-index: 1; display: flex; flex-direction: column; /* Figma 73:933 — gap 95 between top band and legal row */ gap: 95px; max-width: 1360px; margin: 0 auto; } .jtta-footer__top { display: flex; /* Figma 73:934 — items-center */ align-items: center; justify-content: space-between; /* Figma 73:934 — brand→cols gap 220 */ gap: 220px; } .jtta-footer__brand { flex: 0 0 382.936px; max-width: 382.936px; } .jtta-footer__logo { display: inline-block; line-height: 0; } .jtta-footer__logo img { display: block; width: 195px; height: 92px; object-fit: contain; } .jtta-footer__tagline { margin: 13px 0 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 15.643px; line-height: normal; color: var(--jtta-slate); } .jtta-footer__cols { display: flex; align-items: center; gap: 122px; padding-top: 0; } .jtta-footer__col { min-width: 139px; } .jtta-footer__heading { margin: 0 0 19px; font-family: var(--jtta-font-nav); font-weight: 700; font-size: 16.847px; line-height: normal; color: #fff; } .jtta-footer__menu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 19px; } .jtta-footer__menu a { font-family: var(--jtta-font-body); font-weight: 400; font-size: 16.847px; line-height: normal; color: var(--jtta-slate); text-decoration: none; } .jtta-footer__menu a:hover { color: #fff; } .jtta-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 0; padding-top: 17px; border-top: 1px solid rgba(148, 163, 184, 0.28); } .jtta-footer__copy, .jtta-footer__note, .jtta-footer__email { margin: 0; font-family: var(--jtta-font-ui); font-weight: 400; font-size: 14.44px; line-height: normal; color: var(--jtta-slate); text-decoration: none; } .jtta-footer__meta { display: flex; align-items: center; gap: 24px; } .jtta-footer__email:hover { color: #fff; } /* ------------------------------------------------------------------------- Laptop 981–1199 ------------------------------------------------------------------------- */ @media (max-width: 1199px) { .jtta-header__menu { gap: 28px; } .jtta-header__logo img { width: 150px; height: 82px; } .jtta-btn--primary { width: 170px; height: 48px; font-size: 20px; } .jtta-footer__cols { gap: 48px; } .jtta-footer__top { gap: 48px; flex-wrap: wrap; } .jtta-footer__brand { flex-basis: 260px; } } /* ------------------------------------------------------------------------- Tablet / mobile — interim until Figma mobile is ready ------------------------------------------------------------------------- */ @media (max-width: 980px) { #main-header.jtta-header, #main-header.jtta-header .jtta-header__inner { height: 84px; min-height: 84px; } .jtta-header__inner { padding: 0 20px; max-width: none; } .jtta-header__logo img { width: 128px; height: 70px; } .jtta-header__toggle { display: inline-flex; } .jtta-header__nav { position: absolute; top: 84px; left: 0; right: 0; display: none; background: var(--jtta-white); box-shadow: 0 8px 18px rgba(13, 27, 42, 0.12); padding: 12px 20px 24px; z-index: 99999; } .jtta-header__nav.is-open { display: block; } .jtta-header__menu { flex-direction: column; align-items: flex-start; gap: 0; } .jtta-header__menu li { width: 100%; border-bottom: 1px solid rgba(13, 27, 42, 0.08); } .jtta-header__menu a { display: block; padding: 14px 0; } .jtta-header__cta { width: auto; min-width: 140px; height: 44px; font-size: 18px; padding: 8px 16px; } .jtta-footer { padding: 36px 20px 20px; } .jtta-footer__top { flex-direction: column; gap: 36px; } .jtta-footer__brand, .jtta-footer__col { flex-basis: auto; max-width: none; } .jtta-footer__cols { flex-wrap: wrap; gap: 32px; } .jtta-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; } } @media (max-width: 480px) { .jtta-header__cta { display: none; } } /* ------------------------------------------------------------------------- Mobile Header — Figma home page 142:98 / Frame 144 (150:37), 420 × 87 Desktop header rules above stay unchanged. ------------------------------------------------------------------------- */ @media (max-width: 1023px) { :root { --jtta-header-h: 87px; } html, body.jtta-site { margin: 0; padding: 0; } /* Keep sticky reliable — don't put overflow-x on html/body (breaks sticky + creates top gap) */ body.jtta-site #page-container { overflow-x: clip; } /* Figma 150:37 — flat white bar flush to viewport top */ #main-header.jtta-header, #main-header.jtta-header.et-fixed-header { position: sticky !important; top: 0 !important; height: 87px !important; min-height: 87px; max-height: 87px; margin: 0 !important; padding: 0 !important; overflow: hidden; } #main-header.jtta-header, #main-header.jtta-header .jtta-header__inner { height: 87px; min-height: 87px; } .jtta-header__inner { box-sizing: border-box; height: 87px; padding: 12.5px 20px; max-width: none; justify-content: space-between; align-items: center; } .jtta-header__logo { width: 132px; height: 61.2857px; } .jtta-header__logo img { width: 132px; height: 61.2857px; object-fit: contain; } .jtta-header__toggle { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; padding: 0; margin: 0; gap: 4px; } .jtta-header__toggle-bar { width: 19.5px; height: 2px; background: var(--jtta-navy); } .jtta-header__toggle[aria-expanded="true"] .jtta-header__toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .jtta-header__toggle[aria-expanded="true"] .jtta-header__toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .jtta-header__nav { top: 87px; left: 0; right: 0; } .jtta-header__cta { display: none; } body.admin-bar #main-header.jtta-header, body.admin-bar #main-header.jtta-header.et-fixed-header { top: 46px; } } /* ------------------------------------------------------------------------- Shared page type — scoped, no !important ------------------------------------------------------------------------- */ body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-marks__heading.et_pb_text h2, body.jtta-site .jtta-future__heading.et_pb_text h2, body.jtta-site .jtta-gap__heading.et_pb_text h2, body.jtta-site .jtta-exists__heading.et_pb_text h2, body.jtta-site .jtta-way__heading.et_pb_text h2, body.jtta-site .jtta-inside__heading.et_pb_text h2, body.jtta-site .jtta-journey__heading.et_pb_text h2, body.jtta-site .jtta-depth__heading.et_pb_text h2, body.jtta-site .jtta-outcomes__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2, body.jtta-site .jtta-proof__heading.et_pb_text h2, body.jtta-site .jtta-faq__heading.et_pb_text h2, body.jtta-site .jtta-cta__heading.et_pb_text h2 { margin: 0; padding: 0; font-family: var(--jtta-font-display); font-weight: 400; font-size: var(--jtta-fs-display); line-height: var(--jtta-lh-tight); color: var(--jtta-btn-ink); } body.jtta-site .jtta-hero__heading.et_pb_text h1 { color: var(--jtta-white); line-height: var(--jtta-lh-display); } body.jtta-site .jtta-overline.et_pb_text p, body.jtta-site .jtta-future__overline.et_pb_text p, body.jtta-site .jtta-gap__overline.et_pb_text p, body.jtta-site .jtta-way__overline.et_pb_text p, body.jtta-site .jtta-inside__overline.et_pb_text p, body.jtta-site .jtta-depth__overline.et_pb_text p, body.jtta-site .jtta-parents__overline.et_pb_text p, body.jtta-site .jtta-experience__overline.et_pb_text p, body.jtta-site .jtta-faq__overline.et_pb_text p { margin: 0 0 12px; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 16px; line-height: var(--jtta-lh-overline); text-transform: uppercase; color: var(--jtta-red-text); } body.jtta-site .jtta-lead.et_pb_text p, body.jtta-site .jtta-future__lead.et_pb_text p, body.jtta-site .jtta-gap__lead.et_pb_text p, body.jtta-site .jtta-exists__lead.et_pb_text p, body.jtta-site .jtta-way__lead.et_pb_text p, body.jtta-site .jtta-inside__lead.et_pb_text p, body.jtta-site .jtta-journey__lead.et_pb_text p, body.jtta-site .jtta-outcomes__lead.et_pb_text p, body.jtta-site .jtta-faq__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 18px; line-height: var(--jtta-lh-body); color: var(--jtta-muted); } body.jtta-site .jtta-btn:focus-visible, body.jtta-site .jtta-header__toggle:focus-visible, body.jtta-site .jtta-hero__btn.et_pb_button:focus-visible { outline: 2px solid var(--jtta-red); outline-offset: 3px; } /* ------------------------------------------------------------------------- Home — Hero banner (Figma 1440 × 717, node 73:752) ------------------------------------------------------------------------- */ /* Figma hero frame: 1440×717, padding 88px 44px 0 44px, gap 10px. */ body.jtta-site .jtta-hero.et_pb_section { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; box-sizing: border-box; min-height: var(--jtta-hero-h); height: var(--jtta-hero-h); padding: 88px 44px 0 44px; margin: 0; overflow: hidden; /* Navy fill under image — Divi section_0 is transparent !important */ background-color: var(--jtta-hero-bg); /* Art comes from Divi `.jtta-hero__bg` image modules — not CSS urls. */ background-image: none; background-repeat: no-repeat; border-top: 0; box-shadow: none; outline: none; } /* * Divi hero bg — absolute fill of Figma frame (73:752 = 1440×717). * Live desktop asset is the composed frame export (1440×717) → 100% cover. * Mobile asset is 421×866 → full-bleed cover (154:69). */ body.jtta-site .jtta-hero__bg.et_pb_image { position: absolute; inset: 0; z-index: 0; margin: 0; width: 100%; max-width: none; height: 100%; pointer-events: none; } body.jtta-site .jtta-hero__bg .et_pb_image_wrap { display: block; position: relative; width: 100%; height: 100%; margin: 0; overflow: hidden; } body.jtta-site .jtta-hero__bg--desktop img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; } body.jtta-site .jtta-hero__bg--mobile { display: none; } /* Mobile/tablet banner fill — same absolute stack as desktop (Figma 154:69) */ body.jtta-site .jtta-hero__bg--mobile.et_pb_image .et_pb_image_wrap, body.jtta-site .jtta-hero__bg--mobile img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; } body.jtta-site .jtta-hero__bg--mobile img { object-fit: cover; object-position: center top; } body.jtta-site .jtta-hero.et_pb_section > .et_pb_row { position: relative; z-index: 1; } body.jtta-site .jtta-hero.et_pb_section .et_pb_row { width: 100%; max-width: 1333px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-hero__copy-row.et_pb_row { max-width: 463px; margin-left: 0; margin-right: auto; padding-top: 0; padding-bottom: 0; } body.jtta-site .jtta-hero__heading.et_pb_text h1 { padding-bottom: 0; margin: 0; color: var(--jtta-white); } /* Figma 73:757 — “Future Readiness” line 1, “Academy” line 2 (Future = red) */ body.jtta-site .jtta-hero__heading.et_pb_text h1 span { display: inline; color: var(--jtta-red-text); } body.jtta-site .jtta-hero__heading.et_pb_text h1 br { display: block; content: ""; } body.jtta-site .jtta-hero__heading.et_pb_text { margin: 0; } /* Hero scroll cue removed per request — hide row + kill reserved gap. */ body.jtta-site .jtta-hero__scroll-row.et_pb_row, body.jtta-site .jtta-hero__scroll-row.et_block_row.et_pb_row, body.jtta-site .jtta-hero__scroll.et_pb_text, body.jtta-site .jtta-hero__scroll-btn { display: none; margin: 0; padding: 0; height: 0; min-height: 0; overflow: hidden; pointer-events: none; visibility: hidden; } /* Figma copy stack gap 36px (73:756). */ body.jtta-site .jtta-hero__lead.et_pb_text { margin: 36px 0 0; } body.jtta-site .jtta-hero__lead.et_pb_text p { margin: 0; max-width: 463px; font-family: var(--jtta-font-body); font-weight: 400; font-size: 15px; /* Figma 73:758 — leading normal (not Divi 1.45em) */ line-height: normal; color: var(--jtta-white); } /* Figma button gap 13.76px — 159.46 + 13.76 + 289.78 = 463 (column width). */ body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { display: inline-flex; vertical-align: middle; margin: 36px 0 0; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left: 13.76px; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper .jtta-hero__btn.et_pb_button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto; max-width: none; font-family: var(--jtta-font-nav); text-decoration: none; box-shadow: none; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; cursor: pointer; transform: translateY(0); transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } body.jtta-site .jtta-hero__btn.et_pb_button::after { content: none; display: none; width: 0; height: 0; margin: 0; padding: 0; line-height: 0; font-size: 0; } /* Padding/size must beat Divi critical `.et_pb_button_0_wrapper … padding … !important`. */ body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button { width: 159.46px; min-width: 159.46px; max-width: none; height: 45.56px; min-height: 45.56px; max-height: 45.56px; padding: 9.112px 29.614px !important; background-color: var(--jtta-red); color: var(--jtta-white); border: 0; border-radius: var(--jtta-radius-btn); font-size: 19.427px !important; font-weight: 500; /* Figma 73:761 — leading normal (not body 1.7 / Divi ::after 1.6em) */ line-height: normal !important; white-space: nowrap !important; word-break: keep-all; overflow-wrap: normal; letter-spacing: 0; overflow: hidden; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { width: 289.78px; min-width: 289.78px; max-width: none; height: 45.329px; min-height: 45.329px; max-height: 45.329px; padding: 9.112px 29.614px !important; background-color: transparent; color: var(--jtta-white); border: 0.809px solid var(--jtta-white); border-radius: var(--jtta-radius-btn); font-size: 17.808px !important; font-weight: 400; /* Figma 73:763 — leading normal */ line-height: normal !important; white-space: nowrap !important; word-break: keep-all; overflow-wrap: normal; letter-spacing: 0; overflow: hidden; } body.jtta-site #page-container .jtta-hero .et_pb_button_0_wrapper { margin-right: 13.76px !important; } body.jtta-site .jtta-hero__btn--primary.et_pb_button, body.jtta-site .jtta-hero__btn--ghost.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn.et_pb_button { transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } body.jtta-site .jtta-hero__btn--primary.et_pb_button:hover, body.jtta-site .jtta-hero__btn--primary.et_pb_button:focus, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button:hover, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button:focus { background-color: #c81e1e; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(220, 38, 38, 0.45); overflow: visible; } body.jtta-site .jtta-hero__btn--primary.et_pb_button:active, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button:active { transform: translateY(0) scale(0.97); box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3); } body.jtta-site .jtta-hero__btn--ghost.et_pb_button:hover, body.jtta-site .jtta-hero__btn--ghost.et_pb_button:focus, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button:hover, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button:focus { background-color: rgba(255, 255, 255, 0.16); color: #fff; border-color: #fff; transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); overflow: visible; } body.jtta-site .jtta-hero__btn--ghost.et_pb_button:active, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button:active { transform: translateY(0) scale(0.97); box-shadow: none; background-color: rgba(255, 255, 255, 0.22); } /* * Meta labels ABOVE the white line (Figma). * border-bottom keeps text→line order on the fixed 717px hero frame. */ body.jtta-site .jtta-hero.et_pb_section::after { content: none; display: none; } body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { display: flex; align-items: center; /* Figma 73:766 — gap 341 between the three labels */ justify-content: flex-start; gap: 341px; width: 100%; max-width: 1333px; margin-top: auto; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 10px; position: relative; z-index: 3; border-bottom: 1px solid #ffffff; box-sizing: border-box; overflow: visible; float: none; } body.jtta-site .jtta-hero__meta-row.et_pb_row::after, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row::after { content: none; display: none; } /* Kill Divi 1/3 equal columns — content-sized cells only */ body.jtta-site .jtta-hero__meta-row .et_pb_column, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-hero__meta-row .et_pb_column_1_3.et_block_column { float: none; display: flex; align-items: center; width: auto; max-width: none; min-width: 0; flex: 0 0 auto; margin: 0; padding: 0; } body.jtta-site .jtta-hero__meta.et_pb_text { margin: 0; width: auto; max-width: none; } body.jtta-site .jtta-hero__meta.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 500; font-size: 16px; line-height: normal; color: var(--jtta-white); white-space: nowrap; } /* Beat Divi critical `.et_pb_section_0 { background-color: transparent !important }`. */ body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .et-l--post > .et_builder_inner_content .et_pb_section.jtta-hero.et_pb_section_0 { margin-top: 0; background-color: var(--jtta-hero-bg) !important; background-image: none !important; background-repeat: no-repeat !important; border-top: 0 !important; box-shadow: none !important; } /* Desktop height/pad only — must not force 717px / 88px pad onto ≤1023 */ @media (min-width: 1024px) { body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .et-l--post > .et_builder_inner_content .et_pb_section.jtta-hero.et_pb_section_0 { height: var(--jtta-hero-h); min-height: var(--jtta-hero-h); padding-top: 88px; } } /* No gap / hairline between white header and hero */ body.jtta-site #main-content, body.jtta-site #main-content .container, body.jtta-site .entry-content, body.jtta-site .et-l.et-l--post, body.jtta-site .et_builder_inner_content { padding-top: 0; margin-top: 0; } body.jtta-site #main-header.jtta-header + *, body.jtta-site #et-main-area, body.jtta-site .jtta-hero.et_pb_section { margin-top: 0; border-top: 0; } /* Home — What if good marks (Figma 1440 × 393, node 73:773 / Frame 14 73:774) */ body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1 { background: var(--jtta-mist); /* Frame 14 @ x=44 y=0 h=393 — image is full section height; no vertical pad. */ padding-top: 0; padding-right: var(--jtta-section-x); padding-bottom: 0; padding-left: var(--jtta-section-x); margin: 0; height: 393px; min-height: 393px; box-sizing: border-box; overflow: hidden; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row.jtta-marks__row { display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: 1352px; height: 393px; margin-left: auto; margin-right: auto; padding: 0; float: none; overflow: visible; } body.jtta-site .jtta-marks .et_pb_column { margin-bottom: 0; padding: 0; background: transparent; } body.jtta-site .jtta-marks__copy.et_pb_column { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; width: 798px; max-width: 798px; flex: 0 0 798px; } body.jtta-site .jtta-marks__visual.et_pb_column { width: 507px; max-width: 507px; height: 393px; flex: 0 0 507px; } body.jtta-site .jtta-marks__heading.et_pb_text { margin: 0; width: 100%; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { margin: 0; padding: 0; /* Figma 73:776 — Anton 64 / lh 96.44%, box h=186 */ min-height: 186px; font-family: var(--jtta-font-display); font-weight: 400; font-size: 64px; line-height: var(--jtta-lh-display); color: #0f172a; } body.jtta-site .jtta-marks__lead.et_pb_text { max-width: 616px; width: 616px; margin: 0; } body.jtta-site .jtta-marks__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 16px; line-height: var(--jtta-lh-overline); color: #475569; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { margin: 0; width: 507px; max-width: 100%; height: 393px; overflow: hidden; border-radius: 0; line-height: 0; text-align: left; } /* Beat Divi sticky-image flex wrap so Figma crop width can exceed the frame. */ body.jtta-site .jtta-marks__image .et_pb_image_wrap { display: block; position: relative; width: 507px; height: 393px; /* Exact Figma asset 73:778 (1536×742) with 160.21% width crop. */ background-color: transparent; background-image: url("../images/what-if-good-mark-section.png"); background-repeat: no-repeat; background-position: left center; background-size: 160.21% 100%; } /* Hide Divi (wrong aspect upload); keep in DOM for alt text. */ body.jtta-site .jtta-marks__image img { position: absolute; left: 0; top: 0; display: block; width: 100%; max-width: none; height: 100%; opacity: 0; pointer-events: none; border-radius: 0; } /* Home — The future won't wait (Figma 1440 × 822, node 73:779) */ body.jtta-site .jtta-future.et_pb_section { background: var(--jtta-white); /* Inner 73:780 @ x=38.5 y=45, w=1363 h=732 → section 822 */ padding: 45px 38.5px; margin: 0; min-height: 822px; overflow: visible; } body.jtta-site .jtta-future .et_pb_row { width: 100%; max-width: 1363px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-future .et_pb_column:not(.jtta-future__card) { background: transparent; } body.jtta-site .jtta-future__kicker.et_pb_row { margin-bottom: 0; } body.jtta-site .jtta-future__overline.et_pb_text p { margin: 0 0 12px; } body.jtta-site .jtta-future__intro.et_pb_row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; overflow: visible; } body.jtta-site .jtta-future__heading-col.et_pb_column { width: 331px; max-width: 331px; margin: 0; } body.jtta-site .jtta-future__lead-col.et_pb_column { width: 530px; max-width: 530px; margin: 0 0 0 auto; } body.jtta-site .jtta-future__heading.et_pb_text, body.jtta-site .jtta-future__heading.et_pb_text h2 { margin: 0; font-family: var(--jtta-font-display); font-weight: 400; font-size: var(--jtta-fs-display); line-height: var(--jtta-lh-tight); color: var(--jtta-btn-ink); } body.jtta-site .jtta-future__heading.et_pb_text h2 span { color: var(--jtta-red-text); } body.jtta-site .jtta-future__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 18px; line-height: var(--jtta-lh-lead); color: var(--jtta-muted); } body.jtta-site .jtta-future__cards.et_pb_row { position: relative; display: flex; align-items: stretch; justify-content: center; gap: 48px; width: 100%; max-width: 1272px; margin-left: auto; margin-right: auto; overflow: visible; } body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 15px; float: none; margin: 0; width: 392px; max-width: 392px; min-height: 494px; height: 494px; border-radius: var(--jtta-radius-card); overflow: visible; } /* Keep later cards under earlier arrows so arrows sit on top of the next card */ body.jtta-site .jtta-future__cards > .jtta-future__card--learn { z-index: 3; } body.jtta-site .jtta-future__cards > .jtta-future__card--perform { z-index: 2; } body.jtta-site .jtta-future__cards > .jtta-future__card--navigate { z-index: 1; } /* Figma 73:789 / 73:796 / 73:803 — card fills (beat Divi column bg). */ body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn { background-color: #fce8e8; background-image: linear-gradient(-3.39deg, rgba(220, 38, 38, 0.05) 25.53%, rgba(220, 38, 38, 0.1) 104.44%); /* Content frame @ x41 y69 inside 392×494 (73:790). */ padding: 69px 41px; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform { background-color: #f2f5fd; background-image: linear-gradient(-1.98deg, #f2f5fd 22.77%, #e7f0ff 135.07%); /* Content frame @ x32 y64 (73:797). */ padding: 64px 32px; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate { background-color: #072359; background-image: none; /* Content frame @ x38 y52.5 (73:804). */ padding: 52.5px 38px; } body.jtta-site .jtta-future__card > .et_pb_module { margin: 0; width: auto; max-width: 100%; } body.jtta-site .jtta-future__icon.et_pb_image { margin: 0; } body.jtta-site .jtta-future__icon .et_pb_image_wrap { margin: 0; display: block; } body.jtta-site .jtta-future__icon--learn .et_pb_image_wrap, body.jtta-site .jtta-future__icon--learn img { width: 114px; height: 115px; } body.jtta-site .jtta-future__icon--perform .et_pb_image_wrap, body.jtta-site .jtta-future__icon--perform img { width: 104px; height: 125px; } body.jtta-site .jtta-future__icon--navigate .et_pb_image_wrap, body.jtta-site .jtta-future__icon--navigate img { width: 114px; height: 115px; } body.jtta-site .jtta-future__icon img { display: block; width: 100%; height: 100%; object-fit: contain; } body.jtta-site .jtta-future__label.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 700; font-size: 18px; line-height: var(--jtta-lh-overline); letter-spacing: 3.24px; text-transform: uppercase; } body.jtta-site .jtta-future__title.et_pb_text h3 { margin: 0; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 64px; line-height: var(--jtta-lh-card-title); color: var(--jtta-btn-ink); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate .jtta-future__title h3 { color: #ffffff; } body.jtta-site .jtta-future__title.et_pb_text h3::after { content: ""; display: block; width: 66px; height: 4px; margin-top: 15px; border-radius: 29px; background: var(--jtta-red-text); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform .jtta-future__title h3::after, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate .jtta-future__title h3::after { background: var(--jtta-blue); } body.jtta-site .jtta-future__body.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 600; font-size: 20px; line-height: var(--jtta-lh-lead); color: var(--jtta-muted); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate .jtta-future__body p { color: #ffffff; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn .jtta-future__label p { color: var(--jtta-red-text); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform .jtta-future__label p { color: var(--jtta-blue); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate .jtta-future__label p { color: var(--jtta-blue-soft); } /* Figma 73:810 / 73:811 — 83×91 @ y=201.5, sit ON TOP of neighboring cards */ body.jtta-site .jtta-future__arrow.et_pb_image { display: none !important; } body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { content: ""; position: absolute; z-index: 10; top: 201.5px; width: 83px; height: 91px; margin: 0; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); pointer-events: none; } /* 73:810 @ x=375 on learn (0–392) → right: -66 */ body.jtta-site .jtta-future__card--learn::after { right: -66px; background-image: url("../images/jtta-future-arrow-red.png"); } /* 73:811 @ x=810 on perform (440–832) → right: -61 */ body.jtta-site .jtta-future__card--perform::after { right: -61px; background-image: url("../images/jtta-future-arrow-blue.png"); } /* Home — THE GAP / School vs Future (Figma 1440 × 1035) */ body.jtta-site .jtta-gap.et_pb_section { background: var(--jtta-white); /* Inner 73:1011 @ y=22, h=991 */ padding: 22px 0; margin: 0; /* Fixed 1035 only at ≥1440 — below that banner scales down and leaves a white void */ min-height: 0; height: auto; } body.jtta-site .jtta-gap__intro.et_pb_row { width: 100%; max-width: none; box-sizing: border-box; margin: 0 auto 51px; padding: 0 44px; } body.jtta-site .jtta-gap__heading-col.et_pb_column { max-width: 626px; } body.jtta-site .jtta-gap__lead-col.et_pb_column { max-width: 403px; margin-left: auto; } body.jtta-site .jtta-gap__banner.et_pb_row { width: 100%; max-width: 100%; margin: 0; padding: 0; } body.jtta-site .jtta-gap__banner .et_pb_column { padding: 0; margin: 0; width: 100%; } body.jtta-site .jtta-gap__image.et_pb_image, body.jtta-site .jtta-gap__image .et_pb_image_wrap { margin: 0; width: 100%; position: relative; overflow: hidden; aspect-ratio: 1440 / 654; } /* * Media Library banner already matches 1440/654 (Figma frame). * Do not re-apply Figma source crop (−5.36% / 104.36%) — that was for * the narrower Figma export (1536×728) and shifts SCHOOL / THE FUTURE. */ body.jtta-site .jtta-gap__image img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; } /* Dual Divi assets — desktop SoT hides mobile module */ body.jtta-site .jtta-gap__image--mobile.et_pb_image, body.jtta-site .jtta-gap__image--mobile.et_pb_image .et_pb_image_wrap { display: none; } /* Home — Why JTTA exists (Figma 1440 × 458, node 73:1018) */ body.jtta-site .jtta-exists.et_pb_section { background: var(--jtta-white); padding: var(--jtta-section-y) var(--jtta-section-x); margin: 0; min-height: 458px; } body.jtta-site .jtta-exists__row.et_pb_row { display: flex; align-items: center; justify-content: center; gap: 133px; width: 100%; max-width: 1352px; margin: 0 auto; padding: 0; } body.jtta-site .jtta-exists__row .et_pb_column { margin: 0; padding: 0; background: transparent; } body.jtta-site .jtta-exists__visual.et_pb_column { width: 604px; max-width: 604px; } body.jtta-site .jtta-exists__copy.et_pb_column { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 615px; max-width: 615px; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { margin: 0; width: 604px; max-width: 100%; height: 402px; position: relative; overflow: hidden; border-radius: var(--jtta-radius-photo); } /* Figma 73:1020 crop: w 108.95% h 108.96% left -3.81% top -8.96% */ body.jtta-site .jtta-exists__image img { display: block; position: absolute; left: -3.81%; top: -8.96%; width: 108.95%; height: 108.96%; max-width: none; object-fit: cover; object-position: center; border-radius: 0; } body.jtta-site .jtta-exists__heading.et_pb_text { width: 100%; max-width: 614px; margin: 0; } body.jtta-site .jtta-exists__heading.et_pb_text h2 { margin: 0 0 14px; max-width: 614px; text-align: right; } body.jtta-site .jtta-exists__lead.et_pb_text { width: 100%; max-width: 579px; margin: 0; } body.jtta-site .jtta-exists__lead.et_pb_text p { max-width: 579px; margin: 0; } /* Home — Four Dimensions / Future Ready (Figma 1440 × 478) */ body.jtta-site .jtta-dims.et_pb_section { background: var(--jtta-white); /* Inner 73:1025 @ y=22 h=392 → bottom 64 */ padding: 22px var(--jtta-section-x) 64px; margin: 0; min-height: 478px; } body.jtta-site .jtta-dims .et_pb_row { width: 100%; max-width: 1363px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-dims__head.et_pb_row { margin-bottom: 40px; } body.jtta-site .jtta-dims__overline.et_pb_text p { margin: 0 0 6px; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 16px; line-height: var(--jtta-lh-overline); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: var(--jtta-muted); } body.jtta-site .jtta-dims__heading.et_pb_text h2 { margin: 0 auto; max-width: 590px; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 28px; line-height: var(--jtta-lh-overline); text-align: center; color: var(--jtta-navy-deep); } body.jtta-site .jtta-dims__heading.et_pb_text h2 span { color: var(--jtta-red-text); } body.jtta-site .jtta-dims__image.et_pb_image, body.jtta-site .jtta-dims__image .et_pb_image_wrap { display: block; margin: 0; width: 100%; height: auto; } body.jtta-site .jtta-dims__image img { display: block; width: 100%; height: auto; aspect-ratio: 1363 / 294; object-fit: contain; object-position: center; } @media (max-width: 1199px) { body.jtta-site .jtta-hero.et_pb_section { min-height: var(--jtta-hero-h); height: var(--jtta-hero-h); padding: 72px var(--jtta-section-x) 24px; } body.jtta-site .jtta-hero__meta-row.et_pb_row { margin-top: auto; } /* 1024 — hero buttons: content width (padding + text), not fixed Figma desktop px */ body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: none; height: auto; min-height: 40px; max-height: none; padding: 9px 22px; white-space: nowrap; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button { font-size: 16px; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { font-size: 15px; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-future__cards.et_pb_row { flex-wrap: wrap; gap: 24px; } body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .jtta-marks.et_block_section.et_pb_section { height: auto; min-height: 0; padding: 32px var(--jtta-section-x); overflow: visible; } body.jtta-site .jtta-marks .et_pb_row { height: auto; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks__visual.et_pb_column { width: 100%; max-width: 100%; height: auto; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { min-height: 0; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; max-width: 507px; height: auto; aspect-ratio: 507 / 393; margin-left: auto; margin-right: auto; background-image: url("../images/what-if-good-mark-section.png"); background-repeat: no-repeat; background-position: left center; background-size: 160.21% 100%; } body.jtta-site .jtta-marks__image img { width: 100%; height: 100%; opacity: 0; pointer-events: none; } body.jtta-site .jtta-future__cards > .et_pb_column { width: calc(50% - 12px); max-width: none; } body.jtta-site .jtta-future__arrow, body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { display: none; } } @media (max-width: 980px) { /* Hero Figma mobile/tablet layout lives in ≤1023 / 768 / ≤767 — don't fight it here */ body.jtta-site .jtta-hero__copy-row.et_pb_row { max-width: 100%; } body.jtta-site .jtta-hero__btn--primary.et_pb_button, body.jtta-site .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: 100%; white-space: nowrap; } body.jtta-site .jtta-hero__meta-row.et_pb_row { margin-top: auto; } body.jtta-site .jtta-hero__meta-row .et_pb_column { margin-bottom: 10px; width: 100%; } body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .jtta-marks.et_block_section.et_pb_section, body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-dims.et_pb_section { padding: 40px var(--jtta-section-x); height: auto; min-height: 0; } body.jtta-site .jtta-gap.et_pb_section { padding: 40px 0 0; } body.jtta-site .jtta-gap__intro.et_pb_row { padding: 0 20px; margin-bottom: 28px; } body.jtta-site .jtta-gap__heading-col.et_pb_column, body.jtta-site .jtta-gap__lead-col.et_pb_column, body.jtta-site .jtta-exists__visual.et_pb_column, body.jtta-site .jtta-exists__copy.et_pb_column, body.jtta-site .jtta-future__heading-col.et_pb_column, body.jtta-site .jtta-future__lead-col.et_pb_column { width: 100%; max-width: 100%; margin-left: 0; margin-bottom: 16px; } body.jtta-site .jtta-exists__row.et_pb_row { flex-direction: column; gap: 28px; } body.jtta-site .jtta-exists__heading.et_pb_text h2 { text-align: left; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { width: 100%; height: auto; max-height: 360px; position: relative; overflow: hidden; } body.jtta-site .jtta-exists__image img { position: static; left: auto; top: auto; width: 100%; height: auto; max-height: 360px; object-fit: cover; } /* Figma mobile 162:247 — 421×673 School vs Future (side-by-side art) */ body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row { width: 100%; max-width: 100%; margin: 0; padding: 0; } body.jtta-site .jtta-gap__image.et_pb_image, body.jtta-site .jtta-gap__image .et_pb_image_wrap { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 421 / 673; overflow: hidden; position: relative; } body.jtta-site .jtta-gap__image .et_pb_image_wrap { background-color: transparent; background-image: none; } /* Use Divi `--mobile` module; hide desktop art (beat .jtta-gap__image.et_pb_image display:block) */ body.jtta-site .jtta-gap__image--desktop.et_pb_image, body.jtta-site .jtta-gap__image--desktop.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-gap__image--mobile.et_pb_image, body.jtta-site .jtta-gap__image--mobile.et_pb_image .et_pb_image_wrap { display: block; } body.jtta-site .jtta-gap__image img { opacity: 1; position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; max-width: 507px; height: auto; aspect-ratio: 507 / 393; max-height: none; margin-left: auto; margin-right: auto; background-image: url("../images/what-if-good-mark-section.png"); background-repeat: no-repeat; background-position: left center; background-size: 160.21% 100%; } body.jtta-site .jtta-marks__image img { width: 100%; max-width: none; height: 100%; max-height: none; opacity: 0; pointer-events: none; } body.jtta-site .jtta-future__cards > .et_pb_column { width: 100%; max-width: 392px; margin-left: auto; margin-right: auto; } } @media (max-width: 480px) { body.jtta-site .jtta-dims__heading.et_pb_text h2 { font-size: 22px; } /* Keep Figma content-width buttons — do not stretch to 100% */ body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { display: flex; justify-content: center; width: auto; margin: 12px 0 0; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left: 0; } } /* ------------------------------------------------------------------------- Mobile Hero — Figma 142:98 / Frame 148 (154:69), 421 × 866 Art: Divi `.jtta-hero__bg--mobile` (Media Library). Desktop unchanged. ------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* Figma 154:69 — 421 × 865.55, px-20 py-12, copy↔meta gap ~464 via flex push */ body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .jtta-hero.et_block_section.et_pb_section { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 421 / 865.55; padding: 16px 20px 12px; margin: 0; /* overflow:hidden clips Anton ascenders on “Future Readiness” — clip X only */ overflow-x: hidden; overflow-y: visible; background-color: var(--jtta-hero-bg); background-image: none; } /* Exact mobile hero art — Divi `.jtta-hero__bg--mobile` module */ body.jtta-site .jtta-hero.et_pb_section::before { content: none; display: none; } body.jtta-site .jtta-hero__bg--desktop, body.jtta-site .jtta-hero__bg--desktop.et_pb_image, body.jtta-site .jtta-hero__bg--desktop.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-hero__bg--mobile, body.jtta-site .jtta-hero__bg--mobile.et_pb_image { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; height: 100%; margin: 0; pointer-events: none; } body.jtta-site .jtta-hero__bg--mobile .et_pb_image_wrap, body.jtta-site .jtta-hero__bg--mobile img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; } body.jtta-site .jtta-hero__bg--mobile img { object-fit: cover; object-position: center top; } body.jtta-site .jtta-hero.et_pb_section > .et_pb_row { position: relative; z-index: 1; } /* Figma mobile has no scroll cue. */ body.jtta-site .jtta-hero__scroll-row.et_pb_row, body.jtta-site .jtta-hero__scroll-row.et_block_row.et_pb_row { display: none; } /* Figma line under meta labels (text above line) via border-bottom */ body.jtta-site .jtta-hero.et_pb_section::after { content: none; display: none; } body.jtta-site .jtta-hero__meta-row.et_pb_row::after, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row::after { content: none; display: none; } body.jtta-site .jtta-hero .et_pb_row { width: 100%; max-width: 380px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0 auto; padding: 0; } body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; margin: 0; float: none; } body.jtta-site .jtta-hero__heading.et_pb_text { width: 100%; max-width: 100%; margin: 0; text-align: center; flex: 0 0 auto; } body.jtta-site .jtta-hero__lead.et_pb_text { width: 100%; max-width: 277px; margin: 0; text-align: center; flex: 0 0 auto; } /* Figma — “Future Readiness” / “Academy” (Future red, inline; keep
) */ body.jtta-site .jtta-hero__heading.et_pb_text h1 span { display: inline; font-size: 36px; line-height: var(--jtta-lh-display); color: #dc2626; } body.jtta-site .jtta-hero__heading.et_pb_text h1 br { display: block; content: ""; } body.jtta-site .jtta-hero__heading.et_pb_text h1 { margin: 0; font-size: 36px; line-height: 1.05; text-align: center; color: #ffffff; word-break: normal; overflow-wrap: normal; hyphens: none; padding-top: 2px; } body.jtta-site .jtta-hero__lead.et_pb_text { margin-top: 13px; } body.jtta-site .jtta-hero__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 12px; line-height: normal; color: #ffffff; text-align: center; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { display: flex; justify-content: center; width: 100%; max-width: 277px; margin: 13px 0 0; float: none; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin: 9px 0 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 35px; max-height: none; padding: 8px 22px !important; white-space: nowrap !important; overflow: visible; line-height: normal !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button { border-radius: 7px; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 14px !important; background-color: #e63946; color: #ffffff; border-width: 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { border-radius: 9px; font-family: var(--jtta-font-nav); font-weight: 400; font-size: 14px !important; background-color: transparent; color: #ffffff; border-width: 0.809px; border-style: solid; border-color: #ffffff; } body.jtta-site #page-container .jtta-hero .et_pb_button_0_wrapper { margin-right: 0; } /* Meta is painted into hero-banner-image-mobile.png — hide HTML duplicate */ body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { display: none; } body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: 100%; max-width: 243px; margin: 0 auto; } body.jtta-site .jtta-hero__meta.et_pb_text { width: 100%; max-width: 243px; margin: 0 auto; text-align: center; } body.jtta-site .jtta-hero__meta.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 500; font-size: 14px; line-height: normal; color: #ffffff; text-align: center; white-space: normal; } } /* ------------------------------------------------------------------------- Home — What if good marks (Figma mobile 158:97 — 421 × 467) ------------------------------------------------------------------------- */ @media (max-width: 1023px) { body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: auto; min-height: 0; /* Figma 158:97 — pt-12 px-20 */ padding: 12px 20px 0; margin: 0; overflow: visible; background: var(--jtta-mist); } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row.jtta-marks__row { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; max-width: 375px; height: auto; margin: 0 auto; padding: 0; float: none; overflow: visible; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 13px; float: none; width: 100%; max-width: 375px; flex: 0 0 auto; margin: 0; padding: 0; text-align: center; } body.jtta-site .jtta-marks__visual.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column { float: none; width: 352px; max-width: 352px; height: 273px; flex: 0 0 352px; margin: 0 auto; padding: 0; } body.jtta-site .jtta-marks__heading.et_pb_text { width: 100%; max-width: 367px; margin: 0; text-align: center; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { margin: 0; padding: 0; min-height: 0; font-family: var(--jtta-font-display); font-weight: 400; font-size: 36px; line-height: var(--jtta-lh-display); text-align: center; color: #0f172a; } body.jtta-site .jtta-marks__lead.et_pb_text { width: 100%; max-width: 375px; margin: 0; text-align: center; } body.jtta-site .jtta-marks__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 12px; line-height: normal; text-align: center; color: #475569; } /* Figma 158:86 — 352 × 273 frame, 160.21% width crop */ body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { display: block; position: relative; width: 352px; max-width: 352px; height: 273px; aspect-ratio: auto; max-height: none; margin: 0 auto; overflow: hidden; line-height: 0; background-color: transparent; background-image: url("../images/what-if-good-mark-section.png"); background-repeat: no-repeat; background-position: left center; background-size: 160.21% 100%; } body.jtta-site .jtta-marks__image img { position: absolute; left: 0; top: 0; display: block; width: 100%; max-width: none; height: 100%; max-height: none; opacity: 0; pointer-events: none; } } /* ------------------------------------------------------------------------- Home — The future won't wait (Figma mobile 159:219 — 421 × 973) ------------------------------------------------------------------------- */ @media (max-width: 1023px) { body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: auto; min-height: 0; /* Frame 155 @ x22 y40.4 inside 421×973 */ padding: 40px 22px; margin: 0; overflow: visible; background: var(--jtta-white); } body.jtta-site .jtta-future .et_pb_row, body.jtta-site .jtta-future .et_block_row.et_pb_row { width: 100%; max-width: 377px; margin-left: auto; margin-right: auto; padding: 0; float: none; } body.jtta-site .jtta-future__kicker.et_pb_row, body.jtta-site .jtta-future__kicker.et_block_row.et_pb_row { margin: 0 0 7px; } body.jtta-site .jtta-future__overline.et_pb_text { width: 100%; margin: 0; text-align: left; } body.jtta-site .jtta-future__overline.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 12px; line-height: var(--jtta-lh-overline); text-transform: uppercase; color: var(--jtta-red-text); text-align: left; } body.jtta-site .jtta-future__intro.et_pb_row, body.jtta-site .jtta-future__intro.et_block_row.et_pb_row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 13px; margin: 0 0 28px; overflow: visible; } body.jtta-site .jtta-future__heading-col.et_pb_column, body.jtta-site .jtta-future__lead-col.et_pb_column, body.jtta-site .jtta-future__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__heading-col.et_pb_column_1_2.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__lead-col.et_pb_column_1_2.et_block_column { float: none; width: 100%; max-width: 377px; flex: 0 0 auto; margin: 0; padding: 0; } body.jtta-site .jtta-future__heading.et_pb_text, body.jtta-site .jtta-future__heading.et_pb_text h2 { margin: 0; max-width: 367px; font-family: var(--jtta-font-display); font-weight: 400; font-size: 36px; line-height: var(--jtta-lh-display); color: #0f172a; text-align: left; } body.jtta-site .jtta-future__heading.et_pb_text h2 span { color: var(--jtta-red-text); } body.jtta-site .jtta-future__lead.et_pb_text { width: 100%; max-width: 377px; margin: 0; } body.jtta-site .jtta-future__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 12px; line-height: normal; color: #475569; text-align: left; } body.jtta-site .jtta-future__cards.et_pb_row, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 34px; width: 100%; max-width: 377px; margin: 0 auto; padding: 0; overflow: visible; } body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 36px; row-gap: 10.14px; align-items: center; justify-items: start; float: none; flex: 0 0 auto; width: 375px; max-width: 375px; min-height: 0; height: auto; margin: 0; overflow: visible; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--learn.et_block_column { min-height: 198.125px; padding: 30px 18px; border-radius: 25.013px; background-color: #fce8e8; background-image: linear-gradient(-1.424deg, rgba(220, 38, 38, 0.05) 25.53%, rgba(220, 38, 38, 0.1) 104.44%); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--perform.et_block_column { min-height: 205.125px; padding: 19px 18px; border-radius: 37px; background-color: #f2f5fd; background-image: linear-gradient(-0.86deg, #f2f5fd 22.77%, #e7f0ff 135.07%); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--navigate.et_block_column { min-height: 205.125px; padding: 19px 18px; border-radius: 37px; background-color: #072359; background-image: none; } body.jtta-site .jtta-future__card > .et_pb_module { margin: 0; max-width: 100%; } body.jtta-site .jtta-future__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 3; align-self: center; justify-self: center; margin: 0; } body.jtta-site .jtta-future__label.et_pb_text { grid-column: 2; grid-row: 1; width: 100%; max-width: 209.566px; } body.jtta-site .jtta-future__title.et_pb_text { grid-column: 2; grid-row: 2; width: 100%; max-width: 209.566px; } body.jtta-site .jtta-future__body.et_pb_text { grid-column: 2; grid-row: 3; width: 100%; max-width: 209.566px; } body.jtta-site .jtta-future__icon--learn .et_pb_image_wrap, body.jtta-site .jtta-future__icon--learn img { width: 93px; height: 94px; } body.jtta-site .jtta-future__icon--perform .et_pb_image_wrap, body.jtta-site .jtta-future__icon--perform img { width: 77px; height: 93px; } body.jtta-site .jtta-future__icon--navigate .et_pb_image_wrap, body.jtta-site .jtta-future__icon--navigate img { width: 75px; height: 75px; } body.jtta-site .jtta-future__label.et_pb_text p { font-size: 12.168px; line-height: var(--jtta-lh-overline); letter-spacing: 2.1903px; } body.jtta-site .jtta-future__title.et_pb_text h3 { font-size: 36px; line-height: var(--jtta-lh-card-title); } body.jtta-site .jtta-future__title.et_pb_text h3::after { width: 44.617px; height: 2.704px; margin-top: 10.14px; border-radius: 19.605px; } body.jtta-site .jtta-future__body.et_pb_text p { font-size: 12px; line-height: var(--jtta-lh-lead); } /* Figma mobile connectors — rotate desktop side arrows downward */ body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { content: ""; display: block; visibility: visible; opacity: 1; top: auto; right: auto; bottom: -51px; left: 50%; width: 65px; height: 68px; margin: 0; transform: translateX(-50%) rotate(90deg); filter: drop-shadow(0 3.158px 3.158px rgba(0, 0, 0, 0.25)); } body.jtta-site .jtta-future__card--perform::after { width: 68px; height: 67px; filter: drop-shadow(0 3.289px 3.289px rgba(0, 0, 0, 0.25)); } body.jtta-site .jtta-future__cards > .jtta-future__card--learn { z-index: 3; } body.jtta-site .jtta-future__cards > .jtta-future__card--perform { z-index: 2; } body.jtta-site .jtta-future__cards > .jtta-future__card--navigate { z-index: 1; } } /* ------------------------------------------------------------------------- Home — THE GAP / School prepares (Figma mobile 162:254 — 420 × 968) ------------------------------------------------------------------------- */ @media (max-width: 1023px) { body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; min-height: 0; /* Intro padded; banner full-bleed via negative margin */ padding: 16px 20px 0; margin: 0; overflow: visible; background: var(--jtta-white); } body.jtta-site .jtta-gap__intro.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 13px; width: 100%; max-width: 100%; margin: 0 0 14px; padding: 0; float: none; overflow: visible; } body.jtta-site .jtta-gap__heading-col.et_pb_column, body.jtta-site .jtta-gap__lead-col.et_pb_column, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; flex: 0 0 auto; margin: 0; padding: 0; } body.jtta-site .jtta-gap__heading-col.et_pb_column { gap: 7px; } body.jtta-site .jtta-gap__overline.et_pb_text { width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-gap__overline.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 12px; line-height: var(--jtta-lh-overline); text-transform: uppercase; color: var(--jtta-red-text); text-align: left; } body.jtta-site .jtta-gap__heading.et_pb_text { width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-gap__heading.et_pb_text h2 { margin: 0; font-family: var(--jtta-font-display); font-weight: 400; font-size: 36px; line-height: var(--jtta-lh-display); color: #0f172a; text-align: left; } body.jtta-site .jtta-gap__lead.et_pb_text { width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-gap__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 12px; line-height: normal; color: #475569; text-align: left; } body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row { width: calc(100% + 40px); max-width: none; margin: 0 -20px; padding: 0; } body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Figma 162:247 — 421 × 673 full-bleed mobile art */ body.jtta-site .jtta-gap__image.et_pb_image, body.jtta-site .jtta-gap__image .et_pb_image_wrap { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 421 / 673; margin: 0; overflow: hidden; position: relative; } body.jtta-site .jtta-gap__image .et_pb_image_wrap { background-color: transparent; background-image: none; } body.jtta-site .jtta-gap__image--desktop.et_pb_image, body.jtta-site .jtta-gap__image--desktop.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-gap__image--mobile.et_pb_image, body.jtta-site .jtta-gap__image--mobile.et_pb_image .et_pb_image_wrap { display: block; } body.jtta-site .jtta-gap__image--mobile.et_pb_image img { opacity: 1; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } } /* ------------------------------------------------------------------------- Home — THE JTTA WAY (Figma 1440 × 619) ------------------------------------------------------------------------- */ body.jtta-site .jtta-way.et_pb_section { background: var(--jtta-white); padding: var(--jtta-section-y) var(--jtta-section-x); margin: 0; min-height: 619px; overflow: visible; } body.jtta-site .jtta-way .et_pb_row { width: 100%; max-width: 1363px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-way__heading.et_pb_text h2 span { color: var(--jtta-red-text); } body.jtta-site .jtta-way__intro.et_pb_row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; } body.jtta-site .jtta-way__heading-col.et_pb_column { max-width: 626px; } body.jtta-site .jtta-way__lead-col.et_pb_column { display: flex; align-items: center; gap: 31px; max-width: 504px; margin-left: auto; } body.jtta-site .jtta-way__rocket.et_pb_image, body.jtta-site .jtta-way__rocket .et_pb_image_wrap { margin: 0; width: 105px; height: 109px; flex: 0 0 105px; } body.jtta-site .jtta-way__rocket img { display: block; width: 105px; height: 109px; object-fit: contain; } body.jtta-site .jtta-way__lead.et_pb_text { max-width: 368px; } body.jtta-site .jtta-way__lead.et_pb_text p { font-family: var(--jtta-font-body); } body.jtta-site .jtta-way__steps.et_pb_row { position: relative; display: flex; align-items: stretch; justify-content: flex-start; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; overflow: visible; padding-bottom: 0; } /* Figma 73:850 Line 7 — first arrow → last arrow (must reach 4th) */ body.jtta-site .jtta-way__steps::before { content: ""; position: absolute; z-index: 6; /* * Start @ 245 (user). End @ last arrow center (1061 + 17 = 1078). * width 833 so line reaches the 4th arrow (810 was stopping at 3rd). */ left: 245px; width: 833px; max-width: none; right: auto; /* Arrow layer bottom 27 + h/2 18 = 45; line h 2 → bottom 44 centers on arrow */ bottom: 44px; top: auto; height: 2px; background: #082248; pointer-events: none; } /* * Figma 73:848 / 853 / 851 / 826 — red circle arrows ON TOP of the connector line. * Must live on the row (not card ::after): card stacking contexts sit under the line. * Beat Divi .et_block_row:after clearfix (visibility:hidden). * Arrow layer width is only for positioning — it does NOT draw/extend the line. */ body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { content: ""; position: absolute; z-index: 10; left: 0; right: 26px; /* Line center @ bottom 45px; arrow h 36 → bottom 27 centers on line thickness */ bottom: 27px; width: auto; max-width: none; height: 36px; margin: 0; padding: 0; display: block; visibility: visible; clear: none; line-height: 0; pointer-events: none; background-color: transparent; background-image: url("../images/jtta-way-step-arrow.svg"), url("../images/jtta-way-step-arrow.svg"), url("../images/jtta-way-step-arrow.svg"), url("../images/jtta-way-step-arrow.svg"); background-repeat: no-repeat; background-size: 34px 36px; /* * Between cards (overlap mid − 17): seams mid 259.5 / 535.5 / 810 / 1078 * + right:26 shrink keeps layer inset; positions from left edge of row */ background-position: 243px 0, 519px 0, 793px 0, 1061px 0; } body.jtta-site .jtta-way__steps > .et_pb_column { position: relative; z-index: 1; float: none; margin: 0; min-height: 317px; overflow: visible; border-radius: 15px; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(2) { z-index: 2; margin-left: -27px; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(3) { z-index: 3; margin-left: -23px; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(4) { z-index: 4; margin-left: -30px; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(5) { z-index: 5; margin-left: -36px; } body.jtta-site .jtta-way__step--experience { width: 273px; max-width: 273px; flex: 0 0 273px; background: #082248; /* Extra bottom pad so note stays above connector line + arrows */ padding: 28px 22px 56px 33px; } /* Figma card starts: 0, 246, 524, 795, 1060 — widths locked; overlaps via nth margins above */ body.jtta-site .jtta-way__step:not(.jtta-way__step--experience) { width: 301px; max-width: 301px; flex: 0 0 301px; background: var(--jtta-white); border: 1px solid #e1e4e9; padding: 28px 24px 56px 48px; } body.jtta-site .jtta-way__num.et_pb_text p { margin: 0; font-family: var(--jtta-font-display); font-size: 32px; line-height: var(--jtta-lh-body); color: var(--jtta-slate); } body.jtta-site .jtta-way__step--experience .jtta-way__num p { color: var(--jtta-red-text); } body.jtta-site .jtta-way__icon.et_pb_image { margin: 12px 0 18px; } /* Figma 73:847 — Experience icon @ x10 (text column @ x33) */ body.jtta-site .jtta-way__step--experience .jtta-way__icon.et_pb_image { margin-left: -23px; } body.jtta-site .jtta-way__icon .et_pb_image_wrap { margin: 0; } body.jtta-site .jtta-way__icon--experience .et_pb_image_wrap, body.jtta-site .jtta-way__icon--experience img { width: 102px; height: 101px; } body.jtta-site .jtta-way__icon--discover .et_pb_image_wrap, body.jtta-site .jtta-way__icon--discover img { width: 78px; height: 88px; } body.jtta-site .jtta-way__icon--apply .et_pb_image_wrap, body.jtta-site .jtta-way__icon--apply img { width: 90px; height: 87px; } body.jtta-site .jtta-way__icon--reflect .et_pb_image_wrap, body.jtta-site .jtta-way__icon--reflect img { width: 78px; height: 87px; } body.jtta-site .jtta-way__icon--grow .et_pb_image_wrap, body.jtta-site .jtta-way__icon--grow img { width: 91px; height: 98px; } body.jtta-site .jtta-way__icon img { display: block; width: 100%; height: 100%; object-fit: contain; } body.jtta-site .jtta-way__title.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 600; font-size: 32px; line-height: var(--jtta-lh-body); color: var(--jtta-navy); } body.jtta-site .jtta-way__step--experience .jtta-way__title p { color: var(--jtta-white); } /* Figma notes are single-line (Apply @ 285px) — keep above the connector */ body.jtta-site .jtta-way__note.et_pb_text { overflow: visible; position: relative; z-index: 11; } body.jtta-site .jtta-way__note.et_pb_text p { margin: 6px 0 0; font-family: var(--jtta-font-body); font-size: 18px; line-height: var(--jtta-lh-body); color: var(--jtta-navy); white-space: nowrap; } body.jtta-site .jtta-way__step--experience .jtta-way__note p { color: var(--jtta-white); } /* Hide Divi arrow modules — drawn via .jtta-way__steps::after above the line */ body.jtta-site .jtta-way__arrow.et_pb_image { display: none !important; } /* Remove old card ::after arrows (they sat under the line due to stacking) */ body.jtta-site .jtta-way__steps > .et_pb_column:not(:last-child)::after, body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(1)::after, body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(2)::after, body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(3)::after, body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(4)::after { content: none; display: none; } /* Home — Inside JTTA / 120 minutes (Figma 1440 × 448) */ body.jtta-site .jtta-inside.et_pb_section { background: var(--jtta-white); /* Frame 51 @ x=44 y=22 h=402 → top 22 / bottom 24 */ padding: 22px var(--jtta-section-x) 24px; margin: 0; min-height: 448px; } body.jtta-site .jtta-inside .et_pb_row { width: 100%; max-width: 1364px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-inside__intro.et_pb_row { margin-bottom: 41px; } body.jtta-site .jtta-inside__heading-col.et_pb_column { max-width: 626px; } body.jtta-site .jtta-inside__lead-col.et_pb_column { max-width: 392px; margin-left: auto; } body.jtta-site .jtta-inside__track.et_pb_row { position: relative; padding-top: 0; } /* * Figma 73:885 Group 2 — markers are red DOTS (Frame 37 ≈14.4×15), not arrows. * Horizontal positions match Figma Frame 49 centers (not equal flex columns). */ body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { position: relative; display: block; width: 100%; max-width: 1362px; height: 100px; min-height: 100px; margin: 0; padding: 0; float: none; } /* Line sits under the red dots (dots above the line) */ body.jtta-site .jtta-inside__track::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; /* phase ~39 + gap 13 + dot 15 — line under dots */ top: 47px; height: 1px; background: #000; pointer-events: none; } body.jtta-site .jtta-inside__item.et_pb_text, body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; flex: none; width: max-content; max-width: none; min-width: 0; margin: 0; text-align: center; transform: translateX(-50%); } /* Dot centers / 1362 — Figma 57, 261, 465, 669, 873, 1083, 1300 */ body.jtta-site .jtta-inside__item.et_pb_text:nth-child(1) { left: 4.185%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(2) { left: 19.163%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(3) { left: 34.141%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(4) { left: 49.119%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(5) { left: 64.097%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(6) { left: 79.515%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(7) { left: 95.448%; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner { display: flex; flex-direction: column; align-items: center; width: 100%; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p { margin: 0; padding: 0; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase { margin: 0 0 13px; padding: 0; width: 100%; font-family: var(--jtta-font-ui); font-weight: 500; font-size: 28px; line-height: var(--jtta-lh-body); color: var(--jtta-navy); text-align: center; white-space: nowrap; } /* Neutralize Divi

padding around the marker so the dot sits on the line */ body.jtta-site .jtta-inside__item.et_pb_text p:has(.jtta-inside__dot) { margin: 0; padding: 0; line-height: 0; } /* Figma 73:897 — 14.444 × 15, #dc2626, radius 7.222 (above the line) */ body.jtta-site .jtta-inside__dot { display: block; position: relative; z-index: 1; width: 14.444px; height: 15px; margin: 0 auto 13px; background: var(--jtta-red-text); border-radius: 7.222px; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__time { margin: 0; padding: 0; width: 100%; font-family: var(--jtta-font-ui); font-weight: 400; font-size: 18px; line-height: var(--jtta-lh-body); color: var(--jtta-btn-ink); text-align: center; white-space: nowrap; } /* Home — Young Passion Discovery (Figma 1440 × 874) */ body.jtta-site .jtta-journey.et_pb_section { background: var(--jtta-white); /* Inner 73:967 @ y=22 h=818 */ padding: 22px var(--jtta-section-x) 34px; margin: 0; min-height: 874px; } body.jtta-site .jtta-journey .et_pb_row { width: 100%; max-width: 1360px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-journey__kicker.et_pb_text p { margin: 0 0 12px; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 16px; line-height: var(--jtta-lh-overline); color: var(--jtta-muted); } body.jtta-site .jtta-journey__kicker.et_pb_text p span { color: var(--jtta-red-text); } body.jtta-site .jtta-journey__intro.et_pb_row { margin-bottom: 55px; } body.jtta-site .jtta-journey__heading-col.et_pb_column { max-width: 626px; } body.jtta-site .jtta-journey__lead-col.et_pb_column { max-width: 406px; margin-left: auto; } body.jtta-site .jtta-journey__cards.et_pb_row, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row { display: flex; align-items: stretch; justify-content: space-between; gap: 75px; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; } body.jtta-site .jtta-journey__card.et_pb_column { position: relative; float: none; box-sizing: border-box; width: 403px; max-width: 403px; height: 558px; margin: 0; padding: 0; overflow: hidden; isolation: isolate; background: var(--jtta-white); border: 1px solid rgba(0, 0, 0, 0.49); border-radius: 58px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } /* * Aarambh/Lakshya/Unnati PNGs have baked transparent rounded corners * (~225px on 1616px ≈ 13.9%). White card shows through top L/R. * Enlarge img inside clipped wrap so opaque pixels fill the card edge. */ body.jtta-site .jtta-journey__photo.et_pb_image, body.jtta-site .jtta-journey__photo.et_pb_image.et_flex_module, body.jtta-site .jtta-journey__photo.et_pb_image_sticky { display: block; position: relative; margin: 0; padding: 0; width: 100%; max-width: 100%; height: 369px; line-height: 0; overflow: hidden; border-radius: 0; } /* Beat Divi inline-block / fit-content — fill module, clip enlarged img */ body.jtta-site .jtta-journey__photo.et_pb_image > .et_pb_image_wrap, body.jtta-site .jtta-journey__photo.et_flex_module > .et_pb_image_wrap { display: block; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; padding: 0; overflow: hidden; border-radius: 0; line-height: 0; } body.jtta-site .jtta-journey__photo.et_pb_image img, body.jtta-site .jtta-journey__photo .et_pb_image_wrap img { display: block; position: absolute; left: 50%; top: 50%; width: 128%; max-width: none; height: 128%; margin: 0; padding: 0; border-radius: 0; object-fit: cover; object-position: center center; transform: translate(-50%, -50%); } body.jtta-site .jtta-journey__copy { position: relative; padding: 8px 37px 16px; } body.jtta-site .jtta-journey__name.et_pb_text, body.jtta-site .jtta-journey__meta.et_pb_text, body.jtta-site .jtta-journey__tag.et_pb_text { padding-left: 37px; padding-right: 74px; } body.jtta-site .jtta-journey__name.et_pb_text h3 { margin: 14px 0 0; font-family: var(--jtta-font-display); font-weight: 400; font-size: var(--jtta-fs-display); line-height: var(--jtta-lh-tight); color: var(--jtta-btn-ink); } body.jtta-site .jtta-journey__meta.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 700; font-size: 18px; line-height: var(--jtta-lh-body); color: #1e293b; } body.jtta-site .jtta-journey__tag.et_pb_text p { margin: 10px 0 0; font-family: var(--jtta-font-nav); font-weight: 500; font-size: 18px; line-height: var(--jtta-lh-body); color: #082248; } body.jtta-site .jtta-journey__go.et_pb_image { position: absolute; z-index: 3; right: 26px; bottom: 31px; display: block; flex: none; width: 57px; height: 57px; margin: 0; background: #082248; border-radius: 50%; overflow: hidden; } body.jtta-site .jtta-journey__go .et_pb_image_wrap { display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; margin: 0; } body.jtta-site .jtta-journey__go img { display: block; width: 23px; height: 14px; margin: 0; object-fit: contain; } /* Way wrap/hide only below 1024 — 1024–1199 keeps horizontal 5-row + connector. Vertical cascade locks live in ≤1023 / 768 / ≤767 bands (do not leave 16px gaps here). */ @media (max-width: 1023px) { body.jtta-site .jtta-way__steps > .et_pb_column, body.jtta-site .jtta-way__step--experience, body.jtta-site .jtta-way__step:not(.jtta-way__step--experience) { width: 100%; max-width: 373px; margin-left: auto; margin-right: auto; margin-bottom: 0; } body.jtta-site .jtta-way__steps { flex-wrap: nowrap; justify-content: flex-start; } body.jtta-site .jtta-way__steps::before, body.jtta-site .jtta-way__steps::after, body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__arrow { display: none; } body.jtta-site .jtta-inside__track, body.jtta-site .jtta-inside__track.et_pb_row, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { height: auto; padding-top: 0; } body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px 16px; height: auto; max-width: 100%; } body.jtta-site .jtta-inside__track::before { display: none; } body.jtta-site .jtta-inside__item.et_pb_text, body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text { position: relative; left: auto; top: auto; transform: none; width: auto; min-width: 100px; flex: 0 1 120px; } body.jtta-site .jtta-journey__cards.et_pb_row { flex-wrap: wrap; gap: 28px; justify-content: center; } } @media (max-width: 980px) { body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-journey.et_pb_section { padding: 40px var(--jtta-section-x); } body.jtta-site .jtta-way__heading-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_pb_column, body.jtta-site .jtta-inside__heading-col.et_pb_column, body.jtta-site .jtta-inside__lead-col.et_pb_column, body.jtta-site .jtta-journey__heading-col.et_pb_column, body.jtta-site .jtta-journey__lead-col.et_pb_column { width: 100%; max-width: 100%; margin-left: 0; margin-bottom: 16px; } body.jtta-site .jtta-way__lead-col.et_pb_column { flex-direction: column; align-items: flex-start; } } /* ------------------------------------------------------------------------- Divi 5 layout lock — beat gutters3 15.6% / 5.5% / module % margins. Figma 1440 desktop. No !important. ------------------------------------------------------------------------- */ body.jtta-site .jtta-hero.et_pb_section .et_pb_module, body.jtta-site .jtta-marks.et_pb_section .et_pb_module, body.jtta-site .jtta-future.et_pb_section .et_pb_module, body.jtta-site .jtta-gap.et_pb_section .et_pb_module, body.jtta-site .jtta-exists.et_pb_section .et_pb_module, body.jtta-site .jtta-dims.et_pb_section .et_pb_module, body.jtta-site .jtta-way.et_pb_section .et_pb_module, body.jtta-site .jtta-inside.et_pb_section .et_pb_module, body.jtta-site .jtta-journey.et_pb_section .et_pb_module, body.jtta-site .jtta-depth.et_pb_section .et_pb_module, body.jtta-site .jtta-outcomes.et_pb_section .et_pb_module, body.jtta-site .jtta-parents.et_pb_section .et_pb_module, body.jtta-site .jtta-proof.et_pb_section .et_pb_module, body.jtta-site .jtta-experience.et_pb_section .et_pb_module, body.jtta-site .jtta-faq.et_pb_section .et_pb_module, body.jtta-site .jtta-cta.et_pb_section .et_pb_module { margin-bottom: 0; } body.jtta-site .jtta-hero.et_block_section.et_pb_section, body.jtta-site .jtta-marks.et_block_section.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section, body.jtta-site .jtta-dims.et_block_section.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { width: 100%; } body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .jtta-hero.et_block_section.et_pb_section { display: flex; flex-direction: column; gap: 0; } /* Desktop only: force full-row wrap so CTAs sit under lead. On phone/tablet this grow stretches modules into the photo mid-frame. */ body.jtta-site .jtta-hero__heading.et_pb_module, body.jtta-site .jtta-hero__lead.et_pb_module { flex: 0 0 auto; } @media (min-width: 1024px) { body.jtta-site .jtta-hero__heading.et_pb_module, body.jtta-site .jtta-hero__lead.et_pb_module { flex: 1 0 100%; } } body.jtta-site .jtta-hero__copy-row.et_pb_row .et_pb_button_module_wrapper { flex: 0 0 auto; } @media (min-width: 1024px) { body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .jtta-hero.et_block_section.et_pb_section { height: var(--jtta-hero-h); min-height: var(--jtta-hero-h); } body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; float: none; width: 100%; margin: 0; } body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { display: flex; align-items: center; justify-content: flex-start; gap: 341px; width: 100%; max-width: 1333px; margin-top: auto; padding-bottom: 10px; overflow: visible; } } body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: auto; max-width: none; margin: 0; flex: 0 0 auto; } body.jtta-site .jtta-marks .et_block_row.et_pb_row { display: flex; align-items: center; justify-content: center; gap: 40px; float: none; overflow: visible; } body.jtta-site .jtta-exists__row.et_block_row.et_pb_row, body.jtta-site .jtta-future__intro.et_block_row.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row, body.jtta-site .jtta-journey__intro.et_block_row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row { display: flex; align-items: center; justify-content: space-between; float: none; overflow: visible; } body.jtta-site .jtta-marks .et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site .jtta-future__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site .jtta-journey__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; margin-right: 0; margin-left: 0; } body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column { flex: 0 0 798px; width: 798px; max-width: 798px; } body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column { flex: 0 0 507px; width: 507px; max-width: 507px; height: 393px; } body.jtta-site .jtta-future__cards.et_block_row.et_pb_row { display: flex; align-items: stretch; justify-content: center; gap: 48px; width: 100%; max-width: 1272px; margin-left: auto; margin-right: auto; overflow: visible; } body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .et_pb_column.et_block_column { box-sizing: border-box; float: none; flex: 0 0 392px; width: 392px; max-width: 392px; min-height: 494px; height: 494px; margin-right: 0; overflow: visible; } body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_pb_column { flex: 0 0 604px; width: 604px; max-width: 604px; } body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_pb_column { flex: 0 1 615px; width: 615px; max-width: 615px; } body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: 100%; max-width: 100%; margin: 0; padding: 0; } body.jtta-site .jtta-way__steps.et_block_row.et_pb_row { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; overflow: visible; } /* At 1440 keep Figma fixed card widths; below that flex-shrink to avoid overflow */ body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column { box-sizing: border-box; float: none; flex: 0 0 301px; width: 301px; min-width: 0; max-width: 301px; min-height: 317px; margin-right: 0; overflow: visible; } body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column { flex: 0 0 273px; width: 273px; max-width: 273px; } @media (max-width: 1439px) and (min-width: 1024px) { body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column { flex: 1 1 0; width: auto; } body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column { flex: 0 1 273px; width: auto; } } body.jtta-site .jtta-way__lead-col.et_block_column { display: block; } @media (min-width: 1024px) { body.jtta-site .jtta-way__lead-col.et_block_column { display: flex; flex-direction: row; align-items: center; gap: 31px; } } body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { overflow: visible; } body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { position: relative; display: block; float: none; width: 100%; max-width: 1362px; height: 100px; min-height: 100px; margin: 0; padding: 0; } body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text { flex-direction: column; align-items: center; } body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row { display: flex; align-items: stretch; justify-content: space-between; gap: 75px; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; overflow: visible; } body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .jtta-journey__card.et_pb_column.et_block_column { float: none; flex: 0 0 403px; width: 403px; max-width: 403px; margin-right: 0; } /* Below 1024: vertical cascade — beat Divi cache margin:0 12px 16px (4 gaps). */ @media (max-width: 1199px) { body.jtta-site .jtta-way__steps.et_block_row.et_pb_row { flex-wrap: nowrap; flex-direction: column; justify-content: flex-start; gap: 0; row-gap: 0; } body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column { flex: 0 0 auto; width: 100%; max-width: 373px; margin: 0; } } @media (max-width: 1023px) { body.jtta-site .jtta-way__steps.et_block_row.et_pb_row { flex-wrap: nowrap; flex-direction: column; justify-content: flex-start; } body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column { flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(n + 2), body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column:nth-child(n + 2) { margin-top: calc(0px - var(--way-overlap, 12px)); } } @media (max-width: 1199px) { /* Future cards: 1024 band keeps fluid 3-in-a-row — do not force wrap here */ body.jtta-site .jtta-marks .et_block_row.et_pb_row, body.jtta-site .jtta-future__intro.et_block_row.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row, body.jtta-site .jtta-journey__intro.et_block_row.et_pb_row { flex-wrap: wrap; } body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column { flex: 1 1 100%; width: 100%; max-width: 100%; } /* Exists: keep 2-col at 1024 — stack only ≤1023 in mobile/768 bands */ } @media (max-width: 980px) { body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { flex-direction: column; } body.jtta-site .jtta-hero__copy-row.et_pb_row .et_pb_button_module_wrapper { width: 100%; margin-right: 0; margin-left: 0; } /* Inside: keep vertical stack below 980 — beat Divi wrap/space-between */ body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 16px; height: auto; min-height: 0; } body.jtta-site .jtta-inside__item.et_pb_text, body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text { position: relative; left: auto; transform: none; } body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .jtta-journey__card.et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; height: auto; } } body.jtta-site .jtta-way__icon.et_pb_image { margin: 12px 0 18px; } body.jtta-site .jtta-future__icon.et_pb_image { margin: 0; } body.jtta-site .jtta-hero__copy-row.et_pb_row .et_pb_button_module_wrapper { margin: 36px 14px 0 0; } body.jtta-site .jtta-hero__copy-row.et_pb_row .et_pb_button_module_wrapper:last-of-type { margin-right: 0; } /* Beat Divi gutters3 1/3 module % gaps on THE WORLD IS CHANGING cards */ body.jtta-site.et_pb_gutters3 .jtta-future__intro.et_block_row.et_pb_row { display: flex; align-items: center; justify-content: space-between; } body.jtta-site.et_pb_gutters3 .jtta-future__intro.et_block_row.et_pb_row > .et_pb_column_1_2.et_block_column { float: none; margin-right: 0; } body.jtta-site.et_pb_gutters3 .jtta-future__heading-col.et_pb_column_1_2.et_block_column { flex: 0 0 331px; width: 331px; max-width: 331px; } body.jtta-site.et_pb_gutters3 .jtta-future__lead-col.et_pb_column_1_2.et_block_column { flex: 0 0 530px; width: 530px; max-width: 530px; margin-left: auto; } body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { display: flex; align-items: stretch; justify-content: center; gap: 48px; overflow: visible; } body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 15px; float: none; flex: 0 0 392px; width: 392px; max-width: 392px; min-height: 494px; height: 494px; margin-right: 0; border-radius: var(--jtta-radius-card); overflow: visible; } body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--learn.et_block_column { background-color: #fce8e8; background-image: linear-gradient(-3.39deg, rgba(220, 38, 38, 0.05) 25.53%, rgba(220, 38, 38, 0.1) 104.44%); padding: 69px 41px; } body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--perform.et_block_column { background-color: #f2f5fd; background-image: linear-gradient(-1.98deg, #f2f5fd 22.77%, #e7f0ff 135.07%); padding: 64px 32px; } body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--navigate.et_block_column { background-color: #072359; background-image: none; padding: 52.5px 38px; } body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site.et_pb_gutters3 .jtta-future .et_pb_column_4_4.et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-future .et_pb_column_1_2.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site.et_pb_gutters3 .jtta-future__intro.et_block_row.et_pb_row { flex-wrap: wrap; } body.jtta-site.et_pb_gutters3 .jtta-future__heading-col.et_pb_column_1_2.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__lead-col.et_pb_column_1_2.et_block_column { flex: 1 1 100%; width: 100%; max-width: 392px; margin: 0 auto 16px; } /* Future cards stay 3-in-a-row at 1024 — do not wrap/hide arrows here. ≤1023 stack + down-arrows live in the mobile bands. */ } /* Beat tablet future unlock — Figma mobile 159:219 connectors + card lock. */ @media (max-width: 1023px) { body.jtta-site.et_pb_gutters3 .jtta-future__intro.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { flex-wrap: nowrap; } body.jtta-site.et_pb_gutters3 .jtta-future__heading-col.et_pb_column_1_2.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__lead-col.et_pb_column_1_2.et_block_column { flex: 0 0 auto; width: 100%; max-width: 377px; margin: 0; } body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { flex-direction: column; align-items: center; gap: 34px; } body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 36px; row-gap: 10.14px; align-items: center; flex: 0 0 auto; width: 375px; max-width: 375px; min-height: 0; height: auto; margin: 0; gap: unset; } body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--learn.et_block_column { min-height: 198.125px; padding: 30px 18px; border-radius: 25.013px; background-image: linear-gradient(-1.424deg, rgba(220, 38, 38, 0.05) 25.53%, rgba(220, 38, 38, 0.1) 104.44%); } body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--perform.et_block_column { min-height: 205.125px; padding: 19px 18px; border-radius: 37px; background-image: linear-gradient(-0.86deg, #f2f5fd 22.77%, #e7f0ff 135.07%); } body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--navigate.et_block_column { min-height: 205.125px; padding: 19px 18px; border-radius: 37px; } body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { display: block; top: auto; right: auto; bottom: -51px; left: 50%; width: 65px; height: 68px; transform: translateX(-50%) rotate(90deg); } body.jtta-site .jtta-future__card--perform::after { width: 68px; height: 67px; } body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding: 40px 22px; } } /* Beat Divi gutters3 1/3 module % gaps on Young Passion Discovery cards */ body.jtta-site.et_pb_gutters3 .jtta-journey__cards.et_block_row.et_pb_row { display: flex; align-items: stretch; justify-content: flex-start; gap: 75px; overflow: visible; } body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { box-sizing: border-box; float: none; flex: 0 0 403px; width: 403px; max-width: 403px; height: 558px; margin-right: 0; padding: 0; overflow: hidden; } body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } /* Below tablet landscape: allow wrap. 1024–1199 keeps fluid 3-in-a-row in band below. */ @media (max-width: 1023px) { body.jtta-site.et_pb_gutters3 .jtta-journey__cards.et_block_row.et_pb_row { flex-wrap: wrap; gap: 28px; justify-content: center; } body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { flex: 0 1 403px; width: 100%; max-width: 403px; margin: 0 auto; height: auto; } } /* ------------------------------------------------------------------------- Figma spacing lock (Home 1440) — restore exact section padding after Divi sticky-image zeros padding-bottom. No !important. Per-node py/px. ------------------------------------------------------------------------- */ body.jtta-site .jtta-exists.et_block_section.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section { padding-top: 22px; padding-right: var(--jtta-section-x); padding-bottom: 22px; padding-left: var(--jtta-section-x); } body.jtta-site .jtta-future.et_block_section.et_pb_section { padding-top: 45px; padding-right: 38.5px; padding-bottom: 45px; padding-left: 38.5px; min-height: 822px; } body.jtta-site .jtta-dims.et_block_section.et_pb_section { padding-top: 22px; padding-right: var(--jtta-section-x); padding-bottom: 64px; padding-left: var(--jtta-section-x); min-height: 478px; } body.jtta-site .jtta-inside.et_block_section.et_pb_section { padding-top: 22px; padding-right: var(--jtta-section-x); padding-bottom: 24px; padding-left: var(--jtta-section-x); min-height: 448px; } body.jtta-site .jtta-journey.et_block_section.et_pb_section { padding-top: 22px; padding-right: var(--jtta-section-x); padding-bottom: 34px; padding-left: var(--jtta-section-x); min-height: 874px; } body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding-top: 44px; padding-right: 40px; padding-bottom: 44px; padding-left: 40px; min-height: 655px; } body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { /* Figma 73:1064 — left 44 / right 33 so 4×316 + gaps fit */ padding-top: 22px; padding-right: 33px; padding-bottom: 42px; padding-left: 44px; min-height: 754px; } body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding-top: 37px; padding-right: var(--jtta-section-x); padding-bottom: 37px; padding-left: var(--jtta-section-x); min-height: 671px; } body.jtta-site .jtta-faq.et_block_section.et_pb_section { padding-top: 22px; padding-right: var(--jtta-section-x); padding-bottom: 44px; padding-left: var(--jtta-section-x); min-height: 726px; } body.jtta-site .jtta-cta.et_block_section.et_pb_section { padding-top: 56.5px; padding-right: 50px; padding-bottom: 56.5px; padding-left: 50px; min-height: 404px; } /* Marks image is edge-to-edge vertically (Figma 73:773 = 393). Beat Divi section_1 py:22. */ body.jtta-site .jtta-marks.et_block_section.et_pb_section, body.jtta-site .et_pb_section_1.et_pb_section.jtta-marks { padding-top: 0; padding-bottom: 0; padding-right: var(--jtta-section-x); padding-left: var(--jtta-section-x); height: 393px; min-height: 393px; box-sizing: border-box; } @media (max-width: 1199px) { body.jtta-site .jtta-marks.et_block_section.et_pb_section { height: auto; min-height: 0; padding-top: 32px; padding-bottom: 32px; overflow: visible; } body.jtta-site .jtta-marks .et_block_row.et_pb_row { height: auto; } body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column { flex: 1 1 100%; width: 100%; max-width: 100%; height: auto; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { min-height: 0; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; max-width: 507px; height: auto; aspect-ratio: 507 / 393; margin-left: auto; margin-right: auto; background-image: url("../images/what-if-good-mark-section.png"); background-repeat: no-repeat; background-position: left center; background-size: 160.21% 100%; } body.jtta-site .jtta-marks__image img { width: 100%; max-width: none; height: 100%; opacity: 0; pointer-events: none; } } @media (max-width: 980px) { body.jtta-site .jtta-marks.et_block_section.et_pb_section { padding-top: 40px; padding-bottom: 40px; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { max-height: none; } body.jtta-site .jtta-marks__image img { max-height: none; } } /* Beat tablet marks padding/image rules — Figma mobile 158:97 only. */ @media (max-width: 1023px) { body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { padding: 12px 20px 0; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 352px; max-width: 352px; height: 273px; aspect-ratio: auto; } } body.jtta-site .jtta-future.et_block_section.et_pb_section { padding-top: 22px; padding-right: var(--jtta-section-x); padding-bottom: 22px; padding-left: var(--jtta-section-x); } /* Final mobile lock — beat late unscoped future section padding. */ @media (max-width: 1023px) { body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding: 40px 22px; min-height: 0; height: auto; } body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { display: block; } } body.jtta-site .jtta-gap.et_block_section.et_pb_section { padding-top: 22px; padding-right: 0; padding-bottom: 22px; padding-left: 0; } /* Final mobile lock — beat late unscoped gap section padding. */ @media (max-width: 1023px) { body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { padding: 16px 20px 0; min-height: 0; height: auto; } body.jtta-site .jtta-gap__intro.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; width: 100%; max-width: 100%; margin: 0 0 14px; padding: 0; } body.jtta-site .jtta-gap__heading-col.et_pb_column, body.jtta-site .jtta-gap__lead-col.et_pb_column, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: 100%; max-width: 100%; flex: 0 0 auto; margin: 0; padding: 0; } body.jtta-site .jtta-gap__heading.et_pb_text, body.jtta-site .jtta-gap__lead.et_pb_text, body.jtta-site .jtta-gap__overline.et_pb_text { width: 100%; max-width: 100%; } body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row { width: calc(100% + 40px); max-width: none; margin: 0 -20px; padding: 0; } body.jtta-site .jtta-gap__image .et_pb_image_wrap { aspect-ratio: 421 / 673; background-image: none; } } body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column { flex: 0 0 798px; width: 798px; max-width: 798px; margin-right: 0; } body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column { flex: 0 0 507px; width: 507px; max-width: 507px; margin-right: 0; } body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_block_column { flex: 0 0 604px; width: 604px; max-width: 604px; margin-right: 0; } body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_block_column { flex: 0 0 615px; width: 615px; max-width: 615px; margin-right: 0; } body.jtta-site.et_pb_gutters3 .jtta-journey__intro.et_block_row.et_pb_row > .jtta-journey__heading-col.et_block_column { flex: 0 0 626px; width: 626px; max-width: 626px; margin-right: 0; } body.jtta-site.et_pb_gutters3 .jtta-journey__intro.et_block_row.et_pb_row > .jtta-journey__lead-col.et_block_column { flex: 0 0 406px; width: 406px; max-width: 406px; margin-left: auto; margin-right: 0; } body.jtta-site .jtta-journey__name.et_pb_text h3 { margin-top: 14px; } body.jtta-site.et_pb_gutters3 .jtta-way.et_block_section .et_pb_column_1_5.et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-marks.et_block_section .et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-exists.et_block_section .et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-gap.et_block_section .et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-dims.et_block_section .et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-inside.et_block_section .et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-way.et_block_section .et_block_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-hero.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__intro.et_block_row.et_pb_row > .jtta-journey__heading-col.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__intro.et_block_row.et_pb_row > .jtta-journey__lead-col.et_block_column { flex: 1 1 100%; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { height: auto; min-height: 0; } } /* Re-lock marks columns to Figma mobile after gutters3 tablet unlock. */ @media (max-width: 1023px) { body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column { flex: 0 0 auto; width: 100%; max-width: 375px; margin: 0; } body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column { flex: 0 0 352px; width: 352px; max-width: 352px; height: 273px; margin: 0 auto; } } /* ------------------------------------------------------------------------- Home — Two Journeys / Choose Your Depth (Figma 1440 × 655, node 73:1030) ------------------------------------------------------------------------- */ body.jtta-site .jtta-depth.et_pb_section { background: var(--jtta-white); /* Inner 73:1031 @ x=40 y=44 h=567 → section 655 */ padding: 44px 40px; margin: 0; min-height: 655px; } body.jtta-site .jtta-depth .et_pb_row { width: 100%; max-width: 1360px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-depth__overline.et_pb_text p { margin: 0 0 10px; } body.jtta-site .jtta-depth__heading.et_pb_text { margin: 0 0 39px; } body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { display: flex; align-items: stretch; justify-content: space-between; gap: 25px; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; margin-bottom: 39px; overflow: visible; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 149px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; align-content: start; float: none; flex: 0 0 669px; width: 669px; max-width: 669px; min-height: 298px; height: auto; margin: 0; padding: 40px 37px 24px 14px; background: var(--jtta-white); border-radius: 57px; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25); overflow: visible; } body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site .jtta-depth__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 34px 0 0; } body.jtta-site .jtta-depth__icon .et_pb_image_wrap { width: 149px; height: 143px; margin: 0; } body.jtta-site .jtta-depth__icon img { display: block; width: 149px; height: 143px; object-fit: contain; } body.jtta-site .jtta-depth__copy.et_pb_text { grid-column: 2; grid-row: 1; max-width: 482px; padding: 0; min-width: 0; } /* Figma 73:1042 — title + months on one row (gap 13), bullets full width below */ body.jtta-site .jtta-depth__copy.et_pb_text .et_pb_text_inner { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; width: 100%; } body.jtta-site .jtta-depth__copy.et_pb_text h3 { margin: 0; flex: 0 0 auto; font-family: var(--jtta-font-display); font-weight: 400; font-size: var(--jtta-fs-display); line-height: var(--jtta-lh-tight); color: var(--jtta-btn-ink); } body.jtta-site .jtta-depth__copy.et_pb_text .jtta-depth__months { margin: 0; flex: 0 0 auto; font-family: var(--jtta-font-nav); font-weight: 700; font-size: 24px; line-height: var(--jtta-lh-body); color: #1e293b; white-space: nowrap; } body.jtta-site .jtta-depth__copy.et_pb_text ul { flex: 1 0 100%; width: 100%; margin: 0; padding: 0 0 0 27px; list-style: disc; } body.jtta-site .jtta-depth__copy.et_pb_text li { margin: 0 0 15px; font-family: var(--jtta-font-nav); font-weight: 500; font-size: 18px; line-height: var(--jtta-lh-body); color: #082248; } body.jtta-site .jtta-depth__copy.et_pb_text li:last-child { margin-bottom: 0; } /* In-flow bottom-right — never cover bullet text */ body.jtta-site .jtta-depth__go.et_pb_image { position: relative; grid-column: 2; grid-row: 2; justify-self: end; align-self: end; right: auto; bottom: auto; margin: 8px 0 0; line-height: 0; z-index: 1; } body.jtta-site .jtta-depth__card--explorer .jtta-depth__go, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go img { width: 66px; height: 61px; } body.jtta-site .jtta-depth__card--discovery .jtta-depth__go, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go img { width: 55px; height: 51px; } body.jtta-site .jtta-depth__go img { display: block; object-fit: contain; } /* Figma 73:1061 — 998×63 navy pill, horizontally centered under cards */ body.jtta-site .jtta-depth__banner.et_pb_row, body.jtta-site .jtta-depth__banner.et_block_row.et_pb_row { display: block; float: none; width: 100%; max-width: 1360px; margin-left: auto; margin-right: auto; padding: 0; text-align: center; overflow: visible; } body.jtta-site .jtta-depth__banner.et_pb_row > .et_pb_column, body.jtta-site .jtta-depth__banner.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-depth__banner.et_block_row.et_pb_row > .et_pb_column_4_4.et_block_column { box-sizing: border-box; display: block; float: none; width: 100%; max-width: 100%; margin: 0; padding: 0; background: transparent; border-radius: 0; overflow: visible; text-align: center; } body.jtta-site .jtta-depth__banner-text.et_pb_text, body.jtta-site .jtta-depth__banner-text.et_flex_module { display: block; box-sizing: border-box; width: 998px; max-width: 100%; height: 63px; margin: 0 auto; padding: 19px 74px 16px; background: #082248; border-radius: 27px; text-align: center; } body.jtta-site .jtta-depth__banner-text.et_pb_text .et_pb_text_inner { display: flex; align-items: center; justify-content: center; height: 100%; } body.jtta-site .jtta-depth__banner-text.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 600; font-size: 20px; line-height: var(--jtta-lh-body); color: var(--jtta-white); white-space: nowrap; } body.jtta-site.et_pb_gutters3 .jtta-depth.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { flex-wrap: wrap; justify-content: center; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { flex: 1 1 100%; width: 100%; max-width: 669px; height: auto; min-height: 298px; margin: 0 auto; } body.jtta-site .jtta-depth__banner.et_pb_row > .et_pb_column, body.jtta-site .jtta-depth__banner.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-depth__banner.et_block_row.et_pb_row > .et_pb_column_4_4.et_block_column { width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-depth__banner-text.et_pb_text, body.jtta-site .jtta-depth__banner-text.et_flex_module { width: 100%; max-width: 998px; height: auto; min-height: 63px; padding-left: 24px; padding-right: 24px; } body.jtta-site .jtta-depth__banner-text.et_pb_text p { white-space: normal; } } @media (max-width: 980px) { body.jtta-site .jtta-depth.et_pb_section { padding: 40px var(--jtta-section-x); } /* Keep icon | copy row; go stays in-flow under copy */ body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { grid-template-columns: 100px minmax(0, 1fr); height: auto; min-height: 0; padding: 28px 24px 20px 12px; border-radius: 40px; } body.jtta-site .jtta-depth__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 2; margin-top: 8px; } body.jtta-site .jtta-depth__icon .et_pb_image_wrap, body.jtta-site .jtta-depth__icon img { width: 100px; height: 96px; } body.jtta-site .jtta-depth__copy.et_pb_text { grid-column: 2; grid-row: 1; max-width: 100%; } body.jtta-site .jtta-depth__copy.et_pb_text h3 { font-size: 40px; } body.jtta-site .jtta-depth__copy.et_pb_text .jtta-depth__months { font-size: 18px; } body.jtta-site .jtta-depth__copy.et_pb_text li { font-size: 15px; margin-bottom: 10px; } body.jtta-site .jtta-depth__go.et_pb_image { grid-column: 2; grid-row: 2; position: relative; justify-self: end; } body.jtta-site .jtta-depth__card--explorer .jtta-depth__go, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go img { width: 48px; height: 44px; } body.jtta-site .jtta-depth__card--discovery .jtta-depth__go, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go img { width: 40px; height: 37px; } body.jtta-site .jtta-depth__banner-text.et_pb_text p { font-size: 16px; } } /* ------------------------------------------------------------------------- Home — Who your child becomes / outcomes grid (Figma 1440 × 754, 73:1063) ------------------------------------------------------------------------- */ body.jtta-site .jtta-outcomes.et_pb_section { background: var(--jtta-white); /* Figma 73:1064 Frame 73 @ x=44 w=1363 → left 44 / right 33 */ padding: 22px 33px 42px 44px; margin: 0; min-height: 754px; } body.jtta-site .jtta-outcomes .et_pb_row { width: 100%; max-width: 1363px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-outcomes__intro.et_pb_row { max-width: 846px; margin: 0 auto 31px 0; } /* Figma 73:1065 — heading→lead gap 29px */ body.jtta-site .jtta-outcomes__heading.et_pb_text { margin: 0 0 29px; max-width: 846px; overflow: visible; } /* Figma 73:1066 — Anton 64 / lh 89.135% / #0f172a */ body.jtta-site .jtta-outcomes__heading.et_pb_text h2 { margin: 0; max-width: 846px; font-family: var(--jtta-font-display); font-weight: 400; font-size: 64px; line-height: 0.89135; color: var(--jtta-btn-ink); overflow: visible; } body.jtta-site .jtta-outcomes__lead.et_pb_text { max-width: 500px; } /* Figma 73:1067 — Inter 18 / #475569 / lh 1.398 */ body.jtta-site .jtta-outcomes__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-ui); font-weight: 400; font-size: 18px; line-height: var(--jtta-lh-body); color: var(--jtta-muted); } /* Figma 73:1068 — 4×316 cards, gap 33×29; two builder rows = 4+4 */ body.jtta-site .jtta-outcomes__grid.et_pb_row, body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 33px; width: 100%; max-width: 1363px; margin-left: auto; margin-right: auto; overflow: visible; } body.jtta-site .jtta-outcomes__grid.et_pb_row + .jtta-outcomes__grid.et_pb_row { margin-top: 29px; } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; float: none; flex: 0 0 316px; width: 316px; max-width: 316px; min-width: 316px; min-height: 190px; height: 190px; margin: 0; padding: 8px 62px; background: var(--jtta-white); border-radius: 26px; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25); overflow: visible; } body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site .jtta-outcomes__icon.et_pb_image { display: flex; align-items: center; justify-content: center; width: 139px; margin: 0 0 9px; line-height: 0; } body.jtta-site .jtta-outcomes__icon .et_pb_image_wrap { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; } body.jtta-site .jtta-outcomes__icon img { display: block; width: auto; max-width: 139px; max-height: 118px; height: auto; object-fit: contain; } body.jtta-site .jtta-outcomes__card--create .jtta-outcomes__icon img { max-width: 104px; max-height: 88px; } body.jtta-site .jtta-outcomes__card--communicate .jtta-outcomes__icon img, body.jtta-site .jtta-outcomes__card--solve .jtta-outcomes__icon img { max-width: 102px; max-height: 102px; } body.jtta-site .jtta-outcomes__card--decide .jtta-outcomes__icon img, body.jtta-site .jtta-outcomes__card--lead .jtta-outcomes__icon img, body.jtta-site .jtta-outcomes__card--adapt .jtta-outcomes__icon img { max-width: 114px; max-height: 96px; } body.jtta-site .jtta-outcomes__card--discover .jtta-outcomes__icon img { max-width: 120px; max-height: 102px; } body.jtta-site .jtta-outcomes__label.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 700; font-size: 24px; line-height: var(--jtta-lh-body); text-align: center; color: #1e293b; } body.jtta-site.et_pb_gutters3 .jtta-outcomes.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site .jtta-outcomes__grid.et_pb_row, body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row { flex-wrap: wrap; justify-content: center; gap: 24px 20px; } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column { flex: 0 1 280px; width: 100%; min-width: 0; max-width: 316px; } } @media (max-width: 980px) { body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { padding: 40px var(--jtta-section-x); min-height: 0; } body.jtta-site .jtta-outcomes__intro.et_pb_row { max-width: 100%; margin-bottom: 24px; } body.jtta-site .jtta-outcomes__grid.et_pb_row + .jtta-outcomes__grid.et_pb_row { margin-top: 24px; } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column { flex: 1 1 calc(50% - 16px); max-width: none; height: auto; min-height: 170px; padding: 16px 20px; } } /* Figma mobile 168:780 — intro + 2×4 capability cards */ @media (max-width: 1023px) { body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { padding: 12px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-outcomes .et_pb_row { max-width: 375px; } body.jtta-site .jtta-outcomes__intro.et_pb_row { max-width: 375px; margin: 0 0 12px; } /* Figma 168:770 — heading→lead gap 9px */ body.jtta-site .jtta-outcomes__heading.et_pb_text { margin: 0 0 9px; max-width: 100%; } /* Figma 168:768 — Anton 36 / lh 96.44% */ body.jtta-site .jtta-outcomes__heading.et_pb_text h2 { font-size: 36px; line-height: 0.9644; } body.jtta-site .jtta-outcomes__lead.et_pb_text { max-width: 100%; } /* Figma 168:769 — Poppins 12 */ body.jtta-site .jtta-outcomes__lead.et_pb_text p { font-family: var(--jtta-font-body); font-size: 12px; line-height: normal; } body.jtta-site .jtta-outcomes__grid.et_pb_row, body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 15px 17px; max-width: 375px; margin: 0 auto; } body.jtta-site .jtta-outcomes__grid.et_pb_row + .jtta-outcomes__grid.et_pb_row { margin-top: 15px; } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column { flex: 0 0 calc(50% - 8.5px); width: calc(50% - 8.5px); min-width: 0; max-width: 178.525px; height: 107.341px; min-height: 107.341px; padding: 4.52px 20px; border-radius: 14.689px; box-shadow: 0 2.26px 1.13px rgba(0, 0, 0, 0.25); } body.jtta-site .jtta-outcomes__icon.et_pb_image { width: 78.529px; margin: 0 0 5px; } body.jtta-site .jtta-outcomes__icon img { max-width: 78.529px; max-height: 66.477px; } body.jtta-site .jtta-outcomes__card--create .jtta-outcomes__icon img { max-width: 58.742px; max-height: 49.727px; } body.jtta-site .jtta-outcomes__card--communicate .jtta-outcomes__icon img, body.jtta-site .jtta-outcomes__card--solve .jtta-outcomes__icon img { max-width: 57.644px; max-height: 57.09px; } body.jtta-site .jtta-outcomes__card--decide .jtta-outcomes__icon img, body.jtta-site .jtta-outcomes__card--lead .jtta-outcomes__icon img, body.jtta-site .jtta-outcomes__card--adapt .jtta-outcomes__icon img { max-width: 63.947px; max-height: 54.133px; } body.jtta-site .jtta-outcomes__card--discover .jtta-outcomes__icon img { max-width: 67.717px; max-height: 57.325px; } body.jtta-site .jtta-outcomes__label.et_pb_text p { font-size: 13.5px; line-height: var(--jtta-lh-body); } } /* ------------------------------------------------------------------------- Home — Growth & Parent Connect (Figma 1440 × 671, node 73:1101) ------------------------------------------------------------------------- */ body.jtta-site .jtta-parents.et_pb_section { background: var(--jtta-white); /* Frame 139 @ x=44 y=37 h=597 → 37 / 44 */ padding: 37px var(--jtta-section-x); margin: 0; min-height: 671px; } body.jtta-site .jtta-parents .et_pb_row { width: 100%; max-width: 1352px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-parents__intro.et_pb_row { margin-bottom: 42px; } /* Figma 73:1104 — Montserrat 16 / #dc2626 / gap 10 to heading */ body.jtta-site .jtta-parents__overline.et_pb_text p { margin: 0 0 10px; font-size: 16px; line-height: var(--jtta-lh-overline); color: var(--jtta-red-text); } /* Figma 73:1105 — Anton L1/L2 64, L3 48, lh 89.135% */ body.jtta-site .jtta-parents__heading.et_pb_text h2 { max-width: 1352px; font-family: var(--jtta-font-display); font-weight: 400; font-size: 64px; line-height: 0.89135; color: var(--jtta-btn-ink); } /* Spans are already display:block —
would add a full empty 64px line (big gap before L3) */ body.jtta-site .jtta-parents__heading.et_pb_text h2 br { display: none; } body.jtta-site .jtta-parents__heading.et_pb_text h2 span { display: block; margin: 0; padding: 0; color: var(--jtta-red-text); font-size: 64px; line-height: 0.89135; } body.jtta-site .jtta-parents__heading.et_pb_text h2 .jtta-parents__line { display: block; margin: 0; padding: 0; font-size: 48px; line-height: 0.89135; color: var(--jtta-btn-ink); } body.jtta-site .jtta-parents__cards.et_pb_row, body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row { display: flex; align-items: stretch; justify-content: center; gap: 30px; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; overflow: visible; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; float: none; flex: 0 0 316px; width: 316px; max-width: 316px; min-height: 291px; height: 291px; margin: 0; padding: 17px 31px 17px 33px; background: var(--jtta-white); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 26px; box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25); overflow: visible; } body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site .jtta-parents__icon.et_pb_image { display: flex; align-items: center; justify-content: center; width: 125px; height: 100px; margin: 0 auto 20px; line-height: 0; } body.jtta-site .jtta-parents__icon .et_pb_image_wrap { position: relative; width: 125px; height: 100px; margin: 0; overflow: hidden; } /* Figma 73:1109 default crop */ body.jtta-site .jtta-parents__icon img { display: block; position: absolute; left: -0.58%; top: 0; width: 100.35%; height: 133%; max-width: none; object-fit: cover; } /* Figma 73:1115 Growth Portfolio crop */ body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(2) .jtta-parents__icon img { left: -0.8%; top: -2.46%; width: 100%; height: 117.92%; } /* Cards 3–4: full-frame cover */ body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(3) .jtta-parents__icon img, body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(4) .jtta-parents__icon img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } body.jtta-site .jtta-parents__title.et_pb_text p { margin: 0 0 20px; font-family: var(--jtta-font-body); font-weight: 700; font-size: 24px; line-height: var(--jtta-lh-body); text-align: center; color: #1e293b; } body.jtta-site .jtta-parents__body.et_pb_text p { margin: 0; max-width: 252px; font-family: var(--jtta-font-ui); font-weight: 400; font-size: 18px; line-height: var(--jtta-lh-body); text-align: center; color: var(--jtta-muted); } body.jtta-site.et_pb_gutters3 .jtta-parents.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site .jtta-parents__cards.et_pb_row, body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row { flex-wrap: wrap; gap: 24px; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column { flex: 0 1 316px; width: 100%; max-width: 316px; margin: 0 auto; } } @media (max-width: 980px) { body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding: 40px var(--jtta-section-x); min-height: 0; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column { flex: 1 1 100%; max-width: 400px; height: auto; min-height: 0; } } /* Figma mobile 170:857 — stacked horizontal cards */ @media (max-width: 1023px) { body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding: 12px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-parents .et_pb_row { max-width: 377px; } body.jtta-site .jtta-parents__intro.et_pb_row { margin-bottom: 15px; } /* Figma 168:815 — 12px overline, 7px gap */ body.jtta-site .jtta-parents__overline.et_pb_text p { margin: 0 0 7px; font-size: 12px; line-height: var(--jtta-lh-overline); } /* Figma 168:818 — all lines 36 / lh 96.44% */ body.jtta-site .jtta-parents__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2 span, body.jtta-site .jtta-parents__heading.et_pb_text h2 .jtta-parents__line { font-size: 36px; line-height: 0.9644; } body.jtta-site .jtta-parents__cards.et_pb_row, body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 22px; max-width: 377px; margin: 0 auto; overflow: visible; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 5px; row-gap: 8px; align-items: center; justify-items: start; float: none; flex: 0 0 auto; width: 100%; max-width: 377px; height: 134px; min-height: 134px; margin: 0; padding: 19px 10px 19px 9px; border-radius: 26px; overflow: visible; } body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(3).jtta-parents__card, body.jtta-site.et_pb_gutters3 .jtta-parents__cards > .et_pb_column:nth-child(3).jtta-parents__card { column-gap: 23px; padding-left: 24px; padding-right: 18px; } body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(4).jtta-parents__card, body.jtta-site.et_pb_gutters3 .jtta-parents__cards > .et_pb_column:nth-child(4).jtta-parents__card { column-gap: 12px; padding: 19px 7px 19px 27px; } body.jtta-site .jtta-parents__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 95px; height: 66px; margin: 0; } body.jtta-site .jtta-parents__icon .et_pb_image_wrap { width: 95px; height: 66px; } /* Figma 168:789 crop */ body.jtta-site .jtta-parents__icon img { left: -0.58%; top: -7.58%; width: 100.35%; height: 153.15%; } body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(2) .jtta-parents__icon, body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(2) .jtta-parents__icon .et_pb_image_wrap { width: 87px; height: 70px; } body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(2) .jtta-parents__icon img { left: -0.8%; top: -2.46%; width: 100%; height: 117.92%; } body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(3) .jtta-parents__icon, body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(3) .jtta-parents__icon .et_pb_image_wrap { width: 65px; height: 52px; } body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(3) .jtta-parents__icon img, body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(4) .jtta-parents__icon img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(4) .jtta-parents__icon, body.jtta-site .jtta-parents__cards > .et_pb_column:nth-child(4) .jtta-parents__icon .et_pb_image_wrap { width: 70px; height: 56px; } body.jtta-site .jtta-parents__title.et_pb_text { grid-column: 2; grid-row: 1; width: 100%; max-width: 253px; align-self: end; } body.jtta-site .jtta-parents__title.et_pb_text p { margin: 0; font-size: 16px; line-height: var(--jtta-lh-body); text-align: left; } body.jtta-site .jtta-parents__body.et_pb_text { grid-column: 2; grid-row: 2; width: 100%; max-width: 253px; align-self: start; } body.jtta-site .jtta-parents__body.et_pb_text p { max-width: 253px; font-family: var(--jtta-font-body); font-size: 12px; line-height: var(--jtta-lh-body); text-align: left; } } /* ------------------------------------------------------------------------- Home — Built carefully. Proven honestly. (Figma 1440, node 73:1131) Band: intro 429 + gap 215 + grid 700 = 1344 inside px 44 (1352). ------------------------------------------------------------------------- */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; /* Figma 73:1132 — single gap between copy and cross grid */ gap: 215px; column-gap: 215px; row-gap: 0; background: #082248; padding: 22px var(--jtta-section-x); margin: 0; min-height: 355px; height: auto; overflow: visible; box-sizing: border-box; } body.jtta-site .jtta-proof .et_pb_row { padding: 0; margin: 0; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row { flex: 0 0 429px; width: 429px; max-width: 429px; margin: 0; /* Heading is 626px in Figma and intentionally overflows into the 215px gap */ overflow: visible; } body.jtta-site .jtta-proof__overline.et_pb_text p { margin: 0 0 12px; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 16px; line-height: var(--jtta-lh-overline); text-transform: uppercase; color: rgba(226, 232, 240, 0.52); } /* Figma 73:1136 — 626×171, two lines only: Built carefully. / Proven honestly. */ body.jtta-site .jtta-proof__heading.et_pb_text, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner { width: 626px; max-width: 626px; overflow: visible; } body.jtta-site .jtta-proof__heading.et_pb_text h2 { margin: 0; width: 626px; max-width: 626px; color: var(--jtta-white); font-size: 64px; line-height: 0.89135; /* Keep each side of
on one line — no 3rd-line wrap */ white-space: nowrap; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; align-items: stretch; justify-content: center; flex: 0 0 700px; width: 700px; max-width: 700px; height: 300px; min-height: 300px; margin: 0; overflow: visible; /* * Crosshair via backgrounds — Divi’s `.et_pb_row::after` clearfix * fights a decorative ::after and was clipping the right half of the line. */ background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)); background-size: 1px 100%, 100% 1px; background-position: center center, center center; background-repeat: no-repeat; } /* Kill Divi clearfix / old line pseudos on this grid */ body.jtta-site .jtta-proof__grid.et_pb_row::before, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row::before, body.jtta-site .jtta-proof__grid.et_pb_row::after, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row::after { content: none; display: none; background: none; width: 0; height: 0; margin: 0; padding: 0; border: 0; transform: none; } body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column { position: relative; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; float: none; width: auto; max-width: none; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 8px 16px; background: transparent; overflow: visible; } body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site .jtta-proof__icon.et_pb_image { display: flex; align-items: center; justify-content: center; width: 84px; height: 79px; /* Figma Frame 80 — icon 79 → copy y82 ≈ 3px */ margin: 0 auto 3px; line-height: 0; flex: 0 0 auto; } body.jtta-site .jtta-proof__icon .et_pb_image_wrap { width: 84px; height: 79px; margin: 0; } body.jtta-site .jtta-proof__icon img { display: block; width: 84px; height: 79px; object-fit: contain; } body.jtta-site .jtta-proof__title.et_pb_text { margin: 0; width: 100%; flex: 0 0 auto; } body.jtta-site .jtta-proof__title.et_pb_text p { margin: 0; font-family: var(--jtta-font-body); font-weight: 500; font-size: 18px; line-height: var(--jtta-lh-body); text-align: center; color: var(--jtta-white); } body.jtta-site .jtta-proof__body.et_pb_text { margin: 0; width: 100%; flex: 0 0 auto; } body.jtta-site .jtta-proof__body.et_pb_text p { margin: 0; max-width: 302px; margin-left: auto; margin-right: auto; font-family: var(--jtta-font-body); font-weight: 400; font-size: 14px; line-height: var(--jtta-lh-body); text-align: center; color: rgba(255, 255, 255, 0.51); } body.jtta-site.et_pb_gutters3 .jtta-proof.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 36px; column-gap: 36px; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row, body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { flex: 1 1 100%; width: 100%; max-width: 700px; margin: 0; } } @media (max-width: 980px) { body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { padding: 40px var(--jtta-section-x); gap: 28px; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { height: auto; min-height: 0; } body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column { min-height: 0; padding: 12px 10px; gap: 0; } body.jtta-site .jtta-proof__icon.et_pb_image { margin-bottom: 4px; } body.jtta-site .jtta-proof__grid.et_pb_row::after, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row::after { content: none; display: none; } } /* Proof heading — mobile can wrap; desktop stays 2 nowrap lines */ @media (max-width: 1023px) { body.jtta-site .jtta-proof__heading.et_pb_text, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text h2 { width: 100%; max-width: 100%; white-space: normal; } } /* ------------------------------------------------------------------------- Home — Experience JTTA (Figma 1440, node 73:1152) ------------------------------------------------------------------------- */ body.jtta-site .jtta-experience.et_pb_section { background: var(--jtta-white); padding: 22px var(--jtta-section-x); margin: 0; min-height: 354px; } body.jtta-site .jtta-experience .et_pb_row, body.jtta-site .jtta-experience .et_block_row.et_pb_row { width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; padding: 0; float: none; box-sizing: border-box; } body.jtta-site .jtta-experience__intro.et_pb_row { margin-bottom: 24px; } body.jtta-site .jtta-experience__overline.et_pb_text p { margin: 0; text-align: center; } body.jtta-site .jtta-experience__cards.et_pb_row, body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row { display: flex; align-items: flex-start; justify-content: center; gap: 16.759px; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; overflow: visible; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; float: none; flex: 0 0 259.392px; width: 259.392px; max-width: 259.392px; margin: 0; padding: 0; overflow: visible; } body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column > .jtta-experience__label.et_pb_module { margin-top: 16px; } body.jtta-site .jtta-experience__photo.et_pb_image { width: 259.392px; height: 206.685px; margin: 0 0 16px; line-height: 0; overflow: hidden; border-radius: 25.538px; } body.jtta-site .jtta-experience__photo .et_pb_image_wrap { display: block; width: 259.392px; height: 206.685px; margin: 0; overflow: hidden; border-radius: 25.538px; } body.jtta-site .jtta-experience__photo img { display: block; width: 259.392px; height: 206.685px; object-fit: cover; object-position: center; border-radius: 25.538px; } body.jtta-site .jtta-experience__label.et_pb_text { width: 100%; margin-top: 16px; text-align: center; background: transparent; } body.jtta-site .jtta-experience__label.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 24px; line-height: var(--jtta-lh-overline); text-align: center; color: #000; } body.jtta-site.et_pb_gutters3 .jtta-experience.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site .jtta-experience__cards.et_pb_row, body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row { flex-wrap: wrap; gap: 24px 16px; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { flex: 0 1 259.392px; width: 100%; max-width: 259.392px; margin: 0 auto; } } @media (max-width: 980px) { body.jtta-site .jtta-experience.et_pb_section { padding: 40px var(--jtta-section-x); } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { flex: 1 1 100%; max-width: 320px; } body.jtta-site .jtta-experience__photo.et_pb_image, body.jtta-site .jtta-experience__photo .et_pb_image_wrap, body.jtta-site .jtta-experience__photo img { width: 100%; max-width: 320px; height: auto; aspect-ratio: 259.392 / 206.685; } } /* ------------------------------------------------------------------------- Home — For Parents FAQ (Figma 1440 × 726, node 73:1169) ------------------------------------------------------------------------- */ body.jtta-site .jtta-faq.et_pb_section { background: var(--jtta-white); /* Frame 73:1169 h=726; keep py 22 with bottom fill */ padding: 22px var(--jtta-section-x) 44px; margin: 0; min-height: 726px; } body.jtta-site .jtta-faq .et_pb_row, body.jtta-site .jtta-faq .et_block_row.et_pb_row { width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; padding: 0; float: none; box-sizing: border-box; } body.jtta-site .jtta-faq__intro.et_pb_row { margin-bottom: 43px; } body.jtta-site .jtta-faq__overline.et_pb_text p { margin: 0 0 7px; } body.jtta-site .jtta-faq__heading.et_pb_text { max-width: 843px; margin-bottom: 29px; } body.jtta-site .jtta-faq__lead.et_pb_text { max-width: 843px; } body.jtta-site .jtta-faq__lead.et_pb_text p { font-family: var(--jtta-font-body); } body.jtta-site .jtta-faq__list.et_pb_toggle, body.jtta-site .jtta-faq .et_pb_toggle, body.jtta-site .jtta-faq__item.et_pb_toggle { background: transparent; border: 0; /* Figma 73:1181 — ~2px divider */ border-bottom: 2px solid rgba(15, 23, 42, 0.18); border-radius: 0; box-shadow: none; margin: 0 0 10px; padding: 0 0 8px; overflow: visible; } body.jtta-site .jtta-faq .et_pb_toggle:last-child, body.jtta-site .jtta-faq__item.et_pb_toggle:last-child { margin-bottom: 0; } body.jtta-site .jtta-faq .et_pb_toggle_title, body.jtta-site .jtta-faq__item .et_pb_toggle_title { position: relative; display: block; margin: 0; padding: 8px 48px 8px 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--jtta-btn-ink); cursor: pointer; } body.jtta-site .jtta-faq .et_pb_toggle_title:before, body.jtta-site .jtta-faq .et_pb_toggle_title:after { display: none; } body.jtta-site .jtta-faq .et_pb_toggle_title:after, body.jtta-site .jtta-faq__item .et_pb_toggle_title:after { display: block; content: "+"; position: absolute; top: 50%; right: 0; width: 20px; margin: 0; padding: 0; transform: translateY(-50%); border: 0; background: none; font-family: var(--jtta-font-body); font-weight: 400; font-size: 24px; line-height: 1; text-align: center; color: var(--jtta-red-text); } body.jtta-site .jtta-faq .et_pb_toggle_open .et_pb_toggle_title:after, body.jtta-site .jtta-faq__item.et_pb_toggle_open .et_pb_toggle_title:after { content: "−"; } body.jtta-site .jtta-faq .et_pb_toggle_content, body.jtta-site .jtta-faq__item .et_pb_toggle_content { padding: 2px 48px 8px 0; margin: 0; font-family: var(--jtta-font-ui); font-weight: 400; font-size: 16px; line-height: 1.45; color: var(--jtta-muted); } body.jtta-site .jtta-faq .et_pb_toggle_open .et_pb_toggle_content, body.jtta-site .jtta-faq__item.et_pb_toggle_open .et_pb_toggle_content { padding-top: 4px; padding-bottom: 4px; } body.jtta-site .jtta-faq .et_pb_toggle_content p, body.jtta-site .jtta-faq__item .et_pb_toggle_content p { margin: 0; padding: 0; } body.jtta-site .jtta-faq .et_pb_toggle_content p:empty { display: none; } body.jtta-site.et_pb_gutters3 .jtta-faq.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } /* Restore item spacing even when gutters zero module margin */ body.jtta-site.et_pb_gutters3 .jtta-faq.et_block_section .et_block_column > .jtta-faq__item.et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-faq.et_block_section .et_block_column > .et_pb_toggle.et_pb_module { margin-bottom: 10px; } body.jtta-site.et_pb_gutters3 .jtta-faq.et_block_section .et_block_column > .jtta-faq__item.et_pb_module:last-child, body.jtta-site.et_pb_gutters3 .jtta-faq.et_block_section .et_block_column > .et_pb_toggle.et_pb_module:last-child { margin-bottom: 0; } @media (max-width: 1023px) { body.jtta-site .jtta-faq .et_pb_toggle, body.jtta-site .jtta-faq__item.et_pb_toggle { margin: 0 0 8px; padding: 0 0 6px; } body.jtta-site .jtta-faq .et_pb_toggle_title, body.jtta-site .jtta-faq__item .et_pb_toggle_title { font-size: 18px; line-height: 1.3; padding: 8px 40px 8px 0; } body.jtta-site .jtta-faq .et_pb_toggle_content, body.jtta-site .jtta-faq__item .et_pb_toggle_content { font-size: 14px; line-height: 1.45; padding: 2px 40px 6px 0; } body.jtta-site .jtta-faq .et_pb_toggle_open .et_pb_toggle_content, body.jtta-site .jtta-faq__item.et_pb_toggle_open .et_pb_toggle_content { padding-top: 4px; padding-bottom: 4px; } body.jtta-site.et_pb_gutters3 .jtta-faq.et_block_section .et_block_column > .jtta-faq__item.et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-faq.et_block_section .et_block_column > .et_pb_toggle.et_pb_module { margin-bottom: 8px; } } @media (max-width: 767px) { body.jtta-site .jtta-faq .et_pb_toggle, body.jtta-site .jtta-faq__item.et_pb_toggle { margin: 0 0 6px; padding: 0 0 6px; } body.jtta-site .jtta-faq .et_pb_toggle_title, body.jtta-site .jtta-faq__item .et_pb_toggle_title { font-size: 16px; padding: 6px 36px 6px 0; } body.jtta-site .jtta-faq .et_pb_toggle_title:after, body.jtta-site .jtta-faq__item .et_pb_toggle_title:after { font-size: 24px; } body.jtta-site .jtta-faq .et_pb_toggle_content, body.jtta-site .jtta-faq__item .et_pb_toggle_content { font-size: 13px; padding: 2px 36px 6px 0; } } @media (max-width: 980px) { body.jtta-site .jtta-faq.et_pb_section { padding: 40px var(--jtta-section-x); } body.jtta-site .jtta-faq__heading.et_pb_text { margin-bottom: 20px; } } /* ------------------------------------------------------------------------- Home — CTA (Figma 1440, node 73:918) ------------------------------------------------------------------------- */ body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { background: var(--jtta-red-deep); /* Frame 99 1440×404; inner 73:919 @ y=56.5 h=291 */ padding: 56.5px 50px; margin: 0; min-height: 404px; overflow: visible; } @media (min-width: 1024px) { body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; } } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row { display: flex; align-items: center; justify-content: space-between; gap: 127px; width: 100%; max-width: 1340px; margin-left: auto; margin-right: auto; padding: 0; overflow: visible; float: none; box-sizing: border-box; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; float: none; flex: 0 1 850px; width: 850px; max-width: 850px; margin: 0; /* Figma 73:924 — 16px between buttons */ column-gap: 16px; row-gap: 0; } body.jtta-site .jtta-cta__heading.et_pb_text, body.jtta-site .jtta-cta__tagline.et_pb_text { flex: 0 0 100%; width: 100%; max-width: 100%; } /* Figma 73:921 — 21px heading → tagline (padding avoids margin collapse) */ body.jtta-site .jtta-cta__heading.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__heading.et_pb_module { margin: 0; padding: 0 0 21px; } /* Figma 73:922 — 850×171, two lines: …Deserves / More Than Good Marks. */ body.jtta-site .jtta-cta__heading.et_pb_text h2 { margin: 0; width: 100%; max-width: 850px; color: var(--jtta-white); font-size: 64px; line-height: 0.89135; white-space: nowrap; } /* Figma 73:920 — 28px text stack → buttons (217 → 245) */ body.jtta-site .jtta-cta__tagline.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__tagline.et_pb_module { margin: 0; padding: 0 0 28px; } body.jtta-site .jtta-cta__tagline.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 600; font-size: 18px; line-height: var(--jtta-lh-body); text-transform: uppercase; color: var(--jtta-white); } body.jtta-site .jtta-cta__copy .et_pb_button_module_wrapper { display: inline-flex; flex: 0 0 auto; vertical-align: middle; margin: 0; } body.jtta-site .jtta-cta__btn.et_pb_button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto; width: auto; max-width: none; font-family: var(--jtta-font-nav); text-decoration: none; white-space: nowrap; box-shadow: none; line-height: 1; cursor: pointer; transform: translateY(0); transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } body.jtta-site .jtta-cta__btn.et_pb_button::after { display: none; } /* Figma 73:925 — 243×46, pad 29.614/9.112, Montserrat Bold 19.427 */ body.jtta-site .jtta-cta__btn--primary.et_pb_button { width: 243px; min-width: 243px; height: 46px; padding: 9.112px 29.614px; background-color: var(--jtta-white); color: var(--jtta-btn-ink); border: 0; border-radius: var(--jtta-radius-btn); font-size: 19.427px; font-weight: 700; white-space: nowrap; } /* Figma 73:927 — 200×45, border 0.809 rgba(255,255,255,0.76), Medium 17.808 */ body.jtta-site .jtta-cta__btn--ghost.et_pb_button { width: 200px; min-width: 200px; height: 45px; padding: 9.112px 29.614px; background-color: transparent; color: var(--jtta-white); border: 0.809px solid rgba(255, 255, 255, 0.76); border-radius: var(--jtta-radius-btn); font-size: 17.808px; font-weight: 500; white-space: nowrap; } body.jtta-site .jtta-cta__btn--primary.et_pb_button:hover, body.jtta-site .jtta-cta__btn--primary.et_pb_button:focus { background-color: #f8fafc; color: var(--jtta-btn-ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); } body.jtta-site .jtta-cta__btn--primary.et_pb_button:active { transform: translateY(0) scale(0.98); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); } body.jtta-site .jtta-cta__btn--ghost.et_pb_button:hover, body.jtta-site .jtta-cta__btn--ghost.et_pb_button:focus { background-color: rgba(255, 255, 255, 0.12); color: var(--jtta-white); border-color: var(--jtta-white); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); } body.jtta-site .jtta-cta__btn--ghost.et_pb_button:active { transform: translateY(0) scale(0.98); box-shadow: none; } body.jtta-site .jtta-cta__btn.et_pb_button:focus-visible { outline: 2px solid var(--jtta-white); outline-offset: 3px; } body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { display: flex; align-items: center; justify-content: center; float: none; flex: 0 0 372px; width: 372px; max-width: 372px; margin: 0 0 0 auto; } body.jtta-site .jtta-cta__logo.et_pb_image { width: 372px; height: 164px; margin: 0; line-height: 0; } body.jtta-site .jtta-cta__logo .et_pb_image_wrap { display: block; width: 372px; height: 164px; margin: 0; } body.jtta-site .jtta-cta__logo img { display: block; width: 372px; height: 164px; object-fit: contain; opacity: 0.55; } body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } /* Beat gutters3 zero-margins — restore Figma 73:918 content gaps via padding */ body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__heading.et_pb_module { margin-top: 0; margin-bottom: 0; padding-bottom: 21px; } body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__tagline.et_pb_module { margin-top: 0; margin-bottom: 0; padding-bottom: 28px; } body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__copy .et_pb_button_module_wrapper { margin-top: 0; margin-bottom: 0; } @media (max-width: 1199px) { body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row { flex-wrap: wrap; gap: 32px; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column, body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { flex: 1 1 100%; width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 52px; white-space: normal; } body.jtta-site .jtta-cta__logo.et_pb_image, body.jtta-site .jtta-cta__logo .et_pb_image_wrap, body.jtta-site .jtta-cta__logo img { width: 100%; max-width: 372px; height: auto; aspect-ratio: 372 / 164; } } @media (max-width: 980px) { body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { padding: 40px var(--jtta-section-x); } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column { column-gap: 16px; } /* Keep Figma desktop rhythm — do not thin gaps on tablet */ body.jtta-site .jtta-cta__heading.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__heading.et_pb_module { margin: 0; padding-bottom: 21px; } body.jtta-site .jtta-cta__tagline.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__tagline.et_pb_module { margin: 0; padding-bottom: 28px; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 40px; } body.jtta-site .jtta-cta__copy .et_pb_button_module_wrapper, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__copy .et_pb_button_module_wrapper { margin: 0; } body.jtta-site .jtta-cta__btn--primary.et_pb_button, body.jtta-site .jtta-cta__btn--ghost.et_pb_button { width: auto; min-width: 0; padding: 9px 24px; white-space: nowrap; } } /* Figma mobile CTA 170:1085 — stacked, centered, content-width buttons */ @media (max-width: 1023px) { body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; padding: 25px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site #page-container .jtta-cta .jtta-cta__row.et_pb_row { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 26px; max-width: 379px; width: 100%; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; align-content: center; justify-content: flex-start; width: 100%; max-width: 379px; column-gap: 0; row-gap: 0; text-align: center; } body.jtta-site .jtta-cta__heading.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__heading.et_pb_module { padding-bottom: 7px; text-align: center; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: center; white-space: normal; } body.jtta-site .jtta-cta__tagline.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__tagline.et_pb_module { /* 21px from text stack to first button */ padding-bottom: 21px; text-align: center; } body.jtta-site .jtta-cta__tagline.et_pb_text p { font-size: 16px; text-align: center; } /* Hug content + center — avoid full-bleed primary / left stack */ body.jtta-site .jtta-cta__copy .et_pb_button_module_wrapper, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__copy .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper { display: flex; justify-content: center; align-self: center; width: fit-content; max-width: 100%; margin: 0 auto; flex: 0 0 auto; } body.jtta-site .jtta-cta__copy .et_pb_button_module_wrapper + .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: 21px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { display: inline-flex; width: auto; min-width: 0; max-width: 100%; height: 39.007px; box-sizing: border-box; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button { padding: 7.801px 25.354px; border-radius: 7.801px; font-size: 15.539px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { padding: 10.114px 32.87px; border-radius: 10.114px; font-size: 15.539px; font-weight: 400; } body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 258px; margin: 0 auto; } body.jtta-site .jtta-cta__logo.et_pb_image, body.jtta-site .jtta-cta__logo .et_pb_image_wrap, body.jtta-site .jtta-cta__logo img { width: 258px; max-width: 100%; height: auto; aspect-ratio: 258 / 121; opacity: 0.55; } } /* ------------------------------------------------------------------------- Desktop Figma typography + spacing lock (≥1024) Beats leftover 1199/980 “scaled desktop” type so 1024 laptop matches 1440 SoT. Priority: line-height → size/weight → margin/padding. ------------------------------------------------------------------------- */ @media (min-width: 1024px) { body.jtta-site .jtta-marks__heading.et_pb_text h2, body.jtta-site .jtta-future__heading.et_pb_text h2, body.jtta-site .jtta-gap__heading.et_pb_text h2, body.jtta-site .jtta-exists__heading.et_pb_text h2, body.jtta-site .jtta-way__heading.et_pb_text h2, body.jtta-site .jtta-inside__heading.et_pb_text h2, body.jtta-site .jtta-journey__heading.et_pb_text h2, body.jtta-site .jtta-depth__heading.et_pb_text h2, body.jtta-site .jtta-outcomes__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2 span, body.jtta-site .jtta-proof__heading.et_pb_text h2, body.jtta-site .jtta-faq__heading.et_pb_text h2, body.jtta-site .jtta-cta__heading.et_pb_text h2 { margin: 0; padding: 0; font-family: var(--jtta-font-display); font-weight: 400; font-size: 64px; line-height: 0.89135; } body.jtta-site .jtta-proof__heading.et_pb_text, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text h2 { width: 626px; max-width: 626px; white-space: nowrap; } /* Marks / some titles use Figma 96.44% */ body.jtta-site .jtta-marks__heading.et_pb_text h2 { line-height: 0.9644; } body.jtta-site .jtta-outcomes__heading.et_pb_text { margin: 0 0 29px; padding: 0; } body.jtta-site .jtta-outcomes__lead.et_pb_text p { margin: 0; font-family: var(--jtta-font-ui); font-weight: 400; font-size: 18px; line-height: 1.398; color: var(--jtta-muted); } body.jtta-site .jtta-parents__heading.et_pb_text h2 span { display: block; margin: 0; padding: 0; color: var(--jtta-red-text); font-size: 64px; line-height: 0.89135; } body.jtta-site .jtta-parents__heading.et_pb_text h2 .jtta-parents__line { display: block; margin: 0; padding: 0; font-size: 48px; line-height: 0.89135; color: var(--jtta-btn-ink); } body.jtta-site .jtta-parents__heading.et_pb_text h2 br { display: none; } body.jtta-site .jtta-parents__overline.et_pb_text p { margin: 0 0 10px; font-size: 16px; line-height: 1.372; font-weight: 600; } } /* ------------------------------------------------------------------------- HOME — Figma line-height system (pixel-perfect) Desktop SoT 73:736 · Mobile SoT 142:98 Problem: Divi body `line-height:1.7em` inherits into modules; some modules also set wrong `em` values on `.et_pb_text_inner` (e.g. hero lead 1.45em). Fix: lock LH on BOTH `.et_pb_text_inner` and heading/p — higher specificity than Divi `.et_pb_text_N .et_pb_text_inner`. Figma map (Anton): 0.9644 = hero + marks titles (96.44%) 0.89135 = all other multi-line Anton section titles (89.135%) Figma map (UI): 1.372 = Montserrat overlines 1.398 = Poppins/Inter body + labels 1.67 = roomy leads (future etc.) normal = hero lead / small Anton / Figma leading-normal ------------------------------------------------------------------------- */ /* Default homepage text → Figma body 1.398 (beats Divi body 1.7em inherit) */ body.jtta-site .et_pb_section[class*="jtta-"] .et_pb_text .et_pb_text_inner, body.jtta-site .et_pb_section[class*="jtta-"] .et_pb_text .et_pb_text_inner h1, body.jtta-site .et_pb_section[class*="jtta-"] .et_pb_text .et_pb_text_inner h2, body.jtta-site .et_pb_section[class*="jtta-"] .et_pb_text .et_pb_text_inner h3, body.jtta-site .et_pb_section[class*="jtta-"] .et_pb_text .et_pb_text_inner h4, body.jtta-site .et_pb_section[class*="jtta-"] .et_pb_text .et_pb_text_inner p, body.jtta-site .et_pb_section[class*="jtta-"] .et_pb_text .et_pb_text_inner span { line-height: 1.398; } /* --- Anton display 96.44% (hero, marks) --- */ body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner h1, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner span, body.jtta-site .jtta-marks__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-marks__heading.et_pb_text .et_pb_text_inner h2 { line-height: 0.9644; } /* --- Anton multi-line titles 89.135% --- */ body.jtta-site .jtta-future__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-future__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-future__heading.et_pb_text .et_pb_text_inner span, body.jtta-site .jtta-gap__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-gap__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-exists__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-exists__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-way__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-way__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-inside__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-inside__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-journey__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-journey__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-journey__heading.et_pb_text .et_pb_text_inner h3, body.jtta-site .jtta-depth__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-depth__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-outcomes__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-outcomes__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-parents__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-parents__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-parents__heading.et_pb_text .et_pb_text_inner span, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-experience__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-experience__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-faq__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-faq__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-cta__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-cta__heading.et_pb_text .et_pb_text_inner h2 { line-height: 0.89135; } /* Way step numbers — Figma Anton 32 / lh 1.398 */ body.jtta-site .jtta-way__num.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-way__num.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-way__num.et_pb_text .et_pb_text_inner h3, body.jtta-site .jtta-way__num.et_pb_text .et_pb_text_inner span { line-height: 1.398; } /* Overlines — Montserrat 1.372 */ body.jtta-site .jtta-overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-future__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-future__overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-gap__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-gap__overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-way__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-way__overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-inside__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-inside__overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-depth__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-depth__overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-parents__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-parents__overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-experience__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-experience__overline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-faq__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-faq__overline.et_pb_text .et_pb_text_inner p { line-height: 1.372; } /* Body / UI copy — 1.398 */ body.jtta-site .jtta-lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-gap__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-gap__lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-exists__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-exists__lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-way__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-way__lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-inside__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-inside__lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-journey__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-journey__lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-outcomes__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-outcomes__lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-faq__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-faq__lead.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-parents__body.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-parents__body.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-parents__title.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-parents__title.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-outcomes__label.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-outcomes__label.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-proof__title.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__title.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-proof__body.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__body.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-cta__tagline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-cta__tagline.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-future__body.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-future__body.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-future__title.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-future__title.et_pb_text .et_pb_text_inner h3, body.jtta-site .jtta-future__title.et_pb_text .et_pb_text_inner p, body.jtta-site .jtta-future__label.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-future__label.et_pb_text .et_pb_text_inner p { line-height: 1.398; } /* Proof overline */ body.jtta-site .jtta-proof__overline.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__overline.et_pb_text .et_pb_text_inner p { line-height: 1.372; } /* Roomy leads — Figma 1.67 */ body.jtta-site .jtta-future__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-future__lead.et_pb_text .et_pb_text_inner p { line-height: 1.67; } /* Hero lead — Figma leading-normal (beats Divi module 1.45em on inner) */ body.jtta-site .jtta-hero__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-hero__lead.et_pb_text .et_pb_text_inner p { line-height: normal; } /* Mobile Figma — Anton titles use 96.44% */ @media (max-width: 1023px) { body.jtta-site .jtta-future__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-future__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-future__heading.et_pb_text .et_pb_text_inner span, body.jtta-site .jtta-gap__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-gap__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-exists__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-exists__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-way__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-way__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-inside__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-inside__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-journey__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-journey__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-journey__heading.et_pb_text .et_pb_text_inner h3, body.jtta-site .jtta-depth__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-depth__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-outcomes__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-outcomes__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-parents__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-parents__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-parents__heading.et_pb_text .et_pb_text_inner span, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-experience__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-experience__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-faq__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-faq__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-cta__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-cta__heading.et_pb_text .et_pb_text_inner h2, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner h1, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner span, body.jtta-site .jtta-marks__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-marks__heading.et_pb_text .et_pb_text_inner h2 { line-height: 0.9644; } } /* ------------------------------------------------------------------------- Home — card hover (pointer) — all interactive cards ------------------------------------------------------------------------- */ body.jtta-site .jtta-future__card.et_pb_column, body.jtta-site .jtta-way__step.et_pb_column, body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site .jtta-faq__item { cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease; will-change: transform; } body.jtta-site .jtta-future__card.et_pb_column:hover, body.jtta-site .jtta-way__step.et_pb_column:hover, body.jtta-site .jtta-journey__card.et_pb_column:hover, body.jtta-site .jtta-depth__card.et_pb_column:hover, body.jtta-site .jtta-outcomes__card.et_pb_column:hover, body.jtta-site .jtta-parents__card.et_pb_column:hover, body.jtta-site .jtta-proof__cell.et_pb_column:hover, body.jtta-site .jtta-faq__item:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14); z-index: 4; } /* Soft lift for photo cards — slight image zoom */ body.jtta-site .jtta-journey__card.et_pb_column .jtta-journey__photo img { transition: transform 0.35s ease; } body.jtta-site .jtta-experience__card.et_pb_column { cursor: pointer; background: transparent; background-color: transparent; transition: transform 0.28s ease; } body.jtta-site .jtta-experience__card.et_pb_column:hover { background: transparent; background-color: transparent; transform: translateY(-6px); z-index: 4; } body.jtta-site .jtta-experience__label.et_pb_text, body.jtta-site .jtta-experience__label.et_pb_text:hover { background: transparent; background-color: transparent; } body.jtta-site .jtta-journey__card.et_pb_column:hover .jtta-journey__photo img { transform: translate(-50%, -50%) scale(1.04); } body.jtta-site .jtta-experience__card.et_pb_column:hover .jtta-experience__photo img { transform: none; } @media (prefers-reduced-motion: reduce) { body.jtta-site .jtta-future__card.et_pb_column, body.jtta-site .jtta-way__step.et_pb_column, body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site .jtta-faq__item, body.jtta-site .jtta-journey__card.et_pb_column .jtta-journey__photo img, body.jtta-site .jtta-experience__card.et_pb_column .jtta-experience__photo img { transition: none; } body.jtta-site .jtta-future__card.et_pb_column:hover, body.jtta-site .jtta-way__step.et_pb_column:hover, body.jtta-site .jtta-journey__card.et_pb_column:hover, body.jtta-site .jtta-depth__card.et_pb_column:hover, body.jtta-site .jtta-outcomes__card.et_pb_column:hover, body.jtta-site .jtta-parents__card.et_pb_column:hover, body.jtta-site .jtta-proof__cell.et_pb_column:hover, body.jtta-site .jtta-experience__card.et_pb_column:hover, body.jtta-site .jtta-faq__item:hover { transform: none; } } /* ------------------------------------------------------------------------- Late desktop center lock — CTA (+ Experience / FAQ handled elsewhere) Proof uses flex gap 215 (Figma 73:1132); do not reintroduce 4-col grid. ------------------------------------------------------------------------- */ @media (min-width: 1024px) { body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site #page-container .jtta-cta .jtta-cta__row.et_pb_row { width: 100%; max-width: 1340px; margin-left: auto; margin-right: auto; float: none; align-self: center; } body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-faq.et_pb_section { display: flex; flex-direction: column; align-items: center; } body.jtta-site .jtta-experience .et_pb_row, body.jtta-site .jtta-experience .et_block_row.et_pb_row, body.jtta-site .jtta-faq .et_pb_row, body.jtta-site .jtta-faq .et_block_row.et_pb_row { width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; float: none; align-self: center; } } /* ------------------------------------------------------------------------- Mobile Figma 142:98 — Exists + Way vertical lock (≤1023) ------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* Exists — 162:256 */ body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section { padding: 14.5px 22px; min-height: 0; height: auto; } body.jtta-site .jtta-exists__row.et_pb_row, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row { flex-direction: column; align-items: flex-start; gap: 25px; max-width: 376px; margin-left: auto; margin-right: auto; } /* Figma phone 162:256 — text above image (DOM is visual then copy) */ body.jtta-site .jtta-exists__copy.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_block_column { order: 1; } body.jtta-site .jtta-exists__visual.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_block_column { order: 2; } body.jtta-site .jtta-exists__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-exists__lead.et_pb_text p { font-size: 12px; line-height: normal; text-align: left; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { width: 100%; max-width: 376px; height: 250px; border-radius: 15px; overflow: hidden; } body.jtta-site .jtta-exists__image img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 15px; } /* Way — 166:414 vertical steps (Figma mobile, 20px sides) */ body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-way .et_pb_row, body.jtta-site .jtta-way .et_block_row.et_pb_row { max-width: 374px; margin-left: auto; margin-right: auto; } /* Intro: overline → heading (rocket top-right) → lead. Figma 162:336 */ body.jtta-site .jtta-way__intro.et_pb_row, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; margin: 0 0 40px; padding-right: 0; overflow: visible; z-index: 2; } body.jtta-site .jtta-way__heading-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_pb_column, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-way__heading-col.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-way__lead-col.et_pb_column { float: none; display: block; position: relative; width: 100%; max-width: 374px; flex: 0 0 auto; margin: 0; padding: 0; } /* Lead-col must NOT become rocket containing block — keep rocket on intro */ body.jtta-site .jtta-way__lead-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-way__lead-col.et_pb_column { display: block; position: static; flex-direction: column; align-items: stretch; gap: 0; } body.jtta-site .jtta-way__overline.et_pb_text p { font-size: 12px; line-height: 1.372; text-align: left; } body.jtta-site .jtta-way__heading.et_pb_text { /* Room for rocket on the right — do NOT pad inside a tight max-width (was wrapping every word) */ box-sizing: border-box; width: auto; max-width: calc(100% - 72px); margin: 7px 0 0; padding-right: 0; } body.jtta-site .jtta-way__heading.et_pb_text h2 { font-size: 36px; line-height: 0.9644; max-width: none; text-align: left; white-space: normal; overflow-wrap: normal; word-break: normal; } body.jtta-site .jtta-way__lead.et_pb_text { width: 100%; max-width: 100%; margin: 13px 0 0; overflow: visible; } body.jtta-site .jtta-way__lead.et_pb_text p { font-size: 12px; line-height: normal; text-align: left; white-space: normal; overflow: visible; overflow-wrap: break-word; word-break: normal; } /* Rocket beside heading only — never over lead (Figma 162:333) */ body.jtta-site .jtta-way__rocket.et_pb_image { position: absolute; top: 0; right: 0; bottom: auto; left: auto; z-index: 4; width: 60px; height: 63px; margin: 0; pointer-events: none; } body.jtta-site .jtta-way__rocket.et_pb_image, body.jtta-site .jtta-way__rocket .et_pb_image_wrap, body.jtta-site .jtta-way__rocket img { width: 60px; height: 63px; max-width: 60px; object-fit: contain; } body.jtta-site .jtta-way__steps.et_pb_row, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-way__steps.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; max-width: 373px; margin: 0 auto; padding: 0; overflow: visible; position: relative; z-index: 1; /* Card1 / others — room for icons; light tuck so 02–05 nums stay visible */ --way-c1: 165px; --way-c: 180px; --way-overlap: 12px; --way-arrow-w: 36px; --way-arrow-h: 34px; --way-line-w: 2px; --way-gap-step: calc(var(--way-c) - var(--way-overlap)); --way-gap1: calc(var(--way-c1) - var(--way-overlap) / 2); } /* * Vertical rail — arrows at seams between 1–2 … 4–5 (gap centers). */ body.jtta-site .jtta-way__steps::before { content: ""; display: block; position: absolute; z-index: 6; left: auto; right: calc((var(--way-arrow-w) - var(--way-line-w)) / 2); top: var(--way-gap1); bottom: auto; width: var(--way-line-w); height: calc(3 * var(--way-gap-step)); max-width: none; background: #082248; pointer-events: none; } /* Down arrows on rail — between steps 1-2 … 4-5 */ body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { content: ""; display: block; visibility: visible; opacity: 1; position: absolute; z-index: 10; left: auto; right: 0; top: calc(var(--way-gap1) - var(--way-arrow-h) / 2); bottom: auto; width: var(--way-arrow-w); height: calc(3 * var(--way-gap-step) + var(--way-arrow-h)); margin: 0; padding: 0; clear: none; line-height: 0; pointer-events: none; background-color: transparent; background-image: url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"); background-size: var(--way-arrow-w) var(--way-arrow-h); background-repeat: no-repeat; background-position: center 0, center var(--way-gap-step), center calc(2 * var(--way-gap-step)), center calc(3 * var(--way-gap-step)); transform: none; } body.jtta-site .jtta-way__steps > .et_pb_column, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-way__step.et_pb_column_1_5.et_block_column { position: relative; float: none; flex: 0 0 auto; width: 100%; max-width: 373px; min-height: 0; margin: 0; border-radius: 15px; overflow: hidden; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(n + 2) { margin-top: calc(0px - var(--way-overlap)); } body.jtta-site .jtta-way__arrow.et_pb_image, body.jtta-site .jtta-way__arrow.et_pb_image .et_pb_image_wrap, body.jtta-site .jtta-way__arrow img { display: none; visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; } /* Cascade: earlier cards above later (Figma 166:414) */ body.jtta-site .jtta-way__step--experience { box-sizing: border-box; position: relative; width: 100%; max-width: 373px; flex: 0 0 auto; height: var(--way-c1); min-height: var(--way-c1); max-height: var(--way-c1); padding: 12px 48px 12px 24px; overflow: hidden; z-index: 5; } body.jtta-site .jtta-way__step:not(.jtta-way__step--experience) { box-sizing: border-box; position: relative; width: 100%; max-width: 373px; flex: 0 0 auto; height: var(--way-c); min-height: var(--way-c); max-height: var(--way-c); padding: 12px 48px 12px 24px; overflow: hidden; z-index: 1; } /* Kill Divi module gaps inside phone cards */ body.jtta-site .jtta-way__step.et_pb_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-way__step.et_pb_column_1_5.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(1) { z-index: 5; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(2) { z-index: 4; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(3) { z-index: 3; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(4) { z-index: 2; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(5) { z-index: 1; } body.jtta-site .jtta-way__num.et_pb_text { margin: 0; } body.jtta-site .jtta-way__num.et_pb_text p { font-size: 24.444px; line-height: 1; } body.jtta-site .jtta-way__title.et_pb_text { margin: 0; } body.jtta-site .jtta-way__title.et_pb_text p { font-size: 22px; line-height: 1.15; } body.jtta-site .jtta-way__note.et_pb_text { margin: 2px 0 0; } body.jtta-site .jtta-way__note.et_pb_text p { font-size: 12px; line-height: 1.25; } body.jtta-site .jtta-way__icon.et_pb_image { margin: 6px 0 8px; } body.jtta-site .jtta-way__step--experience .jtta-way__icon.et_pb_image { margin-left: 0; } body.jtta-site .jtta-way__icon--experience .et_pb_image_wrap, body.jtta-site .jtta-way__icon--experience img { width: 56px; height: 40px; max-width: 56px; object-fit: contain; } body.jtta-site .jtta-way__icon--discover .et_pb_image_wrap, body.jtta-site .jtta-way__icon--discover img, body.jtta-site .jtta-way__icon--apply .et_pb_image_wrap, body.jtta-site .jtta-way__icon--apply img, body.jtta-site .jtta-way__icon--reflect .et_pb_image_wrap, body.jtta-site .jtta-way__icon--reflect img, body.jtta-site .jtta-way__icon--grow .et_pb_image_wrap, body.jtta-site .jtta-way__icon--grow img { width: 48px; height: 48px; max-width: 48px; object-fit: contain; } /* Kill hover lift on stacked mobile cards — breaks cascade paint */ body.jtta-site .jtta-way__step.et_pb_column:hover { transform: none; box-shadow: none; } /* Dims — compact mobile */ body.jtta-site .jtta-dims.et_pb_section, body.jtta-site .jtta-dims.et_block_section.et_pb_section { padding: 21px 9px; min-height: 0; height: auto; } body.jtta-site .jtta-dims__heading.et_pb_text h2 { font-size: 28px; line-height: var(--jtta-lh-display); text-align: center; } /* Inside — Figma 167:530 exact (pad 12/20, intro→track 19, grey rail) */ body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section { padding: 12px 20px; min-height: 0; height: auto; overflow: visible; background: #fff; } body.jtta-site .jtta-inside .et_pb_row, body.jtta-site .jtta-inside .et_block_row.et_pb_row { max-width: 374px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-inside__intro.et_pb_row, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 0; margin: 0; padding: 0; max-width: 374px; } body.jtta-site .jtta-inside__heading-col.et_pb_column, body.jtta-site .jtta-inside__lead-col.et_pb_column, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: 100%; max-width: 374px; margin: 0; padding: 0; } body.jtta-site .jtta-inside__overline.et_pb_text { margin: 0; padding: 0; } body.jtta-site .jtta-inside__overline.et_pb_text p { margin: 0; font-size: 12px; line-height: 1.372; text-align: left; color: #dc2626; } body.jtta-site .jtta-inside__heading.et_pb_text { margin: 7px 0 0; padding: 0; } body.jtta-site .jtta-inside__heading.et_pb_text h2 { margin: 0; font-size: 36px; line-height: 0.9644; text-align: left; white-space: normal; color: #0f172a; } body.jtta-site .jtta-inside__lead.et_pb_text { margin: 13px 0 0; padding: 0; } body.jtta-site .jtta-inside__lead.et_pb_text p { margin: 0; font-size: 12px; line-height: normal; text-align: left; color: #475569; } /* Intro → track = 19px (Figma annotation) */ body.jtta-site .jtta-inside__track.et_pb_row, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { display: block; position: relative; height: auto; min-height: 0; max-width: 374px; margin: 19px auto 0; padding: 0; overflow: visible; } body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 10px; width: 100%; height: auto; min-height: 0; position: relative; padding: 0; margin: 0; } /* Grey rail through red dots */ body.jtta-site .jtta-inside__track::before { content: ""; display: block; position: absolute; z-index: 0; left: 4.5px; right: auto; top: 4px; bottom: 4px; width: 1px; height: auto; max-width: none; background: #cbd5e1; pointer-events: none; } body.jtta-site .jtta-inside__item.et_pb_text, body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text, body.jtta-site .jtta-inside__item.et_pb_text:nth-child(n) { position: relative; left: auto; top: auto; right: auto; bottom: auto; transform: none; display: block; width: 100%; max-width: none; height: auto; min-height: 0; margin: 0; padding: 0; text-align: left; z-index: 1; } /* DOM: phase → span.dot → time → visual: dot | time | phase */ body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; width: 100%; max-width: 100%; margin: 0; padding: 0; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p, body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase, body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__time { width: auto; max-width: none; flex: 0 0 auto; margin: 0; padding: 0; text-align: left; } body.jtta-site .jtta-inside__item.et_pb_text p:has(.jtta-inside__dot) { order: 1; display: flex; align-items: center; width: 10px; min-width: 10px; flex: 0 0 10px; margin: 0; padding: 0; line-height: 0; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__dot { order: 1; display: block; flex: 0 0 auto; width: 10px; height: 10px; margin: 0; border-radius: 50%; background: #dc2626; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p.jtta-inside__time { order: 2; margin: 0 0 0 14px; padding: 0; min-width: 52px; font-family: var(--jtta-font-ui); font-weight: 400; font-size: 14px; line-height: 18px; color: #0f172a; white-space: nowrap; text-align: left; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p.jtta-inside__phase { order: 3; margin: 0 0 0 12px; padding: 0; font-family: var(--jtta-font-ui); font-weight: 500; font-size: 14px; line-height: 18px; color: #0d1b2a; text-align: left; white-space: nowrap; } /* Journey — Figma 167:670 stacked cards */ body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section { padding: 12px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-journey .et_pb_row, body.jtta-site .jtta-journey .et_block_row.et_pb_row { max-width: 374px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-journey__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-journey__lead.et_pb_text p { font-size: 12px; line-height: normal; text-align: left; } body.jtta-site .jtta-journey__cards.et_pb_row, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; align-items: stretch; gap: 24px; max-width: 374px; margin: 24px auto 0; } body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { flex: 0 0 auto; width: 100%; max-width: 374px; height: auto; min-height: 0; margin: 0; border-radius: 24px; overflow: hidden; } body.jtta-site .jtta-journey__photo.et_pb_image, body.jtta-site .jtta-journey__photo.et_pb_image.et_flex_module { position: relative; width: 100%; height: auto; aspect-ratio: 373 / 322; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image > .et_pb_image_wrap, body.jtta-site .jtta-journey__photo.et_flex_module > .et_pb_image_wrap { display: block; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image img, body.jtta-site .jtta-journey__photo .et_pb_image_wrap img { position: absolute; left: 50%; top: 50%; width: 128%; max-width: none; height: 128%; object-fit: cover; border-radius: 0; transform: translate(-50%, -50%); } } /* ------------------------------------------------------------------------- Mobile Figma 142:98 — Depth → CTA → Footer complete lock ------------------------------------------------------------------------- */ @media (max-width: 1023px) { /* Depth — 168:684 */ body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-depth .et_pb_row, body.jtta-site .jtta-depth .et_block_row.et_pb_row { max-width: 379px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-depth__overline.et_pb_text p { font-size: 12px; text-align: center; } body.jtta-site .jtta-depth__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: center; } body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; gap: 18px; max-width: 379px; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; flex: 0 0 auto; width: 100%; max-width: 379px; height: auto; min-height: 0; margin: 0; } body.jtta-site .jtta-depth__go.et_pb_image { position: relative; grid-column: 2; grid-row: 2; justify-self: end; right: auto; bottom: auto; } body.jtta-site .jtta-depth__banner.et_pb_row, body.jtta-site .jtta-depth__banner.et_block_row.et_pb_row { width: 100%; max-width: 379px; border-radius: 999px; margin: 18px auto 0; } /* Outcomes — 168:780 2-col grid */ body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-outcomes .et_pb_row, body.jtta-site .jtta-outcomes .et_block_row.et_pb_row { max-width: 379px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-outcomes__heading.et_pb_text h2 { font-size: 32px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-outcomes__lead.et_pb_text p { font-size: 12px; line-height: normal; text-align: left; } body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 379px; } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column { flex: none; width: 100%; max-width: none; margin: 0; } body.jtta-site .jtta-outcomes__grid.et_pb_row + .jtta-outcomes__grid.et_pb_row { margin-top: 14px; } /* Parents — 170:857 stacked */ body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-parents .et_pb_row, body.jtta-site .jtta-parents .et_block_row.et_pb_row { max-width: 379px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-parents__heading.et_pb_text h2 { font-size: 28px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; gap: 14px; max-width: 379px; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column { flex: 0 0 auto; width: 100%; max-width: 379px; margin: 0; } /* Proof — stacked band (mobile SoT base for ≤1023; 768 overrides width) */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; column-gap: 25px; row-gap: 25px; padding: 12px 20px; min-height: 0; height: auto; grid-template-columns: none; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row, body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { grid-column: auto; flex: 0 0 auto; width: 100%; max-width: 374px; margin: 0 auto; } body.jtta-site .jtta-proof__overline.et_pb_text p { margin: 0 0 7px; font-size: 12px; color: rgba(255, 255, 255, 0.57); } body.jtta-site .jtta-proof__heading.et_pb_text, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text h2 { width: 100%; max-width: 367px; } body.jtta-site .jtta-proof__heading.et_pb_text h2 { font-size: 36px; line-height: 0.9644; white-space: normal; text-align: left; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; max-width: 374px; height: 160px; min-height: 160px; } body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column { min-height: 0; padding: 4px 10px; gap: 0; } body.jtta-site .jtta-proof__icon.et_pb_image { width: 45px; height: 42px; margin: 0 auto 2px; } body.jtta-site .jtta-proof__icon .et_pb_image_wrap, body.jtta-site .jtta-proof__icon img { width: 45px; height: 42px; } body.jtta-site .jtta-proof__title.et_pb_text p { font-size: 9.612px; line-height: 1.398; } body.jtta-site .jtta-proof__body.et_pb_text p { max-width: 100%; font-size: 7.476px; line-height: 1.398; } /* Experience — 170:921 stacked portrait cards */ body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-experience .et_pb_row, body.jtta-site .jtta-experience .et_block_row.et_pb_row { max-width: 340px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-experience__overline.et_pb_text p { font-size: 12px; text-align: center; } body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 340px; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column { flex: 0 0 auto; width: 100%; max-width: 340px; margin: 0; } body.jtta-site .jtta-experience__photo .et_pb_image_wrap, body.jtta-site .jtta-experience__photo img { width: 100%; border-radius: 20px; overflow: hidden; } body.jtta-site .jtta-experience__label.et_pb_text p { text-align: center; font-size: 16px; } /* FAQ — 170:1019 */ body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section { padding: 24px 20px 40px; min-height: 0; height: auto; } body.jtta-site .jtta-faq .et_pb_row, body.jtta-site .jtta-faq .et_block_row.et_pb_row { max-width: 379px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-faq__overline.et_pb_text p { font-size: 12px; text-align: left; } body.jtta-site .jtta-faq__heading.et_pb_text h2 { font-size: 32px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-faq__lead.et_pb_text p { font-size: 12px; line-height: normal; text-align: left; } /* CTA — already mostly locked; keep brand under copy */ body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; padding: 25px 20px; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row { align-self: center; } /* Footer — Figma 172:1107 stacked columns + dividers */ .jtta-footer { padding: 40px 28px 28px; min-height: 0; } .jtta-footer__inner { max-width: 364px; margin: 0 auto; gap: 22px; } .jtta-footer__top { flex-direction: column; align-items: flex-start; gap: 22px; } .jtta-footer__brand { width: 100%; } .jtta-footer__logo, .jtta-footer__logo img { width: 160px; height: auto; } .jtta-footer__cols { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 0; } .jtta-footer__col { width: 100%; max-width: none; padding: 18px 0; border-top: 1px solid rgba(148, 163, 184, 0.28); } .jtta-footer__col:first-child { border-top: 0; padding-top: 0; } .jtta-footer__heading { margin-bottom: 17px; } .jtta-footer__menu { gap: 19px; } .jtta-footer__bottom { display: flex; flex-direction: column; align-items: stretch; gap: 28px; margin-top: 0; padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, 0.28); } .jtta-footer__meta { display: flex; justify-content: space-between; align-items: center; order: 1; width: 100%; gap: 43px; } .jtta-footer__copy { order: 2; width: 100%; margin: 0; text-align: center; font-size: 14.44px; color: rgba(148, 163, 184, 0.41); } .jtta-footer__email, .jtta-footer__note { font-size: 14px; white-space: nowrap; } } /* ------------------------------------------------------------------------- 1024px laptop band (1024–1199) — Desktop Figma with REDUCED columns 1440 = full multi-column; here wrap/compress to fewer columns. Does not change ≤1023 or ≥1440. No !important. ------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1199px) { /* School vs Future — drop desktop min-height so banner sits flush */ body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { min-height: 0; height: auto; padding: 22px 0 0; } .jtta-header__inner { max-width: var(--jtta-content); gap: 36px; height: var(--jtta-header-h); } .jtta-header__logo img { width: 126px; height: 69px; } .jtta-header__menu { gap: 28px; } .jtta-header__menu a { font-size: 14px; } .jtta-btn--primary { width: 140px; height: 40px; padding: 8px 20px; font-size: 18px; border-radius: 8px; } body.jtta-site .et_pb_section.jtta-marks > .et_pb_row, body.jtta-site .et_pb_section.jtta-future > .et_pb_row, body.jtta-site .et_pb_section.jtta-gap > .et_pb_row, body.jtta-site .et_pb_section.jtta-exists > .et_pb_row, body.jtta-site .et_pb_section.jtta-way > .et_pb_row, body.jtta-site .et_pb_section.jtta-inside > .et_pb_row, body.jtta-site .et_pb_section.jtta-journey > .et_pb_row, body.jtta-site .et_pb_section.jtta-depth > .et_pb_row, body.jtta-site .et_pb_section.jtta-outcomes > .et_pb_row, body.jtta-site .et_pb_section.jtta-parents > .et_pb_row, body.jtta-site .et_pb_section.jtta-proof > .et_pb_row, body.jtta-site .et_pb_section.jtta-experience > .et_pb_row, body.jtta-site .et_pb_section.jtta-faq > .et_pb_row, body.jtta-site .et_pb_section.jtta-marks > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-future > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-exists > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-way > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-inside > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-journey > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-depth > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-outcomes > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-parents > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-experience > .et_block_row.et_pb_row, body.jtta-site .et_pb_section.jtta-faq > .et_block_row.et_pb_row { max-width: var(--jtta-row); margin-left: auto; margin-right: auto; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-marks__heading.et_pb_text h2, body.jtta-site .jtta-future__heading.et_pb_text h2, body.jtta-site .jtta-gap__heading.et_pb_text h2, body.jtta-site .jtta-exists__heading.et_pb_text h2, body.jtta-site .jtta-way__heading.et_pb_text h2, body.jtta-site .jtta-inside__heading.et_pb_text h2, body.jtta-site .jtta-journey__heading.et_pb_text h2, body.jtta-site .jtta-depth__heading.et_pb_text h2, body.jtta-site .jtta-outcomes__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2 span, body.jtta-site .jtta-proof__heading.et_pb_text h2, body.jtta-site .jtta-experience__heading.et_pb_text h2, body.jtta-site .jtta-faq__heading.et_pb_text h2, body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 46px; } body.jtta-site .jtta-parents__heading.et_pb_text h2 .jtta-parents__line { font-size: 34px; } body.jtta-site .jtta-future__title.et_pb_text h3, body.jtta-site .jtta-journey__name.et_pb_text h3 { font-size: 40px; } body.jtta-site .jtta-way__num.et_pb_text p, body.jtta-site .jtta-way__title.et_pb_text p { font-size: 22px; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase { font-size: 18px; } body.jtta-site .jtta-future__body.et_pb_text p, body.jtta-site .jtta-way__note.et_pb_text p, body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__time, body.jtta-site .jtta-outcomes__lead.et_pb_text p { font-size: 15px; } body.jtta-site .jtta-overline.et_pb_text p, body.jtta-site .jtta-future__overline.et_pb_text p, body.jtta-site .jtta-gap__overline.et_pb_text p, body.jtta-site .jtta-way__overline.et_pb_text p, body.jtta-site .jtta-inside__overline.et_pb_text p, body.jtta-site .jtta-depth__overline.et_pb_text p, body.jtta-site .jtta-parents__overline.et_pb_text p, body.jtta-site .jtta-experience__overline.et_pb_text p, body.jtta-site .jtta-faq__overline.et_pb_text p, body.jtta-site .jtta-marks__lead.et_pb_text p, body.jtta-site .jtta-hero__meta.et_pb_text p { font-size: 14px; } body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0 { padding: 64px var(--jtta-section-x) 20px; height: var(--jtta-hero-h); min-height: var(--jtta-hero-h); } body.jtta-site .jtta-hero.et_pb_section .et_pb_row { max-width: 948px; } /* Copy + CTAs need room for both buttons + gap (not lead-only 329) */ body.jtta-site .jtta-hero__copy-row.et_pb_row { max-width: 480px; } body.jtta-site .jtta-hero__lead.et_pb_text { margin-top: 26px; } body.jtta-site .jtta-hero__lead.et_pb_text p { max-width: 329px; font-size: 14px; } /* Buttons: content-sized — fixed 113/206 clipped labels under desktop padding !important */ body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { display: inline-flex; vertical-align: middle; margin: 28px 0 0; width: auto; max-width: none; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left: 12px; } body.jtta-site #page-container .jtta-hero .et_pb_button_0_wrapper { margin-right: 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: none; height: auto; min-height: 40px; max-height: none; padding: 8px 20px !important; white-space: nowrap !important; overflow: visible; line-height: normal !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button { font-size: 16px !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { font-size: 15px !important; } body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { gap: 80px; max-width: 948px; } /* Marks: 2-col */ body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { height: auto; min-height: 279px; padding: 24px var(--jtta-section-x); overflow: visible; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row.jtta-marks__row { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--jtta-row); height: auto; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column { float: none; width: auto; max-width: 520px; flex: 1 1 520px; height: auto; gap: 12px; } body.jtta-site .jtta-marks__visual.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column { float: none; width: 360px; max-width: 360px; flex: 0 0 360px; height: 279px; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { min-height: 0; font-size: 46px; line-height: 0.9644; } body.jtta-site .jtta-marks__lead.et_pb_text { max-width: 480px; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 360px; max-width: 360px; height: 279px; background-size: 160.21% 100%; background-position: left center; } /* Future: keep Figma 3-in-a-row (73:789), fluid + both connectors */ body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding: 32px var(--jtta-section-x); min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-future__intro.et_pb_row, body.jtta-site .jtta-future__intro.et_block_row.et_pb_row { flex-wrap: nowrap; gap: 24px; margin-bottom: 28px; } body.jtta-site .jtta-future__heading-col.et_pb_column, body.jtta-site .jtta-future__lead-col.et_pb_column { float: none; width: auto; max-width: none; flex: 1 1 0; min-width: 0; } body.jtta-site .jtta-future__heading.et_pb_text, body.jtta-site .jtta-future__heading.et_pb_text h2 { max-width: 360px; font-size: 46px; } body.jtta-site .jtta-future__lead.et_pb_text p { font-size: 15px; } body.jtta-site .jtta-future__cards.et_pb_row, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 28px; width: 100%; max-width: var(--jtta-row); margin: 0 auto; overflow: visible; } body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { float: none; display: flex; flex-direction: column; flex: 1 1 0; width: auto; min-width: 0; max-width: none; min-height: 0; height: auto; margin: 0; gap: 12px; overflow: visible; } body.jtta-site .jtta-future__cards > .jtta-future__card--navigate, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .jtta-future__card--navigate { flex: 1 1 0; width: auto; max-width: none; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate { padding: 40px 24px 48px; } body.jtta-site .jtta-future__title.et_pb_text h3 { font-size: 42px; } body.jtta-site .jtta-future__title.et_pb_text h3::after { display: block; width: 52px; height: 3px; margin-top: 12px; } body.jtta-site .jtta-future__body.et_pb_text p { font-size: 16px; } body.jtta-site .jtta-future__icon--learn .et_pb_image_wrap, body.jtta-site .jtta-future__icon--learn img { width: 81px; height: 82px; } body.jtta-site .jtta-future__icon--perform .et_pb_image_wrap, body.jtta-site .jtta-future__icon--perform img { width: 74px; height: 89px; } body.jtta-site .jtta-future__icon--navigate .et_pb_image_wrap, body.jtta-site .jtta-future__icon--navigate img { width: 81px; height: 82px; } /* Both side connectors — between Learn→Perform and Perform→Navigate */ body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { content: ""; display: block; visibility: visible; opacity: 1; position: absolute; z-index: 10; top: 50%; right: -42px; bottom: auto; left: auto; width: 56px; height: 61px; margin: 0; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); pointer-events: none; } body.jtta-site .jtta-future__card--learn::after { background-image: url("../images/jtta-future-arrow-red.png"); } body.jtta-site .jtta-future__card--perform::after { background-image: url("../images/jtta-future-arrow-blue.png"); } body.jtta-site .jtta-future__cards > .jtta-future__card--learn { z-index: 3; } body.jtta-site .jtta-future__cards > .jtta-future__card--perform { z-index: 2; } body.jtta-site .jtta-future__cards > .jtta-future__card--navigate { z-index: 1; } /* Exists: Figma 73:1018 image | copy, fluid — beat gutters3 604/615 */ body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section { min-height: 0; height: auto; padding: 22px var(--jtta-section-x); overflow: visible; } body.jtta-site .jtta-exists__row.et_pb_row, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: var(--jtta-row); margin: 0 auto; } body.jtta-site .jtta-exists__visual.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_block_column { float: none; flex: 0 1 440px; width: auto; min-width: 0; max-width: 440px; margin: 0; } body.jtta-site .jtta-exists__copy.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_block_column { float: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex: 1 1 0; width: auto; min-width: 0; max-width: 480px; margin: 0; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { position: relative; width: 100%; max-width: 440px; height: auto; aspect-ratio: 604 / 402; border-radius: 20px; overflow: hidden; } body.jtta-site .jtta-exists__image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; } body.jtta-site .jtta-exists__heading.et_pb_text, body.jtta-site .jtta-exists__heading.et_pb_text h2 { max-width: 100%; text-align: right; font-size: 42px; } body.jtta-site .jtta-exists__lead.et_pb_text, body.jtta-site .jtta-exists__lead.et_pb_text p { max-width: 100%; text-align: right; font-size: 15px; } /* Way: Figma 1024 — fluid 5-in-a-row + horizontal connector (left-aligned cards) */ body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section { padding: 28px var(--jtta-section-x); min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-way__intro.et_pb_row, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-bottom: 32px; } body.jtta-site .jtta-way__heading-col.et_pb_column { float: none; width: auto; max-width: 400px; min-width: 0; flex: 1 1 auto; margin: 0; } body.jtta-site .jtta-way__lead-col.et_pb_column { float: none; display: flex; flex-direction: row; align-items: center; gap: 20px; width: auto; max-width: 360px; margin-left: auto; min-width: 0; flex: 0 1 360px; } body.jtta-site .jtta-way__rocket.et_pb_image { position: static; top: auto; right: auto; left: auto; bottom: auto; z-index: auto; width: 74px; height: 77px; margin: 0; flex: 0 0 74px; pointer-events: auto; } body.jtta-site .jtta-way__rocket.et_pb_image, body.jtta-site .jtta-way__rocket .et_pb_image_wrap, body.jtta-site .jtta-way__rocket img { position: static; width: 74px; height: 77px; object-fit: contain; } body.jtta-site .jtta-way__lead.et_pb_text { max-width: 260px; margin: 0; } body.jtta-site .jtta-way__lead.et_pb_text p { text-align: left; white-space: normal; } body.jtta-site .jtta-way__steps.et_pb_row, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-way__steps.et_block_row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 10px; width: 100%; max-width: var(--jtta-row); margin: 0 auto; overflow: visible; padding-bottom: 0; position: relative; } /* Horizontal connector — 5 equal flex cards + gap 10px; first→last arrow centers */ body.jtta-site .jtta-way__steps::before { content: ""; display: block; visibility: visible; opacity: 1; position: absolute; z-index: 6; /* Junction centers: cardW + gap/2 … ; cardW = (100% - 40px) / 5 */ left: calc((100% - 40px) / 5 + 5px); right: calc((100% - 40px) / 5 + 5px); top: auto; bottom: 38px; width: auto; max-width: none; height: 2px; background: #082248; pointer-events: none; } body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { content: ""; display: block; visibility: visible; opacity: 1; position: absolute; z-index: 10; left: 0; right: 0; top: auto; /* Center 32px arrows on 2px line at bottom 38px → bottom 23 */ bottom: 23px; width: auto; max-width: none; height: 32px; margin: 0; padding: 0; clear: none; line-height: 0; pointer-events: none; background-color: transparent; background-image: url("../images/jtta-way-step-arrow.svg"), url("../images/jtta-way-step-arrow.svg"), url("../images/jtta-way-step-arrow.svg"), url("../images/jtta-way-step-arrow.svg"); background-repeat: no-repeat; background-size: 30px 32px; /* 1024 — arrow left edges between 5 equal cards */ background-position: calc((100% - 21px) / 5 - 10px) 0, calc(2 * ((100% - 19px) / 5)) 0, calc(3 * ((100% - 13px) / 5) + 10px) 0, calc(4 * ((100% - 11px) / 5) + 20px) 0; transform: none; } body.jtta-site .jtta-way__steps > .et_pb_column, body.jtta-site .jtta-way__step--experience, body.jtta-site .jtta-way__step:not(.jtta-way__step--experience), body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-way__step.et_pb_column_1_5.et_block_column { float: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex: 1 1 0; width: auto; min-width: 0; max-width: none; margin: 0; min-height: 250px; height: auto; border-radius: 12px; padding: 18px 14px 56px 16px; text-align: left; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(n) { margin-left: 0; margin-top: 0; } body.jtta-site .jtta-way__step--experience, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column { padding: 18px 14px 56px 16px; } body.jtta-site .jtta-way__num.et_pb_text, body.jtta-site .jtta-way__title.et_pb_text, body.jtta-site .jtta-way__note.et_pb_text, body.jtta-site .jtta-way__icon.et_pb_image { width: 100%; max-width: 100%; text-align: left; } body.jtta-site .jtta-way__num.et_pb_text p { font-size: 28px; text-align: left; } body.jtta-site .jtta-way__title.et_pb_text p { font-size: 22px; white-space: normal; text-align: left; } body.jtta-site .jtta-way__note.et_pb_text p { font-size: 13px; white-space: normal; text-align: left; } body.jtta-site .jtta-way__icon.et_pb_image { margin: 10px 0 14px; } body.jtta-site .jtta-way__step--experience .jtta-way__icon.et_pb_image { margin-left: 0; } body.jtta-site .jtta-way__icon--experience .et_pb_image_wrap, body.jtta-site .jtta-way__icon--experience img { width: 64px; height: 64px; } body.jtta-site .jtta-way__icon--discover .et_pb_image_wrap, body.jtta-site .jtta-way__icon--discover img, body.jtta-site .jtta-way__icon--apply .et_pb_image_wrap, body.jtta-site .jtta-way__icon--apply img, body.jtta-site .jtta-way__icon--reflect .et_pb_image_wrap, body.jtta-site .jtta-way__icon--reflect img, body.jtta-site .jtta-way__icon--grow .et_pb_image_wrap, body.jtta-site .jtta-way__icon--grow img { width: 56px; height: 56px; } /* Module arrows stay off — row ::after draws the 4 connectors */ body.jtta-site .jtta-way__arrow.et_pb_image { display: none; } /* Inside: horizontal timeline */ body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section { padding: 0 var(--jtta-section-x) 32px; min-height: 0; height: auto; } body.jtta-site .jtta-inside__intro.et_pb_row, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row { flex-wrap: nowrap; margin-bottom: 28px; } body.jtta-site .jtta-inside__heading-col.et_pb_column { max-width: 444px; } body.jtta-site .jtta-inside__lead-col.et_pb_column { max-width: 278px; margin-left: auto; } body.jtta-site .jtta-inside__track.et_pb_row, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { display: block; height: 80px; min-height: 80px; max-width: var(--jtta-row); margin: 0 auto; padding-top: 0; overflow: visible; } body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: block; width: 100%; max-width: 960px; height: 80px; min-height: 80px; position: relative; padding-left: 0; gap: 0; } body.jtta-site .jtta-inside__track::before { content: ""; display: block; position: absolute; z-index: 0; left: 0; right: 0; top: 31px; bottom: auto; width: auto; height: 1px; background: #000; } body.jtta-site .jtta-inside__item.et_pb_text, body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text, body.jtta-site .jtta-inside__item.et_pb_text:nth-child(n) { position: absolute; top: 0; left: auto; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: max-content; max-width: none; text-align: center; z-index: 1; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(1) { left: 4.185%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(2) { left: 19.163%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(3) { left: 34.141%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(4) { left: 49.119%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(5) { left: 64.097%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(6) { left: 79.515%; } body.jtta-site .jtta-inside__item.et_pb_text:nth-child(7) { left: 95.448%; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } body.jtta-site .jtta-inside__item.et_pb_text p:has(.jtta-inside__dot) { order: 0; width: auto; margin: 0; line-height: 0; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase { order: -1; margin: 0 0 9px; font-size: 18px; text-align: center; white-space: nowrap; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__time { order: 1; margin: 9px 0 0; font-size: 13px; text-align: center; } body.jtta-site .jtta-inside__dot { width: 10px; height: 11px; margin: 0 auto; border-radius: 5px; background: #dc2626; } /* Journey: keep Figma 3-in-a-row (73:976), scale cards to fit 1024 */ body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section { padding: 18px var(--jtta-section-x) 28px; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-journey__intro.et_pb_row, body.jtta-site .jtta-journey__intro.et_block_row.et_pb_row { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 32px; } body.jtta-site .jtta-journey__heading-col.et_pb_column { flex: 1 1 0; max-width: 480px; min-width: 0; } body.jtta-site .jtta-journey__lead-col.et_pb_column { flex: 0 1 280px; max-width: 280px; margin-left: auto; min-width: 0; } body.jtta-site .jtta-journey__heading.et_pb_text h2 { font-size: 42px; white-space: normal; } body.jtta-site .jtta-journey__cards.et_pb_row, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-journey__cards.et_block_row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 16px; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; overflow: visible; } body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .jtta-journey__card.et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { display: flex; flex-direction: column; flex: 1 1 0; width: auto; min-width: 0; max-width: none; height: auto; min-height: 0; margin: 0; border-radius: 36px; overflow: hidden; } body.jtta-site .jtta-journey__cards > .et_pb_column:last-child, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .et_pb_column:last-child { max-width: none; } body.jtta-site .jtta-journey__photo.et_pb_image, body.jtta-site .jtta-journey__photo.et_pb_image.et_flex_module { position: relative; width: 100%; height: auto; margin: 0; aspect-ratio: 373 / 341; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image > .et_pb_image_wrap, body.jtta-site .jtta-journey__photo.et_flex_module > .et_pb_image_wrap { display: block; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image img, body.jtta-site .jtta-journey__photo .et_pb_image_wrap img { position: absolute; left: 50%; top: 50%; width: 128%; max-width: none; height: 128%; object-fit: cover; border-radius: 0; transform: translate(-50%, -50%); } body.jtta-site .jtta-journey__name.et_pb_text, body.jtta-site .jtta-journey__meta.et_pb_text, body.jtta-site .jtta-journey__tag.et_pb_text { padding-left: 22px; padding-right: 56px; } body.jtta-site .jtta-journey__name.et_pb_text h3 { font-size: 36px; margin-top: 10px; } body.jtta-site .jtta-journey__meta.et_pb_text p, body.jtta-site .jtta-journey__tag.et_pb_text p { font-size: 14px; } body.jtta-site .jtta-journey__go.et_pb_image { right: 18px; bottom: 20px; width: 44px; height: 44px; } body.jtta-site .jtta-journey__go .et_pb_image_wrap { width: 44px; height: 44px; } body.jtta-site .jtta-journey__go img { width: 18px; height: 11px; } /* Depth: 2-col, scaled — arrow in-flow under copy */ body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding: 32px var(--jtta-section-x); min-height: 0; height: auto; } body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { flex-wrap: nowrap; gap: 20px; max-width: var(--jtta-row); } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 6px; flex: 1 1 0; width: auto; max-width: none; min-height: 0; height: auto; padding: 28px 24px 18px 12px; border-radius: 36px; } body.jtta-site .jtta-depth__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 2; margin: 12px 0 0; } body.jtta-site .jtta-depth__icon .et_pb_image_wrap, body.jtta-site .jtta-depth__icon img { width: 96px; height: 92px; } body.jtta-site .jtta-depth__copy.et_pb_text { grid-column: 2; grid-row: 1; max-width: 100%; min-width: 0; } body.jtta-site .jtta-depth__copy.et_pb_text h3 { font-size: 36px; } body.jtta-site .jtta-depth__copy.et_pb_text .jtta-depth__months { font-size: 16px; } body.jtta-site .jtta-depth__copy.et_pb_text li { font-size: 14px; margin-bottom: 8px; } body.jtta-site .jtta-depth__go.et_pb_image { position: relative; grid-column: 2; grid-row: 2; justify-self: end; right: auto; bottom: auto; margin: 4px 0 0; } body.jtta-site .jtta-depth__card--explorer .jtta-depth__go, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go img { width: 44px; height: 41px; } body.jtta-site .jtta-depth__card--discovery .jtta-depth__go, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go img { width: 38px; height: 35px; } /* Outcomes / Parents: 4 → 2×2 */ body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-parents.et_pb_section { padding: 18px var(--jtta-section-x) 28px; min-height: 0; height: auto; } body.jtta-site .jtta-outcomes__grid.et_pb_row, body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row, body.jtta-site .jtta-parents__cards.et_pb_row, body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row { display: flex; flex-wrap: wrap; gap: 18px; max-width: var(--jtta-row); } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column, body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column { flex: 0 0 calc(50% - 9px); width: calc(50% - 9px); max-width: calc(50% - 9px); min-width: 0; min-height: 0; height: auto; } body.jtta-site .jtta-outcomes__card.et_pb_column { padding: 10px 24px; } body.jtta-site .jtta-parents__card.et_pb_column { padding: 14px 22px; } /* Proof: 2-col */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 40px; padding: 22px var(--jtta-section-x); min-height: 0; height: auto; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row { flex: 0 1 300px; width: 300px; max-width: 300px; margin: 0; } body.jtta-site .jtta-proof__heading.et_pb_text, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text h2 { width: auto; max-width: 300px; white-space: normal; font-size: 46px; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { flex: 1 1 0; width: auto; max-width: 560px; margin: 0; } /* Experience: keep Figma 5-in-a-row (73:1157), scale cards to fit 1024 */ body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section { padding: 22px var(--jtta-section-x); min-height: 0; height: auto; } body.jtta-site .jtta-experience__intro.et_pb_row { margin-bottom: 20px; } body.jtta-site .jtta-experience__cards.et_pb_row, body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; width: auto; min-width: 0; max-width: none; margin: 0; padding: 0; } body.jtta-site .jtta-experience__photo.et_pb_image { width: 100%; height: auto; margin: 0 0 12px; border-radius: 18px; overflow: hidden; } body.jtta-site .jtta-experience__photo .et_pb_image_wrap, body.jtta-site .jtta-experience__photo img { width: 100%; height: auto; aspect-ratio: 259 / 207; border-radius: 18px; object-fit: cover; } body.jtta-site .jtta-experience__label.et_pb_text { width: 100%; text-align: center; } body.jtta-site .jtta-experience__label.et_pb_text p { font-size: 15px; text-align: center; } body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section { padding: 18px var(--jtta-section-x) 32px; min-height: 0; height: auto; } body.jtta-site .jtta-faq__heading.et_pb_text, body.jtta-site .jtta-faq__lead.et_pb_text { max-width: 598px; } /* CTA: 2-col copy | logo; buttons side-by-side content-width */ body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { padding: 40px 36px; min-height: 0; height: auto; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site #page-container .jtta-cta .jtta-cta__row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 40px; max-width: 960px; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; flex: 1 1 0; width: auto; max-width: 600px; column-gap: 16px; row-gap: 0; text-align: left; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { white-space: normal; font-size: 46px; line-height: 0.9644; text-align: left; } body.jtta-site .jtta-cta__tagline.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__tagline.et_pb_module { text-align: left; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper { display: inline-flex; flex: 0 0 auto; align-self: flex-start; width: auto; max-width: none; margin: 0; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: 0; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { display: inline-flex; width: auto; min-width: 0; max-width: none; height: 42px; padding: 8px 22px; white-space: nowrap; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button { font-size: 16px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { font-size: 15px; font-weight: 500; } body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { flex: 0 0 240px; width: 240px; max-width: 240px; margin: 0; } body.jtta-site .jtta-cta__logo.et_pb_image, body.jtta-site .jtta-cta__logo .et_pb_image_wrap, body.jtta-site .jtta-cta__logo img { width: 240px; max-width: 240px; height: auto; } .jtta-footer { padding: 32px var(--jtta-section-x); min-height: 0; } .jtta-footer__inner { max-width: var(--jtta-row); } .jtta-footer__top { gap: 48px; flex-wrap: nowrap; } .jtta-footer__brand { flex: 0 0 220px; flex-basis: 220px; } .jtta-footer__logo img { width: 138px; height: 65px; } .jtta-footer__cols { gap: 36px; flex-wrap: wrap; } } /* ------------------------------------------------------------------------- 768px tablet band (768–1023) — tablet-specific arrangement Not phone stack, not scaled desktop. Mix of 2-col + selective stacks. Does not change ≤767, 1024–1199, or ≥1440. No !important. ------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { /* Header — hamburger + CTA */ #main-header.jtta-header, #main-header.jtta-header .jtta-header__inner { height: var(--jtta-header-h); min-height: var(--jtta-header-h); } .jtta-header__inner { height: var(--jtta-header-h); padding: 14px 40px; max-width: none; justify-content: space-between; gap: 24px; } .jtta-header__logo, .jtta-header__logo img { width: 148px; height: 69px; } .jtta-header__toggle { display: inline-flex; width: 28px; height: 28px; } .jtta-header__nav { top: var(--jtta-header-h); } .jtta-header__menu { flex-direction: column; align-items: flex-start; gap: 0; } .jtta-btn--primary, .jtta-header__cta { width: auto; min-width: 156px; height: 48px; padding: 10px 22px; font-size: 20px; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-future .et_pb_row, body.jtta-site .jtta-gap .et_pb_row, body.jtta-site .jtta-exists .et_pb_row, body.jtta-site .jtta-way .et_pb_row, body.jtta-site .jtta-inside .et_pb_row, body.jtta-site .jtta-journey .et_pb_row, body.jtta-site .jtta-depth .et_pb_row, body.jtta-site .jtta-outcomes .et_pb_row, body.jtta-site .jtta-parents .et_pb_row, body.jtta-site .jtta-proof .et_pb_row, body.jtta-site .jtta-experience .et_pb_row, body.jtta-site .jtta-faq .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row, body.jtta-site .jtta-future .et_block_row.et_pb_row, body.jtta-site .jtta-exists .et_block_row.et_pb_row, body.jtta-site .jtta-way .et_block_row.et_pb_row, body.jtta-site .jtta-inside .et_block_row.et_pb_row, body.jtta-site .jtta-journey .et_block_row.et_pb_row, body.jtta-site .jtta-depth .et_block_row.et_pb_row, body.jtta-site .jtta-outcomes .et_block_row.et_pb_row, body.jtta-site .jtta-parents .et_block_row.et_pb_row, body.jtta-site .jtta-experience .et_block_row.et_pb_row, body.jtta-site .jtta-faq .et_block_row.et_pb_row { max-width: var(--jtta-row); margin-left: auto; margin-right: auto; } body.jtta-site .jtta-marks__heading.et_pb_text h2, body.jtta-site .jtta-future__heading.et_pb_text h2, body.jtta-site .jtta-gap__heading.et_pb_text h2, body.jtta-site .jtta-exists__heading.et_pb_text h2, body.jtta-site .jtta-way__heading.et_pb_text h2, body.jtta-site .jtta-inside__heading.et_pb_text h2, body.jtta-site .jtta-journey__heading.et_pb_text h2, body.jtta-site .jtta-depth__heading.et_pb_text h2, body.jtta-site .jtta-outcomes__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2 span, body.jtta-site .jtta-proof__heading.et_pb_text h2, body.jtta-site .jtta-experience__heading.et_pb_text h2, body.jtta-site .jtta-faq__heading.et_pb_text h2, body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 42px; line-height: 0.9644; } /* Hero — tablet: full mobile banner (421×866), no cover-crop zoom */ body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .et_pb_section.et_block_section.jtta-hero.et_pb_section_0, body.jtta-site .jtta-hero.et_block_section.et_pb_section { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; width: 100%; height: auto; min-height: 0; /* Match hero-banner-image-mobile.png — min-height:866 alone was too short → cover zoomed/cropped */ aspect-ratio: 421 / 865.55; padding: 16px 40px 12px; margin: 0; overflow: hidden; background-color: var(--jtta-hero-bg); background-image: none; } body.jtta-site .jtta-hero__bg--desktop, body.jtta-site .jtta-hero__bg--desktop.et_pb_image, body.jtta-site .jtta-hero__bg--desktop.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-hero__bg--mobile, body.jtta-site .jtta-hero__bg--mobile.et_pb_image { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; height: 100%; margin: 0; pointer-events: none; } body.jtta-site .jtta-hero__bg--mobile .et_pb_image_wrap, body.jtta-site .jtta-hero__bg--mobile img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: center center; } body.jtta-site .jtta-hero__scroll-row.et_pb_row, body.jtta-site .jtta-hero__scroll-row.et_block_row.et_pb_row { display: none; } body.jtta-site .jtta-hero.et_pb_section > .et_pb_row { position: relative; z-index: 1; } body.jtta-site .jtta-hero .et_pb_row { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 100%; max-width: 440px; margin: 0 auto; padding: 0; } body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; margin: 0; float: none; } body.jtta-site .jtta-hero__heading.et_pb_text, body.jtta-site .jtta-hero__lead.et_pb_text { width: 100%; max-width: 440px; margin: 0; text-align: center; flex: 0 0 auto; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text h1 span, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner h1, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner span { font-size: 44px; line-height: 0.9644; text-align: center; word-break: normal; overflow-wrap: normal; hyphens: none; } /* Figma tablet — “Future Readiness” / “Academy” */ body.jtta-site .jtta-hero__heading.et_pb_text h1 span { display: inline; color: #dc2626; } body.jtta-site .jtta-hero__heading.et_pb_text h1 br { display: block; content: ""; } body.jtta-site .jtta-hero__lead.et_pb_text { margin-top: 16px; } body.jtta-site .jtta-hero__lead.et_pb_text, body.jtta-site .jtta-hero__lead.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-hero__lead.et_pb_text .et_pb_text_inner p { margin-top: 16px; } body.jtta-site .jtta-hero__lead.et_pb_text p { margin: 0; font-size: 14px; line-height: 1.4; text-align: center; color: #ffffff; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper { display: flex; justify-content: center; width: auto; max-width: 100%; margin: 16px 0 0 !important; float: none; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin: 10px 0 0 !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_0_wrapper { margin-right: 0 !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 40px; max-height: none; padding: 9px 24px !important; font-size: 15px !important; line-height: normal !important; white-space: nowrap !important; overflow: visible; border-radius: 8px; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button { font-weight: 600; background-color: #e63946; color: #ffffff; border-width: 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { font-weight: 400; background-color: transparent; color: #ffffff; border: 1px solid #ffffff; } /* Tablet uses mobile art (meta baked in) — hide HTML duplicate */ body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { display: none; } body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: 100%; max-width: 360px; margin: 0 auto; } body.jtta-site .jtta-hero__meta.et_pb_text { width: 100%; max-width: 360px; margin: 0 auto; text-align: center; } body.jtta-site .jtta-hero__meta.et_pb_text p { margin: 0; font-size: 14px; line-height: normal; text-align: center; white-space: normal; color: #ffffff; } /* Gap banner: only mobile module (desktop also has phone/tablet src → would double) */ body.jtta-site .jtta-gap__image--desktop.et_pb_image, body.jtta-site .jtta-gap__image--desktop.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-gap__image--mobile.et_pb_image, body.jtta-site .jtta-gap__image--mobile.et_pb_image .et_pb_image_wrap { display: block; } body.jtta-site .jtta-parents__heading.et_pb_text h2 .jtta-parents__line { font-size: 32px; } body.jtta-site .jtta-future__title.et_pb_text h3, body.jtta-site .jtta-journey__name.et_pb_text h3 { font-size: 36px; } body.jtta-site .jtta-way__num.et_pb_text p, body.jtta-site .jtta-way__title.et_pb_text p { font-size: 26px; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase { font-size: 18px; } body.jtta-site .jtta-hero__lead.et_pb_text p, body.jtta-site .jtta-marks__lead.et_pb_text p, body.jtta-site .jtta-future__lead.et_pb_text p, body.jtta-site .jtta-exists__lead.et_pb_text p, body.jtta-site .jtta-way__lead.et_pb_text p, body.jtta-site .jtta-inside__lead.et_pb_text p, body.jtta-site .jtta-journey__lead.et_pb_text p, body.jtta-site .jtta-outcomes__lead.et_pb_text p, body.jtta-site .jtta-faq__lead.et_pb_text p, body.jtta-site .jtta-way__note.et_pb_text p, body.jtta-site .jtta-future__body.et_pb_text p { font-size: 14px; line-height: 1.398; } body.jtta-site .jtta-overline.et_pb_text p, body.jtta-site .jtta-future__overline.et_pb_text p, body.jtta-site .jtta-gap__overline.et_pb_text p, body.jtta-site .jtta-way__overline.et_pb_text p, body.jtta-site .jtta-inside__overline.et_pb_text p, body.jtta-site .jtta-depth__overline.et_pb_text p, body.jtta-site .jtta-parents__overline.et_pb_text p, body.jtta-site .jtta-experience__overline.et_pb_text p, body.jtta-site .jtta-faq__overline.et_pb_text p, body.jtta-site .jtta-hero__meta.et_pb_text p { font-size: 14px; } /* Marks — tablet 2-col: copy | image */ body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { height: auto; min-height: 0; padding: 32px 20px; overflow: visible; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row.jtta-marks__row { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 28px; max-width: var(--jtta-row); height: auto; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column { width: auto; max-width: 340px; flex: 1 1 340px; align-items: flex-start; text-align: left; gap: 14px; } body.jtta-site .jtta-marks__heading.et_pb_text, body.jtta-site .jtta-marks__lead.et_pb_text { max-width: 340px; text-align: left; } body.jtta-site .jtta-marks__heading.et_pb_text h2, body.jtta-site .jtta-marks__lead.et_pb_text p { text-align: left; } body.jtta-site .jtta-marks__visual.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column { width: 300px; max-width: 300px; height: 233px; flex: 0 0 300px; margin: 0; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 300px; max-width: 300px; height: 233px; background-size: 160.21% 100%; background-position: left center; } /* Future — stacked narrative cards (tablet) */ body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding: 40px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-future__intro.et_pb_row, body.jtta-site .jtta-future__intro.et_block_row.et_pb_row { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; max-width: var(--jtta-row); } body.jtta-site .jtta-future__heading-col.et_pb_column, body.jtta-site .jtta-future__lead-col.et_pb_column { width: 100%; max-width: var(--jtta-row); flex: 0 0 auto; } body.jtta-site .jtta-future__heading.et_pb_text, body.jtta-site .jtta-future__heading.et_pb_text h2 { max-width: 480px; } body.jtta-site .jtta-future__cards.et_pb_row, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row { flex-direction: column; align-items: stretch; gap: 36px; max-width: var(--jtta-row); } body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { width: 100%; max-width: 100%; flex: 0 0 auto; min-height: 0; height: auto; column-gap: 32px; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate { padding: 28px 32px; border-radius: 28px; } body.jtta-site .jtta-future__icon--learn .et_pb_image_wrap, body.jtta-site .jtta-future__icon--learn img { width: 90px; height: 91px; } body.jtta-site .jtta-future__icon--perform .et_pb_image_wrap, body.jtta-site .jtta-future__icon--perform img { width: 80px; height: 96px; } body.jtta-site .jtta-future__icon--navigate .et_pb_image_wrap, body.jtta-site .jtta-future__icon--navigate img { width: 80px; height: 80px; } body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { display: block; top: auto; right: auto; bottom: -44px; left: 50%; width: 56px; height: 58px; transform: translateX(-50%) rotate(90deg); } /* Exists — stacked (Figma 162:256), like mobile */ body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section { padding: 28px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-exists__row.et_pb_row, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 24px; max-width: 520px; margin: 0 auto; } body.jtta-site .jtta-exists__visual.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_block_column, body.jtta-site .jtta-exists__copy.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_block_column { float: none; flex: 0 0 auto; width: 100%; max-width: 520px; margin: 0; align-items: flex-start; } /* Figma phone — text above image */ body.jtta-site .jtta-exists__copy.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_block_column { order: 1; } body.jtta-site .jtta-exists__visual.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_block_column { order: 2; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { position: relative; width: 100%; max-width: 520px; height: auto; aspect-ratio: 376 / 250; border-radius: 16px; overflow: hidden; } body.jtta-site .jtta-exists__image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; } body.jtta-site .jtta-exists__heading.et_pb_text, body.jtta-site .jtta-exists__heading.et_pb_text h2 { max-width: 100%; text-align: left; font-size: 40px; } body.jtta-site .jtta-exists__lead.et_pb_text, body.jtta-site .jtta-exists__lead.et_pb_text p { max-width: 100%; text-align: left; font-size: 14px; } /* Way — stacked vertical (Figma 166:414 tablet), centered ~520 */ body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section { padding: 28px 20px; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-way .et_pb_row, body.jtta-site .jtta-way .et_block_row.et_pb_row { max-width: 520px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-way__intro.et_pb_row, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin: 0 auto 32px; max-width: 520px; overflow: visible; } body.jtta-site .jtta-way__heading-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_block_column { float: none; display: block; width: 100%; max-width: 520px; margin: 0; flex-direction: column; align-items: stretch; gap: 0; } body.jtta-site .jtta-way__overline.et_pb_text p { text-align: left; color: #dc2626; } body.jtta-site .jtta-way__heading.et_pb_text { box-sizing: border-box; width: auto; max-width: calc(100% - 88px); margin: 8px 0 0; padding-right: 0; } body.jtta-site .jtta-way__heading.et_pb_text h2 { max-width: none; font-size: 40px; line-height: 0.9644; white-space: normal; overflow-wrap: normal; word-break: normal; text-align: left; } body.jtta-site .jtta-way__rocket.et_pb_image { position: absolute; top: 0; right: 0; left: auto; bottom: auto; z-index: 4; width: 72px; height: 76px; margin: 0; pointer-events: none; } body.jtta-site .jtta-way__lead-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_block_column { position: static; } body.jtta-site .jtta-way__rocket .et_pb_image_wrap, body.jtta-site .jtta-way__rocket img { width: 72px; height: 76px; max-width: 72px; object-fit: contain; } body.jtta-site .jtta-way__lead.et_pb_text { width: 100%; max-width: 520px; margin: 16px 0 0; overflow: visible; } body.jtta-site .jtta-way__lead.et_pb_text p { text-align: left; font-size: 14px; white-space: normal; overflow: visible; overflow-wrap: break-word; word-break: normal; } body.jtta-site .jtta-way__steps.et_pb_row, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-way__steps.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; max-width: 520px; margin: 0 auto; overflow: visible; position: relative; /* Tablet — light tuck only (12px) so 02–05 numbers stay visible under cascade */ --way-c1: 200px; --way-c: 210px; --way-overlap: 12px; --way-arrow-w: 36px; --way-arrow-h: 34px; --way-line-w: 2px; --way-gap-step: calc(var(--way-c) - var(--way-overlap)); /* Midpoint of seam between cards = arrow between 1–2, 2–3, … */ --way-gap1: calc(var(--way-c1) - var(--way-overlap) / 2); } /* 768 vertical rail — first→last gap centers; arrows between cards */ body.jtta-site .jtta-way__steps::before { content: ""; display: block; visibility: visible; opacity: 1; position: absolute; z-index: 6; left: auto; right: calc((var(--way-arrow-w) - var(--way-line-w)) / 2); top: var(--way-gap1); bottom: auto; width: var(--way-line-w); height: calc(3 * var(--way-gap-step)); max-width: none; background: #082248; pointer-events: none; } body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { content: ""; display: block; visibility: visible; opacity: 1; position: absolute; z-index: 10; left: auto; right: 0; top: calc(var(--way-gap1) - var(--way-arrow-h) / 2); bottom: auto; width: var(--way-arrow-w); height: calc(3 * var(--way-gap-step) + var(--way-arrow-h)); background-color: transparent; background-image: url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"); background-size: var(--way-arrow-w) var(--way-arrow-h); background-repeat: no-repeat; background-position: center 0, center var(--way-gap-step), center calc(2 * var(--way-gap-step)), center calc(3 * var(--way-gap-step)); transform: none; pointer-events: none; } body.jtta-site .jtta-way__steps > .et_pb_column, body.jtta-site .jtta-way__step--experience, body.jtta-site .jtta-way__step:not(.jtta-way__step--experience), body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-way__step.et_pb_column_1_5.et_block_column { position: relative; float: none; display: block; box-sizing: border-box; flex: 0 0 auto; width: 100%; max-width: 520px; margin-left: 0; margin-top: 0; margin-bottom: 0; border-radius: 16px; text-align: left; overflow: hidden; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(n + 2) { margin-top: calc(0px - var(--way-overlap)); } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(1) { z-index: 5; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(2) { z-index: 4; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(3) { z-index: 3; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(4) { z-index: 2; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(5) { z-index: 1; } body.jtta-site .jtta-way__step--experience { box-sizing: border-box; position: relative; height: var(--way-c1); min-height: var(--way-c1); max-height: var(--way-c1); padding: 14px 52px 14px 28px; overflow: hidden; z-index: 5; } body.jtta-site .jtta-way__step:not(.jtta-way__step--experience) { box-sizing: border-box; position: relative; height: var(--way-c); min-height: var(--way-c); max-height: var(--way-c); padding: 14px 52px 14px 28px; overflow: hidden; } /* Kill Divi module gaps that inflate past fixed card height */ body.jtta-site .jtta-way__step.et_pb_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-way__step.et_pb_column_1_5.et_block_column > .et_pb_module { margin: 0; padding: 0; } body.jtta-site .jtta-way__num.et_pb_text { margin: 0; } body.jtta-site .jtta-way__num.et_pb_text p { font-size: 24px; line-height: 1; text-align: left; } body.jtta-site .jtta-way__title.et_pb_text { margin: 0; } body.jtta-site .jtta-way__title.et_pb_text p { font-size: 22px; line-height: 1.15; text-align: left; white-space: normal; } body.jtta-site .jtta-way__note.et_pb_text { margin: 2px 0 0; } body.jtta-site .jtta-way__note.et_pb_text p { font-size: 13px; line-height: 1.25; text-align: left; white-space: normal; } body.jtta-site .jtta-way__icon.et_pb_image { margin: 6px 0 8px; } body.jtta-site .jtta-way__step--experience .jtta-way__icon.et_pb_image { margin-left: 0; } /* Compact icons — desktop 102px was blowing past card height */ body.jtta-site .jtta-way__icon--experience .et_pb_image_wrap, body.jtta-site .jtta-way__icon--experience img { width: 64px; height: 45px; max-width: 64px; } body.jtta-site .jtta-way__icon--discover .et_pb_image_wrap, body.jtta-site .jtta-way__icon--discover img, body.jtta-site .jtta-way__icon--apply .et_pb_image_wrap, body.jtta-site .jtta-way__icon--apply img, body.jtta-site .jtta-way__icon--reflect .et_pb_image_wrap, body.jtta-site .jtta-way__icon--reflect img, body.jtta-site .jtta-way__icon--grow .et_pb_image_wrap, body.jtta-site .jtta-way__icon--grow img { width: 56px; height: 56px; max-width: 56px; object-fit: contain; } body.jtta-site .jtta-way__arrow.et_pb_image { display: none; } body.jtta-site .jtta-way__step.et_pb_column:hover { transform: none; box-shadow: none; } /* Inside — Figma 167:530 vertical (tablet 768), pad + 19px to track */ body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section { padding: 12px 40px; min-height: 0; height: auto; overflow: visible; background: #fff; } body.jtta-site .jtta-inside .et_pb_row, body.jtta-site .jtta-inside .et_block_row.et_pb_row { max-width: 520px; margin-left: auto; margin-right: auto; padding: 0; } body.jtta-site .jtta-inside__intro.et_pb_row, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin: 0 auto; max-width: 520px; padding: 0; } body.jtta-site .jtta-inside__heading-col.et_pb_column, body.jtta-site .jtta-inside__lead-col.et_pb_column { width: 100%; max-width: 520px; margin: 0; padding: 0; } body.jtta-site .jtta-inside__overline.et_pb_text p { margin: 0; font-size: 12px; line-height: 1.372; text-align: left; color: #dc2626; } body.jtta-site .jtta-inside__heading.et_pb_text { margin: 8px 0 0; } body.jtta-site .jtta-inside__heading.et_pb_text h2 { margin: 0; font-size: 40px; line-height: 0.9644; text-align: left; white-space: normal; color: #0f172a; } body.jtta-site .jtta-inside__lead.et_pb_text { margin: 13px 0 0; } body.jtta-site .jtta-inside__lead.et_pb_text p { margin: 0; font-size: 14px; text-align: left; color: #475569; } body.jtta-site .jtta-inside__track.et_pb_row, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { display: block; position: relative; height: auto; min-height: 0; max-width: 520px; margin: 19px auto 0; padding: 0; overflow: visible; } body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 12px; width: 100%; height: auto; min-height: 0; position: relative; padding: 0; margin: 0; } body.jtta-site .jtta-inside__track::before { content: ""; display: block; position: absolute; z-index: 0; left: 4.5px; right: auto; top: 5px; bottom: 5px; width: 1px; height: auto; max-width: none; background: #cbd5e1; pointer-events: none; } body.jtta-site .jtta-inside__item.et_pb_text, body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text, body.jtta-site .jtta-inside__item.et_pb_text:nth-child(n) { position: relative; left: auto; top: auto; transform: none; display: block; width: 100%; max-width: none; height: auto; min-height: 0; margin: 0; padding: 0; text-align: left; z-index: 1; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0; width: 100%; max-width: 100%; min-height: 0; padding: 0; margin: 0; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p, body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase, body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__time { width: auto; max-width: none; flex: 0 0 auto; margin: 0; padding: 0; text-align: left; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__dot { order: 1; display: block; flex: 0 0 auto; width: 10px; height: 10px; margin: 0; border-radius: 50%; background: #dc2626; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p.jtta-inside__time { order: 2; margin: 0 0 0 14px; min-width: 54px; font-size: 16px; line-height: 20px; text-align: left; white-space: nowrap; color: #0f172a; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p.jtta-inside__phase { order: 3; margin: 0 0 0 14px; font-size: 16px; line-height: 20px; text-align: left; white-space: nowrap; color: #0d1b2a; } /* Journey — stacked (Figma 167:670), like mobile */ body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section { padding: 28px 20px; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-journey__intro.et_pb_row, body.jtta-site .jtta-journey__intro.et_block_row.et_pb_row { flex-direction: column; flex-wrap: nowrap; margin-bottom: 24px; max-width: 520px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-journey__heading-col.et_pb_column, body.jtta-site .jtta-journey__lead-col.et_pb_column { width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-journey__heading.et_pb_text h2 { font-size: 40px; white-space: normal; text-align: left; } body.jtta-site .jtta-journey__lead.et_pb_text p { font-size: 14px; text-align: left; } body.jtta-site .jtta-journey__cards.et_pb_row, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-journey__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 24px; max-width: 520px; margin: 0 auto; overflow: visible; } body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .jtta-journey__card.et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { flex: 0 0 auto; width: 100%; max-width: 520px; height: auto; min-height: 0; margin: 0; border-radius: 40px; overflow: hidden; } body.jtta-site .jtta-journey__cards > .et_pb_column:last-child, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .et_pb_column:last-child { flex: 0 0 auto; max-width: 520px; } body.jtta-site .jtta-journey__photo.et_pb_image, body.jtta-site .jtta-journey__photo.et_pb_image.et_flex_module { position: relative; width: 100%; height: auto; aspect-ratio: 373 / 322; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image > .et_pb_image_wrap, body.jtta-site .jtta-journey__photo.et_flex_module > .et_pb_image_wrap { display: block; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image img, body.jtta-site .jtta-journey__photo .et_pb_image_wrap img { position: absolute; left: 50%; top: 50%; width: 128%; max-width: none; height: 128%; max-height: none; object-fit: cover; border-radius: 0; transform: translate(-50%, -50%); } body.jtta-site .jtta-journey__name.et_pb_text, body.jtta-site .jtta-journey__meta.et_pb_text, body.jtta-site .jtta-journey__tag.et_pb_text { padding-left: 28px; padding-right: 72px; } body.jtta-site .jtta-journey__name.et_pb_text h3 { font-size: 40px; } body.jtta-site .jtta-journey__meta.et_pb_text p { font-size: 14px; } body.jtta-site .jtta-journey__tag.et_pb_text p { font-size: 13px; } body.jtta-site .jtta-journey__go.et_pb_image { right: 22px; bottom: 22px; width: 47px; height: 47px; } body.jtta-site .jtta-journey__go .et_pb_image_wrap { width: 47px; height: 47px; } /* Depth — stacked (Figma 167:680), arrow in-flow */ body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding: 32px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 18px; max-width: 520px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { display: grid; grid-template-columns: 90px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; flex: 0 0 auto; width: 100%; max-width: 520px; height: auto; min-height: 0; margin: 0; padding: 24px 22px 16px 10px; border-radius: 36px; } body.jtta-site .jtta-depth__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 2; margin: 8px 0 0; } body.jtta-site .jtta-depth__icon .et_pb_image_wrap, body.jtta-site .jtta-depth__icon img { width: 90px; height: 86px; } body.jtta-site .jtta-depth__copy.et_pb_text { grid-column: 2; grid-row: 1; max-width: 100%; min-width: 0; } body.jtta-site .jtta-depth__copy.et_pb_text h3 { font-size: 40px; } body.jtta-site .jtta-depth__copy.et_pb_text .jtta-depth__months { font-size: 16px; } body.jtta-site .jtta-depth__copy.et_pb_text li { font-size: 14px; margin-bottom: 8px; } body.jtta-site .jtta-depth__go.et_pb_image { position: relative; grid-column: 2; grid-row: 2; justify-self: end; right: auto; bottom: auto; margin: 4px 0 0; } body.jtta-site .jtta-depth__card--explorer .jtta-depth__go, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go img { width: 42px; height: 39px; } body.jtta-site .jtta-depth__card--discovery .jtta-depth__go, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go img { width: 36px; height: 33px; } body.jtta-site .jtta-depth__banner.et_pb_row, body.jtta-site .jtta-depth__banner.et_block_row.et_pb_row { max-width: 520px; margin: 20px auto 0; } /* Outcomes — 2×2; Parents — stacked + centered (Figma 170:857) */ body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section, body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding: 28px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-outcomes__intro.et_pb_row { max-width: var(--jtta-row); margin: 0 0 18px; } body.jtta-site .jtta-outcomes__grid.et_pb_row, body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row { display: flex; flex-wrap: wrap; gap: 16px; max-width: var(--jtta-row); margin: 0 auto; } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column { flex: 0 0 calc(50% - 8px); width: calc(50% - 8px); max-width: calc(50% - 8px); min-width: 0; height: auto; min-height: 130px; margin: 0; } body.jtta-site .jtta-outcomes__card.et_pb_column { padding: 12px 24px; border-radius: 18px; } body.jtta-site .jtta-outcomes__grid.et_pb_row + .jtta-outcomes__grid.et_pb_row { margin-top: 16px; } body.jtta-site .jtta-outcomes__icon.et_pb_image { width: 88px; margin: 0 0 8px; } body.jtta-site .jtta-outcomes__icon img { max-width: 88px; max-height: 74px; } /* Parents cards — stacked + horizontally centered at 768 */ body.jtta-site .jtta-parents .et_pb_row, body.jtta-site .jtta-parents .et_block_row.et_pb_row { max-width: 520px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-parents__intro.et_pb_row, body.jtta-site .jtta-parents__intro.et_block_row.et_pb_row { width: 100%; max-width: 520px; margin: 0 auto 18px; } body.jtta-site .jtta-parents__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2 span, body.jtta-site .jtta-parents__heading.et_pb_text h2 .jtta-parents__line { text-align: left; } body.jtta-site .jtta-parents__cards.et_pb_row, body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-parents__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; max-width: 520px; margin: 0 auto; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column { float: none; flex: 0 0 auto; width: 100%; max-width: 520px; min-width: 0; height: auto; min-height: 134px; margin: 0 auto; } /* Proof — match mobile Figma 170:885 (stacked), like hero/CTA at 768 */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 28px; column-gap: 28px; row-gap: 28px; padding: 28px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row { flex: 0 0 auto; width: 100%; max-width: 520px; margin: 0 auto; } body.jtta-site .jtta-proof__heading.et_pb_text, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text h2 { width: 100%; max-width: 100%; white-space: normal; } body.jtta-site .jtta-proof__heading.et_pb_text h2 { font-size: 42px; line-height: 0.9644; text-align: left; } body.jtta-site .jtta-proof__overline.et_pb_text p { font-size: 13px; margin: 0 0 8px; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; flex: 0 0 auto; width: 100%; max-width: 520px; height: 220px; min-height: 220px; margin: 0 auto; } body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column { padding: 8px 14px; } body.jtta-site .jtta-proof__icon.et_pb_image { width: 56px; height: 52px; margin: 0 auto 4px; } body.jtta-site .jtta-proof__icon .et_pb_image_wrap, body.jtta-site .jtta-proof__icon img { width: 56px; height: 52px; } body.jtta-site .jtta-proof__title.et_pb_text p { font-size: 13px; line-height: 1.398; } body.jtta-site .jtta-proof__body.et_pb_text p { max-width: 100%; font-size: 11px; line-height: 1.398; } /* Experience — 2 + 2 + 1 (centered), labels under cards */ body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section { padding: 28px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-experience__cards.et_pb_row, body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: var(--jtta-row); margin-left: auto; margin-right: auto; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { display: flex; flex-direction: column; align-items: center; flex: 0 0 calc(50% - 8px); width: calc(50% - 8px); max-width: calc(50% - 8px); min-width: 0; margin: 0; } body.jtta-site .jtta-experience__photo.et_pb_image { width: 100%; height: auto; margin: 0 0 12px; border-radius: 20px; overflow: hidden; } body.jtta-site .jtta-experience__photo .et_pb_image_wrap, body.jtta-site .jtta-experience__photo img { width: 100%; height: auto; aspect-ratio: 259 / 207; object-fit: cover; border-radius: 20px; } body.jtta-site .jtta-experience__label.et_pb_text { width: 100%; text-align: center; } body.jtta-site .jtta-experience__label.et_pb_text p { font-size: 17px; text-align: center; } /* FAQ */ body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section { padding: 28px 20px 40px; min-height: 0; height: auto; } body.jtta-site .jtta-faq__heading.et_pb_text, body.jtta-site .jtta-faq__lead.et_pb_text, body.jtta-site .jtta-faq__items.et_pb_row, body.jtta-site .jtta-faq__items.et_block_row.et_pb_row { max-width: var(--jtta-row); } /* CTA — match mobile Figma 170:1085 (stacked + centered), like hero at 768 */ body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; padding: 36px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site #page-container .jtta-cta .jtta-cta__row.et_pb_row { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 26px; max-width: 520px; width: 100%; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 520px; flex: 0 0 auto; column-gap: 0; text-align: center; } body.jtta-site .jtta-cta__heading.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__heading.et_pb_module { text-align: center; padding-bottom: 7px; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { white-space: normal; font-size: 42px; line-height: 0.9644; text-align: center; } body.jtta-site .jtta-cta__tagline.et_pb_text, body.jtta-site.et_pb_gutters3 .jtta-cta.et_block_section .jtta-cta__tagline.et_pb_module { text-align: center; padding-bottom: 21px; } body.jtta-site .jtta-cta__tagline.et_pb_text p { text-align: center; font-size: 16px; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper { display: flex; justify-content: center; align-self: center; width: fit-content; max-width: 100%; margin: 0 auto; flex: 0 0 auto; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: 21px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { display: inline-flex; width: auto; min-width: 0; max-width: 100%; height: 42px; padding: 8px 24px; white-space: nowrap; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button { font-size: 16px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { font-size: 15px; font-weight: 400; } body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { display: flex; justify-content: center; flex: 0 0 auto; width: 100%; max-width: 280px; margin: 0 auto; } body.jtta-site .jtta-cta__logo.et_pb_image, body.jtta-site .jtta-cta__logo .et_pb_image_wrap, body.jtta-site .jtta-cta__logo img { width: 280px; max-width: 100%; height: auto; } /* Footer — match mobile Figma 172:1107 (stacked + dividers), like hero/CTA at 768 */ .jtta-footer { padding: 36px 20px 28px; min-height: 0; } .jtta-footer__inner { max-width: 520px; margin: 0 auto; gap: 22px; } .jtta-footer__top { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 22px; } .jtta-footer__brand { width: 100%; max-width: none; flex: 0 0 auto; flex-basis: auto; } .jtta-footer__logo img { width: 160px; height: auto; } .jtta-footer__tagline { margin-top: 10px; font-size: 13px; } .jtta-footer__cols { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 0; padding-top: 0; } .jtta-footer__col { flex: none; width: 100%; max-width: none; min-width: 0; padding: 18px 0; border-top: 1px solid rgba(148, 163, 184, 0.28); } .jtta-footer__col:first-child { border-top: 0; padding-top: 0; } .jtta-footer__heading { margin: 0 0 17px; font-size: 16px; } .jtta-footer__menu { gap: 19px; } .jtta-footer__menu a { font-size: 16px; } .jtta-footer__bottom { display: flex; flex-direction: column; align-items: stretch; gap: 28px; margin-top: 0; padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, 0.28); } .jtta-footer__meta { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; order: 1; width: 100%; gap: 24px; } .jtta-footer__copy { order: 2; width: 100%; margin: 0; text-align: center; font-size: 14.44px; color: rgba(148, 163, 184, 0.41); } .jtta-footer__email, .jtta-footer__note { flex: 0 1 auto; font-size: 14px; white-space: nowrap; } } /* ------------------------------------------------------------------------- 425px phone band (≤767) — Mobile Figma 142:98 exact SoT Beats mid-file max-width 980/1199 gutters3 overrides. Fixed Figma widths use max-width + width:100% so 361–424 don’t overflow while 425 still matches SoT. Does not change ≥768. No !important. ------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --jtta-fs-display: 36px; --jtta-section-x: 20px; --jtta-header-h: 87px; --jtta-lh-tight: 0.9644; --jtta-lh-display: 0.9644; --jtta-content: 380px; --jtta-row: 380px; } html, body.jtta-site { margin: 0; padding: 0; /* overflow-x on html/body breaks sticky header and can leave a top gap */ overflow-x: visible; } body.jtta-site #page-container { overflow-x: clip; max-width: 100%; } body.jtta-site #et-boc, body.jtta-site .et_pb_section, body.jtta-site .et_pb_row, body.jtta-site .et_pb_column { max-width: 100%; min-width: 0; box-sizing: border-box; } #main-header.jtta-header, #main-header.jtta-header.et-fixed-header, #main-header.jtta-header .jtta-header__inner { height: 87px !important; min-height: 87px; max-height: 87px; } .jtta-header__inner { box-sizing: border-box; height: 87px; padding: 12.5px 20px; max-width: none; justify-content: space-between; align-items: center; gap: 0; } .jtta-header__logo, .jtta-header__logo img { width: 132px; height: 61.2857px; } .jtta-header__toggle { display: inline-flex; width: 25px; height: 25px; } .jtta-header__cta { display: none; } .jtta-header__nav { top: 87px; } /* Hero — Figma Frame 148 / 154:69 phone SoT (421 × 865.55, pad 12/20) */ body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .et_pb_section.et_block_section.jtta-hero.et_pb_section_0, body.jtta-site .jtta-hero.et_block_section.et_pb_section { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: auto; min-height: 0; aspect-ratio: 421 / 865.55; padding: 16px 20px 12px; margin: 0; overflow-x: hidden; overflow-y: visible; background-color: var(--jtta-hero-bg); background-image: none; background-size: auto; background-position: center top; } body.jtta-site .jtta-hero__bg--desktop, body.jtta-site .jtta-hero__bg--desktop.et_pb_image, body.jtta-site .jtta-hero__bg--desktop.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-hero__bg--mobile, body.jtta-site .jtta-hero__bg--mobile.et_pb_image { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; height: 100%; margin: 0; pointer-events: none; } body.jtta-site .jtta-hero__bg--mobile .et_pb_image_wrap, body.jtta-site .jtta-hero__bg--mobile img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: center top; } body.jtta-site .jtta-hero__scroll-row.et_pb_row, body.jtta-site .jtta-hero__scroll-row.et_block_row.et_pb_row { display: none; } body.jtta-site .jtta-hero.et_pb_section::after { content: none; display: none; } body.jtta-site .jtta-hero.et_pb_section > .et_pb_row { position: relative; z-index: 1; } body.jtta-site .jtta-hero .et_pb_row { width: 100%; max-width: 381px; margin-left: auto; margin-right: auto; } /* Beat Divi .et_pb_row_1 { max-width:1352px !important } */ body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row, body.jtta-site #page-container .jtta-hero__copy-row.et_pb_row { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 100%; max-width: 100% !important; margin: 0 auto; padding: 0; } body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; margin: 0; float: none; } body.jtta-site .jtta-hero__heading.et_pb_text { width: 100%; max-width: 100%; margin: 0; text-align: center; flex: 0 0 auto; } body.jtta-site .jtta-hero__lead.et_pb_text { width: 100%; max-width: 277px; margin: 0; text-align: center; flex: 0 0 auto; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text h1 span, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner h1, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner span { margin: 0; /* Single-line title must fit viewport (36px overflows ~450px) */ font-size: clamp(18px, 6.6vw, 28px); line-height: 1.05; text-align: center; color: #ffffff; word-break: normal; overflow-wrap: normal; hyphens: none; } /* Mobile — single line; HTML has “Readiness
Academy” so space remains when br is hidden */ body.jtta-site .jtta-hero__heading.et_pb_text { overflow: visible; max-width: 100%; } body.jtta-site .jtta-hero__heading.et_pb_text h1 span, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner span { display: inline; color: #dc2626; } body.jtta-site .jtta-hero__heading.et_pb_text h1 br { display: none; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text .et_pb_text_inner h1 { white-space: nowrap; overflow: visible; letter-spacing: -0.02em; } /* Beat Divi lead margin-top:36px !important */ body.jtta-site .jtta-hero__lead.et_pb_text, body.jtta-site .jtta-hero__lead.et_pb_text .et_pb_text_inner, body.jtta-site #page-container .jtta-hero__lead.et_pb_text { margin-top: 13px !important; } body.jtta-site .jtta-hero__lead.et_pb_text p, body.jtta-site .jtta-hero__lead.et_pb_text .et_pb_text_inner p { margin: 0; font-family: var(--jtta-font-body); font-weight: 400; font-size: 12px; line-height: normal; color: #ffffff; text-align: center; } /* Beat Divi button wrapper margin-top:36px !important / margin-right */ body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-hero .et_pb_button_0_wrapper, body.jtta-site #page-container .jtta-hero .et_pb_button_1_wrapper { display: flex; justify-content: center; width: 100%; max-width: 277px; margin: 13px 0 0 !important; float: none; text-align: center; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper + .et_pb_button_module_wrapper, body.jtta-site #page-container .jtta-hero .et_pb_button_1_wrapper { margin: 9px 0 0 !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_0_wrapper { margin-right: 0 !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button, body.jtta-site .jtta-hero__btn--primary.et_pb_button, body.jtta-site .jtta-hero__btn--ghost.et_pb_button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 35px; max-height: none; padding: 8px 22px !important; font-size: 14px !important; line-height: normal !important; white-space: nowrap !important; overflow: visible; margin-left: auto; margin-right: auto; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site .jtta-hero__btn--primary.et_pb_button { border-radius: 7px; font-weight: 600; background-color: #e63946; color: #ffffff; border-width: 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button, body.jtta-site .jtta-hero__btn--ghost.et_pb_button { border-radius: 9px; font-weight: 400; background-color: transparent; color: #ffffff; border: 0.809px solid #ffffff; } /* Meta baked into mobile art — hide HTML duplicate */ body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { display: none; } body.jtta-site .jtta-hero__meta-row.et_pb_row::after, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row::after { content: none; display: none; } body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; width: 100%; max-width: 243px; margin: 0 auto; } body.jtta-site .jtta-hero__meta.et_pb_text { width: 100%; max-width: 243px; margin: 0 auto; text-align: center; } body.jtta-site .jtta-hero__meta.et_pb_text p { margin: 0; font-family: var(--jtta-font-nav); font-weight: 500; font-size: 14px; line-height: normal; color: #ffffff; text-align: center; white-space: normal; } /* Marks — 158:97 */ body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { padding: 12px 20px 0; min-height: 0; height: auto; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row { flex-direction: column; align-items: center; gap: 11px; max-width: 375px; margin: 0 auto; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column { flex: 0 0 auto; width: 100%; max-width: 375px; margin: 0; } body.jtta-site .jtta-marks__visual.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column { flex: 0 0 auto; width: 100%; max-width: 352px; margin: 0 auto; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: center; white-space: normal; } body.jtta-site .jtta-marks__lead.et_pb_text p { font-size: 12px; line-height: normal; text-align: center; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; max-width: 352px; height: auto; max-height: none; aspect-ratio: 352 / 273; } /* Future — 159:219 stacked; icon|copy; underlines + down connectors */ body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding: 40px 22px; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-future__cards.et_pb_row, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 34px; max-width: 377px; margin: 0 auto; overflow: visible; } body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 36px; row-gap: 10.14px; align-items: center; flex: 0 0 auto; width: 100%; max-width: 375px; min-width: 0; height: auto; min-height: 0; margin: 0; overflow: visible; } body.jtta-site .jtta-future__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-future__lead.et_pb_text p, body.jtta-site .jtta-future__overline.et_pb_text p { font-size: 12px; text-align: left; } body.jtta-site .jtta-future__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 3; align-self: center; justify-self: center; } body.jtta-site .jtta-future__label.et_pb_text { grid-column: 2; grid-row: 1; } body.jtta-site .jtta-future__title.et_pb_text { grid-column: 2; grid-row: 2; } body.jtta-site .jtta-future__body.et_pb_text { grid-column: 2; grid-row: 3; } body.jtta-site .jtta-future__title.et_pb_text h3 { font-size: 36px; } body.jtta-site .jtta-future__title.et_pb_text h3::after { content: ""; display: block; width: 44.617px; height: 2.704px; margin-top: 10.14px; border-radius: 19.605px; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn .jtta-future__title h3::after { background: var(--jtta-red-text); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform .jtta-future__title h3::after, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate .jtta-future__title h3::after { background: var(--jtta-blue); } body.jtta-site .jtta-future__card--learn::after, body.jtta-site .jtta-future__card--perform::after { content: ""; display: block; visibility: visible; opacity: 1; position: absolute; z-index: 10; top: auto; right: auto; bottom: -51px; left: 50%; width: 65px; height: 68px; margin: 0; transform: translateX(-50%) rotate(90deg); background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 3.158px 3.158px rgba(0, 0, 0, 0.25)); pointer-events: none; } body.jtta-site .jtta-future__card--learn::after { background-image: url("../images/jtta-future-arrow-red.png"); } body.jtta-site .jtta-future__card--perform::after { width: 68px; height: 67px; background-image: url("../images/jtta-future-arrow-blue.png"); filter: drop-shadow(0 3.289px 3.289px rgba(0, 0, 0, 0.25)); } /* Gap — 162:254 phone: 20px sides, stacked intro flush left */ body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 16px 20px 0; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-gap__intro.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 13px; width: 100%; max-width: 100%; margin: 0 0 14px; padding: 0; float: none; } body.jtta-site .jtta-gap__heading-col.et_pb_column, body.jtta-site .jtta-gap__lead-col.et_pb_column, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-gap__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column { float: none; display: flex; flex-direction: column; align-items: stretch; flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0; padding: 0; } body.jtta-site .jtta-gap__heading-col.et_pb_column { gap: 7px; } body.jtta-site .jtta-gap__overline.et_pb_text, body.jtta-site .jtta-gap__heading.et_pb_text, body.jtta-site .jtta-gap__lead.et_pb_text { width: 100%; max-width: 100%; margin: 0; padding: 0; text-align: left; } body.jtta-site .jtta-gap__overline.et_pb_text p, body.jtta-site .jtta-gap__heading.et_pb_text h2, body.jtta-site .jtta-gap__lead.et_pb_text p { text-align: left; } body.jtta-site .jtta-gap__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); } /* Banner full-bleed past section side pad */ body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row { width: calc(100% + 40px); max-width: none; margin: 0 -20px; padding: 0; } body.jtta-site .jtta-gap__image.et_pb_image, body.jtta-site .jtta-gap__image .et_pb_image_wrap { aspect-ratio: 421 / 673; width: 100%; max-width: 100%; } body.jtta-site .jtta-gap__image--desktop.et_pb_image, body.jtta-site .jtta-gap__image--desktop.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-gap__image--mobile.et_pb_image, body.jtta-site .jtta-gap__image--mobile.et_pb_image .et_pb_image_wrap { display: block; } /* Exists — 162:256 stacked */ body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section { padding: 14.5px 22px; min-height: 0; height: auto; } body.jtta-site .jtta-exists__row.et_pb_row, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 25px; max-width: 376px; margin: 0 auto; } body.jtta-site .jtta-exists__visual.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_block_column, body.jtta-site .jtta-exists__copy.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_block_column { flex: 0 0 auto; width: 100%; max-width: 376px; margin: 0; align-items: flex-start; } /* Figma 162:256 — heading/lead above photo */ body.jtta-site .jtta-exists__copy.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__copy.et_block_column { order: 1; } body.jtta-site .jtta-exists__visual.et_pb_column, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row > .jtta-exists__visual.et_block_column { order: 2; } body.jtta-site .jtta-exists__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-exists__lead.et_pb_text p { font-size: 12px; text-align: left; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { position: relative; width: 100%; max-width: 376px; height: auto; aspect-ratio: 376 / 250; max-height: none; border-radius: 15px; overflow: hidden; } body.jtta-site .jtta-exists__image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: 0; } /* Dims — 162:269 */ body.jtta-site .jtta-dims.et_pb_section, body.jtta-site .jtta-dims.et_block_section.et_pb_section { padding: 21px 9px; min-height: 0; height: auto; } /* Way — 166:414 vertical (phone SoT, pad 24/20) */ body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-way__intro.et_pb_row, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row { position: relative; flex-direction: column; align-items: flex-start; max-width: 373px; margin: 0 auto 32px; } body.jtta-site .jtta-way__heading-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_pb_column { width: 100%; max-width: 373px; margin: 0; } body.jtta-site .jtta-way__steps.et_pb_row, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-way__steps.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; max-width: 373px; margin: 0 auto; /* Phone SoT (~425) — same fix as 768: fit content, light tuck, nums visible */ --way-c1: 165px; --way-c: 180px; --way-overlap: 12px; --way-arrow-w: 36px; --way-arrow-h: 34px; --way-line-w: 2px; --way-gap-step: calc(var(--way-c) - var(--way-overlap)); --way-gap1: calc(var(--way-c1) - var(--way-overlap) / 2); } body.jtta-site .jtta-way__steps > .et_pb_column, body.jtta-site .jtta-way__step--experience, body.jtta-site .jtta-way__step:not(.jtta-way__step--experience), body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-way__step.et_pb_column_1_5.et_block_column { position: relative; box-sizing: border-box; flex: 0 0 auto; width: 100%; max-width: 373px; margin-left: 0; margin-bottom: 0; overflow: hidden; } body.jtta-site .jtta-way__step--experience, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .jtta-way__step--experience.et_pb_column_1_5.et_block_column { height: var(--way-c1); min-height: var(--way-c1); max-height: var(--way-c1); padding: 12px 48px 12px 24px; z-index: 5; } body.jtta-site .jtta-way__step:not(.jtta-way__step--experience), body.jtta-site .jtta-way__steps.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_5.et_block_column:not(.jtta-way__step--experience) { height: var(--way-c); min-height: var(--way-c); max-height: var(--way-c); padding: 12px 48px 12px 24px; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(n + 2) { margin-top: calc(0px - var(--way-overlap)); } body.jtta-site .jtta-way__step.et_pb_column > .et_pb_module, body.jtta-site.et_pb_gutters3 .jtta-way__step.et_pb_column_1_5.et_block_column > .et_pb_module { margin-top: 0; margin-bottom: 0; } body.jtta-site .jtta-way__icon.et_pb_image { margin: 4px 0 6px; } body.jtta-site .jtta-way__step--experience .jtta-way__icon.et_pb_image { margin-left: 0; } body.jtta-site .jtta-way__icon--experience .et_pb_image_wrap, body.jtta-site .jtta-way__icon--experience img { width: 56px; height: 40px; max-width: 56px; object-fit: contain; } body.jtta-site .jtta-way__icon--discover .et_pb_image_wrap, body.jtta-site .jtta-way__icon--discover img, body.jtta-site .jtta-way__icon--apply .et_pb_image_wrap, body.jtta-site .jtta-way__icon--apply img, body.jtta-site .jtta-way__icon--reflect .et_pb_image_wrap, body.jtta-site .jtta-way__icon--reflect img, body.jtta-site .jtta-way__icon--grow .et_pb_image_wrap, body.jtta-site .jtta-way__icon--grow img { width: 48px; height: 48px; max-width: 48px; object-fit: contain; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(1) { z-index: 5; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(2) { z-index: 4; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(3) { z-index: 3; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(4) { z-index: 2; } body.jtta-site .jtta-way__steps > .et_pb_column:nth-child(5) { z-index: 1; } body.jtta-site .jtta-way__steps::before, body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { display: block; visibility: visible; opacity: 1; } /* Phone SoT — Figma 166:414 rail via --way-* vars */ body.jtta-site .jtta-way__steps::before { right: calc((var(--way-arrow-w) - var(--way-line-w, 2px)) / 2); top: var(--way-gap1); bottom: auto; height: calc(3 * var(--way-gap-step)); width: var(--way-line-w, 2px); } body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { right: 0; top: calc(var(--way-gap1) - var(--way-arrow-h) / 2); width: var(--way-arrow-w); height: calc(3 * var(--way-gap-step) + var(--way-arrow-h)); background-image: url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"); background-size: var(--way-arrow-w) var(--way-arrow-h); background-position: center 0, center var(--way-gap-step), center calc(2 * var(--way-gap-step)), center calc(3 * var(--way-gap-step)); } body.jtta-site .jtta-way__arrow.et_pb_image, body.jtta-site .jtta-way__arrow.et_pb_image .et_pb_image_wrap, body.jtta-site .jtta-way__arrow img { display: none; visibility: hidden; width: 0; height: 0; } body.jtta-site .jtta-way__intro.et_pb_row, body.jtta-site .jtta-way__intro.et_block_row.et_pb_row { position: relative; margin: 0 auto 28px; max-width: 374px; } body.jtta-site .jtta-way__heading.et_pb_text { box-sizing: border-box; width: auto; max-width: calc(100% - 72px); padding-right: 0; } body.jtta-site .jtta-way__rocket.et_pb_image { position: absolute; top: 0; right: 0; left: auto; bottom: auto; z-index: 4; width: 60px; height: 63px; pointer-events: none; } body.jtta-site .jtta-way__rocket .et_pb_image_wrap, body.jtta-site .jtta-way__rocket img { width: 60px; height: 63px; max-width: 60px; } body.jtta-site .jtta-way__lead-col.et_pb_column, body.jtta-site .jtta-way__lead-col.et_block_column { display: block; position: static; flex-direction: column; gap: 0; } body.jtta-site .jtta-way__heading.et_pb_text h2 { font-size: 36px; line-height: 0.9644; max-width: none; text-align: left; white-space: normal; overflow-wrap: normal; word-break: normal; } body.jtta-site .jtta-way__lead.et_pb_text { width: 100%; max-width: 100%; overflow: visible; } body.jtta-site .jtta-way__lead.et_pb_text p { font-size: 12px; text-align: left; white-space: normal; overflow: visible; overflow-wrap: break-word; word-break: normal; } body.jtta-site .jtta-way__num.et_pb_text p, body.jtta-site .jtta-way__title.et_pb_text p, body.jtta-site .jtta-way__note.et_pb_text p { text-align: left; } body.jtta-site .jtta-way__num.et_pb_text p { font-size: 24.444px; } body.jtta-site .jtta-way__title.et_pb_text p { font-size: 24px; white-space: normal; } body.jtta-site .jtta-way__note.et_pb_text p { font-size: 12px; white-space: normal; } /* Inside — Figma phone 425 frame: 420×604, pad 12/20, gap 10, centered */ body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; height: 604px; min-height: 604px; padding: 12px 20px; justify-content: center; align-items: center; gap: 10px; overflow: visible; background: #fff; } body.jtta-site .jtta-inside .et_pb_row, body.jtta-site .jtta-inside .et_block_row.et_pb_row { box-sizing: border-box; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding: 0; } body.jtta-site .jtta-inside__intro.et_pb_row, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 0 0 auto; align-items: flex-start; align-self: stretch; gap: 0; margin: 0; max-width: 100%; } body.jtta-site .jtta-inside__heading-col.et_pb_column, body.jtta-site .jtta-inside__lead-col.et_pb_column, body.jtta-site .jtta-inside__intro.et_block_row.et_pb_row > .et_pb_column.et_block_column { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Track fills leftover height; items spaced like Figma rail */ body.jtta-site .jtta-inside__track.et_pb_row, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; justify-content: center; align-items: stretch; position: relative; width: 100%; max-width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; overflow: visible; } body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1 1 auto; justify-content: space-between; align-items: stretch; gap: 10px; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; } body.jtta-site .jtta-inside__track::before { display: block; content: ""; left: 4.5px; top: 8px; bottom: 8px; width: 1px; height: auto; background: #cbd5e1; } body.jtta-site .jtta-inside__heading.et_pb_text h2 { font-size: 36px; line-height: 0.9644; text-align: left; white-space: normal; } body.jtta-site .jtta-inside__lead.et_pb_text p { font-size: 12px; text-align: left; } body.jtta-site .jtta-inside__item.et_pb_text, body.jtta-site .jtta-inside__item.et_flex_module.et_pb_text, body.jtta-site .jtta-inside__item.et_pb_text:nth-child(n) { position: relative; left: auto; top: auto; right: auto; bottom: auto; transform: none; display: flex; flex: 1 1 0; align-items: center; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; text-align: left; z-index: 1; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: 100%; gap: 0; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p, body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase, body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__time { width: auto; max-width: none; flex: 0 0 auto; } body.jtta-site .jtta-inside__item.et_pb_text p:has(.jtta-inside__dot) { order: 1; display: flex; align-items: center; width: 10px; min-width: 10px; flex: 0 0 10px; margin: 0; line-height: 0; } /* Visual: ● 00.00 Question — clear gap after dot */ body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__dot { order: 1; flex: 0 0 auto; width: 10px; height: 10px; margin: 0; border-radius: 50%; background: #dc2626; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p.jtta-inside__time { order: 2; width: auto; min-width: 52px; margin: 0 0 0 14px; font-size: 14px; line-height: 18px; text-align: left; white-space: nowrap; color: #0f172a; } body.jtta-site .jtta-inside__item.et_pb_text .et_pb_text_inner > p.jtta-inside__phase { order: 3; width: auto; margin: 0 0 0 12px; font-size: 14px; line-height: 18px; text-align: left; white-space: nowrap; color: #0f172a; } /* Journey — 167:670 stacked; beat L4134 gap 28 */ body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section { padding: 12px 20px; min-height: 0; height: auto; overflow: visible; } body.jtta-site .jtta-journey .et_pb_row, body.jtta-site .jtta-journey .et_block_row.et_pb_row { max-width: 374px; margin-left: auto; margin-right: auto; } body.jtta-site .jtta-journey__intro.et_pb_row, body.jtta-site .jtta-journey__intro.et_block_row.et_pb_row { flex-direction: column; margin-bottom: 13px; max-width: 374px; } body.jtta-site .jtta-journey__heading-col.et_pb_column, body.jtta-site .jtta-journey__lead-col.et_pb_column { width: 100%; max-width: 100%; margin: 0; } body.jtta-site .jtta-journey__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: left; white-space: normal; } body.jtta-site .jtta-journey__lead.et_pb_text p { font-size: 12px; text-align: left; } body.jtta-site .jtta-journey__cards.et_pb_row, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-journey__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 24px; max-width: 374px; margin: 24px auto 0; overflow: visible; } body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .jtta-journey__card.et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { flex: 0 0 auto; width: 100%; max-width: 374px; height: auto; min-height: 0; margin: 0; border-radius: 47px; overflow: hidden; } body.jtta-site .jtta-journey__photo.et_pb_image, body.jtta-site .jtta-journey__photo.et_pb_image.et_flex_module { position: relative; width: 100%; height: auto; aspect-ratio: 373 / 322; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image > .et_pb_image_wrap, body.jtta-site .jtta-journey__photo.et_flex_module > .et_pb_image_wrap { display: block; position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image img, body.jtta-site .jtta-journey__photo .et_pb_image_wrap img { position: absolute; left: 50%; top: 50%; width: 128%; max-width: none; height: 128%; object-fit: cover; border-radius: 0; transform: translate(-50%, -50%); } body.jtta-site .jtta-journey__name.et_pb_text, body.jtta-site .jtta-journey__meta.et_pb_text, body.jtta-site .jtta-journey__tag.et_pb_text { padding-left: 28px; padding-right: 72px; } body.jtta-site .jtta-journey__name.et_pb_text h3 { font-size: 40px; margin-top: 8px; } body.jtta-site .jtta-journey__meta.et_pb_text p { font-size: 14px; } body.jtta-site .jtta-journey__tag.et_pb_text p { font-size: 12px; margin-bottom: 24px; } body.jtta-site .jtta-journey__go.et_pb_image { right: 20px; bottom: 20px; width: 47px; height: 47px; } body.jtta-site .jtta-journey__go .et_pb_image_wrap { width: 47px; height: 47px; } /* Depth — 168:684 / 167:680 icon | copy; go in-flow */ body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 18px; max-width: 379px; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; row-gap: 2px; flex: 0 0 auto; width: 100%; max-width: 379px; height: auto; min-height: 0; margin: 0; padding: 22px 20px 14px 8px; border-radius: 32px; } body.jtta-site .jtta-depth__icon.et_pb_image { grid-column: 1; grid-row: 1 / span 2; margin: 0; } body.jtta-site .jtta-depth__icon .et_pb_image_wrap, body.jtta-site .jtta-depth__icon img { width: 84px; height: 80px; } body.jtta-site .jtta-depth__copy.et_pb_text { grid-column: 2; grid-row: 1; max-width: 100%; min-width: 0; } body.jtta-site .jtta-depth__copy.et_pb_text .et_pb_text_inner { gap: 8px; } body.jtta-site .jtta-depth__copy.et_pb_text h3 { font-size: 36px; } body.jtta-site .jtta-depth__copy.et_pb_text .jtta-depth__months { font-size: 13.5px; } body.jtta-site .jtta-depth__copy.et_pb_text ul { padding-left: 18px; } body.jtta-site .jtta-depth__copy.et_pb_text li { font-size: 10.1px; margin-bottom: 8px; } body.jtta-site .jtta-depth__go.et_pb_image { position: relative; grid-column: 2; grid-row: 2; justify-self: end; right: auto; bottom: auto; margin: 2px 0 0; } body.jtta-site .jtta-depth__card--explorer .jtta-depth__go, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--explorer .jtta-depth__go img { width: 37px; height: 34px; } body.jtta-site .jtta-depth__card--discovery .jtta-depth__go, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go .et_pb_image_wrap, body.jtta-site .jtta-depth__card--discovery .jtta-depth__go img { width: 31px; height: 29px; } body.jtta-site .jtta-depth__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: center; } /* Outcomes — 168:780 2×2 */ body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-outcomes__grid.et_block_row.et_pb_row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 379px; } body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column { flex: none; width: 100%; max-width: none; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 8px 16px; } body.jtta-site .jtta-outcomes__heading.et_pb_text h2 { font-size: 32px; line-height: var(--jtta-lh-display); text-align: left; white-space: normal; } /* Parents — 170:857 stacked */ body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-parents__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; gap: 14px; max-width: 379px; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column_1_4.et_block_column { flex: 0 0 auto; width: 100%; max-width: 379px; min-width: 0; margin: 0; } body.jtta-site .jtta-parents__heading.et_pb_text h2 { font-size: 28px; line-height: var(--jtta-lh-display); text-align: left; } /* Proof — Figma 170:885 */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; column-gap: 25px; padding: 12px 20px; min-height: 0; height: auto; grid-template-columns: none; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row, body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { flex: 0 0 auto; width: 100%; max-width: 374px; margin: 0 auto; } body.jtta-site .jtta-proof__overline.et_pb_text p { margin: 0 0 7px; font-size: 12px; color: rgba(255, 255, 255, 0.57); } body.jtta-site .jtta-proof__heading.et_pb_text, body.jtta-site .jtta-proof__heading.et_pb_text .et_pb_text_inner, body.jtta-site .jtta-proof__heading.et_pb_text h2 { width: 100%; max-width: 367px; } body.jtta-site .jtta-proof__heading.et_pb_text h2 { font-size: 36px; line-height: 0.9644; white-space: normal; text-align: left; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 160px; min-height: 160px; max-width: 374px; } body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column { min-height: 0; padding: 4px 10px; gap: 0; } body.jtta-site .jtta-proof__icon.et_pb_image { width: 45px; height: 42px; margin: 0 auto 2px; } body.jtta-site .jtta-proof__icon .et_pb_image_wrap, body.jtta-site .jtta-proof__icon img { width: 45px; height: 42px; } body.jtta-site .jtta-proof__title.et_pb_text p { font-size: 9.612px; line-height: 1.398; } body.jtta-site .jtta-proof__body.et_pb_text p { max-width: 100%; font-size: 7.476px; line-height: 1.398; } /* Experience — 170:921 stacked 340; aspect 438/349 */ body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section { padding: 24px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-experience__cards.et_pb_row, body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-experience__cards.et_block_row.et_pb_row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 13px; max-width: 340px; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { flex: 0 0 auto; width: 100%; max-width: 340px; margin: 0; } body.jtta-site .jtta-experience__photo.et_pb_image, body.jtta-site .jtta-experience__photo .et_pb_image_wrap, body.jtta-site .jtta-experience__photo img { width: 100%; max-width: 340px; height: auto; aspect-ratio: 438 / 349; border-radius: 25.5px; } body.jtta-site .jtta-experience__label.et_pb_text p { font-size: 16px; text-align: center; } /* FAQ — 170:1019 */ body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section { padding: 24px 20px 40px; min-height: 0; height: auto; } body.jtta-site .jtta-faq__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: left; } body.jtta-site .jtta-faq__lead.et_pb_text p { font-size: 12px; line-height: normal; text-align: left; } /* CTA — 170:1085 */ body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: center; padding: 25px 20px; min-height: 0; height: auto; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site #page-container .jtta-cta .jtta-cta__row.et_pb_row { flex-direction: column; align-items: center; gap: 26px; max-width: 379px; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column, body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 379px; flex: 0 0 auto; text-align: center; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 36px; line-height: var(--jtta-lh-display); text-align: center; white-space: normal; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper { display: flex; justify-content: center; align-self: center; width: fit-content; max-width: 100%; margin: 0 auto; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: 21px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { display: inline-flex; width: auto; min-width: 0; max-width: 100%; height: 39.007px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button { padding: 7.801px 25.354px; border-radius: 7.801px; font-size: 15.539px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { padding: 10.114px 32.87px; border-radius: 10.114px; font-size: 15.539px; font-weight: 400; } body.jtta-site .jtta-cta__logo.et_pb_image, body.jtta-site .jtta-cta__logo .et_pb_image_wrap, body.jtta-site .jtta-cta__logo img { width: 258px; max-width: 100%; height: auto; aspect-ratio: 258 / 121; opacity: 0.55; } /* Footer — 172:1107 stacked */ .jtta-footer { padding: 40px 20px 28px; min-height: 0; } .jtta-footer__inner { max-width: 377px; margin: 0 auto; gap: 22px; } .jtta-footer__top { flex-direction: column; align-items: flex-start; gap: 22px; } .jtta-footer__brand { width: 100%; max-width: 198px; } .jtta-footer__logo, .jtta-footer__logo img { width: 153px; height: auto; } .jtta-footer__tagline { margin-top: 10px; font-size: 12.257px; } .jtta-footer__cols { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 0; } .jtta-footer__col { width: 100%; max-width: none; flex: none; padding: 18px 0; border-top: 1px solid rgba(148, 163, 184, 0.28); } .jtta-footer__col:first-child { border-top: 0; padding-top: 0; } .jtta-footer__heading { margin: 0 0 17px; font-size: 16px; } .jtta-footer__menu { gap: 19px; } .jtta-footer__menu a { font-size: 16px; } .jtta-footer__bottom { display: flex; flex-direction: column; align-items: stretch; gap: 28px; margin-top: 0; padding-top: 18px; border-top: 1px solid rgba(148, 163, 184, 0.28); } .jtta-footer__meta { display: flex; flex-direction: row; align-items: center; justify-content: space-between; order: 1; width: 100%; gap: 16px; } .jtta-footer__copy { order: 2; width: 100%; margin: 0; text-align: center; font-size: 14.44px; color: rgba(148, 163, 184, 0.41); } .jtta-footer__email, .jtta-footer__note { flex: 0 1 auto; min-width: 0; font-size: 14px; } } /* ------------------------------------------------------------------------- 360px phone band (≤360) — proportional scale of 425 / Figma 142:98 Scale = 360/420 ≈ 0.857. Same stacking & order; no new layout. Does not change 361–767, 768–1023, 1024–1199, or ≥1440. No !important. ------------------------------------------------------------------------- */ @media (max-width: 360px) { :root { --jtta-fs-display: 31px; --jtta-section-x: 17px; --jtta-header-h: 75px; --jtta-lh-tight: 0.9644; --jtta-lh-display: 0.9644; --jtta-content: 326px; --jtta-row: 326px; } /* Kill horizontal overflow from fixed Figma widths */ html, body.jtta-site { margin: 0; padding: 0; overflow-x: visible; } body.jtta-site #page-container { overflow-x: clip; } body.jtta-site #et-boc, body.jtta-site .et_pb_section, body.jtta-site .et_pb_row, body.jtta-site .et_pb_column { max-width: 100%; min-width: 0; box-sizing: border-box; } #main-header.jtta-header, #main-header.jtta-header.et-fixed-header, #main-header.jtta-header .jtta-header__inner { height: 75px !important; min-height: 75px; max-height: 75px; } .jtta-header__inner { height: 75px; padding: 10.7px 17px; } .jtta-header__logo, .jtta-header__logo img { width: 113px; height: 52.5px; } .jtta-header__toggle { width: 21px; height: 21px; } .jtta-header__nav { top: 75px; } /* Hero */ body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .et_pb_section.et_block_section.jtta-hero.et_pb_section_0, body.jtta-site .jtta-hero.et_block_section.et_pb_section { aspect-ratio: 421 / 865.55; padding: 10px 17px; } body.jtta-site .jtta-hero .et_pb_row { max-width: 326px; } body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { max-width: 100%; } body.jtta-site .jtta-hero__heading.et_pb_text { max-width: 100%; } body.jtta-site .jtta-hero__lead.et_pb_text { max-width: 260px; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text h1 span { font-size: clamp(17px, 6.6vw, 26px); line-height: 1.05; } body.jtta-site .jtta-hero__lead.et_pb_text { margin-top: 11px; } body.jtta-site .jtta-hero__lead.et_pb_text p { font-size: 10px; line-height: normal; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { max-width: 260px; margin: 11px 0 0; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin: 8px 0 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button, body.jtta-site .jtta-hero__btn--primary.et_pb_button, body.jtta-site .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 32px; padding: 7px 18px !important; font-size: 12px !important; white-space: nowrap !important; overflow: visible; } body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { max-width: 326px; padding: 0 0 9px; } body.jtta-site .jtta-hero__meta.et_pb_text, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { max-width: 220px; } body.jtta-site .jtta-hero__meta.et_pb_text p { font-size: 12px; } /* Marks */ body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { padding: 10px 17px 0; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row { gap: 9px; max-width: 321px; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column { max-width: 321px; } body.jtta-site .jtta-marks__visual.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column { width: 100%; max-width: 302px; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-marks__lead.et_pb_text p { font-size: 10px; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; max-width: 302px; height: 234px; } /* Future */ body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding: 34px 19px; } body.jtta-site .jtta-future .et_pb_row, body.jtta-site .jtta-future .et_block_row.et_pb_row { max-width: 323px; } body.jtta-site .jtta-future__cards.et_pb_row, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { gap: 29px; max-width: 323px; } body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { width: 100%; max-width: 321px; column-gap: 18px; grid-template-columns: auto minmax(0, 1fr); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--learn.et_block_column { min-height: 0; padding: 26px 15px; border-radius: 21px; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--perform.et_block_column, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--navigate.et_block_column { min-height: 0; padding: 16px 15px; border-radius: 32px; } body.jtta-site .jtta-future__heading.et_pb_text, body.jtta-site .jtta-future__heading.et_pb_text h2 { max-width: 314px; font-size: 31px; white-space: normal; } body.jtta-site .jtta-future__lead.et_pb_text p, body.jtta-site .jtta-future__overline.et_pb_text p { font-size: 10px; } body.jtta-site .jtta-future__title.et_pb_text h3 { font-size: 31px; } body.jtta-site .jtta-future__label.et_pb_text, body.jtta-site .jtta-future__title.et_pb_text, body.jtta-site .jtta-future__body.et_pb_text { max-width: 180px; } body.jtta-site .jtta-future__icon--learn .et_pb_image_wrap, body.jtta-site .jtta-future__icon--learn img { width: 80px; height: 81px; } body.jtta-site .jtta-future__icon--perform .et_pb_image_wrap, body.jtta-site .jtta-future__icon--perform img { width: 66px; height: 80px; } body.jtta-site .jtta-future__icon--navigate .et_pb_image_wrap, body.jtta-site .jtta-future__icon--navigate img { width: 64px; height: 64px; } body.jtta-site .jtta-future__title.et_pb_text h3::after { width: 38px; height: 2.3px; margin-top: 8.7px; } body.jtta-site .jtta-future__label.et_pb_text p { font-size: 10.4px; letter-spacing: 1.88px; } body.jtta-site .jtta-future__body.et_pb_text p { font-size: 10px; } /* Gap */ body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { padding: 14px 17px 0; } body.jtta-site .jtta-gap__intro.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row { max-width: 100%; margin: 0 0 12px; padding: 0; box-sizing: border-box; } body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row { width: calc(100% + 34px); margin: 0 -17px; } body.jtta-site .jtta-gap__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-gap__lead.et_pb_text p, body.jtta-site .jtta-gap__overline.et_pb_text p { font-size: 10px; } /* Exists */ body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section { padding: 12.4px 19px; } body.jtta-site .jtta-exists__row.et_pb_row, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row { gap: 21px; max-width: 322px; } body.jtta-site .jtta-exists__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-exists__lead.et_pb_text p { font-size: 10px; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { max-width: 322px; height: 214px; border-radius: 13px; } /* Dims */ body.jtta-site .jtta-dims.et_pb_section, body.jtta-site .jtta-dims.et_block_section.et_pb_section { padding: 18px 8px; } body.jtta-site .jtta-dims__heading.et_pb_text h2 { font-size: 24px; white-space: normal; } /* Way */ body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section { padding: 30px 20px; } body.jtta-site .jtta-way .et_pb_row, body.jtta-site .jtta-way .et_block_row.et_pb_row { max-width: 320px; } body.jtta-site .jtta-way__steps.et_pb_row, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-way__steps.et_block_row.et_pb_row { max-width: 320px; /* ≤360 scale of 425 SoT (360/420 ≈ 0.857) */ --way-c1: 129px; --way-c: 147px; --way-overlap: 10px; --way-arrow-w: 31px; --way-arrow-h: 29px; --way-line-w: 2px; --way-gap-step: calc(var(--way-c) - var(--way-overlap)); --way-gap1: calc(var(--way-c1) - var(--way-overlap) / 2); } body.jtta-site .jtta-way__heading.et_pb_text { max-width: calc(100% - 60px); padding-right: 0; } body.jtta-site .jtta-way__heading.et_pb_text h2 { font-size: 31px; max-width: none; white-space: normal; } body.jtta-site .jtta-way__lead.et_pb_text p, body.jtta-site .jtta-way__overline.et_pb_text p { font-size: 10px; } body.jtta-site .jtta-way__rocket.et_pb_image, body.jtta-site .jtta-way__rocket .et_pb_image_wrap, body.jtta-site .jtta-way__rocket img { width: 51px; height: 54px; } body.jtta-site .jtta-way__rocket.et_pb_image { top: 0; width: 51px; height: 54px; } body.jtta-site .jtta-way__step--experience { height: var(--way-c1); min-height: var(--way-c1); max-height: var(--way-c1); padding: 12px 40px 14px 24px; } body.jtta-site .jtta-way__step:not(.jtta-way__step--experience) { height: var(--way-c); min-height: var(--way-c); max-height: var(--way-c); padding: 12px 40px 14px 24px; } body.jtta-site .jtta-way__steps::before { right: calc((var(--way-arrow-w) - var(--way-line-w)) / 2); top: var(--way-gap1); width: var(--way-line-w); height: calc(3 * var(--way-gap-step)); } body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { right: 0; width: var(--way-arrow-w); --way-arrow-w: 31px; --way-arrow-h: 29px; background-image: url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"); background-size: var(--way-arrow-w) var(--way-arrow-h); top: calc(var(--way-gap1) - var(--way-arrow-h) / 2); height: calc(3 * var(--way-gap-step) + var(--way-arrow-h)); background-position: center 0, center var(--way-gap-step), center calc(2 * var(--way-gap-step)), center calc(3 * var(--way-gap-step)); } /* Inside */ body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section { padding: 12px 17px; } body.jtta-site .jtta-inside .et_pb_row, body.jtta-site .jtta-inside .et_block_row.et_pb_row { max-width: 321px; } body.jtta-site .jtta-inside__track.et_pb_row, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { max-width: 321px; margin: 16px auto 0; } body.jtta-site .jtta-inside__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-inside__lead.et_pb_text p, body.jtta-site .jtta-inside__overline.et_pb_text p { font-size: 10px; } body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { gap: 10px; } /* Journey */ body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section { padding: 10px 17px; } body.jtta-site .jtta-journey .et_pb_row, body.jtta-site .jtta-journey .et_block_row.et_pb_row { max-width: 321px; } body.jtta-site .jtta-journey__cards.et_pb_row, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-journey__cards.et_block_row.et_pb_row { gap: 21px; max-width: 321px; margin: 21px auto 0; } body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .jtta-journey__card.et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { max-width: 321px; border-radius: 21px; overflow: hidden; } body.jtta-site .jtta-journey__photo.et_pb_image, body.jtta-site .jtta-journey__photo.et_pb_image > .et_pb_image_wrap { overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image img { width: 128%; max-width: none; height: 128%; transform: translate(-50%, -50%); } body.jtta-site .jtta-journey__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-journey__lead.et_pb_text p { font-size: 10px; } /* Depth */ body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding: 21px 17px; } body.jtta-site .jtta-depth .et_pb_row, body.jtta-site .jtta-depth .et_block_row.et_pb_row { max-width: 325px; } body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { gap: 15px; max-width: 325px; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { grid-template-columns: 72px minmax(0, 1fr); column-gap: 5px; max-width: 325px; padding: 19px 18px 8px 7px; border-radius: 27px; } body.jtta-site .jtta-depth__icon .et_pb_image_wrap, body.jtta-site .jtta-depth__icon img { width: 72px; height: 69px; } body.jtta-site .jtta-depth__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-depth__banner.et_pb_row, body.jtta-site .jtta-depth__banner.et_block_row.et_pb_row { max-width: 325px; } body.jtta-site .jtta-depth__banner-text.et_pb_text p { font-size: 10px; white-space: normal; } /* Outcomes */ body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { padding: 21px 17px; } body.jtta-site .jtta-outcomes .et_pb_row, body.jtta-site .jtta-outcomes .et_block_row.et_pb_row { max-width: 325px; } body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-outcomes__grid.et_block_row.et_pb_row { gap: 12px; max-width: 325px; } body.jtta-site .jtta-outcomes__heading.et_pb_text h2 { font-size: 27px; white-space: normal; } body.jtta-site .jtta-outcomes__lead.et_pb_text p { font-size: 10px; } /* Parents */ body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding: 21px 17px; } body.jtta-site .jtta-parents .et_pb_row, body.jtta-site .jtta-parents .et_block_row.et_pb_row { max-width: 325px; } body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-parents__cards.et_block_row.et_pb_row { gap: 12px; max-width: 325px; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column { max-width: 325px; } body.jtta-site .jtta-parents__heading.et_pb_text h2 { font-size: 24px; white-space: normal; } /* Proof */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { gap: 21px; padding: 10px 17px; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row, body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { max-width: 325px; } body.jtta-site .jtta-proof__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { height: 138px; min-height: 138px; max-width: 325px; } body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column { padding: 3px 8px; } body.jtta-site .jtta-proof__icon.et_pb_image { width: 38px; height: 36px; margin: 0 auto 2px; } body.jtta-site .jtta-proof__icon .et_pb_image_wrap, body.jtta-site .jtta-proof__icon img { width: 38px; height: 36px; } body.jtta-site .jtta-proof__title.et_pb_text p { font-size: 8.2px; } body.jtta-site .jtta-proof__body.et_pb_text p { font-size: 6.4px; } /* Experience */ body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section { padding: 21px 17px; } body.jtta-site .jtta-experience .et_pb_row, body.jtta-site .jtta-experience .et_block_row.et_pb_row { max-width: 291px; } body.jtta-site .jtta-experience__cards.et_pb_row, body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-experience__cards.et_block_row.et_pb_row { gap: 11px; max-width: 291px; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { max-width: 291px; } body.jtta-site .jtta-experience__photo.et_pb_image, body.jtta-site .jtta-experience__photo .et_pb_image_wrap, body.jtta-site .jtta-experience__photo img { max-width: 291px; aspect-ratio: 438 / 349; border-radius: 22px; } body.jtta-site .jtta-experience__label.et_pb_text p { font-size: 14px; } /* FAQ */ body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section { padding: 21px 17px 34px; } body.jtta-site .jtta-faq .et_pb_row, body.jtta-site .jtta-faq .et_block_row.et_pb_row { max-width: 325px; } body.jtta-site .jtta-faq__heading.et_pb_text h2 { font-size: 31px; white-space: normal; } body.jtta-site .jtta-faq__lead.et_pb_text p, body.jtta-site .jtta-faq__overline.et_pb_text p { font-size: 10px; } /* CTA */ body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { padding: 21px 17px; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-cta__row.et_block_row.et_pb_row { gap: 22px; max-width: 325px; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column, body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { max-width: 325px; align-items: center; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 31px; white-space: normal; text-align: center; } body.jtta-site .jtta-cta__tagline.et_pb_text p { font-size: 14px; text-align: center; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper { width: fit-content; margin: 0 auto; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: 18px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: 100%; height: 33px; white-space: nowrap; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button { padding: 6.7px 21.7px; border-radius: 6.7px; font-size: 13.3px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { padding: 8.7px 28px; border-radius: 8.7px; font-size: 13.3px; } body.jtta-site .jtta-cta__logo.et_pb_image, body.jtta-site .jtta-cta__logo .et_pb_image_wrap, body.jtta-site .jtta-cta__logo img { width: 221px; max-width: 100%; height: auto; } /* Footer */ .jtta-footer { padding: 34px 17px 24px; } .jtta-footer__inner { max-width: 323px; gap: 19px; } .jtta-footer__top { gap: 19px; } .jtta-footer__logo, .jtta-footer__logo img { width: 131px; height: auto; } .jtta-footer__col { padding: 15px 0; } .jtta-footer__heading { margin-bottom: 14px; font-size: 14px; } .jtta-footer__menu { gap: 16px; } .jtta-footer__menu a { font-size: 14px; } .jtta-footer__bottom { gap: 22px; padding-top: 15px; } .jtta-footer__meta { gap: 12px; } .jtta-footer__email, .jtta-footer__note { font-size: 12px; white-space: normal; } .jtta-footer__copy { font-size: 12px; } } /* ------------------------------------------------------------------------- 325px phone band (≤325) — proportional scale of 425 / Figma 142:98 Scale = 325/420 ≈ 0.774. Same stacking & order; no new layout. Does not change 326–360, 361–767, tablet, or desktop. No !important. ------------------------------------------------------------------------- */ @media (max-width: 325px) { :root { --jtta-fs-display: 28px; --jtta-section-x: 15px; --jtta-header-h: 67px; --jtta-lh-tight: 0.9644; --jtta-lh-display: 0.9644; --jtta-content: 295px; --jtta-row: 295px; } html, body.jtta-site { margin: 0; padding: 0; overflow-x: visible; } body.jtta-site #page-container { overflow-x: clip; } body.jtta-site #et-boc, body.jtta-site .et_pb_section, body.jtta-site .et_pb_row, body.jtta-site .et_pb_column { max-width: 100%; min-width: 0; box-sizing: border-box; } /* Header */ #main-header.jtta-header, #main-header.jtta-header .jtta-header__inner { height: 67px; min-height: 67px; } .jtta-header__inner { height: 67px; padding: 9.7px 15px; } .jtta-header__logo, .jtta-header__logo img { width: 102px; height: 47.4px; } .jtta-header__toggle { width: 19px; height: 19px; } .jtta-header__toggle-bar { width: 15px; } .jtta-header__nav { top: 67px; } /* Hero */ body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .et_pb_section.et_block_section.jtta-hero.et_pb_section_0, body.jtta-site .jtta-hero.et_block_section.et_pb_section { aspect-ratio: 421 / 865.55; padding: 9px 15px; } body.jtta-site .jtta-hero .et_pb_row { max-width: 295px; } body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row, body.jtta-site .jtta-hero__heading.et_pb_text, body.jtta-site .jtta-hero__lead.et_pb_text, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { max-width: 240px; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text h1 span { font-size: 28px; line-height: var(--jtta-lh-display); } body.jtta-site .jtta-hero__lead.et_pb_text { margin-top: 10px; } body.jtta-site .jtta-hero__lead.et_pb_text p { font-size: 9px; line-height: normal; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { max-width: 240px; margin: 10px 0 0; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin: 7px 0 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button, body.jtta-site .jtta-hero__btn--primary.et_pb_button, body.jtta-site .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 30px; padding: 6px 16px !important; font-size: 11px !important; white-space: nowrap !important; overflow: visible; } body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { max-width: 295px; padding: 0 0 8px; } body.jtta-site .jtta-hero__meta.et_pb_text, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { max-width: 200px; } body.jtta-site .jtta-hero__meta.et_pb_text p { font-size: 11px; } /* Marks */ body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { padding: 9px 15px 0; } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row { gap: 9px; max-width: 295px; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column { max-width: 295px; } body.jtta-site .jtta-marks__visual.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_block_column { width: 100%; max-width: 272px; } body.jtta-site .jtta-marks__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-marks__lead.et_pb_text p { font-size: 9px; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; max-width: 272px; height: 211px; } /* Future */ body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding: 31px 15px; } body.jtta-site .jtta-future .et_pb_row, body.jtta-site .jtta-future .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-future__cards.et_pb_row, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-future__cards.et_block_row.et_pb_row { gap: 26px; max-width: 295px; } body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card, body.jtta-site .jtta-future__cards.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { width: 100%; max-width: 295px; column-gap: 14px; grid-template-columns: auto minmax(0, 1fr); } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--learn, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--learn.et_block_column { min-height: 0; padding: 23px 12px; border-radius: 19px; } body.jtta-site .jtta-future .et_pb_column.jtta-future__card--perform, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--perform.et_block_column, body.jtta-site .jtta-future .et_pb_column.jtta-future__card--navigate, body.jtta-site.et_pb_gutters3 .et_pb_column.jtta-future__card--navigate.et_block_column { min-height: 0; padding: 15px 12px; border-radius: 29px; } body.jtta-site .jtta-future__heading.et_pb_text, body.jtta-site .jtta-future__heading.et_pb_text h2 { max-width: 284px; font-size: 28px; white-space: normal; } body.jtta-site .jtta-future__lead.et_pb_text p, body.jtta-site .jtta-future__overline.et_pb_text p { font-size: 9px; } body.jtta-site .jtta-future__title.et_pb_text h3 { font-size: 28px; } body.jtta-site .jtta-future__label.et_pb_text, body.jtta-site .jtta-future__title.et_pb_text, body.jtta-site .jtta-future__body.et_pb_text { max-width: 162px; } body.jtta-site .jtta-future__icon--learn .et_pb_image_wrap, body.jtta-site .jtta-future__icon--learn img { width: 72px; height: 73px; } body.jtta-site .jtta-future__icon--perform .et_pb_image_wrap, body.jtta-site .jtta-future__icon--perform img { width: 60px; height: 72px; } body.jtta-site .jtta-future__icon--navigate .et_pb_image_wrap, body.jtta-site .jtta-future__icon--navigate img { width: 58px; height: 58px; } body.jtta-site .jtta-future__title.et_pb_text h3::after { width: 34.5px; height: 2.1px; margin-top: 7.8px; } body.jtta-site .jtta-future__label.et_pb_text p { font-size: 9.4px; letter-spacing: 1.7px; } body.jtta-site .jtta-future__body.et_pb_text p { font-size: 9px; } /* Gap */ body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { padding: 12px 15px 0; } body.jtta-site .jtta-gap__intro.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row { max-width: 100%; margin: 0 0 11px; padding: 0; box-sizing: border-box; } body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row { width: calc(100% + 30px); margin: 0 -15px; } body.jtta-site .jtta-gap__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-gap__lead.et_pb_text p, body.jtta-site .jtta-gap__overline.et_pb_text p { font-size: 9px; } /* Exists */ body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section { padding: 11px 15px; } body.jtta-site .jtta-exists__row.et_pb_row, body.jtta-site .jtta-exists__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-exists__row.et_block_row.et_pb_row { gap: 19px; max-width: 295px; } body.jtta-site .jtta-exists__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-exists__lead.et_pb_text p { font-size: 9px; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { max-width: 295px; height: 193px; border-radius: 12px; } /* Dims */ body.jtta-site .jtta-dims.et_pb_section, body.jtta-site .jtta-dims.et_block_section.et_pb_section { padding: 16px 7px; } body.jtta-site .jtta-dims__heading.et_pb_text h2 { font-size: 22px; white-space: normal; } /* Way */ body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section { padding: 27px 15px; } body.jtta-site .jtta-way .et_pb_row, body.jtta-site .jtta-way .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-way__steps.et_pb_row, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-way__steps.et_block_row.et_pb_row { max-width: 295px; /* ≤325 scale of 425 SoT (325/420 ≈ 0.774) */ --way-c1: 117px; --way-c: 132px; --way-overlap: 9px; --way-arrow-w: 28px; --way-arrow-h: 26px; --way-line-w: 2px; --way-gap-step: calc(var(--way-c) - var(--way-overlap)); --way-gap1: calc(var(--way-c1) - var(--way-overlap) / 2); } body.jtta-site .jtta-way__heading.et_pb_text { max-width: calc(100% - 56px); padding-right: 0; } body.jtta-site .jtta-way__heading.et_pb_text h2 { font-size: 28px; max-width: none; white-space: normal; } body.jtta-site .jtta-way__lead.et_pb_text p, body.jtta-site .jtta-way__overline.et_pb_text p { font-size: 9px; } body.jtta-site .jtta-way__rocket.et_pb_image, body.jtta-site .jtta-way__rocket .et_pb_image_wrap, body.jtta-site .jtta-way__rocket img { width: 46px; height: 49px; } body.jtta-site .jtta-way__rocket.et_pb_image { top: 0; width: 46px; height: 49px; } body.jtta-site .jtta-way__step--experience { height: var(--way-c1); min-height: var(--way-c1); max-height: var(--way-c1); padding: 10px 36px 12px 20px; } body.jtta-site .jtta-way__step:not(.jtta-way__step--experience) { height: var(--way-c); min-height: var(--way-c); max-height: var(--way-c); padding: 10px 36px 12px 20px; } body.jtta-site .jtta-way__steps::before { right: calc((var(--way-arrow-w) - var(--way-line-w)) / 2); top: var(--way-gap1); width: var(--way-line-w); height: calc(3 * var(--way-gap-step)); } body.jtta-site .jtta-way__steps.et_pb_row::after, body.jtta-site .jtta-way__steps.et_block_row.et_pb_row::after, body.jtta-site .jtta-way__steps::after { right: 0; width: var(--way-arrow-w); --way-arrow-w: 28px; --way-arrow-h: 26px; background-image: url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"), url("../images/jtta-way-step-arrow-down.svg"); background-size: var(--way-arrow-w) var(--way-arrow-h); top: calc(var(--way-gap1) - var(--way-arrow-h) / 2); height: calc(3 * var(--way-gap-step) + var(--way-arrow-h)); background-position: center 0, center var(--way-gap-step), center calc(2 * var(--way-gap-step)), center calc(3 * var(--way-gap-step)); } /* Inside */ body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section { padding: 12px 15px; } body.jtta-site .jtta-inside .et_pb_row, body.jtta-site .jtta-inside .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-inside__track.et_pb_row, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row { max-width: 295px; margin: 15px auto 0; } body.jtta-site .jtta-inside__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-inside__lead.et_pb_text p, body.jtta-site .jtta-inside__overline.et_pb_text p { font-size: 9px; } body.jtta-site .jtta-inside__track .et_pb_column, body.jtta-site .jtta-inside__track.et_block_row.et_pb_row > .et_pb_column.et_block_column { gap: 8px; } /* Journey */ body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section { padding: 9px 15px; } body.jtta-site .jtta-journey .et_pb_row, body.jtta-site .jtta-journey .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-journey__cards.et_pb_row, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-journey__cards.et_block_row.et_pb_row { gap: 19px; max-width: 295px; margin: 19px auto 0; } body.jtta-site .jtta-journey__card.et_pb_column, body.jtta-site .jtta-journey__cards.et_block_row.et_pb_row > .jtta-journey__card.et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-journey__card.et_pb_column_1_3.et_block_column { max-width: 295px; border-radius: 19px; overflow: hidden; } body.jtta-site .jtta-journey__photo.et_pb_image, body.jtta-site .jtta-journey__photo.et_pb_image > .et_pb_image_wrap { overflow: hidden; border-radius: 0; } body.jtta-site .jtta-journey__photo.et_pb_image img { width: 128%; max-width: none; height: 128%; transform: translate(-50%, -50%); } body.jtta-site .jtta-journey__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-journey__lead.et_pb_text p { font-size: 9px; } /* Depth */ body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding: 19px 15px; } body.jtta-site .jtta-depth .et_pb_row, body.jtta-site .jtta-depth .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-depth__cards.et_pb_row, body.jtta-site .jtta-depth__cards.et_block_row.et_pb_row { gap: 14px; max-width: 295px; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { grid-template-columns: 65px minmax(0, 1fr); column-gap: 5px; max-width: 295px; padding: 17px 14px 7px 6px; border-radius: 25px; } body.jtta-site .jtta-depth__icon .et_pb_image_wrap, body.jtta-site .jtta-depth__icon img { width: 65px; height: 62px; } body.jtta-site .jtta-depth__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-depth__banner.et_pb_row, body.jtta-site .jtta-depth__banner.et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-depth__banner-text.et_pb_text { padding-left: 16px; padding-right: 16px; } body.jtta-site .jtta-depth__banner-text.et_pb_text p { font-size: 9px; white-space: normal; } /* Outcomes */ body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { padding: 19px 15px; } body.jtta-site .jtta-outcomes .et_pb_row, body.jtta-site .jtta-outcomes .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-outcomes__grid.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-outcomes__grid.et_block_row.et_pb_row { gap: 10px; max-width: 295px; } body.jtta-site .jtta-outcomes__heading.et_pb_text h2 { font-size: 25px; white-space: normal; } body.jtta-site .jtta-outcomes__lead.et_pb_text p { font-size: 9px; } /* Parents */ body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section { padding: 19px 15px; } body.jtta-site .jtta-parents .et_pb_row, body.jtta-site .jtta-parents .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-parents__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-parents__cards.et_block_row.et_pb_row { gap: 10px; max-width: 295px; } body.jtta-site .jtta-parents__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-parents__card.et_pb_column { max-width: 295px; } body.jtta-site .jtta-parents__heading.et_pb_text h2 { font-size: 22px; white-space: normal; } /* Proof */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { gap: 19px; padding: 9px 15px; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row, body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-proof__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { height: 124px; min-height: 124px; max-width: 295px; } body.jtta-site .jtta-proof__cell.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-proof__cell.et_pb_column_1_4.et_block_column { padding: 2px 6px; } body.jtta-site .jtta-proof__icon.et_pb_image { width: 34px; height: 32px; margin: 0 auto 1px; } body.jtta-site .jtta-proof__icon .et_pb_image_wrap, body.jtta-site .jtta-proof__icon img { width: 34px; height: 32px; } body.jtta-site .jtta-proof__title.et_pb_text p { font-size: 7.5px; } body.jtta-site .jtta-proof__body.et_pb_text p { font-size: 5.8px; } /* Experience */ body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section { padding: 19px 15px; } body.jtta-site .jtta-experience .et_pb_row, body.jtta-site .jtta-experience .et_block_row.et_pb_row { max-width: 263px; } body.jtta-site .jtta-experience__cards.et_pb_row, body.jtta-site .jtta-experience__cards.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-experience__cards.et_block_row.et_pb_row { gap: 10px; max-width: 263px; } body.jtta-site .jtta-experience__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-experience__card.et_pb_column_1_5.et_block_column { max-width: 263px; } body.jtta-site .jtta-experience__photo.et_pb_image, body.jtta-site .jtta-experience__photo .et_pb_image_wrap, body.jtta-site .jtta-experience__photo img { max-width: 263px; aspect-ratio: 438 / 349; border-radius: 20px; } body.jtta-site .jtta-experience__label.et_pb_text p { font-size: 12px; } /* FAQ */ body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section { padding: 19px 15px 31px; } body.jtta-site .jtta-faq .et_pb_row, body.jtta-site .jtta-faq .et_block_row.et_pb_row { max-width: 295px; } body.jtta-site .jtta-faq__heading.et_pb_text h2 { font-size: 28px; white-space: normal; } body.jtta-site .jtta-faq__lead.et_pb_text p, body.jtta-site .jtta-faq__overline.et_pb_text p { font-size: 9px; } /* CTA */ body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { padding: 19px 15px; } body.jtta-site .jtta-cta__row.et_pb_row, body.jtta-site .jtta-cta__row.et_block_row.et_pb_row, body.jtta-site.et_pb_gutters3 .jtta-cta__row.et_block_row.et_pb_row { gap: 20px; max-width: 295px; } body.jtta-site .jtta-cta__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__copy.et_pb_column_3_5.et_block_column, body.jtta-site .jtta-cta__brand.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-cta__brand.et_pb_column_2_5.et_block_column { max-width: 295px; align-items: center; } body.jtta-site .jtta-cta__heading.et_pb_text h2 { font-size: 28px; white-space: normal; text-align: center; } body.jtta-site .jtta-cta__tagline.et_pb_text p { font-size: 12px; text-align: center; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper { width: fit-content; margin: 0 auto; } body.jtta-site #page-container .jtta-cta .jtta-cta__copy .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: 16px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: 100%; height: 30px; white-space: nowrap; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--primary.et_pb_button { padding: 6px 18px; border-radius: 6px; font-size: 12px; } body.jtta-site #page-container .jtta-cta .jtta-cta__btn--ghost.et_pb_button { padding: 7.8px 22px; border-radius: 7.8px; font-size: 12px; } body.jtta-site .jtta-cta__logo.et_pb_image, body.jtta-site .jtta-cta__logo .et_pb_image_wrap, body.jtta-site .jtta-cta__logo img { width: 200px; max-width: 100%; height: auto; } /* Footer */ .jtta-footer { padding: 31px 15px 20px; } .jtta-footer__inner { max-width: 295px; gap: 17px; } .jtta-footer__top { gap: 17px; } .jtta-footer__logo, .jtta-footer__logo img { width: 118px; height: auto; } .jtta-footer__col { padding: 14px 0; } .jtta-footer__heading { margin-bottom: 12px; font-size: 13px; } .jtta-footer__menu { gap: 14px; } .jtta-footer__menu a { font-size: 13px; } .jtta-footer__bottom { gap: 18px; padding-top: 14px; } .jtta-footer__meta { flex-wrap: wrap; justify-content: center; gap: 8px 16px; } .jtta-footer__email, .jtta-footer__note { font-size: 11px; white-space: normal; text-align: center; } .jtta-footer__copy { font-size: 11px; } } /* ------------------------------------------------------------------------- Final responsive audit — overflow / min-width / wrap guards Scoped per band so larger breakpoints stay unchanged. No !important. ------------------------------------------------------------------------- */ /* 1024 + 768: clear desktop outcomes min-width:316 on reduced grids */ @media (min-width: 768px) and (max-width: 1199px) { body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column { min-width: 0; } body.jtta-site .et_pb_section, body.jtta-site .et_pb_row, body.jtta-site .et_pb_column { min-width: 0; box-sizing: border-box; } } /* Phone (all ≤767): headings wrap; images never exceed row */ @media (max-width: 767px) { body.jtta-site .jtta-marks__heading.et_pb_text h2, body.jtta-site .jtta-future__heading.et_pb_text h2, body.jtta-site .jtta-gap__heading.et_pb_text h2, body.jtta-site .jtta-exists__heading.et_pb_text h2, body.jtta-site .jtta-way__heading.et_pb_text h2, body.jtta-site .jtta-inside__heading.et_pb_text h2, body.jtta-site .jtta-journey__heading.et_pb_text h2, body.jtta-site .jtta-depth__heading.et_pb_text h2, body.jtta-site .jtta-outcomes__heading.et_pb_text h2, body.jtta-site .jtta-parents__heading.et_pb_text h2, body.jtta-site .jtta-proof__heading.et_pb_text h2, body.jtta-site .jtta-faq__heading.et_pb_text h2, body.jtta-site .jtta-cta__heading.et_pb_text h2 { white-space: normal; overflow-wrap: break-word; } body.jtta-site img, body.jtta-site .et_pb_image_wrap, body.jtta-site .et_pb_image_wrap img { max-width: 100%; } body.jtta-site .jtta-depth__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-depth__card.et_pb_column_1_2.et_block_column { min-width: 0; max-width: 100%; } body.jtta-site .jtta-inside__item.et_pb_text .jtta-inside__phase { white-space: nowrap; min-width: 0; width: auto; } body.jtta-site .jtta-cta__btn--primary.et_pb_button, body.jtta-site .jtta-cta__btn--ghost.et_pb_button { min-width: 0; max-width: 100%; } body.jtta-site .jtta-exists__image.et_pb_image, body.jtta-site .jtta-exists__image .et_pb_image_wrap { max-width: 100%; height: auto; aspect-ratio: 376 / 250; } } /* ≤360 / ≤325: reinforce fluid cards after scale bands */ @media (max-width: 360px) { body.jtta-site .jtta-outcomes__card.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-outcomes__card.et_pb_column_1_4.et_block_column, body.jtta-site .jtta-future__cards > .et_pb_column.jtta-future__card, body.jtta-site.et_pb_gutters3 .jtta-future__card.et_pb_column_1_3.et_block_column { min-width: 0; width: 100%; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; height: auto; aspect-ratio: 352 / 273; } } @media (max-width: 325px) { body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { max-width: 100%; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button, body.jtta-site .jtta-hero__btn--ghost.et_pb_button { width: 100%; max-width: 165px; } } /* Marks 1024–1439 — keep heading/lead/image inside the section frame */ @media (min-width: 1024px) and (max-width: 1439px) { body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .et_pb_section.jtta-marks.et_pb_section_1, body.jtta-site .jtta-marks.et_block_section.et_pb_section { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-height: 0; overflow: hidden; padding-left: var(--jtta-section-x); padding-right: var(--jtta-section-x); } body.jtta-site .jtta-marks .et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row, body.jtta-site .jtta-marks .et_block_row.et_pb_row.jtta-marks__row { box-sizing: border-box; width: 100%; max-width: 100%; height: auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; } body.jtta-site .jtta-marks__copy.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_pb_column, body.jtta-site.et_pb_gutters3 .jtta-marks .et_block_row.et_pb_row > .jtta-marks__copy.et_block_column { flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%; } body.jtta-site .jtta-marks__heading.et_pb_text, body.jtta-site .jtta-marks__lead.et_pb_text, body.jtta-site .jtta-marks__heading.et_pb_text h2, body.jtta-site .jtta-marks__lead.et_pb_text p { width: 100%; max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: break-word; } body.jtta-site .jtta-marks__visual.et_pb_column, body.jtta-site .jtta-marks .et_block_row.et_pb_row > .jtta-marks__visual.et_pb_column { flex: 0 1 40%; width: auto; min-width: 0; max-width: 42%; height: auto; } body.jtta-site .jtta-marks__image.et_pb_image, body.jtta-site .jtta-marks__image .et_pb_image_wrap { width: 100%; max-width: 100%; height: auto; aspect-ratio: 507 / 393; } } /* ------------------------------------------------------------------------- ≥1440 — Desktop Figma SoT lock (node 73:736) Reaffirm tokens + dual-asset visibility. Does not alter <1440 bands. ------------------------------------------------------------------------- */ @media (min-width: 1440px) { :root { --jtta-section-x: 44px; --jtta-section-y: 22px; --jtta-content: 1374px; --jtta-row: 1352px; --jtta-fs-display: 64px; --jtta-header-h: 103px; --jtta-hero-h: 717px; } /* Header — Figma 73:737 = 1440 × 103 */ #main-header.jtta-header, #main-header.jtta-header.et-fixed-header, #main-header.jtta-header .jtta-header__inner { height: 103px; min-height: 103px; } .jtta-header__logo img { width: 178px; height: 97px; } body.jtta-site .jtta-hero__bg--mobile, body.jtta-site .jtta-gap__image--mobile.et_pb_image, body.jtta-site .jtta-gap__image--mobile.et_pb_image .et_pb_image_wrap { display: none; } body.jtta-site .jtta-hero__bg--desktop, body.jtta-site .jtta-gap__image--desktop.et_pb_image, body.jtta-site .jtta-gap__image--desktop.et_pb_image .et_pb_image_wrap { display: block; } body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0 { height: 717px; min-height: 717px; max-height: 717px; padding: 88px 44px 0 44px; background-image: none; } body.jtta-site .jtta-hero__bg--desktop img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } body.jtta-site .jtta-hero__copy-row.et_pb_row { max-width: 463px; margin-left: 0; margin-right: auto; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text h1 span { font-size: 64px; line-height: 0.9644; } body.jtta-site .jtta-hero__lead.et_pb_text { margin: 36px 0 0; } body.jtta-site .jtta-hero__lead.et_pb_text p { font-size: 15px; line-height: normal; } body.jtta-site .jtta-hero__copy-row .et_pb_button_module_wrapper { margin: 36px 0 0; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button { width: 159.46px; min-width: 159.46px; height: 45.56px; min-height: 45.56px; padding: 9.112px 29.614px; font-size: 19.427px; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { width: 289.78px; min-width: 289.78px; height: 45.329px; min-height: 45.329px; padding: 9.112px 29.614px; font-size: 17.808px; } body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding: 0 0 12px; border-bottom: 1px solid #ffffff; } /* Copy + meta share the same left edge (section padding), not a centered 1333 row */ body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .jtta-hero.et_block_section.et_pb_section { display: flex; flex-direction: column; align-items: stretch; } body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row { align-self: flex-start; box-sizing: border-box; width: 463px; max-width: 463px; margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 0; float: none; } body.jtta-site .jtta-hero__meta-row.et_pb_row, body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row { align-self: stretch; width: 100%; max-width: 100%; } body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row > .et_pb_column.et_block_column { align-items: flex-start; justify-content: flex-start; padding: 0; margin: 0; } body.jtta-site .jtta-hero__heading.et_pb_text, body.jtta-site .jtta-hero__lead.et_pb_text { width: 100%; margin-left: 0; text-align: left; } body.jtta-site .jtta-hero__meta-row.et_block_row.et_pb_row > .et_pb_column.et_block_column, body.jtta-site.et_pb_gutters3 .jtta-hero__meta-row .et_pb_column_1_3.et_block_column { flex: 0 1 auto; width: auto; max-width: none; margin: 0; padding: 0; } body.jtta-site .jtta-hero__meta-row > .et_pb_column:first-child, body.jtta-site .jtta-hero__meta-row > .et_pb_column:first-child .jtta-hero__meta.et_pb_text, body.jtta-site .jtta-hero__meta-row > .et_pb_column:first-child .jtta-hero__meta.et_pb_text p { justify-content: flex-start; text-align: left; } body.jtta-site .jtta-hero__meta-row > .et_pb_column:nth-child(2), body.jtta-site .jtta-hero__meta-row > .et_pb_column:nth-child(2) .jtta-hero__meta.et_pb_text, body.jtta-site .jtta-hero__meta-row > .et_pb_column:nth-child(2) .jtta-hero__meta.et_pb_text p { justify-content: center; text-align: center; } body.jtta-site .jtta-hero__meta-row > .et_pb_column:last-child, body.jtta-site .jtta-hero__meta-row > .et_pb_column:last-child .jtta-hero__meta.et_pb_text, body.jtta-site .jtta-hero__meta-row > .et_pb_column:last-child .jtta-hero__meta.et_pb_text p { justify-content: flex-end; text-align: right; } body.jtta-site .jtta-hero__meta.et_pb_text p { font-size: 16px; white-space: nowrap; text-align: left; } body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { padding: 22px 0; min-height: 1035px; } body.jtta-site .jtta-gap__intro.et_pb_row { width: 100%; max-width: none; box-sizing: border-box; margin: 0 auto 51px; padding: 0 44px; } body.jtta-site .jtta-gap__image.et_pb_image, body.jtta-site .jtta-gap__image .et_pb_image_wrap { aspect-ratio: 1440 / 654; } body.jtta-site .jtta-gap__image img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; } /* Proof — Figma 73:1131 */ body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 215px; column-gap: 215px; padding: 22px 44px; min-height: 355px; } body.jtta-site .jtta-proof__intro.et_pb_row, body.jtta-site .jtta-proof__intro.et_block_row.et_pb_row { flex: 0 0 429px; width: 429px; max-width: 429px; } body.jtta-site .jtta-proof__heading.et_pb_text h2 { width: 626px; max-width: 626px; font-size: 64px; line-height: 0.89135; white-space: nowrap; } body.jtta-site .jtta-proof__grid.et_pb_row, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row { flex: 0 0 700px; width: 700px; max-width: 700px; height: 300px; min-height: 300px; background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)); background-size: 1px 100%, 100% 1px; background-position: center center, center center; background-repeat: no-repeat; } body.jtta-site .jtta-proof__grid.et_pb_row::before, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row::before, body.jtta-site .jtta-proof__grid.et_pb_row::after, body.jtta-site .jtta-proof__grid.et_block_row.et_pb_row::after { content: none; display: none; } } /* Button motion — respect reduced motion */ @media (prefers-reduced-motion: reduce) { .jtta-btn, body.jtta-site .jtta-hero__btn.et_pb_button, body.jtta-site .jtta-cta__btn.et_pb_button { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; transform: none; } .jtta-btn:hover, .jtta-btn:active, body.jtta-site .jtta-hero__btn.et_pb_button:hover, body.jtta-site .jtta-hero__btn.et_pb_button:active, body.jtta-site .jtta-cta__btn.et_pb_button:hover, body.jtta-site .jtta-cta__btn.et_pb_button:active { transform: none; box-shadow: none; } } /* ------------------------------------------------------------------------- Mobile M 375 — proportional scale of Figma 420 phone hero (375/420) ------------------------------------------------------------------------- */ @media (max-width: 375px) { body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .jtta-hero.et_block_section.et_pb_section { aspect-ratio: 421 / 865.55; padding: 11px 18px; } body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row, body.jtta-site .jtta-hero__heading.et_pb_text, body.jtta-site .jtta-hero__lead.et_pb_text { max-width: 247px; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text h1 span { font-size: 32px; } body.jtta-site .jtta-hero__lead.et_pb_text p { font-size: 11px; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button { width: auto; min-width: 0; max-width: none; height: auto; min-height: 32px; padding: 6px 18px !important; font-size: 13px !important; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: none; height: auto; min-height: 32px; padding: 6px 18px !important; font-size: 13px !important; } body.jtta-site .jtta-hero__meta.et_pb_text p { font-size: 12px; text-align: center; } } /* ------------------------------------------------------------------------- Mobile S 320 — proportional scale of Figma 420 phone hero (320/420) ------------------------------------------------------------------------- */ @media (max-width: 320px) { body.jtta-site .jtta-hero.et_pb_section, body.jtta-site .et_pb_section.jtta-hero.et_pb_section_0, body.jtta-site .jtta-hero.et_block_section.et_pb_section { aspect-ratio: 421 / 865.55; padding: 10px 16px; } body.jtta-site .jtta-hero__copy-row.et_pb_row, body.jtta-site .jtta-hero__copy-row.et_block_row.et_pb_row, body.jtta-site .jtta-hero__heading.et_pb_text, body.jtta-site .jtta-hero__lead.et_pb_text { max-width: 210px; } body.jtta-site .jtta-hero__heading.et_pb_text h1, body.jtta-site .jtta-hero__heading.et_pb_text h1 span { font-size: 28px; } body.jtta-site .jtta-hero__lead.et_pb_text p { font-size: 10px; } body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--primary.et_pb_button, body.jtta-site #page-container .jtta-hero .et_pb_button_module_wrapper .jtta-hero__btn--ghost.et_pb_button { width: auto; min-width: 0; max-width: 100%; height: auto; min-height: 30px; padding: 6px 14px !important; font-size: 12px !important; } body.jtta-site .jtta-hero__meta.et_pb_text p { font-size: 11px; white-space: normal; text-align: center; } } /* ------------------------------------------------------------------------- Figma spacing lock — section gutters Desktop ≥1024: 44px L/R (exceptions: future 38.5, depth 40, outcomes R 33, CTA 50) Tablet 768–1023 + phone ≤767: 20px L/R Do not apply to hero image or THE GAP banner image. ------------------------------------------------------------------------- */ @media (min-width: 1024px) { body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-dims.et_pb_section, body.jtta-site .jtta-marks.et_block_section.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section, body.jtta-site .jtta-dims.et_block_section.et_pb_section { padding-left: 44px; padding-right: 44px; } body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section { padding-left: 38.5px; padding-right: 38.5px; } body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section { padding-left: 40px; padding-right: 40px; } body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section { padding-left: 44px; padding-right: 33px; } body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { padding-left: 50px; padding-right: 50px; } body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { padding-left: 0; padding-right: 0; } body.jtta-site .jtta-gap__intro.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; max-width: none; box-sizing: border-box; margin-left: 0; margin-right: 0; padding-left: 44px; padding-right: 44px; } body.jtta-site .jtta-gap__heading-col.et_pb_column { flex: 1 1 626px; width: auto; max-width: 626px; margin: 0; padding: 0; } body.jtta-site .jtta-gap__lead-col.et_pb_column { flex: 0 0 403px; width: 403px; max-width: 403px; margin: 0 0 0 auto; padding: 0; } body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row, body.jtta-site .jtta-gap__image.et_pb_image, body.jtta-site .jtta-gap__image .et_pb_image_wrap { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } @media (max-width: 1023px) { body.jtta-site .jtta-marks.et_pb_section, body.jtta-site .jtta-future.et_pb_section, body.jtta-site .jtta-exists.et_pb_section, body.jtta-site .jtta-way.et_pb_section, body.jtta-site .jtta-inside.et_pb_section, body.jtta-site .jtta-journey.et_pb_section, body.jtta-site .jtta-depth.et_pb_section, body.jtta-site .jtta-outcomes.et_pb_section, body.jtta-site .jtta-parents.et_pb_section, body.jtta-site .jtta-proof.et_pb_section, body.jtta-site .jtta-experience.et_pb_section, body.jtta-site .jtta-faq.et_pb_section, body.jtta-site .jtta-cta.et_pb_section, body.jtta-site .jtta-marks.et_block_section.et_pb_section, body.jtta-site .jtta-future.et_block_section.et_pb_section, body.jtta-site .jtta-exists.et_block_section.et_pb_section, body.jtta-site .jtta-way.et_block_section.et_pb_section, body.jtta-site .jtta-inside.et_block_section.et_pb_section, body.jtta-site .jtta-journey.et_block_section.et_pb_section, body.jtta-site .jtta-depth.et_block_section.et_pb_section, body.jtta-site .jtta-outcomes.et_block_section.et_pb_section, body.jtta-site .jtta-parents.et_block_section.et_pb_section, body.jtta-site .jtta-proof.et_block_section.et_pb_section, body.jtta-site .jtta-experience.et_block_section.et_pb_section, body.jtta-site .jtta-faq.et_block_section.et_pb_section, body.jtta-site .jtta-cta.et_block_section.et_pb_section { padding-left: 20px; padding-right: 20px; } /* Figma 162:269 — dimensions image inset is 9px, not the 20px gutter */ body.jtta-site .jtta-dims.et_pb_section, body.jtta-site .jtta-dims.et_block_section.et_pb_section { padding-left: 9px; padding-right: 9px; } body.jtta-site .jtta-gap.et_pb_section, body.jtta-site .jtta-gap.et_block_section.et_pb_section { padding-left: 20px; padding-right: 20px; } body.jtta-site .jtta-gap__intro.et_pb_row, body.jtta-site .jtta-gap__intro.et_block_row.et_pb_row { padding-left: 0; padding-right: 0; } body.jtta-site .jtta-gap__banner.et_pb_row, body.jtta-site .jtta-gap__banner.et_block_row.et_pb_row { margin-left: -20px; margin-right: -20px; padding-left: 0; padding-right: 0; width: calc(100% + 40px); max-width: none; } }