#fh-new-home *, #fh-new-home *::before, #fh-new-home *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } #fh-new-home { --red: #E02E40; --red-hover: #c4202f; --red-glow: rgba(224,46,64,0.32); --red-soft: rgba(224,46,64,0.11); --red-border: rgba(224,46,64,0.22); --grey: #455966; --navy: #2C3A42; --navy-soft: rgba(44,58,66,0.15); --navy-border: rgba(44,58,66,0.35); --navy-light: rgba(44,58,66,0.08); --dark: #0a0a0a; --dark-2: #111111; --dark-3: #161e22; --dark-border: rgba(255,255,255,0.07); --dark-grey: #293943; --teal: #198e91; --white: #fff; --off-white: #F5F5F7; --off-white-2: #EBEBEF; --text-dark: #1d1d1f; --text-dark-soft: rgba(29,29,31,0.55); --text-white-soft: rgba(255,255,255,0.55); --text-white-dim: rgba(255,255,255,0.4); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; } #fh-new-home strong{font-weight: 900;} #fh-new-home{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;background: #0a0a0a;color: #fff;overflow-x: hidden;-webkit-font-smoothing: antialiased;} #fh-new-home h3,#fh-new-home h5,#fh-new-home p, #fh-new-home span{line-height: normal;} #fh-new-home .fh-header{position: fixed;top: 0;left: 0;right: 0;z-index: 1000;padding: 16px 32px;background: rgba(10,10,10,0.72);backdrop-filter: saturate(180%) blur(28px);-webkit-backdrop-filter: saturate(180%) blur(28px);border-bottom: 1px solid rgba(255,255,255,0.07);transition: border-color 0.3s;} #fh-new-home #nav{max-width: 1240px;margin: 0 auto;width: 100%;display: flex;align-items: center;justify-content: space-between;} #fh-new-home .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } #fh-new-home .nav-logo-img { height: 60px; width: auto; display: block; } #fh-new-home .nav-center { display: flex; align-items: center; gap: 36px; list-style: none; } #fh-new-home .nav-center li{list-style: none;} #fh-new-home .nav-center a { font-size: 14px; font-weight: 500; color: var(--text-white-soft); text-decoration: none; transition: color 0.2s; } #fh-new-home .nav-center a:hover { color: #fff; } #fh-new-home .nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0;} #fh-new-home .fh-nav-toggle{width: 32px;height: 32px;flex-shrink: 0;background-color: transparent;border: none;box-shadow: none;outline: none;margin-left: auto;} #fh-new-home .fh-nav-toggle svg {color: var(--white);} #fh-new-home .btn-nav-ghost{font-size: 14px;line-height: normal;font-weight: 500;padding: 6px 16px;border-radius: 980px;background: rgba(255,255,255,0.08);color: #fff;text-decoration: none;border: 1px solid rgba(255,255,255,0.1);transition: background 0.2s;} #fh-new-home .btn-nav-ghost:hover{background: rgba(255,255,255,0.14);} #fh-new-home .btn-nav-red{font-size: 14px;line-height: normal;font-weight: 600;padding: 12px 24px;border-radius: 980px;background: var(--red);color: #fff;text-decoration: none;transition: background 0.2s, transform 0.2s;} #fh-new-home .btn-nav-red:hover{background: var(--red-hover);transform: scale(1.03);} #fh-new-home .hero-content.hero-wide{max-width: 1240px;width: 100%;text-align: left;} #fh-new-home .hero-2col{display: grid;grid-template-columns: 1.05fr 0.95fr;gap: 64px;align-items: center;} #fh-new-home .hero-col-left{display: flex;flex-direction: column;gap: 22px;} #fh-new-home .hero-eyebrow{display: inline-flex;align-items: center;gap: 10px;font-size: 14px;font-weight: 700;letter-spacing: 0.16em;text-transform: uppercase;color: var(--text-white-soft);opacity: 0;animation: riseIn 0.9s 0.1s cubic-bezier(0.22,1,0.36,1) forwards;} #fh-new-home .hero-h1.hero-h1-split{font-size: clamp(46px, 6.4vw, 88px);line-height: 1.02;margin-bottom: 0;text-wrap: balance;color: var(--white);} #fh-new-home .hero-h1-split .line { display: block; } #fh-new-home .hero-sub.hero-sub-left { margin: 0; max-width: 520px; } #fh-new-home .hero-col-right {display: flex; flex-direction: column; gap: 16px;opacity: 0; animation: riseIn 0.9s 0.55s cubic-bezier(0.22,1,0.36,1) forwards;} #fh-new-home .mcard {border: 1px solid var(--red-border);position: relative;display: flex; flex-direction: column;padding: 28px 30px;border-radius: var(--radius-lg);text-decoration: none;background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);box-shadow: 0 24px 60px rgba(0,0,0,0.45);transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.3s;} #fh-new-home .mcard:hover {transform: translateY(-4px);box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 0 0 1px var(--red-border);} #fh-new-home .mcard:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } #fh-new-home .mcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } #fh-new-home .mcard-num { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); font-variant-numeric: tabular-nums; display: none;} #fh-new-home .mcard-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-white-soft); } #fh-new-home .mcard-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #fh-new-home .mcard-title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; color: #fff; transition: color 0.25s; } #fh-new-home .mcard:hover .mcard-title { color: var(--red); } #fh-new-home .mcard-arrow {flex-shrink: 0;width: 40px; height: 40px; border-radius: 50%;display: flex; align-items: center; justify-content: center;background: rgba(255,255,255,0.05);border: 1px solid var(--dark-border);color: var(--text-white-soft);transition: color 0.25s, border-color 0.25s, transform 0.25s;} #fh-new-home .mcard-arrow svg { width: 18px; height: 18px; } #fh-new-home .mcard:hover .mcard-arrow { color: #fff; border-color: rgba(255,255,255,0.2); transform: translate(2px, -2px); } #fh-new-home .mcard-desc { font-size: 15px; line-height: 1.6; color: var(--text-white-soft); margin-top: 12px; } #fh-new-home .mcard-foot {margin-top: 24px; padding-top: 18px;border-top: 1px solid var(--dark-border);font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;color: #fff;display: flex; align-items: center; gap: 8px;transition: gap 0.25s;} #fh-new-home .mcard:hover .mcard-foot { gap: 12px; } #fh-new-home .mcard-foot-arrow { color: var(--red); } #fh-new-home #hero{position: relative;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;overflow: hidden;padding: 130px 24px 120px;} #fh-new-home .hero-bg-wrap{position: absolute;inset: 0;overflow: hidden;} #fh-new-home .hero-bg-grad{position: absolute;inset: 0;background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(224,46,64,0.13) 0%, transparent 65%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(44,58,66,0.35) 0%, transparent 60%);} #fh-new-home .hero-grid{position: absolute;inset: 0;background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);background-size: 64px 64px;mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);pointer-events: none;} #fh-new-home .orb{position: absolute;border-radius: 50%;will-change: transform;pointer-events: none;} #fh-new-home .orb-1{width: 700px;height: 700px;background: radial-gradient(circle, rgba(224,46,64,0.2) 0%, transparent 65%);top: -200px;left: -200px;} #fh-new-home .orb-2{width: 500px;height: 500px;background: radial-gradient(circle, rgba(44,58,66,0.3) 0%, transparent 65%);bottom: -100px;right: -80px;} #fh-new-home .orb-3{width: 360px;height: 360px;background: radial-gradient(circle, rgba(224,46,64,0.08) 0%, transparent 65%);top: 38%;left: 60%;transform: translate(-50%, -50%);} #fh-new-home .hero-content{position: relative;z-index: 2;max-width: 880px;} #fh-new-home .hero-badge{display: inline-flex;align-items: center;gap: 8px;font-size: 11px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: var(--red);margin-bottom: 28px;padding: 8px 18px;background: var(--red-soft);border: 1px solid var(--red-border);border-radius: 980px;opacity: 0;animation: riseIn 0.9s 0.1s cubic-bezier(0.22,1,0.36,1) forwards;} #fh-new-home .badge-dot{width: 6px;height: 6px;background: var(--red);border-radius: 50%;animation: pulseDot 2s ease infinite;} #fh-new-home .hero-h1{font-size: clamp(58px, 9.5vw, 106px);font-weight: 800;letter-spacing: -0.05em;line-height: 1.0;margin-bottom: 26px;opacity: 0;animation: riseIn 0.9s 0.25s cubic-bezier(0.22,1,0.36,1) forwards;} #fh-new-home .hero-h1 .red{color: var(--red);} #fh-new-home .hero-sub{font-size: clamp(17px, 2.2vw, 21px);font-weight: 400;color: var(--text-white-soft);max-width: 480px;margin: 0 auto 54px;line-height: 1.6;letter-spacing: -0.015em;opacity: 0;animation: riseIn 0.9s 0.4s cubic-bezier(0.22,1,0.36,1) forwards;} #fh-new-home .hero-paths{display: flex;gap: 14px;justify-content: center;flex-wrap: wrap;opacity: 0;animation: riseIn 0.9s 0.55s cubic-bezier(0.22,1,0.36,1) forwards;} #fh-new-home .path-card{width: 268px;padding: 28px 24px;border-radius: var(--radius-lg);text-decoration: none;display: flex;flex-direction: column;align-items: flex-start;text-align: left;border: 1px solid transparent;transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), background 0.25s, border-color 0.25s, box-shadow 0.4s;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);} #fh-new-home .path-corp{background: rgba(224,46,64,0.09);border-color: var(--red-border);} #fh-new-home .path-corp:hover{background: rgba(224,46,64,0.17);border-color: rgba(224,46,64,0.4);transform: translateY(-8px) scale(1.02);box-shadow: 0 32px 64px rgba(224,46,64,0.18);} #fh-new-home .path-personal{background: rgba(44,58,66,0.3);border-color: rgba(44,58,66,0.5);} #fh-new-home .path-personal:hover{background: rgba(44,58,66,0.5);border-color: rgba(44,58,66,0.7);transform: translateY(-8px) scale(1.02);box-shadow: 0 32px 64px rgba(44,58,66,0.28);} #fh-new-home .path-emoji{font-size: 28px;margin-bottom: 14px;display: block;} #fh-new-home .path-tag{font-size: 11px;font-weight: 700;letter-spacing: 0.1em;text-transform: uppercase;margin-bottom: 10px;display: inline-flex;align-items: center;gap: 6px;padding: 5px 12px;border-radius: 980px;} #fh-new-home .path-corp .path-tag { color: var(--red); background: var(--red-soft); border: 1px solid var(--red-border); } #fh-new-home .path-personal .path-tag { color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); } #fh-new-home .path-title { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 10px; } #fh-new-home .path-desc { font-size: 14px; color: var(--text-white-soft); line-height: 1.6; margin-bottom: 18px; flex-grow: 1; } #fh-new-home .path-link { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } #fh-new-home .path-corp .path-link { color: var(--red); } #fh-new-home .path-personal .path-link { color: rgba(255,255,255,0.55); } #fh-new-home .path-arrow { transition: transform 0.22s; } #fh-new-home .path-card:hover .path-arrow { transform: translateX(5px); } #fh-new-home .scroll-cue{position: absolute;bottom: 36px;left: 50%;transform: translateX(-50%);z-index: 2;display: flex;flex-direction: column;align-items: center;gap: 8px;opacity: 0;animation: riseIn 0.8s 1.1s ease forwards;} #fh-new-home .scroll-cue-label{font-size: 10px;letter-spacing: 0.12em;text-transform: uppercase;color: var(--text-white-dim);} #fh-new-home .scroll-cue-line{width: 1px;height: 48px;background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);animation: scrollPulse 2.4s ease infinite;} #fh-new-home .cinema-strip{position: relative;padding: 100px 24px;overflow: hidden;background: var(--dark);} #fh-new-home .cinema-strip::before{content: '';position: absolute;inset: 0;background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(224,46,64,0.07) 0%, transparent 70%);pointer-events: none;} #fh-new-home .cinema-strip-text{position: relative;z-index: 2;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;padding: 0 24px;} #fh-new-home .cinema-strip-text h3 {font-size: clamp(28px, 4.5vw, 52px);font-weight: 800; letter-spacing: -0.046em;line-height: 1.08; color: #fff;} #fh-new-home .cinema-strip-text p {font-size: 17px; color: var(--text-white-soft);margin-top: 14px; max-width: 460px; line-height: 1.6; letter-spacing: -0.01em;} #fh-new-home .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); } #fh-new-home .divider-light { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.07), transparent); } #fh-new-home .section { padding: 130px 24px; position: relative; overflow: hidden; } #fh-new-home .section-dark { background: var(--dark-2); } #fh-new-home .section-light { background: var(--off-white); color: var(--text-dark); } #fh-new-home .section-inner { max-width: 1240px; margin: 0 auto; } #fh-new-home .section-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; display: block; } #fh-new-home .ey-red { color: var(--red); } #fh-new-home .ey-navy { color: var(--navy); } #fh-new-home .ey-navy-light { color: rgba(44,58,66,0.7); } #fh-new-home .section-h2 { font-size: clamp(38px, 6vw, 70px); font-weight: 800; letter-spacing: -0.046em; line-height: 1.04; margin-bottom: 22px; color: var(--white); } #fh-new-home .section-light .section-h2 { color: var(--text-dark); } #fh-new-home .section-p { font-size: clamp(16px, 2vw, 18px); color: var(--text-white-soft); line-height: 1.6; letter-spacing: -0.015em; max-width: 480px; margin-bottom: 44px; } #fh-new-home .section-light .section-p { color: var(--text-dark-soft); } #fh-new-home .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } #fh-new-home .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: normal; font-weight: 600; padding: 14px 30px; border-radius: 980px; text-decoration: none; transition: transform 0.25s, background 0.2s, box-shadow 0.25s; letter-spacing: -0.01em; font-family: inherit; } #fh-new-home .btn-red { background: var(--red); color: #fff; } #fh-new-home .btn-red:hover { background: var(--red-hover); transform: scale(1.035); box-shadow: 0 12px 40px var(--red-glow); } #fh-new-home .btn-dark { background: #1d1d1f; color: #fff; border: 1px solid rgba(255,255,255,0.1); } #fh-new-home .btn-dark:hover { background: #2c2c2e; transform: scale(1.02); } #fh-new-home .btn-ghost { font-size: 16px; font-weight: 500; color: var(--text-white-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s; letter-spacing: -0.01em; } #fh-new-home .btn-ghost:hover { color: #fff; } #fh-new-home .btn-ghost-dark { color: var(--text-dark-soft); } #fh-new-home .btn-ghost-dark:hover { color: var(--text-dark); } #fh-new-home .cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } #fh-new-home .check-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; } #fh-new-home .check-item { display: flex; align-items: flex-start; gap: 14px; font-size: 15.5px; color: rgba(255,255,255,0.75); line-height: 1.45; } #fh-new-home .check-icon{width: 22px;height: 22px;background: var(--red-soft);border: 1px solid var(--red-border);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 11px;color: var(--red);flex-shrink: 0;margin-top: 1px;font-weight: 700;} #fh-new-home .corp-audiences{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 28px;margin-bottom: 18px;} #fh-new-home .corp-aud-label{display: block;font-size: 11px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: var(--red);} #fh-new-home .corp-aud-title{font-family: inherit;font-size: 17px;font-weight: 700;letter-spacing: -0.02em;line-height: 1.3;color: #fff;margin: 8px 0 14px;} #fh-new-home .corp-aud .check-list{gap: 10px;margin-bottom: 0;} #fh-new-home .corp-aud .check-item{font-size: 14.5px;} #fh-new-home .corp-note{font-size: 12px;line-height: 1.5;color: var(--text-white-dim);margin-bottom: 34px;} #fh-new-home .claims-intro{max-width: 560px;margin: 12px auto 0;text-align: center;font-size: 16px;line-height: 1.6;color: var(--text-white-soft);} #fh-new-home .claims-switch{display: flex;gap: 4px;width: max-content;max-width: 100%;margin: 28px auto 0;padding: 4px;border-radius: 980px;background: rgba(255,255,255,0.06);border: 1px solid var(--dark-border);} #fh-new-home .claims-switch-btn{padding: 10px 22px;border: none;border-radius: 980px;background: transparent;color: var(--text-white-soft);font-family: inherit;font-size: 14px;font-weight: 600;line-height: 1.2;cursor: pointer;transition: background 0.25s, color 0.25s, box-shadow 0.25s;} #fh-new-home .claims-switch-btn:hover{color: #fff;} #fh-new-home .claims-switch-btn.is-active{background: var(--red);color: #fff;box-shadow: 0 8px 24px var(--red-glow);} #fh-new-home .claims-switch-btn:focus-visible{outline: 2px solid #fff;outline-offset: 2px;} #fh-new-home .claims-panel{animation: hosPanelIn 0.45s cubic-bezier(0.22,1,0.36,1);} #fh-new-home .claims-panel[hidden]{display: none;} #fh-new-home .claims-desc{max-width: 680px;margin: 24px auto 0;text-align: center;font-size: 15px;line-height: 1.65;color: var(--text-white-soft);} #fh-new-home .steps-grid.claims-steps{grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));} #fh-new-home .opd-card{background: linear-gradient(145deg, rgba(224,46,64,0.1) 0%, rgba(22,30,34,0.9) 100%);border: 1px solid var(--red-border);border-radius: var(--radius-lg);padding: 38px 36px;position: relative;overflow: hidden;} #fh-new-home .opd-card::before{content: '';position: absolute;top: -80px;right: -60px;width: 280px;height: 280px;background: radial-gradient(circle, rgba(224,46,64,0.18) 0%, transparent 70%);pointer-events: none;} #fh-new-home .opd-card::after{content: '';position: absolute;bottom: -60px;left: -40px;width: 200px;height: 200px;background: radial-gradient(circle, rgba(44,58,66,0.4) 0%, transparent 70%);pointer-events: none;} #fh-new-home .opd-tag{display: inline-block;font-size: 10px;font-weight: 700;letter-spacing: 0.12em;text-transform: uppercase;color: var(--red);padding: 5px 12px;background: var(--red-soft);border: 1px solid var(--red-border);border-radius: 980px;margin-bottom: 22px;} #fh-new-home .opd-price-row{display: flex;align-items: baseline;gap: 8px;margin-bottom: 28px;} #fh-new-home .opd-price{font-size: 54px;font-weight: 800;letter-spacing: -0.05em;line-height: 1;color: #fff;} #fh-new-home .opd-price-unit{font-size: 14px;color: var(--text-white-soft);} #fh-new-home .opd-mini-list{list-style: none;display: flex;flex-direction: column;gap: 8px;margin-bottom: 28px;} #fh-new-home .opd-mini-item{display: flex;align-items: center;gap: 12px;padding: 14px 16px;background: rgba(255,255,255,0.04);border: 1px solid rgba(255,255,255,0.06);border-radius: var(--radius-sm);} #fh-new-home .opd-mini-item .opd-mini-info{line-height: normal;} #fh-new-home .opd-mini-icon{width: 36px;height: 36px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;} #fh-new-home .opd-mini-icon svg{width: 36px;height: 36px;} #fh-new-home .opd-mini-info h5{font-size: 14px;font-weight: 600;color: #fff;margin-bottom: 1px;} #fh-new-home .opd-mini-info span{font-size: 12px;color: var(--text-white-soft);} #fh-new-home .opd-stats-row{display: grid;grid-template-columns: repeat(3, 1fr);gap: 2px;} #fh-new-home .opd-stat{padding: 18px 12px;text-align: center;background: rgba(0,0,0,0.3);border-top: 1px solid rgba(255,255,255,0.06);} #fh-new-home .opd-stat:first-child{border-radius: 0 0 0 var(--radius-sm);} #fh-new-home .opd-stat:last-child{border-radius: 0 0 var(--radius-sm) 0;} #fh-new-home .opd-stat-num{font-size: 26px;font-weight: 800;letter-spacing: -0.04em;color: var(--red);display: block;line-height: 1;} #fh-new-home .opd-stat-lbl{font-size: 11px;color: rgba(255,255,255,0.45);margin-top: 5px;display: block;} #fh-new-home .steps-eyebrow-wrap { text-align: center; margin-top: 80px; margin-bottom: 4px; line-height: normal; } #fh-new-home .steps-section-h3 { font-size: clamp(24px, 3.5vw, 40px); font-weight: 800; letter-spacing: -0.04em; text-align: center; margin-top: 8px; color: var(--white);} #fh-new-home .section-light .steps-section-h3 { color: var(--text-dark); } #fh-new-home .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(255,255,255,0.06); border-radius: var(--radius-lg); overflow: hidden; margin-top: 32px; } #fh-new-home .steps-grid-light { background: rgba(0,0,0,0.06); } #fh-new-home .step-block { padding: 34px 26px; background: var(--dark-3); } #fh-new-home .steps-grid-light .step-block { background: #fff; } #fh-new-home .step-badge { width: 34px; height: 34px; border-radius: 980px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } #fh-new-home .badge-red { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-border); } #fh-new-home .badge-navy { background: rgba(44,58,66,0.15); color: var(--navy); border: 1px solid rgba(44,58,66,0.3); } #fh-new-home .step-block h4 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 9px; color: #fff; } #fh-new-home .steps-grid-light .step-block h4 { color: var(--text-dark); } #fh-new-home .step-block p { font-size: 14px; color: var(--text-white-soft); line-height: 1.6; } #fh-new-home .steps-grid-light .step-block p { color: var(--text-dark-soft); } #fh-new-home .stats-strip-light{display: grid;grid-template-columns: repeat(3, 1fr);gap: 1px;background: rgba(0,0,0,0.06);border-radius: var(--radius-md);overflow: hidden;margin-top: 14px;border: 1px solid rgba(0,0,0,0.07);} #fh-new-home .stat-cell-light { padding: 22px 14px; text-align: center; background: #fff; } #fh-new-home .stat-val { font-size: 34px; font-weight: 800; letter-spacing: -0.045em; display: block; line-height: 1; color: var(--navy); } #fh-new-home .stat-val.red { color: var(--red); } #fh-new-home .stat-lbl-l { font-size: 12px; color: var(--text-dark-soft); margin-top: 6px; display: block; } #fh-new-home #impact { background: var(--dark); padding: 120px 24px; text-align: center; overflow: hidden; position: relative; } #fh-new-home #impact::before{content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 900px;height: 400px;background: radial-gradient(ellipse, rgba(224,46,64,0.08) 0%, transparent 70%);pointer-events: none;} #fh-new-home .impact-h{font-size: clamp(26px, 3.5vw, 42px);font-weight: 700;letter-spacing: -0.04em;color: var(--text-white-soft);margin-bottom: 56px;max-width: 540px;margin-left: auto;margin-right: auto;line-height: 1.25;} #fh-new-home .impact-h strong { color: #fff; } #fh-new-home .impact-grid{display: grid;grid-template-columns: repeat(4, 1fr);gap: 2px;background: rgba(255,255,255,0.05);border-radius: var(--radius-lg);overflow: hidden;max-width: 1240px;margin: 0 auto;border: 1px solid rgba(255,255,255,0.06);} #fh-new-home .impact-cell{background: #111;padding: 44px 20px;position: relative;overflow: hidden;} #fh-new-home .impact-cell::after{content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 2px;background: var(--red);transform: scaleX(0);transform-origin: left;transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);} #fh-new-home .impact-cell.is-visible::after { transform: scaleX(1); } #fh-new-home .impact-val { font-size: clamp(32px, 5vw, 58px); font-weight: 800; letter-spacing: -0.05em; color: #fff; display: block; line-height: 1; margin-bottom: 10px; } #fh-new-home .impact-lbl { font-size: 14px; color: var(--text-white-soft); line-height: normal; } #fh-new-home #partners { background: var(--dark-2); padding: 72px 0; overflow: hidden; } #fh-new-home .partners-h { text-align: center; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-bottom: 36px; padding: 0 24px; } #fh-new-home .marquee-outer { position: relative; overflow: hidden; } #fh-new-home .marquee-outer::before, #fh-new-home .marquee-outer::after { content: ''; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2; pointer-events: none; } #fh-new-home .marquee-outer::before { left: 0; background: linear-gradient(90deg, var(--dark-2), transparent); } #fh-new-home .marquee-outer::after { right: 0; background: linear-gradient(270deg, var(--dark-2), transparent); } #fh-new-home .marquee-row { display: flex; gap: 24px; animation: ticker 34s linear infinite; width: max-content; } #fh-new-home .marquee-row:hover { animation-play-state: paused; } #fh-new-home .brand-chip{display: flex;gap: 8px;align-items: center;padding: 12px 20px;background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 100%);border: 1px solid var(--red);border-radius: 50px;font-size: 16px;line-height: normal;font-weight: 500;color: var(--white);white-space: nowrap;transition: all 0.3s ease;cursor: default;} #fh-new-home .brand-chip:hover { color: var(--white); border-color: var(--red-hover); background: rgba(224, 46, 64, 0.1); } #fh-new-home .brand-chip img{width: 30px;height: 30px;display: block;flex-shrink: 0;} #fh-new-home #testimonials { background: var(--off-white); padding: 120px 24px; } #fh-new-home .test-header { text-align: center; margin-bottom: 60px; } #fh-new-home .test-header h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -0.044em; color: var(--text-dark); line-height: 1.06; } #fh-new-home .test-header p { font-size: 17px; color: var(--text-dark-soft); margin-top: 14px; } #fh-new-home .test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1240px; margin: 0 auto; } #fh-new-home .test-card{background: #fff;border: 1px solid rgba(0,0,0,0.06);border-radius: var(--radius-md);padding: 30px 26px;display: flex;flex-direction: column;transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;} #fh-new-home .test-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.09); } #fh-new-home .test-stars { color: #FF9500; font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; } #fh-new-home .test-quote { font-size: 15px; line-height: 1.65; color: var(--text-dark); flex-grow: 1; margin-bottom: 22px; letter-spacing: -0.01em; } #fh-new-home .test-author { display: flex; align-items: center; gap: 11px; } #fh-new-home .test-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; } #fh-new-home .test-name { font-size: 14px; font-weight: 700; color: var(--text-dark); display: block; } #fh-new-home .test-role { font-size: 12px; color: var(--text-dark-soft); display: block; } #fh-new-home #final-cta { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; } #fh-new-home .cta-pane { padding: 88px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } #fh-new-home .cta-dark { background: #0d0d0f; } #fh-new-home .cta-dark::before{content: '';position: absolute;bottom: -80px;right: -60px;width: 300px;height: 300px;background: radial-gradient(circle, rgba(224,46,64,0.2) 0%, transparent 70%);pointer-events: none;} #fh-new-home .cta-dark::after{content: '';position: absolute;top: -60px;left: -40px;width: 220px;height: 220px;background: radial-gradient(circle, rgba(44,58,66,0.4) 0%, transparent 70%);pointer-events: none;} #fh-new-home .cta-light { background: var(--off-white-2); } #fh-new-home .cta-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: 980px; margin-bottom: 20px; align-self: flex-start; } #fh-new-home .cb-red { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-border); } #fh-new-home .cb-dark { background: rgba(44,58,66,0.15); color: var(--navy); border: 1px solid rgba(44,58,66,0.25); } #fh-new-home .cta-h2 { font-size: clamp(26px, 3.5vw, 44px); font-weight: 800; letter-spacing: -0.044em; line-height: 1.08; margin-bottom: 16px; color: var(--white); } #fh-new-home .cta-light .cta-h2 { color: var(--text-dark); } #fh-new-home .cta-body { font-size: 16px; color: var(--text-white-soft); line-height: 1.6; margin-bottom: 34px; max-width: 380px; letter-spacing: -0.01em; } #fh-new-home .cta-light .cta-body { color: var(--text-dark-soft); } #fh-new-home .store-row { display: flex; gap: 10px; flex-wrap: wrap; } #fh-new-home .store-btn{display: inline-flex;align-items: center;gap: 10px;padding: 11px 18px;background: #1d1d1f;border: 1px solid rgba(255,255,255,0.1);border-radius: 11px;text-decoration: none;color: #fff;transition: background 0.2s, transform 0.2s;} #fh-new-home .store-btn:hover { background: #2c2c2e; transform: scale(1.03); } #fh-new-home .store-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } #fh-new-home .store-icon svg { width: 20px; height: 20px; } #fh-new-home .store-txt { display: flex; flex-direction: column; } #fh-new-home .store-sub { font-size: 9px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; } #fh-new-home .store-name { font-size: 14px; font-weight: 700; } #fh-new-home .cta-note { margin-top: 16px; font-size: 13px; color: var(--text-white-dim); letter-spacing: -0.01em; } #fh-new-home .cta-get { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } #fh-new-home .cta-qr { display: none; } @media (min-width: 1200px) { /* Line both halves up with the 1240px page container used by every other section. By position, not colour, so the panes can be swapped in the template. */ #fh-new-home #final-cta .cta-pane:first-child { padding-left: max(64px, calc((100% * 2 - 1240px) / 2)); } #fh-new-home #final-cta .cta-pane:last-child { padding-right: max(64px, calc((100% * 2 - 1240px) / 2)); } #fh-new-home #final-cta .cta-body { max-width: 440px; } #fh-new-home .cta-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-left: 28px; border-left: 1px solid rgba(0,0,0,0.1); } #fh-new-home .cta-qr img { width: 96px; height: 96px; display: block; padding: 6px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; } #fh-new-home .cta-qr-label { max-width: 112px; font-size: 11px; font-weight: 600; line-height: 1.35; text-align: center; color: var(--text-dark-soft); } } #fh-new-home footer { background: var(--dark); border-top: 1px solid rgba(255,255,255,0.06); padding: 56px 24px 32px; } #fh-new-home .footer-grid { max-width: 1240px; margin: 0 auto 44px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } #fh-new-home .footer-logo-img { height: 60px; width: auto; display: block; margin-bottom: 14px; } #fh-new-home .footer-brand-p { font-size: 14px; color: var(--text-white-soft); line-height: 1.65; max-width: 260px; } #fh-new-home .footer-col-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-white-dim); margin-bottom: 17px; display: block; } #fh-new-home .footer-col ul { list-style: none; } #fh-new-home .footer-col li { margin-bottom: 10px; list-style: none; line-height: 20px;} #fh-new-home .footer-col a { font-size: 14px; color: rgba(255,255,255,0.42); text-decoration: none; transition: color 0.2s; } #fh-new-home .footer-col a:hover { color: rgba(255,255,255,0.8); } #fh-new-home .footer-bottom { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); } #fh-new-home .footer-copy { font-size: 12px; color: var(--text-white-dim); } #fh-new-home .footer-copy a { color: var(--text-white-dim); text-decoration: none; transition: color 0.2s; } #fh-new-home .footer-copy a:hover { color: var(--white); } #fh-new-home .footer-social { display: flex; align-items: center; gap: 20px; } #fh-new-home .footer-social a { font-size: 12px; font-weight: 600; color: var(--text-white-dim); text-decoration: none; transition: color 0.2s; letter-spacing: 0.04em; text-transform: uppercase; } #fh-new-home .footer-social a:hover { color: rgba(255,255,255,0.6); } #fh-new-home .reveal { opacity: 0; transform: translateY(36px) scale(0.98); transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1); } #fh-new-home .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); } #fh-new-home .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1); } #fh-new-home .reveal-left.is-visible { opacity: 1; transform: translateX(0); } #fh-new-home .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1); } #fh-new-home .reveal-right.is-visible { opacity: 1; transform: translateX(0); } #fh-new-home .rd1 { transition-delay: 0.08s; } #fh-new-home .rd2 { transition-delay: 0.16s; } #fh-new-home .rd3 { transition-delay: 0.24s; } #fh-new-home .rd4 { transition-delay: 0.32s; } #fh-new-home .rd5 { transition-delay: 0.40s; } /* ── Health OS: service tabs ─────────────────────────── */ #fh-new-home .hos-head{display: grid;grid-template-columns: 1.1fr 0.9fr;gap: 72px;align-items: end;margin-bottom: 56px;} #fh-new-home .hos-head .section-h2{margin-bottom: 0;} #fh-new-home .hos-head .section-p{margin-bottom: 28px;} #fh-new-home .hos-tabs-wrap{display: grid;grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);gap: 28px;align-items: start;} #fh-new-home .hos-tabs-col{background: linear-gradient(145deg, rgba(44,58,66,0.08) 0%, rgba(245,245,247,0) 100%);border: 1px solid rgba(44,58,66,0.18);border-radius: var(--radius-lg);padding: 20px;} #fh-new-home .hos-tabs-col .stats-strip-light{margin-top: 12px;} #fh-new-home .hos-tabs{list-style: none;display: flex;flex-direction: column;gap: 8px;} #fh-new-home .hos-tabs li{list-style: none;} #fh-new-home .hos-tab{position: relative;width: 100%;display: flex;align-items: center;gap: 14px;padding: 14px 16px 14px 14px;background: #fff;border: 1px solid rgba(0,0,0,0.06);border-radius: 14px;box-shadow: 0 2px 10px rgba(0,0,0,0.04);font-family: inherit;text-align: left;text-decoration: none;color: var(--text-dark);cursor: pointer;overflow: hidden;transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s, background 0.22s;} #fh-new-home .hos-tab::before{content: '';position: absolute;left: 0;top: 14px;bottom: 14px;width: 3px;border-radius: 0 3px 3px 0;background: var(--red);transform: scaleY(0);transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);} #fh-new-home .hos-tab:hover{transform: translateX(4px);box-shadow: 0 6px 24px rgba(0,0,0,0.08);} #fh-new-home .hos-tab.is-active{border-color: var(--red-border);box-shadow: 0 10px 30px rgba(224,46,64,0.12);transform: none;} #fh-new-home .hos-tab.is-active::before{transform: scaleY(1);} #fh-new-home .hos-tab:focus-visible{outline: 2px solid var(--red);outline-offset: 2px;} #fh-new-home .hos-tab-icon{width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} #fh-new-home .hos-tab-icon svg{width: 44px;height: 44px;} #fh-new-home .hos-tab-info{flex: 1;min-width: 0;} #fh-new-home .hos-tab-title{display: block;font-size: 16px;font-weight: 700;letter-spacing: -0.01em;color: var(--text-dark);margin-bottom: 2px;line-height: 1.3;} #fh-new-home .hos-tab-desc{display: block;font-size: 14px;color: var(--text-dark-soft);line-height: 1.45;} #fh-new-home .hos-tab-go{flex-shrink: 0;width: 28px;height: 28px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: var(--navy-light);color: rgba(44,58,66,0.5);transition: background 0.22s, color 0.22s, transform 0.22s;} #fh-new-home .hos-tab-go svg{width: 14px;height: 14px;} #fh-new-home .hos-tab.is-active .hos-tab-go{background: var(--red);color: #fff;} #fh-new-home .hos-panels{min-width: 0;} #fh-new-home .hos-panel{display: grid;grid-template-columns: minmax(0, 1fr) 240px;gap: 32px;align-items: start;background: #fff;border: 1px solid rgba(0,0,0,0.06);border-radius: var(--radius-lg);padding: 36px;box-shadow: 0 24px 60px rgba(44,58,66,0.08);animation: hosPanelIn 0.5s cubic-bezier(0.22,1,0.36,1);} #fh-new-home .hos-panel[hidden]{display: none;} #fh-new-home .hos-panel-media{order: 2;} #fh-new-home .hos-panel-img{width: 100%;height: auto;aspect-ratio: 1 / 1;object-fit: cover;border-radius: var(--radius-md);display: block;background: var(--off-white);} #fh-new-home .hos-panel-highlights{list-style: none;display: flex;flex-direction: column;gap: 8px;margin-top: 14px;} #fh-new-home .hos-panel-highlights li{list-style: none;display: flex;align-items: center;gap: 10px;padding: 10px 12px;background: var(--off-white);border-radius: var(--radius-sm);font-size: 13px;font-weight: 600;line-height: 1.3;color: var(--text-dark);} #fh-new-home .hos-panel-highlights li::before{content: '✓';width: 20px;height: 20px;flex-shrink: 0;border-radius: 50%;background: var(--red-soft);border: 1px solid var(--red-border);color: var(--red);font-size: 10px;font-weight: 700;display: flex;align-items: center;justify-content: center;} #fh-new-home .hos-panel-body{min-width: 0;} #fh-new-home .hos-panel-kicker{display: inline-flex;align-items: center;gap: 8px;font-size: 11px;font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: var(--red);margin-bottom: 12px;} #fh-new-home .hos-panel-h3{font-size: clamp(24px, 2.6vw, 32px);font-weight: 800;letter-spacing: -0.035em;line-height: 1.12;color: var(--text-dark);margin-bottom: 28px;text-wrap: balance;} #fh-new-home .hos-steps{list-style: none;position: relative;display: flex;flex-direction: column;gap: 22px;margin-bottom: 30px;} #fh-new-home .hos-steps::before{content: '';position: absolute;left: 15px;top: 16px;bottom: 16px;width: 2px;background: linear-gradient(180deg, var(--red-border), rgba(0,0,0,0.06));} #fh-new-home .hos-step{list-style: none;position: relative;display: flex;gap: 16px;align-items: flex-start;} #fh-new-home .hos-step-num{position: relative;z-index: 1;width: 32px;height: 32px;flex-shrink: 0;border-radius: 50%;background: #fff;border: 1.5px solid var(--red-border);color: var(--red);font-size: 13px;font-weight: 700;display: flex;align-items: center;justify-content: center;} #fh-new-home .hos-step h4{font-size: 16px;font-weight: 700;letter-spacing: -0.02em;line-height: 1.3;color: var(--text-dark);margin: 5px 0 4px;} #fh-new-home .hos-step p{font-size: 14px;line-height: 1.6;color: var(--text-dark-soft);} #fh-new-home .hos-panel-actions{display: flex;align-items: center;gap: 16px;flex-wrap: wrap;padding-top: 22px;border-top: 1px solid rgba(0,0,0,0.06);} #fh-new-home .hos-panel-actions .btn{padding: 14px 24px;font-size: 15px;} #fh-new-home .hos-panel-more{display: inline-flex;align-items: center;gap: 6px;font-size: 15px;font-weight: 600;letter-spacing: -0.01em;color: var(--text-dark);text-decoration: none;transition: color 0.2s, gap 0.2s;} #fh-new-home .hos-panel-more span{color: var(--red);} #fh-new-home .hos-panel-more:hover{color: var(--red);gap: 10px;} #fh-new-home .hos-panel-more:focus-visible{outline: 2px solid var(--red);outline-offset: 4px;border-radius: 4px;} #fh-new-home .hos-panel-visual{position: relative;} #fh-new-home .hos-panel-placeholder{display: flex;align-items: center;justify-content: center;background: radial-gradient(circle at 50% 50%, var(--red-soft) 0%, var(--red-soft) 38%, transparent 39%), linear-gradient(145deg, var(--off-white) 0%, var(--off-white-2) 100%);} #fh-new-home .hos-panel-placeholder svg{width: 34%;height: 34%;} #fh-new-home .hos-video-btn{position: absolute;left: 12px;bottom: 12px;display: inline-flex;align-items: center;gap: 8px;padding: 5px 14px 5px 5px;border-radius: 980px;background: rgba(255,255,255,0.92);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);box-shadow: 0 6px 20px rgba(0,0,0,0.12);font-size: 13px;font-weight: 600;letter-spacing: -0.01em;color: var(--text-dark);text-decoration: none;white-space: nowrap;transition: transform 0.25s, box-shadow 0.25s;} #fh-new-home .hos-video-btn:hover{transform: translateY(-2px);box-shadow: 0 10px 26px rgba(0,0,0,0.18);} #fh-new-home .hos-video-icon{width: 36px;height: 36px;flex-shrink: 0;border-radius: 50%;background: var(--red);color: #fff;display: flex;align-items: center;justify-content: center;} #fh-new-home .hos-video-icon svg{width: 14px;height: 14px;margin-left: 2px;} #fh-new-home .hos-video-btn:focus-visible{outline: 2px solid var(--red);outline-offset: 3px;} /* Explainer video modal */ #fh-new-home .fh-video-frame{position: relative;aspect-ratio: 16 / 9;background: #000;} #fh-new-home .fh-video-frame iframe, #fh-new-home .fh-video-frame video{position: absolute;inset: 0;width: 100%;height: 100%;border: 0;display: block;} /* ── Book-a-demo popup ───────────────────────────────── */ #fh-new-home .fh-demo-modal{position: fixed;inset: 0;z-index: 20000;display: flex;align-items: center;justify-content: center;padding: 24px;background: rgba(0,0,0,0.78);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);opacity: 0;pointer-events: none;transition: opacity 0.3s ease;} #fh-new-home .fh-demo-modal.active{opacity: 1;pointer-events: auto;} #fh-new-home .fh-demo-box{position: relative;width: 100%;max-width: 980px;max-height: calc(100vh - 48px);overflow-y: auto;-webkit-overflow-scrolling: touch;display: grid;grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);background: #fff;border-radius: var(--radius-lg);box-shadow: 0 40px 100px rgba(0,0,0,0.6);transform: translateY(16px) scale(0.98);transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);} #fh-new-home .fh-demo-modal.active .fh-demo-box{transform: none;} #fh-new-home .fh-demo-close{position: absolute;top: 16px;right: 16px;z-index: 2;width: 38px;height: 38px;border-radius: 50%;border: none;background: rgba(0,0,0,0.06);color: var(--text-dark);font-size: 22px;line-height: 1;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.2s, color 0.2s, transform 0.2s;} #fh-new-home .fh-demo-close:hover{background: var(--red);color: #fff;transform: rotate(90deg);} #fh-new-home .fh-demo-close:focus-visible{outline: 2px solid var(--red);outline-offset: 2px;} #fh-new-home .fh-demo-aside{position: relative;overflow: hidden;padding: 48px 40px;background: #0d0d0f;color: #fff;display: flex;flex-direction: column;} #fh-new-home .fh-demo-aside::before{content: '';position: absolute;bottom: -90px;right: -70px;width: 300px;height: 300px;background: radial-gradient(circle, rgba(224,46,64,0.25) 0%, transparent 70%);pointer-events: none;} #fh-new-home .fh-demo-aside > *{position: relative;} #fh-new-home .fh-demo-title{font-family: inherit;font-size: clamp(26px, 2.6vw, 34px);font-weight: 800;letter-spacing: -0.04em;line-height: 1.1;color: #fff;margin-bottom: 14px;text-wrap: balance;} #fh-new-home .fh-demo-text{font-size: 15px;line-height: 1.6;color: var(--text-white-soft);margin-bottom: 28px;} #fh-new-home .fh-demo-points{margin: 0;gap: 12px;} #fh-new-home .fh-demo-points .check-item{font-size: 14px;} #fh-new-home .fh-demo-main{padding: 48px 40px 40px;color: var(--text-dark);} /* Contact Form 7 — restyles the existing form without changing its markup. The form's own row wrappers (inline display:flex) are flattened so every field sits in one six-column grid (most fields take half; employees and preferred time split 1/3 + 2/3); the child theme gives the wrappers fixed widths, hence the !important overrides. */ #fh-new-home .fh-demo-form .wpcf7-form{display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: 14px;} #fh-new-home .fh-demo-form .wpcf7-form > div[style], #fh-new-home .fh-demo-form .input-field:has(.input-field-sub){display: contents !important;} #fh-new-home .fh-demo-form [class*="input-field"]{width: auto !important;min-width: 0;grid-column: span 3;} #fh-new-home .fh-demo-form .input-field-small{grid-column: span 2;} #fh-new-home .fh-demo-form .input-field:has(.wpcf7-select){grid-column: span 4;} #fh-new-home .fh-demo-form .input-field-large, #fh-new-home .fh-demo-form .input-field-smallest, #fh-new-home .fh-demo-form .wpcf7-response-output{grid-column: 1 / -1;} #fh-new-home .fh-demo-form .input-field-large{margin-top: 4px;} #fh-new-home .fh-demo-form p{margin: 0 !important;padding: 0 !important;} #fh-new-home .fh-demo-form .wpcf7-form-control-wrap{display: block;} #fh-new-home .fh-demo-form input.wpcf7-text, #fh-new-home .fh-demo-form input.wpcf7-number, #fh-new-home .fh-demo-form select.wpcf7-select{display: block;width: 100% !important;height: 50px !important;margin: 0 !important;padding: 0 14px !important;border: 1px solid rgba(0,0,0,0.12) !important;border-radius: 12px !important;background-color: var(--off-white) !important;color: var(--text-dark) !important;font-family: inherit !important;font-size: 15px !important;font-weight: 500 !important;line-height: 1.2 !important;letter-spacing: -0.01em;box-shadow: none !important;-webkit-appearance: none;appearance: none;transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;} #fh-new-home .fh-demo-form input.wpcf7-form-control::placeholder{color: rgba(29,29,31,0.45);opacity: 1;} #fh-new-home .fh-demo-form input.wpcf7-text:focus, #fh-new-home .fh-demo-form input.wpcf7-number:focus, #fh-new-home .fh-demo-form select.wpcf7-select:focus{outline: none;border-color: var(--red) !important;background-color: #fff !important;box-shadow: 0 0 0 4px var(--red-soft) !important;} #fh-new-home .fh-demo-form input.wpcf7-number{-moz-appearance: textfield;} #fh-new-home .fh-demo-form input.wpcf7-number::-webkit-inner-spin-button, #fh-new-home .fh-demo-form input.wpcf7-number::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;} #fh-new-home .fh-demo-form select.wpcf7-select{padding-right: 40px !important;cursor: pointer;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;background-repeat: no-repeat !important;background-position: right 14px center !important;background-size: 16px !important;} /* The first option ("Preferred time…") acts as the placeholder. */ #fh-new-home .fh-demo-form select.wpcf7-select:has(option:first-child:checked){color: rgba(29,29,31,0.45) !important;} #fh-new-home .fh-demo-form select.wpcf7-select option{color: var(--text-dark);} #fh-new-home .fh-demo-form input.wpcf7-not-valid, #fh-new-home .fh-demo-form select.wpcf7-not-valid{border-color: var(--red) !important;background-color: #fff6f7 !important;} #fh-new-home .fh-demo-form .wpcf7-not-valid-tip{margin-top: 6px;font-size: 12px;font-weight: 500;color: var(--red);} #fh-new-home .fh-demo-form .wpcf7-checkbox{display: block;} #fh-new-home .fh-demo-form .wpcf7-list-item{display: flex;align-items: flex-start;gap: 10px;margin: 0;} #fh-new-home .fh-demo-form .wpcf7-list-item input[type="checkbox"]{flex-shrink: 0;width: 18px;height: 18px;margin: 1px 0 0;accent-color: var(--red);cursor: pointer;} #fh-new-home .fh-demo-form .wpcf7-list-item-label{font-size: 12px;line-height: 1.55;color: var(--text-dark-soft);} #fh-new-home .fh-demo-form .input-field-smallest p{position: relative;} #fh-new-home .fh-demo-form input.wpcf7-submit{display: block;width: 100% !important;height: 54px !important;margin: 0 !important;padding: 0 24px !important;border: none !important;border-radius: 980px !important;background: var(--red) !important;color: #fff !important;font-family: inherit !important;font-size: 16px !important;font-weight: 600 !important;letter-spacing: -0.01em;cursor: pointer;box-shadow: none;transition: background 0.2s, transform 0.25s, box-shadow 0.25s;} #fh-new-home .fh-demo-form input.wpcf7-submit:hover{background: var(--red-hover) !important;transform: translateY(-1px);box-shadow: 0 12px 32px var(--red-glow);} #fh-new-home .fh-demo-form input.wpcf7-submit:focus-visible{outline: 2px solid var(--red);outline-offset: 3px;} #fh-new-home .fh-demo-form .submitting input.wpcf7-submit{opacity: 0.75;cursor: wait;} #fh-new-home .fh-demo-form .wpcf7-spinner{position: absolute;top: 50%;right: 18px;margin: -12px 0 0;background-color: rgba(255,255,255,0.4);} #fh-new-home .fh-demo-form .wpcf7-response-output{margin: 2px 0 0 !important;padding: 12px 16px !important;border: 1px solid var(--red-border) !important;border-radius: 12px;background: var(--red-soft);font-size: 13px;line-height: 1.5;color: var(--red);} #fh-new-home .fh-demo-form .sent .wpcf7-response-output{border-color: rgba(25,142,145,0.3) !important;background: rgba(25,142,145,0.08);color: var(--teal);} #fh-new-home .fh-demo-form .init .wpcf7-response-output{display: none;} #fh-new-home .fh-demo-success{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;min-height: 100%;padding: 24px 0;text-align: center;} #fh-new-home .fh-demo-success[hidden]{display: none;} #fh-new-home .fh-demo-success-icon{width: 64px;height: 64px;border-radius: 50%;background: var(--red-soft);border: 1px solid var(--red-border);color: var(--red);font-size: 26px;font-weight: 700;display: flex;align-items: center;justify-content: center;margin-bottom: 6px;} #fh-new-home .fh-demo-success h4{font-family: inherit;font-size: 24px;font-weight: 800;letter-spacing: -0.03em;color: var(--text-dark);} #fh-new-home .fh-demo-success p{max-width: 360px;font-size: 15px;line-height: 1.6;color: var(--text-dark-soft);margin-bottom: 10px;} #fh-new-home .fh-explainer-modal{position: fixed;inset: 0;background: rgba(0, 0, 0, 0.82);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);z-index: 20000;display: flex;align-items: center;justify-content: center;padding: clamp(12px, 3vw, 24px);opacity: 0;pointer-events: none;transition: opacity 0.3s ease;} #fh-new-home .fh-explainer-modal.active{opacity: 1;pointer-events: auto;} #fh-new-home .fh-explainer-modal-box{width: 100%;max-width: 820px;max-height: 90vh;overflow-y: auto;-webkit-overflow-scrolling: touch;background: #111317;border: 1px solid rgba(255, 255, 255, 0.12);border-radius: 28px;box-shadow: 0 32px 80px rgba(0, 0, 0, 0.85);position: relative;display: flex;flex-direction: column;} #fh-new-home .fh-explainer-modal-head{display: flex;align-items: center;justify-content: space-between;padding: clamp(14px, 2.5vw, 18px) clamp(16px, 3vw, 24px);border-bottom: 1px solid rgba(255, 255, 255, 0.08);flex-shrink: 0;} #fh-new-home .fh-explainer-modal-head .fh-explainer-modal-title{font-size: clamp(14px, 2vw, 16px);font-weight: 700;color: #fff;display: flex;align-items: center;gap: 8px;margin: 0;} #fh-new-home .fh-explainer-close-btn{background: rgba(255, 255, 255, 0.08);border: none;color: #fff;width: 36px;height: 36px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 20px;line-height: 1;transition: background 0.2s ease, transform 0.2s ease;} #fh-new-home .fh-explainer-close-btn:hover{background: #E02E40;transform: scale(1.05);} #fh-new-home .fh-cta-banner{position: relative;overflow: hidden;width: 100%;padding: clamp(48px, 6vw, 76px) clamp(20px, 5vw, 48px);background: radial-gradient( ellipse 70% 90% at 15% 50%, rgba(255, 60, 80, 0.32) 0%, transparent 65% ), radial-gradient( ellipse 60% 80% at 85% 50%, rgba(0, 0, 0, 0.75) 0%, transparent 70% ), linear-gradient( 115deg, #E02E40 0%, #b81726 32%, #4d0a11 68%, #0d0204 100% );border-top: 1px solid rgba(255, 255, 255, 0.12);border-bottom: 1px solid rgba(0, 0, 0, 0.4);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 20px 48px rgba(0, 0, 0, 0.35);font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;box-sizing: border-box;-webkit-font-smoothing: antialiased;} #fh-new-home .fh-cta-banner::before{content: '';position: absolute;inset: 0;background-image: linear-gradient( rgba(255, 255, 255, 0.03) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px );background-size: 40px 40px;mask-image: radial-gradient( ellipse at 50% 50%, black 40%, transparent 80% );-webkit-mask-image: radial-gradient( ellipse at 50% 50%, black 40%, transparent 80% );pointer-events: none;} #fh-new-home .fh-cta-container{max-width: 1180px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;gap: clamp(24px, 4vw, 48px);position: relative;z-index: 2;} #fh-new-home .fh-cta-title{color: #ffffff;font-size: clamp(24px, 3.4vw, 42px);font-weight: 800;letter-spacing: -0.03em;line-height: 1.18;margin: 0;text-wrap: balance;text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);} #fh-new-home .fh-cta-btn{display: inline-flex;align-items: center;justify-content: center;background: #ffffff;color: #111113;font-size: clamp(14px, 1.6vw, 16px);font-weight: 700;letter-spacing: -0.01em;padding: clamp(12px, 2vw, 15px) clamp(28px, 3.5vw, 42px);border-radius: 8px;text-decoration: none;box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.2s ease, color 0.2s ease;white-space: nowrap;flex-shrink: 0;-webkit-tap-highlight-color: transparent;min-height: 48px;} #fh-new-home .fh-cta-btn:hover{background: #f5f5f7;color: #000000;transform: translateY(-2px);box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25);} #fh-new-home .fh-cta-btn:active{transform: translateY(0);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);} @keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollPulse { 0%, 100% { opacity: 0; transform: scaleY(0); transform-origin: top; } 35% { opacity: 1; transform: scaleY(1); transform-origin: top; } 65% { opacity: 1; transform: scaleY(1); transform-origin: bottom; } 100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; } } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes pulseDot { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes hosPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 992px) { #fh-new-home .fh-nav-toggle{display: none;} /* Health OS: tabs box and content box share one height. All panels sit in the same grid cell, so the box is as tall as the longest panel and does not jump when switching tabs; hidden panels just fade out. The tabs grow to fill the left box. */ #fh-new-home .hos-tabs-wrap{align-items: stretch;} #fh-new-home .hos-tabs-col{display: flex;flex-direction: column;} #fh-new-home .hos-tabs{flex: 1;} #fh-new-home .hos-tabs li{flex: 1;display: flex;} #fh-new-home .hos-panels{display: grid;} #fh-new-home .hos-panel{grid-area: 1 / 1;animation: none;transition: opacity 0.35s ease, visibility 0.35s;} #fh-new-home .hos-panel[hidden]{display: grid;visibility: hidden;opacity: 0;pointer-events: none;}} @media (min-width: 1200px) { /* Shorter panels keep their buttons on the same line as the longest one. */ #fh-new-home .hos-panel{align-items: stretch;} #fh-new-home .hos-panel-media{align-self: start;} #fh-new-home .hos-panel-body{display: flex;flex-direction: column;} #fh-new-home .hos-panel-actions{margin-top: auto;} } @media (max-width: 1199px) { #fh-new-home #nav{gap: 16px;} #fh-new-home .nav-logo-img{height: 40px;} #fh-new-home .nav-center{gap: 16px;} #fh-new-home .cta-pane { padding: 60px 24px; } #fh-new-home .section,#fh-new-home #impact, #fh-new-home #testimonials, #fh-new-home .cta-pane,#fh-new-home .cinema-strip{padding: 80px 16px;} #fh-new-home .two-col{gap: 42px;} #fh-new-home .hos-head{gap: 42px;} #fh-new-home .hos-panel{grid-template-columns: 1fr;gap: 24px;padding: 28px;} #fh-new-home .hos-panel-media{order: 0;display: grid;grid-template-columns: 180px 1fr;gap: 20px;align-items: center;} #fh-new-home .hos-panel-highlights{margin-top: 0;} #fh-new-home .hos-video-label{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;} #fh-new-home .hos-video-btn{left: 50%;top: 50%;bottom: auto;transform: translate(-50%, -50%);padding: 0;background: none;box-shadow: none;backdrop-filter: none;-webkit-backdrop-filter: none;} #fh-new-home .hos-video-btn:hover{transform: translate(-50%, -50%) scale(1.06);} #fh-new-home .hos-video-icon{box-shadow: 0 6px 18px rgba(0,0,0,0.25);} } @media (max-width: 991px) { #fh-new-home .nav-center{display: none; padding: 24px; position: fixed;top: 100%;left: 0;right: 0;background: var(--dark);flex-direction: column;align-items: flex-start;transition: all 0.35s cubic-bezier(0.22,1,0.36,1);} #fh-new-home #nav.active .nav-center{display: flex;} #fh-new-home .hero-2col { grid-template-columns: 1fr; gap: 44px; } #fh-new-home .hero-sub.hero-sub-left { max-width: none; } #fh-new-home .mcard { padding: 24px; } #fh-new-home .two-col { grid-template-columns: 1fr; gap: 44px; } #fh-new-home .test-grid { grid-template-columns: 1fr 1fr; } #fh-new-home .impact-grid { grid-template-columns: repeat(2, 1fr); } #fh-new-home #final-cta { grid-template-columns: 1fr; } #fh-new-home .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } #fh-new-home .steps-grid { grid-template-columns: 1fr; } #fh-new-home .steps-grid.claims-steps{grid-template-columns: repeat(2, minmax(0, 1fr));} #fh-new-home .cta-body{max-width: 100%;} #fh-new-home .hos-head{grid-template-columns: 1fr;gap: 0;margin-bottom: 36px;} #fh-new-home .hos-tabs-wrap{grid-template-columns: 1fr;gap: 16px;} #fh-new-home .hos-tabs-col{display: contents;} #fh-new-home .hos-tabs-col .stats-strip-light{order: 3;margin-top: 0;} #fh-new-home .hos-tabs{flex-direction: row;overflow-x: auto;scroll-snap-type: x mandatory;scroll-padding-inline: 16px;margin: 0 -16px;padding: 4px 16px 8px;scrollbar-width: none;} #fh-new-home .hos-tabs::-webkit-scrollbar{display: none;} #fh-new-home .hos-tabs li{flex: 0 0 auto;scroll-snap-align: start;} #fh-new-home .hos-tab{width: auto;gap: 10px;padding: 8px 14px 8px 8px;border-radius: 980px;} #fh-new-home .hos-tab::before{display: none;} #fh-new-home .hos-tab:hover{transform: none;} #fh-new-home .hos-tab.is-active{background: var(--navy);border-color: var(--navy);box-shadow: 0 8px 20px rgba(44,58,66,0.25);} #fh-new-home .hos-tab.is-active .hos-tab-title{color: #fff;} #fh-new-home .hos-tab-icon,#fh-new-home .hos-tab-icon svg{width: 32px;height: 32px;} #fh-new-home .hos-tab-title{white-space: nowrap;margin-bottom: 0;font-size: 14px;} #fh-new-home .hos-tab-desc{display: none;} #fh-new-home .hos-tab-go{display: none;} #fh-new-home .fh-demo-box{grid-template-columns: 1fr;max-width: 620px;} #fh-new-home .fh-demo-aside{padding: 32px 28px 26px;} #fh-new-home .fh-demo-text{margin-bottom: 0;} #fh-new-home .fh-demo-points{display: none;} #fh-new-home .fh-demo-main{padding: 28px;} #fh-new-home .fh-demo-close{background: rgba(255,255,255,0.12);color: #fff;} #fh-new-home .fh-cta-banner{padding: 44px 20px;background: radial-gradient( circle at 50% 0%, rgba(255, 60, 80, 0.35) 0%, transparent 60% ), linear-gradient( 180deg, #E02E40 0%, #870f1a 55%, #0e0204 100% );} #fh-new-home .fh-cta-container{flex-direction: column;text-align: center;gap: 24px;} #fh-new-home .fh-cta-title{font-size: 26px;line-height: 1.22;} #fh-new-home .fh-cta-btn{width: 100%;max-width: 280px;padding: 14px 28px;font-size: 15px;} } @media (max-width: 600px) { #fh-new-home .nav-center { display: none; } #fh-new-home .hero-paths { flex-direction: column; align-items: center; } #fh-new-home .path-card { width: 100%; max-width: 320px; } #fh-new-home .footer-grid { grid-template-columns: 1fr; } #fh-new-home .test-grid { grid-template-columns: 1fr; } #fh-new-home .footer-bottom{flex-wrap: wrap;gap: 12px;justify-content: center;text-align: center;} #fh-new-home .footer-brand-p{max-width: 100%;} #fh-new-home .opd-price{font-size: 40px;} #fh-new-home .fh-header{padding: 12px 16px;} #fh-new-home .opd-card{padding: 30px;} #fh-new-home .corp-audiences{grid-template-columns: 1fr;gap: 24px;} #fh-new-home .steps-grid.claims-steps{grid-template-columns: 1fr;} #fh-new-home .claims-switch-btn{padding: 10px 16px;} #fh-new-home .hos-panel{padding: 22px 18px;border-radius: var(--radius-md);} #fh-new-home .hos-panel-media{grid-template-columns: 110px 1fr;gap: 14px;} #fh-new-home .hos-panel-img{border-radius: var(--radius-sm);} #fh-new-home .hos-panel-highlights{gap: 6px;} #fh-new-home .hos-panel-highlights li{padding: 8px 10px;font-size: 12px;} #fh-new-home .hos-panel-h3{margin-bottom: 22px;} #fh-new-home .hos-panel-actions{flex-direction: column;align-items: stretch;gap: 14px;} #fh-new-home .hos-panel-actions .btn{justify-content: center;} #fh-new-home .hos-panel-more{justify-content: center;padding: 4px 0;} #fh-new-home .fh-demo-modal{padding: 12px;} #fh-new-home .fh-demo-box{max-height: calc(100vh - 24px);max-height: calc(100dvh - 24px);border-radius: var(--radius-md);} #fh-new-home .fh-demo-aside{padding: 26px 20px 20px;} #fh-new-home .fh-demo-title{font-size: 24px;padding-right: 36px;} #fh-new-home .fh-demo-text{font-size: 14px;} #fh-new-home .fh-demo-main{padding: 22px 20px 24px;} #fh-new-home .fh-demo-form .wpcf7-form{grid-template-columns: minmax(0, 1fr);gap: 12px;} #fh-new-home .fh-demo-form .wpcf7-form [class*="input-field"]{grid-column: 1 / -1;} #fh-new-home .stat-val{font-size: 24px;} #fh-new-home .stat-cell-light{padding: 16px 12px;} #fh-new-home #hero{padding: 120px 16px;} #fh-new-home .stats-strip-light{border-radius: 14px;} #fh-new-home .nav-logo-img,#fh-new-home .footer-logo-img{height: 32px;} #fh-new-home .btn-nav-ghost,#fh-new-home .btn-nav-red{padding: 6px 10px;} #fh-new-home .section,#fh-new-home #impact, #fh-new-home #testimonials, #fh-new-home .cta-pane,#fh-new-home .cinema-strip{padding: 60px 16px;} #fh-new-home .cinema-strip-text{padding: 0;} #fh-new-home .test-header{margin-bottom: 32px;} #fh-new-home footer{padding: 56px 16px 32px;} #fh-new-home .fh-explainer-modal-box{border-radius: 18px;max-height: 94vh;} } @media (max-width: 420px){ #fh-new-home .fh-cta-banner{padding: 38px 16px;} #fh-new-home .fh-cta-title{font-size: 23px;} #fh-new-home .fh-cta-btn{max-width: 100%;} } @media (prefers-reduced-motion: reduce){ #fh-new-home .hos-panel, #fh-new-home .claims-panel{animation: none;} } /* ── App banner (options page → "App Banner" tab) ────────────────────────── The banner sits in normal document flow and scrolls away with the page. .fh-header starts absolutely positioned just below it (--fhnh-banner-h is the banner's real height, measured by js/new-home.js; 44px avoids a jump before JS runs). After 100px of scroll JS adds .header-scrolled and the header becomes fixed at top: 0. The header is out of flow in both states, so switching never shifts the page content. */ #fh-new-home.has-app-banner { --fhnh-banner-h: 44px; position: relative; } #fh-new-home.has-app-banner .fh-header { position: absolute; top: var(--fhnh-banner-h); } #fh-new-home.app-banner-dismissed { --fhnh-banner-h: 0px; } #fh-new-home.app-banner-dismissed .app-banner { display: none; } #fh-new-home .app-banner { position: relative; z-index: 1002; background: linear-gradient(90deg, #120305 0%, #1a080c 45%, #2a0b12 100%); border-bottom: 1px solid rgba(224,46,64,0.22); color: #fff; padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; } #fh-new-home .app-banner-content { display: flex; align-items: center; gap: 12px; font-size: 13.9px; font-weight: 500; line-height: 1.4; margin: 0 auto; } #fh-new-home .app-banner-tag { background: var(--red); color: #fff; font-size: 10.7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 9999px; } #fh-new-home .app-banner-badges { display: flex; align-items: center; gap: 8px; } #fh-new-home .store-pill { line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 9999px; padding: 4px 12px; color: #fff; text-decoration: none; font-size: 11.8px; font-weight: 600; transition: all 0.2s ease; } #fh-new-home .store-pill:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.25); transform: translateY(-1px); } #fh-new-home .store-pill svg { width: 13px; height: 13px; fill: currentColor; } #fh-new-home .app-banner-close { background: transparent; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 17.1px; line-height: 1; display: flex; align-items: center; padding: 4px; transition: color 0.2s; } #fh-new-home .app-banner-close:hover { color: #fff; } @media (max-width: 767px) { #fh-new-home .app-banner { padding: 8px 16px; } #fh-new-home .app-banner-content { flex-wrap: wrap; justify-content: center; gap: 8px; text-align: center; font-size: 12.8px; } } /* Scrolled: header sticks to the top of the viewport and slides in. */ #fh-new-home .fh-header.header-scrolled { position: fixed; top: 0; animation: fhnhHeaderIn 0.35s cubic-bezier(0.22,1,0.36,1); } @keyframes fhnhHeaderIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #fh-new-home .fh-header.header-scrolled { animation: none; } } /* Logged-in admin bar is fixed above 600px wide: keep the sticky header below it. */ .admin-bar #fh-new-home .fh-header.header-scrolled { top: 32px; } @media (max-width: 782px) { .admin-bar #fh-new-home .fh-header.header-scrolled { top: 46px; } } @media (max-width: 600px) { .admin-bar #fh-new-home .fh-header.header-scrolled { top: 0; } } /* ========================================================================== Nav dropdowns — the header menu is rendered by wp_nav_menu(), so items with children get .menu-item-has-children and a nested ul.sub-menu. Desktop: dropdown on hover / keyboard focus. Mobile menu (≤991px): the ▾ button added by header-new-home.php expands the children inline. ========================================================================== */ #fh-new-home .nav-center li { position: relative; } #fh-new-home .nav-center > li { display: flex; align-items: center; } #fh-new-home .nav-center .current-menu-item > a, #fh-new-home .nav-center .current-menu-ancestor > a { color: #fff; } #fh-new-home .nav-center > .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 7px; } #fh-new-home .nav-center > .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; } #fh-new-home .nav-center > .menu-item-has-children:hover > a::after, #fh-new-home .nav-center > .menu-item-has-children:focus-within > a::after { transform: translateY(1px) rotate(225deg); } #fh-new-home .nav-center .sub-menu { position: absolute; top: calc(100% + 14px); left: -14px; z-index: 30; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: #15181b; border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; box-shadow: 0 20px 44px rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } /* Invisible bridge over the gap so the dropdown stays open while the pointer moves down to it. */ #fh-new-home .nav-center .sub-menu::before { content: ''; position: absolute; top: -15px; left: 0; right: 0; height: 15px; } #fh-new-home .nav-center li:hover > .sub-menu, #fh-new-home .nav-center li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } #fh-new-home .nav-center .sub-menu li { display: block; } #fh-new-home .nav-center .sub-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: rgba(255,255,255,0.72); transition: background 0.15s, color 0.15s; } #fh-new-home .nav-center .sub-menu a:hover, #fh-new-home .nav-center .sub-menu a:focus-visible { background: rgba(255,255,255,0.07); color: #fff; outline: none; } #fh-new-home .nav-center .sub-menu .current-menu-item > a { color: #fff; background: rgba(224,46,64,0.14); } /* Third level opens to the side */ #fh-new-home .nav-center .sub-menu .sub-menu { top: -9px; left: calc(100% + 8px); } #fh-new-home .nav-center .sub-menu .sub-menu::before { top: 0; bottom: 0; left: -9px; right: auto; width: 9px; height: auto; } #fh-new-home .nav-center .sub-menu .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); } /* Near the right edge (last two items), the third level opens to the left instead */ #fh-new-home .nav-center > li:nth-last-child(-n+2) .sub-menu .sub-menu { left: auto; right: calc(100% + 8px); } #fh-new-home .nav-center > li:nth-last-child(-n+2) .sub-menu .sub-menu::before { left: auto; right: -9px; } /* The ▾ expand button is only for the mobile menu */ #fh-new-home .fhnh-submenu-toggle { display: none; } @media (max-width: 991px) { #fh-new-home .nav-center { gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; } #fh-new-home .nav-center > li { flex-wrap: wrap; justify-content: space-between; width: 100%; } #fh-new-home .nav-center > li > a { padding: 10px 0; font-size: 16px; } #fh-new-home .nav-center > .menu-item-has-children > a::after, #fh-new-home .nav-center .sub-menu .menu-item-has-children > a::after { display: none; } #fh-new-home .fhnh-submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: rgba(255,255,255,0.06); border: none; border-radius: 10px; color: #fff; cursor: pointer; } #fh-new-home .fhnh-submenu-toggle svg { width: 18px; height: 18px; transition: transform 0.2s; } #fh-new-home .is-open > .fhnh-submenu-toggle svg { transform: rotate(180deg); } #fh-new-home .fhnh-submenu-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } #fh-new-home .nav-center .sub-menu, #fh-new-home .nav-center .sub-menu .sub-menu { position: static; display: none; width: 100%; min-width: 0; margin: 2px 0 8px; padding: 2px 0 2px 14px; background: transparent; border: none; border-left: 1px solid rgba(255,255,255,0.14); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } #fh-new-home .nav-center .sub-menu::before { display: none; } #fh-new-home .nav-center li.is-open > .sub-menu { display: block; } #fh-new-home .nav-center .sub-menu li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } #fh-new-home .nav-center .sub-menu a { padding: 9px 10px; font-size: 15px; white-space: normal; } #fh-new-home .nav-center .sub-menu .fhnh-submenu-toggle { width: 32px; height: 32px; } } /* ========================================================================== Book-a-demo popup — corner + close-button fixes The box's white background showed as a thin white fringe around the dark panel's rounded corners, so each half now paints its own rounded corners and the box itself is transparent. The form starts lower so the × no longer touches the first row of fields. ========================================================================== */ #fh-new-home .fh-demo-box { background: transparent; } #fh-new-home .fh-demo-aside { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } #fh-new-home .fh-demo-main { background: #fff; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding-top: 72px; } #fh-new-home .fh-demo-close { top: 18px; right: 18px; } @media (max-width: 991px) { /* Stacked: dark header on top (the × sits on it), white form below */ #fh-new-home .fh-demo-aside { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } #fh-new-home .fh-demo-main { border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding-top: 28px; } } @media (max-width: 600px) { #fh-new-home .fh-demo-aside { border-radius: var(--radius-md) var(--radius-md) 0 0; } #fh-new-home .fh-demo-main { border-radius: 0 0 var(--radius-md) var(--radius-md); padding-top: 22px; } } /* Right-hand menu (Appearance → Menus → location "Top Navigation Menu Pull Right"), rendered as ul > li.menu-item with the buttons inside. */ #fh-new-home .nav-right-menu { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } #fh-new-home .nav-right-menu li { margin: 0; padding: 0; list-style: none; } #fh-new-home .nav-right-menu .btn-nav-ghost, #fh-new-home .nav-right-menu .btn-nav-red { display: inline-flex; align-items: center; white-space: nowrap; }