:root {
--ink: #101b30;
--muted: #5b616c;
--orange: #ff5c32;
--orange-deep: #f04d24;
--orange-gloss: linear-gradient(135deg, #ff8a5a 0%, #ff673b 36%, #f45128 72%, #df401d 100%);
--warm: #fbf8f6;
--line: #e9e8e6;
--card: #ffffff;
--shadow: 0 18px 50px rgb(26 30 38 / 8%);
--font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
--font-sans:  "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", system-ui, sans-serif;
--font-hand:  "Klee", "Klee One", "YuKyokasho", cursive;
--page-max: 1240px;
--page-gutter: 56px;
}
.shared-site-header { position: sticky; z-index: 90; top: 0; background: rgb(255 255 255 / 94%); backdrop-filter: blur(18px); }
.shared-site-header .desktop-nav a.is-current { color: var(--orange-deep); }
.shared-site-header .desktop-nav a.is-current::after { opacity: 1; transform: scaleX(1); }
.about-page { color: var(--ink); background: #fff; }
.about-page main { overflow: hidden; }
.about-hero { position: relative; display: grid; width: min(100%, 1540px); min-height: 740px; margin: 0 auto; padding-left: max(42px, calc((100vw - 1260px) / 2)); grid-template-columns: .82fr 1.18fr; align-items: center; background: linear-gradient(125deg, #fff 0%, #fff8f3 56%, #fff1e8 100%); }
.about-hero::before { position: absolute; bottom: -150px; left: -145px; width: 390px; height: 390px; border: 1px solid rgb(255 92 50 / 22%); border-radius: 46% 54% 66% 34%; content: ""; animation: about-orbit 18s linear infinite; }
@keyframes about-orbit { to { transform: rotate(360deg); } }
.about-hero-copy { position: relative; z-index: 2; max-width: 650px; padding: 100px 44px 100px 0; }
.about-hero-copy small { color: var(--orange-deep); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.about-hero-copy h1 { margin: 24px 0 28px; font-size: clamp(48px, 5.2vw, 72px); line-height: 1.38; letter-spacing: -.055em; }
.about-hero-copy p { max-width: 570px; margin: 0; color: #505965; font-size: 15px; line-height: 2.05; }
.about-hero-visual { position: relative; align-self: stretch; min-height: 740px; }
.about-hero-visual figure { position: absolute; inset: 34px 0 34px 6%; margin: 0; overflow: hidden; border-radius: 110px 0 0 28px; }
.about-hero-visual figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(7 19 41 / 38%)); content: ""; }
.about-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-visual > span { position: absolute; z-index: 2; color: #fff; font-family: Georgia, serif; font-size: clamp(15px, 1.8vw, 26px); font-style: italic; letter-spacing: .14em; }
.about-hero-visual > span:nth-of-type(1) { right: 57%; bottom: 76px; }
.about-hero-visual > span:nth-of-type(2) { right: 34%; bottom: 76px; }
.about-hero-visual > span:nth-of-type(3) { right: 10%; bottom: 76px; color: #ffb398; }
.about-origin { display: grid; width: min(calc(100% - 72px), 1180px); margin: 0 auto; padding: 150px 0 170px; grid-template-columns: 260px 1fr; gap: 70px; }
.about-origin-label { padding-top: 18px; }
.about-origin-label small, .about-message header small, .about-values header small, .about-ecosystem header small, .about-company-heading small, .about-contact small { display: block; color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.about-origin-label span { display: block; margin-top: 12px; font-size: 15px; font-weight: 800; }
.about-origin-copy h2 { margin: 0 0 37px; font-size: clamp(44px, 5vw, 67px); line-height: 1.42; letter-spacing: -.055em; }
.about-origin-copy > p { max-width: 760px; margin: 0 0 20px; color: #535d68; font-size: 15px; line-height: 2.15; }
.about-origin-copy blockquote { position: relative; margin: 52px 0 0; padding: 34px 40px; border-radius: 4px 38px 38px; background: var(--orange-gloss); color: #fff; font-size: clamp(21px, 2.4vw, 31px); font-weight: 800; line-height: 1.75; box-shadow: 0 24px 60px rgb(220 72 31 / 18%); }
.about-message { padding: 140px max(36px, calc((100vw - 1180px) / 2)); background: #0c1c32; color: #fff; }
.about-message header { display: flex; margin-bottom: 72px; align-items: end; justify-content: space-between; }
.about-message header h2 { margin: 16px 0 0; font-size: clamp(39px, 4.6vw, 61px); letter-spacing: -.045em; }
.about-message article { display: grid; max-width: 1080px; margin: 0 auto 44px; align-items: stretch; border: 1px solid rgb(255 255 255 / 15%); background: rgb(255 255 255 / 5%); }
.about-message-primary { grid-template-columns: 340px 1fr; border-radius: 24px 24px 78px !important; }
.about-message-secondary { width: 82%; margin-right: 0 !important; grid-template-columns: 1fr 260px; border-radius: 24px 70px 24px 24px !important; }
.about-message figure { min-height: 420px; margin: 0; overflow: hidden; }
.about-message-primary figure { border-radius: 23px 0 0 77px; }
.about-message-secondary figure { min-height: 330px; border-radius: 0 69px 23px 0; }
.about-message figure img { width: 100%; height: 100%; object-fit: cover; object-position: center top; background: #fff; }
.about-message article > div { padding: 54px 56px; }
.about-message article small { color: #ff9c7b; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.about-message article h3 { margin: 19px 0 26px; font-size: 25px; line-height: 1.65; }
.about-message article p { margin: 0 0 18px; color: rgb(255 255 255 / 72%); font-size: 14px; line-height: 2.05; }
.about-values { width: min(calc(100% - 72px), 1180px); margin: 0 auto; padding: 150px 0 170px; }
.about-values header { max-width: 850px; margin-bottom: 65px; }
.about-values header h2, .about-ecosystem header h2 { margin: 19px 0 0; font-size: clamp(39px, 4.6vw, 59px); line-height: 1.45; letter-spacing: -.05em; }
.about-values > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.about-values article { position: relative; min-height: 270px; padding: 31px 27px; overflow: hidden; border: 1px solid #eadfd9; border-radius: 18px 18px 52px; background: #fff; grid-column: span 2; transition: transform .3s ease, box-shadow .3s ease; }
.about-values article:nth-child(4), .about-values article:nth-child(5) { grid-column: span 3; }
.about-values article:hover { box-shadow: 0 25px 55px rgb(37 30 25 / 10%); transform: translateY(-7px); }
.about-values article::after { position: absolute; right: -36px; bottom: -46px; width: 130px; height: 130px; border: 25px solid rgb(255 92 50 / 7%); border-radius: 50%; content: ""; }
.about-values article > span { color: var(--orange); font-family: Georgia, serif; font-size: 35px; }
.about-values h3 { margin: 40px 0 17px; font-size: 20px; }
.about-values p { position: relative; z-index: 1; margin: 0; color: #5d6570; font-size: 13px; line-height: 1.9; }
.about-ecosystem { padding: 145px max(36px, calc((100vw - 1180px) / 2)) 155px; background: #fff4ed; }
.about-ecosystem header { max-width: 780px; }
.about-ecosystem header > p { max-width: 700px; margin: 25px 0 0; color: #5c626c; font-size: 14px; line-height: 2; }
.about-ecosystem > div { display: grid; margin-top: 62px; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-ecosystem a { position: relative; min-height: 330px; padding: 38px 33px; overflow: hidden; border: 1px solid #f0d2c5; border-radius: 20px 20px 64px; background: #fff; transition: transform .3s ease, box-shadow .3s ease; }
.about-ecosystem a:hover { box-shadow: 0 24px 50px rgb(120 64 42 / 11%); transform: translateY(-8px); }
.about-ecosystem a small { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.about-ecosystem a h3 { margin: 55px 0 17px; font-size: 28px; }
.about-ecosystem a p { margin: 0; color: #5e636c; font-size: 13px; line-height: 1.95; }
.about-ecosystem a span { position: absolute; right: 32px; bottom: 29px; color: var(--orange-deep); font-size: 12px; font-weight: 900; }
.about-company { display: grid; width: min(calc(100% - 72px), 1080px); margin: 0 auto; padding: 155px 0; grid-template-columns: 280px 1fr; gap: 65px; }
.about-company-heading h2 { margin: 18px 0 0; font-size: 45px; }
.about-company dl { margin: 0; border-top: 1px solid #dcd9d6; }
.about-company dl > div { display: grid; padding: 24px 8px; grid-template-columns: 180px 1fr; border-bottom: 1px solid #dcd9d6; }
.about-company dt { color: #6a7078; font-size: 12px; font-weight: 800; }
.about-company dd { margin: 0; font-size: 14px; line-height: 1.9; }
.about-contact { display: flex; width: min(calc(100% - 48px), 1240px); min-height: 320px; margin: 0 auto 80px; padding: 60px 68px; align-items: center; justify-content: space-between; border-radius: 28px 28px 90px; background: var(--orange-gloss); color: #fff; box-shadow: 0 25px 60px rgb(216 68 30 / 18%); }
.about-contact small { color: #fff; opacity: .76; }
.about-contact h2 { margin: 19px 0 12px; font-size: clamp(38px, 4vw, 54px); }
.about-contact p { margin: 0; font-size: 14px; line-height: 1.9; }
.about-contact > a { display: grid; min-width: 230px; min-height: 64px; place-items: center; border-radius: 999px; background: #fff; color: var(--orange-deep); font-size: 13px; font-weight: 900; }
.college-report-page { background: #fff; color: var(--ink); }
.college-report-page main { overflow: hidden; }
.report-archive > header small, .report-page-cta small { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.report-featured { display: grid; width: min(calc(100% - 72px), 1180px); min-height: 560px; margin: 150px auto 165px; overflow: hidden; grid-template-columns: .9fr 1.1fr; border-radius: 28px 28px 90px; background: #0c1c32; color: #fff; }
.report-featured > div { display: flex; padding: 56px 52px; flex-direction: column; justify-content: center; }
.report-featured span { color: #ff9d7e; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.report-featured time { margin-top: 37px; color: rgb(255 255 255 / 55%); font-family: Georgia, serif; font-size: 14px; }
.report-featured h2 { margin: 16px 0 21px; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.55; }
.report-featured p { margin: 0; color: rgb(255 255 255 / 70%); font-size: 13px; line-height: 2; }
.report-featured a { width: fit-content; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid #ff9d7e; color: #ffb299; font-size: 12px; font-weight: 900; }
.report-featured figure { min-height: 560px; margin: 0; overflow: hidden; border-radius: 100px 0 0 0; }
.report-featured figure img { width: 100%; height: 100%; object-fit: cover; }
.report-archive { width: min(calc(100% - 72px), 1180px); margin: 0 auto; padding-bottom: 170px; }
.report-archive > header { max-width: 760px; margin-bottom: 55px; }
.report-archive > header h2 { margin: 17px 0 15px; font-size: clamp(38px, 4.5vw, 57px); }
.report-archive > header p { color: #606771; font-size: 13px; }
.report-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.report-list-card { overflow: hidden; border: 1px solid #e5dfdb; border-radius: 20px 20px 58px; background: #fff; transition: transform .3s ease, box-shadow .3s ease; }
.report-list-card:hover { box-shadow: 0 24px 50px rgb(31 35 42 / 10%); transform: translateY(-6px); }
.report-list-card summary { display: grid; min-height: 100%; cursor: pointer; list-style: none; }
.report-list-card summary::-webkit-details-marker { display: none; }
.report-list-card figure { position: relative; height: 260px; margin: 0; overflow: hidden; }
.report-list-card figure img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s ease; }
.report-list-card:hover figure img { scale: 1.035; }
.report-list-card figure span { position: absolute; bottom: 16px; left: 16px; padding: 8px 12px; border-radius: 999px; background: rgb(255 255 255 / 91%); color: var(--orange-deep); font-size: 10px; font-weight: 900; }
.report-list-card summary > div { padding: 28px 29px 26px; }
.report-list-card time { color: #7b7f85; font-family: Georgia, serif; font-size: 13px; }
.report-list-card h3 { min-height: 61px; margin: 13px 0 14px; font-size: 20px; line-height: 1.55; }
.report-list-card summary p { min-height: 51px; margin: 0; color: #626873; font-size: 12px; line-height: 1.8; }
.report-list-card summary b { display: flex; margin-top: 22px; padding-top: 17px; align-items: center; justify-content: space-between; border-top: 1px solid #ece8e5; color: var(--orange-deep); font-size: 11px; }
.report-list-card summary b i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #fff1ea; font-size: 16px; font-style: normal; }
.report-list-card[open] summary b i { transform: rotate(45deg); }
.report-list-detail { padding: 25px 29px 29px; border-top: 1px solid #ece8e5; background: #fff8f4; }
.report-list-detail small { color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.report-list-detail p { margin: 13px 0 20px; color: #525a65; font-size: 13px; line-height: 1.9; }
.report-list-detail a { color: var(--orange-deep); font-size: 11px; font-weight: 900; }
.report-page-cta { display: flex; width: min(calc(100% - 48px), 1180px); min-height: 300px; margin: 0 auto 80px; padding: 55px 65px; align-items: center; justify-content: space-between; border-radius: 28px 28px 88px; background: #fff1e9; }
.report-page-cta h2 { margin: 16px 0 11px; font-size: 44px; }
.report-page-cta p { max-width: 610px; margin: 0; color: #59616b; font-size: 13px; line-height: 1.9; }
.report-page-cta > a { display: grid; min-width: 230px; min-height: 62px; place-items: center; border-radius: 999px; background: var(--orange-gloss); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 16px 35px rgb(224 72 31 / 17%); }
.faq-page { background: #fff; color: var(--ink); }
.faq-page main { overflow: hidden; }
.faq-page-hero { position: relative; min-height: 500px; padding: 120px 36px; background: linear-gradient(130deg, #fff8f3, #fff 65%); text-align: center; }
.faq-page-hero::before, .faq-page-hero::after { position: absolute; border: 1px solid rgb(255 92 50 / 16%); border-radius: 48% 52% 62% 38%; content: ""; }
.faq-page-hero::before { top: -160px; left: -130px; width: 380px; height: 380px; }
.faq-page-hero::after { right: -90px; bottom: -150px; width: 300px; height: 300px; }
.faq-page-hero small { color: var(--orange-deep); font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.faq-page-hero h1 { margin: 25px 0 22px; font-size: clamp(48px, 5.8vw, 76px); letter-spacing: -.055em; }
.faq-page-hero > div > span { display: block; width: 52px; height: 4px; margin: 0 auto 27px; border-radius: 99px; background: var(--orange); }
.faq-page-hero p { margin: 0; color: #575f69; font-size: 14px; line-height: 2.05; }
.faq-category-nav { position: relative; z-index: 2; display: grid; width: min(calc(100% - 72px), 1040px); margin: -57px auto 140px; grid-template-columns: repeat(4, 1fr); border-radius: 20px; background: #fff; box-shadow: 0 22px 65px rgb(38 32 28 / 11%); }
.faq-category-nav a { display: grid; min-height: 116px; padding: 23px 22px; grid-template-columns: 1fr auto; align-content: center; border-right: 1px solid #ece8e5; }
.faq-category-nav a:first-child { border-radius: 20px 0 0 20px; }
.faq-category-nav a:last-child { border: 0; border-radius: 0 20px 20px 0; }
.faq-category-nav a:hover { background: #fff6f0; }
.faq-category-nav span { color: var(--orange); font-family: Georgia, serif; font-size: 12px; }
.faq-category-nav strong { grid-row: 2; margin-top: 9px; font-size: 14px; }
.faq-category-nav b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--orange); }
.faq-page-groups { width: min(calc(100% - 72px), 1040px); margin: 0 auto; }
.faq-page-groups > section { display: grid; padding: 0 0 135px; grid-template-columns: 280px 1fr; gap: 70px; scroll-margin-top: 120px; }
.faq-page-groups > section > header { display: flex; align-items: flex-start; gap: 22px; }
.faq-page-groups > section > header > span { color: #ffc7b4; font-family: Georgia, serif; font-size: 40px; line-height: 1; }
.faq-page-groups header small { color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.faq-page-groups header h2 { margin: 11px 0 0; font-size: 28px; line-height: 1.4; }
.faq-page-groups details { border-top: 1px solid #dfddda; }
.faq-page-groups details:last-child { border-bottom: 1px solid #dfddda; }
.faq-page-groups summary { display: grid; min-height: 88px; padding: 22px 8px; grid-template-columns: 42px 1fr auto; align-items: center; cursor: pointer; list-style: none; }
.faq-page-groups summary::-webkit-details-marker { display: none; }
.faq-page-groups summary i, .faq-page-groups details > p i { color: var(--orange); font-family: Georgia, serif; font-size: 20px; font-style: normal; font-weight: 700; }
.faq-page-groups summary strong { font-size: 14px; line-height: 1.7; }
.faq-page-groups summary b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #fff0e8; color: var(--orange); font-size: 16px; }
.faq-page-groups details[open] summary b { transform: rotate(45deg); }
.faq-page-groups details > p { display: grid; margin: 0; padding: 3px 46px 28px 8px; grid-template-columns: 42px 1fr; color: #5c636d; font-size: 13px; line-height: 2; }
.faq-contact { display: flex; width: min(calc(100% - 48px), 1120px); min-height: 340px; margin: 20px auto 80px; padding: 62px 68px; align-items: center; justify-content: space-between; border-radius: 28px 28px 88px; background: #0c1c32; color: #fff; }
.faq-contact small { color: #ff9877; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.faq-contact h2 { margin: 18px 0 15px; font-size: clamp(34px, 4vw, 49px); line-height: 1.45; }
.faq-contact p { margin: 0; color: rgb(255 255 255 / 66%); font-size: 13px; }
.faq-contact a { display: grid; min-width: 220px; min-height: 60px; place-items: center; border-radius: 999px; background: var(--orange-gloss); color: #fff; font-size: 12px; font-weight: 900; }
.legal-page { background: #fff; color: var(--ink); }
.legal-page main { overflow: visible; }
.legal-hero { min-height: 455px; padding: 110px 36px 100px; background: linear-gradient(135deg, #0c1c32, #142f4f); color: #fff; text-align: center; }
.legal-hero > div { max-width: 880px; margin: 0 auto; }
.legal-hero small { color: #ff9877; font-size: 10px; font-weight: 900; letter-spacing: .21em; }
.legal-hero h1 { margin: 27px 0 24px; font-size: clamp(42px, 5.2vw, 66px); line-height: 1.45; letter-spacing: -.045em; }
.legal-hero p { max-width: 700px; margin: 0 auto; color: rgb(255 255 255 / 69%); font-size: 14px; line-height: 2; }
.legal-hero time { display: block; margin-top: 23px; color: rgb(255 255 255 / 48%); font-size: 11px; }
.legal-layout { display: grid; width: min(calc(100% - 72px), 1100px); margin: 0 auto; padding: 115px 0 160px; grid-template-columns: 250px minmax(0, 1fr); gap: 85px; align-items: start; }
.legal-layout aside { position: sticky; top: 110px; display: grid; max-height: calc(100vh - 140px); overflow: auto; }
.legal-layout aside > span { margin-bottom: 20px; color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.legal-layout aside a { display: grid; padding: 12px 0; grid-template-columns: 32px 1fr; border-bottom: 1px solid #ece9e7; color: #67707a; font-size: 10px; line-height: 1.55; }
.legal-layout aside a b { color: #c8c4c0; font-family: Georgia, serif; font-size: 9px; }
.legal-layout aside a:hover { color: var(--orange-deep); }
.page-fallback-body { width: min(calc(100% - 72px), 760px); margin: 0 auto; padding: 115px 0 160px; }
.page-fallback-body > section { padding-bottom: 40px; }
.page-fallback-body img { max-width: 100%; height: auto; }
.legal-document > section { position: relative; padding: 0 0 70px; scroll-margin-top: 120px; }
.legal-document > section > span { display: block; margin-bottom: 11px; color: #f3b29c; font-family: Georgia, serif; font-size: 13px; }
.legal-document h2 { margin: 0 0 27px; padding-bottom: 18px; border-bottom: 1px solid #dedbd8; font-size: 23px; line-height: 1.55; }
.legal-document p { margin: 0 0 17px; color: #4f5761; font-size: 14px; line-height: 2.05; }
.legal-document ul { display: grid; margin: 7px 0 0; padding: 0; gap: 8px; list-style: none; }
.legal-document li { position: relative; padding: 14px 17px 14px 40px; border-radius: 9px; background: #faf8f7; color: #525a64; font-size: 13px; line-height: 1.85; }
.legal-document li::before { position: absolute; top: 20px; left: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); content: ""; }
.legal-contact { display: flex; margin-top: 10px; padding: 27px 30px; align-items: center; justify-content: space-between; border-radius: 15px; background: #fff1e9; gap: 25px; }
.legal-contact p { margin: 0; font-size: 12px; }
.legal-contact a { padding: 13px 18px; border-radius: 999px; background: var(--orange-gloss); color: #fff; font-size: 10px; font-weight: 900; white-space: nowrap; }
@media (max-width: 900px) {
.about-hero { min-height: 0; padding: 0; grid-template-columns: 1fr; }
.about-hero-copy { order: 2; max-width: none; padding: 55px 28px 70px; }
.about-hero-visual { order: 1; min-height: 440px; }
.about-hero-visual figure { inset: 0; border-radius: 0 0 0 70px; }
.about-hero-visual > span { bottom: 25px !important; }
.about-origin { grid-template-columns: 1fr; gap: 38px; }
.about-message-primary, .about-message-secondary { width: 100%; grid-template-columns: 260px 1fr; }
.about-message-secondary > div { order: 2; }
.about-message-secondary figure { order: 1; }
.about-values > div { grid-template-columns: 1fr 1fr; }
.about-values article, .about-values article:nth-child(4), .about-values article:nth-child(5) { grid-column: auto; }
.about-values article:last-child { grid-column: 1 / -1; }
.about-ecosystem > div { grid-template-columns: 1fr; }
.about-ecosystem a { min-height: 260px; }
.about-company { grid-template-columns: 1fr; gap: 40px; }
.about-contact, .report-page-cta, .faq-contact { align-items: flex-start; flex-direction: column; gap: 34px; }
.report-featured { grid-template-columns: 1fr; }
.report-featured figure { order: 1; min-height: 390px; border-radius: 0 0 70px 0; }
.report-featured > div { order: 2; }
.report-list-grid { grid-template-columns: 1fr; }
.faq-category-nav { grid-template-columns: 1fr 1fr; }
.faq-category-nav a:nth-child(2) { border-right: 0; }
.faq-category-nav a { border-bottom: 1px solid #ece8e5; }
.faq-page-groups > section { grid-template-columns: 1fr; gap: 37px; }
.legal-layout { grid-template-columns: 1fr; gap: 55px; }
.legal-layout aside { position: static; max-height: none; grid-template-columns: 1fr 1fr; gap: 0 25px; }
.legal-layout aside > span { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
.about-hero-visual { min-height: 320px; }
.about-hero-copy { padding: 45px 21px 61px; }
.about-hero-copy h1 { margin-top: 19px; font-size: 37px; line-height: 1.5; }
.about-hero-copy p { font-size: 13px; }
.about-origin { width: calc(100% - 42px); padding: 90px 0 105px; gap: 25px; }
.about-origin-copy h2 { margin-bottom: 26px; font-size: 35px; }
.about-origin-copy > p { font-size: 13px; }
.about-origin-copy blockquote { margin-top: 35px; padding: 26px 24px; font-size: 18px; }
.about-message { padding: 90px 20px; }
.about-message header { margin-bottom: 39px; }
.about-message header h2 { font-size: 32px; line-height: 1.45; }
.about-message-primary, .about-message-secondary { display: flex; flex-direction: column; }
.about-message article figure { order: 1; width: 100%; min-height: 300px; border-radius: 22px 22px 58px 0; }
.about-message article > div { order: 2; padding: 30px 23px 37px; }
.about-message article h3 { font-size: 20px; }
.about-message article p { font-size: 13px; }
.about-values { width: calc(100% - 42px); padding: 90px 0 105px; }
.about-values header { margin-bottom: 38px; }
.about-values header h2, .about-ecosystem header h2 { font-size: 33px; }
.about-values > div { display: flex; margin-right: -21px; padding-right: 21px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.about-values article, .about-values article:last-child { min-width: 78vw; min-height: 245px; scroll-snap-align: start; }
.about-ecosystem { padding: 90px 21px 100px; }
.about-ecosystem header > p { font-size: 13px; }
.about-ecosystem > div { margin-top: 38px; }
.about-ecosystem a { min-height: 260px; padding: 29px 25px; }
.about-company { width: calc(100% - 42px); padding: 95px 0; }
.about-company-heading h2 { font-size: 36px; }
.about-company dl > div { grid-template-columns: 1fr; gap: 8px; }
.about-company dt { color: var(--orange-deep); }
.about-contact { width: calc(100% - 20px); min-height: 0; margin-bottom: 40px; padding: 43px 25px 48px; border-radius: 24px 24px 65px; }
.about-contact h2 { font-size: 34px; }
.about-contact p { font-size: 13px; }
.about-contact > a { width: 100%; min-width: 0; }
.report-featured { width: calc(100% - 20px); margin: 90px auto 105px; border-radius: 22px 22px 62px; }
.report-featured figure { min-height: 290px; }
.report-featured > div { padding: 34px 24px 40px; }
.report-featured h2 { font-size: 27px; }
.report-archive { width: calc(100% - 42px); padding-bottom: 100px; }
.report-archive > header { margin-bottom: 35px; }
.report-archive > header h2 { font-size: 33px; }
.report-list-card figure { height: 215px; }
.report-list-card summary > div { padding: 23px 21px; }
.report-list-card h3 { min-height: 0; font-size: 18px; }
.report-list-card summary p { min-height: 0; font-size: 13px; }
.report-list-detail { padding: 22px 21px 25px; }
.report-page-cta { width: calc(100% - 20px); min-height: 0; margin-bottom: 40px; padding: 42px 24px 48px; border-radius: 23px 23px 65px; }
.report-page-cta h2 { font-size: 34px; }
.report-page-cta > a { width: 100%; min-width: 0; }
.faq-page-hero { min-height: 430px; padding: 90px 22px; }
.faq-page-hero h1 { font-size: 42px; }
.faq-page-hero p { font-size: 13px; }
.faq-category-nav { width: calc(100% - 30px); margin-top: -52px; margin-bottom: 95px; }
.faq-category-nav a { min-height: 102px; padding: 18px 16px; }
.faq-category-nav strong { font-size: 12px; }
.faq-page-groups { width: calc(100% - 42px); }
.faq-page-groups > section { padding-bottom: 95px; gap: 25px; }
.faq-page-groups > section > header > span { font-size: 32px; }
.faq-page-groups header h2 { font-size: 25px; }
.faq-page-groups summary { min-height: 82px; padding: 18px 2px; grid-template-columns: 32px 1fr auto; }
.faq-page-groups summary strong { font-size: 13px; }
.faq-page-groups details > p { padding: 0 34px 25px 2px; grid-template-columns: 32px 1fr; font-size: 13px; }
.faq-contact { width: calc(100% - 20px); min-height: 0; padding: 43px 24px 48px; border-radius: 23px 23px 65px; }
.faq-contact h2 { font-size: 31px; }
.faq-contact a { width: 100%; min-width: 0; }
.legal-hero { min-height: 390px; padding: 85px 21px 75px; }
.legal-hero h1 { font-size: 36px; }
.legal-hero p { font-size: 13px; }
.legal-layout { width: calc(100% - 42px); padding: 80px 0 105px; gap: 45px; }
.page-fallback-body { width: calc(100% - 42px); padding: 80px 0 105px; }
.legal-layout aside { display: grid; grid-template-columns: 1fr; }
.legal-layout aside a { font-size: 11px; }
.legal-document > section { padding-bottom: 57px; }
.legal-document h2 { font-size: 19px; }
.legal-document p { font-size: 13px; }
.legal-document li { padding: 13px 14px 13px 36px; font-size: 12px; }
.legal-contact { align-items: flex-start; flex-direction: column; }
}
.business-page {
--biz-blue: #2f687b;
--biz-blue-deep: #163f50;
--biz-pale: #eef8fa;
--biz-line: #cfe1e6;
color: #152338;
background: #fff;
}
.business-page main { overflow: hidden; }
.business-page .shared-footer { margin-top: 0; }
.business-page .desktop-nav a.is-current { color: var(--biz-blue); }
.business-page .desktop-nav a.is-current::after { background: var(--biz-blue); opacity: 1; transform: scaleX(1); }
.biz-header { position: sticky; z-index: 80; top: 0; background: rgb(255 255 255 / 93%); backdrop-filter: blur(16px); }
.biz-section { width: min(calc(100% - 64px), 1180px); margin: 0 auto; padding: 120px 0; }
.biz-heading { max-width: 800px; margin-bottom: 58px; }
.biz-heading > div { display: flex; margin-bottom: 20px; align-items: center; gap: 16px; color: var(--biz-blue); }
.biz-heading > div > span { font-family: Georgia, serif; font-size: 25px; font-weight: 700; }
.biz-heading > div > small { font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.biz-heading h2 { margin: 0; font-size: clamp(34px, 4.2vw, 55px); line-height: 1.35; letter-spacing: -.04em; }
.biz-heading > p { max-width: 720px; margin: 22px 0 0; color: #566674; font-size: 14px; line-height: 2; }
.biz-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(9 28 42 / 94%) 0%, rgb(9 28 42 / 76%) 47%, rgb(9 28 42 / 14%) 78%); content: ""; }
.biz-consultations { padding-top: 130px; }
.biz-consultation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.biz-consultation-grid > a { position: relative; min-height: 290px; padding: 34px 30px 28px; overflow: hidden; border: 1px solid var(--biz-line); border-radius: 18px 18px 54px; background: #fff; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }
.biz-consultation-grid > a::after { position: absolute; right: -40px; bottom: -45px; width: 140px; height: 140px; border: 30px solid rgb(47 104 123 / 7%); border-radius: 50%; content: ""; }
.biz-consultation-grid > a:hover { background: #f7fcfd; box-shadow: 0 24px 55px rgb(33 71 82 / 12%); transform: translateY(-7px); }
.biz-consultation-grid > a > span { color: #9bbac3; font-family: Georgia, serif; font-size: 14px; }
.biz-consultation-grid > a > i { display: grid; width: 67px; height: 67px; margin-top: 26px; place-items: center; border-radius: 50%; background: var(--biz-pale); color: var(--biz-blue); font-size: 29px; font-style: normal; }
.biz-consultation-grid h3 { margin: 25px 0 12px; font-size: 20px; line-height: 1.55; }
.biz-consultation-grid p { margin: 0; color: #61707b; font-size: 13px; line-height: 1.8; }
.biz-consultation-grid b { display: block; margin-top: 23px; color: var(--orange); font-size: 11px; }
.biz-proof-line { display: flex; min-height: 72px; margin: 33px 0 0; padding: 18px 28px; align-items: center; border-radius: 14px; background: linear-gradient(90deg, #eef7f9, #f9fcfc); color: #506470; font-size: 13px; line-height: 1.8; }
.biz-proof-line strong { margin-right: 20px; color: var(--biz-blue); white-space: nowrap; }
.biz-training { position: relative; background: linear-gradient(135deg, #eef8fa, #fff 62%); }
.biz-training::after { position: absolute; top: 0; right: 0; width: 38%; height: 330px; border-radius: 0 0 0 100px; background: linear-gradient(90deg, rgb(238 248 250 / 20%), rgb(238 248 250 / 60%)), url('../images/writing.webp') center/cover; content: ""; opacity: .45; }
.biz-training .biz-heading { position: relative; z-index: 1; max-width: 780px; }
.biz-training-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.biz-training-stats article { min-height: 190px; padding: 30px 24px; border: 1px solid #dcecef; background: rgb(255 255 255 / 90%); }
.biz-training-stats article:first-child { border-radius: 18px 0 0 18px; }
.biz-training-stats article:last-child { border-radius: 0 18px 18px 0; }
.biz-training-stats p { margin: 0 0 21px; color: var(--biz-blue); font-size: 14px; }
.biz-training-stats strong { margin-right: 6px; font-family: Georgia, serif; font-size: 38px; line-height: 1; }
.biz-training-stats span { color: #53636f; font-size: 12px; line-height: 1.8; }
.biz-training-cases { display: grid; max-width: 1000px; margin: 24px auto 0; padding: 16px; grid-template-columns: 54px repeat(3, 1fr); gap: 10px; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgb(42 80 93 / 7%); }
.biz-training-cases > span { display: grid; place-items: center; color: var(--biz-blue); font-size: 11px; font-weight: 900; letter-spacing: .14em; writing-mode: vertical-rl; }
.biz-training-cases article { display: grid; min-height: 102px; padding: 8px; grid-template-columns: 82px 1fr; gap: 12px; align-items: center; border-radius: 12px; background: #fbfdfd; }
.biz-training-cases article img { width: 82px; height: 78px; object-fit: cover; border-radius: 9px; }
.biz-training-cases article:last-child { grid-template-columns: 1fr; padding: 14px; background: var(--biz-pale); }
.biz-training-cases small { color: var(--biz-blue); font-size: 9px; font-weight: 900; }
.biz-training-cases h3 { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
.biz-recruitment { background: #fff; }
.biz-recruit-points { display: grid; grid-template-columns: .86fr 1.14fr; gap: 42px; align-items: center; }
.biz-recruit-points ul { display: grid; margin: 0; padding: 0; gap: 18px; list-style: none; }
.biz-recruit-points li { position: relative; padding: 20px 22px 20px 55px; border: 1px solid var(--biz-line); border-radius: 12px; color: #43545f; font-size: 13px; font-weight: 750; }
.biz-recruit-points li::before { position: absolute; top: 50%; left: 20px; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--biz-blue); color: #fff; content: "✓"; transform: translateY(-50%); }
.biz-candidate-preview { display: grid; min-height: 395px; overflow: hidden; grid-template-columns: .72fr 1.28fr; border: 1px solid var(--biz-line); border-radius: 18px 18px 58px; background: linear-gradient(145deg, #f6fbfc, #fff); box-shadow: 0 24px 55px rgb(34 75 86 / 8%); }
.biz-candidate-preview > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.biz-candidate-preview > div { padding: 31px 27px; }
.biz-candidate-preview small { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.biz-candidate-preview h3 { margin: 12px 0 11px; font-size: 20px; line-height: 1.55; }
.biz-candidate-preview p { margin: 0; color: #5e6d77; font-size: 13.5px; line-height: 1.8; }
.biz-candidate-preview dl { display: grid; margin: 23px 0 0; grid-template-columns: 1fr 1fr; gap: 8px; }
.biz-candidate-preview dl > div { padding: 12px 13px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e0ecef; }
.biz-candidate-preview dt { color: var(--biz-blue); font-size: 11px; font-weight: 900; }
.biz-candidate-preview dd { margin: 7px 0 0; color: #7a878f; font-size: 12px; }
.biz-recruit-flow { max-width: 720px; margin: 58px auto 0; padding: 34px 42px; border-radius: 19px; background: var(--biz-pale); }
.biz-recruit-flow > small { display: block; margin: 0 0 24px 82px; color: var(--biz-blue); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.biz-recruit-flow article { position: relative; min-height: 86px; margin-left: 26px; padding: 7px 0 28px 66px; border-left: 2px dotted #9ec0c9; }
.biz-recruit-flow article:last-child { min-height: 55px; padding-bottom: 0; border-left-color: transparent; }
.biz-recruit-flow article span { position: absolute; top: 0; left: -26px; display: grid; width: 50px; height: 50px; place-items: center; border: 5px solid var(--biz-pale); border-radius: 50%; background: var(--biz-blue); color: #fff; font-size: 10px; font-weight: 900; }
.biz-recruit-flow h3 { margin: 8px 0 0; font-size: 15px; line-height: 1.6; }
.biz-public { background: linear-gradient(145deg, #edf8fb 0%, #f8fcfd 66%, #e9f4ef 100%); }
.biz-public .biz-section { position: relative; }
.biz-public .biz-section::after { position: absolute; right: 0; bottom: 68px; width: 300px; height: 140px; border-bottom: 4px solid #aad0c4; background: repeating-linear-gradient(90deg, transparent 0 24px, rgb(109 171 153 / 18%) 25px 39px); clip-path: polygon(0 100%, 0 75%, 7% 75%, 7% 42%, 13% 42%, 13% 67%, 20% 67%, 20% 28%, 27% 28%, 27% 74%, 34% 74%, 34% 52%, 43% 52%, 43% 15%, 53% 15%, 53% 68%, 61% 68%, 61% 35%, 69% 35%, 69% 78%, 77% 78%, 77% 48%, 86% 48%, 86% 72%, 94% 72%, 94% 55%, 100% 55%, 100% 100%); content: ""; }
.biz-public-cases { position: relative; z-index: 1; display: grid; max-width: 990px; grid-template-columns: 1fr 1fr; gap: 18px; }
.biz-public-cases article { position: relative; min-height: 335px; padding: 36px 34px; overflow: hidden; border: 1px solid #cfe4e8; border-radius: 20px 20px 76px; background: rgb(255 255 255 / 84%); box-shadow: 0 22px 55px rgb(46 90 102 / 8%); }
.biz-public-cases article::after { position: absolute; right: -46px; bottom: -50px; width: 170px; height: 170px; border: 34px solid rgb(47 104 123 / 6%); border-radius: 50%; content: ""; }
.biz-public-cases small { color: var(--orange); font-family: Georgia, serif; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.biz-public-cases article > span { display: block; width: fit-content; margin-top: 26px; padding: 7px 11px; border-radius: 999px; background: var(--biz-pale); color: var(--biz-blue); font-size: 10px; font-weight: 900; }
.biz-public-cases h3 { margin: 15px 0 13px; font-size: 23px; line-height: 1.5; }
.biz-public-cases p { max-width: 390px; margin: 0; color: #5c6d77; font-size: 13px; line-height: 1.9; }
.biz-public-cases article > div { position: relative; z-index: 1; display: flex; margin-top: 25px; flex-wrap: wrap; gap: 7px; }
.biz-public-cases article b { padding: 7px 10px; border: 1px solid #cfe4e8; border-radius: 999px; color: #4d6b76; font-size: 9px; }
.biz-public-expansion { position: relative; z-index: 1; display: grid; max-width: 990px; margin-top: 18px; padding: 28px 32px; grid-template-columns: 1fr auto; align-items: center; border-radius: 18px; background: var(--biz-blue-deep); color: #fff; gap: 30px; }
.biz-public-expansion small { display: block; margin-bottom: 8px; color: #94c4cf; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.biz-public-expansion strong { display: block; font-size: 21px; line-height: 1.5; }
.biz-public-expansion p { margin: 8px 0 0; color: rgb(255 255 255 / 68%); font-size: 11px; line-height: 1.75; }
.biz-public-expansion > a { display: flex; min-width: 210px; min-height: 54px; padding: 0 19px; align-items: center; justify-content: space-between; border-radius: 999px; background: #fff; color: var(--biz-blue-deep); font-size: 11px; font-weight: 900; }
.biz-results > div:last-child { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.biz-results article { position: relative; min-height: 230px; padding: 29px 27px; overflow: hidden; border: 1px solid var(--biz-line); border-radius: 16px; background: #fff; grid-column: span 4; }
.biz-results article:nth-child(1),
.biz-results article:nth-child(5) { grid-column: span 5; background: linear-gradient(135deg, #eaf6f8, #fff); }
.biz-results article:nth-child(2),
.biz-results article:nth-child(4) { grid-column: span 7; }
.biz-results article::after { position: absolute; right: -35px; bottom: -45px; width: 130px; height: 130px; border: 26px solid rgb(47 104 123 / 7%); border-radius: 50%; content: ""; }
.biz-results small { display: inline-block; padding: 7px 11px; border-radius: 999px; background: var(--biz-pale); color: var(--biz-blue); font-size: 9px; font-weight: 900; }
.biz-results article > p { margin: 26px 0 16px; color: var(--biz-blue); font-size: 15px; }
.biz-results article > p strong { margin-right: 7px; font-family: Georgia, serif; font-size: 46px; line-height: 1; }
.biz-results article > span { position: relative; z-index: 1; color: #596875; font-size: 12px; line-height: 1.8; }
.biz-process { background: #f7fafb; }
.biz-process .biz-heading { max-width: none; }
.biz-process .biz-section > div { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.biz-process .biz-section > div::before { position: absolute; top: 23px; right: 8%; left: 8%; border-top: 2px dotted #8fb7c2; content: ""; }
.biz-process article { position: relative; padding-top: 56px; }
.biz-process article > span { position: absolute; z-index: 1; top: 0; left: 0; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: var(--biz-blue); color: #fff; font-size: 10px; font-weight: 900; }
.biz-process h3 { margin: 19px 0 12px; font-size: 17px; }
.biz-process p { margin: 0; color: #63727c; font-size: 12px; line-height: 1.8; }
.biz-faq { max-width: 1050px; }
.biz-faq > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.biz-faq details { border: 1px solid #dce8eb; border-radius: 12px; background: #fff; }
.biz-faq summary { display: grid; min-height: 70px; padding: 18px 21px; grid-template-columns: 1fr 24px; align-items: center; cursor: pointer; color: #324652; font-size: 13px; font-weight: 850; line-height: 1.6; list-style: none; }
.biz-faq summary::-webkit-details-marker { display: none; }
.biz-faq summary b { color: var(--orange); font-size: 19px; font-weight: 400; }
.biz-faq details > p { margin: 0; padding: 0 48px 23px 21px; color: #61717b; font-size: 12px; line-height: 1.9; }
.biz-contact { position: relative; background: linear-gradient(135deg, #fff 0 72%, #edf7f9 72%); }
.biz-contact-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 42px; align-items: start; }
.biz-contact form { display: grid; padding: 33px; grid-template-columns: 1fr 1fr; gap: 22px 18px; border: 1px solid #e1e9eb; border-radius: 18px; background: #fff; box-shadow: 0 25px 65px rgb(41 68 77 / 7%); }
.biz-contact label { display: grid; gap: 9px; }
.biz-contact label > span { color: #3e505b; font-size: 11px; font-weight: 850; }
.biz-contact label b { margin-left: 5px; color: var(--orange); font-size: 9px; }
.biz-contact input,
.biz-contact select,
.biz-contact textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #d9e2e5; border-radius: 7px; background: #fff; color: #243640; font: inherit; font-size: 12px; }
.biz-contact textarea { resize: vertical; }
.biz-contact .is-wide { grid-column: 1 / -1; }
.biz-contact form > p { margin: 0; color: #7a858c; font-size: 10px; line-height: 1.7; }
.biz-contact form > button { display: flex; min-height: 60px; padding: 0 25px; align-items: center; justify-content: space-between; border: 0; border-radius: 999px; background: var(--orange-gloss); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; }
.biz-contact-layout > figure { position: sticky; top: 125px; height: 650px; margin: 0; overflow: hidden; border-radius: 20px 90px 20px 90px; }
.biz-contact-layout > figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(13 45 58 / 88%)); content: ""; }
.biz-contact-layout > figure img { width: 100%; height: 100%; object-fit: cover; }
.biz-contact-layout figcaption { position: absolute; z-index: 1; right: 28px; bottom: 35px; left: 28px; color: #fff; }
.biz-contact-layout figcaption strong { display: block; font-size: 21px; line-height: 1.5; }
.biz-contact-layout figcaption span { display: block; margin-top: 11px; color: rgb(255 255 255 / 76%); font-size: 12px; line-height: 1.8; }
@media (max-width: 1180px) {
.biz-section { width: calc(100% - 40px); padding: 90px 0; }
.biz-heading { margin-bottom: 40px; }
.biz-heading h2 { font-size: 34px; }
.biz-heading > p { font-size: 13px; }
.biz-hero::after { background: linear-gradient(180deg, rgb(9 28 42 / 16%) 0%, rgb(9 28 42 / 65%) 45%, rgb(9 28 42 / 96%) 100%); }
.biz-consultation-grid { display: flex; margin-right: -20px; padding: 6px 20px 24px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.biz-consultation-grid::-webkit-scrollbar { display: none; }
.biz-consultation-grid > a { width: min(72vw, 360px); min-height: 270px; flex: 0 0 min(72vw, 360px); scroll-snap-align: start; }
.biz-proof-line { display: block; }
.biz-proof-line strong { display: block; margin: 0 0 7px; }
.biz-training::after { width: 70%; height: 250px; }
.biz-training-stats { grid-template-columns: 1fr 1fr; }
.biz-training-stats article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.biz-training-stats article:first-child { border-radius: 16px 0 0; }
.biz-training-stats article:last-child { border-radius: 0 0 16px; }
.biz-training-cases { display: flex; margin-right: -20px; padding-right: 20px; overflow-x: auto; }
.biz-training-cases > span { display: none; }
.biz-training-cases article { width: min(70vw, 300px); flex: 0 0 min(70vw, 300px); }
.biz-recruit-points { grid-template-columns: 1fr; gap: 30px; }
.biz-candidate-preview { min-height: 360px; }
.biz-public-cases { grid-template-columns: 1fr; }
.biz-public-cases article { min-height: 0; }
.biz-public-expansion { grid-template-columns: 1fr; }
.biz-public-expansion > a { width: fit-content; }
.biz-public .biz-section::after { display: none; }
.biz-results > div:last-child { grid-template-columns: 1fr 1fr; }
.biz-results article,
.biz-results article:nth-child(1),
.biz-results article:nth-child(2),
.biz-results article:nth-child(4),
.biz-results article:nth-child(5) { grid-column: auto; }
.biz-process .biz-section > div { grid-template-columns: 1fr; padding-left: 35px; }
.biz-process .biz-section > div::before { top: 20px; right: auto; bottom: 20px; left: 13px; border-top: 0; border-left: 2px dotted #8fb7c2; }
.biz-process article { padding: 0 0 18px 40px; }
.biz-process article > span { left: -44px; width: 42px; height: 42px; }
.biz-process h3 { margin-top: 0; }
.biz-faq > div:last-child { grid-template-columns: 1fr; }
.biz-contact-layout { grid-template-columns: 1fr; }
.biz-contact-layout > figure { position: relative; top: auto; height: 430px; order: -1; }
}
@media (max-width: 620px) {
.biz-heading h2 { font-size: 31px; }
.biz-heading > div { margin-bottom: 15px; }
.biz-consultation-grid > a { width: 82vw; flex-basis: 82vw; }
.biz-consultation-grid h3 { font-size: 19px; }
.biz-training-stats { grid-template-columns: 1fr; }
.biz-training-stats article,
.biz-training-stats article:first-child,
.biz-training-stats article:last-child { min-height: 0; border-radius: 0; }
.biz-training-stats article:first-child { border-radius: 15px 15px 0 0; }
.biz-training-stats article:last-child { border-radius: 0 0 15px 15px; }
.biz-recruit-points li { padding-left: 50px; font-size: 12px; }
.biz-candidate-preview { min-height: 0; grid-template-columns: 1fr; }
.biz-candidate-preview > img { height: 220px; }
.biz-candidate-preview > div { padding: 25px 21px 29px; }
.biz-candidate-preview dl { grid-template-columns: 1fr; }
.biz-recruit-flow { padding: 28px 18px; }
.biz-recruit-flow > small { margin-left: 70px; }
.biz-recruit-flow article { margin-left: 25px; padding-left: 56px; }
.biz-public-cases article { padding: 28px 23px 34px; }
.biz-public-cases h3 { font-size: 21px; }
.biz-public-expansion { padding: 25px 22px; }
.biz-public-expansion > a { width: 100%; }
.biz-results > div:last-child { grid-template-columns: 1fr; }
.biz-results article { min-height: 205px; }
.biz-faq summary { font-size: 12px; }
.biz-contact { background: #f7fbfc; }
.biz-contact form { padding: 22px 17px; grid-template-columns: 1fr; }
.biz-contact .is-wide { grid-column: 1; }
.biz-contact-layout > figure { height: 350px; }
}
.contact-page { color: #101f34; background: #fff; }
.contact-page main { overflow: hidden; }
.contact-page .desktop-nav a.is-current { color: var(--orange); }
.contact-page .desktop-nav a.is-current::after { opacity: 1; transform: scaleX(1); }
.contact-page .shared-footer { margin-top: 0; }
.contact-hero { position: relative; isolation: isolate; display: grid; width: min(100%, 1540px); min-height: 530px; margin: 0 auto; overflow: hidden; border-radius: 0 0 52px 52px; color: #fff; }
.contact-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(9 24 42 / 88%), rgb(9 24 42 / 56%) 52%, rgb(9 24 42 / 12%)); content: ""; }
.contact-hero figure { position: absolute; z-index: -2; inset: 0; margin: 0; }
.contact-hero figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.contact-hero > div { display: flex; width: min(calc(100% - 64px), 1180px); margin: 0 auto; padding: 110px 0 85px; flex-direction: column; justify-content: flex-end; }
.contact-hero small { color: #ff9b78; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.contact-hero h1 { margin: 14px 0 17px; font-size: clamp(48px, 6vw, 78px); line-height: 1.2; letter-spacing: -.05em; }
.contact-hero p { margin: 0; color: rgb(255 255 255 / 82%); font-size: 15px; line-height: 2; }
.contact-intro { width: min(calc(100% - 64px), 1180px); margin: 0 auto; padding: 125px 0 105px; }
.contact-intro > header { max-width: 760px; }
.contact-intro > header small,
.contact-form-heading > small { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.contact-intro > header h2,
.contact-form-heading h2 { margin: 16px 0 20px; font-size: clamp(35px, 4.5vw, 56px); line-height: 1.35; letter-spacing: -.04em; }
.contact-intro > header p { margin: 0; color: #5e6976; font-size: 14px; line-height: 2; }
.contact-intro > div { display: grid; margin-top: 60px; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.contact-intro article { position: relative; min-height: 285px; padding: 33px 29px 28px; overflow: hidden; border: 1px solid #eadfd9; border-radius: 18px 18px 54px; background: #fff; box-shadow: 0 22px 55px rgb(51 43 38 / 6%); }
.contact-intro article::after { position: absolute; right: -42px; bottom: -47px; width: 145px; height: 145px; border: 30px solid rgb(255 92 50 / 6%); border-radius: 50%; content: ""; }
.contact-intro article > span { color: #dacbc3; font-family: Georgia, serif; font-size: 13px; }
.contact-intro article > small { display: block; margin-top: 26px; color: var(--orange); font-size: 13px; font-weight: 900; letter-spacing: .02em; }   
.contact-intro h3 { margin: 11px 0 14px; font-size: 19px; line-height: 1.55; }
.contact-intro article p { margin: 0; color: #65707a; font-size: 12px; line-height: 1.85; }
.contact-intro article a { position: relative; z-index: 1; display: inline-block; margin-top: 22px; color: var(--orange); font-size: 11px; font-weight: 900; }
.contact-form-section { width: min(calc(100% - 64px), 1180px); margin: 0 auto; padding: 105px 0 130px; }
.contact-form-heading { margin-bottom: 52px; text-align: center; }
.contact-form-heading p { margin: 0; color: #717983; font-size: 12px; }
.contact-form-heading p span { margin-right: 5px; color: var(--orange); font-size: 10px; font-weight: 900; }
.contact-form-section form { display: grid; padding: 48px; grid-template-columns: 1fr 1fr; gap: 27px 22px; border: 1px solid #e8ded8; border-radius: 25px; background: linear-gradient(145deg, #fff, #fffaf7); box-shadow: 0 30px 75px rgb(59 42 32 / 7%); }
.contact-form-section form > label:not(.contact-consent) { display: grid; gap: 10px; }
.contact-form-section form > label > span,
.contact-form-section legend { color: #36434e; font-size: 12px; font-weight: 850; }
.contact-form-section label b,
.contact-form-section legend b { margin-left: 6px; color: var(--orange); font-size: 9px; }
.contact-form-section input:not([type='radio']):not([type='checkbox']),
.contact-form-section textarea { width: 100%; min-height: 54px; padding: 13px 16px; border: 1px solid #ddd7d3; border-radius: 9px; background: #fff; color: #28343e; font: inherit; font-size: 13px; }
.contact-form-section textarea { resize: vertical; }
.contact-form-section .is-wide { grid-column: 1 / -1; }
.contact-form-section fieldset { margin: 4px 0 0; padding: 0; border: 0; }
.contact-form-section fieldset > div { display: grid; margin-top: 16px; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.contact-form-section fieldset label { display: flex; min-height: 52px; padding: 12px 13px; align-items: center; border: 1px solid #e0dad6; border-radius: 9px; background: #fff; gap: 9px; cursor: pointer; }
.contact-form-section fieldset input { accent-color: var(--orange); }
.contact-form-section fieldset span { color: #505b64; font-size: 11px; font-weight: 700; line-height: 1.5; }
.contact-consent { display: flex; align-items: center; justify-content: center; gap: 10px; }
.contact-consent input { width: 18px; height: 18px; accent-color: var(--orange); }
.contact-consent span { font-size: 11px !important; }
.contact-consent a { color: var(--orange); text-decoration: underline; }
.contact-form-section form > p { margin: -3px 0 0; color: #8a8f94; font-size: 10px; text-align: center; }
.contact-form-section form > button { display: flex; width: min(100%, 430px); min-height: 62px; margin: 0 auto; padding: 0 25px; align-items: center; justify-content: space-between; border: 0; border-radius: 999px; background: var(--orange-gloss); color: #fff; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 16px 35px rgb(227 75 35 / 18%); }
@media (max-width: 820px) {
.contact-hero { min-height: 470px; border-radius: 0 0 34px 34px; }
.contact-hero::after { background: linear-gradient(180deg, rgb(9 24 42 / 15%), rgb(9 24 42 / 87%)); }
.contact-hero > div { width: calc(100% - 40px); padding: 90px 0 55px; }
.contact-hero h1 { font-size: 49px; }
.contact-intro,
.contact-form-section { width: calc(100% - 40px); padding: 85px 0; }
.contact-intro > div { display: flex; margin-right: -20px; padding: 5px 20px 25px 0; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.contact-intro > div::-webkit-scrollbar { display: none; }
.contact-intro article { width: min(78vw, 350px); min-height: 275px; flex: 0 0 min(78vw, 350px); scroll-snap-align: start; }
.contact-form-section form { padding: 28px 21px; grid-template-columns: 1fr; }
.contact-form-section .is-wide { grid-column: 1; }
.contact-form-section fieldset > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.contact-hero { min-height: 420px; }
.contact-hero h1 { font-size: 42px; }
.contact-hero p { font-size: 13px; }
.contact-intro > header h2,
.contact-form-heading h2 { font-size: 32px; }
.contact-intro article { width: 82vw; flex-basis: 82vw; }
.contact-form-section fieldset > div { grid-template-columns: 1fr; }
.contact-consent { align-items: flex-start; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: #fff;
color: var(--ink);
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
font-feature-settings: "palt";
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
.site-shell { overflow: clip; }
.desktop-only { display: block; }
.desktop-note { display: inline; }
.mobile-note, .stats-mobile-title, .mobile-bridge-cta, .mobile-footer-links { display: none; }
.site-header {
position: relative;
z-index: 20;
display: flex;
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
height: 72px;
margin: 0 auto;
align-items: center;
justify-content: space-between;
}
.brand {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--orange);
font-size: 26px;
font-weight: 800;
letter-spacing: -.03em;
}
.brand-mark {
display: grid;
width: 27px;
height: 27px;
place-items: center;
border: 3px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
font-size: 15px;
line-height: 1;
}
.desktop-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.desktop-nav a {
position: relative;
padding: 26px 0;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.desktop-nav a:not(.nav-cta)::after {
position: absolute;
right: 0;
bottom: 18px;
left: 0;
height: 2px;
background: var(--orange);
content: "";
opacity: 0;
transform: scaleX(.35);
transition: .2s ease;
}
.desktop-nav a:hover::after { opacity: 1; transform: scaleX(1); }
.desktop-nav .nav-cta {
padding: 12px 16px;
border-radius: 5px;
background: var(--orange);
color: #fff;
box-shadow: 0 8px 18px rgb(255 92 50 / 24%);
}
.mobile-menu { display: none; }
.hero {
position: relative;
display: grid;
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
min-height: 580px;
margin: 0 auto;
grid-template-columns: 46% 54%;
align-items: center;
}
.hero-copy { position: relative; z-index: 3; padding: 66px 0 42px; }
.hero-copy h1 {
margin: 44px 0 24px;
font-size: clamp(44px, 4.45vw, 68px);
font-weight: 800;
letter-spacing: .07em;
line-height: 1.32;
}
.hero-lead {
margin: 0;
color: #343a46;
font-size: 13px;
font-weight: 600;
line-height: 2;
}
.hero-actions { display: flex; gap: 30px; margin-top: 34px; }
.button {
display: inline-flex;
min-height: 58px;
align-items: center;
justify-content: space-between;
gap: 25px;
border: 1.5px solid var(--orange);
border-radius: 5px;
padding: 0 28px;
font-size: 15px;
font-weight: 800;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgb(255 92 50 / 18%); }
.button-primary { background: linear-gradient(135deg, #ff693e, #f3522b); color: #fff; }
.button-outline { background: #fff; color: var(--ink); }
.button span { color: inherit; font-size: 18px; }
.hero-points {
display: flex;
gap: 26px;
margin: 35px 0 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
.hero-points li { font-size: 12px; font-weight: 700; }
.hero-points li::before { margin-right: 8px; color: var(--orange); content: "✓"; font-weight: 900; }
.hero-art {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: min(58vw, 780px);
height: 100%;
overflow: hidden;
}
.hero-art::after {
position: absolute;
right: 0;
bottom: 0;
width: 380px;
height: 220px;
background-image: radial-gradient(rgb(255 92 50 / 18%) 1px, transparent 1px);
background-size: 8px 8px;
content: "";
mask-image: linear-gradient(to left, #000, transparent);
}
.hero-image { position: absolute; z-index: 2; object-fit: cover; box-shadow: 0 12px 32px rgb(26 30 38 / 8%); }
.hero-main {
top: 0;
left: 75px;
width: 570px;
height: 440px;
border-radius: 10px 0 0 110px;
}
.hero-top { top: 0; right: 0; width: 245px; height: 235px; border-radius: 0 0 0 12px; }
.hero-meeting { top: 236px; right: 14px; width: 260px; height: 200px; border: 6px solid #fff; border-radius: 10px; }
.hero-work { bottom: 26px; left: 170px; width: 325px; height: 170px; border: 6px solid #fff; border-radius: 10px; }
.quick-links {
width: min(100% - 64px, 1220px);
margin: 12px auto 0;
padding: 18px 42px 14px;
border: 1px solid #f1f0ef;
border-radius: 12px;
background: linear-gradient(90deg, #fbfbfa, #f8f8f7, #fbfbfa);
box-shadow: inset 0 1px 0 #fff, 0 10px 32px rgb(20 27 36 / 3%);
}
.quick-heading { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 14px; }
.quick-heading h2 { margin: 0; font-size: 20px; letter-spacing: .08em; }
.quick-heading span { color: #4e535c; font-size: 12px; }
.quick-heading span::before, .quick-heading span::after { margin: 0 14px; color: var(--orange); content: "—"; }
.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.quick-grid a {
display: flex;
min-height: 102px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border: 1px solid #f1f0ef;
border-radius: 7px;
background: #fff;
box-shadow: 0 8px 20px rgb(20 27 36 / 3%);
transition: .2s ease;
}
.quick-grid a:hover { border-color: rgb(255 92 50 / 40%); transform: translateY(-3px); }
.quick-grid strong { font-size: 12px; }
.line-icon { display: grid; width: 36px; height: 36px; place-items: center; color: var(--orange); font-size: 27px; line-height: 1; }
.section-space { position: relative; width: min(100% - 64px, 1220px); margin: 0 auto; padding: 76px 0; }
.section-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 34px; }
.section-title span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.section-title h2 { margin: 0; font-size: 25px; letter-spacing: .06em; }
.services-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr .95fr; gap: 28px; align-items: stretch; }
.service-image { width: 100%; height: 340px; border-radius: 8px; object-fit: cover; }
.school-image { object-position: center; }
.recruit-image { object-position: 48% center; }
.service-panel { display: flex; min-width: 0; flex-direction: column; padding: 26px 5px 0; }
.service-panel + .service-panel { border-left: 1px solid var(--line); padding-left: 30px; }
.mini-label { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.service-panel h3 { margin: 9px 0 15px; font-size: 23px; letter-spacing: .04em; }
.service-panel > p { margin: 0; color: #4e535d; font-size: 11px; font-weight: 600; line-height: 1.9; }
.service-panel ul, .detail-card ul { display: grid; gap: 11px; margin: 24px 0 18px; padding: 16px 18px; border-radius: 7px; background: #fbfaf9; list-style: none; }
.service-panel li, .detail-card li { color: #333a45; font-size: 10px; font-weight: 700; }
.service-panel li::before, .detail-card li::before { margin-right: 8px; color: var(--orange); content: "✓"; font-weight: 900; }
.service-panel > a, .detail-card a { margin-top: auto; border-bottom: 1px solid var(--line); padding-bottom: 8px; font-size: 11px; font-weight: 800; }
.service-panel > a span, .detail-card a span { float: right; color: var(--orange); }
.stats-band { position: relative; padding: 25px max(32px, calc((100vw - 1220px) / 2)); background: linear-gradient(90deg, #fbf8f7, #fff, #fbf8f7); }
.stats-grid { display: grid; max-width: 1220px; margin: 0 auto; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats-grid article {
display: flex;
min-height: 118px;
align-items: center;
gap: 17px;
border: 1px solid #f0eeec;
border-radius: 7px;
padding: 20px 22px;
background: rgb(255 255 255 / 85%);
box-shadow: 0 10px 28px rgb(20 27 36 / 3%);
}
.stat-icon { color: var(--orange); font-size: 26px; }
.stats-grid small { color: #333a45; font-size: 9px; font-weight: 800; }
.stats-grid p { margin: 1px 0 2px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.stats-grid strong { margin-right: 5px; font-size: 32px; line-height: 1; }
.stats-grid article div > span { color: #6b7078; font-size: 9px; }
.news { padding-top: 53px; padding-bottom: 50px; }
.news-heading, .news-heading > div { display: flex; align-items: center; }
.news-heading { justify-content: space-between; }
.news-heading > div { gap: 25px; }
.news-heading h2 { margin: 0; font-size: 21px; }
.news-heading > div span { color: var(--orange); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.news-heading > a { font-size: 10px; font-weight: 800; }
.news-heading > a span { margin-left: 12px; color: var(--orange); }
.news-list { margin-top: 17px; border-top: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: 110px 95px 1fr; gap: 15px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.news-row time, .news-row span { color: #474d57; font-size: 10px; font-weight: 600; }
.news-row p { margin: 0; font-size: 11px; }
.detail-services { padding-top: 56px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid #eee; border-radius: 10px; overflow: hidden; }
.detail-card { display: grid; min-width: 0; grid-template-columns: 37% 63%; background: #fff; }
.detail-card + .detail-card { border-left: 1px solid var(--line); }
.detail-card > img { width: 100%; height: 100%; min-height: 285px; object-fit: cover; }
.detail-card > div { display: flex; flex-direction: column; padding: 25px 19px 20px; }
.detail-card h3 { margin: 7px 0 11px; font-size: 16px; line-height: 1.4; }
.detail-card h3 span:last-child br { display: none; }
.detail-card div > p { margin: 0; color: #555b64; font-size: 9px; line-height: 1.8; }
.detail-card ul { gap: 7px; margin: 14px 0; padding: 0; background: none; }
.detail-card li { font-size: 9px; }
.detail-card a { font-size: 10px; }
.flow { padding-top: 26px; padding-bottom: 67px; }
.flow .section-title { margin-bottom: 22px; }
.flow-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-radius: 9px; padding: 22px 20px; }
.flow-grid article { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 4px 18px; }
.flow-icon { color: var(--orange); font-size: 26px; line-height: 1; }
.flow-grid h3 { margin: 0 0 8px; font-size: 12px; }
.flow-grid p { margin: 0; color: #5c626c; font-size: 9px; line-height: 1.6; }
.flow-grid p span:last-child br { display: none; }
.flow-arrow { position: absolute; top: 22px; right: -5px; color: #ddc8bf; font-size: 35px; font-weight: 300; }
.voices { width: 100%; max-width: none; padding: 48px max(32px, calc((100vw - 1280px) / 2)) 65px; background: linear-gradient(90deg, #fafafa, #fff, #fafafa); }
.voices .section-title { margin-bottom: 30px; }
.voice-grid { display: grid; max-width: 1280px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.voice-card { position: relative; display: grid; min-height: 178px; grid-template-columns: 96px 1fr; gap: 15px; align-items: center; border: 1px solid #e8e8e7; border-radius: 8px; padding: 20px; background: #fff; box-shadow: 0 8px 28px rgb(20 27 36 / 3%); }
.voice-card img { width: 82px; height: 112px; border-radius: 4px; object-fit: cover; object-position: center; }
.quote { position: absolute; top: 13px; left: 13px; color: var(--orange); font-family: Georgia, serif; font-size: 45px; line-height: 1; }
.voice-card h3 { margin: 0 0 11px; font-size: 13px; }
.voice-card p { margin: 0 0 12px; color: #4e535d; font-size: 10px; line-height: 1.75; }
.voice-card small { font-size: 9px; font-weight: 700; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 27px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #bfc0c1; }
.dots i:first-child { background: var(--orange); }
.reasons { padding-top: 60px; padding-bottom: 78px; }
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid #f0efee; border-radius: 9px; padding: 28px 25px; background: #fdfdfd; }
.reason-grid article { min-width: 0; padding: 0 24px; }
.reason-grid article + article { border-left: 1px solid var(--line); }
.reason-title { display: flex; align-items: center; gap: 8px; }
.reason-title span { color: var(--orange); font-size: 22px; }
.reason-title h3 { margin: 0; font-size: 14px; }
.reason-grid article > p { min-height: 72px; margin: 14px 0 17px; color: #555b64; font-size: 10px; line-height: 1.8; }
.reason-grid img { width: 100%; height: 105px; border-radius: 4px; object-fit: cover; }
.faq-section { padding-top: 58px; padding-bottom: 68px; }
.faq-section .section-title { margin-bottom: 10px; }
.faq-lead { margin: 0 0 28px; color: #555b64; font-size: 12px; text-align: center; }
.faq-list { display: grid; max-width: 980px; margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 9px 24px rgb(20 27 36 / 4%); }
.faq-list summary { display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--orange); font-size: 27px; font-weight: 400; }
.faq-list details p { margin: 0; border-top: 1px solid var(--line); padding: 16px 22px 20px; color: #565c65; font-size: 11px; line-height: 1.8; }
.faq-more { display: block; width: max-content; margin: 25px auto 0; color: var(--orange); font-size: 11px; font-weight: 800; }
.faq-more span { margin-left: 14px; font-size: 20px; }
.bottom-cta { position: relative; display: grid; min-height: 160px; grid-template-columns: 1fr minmax(600px, 900px) 1fr; align-items: center; background: linear-gradient(90deg, #fff8f4 0, #fff 45%, #f9f3ef 100%); overflow: hidden; }
.bottom-cta::before { position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent 49.8%, rgb(255 92 50 / 6%) 50%); background-size: 36px 100%; content: ""; }
.cta-content { position: relative; z-index: 2; grid-column: 2; text-align: center; }
.cta-content h2 { margin: 0 0 22px; font-size: 23px; letter-spacing: .06em; }
.cta-content > p { display: none; }
.cta-content > div { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; }
.cta-content .button { min-height: 54px; }
.cta-content small { font-size: 10px; }
.bottom-cta > picture { position: absolute; z-index: 1; right: 0; width: 23%; height: 100%; }
.bottom-cta > picture img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.site-footer { width: min(100% - 64px, 1220px); margin: 0 auto; padding: 50px 0 30px; }
.footer-top { display: grid; grid-template-columns: 220px 1fr; gap: 80px; }
.footer-brand .brand { font-size: 25px; }
.footer-brand p { margin: 18px 0 0; color: #515762; font-size: 10px; line-height: 1.8; }
.footer-links { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; }
.footer-links h3 { min-height: 18px; margin: 0 0 13px; font-size: 10px; }
.footer-links a { display: block; margin: 9px 0; color: #505661; font-size: 9px; }
.footer-bottom { display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; margin-top: 42px; color: #6a6f77; font-size: 9px; }
.footer-bottom > div { display: flex; gap: 28px; }
.footer-bottom .socials { gap: 13px; color: var(--ink); font-size: 16px; }
@media (max-width: 1120px) {
.desktop-nav { gap: 14px; }
.desktop-nav a { font-size: 10px; }
.hero { grid-template-columns: 48% 52%; }
.hero-art { right: 0; width: 62vw; transform: scale(.9); transform-origin: right top; }
.hero-copy h1 { font-size: 48px; }
.hero-points { gap: 13px; }
.services-grid { grid-template-columns: 1fr 1fr; }
.service-image { height: 360px; }
.school-image { grid-column: 1; grid-row: 1; }
.services-grid #school { grid-column: 2; grid-row: 1; }
.services-grid #recruit { grid-column: 1; grid-row: 2; }
.recruit-image { grid-column: 2; grid-row: 2; }
.service-panel + .service-panel { border: 0; padding-left: 5px; }
.detail-card { grid-template-columns: 1fr; }
.detail-card > img { height: 170px; min-height: 0; }
.detail-card > div { min-height: 310px; }
.footer-top { gap: 40px; }
.footer-links { grid-template-columns: repeat(3, 1fr); row-gap: 25px; }
}
@media (max-width: 820px) {
.desktop-nav { display: none; }
.mobile-menu { position: relative; display: block; }
.mobile-menu summary { border: 1px solid var(--orange); border-radius: 5px; padding: 8px 12px; color: var(--orange); font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; top: 44px; right: 0; display: grid; width: 220px; border: 1px solid #eee; border-radius: 8px; padding: 10px; background: #fff; box-shadow: var(--shadow); }
.mobile-menu nav a { padding: 12px 10px; border-bottom: 1px solid #eee; font-size: 12px; font-weight: 700; }
.hero { width: min(100% - 32px, 680px); min-height: 900px; grid-template-columns: 1fr; align-items: start; }
.hero-copy { padding-top: 55px; text-align: center; }
.hero-copy h1 { margin-top: 40px; font-size: clamp(39px, 10vw, 56px); line-height: 1.28; }
.hero-lead { max-width: 560px; margin: 0 auto; }
.hero-actions { justify-content: center; }
.hero-points { justify-content: center; white-space: normal; }
.hero-art { top: 520px; right: 50%; width: 720px; height: 390px; transform: translateX(50%) scale(.68); transform-origin: center top; }
.quick-links { width: calc(100% - 32px); margin-top: 14px; padding: 18px; }
.quick-grid { grid-template-columns: repeat(3, 1fr); }
.section-space { width: calc(100% - 32px); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.detail-grid { grid-template-columns: 1fr; border: 0; gap: 18px; }
.detail-card { grid-template-columns: 35% 65%; border: 1px solid var(--line) !important; border-radius: 8px; overflow: hidden; }
.detail-card > img { height: 100%; min-height: 300px; }
.detail-card > div { min-height: 300px; }
.flow-grid { grid-template-columns: 1fr; gap: 0; }
.flow-grid article { align-items: center; padding: 14px 18px; }
.flow-arrow { top: auto; right: 50%; bottom: -14px; transform: rotate(90deg); }
.voice-grid { grid-template-columns: 1fr; }
.voice-card { min-height: 165px; }
.reason-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
.reason-grid article:nth-child(3) { border-left: 0; }
.bottom-cta { min-height: 300px; grid-template-columns: 1fr; padding: 45px 24px; }
.cta-content { grid-column: 1; width: min(100%, 600px); margin: 0 auto; }
.bottom-cta > picture { opacity: .17; width: 60%; }
.site-footer { width: calc(100% - 32px); }
.footer-top { grid-template-columns: 1fr; }
.footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 560px) {
.site-header { width: calc(100% - 28px); height: 62px; }
.brand { font-size: 22px; }
.brand-mark { width: 23px; height: 23px; font-size: 12px; }
.desktop-only { display: none; }
.hero { min-height: 800px; }
.hero-copy { padding-top: 45px; }
.hero-copy h1 { margin-top: 42px; font-size: 40px; letter-spacing: .05em; }
.hero-lead { font-size: 11px; line-height: 1.9; }
.hero-actions { gap: 10px; margin-top: 28px; }
.button { min-height: 52px; gap: 12px; padding: 0 16px; font-size: 12px; }
.hero-points { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 22px; }
.hero-art { top: 545px; transform: translateX(50%) scale(.54); }
.quick-heading { display: block; text-align: center; }
.quick-heading span { display: block; margin-top: 7px; }
.quick-grid { grid-template-columns: repeat(2, 1fr); }
.quick-grid a { min-height: 88px; }
.section-space { padding: 60px 0; }
.section-title { display: block; text-align: center; }
.section-title span { display: block; margin-bottom: 5px; }
.section-title h2 { font-size: 22px; }
.services-grid { grid-template-columns: 1fr; gap: 0; }
.service-image, .school-image, .recruit-image, .services-grid #school, .services-grid #recruit { grid-column: 1; grid-row: auto; }
.service-image { height: 330px; }
.service-panel { padding: 28px 4px 45px; }
.service-panel h3 { font-size: 22px; }
.stats-band { padding: 25px 16px; }
.stats-grid { grid-template-columns: 1fr; }
.stats-grid article { min-height: 104px; }
.news-row { grid-template-columns: 83px 64px 1fr; gap: 7px; }
.news-row p { font-size: 10px; line-height: 1.55; }
.detail-card { grid-template-columns: 1fr; }
.detail-card > img { height: 230px; min-height: 0; }
.detail-card > div { min-height: 315px; }
.flow { padding-top: 10px; }
.voices { padding: 55px 16px; }
.voice-card { grid-template-columns: 85px 1fr; padding: 17px; }
.voice-card img { width: 72px; height: 105px; }
.reason-grid { grid-template-columns: 1fr; gap: 0; padding: 10px 25px; }
.reason-grid article { border-left: 0 !important; border-bottom: 1px solid var(--line); padding: 28px 5px; }
.reason-grid article:last-child { border-bottom: 0; }
.reason-grid article > p { min-height: 0; }
.reason-grid img { height: 160px; }
.bottom-cta { min-height: 360px; }
.cta-content h2 { font-size: 20px; line-height: 1.65; }
.cta-content > div { grid-template-columns: 1fr; gap: 12px; }
.site-footer { padding-top: 40px; }
.footer-links { grid-template-columns: repeat(2, 1fr); }
.footer-bottom > div { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
@media (max-width: 640px) {
.desktop-note { display: none; }
.mobile-note { display: inline; }
.site-header {
position: relative;
z-index: 50;
width: 100%;
height: 70px;
padding: 0 18px;
background: linear-gradient(90deg, rgb(255 255 255 / 95%), rgb(255 255 255 / 38%));
}
.site-header .brand { font-size: 25px; }
.site-header .brand-mark { width: 27px; height: 27px; font-size: 14px; }
.mobile-menu summary {
position: relative;
width: 48px;
height: 55px;
border: 0;
padding: 38px 0 0;
color: var(--ink);
font-size: 9px;
font-weight: 600;
text-align: center;
}
.mobile-menu summary::before {
position: absolute;
top: 1px;
left: 8px;
color: var(--orange);
content: "☰";
font-size: 36px;
font-weight: 300;
line-height: 1;
}
.mobile-menu nav { top: 56px; right: 0; width: min(260px, calc(100vw - 28px)); }
.hero {
width: 100%;
min-height: 835px;
margin-top: -70px;
padding-top: 70px;
overflow: hidden;
}
.hero-art {
top: 0;
right: 0;
width: 100%;
height: 610px;
transform: none;
overflow: visible;
}
.hero-art::before {
position: absolute;
z-index: 3;
inset: 0;
background: linear-gradient(90deg, rgb(255 255 255 / 96%) 0, rgb(255 255 255 / 48%) 43%, transparent 68%), linear-gradient(0deg, #fff 0, transparent 29%);
content: "";
pointer-events: none;
}
.hero-art::after { z-index: 3; width: 210px; height: 170px; opacity: .35; }
.hero-image { box-shadow: 0 7px 20px rgb(26 30 38 / 8%); }
.hero-main {
top: 0;
left: 0;
width: 72%;
height: 520px;
border-radius: 0;
object-position: 53% center;
}
.hero-top { top: 70px; right: 0; width: 27%; height: 255px; border-radius: 0 0 0 6px; object-position: 44% center; }
.hero-meeting { top: 325px; right: -2px; width: 36%; height: 242px; border: 3px solid #fff; border-radius: 6px 0 0 6px; object-position: 72% center; }
.hero-work { bottom: 34px; left: 41%; width: 25%; height: 132px; border: 3px solid #fff; border-radius: 6px; object-position: center; }
.hero-copy {
position: absolute;
z-index: 5;
top: 250px;
left: 22px;
width: 61%;
padding: 0;
text-align: left;
}
.hero-copy h1 {
margin: 0 0 17px;
font-size: clamp(29px, 7.7vw, 37px);
letter-spacing: .08em;
line-height: 1.58;
}
.hero-lead {
max-width: none;
margin: 0;
color: var(--ink);
font-size: 10px;
font-weight: 700;
line-height: 1.8;
}
.hero-actions {
position: absolute;
top: 353px;
left: 0;
display: grid;
width: calc(100vw - 44px);
grid-template-columns: 1fr 1fr;
gap: 9px;
margin: 0;
}
.hero-actions .button { min-height: 56px; padding: 0 15px; font-size: 11px; }
.hero-points {
position: absolute;
top: 425px;
left: 0;
display: grid;
width: calc(100vw - 44px);
min-height: 92px;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: 0;
border-radius: 8px;
padding: 14px 3px;
background: rgb(255 255 255 / 92%);
box-shadow: 0 12px 35px rgb(20 27 36 / 6%);
}
.hero-points li {
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--line);
padding: 30px 7px 0;
font-size: 8.5px;
line-height: 1.5;
text-align: center;
white-space: normal;
}
.hero-points li:last-child { border-right: 0; }
.hero-points li::before { position: absolute; align-self: flex-start; margin: -28px 0 0; font-size: 23px; }
.quick-links {
width: calc(100% - 24px);
margin-top: 0;
border-radius: 13px;
padding: 14px 15px 18px;
}
.quick-heading h2 { font-size: 18px; }
.quick-heading h2::before { margin-right: 8px; content: "🔰"; font-size: 17px; }
.quick-heading span { display: none; }
.quick-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.quick-grid a { min-height: 78px; flex-direction: row; gap: 5px; padding: 8px; }
.quick-grid a:nth-child(3), .quick-grid a:nth-child(4), .quick-grid a:nth-child(5) { display: none; }
.quick-grid strong { font-size: 9px; white-space: nowrap; }
.line-icon { width: 25px; height: 25px; font-size: 23px; }
.section-space { width: calc(100% - 24px); }
.services { padding: 48px 0 38px; }
.services .section-title { margin-bottom: 14px; }
.services-grid { grid-template-columns: 34% 66%; gap: 8px 0; }
.school-image { grid-column: 1; grid-row: 1; border-radius: 7px 0 0 7px; }
.services-grid #school { grid-column: 2; grid-row: 1; }
.services-grid #recruit { grid-column: 2; grid-row: 2; }
.recruit-image { grid-column: 1; grid-row: 2; border-radius: 7px 0 0 7px; }
.service-image { width: 100%; height: 232px; object-position: center; }
.service-panel, .service-panel + .service-panel {
min-height: 232px;
border: 1px solid var(--line);
border-left: 0;
border-radius: 0 7px 7px 0;
padding: 15px 13px 12px;
background: #fff;
}
.service-panel h3 { margin: 5px 0 7px; font-size: 17px; }
.service-panel > p { font-size: 8.5px; line-height: 1.65; }
.service-panel ul { grid-template-columns: repeat(2, 1fr); gap: 6px 8px; margin: 11px 0 0; padding: 0; background: none; }
.service-panel li { font-size: 7.5px; line-height: 1.35; }
.service-panel li::before { margin-right: 3px; }
.service-panel > a { display: none; }
.stats-band { padding: 60px 18px 36px; background: #fff; }
.stats-mobile-title { display: block; margin-bottom: 22px; text-align: center; }
.stats-mobile-title span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.stats-mobile-title h2 { margin: 5px 0 0; font-size: 24px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stats-grid article { min-height: 185px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 17px 14px; }
.stat-icon { font-size: 30px; }
.stats-grid small { font-size: 9px; }
.stats-grid p { margin: 2px 0 11px; }
.stats-grid strong { font-size: 35px; }
.stats-grid article div { width: 100%; }
.stats-grid article div > span { display: block; border-top: 1px solid var(--line); padding-top: 12px; font-size: 8px; line-height: 1.55; text-align: center; }
.news {
width: calc(100% - 24px);
border-radius: 10px;
padding: 30px 16px;
background: #fbfaf9;
}
.news-heading h2 { font-size: 20px; }
.news-heading > a { font-size: 9px; }
.news-list { border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; background: #fff; }
.news-row { grid-template-columns: 66px 57px 1fr; gap: 6px; padding: 11px 0; }
.news-row time, .news-row span { font-size: 8px; }
.news-row span { border-radius: 4px; padding: 3px 2px; background: #f3f2f1; text-align: center; }
.news-row p { font-size: 8px; }
.detail-services { padding: 48px 0 54px; }
.detail-services .section-title { margin-bottom: 20px; }
.detail-services .section-title span { font-size: 9px; }
.detail-services .section-title h2 { font-size: 21px; }
.detail-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.detail-card { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line) !important; border-radius: 7px; }
.detail-card > img { width: 100%; height: 130px; min-height: 0; object-position: center; }
.detail-card > div { min-height: 250px; padding: 12px 10px 10px; }
.detail-card .mini-label { font-size: 7px; }
.detail-card h3 { min-height: 48px; margin: 6px 0; font-size: 11px; line-height: 1.5; }
.detail-card div > p { font-size: 7.5px; line-height: 1.7; }
.detail-card ul { display: none; }
.detail-card a { margin-top: auto; border: 1px solid var(--orange); border-radius: 3px; padding: 8px 5px; color: var(--orange); font-size: 8px; text-align: center; }
.detail-card a span { margin-left: 5px; }
.flow { width: calc(100% - 20px); padding: 64px 0 44px; }
.flow-grid { grid-template-columns: repeat(5, 1fr); border: 0; padding: 0; counter-reset: flow-step; }
.flow-grid article { flex-direction: column; align-items: center; gap: 7px; padding: 0 5px; text-align: center; counter-increment: flow-step; }
.flow-grid article::before { color: var(--orange); content: "0" counter(flow-step); font-size: 10px; font-weight: 900; }
.flow-icon { font-size: 27px; }
.flow-grid h3 { min-height: 29px; margin: 0; font-size: 9px; line-height: 1.5; }
.flow-grid p { font-size: 7px; line-height: 1.65; }
.flow-arrow { top: 53px; right: -5px; bottom: auto; color: #aaa; font-size: 24px; transform: none; }
.voices { padding: 52px 14px 48px; background: #fff; }
.voice-grid { gap: 7px; }
.voice-card { min-height: 136px; grid-template-columns: 34% 66%; gap: 0; padding: 7px; }
.voice-card img { width: 100%; height: 120px; border-radius: 4px; object-position: center 30%; }
.voice-card > div { padding: 8px 18px 7px 13px; }
.quote { top: 16px; left: 37%; font-size: 29px; }
.voice-card h3 { margin-bottom: 8px; padding-left: 17px; font-size: 10px; line-height: 1.45; }
.voice-card p { margin-bottom: 8px; font-size: 8px; line-height: 1.65; }
.voice-card small { font-size: 7.5px; }
.voice-card::after { position: absolute; top: 50%; right: 12px; content: "›"; font-size: 25px; transform: translateY(-50%); }
.dots { display: none; }
.reasons { width: calc(100% - 20px); padding: 53px 0 44px; }
.reason-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; border: 0; padding: 0; }
.reason-grid article, .reason-grid article + article {
display: flex;
min-width: 0;
flex-direction: column;
border: 1px solid var(--line) !important;
border-radius: 6px;
padding: 9px 6px;
background: #fff;
}
.reason-title { order: 1; justify-content: center; min-height: 27px; text-align: center; }
.reason-title span { display: none; }
.reason-title h3 { font-size: 8px; line-height: 1.45; }
.reason-grid img { order: 2; height: 72px; margin-top: 6px; }
.reason-grid article > p { order: 3; min-height: 88px; margin: 8px 0 4px; font-size: 6.8px; line-height: 1.7; text-align: center; }
.reason-grid article::after { order: 4; width: 17px; height: 17px; margin: auto auto 0; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); content: "✓"; font-size: 10px; line-height: 15px; text-align: center; }
.mobile-bridge-cta {
position: relative;
display: block;
width: calc(100% - 24px);
margin: 0 auto 16px;
padding: 59px 12px 20px;
text-align: center;
}
.mobile-bridge-cta strong { font-size: 11px; letter-spacing: .04em; }
.mobile-bridge-cta > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mobile-bridge-cta a { display: flex; min-height: 45px; align-items: center; justify-content: space-between; border: 1px solid var(--orange); border-radius: 4px; padding: 0 12px; font-size: 8.5px; font-weight: 800; }
.mobile-bridge-cta a:first-child { background: var(--orange); color: #fff; }
.faq-section {
width: 100%;
border-radius: 20px;
padding: 50px 24px 32px;
background: linear-gradient(135deg, #fbfaf9, #fff);
}
.faq-section .section-title { margin-bottom: 10px; }
.faq-section .section-title span { display: inline; margin-right: 9px; }
.faq-section .section-title h2 { display: inline; font-size: 22px; }
.faq-lead { margin-bottom: 23px; font-size: 10px; }
.faq-list { grid-template-columns: 1fr; gap: 3px; }
.faq-list summary { min-height: 58px; padding: 0 18px; font-size: 10px; }
.faq-list details p { padding: 13px 18px 16px; font-size: 9px; }
.faq-more { margin-top: 19px; font-size: 10px; }
.bottom-cta {
min-height: 530px;
margin-top: 12px;
border-radius: 20px;
padding: 0;
background: #fff;
}
.bottom-cta::before {
z-index: 2;
background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 94%) 45%, rgb(255 255 255 / 15%) 77%, transparent 100%);
}
.bottom-cta > picture { z-index: 1; width: 63%; height: 100%; opacity: 1; }
.bottom-cta > picture img { object-position: center; }
.cta-content {
position: absolute;
z-index: 3;
inset: 0;
width: 100%;
padding: 171px 25px 22px;
text-align: left;
}
.cta-content h2 { width: 62%; margin: 0 0 12px; font-size: 21px; letter-spacing: .06em; line-height: 1.65; }
.cta-content > p { display: block; width: 58%; margin: 0; font-size: 9px; font-weight: 700; line-height: 1.75; }
.cta-content > div { position: absolute; right: 25px; bottom: 22px; left: 25px; grid-template-columns: 1fr 1.05fr; gap: 12px; }
.cta-content .button { min-height: 48px; padding: 0 13px; font-size: 10px; }
.cta-content small { display: none; }
.site-footer { width: calc(100% - 32px); padding: 43px 0 20px; }
.footer-top { gap: 31px; }
.footer-brand { display: grid; grid-template-columns: 108px 1fr; gap: 15px; align-items: center; }
.footer-brand .brand { font-size: 26px; }
.footer-brand .brand-mark { width: 31px; height: 31px; }
.footer-brand p { margin: 0; font-size: 9px; line-height: 1.75; }
.desktop-footer-links { display: none; }
.mobile-footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mobile-footer-links h3 { min-height: 25px; margin: 0 0 13px; font-size: 9px; }
.mobile-footer-links a { display: block; margin: 12px 0; color: #3f4550; font-size: 7.5px; line-height: 1.55; }
.footer-bottom { display: flex; flex-direction: column; gap: 17px; margin-top: 30px; font-size: 8px; }
.footer-bottom > div:first-of-type { display: none; }
.footer-bottom .socials { order: -1; gap: 22px; font-size: 23px; }
}
:root {
--paper: #fffaf5;
--paper-deep: #fff2e8;
--orange-soft: #ffe4d5;
--orange-line: #ff926c;
}
body { background: var(--paper); }
.site-shell { background: linear-gradient(180deg, #fff 0, var(--paper) 38%, #fff 67%, var(--paper) 100%); }
.site-header {
border-bottom: 2px solid rgb(255 92 50 / 18%);
background: rgb(255 255 255 / 94%);
box-shadow: 0 8px 24px rgb(70 32 12 / 4%);
}
.site-header::after {
position: absolute;
right: 0;
bottom: -2px;
width: 105px;
height: 2px;
background: var(--orange);
content: "";
}
.hero-copy h1::after {
display: block;
width: 82px;
height: 7px;
margin-top: 16px;
border-radius: 99px;
background: linear-gradient(90deg, var(--orange), #ffb093);
content: "";
transform: rotate(-2deg);
}
.section-title { position: relative; }
.section-title::after {
position: absolute;
bottom: -14px;
left: 50%;
width: 64px;
height: 3px;
border-radius: 99px;
background: var(--orange);
content: "";
transform: translateX(-50%) rotate(-2deg);
}
.section-title > span {
border-radius: 99px;
padding: 4px 9px;
background: var(--orange-soft);
color: var(--orange-deep);
}
.hero::before {
position: absolute;
z-index: 0;
top: 32px;
left: -125px;
width: 270px;
height: 270px;
border: 42px solid rgb(255 92 50 / 6%);
border-radius: 50%;
content: "";
}
.button-primary { box-shadow: 0 12px 28px rgb(240 77 36 / 25%); }
.button-outline { background: #fffaf7; }
.quick-links {
position: relative;
border-color: rgb(255 92 50 / 22%);
background: linear-gradient(110deg, #fff1e8, #fffaf5 48%, #fff3eb);
}
.quick-links::before {
position: absolute;
top: 0;
left: 42px;
width: 150px;
height: 4px;
border-radius: 0 0 5px 5px;
background: var(--orange);
content: "";
}
.quick-grid a { border-color: rgb(255 92 50 / 16%); box-shadow: 0 9px 24px rgb(151 65 22 / 6%); }
.services { isolation: isolate; }
.services::before {
position: absolute;
z-index: -1;
top: 95px;
right: 2%;
bottom: 42px;
left: 2%;
border: 1px solid rgb(255 92 50 / 15%);
border-radius: 20px;
background: linear-gradient(120deg, rgb(255 244 237 / 85%), rgb(255 255 255 / 60%));
content: "";
}
.service-image { outline: 4px solid #fff; box-shadow: 12px 14px 0 var(--orange-soft); }
.service-panel { border-top: 3px solid var(--orange); }
.stats-band {
border-top: 5px solid #ff9a76;
border-bottom: 5px solid #ef4c26;
background: linear-gradient(135deg, #ff7348, #f1512b 72%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%);
}
.stats-grid article {
position: relative;
overflow: hidden;
border-color: rgb(255 255 255 / 38%);
box-shadow: 0 14px 32px rgb(96 28 0 / 14%);
}
.stats-grid article::before {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
border-radius: 0 0 0 34px;
background: var(--orange-soft);
content: "";
}
.stats-mobile-title { color: #fff; }
.stats-mobile-title span { color: #fff !important; }
.news {
border: 1px solid rgb(255 92 50 / 18%);
border-left: 7px solid var(--orange);
border-radius: 12px;
padding-right: 28px;
padding-left: 28px;
background: linear-gradient(100deg, #fff0e5, #fffaf6 45%, #fff);
}
.news-list { background: rgb(255 255 255 / 75%); }
.detail-services {
isolation: isolate;
border-top: 4px solid var(--orange);
border-bottom: 1px solid var(--orange-line);
border-radius: 18px;
padding-right: 28px;
padding-left: 28px;
background: linear-gradient(135deg, #fff1e7, #fffaf5 60%, #ffe8dc);
}
.detail-card { border-color: rgb(255 92 50 / 19%); box-shadow: 0 14px 32px rgb(109 46 16 / 7%); }
.detail-card a { border-color: var(--orange-line); }
.flow {
border-top: 4px solid var(--orange);
border-bottom: 1px solid var(--orange-line);
border-radius: 18px;
padding-right: 28px;
padding-left: 28px;
background: linear-gradient(110deg, #fff5ed, #fff 55%, #fff0e5);
}
.flow-grid { border-color: rgb(255 92 50 / 22%); background: rgb(255 255 255 / 70%); }
.flow-icon { filter: drop-shadow(0 5px 10px rgb(255 92 50 / 16%)); }
.voices {
border-top: 1px solid rgb(255 92 50 / 18%);
border-bottom: 1px solid rgb(255 92 50 / 18%);
background: linear-gradient(115deg, #fff0e6 0, #fffaf6 20%, #fff 62%, #fff1e8 100%);
}
.voice-card { border-top: 4px solid var(--orange); box-shadow: 0 13px 30px rgb(110 42 10 / 8%); }
.quote { text-shadow: 3px 3px 0 var(--orange-soft); }
.reasons {
border-radius: 18px;
padding-right: 25px;
padding-left: 25px;
background-color: #fff8f2;
background-image: radial-gradient(rgb(255 92 50 / 14%) 1px, transparent 1px);
background-size: 12px 12px;
}
.reason-grid { border-color: rgb(255 92 50 / 20%); background: rgb(255 255 255 / 88%); }
.reason-grid article { border-top: 3px solid var(--orange); background: #fff; }
.mobile-bridge-cta {
border-radius: 14px;
background: linear-gradient(135deg, #ff7345, #ec4923);
box-shadow: 0 18px 38px rgb(164 49 6 / 20%);
color: #fff;
}
.mobile-bridge-cta a { border-color: #fff; }
.mobile-bridge-cta a:first-child { background: #fff; color: var(--orange-deep); }
.faq-section {
isolation: isolate;
border: 1px solid rgb(255 92 50 / 22%);
border-top: 0;
background: linear-gradient(180deg, #ff6c42 0 176px, #fff1e7 176px 100%);
box-shadow: 0 20px 45px rgb(109 41 9 / 9%);
}
.faq-section .section-title h2, .faq-section .section-title > span, .faq-lead { color: #fff; }
.faq-section .section-title > span { border: 1px solid rgb(255 255 255 / 55%); background: rgb(255 255 255 / 15%); }
.faq-section .section-title::after { background: #fff; }
.faq-lead { opacity: .93; }
.faq-list details { border-color: rgb(255 92 50 / 15%); box-shadow: 0 10px 26px rgb(122 51 17 / 7%); }
.bottom-cta {
border-top: 6px solid var(--orange);
box-shadow: inset 0 0 70px rgb(255 92 50 / 8%);
}
.bottom-cta::after {
position: absolute;
z-index: 0;
bottom: -70px;
left: -60px;
width: 230px;
height: 160px;
border-radius: 50%;
background: var(--orange-soft);
content: "";
}
.site-footer { position: relative; z-index: 0; }
.site-footer::before {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
border-top: 5px solid var(--orange);
background: linear-gradient(110deg, #fff0e5, #fff8f2 55%, #ffe8da);
content: "";
transform: translateX(-50%);
}
@media (max-width: 640px) {
.site-header { border-bottom-color: rgb(255 92 50 / 28%); }
.hero { background: linear-gradient(180deg, #fff8f2, #fff 78%); }
.hero::before { top: 88px; left: -100px; width: 210px; height: 210px; border-width: 30px; }
.hero-copy h1::after { width: 52px; height: 5px; margin-top: 9px; }
.quick-links { border-top: 4px solid var(--orange); }
.quick-links::before { display: none; }
.services { width: calc(100% - 16px); border-radius: 18px; padding-right: 8px; padding-left: 8px; background: #fff1e8; }
.services::before { inset: 85px 0 18px; border-radius: 16px; background: #fff8f3; }
.service-image { outline-width: 2px; box-shadow: 6px 7px 0 var(--orange-soft); }
.stats-band { padding-top: 63px; border-width: 4px; }
.stats-grid article { background: #fff; }
.news { width: calc(100% - 16px); padding-right: 14px; padding-left: 14px; }
.detail-services {
width: calc(100% - 12px);
padding: 66px 8px 50px;
border-radius: 16px;
}
.detail-card { background: #fff; }
.flow { width: calc(100% - 12px); padding: 72px 10px 44px; border-radius: 16px; }
.flow-grid { border: 0; background: transparent; }
.voices { background: linear-gradient(135deg, #fff0e5, #fff 48%, #fff4ed); }
.reasons { width: calc(100% - 12px); padding: 62px 6px 44px; border-radius: 16px; }
.reason-grid { background: transparent; }
.faq-section { padding-top: 66px; background: linear-gradient(180deg, #ff6c42 0 142px, #fff1e7 142px 100%); }
.faq-section .section-title { margin-top: 5px; }
.faq-list details { background: #fff; }
.bottom-cta { border-top-width: 5px; }
.site-footer { padding-top: 48px; }
}
body { font-size: 16px; }
.site-header {
position: sticky;
top: 0;
width: 100%;
padding-right: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
padding-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
border-bottom-color: rgb(255 92 50 / 24%);
background: rgb(255 250 246 / 88%);
backdrop-filter: blur(14px) saturate(1.2);
}
.desktop-nav a { font-size: 13px; }
.hero-lead { font-size: 15px; }
.hero-points li { font-size: 13px; }
.quick-heading span, .quick-grid strong { font-size: 13px; }
.section-title span, .mini-label { font-size: 12px; }
.service-panel > p { font-size: 13px; }
.service-panel li, .detail-card li { font-size: 12px; }
.service-panel > a, .detail-card a { font-size: 13px; }
.stats-grid small { font-size: 12px; }
.stats-grid p { font-size: 14px; }
.stats-grid article div > span { font-size: 11px; line-height: 1.55; }
.news-heading > div span, .news-heading > a { font-size: 12px; }
.news-row time, .news-row span { font-size: 12px; }
.news-row p { font-size: 13px; }
.detail-card div > p { font-size: 12px; }
.detail-card li { font-size: 11px; }
.detail-card a { font-size: 12px; }
.flow-grid h3 { font-size: 14px; }
.flow-grid p { font-size: 11px; }
.voice-card h3 { font-size: 15px; }
.voice-card p { font-size: 12px; }
.voice-card small { font-size: 11px; }
.reason-grid article > p { font-size: 12px; }
.faq-list summary { font-size: 14px; }
.faq-list details p { font-size: 13px; }
.faq-more { font-size: 13px; }
.footer-brand p { font-size: 12px; }
.footer-links h3 { font-size: 12px; }
.footer-links a, .footer-bottom { font-size: 11px; }
main {
background:
radial-gradient(circle at 5% 14%, rgb(255 92 50 / 12%) 0 95px, transparent 96px),
linear-gradient(180deg, #fffaf5 0 16%, #ffeadd 16% 30%, #fff7f1 30% 49%, #ffdcca 49% 62%, #fffaf6 62% 78%, #ffe8da 78% 91%, #fff7f1 91% 100%);
}
.hero {
background: radial-gradient(circle at 10% 52%, rgb(255 92 50 / 10%), transparent 37%);
}
.quick-links {
border-top: 5px solid var(--orange);
background: linear-gradient(120deg, #ffd9c5, #fff0e7 46%, #ffcdb3);
box-shadow: 0 18px 45px rgb(148 51 12 / 12%);
}
.quick-grid a { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.quick-grid a:hover { transform: translateY(-7px) rotate(-.5deg); box-shadow: 0 17px 30px rgb(132 43 9 / 13%); }
.services {
border-right: 1px solid rgb(255 92 50 / 24%);
border-left: 8px solid var(--orange);
border-radius: 22px;
padding-right: 34px;
padding-left: 34px;
background: linear-gradient(120deg, #ffe3d3, #fff6f0 58%, #ffd5bf);
box-shadow: 0 22px 50px rgb(125 43 12 / 10%);
}
.services::before { background: rgb(255 255 255 / 52%); }
.service-image,
.service-panel,
.detail-card,
.voice-card,
.reason-grid article,
.faq-list details { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.service-image:hover { transform: translateY(-8px) rotate(-.7deg); }
.service-panel:hover,
.detail-card:hover,
.voice-card:hover,
.reason-grid article:hover,
.faq-list details:hover { transform: translateY(-7px); box-shadow: 0 22px 40px rgb(125 43 12 / 14%); }
.news {
background: linear-gradient(105deg, #ffcdb3, #ffe9dc 45%, #fff8f3);
box-shadow: 0 20px 45px rgb(117 41 11 / 10%);
}
.news-row { transition: padding .25s ease, color .25s ease, background .25s ease; }
.news-row:hover { padding-right: 12px; padding-left: 12px; background: rgb(255 255 255 / 72%); color: var(--orange-deep); }
.detail-services {
background:
radial-gradient(circle at 92% 12%, rgb(255 92 50 / 20%) 0 85px, transparent 86px),
linear-gradient(135deg, #ffd8c3, #fff1e8 53%, #ffcdb3);
box-shadow: 0 24px 55px rgb(124 42 10 / 11%);
}
.flow {
overflow: hidden;
background: linear-gradient(110deg, #ffdbc7, #fff4ec 48%, #ffccb1);
box-shadow: 0 22px 48px rgb(124 42 10 / 9%);
}
.flow::before {
position: absolute;
right: -42px;
bottom: -64px;
width: 190px;
height: 190px;
border: 30px solid rgb(255 92 50 / 12%);
border-radius: 50%;
content: "";
animation: orange-orbit 7s ease-in-out infinite alternate;
}
.voices {
border: 0;
background:
radial-gradient(circle at 90% 14%, rgb(255 255 255 / 17%) 0 95px, transparent 96px),
linear-gradient(135deg, #ff754b, #ee4d27 68%, #d93d1c);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), inset 0 -1px 0 rgb(116 27 0 / 18%);
}
.voices .section-title h2,
.voices .section-title > span { color: #fff; }
.voices .section-title > span { border: 1px solid rgb(255 255 255 / 52%); background: rgb(255 255 255 / 14%); }
.voices .section-title::after { background: #fff; }
.voice-card { border-color: rgb(255 255 255 / 48%); }
.reasons {
border: 1px solid rgb(255 92 50 / 25%);
background-color: #ffdcca;
background-image: radial-gradient(rgb(255 92 50 / 20%) 1.3px, transparent 1.3px);
box-shadow: 0 22px 48px rgb(124 42 10 / 9%);
}
.reason-grid { background: rgb(255 248 242 / 92%); }
.bottom-cta { background-color: #ffd8c3; }
.motion-ready .reveal-target {
opacity: 0;
transform: translateY(42px) scale(.985);
transition:
opacity .75s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
transform .75s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
box-shadow .35s ease,
border-color .35s ease;
}
.motion-ready .reveal-target.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.hero-copy > * { animation: hero-rise .75s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(1) { animation-delay: .08s; }
.hero-copy > :nth-child(2) { animation-delay: .18s; }
.hero-copy > :nth-child(3) { animation-delay: .3s; }
.hero-copy > :nth-child(4) { animation-delay: .42s; }
.hero-copy > :nth-child(5) { animation-delay: .54s; }
.hero-image { animation: photo-in .9s cubic-bezier(.2, .75, .2, 1) both; }
.hero-main { animation-delay: .08s; }
.hero-top { animation-delay: .22s; }
.hero-meeting { animation-delay: .34s; }
.hero-work { animation-delay: .46s; }
@keyframes hero-rise {
from { opacity: 0; translate: 0 30px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes photo-in {
from { opacity: 0; translate: 35px 24px; scale: .96; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes orange-orbit {
from { translate: 0 0; rotate: 0deg; }
to { translate: -22px -12px; rotate: 12deg; }
}
@media (max-width: 640px) {
.site-header {
position: sticky;
padding-right: 18px;
padding-left: 18px;
background: rgb(255 250 246 / 90%);
}
.mobile-menu summary { font-size: 10px; }
.mobile-menu nav a { font-size: 13px; }
.hero { background: linear-gradient(180deg, #ffe6d8, #fff8f3 68%, #fff 100%); }
.hero-lead { font-size: 12.5px; }
.hero-actions .button { font-size: 13px; }
.hero-points li { padding-right: 5px; padding-left: 5px; font-size: 10.5px; }
.quick-grid strong { font-size: 11px; }
.services {
border-left-width: 5px;
padding-right: 10px;
padding-left: 10px;
background: linear-gradient(135deg, #ffd9c5, #fff0e7 58%, #ffcdb2);
}
.service-image { height: 268px; }
.service-panel,
.service-panel + .service-panel { min-height: 268px; padding: 16px 13px 13px; }
.service-panel > p { font-size: 11px; line-height: 1.7; }
.service-panel li { font-size: 10px; line-height: 1.45; }
.mini-label { font-size: 10px; }
.stats-band { background: linear-gradient(145deg, #ff754b, #e94720); }
.stats-grid small { font-size: 11px; }
.stats-grid article div > span { font-size: 10px; }
.news { background: linear-gradient(130deg, #ffcdb3, #ffe9db 58%, #fff5ee); }
.news-heading > a { font-size: 11px; }
.news-row { grid-template-columns: 72px 62px 1fr; }
.news-row time, .news-row span { font-size: 10px; }
.news-row p { font-size: 10.5px; }
.detail-services { background: linear-gradient(135deg, #ffd4bd, #ffede2 55%, #ffc7aa); }
.detail-card > div { min-height: 300px; padding: 13px 11px 11px; }
.detail-card .mini-label { font-size: 9.5px; }
.detail-card h3 { min-height: 58px; font-size: 13px; }
.detail-card div > p { font-size: 10.5px; line-height: 1.75; }
.detail-card a { font-size: 11px; }
.flow { background: linear-gradient(120deg, #ffd9c5, #fff0e6 52%, #ffc7aa); }
.flow-grid article::before { font-size: 11px; }
.flow-grid h3 { min-height: 34px; font-size: 11px; }
.flow-grid p { font-size: 9.5px; }
.voices { background: linear-gradient(145deg, #ff754b, #e94720); }
.voice-card { min-height: 166px; }
.voice-card img { height: 148px; }
.voice-card h3 { font-size: 12.5px; }
.voice-card p { font-size: 10.5px; line-height: 1.7; }
.voice-card small { font-size: 10px; }
.reasons { background-color: #ffd7c2; }
.reason-title h3 { font-size: 10.5px; }
.reason-grid article > p { min-height: 118px; font-size: 9.3px; line-height: 1.65; }
.reason-grid img { height: 82px; }
.mobile-bridge-cta strong { font-size: 13px; }
.mobile-bridge-cta a { font-size: 11px; }
.faq-lead { font-size: 12px; }
.faq-list summary { font-size: 12px; }
.faq-list details p { font-size: 11px; }
.faq-more { font-size: 12px; }
.cta-content > p { font-size: 11.5px; }
.cta-content .button { font-size: 12px; }
.footer-brand p { font-size: 11.5px; }
.mobile-footer-links h3 { font-size: 11px; }
.mobile-footer-links a { font-size: 10px; }
.footer-bottom { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-copy > *,
.hero-image,
.flow::before { animation: none !important; }
.motion-ready .reveal-target { opacity: 1; transform: none; }
}
main {
background:
radial-gradient(circle at 4% 15%, rgb(255 92 50 / 7%) 0 78px, transparent 79px),
linear-gradient(180deg, #fff 0 23%, #fffaf6 23% 39%, #fff 39% 62%, #fff8f3 62% 78%, #fff 78% 100%);
}
.hero { background: radial-gradient(circle at 8% 50%, rgb(255 92 50 / 6%), transparent 32%); }
.quick-links {
background: linear-gradient(115deg, #fff, #fffaf6 60%, #fff2ea);
box-shadow: 0 15px 38px rgb(62 31 18 / 7%);
}
.services {
border-right-color: rgb(255 92 50 / 14%);
border-left-width: 6px;
background: #fff;
box-shadow: 0 18px 42px rgb(62 31 18 / 7%);
}
.services::before { background: linear-gradient(120deg, #fff8f3, rgb(255 255 255 / 72%)); }
.news {
background: linear-gradient(100deg, #fff5ee, #fff 34% 100%);
box-shadow: 0 16px 36px rgb(62 31 18 / 6%);
}
.detail-services {
background:
radial-gradient(circle at 94% 9%, rgb(255 92 50 / 8%) 0 70px, transparent 71px),
#fff;
box-shadow: 0 18px 42px rgb(62 31 18 / 7%);
}
.flow {
background: linear-gradient(110deg, #fff, #fffaf6 62%, #fff2e9);
box-shadow: 0 16px 38px rgb(62 31 18 / 6%);
}
.flow::before { border-color: rgb(255 92 50 / 7%); }
.voices {
border-top: 1px solid rgb(255 92 50 / 15%);
border-bottom: 1px solid rgb(255 92 50 / 15%);
background:
radial-gradient(circle at 91% 12%, rgb(255 92 50 / 7%) 0 78px, transparent 79px),
linear-gradient(115deg, #fff 0, #fff8f3 52%, #fff 100%);
box-shadow: none;
}
.voices .section-title h2 { color: var(--ink); }
.voices .section-title > span {
border: 0;
background: var(--orange-soft);
color: var(--orange-deep);
}
.voices .section-title::after { background: var(--orange); }
.voice-card { border-color: rgb(255 92 50 / 16%); }
.reasons {
border-color: rgb(255 92 50 / 16%);
background-color: #fff;
background-image: radial-gradient(rgb(255 92 50 / 9%) 1.1px, transparent 1.1px);
box-shadow: 0 16px 38px rgb(62 31 18 / 6%);
}
.reason-grid { background: rgb(255 255 255 / 94%); }
.bottom-cta { background-color: #fff7f1; }
@media (max-width: 640px) {
.hero { background: linear-gradient(180deg, #fff8f3, #fff 72%); }
.services { background: #fff; }
.news { background: linear-gradient(125deg, #fff3eb, #fff 48%); }
.detail-services { background: #fff; }
.flow { background: linear-gradient(120deg, #fff, #fff7f1); }
.voices { background: linear-gradient(145deg, #fff, #fff6ef 60%, #fff); }
.reasons { background-color: #fff; }
}
.brand { min-width: 112px; }
.brand-logo { width: 112px; height: auto; object-fit: contain; }
.footer-brand .brand-logo { width: 124px; }
.hero-main-slider {
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: 100%;
border-radius: 12px 0 0 90px;
overflow: hidden;
box-shadow: 0 12px 32px rgb(26 30 38 / 8%);
animation: photo-in .9s cubic-bezier(.2, .75, .2, 1) .08s both;
}
.hero-main-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 53% center;
opacity: 0;
animation: hero-crossfade 15s ease-in-out infinite;
}
.hero-main-slide.slide-one { animation-delay: 0s; }
.hero-main-slide.slide-two { animation-delay: 5s; object-position: 45% center; }
.hero-main-slide.slide-three { animation-delay: 10s; object-position: 52% center; }
.hero-art::before {
position: absolute;
z-index: 3;
inset: 0;
background:
linear-gradient(
90deg,
rgb(255 255 255 / 100%) 0,
rgb(255 255 255 / 96%) 7%,
rgb(255 255 255 / 72%) 18%,
rgb(255 255 255 / 40%) 32%,
rgb(255 255 255 / 16%) 46%,
transparent 62%
),
linear-gradient(0deg, #fff 0, rgb(255 255 255 / 55%) 4%, transparent 12%);
content: "";
pointer-events: none;
}
@keyframes hero-crossfade {
0%, 29% { opacity: 1; scale: 1; }
36%, 100% { opacity: 0; scale: 1.045; }
}
.flow-grid h3 { font-size: 16px; line-height: 1.45; }
.flow-grid p { font-size: 13px; line-height: 1.7; }
.mobile-bridge-cta strong { font-size: 14px; }
.mobile-bridge-cta a { font-size: 13px; }
@media (max-width: 640px) {
.brand { min-width: 101px; }
.site-header .brand-logo { width: 101px; }
.footer-brand .brand-logo { width: 112px; }
.hero-main-slider {
border-radius: 0;
}
.hero-main-slide { object-position: 53% center; }
.hero-main-slide.slide-two { object-position: 45% center; }
.hero-main-slide.slide-three { object-position: 48% center; }
.flow-grid h3 { min-height: 42px; font-size: 13px; line-height: 1.45; }
.flow-grid p { font-size: 11.5px; line-height: 1.65; }
.flow-grid article { padding-right: 6px; padding-left: 6px; }
.mobile-bridge-cta strong { font-size: 14px; }
.mobile-bridge-cta a { font-size: 13px; }
.reason-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.reason-grid article,
.reason-grid article + article { padding: 14px 12px; }
.reason-title { min-height: 36px; }
.reason-title h3 { font-size: 13px; }
.reason-grid img { height: 112px; }
.reason-grid article > p { min-height: 72px; font-size: 11.5px; line-height: 1.75; }
}
@media (prefers-reduced-motion: reduce) {
.hero-main-slider { animation: none; }
.hero-main-slide { display: none; animation: none; }
.hero-main-slide.slide-one { display: block; opacity: 1; }
}
.reports-strip {
position: relative;
width: 100%;
overflow: hidden;
border-top: 1px solid rgb(255 92 50 / 18%);
border-bottom: 1px solid rgb(255 92 50 / 18%);
padding: 66px 0 72px;
background: #fff;
}
.reports-strip::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: clamp(10px, 4.8vw, 70px);
background: var(--orange);
content: "";
}
.reports-heading {
position: relative;
display: grid;
width: min(100% - 96px, 1220px);
margin: 0 auto 30px;
grid-template-columns: 1fr auto auto;
gap: 28px;
align-items: end;
}
.reports-heading span {
color: var(--orange);
font-size: 12px;
font-weight: 900;
letter-spacing: .22em;
}
.reports-heading h2 {
margin: 7px 0 0;
font-size: clamp(28px, 3vw, 42px);
letter-spacing: .035em;
}
.reports-heading > p {
margin: 0 0 5px;
color: #555c66;
font-size: 13px;
font-weight: 600;
}
.report-controls { display: flex; gap: 8px; }
.report-controls button {
width: 46px;
height: 46px;
border: 1px solid var(--ink);
border-radius: 50%;
background: #fff;
color: var(--ink);
font-size: 19px;
cursor: pointer;
transition: background .25s ease, color .25s ease, transform .25s ease;
}
.report-controls button:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.report-viewport {
width: min(100% - 96px, 1220px);
margin: 0 auto;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.report-viewport::-webkit-scrollbar { display: none; }
.report-track { display: flex; width: max-content; gap: 18px; padding: 4px 2px 18px; }
.report-card {
display: grid;
width: clamp(310px, 30vw, 390px);
flex: 0 0 auto;
grid-template-rows: 210px 1fr;
overflow: hidden;
border: 1px solid #dedfdf;
border-radius: 3px;
background: #fff;
box-shadow: 0 12px 28px rgb(20 27 36 / 7%);
scroll-snap-align: start;
transition: transform .35s ease, box-shadow .35s ease;
}
.report-card:hover { transform: translateY(-8px); box-shadow: 0 21px 38px rgb(20 27 36 / 13%); }
.report-card > img { width: 100%; height: 210px; object-fit: cover; }
.report-card > div { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; padding: 21px 22px 22px; }
.report-card time { color: #555b64; font-size: 12px; font-weight: 700; }
.report-card span { color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.report-card h3 { grid-column: 1 / -1; min-height: 55px; margin: 4px 0 12px; font-size: 17px; line-height: 1.65; }
.report-card strong { grid-column: 1 / -1; border-top: 1px solid #e4e4e3; padding-top: 14px; font-size: 12px; }
.report-card strong b { float: right; color: var(--orange); font-size: 17px; }
.news {
overflow: hidden;
border: 0;
border-radius: 0;
padding: 76px 0 72px;
background: #fff;
box-shadow: none;
}
.news::before {
position: absolute;
z-index: 0;
top: 24px;
right: 0;
color: rgb(255 92 50 / 5%);
content: "NEWS";
font-size: clamp(80px, 12vw, 168px);
font-weight: 900;
letter-spacing: -.05em;
line-height: 1;
}
.news-heading, .news-list { position: relative; z-index: 1; }
.news-heading { align-items: flex-end; }
.news-heading > div { flex-direction: column; gap: 4px; align-items: flex-start; }
.news-heading h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: .04em; }
.news-heading > div span { order: -1; font-size: 12px; }
.news-heading > a { border-bottom: 1px solid var(--ink); padding-bottom: 6px; font-size: 13px; }
.news-list { margin-top: 31px; border-top: 2px solid var(--ink); background: transparent; }
.news-row {
position: relative;
grid-template-columns: 125px 110px 1fr 32px;
gap: 18px;
min-height: 74px;
padding: 18px 4px;
transition: padding .25s ease, background .25s ease;
}
.news-row::after {
align-self: center;
color: var(--orange);
content: "↗";
font-size: 19px;
text-align: center;
}
.news-row:hover { padding-right: 12px; padding-left: 12px; background: #fff6f0; color: var(--ink); }
.news-row time { font-size: 13px; font-weight: 800; }
.news-row > span { border-radius: 99px; padding: 5px 8px; background: #f3f2f1; font-size: 11px; text-align: center; }
.news-row p { font-size: 14px; line-height: 1.65; }
.detail-services {
width: 100%;
max-width: none;
margin: 0;
border: 0;
border-radius: 0;
padding: 84px max(32px, calc((100vw - 1220px) / 2)) 92px;
background: linear-gradient(90deg, var(--orange) 0 34px, #0a172d 34px 100%);
box-shadow: none;
color: #fff;
}
.detail-services .section-title {
max-width: 1220px;
margin: 0 auto 38px;
justify-content: flex-start;
}
.detail-services .section-title > span {
border: 1px solid rgb(255 255 255 / 30%);
background: transparent;
color: #ff9b7b;
}
.detail-services .section-title h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); }
.detail-services .section-title::after { right: auto; left: 0; transform: rotate(-2deg); }
.detail-grid {
max-width: 1220px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
border: 0;
border-radius: 0;
overflow: visible;
}
.detail-card,
.detail-card + .detail-card {
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
border: 0 !important;
border-radius: 12px;
background: #fff;
box-shadow: 0 18px 42px rgb(0 0 0 / 23%);
color: var(--ink);
}
.detail-card > img { width: 100%; height: 218px; min-height: 0; object-fit: cover; }
.detail-card > div { min-height: 335px; padding: 25px 24px 23px; }
.detail-card h3 { min-height: 62px; margin: 9px 0 13px; font-size: 21px; }
.detail-card div > p { font-size: 13px; line-height: 1.85; }
.detail-card ul { display: grid; gap: 8px; margin: 17px 0; }
.detail-card li { font-size: 11px; }
.detail-card a {
border: 1px solid var(--orange);
border-radius: 4px;
padding: 12px 14px;
color: var(--orange-deep);
font-size: 13px;
}
.detail-card-link {
display: block;
margin-top: auto;
border: 1px solid var(--orange);
border-radius: 4px;
padding: 12px 14px;
color: var(--orange-deep);
font-size: 13px;
font-weight: 800;
}
.detail-card-link b { float: right; font-size: 17px; transition: translate .22s ease; }
.detail-card,
.voice-card {
cursor: pointer;
transform-origin: center;
transition: translate .25s ease, scale .14s ease, rotate .14s ease, box-shadow .3s ease;
-webkit-tap-highlight-color: transparent;
}
.detail-card img,
.voice-card img { transition: scale .45s cubic-bezier(.2, .7, .2, 1); }
.detail-card:hover,
.voice-card:hover { transform: none; translate: 0 -8px; }
.detail-card:hover img,
.voice-card:hover img { scale: 1.055; }
.detail-card:hover .detail-card-link b { translate: 5px 0; }
.detail-card:active,
.voice-card:active { translate: 0 2px; scale: .975; rotate: .35deg; }
.detail-card:focus-visible,
.voice-card:focus-visible { outline: 3px solid #ff9b79; outline-offset: 5px; }
.sparkle-copy {
--sparkle-color: var(--orange);
position: relative;
display: inline-block;
isolation: isolate;
}
.sparkle-copy::before,
.sparkle-copy::after {
position: absolute;
z-index: 2;
color: var(--sparkle-color);
line-height: 1;
pointer-events: none;
filter: drop-shadow(0 0 7px rgb(255 92 50 / 32%));
}
.sparkle-copy::before {
top: -.8em;
left: -.85em;
content: "✦";
font-size: .72em;
animation: sparkle-pop 2.7s ease-in-out infinite;
}
.sparkle-copy::after {
right: -.9em;
bottom: -.5em;
content: "✧";
font-size: .8em;
animation: sparkle-pop 2.7s 1.1s ease-in-out infinite;
}
.mobile-bridge-cta .sparkle-copy { --sparkle-color: #fff; }
@keyframes sparkle-pop {
0%, 34%, 100% { opacity: .22; scale: .65; rotate: -12deg; }
48% { opacity: 1; scale: 1.35; rotate: 18deg; }
62% { opacity: .55; scale: .9; rotate: 4deg; }
}
@media (max-width: 640px) {
.reports-strip { padding: 49px 0 55px; }
.reports-strip::before { width: 8px; }
.reports-heading { width: calc(100% - 42px); margin-bottom: 23px; grid-template-columns: 1fr auto; gap: 14px; }
.reports-heading h2 { font-size: 25px; line-height: 1.45; }
.reports-heading > p { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
.report-controls { grid-column: 2; grid-row: 1; }
.report-controls button { width: 39px; height: 39px; }
.report-viewport { width: calc(100% - 42px); }
.report-card { width: min(82vw, 340px); grid-template-rows: 176px 1fr; }
.report-card > img { height: 176px; }
.report-card > div { padding: 18px; }
.report-card h3 { min-height: 50px; font-size: 15px; }
.news { width: calc(100% - 34px); padding: 55px 0 57px; }
.news::before { top: 27px; font-size: 76px; }
.news-heading h2 { font-size: 28px; }
.news-heading > a { font-size: 12px; }
.news-list { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 0; }
.news-row {
grid-template-columns: 82px 1fr 27px;
gap: 8px 10px;
min-height: 0;
padding: 17px 2px;
}
.news-row time { grid-column: 1; grid-row: 1; font-size: 12px; }
.news-row > span { grid-column: 2; grid-row: 1; width: max-content; padding: 4px 9px; font-size: 10px; }
.news-row p { grid-column: 1 / 3; grid-row: 2; font-size: 14px; line-height: 1.65; }
.news-row::after { grid-column: 3; grid-row: 1 / 3; }
.detail-services {
width: 100%;
padding: 58px 18px 64px;
background: linear-gradient(180deg, var(--orange) 0 10px, #0a172d 10px 100%);
}
.detail-services .section-title { margin-bottom: 27px; flex-direction: column; align-items: flex-start; gap: 9px; }
.detail-services .section-title h2 { font-size: 27px; line-height: 1.45; }
.detail-services .section-title::after { bottom: -12px; }
.detail-grid { grid-template-columns: 1fr; gap: 17px; }
.detail-card,
.detail-card + .detail-card { grid-template-columns: 1fr; }
.detail-card > img { height: 190px; }
.detail-card > div { min-height: 0; padding: 21px 20px 20px; }
.detail-card .mini-label { font-size: 10px; }
.detail-card h3 { min-height: 0; margin: 7px 0 11px; font-size: 20px; }
.detail-card div > p { font-size: 13px; }
.detail-card ul { display: grid; }
.detail-card li { font-size: 11.5px; }
.detail-card a { font-size: 13px; }
.detail-card-link { font-size: 13px; }
.sparkle-copy::before { top: -.9em; left: -.45em; }
.sparkle-copy::after { right: -.35em; bottom: -.65em; }
}
@media (prefers-reduced-motion: reduce) {
.detail-card,
.voice-card,
.detail-card img,
.voice-card img,
.detail-card-link b { transition: none; }
.sparkle-copy::before,
.sparkle-copy::after { animation: none; opacity: .8; }
}
.services {
isolation: isolate;
overflow: hidden;
width: 100%;
max-width: none;
padding: 92px max(32px, calc((100vw - 1220px) / 2)) 104px;
background: #fff;
}
.services::before {
position: absolute;
z-index: -1;
top: 22px;
left: max(22px, calc((100vw - 1360px) / 2));
color: rgb(255 92 50 / 5%);
content: "SERVICE";
font-size: clamp(88px, 13vw, 188px);
font-weight: 900;
letter-spacing: -.07em;
line-height: 1;
}
.service-choice-grid {
display: grid;
max-width: 1220px;
margin: 0 auto;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.service-choice {
display: grid;
min-height: 440px;
grid-template-rows: 245px 1fr;
overflow: hidden;
border-radius: 28px;
background: #ff6438;
box-shadow: 0 22px 48px rgb(145 53 18 / 15%);
color: #fff;
-webkit-tap-highlight-color: transparent;
transition: translate .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.service-choice:nth-child(2) { background: #fff0e6; color: var(--ink); }
.service-choice figure { position: relative; height: 245px; margin: 0; overflow: hidden; }
.service-choice figure::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 48%, rgb(6 18 38 / 42%));
content: "";
}
.service-choice img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s cubic-bezier(.2,.7,.2,1); }
.service-choice figure > span {
position: absolute;
z-index: 2;
right: 22px;
bottom: 17px;
color: #fff;
font-size: 12px;
font-weight: 900;
letter-spacing: .14em;
}
.service-choice > div { display: flex; flex-direction: column; padding: 27px 30px 29px; }
.service-choice small { opacity: .78; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.service-choice h3 { margin: 7px 0 10px; font-size: clamp(25px, 2.2vw, 34px); letter-spacing: .05em; }
.service-choice p { max-width: 500px; margin: 0; font-size: 13px; font-weight: 650; line-height: 1.8; }
.service-choice strong { margin-top: auto; padding-top: 18px; font-size: 13px; }
.service-choice strong b { float: right; font-size: 20px; transition: translate .25s ease; }
.service-choice:hover { translate: 0 -9px; box-shadow: 0 32px 60px rgb(145 53 18 / 21%); }
.service-choice:hover img { scale: 1.065; }
.service-choice:hover strong b { translate: 5px -5px; }
.service-choice:active { translate: 0 2px; }
.service-choice:focus-visible { outline: 4px solid #ffb296; outline-offset: 5px; }
.service-switcher {
position: relative;
overflow: hidden;
padding: 100px max(32px, calc((100vw - 1220px) / 2));
background: #fff2e9;
}
.service-switcher::after {
position: absolute;
right: -130px;
bottom: -170px;
width: 390px;
height: 390px;
border-radius: 50%;
background: #ff6438;
content: "";
opacity: .08;
}
.service-switcher-inner {
position: relative;
z-index: 1;
display: grid;
max-width: 1220px;
margin: 0 auto;
grid-template-columns: 330px minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: 35px 45px;
}
.service-switcher-head { grid-column: 1; grid-row: 1; }
.service-switcher-head > span { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .22em; }
.service-switcher-head h2 { margin: 10px 0 14px; font-size: clamp(30px, 3vw, 43px); letter-spacing: .04em; line-height: 1.35; }
.service-switcher-head p { margin: 0; color: #62656b; font-size: 13px; font-weight: 650; }
.service-tablist { display: grid; align-self: start; grid-column: 1; grid-row: 2; gap: 10px; }
.service-tablist button {
display: grid;
min-height: 72px;
grid-template-columns: 42px 1fr 24px;
align-items: center;
border: 0;
border-radius: 999px;
padding: 0 22px;
background: rgb(255 255 255 / 72%);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background .3s ease, color .3s ease, translate .25s ease, box-shadow .3s ease;
}
.service-tablist button small { color: var(--orange); font-size: 11px; font-weight: 900; }
.service-tablist button span { font-size: 14px; font-weight: 850; }
.service-tablist button b { font-size: 19px; text-align: right; transition: rotate .25s ease; }
.service-tablist button:hover { translate: 6px 0; background: #fff; }
.service-tablist button.is-active { background: var(--orange); box-shadow: 0 15px 32px rgb(180 63 19 / 22%); color: #fff; }
.service-tablist button.is-active small { color: #fff; }
.service-tablist button.is-active b { rotate: -45deg; }
.service-tablist button:focus-visible { outline: 3px solid #ff9b79; outline-offset: 3px; }
.service-active-panel {
display: grid;
min-height: 585px;
align-self: stretch;
grid-column: 2;
grid-row: 1 / 3;
grid-template-rows: 315px 1fr;
overflow: hidden;
border-radius: 30px;
background: #fff;
box-shadow: 0 28px 70px rgb(110 46 18 / 13%);
animation: service-panel-in .48s cubic-bezier(.2,.7,.2,1) both;
}
.service-active-panel figure { position: relative; height: 315px; margin: 0; overflow: hidden; }
.service-active-panel figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgb(7 20 40 / 50%)); content: ""; }
.service-active-panel figure img { width: 100%; height: 100%; object-fit: cover; }
.service-active-panel figure span { position: absolute; z-index: 2; right: 25px; bottom: 20px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.service-active-panel > div { position: relative; padding: 28px 34px 31px; }
.service-active-tag { color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .17em; }
.service-active-panel h3 { margin: 7px 0 10px; font-size: clamp(24px, 2.3vw, 34px); letter-spacing: .045em; line-height: 1.42; }
.service-active-panel p { max-width: 700px; margin: 0; color: #4e545e; font-size: 13px; font-weight: 650; line-height: 1.85; }
.service-active-panel ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
.service-active-panel li { border-radius: 999px; padding: 7px 12px; background: #fff0e6; color: #5a3425; font-size: 11px; font-weight: 800; }
.service-active-panel li::before { margin-right: 5px; color: var(--orange); content: "✓"; }
.service-active-panel a { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; padding: 15px 18px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 850; transition: background .25s ease, translate .25s ease; }
.service-active-panel a:hover { translate: 0 -2px; background: var(--orange-deep); }
.service-active-panel a b { font-size: 18px; }
@keyframes service-panel-in {
from { opacity: .25; translate: 20px 0; scale: .985; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
.story-marquee {
overflow: hidden;
padding: 82px 0 88px;
background: #0a172d;
color: #fff;
}
.story-marquee-heading {
display: grid;
width: min(100% - 64px, 1220px);
margin: 0 auto 38px;
grid-template-columns: 1fr auto;
align-items: end;
}
.story-marquee-heading > span { grid-column: 1 / -1; margin-bottom: 9px; color: #ff8d69; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.story-marquee-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); letter-spacing: .045em; line-height: 1.4; }
.story-marquee-heading a { border-bottom: 1px solid rgb(255 255 255 / 40%); padding: 0 2px 8px; font-size: 13px; font-weight: 800; }
.story-marquee-heading a b { margin-left: 18px; color: #ff8d69; }
.story-marquee-viewport { overflow: hidden; }
.story-marquee-track { display: flex; width: max-content; gap: 18px; animation: story-flow 33s linear infinite; }
.story-marquee-track:hover { animation-play-state: paused; }
.story-marquee figure { position: relative; width: clamp(250px, 25vw, 390px); height: clamp(175px, 18vw, 275px); flex: 0 0 auto; margin: 0; overflow: hidden; border-radius: 16px; }
.story-marquee figure:nth-child(3n + 2) { translate: 0 20px; }
.story-marquee img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s ease; }
.story-marquee figure:hover img { scale: 1.06; }
.story-marquee figure span { position: absolute; right: 14px; bottom: 11px; color: #fff; font-size: 11px; font-weight: 900; text-shadow: 0 2px 8px #000; }
@keyframes story-flow { to { translate: calc(-50% - 9px) 0; } }
.qllink-float {
position: fixed;
z-index: 60;
right: 22px;
bottom: 20px;
display: flex;
width: 270px;
min-height: 72px;
align-items: center;
justify-content: space-between;
gap: 16px;
border-radius: 18px;
padding: 13px 17px 13px 19px;
background: linear-gradient(135deg, #ff6a3f, #ea421e);
box-shadow: 0 18px 45px rgb(136 42 10 / 31%);
color: #fff;
-webkit-tap-highlight-color: transparent;
transition: translate .25s ease, box-shadow .25s ease;
}
.qllink-float span { display: grid; gap: 2px; }
.qllink-float small { font-size: 10px; font-weight: 700; opacity: .85; }
.qllink-float strong { font-size: 17px; letter-spacing: .04em; }
.qllink-float > b { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #fff; color: var(--orange-deep); font-size: 17px; }
.qllink-float:hover { translate: 0 -5px; box-shadow: 0 24px 52px rgb(136 42 10 / 38%); }
.qllink-float:active { translate: 0 2px; }
.qllink-float:focus-visible { outline: 4px solid #ffb296; outline-offset: 4px; }
@media (max-width: 760px) {
.site-shell { padding-bottom: 84px; }
.services { padding: 66px 0 74px; }
.services::before { top: 35px; left: -11px; font-size: 83px; }
.services .section-title { width: calc(100% - 36px); margin-right: auto; margin-left: auto; }
.service-choice-grid {
display: flex;
max-width: none;
gap: 12px;
overflow-x: auto;
padding: 5px 18px 28px;
scroll-padding-left: 18px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.service-choice-grid::-webkit-scrollbar { display: none; }
.service-choice { width: min(84vw, 365px); min-height: 492px; flex: 0 0 auto; grid-template-rows: 265px 1fr; border-radius: 23px; scroll-snap-align: start; }
.service-choice figure { height: 265px; }
.service-choice > div { padding: 23px 22px 24px; }
.service-choice small { font-size: 11px; }
.service-choice h3 { font-size: 27px; }
.service-choice p { font-size: 12.5px; line-height: 1.75; }
.service-choice strong { font-size: 12px; }
.service-switcher { padding: 68px 0 74px; }
.service-switcher-inner { display: block; }
.service-switcher-head { width: calc(100% - 36px); margin: 0 auto 25px; }
.service-switcher-head h2 { font-size: 30px; }
.service-switcher-head p { font-size: 12px; }
.service-tablist {
display: flex;
gap: 8px;
overflow-x: auto;
margin-bottom: 19px;
padding: 2px 18px 14px;
scroll-padding-left: 18px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.service-tablist::-webkit-scrollbar { display: none; }
.service-tablist button { min-width: 178px; min-height: 56px; flex: 0 0 auto; grid-template-columns: 29px 1fr 17px; border-radius: 999px; padding: 0 16px; scroll-snap-align: start; }
.service-tablist button span { font-size: 12px; }
.service-tablist button:hover { translate: 0 0; }
.service-active-panel { width: calc(100% - 36px); min-height: 0; margin: 0 auto; grid-template-rows: 242px auto; border-radius: 24px; }
.service-active-panel figure { height: 242px; }
.service-active-panel > div { padding: 23px 21px 24px; }
.service-active-panel h3 { font-size: 24px; }
.service-active-panel p { font-size: 12.5px; }
.service-active-panel ul { display: grid; gap: 7px; margin: 16px 0 20px; }
.service-active-panel li { width: max-content; max-width: 100%; font-size: 10.5px; }
.story-marquee { padding: 65px 0 73px; }
.story-marquee-heading { width: calc(100% - 36px); margin-bottom: 28px; grid-template-columns: 1fr; }
.story-marquee-heading h2 { font-size: 27px; }
.story-marquee-heading a { width: max-content; margin-top: 21px; font-size: 12px; }
.story-marquee-track { gap: 10px; animation-duration: 25s; }
.story-marquee figure { width: 72vw; height: 49vw; border-radius: 13px; }
.story-marquee figure:nth-child(3n + 2) { translate: 0 12px; }
.qllink-float {
right: 12px;
bottom: max(10px, env(safe-area-inset-bottom));
left: 12px;
width: auto;
min-height: 62px;
border-radius: 16px;
padding: 9px 11px 9px 17px;
}
.qllink-float small { font-size: 9px; }
.qllink-float strong { font-size: 16px; }
.qllink-float > b { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.service-choice,
.service-choice img,
.service-tablist button,
.service-active-panel,
.service-active-panel a,
.story-marquee-track,
.story-marquee img,
.qllink-float { animation: none; transition: none; }
.story-marquee-track { translate: 0 0; }
}
.service-gateway {
position: relative;
overflow: hidden;
padding: 94px max(32px, calc((100vw - 1220px) / 2)) 108px;
background: #fff;
}
.service-gateway::before {
position: absolute;
top: -115px;
right: -95px;
width: 360px;
height: 360px;
border-radius: 50%;
background: #ff6a40;
content: "";
opacity: .08;
}
.service-gateway-heading { max-width: 1220px; margin: 0 auto 34px; }
.service-gateway-heading > span,
.flow-journey-heading > span,
.voice-showcase-heading > span { color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.service-gateway-heading h2,
.flow-journey-heading h2,
.voice-showcase-heading h2 { margin: 8px 0 10px; font-size: clamp(30px, 3vw, 43px); letter-spacing: .045em; }
.service-gateway-heading p,
.flow-journey-heading p,
.voice-showcase-heading p { margin: 0; color: #575e68; font-size: 13px; font-weight: 650; line-height: 1.8; }
.service-gateway-stage {
position: relative;
max-width: 1220px;
height: 590px;
margin: 0 auto;
overflow: hidden;
border-radius: 34px;
background: #35231c;
animation: gateway-in .55s cubic-bezier(.2,.7,.2,1) both;
}
.service-gateway-stage::after {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgb(8 18 34 / 82%) 0, rgb(8 18 34 / 47%) 48%, transparent 78%), linear-gradient(0deg, rgb(8 18 34 / 60%), transparent 54%);
content: "";
}
.service-gateway-stage > img { width: 100%; height: 100%; object-fit: cover; animation: gateway-image-in 1s cubic-bezier(.2,.7,.2,1) both; }
.service-gateway-copy { position: absolute; z-index: 2; top: 50%; left: 64px; width: min(490px, 48%); color: #fff; translate: 0 -50%; }
.service-gateway-copy > span { color: #ff9675; font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.service-gateway-copy h3 { margin: 13px 0 18px; font-size: clamp(36px, 4.2vw, 59px); letter-spacing: .045em; line-height: 1.36; }
.service-gateway-copy p { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.95; }
.service-gateway-copy a { display: flex; width: min(100%, 350px); min-height: 55px; align-items: center; justify-content: space-between; margin-top: 28px; border-radius: 999px; padding: 0 22px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 850; transition: translate .25s ease, background .25s ease; }
.service-gateway-copy a:hover { translate: 5px 0; background: #fff0e7; }
.service-gateway-tabs { position: relative; z-index: 3; display: grid; width: min(86%, 920px); margin: -52px auto 0; grid-template-columns: 1fr 1fr; gap: 12px; }
.service-gateway-tabs button {
display: grid;
min-height: 104px;
grid-template-columns: 48px 1fr 38px;
align-items: center;
border: 0;
border-radius: 23px;
padding: 0 27px;
background: #fff;
box-shadow: 0 20px 48px rgb(49 31 22 / 16%);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: translate .25s ease, background .3s ease, color .3s ease;
}
.service-gateway-tabs button small { color: var(--orange); font-size: 12px; font-weight: 900; }
.service-gateway-tabs button span { font-size: 17px; font-weight: 850; }
.service-gateway-tabs button b { font-size: 21px; text-align: right; }
.service-gateway-tabs button:hover { translate: 0 -5px; }
.service-gateway-tabs button.is-active { background: var(--orange); color: #fff; }
.service-gateway-tabs button.is-active small { color: #fff; }
.service-gateway-tabs button:focus-visible { outline: 4px solid #ffb296; outline-offset: 4px; }
@keyframes gateway-in { from { opacity: .35; scale: .985; } to { opacity: 1; scale: 1; } }
@keyframes gateway-image-in { from { scale: 1.06; } to { scale: 1; } }
.service-switcher {
isolation: isolate;
background:
linear-gradient(90deg, rgb(6 18 38 / 86%) 0%, rgb(6 18 38 / 73%) 42%, rgb(6 18 38 / 48%) 100%),
url("../images/service-learning-women.webp") center 46% / cover no-repeat;
}
.service-switcher::before {
position: absolute;
z-index: -1;
inset: 0;
background: radial-gradient(circle at 82% 15%, rgb(255 126 83 / 28%), transparent 34%);
content: "";
}
.service-switcher::after { display: none; }
.service-switcher-head h2 { color: #fff; }
.service-switcher-head p { color: rgb(255 255 255 / 72%); }
.service-tablist button { background: rgb(255 255 255 / 13%); color: #fff; backdrop-filter: blur(10px); }
.service-tablist button:hover { background: rgb(255 255 255 / 22%); }
.service-tablist button small { color: #ff9a78; }
.service-tablist button.is-active { background: var(--orange); }
.flow-journey {
position: relative;
overflow: hidden;
padding: 96px max(32px, calc((100vw - 1220px) / 2)) 104px;
background: #fff8f3;
}
.flow-journey::after {
position: absolute;
top: 105px;
right: max(24px, calc((100vw - 1380px) / 2));
color: rgb(255 92 50 / 7%);
content: "01 — 05";
font-size: clamp(58px, 8vw, 112px);
font-weight: 900;
letter-spacing: -.04em;
}
.flow-journey-heading { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto 32px; }
.flow-step-tabs {
position: relative;
z-index: 1;
display: grid;
max-width: 1220px;
margin: 0 auto 18px;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.flow-step-tabs button {
display: grid;
min-height: 78px;
grid-template-columns: auto 1fr;
align-items: center;
gap: 11px;
border: 0;
border-radius: 16px;
padding: 0 17px;
background: #fff;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: translate .25s ease, background .3s ease, color .3s ease;
}
.flow-step-tabs button small { color: var(--orange); font-size: 11px; font-weight: 900; }
.flow-step-tabs button span { font-size: 13px; font-weight: 850; line-height: 1.4; }
.flow-step-tabs button:hover { translate: 0 -4px; }
.flow-step-tabs button.is-active { background: var(--ink); color: #fff; }
.flow-step-tabs button.is-active small { color: #ff9472; }
.flow-step-tabs button:focus-visible { outline: 3px solid #ff9b79; outline-offset: 3px; }
.flow-active {
position: relative;
z-index: 1;
display: grid;
max-width: 1220px;
min-height: 475px;
margin: 0 auto;
grid-template-columns: 1.15fr .85fr;
overflow: hidden;
border-radius: 30px;
background: #ff6438;
box-shadow: 0 24px 60px rgb(141 54 21 / 15%);
color: #fff;
animation: flow-panel-in .48s cubic-bezier(.2,.7,.2,1) both;
}
.flow-active figure { position: relative; min-height: 475px; margin: 0; overflow: hidden; }
.flow-active figure::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 18 34 / 45%), transparent 54%); content: ""; }
.flow-active figure img { width: 100%; height: 100%; object-fit: cover; }
.flow-active figure span { position: absolute; z-index: 2; right: 24px; bottom: 20px; font-size: 12px; font-weight: 900; letter-spacing: .15em; }
.flow-active > div { display: flex; flex-direction: column; justify-content: center; padding: 45px 48px; }
.flow-active > div > span { font-size: 12px; font-weight: 900; letter-spacing: .18em; opacity: .78; }
.flow-active h3 { margin: 13px 0 18px; font-size: clamp(28px, 3vw, 42px); letter-spacing: .05em; line-height: 1.45; }
.flow-active p { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.95; }
.flow-active button,
.flow-active a { display: flex; min-height: 56px; align-items: center; justify-content: space-between; margin-top: 30px; border: 0; border-radius: 999px; padding: 0 23px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 850; cursor: pointer; }
@keyframes flow-panel-in { from { opacity: .25; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
.voice-showcase {
position: relative;
overflow: hidden;
padding: 96px max(32px, calc((100vw - 1220px) / 2)) 108px;
background: #fff;
}
.voice-showcase::before {
position: absolute;
top: 18px;
left: max(18px, calc((100vw - 1390px) / 2));
color: rgb(255 92 50 / 7%);
content: "“";
font-family: Georgia, serif;
font-size: 230px;
line-height: 1;
}
.voice-showcase-heading { position: relative; max-width: 1220px; margin: 0 auto 35px; }
.voice-feature {
position: relative;
display: grid;
max-width: 1220px;
min-height: 540px;
margin: 0 auto;
grid-template-columns: .92fr 1.08fr;
overflow: hidden;
border-radius: 34px;
background: #ff6438;
box-shadow: 0 28px 65px rgb(144 49 13 / 17%);
color: #fff;
animation: voice-feature-in .5s cubic-bezier(.2,.7,.2,1) both;
}
.voice-feature figure { position: relative; min-height: 540px; margin: 0; overflow: hidden; }
.voice-feature figure::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 18 34 / 44%), transparent 48%); content: ""; }
.voice-feature figure img { width: 100%; height: 100%; object-fit: cover; }
.voice-feature figure > span { position: absolute; z-index: 2; right: 23px; bottom: 20px; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.voice-feature > div { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 48px 58px; }
.voice-mark { position: absolute; top: 20px; left: 38px; color: rgb(255 255 255 / 23%); font-family: Georgia, serif; font-size: 130px; line-height: 1; }
.voice-feature h3 { position: relative; margin: 0 0 20px; font-size: clamp(28px, 3vw, 42px); letter-spacing: .045em; line-height: 1.5; }
.voice-feature p { position: relative; margin: 0; font-size: 14px; font-weight: 650; line-height: 2; }
.voice-feature small { margin-top: 22px; font-size: 12px; font-weight: 850; }
.voice-feature a { display: flex; align-items: center; justify-content: space-between; margin-top: 34px; border-top: 1px solid rgb(255 255 255 / 35%); padding-top: 18px; font-size: 13px; font-weight: 850; }
.voice-selectors { display: grid; max-width: 1080px; margin: -34px auto 0; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; z-index: 2; }
.voice-selectors button {
display: grid;
min-height: 100px;
grid-template-columns: 68px 1fr;
align-items: center;
gap: 13px;
border: 0;
border-radius: 18px;
padding: 10px 16px 10px 10px;
background: #fff;
box-shadow: 0 17px 38px rgb(70 42 29 / 14%);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: translate .25s ease, background .3s ease, color .3s ease;
}
.voice-selectors button:hover { translate: 0 -5px; }
.voice-selectors button.is-active { background: var(--ink); color: #fff; }
.voice-selectors img { width: 68px; height: 76px; border-radius: 12px; object-fit: cover; }
.voice-selectors button span { display: grid; gap: 6px; }
.voice-selectors small { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.voice-selectors strong { font-size: 11px; line-height: 1.45; }
.voice-selectors button:focus-visible { outline: 3px solid #ff9b79; outline-offset: 3px; }
@keyframes voice-feature-in { from { opacity: .3; translate: 20px 0; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 760px) {
.service-gateway { padding: 68px 0 76px; }
.service-gateway-heading,
.flow-journey-heading,
.voice-showcase-heading { width: calc(100% - 36px); margin-right: auto; margin-left: auto; }
.service-gateway-heading h2,
.flow-journey-heading h2,
.voice-showcase-heading h2 { font-size: 29px; }
.service-gateway-stage { width: calc(100% - 24px); height: 610px; border-radius: 25px; }
.service-gateway-stage::after { background: linear-gradient(0deg, rgb(8 18 34 / 88%) 0, rgb(8 18 34 / 52%) 53%, transparent 86%); }
.service-gateway-stage > img { object-position: 58% center; }
.service-gateway-copy { top: auto; right: 23px; bottom: 113px; left: 23px; width: auto; translate: 0 0; }
.service-gateway-copy h3 { margin: 9px 0 13px; font-size: 32px; line-height: 1.45; }
.service-gateway-copy p { font-size: 12.5px; line-height: 1.8; }
.service-gateway-copy a { min-height: 50px; margin-top: 19px; font-size: 12px; }
.service-gateway-tabs { width: calc(100% - 42px); margin-top: -83px; gap: 7px; }
.service-gateway-tabs button { min-height: 82px; grid-template-columns: 28px 1fr 18px; border-radius: 17px; padding: 0 12px; }
.service-gateway-tabs button small { font-size: 9px; }
.service-gateway-tabs button span { font-size: 12px; line-height: 1.45; }
.service-gateway-tabs button b { font-size: 16px; }
.service-switcher {
background:
linear-gradient(180deg, rgb(6 18 38 / 82%) 0%, rgb(6 18 38 / 68%) 100%),
url("../images/service-learning-women.webp") 52% center / cover no-repeat;
}
.service-switcher-head p { color: rgb(255 255 255 / 78%); }
.flow-journey { padding: 70px 0 76px; }
.flow-journey::after { top: 36px; right: -15px; font-size: 67px; }
.flow-step-tabs { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 16px; padding: 2px 18px 12px; scroll-padding-left: 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.flow-step-tabs::-webkit-scrollbar { display: none; }
.flow-step-tabs button { min-width: 135px; min-height: 60px; flex: 0 0 auto; border-radius: 14px; padding: 0 13px; scroll-snap-align: start; }
.flow-step-tabs button span { font-size: 11px; }
.flow-active { width: calc(100% - 36px); min-height: 0; grid-template-columns: 1fr; grid-template-rows: 275px auto; border-radius: 24px; }
.flow-active figure { min-height: 275px; }
.flow-active > div { min-height: 330px; padding: 29px 23px 27px; }
.flow-active h3 { margin: 10px 0 13px; font-size: 27px; }
.flow-active p { font-size: 12.5px; line-height: 1.85; }
.flow-active button,
.flow-active a { min-height: 50px; margin-top: 22px; font-size: 12px; }
.voice-showcase { padding: 70px 0 82px; }
.voice-showcase::before { top: 16px; left: -4px; font-size: 160px; }
.voice-feature { width: calc(100% - 24px); min-height: 0; grid-template-columns: 1fr; grid-template-rows: 360px auto; border-radius: 25px; }
.voice-feature figure { min-height: 360px; }
.voice-feature > div { min-height: 410px; padding: 37px 25px 29px; }
.voice-mark { top: 12px; left: 17px; font-size: 100px; }
.voice-feature h3 { font-size: 26px; line-height: 1.55; }
.voice-feature p { font-size: 12.5px; line-height: 1.85; }
.voice-feature a { margin-top: 27px; font-size: 12px; }
.voice-selectors { display: flex; gap: 8px; overflow-x: auto; margin: -25px 0 0; padding: 0 18px 22px; scroll-padding-left: 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.voice-selectors::-webkit-scrollbar { display: none; }
.voice-selectors button { min-width: 218px; min-height: 88px; flex: 0 0 auto; grid-template-columns: 59px 1fr; scroll-snap-align: start; }
.voice-selectors img { width: 59px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
.service-gateway-stage,
.service-gateway-stage > img,
.service-gateway-tabs button,
.flow-step-tabs button,
.flow-active,
.voice-feature,
.voice-selectors button { animation: none; transition: none; }
}
.service-gateway { background: linear-gradient(135deg, #fff 0%, #fff7f1 70%, #ffe9dc 100%); }
.service-gateway::after {
position: absolute;
bottom: 72px;
left: -90px;
width: 350px;
height: 130px;
border: 28px solid rgb(255 92 50 / 9%);
border-right-color: transparent;
border-radius: 50%;
content: "";
rotate: -12deg;
}
.service-gateway-stage {
height: 560px;
border-radius: 110px 28px 110px 28px;
background: #fff;
box-shadow: 0 32px 72px rgb(94 49 28 / 12%);
}
.service-gateway-stage::after {
z-index: 1;
background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 98%) 37%, rgb(255 255 255 / 62%) 53%, transparent 72%);
}
.service-gateway-stage > img { position: absolute; right: 0; width: 64%; object-position: center; clip-path: ellipse(74% 92% at 76% 50%); }
.service-gateway-copy { z-index: 2; left: 56px; width: min(470px, 43%); color: var(--ink); }
.service-gateway-copy > span { color: var(--orange); }
.service-gateway-copy h3 { font-size: clamp(36px, 4vw, 55px); }
.service-gateway-copy p { color: #4d5661; }
.service-gateway-copy a { background: var(--orange); color: #fff; }
.service-gateway-copy a:hover { background: var(--orange-deep); }
.service-gateway-tabs { width: min(70%, 780px); margin-top: -42px; margin-right: 4%; }
.service-gateway-tabs button { border-radius: 999px; box-shadow: 0 14px 35px rgb(77 41 23 / 13%); }
.service-gateway-tabs button.is-active { background: var(--ink); }
.service-switcher { padding-top: 86px; padding-bottom: 96px; }
.service-switcher-inner { display: block; }
.service-switcher-head { width: min(100%, 820px); margin: 0 auto 27px; text-align: center; }
.service-switcher-head h2 br { display: none; }
.service-tablist {
display: grid;
width: min(100%, 850px);
margin: 0 auto 22px;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.service-tablist button {
min-height: 64px;
grid-template-columns: 35px 1fr 22px;
border-radius: 16px;
padding: 0 18px;
background: rgb(255 255 255 / 16%);
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
}
.service-tablist button:hover { translate: 0 -4px; }
.service-tablist button.is-active { box-shadow: 0 14px 32px rgb(115 32 9 / 23%); }
.service-active-panel {
width: min(100%, 1080px);
min-height: 500px;
margin: 0 auto;
grid-template-columns: .88fr 1.12fr;
grid-template-rows: 1fr;
border-radius: 46px 18px 46px 18px;
background: rgb(255 255 255 / 93%);
box-shadow: 0 30px 75px rgb(3 10 25 / 25%);
backdrop-filter: blur(13px);
}
.service-active-panel figure { height: 100%; min-height: 500px; }
.service-active-panel > div { display: flex; flex-direction: column; justify-content: center; padding: 43px 48px; }
.service-active-panel a { margin-top: auto; }
.flow-journey { background: linear-gradient(180deg, #fff 0%, #fff8f2 100%); }
.flow-journey::after { content: "LEARN  TO  WORK"; font-size: clamp(48px, 7vw, 96px); }
.flow-step-tabs {
position: relative;
align-items: start;
margin-bottom: 31px;
gap: 0;
}
.flow-step-tabs::before {
position: absolute;
z-index: -1;
top: 28px;
right: 9%;
left: 9%;
height: 5px;
border-radius: 99px;
background: repeating-linear-gradient(90deg, #ffbca6 0 17px, transparent 17px 27px);
content: "";
}
.flow-step-tabs button {
display: flex;
min-height: 104px;
flex-direction: column;
gap: 10px;
justify-content: flex-start;
border-radius: 0;
padding: 0 8px;
background: transparent;
text-align: center;
}
.flow-step-tabs button small {
display: grid;
width: 60px;
height: 60px;
place-items: center;
border-radius: 50%;
background: #fff;
box-shadow: 0 10px 25px rgb(86 45 27 / 12%);
color: var(--orange);
font-size: 12px;
transition: background .3s ease, color .3s ease, scale .25s ease;
}
.flow-step-tabs button span { max-width: 150px; font-size: 12px; }
.flow-step-tabs button:hover { translate: 0 0; }
.flow-step-tabs button:hover small { scale: 1.08; }
.flow-step-tabs button.is-active { background: transparent; color: var(--ink); }
.flow-step-tabs button.is-active small { background: var(--orange); box-shadow: 0 12px 29px rgb(191 55 12 / 27%); color: #fff; scale: 1.12; }
.flow-active {
grid-template-columns: 1fr .82fr;
border-radius: 95px 28px 95px 28px;
background: #fff;
box-shadow: 0 25px 65px rgb(94 48 26 / 12%);
color: var(--ink);
}
.flow-active figure { border-radius: 0 90px 90px 0; }
.flow-active > div { background: linear-gradient(145deg, #fff0e5, #fff9f5); }
.flow-active > div > span { color: var(--orange); opacity: 1; }
.flow-active p { color: #525a64; }
.flow-active button,
.flow-active a { background: var(--orange); color: #fff; }
.story-collage {
position: relative;
overflow: hidden;
padding: 92px max(32px, calc((100vw - 1220px) / 2)) 110px;
background: #0d1b31;
color: #fff;
}
.story-collage::before {
position: absolute;
top: -160px;
right: -110px;
width: 430px;
height: 430px;
border: 70px solid rgb(255 106 64 / 14%);
border-radius: 50%;
content: "";
}
.story-collage-heading {
position: relative;
z-index: 2;
display: grid;
max-width: 1220px;
margin: 0 auto 42px;
grid-template-columns: 1fr auto;
align-items: end;
}
.story-collage-heading > span { grid-column: 1 / -1; margin-bottom: 8px; color: #ff8f6c; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.story-collage-heading h2 { margin: 0; font-size: clamp(30px, 3vw, 44px); line-height: 1.45; }
.story-collage-heading > div { display: grid; gap: 14px; justify-items: end; }
.story-collage-heading p { margin: 0; color: rgb(255 255 255 / 67%); font-size: 12px; line-height: 1.8; text-align: right; }
.story-collage-heading a { border-bottom: 1px solid rgb(255 255 255 / 34%); padding-bottom: 7px; font-size: 12px; font-weight: 850; }
.story-collage-heading a b { margin-left: 17px; color: #ff8f6c; }
.story-collage-grid {
position: relative;
z-index: 1;
display: grid;
max-width: 1220px;
min-height: 610px;
margin: 0 auto;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 280px 250px;
gap: 18px;
}
.story-collage-grid figure { position: relative; margin: 0; overflow: hidden; border-radius: 24px; animation: cuel-photo-float 7s ease-in-out infinite; }
.story-collage-grid figure:nth-child(1) { grid-column: 1 / 5; grid-row: 1; }
.story-collage-grid figure:nth-child(2) { grid-column: 5 / 9; grid-row: 1; margin-top: 38px; animation-delay: -1.2s; }
.story-collage-grid figure:nth-child(3) { grid-column: 9 / 13; grid-row: 1; animation-delay: -2.4s; }
.story-collage-grid figure:nth-child(4) { grid-column: 2 / 6; grid-row: 2; animation-delay: -3.1s; }
.story-collage-grid figure:nth-child(5) { grid-column: 6 / 10; grid-row: 2; margin-top: -6px; animation-delay: -4.2s; }
.story-collage-grid figure:nth-child(6) { grid-column: 10 / 13; grid-row: 2; margin-top: 28px; animation-delay: -5.2s; }
.story-collage-grid img { width: 100%; height: 100%; object-fit: cover; transition: scale .65s ease; }
.story-collage-grid figure:hover img { scale: 1.06; }
.story-collage-grid figure span { position: absolute; right: 14px; bottom: 11px; font-size: 10px; font-weight: 900; text-shadow: 0 2px 9px #000; }
@keyframes cuel-photo-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.qllink-float { width: 236px; min-height: 66px; border-radius: 999px 14px 14px 999px; }
@media (max-width: 760px) {
.service-gateway { background: linear-gradient(180deg, #fff, #fff3ea); }
.service-gateway::after { bottom: 25px; left: -130px; }
.service-gateway-stage { height: 620px; border-radius: 72px 18px 72px 18px; background: #fff; }
.service-gateway-stage::after { background: linear-gradient(0deg, #fff 0%, rgb(255 255 255 / 96%) 40%, rgb(255 255 255 / 18%) 72%, transparent 100%); }
.service-gateway-stage > img { top: 0; width: 100%; height: 62%; clip-path: ellipse(80% 100% at 62% 0%); object-position: center; }
.service-gateway-copy { right: 23px; bottom: 104px; left: 23px; color: var(--ink); }
.service-gateway-copy > span { color: var(--orange); }
.service-gateway-copy h3 { font-size: 30px; }
.service-gateway-copy p { color: #505862; }
.service-gateway-tabs { width: calc(100% - 42px); margin: -72px auto 0; }
.service-switcher { padding-top: 66px; }
.service-switcher-head { text-align: left; }
.service-switcher-head h2 br { display: initial; }
.service-tablist { display: flex; width: auto; margin: 0 0 18px; padding-bottom: 13px; }
.service-tablist button { border-radius: 14px; }
.service-active-panel { grid-template-columns: 1fr; grid-template-rows: 250px auto; border-radius: 34px 14px 34px 14px; }
.service-active-panel figure { min-height: 250px; }
.flow-step-tabs::before { top: 27px; right: 30px; left: 30px; }
.flow-step-tabs button { min-width: 105px; min-height: 96px; padding: 0 5px; }
.flow-step-tabs button small { width: 54px; height: 54px; }
.flow-active { grid-template-rows: 270px auto; border-radius: 50px 16px 50px 16px; }
.flow-active figure { border-radius: 0 0 46px 0; }
.story-collage { padding: 70px 0 78px; }
.story-collage-heading { width: calc(100% - 36px); margin-bottom: 30px; grid-template-columns: 1fr; }
.story-collage-heading h2 { font-size: 28px; }
.story-collage-heading > div { margin-top: 18px; justify-items: start; }
.story-collage-heading p { text-align: left; }
.story-collage-grid { width: calc(100% - 24px); min-height: 780px; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 240px); gap: 10px; }
.story-collage-grid figure:nth-child(n) { grid-column: auto; grid-row: auto; margin: 0; border-radius: 17px; }
.story-collage-grid figure:nth-child(2),
.story-collage-grid figure:nth-child(5) { translate: 0 18px; }
.qllink-float { width: auto; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.story-collage-grid figure { animation: none; }
}
.course-shelf {
position: relative;
overflow: hidden;
padding: 102px 0 112px;
background: #fff;
}
.course-shelf::before,
.course-shelf::after {
position: absolute;
pointer-events: none;
content: "";
}
.course-shelf::before {
top: 86px;
right: 5%;
width: 76px;
height: 76px;
background: rgb(255 105 61 / 18%);
clip-path: polygon(50% 0, 94% 25%, 84% 82%, 27% 100%, 0 48%);
animation: cuel-shape-drift 8s ease-in-out infinite, cuel-shape-color 12s ease-in-out infinite;
}
.course-shelf::after {
bottom: 54px;
left: 7%;
width: 42px;
height: 42px;
border: 8px solid rgb(255 105 61 / 20%);
border-radius: 50%;
animation: cuel-shape-drift-alt 10s ease-in-out infinite;
}
.course-shelf-heading {
position: relative;
z-index: 1;
display: grid;
width: min(calc(100% - 64px), 1220px);
margin: 0 auto 32px;
grid-template-columns: 1fr auto;
align-items: end;
gap: 32px;
}
.course-shelf-heading span {
color: var(--orange);
font-size: 11px;
font-weight: 900;
letter-spacing: .2em;
}
.course-shelf-heading h2 {
margin: 10px 0 0;
font-size: clamp(32px, 3.25vw, 46px);
letter-spacing: .035em;
line-height: 1.42;
}
.course-shelf-heading p {
margin: 0 0 7px;
color: #66707b;
font-size: 13px;
font-weight: 650;
line-height: 1.9;
}
.course-filter {
position: relative;
z-index: 1;
display: flex;
width: min(calc(100% - 64px), 1220px);
margin: 0 auto 27px;
gap: 8px;
}
.course-filter button {
min-width: 100px;
min-height: 42px;
border: 1px solid #e7e5e2;
border-radius: 999px;
padding: 0 20px;
background: #fff;
color: #5b626c;
font-size: 12px;
font-weight: 850;
cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease, translate .25s ease;
}
.course-filter button:hover { translate: 0 -2px; }
.course-filter button.is-active { border-color: var(--orange); background: var(--orange); color: #fff; }
.course-filter button:focus-visible { outline: 3px solid #ffb59f; outline-offset: 3px; }
.course-viewport {
position: relative;
z-index: 1;
overflow-x: auto;
padding: 0 max(32px, calc((100vw - 1220px) / 2)) 34px;
scroll-padding-left: max(32px, calc((100vw - 1220px) / 2));
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(
to right,
#000 0 calc(100% - clamp(96px, 28vw, 430px)),
rgb(0 0 0 / 62%) calc(100% - clamp(52px, 15vw, 240px)),
rgb(0 0 0 / 18%) calc(100% - clamp(18px, 5vw, 90px)),
transparent 100%
);
mask-image: linear-gradient(
to right,
#000 0 calc(100% - clamp(96px, 28vw, 430px)),
rgb(0 0 0 / 62%) calc(100% - clamp(52px, 15vw, 240px)),
rgb(0 0 0 / 18%) calc(100% - clamp(18px, 5vw, 90px)),
transparent 100%
);
}
.course-viewport::-webkit-scrollbar { display: none; }
.course-track {
display: flex;
width: max-content;
gap: 17px;
animation: course-filter-in .45s cubic-bezier(.2,.7,.2,1) both;
}
.course-card {
position: relative;
display: grid;
width: 300px;
min-height: 440px;
grid-template-rows: 208px 1fr;
overflow: hidden;
border: 1px solid rgb(21 34 51 / 8%);
border-radius: 28px 12px 28px 12px;
background: var(--course-bg, #fff6ef);
box-shadow: 0 17px 45px rgb(71 45 31 / 9%);
scroll-snap-align: start;
transition: translate .35s ease, box-shadow .35s ease;
}
.course-card:hover { translate: 0 -8px; box-shadow: 0 25px 55px rgb(71 45 31 / 15%); }
.course-card.is-coral { --course-bg: #fff0e8; }
.course-card.is-cream { --course-bg: #fff8e8; }
.course-card.is-lavender { --course-bg: #f4f0ff; }
.course-card.is-navy { --course-bg: #eef3fa; }
.course-card.is-mint { --course-bg: #edf8f3; }
.course-card.is-peach { --course-bg: #fff3ee; }
.course-card figure { position: relative; margin: 0; overflow: hidden; }
.course-card figure::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgb(7 19 36 / 34%), transparent 55%); content: ""; }
.course-card figure img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s ease; }
.course-card:hover figure img { scale: 1.045; }
.course-card figure span {
position: absolute;
z-index: 2;
bottom: 14px;
left: 15px;
border-radius: 999px;
padding: 7px 12px;
background: rgb(255 255 255 / 91%);
color: var(--orange);
font-size: 10px;
font-weight: 900;
backdrop-filter: blur(8px);
}
.course-card > div { display: flex; flex-direction: column; padding: 22px 22px 19px; }
.course-card > div > small { color: var(--orange); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.course-card h3 { margin: 9px 0 10px; font-size: 21px; letter-spacing: .035em; line-height: 1.5; }
.course-card p { margin: 0; color: #59616a; font-size: 12px; font-weight: 600; line-height: 1.85; }
.course-card footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; border-top: 1px solid rgb(18 34 52 / 10%); padding-top: 15px; }
.course-card footer span { font-size: 11px; font-weight: 850; }
.course-card footer b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #fff; color: var(--orange); }
.course-all {
display: flex;
width: min(calc(100% - 64px), 1220px);
align-items: center;
justify-content: flex-start;
gap: 16px;
margin: 4px auto 0;
color: var(--ink);
font-size: 12px;
font-weight: 850;
}
.course-all span { color: var(--orange); font-size: 18px; }
.story-collage {
padding: 94px 0 108px;
background:
radial-gradient(circle at 88% 12%, rgb(255 128 85 / 18%) 0 150px, transparent 360px),
linear-gradient(145deg, #304359 0%, #3f5369 58%, #586777 100%);
}
.story-collage::before {
top: -150px;
right: -130px;
border-color: rgb(255 119 77 / 13%);
animation: story-ring-breathe 9s ease-in-out infinite;
}
.story-collage::after {
position: absolute;
bottom: 62px;
left: 5%;
width: 58px;
height: 58px;
background: rgb(183 163 255 / 14%);
clip-path: polygon(50% 0, 100% 31%, 82% 90%, 23% 100%, 0 40%);
content: "";
animation: cuel-shape-drift-alt 11s ease-in-out infinite;
}
.story-collage-heading {
display: block;
width: min(calc(100% - 64px), 1220px);
margin-bottom: 47px;
}
.story-collage-heading > .story-display {
display: block;
margin: 0 0 24px;
transform: scale(.72);
transform-origin: left center;
opacity: 0;
color: #ff8a66;
font-size: clamp(45px, 8vw, 112px);
font-weight: 900;
letter-spacing: -.035em;
line-height: .9;
transition: transform 1s cubic-bezier(.18,.75,.18,1), opacity .8s ease;
}
.story-collage.is-visible .story-display { transform: scale(1); opacity: 1; }
.story-heading-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
.story-heading-copy h2 { margin: 0; font-size: clamp(29px, 3vw, 44px); line-height: 1.48; }
.story-heading-copy > div { display: grid; justify-items: end; gap: 14px; }
.story-heading-copy p { margin: 0; color: rgb(255 255 255 / 67%); font-size: 12px; line-height: 1.9; text-align: right; }
.story-heading-copy a { border-bottom: 1px solid rgb(255 255 255 / 32%); padding-bottom: 7px; font-size: 12px; font-weight: 850; }
.story-heading-copy a b { margin-left: 17px; color: #ff8f6c; }
.story-stream { position: relative; z-index: 2; display: grid; gap: 18px; }
.story-lane { overflow: hidden; }
.story-track {
display: flex;
width: max-content;
gap: 18px;
padding-left: 18px;
animation: story-flow 38s linear infinite;
}
.story-lane.is-reverse .story-track { animation-direction: reverse; animation-duration: 44s; }
.story-stream:hover .story-track { animation-play-state: paused; }
.story-card {
position: relative;
width: min(43vw, 470px);
height: 260px;
flex: 0 0 auto;
margin: 0;
overflow: hidden;
border-radius: 30px 10px 30px 10px;
background: #22314a;
box-shadow: 0 17px 40px rgb(0 0 0 / 24%);
}
.story-lane:nth-child(2) .story-card { border-radius: 10px 30px 10px 30px; }
.story-card::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 15 29 / 85%) 0, rgb(5 15 29 / 48%) 55%, transparent 100%); content: ""; }
.story-card img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s ease; }
.story-card:hover img { scale: 1.055; }
.story-card figcaption {
position: absolute;
z-index: 2;
top: 50%;
left: 24px;
display: grid;
width: 58%;
translate: 0 -50%;
}
.story-quote-mark { height: 37px; color: #ff744c; font-family: Georgia, serif; font-size: 65px; line-height: 1; }
.story-card strong { font-size: 15px; letter-spacing: .035em; line-height: 1.75; }
.story-card small { margin-top: 12px; color: rgb(255 255 255 / 63%); font-size: 10px; font-weight: 750; }
.flow-journey::before {
position: absolute;
top: 14%;
left: 4%;
width: 54px;
height: 54px;
background: rgb(255 133 94 / 14%);
clip-path: polygon(23% 0, 100% 18%, 84% 82%, 29% 100%, 0 48%);
content: "";
animation: cuel-shape-drift 9s ease-in-out infinite;
}
.flow-journey > * { position: relative; z-index: 1; }
@keyframes course-filter-in { from { opacity: .25; translate: 20px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes story-flow { to { transform: translateX(calc(-50% - 9px)); } }
@keyframes story-ring-breathe { 0%, 100% { transform: scale(.93); opacity: .75; } 50% { transform: scale(1.07); opacity: 1; } }
@keyframes cuel-shape-drift {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(12px, -16px, 0) rotate(13deg); }
}
@keyframes cuel-shape-drift-alt {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(-10px, 14px, 0) rotate(-15deg); }
}
@keyframes cuel-shape-color {
0%, 100% { background-color: rgb(255 105 61 / 18%); }
50% { background-color: rgb(183 163 255 / 20%); }
}
@media (max-width: 760px) {
.course-shelf { padding: 72px 0 78px; }
.course-shelf::before { top: 60px; right: -12px; width: 58px; height: 58px; }
.course-shelf-heading { width: calc(100% - 36px); margin-bottom: 24px; grid-template-columns: 1fr; gap: 13px; }
.course-shelf-heading h2 { font-size: 29px; }
.course-shelf-heading p { font-size: 12px; }
.course-filter { width: auto; overflow-x: auto; margin: 0 0 22px; padding: 0 18px 3px; scrollbar-width: none; }
.course-filter::-webkit-scrollbar { display: none; }
.course-filter button { min-width: 82px; min-height: 40px; padding: 0 16px; }
.course-viewport { padding: 0 18px 29px; scroll-padding-left: 18px; }
.course-card { width: min(78vw, 310px); min-height: 426px; grid-template-rows: 198px 1fr; }
.course-all { width: calc(100% - 36px); }
.story-collage { padding: 72px 0 82px; }
.story-collage-heading { width: calc(100% - 36px); margin-bottom: 31px; }
.story-collage-heading > .story-display { margin-bottom: 20px; font-size: clamp(43px, 15vw, 70px); line-height: .95; }
.story-heading-copy { grid-template-columns: 1fr; gap: 18px; }
.story-heading-copy h2 { font-size: 26px; }
.story-heading-copy > div { justify-items: start; }
.story-heading-copy p { text-align: left; }
.story-stream { gap: 12px; }
.story-track { gap: 12px; padding-left: 12px; animation-duration: 30s; }
.story-lane.is-reverse .story-track { animation-duration: 35s; }
.story-card { width: 315px; height: 205px; border-radius: 22px 8px 22px 8px; }
.story-card figcaption { left: 18px; width: 66%; }
.story-quote-mark { height: 29px; font-size: 52px; }
.story-card strong { font-size: 12.5px; line-height: 1.7; }
.story-card small { margin-top: 8px; font-size: 9px; }
.flow-journey::before { left: -7px; width: 43px; height: 43px; }
}
@media (prefers-reduced-motion: reduce) {
.course-shelf::before,
.course-shelf::after,
.flow-journey::before,
.story-collage::before,
.story-collage::after,
.story-track { animation: none; }
.story-collage-heading > .story-display { transform: none; opacity: 1; }
}
.button-primary,
.desktop-nav .nav-cta,
.service-gateway-copy a,
.course-filter button.is-active,
.flow-step-tabs button.is-active small,
.flow-active button,
.flow-active a,
.qllink-float {
background: var(--orange-gloss);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 44%),
inset 0 -1px 0 rgb(154 40 6 / 19%),
0 12px 28px rgb(222 67 25 / 22%);
}
.stats-band {
background:
radial-gradient(circle at 18% -75%, rgb(255 255 255 / 38%) 0 22%, transparent 43%),
linear-gradient(120deg, #ff8055 0%, #ff6338 43%, #e94a24 100%);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 48%),
inset 0 -2px 0 rgb(133 35 9 / 17%);
}
.mobile-bridge-cta {
background:
radial-gradient(circle at 20% 0%, rgb(255 255 255 / 25%), transparent 33%),
var(--orange-gloss);
}
.story-collage { padding-bottom: 92px; }
.story-collage::before { animation: none; }
.story-stream { display: block; }
.story-lane { padding: 4px 0 18px; }
.story-track {
gap: 14px;
padding-left: 14px;
animation-duration: 48s;
}
.story-card {
display: grid;
width: 352px;
height: 132px;
grid-template-columns: 112px 1fr;
border: 1px solid rgb(255 255 255 / 13%);
border-radius: 20px 7px 20px 7px;
background: rgb(255 255 255 / 8%);
box-shadow: 0 12px 28px rgb(0 0 0 / 16%);
backdrop-filter: blur(8px);
}
.story-card::after { display: none; }
.story-card img {
width: 112px;
height: 132px;
object-fit: cover;
}
.story-card figcaption {
position: static;
display: flex;
width: auto;
flex-direction: column;
justify-content: center;
padding: 15px 17px;
translate: 0 0;
}
.story-number {
margin-bottom: 7px;
color: #ff956f;
font-size: 9px;
font-weight: 900;
letter-spacing: .16em;
}
.story-card strong { font-size: 11.5px; letter-spacing: .02em; line-height: 1.65; }
.story-card small { margin-top: 7px; font-size: 8.5px; }
.reasons + .news { margin-top: 34px; margin-bottom: 34px; }
@media (max-width: 760px) {
.story-collage { padding-bottom: 72px; }
.story-lane { padding-bottom: 10px; }
.story-track { gap: 10px; padding-left: 10px; animation-duration: 40s; }
.story-card {
width: 286px;
height: 112px;
grid-template-columns: 88px 1fr;
border-radius: 16px 6px 16px 6px;
}
.story-card img { width: 88px; height: 112px; }
.story-card figcaption { padding: 11px 12px; }
.story-number { margin-bottom: 5px; font-size: 8px; }
.story-card strong { font-size: 10.5px; line-height: 1.55; }
.story-card small { margin-top: 5px; font-size: 8px; }
.reasons + .news { margin-top: 18px; margin-bottom: 18px; }
}
.hero-copy h1 { margin-top: 0; }
.section-kicker {
display: inline-block;
width: max-content;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
background: transparent !important;
color: var(--orange) !important;
font-size: 10px !important;
font-weight: 900 !important;
letter-spacing: .2em !important;
line-height: 1.2 !important;
}
.service-switcher .section-kicker,
.story-collage .section-kicker { color: #ff9a78 !important; }
.faq-section .section-kicker { color: #fff !important; }
.story-voice-hub {
padding-top: 105px;
padding-bottom: 112px;
}
.story-voice-hub .story-collage-heading {
width: min(calc(100% - 64px), 1160px);
margin-bottom: 40px;
}
.story-kicker { margin-bottom: 18px; }
.story-voice-hub .story-display {
margin-bottom: 24px;
font-size: clamp(42px, 5.2vw, 76px);
background: linear-gradient(
100deg,
#ff8a66 0%,
#ff8a66 44%,
#ffbfa8 47.5%,
#fff 49.6%,
#fff 50.4%,
#ffbfa8 52.5%,
#ff8a66 56%,
#ff8a66 100%
);
-webkit-background-clip: text;
background-clip: text;
background-size: 300% 100%;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 16px rgb(255 122 84 / 26%));
animation: story-display-shine 5.4s cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes story-display-shine {
0%, 14% { background-position: 134% 0; }
42%, 100% { background-position: -34% 0; }
}
@media (prefers-reduced-motion: reduce) {
.story-voice-hub .story-display { animation: none; }
}
.story-voice-hub .story-heading-copy {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 48px;
}
.story-voice-hub .story-heading-copy p {
margin: 0 0 7px;
color: rgb(255 255 255 / 66%);
font-size: 12px;
font-weight: 650;
line-height: 1.9;
text-align: right;
}
.story-feature {
position: relative;
z-index: 2;
display: grid;
width: min(calc(100% - 64px), 1160px);
min-height: 540px;
margin: 0 auto 42px;
grid-template-columns: .94fr 1.06fr;
overflow: hidden;
border-radius: 72px 22px 72px 22px;
background: #fff8f2;
box-shadow: 0 30px 70px rgb(8 20 34 / 18%);
color: var(--ink);
animation: story-feature-in .48s cubic-bezier(.2,.75,.2,1) both;
}
.story-feature figure {
position: relative;
min-height: 540px;
margin: 0;
overflow: hidden;
}
.story-feature figure::after {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgb(8 20 36 / 45%), transparent 46%);
content: "";
}
.story-feature figure img { width: 100%; height: 100%; object-fit: cover; }
.story-feature figure > span {
position: absolute;
z-index: 2;
right: 24px;
bottom: 20px;
color: #fff;
font-size: 10px;
font-weight: 900;
letter-spacing: .18em;
}
.story-feature > div {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 52px 58px;
}
.story-feature-mark {
position: absolute;
top: 19px;
left: 35px;
color: rgb(255 92 50 / 13%);
font-family: Georgia, serif;
font-size: 135px;
line-height: 1;
}
.story-feature > div > small {
position: relative;
color: var(--orange);
font-size: 10px;
font-weight: 900;
letter-spacing: .2em;
}
.story-feature h3 {
position: relative;
margin: 15px 0 20px;
font-size: clamp(27px, 3vw, 40px);
letter-spacing: .035em;
line-height: 1.52;
}
.story-feature p {
position: relative;
margin: 0;
color: #4e5863;
font-size: 13px;
font-weight: 650;
line-height: 2;
}
.story-feature > div > strong { margin-top: 21px; font-size: 11px; }
.story-feature a {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 31px;
border-top: 1px solid rgb(20 34 49 / 13%);
padding-top: 17px;
font-size: 12px;
font-weight: 850;
}
.story-feature a b { color: var(--orange); font-size: 17px; }
.story-stream-heading {
position: relative;
z-index: 2;
display: flex;
width: min(calc(100% - 64px), 1160px);
align-items: center;
justify-content: space-between;
gap: 24px;
margin: 0 auto 15px;
}
.story-stream-heading p { margin: 0; color: rgb(255 255 255 / 60%); font-size: 10px; line-height: 1.7; }
.story-stream-heading button {
display: flex;
min-height: 36px;
align-items: center;
gap: 11px;
border: 1px solid rgb(255 255 255 / 22%);
border-radius: 999px;
padding: 0 14px;
background: transparent;
color: #fff;
font-size: 9px;
font-weight: 850;
cursor: pointer;
}
.story-stream-heading button span { color: #ff9a78; font-size: 10px; }
.story-voice-hub .story-stream { overflow: hidden; }
.story-voice-hub .story-lane { overflow: hidden; padding: 0 0 10px; }
.story-voice-hub .story-track {
display: flex;
width: max-content;
gap: 12px;
padding-left: 12px;
animation: story-flow-rtl 44s linear infinite;
will-change: transform;
}
.story-stream.is-paused .story-track { animation-play-state: paused; }
.story-voice-hub .story-card {
display: grid;
width: 302px;
height: 104px;
flex: 0 0 auto;
grid-template-columns: 82px 1fr;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 13%);
border-radius: 17px 6px 17px 6px;
padding: 0;
background: rgb(255 255 255 / 11%);
box-shadow: none;
color: #fff;
text-align: left;
cursor: pointer;
backdrop-filter: blur(8px);
transition: border-color .25s ease, background .25s ease, translate .25s ease;
}
.story-voice-hub .story-card:hover,
.story-voice-hub .story-card.is-active {
border-color: rgb(255 139 100 / 70%);
background: rgb(255 255 255 / 14%);
translate: 0 -3px;
}
.story-voice-hub .story-card:focus-visible { outline: 3px solid #ff9a78; outline-offset: 3px; }
.story-voice-hub .story-card img { width: 82px; height: 104px; object-fit: cover; }
.story-voice-hub .story-card > span { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 11px 13px; }
.story-voice-hub .story-card small { margin: 0 0 7px; color: #ff9a78; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.story-voice-hub .story-card strong { display: -webkit-box; overflow: hidden; font-size: 10.5px; letter-spacing: .015em; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@keyframes story-feature-in { from { opacity: .35; translate: 20px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes story-flow-rtl { to { transform: translateX(calc(-50% - 6px)); } }
.reasons {
position: relative;
overflow: hidden;
padding-top: 94px;
padding-bottom: 112px;
}
.reasons::before {
position: absolute;
z-index: 0;
top: 20px;
left: 50%;
color: rgb(255 92 50 / 7%);
content: "WHY Cuel?";
font-size: clamp(62px, 10vw, 135px);
font-weight: 900;
letter-spacing: -.055em;
line-height: 1;
white-space: nowrap;
transform: translateX(-50%);
}
.reasons::after {
position: absolute;
z-index: 0;
top: 55px;
right: 5%;
width: 48px;
height: 48px;
border-radius: 15px 4px 15px 4px;
background: var(--orange-gloss);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 12px 24px rgb(220 68 24 / 17%);
content: "";
rotate: 12deg;
}
.reasons .section-title,
.reason-intro,
.reasons .reason-grid { position: relative; z-index: 1; }
.reason-intro {
margin: 29px auto 22px;
color: #616873;
font-size: 12px;
font-weight: 650;
line-height: 1.9;
text-align: center;
}
.reasons .reason-grid {
display: grid;
grid-template-columns: 1.08fr .92fr .92fr 1.08fr;
gap: 14px;
border: 0;
padding: 14px 0 22px;
background: transparent;
}
.reasons .reason-grid article {
position: relative;
min-height: 360px;
overflow: hidden;
border: 1px solid rgb(255 92 50 / 12%);
border-radius: 28px 9px 28px 9px;
padding: 27px 21px 20px;
background: rgb(255 255 255 / 95%);
box-shadow: 0 17px 36px rgb(78 43 25 / 9%);
}
.reasons .reason-grid article + article { border-left: 1px solid rgb(255 92 50 / 12%); }
.reasons .reason-grid article:nth-child(even) { translate: 0 18px; border-radius: 9px 28px 9px 28px; }
.reason-number {
position: absolute;
top: 9px;
right: 14px;
color: rgb(255 92 50 / 12%);
font-size: 47px;
font-weight: 900;
letter-spacing: -.06em;
line-height: 1;
}
.reasons .reason-title { position: relative; z-index: 1; min-height: 45px; padding-right: 30px; }
.reasons .reason-title h3 { font-size: 14px; line-height: 1.5; }
.reasons .reason-grid article > p { min-height: 86px; margin: 15px 0 18px; font-size: 11px; line-height: 1.85; }
.reasons .reason-grid img { width: 100%; height: 150px; border-radius: 18px 5px 18px 5px; object-fit: cover; }
@media (max-width: 900px) {
.reasons .reason-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.story-voice-hub { padding-top: 73px; padding-bottom: 78px; }
.story-voice-hub .story-collage-heading { width: calc(100% - 36px); margin-bottom: 28px; }
.story-kicker { margin-bottom: 13px; }
.story-voice-hub .story-display { margin-bottom: 20px; font-size: clamp(42px, 15vw, 68px); }
.story-voice-hub .story-heading-copy { grid-template-columns: 1fr; gap: 15px; }
.story-voice-hub .story-heading-copy h2 { font-size: 25px; }
.story-voice-hub .story-heading-copy p { text-align: left; }
.story-feature {
width: calc(100% - 24px);
min-height: 0;
margin-bottom: 30px;
grid-template-columns: 1fr;
grid-template-rows: 340px auto;
border-radius: 44px 13px 44px 13px;
}
.story-feature figure { min-height: 340px; }
.story-feature > div { min-height: 390px; padding: 35px 24px 29px; }
.story-feature-mark { top: 10px; left: 15px; font-size: 100px; }
.story-feature h3 { margin: 12px 0 16px; font-size: 24px; line-height: 1.55; }
.story-feature p { font-size: 12px; line-height: 1.85; }
.story-feature > div > strong { font-size: 10px; }
.story-feature a { margin-top: 25px; font-size: 11px; }
.story-stream-heading { width: calc(100% - 36px); align-items: flex-end; }
.story-stream-heading p { max-width: 210px; font-size: 9px; }
.story-stream-heading button { flex: 0 0 auto; padding: 0 11px; }
.story-voice-hub .story-track { animation-duration: 36s; }
.story-voice-hub .story-card { width: 270px; height: 96px; grid-template-columns: 74px 1fr; }
.story-voice-hub .story-card img { width: 74px; height: 96px; }
.story-voice-hub .story-card > span { padding: 9px 11px; }
.story-voice-hub .story-card strong { font-size: 10px; }
.reasons { padding-top: 76px; padding-bottom: 83px; }
.reasons::before { top: 25px; font-size: 57px; }
.reasons::after { top: 49px; right: 10px; width: 36px; height: 36px; }
.reason-intro { margin-top: 23px; font-size: 11px; }
.reasons .reason-grid { grid-template-columns: 1fr; gap: 11px; padding-top: 7px; }
.reasons .reason-grid article { min-height: 0; padding: 23px 19px 18px; }
.reasons .reason-grid article:nth-child(even) { translate: 0 0; }
.reasons .reason-grid article > p { min-height: 0; margin-bottom: 15px; font-size: 11.5px; }
.reasons .reason-grid img { height: 175px; }
}
@media (prefers-reduced-motion: reduce) {
.story-voice-hub .story-track,
.story-feature { animation: none; }
}
.news-motion {
position: relative;
display: grid;
min-height: 710px;
grid-template-columns: 255px minmax(0, 1fr);
gap: 36px;
isolation: isolate;
overflow: hidden;
border: 0;
border-radius: 48px 15px 48px 15px;
padding: 62px 56px 58px;
background:
radial-gradient(circle at 7% 88%, rgb(255 92 50 / 9%) 0 105px, transparent 106px),
radial-gradient(circle at 72% 48%, rgb(255 137 94 / 8%) 0 210px, transparent 211px),
linear-gradient(118deg, #fff8f3 0%, #fff 57%, #fff7f0 100%);
box-shadow: 0 24px 64px rgb(69 40 25 / 10%);
}
.news-motion::before {
position: absolute;
z-index: -1;
bottom: -92px;
left: -55px;
width: 285px;
height: 210px;
border: 34px solid rgb(255 92 50 / 6%);
border-radius: 50%;
content: "";
rotate: -18deg;
}
.news-motion::after {
position: absolute;
z-index: -1;
top: 35px;
right: 24px;
color: rgb(255 92 50 / 5%);
content: "Cuel NEWS";
font-size: clamp(52px, 8vw, 110px);
font-weight: 950;
letter-spacing: -.06em;
line-height: 1;
}
.news-motion-intro,
.news-motion-content { position: relative; z-index: 1; }
.news-motion-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 72px 0 24px;
}
.news-motion-intro h2 {
margin: 13px 0 22px;
font-size: clamp(32px, 3.25vw, 46px);
letter-spacing: -.045em;
line-height: 1.03;
}
.news-motion-intro p {
margin: 0;
color: #68707a;
font-size: 14px;
font-weight: 650;
line-height: 2;
}
.news-motion-intro > a {
display: flex;
min-width: 194px;
min-height: 52px;
align-items: center;
justify-content: space-between;
margin-top: auto;
border-radius: 999px;
padding: 0 20px;
background: var(--ink);
box-shadow: 0 13px 26px rgb(7 19 41 / 14%);
color: #fff;
font-size: 11px;
font-weight: 850;
}
.news-motion-intro > a span { color: #ff9a78; font-size: 17px; }
.news-motion-content { min-width: 0; }
.news-orbit-carousel {
position: relative;
min-height: 590px;
}
.news-orbit-path {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
border-radius: 50%;
background:
repeating-conic-gradient(from 8deg, rgb(255 92 50 / 72%) 0 4deg, transparent 4deg 12deg),
conic-gradient(from 90deg, transparent 0 16%, rgb(255 92 50 / 18%) 16% 50%, transparent 50% 72%, rgb(255 92 50 / 24%) 72% 100%);
mask: radial-gradient(circle, transparent 0 242px, #000 243px 250px);
opacity: .72;
translate: -50% -50%;
animation: news-path-spin 24s linear infinite;
}
.news-orbit-path::after {
position: absolute;
top: 11px;
left: 50%;
width: 14px;
height: 14px;
border: 3px solid #fff;
border-radius: 50%;
background: var(--orange-gloss);
box-shadow: 0 5px 13px rgb(225 69 24 / 30%);
content: "";
translate: -50% -50%;
}
.news-orbit-card {
--angle: 38deg;
--counter-angle: -38deg;
--card-scale: 1;
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
display: flex;
width: 300px;
min-height: 150px;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
border: 1px solid rgb(20 34 49 / 10%);
border-radius: 24px 8px 24px 8px;
padding: 22px 23px 19px;
background: rgb(255 255 255 / 94%);
box-shadow: 0 16px 38px rgb(66 42 29 / 10%);
color: var(--ink);
text-align: left;
cursor: pointer;
transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-220px) rotate(var(--counter-angle)) scale(var(--card-scale));
transform-origin: center;
transition: transform .9s cubic-bezier(.2,.72,.18,1), opacity .55s ease, box-shadow .3s ease, border-color .3s ease;
}
.news-orbit-card::after {
position: absolute;
top: -42px;
right: -26px;
width: 116px;
height: 92px;
border-radius: 50%;
background: linear-gradient(135deg, rgb(255 178 145 / 28%), rgb(255 92 50 / 5%));
content: "";
rotate: 24deg;
}
.news-orbit-card.is-position-0 {
--angle: 38deg;
--counter-angle: -38deg;
--card-scale: 1.04;
z-index: 5;
border-color: rgb(255 92 50 / 34%);
box-shadow: 0 23px 54px rgb(127 59 32 / 17%);
}
.news-orbit-card.is-position-1 {
--angle: 142deg;
--counter-angle: -142deg;
--card-scale: .9;
z-index: 4;
}
.news-orbit-card.is-position-2 {
--angle: 232deg;
--counter-angle: -232deg;
--card-scale: .84;
z-index: 3;
opacity: .78;
}
.news-orbit-card.is-position-3 {
--angle: 315deg;
--counter-angle: -315deg;
--card-scale: .72;
z-index: 2;
opacity: 0;
pointer-events: none;
}
.news-orbit-card:hover { border-color: rgb(255 92 50 / 48%); box-shadow: 0 25px 56px rgb(127 59 32 / 18%); }
.news-card-number {
position: absolute;
top: 10px;
right: 16px;
color: rgb(255 92 50 / 14%);
font-size: 48px;
font-weight: 950;
letter-spacing: -.08em;
line-height: 1;
}
.news-card-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; }
.news-card-meta time { color: #747b83; font-size: 9px; font-style: normal; font-weight: 850; letter-spacing: .06em; }
.news-card-meta i { border-radius: 999px; padding: 5px 9px; background: #fff0e7; color: var(--orange-deep); font-size: 8px; font-style: normal; font-weight: 850; }
.news-orbit-card > strong {
position: relative;
z-index: 1;
display: -webkit-box;
overflow: hidden;
margin-top: 12px;
font-size: 12px;
font-weight: 850;
letter-spacing: .025em;
line-height: 1.65;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.news-card-link {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 7px;
margin-top: auto;
color: #7c8187;
font-size: 7px;
font-weight: 900;
letter-spacing: .16em;
}
.news-card-link b { color: var(--orange); font-size: 12px; }
.news-orbit-next {
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
display: grid;
width: 112px;
height: 112px;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--orange-gloss);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 44%), 0 18px 40px rgb(209 60 18 / 24%);
color: #fff;
cursor: pointer;
translate: -50% -50%;
transition: scale .25s ease, box-shadow .25s ease;
}
.news-orbit-next::after { position: absolute; inset: 9px; border: 1px solid rgb(255 255 255 / 34%); border-radius: 50%; content: ""; }
.news-orbit-next:hover { scale: 1.06; box-shadow: inset 0 1px 0 rgb(255 255 255 / 44%), 0 23px 46px rgb(209 60 18 / 30%); }
.news-orbit-next small { position: absolute; top: 24px; font-size: 7px; font-weight: 900; letter-spacing: .13em; line-height: 1.35; }
.news-orbit-next span { margin-top: 25px; font-size: 22px; }
.news-orbit-count {
position: absolute;
z-index: 7;
top: calc(50% + 75px);
left: 50%;
display: flex;
align-items: baseline;
gap: 5px;
margin: 0;
color: #8a8e93;
translate: -50% 0;
}
.news-orbit-count strong { color: var(--ink); font-size: 14px; }
.news-orbit-count span { font-size: 8px; }
.news-orbit-card:focus-visible,
.news-orbit-next:focus-visible { outline: 3px solid #ffad91; outline-offset: 4px; }
@keyframes news-path-spin { to { rotate: 360deg; } }
@media (max-width: 760px) {
.news-motion {
min-height: 820px;
grid-template-columns: 1fr;
gap: 12px;
border-radius: 34px 11px 34px 11px;
padding: 42px 18px 34px;
}
.news-motion::after { top: 23px; right: 8px; font-size: 54px; }
.news-motion-intro { min-height: 260px; padding: 0 8px; }
.news-motion-intro h2 { margin: 10px 0 15px; font-size: 31px; }
.news-motion-intro p { font-size: 13px; line-height: 1.9; }
.news-motion-intro > a { min-width: 178px; min-height: 46px; margin-top: 25px; font-size: 10px; }
.news-orbit-carousel { min-height: 470px; }
.news-orbit-path { width: 330px; height: 330px; mask: radial-gradient(circle, transparent 0 158px, #000 159px 165px); }
.news-orbit-card {
width: 210px;
min-height: 126px;
border-radius: 20px 7px 20px 7px;
padding: 17px 17px 15px;
transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-118px) rotate(var(--counter-angle)) scale(var(--card-scale));
}
.news-orbit-card.is-position-0 { --card-scale: 1; }
.news-orbit-card.is-position-1 { --card-scale: .88; }
.news-orbit-card.is-position-2 { --card-scale: .82; }
.news-card-number { top: 8px; right: 12px; font-size: 39px; }
.news-card-meta { gap: 6px; }
.news-card-meta time { font-size: 8px; }
.news-card-meta i { padding: 4px 7px; font-size: 7px; }
.news-orbit-card > strong { margin-top: 9px; font-size: 10.5px; line-height: 1.55; }
.news-card-link { font-size: 6px; }
.news-orbit-next { width: 86px; height: 86px; }
.news-orbit-next small { top: 18px; font-size: 6px; }
.news-orbit-next span { margin-top: 21px; font-size: 18px; }
.news-orbit-count { top: calc(50% + 58px); }
}
@media (prefers-reduced-motion: reduce) {
.news-orbit-path { animation: none; }
.news-orbit-card { transition-duration: 0s; }
}
.opening-splash {
position: fixed;
z-index: 9999;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
overflow: hidden;
background:
radial-gradient(circle at 75% 18%, rgb(255 255 255 / 22%) 0 85px, transparent 86px),
radial-gradient(circle at 20% 90%, rgb(255 255 255 / 12%) 0 180px, transparent 181px),
var(--orange-gloss);
color: #fff;
pointer-events: none;
animation: opening-splash-leave 2.05s cubic-bezier(.76,0,.24,1) forwards;
}
.opening-splash::before,
.opening-splash::after {
position: absolute;
border: 1px solid rgb(255 255 255 / 24%);
border-radius: 50%;
content: "";
}
.opening-splash::before { width: min(52vw, 660px); height: min(52vw, 660px); }
.opening-splash::after { width: min(68vw, 860px); height: min(68vw, 860px); }
.opening-splash img {
position: relative;
z-index: 1;
width: clamp(150px, 18vw, 260px);
filter: brightness(0) invert(1);
opacity: 0;
animation: opening-logo-in 1.25s cubic-bezier(.2,.78,.2,1) .12s both;
}
.opening-splash span {
position: relative;
z-index: 1;
margin-top: 21px;
font-size: 9px;
font-weight: 900;
letter-spacing: .38em;
opacity: 0;
animation: opening-copy-in .8s ease .46s both;
}
@keyframes opening-logo-in {
from { opacity: 0; transform: translateY(28px) scale(.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes opening-copy-in {
from { opacity: 0; translate: 0 12px; }
to { opacity: .78; translate: 0 0; }
}
@keyframes opening-splash-leave {
0%, 57% { transform: translateY(0); visibility: visible; }
100% { transform: translateY(-102%); visibility: hidden; }
}
.hero-main-slide.slide-one { object-position: 64% center; }
.hero-main-slide.slide-two { object-position: 72% center; }
.hero-main-slide.slide-three { object-position: 50% center; }
.news-flight-stage {
position: relative;
min-height: 590px;
overflow: hidden;
}
.news-flight-guide {
position: absolute;
z-index: 1;
top: 26px;
left: 50%;
color: rgb(255 92 50 / 25%);
font-size: 11px;
font-weight: 950;
letter-spacing: .28em;
translate: -50% 0;
white-space: nowrap;
}
.news-flight-guide::after {
display: block;
width: 1px;
height: 74px;
margin: 15px auto 0;
background: linear-gradient(180deg, rgb(255 92 50 / 60%), transparent);
content: "";
}
.news-flight-card {
position: absolute;
z-index: 3;
top: 49%;
left: 50%;
display: flex;
width: min(92%, 710px);
min-height: 238px;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
border: 1px solid rgb(20 34 49 / 10%);
border-radius: 34px 11px 34px 11px;
padding: 37px 42px 31px;
background: rgb(255 255 255 / 96%);
box-shadow: 0 28px 68px rgb(92 48 28 / 16%);
color: var(--ink);
text-align: left;
cursor: pointer;
transform: translate(-50%, -50%);
opacity: 1;
transition:
transform .76s cubic-bezier(.22,.78,.16,1),
opacity .48s ease,
width .76s cubic-bezier(.22,.78,.16,1),
min-height .76s cubic-bezier(.22,.78,.16,1),
padding .76s cubic-bezier(.22,.78,.16,1),
border-radius .76s cubic-bezier(.22,.78,.16,1),
box-shadow .3s ease;
will-change: transform, opacity;
}
.news-flight-card::before {
position: absolute;
top: -105px;
right: -70px;
width: 260px;
height: 210px;
border-radius: 50%;
background: linear-gradient(145deg, rgb(255 198 172 / 42%), rgb(255 92 50 / 7%));
content: "";
rotate: 22deg;
}
.news-flight-card.is-position-0 {
z-index: 5;
border-color: rgb(255 92 50 / 30%);
transform: translate(-50%, -50%);
opacity: 1;
}
.news-flight-card.is-position-1 {
z-index: 4;
width: 290px;
min-height: 128px;
border-radius: 21px 8px 21px 8px;
padding: 18px 19px 16px;
transform: translate(calc(-50% + 260px), calc(-50% + 235px));
opacity: .8;
}
.news-flight-card.is-position-2 {
z-index: 2;
width: 250px;
min-height: 118px;
padding: 16px 17px;
transform: translate(calc(-50% + 650px), calc(-50% + 410px));
opacity: 0;
pointer-events: none;
}
.news-flight-card.is-position-3 {
z-index: 4;
width: 290px;
min-height: 128px;
border-radius: 21px 8px 21px 8px;
padding: 18px 19px 16px;
transform: translate(calc(-50% + 260px), calc(-50% - 235px));
opacity: .8;
}
.news-flight-card .news-card-number {
top: 19px;
right: 29px;
color: rgb(255 92 50 / 11%);
font-size: 88px;
}
.news-flight-card > strong {
position: relative;
z-index: 1;
max-width: 580px;
margin: 23px 0 28px;
font-size: clamp(19px, 2vw, 27px);
font-weight: 850;
letter-spacing: .025em;
line-height: 1.65;
}
.news-flight-card .news-card-link { margin-top: auto; font-size: 8px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-number { top: 9px; right: 12px; font-size: 40px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-meta time { font-size: 8px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-meta i { padding: 4px 7px; font-size: 7px; }
.news-flight-card:is(.is-position-1, .is-position-3) > strong { margin: 10px 0 0; font-size: 11px; line-height: 1.55; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-link { display: none; }
.news-flight-next {
position: absolute;
z-index: 7;
left: 21px;
bottom: 22px;
display: flex;
min-width: 146px;
min-height: 46px;
align-items: center;
justify-content: space-between;
gap: 20px;
border: 0;
border-radius: 999px;
padding: 0 17px;
background: var(--orange-gloss);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 13px 28px rgb(209 60 18 / 22%);
color: #fff;
font-size: 9px;
font-weight: 850;
cursor: pointer;
transition: translate .25s ease, box-shadow .25s ease;
}
.news-flight-next:hover { translate: 0 4px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 18px 34px rgb(209 60 18 / 28%); }
.news-flight-next span { font-size: 17px; }
.news-flight-count {
position: absolute;
z-index: 7;
bottom: 33px;
left: 185px;
display: flex;
align-items: baseline;
gap: 6px;
margin: 0;
color: #94989d;
}
.news-flight-count strong { color: var(--ink); font-size: 15px; }
.news-flight-count span { font-size: 8px; }
.news-flight-card:focus-visible,
.news-flight-next:focus-visible { outline: 3px solid #ffad91; outline-offset: 4px; }
.mobile-only { display: none; }
.philosophy-section {
position: relative;
display: grid;
width: min(100% - 64px, 1220px);
min-height: 680px;
margin: 92px auto 0;
grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
gap: 0;
isolation: isolate;
overflow: hidden;
border: 1px solid rgb(255 92 50 / 14%);
border-radius: 72px 20px 72px 20px;
padding: 18px;
background: linear-gradient(135deg, #fffaf6, #fff0e5);
box-shadow: 0 30px 76px rgb(93 48 25 / 13%);
}
.philosophy-section::before {
position: absolute;
z-index: -1;
top: -110px;
right: -70px;
width: 330px;
height: 330px;
border-radius: 50%;
background: radial-gradient(circle, rgb(255 132 91 / 22%), rgb(255 132 91 / 0%) 70%);
content: "";
}
.philosophy-section::after {
position: absolute;
z-index: -1;
right: 54px;
bottom: 46px;
width: 106px;
height: 106px;
border: 1px solid rgb(255 92 50 / 21%);
border-radius: 50%;
box-shadow: 0 0 0 18px rgb(255 92 50 / 4%), 0 0 0 42px rgb(255 92 50 / 3%);
content: "";
}
.philosophy-photo {
position: relative;
min-height: 644px;
margin: 0;
overflow: hidden;
border-radius: 56px 14px 56px 14px;
background: #e8ddd6;
}
.philosophy-photo::after { content: none; }
.philosophy-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.philosophy-photo figcaption {
position: absolute;
z-index: 1;
right: 28px;
bottom: 25px;
color: #fff;
font-size: 12px;
font-weight: 850;
letter-spacing: .2em;
}
.philosophy-content {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
padding: 64px 60px 60px 64px;
}
.philosophy-label { margin-bottom: 38px; }
.philosophy-label .section-kicker { color: var(--orange); }
.philosophy-label p { margin: 13px 0 0; font-size: 18px; font-weight: 850; letter-spacing: .08em; }
.philosophy-copy { position: relative; z-index: 2; max-width: 590px; }
.philosophy-copy h2 {
margin: 0 0 34px;
font-size: clamp(32px, 3.25vw, 46px);
letter-spacing: .045em;
line-height: 1.48;
}
.philosophy-copy p { max-width: 590px; margin: 0 0 20px; color: #343b45; font-size: 16px; font-weight: 650; letter-spacing: .025em; line-height: 2; }
.philosophy-copy .philosophy-lead { margin-bottom: 24px; color: var(--ink); font-size: 19px; font-weight: 850; line-height: 1.85; }
@media (max-width: 760px) {
.hero-main-slide.slide-one { object-position: 66% center; }
.hero-main-slide.slide-two { object-position: 74% center; }
.hero-main-slide.slide-three { object-position: 50% center; }
.news-flight-stage { min-height: 470px; }
.news-flight-guide { top: 8px; font-size: 8px; }
.news-flight-guide::after { height: 49px; margin-top: 10px; }
.news-flight-card {
top: 47%;
width: calc(100% - 12px);
min-height: 210px;
border-radius: 25px 9px 25px 9px;
padding: 28px 22px 23px;
}
.news-flight-card.is-position-1 {
width: 178px;
min-height: 116px;
padding: 14px 13px 12px;
transform: translate(calc(-50% + 105px), calc(-50% + 173px));
}
.news-flight-card.is-position-2 {
width: 165px;
min-height: 108px;
transform: translate(calc(-50% + 340px), calc(-50% + 320px));
}
.news-flight-card.is-position-3 {
width: 178px;
min-height: 116px;
padding: 14px 13px 12px;
transform: translate(calc(-50% + 105px), calc(-50% - 173px));
}
.news-flight-card .news-card-number { top: 14px; right: 15px; font-size: 64px; }
.news-flight-card > strong { margin: 18px 0 21px; font-size: 16px; line-height: 1.65; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-number { top: 7px; right: 8px; font-size: 31px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-meta { gap: 4px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-meta time { font-size: 6.5px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-meta i { padding: 3px 5px; font-size: 6px; }
.news-flight-card:is(.is-position-1, .is-position-3) > strong { margin-top: 7px; font-size: 9px; line-height: 1.5; }
.news-flight-next { left: 5px; bottom: 9px; min-width: 132px; min-height: 43px; font-size: 8px; }
.news-flight-count { bottom: 21px; left: 151px; }
.mobile-only { display: initial; }
.philosophy-section {
width: calc(100% - 24px);
min-height: 0;
margin-top: 66px;
grid-template-columns: 1fr;
gap: 0;
border-radius: 44px 14px 44px 14px;
padding: 10px;
}
.philosophy-section::before { top: auto; right: -110px; bottom: -100px; width: 260px; height: 260px; }
.philosophy-section::after { display: none; }
.philosophy-photo { min-height: 365px; border-radius: 36px 10px 36px 10px; }
.philosophy-photo img { object-position: 61% center; }
.philosophy-photo figcaption { right: 19px; bottom: 18px; font-size: 10px; }
.philosophy-content { padding: 43px 19px 49px; }
.philosophy-label { margin-bottom: 28px; }
.philosophy-label p { margin-top: 10px; font-size: 17px; }
.philosophy-copy h2 { margin-bottom: 29px; font-size: 31px; line-height: 1.55; }
.philosophy-copy p { margin-bottom: 18px; font-size: 14.5px; line-height: 1.95; }
.philosophy-copy .philosophy-lead { font-size: 17px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
.opening-splash { display: none; animation: none; }
.news-flight-card { transition-duration: 0s; }
}
.section-kicker { font-size: 12px !important; }
.reports-heading .section-kicker { color: var(--ink) !important; }
.opening-splash span { font-size: 11px; }
.report-card time { font-size: 14px; }
.report-card span { font-size: 13px; }
.report-card strong { font-size: 14px; }
.stats-grid small { font-size: 14px; }
.stats-grid article div > span { font-size: 13px; }
.course-card > div > small { font-size: 11px; }
.service-active-tag { font-size: 13px; }
.flow-step-tabs button small { font-size: 13px; }
.story-feature > div > small { font-size: 12px; }
.story-feature > div > strong { font-size: 13px; }
.story-stream-heading p { font-size: 12px; }
.story-stream-heading button { font-size: 11px; }
.story-number { font-size: 11px; }
.story-card strong { font-size: 13.5px; }
.story-card small { font-size: 10.5px; }
.news-card-meta time { font-size: 11px; }
.news-card-meta i { font-size: 10px; }
.news-flight-card .news-card-link { font-size: 10px; }
.qllink-float small { font-size: 12px; }
.footer-brand p { font-size: 14px; }
.footer-links h3 { font-size: 14px; }
.footer-links a,
.footer-bottom { font-size: 13px; }
.hero-actions .button { min-height: 68px; }
.service-gateway-tabs button { min-height: 122px; padding-top: 8px; padding-bottom: 8px; }
.service-gateway-tabs button small { font-size: 14px; }
.service-gateway-tabs button span { font-size: 19px; }
.cta-content .button { min-height: 66px; }
.cta-content small { font-size: 12px; }
.faq-section {
padding-top: 68px;
padding-bottom: 76px;
background: linear-gradient(180deg, #ff6c42 0 258px, #fff1e7 258px 100%);
}
.faq-heading {
display: grid;
justify-items: center;
color: #fff;
text-align: center;
}
.faq-heading h2 {
margin: 12px 0 0;
color: #fff;
font-size: clamp(31px, 3.7vw, 46px);
letter-spacing: .055em;
}
.faq-heading::after {
width: min(80%, 560px);
height: 1px;
margin-top: 22px;
background: rgb(255 255 255 / 70%);
content: "";
}
.faq-lead {
margin: 17px 0 37px;
color: #fff;
font-size: 15px;
font-weight: 650;
letter-spacing: .025em;
}
.faq-list { gap: 14px; }
.faq-list summary { min-height: 74px; font-size: 16px; }
.faq-list details p { font-size: 15px; }
.faq-more { font-size: 15px; }
@media (max-width: 760px) {
.section-kicker { font-size: 11px !important; }
.opening-splash span { font-size: 11px; }
.report-card time { font-size: 13px; }
.report-card span { font-size: 12px; }
.report-card strong { font-size: 13px; }
.stats-grid small { font-size: 13px; }
.stats-grid article div > span { font-size: 12px; }
.course-card > div > small { font-size: 11px; }
.service-active-tag { font-size: 12px; }
.flow-step-tabs button small { font-size: 12px; }
.story-feature > div > small { font-size: 11px; }
.story-feature > div > strong { font-size: 12px; }
.story-stream-heading p { font-size: 11px; }
.story-stream-heading button { font-size: 11px; }
.story-number { font-size: 10px; }
.story-card strong { font-size: 12.5px; }
.story-card small { font-size: 10px; }
.news-flight-guide { font-size: 10px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-meta time { font-size: 8.5px; }
.news-flight-card:is(.is-position-1, .is-position-3) .news-card-meta i { font-size: 8px; }
.news-flight-card:is(.is-position-1, .is-position-3) > strong { font-size: 11px; }
.qllink-float small { font-size: 11px; }
.footer-brand p { font-size: 13.5px; }
.mobile-footer-links h3 { font-size: 13px; }
.mobile-footer-links a,
.footer-bottom { font-size: 12px; }
.hero-actions .button { min-height: 62px; }
.service-gateway-tabs button {
min-height: 100px;
padding: 9px 13px;
}
.service-gateway-tabs button small { font-size: 11px; }
.service-gateway-tabs button span { font-size: 14px; }
.cta-content .button { min-height: 58px; }
.cta-content small { font-size: 11px; }
.faq-section {
padding-top: 58px;
padding-bottom: 63px;
background: linear-gradient(180deg, #ff6c42 0 230px, #fff1e7 230px 100%);
}
.faq-heading h2 { margin-top: 10px; font-size: 29px; }
.faq-heading::after { width: 82%; margin-top: 18px; }
.faq-lead { margin: 15px 18px 31px; font-size: 14px; line-height: 1.75; }
.faq-list { grid-template-columns: 1fr; gap: 10px; }
.faq-list summary { min-height: 70px; padding: 0 18px; font-size: 14px; line-height: 1.55; }
.faq-list details p { padding: 16px 18px 19px; font-size: 13px; }
.faq-more { font-size: 14px; }
}
.hero-actions .button {
min-height: 78px;
border-radius: 12px;
padding-right: 32px;
padding-left: 32px;
}
.service-gateway {
min-height: 1080px;
padding-top: 116px;
padding-bottom: 154px;
background:
radial-gradient(circle at 91% 9%, rgb(255 109 65 / 11%) 0 150px, transparent 151px),
linear-gradient(145deg, #fff 0%, #fff9f5 46%, #ffeade 100%);
}
.service-gateway-heading { margin-bottom: 48px; }
.service-gateway-stage { height: 650px; }
.service-gateway-tabs {
width: min(78%, 900px);
margin-top: -70px;
margin-right: auto;
padding: 18px;
border: 1px solid rgb(255 92 50 / 13%);
border-radius: 48px;
background: rgb(255 250 246 / 91%);
box-shadow: 0 26px 62px rgb(93 48 25 / 14%);
backdrop-filter: blur(12px);
}
.service-gateway-tabs button {
min-height: 140px;
border-radius: 30px;
padding: 12px 31px;
box-shadow: 0 13px 32px rgb(77 41 23 / 10%);
}
.service-gateway-tabs button:hover { translate: 0 -4px; }
.bottom-cta {
min-height: 236px;
padding-top: 34px;
padding-bottom: 34px;
}
.cta-content > div { gap: 22px; }
.cta-content .button {
min-height: 76px;
border-radius: 12px;
padding-right: 26px;
padding-left: 26px;
}
@media (max-width: 760px) {
.hero { min-height: 870px; }
.hero-actions { top: 353px; gap: 10px; }
.hero-actions .button {
min-height: 72px;
border-radius: 11px;
padding-right: 17px;
padding-left: 17px;
font-size: 13px;
}
.hero-points { top: 445px; }
.service-gateway {
min-height: 0;
padding-top: 84px;
padding-bottom: 126px;
background:
radial-gradient(circle at 108% 6%, rgb(255 109 65 / 12%) 0 112px, transparent 113px),
linear-gradient(180deg, #fff 0%, #fff8f3 48%, #ffe9dd 100%);
}
.service-gateway-heading { margin-bottom: 34px; }
.service-gateway-stage {
width: calc(100% - 20px);
height: 710px;
border-radius: 66px 16px 66px 16px;
}
.service-gateway-stage > img { height: 58%; }
.service-gateway-copy {
right: 25px;
bottom: 137px;
left: 25px;
}
.service-gateway-copy h3 { font-size: 31px; }
.service-gateway-copy p { font-size: 14px; line-height: 1.85; }
.service-gateway-copy a { min-height: 56px; font-size: 13px; }
.service-gateway-tabs {
width: calc(100% - 20px);
margin: -86px auto 0;
gap: 8px;
border-radius: 30px;
padding: 10px;
}
.service-gateway-tabs button {
min-height: 116px;
grid-template-columns: 27px 1fr 18px;
border-radius: 22px;
padding: 11px 13px;
}
.service-gateway-tabs button small { font-size: 11px; }
.service-gateway-tabs button span { font-size: 14px; line-height: 1.5; }
.bottom-cta {
min-height: 520px;
padding: 0;
}
.cta-content { padding: 171px 22px 26px; }
.cta-content > div {
right: 22px;
bottom: 25px;
left: 22px;
grid-template-columns: 1fr 1.05fr;
gap: 10px;
}
.cta-content .button {
min-height: 68px;
border-radius: 11px;
padding-right: 13px;
padding-left: 13px;
font-size: 12px;
}
}
@media (min-width: 761px) {
main > section + section { margin-top: 96px; }
.hero { min-height: 720px; }   
.section-space { padding-top: 104px; padding-bottom: 104px; }
.reports-strip { padding-top: 86px; padding-bottom: 94px; }
.reports-heading { margin-bottom: 42px; }
.service-gateway-heading { margin-bottom: 58px; }
.course-shelf { padding-top: 122px; padding-bottom: 128px; }
.course-shelf-heading { margin-bottom: 44px; }
.course-filter { margin-bottom: 36px; }
.stats-band { padding-top: 48px; padding-bottom: 48px; }
.service-switcher { padding-top: 116px; padding-bottom: 124px; }
.service-switcher-head { margin-bottom: 39px; }
.flow-journey { padding-top: 112px; padding-bottom: 122px; }
.flow-journey-heading { margin-bottom: 46px; }
.story-voice-hub { padding-top: 126px; padding-bottom: 132px; }
.story-voice-hub .story-collage-heading { margin-bottom: 54px; }
.reasons {
padding-top: 124px;
padding-bottom: 140px;
}
.reasons .section-title { margin-bottom: 0; }
.reason-intro { margin-top: 36px; margin-bottom: 42px; }
.reasons .reason-grid { gap: 22px; padding-top: 18px; }
.news-motion { padding-top: 78px; padding-bottom: 76px; }
.faq-section {
padding-top: 92px;
padding-bottom: 108px;
background: linear-gradient(180deg, #ff6c42 0 308px, #fff1e7 308px 100%);
}
.faq-lead { margin-top: 21px; margin-bottom: 52px; }
.faq-list { gap: 20px; }
.faq-list summary { min-height: 82px; padding-right: 26px; padding-left: 26px; }
.faq-list details p { padding: 20px 26px 24px; }
.faq-more { margin-top: 38px; }
.bottom-cta { margin-top: 108px; }
.philosophy-section { margin-top: 108px; }
}
@media (max-width: 760px) {
main > section + section { margin-top: 48px; }
.hero { min-height: 890px; }
.reports-strip { padding-top: 64px; padding-bottom: 70px; }
.reports-heading { margin-bottom: 30px; }
.course-shelf { padding-top: 82px; padding-bottom: 90px; }
.course-shelf-heading { margin-bottom: 31px; }
.service-switcher { padding-top: 82px; padding-bottom: 90px; }
.flow-journey { padding-top: 84px; padding-bottom: 92px; }
.story-voice-hub { padding-top: 88px; padding-bottom: 94px; }
.reasons { padding-top: 94px; padding-bottom: 104px; }
.reason-intro { margin-top: 27px; margin-bottom: 32px; }
.reasons .reason-grid { gap: 18px; }
.faq-section {
padding-top: 70px;
padding-bottom: 82px;
background: linear-gradient(180deg, #ff6c42 0 252px, #fff1e7 252px 100%);
}
.faq-lead { margin-top: 18px; margin-bottom: 38px; }
.faq-list { gap: 14px; }
.faq-list summary { min-height: 76px; }
.faq-more { margin-top: 28px; }
.bottom-cta,
.philosophy-section { margin-top: 58px; }
}
@media (min-width: 761px) {
.reasons {
margin-top: 148px;
padding-top: 150px;
}
.reasons::before { top: 50px; }
.reasons::after { top: 82px; }
.faq-section {
background: linear-gradient(180deg, #ff6c42 0 300px, #fff1e7 300px 100%);
}
.faq-lead { margin-bottom: 82px; }
.faq-list {
row-gap: 22px;
column-gap: 22px;
}
.faq-list details { border-radius: 12px; }
.faq-more { margin-top: 44px; }
}
@media (max-width: 760px) {
.reasons {
margin-top: 72px;
padding-top: 108px;
}
.reasons::before { top: 34px; }
.reasons::after { top: 58px; }
.faq-section {
background: linear-gradient(180deg, #ff6c42 0 240px, #fff1e7 240px 100%);
}
.faq-lead { margin-bottom: 54px; }
.faq-list { gap: 16px; }
.faq-list details { border-radius: 11px; }
.faq-more { margin-top: 32px; }
}
.college-page {
--college-cream: #fff5ea;
--college-peach: #ffe1d2;
--college-yellow: #ffd663;
--college-green: #dcebdc;
background: #fffdfb;
}
.college-page .college-header {
width: min(100% - 48px, 1440px);
height: 72px;
background: rgb(255 253 251 / 88%);
backdrop-filter: blur(16px);
}
.college-page .college-header::after { display: none; }
.college-page .desktop-nav { gap: clamp(14px, 1.5vw, 26px); }
.college-page .desktop-nav a { font-size: 12px; }
.college-page .desktop-nav a.is-current::after { opacity: 1; transform: scaleX(1); }
.college-page .desktop-nav .nav-diagnosis {
margin-left: 4px;
padding: 11px 15px;
border: 1px solid var(--orange);
border-radius: 999px;
color: var(--orange-deep);
}
.college-page .desktop-nav .nav-diagnosis::after { display: none; }
.college-page .desktop-nav .nav-cta { padding: 12px 18px; border-radius: 999px; }
.college-section {
position: relative;
width: min(100% - 80px, 1240px);
margin: 0 auto;
padding: 150px 0;
}
.college-title { position: relative; z-index: 1; }
.college-title.is-center { text-align: center; }
.college-title > span {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--orange-deep);
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
}
.college-title > span::before {
width: 28px;
height: 2px;
background: currentColor;
content: "";
}
.college-title.is-center > span::after {
width: 28px;
height: 2px;
background: currentColor;
content: "";
}
.college-title h2 {
margin: 16px 0 0;
font-size: clamp(36px, 4vw, 62px);
line-height: 1.25;
letter-spacing: -.045em;
}
.college-section-lead {
margin: 28px auto 58px;
color: #4e5664;
font-size: 17px;
line-height: 2;
text-align: center;
}
.college-split-heading {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 90px;
align-items: end;
margin-bottom: 68px;
}
.college-split-heading > p {
max-width: 520px;
margin: 0 0 7px;
color: #545c68;
font-size: 16px;
line-height: 2.05;
}
.college-hero {
position: relative;
display: grid;
width: min(100% - 48px, 1440px);
min-height: calc(100svh - 112px);
margin: 0 auto 90px;
grid-template-columns: .82fr 1.18fr;
background: var(--college-cream);
border-radius: 32px;
overflow: hidden;
}
.college-hero::before {
position: absolute;
top: -240px;
left: -210px;
width: 540px;
height: 540px;
border: 110px solid #ffd9c8;
border-radius: 50%;
content: "";
opacity: .58;
}
.college-hero-copy {
position: relative;
z-index: 2;
display: flex;
padding: 80px 42px 72px clamp(36px, 6vw, 94px);
flex-direction: column;
justify-content: center;
}
.college-eyebrow {
display: flex;
margin: 0 0 24px;
align-items: center;
gap: 16px;
color: #6a4c3c;
font-size: 10px !important;
font-weight: 800;
letter-spacing: .14em;
}
.college-eyebrow span {
padding: 8px 13px;
background: var(--orange-gloss);
border-radius: 999px;
color: #fff;
font-size: 13px;
letter-spacing: .03em;
}
.college-hero h1 {
margin: 0;
font-size: clamp(48px, 5.35vw, 82px);
line-height: 1.14;
letter-spacing: -.065em;
}
.college-hero h1 em {
position: relative;
color: var(--orange-deep);
font-style: normal;
}
.college-hero h1 em::after {
position: absolute;
right: 0;
bottom: -3px;
left: 0;
height: 9px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12'%3E%3Cpath d='M3 8C62 2 123 11 181 6s83-4 116-2' fill='none' stroke='%23ff5c32' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
content: "";
}
.college-hero-copy > p:not(.college-eyebrow) {
max-width: 520px;
margin: 34px 0 0;
color: #3f4754;
font-size: 16px;
line-height: 2;
}
.college-hero-actions { display: flex; gap: 12px; margin-top: 35px; }
.college-button {
display: inline-flex;
min-width: 218px;
min-height: 58px;
padding: 0 22px;
align-items: center;
justify-content: space-between;
border: 1px solid var(--orange);
border-radius: 999px;
font-size: 14px;
font-weight: 800;
transition: transform .25s ease, box-shadow .25s ease;
}
.college-button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(255 92 50 / 18%); }
.college-button.is-primary { background: var(--orange-gloss); color: #fff; }
.college-button.is-ghost { min-width: 165px; background: #fff; color: var(--orange-deep); }
.college-hero-visual { position: relative; min-width: 0; }
.college-hero-main {
position: absolute;
top: 5.5%;
right: 3.5%;
bottom: 6%;
left: 6%;
margin: 0;
border-radius: 48% 30px 30px 30px;
overflow: hidden;
}
.college-hero-main img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.college-hero-main::after {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgb(255 255 255 / 10%), transparent 48%, rgb(255 92 50 / 14%));
content: "";
}
.college-hero-sub {
position: absolute;
z-index: 3;
right: 1.5%;
bottom: 2.5%;
width: 34%;
aspect-ratio: 1.25;
margin: 0;
border: 7px solid #fffdfb;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 18px 45px rgb(7 19 41 / 16%);
}
.college-hero-sub img { width: 100%; height: 100%; object-fit: cover; }
.college-hero-note {
position: absolute;
z-index: 4;
bottom: 7%;
left: 0;
display: flex;
min-width: 180px;
padding: 18px 22px;
flex-direction: column;
background: rgb(255 255 255 / 94%);
border-radius: 16px;
box-shadow: var(--shadow);
}
.college-hero-note small { color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.college-hero-note strong { margin-top: 7px; font-size: 24px; }
.college-hero-note span { margin-top: 4px; color: #676d76; font-size: 12px; }
.college-hero-orbit {
position: absolute;
z-index: 4;
top: 3%;
left: 0;
width: 104px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--orange-gloss);
box-shadow: 0 16px 35px rgb(255 92 50 / 25%);
color: #fff;
animation: college-orbit-float 5s ease-in-out infinite;
}
.college-hero-orbit span { position: absolute; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.college-hero-orbit span:nth-child(1) { top: 20px; left: 32px; }
.college-hero-orbit span:nth-child(2) { top: 48px; left: 22px; }
.college-hero-orbit span:nth-child(3) { top: 70px; left: 39px; }
.college-hero-scroll {
position: absolute;
bottom: 34px;
left: 24px;
display: flex;
align-items: center;
gap: 8px;
color: #9d7360;
font-size: 9px;
font-weight: 900;
letter-spacing: .15em;
rotate: -90deg;
transform-origin: left center;
}
.college-hero-scroll span { color: var(--orange); }
.college-manifesto {
display: grid;
width: min(100% - 80px, 1240px);
margin: 0 auto;
padding: 80px 0 120px;
grid-template-columns: .65fr 1.35fr;
gap: 100px;
border-bottom: 1px solid #eadfd7;
}
.college-manifesto-en { margin: 8px 0 0; color: #b3a096; font-size: 12px; font-weight: 900; line-height: 1.65; letter-spacing: .15em; }
.college-manifesto > div { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; }
.college-manifesto span { font-size: clamp(30px, 3vw, 47px); font-weight: 800; line-height: 1.55; letter-spacing: -.04em; }
.college-manifesto div p { margin: 0 0 7px; color: #555c67; font-size: 15px; line-height: 2.05; }
.college-paths { padding-top: 160px; }
.college-path-switcher { margin-top: 58px; }
.college-path-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.college-path-tabs button {
display: grid;
min-height: 92px;
padding: 0 30px;
grid-template-columns: auto 1fr auto;
gap: 22px;
align-items: center;
border: 1px solid #eadfd7;
border-radius: 20px;
background: #fff;
color: var(--ink);
cursor: pointer;
text-align: left;
transition: .25s ease;
}
.college-path-tabs button small { color: var(--orange); font-size: 12px; font-weight: 900; }
.college-path-tabs button span { font-size: 20px; font-weight: 800; }
.college-path-tabs button b { font-size: 20px; }
.college-path-tabs button.is-active { background: var(--orange-gloss); border-color: transparent; color: #fff; box-shadow: 0 18px 38px rgb(255 92 50 / 18%); }
.college-path-tabs button.is-active small { color: #fff; }
.college-path-stage {
display: grid;
min-height: 570px;
grid-template-columns: 1.05fr .95fr;
background: #fff;
border: 1px solid #eadfd7;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 24px 65px rgb(68 42 28 / 8%);
animation: college-panel-in .55s ease both;
}
.college-path-stage figure { min-height: 500px; margin: 0; overflow: hidden; }
.college-path-stage figure img { width: 100%; height: 100%; object-fit: cover; animation: college-photo-settle .8s ease both; }
.college-path-stage > div { display: flex; padding: 60px clamp(40px, 5vw, 74px); flex-direction: column; justify-content: center; }
.college-path-en { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.college-path-stage h3 { margin: 16px 0 18px; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.35; letter-spacing: -.045em; }
.college-path-stage h3 span { display: block; }
.college-path-stage > div > p { margin: 0; color: #555d68; font-size: 15px; line-height: 2; }
.college-path-stage ul { display: grid; margin: 26px 0 30px; padding: 0; grid-template-columns: 1fr 1fr; gap: 12px 18px; list-style: none; }
.college-path-stage li { position: relative; padding-left: 22px; font-size: 13px; font-weight: 700; }
.college-path-stage li::before { position: absolute; top: 2px; left: 0; display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; background: var(--orange); color: #fff; content: "✓"; font-size: 9px; }
.college-path-stage a { display: flex; width: fit-content; min-width: 180px; padding: 15px 18px; justify-content: space-between; border-bottom: 2px solid var(--orange); color: var(--orange-deep); font-size: 14px; font-weight: 800; }
.college-monthly { width: min(100% - 48px, 1440px); padding-right: max(40px, calc((100% - 1240px) / 2)); padding-left: max(40px, calc((100% - 1240px) / 2)); background: var(--college-cream); border-radius: 38px; }
.college-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.college-feature-grid article { min-height: 310px; padding: 34px; background: #fff; border-radius: 22px; box-shadow: 0 16px 42px rgb(61 34 19 / 5%); }
.college-feature-grid header { display: flex; align-items: flex-start; justify-content: space-between; }
.college-feature-grid header > span { color: var(--orange-deep); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.college-feature-grid header p { margin: 0; color: var(--orange-deep); font-size: 12px; }
.college-feature-grid header strong { margin-right: 5px; color: var(--ink); font-size: 42px; letter-spacing: -.05em; }
.college-feature-grid h3 { margin: 58px 0 14px; font-size: 24px; }
.college-feature-grid article > p { max-width: 420px; margin: 0; color: #5a616c; font-size: 14px; line-height: 1.9; }
.college-archive-ribbon { display: flex; margin: 56px -20px -35px; gap: 14px; overflow: hidden; }
.college-archive-ribbon span { flex: 0 0 auto; padding: 13px 22px; border: 1px solid #ffb695; border-radius: 999px; color: var(--orange-deep); font-size: 13px; font-weight: 800; }
.college-seminar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.college-seminar-grid article { background: #fff; border: 1px solid #e9dfd9; border-radius: 24px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.college-seminar-grid article:hover { transform: translateY(-8px); box-shadow: 0 24px 55px rgb(52 31 18 / 10%); }
.college-seminar-grid figure { position: relative; height: 260px; margin: 0; overflow: hidden; }
.college-seminar-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.college-seminar-grid article:hover img { scale: 1.04; }
.college-seminar-grid figure span { position: absolute; top: 16px; left: 16px; padding: 8px 13px; background: var(--orange-gloss); border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; }
.college-seminar-grid article > div { padding: 27px; }
.college-seminar-grid small { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.college-seminar-grid h3 { margin: 11px 0 13px; font-size: 25px; }
.college-seminar-grid p { min-height: 82px; margin: 0; color: #5a616b; font-size: 13px; line-height: 1.85; }
.college-seminar-grid footer { display: flex; margin-top: 22px; padding-top: 20px; align-items: center; justify-content: space-between; border-top: 1px solid #ece5e0; }
.college-seminar-grid footer strong { font-size: 15px; }
.college-seminar-grid footer a { display: grid; width: 40px; height: 40px; place-items: center; background: var(--orange); border-radius: 50%; color: #fff; }
.college-price-note { margin: 24px 0 0; color: #777b82; font-size: 12px; line-height: 1.8; }
.college-reasons { width: min(100% - 48px, 1440px); padding-right: max(40px, calc((100% - 1240px) / 2)); padding-left: max(40px, calc((100% - 1240px) / 2)); background: #f3f5ef; border-radius: 38px; }
.college-reasons::before { position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(#b8c8b7 1.2px, transparent 1.2px); background-size: 19px 19px; content: ""; opacity: .38; }
.college-reason-list { position: relative; z-index: 1; margin-top: 70px; }
.college-reason-list article { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; padding: 36px 0; border-top: 1px solid #ced7cc; }
.college-reason-list article:nth-child(even) figure { order: 2; }
.college-reason-list figure { height: 350px; margin: 0; border-radius: 28px; overflow: hidden; }
.college-reason-list figure img { width: 100%; height: 100%; object-fit: cover; }
.college-reason-list div { padding: 30px; }
.college-reason-list div > span { color: var(--orange-deep); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.college-reason-list h3 { margin: 15px 0 19px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.04em; }
.college-reason-list p { max-width: 530px; margin: 0; color: #505a56; font-size: 15px; line-height: 2; }
.college-live { display: grid; width: min(100% - 48px, 1440px); min-height: 720px; padding: 0; grid-template-columns: 1.1fr .9fr; background: #fff; border-radius: 38px; overflow: hidden; }
.college-live-photo { min-height: 720px; }
.college-live-photo img { width: 100%; height: 100%; object-fit: cover; }
.college-live-overlay { display: flex; padding: 80px clamp(40px, 6vw, 90px); flex-direction: column; justify-content: center; background: linear-gradient(145deg, #fff0e5, #ffd7c4); }
.college-live-overlay > p { margin: 30px 0 0; color: #544c48; font-size: 15px; line-height: 2; }
.college-live-topics { display: flex; margin-top: 32px; flex-wrap: wrap; gap: 9px; }
.college-live-topics span { padding: 10px 15px; background: rgb(255 255 255 / 75%); border-radius: 999px; color: var(--orange-deep); font-size: 12px; font-weight: 800; }
.college-live-overlay > a { display: flex; max-width: 310px; margin-top: 42px; padding: 18px 20px; justify-content: space-between; background: var(--orange-gloss); border-radius: 999px; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 16px 35px rgb(235 71 30 / 20%); }
.college-report-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 58px; }
.college-report-heading > a { padding-bottom: 8px; border-bottom: 1px solid var(--orange); color: var(--orange-deep); font-size: 13px; font-weight: 800; }
.college-report-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.college-report-track article { padding-bottom: 26px; border-bottom: 1px solid #dcd6d2; }
.college-report-track figure { position: relative; height: 300px; margin: 0 0 24px; border-radius: 24px; overflow: hidden; }
.college-report-track figure img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s ease; }
.college-report-track article:hover img { scale: 1.045; }
.college-report-track figure span { position: absolute; right: 0; bottom: 0; display: grid; width: 62px; height: 62px; place-items: center; background: var(--orange); border-radius: 24px 0 0; color: #fff; font-size: 15px; font-weight: 900; }
.college-report-track small { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.college-report-track h3 { margin: 10px 0 12px; font-size: 20px; line-height: 1.55; }
.college-report-track p { margin: 0; color: #5d636c; font-size: 13px; line-height: 1.85; }
.college-report-track a { display: inline-block; margin-top: 20px; color: var(--orange-deep); font-size: 12px; font-weight: 800; }
.college-voices { width: min(100% - 48px, 1440px); padding-right: max(40px, calc((100% - 1240px) / 2)); padding-left: max(40px, calc((100% - 1240px) / 2)); background: var(--ink); border-radius: 38px; color: #fff; }
.college-voices .college-title > span { color: #ff906b; }
.college-voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 68px; }
.college-voice-grid article { display: grid; min-height: 540px; grid-template-rows: 260px 1fr; background: #fff; border-radius: 24px; color: var(--ink); overflow: hidden; }
.college-voice-grid figure { margin: 0; overflow: hidden; }
.college-voice-grid figure img { width: 100%; height: 100%; object-fit: cover; }
.college-voice-grid article > div { position: relative; padding: 34px; }
.college-voice-grid article > div::before { position: absolute; top: -32px; left: 28px; color: var(--orange); content: "“"; font-family: Georgia, serif; font-size: 90px; line-height: 1; }
.college-voice-grid small { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.college-voice-grid h3 { margin: 13px 0; font-size: 20px; line-height: 1.65; }
.college-voice-grid p { margin: 0; color: #555d68; font-size: 13px; line-height: 1.9; }
.college-voice-grid div > span { display: block; margin-top: 18px; color: #777c84; font-size: 11px; }
.college-instructor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.college-instructor-grid article { display: grid; min-height: 420px; grid-template-columns: .78fr 1.22fr; background: var(--college-cream); border-radius: 24px; overflow: hidden; }
.college-instructor-grid figure { min-height: 100%; margin: 0; }
.college-instructor-grid figure img { width: 100%; height: 100%; object-fit: cover; }
.college-instructor-grid article > div { display: flex; padding: 34px 30px; flex-direction: column; justify-content: center; }
.college-instructor-grid small { color: var(--orange-deep); font-size: 10px; font-weight: 800; line-height: 1.6; }
.college-instructor-grid h3 { margin: 13px 0 20px; font-size: 27px; }
.college-instructor-grid p { margin: 0; color: #59606a; font-size: 13px; line-height: 1.9; }
.college-pricing { width: min(100% - 48px, 1440px); padding-right: max(40px, calc((100% - 1240px) / 2)); padding-left: max(40px, calc((100% - 1240px) / 2)); background: var(--college-cream); border-radius: 38px; }
.college-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 70px; align-items: stretch; }
.college-price-grid article { position: relative; display: flex; min-height: 530px; padding: 36px 32px; flex-direction: column; background: #fff; border: 1px solid #eaded6; border-radius: 24px; }
.college-price-grid article.is-featured { border: 2px solid var(--orange); transform: translateY(-16px); box-shadow: 0 23px 50px rgb(237 75 36 / 12%); }
.college-price-grid article > span { color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.college-price-grid article > small { position: absolute; top: -14px; right: 22px; padding: 8px 15px; background: var(--orange); border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; }
.college-price-grid h3 { margin: 14px 0 24px; font-size: 24px; }
.college-price { margin: 0 0 20px; color: var(--orange-deep); font-size: 16px !important; }
.college-price strong { margin-right: 5px; font-size: 44px; letter-spacing: -.05em; }
.college-price-grid article > p:not(.college-price) { margin: 0; color: #5a616b; font-size: 13px; line-height: 1.9; }
.college-price-grid ul { margin: 26px 0; padding: 23px 0 0; border-top: 1px solid #eee6e1; list-style: none; }
.college-price-grid li { position: relative; margin: 11px 0; padding-left: 22px; font-size: 13px; }
.college-price-grid li::before { position: absolute; left: 0; color: var(--orange); content: "✓"; font-weight: 900; }
.college-price-grid a { display: flex; min-height: 52px; margin-top: auto; padding: 0 18px; align-items: center; justify-content: center; border: 1px solid var(--orange); border-radius: 999px; color: var(--orange-deep); font-size: 13px; font-weight: 800; }
.college-price-grid .is-featured a { background: var(--orange-gloss); color: #fff; }
.college-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }
.college-start-grid article { position: relative; min-height: 250px; padding: 36px 32px; background: #fff; border: 1px solid #e8ded8; border-radius: 22px; }
.college-start-grid article:not(:last-child)::after { position: absolute; z-index: 3; top: 50%; right: -28px; display: grid; width: 38px; height: 38px; place-items: center; background: var(--orange); border: 5px solid #fffdfb; border-radius: 50%; color: #fff; content: "→"; font-size: 14px; }
.college-start-grid span { color: var(--orange); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.college-start-grid h3 { margin: 48px 0 12px; font-size: 20px; }
.college-start-grid p { margin: 0; color: #5c626b; font-size: 13px; line-height: 1.8; }
.college-faq { display: grid; grid-template-columns: .66fr 1.34fr; gap: 85px; }
.college-faq-heading > p { margin: 25px 0 0; color: #5b626d; font-size: 14px; }
.college-faq-list details { border-top: 1px solid #dad4cf; }
.college-faq-list details:last-child { border-bottom: 1px solid #dad4cf; }
.college-faq-list summary { display: grid; min-height: 92px; padding: 20px 8px; grid-template-columns: 36px 1fr auto; align-items: center; cursor: pointer; font-size: 15px; font-weight: 800; list-style: none; }
.college-faq-list summary::-webkit-details-marker { display: none; }
.college-faq-list summary span { color: var(--orange); font-size: 16px; }
.college-faq-list summary b { color: var(--orange); font-size: 20px; font-weight: 400; transition: rotate .25s ease; }
.college-faq-list details[open] summary b { rotate: 45deg; }
.college-faq-list details > p { display: grid; margin: 0; padding: 0 8px 28px 36px; grid-template-columns: 36px 1fr; color: #565e68; font-size: 14px; line-height: 2; }
.college-faq-list details > p span { color: var(--orange); font-weight: 800; }
.college-final-cta { display: grid; width: min(100% - 48px, 1440px); min-height: 620px; margin: 40px auto 0; grid-template-columns: .9fr 1.1fr; background: var(--orange-gloss); border-radius: 38px; color: #fff; overflow: hidden; }
.college-final-cta > div { display: flex; padding: 80px clamp(42px, 7vw, 100px); flex-direction: column; justify-content: center; }
.college-final-cta > div > span { font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.college-final-cta h2 { margin: 20px 0 22px; font-size: clamp(39px, 4vw, 60px); line-height: 1.35; letter-spacing: -.05em; }
.college-final-cta p { margin: 0; font-size: 15px; }
.college-final-cta a { display: flex; max-width: 330px; min-height: 62px; margin-top: 38px; padding: 0 24px; align-items: center; justify-content: space-between; background: #fff; border-radius: 999px; color: var(--orange-deep); font-size: 14px; font-weight: 900; }
.college-final-cta figure { min-height: 620px; margin: 0; }
.college-final-cta figure img { width: 100%; height: 100%; object-fit: cover; }
.college-footer { margin-top: 0; padding-top: 100px; }
.college-footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.college-footer-links h3 { margin: 0 0 18px; font-size: 14px; }
.college-footer-links a { display: block; margin: 12px 0; color: #555d68; font-size: 13px; }
.college-footer .footer-bottom > p { margin: 0; font-size: 12px; }
@keyframes college-panel-in { from { opacity: .35; translate: 20px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes college-photo-settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes college-orbit-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -12px; rotate: 4deg; } }
@media (max-width: 1100px) {
.college-page .desktop-nav { gap: 11px; }
.college-page .desktop-nav a { font-size: 10px; }
.college-page .desktop-nav .nav-diagnosis, .college-page .desktop-nav .nav-cta { padding-right: 11px; padding-left: 11px; }
.college-hero { grid-template-columns: .9fr 1.1fr; }
.college-hero-actions { flex-direction: column; align-items: flex-start; }
.college-button { width: min(100%, 290px); }
.college-instructor-grid article { grid-template-columns: 1fr; }
.college-instructor-grid figure { height: 270px; }
}
@media (max-width: 760px) {
.college-page .college-header { width: calc(100% - 28px); height: 72px; }
.college-page .mobile-menu summary { color: var(--orange-deep); }
.college-section { width: calc(100% - 32px); padding: 96px 0; }
.college-title h2 { margin-top: 12px; font-size: clamp(30px, 10vw, 42px); line-height: 1.35; }
.college-title > span { font-size: 10px; }
.college-section-lead { margin: 22px 8px 42px; font-size: 14px; line-height: 1.9; }
.college-split-heading { grid-template-columns: 1fr; gap: 26px; margin-bottom: 42px; }
.college-split-heading > p { font-size: 14px; line-height: 1.9; }
.college-hero {
width: calc(100% - 20px);
min-height: auto;
margin-bottom: 54px;
grid-template-columns: 1fr;
border-radius: 24px;
}
.college-hero::before { top: -220px; left: -270px; }
.college-hero-copy { padding: 62px 24px 45px; }
.college-eyebrow { margin-bottom: 20px; flex-wrap: wrap; gap: 10px; font-size: 8px !important; }
.college-eyebrow span { font-size: 11px; }
.college-hero h1 { font-size: clamp(45px, 14.4vw, 62px); line-height: 1.18; }
.college-hero-copy > p:not(.college-eyebrow) { margin-top: 28px; font-size: 14px; line-height: 1.9; }
.college-hero-actions { gap: 10px; margin-top: 28px; }
.college-button { width: 100%; min-height: 58px; }
.college-hero-visual { min-height: 520px; }
.college-hero-main { top: 0; right: 0; bottom: 20px; left: 24px; border-radius: 110px 18px 18px 18px; }
.college-hero-sub { right: 8px; bottom: 4px; width: 42%; border-width: 5px; }
.college-hero-note { bottom: 30px; left: 7px; min-width: 150px; padding: 14px 16px; }
.college-hero-note strong { font-size: 20px; }
.college-hero-orbit { top: -20px; left: 2px; width: 84px; }
.college-hero-orbit span:nth-child(1) { top: 16px; left: 24px; }
.college-hero-orbit span:nth-child(2) { top: 39px; left: 16px; }
.college-hero-orbit span:nth-child(3) { top: 58px; left: 31px; }
.college-hero-scroll { display: none; }
.college-manifesto { width: calc(100% - 40px); padding: 44px 0 84px; grid-template-columns: 1fr; gap: 34px; }
.college-manifesto > div { grid-template-columns: 1fr; gap: 24px; }
.college-manifesto span { font-size: 30px; line-height: 1.55; }
.college-manifesto div p { font-size: 14px; line-height: 1.95; }
.college-paths { padding-top: 105px; }
.college-path-switcher { margin-top: 42px; }
.college-path-tabs { gap: 8px; }
.college-path-tabs button { min-height: 78px; padding: 0 16px; grid-template-columns: auto 1fr; gap: 10px; border-radius: 16px; }
.college-path-tabs button span { font-size: 16px; }
.college-path-tabs button b { display: none; }
.college-path-stage { min-height: 0; grid-template-columns: 1fr; border-radius: 20px; }
.college-path-stage figure { min-height: 300px; height: 300px; }
.college-path-stage > div { padding: 38px 24px 42px; }
.college-path-stage h3 { font-size: 34px; }
.college-path-stage > div > p { font-size: 14px; line-height: 1.9; }
.college-path-stage ul { grid-template-columns: 1fr; }
.college-monthly, .college-reasons, .college-voices, .college-pricing {
width: calc(100% - 20px);
padding-right: 20px;
padding-left: 20px;
border-radius: 26px;
}
.college-feature-grid { grid-template-columns: 1fr; gap: 12px; }
.college-feature-grid article { min-height: 260px; padding: 26px; }
.college-feature-grid h3 { margin-top: 46px; }
.college-archive-ribbon { margin-right: -10px; margin-left: -10px; overflow-x: auto; scrollbar-width: none; }
.college-seminar-grid { display: flex; margin-right: -16px; padding-right: 16px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.college-seminar-grid article { flex: 0 0 84vw; scroll-snap-align: start; }
.college-seminar-grid figure { height: 235px; }
.college-reason-list { margin-top: 44px; }
.college-reason-list article { grid-template-columns: 1fr; gap: 8px; padding: 24px 0 42px; }
.college-reason-list article:nth-child(even) figure { order: 0; }
.college-reason-list figure { height: 260px; border-radius: 20px; }
.college-reason-list div { padding: 20px 8px 0; }
.college-reason-list h3 { font-size: 28px; }
.college-reason-list p { font-size: 14px; }
.college-live { width: calc(100% - 20px); min-height: 0; grid-template-columns: 1fr; border-radius: 26px; }
.college-live-photo { min-height: 330px; height: 330px; }
.college-live-overlay { padding: 54px 24px 58px; }
.college-live-overlay > p { font-size: 14px; line-height: 1.9; }
.college-live-overlay > a { max-width: none; }
.college-report-heading { align-items: flex-start; flex-direction: column; gap: 28px; }
.college-report-track { display: flex; margin-right: -16px; padding-right: 16px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.college-report-track article { flex: 0 0 82vw; scroll-snap-align: start; }
.college-report-track figure { height: 265px; }
.college-voice-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }
.college-voice-grid article { min-height: 0; grid-template-rows: 240px 1fr; }
.college-voice-grid article > div { padding: 30px 24px; }
.college-instructor-grid { grid-template-columns: 1fr; gap: 12px; }
.college-instructor-grid article { grid-template-columns: 1fr; }
.college-instructor-grid figure { height: 280px; }
.college-price-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 50px; }
.college-price-grid article { min-height: 490px; padding: 30px 24px; }
.college-price-grid article.is-featured { order: -1; transform: none; }
.college-start-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }
.college-start-grid article { min-height: 210px; }
.college-start-grid article:not(:last-child)::after { top: auto; right: 24px; bottom: -24px; content: "↓"; }
.college-faq { grid-template-columns: 1fr; gap: 46px; }
.college-faq-list summary { min-height: 84px; grid-template-columns: 32px 1fr auto; font-size: 14px; line-height: 1.6; }
.college-faq-list details > p { padding-left: 32px; grid-template-columns: 32px 1fr; font-size: 13px; }
.college-final-cta { width: calc(100% - 20px); min-height: 0; grid-template-columns: 1fr; border-radius: 26px; }
.college-final-cta > div { padding: 62px 24px; }
.college-final-cta h2 { font-size: 38px; }
.college-final-cta figure { min-height: 340px; height: 340px; }
.college-footer { padding-top: 74px; }
.college-footer .footer-top { grid-template-columns: 1fr; gap: 54px; }
.college-footer-links { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
.college-footer-links h3 { font-size: 13px; }
.college-footer-links a { font-size: 12px; line-height: 1.5; }
.college-footer .footer-bottom { grid-template-columns: 1fr; gap: 16px; }
.college-footer .footer-bottom > p { font-size: 10px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
.college-hero-orbit, .college-path-stage, .college-path-stage figure img { animation: none !important; }
}
.college-page .college-header {
position: sticky;
top: 0;
width: 100%;
padding: 0 clamp(22px, 3vw, 46px);
background: rgb(255 253 251 / 94%);
border-bottom: 1px solid rgb(255 92 50 / 15%);
}
.college-page .college-header .brand-logo { width: 112px; }
.college-hero {
display: block;
width: calc(100% - 36px);
min-height: calc(100svh - 108px);
isolation: isolate;
margin: 0 auto 0;
background: var(--ink);
border-radius: 0 0 36px 36px;
}
.college-hero::before {
z-index: -1;
top: auto;
right: auto;
bottom: -380px;
left: -280px;
width: 690px;
height: 690px;
border: 1px solid rgb(255 255 255 / 20%);
box-shadow: 0 0 0 85px rgb(255 92 50 / 8%), 0 0 0 160px rgb(255 255 255 / 5%);
opacity: 1;
}
.college-hero::after {
position: absolute;
z-index: -1;
inset: 0;
background:
linear-gradient(90deg, rgb(7 19 41 / 94%) 0%, rgb(7 19 41 / 79%) 36%, rgb(7 19 41 / 20%) 69%, rgb(7 19 41 / 8%) 100%),
linear-gradient(0deg, rgb(7 19 41 / 42%), transparent 50%);
content: "";
}
.college-hero-backdrop { position: absolute; z-index: -2; inset: 0; margin: 0; overflow: hidden; }
.college-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: college-hero-photo 9s ease-out both; }
.college-hero-copy {
width: min(100%, 1440px);
min-height: calc(100svh - 108px);
padding: clamp(72px, 9vh, 110px) 8% 80px;
color: #fff;
}
.college-eyebrow { color: rgb(255 255 255 / 72%); }
.college-eyebrow span { background: transparent; border: 1px solid rgb(255 255 255 / 60%); color: #fff; }
.college-hero-question {
width: fit-content;
margin: 0 0 20px !important;
color: #ff9b77 !important;
font-size: clamp(18px, 1.7vw, 26px) !important;
font-weight: 700;
line-height: 1.55 !important;
letter-spacing: .04em;
rotate: -2deg;
}
.college-hero h1 { max-width: 790px; color: #fff; font-size: clamp(54px, 6.2vw, 96px); line-height: 1.16; }
.college-hero h1 em { color: #ff8059; text-shadow: 0 0 34px rgb(255 111 68 / 30%); }
.college-hero-role { display: inline; }
.college-hero h1 em::after { bottom: -8px; }
.college-hero-copy > p:not(.college-eyebrow):not(.college-hero-question) { max-width: 640px; color: rgb(255 255 255 / 84%); font-size: 15px; }
.college-hero .college-button { border-color: #fff; }
.college-hero .college-button.is-primary { background: var(--orange-gloss); border-color: transparent; }
.college-hero .college-button.is-ghost { background: rgb(7 19 41 / 26%); color: #fff; backdrop-filter: blur(10px); }
.college-hero-orbit { top: 9%; right: 5%; left: auto; width: 116px; background: rgb(255 92 50 / 88%); border: 1px solid rgb(255 255 255 / 50%); backdrop-filter: blur(8px); }
.college-hero-side {
position: absolute;
right: 22px;
bottom: 32px;
margin: 0;
color: #fff;
font-size: 9px;
font-weight: 900;
letter-spacing: .18em;
writing-mode: vertical-rl;
}
.college-hero-scroll { color: rgb(255 255 255 / 64%); }
.college-word-stream {
width: 100%;
padding: 20px 0 23px;
background: var(--orange-gloss);
color: #fff;
overflow: hidden;
}
.college-word-stream > div { display: flex; width: max-content; gap: 28px; animation: college-word-flow 22s linear infinite; }
.college-word-stream span { font-size: clamp(38px, 5vw, 72px); font-weight: 900; letter-spacing: -.05em; }
.college-word-stream span::after { margin-left: 28px; color: rgb(255 255 255 / 38%); content: "✦"; font-size: .55em; vertical-align: middle; }
.college-manifesto { position: relative; min-height: 590px; padding-top: 150px; padding-bottom: 150px; align-items: center; overflow: hidden; }
.college-manifesto::before,
.college-manifesto::after { position: absolute; z-index: -1; border-radius: 48% 52% 60% 40%; background: #fff1e8; content: ""; filter: blur(1px); animation: college-blob 12s ease-in-out infinite alternate; }
.college-manifesto::before { top: 70px; left: -150px; width: 430px; height: 350px; }
.college-manifesto::after { right: -120px; bottom: 20px; width: 300px; height: 250px; animation-delay: -4s; }
.college-manifesto span { font-size: clamp(36px, 4.25vw, 66px); line-height: 1.45; }
.college-career-map {
display: grid;
width: min(100% - 36px, 1440px);
padding: 130px max(36px, calc((100% - 1240px) / 2)) 0;
grid-template-columns: 1fr .9fr;
gap: 90px;
background: #fff1e7;
border-radius: 36px;
overflow: hidden;
}
.college-career-visual { position: relative; min-height: 590px; }
.college-career-ring {
position: absolute;
top: 50%;
left: 50%;
display: grid;
width: min(36vw, 450px);
aspect-ratio: 1;
place-content: center;
border: 1px solid #ff9c78;
border-radius: 50%;
color: var(--orange-deep);
text-align: center;
translate: -50% -50%;
}
.college-career-ring::before,
.college-career-ring::after { position: absolute; border: 1px solid rgb(255 92 50 / 22%); border-radius: 50%; content: ""; }
.college-career-ring::before { inset: -42px; }
.college-career-ring::after { inset: 42px; }
.college-career-ring span { font-size: clamp(100px, 12vw, 180px); font-weight: 900; line-height: .85; letter-spacing: -.08em; }
.college-career-ring small { margin-top: 20px; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.college-career-skill { position: absolute; z-index: 2; padding: 12px 20px; background: #fff; border-radius: 999px; box-shadow: 0 12px 35px rgb(117 55 23 / 9%); font-size: 13px; font-weight: 800; animation: college-skill-float 5s ease-in-out infinite; }
.college-career-skill.skill-1 { top: 6%; left: 8%; }
.college-career-skill.skill-2 { top: 18%; right: 1%; animation-delay: -1s; }
.college-career-skill.skill-3 { top: 47%; left: 0; animation-delay: -2s; }
.college-career-skill.skill-4 { top: 57%; right: -1%; animation-delay: -3s; }
.college-career-skill.skill-5 { bottom: 9%; left: 14%; animation-delay: -4s; }
.college-career-skill.skill-6 { right: 9%; bottom: 5%; animation-delay: -2.5s; }
.college-career-copy { display: flex; padding-bottom: 145px; flex-direction: column; justify-content: center; }
.college-mini-label { color: var(--orange-deep); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.college-career-copy h2 { margin: 20px 0 25px; font-size: clamp(43px, 4.6vw, 68px); line-height: 1.32; letter-spacing: -.055em; }
.college-career-copy p { max-width: 520px; margin: 0; color: #565c65; font-size: 15px; line-height: 2.05; }
.college-career-copy a { display: flex; width: fit-content; min-width: 260px; margin-top: 36px; padding: 17px 20px; justify-content: space-between; border-bottom: 2px solid var(--orange); color: var(--orange-deep); font-size: 13px; font-weight: 900; }
.college-proof-strip { display: grid; grid-column: 1 / -1; margin: 0 calc(-1 * max(36px, calc((100% - 1240px) / 2))); grid-template-columns: repeat(3, 1fr); background: var(--ink); color: #fff; }
.college-proof-strip p { display: flex; min-height: 150px; margin: 0; padding: 30px; align-items: center; justify-content: center; gap: 18px; border-right: 1px solid rgb(255 255 255 / 15%); }
.college-proof-strip strong { color: #ff8a64; font-size: clamp(32px, 4vw, 56px); letter-spacing: -.05em; }
.college-proof-strip span { color: rgb(255 255 255 / 72%); font-size: 12px; font-weight: 700; line-height: 1.6; }
.college-paths { padding-top: 180px; }
.college-path-tabs { gap: 0; border-top: 1px solid #dcd6d2; border-bottom: 1px solid #dcd6d2; }
.college-path-tabs button { min-height: 112px; padding: 0 36px; border: 0; border-right: 1px solid #dcd6d2; border-radius: 0; background: transparent; box-shadow: none !important; }
.college-path-tabs button:last-child { border-right: 0; }
.college-path-tabs button.is-active { background: var(--ink); }
.college-path-tabs button small { font-size: 14px; }
.college-path-tabs button span { font-size: 25px; }
.college-path-stage { min-height: 680px; border: 0; border-radius: 0; box-shadow: none; }
.college-path-stage figure { min-height: 680px; }
.college-path-stage > div { background: #fff5ee; }
.college-path-stage h3 { font-size: clamp(42px, 4.8vw, 68px); }
.college-monthly { width: min(100% - 80px, 1240px); padding-right: 0; padding-left: 0; background: transparent; border-radius: 0; }
.college-feature-grid { gap: 0; border-top: 1px solid #dcd6d2; }
.college-feature-grid article { min-height: 330px; padding: 38px 32px 38px 0; background: transparent; border-bottom: 1px solid #dcd6d2; border-radius: 0; box-shadow: none; }
.college-feature-grid article:nth-child(odd) { padding-right: 55px; border-right: 1px solid #dcd6d2; }
.college-feature-grid article:nth-child(even) { padding-left: 55px; }
.college-feature-grid header strong { font-size: 62px; }
.college-feature-grid h3 { font-size: 29px; }
.college-archive-ribbon { justify-content: center; }
.college-topic-stream { width: 100vw; margin: 0 calc(50% - 50vw) 55px; overflow: hidden; }
.college-topic-stream > div { display: flex; width: max-content; gap: 10px; animation: college-topic-flow 42s linear infinite; }
.college-topic-stream span { display: flex; min-height: 56px; padding: 0 22px; align-items: center; gap: 28px; background: var(--ink); border-radius: 999px; color: #fff; font-size: 13px; font-weight: 800; }
.college-topic-stream b { color: #ff815b; }
.college-seminar-grid { gap: 0; border-top: 1px solid #d9d4d0; }
.college-seminar-grid article { border: 0; border-right: 1px solid #d9d4d0; border-radius: 0; }
.college-seminar-grid article:last-child { border-right: 0; }
.college-seminar-grid article:hover { box-shadow: none; }
.college-seminar-grid figure { height: 320px; }
.college-voice-heading { display: grid; grid-template-columns: 1fr .75fr; gap: 100px; align-items: end; }
.college-voice-heading > p { margin: 0 0 8px; color: rgb(255 255 255 / 70%); font-size: 15px; line-height: 2; }
.college-voice-grid { grid-template-columns: repeat(2, 1fr); }
.college-voice-grid article:first-child { grid-column: 1 / -1; min-height: 620px; grid-template-columns: 1.08fr .92fr; grid-template-rows: 1fr; }
.college-voice-grid article:first-child figure { min-height: 620px; }
.college-voice-grid article:first-child > div { display: flex; padding: 70px; flex-direction: column; justify-content: center; }
.college-voice-grid article:first-child h3 { font-size: 32px; }
.college-voice-grid article:not(:first-child) { background: transparent; border-top: 1px solid rgb(255 255 255 / 20%); border-radius: 0; color: #fff; }
.college-voice-grid article:not(:first-child) > div { padding-right: 10px; padding-left: 10px; }
.college-voice-grid article:not(:first-child) h3 { color: #fff; }
.college-voice-grid article:not(:first-child) p { color: rgb(255 255 255 / 68%); }
.college-voice-grid article:not(:first-child) div > span { color: #ff9e7d; }
.college-instructors { width: 100%; overflow: hidden; }
.college-instructors .college-split-heading { width: min(100% - 80px, 1240px); margin-right: auto; margin-left: auto; }
.college-instructor-viewport { width: 100%; overflow: hidden; }
.college-instructor-grid { display: flex; width: max-content; gap: 18px; animation: college-instructor-flow 52s linear infinite; }
.college-instructor-viewport:hover .college-instructor-grid { animation-play-state: paused; }
.college-instructor-grid article { display: grid; width: 330px; min-height: 520px; flex: 0 0 330px; grid-template-columns: 1fr; grid-template-rows: 330px 1fr; background: transparent; border-radius: 0; }
.college-instructor-grid figure { height: 330px; min-height: 0; background: #fff1e7; border-radius: 50% 50% 22px 22px; overflow: hidden; }
.college-instructor-grid figure img { object-position: center top; }
.college-instructor-grid article > div { padding: 25px 8px 0; justify-content: flex-start; }
.college-instructor-grid small { min-height: 34px; }
.college-instructor-grid h3 { margin: 8px 0 11px; font-size: 23px; }
.college-price-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.college-price-grid article,
.college-price-grid article.is-featured { min-height: 590px; padding: 54px 48px; border: 0; border-radius: 0; transform: none; box-shadow: none; }
.college-price-grid article:first-child { background: var(--orange-gloss); color: #fff; }
.college-price-grid article:first-child > span,
.college-price-grid article:first-child .college-price,
.college-price-grid article:first-child > p:not(.college-price) { color: #fff; }
.college-price-grid article:first-child ul { border-color: rgb(255 255 255 / 25%); }
.college-price-grid article:first-child a { background: #fff; color: var(--orange-deep); }
.college-price-grid article:last-child { background: #fff; }
.college-price-grid article > small { top: 24px; }
.college-consult-note { display: flex; margin-top: 20px; padding: 35px 42px; align-items: center; justify-content: space-between; gap: 40px; background: var(--ink); color: #fff; }
.college-consult-note span { color: #ff8c67; font-size: 19px; font-weight: 900; }
.college-consult-note p { max-width: 680px; margin: 9px 0 0; color: rgb(255 255 255 / 70%); font-size: 13px; line-height: 1.8; }
.college-consult-note a { display: flex; min-width: 260px; min-height: 56px; padding: 0 20px; align-items: center; justify-content: space-between; background: #fff; border-radius: 999px; color: var(--ink); font-size: 12px; font-weight: 900; }
.college-final-cta { min-height: 760px; grid-template-columns: 1fr 1fr; }
.college-final-cta figure { min-height: 760px; }
.college-final-cta h2 { font-size: clamp(48px, 5.2vw, 76px); }
@keyframes college-hero-photo { from { scale: 1.08; } to { scale: 1; } }
@keyframes college-word-flow { to { transform: translateX(calc(-50% - 14px)); } }
@keyframes college-topic-flow { to { transform: translateX(calc(-50% - 5px)); } }
@keyframes college-instructor-flow { to { transform: translateX(calc(-50% - 9px)); } }
@keyframes college-blob { to { translate: 45px 24px; rotate: 16deg; border-radius: 62% 38% 42% 58%; } }
@keyframes college-skill-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 760px) {
.college-page .college-header { width: 100%; padding: 0 15px; }
.college-hero { width: calc(100% - 12px); min-height: 800px; border-radius: 0 0 24px 24px; }
.college-hero::after { background: linear-gradient(0deg, rgb(7 19 41 / 97%) 0%, rgb(7 19 41 / 82%) 48%, rgb(7 19 41 / 16%) 100%); }
.college-hero-backdrop { height: 52%; }
.college-hero-backdrop img { object-position: 56% center; }
.college-hero-copy { min-height: 800px; padding: 330px 22px 48px; justify-content: flex-end; }
.college-eyebrow { margin-bottom: 14px; }
.college-hero-question { margin-bottom: 14px !important; font-size: 17px !important; }
.college-hero h1 { max-width: 100%; font-size: clamp(39px, 11.5vw, 46px); line-height: 1.2; overflow-wrap: anywhere; }
.college-hero-role { display: block; }
.college-hero-copy > p:not(.college-eyebrow):not(.college-hero-question) { margin-top: 22px; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.college-hero-actions { flex-direction: row; flex-wrap: wrap; }
.college-hero .college-button { width: 100%; }
.college-hero-orbit { top: 22px; right: 18px; left: auto; width: 82px; }
.college-hero-side { display: none; }
.college-word-stream { padding: 14px 0 16px; }
.college-word-stream span { font-size: 38px; }
.college-manifesto { min-height: 0; padding-top: 100px; padding-bottom: 100px; }
.college-manifesto span { font-size: 31px; }
.college-career-map { width: calc(100% - 12px); padding: 75px 20px 0; grid-template-columns: 1fr; gap: 25px; border-radius: 24px; }
.college-career-visual { min-height: 390px; }
.college-career-ring { width: 260px; }
.college-career-ring span { font-size: 110px; }
.college-career-skill { padding: 9px 13px; font-size: 11px; }
.college-career-copy { padding-bottom: 80px; }
.college-career-copy h2 { font-size: 39px; }
.college-career-copy p { font-size: 14px; }
.college-proof-strip { margin: 0 -20px; grid-template-columns: 1fr; }
.college-proof-strip p { min-height: 105px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 15%); }
.college-path-tabs button { min-height: 85px; padding: 0 13px; }
.college-path-tabs button span { font-size: 15px; }
.college-path-stage { min-height: 0; }
.college-path-stage figure { min-height: 310px; }
.college-path-stage > div { padding: 42px 24px 50px; }
.college-path-stage h3 { font-size: 34px; }
.college-monthly { width: calc(100% - 32px); }
.college-feature-grid { grid-template-columns: 1fr; }
.college-feature-grid article,
.college-feature-grid article:nth-child(odd),
.college-feature-grid article:nth-child(even) { min-height: 260px; padding: 28px 8px; border-right: 0; }
.college-feature-grid header strong { font-size: 48px; }
.college-topic-stream { margin-bottom: 38px; }
.college-seminar-grid { border-top: 0; }
.college-seminar-grid article { border: 1px solid #ddd5d0; border-radius: 16px; }
.college-voice-heading { grid-template-columns: 1fr; gap: 26px; }
.college-voice-heading > p { font-size: 14px; }
.college-voice-grid { grid-template-columns: 1fr; }
.college-voice-grid article:first-child { grid-column: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: 250px 1fr; }
.college-voice-grid article:first-child figure { min-height: 0; }
.college-voice-grid article:first-child > div { padding: 34px 24px; }
.college-voice-grid article:first-child h3 { font-size: 22px; }
.college-instructors .college-split-heading { width: calc(100% - 32px); }
.college-instructor-grid article { width: 275px; min-height: 475px; flex-basis: 275px; grid-template-rows: 275px 1fr; }
.college-instructor-grid figure { height: 275px; }
.college-price-grid { grid-template-columns: 1fr; }
.college-price-grid article,
.college-price-grid article.is-featured { min-height: 530px; padding: 42px 25px; }
.college-consult-note { align-items: stretch; flex-direction: column; padding: 30px 24px; }
.college-consult-note a { min-width: 0; }
.college-final-cta { min-height: 0; grid-template-columns: 1fr; }
.college-final-cta figure { min-height: 360px; height: 360px; }
.college-final-cta h2 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) {
.college-hero-backdrop img,
.college-word-stream > div,
.college-topic-stream > div,
.college-instructor-grid,
.college-career-skill,
.college-manifesto::before,
.college-manifesto::after { animation: none !important; }
}
.college-career-map {
padding-top: 96px;
grid-template-columns: .88fr 1.12fr;
gap: 76px;
}
.college-career-visual {
position: relative;
align-self: center;
min-height: 0;
padding: 54px 42px 36px;
background: rgb(255 255 255 / 78%);
border: 1px solid rgb(255 92 50 / 16%);
box-shadow: 0 28px 70px rgb(118 60 27 / 10%);
overflow: hidden;
}
.college-career-visual::before {
position: absolute;
top: -95px;
right: -80px;
width: 260px;
height: 260px;
border: 1px solid rgb(255 92 50 / 15%);
border-radius: 50%;
box-shadow: 0 0 0 38px rgb(255 92 50 / 4%), 0 0 0 72px rgb(255 92 50 / 3%);
content: "";
}
.college-career-visual figure { position: relative; z-index: 1; margin: 0; }
.college-career-visual figure img { width: 100%; height: auto; object-fit: contain; }
.college-diagnosis-badges { position: absolute; z-index: 3; top: 18px; left: 20px; display: flex; gap: 7px; }
.college-diagnosis-badges span { padding: 7px 11px; background: #fff; border: 1px solid rgb(255 92 50 / 20%); border-radius: 999px; color: var(--orange-deep); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.college-career-visual > p { position: absolute; z-index: 3; right: 20px; bottom: 18px; display: flex; margin: 0; align-items: flex-end; gap: 8px; color: var(--orange-deep); }
.college-career-visual > p strong { font-size: 55px; line-height: .8; letter-spacing: -.08em; }
.college-career-visual > p span { font-size: 8px; font-weight: 900; line-height: 1.3; letter-spacing: .14em; }
.college-career-copy { padding-bottom: 105px; }
.college-career-copy > p { max-width: 610px; }
.college-career-groups { display: grid; margin-top: 34px; grid-template-columns: 1fr 1fr; border-top: 1px solid rgb(240 77 36 / 20%); border-left: 1px solid rgb(240 77 36 / 20%); }
.college-career-groups > div { display: grid; min-height: 118px; padding: 19px 17px; grid-template-columns: 26px 1fr; gap: 10px; border-right: 1px solid rgb(240 77 36 / 20%); border-bottom: 1px solid rgb(240 77 36 / 20%); }
.college-career-groups > div > span { color: var(--orange-deep); font-size: 10px; font-weight: 900; }
.college-career-groups p { margin: 0; }
.college-career-groups strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.55; }
.college-career-groups small { display: block; margin-top: 8px; color: #74706c; font-size: 10px; line-height: 1.6; }
.college-career-actions { display: flex; margin-top: 28px; gap: 12px; }
.college-career-copy .college-career-actions a { min-width: 0; margin: 0; padding: 16px 18px; background: var(--orange-gloss); border: 0; border-radius: 999px; color: #fff; }
.college-career-copy .college-career-actions .is-secondary { background: transparent; border: 1px solid var(--orange); color: var(--orange-deep); }
.college-learning-feed {
width: min(100% - 36px, 1440px);
padding: 145px max(40px, calc((100% - 1240px) / 2));
background:
radial-gradient(circle at 92% 4%, rgb(255 112 70 / 18%) 0 150px, transparent 151px),
radial-gradient(circle at 7% 55%, rgb(255 255 255 / 5%) 0 220px, transparent 221px),
var(--ink);
border-radius: 36px;
color: #fff;
overflow: hidden;
}
.college-feed-intro { display: grid; grid-template-columns: 1fr .8fr; gap: 90px; align-items: end; }
.college-learning-feed .college-title > span { color: #ff9370; }
.college-learning-feed .college-title h2 { color: #fff; }
.college-feed-intro > div:last-child > p { max-width: 520px; margin: 0; color: rgb(255 255 255 / 68%); font-size: 15px; line-height: 2; }
.college-feed-intro > div:last-child > a { display: flex; width: min(100%, 300px); min-height: 58px; margin-top: 28px; padding: 0 20px; align-items: center; justify-content: space-between; background: var(--orange-gloss); border-radius: 999px; color: #fff; font-size: 12px; font-weight: 900; }
.college-next-class { position: relative; display: grid; min-height: 360px; margin-top: 78px; padding: 58px 54px; grid-template-columns: .55fr 1.1fr .28fr; gap: 50px; align-items: center; background: var(--orange-gloss); overflow: hidden; }
.college-next-class::after { position: absolute; right: -110px; bottom: -170px; width: 380px; height: 380px; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; box-shadow: 0 0 0 48px rgb(255 255 255 / 5%), 0 0 0 96px rgb(255 255 255 / 3%); content: ""; }
.college-next-date { position: relative; z-index: 1; display: flex; flex-direction: column; }
.college-next-date small { font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.college-next-date strong { margin-top: 18px; font-size: clamp(62px, 7vw, 100px); line-height: .9; letter-spacing: -.085em; }
.college-next-date span { margin-top: 18px; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.college-next-copy { position: relative; z-index: 1; }
.college-next-copy > span { font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.college-next-copy h3 { margin: 16px 0 18px; font-size: clamp(34px, 3.8vw, 55px); line-height: 1.25; letter-spacing: -.04em; }
.college-next-copy p { max-width: 570px; margin: 0; color: rgb(255 255 255 / 82%); font-size: 14px; line-height: 1.9; }
.college-live-mark { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.college-live-mark i { position: relative; width: 82px; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 65%); border-radius: 50%; }
.college-live-mark i::before { position: absolute; inset: 13px; background: #fff; border-radius: 50%; content: ""; animation: college-live-pulse 1.9s ease-in-out infinite; }
.college-live-mark span { font-size: 9px; font-weight: 900; line-height: 1.5; letter-spacing: .17em; text-align: center; }
.college-upcoming-classes { display: grid; grid-template-columns: repeat(3, 1fr); border-right: 1px solid rgb(255 255 255 / 17%); border-bottom: 1px solid rgb(255 255 255 / 17%); border-left: 1px solid rgb(255 255 255 / 17%); }
.college-upcoming-classes article { display: grid; min-height: 170px; padding: 31px 27px; grid-template-columns: 74px 1fr auto; gap: 20px; align-items: center; border-right: 1px solid rgb(255 255 255 / 17%); }
.college-upcoming-classes article:last-child { border-right: 0; }
.college-upcoming-classes time { display: flex; flex-direction: column; }
.college-upcoming-classes time strong { color: #ff9370; font-size: 25px; letter-spacing: -.04em; }
.college-upcoming-classes time span { margin-top: 4px; color: rgb(255 255 255 / 52%); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.college-upcoming-classes small { color: #ff9370; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.college-upcoming-classes h3 { margin: 8px 0 0; color: #fff; font-size: 16px; line-height: 1.55; }
.college-upcoming-classes article > b { color: rgb(255 255 255 / 42%); font-size: 20px; }
.college-short-heading { display: grid; margin: 125px 0 48px; grid-template-columns: 1fr .8fr; gap: 90px; align-items: end; }
.college-short-heading span { color: #ff9370; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.college-short-heading h3 { margin: 15px 0 0; color: #fff; font-size: clamp(36px, 4.2vw, 61px); letter-spacing: -.045em; }
.college-short-heading > p { margin: 0; color: rgb(255 255 255 / 62%); font-size: 14px; line-height: 2; }
.college-short-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.college-short-track::-webkit-scrollbar { display: none; }
.college-short-card { width: 286px; flex: 0 0 286px; color: #fff; scroll-snap-align: start; }
.college-short-card figure { position: relative; height: 375px; margin: 0; background: #d8d4d0; overflow: hidden; }
.college-short-card figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(7 19 41 / 72%)); content: ""; }
.college-short-card figure img { width: 100%; height: 100%; object-fit: cover; transition: scale .45s ease; }
.college-short-card:hover figure img { scale: 1.035; }
.college-short-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 66px; aspect-ratio: 1; place-items: center; background: rgb(255 255 255 / 90%); border-radius: 50%; color: var(--orange-deep); font-size: 17px; translate: -50% -50%; }
.college-short-card figure small { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: 6px 8px; background: rgb(7 19 41 / 76%); border-radius: 999px; font-size: 9px; }
.college-short-card figure b { position: absolute; z-index: 2; bottom: 7px; left: 12px; color: rgb(255 255 255 / 30%); font-size: 74px; line-height: 1; }
.college-short-card > div { padding: 20px 4px 0; }
.college-short-card > div > span { color: #ff9370; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.college-short-card h3 { min-height: 59px; margin: 11px 0 10px; color: #fff; font-size: 19px; line-height: 1.55; }
.college-short-card p { margin: 0; color: rgb(255 255 255 / 57%); font-size: 12px; line-height: 1.75; }
.college-feed-footer { display: flex; margin-top: 72px; padding-top: 31px; align-items: center; justify-content: space-between; gap: 40px; border-top: 1px solid rgb(255 255 255 / 18%); }
.college-feed-footer p { margin: 0; color: rgb(255 255 255 / 68%); font-size: 12px; }
.college-feed-footer p span { margin-right: 9px; color: #ff9370; font-weight: 900; letter-spacing: .12em; }
.college-feed-footer > a { display: flex; min-width: 270px; min-height: 55px; padding: 0 18px; align-items: center; justify-content: space-between; background: #fff; border-radius: 999px; color: var(--ink); font-size: 12px; font-weight: 900; }
@keyframes college-live-pulse { 0%, 100% { scale: .72; opacity: .7; } 50% { scale: 1; opacity: 1; } }
@media (max-width: 760px) {
.college-career-map { padding-top: 68px; grid-template-columns: 1fr; gap: 48px; }
.college-career-visual { padding: 47px 12px 29px; }
.college-diagnosis-badges { top: 12px; left: 12px; }
.college-diagnosis-badges span { padding: 6px 8px; font-size: 8px; }
.college-career-visual > p { right: 12px; bottom: 10px; }
.college-career-visual > p strong { font-size: 43px; }
.college-career-copy { padding-bottom: 75px; }
.college-career-copy h2 { font-size: 37px; }
.college-career-groups { grid-template-columns: 1fr; }
.college-career-groups > div { min-height: 104px; }
.college-career-actions { align-items: stretch; flex-direction: column; }
.college-career-copy .college-career-actions a { width: 100%; }
.college-learning-feed { width: calc(100% - 12px); padding: 88px 20px 96px; border-radius: 24px; }
.college-feed-intro { grid-template-columns: 1fr; gap: 28px; }
.college-feed-intro > div:last-child > p { font-size: 14px; }
.college-next-class { min-height: 0; margin-top: 55px; padding: 36px 24px 40px; grid-template-columns: 1fr; gap: 29px; }
.college-next-date strong { font-size: 63px; }
.college-next-copy h3 { font-size: 34px; }
.college-live-mark { position: absolute; top: 25px; right: 20px; }
.college-live-mark i { width: 52px; }
.college-live-mark i::before { inset: 9px; }
.college-live-mark span { display: none; }
.college-upcoming-classes { grid-template-columns: 1fr; }
.college-upcoming-classes article { min-height: 132px; padding: 25px 19px; grid-template-columns: 62px 1fr auto; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 17%); }
.college-upcoming-classes article:last-child { border-bottom: 0; }
.college-upcoming-classes time strong { font-size: 21px; }
.college-upcoming-classes h3 { font-size: 15px; }
.college-short-heading { margin: 92px 0 36px; grid-template-columns: 1fr; gap: 22px; }
.college-short-heading h3 { font-size: 37px; line-height: 1.35; }
.college-short-card { width: 78vw; flex-basis: 78vw; }
.college-short-card figure { height: 108vw; max-height: 430px; }
.college-feed-footer { align-items: stretch; flex-direction: column; }
.college-feed-footer p { line-height: 1.8; }
.college-feed-footer > a { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
.college-live-mark i::before { animation: none; }
}
.ccx-page {
--ccx-peach: #fff0e8;
--ccx-cream: #fffaf6;
background: #fff;
color: var(--ink);
}
.ccx-page main { overflow: clip; }
.ccx-page main > section + section { margin-top: 0; }
.ccx-section { width: min(100% - 64px, 1180px); margin: 0 auto; padding: 104px 0; }
.ccx-title > span { display: inline-flex; align-items: center; gap: 10px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.ccx-title > span::before { width: 26px; height: 2px; background: currentColor; content: ""; }
.ccx-title h2 { margin: 13px 0 0; font-size: clamp(35px, 4vw, 56px); line-height: 1.35; letter-spacing: -.045em; }
.ccx-title.is-center { text-align: center; }
.ccx-title.is-center > span::after { width: 26px; height: 2px; background: currentColor; content: ""; }
.ccx-button { display: inline-flex; min-height: 54px; padding: 0 22px; align-items: center; justify-content: space-between; gap: 26px; border: 1px solid var(--orange); border-radius: 4px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 850; }
.ccx-button.is-primary { background: var(--orange-gloss); color: #fff; box-shadow: 0 12px 28px rgb(236 73 32 / 18%); }
.ccx-actions { display: flex; margin-top: 30px; gap: 12px; flex-wrap: wrap; }
.ccx-hero-question { margin: 28px 0 0 !important; color: var(--ink) !important; font-size: 16px !important; font-weight: 850; }
.ccx-hero figcaption { position: absolute; z-index: 2; right: 32px; bottom: 27px; color: rgb(255 255 255 / 88%); font-family: var(--font-hand); font-size: 34px; rotate: -6deg; }
.ccx-benefits { display: grid; width: 100%; min-height: 160px; grid-template-columns: 1.25fr repeat(4, 1fr); background: linear-gradient(90deg, #fff5ef, #ffe7da); border-bottom: 1px solid #ffd4c2; }
.ccx-benefits > div { display: flex; padding: 34px max(28px, calc((100vw - 1360px) / 2)); padding-right: 28px; align-items: center; }
.ccx-benefits h2 { margin: 0; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.6; letter-spacing: .02em; }
.ccx-benefits h2 > span { display: block; white-space: nowrap; }
.ccx-benefits > p { display: flex; margin: 0; padding: 30px 22px; align-items: center; gap: 10px; border-left: 1px solid rgb(255 92 50 / 14%); font-size: 12px; font-weight: 800; line-height: 1.7; }
.ccx-benefits > p span { color: var(--orange); font-size: 9px; }
.ccx-diagnosis { display: grid; grid-template-columns: .72fr 1.28fr; gap: 52px; align-items: center; }
.ccx-diagnosis-copy > p { max-width: 500px; margin: 25px 0 0; color: #59606b; font-size: 14px; line-height: 2; }
.ccx-badges { display: flex; margin-top: 24px; gap: 8px; flex-wrap: wrap; }
.ccx-badges span { padding: 7px 12px; background: #f4f6f5; border-radius: 999px; color: #58616a; font-size: 10px; font-weight: 850; }
.ccx-career-visual { display: grid; grid-template-columns: 1.04fr .96fr; gap: 14px; align-items: stretch; }
.ccx-career-characters { position: relative; display: grid; margin: 0; padding: 30px 18px 42px; place-items: center; background: radial-gradient(circle at 50% 42%, #fff 0 34%, #fff3eb 74%, #ffe4d7 100%); border: 1px solid #f3b9a3; overflow: hidden; }
.ccx-career-characters::before { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 1px solid rgb(255 92 50 / 22%); border-radius: 50%; content: "14"; color: var(--orange); font-size: 11px; font-weight: 900; text-align: center; line-height: 44px; }
.ccx-career-characters img { display: block; width: 100%; height: auto; }
.ccx-career-characters figcaption { position: absolute; right: 18px; bottom: 17px; left: 18px; color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-align: center; }
.ccx-career-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #f3b9a3; border-left: 1px solid #f3b9a3; }
.ccx-career-grid article { position: relative; min-height: 0; padding: 16px 14px; border-right: 1px solid #f3b9a3; border-bottom: 1px solid #f3b9a3; }
.ccx-career-grid article > span { color: var(--orange); font-size: 10px; font-weight: 900; }
.ccx-career-grid h3 { margin: 7px 0 10px; color: var(--orange); font-size: 11px; line-height: 1.5; }
.ccx-career-grid ul { display: grid; margin: 0; padding: 0; gap: 5px; list-style: none; }
.ccx-career-grid li { color: #474e59; font-size: 9px; line-height: 1.45; }
.ccx-career-grid li::before { margin-right: 7px; color: #f6a184; content: "•"; }
.ccx-platform { display: grid; width: 100%; min-height: 620px; padding: 95px max(32px, calc((100vw - 1180px) / 2)); grid-template-columns: .92fr 1.08fr; gap: 90px; align-items: center; background: linear-gradient(135deg, #fff8f3, #ffe9dd); }
.ccx-platform-copy > p { max-width: 520px; margin: 25px 0 0; color: #555d68; font-size: 14px; line-height: 2; }
.ccx-platform-features { display: grid; margin-top: 28px; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.ccx-platform-features span { display: flex; align-items: center; gap: 10px; color: #3f4753; font-size: 12px; font-weight: 800; }
.ccx-platform-features b { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); font-size: 11px; }
.ccx-devices { position: relative; min-height: 425px; }
.ccx-laptop { position: absolute; top: 40px; left: 0; width: 85%; filter: drop-shadow(0 24px 35px rgb(86 50 31 / 17%)); }
.ccx-laptop::after { display: block; width: 116%; height: 17px; margin-left: -8%; background: #d7d8da; border-radius: 2px 2px 14px 14px; content: ""; }
.ccx-laptop > div { padding: 11px; background: #20252d; border-radius: 14px 14px 3px 3px; }
.ccx-laptop header { display: flex; height: 28px; padding: 0 8px; align-items: center; gap: 5px; background: #fff; }
.ccx-laptop header i { width: 5px; height: 5px; background: #ff916d; border-radius: 50%; }
.ccx-laptop header span { margin-left: auto; color: var(--orange); font-size: 10px; font-weight: 900; }
.ccx-laptop-screen { display: block; min-height: 290px; padding: 24px; background: #f8f7f6; }
.ccx-laptop-screen > strong { font-size: 14px; }
.ccx-screen-cards { display: grid; margin-top: 19px; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ccx-screen-cards span { padding-bottom: 12px; background: #fff; box-shadow: 0 8px 20px rgb(0 0 0 / 6%); }
.ccx-screen-cards img { width: 100%; height: 100px; object-fit: cover; }
.ccx-screen-cards b { display: block; margin: 10px 9px 0; font-size: 10px; }
.ccx-phone { position: absolute; z-index: 2; right: 0; bottom: 5px; width: 150px; min-height: 300px; padding: 12px; background: #fff; border: 7px solid #1d222b; border-radius: 25px; box-shadow: 0 24px 45px rgb(41 28 22 / 25%); }
.ccx-phone header { color: var(--orange); font-size: 9px; font-weight: 900; }
.ccx-phone img { width: 100%; height: 145px; margin-top: 14px; object-fit: cover; }
.ccx-phone strong { display: block; margin-top: 12px; font-size: 11px; }
.ccx-phone span { display: block; margin-top: 5px; color: #7a7f85; font-size: 8px; }
.ccx-plan-lead { max-width: 680px; margin: 22px auto 0; color: #626974; font-size: 13px; line-height: 1.9; text-align: center; }
.ccx-plan-grid { display: grid; margin-top: 42px; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ccx-plan-grid article { position: relative; display: flex; min-height: 590px; padding: 34px 30px 28px; flex-direction: column; background: #fff; border: 1px solid #eaded8; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.ccx-plan-grid article::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: #f1ded5; content: ""; }
.ccx-plan-grid article.is-standard { background: linear-gradient(160deg, #fff4ed, #ffe7db); border-color: #f3b79f; box-shadow: 0 18px 46px rgb(113 61 37 / 10%); }
.ccx-plan-grid article.is-standard::before { background: var(--orange-gloss); }
.ccx-plan-grid article.is-seminar { background: #fffaf6; }
.ccx-plan-grid article:hover { z-index: 2; box-shadow: 0 22px 46px rgb(48 39 34 / 11%); transform: translateY(-6px); }
.ccx-plan-grid article > span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.ccx-plan-grid h3 { margin: 12px 0 13px; font-size: 27px; }
.ccx-plan-grid article > p { min-height: 74px; margin: 0; color: #555d67; font-size: 12px; line-height: 1.85; }
.ccx-plan-price { position: relative; z-index: 1; display: flex; min-height: 72px; margin-top: 24px; padding-top: 18px; align-items: flex-end; gap: 5px; color: var(--ink); border-top: 1px solid rgb(16 27 48 / 11%); }
.ccx-plan-price small { position: absolute; top: 8px; left: 0; color: #777; font-size: 8px; }
.ccx-plan-price strong { font-size: 39px; line-height: 1; letter-spacing: -.05em; }
.ccx-plan-grid .is-seminar .ccx-plan-price strong { font-size: 24px; letter-spacing: 0; }
.ccx-plan-grid dl { display: grid; margin: 24px 0 0; gap: 0; }
.ccx-plan-grid dl > div { display: grid; min-height: 56px; padding: 11px 0; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; border-top: 1px solid rgb(16 27 48 / 9%); }
.ccx-plan-grid dt { color: #7b8189; font-size: 9px; font-weight: 800; }
.ccx-plan-grid dd { margin: 0; color: #2d3644; font-size: 10px; font-weight: 800; line-height: 1.55; }
.ccx-plan-grid article > a { position: relative; z-index: 2; display: flex; min-height: 48px; margin-top: auto; padding: 0 16px; align-items: center; justify-content: space-between; border: 1px solid var(--orange); color: var(--orange); font-size: 11px; font-weight: 900; }
.ccx-plan-grid .is-standard > a { background: var(--orange-gloss); color: #fff; }
.ccx-supports { padding-top: 70px; }
.ccx-supports > div:last-child { display: grid; width: min(100%, 980px); margin: 48px auto 0; grid-template-columns: 1fr; gap: 18px; }
.ccx-supports article { display: grid; min-width: 0; min-height: 250px; grid-template-columns: .9fr 1.1fr; background: #fff; border: 1px solid #eaded8; box-shadow: 0 12px 36px rgb(31 43 58 / 5%); overflow: hidden; }
.ccx-supports article:nth-child(even) { grid-template-columns: 1.1fr .9fr; }
.ccx-supports article:nth-child(even) figure { order: 2; }
.ccx-supports figure { min-height: 250px; margin: 0; overflow: hidden; }
.ccx-supports img { width: 100%; height: 100%; object-fit: cover; }
.ccx-supports article > div { display: flex; padding: 38px 46px; flex-direction: column; justify-content: center; }
.ccx-supports article > div > span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.ccx-supports h3 { margin: 12px 0 12px; font-size: 25px; }
.ccx-supports p { max-width: 430px; margin: 0; color: #646b75; font-size: 13px; line-height: 1.9; }
.ccx-row-heading { display: grid; grid-template-columns: 1fr .75fr; gap: 70px; align-items: end; }
.ccx-row-heading > p { margin: 0 0 5px; color: #5c636e; font-size: 14px; line-height: 1.9; }
.ccx-course-table { margin-top: 42px; border-top: 2px solid var(--ink); }
.ccx-course-head, .ccx-course-table > a { display: grid; min-height: 64px; padding: 0 13px; grid-template-columns: .7fr .7fr 1.3fr 2fr .65fr .75fr 24px; align-items: center; gap: 12px; border-bottom: 1px solid #ddd; }
.ccx-course-head { min-height: 46px; background: #faf9f8; color: #737881; font-size: 9px; font-weight: 900; }
.ccx-course-table > a span { font-size: 11px; line-height: 1.5; }
.ccx-course-table > a span:nth-child(3) { font-weight: 900; }
.ccx-course-table .is-status { width: fit-content; padding: 6px 10px; background: #ffe5d9; border-radius: 999px; color: var(--orange); font-size: 9px; font-weight: 900; }
.ccx-course-table > a b { color: var(--orange); }
.ccx-course-note { margin: 14px 0 0; color: #6b7078; font-size: 11px; line-height: 1.8; }
.ccx-topic-ribbon { display: flex; margin-top: 18px; padding: 12px 16px; gap: 8px; background: #fff1e8; overflow-x: auto; scrollbar-width: none; }
.ccx-topic-ribbon span { flex: 0 0 auto; padding: 7px 12px; color: #7f4d3b; font-size: 9px; font-weight: 850; }
.ccx-classes { background: #fff7f2; }
.ccx-heading-line { display: block; }
.ccx-class-layout { display: grid; margin-top: 45px; grid-template-columns: 1.05fr .75fr 1.45fr; gap: 18px; }
.ccx-next-live { display: grid; min-height: 390px; grid-template-rows: auto 155px 1fr; background: #fff; border: 1px solid #f3c7b7; }
.ccx-next-live > span { padding: 17px 20px; background: var(--orange-gloss); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.ccx-next-live figure { margin: 0; overflow: hidden; }
.ccx-next-live figure img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ccx-next-live > div { padding: 22px; }
.ccx-next-live small { color: var(--orange); font-size: 9px; font-weight: 900; }
.ccx-next-live h3 { margin: 9px 0 8px; font-size: 23px; }
.ccx-next-live p { margin: 0; color: #5b626c; font-size: 11px; line-height: 1.7; }
.ccx-next-live a { display: inline-block; margin-top: 14px; color: var(--orange); font-size: 10px; font-weight: 900; }
.ccx-schedule { padding: 20px; background: #fff; border: 1px solid #eee0da; }
.ccx-schedule > span, .ccx-shorts header span { color: var(--orange); font-size: 10px; font-weight: 900; }
.ccx-schedule > a:not(.ccx-all-link) { display: grid; min-height: 76px; padding: 9px 0; grid-template-columns: 68px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid #eee; }
.ccx-schedule > a > figure { width: 68px; height: 54px; margin: 0; overflow: hidden; }
.ccx-schedule > a > figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ccx-schedule > a:hover > figure img { transform: scale(1.06); }
.ccx-schedule > a > div { min-width: 0; }
.ccx-schedule time { color: var(--orange); font-size: 11px; font-weight: 900; }
.ccx-schedule strong { display: block; margin-top: 4px; font-size: 10px; line-height: 1.45; }
.ccx-schedule b { color: #bbb; }
.ccx-all-link { display: block; margin-top: 18px; color: var(--orange); font-size: 10px; font-weight: 900; text-align: right; }
.ccx-shorts { min-width: 0; }
.ccx-shorts header { display: flex; margin-bottom: 14px; justify-content: space-between; }
.ccx-shorts header a { color: #666; font-size: 9px; }
.ccx-shorts > div { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ccx-shorts > div > a { width: 127px; flex: 0 0 127px; scroll-snap-align: start; }
.ccx-shorts figure { position: relative; height: 225px; margin: 0 0 10px; overflow: hidden; }
.ccx-shorts figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgb(10 18 31 / 46%)); content: ""; }
.ccx-shorts img { width: 100%; height: 100%; object-fit: cover; }
.ccx-shorts figure b { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 36px; height: 36px; place-items: center; background: rgb(255 255 255 / 88%); border-radius: 50%; color: var(--orange); font-size: 10px; translate: -50% -50%; }
.ccx-shorts figure small { position: absolute; z-index: 2; right: 6px; bottom: 6px; color: #fff; font-size: 8px; }
.ccx-shorts > div > a > span { color: var(--orange); font-size: 8px; font-weight: 900; }
.ccx-shorts > div > a > strong { display: block; margin-top: 6px; font-size: 10px; line-height: 1.5; }
.ccx-reports-shell { position: relative; overflow: hidden; background: linear-gradient(145deg, #fff 0%, #fff9f5 57%, #fff0e7 100%); }
.ccx-reports-shell::before { position: absolute; top: 55px; right: -18px; color: rgb(255 92 50 / 5%); content: "REPORT"; font-family: Georgia, serif; font-size: clamp(110px, 15vw, 230px); font-weight: 700; letter-spacing: -.07em; line-height: 1; }
.ccx-reports { position: relative; z-index: 1; padding-top: 120px; padding-bottom: 130px; }
.ccx-report-heading { display: grid; margin-bottom: 52px; grid-template-columns: 1fr .76fr; gap: 80px; align-items: end; }
.ccx-report-heading > div:last-child { padding-bottom: 7px; }
.ccx-report-heading > div:last-child p { margin: 0; color: #5b626d; font-size: 14px; line-height: 1.95; }
.ccx-report-heading > div:last-child a { display: flex; width: fit-content; min-width: 250px; margin-top: 23px; padding: 15px 18px; align-items: center; justify-content: space-between; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 900; }
.ccx-report-grid { display: grid; min-height: 570px; grid-template-columns: 1.17fr .83fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.ccx-report-grid article { min-width: 0; overflow: hidden; border: 1px solid #eaded8; background: #fff; box-shadow: 0 14px 36px rgb(31 39 49 / 6%); transition: transform .35s ease, box-shadow .35s ease; }
.ccx-report-grid article:hover { box-shadow: 0 26px 55px rgb(31 39 49 / 12%); transform: translateY(-6px); }
.ccx-report-grid article.is-featured { grid-row: 1 / 3; }
.ccx-report-grid article > a { display: grid; height: 100%; grid-template-columns: 225px 1fr; }
.ccx-report-grid article.is-featured > a { grid-template-columns: 1fr; grid-template-rows: 330px 1fr; }
.ccx-report-grid figure { position: relative; min-height: 0; margin: 0; overflow: hidden; }
.ccx-report-grid figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(8 19 37 / 38%)); content: ""; }
.ccx-report-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.ccx-report-grid article:hover figure img { transform: scale(1.045); }
.ccx-report-grid figure > span { position: absolute; z-index: 1; right: 16px; bottom: 13px; color: #fff; font-family: Georgia, serif; font-size: 18px; }
.ccx-report-grid article > a > div { display: flex; min-width: 0; padding: 24px 25px; flex-direction: column; justify-content: center; }
.ccx-report-grid article.is-featured > a > div { padding: 30px 34px 34px; }
.ccx-report-grid article > a > div > div { display: flex; align-items: center; gap: 12px; }
.ccx-report-grid time { color: #737983; font-family: Georgia, serif; font-size: 10px; }
.ccx-report-grid small { padding: 5px 8px; border-radius: 999px; background: #fff0e8; color: var(--orange); font-size: 8px; font-weight: 900; }
.ccx-report-grid h3 { margin: 12px 0 9px; font-size: 17px; line-height: 1.55; }
.ccx-report-grid article.is-featured h3 { font-size: 23px; }
.ccx-report-grid p { margin: 0; color: #626973; font-size: 10px; line-height: 1.75; }
.ccx-report-grid article.is-featured p { font-size: 12px; }
.ccx-report-grid strong { display: flex; margin-top: 17px; align-items: center; justify-content: space-between; color: var(--orange); font-size: 9px; }
.ccx-report-grid strong b { font-size: 14px; }
.ccx-report-mobile-link { display: none; }
.ccx-report-carousel { position: relative; }
.ccx-report-carousel-ui { display: flex; margin: 0 0 18px; align-items: center; justify-content: flex-end; gap: 20px; }
.ccx-report-carousel-ui > span { color: #8d817b; font-family: Georgia, serif; font-size: 10px; letter-spacing: .08em; }
.ccx-report-carousel-ui > span b { color: var(--orange); font-size: 19px; }
.ccx-report-carousel-ui > div { display: flex; gap: 8px; }
.ccx-report-carousel-ui button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #dccfc8; border-radius: 50%; background: rgb(255 255 255 / 83%); color: var(--ink); cursor: pointer; font-size: 15px; transition: background .25s ease, color .25s ease, transform .25s ease; }
.ccx-report-carousel-ui button:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.ccx-report-carousel-viewport { overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ccx-report-carousel-viewport::-webkit-scrollbar { display: none; }
.ccx-report-carousel-track { display: flex; width: max-content; padding: 4px 4px 34px; gap: 18px; }
.ccx-report-slide { position: relative; width: min(82vw, 920px); min-height: 490px; flex: 0 0 min(82vw, 920px); overflow: hidden; border: 1px solid #dfd2ca; background: #f8f3ec; box-shadow: 0 18px 42px rgb(41 34 29 / 9%); scroll-snap-align: start; transition: box-shadow .35s ease, transform .35s ease; }
.ccx-report-slide::before { position: absolute; z-index: 4; top: 0; right: 0; width: 0; height: 0; border-bottom: 34px solid #e6d8cf; border-left: 34px solid transparent; content: ""; }
.ccx-report-slide:hover { box-shadow: 0 30px 64px rgb(41 34 29 / 15%); transform: translateY(-5px); }
.ccx-report-slide > a { display: grid; height: 100%; min-height: 490px; grid-template-columns: 1.08fr .92fr; }
.ccx-report-slide figure { position: relative; min-height: 490px; margin: 0; overflow: hidden; }
.ccx-report-slide figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(9 18 31 / 62%)); content: ""; }
.ccx-report-slide figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.ccx-report-slide:hover figure img { transform: scale(1.045); }
.ccx-report-slide figure > span { position: absolute; z-index: 2; top: 23px; left: 23px; padding: 8px 11px; border: 1px solid rgb(255 255 255 / 55%); background: rgb(10 25 45 / 48%); color: #fff; font-family: Georgia, serif; font-size: 9px; letter-spacing: .15em; backdrop-filter: blur(5px); }
.ccx-report-slide figcaption { position: absolute; z-index: 2; right: 24px; bottom: 23px; color: #fff; font-family: Georgia, serif; font-size: 26px; font-style: italic; line-height: 1.08; letter-spacing: .06em; text-align: right; }
.ccx-report-paper { position: relative; display: flex; min-width: 0; padding: 48px 42px 40px 52px; flex-direction: column; justify-content: center; background: repeating-linear-gradient(180deg, transparent 0 38px, rgb(95 76 63 / 7%) 39px 40px), linear-gradient(90deg, rgb(255 255 255 / 36%), transparent), #f8f3ec; }
.ccx-report-paper::before { position: absolute; top: 0; bottom: 0; left: 23px; width: 1px; background: rgb(255 92 50 / 24%); box-shadow: 5px 0 0 rgb(255 92 50 / 8%); content: ""; }
.ccx-report-paper::after { position: absolute; right: 24px; bottom: 20px; display: grid; width: 86px; height: 86px; place-items: center; border: 2px solid rgb(255 92 50 / 27%); border-radius: 50%; color: rgb(255 92 50 / 44%); content: "Cuel College\A CLASS REPORT"; font-family: Georgia, serif; font-size: 8px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-align: center; white-space: pre; transform: rotate(-9deg); }
.ccx-report-paper-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.ccx-report-paper time { color: #706963; font-family: Georgia, serif; font-size: 12px; }
.ccx-report-paper small { padding: 6px 10px; border-radius: 999px; background: #ffe3d6; color: var(--orange); font-size: 8px; font-weight: 900; }
.ccx-report-paper-label { position: relative; z-index: 1; margin: 22px 0 0 !important; color: #9c8e85 !important; font-family: Georgia, serif; font-size: 8px !important; letter-spacing: .12em; }
.ccx-report-paper h3 { position: relative; z-index: 1; margin: 13px 0 18px; font-size: 27px; line-height: 1.55; letter-spacing: -.025em; }
.ccx-report-paper > p:not(.ccx-report-paper-label) { position: relative; z-index: 1; margin: 0; color: #595752; font-size: 12px; line-height: 2; }
.ccx-report-paper strong { position: relative; z-index: 2; display: flex; width: fit-content; min-width: 150px; margin-top: 31px; padding: 10px 0; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--orange); color: var(--orange); font-size: 10px; }
.ccx-report-paper strong b { margin-left: 24px; font-size: 14px; }
.ccx-reasons > div:last-child { display: grid; margin-top: 43px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ccx-reasons article { position: relative; min-height: 330px; padding: 0 0 24px; background: #fff; box-shadow: 0 12px 36px rgb(28 35 45 / 7%); }
.ccx-reasons figure { height: 170px; margin: 0 0 21px; overflow: hidden; }
.ccx-reasons img { width: 100%; height: 100%; object-fit: cover; }
.ccx-reasons article:nth-of-type(2) img,
.ccx-reasons article:nth-of-type(3) img { object-position: center 18%; }
.ccx-reasons article > span { margin-left: 22px; color: var(--orange); font-size: 9px; font-weight: 900; }
.ccx-reasons h3 { margin: 7px 22px 10px; font-size: 19px; }
.ccx-reasons p { margin: 0 22px; color: #626973; font-size: 11px; line-height: 1.75; }
.ccx-teacher-grid { display: grid; margin-top: 43px; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ccx-teacher-grid article { display: flex; padding: 0 0 24px; flex-direction: column; background: #fff; box-shadow: 0 12px 36px rgb(28 35 45 / 7%); }
.ccx-teacher-grid figure { height: 210px; margin: 0 0 19px; overflow: hidden; }
.ccx-teacher-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ccx-teacher-grid h3 { margin: 0 22px 6px; font-size: 19px; }
.ccx-teacher-grid small { display: block; margin: 0 22px; color: var(--orange); font-size: 11px; font-weight: 800; line-height: 1.65; }
.ccx-teacher-grid p { margin: 11px 22px 0; color: #626973; font-size: 11px; line-height: 1.75; }
.ccx-teacher-note { margin: 24px 0 0; color: #6b7078; font-size: 12px; line-height: 1.85; }
.ccx-voice-grid { display: grid; margin-top: 40px; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ccx-voice-grid article { position: relative; display: grid; min-height: 330px; grid-template-rows: 180px 1fr; background: #fffaf7; border: 1px solid #f0dfd7; box-shadow: 0 10px 30px rgb(27 38 53 / 4%); overflow: hidden; transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease; }
.ccx-voice-grid article.is-featured { grid-column: 1 / -1; min-height: 340px; grid-template-columns: .78fr 1.22fr; grid-template-rows: 1fr; }
.ccx-voice-grid figure { margin: 0; overflow: hidden; }
.ccx-voice-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.ccx-voice-grid article:hover { z-index: 3; box-shadow: 0 24px 50px rgb(29 37 48 / 14%); transform: translateY(-8px); }
.ccx-voice-grid article:hover img { transform: scale(1.045); }
.ccx-story-number { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 6px 9px; background: rgb(255 255 255 / 88%); color: var(--orange); font-size: 8px; letter-spacing: .08em; backdrop-filter: blur(5px); }
.ccx-voice-grid article > div { display: flex; padding: 24px; flex-direction: column; justify-content: center; }
.ccx-voice-grid article.is-featured > div { padding: 45px; }
.ccx-voice-grid article span { color: var(--orange); font-size: 9px; font-weight: 900; }
.ccx-voice-grid h3 { margin: 9px 0 12px; font-size: 18px; line-height: 1.6; }
.ccx-voice-grid article.is-featured h3 { font-size: 30px; }
.ccx-voice-grid p { margin: 0; color: #626973; font-size: 11px; }
.ccx-voice-grid a { display: flex; margin-top: 18px; align-items: center; justify-content: space-between; color: var(--orange); font-size: 10px; font-weight: 900; }
.ccx-voice-grid a i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; transition: background .3s ease, color .3s ease, transform .3s ease; }
.ccx-voice-grid article:hover a i { background: var(--orange); color: #fff; transform: translateX(3px); }
.ccx-voice-grid article:not(.is-featured) { animation: ccx-story-float 6s ease-in-out infinite; }
.ccx-voice-grid article:nth-child(3) { animation-delay: -2s; }
.ccx-voice-grid article:nth-child(4) { animation-delay: -4s; }
@keyframes ccx-story-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.ccx-price { width: min(100% - 36px, 1400px); padding-right: max(32px, calc((100% - 1180px) / 2)); padding-left: max(32px, calc((100% - 1180px) / 2)); background: #fff5ef; }
.ccx-price-table { margin-top: 42px; border-top: 2px solid var(--ink); }
.ccx-price-table > div { display: grid; min-height: 58px; grid-template-columns: 1.1fr repeat(3, 1fr); align-items: center; border-bottom: 1px solid #e0d7d1; }
.ccx-price-table > div:first-child { min-height: 72px; background: #fff; }
.ccx-price-table strong, .ccx-price-table span { padding: 12px 16px; font-size: 11px; line-height: 1.5; text-align: center; }
.ccx-price-table strong:first-child { text-align: left; }
.ccx-price-table > div > :nth-child(3) { background: rgb(255 92 50 / 7%); }
.ccx-consult { display: flex; margin-top: 24px; padding: 30px 34px; align-items: center; justify-content: space-between; gap: 40px; background: #fff; }
.ccx-consult span { color: var(--orange); font-size: 15px; font-weight: 900; }
.ccx-consult p { max-width: 650px; margin: 8px 0 0; color: #646b75; font-size: 11px; line-height: 1.7; }
.ccx-start > div:last-child { display: grid; margin-top: 42px; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ccx-start article { position: relative; min-height: 190px; padding: 34px; border-top: 1px solid #edc3b3; border-bottom: 1px solid #edc3b3; border-left: 1px solid #edc3b3; }
.ccx-start article:last-child { border-right: 1px solid #edc3b3; }
.ccx-start article:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -18px; display: grid; width: 36px; height: 36px; place-items: center; background: #fff; border: 1px solid #edc3b3; border-radius: 50%; color: var(--orange); content: "→"; translate: 0 -50%; }
.ccx-start article > span { color: var(--orange); font-size: 10px; font-weight: 900; }
.ccx-start h3 { margin: 38px 0 10px; font-size: 18px; }
.ccx-start p { margin: 0; color: #666d76; font-size: 11px; line-height: 1.7; }
.ccx-faq { display: grid; grid-template-columns: .55fr 1.45fr; gap: 80px; }
.ccx-faq > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ccx-faq details { border-top: 1px solid #ddd; }
.ccx-faq details:nth-last-child(-n+2) { border-bottom: 1px solid #ddd; }
.ccx-faq summary { display: grid; min-height: 74px; padding: 15px 4px; grid-template-columns: 27px 1fr auto; align-items: center; cursor: pointer; font-size: 11px; font-weight: 850; line-height: 1.6; list-style: none; }
.ccx-faq summary::-webkit-details-marker { display: none; }
.ccx-faq summary span, .ccx-faq details > p span { color: var(--orange); font-weight: 900; }
.ccx-faq summary b { color: var(--orange); font-size: 16px; font-weight: 400; }
.ccx-faq details > p { display: grid; margin: 0; padding: 0 4px 20px 27px; grid-template-columns: 27px 1fr; color: #626973; font-size: 10px; line-height: 1.8; }
.ccx-final { display: grid; width: min(100% - 36px, 1400px); min-height: 400px; margin: 20px auto 0; grid-template-columns: 1.2fr .8fr; background: linear-gradient(110deg, #fff0e6, #fff9f5); overflow: hidden; }
.ccx-final > div { display: flex; padding: 65px clamp(35px, 6vw, 90px); flex-direction: column; justify-content: center; }
.ccx-final > div > span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.ccx-final h2 { margin: 15px 0 14px; font-size: clamp(32px, 3.8vw, 53px); line-height: 1.5; }
.ccx-final p { margin: 0; color: #5c636d; font-size: 13px; }
.ccx-final > div > div { display: flex; margin-top: 28px; gap: 12px; flex-wrap: wrap; }
.ccx-final figure { margin: 0; }
.ccx-final img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
.ccx-benefits { grid-template-columns: 1fr 1fr; }
.ccx-benefits > div { grid-column: 1 / -1; }
.ccx-diagnosis { grid-template-columns: 1fr; }
.ccx-career-visual { grid-template-columns: .95fr 1.05fr; }
.ccx-platform { grid-template-columns: 1fr; }
.ccx-devices { width: min(100%, 650px); margin: 0 auto; }
.ccx-plan-grid { grid-template-columns: 1fr; }
.ccx-plan-grid article { min-height: 0; }
.ccx-plan-grid article > a { margin-top: 30px; }
.ccx-supports > div:last-child { grid-template-columns: 1fr; }
.ccx-teacher-grid { grid-template-columns: repeat(2, 1fr); }
.ccx-class-layout { grid-template-columns: 1fr 1fr; }
.ccx-shorts { grid-column: 1 / -1; }
.ccx-shorts > div > a { width: 180px; flex-basis: 180px; }
.ccx-shorts figure { height: 280px; }
}
@media (max-width: 760px) {
.ccx-page main > section + section { margin-top: 0; }
.ccx-section { width: calc(100% - 32px); padding: 78px 0; }
.ccx-title h2 { font-size: 31px; }
.ccx-button { width: 100%; min-height: 54px; }
.ccx-actions { align-items: stretch; flex-direction: column; }
.ccx-hero-question { font-size: 14px !important; }
.ccx-hero figcaption { right: 20px; bottom: 18px; font-size: 27px; }
.ccx-benefits { grid-template-columns: 1fr; }
.ccx-benefits > div { padding: 35px 24px; }
.ccx-benefits h2 { font-size: clamp(21px, 6.6vw, 27px); }
.ccx-benefits > p { min-height: 76px; padding: 20px 24px; border-top: 1px solid rgb(255 92 50 / 14%); border-left: 0; }
.ccx-diagnosis { grid-template-columns: 1fr; gap: 44px; }
.ccx-career-visual { grid-template-columns: 1fr; }
.ccx-career-characters { padding: 28px 13px 42px; }
.ccx-career-grid { grid-template-columns: 1fr; }
.ccx-career-grid article { min-height: 0; padding: 20px; }
.ccx-career-grid h3 { font-size: 13px; }
.ccx-career-grid li { font-size: 11px; }
.ccx-platform { min-height: 0; padding: 78px 20px 88px; grid-template-columns: 1fr; gap: 45px; }
.ccx-platform-features { grid-template-columns: 1fr; }
.ccx-devices { min-height: 310px; }
.ccx-laptop { top: 25px; width: 88%; }
.ccx-laptop-screen { min-height: 205px; padding: 15px; }
.ccx-screen-cards img { height: 68px; }
.ccx-phone { width: 105px; min-height: 224px; padding: 8px; border-width: 5px; border-radius: 18px; }
.ccx-phone img { height: 105px; }
.ccx-plan-grid { grid-template-columns: 1fr; }
.ccx-plan-grid article { min-height: 0; padding: 32px 24px 26px; }
.ccx-plan-grid article > p { min-height: 0; }
.ccx-plan-grid article > a { margin-top: 28px; }
.ccx-supports > div:last-child { display: grid; margin-right: auto; padding-right: 0; gap: 14px; overflow: visible; }
.ccx-supports article, .ccx-supports article:nth-child(even) { width: auto; min-height: 0; grid-template-columns: 1fr; }
.ccx-supports article:nth-child(even) figure { order: 0; }
.ccx-supports figure { min-height: 220px; height: 220px; }
.ccx-supports article > div { padding: 28px 24px 32px; }
.ccx-supports h3 { font-size: 22px; }
.ccx-supports p { font-size: 12px; }
.ccx-row-heading { grid-template-columns: 1fr; gap: 22px; }
.ccx-course-head { display: none; }
.ccx-course-table > a { position: relative; min-height: 195px; padding: 22px; grid-template-columns: 1fr 1fr; gap: 12px; }
.ccx-course-table > a span:nth-child(3), .ccx-course-table > a span:nth-child(4) { grid-column: 1 / -1; }
.ccx-course-table > a span:nth-child(3) { font-size: 16px; }
.ccx-course-table > a > b { position: absolute; right: 19px; bottom: 18px; }
.ccx-class-layout { grid-template-columns: 1fr; }
.ccx-next-live { min-height: 0; }
.ccx-schedule > a:not(.ccx-all-link) { grid-template-columns: 82px 1fr auto; }
.ccx-schedule > a > figure { width: 82px; height: 62px; }
.ccx-shorts { grid-column: auto; }
.ccx-shorts > div { margin-right: -16px; padding-right: 16px; }
.ccx-shorts > div > a { width: 50vw; flex-basis: 50vw; }
.ccx-shorts figure { height: 82vw; max-height: 360px; }
.ccx-reports { width: calc(100% - 16px); padding-top: 82px; padding-bottom: 90px; }
.ccx-reports-shell::before { top: 35px; right: -10px; font-size: 92px; }
.ccx-report-heading { padding: 0 8px; grid-template-columns: 1fr; gap: 22px; }
.ccx-report-heading > div:last-child p { font-size: 12px; }
.ccx-report-heading > div:last-child a { display: none; }
.ccx-report-grid { display: flex; min-height: 0; margin-right: -8px; padding-right: 8px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ccx-report-grid article, .ccx-report-grid article.is-featured { width: 82vw; min-height: 450px; flex: 0 0 82vw; scroll-snap-align: start; }
.ccx-report-grid article > a, .ccx-report-grid article.is-featured > a { grid-template-columns: 1fr; grid-template-rows: 230px 1fr; }
.ccx-report-grid article > a > div, .ccx-report-grid article.is-featured > a > div { padding: 24px 22px 27px; }
.ccx-report-grid h3, .ccx-report-grid article.is-featured h3 { font-size: 19px; }
.ccx-report-grid p, .ccx-report-grid article.is-featured p { font-size: 12px; }
.ccx-report-mobile-link { display: flex; min-height: 54px; margin: 22px 8px 0; padding: 0 18px; align-items: center; justify-content: space-between; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 900; }
.ccx-report-carousel-ui { margin-right: 8px; }
.ccx-report-carousel-ui button { width: 40px; height: 40px; }
.ccx-report-carousel-track { gap: 14px; }
.ccx-report-slide { width: 86vw; min-height: 520px; flex-basis: 86vw; }
.ccx-report-slide > a { min-height: 520px; grid-template-columns: 1fr; grid-template-rows: 230px 1fr; }
.ccx-report-slide figure { min-height: 230px; }
.ccx-report-slide figcaption { right: 17px; bottom: 15px; font-size: 21px; }
.ccx-report-paper { min-height: 290px; padding: 31px 25px 32px 38px; }
.ccx-report-paper::before { left: 17px; }
.ccx-report-paper::after { right: 14px; bottom: 13px; width: 66px; height: 66px; font-size: 6px; }
.ccx-report-paper-label { margin-top: 17px !important; }
.ccx-report-paper h3 { margin: 10px 0 12px; font-size: 20px; }
.ccx-report-paper > p:not(.ccx-report-paper-label) { padding-right: 3px; font-size: 11px; line-height: 1.85; }
.ccx-report-paper strong { margin-top: 18px; }
.ccx-reasons > div:last-child { grid-template-columns: 1fr; }
.ccx-reasons article { min-height: 0; }
.ccx-reasons figure { height: 210px; }
.ccx-teacher-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ccx-teacher-grid figure { height: 170px; }
.ccx-teacher-grid h3 { margin: 0 16px 5px; font-size: 16px; }
.ccx-teacher-grid small { margin: 0 16px; font-size: 10px; }
.ccx-teacher-grid p { margin: 9px 16px 0; font-size: 10px; }
.ccx-voice-grid { display: flex; margin-right: -16px; padding-right: 16px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ccx-voice-grid article, .ccx-voice-grid article.is-featured { width: 82vw; min-height: 420px; flex: 0 0 82vw; grid-template-columns: 1fr; grid-template-rows: 220px 1fr; scroll-snap-align: start; }
.ccx-voice-grid article.is-featured > div { padding: 24px; }
.ccx-voice-grid article.is-featured h3 { font-size: 21px; }
.ccx-price { width: calc(100% - 12px); padding-right: 14px; padding-left: 14px; }
.ccx-price-table { overflow-x: auto; }
.ccx-price-table > div { min-width: 720px; }
.ccx-consult { align-items: stretch; flex-direction: column; padding: 27px 22px; }
.ccx-start > div:last-child { grid-template-columns: 1fr; }
.ccx-start article { border-right: 1px solid #edc3b3; border-bottom: 0; }
.ccx-start article:last-child { border-bottom: 1px solid #edc3b3; }
.ccx-start article:not(:last-child)::after { top: auto; right: 22px; bottom: -18px; content: "↓"; translate: 0; }
.ccx-faq { grid-template-columns: 1fr; gap: 38px; }
.ccx-faq > div:last-child { grid-template-columns: 1fr; }
.ccx-faq details:nth-last-child(2) { border-bottom: 0; }
.ccx-faq details:last-child { border-bottom: 1px solid #ddd; }
.ccx-final { width: calc(100% - 12px); grid-template-columns: 1fr; }
.ccx-final > div { padding: 55px 22px; }
.ccx-final > div > div { align-items: stretch; flex-direction: column; }
.ccx-final figure { height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
.ccx-plan-grid article,
.ccx-voice-grid article,
.ccx-voice-grid img,
.ccx-schedule img { animation: none; transition: none; }
}
.ccx-page h1,
.ccx-page h2,
.ccx-page h3,
.ccx-page h4,
.ccx-page p { text-wrap: pretty; }
.ccx-title > span { font-size: 12px; }
.ccx-title h2 { font-size: clamp(32px, 3.25vw, 46px); line-height: 1.42; }
.ccx-button,
.ccx-plan-switcher a { font-size: 13px; white-space: nowrap; word-break: keep-all; }
.ccx-benefits > p { font-size: 13px; }
.ccx-benefits > p span,
.ccx-badges span { font-size: 12px; }
.ccx-plan-switcher { max-width: 1040px; margin: 42px auto 0; }
.ccx-plan-tabs { display: grid; max-width: 760px; margin: 0 auto; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccx-plan-tabs button { position: relative; display: flex; min-height: 86px; padding: 16px 24px; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid #e2d9d4; background: #fff; color: #5f6670; cursor: pointer; text-align: left; transition: border-color .25s ease, background .25s ease, color .25s ease; }
.ccx-plan-tabs button::after { position: absolute; right: 20px; bottom: -8px; width: 14px; height: 14px; background: #fff; border-right: 1px solid transparent; border-bottom: 1px solid transparent; content: ""; rotate: 45deg; transition: background .25s ease, border-color .25s ease; }
.ccx-plan-tabs button small { font-size: 12px; font-weight: 700; }
.ccx-plan-tabs button strong { margin-top: 5px; font-size: 18px; }
.ccx-plan-tabs button.is-active { z-index: 2; background: var(--orange-gloss); border-color: var(--orange); color: #fff; box-shadow: 0 12px 28px rgb(236 73 32 / 16%); }
.ccx-plan-tabs button.is-active::after { background: #ff633b; border-color: #ff633b; }
.ccx-plan-panel { min-height: 520px; margin-top: 20px; padding: 40px; background: #fff8f4; border: 1px solid #f1d8cc; }
.ccx-plan-panel > header { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.ccx-plan-panel > header > span,
.ccx-seminar-panel-copy > span { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.ccx-plan-panel > header h3,
.ccx-seminar-panel-copy h3 { margin: 10px 0 8px; font-size: 28px; line-height: 1.45; }
.ccx-plan-panel > header p,
.ccx-seminar-panel-copy > p { margin: 0; color: #5c646e; font-size: 14px; line-height: 1.85; }
.ccx-access-grid { display: grid; max-width: 820px; margin: 0 auto; grid-template-columns: 1fr 1fr; gap: 14px; }
.ccx-access-grid article { display: flex; min-height: 350px; padding: 27px 28px; flex-direction: column; background: #fff; border: 1px solid #eaded8; }
.ccx-access-grid article.is-paid { background: linear-gradient(155deg, #fff3ec, #ffe6da); border-color: #f3b79f; }
.ccx-access-grid article > span { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.ccx-access-grid h4 { margin: 8px 0 7px; font-size: 24px; }
.ccx-access-grid article > p { min-height: 46px; margin: 0; color: #5d6570; font-size: 13px; line-height: 1.7; }
.ccx-access-grid article > div { display: flex; min-height: 67px; margin-top: 18px; align-items: flex-end; gap: 4px; border-top: 1px solid rgb(16 27 48 / 10%); }
.ccx-access-grid article > div small { margin-bottom: 7px; color: #747b84; font-size: 11px; }
.ccx-access-grid article > div strong { font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.ccx-access-grid ul { display: grid; margin: 20px 0; padding: 0; gap: 8px; list-style: none; }
.ccx-access-grid li { position: relative; padding-left: 19px; color: #394250; font-size: 13px; line-height: 1.55; }
.ccx-access-grid li::before { position: absolute; left: 0; color: var(--orange); content: "✓"; font-weight: 900; }
.ccx-access-grid a,
.ccx-seminar-panel-copy > a { display: flex; min-height: 48px; margin-top: auto; padding: 0 16px; align-items: center; justify-content: space-between; border: 1px solid var(--orange); color: var(--orange); font-weight: 900; }
.ccx-access-grid .is-paid a { background: var(--orange-gloss); color: #fff; }
.ccx-plan-panel.is-seminar { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: stretch; background: #fffaf6; }
.ccx-seminar-panel-copy { display: flex; flex-direction: column; }
.ccx-seminar-panel-copy dl { display: grid; margin: 25px 0; }
.ccx-seminar-panel-copy dl > div { display: grid; min-height: 48px; padding: 10px 0; grid-template-columns: 100px 1fr; align-items: center; border-top: 1px solid #e9ddd7; }
.ccx-seminar-panel-copy dt { color: #747b84; font-size: 12px; font-weight: 800; }
.ccx-seminar-panel-copy dd { margin: 0; font-size: 13px; font-weight: 800; }
.ccx-seminar-topic-panel { display: flex; padding: 28px; flex-direction: column; justify-content: center; background: #fff0e7; }
.ccx-seminar-topic-panel > span { color: var(--orange); font-size: 13px; font-weight: 900; }
.ccx-seminar-topic-panel > div { display: flex; margin-top: 17px; gap: 8px; flex-wrap: wrap; }
.ccx-seminar-topic-panel b { padding: 8px 11px; background: #fff; border-radius: 999px; color: #754b3c; font-size: 12px; }
.ccx-seminar-topic-panel p { margin: 20px 0 0; color: #695f5b; font-size: 13px; line-height: 1.75; }
.ccx-supports article > div > span { font-size: 12px; }
.ccx-supports p { font-size: 14px; }
.ccx-supports ul { display: grid; margin: 20px 0 0; padding: 16px 0 0; grid-template-columns: 1fr 1fr; gap: 9px 18px; border-top: 1px solid #eee3de; list-style: none; }
.ccx-supports li { position: relative; padding-left: 18px; color: #4c5560; font-size: 12px; line-height: 1.6; }
.ccx-supports li::before { position: absolute; left: 0; color: var(--orange); content: "✓"; font-weight: 900; }
.ccx-course-head { font-size: 12px; }
.ccx-course-table > a span,
.ccx-course-table .is-status,
.ccx-topic-ribbon span { font-size: 12px; }
.ccx-next-live > span,
.ccx-next-live small,
.ccx-next-live a,
.ccx-schedule > span,
.ccx-shorts header span,
.ccx-schedule time,
.ccx-all-link,
.ccx-shorts header a,
.ccx-shorts > div > a > span { font-size: 12px; }
.ccx-next-live p,
.ccx-schedule strong,
.ccx-shorts > div > a > strong { font-size: 13px; }
.ccx-shorts figure small { font-size: 11px; }
.ccx-platform-copy > p { font-size: 14px; }
.ccx-platform-copy > p strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 15px; }
.ccx-platform-features span { font-size: 13px; }
.ccx-laptop header span,
.ccx-screen-cards b,
.ccx-phone header,
.ccx-phone span { font-size: 11px; }
.ccx-phone strong { font-size: 12px; }
.ccx-diagnosis { display: block; }
.ccx-diagnosis-copy { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: end; }
.ccx-diagnosis-body > p { margin: 0; color: #59606b; font-size: 14px; line-height: 1.95; }
.ccx-diagnosis-body .ccx-actions { margin-top: 22px; }
.ccx-career-carousel { display: flex; margin-top: 46px; padding: 8px 4px 24px; gap: 14px; overflow-x: auto; scroll-padding-left: 4px; scroll-snap-type: x mandatory; scrollbar-color: #f2aa90 #fff1e9; }
.ccx-type-card { width: 210px; min-height: 330px; padding: 13px 14px 20px; flex: 0 0 210px; background: #fffaf7; border: 1px solid #eddcd4; scroll-snap-align: start; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.ccx-type-card:hover { border-color: #f2a487; box-shadow: 0 18px 36px rgb(40 48 58 / 10%); transform: translateY(-5px); }
.ccx-career-animal { width: 180px; height: 150px; margin: 0 auto 14px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.ccx-type-card > span { color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.ccx-type-card h3 { margin: 7px 0 8px; font-size: 17px; line-height: 1.5; }
.ccx-type-card p { margin: 0; color: #606872; font-size: 13px; line-height: 1.7; }
.ccx-carousel-guide { display: flex; margin: 12px 0 0; align-items: center; justify-content: center; gap: 15px; color: #777e87; font-size: 12px; font-weight: 800; }
.ccx-carousel-guide span { color: var(--orange); }
.ccx-reasons article > span,
.ccx-story-number,
.ccx-voice-grid article span,
.ccx-voice-grid a { font-size: 12px; }
.ccx-reasons p,
.ccx-voice-grid p { font-size: 13px; line-height: 1.75; }
.ccx-price-table strong,
.ccx-price-table span,
.ccx-consult p,
.ccx-start article > span,
.ccx-start p { font-size: 13px; }
.ccx-faq > div:last-child { grid-template-columns: 1fr; }
.ccx-faq details:nth-last-child(2) { border-bottom: 0; }
.ccx-faq details:last-child { border-bottom: 1px solid #ddd; }
.ccx-faq summary { min-height: 82px; padding: 18px 4px; font-size: 14px; line-height: 1.75; word-break: normal; line-break: strict; text-wrap: pretty; }
.ccx-faq details > p { padding-bottom: 24px; color: #555e69; font-size: 13px; line-height: 1.9; }
.ccx-final > div > span { font-size: 12px; }
.ccx-final h2 { font-size: clamp(32px, 3.25vw, 46px); }
.ccx-final p { font-size: 14px; }
.ccx-page .site-footer a,
.ccx-page .site-footer p,
.ccx-page .site-footer span,
.ccx-page .qllink-float small { font-size: 12px; }
.ccx-page .desktop-nav a { font-size: 12px; }
@media (max-width: 760px) {
.ccx-title h2 { font-size: clamp(27px, 7.6vw, 31px); line-height: 1.48; }
.ccx-button { padding: 0 16px; gap: 12px; font-size: 12px; }
.ccx-plan-switcher { margin-top: 34px; }
.ccx-plan-tabs { gap: 6px; }
.ccx-plan-tabs button { min-height: 82px; padding: 13px 12px; }
.ccx-plan-tabs button::after { right: 15px; }
.ccx-plan-tabs button small { font-size: 11px; }
.ccx-plan-tabs button strong { font-size: 15px; line-height: 1.4; }
.ccx-plan-panel { min-height: 0; padding: 25px 14px 18px; }
.ccx-plan-panel > header { margin-bottom: 22px; }
.ccx-plan-panel > header h3,
.ccx-seminar-panel-copy h3 { font-size: 23px; }
.ccx-plan-panel > header p,
.ccx-seminar-panel-copy > p { font-size: 13px; }
.ccx-access-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.ccx-access-grid article { min-width: 0; min-height: 390px; padding: 18px 12px 14px; }
.ccx-access-grid article > span { font-size: 11px; }
.ccx-access-grid h4 { font-size: 19px; }
.ccx-access-grid article > p { min-height: 84px; font-size: 12px; }
.ccx-access-grid article > div { min-height: 61px; align-items: flex-end; flex-wrap: wrap; }
.ccx-access-grid article > div small { width: 100%; margin: 0; font-size: 11px; }
.ccx-access-grid article > div strong { font-size: 25px; }
.ccx-access-grid ul { gap: 7px; }
.ccx-access-grid li { padding-left: 15px; font-size: 11px; }
.ccx-access-grid a { min-height: 45px; padding: 0 10px; font-size: 11px; }
.ccx-plan-panel.is-seminar { grid-template-columns: 1fr; gap: 24px; }
.ccx-seminar-topic-panel { padding: 22px 18px; }
.ccx-supports ul { grid-template-columns: 1fr; }
.ccx-supports p { font-size: 13px; }
.ccx-supports li { font-size: 12px; }
.ccx-platform { padding-top: 82px; }
.ccx-platform-copy > p,
.ccx-platform-features span { font-size: 13px; }
.ccx-platform-copy > p strong { font-size: 14px; }
.ccx-diagnosis-copy { grid-template-columns: 1fr; gap: 24px; }
.ccx-diagnosis-body > p { font-size: 13px; }
.ccx-career-carousel { margin-right: -16px; margin-top: 34px; padding-right: 16px; }
.ccx-type-card { width: 195px; flex-basis: 195px; }
.ccx-faq summary { grid-template-columns: 28px 1fr 22px; gap: 6px; font-size: 13px; }
.ccx-faq details > p { padding-left: 0; font-size: 12px; }
.ccx-final h2 { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
.ccx-plan-tabs button,
.ccx-type-card { transition: none; }
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.hero-copy h1.hero-headline-art {
position: relative;
width: min(100%, 372px);
aspect-ratio: 925 / 560;
margin: 0 0 23px;
overflow: hidden;
font-size: 0;
line-height: 0;
}
.hero-copy::before {
position: absolute;
z-index: -1;
inset: -48px -190px -40px -30px;
background: linear-gradient(
92deg,
transparent 0%,
rgb(255 255 255 / 14%) 14%,
rgb(255 255 255 / 52%) 32%,
rgb(255 255 255 / 82%) 52%,
rgb(255 255 255 / 74%) 68%,
rgb(255 255 255 / 34%) 86%,
transparent 100%
);
content: "";
pointer-events: none;
}
.hero-headline-art img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 121.3%;
max-width: none;
height: auto;
transform: translate(-6.7%, -28.2%);
}
.hero-copy h1.hero-headline-art::after { display: none; }
.hero-headline-art .hero-headline-main {
clip-path: inset(0 0 46% 0);
transform: translate(-6.7%, -28.2%) translateY(12px);
}
.hero-headline-art .hero-headline-hand {
clip-path: inset(53% 0 0 0);
}
@media (max-width: 820px) {
.hero-copy::before { display: none; }
}
.hero-lead-line {
display: block;
white-space: nowrap;
}
.hero-lead-mobile { display: none; }
.hero-actions .button {
min-width: 0;
white-space: nowrap;
}
@media (max-width: 760px) {
.hero-copy { width: 68%; }
.hero-copy h1.hero-headline-art {
width: 88%;
margin-inline: auto;
margin-bottom: 15px;
}
.hero-lead-desktop { display: none; }
.hero-lead-mobile {
display: block;
white-space: nowrap;
}
.hero-actions .button {
gap: 8px;
padding-right: 10px;
padding-left: 10px;
font-size: 12px;
}
}
.ccx-supports-lead {
max-width: 760px;
margin: 22px auto 0;
color: #606873;
font-size: 14px;
line-height: 1.9;
text-align: center;
}
.ccx-support-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ccx-supports .ccx-support-meta > span {
color: var(--orange);
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
}
.ccx-support-meta > b {
border: 1px solid #f4b59d;
border-radius: 999px;
padding: 6px 11px;
background: #fff2ea;
color: #a84928;
font-size: 11px;
letter-spacing: .03em;
line-height: 1;
}
.ccx-page .ccx-qllink-float {
isolation: isolate;
width: 318px;
min-height: 82px;
gap: 12px;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 48%);
border-radius: 28px 8px 28px 8px;
padding: 11px 13px;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 52%),
0 18px 42px rgb(136 42 10 / 30%);
}
.ccx-page .ccx-qllink-float::before {
position: absolute;
z-index: -1;
top: -70px;
left: -20px;
width: 190px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, rgb(255 255 255 / 35%), transparent 68%);
content: "";
}
.ccx-page .ccx-qllink-float::after {
position: absolute;
z-index: -1;
right: 50px;
bottom: -31px;
width: 150px;
height: 58px;
border: 1px solid rgb(255 255 255 / 24%);
border-radius: 50%;
rotate: -10deg;
content: "";
}
.ccx-qllink-float > i {
display: grid;
width: 47px;
height: 47px;
flex: 0 0 auto;
place-items: center;
border-radius: 16px 5px 16px 5px;
background: #fff;
box-shadow: 0 8px 18px rgb(121 34 10 / 17%);
color: var(--orange);
font-size: 9px;
font-style: normal;
font-weight: 950;
letter-spacing: .12em;
animation: ccx-free-pulse 2.8s ease-in-out infinite;
}
.ccx-page .ccx-qllink-float small {
font-size: 10px;
letter-spacing: .02em;
opacity: .92;
}
.ccx-page .ccx-qllink-float strong {
font-size: 15px;
letter-spacing: .02em;
white-space: nowrap;
}
.ccx-page .ccx-qllink-float > b {
width: 35px;
height: 35px;
box-shadow: 0 7px 16px rgb(117 31 8 / 16%);
}
@keyframes ccx-free-pulse {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50% { transform: translateY(-3px) rotate(1deg); }
}
@media (max-width: 760px) {
.ccx-supports-lead {
margin-top: 18px;
padding: 0 4px;
font-size: 13px;
text-align: left;
}
.ccx-support-meta { gap: 10px; }
.ccx-support-meta > b { padding: 6px 9px; font-size: 10px; }
.ccx-page .ccx-qllink-float {
right: 10px;
left: 10px;
width: auto;
min-height: 72px;
border-radius: 22px 7px 22px 7px;
padding: 9px 11px;
}
.ccx-qllink-float > i { width: 42px; height: 42px; }
.ccx-page .ccx-qllink-float small { font-size: 9px; }
.ccx-page .ccx-qllink-float strong { font-size: 14px; }
.ccx-page .ccx-qllink-float > b { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
.ccx-qllink-float > i { animation: none; }
}
.site-shell:not(.college-page) .desktop-nav {
gap: clamp(14px, 1.5vw, 26px);
}
.site-shell:not(.college-page) .desktop-nav a {
font-size: 12px;
}
.site-shell:not(.college-page) .desktop-nav .nav-diagnosis {
margin-left: 4px;
border: 1px solid var(--orange);
border-radius: 999px;
padding: 11px 15px;
color: var(--orange-deep);
}
.site-shell:not(.college-page) .desktop-nav .nav-diagnosis::after {
display: none;
}
.site-shell:not(.college-page) .desktop-nav .nav-cta {
border-radius: 999px;
padding: 12px 18px;
}
.cnx-page {
--cnx-navy: #071a36;
--cnx-ink: #10203a;
--cnx-orange: #ff5b35;
--cnx-coral: #ff7958;
--cnx-peach: #fff1e9;
--cnx-cream: #fffaf6;
color: var(--cnx-ink);
background: #fff;
}
.cnx-page main { overflow: hidden; }
.cnx-page .site-header { border-bottom-color: rgb(255 91 53 / 18%); }
.cnx-page .desktop-nav .is-current { color: var(--cnx-orange); }
.cnx-page .desktop-nav .is-current::after { transform: scaleX(1); }
.cnx-eyebrow,
.cnx-title > span {
display: block;
color: var(--cnx-orange);
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
}
.cnx-title h2 {
margin: 12px 0 0;
color: var(--cnx-navy);
font-size: clamp(34px, 4.1vw, 58px);
line-height: 1.28;
letter-spacing: .02em;
}
.cnx-button {
display: inline-flex;
min-height: 62px;
padding: 0 24px;
align-items: center;
justify-content: space-between;
gap: 22px;
border: 1px solid var(--cnx-orange);
border-radius: 7px 20px 7px 20px;
color: var(--cnx-orange);
font-size: 14px;
font-weight: 900;
line-height: 1.35;
white-space: nowrap;
transition: transform .25s ease, border-radius .25s ease, box-shadow .25s ease;
}
.cnx-button:hover { transform: translateY(-3px); border-radius: 20px 7px 20px 7px; box-shadow: 0 14px 30px rgb(255 91 53 / 15%); }
.cnx-button.is-primary {
border-color: transparent;
background: linear-gradient(120deg, #ff7958 0%, #ff542d 52%, #ff3e21 100%);
box-shadow: 0 14px 28px rgb(228 69 31 / 21%);
color: #fff;
}
.cnx-button.is-light { border-color: #fff; color: #fff; }
.cnx-button.is-disabled { cursor: default; opacity: .7; }
.cnx-button.is-disabled:hover { transform: none; border-radius: 7px 20px 7px 20px; }
.cnx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cnx-hero {
position: relative;
min-height: 820px;
padding: 92px clamp(30px, 6vw, 96px) 90px;
background:
radial-gradient(circle at 13% 9%, rgb(255 112 77 / 12%) 0 12%, transparent 12.2%),
linear-gradient(100deg, #fffaf6 0 47%, #fff 47% 100%);
}
.cnx-hero::before {
position: absolute;
top: 55px;
right: 46%;
width: 280px;
height: 280px;
border: 1px solid rgb(255 91 53 / 20%);
border-radius: 50%;
content: "";
}
.cnx-hero-copy { position: relative; z-index: 2; width: 46%; max-width: 610px; padding-top: 42px; }
.cnx-hero-note {
position: absolute;
top: -8px;
right: -58px;
margin: 0;
color: var(--cnx-orange);
font-family: ui-rounded, "Hiragino Maru Gothic ProN", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.65;
transform: rotate(-4deg);
}
.cnx-hero h1 {
margin: 22px 0 26px;
color: var(--cnx-navy);
font-size: clamp(42px, 5vw, 72px);
line-height: 1.23;
letter-spacing: .035em;
}
.cnx-hero h1 em { color: var(--cnx-orange); font-style: normal; }
.cnx-hero-lead { max-width: 555px; margin: 0 0 32px; font-size: 15px; font-weight: 600; line-height: 2; text-wrap: pretty; }
.cnx-hero-visual {
position: absolute;
top: 70px;
right: 3.5%;
width: 47%;
height: 650px;
margin: 0;
overflow: hidden;
border-radius: 90px 14px 90px 14px;
box-shadow: 0 28px 75px rgb(24 33 52 / 16%);
}
.cnx-hero-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(7 26 54 / 72%)); content: ""; }
.cnx-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.cnx-hero-visual figcaption { position: absolute; z-index: 2; right: 42px; bottom: 40px; left: 42px; display: flex; align-items: flex-end; justify-content: space-between; color: #fff; }
.cnx-hero-visual figcaption span { font-size: 15px; font-weight: 900; letter-spacing: .12em; }
.cnx-hero-visual figcaption b { font-size: 21px; line-height: 1.55; text-align: right; }
.cnx-hero-stats {
position: absolute;
z-index: 3;
right: 5.5%;
bottom: 42px;
display: grid;
width: 48%;
grid-template-columns: repeat(3, 1fr);
overflow: hidden;
border-radius: 28px 7px 28px 7px;
background: #fff;
box-shadow: 0 17px 45px rgb(18 30 51 / 14%);
}
.cnx-hero-stats p { min-height: 108px; margin: 0; padding: 22px 20px; border-right: 1px solid #ece8e4; }
.cnx-hero-stats p:last-child { border-right: 0; }
.cnx-hero-stats strong { display: block; color: var(--cnx-orange); font-size: 34px; line-height: 1; }
.cnx-hero-stats span { display: block; margin-top: 10px; font-size: 12px; font-weight: 800; }
.cnx-about {
display: grid;
max-width: 1240px;
margin: 0 auto;
padding: 150px 30px;
grid-template-columns: 1.3fr .7fr;
gap: clamp(50px, 8vw, 120px);
align-items: center;
}
.cnx-about > div > p { max-width: 700px; margin: 34px 0 0; font-size: 15px; line-height: 2.05; }
.cnx-about aside {
position: relative;
min-height: 340px;
padding: 48px 42px;
border-radius: 60px 9px 60px 9px;
background: var(--cnx-navy);
box-shadow: 18px 18px 0 var(--cnx-peach);
color: #fff;
}
.cnx-about aside::after { position: absolute; right: 28px; bottom: 27px; width: 86px; height: 86px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; content: ""; }
.cnx-about aside > span { color: #ff8b70; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.cnx-about aside strong { display: block; margin: 27px 0 14px; font-size: 24px; line-height: 1.5; }
.cnx-about aside em { color: #ff7859; font-size: 58px; font-style: normal; }
.cnx-about aside p { margin: 0 0 34px; font-size: 13px; line-height: 1.8; }
.cnx-about aside small { font-size: 12px; line-height: 1.8; opacity: .78; }
.cnx-section { max-width: 1240px; margin: 0 auto; padding: 140px 30px; }
.cnx-features { padding-top: 30px; }
.cnx-features > .cnx-title { max-width: 720px; }
.cnx-features > div:last-child { display: grid; margin-top: 55px; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cnx-features article {
position: relative;
min-height: 385px;
padding: 38px 34px;
overflow: hidden;
border: 1px solid #ece8e3;
border-radius: 46px 7px 46px 7px;
background: #fff;
transition: transform .3s ease, background .3s ease, color .3s ease;
}
.cnx-features article:nth-child(2) { margin-top: 38px; background: var(--cnx-peach); }
.cnx-features article:hover { transform: translateY(-8px); background: var(--cnx-navy); color: #fff; }
.cnx-features article > span { color: var(--cnx-orange); font-size: 13px; font-weight: 900; letter-spacing: .15em; }
.cnx-features h3 { margin: 96px 0 22px; font-size: 22px; line-height: 1.5; }
.cnx-features p { margin: 0; font-size: 13px; line-height: 1.95; }
.cnx-features i { position: absolute; right: 28px; bottom: 24px; color: var(--cnx-orange); font-size: 25px; font-style: normal; }
.cnx-consultation {
display: grid;
margin: 60px 24px 0;
padding: clamp(65px, 8vw, 120px);
grid-template-columns: .8fr 1.2fr;
gap: clamp(50px, 8vw, 120px);
border-radius: 85px 12px 85px 12px;
background: linear-gradient(135deg, #ff7352, #ff4b29 62%, #f64020);
color: #fff;
}
.cnx-consultation .cnx-title > span,
.cnx-consultation .cnx-title h2 { color: #fff; }
.cnx-consultation .cnx-title h2 { font-size: clamp(36px, 4.5vw, 60px); }
.cnx-consultation-intro > p { margin: 32px 0; font-size: 15px; font-weight: 700; line-height: 2; }
.cnx-consultation-intro figure { height: 335px; margin: 44px 0 0; overflow: hidden; border: 8px solid rgb(255 255 255 / 24%); border-radius: 50px 8px 50px 8px; }
.cnx-consultation-intro img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.cnx-flow { display: flex; flex-direction: column; gap: 11px; }
.cnx-flow article {
display: grid;
min-height: 108px;
padding: 21px 24px;
grid-template-columns: 52px 1fr 34px;
gap: 16px;
align-items: center;
border: 1px solid rgb(255 255 255 / 35%);
border-radius: 9px 28px 9px 28px;
background: rgb(255 255 255 / 12%);
backdrop-filter: blur(7px);
}
.cnx-flow article.is-first { background: #fff; color: var(--cnx-navy); }
.cnx-flow article > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 18%); font-size: 12px; font-weight: 900; }
.cnx-flow .is-first > span { background: var(--cnx-peach); color: var(--cnx-orange); }
.cnx-flow h3 { margin: 0 0 6px; font-size: 17px; }
.cnx-flow p { margin: 0; font-size: 12px; font-weight: 600; opacity: .84; }
.cnx-flow article > b { font-size: 16px; text-align: center; }
.cnx-jobs { margin-top: 120px; padding: 140px clamp(30px, 6vw, 95px); background: var(--cnx-navy); color: #fff; }
.cnx-jobs-heading { display: grid; max-width: 1260px; margin: 0 auto 65px; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; }
.cnx-jobs .cnx-title h2 { color: #fff; }
.cnx-jobs .cnx-title h2 strong { color: #ff7958; }
.cnx-jobs-heading > div:last-child p { margin: 10px 0 0; color: rgb(255 255 255 / 75%); font-size: 13px; line-height: 1.9; }
.cnx-opportunity-explorer { display: grid; max-width: 1260px; margin: 0 auto; grid-template-columns: 260px 1fr; overflow: hidden; border: 1px solid rgb(255 255 255 / 18%); border-radius: 48px 9px 48px 9px; background: rgb(255 255 255 / 6%); }
.cnx-opportunity-tabs { display: flex; flex-direction: column; border-right: 1px solid rgb(255 255 255 / 14%); }
.cnx-opportunity-tabs button { min-height: 98px; padding: 0 27px; border: 0; border-bottom: 1px solid rgb(255 255 255 / 12%); background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 900; text-align: left; cursor: pointer; }
.cnx-opportunity-tabs button span { display: inline-block; width: 40px; color: #ff7b5c; font-size: 11px; letter-spacing: .12em; }
.cnx-opportunity-tabs button.is-active { background: #fff; color: var(--cnx-navy); }
.cnx-opportunity-panel { padding: 46px 50px; }
.cnx-opportunity-panel > p { margin: 0 0 32px; color: rgb(255 255 255 / 78%); font-size: 14px; }
.cnx-opportunity-panel > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cnx-opportunity-panel article { min-height: 190px; padding: 30px 26px; border-radius: 32px 7px 32px 7px; background: #fff; color: var(--cnx-navy); }
.cnx-opportunity-panel article span { font-size: 13px; font-weight: 900; }
.cnx-opportunity-panel article p { margin: 43px 0 0; color: var(--cnx-orange); font-size: 15px; font-weight: 800; }
.cnx-opportunity-panel article strong { margin-right: 5px; font-size: 50px; line-height: 1; }
.cnx-role-list { max-width: 1260px; margin: 90px auto 0; }
.cnx-role-list header { display: flex; margin-bottom: 28px; align-items: baseline; gap: 22px; }
.cnx-role-list header span { color: #ff7958; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.cnx-role-list header h3 { margin: 0; font-size: 24px; }
.cnx-role-list > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cnx-role-list article { min-height: 245px; padding: 30px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 34px 7px 34px 7px; transition: background .25s ease, transform .25s ease; }
.cnx-role-list article:hover { transform: translateY(-5px); background: rgb(255 255 255 / 7%); }
.cnx-role-list article > span { color: #ff7b5c; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.cnx-role-list h4 { margin: 32px 0 16px; font-size: 19px; line-height: 1.5; }
.cnx-role-list p { margin: 0; color: rgb(255 255 255 / 69%); font-size: 12px; line-height: 1.8; }
.cnx-role-list a { display: flex; margin-top: 31px; justify-content: space-between; color: #fff; font-size: 12px; font-weight: 900; }
.cnx-role-list a b { color: #ff7958; }
.cnx-job-note { display: flex; max-width: 1260px; margin: 55px auto 0; padding: 28px 32px; align-items: center; justify-content: space-between; border-radius: 28px 6px 28px 6px; background: linear-gradient(90deg, #f45a36, #ff7554); }
.cnx-job-note p { margin: 0; font-size: 13px; line-height: 1.7; }
.cnx-job-note strong { font-size: 18px; }
.cnx-college-bridge { display: grid; max-width: 1240px; margin: 0 auto; padding: 160px 30px; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.cnx-college-bridge figure { position: relative; height: 570px; margin: 0; }
.cnx-college-bridge figure::before { position: absolute; inset: 28px -22px -28px 22px; border-radius: 70px 9px 70px 9px; background: var(--cnx-peach); content: ""; }
.cnx-college-bridge img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 70px 9px 70px 9px; }
.cnx-college-bridge > div p { margin: 34px 0; font-size: 14px; line-height: 2; }
.cnx-college-bridge > div > a { display: inline-flex; min-height: 52px; padding: 0 0 8px; align-items: center; gap: 50px; border-bottom: 2px solid var(--cnx-orange); color: var(--cnx-navy); font-size: 14px; font-weight: 900; }
.cnx-college-bridge a b { color: var(--cnx-orange); }
.cnx-faq { max-width: 1120px; padding-top: 30px; }
.cnx-faq > div:last-child { margin-top: 45px; border-top: 1px solid #ddd9d5; }
.cnx-faq details { border-bottom: 1px solid #ddd9d5; }
.cnx-faq summary { display: grid; min-height: 96px; padding: 24px 6px; grid-template-columns: 42px 1fr 30px; gap: 14px; align-items: center; color: var(--cnx-navy); font-size: 15px; font-weight: 900; cursor: pointer; list-style: none; }
.cnx-faq summary::-webkit-details-marker { display: none; }
.cnx-faq summary > span { color: var(--cnx-orange); font-size: 17px; }
.cnx-faq summary > b { color: var(--cnx-orange); font-size: 21px; font-weight: 500; text-align: center; transition: transform .2s ease; }
.cnx-faq details[open] summary > b { transform: rotate(45deg); }
.cnx-faq details > p { margin: 0; padding: 0 56px 28px; color: #58616e; font-size: 13px; line-height: 1.95; }
.cnx-faq details > p span { margin-right: 17px; color: var(--cnx-orange); font-weight: 900; }
.cnx-final { display: grid; min-height: 650px; margin: 80px 24px 24px; grid-template-columns: 1.08fr .92fr; overflow: hidden; border-radius: 82px 10px 82px 10px; background: var(--cnx-peach); }
.cnx-final > div { padding: clamp(60px, 8vw, 120px); align-self: center; }
.cnx-final > div > span:first-child { color: var(--cnx-orange); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.cnx-final h2 { margin: 18px 0 25px; color: var(--cnx-navy); font-size: clamp(40px, 4.5vw, 64px); line-height: 1.3; }
.cnx-final p { max-width: 620px; margin: 0 0 34px; font-size: 14px; line-height: 2; }
.cnx-final > div > div { display: flex; flex-wrap: wrap; gap: 12px; }
.cnx-final figure { margin: 0; }
.cnx-final img { width: 100%; height: 100%; object-fit: cover; }
.cnx-consult-float {
position: fixed;
z-index: 90;
right: 20px;
bottom: 18px;
display: grid;
width: 320px;
min-height: 86px;
padding: 11px 14px;
grid-template-columns: 54px 1fr 38px;
gap: 11px;
align-items: center;
border: 1px solid rgb(255 255 255 / 52%);
border-radius: 30px 8px 30px 8px;
background: linear-gradient(115deg, #ff7856, #ff4a27 70%, #f33b1b);
box-shadow: 0 18px 50px rgb(187 48 16 / 31%);
color: #fff;
}
.cnx-consult-float > i { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; background: #fff; color: var(--cnx-orange); font-size: 10px; font-style: normal; font-weight: 950; letter-spacing: .08em; }
.cnx-consult-float span { min-width: 0; }
.cnx-consult-float small { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 700; opacity: .9; }
.cnx-consult-float strong { display: block; font-size: 16px; white-space: nowrap; }
.cnx-consult-float > b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #fff; color: var(--cnx-orange); }
@media (max-width: 900px) {
.cnx-hero { min-height: 1040px; padding: 66px 22px 45px; background: var(--cnx-cream); }
.cnx-hero::before { top: 45px; right: -80px; width: 220px; height: 220px; }
.cnx-hero-copy { width: 100%; max-width: none; padding-top: 0; }
.cnx-hero-note { position: static; margin: 14px 0 0; font-size: 14px; transform: rotate(-2deg); }
.cnx-hero h1 { margin: 14px 0 20px; font-size: clamp(38px, 10vw, 52px); }
.cnx-hero-lead { margin-bottom: 24px; font-size: 13px; line-height: 1.9; }
.cnx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cnx-button { min-height: 58px; padding: 0 13px; gap: 8px; font-size: 12px; }
.cnx-hero-visual { position: relative; top: auto; right: auto; width: 100%; height: 450px; margin-top: 35px; border-radius: 48px 8px 48px 8px; }
.cnx-hero-visual figcaption { right: 22px; bottom: 20px; left: 22px; }
.cnx-hero-visual figcaption b { font-size: 16px; }
.cnx-hero-stats { position: relative; right: auto; bottom: auto; width: calc(100% - 18px); margin: -34px auto 0; }
.cnx-hero-stats p { min-height: 90px; padding: 18px 12px; }
.cnx-hero-stats strong { font-size: 27px; }
.cnx-hero-stats span { font-size: 10px; }
.cnx-title h2 { font-size: clamp(31px, 8.4vw, 44px); }
.cnx-about { padding: 110px 22px; grid-template-columns: 1fr; gap: 48px; }
.cnx-about > div > p { font-size: 13px; }
.cnx-about aside { min-height: 300px; padding: 40px 30px; }
.cnx-section { padding: 100px 22px; }
.cnx-features { padding-top: 10px; }
.cnx-features > div:last-child { grid-template-columns: 1fr; gap: 12px; }
.cnx-features article,
.cnx-features article:nth-child(2) { min-height: 300px; margin-top: 0; }
.cnx-features h3 { margin-top: 65px; }
.cnx-consultation { margin: 30px 10px 0; padding: 75px 18px 35px; grid-template-columns: 1fr; gap: 45px; border-radius: 52px 8px 52px 8px; }
.cnx-consultation-intro > p { font-size: 13px; }
.cnx-consultation-intro figure { height: 360px; }
.cnx-flow article { min-height: 100px; padding: 18px 15px; grid-template-columns: 44px 1fr 22px; gap: 10px; }
.cnx-flow article > span { width: 40px; height: 40px; }
.cnx-flow h3 { font-size: 15px; }
.cnx-jobs { margin-top: 80px; padding: 100px 18px; }
.cnx-jobs-heading { grid-template-columns: 1fr; gap: 28px; }
.cnx-opportunity-explorer { grid-template-columns: 1fr; border-radius: 38px 8px 38px 8px; }
.cnx-opportunity-tabs { flex-direction: row; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 14%); }
.cnx-opportunity-tabs button { min-width: 0; min-height: 75px; flex: 1; padding: 0 8px; font-size: 12px; text-align: center; }
.cnx-opportunity-tabs button span { display: block; width: auto; margin-bottom: 5px; }
.cnx-opportunity-panel { padding: 28px 16px; }
.cnx-opportunity-panel > p { min-height: 44px; font-size: 12px; line-height: 1.7; }
.cnx-opportunity-panel > div { gap: 6px; }
.cnx-opportunity-panel article { min-width: 0; min-height: 135px; padding: 20px 12px; border-radius: 22px 5px 22px 5px; }
.cnx-opportunity-panel article span { font-size: 10px; }
.cnx-opportunity-panel article p { margin-top: 30px; font-size: 11px; }
.cnx-opportunity-panel article strong { font-size: 32px; }
.cnx-role-list { margin-top: 65px; }
.cnx-role-list header { display: block; }
.cnx-role-list header h3 { margin-top: 8px; font-size: 21px; }
.cnx-role-list > div { display: flex; margin-right: -18px; padding-right: 18px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.cnx-role-list article { width: 77vw; min-height: 235px; flex: 0 0 77vw; scroll-snap-align: start; }
.cnx-job-note { display: block; padding: 25px 20px; }
.cnx-job-note .cnx-button { width: 100%; margin-top: 18px; }
.cnx-college-bridge { padding: 110px 22px; grid-template-columns: 1fr; gap: 75px; }
.cnx-college-bridge figure { height: 430px; }
.cnx-college-bridge > div p { font-size: 13px; }
.cnx-faq { padding-top: 10px; }
.cnx-faq summary { min-height: 88px; padding: 20px 0; grid-template-columns: 30px 1fr 25px; gap: 8px; font-size: 13px; line-height: 1.7; }
.cnx-faq details > p { padding: 0 0 24px; font-size: 12px; }
.cnx-final { min-height: 0; margin: 45px 10px 10px; grid-template-columns: 1fr; border-radius: 52px 8px 52px 8px; }
.cnx-final > div { padding: 70px 22px 45px; }
.cnx-final h2 { font-size: 34px; }
.cnx-final > div > div { display: grid; grid-template-columns: 1fr; }
.cnx-final .cnx-button { width: 100%; }
.cnx-final figure { height: 390px; }
.cnx-consult-float { right: 10px; bottom: 9px; width: calc(100% - 20px); min-height: 72px; grid-template-columns: 44px 1fr 34px; border-radius: 24px 7px 24px 7px; }
.cnx-consult-float > i { width: 40px; height: 40px; font-size: 8px; }
.cnx-consult-float small { font-size: 9px; }
.cnx-consult-float strong { font-size: 14px; }
.cnx-consult-float > b { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.cnx-button,
.cnx-features article,
.cnx-role-list article { transition: none; }
}
.cnx-page.cnx-compact {
--cnx-soft: #fff7f2;
--cnx-border: #f1dcd2;
background: #fff;
color: #171b22;
}
.cnx-compact .cnx-header { height: 72px; padding-inline: clamp(20px, 4.5vw, 72px); }   
.cnx-wordmark {
display: inline-flex;
flex-direction: column;
color: #ff5734;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-size: 23px;
font-style: italic;
font-weight: 800;
line-height: 1;
}
.cnx-wordmark small {
margin-top: 7px;
color: #111820;
font-family: var(--font-sans, sans-serif);
font-size: 8px;
font-style: normal;
font-weight: 700;
letter-spacing: .02em;
}
.cnx-compact main { padding-bottom: 0; }
.cnx-compact .cnx-hero {
display: grid;
width: min(100%, 1440px);
min-height: 490px;
margin: 0 auto;
padding: 0;
grid-template-columns: 54% 46%;
background: #fff;
}
.cnx-compact .cnx-hero::before { display: none; }
.cnx-compact .cnx-hero-copy {
width: auto;
max-width: none;
padding: 56px clamp(32px, 7vw, 100px) 46px;
align-self: center;
}
.cnx-compact .cnx-eyebrow {
margin: 0 0 18px;
color: #242a32;
font-size: 15px;
font-weight: 800;
letter-spacing: .02em;
}
.cnx-compact .cnx-hero h1 {
margin: 0 0 20px;
color: #121820;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-size: clamp(36px, 3.45vw, 48px);
font-weight: 650;
line-height: 1.5;
letter-spacing: .08em;
}
.cnx-compact .cnx-hero h1 span { display: block; white-space: nowrap; }
.cnx-compact .cnx-hero-lead { max-width: 640px; margin: 0 0 22px; font-size: 13px; font-weight: 600; line-height: 1.9; }
.cnx-compact .cnx-hero-copy ul { display: none; }
.cnx-compact .cnx-actions { display: flex; gap: 16px; }
.cnx-compact .cnx-button {
min-height: 56px;
padding: 0 25px;
border-radius: 6px;
font-size: 13px;
}
.cnx-compact .cnx-button:hover { border-radius: 6px; }
.cnx-compact .cnx-hero-visual {
position: static;
width: auto;
height: 490px;
margin: 0;
border-radius: 0;
box-shadow: none;
}
.cnx-compact .cnx-hero-visual::after { display: none; }
.cnx-compact .cnx-hero-visual img { object-position: center 35%; }
.cnx-compact .cnx-band,
.cnx-compact .cnx-jobs,
.cnx-compact .cnx-lower-grid {
width: min(calc(100% - 64px), 1320px);
margin: 20px auto 0;
}
.cnx-compact .cnx-band {
display: grid;
padding: 26px 34px;
border-radius: 12px;
background: linear-gradient(105deg, #fff5ef, #fffaf7 55%, #fff5ef);
}
.cnx-compact .cnx-band h2,
.cnx-compact .cnx-jobs h2,
.cnx-compact .cnx-lower-grid h2 { margin: 0; color: #141a22; font-size: 24px; line-height: 1.45; }
.cnx-compact .cnx-band h3,
.cnx-compact .cnx-job-grid h3 { color: #141a22; }
.cnx-compact .cnx-band p { font-size: 12px; line-height: 1.8; }
.cnx-compact .cnx-about { max-width: 1320px; padding: 28px 34px; grid-template-columns: 28% 72%; gap: 20px; }
.cnx-compact .cnx-about > header { padding-right: 28px; border-right: 1px solid #eadfd8; }
.cnx-compact .cnx-about > header p { margin: 12px 0 0; font-size: 12px; line-height: 1.8; }
.cnx-about-facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.cnx-about-facts article { display: grid; min-height: 112px; padding: 14px 25px; grid-template-columns: 45px 1fr; gap: 14px; align-items: center; border-right: 1px solid #eadfd8; }
.cnx-about-facts article:last-child { border-right: 0; }
.cnx-about-facts article > span { color: #ff5b35; font-size: 34px; }
.cnx-about-facts h3 { margin: 0 0 8px; font-size: 14px; }
.cnx-about-facts p { margin: 0; }
.cnx-compact .cnx-features { max-width: 1320px; padding: 22px 34px; grid-template-columns: 17% 83%; gap: 25px; align-items: center; }
.cnx-compact .cnx-features > div:last-child { display: grid; margin: 0; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cnx-compact .cnx-features article,
.cnx-compact .cnx-features article:nth-child(2) {
display: grid;
min-height: 130px;
margin: 0;
padding: 22px;
grid-template-columns: 52px 1fr;
gap: 15px;
align-items: start;
border: 0;
border-radius: 10px;
background: rgb(255 255 255 / 72%);
box-shadow: none;
}
.cnx-compact .cnx-features article:hover { transform: translateY(-3px); background: #fff; color: inherit; }
.cnx-compact .cnx-features article > span { font-size: 33px; font-weight: 500; }
.cnx-compact .cnx-features h3 { margin: 0 0 8px; font-size: 15px; }
.cnx-compact .cnx-features p { margin: 0; font-size: 11px; line-height: 1.75; }
.cnx-compact .cnx-features i { display: none; }
.cnx-compact .cnx-consultation { max-width: 1320px; padding: 24px 34px; grid-template-columns: 20% 80%; gap: 20px; border-radius: 12px; background: linear-gradient(105deg, #fff5ef, #fffaf7 55%, #fff5ef); color: #171b22; }
.cnx-compact .cnx-consultation header { padding-right: 25px; align-self: center; }
.cnx-compact .cnx-consultation header p { margin: 12px 0 0; }
.cnx-compact .cnx-consultation header strong { display: block; margin-top: 10px; }
.cnx-compact .cnx-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.cnx-compact .cnx-flow article {
position: relative;
display: block;
min-height: 175px;
padding: 11px 12px;
border: 0;
border-radius: 0;
background: transparent;
color: #171b22;
text-align: center;
backdrop-filter: none;
}
.cnx-compact .cnx-flow article::after { position: absolute; top: 50px; right: -5px; width: 20px; border-top: 2px dotted #ff8a6d; content: ""; }
.cnx-compact .cnx-flow article:last-child::after { display: none; }
.cnx-compact .cnx-flow article > span { display: block; width: auto; height: auto; margin: 0 0 8px; background: transparent; color: #ff5b35; font-size: 13px; }
.cnx-compact .cnx-flow i { display: grid; width: 46px; height: 46px; margin: 0 auto 11px; place-items: center; border: 1px solid #ff8a6d; border-radius: 50%; color: #ff5b35; font-size: 23px; font-style: normal; }
.cnx-compact .cnx-flow h3 { margin: 0 0 8px; font-size: 13px; }
.cnx-compact .cnx-flow p { margin: 0; font-size: 10px; line-height: 1.65; opacity: .78; }
.cnx-compact .cnx-jobs { max-width: 1320px; padding: 30px 0 0; background: #fff; color: #171b22; }
.cnx-compact .cnx-jobs-heading { display: grid; max-width: none; margin: 0 0 16px; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.cnx-compact .cnx-jobs-heading > div { display: flex; align-items: flex-end; gap: 35px; }
.cnx-compact .cnx-jobs-heading h2 { font-size: 25px; white-space: nowrap; }
.cnx-compact .cnx-jobs-heading p { max-width: 650px; margin: 0; color: #4e5660; font-size: 11px; line-height: 1.75; }
.cnx-job-filters { display: grid; max-width: 810px; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cnx-job-filters label { position: relative; }
.cnx-job-filters label > span { position: absolute; z-index: 1; top: 50%; left: 18px; font-size: 11px; font-weight: 800; transform: translateY(-50%); pointer-events: none; }
.cnx-job-filters select { width: 100%; height: 45px; padding: 0 35px 0 90px; border: 1px solid #ddd7d2; border-radius: 7px; background: #fff; color: #222933; font: inherit; font-size: 11px; }
.cnx-job-count { margin: 10px 0 0; color: #777; font-size: 10px; text-align: right; }
.cnx-job-count strong { color: #ff5b35; }
.cnx-job-grid { display: grid; margin-top: 10px; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.cnx-job-grid article { position: relative; min-height: 220px; padding: 18px 17px 0; overflow: hidden; border: 1px solid var(--cnx-border); border-radius: 8px; background: linear-gradient(135deg, #fff 0%, #fffaf7 100%); }
.cnx-job-tag { display: inline-block; margin-bottom: 8px; padding: 5px 8px; border-radius: 4px; background: #b6dfc3; color: #fff; font-size: 9px; }
.cnx-job-grid h3 { margin: 3px 0 16px; font-size: 15px; line-height: 1.4; }
.cnx-job-grid dl { display: grid; margin: 0; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cnx-job-grid dl div { display: flex; min-width: 0; align-items: center; gap: 6px; }
.cnx-job-grid dt { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; overflow: hidden; color: transparent; font-size: 0; }
.cnx-job-grid dt::before { color: #ff6847; font-size: 13px; content: "○"; }
.cnx-job-grid dd { min-width: 0; margin: 0; overflow: hidden; color: #434a53; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cnx-job-grid article > a { display: flex; height: 42px; margin: 15px -17px 0; padding: 0 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--cnx-border); color: #ff5b35; font-size: 11px; font-weight: 800; }
.cnx-job-disclaimer { display: block; margin-top: 12px; color: #6f747b; font-size: 9px; }
.cnx-no-jobs { padding: 36px; border-radius: 8px; background: var(--cnx-soft); font-size: 12px; text-align: center; }
.cnx-compact .cnx-lower-grid { display: grid; padding: 0 0 24px; grid-template-columns: 1fr 1fr; gap: 18px; }
.cnx-compact .cnx-college-bridge,
.cnx-compact .cnx-faq { min-height: 280px; padding: 0; border-radius: 12px; background: var(--cnx-soft); }
.cnx-compact .cnx-college-bridge { display: grid; grid-template-columns: 40% 60%; gap: 0; overflow: hidden; }
.cnx-compact .cnx-college-bridge figure { height: 100%; min-height: 280px; margin: 0; }
.cnx-compact .cnx-college-bridge figure::before { display: none; }
.cnx-compact .cnx-college-bridge img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.cnx-compact .cnx-college-bridge > div { padding: 34px 28px; }
.cnx-compact .cnx-college-bridge h2,
.cnx-compact .cnx-faq h2 { font-size: 22px; }
.cnx-compact .cnx-college-bridge p { margin: 15px 0 24px; font-size: 11px; line-height: 1.8; }
.cnx-compact .cnx-college-bridge a { display: inline-flex; min-height: 43px; padding: 0 20px; align-items: center; gap: 35px; border: 1px solid #ff5b35; border-radius: 6px; color: #ff5b35; font-size: 12px; font-weight: 800; }
.cnx-compact .cnx-faq { padding: 30px 28px; }
.cnx-compact .cnx-faq > div:last-child { display: grid; margin-top: 16px; grid-template-columns: 1fr 1fr; gap: 9px 12px; border-top: 0; }
.cnx-compact .cnx-faq details { border: 1px solid #eed3c6; border-radius: 7px; background: #fff; }
.cnx-compact .cnx-faq summary { min-height: 48px; padding: 11px 14px; grid-template-columns: 1fr 20px; gap: 8px; font-size: 11px; }
.cnx-compact .cnx-faq summary > b { color: #ff5b35; }
.cnx-compact .cnx-faq details > p { padding: 0 14px 14px; color: #555d67; font-size: 10px; line-height: 1.75; }
.cnx-compact .cnx-final {
display: grid;
width: min(calc(100% - 64px), 1320px);
min-height: 250px;
margin: 0 auto 22px;
grid-template-columns: 66% 34%;
overflow: hidden;
border-radius: 12px;
background: linear-gradient(90deg, #fff8f4, #fff);
}
.cnx-compact .cnx-final > div { padding: 34px 56px; align-self: center; }
.cnx-compact .cnx-final > div > small { color: #ff5b35; font-size: 11px; font-weight: 800; }
.cnx-compact .cnx-final h2 { margin: 9px 0 11px; font-size: 27px; line-height: 1.45; }
.cnx-compact .cnx-final p { margin: 0 0 18px; font-size: 11px; line-height: 1.75; }
.cnx-compact .cnx-final figure { height: 250px; }
.cnx-compact .cnx-final img { object-position: center 30%; }
.cnx-compact .cnx-footer { padding-top: 38px; }
.cnx-compact .cnx-footer .footer-top { padding-bottom: 30px; }
.cnx-compact .cnx-consult-float { width: 292px; min-height: 76px; }
@media (max-width: 760px) {
.cnx-compact .cnx-header { height: 72px; padding: 10px 18px; }
.cnx-wordmark { font-size: 22px; }
.cnx-wordmark small { font-size: 7px; }
.cnx-compact .cnx-hero { display: flex; min-height: 0; flex-direction: column; }
.cnx-compact .cnx-hero-visual { order: 1; height: 310px; }
.cnx-compact .cnx-hero-visual img { object-position: center 28%; }
.cnx-compact .cnx-hero-copy { order: 2; padding: 28px 18px 32px; }
.cnx-compact .cnx-eyebrow { display: none; }
.cnx-compact .cnx-hero h1 { margin: 0 0 20px; font-size: 30px; line-height: 1.65; letter-spacing: .07em; }
.cnx-compact .cnx-hero h1 span { white-space: normal; }
.cnx-compact .cnx-hero h1::after { display: block; width: 130px; margin-top: 8px; border-top: 2px solid #ff5b35; content: ""; transform: rotate(-3deg); }
.cnx-compact .cnx-hero-lead { font-size: 12px; }
.cnx-compact .cnx-hero-copy ul { display: grid; margin: 18px 0 26px; padding: 0; gap: 10px; list-style: none; }
.cnx-compact .cnx-hero-copy li { font-size: 11px; font-weight: 700; }
.cnx-compact .cnx-hero-copy li::before { margin-right: 8px; color: #ff5b35; content: "✓"; }
.cnx-compact .cnx-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
.cnx-compact .cnx-button { width: 100%; min-height: 58px; padding: 0 18px; font-size: 12px; }
.cnx-compact .cnx-band,
.cnx-compact .cnx-jobs,
.cnx-compact .cnx-lower-grid,
.cnx-compact .cnx-final { width: 100%; margin-top: 0; border-radius: 0; }
.cnx-compact .cnx-band { padding: 48px 18px; background: #fff; }
.cnx-compact .cnx-band h2,
.cnx-compact .cnx-jobs h2,
.cnx-compact .cnx-lower-grid h2 { font-size: 23px; text-align: center; }
.cnx-compact .cnx-about { display: block; }
.cnx-compact .cnx-about > header { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid #eee5df; text-align: center; }
.cnx-compact .cnx-about-facts { display: block; }
.cnx-compact .cnx-about-facts article { min-height: 105px; padding: 24px 4px; grid-template-columns: 48px 1fr; border-right: 0; border-bottom: 1px solid #eee5df; }
.cnx-compact .cnx-features { display: block; }
.cnx-compact .cnx-features > div:last-child { display: block; margin-top: 25px; }
.cnx-compact .cnx-features article,
.cnx-compact .cnx-features article:nth-child(2) { min-height: 0; padding: 24px 0; grid-template-columns: 56px 1fr; border-bottom: 1px solid #eee5df; background: #fff; }
.cnx-compact .cnx-features h3 { font-size: 15px; }
.cnx-compact .cnx-features p { font-size: 11px; }
.cnx-compact .cnx-consultation { display: block; padding: 48px 18px; background: var(--cnx-soft); }
.cnx-compact .cnx-consultation header { padding: 0; text-align: center; }
.cnx-compact .cnx-flow { display: block; margin-top: 30px; }
.cnx-compact .cnx-flow article { display: grid; min-height: 112px; padding: 14px 0; grid-template-columns: 30px 50px 1fr; grid-template-rows: auto auto; gap: 2px 10px; text-align: left; }
.cnx-compact .cnx-flow article::after { top: auto; right: auto; bottom: -6px; left: 54px; width: 1px; height: 24px; border-top: 0; border-left: 2px dotted #ff8a6d; }
.cnx-compact .cnx-flow article > span { grid-row: 1 / 3; align-self: center; }
.cnx-compact .cnx-flow i { grid-row: 1 / 3; width: 44px; height: 44px; align-self: center; }
.cnx-compact .cnx-flow h3 { align-self: end; font-size: 14px; }
.cnx-compact .cnx-flow p { font-size: 10px; }
.cnx-compact .cnx-jobs { padding: 55px 18px; }
.cnx-compact .cnx-jobs-heading { display: block; margin-bottom: 20px; }
.cnx-compact .cnx-jobs-heading > div { display: block; }
.cnx-compact .cnx-jobs-heading h2 { font-size: 23px; white-space: normal; }
.cnx-compact .cnx-jobs-heading p { margin-top: 15px; font-size: 11px; }
.cnx-compact .cnx-jobs-heading > .cnx-button { margin-top: 18px; }
.cnx-job-filters { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cnx-job-filters select { height: 44px; border-radius: 22px; background: var(--cnx-soft); }
.cnx-job-grid { grid-template-columns: 1fr; gap: 10px; }
.cnx-job-grid article { min-height: 0; padding: 18px 16px 0; }
.cnx-job-grid h3 { font-size: 16px; }
.cnx-job-grid dl { gap: 11px 14px; }
.cnx-job-grid dd { font-size: 10px; }
.cnx-job-disclaimer { font-size: 9px; line-height: 1.7; }
.cnx-compact .cnx-lower-grid { display: block; padding: 0; }
.cnx-compact .cnx-college-bridge,
.cnx-compact .cnx-faq { min-height: 0; border-radius: 0; }
.cnx-compact .cnx-college-bridge { display: flex; flex-direction: column; }
.cnx-compact .cnx-college-bridge figure { min-height: 280px; order: 2; }
.cnx-compact .cnx-college-bridge > div { order: 1; padding: 48px 18px 34px; text-align: center; }
.cnx-compact .cnx-college-bridge p { font-size: 11px; }
.cnx-compact .cnx-faq { padding: 55px 18px; background: #fff; }
.cnx-compact .cnx-faq > div:last-child { display: block; }
.cnx-compact .cnx-faq details { margin-bottom: 9px; }
.cnx-compact .cnx-faq summary { min-height: 58px; padding: 14px; font-size: 12px; }
.cnx-compact .cnx-faq details > p { font-size: 11px; }
.cnx-compact .cnx-final { display: flex; min-height: 0; flex-direction: column; background: var(--cnx-soft); }
.cnx-compact .cnx-final > div { padding: 58px 18px 34px; text-align: center; }
.cnx-compact .cnx-final h2 { font-size: 29px; }
.cnx-compact .cnx-final p { font-size: 11px; }
.cnx-compact .cnx-final > div > div { display: grid; grid-template-columns: 1fr; }
.cnx-compact .cnx-final figure { height: 350px; }
.cnx-compact .cnx-footer { padding-top: 50px; }
.cnx-compact .cnx-footer .footer-brand .cnx-wordmark { align-items: center; }
.cnx-compact .cnx-consult-float { right: 10px; bottom: 9px; width: calc(100% - 20px); }
}
.cnx-compact .cnx-section-kicker {
display: block;
margin-bottom: 10px;
color: #ff5b35;
font-size: 10px;
font-weight: 900;
letter-spacing: .18em;
line-height: 1;
}
.cnx-compact .cnx-band,
.cnx-compact .cnx-lower-grid {
width: min(calc(100% - 80px), 1180px);
margin-top: 88px;
}
.cnx-compact .cnx-band {
display: block;
padding: 72px;
border-radius: 28px;
}
.cnx-compact .cnx-band h2,
.cnx-compact .cnx-jobs h2,
.cnx-compact .cnx-lower-grid h2 {
font-size: clamp(28px, 3vw, 42px);
letter-spacing: -.035em;
}
.cnx-compact .cnx-about > header,
.cnx-compact .cnx-features > header,
.cnx-compact .cnx-consultation > header {
max-width: 720px;
padding: 0;
border: 0;
}
.cnx-compact .cnx-about > header p,
.cnx-compact .cnx-consultation header p {
margin-top: 18px;
font-size: 14px;
line-height: 2;
}
.cnx-compact .cnx-about-facts {
margin-top: 40px;
gap: 16px;
}
.cnx-compact .cnx-about-facts article {
min-height: 165px;
padding: 28px;
border: 1px solid #f0e1d8;
border-radius: 18px;
background: rgb(255 255 255 / 78%);
}
.cnx-compact .cnx-about-facts article:last-child { border-right: 1px solid #f0e1d8; }
.cnx-compact .cnx-about-facts h3 { font-size: 16px; }
.cnx-compact .cnx-about-facts p { font-size: 12px; }
.cnx-compact .cnx-features > div:last-child {
margin-top: 40px;
gap: 18px;
}
.cnx-compact .cnx-features article,
.cnx-compact .cnx-features article:nth-child(2) {
min-height: 220px;
padding: 34px 30px;
grid-template-columns: 58px 1fr;
gap: 20px;
border: 1px solid #f0e1d8;
border-radius: 18px;
background: #fff;
}
.cnx-compact .cnx-features h3 { font-size: 17px; }
.cnx-compact .cnx-features p { font-size: 12px; line-height: 1.9; }
.cnx-compact .cnx-consultation {
padding: 80px 72px 74px;
border-radius: 28px;
}
.cnx-compact .cnx-consultation header strong {
display: inline;
margin: 0;
}
.cnx-compact .cnx-flow {
display: grid;
margin-top: 54px;
padding-bottom: 120px;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
align-items: start;
}
.cnx-compact .cnx-flow article {
min-height: 220px;
padding: 24px 18px;
border: 1px solid #f0d9cd;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 36px rgb(118 66 39 / 7%);
text-align: left;
}
.cnx-compact .cnx-flow article:nth-child(2) { transform: translateY(24px); }
.cnx-compact .cnx-flow article:nth-child(3) { transform: translateY(48px); }
.cnx-compact .cnx-flow article:nth-child(4) { transform: translateY(72px); }
.cnx-compact .cnx-flow article:nth-child(5) { transform: translateY(96px); }
.cnx-compact .cnx-flow article:nth-child(6) { transform: translateY(120px); }
.cnx-compact .cnx-flow article::after { display: none; }
.cnx-compact .cnx-flow article > span {
margin-bottom: 18px;
font-size: 12px;
letter-spacing: .13em;
}
.cnx-compact .cnx-flow i {
width: 52px;
height: 52px;
margin: 0 0 20px;
}
.cnx-compact .cnx-flow h3 {
min-height: 45px;
margin-bottom: 10px;
font-size: 15px;
line-height: 1.5;
}
.cnx-compact .cnx-flow p { font-size: 11px; line-height: 1.8; }
.cnx-compact .cnx-jobs {
width: 100%;
max-width: none;
margin-top: 110px;
padding: 100px 0 112px max(40px, calc((100% - 1180px) / 2));
overflow: hidden;
background: linear-gradient(135deg, #fff4ed, #fffaf7 72%);
}
.cnx-compact .cnx-jobs-heading {
max-width: 1180px;
margin: 0;
padding-right: 40px;
align-items: center;
}
.cnx-compact .cnx-jobs-heading > div {
align-items: center;
gap: 56px;
}
.cnx-compact .cnx-jobs-heading h2 {
margin-top: 0;
font-size: clamp(28px, 3vw, 42px);
}
.cnx-compact .cnx-jobs-heading p {
max-width: 510px;
font-size: 13px;
line-height: 1.9;
}
.cnx-compact .cnx-job-explorer { margin-top: 42px; }
.cnx-compact .cnx-job-filters { max-width: 880px; gap: 12px; }
.cnx-compact .cnx-job-filters select { height: 52px; font-size: 12px; }
.cnx-job-carousel-head {
display: flex;
max-width: 1180px;
margin-top: 25px;
padding-right: 40px;
align-items: center;
justify-content: space-between;
}
.cnx-compact .cnx-job-count { margin: 0; font-size: 12px; text-align: left; }
.cnx-job-carousel-controls { display: flex; align-items: center; gap: 8px; }
.cnx-job-carousel-controls button {
display: grid;
min-width: 40px;
height: 40px;
padding: 0 11px;
place-items: center;
border: 1px solid #efc7b5;
border-radius: 999px;
background: #fff;
color: #ec5532;
font: inherit;
font-size: 11px;
font-weight: 800;
cursor: pointer;
}
.cnx-job-carousel-controls button:hover { background: #ff5b35; color: #fff; }
.cnx-job-carousel-controls span { min-width: 50px; color: #6f675f; font-size: 11px; text-align: center; }
.cnx-compact .cnx-job-grid {
display: flex;
margin-top: 20px;
padding: 4px 40px 18px 0;
gap: 18px;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.cnx-compact .cnx-job-grid::-webkit-scrollbar { display: none; }
.cnx-compact .cnx-job-grid article {
width: clamp(310px, 29vw, 380px);
min-height: 295px;
flex: 0 0 clamp(310px, 29vw, 380px);
padding: 28px 25px 0;
border-radius: 18px;
background: #fff;
box-shadow: 0 16px 36px rgb(118 66 39 / 6%);
scroll-snap-align: start;
}
.cnx-compact .cnx-job-grid h3 { margin: 5px 0 24px; font-size: 19px; }
.cnx-compact .cnx-job-grid dl { gap: 14px 18px; }
.cnx-compact .cnx-job-grid dd { font-size: 12px; }
.cnx-compact .cnx-job-grid article > a { height: 50px; margin: 22px -25px 0; padding: 0 24px; font-size: 12px; }
.cnx-compact .cnx-job-disclaimer { max-width: 1180px; margin-top: 16px; padding-right: 40px; font-size: 10px; }
.cnx-compact .cnx-lower-grid {
display: flex;
padding: 0 0 40px;
flex-direction: column;
gap: 100px;
}
.cnx-compact .cnx-college-bridge,
.cnx-compact .cnx-faq {
min-height: 0;
border-radius: 28px;
}
.cnx-compact .cnx-college-bridge {
min-height: 450px;
grid-template-columns: .9fr 1.1fr;
}
.cnx-compact .cnx-college-bridge figure { min-height: 450px; }
.cnx-compact .cnx-college-bridge > div { padding: 74px 68px; align-self: center; }
.cnx-compact .cnx-college-bridge p { max-width: 540px; margin: 23px 0 35px; font-size: 14px; line-height: 2; }
.cnx-compact .cnx-college-bridge a { min-height: 52px; padding: 0 24px; font-size: 13px; }
.cnx-compact .cnx-faq {
padding: 76px 88px;
background: #fff;
border: 1px solid #f0e1d8;
}
.cnx-compact .cnx-faq > header { max-width: 670px; }
.cnx-compact .cnx-faq > header p { margin: 18px 0 0; color: #5a626c; font-size: 14px; line-height: 1.9; }
.cnx-compact .cnx-faq > div:last-child { display: block; max-width: 900px; margin-top: 42px; }
.cnx-compact .cnx-faq details { margin-bottom: 12px; border-radius: 12px; }
.cnx-compact .cnx-faq summary { min-height: 70px; padding: 18px 22px; font-size: 14px; }
.cnx-compact .cnx-faq details > p { padding: 0 22px 24px; font-size: 12px; line-height: 1.9; }
@media (min-width: 761px) and (max-width: 1080px) {
.cnx-compact .cnx-flow { grid-template-columns: repeat(3, 1fr); padding-bottom: 48px; }
.cnx-compact .cnx-flow article:nth-child(1),
.cnx-compact .cnx-flow article:nth-child(4) { transform: none; }
.cnx-compact .cnx-flow article:nth-child(2),
.cnx-compact .cnx-flow article:nth-child(5) { transform: translateY(20px); }
.cnx-compact .cnx-flow article:nth-child(3),
.cnx-compact .cnx-flow article:nth-child(6) { transform: translateY(40px); }
}
@media (max-width: 760px) {
.cnx-compact .cnx-band,
.cnx-compact .cnx-lower-grid { width: 100%; margin-top: 0; }
.cnx-compact .cnx-band { padding: 74px 20px; border-radius: 0; }
.cnx-compact .cnx-band h2,
.cnx-compact .cnx-jobs h2,
.cnx-compact .cnx-lower-grid h2 { font-size: 29px; text-align: left; }
.cnx-compact .cnx-section-kicker { font-size: 9px; }
.cnx-compact .cnx-about > header,
.cnx-compact .cnx-features > header,
.cnx-compact .cnx-consultation > header { text-align: left; }
.cnx-compact .cnx-about-facts { margin-top: 32px; }
.cnx-compact .cnx-about-facts article { min-height: 128px; padding: 24px 20px; border: 1px solid #f0e1d8; border-radius: 14px; }
.cnx-compact .cnx-features > div:last-child { margin-top: 32px; }
.cnx-compact .cnx-features article,
.cnx-compact .cnx-features article:nth-child(2) { min-height: 0; padding: 28px 20px; border: 1px solid #f0e1d8; border-radius: 14px; }
.cnx-compact .cnx-consultation { padding: 76px 20px 84px; }
.cnx-compact .cnx-consultation header p { font-size: 13px; }
.cnx-compact .cnx-flow { display: block; margin-top: 36px; padding-bottom: 0; }
.cnx-compact .cnx-flow article,
.cnx-compact .cnx-flow article:nth-child(n) {
display: grid;
width: calc(100% - 28px);
min-height: 142px;
margin-bottom: 14px;
padding: 22px 20px;
grid-template-columns: 50px 1fr;
grid-template-rows: auto 1fr;
gap: 8px 14px;
border-radius: 15px;
transform: none;
text-align: left;
}
.cnx-compact .cnx-flow article:nth-child(even) { margin-left: 28px; }
.cnx-compact .cnx-flow article > span { grid-column: 1; grid-row: 1; margin: 0; }
.cnx-compact .cnx-flow i { grid-column: 1; grid-row: 2; width: 44px; height: 44px; margin: 0; }
.cnx-compact .cnx-flow h3 { min-height: 0; grid-column: 2; grid-row: 1; margin: 0; align-self: start; font-size: 15px; }
.cnx-compact .cnx-flow p { grid-column: 2; grid-row: 2; font-size: 11px; }
.cnx-compact .cnx-jobs { margin-top: 0; padding: 82px 0 90px 18px; }
.cnx-compact .cnx-jobs-heading { display: block; padding-right: 18px; }
.cnx-compact .cnx-jobs-heading > div { display: block; }
.cnx-compact .cnx-jobs-heading p { margin-top: 18px; font-size: 12px; }
.cnx-compact .cnx-jobs-heading > .cnx-button { margin-top: 24px; }
.cnx-compact .cnx-job-explorer { margin-top: 34px; }
.cnx-compact .cnx-job-filters { padding-right: 18px; }
.cnx-job-carousel-head { margin-top: 24px; padding-right: 18px; }
.cnx-job-carousel-controls { gap: 5px; }
.cnx-job-carousel-controls button { min-width: 36px; height: 36px; padding: 0 9px; font-size: 10px; }
.cnx-job-carousel-controls span { min-width: 43px; font-size: 10px; }
.cnx-compact .cnx-job-grid { margin-top: 18px; padding-right: 18px; gap: 12px; }
.cnx-compact .cnx-job-grid article { width: 82vw; min-height: 292px; flex-basis: 82vw; padding: 25px 20px 0; border-radius: 15px; }
.cnx-compact .cnx-job-grid article > a { margin-right: -20px; margin-left: -20px; }
.cnx-compact .cnx-job-disclaimer { padding-right: 18px; font-size: 10px; line-height: 1.8; }
.cnx-compact .cnx-lower-grid { gap: 74px; }
.cnx-compact .cnx-college-bridge,
.cnx-compact .cnx-faq { border-radius: 0; }
.cnx-compact .cnx-college-bridge { display: flex; min-height: 0; flex-direction: column; }
.cnx-compact .cnx-college-bridge figure { min-height: 320px; order: 1; }
.cnx-compact .cnx-college-bridge > div { order: 2; padding: 52px 20px 62px; text-align: left; }
.cnx-compact .cnx-college-bridge p { font-size: 13px; }
.cnx-compact .cnx-faq { padding: 70px 20px 84px; border-right: 0; border-left: 0; }
.cnx-compact .cnx-faq > header p { font-size: 13px; }
.cnx-compact .cnx-faq > div:last-child { margin-top: 32px; }
.cnx-compact .cnx-faq summary { min-height: 68px; padding: 17px 16px; font-size: 13px; line-height: 1.7; }
.cnx-compact .cnx-faq details > p { padding: 0 16px 20px; font-size: 12px; }
}
.cnx-compact .cnx-header {
width: 100%;
height: 72px;
padding-right: max(20px, calc((100vw - 1400px) / 2));
padding-left: max(20px, calc((100vw - 1400px) / 2));
}
.cnx-compact .cnx-header .brand { min-width: 112px; }
.cnx-compact .cnx-header .brand-logo { width: 112px; }
.cnx-compact .cnx-about {
position: relative;
overflow: hidden;
background: linear-gradient(125deg, #fff5ed, #fffaf7 65%, #fff0e5);
}
.cnx-compact .cnx-about::before {
position: absolute;
top: -150px;
right: -100px;
width: 340px;
height: 340px;
border: 64px solid rgb(255 104 65 / 9%);
border-radius: 50%;
content: "";
}
.cnx-compact .cnx-about > header,
.cnx-compact .cnx-about-facts { position: relative; z-index: 1; }
.cnx-compact .cnx-about-facts {
overflow: hidden;
border: 1px solid #f0ddd2;
border-radius: 20px;
background: rgb(255 255 255 / 76%);
}
.cnx-compact .cnx-about-facts article {
min-height: 176px;
border: 0;
border-right: 1px solid #f0ddd2;
border-radius: 0;
background: transparent;
}
.cnx-compact .cnx-about-facts article:last-child { border: 0; }
.cnx-compact .cnx-features {
position: relative;
padding-right: 10px;
padding-left: 10px;
background: transparent;
}
.cnx-compact .cnx-features > header { padding-left: 62px; }
.cnx-compact .cnx-features > div:last-child { counter-reset: cnx-feature; }
.cnx-compact .cnx-features article,
.cnx-compact .cnx-features article:nth-child(2) {
position: relative;
min-height: 245px;
padding: 54px 34px 30px;
grid-template-columns: 48px 1fr;
border: 0;
border-top: 1px solid #dfd7d1;
border-radius: 0;
background: transparent;
box-shadow: none;
counter-increment: cnx-feature;
}
.cnx-compact .cnx-features article::before {
position: absolute;
top: 14px;
right: 22px;
color: rgb(255 91 53 / 17%);
content: counter(cnx-feature, decimal-leading-zero);
font-family: Georgia, serif;
font-size: 66px;
font-style: italic;
font-weight: 400;
line-height: 1;
}
.cnx-compact .cnx-features article > span {
position: relative;
z-index: 1;
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 50%;
background: #fff1e9;
font-size: 25px;
}
.cnx-compact .cnx-features h3 { margin-top: 9px; font-size: 19px; }
.cnx-compact .cnx-features p { max-width: 280px; }
.cnx-compact .cnx-consultation {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(145deg, #fff1e7, #fff8f3 58%, #ffe9db);
}
.cnx-compact .cnx-consultation::before {
position: absolute;
z-index: -1;
right: -160px;
bottom: -200px;
width: 470px;
height: 470px;
border-radius: 50%;
background: radial-gradient(circle, rgb(255 92 50 / 13%), rgb(255 92 50 / 3%) 52%, transparent 53%);
content: "";
}
.cnx-compact .cnx-flow { position: relative; }
.cnx-compact .cnx-flow::before {
position: absolute;
z-index: 0;
top: 85px;
right: 3%;
left: 3%;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #ffad91, #ff5b35);
box-shadow: 0 0 0 7px rgb(255 92 50 / 5%);
content: "";
transform: rotate(6.25deg);
transform-origin: left center;
}
.cnx-compact .cnx-flow article {
z-index: 1;
min-height: 210px;
padding: 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.cnx-compact .cnx-flow article > span {
color: rgb(255 91 53 / 46%);
font-family: Georgia, serif;
font-size: 34px;
font-style: italic;
letter-spacing: -.04em;
}
.cnx-compact .cnx-flow i {
width: 58px;
height: 58px;
border: 7px solid #fff8f3;
background: var(--orange-gloss);
box-shadow: 0 12px 27px rgb(202 70 31 / 18%);
color: #fff;
}
.cnx-compact .cnx-flow h3 { min-height: 50px; font-size: 16px; }
.cnx-compact .cnx-flow p { max-width: 160px; color: #5e514a; font-size: 12px; opacity: 1; }
.cnx-compact .cnx-job-grid article:nth-child(odd) { border-radius: 52px 16px 16px 16px; }
.cnx-compact .cnx-job-grid article:nth-child(even) { border-radius: 16px 52px 16px 16px; }
.cnx-compact .cnx-job-grid article { border-color: rgb(255 114 76 / 24%); }
.cnx-compact .cnx-job-grid article::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 5px;
background: var(--orange-gloss);
content: "";
opacity: .72;
}
.cnx-compact .cnx-college-bridge {
position: relative;
isolation: isolate;
overflow: visible;
background: #fff3ea;
}
.cnx-compact .cnx-college-bridge::after {
position: absolute;
z-index: 2;
top: 52px;
left: calc(45% - 45px);
display: grid;
width: 90px;
height: 90px;
place-items: center;
border-radius: 50%;
background: var(--orange-gloss);
box-shadow: 0 16px 35px rgb(225 72 33 / 22%);
color: #fff;
content: "LEARN\A  ×\A CAREER";
font-size: 9px;
font-weight: 900;
letter-spacing: .09em;
line-height: 1.35;
text-align: center;
white-space: pre;
}
.cnx-compact .cnx-college-bridge figure {
margin: -28px 0 28px -28px;
border-radius: 28px;
box-shadow: 0 26px 55px rgb(58 35 22 / 12%);
}
.cnx-compact .cnx-final {
position: relative;
isolation: isolate;
display: block;
width: min(calc(100% - 80px), 1180px);
min-height: 570px;
margin: 80px auto 35px;
overflow: hidden;
border-radius: 32px;
background: #19263a;
}
.cnx-compact .cnx-final::after {
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(circle at 24% 88%, rgb(255 92 50 / 44%), transparent 34%),
linear-gradient(90deg, rgb(7 19 41 / 94%) 0%, rgb(7 19 41 / 83%) 42%, rgb(7 19 41 / 20%) 78%, rgb(7 19 41 / 8%) 100%);
content: "";
}
.cnx-compact .cnx-final > div {
position: relative;
z-index: 2;
max-width: 720px;
padding: 102px 74px;
color: #fff;
}
.cnx-compact .cnx-final > div > small { color: #ffb69e; font-size: 12px; letter-spacing: .08em; }
.cnx-compact .cnx-final h2 {
margin: 14px 0 22px;
color: #fff;
font-size: clamp(42px, 4.5vw, 62px);
line-height: 1.35;
letter-spacing: -.04em;
}
.cnx-compact .cnx-final p { max-width: 580px; margin-bottom: 30px; color: rgb(255 255 255 / 82%); font-size: 14px; line-height: 2; }
.cnx-compact .cnx-final > div > div { display: flex; gap: 12px; }
.cnx-compact .cnx-final .cnx-button { border-color: #fff; background: rgb(255 255 255 / 94%); color: #14223a; }
.cnx-compact .cnx-final .cnx-button.is-primary { border-color: transparent; background: var(--orange-gloss); color: #fff; }
.cnx-compact .cnx-final figure {
position: absolute;
z-index: -2;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
}
.cnx-compact .cnx-final figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
@media (max-width: 760px) {
.cnx-compact .cnx-header { height: 72px; padding: 10px 18px; }
.cnx-compact .cnx-header .brand-logo { width: 98px; }
.cnx-compact .cnx-about-facts { display: block; border-radius: 16px; }
.cnx-compact .cnx-about-facts article,
.cnx-compact .cnx-about-facts article:last-child { border: 0; border-bottom: 1px solid #f0ddd2; border-radius: 0; }
.cnx-compact .cnx-about-facts article:last-child { border-bottom: 0; }
.cnx-compact .cnx-features { padding: 78px 20px; }
.cnx-compact .cnx-features > header { padding-left: 0; }
.cnx-compact .cnx-features article,
.cnx-compact .cnx-features article:nth-child(2) { min-height: 200px; padding: 48px 12px 28px; border: 0; border-top: 1px solid #dfd7d1; border-radius: 0; }
.cnx-compact .cnx-features article::before { right: 8px; font-size: 58px; }
.cnx-compact .cnx-flow { position: relative; }
.cnx-compact .cnx-flow::before {
top: 16px;
bottom: 20px;
left: 42px;
width: 3px;
height: auto;
background: linear-gradient(#ffad91, #ff5b35);
transform: none;
}
.cnx-compact .cnx-flow article,
.cnx-compact .cnx-flow article:nth-child(n) {
position: relative;
width: 100%;
min-height: 155px;
margin: 0;
padding: 13px 0 32px;
grid-template-columns: 66px 1fr;
gap: 5px 16px;
border: 0;
background: transparent;
box-shadow: none;
}
.cnx-compact .cnx-flow article > span { position: absolute; top: -7px; left: 72px; font-size: 28px; }
.cnx-compact .cnx-flow i { z-index: 2; grid-column: 1; grid-row: 1 / 3; width: 54px; height: 54px; margin-top: 25px; border-width: 6px; }
.cnx-compact .cnx-flow h3 { min-height: 0; margin-top: 29px; font-size: 16px; }
.cnx-compact .cnx-flow p { max-width: 240px; font-size: 12px; }
.cnx-compact .cnx-job-grid article:nth-child(n) { border-radius: 42px 14px 14px 14px; }
.cnx-compact .cnx-college-bridge { padding-top: 28px; }
.cnx-compact .cnx-college-bridge::after { top: 304px; left: 20px; width: 76px; height: 76px; }
.cnx-compact .cnx-college-bridge figure { width: calc(100% - 28px); min-height: 310px; margin: 0 0 0 28px; border-radius: 28px 0 0 28px; }
.cnx-compact .cnx-final {
width: calc(100% - 20px);
min-height: 690px;
margin: 12px 10px 22px;
border-radius: 28px;
}
.cnx-compact .cnx-final::after {
background: linear-gradient(180deg, rgb(7 19 41 / 28%) 0%, rgb(7 19 41 / 76%) 46%, rgb(7 19 41 / 96%) 100%);
}
.cnx-compact .cnx-final > div { position: absolute; right: 0; bottom: 0; left: 0; padding: 56px 22px 34px; text-align: left; }
.cnx-compact .cnx-final h2 { font-size: 35px; }
.cnx-compact .cnx-final p { font-size: 12px; }
.cnx-compact .cnx-final > div > div { display: grid; grid-template-columns: 1fr; }
.cnx-compact .cnx-final figure { height: 100%; }
.cnx-compact .cnx-final figure img { object-position: 60% center; }
}
.shared-footer {
position: relative;
isolation: isolate;
margin-top: 110px;
overflow: hidden;
background: #0b172c;
color: #fff;
}
.shared-footer::before {
position: absolute;
z-index: -1;
top: -280px;
right: -180px;
width: 590px;
height: 590px;
border: 120px solid rgb(255 101 58 / 19%);
border-radius: 50%;
content: "";
}
.shared-footer::after {
position: absolute;
z-index: -1;
right: 0;
bottom: 0;
width: 42%;
height: 44%;
background-image: radial-gradient(rgb(255 255 255 / 14%) 1px, transparent 1px);
background-size: 15px 15px;
content: "";
mask-image: linear-gradient(135deg, transparent, #000);
}
.shared-footer-inner {
display: grid;
width: min(calc(100% - 80px), 1240px);
margin: 0 auto;
padding: 112px 0 92px;
grid-template-columns: .72fr 1.28fr;
gap: clamp(70px, 9vw, 135px);
}
.shared-footer-intro { position: relative; }
.shared-footer-en {
display: block;
margin-bottom: 32px;
color: #ff8b67;
font-size: 10px;
font-weight: 900;
letter-spacing: .2em;
}
.shared-footer .brand { width: fit-content; }
.shared-footer .brand-logo { width: 145px; }
.shared-footer-intro > p {
margin: 31px 0 38px;
color: rgb(255 255 255 / 73%);
font-size: 14px;
line-height: 2;
}
.shared-footer-intro dl { margin: 0; }
.shared-footer-intro dl > div {
display: grid;
max-width: 335px;
min-height: 38px;
grid-template-columns: 86px 1fr;
align-items: center;
border-bottom: 1px solid rgb(255 255 255 / 13%);
}
.shared-footer-intro dt {
color: #ff8965;
font-size: 8px;
font-weight: 900;
letter-spacing: .13em;
}
.shared-footer-intro dd { margin: 0; color: rgb(255 255 255 / 78%); font-size: 11px; }
.shared-footer-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 62px 50px;
}
.shared-footer-nav section { min-width: 0; }
.shared-footer-nav header {
display: flex;
margin-bottom: 20px;
align-items: center;
gap: 14px;
}
.shared-footer-nav header > span {
color: #ff805c;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
}
.shared-footer-nav h2 {
margin: 0;
color: #fff;
font-size: 15px;
letter-spacing: .04em;
}
.shared-footer-nav section > div { border-top: 1px solid rgb(255 255 255 / 18%); }
.shared-footer-nav a {
display: flex;
min-height: 45px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgb(255 255 255 / 10%);
color: rgb(255 255 255 / 72%);
font-size: 12px;
transition: color .2s ease, padding .2s ease;
}
.shared-footer-nav a:hover { padding-left: 7px; color: #ff9a78; }
.shared-footer-nav a b { color: #ff805c; font-size: 10px; font-weight: 500; }
.shared-footer-orbit {
position: absolute;
z-index: 1;
bottom: 52px;
left: max(38px, calc((100vw - 1400px) / 2));
display: grid;
width: 92px;
height: 92px;
place-content: center;
border: 1px solid rgb(255 128 88 / 52%);
border-radius: 50%;
color: #ff8a66;
font-size: 7px;
font-weight: 900;
letter-spacing: .16em;
line-height: 1.55;
text-align: center;
}
.shared-footer-orbit::before,
.shared-footer-orbit::after {
position: absolute;
border-radius: 50%;
content: "";
}
.shared-footer-orbit::before { inset: 8px; border: 1px solid rgb(255 128 88 / 22%); }
.shared-footer-orbit::after { top: 43px; left: 43px; width: 6px; height: 6px; background: #ff6b42; }
.shared-footer-orbit span { display: block; }
.shared-footer-bottom {
display: flex;
width: min(calc(100% - 80px), 1240px);
min-height: 78px;
margin: 0 auto;
padding-left: 130px;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgb(255 255 255 / 15%);
color: rgb(255 255 255 / 48%);
font-size: 9px;
letter-spacing: .05em;
}
.shared-footer-bottom > div { display: flex; gap: 28px; }
.shared-footer-bottom a { color: rgb(255 255 255 / 75%); font-size: 10px; font-weight: 800; }
@media (max-width: 820px) {
.shared-footer { margin-top: 70px; }
.shared-footer::before { top: -180px; right: -190px; width: 390px; height: 390px; border-width: 76px; }
.shared-footer-inner {
display: block;
width: calc(100% - 40px);
padding: 76px 0 68px;
}
.shared-footer-en { margin-bottom: 25px; font-size: 8px; }
.shared-footer .brand-logo { width: 126px; }
.shared-footer-intro > p { margin: 24px 0 31px; font-size: 12px; }
.shared-footer-intro dl > div { max-width: none; }
.shared-footer-nav { margin-top: 68px; grid-template-columns: 1fr 1fr; gap: 48px 22px; }
.shared-footer-nav header { margin-bottom: 15px; gap: 9px; }
.shared-footer-nav h2 { font-size: 12px; }
.shared-footer-nav a { min-height: 48px; font-size: 10px; line-height: 1.45; }
.shared-footer-nav a b { margin-left: 8px; }
.shared-footer-orbit { display: none; }
.shared-footer-bottom {
width: calc(100% - 40px);
min-height: 86px;
padding: 20px 0;
flex-direction: column-reverse;
align-items: flex-start;
justify-content: center;
gap: 13px;
}
}
@media (max-width: 420px) {
.shared-footer-nav { grid-template-columns: 1fr; gap: 42px; }
.shared-footer-nav a { font-size: 11px; }
}
.cnx-v3 {
position: relative;
--next-peach: #fff1e8;
--next-cream: #fffaf6;
background: #fff;
color: var(--ink);
}
.cnx-v3 .cnx-header {
width: 100%;
height: 72px;
padding-right: max(20px, calc((100vw - 1400px) / 2));
padding-left: max(20px, calc((100vw - 1400px) / 2));
}
.cnx-v3 .cnx-header .brand-logo { width: 112px; }
.cnx-v3 main { overflow: hidden; }
.cnx3-popup {
position: absolute;
z-index: 35;
top: 94px;
right: max(16px, calc((100vw - 1480px) / 2));
width: 258px;
padding: 30px 20px 23px;
border: 1px solid #f0e6df;
border-radius: 20px;
background: rgb(255 255 255 / 96%);
box-shadow: 0 24px 60px rgb(35 28 24 / 14%);
backdrop-filter: blur(14px);
}
.cnx3-popup-close {
position: absolute;
top: 9px;
right: 10px;
display: grid;
width: 24px;
height: 24px;
place-items: center;
border: 0;
background: transparent;
color: #84776f;
cursor: pointer;
}
.cnx3-popup > small { color: #68707a; font-size: 10px; font-weight: 800; }
.cnx3-popup h2 { margin: 12px 0 9px; font-size: 19px; line-height: 1.55; }
.cnx3-popup > p { margin: 0 0 18px; color: #66707d; font-size: 10px; line-height: 1.8; }
.cnx3-popup > a {
display: flex;
min-height: 56px;
margin-top: 9px;
padding: 0 15px;
align-items: center;
justify-content: space-between;
border: 1px solid var(--orange);
border-radius: 10px;
color: var(--orange);
font-size: 11px;
font-weight: 850;
}
.cnx3-popup > a.is-primary { background: var(--orange-gloss); color: #fff; }
.cnx3-popup > a small { display: block; font-size: 8px; }
.cnx3-popup > div { display: grid; margin-top: 18px; padding-top: 15px; gap: 10px; border-top: 1px solid #eee4de; }
.cnx3-popup > div span { position: relative; padding-left: 18px; color: #59626d; font-size: 9px; line-height: 1.5; }
.cnx3-popup > div span::before { position: absolute; left: 0; color: var(--orange); content: "○"; }
.cnx3-popup-reopen {
position: fixed;
z-index: 50;
right: 14px;
bottom: 14px;
min-height: 48px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--orange-gloss);
box-shadow: 0 14px 35px rgb(170 48 15 / 26%);
color: #fff;
font-size: 11px;
font-weight: 900;
}
.cnx3-section {
position: relative;
width: min(calc(100% - 80px), 1100px);
margin: 0 auto;
padding: 118px 0;
}
.cnx3-heading { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.cnx3-heading > small { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.cnx3-heading h2 { position: relative; margin: 13px 0 0; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.045em; line-height: 1.3; }
.cnx3-heading h2::after { display: block; width: 24px; margin: 16px auto 0; border-top: 3px solid var(--orange); content: ""; }
.cnx3-heading p { max-width: 660px; margin: 22px auto 0; color: #606875; font-size: 13px; line-height: 2; }
.cnx3-about::before {
position: absolute;
z-index: -1;
top: 48px;
right: -180px;
left: -180px;
height: 480px;
border-radius: 50% 50% 0 0 / 18% 18% 0 0;
background: linear-gradient(180deg, #fffaf6, #fff);
content: "";
}
.cnx3-about > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cnx3-about article { min-height: 285px; padding: 39px 30px; border: 1px solid #eee3dc; border-radius: 15px; background: #fff; text-align: center; box-shadow: 0 18px 45px rgb(65 42 29 / 5%); }
.cnx3-about article i { display: grid; width: 70px; height: 70px; margin: 0 auto 28px; place-items: center; border-radius: 50%; background: #fff2ea; color: var(--orange); font-size: 30px; font-style: normal; }
.cnx3-about article h3 { margin: 0 0 18px; font-size: 16px; line-height: 1.6; }
.cnx3-about article p { margin: 0; color: #5f6874; font-size: 12px; line-height: 2; }
.cnx3-features { width: min(calc(100% - 60px), 1180px); }
.cnx3-features > div { display: grid; gap: 22px; }
.cnx3-features article { display: grid; min-height: 260px; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid #efe4dd; border-radius: 18px; background: #fff; }
.cnx3-features article.is-reverse { grid-template-columns: .95fr 1.05fr; }
.cnx3-features article.is-reverse .cnx3-feature-copy { order: 2; }
.cnx3-features article.is-reverse figure { order: 1; border-radius: 0 92px 92px 0; }
.cnx3-feature-copy { display: grid; padding: 44px 46px; grid-template-columns: 90px 1fr; gap: 28px; align-items: center; }
.cnx3-feature-copy > span { color: var(--orange); font-family: Georgia, serif; font-size: 56px; font-style: italic; line-height: .9; }
.cnx3-feature-copy > span small { display: block; margin-top: 11px; font-family: inherit; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .16em; }
.cnx3-feature-copy h3 { margin: 0 0 17px; font-size: 21px; line-height: 1.55; }
.cnx3-feature-copy p { margin: 0; color: #5d6672; font-size: 12px; line-height: 2; }
.cnx3-features figure { height: 100%; min-height: 260px; margin: 0; overflow: hidden; border-radius: 92px 0 0 92px; }
.cnx3-features figure img { width: 100%; height: 100%; object-fit: cover; }
.cnx3-flow { max-width: 880px; }
.cnx3-flow > div { position: relative; display: grid; gap: 0; }
.cnx3-flow > div::before { position: absolute; top: 25px; bottom: 25px; left: 54px; border-left: 2px dotted #ffac91; content: ""; }
.cnx3-flow article { position: relative; display: grid; min-height: 150px; padding: 18px 0; grid-template-columns: 32px 76px 1fr; gap: 18px; align-items: start; }
.cnx3-flow article > span { z-index: 2; display: grid; width: 28px; height: 28px; margin-top: 22px; place-items: center; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 900; }
.cnx3-flow article > i { z-index: 1; display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid #ff9d7d; border-radius: 50%; background: #fff; color: var(--orange); font-size: 27px; font-style: normal; }
.cnx3-flow article > div { padding-top: 6px; }
.cnx3-flow h3 { margin: 0 0 11px; font-size: 17px; }
.cnx3-flow p { max-width: 630px; margin: 0; color: #606976; font-size: 12px; line-height: 1.9; }
.cnx3-jobs { background: linear-gradient(135deg, #fff6ef, #fffcf9); }
.cnx3-jobs .cnx3-section { padding-top: 105px; }
.cnx3-jobs .cnx3-heading { margin-right: 0; margin-left: 0; text-align: left; }
.cnx3-jobs .cnx3-heading h2::after { margin-left: 0; }
.cnx-v3 .cnx-job-explorer { margin-top: 48px; }
.cnx-v3 .cnx-job-filters { display: grid; max-width: 850px; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cnx-v3 .cnx-job-filters label { position: relative; }
.cnx-v3 .cnx-job-filters label > span { position: absolute; z-index: 1; top: 50%; left: 17px; font-size: 11px; font-weight: 800; transform: translateY(-50%); }
.cnx-v3 .cnx-job-filters select { width: 100%; height: 50px; padding: 0 34px 0 87px; border: 1px solid #e7d8cf; border-radius: 999px; background: #fff; color: #303845; font-size: 11px; }
.cnx-v3 .cnx-job-carousel-head { display: flex; margin-top: 24px; align-items: center; justify-content: space-between; }
.cnx-v3 .cnx-job-count { color: #6c737d; font-size: 11px; }
.cnx-v3 .cnx-job-count strong { color: var(--orange); }
.cnx-v3 .cnx-job-carousel-controls { display: flex; align-items: center; gap: 8px; }
.cnx-v3 .cnx-job-carousel-controls button { display: grid; min-width: 38px; height: 38px; padding: 0 10px; place-items: center; border: 1px solid #f1c1b0; border-radius: 50%; background: #fff; color: var(--orange); font-size: 10px; font-weight: 800; }
.cnx-v3 .cnx-job-carousel-controls span { min-width: 45px; color: #777; font-size: 10px; text-align: center; }
.cnx-v3 .cnx-job-grid { display: flex; margin-top: 18px; padding: 5px 0 18px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cnx-v3 .cnx-job-grid::-webkit-scrollbar { display: none; }
.cnx-v3 .cnx-job-grid article { position: relative; width: 335px; min-height: 290px; flex: 0 0 335px; padding: 26px 23px 0; overflow: hidden; border: 1px solid #efd9ce; border-radius: 15px 52px 15px 15px; background: #fff; scroll-snap-align: start; }
.cnx-v3 .cnx-job-grid article::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: var(--orange-gloss); content: ""; }
.cnx-v3 .cnx-job-grid article h3 { margin: 8px 0 21px; font-size: 18px; }
.cnx-v3 .cnx-job-grid dl { display: grid; margin: 0; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.cnx-v3 .cnx-job-grid dl div { display: flex; align-items: center; gap: 6px; }
.cnx-v3 .cnx-job-grid dt { color: var(--orange); font-size: 9px; }
.cnx-v3 .cnx-job-grid dd { margin: 0; color: #525b66; font-size: 11px; }
.cnx-v3 .cnx-job-grid article > a { display: flex; height: 48px; margin: 22px -23px 0; padding: 0 22px; align-items: center; justify-content: space-between; border-top: 1px solid #eee0d8; color: var(--orange); font-size: 11px; font-weight: 850; }
.cnx-v3 .cnx-job-tag { display: inline-block; padding: 5px 8px; border-radius: 4px; background: #b6dfc3; color: #fff; font-size: 9px; }
.cnx-v3 .cnx-job-disclaimer { display: block; margin-top: 10px; color: #777d84; font-size: 9px; }
.cnx3-row-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; }
.cnx3-row-heading .cnx3-heading { margin: 0; text-align: left; }
.cnx3-row-heading .cnx3-heading h2::after { margin-left: 0; }
.cnx3-row-heading > a { margin-bottom: 7px; padding: 13px 18px; border: 1px solid var(--orange); border-radius: 999px; color: var(--orange); font-size: 11px; font-weight: 850; }
.cnx3-stories > div:last-child { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cnx3-stories article { padding: 18px 18px 24px; border: 1px solid #eee4dd; border-radius: 16px; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.cnx3-stories article:hover { transform: translateY(-6px); box-shadow: 0 20px 42px rgb(65 42 29 / 9%); }
.cnx3-stories figure { height: 190px; margin: 0 0 19px; overflow: hidden; border-radius: 11px; }
.cnx3-stories figure img { width: 100%; height: 100%; object-fit: cover; }
.cnx3-stories small { color: var(--orange); font-size: 9px; font-weight: 900; }
.cnx3-stories h3 { margin: 10px 0 13px; font-size: 17px; line-height: 1.55; }
.cnx3-stories p { min-height: 68px; margin: 0; color: #646c77; font-size: 11px; line-height: 1.85; }
.cnx3-stories article > a { display: flex; margin-top: 18px; justify-content: flex-end; gap: 12px; color: var(--orange); font-size: 10px; font-weight: 850; }
.cnx3-roles {
position: relative;
isolation: isolate;
width: min(calc(100% - 60px), 1180px);
margin-top: 70px;
padding: 105px 56px 142px;
overflow: hidden;
border-radius: 32px;
background:
radial-gradient(circle at 92% 12%, rgb(255 91 49 / 13%) 0 80px, transparent 81px),
linear-gradient(135deg, #fff1e7 0%, #fffaf6 48%, #fff 100%);
}
.cnx3-roles::before {
position: absolute;
z-index: -1;
right: -120px;
bottom: -240px;
width: 530px;
height: 530px;
border: 1px solid rgb(255 91 49 / 22%);
border-radius: 50%;
box-shadow: 0 0 0 45px rgb(255 91 49 / 4%), 0 0 0 90px rgb(255 91 49 / 3%);
content: "";
}
.cnx3-roles .cnx3-heading { max-width: 720px; margin-right: 0; margin-left: 0; text-align: left; }
.cnx3-roles .cnx3-heading h2::after { margin-left: 0; }
.cnx3-role-map { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cnx3-role-map::before {
position: absolute;
top: 49px;
right: 8%;
left: 8%;
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, #ffcab7, var(--orange), #ffb28f);
content: "";
}
.cnx3-role-map article {
position: relative;
min-height: 315px;
padding: 31px 27px 29px;
border: 1px solid rgb(255 91 49 / 14%);
border-radius: 18px 18px 58px;
background: rgb(255 255 255 / 88%);
box-shadow: 0 24px 60px rgb(95 49 30 / 7%);
}
.cnx3-role-map article:nth-child(2) { transform: translateY(28px); }
.cnx3-role-map article:nth-child(3) { transform: translateY(56px); }
.cnx3-role-index { display: flex; height: 58px; align-items: baseline; gap: 11px; }
.cnx3-role-index strong { color: var(--orange); font-family: Georgia, serif; font-size: 43px; font-style: italic; font-weight: 400; line-height: 1; }
.cnx3-role-index small { color: #a66e5c; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.cnx3-role-map h3 { margin: 18px 0 12px; font-size: 19px; line-height: 1.55; }
.cnx3-role-map p { min-height: 52px; margin: 0; color: #676d76; font-size: 11px; line-height: 1.85; }
.cnx3-role-map ul { display: grid; margin: 22px 0 0; padding: 18px 0 0; gap: 10px; border-top: 1px solid #f0ded4; list-style: none; }
.cnx3-role-map li { position: relative; padding-left: 20px; color: #303743; font-size: 12px; font-weight: 800; line-height: 1.55; }
.cnx3-role-map li::before { position: absolute; top: .52em; left: 0; width: 8px; height: 8px; border: 2px solid var(--orange); border-radius: 50%; content: ""; }
.cnx3-insights > div:last-child { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cnx3-insights article { min-width: 0; }
.cnx3-insights figure { height: 165px; margin: 0 0 15px; overflow: hidden; border-radius: 12px; }
.cnx3-insights figure img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.cnx3-insights article:hover img { scale: 1.04; }
.cnx3-insights time { color: #94989e; font-size: 9px; }
.cnx3-insights h3 { margin: 8px 0 0; font-size: 13px; line-height: 1.65; }
.cnx3-trust { padding: 62px 40px; background: linear-gradient(100deg, #fff0e5, #fff8f2); }
.cnx3-trust > div { display: grid; width: min(100%, 1100px); margin: 0 auto; padding: 25px 32px; grid-template-columns: repeat(4, 1fr); border-radius: 17px; background: #fff; }
.cnx3-trust article { padding: 10px 24px; border-right: 1px solid #eadfd8; }
.cnx3-trust article:last-child { border: 0; }
.cnx3-trust span { display: block; color: #6e747c; font-size: 9px; }
.cnx3-trust strong { display: block; margin-top: 9px; color: var(--orange); font-size: 20px; line-height: 1.35; }
.cnx3-faq { max-width: 900px; }
.cnx3-faq > div { border-top: 1px solid #e7ddd6; }
.cnx3-faq details { border-bottom: 1px solid #e7ddd6; }
.cnx3-faq summary { display: grid; min-height: 76px; padding: 20px 5px; grid-template-columns: 1fr 30px; align-items: center; cursor: pointer; font-size: 14px; font-weight: 800; list-style: none; }
.cnx3-faq summary::-webkit-details-marker { display: none; }
.cnx3-faq summary b { color: var(--orange); font-size: 20px; font-weight: 400; }
.cnx3-faq details > p { margin: 0; padding: 0 45px 27px 5px; color: #626a75; font-size: 12px; line-height: 1.9; }
.cnx3-final {
position: relative;
isolation: isolate;
width: min(calc(100% - 60px), 1180px);
min-height: 550px;
margin: 25px auto 0;
overflow: hidden;
border-radius: 28px 28px 0 0;
}
.cnx3-final::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(12 25 45 / 94%), rgb(12 25 45 / 72%) 47%, rgb(12 25 45 / 12%)); content: ""; }
.cnx3-final figure { position: absolute; z-index: -2; inset: 0; margin: 0; }
.cnx3-final figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cnx3-final > div { max-width: 700px; padding: 95px 70px; color: #fff; }
.cnx3-final > div > small { color: #ffb69f; font-size: 11px; font-weight: 850; }
.cnx3-final h2 { margin: 14px 0 20px; font-size: clamp(40px, 4.5vw, 61px); line-height: 1.35; letter-spacing: -.04em; }
.cnx3-final p { max-width: 560px; margin: 0; color: rgb(255 255 255 / 77%); font-size: 13px; line-height: 2; }
.cnx3-final > div > div { display: flex; margin-top: 30px; gap: 12px; }
.cnx3-final > div > div > * { display: flex; min-height: 54px; padding: 0 21px; align-items: center; border: 1px solid #fff; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 850; }
.cnx3-final > div > div > span { border-color: transparent; background: var(--orange-gloss); }
.cnx3-booking { width: min(calc(100% - 60px), 1180px); margin: 0 auto; padding: 78px 70px 90px; background: #0c192d; scroll-margin-top: 86px; }
.cnx3-booking .cnx3-heading { margin-bottom: 34px; }
.cnx3-booking .cnx3-heading > small { color: #ffb69f; }
.cnx3-booking .cnx3-heading h2 { color: #fff; }
.cnx3-booking .cnx3-heading p { color: rgb(255 255 255 / 72%); }
.cnx3-timerex { padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 30px 70px rgb(4 15 28 / 38%); }
.cnx3-timerex.is-embedded { min-height: 680px; }
.cnx3-timerex-stage { display: none; width: 100%; }
.cnx3-timerex.is-embedded .cnx3-timerex-stage { display: block; }
.cnx3-timerex #timerex_calendar { width: 100%; min-height: 630px; }
.cnx3-timerex iframe { width: 100% !important; min-height: 630px !important; border: 0 !important; }
.cnx3-timerex-fallback { display: grid; min-height: 260px; margin: 0; place-content: center; color: #536a7c; font-size: 12px; text-align: center; }
.cnx3-timerex-fallback a { display: inline-flex; min-height: 48px; margin-top: 16px; padding: 0 22px; align-items: center; justify-content: center; border-radius: 999px; background: var(--orange-gloss); color: #fff; font-weight: 850; }
.cnx3-timerex.is-embedded .cnx3-timerex-fallback { display: none; }
.cnx-v3 .shared-footer { margin-top: 0; }
@media (max-width: 1180px) {
.cnx3-popup {
position: fixed;
top: auto;
right: 12px;
bottom: 12px;
left: 12px;
display: grid;
width: auto;
min-height: 76px;
padding: 10px 48px 10px 12px;
grid-template-columns: 1fr auto auto;
gap: 8px;
align-items: center;
border-radius: 20px;
}
.cnx3-popup > small, .cnx3-popup > p, .cnx3-popup > div { display: none; }
.cnx3-popup h2 { margin: 0; font-size: 14px; }
.cnx3-popup h2 br { display: none; }
.cnx3-popup > a { min-height: 48px; margin: 0; padding: 0 13px; }
.cnx3-popup-close { top: 50%; right: 12px; transform: translateY(-50%); }
}
@media (max-width: 820px) {
.cnx-v3 .cnx-header { padding: 10px 18px; }
.cnx-v3 .cnx-header .brand-logo { width: 98px; }
.cnx3-popup { grid-template-columns: 1fr auto; }
.cnx3-popup h2 { display: none; }
.cnx3-popup > a:nth-of-type(2) { display: none; }
.cnx3-section { width: calc(100% - 40px); padding: 82px 0; }
.cnx3-heading { margin-bottom: 38px; text-align: left; }
.cnx3-heading h2 { font-size: 32px; }
.cnx3-heading h2::after { margin-left: 0; }
.cnx3-heading p { margin-left: 0; font-size: 12px; }
.cnx3-about::before { right: -20px; left: -20px; }
.cnx3-about > div { grid-template-columns: 1fr; gap: 12px; }
.cnx3-about article { min-height: 0; padding: 27px 22px; text-align: left; }
.cnx3-about article i { float: left; width: 52px; height: 52px; margin: 0 18px 22px 0; font-size: 23px; }
.cnx3-about article h3 { padding-top: 5px; }
.cnx3-about article p { clear: both; }
.cnx3-features { width: calc(100% - 24px); }
.cnx3-features article,
.cnx3-features article.is-reverse { display: flex; flex-direction: column; }
.cnx3-features article.is-reverse .cnx3-feature-copy { order: 2; }
.cnx3-features article figure,
.cnx3-features article.is-reverse figure { order: 1; width: 100%; height: 235px; min-height: 235px; border-radius: 0 0 58px 0; }
.cnx3-feature-copy { order: 2; padding: 30px 22px 35px; grid-template-columns: 66px 1fr; gap: 16px; }
.cnx3-feature-copy > span { font-size: 44px; }
.cnx3-feature-copy h3 { font-size: 18px; }
.cnx3-flow article { min-height: 165px; grid-template-columns: 26px 60px 1fr; gap: 12px; }
.cnx3-flow > div::before { left: 42px; }
.cnx3-flow article > span { width: 24px; height: 24px; }
.cnx3-flow article > i { width: 54px; height: 54px; font-size: 23px; }
.cnx3-flow h3 { font-size: 15px; }
.cnx3-flow p { font-size: 11px; }
.cnx3-jobs .cnx3-section { width: calc(100% - 20px); padding: 76px 0 84px 10px; }
.cnx-v3 .cnx-job-filters { padding-right: 10px; grid-template-columns: 1fr; }
.cnx-v3 .cnx-job-grid article { width: 82vw; flex-basis: 82vw; }
.cnx-v3 .cnx-job-carousel-head { padding-right: 10px; }
.cnx3-row-heading { display: block; }
.cnx3-row-heading > a { display: inline-flex; margin-top: -14px; }
.cnx3-stories > div:last-child { display: flex; margin-right: -20px; padding-right: 20px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.cnx3-stories article { width: 78vw; flex: 0 0 78vw; scroll-snap-align: start; }
.cnx3-stories p { min-height: 0; }
.cnx3-roles { width: calc(100% - 20px); margin-top: 36px; padding: 78px 20px 82px; border-radius: 25px; }
.cnx3-role-map { padding-left: 18px; grid-template-columns: 1fr; gap: 14px; }
.cnx3-role-map::before { top: 30px; right: auto; bottom: 30px; left: 0; width: 3px; height: auto; background: linear-gradient(180deg, #ffcab7, var(--orange), #ffb28f); }
.cnx3-role-map article,
.cnx3-role-map article:nth-child(2),
.cnx3-role-map article:nth-child(3) { min-height: 0; padding: 25px 21px 26px; border-radius: 16px 16px 42px; transform: none; }
.cnx3-role-index { height: 48px; }
.cnx3-role-index strong { font-size: 37px; }
.cnx3-role-map h3 { margin-top: 13px; font-size: 18px; }
.cnx3-role-map p { min-height: 0; font-size: 11px; }
.cnx3-insights > div:last-child { display: flex; margin-right: -20px; padding-right: 20px; gap: 12px; overflow-x: auto; }
.cnx3-insights article { width: 68vw; flex: 0 0 68vw; }
.cnx3-trust { padding: 45px 20px; }
.cnx3-trust > div { grid-template-columns: 1fr 1fr; padding: 10px; }
.cnx3-trust article { padding: 18px 12px; border-right: 0; border-bottom: 1px solid #eadfd8; }
.cnx3-trust strong { font-size: 16px; }
.cnx3-faq summary { font-size: 13px; line-height: 1.6; }
.cnx3-final { width: calc(100% - 20px); min-height: 680px; border-radius: 25px 25px 0 0; }
.cnx3-final::after { background: linear-gradient(180deg, rgb(12 25 45 / 12%), rgb(12 25 45 / 70%) 48%, rgb(12 25 45 / 96%)); }
.cnx3-final figure img { object-position: 62% center; }
.cnx3-final > div { position: absolute; right: 0; bottom: 0; left: 0; padding: 55px 22px 34px; }
.cnx3-final h2 { font-size: 36px; }
.cnx3-final > div > div { display: grid; grid-template-columns: 1fr; }
.cnx3-final > div > div > * { justify-content: center; }
.cnx3-booking { width: calc(100% - 20px); padding: 54px 14px 64px; scroll-margin-top: 78px; }
.cnx3-booking .cnx3-heading { margin-bottom: 24px; }
.cnx3-timerex { padding: 9px; }
.cnx3-timerex.is-embedded { min-height: 610px; }
.cnx3-timerex #timerex_calendar, .cnx3-timerex iframe { min-height: 590px !important; }
}
.proof-grid { display: grid; max-width: 1220px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proof-grid article {
position: relative;
display: flex;
min-height: 118px;
align-items: flex-start;
gap: 15px;
border: 1px solid rgb(255 255 255 / 38%);
border-radius: 7px;
padding: 22px 24px;
background: rgb(255 255 255 / 92%);
box-shadow: 0 14px 32px rgb(96 28 0 / 14%);
overflow: hidden;
}
.proof-grid article::before {
position: absolute;
top: 0;
right: 0;
width: 34px;
height: 34px;
border-radius: 0 0 0 34px;
background: var(--orange-soft);
content: "";
}
.proof-mark { position: relative; z-index: 1; color: var(--orange); font-size: 27px; line-height: 1.05; }
.proof-grid h3 { position: relative; z-index: 1; margin: 0 0 7px; font-size: 14px; line-height: 1.55; }
.proof-grid p { margin: 0; color: #6b7078; font-size: 11px; line-height: 1.75; }
@media (max-width: 900px) {
.proof-grid { grid-template-columns: 1fr; gap: 10px; }
.proof-grid article { min-height: 0; padding: 18px 20px; }
}
@media (max-width: 760px) {
.proof-grid h3 { font-size: 15px; }
.proof-grid p { font-size: 12px; }
}
.proof-footnote { max-width: 1220px; margin: 13px auto 0; color: rgb(255 255 255 / 82%); font-size: 10px; line-height: 1.7; }
@media (max-width: 900px) {
.proof-footnote { margin-top: 11px; text-align: center; }
}
.founders { width: min(calc(100% - 72px), 1180px); margin: 0 auto; padding: 104px 0 0; }
.founders-heading { margin: 0 0 46px; text-align: center; }
.founders-heading small { display: block; color: var(--orange-deep); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.founders-heading h2 { margin: 14px 0 0; font-size: 34px; letter-spacing: .01em; }
.founders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
.founders-grid article {
display: flex; flex-direction: column; align-items: center;
border: 1px solid var(--line); border-radius: 22px; padding: 44px 38px 46px;
background: var(--card); box-shadow: var(--shadow); text-align: center;
}
.founders-grid figure { width: 220px; height: 220px; margin: 0 0 24px; border-radius: 50%; overflow: hidden; }
.founders-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.founders-grid small { color: var(--orange-deep); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.founders-grid h3 { margin: 13px 0 20px; font-size: 21px; line-height: 1.65; letter-spacing: .01em; }
.founders-grid p { margin: 0 0 15px; color: var(--muted); font-size: 13px; line-height: 2.05; text-align: left; }
.founders-grid p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.founders-grid { grid-template-columns: 1fr; gap: 20px; }
.founders-grid article { padding: 38px 30px 40px; }
}
@media (max-width: 760px) {
.founders { width: calc(100% - 42px); padding-top: 72px; }
.founders-heading { margin-bottom: 32px; }
.founders-heading h2 { font-size: 26px; }
.founders-grid figure { width: 170px; height: 170px; margin-bottom: 20px; }
.founders-grid h3 { font-size: 19px; }
.founders-grid p { font-size: 13px; }
}
.course-shelf-heading p { font-size: 15px; line-height: 1.95; }
.stats-band {
background: #f4603a;
overflow: hidden;
}
.stats-band::after {
position: absolute;
z-index: 0;
top: -20%;
bottom: -20%;
left: -32%;
width: 20%;
background: linear-gradient(
100deg,
transparent,
rgb(255 255 255 / 26%) 42%,
rgb(255 255 255 / 52%) 50%,
rgb(255 255 255 / 26%) 58%,
transparent
);
content: "";
pointer-events: none;
transform: skewX(-15deg);
animation: stats-band-shine 7.5s ease-in-out infinite;
}
@keyframes stats-band-shine {
0%, 10% { left: -32%; }
48%, 100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
.stats-band::after { animation: none; opacity: 0; }
}
.proof-grid article { gap: 18px; padding: 24px 26px; }
.proof-mark {
position: relative;
display: grid;
width: 44px;
height: 44px;
flex: 0 0 44px;
place-items: center;
border-radius: 50%;
background: linear-gradient(140deg, #ffb08c, #ff6a3c 60%, #ec4c23);
box-shadow:
0 7px 15px rgb(180 55 18 / 26%),
inset 0 1px 0 rgb(255 255 255 / 55%);
color: #fff;
font-size: 21px;
line-height: 1;
}
.proof-mark::after {
position: absolute;
inset: -5px;
border: 1px solid rgb(244 96 58 / 42%);
border-radius: 50%;
content: "";
}
.proof-grid h3 { font-size: 16.5px; line-height: 1.6; }
.proof-grid p { font-size: 12.5px; line-height: 1.85; }
.story-card { width: 428px; height: 158px; grid-template-columns: 136px 1fr; }
.story-card strong { font-size: 15px; line-height: 1.7; }
.story-card small { margin-top: 9px; font-size: 11px; }
.reasons .reason-title h3 { font-size: 16.5px; line-height: 1.55; }
.reasons .reason-grid article > p { font-size: 12.5px; line-height: 1.9; }
.founders-grid small { font-size: 14px; letter-spacing: .04em; }
@media (max-width: 900px) {
.story-card { width: 340px; height: 138px; grid-template-columns: 116px 1fr; }
.story-card strong { font-size: 13px; }
.proof-grid h3 { font-size: 15.5px; }
.course-shelf-heading p { font-size: 13.5px; }
}
.story-feature {
width: min(calc(100% - 64px), 1010px);
min-height: 440px;
border-radius: 58px 18px 58px 18px;
}
.story-feature figure { min-height: 440px; }
.story-feature h3 { font-size: clamp(24px, 2.4vw, 32px); }
.story-feature p { font-size: 12.5px; line-height: 1.95; }
.story-card { width: 486px; height: 182px; grid-template-columns: 156px 1fr; }
.story-card strong { font-size: 16px; line-height: 1.7; }
.story-card small { margin-top: 11px; font-size: 11.5px; }
@media (max-width: 900px) {
.story-feature { min-height: 0; }
.story-feature figure { min-height: 320px; }
.story-card { width: 340px; height: 138px; grid-template-columns: 116px 1fr; }
.story-card strong { font-size: 13px; }
.story-card small { font-size: 10.5px; }
}
.service-gateway-copy h3 { white-space: nowrap; }
@media (max-width: 900px) {
.service-gateway-copy h3 { white-space: normal; }
}
.story-card { height: 212px; }
.story-card small { margin-top: 13px; }
@media (max-width: 900px) {
.story-card { height: 150px; }
}
.offers {
position: relative;
padding: 96px 0 104px;
background: linear-gradient(180deg, #fff 0%, #fff8f3 58%, #fff 100%);
}
.offers-heading {
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin: 0 auto 34px;
}
.offers-heading h2 {
margin: 10px 0 12px;
font-size: clamp(32px, 3.25vw, 46px);
letter-spacing: .035em;
line-height: 1.4;
}
.offers-heading p { margin: 0; color: #66707b; font-size: 14px; font-weight: 650; }
.offers-entry {
display: grid;
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin: 0 auto 30px;
padding: 34px 40px;
grid-template-columns: 1fr auto;
align-items: center;
gap: 40px;
border: 1px solid rgb(255 122 74 / 26%);
border-radius: 22px;
background: linear-gradient(120deg, #fff5ef 0%, #fff 62%);
box-shadow: 0 16px 42px rgb(150 60 26 / 9%);
}
.offers-entry strong {
display: block;
margin-bottom: 10px;
font-size: 21px;
letter-spacing: .02em;
}
.offers-entry p { margin: 0; max-width: 640px; color: #5b636e; font-size: 13.5px; line-height: 1.95; }
.offers-entry-action { display: grid; justify-items: center; gap: 10px; }
.offers-entry-action .button { min-width: 268px; }
.offers-entry-action small { color: #8a8177; font-size: 11px; }
.offers-split {
display: grid;
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin: 0 auto;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.offers-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 26px 10px 26px 10px;
background: #fff;
box-shadow: 0 18px 46px rgb(24 30 38 / 7%);
}
.offers-card figure { position: relative; height: 196px; margin: 0; overflow: hidden; }
.offers-card figure img { width: 100%; height: 100%; object-fit: cover; }
.offers-card figure::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 46%, rgb(255 255 255 / 88%) 100%);
content: "";
}
.offers-card-body { display: flex; flex: 1; flex-direction: column; padding: 26px 32px 30px; }
.offers-card-en { color: var(--orange); font-family: Georgia, serif; font-size: 12px; letter-spacing: .2em; }
.offers-card h3 { margin: 8px 0 4px; font-size: 27px; letter-spacing: .04em; }
.offers-card-body > strong { color: var(--ink); font-size: 14px; }
.offers-card-body > p { margin: 12px 0 0; color: #5b636e; font-size: 13px; line-height: 1.95; }
.offers-plans { display: grid; margin: 20px 0 0; padding: 0; gap: 9px; list-style: none; }
.offers-plans li {
display: grid;
padding: 14px 17px;
grid-template-columns: auto 1fr;
gap: 3px 12px;
border: 1px solid #f0ece8;
border-radius: 12px;
background: #fffaf6;
}
.offers-plans b { font-size: 14px; }
.offers-plans i { color: var(--orange-deep); font-size: 13px; font-style: normal; font-weight: 850; text-align: right; }
.offers-plans span { color: #6a717b; font-size: 11.5px; line-height: 1.75; grid-column: 1 / 3; }
.offers-points { display: grid; margin: 20px 0 0; padding: 0; gap: 10px; list-style: none; }
.offers-points li { color: #454d58; font-size: 13px; font-weight: 700; }
.offers-points li::before { margin-right: 9px; color: var(--orange); content: "✓"; font-weight: 900; }
.offers-card-link {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: auto;
padding-top: 24px;
color: var(--ink);
font-size: 12.5px;
font-weight: 850;
}
.offers-card-link b { color: var(--orange); font-size: 16px; }
.offers-bridge {
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin: 26px auto 0;
color: #6f7680;
font-size: 12.5px;
line-height: 1.95;
text-align: center;
}
@media (max-width: 900px) {
.offers { padding: 68px 0 76px; }
.offers-entry { grid-template-columns: 1fr; padding: 28px 26px; gap: 22px; }
.offers-entry-action { justify-items: stretch; }
.offers-entry-action .button { min-width: 0; }
.offers-split { grid-template-columns: 1fr; }
.offers-card figure { height: 168px; }
.offers-card-body { padding: 24px 24px 28px; }
.offers-card h3 { font-size: 24px; }
}
.course-upcoming {
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin: 46px auto 0;
padding-top: 30px;
border-top: 1px solid var(--line);
}
.course-upcoming h3 {
margin: 0 0 16px;
color: var(--orange-deep);
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
}
.course-upcoming ul {
display: flex;
margin: 0;
padding: 0;
flex-wrap: wrap;
gap: 9px;
list-style: none;
}
.course-upcoming li {
padding: 8px 15px;
border: 1px solid #ece7e2;
border-radius: 999px;
background: #fdfaf7;
color: #5c636d;
font-size: 12.5px;
font-weight: 700;
}
.course-upcoming p { margin: 16px 0 0; color: #8a8177; font-size: 11.5px; }
@media (max-width: 760px) {
.course-upcoming { margin-top: 34px; }
.course-upcoming li { font-size: 11.5px; padding: 7px 12px; }
}
.stats-band { padding-top: 44px; padding-bottom: 46px; }
.proof-grid { gap: 26px; }
.proof-grid article {
display: flex;
min-height: 0;
flex-direction: column;
align-items: center;
gap: 18px;
border: 0;
border-radius: 0;
padding: 0;
background: none;
box-shadow: none;
text-align: center;
}
.proof-grid article::before { display: none; }
.proof-emblem {
display: grid;
width: 176px;
height: 176px;
place-items: center;
flex: 0 0 auto;
}
.proof-emblem img { width: 100%; height: 100%; object-fit: contain; }
.proof-emblem-text {
display: grid;
width: 100%;
height: 100%;
padding: 0 26px;
place-items: center;
border: 2px solid rgb(255 255 255 / 62%);
border-radius: 50%;
background: rgb(255 255 255 / 14%);
color: #fff;
font-size: 15px;
font-weight: 850;
line-height: 1.6;
text-wrap: balance;
}
.proof-grid p {
max-width: 340px;
color: rgb(255 255 255 / 90%);
font-size: 12.5px;
line-height: 1.9;
}
@media (max-width: 900px) {
.proof-grid { gap: 30px; }
.proof-emblem { width: 150px; height: 150px; }
.proof-emblem-text { font-size: 13px; padding: 0 20px; }
.proof-grid p { max-width: none; font-size: 12px; }
}
.stats-band { background: #021C44; }
.stats-band::after {
background: linear-gradient(
100deg,
transparent,
rgb(255 232 190 / 12%) 42%,
rgb(255 240 210 / 26%) 50%,
rgb(255 232 190 / 12%) 58%,
transparent
);
}
.proof-emblem { width: 196px; height: 190px; }
.proof-grid p { color: rgb(255 255 255 / 82%); }
@media (max-width: 900px) {
.proof-emblem { width: 168px; height: 163px; }
}
.stats-band { padding-top: 30px; padding-bottom: 32px; }
.proof-grid { gap: 22px; }
.proof-grid article { gap: 13px; }
.proof-emblem { width: 152px; height: 147px; }
.proof-grid p { font-size: 12px; line-height: 1.85; }
@media (max-width: 900px) {
.stats-band { padding-top: 34px; padding-bottom: 36px; }
.proof-emblem { width: 132px; height: 128px; }
}
.voice-disclaimer {
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin: 26px auto 0;
font-size: 12px;
line-height: 1.8;
color: rgb(51 63 71 / 55%);
letter-spacing: .02em;
}
@media (max-width: 900px) {
.voice-disclaimer { width: calc(100% - 40px); margin-top: 20px; font-size: 11.5px; }
}
.ccx-hero-question { margin: 0 0 22px !important; }
.ccx-hero-question img { display: block; width: min(100%, 248px); height: auto; }
@media (max-width: 760px) {
.ccx-hero-question { margin: 0 0 16px !important; }
.ccx-hero-question img { width: min(100%, 200px); }
}
.shared-footer-inner,            
.biz-section,                    
.contact-intro,
.contact-form-section,           
.report-archive,                 
.report-page-cta,
.ccx-section,                    
.cnx3-section {                  
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin-right: auto;
margin-left: auto;
}
.ccx-price {
padding-right: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
padding-left: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
}
.legal-layout {
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
grid-template-columns: 250px minmax(0, 765px);
justify-content: start;
}
.faq-page-groups {
width: min(calc(100% - var(--page-gutter) * 2), 1040px);
}
@media (max-width: 900px) {
:root { --page-gutter: 24px; }
.legal-layout { grid-template-columns: 1fr; }
}
.ccx-zemi-viewport {
position: relative;
margin: 40px calc(50% - 50vw) 0;
overflow-x: auto;
padding: 4px max(var(--page-gutter), calc((100vw - var(--page-max)) / 2)) 26px;
scroll-padding-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(
to right,
#000 0 calc(100% - clamp(96px, 26vw, 400px)),
rgb(0 0 0 / 62%) calc(100% - clamp(52px, 14vw, 225px)),
rgb(0 0 0 / 18%) calc(100% - clamp(18px, 5vw, 85px)),
transparent 100%
);
mask-image: linear-gradient(
to right,
#000 0 calc(100% - clamp(96px, 26vw, 400px)),
rgb(0 0 0 / 62%) calc(100% - clamp(52px, 14vw, 225px)),
rgb(0 0 0 / 18%) calc(100% - clamp(18px, 5vw, 85px)),
transparent 100%
);
}
.ccx-zemi-viewport::-webkit-scrollbar { display: none; }
.ccx-zemi-track {
display: flex;
width: max-content;
gap: 16px;
}
.ccx-zemi {
display: grid;
width: 292px;
overflow: hidden;
border: 1px solid #ece8e3;
border-radius: 18px;
background: #fff;
color: inherit;
grid-template-rows: auto 1fr;
scroll-snap-align: start;
text-decoration: none;
transition: border-color .25s, box-shadow .25s, translate .25s;
}
.ccx-zemi:hover {
border-color: var(--orange);
box-shadow: 0 16px 38px rgb(16 27 48 / 11%);
translate: 0 -3px;
}
.ccx-zemi figure { margin: 0; overflow: hidden; background: #f6f4f1; aspect-ratio: 16 / 9; }
.ccx-zemi figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: scale .6s ease;
}
.ccx-zemi:hover figure img { scale: 1.04; }
.ccx-zemi-body { display: flex; flex-direction: column; padding: 17px 18px 16px; }
.ccx-zemi-status {
align-self: flex-start;
padding: 5px 11px;
border-radius: 999px;
background: #f1efec;
color: #6d7280;
font-size: 10px;
font-weight: 900;
letter-spacing: .04em;
}
.ccx-zemi-status[data-status="開講中"] { background: var(--orange); color: #fff; }
.ccx-zemi-status[data-status="募集中"] { background: var(--ccx-peach); color: var(--orange); }
.ccx-zemi-body h3 {
margin: 11px 0 0;
font-size: 18px;
letter-spacing: -.02em;
line-height: 1.45;
}
.ccx-zemi-body p {
margin: 7px 0 0;
color: #616872;
font-size: 12.5px;
line-height: 1.75;
}
.ccx-zemi-body small { margin-top: 8px; color: #9aa0a8; font-size: 11px; }
.ccx-zemi-body footer {
display: flex;
margin-top: auto;
border-top: 1px solid #f2eee9;
padding-top: 13px;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.ccx-zemi-body footer span { color: #9aa0a8; font-size: 11px; font-weight: 800; }
.ccx-zemi-body footer strong {
color: var(--ink);
font-size: 18px;
font-weight: 900;
letter-spacing: -.02em;
}
@media (max-width: 760px) {
.ccx-zemi { width: min(76vw, 292px); }
.ccx-zemi-viewport { padding-right: 20px; padding-left: 20px; scroll-padding-left: 20px; }
}
.ccx-hero-question { margin: 20px 0 22px !important; }
.ccx-platform {
padding-right: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
padding-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
gap: 64px;
grid-template-columns: 1.06fr .94fr;
}
@media (max-width: 1180px) {
.ccx-platform { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 760px) {
.ccx-hero-question { margin: 0 0 16px !important; }
}
.cnx3-heading h2 { font-size: clamp(32px, 3.25vw, 46px); line-height: 1.42; }
.cnx3-faq summary { font-size: 16px; }
.cnx3-faq details p { font-size: 14px; line-height: 2; }
.cnx3-features article {
min-height: 420px;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.cnx3-features article > figure {
position: relative;
margin: 0;
overflow: hidden;
}
.cnx3-features article > figure img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cnx3-features .cnx3-feature-copy {
display: flex;
padding: 48px clamp(28px, 3.4vw, 52px);
align-items: center;
gap: clamp(20px, 2.4vw, 36px);
}
.cnx3-feature-copy h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
.cnx3-feature-copy p { font-size: 14px; line-height: 2; }
.cnx3-feature-points {
display: grid;
margin: 16px 0 0;
padding: 0;
gap: 7px;
list-style: none;
}
.cnx3-feature-points li {
position: relative;
padding-left: 19px;
color: #4b535e;
font-size: 13px;
line-height: 1.75;
}
.cnx3-feature-points li::before {
position: absolute;
top: .55em;
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--orange);
content: "";
}
@media (max-width: 900px) {
.cnx3-features article,
.cnx3-features article.is-reverse { grid-template-columns: 1fr; }
.cnx3-features article > figure,
.cnx3-features article > figure img { min-height: 240px; }
}
.cnx-job-count { margin: 0 0 18px; color: #5a616b; font-size: 12px; }
.cnx-job-count strong { color: var(--orange); font-size: 17px; }
.cnx-job-viewport {
margin: 0 calc(50% - 50vw);
overflow-x: auto;
padding: 6px max(var(--page-gutter), calc((100vw - var(--page-max)) / 2)) 26px;
scroll-padding-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 0 calc(100% - clamp(96px, 26vw, 400px)), rgb(0 0 0 / 60%) calc(100% - clamp(52px, 14vw, 225px)), rgb(0 0 0 / 16%) calc(100% - clamp(18px, 5vw, 85px)), transparent 100%);
mask-image: linear-gradient(to right, #000 0 calc(100% - clamp(96px, 26vw, 400px)), rgb(0 0 0 / 60%) calc(100% - clamp(52px, 14vw, 225px)), rgb(0 0 0 / 16%) calc(100% - clamp(18px, 5vw, 85px)), transparent 100%);
}
.cnx-job-viewport::-webkit-scrollbar { display: none; }
.cnx-job-track { display: flex; width: max-content; gap: 16px; }
.cnx-job-track > article {
display: flex;
width: 330px;
padding: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid #f0e3db;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgb(90 55 35 / 6%);
scroll-snap-align: start;
transition: border-color .25s, box-shadow .25s, translate .25s;
}
.cnx-job-track > article:hover {
border-color: var(--orange);
box-shadow: 0 18px 40px rgb(90 55 35 / 13%);
translate: 0 -3px;
}
.cnx-job-track > article > header {
padding: 22px 22px 18px;
border-bottom: 1px solid #f6efea;
background: linear-gradient(160deg, #fff8f4, #fff);
}
.cnx-job-track .cnx-job-tag {
display: inline-block;
margin-bottom: 11px;
padding: 5px 11px;
border-radius: 999px;
background: #e4f4e9;
color: #2f7a4d;
font-size: 10px;
font-weight: 900;
}
.cnx-job-track > article h3 {
margin: 0;
font-size: 19px;
letter-spacing: -.02em;
line-height: 1.45;
}
.cnx-job-salary {
margin: 10px 0 0;
color: var(--orange);
font-size: 20px;
font-weight: 900;
letter-spacing: -.02em;
}
.cnx-job-track > article dl {
display: grid;
margin: 0;
padding: 16px 22px 4px;
gap: 0;
}
.cnx-job-track > article dl > div {
display: grid;
padding: 9px 0;
border-bottom: 1px dashed #f1e9e3;
grid-template-columns: 76px minmax(0, 1fr);
gap: 10px;
align-items: baseline;
}
.cnx-job-track > article dl > div:last-child { border-bottom: 0; }
.cnx-job-track > article dt { color: #9aa0a8; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.cnx-job-track > article dd { margin: 0; color: #26303d; font-size: 13px; font-weight: 700; line-height: 1.6; }
.cnx-job-track > article > a {
display: flex;
margin-top: auto;
border-top: 1px solid #f6efea;
padding: 16px 22px;
align-items: center;
justify-content: space-between;
color: var(--orange);
font-size: 12.5px;
font-weight: 850;
text-decoration: none;
}
@media (max-width: 760px) {
.cnx-job-track > article { width: min(80vw, 330px); }
.cnx-job-viewport { padding-right: 20px; padding-left: 20px; scroll-padding-left: 20px; }
}
.cnx-quadrant {
display: grid;
margin-top: 44px;
gap: 0 14px;
grid-template-columns: 62px minmax(0, 1fr);
grid-template-rows: auto auto;
}
.cnx-quadrant-vaxis {
display: flex;
padding: 6px 0;
flex-direction: column;
justify-content: space-between;
color: #7c828c;
font-size: 12px;
font-weight: 900;
line-height: 1.3;
text-align: right;
}
.cnx-quadrant-haxis {
display: flex;
margin-top: 12px;
justify-content: space-between;
grid-column: 2;
color: #7c828c;
font-size: 12px;
font-weight: 900;
}
.cnx-quadrant-grid {
position: relative;
display: grid;
gap: 18px;
grid-template-columns: 1fr 1fr;
}
.cnx-quadrant-grid::before,
.cnx-quadrant-grid::after {
position: absolute;
z-index: 0;
background: #e7e0d8;
content: "";
}
.cnx-quadrant-grid::before { top: -14px; bottom: -14px; left: 50%; width: 1px; translate: -50% 0; }
.cnx-quadrant-grid::after { top: 50%; right: -14px; left: -14px; height: 1px; translate: 0 -50%; }
.cnx-quadrant-grid > article {
position: relative;
z-index: 1;
display: flex;
padding: 26px 26px 22px;
flex-direction: column;
border: 1px solid #eee7df;
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 26px rgb(90 55 35 / 5%);
}
.cnx-quadrant-grid > article[data-quadrant="LT"] { border-top: 4px solid #3b82f6; }
.cnx-quadrant-grid > article[data-quadrant="LB"] { border-top: 4px solid #047857; }
.cnx-quadrant-grid > article[data-quadrant="RT"] { border-top: 4px solid #dc2626; }
.cnx-quadrant-grid > article[data-quadrant="RB"] { border-top: 4px solid #d97706; }
.cnx-quadrant-grid > article > small {
color: #8b919a;
font-size: 11px;
font-weight: 900;
letter-spacing: .06em;
}
.cnx-quadrant-grid > article > h3 {
margin: 9px 0 0;
font-size: 23px;
letter-spacing: -.03em;
line-height: 1.4;
}
.cnx-quadrant-grid > article > p {
margin: 9px 0 0;
color: #5b626c;
font-size: 13px;
line-height: 1.9;
}
.cnx-quadrant-grid > article > ul {
display: flex;
margin: 16px 0 0;
padding: 0;
flex-wrap: wrap;
gap: 7px;
list-style: none;
}
.cnx-quadrant-grid > article > ul li {
padding: 6px 11px;
border-radius: 999px;
background: #f6f2ee;
color: #414954;
font-size: 11.5px;
font-weight: 800;
}
.cnx-quadrant-grid > article > footer {
display: flex;
margin-top: auto;
border-top: 1px solid #f3eee8;
padding-top: 14px;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.cnx-quadrant-grid > article > footer span { color: #9aa0a8; font-size: 10.5px; font-weight: 900; letter-spacing: .06em; }
.cnx-quadrant-grid > article > footer strong { color: var(--ink); font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.cnx-quadrant-grid { grid-auto-rows: 1fr; }
.cnx-quadrant-note {
margin: 22px 0 0;
color: #7c828c;
font-size: 11.5px;
line-height: 1.9;
}
.cnx-quadrant-note a { margin-left: 8px; color: var(--orange); font-weight: 850; text-decoration: none; }
@media (max-width: 820px) {
.cnx-quadrant { grid-template-columns: 1fr; }
.cnx-quadrant-vaxis, .cnx-quadrant-haxis { display: none; }
.cnx-quadrant-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
.cnx-quadrant-grid::before, .cnx-quadrant-grid::after { display: none; }
}
.ccx-faq summary { font-size: 16px; }
.ccx-faq details > p { font-size: 14px; line-height: 2; }
.ccx-supports-lead {
max-width: 720px !important;
margin-right: auto !important;
margin-left: auto !important;
text-align: center;
}
.ccx-row-heading {
grid-template-columns: auto minmax(0, 1fr);
gap: 30px;
align-items: end;
}
.ccx-voice-grid article { grid-template-rows: 250px 1fr; }
.ccx-voice-grid article figure img { object-position: center 28%; }
.ccx-price-table > div > strong,
.ccx-price-table > div > span { font-size: 14.5px; line-height: 1.7; }
.ccx-price-table > div { min-height: 66px; }
.ccx-row-heading > p,
.ccx-supports-lead,
.ccx-platform-copy > p { font-size: 15px; }
.ccx-voice-grid article div p,
.ccx-start article p,
.ccx-consult p,
.ccx-benefits p { font-size: 14.5px; }
.ccx-zemi-body p { font-size: 13.5px; }
.ccx-teacher-note { font-size: 13px; }
.ccx-course-note { font-size: 12px; }
.ccx-price-alt {
display: block;
margin-top: 4px;
color: #8b919a;
font-size: 12px;
font-weight: 700;
}
.ccx-start article { display: flex; flex-direction: column; }
.ccx-start article .ccx-button {
align-self: flex-start;
margin-top: 16px;
min-height: 46px;
padding: 0 18px;
font-size: 13px;
}
.ccx-start-jump {
margin-top: 10px !important;
color: var(--orange) !important;
font-size: 13px !important;
font-weight: 800;
}
@media (max-width: 820px) {
.ccx-row-heading { grid-template-columns: 1fr; gap: 16px; }
.ccx-voice-grid article { grid-template-rows: 210px 1fr; }
}
.ccx-type-card { min-height: 0; }
.ccx-type-fits {
margin: 13px 0 0 !important;
border-radius: 12px;
background: var(--ccx-peach, #fff0e8);
padding: 12px 14px;
color: #45403c !important;
font-size: 12.5px !important;
line-height: 1.8 !important;
}
.ccx-type-fits b {
display: block;
margin-bottom: 4px;
color: var(--orange);
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
}
.ccx-type-facts { display: grid; margin: 12px 0 0; gap: 0; }
.ccx-type-facts > div {
display: grid;
border-bottom: 1px dashed #ece5df;
padding: 8px 0;
grid-template-columns: 62px minmax(0, 1fr);
gap: 10px;
align-items: baseline;
}
.ccx-type-facts > div:last-child { border-bottom: 0; }
.ccx-type-facts dt { color: #9aa0a8; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.ccx-type-facts dd { margin: 0; color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1.6; }
.cnx3-jobs {
background:
linear-gradient(180deg, rgb(9 14 24 / 91%), rgb(11 17 28 / 83%) 55%, rgb(9 14 24 / 93%)),
url("../images/reason-team.webp") center 38% / cover no-repeat;
}
.cnx3-jobs .cnx3-heading h2 { color: #fff; }
.cnx3-jobs .cnx3-heading p { color: rgb(255 255 255 / 76%); }
.cnx3-jobs .cnx3-heading p { margin-left: 0; }
.cnx3-jobs .cnx3-heading > small { color: #ff8a63; }
.cnx3-jobs .cnx3-heading h2::after { border-top-color: #ff8a63; }
.cnx3-jobs .cnx-job-count { color: rgb(255 255 255 / 72%); }
.cnx3-jobs .cnx-job-count strong { color: #ff8a63; }
.cnx3-jobs .cnx-job-disclaimer { color: rgb(255 255 255 / 62%); }
.cnx3-jobs .cnx-job-track > article {
border-color: transparent;
box-shadow: 0 20px 46px rgb(4 8 16 / 38%);
}
.cnx3-about > .cnx3-about-def {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
gap: clamp(40px, 5.5vw, 84px);
align-items: center;
}
.cnx3-about-def > header > small {
color: var(--orange);
font-size: 10px;
font-weight: 900;
letter-spacing: .18em;
}
.cnx3-about-def > header > h2 {
margin: 14px 0 0;
font-size: clamp(29px, 3.05vw, 43px);
letter-spacing: -.04em;
line-height: 1.44;
}
.cnx3-about-def > header > h2::after {
display: block;
width: 24px;
margin: 22px 0 0;
border-top: 3px solid var(--orange);
content: "";
}
.cnx3-about-def > header > p {
margin: 22px 0 0;
color: #5c6472;
font-size: 14px;
line-height: 2.05;
}
.cnx3-about-ledger { margin: 0; border-top: 1px solid #ece2da; }
.cnx3-about-ledger > div {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 20px;
align-items: baseline;
padding: 19px 2px;
border-bottom: 1px solid #ece2da;
}
.cnx3-about-ledger dt {
color: #96a0ad;
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.75;
}
.cnx3-about-ledger dd {
margin: 0;
color: var(--ink);
font-size: 14.5px;
font-weight: 700;
line-height: 1.8;
}
.cnx3-about-ledger > .is-plate dd {
font-size: 20px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: .06em;
}
@media (max-width: 900px) {
.cnx3-about > .cnx3-about-def { grid-template-columns: 1fr; gap: 34px; }
.cnx3-about-ledger > div { grid-template-columns: 1fr; gap: 5px; padding: 15px 2px; }
.cnx3-about-ledger > .is-plate dd { font-size: 18px; }
}
.cnx3-flow article {
min-height: 0;
padding: 15px 0 27px;
grid-template-columns: 52px minmax(0, 1fr);
gap: 26px;
}
.cnx3-flow > div::before { content: none; }
.cnx3-flow article:not(:last-child)::before {
position: absolute;
z-index: 1;
top: 15px;
bottom: -15px;
left: 25px;
border-left: 2px dotted #ffac91;
content: "";
}
.cnx3-flow article > span {
width: 52px;
height: 52px;
margin-top: 0;
border: 1.5px solid var(--orange);
background: #fff;
color: var(--orange);
font-size: 17px;
font-variant-numeric: tabular-nums;
}
.cnx3-flow article > div { padding-top: 12px; }
.cnx3-flow h3 { font-size: 18px; }
.cnx3-flow p { max-width: 660px; font-size: 13.5px; line-height: 1.95; }
@media (max-width: 900px) {
.cnx3-flow article { padding: 12px 0 22px; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
.cnx3-flow article:not(:last-child)::before { top: 12px; bottom: -12px; left: 21px; }
.cnx3-flow article > span { width: 44px; height: 44px; font-size: 15px; }
.cnx3-flow article > div { padding-top: 9px; }
.cnx3-flow h3 { font-size: 16px; }
.cnx3-flow p { font-size: 12.5px; }
}
.cnx-job-bar {
display: flex;
margin-bottom: 14px;
align-items: flex-end;
justify-content: flex-end;
gap: 20px;
}
.cnx3-jobs .cnx-job-count {
display: flex;
margin: 0;
align-items: baseline;
gap: 7px;
color: rgb(255 255 255 / 70%);
font-size: 12px;
font-weight: 700;
}
.cnx3-jobs .cnx-job-count strong {
color: #ff8a63;
font-size: 33px;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
line-height: 1;
}
.cnx-job-nav { display: flex; gap: 10px; }
.cnx-job-nav button {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid rgb(255 255 255 / 38%);
border-radius: 50%;
background: transparent;
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.cnx-job-nav button:hover:not(:disabled) { border-color: #ff8a63; background: #ff8a63; }
.cnx-job-nav button:disabled { opacity: .28; cursor: default; }
.cnx-job-nav button:focus-visible { outline: 2px solid #ff8a63; outline-offset: 3px; }
.cnx-job-progress {
overflow: hidden;
width: min(360px, 42%);
height: 3px;
margin-bottom: 24px;
margin-left: auto;
border-radius: 999px;
background: rgb(255 255 255 / 16%);
}
.cnx-job-progress > span {
display: block;
height: 100%;
border-radius: 999px;
background: #ff8a63;
transition: transform .3s ease;
}
.cnx3-jobs .cnx-job-track > article { padding: 24px 22px 0; }
.cnx-job-tags { display: flex; margin-bottom: 13px; flex-wrap: wrap; gap: 6px; }
.cnx-job-tags b {
padding: 5px 10px;
border: 1px solid #ffc9b4;
border-radius: 999px;
color: #e0491f;
font-size: 10.5px;
font-weight: 800;
}
.cnx-job-tags b.is-style { border-color: #cfd8e4; color: #55627a; }
.cnx3-jobs .cnx-job-track > article h3 { margin: 0; font-size: 20px; line-height: 1.45; }
.cnx-job-salary {
display: flex;
min-height: 33px;
margin: 16px 0 0;
align-items: flex-end;
color: var(--orange);
font-size: 27px;
font-variant-numeric: tabular-nums;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.2;
}
.cnx-job-salary small { font-size: 15px; font-weight: 800; }
.cnx-job-salary.is-tbd { font-size: 17px; letter-spacing: 0; }
.cnx-job-place {
display: flex;
margin: 9px 0 0;
align-items: center;
gap: 6px;
color: #5b6472;
font-size: 13px;
font-weight: 700;
}
.cnx-job-place svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
fill: none;
stroke: #b6bfcb;
stroke-width: 1.7;
}
.cnx-job-tasks {
display: -webkit-box;
overflow: hidden;
min-height: 36px;
margin: 8px 0 0;
color: #78818f;
font-size: 12px;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.cnx3-jobs .cnx-job-track > article dl { margin: 18px 0 0; border-top: 1px solid #edeff3; }
.cnx-job-hidden {
display: flex;
margin-top: 30px;
padding: 22px 26px;
align-items: center;
justify-content: space-between;
gap: 24px;
border: 1px solid rgb(255 255 255 / 15%);
border-radius: 16px;
background: rgb(255 255 255 / 7%);
}
.cnx-job-hidden strong { display: block; color: #fff; font-size: 15px; line-height: 1.6; }
.cnx-job-hidden span { display: block; margin-top: 6px; color: rgb(255 255 255 / 68%); font-size: 12.5px; line-height: 1.75; }
.cnx-job-hidden .cnx-button { flex: 0 0 auto; }
.cnx3-jobs .cnx-job-disclaimer { margin-top: 16px; }
@media (max-width: 900px) {
.cnx-job-bar { margin-bottom: 12px; }
.cnx3-jobs .cnx-job-count strong { font-size: 27px; }
.cnx-job-nav button { width: 40px; height: 40px; font-size: 18px; }
.cnx-job-progress { margin-bottom: 18px; }
.cnx3-jobs .cnx-job-track > article h3 { font-size: 18px; }
.cnx-job-salary { font-size: 23px; }
.cnx-job-hidden { display: block; padding: 20px; }
.cnx-job-hidden .cnx-button { width: 100%; margin-top: 16px; }
}
.contact-hero h1 {
font-size: clamp(31px, 3.9vw, 58px);
line-height: 1.34;
letter-spacing: -.03em;
}
.contact-hero p {
font-size: 15px;
line-height: 1.95;
}
.contact-hero small {
font-size: 12px;
font-weight: 900;
letter-spacing: .18em;
}
.contact-hero { min-height: 500px; }
.biz-heading h2,
.contact-intro > header h2,
.report-archive > header h2,
.report-page-cta h2 {
font-size: clamp(32px, 3.25vw, 46px);
line-height: 1.42;
letter-spacing: -.045em;
}
.biz-heading > div > small,
.contact-intro > header small,
.report-archive > header small,
.report-page-cta small,
.cnx3-heading > small {
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
}
.reasons .section-title {
display: block;
margin-bottom: 30px;
text-align: center;
}
.reasons .section-title > span {
display: inline-block;
margin-bottom: 13px;
font-size: 12px;
letter-spacing: .16em;
}
.reasons .section-title h2 {
font-size: clamp(32px, 3.25vw, 46px);
line-height: 1.42;
letter-spacing: -.045em;
}
.reasons .section-title::after { bottom: -10px; }
.reasons .reason-intro { margin-top: 26px; }
@media (max-width: 760px) {
.reasons .section-title h2 { font-size: clamp(27px, 7.6vw, 31px); }
}
.story-voice-hub .story-card {
width: 402px;
height: 140px;
grid-template-columns: 112px 1fr;
border-radius: 20px 7px 20px 7px;
}
.story-voice-hub .story-card img { width: 112px; height: 140px; }
.story-voice-hub .story-card > span { padding: 15px 18px; }
.story-voice-hub .story-card small { margin: 0 0 8px; font-size: 9.5px; }
.story-voice-hub .story-card strong { font-size: 14px; line-height: 1.62; }
.story-voice-hub .story-track { gap: 14px; padding-left: 14px; }
.story-voice-hub .story-feature {
width: min(calc(100% - 64px), 940px);
min-height: 400px;
margin-bottom: 34px;
border-radius: 48px 16px 48px 16px;
}
.story-voice-hub .story-feature figure { min-height: 400px; }
.story-voice-hub .story-feature figure img { position: absolute; inset: 0; }
.story-voice-hub .story-feature > div { padding: 40px 44px; }
.story-voice-hub .story-feature-mark { top: -8px; left: 16px; font-size: 92px; }
.story-voice-hub .story-feature h3 { margin: 12px 0 15px; font-size: clamp(22px, 2vw, 27px); }
.story-voice-hub .story-feature p { font-size: 12.5px; line-height: 1.9; }
.story-voice-hub .story-feature a { margin-top: 24px; padding-top: 14px; }
@media (max-width: 900px) {
.story-voice-hub .story-card { width: 330px; height: 124px; grid-template-columns: 96px 1fr; }
.story-voice-hub .story-card img { width: 96px; height: 124px; }
.story-voice-hub .story-card strong { font-size: 12px; }
.story-voice-hub .story-feature { min-height: 0; }
.story-voice-hub .story-feature figure { min-height: 300px; }
.story-voice-hub .story-feature > div { padding: 32px 26px; }
}
.report-list-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.report-list-card { border-radius: 16px 16px 40px; }
.report-list-card figure { height: auto; aspect-ratio: 16 / 9; }
.report-list-card summary > div { padding: 20px 22px 20px; }
.report-card-meta {
display: flex;
margin: 0 0 11px;
align-items: center;
gap: 10px;
}
.report-card-meta > span {
padding: 5px 10px;
border-radius: 999px;
background: #fff1ea;
color: var(--orange-deep);
font-size: 10px;
font-weight: 900;
}
.report-list-card time { color: #4a5058; font-family: Georgia, serif; font-size: 14px; letter-spacing: .03em; }
.report-list-card h3 {
display: -webkit-box;
overflow: hidden;
min-height: 0;
margin: 0 0 10px;
font-size: 17px;
line-height: 1.6;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.report-card-lecturer { margin: 0 0 9px !important; color: #6b7079; font-size: 11px; font-weight: 800; }
.report-list-card summary p:not(.report-card-meta):not(.report-card-lecturer) {
display: -webkit-box;
overflow: hidden;
min-height: 0;
font-size: 11.5px;
line-height: 1.75;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.report-list-card { display: flex; flex-direction: column; }
.report-list-card summary { display: flex; flex: 1; flex-direction: column; }
.report-list-card summary > div { display: flex; flex: 1; flex-direction: column; }
.report-list-card summary b { margin-top: auto; padding-top: 14px; gap: 8px; }
.report-list-card summary b em {
margin-right: auto;
margin-left: 8px;
color: #8b9099;
font-size: 10px;
font-style: normal;
font-weight: 700;
}
.report-list-card summary b i { width: 24px; height: 24px; font-size: 14px; }
@media (max-width: 1080px) {
.report-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.report-list-grid { grid-template-columns: 1fr; }
.report-list-card h3 { font-size: 18px; -webkit-line-clamp: 3; }
}
.report-single { width: min(calc(100% - var(--page-gutter) * 2), 760px); margin: 0 auto; padding: 72px 0 40px; }
.report-single-back { display: inline-block; margin-bottom: 34px; color: #7c828b; font-size: 12px; font-weight: 800; }
.report-single-back:hover { color: var(--orange-deep); }
.report-single-meta { display: flex; margin: 0 0 18px; align-items: center; gap: 12px; }
.report-single-meta > span { padding: 6px 12px; border-radius: 999px; background: #fff1ea; color: var(--orange-deep); font-size: 11px; font-weight: 900; }
.report-single-meta time { color: #4a5058; font-family: Georgia, serif; font-size: 15px; letter-spacing: .03em; }
.report-single h1 {
margin: 0;
font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
font-size: clamp(27px, 3.1vw, 42px);
line-height: 1.5;
letter-spacing: -.02em;
}
.report-single-facts { display: flex; margin: 20px 0 0; flex-wrap: wrap; gap: 8px 20px; color: #6b7079; font-size: 12px; font-weight: 800; }
.report-single-facts:empty { display: none; }
.report-single-visual { margin: 40px 0 0; overflow: hidden; border-radius: 18px; }
.report-single-visual img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.report-single-body { margin-top: 44px; color: #333a44; font-size: 15px; line-height: 2.05; }
.report-single-body > * { margin: 0 0 26px; }
.report-single-body > *:last-child { margin-bottom: 0; }
.report-single-body h2 {
margin: 56px 0 20px;
padding-bottom: 13px;
border-bottom: 2px solid #ffd9c9;
font-size: 23px;
line-height: 1.6;
letter-spacing: -.02em;
}
.report-single-body h3 { margin: 38px 0 14px; font-size: 18px; line-height: 1.65; }
.report-single-body ul, .report-single-body ol { padding-left: 1.4em; }
.report-single-body li { margin-bottom: 9px; }
.report-single-body img { max-width: 100%; height: auto; border-radius: 12px; }
.report-single-body figcaption { margin-top: 9px; color: #838a93; font-size: 12px; text-align: center; }
.report-single-body blockquote {
margin-left: 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--orange);
color: #4a525c;
font-size: 14px;
}
.report-single-body a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.report-single-body figure.wp-block-table { margin: 0 0 26px; overflow-x: auto; }
.report-single-body table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.report-single-body th,
.report-single-body td { padding: 11px 14px; border: 1px solid #ece8e5; text-align: left; vertical-align: top; }
.report-single-body thead th { background: #fdf6f1; font-weight: 900; white-space: nowrap; }
.report-single-body tbody th { background: #fbfaf9; font-weight: 700; }
.report-single-foot { margin-top: 56px; padding-top: 26px; border-top: 1px solid #ece8e5; }
.report-single-foot a { color: var(--orange-deep); font-size: 12px; font-weight: 900; }
.report-list-card.is-linked > a { display: flex; height: 100%; flex-direction: column; color: inherit; }
.report-list-card.is-linked > a > div { display: flex; flex: 1; flex-direction: column; padding: 20px 22px; }
.reading-toc {
margin: 38px 0 0;
padding: 18px 22px 20px;
border-left: 3px solid var(--orange-line);
border-radius: 0 10px 10px 0;
background: var(--warm);
}
.reading-toc summary {
color: var(--muted);
cursor: pointer;
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
list-style: none;
}
.reading-toc summary::-webkit-details-marker { display: none; }
.reading-toc summary::after { margin-left: .5em; content: '▾'; font-size: 10px; }
.reading-toc details[open] > summary::after { content: '▴'; }
.reading-toc ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: toc; }
.reading-toc li { margin: 0; }
.reading-toc li.lv2 { counter-increment: toc; }
.reading-toc li + li { margin-top: 7px; }
.reading-toc li.lv3 { padding-left: 1.5em; }
.reading-toc a {
color: var(--ink);
font-size: 14px;
line-height: 1.6;
text-decoration: none;
}
.reading-toc a:hover { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.reading-toc li.lv2 > a::before {
margin-right: .5em;
color: var(--orange-line);
content: counter(toc);
font-size: 11px;
font-weight: 900;
}
.article-body :is(h2, h3)[id],
.report-single-body :is(h2, h3)[id] { scroll-margin-top: 96px; }
.reading-related { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); }
.reading-related > h2 {
margin: 0 0 16px;
color: var(--muted);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
}
.reading-related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.reading-related a {
display: block;
padding: 16px 20px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--card);
color: inherit;
text-decoration: none;
transition: border-color .18s ease, transform .18s ease;
}
.reading-related a:hover { border-color: var(--orange-line); transform: translateY(-2px); }
.reading-related strong { display: block; color: var(--orange-deep); font-size: 15px; font-weight: 900; }
.reading-related span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
.reading-related a { transition: none; }
.reading-related a:hover { transform: none; }
}
@media (max-width: 760px) {
.report-single { width: calc(100% - 40px); padding: 46px 0 30px; }
.report-single-body { font-size: 14.5px; }
.report-single-body h2 { margin-top: 42px; font-size: 20px; }
.report-single-body table { min-width: 460px; font-size: 13px; }
.report-single-body th,
.report-single-body td { padding: 9px 11px; }
.reading-toc { margin-top: 30px; padding: 15px 17px 17px; }
.reading-toc a { font-size: 13.5px; }
.reading-related { margin-top: 44px; padding-top: 24px; }
.reading-related a { padding: 14px 16px; }
.reading-related strong { font-size: 14.5px; }
}
.contact-hero figure img { object-position: center 18%; }
.ccx-hero-question { margin: 16px 0 18px !important; }
.ccx-hero-question img { width: min(100%, 208px); }
@media (max-width: 760px) {
.ccx-hero-question { margin: 0 0 14px !important; }
.ccx-hero-question img { width: min(100%, 176px); }
}
.ccx-report-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
padding: 4px 4px 10px;
}
.ccx-report-slide {
width: auto;
min-height: 0;
flex: initial;
}
.ccx-report-slide > a {
display: flex;
min-height: 0;
height: 100%;
flex-direction: column;
grid-template-columns: none;
}
.ccx-report-slide figure {
min-height: 0;
aspect-ratio: 16 / 9;
}
.ccx-report-slide figure img { position: absolute; inset: 0; }
.ccx-report-slide figure::after { background: linear-gradient(180deg, transparent 62%, rgb(9 18 31 / 42%)); }
.ccx-report-slide figure > span { top: 14px; left: 14px; padding: 6px 9px; font-size: 8px; }
.ccx-report-paper {
flex: 1;
padding: 22px 24px 26px 34px;
justify-content: flex-start;
}
.ccx-report-paper::before { left: 16px; }
.ccx-report-paper::after {
right: 14px;
bottom: 14px;
width: 58px;
height: 58px;
border-width: 1.5px;
font-size: 6px;
}
.ccx-report-paper time { font-size: 11px; }
.ccx-report-paper h3 {
display: -webkit-box;
overflow: hidden;
margin: 14px 0 10px;
font-size: 17px;
line-height: 1.6;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ccx-report-paper > p:not(.ccx-report-paper-label) {
display: -webkit-box;
overflow: hidden;
font-size: 11.5px;
line-height: 1.85;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ccx-report-paper strong { margin-top: auto; padding-top: 18px; min-width: 130px; }
@media (max-width: 1080px) {
.ccx-report-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.ccx-report-row { grid-template-columns: 1fr; gap: 14px; }
.ccx-report-paper { padding: 20px 20px 24px 30px; }
.ccx-report-paper h3 { font-size: 18px; }
}
.cnx3-jobs {
background:
linear-gradient(180deg, rgb(9 14 24 / 91%), rgb(11 17 28 / 83%) 55%, rgb(9 14 24 / 93%)),
url("../images/empty-office.webp") center 42% / cover no-repeat;
}
.contact-intro > header { margin-right: auto; margin-left: auto; text-align: center; }
.contact-form-heading h2 { font-size: clamp(26px, 2.4vw, 34px); }
.legal-hero { min-height: 372px; padding: 94px 36px 84px; }
.legal-hero h1 { margin: 22px 0 20px; font-size: clamp(30px, 3.25vw, 46px); }
.faq-page-hero { min-height: 412px; padding: 100px 36px; }
.faq-page-hero h1 { margin: 22px 0 20px; font-size: clamp(30px, 3.25vw, 46px); }
@media (max-width: 640px) {
.legal-hero { min-height: 300px; padding: 74px 21px 64px; }
.faq-page-hero { min-height: 330px; padding: 78px 22px; }
}
.report-featured {
min-height: 0;
margin: 105px auto 118px;
grid-template-columns: 1.12fr .88fr;
border-radius: 26px 26px 26px 84px;
}
.report-featured figure {
position: relative;
min-height: 0;
aspect-ratio: 16 / 9;
border-radius: 0;
}
.report-featured figure img { position: absolute; inset: 0; }
.report-featured figure > span {
position: absolute;
z-index: 2;
top: 18px;
left: 18px;
padding: 9px 16px;
border-radius: 999px;
background: var(--orange-gloss);
color: #fff;
font-size: 12px;
font-weight: 900;
letter-spacing: .02em;
box-shadow: 0 10px 24px rgb(227 75 35 / 26%);
}
.report-featured > div { padding: 38px 46px 40px; justify-content: center; }
.report-featured > div > p.report-featured-meta {
display: flex;
margin: 0 0 15px;
align-items: center;
gap: 11px;
}
.report-featured-meta b {
padding: 5px 12px;
border: 1px solid rgb(255 255 255 / 32%);
border-radius: 999px;
color: #ffc4ad;
font-size: 11px;
font-weight: 900;
}
.report-featured-meta time {
margin: 0;
color: rgb(255 255 255 / 62%);
font-family: Georgia, serif;
font-size: 13px;
}
.report-featured h2 {
margin: 0 0 13px;
font-size: clamp(23px, 2.35vw, 33px);
line-height: 1.5;
letter-spacing: -.03em;
}
.report-featured > div > p:not(.report-featured-meta) {
margin: 0;
color: rgb(255 255 255 / 72%);
font-size: 13.5px;
line-height: 1.95;
}
.report-featured a { margin-top: 25px; }
@media (max-width: 900px) {
.report-featured { margin: 72px auto 84px; border-radius: 22px 22px 22px 62px; }
.report-featured > div { padding: 30px 26px 34px; }
}
@media (max-width: 900px) {
.report-featured { grid-template-columns: 1fr; }
.contact-hero { min-height: 470px; }
}
@media (max-width: 640px) {
.contact-hero { min-height: 420px; }
}
.cnx3-final > div > div > a:first-child { border-color: transparent; background: var(--orange-gloss); }
.cnx3-final > div > .cnx3-final-note { max-width: 560px; margin: 14px 0 0; color: rgb(255 255 255 / 55%); font-size: 11px; line-height: 1.8; }
.story-collage .voice-disclaimer { color: rgb(255 255 255 / 60%); }
.cuel-float-banner {
position: fixed;
z-index: 60;
right: 18px;
bottom: 16px;
width: min(34vw, 440px);
line-height: 0;
-webkit-tap-highlight-color: transparent;
transition: translate .25s ease, opacity .25s ease;
}
.cuel-float-banner img { display: block; width: 100%; height: auto; }
.cuel-float-banner > a:hover { translate: 0 -4px; }
.cuel-float-banner > a { display: block; transition: translate .25s ease; }
.cuel-float-banner > a:focus-visible { outline: 4px solid #ffb296; outline-offset: 4px; border-radius: 14px; }
.cuel-float-banner.is-closed { display: none; }
.cuel-float-banner.is-waiting { pointer-events: none; opacity: 0; translate: 0 14px; }
.cuel-float-close {
position: absolute;
z-index: 1;
top: -6px;
right: -6px;
display: grid;
width: 30px;
height: 30px;
place-items: center;
border: 1px solid rgb(20 34 49 / 10%);
border-radius: 50%;
background: #fff;
color: #6c757e;
font-size: 16px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 12px rgb(60 40 25 / 18%);
}
.cuel-float-close[hidden] { display: none; }
.cuel-float-close:hover { color: var(--orange-deep); }
.cuel-float-close:focus-visible { outline: 3px solid #ffb296; outline-offset: 3px; }
@media (max-width: 700px) {
.cuel-float-banner {
right: 10px;
bottom: max(10px, env(safe-area-inset-bottom));
width: min(38vw, 156px);
}
}
@media (prefers-reduced-motion: reduce) {
.cuel-float-banner,
.cuel-float-banner > a { transition: none; }
}
.ccx-next-live figure.is-thumb img { object-position: center; }
.biz-ladder { position: relative; z-index: 1; }
.biz-ladder > header { max-width: 720px; margin-bottom: 30px; }
.biz-ladder > header small { display: block; margin-bottom: 12px; color: var(--biz-blue); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.biz-ladder > header h3 { margin: 0; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.45; letter-spacing: -.03em; }
.biz-ladder > header p { margin: 14px 0 0; color: #566674; font-size: 14px; line-height: 1.95; }
.biz-ladder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.biz-ladder-grid article { display: flex; padding: 30px 27px 26px; flex-direction: column; border: 1px solid #dcecef; border-radius: 18px; background: rgb(255 255 255 / 92%); }
.biz-ladder-head { display: flex; margin-bottom: 15px; align-items: baseline; justify-content: space-between; gap: 12px; }
.biz-ladder-step { color: var(--biz-blue); font-family: Georgia, serif; font-size: 32px; font-weight: 700; line-height: 1; }
.biz-ladder-head b { color: var(--biz-blue); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-align: right; }
.biz-ladder-head b i { display: block; margin-top: 5px; color: #7c8c97; font-size: 11px; font-style: normal; font-weight: 700; }
.biz-ladder-grid h4 { margin: 0; font-size: 18.5px; line-height: 1.55; letter-spacing: -.02em; }
.biz-ladder-target { margin: 10px 0 0; color: #5b6b78; font-size: 13px; line-height: 1.8; }
.biz-ladder-grid ul { margin: 19px 0 0; padding: 19px 0 0; border-top: 1px solid #e7f1f3; list-style: none; }
.biz-ladder-grid li { position: relative; padding-left: 15px; color: #45535e; font-size: 13.5px; line-height: 2; }
.biz-ladder-grid li::before { position: absolute; top: .85em; left: 0; width: 6px; height: 1px; background: var(--biz-blue); content: ""; opacity: .55; }
.biz-ladder-goal { display: flex; margin: 20px 0 0; padding: 13px 15px; flex-direction: column; gap: 5px; border-radius: 11px; background: var(--biz-pale); color: #2c4653; font-size: 13.5px; font-weight: 700; line-height: 1.7; }
.biz-ladder-goal small { color: var(--biz-blue); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.biz-ladder-grid article > .biz-ladder-goal { margin-top: auto; }
.biz-ladder-note { margin: 18px 0 0; color: #6a7883; font-size: 12.5px; line-height: 1.9; }
@media (max-width: 1080px) {
.biz-ladder-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.biz-ladder { margin-top: 40px; }
.biz-ladder-grid { grid-template-columns: 1fr; }
.biz-ladder-grid article { padding: 22px 20px 20px; }
}
.ccx-class-layout { grid-template-columns: 1.2fr 1fr; }
.ccx-shorts { grid-column: 1 / -1; margin-top: 10px; }
.ccx-shorts > div { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); overflow: visible; }
.ccx-shorts > div > article { display: flex; min-width: 0; flex-direction: column; }
.ccx-shorts video { width: 100%; aspect-ratio: 16 / 9; background: #0a121f; border-radius: 10px; object-fit: cover; }
.ccx-shorts > div > article > span { margin-top: 9px; color: var(--orange); font-size: 9px; font-weight: 900; }
.ccx-shorts > div > article > strong { display: block; margin-top: 5px; font-size: 11px; line-height: 1.55; }
.ccx-shorts > div > article > small { margin-top: 5px; color: #7a828c; font-size: 9px; line-height: 1.5; }
.ccx-shorts > div > article > a { margin-top: auto; padding-top: 8px; color: var(--orange); font-size: 9px; font-weight: 900; }
@media (max-width: 900px) {
.ccx-class-layout { grid-template-columns: 1fr 1fr; }
.ccx-shorts > div { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.ccx-shorts { grid-column: auto; }
.ccx-shorts > div { display: flex; margin-right: -16px; padding-right: 16px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ccx-shorts > div > article { width: 74vw; flex: 0 0 74vw; scroll-snap-align: start; }
}
.ccx-class-layout { grid-template-columns: 1fr 1fr; }
.ccx-next-live.has-thumb { grid-template-rows: auto auto 1fr; }
.ccx-next-live.has-thumb figure { aspect-ratio: 16 / 9; }
.ccx-schedule > a:not(.ccx-all-link) { grid-template-columns: 86px 1fr auto; }
.ccx-schedule > a > figure { width: 86px; height: 48px; border-radius: 5px; }
@media (max-width: 900px) {
.ccx-schedule > a:not(.ccx-all-link) { grid-template-columns: 96px 1fr auto; }
.ccx-schedule > a > figure { width: 96px; height: 54px; }
}
@media (max-width: 760px) {
.ccx-class-layout { grid-template-columns: 1fr; }
.ccx-shorts header { flex-wrap: wrap; gap: 4px; }
}
.cuel-form-notice { display: grid; margin: 0 0 26px; padding: 18px 22px; gap: 6px; border-radius: 12px; }
.cuel-form-notice strong { font-size: 14px; }
.cuel-form-notice span { font-size: 12.5px; line-height: 1.85; }
.cuel-form-notice.is-sent { border: 1px solid #bfe3d6; background: #f1faf6; color: #1d5744; }
.cuel-form-notice.is-error { border: 1px solid #f3ccc0; background: #fdf4f1; color: #8c3417; }
.contact-form-section form, .biz-contact-layout form { position: relative; }
.contact-form-section > .cuel-form-notice, .biz-contact-layout > .cuel-form-notice { grid-column: 1 / -1; }
.biz-contact-layout .contact-consent { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; text-align: left; }
.biz-contact-layout .contact-consent input { flex: 0 0 auto; margin-top: 2px; }
.biz-contact-layout .contact-consent span { font-size: 12px; line-height: 1.7; }
.biz-consultation-grid > a { min-height: 208px; }
@media (max-width: 900px) {
.biz-consultation-grid > a { min-height: 196px; }
}
.contact-form-section form > label > span,
.contact-form-section legend { font-size: 14px; }
.contact-form-section label b,
.contact-form-section legend b { font-size: 11px; }
.contact-form-section input:not([type='radio']):not([type='checkbox']),
.contact-form-section textarea { min-height: 58px; font-size: 16px; }
.contact-form-section fieldset label { min-height: 56px; }
.contact-form-section fieldset span { font-size: 13.5px; }
.contact-consent span { font-size: 13px !important; }
.biz-contact label > span { font-size: 13.5px; }
.biz-contact label b { font-size: 11px; }
.biz-contact input,
.biz-contact select,
.biz-contact textarea { min-height: 54px; font-size: 16px; }
.contact-form-section form > button,
.biz-contact form > button { justify-content: center; gap: 14px; min-height: 68px; font-size: 17px; letter-spacing: .02em; }
.biz-contact form > button { width: min(100%, 430px); margin: 0 auto; }
.cuel-form-sales-note { margin: 6px 0 0; color: #7c848c; font-size: 12.5px; line-height: 1.8; text-align: center; }
.biz-contact form > p.cuel-form-sales-note { font-size: 12.5px; text-align: center; }
@media (max-width: 520px) {
.contact-form-section form > button,
.biz-contact form > button { min-height: 62px; font-size: 16px; }
.cuel-form-sales-note { text-align: left; }
}
.biz-training,
.biz-consultation-grid > a.is-training { --biz-ring: rgb(47 104 123 / 7%); }
.biz-recruitment,
.biz-consultation-grid > a.is-recruitment { --biz-blue: #3b5aa6; --biz-pale: #eef2fb; --biz-line: #d5dff2; --biz-ring: rgb(59 90 166 / 7%); }
.biz-public,
.biz-consultation-grid > a.is-reskilling { --biz-blue: #3f7d5e; --biz-pale: #eaf5f0; --biz-line: #cfe3d8; --biz-ring: rgb(63 125 94 / 8%); }
.biz-recruitment { background: linear-gradient(135deg, #f3f6fd, #fff 58%); }
.biz-public { background: linear-gradient(145deg, #edf7f2 0%, #f9fdfb 66%, #eaf4ef 100%); }
.biz-heading > div > span { display: grid; min-width: 48px; height: 48px; padding: 0 10px; place-items: center; border-radius: 14px; background: var(--biz-blue); color: #fff; font-size: 20px; line-height: 1; }
.biz-consultation-grid > a { padding-top: 38px; }
.biz-consultation-grid > a::before { position: absolute; top: 0; right: 0; left: 0; height: 5px; background: var(--biz-blue); content: ""; }
.biz-consultation-grid > a > span { display: block; margin-bottom: 4px; color: var(--biz-blue); font-size: 34px; font-weight: 700; line-height: 1; }
.biz-consultation-grid > a::after { border-color: var(--biz-ring); }
.biz-consultation-grid > a:hover { border-color: var(--biz-line); background: var(--biz-pale); }
@media (max-width: 620px) {
.biz-heading > div > span { min-width: 42px; height: 42px; font-size: 18px; }
.biz-consultation-grid > a > span { font-size: 30px; }
}
.zemi-page main { overflow: hidden; }
.zemi-breadcrumb { width: min(100% - 64px, 1180px); margin: 28px auto 0; color: #7c8189; font-size: 12px; }
.zemi-breadcrumb a { color: #7c8189; }
.zemi-breadcrumb a:hover { color: var(--orange); }
.zemi-breadcrumb strong { color: var(--ink); font-weight: 700; }
.zemi-breadcrumb span { margin: 0 7px; color: #c4c8cd; }
.zemi-hero { display: grid; width: min(100% - 64px, 1180px); margin: 34px auto 0; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.zemi-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.zemi-eyebrow::before { width: 26px; height: 2px; background: currentColor; content: ""; }
.zemi-tags { display: flex; margin: 17px 0 0; gap: 8px; flex-wrap: wrap; }
.zemi-hero h1 { margin: 15px 0 0; font-size: clamp(31px, 3.9vw, 58px); line-height: 1.32; letter-spacing: -.03em; word-break: keep-all; overflow-wrap: break-word; }
.zemi-subtitle { margin: 13px 0 0; color: #7b838d; font-size: clamp(14px, 1.35vw, 17px); font-weight: 800; line-height: 1.7; letter-spacing: .01em; word-break: keep-all; overflow-wrap: break-word; }
.zemi-target { margin: 19px 0 0; color: #646b75; font-size: 15px; line-height: 1.95; }
.zemi-hero figure { margin: 0; }
.zemi-hero img { display: block; width: 100%; height: auto; border: 1px solid #f2e4dc; box-shadow: 0 18px 46px rgb(113 61 37 / 12%); }
.zemi-status { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff1ea; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.zemi-status[data-status="近日開講"] { background: #f1f3f5; color: #6d747d; }
.zemi-audience { display: inline-block; padding: 6px 13px; background: #f4f6f5; border-radius: 999px; color: #58616a; font-size: 11px; font-weight: 850; }
.zemi-page .zemi-facts { width: 100%; margin: 62px 0 0; background: linear-gradient(90deg, #fff5ef, #ffe7da); border-top: 1px solid #ffd4c2; border-bottom: 1px solid #ffd4c2; }
.zemi-facts dl { display: grid; width: min(100% - 64px, 1180px); margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.zemi-facts dl > div { padding: 31px 32px 31px 0; }
.zemi-facts dl > div + div { padding-left: 32px; border-left: 1px solid rgb(255 92 50 / 16%); }
.zemi-facts dt { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.zemi-facts dd { margin: 11px 0 0; font-size: 16px; font-weight: 800; line-height: 1.7; letter-spacing: -.01em; }
.zemi-facts .is-price dd { color: var(--orange); font-size: 22px; letter-spacing: -.035em; }
.zemi-body { width: min(100% - 64px, 840px); margin: 0 auto; padding-top: 94px; }
.zemi-body > section + section { margin-top: 74px; }
.zemi-body h2 { position: relative; margin: 0 0 26px; padding-top: 25px; font-size: clamp(23px, 2.4vw, 30px); line-height: 1.5; letter-spacing: -.03em; word-break: keep-all; overflow-wrap: break-word; }
.zemi-body h2::before { position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--orange); content: ""; }
.zemi-body p { margin: 0 0 18px; color: #4c545e; font-size: 15px; line-height: 2.05; }
.zemi-body > section > p:first-child { color: #333c48; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; line-height: 1.95; }
.zemi-body ul { margin: 0; padding: 0; list-style: none; }
.zemi-body ul li { position: relative; margin-bottom: 13px; padding-left: 24px; color: #4c545e; font-size: 15px; line-height: 1.9; }
.zemi-body ul li::before { position: absolute; top: 0; left: 0; color: var(--orange); content: "✓"; font-weight: 900; }
.zemi-note { color: #7c8189 !important; font-size: 13px !important; }
.zemi-sessions { margin: 0; padding: 0; list-style: none; }
.zemi-sessions li { display: grid; padding: 23px 0; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; border-top: 1px solid #eee3de; }
.zemi-sessions li:last-child { border-bottom: 1px solid #eee3de; }
.zemi-sessions span { display: inline-grid; min-width: 64px; height: 27px; padding: 0 10px; place-items: center; justify-self: start; background: #fff1ea; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.zemi-sessions strong { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; letter-spacing: -.02em; }
.zemi-sessions small { display: block; margin-top: 8px; color: #7c8189; font-size: 13px; line-height: 1.8; grid-column: 2; }
.zemi-exam { position: relative; margin-top: 86px; padding: 40px 44px; background: var(--ccx-cream); border: 1px solid #ecdfd9; }
.zemi-exam::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--orange-gloss); content: ""; }
.zemi-exam > span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.zemi-exam h2 { margin: 10px 0 15px; padding-top: 0; font-size: 21px; }
.zemi-exam h2::before { content: none; }
.zemi-exam p { margin: 0; }
.zemi-cta { width: min(100% - 64px, 1180px); margin: 104px auto 0; padding: 64px 40px; background: linear-gradient(135deg, #fff8f3, #ffe9dd); text-align: center; }
.zemi-cta h2 { margin: 0; font-size: clamp(23px, 2.4vw, 32px); letter-spacing: -.03em; }
.zemi-cta > p { max-width: 620px; margin: 18px auto 0; color: #555d68; font-size: 14px; line-height: 2; }
.zemi-cta > div { display: flex; margin-top: 30px; flex-wrap: wrap; gap: 14px; justify-content: center; }
.zemi-apply { margin: 24px 0 0; font-size: 13px; }
.zemi-apply a { color: #555d68; text-decoration: underline; }
.zemi-page .zemi-others { width: min(100% - 64px, 1180px); margin: 98px auto 108px; }
.zemi-others-head { display: flex; margin-bottom: 28px; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.zemi-others-head > span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.zemi-others-head h2 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.zemi-others-head > a { margin-left: auto; color: #5c636e; font-size: 12px; font-weight: 800; }
.zemi-others-head > a:hover { color: var(--orange); }
.zemi-others-head b { margin-left: 5px; }
.zemi-others-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zemi-others-grid a { display: block; background: #fff; border: 1px solid #eee3de; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.zemi-others-grid a:hover { border-color: #f3b79f; box-shadow: 0 18px 40px rgb(48 39 34 / 10%); transform: translateY(-5px); }
.zemi-others-grid figure { margin: 0; }
.zemi-others-grid img { display: block; width: 100%; height: auto; }
.zemi-others-grid span { display: block; padding: 16px 18px 0; color: var(--orange); font-size: 11px; font-weight: 900; }
.zemi-others-grid strong { display: block; padding: 8px 18px 20px; font-size: 15px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; }
@media (max-width: 900px) {
.zemi-hero { grid-template-columns: 1fr; gap: 26px; }
.zemi-others-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.zemi-breadcrumb,
.zemi-hero,
.zemi-cta { width: calc(100% - 32px); }
.zemi-hero { margin-top: 24px; }
.zemi-body { width: calc(100% - 32px); padding-top: 54px; }
.zemi-body > section + section { margin-top: 50px; }
.zemi-page .zemi-facts { margin-top: 40px; }
.zemi-facts dl { width: calc(100% - 32px); grid-template-columns: 1fr; }
.zemi-facts dl > div { padding: 19px 0; }
.zemi-facts dl > div + div { padding-left: 0; border-top: 1px solid rgb(255 92 50 / 16%); border-left: 0; }
.zemi-facts dd { margin-top: 7px; }
.zemi-sessions li { grid-template-columns: 1fr; gap: 9px; }
.zemi-sessions small { grid-column: 1; }
.zemi-exam { margin-top: 54px; padding: 28px 22px; }
.zemi-cta { margin-top: 62px; padding: 42px 22px; }
.zemi-cta > div { flex-direction: column; }
.zemi-page .zemi-others { width: calc(100% - 32px); margin: 62px auto 72px; }
.zemi-others-grid { grid-template-columns: 1fr; }
}
.fv {
display: grid;
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
min-height: 620px;
margin: 0 auto;
grid-template-columns: 46% 54%;
align-items: center;
gap: 0;
}
.fv-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.fv-eyebrow {
color: var(--orange);
font-family: var(--font-sans);
font-size: 10px;
font-weight: 900;
letter-spacing: .18em;
}
.fv-title {
margin: 22px 0 0;
color: var(--ink);
font-family: var(--font-serif);
font-size: clamp(32px, 3.25vw, 46px);
font-weight: 700;
line-height: 1.34;
letter-spacing: -.05em;
}
.fv-title em { color: var(--orange); font-style: normal; font-weight: inherit; }
.fv-sub {
max-width: 540px;
margin: 18px 0 0;
color: var(--ink);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 800;
line-height: 1.8;
}
.fv-desc {
max-width: 540px;
margin: 12px 0 0;
color: #525965;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.95;
}
.fv-title + .fv-desc { margin-top: 18px; }
.fv-sub + .fv-actions { margin-top: 31px; }
.fv-actions { display: flex; margin-top: 31px; gap: 12px; flex-wrap: wrap; }
.fv-figure { position: relative; min-width: 0; height: 100%; margin: 0; overflow: hidden; }
.fv-figure img { width: 100%; height: 100%; object-fit: cover; }
.cta {
display: inline-flex;
min-height: 56px;
padding: 0 22px;
align-items: center;
justify-content: space-between;
gap: 24px;
border: 1px solid var(--orange);
border-radius: 5px;
background: #fff;
color: var(--ink);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 800;
transition: transform .2s ease, box-shadow .2s ease;
}
.cta b { font-size: 15px; font-weight: 700; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgb(255 92 50 / 18%); }
.cta.is-primary {
border-color: transparent;
background: var(--orange-gloss);
color: #fff;
box-shadow: 0 12px 28px rgb(236 73 32 / 18%);
}
@media (max-width: 900px) {
.fv { width: calc(100% - 48px); min-height: 0; grid-template-columns: 1fr; }
.fv-copy { padding: 44px 0 30px; }
.fv-figure { height: 320px; }
}
@media (max-width: 560px) {
.fv { width: calc(100% - 32px); }
.fv-actions { display: grid; grid-template-columns: 1fr; }
.fv-figure { height: 240px; }
}
.biz-hero.fv {
position: relative;
isolation: isolate;
width: 100%;
max-width: none;
grid-template-columns: 1fr;
border-radius: 0 0 54px 54px;
background: #122738;
overflow: hidden;
}
.biz-hero .fv-copy {
z-index: 1;
width: min(calc(100% - var(--page-gutter) * 2), var(--page-max));
margin: 0 auto;
padding: 96px 0;
}
.biz-hero .fv-title,
.biz-hero .fv-sub { color: #fff; }
.biz-hero .fv-desc { color: rgb(255 255 255 / 78%); }
.biz-hero .fv-eyebrow { color: #9ac3cf; }
.biz-hero .cta { border-color: rgb(255 255 255 / 70%); background: transparent; color: #fff; }
.biz-hero .cta.is-primary { border-color: transparent; background: var(--orange-gloss); color: #fff; }
.biz-hero .fv-figure { position: absolute; z-index: -2; inset: 0; height: auto; }
.biz-hero .fv-figure img { object-position: 58% center; }
@media (max-width: 900px) {
.biz-hero.fv { width: 100%; }
.biz-hero .fv-copy { width: calc(100% - 48px); padding: 150px 0 56px; justify-content: flex-end; }
.biz-hero .fv-figure { position: absolute; height: auto; }
}
@media (max-width: 560px) {
.biz-hero .fv-copy { width: calc(100% - 32px); }
}
@media (min-width: 901px) {
.cnx3-hero.fv { grid-template-columns: 48% 52%; }
}
@media (max-width: 640px) {
.hero.fv { margin-top: -70px; }
}
.reading-single { width: min(760px, calc(100% - 112px)); margin: 0 auto; padding: 72px 0 40px; }
.reading-single-back { display: inline-block; margin-bottom: 26px; color: var(--orange-deep); font-size: 12px; font-weight: 900; }
.reading-single-meta { display: flex; gap: 14px; align-items: center; margin: 0 0 14px; }
.reading-single-meta span { padding: 4px 12px; border-radius: 999px; background: #fff1e9; color: var(--orange-deep); font-size: 11.5px; font-weight: 900; }
.reading-single-meta time { color: #838a93; font-size: 12.5px; letter-spacing: .04em; }
.reading-single h1 { margin: 0; font-size: 46px; line-height: 1.45; letter-spacing: -.02em; }
.reading-single-facts { margin: 16px 0 0; color: #838a93; font-size: 12.5px; }
.reading-single-visual { margin: 36px 0 0; }
.reading-single-visual img { width: 100%; height: auto; border-radius: 14px; }
.reading-single-foot { margin-top: 56px; padding-top: 26px; border-top: 1px solid #ece8e5; }
.reading-single-foot a { color: var(--orange-deep); font-size: 12px; font-weight: 900; }
.article-body { margin-top: 44px; color: #333a44; font-size: 15px; line-height: 2.05; }
.article-body > * { margin: 0 0 26px; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body h2 { margin: 56px 0 20px; padding-bottom: 13px; border-bottom: 2px solid #ffd9c9; font-size: 23px; line-height: 1.6; letter-spacing: -.02em; }
.article-body h3 { margin: 38px 0 14px; font-size: 18px; line-height: 1.65; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li { margin-bottom: 9px; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.article-body figcaption { margin-top: 9px; color: #838a93; font-size: 12px; text-align: center; }
.article-body blockquote { margin-left: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--orange); color: #4a525c; font-size: 14px; }
.article-body a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.article-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.article-body th, .article-body td { padding: 10px 14px; border: 1px solid #ece8e5; text-align: left; white-space: nowrap; }
.article-body th { background: #faf7f5; font-weight: 900; }
.reading-archive { width: min(var(--page-max), calc(100% - var(--page-gutter) * 2)); margin: 0 auto; padding: 72px 0 80px; }
.reading-archive-head { margin-bottom: 48px; }
.reading-archive-head small { display: block; margin-bottom: 12px; color: var(--orange-deep); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.reading-archive-head h1 { margin: 0; font-size: 46px; line-height: 1.45; letter-spacing: -.02em; }
.reading-archive-head p { margin: 16px 0 0; max-width: 620px; color: #5a626c; font-size: 15px; line-height: 1.95; }
.reading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.reading-card { border: 1px solid #ece8e5; border-radius: 14px; overflow: hidden; background: #fff; }
.reading-card > a { display: flex; height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.reading-card figure { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.reading-card figure img { width: 100%; height: 100%; object-fit: cover; }
.reading-card > a > div { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.reading-card-meta { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; }
.reading-card-meta time { color: #838a93; font-size: 12px; letter-spacing: .04em; }
.reading-card-meta small { padding: 3px 10px; border-radius: 999px; background: #fff1e9; color: var(--orange-deep); font-size: 11px; font-weight: 900; }
.reading-card h3 { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; }
.reading-card-excerpt { margin: 0 0 18px; color: #5a626c; font-size: 13.5px; line-height: 1.85; }
.reading-card strong { margin-top: auto; color: var(--orange-deep); font-size: 12px; font-weight: 900; }
.reading-empty { color: #838a93; font-size: 14px; }
.reading-pagination { margin-top: 56px; }
.reading-pagination .nav-links { display: flex; gap: 10px; justify-content: center; }
.reading-pagination a, .reading-pagination span { padding: 8px 14px; border: 1px solid #ece8e5; border-radius: 8px; color: #5a626c; font-size: 13px; text-decoration: none; }
.reading-pagination .current { border-color: var(--orange); background: var(--orange); color: #fff; font-weight: 900; }
.notfound-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid #ece8e5; }
.notfound-links li { border-bottom: 1px solid #ece8e5; }
.notfound-links a { display: block; padding: 20px 4px; color: #333a44; font-size: 15px; font-weight: 900; text-decoration: none; }
.notfound-links a:hover { color: var(--orange-deep); }
.reading-single-link { margin: 36px 0 0; }
.reading-single-link a { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 14px; font-weight: 900; text-decoration: none; }
@media (max-width: 900px) {
.reading-single { width: calc(100% - 56px); padding: 56px 0 34px; }
.reading-single h1 { font-size: 34px; }
.reading-archive { width: calc(100% - 56px); padding: 56px 0 60px; }
.reading-archive-head h1 { font-size: 34px; }
.reading-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
}
@media (max-width: 760px) {
.reading-single { width: calc(100% - 40px); padding: 46px 0 30px; }
.reading-single h1 { font-size: 27px; }
.article-body { font-size: 14.5px; }
.article-body h2 { margin-top: 42px; font-size: 20px; }
.reading-archive { width: calc(100% - 40px); padding: 46px 0 48px; }
.reading-archive-head h1 { font-size: 27px; }
.reading-grid { grid-template-columns: 1fr; gap: 22px; }
}
.article-body .cuel-point { margin: 32px 0; padding: 22px 26px; border-radius: 14px; background: #fff6f0; border: 1px solid #ffd9c9; }
.article-body .cuel-point-title { margin: 0 0 12px; color: var(--orange-deep); font-size: 13px; font-weight: 900; letter-spacing: .04em; }
.article-body .cuel-point ul { margin: 0; padding-left: 1.3em; }
.article-body .cuel-point li { margin-bottom: 8px; font-size: 14.5px; }
.article-body .cuel-chat-group { margin: 32px 0; padding: 22px 20px; border-radius: 16px; background: #faf7f5; }
.article-body .cuel-chat { display: flex; margin: 0 0 14px; }
.article-body .cuel-chat:last-child { margin-bottom: 0; }
.article-body .cuel-chat p { margin: 0; max-width: 82%; padding: 13px 18px; border-radius: 16px; font-size: 14.5px; line-height: 1.85; }
.article-body .cuel-chat.is-nav p { background: #fff; border: 1px solid #ece8e5; }
.article-body .cuel-chat.is-guest { justify-content: flex-end; }
.article-body .cuel-chat.is-guest p { background: var(--orange); color: #fff; }
.article-body .cuel-prompt-group { margin: 32px 0; }
.article-body .cuel-prompt { margin-bottom: 12px; }
.article-body .cuel-prompt pre { margin: 0; padding: 16px 18px; border-radius: 12px; background: #1f2733; color: #e8eaed; font-size: 13px; line-height: 1.8; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.article-body .cuel-prompt.is-ai pre { background: #f2f4f7; color: #333a44; }
@media (max-width: 760px) {
.article-body .cuel-point { padding: 18px 18px; }
.article-body .cuel-chat-group { padding: 16px 14px; }
.article-body .cuel-chat p { max-width: 90%; font-size: 14px; }
}
@media (max-width: 760px) {
.fv-title { font-size: clamp(27px, 7.6vw, 31px); }
}
.hero-copy .fv-title {
margin: 0 0 24px;
color: var(--ink);
font-family: var(--font-serif);
font-size: clamp(32px, 3.25vw, 46px);
font-weight: 700;
line-height: 1.34;
letter-spacing: .1em;
}
@media (max-width: 760px) {
.hero-copy .fv-title { font-size: clamp(27px, 7.6vw, 31px); }
}
@media (max-width: 760px) {
.hero-points li {
padding-right: 3px;
padding-left: 3px;
font-size: 10px;
letter-spacing: -.02em;
word-break: auto-phrase;
}
}
.ig-strip { padding-top: 0; }
.ig-inner {
border-top: 1px solid var(--line);
padding-top: 40px;
}
.ig-head {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 28px;
}
.ig-account {
display: flex;
align-items: center;
gap: 14px;
}
.ig-avatar {
flex: none;
width: 48px;
height: 48px;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
object-fit: contain;
padding: 6px;
}
.ig-handle {
color: var(--ink);
font-family: var(--font-serif);
font-size: 20px;
font-weight: 700;
letter-spacing: -.02em;
text-decoration: none;
}
.ig-handle:hover { color: var(--orange); }
.ig-follow {
margin-left: auto;
flex: none;
border-radius: 999px;
padding: 11px 26px;
background: var(--orange-gloss);
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.ig-follow:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgb(255 92 50 / 28%);
}
.ig-feed { overflow: hidden; }
.ig-feed img { max-width: 100%; height: auto; }
.ig-more {
margin: 24px 0 0;
text-align: center;
}
.ig-more a {
color: var(--muted);
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
text-decoration: none;
}
.ig-more a:hover { color: var(--orange); }
.kyuerun {
display: flex;
align-items: flex-start;
gap: 14px;
}
.kyuerun-lead { margin: 30px 0 0; }
.kyuerun-next { margin: 52px 0 0; }
.kyuerun-face {
flex: none;
width: 72px;
height: auto;
margin-top: 6px;
}
.kyuerun-bubble {
position: relative;
flex: 1 1 auto;
padding: 18px 22px;
border: 1px solid var(--orange-soft);
border-radius: 16px;
background: var(--paper);
}
.kyuerun-bubble::before,
.kyuerun-bubble::after {
content: "";
position: absolute;
top: 26px;
width: 0;
height: 0;
border-style: solid;
}
.kyuerun-bubble::before {
left: -10px;
border-width: 8px 10px 8px 0;
border-color: transparent var(--orange-soft) transparent transparent;
}
.kyuerun-bubble::after {
left: -9px;
border-width: 8px 10px 8px 0;
border-color: transparent var(--paper) transparent transparent;
}
.kyuerun-bubble small {
display: block;
margin-bottom: 8px;
color: var(--orange-deep);
font-size: 11px;
font-weight: 900;
letter-spacing: .04em;
}
.kyuerun-bubble p {
margin: 0 0 8px;
color: #333a44;
font-size: 14px;
line-height: 1.95;
}
.kyuerun-bubble p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
.ig-inner { padding-top: 32px; }
.ig-head { gap: 14px; margin-bottom: 22px; }
.ig-avatar { width: 40px; height: 40px; padding: 5px; }
.ig-account { gap: 10px; }
.ig-handle { font-size: 18px; }
.ig-follow { padding: 9px 18px; font-size: 13px; }
.ig-more { margin-top: 20px; }
.kyuerun { gap: 10px; }
.kyuerun-face { width: 52px; margin-top: 4px; }
.kyuerun-lead { margin-top: 24px; }
.kyuerun-next { margin-top: 40px; }
.kyuerun-bubble { padding: 15px 17px; border-radius: 14px; }
.kyuerun-bubble::before,
.kyuerun-bubble::after { top: 20px; }
.kyuerun-bubble p { font-size: 13.5px; line-height: 1.9; }
}
.report-list-card.is-linked,
.report-list-card.is-linked > a { cursor: pointer; }
.report-card-meta > em {
margin-left: auto;
color: #8b9099;
font-size: 11px;
font-style: normal;
font-weight: 800;
}
.report-card-button {
display: inline-flex;
margin-top: auto;
padding: 11px 16px;
align-items: center;
align-self: flex-start;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--orange);
border-radius: 5px;
background: #fff;
color: var(--orange-deep);
font-size: 12px;
font-weight: 900;
transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.report-list-card summary b.report-card-button,
.report-list-card.is-linked b.report-card-button { border-top: 0; padding-top: 11px; }
.report-card-button i {
display: grid;
width: 20px;
height: 20px;
place-items: center;
border-radius: 50%;
background: #fff1ea;
font-size: 13px;
font-style: normal;
transition: background .2s ease, color .2s ease;
}
.report-list-card:hover .report-card-button {
background: var(--orange-gloss);
color: #fff;
box-shadow: 0 10px 20px rgb(255 92 50 / 22%);
}
.report-list-card:hover .report-card-button i { background: rgb(255 255 255 / 26%); color: #fff; }
.report-list-card[open] .report-card-button i { transform: rotate(45deg); }
@media (max-width: 760px) {
.report-card-meta > em { font-size: 10.5px; }
.report-card-button { padding: 10px 14px; font-size: 11.5px; }
.report-card-button i { width: 18px; height: 18px; font-size: 12px; }
}
.ccx-shorts header a { font-size: 12px; font-weight: 800; }
.ccx-shorts > div > article > span { margin-top: 11px; font-size: 12px; letter-spacing: .02em; }
.ccx-shorts > div > article > strong {
margin-top: 7px;
font-size: 14px;
font-weight: 800;
line-height: 1.6;
}
.ccx-shorts > div > article > small { margin-top: 7px; font-size: 12px; line-height: 1.65; }
.ccx-shorts > div > article > a { padding-top: 10px; font-size: 12px; }
@media (max-width: 760px) {
.ccx-shorts > div > article > span { font-size: 11.5px; }
.ccx-shorts > div > article > strong { font-size: 13.5px; }
.ccx-shorts > div > article > small { font-size: 11.5px; }
.ccx-shorts > div > article > a { font-size: 11.5px; }
}
.ccx-schedule > a:not(.ccx-all-link) { grid-template-columns: 112px 1fr auto; gap: 13px; padding: 11px 0; }
.ccx-schedule > a > figure { width: 112px; height: 63px; border-radius: 6px; }
.ccx-schedule > a > div > p {
display: flex;
margin: 0;
align-items: center;
gap: 9px;
flex-wrap: wrap;
}
.ccx-schedule > a > div > p > em {
padding: 3px 8px;
border-radius: 999px;
background: #fff1ea;
color: var(--orange-deep);
font-size: 10.5px;
font-style: normal;
font-weight: 900;
letter-spacing: .01em;
white-space: nowrap;
}
.ccx-schedule strong { margin-top: 6px; }
@media (max-width: 760px) {
.ccx-schedule > a:not(.ccx-all-link) { grid-template-columns: 96px 1fr auto; gap: 11px; }
.ccx-schedule > a > figure { width: 96px; height: 54px; }
.ccx-schedule > a > div > p { gap: 7px; }
.ccx-schedule > a > div > p > em { padding: 2px 7px; font-size: 10px; }
}
.ccx-teacher-grid figure { position: relative; }
.ccx-teacher-kyuerun {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .28s ease;
}
.ccx-teacher-grid .has-kyuerun:hover .ccx-teacher-kyuerun,
.ccx-teacher-grid .has-kyuerun:focus-within .ccx-teacher-kyuerun { opacity: 1; }
@media (hover: none) {
.ccx-teacher-kyuerun { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ccx-teacher-kyuerun { transition: none; }
}
.ccx-teacher-bio {
margin-top: 10px !important;
padding-top: 11px;
border-top: 1px solid #f1ece9;
color: #6f7681 !important;
font-size: 10.5px !important;
line-height: 1.85 !important;
}
.ccx-teacher-grid { grid-template-columns: repeat(3, 1fr); }
.ccx-teacher-grid figure { height: 232px; }
@media (max-width: 1080px) {
.ccx-teacher-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.ccx-teacher-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.ccx-teacher-grid figure { height: 178px; }
.ccx-teacher-bio { font-size: 10px !important; line-height: 1.8 !important; }
}
.ccx-shorts header { align-items: center; gap: 14px; }
.ccx-shorts-nav { display: flex; margin-left: auto; gap: 8px; }
.ccx-shorts-nav button {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid var(--orange-soft);
border-radius: 50%;
background: #fff;
color: var(--orange-deep);
font-size: 17px;
line-height: 1;
cursor: pointer;
transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.ccx-shorts-nav button:hover:not(:disabled) { background: var(--orange-gloss); color: #fff; }
.ccx-shorts-nav button:disabled { cursor: default; opacity: .32; }
.ccx-shorts-viewport {
display: flex !important;
gap: 14px;
overflow-x: auto !important;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin-right: -8px;
padding-right: 8px;
}
.ccx-shorts-viewport::-webkit-scrollbar { display: none; }
.ccx-shorts-viewport > article {
width: calc((100% - 42px) / 4);
flex: 0 0 calc((100% - 42px) / 4);
scroll-snap-align: start;
}
.ccx-shorts-viewport:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-width: 1080px) {
.ccx-shorts-viewport > article { width: calc((100% - 28px) / 3); flex-basis: calc((100% - 28px) / 3); }
}
@media (max-width: 760px) {
.ccx-shorts-viewport { gap: 12px; margin-right: -16px; padding-right: 16px; }
.ccx-shorts-viewport > article { width: 74vw; flex-basis: 74vw; }
.ccx-shorts-nav { display: none; }
}
.ccx-teacher-grid figure {
height: auto;
aspect-ratio: 1 / 1;
}
.ccx-teacher-grid img { object-position: center center; }
@media (max-width: 1080px) {
.ccx-teacher-grid figure { height: auto; aspect-ratio: 1 / 1; }
}
@media (max-width: 760px) {
.ccx-teacher-grid figure { height: auto; aspect-ratio: 5 / 4; }
}
.zemi-hero h1 { font-size: clamp(30px, 3.25vw, 46px); }
@media (max-width: 760px) {
.zemi-hero h1 { font-size: 28px; }
}
.report-archive-intro { padding-bottom: 0; }
.report-archive-intro + .report-featured { margin-top: 44px; }
@media (max-width: 760px) {
.report-archive-intro + .report-featured { margin-top: 30px; }
}
.report-archive > header h2 { font-size: clamp(28px, 3vw, 38px); }
@media (max-width: 760px) {
.report-archive > header h2 { font-size: 26px; }
}
.hero-copy h1,
.contact-hero h1,
.faq-page-hero h1,
.legal-hero h1,
.zemi-hero h1 { font-size: clamp(32px, 3.25vw, 46px); }
.ccx-title h2,
.ccx-final h2,
.cnx3-heading h2,
.cnx3-final h2,
.biz-heading h2,
.contact-form-heading h2,
.faq-contact h2 { font-size: clamp(32px, 3.25vw, 46px); }
@media (max-width: 760px) {
.hero-copy h1,
.contact-hero h1,
.faq-page-hero h1,
.legal-hero h1,
.zemi-hero h1,
.ccx-title h2,
.ccx-final h2,
.cnx3-heading h2,
.cnx3-final h2,
.biz-heading h2,
.contact-form-heading h2,
.faq-contact h2 { font-size: 28px; }
}
#sbi_load,
#sb_instagram .sbi_follow_btn { display: none !important; }
.philosophy-section {
align-items: center;
grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
}
.philosophy-photo {
height: auto;
min-height: 0;
align-self: center;
aspect-ratio: 1122 / 1402;   
}
.philosophy-copy,
.philosophy-copy p { max-width: 660px; }
@media (max-width: 760px) {
.philosophy-section { grid-template-columns: 1fr; }
.philosophy-photo { min-height: 0; aspect-ratio: 16 / 11; }
.philosophy-copy,
.philosophy-copy p { max-width: none; }
}
.ccx-walk-section {
--gap: 296px;              
--band: #eceff6;           
position: relative;
width: 100%;
padding: 0 0 56px;
background: linear-gradient(180deg, #f4f2f1 0%, #fff6ef 13%, #ffece0 52%, #ffe3d3 100%);
overflow: hidden;
}
.ccx-walk-section::before {
position: absolute;
top: -186px;
left: -34%;
width: 168%;
height: 340px;
background: linear-gradient(180deg, var(--band) 0%, var(--band) 62%, rgb(236 239 246 / 0%) 100%);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
content: "";
}
.ccx-walk-head {
position: relative;
z-index: 2;
width: min(100% - 112px, 700px);
margin: 0 auto;
padding-top: 92px;
text-align: center;
}
.ccx-walk-head .ccx-title h2 { margin-top: 11px; font-size: clamp(30px, 3.2vw, 46px); }
.ccx-walk-head > p {
margin: 18px 0 0;
color: #4d545f;
font-size: 16px;          
line-height: 1.95;
}
.ccx-walk-head .ccx-badges { margin-top: 20px; justify-content: center; }
.ccx-walk-actions { display: flex; margin: 26px 0 0; justify-content: center; }
.ccx-walk-stage {
position: relative;
height: 470px;
margin-top: 30px;
overflow: hidden;         
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ccx-walk-track { position: absolute; inset: 0; will-change: transform; }
.ccx-walk-track::after {
position: absolute;
bottom: 64px;
left: 50%;
width: 12000px;
margin-left: -6000px;
border-top: 2px dashed rgb(224 150 112 / 45%);
content: "";
}
.ccx-walk-item {
position: absolute;
bottom: 52px;
left: 50%;
display: flex;
width: 260px;
margin-left: -130px;
flex-direction: column;
align-items: center;
transform: translateX(calc(var(--i) * var(--gap) * -1));
}
.ccx-walk-label {
position: relative;
margin-bottom: 14px;
padding: 0;
text-align: center;
transition: background .34s ease, padding .34s ease, box-shadow .34s ease;
}
.ccx-walk-item.is-on .ccx-walk-label {
padding: 18px 24px 20px;
background: #fff;
border-radius: 18px;
box-shadow: 0 16px 38px rgb(120 60 35 / 14%);
}
.ccx-walk-item.is-on .ccx-walk-label::after {
position: absolute;
bottom: -9px;
left: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
transform: rotate(45deg);
background: #fff;
border-radius: 0 0 4px 0;
content: "";
}
.ccx-walk-label > span { color: var(--orange); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.ccx-walk-label > strong {
display: block;
margin-top: 5px;
color: var(--ink);
font-size: 15px;
font-weight: 850;
line-height: 1.45;
}
.ccx-walk-detail {
width: 340px;
max-height: 0;
margin: 0 auto;
opacity: 0;
overflow: hidden;
transition: max-height .4s ease, opacity .32s ease, margin-top .4s ease;
}
.ccx-walk-item.is-on .ccx-walk-detail { max-height: 190px; margin-top: 10px; opacity: 1; }
.ccx-walk-detail p { margin: 0; color: #4f565f; font-size: 13.5px; line-height: 1.8; }
.ccx-walk-facts { display: flex; margin: 11px 0 0; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ccx-walk-facts div { display: flex; align-items: baseline; gap: 7px; }
.ccx-walk-facts dt { color: #8a6a5b; font-size: 10.5px; font-weight: 800; }
.ccx-walk-facts dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 850; }
.ccx-walk-figure {
width: 138px;
height: 138px;
background-position: center bottom;
background-size: contain;
background-repeat: no-repeat;
transition: width .4s ease, height .4s ease, filter .4s ease;
filter: saturate(.9) opacity(.8);
}
.ccx-walk-item.is-on .ccx-walk-figure {
width: 202px;
height: 202px;
filter: none;
transform-origin: bottom center;
animation: ccx-walk-pop 1.15s cubic-bezier(.32,.02,.28,1) 1;
}
@keyframes ccx-walk-pop {
0%   { transform: translateY(0)     scale(1, 1); }
10%  { transform: translateY(4px)   scale(1.06, .94); }   
42%  { transform: translateY(-62px) scale(.94, 1.07); }   
56%  { transform: translateY(-66px) scale(1, 1); }        
82%  { transform: translateY(0)     scale(1.05, .95); }   
92%  { transform: translateY(-6px)  scale(1, 1); }
100% { transform: translateY(0)     scale(1, 1); }
}
.ccx-walk-item:not(.is-on) .ccx-walk-figure {
animation: ccx-walk-idle 2.6s ease-in-out infinite;
animation-delay: calc(var(--i) * .23s);
}
@keyframes ccx-walk-idle {
0%, 100% { transform: translateY(0) rotate(-1.2deg); }
50%      { transform: translateY(-9px) rotate(1.2deg); }
}
.ccx-walk-nav { position: relative; z-index: 2; display: flex; margin-top: 22px; align-items: center; justify-content: center; gap: 18px; }
.ccx-walk-nav button.ccx-walk-arrow {
display: flex;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
padding: 0;
background: #fff;
border: 1px solid #f0d3c4;
border-radius: 50%;
color: var(--orange);
font-size: 14px;
cursor: pointer;
}
.ccx-walk-dots { display: flex; gap: 7px; }
.ccx-walk-dots button {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgb(196 118 84 / 30%);
cursor: pointer;
transition: background .25s ease, transform .25s ease;
}
.ccx-walk-dots button[aria-current="true"] { background: var(--orange); transform: scale(1.5); }
.ccx-walk-nav button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.ccx-walk-note { position: relative; z-index: 2; margin: 18px 0 0; color: #8a6a5b; font-size: 12px; text-align: center; }
.ccx-walk-fallback {
display: grid;
width: min(100% - 112px, 1000px);
margin: 40px auto 0;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px 22px;
}
.ccx-walk-fallback li { display: flex; align-items: center; gap: 11px; color: #4f565f; font-size: 14px; }
.ccx-walk-fallback i { width: 40px; height: 40px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.ccx-walk-live { display: none; }
.ccx-walk-is-live .ccx-walk-live { display: block; }
.ccx-walk-is-live .ccx-walk-fallback { display: none; }
@media (max-width: 900px) {
.ccx-walk-section { --gap: 280px; }
.ccx-walk-section::before { top: -120px; left: -30%; width: 160%; height: 220px; }
.ccx-walk-head { padding-top: 64px; }
.ccx-walk-stage {
height: 452px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ccx-walk-item { width: 196px; margin-left: -98px; }
.ccx-walk-item:not(.is-on) .ccx-walk-label { display: none; }
.ccx-walk-detail { width: min(88vw, 320px); }
.ccx-walk-figure { width: 104px; height: 104px; }
.ccx-walk-item.is-on .ccx-walk-figure { width: 152px; height: 152px; }
}
@media (prefers-reduced-motion: reduce) {
.ccx-walk-item:not(.is-on) .ccx-walk-figure,
.ccx-walk-item.is-on .ccx-walk-figure { animation: none; }
.ccx-walk-track,
.ccx-walk-figure,
.ccx-walk-detail { transition: none; }
}
.ccx-teachers-band { background: #eceff6; }
.ccx-teachers-band .ccx-row-heading > p { font-size: 16px; }
.ccx-teachers-band .ccx-teacher-grid p { font-size: 13px; }
.ccx-teachers-band .ccx-teacher-bio { font-size: 13px !important; line-height: 1.85 !important; }
.ccx-row-heading > p,
.ccx-report-heading > div:last-child p,
.ccx-platform-copy > p,
.ccx-supports-lead { font-size: 16px; }
.ccx-reasons p,
.ccx-teacher-grid p { font-size: 13px; }
@media (max-width: 760px) {
.ccx-row-heading > p,
.ccx-report-heading > div:last-child p,
.ccx-platform-copy > p,
.ccx-supports-lead { font-size: 15px; }
.ccx-reasons p,
.ccx-teacher-grid p { font-size: 12.5px; }
}
@media (min-width: 761px) {
.course-shelf { padding-top: 48px; }
}
@media (max-width: 760px) {
.course-shelf { padding-top: 38px; }
}
section + .course-shelf { margin-top: 34px; }
@media (max-width: 760px) {
section + .course-shelf { margin-top: 24px; }
}
@media (min-width: 821px) {
.college-page .college-header,
.cnx-page .cnx-header {
padding-right: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
padding-left: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
}
}
.philosophy-copy h2.philosophy-headline {
margin: 0 0 32px;
line-height: 0;   
}
.philosophy-headline img {
display: block;
width: min(100%, 380px);   
height: auto;
}
.ink-ready .philosophy-headline img { clip-path: inset(0 100% 0 0); }
.ink-ready .philosophy-headline.is-inked img {
clip-path: inset(0 -2% 0 0);
transition: clip-path 1.15s cubic-bezier(.42, .1, .3, 1);
}
.mk {
padding: 0 .1em;
margin: 0 -.1em;
border-radius: 1px;
background-image: linear-gradient(
to top,
rgb(253 139 127 / 0%) 3%,
rgb(253 139 127 / 44%) 13%,
rgb(253 139 127 / 44%) 84%,
rgb(253 139 127 / 0%) 100%
);
background-repeat: no-repeat;
background-position: 0 78%;
background-size: 100% .95em;   
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.ink-ready .mk { background-size: 0 .95em; }
.ink-ready .mk.is-inked {
background-size: 100% .95em;
transition: background-size .72s cubic-bezier(.25, .7, .35, 1) .08s;
}
@media (max-width: 760px) {
.philosophy-copy h2.philosophy-headline { margin-bottom: 24px; }
.philosophy-headline img { width: 100%; }
}
.hero + .stats-band { margin-top: 30px; }
@media (max-width: 760px) {
.hero + .stats-band { margin-top: 48px; }
}
.ccx-hero.fv,
.cnx3-hero.fv {
position: relative;
width: 100%;
max-width: none;
padding-left: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2));
grid-template-columns: minmax(0, 44%) minmax(0, 56%);
min-height: 560px;
isolation: isolate;
overflow: hidden;
}
.ccx-hero .fv-copy,
.cnx3-hero .fv-copy { z-index: 2; padding-right: clamp(20px, 2.6vw, 52px); }
.ccx-hero .fv-copy > *,
.cnx3-hero .fv-copy > * { max-width: 560px; }
.ccx-hero .fv-figure,
.cnx3-hero .fv-figure { position: relative; height: 100%; min-height: 560px; }
.ccx-hero .fv-figure::after,
.cnx3-hero .fv-figure::after {
position: absolute;
z-index: 2;
inset: 0;
content: "";
pointer-events: none;
}
.ccx-hero .fv-figure::after {
background:
linear-gradient(
90deg,
rgb(255 242 231 / 100%) 0,
rgb(255 242 231 / 97%) 6%,
rgb(255 242 231 / 84%) 15%,
rgb(255 242 231 / 60%) 27%,
rgb(255 242 231 / 33%) 41%,
rgb(255 242 231 / 13%) 57%,
rgb(255 242 231 / 0%) 76%
),
linear-gradient(0deg, rgb(255 242 231 / 88%) 0, rgb(255 242 231 / 38%) 7%, rgb(255 242 231 / 0%) 20%),
linear-gradient(rgb(255 242 231 / 15%), rgb(255 242 231 / 15%));
}
.cnx3-hero .fv-figure::after {
background:
linear-gradient(
90deg,
rgb(238 243 250 / 100%) 0,
rgb(238 243 250 / 97%) 6%,
rgb(238 243 250 / 84%) 15%,
rgb(238 243 250 / 60%) 27%,
rgb(238 243 250 / 33%) 41%,
rgb(238 243 250 / 13%) 57%,
rgb(238 243 250 / 0%) 76%
),
linear-gradient(0deg, rgb(238 243 250 / 88%) 0, rgb(238 243 250 / 38%) 7%, rgb(238 243 250 / 0%) 20%),
linear-gradient(rgb(238 243 250 / 15%), rgb(238 243 250 / 15%));
}
.ccx-hero.fv { background: linear-gradient(100deg, #fff2e7 0%, #fff2e7 30%, #fff8f2 66%, #fffcfa 100%); }
.cnx3-hero.fv { background: linear-gradient(100deg, #eef3fa 0%, #eef3fa 30%, #f6f9fd 66%, #fcfdfe 100%); }
@media (max-width: 900px) {
.ccx-hero.fv,
.cnx3-hero.fv {
padding-left: 0;
grid-template-columns: 1fr;
min-height: 0;
}
.ccx-hero .fv-copy > *,
.cnx3-hero .fv-copy > * { max-width: none; }
.ccx-hero .fv-figure,
.cnx3-hero .fv-figure { min-height: 0; }
.ccx-hero .fv-figure::after {
background:
linear-gradient(180deg, rgb(255 242 231 / 96%) 0, rgb(255 242 231 / 62%) 12%, rgb(255 242 231 / 24%) 28%, rgb(255 242 231 / 0%) 48%),
linear-gradient(rgb(255 242 231 / 12%), rgb(255 242 231 / 12%));
}
.cnx3-hero .fv-figure::after {
background:
linear-gradient(180deg, rgb(238 243 250 / 96%) 0, rgb(238 243 250 / 62%) 12%, rgb(238 243 250 / 24%) 28%, rgb(238 243 250 / 0%) 48%),
linear-gradient(rgb(238 243 250 / 12%), rgb(238 243 250 / 12%));
}
.ccx-hero.fv { background: linear-gradient(180deg, #fff2e7 0%, #fffcfa 60%); }
.cnx3-hero.fv { background: linear-gradient(180deg, #eef3fa 0%, #fcfdfe 60%); }
}
.ccx-vrail {
width: 100vw;
margin-inline: calc(50% - 50vw);
margin-top: 40px;
}
.ccx-vrail-lane {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ccx-vrail-track {
display: flex;
width: max-content;
padding: 6px 0 26px;
gap: 22px;
--vrail-half-gap: 11px;
animation: ccx-vrail-flow 78s linear infinite;
}
@keyframes ccx-vrail-flow { to { transform: translateX(calc(-50% - var(--vrail-half-gap, 11px))); } }
.ccx-vrail:hover .ccx-vrail-track,
.ccx-vrail:focus-within .ccx-vrail-track { animation-play-state: paused; }
.ccx-vrail-card {
display: flex;
width: clamp(288px, 25vw, 352px);
flex: 0 0 auto;
flex-direction: column;
overflow: hidden;
border: 1px solid #eee3dc;
border-radius: 18px 18px 30px;
background: #fff;
box-shadow: 0 16px 40px rgb(51 43 38 / 6%);
}
.ccx-vrail-card > figure { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.ccx-vrail-card > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ccx-vrail-card > figure b {
position: absolute;
bottom: 12px;
left: 12px;
padding: 5px 11px;
border-radius: 999px;
background: rgb(255 255 255 / 92%);
color: var(--orange-deep);
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
}
.ccx-vrail-card > div { display: flex; padding: 22px 22px 26px; flex: 1; flex-direction: column; }
.ccx-vrail-card span { color: #8b8078; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ccx-vrail-card h3 { margin: 10px 0 12px; color: var(--ink); font-size: 17px; line-height: 1.6; letter-spacing: .01em; }
.ccx-vrail-card p { margin: 0; color: #545c66; font-size: 13px; line-height: 1.95; }
@media (prefers-reduced-motion: reduce) {
.ccx-vrail-track { animation: none; width: auto; }
.ccx-vrail-lane { overflow-x: auto; scrollbar-width: none; }
.ccx-vrail-lane::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
.ccx-vrail { margin-top: 28px; }
.ccx-vrail-track { gap: 14px; padding-bottom: 20px; animation-duration: 96s; --vrail-half-gap: 7px; }
.ccx-vrail-card { width: clamp(258px, 72vw, 300px); }
.ccx-vrail-card h3 { font-size: 16px; }
.ccx-vrail-card p { font-size: 12.5px; }
}
.ccx-shorts header span {
color: var(--ink);
font-size: 15px;
font-weight: 900;
letter-spacing: .04em;
}
@media (max-width: 760px) {
.ccx-shorts header span { font-size: 14px; }
}
:where(section[id], article[id]) { scroll-margin-top: 90px; }
@media (max-width: 760px) {
:where(section[id], article[id]) { scroll-margin-top: 78px; }
}
@media (max-width: 760px) {
.course-all,
.faq-more,
.ccx-all-link,
.ccx-next-live a,
.report-list-detail a,
.report-featured a,
.ig-account a,
.story-stream-heading button,
a[data-cuel-contact-type],
.shared-footer-bottom div a {
display: inline-flex;
min-height: 44px;
align-items: center;
}
.cnx-quadrant-note a,
.cnx3-final-note a,
.contact-consent span a { padding-block: 16px; }
.report-controls button,
.cnx-job-nav button,
.ccx-walk-nav button.ccx-walk-arrow { width: 44px; height: 44px; }
.cuel-float-close { width: 40px; height: 40px; }
.ccx-walk-nav { gap: 10px; }
.ccx-walk-dots { gap: 0; }
.ccx-walk-dots button {
display: grid;
width: 17px;
height: 40px;
place-content: center;
background: transparent;
transform: none;
}
.ccx-walk-dots button::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgb(196 118 84 / 30%);
content: "";
transition: background .25s ease, transform .25s ease;
}
.ccx-walk-dots button[aria-current="true"] { background: transparent; transform: none; }
.ccx-walk-dots button[aria-current="true"]::before { background: var(--orange); transform: scale(1.5); }
}
@media (max-width: 760px) {
.news-card-meta time { font-size: 11px; }
.news-card-meta i { font-size: 10.5px; }
.shared-footer-bottom span { font-size: 11px; }
.shared-footer-intro dl dt { font-size: 10px; }
.shared-footer-en { font-size: 10px; }
}
@media (max-width: 640px) {
.hero-art::before {
background:
linear-gradient(
90deg,
rgb(255 255 255 / 96%) 0,
rgb(255 255 255 / 80%) 48%,
rgb(255 255 255 / 56%) 70%,
rgb(255 255 255 / 22%) 87%,
transparent 98%
),
linear-gradient(0deg, #fff 0, transparent 29%);
}
.hero-copy .fv-title,
.hero-lead {
text-shadow: 0 0 12px rgb(255 255 255 / 92%), 0 0 5px rgb(255 255 255 / 92%);
}
}
.button,
.cta,
.ccx-button,
.cnx-button,
.ccx-report-mobile-link,
.contact-form-section form > button,
.biz-contact form > button,
.mobile-bridge-cta > div > a,
.news-motion-intro > a,
.ccx-access-grid > article > a,
.ccx-seminar-panel-copy > a,
.cnx-job-track > article > a,
.biz-public-expansion > a {
justify-content: center;
gap: 14px;
}
@media (max-width: 640px) {
.proof-grid { gap: 18px; }
.proof-grid article {
flex-direction: row;
align-items: center;
gap: 14px;
text-align: left;
}
.proof-emblem { width: 108px; height: 108px; }
.proof-emblem-text { padding: 0 12px; font-size: 10.5px; }
.proof-grid p { font-size: 12px; line-height: 1.8; }
}
@media (max-width: 760px) {
.philosophy-photo { aspect-ratio: 1 / 1; }
.philosophy-photo img { object-position: 61% top; }
}
@media (max-width: 760px) {
.cta-content > p { font-size: 13px; line-height: 1.85; }
}
@media (max-width: 900px) {
.ccx-hero .fv-copy,
.cnx3-hero .fv-copy { padding-inline: 24px; }
}
@media (max-width: 820px) {
.cnx3-features .cnx3-feature-copy {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.cnx3-feature-copy > span {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 34px;
line-height: 1;
}
.cnx3-feature-copy > span small { margin-top: 0; }
}
@media (max-width: 820px) {
h1, h2, h3,
.fv-title, .cnx3-heading h2, .ccx-heading h2, .section-title h2 {
word-break: auto-phrase;
text-wrap: balance;
}
}
@media (max-width: 820px) {
.cnx-quadrant { grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; }
.cnx-quadrant-vaxis { display: flex; font-size: 9.5px; }
.cnx-quadrant-haxis { display: flex; font-size: 9.5px; }
.cnx-quadrant-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-auto-rows: 1fr;
gap: 8px;
}
.cnx-quadrant-grid::before,
.cnx-quadrant-grid::after { display: block; }
.cnx-quadrant-grid > article { padding: 12px 10px; }
.cnx-quadrant-grid > article > small { font-size: 9px; }
.cnx-quadrant-grid > article > h3 { font-size: 13px; line-height: 1.4; }
.cnx-quadrant-grid > article > p,
.cnx-quadrant-grid > article > ul { display: none; }
.cnx-quadrant-grid > article > footer span { font-size: 9px; }
.cnx-quadrant-grid > article > footer strong { font-size: 13px; }
}