/* ========================================================================= Ryan Engley — Homepage + expandable navigation Built on the brand design tokens (colors_and_type.css). ========================================================================= */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } :root { --nav-h: 72px; } /* ---------- layout ---------- */ .re-section { position: relative; } .re-section.alt { background: var(--cream-deep); } .re-container { max-width: 1080px; margin: 0 auto; padding: 88px 32px; } .re-sec-head { margin-bottom: 44px; max-width: 720px; } .re-sec-head.center { text-align: center; margin-left: auto; margin-right: auto; } .re-h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin-top: 14px; } .re-sec-sub { font-size: 16px; color: var(--ink-50); font-weight: 500; margin-top: 12px; } .re-eyebrow { font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); } .re-body { font-size: 17px; line-height: 1.65; color: var(--ink-70); margin-bottom: 16px; } .re-body strong { color: var(--ink); font-weight: 700; } /* ---------- blobs ---------- */ .re-blob { pointer-events: none; transition: opacity .4s var(--ease-soft); } /* blob density is applied by toggling a class on */ body.blob-none .re-blob { opacity: 0 !important; } body.blob-subtle .re-blob { opacity: 0.45 !important; } /* lush = use each blob's own inline opacity (default) */ /* ---------- buttons ---------- */ .re-btn { font-family: var(--font-sans); font-weight: 700; font-size: 16px; border: none; cursor: pointer; border-radius: 999px; padding: 15px 30px; transition: transform .18s var(--ease-soft), background .18s, box-shadow .18s, color .18s; display: inline-flex; align-items: center; gap: 8px; } .re-btn:active { transform: scale(0.97); } .re-btn-primary { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-cta); } .re-btn-primary:hover { background: var(--gold-strong); transform: translateY(-2px); } .re-btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .re-btn-secondary:hover { background: var(--ink); color: var(--cream); } .re-btn-sage { background: var(--sage); color: #fff; } .re-btn-sage:hover { background: var(--sage-deep); } .re-btn-text { background: none; color: var(--sage-deep); padding: 15px 8px; } .re-btn-text:hover { color: var(--ink); } /* ---------- badge ---------- */ .re-badge { width: 56px; height: 56px; border-radius: 999px; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; color: var(--ink); background: #fff; flex: 0 0 auto; } .re-badge.filled { background: var(--gold); } /* ---------- card ---------- */ .re-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 28px; } /* ========================================================================= NAVIGATION ========================================================================= */ .re-nav { position: sticky; top: 0; z-index: 60; background: rgba(248,247,240,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .re-nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; height: var(--nav-h); display: flex; align-items: center; gap: 28px; } /* brand lockup */ .re-lock { display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 0 0 auto; } .re-lock-mark { width: 42px; height: 42px; border-radius: 999px; background: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; color: var(--ink); flex: 0 0 auto; } .re-lock-text { line-height: 1; display: flex; flex-direction: column; gap: 4px; } .re-lock-name { font-weight: 900; font-size: 18px; letter-spacing: -0.01em; } .re-lock-sub { font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); } /* primary links row */ .re-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 18px; } .re-nav-item { position: relative; } .re-nav-link { background: none; border: none; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-70); cursor: pointer; padding: 9px 15px; border-radius: 999px; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; } .re-nav-link:hover, .re-nav-item.open .re-nav-link { background: var(--celadon); color: var(--ink); } .re-nav-caret { width: 12px; height: 12px; transition: transform .2s var(--ease-soft); } .re-nav-item.open .re-nav-caret { transform: rotate(180deg); } .re-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .re-nav-ghost { background: none; border: none; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink-70); cursor: pointer; padding: 9px 6px; transition: color .15s; } .re-nav-ghost:hover { color: var(--ink); } /* ---- DROPDOWN style: small menu card ---- */ .re-dd { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 10px; z-index: 70; transform-origin: top left; animation: ddPop .18s var(--ease-soft); } @keyframes ddPop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } } .re-dd-item { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-radius: var(--r-md); cursor: pointer; transition: background .14s; } .re-dd-item:hover { background: var(--cream-deep); } .re-dd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .re-dd-label { font-size: 15px; font-weight: 700; color: var(--ink); } .re-dd-desc { font-size: 12.5px; color: var(--ink-50); line-height: 1.4; } .re-dd-divider { height: 1px; background: var(--line); margin: 8px 6px; } .re-dd-group { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); padding: 8px 14px 4px; } .re-pill-new { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-deep); background: var(--celadon); padding: 3px 8px; border-radius: 999px; } .re-pill-soon { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50); background: var(--cream-deep); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; } .re-dd-arrow { color: var(--sage); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: .15s; } .re-dd-item:hover .re-dd-arrow { opacity: 1; transform: translateX(0); } /* ---- MEGA style: wide multi-column panel ---- */ .re-mega { position: absolute; top: calc(100% + 10px); left: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 26px; z-index: 70; display: grid; gap: 28px; animation: ddPop .2s var(--ease-soft); } .re-mega.cols-2 { grid-template-columns: 1fr 1fr; min-width: 620px; } .re-mega.cols-1 { grid-template-columns: 1fr; min-width: 340px; } .re-mega-col-head { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); margin-bottom: 14px; } .re-mega-item { display: flex; gap: 14px; padding: 12px; border-radius: var(--r-md); cursor: pointer; transition: background .14s; align-items: flex-start; } .re-mega-item:hover { background: var(--cream-deep); } .re-mega-ic { width: 38px; height: 38px; border-radius: 999px; background: var(--celadon); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--sage-deep); } .re-mega-ic.gold { background: var(--gold); color: var(--ink); } .re-mega-item-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .re-mega-item-desc { font-size: 12.5px; color: var(--ink-50); line-height: 1.45; margin-top: 3px; } /* ---- OVERLAY style ---- */ .re-burger { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; } .re-burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s var(--ease-soft); } .re-overlay { position: fixed; inset: 0; z-index: 90; background: var(--cream); animation: reFade .26s ease; overflow-y: auto; } .re-overlay-inner { max-width: 1080px; margin: 0 auto; padding: 28px 32px 64px; } .re-overlay-top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); } .re-overlay-x { background: none; border: none; font-size: 36px; line-height: 1; color: var(--ink); cursor: pointer; } .re-overlay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 40px; } .re-overlay-group-head { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); margin-bottom: 18px; } .re-overlay-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 700; color: var(--ink); cursor: pointer; transition: color .15s, padding .2s var(--ease-soft); } .re-overlay-link:hover { color: var(--sage-deep); padding-left: 8px; } .re-overlay-link small { font-size: 13px; font-weight: 500; color: var(--ink-50); } @keyframes reFade { from { opacity: 0; } } /* ========================================================================= HERO — 3 variants ========================================================================= */ .re-hero-eyebrow { margin-bottom: 14px; } .re-hero-lead { font-size: 20px; line-height: 1.6; color: var(--ink-70); } .re-hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; } .re-hero-proof { margin-top: 26px; font-size: 15px; color: var(--ink-50); } .re-hero-proof strong { color: var(--ink); font-weight: 900; } .re-hero-title .accent { color: var(--sage); } /* variant A — split */ .re-hero-a .re-hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: center; } .re-hero-a .re-hero-title { font-weight: 900; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 22px; } .re-hero-a .re-hero-lead { max-width: 32ch; } .re-hero-photo-wrap { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .re-hero-photo { position: relative; z-index: 1; width: 78%; aspect-ratio: 1; object-fit: cover; border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%; border: 6px solid var(--cream); } /* variant B — centered */ .re-hero-b { text-align: center; } .re-hero-b .re-hero-inner { max-width: 880px; margin: 0 auto; } .re-hero-b .re-hero-title { font-weight: 900; font-size: clamp(48px, 8vw, 104px); line-height: 0.98; letter-spacing: -0.035em; margin: 8px 0 26px; } .re-hero-b .re-hero-lead { max-width: 44ch; margin: 0 auto; } .re-hero-b .re-hero-cta { justify-content: center; } .re-hero-b .re-hero-photo-strip { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 48px; } .re-hero-b-photo { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; border: 4px solid var(--white); box-shadow: var(--shadow-md); } /* variant C — editorial / asymmetric overlap */ .re-hero-c .re-hero-grid { display: grid; grid-template-columns: 1fr 0.7fr; gap: 0; align-items: stretch; } .re-hero-c .re-hero-copy { padding: 20px 0; align-self: center; position: relative; z-index: 2; } .re-hero-c .re-hero-title { font-weight: 900; font-size: clamp(44px, 7vw, 88px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 22px; } .re-hero-c .re-hero-title .accent { display: inline-block; background: var(--gold); color: var(--ink); padding: 0 12px; border-radius: var(--r-sm); transform: rotate(-1.5deg); } .re-hero-c .re-hero-lead { max-width: 34ch; } .re-hero-c .re-hero-photo-wrap { margin-left: -40px; } .re-hero-c .re-hero-photo { width: 100%; border-radius: 58% 42% 48% 52% / 55% 50% 50% 45%; } /* ========================================================================= PAGE SECTIONS (long-scroll content from the one-pager) ========================================================================= */ .re-ps { display: flex; flex-direction: column; gap: 16px; } .re-ps-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .re-ps-prob { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 24px; font-size: 16px; color: var(--ink-70); font-style: italic; } .re-ps-arrow { color: var(--gold-strong); font-size: 30px; font-weight: 700; } .re-ps-sol { background: var(--celadon); border-radius: var(--r-md); padding: 20px 24px; font-size: 16px; font-weight: 600; color: var(--ink); } .re-persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .re-persona { display: flex; flex-direction: column; gap: 16px; } .re-persona-title { font-size: 19px; font-weight: 700; line-height: 1.3; } .re-persona-desc { font-size: 15px; line-height: 1.55; color: var(--ink-70); } .re-persona-routes { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; } .re-route-card { display: flex; align-items: center; gap: 18px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px 24px; cursor: pointer; transition: transform .2s var(--ease-soft), box-shadow .2s; } .re-route-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .re-route-ic { width: 48px; height: 48px; border-radius: 999px; background: var(--celadon); color: var(--sage-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .re-route-body { flex: 1; } .re-route-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .re-route-desc { font-size: 14px; color: var(--ink-50); margin-top: 3px; } .re-route-go { color: var(--sage); font-weight: 700; font-size: 22px; } .re-skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; } .re-skill { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 500; } .re-skill-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--gold); flex: 0 0 auto; } .re-road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .re-road-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .re-road-title { font-size: 20px; font-weight: 700; } .re-road-when { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); margin-top: 4px; } .re-road-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .re-road-list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--ink-70); } .re-road-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 999px; border: 2px solid var(--sage); } .re-logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; justify-items: center; gap: 28px 40px; } .re-logo-img { height: 26px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: opacity .2s; } .re-logo-img:hover { opacity: 0.9; } @media (max-width: 760px) { .re-logo-wall { grid-template-columns: repeat(3, 1fr); gap: 28px 32px; } } .re-about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; } .re-about-photo-wrap { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; } .re-about-photo { position: relative; z-index: 1; width: 82%; aspect-ratio: 1; object-fit: cover; border-radius: 999px; border: 6px solid var(--cream); } .re-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .re-quote { display: flex; flex-direction: column; } .re-quote-mark { font-size: 56px; line-height: 0.7; font-weight: 900; color: var(--gold); height: 30px; } .re-quote-text { font-size: 15px; line-height: 1.6; color: var(--ink-70); margin: 14px 0 22px; } .re-quote-by { display: flex; flex-direction: column; gap: 3px; margin-top: auto; } .re-quote-name { font-weight: 700; font-size: 15px; } .re-quote-role { font-size: 13px; color: var(--ink-50); } .re-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; } .re-stat-num { font-weight: 900; font-size: clamp(56px, 8vw, 84px); line-height: 1; letter-spacing: -0.03em; color: var(--sage); } .re-stat-label { font-size: 16px; color: var(--ink-70); margin-top: 14px; max-width: 22ch; margin-left: auto; margin-right: auto; line-height: 1.45; } .re-stats-foot { text-align: center; margin-top: 44px; font-size: 16px; color: var(--ink-50); } .re-stats-foot strong { color: var(--ink); font-weight: 700; } .re-price-card { padding: 40px; } .re-price-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--line); } .re-price-num { font-weight: 900; font-size: clamp(40px, 6vw, 58px); letter-spacing: -0.02em; line-height: 1; } .re-price-num span { font-size: 20px; font-weight: 700; color: var(--ink-50); } .re-price-note { font-size: 15px; color: var(--ink-50); margin-top: 8px; } .re-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; } .re-price-label { font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; } .re-price-grid p { font-size: 14px; line-height: 1.55; color: var(--ink-70); } .re-footer { background: var(--ink); color: var(--cream); } .re-footer .re-container { padding-top: 72px; padding-bottom: 48px; } .re-footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.14); } .re-footer-title { font-weight: 900; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.02em; } .re-footer-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 32px; } .re-footer .re-lock-sub { color: var(--gold); } .re-footer .re-lock-name { color: var(--cream); } .re-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; } .re-footer-col h4 { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .re-footer-col a { display: block; font-size: 15px; color: rgba(248,247,240,0.82); padding: 6px 0; transition: color .15s; } .re-footer-col a:hover { color: var(--gold); } /* ========================================================================= MODAL (discovery call) ========================================================================= */ .re-modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(26,26,26,0.46); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: reFade .2s ease; } .re-modal { position: relative; background: var(--cream); border-radius: var(--r-xl); width: 100%; max-width: 540px; padding: 40px; box-shadow: var(--shadow-lg); animation: reRise .28s var(--ease-soft); } @keyframes reRise { from { opacity: 0; transform: translateY(16px); } } .re-modal-x { position: absolute; top: 18px; right: 20px; background: none; border: none; font-size: 28px; line-height: 1; color: var(--ink-50); cursor: pointer; } .re-modal-x:hover { color: var(--ink); } .re-modal-title { font-weight: 700; font-size: 26px; letter-spacing: -0.02em; margin: 10px 0 24px; line-height: 1.15; } .re-modal-body.center { text-align: center; } .re-pay-options { display: flex; flex-direction: column; gap: 12px; } .re-pay-opt { display: flex; align-items: flex-start; gap: 14px; text-align: left; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; cursor: pointer; font-family: var(--font-sans); transition: border-color .15s, background .15s; } .re-pay-opt.sel { border-color: var(--gold); background: #fffdf3; } .re-pay-radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--neutral-light); flex: 0 0 auto; margin-top: 2px; transition: border-color .15s; position: relative; } .re-pay-opt.sel .re-pay-radio { border-color: var(--gold-strong); } .re-pay-opt.sel .re-pay-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--gold-strong); } .re-pay-title { display: block; font-weight: 700; font-size: 16px; } .re-pay-desc { display: block; font-size: 14px; color: var(--ink-50); margin-top: 3px; } .re-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; flex-wrap: wrap; } .re-field { margin-bottom: 16px; } .re-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-70); margin-bottom: 7px; } .re-field input { width: 100%; font-family: var(--font-sans); font-size: 16px; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink); transition: border-color .15s; } .re-field input:focus { outline: none; border-color: var(--gold); } .re-check { width: 64px; height: 64px; border-radius: 999px; background: var(--sage); color: #fff; font-size: 32px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } /* ---------- calendly overlay ---------- */ .re-cal-modal { position: relative; background: var(--cream); border-radius: var(--r-xl); width: 100%; max-width: 440px; max-height: 94vh; overflow-y: auto; padding: 22px; box-shadow: var(--shadow-lg); animation: reRise .28s var(--ease-soft); } .re-cal-head { padding: 4px 6px 16px; } .re-cal-title { font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin-top: 8px; } .re-cal-widget { min-width: 320px; height: 700px; overflow: hidden; border-radius: var(--r-md); } .re-cal-widget iframe { border-radius: var(--r-md); } @media (max-width: 600px) { .re-cal-modal { padding: 16px; } } /* ========================================================================= STATIC PAGES (stub pages — plain HTML, no React) ========================================================================= */ .re-snav { position: sticky; top: 0; z-index: 60; background: rgba(248,247,240,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .re-snav-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; height: var(--nav-h); display: flex; align-items: center; gap: 18px; } .re-snav-back { margin-left: 18px; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink-70); } .re-snav-back:hover { color: var(--ink); } .re-snav-right { margin-left: auto; } .re-page-hero { position: relative; overflow: hidden; } .re-page-hero .re-container { padding-top: 88px; padding-bottom: 64px; position: relative; z-index: 1; } .re-kicker { display: inline-flex; align-items: center; gap: 9px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 999px; padding: 8px 16px 8px 10px; font-size: 13px; font-weight: 700; color: var(--ink-70); margin-bottom: 22px; } .re-kicker .dot { width: 24px; height: 24px; border-radius: 999px; background: var(--celadon); color: var(--sage-deep); display: flex; align-items: center; justify-content: center; } .re-kicker.gold .dot { background: var(--gold); color: var(--ink); } .re-page-title { font-weight: 900; font-size: clamp(40px, 6vw, 76px); line-height: 1.0; letter-spacing: -0.03em; max-width: 16ch; } .re-page-title .accent { color: var(--sage); } .re-page-lead { font-size: 21px; line-height: 1.6; color: var(--ink-70); max-width: 56ch; margin-top: 24px; } .re-page-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 32px; } .re-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .re-feature { display: flex; flex-direction: column; gap: 14px; } .re-feature-ic { width: 52px; height: 52px; border-radius: 999px; background: var(--celadon); color: var(--sage-deep); display: flex; align-items: center; justify-content: center; } .re-feature h3 { font-size: 19px; font-weight: 700; } .re-feature p { font-size: 15px; line-height: 1.6; color: var(--ink-70); } .re-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .re-checklist { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } .re-checklist li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink-70); } .re-checklist .chk { width: 26px; height: 26px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; } .re-waitlist { display: flex; gap: 12px; flex-wrap: wrap; max-width: 480px; margin-top: 28px; } .re-waitlist input { flex: 1; min-width: 220px; font-family: var(--font-sans); font-size: 16px; padding: 15px 18px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); } .re-waitlist input:focus { outline: none; border-color: var(--gold); } .re-waitlist-note { font-size: 13px; color: var(--ink-50); margin-top: 14px; } .re-soon-pill { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); background: var(--celadon); padding: 7px 16px; border-radius: 999px; margin-bottom: 22px; } @media (max-width: 860px) { .re-feature-grid { grid-template-columns: 1fr; } .re-split { grid-template-columns: 1fr; gap: 36px; } .re-snav-back { display: none; } } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 920px) { .re-nav-links { display: none; } } @media (max-width: 860px) { .re-hero-a .re-hero-grid, .re-hero-c .re-hero-grid, .re-about { grid-template-columns: 1fr; gap: 36px; } .re-hero-c .re-hero-photo-wrap { margin-left: 0; } .re-hero-photo-wrap, .re-about-photo-wrap { max-width: 360px; } .re-persona-grid, .re-road, .re-quotes, .re-stats, .re-price-grid { grid-template-columns: 1fr; } .re-skill-grid { grid-template-columns: 1fr; } .re-ps-row { grid-template-columns: 1fr; gap: 8px; } .re-ps-arrow { transform: rotate(90deg); justify-self: start; } .re-container { padding: 56px 22px; } .re-overlay-grid { grid-template-columns: 1fr; gap: 32px; } .re-mega.cols-2 { min-width: auto; grid-template-columns: 1fr; } }