/* ── Reset ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Manrope',system-ui,sans-serif;background:#07060D;color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* FINAL — theme the browser's own scrollbar track/thumb to match the dark background. Without this, the native scrollbar leaves a bright white strip along the viewport's right edge that visibly breaks the full-bleed dark hero, no matter what color the page content itself is. */ html{scrollbar-color:rgba(168,113,255,.45) #07060D;scrollbar-width:thin} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#07060D} ::-webkit-scrollbar-thumb{background:rgba(168,113,255,.45);border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:rgba(168,113,255,.65)} img,svg{display:block;max-width:100%} a{text-decoration:none;color:inherit} button{font-family:inherit;border:none;cursor:pointer;background:none} ul,ol{list-style:none} /* ── Design Tokens ── */ :root { /* Background */ --bg-hero: #07060D; --bg-dark: #08070E; --bg-dark2: #0B0A14; --bg-light: #F9F7F4; --bg-card: #ffffff; /* Brand */ --gold: #C8A84B; --gold-lt: #DFC06E; --gold-dk: #A8892C; /* Accent */ --purple: #6D28D9; --purple-lt: #7C3AED; --purple-dk: #4C1D95; --indigo: #3730A3; --teal: #0D9488; --blue: #2563EB; --green: #059669; --amber: #D97706; /* Gradient stops (restrained) */ --g-orange: #F97316; --g-pink: #DB2777; --g-purple: #7C3AED; /* Text */ --text-ink: #0F0E18; --text-dim: rgba(255,255,255,.45); --text-muted:rgba(255,255,255,.28); /* Spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; --s11: 96px; /* Layout */ --pad-x: clamp(24px,5vw,72px); --section-py: clamp(56px,7vw,88px); /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill:100px; /* Shadows (minimal) */ --shadow-xs: 0 1px 3px rgba(0,0,0,.07); --shadow-sm: 0 2px 8px rgba(0,0,0,.08); --shadow-md: 0 4px 16px rgba(0,0,0,.09); --shadow-lg: 0 6px 24px rgba(0,0,0,.1); } /* ── Skip link ── */ .skip-link{position:absolute;top:-100%;left:var(--s5);padding:var(--s2) var(--s5);background:var(--gold);color:#000;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;z-index:9999;border-radius:0 0 var(--r-md) var(--r-md);transition:top .2s} .skip-link:focus{top:0} /* ── Visually hidden ── */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} /* ══════════════════════════════════ NAV ══════════════════════════════════ */ .nav{ position:sticky;top:0;z-index:100; height:66px;padding:0 var(--pad-x); display:flex;align-items:center;justify-content:space-between;gap:var(--s6); background:rgba(7,6,13,.94); border-bottom:1px solid rgba(255,255,255,.055); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px) } /* PASS 1 — Logo: official asset placeholder. Replace .nav__logo-img src with the official E4LA logo PNG/SVG when available. */ .nav__logo{display:flex;flex-direction:column;gap:1px;text-decoration:none;flex-shrink:0} .nav__logo-lockup{display:flex;align-items:flex-end;gap:0;line-height:1} .nav__logo-e4{font-size:21px;font-weight:800;letter-spacing:.2px;color:#fff;font-family:'Manrope',sans-serif} .nav__logo-palm{display:inline-flex;align-items:flex-end;margin:0 1px -2px;width:16px;height:20px} .nav__logo-palm svg{width:16px;height:20px} .nav__logo-la{font-size:21px;font-weight:800;letter-spacing:.2px;color:#fff;font-family:'Manrope',sans-serif} .nav__logo-sub{font-size:6.5px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:rgba(255,255,255,.3);padding-left:1px} .nav__logo-atelier{font-size:6px;font-weight:400;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.16);padding-left:1px;margin-top:1px} .nav__links{display:flex;align-items:center;gap:var(--s7)} .nav__link{ font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase; color:rgba(255,255,255,.5);transition:color .2s;padding:var(--s2) 0; display:inline-flex;align-items:center;gap:var(--s1) } .nav__link:hover{color:rgba(255,255,255,.9)} .nav__link:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:var(--r-sm)} .nav__link svg{width:11px;height:11px;opacity:.4;margin-top:1px} .nav__cta{ padding:8px 18px;border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.28);color:#fff; font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase; display:inline-flex;align-items:center;gap:var(--s2); transition:background .2s,border-color .2s;flex-shrink:0 } .nav__cta:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.5)} .nav__cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .nav__cta svg{width:12px;height:12px} /* ══════════════════════════════════ HERO ══════════════════════════════════ */ .hero{ min-height:calc(100vh - 66px); display:grid;grid-template-columns:42% 58%; align-items:center; padding:var(--s10) var(--pad-x) var(--s9); background:var(--bg-hero); position:relative;overflow:hidden } /* Subtle radial ambient on left */ .hero::before{ content:'';position:absolute; left:-10%;top:10%;width:50%;height:80%; background:radial-gradient(ellipse,rgba(60,20,120,.14) 0%,transparent 70%); pointer-events:none } .hero__left{z-index:2;position:relative;padding-right:var(--s8)} .hero__eyebrow{ display:inline-flex;align-items:center;gap:var(--s3); font-size:9.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase; color:rgba(255,255,255,.35);margin-bottom:var(--s7) } .hero__eyebrow::before{content:'';width:18px;height:1px;background:var(--gold);opacity:.7} .hero__h1{ font-family:'Manrope',sans-serif; font-size:clamp(38px,3.8vw,54px); font-weight:700; line-height:1.1;letter-spacing:-.5px; color:#fff;margin-bottom:var(--s6) } .hero__h1 .word{ background:linear-gradient(95deg,var(--g-orange) 0%,var(--g-pink) 48%,var(--g-purple) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; display:inline-block } .hero__desc{ font-size:14px;line-height:1.75;font-weight:300; color:rgba(255,255,255,.48);max-width:360px;margin-bottom:var(--s8) } .hero__actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap} .btn-outline-white{ display:inline-flex;align-items:center;gap:var(--s3); padding:11px 22px;border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.35);color:#fff; font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase; transition:background .22s,border-color .22s } .btn-outline-white:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6)} .btn-outline-white:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn-outline-white svg{width:13px;height:13px} .btn-play{ display:inline-flex;align-items:center;gap:var(--s3); padding:10px 20px;border-radius:var(--r-pill); background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff; font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase; transition:background .22s } .btn-play:hover{background:rgba(255,255,255,.12)} .btn-play:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn-play__ring{ width:24px;height:24px;border-radius:50%; background:rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center;flex-shrink:0 } .btn-play__ring svg{width:9px;height:10px;margin-left:1px} /* ── Hero Right / Ring ── */ .hero__right{ display:flex;justify-content:center;align-items:center; position:relative;z-index:1 } /* PASS 2: ring ~15% smaller than initial 520px → 445px */ .ring-wrap{ width:445px;height:445px; position:relative;flex-shrink:0 } /* PASS 5: Outer ambient — much more restrained */ .ring-wrap::before{ content:'';position:absolute; inset:-44px;border-radius:50%; background:conic-gradient(from 240deg, rgba(109,40,217,.18) 0%, rgba(168,28,100,.22) 22%, rgba(219,39,119,.18) 40%, rgba(249,115,22,.22) 56%, rgba(249,115,22,.16) 64%, rgba(109,40,217,.18) 85%, rgba(109,40,217,.18) 100% ); filter:blur(22px);z-index:0 } .ring{ position:absolute;inset:0;border-radius:50%;z-index:1 } /* Ring border — sharper, less bloom */ .ring::before{ content:'';position:absolute; inset:-2px;border-radius:50%; background:conic-gradient(from 240deg, #4C1D95 0%, #6D28D9 10%, #8B5CF6 18%, #A21CAF 30%, #DB2777 40%, #EC4899 50%, #F97316 58%, #FB923C 64%, #F97316 70%, #A21CAF 80%, #6D28D9 90%, #4C1D95 100% ); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),white calc(100% - 2.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),white calc(100% - 2.5px)) } /* Tighter glow halo — no heavy blur */ .ring::after{ content:'';position:absolute; inset:-7px;border-radius:50%; background:conic-gradient(from 240deg, rgba(76,29,149,.4) 0%, rgba(162,28,175,.42) 26%, rgba(249,115,22,.4) 55%, rgba(109,40,217,.38) 86%, rgba(76,29,149,.4) 100% ); filter:blur(5px); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 16px),white calc(100% - 7px)); mask:radial-gradient(farthest-side,transparent calc(100% - 16px),white calc(100% - 7px)) } .ring-inner{ position:absolute; inset:2.5px;border-radius:50%; background:radial-gradient(circle at 50% 30%,#120A38 0%,#0C0620 40%,#070418 72%,#050316 100%); overflow:hidden;z-index:2 } .ring-city{ position:absolute;bottom:0;left:0;right:0;height:55% } /* PASS 2: ring text ~15% smaller */ .ring-text{ position:absolute;top:50%;left:50%; transform:translate(-50%,-62%); text-align:center;z-index:3 } .ring-text__logo{ display:flex;align-items:flex-end;justify-content:center;gap:0; font-family:'Manrope',sans-serif; font-size:clamp(44px,5vw,60px);font-weight:800;letter-spacing:.5px;color:#fff;line-height:1 } .ring-text__palm{ display:inline-flex;align-items:flex-end; margin:0 2px -3px; width:clamp(34px,4vw,48px);height:auto } .ring-text__palm svg{width:100%;height:auto} .ring-text__sub{ font-size:8px;font-weight:600;letter-spacing:4.5px;text-transform:uppercase; color:rgba(255,255,255,.45);margin-top:var(--s2) } /* ══════════════════════════════════ SERVICES ══════════════════════════════════ */ .sec-services{ padding:var(--section-py) var(--pad-x); background:#FAFAF8 } .services-top{ display:grid;grid-template-columns:260px 1fr; align-items:end;gap:var(--s8);margin-bottom:var(--s8) } .label-tag{ font-size:9.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase; color:var(--purple-lt);margin-bottom:var(--s3) } .services-top__h2{ font-family:'Manrope',sans-serif; font-size:clamp(24px,2.2vw,30px);line-height:1.18;color:var(--text-ink) } .services-top__link{ display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s4); font-size:9.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase; color:var(--purple-lt);transition:gap .2s } .services-top__link:hover{gap:var(--s4)} .services-top__link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)} .services-top__link svg{width:13px;height:13px} .services-grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4) } .svc-card{ background:var(--bg-card);border-radius:var(--r-lg); padding:var(--s6) var(--s5) var(--s5); display:flex;flex-direction:column;gap:var(--s3); border:1px solid rgba(0,0,0,.055); box-shadow:var(--shadow-xs); transition:box-shadow .25s,transform .25s } .svc-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} /* PASS 6: smaller icons */ .svc-icon{ width:42px;height:42px;border-radius:var(--r-md); display:flex;align-items:center;justify-content:center;flex-shrink:0 } .svc-icon svg{width:20px;height:20px} .svc-icon--purple{background:rgba(109,40,217,.1);color:var(--purple-lt)} .svc-icon--blue{background:rgba(37,99,235,.1);color:var(--blue)} .svc-icon--green{background:rgba(5,150,105,.1);color:var(--green)} .svc-icon--amber{background:rgba(217,119,6,.1);color:var(--amber)} .svc-icon--indigo{background:rgba(55,48,163,.1);color:var(--indigo)} .svc-card__title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-ink);margin-top:var(--s1)} .svc-card__desc{font-size:12px;line-height:1.68;font-weight:300;color:rgba(15,14,24,.52);flex:1} .svc-card__arr{ width:26px;height:26px;border-radius:50%; border:1px solid rgba(0,0,0,.1); display:flex;align-items:center;justify-content:center; color:rgba(0,0,0,.32);align-self:flex-start;margin-top:var(--s2);flex-shrink:0; transition:background .2s,border-color .2s,color .2s } .svc-card__arr svg{width:11px;height:11px} .svc-card:hover .svc-card__arr{background:var(--purple-lt);border-color:var(--purple-lt);color:#fff} .svc-card__arr:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ══════════════════════════════════ APPROACH ══════════════════════════════════ */ .sec-approach{ padding:var(--section-py) var(--pad-x); background:var(--bg-dark2) } .approach-layout{ display:grid;grid-template-columns:280px 1fr; align-items:center;gap:var(--s11) } .approach__label{ font-size:9.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase; color:rgba(255,255,255,.3);margin-bottom:var(--s3) } .approach__h2{ font-family:'Manrope',sans-serif; font-size:clamp(22px,2.2vw,29px);line-height:1.22;color:#fff;margin-bottom:var(--s4) } .approach__h2 em{color:var(--gold);font-style:italic} .approach__desc{ font-size:13px;line-height:1.78;font-weight:300; color:rgba(255,255,255,.42);margin-bottom:var(--s7) } .btn-outline-gold{ display:inline-flex;align-items:center;gap:var(--s2); padding:9px 20px;border-radius:var(--r-pill); border:1px solid rgba(200,168,75,.28);color:var(--gold); font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase; transition:background .2s,border-color .2s } .btn-outline-gold:hover{background:rgba(200,168,75,.07);border-color:rgba(200,168,75,.55)} .btn-outline-gold:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn-outline-gold svg{width:12px;height:12px} /* PASS 7: timeline — smaller circles */ .timeline{position:relative;padding-top:var(--s2)} .timeline__track{ position:absolute;top:26px;left:26px;right:26px;height:1px; background:linear-gradient(90deg, rgba(109,40,217,.4) 0%, rgba(200,168,75,.35) 38%, rgba(37,99,235,.35) 68%, rgba(5,150,105,.4) 100% ) } .timeline__steps{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)} .tstep{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1} /* Reduced circle: 52px (was 70px) */ .tstep__circle{ width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:'Manrope',sans-serif;font-size:15px;font-style:italic;color:#fff; border:1px solid;background:var(--bg-dark2); margin-bottom:var(--s4); transition:transform .22s } .tstep:hover:not(.tstep--auto-active) .tstep__circle{transform:none !important} /* Softer glows */ .tstep--1 .tstep__circle{border-color:rgba(109,40,217,.65);box-shadow:0 0 12px rgba(109,40,217,.15)} .tstep--2 .tstep__circle{border-color:rgba(200,168,75,.55);box-shadow:0 0 12px rgba(200,168,75,.12)} .tstep--3 .tstep__circle{border-color:rgba(200,168,75,.5);box-shadow:0 0 12px rgba(200,168,75,.1)} .tstep--4 .tstep__circle{border-color:rgba(37,99,235,.6);box-shadow:0 0 12px rgba(37,99,235,.15)} .tstep--5 .tstep__circle{border-color:rgba(200,168,75,.5);box-shadow:0 0 12px rgba(200,168,75,.12)} .tstep--6 .tstep__circle{border-color:rgba(5,150,105,.6);box-shadow:0 0 12px rgba(5,150,105,.15)} .tstep__name{ font-size:9.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase; color:#fff;margin-bottom:var(--s1) } .tstep__sub{ font-size:10px;font-weight:300;color:rgba(255,255,255,.32); line-height:1.55;max-width:78px } /* ══════════════════════════════════ STATS STRIP ══════════════════════════════════ */ .sec-stats{ padding:28px var(--pad-x); /* PASS 8: softer, less saturated gradient */ background:linear-gradient(90deg,#160848 0%,#2D0C84 28%,#3B1690 50%,#2D0C84 72%,#160848 100%) } .stats-grid{display:grid;grid-template-columns:repeat(5,1fr)} .stat{ display:flex;align-items:center;gap:var(--s4); padding:var(--s2) var(--s5); border-right:1px solid rgba(255,255,255,.08) } .stat:last-child{border-right:none} /* PASS 8: smaller icons */ .stat__ico{width:28px;height:28px;flex-shrink:0;color:rgba(255,255,255,.6);opacity:.85} .stat__ico svg{width:100%;height:100%} .stat__num{font-size:23px;font-weight:700;color:#fff;line-height:1;letter-spacing:-.3px} .stat__label{font-size:10px;font-weight:400;color:rgba(255,255,255,.48);margin-top:2px;letter-spacing:.2px} /* ══════════════════════════════════ WHY E4LA ══════════════════════════════════ */ .sec-why{ padding:var(--section-py) var(--pad-x); background:var(--bg-dark) } .why-layout{ display:grid;grid-template-columns:240px 1fr; gap:var(--s11);align-items:start } .why__label{ font-size:9.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase; color:rgba(255,255,255,.3);margin-bottom:var(--s3) } .why__h2{ font-family:'Manrope',sans-serif; font-size:clamp(22px,2.1vw,28px);line-height:1.22;color:#fff } .why__rule{width:24px;height:1.5px;background:var(--gold);opacity:.7;margin-top:var(--s5)} /* PASS 9: more whitespace */ .why-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:var(--s8) var(--s10) } .why-item__head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)} .why-item__ico{ width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0 } .why-item__ico svg{width:14px;height:14px} .why-item__ico--blue {background:rgba(37,99,235,.16); color:#93C5FD} .why-item__ico--gold {background:rgba(200,168,75,.16); color:var(--gold-lt)} .why-item__ico--teal {background:rgba(13,148,136,.16); color:#5EEAD4} .why-item__ico--purple{background:rgba(109,40,217,.16); color:#C4B5FD} .why-item__ico--pink {background:rgba(219,39,119,.16); color:#FDA4AF} .why-item__title{font-size:12.5px;font-weight:700;color:var(--gold-lt)} .why-item__body{font-size:12px;line-height:1.68;font-weight:300;color:rgba(255,255,255,.36)} /* ══════════════════════════════════ COACHING ══════════════════════════════════ */ .sec-coaching{ padding:var(--section-py) var(--pad-x); background:#fff } .coaching-layout{ display:grid;grid-template-columns:1fr 320px; gap:var(--s9);align-items:start } .coaching__label{ font-size:9.5px;font-weight:700;letter-spacing:3px;text-transform:uppercase; color:var(--purple-lt);margin-bottom:var(--s4) } .coaching__h2{ font-family:'Manrope',sans-serif; font-size:clamp(22px,2.2vw,29px);line-height:1.2;color:var(--text-ink);margin-bottom:var(--s4) } .coaching__desc{ font-size:13.5px;line-height:1.78;font-weight:300; color:rgba(15,14,24,.48);margin-bottom:var(--s7) } /* PASS 10: audience cards */ .audience-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)} .aud-card{ padding:var(--s5) var(--s4) var(--s4); border-radius:var(--r-xl); border:1.5px solid rgba(0,0,0,.07); display:flex;flex-direction:column;gap:var(--s2); cursor:pointer;transition:border-color .2s,box-shadow .2s } .aud-card:hover{border-color:var(--purple-lt);box-shadow:0 3px 16px rgba(109,40,217,.09)} .aud-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .aud-card__ico{width:32px;height:32px;color:rgba(0,0,0,.3)} .aud-card__ico svg{width:100%;height:100%} .aud-card__name{font-size:12.5px;font-weight:700;color:var(--text-ink)} .aud-card__desc{font-size:11px;line-height:1.6;font-weight:300;color:rgba(15,14,24,.44);flex:1} .aud-card__radio{ width:14px;height:14px;border-radius:50%; border:1.5px solid rgba(0,0,0,.18); margin-top:var(--s1);flex-shrink:0 } /* PASS 10: elegant calendar */ .calendar-widget{ background:#FAFAF8;border-radius:var(--r-xl); padding:var(--s6);border:1px solid rgba(0,0,0,.07); box-shadow:var(--shadow-sm) } .cal__title{ font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase; color:rgba(15,14,24,.32);margin-bottom:var(--s5) } .cal__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)} .cal__month{font-size:12.5px;font-weight:700;color:var(--text-ink)} .cal__btn{ width:24px;height:24px;border-radius:50%; border:1px solid rgba(0,0,0,.08);background:transparent; display:flex;align-items:center;justify-content:center; cursor:pointer;color:rgba(15,14,24,.4);font-size:11px; transition:background .18s } .cal__btn:hover{background:rgba(0,0,0,.05)} .cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center} .cal__day-name{ font-size:9px;font-weight:600; color:rgba(15,14,24,.3);padding-bottom:var(--s2);letter-spacing:.5px } .cal__date{ font-size:11.5px;font-weight:400;color:var(--text-ink); width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center; margin:0 auto;cursor:pointer; transition:background .14s } .cal__date:hover{background:rgba(0,0,0,.05)} .cal__date--today{ background:var(--teal);color:#fff;font-weight:600 } .cal__date--today:hover{background:#0b8478} .cal__date--empty{pointer-events:none} .cal__cta{ width:100%;margin-top:var(--s4); padding:12px;border-radius:var(--r-pill); background:linear-gradient(105deg,#0A0715,#1E0A5E); color:#fff;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase; display:flex;align-items:center;justify-content:center;gap:var(--s3); cursor:pointer;transition:opacity .2s } .cal__cta:hover{opacity:.85} .cal__cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .cal__cta svg{width:13px;height:13px} .cal__note{ font-size:10px;color:rgba(15,14,24,.3); text-align:center;margin-top:var(--s3);letter-spacing:.2px } /* ══════════════════════════════════ CTA BAND ══════════════════════════════════ */ /* PASS 11: harmonized gradient blend */ .sec-cta{ display:grid;grid-template-columns:1fr 1fr; min-height:200px } .cta-dark{ padding:var(--s9) var(--pad-x); background:linear-gradient(130deg,#0B0A16 0%,#0E0B1C 60%,#120D28 100%); display:flex;flex-direction:column;justify-content:center } .cta-dark__h2{ font-family:'Manrope',sans-serif; font-size:clamp(24px,2.5vw,33px);line-height:1.18;color:#fff } .cta-warm{ padding:var(--s9) var(--s10); background:linear-gradient(130deg,#4A2400 0%,#7A3D00 35%,#B8780A 65%,var(--gold) 85%,var(--gold-lt) 100%); display:flex;flex-direction:column;justify-content:center;gap:var(--s5); position:relative;overflow:hidden } .cta-warm::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 75% 80% at 65% 50%,rgba(255,210,80,.12),transparent 60%) } .cta-warm__text{ font-size:15px;line-height:1.7;color:rgba(255,255,255,.5); font-weight:300;position:relative;z-index:1 } .cta-warm__btn{ display:inline-flex;align-items:center;gap:var(--s3); padding:12px 24px;border-radius:var(--r-pill); background:rgba(8,5,0,.75);color:var(--gold); font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase; position:relative;z-index:1;align-self:flex-start; transition:background .2s } .cta-warm__btn:hover{background:rgba(8,5,0,.92)} .cta-warm__btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .cta-warm__btn svg{width:13px;height:13px} /* ══════════════════════════════════ FOOTER ══════════════════════════════════ */ .footer{ background:var(--bg-dark); border-top:1px solid rgba(255,255,255,.04); padding:var(--s9) var(--pad-x) var(--s7) } /* PASS 12: generous top layout */ .footer__top{ display:grid;grid-template-columns:180px 1fr; gap:var(--s11);margin-bottom:var(--s9) } /* Smaller footer logo */ .footer__brand{} .footer__logo-lockup{ display:flex;align-items:flex-end;gap:0;line-height:1;margin-bottom:2px } .footer__logo-e4{font-size:17px;font-weight:800;letter-spacing:.2px;color:#fff;font-family:'Manrope',sans-serif} .footer__logo-palm{display:inline-flex;align-items:flex-end;margin:0 1px -2px;width:13px;height:17px} .footer__logo-palm svg{width:13px;height:17px} .footer__logo-la{font-size:17px;font-weight:800;letter-spacing:.2px;color:#fff;font-family:'Manrope',sans-serif} .footer__logo-sub{font-size:6px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:rgba(255,255,255,.25);padding-left:1px} .footer__logo-atelier{font-size:5.5px;font-weight:400;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.13);padding-left:1px;margin-top:1px} .footer__tagline{ font-size:12px;font-weight:300;color:rgba(255,255,255,.3); line-height:1.65;margin:var(--s4) 0 var(--s5);max-width:160px } .footer__socials{display:flex;gap:var(--s2)} .footer__soc{ width:30px;height:30px;border-radius:50%; border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.3); transition:border-color .2s,color .2s } .footer__soc:hover{border-color:var(--gold);color:var(--gold)} .footer__soc:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .footer__soc svg{width:13px;height:13px} .footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8)} .footer__col-head{ font-size:8.5px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase; color:rgba(255,255,255,.18);margin-bottom:var(--s5) } .footer__links{display:flex;flex-direction:column;gap:var(--s3)} .footer__links a{ font-size:12.5px;color:rgba(255,255,255,.3); font-weight:300;transition:color .2s } .footer__links a:hover{color:rgba(255,255,255,.7)} .footer__links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:var(--r-sm)} .footer__nl-note{ font-size:12px;font-weight:300;color:rgba(255,255,255,.3); line-height:1.65;margin-bottom:var(--s4) } /* PASS 12: slimmer newsletter field */ .footer__form{ display:flex; border:1px solid rgba(255,255,255,.09); border-radius:var(--r-pill);overflow:hidden; transition:border-color .2s } .footer__form:focus-within{border-color:rgba(200,168,75,.3)} .footer__input{ flex:1;background:transparent;border:none; padding:9px 16px; font-size:12.5px;color:#fff;font-family:inherit;outline:none; min-width:0 } .footer__input::placeholder{color:rgba(255,255,255,.18)} .footer__submit{ padding:9px 16px;background:var(--gold);color:#000; font-size:13px;font-weight:700;flex-shrink:0;cursor:pointer; border-radius:0 var(--r-pill) var(--r-pill) 0; transition:background .2s } .footer__submit:hover{background:var(--gold-lt)} .footer__submit:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .footer__bottom{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:var(--s3); padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.04) } .footer__copy,.footer__made{ font-size:10.5px;color:rgba(255,255,255,.18);font-weight:300 } /* ── Reveal ── */ [data-r]{ opacity:0;transform:translateY(12px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1); will-change:opacity,transform } [data-r="left"]{transform:translateX(-12px)} [data-r="right"]{transform:translateX(12px);opacity:0} [data-r].in{opacity:1;transform:none} [data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.18s} [data-d="3"]{transition-delay:.28s}[data-d="4"]{transition-delay:.38s} [data-d="5"]{transition-delay:.48s}[data-d="6"]{transition-delay:.58s} /* ── Responsive ── */ @media(max-width:1120px){ .hero{grid-template-columns:1fr;min-height:auto;padding-bottom:var(--s7)} .hero__left{padding-right:0} .hero__right{display:none} .services-grid{grid-template-columns:repeat(3,1fr)} .why-grid{grid-template-columns:1fr 1fr} .footer__top{grid-template-columns:1fr;gap:var(--s7)} } @media(max-width:900px){ .approach-layout{grid-template-columns:1fr;gap:var(--s8)} .timeline__steps{grid-template-columns:repeat(3,1fr);gap:var(--s6)} .timeline__track{display:none} .why-layout{grid-template-columns:1fr;gap:var(--s8)} .coaching-layout{grid-template-columns:1fr;gap:var(--s7)} .sec-cta{grid-template-columns:1fr} .footer__cols{grid-template-columns:repeat(2,1fr);gap:var(--s7)} } @media(max-width:640px){ .nav__links{display:none} .services-grid{grid-template-columns:1fr 1fr} .audience-cards{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr 1fr} .stat:nth-child(5){grid-column:span 2} .why-grid{grid-template-columns:1fr} .footer__cols{grid-template-columns:1fr} .services-top{grid-template-columns:1fr} } /* ── A11y ── */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} [data-r]{opacity:1!important;transform:none!important} html{scroll-behavior:auto} } /* ================================================================ REFERENCE FIDELITY PASS — geometry sampled from the supplied art ================================================================ */ :root{ --ref-black:#020713; --ref-black-2:#02111f; --ref-ivory:#fbfaf7; --ref-purple:#5a24d6; --ref-violet:#a245ee; --ref-gold:#e2a900; --pad-x:clamp(42px,4.86vw,94px); --section-py:clamp(34px,4vw,72px); --r-sm:4px;--r-md:8px;--r-lg:10px;--r-xl:12px } body{background:var(--ref-black);font-family:'Manrope',Arial,sans-serif} .nav{height:76px;padding-inline:var(--pad-x);background:#02050d;border:0;backdrop-filter:none} .brand-asset{display:block;object-fit:cover;object-position:center;mix-blend-mode:normal} .nav__logo{width:132px;height:58px;overflow:hidden;justify-content:center;border-radius:6px} .nav__logo .brand-asset{width:100%;height:100%;transform:scale(1.18)} .nav__links{gap:34px} .nav__link{font-size:9px;letter-spacing:0;font-weight:600;color:#fff} .nav__cta{border-radius:5px;padding:10px 14px;font-size:9px;letter-spacing:0;border-color:rgba(255,255,255,.45)} .hero{height:calc(100vh - 76px);min-height:540px;max-height:720px;grid-template-columns:46% 54%;padding:12px var(--pad-x) 14px;background:linear-gradient(90deg,#02050d 0%,#02050d 30%,rgba(2,5,13,.8) 43%,rgba(2,5,13,.24) 62%,#02050d 100%),radial-gradient(ellipse at 70% 52%,rgba(124,58,237,.18),transparent 56%),url('assets/e4la-hero-highres.jpeg') #02050d;background-repeat:no-repeat;background-size:auto auto,auto auto,cover;background-position:center,right center,center center} .hero::before{display:none} .hero__left{padding-right:18px;transform:translateY(-28px)} .hero__eyebrow{display:none} .hero__h1{font-family:'Manrope',Arial,sans-serif;font-size:clamp(32px,3.65vw,58px);line-height:1.04;font-weight:600;letter-spacing:-1.1px;margin-bottom:12px;max-width:520px} .hero__h1 .word{background:linear-gradient(90deg,#ff9b00 0%,#f36c38 24%,#dc3d9e 58%,#7849eb 100%);-webkit-background-clip:text;background-clip:text} .hero__desc{font-size:clamp(11px,.92vw,14px);line-height:1.5;max-width:430px;color:rgba(255,255,255,.82);margin-bottom:14px} .hero__actions{gap:10px;transform:translateY(-2px)} .btn-outline-white{background:#fff;color:#090b13;border:1px solid #d9d9d9;border-radius:5px;padding:10px 15px;font-size:8.5px;letter-spacing:0;box-shadow:0 2px 6px rgba(0,0,0,.22)} .btn-outline-white:hover{background:#f7f7f7;color:#090b13} .btn-play{background:transparent;border:1px solid rgba(255,255,255,.42);border-radius:5px;padding:7px 12px 7px 7px;font-size:8.5px;letter-spacing:0} .btn-play__ring{width:25px;height:25px;background:transparent;border:1px solid #fff} .hero__right{display:none} .hero-reference-art{width:112%;height:calc(100% + 42px);position:relative;overflow:visible;background:none;filter:saturate(1.04) contrast(1.03)} .hero__right>.ring-wrap{display:none} .sec-services{height:265px;padding:40px var(--pad-x) 26px;background:#fff;display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:0} .services-top{display:contents} .services-top>div{padding-right:32px;align-self:start} .services-top>p{display:none} .label-tag{font-size:9px;letter-spacing:1px;margin-bottom:18px;color:#3625bd} .services-top__h2{font-family:'Manrope',Arial,sans-serif;font-size:19px;line-height:1.28;font-weight:500;letter-spacing:-.5px;max-width:200px} .services-top__link{border:1px solid #9f8bf3;border-radius:18px;padding:7px 12px;margin-top:18px;font-size:8px;letter-spacing:0;color:#3625bd} .services-grid{display:contents} .svc-card{border:0;border-left:1px solid rgba(67,44,111,.14);border-radius:0;background:transparent;box-shadow:none;padding:0 18px 0;gap:10px;min-width:0} .svc-card:hover{transform:none;box-shadow:none} .svc-icon{width:35px;height:35px;border-radius:8px;color:#fff!important;box-shadow:0 5px 12px rgba(43,22,110,.16)} .svc-icon svg{width:18px;height:18px} .svc-icon--purple{background:linear-gradient(145deg,#6b35dd,#3219a5)} .svc-icon--blue{background:linear-gradient(145deg,#1477e6,#173baf)} .svc-icon--green{background:linear-gradient(145deg,#16b89c,#087b72)} .svc-icon--amber{background:linear-gradient(145deg,#ff8d14,#d45200)} .svc-icon--indigo{background:linear-gradient(145deg,#7b35d9,#4017a0)} .svc-card__title{font-size:11px;line-height:1.38;letter-spacing:0;font-weight:700;margin-top:4px} .svc-card__desc{font-size:9px;line-height:1.62;color:#222;flex:1} .svc-card__arr{width:24px;height:24px;margin-top:2px;border-color:rgba(0,0,0,.27);color:#111} .sec-approach{height:255px;padding:31px var(--pad-x) 26px;background:#07060D} .approach-layout{grid-template-columns:200px 1fr;gap:22px;height:100%} .approach__label,.why__label{font-size:8px;letter-spacing:1px;color:#bd72f3;margin-bottom:13px} .approach__h2{font-family:'Manrope',Arial,sans-serif;font-size:20px;line-height:1.3;font-weight:400;margin-bottom:11px} .approach__h2 em{font-style:normal;color:#fff} .approach__desc{font-size:9px;line-height:1.65;max-width:175px;margin-bottom:14px;color:rgba(255,255,255,.82)} .btn-outline-gold{font-size:7.5px;letter-spacing:0;border-radius:5px;padding:8px 10px;color:#d6a8ff;border-color:#713cb2} .timeline{padding-top:5px} .timeline__track{top:25px;left:25px;right:25px;background:linear-gradient(90deg,#7446db,#0ba7c9,#16ac7e,#c88a08,#b42378,#5f2eae)} .tstep__circle{width:42px;height:42px;font-family:'Manrope',Arial,sans-serif;font-size:14px;font-style:normal;margin-bottom:16px;background:#06101b;box-shadow:none!important} .tstep__name{font-size:8px;letter-spacing:0;margin-bottom:12px} .tstep__sub{font-size:8px;line-height:1.65;max-width:82px;color:rgba(255,255,255,.73)} .sec-stats{height:103px;padding:0 var(--pad-x);display:flex;align-items:center;background:linear-gradient(100deg,#4e1cad 0%,#b13f9e 47%,#df655f 68%,#1a2a80 100%)} .stats-grid{width:100%} .stat{padding:0 18px;gap:12px;border-color:rgba(255,255,255,.16)} .stat__ico{width:31px;height:31px;color:#fff;opacity:.88} .stat__num{font-size:20px;font-weight:500} .stat__label{font-size:8px;color:rgba(255,255,255,.83)} .sec-why{height:196px;padding:31px var(--pad-x) 24px;background:radial-gradient(circle at 20% 70%,#031b2b,#020b17 55%,#020812)} .why-layout{grid-template-columns:200px 1fr;gap:20px} .why__h2{font-family:'Manrope',Arial,sans-serif;font-size:19px;line-height:1.35;font-weight:400} .why__rule{width:42px;background:#a968e7;margin-top:17px} .why-grid{grid-template-columns:repeat(3,1fr);gap:0 30px} .why-item{padding:0 0 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:17px} .why-item:nth-child(n+4){border-bottom:0;margin-bottom:0;padding-bottom:0} .why-item__head{gap:12px;margin-bottom:4px} .why-item__ico{width:36px;height:36px;border:1px solid #6f36b3;background:transparent!important;color:#a968e7!important} .why-item__ico svg{width:18px;height:18px} .why-item__title{font-size:9px;color:#bd72f3} .why-item__body{font-size:8.5px;line-height:1.5;padding-left:48px;color:rgba(255,255,255,.78)} .sec-coaching{height:231px;padding:29px var(--pad-x) 23px;background:linear-gradient(105deg,#fffdf9,#fff 60%,#fff8f1)} .coaching-layout{grid-template-columns:minmax(0,2.2fr) minmax(235px,1fr);gap:22px;height:100%} .coaching-layout>div:first-child{display:grid;grid-template-columns:1.18fr 2fr;grid-template-rows:auto auto 1fr;column-gap:22px} .coaching__label{grid-column:1;font-size:8px;letter-spacing:1px;margin:6px 0 18px;color:#3b27be} .coaching__h2{grid-column:1;font-family:'Manrope',Arial,sans-serif;font-size:19px;line-height:1.3;font-weight:400;margin-bottom:9px} .coaching__desc{grid-column:1;font-size:9px;line-height:1.65;margin:0;color:#222} .audience-cards{grid-column:2;grid-row:1/4;gap:9px} .aud-card{height:171px;border-radius:8px;padding:16px 12px 12px;gap:8px;border:1px solid #d5d5d5;box-shadow:0 3px 10px rgba(0,0,0,.035)} .aud-card__ico{width:30px;height:30px;color:#111} .aud-card__name{font-size:12px;font-weight:500} .aud-card__desc{font-size:8.5px;line-height:1.55;color:#222} .aud-card__radio{width:13px;height:13px;margin-top:auto} .calendar-widget{border:0;border-left:1px solid #e0e0e0;border-radius:0;padding:0 0 0 22px;box-shadow:none;background:transparent} .cal__title{font-size:8px;letter-spacing:1px;margin-bottom:14px;color:#222} .cal__nav{margin-bottom:8px}.cal__month{font-size:9px;font-weight:500}.cal__btn{border:0;width:20px;height:20px} .cal__grid{gap:0}.cal__day-name{font-size:6px;padding-bottom:3px}.cal__date{font-size:8px;width:21px;height:21px} .cal__date--today{background:#5423cf} .cal__cta{margin-top:8px;padding:10px;border-radius:5px;background:#030d16;color:#ff5838;font-size:8px;letter-spacing:0;justify-content:space-between;padding-inline:52px 14px} .cal__note{font-size:8px;margin-top:7px} .sec-cta{height:101px;min-height:0;grid-template-columns:1fr 2fr;background:linear-gradient(105deg,#1c2782 0%,#5b1e9d 34%,#c12e70 56%,#e46d16 75%,#171354 100%)} .cta-dark,.cta-warm{padding:20px var(--pad-x);background:transparent} .cta-dark{padding-right:24px}.cta-dark__h2{font-family:'Manrope',Arial,sans-serif;font-size:25px;line-height:1.12;font-weight:400} .cta-warm{display:grid;grid-template-columns:1fr 190px;align-items:center;gap:20px;padding-left:24px;padding-right:64px} .cta-warm::before{display:none}.cta-warm__text{font-size:10px;line-height:1.55;color:#fff;max-width:210px} .cta-warm__btn{width:184px;justify-content:space-between;background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:5px;font-size:9px;letter-spacing:0;padding:12px 16px} .footer{height:173px;padding:25px var(--pad-x) 16px;background:#07060D} .footer__top{grid-template-columns:160px 1fr;gap:20px;margin-bottom:14px} .footer__brand-logo{width:124px;height:58px;overflow:hidden;border-radius:6px}.footer__brand-logo .brand-asset{width:100%;height:100%;transform:scale(1.18)} .footer__tagline{font-size:7px;line-height:1.55;margin:7px 0 8px;max-width:150px} .footer__socials{gap:10px}.footer__soc{border:0;width:16px;height:16px;color:#fff}.footer__soc svg{width:13px;height:13px} .footer__cols{gap:26px}.footer__col-head{font-size:6.5px;letter-spacing:0;color:#e2a900;margin-bottom:8px}.footer__links{gap:4px}.footer__links a,.footer__nl-note{font-size:7.5px;color:rgba(255,255,255,.82)} .footer__nl-note{margin-bottom:9px}.footer__form{height:33px;border-color:#9b6500;border-radius:5px}.footer__input{font-size:8px;padding:7px 12px}.footer__submit{background:transparent;color:#e2a900;border-radius:0;font-size:17px;padding:4px 12px} .footer__bottom{padding-top:8px;border:0}.footer__copy,.footer__made{font-size:7px;color:rgba(255,255,255,.55)} [data-r]{opacity:1;transform:none;transition:none} @media(min-width:1121px){.hero__right{display:block}} @media(max-width:780px){ .nav{height:62px}.nav__logo{width:104px;height:46px}.nav__cta{display:none} .hero{height:auto;min-height:620px;grid-template-columns:1fr;padding:34px 24px;background-size:auto auto,auto auto,cover;background-position:center,right center,center center}.hero__left{padding:0;transform:none}.hero__right{display:none} .sec-services{height:auto;display:block;padding:42px 24px}.services-top{display:block}.services-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:28px}.svc-card{border-left:0;border-top:1px solid rgba(67,44,111,.14);padding:22px 12px} .sec-approach,.sec-why,.sec-coaching,.footer{height:auto}.approach-layout,.why-layout{grid-template-columns:1fr}.timeline__steps{grid-template-columns:repeat(3,1fr)} .stats-grid{grid-template-columns:1fr 1fr}.sec-stats{height:auto;padding:24px}.stat{padding:14px}.stat:nth-child(5){grid-column:1/3} .coaching-layout{grid-template-columns:1fr}.coaching-layout>div:first-child{display:block}.audience-cards{margin-top:24px}.calendar-widget{border-left:0;border-top:1px solid #ddd;padding:24px 0 0} .sec-cta{height:auto;grid-template-columns:1fr}.cta-warm{grid-template-columns:1fr;padding:24px}.footer__top{grid-template-columns:1fr}.footer__cols{grid-template-columns:1fr 1fr} } /* FINAL HERO IMAGE FIX: use d.jpg as the only hero artwork and remove the old image block artifact. */ .hero{ background: linear-gradient(90deg,#02050d 0%,rgba(2,5,13,.96) 24%,rgba(2,5,13,.68) 42%,rgba(2,5,13,.16) 64%,rgba(2,5,13,.12) 100%), url('assets/e4la-hero-highres.jpeg') #02050d !important; background-repeat:no-repeat !important; background-size:auto calc(100% - 18px) !important; background-position:right center !important; } .hero__right, .hero-reference-art, .hero-reference-art::before, .hero-reference-art::after{ display:none !important; content:none !important; background:none !important; } @media(max-width:780px){ .hero{ background-size:auto 44% !important; background-position:right bottom !important; } } /* FINAL HERO 16:9 COMPOSITION */ .hero{ aspect-ratio:16 / 9 !important; height:auto !important; min-height:0 !important; max-height:none !important; grid-template-columns:minmax(360px,42%) 1fr !important; align-items:center !important; padding:clamp(36px,4vw,64px) var(--pad-x) clamp(32px,4vw,56px) !important; background: linear-gradient(90deg,rgba(2,5,13,.98) 0%,rgba(2,5,13,.92) 28%,rgba(2,5,13,.58) 46%,rgba(2,5,13,.12) 66%,rgba(2,5,13,.05) 100%), url('assets/e4la-hero-highres.jpeg') #02050d !important; background-repeat:no-repeat !important; background-size:cover !important; background-position:center center !important; } .hero__left{ padding-right:clamp(18px,3vw,44px) !important; transform:translateY(-2%) !important; max-width:560px !important; } .hero__h1{ font-size:clamp(38px,4.35vw,72px) !important; line-height:1.05 !important; max-width:560px !important; margin-bottom:clamp(14px,1.3vw,22px) !important; } .hero__desc{ font-size:clamp(12px,1.02vw,16px) !important; line-height:1.58 !important; max-width:470px !important; margin-bottom:clamp(18px,1.8vw,30px) !important; } .hero__actions{ gap:14px !important; transform:none !important; } .hero__right, .hero-reference-art, .hero-reference-art::before, .hero-reference-art::after{ display:none !important; content:none !important; background:none !important; } @media(max-width:780px){ .hero{ aspect-ratio:auto !important; min-height:680px !important; grid-template-columns:1fr !important; align-items:start !important; padding:34px 24px !important; background: linear-gradient(180deg,rgba(2,5,13,.98) 0%,rgba(2,5,13,.82) 48%,rgba(2,5,13,.2) 100%), url('assets/e4la-hero-highres.jpeg') #02050d !important; background-size:cover !important; background-position:center bottom !important; } .hero__left{transform:none !important;padding-right:0 !important;} } /* FINAL HERO SIZE + SHARPEN + STICKY NAV */ .nav{ position:sticky !important; top:0 !important; z-index:9999 !important; background:rgba(2,5,13,.94) !important; border-bottom:1px solid rgba(255,255,255,.09) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; } .hero{ aspect-ratio:auto !important; height:clamp(560px,74vh,690px) !important; min-height:0 !important; max-height:none !important; grid-template-columns:minmax(390px,43%) 1fr !important; align-items:center !important; padding:clamp(28px,3.2vw,52px) var(--pad-x) clamp(24px,3vw,44px) !important; background: linear-gradient(90deg,rgba(2,5,13,.99) 0%,rgba(2,5,13,.94) 25%,rgba(2,5,13,.62) 45%,rgba(2,5,13,.18) 68%,rgba(2,5,13,.06) 100%), url('assets/e4la-hero-highres.jpeg') #02050d !important; background-repeat:no-repeat !important; background-size:auto 100% !important; background-position:right center !important; } .hero__left{ transform:translateY(-1%) !important; max-width:590px !important; } .hero__h1{ font-size:clamp(36px,4vw,66px) !important; line-height:1.04 !important; max-width:590px !important; } .hero__desc{ max-width:480px !important; } .hero__right, .hero-reference-art, .hero-reference-art::before, .hero-reference-art::after{ display:none !important; content:none !important; } @media(max-width:780px){ .hero{ height:auto !important; min-height:620px !important; grid-template-columns:1fr !important; padding:30px 24px !important; background: linear-gradient(180deg,rgba(2,5,13,.98) 0%,rgba(2,5,13,.86) 44%,rgba(2,5,13,.28) 100%), url('assets/e4la-hero-highres.jpeg') #02050d !important; background-size:auto 46% !important; background-position:right bottom !important; } .hero__left{transform:none !important;} } /* FINAL SERVICES ACCORDION */ .sec-services{ min-height:360px !important; height:auto !important; padding:clamp(46px,5vw,72px) var(--pad-x) !important; display:grid !important; grid-template-columns:minmax(220px,280px) minmax(0,1fr) !important; gap:clamp(22px,3vw,42px) !important; align-items:stretch !important; background: radial-gradient(circle at 88% 14%,rgba(249,115,22,.16),transparent 28%), radial-gradient(circle at 18% 82%,rgba(124,58,237,.13),transparent 30%), linear-gradient(105deg,#eee8ff 0%,#fffaf5 56%,#ffd9d2 100%) !important; } .sec-services .services-top{display:block !important;align-self:center !important;min-width:0 !important;} .sec-services .services-top>div{padding-right:0 !important;} .sec-services .services-top>p{display:none !important;} .sec-services .label-tag{font-size:10px !important;letter-spacing:1.8px !important;margin-bottom:16px !important;color:#4e2ac2 !important;} .sec-services .services-top__h2{font-family:'Manrope',Arial,sans-serif !important;font-size:clamp(24px,2.25vw,34px) !important;line-height:1.13 !important;font-weight:600 !important;letter-spacing:-.7px !important;max-width:260px !important;color:#100f1b !important;} .sec-services .services-top__link{display:inline-flex !important;border:1px solid rgba(78,42,194,.24) !important;border-radius:999px !important;padding:10px 15px !important;margin-top:24px !important;font-size:9px !important;letter-spacing:.7px !important;color:#4e2ac2 !important;background:rgba(255,255,255,.34) !important;transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s cubic-bezier(.2,.8,.2,1),border-color .28s cubic-bezier(.2,.8,.2,1) !important;} .sec-services .services-top__link:hover{transform:translateY(-1px) !important;background:rgba(255,255,255,.62) !important;border-color:rgba(78,42,194,.42) !important;} .services-grid.services-grid{ display:flex !important; gap:10px !important; align-items:stretch !important; min-width:0 !important; margin:0 !important; } .svc-card.svc-card{ position:relative !important; flex:1 1 0 !important; min-width:0 !important; min-height:238px !important; border:1px solid rgba(55,38,82,.12) !important; border-left:1px solid rgba(55,38,82,.12) !important; border-radius:18px !important; background:rgba(255,255,255,.22) !important; box-shadow:0 1px 0 rgba(255,255,255,.42) inset !important; padding:24px 18px !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; gap:0 !important; overflow:hidden !important; cursor:pointer !important; isolation:isolate !important; transform:translateZ(0) !important; transition:flex .58s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1), background .42s cubic-bezier(.22,1,.36,1), border-color .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1) !important; } .svc-card.svc-card::before{ content:''; position:absolute; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.16)); opacity:0; transition:opacity .42s cubic-bezier(.22,1,.36,1); z-index:-1; } .svc-card.svc-card:hover, .svc-card.svc-card:focus-visible, .svc-card.svc-card.is-active{ flex:2.35 1 0 !important; transform:translateY(-8px) translateZ(0) !important; background:rgba(255,255,255,.68) !important; border-color:rgba(86,54,196,.28) !important; box-shadow:0 24px 60px rgba(73,43,120,.16),0 1px 0 rgba(255,255,255,.75) inset !important; outline:none !important; } .svc-card.svc-card:hover::before, .svc-card.svc-card:focus-visible::before, .svc-card.svc-card.is-active::before{opacity:1;} .svc-card .svc-card__title{ order:1 !important; font-size:clamp(12px,.95vw,16px) !important; line-height:1.22 !important; letter-spacing:.02em !important; font-weight:800 !important; color:#11101b !important; margin:0 !important; max-width:170px !important; transition:transform .42s cubic-bezier(.22,1,.36,1), color .32s cubic-bezier(.22,1,.36,1) !important; } .svc-card:hover .svc-card__title, .svc-card:focus-visible .svc-card__title, .svc-card.is-active .svc-card__title{transform:translateY(-8px);color:#160f38 !important;} .svc-card .svc-icon, .svc-card .svc-card__desc, .svc-card .svc-card__arr{ opacity:0 !important; transform:translateY(14px) translateZ(0) !important; pointer-events:none !important; } .svc-card .svc-icon{ order:0 !important; width:42px !important; height:42px !important; margin:0 0 auto !important; max-height:0 !important; transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1), max-height .46s cubic-bezier(.22,1,.36,1), margin .46s cubic-bezier(.22,1,.36,1) !important; } .svc-card .svc-card__desc{ order:2 !important; max-height:0 !important; max-width:310px !important; margin:0 !important; overflow:hidden !important; font-size:13px !important; line-height:1.65 !important; color:rgba(17,16,27,.62) !important; transition:max-height .56s cubic-bezier(.22,1,.36,1), opacity .34s cubic-bezier(.22,1,.36,1) .06s, transform .42s cubic-bezier(.22,1,.36,1) .06s !important; } .svc-card .svc-card__arr{ order:3 !important; margin-top:0 !important; width:32px !important; height:32px !important; background:#120f24 !important; border-color:#120f24 !important; color:#fff !important; transition:opacity .3s cubic-bezier(.22,1,.36,1) .12s, transform .42s cubic-bezier(.22,1,.36,1) .12s, margin .42s cubic-bezier(.22,1,.36,1), background .22s !important; } .svc-card:hover .svc-icon, .svc-card:focus-visible .svc-icon, .svc-card.is-active .svc-icon{ opacity:1 !important; transform:translateY(0) translateZ(0) !important; max-height:42px !important; margin-bottom:auto !important; } .svc-card:hover .svc-card__desc, .svc-card:focus-visible .svc-card__desc, .svc-card.is-active .svc-card__desc{ opacity:1 !important; transform:translateY(0) translateZ(0) !important; max-height:120px !important; margin-top:2px !important; } .svc-card:hover .svc-card__arr, .svc-card:focus-visible .svc-card__arr, .svc-card.is-active .svc-card__arr{ opacity:1 !important; transform:translateY(0) translateZ(0) !important; pointer-events:auto !important; margin-top:18px !important; } @media(hover:none){ .svc-card.svc-card:hover{flex:1 1 0 !important;transform:none !important;} .svc-card.svc-card.is-active{flex:2.15 1 0 !important;transform:translateY(-6px) translateZ(0) !important;} } @media(max-width:780px){ .sec-services{display:block !important;padding:44px 24px !important;} .services-grid.services-grid{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;margin-top:26px !important;} .svc-card.svc-card{min-height:72px !important;padding:22px !important;transform:none !important;} .svc-card.svc-card:hover,.svc-card.svc-card:focus-visible,.svc-card.svc-card.is-active{flex:1 1 auto !important;transform:none !important;} .svc-card.is-active{min-height:212px !important;} } /* FINAL SERVICES: RESTORED CARDS WITH HOVER DETAILS */ .sec-services{ height:auto !important; min-height:300px !important; padding:40px var(--pad-x) 32px !important; background:#fff !important; display:grid !important; grid-template-columns:1.5fr repeat(5,1fr) !important; gap:0 !important; align-items:stretch !important; } .sec-services .services-top{display:contents !important;} .sec-services .services-top>div{padding-right:32px !important;align-self:start !important;} .sec-services .services-top>p{display:none !important;} .sec-services .label-tag{font-size:9px !important;letter-spacing:1px !important;margin-bottom:18px !important;color:#3625bd !important;} .sec-services .services-top__h2{font-family:'Manrope',Arial,sans-serif !important;font-size:19px !important;line-height:1.28 !important;font-weight:500 !important;letter-spacing:-.5px !important;max-width:210px !important;color:#0f0e18 !important;} .sec-services .services-top__link{display:inline-flex !important;border:1px solid #9f8bf3 !important;border-radius:18px !important;padding:7px 12px !important;margin-top:18px !important;font-size:8px !important;letter-spacing:0 !important;color:#3625bd !important;background:transparent !important;} .services-grid.services-grid{ display:contents !important; } .svc-card.svc-card{ position:relative !important; flex:auto !important; min-width:0 !important; min-height:235px !important; border:0 !important; border-left:1px solid rgba(67,44,111,.14) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; padding:0 18px 0 !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; gap:10px !important; overflow:visible !important; cursor:pointer !important; transform:none !important; transition:background .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s cubic-bezier(.2,.8,.2,1) !important; } .svc-card.svc-card::before{display:none !important;} .svc-card.svc-card:hover, .svc-card.svc-card:focus-visible, .svc-card.svc-card.is-active{ flex:auto !important; transform:translateY(-4px) !important; background:rgba(255,255,255,.36) !important; border-color:rgba(67,44,111,.22) !important; box-shadow:0 18px 44px rgba(62,39,94,.12) !important; outline:none !important; border-radius:12px !important; } .svc-card .svc-icon{ order:0 !important; opacity:1 !important; transform:none !important; pointer-events:auto !important; width:35px !important; height:35px !important; max-height:none !important; margin:0 0 0 !important; border-radius:8px !important; color:#fff !important; box-shadow:0 5px 12px rgba(43,22,110,.16) !important; } .svc-card .svc-card__title{ order:1 !important; font-size:11px !important; line-height:1.38 !important; letter-spacing:0 !important; font-weight:700 !important; color:#111 !important; margin:4px 0 0 !important; max-width:none !important; transform:none !important; } .svc-card .svc-card__desc{ order:2 !important; opacity:1 !important; transform:none !important; max-height:none !important; overflow:visible !important; margin:0 !important; font-size:9px !important; line-height:1.62 !important; color:#222 !important; flex:0 0 auto !important; } .svc-card .svc-card__more{ order:3 !important; max-height:0 !important; opacity:0 !important; overflow:hidden !important; transform:translateY(8px) translateZ(0) !important; margin:0 !important; font-size:9px !important; line-height:1.58 !important; color:rgba(15,14,24,.62) !important; transition:max-height .42s cubic-bezier(.22,1,.36,1), opacity .28s cubic-bezier(.22,1,.36,1) .06s, transform .34s cubic-bezier(.22,1,.36,1) .06s !important; } .svc-card:hover .svc-card__more, .svc-card:focus-visible .svc-card__more, .svc-card.is-active .svc-card__more{ max-height:118px !important; opacity:1 !important; transform:translateY(0) translateZ(0) !important; margin-top:2px !important; } .svc-card .svc-card__arr{ order:4 !important; opacity:1 !important; transform:none !important; pointer-events:auto !important; width:24px !important; height:24px !important; margin-top:auto !important; border-color:rgba(0,0,0,.27) !important; background:transparent !important; color:#111 !important; } .svc-card:hover .svc-card__arr, .svc-card:focus-visible .svc-card__arr, .svc-card.is-active .svc-card__arr{ background:var(--purple-lt) !important; border-color:var(--purple-lt) !important; color:#fff !important; } @media(max-width:780px){ .sec-services{height:auto !important;display:block !important;padding:42px 24px !important;} .sec-services .services-top{display:block !important;} .services-grid.services-grid{display:grid !important;grid-template-columns:1fr 1fr !important;margin-top:28px !important;gap:0 !important;} .svc-card.svc-card{min-height:180px !important;border-left:0 !important;border-top:1px solid rgba(67,44,111,.14) !important;padding:22px 12px !important;border-radius:0 !important;} .svc-card.svc-card:hover,.svc-card.svc-card:focus-visible,.svc-card.svc-card.is-active{transform:none !important;border-radius:10px !important;} } /* FINAL SERVICES STABILITY + READABILITY TUNE */ .sec-services{ min-height:340px !important; padding:46px var(--pad-x) 38px !important; align-items:stretch !important; } .sec-services .services-top__h2{ font-size:clamp(22px,2vw,30px) !important; line-height:1.18 !important; max-width:260px !important; } .sec-services .services-top__link{ padding:10px 16px !important; font-size:10px !important; font-weight:800 !important; min-height:40px !important; } .svc-card.svc-card{ min-height:252px !important; padding:0 20px 0 !important; transform:none !important; box-shadow:none !important; transition:background .28s cubic-bezier(.2,.8,.2,1), border-color .28s cubic-bezier(.2,.8,.2,1) !important; } .svc-card.svc-card:hover, .svc-card.svc-card:focus-visible, .svc-card.svc-card.is-active{ transform:none !important; box-shadow:none !important; border-radius:0 !important; background:rgba(255,255,255,.26) !important; } .svc-card .svc-icon{ width:40px !important; height:40px !important; } .svc-card .svc-card__title{ font-size:13px !important; line-height:1.28 !important; margin-top:8px !important; } .svc-card .svc-card__desc{ font-size:11px !important; line-height:1.58 !important; } .svc-card .svc-card__more{ font-size:10.5px !important; line-height:1.55 !important; max-height:0 !important; } .svc-card:hover .svc-card__more, .svc-card:focus-visible .svc-card__more, .svc-card.is-active .svc-card__more{ max-height:92px !important; } .svc-card .svc-card__arr{ width:30px !important; height:30px !important; } .svc-card__arr svg{width:13px !important;height:13px !important;} @media(max-width:780px){ .sec-services{padding:46px 24px !important;} .services-grid.services-grid{grid-template-columns:1fr !important;} .svc-card.svc-card{min-height:190px !important;padding:22px 16px !important;} } /* FINAL SERVICES NO-LAYOUT-SHIFT HOVER */ .sec-services{ height:420px !important; min-height:420px !important; padding:52px var(--pad-x) 42px !important; overflow:hidden !important; } .svc-card.svc-card{ min-height:310px !important; height:310px !important; padding:0 20px 0 !important; overflow:hidden !important; } .svc-card .svc-card__desc{ min-height:54px !important; } .svc-card .svc-card__more{ display:block !important; height:92px !important; max-height:none !important; opacity:0 !important; overflow:hidden !important; margin-top:4px !important; transform:translateY(8px) translateZ(0) !important; transition:opacity .28s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1) !important; } .svc-card:hover .svc-card__more, .svc-card:focus-visible .svc-card__more, .svc-card.is-active .svc-card__more{ height:92px !important; max-height:none !important; opacity:1 !important; transform:translateY(0) translateZ(0) !important; } .svc-card .svc-card__arr{ margin-top:auto !important; } @media(max-width:780px){ .sec-services{height:auto !important;min-height:0 !important;overflow:visible !important;} .svc-card.svc-card{height:auto !important;min-height:240px !important;} .svc-card .svc-card__more{height:96px !important;} } /* FINAL SERVICES CENTERED REVEAL */ .sec-services{ height:420px !important; min-height:420px !important; padding:52px var(--pad-x) 42px !important; overflow:hidden !important; } .svc-card.svc-card{ min-height:310px !important; height:310px !important; padding:24px 20px !important; overflow:hidden !important; justify-content:center !important; gap:10px !important; text-align:left !important; } .svc-card .svc-icon{ flex:0 0 auto !important; margin:0 !important; transition:transform .38s cubic-bezier(.22,1,.36,1) !important; } .svc-card .svc-card__title{ flex:0 0 auto !important; margin:8px 0 0 !important; transition:transform .38s cubic-bezier(.22,1,.36,1) !important; } .svc-card .svc-card__desc, .svc-card .svc-card__more, .svc-card .svc-card__arr{ opacity:0 !important; transform:translateY(12px) translateZ(0) !important; pointer-events:none !important; } .svc-card .svc-card__desc{ min-height:0 !important; height:auto !important; margin-top:2px !important; transition:opacity .28s cubic-bezier(.22,1,.36,1) .05s, transform .34s cubic-bezier(.22,1,.36,1) .05s !important; } .svc-card .svc-card__more{ height:auto !important; max-height:none !important; margin-top:2px !important; transition:opacity .28s cubic-bezier(.22,1,.36,1) .12s, transform .34s cubic-bezier(.22,1,.36,1) .12s !important; } .svc-card .svc-card__arr{ margin-top:10px !important; transition:opacity .28s cubic-bezier(.22,1,.36,1) .18s, transform .34s cubic-bezier(.22,1,.36,1) .18s, background .22s !important; } .svc-card:hover, .svc-card:focus-visible, .svc-card.is-active{ justify-content:flex-start !important; } .svc-card:hover .svc-icon, .svc-card:focus-visible .svc-icon, .svc-card.is-active .svc-icon, .svc-card:hover .svc-card__title, .svc-card:focus-visible .svc-card__title, .svc-card.is-active .svc-card__title{ transform:translateY(-2px) translateZ(0) !important; } .svc-card:hover .svc-card__desc, .svc-card:focus-visible .svc-card__desc, .svc-card.is-active .svc-card__desc, .svc-card:hover .svc-card__more, .svc-card:focus-visible .svc-card__more, .svc-card.is-active .svc-card__more, .svc-card:hover .svc-card__arr, .svc-card:focus-visible .svc-card__arr, .svc-card.is-active .svc-card__arr{ opacity:1 !important; transform:translateY(0) translateZ(0) !important; pointer-events:auto !important; } @media(max-width:780px){ .sec-services{height:auto !important;min-height:0 !important;overflow:visible !important;} .svc-card.svc-card{height:260px !important;min-height:260px !important;} } /* FINAL SERVICES TRUE CENTER RESTING STATE */ .svc-card.svc-card{ display:grid !important; grid-template-rows:1fr auto auto auto auto 1fr !important; align-content:stretch !important; justify-content:stretch !important; height:310px !important; min-height:310px !important; padding:24px 20px !important; } .svc-card .svc-icon{ grid-row:2 !important; align-self:end !important; justify-self:start !important; } .svc-card .svc-card__title{ grid-row:3 !important; align-self:start !important; justify-self:start !important; } .svc-card .svc-card__desc{ grid-row:4 !important; } .svc-card .svc-card__more{ grid-row:5 !important; } .svc-card .svc-card__arr{ grid-row:6 !important; align-self:start !important; } .svc-card:hover, .svc-card:focus-visible, .svc-card.is-active{ grid-template-rows:0fr auto auto auto auto 1fr !important; } .svc-card:hover .svc-icon, .svc-card:focus-visible .svc-icon, .svc-card.is-active .svc-icon, .svc-card:hover .svc-card__title, .svc-card:focus-visible .svc-card__title, .svc-card.is-active .svc-card__title{ transform:none !important; } @media(max-width:780px){ .svc-card.svc-card{height:260px !important;min-height:260px !important;} } /* CLEAN SERVICES FINAL OVERRIDE - predictable centered reveal */ .sec-services{ height:420px !important; min-height:420px !important; padding:48px var(--pad-x) 40px !important; overflow:hidden !important; } .services-grid.services-grid{display:contents !important;} .svc-card.svc-card{ height:300px !important; min-height:300px !important; padding:24px 20px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; gap:10px !important; overflow:hidden !important; transform:none !important; box-shadow:none !important; border-radius:0 !important; background:transparent !important; transition:background .24s ease,border-color .24s ease !important; } .svc-card.svc-card:hover, .svc-card.svc-card:focus-visible, .svc-card.svc-card.is-active{ justify-content:flex-start !important; background:rgba(255,255,255,.24) !important; border-color:rgba(67,44,111,.22) !important; transform:none !important; box-shadow:none !important; } .svc-card .svc-icon, .svc-card .svc-card__title{ opacity:1 !important; transform:none !important; flex:0 0 auto !important; } .svc-card .svc-card__desc, .svc-card .svc-card__more, .svc-card .svc-card__arr{ flex:0 0 auto !important; max-height:0 !important; height:auto !important; min-height:0 !important; margin:0 !important; opacity:0 !important; overflow:hidden !important; transform:translateY(10px) !important; pointer-events:none !important; transition:max-height .34s ease,opacity .24s ease,transform .28s ease,margin .28s ease !important; } .svc-card:hover .svc-card__desc, .svc-card:focus-visible .svc-card__desc, .svc-card.is-active .svc-card__desc{ max-height:72px !important; margin-top:4px !important; opacity:1 !important; transform:translateY(0) !important; } .svc-card:hover .svc-card__more, .svc-card:focus-visible .svc-card__more, .svc-card.is-active .svc-card__more{ max-height:112px !important; margin-top:2px !important; opacity:1 !important; transform:translateY(0) !important; } .svc-card:hover .svc-card__arr, .svc-card:focus-visible .svc-card__arr, .svc-card.is-active .svc-card__arr{ max-height:34px !important; margin-top:auto !important; opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important; } @media(max-width:780px){ .sec-services{height:auto !important;min-height:0 !important;overflow:visible !important;} .services-grid.services-grid{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;} .svc-card.svc-card{height:250px !important;min-height:250px !important;} } /* SERVICE CARD ALIGNMENT + TEXT VISIBILITY FIX */ .sec-services{ height:460px !important; min-height:460px !important; padding:52px var(--pad-x) 44px !important; } .svc-card.svc-card{ height:350px !important; min-height:350px !important; padding:26px 18px !important; justify-content:center !important; gap:0 !important; } .svc-card .svc-icon{ margin:0 !important; width:40px !important; height:40px !important; flex:0 0 40px !important; } .svc-card .svc-card__title{ margin:0 !important; font-size:13px !important; line-height:1.22 !important; flex:1 1 auto !important; } .svc-card .svc-icon + .svc-card__title{ display:block !important; } .svc-card.svc-card{ display:grid !important; grid-template-columns:40px minmax(0,1fr) !important; grid-template-rows:1fr auto 0fr 0fr 0fr 1fr !important; column-gap:12px !important; align-items:center !important; } .svc-card .svc-icon{grid-column:1 !important;grid-row:2 !important;align-self:center !important;justify-self:start !important;} .svc-card .svc-card__title{grid-column:2 !important;grid-row:2 !important;align-self:center !important;justify-self:start !important;} .svc-card .svc-card__desc{grid-column:1 / -1 !important;grid-row:3 !important;} .svc-card .svc-card__more{grid-column:1 / -1 !important;grid-row:4 !important;} .svc-card .svc-card__arr{grid-column:1 / -1 !important;grid-row:5 !important;justify-self:start !important;} .svc-card:hover, .svc-card:focus-visible, .svc-card.is-active{ grid-template-rows:0fr auto auto auto auto 1fr !important; align-items:start !important; justify-content:stretch !important; } .svc-card .svc-card__desc, .svc-card .svc-card__more{ font-size:10.5px !important; line-height:1.48 !important; } .svc-card:hover .svc-card__desc, .svc-card:focus-visible .svc-card__desc, .svc-card.is-active .svc-card__desc{ max-height:86px !important; margin-top:16px !important; opacity:1 !important; transform:translateY(0) !important; overflow:visible !important; } .svc-card:hover .svc-card__more, .svc-card:focus-visible .svc-card__more, .svc-card.is-active .svc-card__more{ max-height:150px !important; margin-top:8px !important; opacity:1 !important; transform:translateY(0) !important; overflow:visible !important; } .svc-card:hover .svc-card__arr, .svc-card:focus-visible .svc-card__arr, .svc-card.is-active .svc-card__arr{ max-height:34px !important; margin-top:14px !important; } @media(max-width:780px){ .svc-card.svc-card{height:310px !important;min-height:310px !important;} } /* SERVICES POLISH: CIRCULAR CTAS, COMPACT HEIGHT, LEFT ALIGNMENT */ .sec-services{ height:410px !important; min-height:410px !important; padding:44px var(--pad-x) 36px !important; align-items:center !important; } .sec-services .services-top>div{ align-self:center !important; transform:translateY(10px) !important; } .svc-card.svc-card{ height:300px !important; min-height:300px !important; padding:24px 18px !important; } .svc-card .svc-card__desc, .svc-card .svc-card__more{ font-size:10px !important; line-height:1.42 !important; } .svc-card:hover .svc-card__desc, .svc-card:focus-visible .svc-card__desc, .svc-card.is-active .svc-card__desc{ max-height:58px !important; margin-top:14px !important; } .svc-card:hover .svc-card__more, .svc-card:focus-visible .svc-card__more, .svc-card.is-active .svc-card__more{ max-height:112px !important; margin-top:7px !important; } .svc-card .svc-card__arr{ width:32px !important; min-width:32px !important; max-width:32px !important; height:32px !important; min-height:32px !important; max-height:32px !important; aspect-ratio:1 / 1 !important; padding:0 !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 32px !important; } .svc-card:hover .svc-card__arr, .svc-card:focus-visible .svc-card__arr, .svc-card.is-active .svc-card__arr{ margin-top:20px !important; width:32px !important; height:32px !important; max-height:32px !important; border-radius:50% !important; } .svc-card__arr svg{ width:12px !important; height:12px !important; flex:0 0 12px !important; } @media(max-width:780px){ .sec-services{height:auto !important;min-height:0 !important;padding:42px 24px !important;} .sec-services .services-top>div{transform:none !important;} .svc-card.svc-card{height:280px !important;min-height:280px !important;} } /* APPROACH READABILITY + STEP INTERACTION */ .sec-approach .approach__label, .sec-approach .why__label{ font-size:11px !important; letter-spacing:1.8px !important; margin-bottom:16px !important; color:#d28cff !important; } .sec-approach .approach__h2{ font-size:clamp(26px,2.55vw,40px) !important; line-height:1.12 !important; letter-spacing:-.6px !important; max-width:330px !important; } .sec-approach .approach__body{ font-size:14px !important; line-height:1.65 !important; max-width:330px !important; color:rgba(255,255,255,.7) !important; } .sec-approach .btn-outline-gold{ min-height:42px !important; padding:12px 17px !important; font-size:10px !important; letter-spacing:1px !important; border-radius:999px !important; } .sec-approach .timeline-step, .sec-approach .timeline__step{ transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s cubic-bezier(.22,1,.36,1) !important; } .sec-approach .timeline-step:hover, .sec-approach .timeline-step:focus-within, .sec-approach .timeline__step:hover, .sec-approach .timeline__step:focus-within{ transform:translateY(-8px) !important; } .sec-approach .timeline-step:hover .timeline-step__num, .sec-approach .timeline-step:focus-within .timeline-step__num, .sec-approach .timeline__step:hover .timeline__num, .sec-approach .timeline__step:focus-within .timeline__num{ transform:scale(1.12) translateZ(0) !important; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.18),rgba(124,58,237,.28) 45%,rgba(8,7,14,.98) 100%) !important; box-shadow:0 0 0 1px rgba(210,140,255,.55),0 0 26px rgba(124,58,237,.38),0 18px 40px rgba(0,0,0,.32) !important; color:#fff !important; } .sec-approach .timeline-step__num, .sec-approach .timeline__num{ transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), background .32s cubic-bezier(.22,1,.36,1), color .32s cubic-bezier(.22,1,.36,1) !important; } .sec-approach .timeline-step:hover .timeline-step__title, .sec-approach .timeline__step:hover .timeline__title{ color:#fff !important; } .sec-approach .timeline-step:hover .timeline-step__body, .sec-approach .timeline__step:hover .timeline__body{ color:rgba(255,255,255,.72) !important; } /* APPROACH STEP TEXT TUNE */ .sec-approach .approach__label, .sec-approach .why__label{ font-size:8px !important; letter-spacing:1px !important; margin-bottom:13px !important; color:#bd72f3 !important; } .sec-approach .approach__h2{ font-family:'Manrope',Arial,sans-serif !important; font-size:20px !important; line-height:1.3 !important; font-weight:400 !important; letter-spacing:0 !important; max-width:240px !important; margin-bottom:11px !important; } .sec-approach .approach__body{ font-size:9px !important; line-height:1.7 !important; max-width:190px !important; color:rgba(255,255,255,.62) !important; } .sec-approach .btn-outline-gold{ min-height:0 !important; padding:8px 10px !important; font-size:7.5px !important; letter-spacing:0 !important; border-radius:5px !important; } .sec-approach .timeline__title, .sec-approach .timeline-step__title{ font-size:12px !important; line-height:1.2 !important; letter-spacing:.6px !important; font-weight:800 !important; color:#fff !important; } .sec-approach .timeline__body, .sec-approach .timeline-step__body{ font-size:11px !important; line-height:1.62 !important; max-width:140px !important; color:rgba(255,255,255,.66) !important; } .sec-approach .timeline__num, .sec-approach .timeline-step__num{ font-size:15px !important; } /* APPROACH STEP VISIBILITY BOOST */ .sec-approach .timeline__title, .sec-approach .timeline-step__title{ font-size:14px !important; line-height:1.2 !important; letter-spacing:.7px !important; font-weight:900 !important; color:#ffffff !important; text-shadow:0 0 18px rgba(255,255,255,.08) !important; } .sec-approach .timeline__body, .sec-approach .timeline-step__body{ font-size:13px !important; line-height:1.58 !important; max-width:160px !important; font-weight:400 !important; color:rgba(255,255,255,.82) !important; } .sec-approach .timeline__num, .sec-approach .timeline-step__num{ font-size:16px !important; font-weight:700 !important; } .sec-approach .timeline__steps, .sec-approach .timeline-steps{ gap:clamp(10px,1.4vw,22px) !important; } /* APPROACH STEP VISIBILITY BOOST XL */ .sec-approach .timeline__title, .sec-approach .timeline-step__title{ font-size:16px !important; line-height:1.15 !important; letter-spacing:.5px !important; font-weight:900 !important; color:#ffffff !important; } .sec-approach .timeline__body, .sec-approach .timeline-step__body{ font-size:15px !important; line-height:1.5 !important; max-width:190px !important; font-weight:450 !important; color:rgba(255,255,255,.9) !important; } .sec-approach .timeline__num, .sec-approach .timeline-step__num{ font-size:18px !important; font-weight:800 !important; } .sec-approach .timeline__steps, .sec-approach .timeline-steps{ gap:clamp(12px,1.6vw,26px) !important; } /* APPROACH NUMBER RING COLORS */ .sec-approach .timeline__step:nth-child(1) .timeline__num, .sec-approach .timeline-step:nth-child(1) .timeline-step__num{border-color:#8b5cf6 !important;box-shadow:0 0 0 1px rgba(139,92,246,.25),0 0 22px rgba(139,92,246,.22) !important;color:#efe8ff !important;} .sec-approach .timeline__step:nth-child(2) .timeline__num, .sec-approach .timeline-step:nth-child(2) .timeline-step__num{border-color:#2f7dff !important;box-shadow:0 0 0 1px rgba(47,125,255,.22),0 0 22px rgba(47,125,255,.2) !important;color:#e8f0ff !important;} .sec-approach .timeline__step:nth-child(3) .timeline__num, .sec-approach .timeline-step:nth-child(3) .timeline-step__num{border-color:#20c997 !important;box-shadow:0 0 0 1px rgba(32,201,151,.22),0 0 22px rgba(32,201,151,.2) !important;color:#eafff8 !important;} .sec-approach .timeline__step:nth-child(4) .timeline__num, .sec-approach .timeline-step:nth-child(4) .timeline-step__num{border-color:#f7c948 !important;box-shadow:0 0 0 1px rgba(247,201,72,.22),0 0 22px rgba(247,201,72,.18) !important;color:#fff8dc !important;} .sec-approach .timeline__step:nth-child(5) .timeline__num, .sec-approach .timeline-step:nth-child(5) .timeline-step__num{border-color:#ff4fa3 !important;box-shadow:0 0 0 1px rgba(255,79,163,.22),0 0 22px rgba(255,79,163,.2) !important;color:#ffeaf5 !important;} .sec-approach .timeline__step:nth-child(6) .timeline__num, .sec-approach .timeline-step:nth-child(6) .timeline-step__num{border-color:#8b5cf6 !important;box-shadow:0 0 0 1px rgba(139,92,246,.25),0 0 22px rgba(139,92,246,.22) !important;color:#efe8ff !important;} /* APPROACH NUMBER RING COLORS - ACTUAL MARKUP */ .sec-approach .tstep--1 .tstep__circle{border-color:#8b5cf6 !important;box-shadow:0 0 0 1px rgba(139,92,246,.35),0 0 22px rgba(139,92,246,.28) !important;color:#f0e9ff !important;} .sec-approach .tstep--2 .tstep__circle{border-color:#2f7dff !important;box-shadow:0 0 0 1px rgba(47,125,255,.32),0 0 22px rgba(47,125,255,.26) !important;color:#e8f0ff !important;} .sec-approach .tstep--3 .tstep__circle{border-color:#20c997 !important;box-shadow:0 0 0 1px rgba(32,201,151,.32),0 0 22px rgba(32,201,151,.24) !important;color:#eafff8 !important;} .sec-approach .tstep--4 .tstep__circle{border-color:#f7c948 !important;box-shadow:0 0 0 1px rgba(247,201,72,.34),0 0 22px rgba(247,201,72,.22) !important;color:#fff8dc !important;} .sec-approach .tstep--5 .tstep__circle{border-color:#ff4fa3 !important;box-shadow:0 0 0 1px rgba(255,79,163,.34),0 0 22px rgba(255,79,163,.25) !important;color:#ffeaf5 !important;} .sec-approach .tstep--6 .tstep__circle{border-color:#8b5cf6 !important;box-shadow:0 0 0 1px rgba(139,92,246,.35),0 0 22px rgba(139,92,246,.28) !important;color:#f0e9ff !important;} /* Hover no longer lights the circle up (only the auto-cycle does that now). */ /* APPROACH ACTUAL STEP TEXT + SHINE */ .sec-approach .tstep__name{ font-size:13px !important; line-height:1.2 !important; letter-spacing:.6px !important; font-weight:900 !important; color:#ffffff !important; margin-bottom:10px !important; } .sec-approach .tstep__sub{ font-size:12px !important; line-height:1.52 !important; max-width:132px !important; font-weight:400 !important; color:rgba(255,255,255,.82) !important; } .sec-approach .tstep__circle{ transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1), filter .32s cubic-bezier(.22,1,.36,1), background .32s cubic-bezier(.22,1,.36,1) !important; } /* Hover previously scaled/lifted/brightened the circle and lit up the name/sub text — removed entirely per request. Only the JS auto-cycle's .tstep--auto-active class controls the lit look now; hovering a step (active or not) no longer changes its appearance at all. */ /* APPROACH STEP TEXT BALANCE */ .sec-approach .tstep__name{ font-size:12px !important; line-height:1.18 !important; letter-spacing:.5px !important; font-weight:850 !important; margin-bottom:9px !important; } .sec-approach .tstep__sub{ font-size:11px !important; line-height:1.5 !important; max-width:124px !important; font-weight:400 !important; color:rgba(255,255,255,.82) !important; } .sec-approach .tstep__circle{ font-size:15px !important; } /* APPROACH LEFT LABEL + CTA SIZE */ .sec-approach .approach__label{ font-size:11px !important; letter-spacing:1.5px !important; font-weight:800 !important; margin-bottom:15px !important; } .sec-approach .btn-outline-gold{ min-height:40px !important; padding:11px 16px !important; font-size:9.5px !important; letter-spacing:.7px !important; font-weight:800 !important; border-radius:999px !important; } .sec-approach .btn-outline-gold svg{ width:13px !important; height:13px !important; } /* APPROACH BOTTOM BREATHING ROOM */ .sec-approach{ padding-bottom:clamp(46px,5vw,72px) !important; } @media(max-width:780px){ .sec-approach{padding-bottom:56px !important;} } /* APPROACH REAL BOTTOM SPACE FIX */ .sec-approach{ height:315px !important; min-height:315px !important; padding-bottom:58px !important; } .sec-approach .approach-layout{ height:auto !important; align-items:start !important; } .sec-approach .btn-outline-gold{ margin-bottom:22px !important; } @media(max-width:780px){ .sec-approach{ height:auto !important; min-height:0 !important; padding-bottom:64px !important; } } /* WHY E4LA OPTION READABILITY */ .sec-why .why-item__title{ font-size:15px !important; line-height:1.28 !important; font-weight:800 !important; } .sec-why .why-item__body{ font-size:13px !important; line-height:1.62 !important; color:rgba(255,255,255,.68) !important; } .sec-why .why-item__ico{ width:42px !important; height:42px !important; } .sec-why .why-item__ico svg{ width:17px !important; height:17px !important; } /* WHY E4LA CONTAIN LARGER TEXT */ .sec-why{ height:auto !important; min-height:360px !important; padding-top:52px !important; padding-bottom:58px !important; overflow:hidden !important; } .sec-why .why-layout{ align-items:start !important; } .sec-why .why-grid{ row-gap:24px !important; } @media(max-width:780px){ .sec-why{ min-height:0 !important; padding-top:48px !important; padding-bottom:54px !important; overflow:visible !important; } } /* WHY E4LA BALANCE TUNE */ .sec-why .why__label{ font-size:11px !important; letter-spacing:1.5px !important; font-weight:800 !important; margin-bottom:15px !important; color:#bd72f3 !important; } .sec-why .why-item__title{ font-size:14px !important; line-height:1.26 !important; font-weight:800 !important; } .sec-why .why-item__body{ font-size:12px !important; line-height:1.58 !important; color:rgba(255,255,255,.64) !important; } .sec-why .why-item__ico{ width:40px !important; height:40px !important; } .sec-why{ min-height:340px !important; padding-bottom:52px !important; } /* COACHING CALENDAR CLEANUP */ .sec-coaching{ height:auto !important; min-height:390px !important; padding:48px var(--pad-x) 52px !important; background:#fff !important; } .coaching-layout{ grid-template-columns:minmax(0,2fr) minmax(330px,390px) !important; gap:clamp(28px,4vw,56px) !important; height:auto !important; align-items:stretch !important; } .coaching-layout>div:first-child{ display:grid !important; grid-template-columns:minmax(220px,.78fr) minmax(420px,1.45fr) !important; grid-template-rows:auto auto 1fr !important; column-gap:clamp(24px,3vw,42px) !important; } .audience-cards{ grid-column:2 !important; grid-row:1 / 4 !important; gap:14px !important; align-self:stretch !important; } .aud-card{ height:250px !important; min-height:250px !important; border-radius:12px !important; padding:24px 18px 18px !important; } .aud-card__ico{width:38px !important;height:38px !important;} .aud-card__name{font-size:16px !important;font-weight:600 !important;} .aud-card__desc{font-size:11.5px !important;line-height:1.55 !important;} .aud-card__radio{width:18px !important;height:18px !important;} .calendar-widget{ border:1px solid rgba(0,0,0,.08) !important; border-left:1px solid rgba(0,0,0,.08) !important; border-radius:16px !important; padding:24px !important; background:#fbfaf7 !important; box-shadow:0 18px 48px rgba(20,16,35,.08) !important; align-self:stretch !important; } .cal__title{ font-size:10.5px !important; letter-spacing:1.4px !important; margin-bottom:18px !important; color:rgba(15,14,24,.58) !important; } .cal__nav{margin-bottom:14px !important;} .cal__month{font-size:14px !important;font-weight:700 !important;color:#0f0e18 !important;} .cal__btn{ width:30px !important; height:30px !important; border:1px solid rgba(0,0,0,.1) !important; font-size:13px !important; } .cal__grid{ display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:6px !important; text-align:center !important; } .cal__day-name{ font-size:10px !important; font-weight:700 !important; color:rgba(15,14,24,.38) !important; padding-bottom:5px !important; } .cal__date{ width:32px !important; height:32px !important; font-size:12px !important; margin:0 auto !important; } .cal__date--today{ background:#5423cf !important; color:#fff !important; box-shadow:0 8px 18px rgba(84,35,207,.22) !important; } .cal__cta{ margin-top:18px !important; padding:14px 18px !important; min-height:48px !important; border-radius:8px !important; background:#030d16 !important; color:#ff6a3d !important; font-size:10px !important; letter-spacing:.3px !important; justify-content:center !important; gap:12px !important; } .cal__note{ font-size:10.5px !important; margin-top:11px !important; color:rgba(15,14,24,.45) !important; } @media(max-width:900px){ .coaching-layout{grid-template-columns:1fr !important;} .coaching-layout>div:first-child{display:block !important;} .audience-cards{margin-top:24px !important;grid-template-columns:1fr !important;} .aud-card{height:auto !important;min-height:170px !important;} .calendar-widget{margin-top:24px !important;} } /* COACHING CALENDAR SIZE BALANCE */ .sec-coaching{ min-height:340px !important; padding:42px var(--pad-x) 44px !important; } .coaching-layout{ grid-template-columns:minmax(0,2.15fr) minmax(270px,320px) !important; gap:32px !important; align-items:start !important; } .calendar-widget{ width:100% !important; max-width:320px !important; align-self:start !important; padding:18px !important; border-radius:12px !important; box-shadow:0 10px 30px rgba(20,16,35,.06) !important; } .cal__title{ font-size:9px !important; letter-spacing:1px !important; margin-bottom:13px !important; } .cal__nav{margin-bottom:10px !important;} .cal__month{font-size:12px !important;} .cal__btn{ width:24px !important; height:24px !important; font-size:11px !important; } .cal__grid{ gap:3px !important; } .cal__day-name{ font-size:8px !important; padding-bottom:3px !important; } .cal__date{ width:25px !important; height:25px !important; font-size:10px !important; } .cal__cta{ margin-top:12px !important; min-height:40px !important; padding:10px 14px !important; border-radius:6px !important; font-size:8.5px !important; } .cal__note{ font-size:8.5px !important; margin-top:8px !important; } .aud-card{ height:220px !important; min-height:220px !important; } @media(max-width:900px){ .calendar-widget{max-width:none !important;} } /* FINAL NAV FIXED + SECTION ANCHORS */ .nav{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:99999 !important; background:rgba(2,5,13,.94) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; } /* main#main no longer needs its own top padding for nav clearance — the newer shared .e4la-site-nav system (bottom of this file) already reserves that space via `html body { padding-top }`. Keeping BOTH was double-counting nav height (body pushed everything down once, then main pushed its own content down again on top of that), which showed up as a large dead gap above the hero and pushed the hero's CTAs below the fold. */ main#main{ padding-top:0 !important; } #services, #approach, #why, #coaching, #contact, .coaching-more{ scroll-margin-top:88px !important; } .nav__link{ cursor:pointer !important; } @media(max-width:780px){ main#main{padding-top:0 !important;} #services,#approach,#why,#coaching,#contact,.coaching-more{scroll-margin-top:74px !important;} } /* HERO ASSET + NAV LOGO SIZE UPDATE */ .hero{ background: linear-gradient(90deg,rgba(2,5,13,.99) 0%,rgba(2,5,13,.94) 24%,rgba(2,5,13,.58) 43%,rgba(2,5,13,.12) 66%,rgba(2,5,13,.04) 100%), url('assets/e4la-hero-highres.jpeg') #02050d !important; background-repeat:no-repeat !important; background-size:auto 100% !important; background-position:right center !important; } .nav__logo{ width:168px !important; height:66px !important; border-radius:8px !important; } .nav__logo .brand-asset{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; transform:scale(1.22) !important; } @media(max-width:780px){ .nav__logo{width:122px !important;height:52px !important;} .hero{background-size:auto 100% !important;background-position:right center !important;} } /* LOGO ASSET SIZE UPDATE */ .nav__logo{ width:210px !important; height:74px !important; border-radius:8px !important; overflow:hidden !important; } .nav__logo .brand-asset{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; transform:scale(1.32) !important; mix-blend-mode:normal !important; } .footer__brand-logo{ width:170px !important; height:78px !important; border-radius:8px !important; overflow:hidden !important; } .footer__brand-logo .brand-asset{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; transform:scale(1.32) !important; mix-blend-mode:normal !important; } @media(max-width:780px){ .nav__logo{width:150px !important;height:58px !important;} .footer__brand-logo{width:140px !important;height:62px !important;} } /* FINAL INTER + REFERENCE SERVICES SECTION */ html,body,button,input,textarea,select,a,p,h1,h2,h3,h4,h5,h6,span,li,div{ font-family:'Manrope',Arial,sans-serif !important; } .sec-services{ height:auto !important; min-height:360px !important; padding:clamp(54px,6vw,86px) var(--pad-x) clamp(46px,5vw,72px) !important; display:grid !important; grid-template-columns:minmax(300px,1.05fr) repeat(5,minmax(140px,1fr)) !important; gap:0 !important; align-items:stretch !important; overflow:hidden !important; background:linear-gradient(105deg,#eee5ff 0%,#f8ecff 26%,#fff2ee 64%,#ffd7cf 100%) !important; color:#0b0b12 !important; } .sec-services .services-top{ display:contents !important; } .sec-services .services-top>div{ align-self:start !important; padding-right:clamp(28px,3vw,54px) !important; } .sec-services .services-top>p{ display:none !important; } .sec-services .label-tag{ margin:0 0 28px !important; color:#2f23a7 !important; font-size:13px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.14em !important; text-transform:uppercase !important; } .sec-services .services-top__h2{ max-width:360px !important; color:#0b0b12 !important; font-size:clamp(34px,3.1vw,52px) !important; line-height:1.08 !important; font-weight:500 !important; letter-spacing:-.045em !important; } .sec-services .services-top__link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:18px !important; min-height:54px !important; margin-top:32px !important; padding:0 24px !important; border:1px solid rgba(79,54,180,.28) !important; border-radius:999px !important; background:rgba(255,255,255,.28) !important; color:#2f23a7 !important; font-size:13px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:.02em !important; text-transform:uppercase !important; box-shadow:none !important; } .sec-services .services-top__link svg{ width:20px !important; height:20px !important; } .services-grid, .services-grid.services-grid{ display:contents !important; } .svc-card, .svc-card.svc-card{ min-height:310px !important; height:auto !important; display:grid !important; grid-template-rows:auto auto 1fr auto !important; align-content:start !important; gap:0 !important; padding:0 clamp(24px,2.2vw,40px) !important; border:0 !important; border-left:1px solid rgba(66,42,104,.16) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#0b0b12 !important; transform:none !important; overflow:visible !important; } .svc-card:hover, .svc-card:focus-visible, .svc-card.is-active{ transform:none !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; } .svc-card .svc-icon{ width:64px !important; height:64px !important; margin:0 0 34px !important; border-radius:14px !important; color:#fff !important; opacity:1 !important; transform:none !important; box-shadow:0 14px 24px rgba(38,24,98,.18) !important; } .svc-card .svc-icon svg{ width:32px !important; height:32px !important; } .svc-icon--purple{background:linear-gradient(145deg,#6b35dd,#3219a5) !important;} .svc-icon--blue{background:linear-gradient(145deg,#1477e6,#173baf) !important;} .svc-icon--green{background:linear-gradient(145deg,#16b89c,#087b72) !important;} .svc-icon--amber{background:linear-gradient(145deg,#ff8d14,#d45200) !important;} .svc-icon--indigo{background:linear-gradient(145deg,#7b35d9,#4017a0) !important;} .svc-card .svc-card__title{ max-width:210px !important; margin:0 0 20px !important; color:#111018 !important; font-size:clamp(18px,1.45vw,25px) !important; line-height:1.12 !important; font-weight:800 !important; letter-spacing:-.02em !important; text-transform:uppercase !important; transform:none !important; } .svc-card .svc-card__desc{ max-width:220px !important; min-height:92px !important; margin:0 !important; color:rgba(13,12,19,.72) !important; font-size:clamp(14px,1.1vw,19px) !important; line-height:1.52 !important; font-weight:400 !important; opacity:1 !important; transform:none !important; } .svc-card .svc-card__more{ display:none !important; } .svc-card .svc-card__arr{ width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; max-width:42px !important; max-height:42px !important; margin-top:34px !important; padding:0 !important; border:1px solid rgba(30,28,43,.24) !important; border-radius:50% !important; background:rgba(255,255,255,.22) !important; color:#111018 !important; opacity:1 !important; transform:none !important; pointer-events:auto !important; } .svc-card .svc-card__arr svg{ width:18px !important; height:18px !important; } @media(max-width:1100px){ .sec-services{grid-template-columns:1fr 1fr !important;gap:0 !important;} .sec-services .services-top{display:block !important;grid-column:1 / -1 !important;margin-bottom:36px !important;} .services-grid,.services-grid.services-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;grid-column:1 / -1 !important;} .svc-card,.svc-card.svc-card{min-height:280px !important;padding:26px !important;border-top:1px solid rgba(66,42,104,.16) !important;} } @media(max-width:640px){ .sec-services{display:block !important;padding:48px 24px !important;} .sec-services .services-top__h2{font-size:clamp(32px,9vw,44px) !important;} .services-grid,.services-grid.services-grid{display:grid !important;grid-template-columns:1fr !important;margin-top:34px !important;} .svc-card,.svc-card.svc-card{min-height:0 !important;padding:28px 0 !important;border-left:0 !important;border-top:1px solid rgba(66,42,104,.16) !important;} .svc-card .svc-card__title,.svc-card .svc-card__desc{max-width:none !important;} } /* FINAL SERVICES CLEAN READABILITY */ .sec-services{ min-height:540px !important; height:auto !important; padding:64px var(--pad-x) 56px !important; grid-template-columns:minmax(280px,1.12fr) repeat(5,minmax(150px,1fr)) !important; align-items:stretch !important; } .sec-services .services-top>div{ padding-right:34px !important; } .sec-services .label-tag{ font-size:12px !important; margin-bottom:22px !important; } .sec-services .services-top__h2{ font-size:clamp(30px,2.6vw,42px) !important; line-height:1.12 !important; max-width:330px !important; } .sec-services .services-top__link{ min-height:46px !important; padding:0 20px !important; font-size:12px !important; margin-top:28px !important; } .svc-card, .svc-card.svc-card{ min-height:420px !important; height:auto !important; display:grid !important; grid-template-rows:72px minmax(74px,auto) 1fr auto !important; align-content:start !important; row-gap:18px !important; padding:0 clamp(24px,2vw,34px) !important; overflow:visible !important; } .svc-card .svc-icon{ width:58px !important; height:58px !important; margin:0 0 0 !important; align-self:start !important; justify-self:start !important; grid-row:1 !important; grid-column:1 !important; border-radius:14px !important; } .svc-card .svc-icon svg{ width:28px !important; height:28px !important; } .svc-card .svc-card__title{ grid-row:2 !important; grid-column:1 !important; max-width:190px !important; margin:0 !important; font-size:clamp(18px,1.15vw,22px) !important; line-height:1.14 !important; font-weight:800 !important; letter-spacing:-.015em !important; word-break:normal !important; overflow-wrap:normal !important; } .svc-card .svc-card__desc{ grid-row:3 !important; grid-column:1 !important; max-width:210px !important; min-height:0 !important; margin:0 !important; font-size:clamp(16px,1.04vw,20px) !important; line-height:1.5 !important; font-weight:400 !important; color:rgba(13,12,19,.72) !important; overflow:visible !important; } .svc-card .svc-card__arr{ grid-row:4 !important; grid-column:1 !important; align-self:end !important; justify-self:start !important; width:48px !important; height:48px !important; min-width:48px !important; min-height:48px !important; max-width:48px !important; max-height:48px !important; margin:24px 0 0 !important; } .svc-card .svc-card__arr svg{ width:18px !important; height:18px !important; } @media(max-width:1200px){ .sec-services{grid-template-columns:minmax(260px,1fr) repeat(5,minmax(130px,1fr)) !important;} .svc-card,.svc-card.svc-card{padding:0 20px !important;} .svc-card .svc-card__title{font-size:18px !important;} .svc-card .svc-card__desc{font-size:16px !important;} } @media(max-width:1100px){ .sec-services{display:block !important;} .sec-services .services-top{display:block !important;margin-bottom:34px !important;} .services-grid,.services-grid.services-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:0 !important;} .svc-card,.svc-card.svc-card{min-height:340px !important;padding:28px !important;border-top:1px solid rgba(66,42,104,.16) !important;} .svc-card .svc-card__title,.svc-card .svc-card__desc{max-width:none !important;} } @media(max-width:640px){ .services-grid,.services-grid.services-grid{grid-template-columns:1fr !important;} .svc-card,.svc-card.svc-card{min-height:0 !important;padding:28px 0 !important;} } /* FINAL SERVICES REFERENCE RATIO CLEAN */ .sec-services{ min-height:410px !important; height:auto !important; padding:46px var(--pad-x) 42px !important; display:grid !important; grid-template-columns:minmax(250px,1.18fr) repeat(5,minmax(128px,1fr)) !important; gap:0 !important; align-items:stretch !important; overflow:visible !important; background:linear-gradient(105deg,#eee5ff 0%,#f9edff 28%,#fff3ee 64%,#ffd8cf 100%) !important; } .sec-services .services-top{display:contents !important;} .sec-services .services-top>div{padding-right:34px !important;align-self:start !important;} .sec-services .services-top>p{display:none !important;} .sec-services .label-tag{ margin:0 0 20px !important; color:#3020a6 !important; font-size:10px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.16em !important; } .sec-services .services-top__h2{ max-width:310px !important; font-size:clamp(26px,2.35vw,38px) !important; line-height:1.13 !important; font-weight:500 !important; letter-spacing:-.04em !important; color:#101018 !important; } .sec-services .services-top__link{ min-height:42px !important; margin-top:24px !important; padding:0 18px !important; border-radius:999px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.02em !important; } .sec-services .services-top__link svg{width:16px !important;height:16px !important;} .sec-services .services-grid, .sec-services .services-grid.services-grid{display:contents !important;} .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:322px !important; height:auto !important; padding:0 clamp(20px,1.9vw,32px) !important; border:0 !important; border-left:1px solid rgba(72,48,112,.16) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; display:grid !important; grid-template-rows:54px 86px minmax(122px,1fr) 42px !important; row-gap:0 !important; align-content:start !important; overflow:visible !important; transform:none !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active{ background:transparent !important; box-shadow:none !important; transform:none !important; border-radius:0 !important; } .sec-services .svc-card .svc-icon{ grid-row:1 !important; grid-column:1 !important; align-self:start !important; justify-self:start !important; width:44px !important; height:44px !important; margin:0 !important; border-radius:10px !important; color:#fff !important; opacity:1 !important; transform:none !important; box-shadow:0 10px 20px rgba(38,24,98,.16) !important; } .sec-services .svc-card .svc-icon svg{width:23px !important;height:23px !important;} .sec-services .svc-card .svc-card__title{ grid-row:2 !important; grid-column:1 !important; align-self:start !important; max-width:155px !important; margin:0 !important; color:#111018 !important; font-size:clamp(15px,1.12vw,19px) !important; line-height:1.13 !important; font-weight:800 !important; letter-spacing:-.02em !important; text-transform:uppercase !important; word-break:normal !important; overflow-wrap:normal !important; } .sec-services .svc-card .svc-card__desc{ grid-row:3 !important; grid-column:1 !important; align-self:start !important; max-width:150px !important; min-height:0 !important; margin:0 !important; color:rgba(19,18,27,.72) !important; font-size:clamp(12px,.92vw,15px) !important; line-height:1.46 !important; font-weight:400 !important; opacity:1 !important; transform:none !important; overflow:visible !important; } .sec-services .svc-card .svc-card__more{display:none !important;} .sec-services .svc-card .svc-card__arr{ grid-row:4 !important; grid-column:1 !important; align-self:end !important; justify-self:start !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; max-width:34px !important; max-height:34px !important; margin:0 !important; padding:0 !important; border-radius:50% !important; border:1px solid rgba(30,28,43,.24) !important; background:rgba(255,255,255,.18) !important; color:#111018 !important; opacity:1 !important; transform:none !important; } .sec-services .svc-card .svc-card__arr svg{width:14px !important;height:14px !important;} @media(max-width:1100px){ .sec-services{display:block !important;padding:48px 24px 42px !important;} .sec-services .services-top{display:block !important;margin-bottom:28px !important;} .sec-services .services-grid,.sec-services .services-grid.services-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:0 !important;} .sec-services .svc-card,.sec-services .svc-card.svc-card{min-height:300px !important;padding:24px !important;border-top:1px solid rgba(72,48,112,.16) !important;} .sec-services .svc-card .svc-card__title,.sec-services .svc-card .svc-card__desc{max-width:220px !important;} } @media(max-width:640px){ .sec-services .services-grid,.sec-services .services-grid.services-grid{grid-template-columns:1fr !important;} .sec-services .svc-card,.sec-services .svc-card.svc-card{min-height:0 !important;grid-template-rows:auto auto auto auto !important;row-gap:16px !important;padding:26px 0 !important;border-left:0 !important;} .sec-services .svc-card .svc-card__title,.sec-services .svc-card .svc-card__desc{max-width:none !important;} } /* FINAL SERVICES 2 ROW CLEAN GRID */ .sec-services{ min-height:620px !important; height:auto !important; padding:56px var(--pad-x) 58px !important; display:grid !important; grid-template-columns:minmax(270px,.72fr) minmax(0,1.8fr) !important; gap:clamp(34px,4vw,64px) !important; align-items:start !important; overflow:visible !important; background:linear-gradient(105deg,#eee5ff 0%,#f9edff 30%,#fff3ee 66%,#ffd8cf 100%) !important; } .sec-services .services-top{ display:block !important; grid-column:1 !important; align-self:start !important; margin:0 !important; } .sec-services .services-top>div{ padding-right:0 !important; } .sec-services .services-top>p{ display:none !important; } .sec-services .label-tag{ margin:0 0 20px !important; color:#3020a6 !important; font-size:11px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.16em !important; } .sec-services .services-top__h2{ max-width:330px !important; font-size:clamp(30px,2.6vw,42px) !important; line-height:1.12 !important; font-weight:500 !important; letter-spacing:-.04em !important; color:#101018 !important; } .sec-services .services-top__link{ min-height:44px !important; margin-top:26px !important; padding:0 20px !important; border-radius:999px !important; font-size:11px !important; font-weight:700 !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid{ grid-column:2 !important; display:grid !important; grid-template-columns:repeat(3,minmax(210px,1fr)) !important; gap:0 !important; height:auto !important; min-height:0 !important; overflow:visible !important; margin:0 !important; padding:0 !important; list-style:none !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:252px !important; height:auto !important; padding:0 clamp(22px,2vw,34px) 22px !important; border:0 !important; border-left:1px solid rgba(72,48,112,.16) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; display:grid !important; grid-template-rows:52px minmax(52px,auto) minmax(92px,1fr) 40px !important; row-gap:12px !important; align-content:start !important; overflow:visible !important; transform:none !important; } .sec-services .svc-card:nth-child(n+4){ padding-top:30px !important; border-top:1px solid rgba(72,48,112,.16) !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active{ transform:none !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; } .sec-services .svc-card .svc-icon{ grid-row:1 !important; grid-column:1 !important; width:46px !important; height:46px !important; margin:0 !important; border-radius:11px !important; align-self:start !important; justify-self:start !important; color:#fff !important; opacity:1 !important; transform:none !important; box-shadow:0 10px 20px rgba(38,24,98,.16) !important; } .sec-services .svc-card .svc-icon svg{ width:24px !important; height:24px !important; } .sec-services .svc-card .svc-card__title{ grid-row:2 !important; grid-column:1 !important; max-width:230px !important; margin:0 !important; color:#111018 !important; font-size:clamp(16px,1.05vw,19px) !important; line-height:1.12 !important; font-weight:800 !important; letter-spacing:-.02em !important; text-transform:uppercase !important; word-break:normal !important; overflow-wrap:normal !important; } .sec-services .svc-card .svc-card__desc{ grid-row:3 !important; grid-column:1 !important; max-width:250px !important; min-height:0 !important; margin:0 !important; color:rgba(19,18,27,.74) !important; font-size:clamp(16px,1.05vw,20px) !important; line-height:1.44 !important; font-weight:400 !important; opacity:1 !important; transform:none !important; overflow:visible !important; } .sec-services .svc-card .svc-card__more{ display:none !important; } .sec-services .svc-card .svc-card__arr{ grid-row:4 !important; grid-column:1 !important; align-self:end !important; justify-self:start !important; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; max-width:38px !important; max-height:38px !important; margin:0 !important; padding:0 !important; border-radius:50% !important; border:1px solid rgba(30,28,43,.24) !important; background:rgba(255,255,255,.18) !important; color:#111018 !important; opacity:1 !important; transform:none !important; } .sec-services .svc-card .svc-card__arr svg{ width:15px !important; height:15px !important; } @media(max-width:1100px){ .sec-services{display:block !important;padding:50px 24px 48px !important;} .sec-services .services-top{margin-bottom:34px !important;} .sec-services .services-grid,.sec-services .services-grid.services-grid{grid-template-columns:repeat(2,minmax(220px,1fr)) !important;} .sec-services .svc-card,.sec-services .svc-card.svc-card{min-height:260px !important;padding:26px !important;border-top:1px solid rgba(72,48,112,.16) !important;} .sec-services .svc-card .svc-card__title,.sec-services .svc-card .svc-card__desc{max-width:280px !important;} } @media(max-width:640px){ .sec-services .services-grid,.sec-services .services-grid.services-grid{grid-template-columns:1fr !important;} .sec-services .svc-card,.sec-services .svc-card.svc-card{min-height:0 !important;grid-template-rows:auto auto auto auto !important;row-gap:16px !important;padding:26px 0 !important;border-left:0 !important;} .sec-services .svc-card .svc-card__title,.sec-services .svc-card .svc-card__desc{max-width:none !important;} } /* FINAL SERVICES ONE ROW MATCH REFERENCE */ .sec-services{ height:auto !important; min-height:430px !important; padding:50px var(--pad-x) 46px !important; display:grid !important; grid-template-columns:minmax(240px,1.25fr) repeat(5,minmax(132px,1fr)) !important; gap:0 !important; align-items:stretch !important; overflow:visible !important; background:linear-gradient(105deg,#eee5ff 0%,#f9edff 28%,#fff3ee 65%,#ffd8cf 100%) !important; } .sec-services .services-top{ display:contents !important; } .sec-services .services-top>div{ align-self:start !important; padding-right:34px !important; } .sec-services .services-top>p{ display:none !important; } .sec-services .label-tag{ margin:0 0 18px !important; color:#3020a6 !important; font-size:10px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.16em !important; } .sec-services .services-top__h2{ max-width:300px !important; color:#101018 !important; font-size:clamp(25px,2.25vw,36px) !important; line-height:1.13 !important; font-weight:500 !important; letter-spacing:-.04em !important; } .sec-services .services-top__link{ min-height:40px !important; margin-top:24px !important; padding:0 18px !important; border-radius:999px !important; font-size:10px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:.02em !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid{ display:contents !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:330px !important; height:auto !important; padding:0 clamp(18px,1.65vw,28px) !important; border:0 !important; border-left:1px solid rgba(72,48,112,.16) !important; border-top:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; display:grid !important; grid-template-rows:52px 62px 150px 40px !important; row-gap:16px !important; align-content:start !important; overflow:visible !important; transform:none !important; } .sec-services .svc-card:nth-child(n+4){ padding-top:0 !important; border-top:0 !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active{ background:transparent !important; box-shadow:none !important; transform:none !important; border-radius:0 !important; } .sec-services .svc-card .svc-icon{ grid-row:1 !important; grid-column:1 !important; width:44px !important; height:44px !important; margin:0 !important; border-radius:10px !important; align-self:start !important; justify-self:start !important; color:#fff !important; opacity:1 !important; transform:none !important; box-shadow:0 10px 20px rgba(38,24,98,.16) !important; } .sec-services .svc-card .svc-icon svg{ width:23px !important; height:23px !important; } .sec-services .svc-card .svc-card__title{ grid-row:2 !important; grid-column:1 !important; align-self:start !important; max-width:145px !important; margin:0 !important; color:#111018 !important; font-size:clamp(14px,1.02vw,18px) !important; line-height:1.12 !important; font-weight:800 !important; letter-spacing:-.015em !important; text-transform:uppercase !important; word-break:normal !important; overflow-wrap:normal !important; } .sec-services .svc-card .svc-card__desc{ grid-row:3 !important; grid-column:1 !important; align-self:start !important; max-width:150px !important; min-height:0 !important; margin:0 !important; color:rgba(19,18,27,.72) !important; font-size:clamp(13px,.92vw,16px) !important; line-height:1.42 !important; font-weight:400 !important; opacity:1 !important; transform:none !important; overflow:visible !important; } .sec-services .svc-card .svc-card__more{ display:none !important; } .sec-services .svc-card .svc-card__arr{ grid-row:4 !important; grid-column:1 !important; align-self:end !important; justify-self:start !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; max-width:34px !important; max-height:34px !important; margin:0 !important; padding:0 !important; border-radius:50% !important; border:1px solid rgba(30,28,43,.24) !important; background:rgba(255,255,255,.18) !important; color:#111018 !important; opacity:1 !important; transform:none !important; } .sec-services .svc-card .svc-card__arr svg{ width:14px !important; height:14px !important; } @media(max-width:900px){ .sec-services{ display:block !important; padding:48px 24px !important; } .sec-services .services-top{ display:block !important; margin-bottom:30px !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(220px,1fr)) !important; gap:0 !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:300px !important; padding:24px !important; border-top:1px solid rgba(72,48,112,.16) !important; } .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc{ max-width:240px !important; } } @media(max-width:640px){ .sec-services .services-grid, .sec-services .services-grid.services-grid{ grid-template-columns:1fr !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:0 !important; grid-template-rows:auto auto auto auto !important; row-gap:16px !important; padding:26px 0 !important; border-left:0 !important; } .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc{ max-width:none !important; } } /* FINAL SERVICES NO INTERSECTION WRAP FIX */ .sec-services{ min-height:470px !important; padding:48px 18px 48px !important; grid-template-columns:minmax(220px,.98fr) repeat(5,minmax(165px,1fr)) !important; } .sec-services .services-top>div{ padding-right:26px !important; } .sec-services .services-top__h2{ max-width:300px !important; font-size:clamp(25px,2.2vw,34px) !important; line-height:1.13 !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:370px !important; padding:0 26px !important; grid-template-rows:56px 72px minmax(178px,auto) 42px !important; row-gap:14px !important; overflow:visible !important; } .sec-services .svc-card .svc-icon{ width:54px !important; height:54px !important; border-radius:12px !important; } .sec-services .svc-card .svc-icon svg{ width:27px !important; height:27px !important; } .sec-services .svc-card .svc-card__title{ max-width:190px !important; font-size:20px !important; line-height:1.08 !important; letter-spacing:-.03em !important; margin:0 !important; } .sec-services .svc-card .svc-card__desc{ max-width:190px !important; width:100% !important; font-size:18px !important; line-height:1.38 !important; margin:0 !important; color:rgba(19,18,27,.72) !important; overflow:visible !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; } .sec-services .svc-card .svc-card__arr{ width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; max-width:42px !important; max-height:42px !important; margin:0 !important; align-self:end !important; } @media(max-width:1200px){ .sec-services{ grid-template-columns:minmax(210px,.9fr) repeat(5,minmax(158px,1fr)) !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ padding:0 22px !important; } .sec-services .svc-card .svc-card__title{ max-width:176px !important; font-size:18px !important; } .sec-services .svc-card .svc-card__desc{ max-width:176px !important; font-size:16px !important; line-height:1.42 !important; } } @media(max-width:980px){ .sec-services{display:block !important;padding:48px 24px !important;} .sec-services .services-top{display:block !important;margin-bottom:30px !important;} .sec-services .services-grid, .sec-services .services-grid.services-grid{display:grid !important;grid-template-columns:repeat(2,minmax(240px,1fr)) !important;} .sec-services .svc-card, .sec-services .svc-card.svc-card{min-height:330px !important;padding:26px !important;border-top:1px solid rgba(72,48,112,.16) !important;} .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc{max-width:300px !important;} } @media(max-width:640px){ .sec-services .services-grid, .sec-services .services-grid.services-grid{grid-template-columns:1fr !important;} .sec-services .svc-card, .sec-services .svc-card.svc-card{grid-template-rows:auto auto auto auto !important;min-height:0 !important;row-gap:16px !important;padding:26px 0 !important;border-left:0 !important;} .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc{max-width:none !important;} } /* FINAL SERVICES REFERENCE CLEAN MATCH */ .sec-services{ max-width:1180px !important; width:100% !important; min-height:280px !important; height:280px !important; margin:0 auto !important; padding:34px 28px 30px !important; display:grid !important; grid-template-columns:minmax(220px,1.15fr) repeat(5,minmax(145px,1fr)) !important; gap:0 !important; align-items:stretch !important; overflow:hidden !important; background:linear-gradient(105deg,#eee5ff 0%,#f8edff 30%,#fff4ef 66%,#ffd8cf 100%) !important; color:#101018 !important; } .sec-services .services-top{ display:contents !important; } .sec-services .services-top>div{ padding:0 28px 0 0 !important; align-self:stretch !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; } .sec-services .services-top>p{ display:none !important; } .sec-services .label-tag{ margin:0 0 18px !important; color:#3020a6 !important; font-size:9px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .sec-services .services-top__h2{ max-width:260px !important; margin:0 !important; color:#101018 !important; font-size:clamp(24px,2vw,32px) !important; line-height:1.13 !important; font-weight:500 !important; letter-spacing:-.04em !important; } .sec-services .services-top__link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; width:max-content !important; min-height:38px !important; margin-top:26px !important; padding:0 16px !important; border:1px solid rgba(79,54,180,.25) !important; border-radius:999px !important; background:rgba(255,255,255,.22) !important; color:#3020a6 !important; font-size:9px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:.03em !important; text-transform:uppercase !important; box-shadow:none !important; } .sec-services .services-top__link svg{ width:14px !important; height:14px !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid{ display:contents !important; height:auto !important; min-height:0 !important; overflow:visible !important; margin:0 !important; padding:0 !important; list-style:none !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:0 !important; height:100% !important; padding:0 26px !important; border:0 !important; border-left:1px solid rgba(72,48,112,.16) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:#101018 !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; align-items:flex-start !important; gap:14px !important; overflow:visible !important; transform:none !important; position:relative !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active{ transform:none !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; } .sec-services .svc-card .svc-icon{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; margin:0 !important; border-radius:10px !important; color:#fff !important; opacity:1 !important; transform:none !important; box-shadow:0 10px 20px rgba(38,24,98,.14) !important; flex:0 0 auto !important; } .sec-services .svc-card .svc-icon svg{ width:22px !important; height:22px !important; } .sec-services .svc-card .svc-card__title{ width:auto !important; max-width:none !important; margin:0 !important; color:#111018 !important; font-size:clamp(15px,1.05vw,17px) !important; line-height:1.14 !important; font-weight:800 !important; letter-spacing:-.015em !important; text-transform:uppercase !important; word-break:normal !important; overflow-wrap:normal !important; white-space:normal !important; flex:0 0 auto !important; } .sec-services .svc-card .svc-card__desc{ width:auto !important; max-width:none !important; min-height:0 !important; margin:0 !important; color:rgba(19,18,27,.72) !important; font-size:clamp(13px,.86vw,14px) !important; line-height:1.45 !important; font-weight:400 !important; opacity:1 !important; transform:none !important; overflow:visible !important; word-break:normal !important; overflow-wrap:normal !important; white-space:normal !important; hyphens:none !important; flex:1 1 auto !important; } .sec-services .svc-card .svc-card__more{ display:none !important; } .sec-services .svc-card .svc-card__arr{ position:static !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; max-width:34px !important; max-height:34px !important; margin:0 !important; padding:0 !important; border-radius:50% !important; border:1px solid rgba(30,28,43,.24) !important; background:rgba(255,255,255,.18) !important; color:#111018 !important; opacity:1 !important; transform:none !important; flex:0 0 auto !important; } .sec-services .svc-card .svc-card__arr svg{ width:14px !important; height:14px !important; } @media(max-width:1180px){ .sec-services{ max-width:none !important; height:auto !important; min-height:0 !important; grid-template-columns:minmax(220px,1fr) repeat(5,minmax(135px,1fr)) !important; padding:34px 24px 30px !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ padding:0 20px !important; } } @media(max-width:980px){ .sec-services{ display:block !important; padding:48px 24px !important; overflow:visible !important; } .sec-services .services-top{display:block !important;margin-bottom:30px !important;} .sec-services .services-grid, .sec-services .services-grid.services-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(240px,1fr)) !important; gap:0 !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:260px !important; padding:24px !important; border-top:1px solid rgba(72,48,112,.16) !important; } } @media(max-width:640px){ .sec-services .services-grid, .sec-services .services-grid.services-grid{ grid-template-columns:1fr !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:0 !important; padding:26px 0 !important; border-left:0 !important; } } /* FINAL SERVICES STABLE INTERACTION */ .sec-services{ font-family:'Manrope',Arial,sans-serif !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:flex-start !important; gap:0 !important; min-height:220px !important; height:100% !important; padding:0 26px 0 !important; position:relative !important; overflow:visible !important; transform-origin:center center !important; transition:transform .35s ease, background .35s ease, border-color .35s ease !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active{ transform:scale(1.025) !important; background:rgba(255,255,255,.16) !important; box-shadow:none !important; border-radius:12px !important; } .sec-services .svc-card__content{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; width:100% !important; min-width:0 !important; } .sec-services .svc-card .svc-icon{ flex:0 0 auto !important; margin:0 0 18px !important; transform-origin:center center !important; transition:transform .35s ease !important; } .sec-services .svc-card:hover .svc-icon, .sec-services .svc-card:focus-visible .svc-icon, .sec-services .svc-card.is-active .svc-icon{ transform:scale(1.12) !important; } .sec-services .svc-card .svc-card__title{ width:100% !important; max-width:none !important; margin:0 0 16px !important; font-size:clamp(15px,1.05vw,17px) !important; line-height:1.14 !important; font-weight:800 !important; letter-spacing:-.015em !important; word-break:normal !important; overflow-wrap:normal !important; white-space:normal !important; transform:none !important; transition:none !important; } .sec-services .svc-card:hover .svc-card__title, .sec-services .svc-card:focus-visible .svc-card__title, .sec-services .svc-card.is-active .svc-card__title{ transform:none !important; } .sec-services .svc-card .svc-card__desc{ width:100% !important; max-width:none !important; margin:0 !important; font-size:clamp(14px,.92vw,14.5px) !important; line-height:1.48 !important; font-weight:400 !important; word-break:normal !important; overflow-wrap:normal !important; white-space:normal !important; hyphens:none !important; transform:none !important; transition:none !important; } .sec-services .svc-card:hover .svc-card__desc, .sec-services .svc-card:focus-visible .svc-card__desc, .sec-services .svc-card.is-active .svc-card__desc{ transform:none !important; } .sec-services .svc-card .svc-card__more{ display:none !important; } .sec-services .svc-card .svc-card__arr{ position:static !important; flex:0 0 auto !important; margin-top:auto !important; margin-bottom:0 !important; transform:none !important; transition:background .25s ease, border-color .25s ease, color .25s ease !important; } .sec-services .svc-card__content + .svc-card__arr{ margin-top:auto !important; padding-top:0 !important; } .sec-services .svc-card .svc-card__desc + .svc-card__more + .svc-card__arr, .sec-services .svc-card .svc-card__desc + .svc-card__arr{ margin-top:22px !important; } @media(min-width:981px){ .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:220px !important; padding-bottom:0 !important; } .sec-services .svc-card__content{ min-height:166px !important; } .sec-services .svc-card .svc-card__arr{ margin-top:22px !important; } } @media(max-width:980px){ .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:260px !important; padding:24px !important; } .sec-services .svc-card .svc-card__arr{ margin-top:22px !important; } } @media(max-width:640px){ .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:0 !important; padding:26px 0 !important; } } /* FINAL SERVICES CTA SEPARATE ROW */ .sec-services{ min-height:380px !important; height:380px !important; padding-top:48px !important; padding-bottom:42px !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ height:100% !important; min-height:288px !important; padding-bottom:0 !important; justify-content:flex-start !important; } .sec-services .svc-card__content{ min-height:220px !important; flex:0 0 auto !important; } .sec-services .svc-card .svc-card__desc{ margin-bottom:0 !important; } .sec-services .svc-card .svc-card__arr{ position:static !important; margin-top:26px !important; margin-bottom:0 !important; align-self:flex-start !important; flex:0 0 42px !important; width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; max-width:42px !important; max-height:42px !important; } @media(max-width:980px){ .sec-services{height:auto !important;min-height:0 !important;} .sec-services .svc-card__content{min-height:0 !important;} .sec-services .svc-card .svc-card__arr{margin-top:26px !important;} } @media(max-width:640px){ /* On phones the description sits directly above the arrow with nothing to push them apart (auto-height cards, so the desc's flex:1 grow has no extra space to consume) — 26px reads as too tight against the site's usual mobile rhythm. Widen just this gap on real phones; tablets keep the 26px above. */ .sec-services .svc-card .svc-card__arr{margin-top:40px !important;} } /* FINAL MATCHED SECTION LABELS */ .sec-services .label-tag, .sec-approach .approach__label, .sec-why .why__label, .sec-coaching .coaching__label{ font-family:'Manrope',Arial,sans-serif !important; font-size:18px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.16em !important; text-transform:uppercase !important; margin:0 0 24px !important; } .sec-services .label-tag{color:#3020a6 !important;} .sec-approach .approach__label, .sec-why .why__label{color:#bd72f3 !important;} .sec-coaching .coaching__label{color:#3b27be !important;} @media(max-width:768px){ .sec-services .label-tag, .sec-approach .approach__label, .sec-why .why__label, .sec-coaching .coaching__label{ font-size:14px !important; margin-bottom:18px !important; } } /* FINAL APPROACH TIMELINE SCALE MATCH */ .sec-approach{ min-height:420px !important; height:auto !important; padding:48px var(--pad-x) 50px !important; } .sec-approach .approach-layout{ grid-template-columns:230px minmax(0,820px) !important; gap:clamp(28px,4vw,54px) !important; align-items:center !important; justify-content:start !important; } .sec-approach .timeline{ max-width:820px !important; width:100% !important; padding-top:8px !important; justify-self:start !important; } .sec-approach .timeline__track{ top:38px !important; left:38px !important; right:38px !important; height:2px !important; } .sec-approach .timeline__steps{ display:grid !important; grid-template-columns:repeat(6,minmax(92px,1fr)) !important; gap:clamp(8px,1vw,14px) !important; align-items:start !important; } .sec-approach .tstep{ align-items:center !important; text-align:center !important; min-width:0 !important; } .sec-approach .tstep__circle{ width:74px !important; height:74px !important; min-width:74px !important; min-height:74px !important; border-width:2px !important; margin:0 auto 22px !important; font-family:'Manrope',Arial,sans-serif !important; font-size:22px !important; line-height:1 !important; font-weight:600 !important; display:flex !important; align-items:center !important; justify-content:center !important; } .sec-approach .tstep__name{ margin:0 0 14px !important; font-family:'Manrope',Arial,sans-serif !important; font-size:13px !important; line-height:1.15 !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:#fff !important; } .sec-approach .tstep__sub{ max-width:118px !important; margin:0 auto !important; font-family:'Manrope',Arial,sans-serif !important; font-size:14px !important; line-height:1.48 !important; font-weight:400 !important; color:rgba(255,255,255,.76) !important; } @media(max-width:1024px){ .sec-approach .approach-layout{ grid-template-columns:1fr !important; } .sec-approach .timeline{ max-width:none !important; } .sec-approach .timeline__steps{ grid-template-columns:repeat(3,1fr) !important; gap:34px 16px !important; } .sec-approach .timeline__track{ display:none !important; } } @media(max-width:640px){ .sec-approach .timeline__steps{ grid-template-columns:1fr !important; } .sec-approach .tstep__sub{ max-width:260px !important; } } /* FINAL APPROACH CIRCLE 20 PERCENT SMALLER */ .sec-approach .timeline__track{ top:30px !important; left:30px !important; right:30px !important; } .sec-approach .tstep__circle{ width:60px !important; height:60px !important; min-width:60px !important; min-height:60px !important; font-size:18px !important; margin-bottom:20px !important; } /* FINAL APPROACH CIRCLE ANOTHER 20 PERCENT SMALLER */ .sec-approach .timeline__track{ top:24px !important; left:24px !important; right:24px !important; } .sec-approach .tstep__circle{ width:48px !important; height:48px !important; min-width:48px !important; min-height:48px !important; font-size:15px !important; margin-bottom:18px !important; } /* FINAL SERVICES APPROACH WIDTH ALIGNMENT ONLY */ .sec-services{ max-width:none !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:var(--pad-x) !important; padding-right:var(--pad-x) !important; grid-template-columns:minmax(240px,1.05fr) repeat(5,minmax(155px,1fr)) !important; border:0 !important; outline:0 !important; } .sec-services .services-top>div{ padding-right:clamp(26px,3vw,48px) !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid{ width:100% !important; max-width:none !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ padding-left:clamp(22px,2vw,32px) !important; padding-right:clamp(22px,2vw,32px) !important; } .sec-approach .approach-layout{ width:100% !important; max-width:none !important; grid-template-columns:320px minmax(0,1fr) !important; gap:clamp(32px,4vw,58px) !important; justify-content:stretch !important; } .sec-approach .timeline{ width:100% !important; max-width:none !important; justify-self:stretch !important; } .sec-approach .timeline__steps{ width:100% !important; max-width:none !important; grid-template-columns:repeat(6,minmax(96px,1fr)) !important; gap:clamp(6px,.8vw,12px) !important; } .sec-approach .timeline__track{ left:24px !important; right:24px !important; } /* FINAL — soften the timeline connector line. The base rule for .timeline__track winning at cascade-time was a flat, fully-opaque 6-stop rainbow gradient (from an older "reference fidelity" pass) at only 1px tall, which reads as a hard, sharp painted wire rather than a soft gradient glow. Using the higher-specificity .sec-approach .timeline__track selector to win outright: keep the same 6 hues (they match each circle above), but add height + blur + a touch of transparency so it reads as a soft luminous gradient bar instead of a crisp line. */ .sec-approach .timeline__track{ height:3px !important; border-radius:999px !important; opacity:.62 !important; filter:blur(1.4px) !important; box-shadow:0 0 16px rgba(124,58,237,.3) !important; } @media(max-width:1180px){ .sec-services{ padding-left:24px !important; padding-right:24px !important; grid-template-columns:minmax(220px,.95fr) repeat(5,minmax(140px,1fr)) !important; } } @media(max-width:1024px){ .sec-approach .approach-layout{ grid-template-columns:1fr !important; } } /* FINAL SHARED SECTION INTRO TYPOGRAPHY SYSTEM */ .section-eyebrow, .sec-services .label-tag.section-eyebrow, .sec-approach .approach__label.section-eyebrow, .sec-why .why__label.section-eyebrow, .sec-coaching .coaching__label.section-eyebrow{ font-family:'Manrope',Arial,sans-serif !important; font-size:14px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:.28em !important; text-transform:uppercase !important; margin:0 0 30px !important; } .section-heading, .sec-services .services-top__h2.section-heading, .sec-approach .approach__h2.section-heading, .sec-why .why__h2.section-heading, .sec-coaching .coaching__h2.section-heading{ font-family:'Manrope',Arial,sans-serif !important; font-size:clamp(32px,3vw,48px) !important; line-height:1.12 !important; font-weight:500 !important; letter-spacing:-.04em !important; max-width:340px !important; margin:0 !important; } .section-description, .sec-approach .approach__desc.section-description, .sec-coaching .coaching__desc.section-description{ font-family:'Manrope',Arial,sans-serif !important; font-size:15px !important; line-height:1.55 !important; font-weight:400 !important; max-width:340px !important; margin:20px 0 0 !important; } .section-cta, .sec-services .services-top__link.section-cta, .sec-approach .btn-outline-gold.section-cta{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:14px !important; min-height:48px !important; padding:0 24px !important; border-radius:999px !important; font-family:'Manrope',Arial,sans-serif !important; font-size:12px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; margin-top:30px !important; } .section-cta svg, .sec-services .services-top__link.section-cta svg, .sec-approach .btn-outline-gold.section-cta svg{ width:16px !important; height:16px !important; flex:0 0 16px !important; } .sec-services .services-top__h2.section-heading{ max-width:340px !important; } .sec-approach .approach__h2.section-heading{ max-width:360px !important; } .sec-coaching .coaching__desc.section-description{ margin-top:20px !important; } @media(max-width:768px){ .section-eyebrow, .sec-services .label-tag.section-eyebrow, .sec-approach .approach__label.section-eyebrow, .sec-why .why__label.section-eyebrow, .sec-coaching .coaching__label.section-eyebrow{ font-size:12px !important; letter-spacing:.22em !important; margin-bottom:20px !important; } .section-heading, .sec-services .services-top__h2.section-heading, .sec-approach .approach__h2.section-heading, .sec-why .why__h2.section-heading, .sec-coaching .coaching__h2.section-heading{ font-size:clamp(30px,8vw,42px) !important; } .section-cta, .sec-services .services-top__link.section-cta, .sec-approach .btn-outline-gold.section-cta{ min-height:44px !important; padding:0 20px !important; font-size:11px !important; } } /* FINAL GLOBAL RESPONSIVE LAYOUT SYSTEM */ :root{ --page-max:1520px; --page-pad:clamp(24px,4vw,72px); --section-y:clamp(56px,6vw,92px); } html, body{ overflow-x:hidden; } body, section, div, p, h1, h2, h3, h4, h5, h6, a, button, li{ word-break:normal !important; overflow-wrap:normal !important; white-space:normal !important; hyphens:none !important; } .hero, .sec-services, .sec-approach, .sec-stats, .sec-why, .sec-coaching, .sec-cta, .footer{ width:100% !important; max-width:none !important; box-sizing:border-box !important; } .sec-services, .sec-approach, .sec-why, .sec-coaching, .footer{ height:auto !important; overflow:visible !important; } .sec-services, .sec-approach, .sec-why, .sec-coaching{ padding-left:var(--page-pad) !important; padding-right:var(--page-pad) !important; } .hero{ min-height:clamp(540px,calc(100vh - 80px),720px) !important; height:auto !important; max-height:none !important; padding-left:var(--page-pad) !important; padding-right:var(--page-pad) !important; grid-template-columns:minmax(420px,.92fr) minmax(0,1.08fr) !important; gap:clamp(28px,4vw,64px) !important; } .hero__left, .hero__right, .approach-layout, .why-layout, .coaching-layout, .footer__top{ max-width:var(--page-max) !important; width:100% !important; margin-inline:auto !important; box-sizing:border-box !important; } .hero__h1{ max-width:720px !important; } .hero__desc{ max-width:620px !important; } .btn-outline-white, .btn-play, .btn-outline-gold, .services-top__link, .cal__cta, .cta-warm__btn, .nav__cta{ position:static !important; flex-shrink:0 !important; } .sec-services{ min-height:0 !important; padding-top:clamp(44px,5vw,68px) !important; padding-bottom:clamp(42px,5vw,64px) !important; grid-template-columns:minmax(250px,1.05fr) repeat(5,minmax(150px,1fr)) !important; align-items:stretch !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid{ width:100% !important; max-width:none !important; overflow:visible !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:260px !important; overflow:visible !important; display:flex !important; flex-direction:column !important; justify-content:flex-start !important; } .sec-services .svc-card__content{ width:100% !important; min-height:0 !important; flex:1 1 auto !important; } .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc{ max-width:none !important; } .sec-services .svc-card .svc-card__arr{ position:static !important; margin-top:24px !important; flex:0 0 auto !important; } .sec-approach{ min-height:0 !important; padding-top:var(--section-y) !important; padding-bottom:var(--section-y) !important; } .sec-approach .approach-layout{ display:grid !important; grid-template-columns:minmax(280px,340px) minmax(0,1fr) !important; gap:clamp(36px,5vw,76px) !important; align-items:center !important; } /* FINAL -- shrink the plain black gap above Approach's content: the section previously used the same generous --section-y (up to 92px) for both top and bottom padding, plus vertically centered its layout -- between hero's own bottom padding and this section's own top padding, that read as a large dead black band before any content/color appeared. Pull padding-top down and align content to the top of the section instead of centering it. */ .sec-approach{ padding-top:clamp(24px,2.8vw,40px) !important; } .sec-approach .approach-layout{ align-items:start !important; } .sec-approach .timeline{ max-width:none !important; width:100% !important; justify-self:stretch !important; } .sec-approach .timeline__steps{ width:100% !important; grid-template-columns:repeat(6,minmax(96px,1fr)) !important; gap:clamp(8px,1vw,16px) !important; } .sec-approach .tstep__sub{ max-width:150px !important; } /* FINAL — no full card wrap after all; instead a thin top/bottom rule using the exact same stroke color as the site's card borders (.coaching-card / .sec-faq .faq-layout: rgba(157,129,255,.28)) so Approach reads as its own distinct section without a full card background/wash. */ .sec-approach{ border-top:1px solid rgba(157,129,255,.28) !important; border-bottom:1px solid rgba(157,129,255,.28) !important; } .sec-stats{ height:auto !important; min-height:0 !important; padding:clamp(22px,3vw,34px) var(--page-pad) !important; overflow:visible !important; } .stats-grid{ max-width:var(--page-max) !important; margin-inline:auto !important; } .sec-why{ min-height:0 !important; padding-top:var(--section-y) !important; padding-bottom:var(--section-y) !important; } .why-layout{ display:grid !important; grid-template-columns:minmax(260px,340px) minmax(0,1fr) !important; gap:clamp(34px,5vw,72px) !important; align-items:start !important; } .why-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:clamp(22px,3vw,44px) !important; } .why-item__body{ max-width:none !important; font-size:13.5px !important; line-height:1.55 !important; } .sec-coaching{ min-height:0 !important; padding-top:var(--section-y) !important; padding-bottom:var(--section-y) !important; } .coaching-layout{ display:grid !important; grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr) !important; gap:clamp(32px,4vw,64px) !important; align-items:start !important; } .coaching-layout>div:first-child{ min-width:0 !important; } .audience-cards{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:clamp(14px,2vw,22px) !important; } .aud-card{ height:auto !important; min-height:190px !important; display:flex !important; flex-direction:column !important; overflow:visible !important; } .aud-card__desc{ font-size:13.5px !important; line-height:1.5 !important; } .aud-card__radio{ margin-top:auto !important; position:static !important; } .calendar-widget{ min-width:0 !important; overflow:visible !important; } .sec-cta{ height:auto !important; min-height:0 !important; overflow:visible !important; } .cta-warm, .cta-dark{ min-width:0 !important; } .footer{ height:auto !important; min-height:0 !important; padding-left:var(--page-pad) !important; padding-right:var(--page-pad) !important; } .footer__top{ grid-template-columns:minmax(180px,260px) minmax(0,1fr) !important; gap:clamp(30px,5vw,80px) !important; } .footer__cols{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:clamp(24px,4vw,56px) !important; } .section-eyebrow, .sec-services .label-tag.section-eyebrow, .sec-approach .approach__label.section-eyebrow, .sec-why .why__label.section-eyebrow, .sec-coaching .coaching__label.section-eyebrow{ font-size:14px !important; letter-spacing:.28em !important; line-height:1 !important; font-weight:700 !important; text-transform:uppercase !important; margin-bottom:30px !important; } .section-heading, .sec-services .services-top__h2.section-heading, .sec-approach .approach__h2.section-heading, .sec-why .why__h2.section-heading, .sec-coaching .coaching__h2.section-heading{ font-size:clamp(30px,2.2vw,42px) !important; line-height:1.12 !important; font-weight:500 !important; max-width:360px !important; } .section-description, .sec-approach .approach__desc.section-description, .sec-coaching .coaching__desc.section-description{ font-size:14.5px !important; line-height:1.55 !important; font-weight:400 !important; max-width:340px !important; } .section-cta, .sec-services .services-top__link.section-cta, .sec-approach .btn-outline-gold.section-cta{ min-height:46px !important; padding-inline:22px !important; border-radius:999px !important; } @media(min-width:1400px){ .hero, .sec-services, .sec-approach, .sec-why, .sec-coaching, .footer{ padding-left:clamp(72px,6vw,110px) !important; padding-right:clamp(72px,6vw,110px) !important; } .sec-services{ grid-template-columns:minmax(300px,1.08fr) repeat(5,minmax(170px,1fr)) !important; } } @media(max-width:1100px){ .hero{ grid-template-columns:1fr !important; min-height:auto !important; } .hero__right{ display:none !important; } .sec-services{ display:block !important; } .sec-services .services-top{ display:block !important; margin-bottom:34px !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(240px,1fr)) !important; gap:0 !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:260px !important; padding:24px !important; border-top:1px solid rgba(72,48,112,.16) !important; } .sec-approach .approach-layout, .why-layout, .coaching-layout, .footer__top{ grid-template-columns:1fr !important; } .sec-approach .timeline__steps{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:34px 18px !important; } .sec-approach .timeline__track{ display:none !important; } .why-grid, .audience-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .footer__cols{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media(max-width:700px){ :root{ --page-pad:24px; --section-y:48px; } .nav__links, .nav__cta{ display:none !important; } .hero, .sec-services, .sec-approach, .sec-why, .sec-coaching, .sec-cta, .footer{ padding-left:24px !important; padding-right:24px !important; } .hero{ min-height:auto !important; padding-top:42px !important; padding-bottom:52px !important; } .hero__h1{ font-size:clamp(36px,12vw,58px) !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid, .sec-approach .timeline__steps, .why-grid, .audience-cards, .stats-grid, .footer__cols{ grid-template-columns:1fr !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card{ min-height:0 !important; padding:26px 0 !important; border-left:0 !important; } .sec-approach .tstep__sub{ max-width:280px !important; } .coaching-layout>div:first-child{ display:block !important; } .calendar-widget{ max-width:none !important; border-left:0 !important; border-top:1px solid rgba(0,0,0,.12) !important; padding-top:24px !important; } .sec-cta, .cta-warm{ grid-template-columns:1fr !important; } .cta-warm{ padding:24px !important; } } /* FINAL BOOKING BALANCE REFINEMENT */ .sec-coaching { height: auto !important; min-height: 0 !important; padding-block: clamp(48px, 5vw, 72px) !important; } .sec-coaching .coaching-layout { width: 100% !important; max-width: 1520px !important; margin-inline: auto !important; display: grid !important; grid-template-columns: minmax(280px, 0.78fr) minmax(560px, 1.34fr) minmax(410px, 0.98fr) !important; gap: clamp(28px, 3vw, 48px) !important; align-items: stretch !important; } .sec-coaching .coaching-layout > div:first-child { display: contents !important; } .sec-coaching .coaching__label, .sec-coaching .coaching__h2, .sec-coaching .coaching__desc { grid-column: 1 !important; } .sec-coaching .coaching__label { grid-row: 1 !important; align-self: end !important; margin: 0 0 26px !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.1 !important; letter-spacing: 0.28em !important; font-weight: 800 !important; text-transform: uppercase !important; } .sec-coaching .coaching__h2 { grid-row: 2 !important; max-width: 360px !important; margin: 0 !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(32px, 2.8vw, 46px) !important; line-height: 1.08 !important; font-weight: 650 !important; letter-spacing: 0 !important; } .sec-coaching .coaching__desc { grid-row: 3 !important; max-width: 340px !important; margin: 18px 0 0 !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 15px !important; line-height: 1.55 !important; font-weight: 400 !important; } .sec-coaching .audience-cards { grid-column: 2 !important; grid-row: 1 / span 3 !important; align-self: stretch !important; height: 100% !important; min-height: 340px !important; display: grid !important; grid-template-columns: repeat(3, minmax(170px, 1fr)) !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; } .sec-coaching .audience-cards > li { min-width: 0 !important; height: 100% !important; display: flex !important; } .sec-coaching .aud-card { width: 100% !important; height: 100% !important; min-height: 340px !important; padding: 26px 22px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 14px !important; font-family: 'Manrope', Arial, sans-serif !important; } .sec-coaching .aud-card__ico { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; display: grid !important; place-items: center !important; } .sec-coaching .aud-card__ico svg { width: 22px !important; height: 22px !important; } .sec-coaching .aud-card__name { margin: 10px 0 0 !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 16px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0 !important; } .sec-coaching .aud-card__desc { margin: 0 !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 14.5px !important; line-height: 1.5 !important; font-weight: 400 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } .sec-coaching .aud-card__radio { margin-top: auto !important; } .sec-coaching .calendar-widget { grid-column: 3 !important; grid-row: 1 / span 3 !important; width: 100% !important; max-width: 460px !important; min-width: 410px !important; min-height: 340px !important; align-self: stretch !important; padding: 28px 30px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; font-family: 'Manrope', Arial, sans-serif !important; } .sec-coaching .cal__title { font-size: 17px !important; line-height: 1.25 !important; font-weight: 800 !important; margin-bottom: 14px !important; } .sec-coaching .cal__nav { margin-bottom: 12px !important; } .sec-coaching .cal__month { font-size: 14px !important; font-weight: 750 !important; } .sec-coaching .cal__grid { gap: 5px !important; margin-bottom: 18px !important; } .sec-coaching .cal__day, .sec-coaching .cal__date { font-size: 12px !important; } .sec-coaching .cal__date { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } .sec-coaching .cal__cta { width: 100% !important; min-height: 54px !important; padding: 0 24px !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 13.5px !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: 0.06em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; } .sec-coaching .cal__note { margin-top: 12px !important; font-size: 12.5px !important; line-height: 1.4 !important; } @media (max-width: 1280px) { .sec-coaching .coaching-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px) !important; } .sec-coaching .coaching__label, .sec-coaching .coaching__h2, .sec-coaching .coaching__desc { grid-column: 1 / -1 !important; } .sec-coaching .audience-cards { grid-column: 1 !important; grid-row: 4 !important; grid-template-columns: repeat(3, minmax(150px, 1fr)) !important; } .sec-coaching .calendar-widget { grid-column: 2 !important; grid-row: 4 !important; min-width: 0 !important; } } @media (max-width: 900px) { .sec-coaching .coaching-layout { grid-template-columns: 1fr !important; } .sec-coaching .audience-cards, .sec-coaching .calendar-widget { grid-column: 1 !important; grid-row: auto !important; } .sec-coaching .audience-cards { min-height: 0 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .sec-coaching .aud-card { min-height: 260px !important; } .sec-coaching .calendar-widget { max-width: none !important; min-width: 0 !important; min-height: 0 !important; } } @media (max-width: 640px) { .sec-coaching .audience-cards { grid-template-columns: 1fr !important; } .sec-coaching .aud-card { min-height: 220px !important; } .sec-coaching .calendar-widget { padding: 24px 20px !important; } .sec-coaching .cal__date { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } } /* FINAL BOOKING ICON + SPACING REFINEMENT */ .sec-coaching .coaching__label { margin: 0 0 14px !important; } .sec-coaching .coaching__h2 { margin: 0 !important; line-height: 1.06 !important; } .sec-coaching .coaching__desc { margin: 14px 0 0 !important; line-height: 1.52 !important; } .sec-coaching .aud-card { min-height: 340px !important; padding: 24px 22px 24px !important; gap: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .sec-coaching .aud-card__ico { width: 112px !important; height: 112px !important; flex: 0 0 112px !important; border-radius: 28px !important; display: grid !important; place-items: center !important; margin: 0 0 0 !important; } .sec-coaching .aud-card__ico svg { width: 82px !important; height: 82px !important; display: block !important; } .sec-coaching .aud-card__name { margin: auto 0 0 !important; font-size: 17px !important; line-height: 1.18 !important; } .sec-coaching .aud-card__desc { margin: 8px 0 0 !important; font-size: 14.5px !important; line-height: 1.48 !important; } .sec-coaching .aud-card__radio { margin-top: 20px !important; flex: 0 0 auto !important; } @media (max-width: 900px) { .sec-coaching .aud-card__ico { width: 92px !important; height: 92px !important; flex-basis: 92px !important; border-radius: 24px !important; } .sec-coaching .aud-card__ico svg { width: 66px !important; height: 66px !important; } } @media (max-width: 640px) { .sec-coaching .coaching__label { margin-bottom: 12px !important; } .sec-coaching .coaching__desc { margin-top: 12px !important; } .sec-coaching .aud-card { min-height: 250px !important; } .sec-coaching .aud-card__ico { width: 84px !important; height: 84px !important; flex-basis: 84px !important; } .sec-coaching .aud-card__ico svg { width: 58px !important; height: 58px !important; } } /* FINAL BOOKING CALENDAR BODY ALIGNMENT */ .sec-coaching .coaching-layout { grid-template-rows: auto 288px auto !important; align-items: start !important; } .sec-coaching .coaching__label { grid-row: 1 !important; align-self: end !important; margin-bottom: 12px !important; } .sec-coaching .coaching__h2 { grid-row: 2 !important; align-self: start !important; } .sec-coaching .coaching__desc { grid-row: 3 !important; align-self: start !important; margin-top: 12px !important; } .sec-coaching .audience-cards { grid-row: 2 !important; align-self: stretch !important; min-height: 0 !important; height: 288px !important; } .sec-coaching .aud-card { height: 288px !important; min-height: 0 !important; padding: 20px 20px 18px !important; gap: 0 !important; transform-origin: center center !important; transition: transform 0.32s ease, background 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important; will-change: transform !important; } .sec-coaching .aud-card:hover, .sec-coaching .aud-card:focus-visible { transform: scale(1.04) !important; background: rgba(255,255,255,0.105) !important; border-color: rgba(184,117,255,0.45) !important; box-shadow: 0 18px 42px rgba(0,0,0,0.22) !important; } .sec-coaching .aud-card__ico { width: 92px !important; height: 92px !important; flex: 0 0 92px !important; border-radius: 24px !important; transition: transform 0.32s ease !important; transform-origin: center center !important; will-change: transform !important; } .sec-coaching .aud-card:hover .aud-card__ico, .sec-coaching .aud-card:focus-visible .aud-card__ico { transform: scale(1.12) !important; } .sec-coaching .aud-card__ico svg { width: 66px !important; height: 66px !important; } .sec-coaching .aud-card__name { margin: 18px 0 0 !important; font-size: 16.5px !important; line-height: 1.18 !important; } .sec-coaching .aud-card__desc { margin: 7px 0 0 !important; font-size: 14.25px !important; line-height: 1.45 !important; } .sec-coaching .aud-card__radio { margin-top: auto !important; } .sec-coaching .calendar-widget { grid-row: 1 / span 3 !important; min-height: 0 !important; align-self: stretch !important; display: grid !important; grid-template-rows: auto 288px auto !important; align-content: start !important; justify-content: stretch !important; gap: 18px !important; } .sec-coaching .cal__header, .sec-coaching .cal__body, .sec-coaching .cal__footer { min-width: 0 !important; } .sec-coaching .cal__header { align-self: end !important; } .sec-coaching .cal__body { height: 288px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .sec-coaching .cal__footer { align-self: start !important; } .sec-coaching .cal__title { margin: 0 !important; } .sec-coaching .cal__nav { flex: 0 0 auto !important; margin-bottom: 12px !important; } .sec-coaching .cal__grid { flex: 0 0 auto !important; margin-bottom: 0 !important; } .sec-coaching .cal__cta { min-height: 54px !important; } .sec-coaching .cal__note { margin-top: 11px !important; } @media (max-width: 1280px) { .sec-coaching .coaching-layout { grid-template-rows: auto auto auto !important; } .sec-coaching .audience-cards, .sec-coaching .calendar-widget { grid-row: 4 !important; } } @media (max-width: 900px) { .sec-coaching .audience-cards, .sec-coaching .aud-card, .sec-coaching .cal__body { height: auto !important; } .sec-coaching .aud-card { min-height: 250px !important; } .sec-coaching .calendar-widget { display: flex !important; gap: 16px !important; } } @media (max-width: 640px) { .sec-coaching .aud-card { min-height: 230px !important; } .sec-coaching .aud-card__ico { width: 82px !important; height: 82px !important; flex-basis: 82px !important; } .sec-coaching .aud-card__ico svg { width: 58px !important; height: 58px !important; } } /* FINAL BOOKING SKETCH ALIGNMENT REFINEMENT */ .sec-coaching .coaching-layout { grid-template-columns: minmax(280px, 0.76fr) minmax(540px, 1.26fr) minmax(430px, 1fr) !important; grid-template-rows: auto 260px auto !important; column-gap: clamp(28px, 3vw, 46px) !important; row-gap: 16px !important; align-items: start !important; } .sec-coaching .coaching__label { grid-column: 1 !important; grid-row: 1 !important; margin: 0 0 10px !important; align-self: end !important; } .sec-coaching .coaching__h2 { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; max-width: 360px !important; line-height: 1.05 !important; } .sec-coaching .coaching__desc { grid-column: 1 !important; grid-row: 3 !important; margin-top: 10px !important; max-width: 340px !important; } .sec-coaching .audience-cards { grid-column: 2 !important; grid-row: 2 !important; height: 260px !important; min-height: 0 !important; align-self: stretch !important; display: grid !important; grid-template-columns: repeat(3, minmax(165px, 1fr)) !important; gap: 18px !important; overflow: visible !important; } .sec-coaching .audience-cards > li { height: 100% !important; overflow: visible !important; } .sec-coaching .aud-card { height: 260px !important; min-height: 0 !important; padding: 18px 18px 16px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; overflow: visible !important; cursor: pointer !important; transform-origin: center center !important; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease !important; will-change: transform !important; } .sec-coaching .aud-card:hover, .sec-coaching .aud-card:focus-visible { transform: scale(1.04) !important; background: rgba(255,255,255,0.11) !important; border-color: rgba(184,117,255,0.5) !important; box-shadow: 0 18px 42px rgba(0,0,0,0.24) !important; } .sec-coaching .aud-card__ico { width: 86px !important; height: 86px !important; flex: 0 0 86px !important; border-radius: 22px !important; margin: 0 !important; display: grid !important; place-items: center !important; transition: transform 0.3s ease !important; transform-origin: center center !important; will-change: transform !important; } .sec-coaching .aud-card:hover .aud-card__ico, .sec-coaching .aud-card:focus-visible .aud-card__ico { transform: scale(1.12) !important; } .sec-coaching .aud-card__ico svg { width: 60px !important; height: 60px !important; } .sec-coaching .aud-card__name { margin: 16px 0 0 !important; font-size: 16.5px !important; line-height: 1.16 !important; font-weight: 800 !important; } .sec-coaching .aud-card__desc { margin: 7px 0 0 !important; font-size: 14px !important; line-height: 1.42 !important; } .sec-coaching .aud-card__radio { margin-top: auto !important; } .sec-coaching .calendar-widget { grid-column: 3 !important; grid-row: 1 / span 3 !important; display: grid !important; grid-template-rows: auto 260px auto !important; gap: 16px !important; align-self: start !important; justify-content: stretch !important; max-width: 470px !important; min-width: 430px !important; } .sec-coaching .cal__header { grid-row: 1 !important; align-self: end !important; } .sec-coaching .cal__body { grid-row: 2 !important; height: 260px !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .sec-coaching .cal__footer { grid-row: 3 !important; align-self: start !important; } .sec-coaching .cal__title { margin: 0 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } .sec-coaching .cal__nav { margin: 0 0 10px !important; } .sec-coaching .cal__grid { margin: 0 !important; gap: 4px !important; } .sec-coaching .cal__date { width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; } .sec-coaching .cal__cta { min-height: 54px !important; } @media (max-width: 1280px) { .sec-coaching .coaching-layout { grid-template-columns: minmax(0, 1fr) minmax(390px, 470px) !important; grid-template-rows: auto auto auto auto !important; } .sec-coaching .coaching__label, .sec-coaching .coaching__h2, .sec-coaching .coaching__desc { grid-column: 1 / -1 !important; grid-row: auto !important; } .sec-coaching .audience-cards { grid-column: 1 !important; grid-row: 4 !important; height: 260px !important; } .sec-coaching .calendar-widget { grid-column: 2 !important; grid-row: 4 !important; min-width: 0 !important; } } @media (max-width: 900px) { .sec-coaching .coaching-layout { grid-template-columns: 1fr !important; } .sec-coaching .audience-cards, .sec-coaching .calendar-widget { grid-column: 1 !important; grid-row: auto !important; } .sec-coaching .audience-cards, .sec-coaching .aud-card, .sec-coaching .cal__body { height: auto !important; } .sec-coaching .aud-card { min-height: 240px !important; } .sec-coaching .calendar-widget { grid-template-rows: auto auto auto !important; max-width: none !important; } } @media (max-width: 640px) { .sec-coaching .audience-cards { grid-template-columns: 1fr !important; } .sec-coaching .aud-card { min-height: 220px !important; } .sec-coaching .aud-card__ico { width: 78px !important; height: 78px !important; flex-basis: 78px !important; } .sec-coaching .aud-card__ico svg { width: 54px !important; height: 54px !important; } } /* FINAL BOOKING SAFE CLEANUP */ .sec-coaching .coaching-intro { grid-column: 1 !important; grid-row: 1 / span 3 !important; align-self: center !important; display: flex !important; flex-direction: column !important; gap: 0 !important; max-width: 360px !important; min-width: 0 !important; position: static !important; } .sec-coaching .coaching__label, .sec-coaching .coaching__h2, .sec-coaching .coaching__desc { grid-column: auto !important; grid-row: auto !important; position: static !important; inset: auto !important; transform: none !important; } .sec-coaching .coaching__label { margin: 0 0 32px !important; } .sec-coaching .coaching__h2 { margin: 0 !important; max-width: 360px !important; line-height: 1.08 !important; } .sec-coaching .coaching__desc { margin: 22px 0 0 !important; max-width: 340px !important; line-height: 1.55 !important; } .sec-coaching .calendar-widget { border: 1px solid rgba(0,0,0,0.08) !important; border-left: 1px solid rgba(0,0,0,0.08) !important; border-radius: 16px !important; background: #fbfaf7 !important; box-shadow: 0 18px 48px rgba(20,16,35,0.08) !important; padding: 24px !important; overflow: visible !important; } .sec-coaching .cal__body { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .sec-coaching .cal__header, .sec-coaching .cal__footer { border: 0 !important; background: transparent !important; box-shadow: none !important; } @media (max-width: 1280px) { .sec-coaching .coaching-intro { grid-column: 1 / -1 !important; grid-row: auto !important; align-self: start !important; } .sec-coaching .coaching__label { margin-bottom: 28px !important; } .sec-coaching .coaching__desc { margin-top: 20px !important; } } /* FINAL CALENDAR CARD ONLY BODY */ .sec-coaching .calendar-widget { border: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; display: grid !important; grid-template-rows: auto 260px auto !important; gap: 14px !important; align-self: start !important; overflow: visible !important; } .sec-coaching .cal__header { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 2px !important; align-self: end !important; } .sec-coaching .cal__body { height: 260px !important; box-sizing: border-box !important; padding: 20px 22px !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 16px !important; background: #fbfaf7 !important; box-shadow: 0 18px 48px rgba(20,16,35,0.08) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .sec-coaching .cal__footer { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 2px !important; align-self: start !important; } .sec-coaching .audience-cards { grid-row: 2 !important; height: 260px !important; align-self: stretch !important; } .sec-coaching .aud-card { height: 260px !important; } .sec-coaching .cal__title { margin: 0 !important; } .sec-coaching .cal__cta { width: 100% !important; } @media (max-width: 900px) { .sec-coaching .calendar-widget { display: flex !important; gap: 14px !important; } .sec-coaching .cal__body, .sec-coaching .audience-cards, .sec-coaching .aud-card { height: auto !important; } } /* FINAL CALENDAR CARD ROW ALIGNMENT */ .sec-coaching .coaching-layout { grid-template-rows: auto 260px auto !important; align-items: stretch !important; } .sec-coaching .calendar-widget { display: contents !important; border: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .sec-coaching .cal__header { grid-column: 3 !important; grid-row: 1 !important; align-self: end !important; padding: 0 2px !important; } .sec-coaching .cal__body { grid-column: 3 !important; grid-row: 2 !important; align-self: stretch !important; height: 260px !important; min-height: 0 !important; width: 100% !important; box-sizing: border-box !important; padding: 20px 22px !important; border: 1px solid rgba(0,0,0,0.08) !important; border-radius: 16px !important; background: #fbfaf7 !important; box-shadow: 0 18px 48px rgba(20,16,35,0.08) !important; } .sec-coaching .cal__footer { grid-column: 3 !important; grid-row: 3 !important; align-self: start !important; padding: 0 2px !important; } .sec-coaching .audience-cards { grid-column: 2 !important; grid-row: 2 !important; height: 260px !important; align-self: stretch !important; } .sec-coaching .aud-card { height: 260px !important; min-height: 0 !important; } @media (max-width: 1280px) { .sec-coaching .calendar-widget { display: grid !important; grid-column: 2 !important; grid-row: 4 !important; grid-template-rows: auto 260px auto !important; gap: 14px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } .sec-coaching .cal__header, .sec-coaching .cal__body, .sec-coaching .cal__footer { grid-column: auto !important; grid-row: auto !important; } } @media (max-width: 900px) { .sec-coaching .calendar-widget { grid-column: 1 !important; grid-row: auto !important; grid-template-rows: auto auto auto !important; } .sec-coaching .cal__body, .sec-coaching .audience-cards, .sec-coaching .aud-card { height: auto !important; } } /* FINAL BOOKING LEFT INTRO TOP ALIGN */ .sec-coaching .coaching-intro { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; margin-top: 0 !important; } .sec-coaching .coaching__label { margin: 0 0 28px !important; } .sec-coaching .coaching__h2 { margin: 0 !important; } .sec-coaching .coaching__desc { margin: 20px 0 0 !important; } @media (max-width: 1280px) { .sec-coaching .coaching-intro { grid-column: 1 / -1 !important; grid-row: auto !important; } } /* FINAL CTA + FOOTER TYPOGRAPHY CONSISTENCY */ .sec-cta, .footer { font-family: 'Manrope', Arial, sans-serif !important; } .sec-cta { min-height: 280px !important; height: auto !important; } .sec-cta .cta-dark, .sec-cta .cta-warm { min-height: 280px !important; } .sec-cta .cta-dark__h2 { font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(34px, 3vw, 52px) !important; line-height: 1.08 !important; font-weight: 520 !important; letter-spacing: 0 !important; } .sec-cta .cta-warm__text { font-family: 'Manrope', Arial, sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; font-weight: 400 !important; max-width: 360px !important; } .sec-cta .cta-warm__btn { min-height: 56px !important; width: auto !important; min-width: 220px !important; padding: 0 32px !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: 13px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .sec-cta .cta-warm__btn svg { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; } .footer { height: auto !important; min-height: 300px !important; padding-top: 42px !important; padding-bottom: 24px !important; } .footer__top { gap: clamp(34px, 4vw, 72px) !important; margin-bottom: 28px !important; align-items: start !important; } .footer__tagline { font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 400 !important; max-width: 240px !important; margin-top: 14px !important; margin-bottom: 16px !important; } .footer__cols { gap: clamp(26px, 3vw, 56px) !important; } .footer__col-head { font-family: 'Manrope', Arial, sans-serif !important; font-size: 12.5px !important; line-height: 1.2 !important; letter-spacing: 0.1em !important; font-weight: 800 !important; text-transform: uppercase !important; margin-bottom: 14px !important; } .footer__links { gap: 8px !important; } .footer__links a { font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.7 !important; font-weight: 400 !important; } .footer__nl-note { font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 400 !important; margin-bottom: 14px !important; max-width: 260px !important; } .footer__form { height: 50px !important; min-height: 50px !important; border-radius: 6px !important; } .footer__input { font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1 !important; padding: 0 15px !important; } .footer__submit { min-width: 52px !important; height: 50px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 22px !important; line-height: 1 !important; } .footer__copy, .footer__made { font-family: 'Manrope', Arial, sans-serif !important; font-size: 12.5px !important; line-height: 1.5 !important; } .footer__soc { width: 22px !important; height: 22px !important; } .footer__soc svg { width: 16px !important; height: 16px !important; } @media (max-width: 900px) { .sec-cta, .sec-cta .cta-dark, .sec-cta .cta-warm { min-height: auto !important; } .sec-cta .cta-dark, .sec-cta .cta-warm { padding-top: 42px !important; padding-bottom: 42px !important; } .sec-cta .cta-warm__btn { width: 100% !important; min-width: 0 !important; } .footer { min-height: 0 !important; } } @media (max-width: 560px) { .sec-cta .cta-dark__h2 { font-size: clamp(30px, 9vw, 38px) !important; } .sec-cta .cta-warm__text, .footer__tagline, .footer__links a, .footer__nl-note { font-size: 14px !important; } } /* FINAL CTA BUTTON TEXT ALIGNMENT */ .sec-cta .cta-warm { align-items: center !important; } .sec-cta .cta-warm__btn { align-self: center !important; justify-self: start !important; min-width: 250px !important; white-space: nowrap !important; } .sec-cta .cta-warm__btn, .sec-cta .cta-warm__btn * { white-space: nowrap !important; } @media (max-width: 900px) { .sec-cta .cta-warm__btn { justify-self: stretch !important; width: 100% !important; } } /* FINAL CTA RIGHT EDGE ALIGNMENT */ .sec-cta .cta-warm { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; padding-right: var(--pad-x) !important; } .sec-cta .cta-warm__text { justify-self: start !important; } .sec-cta .cta-warm__btn { justify-self: end !important; align-self: center !important; white-space: nowrap !important; min-width: 250px !important; } @media (max-width: 900px) { .sec-cta .cta-warm { grid-template-columns: 1fr !important; padding-right: 24px !important; } .sec-cta .cta-warm__btn { justify-self: stretch !important; width: 100% !important; } } /* FINAL CTA ALIGN TO CALENDAR RIGHT EDGE */ .sec-cta .cta-warm { position: relative !important; } .sec-cta .cta-warm__btn { justify-self: end !important; margin-right: -22px !important; white-space: nowrap !important; } @media (min-width: 1400px) { .sec-cta .cta-warm__btn { margin-right: -34px !important; } } @media (max-width: 900px) { .sec-cta .cta-warm__btn { margin-right: 0 !important; } } /* FINAL SHARED RIGHT EDGE CONTAINER ALIGNMENT */ :root { --e4la-page-max: 1520px; --e4la-page-pad: clamp(24px, 4vw, 72px); } .sec-coaching { padding-inline: var(--e4la-page-pad) !important; } .sec-coaching .coaching-layout { width: min(100%, var(--e4la-page-max)) !important; max-width: var(--e4la-page-max) !important; margin-inline: auto !important; } .sec-cta { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; display: grid !important; grid-template-columns: minmax(var(--e4la-page-pad), 1fr) minmax(0, calc(var(--e4la-page-max) / 2)) minmax(0, calc(var(--e4la-page-max) / 2)) minmax(var(--e4la-page-pad), 1fr) !important; } .sec-cta .cta-dark { grid-column: 1 / 3 !important; padding-left: max(var(--e4la-page-pad), calc((100vw - var(--e4la-page-max)) / 2 + var(--e4la-page-pad))) !important; padding-right: clamp(28px, 4vw, 64px) !important; } .sec-cta .cta-warm { grid-column: 3 / 5 !important; grid-template-columns: minmax(0, 1fr) auto !important; padding-left: clamp(28px, 4vw, 64px) !important; padding-right: max(var(--e4la-page-pad), calc((100vw - var(--e4la-page-max)) / 2 + var(--e4la-page-pad))) !important; align-items: center !important; } .sec-cta .cta-warm__btn { justify-self: end !important; margin-right: 0 !important; white-space: nowrap !important; } @media (max-width: 900px) { .sec-cta { grid-template-columns: 1fr !important; } .sec-cta .cta-dark, .sec-cta .cta-warm { grid-column: 1 !important; padding-left: var(--e4la-page-pad) !important; padding-right: var(--e4la-page-pad) !important; } .sec-cta .cta-warm__btn { justify-self: stretch !important; width: 100% !important; margin-right: 0 !important; } } /* FINAL STATS + WHY TYPOGRAPHY CONSISTENCY */ .sec-stats, .sec-why { font-family: 'Manrope', Arial, sans-serif !important; } .sec-stats { height: auto !important; min-height: 118px !important; padding-block: 26px !important; } .sec-stats .stats-grid { align-items: center !important; } .sec-stats .stat { gap: 14px !important; align-items: center !important; } .sec-stats .stat__ico { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; } .sec-stats .stat__num { font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(24px, 2vw, 34px) !important; line-height: 1 !important; font-weight: 650 !important; letter-spacing: 0 !important; } .sec-stats .stat__label { font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 400 !important; letter-spacing: 0 !important; margin-top: 5px !important; } .sec-why .why__label.section-eyebrow { font-family: 'Manrope', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.1 !important; letter-spacing: 0.28em !important; font-weight: 800 !important; text-transform: uppercase !important; } .sec-why .why__h2.section-heading { font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(34px, 2.6vw, 48px) !important; line-height: 1.12 !important; font-weight: 520 !important; letter-spacing: 0 !important; } .sec-why .why-item__head { gap: 14px !important; align-items: center !important; } .sec-why .why-item__title { font-family: 'Manrope', Arial, sans-serif !important; font-size: 19px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: 0 !important; } .sec-why .why-item__body { font-family: 'Manrope', Arial, sans-serif !important; font-size: 15px !important; line-height: 1.55 !important; font-weight: 400 !important; margin-top: 10px !important; } .sec-why .why-item__ico { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; } .sec-why .why-item__ico svg { width: 18px !important; height: 18px !important; } @media (max-width: 900px) { .sec-stats { min-height: 0 !important; padding-block: 24px !important; } .sec-stats .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } .sec-stats .stat:nth-child(5) { grid-column: 1 / -1 !important; } .sec-why .why__h2.section-heading { font-size: clamp(30px, 8vw, 42px) !important; } } @media (max-width: 560px) { .sec-stats .stats-grid { grid-template-columns: 1fr !important; } .sec-stats .stat:nth-child(5) { grid-column: auto !important; } .sec-stats .stat__label, .sec-why .why-item__body { font-size: 14.5px !important; } .sec-why .why-item__title { font-size: 18px !important; } } /* FINAL RESPONSIVE HOMEPAGE SYSTEM */ :root { --e4la-container-max: 1520px; --e4la-container-pad: clamp(24px, 4vw, 72px); } html, body { max-width: 100% !important; overflow-x: hidden !important; } body * { box-sizing: border-box !important; } .sec-services, .sec-stats, .sec-approach, .sec-why, .sec-coaching, .sec-cta, .footer { overflow-x: clip !important; } .services-top, .services-grid, .stats-grid, .approach-layout, .why-layout, .sec-coaching .coaching-layout, .footer__top, .footer__bottom { width: min(100%, var(--e4la-container-max)) !important; max-width: var(--e4la-container-max) !important; margin-inline: auto !important; } .sec-services, .sec-stats, .sec-approach, .sec-why, .sec-coaching, .footer { padding-left: var(--e4la-container-pad) !important; padding-right: var(--e4la-container-pad) !important; } .sec-services p, .sec-services h2, .sec-services h3, .sec-approach p, .sec-approach h2, .sec-why p, .sec-why h2, .sec-coaching p, .sec-coaching h2, .sec-cta p, .sec-cta h2, .footer p, .footer a, .footer input { word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .sec-coaching .cal__cta, .sec-cta .cta-warm__btn { position: static !important; } .sec-coaching .calendar-widget, .sec-coaching .cal__body, .sec-coaching .cal__footer, .sec-coaching .cal__cta { max-width: 100% !important; } .sec-coaching .cal__grid { width: 100% !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } .sec-coaching .cal__date, .sec-coaching .cal__day-name { max-width: 100% !important; } @media (min-width: 1400px) { .sec-coaching .coaching-layout { grid-template-columns: minmax(300px, 0.78fr) minmax(600px, 1.3fr) minmax(460px, 1fr) !important; } } @media (max-width: 1100px) { .hero, .sec-services, .sec-stats, .sec-approach, .sec-why, .sec-coaching, .sec-cta, .footer { height: auto !important; } .hero { min-height: 620px !important; } .sec-coaching { padding-top: clamp(56px, 8vw, 84px) !important; padding-bottom: clamp(56px, 8vw, 84px) !important; } .sec-coaching .coaching-layout { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: none !important; gap: 40px !important; align-items: start !important; } .sec-coaching .coaching-layout > div:first-child { display: block !important; min-width: 0 !important; } .sec-coaching .coaching-intro { display: flex !important; flex-direction: column !important; grid-column: auto !important; grid-row: auto !important; max-width: 620px !important; margin: 0 !important; } .sec-coaching .coaching__label, .sec-coaching .coaching__h2, .sec-coaching .coaching__desc { grid-column: auto !important; grid-row: auto !important; } .sec-coaching .coaching__label { margin: 0 0 28px !important; } .sec-coaching .coaching__h2 { margin: 0 !important; max-width: 620px !important; } .sec-coaching .coaching__desc { margin: 20px 0 0 !important; max-width: 560px !important; } .sec-coaching .audience-cards { grid-column: auto !important; grid-row: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin-top: 30px !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; } .sec-coaching .audience-cards > li, .sec-coaching .aud-card { width: 100% !important; height: auto !important; min-height: 240px !important; } .sec-coaching .calendar-widget { display: grid !important; grid-column: auto !important; grid-row: auto !important; grid-template-rows: auto auto auto !important; gap: 16px !important; width: 100% !important; max-width: 720px !important; min-width: 0 !important; justify-self: start !important; } .sec-coaching .cal__header, .sec-coaching .cal__body, .sec-coaching .cal__footer { grid-column: auto !important; grid-row: auto !important; width: 100% !important; } .sec-coaching .cal__body { height: auto !important; min-height: 260px !important; } .sec-coaching .cal__cta { width: 100% !important; } .sec-cta { min-height: 0 !important; } .sec-cta .cta-dark, .sec-cta .cta-warm { min-height: 240px !important; } .footer__top { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.8fr) !important; } } @media (max-width: 700px) { :root { --e4la-container-pad: 22px; } .hero { min-height: auto !important; padding: 120px var(--e4la-container-pad) 64px !important; grid-template-columns: 1fr !important; } .hero__left, .hero__copy { max-width: 100% !important; } .sec-services, .sec-stats, .sec-approach, .sec-why, .sec-coaching, .footer { padding-left: var(--e4la-container-pad) !important; padding-right: var(--e4la-container-pad) !important; } .services-grid, .stats-grid, .why-grid, .footer__cols { grid-template-columns: 1fr !important; } .approach-layout, .why-layout, .footer__top, .footer__bottom { grid-template-columns: 1fr !important; } .sec-stats .stat:nth-child(5) { grid-column: auto !important; } .sec-coaching .coaching-layout { gap: 28px !important; } .sec-coaching .audience-cards { grid-template-columns: 1fr !important; gap: 16px !important; } .sec-coaching .aud-card { min-height: 220px !important; padding: 20px !important; } .sec-coaching .calendar-widget { max-width: 100% !important; } .sec-coaching .cal__body { padding: 18px 14px !important; min-height: 0 !important; } .sec-coaching .cal__date { width: auto !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; font-size: 12px !important; } .sec-coaching .cal__day-name { font-size: 10px !important; } .sec-coaching .cal__cta { width: 100% !important; min-height: 54px !important; } .sec-cta { grid-template-columns: 1fr !important; } .sec-cta .cta-dark, .sec-cta .cta-warm { grid-column: 1 !important; min-height: 0 !important; padding: 42px var(--e4la-container-pad) !important; } .sec-cta .cta-warm { grid-template-columns: 1fr !important; gap: 24px !important; } .sec-cta .cta-warm__btn { width: 100% !important; min-width: 0 !important; justify-self: stretch !important; } .footer__form { width: 100% !important; } } @media (max-width: 430px) { :root { --e4la-container-pad: 18px; } .sec-coaching .cal__body { padding: 16px 10px !important; } .sec-coaching .cal__grid { gap: 3px !important; } .sec-coaching .cal__date { height: 31px !important; min-height: 31px !important; font-size: 11px !important; } } /* FINAL HOMEPAGE TYPOGRAPHY + SPACING POLISH */ :root { --e4la-font: 'Manrope', Arial, sans-serif; --e4la-container-max: 1520px; --e4la-container-pad: clamp(24px, 4vw, 72px); --e4la-section-y: clamp(64px, 7vw, 112px); --e4la-gap-lg: clamp(24px, 3vw, 40px); } body, button, input, a { font-family: var(--e4la-font) !important; } .section-inner, .container, .services-top, .services-grid, .stats-grid, .approach-layout, .why-layout, .sec-coaching .coaching-layout, .footer__top, .footer__bottom { width: min(100%, var(--e4la-container-max)) !important; max-width: var(--e4la-container-max) !important; margin-inline: auto !important; } .section-eyebrow, .hero__eyebrow, .label-tag, .approach__label, .why__label, .coaching__label { font-family: var(--e4la-font) !important; font-size: 14px !important; line-height: 1.1 !important; letter-spacing: 0.24em !important; font-weight: 800 !important; text-transform: uppercase !important; margin-bottom: 28px !important; } .section-heading, .services-top__h2, .approach__h2, .why__h2, .coaching__h2, .cta-dark__h2 { font-family: var(--e4la-font) !important; font-size: clamp(32px, 2.4vw, 44px) !important; line-height: 1.12 !important; font-weight: 560 !important; letter-spacing: 0 !important; } .section-description, .hero__desc, .approach__desc, .coaching__desc, .cta-warm__text, .footer__tagline, .footer__nl-note, .faq-item__a > p, .schedule-card__desc { font-family: var(--e4la-font) !important; font-size: clamp(14.5px, 1vw, 16px) !important; line-height: 1.56 !important; font-weight: 400 !important; } .card-title, .svc-card__title, .why-item__title, .aud-card__name, .tstep__name, .footer__col-head, .howwork-step__name { font-family: var(--e4la-font) !important; font-size: clamp(16px, 1.1vw, 20px) !important; line-height: 1.24 !important; font-weight: 800 !important; letter-spacing: 0 !important; } /* .faq-item__q was briefly grouped with the bold card-title role above (20px/800) — direct feedback was that this read as too heavy/bold for a clickable question row, so it now shares the small-text scale instead, with its own semibold (not bold) weight set right below, same treatment as .gain-item__text / .schedule-card__meta li. */ .card-description, .svc-card__desc, .svc-card__more, .why-item__body, .aud-card__desc, .tstep__sub, .footer__links a, .gain-item__text, .howwork-step__desc, .schedule-card__note, .schedule-card__meta li, .faq-item__q { font-family: var(--e4la-font) !important; font-size: clamp(14px, 0.95vw, 15.5px) !important; line-height: 1.52 !important; font-weight: 400 !important; letter-spacing: 0 !important; word-break: normal !important; overflow-wrap: normal !important; } .site-cta, .btn-outline-white, .btn-play, .btn-outline-gold, .services-top__link, .cal__cta, .cta-warm__btn { min-height: 52px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding-inline: 28px 34px !important; font-family: var(--e4la-font) !important; font-size: 13px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; white-space: nowrap !important; } .site-cta svg, .btn-outline-white svg, .btn-outline-gold svg, .services-top__link svg, .cal__cta svg, .cta-warm__btn svg { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; } .hero__actions { gap: 16px !important; align-items: center !important; } .hero__h1 { font-family: var(--e4la-font) !important; line-height: 1.04 !important; margin-bottom: 20px !important; } .hero__desc { margin-bottom: 32px !important; max-width: 620px !important; } .btn-play { padding-left: 16px !important; } .btn-play__ring { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } .btn-play__ring svg { width: 11px !important; height: 12px !important; } .services-top, .approach-layout, .why-layout, .sec-coaching .coaching-layout { gap: var(--e4la-gap-lg) !important; } .services-grid, .why-grid, .audience-cards { gap: clamp(18px, 2vw, 28px) !important; } .approach__desc, .coaching__desc { margin-top: 20px !important; } .btn-outline-gold, .services-top__link { margin-top: 30px !important; } .stat__num { font-family: var(--e4la-font) !important; font-size: clamp(24px, 2vw, 34px) !important; line-height: 1 !important; font-weight: 650 !important; } .stat__label { font-family: var(--e4la-font) !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 400 !important; } .footer__col-head { font-size: 12.5px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } @media (max-width: 700px) { .section-eyebrow, .hero__eyebrow, .label-tag, .approach__label, .why__label, .coaching__label { font-size: 12.5px !important; letter-spacing: 0.18em !important; margin-bottom: 22px !important; } .section-heading, .services-top__h2, .approach__h2, .why__h2, .coaching__h2, .cta-dark__h2 { font-size: clamp(30px, 8vw, 40px) !important; } .hero__actions { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } .hero__actions .btn-outline-white, .hero__actions .btn-play { width: 100% !important; justify-content: center !important; } .site-cta, .btn-outline-white, .btn-play, .btn-outline-gold, .services-top__link, .cal__cta, .cta-warm__btn { min-height: 52px !important; padding-inline: 22px !important; font-size: 12.5px !important; } } /* FINAL HERO CLEAN SINGLE IMAGE RESET */ @media (min-width: 1121px) { .hero__right { display: flex !important; justify-content: center !important; align-items: center !important; position: relative !important; overflow: visible !important; perspective: none !important; } .hero-reference-art { display: block !important; width: min(45vw, 700px) !important; height: min(58vh, 610px) !important; max-width: 100% !important; position: relative !important; overflow: visible !important; background-image: url('assets/e4la-hero-highres.jpeg') !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center center !important; opacity: 1 !important; filter: saturate(1.04) contrast(1.03) !important; transform: none !important; scale: 1 !important; transition: none !important; will-change: auto !important; } .hero-reference-art::before, .hero-reference-art::after { display: none !important; content: none !important; background: none !important; background-image: none !important; opacity: 0 !important; transform: none !important; } .hero__right > .ring-wrap { display: none !important; } } @media (max-width: 1120px) { .hero-reference-art, .hero-reference-art::before, .hero-reference-art::after { display: none !important; content: none !important; background: none !important; background-image: none !important; transform: none !important; } } /* FINAL REMOVE SECOND HERO IMAGE */ .hero-reference-art, .hero-reference-art::before, .hero-reference-art::after { display: none !important; content: none !important; background: none !important; background-image: none !important; opacity: 0 !important; transform: none !important; } .hero__right { display: none !important; } /* FINAL NAV LINK FONT SIZE INCREASE */ .nav__links a, .nav a:not(.nav__logo):not(.nav__cta) { font-size: 13.5px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: 0.08em !important; } @media (max-width: 900px) { .nav__links a, .nav a:not(.nav__logo):not(.nav__cta) { font-size: 13px !important; } } /* FINAL NAV LINK SIZE WITHOUT BOLD */ .nav__links a, .nav a:not(.nav__logo):not(.nav__cta) { font-size: 13.5px !important; line-height: 1.2 !important; font-weight: 400 !important; letter-spacing: 0.08em !important; } @media (max-width: 900px) { .nav__links a, .nav a:not(.nav__logo):not(.nav__cta) { font-size: 13px !important; font-weight: 400 !important; } } /* FINAL SERVICES CARD GRID + 3D HOVER */ /* FINAL v5 — DARK GLASS REDESIGN, matching the about.html reference (dark base + soft blurred brand-color glow blobs, translucent "glass" cards on top). Reuses the site's own dark/brand palette (#07060D + purple/magenta/gold) instead of about.css's separate #020817 palette, so this section stays visually consistent with the rest of the homepage's dark sections (hero/approach/FAQ/footer). */ .sec-services { position: relative !important; width: min(calc(100% - 48px), 1520px) !important; max-width: 1520px !important; height: auto !important; min-height: 0 !important; margin: 0 auto clamp(56px, 7vw, 96px) !important; padding: clamp(80px, 8.5vw, 130px) clamp(24px, 4vw, 44px) clamp(72px, 8vw, 110px) !important; display: block !important; overflow: visible !important; border-radius: 0 0 clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) !important; background: linear-gradient(180deg, #07060D 0%, #0c0a17 50%, #07060D 100%) !important; box-shadow: 0 28px 80px rgba(0, 0, 0, .4) !important; color: #fff !important; font-family: 'Manrope', Arial, sans-serif !important; isolation: isolate !important; } /* FINAL — the left-to-right color wash used to sit at full strength starting at y:0, i.e. right where the hero's flat black ends, so it read as a visible seam no matter how the vertical fade above was tuned. Move it to a masked ::before that only fades in after the top ~18% of the section, behind a z-index:-1 stacking context, so the very top edge stays pure hero-black and the color only appears once safely past the hero/services boundary. */ .sec-services::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; border-radius: inherit !important; background: linear-gradient(90deg, rgba(79, 125, 255, .18) 0%, rgba(124, 58, 237, .18) 50%, rgba(219, 39, 119, .15) 100%) !important; /* Top edge (hero -> services): soft fade back in, restoring the smooth blend that existed before the approach-boundary hard-cut fix collapsed this mask to a near-instant 6px reveal — that 6px value made the color wash snap on abruptly right under the hero, which is the harsh line being complained about here. Bottom edge stays untouched: solid all the way to 100%, no fade-out, per the earlier explicit "hard boundary at approach" requirement — only the top got softened. */ -webkit-mask-image: linear-gradient(180deg, transparent 0px, #000 90px, #000 100%) !important; mask-image: linear-gradient(180deg, transparent 0px, #000 90px, #000 100%) !important; pointer-events: none !important; } /* FINAL — the boundary itself (the border-top line on .sec-approach) is meant to BE the hard edge: colored wash above it, flat dark hero-color below it, no fade on either side. The wash above now runs at full strength all the way down to the line; .sec-approach already uses a flat #07060D with no gradient of its own, so the line reads as a clean, deliberate boundary instead of a blend. */ .sec-services .services-top { display: block !important; width: min(100%, 820px) !important; max-width: 820px !important; margin: 0 auto clamp(56px, 7vw, 90px) !important; padding: 0 !important; text-align: center !important; } .sec-services .services-top > div { display: block !important; padding: 0 !important; max-width: none !important; } .sec-services .label-tag, .sec-services .label-tag.section-eyebrow { display: block !important; margin: 0 0 20px !important; color: #d8a8ff !important; font-size: clamp(12px, 1vw, 14px) !important; line-height: 1.1 !important; letter-spacing: 0.32em !important; font-weight: 800 !important; text-transform: uppercase !important; } .sec-services .services-top__h2, .sec-services .services-top__h2.section-heading { max-width: 720px !important; margin: 0 auto !important; color: #fff !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(40px, 4.2vw, 66px) !important; line-height: 1.04 !important; letter-spacing: -0.035em !important; font-weight: 850 !important; text-align: center !important; } .sec-services .services-top > p { display: block !important; max-width: 660px !important; margin: 22px auto 0 !important; color: rgba(255, 255, 255, 0.68) !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(16px, 1.35vw, 21px) !important; line-height: 1.55 !important; font-weight: 400 !important; text-align: center !important; } .sec-services .services-top__link, .sec-services .services-top__link.section-cta { display: none !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid { width: 100% !important; max-width: none !important; height: auto !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: clamp(20px, 2.2vw, 32px) !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; perspective: 1200px !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card { position: relative !important; min-width: 0 !important; width: 100% !important; height: auto !important; min-height: clamp(360px, 32vw, 500px) !important; padding: clamp(24px, 2.2vw, 34px) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 24px !important; border: 1px solid rgba(15, 14, 24, 0.08) !important; border-left: 1px solid rgba(15, 14, 24, 0.08) !important; border-top: 1px solid rgba(15, 14, 24, 0.08) !important; border-radius: clamp(18px, 1.7vw, 24px) !important; background: #fff !important; box-shadow: 0 10px 28px rgba(15, 14, 24, 0.08) !important; color: #11121b !important; overflow: visible !important; cursor: pointer !important; transform-style: preserve-3d !important; transform: perspective(1200px) translateY(var(--svc-lift, 0px)) rotateX(var(--svc-rx, 0deg)) rotateY(var(--svc-ry, 0deg)) scale(var(--svc-scale, 1)) !important; transition: transform 0.38s cubic-bezier(.22,1,.36,1), box-shadow 0.38s cubic-bezier(.22,1,.36,1), background 0.38s cubic-bezier(.22,1,.36,1), border-color 0.38s cubic-bezier(.22,1,.36,1) !important; will-change: transform !important; contain: layout paint !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active { background: #fff !important; border-color: rgba(15, 14, 24, 0.12) !important; box-shadow: 0 16px 38px rgba(15, 14, 24, 0.14) !important; } .sec-services .svc-card__content { display: flex !important; flex-direction: column !important; min-height: 0 !important; gap: 0 !important; transform-style: preserve-3d !important; } .sec-services .svc-card .svc-icon { width: clamp(92px, 8vw, 142px) !important; height: clamp(92px, 8vw, 142px) !important; flex: 0 0 auto !important; margin: 0 0 clamp(30px, 3vw, 48px) !important; display: grid !important; place-items: center !important; border-radius: 24px !important; background: transparent !important; box-shadow: none !important; color: currentColor !important; transform: translateZ(50px) !important; transition: transform 0.38s cubic-bezier(.22,1,.36,1) !important; } .sec-services .svc-card .svc-icon svg { width: 100% !important; height: 100% !important; stroke-width: 1.15 !important; } .sec-services .svc-card .svc-icon--purple { color: #5f43d3 !important; } .sec-services .svc-card .svc-icon--blue { color: #236ec7 !important; } .sec-services .svc-card .svc-icon--green { color: #15a28e !important; } .sec-services .svc-card .svc-icon--amber { color: #e87516 !important; } .sec-services .svc-card .svc-icon--indigo { color: #8d35b2 !important; } .sec-services .svc-card .svc-card__title { width: 100% !important; max-width: none !important; margin: 0 0 16px !important; color: #11121b !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(19px, 1.45vw, 27px) !important; line-height: 1.16 !important; letter-spacing: -0.025em !important; font-weight: 850 !important; text-transform: uppercase !important; transform: translateZ(35px) !important; } .sec-services .svc-card .svc-card__desc { width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; color: rgba(17, 18, 27, 0.74) !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(14px, 1vw, 16px) !important; line-height: 1.58 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; transform: translateZ(25px) !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } .sec-services .svc-card .svc-card__more { display: none !important; } .sec-services .svc-card .svc-card__arr { position: static !important; width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; margin: auto 0 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; border-radius: 999px !important; border: 1px solid currentColor !important; background: rgba(255, 255, 255, 0.24) !important; color: inherit !important; transform: translateZ(35px) !important; transition: transform 0.28s ease, background 0.28s ease !important; } .sec-services .svc-card:hover .svc-card__arr, .sec-services .svc-card:focus-visible .svc-card__arr, .sec-services .svc-card.is-active .svc-card__arr { transform: translateZ(44px) translateX(3px) !important; background: rgba(255, 255, 255, 0.48) !important; } .sec-services .svc-card .svc-card__arr svg { width: 20px !important; height: 20px !important; } @media (max-width: 1180px) { .sec-services .services-grid, .sec-services .services-grid.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card { min-height: 360px !important; } } @media (max-width: 640px) { .sec-services { width: calc(100% - 28px) !important; margin-block: 48px !important; padding: 44px 18px 24px !important; border-radius: 24px !important; } .sec-services .services-grid, .sec-services .services-grid.services-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .sec-services .services-top { margin-bottom: 32px !important; } .sec-services .services-top__h2, .sec-services .services-top__h2.section-heading { font-size: clamp(32px, 10vw, 44px) !important; } .sec-services .svc-card, .sec-services .svc-card.svc-card { min-height: 0 !important; padding: 26px !important; transform: none !important; } .sec-services .svc-card .svc-icon { width: 92px !important; height: 92px !important; margin-bottom: 26px !important; } } @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .sec-services .svc-card, .sec-services .svc-card.svc-card { transform: none !important; transition: box-shadow 0.25s ease, background 0.25s ease !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active { transform: none !important; } .sec-services .svc-card .svc-icon, .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc, .sec-services .svc-card .svc-card__arr { transform: none !important; } } /* FINAL SERVICES SMOOTH 3D MOTION */ .sec-services .svc-card, .sec-services .svc-card.svc-card { --svc-rx: 0deg; --svc-ry: 0deg; --svc-scale: 1; --svc-lift: 0px; transform: perspective(1200px) translateY(var(--svc-lift, 0px)) rotateX(var(--svc-rx, 0deg)) rotateY(var(--svc-ry, 0deg)) scale(var(--svc-scale, 1)) !important; transform-style: preserve-3d !important; backface-visibility: hidden !important; will-change: transform !important; transition: box-shadow 650ms cubic-bezier(.22, 1, .36, 1), background 650ms cubic-bezier(.22, 1, .36, 1), border-color 650ms cubic-bezier(.22, 1, .36, 1) !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active, .sec-services .svc-card.is-hovering, .sec-services .svc-card.is-tilting { transform: perspective(1200px) translateY(var(--svc-lift, 0px)) rotateX(var(--svc-rx, 0deg)) rotateY(var(--svc-ry, 0deg)) scale(var(--svc-scale, 1)) !important; } .sec-services .svc-card.is-hovering, .sec-services .svc-card.is-tilting { box-shadow: 0 16px 38px rgba(15, 14, 24, 0.14) !important; } .sec-services .svc-card .svc-icon, .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc, .sec-services .svc-card .svc-card__arr { transform-style: preserve-3d !important; backface-visibility: hidden !important; will-change: transform !important; transition: transform 760ms cubic-bezier(.22, 1, .36, 1) !important; } .sec-services .svc-card .svc-icon { transform: translateZ(50px) !important; } .sec-services .svc-card .svc-card__title { transform: translateZ(35px) !important; } .sec-services .svc-card .svc-card__desc { transform: translateZ(25px) !important; } .sec-services .svc-card .svc-card__arr { transform: translateZ(35px) !important; } .sec-services .svc-card.is-hovering .svc-icon, .sec-services .svc-card.is-tilting .svc-icon { transform: translateZ(70px) translateY(-4px) scale(1.08) !important; } .sec-services .svc-card.is-hovering .svc-card__title, .sec-services .svc-card.is-tilting .svc-card__title { transform: translateZ(50px) translateY(-3px) scale(1.035) !important; } .sec-services .svc-card.is-hovering .svc-card__desc, .sec-services .svc-card.is-tilting .svc-card__desc { transform: translateZ(32px) translateY(-2px) scale(1.015) !important; } .sec-services .svc-card.is-hovering .svc-card__arr, .sec-services .svc-card.is-tilting .svc-card__arr { transform: translateZ(55px) translateY(-2px) scale(1.08) !important; } @media (max-width: 899px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .sec-services .svc-card, .sec-services .svc-card.svc-card, .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active, .sec-services .svc-card.is-hovering, .sec-services .svc-card.is-tilting { --svc-rx: 0deg !important; --svc-ry: 0deg !important; --svc-scale: 1 !important; transform: none !important; transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease !important; } .sec-services .svc-card:hover, .sec-services .svc-card:focus-visible, .sec-services .svc-card.is-active { transform: scale(1.01) !important; } .sec-services .svc-card .svc-icon, .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc, .sec-services .svc-card .svc-card__arr, .sec-services .svc-card.is-hovering .svc-icon, .sec-services .svc-card.is-hovering .svc-card__title, .sec-services .svc-card.is-hovering .svc-card__desc, .sec-services .svc-card.is-hovering .svc-card__arr { transform: none !important; transition: transform 320ms ease !important; } } /* FINAL SERVICES INNER CONTENT STABILITY FIX */ .sec-services .services-grid .svc-card.svc-card { justify-content: space-between !important; grid-template-rows: none !important; overflow: visible !important; transform-style: preserve-3d !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__content { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; justify-content: flex-start !important; min-height: 0 !important; height: auto !important; max-height: none !important; gap: 0 !important; margin: 0 !important; opacity: 1 !important; overflow: visible !important; transform-style: preserve-3d !important; } .sec-services .services-grid .svc-card.svc-card .svc-icon, .sec-services .services-grid .svc-card.svc-card .svc-card__title, .sec-services .services-grid .svc-card.svc-card .svc-card__desc, .sec-services .services-grid .svc-card.svc-card .svc-card__arr { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; max-height: none !important; overflow: visible !important; transition: transform 820ms cubic-bezier(.22, 1, .36, 1), background 420ms ease, border-color 420ms ease, color 420ms ease !important; transform-style: preserve-3d !important; backface-visibility: hidden !important; will-change: transform !important; } .sec-services .services-grid .svc-card.svc-card .svc-icon { margin: 0 0 clamp(30px, 3vw, 48px) !important; transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__title { margin: 0 0 16px !important; transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__desc { height: auto !important; min-height: 0 !important; margin: 0 !important; transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__more { display: none !important; height: auto !important; max-height: none !important; margin: 0 !important; opacity: 1 !important; overflow: visible !important; transform: none !important; transition: none !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__arr, .sec-services .services-grid .svc-card.svc-card .svc-card__desc + .svc-card__arr, .sec-services .services-grid .svc-card.svc-card .svc-card__desc + .svc-card__more + .svc-card__arr, .sec-services .services-grid .svc-card.svc-card .svc-card__content + .svc-card__arr { margin: auto 0 0 !important; flex: 0 0 54px !important; transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .svc-card:hover .svc-icon, .sec-services .svc-card:focus-visible .svc-icon, .sec-services .svc-card.is-active .svc-icon, .sec-services .svc-card.is-hovering .svc-icon, .sec-services .svc-card.is-tilting .svc-icon { transform: translateZ(55px) translateY(-3px) scale(1.035) !important; } .sec-services .svc-card:hover .svc-card__title, .sec-services .svc-card:focus-visible .svc-card__title, .sec-services .svc-card.is-active .svc-card__title, .sec-services .svc-card.is-hovering .svc-card__title, .sec-services .svc-card.is-tilting .svc-card__title { transform: translateZ(42px) translateY(-2px) scale(1.015) !important; } .sec-services .svc-card:hover .svc-card__desc, .sec-services .svc-card:focus-visible .svc-card__desc, .sec-services .svc-card.is-active .svc-card__desc, .sec-services .svc-card.is-hovering .svc-card__desc, .sec-services .svc-card.is-tilting .svc-card__desc { transform: translateZ(28px) translateY(-1px) scale(1) !important; } .sec-services .svc-card:hover .svc-card__arr, .sec-services .svc-card:focus-visible .svc-card__arr, .sec-services .svc-card.is-active .svc-card__arr, .sec-services .svc-card.is-hovering .svc-card__arr, .sec-services .svc-card.is-tilting .svc-card__arr { transform: translateZ(38px) translateY(-2px) scale(1.04) !important; } @media (max-width: 899px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .sec-services .svc-card .svc-icon, .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc, .sec-services .svc-card .svc-card__arr { transform: none !important; transition: background 320ms ease, border-color 320ms ease, color 320ms ease !important; } } /* FINAL SERVICES CUSTOM ICONS + CTA COLORS */ .sec-services .services-grid .svc-card.svc-card .svc-icon img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; mix-blend-mode: multiply !important; filter: contrast(1.08) saturate(1.05) !important; pointer-events: none !important; } .sec-services .services-grid .svc-card:nth-child(1) .svc-card__arr { color: #493481 !important; border-color: #493481 !important; } .sec-services .services-grid .svc-card:nth-child(2) .svc-card__arr { color: #1f3f7a !important; border-color: #1f3f7a !important; } .sec-services .services-grid .svc-card:nth-child(3) .svc-card__arr { color: #0e6f59 !important; border-color: #0e6f59 !important; } .sec-services .services-grid .svc-card:nth-child(4) .svc-card__arr { color: #a94f12 !important; border-color: #a94f12 !important; } .sec-services .services-grid .svc-card:nth-child(5) .svc-card__arr { color: #64206f !important; border-color: #64206f !important; } .sec-services .services-grid .svc-card:nth-child(1):hover .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(1):focus-visible .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(1).is-active .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(1).is-hovering .svc-card__arr { background: rgba(73, 52, 129, .10) !important; } .sec-services .services-grid .svc-card:nth-child(2):hover .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(2):focus-visible .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(2).is-active .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(2).is-hovering .svc-card__arr { background: rgba(31, 63, 122, .10) !important; } .sec-services .services-grid .svc-card:nth-child(3):hover .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(3):focus-visible .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(3).is-active .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(3).is-hovering .svc-card__arr { background: rgba(14, 111, 89, .10) !important; } .sec-services .services-grid .svc-card:nth-child(4):hover .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(4):focus-visible .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(4).is-active .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(4).is-hovering .svc-card__arr { background: rgba(169, 79, 18, .11) !important; } .sec-services .services-grid .svc-card:nth-child(5):hover .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(5):focus-visible .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(5).is-active .svc-card__arr, .sec-services .services-grid .svc-card:nth-child(5).is-hovering .svc-card__arr { background: rgba(100, 32, 111, .10) !important; } /* FINAL SERVICES INNER MOTION - TRANSFORM ONLY */ .sec-services .svc-card .svc-icon, .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc, .sec-services .svc-card .svc-card__arr { transform-origin: left center !important; transform-style: preserve-3d !important; backface-visibility: hidden !important; will-change: transform !important; opacity: 1 !important; transition: transform 850ms cubic-bezier(.22, 1, .36, 1) !important; } .sec-services .svc-card .svc-icon { transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .svc-card .svc-card__title { transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .svc-card .svc-card__desc { transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .svc-card .svc-card__arr { transform: translateZ(0) translateY(0) scale(1) !important; } .sec-services .svc-card:hover .svc-icon, .sec-services .svc-card.is-hovering .svc-icon, .sec-services .svc-card.is-tilting .svc-icon { transform: translateZ(48px) translateY(-5px) scale(1.075) !important; } .sec-services .svc-card:hover .svc-card__title, .sec-services .svc-card.is-hovering .svc-card__title, .sec-services .svc-card.is-tilting .svc-card__title { transform: translateZ(34px) translateY(-3px) scale(1.015) !important; } .sec-services .svc-card:hover .svc-card__desc, .sec-services .svc-card.is-hovering .svc-card__desc, .sec-services .svc-card.is-tilting .svc-card__desc { transform: translateZ(22px) translateY(-2px) scale(1) !important; } .sec-services .svc-card:hover .svc-card__arr, .sec-services .svc-card.is-hovering .svc-card__arr, .sec-services .svc-card.is-tilting .svc-card__arr { transform: translateZ(36px) translateY(-3px) scale(1.06) !important; } @media (max-width: 899px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .sec-services .svc-card .svc-icon, .sec-services .svc-card .svc-card__title, .sec-services .svc-card .svc-card__desc, .sec-services .svc-card .svc-card__arr, .sec-services .svc-card:hover .svc-icon, .sec-services .svc-card:hover .svc-card__title, .sec-services .svc-card:hover .svc-card__desc, .sec-services .svc-card:hover .svc-card__arr, .sec-services .svc-card.is-hovering .svc-icon, .sec-services .svc-card.is-hovering .svc-card__title, .sec-services .svc-card.is-hovering .svc-card__desc, .sec-services .svc-card.is-hovering .svc-card__arr, .sec-services .svc-card.is-tilting .svc-icon, .sec-services .svc-card.is-tilting .svc-card__title, .sec-services .svc-card.is-tilting .svc-card__desc, .sec-services .svc-card.is-tilting .svc-card__arr { transform: none !important; } } /* ================================================================ FINAL PATCH — SERVICES 3D CARD + INNER MOTION Keep this as the LAST services block. Do not add service-card rules after it. ================================================================ */ /* Stable Aceternity-style card body: JS controls only these variables. */ .sec-services .services-grid .svc-card.svc-card, .sec-services .services-grid .svc-card.svc-card:hover, .sec-services .services-grid .svc-card.svc-card:focus-visible, .sec-services .services-grid .svc-card.svc-card.is-active, .sec-services .services-grid .svc-card.svc-card.is-hovering, .sec-services .services-grid .svc-card.svc-card.is-tilting { --svc-rx: 0deg; --svc-ry: 0deg; --svc-scale: 1; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; grid-template-columns: none !important; grid-template-rows: none !important; gap: 0 !important; overflow: visible !important; transform: perspective(1200px) rotateX(var(--svc-rx, 0deg)) rotateY(var(--svc-ry, 0deg)) scale(var(--svc-scale, 1)) !important; transform-style: preserve-3d !important; transform-origin: center center !important; backface-visibility: hidden !important; will-change: transform !important; transition: box-shadow 650ms cubic-bezier(.22, 1, .36, 1), background 650ms cubic-bezier(.22, 1, .36, 1), border-color 650ms cubic-bezier(.22, 1, .36, 1) !important; } .sec-services .services-grid .svc-card.svc-card:hover, .sec-services .services-grid .svc-card.svc-card:focus-visible, .sec-services .services-grid .svc-card.svc-card.is-hovering, .sec-services .services-grid .svc-card.svc-card.is-tilting { box-shadow: 0 16px 38px rgba(15, 14, 24, .14) !important; } /* Kill the old accordion/reveal behavior. Nothing inside the card should collapse. */ .sec-services .services-grid .svc-card.svc-card .svc-card__content { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; overflow: visible !important; transform: translateZ(0) !important; transform-style: preserve-3d !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__more { display: none !important; } /* Shared inner CardItem behavior. Transform only; no height/margin animation. */ .sec-services .services-grid .svc-card.svc-card .svc-icon, .sec-services .services-grid .svc-card.svc-card .svc-card__title, .sec-services .services-grid .svc-card.svc-card .svc-card__desc, .sec-services .services-grid .svc-card.svc-card .svc-card__arr { opacity: 1 !important; visibility: visible !important; max-height: none !important; height: auto !important; overflow: visible !important; pointer-events: auto !important; transform-style: preserve-3d !important; backface-visibility: hidden !important; will-change: transform !important; transition: transform 850ms cubic-bezier(.22, 1, .36, 1), background 650ms cubic-bezier(.22, 1, .36, 1), border-color 650ms cubic-bezier(.22, 1, .36, 1), color 650ms cubic-bezier(.22, 1, .36, 1) !important; } /* Icon: centered, larger, visible. */ .sec-services .services-grid .svc-card.svc-card .svc-icon { width: 82px !important; height: 82px !important; min-width: 82px !important; min-height: 82px !important; flex: 0 0 82px !important; margin: 0 auto 24px !important; align-self: center !important; display: grid !important; place-items: center !important; background: transparent !important; border-radius: 18px !important; box-shadow: none !important; transform-origin: center center !important; transform: translateZ(64px) translateY(0) scale(1) !important; } .sec-services .services-grid .svc-card.svc-card .svc-icon img, .sec-services .services-grid .svc-card.svc-card .svc-icon svg { width: 72px !important; height: 72px !important; max-width: 72px !important; max-height: 72px !important; object-fit: contain !important; display: block !important; opacity: 1 !important; } /* Title: less heavy, centered, stable. */ .sec-services .services-grid .svc-card.svc-card .svc-card__title { width: 100% !important; max-width: none !important; margin: 0 0 14px !important; padding: 0 !important; flex: 0 0 auto !important; color: #11121b !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(16px, 1.05vw, 19px) !important; line-height: 1.16 !important; font-weight: 600 !important; letter-spacing: -0.012em !important; text-transform: none !important; text-align: center !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; transform-origin: center center !important; transform: translateZ(44px) translateY(0) scale(1) !important; } /* Description: readable and visible by default. */ .sec-services .services-grid .svc-card.svc-card .svc-card__desc { width: 100% !important; max-width: 27ch !important; margin: 0 auto !important; padding: 0 !important; flex: 0 0 auto !important; color: rgba(17, 18, 27, .72) !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(13px, .88vw, 15px) !important; line-height: 1.55 !important; font-weight: 400 !important; text-align: center !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; transform-origin: center top !important; transform: translateZ(28px) translateY(0) scale(1) !important; } /* Arrow: stable, not part of any reveal. */ .sec-services .services-grid .svc-card.svc-card .svc-card__arr, .sec-services .services-grid .svc-card.svc-card .svc-card__content + .svc-card__arr { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; flex: 0 0 54px !important; margin: auto auto 0 !important; align-self: center !important; display: grid !important; place-items: center !important; border-radius: 50% !important; transform-origin: center center !important; transform: translateZ(38px) translateY(0) scale(1) !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__arr svg { width: 18px !important; height: 18px !important; } /* Hover / active inner motion: smooth, visible, no layout shift. */ .sec-services .services-grid .svc-card.svc-card:hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card.is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card.is-tilting .svc-icon { transform: translateZ(76px) translateY(-5px) scale(.88) !important; } .sec-services .services-grid .svc-card.svc-card:hover .svc-card__title, .sec-services .services-grid .svc-card.svc-card:focus-visible .svc-card__title, .sec-services .services-grid .svc-card.svc-card.is-hovering .svc-card__title, .sec-services .services-grid .svc-card.svc-card.is-tilting .svc-card__title { transform: translateZ(54px) translateY(-6px) scale(.96) !important; } .sec-services .services-grid .svc-card.svc-card:hover .svc-card__desc, .sec-services .services-grid .svc-card.svc-card:focus-visible .svc-card__desc, .sec-services .services-grid .svc-card.svc-card.is-hovering .svc-card__desc, .sec-services .services-grid .svc-card.svc-card.is-tilting .svc-card__desc { transform: translateZ(40px) translateY(3px) scale(1.045) !important; } .sec-services .services-grid .svc-card.svc-card:hover .svc-card__arr, .sec-services .services-grid .svc-card.svc-card:focus-visible .svc-card__arr, .sec-services .services-grid .svc-card.svc-card.is-hovering .svc-card__arr, .sec-services .services-grid .svc-card.svc-card.is-tilting .svc-card__arr { transform: translateZ(48px) translateY(3px) scale(1.04) !important; } /* Mobile/reduced-motion: keep layout, remove 3D tracking. */ @media (max-width: 899px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .sec-services .services-grid .svc-card.svc-card, .sec-services .services-grid .svc-card.svc-card:hover, .sec-services .services-grid .svc-card.svc-card:focus-visible, .sec-services .services-grid .svc-card.svc-card.is-hovering, .sec-services .services-grid .svc-card.svc-card.is-tilting { --svc-rx: 0deg !important; --svc-ry: 0deg !important; --svc-scale: 1 !important; transform: none !important; } .sec-services .services-grid .svc-card.svc-card .svc-icon, .sec-services .services-grid .svc-card.svc-card .svc-card__title, .sec-services .services-grid .svc-card.svc-card .svc-card__desc, .sec-services .services-grid .svc-card.svc-card .svc-card__arr { transform: none !important; } } /* FINAL SERVICES SECTION — ICON SIZE/POSITION + HOVER MOTION */ /* Single consolidated source of truth for .svc-icon. Only touches the icon inside Services cards. Card tilt, title, desc, arrow, and every other section are untouched. */ .sec-services .services-grid .svc-card.svc-card .svc-icon { display: block !important; position: relative !important; left: 50% !important; right: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; flex: 0 0 auto !important; margin: 0 0 24px !important; align-self: center !important; justify-self: center !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; transform-origin: center center !important; transform: translateX(-50%) translateY(0) scale(1) !important; transition: transform 800ms cubic-bezier(.22, 1, .36, 1) !important; will-change: transform !important; } .sec-services .services-grid .svc-card.svc-card .svc-icon img, .sec-services .services-grid .svc-card.svc-card .svc-icon svg { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: 0 auto !important; } .sec-services .services-grid .svc-card.svc-card:hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card.is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card.is-tilting .svc-icon { transform: translateX(-50%) translateY(-18px) scale(0.72) !important; } /* Preserve reduced-motion / touch fallback for the icon specifically. */ @media (max-width: 899px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .sec-services .services-grid .svc-card.svc-card .svc-icon, .sec-services .services-grid .svc-card.svc-card:hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card.is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card.is-tilting .svc-icon { transform: translateX(-50%) translateY(0) scale(1) !important; } } /* FINAL SERVICES HEADING — gradient accent on "modern businesses." */ .sec-services .services-top__h2 .grad-text { background: linear-gradient(92deg, #7c3aed 0%, #a855f7 45%, #f97316 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* FINAL SERVICES CARD HEIGHT — taller cards, more breathing room before the arrow. The arrow already sits at the bottom via the card's justify-content:space-between + its own margin-top:auto, so a taller card directly widens that gap. */ .sec-services .services-grid .svc-card.svc-card { min-height: clamp(430px, 36vw, 570px) !important; } @media (max-width: 640px) { .sec-services .services-grid .svc-card.svc-card { min-height: 0 !important; } } /* FINAL SERVICES ICON 1 SIZE FIX — the source artwork for card 1 (assets/1.png) only fills ~70% of its own square canvas, versus ~91-94% for icons 2-5, so it renders visibly smaller than the others despite an identical icon box. Scale just this image up to match the others' apparent size. */ .sec-services .services-grid .svc-card.svc-card:nth-child(1) .svc-icon img { transform: scale(1.37) !important; transform-origin: center center !important; } /* FINAL SERVICES SECTION FULL-BLEED — remove the "floating rounded card" look. Section now spans edge-to-edge and sits flush against the sections above/below (no side inset, no rounded corners, no vertical margin gap). Inner padding is unchanged so the heading/cards still have breathing room from the edges. */ .sec-services { width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* FINAL MOBILE NAV MENU */ /* Adds a hamburger + slide-down panel so navigation isn't lost when .nav__links/.nav__cta are hidden at narrow widths (they currently have no replacement, which is a real responsiveness gap). */ .nav__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; z-index: 60; -webkit-tap-highlight-color: transparent; } .nav__burger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.28s cubic-bezier(.22, 1, .36, 1), opacity 0.28s cubic-bezier(.22, 1, .36, 1); } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__mobile { position: fixed; top: 62px; left: 0; right: 0; background: #02050d; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 24px var(--pad-x) 28px; display: flex; flex-direction: column; gap: 22px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.32s cubic-bezier(.22, 1, .36, 1), transform 0.32s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0.32s; z-index: 55; max-height: calc(100vh - 62px); overflow-y: auto; } .nav__mobile.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.32s cubic-bezier(.22, 1, .36, 1), transform 0.32s cubic-bezier(.22, 1, .36, 1); } .nav__mobile-links { display: flex; flex-direction: column; gap: 18px; list-style: none; margin: 0; padding: 0; } .nav__mobile-links a { display: block; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 0; } .nav__mobile-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } .nav__mobile-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; } .nav__mobile-cta svg { width: 12px; height: 12px; } body.nav-open { overflow: hidden; } @media (max-width: 780px) { .nav__burger { display: inline-flex; } /* Nav links used to only hide at max-width:700px (see the older 700px pass above) while .nav__cta and the nav's own compact sizing already switch at 780px (line ~924) — that left a ~79px window (701-780px) where the CTA button vanished with no burger menu yet shown to reach it. Hiding the links at the same 780px breakpoint the burger now appears at closes that gap. */ .nav__links { display: none !important; } } @media (min-width: 781px) { .nav__mobile { display: none !important; } } /* ============================================================ FINAL CTA — NEON PALM PILL (permanent, site-wide, reusable). Single shared system, applied via the existing .cta-neon class already present on all 7 CTAs (nav__cta, nav__mobile-cta, btn-outline-white, btn-play, btn-outline-gold.section-cta, cal__cta, cta-warm__btn). Additive only: does not set font-size/width/height, so each button's footprint stays as close as possible to its original size. Default: dark pill fill, colored neon stroke (gold or purple, per the --cta-neon--gold/--cta-neon--purple variant already on each button) with a soft static glow — always visible, not hover-only. Left badge is a FILLED circle that stretches to the button's own line-height and is pulled outward via negative margin so it reads flush/plugged-in with the pill's edges (visually very close to full CTA height on every variant, per spec — an exact px-perfect fit differs slightly per button since each has a different base padding). White palm icon inside, text unchanged to the right. Hover/focus: glow intensifies, a tiny 1.01 scale (no layout shift, transform never affects box size), and one bright comet continuously traces the exact rounded-rect perimeter (SVG rect + stroke-dasharray, sized live by script.js — mechanism unchanged from before). ============================================================ */ .cta-neon { --neon: #C8A84B; --neon-g1: rgba(200, 168, 75, .3); --neon-g2: rgba(200, 168, 75, .16); --neon-g3: rgba(200, 168, 75, .1); --neon-g1h: rgba(223, 192, 110, .45); --neon-g2h: rgba(223, 192, 110, .28); --neon-g3h: rgba(223, 192, 110, .16); position: relative !important; display: inline-flex !important; align-items: center !important; border-radius: 999px !important; background: #0a0612 !important; border: 1.5px solid var(--neon) !important; color: #fff !important; overflow: visible !important; isolation: isolate !important; box-shadow: 0 0 8px var(--neon-g1), 0 0 18px var(--neon-g2), inset 0 0 8px var(--neon-g3) !important; transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease !important; } .cta-neon:hover, .cta-neon:focus-visible { box-shadow: 0 0 12px var(--neon-g1h), 0 0 26px var(--neon-g2h), inset 0 0 10px var(--neon-g3h) !important; transform: scale(1.01) !important; } .cta-neon--gold { --neon: #C8A84B; --neon-g1: rgba(200, 168, 75, .3); --neon-g2: rgba(200, 168, 75, .16); --neon-g3: rgba(200, 168, 75, .1); --neon-g1h: rgba(223, 192, 110, .45); --neon-g2h: rgba(223, 192, 110, .28); --neon-g3h: rgba(223, 192, 110, .16); } .cta-neon--purple { --neon: #7c3aed; --neon-g1: rgba(124, 58, 237, .35); --neon-g2: rgba(124, 58, 237, .2); --neon-g3: rgba(124, 58, 237, .12); --neon-g1h: rgba(168, 85, 247, .5); --neon-g2h: rgba(168, 85, 247, .32); --neon-g3h: rgba(168, 85, 247, .18); } .cta-neon > * { position: relative !important; z-index: 2 !important; } /* Left badge: diameter = the button's exact rendered height (padding- box, i.e. the full visible pill height minus only the thin border stroke), flush against the left wall. Computed live by script.js from the LABEL's own height + the button's static CSS padding — never from the button's own offsetHeight, which would be circular (see the long comment in script.js: an earlier version measured offsetHeight directly and produced a runaway badge that grew to cover most of the page). max-width/max-height below are a hard safety ceiling — comfortably above every real button on this site, so even if the computed value were ever wrong, the badge still cannot balloon past a sane size. The em-based values are only the fallback for the instant before JS runs on load. */ .cta-neon .cta-neon__badge, .cta-neon .btn-play__ring { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; flex: 0 0 auto !important; width: var(--badge-d, 2.2em) !important; height: var(--badge-d, 2.2em) !important; min-width: 26px !important; min-height: 26px !important; max-width: 64px !important; max-height: 64px !important; margin: var(--badge-my, 0) .65em var(--badge-my, 0) var(--badge-ml, -.3em) !important; border-radius: 50% !important; background: var(--neon) !important; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--neon) 65%, #fff 35%), var(--neon) 72%) !important; box-shadow: 0 0 8px var(--neon-g1h) !important; } .cta-neon .cta-neon__badge svg, .cta-neon .btn-play__ring svg { width: 46% !important; height: 56% !important; object-fit: contain !important; fill: #fff !important; stroke: none !important; } .cta-neon .cta-neon__badge img, .cta-neon .btn-play__ring img { width: 58% !important; height: 58% !important; object-fit: contain !important; } .cta-neon .cta-neon__label { white-space: nowrap !important; } /* Beam overlay: sized/positioned to the button in JS (script.js). The rect's stroke covers the button's full perimeter (no dasharray gap — previously it was a short comet). Its color is a repeating gradient built and tinted in JS from THIS button's own --neon (gold or purple) — not white — with exactly 3 bright "shine" peaks evenly spaced around the loop (period = perimeter/3, not a dense sea-wave of many small ripples), continuously traveling together via a native SVG animation. Glow is tinted to --neon too. */ .cta-neon__beam { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; pointer-events: none !important; z-index: 1 !important; } .cta-neon__beam-rect { fill: none !important; stroke-linecap: butt !important; opacity: 0 !important; filter: drop-shadow(0 0 4px var(--neon)) !important; transition: opacity .3s ease !important; } .cta-neon:hover .cta-neon__beam-rect, .cta-neon:focus-visible .cta-neon__beam-rect { opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .cta-neon:hover, .cta-neon:focus-visible { transform: none !important; } .cta-neon:hover .cta-neon__beam-rect, .cta-neon:focus-visible .cta-neon__beam-rect { opacity: 0 !important; } } /* ============================================================ CTA HARDENING — extra-specificity reinforcement for the 5 buttons that have many separate historical rules targeting their own class name directly, scattered across this file from past editing passes (.nav__cta: 12 rules, .nav__mobile-cta, .btn- outline-white: 11, .btn-outline-gold: multiple, .cal__cta: 19). .btn-play and .cta-warm__btn already render correctly with the generic .cta-neon rules above and are not repeated here. Every selector below is doubled (e.g. .btn-outline-white.cta-neon) so its specificity is strictly higher than a lone rule anywhere else in the file — this wins regardless of what else is declared for these specific classes, past or future. .nav__cta / .nav__mobile-cta have been removed from this shared group: the nav CTA is now owned exclusively by nav.css with its own fixed, non-traveling badge, so it no longer needs or wants anything from this system. */ .btn-outline-white.cta-neon, .btn-outline-gold.cta-neon, .cal__cta.cta-neon { position: relative !important; display: inline-flex !important; align-items: center !important; border-radius: 999px !important; background: #0a0612 !important; border: 1.5px solid var(--neon) !important; color: #fff !important; overflow: visible !important; isolation: isolate !important; box-shadow: 0 0 8px var(--neon-g1), 0 0 18px var(--neon-g2), inset 0 0 8px var(--neon-g3) !important; transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease !important; } .btn-outline-white.cta-neon:hover, .btn-outline-gold.cta-neon:hover, .cal__cta.cta-neon:hover, .btn-outline-white.cta-neon:focus-visible, .btn-outline-gold.cta-neon:focus-visible, .cal__cta.cta-neon:focus-visible { box-shadow: 0 0 12px var(--neon-g1h), 0 0 26px var(--neon-g2h), inset 0 0 10px var(--neon-g3h) !important; transform: scale(1.01) !important; } .btn-outline-white.cta-neon > *, .btn-outline-gold.cta-neon > *, .cal__cta.cta-neon > * { position: relative !important; z-index: 2 !important; } .btn-outline-white.cta-neon .cta-neon__badge, .btn-outline-gold.cta-neon .cta-neon__badge, .cal__cta.cta-neon .cta-neon__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; flex: 0 0 auto !important; width: var(--badge-d, 2.2em) !important; height: var(--badge-d, 2.2em) !important; min-width: 26px !important; min-height: 26px !important; max-width: 64px !important; max-height: 64px !important; margin: var(--badge-my, 0) .65em var(--badge-my, 0) var(--badge-ml, -.3em) !important; border-radius: 50% !important; background: var(--neon) !important; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--neon) 65%, #fff 35%), var(--neon) 72%) !important; box-shadow: 0 0 8px var(--neon-g1h) !important; } .btn-outline-white.cta-neon .cta-neon__badge img, .btn-outline-gold.cta-neon .cta-neon__badge img, .cal__cta.cta-neon .cta-neon__badge img { width: 58% !important; height: 58% !important; object-fit: contain !important; } .btn-outline-white.cta-neon .cta-neon__label, .btn-outline-gold.cta-neon .cta-neon__label, .cal__cta.cta-neon .cta-neon__label { white-space: nowrap !important; } .btn-outline-white.cta-neon .cta-neon__beam, .btn-outline-gold.cta-neon .cta-neon__beam, .cal__cta.cta-neon .cta-neon__beam { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; pointer-events: none !important; z-index: 1 !important; } /* Root cause of the visible square in "Learn Our Approach"'s corner: an old rule scoped to .sec-approach forces ANY svg inside .btn-outline-gold.section-cta down to a fixed 16x16px — `.sec-approach .btn-outline-gold.section-cta svg { width:16px; height:16px !important }` (line ~4039). That selector has higher specificity (3 classes + 1 type) than the hardening rule just above (3 classes + 0 type), so it was winning and shrinking the beam SVG into a tiny square pinned in a corner by the position:absolute + inset:0 + fixed-16px combination. This selector matches that exact scoping with one more class, so it wins outright. */ .sec-approach .btn-outline-gold.section-cta.cta-neon .cta-neon__beam { width: 100% !important; height: 100% !important; flex: none !important; } .btn-outline-white.cta-neon .cta-neon__beam-rect, .btn-outline-gold.cta-neon .cta-neon__beam-rect, .cal__cta.cta-neon .cta-neon__beam-rect { fill: none !important; stroke-linecap: butt !important; opacity: 0 !important; filter: drop-shadow(0 0 4px var(--neon)) !important; transition: opacity .3s ease !important; } .btn-outline-white.cta-neon:hover .cta-neon__beam-rect, .btn-outline-gold.cta-neon:hover .cta-neon__beam-rect, .cal__cta.cta-neon:hover .cta-neon__beam-rect, .btn-outline-white.cta-neon:focus-visible .cta-neon__beam-rect, .btn-outline-gold.cta-neon:focus-visible .cta-neon__beam-rect, .cal__cta.cta-neon:focus-visible .cta-neon__beam-rect { opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .btn-outline-white.cta-neon:hover, .btn-outline-gold.cta-neon:hover, .cal__cta.cta-neon:hover, .btn-outline-white.cta-neon:focus-visible, .btn-outline-gold.cta-neon:focus-visible, .cal__cta.cta-neon:focus-visible { transform: none !important; } .btn-outline-white.cta-neon:hover .cta-neon__beam-rect, .btn-outline-gold.cta-neon:hover .cta-neon__beam-rect, .cal__cta.cta-neon:hover .cta-neon__beam-rect, .btn-outline-white.cta-neon:focus-visible .cta-neon__beam-rect, .btn-outline-gold.cta-neon:focus-visible .cta-neon__beam-rect, .cal__cta.cta-neon:focus-visible .cta-neon__beam-rect { opacity: 0 !important; } } /* ============================================================ #js-book (Book Session / cal__cta) — MAXIMUM-SPECIFICITY fix. An ID selector beats every class-based rule in this file outright, no ambiguity, so this is the definitive word on this one button regardless of anything else declared for .cal__cta anywhere (there are ~19 separate historical rules touching it). Also: this is the ONLY CTA sitting on a LIGHT background (.calendar-widget is cream/white — every other CTA sits on a dark section). The same soft colored glow that reads as "neon" against black looks like a hazy smudge against white, which is almost certainly the "fog" being described — so the glow here is tightened (smaller blur radius, lower opacity, no outer bloom) instead of the wider ambient glow used elsewhere. */ #js-book.cta-neon { position: relative !important; display: inline-flex !important; align-items: center !important; /* justify-content:center here now only affects the LABEL (the badge is pulled out of flex flow below, so it doesn't participate) — this is what actually centers the button's text while the badge is independently pinned to the left. */ justify-content: center !important; border-radius: 999px !important; background: #fff !important; border: 1.5px solid var(--neon) !important; color: #0a0612 !important; overflow: visible !important; isolation: isolate !important; box-shadow: 0 0 5px var(--neon-g1), inset 0 0 5px var(--neon-g3) !important; transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease !important; } #js-book.cta-neon:hover, #js-book.cta-neon:focus-visible { box-shadow: 0 0 8px var(--neon-g1h), inset 0 0 6px var(--neon-g3h) !important; transform: scale(1.01) !important; } #js-book.cta-neon > * { position: relative !important; z-index: 2 !important; } /* Per request: the badge must be pinned flush to the left wall while the label text stays centered in the full pill — those are two different alignment rules for two different elements, which plain flex justify-content can't express at once (it only controls the group as a whole). Fix: take the badge OUT of the flex flow entirely (position:absolute, vertically centered) so it's independent of alignment, pinned via `left` directly against the border's inner edge. With the badge no longer a flex participant, the button's justify-content:center (above) now centers the LABEL ALONE within the full button width — exactly the requested behavior. */ #js-book.cta-neon .cta-neon__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; /* For an absolutely positioned child, the containing block is the PADDING box of the nearest positioned ancestor (per spec) — NOT the border box. That padding box already starts ~1.5px in from the true edge (this button's own border-width), so `left:0` alone still leaves a hair of a gap, and the previous `left:2px` added an extra 2px on top of that (~3.5px total) — visible as the persisting gap. Shifting left by the border-width itself lands the circle exactly on the border line, touching it with no gap at all. */ left: -1.5px !important; top: 50% !important; transform: translateY(-50%) !important; flex: none !important; width: var(--badge-d, 2.2em) !important; height: var(--badge-d, 2.2em) !important; min-width: 26px !important; min-height: 26px !important; max-width: 64px !important; max-height: 64px !important; margin: 0 !important; border-radius: 50% !important; background: var(--neon) !important; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--neon) 65%, #fff 35%), var(--neon) 72%) !important; box-shadow: 0 0 6px var(--neon-g1h) !important; } #js-book.cta-neon .cta-neon__badge img { width: 58% !important; height: 58% !important; object-fit: contain !important; } #js-book.cta-neon .cta-neon__label { white-space: nowrap !important; } #js-book.cta-neon .cta-neon__beam { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; pointer-events: none !important; z-index: 1 !important; } #js-book.cta-neon .cta-neon__beam-rect { fill: none !important; stroke-linecap: butt !important; opacity: 0 !important; filter: drop-shadow(0 0 2px var(--neon)) !important; transition: opacity .3s ease !important; } #js-book.cta-neon:hover .cta-neon__beam-rect, #js-book.cta-neon:focus-visible .cta-neon__beam-rect { opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { #js-book.cta-neon:hover, #js-book.cta-neon:focus-visible { transform: none !important; } #js-book.cta-neon:hover .cta-neon__beam-rect, #js-book.cta-neon:focus-visible .cta-neon__beam-rect { opacity: 0 !important; } } /* ============================================================ FINAL "LET'S CONNECT" (cta-warm__btn) — same hardening pattern. This one was assumed fine earlier (it renders reasonably on the surface), but it was never actually added to the reinforcement block, and it turns out to have the exact same two problems as the other buttons did: 1) `.sec-cta .cta-warm__btn { justify-content: space-between !important }` — this button has a forced min-width (220- 250px, wider than its natural content), so space-between shoves the badge and label apart with a large gap, unlike every other CTA's tight, consistent spacing. 2) `.sec-cta .cta-warm__btn svg { width:18px; height:18px !important }` (2 classes + svg tag) has higher specificity than the generic .cta-neon__beam rule (1 class), so its beam SVG was ALSO being shrunk to an 18x18 square — the same bug already fixed for "Learn Our Approach". Background stays dark (unlike Book Session) since this button sits on the warm gold gradient band, which was already working visually — only alignment + beam sizing needed correcting. */ .sec-cta .cta-warm__btn.cta-neon, .cta-warm__btn.cta-neon { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; border-radius: 999px !important; background: #0a0612 !important; border: 1.5px solid var(--neon) !important; color: #fff !important; overflow: visible !important; isolation: isolate !important; box-shadow: 0 0 8px var(--neon-g1), 0 0 18px var(--neon-g2), inset 0 0 8px var(--neon-g3) !important; transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease !important; } .sec-cta .cta-warm__btn.cta-neon:hover, .cta-warm__btn.cta-neon:hover, .sec-cta .cta-warm__btn.cta-neon:focus-visible, .cta-warm__btn.cta-neon:focus-visible { box-shadow: 0 0 12px var(--neon-g1h), 0 0 26px var(--neon-g2h), inset 0 0 10px var(--neon-g3h) !important; transform: scale(1.01) !important; } .sec-cta .cta-warm__btn.cta-neon > *, .cta-warm__btn.cta-neon > * { position: relative !important; z-index: 2 !important; } .sec-cta .cta-warm__btn.cta-neon .cta-neon__badge, .cta-warm__btn.cta-neon .cta-neon__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; flex: 0 0 auto !important; width: var(--badge-d, 2.2em) !important; height: var(--badge-d, 2.2em) !important; min-width: 26px !important; min-height: 26px !important; max-width: 64px !important; max-height: 64px !important; margin: var(--badge-my, 0) .65em var(--badge-my, 0) var(--badge-ml, -.3em) !important; border-radius: 50% !important; background: var(--neon) !important; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--neon) 65%, #fff 35%), var(--neon) 72%) !important; box-shadow: 0 0 8px var(--neon-g1h) !important; } .sec-cta .cta-warm__btn.cta-neon .cta-neon__badge img, .cta-warm__btn.cta-neon .cta-neon__badge img { width: 58% !important; height: 58% !important; object-fit: contain !important; } .sec-cta .cta-warm__btn.cta-neon .cta-neon__label, .cta-warm__btn.cta-neon .cta-neon__label { white-space: nowrap !important; } .sec-cta .cta-warm__btn.cta-neon .cta-neon__beam, .cta-warm__btn.cta-neon .cta-neon__beam { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: visible !important; pointer-events: none !important; z-index: 1 !important; } .sec-cta .cta-warm__btn.cta-neon .cta-neon__beam-rect, .cta-warm__btn.cta-neon .cta-neon__beam-rect { fill: none !important; stroke-linecap: butt !important; opacity: 0 !important; filter: drop-shadow(0 0 4px var(--neon)) !important; transition: opacity .3s ease !important; } .sec-cta .cta-warm__btn.cta-neon:hover .cta-neon__beam-rect, .cta-warm__btn.cta-neon:hover .cta-neon__beam-rect, .sec-cta .cta-warm__btn.cta-neon:focus-visible .cta-neon__beam-rect, .cta-warm__btn.cta-neon:focus-visible .cta-neon__beam-rect { opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .sec-cta .cta-warm__btn.cta-neon:hover, .cta-warm__btn.cta-neon:hover, .sec-cta .cta-warm__btn.cta-neon:focus-visible, .cta-warm__btn.cta-neon:focus-visible { transform: none !important; } .sec-cta .cta-warm__btn.cta-neon:hover .cta-neon__beam-rect, .cta-warm__btn.cta-neon:hover .cta-neon__beam-rect, .sec-cta .cta-warm__btn.cta-neon:focus-visible .cta-neon__beam-rect, .cta-warm__btn.cta-neon:focus-visible .cta-neon__beam-rect { opacity: 0 !important; } } /* FINAL CTA TYPOGRAPHY — regular weight for every CTA label. Historical per-button rules across this file set font-weight to 700/800/850/900 for nav__cta, nav__mobile-cta, btn-outline-white, btn-outline-gold, cal__cta, cta-warm__btn and btn-play at various breakpoints. .cta-neon is present on all 7 buttons, so this single rule reaches every one of them. The class is repeated to push specificity above any existing selector in this file (max found was 4 classes), and this block is last in source order so it also wins any specificity tie. */ .cta-neon.cta-neon.cta-neon.cta-neon, .cta-neon.cta-neon.cta-neon.cta-neon .cta-neon__label { font-weight: 400 !important; } /* ============================================================ FINAL COACHING SECTION REDESIGN — light "book a session" layout matching the reference mockup (soft gradient wash, left content stack: intro + meta row + focus cards + session timeline, right column: calendar + Book Session CTA (unchanged neon style, kept for site-wide consistency) + a new "this session is for you if" checklist card). #coaching (ID selector) is used throughout so this block beats every historical .sec-coaching rule anywhere else in this file, regardless of their specificity or source order. */ #coaching { position: relative !important; height: auto !important; min-height: 0 !important; padding-top: clamp(32px, 4.5vw, 56px) !important; padding-right: clamp(20px, 4vw, 56px) !important; padding-bottom: clamp(16px, 2.2vw, 26px) !important; padding-left: clamp(20px, 4vw, 56px) !important; background: linear-gradient(180deg, #07060D 0%, #0c0a17 50%, #07060D 100%) !important; border-radius: 28px 28px 0 0 !important; margin: clamp(24px, 4vw, 48px) 0 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; isolation: isolate !important; } /* FINAL — match the services section's left-to-right color wash so the booking section's background reads as the same family instead of a plain flat dark fade. Same masked ::before technique: color only appears in the middle band, fading out near the top/bottom edges so it doesn't create a seam against neighboring sections. */ #coaching::before { content: '' !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; border-radius: inherit !important; background: linear-gradient(90deg, rgba(79, 125, 255, .18) 0%, rgba(124, 58, 237, .18) 50%, rgba(219, 39, 119, .15) 100%) !important; -webkit-mask-image: linear-gradient(180deg, transparent 0px, #000 2px, #000 100%) !important; mask-image: linear-gradient(180deg, transparent 0px, #000 2px, #000 100%) !important; pointer-events: none !important; } #coaching .coaching-layout { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr) !important; gap: clamp(28px, 4vw, 56px) !important; height: auto !important; align-items: stretch !important; } #coaching .coaching-main { display: flex !important; flex-direction: column !important; gap: 26px !important; } #coaching .coaching-intro { display: block !important; grid-column: auto !important; } #coaching .coaching__label { display: block !important; grid-column: auto !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #d8a8ff !important; margin: 0 0 12px !important; } #coaching .coaching__h2 { display: block !important; grid-column: auto !important; font-family: 'Manrope', Arial, sans-serif !important; font-size: clamp(24px, 2.8vw, 36px) !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: -0.5px !important; color: #fff !important; margin: 0 0 12px !important; max-width: 560px !important; } #coaching .coaching__desc { display: block !important; grid-column: auto !important; font-size: 14px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .68) !important; max-width: 480px !important; margin: 0 !important; } #coaching .coaching__meta { display: flex !important; flex-wrap: wrap !important; gap: 10px 22px !important; list-style: none !important; margin: 4px 0 0 !important; padding: 0 !important; } #coaching .coaching__meta li { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 11.5px !important; font-weight: 600 !important; color: rgba(255, 255, 255, .72) !important; } #coaching .coaching__meta svg { width: 16px !important; height: 16px !important; color: #a78bfa !important; flex: 0 0 16px !important; } #coaching .coaching__section-label { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: #fff !important; margin: 6px 0 2px !important; } #coaching .audience-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-column: auto !important; grid-row: auto !important; gap: 18px !important; list-style: none !important; margin: 10px 0 0 !important; padding: 0 !important; } #coaching .audience-cards > li { display: block !important; } #coaching .aud-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; height: auto !important; min-height: 0 !important; background: #03041D !important; border: 1px solid rgba(157, 129, 255, .28) !important; border-radius: 14px !important; padding: 14px 14px 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .3) !important; cursor: pointer !important; transition: border-color .2s, box-shadow .2s, transform .2s !important; } #coaching .aud-card:hover, #coaching .aud-card:focus-visible { border-color: rgba(157, 129, 255, .5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 40px rgba(0, 0, 0, .4) !important; transform: translateY(-2px) !important; } #coaching .aud-card__ico { width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(109, 40, 217, .09) !important; color: #6d28d9 !important; } #coaching .aud-card__ico svg { width: 18px !important; height: 18px !important; } #coaching .aud-card__name { font-size: 13.5px !important; font-weight: 700 !important; color: #fff !important; } #coaching .aud-card__desc { font-size: 11.5px !important; line-height: 1.55 !important; color: rgba(255, 255, 255, .66) !important; flex: 1 !important; } #coaching .aud-card__radio { width: 28px !important; height: 28px !important; margin: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, .22) !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; color: rgba(255, 255, 255, .75) !important; transition: background .2s, border-color .2s, color .2s !important; } #coaching .aud-card__radio svg { width: 13px !important; height: 13px !important; } #coaching .aud-card[aria-checked="true"] { border-color: #8B5CF6 !important; box-shadow: 0 8px 22px rgba(139, 92, 246, .3) !important; } #coaching .aud-card[aria-checked="true"] .aud-card__radio { background: #7C3AED !important; border-color: #7C3AED !important; color: #fff !important; } #coaching .coaching__timeline { display: flex !important; list-style: none !important; margin: 10px 0 0 !important; padding: 0 !important; position: relative !important; gap: 4px !important; } #coaching .coaching__timeline::before { content: '' !important; position: absolute !important; top: 23px !important; left: 36px !important; right: 36px !important; height: 0 !important; border-top: 1.5px dotted rgba(255, 255, 255, .16) !important; } #coaching .coaching__timeline li { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 4px !important; position: relative !important; padding: 0 6px !important; } #coaching .ctime__ico { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #fff !important; border: 1px solid rgba(20, 12, 40, .12) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #6d28d9 !important; box-shadow: 0 3px 10px rgba(30, 12, 60, .06) !important; } #coaching .ctime__ico svg { width: 17px !important; height: 17px !important; } #coaching .ctime__num { font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 1px !important; color: rgba(255, 255, 255, .4) !important; margin: 4px 0 0 !important; } #coaching .ctime__name { font-size: 11.5px !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important; } #coaching .ctime__sub { font-size: 9.5px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, .6) !important; margin: 0 !important; max-width: 108px !important; } #coaching .coaching-side { display: flex !important; flex-direction: column !important; gap: 18px !important; } /* Frosted glass, matching the site's established glass-card recipe (rgba(255,255,255,.06) + purple border) instead of a flat solid fill, per direct request. */ #coaching .calendar-widget { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(157, 129, 255, .28) !important; border-left: 1px solid rgba(157, 129, 255, .28) !important; border-radius: 18px !important; padding: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 44px rgba(0, 0, 0, .35) !important; } /* .cal__body is a nested wrapper inside .calendar-widget that still carried its own old cream/white card background+border (from a much earlier light-theme pass, .sec-coaching .cal__body at ~line 5383) -- that's what was rendering as a white box with the day numbers' white text invisible on top of it. Neutralize it so the glass background above shows through instead of a second, mismatched box nested inside the first. */ #coaching .cal__body { background: transparent !important; border: 0 !important; box-shadow: none !important; } #coaching .cal__header { margin-bottom: 14px !important; } #coaching .cal__title { font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; color: #fff !important; margin: 0 !important; } #coaching .cal__nav { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; } #coaching .cal__month { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; } #coaching .cal__btn { width: 26px !important; height: 26px !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .04) !important; color: #fff !important; } #coaching .cal__btn:hover { background: rgba(124, 58, 237, .25) !important; } #coaching .cal__grid { gap: 2px !important; } #coaching .cal__day-name { font-size: 12px !important; font-weight: 600 !important; color: rgba(255, 255, 255, .4) !important; padding-bottom: 6px !important; } #coaching .cal__date { font-size: 15px !important; font-weight: 500 !important; color: rgba(255, 255, 255, .82) !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } #coaching .cal__date[aria-disabled="true"], #coaching .cal__date.cal__date--disabled { opacity: .32 !important; pointer-events: none !important; } #coaching .cal__date:hover { background: rgba(124, 58, 237, .28) !important; } #coaching .cal__date--today { background: #7C3AED !important; color: #fff !important; font-weight: 700 !important; } #coaching .cal__date--today:hover { background: #6d28d9 !important; } #coaching .cal__footer { margin-top: 16px !important; padding-top: 16px !important; border-top: 1px solid rgba(255, 255, 255, .1) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; } #coaching .cal__cta { width: 100% !important; } #coaching .cal__note { font-size: 13px !important; color: rgba(255, 255, 255, .5) !important; margin: 0 !important; text-align: center !important; } #coaching .coaching__checklist { display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 1 !important; background: linear-gradient(160deg, rgba(124, 58, 237, .16), rgba(219, 39, 119, .1)) !important; border: 1px solid rgba(157, 129, 255, .28) !important; border-radius: 18px !important; padding: 24px 26px !important; } #coaching .coaching__checklist-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: #d8a8ff !important; margin: 0 0 16px !important; } #coaching .coaching__checklist ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } #coaching .coaching__checklist li { display: flex !important; align-items: flex-start !important; gap: 11px !important; font-size: 14.5px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, .8) !important; } #coaching .coaching__checklist svg { width: 19px !important; height: 19px !important; flex: 0 0 19px !important; margin-top: 1px !important; color: #a78bfa !important; } @media (max-width: 960px) { #coaching .coaching-layout { grid-template-columns: 1fr !important; } #coaching .audience-cards { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 700px) { #coaching { border-radius: 20px !important; padding: 28px 18px !important; } #coaching .audience-cards { grid-template-columns: 1fr !important; } #coaching .coaching__timeline { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; } #coaching .coaching__timeline::before { display: none !important; } #coaching .coaching__timeline li { flex-direction: row !important; text-align: left !important; gap: 12px !important; width: 100% !important; } #coaching .ctime__num { display: none !important; } #coaching .ctime__sub { max-width: none !important; } } /* FINAL BOOK SESSION CTA — white matte pill with black text, per direct request (the surrounding calendar card is now dark glass, so a solid black button on it read as almost invisible; flipping to a light pill gives it real contrast as the primary action). */ #js-book.cta-neon { background: rgba(245, 244, 248, .94) !important; border: 1.5px solid rgba(255, 255, 255, .9) !important; color: #0f0e18 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .3) !important; padding: 18px 26px !important; min-height: 58px !important; } #js-book.cta-neon .cta-neon__label { color: #0f0e18 !important; font-size: 13px !important; letter-spacing: 2px !important; } #js-book.cta-neon:hover, #js-book.cta-neon:focus-visible { background: #fff !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .35) !important; transform: scale(1.025) !important; } #js-book.cta-neon .cta-neon__beam, #js-book.cta-neon:hover .cta-neon__beam-rect, #js-book.cta-neon:focus-visible .cta-neon__beam-rect { opacity: 0 !important; } /* FINAL FOCUS-ON CARD ICONS — user-supplied artwork (target rings / starburst / magnifying glass) replacing the inline SVG icons for the 3 "What We'll Focus On" cards. Used as-is, not redrawn. */ #coaching .aud-card__ico { background: transparent !important; padding: 0 !important; } #coaching .aud-card__ico svg { display: none !important; } #coaching .coaching__word { background: linear-gradient(90deg, #6d28d9, #db2777) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } #coaching .aud-card__ico { width: 60px !important; height: 60px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } #coaching .audience-cards > li:nth-child(1) .aud-card__ico { background-image: url('assets/booking1-01.png') !important; } #coaching .audience-cards > li:nth-child(2) .aud-card__ico { background-image: url('assets/booking1-02.png') !important; } #coaching .audience-cards > li:nth-child(3) .aud-card__ico { background-image: url('assets/booking1-03.png') !important; } /* FINAL v4 — "HOW THE SESSION WORKS" TIMELINE ICONS. The uploaded artwork (booking 3-01..05.png) was a RASTER export (1467x1469px) despite looking like clean vector line-art — a raster file is always bound to its pixel grid, so once the browser scales it down into a ~46-54px badge it can look visibly softer than true vector line-art, no matter how high the source resolution is. Traced each PNG into a true vector .svg (assets/booking3-0N.svg) preserving the exact same artwork/colors, so the browser now renders crisp vector edges at any display size instead of downsampling a bitmap. */ #coaching .ctime__ico { width: 46px !important; height: 46px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #coaching .ctime__ico svg { display: none !important; } /* The icon artwork moved from .ctime__ico's own background to a ::after pseudo-element. Reason: a box's own background always paints FIRST within its stacking context, before any descendant — including a negative z-index pseudo-element. The frosted-glass layer added below is .ctime__ico::before at z-index:-1, which is meant to sit behind the icon, but with the icon as .ctime__ico's own background it was actually behind the icon already at the box level, so the glass pseudo (a descendant, painted after the box's own background regardless of its negative z-index) ended up rendering ON TOP of the icon artwork instead — the reported "glass circle needs to go behind the icons" bug. Moving the artwork onto ::after (a real descendant, z-index:1) puts it in its own paint step after ::before, so the stacking order becomes correct: glass (-1) behind, icon artwork (1) in front. */ #coaching .ctime__ico::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; } #coaching .coaching__timeline li:nth-child(1) .ctime__ico::after { background-image: url('assets/booking3-01-fix.png?v=1') !important; } #coaching .coaching__timeline li:nth-child(2) .ctime__ico::after { background-image: url('assets/booking3-02.svg') !important; } #coaching .coaching__timeline li:nth-child(3) .ctime__ico::after { background-image: url('assets/booking3-03.svg') !important; } #coaching .coaching__timeline li:nth-child(4) .ctime__ico::after { background-image: url('assets/booking3-04-fix.png?v=1') !important; } #coaching .coaching__timeline li:nth-child(5) .ctime__ico::after { background-image: url('assets/booking3-05.svg') !important; } /* ============================================================ FINAL CTA COLOR REFRESH — retiring the flat gold/purple neon colors. The site already has an established gradient identity used on bold accent text (hero word, services heading accent): --g-orange #F97316 -> --g-pink #DB2777 -> --g-purple #7C3AED. Applying that same combination here instead of inventing a new palette. Covers all CTAs except Book Session, which stays a plain black pill per an earlier explicit request. */ .cta-neon--gold, .cta-neon--purple { --neon: #DB2777 !important; --neon-g1: rgba(219, 39, 119, .3) !important; --neon-g2: rgba(219, 39, 119, .16) !important; --neon-g3: rgba(219, 39, 119, .1) !important; --neon-g1h: rgba(236, 72, 153, .45) !important; --neon-g2h: rgba(236, 72, 153, .28) !important; --neon-g3h: rgba(236, 72, 153, .16) !important; } .cta-neon, .btn-outline-white.cta-neon, .btn-outline-gold.cta-neon, .cal__cta.cta-neon, .cta-warm__btn.cta-neon { background: linear-gradient(#0a0612, #0a0612) padding-box, linear-gradient(90deg, #F97316, #DB2777, #7C3AED) border-box !important; border: 1.5px solid transparent !important; } .cta-neon .cta-neon__badge, .cta-neon .btn-play__ring, .btn-outline-white.cta-neon .cta-neon__badge, .btn-outline-gold.cta-neon .cta-neon__badge, .cal__cta.cta-neon .cta-neon__badge, .cta-warm__btn.cta-neon .cta-neon__badge { background: radial-gradient(circle at 32% 28%, #fdba74, #F97316 24%, #DB2777 60%, #7C3AED 100%) !important; } /* FINAL BOOK SESSION CTA — remove the palm badge circle entirely, per direct request; the button is now a plain black pill with just its label. */ #js-book.cta-neon .cta-neon__badge { display: none !important; } /* FINAL "EXPLORE OUR SERVICES" CTA — reversed treatment, per direct request: gradient FILL instead of gradient stroke/border, and a plain black circle badge instead of the gradient-filled badge used on the other CTAs. */ .btn-outline-white.cta-neon { background: linear-gradient(90deg, #F97316, #DB2777, #7C3AED) !important; border: 1.5px solid transparent !important; } .btn-outline-white.cta-neon .cta-neon__label { color: #fff !important; } .btn-outline-white.cta-neon .cta-neon__badge { background: rgba(255, 255, 255, .4) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } /* Paint-wipe reveal: as the badge travels left -> right on hover, a wash of its own color (white, frosted, same tone as the badge) sweeps across the button behind it — like the circle is a brush dragging a new color across the pill. Synced to the exact same duration/easing as the badge's own "left" transition so they visibly move together. */ /* Rebuilt to animate its own width (anchored to the left edge) instead of an animated clip-path. A plain box resize always keeps correctly rounded corners for free (border-radius on a normal box is never "reinterpolated" the way an animated clip-path shape is), so this can never show a jagged/square corner or a ghosting artifact mid-travel the way the clip-path version could. */ .btn-outline-white.cta-neon::before { content: '' !important; position: absolute !important; top: -1.5px !important; bottom: -1.5px !important; left: -1.5px !important; width: 0 !important; border-radius: 999px !important; background: #0a0612 !important; transition: width .45s cubic-bezier(.4, 0, .2, 1) !important; z-index: 1 !important; pointer-events: none !important; } .btn-outline-white.cta-neon:hover::before, .btn-outline-white.cta-neon:focus-visible::before { width: calc(100% + 3px) !important; } /* Hover: the black badge travels across and becomes flush with the RIGHT wall instead of sitting still on the left. Taking it out of flex flow (same technique already used for Book Session) so it can move independently of the label; padding-left reserves the same visual gap the badge occupied in flow, so the label doesn't jump when the badge is pulled out of flex. The -1.5px / +1.5px offsets cancel the border-width so the badge sits exactly on the pill's edge on both sides (containing block is the padding box, which is inset from the true border-box edge by the border width). */ .btn-outline-white.cta-neon { padding-left: calc(var(--badge-d, 2.2em) + 14px) !important; } .btn-outline-white.cta-neon .cta-neon__badge { position: absolute !important; top: 50% !important; left: -1.5px !important; transform: translateY(-50%) !important; margin: 0 !important; flex: none !important; transition: left .45s cubic-bezier(.4, 0, .2, 1) !important; } .btn-outline-white.cta-neon:hover .cta-neon__badge, .btn-outline-white.cta-neon:focus-visible .cta-neon__badge { left: calc(100% + 1.5px - var(--badge-d, 2.2em)) !important; } /* FINAL "HOW WE WORK" CTA — same badge-travel + paint-wipe mechanism as Explore Our Services (white, 40% opacity, frosted badge sliding left -> right on hover). The one difference: this button's fill starts black at rest, so the wipe it drags reveals the orange- pink-purple gradient instead of white — the CTA itself changes color from black to gradient as the badge passes over it. */ .btn-play.cta-neon { padding-left: calc(var(--badge-d, 2.2em) + 14px) !important; } .btn-play.cta-neon .cta-neon__badge { position: absolute !important; top: 50% !important; left: -1.5px !important; transform: translateY(-50%) !important; margin: 0 !important; flex: none !important; background: radial-gradient(circle at 32% 28%, #fdba74, #F97316 24%, #DB2777 60%, #7C3AED 100%) !important; transition: left .45s cubic-bezier(.4, 0, .2, 1) !important; } .btn-play.cta-neon:hover .cta-neon__badge, .btn-play.cta-neon:focus-visible .cta-neon__badge { left: calc(100% + 1.5px - var(--badge-d, 2.2em)) !important; } /* Rebuilt to animate width (left-anchored) instead of clip-path — see the matching note on .btn-outline-white.cta-neon::before just above for why: a resized plain box keeps correctly rounded corners automatically, with no risk of the jagged-corner/ghosting artifacts an animated clip-path shape could show mid-travel. */ .btn-play.cta-neon::before { content: '' !important; position: absolute !important; top: -1.5px !important; bottom: -1.5px !important; left: -1.5px !important; width: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #F97316, #DB2777, #7C3AED) !important; transition: width .45s cubic-bezier(.4, 0, .2, 1) !important; z-index: 1 !important; pointer-events: none !important; } .btn-play.cta-neon:hover::before, .btn-play.cta-neon:focus-visible::before { width: calc(100% + 3px) !important; } /* FINAL — enlarge both traveling-badge CTAs (Explore Our Services, How We Work) so the badge has room to slide across without covering the label text; and fade the label to black on hover, in step with the badge/wipe transition, so the text stays readable whatever is now behind it (white wipe or gradient wipe). */ .btn-outline-white.cta-neon, .btn-play.cta-neon { padding-top: 15px !important; padding-bottom: 15px !important; padding-right: 56px !important; } .btn-outline-white.cta-neon .cta-neon__label, .btn-play.cta-neon .cta-neon__label { transition: color .45s cubic-bezier(.4, 0, .2, 1) !important; } /* The top nav "Let's Connect" (desktop + mobile menu) padding is no longer set here — nav.css owns the CTA's full box model as a fixed, non-animated pill. See nav.css. */ .btn-play.cta-neon:hover .cta-neon__label, .btn-play.cta-neon:focus-visible .cta-neon__label { color: #0a0612 !important; font-weight: 700 !important; } .btn-outline-white.cta-neon:hover .cta-neon__label, .btn-outline-white.cta-neon:focus-visible .cta-neon__label { color: #fff !important; font-weight: 700 !important; } /* FINAL "LET'S CONNECT" (final section CTA) — reverted back to flat purple per direct request; this one button opts out of the orange-pink-purple gradient treatment applied to the rest. */ .cta-warm__btn.cta-neon { --neon: #7C3AED !important; --neon-g1: rgba(124, 58, 237, .35) !important; --neon-g2: rgba(124, 58, 237, .2) !important; --neon-g3: rgba(124, 58, 237, .12) !important; --neon-g1h: rgba(168, 85, 247, .5) !important; --neon-g2h: rgba(168, 85, 247, .32) !important; --neon-g3h: rgba(168, 85, 247, .18) !important; background: #0a0612 !important; border: 1.5px solid var(--neon) !important; } .cta-warm__btn.cta-neon .cta-neon__badge { background: var(--neon) !important; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--neon) 65%, #fff 35%), var(--neon) 72%) !important; } /* ============================================================ FINAL HERO VIDEO — square video (960x960) placed on the right side of the hero, on top of the existing hero background image (left untouched, per request). A left-edge gradient mask on the frame itself blends its edge into the hero's own dark vignette color (#02050d) so the transition from text-side to video feels continuous rather than a hard cut. Experimental first pass. */ .hero { position: relative !important; } .hero__video-frame { position: absolute !important; top: 0 !important; right: 0 !important; height: 100% !important; aspect-ratio: 1 / 1 !important; width: auto !important; overflow: hidden !important; z-index: 2 !important; } .hero__video-frame video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .hero__video-frame::before { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, #07060D 0%, rgba(7, 6, 13, .94) 8%, rgba(7, 6, 13, .82) 16%, rgba(7, 6, 13, .62) 26%, rgba(7, 6, 13, .42) 38%, rgba(7, 6, 13, .26) 50%, rgba(7, 6, 13, .14) 64%, rgba(7, 6, 13, .06) 78%, transparent 94%) !important; z-index: 1 !important; pointer-events: none !important; } @media (max-width: 900px) { /* Was position:static, pushing the video into normal flow BELOW the hero text with its own margin/height — on top of .hero's own solid #000 background (see the "remove the old hero photo" rule further down) that left a dead black gap under the video wherever .hero's padding/min-height ran taller than the text. Make the video a true full-bleed background behind the text instead, matching how it already works on desktop. */ .hero { min-height: 560px !important; height: auto !important; padding-top: 44px !important; padding-bottom: 40px !important; } .hero__video-frame { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0 !important; z-index: 0 !important; } .hero__video-frame::before { background: linear-gradient(180deg, rgba(7, 6, 13, .78) 0%, rgba(7, 6, 13, .5) 30%, rgba(7, 6, 13, .3) 55%, rgba(7, 6, 13, .5) 75%, rgba(7, 6, 13, .82) 100%) !important; } } /* FINAL — remove the old hero photo entirely now that the video covers that area. The .hero background is set via the `background` shorthand across ~8 different breakpoint rules throughout this file, each bundling its own gradient + the photo url(). Rather than edit all 8, overriding just the background-image longhand here drops the photo layer everywhere at once (a longhand set later always replaces the full value the shorthand assigned to it), leaving a clean dark backdrop with a soft purple glow. */ .hero { background-image: none !important; background-color: var(--bg-hero) !important; } /* FINAL — the "Let's Connect" CTA in the page-bottom section adopts the exact same mechanism as How We Work: black at rest, a gradient badge that travels left -> right on hover, and a gradient paint-wipe reveal. This also undoes the earlier flat-purple-only treatment given to the final section's Let's Connect, per this newer, broader consistency request. (The top-nav / mobile-nav Let's Connect CTAs are no longer styled here — that component now lives exclusively in nav.css, which owns its own static badge with no travel/wipe animation. See nav.css.) */ .cta-warm__btn.cta-neon { --neon: #DB2777 !important; --neon-g1: rgba(219, 39, 119, .3) !important; --neon-g2: rgba(219, 39, 119, .16) !important; --neon-g3: rgba(219, 39, 119, .1) !important; --neon-g1h: rgba(236, 72, 153, .45) !important; --neon-g2h: rgba(236, 72, 153, .28) !important; --neon-g3h: rgba(236, 72, 153, .16) !important; background: #0a0612 !important; border: 1.5px solid transparent !important; padding-left: calc(var(--badge-d, 2.2em) + 14px) !important; } .cta-warm__btn.cta-neon .cta-neon__badge { position: absolute !important; top: 50% !important; left: -1.5px !important; transform: translateY(-50%) !important; margin: 0 !important; flex: none !important; background: radial-gradient(circle at 32% 28%, #fdba74, #F97316 24%, #DB2777 60%, #7C3AED 100%) !important; transition: left .45s cubic-bezier(.4, 0, .2, 1) !important; } /* The badge-travel + gradient-wipe below is a :hover effect, but touch devices don't have a real "hover" — a tap fires :hover and then leaves the button stuck showing it (classic mobile Safari/ Chrome behavior) until the person taps elsewhere. That read as the button being broken/unresponsive on phones (badge stuck on the right, whole pill lit up, nothing seeming to happen on tap). Gating the animated part to "real hover" devices only (mouse, not touch) fixes this; :focus-visible is left ungated everywhere since it's keyboard-only and doesn't have this stuck-state problem. */ @media (hover: hover) and (pointer: fine) { .cta-warm__btn.cta-neon:hover .cta-neon__badge { left: calc(100% + 1.5px - var(--badge-d, 2.2em)) !important; } } .cta-warm__btn.cta-neon:focus-visible .cta-neon__badge { left: calc(100% + 1.5px - var(--badge-d, 2.2em)) !important; } /* Rebuilt to animate width (left-anchored) instead of clip-path — see the matching note on .btn-outline-white.cta-neon::before for why. */ .cta-warm__btn.cta-neon::before { content: '' !important; position: absolute !important; top: -1.5px !important; bottom: -1.5px !important; left: -1.5px !important; width: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #F97316, #DB2777, #7C3AED) !important; transition: width .45s cubic-bezier(.4, 0, .2, 1) !important; z-index: 1 !important; pointer-events: none !important; } @media (hover: hover) and (pointer: fine) { .cta-warm__btn.cta-neon:hover::before { width: calc(100% + 3px) !important; } } .cta-warm__btn.cta-neon:focus-visible::before { width: calc(100% + 3px) !important; } /* Touch devices get a quick, self-resetting tap press instead of a state that can get stuck. */ @media (hover: none), (pointer: coarse) { .cta-warm__btn.cta-neon:active { opacity: .88 !important; } } /* FINAL — APPROACH TIMELINE AUTO-CYCLE. Mirrors the exact "lit" look already defined for :hover, but driven by a JS-toggled class (.tstep--auto-active) instead, so the steps light up one at a time on their own, continuously, without needing the mouse. See the auto-cycle IIFE in script.js. */ .sec-approach .tstep--auto-active .tstep__circle { transform: scale(1.16) translateY(-3px) translateZ(0) !important; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 35%, #06101b 72%) !important; filter: brightness(1.35) saturate(1.35) !important; } .sec-approach .tstep--1.tstep--auto-active .tstep__circle { box-shadow: 0 0 0 1px rgba(139, 92, 246, .75), 0 0 18px rgba(139, 92, 246, .65), 0 0 42px rgba(139, 92, 246, .35) !important; } .sec-approach .tstep--2.tstep--auto-active .tstep__circle { box-shadow: 0 0 0 1px rgba(47, 125, 255, .75), 0 0 18px rgba(47, 125, 255, .65), 0 0 42px rgba(47, 125, 255, .35) !important; } .sec-approach .tstep--3.tstep--auto-active .tstep__circle { box-shadow: 0 0 0 1px rgba(32, 201, 151, .75), 0 0 18px rgba(32, 201, 151, .62), 0 0 42px rgba(32, 201, 151, .32) !important; } .sec-approach .tstep--4.tstep--auto-active .tstep__circle { box-shadow: 0 0 0 1px rgba(247, 201, 72, .8), 0 0 18px rgba(247, 201, 72, .66), 0 0 42px rgba(247, 201, 72, .34) !important; } .sec-approach .tstep--5.tstep--auto-active .tstep__circle { box-shadow: 0 0 0 1px rgba(255, 79, 163, .78), 0 0 18px rgba(255, 79, 163, .66), 0 0 42px rgba(255, 79, 163, .35) !important; } .sec-approach .tstep--6.tstep--auto-active .tstep__circle { box-shadow: 0 0 0 1px rgba(139, 92, 246, .75), 0 0 18px rgba(139, 92, 246, .65), 0 0 42px rgba(139, 92, 246, .35) !important; } .sec-approach .tstep--auto-active .tstep__name { color: #ffffff !important; text-shadow: 0 0 18px rgba(255, 255, 255, .18) !important; } .sec-approach .tstep--auto-active .tstep__sub { color: rgba(255, 255, 255, .94) !important; } /* FINAL — Book Session: taller, and flush with the calendar's own left/right edges (same width as the header/date-grid above it, inside the calendar card's padding, with zero extra margin of its own that could inset it further). */ #js-book.cta-neon { width: 100% !important; margin: 0 !important; padding-top: 22px !important; padding-bottom: 22px !important; min-height: 66px !important; } #coaching .cal__footer { align-items: stretch !important; } /* FINAL — "Let's Connect" (final section) reverted to purple, per direct request: keeps the exact same badge-travel + paint-wipe mechanism as How We Work (flush-left at rest, slides to flush- right on hover), just recolored from the orange-pink-purple gradient to a purple-only wash/badge. Also enlarged (taller + more right-side room) so the traveling badge clears the label. */ .cta-warm__btn.cta-neon { --neon: #7C3AED !important; --neon-g1: rgba(124, 58, 237, .35) !important; --neon-g2: rgba(124, 58, 237, .2) !important; --neon-g3: rgba(124, 58, 237, .12) !important; --neon-g1h: rgba(168, 85, 247, .5) !important; --neon-g2h: rgba(168, 85, 247, .32) !important; --neon-g3h: rgba(168, 85, 247, .18) !important; padding-top: 15px !important; padding-bottom: 15px !important; padding-right: 56px !important; } .cta-warm__btn.cta-neon .cta-neon__badge { background: radial-gradient(circle at 32% 28%, #c4b5fd, #a855f7 30%, #7C3AED 75%, #5b21b6 100%) !important; } .cta-warm__btn.cta-neon::before { background: linear-gradient(90deg, #5b21b6, #7C3AED, #a855f7) !important; } .cta-warm__btn.cta-neon .cta-neon__label { transition: color .45s cubic-bezier(.4, 0, .2, 1) !important; } .cta-warm__btn.cta-neon:hover .cta-neon__label, .cta-warm__btn.cta-neon:focus-visible .cta-neon__label { color: #fff !important; font-weight: 700 !important; } /* FINAL — "Schedule Your Session" recolored to match the NAV "Let's Connect" CTA (gold border-glow + orange→pink→purple gradient badge), per direct request. This deliberately does NOT touch the bottom-of-page ".sec-cta" "Let's Connect" button just above — that one shares the same .cta-warm__btn.cta-neon base classes but was purposefully kept purple per an earlier, separate direct request (see the comment above). Scoping to .schedule-card__btn specifically (same specificity as the purple rules above, but later in source, so it wins only for this one button) keeps that distinction intact. */ .schedule-card__btn.cta-neon { --neon: #C8A84B !important; --neon-g1: rgba(200, 168, 75, .3) !important; --neon-g2: rgba(200, 168, 75, .16) !important; --neon-g3: rgba(200, 168, 75, .1) !important; --neon-g1h: rgba(223, 192, 110, .45) !important; --neon-g2h: rgba(223, 192, 110, .28) !important; --neon-g3h: rgba(223, 192, 110, .16) !important; } .schedule-card__btn.cta-neon .cta-neon__badge { background: radial-gradient(circle at 32% 28%, #fdba74, #F97316 24%, #DB2777 60%, #7C3AED 100%) !important; } .schedule-card__btn.cta-neon::before { background: linear-gradient(90deg, #F97316, #DB2777, #7C3AED) !important; } /* ============================================================ FINAL — BULLETPROOF BADGE-TRAVEL FIX (all 5 traveling CTAs). Root cause of "the badge stops short / floats away from the button, overlapping other page text": this stylesheet has a very long edit history, and somewhere upstream something is preventing each button from reliably being its own positioning container. When an absolutely-positioned child's nearest ancestor isn't actually positioned, the browser walks UP the tree to the next one that is — for these buttons that turned out to be a much bigger, differently-sized ancestor (the whole text+button row), so "left" percentages were being measured against the WRONG box entirely. That also meant the old hover formula `left: calc(100% - var(--badge-d))` was measuring "100%" of the wrong element's width on top of depending on --badge-d being numerically exact. Fix, in two parts: 1) Re-assert `position: relative` on the button itself at maximum selector specificity (class repeated 4x) so nothing earlier in the file can contest it — the button is now guaranteed to be the badge's containing block. 2) Replace the hover math so it no longer needs to know the badge's exact diameter at all: `left: 100%` anchors the badge's left edge to the button's right wall, and `translateX(-100%)` (a transform percentage, which is always relative to the badge's OWN rendered size, whatever that actually is) pulls it back by exactly its own width — landing it flush on the right, correctly, regardless of what --badge-d resolves to. +1.5px mirrors the -1.5px used at rest to cancel the border width on both sides. */ /* nav__cta / nav__mobile-cta removed from this system entirely — their badge is now a fixed, non-traveling circle owned solely by nav.css. Only the other 3 buttons that still use the classic hover-travel badge remain here. */ .btn-outline-white.cta-neon.cta-neon.cta-neon, .btn-play.cta-neon.cta-neon.cta-neon, .cta-warm__btn.cta-neon.cta-neon.cta-neon { position: relative !important; } .btn-outline-white.cta-neon.cta-neon.cta-neon .cta-neon__badge, .btn-play.cta-neon.cta-neon.cta-neon .cta-neon__badge, .cta-warm__btn.cta-neon.cta-neon.cta-neon .cta-neon__badge { position: absolute !important; top: 50% !important; left: -1.5px !important; margin: 0 !important; flex: none !important; transform: translateY(-50%) translateX(0) !important; transition: left .45s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1) !important; } /* cta-warm__btn's :hover portion is gated to real-hover devices only — see the touch "stuck hover" note near its base rule. btn-outline-white and btn-play aren't part of that report, so their :hover stays ungated here. */ .btn-outline-white.cta-neon.cta-neon.cta-neon:hover .cta-neon__badge, .btn-play.cta-neon.cta-neon.cta-neon:hover .cta-neon__badge { left: 100% !important; transform: translateY(-50%) translateX(calc(-100% + 1.5px)) !important; } @media (hover: hover) and (pointer: fine) { .cta-warm__btn.cta-neon.cta-neon.cta-neon:hover .cta-neon__badge { left: 100% !important; transform: translateY(-50%) translateX(calc(-100% + 1.5px)) !important; } } .btn-outline-white.cta-neon.cta-neon.cta-neon:focus-visible .cta-neon__badge, .btn-play.cta-neon.cta-neon.cta-neon:focus-visible .cta-neon__badge, .cta-warm__btn.cta-neon.cta-neon.cta-neon:focus-visible .cta-neon__badge { left: 100% !important; transform: translateY(-50%) translateX(calc(-100% + 1.5px)) !important; } /* FINAL — "Explore Our Services" badge: white stroke ring around the circle at rest, and once it finishes traveling to the right wall on hover, its fill switches from frosted white to the same orange- pink-purple gradient used everywhere else on the site. */ .btn-outline-white.cta-neon .cta-neon__badge { border: 1.5px solid rgba(255, 255, 255, .85) !important; } .btn-outline-white.cta-neon:hover .cta-neon__badge, .btn-outline-white.cta-neon:focus-visible .cta-neon__badge { background: radial-gradient(circle at 32% 28%, #fdba74, #F97316 24%, #DB2777 60%, #7C3AED 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: rgba(255, 255, 255, .5) !important; } /* FINAL v2 — service card hover-video icons (cards 1-4: Experience Strategy, Creative Direction, SEO & GEO Growth, AI & Digital Innovation): the video IS the icon now (no more static , no more swapping between two elements — that swap was what caused the visible size-jump on hover). Each sits paused on its first frame at rest (looks like a normal static icon) and only starts playing while hovered; script.js handles the actual play()/ pause(). Same box sizing rule as every other card's icon image, so these line up with card 5's icon (still a static image). */ .sec-services .services-grid .svc-card.svc-card:nth-child(1) .svc-icon .svc-icon__video, .sec-services .services-grid .svc-card.svc-card:nth-child(2) .svc-icon .svc-icon__video, .sec-services .services-grid .svc-card.svc-card:nth-child(3) .svc-icon .svc-icon__video, .sec-services .services-grid .svc-card.svc-card:nth-child(4) .svc-icon .svc-icon__video, .sec-services .services-grid .svc-card.svc-card:nth-child(5) .svc-icon .svc-icon__video { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: 0 auto !important; } /* FINAL — these 4 video icons read ~20% smaller than intended (the source clips are full-bleed line art with no internal padding, so at the same box size they look lighter/smaller than the old flat PNG icons). Scale the icon box itself up 20% so the enlargement also applies correctly to the existing hover shrink+lift animation (rest scale 1 -> 1.2, hover scale 0.72 -> 0.864, same ratio). */ .sec-services .services-grid .svc-card.svc-card:nth-child(1) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5) .svc-icon { /* Superseded by FIX v3 below: the icon box is now sized to exactly match the card's content box (100% width, 0 margin), so the old "left:50% + translateX(-50%)" centering trick is not just unnecessary but actively wrong — on a 100%-wide box it shifts the whole element half the card's width to the LEFT, which is exactly the "video is outside the card" bug. Neutralized to no transform. */ transform: none !important; } .sec-services .services-grid .svc-card.svc-card:nth-child(1):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(1):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(1).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(1).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5).is-tilting .svc-icon { transform: none !important; } @media (max-width: 899px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .sec-services .services-grid .svc-card.svc-card:nth-child(1) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(1):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(1):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(1).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(1).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(2).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(3).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(4).is-tilting .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5) .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5):hover .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5):focus-visible .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5).is-hovering .svc-icon, .sec-services .services-grid .svc-card.svc-card:nth-child(5).is-tilting .svc-icon { transform: none !important; } } /* FINAL — Book Session: robust re-assert that the button spans the exact same left/right edges as the calendar above it (belt-and- braces re-declaration in case anything upstream still constrains its width), plus swap the hover feedback from a soft blurred glow (read as "foggy") to a crisp lift + directional shadow, so it visibly pops off the card instead of just hazing outward. */ #coaching .cal__footer { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } #js-book.cta-neon { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1) !important; } #js-book.cta-neon:hover, #js-book.cta-neon:focus-visible { transform: translateY(-5px) scale(1.015) !important; box-shadow: 0 16px 24px -10px rgba(14, 12, 20, .55), 0 6px 10px -2px rgba(14, 12, 20, .35) !important; } /* FINAL — kill any leftover forced height on the calendar widget (an earlier layout pass used an internal 3-row grid with a fixed- height middle row for the date grid; if any part of that is still in effect it leaves visible dead space inside the card before the next card below it). The widget's height is now purely content- driven end to end: header, then the date grid, then the footer — nothing forced taller than it needs to be. */ #coaching .calendar-widget { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; } #coaching .cal__body { display: block !important; height: auto !important; min-height: 0 !important; } /* FINAL — real root cause of the huge blank gap at the bottom of the whole coaching card: several old rules from an earlier grid-based layout (.sec-coaching .audience-cards { height: 260px / 288px / 340px !important }, scattered across multiple past redesign passes) were never actually overridden — the current #coaching- scoped redesign block sets display/columns/gap on .audience-cards but never touches its height, so those old fixed pixel heights were still winning (class selectors don't need to beat an ID rule that simply never mentions the property). Since .audience-cards and its wrapper are plain transparent layout boxes (no card background of their own), that forced extra height was invisible empty space, not a visible box — reading as "empty space at the bottom" once it pushed the whole section's auto-height taller than its actual visible content. Re-asserted at ID specificity so nothing upstream can reintroduce it. */ #coaching .audience-cards { height: auto !important; min-height: 0 !important; } #coaching .coaching-main, #coaching .coaching__how { height: auto !important; min-height: 0 !important; } #coaching .coaching-side, #coaching .coaching__checklist { height: auto !important; min-height: 0 !important; max-height: none !important; } /* FINAL v2 — bottom-align the two columns again now that the real root cause of the old empty-space bug (a stale grid-template-rows: auto 260px auto reserving a fixed empty row) is fixed below via grid-template-rows:auto. That means align-items:stretch is safe again: the right column's checklist card already has flex:1 inside its flex-column parent (.coaching-side), so when the grid stretches it taller to match the left column, the card's own background grows to fill that space (centering its items) instead of leaving dead air — the timeline and the checklist now end at the same baseline. */ #coaching .coaching-layout { align-items: stretch !important; grid-template-rows: auto !important; } /* FINAL — the whole coaching section reads as a separate floating rounded card (margin above/below, radius on all 4 corners), unlike every other section on the page (services, approach, why, cta), which are all flush, full-bleed, edge-to-edge. Matching that here: no side/vertical margin, no corner radius, so it sits flush against the sections directly above and below it and reaches the true left/right edges of the page like they do. */ #coaching { margin: 0 !important; border-radius: 0 !important; padding-bottom: clamp(32px, 4vw, 52px) !important; } /* FINAL — "What We'll Focus On" cards: equalize height + enlarge text. The grid (.audience-cards) already stretches its 3
  • grid items to equal height by default, but .aud-card itself (the actual visible card box, one level down inside each
  • ) had height:auto with no height:100%, so it only ever grew to fit its OWN text — different description lengths meant different card heights despite the equal-height grid row underneath. Filling the full 100% now makes all 3 literally the same height regardless of copy length; .aud-card__desc's existing flex:1 does the rest, pushing the arrow icon down to the same spot on every card. */ #coaching .aud-card { height: 100% !important; min-height: 225px !important; padding: 20px 16px 18px !important; } #coaching .aud-card__name { font-size: 17px !important; } #coaching .aud-card__desc { font-size: 13.5px !important; line-height: 1.5 !important; } #coaching .aud-card__radio { margin-top: 18px !important; } /* FINAL — "How The Session Works" timeline: everything (icon badge, step number, title, description) was noticeably smaller here than the rest of the page's type scale. Enlarging all of it, and giving the timeline more breathing room to match. */ #coaching .coaching__timeline { margin-top: 18px !important; gap: 8px !important; } #coaching .coaching__timeline::before { top: 34px !important; } #coaching .coaching__timeline li { gap: 10px !important; } #coaching .ctime__ico { width: 54px !important; height: 54px !important; box-shadow: 0 4px 14px rgba(30, 12, 60, .09) !important; } #coaching .ctime__num { font-size: 12.5px !important; margin: 8px 0 0 !important; } #coaching .ctime__name { font-size: 12.8px !important; } #coaching .ctime__sub { font-size: 12.5px !important; line-height: 1.5 !important; max-width: 140px !important; } /* Per-step glow halo around each icon badge, matching the color language already used for the Approach section's timeline (violet / blue / teal / gold / pink). Icons are the user's own colored PNG artwork on a transparent background, so the glow is layered purely via box-shadow — the artwork itself is untouched. Rest state gets a soft, subtle version of each color; the auto-active state (below, driven by script.js) blooms brighter, mirroring .tstep--auto-active exactly. */ #coaching .coaching__timeline li:nth-child(1) .ctime__ico { box-shadow: 0 0 0 1px rgba(139, 92, 246, .28), 0 0 16px rgba(139, 92, 246, .22), 0 4px 14px rgba(30, 12, 60, .09) !important; } #coaching .coaching__timeline li:nth-child(2) .ctime__ico { box-shadow: 0 0 0 1px rgba(47, 125, 255, .28), 0 0 16px rgba(47, 125, 255, .22), 0 4px 14px rgba(30, 12, 60, .09) !important; } #coaching .coaching__timeline li:nth-child(3) .ctime__ico { box-shadow: 0 0 0 1px rgba(32, 201, 151, .28), 0 0 16px rgba(32, 201, 151, .22), 0 4px 14px rgba(30, 12, 60, .09) !important; } #coaching .coaching__timeline li:nth-child(4) .ctime__ico { box-shadow: 0 0 0 1px rgba(247, 201, 72, .3), 0 0 16px rgba(247, 201, 72, .22), 0 4px 14px rgba(30, 12, 60, .09) !important; } #coaching .coaching__timeline li:nth-child(5) .ctime__ico { box-shadow: 0 0 0 1px rgba(255, 79, 163, .3), 0 0 16px rgba(255, 79, 163, .22), 0 4px 14px rgba(30, 12, 60, .09) !important; } #coaching .coaching__timeline li.is-ctime-active .ctime__ico { transform: scale(1.1) !important; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1) !important; } #coaching .coaching__timeline li .ctime__ico { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1) !important; } #coaching .coaching__timeline li:nth-child(1).is-ctime-active .ctime__ico { box-shadow: 0 0 0 1px rgba(139, 92, 246, .8), 0 0 20px rgba(139, 92, 246, .68), 0 0 46px rgba(139, 92, 246, .38) !important; } #coaching .coaching__timeline li:nth-child(2).is-ctime-active .ctime__ico { box-shadow: 0 0 0 1px rgba(47, 125, 255, .8), 0 0 20px rgba(47, 125, 255, .68), 0 0 46px rgba(47, 125, 255, .38) !important; } #coaching .coaching__timeline li:nth-child(3).is-ctime-active .ctime__ico { box-shadow: 0 0 0 1px rgba(32, 201, 151, .8), 0 0 20px rgba(32, 201, 151, .65), 0 0 46px rgba(32, 201, 151, .35) !important; } #coaching .coaching__timeline li:nth-child(4).is-ctime-active .ctime__ico { box-shadow: 0 0 0 1px rgba(247, 201, 72, .82), 0 0 20px rgba(247, 201, 72, .68), 0 0 46px rgba(247, 201, 72, .36) !important; } #coaching .coaching__timeline li:nth-child(5).is-ctime-active .ctime__ico { box-shadow: 0 0 0 1px rgba(255, 79, 163, .8), 0 0 20px rgba(255, 79, 163, .68), 0 0 46px rgba(255, 79, 163, .38) !important; } #coaching .coaching__timeline li.is-ctime-active .ctime__name { color: #fff !important; text-shadow: 0 0 18px rgba(255, 255, 255, .18) !important; } @media (max-width: 700px) { #coaching .ctime__ico { width: 45px !important; height: 45px !important; } #coaching .ctime__name { font-size: 12px !important; } #coaching .ctime__sub { font-size: 12px !important; max-width: none !important; } /* The unconditional "enlarge" pass above sets gap:8px for the desktop row layout, but that same value carries into the stacked mobile layout (flex-direction:column, set further up in the file at this same breakpoint) — 8px between full-width rows that each carry a 45px icon + multi-line description reads as cramped/overlapping. Give the stacked steps real breathing room. */ #coaching .coaching__timeline { gap: 24px !important; } #coaching .coaching__timeline li { gap: 14px !important; } } /* FINAL — "Why E4LA" heading: remove the small stray accent rule that sat under "Your strategic partner." (it read as a random, out-of-place underline), and give "strategic partner" the site's signature orange→pink→purple gradient treatment instead, matching the accent already used on the hero's scrambling word. */ .why__rule { display: none !important; } .why__h2.section-heading .grad-text { background: linear-gradient(95deg, var(--g-orange) 0%, var(--g-pink) 48%, var(--g-purple) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; display: inline-block !important; } /* FINAL — real E4LA wordmark (assets/e4la-logo-palm.png, background already removed) replacing the old cropped-photo placeholder in both the header and footer. The previous rules used object-fit: cover + a heavy scale() because they were zooming into a cropped corner of a wide photo to fake a logo chip — wrong approach for an actual logotype, which needs to be shown in FULL and undistorted. Switching to object-fit:contain and dropping the crop/zoom/rounded chip treatment entirely so the real logo just sits cleanly on the nav/footer's own dark background. */ .nav__logo, .footer__brand-logo { border-radius: 0 !important; overflow: visible !important; background: transparent !important; } .nav__logo { width: 150px !important; height: 46px !important; } .footer__brand-logo { width: 140px !important; height: 50px !important; } .nav__logo .brand-asset, .footer__brand-logo .brand-asset { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; transform: none !important; } @media (max-width: 780px) { .nav__logo { width: 120px !important; height: 40px !important; } .footer__brand-logo { width: 120px !important; height: 44px !important; } } /* FINAL v3 — BOOK SESSION hover, take 3. Dropping the translateY lift entirely (it read as the whole button shifting upward, changing its position) in favor of a scale-only "pop toward the viewer" — same spot, just bigger — plus a tighter, closer, more defined shadow instead of a large soft blur radius (which is what was reading as "foggy": a big diffuse blur haze rather than a crisp elevation edge). Re-declared at doubled class specificity so this is guaranteed to beat the earlier shared .cal__cta.cta-neon :hover glow rule for every button also carrying the cal__cta class. */ #js-book.cta-neon.cta-neon:hover, #js-book.cta-neon.cta-neon:focus-visible { transform: scale(1.035) !important; box-shadow: 0 6px 10px -4px rgba(14, 12, 20, .55), 0 2px 4px -1px rgba(14, 12, 20, .4) !important; } /* FINAL v2 — SERVICES CARDS: ONE continuous gradient border across the whole row, not five independent copies of the same gradient. Each card is a transparent-bordered window (border-box layer) onto ONE shared orange→pink→purple gradient stretched to 5x the row width (background-size:500%), with each card's background-position shifted by exactly one card-width (0/25/50/75/100%) so the color a card shows picks up exactly where its neighbor left off — like cutting one continuous ribbon into 5 pieces. Full-strength colors, no white/opacity mixed into the gradient layer itself (the frosted glass fill is a SEPARATE background layer in the padding-box, so it never dilutes the border color). */ .sec-services .svc-card.svc-card { border: 2.5px solid transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)), linear-gradient(90deg, var(--g-orange), var(--g-pink) 50%, var(--g-purple)) !important; background-origin: padding-box, border-box !important; background-clip: padding-box, border-box !important; background-repeat: no-repeat, no-repeat !important; background-size: 100% 100%, 500% 100% !important; } .sec-services .services-grid .svc-card.svc-card:nth-child(1) { background-position: 0% 0 !important; } .sec-services .services-grid .svc-card.svc-card:nth-child(2) { background-position: 25% 0 !important; } .sec-services .services-grid .svc-card.svc-card:nth-child(3) { background-position: 50% 0 !important; } .sec-services .services-grid .svc-card.svc-card:nth-child(4) { background-position: 75% 0 !important; } .sec-services .services-grid .svc-card.svc-card:nth-child(5) { background-position: 100% 0 !important; } .sec-services .svc-card.svc-card:hover, .sec-services .svc-card.svc-card:focus-visible, .sec-services .svc-card.svc-card.is-active { border: 2.5px solid transparent !important; background-image: linear-gradient(rgba(255, 255, 255, .74), rgba(255, 255, 255, .74)), linear-gradient(90deg, var(--g-orange), var(--g-pink) 50%, var(--g-purple)) !important; } /* FINAL v3 — full-strength vivid fill, matching the user's reference swatch (deep indigo → violet → magenta → orange, same intensity as the site's CTA gradient) instead of the previous pastel/white- diluted wash. The white overlay layer is gone entirely — the gradient itself is now the whole card's background, border included, so there's nothing left to mute it. Title/description flip to white/near-white for contrast against the now-saturated background; the arrow circle becomes an outlined white ring to match. Card icons are transparent-background videos with their own baked-in line colors, so they're left as-is (can't be recolored via CSS) — flag if any specific icon reads poorly against its card's segment of the gradient and it can be addressed directly. */ .sec-services .svc-card.svc-card { border: 0 !important; background-image: linear-gradient(90deg, #2b2170 0%, var(--g-purple) 30%, var(--g-pink) 62%, var(--g-orange) 100%) !important; background-origin: border-box !important; background-clip: border-box !important; background-repeat: no-repeat !important; background-size: 500% 100% !important; box-shadow: 0 20px 50px rgba(75, 58, 110, .28) !important; } .sec-services .svc-card.svc-card:hover, .sec-services .svc-card.svc-card:focus-visible, .sec-services .svc-card.svc-card.is-active { border: 0 !important; box-shadow: 0 28px 70px rgba(75, 58, 110, .4) !important; } /* Belt-and-suspenders: explicitly re-assert the exact same gradient (not just leave it to inherit) on hover/active/focus at bumped-up specificity, in case any older hover rule elsewhere in this very long file (e.g. a leftover "background: rgba(255,255,255,.68)" glass-hover treatment from an earlier redesign pass) is still winning the cascade for the `background` property specifically. This guarantees the card reads as the exact same solid color before, during, and after hover — nothing lightens or fades. */ .sec-services .services-grid .svc-card.svc-card.svc-card:hover, .sec-services .services-grid .svc-card.svc-card.svc-card:focus-visible, .sec-services .services-grid .svc-card.svc-card.svc-card.is-active, .sec-services .services-grid .svc-card.svc-card.svc-card.is-hovering, .sec-services .services-grid .svc-card.svc-card.svc-card.is-tilting { background-color: transparent !important; background-image: linear-gradient(90deg, #2b2170 0%, var(--g-purple) 30%, var(--g-pink) 62%, var(--g-orange) 100%) !important; background-origin: border-box !important; background-clip: border-box !important; background-repeat: no-repeat !important; background-size: 500% 100% !important; opacity: 1 !important; filter: none !important; } .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(1):hover, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(1).is-active, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(1).is-hovering, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(1).is-tilting { background-position: 0% 0 !important; } .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(2):hover, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(2).is-active, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(2).is-hovering, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(2).is-tilting { background-position: 25% 0 !important; } .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(3):hover, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(3).is-active, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(3).is-hovering, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(3).is-tilting { background-position: 50% 0 !important; } .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(4):hover, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(4).is-active, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(4).is-hovering, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(4).is-tilting { background-position: 75% 0 !important; } .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(5):hover, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(5).is-active, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(5).is-hovering, .sec-services .services-grid .svc-card.svc-card.svc-card:nth-child(5).is-tilting { background-position: 100% 0 !important; } @media (max-width: 1180px) { .sec-services .services-grid .svc-card.svc-card:nth-child(1), .sec-services .services-grid .svc-card.svc-card:nth-child(2), .sec-services .services-grid .svc-card.svc-card:nth-child(3), .sec-services .services-grid .svc-card.svc-card:nth-child(4), .sec-services .services-grid .svc-card.svc-card:nth-child(5) { background-size: 100% 100% !important; background-position: 0 0 !important; } } .sec-services .services-grid .svc-card.svc-card .svc-card__title { color: #fff !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__desc { color: rgba(255, 255, 255, .85) !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__arr { border: 1.5px solid rgba(255, 255, 255, .75) !important; background: rgba(255, 255, 255, .14) !important; color: #fff !important; } .sec-services .services-grid .svc-card.svc-card .svc-card__arr svg { color: #fff !important; stroke: #fff !important; } /* FINAL — recolor the service card icons to plain white so they read cleanly against the new vivid gradient fill (previously each was its own theme color — purple/blue/green/amber — which no longer matches). The 4 animated icons are transparent-background