/* ========================================================================== Agility Inc. — Design System Dark-to-light narrative. Motion-led. Built 2026. ========================================================================== */ /* ---- 1. Tokens ---------------------------------------------------------- */ :root{ /* brand */ --ink-900:#07090D; --ink-850:#0B0F15; --ink-800:#10151D; --ink-700:#181F29; --ink-600:#232C39; --cream:#FBF6F0; --cream-2:#F3EBE1; --paper:#FFFFFF; --flame:#D25A28; --flame-2:#F0803C; --flame-3:#FFA766; /* motion */ --e-out:cubic-bezier(.22,1,.36,1); --e-io:cubic-bezier(.65,0,.35,1); --e-spring:cubic-bezier(.34,1.56,.64,1); --t-fast:.28s; --t-mid:.6s; --t-slow:1.1s; /* layout */ --gut:clamp(20px,5vw,72px); --max:1280px; --rad:18px; --rad-lg:26px; color-scheme:dark; } /* ---- 1b. Modes ---------------------------------------------------------- The whole site runs in ONE mode at a time: dark or light, chosen by the visitor. Sections no longer flip between them; they alternate between two surfaces WITHIN the chosen mode, so the page reads as one continuous design and there is no dark-to-light seam anywhere. The mode lives on . With no JS, or before the inline bootstrap runs, the OS preference decides. */ :root, html[data-mode="dark"]{ --bg:#07090D; --bg-alt:#0D1218; /* the alternating surface, same mode */ --bg-2:var(--ink-800); --bg-deep:#050709; --fg:#F5F7FA; --fg-2:#C3CBD6; --muted:#8B95A4; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --card:rgba(255,255,255,.035); --card-hi:rgba(255,255,255,.065); --accent:var(--flame-2); --accent-text:#FFA766; /* 10.4:1 on ink, for small type */ --accent-strong:var(--flame-3); --shadow:0 30px 80px -30px rgba(0,0,0,.85); --menu-bg:#07090D; --select-bg:#141A23; color-scheme:dark; } @media (prefers-color-scheme: light){ :root:not([data-mode]){ --bg:#FBF6F0; --bg-alt:#FFFFFF; --bg-2:var(--cream-2); --bg-deep:#F2E9DF; --fg:#0C1116; --fg-2:#3B4552; --muted:#5C6675; --line:rgba(12,17,22,.12); --line-2:rgba(12,17,22,.07); --card:#FFFFFF; --card-hi:#FFFFFF; --accent:var(--flame); --accent-text:#B8481C; /* 4.9:1 on cream, for small type */ --accent-strong:#A8431B; --shadow:0 30px 70px -34px rgba(30,20,10,.28); --menu-bg:#FBF6F0; --select-bg:#FFFFFF; color-scheme:light; } } html[data-mode="light"]{ --bg:#FBF6F0; --bg-alt:#FFFFFF; --bg-2:var(--cream-2); --bg-deep:#F2E9DF; --fg:#0C1116; --fg-2:#3B4552; --muted:#5C6675; --line:rgba(12,17,22,.12); --line-2:rgba(12,17,22,.07); --card:#FFFFFF; --card-hi:#FFFFFF; --accent:var(--flame); --accent-text:#B8481C; --accent-strong:#A8431B; --shadow:0 30px 70px -34px rgba(30,20,10,.28); --menu-bg:#FBF6F0; --select-bg:#FFFFFF; color-scheme:light; } /* Sections keep their authored data-theme values, but those now select a SURFACE inside the active mode rather than an absolute colour. */ [data-theme]{background:var(--bg)} [data-theme="light"],[data-theme="paper"]{background:var(--bg-alt)} /* ---- 2. Reset ----------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} [id]{scroll-margin-top:88px} body{ margin:0; background:var(--bg); color:var(--fg); font-family:Calibri,"Segoe UI",Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul{list-style:none;padding:0} ::selection{background:var(--flame);color:#fff} /* ---- 3. Type scale ------------------------------------------------------ */ .d1,.d2,.d3,h1,h2,h3{ font-family:Arial,"Helvetica Neue",Helvetica,"Segoe UI",sans-serif; font-weight:700; line-height:1.04; letter-spacing:-.028em; text-wrap:balance; } .d1{font-size:clamp(2.9rem,7.4vw,6.6rem)} .d2{font-size:clamp(2rem,4.4vw,3.85rem);line-height:1.06} .d3{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.03em} .h4{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;font-size:1.14rem;letter-spacing:-.018em;line-height:1.3} .lead{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.55;color:var(--fg-2);font-weight:400;letter-spacing:-.012em;text-wrap:pretty} .body{color:var(--fg-2);font-weight:400;letter-spacing:-.005em;text-wrap:pretty} .small{font-size:.92rem;color:var(--muted);line-height:1.55} .eyebrow{ display:flex;align-items:center;gap:.66em; font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; font-size:.8rem;font-weight:700;letter-spacing:.125em;line-height:1; text-transform:uppercase;color:var(--accent-text); } .eyebrow.no-rule{gap:.66em} /* ---- motion icons: one per section, animated on reveal ---- */ .eb-ico{ flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--accent); } .eb-ico svg{width:20px;height:20px;overflow:visible} .eb-ico svg *{ fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; transform-box:fill-box;transform-origin:center; } .eb-ico svg .fill{fill:currentColor;stroke:none} /* entrance: the whole mark settles in */ .eyebrow .eb-ico{opacity:0;transform:translateY(4px) scale(.85)} .is-in .eb-ico,.eyebrow.is-in .eb-ico{ opacity:1;transform:none;transition:opacity .5s var(--e-out),transform .6s var(--e-spring); } /* per-icon motion, played once the section is in view */ .is-in .eb-ico [data-a="spin"],.eyebrow.is-in .eb-ico [data-a="spin"]{animation:ebSpin 8s linear infinite} .is-in .eb-ico [data-a="sweep"],.eyebrow.is-in .eb-ico [data-a="sweep"]{animation:ebSweep 3.6s var(--e-io) infinite} .is-in .eb-ico [data-a="pulse"],.eyebrow.is-in .eb-ico [data-a="pulse"]{animation:ebPulse 2.6s var(--e-io) infinite} .is-in .eb-ico [data-a="draw"],.eyebrow.is-in .eb-ico [data-a="draw"]{stroke-dasharray:34;animation:ebDraw 1.1s var(--e-out) .25s both} .is-in .eb-ico [data-a="rise1"],.eyebrow.is-in .eb-ico [data-a="rise1"]{animation:ebRise 2.4s var(--e-io) infinite} .is-in .eb-ico [data-a="rise2"],.eyebrow.is-in .eb-ico [data-a="rise2"]{animation:ebRise 2.4s var(--e-io) .2s infinite} .is-in .eb-ico [data-a="rise3"],.eyebrow.is-in .eb-ico [data-a="rise3"]{animation:ebRise 2.4s var(--e-io) .4s infinite} .is-in .eb-ico [data-a="slideL"],.eyebrow.is-in .eb-ico [data-a="slideL"]{animation:ebSlideL 3s var(--e-io) infinite} .is-in .eb-ico [data-a="slideR"],.eyebrow.is-in .eb-ico [data-a="slideR"]{animation:ebSlideR 3s var(--e-io) infinite} .is-in .eb-ico [data-a="drop"],.eyebrow.is-in .eb-ico [data-a="drop"]{animation:ebDrop 2.8s var(--e-io) infinite} .is-in .eb-ico [data-a="tick"],.eyebrow.is-in .eb-ico [data-a="tick"]{animation:ebTick 4s steps(1) infinite} .is-in .eb-ico [data-a="nudge"],.eyebrow.is-in .eb-ico [data-a="nudge"]{animation:ebNudge 2.4s var(--e-io) infinite} .is-in .eb-ico [data-a="blink"],.eyebrow.is-in .eb-ico [data-a="blink"]{animation:ebBlink 3s var(--e-io) infinite} @keyframes ebSpin{to{transform:rotate(360deg)}} @keyframes ebSweep{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(38deg)}} @keyframes ebPulse{0%,100%{transform:scale(.72);opacity:.45}50%{transform:scale(1.12);opacity:1}} @keyframes ebDraw{from{stroke-dashoffset:34}to{stroke-dashoffset:0}} @keyframes ebRise{0%,100%{transform:scaleY(.45)}45%{transform:scaleY(1)}} @keyframes ebSlideL{0%,100%{transform:translateX(0)}50%{transform:translateX(-2.4px)}} @keyframes ebSlideR{0%,100%{transform:translateX(0)}50%{transform:translateX(2.4px)}} @keyframes ebDrop{0%,100%{transform:translateY(-2px);opacity:.55}45%{transform:translateY(1.5px);opacity:1}} @keyframes ebTick{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}} @keyframes ebNudge{0%,100%{transform:translateX(-1.5px)}50%{transform:translateX(2.5px)}} @keyframes ebBlink{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ .eyebrow .eb-ico{opacity:1;transform:none} .eb-ico svg *{animation:none!important;stroke-dasharray:none!important} } /* supporting label under a name or title: business-card treatment */ .role{ font-size:.74rem;font-weight:700;letter-spacing:.115em;line-height:1.4; text-transform:uppercase;color:var(--accent-text); } .num{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;letter-spacing:-.032em;font-variant-numeric:tabular-nums} /* ---- 4. Layout ---------------------------------------------------------- */ .sec{ scroll-margin-top:84px; position:relative; background:var(--bg); color:var(--fg); padding:clamp(56px,7vw,104px) 0; transition:background-color .8s var(--e-io),color .8s var(--e-io); } .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .wrap-wide{max-width:1520px} .grid{display:grid;gap:clamp(18px,2.4vw,30px)} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .sec-head{max-width:900px;margin-bottom:clamp(30px,3.8vw,54px)} .sec-head .d2{margin:20px 0 20px} .stack-sm{display:flex;flex-direction:column;gap:14px} /* ---- 5. Motion primitives ---------------------------------------------- */ .r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--e-out),transform .9s var(--e-out);transition-delay:var(--d,0ms);will-change:opacity,transform} .r.is-in{opacity:1;transform:none} .r-l{opacity:0;transform:translate3d(-24px,0,0)} .r-s{opacity:0;transform:scale(.965) translate3d(0,18px,0)} .r-s.is-in{opacity:1;transform:none} /* line-by-line masked headline reveal */ .mask-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .mask-line > span{ display:block;transform:translate3d(0,110%,0); transition:transform 1.05s var(--e-out);transition-delay:var(--d,0ms); } .is-in .mask-line > span,.mask-line.is-in > span{transform:none} /* draw-in rule */ .rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-out) var(--d,0ms)} .rule.is-in{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .r,.r-s,.r-l{opacity:1!important;transform:none!important} .mask-line > span{transform:none!important} .rule{transform:scaleX(1)!important} *{animation-duration:.001ms!important;animation-iteration-count:1!important} } /* ---- 6. Nav ------------------------------------------------------------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:90; display:flex;align-items:center;justify-content:space-between; gap:24px;padding:16px var(--gut); transition:background-color .45s var(--e-io),backdrop-filter .45s,border-color .45s,padding .45s var(--e-io); border-bottom:1px solid transparent; } .nav.is-stuck{ background:color-mix(in srgb,var(--nav-bg,#07090D) 78%,transparent); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); border-bottom-color:var(--nav-line,rgba(255,255,255,.09)); padding-block:11px; } .nav{--nav-bg:var(--bg);--nav-line:var(--line);color:var(--fg)} .logo{display:inline-flex;align-items:center;position:relative;line-height:0} .logo-img{height:clamp(26px,2.4vw,32px);width:auto;transition:opacity .45s var(--e-io),transform .5s var(--e-out)} .logo-img.dark{position:absolute;left:0;top:50%;translate:0 -50%} .logo-img.light{opacity:1} .logo-img.dark{opacity:0} html[data-mode="light"] .logo-img.light{opacity:0} html[data-mode="light"] .logo-img.dark{opacity:1} .logo:hover .logo-img{transform:scale(1.03)} .foot .logo-img{height:34px} .nav-links{display:flex;align-items:center;gap:4px} .nav-links a{ position:relative;padding:9px 14px;border-radius:999px; font-size:.905rem;font-weight:400;letter-spacing:-.008em;opacity:.82; transition:opacity .3s,background-color .3s; } .nav-links a::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px; background:var(--flame-2);transform:scaleX(0);transform-origin:right; transition:transform .4s var(--e-out);border-radius:2px; } .nav-links a:hover{opacity:1} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} .nav-links a[aria-current="page"]{opacity:1;font-weight:600} .nav-right{display:flex;align-items:center;gap:12px} /* ---- 7. Buttons --------------------------------------------------------- */ .btn{ position:relative;display:inline-flex;align-items:center;gap:.6em; padding:13px 24px;border-radius:999px;overflow:hidden; font-size:.93rem;font-weight:600;letter-spacing:-.012em;white-space:nowrap; transition:transform .35s var(--e-spring),box-shadow .35s var(--e-out),color .3s,border-color .3s; will-change:transform; } .btn > span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.55em} .btn::before{ content:"";position:absolute;inset:0;z-index:1;border-radius:inherit; background:linear-gradient(100deg,#A8431B 0%,#B8481C 55%,#C4531F 100%); transform:translateY(101%);transition:transform .48s var(--e-out); } .btn:hover::before{transform:translateY(0)} .btn:active{transform:scale(.97)} .btn-primary{background:linear-gradient(100deg,#A8431B 0%,#C4531F 100%);color:#fff;box-shadow:0 10px 30px -12px rgba(168,67,27,.7)} .btn-primary::before{background:linear-gradient(100deg,#8F3714 0%,#A8431B 100%)} .btn-primary:hover{box-shadow:0 18px 44px -14px rgba(168,67,27,.85)} .btn-ghost{border:1px solid var(--line);color:var(--fg)} .btn-ghost:hover{color:#fff;border-color:transparent} .btn-solid{background:var(--fg);color:var(--bg)} .btn-solid:hover{color:#fff} .btn-sm{padding:10px 18px;font-size:.87rem} .arrow-link{ display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.94rem; color:var(--accent-text);letter-spacing:-.005em; } .arrow-link svg{transition:transform .4s var(--e-out)} .arrow-link:hover svg{transform:translateX(5px)} /* ---- 8. Hero ------------------------------------------------------------ */ .hero{ position:relative;min-height:100svh;display:flex;align-items:center; padding:140px 0 70px;overflow:hidden;isolation:isolate; } .hero-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:.9} .hero-glow{ position:absolute;z-index:-1;pointer-events:none; width:min(1100px,120vw);aspect-ratio:1;border-radius:50%; right:-18%;top:-28%; background:radial-gradient(circle at 50% 50%,rgba(210,90,40,.30),rgba(210,90,40,.09) 42%,transparent 68%); filter:blur(14px); animation:drift 22s ease-in-out infinite alternate; } .hero-glow.b{left:-25%;right:auto;top:auto;bottom:-38%;width:min(820px,100vw); background:radial-gradient(circle at 50% 50%,rgba(90,120,190,.20),transparent 66%);animation-duration:28s} @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5%,4%,0) scale(1.12)}} .hero-inner{position:relative;z-index:2;width:100%} .hero .d1{margin:26px 0 0} .hero-sub{max-width:610px;margin-top:28px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px} .hero-foot{ display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,54px); margin-top:clamp(34px,4.4vw,58px);padding-top:24px;border-top:1px solid var(--line); } .hero-foot-item{display:flex;flex-direction:column;gap:2px} .hero-foot-item b{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.03em} .hero-foot-item span{font-size:.78rem;color:var(--muted);letter-spacing:.01em} .scroll-cue{ position:absolute;left:var(--gut);bottom:30px;z-index:3; display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); } .scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--flame-2),transparent);position:relative;overflow:hidden} .scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--flame-2);animation:cue 2.1s var(--e-io) infinite} @keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}} /* ---- 9. Ticker / marquee ------------------------------------------------ */ .ticker{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ticker-track{display:flex;width:max-content;gap:0;animation:slide 46s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} .ticker-group{display:flex;gap:0;flex:none} .ticker-item{ display:inline-flex;align-items:center;gap:.7em;padding:0 clamp(22px,3vw,44px); font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:clamp(1rem,1.5vw,1.35rem);font-weight:600; letter-spacing:-.025em;color:var(--fg-2);white-space:nowrap; } .ticker-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--flame);flex:none;opacity:.8} @keyframes slide{to{transform:translateX(-50%)}} /* ---- 10. Stat band ------------------------------------------------------ */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad-lg);overflow:hidden} .stat{background:var(--bg);padding:clamp(24px,3.2vw,40px);transition:background-color .45s} .stat:hover{background:var(--card-hi)} .stat b{display:block;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--fg)} .stat b em{font-style:normal;color:var(--accent)} .stats.places .stat b{font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:-.022em;line-height:1.2} .stats.places .stat b::after{content:"";display:block;width:22px;height:2px;border-radius:2px;background:var(--flame);margin-top:12px} .stats.places .stat span{margin-top:10px} /* result band: stack on a phone but keep the figure and label on one line */ @media (max-width:680px){ .result-band .grid{gap:16px} .result-band .grid > div{display:flex;align-items:baseline;gap:14px} .result-band .grid > div > b{flex:none;min-width:104px} .result-band .grid > div:first-child{display:block} } .stat span{display:block;margin-top:12px;font-size:.86rem;color:var(--muted);letter-spacing:-.005em;line-height:1.45} /* ---- 11. Cards ---------------------------------------------------------- */ .card{ position:relative;background:var(--card);border:1px solid var(--line); border-radius:var(--rad);padding:clamp(24px,2.8vw,34px);overflow:hidden; transition:transform .55s var(--e-out),border-color .45s,background-color .45s,box-shadow .55s var(--e-out); } .card::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(240,128,60,.16),transparent 62%); transition:opacity .5s; } .card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--flame) 45%,transparent);box-shadow:var(--shadow)} .card:hover::after{opacity:1} .card{display:flex;flex-direction:column} .card .chips{margin-top:auto;padding-top:20px} .card .card-icon{flex:none} .card .figure{display:block;font-size:clamp(1.75rem,2.9vw,2.5rem);line-height:1.08;letter-spacing:-.03em;color:var(--accent);margin-bottom:14px} .card .idx{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:.8rem;font-weight:700;color:var(--accent-text);letter-spacing:.1em} .card .h4{margin:14px 0 10px} .card-icon{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--flame) 20%,transparent),transparent); border:1px solid color-mix(in srgb,var(--flame) 32%,transparent);color:var(--accent); } .card-icon svg{width:21px;height:21px} /* division split panels */ .split{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px)} .panel{ position:relative;display:flex;flex-direction:column;justify-content:space-between; min-height:clamp(400px,46vw,540px);padding:clamp(28px,3.4vw,46px); border-radius:var(--rad-lg);overflow:hidden;isolation:isolate; border:1px solid var(--line);background:var(--card); transition:transform .6s var(--e-out),box-shadow .6s var(--e-out); } .panel::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s var(--e-out); } .panel:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .panel:hover::before{opacity:1} .panel-a::before{background:linear-gradient(160deg,#10151D,#07090D 70%)} .panel-a:hover{color:#F5F7FA;border-color:rgba(255,255,255,.14)} .panel-a:hover .panel-list li{color:#C3CBD6;border-color:rgba(255,255,255,.10)} .panel-a:hover .panel-kicker{color:#8B95A4} .panel-b::before{background:linear-gradient(160deg,var(--flame) 0%,#A8431B 78%)} .panel-b:hover{color:#fff;border-color:transparent} .panel-b:hover .panel-list li{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.22)} .panel-b:hover .panel-kicker{color:rgba(255,255,255,.75)} .panel-b:hover .arrow-link{color:#fff} .panel-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:color .5s} .panel .d3{margin:16px 0 14px} .panel-list{margin-top:26px;display:flex;flex-direction:column} .panel-list li{ padding:13px 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--fg-2); display:flex;gap:12px;align-items:baseline;transition:color .5s,border-color .5s; } .panel-list li b{font-weight:700;color:inherit;flex:none;min-width:92px} .panel-foot{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:16px} /* ---- 12. Sticky process scrubber --------------------------------------- */ .scrub{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:start} .scrub-sticky{position:sticky;top:clamp(110px,16vh,170px)} .scrub-visual{ position:relative;aspect-ratio:1;border-radius:var(--rad-lg);overflow:hidden; border:1px solid var(--line);background:var(--bg-2);display:grid;place-items:center; } .scrub-num{ font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;letter-spacing:-.03em; font-size:clamp(6rem,15vw,12rem);line-height:1; background:linear-gradient(150deg,var(--flame-3),var(--flame) 55%,color-mix(in srgb,var(--flame) 30%,transparent)); -webkit-background-clip:text;background-clip:text;color:transparent; transition:opacity .5s var(--e-out),transform .6s var(--e-out); } .scrub-ring{position:absolute;inset:0;pointer-events:none} .scrub-ring circle{fill:none;stroke-width:1.2;transform:rotate(-90deg);transform-origin:50% 50%} .scrub-ring .track{stroke:var(--line)} .scrub-ring .prog{stroke:var(--flame-2);stroke-linecap:round;transition:stroke-dashoffset .6s var(--e-out)} .steps{display:flex;flex-direction:column} .step{ padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--line); opacity:.36;transition:opacity .6s var(--e-out); } .step:last-child{border-bottom:1px solid var(--line)} .step.is-active{opacity:1} .step-top{display:flex;align-items:baseline;gap:16px} .step-top i{ font-style:normal;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:.72rem;font-weight:700; color:var(--accent-text);letter-spacing:.115em;text-transform:uppercase;flex:none; } .step p{margin-top:12px;max-width:52ch} /* ---- 13. Comparison table ---------------------------------------------- */ .cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.96rem} .cmp th,.cmp td{padding:clamp(16px,2vw,22px) clamp(14px,2vw,26px);text-align:left;vertical-align:top} .cmp thead th{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:-.02em;padding-bottom:16px} .cmp thead th:nth-child(3){color:#9C3D18} .cmp tbody tr td{border-top:1px solid var(--line)} .cmp td:first-child{font-weight:600;color:var(--fg);width:26%} .cmp td:nth-child(2){color:var(--muted)} .cmp td:nth-child(3){color:var(--fg);font-weight:600;background:color-mix(in srgb,var(--flame) 7%,transparent)} .cmp thead th:nth-child(3){background:color-mix(in srgb,var(--flame) 10%,transparent);border-radius:12px 12px 0 0} .cmp tbody tr:last-child td:nth-child(3){border-radius:0 0 12px 12px} .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---- 14. Fit / not-fit lists ------------------------------------------- */ .fit li,.nofit li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:.96rem;color:var(--fg-2)} .fit li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%; background:color-mix(in srgb,var(--flame) 18%,transparent); border:1px solid color-mix(in srgb,var(--flame) 55%,transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0803C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size:11px;background-repeat:no-repeat;background-position:center} .nofit li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%; border:1px solid var(--line); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A4' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); background-size:10px;background-repeat:no-repeat;background-position:center} /* ---- 15. Skills / chips ------------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{ padding:8px 15px;border-radius:999px;border:1px solid var(--line); font-size:.85rem;color:var(--fg-2);letter-spacing:-.008em; transition:border-color .35s,color .35s,transform .35s var(--e-spring),background-color .35s; } .chip:hover{border-color:color-mix(in srgb,var(--flame) 60%,transparent);color:var(--accent-text);transform:translateY(-2px)} /* ---- 16. CTA band ------------------------------------------------------- */ .cta{position:relative;overflow:hidden;isolation:isolate;text-align:center} .cta::before{ content:"";position:absolute;z-index:-1;inset:auto 50% -60% auto;translate:50% 0; width:min(1200px,140vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(210,90,40,.30),transparent 62%); } .cta .wrap{display:flex;flex-direction:column;align-items:center;gap:26px} .cta .lead{max-width:600px} .cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .cta-note{font-size:.85rem;color:var(--muted);margin-top:6px} /* ---- 17. Forms ---------------------------------------------------------- */ .field{display:flex;flex-direction:column;gap:8px} .field label{font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--fg-2)} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border-radius:13px;background:var(--card); border:1px solid var(--line);color:var(--fg);font:inherit;font-size:.95rem; transition:border-color .3s,background-color .3s,box-shadow .3s; } .field textarea{min-height:140px;resize:vertical} .field select{ appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;background-size:16px; } .field label .req{color:var(--accent);margin-left:.25em} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--flame-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--flame) 16%,transparent); } .field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form-grid .full{grid-column:1/-1} /* ---- 18. Jobs / Ceipal -------------------------------------------------- */ .ceipal-slot{ border-radius:var(--rad-lg);border:1px solid var(--line);background:var(--card); padding:clamp(20px,3vw,34px);min-height:420px; } .ceipal-placeholder{ display:flex;align-items:flex-start;gap:14px; border:1px dashed color-mix(in srgb,var(--flame) 38%,transparent);border-radius:14px; padding:16px 18px;background:color-mix(in srgb,var(--flame) 5%,transparent); } .ceipal-placeholder svg{flex:none;color:var(--accent);margin-top:2px} .ceipal-slot{min-height:0} .ceipal-placeholder svg{} .ceipal-placeholder code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem; background:color-mix(in srgb,var(--flame) 10%,transparent);color:var(--accent-text); padding:4px 9px;border-radius:7px; } .job-row{ display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between; padding:22px 0;border-top:1px solid var(--line); transition:transform .4s var(--e-out),border-color .4s; } .job-row:hover{transform:translateX(8px);border-color:color-mix(in srgb,var(--flame) 40%,transparent)} .job-row:last-child{border-bottom:1px solid var(--line)} .grid > .job-row:last-child{border-bottom:1px solid var(--line)} .job-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .tag{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:4px 11px} .tag.hot{color:var(--accent-text);border-color:color-mix(in srgb,var(--flame) 45%,transparent)} /* ---- 19. Footer --------------------------------------------------------- */ .foot{background:var(--bg-deep);color:var(--fg);padding:clamp(60px,7vw,96px) 0 34px;border-top:1px solid var(--line)} .foot .logo{margin-bottom:22px;display:block} .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(28px,4vw,56px)} .foot h5{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:18px} .foot-links{display:flex;flex-direction:column;gap:11px} .foot-links a{font-size:.93rem;color:var(--fg-2);transition:color .3s,transform .3s var(--e-out);width:fit-content} .foot-links a:hover{color:var(--flame-2);transform:translateX(3px)} .foot-bottom{ margin-top:clamp(44px,6vw,72px);padding-top:24px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.82rem;color:var(--muted); } .foot-bottom a:hover{color:var(--fg)} /* ---- 20. Progress bar --------------------------------------------------- */ .progress{position:fixed;top:0;left:0;height:2px;z-index:100;width:100%;transform-origin:left;transform:scaleX(0); background:linear-gradient(90deg,var(--flame),var(--flame-3));pointer-events:none} /* ---- 21. Mobile menu ---------------------------------------------------- */ .burger{display:none;position:relative;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);flex:none;z-index:95} .burger span{ position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px; background:currentColor;border-radius:2px; transition:transform .42s var(--e-out),opacity .25s; } .burger span:nth-child(1){transform:translateY(-6px)} .burger span:nth-child(3){transform:translateY(6px)} .nav.menu-open .burger span:nth-child(1){transform:rotate(45deg)} .nav.menu-open .burger span:nth-child(2){opacity:0} .nav.menu-open .burger span:nth-child(3){transform:rotate(-45deg)} .mobile-menu{ position:fixed;inset:0;z-index:80;background:var(--menu-bg);color:var(--fg); padding:110px var(--gut) 40px;display:flex;flex-direction:column;gap:6px; clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-out); overflow-y:auto; } .mobile-menu.open{clip-path:inset(0 0 0 0)} .mobile-menu > a{ font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:clamp(1.7rem,6.4vw,2.4rem);font-weight:700; letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid var(--line); opacity:0;transform:translateY(20px);transition:opacity .5s var(--e-out),transform .5s var(--e-out); } .mobile-menu.open > a{opacity:1;transform:none;transition-delay:calc(var(--i) * 60ms + 120ms)} .mobile-menu .m-foot{margin-top:auto;padding-top:34px;color:var(--muted);font-size:.95rem;display:flex;flex-direction:column;gap:9px} .mobile-menu .m-foot a{font-size:.98rem;font-weight:400;letter-spacing:0;color:var(--fg-2);border:0;padding:0;opacity:1;transform:none;font-family:inherit} .mobile-menu .m-foot a:hover{color:var(--flame-2)} .mobile-menu .m-foot span{font-size:.85rem} /* ---- 22. Page hero (inner pages) --------------------------------------- */ .phero{padding:clamp(126px,14vw,168px) 0 clamp(44px,5.5vw,72px);position:relative;overflow:hidden} .phero .d1{font-size:clamp(2.5rem,6vw,5rem);margin-top:22px} .phero-glow{position:absolute;z-index:0;right:-12%;top:-30%;width:min(760px,90vw);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(210,90,40,.22),transparent 64%);pointer-events:none} .phero .wrap{position:relative;z-index:1} /* ---- 23. Accordion ------------------------------------------------------ */ .acc-item{border-top:1px solid var(--line)} .acc-item:last-child{border-bottom:1px solid var(--line)} .acc-btn{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,32px); padding:clamp(22px,2.8vw,30px) clamp(0px,1vw,14px);text-align:left;border-radius:14px; transition:background-color .35s var(--e-io); } .acc-btn:hover{background:color-mix(in srgb,var(--flame) 5%,transparent)} .acc-item.open .acc-btn{background:transparent} .acc-inner{padding-inline:clamp(0px,1vw,14px)} .acc-btn .h4{transition:color .35s} .acc-item.open .acc-btn .h4{color:var(--accent-text)} .acc-ico{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line); transition:transform .45s var(--e-out),border-color .35s,background-color .35s} .acc-ico::before,.acc-ico::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;margin:-1px 0 0 -6.5px;background:currentColor;border-radius:2px;transition:transform .45s var(--e-out)} .acc-ico::after{transform:rotate(90deg)} .acc-item.open .acc-ico{background:var(--flame);border-color:transparent;color:#fff} .acc-item.open .acc-ico::after{transform:rotate(0)} .acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--e-out)} .acc-item.open .acc-body{grid-template-rows:1fr} .acc-body > div{overflow:hidden} .acc-inner{padding-bottom:28px;max-width:70ch} /* ---- 24. Misc ----------------------------------------------------------- */ .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;letter-spacing:.02em} .hl{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .3s} .hl:hover{text-decoration-color:currentColor} .dim{color:var(--muted)} .center{text-align:center} .mt-l{margin-top:clamp(28px,3.4vw,46px)} .mt-m{margin-top:clamp(18px,2.2vw,28px)} .noscroll{overflow: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:0} .skip{position:absolute;left:-9999px;z-index:200;padding:12px 18px;background:#A8431B;color:#fff;border-radius:0 0 10px 0;font-weight:700} .skip:focus{left:0;top:0} :focus-visible{outline:2px solid var(--flame-2);outline-offset:3px;border-radius:4px} /* ---- 25. Responsive ----------------------------------------------------- */ @media (max-width:1080px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .stats{grid-template-columns:repeat(2,1fr)} .scrub{grid-template-columns:1fr;gap:34px} .scrub-sticky{position:relative;top:auto;max-width:340px} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .nav-links,.nav-right .btn{display:none} .burger{display:block} .g3{grid-template-columns:1fr} .split{grid-template-columns:1fr} .panel{min-height:0} .cmp{font-size:.9rem;min-width:640px} } @media (max-width:680px){ .g2,.g4,.form-grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr} .hero{min-height:auto;padding:130px 0 70px} .hero-foot{gap:22px 30px} .scroll-cue{display:none} } /* ========================================================================== 26. Infographics Single-hue magnitude charts. Every mark is directly labelled, so identity never depends on colour alone. Neutral grey is a reference mark, not a second category. ========================================================================== */ .chart{--c-mark:var(--accent);--c-ref:var(--muted);--c-track:color-mix(in srgb,var(--fg) 14%,transparent)} .chart-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:22px} .chart-title{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em} .chart-note{font-size:.8rem;color:var(--muted)} .legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;font-size:.82rem;color:var(--fg-2)} .legend span{display:inline-flex;align-items:center;gap:7px} .legend i{width:11px;height:11px;border-radius:3px;flex:none} /* --- horizontal bars --- */ .chart.has-subs .bar-row{grid-template-columns:minmax(150px,230px) 1fr auto} .bar-row{display:grid;grid-template-columns:minmax(96px,var(--lw,160px)) 1fr auto;align-items:center;gap:clamp(10px,1.6vw,20px);padding:9px 0} .bar-label{font-size:.9rem;color:var(--fg);font-weight:600;letter-spacing:-.01em} .bar-sub{display:block;font-size:.76rem;color:var(--muted);font-weight:400;letter-spacing:0} .bar-track{display:block;position:relative;height:12px;border-radius:6px;background:var(--c-track);overflow:hidden} .bar-fill{ display:block;height:100%;width:0;border-radius:6px; background:linear-gradient(90deg,var(--flame) 0%,var(--flame-2) 100%); transition:width 1.15s var(--e-out);transition-delay:var(--d,0ms); } .bar-fill.ref{background:var(--c-ref);opacity:.55} .chart.is-in .bar-fill{width:var(--w,0%)} .bar-val{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.02em;color:var(--fg);min-width:62px;text-align:right;font-variant-numeric:tabular-nums} .bar-row:hover .bar-fill{filter:brightness(1.08)} .bar-row + .bar-row{border-top:1px solid var(--line-2)} /* --- versus rows (two marks, one measure) --- */ .vs-row{padding:18px 0;border-top:1px solid var(--line)} .vs-row:last-child{border-bottom:1px solid var(--line)} .vs-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px} .vs-name{font-size:.9rem;font-weight:600} .vs-figure{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.03em} .vs-figure.mark{color:var(--accent)} /* --- funnel --- */ .funnel{display:flex;flex-direction:column;gap:12px} .funnel-stage{ position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px; padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);border-radius:14px; border:1px solid var(--line);background:var(--card); width:var(--fw,100%);margin-inline:auto; opacity:0;transform:translateY(16px) scaleX(.94);transform-origin:center; transition:opacity .7s var(--e-out),transform .8s var(--e-out);transition-delay:var(--d,0ms); } .chart.is-in .funnel-stage{opacity:1;transform:none} .funnel-stage:last-child{background:linear-gradient(100deg,#A8431B,#BE4E1E);border-color:transparent;color:#fff} .funnel-stage:last-child .funnel-sub{color:#fff} .funnel-n{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.035em;line-height:1;flex:none} .funnel-sub{font-size:.84rem;color:var(--muted);margin-top:4px;display:block;font-weight:400;letter-spacing:0} .funnel-lbl{font-size:.94rem;font-weight:600;text-align:right} .funnel-arrow{display:grid;place-items:center;height:14px;color:var(--muted);opacity:0;transition:opacity .5s var(--e-out) var(--d,0ms)} .chart.is-in .funnel-arrow{opacity:.55} /* --- coverage band --- */ .tz{display:grid;gap:10px} .tz-scale{display:grid;grid-template-columns:minmax(90px,140px) 1fr;gap:clamp(10px,1.6vw,18px);font-size:.72rem;color:var(--muted)} .tz-hours{display:grid;grid-template-columns:repeat(4,1fr);text-align:left} .tz-row{display:grid;grid-template-columns:minmax(90px,140px) 1fr;gap:clamp(10px,1.6vw,18px);align-items:center} .tz-name{font-size:.88rem;font-weight:600} .tz-name small{display:block;font-size:.74rem;color:var(--muted);font-weight:400} .tz-track{position:relative;height:26px;border-radius:8px;background:var(--c-track);overflow:hidden} .tz-seg{ position:absolute;top:0;bottom:0;border-radius:8px; background:linear-gradient(90deg,var(--flame) 0%,var(--flame-2) 100%); left:var(--s,0%);width:var(--w,0%); transform:scaleX(0);transform-origin:left; transition:transform .95s var(--e-out);transition-delay:var(--d,0ms); } .chart.is-in .tz-seg{transform:scaleX(1)} .tz-seg.soft{opacity:.42} /* --- arc pair --- */ .arcs{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,54px)} .arc{text-align:center;flex:1;min-width:130px} .arc svg{width:100%;max-width:160px;margin-inline:auto;display:block} .arc .track{fill:none;stroke:var(--c-track);stroke-width:9} .arc .val{fill:none;stroke:var(--flame);stroke-width:9;stroke-linecap:round; transform:rotate(-90deg);transform-origin:50% 50%; transition:stroke-dashoffset 1.2s var(--e-out);transition-delay:var(--d,0ms)} .arc.ref .val{stroke:var(--c-ref);opacity:.6} .arc-c{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;font-size:1.55rem;letter-spacing:-.035em;fill:var(--fg)} .arc-lbl{margin-top:12px;font-size:.86rem;font-weight:600} .arc-sub{font-size:.78rem;color:var(--muted)} @media (max-width:600px){ .bar-row{grid-template-columns:1fr auto;gap:8px 12px} .bar-row .bar-track{grid-column:1/-1;order:3} .tz-row,.tz-scale{grid-template-columns:1fr} } /* ========================================================================== 27. Select — a themed listbox that replaces the OS dropdown. The native