:root{ --ink:#0E0E10; --coal:#161618; --card:#1C1C1F; --line:#2A2A2E; --silver:#BBBDC4; --mist:#E6E7E9; --paper:#F5F5F4; --orange:#E8611A; --maxw:1180px; --display:'Avenir Next','Avenir','Mulish',system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{background:var(--ink);color:var(--mist);font-family:var(--display);font-weight:400; font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2} /* ---------- nav ---------- */ .brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1} header .brand img{display:block;height:18px;width:auto} header .brand{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px} header .brand .tagline{font-size:10.5px;font-style:italic;letter-spacing:.03em;color:var(--silver);white-space:nowrap;position:static} footer .brand img{height:18px;width:auto} footer .brand .tagline{font-size:10.5px;font-style:italic;letter-spacing:.03em;color:var(--silver); white-space:nowrap;margin-top:5px} header{position:fixed;top:0;left:0;width:100%;z-index:50; background:rgba(13,13,15,.96);border-bottom:1px solid rgba(255,255,255,.05); display:flex;flex-direction:column;align-items:stretch; -webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform} .nav{display:flex;align-items:center;justify-content:space-between;height:88px;position:relative; z-index:2;gap:12px;order:-1;width:calc(100% - 0px)} @media(max-width:760px){ .nav{height:78px} header .brand img{height:17px} header .brand .tagline{font-size:10px} } .nav .links{display:flex;gap:26px;font-size:14px;color:var(--silver);font-weight:400} .nav .links a{transition:color .2s} .nav .links a:hover{color:var(--paper)} @media(max-width:900px){.nav .links{display:none}} /* hamburger toggle — pure CSS/HTML via :target, works with no JavaScript. Shown only when the inline nav links are hidden; 'Let's talk' always stays visible. */ .nav-toggle{display:none;flex:none;flex-direction:column;justify-content:center; align-items:flex-end;gap:5px;width:36px;height:36px} .nav-toggle span{display:block;width:24px;height:2px;background:var(--paper); border-radius:1px;transition:transform .25s ease,opacity .2s ease} @media(max-width:900px){.nav-toggle{display:flex;align-items:center}} /* mobile nav panel — opened either by the URL hash (#mobile-menu, pure CSS via :target) or by JS toggling .menu-open on (belt-and-braces: works even if :target behaves unreliably in some mobile browsers/preview contexts). Lives as a normal-flow part of the already-fixed
(not its own position:fixed element), so it shares the header's scroll behaviour exactly. */ .mobile-menu{display:none} .mobile-menu .close-menu{display:none} @media(max-width:900px){ #mobile-menu:target, html.menu-open #mobile-menu{display:flex;flex-direction:column; max-height:calc(100vh - 88px);overflow-y:auto; background:rgba(13,13,15,.98); border-top:1px solid var(--line)} #mobile-menu:target .close-menu, html.menu-open #mobile-menu .close-menu{display:flex;justify-content:flex-end; padding:18px 28px 6px;color:var(--silver);font-size:20px;font-weight:300} .mobile-menu a{padding:16px 28px;font-size:16px;color:var(--mist); border-bottom:1px solid var(--line)} /* morph the hamburger into a close icon while the menu is open */ #mobile-menu:target ~ .nav .nav-toggle span:nth-child(1), html.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} #mobile-menu:target ~ .nav .nav-toggle span:nth-child(2), html.menu-open .nav-toggle span:nth-child(2){opacity:0} #mobile-menu:target ~ .nav .nav-toggle span:nth-child(3), html.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:760px){ #mobile-menu:target, html.menu-open #mobile-menu{max-height:calc(100vh - 78px)} } /* ---------- buttons ---------- */ .btn{display:inline-block;background:var(--paper);color:var(--ink);border:1px solid var(--paper); padding:14px 28px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:.01em; cursor:pointer;transition:background .2s,color .2s,border-color .2s} .btn:hover{background:transparent;color:var(--paper)} .btn.ghost{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.22)} .btn.ghost:hover{border-color:var(--paper)} .btn-line{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--orange);color:var(--orange); padding:10px 22px;border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.02em;transition:.2s} .btn-line:hover{background:var(--orange);color:var(--ink)} @media(max-width:480px){ .btn-line{padding:8px 16px;font-size:12.5px} } /* ---------- shared section bits ---------- */ section{padding:110px 0;position:relative} #why,#do,#offers,#who-am,#engage,#voices,#connect{scroll-margin-top:104px} @media(max-width:760px){#why,#do,#offers,#who-am,#engage,#voices,#connect{scroll-margin-top:90px}} .eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--silver);font-weight:500;margin-bottom:26px} .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none} .eyebrow.center{justify-content:center} h1,h2,h3{color:var(--paper);letter-spacing:-.015em} h1{font-size:clamp(40px,6.4vw,78px);line-height:1.08;font-weight:600} h2{font-size:clamp(30px,4.2vw,50px);line-height:1.12;margin-bottom:24px;font-weight:560} h3{font-size:21px;font-weight:500;line-height:1.3} .lead{font-size:clamp(17px,1.5vw,20px);color:var(--silver);max-width:640px;margin-bottom:0} .lead.center{margin:0 auto} .orange{color:var(--orange)} .center{text-align:center} .divider{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto} /* reveal */ /* content is visible by default; the reveal-on-scroll effect only applies once JS confirms it can run (html gets class "js" — see early head script). This guarantees the page is fully readable even if JS doesn't execute. */ .rv{opacity:1;transform:none} .js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease} .js .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}} /* ---------- hero video ---------- */ .hero-video-wrap{position:absolute;inset:0;overflow:hidden;z-index:0} /* ---------- atmosphere (signal in the noise — used on connect section only) ---------- */ .atmos{position:absolute;inset:0;overflow:hidden;z-index:0;filter:url(#fog)} .atmos .blob{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.4} .atmos .b1{width:62vw;height:62vw;max-width:760px;max-height:760px;background:#9a9aa0;top:-22%;left:-14%; animation:drift1 42s ease-in-out infinite} .atmos .b2{width:50vw;height:50vw;max-width:620px;max-height:620px;background:#6e6e74;bottom:-18%;right:-8%; animation:drift2 48s ease-in-out infinite} .atmos .b3{width:38vw;height:38vw;max-width:480px;max-height:480px;background:#cfcfd2;top:28%;left:42%; opacity:.28;animation:drift3 54s ease-in-out infinite} .atmos .signal{width:32vw;height:32vw;max-width:420px;max-height:420px;background:#EDEDEF; top:18%;right:14%;opacity:.3;animation:drift4 30s ease-in-out infinite} @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.12)}} @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-5vh) scale(1.1)}} @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,7vh) scale(.9)}} @keyframes drift4{0%,100%{transform:translate(0,0) scale(1);opacity:.3}50%{transform:translate(-5vw,5vh) scale(1.18);opacity:.42}} @media (prefers-reduced-motion:reduce){.atmos .blob{animation:none}.atmos{filter:none}} .atmos-scrim{position:absolute;inset:0;background:rgba(10,10,11,.52);z-index:1} /* ---------- hero ---------- */ #hero{min-height:100vh;display:flex;flex-direction:column; padding:108px 0 0;overflow:hidden;position:relative} .hero-content{position:relative;z-index:2;text-align:center;max-width:780px;margin:0 auto; padding:0 28px;flex:1;min-height:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px} #hero .lead{margin:18px auto 0;max-width:560px} #hero p.daily{color:var(--paper);font-weight:400;margin:10px 0 26px} #hero .ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center} .scrolldown{display:flex;flex-direction:column;align-items:center;gap:6px; padding:10px 0 18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--silver);position:relative;z-index:2} .scrolldown .arrow{font-size:14px;animation:bob 2.4s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} @media (prefers-reduced-motion:reduce){.scrolldown .arrow{animation:none}} /* chips / marquee — sits above the scroll-down indicator, within the hero frame */ .marquee{width:100%;overflow:hidden;padding:14px 0;background:transparent; border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:2} .marquee .track{display:flex;gap:16px;width:max-content;animation:roll 38s linear infinite} @keyframes roll{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marquee .track{animation:none}} .chip{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 18px;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--silver);background:rgba(255,255,255,.04); white-space:nowrap} @media(max-width:760px){ #hero{padding-top:90px} .scrolldown{display:none} } /* ---------- why ---------- */ #why .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} #why ul{list-style:none;margin:34px 0;display:grid;gap:0} #why li{padding:20px 0;border-top:1px solid var(--line);display:flex;gap:18px;align-items:baseline; color:var(--mist);font-size:17.5px} #why li:last-child{border-bottom:1px solid var(--line)} #why li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange); flex:none;transform:translateY(-2px)} #why .photo{border-radius:16px;overflow:hidden;border:1px solid var(--line); filter:grayscale(1) contrast(1.05)} #why .closing{color:var(--silver);max-width:560px;margin-bottom:14px} #why .firm{color:var(--paper);font-weight:400;margin-bottom:34px} @media(max-width:900px){#why .grid{grid-template-columns:1fr}} /* ---------- how (CommuniSENSE) ---------- */ #how{background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #how .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center} #how .photo{border-radius:16px;overflow:hidden;border:1px solid var(--line)} #how p{color:var(--silver);max-width:580px;margin-bottom:18px} #how p.result{color:var(--paper);font-weight:400} #how .btn{margin-top:26px} @media(max-width:900px){#how .grid{grid-template-columns:1fr}} /* quote */ #quote{padding:120px 0;text-align:center} #quote blockquote{font-size:clamp(24px,3.2vw,38px);font-weight:300;color:var(--paper); line-height:1.35;max-width:900px;margin:0 auto 26px;letter-spacing:-.01em} #quote blockquote i{font-style:normal;color:var(--orange)} #quote cite{font-style:normal;color:var(--silver);font-size:15px;letter-spacing:.12em;text-transform:uppercase} /* ---------- what I do ---------- */ #do .lead{margin-top:10px} #do .do-intro{max-width:820px;margin-top:30px;display:grid;gap:18px} #do .do-intro p{color:var(--mist);font-size:17.5px;max-width:780px} #do .do-intro p.named{color:var(--paper);font-size:19px;font-weight:500;margin-top:6px} #do .judgment-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center; margin-top:90px} #do .judgment-grid .photo{border-radius:16px;overflow:hidden;border:1px solid var(--line)} #do .judgment-grid p{color:var(--silver);max-width:580px;margin-bottom:16px} #do .judgment-grid p.tagline{color:var(--paper);font-weight:600;font-size:21px;margin:24px 0 26px} #do .judgment-grid p.tagline i{font-style:normal;color:var(--orange)} @media(max-width:900px){#do .judgment-grid{grid-template-columns:1fr}#do .judgment-grid .photo{order:-1}} /* FAQ accordion */ #do .faq{margin-top:100px;max-width:860px} #do .faq h3{margin-bottom:8px} #do .faq-list{margin-top:30px;border-top:1px solid var(--line)} #do .faq-list details{border-bottom:1px solid var(--line);padding:24px 0} #do .faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px; cursor:pointer;list-style:none;color:var(--paper);font-size:18px;font-weight:500} #do .faq-list summary::-webkit-details-marker{display:none} #do .faq-list summary::after{content:'+';color:var(--orange);font-size:24px;font-weight:300; flex:none;transition:transform .25s ease;line-height:1} #do .faq-list details[open] summary::after{transform:rotate(45deg)} #do .faq-list details:not([open]) .a{display:none} #do .faq-list .a{color:var(--silver);font-size:16px;max-width:740px;margin-top:16px} /* ---------- testimonials ---------- */ #voices{background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #voices .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px} .tcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 28px; display:flex;flex-direction:column;gap:22px;transition:transform .25s,border-color .25s} .tcard:hover{transform:translateY(-4px);border-color:#3a3a40} .tcard p{color:var(--mist);font-size:16.5px;flex:1} .tcard::before{content:'\201C';font-size:46px;line-height:0;color:var(--orange); font-family:Georgia,serif;height:14px} .who{display:flex;gap:14px;align-items:flex-start} .avatar{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(232,97,26,.14); border:1px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;letter-spacing:.02em} .who .meta{font-size:14px;color:var(--silver);line-height:1.5} .who .meta b{display:block;color:var(--paper);font-weight:600} @media(max-width:980px){#voices .cards{grid-template-columns:1fr 1fr}} @media(max-width:640px){#voices .cards{grid-template-columns:1fr}} /* ---------- offers ---------- */ #offers .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;align-items:start} .ocard{background:var(--coal);border:1px solid var(--line);border-radius:16px; transition:border-color .25s} .ocard:hover,.ocard:focus-within,.ocard.open{border-color:var(--orange)} .ocard-media{position:relative;aspect-ratio:110/59;overflow:hidden;border-radius:14px 14px 0 0} .ocard-media .bg{position:absolute;inset:-2%;background-size:cover;background-position:center; filter:grayscale(1) contrast(1.02);transition:transform .6s ease,filter .6s ease} .ocard:hover .ocard-media .bg,.ocard:focus-within .ocard-media .bg,.ocard.open .ocard-media .bg{ transform:scale(1.06);filter:grayscale(0)} .ocard-media .num{position:absolute;top:14px;left:16px;z-index:2;font-size:12px;color:var(--orange); font-weight:700;letter-spacing:.22em} .ocard-title{padding:18px 20px 14px} .ocard .icon{width:34px;height:34px;border:1px solid var(--line);border-radius:10px; display:flex;align-items:center;justify-content:center;margin-bottom:14px} .ocard .icon svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .ocard h3{font-size:18px;font-weight:500;margin-bottom:8px;line-height:1.25} .ocard .pitch{color:var(--silver);font-size:14px;margin:0} /* description panel — on desktop, hidden until hover/focus, then expands within the card */ .ocard-drop{max-height:0;opacity:0;overflow:hidden; transition:max-height .45s ease,opacity .35s ease,padding .45s ease; padding:0 20px;border-top:1px solid transparent} .ocard:hover .ocard-drop,.ocard:focus-within .ocard-drop,.ocard.open .ocard-drop{ max-height:800px;opacity:1;padding:10px 20px 22px;border-top-color:var(--line)} .ocard-drop p{color:var(--silver);font-size:14.5px;margin-bottom:12px} .ocard-drop ul{list-style:none;margin:0 0 14px;display:grid;gap:8px} .ocard-drop li{display:flex;gap:10px;align-items:baseline;color:var(--mist);font-size:14px} .ocard-drop li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange); flex:none;transform:translateY(-2px)} .ocard-drop a.cta{color:var(--paper);font-weight:600;font-size:14.5px; display:inline-flex;gap:8px;align-items:center} .ocard-drop a.cta::after{content:'\2192';color:var(--orange);transition:transform .2s} .ocard-drop a.cta:hover::after{transform:translateX(5px)} @media(max-width:980px){#offers .cards{grid-template-columns:1fr 1fr}} /* On phones: show everything by default — full colour image, full description — so nothing depends on hover/tap to be readable. */ @media(max-width:760px){ #offers .cards{grid-template-columns:1fr} .ocard-media .bg{filter:grayscale(0)} .ocard-drop{max-height:none;opacity:1;padding:10px 20px 22px;border-top-color:var(--line)} /* Once JS confirms it's running, switch to the scroll-triggered reveal: each card starts grayscale/collapsed, then turns to colour and drops open automatically as it reaches the top of the screen. */ .js .ocard-media .bg{filter:grayscale(1);transform:scale(1)} .js .ocard-drop{max-height:0;opacity:0;padding:0 20px;border-top-color:transparent} .js .ocard.in-view .ocard-media .bg{filter:grayscale(0);transform:scale(1.04)} .js .ocard.in-view .ocard-drop{max-height:700px;opacity:1;padding:10px 20px 22px;border-top-color:var(--line)} } @media(max-width:640px){#offers .cards{grid-template-columns:1fr} .ocard.open .ocard-drop{max-height:800px}} /* ---------- about (who I am) ---------- */ #who-am{background:var(--coal);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start} .about-grid h2{font-size:clamp(36px,5.2vw,64px);margin-bottom:22px} .about-grid h2 .signature{font-family:var(--display);font-weight:400; font-size:1.05em;color:var(--orange);letter-spacing:-.01em} .about-grid p{color:var(--silver);margin-bottom:16px;max-width:560px} .about-grid p.first,.about-grid h1.first{color:var(--paper);font-weight:400;font-size:19px;letter-spacing:normal;line-height:inherit;margin:0 0 1em} .about-left{display:flex;flex-direction:column;align-items:flex-start;gap:0} .about-left .photo{border-radius:18px;overflow:hidden;border:1px solid var(--line); filter:grayscale(1);width:100%} .signature-img{display:block;width:100%;max-width:360px;height:auto;margin-top:20px;margin-bottom:4px} .about-brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:24px;text-decoration:none;margin-top:0} .about-brand img{height:28px;width:auto;display:block;margin-left:0} .about-brand .tagline{font-size:12.5px;font-style:italic;color:var(--silver);letter-spacing:.03em} .tags{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 30px} .tag{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;color:var(--mist)} .stats-row{display:flex;gap:40px;margin-top:80px;padding-top:50px;border-top:1px solid var(--line)} .stats-row .stat{flex:1} .stats-row b{display:block;font-size:clamp(26px,3.2vw,40px);font-weight:600;color:var(--paper); margin-bottom:10px;letter-spacing:-.01em} .stats-row span{font-size:14px;color:var(--silver);display:block;max-width:240px} .principles{margin-top:64px} .principles h3{margin-bottom:22px} .principle-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .principle-grid p{font-size:15.5px;color:var(--mist);padding-left:18px;border-left:2px solid var(--orange)} @media(max-width:900px){.about-grid{grid-template-columns:1fr}.about-left{align-items:center;max-width:420px;margin:0 auto} .signature-img{max-width:300px}.stats-row{flex-direction:column;gap:28px}.principle-grid{grid-template-columns:1fr}} /* ---------- engage (process) ---------- */ .process-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;margin-top:54px;align-items:start} .process-grid .photo{border-radius:18px;overflow:hidden;border:1px solid var(--line);position:sticky;top:110px} .steps-col{display:flex;flex-direction:column} .step{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)} .step .n{font-size:14px;color:var(--orange);font-weight:700;letter-spacing:.1em} .step h3{margin-bottom:6px} .step p{color:var(--silver);font-size:15.5px} .nextstep{padding-top:34px} .nextstep p{color:var(--silver);margin-bottom:16px;font-size:16px} .nextstep p.bold{color:var(--paper);font-weight:500} @media(max-width:900px){.process-grid{grid-template-columns:1fr}.process-grid .photo{position:static;max-width:420px;margin:0 auto}} /* ---------- connect (cta) ---------- */ #connect{border-top:1px solid var(--line);overflow:hidden} #connect .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;padding:30px 0} #connect p{color:var(--silver);margin-bottom:18px;max-width:540px} #connect ul{list-style:none;margin:24px 0;display:grid;gap:14px} #connect li{display:flex;gap:14px;align-items:baseline;color:var(--mist)} #connect li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange); flex:none;transform:translateY(-2px)} .form{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:38px 34px;display:grid;gap:18px; scroll-margin-top:104px} @media(max-width:760px){.form{scroll-margin-top:90px}} .form label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver);font-weight:600} .form input,.form select,.form textarea{width:100%;margin-top:8px;background:var(--ink); border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--paper); font-family:inherit;font-size:15.5px} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--orange)} .form textarea{min-height:120px;resize:vertical} .form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form .note{font-size:13px;color:var(--silver)} .form .ok{display:none;color:var(--paper);background:rgba(232,97,26,.12); border:1px solid var(--orange);border-radius:10px;padding:16px;font-size:15px} .form .req{color:var(--orange);font-style:normal} .tel-wrap{display:flex;align-items:stretch;margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--ink)} .tel-wrap:focus-within{border-color:var(--orange)} .dial-prefix{display:flex;align-items:center;padding:0 12px;font-size:15px;color:var(--orange);font-weight:600;white-space:nowrap;border-right:1px solid var(--line);background:rgba(232,97,26,.06);min-width:52px} .tel-wrap input{margin-top:0;border:none;border-radius:0;background:transparent;flex:1} .tel-wrap input:focus{outline:none;border:none} .consent-label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:13.5px;color:var(--silver);line-height:1.5} .consent-label input[type="checkbox"]{flex:none;width:16px;height:16px;margin-top:3px;accent-color:var(--orange);cursor:pointer} .btn:disabled{opacity:.4;cursor:not-allowed} @media(max-width:900px){#connect .grid{grid-template-columns:1fr}.form .two{grid-template-columns:1fr}} /* ---------- scroll companion ball ---------- */ #scrollBall{ position:fixed;right:22px;z-index:200;pointer-events:auto;cursor:pointer; width:28px;height:28px; /* anchor to the visible viewport's bottom edge (not top:calc(100vh-...)) — avoids mis-placement on mobile when the browser's address bar shows/hides and 100vh stops matching the actually-visible viewport */ bottom:25px; } .ball-popup{ position:absolute;left:38px;bottom:2px;width:220px; background:var(--coal);border:1px solid var(--orange);border-radius:12px; padding:14px 16px;font-size:13px;line-height:1.55;color:var(--paper); box-shadow:0 12px 30px rgba(0,0,0,.45); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .22s ease,transform .22s ease,visibility .22s; pointer-events:none; } .ball-popup-line2{ display:block;margin-top:8px;color:var(--orange);font-style:italic;font-weight:600; } .ball-popup::after{ content:'';position:absolute;left:-6px;bottom:10px; width:11px;height:11px;background:var(--coal); border-left:1px solid var(--orange);border-bottom:1px solid var(--orange); transform:rotate(45deg); } #scrollBall.settled:hover .ball-popup, #scrollBall.settled:focus-visible .ball-popup, #scrollBall.settled.popup-open .ball-popup{ opacity:1;visibility:visible;transform:translateY(0) } @media(max-width:600px){ .ball-popup{right:auto;left:50%;transform:translate(-50%,6px);bottom:38px;width:200px} .ball-popup::after{right:auto;left:50%;bottom:-6px;margin-left:-6px; border-right:none;border-bottom:none;border-left:1px solid var(--orange);border-top:1px solid var(--orange); transform:rotate(-45deg)} #scrollBall.settled:hover .ball-popup, #scrollBall.settled:focus-visible .ball-popup, #scrollBall.settled.popup-open .ball-popup{transform:translate(-50%,0)} } .ball-bounce{ position:absolute;inset:0; /* idle vertical bob by default — feels alive even with no JS; JS removes this once scroll-driven behaviour takes over */ animation:ballIdleY 3s ease-in-out infinite; will-change:transform; } @keyframes ballIdleY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} } .ball-core{ position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 32% 28%,#ffcb9e,var(--orange) 55%,#b3490f 100%); box-shadow:0 4px 14px rgba(0,0,0,.5),inset -2px -3px 6px rgba(0,0,0,.35); /* idle rotation + size pulse by default — same lifecycle as ballIdleY above. The scale pulse is intentionally obvious so the ball reads as "alive" even at a glance, with no JS required. */ animation:ballIdleRotate 3s ease-in-out infinite; will-change:transform; } @keyframes ballIdleRotate{ 0%,100%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(10deg) scale(1.18)} } .js #scrollBall.active:not(.falling):not(.settling) .ball-bounce, .js #scrollBall.active:not(.falling):not(.settling) .ball-core{animation:none} /* full-frame drop: ball appears at the top of the frame and falls to the floor while scrolling. Only the outer element moves (via bottom); the inner element spins as it falls. */ #scrollBall.falling{ animation:ballFallY .85s cubic-bezier(.4,0,.6,1) forwards; } @keyframes ballFallY{ 0% {bottom:calc(100vh - 28px)} 100%{bottom:25px} } #scrollBall.falling .ball-bounce{animation:none} #scrollBall.falling .ball-core{ animation:ballFallSpin .85s cubic-bezier(.4,0,.6,1) forwards; } @keyframes ballFallSpin{ 0% {transform:rotate(0deg)} 82% {transform:rotate(330deg)} 100%{transform:rotate(345deg)} } /* once scrolling stops: the outer element rolls left at a steady pace (easing gently to a stop); the middle element independently bounces vertically with decaying height (translateY only — no rotation, so the bounce stays on a true vertical axis regardless of roll progress); the inner element spins for the visual "rolling" effect. The three combine into a smooth, curved bouncing-roll with no off-axis dipping. */ #scrollBall.settling{ animation:ballRollX 6s ease forwards; } @keyframes ballRollX{ 0% {transform:translateX(0); animation-timing-function:linear} 90% {transform:translateX(calc(-90vw + 65px)); animation-timing-function:ease-out} 100%{transform:translateX(calc(-100vw + 72px))} } #scrollBall.settling .ball-bounce{ animation:ballBounceY 6s ease forwards; } @keyframes ballBounceY{ /* four decaying bounces — each a smooth ease-out-up / ease-in-down arc */ 0% {transform:translateY(0); animation-timing-function:ease-out} 10% {transform:translateY(-130px);animation-timing-function:ease-in} 20% {transform:translateY(0); animation-timing-function:ease-out} 28.5% {transform:translateY(-80px); animation-timing-function:ease-in} 36.5% {transform:translateY(0); animation-timing-function:ease-out} 42.5% {transform:translateY(-45px);animation-timing-function:ease-in} 48.5% {transform:translateY(0); animation-timing-function:ease-out} 52.5% {transform:translateY(-20px);animation-timing-function:ease-in} 56%,100%{transform:translateY(0)} } #scrollBall.settling .ball-core{ animation:ballSpin 6s ease forwards; } @keyframes ballSpin{ 0% {transform:rotate(0deg); animation-timing-function:linear} 90% {transform:rotate(-936deg);animation-timing-function:ease-out} 100%{transform:rotate(-1040deg)} } @media(prefers-reduced-motion:reduce){#scrollBall{display:none}} /* ---------- footer ---------- */ footer{padding:70px 0 50px;border-top:1px solid var(--line)} footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:60px} footer nav{display:flex;gap:28px;font-size:14px;color:var(--silver);flex-wrap:wrap;align-items:flex-start} footer nav a:hover{color:var(--paper)} footer .contact-info{display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--silver)} footer .contact-info a{display:flex;align-items:center;gap:10px;transition:color .2s} footer .contact-info a:hover{color:var(--paper)} footer .contact-info svg{width:18px;height:18px;flex:none;stroke:var(--orange);fill:none; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--orange)} footer .base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; font-size:13px;color:#6c6e74;border-top:1px solid var(--line);padding-top:28px} @media(max-width:760px){footer .top{flex-direction:column;gap:28px}} /* ---------- multi-page additions ---------- */ .page-main{padding-top:88px} @media(max-width:760px){.page-main{padding-top:78px}} .page-main > section:first-child{padding-top:40px} @media(max-width:760px){.page-main > section:first-child{padding-top:28px}} /* active-page indicator on nav tabs (desktop links, mobile menu, footer) */ .nav .links a[aria-current="page"], .mobile-menu a[aria-current="page"], footer nav a[aria-current="page"]{ color:var(--orange); } .nav .links a[aria-current="page"]{ position:relative; } .nav .links a[aria-current="page"]::after{ content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--orange); } /* ---------- The Exchange (book / workshops / articles) ---------- */ #exchange-intro .lead{margin-top:18px} #book .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} @media(max-width:900px){#book .grid{grid-template-columns:1fr}} .exchange-placeholder{ aspect-ratio:4/5;border-radius:16px;border:1px dashed var(--line); background:var(--card);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:14px;max-width:340px } .exchange-placeholder .ph-icon{font-size:48px;opacity:.5} .exchange-placeholder .ph-label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)} .book-cover-wrap{max-width:340px} .book-cover{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.18); transform:rotate(-4deg); box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 70px rgba(0,0,0,.6),0 0 50px rgba(232,97,26,.08)} .book-cover img{width:100%;height:auto;display:block} .book-subtitle{color:var(--silver);font-style:italic;font-size:17px;margin-top:-6px} .book-tagline{color:var(--paper);font-weight:500;font-size:16px} .book-blurb{ border-left:2px solid var(--orange);padding-left:20px;margin:22px 0 18px } .book-blurb p{color:var(--mist);font-style:italic;font-size:15px;line-height:1.7;margin-bottom:10px} .book-blurb cite{color:var(--orange);font-style:normal;font-size:13.5px;font-weight:600} .coming-soon{ display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-style:italic; font-size:15px;margin-top:8px } .coming-soon::before{ content:'';width:7px;height:7px;border-radius:50%;background:var(--orange); animation:pulseSoon 1.8s ease-in-out infinite } @keyframes pulseSoon{0%,100%{opacity:.4}50%{opacity:1}} .exchange-empty{ margin-top:36px;border:1px solid var(--line);border-radius:16px;background:var(--card); padding:36px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:18px } .exchange-empty .coming-soon{margin-top:0} /* Event cards (Workshops & Webinars) */ .event-card{ margin-top:24px;border:1px solid var(--line);border-radius:16px;background:var(--card); padding:28px 30px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center } .event-card .event-date{ display:flex;flex-direction:column;align-items:center;justify-content:center; width:64px;height:64px;border-radius:12px;background:var(--ink);border:1px solid var(--line);flex:none } .event-card .ev-day{font-size:22px;font-weight:700;color:var(--paper);line-height:1.1} .event-card .ev-month{font-size:11px;letter-spacing:.08em;color:var(--orange);font-weight:600} .event-tag{ display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--orange);margin-bottom:6px } .event-card h3{font-size:19px;margin-bottom:6px} .event-card p{color:var(--silver);font-size:14.5px;margin-bottom:10px} .event-meta{display:flex;gap:8px;font-size:13px;color:var(--mist)} @media(max-width:700px){.event-card{grid-template-columns:1fr;text-align:left}.event-card .event-date{flex-direction:row;width:auto;gap:8px;padding:6px 14px;height:auto}} /* News items */ .news-item{ display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line) } .news-item:first-of-type{margin-top:24px} .news-date{font-size:13px;color:var(--orange);flex:none;width:96px} .news-item p{color:var(--mist);font-size:15px} @media(max-width:600px){.news-item{flex-direction:column;gap:4px}.news-date{width:auto}} /* Article cards */ #articles .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px} @media(max-width:980px){#articles .cards{grid-template-columns:1fr 1fr}} @media(max-width:680px){#articles .cards{grid-template-columns:1fr}} .article-card{ border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden; display:flex;flex-direction:column } .article-img{aspect-ratio:16/10;overflow:hidden;background:var(--ink)} .article-img img{width:100%;height:100%;object-fit:cover;display:block} .article-card .article-date{font-size:12px;color:var(--orange);letter-spacing:.04em; display:block;margin:20px 24px 6px} .article-card h3{font-size:18px;margin:0 24px 8px;line-height:1.3} .article-card p{color:var(--silver);font-size:14.5px;margin:0 24px 16px;flex:1} .article-link{font-size:14px;color:var(--orange);font-weight:600;margin:0 24px 22px;display:inline-block} /* ---------- Article read-more modal ---------- */ .article-modal{ position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center; padding:40px 20px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s; } .article-modal.open{opacity:1;visibility:visible} .article-modal-backdrop{ position:absolute;inset:0;background:rgba(8,8,9,.82);backdrop-filter:blur(3px); } .article-modal-panel{ position:relative;z-index:1;background:var(--coal);border:1px solid var(--line);border-radius:18px; max-width:680px;width:100%;max-height:84vh;overflow-y:auto;padding:48px 44px; transform:translateY(18px);transition:transform .3s ease; } .article-modal.open .article-modal-panel{transform:translateY(0)} .article-modal-close{ position:sticky;float:right;top:0;margin:-8px -8px 0 16px;background:var(--ink); border:1px solid var(--line);border-radius:50%;width:36px;height:36px;color:var(--paper); font-size:14px;cursor:pointer;transition:border-color .2s; } .article-modal-close:hover{border-color:var(--orange);color:var(--orange)} .article-modal-body .article-date{font-size:13px;color:var(--orange);letter-spacing:.04em} .article-modal-body h2{font-size:clamp(24px,3vw,32px);margin:14px 0 22px;line-height:1.25} .article-modal-body p{color:var(--mist);font-size:16px;line-height:1.75;margin-bottom:18px} .article-modal-body img{width:100%;border-radius:12px;margin:8px 0 22px;display:block} @media(max-width:600px){.article-modal-panel{padding:32px 24px}} /* semantic H1 that keeps the visual size of the site's H2 (SEO fix, zero visual change) */ h1.h1-as-h2{font-size:clamp(30px,4.2vw,50px);line-height:1.12;margin-bottom:24px;font-weight:560}