@charset "UTF-8"; /* ========================================================================== ProEx Advisors LLP — site stylesheet v3 · multi-page · hand-written, no framework, no build step -------------------------------------------------------------------------- CONTENTS 01 Tokens 02 Reset & base 03 Typography 04 Brand devices (mark, seal, rules, marquee) 05 Buttons & links 06 Header, nav, topbar 07 Hero & page headers 08 Layout blocks 09 Cards & grids 10 Tables & data 11 Forms 12 Footer 13 Motion & reveal 14 Accessibility & print ========================================================================== */ /* ========================================================================== 01 · TOKENS ========================================================================== */ :root{ /* --- core palette --- */ --ink: #0A0F0D; /* near-black ground — hero, footer, bands */ --forest: #131A17; /* secondary dark surface */ --forest-2: #1D2622; /* raised surface on dark */ --paper: #F4F3EE; /* page background */ --paper-2: #E9E7DF; /* alternate band */ --white: #FFFFFF; /* --- signal: the house accent --- */ --signal: #C8F751; /* acid lime — fills, numerals, on dark */ --signal-2: #B4E23C; /* hover state */ --signal-ink: #46560C; /* accent TEXT on light — 6.9:1 on paper. Never use raw --signal for text on light */ /* --- brass: the warm secondary --- */ --brass: #C08A3E; --brass-lt: #E3BC7E; --brass-dk: #8F6524; /* 4.71:1 on paper */ /* --- practice accents --- */ --studio: #C8F751; /* ProEx Studio — signal lime (leads) */ --studio-dk: #46560C; --ir: #C08A3E; /* ProEx IR — brass */ --ir-dk: #8F6524; --affairs: #7FA8BC; /* Public Affairs— cool slate */ --affairs-dk: #33505F; /* --- text --- */ --slate: #565C58; /* 6.1:1 on paper */ --slate-lt: #6E756F; /* 4.6:1 on paper */ /* --- lines --- */ --rule: rgba(10,15,13,.12); --rule-dk: rgba(255,255,255,.16); --dash: rgba(10,15,13,.18); --dash-dk: rgba(255,255,255,.24); /* --- on-dark text alphas (all ≥4.5:1) --- */ --on-dark-1: rgba(255,255,255,.95); --on-dark-2: rgba(255,255,255,.74); --on-dark-3: rgba(255,255,255,.58); /* --- type --- Bricolage carries the voice: headings, UI, body. Fraunces is kept only for numerals, pull quotes and the wordmark — the moments that need gravitas rather than energy. */ --display: "Bricolage Grotesque", "Bricolage Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --body: "Bricolage Grotesque", "Bricolage Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --serif: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; /* --- metrics --- */ --gut: clamp(1.15rem, 4vw, 3.25rem); --inset: clamp(0px, 2vw, 30px); /* slab / footer inset */ --max: 1300px; --sec: clamp(4.25rem, 9vw, 8.5rem); --navh: 96px; /* used by scroll-margin-top */ --r-lg: 28px; --r-md: 18px; --r-sm: 10px; --pill: 999px; --sh: 0 35px 70px rgba(10,15,13,.09); --sh-nav:0 13px 35px -14px rgba(10,15,13,.35); } /* Practice theming — set on or a section */ body { --accent: var(--signal); --accent-dk: var(--signal-ink); } .t-studio { --accent: var(--studio); --accent-dk: var(--studio-dk); } .t-ir { --accent: var(--ir); --accent-dk: var(--ir-dk); } .t-affairs{ --accent: var(--affairs); --accent-dk: var(--affairs-dk); } /* Text set in the accent colour. On dark surfaces the raw signal is legible; on light surfaces it never is, so --accent-dk always wins there. */ .theme-dark .eyebrow, .theme-dark .i-cat, .theme-dark .c-for, .theme-dark .t-brand, .theme-dark .c-ref{ color: var(--accent); } /* -------------------------------------------------------------------------- Metric-matched fallbacks to cut layout shift on font swap. NOTE: these overrides are approximations. If you want them exact, measure the real faces and adjust — see assets/README.md. -------------------------------------------------------------------------- */ @font-face{ font-family:"Fraunces Fallback"; src:local("Georgia"),local("Times New Roman"),local("serif"); size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0%; } @font-face{ font-family:"Bricolage Fallback"; src:local("Helvetica Neue"),local("Arial"),local("sans-serif"); size-adjust:101%; ascent-override:96%; descent-override:24%; line-gap-override:0%; } /* Utility: opt a single element into the serif */ .serif{font-family:var(--serif);font-variation-settings:"opsz" 90;} /* ========================================================================== 02 · RESET & BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--body);font-weight:400; font-size:clamp(1rem,.955rem + .2vw,1.0938rem); line-height:1.68;-webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video{max-width:100%;display:block;} img{height:auto;} a{color:inherit;} figure{margin:0;} /* every anchor target clears the sticky nav */ [id]{scroll-margin-top:var(--navh);} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);} .sec{padding-block:var(--sec);} .sec-tight{padding-block:calc(var(--sec) * .6);} .sec-top-0{padding-top:0;} /* ========================================================================== 03 · TYPOGRAPHY ========================================================================== */ h1,h2,h3,h4,h5{ font-family:var(--display);font-weight:600; letter-spacing:-.035em;line-height:1.02;margin:0; font-variation-settings:"opsz" 60,"wdth" 100; text-wrap:balance; } .h-hero{font-size:clamp(2.9rem,8vw,6.2rem);line-height:.98;letter-spacing:-.045em;} .h-xl {font-size:clamp(2.3rem,5.4vw,4.3rem);letter-spacing:-.04em;} .h-lg {font-size:clamp(1.95rem,3.9vw,3.15rem);letter-spacing:-.035em;} .h-md {font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.08;} .h-sm {font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.16;letter-spacing:-.025em;} .h-xs {font-size:1.08rem;line-height:1.24;letter-spacing:-.022em;font-weight:600;} /* Serif is reserved for numerals, pull quotes and the wordmark */ .band .n,.clock .cv,.t-fee,.pull,.quote-fig blockquote,.q-mark, .steps li::before,.layer .l-no,.logo .wordmark,.link-arrow .lt, .gate strong,.stat .sv{ font-family:var(--serif);font-weight:400; } .eyebrow{ font-family:var(--body);font-size:.72rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dk); margin:0 0 1.4rem;display:flex;align-items:center;gap:.75rem; } .eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--accent);flex:none;} .eyebrow.ctr{justify-content:center;} /* Signal highlight — a lime bar behind a word. Light surfaces only. */ .hl{ background:var(--signal);color:var(--ink); padding:0 .18em .04em;border-radius:3px; box-decoration-break:clone;-webkit-box-decoration-break:clone; } .lede{ font-size:clamp(1.06rem,.98rem + .42vw,1.32rem); line-height:1.58;color:var(--slate);font-weight:300; } .small{font-size:.85rem;color:var(--slate);} .tiny{font-size:.78rem;color:var(--slate-lt);} .prose p{margin:0 0 1.3rem;} .prose p:last-child{margin-bottom:0;} .prose h3{margin:2.6rem 0 .9rem;} .prose h4{margin:2rem 0 .7rem;font-size:1.12rem;} .prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.2rem;} .prose li{margin-bottom:.55rem;} .prose a{color:var(--accent-dk);text-underline-offset:3px;} .prose blockquote{ margin:2rem 0;padding:1.4rem 0 1.4rem 1.6rem;border-left:2px solid var(--accent); font-family:var(--display);font-size:1.25rem;line-height:1.4;letter-spacing:-.015em; } /* --- dark theming (colours only — never sets a background) --- */ .theme-dark{color:var(--on-dark-1);} .theme-dark h1,.theme-dark h2,.theme-dark h3, .theme-dark h4,.theme-dark h5{color:#fff;} .theme-dark .eyebrow{color:var(--accent);} .theme-dark .eyebrow::before{background:var(--accent);} .theme-dark .lede{color:var(--on-dark-2);} .theme-dark .small{color:var(--on-dark-2);} .theme-dark .tiny{color:var(--on-dark-3);} .theme-dark .prose a{color:var(--signal);} .bg-ink {background:var(--ink);} .bg-forest{background:var(--forest);} .bg-paper2{background:var(--paper-2);} .bg-white {background:var(--white);} /* ========================================================================== 04 · BRAND DEVICES ========================================================================== */ /* --- 4.1 underline stroke behind a word --- */ .mark{position:relative;display:inline-block;white-space:nowrap;} .mark svg{ position:absolute;left:-2%;bottom:-.15em;width:104%;height:.34em; color:var(--accent);overflow:visible;z-index:-1; } .mark svg path{stroke-dasharray:1;stroke-dashoffset:1;} .js .mark svg path{transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.3,1) .3s;} .mark.drawn svg path{stroke-dashoffset:0;} /* --- 4.2 the seal — circular stamp for compliance claims --- */ .seal{ width:132px;height:132px;position:relative;flex:none; display:grid;place-items:center;color:var(--accent); } .seal .ring{position:absolute;inset:0;} .js .seal .ring{animation:sealspin 46s linear infinite;} .seal .glyph{position:relative;z-index:1;} @keyframes sealspin{to{transform:rotate(360deg);}} .seal-sm{width:92px;height:92px;} /* --- 4.3 hairline rule grid (hero/section texture) --- */ .rules{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px); background-size:calc(100%/6) 100%; } .rules-light{ position:absolute;inset:0;pointer-events:none;opacity:.7; background-image:linear-gradient(to right, rgba(10,15,13,.05) 1px, transparent 1px); background-size:calc(100%/6) 100%; } /* --- 4.4 dashed data band --- */ .band{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px dashed var(--dash-dk);} .band > div{padding:2rem 1.15rem 0;border-right:1px dashed var(--dash-dk);} .band > div:last-child{border-right:0;} .band .n{ font-family:var(--display);font-size:clamp(2.3rem,4.4vw,3.5rem);color:var(--signal); line-height:1;letter-spacing:-.045em;margin-bottom:.6rem;font-variation-settings:"opsz" 140; } .band .c{font-size:.88rem;color:var(--on-dark-2);line-height:1.5;} .band.on-light{border-top-color:var(--dash);} .band.on-light > div{border-right-color:var(--dash);} .band.on-light .n{color:var(--accent-dk);} .band.on-light .c{color:var(--slate);} /* --- 4.5 marquee --- */ .marquee{position:relative;overflow:hidden;padding-block:2.4rem;} .mq-viewport{ position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .mq-track{display:flex;width:max-content;} .js .mq-track{animation:mq 38s linear infinite;} .mq-track.paused{animation-play-state:paused;} .mq-track span{ font-family:var(--display);font-size:clamp(1.1rem,1.9vw,1.5rem); color:var(--ink);opacity:.72;letter-spacing:-.02em;white-space:nowrap; padding-inline:clamp(1.4rem,3.2vw,2.9rem);font-variation-settings:"opsz" 40; } @keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media (prefers-reduced-motion: reduce){.js .mq-track{animation:none;}} .mq-pause{ position:absolute;right:var(--gut);bottom:.4rem;z-index:2; background:var(--white);border:1px solid var(--rule);border-radius:var(--pill); width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--ink); } .mq-pause:hover{border-color:var(--ink);} .vh{ position:absolute!important;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ========================================================================== 05 · BUTTONS & LINKS ========================================================================== */ .btn{ display:inline-flex;align-items:center;gap:.65rem; font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:-.01em; padding:.9rem 1.6rem;border-radius:var(--pill);text-decoration:none; border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:background .25s ease,color .25s ease,border-color .25s ease; } .btn svg{flex:none;transition:transform .25s ease;} .btn:hover svg{transform:translateX(3px);} .btn-primary{background:var(--accent);color:var(--ink);border-color:var(--accent);} .btn-primary:hover{background:var(--ink);color:#fff;border-color:var(--ink);} /* on any dark surface the hover must invert the other way */ .theme-dark .btn-primary:hover, .nav .btn-primary:hover{background:#fff;color:var(--ink);border-color:#fff;} .btn-solid{background:var(--forest);color:#fff;border-color:var(--forest);} .btn-solid:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);} .btn-line{border-color:var(--rule);color:var(--ink);background:transparent;} .btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff;} .theme-dark .btn-line{border-color:var(--rule-dk);color:#fff;} .theme-dark .btn-line:hover{border-color:#fff;background:#fff;color:var(--ink);} .btn-sm{padding:.7rem 1.25rem;font-size:.83rem;} /* text + connector rule + circle icon */ .link-arrow{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);} .link-arrow .lt{ font-family:var(--display);font-style:italic;font-size:1.05rem; font-variation-settings:"opsz" 40; } .link-arrow .li{ width:46px;height:46px;border-radius:50%;background:var(--forest);color:#fff; margin-left:48px;position:relative;display:grid;place-items:center;flex:none; transition:background .25s ease,color .25s ease; } .link-arrow .li::before{ content:"";position:absolute;width:32px;height:1px;background:var(--forest); left:-32px;top:50%;transition:background .25s ease; } .link-arrow:hover .lt{text-decoration:underline;text-underline-offset:4px;} .link-arrow:hover .li{background:var(--accent);color:var(--ink);} .theme-dark .link-arrow{color:#fff;} .theme-dark .link-arrow .li{background:var(--accent);color:var(--ink);} .theme-dark .link-arrow .li::before{background:rgba(255,255,255,.4);} @media(max-width:560px){.link-arrow .li{margin-left:26px;}.link-arrow .li::before{width:18px;left:-18px;}} .btn-circle{ width:104px;height:104px;border-radius:50%;border:1px solid currentColor; display:grid;place-items:center;text-decoration:none;flex:none; transition:background .3s ease,color .3s ease,border-color .3s ease; } .btn-circle:hover{background:var(--accent);border-color:var(--accent);color:var(--ink);} @media(max-width:640px){.btn-circle{width:76px;height:76px;}} /* ========================================================================== 06 · HEADER ========================================================================== */ .topbar{ background:#061A15;color:var(--on-dark-3); font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500; } .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px;flex-wrap:wrap;} .topbar a{color:var(--on-dark-2);text-decoration:none;} .topbar a:hover{color:var(--signal);} .topbar .tb-r{display:flex;gap:1.5rem;align-items:center;} @media(max-width:760px){.topbar .tb-l{display:none;}.topbar .wrap{justify-content:center;}} .nav{ position:sticky;top:0;z-index:70; background:rgba(10,15,13,.94); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid rgba(255,255,255,.09); transition:box-shadow .3s ease; } .nav.shrunk{box-shadow:var(--sh-nav);} .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:78px;} .logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;} .logo .lmark{width:32px;height:32px;flex:none;} .logo .wordmark{ font-family:var(--display);font-size:1.42rem;color:#fff;letter-spacing:-.03em; font-variation-settings:"opsz" 40;display:block;line-height:1.05; } .logo .wordmark em{font-style:normal;color:var(--signal);} .logo .lsub{ font-size:.6rem;letter-spacing:.2em;text-transform:uppercase; color:var(--on-dark-3);display:block;line-height:1;margin-top:3px; } .navlinks{display:flex;align-items:center;gap:1.7rem;list-style:none;margin:0;padding:0;} .navlinks a{ text-decoration:none;color:var(--on-dark-2);font-size:.86rem; position:relative;padding-block:.4rem;transition:color .2s ease; } .navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--signal);transition:width .25s ease;} .navlinks a:hover,.navlinks a[aria-current="page"]{color:#fff;} .navlinks a[aria-current="page"]::after,.navlinks a:hover::after{width:100%;} .navcta{display:flex;align-items:center;gap:.9rem;} .burger{ display:none;background:none;border:1px solid rgba(255,255,255,.24); width:44px;height:40px;border-radius:var(--pill);cursor:pointer;padding:0; align-items:center;justify-content:center; } .burger span{display:block;width:17px;height:1px;background:#fff;position:relative;transition:background .2s;} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1px;background:#fff;transition:transform .25s ease;} .burger span::before{top:-5px;} .burger span::after{top:5px;} .nav.open .burger span{background:transparent;} .nav.open .burger span::before{transform:translateY(5px) rotate(45deg);} .nav.open .burger span::after{transform:translateY(-5px) rotate(-45deg);} @media(max-width:1000px){ .nav .wrap{min-height:70px;} .navlinks{ position:absolute;top:100%;left:0;right:0;background:#071E19; border-bottom:1px solid rgba(255,255,255,.1);flex-direction:column;align-items:stretch;gap:0; max-height:0;overflow:hidden;visibility:hidden; transition:max-height .35s ease,visibility 0s linear .35s; } .nav.open .navlinks{max-height:640px;visibility:visible;transition:max-height .35s ease,visibility 0s;} .navlinks li{border-top:1px solid rgba(255,255,255,.08);} .navlinks a{display:block;padding:1rem var(--gut);font-size:.95rem;} .navlinks a::after{display:none;} .navlinks .m-cta{padding:1rem var(--gut) 1.4rem;} .navlinks .m-cta .btn{width:100%;justify-content:center;} .burger{display:flex;} .navcta > .btn{display:none;} } @media(min-width:1001px){.navlinks .m-cta{display:none;}} /* ========================================================================== 07 · HERO & PAGE HEADERS ========================================================================== */ .hero{background:var(--ink);color:var(--on-dark-1);position:relative;overflow:hidden;} .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(900px 540px at 50% -8%, rgba(200,247,81,.13), transparent 60%), radial-gradient(720px 520px at 88% 96%, rgba(200,247,81,.07), transparent 60%), radial-gradient(640px 460px at 4% 86%, rgba(192,138,62,.10), transparent 60%); } .hero .wrap{position:relative;z-index:2;} .hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;} /* page header (inner pages) */ .phead{background:var(--ink);color:var(--on-dark-1);position:relative;overflow:hidden;padding-block:clamp(3rem,6.5vw,5.5rem);} .phead::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(780px 480px at 84% -10%, rgba(200,247,81,.12), transparent 60%), radial-gradient(640px 460px at 2% 105%, rgba(192,138,62,.09), transparent 60%); } .phead .wrap{position:relative;z-index:2;} .phead h1{max-width:20ch;margin-bottom:1.4rem;} .phead .lede{max-width:62ch;} .phead-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:end;} @media(max-width:1000px){.phead-grid{grid-template-columns:1fr;align-items:start;}} /* breadcrumb */ .crumbs{display:flex;gap:.55rem;align-items:center;font-size:.76rem;color:var(--on-dark-3);margin:0 0 1.6rem;list-style:none;padding:0;flex-wrap:wrap;} .crumbs a{text-decoration:none;color:var(--on-dark-2);} .crumbs a:hover{color:var(--signal);text-decoration:underline;} .crumbs li{display:flex;gap:.55rem;align-items:center;} /* hero media */ .hero-media{border-radius:var(--r-lg);overflow:hidden;background:var(--forest);aspect-ratio:4/3;} .hero-media img{width:100%;height:100%;object-fit:cover;} /* ========================================================================== 08 · LAYOUT BLOCKS ========================================================================== */ .sec-head{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-bottom:3.2rem;} @media(max-width:760px){.sec-head{grid-template-columns:1fr;align-items:start;}} .two-col{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.25rem,5.5vw,5rem);align-items:start;} .two-col.even{grid-template-columns:1fr 1fr;align-items:center;} .two-col.media-l{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;} @media(max-width:1000px){.two-col,.two-col.even,.two-col.media-l{grid-template-columns:1fr;align-items:start;}} .figure{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);position:relative;} .figure img{width:100%;height:100%;object-fit:cover;} .figure figcaption{font-size:.78rem;color:var(--slate-lt);padding:.9rem 0 0;} .ratio-43{aspect-ratio:4/3;} .ratio-11{aspect-ratio:1/1;} .ratio-32{aspect-ratio:3/2;} .ratio-169{aspect-ratio:16/9;} /* Placeholder shown when an image file is not present yet. Names the file that is missing, so the art brief and the markup stay in sync. */ .img-missing{ display:grid;place-items:center;height:100%;width:100%;padding:1.2rem; text-align:center;font-family:var(--body);font-size:.76rem;color:var(--slate); background:repeating-linear-gradient(45deg,#EFEBE3,#EFEBE3 14px,#E7E1D6 14px,#E7E1D6 28px); } .img-missing b{display:block;font-weight:600;letter-spacing:.13em;text-transform:uppercase;font-size:.66rem;color:var(--slate-lt);} .img-missing code{ display:block;margin-top:.4rem;font-size:.78rem;color:var(--accent-dk); word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .theme-dark .img-missing{ background:repeating-linear-gradient(45deg,#123028,#123028 14px,#16382E 14px,#16382E 28px); color:var(--on-dark-2); } .theme-dark .img-missing code{color:var(--signal);} .pull{ margin:2.5rem 0 0;padding:1.9rem 0 0;border-top:1px dashed var(--dash); font-family:var(--display);font-size:clamp(1.22rem,2vw,1.55rem);line-height:1.32; letter-spacing:-.02em;font-variation-settings:"opsz" 90; } .pull em{color:var(--accent-dk);} /* split band — background applied to the panel, never a viewport pseudo-element */ .split-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;} .split-grid > *{padding:clamp(2.5rem,5.5vw,4.5rem) clamp(1.5rem,3.5vw,3.25rem);} .split-l{background:var(--paper);display:flex;flex-direction:column;justify-content:center;} .split-r{background:var(--forest);color:var(--on-dark-1);display:flex;flex-direction:column;justify-content:center;} @media(max-width:1000px){.split-grid{grid-template-columns:1fr;}} .split-wrap{max-width:var(--max);margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;} @media(max-width:760px){.split-wrap{border-radius:0;}} /* framed slab */ .slab{margin-inline:var(--inset);} .slab .wrap{padding-inline:calc(var(--gut) - var(--inset));} .slab-inner{ background:var(--ink);color:var(--on-dark-1); border-radius:clamp(0px,3vw,40px);overflow:hidden;position:relative; padding-block:var(--sec); } .slab-inner::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(780px 470px at 90% 2%, rgba(200,247,81,.11), transparent 60%); } .slab-inner > .wrap{position:relative;z-index:1;} /* CTA band */ .cta-grid{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;} .cta-grid h2{max-width:16ch;} /* ========================================================================== 08b · COMPOSITION BLOCKS Structural patterns adapted from the Babun index-6 reference: split hero, mirrored bento, offset stat rail, over-viewport scroller, interrupted hairline, ruled accordion, split-ground band. ========================================================================== */ /* --- 8b.1 split hero: copy left, media right --- */ .hero-split{ display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(2.5rem,5vw,4.5rem);align-items:center; padding-block:clamp(3.5rem,7vw,6.5rem) clamp(3rem,5vw,4.5rem); } @media(max-width:1000px){.hero-split{grid-template-columns:1fr;gap:2.75rem;}} .hero-split h1{margin-bottom:1.6rem;} .hero-split .lede{max-width:52ch;margin:0 0 2.2rem;} .hero-media{position:relative;} .hero-media .frame{ border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.05; background:var(--forest-2);position:relative; } .hero-media .frame img{width:100%;height:100%;object-fit:cover;} /* floating chips — one deliberately breaks the grid seam */ .chip{ position:absolute;z-index:2;background:var(--ink);color:var(--on-dark-1); border:1px solid var(--rule-dk);border-radius:14px; padding:.85rem 1.05rem;box-shadow:0 24px 50px -20px rgba(0,0,0,.6); display:flex;align-items:center;gap:.7rem;white-space:nowrap; } .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;} .js .chip .dot{animation:pulse 2.4s ease-in-out infinite;} @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.8);}} .chip .k{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-3);display:block;line-height:1.3;} .chip .v{font-size:.86rem;font-weight:600;line-height:1.3;} .chip-a{top:6%;right:-4%;} .chip-b{bottom:8%;left:-9%;} .js .chip-b{animation:drift 9s ease-in-out infinite;} @keyframes drift{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} @media(max-width:1000px){.chip-a{right:2%;}.chip-b{left:2%;}} @media(max-width:560px){.chip{padding:.6rem .8rem;}.chip .v{font-size:.78rem;}} @media (prefers-reduced-motion: reduce){.js .chip-b,.js .chip .dot{animation:none;}} /* --- 8b.2 mirrored bento: 7/5 then 5/7 --- */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.3rem;} .bento > *{grid-column:span 12;} @media(min-width:1001px){ .bento .b-lg{grid-column:span 7;} .bento .b-sm{grid-column:span 5;} } .b-panel{ border-radius:var(--r-lg);padding:2.2rem 2rem; background:var(--white);border:1px solid var(--rule); display:flex;flex-direction:column;justify-content:center; } .b-panel.dark{background:var(--ink);color:var(--on-dark-1);border-color:transparent;position:relative;overflow:hidden;} .b-panel.dark::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(520px 320px at 88% 8%, rgba(200,247,81,.14), transparent 62%); } .b-panel.dark > *{position:relative;z-index:1;} .b-panel.dark h2,.b-panel.dark h3{color:#fff;} .b-panel.dark p{color:var(--on-dark-2);} .b-panel.lime{background:var(--signal);border-color:var(--signal);color:var(--ink);} .b-panel.lime h3{color:var(--ink);} .b-panel.lime p{color:rgba(10,15,13,.72);} .b-panel.tint{background:var(--paper-2);} .b-panel blockquote{ margin:0;font-family:var(--serif);font-weight:400; font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.28;letter-spacing:-.03em; } /* --- 8b.3 offset stat rail: prose 7 cols, stats 4 cols, ms-auto trench --- */ .rail{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;} @media(max-width:1000px){.rail{grid-template-columns:1fr;}} .rail .stats{display:flex;flex-direction:column;} .stat{padding:1.3rem 0;border-top:1px dashed var(--dash);} .stat:first-child{border-top:0;padding-top:0;} .stat .sv{ font-size:clamp(2rem,4vw,3.1rem);line-height:1;letter-spacing:-.045em; color:var(--accent-dk);display:block;margin-bottom:.35rem; } .stat.lead .sv{font-size:clamp(2.6rem,5.2vw,4.2rem);} .stat .sk{font-size:.85rem;color:var(--slate);line-height:1.45;} .theme-dark .stat{border-color:var(--dash-dk);} .theme-dark .stat .sv{color:var(--signal);} .theme-dark .stat .sk{color:var(--on-dark-2);} .b-panel.lime .stat{border-color:rgba(10,15,13,.2);} .b-panel.lime .stat .sv{color:var(--ink);} .b-panel.lime .stat .sk{color:rgba(10,15,13,.7);} /* --- 8b.4 over-viewport scroller — native scroll-snap, no library --- */ .bleed-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;} @media(max-width:1000px){.bleed-wrap{grid-template-columns:1fr;}} .bleed{ width:min(78vw,980px);overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scrollbar-width:none; display:flex;gap:1.2rem;padding-block:.35rem 1.5rem; -webkit-overflow-scrolling:touch; } .bleed::-webkit-scrollbar{display:none;} .bleed > *{scroll-snap-align:start;flex:0 0 min(88%,330px);} @media(max-width:1000px){ .bleed{width:calc(100% + var(--gut) * 2);margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);} } .bleed-progress{height:2px;background:var(--rule);border-radius:2px;overflow:hidden;margin-top:.4rem;} .bleed-progress i{display:block;height:100%;width:33%;background:var(--accent);border-radius:2px;transition:width .2s ease,transform .2s ease;} .theme-dark .bleed-progress{background:rgba(255,255,255,.16);} /* --- 8b.5 interrupted hairline: a rule a badge sits inside --- */ .marker{display:flex;align-items:center;gap:1.2rem;margin:0 0 2.5rem;} .marker::before,.marker::after{content:"";height:1px;background:var(--dash);flex:1;} .theme-dark .marker::before,.theme-dark .marker::after{background:var(--dash-dk);} .marker .m-badge{ width:62px;height:62px;border-radius:50%;flex:none; background:var(--accent);color:var(--ink); display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem; } /* --- 8b.6 ruled accordion, native

--- */ .faq{border-top:1px solid var(--rule);} .theme-dark .faq{border-top-color:var(--rule-dk);} .faq details{border-bottom:1px solid var(--rule);} .theme-dark .faq details{border-bottom-color:var(--rule-dk);} .faq summary{ list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative; font-family:var(--display);font-weight:600;letter-spacing:-.025em; font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.3; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{ content:"";position:absolute;right:.35rem;top:1.95rem;width:14px;height:14px; background:currentColor;transition:transform .3s ease; -webkit-mask:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } .faq details[open] summary::after{transform:rotate(45deg);} .faq summary:hover{color:var(--accent-dk);} .theme-dark .faq summary:hover{color:var(--signal);} .faq .a{padding:0 3rem 1.6rem 0;margin:0;color:var(--slate);font-size:.96rem;max-width:62ch;} .theme-dark .faq .a{color:var(--on-dark-2);} /* --- 8b.7 split-ground band with a pinned section CTA --- */ .band-split{position:relative;overflow:hidden;background:var(--paper-2);} .band-split::before{ content:"";position:absolute;right:0;top:0;bottom:0;width:42%;pointer-events:none; background:linear-gradient(115deg, transparent, rgba(200,247,81,.16)); } .band-split > .wrap{position:relative;z-index:1;} .pin-head{position:relative;} .pin-head .pin-cta{position:absolute;right:0;top:.35rem;} @media(max-width:760px){.pin-head .pin-cta{position:static;display:block;margin-top:1.5rem;}} /* --- 8b.8 flow diagram — replaces the stack of identical rows. Three automated steps, a full-width gate, three human steps. The gate is the argument, so it gets the whole width and nothing else does. --- */ .flow-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;} @media(max-width:860px){.flow-row{grid-template-columns:1fr;}} .flow-card{ border:1px solid var(--rule-dk);border-radius:var(--r-md); padding:1.5rem 1.45rem;background:rgba(255,255,255,.035); transition:background .3s ease,border-color .3s ease; } .flow-card:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.3);} .flow-card .f-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;} .flow-card .f-no{font-family:var(--serif);font-size:.9rem;color:var(--signal);letter-spacing:.04em;} .flow-card h3{font-size:1.02rem;margin-bottom:.35rem;} .flow-card p{margin:0;font-size:.86rem;color:var(--on-dark-2);line-height:1.5;} .gate-bar{ margin:1rem 0;padding:1.5rem 1.6rem;border-radius:var(--r-md); border:1px solid var(--signal);background:rgba(200,247,81,.09); display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;position:relative; } .gate-bar::before,.gate-bar::after{ content:"";position:absolute;left:50%;width:1px;height:1rem; background:linear-gradient(var(--signal),transparent); } .gate-bar::before{top:-1rem;background:linear-gradient(transparent,var(--signal));} .gate-bar::after{bottom:-1rem;} .gate-bar .g-ico{ width:46px;height:46px;flex:none;border:1px solid var(--signal);border-radius:50%; display:grid;place-items:center;color:var(--signal); } .gate-bar strong{ font-family:var(--serif);font-weight:400;font-size:1.15rem; display:block;margin-bottom:.2rem;color:#fff;letter-spacing:-.02em; } .gate-bar span span{font-size:.88rem;color:var(--on-dark-2);} @media(max-width:560px){.gate-bar{grid-template-columns:1fr;gap:.9rem;}} .flow-legend{ display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center; margin:0 0 1.6rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; color:var(--on-dark-3);font-weight:600; } .flow-legend b{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;} .flow-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;} .flow-legend .auto i{background:var(--signal);} .flow-legend .human i{background:var(--brass);} /* --- 8b.9 open pricing block — the brightest thing on the page --- */ .price-open{ background:var(--white);border:2px solid var(--signal);border-radius:var(--r-lg); overflow:hidden; } .price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));} @media(max-width:900px){.price-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:520px){.price-grid{grid-template-columns:1fr;}} .price-cell{padding:2rem 1.6rem;border-right:1px dashed var(--dash);} .price-cell:last-child{border-right:0;} @media(max-width:900px){ .price-cell:nth-child(2n){border-right:0;} .price-cell:nth-child(n+3){border-top:1px dashed var(--dash);} } @media(max-width:520px){ .price-cell{border-right:0;border-top:1px dashed var(--dash);} .price-cell:first-child{border-top:0;} } .price-cell .pk{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:600;margin:0 0 .8rem;} .price-cell .pv{ font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem); line-height:1;letter-spacing:-.04em;color:var(--ink);margin:0; } .price-cell .pu{font-size:.78rem;color:var(--slate-lt);margin:.55rem 0 0;} .price-foot{ background:var(--signal);color:var(--ink);padding:1.4rem 1.7rem; display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap; } .price-foot p{margin:0;font-size:.9rem;max-width:64ch;} .price-foot .btn-line{border-color:rgba(10,15,13,.35);color:var(--ink);} .price-foot .btn-line:hover{background:var(--ink);color:var(--signal);border-color:var(--ink);} /* --- 8b.10 person card --- */ .person{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;text-align:left;} .person .p-media{aspect-ratio:1/1;background:var(--paper-2);position:relative;overflow:hidden;} .person .p-media img{width:100%;height:100%;object-fit:cover;} .person .p-body{padding:1.5rem 1.6rem 1.7rem;} .person .p-name{font-size:1.1rem;margin-bottom:.2rem;} .person .p-role{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dk);font-weight:600;margin:0 0 .9rem;} .person p{font-size:.9rem;color:var(--slate);margin:0;} /* ========================================================================== 09 · CARDS & GRIDS ========================================================================== */ .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.4rem;} .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:1.4rem;} .grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.4rem;} .card{ background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg); padding:2.3rem 2rem 2rem;display:flex;flex-direction:column;position:relative; transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease; } .card:hover{border-color:rgba(10,15,13,.22);box-shadow:var(--sh);} .js .card:hover{transform:translateY(-4px);} .card.tinted{background:var(--paper-2);} .card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;} .c-icon{ width:62px;height:62px;border-radius:var(--r-md);background:var(--forest); display:grid;place-items:center;color:var(--signal);flex:none; transition:background .3s ease,color .3s ease; } .card:hover .c-icon{background:var(--accent);color:var(--ink);} .c-arrow{opacity:.3;color:var(--ink);transition:opacity .3s ease,transform .3s ease;margin-top:.4rem;} .card:hover .c-arrow{opacity:1;} .js .card:hover .c-arrow{transform:translate(3px,-3px);} .c-for{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk);margin:.35rem 0 1.1rem;font-weight:600;} .card > p{font-size:.95rem;color:var(--slate);margin:0 0 1.5rem;} .card .ticks{list-style:none;margin:0 0 1.7rem;padding:0;border-top:1px dashed var(--dash);} .card .ticks li{font-size:.885rem;padding:.72rem 0 .72rem 1.2rem;border-bottom:1px dashed var(--dash);position:relative;} .card .ticks li::before{content:"";position:absolute;left:0;top:1.22rem;width:6px;height:6px;background:var(--accent);border-radius:1px;} .c-foot{margin-top:auto;font-size:.82rem;color:var(--slate-lt);} .badge{ display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-dk);border:1px solid var(--accent);border-radius:var(--pill); padding:.3rem .7rem;margin-bottom:.85rem;font-weight:600; } /* link card */ a.card{text-decoration:none;color:inherit;} /* compliance box */ .cbox{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.95rem 1.75rem;background:var(--white);transition:border-color .3s ease,box-shadow .3s ease;} .cbox:hover{border-color:rgba(10,15,13,.22);box-shadow:var(--sh);} .cbox h3{font-size:1.06rem;margin-bottom:.6rem;} .cbox p{margin:0;font-size:.9rem;color:var(--slate);} .c-ref{display:inline-block;margin-top:1.05rem;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-dk);border-top:1px dashed var(--dash);padding-top:.75rem;font-weight:600;} /* clocks */ .clocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;} .clock{background:var(--white);padding:1.9rem 1.35rem;transition:background .25s ease;} .clock:hover{background:var(--paper-2);} .clock .cv{font-family:var(--display);font-size:clamp(1.9rem,3.2vw,2.4rem);letter-spacing:-.035em;line-height:1;margin-bottom:.18rem;font-variation-settings:"opsz" 120;} .clock .cu{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:.9rem;font-weight:600;} .clock .cw{font-size:.86rem;color:var(--slate);line-height:1.45;} .clock .cc{font-size:.74rem;color:var(--slate-lt);margin-top:.7rem;} /* stack (operating model) */ .stack{display:flex;flex-direction:column;gap:.65rem;} .layer{ border:1px solid var(--rule-dk);border-radius:var(--r-md); padding:1.45rem 1.6rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center; background:rgba(255,255,255,.03);transition:background .3s ease,border-color .3s ease; } .layer:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.32);} .layer .l-no{font-size:.95rem;color:var(--signal);letter-spacing:.04em;width:2rem;} .layer h3{font-size:1.06rem;margin-bottom:.2rem;} .layer p{margin:0;font-size:.87rem;color:var(--on-dark-2);line-height:1.5;} .l-tag{ font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600; padding:.35rem .75rem;border-radius:var(--pill);white-space:nowrap; border:1px solid rgba(255,255,255,.24);color:var(--on-dark-2); } .l-tag.auto{border-color:rgba(200,247,81,.45);color:var(--signal);background:rgba(200,247,81,.1);} .l-tag.human{border-color:var(--brass);color:var(--brass-lt);background:rgba(192,138,62,.15);} @media(max-width:760px){ .layer{grid-template-columns:auto 1fr;gap:1rem;} .l-tag{grid-column:2;justify-self:start;margin-top:.6rem;} } .gate{ border:1px solid var(--brass);background:rgba(192,138,62,.11);border-radius:var(--r-md); padding:1.55rem 1.6rem;display:flex;align-items:center;gap:1.25rem; } .gate .g-ico{width:44px;height:44px;flex:none;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;color:var(--brass-lt);} .gate strong{font-size:1.15rem;display:block;margin-bottom:.18rem;color:#fff;font-weight:400;letter-spacing:-.02em;} .gate span{font-size:.88rem;color:var(--on-dark-2);} .note{ margin-top:2.75rem;padding:1.55rem 1.75rem;border-left:2px solid var(--accent); background:rgba(255,255,255,.04);border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.93rem;color:var(--on-dark-2); } .note strong{color:#fff;font-weight:600;} .note.on-light{background:var(--paper-2);color:var(--slate);} .note.on-light strong{color:var(--ink);} /* disclosure list */ .disc-list{list-style:none;margin:0;padding:0;} .disc-list li{padding:1.4rem 0;border-bottom:1px dashed var(--dash-dk);display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;} .disc-list li:first-child{border-top:1px dashed var(--dash-dk);} .disc-list .d-ico{width:24px;height:24px;flex:none;color:var(--signal);margin-top:2px;} .disc-list strong{display:block;font-weight:600;font-size:.98rem;margin-bottom:.26rem;color:#fff;} .disc-list span{font-size:.9rem;color:var(--on-dark-2);line-height:1.55;} .disc-list.on-light li{border-bottom-color:var(--dash);} .disc-list.on-light li:first-child{border-top-color:var(--dash);} .disc-list.on-light .d-ico{color:var(--accent-dk);} .disc-list.on-light strong{color:var(--ink);} .disc-list.on-light span{color:var(--slate);} /* quote */ .quote-fig{max-width:56rem;margin-inline:auto;text-align:center;} .quote-fig blockquote{margin:0;font-family:var(--display);font-size:clamp(1.3rem,2.7vw,2rem);line-height:1.34;letter-spacing:-.02em;font-variation-settings:"opsz" 120;} .q-mark{font-family:var(--display);font-size:3.6rem;color:var(--accent);line-height:.6;display:block;margin-bottom:.9rem;} .quote-fig figcaption{margin-top:1.8rem;font-size:.88rem;color:var(--slate);} .quote-fig figcaption strong{display:block;font-weight:600;color:var(--ink);font-size:.96rem;} /* step list */ .steps{list-style:none;counter-reset:s;margin:0;padding:0;} .steps li{counter-increment:s;padding:1.5rem 0 1.5rem 4rem;border-bottom:1px dashed var(--dash);position:relative;} .steps li:first-child{border-top:1px dashed var(--dash);} .steps li::before{ content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.55rem; font-family:var(--display);font-size:1.05rem;color:var(--accent-dk);letter-spacing:.04em; } .steps h3{font-size:1.06rem;margin-bottom:.3rem;} .steps p{margin:0;font-size:.9rem;color:var(--slate);} /* insight card */ .i-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;} .i-cat{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dk);font-weight:600;} .i-meta{font-size:.78rem;color:var(--slate-lt);margin-top:1.2rem;} .i-thumb{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--paper-2);margin:-.4rem 0 1.4rem;} .i-thumb img{width:100%;height:100%;object-fit:cover;} /* ========================================================================== 10 · TABLES & DATA ========================================================================== */ .tbl{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--white);} .trow{ display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,2fr) minmax(0,1fr); gap:1.5rem;padding:1.65rem clamp(1.15rem,2.5vw,2.05rem); border-bottom:1px dashed var(--dash);align-items:center;transition:background .22s ease; } .trow:last-child{border-bottom:0;} .trow:not(.head):hover{background:var(--paper-2);} .trow.head{background:var(--forest);color:#fff;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;border-bottom:0;} .trow h3{font-size:1.05rem;margin-bottom:.2rem;} .t-brand{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-dk);font-weight:600;} .trow p{margin:0;font-size:.885rem;color:var(--slate);} .t-fee{font-family:var(--display);font-size:1.15rem;letter-spacing:-.02em;white-space:nowrap;font-variation-settings:"opsz" 40;} .t-fee small{display:block;font-family:var(--body);font-size:.72rem;letter-spacing:.07em;color:var(--slate-lt);margin-top:.25rem;text-transform:uppercase;font-weight:500;} @media(max-width:840px){.trow{grid-template-columns:1fr;gap:.75rem;}.trow.head{display:none;}} .foot-note{margin-top:1.5rem;font-size:.84rem;color:var(--slate-lt);display:flex;gap:.65rem;align-items:flex-start;} .foot-note svg{flex:none;margin-top:3px;color:var(--accent-dk);} /* definition rows */ .dl{list-style:none;margin:0;padding:0;} .dl li{padding:1.15rem 0;border-bottom:1px dashed var(--dash);display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:start;} .dl li:first-child{border-top:1px dashed var(--dash);} .dl .k{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-lt);padding-top:3px;font-weight:600;} .dl .v{font-size:.94rem;} .dl .v a{color:var(--accent-dk);text-decoration:none;} .dl .v a:hover{text-decoration:underline;} .theme-dark .dl li{border-color:var(--dash-dk);} .theme-dark .dl .k{color:var(--on-dark-3);} .theme-dark .dl .v a{color:var(--signal);} @media(max-width:560px){.dl li{grid-template-columns:1fr;gap:.3rem;}} /* ========================================================================== 11 · FORMS ========================================================================== */ .form-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.35rem);box-shadow:var(--sh);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;} @media(max-width:560px){.form-row{grid-template-columns:1fr;}} .field{margin-bottom:1.05rem;} .field label{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-bottom:.5rem;font-weight:600;} .field .req{color:var(--accent-dk);} .field input,.field select,.field textarea{ width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--rule); border-radius:var(--r-sm);padding:.85rem .95rem;font-family:var(--body);font-size:.94rem; transition:border-color .2s ease,background .2s ease; } .field select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:2.5rem;cursor:pointer; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2355635C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center; } .field textarea{resize:vertical;min-height:112px;} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--white);} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B3261E;background:#FDF3F2;} .form-note{font-size:.82rem;color:var(--slate-lt);margin:.4rem 0 1.35rem;line-height:1.55;} .formmsg{ border-radius:var(--r-sm);padding:.95rem 1.05rem;font-size:.9rem;margin-bottom:1.05rem; border:1px solid var(--accent);background:rgba(200,247,81,.16);color:var(--accent-dk); display:flex;gap:.6rem;align-items:flex-start; } .formmsg svg{flex:none;margin-top:3px;} .formmsg[hidden]{display:none;} .formmsg.err{border-color:#B3261E;background:#FDF3F2;color:#8C1D18;} /* ========================================================================== 12 · FOOTER ========================================================================== */ /* The panel needs air above it or it welds onto whatever dark section precedes it and the rounded corners never read. */ .footer{background:var(--paper);padding:var(--inset) var(--inset) var(--inset);} .footer.tight{padding-top:0;} .f-panel{ background:var(--ink);color:var(--on-dark-3); border-radius:clamp(0px,3vw,40px);padding:clamp(2.5rem,5vw,4rem) 0 2rem; font-size:.89rem;overflow:hidden;position:relative; } .f-panel::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(700px 380px at 88% -10%, rgba(200,247,81,.09), transparent 60%); } .f-panel > .wrap{position:relative;z-index:1;padding-inline:calc(var(--gut) - var(--inset));} .f-grid{ display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.15fr); gap:2.5rem;padding-bottom:2.75rem;border-bottom:1px dashed var(--dash-dk); } @media(max-width:1000px){.f-grid{grid-template-columns:1fr 1fr;gap:2.25rem;}} @media(max-width:560px){.f-grid{grid-template-columns:1fr;}} /* Contact column — the footer had no way to reach the firm at all */ .f-contact address{font-style:normal;color:var(--on-dark-2);line-height:1.62;margin:0 0 1rem;} .f-contact .f-link{ display:block;margin-bottom:.5rem;text-decoration:none;color:var(--on-dark-1); font-size:1rem;font-weight:500;transition:color .2s; } .f-contact .f-link:hover{color:var(--signal);} .f-contact .f-tel{color:var(--on-dark-2);font-size:.88rem;text-decoration:none;} .f-contact .f-tel:hover{color:var(--signal);} .f-grid h2{font-family:var(--body);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-2);margin:0 0 1.15rem;font-weight:600;} .f-grid ul{list-style:none;margin:0;padding:0;} .f-grid li{margin-bottom:.65rem;} .f-grid a{text-decoration:none;color:var(--on-dark-2);transition:color .2s;} .f-grid a:hover{color:var(--signal);text-decoration:underline;} .f-about p{margin:1.15rem 0 0;line-height:1.62;max-width:38ch;color:var(--on-dark-2);} .socials{display:flex;gap:.6rem;margin-top:1.5rem;} .socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;color:var(--on-dark-2);transition:border-color .2s,color .2s,background .2s;} .socials a:hover{border-color:var(--signal);color:var(--ink);background:var(--signal);} .f-legal{padding-top:1.9rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2.5rem;align-items:start;font-size:.79rem;color:var(--on-dark-2);} @media(max-width:860px){.f-legal{grid-template-columns:1fr;}} .f-ent{max-width:70ch;line-height:1.6;margin:0;} .f-ent strong{color:#fff;font-weight:600;} .f-mini{display:flex;gap:1.1rem;flex-wrap:wrap;list-style:none;margin:0 0 .6rem;padding:0;justify-content:flex-end;} @media(max-width:860px){.f-mini{justify-content:flex-start;}} .f-mini a{color:var(--on-dark-2);text-decoration:none;} .f-mini a:hover{color:var(--signal);text-decoration:underline;} /* ========================================================================== 13 · MOTION & REVEAL ========================================================================== */ /* Content is visible by default. Only the .js class opts into hiding it, so a JS failure can never blank the page. */ .js .rv{ opacity:0;transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1); transition-delay:var(--rv-d,0ms); } .js .rv.in{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){ .js .rv{opacity:1;transform:none;transition:none;} .js .card:hover,.js .card:hover .c-arrow{transform:none;} .btn:hover svg{transform:none;} .js .seal .ring{animation:none;} .js .mark svg path{transition:none;stroke-dashoffset:0;} *{scroll-behavior:auto!important;} } /* ========================================================================== 14 · ACCESSIBILITY & PRINT ========================================================================== */ .skip{ position:fixed;left:-9999px;top:0;z-index:200; background:var(--signal);color:var(--ink);padding:.75rem 1.2rem; font-size:.88rem;font-weight:600;border-radius:0 0 var(--r-sm) 0; } .skip:focus{left:0;} /* two-tone focus ring — meets 3:1 on both light and dark surfaces */ :focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px rgba(200,247,81,.75);border-radius:2px;} .theme-dark :focus-visible,.hero :focus-visible,.phead :focus-visible, .f-panel :focus-visible,.nav :focus-visible,.topbar :focus-visible{ outline-color:#fff;box-shadow:0 0 0 5px rgba(200,247,81,.85); } @media print{ .js .rv{opacity:1!important;transform:none!important;} .nav,.topbar,.marquee,.skip,.mq-pause,.btn,.btn-circle,.link-arrow .li{display:none!important;} .hero,.phead,.slab-inner,.f-panel,.bg-ink,.bg-forest,.split-r,.trow.head,.theme-dark{ background:#fff!important;color:#000!important; } .theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4, .f-panel a,.f-ent strong,.gate strong,.disc-list strong{color:#000!important;} .theme-dark .lede,.theme-dark p,.layer p,.disc-list span,.f-about p,.f-legal{color:#333!important;} .card,.cbox,.tbl,.form-card,.slab-inner{border:1px solid #999!important;box-shadow:none!important;} body{background:#fff;font-size:11pt;} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;} .sec{padding-block:1.5rem;} }