/* ============================================================================ Algebra Solutions FZE - v11 · Theme toggle REMOVED. Light is the base; dark is now a SECTION property (.sec-dark) that re-declares the tokens locally, so any section can be dark without a global mode. Custom properties inherit, so every component inside simply picks up the darker palette. · Semantic alert colours added (red / amber) for risk states only. · Em dashes replaced with hyphens throughout the copy. ========================================================================== */ :root{ /* brand */ --green:#7ED956; --green-press:#6BC845; --green-deep:#15803D; --green-tint:#EDFBE6; /* semantic - risk only, never decorative */ --danger:#DC2626; --danger-ink:#991B1B; --danger-tint:#FEE2E2; --faint:#CBD7E4; /* outlined FAQ numeral */ --warn:#D97706; --warn-ink:#92400E; --warn-tint:#FEF3C7; /* light surfaces */ --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7FAFC; --surface-3:#EFF4F9; --ink:#0D1522; --soft:#4E5D74; --mute:#78869C; --line:#E4EAF1; --line-2:#EFF3F8; --track:#E4EAF1; --logo-ink:#0D1522; --nav-bg:rgba(255,255,255,.88); --nav-ink:#0D1522; --shadow-sm:0 1px 3px rgba(13,21,34,.06); --shadow:0 12px 32px rgba(13,21,34,.08); --shadow-lg:0 28px 64px rgba(13,21,34,.14); --display:'Plus Jakarta Sans','Manrope',system-ui,sans-serif; --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --sec-y:clamp(56px,7vw,104px); --gap:clamp(16px,2vw,24px); --r:16px; --r-lg:22px; --pill:999px; --ease:cubic-bezier(.22,.75,.25,1); --maxw:1180px; --gut:clamp(18px,4.5vw,40px); color-scheme:light; } /* ── DARK SECTION ──────────────────────────────────────────────────────── Re-declares the palette locally. Everything inside inherits it. */ .sec-dark{ --bg:#080A0D; --surface:#12161C; --surface-2:#0C1013; --surface-3:#171C23; --ink:#F2F5F3; --soft:#A7B0AC; --mute:#818B86; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06); --track:rgba(255,255,255,.13); --logo-ink:#FFFFFF; --green-deep:#8FE86B; --green-tint:rgba(126,217,86,.13); --danger:#F87171; --danger-ink:#FCA5A5; --danger-tint:rgba(220,38,38,.16); --faint:rgba(255,255,255,.22); --warn:#FBBF24; --warn-ink:#FCD34D; --warn-tint:rgba(217,119,6,.18); --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow:0 12px 32px rgba(0,0,0,.55); --shadow-lg:0 28px 64px rgba(0,0,0,.62); background:var(--bg); color:var(--ink); color-scheme:dark; } /* ── reset ──────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;min-width:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} body{font-family:var(--body);background:var(--bg);color:var(--ink);font-size:16px; line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip} img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} ::selection{background:var(--green);color:#0D1522} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:12px 18px;z-index:9999} .skip:focus{left:0;top:0} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} /* fail-safe reveal */ .js-reveal .reveal{opacity:0;transform:translate3d(0,12px,0); transition:opacity .55s var(--ease),transform .55s var(--ease)} .js-reveal .reveal.is-in{opacity:1;transform:none} .js-reveal .reveal[data-d="1"]{transition-delay:.06s} .js-reveal .reveal[data-d="2"]{transition-delay:.12s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js-reveal .reveal{opacity:1!important;transform:none!important;transition:none} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ── type ───────────────────────────────────────────────────────────────── */ h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.1; letter-spacing:-.028em;color:var(--ink);text-wrap:balance} .t-hero{font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.05;letter-spacing:-.035em} .t-sec{font-size:clamp(1.65rem,3.2vw,2.4rem)} .kick{font-family:var(--mono);font-size:clamp(.62rem,1.4vw,.7rem);font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep)} .lede{font-size:clamp(.97rem,1.15vw,1.08rem);color:var(--soft);max-width:58ch;text-wrap:pretty} .fine{font-size:clamp(.75rem,1.1vw,.8rem);line-height:1.6;color:var(--mute);text-wrap:pretty} .num{font-variant-numeric:tabular-nums;letter-spacing:-.02em} .hl{color:var(--green)} strong{font-weight:700;color:var(--ink)} .section{padding-block:var(--sec-y)} .section--tight{padding-block:clamp(40px,5vw,68px)} .alt{background:var(--surface-2)} .sec-head{display:grid;gap:var(--s2);max-width:62ch;margin-bottom:clamp(28px,3.4vw,46px)} /* ── buttons ────────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-weight:700;font-size:clamp(.84rem,1.1vw,.9rem);line-height:1; padding:.92em 1.5em;border-radius:var(--pill);border:1.5px solid transparent; transition:transform .18s var(--ease),background .22s,border-color .22s,color .22s} .btn svg{width:1.05em;height:1.05em;flex:none} .btn--primary{background:var(--green);color:#0D1522;box-shadow:0 6px 18px rgba(126,217,86,.28)} .btn--primary:hover{background:var(--green-press);transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)} .btn--dark{background:var(--ink);color:var(--bg)} /* ── nav (transparent over the dark hero, light panel once stuck) ───────── */ .nav{position:fixed;inset:0 0 auto 0;z-index:900;border-bottom:1px solid transparent; transition:background .3s var(--ease),border-color .3s,box-shadow .3s; --nav-fg:#F2F5F3; --logo-ink:#FFFFFF} .nav.stuck{background:var(--nav-bg);backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);border-bottom-color:var(--line); box-shadow:var(--shadow-sm);--nav-fg:#0D1522;--logo-ink:#0D1522} .nav-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); height:clamp(62px,7vw,76px)} .brand{display:flex;align-items:center;gap:11px;flex:none} .brand .logo{height:clamp(30px,4vw,38px);width:auto;flex:none} /* brand lockup: no FZE / Dubai sub-line, larger wordmark */ .brand-txt{font-family:var(--display);font-size:clamp(1.02rem,1.9vw,1.22rem);font-weight:800; letter-spacing:-.025em;line-height:1;color:var(--nav-fg);transition:color .3s var(--ease)} .nav-links{display:none;align-items:center;gap:clamp(16px,2.2vw,28px)} .nav-links a{font-size:.87rem;font-weight:600;color:var(--nav-fg);opacity:.82; position:relative;padding-block:4px;transition:opacity .2s,color .3s} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--green);border-radius:2px;transition:right .25s var(--ease)} .nav-links a:hover{opacity:1} .nav-links a:hover::after{right:0} .nav-cta{display:flex;align-items:center;gap:var(--s2);flex:none} .nav-cta .btn{display:none} .burger{width:40px;height:40px;display:grid;place-items:center;border-radius:11px; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)} .nav.stuck .burger{border-color:var(--line);background:var(--surface)} .burger i{display:block;width:17px;height:2px;background:var(--nav-fg);border-radius:2px;position:relative} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:2px; background:var(--nav-fg);border-radius:2px} .burger i::before{top:-6px} .burger i::after{top:6px} .drawer{position:fixed;inset:0;z-index:950;background:#080A0D;color:#F2F5F3; display:flex;flex-direction:column;justify-content:center;padding:var(--gut); transform:translateY(-100%);visibility:hidden; transition:transform .42s var(--ease),visibility .42s} .drawer.open{transform:none;visibility:visible} .drawer a{font-family:var(--display);font-size:clamp(1.35rem,6vw,1.9rem);font-weight:800; padding:var(--s2) 0;border-bottom:1px solid rgba(255,255,255,.08);display:flex; justify-content:space-between;align-items:baseline;color:#F2F5F3} .drawer a .n{font-family:var(--mono);font-size:.58rem;color:#818B86} .drawer .x{position:absolute;top:var(--s3);right:var(--gut);font-family:var(--mono); font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:var(--s1);color:#F2F5F3} /* ── hero ───────────────────────────────────────────────────────────────── */ .hero{--mq-h:clamp(52px,5.8vw,64px); position:relative;isolation:isolate;overflow:clip; /* Fills the viewport exactly. The old min(92vh,880px) left a sliver of the next (light) section showing under the marquee on tall screens, and that white stripe pulled the eye straight off the hero. 100dvh so a mobile address bar cannot reopen the same gap. */ min-height:100vh; min-height:100dvh; display:flex;flex-direction:column;justify-content:center; padding-top:calc(clamp(62px,7vw,76px) + clamp(30px,4vw,56px)); padding-bottom:calc(clamp(34px,4.2vw,58px) + var(--mq-h))} /* Short screens: trim the padding, but NEVER drop min-height - doing that let the next section show as a sliver again, which is the whole bug. */ @media(max-height:660px){.hero{padding-block:calc(clamp(62px,7vw,76px) + 18px) calc(22px + var(--mq-h))}} .hero-video{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero-video video{width:100%;height:100%;object-fit:cover;object-position:62% 0%; opacity:.78;filter:saturate(1) contrast(1.03)} /* scrim: solid behind the copy, clear over the skyline, and a soft base fade so the footage never ends in a hard horizontal cut above the marquee */ /* the vertical pass now ramps to FULLY solid at 100%, over a long fade, so the skyline dissolves into the page instead of being sliced by a horizontal edge */ .hero-video::after{content:"";position:absolute;inset:0;background: linear-gradient(100deg,#080A0D 0%,rgba(8,10,13,.90) 26%,rgba(8,10,13,.42) 52%,rgba(8,10,13,.05) 78%), linear-gradient(180deg,rgba(8,10,13,.55) 0%,rgba(8,10,13,0) 22%,rgba(8,10,13,0) 46%, rgba(8,10,13,.34) 68%,rgba(8,10,13,.78) 86%,#080A0D 100%)} @media(max-width:899px){ .hero-video::after{background: linear-gradient(180deg,rgba(8,10,13,.72) 0%,rgba(8,10,13,.50) 42%, rgba(8,10,13,.70) 74%,#080A0D 100%)} } .hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px);align-items:center} .hero h1{margin:var(--s3) 0;max-width:15ch} .hero .lede{margin-bottom:var(--s5);max-width:46ch} .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2)} /* live next-deadline card */ .dl-card{background:rgba(12,16,20,.52);backdrop-filter:blur(7px) saturate(1.15); -webkit-backdrop-filter:blur(7px) saturate(1.15);border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);box-shadow:0 22px 50px rgba(0,0,0,.4); padding:clamp(20px,2.6vw,30px)} .dl-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2); flex-wrap:wrap;padding-bottom:var(--s3);border-bottom:1px solid rgba(255,255,255,.10)} .dl-top .t{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em; text-transform:uppercase;color:#9AA39E} .dl-live{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:700; color:#0D1522;background:var(--green);padding:5px 11px;border-radius:var(--pill)} .dl-live i{width:6px;height:6px;border-radius:50%;background:#0D1522;flex:none; animation:dlpulse 2.2s ease-in-out infinite} @keyframes dlpulse{0%,100%{opacity:1}50%{opacity:.3}} @media(prefers-reduced-motion:reduce){.dl-live i{animation:none}} .dl-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,28px); align-items:center;padding-block:var(--s4)} .dl-count{text-align:center;flex:none} .dl-count .n{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800; line-height:.95;color:#F2F5F3;letter-spacing:-.04em;display:block} .dl-count .u{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;color:#9AA39E;display:block;margin-top:6px} .dl-what h3{font-size:clamp(.98rem,1.5vw,1.12rem);color:#F2F5F3;line-height:1.32;margin-bottom:8px} .dl-meta{display:flex;flex-wrap:wrap;gap:8px} .dl-chip{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase; font-weight:600;padding:4px 9px;border-radius:5px;background:rgba(255,255,255,.10);color:#CBD3CE} .dl-chip.acc{background:var(--green);color:#0D1522} .dl-chip.warn{background:var(--warn);color:#3A2400} .dl-foot{padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.10); font-size:clamp(.76rem,1.05vw,.8rem);line-height:1.6;color:#9AA39E} .dl-foot a{color:var(--green);font-weight:700} /* ── jurisdictions marquee ──────────────────────────────────────────────── */ /* The jurisdictions rail sits INSIDE the hero, riding on the footage at its base. No background, no border-block: a standalone band with hairlines read as a strip cut out of the page, which is exactly what the client flagged. The hero scrim above is already solid by this point, so the names stay legible. */ .marquee{position:absolute;left:0;right:0;bottom:0;z-index:2; height:var(--mq-h);display:flex;align-items:center;overflow:hidden; background:transparent;border:0} .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0; width:clamp(36px,7vw,110px);z-index:2;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,#080A0D 18%,transparent)} .marquee::after{right:0;background:linear-gradient(270deg,#080A0D 18%,transparent)} /* a standalone rail (used on the options page) keeps flow behaviour */ .marquee.is-band{position:relative;height:auto;padding-block:clamp(15px,2vw,21px); background:var(--bg)} /* flex:none matters - as a flex item of .marquee the track would otherwise shrink to fit and the jurisdiction names would collide */ .marquee-track{display:flex;flex:none;width:max-content;animation:marq 46s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}} .mq{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,30px); padding-inline:clamp(14px,1.8vw,22px);font-family:var(--mono); font-size:clamp(.72rem,1.05vw,.84rem);font-weight:500;letter-spacing:.16em; color:rgba(242,245,243,.72);white-space:nowrap} .mq::after{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.26);flex:none} .mq.is-wide{color:var(--green-deep);font-weight:700} .mq.is-wide::after{background:var(--green)} /* ── cards / grids ──────────────────────────────────────────────────────── */ .grid{display:grid;gap:var(--gap)} .auto-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))} .auto-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column; transition:transform .22s var(--ease),box-shadow .22s,border-color .22s} .card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent} .card .n{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--mute); text-transform:uppercase;margin-bottom:6px} .card h3{font-size:clamp(1rem,1.5vw,1.08rem);font-weight:800;margin-bottom:5px;line-height:1.3} .card p{font-size:clamp(.82rem,1.1vw,.87rem);color:var(--soft);line-height:1.6} /* ── services ───────────────────────────────────────────────────────────── */ .svc-group{margin-top:clamp(30px,3.6vw,52px)} .svc-group:first-of-type{margin-top:0} .svc-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap; padding-bottom:var(--s2);margin-bottom:var(--s3);border-bottom:1px solid var(--line)} .svc-head .sg-ico{width:44px;height:44px;border-radius:13px;background:var(--green-tint); display:grid;place-items:center;flex:none} .svc-head .sg-ico svg{width:23px;height:23px;color:var(--green-deep)} .svc-head .sg-ico svg .fill{fill:var(--green);stroke:none} .svc-head h3{font-size:clamp(1.08rem,1.8vw,1.28rem);font-weight:800} .svc-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .svc-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))} @media (min-width:900px){ .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .svc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .svc-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} } /* v12: the mark leads the card. At 38px inline-left it was missed entirely - the client asked for the services to read visually first. */ .svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(20px,2.2vw,26px);display:grid;grid-template-columns:minmax(0,1fr); gap:var(--s3);align-content:start;position:relative;overflow:hidden; transition:transform .2s var(--ease),box-shadow .2s,border-color .2s} .svc::after{content:"";position:absolute;inset:auto -40px -52px auto;width:132px;height:132px; border-radius:50%;background:var(--green-tint);opacity:.5;transition:opacity .25s,transform .3s var(--ease)} .svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent} .svc:hover::after{opacity:.9;transform:scale(1.12)} .svc > *{position:relative;z-index:1} .svc .s-ico{width:clamp(56px,6vw,68px);height:clamp(56px,6vw,68px);border-radius:18px; background:linear-gradient(145deg,var(--green-tint),transparent 78%); border:1px solid var(--green-tint); display:grid;place-items:center;flex:none; transition:transform .3s var(--ease),border-color .25s} .svc:hover .s-ico{transform:translateY(-2px) rotate(-3deg);border-color:var(--green)} .svc .s-ico svg{width:clamp(28px,3vw,34px);height:clamp(28px,3vw,34px);color:var(--green-deep)} .svc .s-ico svg .fill{fill:var(--green);stroke:none} .sec-dark .svc .s-ico svg .fill{fill:var(--green)} .svc h4{font-family:var(--display);font-size:clamp(.92rem,1.3vw,1rem);font-weight:800; color:var(--ink);line-height:1.3;margin-bottom:4px} .svc p{font-size:clamp(.79rem,1.05vw,.84rem);color:var(--soft);line-height:1.55} .svc--wide{padding:clamp(22px,2.6vw,30px)} .svc--wide .s-ico{width:clamp(62px,6.6vw,76px);height:clamp(62px,6.6vw,76px);border-radius:20px} .svc--wide .s-ico svg{width:clamp(31px,3.3vw,38px);height:clamp(31px,3.3vw,38px)} .svc--wide h4{font-size:clamp(1rem,1.5vw,1.12rem);margin-bottom:6px} .svc-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s3)} .svc-list span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em; text-transform:uppercase;font-weight:600;color:var(--soft); background:var(--surface-2);border:1px solid var(--line);padding:5px 10px;border-radius:var(--pill)} /* ── calendar (section 03) ──────────────────────────────────────────────── */ .cal-wrap{display:grid;gap:var(--gap)} .cal-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:clamp(16px,2.2vw,26px)} .cal-block .cb-lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em; text-transform:uppercase;color:var(--mute);display:block;margin-bottom:var(--s3)} .cal{display:grid} .cal-item{display:grid;grid-template-columns:1fr;gap:5px var(--s3); padding:var(--s3) var(--s2);border-radius:12px;position:relative} @media(min-width:780px){.cal-item{grid-template-columns:104px minmax(0,1fr) auto;align-items:center}} .cal-item:not(:last-child)::after{content:"";position:absolute;left:var(--s2);right:var(--s2); bottom:0;height:1px;background:var(--line-2)} .cal-item .d{font-family:var(--mono);font-size:.79rem;font-weight:500;color:var(--ink); font-variant-numeric:tabular-nums;white-space:nowrap} .cal-item .w{font-size:clamp(.85rem,1.15vw,.91rem);font-weight:500;color:var(--ink);line-height:1.5} .cal-item .w small{display:block;font-weight:400;font-size:.78rem;color:var(--mute);margin-top:3px} .cal-item .tagwrap{display:flex;gap:7px;flex-wrap:wrap} @media(min-width:780px){.cal-item .tagwrap{justify-content:flex-end}} .cal-tag{font-family:var(--mono);font-size:.57rem;letter-spacing:.1em;text-transform:uppercase; font-weight:600;padding:3px 8px;border-radius:5px;background:var(--surface-3); color:var(--mute);white-space:nowrap} .cal-tag.svc{background:var(--green-tint);color:var(--green-deep)} .cal-item.is-passed{opacity:.45} .cal-item.is-next{background:var(--warn-tint)} .cal-item.is-next::after{display:none} .cal-item.is-next .cal-tag.state{background:var(--warn);color:#3A2400} .cal-item.is-soon .cal-tag.state{background:var(--warn-tint);color:var(--warn-ink)} .recur{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))} .recur-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2);align-items:start; background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:var(--s3)} .recur-item .r-ico{width:32px;height:32px;border-radius:9px;background:var(--green-tint); display:grid;place-items:center;flex:none} .recur-item .r-ico svg{width:16px;height:16px;color:var(--green-deep)} .recur-item h4{font-family:var(--display);font-size:.9rem;font-weight:800;color:var(--ink); line-height:1.3;margin-bottom:3px} .recur-item p{font-size:.79rem;color:var(--soft);line-height:1.55} /* ── the firm ───────────────────────────────────────────────────────────── */ .lead{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,52px);align-items:center} @media(min-width:900px){.lead{grid-template-columns:minmax(270px,.68fr) minmax(0,1.32fr)}} .portrait{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow);background:var(--surface-3);aspect-ratio:4/4.5; position:relative;display:grid;place-items:center;width:100%} .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%} .portrait .mark{display:grid;place-items:center;gap:var(--s2);padding:var(--s4) var(--s4) 88px;text-align:center} .portrait .mark svg{width:clamp(66px,8vw,86px);height:auto} .portrait .mark .mt{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;color:var(--mute)} .portrait .cap{position:absolute;inset:auto 0 0 0;padding:var(--s3); background:linear-gradient(0deg,rgba(4,6,9,.95),rgba(4,6,9,.55) 62%,transparent);color:#fff} .portrait .cap .nm{font-family:var(--display);font-weight:800;font-size:.98rem;color:#fff} .portrait .cap .rl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em; text-transform:uppercase;color:var(--green);margin-top:3px} .lead-body p{color:var(--soft);font-size:clamp(.95rem,1.2vw,1.02rem);line-height:1.72} .lead-body p + p{margin-top:var(--s3)} .lead-quote{font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.32rem);font-weight:700; color:var(--ink);line-height:1.45;letter-spacing:-.02em;margin-bottom:var(--s4); padding-left:var(--s3);border-left:3px solid var(--green)} /* ── CTA ────────────────────────────────────────────────────────────────── */ .ctaband{background:linear-gradient(118deg,var(--green),#A6EC87);border-radius:var(--r-lg); padding:clamp(26px,4vw,56px);display:grid;gap:var(--s4);align-items:center} @media(min-width:860px){.ctaband{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}} .ctaband h2{color:#0D1522} .ctaband p{color:#10331B;opacity:.86;font-weight:500; max-width:44ch;margin-top:var(--s2);font-size:clamp(.9rem,1.2vw,1rem)} .ctaband .acts{display:flex;flex-wrap:wrap;gap:var(--s2)} @media(min-width:860px){.ctaband .acts{justify-self:end}} .ctaband .btn--dark{background:#0D1522;color:#fff} .ctaband .btn--ghost{border-color:rgba(13,21,34,.28);color:#10331B} /* ── contact ────────────────────────────────────────────────────────────── */ .contact{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px)} @media(min-width:920px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}} .cl{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--s3) 0;border-bottom:1px solid var(--line)} .cl:first-child{border-top:1px solid var(--line)} @media(min-width:520px){.cl{grid-template-columns:112px minmax(0,1fr);align-items:baseline;gap:var(--s2)}} .cl dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)} .cl dd{font-size:clamp(.88rem,1.2vw,.94rem);font-weight:500;color:var(--ink);line-height:1.55} .cl dd a{color:var(--green-deep)} .cl dd a:hover{text-decoration:underline} .social{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap} .social a{width:40px;height:40px;border-radius:11px;border:1px solid var(--line); display:grid;place-items:center;color:var(--ink);background:var(--surface); transition:transform .18s,background .2s,color .2s,border-color .2s} .social a:hover{background:var(--green);color:#0D1522;border-color:var(--green);transform:translateY(-2px)} .social svg{width:16px;height:16px} .mapslot{margin-top:var(--s3);border-radius:var(--r);overflow:hidden;border:1px solid var(--line); height:clamp(170px,26vw,210px)} .mapslot iframe{width:100%;height:100%;border:0} form.lead-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:clamp(20px,3vw,36px)} form.lead-form h3{font-size:clamp(1.1rem,1.8vw,1.28rem);font-weight:800;margin-bottom:var(--s1)} .fgrid{display:grid;gap:var(--s3);margin-top:var(--s3); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} .fgrid.one{grid-template-columns:1fr} .fgrid label{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em; text-transform:uppercase;color:var(--mute);margin-bottom:7px} .fgrid input,.fgrid select,.fgrid textarea{width:100%;background:var(--surface-2); border:1.5px solid var(--line);border-radius:10px;padding:12px 14px; font-size:clamp(.88rem,1.2vw,.93rem);color:var(--ink)} .fgrid textarea{resize:vertical;min-height:88px;line-height:1.6} .fgrid input:focus,.fgrid select:focus,.fgrid textarea:focus{outline:none;border-color:var(--green);background:var(--surface)} form.lead-form .btn{margin-top:var(--s3);width:100%} /* ── footer ─────────────────────────────────────────────────────────────── */ footer{padding-block:clamp(44px,5vw,76px) var(--s5)} .fcols{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))} footer h4{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.13em; text-transform:uppercase;color:var(--green);margin-bottom:var(--s2)} footer .fcol a{font-size:.85rem;color:var(--soft);display:block;padding:5px 0;transition:color .2s} footer .fcol a:hover{color:var(--ink)} footer .tagline{max-width:32ch;margin-top:var(--s3);font-size:.86rem;color:var(--soft);line-height:1.65} footer address{font-style:normal;font-size:.83rem;color:var(--soft);margin-top:var(--s2);line-height:1.7} .foot-social{display:flex;gap:10px;margin-top:var(--s3);flex-wrap:nowrap} .foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line); display:grid;place-items:center;color:var(--soft);background:var(--surface);flex:none; transition:transform .18s var(--ease),background .2s,color .2s,border-color .2s} .foot-social a:hover{background:var(--green);color:#0D1522;border-color:var(--green);transform:translateY(-2px)} .foot-social svg{width:16px;height:16px} .foot-end{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:space-between;align-items:center} .foot-end span{font-family:var(--mono);font-size:.64rem;letter-spacing:.05em;color:var(--mute)} .wa{position:fixed;right:18px;bottom:18px;z-index:800;display:inline-flex;align-items:center;gap:9px; background:var(--green);color:#0D1522;font-weight:700;font-size:.86rem; padding:13px;border-radius:50%;box-shadow:0 10px 26px rgba(126,217,86,.42);transition:transform .2s} .wa:hover{transform:translateY(-2px)} .wa svg{width:21px;height:21px;flex:none} .wa .wa-t{display:none} /* ── pending-selection notice (section 02 placeholder) ──────────────────── */ .pending{border:1.5px dashed var(--warn);background:var(--warn-tint);border-radius:var(--r); padding:var(--s3);display:grid;gap:6px;margin-bottom:var(--s4)} .pending .p-lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em; text-transform:uppercase;color:var(--warn-ink);font-weight:700} .pending p{font-size:.85rem;color:var(--warn-ink);line-height:1.55} @media (min-width:640px){ .cl{grid-template-columns:112px minmax(0,1fr)} .wa{padding:12px 18px 12px 14px;border-radius:var(--pill)} .wa .wa-t{display:inline} } @media (min-width:900px){ .nav-links{display:flex} .nav-cta .btn{display:inline-flex} .burger{display:none} .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.82fr);gap:clamp(56px,7.5vw,112px)} } @media (min-width:1200px){ .hero-grid{gap:120px} } /* ── FAQ ─────────────────────────────────────────────────────────── */ /* A faithful port of the component the client supplied: same two-column bordered grid, same oversized outlined numeral bleeding off the corner, same 22px square plus rotating to a cross, same max-height reveal, same one-open-at-a-time. Only the palette and the type are ours - it sits on a LIGHT section here. */ .faq-intro{margin-bottom:3rem} .faq-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono); font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep); font-weight:600;margin-bottom:.85rem} .faq-tag::before{content:"";width:18px;height:1px;background:var(--green-deep)} .faq-title{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.05;letter-spacing:-.02em;margin-bottom:.85rem;color:var(--ink)} .faq-desc{color:var(--soft);font-size:.95rem;max-width:52ch;line-height:1.8;font-weight:300} .faq-desc .lnk{display:inline-flex;font-size:.9rem;font-weight:600;color:var(--green-deep); background:none;border:0;padding:0;cursor:pointer;text-decoration:underline; text-underline-offset:3px} .faq-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)} .faq-item{position:relative;overflow:hidden;cursor:pointer; border-bottom:1px solid var(--line);border-right:1px solid var(--line)} .faq-item:nth-child(2n){border-right:none} .faq-item:nth-last-child(-n+2):not(:nth-child(2n)):nth-child(2n+1){border-bottom:none} .faq-item:last-child{border-bottom:none} .faq-item:nth-last-child(2):nth-child(2n+1){border-bottom:none} .faq-num{font-family:var(--display);font-size:5rem;font-weight:800;color:transparent; -webkit-text-stroke:1px var(--faint);line-height:1;position:absolute;top:.4rem;right:-1.1rem; pointer-events:none;transition:-webkit-text-stroke-color .3s} .faq-item.open .faq-num,.faq-item:hover .faq-num{-webkit-text-stroke-color:var(--green)} .faq-q-wrap{padding:2rem 2rem 0;position:relative;z-index:1} .faq-q{width:100%;text-align:left;background:none;border:0;color:var(--ink);cursor:pointer; font-family:var(--display);font-size:.95rem;font-weight:700;padding:0 5rem 0 0;line-height:1.4; display:flex;justify-content:space-between;align-items:flex-start;gap:1rem} .faq-icon{width:22px;height:22px;flex-shrink:0;border:1px solid var(--line);display:grid; place-items:center;transition:transform .3s,border-color .3s;margin-top:2px;color:var(--soft)} .faq-icon svg{width:10px;height:10px} .faq-item.open .faq-icon{transform:rotate(45deg);border-color:var(--green);color:var(--green-deep)} .faq-a{max-height:0;overflow:hidden;transition:max-height .45s,padding .45s; padding:0 2rem;position:relative;z-index:1} .faq-item.open .faq-a{max-height:480px;padding:1rem 2rem 2rem} .faq-a p{font-size:.875rem;color:var(--soft);line-height:1.8} .faq-a p + p{margin-top:.85em} @media(max-width:768px){ .faq-grid{grid-template-columns:1fr} .faq-item{border-right:none!important} .faq-item:nth-last-child(-n+2):not(:nth-child(2n)):nth-child(2n+1){border-bottom:1px solid var(--line)} .faq-item:nth-last-child(2):nth-child(2n+1){border-bottom:1px solid var(--line)} .faq-item:last-child{border-bottom:none} .faq-item.open .faq-a{max-height:620px} } .faq-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2); margin-top:var(--s4);font-size:.9rem;color:var(--soft)} /* ══ v15 ══════════════════════════════════════════════════════════════════ */ /* ── service photograph ──────────────────────────────────────────────────── */ .svc-photo{position:relative;margin:calc(clamp(20px,2.2vw,26px) * -1) calc(clamp(20px,2.2vw,26px) * -1) 0; border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--surface-3)} .svc-photo img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s var(--ease),filter .4s var(--ease);filter:saturate(.92)} .svc:hover .svc-photo img{transform:scale(1.05);filter:saturate(1.05)} .svc-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(13,21,34,0) 55%,rgba(13,21,34,.30) 100%)} .svc .s-ico{margin-top:calc(clamp(56px,6vw,68px) / -2 - 4px);position:relative;z-index:2; background:var(--surface);box-shadow:var(--shadow-sm)} .svc--wide .s-ico{margin-top:calc(clamp(62px,6.6vw,76px) / -2 - 4px)} .svc--wide .svc-photo{margin:calc(clamp(22px,2.6vw,30px) * -1) calc(clamp(22px,2.6vw,30px) * -1) 0; aspect-ratio:21/9} /* ── hero proof rail ─────────────────────────────────────────────────────── */ .proof .pf{transition:transform .25s var(--ease)} .proof .pf:hover{transform:translateX(3px)} /* ── tool 02: the dynamic reassurance block ──────────────────────────────── */ .assist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start; background:var(--green-tint);border:1px solid rgba(126,217,86,.34);border-radius:var(--r); padding:clamp(14px,1.8vw,18px);transition:background .3s var(--ease),border-color .3s} .assist .as-i{width:26px;height:26px;border-radius:50%;background:var(--green);color:#0D1522; display:grid;place-items:center;flex:none;margin-top:1px} .assist .as-i svg{width:14px;height:14px} .assist b{display:block;font-family:var(--display);font-size:.94rem;font-weight:800; color:var(--ink);line-height:1.34;margin-bottom:4px} .assist span#p-as-d{display:block;font-size:.83rem;color:var(--soft);line-height:1.6} .assist .btn{grid-column:2;justify-self:start;margin-top:11px} .btn--sm{padding:.72em 1.15em;font-size:.8rem} .assist.is-warn{background:var(--warn-tint);border-color:var(--warn)} .assist.is-warn .as-i{background:var(--warn);color:#3A2400} .assist.is-dng{background:var(--danger-tint);border-color:var(--danger)} .assist.is-dng .as-i{background:var(--danger);color:#fff} /* ── sectors + client voices ─────────────────────────────────────────────── */ .voices{margin-top:clamp(36px,4.4vw,60px);padding-top:clamp(30px,3.6vw,46px); border-top:1px solid var(--line)} .voices-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:var(--s2);margin-bottom:var(--s4)} .voices-head h3{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:800;letter-spacing:-.02em} .v-src{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mute)} .quotegrid{display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .quo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:var(--s3); justify-content:space-between;position:relative;overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s} .quo:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .quo::before{content:"\201C";position:absolute;top:-6px;right:14px;font-family:var(--display); font-size:3.4rem;font-weight:800;color:var(--green-tint);line-height:1;pointer-events:none} .quo p{font-size:.86rem;color:var(--soft);line-height:1.72;position:relative;z-index:1} .quo footer b{font-family:var(--display);font-size:.88rem;color:var(--ink);font-weight:700} .sect-lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mute);margin:var(--s5) 0 var(--s3)} .deepgrid{display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .deep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(16px,2vw,22px);transition:transform .25s var(--ease),border-color .25s} .deep:hover{transform:translateY(-3px);border-color:var(--green)} .deep h3{font-size:clamp(.96rem,1.35vw,1.06rem);margin-bottom:6px;line-height:1.3} .deep p{font-size:.82rem;color:var(--soft);line-height:1.6} .secgrid{display:flex;flex-wrap:wrap;gap:10px} .sect{font-size:.85rem;font-weight:600;padding:10px 16px;border-radius:var(--pill); background:var(--surface);border:1px solid var(--line);color:var(--ink); transition:border-color .2s,transform .2s var(--ease)} .sect:hover{border-color:var(--green);transform:translateY(-2px)} /* ── insights + alerts ───────────────────────────────────────────────────── */ .postgrid{display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))} .post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,2.2vw,26px);transition:transform .25s var(--ease),box-shadow .25s} .post:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .p-tag{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em; text-transform:uppercase;font-weight:700;color:var(--green-deep);background:var(--green-tint); padding:4px 10px;border-radius:5px;margin-bottom:var(--s2)} .post h3{font-size:clamp(.98rem,1.45vw,1.12rem);line-height:1.34;margin-bottom:9px} .post p{font-size:.84rem;color:var(--soft);line-height:1.65} .alertstrip{margin-top:clamp(30px,3.6vw,48px);display:grid;gap:clamp(20px,2.6vw,38px); align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); background:var(--surface-3);border-radius:var(--r-lg);padding:clamp(22px,2.8vw,36px)} .alertstrip h3{font-size:clamp(1.05rem,1.8vw,1.28rem);margin-bottom:8px;line-height:1.3} .alertstrip p{font-size:.87rem;color:var(--soft);line-height:1.65} .af-row{display:flex;flex-wrap:wrap;gap:10px} .alertform input{flex:1 1 190px;min-width:0;background:var(--surface); border:1.5px solid var(--line);border-radius:var(--pill);padding:13px 20px; color:var(--ink);font-size:.9rem;transition:border-color .2s} .alertform input:focus{outline:none;border-color:var(--green)} .alertform input.bad{border-color:var(--danger)} .af-note{font-size:.76rem;color:var(--mute);margin-top:9px} .af-note.ok{color:var(--green-deep);font-weight:600} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── EN / AR switch ──────────────────────────────────────────────────────── */ /* ── footer disclosure ───────────────────────────────────────────────────── */ .foot-disclosure{font-size:.74rem;line-height:1.65;color:var(--mute);max-width:88ch; padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--line)} /* ── reduced motion: stop everything that moves ──────────────────────────── */ @media(prefers-reduced-motion:reduce){ .cta-fab,.cta-fab .fab-ring{animation:none} .svc:hover .svc-photo img,.quo:hover,.post:hover,.deep:hover,.sect:hover{transform:none} .enq,.enq-veil{transition:none} } /* ── hero D credibility rail ────────────────────────────────────────────── These lived only in the options page's stylesheet; hero D is the shipping hero now, so they belong here. Without them .pf-i has no size and the tick renders at full viewBox scale across the hero. */ .proof{display:grid;gap:11px;align-content:start; background:rgba(12,16,20,.52);backdrop-filter:blur(7px) saturate(1.15); -webkit-backdrop-filter:blur(7px) saturate(1.15); border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg); box-shadow:0 22px 50px rgba(0,0,0,.4);padding:clamp(20px,2.6vw,30px)} .pf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start} .pf-i{width:20px;height:20px;border-radius:50%;background:var(--green);color:#0D1522; display:grid;place-items:center;flex:none;margin-top:.15em} .pf-i svg{width:12px;height:12px;display:block} .pf b{display:block;font-family:var(--display);font-size:.92rem;font-weight:700;color:#F2F5F3; line-height:1.35} .pf small{display:block;font-size:.78rem;color:#A7B0AC;margin-top:3px;line-height:1.5} /* ── hidden must actually hide ──────────────────────────────────────────── .enq and .enq-done set `display`, which beats the UA sheet's [hidden]{display:none} - the thank-you block showed through the form. */ [hidden]{display:none!important} /* ══ tool widget ─ ported from tool-options.html. Section 02 uses every one of these and none of them were in the site stylesheet, which is why it rendered as raw text. ══ */ .tool{display:grid;gap:var(--gap);grid-template-columns:1fr; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:clamp(18px,2.4vw,30px)} .tool{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3vw,40px)} .tin{display:grid;gap:var(--s3);align-content:start} .fld label,.fld>span.l{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em; text-transform:uppercase;color:var(--mute);margin-bottom:9px} .opts{display:flex;flex-wrap:wrap;gap:8px} .opt{position:relative} .opt input{position:absolute;opacity:0;width:0;height:0} .opt span{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:.83rem;font-weight:600; color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line); padding:10px 14px;border-radius:var(--pill);line-height:1.2;transition:all .16s var(--ease)} .opt span::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--mute);flex:none} .opt:hover span{border-color:var(--green)} .opt input:checked + span{border-color:var(--green);background:var(--green-tint);color:var(--green-deep)} .opt input:checked + span::before{background:var(--green);border-color:var(--green)} .opt.chk span::before{border-radius:3px} .num-in{width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:11px; padding:12px 14px;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink); font-variant-numeric:tabular-nums} .num-in:focus{outline:none;border-color:var(--green);background:var(--surface)} .sel-in{width:100%;background:var(--surface-2);border:1.5px solid var(--line);border-radius:11px; padding:12px 14px;font-size:.9rem;color:var(--ink)} .hint{font-size:.75rem;color:var(--mute);margin-top:7px;line-height:1.5} .tout{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r); padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:var(--s3);min-height:260px} .tout-lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)} .big{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;line-height:1; letter-spacing:-.03em;color:var(--ink)} .big.dng{color:var(--danger)} .big.wrn{color:var(--warn)} .big.ok{color:var(--green-deep)} .sub{font-size:.82rem;color:var(--soft)} .rowlist{display:grid;gap:8px} .ri{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center; padding:11px 13px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:.84rem} .ri .dot{width:8px;height:8px;border-radius:50%;background:var(--mute);flex:none} .ri b{font-family:var(--mono);font-size:.72rem;white-space:nowrap;color:var(--ink)} .ri.dng{background:var(--danger-tint);border-color:transparent;color:var(--danger-ink)} .ri.dng .dot{background:var(--danger)} .ri.dng b{color:var(--danger-ink)} .ri.wrn{background:var(--warn-tint);border-color:transparent;color:var(--warn-ink)} .ri.wrn .dot{background:var(--warn)} .ri.wrn b{color:var(--warn-ink)} .ri.ok{background:var(--green-tint);border-color:transparent;color:var(--green-deep)} .ri.ok .dot{background:var(--green)} .ri.ok b{color:var(--green-deep)} .ri small{display:block;opacity:.8;font-size:.75rem;margin-top:2px} .meter{height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden} .meter i{display:block;height:100%;border-radius:99px;transition:width .5s var(--ease)} .verdict{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700; padding:6px 13px;border-radius:var(--pill);background:var(--green-tint);color:var(--green-deep);align-self:flex-start} .verdict.dng{background:var(--danger-tint);color:var(--danger-ink)} .verdict.wrn{background:var(--warn-tint);color:var(--warn-ink)} /* ══ v16 ══════════════════════════════════════════════════════════════════ */ /* ── nav on one line ────────────────────────────────────────────────────── The labels were wrapping because six of them plus the switch plus the CTA exceeded the row. Shorter labels + nowrap + a tighter gap fixes it without shrinking the type to nothing. */ .nav-links a{white-space:nowrap} .nav-links{gap:clamp(13px,1.6vw,22px)} .nav-in{gap:clamp(12px,1.6vw,20px)} @media(min-width:900px) and (max-width:1120px){ .nav-links{gap:12px} .nav-links a{font-size:.82rem} .brand-txt{font-size:1rem} } /* ── 02 Where you stand: proper two-column layout on the dark section ───── */ #position .tool{background:var(--surface);border-color:var(--line)} #position .tout{background:var(--surface-2)} .tool-head{display:grid;gap:6px;margin-bottom:var(--s3)} .tool-head .th-n{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--green-deep)} .tool-head h3{font-size:clamp(1rem,1.5vw,1.14rem);font-weight:800;letter-spacing:-.015em} .opts--stack{display:grid;gap:9px} .opts--stack .opt span{width:100%;justify-content:flex-start;border-radius:12px; padding:13px 15px;font-size:.86rem} .tout .big{font-variant-numeric:tabular-nums} .tout-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2); flex-wrap:wrap;padding-bottom:var(--s2);border-bottom:1px solid var(--line)} .tout-count{font-family:var(--mono);font-size:.66rem;color:var(--mute)} /* ── 04 Who we work with: dark, so it separates from the firm and insights ─ */ #sectors.sec-dark .deep,#sectors.sec-dark .quo{background:var(--surface);border-color:var(--line)} #sectors.sec-dark .sect{background:var(--surface);border-color:var(--line);color:var(--ink)} /* ── horizontal rails: sectors and reviews ──────────────────────────────── A scroller beats a wrapping grid here - it reads as a curated set rather than a list that ran out of room, and it keeps the section short. */ .rail{position:relative;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)} .rail-track{display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; padding-block:4px 18px;scrollbar-width:thin; scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch} .rail-track::-webkit-scrollbar{height:6px} .rail-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .rail-track::-webkit-scrollbar-track{background:transparent} .rail-track > *{scroll-snap-align:start;flex:0 0 clamp(250px,26vw,310px)} .rail-track .quo{flex-basis:clamp(270px,29vw,340px)} .rail::after{content:"";position:absolute;top:0;bottom:18px;right:0;width:clamp(24px,5vw,64px); pointer-events:none;background:linear-gradient(270deg,var(--bg),transparent)} .alt .rail::after{background:linear-gradient(270deg,var(--surface-2),transparent)} .rail-nav{display:flex;gap:8px;margin-top:var(--s2)} .rail-btn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer; border:1px solid var(--line);background:var(--surface);color:var(--soft); transition:border-color .2s,color .2s,transform .2s var(--ease)} .rail-btn svg{width:14px;height:14px} .rail-btn:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-1px)} .rail-btn[disabled]{opacity:.35;cursor:default;transform:none} /* sector chips become a scrolling rail of small plates */ .sectrail .sect{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center; gap:9px;white-space:nowrap} .sectrail .sect::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green); flex:none} /* ── 05 Insights: expandable cards, data-driven ───────────────────────────── */ .post{cursor:pointer;position:relative} .post-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)} .post-ico{width:24px;height:24px;flex:none;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;color:var(--soft);margin-top:2px; transition:transform .3s var(--ease),border-color .25s,color .25s,background .25s} .post-ico svg{width:10px;height:10px} .post:hover .post-ico{border-color:var(--green);color:var(--green-deep)} .post.is-open .post-ico{transform:rotate(45deg);background:var(--green);border-color:var(--green); color:#0D1522} .post-body{height:0;overflow:hidden;transition:height .4s var(--ease)} .post-body-in{padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--line)} .post-body p{font-size:.85rem;color:var(--soft);line-height:1.75} .post-body p + p{margin-top:.8em} .post-src{display:block;margin-top:var(--s2);font-family:var(--mono);font-size:.6rem; letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} /* ── floating buttons: icon-only circles ──────────────────────────────────── */ .fab{position:fixed;z-index:930;width:clamp(52px,5.4vw,58px);height:clamp(52px,5.4vw,58px); border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center; transition:transform .24s var(--ease),box-shadow .24s} .fab svg{width:24px;height:24px} .fab--wa{right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px); background:#25D366;color:#fff;box-shadow:0 10px 26px rgba(37,211,102,.38)} .fab--enq{left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px); background:var(--green);color:#0D1522;box-shadow:0 10px 26px rgba(126,217,86,.40)} .fab:hover{transform:translateY(-3px) scale(1.06)} .fab:focus-visible{outline:3px solid var(--green);outline-offset:3px} /* the enquiry button breathes, continuously */ @media(prefers-reduced-motion:no-preference){ .fab--enq{animation:fabPulse 2.6s var(--ease) infinite} .fab--enq::after{content:"";position:absolute;inset:0;border-radius:50%; border:2px solid var(--green);animation:fabHalo 2.6s var(--ease) infinite;pointer-events:none} .fab--enq.is-open,.fab--enq:hover{animation-play-state:paused} .fab--enq.is-open::after,.fab--enq:hover::after{animation-play-state:paused;opacity:0} } @keyframes fabPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} @keyframes fabHalo{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}} /* arrival: docked but impossible to miss */ .fab--enq.arriving{animation:none} .fab--enq.arriving::after{opacity:0} .fab-label{position:fixed;left:calc(clamp(14px,2vw,26px) + clamp(52px,5.4vw,58px) + 10px); bottom:calc(clamp(14px,2vw,26px) + 8px);z-index:929; display:inline-flex;align-items:center;white-space:nowrap; background:var(--green);color:#0D1522;font-family:var(--display);font-weight:800; font-size:.86rem;padding:11px 18px;border-radius:var(--pill); box-shadow:0 10px 26px rgba(126,217,86,.34); opacity:0;transform:translateX(-14px) scale(.9);transform-origin:0 50%; transition:opacity .38s var(--ease),transform .38s var(--ease);pointer-events:none} .fab-label.is-in{opacity:1;transform:none} /* the periodic callout */ .callout{position:fixed;z-index:929; left:calc(clamp(14px,2vw,26px) + clamp(52px,5.4vw,58px) + 12px); bottom:clamp(16px,2.2vw,30px); width:min(290px,calc(100vw - 110px)); background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px; box-shadow:0 18px 44px rgba(13,21,34,.22);padding:14px 16px; opacity:0;transform:translateY(10px) scale(.95);transform-origin:0 100%; transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none} .callout.is-in{opacity:1;transform:none;pointer-events:auto} .callout p{font-size:.86rem;line-height:1.55;color:var(--ink);font-weight:600} .callout small{display:block;margin-top:5px;font-size:.74rem;color:var(--mute);font-weight:400} .callout .co-x{position:absolute;top:6px;right:6px;width:22px;height:22px;border:0;cursor:pointer; background:none;color:var(--mute);border-radius:50%;display:grid;place-items:center;line-height:1} .callout .co-x svg{width:9px;height:9px} .callout .co-x:hover{color:var(--danger);background:var(--surface-3)} @media(max-width:640px){ .callout{width:min(250px,calc(100vw - 96px));font-size:.82rem} .fab-label{font-size:.8rem;padding:10px 15px} } @media(prefers-reduced-motion:reduce){ .fab--enq{animation:none} .fab--enq::after{display:none} .fab-label,.callout{transition:opacity .2s} } /* ── enquiry panel, trimmed ~30% ──────────────────────────────────────────── */ /* Client picked size D, a little wider and a little shorter: 388 x 484. v15 was 472x699, so this is ~43% less area. Verified the three fields, the button and the fine print all still fit without scrolling. */ .enq{width:min(388px,31vw,calc(100vw - 24px));min-width:min(336px,calc(100vw - 24px)); min-height:min(484px,62vh);max-height:min(540px,74vh); padding:clamp(17px,2vw,23px); left:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + clamp(52px,5.4vw,58px) + 12px)} .enq h2{font-size:clamp(1rem,1.7vw,1.14rem)} .enq-hd{margin-bottom:var(--s2)} .enq-form{gap:11px} .ef input,.ef select{padding:10px 13px;font-size:.87rem} .enq-fine{font-size:.71rem} .enq-done{padding-block:var(--s2)} .enq-done .ed-i{width:40px;height:40px} .enq-done .ed-i svg{width:19px;height:19px} @media(max-width:520px){ /* width:auto plus left/right was resolving to the full viewport, so the panel lost its side gutter - state the width outright instead. */ .enq{left:8px;right:auto;width:calc(100vw - 16px);min-width:0; bottom:calc(8px + 52px + 10px);min-height:min(462px,68vh);max-height:78vh} } /* ══ v17 ══════════════════════════════════════════════════════════════════ */ /* ── sectors: one grid, twelve equal tiles, no scroll, no split ─────────── The rail plus a second "and regularly" row read as two different things that were in fact the same thing. One grid answers both complaints. */ .sectorgrid{display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr))} .sx{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:clamp(16px,1.9vw,21px); transition:transform .25s var(--ease),border-color .25s,background .25s} .sx:hover{transform:translateY(-3px);border-color:var(--green)} .sx-i{width:34px;height:34px;border-radius:10px;background:var(--green-tint); color:var(--green-deep);display:grid;place-items:center;margin-bottom:11px} .sx-i svg{width:17px;height:17px} .sx h3{font-size:clamp(.9rem,1.25vw,.99rem);line-height:1.32;margin-bottom:5px;font-weight:800} .sx p{font-size:.79rem;color:var(--soft);line-height:1.55} .sx::after{content:"";position:absolute;inset:auto -30px -36px auto;width:96px;height:96px; border-radius:50%;background:var(--green-tint);opacity:.35;transition:opacity .25s,transform .3s var(--ease)} .sx:hover::after{opacity:.7;transform:scale(1.15)} .sx > *{position:relative;z-index:1} /* ── reviews: avatar, no dead space ─────────────────────────────────────── The old card used justify-content:space-between on a flex column, which opened a void between the quote and the name whenever the quote was short. */ /* Two rows, both auto - a 1fr spacer was what opened the void between the quote and the name. Cards top-align in the rail and take their natural height, so a short review simply makes a short card. */ .quo{display:grid!important;grid-template-rows:auto auto;gap:var(--s3); align-content:start;height:auto!important} .rail-track{align-items:start} .quo p{margin:0} .quo footer{display:flex;align-items:center;gap:11px;padding-top:var(--s2); border-top:1px solid var(--line);margin:0} .quo footer b{font-family:var(--display);font-size:.87rem;color:var(--ink);font-weight:700; line-height:1.3} .avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center; font-family:var(--display);font-size:.84rem;font-weight:800;letter-spacing:-.02em; background:var(--green);color:#0D1522} .avatar.t2{background:#1F8A4C;color:#fff} .avatar.t3{background:var(--surface-3);color:var(--green-deep); border:1px solid var(--green-tint)} .avatar.t4{background:#0E5C34;color:#BFF2A4} /* ── insights: rows balanced from the item count ────────────────────────── 3 -> one row. 4 -> 2 + 2. 5 -> 2 on top, 3 below. The shorter row sits on top when the count is odd. */ .postgrid{display:grid;gap:var(--gap);grid-template-columns:repeat(6,1fr)} .postgrid .post{grid-column:span 6} @media(min-width:760px){ .postgrid[data-n="1"] .post{grid-column:span 6} .postgrid[data-n="2"] .post{grid-column:span 3} .postgrid[data-n="3"] .post{grid-column:span 2} .postgrid[data-n="4"] .post{grid-column:span 3} .postgrid[data-n="5"] .post{grid-column:span 2} .postgrid[data-n="5"] .post:nth-child(1), .postgrid[data-n="5"] .post:nth-child(2){grid-column:span 3} .postgrid[data-n="6"] .post{grid-column:span 2} } @media(min-width:560px) and (max-width:759px){ .postgrid .post{grid-column:span 3} .postgrid[data-n="3"] .post:nth-child(3), .postgrid[data-n="5"] .post:nth-child(5){grid-column:span 6} } /* ── the callout, tightened for shorter lines ─────────────────────────────── */ .callout p{font-size:.88rem;line-height:1.45;font-weight:700} .callout small{margin-top:4px} /* honeypot - off screen rather than display:none, which some bots skip */ .hp{position:absolute!important;left:-9999px!important;top:auto!important; width:1px!important;height:1px!important;overflow:hidden!important} /* ══ v18 ══════════════════════════════════════════════════════════════════ */ /* ── 1. the enquiry panel, restored ─────────────────────────────────────── The v16 CSS surgery cut everything between "floating launcher" and "reduced motion", which took the panel's own base rule with it. Without position:fixed it rendered as plain flow content at the top of the page. Restored in full here, then the v16/v17 sizing layers on top. */ .enq{position:fixed;z-index:940;overflow-y:auto; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:0 30px 70px rgba(13,21,34,.30); display:flex;flex-direction:column; opacity:0;transform:translateY(18px) scale(.97);transform-origin:0 100%; transition:opacity .34s var(--ease),transform .34s var(--ease)} .enq.is-in{opacity:1;transform:none} .enq-veil{position:fixed;inset:0;z-index:939;background:rgba(8,10,13,.42); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0; transition:opacity .32s var(--ease)} .enq-veil.is-in{opacity:1} .enq-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2)} .enq-kick{font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase; color:var(--green-deep);margin-bottom:6px} .enq h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.24; color:var(--ink)} .enq-x{width:30px;height:30px;flex:none;display:grid;place-items:center;cursor:pointer; border-radius:50%;border:1px solid var(--line);background:none;color:var(--soft); transition:border-color .2s,color .2s,transform .2s var(--ease)} .enq-x svg{width:11px;height:11px} .enq-x:hover{border-color:var(--danger);color:var(--danger);transform:rotate(90deg)} .enq-form{display:grid;align-content:center;flex:1} .ef label{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.11em; text-transform:uppercase;color:var(--mute);margin-bottom:6px} .ef input,.ef select{width:100%;background:var(--surface-2);border:1.5px solid var(--line); border-radius:11px;color:var(--ink);font-family:var(--body); transition:border-color .2s,background .2s} .ef input:focus,.ef select:focus{outline:none;border-color:var(--green);background:var(--surface)} .ef input.bad{border-color:var(--danger);background:var(--danger-tint)} .enq-send{width:100%;margin-top:4px} .enq-fine{color:var(--mute);line-height:1.55;text-align:center} .enq-done{text-align:center;display:grid;gap:var(--s2);justify-items:center} .enq-done .ed-i{border-radius:50%;background:var(--green);color:#0D1522; display:grid;place-items:center} .enq-done h3{font-size:1.05rem;font-weight:800} .enq-done p{font-size:.85rem;color:var(--soft);line-height:1.6;max-width:34ch} /* ── 2. one WhatsApp button, in Algebra green ───────────────────────────── The old pill was still in the markup behind the new circle. The circle now uses the brand green rather than WhatsApp's own. */ .wa{display:none!important} .fab--wa{background:var(--green);color:#0D1522; box-shadow:0 10px 26px rgba(126,217,86,.38)} .fab--wa:hover{box-shadow:0 14px 34px rgba(126,217,86,.5)} /* ── 3. sectors as a compact, clickable horizontal rail ─────────────────── Twelve tiles ate a whole screen. Now one scrolling row of chips; the one you pick explains itself in a single panel underneath. */ .sectorpick{display:grid;gap:var(--s3)} .sectorbar{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;padding-block:3px 12px; scroll-snap-type:x proximity;scrollbar-width:thin; scrollbar-color:var(--line) transparent} .sectorbar::-webkit-scrollbar{height:5px} .sectorbar::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .sectorbar::-webkit-scrollbar-track{background:transparent} .stab{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:9px; white-space:nowrap;cursor:pointer;border:1px solid var(--line);background:var(--surface); color:var(--ink);border-radius:var(--pill);padding:10px 17px; font-family:var(--body);font-size:.85rem;font-weight:600; transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)} .stab svg{width:16px;height:16px;color:var(--green-deep);transition:color .2s} .stab:hover{border-color:var(--green);transform:translateY(-2px)} .stab[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#0D1522} .stab[aria-selected="true"] svg{color:#0D1522} .sectorpanel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.2vw,24px); align-items:center;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:clamp(18px,2.4vw,28px);min-height:118px} .sectorpanel .sp-i{width:clamp(48px,5vw,58px);height:clamp(48px,5vw,58px);border-radius:16px; background:var(--green-tint);color:var(--green-deep);display:grid;place-items:center;flex:none} .sectorpanel .sp-i svg{width:clamp(24px,2.5vw,28px);height:clamp(24px,2.5vw,28px)} .sectorpanel h3{font-size:clamp(1.02rem,1.6vw,1.2rem);margin-bottom:6px;line-height:1.3} .sectorpanel p{font-size:.88rem;color:var(--soft);line-height:1.65} @media(max-width:559px){ .sectorpanel{grid-template-columns:1fr;text-align:left} } /* ── 4. reviews: equal height, quote mark properly placed ─────────────────── */ .rail-track{align-items:stretch} /* Two children, so two rows: the quote takes the slack (1fr) and the footer sits on the bottom edge. A third `auto` row left the footer stranded in the middle with empty space beneath it. */ .quo{display:grid!important;grid-template-rows:1fr auto;gap:var(--s3); align-content:stretch;height:auto;padding-top:clamp(30px,3vw,38px)} .quo::before{content:"\201C";position:absolute;top:clamp(6px,.9vw,12px);left:clamp(18px,2.2vw,24px); right:auto;font-family:var(--display);font-size:clamp(2.6rem,3.4vw,3.2rem);font-weight:800; color:var(--green-tint);line-height:1;pointer-events:none;z-index:0} .quo p{position:relative;z-index:1;align-self:start} .quo footer{align-self:end} /* ── 6. defence in depth: the internal notes are not for the public site ─── */ /* (enforced in .htaccess and removed from the upload - see the guide) */ /* ── ripple entrance, with no JavaScript style writes ───────────────────── The old version built each ring with el.style.cssText, and Chrome blocks bulk CSSOM writes under style-src 'self'. The rings are now children of the button, animated entirely from this stylesheet - so the strict CSP holds with zero violations. */ .fab--enq{position:fixed} .fab-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green); opacity:0;pointer-events:none} @media(prefers-reduced-motion:no-preference){ .fab--enq.ripple .fab-ring{animation:entRing .9s cubic-bezier(.2,.7,.3,1) 1 both} .fab--enq.ripple .fab-ring:nth-child(1){animation-delay:.90s} .fab--enq.ripple .fab-ring:nth-child(2){animation-delay:1.12s} .fab--enq.ripple .fab-ring:nth-child(3){animation-delay:1.34s} } @keyframes entRing{ from{opacity:.75;transform:scale(1)} to{opacity:0;transform:scale(2.5)} } /* ══ v20 ══════════════════════════════════════════════════════════════════ The two layouts the client chose out of the nine in sectors-options.html: S5 "the branch" for the sector families, R2 "the drifting wall" for the reviews. The seven that were not chosen are not carried over. Every colour is a token, so both inherit the dark palette from .sec-dark. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. sector families - the branch ────────────────────────────────────── Four families on one spine. The whole lattice is faintly there at rest and the family you point at lights up, draws a stem and brings its trades in one after another. The space is reserved from the start, so nothing below it ever jumps, and the twelve trades are legible even at rest - which is why the section does not need a line telling you to hover. */ .xtree{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.6vw,20px);padding-top:18px} .tspine{position:absolute;left:12%;right:12%;top:0;height:1px;background:var(--line)} .tnode{position:relative;display:flex;flex-direction:column;align-items:center; text-align:center;gap:11px;cursor:pointer} .tdot{width:9px;height:9px;border-radius:50%;background:var(--line);margin-top:-22px; transition:background .3s,box-shadow .45s var(--ease)} .tnode.is-open .tdot{background:var(--green);box-shadow:0 0 0 7px var(--green-tint)} .tpill{display:flex;align-items:center;gap:10px;background:var(--surface); border:1px solid var(--line);border-radius:var(--pill);padding:9px 18px 9px 10px; transition:border-color .3s,transform .32s var(--ease)} .tnode.is-open .tpill{border-color:var(--green);transform:translateY(-2px)} .tp-i{width:28px;height:28px;border-radius:50%;background:var(--green-tint); color:var(--green-deep);display:grid;place-items:center;flex:none} .tp-i svg{width:15px;height:15px} .tpill b{font-size:.82rem;font-weight:700;line-height:1.25;text-align:left} .tline{font-size:.75rem;color:var(--mute);line-height:1.55;max-width:28ch; opacity:0;transition:opacity .3s} .tnode.is-open .tline{opacity:1} .tbranch{position:relative;width:100%;display:grid;gap:8px;padding-top:20px;margin-top:auto} .tstem{position:absolute;left:50%;top:0;width:1px;height:20px;background:var(--green); transform:scaleY(0);transform-origin:top;transition:transform .32s var(--ease)} .tnode.is-open .tstem{transform:scaleY(1)} .tsub{background:var(--surface);border:1px solid var(--line);border-radius:13px; padding:10px 13px;display:grid;gap:2px;text-align:left; opacity:.16;transition:opacity .32s var(--ease),transform .32s var(--ease)} .tnode.is-open .tsub{opacity:1;transform:translateY(-2px); transition-delay:calc(.1s + var(--n) * .085s)} .tsub b{font-size:.79rem;line-height:1.3} .tsub i{font-style:normal;font-size:.71rem;color:var(--mute);line-height:1.45} /* ── 2. reviews - the drifting wall ─────────────────────────────────────── Two rows moving opposite ways, both stopping the moment the cursor is anywhere near. The set is printed twice so the -50% keyframe loops with no jump, and the gap between cards is a margin rather than a flex gap - with a flex gap the two halves are not equal widths and the loop visibly steps. NOTE the padding reset on the footer. This stylesheet styles the bare element (footer{padding-block:...}), so EVERY