/* ============================================================ bolda. — institutional one-pager Brand palette taken from "MANUAL DE MARCA bolda." Primary : green #80DC10 · ink #151515 · white #FFFFFF dark grey #3C3C3C · light grey #C6C6C6 Secondary: violet #5550F2 · magenta #A6036C Type : Madani Arabic (display, licensed) / Poppins (system) THEMING Brand hues are constants. Everything else is a semantic token redefined per theme, so the whole page flips from one block. Theme lives on . ============================================================ */ /* ---------- 1. Brand constants ---------- */ :root{ --green:#80DC10; /* brand primary */ --green-deep:#63A90D; /* dark-mode chart series (validated) */ --green-ink:#437707; /* light-mode small text, 5.4:1 on white*/ --green-mid:#519009; /* light-mode display text, 3.9:1 */ --violet:#5550F2; --violet-light:#635FF5; --magenta:#A6036C; --ink:#151515; --pure-white:#FFFFFF; --font-display:"Madani Arabic","Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --container:1240px; --gutter:clamp(20px,5vw,48px); --radius:18px; --radius-lg:28px; --ease:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --nav-h:76px; } /* ---------- 2. Theme tokens ---------- */ :root, :root[data-theme="dark"]{ color-scheme:dark; --bg:#0B0B0B; --surface:#111111; --surface-2:#181818; --input-bg:#161616; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20); --heading:#FFFFFF; --text:#F2F2F2; --text-soft:#C6C6C6; --text-muted:#A6A6A6; --text-faint:#8A8A8A; --accent:var(--green); --accent-display:var(--green); --btn-hover-bg:#FFFFFF; --btn-hover-fg:#151515; --ph-stripe:rgba(255,255,255,.028); --stroke-num:rgba(255,255,255,.22); --nav-bg:rgba(11,11,11,.78); --scrim:rgba(11,11,11,.94); --shadow:0 30px 70px -34px rgba(0,0,0,.6); --glow-a:rgba(128,220,16,.20); --glow-b:rgba(85,80,242,.20); --coil:rgba(128,220,16,.42); /* chart — validated against surface #111111 */ --series-1:#63A90D; --series-2:#635FF5; --grid:rgba(255,255,255,.09); } :root[data-theme="light"]{ color-scheme:light; --bg:#FFFFFF; --surface:#F5F5F3; --surface-2:#EBEBE7; --input-bg:#FFFFFF; --line:rgba(21,21,21,.12); --line-strong:rgba(21,21,21,.22); --heading:#151515; --text:#232323; --text-soft:#3C3C3C; --text-muted:#5C5C5C; --text-faint:#6B6B6B; --accent:var(--green-ink); --accent-display:var(--green-mid); --btn-hover-bg:#151515; --btn-hover-fg:#FFFFFF; --ph-stripe:rgba(21,21,21,.04); --stroke-num:rgba(21,21,21,.22); --nav-bg:rgba(255,255,255,.82); --scrim:rgba(255,255,255,.94); --shadow:0 30px 70px -40px rgba(21,21,21,.26); --glow-a:rgba(128,220,16,.26); --glow-b:rgba(85,80,242,.14); --coil:rgba(99,169,13,.40); /* chart — validated against surface #F5F5F3 */ --series-1:#519009; --series-2:#5550F2; --grid:rgba(21,21,21,.10); } /* ---------- 3. Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); /* `clip` (not `hidden`) so position:sticky keeps working inside */ overflow-x:clip; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:clamp(15px,1.05vw,16.5px); line-height:1.7; font-weight:400; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .4s var(--ease),color .4s var(--ease); } body.is-locked{overflow:hidden;} img{max-width:100%;display:block;height:auto;} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--heading);} p{margin:0 0 1em;} p:last-child{margin-bottom:0;} a{color:inherit;text-decoration:none;} ul,ol{margin:0;padding:0;list-style:none;} button,input,select,textarea{font:inherit;color:inherit;} button{background:none;border:0;cursor:pointer;} ::selection{background:var(--green);color:var(--ink);} .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .skip-link{ position:fixed;top:-100px;left:16px;z-index:2000; background:var(--green);color:var(--ink); padding:12px 20px;border-radius:10px;font-weight:700; transition:top .25s var(--ease); } .skip-link:focus{top:16px;} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;} /* Logo swaps with the theme */ .logo-dark{display:none;} :root[data-theme="light"] .logo-dark{display:block;} :root[data-theme="light"] .logo-light{display:none;} /* ---------- 4. Preloader ---------- */ .preloader{ position:fixed;inset:0;z-index:3000; background:var(--bg); display:grid;place-items:center; transition:opacity .6s var(--ease),visibility .6s var(--ease); } .preloader.is-done{opacity:0;visibility:hidden;} .preloader__inner{display:grid;justify-items:center;gap:26px;} .preloader__logo{width:clamp(140px,26vw,200px);animation:pl-pop .9s var(--ease) both;} .preloader__bar{ width:min(240px,50vw);height:3px;border-radius:99px; background:var(--line-strong);overflow:hidden; } .preloader__bar span{ display:block;height:100%;width:0%; background:var(--green);border-radius:99px; transition:width .3s linear; } @keyframes pl-pop{ from{opacity:0;transform:translateY(14px) scale(.94);} to{opacity:1;transform:none;} } /* ---------- 5. Cursor + scroll progress ---------- */ .cursor{ position:fixed;top:0;left:0;z-index:2500; width:26px;height:26px;border-radius:50%; border:1.5px solid var(--green); pointer-events:none; transform:translate3d(-100px,-100px,0); transition:width .28s var(--ease),height .28s var(--ease), background-color .28s var(--ease),border-color .28s var(--ease),opacity .3s; display:none; } .cursor.is-active{display:grid;place-items:center;} .cursor.is-hover{width:64px;height:64px;background:var(--green);border-color:var(--green);} .cursor.is-hover .cursor__label{opacity:1;} .cursor__label{ font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--ink); opacity:0;transition:opacity .2s var(--ease);white-space:nowrap;text-transform:uppercase; } .scroll-progress{ position:fixed;top:0;left:0;z-index:1200; height:3px;width:0%; background:linear-gradient(90deg,var(--green),var(--violet)); transition:width .1s linear; } /* ---------- 6. Navigation ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:1100; height:var(--nav-h); display:flex;align-items:center; transition:background-color .4s var(--ease),backdrop-filter .4s var(--ease), border-color .4s var(--ease),height .4s var(--ease); border-bottom:1px solid transparent; } .nav.is-stuck{ height:64px; background:var(--nav-bg); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line); } .nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;} .nav__logo img{width:clamp(90px,9vw,116px);transition:transform .35s var(--ease);} .nav__logo:hover img{transform:scale(1.05) rotate(-1deg);} .nav__links{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px);} .nav__links > a:not(.nav__cta){ position:relative; font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--text-muted); padding:6px 2px;transition:color .3s var(--ease); } .nav__links > a:not(.nav__cta)::after{ content:"";position:absolute;left:0;bottom:0; width:100%;height:2px;background:var(--green); transform:scaleX(0);transform-origin:right; transition:transform .38s var(--ease); } .nav__links > a:not(.nav__cta):hover, .nav__links > a.is-current{color:var(--heading);} .nav__links > a:not(.nav__cta):hover::after, .nav__links > a.is-current::after{transform:scaleX(1);transform-origin:left;} .nav__tools{display:flex;align-items:center;gap:10px;flex:none;} /* Theme toggle */ .theme-toggle{ position:relative;flex:none; width:46px;height:46px;border-radius:50%; border:1px solid var(--line-strong); display:grid;place-items:center; color:var(--heading); transition:border-color .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease); overflow:hidden; } .theme-toggle:hover{border-color:var(--green);background:var(--surface);transform:translateY(-2px);} .theme-toggle svg{ position:absolute;width:19px;height:19px; transition:transform .5s var(--ease),opacity .35s var(--ease); } .theme-toggle .icon-sun{transform:translateY(0) rotate(0);opacity:1;} .theme-toggle .icon-moon{transform:translateY(140%) rotate(-70deg);opacity:0;} :root[data-theme="light"] .theme-toggle .icon-sun{transform:translateY(-140%) rotate(70deg);opacity:0;} :root[data-theme="light"] .theme-toggle .icon-moon{transform:translateY(0) rotate(0);opacity:1;} .nav__burger{ display:none;width:44px;height:44px; border-radius:12px;border:1px solid var(--line-strong); position:relative;flex:none; } .nav__burger span{ position:absolute;left:12px;width:20px;height:2px;border-radius:2px; background:var(--heading);transition:transform .4s var(--ease),opacity .3s var(--ease); } .nav__burger span:nth-child(1){top:18px;} .nav__burger span:nth-child(2){top:25px;} .nav__burger.is-open span:nth-child(1){transform:translateY(3.5px) rotate(45deg);} .nav__burger.is-open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);} /* ---------- 7. Buttons ---------- */ .btn{ --btn-bg:var(--green); --btn-fg:var(--ink); --hover-bg:var(--btn-hover-bg); --hover-fg:var(--btn-hover-fg); position:relative; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:99px; font-weight:700;font-size:14px;letter-spacing:.01em; background:var(--btn-bg);color:var(--btn-fg); overflow:hidden;isolation:isolate; transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease); will-change:transform; } .btn > span,.btn > svg{position:relative;z-index:2;} .btn svg{width:18px;height:18px;transition:transform .35s var(--ease);} .btn::before{ content:"";position:absolute;inset:0;z-index:1; background:var(--hover-bg); transform:translateY(101%); transition:transform .45s var(--ease); } .btn:hover::before{transform:translateY(0);} .btn:hover{color:var(--hover-fg);box-shadow:0 14px 34px -14px rgba(128,220,16,.6);} .btn:hover svg{transform:translateX(4px);} .btn:active{transform:scale(.97);} .btn--green{--btn-bg:var(--green);--btn-fg:var(--ink);} .btn--ghost{ --btn-bg:transparent;--btn-fg:var(--heading); --hover-bg:var(--green);--hover-fg:var(--ink); border:1px solid var(--line-strong); } .btn--ghost:hover{box-shadow:none;} .btn--sm{padding:10px 20px;font-size:13px;} .btn--lg{padding:17px 34px;font-size:15px;} .btn--block{width:100%;} /* ---------- 8. Shared bits ---------- */ .section{padding:clamp(80px,11vw,150px) 0;position:relative;} .section__head{margin-bottom:clamp(38px,5vw,66px);} .section__head--split{ display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,60px);align-items:end; } .section__head--center{text-align:center;display:grid;justify-items:center;} .section__title{ font-size:clamp(2.4rem,6.4vw,4.6rem); letter-spacing:-.045em; } /* Used on the green section — ink reads, white would not (1.9:1 on #80DC10) */ .section__title--light{color:var(--ink);} .section__desc{color:var(--text-muted);max-width:46ch;font-size:clamp(15px,1.15vw,17px);} .lede{font-size:clamp(16px,1.4vw,19px);color:var(--text-soft);line-height:1.75;} .lede strong{color:var(--heading);font-weight:700;} /* Display-size accent — a brighter green is legal here (3:1 for large text) */ .accent{color:var(--accent-display);} /* Accent word on the green section — magenta ties it to the ribbons */ .accent-white{color:var(--magenta);} .brandword{font-weight:800;} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin:0 0 14px; } .eyebrow--light{color:var(--ink);} .dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;} .dot--white{background:var(--ink);} .dash{width:26px;height:8px;border-radius:2px;background:var(--green);flex:none;} /* Photo placeholders ---------------------------------------- */ .ph{ position:relative; display:grid;place-content:center;justify-items:center;gap:6px; background: repeating-linear-gradient(45deg,var(--ph-stripe) 0 12px,transparent 12px 24px), var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--radius); color:var(--text-faint); text-align:center;padding:22px; overflow:hidden; transition:border-color .4s var(--ease),background-color .4s var(--ease); } .ph::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 50%,rgba(128,220,16,.14),transparent 62%); opacity:0;transition:opacity .5s var(--ease); } .ph:hover{border-color:var(--green);} .ph:hover::after{opacity:1;} .ph__tag{ position:relative;z-index:1; font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--accent); } .ph__dim{ position:relative;z-index:1; font-family:var(--font-display);font-weight:800;font-size:clamp(15px,1.5vw,20px); color:var(--text-soft);letter-spacing:-.01em; } .ph__hint{position:relative;z-index:1;font-size:12px;color:var(--text-faint);} .ph--portrait{aspect-ratio:4/5;} .ph--wide{aspect-ratio:16/10.5;} .ph--fill{position:absolute;inset:0;border-radius:0;border:0;} .ph--fill::before{ content:"";position:absolute;inset:14px;border:1px dashed var(--line-strong);border-radius:12px; } /* ---------- 9. Hero ---------- */ .hero{ position:relative; min-height:100svh; display:flex;align-items:center; padding:calc(var(--nav-h) + 60px) 0 90px; overflow:hidden; } .hero__inner{position:relative;z-index:3;width:100%;} .hero__glow{ position:absolute;z-index:1; width:min(760px,90vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,var(--glow-a),transparent 66%); top:-16%;right:-14%; filter:blur(30px); animation:float 15s var(--ease-in-out) infinite alternate; } .hero__glow--violet{ background:radial-gradient(circle,var(--glow-b),transparent 66%); top:auto;bottom:-24%;left:-16%;right:auto; width:min(620px,80vw); animation-duration:19s;animation-direction:alternate-reverse; } @keyframes float{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-4%,6%,0) scale(1.12);} } .coil{ position:absolute;z-index:2; width:min(460px,55vw); color:var(--coil); pointer-events:none; } .coil--tl{top:calc(var(--nav-h) - 66px);left:-11%;animation:coil-drift 13s var(--ease-in-out) infinite alternate;} .coil--br{bottom:4%;right:-9%;animation:coil-drift 17s var(--ease-in-out) infinite alternate-reverse;} .coil ellipse{ stroke-dasharray:1200;stroke-dashoffset:1200; animation:coil-draw 2.4s var(--ease) forwards; } .coil ellipse:nth-child(2){animation-delay:.14s;} .coil ellipse:nth-child(3){animation-delay:.28s;} .coil ellipse:nth-child(4){animation-delay:.42s;} @keyframes coil-draw{to{stroke-dashoffset:0;}} @keyframes coil-drift{ from{transform:translate3d(0,0,0) rotate(0deg);} to{transform:translate3d(16px,-18px,0) rotate(3deg);} } .hero__eyebrow{ display:flex;align-items:center;gap:12px; margin-bottom:clamp(18px,2.4vw,28px); } .hero__eyebrow p{ margin:0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--text-soft); } .hero__title{ font-size:clamp(3rem,10.5vw,9.2rem); line-height:.93;letter-spacing:-.05em; margin-bottom:clamp(28px,4vw,52px); } .hero__title .line{display:block;overflow:hidden;padding-bottom:.06em;} .hero__title .w{display:inline-block;} /* The hidden start state is gated on `.js` so the headline can never be left invisible if the script fails to load. */ .js .hero__title .w{ transform:translateY(110%) rotate(4deg); opacity:0; } .is-ready .hero__title .w{ animation:word-up .95s var(--ease) forwards; } .is-ready .hero__title .line:nth-child(1) .w:nth-child(1){animation-delay:.05s;} .is-ready .hero__title .line:nth-child(1) .w:nth-child(2){animation-delay:.12s;} .is-ready .hero__title .line:nth-child(1) .w:nth-child(3){animation-delay:.19s;} .is-ready .hero__title .line:nth-child(2) .w:nth-child(1){animation-delay:.26s;} .is-ready .hero__title .line:nth-child(2) .w:nth-child(2){animation-delay:.33s;} .is-ready .hero__title .line:nth-child(2) .w:nth-child(3){animation-delay:.40s;} @keyframes word-up{to{transform:none;opacity:1;}} .hero__grid{ display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,54px);align-items:end; padding-top:clamp(4px,1vw,12px); border-top:1px solid var(--line); } .hero__lede{max-width:52ch;color:var(--text-soft);font-size:clamp(15px,1.25vw,18px);padding-top:26px;} .hero__lede strong{color:var(--heading);} .hero__lede em{color:var(--accent);font-style:normal;font-weight:600;} .hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;padding-top:26px;} .hero__stats{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,40px); margin-top:clamp(38px,5vw,68px); padding-top:clamp(22px,3vw,34px); border-top:1px solid var(--line); } .stat{display:grid;gap:6px;} .stat__num{ font-family:var(--font-display);font-weight:800; font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1; color:var(--accent-display);letter-spacing:-.04em; } .stat__label{font-size:12.5px;color:var(--text-muted);line-height:1.5;} .hero__scroll{ position:absolute;left:50%;bottom:26px;transform:translateX(-50%); z-index:4;display:grid;justify-items:center;gap:8px; font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--text-muted); } .hero__scroll-line{ width:1px;height:44px;background:linear-gradient(var(--green),transparent); position:relative;overflow:hidden; } .hero__scroll-line::after{ content:"";position:absolute;top:0;left:0;width:100%;height:14px;background:var(--green); animation:scroll-hint 1.9s var(--ease-in-out) infinite; } @keyframes scroll-hint{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(340%);} } /* ---------- 10. Marquee ---------- */ .marquee{ overflow:hidden;position:relative; padding:16px 0; border-block:1px solid transparent; } .marquee--green{ background:var(--green);color:var(--ink); transform:rotate(-1.4deg) scale(1.04); margin-block:-14px; } .marquee--dark{ background:var(--surface);color:var(--heading); border-color:var(--line); } .marquee__track{display:flex;width:max-content;animation:scroll-x 34s linear infinite;} .marquee__track--rev{animation-direction:reverse;animation-duration:42s;} .marquee:hover .marquee__track{animation-play-state:paused;} .marquee__group{ display:flex;align-items:center;gap:22px;padding-right:22px; font-family:var(--font-display);font-weight:800; font-size:clamp(1.1rem,2.4vw,1.9rem);letter-spacing:-.02em; white-space:nowrap; } .marquee__group i{font-style:normal;opacity:.55;font-size:.8em;} .marquee__group i.sq{ width:10px;height:10px;background:var(--green);border-radius:2px;opacity:1; } @keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ---------- 11. About ---------- */ .about__grid{ display:grid;grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,74px);align-items:start; } .about__blocks{display:grid;gap:26px;margin-top:clamp(28px,3.4vw,42px);} .about__block{ padding:26px 28px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--line); transition:transform .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease); } .about__block:hover{ transform:translateY(-4px); border-color:rgba(128,220,16,.42); background:var(--surface-2); } .about__block h3{ display:flex;align-items:center;gap:10px; font-size:clamp(1.1rem,1.8vw,1.4rem);margin-bottom:10px; } .about__block p{color:var(--text-muted);font-size:15px;} .about__block strong{color:var(--heading);} .about__block em{color:var(--accent);font-style:normal;font-weight:600;} .about__media{position:sticky;top:calc(var(--nav-h) + 26px);display:grid;gap:16px;} .about__badge{ display:flex;align-items:center;gap:14px; padding:16px 20px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--line); } .about__badge img{width:40px;flex:none;border-radius:9px;} .about__badge p{margin:0;font-size:13px;color:var(--text-muted);} .about__badge strong{color:var(--accent);font-family:var(--font-display);font-size:15px;} /* ---------- 12. Services ---------- */ .services__list{border-top:1px solid var(--line);} .service{border-bottom:1px solid var(--line);position:relative;} .service::before{ content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(90deg,rgba(128,220,16,.10),transparent 62%); transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease); } .service:hover::before,.service.is-open::before{transform:scaleX(1);} .service__head{ position:relative;z-index:1; width:100%;display:flex;align-items:center;gap:clamp(14px,2.6vw,34px); padding:clamp(20px,2.6vw,32px) clamp(4px,1.4vw,18px); text-align:left; } .service__num{ font-family:var(--font-display);font-weight:800;font-size:13px; color:var(--accent);letter-spacing:.08em;flex:none;padding-top:.3em; transition:transform .45s var(--ease); } .service:hover .service__num{transform:translateX(4px);} .service__name{ flex:1; font-size:clamp(1.25rem,3.1vw,2.35rem); letter-spacing:-.035em; transition:color .35s var(--ease),transform .5s var(--ease); } .service:hover .service__name{color:var(--accent);transform:translateX(8px);} .service__flag{ flex:none; font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; padding:6px 12px;border-radius:99px; background:var(--magenta);color:#FFFFFF; } .service__icon{ flex:none;position:relative;width:38px;height:38px;border-radius:50%; border:1px solid var(--line-strong); transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease); } .service__icon::before,.service__icon::after{ content:"";position:absolute;top:50%;left:50%; width:13px;height:2px;border-radius:2px;background:var(--heading); transform:translate(-50%,-50%); transition:transform .4s var(--ease),background-color .4s var(--ease); } .service__icon::after{transform:translate(-50%,-50%) rotate(90deg);} .service:hover .service__icon{border-color:var(--green);transform:rotate(90deg);} .service.is-open .service__icon{background:var(--green);border-color:var(--green);transform:rotate(180deg);} .service.is-open .service__icon::before, .service.is-open .service__icon::after{background:var(--ink);} .service.is-open .service__icon::after{transform:translate(-50%,-50%) rotate(0deg);} .service__body{ position:relative;z-index:1; display:grid;grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); } .service.is-open .service__body{grid-template-rows:1fr;} .service__body-inner{overflow:hidden;} .service__body-inner > *{ opacity:0;transform:translateY(10px); transition:opacity .45s var(--ease) .1s,transform .45s var(--ease) .1s; } .service.is-open .service__body-inner > *{opacity:1;transform:none;} .service__body-inner p{ max-width:70ch;color:var(--text-muted);font-size:15px; padding:0 clamp(4px,1.4vw,18px) 16px clamp(38px,5.4vw,86px); } .service__body-inner strong{color:var(--heading);} .service__body-inner em{color:var(--accent);font-style:normal;font-weight:600;} .tags{ display:flex;flex-wrap:wrap;gap:8px; padding:0 clamp(4px,1.4vw,18px) clamp(22px,2.6vw,32px) clamp(38px,5.4vw,86px); } .tags li{ font-size:12px;font-weight:600;color:var(--text-soft); padding:6px 13px;border-radius:99px; border:1px solid var(--line-strong);background:var(--surface); } /* ---------- 13. Edge (green section — fixed in both themes) ---------- */ .edge{background:var(--green);color:var(--ink);overflow:hidden;} .edge__bg{ position:absolute;inset:0;z-index:0; background: radial-gradient(circle at 84% 8%,rgba(85,80,242,.20),transparent 42%), radial-gradient(circle at 10% 92%,rgba(166,3,108,.16),transparent 42%); pointer-events:none; } .edge .container{position:relative;z-index:1;} .edge__feature{ background:var(--ink);color:#FFFFFF; border-radius:var(--radius-lg); padding:clamp(38px,5vw,58px) clamp(24px,4vw,54px) clamp(30px,4vw,46px); position:relative;margin-top:34px; box-shadow:0 30px 70px -34px rgba(0,0,0,.6); } .edge__feature p{ font-size:clamp(16px,1.6vw,21px);line-height:1.65; max-width:74ch;margin-inline:auto;text-align:center;color:#C6C6C6; } .edge__feature strong{color:var(--green);font-weight:700;} .edge__ribbon{ position:absolute;top:0;left:50%; transform:translate(-50%,-52%) rotate(-2.6deg); background:var(--magenta);color:#FFFFFF; font-family:var(--font-display);font-weight:800; font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.02em; padding:9px 24px;white-space:nowrap; box-shadow:0 12px 28px -14px rgba(166,3,108,.9); } .edge__ribbon--sm{font-size:clamp(.9rem,1.5vw,1.15rem);padding:7px 18px;} .edge__states{ display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px; } .edge__states li{ font-size:12.5px;font-weight:700;letter-spacing:.04em; padding:8px 16px;border-radius:99px; border:1px solid rgba(128,220,16,.4);color:var(--green); background:rgba(128,220,16,.08); transition:background-color .35s var(--ease),transform .35s var(--ease); } .edge__states li:hover{background:var(--green);color:var(--ink);transform:translateY(-3px);} .edge__cols{ display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(22px,3.4vw,44px); margin-top:clamp(52px,6vw,78px); } .edge__card{ position:relative;background:rgba(21,21,21,.06); border:1.5px solid rgba(21,21,21,.16); border-radius:var(--radius-lg); padding:clamp(34px,4vw,46px) clamp(22px,3vw,34px) clamp(26px,3vw,34px); text-align:center; transition:transform .45s var(--ease),background-color .45s var(--ease); } .edge__card:hover{transform:translateY(-6px);background:rgba(21,21,21,.10);} .edge__card p{color:rgba(21,21,21,.82);font-size:15.5px;margin:0;} .edge__card em{font-style:italic;font-weight:600;color:var(--ink);} .edge__strip{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); margin-top:clamp(46px,5.4vw,72px); } /* Dark slots on the green field — reads as a photo well, not a wash */ .edge__strip .ph{ background: repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 12px,transparent 12px 24px), var(--ink); border-color:rgba(21,21,21,.5); color:#8A8A8A; } .edge__strip .ph__tag{color:var(--green);} .edge__strip .ph__dim{color:#C6C6C6;} .edge__strip .ph__hint{color:#8A8A8A;} .edge__strip .ph:hover{border-color:#FFFFFF;} /* ---------- 14. Data / BI section ---------- */ .data{background:var(--surface);border-block:1px solid var(--line);} .data__grid{ display:grid;grid-template-columns:.82fr 1.18fr; gap:clamp(32px,4.5vw,68px);align-items:start; } .data__copy p{color:var(--text-muted);font-size:15.5px;} .data__copy strong{color:var(--heading);} /* Hero figure — exactly one per view, body sans, proportional figures */ .figure-hero{ margin:clamp(26px,3.4vw,38px) 0 clamp(20px,2.6vw,28px); padding-bottom:clamp(20px,2.6vw,28px); border-bottom:1px solid var(--line); } .figure-hero__value{ display:block; font-family:var(--font-body);font-weight:600; font-size:clamp(3.2rem,6.4vw,4.6rem);line-height:1; letter-spacing:-.04em;color:var(--accent-display); } .figure-hero__label{ display:block;margin-top:10px; font-size:14px;color:var(--text-muted);max-width:34ch; } .tiles{display:grid;gap:14px;} .tile{ display:grid;gap:3px; padding:16px 18px;border-radius:14px; background:var(--bg);border:1px solid var(--line); transition:transform .4s var(--ease),border-color .4s var(--ease); } .tile:hover{transform:translateY(-3px);border-color:rgba(128,220,16,.4);} .tile__label{font-size:12px;color:var(--text-muted);letter-spacing:.02em;} .tile__value{ font-family:var(--font-body);font-weight:600; font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.1; letter-spacing:-.02em;color:var(--heading); } /* Chart card ------------------------------------------------- */ .chart{ margin:0; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(20px,2.6vw,30px); } .chart__caption{margin-bottom:16px;} .chart__caption h3{font-size:clamp(1.05rem,1.7vw,1.3rem);margin-bottom:6px;} .chart__caption p{margin:0;font-size:12.5px;color:var(--text-faint);} .chart__legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px;} .chart__legend li{ display:flex;align-items:center;gap:8px; font-size:12.5px;color:var(--text-muted); } .chart__key{width:16px;height:3px;border-radius:2px;flex:none;} .chart__key--1{background:var(--series-1);} .chart__key--2{background:var(--series-2);} .chart__plot{position:relative;} .chart__svg{width:100%;height:auto;display:block;overflow:visible;} .chart__grid line{stroke:var(--grid);stroke-width:1;} .chart__tick{ font-family:var(--font-body);font-size:11px;fill:var(--text-faint); font-variant-numeric:tabular-nums; } .chart__area{opacity:.10;} .chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .chart__line--1{stroke:var(--series-1);} .chart__line--2{stroke:var(--series-2);} .chart__area--1{fill:var(--series-1);} .chart__end{stroke:var(--bg);stroke-width:2;} .chart__end--1{fill:var(--series-1);} .chart__end--2{fill:var(--series-2);} .chart__endlabel{ font-family:var(--font-body);font-size:12px;font-weight:600; fill:var(--heading); } .chart__crosshair{stroke:var(--line-strong);stroke-width:1;opacity:0;} .chart__hoverdot{stroke:var(--bg);stroke-width:2;opacity:0;} /* Draw-in animation. --len is replaced with the real path length by JS; the fallback keeps the line hidden until then instead of flashing. */ .chart__line{--len:2400;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);} .chart.is-drawn .chart__line{ transition:stroke-dashoffset 1.6s var(--ease); stroke-dashoffset:0; } .chart__area,.chart__end,.chart__endlabel{opacity:0;} .chart.is-drawn .chart__area{transition:opacity .8s var(--ease) 1s;opacity:.10;} .chart.is-drawn .chart__end, .chart.is-drawn .chart__endlabel{transition:opacity .5s var(--ease) 1.3s;opacity:1;} .chart__tooltip{ position:absolute;z-index:4;top:0;left:0; min-width:158px;padding:11px 13px; background:var(--bg);border:1px solid var(--line-strong); border-radius:12px;box-shadow:var(--shadow); pointer-events:none;opacity:0; transform:translate(-50%,-118%); transition:opacity .18s var(--ease); } .chart__tooltip.is-shown{opacity:1;} .chart__tooltip-head{ font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint);margin-bottom:7px; } .chart__tooltip-row{ display:flex;align-items:center;gap:8px; font-size:12.5px;color:var(--text-muted); } .chart__tooltip-row + .chart__tooltip-row{margin-top:4px;} .chart__tooltip-row b{ margin-left:auto;color:var(--heading);font-weight:600; font-variant-numeric:tabular-nums; } .chart__foot{ display:flex;flex-wrap:wrap;gap:10px;align-items:center; margin-top:16px;padding-top:14px;border-top:1px solid var(--line); } .chart__toggle{ font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--text-muted); padding:7px 14px;border-radius:99px;border:1px solid var(--line-strong); transition:all .3s var(--ease); } .chart__toggle:hover{color:var(--heading);border-color:var(--green);} .chart__note{margin:0;font-size:11.5px;color:var(--text-faint);margin-left:auto;} .chart__table{ width:100%;border-collapse:collapse;margin-top:16px; font-size:13px;font-variant-numeric:tabular-nums; } .chart__table[hidden]{display:none;} .chart__table caption{ text-align:left;font-size:12px;color:var(--text-faint); padding-bottom:8px; } .chart__table th,.chart__table td{ text-align:right;padding:8px 10px;border-bottom:1px solid var(--line); } .chart__table th:first-child,.chart__table td:first-child{text-align:left;} .chart__table thead th{ color:var(--text-muted);font-weight:600;font-size:12px; letter-spacing:.02em; } .chart__table tbody td{color:var(--text);} .chart__table tbody th{color:var(--text-muted);font-weight:500;} /* ---------- 15. Process ---------- */ .process__list{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px); } .step{ position:relative;padding:clamp(26px,3vw,34px) clamp(20px,2.4vw,28px); border-radius:var(--radius); background:var(--surface);border:1px solid var(--line); overflow:hidden; transition:transform .45s var(--ease),border-color .45s var(--ease); } .step::after{ content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:var(--green);transform:scaleX(0);transform-origin:left; transition:transform .55s var(--ease); } .step:hover{transform:translateY(-6px);border-color:rgba(128,220,16,.4);} .step:hover::after{transform:scaleX(1);} .step__num{ display:block;font-family:var(--font-display);font-weight:800; font-size:clamp(2.6rem,4.4vw,3.4rem);line-height:1; color:transparent;-webkit-text-stroke:1.5px var(--stroke-num); margin-bottom:14px;transition:-webkit-text-stroke-color .45s var(--ease); } .step:hover .step__num{-webkit-text-stroke-color:var(--green);} .step h3{font-size:clamp(1.05rem,1.6vw,1.3rem);margin-bottom:9px;} .step p{font-size:14px;color:var(--text-muted);margin:0;} /* ---------- 16. Work carousel (full-bleed) ---------- */ .work{overflow:hidden;} .work .container{position:relative;z-index:1;} /* Sits outside .container, so it is already full-bleed — no 100vw hack. */ .workcar{ position:relative; overflow:hidden; padding:6px 0; /* fade the edges so cards enter and leave, not pop */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .workcar__track{ display:flex;width:max-content; animation:scroll-x 48s linear infinite; } .workcar:hover .workcar__track, .workcar:focus-within .workcar__track{animation-play-state:paused;} /* The gap lives inside the group (incl. its trailing padding) so the two groups together are exactly 2× one group — which is what -50% assumes. */ .workcar__group{ display:flex;gap:clamp(14px,1.6vw,22px); padding-right:clamp(14px,1.6vw,22px); } .case{ position:relative;flex:none; width:clamp(280px,25vw,400px); aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--surface);border:1px solid var(--line); transition:transform .5s var(--ease),border-color .5s var(--ease); } .case:hover{transform:translateY(-6px);border-color:rgba(128,220,16,.45);} .case__meta{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:20px 22px; background:linear-gradient(transparent,var(--scrim) 62%); transform:translateY(10px);opacity:0; transition:transform .5s var(--ease),opacity .5s var(--ease); } .case:hover .case__meta{transform:none;opacity:1;} .case__meta h3{font-size:1.1rem;margin-bottom:2px;} .case__meta p{margin:0;font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.04em;} .workcar__hint{ display:flex;align-items:center;gap:9px;justify-content:center; margin-top:24px;font-size:12px;color:var(--text-faint); letter-spacing:.08em;text-transform:uppercase;font-weight:600; } .workcar__hint svg{width:15px;height:15px;} /* ---------- 17. Contact ---------- */ .contact{background:var(--surface);border-top:1px solid var(--line);} .contact__grid{ display:grid;grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,80px);align-items:start; } .contact__intro{position:sticky;top:calc(var(--nav-h) + 30px);} .contact__info{display:grid;gap:20px;margin-top:34px;} .contact__info li{display:grid;gap:4px;padding-top:16px;border-top:1px solid var(--line);} .contact__info-label{ font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint); } .contact__info a{ color:var(--heading);font-weight:600; background-image:linear-gradient(var(--green),var(--green)); background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat; transition:background-size .4s var(--ease),color .3s var(--ease); } .contact__info a:hover{background-size:100% 1.5px;color:var(--accent);} .contact__social{display:flex;gap:16px;flex-wrap:wrap;} .contact__formwrap{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3.4vw,44px); } .form{display:grid;gap:20px;} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .field{display:grid;gap:8px;min-width:0;border:0;padding:0;margin:0;} .field label,.field legend{ font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft); padding:0; } .req{color:var(--accent);} .field input,.field textarea,.field select{ width:100%; padding:14px 16px; background:var(--input-bg); border:1px solid var(--line-strong); border-radius:12px; color:var(--heading);font-size:15px; transition:border-color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease); } .field textarea{resize:vertical;min-height:130px;line-height:1.6;} .field input::placeholder,.field textarea::placeholder{color:var(--text-faint);} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--green); box-shadow:0 0 0 4px rgba(128,220,16,.16); } .field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{ border-color:#D93636; } .field.is-invalid input:focus,.field.is-invalid textarea:focus{ box-shadow:0 0 0 4px rgba(217,54,54,.16); } .field__error{ display:none;font-size:12px;color:#D93636;font-weight:500;letter-spacing:0;text-transform:none; } :root[data-theme="dark"] .field__error{color:#FF7A7A;} .field__error.is-shown{display:block;} .field__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;} .counter{font-size:11.5px;color:var(--text-faint);margin-left:auto;} .select-wrap{position:relative;} .select-wrap::after{ content:"";position:absolute;right:16px;top:50%; width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:translateY(-70%) rotate(45deg);pointer-events:none; } .field select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;} .field select option{background:var(--input-bg);color:var(--heading);} .field--chips{display:grid;gap:12px;} .chips{display:flex;flex-wrap:wrap;gap:9px;} .chip{position:relative;cursor:pointer;} .chip input{position:absolute;opacity:0;width:0;height:0;} .chip span{ display:inline-block; font-size:13px;font-weight:600;color:var(--text-muted); padding:9px 15px;border-radius:99px; border:1px solid var(--line-strong);background:var(--surface); transition:all .3s var(--ease); } .chip:hover span{border-color:var(--green);color:var(--heading);transform:translateY(-2px);} .chip input:checked + span{ background:var(--green);border-color:var(--green);color:var(--ink);font-weight:700; } .chip input:focus-visible + span{outline:2px solid var(--green);outline-offset:3px;} .check{ display:flex;align-items:flex-start;gap:12px;cursor:pointer; font-size:13.5px;color:var(--text-muted);line-height:1.6; } .check input{position:absolute;opacity:0;width:0;height:0;} .check__box{ flex:none;width:22px;height:22px;margin-top:1px; border-radius:7px;border:1px solid var(--line-strong);background:var(--input-bg); position:relative;transition:all .3s var(--ease); } .check__box::after{ content:"";position:absolute;left:7px;top:3px; width:6px;height:11px; border-right:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink); transform:rotate(45deg) scale(0); transition:transform .28s var(--ease); } .check input:checked + .check__box{background:var(--green);border-color:var(--green);} .check input:checked + .check__box::after{transform:rotate(45deg) scale(1);} .check input:focus-visible + .check__box{outline:2px solid var(--green);outline-offset:3px;} .check__text strong{color:var(--heading);} .form__foot{display:grid;gap:12px;} .form__note{margin:0;font-size:12px;color:var(--text-faint);text-align:center;} .form__note code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px; color:var(--accent);background:rgba(128,220,16,.12);padding:2px 6px;border-radius:5px; } #submitBtn.is-loading .btn__text{opacity:.35;} .btn__spinner{ position:absolute;z-index:3;top:50%;left:50%; width:19px;height:19px;margin:-9.5px 0 0 -9.5px; border:2.2px solid rgba(21,21,21,.28);border-top-color:var(--ink); border-radius:50%;opacity:0; animation:spin .7s linear infinite; } #submitBtn.is-loading .btn__spinner{opacity:1;} @keyframes spin{to{transform:rotate(360deg);}} .form__success{ position:absolute;inset:0;z-index:5; display:grid;place-content:center;justify-items:center;gap:14px;text-align:center; padding:clamp(24px,4vw,48px); background:var(--bg); border-radius:var(--radius-lg); animation:success-in .5s var(--ease) both; } .form__success[hidden]{display:none;} .form__success-icon{ width:66px;height:66px;border-radius:50%; background:var(--green);color:var(--ink); display:grid;place-items:center; animation:pop .55s var(--ease) .1s both; } .form__success-icon svg{width:30px;height:30px;} .form__success h3{font-size:clamp(1.4rem,2.6vw,1.9rem);} .form__success p{color:var(--text-muted);max-width:44ch;font-size:14.5px;} @keyframes success-in{from{opacity:0;transform:scale(.98);}to{opacity:1;transform:none;}} @keyframes pop{ 0%{transform:scale(0) rotate(-25deg);} 70%{transform:scale(1.12) rotate(4deg);} 100%{transform:scale(1) rotate(0);} } /* ---------- 18. Footer ---------- */ .footer{ background:var(--bg); border-top:1px solid var(--line); padding:clamp(56px,7vw,88px) 0 30px; } .footer__top{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:24px;padding-bottom:clamp(34px,4vw,48px);border-bottom:1px solid var(--line); } .footer__logo img{width:clamp(130px,14vw,180px);} .footer__claim{ margin:0;font-family:var(--font-display);font-weight:800; font-size:clamp(1.3rem,3vw,2.2rem);line-height:1.05;letter-spacing:-.04em; text-align:right;color:var(--heading); } .footer__cols{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,52px); padding:clamp(34px,4vw,50px) 0; } .footer__cols h4{ font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);margin-bottom:16px; } .footer__nav{display:grid;gap:9px;align-content:start;} .footer__nav a{ font-size:14px;color:var(--text-muted);width:fit-content; transition:color .3s var(--ease),transform .3s var(--ease); } .footer__nav a:hover{color:var(--accent);transform:translateX(4px);} .footer__col p{margin:0 0 8px;font-size:14px;color:var(--text-muted);} .footer__col a{transition:color .3s var(--ease);} .footer__col a:hover{color:var(--accent);} .footer__social{display:flex;gap:9px;margin-top:14px;} .footer__social a{ width:38px;height:38px;border-radius:50%; border:1px solid var(--line-strong); display:grid;place-items:center; font-size:11px;font-weight:800;letter-spacing:.04em; transition:all .35s var(--ease); } .footer__social a:hover{background:var(--green);border-color:var(--green);color:var(--ink);transform:translateY(-3px);} .footer__bottom{ display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; padding-top:24px;border-top:1px solid var(--line); font-size:12.5px;color:var(--text-faint); } .footer__bottom p{margin:0;} .to-top{ position:fixed;right:22px;bottom:22px;z-index:1000; width:48px;height:48px;border-radius:50%; background:var(--green);color:var(--ink); display:grid;place-items:center; opacity:0;visibility:hidden;transform:translateY(14px); transition:all .4s var(--ease); box-shadow:0 12px 30px -12px rgba(128,220,16,.8); } .to-top.is-shown{opacity:1;visibility:visible;transform:none;} .to-top:hover{transform:translateY(-3px) scale(1.06);} .to-top svg{width:20px;height:20px;} /* ---------- 19. Reveal animation ---------- */ .reveal{ opacity:0;transform:translateY(30px); transition:opacity .8s var(--ease),transform .8s var(--ease); will-change:opacity,transform; } .reveal.is-visible{opacity:1;transform:none;} /* ---------- 20. Responsive ---------- */ @media (max-width:1024px){ .section__head--split{grid-template-columns:1fr;align-items:start;} .about__grid{grid-template-columns:1fr;} .about__media{position:static;max-width:520px;} .data__grid{grid-template-columns:1fr;} .process__list{grid-template-columns:repeat(2,1fr);} .contact__grid{grid-template-columns:1fr;} .contact__intro{position:static;} } @media (max-width:860px){ :root{--nav-h:68px;} .nav__burger{display:block;} .nav__links{ position:fixed;inset:0;z-index:-1; flex-direction:column;justify-content:center;align-items:flex-start; gap:6px; padding:calc(var(--nav-h) + 30px) var(--gutter) 40px; background:var(--bg); clip-path:circle(0% at calc(100% - 42px) 34px); transition:clip-path .7s var(--ease); pointer-events:none; } .nav__links.is-open{clip-path:circle(150% at calc(100% - 42px) 34px);pointer-events:auto;} .nav__links > a:not(.nav__cta){ font-family:var(--font-display);font-weight:800; font-size:clamp(1.6rem,7.4vw,2.6rem);letter-spacing:-.04em;color:var(--heading); padding:6px 0; opacity:0;transform:translateY(20px); transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease); } .nav__links.is-open > a{opacity:1;transform:none;} .nav__links.is-open > a:nth-child(1){transition-delay:.14s;} .nav__links.is-open > a:nth-child(2){transition-delay:.19s;} .nav__links.is-open > a:nth-child(3){transition-delay:.24s;} .nav__links.is-open > a:nth-child(4){transition-delay:.29s;} .nav__links.is-open > a:nth-child(5){transition-delay:.34s;} .nav__links.is-open > a:nth-child(6){transition-delay:.39s;} .nav__links > a:not(.nav__cta)::after{display:none;} .nav__cta{ margin-top:24px;opacity:0;transform:translateY(20px); transition:opacity .5s var(--ease) .45s,transform .5s var(--ease) .45s; } .nav__links.is-open .nav__cta{opacity:1;transform:none;} .hero__grid{grid-template-columns:1fr;gap:0;} .hero__actions{justify-content:flex-start;padding-top:22px;} .hero__stats{grid-template-columns:1fr;gap:20px;} .stat{grid-template-columns:auto 1fr;align-items:center;gap:14px;} .hero__scroll{display:none;} .edge__cols{grid-template-columns:1fr;} .edge__strip{grid-template-columns:1fr;} .form__row{grid-template-columns:1fr;} .footer__cols{grid-template-columns:1fr;} .footer__claim{text-align:left;} .cursor{display:none !important;} } @media (max-width:560px){ .process__list{grid-template-columns:1fr;} /* number + badge + toggle on one line, title on its own line below */ .service__head{flex-wrap:wrap;gap:10px 14px;align-items:center;} .service__num{order:1;padding-top:0;} .service__flag{order:2;} .service__icon{order:3;margin-left:auto;} .service__name{flex:1 1 100%;order:4;} .service__body-inner p,.tags{padding-left:4px;} .edge__ribbon{white-space:normal;text-align:center;width:max-content;max-width:88vw;} .footer__bottom{flex-direction:column;gap:6px;} .case__meta{opacity:1;transform:none;} .chart__foot{flex-direction:column;align-items:flex-start;} .chart__note{margin-left:0;} } /* ---------- 21. Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{opacity:1;transform:none;} .hero__title .w,.js .hero__title .w{opacity:1;transform:none;} .coil ellipse{stroke-dashoffset:0;} .marquee__track{animation:none;} .case__meta{opacity:1;transform:none;} /* Chart draws instantly instead of animating in */ .chart__line{stroke-dashoffset:0 !important;} .chart__area{opacity:.10 !important;} .chart__end,.chart__endlabel{opacity:1 !important;} /* Carousel stops auto-scrolling and becomes a normal scroll region */ .workcar{overflow-x:auto;-webkit-mask-image:none;mask-image:none;} .workcar__track{animation:none;} .case{scroll-snap-align:start;} }