/* ═══════════════════════════════════════════════════════════════════════════ JLO — jlo.css ONE layout, THREE directions (DESIGN_DIRECTION §4). Each direction is a token block selected by [data-dir] on . Every colour, face and rhythm value in the layout below resolves through a token — there is NO hard-coded hex, rgb() or font-family outside §2. Changing direction changes one attribute. All fonts self-hosted woff2, served from our own origin. No Google Fonts, no CDN, no external request on any page: LOOP owns the stack, and a financial advisory site should not leak visitor IPs to a third party on load. ═══════════════════════════════════════════════════════════════════════════ */ /* ---------- 1. FONTS (self-hosted) ---------- */ @font-face{font-family:'Playfair Display';src:url('../fonts/playfair-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Playfair Display';src:url('../fonts/playfair-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Playfair Display';src:url('../fonts/playfair-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Playfair Display';src:url('../fonts/playfair-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Manrope';src:url('../fonts/manrope-variable.woff2') format('woff2');font-weight:200 800;font-display:swap} /* ---------- 2. TOKENS — the three directions ---------- */ /* Shared scaffolding. Direction blocks below override only what differs. */ :root{ --maxw:1240px; --gut:clamp(18px,4.5vw,52px); --r:2px; --sect-y:clamp(72px,10vw,140px); --ease:cubic-bezier(.22,.8,.3,1); --dur:.6s; --f-mono:ui-monospace,SFMono-Regular,Menlo,monospace; } /* ══ D1 · CONTINUITY ══ Private-bank register. Navy ground + gold, Playfair display. Palette sampled from the JLO Partners lockup Joseph supplied 8 Jun (gold serif on near-black). Not invented. ══ */ [data-dir="continuity"]{ --bg:#0B1B33; --surface:#0F2340; --card:#132a4b; --card-hi:#183256; --line:#1E3557; --line-2:#2B4670; --heading:#F6F2E9; --body:#C3CEDF; --muted:#8496B0; --faint:#54688A; --accent:#C8A55B; --accent-hi:color-mix(in oklab,var(--accent) 78%,#FFFFFF); --accent-soft:color-mix(in oklab,var(--accent) 15%,transparent); --accent-tint:color-mix(in oklab,var(--accent) 8%,transparent); --accent-line:color-mix(in oklab,var(--accent) 40%,transparent); --on-accent:#0B1B33; --em:var(--accent); --f-display:'Playfair Display',Georgia,serif; --f-body:'Inter',system-ui,sans-serif; --display-w:500; --display-ls:-.012em; --h1:clamp(2.15rem,3.5vw,3.55rem); --h1-lh:1.08; --idx-tt:uppercase; --idx-ls:.16em; } /* ══ D2 · COLLECTIVE ══ Modern advisory house. Near-black + teal, geometric sans. Palette sampled from The JLO Collective mark Joseph supplied 8 Jun (teal ring on near-black). Not invented. ══ */ [data-dir="collective"]{ --bg:#101314; --surface:#171B1C; --card:#1C2122; --card-hi:#232929; --line:#262D2E; --line-2:#394344; --heading:#F2F5F4; --body:#BFC9C8; --muted:#7F8D8C; --faint:#4E5A59; --accent:#17777A; --accent-hi:color-mix(in oklab,var(--accent) 62%,#FFFFFF); --accent-soft:color-mix(in oklab,var(--accent) 20%,transparent); --accent-tint:color-mix(in oklab,var(--accent) 10%,transparent); --accent-line:color-mix(in oklab,var(--accent) 52%,transparent); --on-accent:#F2F5F4; --em:color-mix(in oklab,var(--accent) 66%,#FFFFFF); --f-display:'Manrope','Inter',system-ui,sans-serif; --f-body:'Manrope','Inter',system-ui,sans-serif; --display-w:700; --display-ls:-.032em; --h1:clamp(2.05rem,3.3vw,3.3rem); --h1-lh:1.06; --idx-tt:uppercase; --idx-ls:.2em; } /* ══ D3 · CLARITY ══ Light editorial. Warm white, ink navy, one restrained accent. The readable, quotable register — the one an answer engine parses most cleanly. ══ */ [data-dir="clarity"]{ --bg:#FBFAF7; --surface:#F3F1EC; --card:#FFFFFF; --card-hi:#F7F5F1; --line:#E2DED4; --line-2:#CBC5B7; --heading:#0B1B33; --body:#3D4757; --muted:#6B7688; --faint:#9BA4B2; --accent:#0B1B33; --accent-hi:#1B3A67; --accent-soft:color-mix(in oklab,var(--accent) 8%,transparent); --accent-tint:color-mix(in oklab,var(--accent) 4%,transparent); --accent-line:color-mix(in oklab,var(--accent) 22%,transparent); --on-accent:#FBFAF7; --em:#A8813C; --f-display:'Playfair Display',Georgia,serif; --f-body:'Inter',system-ui,sans-serif; --display-w:500; --display-ls:-.015em; --h1:clamp(2.15rem,3.5vw,3.5rem); --h1-lh:1.1; --idx-tt:uppercase; --idx-ls:.16em; } /* ---------- 3. RESET / BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg);color:var(--body); font-family:var(--f-body);font-size:clamp(1rem,.46vw + .92rem,1.075rem); line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip; } img,video,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;color:var(--heading);font-family:var(--f-display);font-weight:var(--display-w);letter-spacing:var(--display-ls);line-height:1.14} p{margin:0 0 1.1em} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:12px 18px;z-index:200} .skip:focus{left:0} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} /* index label — the small tracked caps used to number sections */ .idx{ font-family:var(--f-mono);font-size:.66rem;letter-spacing:var(--idx-ls); text-transform:var(--idx-tt);color:var(--accent);display:inline-flex; align-items:center;gap:.6em;font-weight:500; } .idx::before{content:"";width:22px;height:1px;background:var(--accent-line)} /* ---------- 4. DIRECTION SWITCHER (review scaffold — deleted at sign-off) --- */ .dsw{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:60} .dsw-in{display:flex;align-items:center;gap:18px;min-height:52px;flex-wrap:wrap;padding-block:9px} .dsw-lbl{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .dsw-opts{display:flex;gap:6px} .dsw-o{ display:inline-flex;align-items:center;gap:.5em;padding:6px 13px;border:1px solid var(--line-2); border-radius:999px;font-size:.8rem;color:var(--muted);transition:all .2s var(--ease); } .dsw-o:hover{color:var(--heading);border-color:var(--accent-line)} .dsw-o.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600} .dsw-n{font-family:var(--f-mono);font-size:.68rem;opacity:.65} .dsw-note{font-size:.78rem;color:var(--faint);flex:1;min-width:220px} @media (max-width:760px){.dsw-note{display:none}} /* ---------- 5. HEADER ---------- */ .hdr{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;gap:28px;min-height:76px} .logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .logo-wm{font-family:var(--f-display);font-size:1.12rem;letter-spacing:.14em;color:var(--heading);font-weight:var(--display-w)} .logo-wm b{color:var(--accent);font-weight:inherit} .logo-img{height:34px;width:auto} .logo-flag{ font-family:var(--f-mono);font-size:.53rem;letter-spacing:.12em;color:var(--accent); border:1px dashed var(--accent-line);padding:2px 6px;border-radius:2px;white-space:nowrap; } @media (max-width:900px){.logo-flag{display:none}} .nav{display:flex;gap:26px;margin-left:auto;font-size:.92rem} .nav a{color:var(--body);transition:color .2s var(--ease);position:relative;padding-block:4px} .nav a:hover,.nav a[aria-current="page"]{color:var(--heading)} .nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent)} .hdr-cta{display:flex;align-items:center;gap:12px;margin-left:auto} .nav + .hdr-cta{margin-left:0} @media (max-width:960px){ .nav{position:fixed;inset:128px 0 auto;flex-direction:column;gap:0;background:var(--surface); border-block:1px solid var(--line);padding:8px var(--gut) 20px;display:none} .nav.open{display:flex} .nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:1.02rem} } .burger{display:none;width:42px;height:42px;background:none;border:1px solid var(--line-2);border-radius:2px;cursor:pointer;position:relative} .burger span,.burger::before,.burger::after{content:"";position:absolute;left:11px;right:11px;height:1.5px;background:var(--heading);transition:.25s var(--ease)} .burger span{top:20px}.burger::before{top:14px}.burger::after{top:26px} .burger[aria-expanded="true"] span{opacity:0} .burger[aria-expanded="true"]::before{top:20px;transform:rotate(45deg)} .burger[aria-expanded="true"]::after{top:20px;transform:rotate(-45deg)} @media (max-width:960px){.burger{display:block}} /* ---------- 6. BUTTONS ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6em;padding:15px 26px;border-radius:var(--r); font-size:.92rem;font-weight:600;font-family:var(--f-body);letter-spacing:.005em; border:1px solid transparent;transition:all .25s var(--ease);cursor:pointer; } .btn-sm{padding:11px 19px;font-size:.85rem} .btn-p{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .btn-p:hover{background:var(--accent-hi);border-color:var(--accent-hi)} .btn-g{border-color:var(--line-2);color:var(--heading)} .btn-g:hover{border-color:var(--accent);color:var(--accent)} .ico-arr{width:15px;height:15px;transition:transform .25s var(--ease)} .btn:hover .ico-arr{transform:translateX(3px)} @media (max-width:520px){.hdr-cta .btn{display:none}} /* ---------- 7. PLACEHOLDERS — the anti-fabrication device ---------- */ .ph{ display:inline-flex;align-items:baseline;gap:.55em; border:1px dashed var(--accent-line);background:var(--accent-tint); padding:.25em .7em;border-radius:2px;color:var(--accent); font-family:var(--f-body);font-size:.86em;font-style:normal;line-height:1.5; } .ph-block{display:flex;margin-block:.5em} .ph-tag{ font-family:var(--f-mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase; color:var(--on-accent);background:var(--accent);padding:.25em .5em;border-radius:2px; flex-shrink:0;line-height:1.2;position:relative;top:-1px; } /* ---------- 8. MEDIA SLOTS ---------- */ .slot{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r)} .slot img,.slot video{width:100%;height:100%;object-fit:cover} .r-16-9{aspect-ratio:16/9}.r-4-3{aspect-ratio:4/3}.r-3-4{aspect-ratio:3/4} .r-4-5{aspect-ratio:4/5}.r-1-1{aspect-ratio:1/1}.r-21-9{aspect-ratio:21/9} .slot-in{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;padding:26px;text-align:center;color:var(--faint); background-image:repeating-linear-gradient(-45deg,var(--accent-tint) 0 1px,transparent 1px 11px); } .slot-ico{width:30px;height:30px;color:var(--accent);opacity:.55} .slot-lbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;color:var(--accent)} .slot-txt{font-size:.82rem;max-width:34ch;line-height:1.5;color:var(--muted)} /* ---------- 9. SECTION SCAFFOLD ---------- */ .sect{padding-block:var(--sect-y);position:relative} .sect + .sect{border-top:1px solid var(--line)} .sect-hd{max-width:64ch;margin-bottom:clamp(38px,5vw,64px)} .sect-hd h2{font-size:clamp(1.85rem,3.3vw,2.9rem);margin-block:.5em .55em} .sect-hd p{font-size:1.05rem;color:var(--muted);max-width:56ch;margin:0} /* ---------- 10. HERO ---------- */ .hero{padding-block:clamp(64px,9vw,124px) clamp(48px,7vw,96px);position:relative;overflow:hidden} .hero::after{ content:"";position:absolute;top:-30%;right:-12%;width:min(58vw,720px);aspect-ratio:1; background:radial-gradient(circle,var(--accent-soft),transparent 68%);pointer-events:none; } [data-dir="clarity"] .hero::after{opacity:.55} .hero-grid{ position:relative;z-index:1;display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,76px);align-items:center; } @media (max-width:940px){ .hero-grid{grid-template-columns:1fr} .hero-media{max-width:420px} } .hero-in{position:relative;z-index:1} .hero h1{ font-size:var(--h1);line-height:var(--h1-lh);max-width:13ch;margin-block:.5em .48em; text-wrap:balance; } .hero h1 em{font-style:normal;color:var(--em)} .hero-sub{font-size:clamp(1.05rem,1.35vw,1.28rem);color:var(--muted);max-width:52ch;margin-bottom:2.2em;line-height:1.6} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .hero-src{ margin-top:clamp(40px,5vw,66px);padding-top:22px;border-top:1px solid var(--line); font-size:.78rem;color:var(--faint);max-width:62ch; } .hero-src b{color:var(--muted);font-weight:500} /* ---------- 11. THE PROGRESSION RAIL — the signature device ---------- Grow → Protect → Preserve → Transfer, as one connected run. This is the idea from Joseph's own Positioning Option 1 made structural rather than decorative: the four pillars read as a sequence, not a menu of four unrelated services. It is the single device that carries across all three directions and the reason the site explains why investments and estate planning belong together. */ .rail{position:relative} .rail-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative} .rail-track::before{ content:"";position:absolute;left:0;right:0;top:32px;height:1px; background:linear-gradient(90deg,var(--accent-line),var(--accent-line) 88%,transparent); } .rail-i{position:relative;padding:0 clamp(14px,2vw,30px) 0 0} .rail-i + .rail-i{padding-left:clamp(18px,2.4vw,34px);border-left:1px solid var(--line)} .pill-n{ position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center; width:64px;height:64px;border-radius:50%;background:var(--bg);border:1px solid var(--accent-line); font-family:var(--f-mono);font-size:.78rem;color:var(--accent);letter-spacing:.06em;margin-bottom:22px; } .rail-i:hover .pill-n{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .pill-n,.rail-v,.rail-t{transition:all .3s var(--ease)} .rail-v{ font-family:var(--f-display);font-size:clamp(1.3rem,2.1vw,1.85rem);color:var(--heading); font-weight:var(--display-w);letter-spacing:var(--display-ls);display:block;margin-bottom:.28em; } .rail-t{font-size:.82rem;color:var(--accent);letter-spacing:.04em;display:block;margin-bottom:1em} .rail-l{font-size:.95rem;color:var(--muted);line-height:1.6;margin:0 0 .9em} @media (max-width:900px){ .rail-track{grid-template-columns:1fr 1fr;gap:38px 0} .rail-track::before{display:none} .rail-i:nth-child(odd){padding-left:0;border-left:0} } @media (max-width:560px){ .rail-track{grid-template-columns:1fr;gap:32px} .rail-i{padding-left:0!important;border-left:0!important;border-top:1px solid var(--line);padding-top:26px} .rail-i:first-child{border-top:0;padding-top:0} .pill-n{width:52px;height:52px;margin-bottom:16px} } .rail-note{ margin-top:clamp(40px,5vw,60px);padding:clamp(22px,3vw,34px);border:1px solid var(--accent-line); background:var(--accent-tint);border-radius:var(--r);font-size:1.02rem;color:var(--heading); max-width:74ch;line-height:1.62; } .rail-note b{color:var(--accent);font-weight:600} /* ---------- 12. SPLIT / EDITORIAL BLOCKS ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center} .split.rev > *:first-child{order:2} @media (max-width:880px){.split{grid-template-columns:1fr;gap:36px}.split.rev > *:first-child{order:0}} .lead{font-size:clamp(1.1rem,1.5vw,1.35rem);color:var(--heading);line-height:1.56;font-family:var(--f-display);font-weight:var(--display-w);letter-spacing:var(--display-ls)} /* ---------- 13. CARD GRIDS ---------- */ .grid{display:grid;gap:clamp(14px,1.6vw,22px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:clamp(22px,2.6vw,32px);transition:all .28s var(--ease);position:relative; } .card:hover{background:var(--card-hi);border-color:var(--accent-line);transform:translateY(-2px)} .card h3{font-size:1.12rem;margin-bottom:.5em} .card p{font-size:.93rem;color:var(--muted);margin:0} .card-n{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:1.1em} /* partner category chips */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{ padding:11px 20px;border:1px solid var(--line-2);border-radius:999px;font-size:.9rem; color:var(--body);transition:all .25s var(--ease); } .chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)} /* ---------- 14. TRACK SPLIT — the two-brand device ---------- */ .tracks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media (max-width:820px){.tracks{grid-template-columns:1fr}} .track{background:var(--bg);padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;transition:background .3s var(--ease)} .track:hover{background:var(--surface)} .track h3{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-block:.7em .5em} .track p{color:var(--muted);font-size:.97rem;flex:1} .track-for{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .track-cta{margin-top:1.4em;display:inline-flex;align-items:center;gap:.5em;color:var(--heading);font-weight:600;font-size:.93rem;border-bottom:1px solid var(--accent-line);padding-bottom:5px;align-self:flex-start} .track-cta:hover{color:var(--accent)} /* ---------- 15. PRINCIPLES (Collective) ---------- */ .prin{border-top:1px solid var(--line);padding-top:26px} .prin h3{font-size:1.18rem;margin-bottom:.55em} .prin p{color:var(--muted);font-size:.95rem;margin:0} .prin-n{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:1.4em} /* ---------- 16. PULLQUOTE / MOTTO ---------- */ .motto{ font-family:var(--f-display);font-weight:var(--display-w);letter-spacing:var(--display-ls); font-size:clamp(1.9rem,4.4vw,3.5rem);color:var(--heading);line-height:1.14;text-wrap:balance; max-width:20ch; } .motto em{font-style:normal;color:var(--em)} /* ---------- 17. CTA BAND ---------- */ .band{background:var(--surface);border-top:1px solid var(--line)} .band-in{padding-block:clamp(56px,7vw,96px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,60px);align-items:center} @media (max-width:860px){.band-in{grid-template-columns:1fr}} .band h2{font-size:clamp(1.7rem,3vw,2.6rem);margin-block:.45em .5em;max-width:18ch} .band p{color:var(--muted);margin-bottom:0} /* ---------- 18. FORM ---------- */ .form{display:grid;gap:14px} .fld{display:grid;gap:7px} .fld label{font-size:.82rem;color:var(--muted);letter-spacing:.02em} .fld input,.fld textarea,.fld select{ background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px; color:var(--heading);font-family:var(--f-body);font-size:.96rem;width:100%; } .fld input:focus,.fld textarea:focus{border-color:var(--accent);outline:none} .fld-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:560px){.fld-2{grid-template-columns:1fr}} .consent{ display:flex;gap:12px;align-items:flex-start;font-size:.76rem;color:var(--faint); line-height:1.55;border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--card); } .consent input{margin-top:3px;flex-shrink:0;accent-color:var(--accent)} .consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} /* ---------- 19. FOOTER ---------- */ .ftr{background:var(--surface);border-top:1px solid var(--line);padding-block:clamp(52px,6vw,80px) 34px;margin-top:0} .ftr-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(28px,4vw,52px);padding-bottom:clamp(38px,5vw,58px)} @media (max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}} @media (max-width:560px){.ftr-top{grid-template-columns:1fr}} .ftr-tag{color:var(--muted);font-size:.9rem;margin-block:1.1em 1.4em;max-width:34ch} .ftr-soc{display:flex;gap:16px;font-size:.84rem} .ftr-soc a{color:var(--muted)}.ftr-soc a:hover{color:var(--accent)} .ftr-col h3{font-size:.68rem;font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.3em;font-weight:500} .ftr-col li{margin-bottom:.75em;font-size:.9rem} .ftr-col a{color:var(--body)}.ftr-col a:hover{color:var(--accent)} .ftr-legal{border-top:1px solid var(--line);padding-top:26px;display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between} .ftr-legal-links{display:flex;gap:20px;font-size:.82rem} .ftr-legal-links a{color:var(--muted)}.ftr-legal-links a:hover{color:var(--accent)} .ftr-attr{font-size:.75rem;color:var(--faint);margin:0;max-width:64ch;line-height:1.5} /* ---------- 20. REVEAL ---------- */ .js .rv{opacity:0;transform:translateY(16px)} .js .rv.in{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)} @media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}} /* ---------- 21. 404 ---------- */ .nf{padding-block:clamp(90px,14vw,190px);text-align:center} .nf h1{font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:.4em} .nf p{color:var(--muted);max-width:46ch;margin-inline:auto;margin-bottom:2em}