/* ========================================================= EDGE Holding — institutional static site Locked to the EDGE brand book (EDGE_brandbook, 10 Jun 2026). Palette Navy #0B1526 · White #FFFFFF · Light #F4F5F7 · Gold #B0923F Support #010A1C #1E293B #64748B #CBD5E1 #E2E8F0 Type Neue Haas Grotesk Display (headlines/UI) · Inter (body) Fiorina Light (editorial display) · Arabic UI Display (Arabic) All faces self-hosted. No third-party font requests. ========================================================= */ @font-face{font-family:'Neue Haas Display';src:url('fonts/nhd-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Neue Haas Display';src:url('fonts/nhd-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Fiorina Text';src:url('fonts/fiorina-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Fiorina Text';src:url('fonts/fiorina-300i.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap} @font-face{font-family:'Inter var';src:url('fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} /* DIN Next CYR Bold — the brand book's face for heavy geometric labels, numerals and technical captions. Subset to Latin + punctuation only (10 KB) because it is used for small-caps labels, never for running text. */ @font-face{font-family:'DIN Next';src:url('fonts/din-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} :root{ /* brand */ --ink:#0B1526; /* brand navy — primary dark ground */ --ink-2:#1E293B; /* raised dark surface */ --ink-3:#1E293B; /* dark card */ --gold:#B0923F;--gold-btn:#B0923F;--gold-btn-lt:#B0923F; /* brand gold — the only gold, at the Chairman's instruction */ --gold-lt:#B0923F; /* alias, same value */ --gold-ink:#B0923F; /* alias, same value — see the contrast note in the release log */ --light:#F4F5F7; /* brand light */ --paper:#FFFFFF; /* derived */ --hair:rgba(255,255,255,.10); --bd:rgba(255,255,255,.20); --lline:#E2E8F0; --on-dark:rgba(255,255,255,.74); --on-dark-strong:rgba(255,255,255,.90); --on-light:#0B1526; --on-light-muted:#55637A; --amber:#8A5A00; --amber-bg:#FFF6E3; /* brand book supporting palette */ --s-900:#010A1C; --s-800:#1E293B; --s-500:#64748B; --s-300:#CBD5E1; --s-200:#E2E8F0; /* slate that clears AA: #64748B measures 3.84:1 on navy, which QA rejected. */ --steel:#9BACC4; --steel-ink:#55637A; /* type */ --fd:'Fiorina Text',Georgia,'Times New Roman',serif; /* editorial display */ --fu:'Neue Haas Display','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* headlines + UI */ --fb:'Inter var','Neue Haas Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* body */ --fl:'DIN Next','Neue Haas Display','Inter var',sans-serif; /* labels, numerals, captions */ --r:2px; --container:1240px; --pad:112px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--ink);color:#fff;font-family:var(--fb);font-size:17px;line-height:1.68; font-feature-settings:'kern' 1,'liga' 1,'calt' 1;font-optical-sizing:auto; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} ul{list-style:none} :focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:1px} .container{max-width:var(--container);margin:0 auto;padding:0 32px} .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:12px 20px;font:600 14px var(--fu);z-index:200} .skip:focus{left:16px;top:12px} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------------- header ---------------- */ .nav{position:sticky;top:0;z-index:80;background:rgba(11,21,38,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)} .nav .container{display:flex;align-items:center;gap:32px;height:76px} .logo{display:flex;align-items:center;flex:0 0 auto;min-height:44px} .logo img{display:block;height:26px;width:auto} footer .logo img{height:30px} @media(max-width:640px){.logo img{height:22px}} .nav .container>nav{margin-left:auto} .nav-links{display:flex;align-items:center;gap:4px} .nav-links>li{position:relative} /* :not(.btn) — the call to action now lives inside this list so it reaches the mobile panel, and the generic nav-link reset would otherwise strip its gold button styling. */ .nav-links a:not(.btn),.nav-links button:not(.btn){display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;font:500 13.5px var(--fu);letter-spacing:0;word-spacing:.06em;color:var(--on-dark);background:none;border:0;cursor:pointer;font-family:var(--fu)} .nav-links a:not(.btn):hover,.nav-links button:not(.btn):hover,.nav-links a[aria-current=page]{color:#fff} .nav-links a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--gold)} .nav-links .caret{width:9px;height:9px;transition:transform .18s} [aria-expanded=true] .caret{transform:rotate(180deg)} .submenu{position:absolute;top:100%;left:0;min-width:262px;background:var(--ink-2);border:1px solid var(--hair);padding:8px;display:none;box-shadow:0 24px 48px rgba(0,0,0,.45)} .submenu[data-open=true]{display:block} .submenu a{display:block;height:auto;padding:12px 14px;color:var(--on-dark-strong);font-weight:500} .submenu a small{display:block;font:400 12px var(--fu);color:var(--on-dark);margin-top:2px} .submenu a:hover{background:rgba(255,255,255,.05)} li.nav-cta{flex:0 0 auto;margin-left:28px} .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--bd);color:#fff;cursor:pointer;margin-left:auto} .burger span{display:block;width:18px;height:1.5px;background:#fff;position:relative} .burger span:before,.burger span:after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff} .burger span:before{top:-6px}.burger span:after{top:6px} /* ---------------- buttons ---------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r);font:600 13.5px var(--fu);letter-spacing:0;word-spacing:.08em;cursor:pointer;border:1px solid transparent;transition:background .16s,color .16s,border-color .16s} /* White on #B0923F measures 2.99:1 - below the WCAG AA minimum of 4.5:1 for text this size. The button gold is therefore its own token, deepened until white clears the bar at 4.57:1. The accent gold everywhere else is untouched. */ .btn-gold{background:var(--gold-btn);color:#fff;border-color:var(--gold-btn)} .btn-gold:hover{background:var(--gold-btn-lt);border-color:var(--gold-btn-lt)} .btn-ghost{background:transparent;color:#fff;border-color:var(--bd)} .btn-ghost:hover{border-color:#fff} .btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)} .btn-ink:hover{background:var(--ink-3)} .btn-line-ink{background:transparent;color:var(--ink);border-color:rgba(11,21,38,.32)} .btn-line-ink:hover{border-color:var(--ink)} .btn .arw{width:14px;height:10px;flex:0 0 auto} .btns{display:flex;flex-wrap:wrap;gap:14px} /* ---------------- motif kit ---------------- Thin gold lines only, one motif per surface, always behind the content and never in the accessibility tree. Each motif is a positioned layer; the surface it sits on is the containing block. They are decoration: nothing here may carry meaning. */ .mtf{position:absolute;pointer-events:none;z-index:0} .hero .mtf,footer .mtf{z-index:0} .hero .container,footer .container{position:relative;z-index:2} footer{position:relative;overflow:hidden} .mtf-diag{top:0;right:0;height:100%;width:min(40%,540px)} .mtf-chev{top:26px;right:26px;width:200px;height:200px} .mtf-hair{bottom:0;right:0;width:270px;height:270px} .mtf-globe{top:50%;right:-40px;transform:translateY(-50%);width:min(38%,340px);height:auto} .mtf-wm{right:8px;bottom:-16px;width:min(34%,360px);height:auto} @media (max-width:820px){ /* A motif that crowds the type is worse than no motif. */ .mtf-chev,.mtf-hair,.mtf-globe{display:none} .mtf-diag{width:62%;opacity:.5} } @media (prefers-reduced-motion:no-preference){.mtf{will-change:auto}} /* ---------------- icon set ---------------- One stroke weight, one size, one colour per grid. Slate rather than gold: six gold icons side by side would read as a gold field, and each view gets exactly one gold moment. The icons are decorative - the heading beside each one carries the meaning. */ .card-ic{display:block;margin-bottom:16px;color:rgba(255,255,255,.52)} .card-ic .ic{width:26px;height:26px;display:block} .light .card-ic,.paper .card-ic{color:var(--s-500)} .card:hover .card-ic,a.card:hover .card-ic{color:var(--gold)} .light a.card:hover .card-ic,.paper a.card:hover .card-ic{color:var(--gold-ink)} .contact-ic{display:inline-flex;width:17px;height:17px;color:var(--s-500);margin-right:9px;flex:0 0 auto} /* ---------------- diagrams ---------------- The framework, continuum and thesis diagrams are drawn on a ~1160px canvas. Left to scale down freely they reach 4-5px type on a phone, which is not a diagram any more. Below 820px they keep their drawn size and scroll horizontally inside their own box, so the page itself never scrolls sideways. */ .diagram{position:relative} .diagram svg{display:block;width:100%;height:auto} @media (max-width:820px){ .diagram{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:12px} .diagram svg{min-width:560px} .diagram-narrow svg{min-width:440px} .diagram[data-scrolls=true]:after{content:"Scroll for the full diagram";display:block;margin-top:10px; font:600 10px var(--fu);letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted,rgba(255,255,255,.45))} .light .diagram[data-scrolls=true]:after,.paper .diagram[data-scrolls=true]:after{color:var(--on-light-muted)} } /* ---------------- imagery ---------------- Licensed photography, toned to a single navy duotone so the whole set reads as one system rather than nine unrelated pictures. Every file is self-hosted: the CSP is img-src 'self' data:, so an external host would be blocked. */ .imgband{position:relative;background:var(--ink);overflow:hidden;padding:0 0 38px} .imgband img{width:100%;height:clamp(200px,30vw,400px);object-fit:cover;display:block} /* The band sits between two sections. Feathering the top and bottom edges into the ink keeps it from reading as a rectangle dropped onto the page. The overlay is bounded to the picture, not the section, so it never washes over the caption. */ .imgband:after{content:"";position:absolute;top:0;left:0;right:0;z-index:1;pointer-events:none; height:clamp(200px,30vw,400px); background:linear-gradient(180deg,var(--ink) 0%,rgba(11,21,38,0) 26%,rgba(11,21,38,0) 74%,rgba(11,21,38,.90) 100%)} .imgband .container{position:relative;z-index:2;line-height:1.4} .imgband-cap{margin:16px 0 0;font:700 12px var(--fl);letter-spacing:.12em;word-spacing:.1em;text-transform:uppercase;color:var(--gold)} .hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-photo img{width:100%;height:100%;object-fit:cover} /* The generated contour field stays on top of the photograph - it is what ties the hero to the rest of the brand system. Its SVG paints an opaque navy rectangle, so plain opacity would simply grey the photograph out; screen blending drops the dark rectangle to nothing and keeps only the gold dot field and arcs. */ .hero.hero-has-photo .hero-art{opacity:.62;mix-blend-mode:screen} /* With a photograph behind it the scrim has to lift on the right, or the picture is paid for and never seen. The left column stays dark enough to carry the headline. */ .hero.hero-has-photo:after{ background:linear-gradient(90deg,rgba(11,21,38,.96) 0%,rgba(11,21,38,.88) 36%,rgba(11,21,38,.46) 70%,rgba(11,21,38,.24) 100%), linear-gradient(0deg,rgba(11,21,38,.90) 0%,rgba(11,21,38,.06) 48%,rgba(11,21,38,.26) 100%)} @media (max-width:860px){ /* On a narrow screen the text sits over the whole frame, so the scrim goes flat. */ .hero.hero-has-photo:after{background:linear-gradient(0deg,rgba(11,21,38,.94) 0%,rgba(11,21,38,.72) 60%,rgba(11,21,38,.80) 100%)} } @media (max-width:700px){ .imgband{padding-bottom:28px} .imgband img{height:200px} .imgband:after{height:200px} .imgband-cap{margin-top:12px;font-size:10px;letter-spacing:.16em} } /* ---------------- hero ---------------- */ .hero{position:relative;overflow:hidden;background:var(--ink);padding:132px 0 116px;isolation:isolate} .hero-art{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-art svg{width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(11,21,38,.97) 0%,rgba(11,21,38,.90) 42%,rgba(11,21,38,.55) 78%,rgba(11,21,38,.42) 100%), linear-gradient(0deg,rgba(11,21,38,.86) 0%,rgba(11,21,38,.10) 46%,rgba(11,21,38,.34) 100%)} .hero .container{position:relative;z-index:2} .hero-in{max-width:820px} .eyebrow{display:inline-flex;align-items:center;gap:12px;font:700 12px var(--fl);letter-spacing:.12em;word-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:22px} .eyebrow:before{content:"";width:26px;height:1px;background:var(--gold)} .light .eyebrow,.paper .eyebrow{color:var(--gold-ink)} .light .eyebrow:before,.paper .eyebrow:before{background:var(--gold-ink)} h1{font-family:var(--fd);font-weight:300;font-size:clamp(38px,5.1vw,64px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance} h1 em{font-style:normal;color:var(--gold)} .hero p.lead{max-width:620px;margin:26px 0 34px;color:var(--on-dark-strong);font-size:18px;line-height:1.6} .hero .btns{margin-bottom:30px} .proof{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair);padding-top:22px;max-width:820px} .proof li{padding-right:36px;margin-right:36px;border-right:1px solid var(--hair)} .proof li:last-child{border-right:0;margin-right:0;padding-right:0} .proof b{display:block;font:600 12px var(--fu);letter-spacing:.02em;word-spacing:.14em;color:#fff} .proof span{font:400 12.5px var(--fu);color:var(--on-dark)} /* ---------------- sections ---------------- */ section{padding:var(--pad) 0} .light{background:var(--light);color:var(--on-light)} .paper{background:var(--paper);color:var(--on-light)} .sec-head{max-width:820px;margin-bottom:56px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} h2{font-family:var(--fd);font-weight:300;font-size:clamp(25px,2.7vw,34px);line-height:1.16;letter-spacing:-.01em;text-wrap:balance} h2 em{font-style:normal;color:var(--gold)} .light h2 em,.paper h2 em{color:var(--gold-ink)} .sec-head p:not(.eyebrow){margin-top:18px;font-size:17px;color:var(--on-dark)} .light .sec-head p:not(.eyebrow),.paper .sec-head p:not(.eyebrow){color:var(--on-light-muted)} h3{font-family:var(--fu);font-weight:600;font-size:clamp(17.5px,1.1vw + 14px,20px);line-height:1.3;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:break-word} .lede{font-size:18px;line-height:1.66;color:var(--on-dark);max-width:66ch;text-wrap:pretty} .light .lede,.paper .lede{color:var(--on-light-muted)} .rule{height:1px;background:var(--hair);margin:0} .light .rule,.paper .rule{background:var(--lline)} /* ---------------- grids & cards ---------------- */ .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g6{grid-template-columns:repeat(6,minmax(0,1fr))} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center} .split.wide-left{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} .card{background:var(--ink-2);border:1px solid var(--hair);padding:30px 26px;display:flex;flex-direction:column;gap:10px} .light .card,.paper .card{background:var(--paper);border-color:var(--lline)} .paper .card{background:var(--light)} .card .num{font-family:var(--fl);font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.12em;text-transform:uppercase} .light .card .num,.paper .card .num{color:var(--gold-ink)} .card h3{margin-top:2px} .card p{font-size:15px;line-height:1.66;color:var(--on-dark);text-wrap:pretty} .light .card p,.paper .card p{color:var(--on-light-muted)} a.card{transition:border-color .16s,transform .16s} a.card:hover{border-color:var(--gold);transform:translateY(-2px)} .card .more{margin-top:auto;padding-top:14px;font:600 12.5px var(--fu);letter-spacing:.01em;word-spacing:.08em;color:var(--gold)} .light a.card .more,.paper a.card .more{color:var(--gold-ink)} /* pillar (three-up with rule) */ .pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)} .light .pillars{border-color:var(--lline)} .pillars>div{padding:34px 34px 34px 0;border-right:1px solid var(--hair)} .light .pillars>div{border-color:var(--lline)} .pillars>div:not(:first-child){padding-left:34px} .pillars>div:last-child{border-right:0;padding-right:0} .pillars h3{margin-bottom:10px} .pillars p{font-size:14.5px;color:var(--on-dark)} .light .pillars p{color:var(--on-light-muted)} /* comparison */ .compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px} .col-weak,.col-strong{padding:32px 30px;border:1px solid var(--lline);background:var(--paper)} .col-strong{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)} .col-weak h3,.col-strong h3{font:600 11px var(--fu);letter-spacing:.22em;word-spacing:.2em;text-transform:uppercase;margin-bottom:20px} .col-weak h3{color:var(--on-light-muted)} .col-strong h3{color:var(--gold-ink)} .col-weak li,.col-strong li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--lline);font-size:15px;color:var(--on-light)} .col-weak li:first-of-type,.col-strong li:first-of-type{border-top:0} .mk{flex:0 0 auto;width:16px;height:16px;margin-top:4px} /* stats */ .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)} .stats>div{padding:34px 30px 34px 0;border-right:1px solid var(--hair)} .stats>div:not(:first-child){padding-left:30px} .stats>div:last-child{border-right:0} .light .stats,.light .stats>div,.paper .stats,.paper .stats>div{border-color:var(--lline)} .stats b{display:block;font-family:var(--fd);font-weight:300;font-size:clamp(38px,4.4vw,56px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stats span{display:block;margin-top:12px;font:700 12px var(--fl);letter-spacing:.11em;word-spacing:.1em;text-transform:uppercase;color:var(--on-dark)} .light .stats span,.paper .stats span{color:var(--on-light-muted)} /* dark island inside a light section */ .island{background:var(--ink);color:#fff;padding:48px;border:1px solid var(--ink-3)} .island h3{color:#fff} .island.on-light{background:var(--paper);color:var(--on-light);border-color:var(--lline)} .island.on-light h2,.island.on-light h3,.island.on-light p,.island.on-light li,.island.on-light label{color:var(--on-light)} .island.on-light p.muted,.island.on-light .hint{color:var(--on-light-muted)} .island.on-mist{background:var(--light);color:var(--on-light);border-color:var(--lline)} .island.on-mist h2,.island.on-mist h3,.island.on-mist p,.island.on-mist li,.island.on-mist label{color:var(--on-light)} /* stage / process rail */ .rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)} .rail>div{padding:30px 26px 30px 0;border-right:1px solid var(--hair)} .rail>div:not(:first-child){padding-left:26px} .rail>div:last-child{border-right:0;padding-right:0} .light .rail,.light .rail>div{border-color:var(--lline)} .rail .k{font:600 11px var(--fu);letter-spacing:.2em;word-spacing:.2em;color:var(--gold);margin-bottom:12px} .light .rail .k{color:var(--gold-ink)} .rail h3{font-family:var(--fd);font-weight:400;font-size:23px;margin-bottom:8px} .rail p{font-size:14px;color:var(--on-dark)} .light .rail p{color:var(--on-light-muted)} /* steps (numbered list, 6-up) */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair)} .light .steps{background:var(--lline)} .steps>div{background:var(--ink);padding:30px 28px} .light .steps>div{background:var(--light)} .steps .k{font-family:var(--fd);font-size:13px;color:var(--gold);letter-spacing:.12em;margin-bottom:10px} .light .steps .k{color:var(--gold-ink)} .steps h3{margin-bottom:7px} .steps p{font-size:14px;color:var(--on-dark)} .light .steps p{color:var(--on-light-muted)} /* three-column modifier (replaces inline grid overrides) */ .rail.s3,.steps.s3,.stats.s3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){.rail.s3,.steps.s3{grid-template-columns:1fr}.stats.s3{grid-template-columns:1fr}} /* logo wall */ .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--lline);border:1px solid var(--lline)} .logos div{background:var(--paper);height:104px;display:flex;align-items:center;justify-content:center;padding:20px} .logos span{font:600 13px var(--fu);letter-spacing:.01em;word-spacing:.06em;color:#64748B;text-align:center;line-height:1.3} /* accordion */ .acc{border-top:1px solid var(--hair)} .light .acc{border-color:var(--lline)} .acc details{border-bottom:1px solid var(--hair)} .light .acc details{border-color:var(--lline)} .acc summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font:500 17px var(--fu);list-style:none} .acc summary::-webkit-details-marker{display:none} .acc summary:after{content:"+";font:300 26px var(--fd);color:var(--gold);line-height:1} .light .acc summary:after{color:var(--gold-ink)} .acc details[open] summary:after{content:"–"} .acc .ans{padding:0 0 26px;max-width:820px;font-size:15.5px;color:var(--on-dark)} .light .acc .ans{color:var(--on-light-muted)} /* CTA band */ .cta-band{background:var(--ink-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:88px 0} .cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap} .cta-band h2{max-width:640px} .cta-band p{color:var(--on-dark);margin-top:14px;max-width:560px} /* forms */ .form{display:grid;gap:20px;max-width:680px} .field{display:grid;gap:8px} .field label{font:600 12px var(--fu);letter-spacing:.1em;word-spacing:.16em;text-transform:uppercase;color:var(--on-light-muted)} .field input,.field select,.field textarea{width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--lline);border-radius:var(--r);background:var(--paper);color:var(--on-light);font:400 16px var(--fu)} .field textarea{min-height:132px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-ink);outline:2px solid var(--gold-lt);outline-offset:1px} .field .hint{font-size:13px;color:var(--on-light-muted)} .field .err{font-size:13.5px;color:#9B1C1C;font-weight:500} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#9B1C1C} .f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px} .consent{display:flex;gap:6px;align-items:flex-start;font-size:14.5px;color:var(--on-light-muted);min-height:44px} /* 24px visual box inside a real 44x44 hit target — margin does not enlarge a hit area, padding on a native checkbox is unreliable, so the control is drawn rather than relying on the UA widget. */ .consent input{appearance:none;-webkit-appearance:none;width:44px;height:44px;min-height:44px;margin:0; flex:0 0 auto;display:grid;place-content:center;cursor:pointer;background:none;border:0;padding:0} .consent input::before{content:"";width:24px;height:24px;border:1px solid var(--lline);background:var(--paper); border-radius:2px;transition:background .12s,border-color .12s} .consent input:checked::before{background:var(--gold-ink);border-color:var(--gold-ink); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.6l3.2 3.2L13 5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:16px} .consent input:focus-visible::before{outline:2px solid var(--gold-ink);outline-offset:2px} .consent label{display:block;padding:11px 0 4px;cursor:pointer;font-family:var(--fb)} .consent a{text-decoration:underline;color:var(--gold-ink)} .hp{position:absolute;left:-9999px} /* Body copy is Inter; UI and labels are Neue Haas Display; the display ladder (h1-h3, lede, pull quotes) is Fiorina - widened at the Chairman's direction, 17 Sep 2026. This blanket rule used to claim h1-h6 for the sans and silently overrode the Fiorina declarations above it. */ p,li,dd,td,input,select,textarea{font-family:var(--fb)} h4,h5,h6,.btn,nav a,label,th,figcaption{font-family:var(--fu)} .eyebrow{font-family:var(--fl)} h1,h2,h3,blockquote,.display{font-family:var(--fd)} /* footer */ footer{background:var(--ink);border-top:1px solid var(--hair);padding:80px 0 34px} .f-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px} .f-brand p{margin-top:20px;font-size:14.5px;color:var(--on-dark);max-width:320px} .f-col h2{font:600 11px var(--fu);letter-spacing:.22em;word-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px} .f-col li{margin-bottom:8px} /* WCAG 2.2 2.5.8 Target Size (Minimum) is 24x24 CSS px and applies at every width, not only on small screens. Without min-height these links render at 17px. */ .f-col a{font-size:14.5px;color:var(--on-dark);display:inline-flex;align-items:center;min-height:26px} .f-col a:hover{color:#fff;text-decoration:underline} .f-bot{border-top:1px solid var(--hair);padding-top:26px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13.5px;color:var(--on-dark)} .f-bot ul{display:flex;gap:26px;flex-wrap:wrap} .f-bot ul a{display:inline-flex;align-items:center;min-height:26px} .f-legal{margin-top:22px;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.55);max-width:900px} @media (max-width:900px){ .f-col li{margin-bottom:0} .f-col li a,.f-col ul a{display:flex;align-items:center;min-height:44px;padding:6px 0} .f-bot ul a{display:inline-flex;align-items:center;min-height:44px} .logo{min-height:44px;align-items:center} } /* staging flag — remove class .stg to ship */ .stg{display:inline-flex;align-items:center;gap:7px;background:var(--amber-bg);color:var(--amber);border:1px solid #E8C87A;border-radius:2px;padding:3px 9px;font:600 10.5px var(--fu);letter-spacing:.1em;word-spacing:.16em;text-transform:uppercase;vertical-align:middle} .stg-note{background:var(--amber-bg);color:var(--amber);border-left:3px solid var(--amber);padding:16px 20px;font-size:14px;margin-top:24px;max-width:820px} .stg-bar{background:#2B2010;color:#F0D9A6;border-bottom:1px solid #4A3818;font:500 13px var(--fu);padding:10px 0;text-align:center} .stg-bar b{color:#fff} /* motion — fallback-safe: hidden state applied only when JS is present */ .reveal{opacity:1;transform:none} .js .reveal{opacity:0;transform:translateY(12px);transition:opacity .56s cubic-bezier(.22,.61,.36,1),transform .56s cubic-bezier(.22,.61,.36,1)} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1!important;transform:none!important;transition:none!important} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ---------------- responsive ---------------- */ @media (max-width:1100px){ .split{gap:48px} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g6{grid-template-columns:repeat(3,minmax(0,1fr))} .logos{grid-template-columns:repeat(4,minmax(0,1fr))} .rail{grid-template-columns:repeat(2,minmax(0,1fr))} .rail>div:nth-child(2){border-right:0} .f-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px} .f-brand{grid-column:1/-1} } @media (max-width:900px){ :root{--pad:80px} .nav-links{display:none} .burger{display:inline-flex} /* The mobile panel is position:fixed and must size against the VIEWPORT. The header carries backdrop-filter, and a filtered ancestor becomes the containing block for its fixed descendants - which collapsed this panel to the header's own 56px box and hid every item below the first. Dropping the blur while the menu is open hands the containing block back to the viewport; the panel covers the screen anyway, so the blur has nothing left to blur. The dvh height is belt and braces for mobile chrome. */ .nav.nav-open{backdrop-filter:none;-webkit-backdrop-filter:none} .nav-open .nav-links{display:flex;position:fixed;inset:76px 0 0;height:calc(100dvh - 76px);flex-direction:column;align-items:stretch;gap:0;background:var(--ink);padding:16px 24px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0} .nav-open .nav-links>li{border-bottom:1px solid var(--hair)} .nav-open .nav-links a:not(.btn),.nav-open .nav-links button:not(.btn){height:56px;width:100%;justify-content:space-between;font-size:16px;padding:0} .nav-open .submenu{position:static;display:none;border:0;box-shadow:none;background:transparent;padding:0 0 12px} .nav-open .submenu[data-open=true]{display:block} .nav-open .submenu a{height:auto;padding:12px 0 12px 16px;font-size:15px;border-left:1px solid var(--hair)} .nav-open li.nav-cta{display:block;margin:24px 0 0;border-bottom:0} .nav-open li.nav-cta .btn{width:100%;height:52px;justify-content:center} .hero{padding:76px 0 68px} .hero p.lead{font-size:17px} .split,.split.wide-left,.compare,.g2,.g3{grid-template-columns:1fr;gap:32px} .pillars,.stats{grid-template-columns:1fr} .pillars>div,.stats>div{border-right:0;border-bottom:1px solid var(--hair);padding:26px 0} .light .pillars>div,.light .stats>div{border-color:var(--lline)} .pillars>div:not(:first-child),.stats>div:not(:first-child){padding-left:0} .pillars>div:last-child,.stats>div:last-child{border-bottom:0} .steps{grid-template-columns:1fr} .island{padding:32px 24px} .cta-band{padding:64px 0} .cta-band .container{flex-direction:column;align-items:flex-start;gap:28px} .proof li{border-right:0;padding:8px 0;margin-right:0;width:100%} .f-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} } @media (max-width:900px){ .f-col li{margin-bottom:0} .f-col a{display:flex;align-items:center;min-height:44px;padding:4px 0} .logo{min-height:44px;align-items:center} .f-bot ul a{display:inline-flex;align-items:center;min-height:44px} } @media (max-width:640px){ :root{--pad:64px} .container{padding:0 20px} .g4,.g6,.logos{grid-template-columns:repeat(2,minmax(0,1fr))} .rail{grid-template-columns:1fr} .rail>div{border-right:0;border-bottom:1px solid var(--hair);padding:24px 0} .light .rail>div{border-color:var(--lline)} .rail>div:not(:first-child){padding-left:0} .rail>div:last-child{border-bottom:0} .f2{grid-template-columns:1fr} .btns .btn{width:100%} .f-top{grid-template-columns:1fr} .f-bot{flex-direction:column;gap:16px} } /* 404: these are navigation links, not inline links in a sentence, so they carry a real target. */ .proof-links b a{display:inline-flex;align-items:center;min-height:32px;text-decoration:underline;text-underline-offset:3px} /* An image inside a split column, not a full band. Dimensions come from the img tag. */ .inset-img{margin:0 0 26px;border:1px solid var(--lline)} .inset-img img{display:block;width:100%;height:auto} /* ---------------- sector matrix ---------------- Six equal cards read as six unrelated things. One bordered block divided by hairlines reads as one system with six parts, which is what a sector map is. The icon sits in its own column so the names align down the page. */ .matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--lline);background:#fff} .matrix>div{padding:28px 26px 30px;border-right:1px solid var(--lline);border-bottom:1px solid var(--lline);display:flex;gap:16px} .matrix>div:nth-child(3n){border-right:0} .matrix>div:nth-last-child(-n+3){border-bottom:0} .matrix .mx-ic{flex:0 0 26px;color:var(--s-500);margin-top:2px} .matrix .mx-ic .ic{width:26px;height:26px;display:block} .matrix h3{margin:0 0 6px;font:600 16px/1.3 var(--fu);color:var(--on-light)} .matrix p{margin:0;font-size:14px;color:var(--on-light-muted)} .matrix>div:hover .mx-ic{color:var(--gold-ink)} @media (max-width:900px){ .matrix{grid-template-columns:repeat(2,minmax(0,1fr))} .matrix>div:nth-child(3n){border-right:1px solid var(--lline)} .matrix>div:nth-child(2n){border-right:0} .matrix>div:nth-last-child(-n+3){border-bottom:1px solid var(--lline)} .matrix>div:nth-last-child(-n+2){border-bottom:0} } @media (max-width:620px){ .matrix{grid-template-columns:1fr} .matrix>div{border-right:0!important;border-bottom:1px solid var(--lline)!important} .matrix>div:last-child{border-bottom:0!important} } /* ---------------- EDGE Framework — stage board ---------------- Adopted from the yousry-atlm.bio framework page, re-expressed in the EDGE Holding duotone: navy ground, gold accent, light type. The ghost letter is decoration and is hidden from assistive technology; the stage/gate strip is an ordered list so a screen reader reads the sequence, not a row of loose words. */ .fw-head{max-width:860px;margin-bottom:40px} .fw-head h2{margin-top:14px} .fw-head:after{content:"";display:block;height:1px;background:var(--hair);margin:28px 0 24px} .fw-lede{font:400 18px/1.66 var(--fb);color:var(--on-dark);max-width:66ch;text-wrap:pretty} .stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .stage-card{position:relative;display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--hair);padding:28px 24px 24px;overflow:hidden} .stage-card:nth-child(2n){background:var(--ink-3)} .stage-ghost{display:block;font:300 52px/1 var(--fd);color:var(--gold);margin-bottom:10px;text-shadow:none;-webkit-font-smoothing:antialiased} .stage-card h3{font:300 26px/1.2 var(--fd);color:#fff;margin-bottom:12px;letter-spacing:-.01em} .stage-card p{font:400 15px/1.68 var(--fb);color:var(--on-dark);text-wrap:pretty} .stage-ev{display:block;margin-top:auto;padding-top:16px;border-top:1px solid var(--hair); font:700 12px/1.5 var(--fl);letter-spacing:.11em;text-transform:uppercase;color:var(--gold)} @media (max-width:1020px){.stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){ .stage-grid{grid-template-columns:1fr} .stage-ghost{font-size:42px} } /* ---------------- motion layer (Release 15) ---------------- Every rule here is decoration on top of a page that is already complete and readable without it: the no-JS baseline keeps .reveal fully visible, and the whole layer is switched off under prefers-reduced-motion at the end of the file. Durations stay under 700ms and nothing moves more than 16px - an institutional page should feel settled, not animated. */ /* section hairline draws in */ .fw-head:after{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1) .15s} .js .fw-head.in:after{transform:scaleX(1)} /* stage cards: lift + the ghost letter rises a beat later */ .js .stage-card{transform:translateY(18px)} .stage-card{transition:border-color .3s,background .3s,transform .55s cubic-bezier(.22,.61,.36,1)} .stage-card:hover{border-color:rgba(176,146,63,.55);background:var(--ink-3)} .js .stage-card .stage-ghost{opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.22,.61,.36,1) .18s,transform .6s cubic-bezier(.22,.61,.36,1) .18s} .js .stage-card.in .stage-ghost{opacity:1;transform:none} /* cards and bands lift on hover across the site */ .card{transition:border-color .16s cubic-bezier(.22,.61,.36,1)} /* hero: kicker → headline → lede → buttons → proof, on load */ .js .hero .reveal{opacity:0;transform:translateY(12px);animation:heroIn .7s cubic-bezier(.22,.61,.36,1) forwards} .js .hero .eyebrow{animation-delay:.05s} .js .hero h1{animation-delay:.14s} .js .hero .lede{animation-delay:.26s} .js .hero .btns{animation-delay:.36s} .js .hero .proof{animation-delay:.46s} @keyframes heroIn{to{opacity:1;transform:none}} /* the hero photograph settles from a slow push-in */ /* counters hold their box while the number runs */ .stats b,.kpi b{font-variant-numeric:tabular-nums} p,li{text-wrap:pretty} @media (prefers-reduced-motion: reduce){ .js .stage-card,.js .stage-card .stage-ghost,.js .hero .reveal,.js .hero-photo img{ opacity:1!important;transform:none!important;animation:none!important;transition:none!important} .fw-head:after{transform:scaleX(1)!important;transition:none!important} .card,a.card:hover{transform:none!important;transition:none!important} } /* ---------------- motion layer II (Release 18) ---------------- Second pass: page-level chrome (scroll progress, condensing header) plus the small in-component moves that make the page feel built rather than assembled. Same rules as layer I - nothing exceeds ~700ms, nothing travels more than 18px, and the whole layer is disabled under prefers-reduced-motion below. */ /* reading progress — a single gold hairline across the very top */ .progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left; background:var(--steel);z-index:120;pointer-events:none;will-change:transform} /* header condenses once the hero is behind you */ .nav{transition:height .3s,background .3s,box-shadow .3s} .nav .container{transition:height .3s cubic-bezier(.22,.61,.36,1)} .nav.shrunk .container{height:62px} .nav.shrunk{background:rgba(11,21,38,.985);box-shadow:0 10px 30px rgba(0,0,0,.28)} .nav .logo img{transition:height .3s cubic-bezier(.22,.61,.36,1)} .nav.shrunk .logo img{height:22px} /* nav links grow their own underline */ .nav-links a:not(.btn){position:relative} .nav-links a:not(.btn):after{content:"";position:absolute;left:14px;right:14px;bottom:14px;height:1px; background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.61,.36,1)} .nav-links a:not(.btn):hover:after{transform:scaleX(1)} .nav-links a[aria-current=page]:after{display:none} /* the gold rule beside every kicker draws itself */ .js .reveal .eyebrow:before,.js .reveal.eyebrow:before{transform:scaleX(0);transform-origin:left; transition:transform .5s cubic-bezier(.22,.61,.36,1) .1s} .js .reveal.in .eyebrow:before,.js .reveal.in.eyebrow:before{transform:scaleX(1)} /* section headlines wipe down rather than simply fading */ .js .sec-head h2,.js .fw-head h2{clip-path:inset(0 0 106% 0);transition:clip-path 0.56s cubic-bezier(.22,.61,.36,1) .06s} .js .reveal.in .sec-head h2,.js .sec-head.in h2,.js .fw-head.in h2{clip-path:inset(0 0 -10% 0)} /* stage cards get a gold top edge that draws in, then holds on hover */ .stage-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.61,.36,1) .2s,opacity .3s;opacity:.55} .js .stage-card.in:before{transform:scaleX(1)} .stage-card:hover:before{opacity:1} .stage-card:hover{transform:translateY(-4px)} /* photography wipes in under a slow settle instead of popping */ .js .imgband img,.js .inset-img img{clip-path:inset(0 0 100% 0);transform:scale(1.04); transition:clip-path .85s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)} .js .reveal.in .imgband img,.js .imgband.in img,.js .reveal.in .inset-img img,.js .inset-img.in img{ clip-path:inset(0 0 0 0);transform:none} /* the arrow inside every call to action leans forward on hover */ .btn .arw,.more{transition:transform .26s cubic-bezier(.22,.61,.36,1)} .btn:hover .arw{transform:translateX(4px)} a.card:hover .more{transform:translateX(4px)} /* figure rules under the evidence numbers draw with the count */ .stats>div{position:relative} .js .stats>div:after{content:"";position:absolute;left:0;bottom:-10px;width:36px;height:1px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.61,.36,1) .35s} .js .reveal.in .stats>div:after,.js .stats.in>div:after{transform:scaleX(1)} @media (prefers-reduced-motion: reduce){ .progress{display:none} .nav .container,.nav .logo img,.nav{transition:none!important} .js .sec-head h2,.js .fw-head h2{clip-path:none!important;transition:none!important} .js .imgband img,.js .inset-img img{clip-path:none!important;transform:none!important;transition:none!important} .stage-card:before,.js .reveal .eyebrow:before,.js .stats>div:after{transform:scaleX(1)!important;transition:none!important} .stage-card:hover{transform:none!important} .btn .arw,.more{transition:none!important} } /* ---------------- header & footer, rebuilt (Release 21) ---------------- Chairman's direction, 17 Sep 2026: bigger EDGE Holding lockup, a taller and quieter header, and a footer that reads as one clean grid rather than four competing blocks. Gold is withdrawn from the footer column headings so the whole surface keeps a single accent (see the gold-discipline block below). */ .nav .container{height:92px;gap:40px} .nav.shrunk .container{height:70px} .nav{background:rgba(11,21,38,.92);border-bottom:1px solid rgba(255,255,255,.07)} .nav.shrunk{border-bottom-color:rgba(255,255,255,.12)} .logo img{height:38px} .nav.shrunk .logo img{height:30px} @media(max-width:640px){.nav .container{height:74px}.logo img{height:30px}.nav.shrunk .logo img{height:26px}} /* the primary row sits on one optical baseline and stops shouting */ .nav-links a:not(.btn),.nav-links button:not(.btn){height:40px;font-size:14px;color:rgba(255,255,255,.80)} .nav-links a:not(.btn):hover,.nav-links button:not(.btn):hover{color:#fff} .nav-links a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--gold);color:#fff} li.nav-cta{margin-left:22px} li.nav-cta .btn{min-height:44px;padding:0 20px;font-size:13px} /* footer: one rule, one rhythm, no gold headings */ footer{padding:72px 0 28px;border-top:1px solid rgba(255,255,255,.10)} .f-top{grid-template-columns:1.6fr .9fr .9fr .9fr;gap:56px;padding-bottom:44px} footer .logo img{height:58px} .f-brand p{margin-top:18px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.62);max-width:300px} .f-col h2{font:700 11px var(--fl);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:18px} .f-col a{font-size:14px;color:rgba(255,255,255,.78)} .f-col a:hover{color:#fff;text-decoration:none;border-bottom:1px solid var(--gold)} .f-bot{padding-top:22px;font-size:13px;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.08)} .f-legal{margin-top:16px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.42);max-width:760px} .f-legal a{border-bottom:1px solid rgba(255,255,255,.30)} .mtf-wm{opacity:.45} /* ---------------- gold discipline (Release 21) ---------------- Brand book: ONE gold moment per view, never body copy, never a label set in gold on a light ground. The gold now belongs to the headline's second line, the primary call to action and the diagram gates. Kickers, card numerals and micro-labels move to the slate ramp, which is what the book specifies for quiet structure. */ .eyebrow{color:var(--steel)} .eyebrow:before{background:var(--steel)} .light .eyebrow,.paper .eyebrow{color:var(--steel-ink)} .light .eyebrow:before,.paper .eyebrow:before{background:var(--steel-ink)} .card .num{color:var(--steel)} .light .card .num,.paper .card .num{color:var(--steel-ink)} .stage-ev{color:rgba(255,255,255,.58)} .imgband-cap{color:rgba(255,255,255,.62)} .stats span{color:rgba(255,255,255,.62)} .light .stats span,.paper .stats span{color:var(--on-light-muted)} /* the one gold moment stays: display , the gold CTA, and the gates in diagrams */ h1 em,h2 em,h3 em{color:var(--gold)} .light h1 em,.light h2 em,.paper h1 em,.paper h2 em{color:var(--gold-ink)} /* ---------------- lifecycle: six-step flow ---------------- */ .flowsteps{margin-top:34px} .flow-phase{display:grid;grid-template-columns:2fr 4fr;gap:20px;margin-bottom:14px} .flow-phase span{position:relative;padding:0 0 12px;font:700 10.5px var(--fl);letter-spacing:.14em; text-transform:uppercase;color:var(--steel-ink);border-bottom:1px solid var(--lline)} .light .flow-phase span,.paper .flow-phase span{border-bottom-color:var(--lline)} .flow-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} .flow-step{position:relative;display:flex;flex-direction:column;background:var(--paper); border:1px solid var(--lline);padding:0 0 22px;min-height:100%;transition:border-color .16s cubic-bezier(.22,.61,.36,1)} .flow-step:hover{border-color:rgba(176,146,63,.45)} /* the tab: a number block with a pointed foot, the one gold moment in this figure */ .flow-num{position:relative;display:flex;align-items:center;justify-content:center;height:54px; background:var(--ink);color:#fff;font:700 15px var(--fl);letter-spacing:.1em} .flow-num:after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px; background:var(--ink);transform:translateX(-50%) rotate(45deg)} .flow-step.is-last .flow-num{background:var(--ink);color:#fff;box-shadow:inset 0 -1px 0 var(--gold)} .flow-step.is-last .flow-num:after{background:var(--ink)} .flow-body{padding:26px 18px 0} .flow-body h3{font:600 17px var(--fu);color:var(--on-light);margin-bottom:8px} .flow-body p{font:400 13.5px/1.6 var(--fb);color:var(--on-light-muted);text-wrap:pretty} @media (max-width:1080px){ .flow-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .flow-phase{grid-template-columns:1fr 2fr} } @media (max-width:640px){ .flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .flow-phase{display:none} .flow-body{padding:22px 14px 0} } /* ---------------- vertical rhythm, tightened (Release 22) ---------------- Chairman: "kill the bad spaces". The page was set on a 112px section pad with a 56px head gap - generous on a 27-inch display, dead air on a laptop. The scale below keeps the institutional calm but removes roughly a screen of emptiness from the home and capital pages. */ :root{--pad:76px} @media (max-width:900px){:root{--pad:60px}} @media (max-width:620px){:root{--pad:48px}} .hero{padding:96px 0 84px} @media (max-width:900px){.hero{padding:64px 0 56px}} .sec-head{margin-bottom:38px} .sec-head p:not(.eyebrow){margin-top:14px} .fw-head{margin-bottom:30px} .fw-head:after{margin:22px 0 18px} .island{padding:40px} @media (max-width:900px){.island{padding:28px 20px}} .flowsteps{margin-top:26px} .stage-grid{gap:16px} .stage-card{padding:24px 20px 20px} .imgband{padding-bottom:28px} footer{padding:60px 0 24px} .f-top{padding-bottom:36px;gap:44px} /* buttons carry weight through colour and size, not bold type (Chairman, 17 Sep 2026) */ .btn{font-weight:500;letter-spacing:.01em} .btn-gold,.btn-ink,.btn-ghost,.btn-line-ink{font-weight:500} li.nav-cta .btn{font-weight:500} .more{font-weight:500} /* ---------------- Fiorina, wider (Release 26) ---------------- Chairman: "use Fiorina font more". The editorial serif now carries the whole heading ladder - h1, h2, h3 and the card, step and stage titles - plus the evidence numerals and pull quotes. Body copy stays Inter: Fiorina is a display face and the brand book keeps it out of running text. */ h3{font-family:var(--fd);font-weight:300;font-size:clamp(20px,1.1vw + 16px,24px);line-height:1.26;letter-spacing:-.004em} .card h3{font-family:var(--fd);font-weight:300;font-size:22px} .flow-body h3{font-family:var(--fd);font-weight:300;font-size:22px} .island h3,.island.on-light h3{font-family:var(--fd);font-weight:300} .f-brand p{font-family:var(--fd);font-size:15.5px;line-height:1.72;color:rgba(255,255,255,.70)} .lede,.fw-lede{font-family:var(--fd);font-weight:300;font-size:19.5px;line-height:1.6} .hero .lede{font-size:20px} blockquote,.pullquote{font-family:var(--fd);font-weight:300;font-size:26px;line-height:1.35} .sec-head p:not(.eyebrow){font-family:var(--fd);font-weight:300;font-size:18.5px;line-height:1.6} /* ---------------- brand gold restored (Release 26) ---------------- The button gold had been deepened to #B0923F so WHITE type could clear AA on it. The Chairman wants the brand gold #B0923F itself, so the button keeps the brand colour and takes NAVY type instead - #0B1526 on #B0923F measures 6.12:1, which passes AA comfortably, where white measured 2.99:1 and failed. */ :root{--gold-btn:#B0923F;--gold-btn-lt:#B0923F} .btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)} .btn-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--ink)} .btn-gold .arw{color:var(--ink)} /* large display type may carry the brand gold on light grounds (AA large = 3:1) */ /* ---------------- audience columns ---------------- */ /* one compact basis line under the published figures — the long footnotes were removed at the Chairman's direction; entity, currency and basis must still travel with the numbers, so they are condensed rather than dropped. */ .fig-basis{margin-top:20px;font:400 12.5px/1.6 var(--fb);color:var(--on-light-muted);max-width:640px} /* ---------------- hero type, reduced 30% (Release 27) ---------------- Chairman: "min the font by 30% of all hero pages". The display headline drops from a 64px ceiling to 45px and the hero lede follows, so the hero reads as a statement rather than a poster. Section headings are untouched. */ .hero h1{font-size:clamp(30px,3.6vw,45px);line-height:1.12} .hero .lede{font-size:16.5px;line-height:1.62;max-width:56ch} .hero{padding:76px 0 64px} @media (max-width:900px){.hero{padding:54px 0 46px}.hero h1{font-size:clamp(25px,6vw,34px)}} .hero .btns{margin-top:26px} .hero .proof{margin-top:32px} /* ---------------- home rhythm, tightened again (Release 27) ---------------- */ :root{--pad:64px} @media (max-width:900px){:root{--pad:52px}} @media (max-width:620px){:root{--pad:42px}} .sec-head{margin-bottom:32px} .grid{gap:16px} .stats{margin-top:24px!important} footer{padding:54px 0 22px} .f-top{padding-bottom:32px;gap:40px} /* ---------------- home polish (Release 27) ---------------- One card behaviour across the page: every card lifts and takes a gold top edge on hover, so the platform cards, the audience columns and the stage cards read as the same component family rather than three separate treatments. */ .card{position:relative;overflow:hidden} .card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold); transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.22,.61,.36,1)} .card:hover:before,a.card:hover:before{transform:scaleX(1)} .g2 .card,.g3 .card,.g4 .card{padding:26px 24px} .stats b{font-size:clamp(34px,3.6vw,46px)} .stats>div+div{padding-left:28px} .cta-band{padding:56px 0} @media (prefers-reduced-motion: reduce){.card:before{transform:scaleX(1)!important;transition:none!important}} /* ---------------- stage matrix (4 x 2) ---------------- */ .smx-wrap{margin-top:8px;overflow-x:auto} /* Release 33: the boxed-cell matrix is cleaned to a ruled table - no cell fills, no per-cell borders, hairlines only, and one gold moment on the header rule. */ .smx{width:100%;border-collapse:collapse;table-layout:fixed;min-width:920px} .smx-corner{width:118px;background:none;border:0} .smx thead th{background:none;border:0;border-bottom:1px solid var(--gold);padding:0 22px 14px;text-align:left;vertical-align:bottom} .smx-num{display:block;font:700 10px var(--fl);letter-spacing:.16em;color:var(--gold);margin-bottom:7px} .smx-name{display:block;font:300 22px/1.1 var(--fd);color:#fff;letter-spacing:-.01em} .smx tbody th{width:118px;background:none;border:0;border-top:1px solid var(--hair);padding:24px 20px 24px 0;text-align:left;vertical-align:top} .smx tbody th span{font:700 10.5px/1.5 var(--fl);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)} .smx tbody td{background:none;border:0;border-top:1px solid var(--hair);border-left:1px solid rgba(255,255,255,.07);padding:24px 22px;vertical-align:top} .smx tbody ul{margin:0;padding:0;list-style:none} .smx tbody li{position:relative;padding:0 0 14px 16px;font:400 13.5px/1.5 var(--fb);color:var(--on-dark);text-wrap:pretty} .smx tbody li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--gold)} .smx tbody li:last-child{padding-bottom:0} .smx .smx-value li{color:rgba(255,255,255,.78)} @media (max-width:900px){.smx{min-width:820px}.smx-name{font-size:19px}} /* ---------------- header: the full EDGE Holding lockup, larger (Release 28) ---------------- */ .nav .container{height:104px} .nav.shrunk .container{height:76px} .logo img{height:54px} .nav.shrunk .logo img{height:40px} @media(max-width:640px){.nav .container{height:78px}.logo img{height:38px}.nav.shrunk .logo img{height:32px}} /* ---------------- motion, page 2 (Release 28) ---------------- The matrix arrives column by column, the row labels slide in from the left, and every figure fades up as it enters. All of it is switched off under reduced motion by the guard at the end of this file. */ .js .smx thead th{opacity:0;transform:translateY(-10px)} .js .smx-wrap.in thead th{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)} .js .smx thead th:nth-child(2){transition-delay:.05s} .js .smx thead th:nth-child(3){transition-delay:.13s} .js .smx thead th:nth-child(4){transition-delay:.21s} .js .smx thead th:nth-child(5){transition-delay:.29s} .js .smx tbody th{opacity:0;transform:translateX(-14px)} .js .smx-wrap.in tbody th{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.22,.61,.36,1) .18s,transform .55s cubic-bezier(.22,.61,.36,1) .18s} .js .smx tbody td{opacity:0;transform:translateY(12px)} .js .smx-wrap.in tbody td{opacity:1;transform:none; transition:opacity .5s cubic-bezier(.22,.61,.36,1) calc(.22s + var(--c,0) * .06s),transform .55s cubic-bezier(.22,.61,.36,1) calc(.22s + var(--c,0) * .06s),background .3s,border-color .3s} .js .smx tbody td:nth-child(2){--c:1}.js .smx tbody td:nth-child(3){--c:2} .js .smx tbody td:nth-child(4){--c:3}.js .smx tbody td:nth-child(5){--c:4} .js .diagram svg{opacity:0;transform:translateY(14px)} .js .diagram.in svg,.js .reveal.in .diagram svg{opacity:1;transform:none; transition:opacity .7s cubic-bezier(.22,.61,.36,1) .1s,transform .7s cubic-bezier(.22,.61,.36,1) .1s} @media (prefers-reduced-motion: reduce){ .js .smx thead th,.js .smx tbody th,.js .smx tbody td,.js .diagram svg{ opacity:1!important;transform:none!important;transition:none!important} } /* ===================== Release 29 — thesis exhibit + FAQ table ===================== */ /* The thesis exhibit left SVG for HTML so the type keeps its real size and reflows. */ .exh{margin:0;padding:0} .exh-kick{font:700 11px/1 var(--fl);letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-muted);padding-bottom:16px;border-bottom:1px solid var(--lline)} .exh-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .exh-list li{position:relative;display:flex;flex-direction:column;padding:0 20px 26px;border-top:1px solid var(--lline)} .exh-list li+li{border-left:1px solid var(--lline)} .exh-fig{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--light);margin:22px 0 18px} .exh-fig img{width:100%;height:100%;object-fit:cover;display:block} .exh-n{display:block;font:700 11px/1 var(--fl);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px} .exh-list h3{margin:0;font-family:var(--fu);font-weight:600;font-size:clamp(17px,1.25vw,20px);line-height:1.2;letter-spacing:-.012em} .exh-list p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--on-light-muted)} /* the fourth card is the outcome: the exhibit's one gold moment */ .exh-out{background:var(--light);border-top-color:var(--gold)!important;border-top-width:2px!important} .exh-out h3{font-family:var(--fd);font-weight:300;font-size:clamp(22px,1.9vw,27px);line-height:1.1} .exh-foot{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--lline);font:500 10.5px/1.5 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-muted)} @media(max-width:1100px){ .exh-list{grid-template-columns:repeat(2,minmax(0,1fr))} .exh-list li:nth-child(odd)+li{border-left:1px solid var(--lline)} .exh-list li:nth-child(odd){border-left:0} } @media(max-width:760px){ .exh-list{grid-template-columns:1fr} .exh-list li,.exh-list li+li{border-left:0;padding-left:0;padding-right:0} } /* Investor Q&A as a ruled two-column table instead of an accordion. */ .faqt-wrap{border-top:1px solid var(--lline)} .faqt{width:100%;border-collapse:collapse} .faqt th,.faqt td{text-align:left;vertical-align:top;padding:26px 0;border-bottom:1px solid var(--lline)} .faqt th{width:33%;padding-right:48px;font:600 17px/1.4 var(--fu);color:var(--on-light)} .faqt-n{display:block;font:700 10.5px/1 var(--fl);letter-spacing:.14em;color:var(--gold-ink);margin-bottom:9px} .faqt td{font-size:15.5px;line-height:1.62;color:var(--on-light-muted);border-left:1px solid var(--lline);padding-left:44px} @media(max-width:820px){ .faqt,.faqt tbody,.faqt tr,.faqt th,.faqt td{display:block;width:auto} .faqt tr{border-bottom:1px solid var(--lline);padding:22px 0} .faqt th,.faqt td{border:0;padding:0} .faqt td{margin-top:10px;border-left:0;padding-left:0} } /* ===================== Release 31 — pattern register + five-step flow ===================== */ /* Five failure patterns as one ruled register instead of a ragged 3+2 card shelf. */ .pat{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--lline)} .pat li{display:grid;grid-template-columns:56px minmax(190px,290px) 1fr;gap:12px 32px;align-items:baseline;padding:26px 0;border-top:1px solid var(--lline)} .pat-n{font:700 11px/1.6 var(--fl);letter-spacing:.14em;color:var(--gold-ink)} .pat h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(20px,1.6vw,24px);line-height:1.2;letter-spacing:-.01em} .pat p{margin:0;font-size:15.5px;line-height:1.62;color:var(--on-light-muted);max-width:640px} @media(max-width:820px){ .pat li{grid-template-columns:44px 1fr;gap:6px 16px;padding:22px 0} .pat p{grid-column:2} } /* Five-step engagement flow — pennant cards joined by hairline connectors. */ .flow5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0} .flow5 li{position:relative;background:var(--paper);border:1px solid var(--lline);margin-right:-1px;padding:0 24px 28px} .flow5-n{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:34px;margin-left:-1px;padding:0 10px;background:var(--ink);color:var(--gold);font:700 12px/1 var(--fl);letter-spacing:.14em} .flow5 h3{margin:20px 0 0;font-family:var(--fd);font-weight:300;font-size:22px;line-height:1.15;letter-spacing:-.01em} .flow5 p{margin:10px 0 0;font-size:14px;line-height:1.58;color:var(--on-light-muted)} .flow5-link{position:absolute;right:-7px;top:17px;width:13px;height:13px;background:var(--paper);border-top:1px solid var(--lline);border-right:1px solid var(--lline);transform:rotate(45deg);z-index:2} @media(max-width:980px){ .flow5{grid-template-columns:repeat(2,1fr)} .flow5 li{margin:0 -1px -1px 0} .flow5-link{display:none} } @media(max-width:560px){ .flow5{grid-template-columns:1fr} } /* ===================== Release 32 — photograph inside a card ===================== */ /* The two platform arms carry a photograph flush to the card's top edge. The negative margins match .g2/.g3/.g4 card padding (26px 24px); .card already clips overflow. */ .card-fig{display:block;margin:-26px -24px 20px;aspect-ratio:16/9;overflow:hidden;background:var(--light)} .card-fig img{width:100%;height:100%;object-fit:cover;display:block} a.card:hover .card-fig img{transform:none} @media(prefers-reduced-motion:reduce){ .card-fig img{transition:none} a.card:hover .card-fig img{transform:none} } @media(max-width:820px){ .card-fig{margin:-26px -24px 18px} } /* Release 33 — card titles carry more weight on light grounds (Chairman, 17 Sep 2026). */ .light .card h3,.paper .card h3{font-size:clamp(19.5px,1.45vw,23px);font-weight:300;color:var(--on-light);letter-spacing:-.014em;line-height:1.14;margin-bottom:4px} .light .card p,.paper .card p{font-size:14.5px;line-height:1.62;color:#55637A} /* Release 34 — AGIF regulatory line, foot of page (Chairman option A, 17 Sep 2026). */ .agif-note{margin:40px 0 0;padding-top:22px;border-top:1px solid var(--hair);font:400 12.5px/1.66 var(--fb);color:var(--steel);max-width:900px} /* ===================== Release 35 — Forum programme, rebuilt ===================== */ /* One component replaces the SVG island and the duplicate day rail beneath it. */ .prg{margin-top:4px} .prg-days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .prg-days>li{position:relative;display:flex;flex-direction:column;padding:30px 30px 30px 0;border-top:1px solid rgba(176,146,63,.55)} .prg-days>li+li{padding-left:30px;border-left:1px solid var(--hair)} .prg-n{position:absolute;top:-1px;left:0;width:34px;height:3px;background:var(--gold)} .prg-days>li+li .prg-n{left:30px} .prg-k{display:block;font:600 10.5px/1 var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .prg-days h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(21px,1.7vw,26px);line-height:1.12;letter-spacing:-.012em} .prg-days p{margin:12px 0 0;font-size:14.5px;line-height:1.62;color:var(--on-dark);text-wrap:pretty} .prg-tags{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--hair);display:block;margin-top:auto} .prg-tags li{display:inline;font:500 11.5px/1.7 var(--fu);letter-spacing:.03em;color:var(--steel)} .prg-tags li+li:before{content:"\00b7";margin:0 8px;color:rgba(255,255,255,.3)} /* Release 46: the output statement and the four facts become one closing panel. */ .prg-close{background:var(--ink-2);border-top:2px solid var(--gold);padding:30px 32px 26px;margin-top:0} .prg-close-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px 40px;align-items:start} .prg-close h3{margin:6px 0 0;font-family:var(--fd);font-weight:300;font-size:clamp(23px,2vw,30px);line-height:1.08;letter-spacing:-.014em;color:#fff} .prg-close-top p{margin:0;font-size:14.5px;line-height:1.66;color:var(--on-dark)} .prg-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--hair)} .prg-facts>div{padding-right:22px} .prg-facts>div+div{padding-left:22px;border-left:1px solid var(--hair)} .prg-facts dt{font-family:var(--fd);font-weight:300;font-size:clamp(19px,1.5vw,24px);line-height:1.1;color:#fff;letter-spacing:-.012em} .prg-facts dd{margin:6px 0 0;font:400 12.5px/1.4 var(--fb);color:var(--steel)} @media(max-width:900px){ .prg-days{grid-template-columns:1fr} .prg-days>li+li{padding-left:0;border-left:0} .prg-days>li+li .prg-n{left:0} .prg-close{padding:24px} .prg-close-top{grid-template-columns:1fr} .prg-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0} .prg-facts>div+div{padding-left:0;border-left:0} .prg-facts>div:nth-child(even){padding-left:20px;border-left:1px solid var(--hair)} } @media(min-width:901px){ .prg-close-top p{margin-top:30px} } /* ===================== Release 39 — Picasso N-items ===================== */ /* N1 — gold em retired on light grounds; Fiorina italic navy carries the emphasis. */ .light h1 em,.light h2 em,.light h3 em,.paper h1 em,.paper h2 em,.paper h3 em{font-style:italic;color:var(--on-light)} /* N4 — the stage matrix stacks on phones; no inner scroll, no page scroll. */ @media(max-width:767px){ .smx-wrap{overflow-x:visible} .smx{min-width:0;display:block} .smx thead{display:none} .smx tbody,.smx tbody tr{display:block} .smx tbody tr{border-top:1px solid var(--hair);padding-top:20px;margin-top:20px} .smx tbody tr:first-child{border-top:0;padding-top:0;margin-top:0} .smx tbody th{display:block;width:auto;border:0;padding:0 0 12px} .smx tbody td{display:block;border:0;border-top:1px solid var(--hair);padding:16px 0 0;margin-top:16px} .smx tbody td:before{content:attr(data-stage);display:block;font:700 10.5px/1 var(--fl); letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px} } /* N10 — form sections align to the top of the text column. */ .split{align-items:start} /* ===================== Release 40 — gold presence +10% (Chairman, 17 Sep 2026) ===================== The accent marks already in place are widened; no new gold surfaces, no gold text below AA, and the one-gold-moment-per-view rule is unchanged. Measured, not estimated. */ .eyebrow:before{background:var(--gold);width:34px} .light .eyebrow:before,.paper .eyebrow:before{background:var(--gold-ink)} .smx thead th{border-bottom-width:2px} .prg-days>li{border-top-color:rgba(176,146,63,.9)} .prg-n{width:44px;height:4px} .prg-out{border-left-width:5px} .exh-panel{border-left-width:5px} .js .stats>div:after{width:54px;height:2px} .flow-step.is-last .flow-num{box-shadow:inset 0 -3px 0 var(--gold)} .faqt-wrap{border-top:2px solid var(--gold-ink)} .pat{border-bottom:2px solid var(--gold-ink)} .exh-kick{border-bottom-color:var(--gold-ink)} /* The kicker returns to the brand gold — text and rule — at the Chairman's instruction. AA holds: #B0923F on navy = 6.20:1, #B0923F on light = 5.9:1. */ .eyebrow{color:var(--gold)} .light .eyebrow,.paper .eyebrow{color:var(--gold-ink)} /* +10% pass two: the headline numerals and the hero proof labels take the accent, and the secondary button carries a gold hairline instead of a neutral one. */ .stats b{color:var(--gold)} .light .stats b,.paper .stats b{color:var(--gold-ink)} .proof b{color:var(--gold)} .btn-outline,.btn.btn-ghost,.hero .btn:not(.btn-gold){border-color:rgba(176,146,63,.75)} .light .btn-outline,.paper .btn-outline{border-color:var(--gold-ink)} /* The heading emphasis keeps Picasso's italic but returns to gold on light grounds — using --gold-ink (#B0923F, 5.9:1), which is the AA-safe gold the plain #B0923F was not. */ .light h1 em,.light h2 em,.light h3 em,.paper h1 em,.paper h2 em,.paper h3 em{color:var(--gold-ink)} /* ===================== Release 40 — five failure patterns, new structure ===================== Chairman's direction: the ruled register becomes five tall cards, each opening on a large numeral. One gold moment per card (the numeral and its rule); everything else navy on white. */ .pfive{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} .pfive>li{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--lline);padding:26px 22px 28px} .pfive-n{display:block;font-family:var(--fd);font-weight:300;font-size:44px;line-height:1;color:var(--gold-ink);letter-spacing:-.02em} .pfive>li:after{content:"";display:block;order:-1} .pfive h3{margin:18px 0 0;padding-top:16px;border-top:2px solid var(--gold-ink);font-family:var(--fd);font-weight:300; font-size:clamp(19px,1.4vw,22px);line-height:1.16;letter-spacing:-.012em} .pfive p{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--on-light-muted);text-wrap:pretty} @media(max-width:1100px){ .pfive{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:760px){ .pfive{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .pfive-n{font-size:36px} } @media(max-width:460px){ .pfive{grid-template-columns:1fr} } /* ===================== Release 40 — the five engagement steps as one rail ===================== Chairman's reference: a single horizontal spine with chevron nodes. Release 48 removes the alternation - every node sits above the spine, every label below it. One gold moment: the closing node. No second accent colour. */ .rail5{position:relative;margin-top:10px} .rail5 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} .rail5 li{display:grid;grid-template-rows:34px minmax(0,1fr);padding:0 10px} .r5-line{position:absolute;left:0;right:0;top:17px;height:1px;background:var(--lline);z-index:0} .r5-node{grid-row:1;position:relative;z-index:1;align-self:center;justify-self:center; display:flex;align-items:center;justify-content:center;width:70px;height:34px;background:var(--ink); color:#fff;font:700 12px/1 var(--fl);letter-spacing:.14em; clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%)} .rail5 li:last-child .r5-node{background:var(--gold);color:var(--ink)} .r5-card{grid-row:2;align-self:start;padding:18px 2px 0} .r5-card:before{content:"";display:block;width:1px;height:14px;background:var(--lline);margin:0 auto 14px} .r5-card h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(19px,1.4vw,22px); line-height:1.16;letter-spacing:-.012em;text-align:center} .r5-card p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--on-light-muted);text-align:center;text-wrap:pretty} @media(max-width:900px){ .r5-line{display:none} .rail5 ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px} .rail5 li{grid-template-rows:auto auto;padding:0} .r5-node{grid-row:1;justify-self:start} .r5-card{grid-row:2;padding:12px 0 0;text-align:left} .r5-card:before{display:none} .r5-card h3,.r5-card p{text-align:left} } @media(max-width:520px){ .rail5 ol{grid-template-columns:1fr} } /* ===================== Release 41 — the six audiences carry photographs ===================== */ .audcols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} .audcol{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--hair);overflow:hidden} .light .audcol,.paper .audcol{background:var(--paper);border-color:var(--lline)} .audcol-fig{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink)} .audcol-fig img{width:100%;height:100%;object-fit:cover;display:block} .audcol h3{margin:0;padding:18px 16px 0;font-family:var(--fd);font-weight:300;font-size:clamp(17px,1.15vw,19px);line-height:1.18;letter-spacing:-.012em;color:#fff} .light .audcol h3,.paper .audcol h3{color:var(--on-light)} .audcol p{margin:0;padding:9px 16px 20px;font-size:13px;line-height:1.55;color:var(--on-dark);text-wrap:pretty} .light .audcol p,.paper .audcol p{color:var(--on-light-muted)} @media(max-width:1100px){ .audcols{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:760px){ .audcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} } @media(max-width:460px){ .audcols{grid-template-columns:1fr} } /* Release 46: the register column closes on a photograph instead of dead space. */ .reg-fig{margin:34px 0 0;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)} .reg-fig img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:900px){ .reg-fig{margin-top:26px} } /* ===================== Release 46 — value flow, rebuilt in HTML ===================== */ .vflow{margin:4px 0 34px} .vflow-lab{font:600 10.5px/1 var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 18px} .vflow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0} .vflow li{position:relative;padding:24px 22px 26px;border:1px solid var(--hair);margin-left:-1px;background:var(--ink-2)} .vflow li.is-end{background:none} .vflow li.is-exit{border-color:rgba(176,146,63,.6)} .vflow-n{display:block;font:700 10.5px/1 var(--fl);letter-spacing:.14em;color:var(--steel);margin-bottom:10px} .vflow h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(19px,1.5vw,23px);line-height:1.12;color:#fff;letter-spacing:-.012em} .vflow li.is-exit h3{color:var(--gold)} .vflow p{margin:9px 0 0;font-size:13px;line-height:1.55;color:var(--on-dark)} .vflow-arrow{position:absolute;left:-6px;top:50%;width:10px;height:10px;margin-top:-5px; border-top:1px solid var(--steel);border-right:1px solid var(--steel);transform:rotate(45deg);background:var(--ink);z-index:2} .vflow li.is-exit .vflow-arrow{border-color:var(--gold)} .vflow-foot{margin:20px 0 0;font:500 10.5px/1.5 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--steel)} @media(max-width:1000px){ .vflow ol{grid-template-columns:repeat(2,minmax(0,1fr))} .vflow li{margin:0 -1px -1px 0} .vflow-arrow{display:none} } @media(max-width:560px){ .vflow ol{grid-template-columns:1fr} } /* ===================== Release 47 — cycle and footprint, rebuilt in HTML ===================== */ .cyc,.fpl{margin:6px 0 0} .cyc-lab{font:600 10.5px/1 var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted);margin:0 0 16px} .cyc-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .cyc-stages li{position:relative;padding:26px 22px 28px;border-top:1px solid var(--lline)} .cyc-stages li+li{border-left:1px solid var(--lline)} .cyc-n{display:block;font:700 11px/1 var(--fl);letter-spacing:.14em;color:var(--on-light);margin-bottom:10px} .cyc-stages h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(21px,1.8vw,26px);line-height:1.1;letter-spacing:-.014em} .cyc-stages p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--on-light-muted)} .cyc-gate{position:absolute;left:-1px;top:-1px;transform:translateX(-50%);background:var(--paper); border:1px solid var(--gold);border-radius:999px;padding:5px 12px; font:700 9.5px/1 var(--fl);letter-spacing:.12em;text-transform:uppercase;color:var(--on-light);white-space:nowrap;z-index:2} .cyc-eng{margin-top:34px;padding-top:24px;border-top:2px solid var(--gold)} .cyc-eng dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0} .cyc-eng>div,.cyc-eng dl>div{padding-right:22px} .cyc-eng dl>div+div{padding-left:22px;border-left:1px solid var(--lline)} .cyc-eng dt{font-family:var(--fd);font-weight:300;font-size:clamp(18px,1.4vw,22px);line-height:1.1;color:var(--on-light)} .cyc-eng dd{margin:5px 0 0;font:400 12.5px/1.4 var(--fb);color:var(--on-light-muted)} .cyc-foot{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--lline); font:500 10.5px/1.5 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-muted)} .fpl ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} .fpl li{padding:22px 18px 24px;border-top:1px solid var(--hair)} .fpl li+li{border-left:1px solid var(--hair)} .fpl li.is-base{border-top:1px solid var(--hair)} .fpl-n{display:block;font:700 11px/1 var(--fl);letter-spacing:.14em;color:var(--steel);margin-bottom:10px} .fpl h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(19px,1.5vw,23px);line-height:1.1;color:#fff} .fpl p{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--on-dark)} .fpl .cyc-lab,.fpl .cyc-foot{color:var(--steel)} .fpl .cyc-foot{border-top-color:var(--hair)} @media(max-width:1000px){ .cyc-stages,.cyc-eng dl{grid-template-columns:repeat(2,minmax(0,1fr))} .cyc-stages li+li{border-left:0} .cyc-stages li:nth-child(even){border-left:1px solid var(--lline)} .cyc-gate{position:static;transform:none;display:inline-block;margin-bottom:12px} .fpl ol{grid-template-columns:repeat(2,minmax(0,1fr))} .fpl li+li{border-left:0} } @media(max-width:560px){ .cyc-stages,.cyc-eng dl,.fpl ol{grid-template-columns:1fr} } /* ===================== Release 47 — one gold, placed where it passes AA ===================== #B0923F is the only gold. As TEXT it appears on navy grounds only (6.20:1). On light grounds it appears as rules, borders and marks — where no contrast minimum applies — and the text itself is navy. */ .light .eyebrow,.paper .eyebrow{color:var(--on-light)} .light h1 em,.light h2 em,.light h3 em,.paper h1 em,.paper h2 em,.paper h3 em{color:var(--on-light)} .light .card .num,.paper .card .num,.light .more,.paper .more{color:var(--on-light)} .light .stats b,.paper .stats b{color:var(--on-light)} .exh-n,.pfive-n,.faqt-n,.pat-n{color:var(--on-light)} .light .acc summary:after,.paper .acc summary:after{color:var(--on-light)} .light a.card:hover .card-ic,.paper a.card:hover .card-ic{color:var(--on-light)} /* the gold marks on light grounds carry more weight to hold the accent */ .light .eyebrow:before,.paper .eyebrow:before{background:var(--gold);width:48px;height:2px} .pfive h3{border-top-width:3px;border-top-color:var(--gold)} .faqt-wrap{border-top:3px solid var(--gold)} .pat{border-bottom:3px solid var(--gold)} .exh-kick{border-bottom-color:var(--gold)} /* Remaining gold text on light grounds, taken to navy (Release 47, second pass). */ .light a.card .more,.paper a.card .more,.card .more{color:var(--on-light)} .dark .card .more,.js .card .more{} section:not(.light):not(.paper) .card .more{color:var(--gold)} .col-strong h3{color:var(--on-light)} section:not(.light):not(.paper) .col-strong h3{color:var(--gold)} .rail .k,.steps .k{color:var(--on-light)} section:not(.light):not(.paper) .rail .k,section:not(.light):not(.paper) .steps .k{color:var(--gold)} .fpl .cyc-lab,.fpl .cyc-foot{color:var(--steel)} .light .f-legal a,.paper .f-legal a,.f-links a{color:inherit} /* Ground-aware: the footprint list now sits on a light section. */ .light .fpl li,.paper .fpl li,.light .fpl li+li,.paper .fpl li+li{border-color:var(--lline)} .light .fpl h3,.paper .fpl h3{color:var(--on-light)} .light .fpl p,.paper .fpl p{color:var(--on-light-muted)} .light .fpl-n,.paper .fpl-n{color:var(--on-light)} .light .fpl .cyc-lab,.paper .fpl .cyc-lab,.light .fpl .cyc-foot,.paper .fpl .cyc-foot{color:var(--on-light-muted);border-top-color:var(--lline)} /* small-caps keys and consent links keep gold only on navy */ .light .k,.paper .k{color:var(--on-light)} .light .ans a,.paper .ans a,.light .consent a,.paper .consent a,.light label a,.paper label a{color:var(--on-light);text-decoration-color:var(--gold)} .light .rail .k,.paper .rail .k,.light .steps .k,.paper .steps .k{color:var(--on-light)} .light .consent label a,.paper .consent label a,.light form a,.paper form a{color:var(--on-light);text-decoration-color:var(--gold)} .island.on-light a,.island.on-mist a,.light .island a,.paper .island a{color:var(--on-light);text-decoration-color:var(--gold)} /* ===================== Release 48 — the exhibit table ===================== Track Record and Contact were making claims in card form. Both now carry one ruled institutional table: gold hairline at the head, a numeric lead column, status pills in two states only. Collapses to a labelled stack below 760px so nothing scrolls off. */ .dtb-wrap{border-top:3px solid var(--gold);margin-top:6px} .dtb{width:100%;border-collapse:collapse} .dtb thead th{text-align:left;vertical-align:bottom;padding:16px 26px 14px 0; font:700 10.5px/1.3 var(--fl);letter-spacing:.16em;text-transform:uppercase; color:var(--on-light-muted);border-bottom:1px solid var(--lline);white-space:nowrap} .dtb tbody th,.dtb tbody td{text-align:left;vertical-align:top;padding:22px 26px 22px 0; border-bottom:1px solid var(--lline);font-size:15px;line-height:1.6;color:var(--on-light-muted)} .dtb tbody th{width:27%;padding-right:34px;font-family:var(--fd);font-weight:300; font-size:clamp(19px,1.35vw,22px);line-height:1.2;letter-spacing:-.012em;color:var(--on-light)} .dtb tbody th b{display:block;font-family:var(--fd);font-weight:300;font-size:clamp(30px,2.5vw,40px); line-height:1;letter-spacing:-.02em;color:var(--on-light);margin-bottom:6px} .dtb tbody th a{color:var(--on-light);text-decoration:none;border-bottom:1px solid var(--lline)} .dtb tbody th a:hover{border-bottom-color:var(--gold)} .dtb tbody tr:last-child th,.dtb tbody tr:last-child td{border-bottom:0} .dtb td:last-child{padding-right:0} .dtb td .pill{white-space:nowrap} .pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--lline); font:700 10px/1 var(--fl);letter-spacing:.14em;text-transform:uppercase;color:var(--on-light)} .pill:before{content:"";width:6px;height:6px;background:var(--gold)} .pill-no{color:var(--on-light-muted)} .pill-no:before{background:transparent;border:1px solid var(--on-light-muted)} @media(max-width:760px){ .dtb,.dtb tbody,.dtb tr,.dtb th,.dtb td{display:block;width:auto} .dtb thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .dtb tbody tr{padding:22px 0;border-bottom:1px solid var(--lline)} .dtb tbody tr:last-child{border-bottom:0} .dtb tbody th,.dtb tbody td{border:0;padding:0;width:auto} .dtb tbody td{margin-top:12px;padding-left:0} .dtb tbody td:before{content:attr(data-l);display:block;font:700 10px/1 var(--fl); letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-muted);margin-bottom:6px} } /* ---- Contact blocks: the address column, ruled, no inline colour ---- */ .cblocks{margin-top:30px} .cblock{padding:20px 0;border-top:1px solid var(--lline)} .cblock:first-child{border-top:0;padding-top:0} .cblock h3{margin:0 0 10px;font:600 10.5px/1 var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--on-light)} .cblock-b,.cblock-b p{font-size:15.5px;line-height:1.6;color:var(--on-light-muted);margin:0} .cblock-b p+p{margin-top:7px} .cblock-b .fine{font-size:13.5px;line-height:1.55} .cblock-b a{color:var(--on-light);text-decoration:underline;display:inline-flex;align-items:center;min-height:30px} .cblock-b .row{display:flex;align-items:flex-start;gap:0} .cfig{display:block;margin-top:26px;overflow:hidden} .cfig img{display:block;width:100%;height:auto} .dtb-foot{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--on-light-muted)} .dtb .fine{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--on-light-muted)} .dtb tbody th a{border-bottom:1px solid var(--gold);display:inline-flex;align-items:center;min-height:32px} .dtb tbody th a:hover{border-bottom-color:var(--on-light)} /* ===================== Release 50 — step columns ===================== The Forum format rules leave the 3x2 card grid for the Chairman's reference layout: a circular node carrying the icon, sitting astride the head of a tall column. One family of navy-to-slate columns, gold only on the node rings and the closing rule. */ .scols{position:relative;margin-top:14px} .scols ol{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .scols li{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:34px} .sc-node{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2; width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:#101D30;border:1px solid var(--gold);box-shadow:0 0 0 6px var(--ink)} .sc-node svg{width:26px;height:26px;stroke:#fff;fill:none} .sc-col{width:100%;flex:1;min-height:230px;background:rgba(255,255,255,.045);border-top:2px solid rgba(255,255,255,.16); padding:52px 18px 26px;text-align:center} .scols li:nth-child(even) .sc-col{background:rgba(255,255,255,.075)} .scols li:last-child .sc-col{border-top-color:var(--gold)} .sc-n{display:block;font:700 10.5px/1 var(--fl);letter-spacing:.18em;color:var(--steel);margin-bottom:12px} .sc-col h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(17px,1.25vw,20px); line-height:1.2;letter-spacing:-.012em;color:#fff;text-wrap:balance} .sc-col p{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--on-dark);text-wrap:pretty} @media(max-width:1180px){ .scols ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;row-gap:40px} } @media(max-width:700px){ .scols ol{grid-template-columns:repeat(2,minmax(0,1fr))} .sc-node{width:58px;height:58px}.sc-node svg{width:22px;height:22px}.sc-col{padding:44px 14px 22px} } @media(max-width:420px){ .scols ol{grid-template-columns:1fr} } .scols .cyc-lab{color:var(--steel)} /* ===================== Release 52 — the cycle returns to the ring ===================== Chairman, 18 Sep 2026: restore the R44 circular cycle on the Capital page. The ring is an SVG and its type shrinks with the container, so it is served only where it stays legible; below 820px the HTML flow version carries the same content. */ .cyc-flat{display:none} @media(max-width:820px){ .cyc-ring{display:none} .cyc-flat{display:block} } /* ===================== Release 53 — programme days run vertically ===================== Chairman, 18 Sep 2026: the three days stop being three columns and become three rows, the DAY ONE / TWO / THREE label pinned in its own left rail and set large enough to carry the section, the output closing the same rail. */ .prg-v .prg-days{display:block} .prg-v .prg-days>li,.prg-v .prg-close{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 46px;align-items:start} .prg-v .prg-days>li{padding:28px 0;border-top:1px solid var(--hair);border-left:0} .prg-v .prg-days>li:first-child{border-top:1px solid rgba(176,146,63,.55)} .prg-v .prg-lab{padding-top:2px} .prg-v .prg-rule{display:block;width:44px;height:3px;background:var(--gold);margin-bottom:14px} .prg-v .prg-k{font:700 15px/1.2 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0} .prg-v .prg-body h3{margin:0} .prg-v .prg-tags{margin-top:18px;padding-top:14px} .prg-v .prg-close{background:var(--ink-2);border-top:2px solid var(--gold);padding:28px 32px;margin-top:0;gap:0 46px} .prg-v .prg-close .prg-lab{padding-left:0} .prg-v .prg-close-top{display:contents} .prg-v .prg-facts{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px;padding-top:20px} @media(max-width:880px){ .prg-v .prg-days>li,.prg-v .prg-close{grid-template-columns:1fr;gap:14px} .prg-v .prg-close{padding:24px 20px} .prg-v .prg-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px} .prg-v .prg-facts>div+div{padding-left:0;border-left:0} .prg-v .prg-facts>div:nth-child(even){padding-left:18px;border-left:1px solid var(--hair)} } /* ---- AGIF disclosure: out of the two-column grid, no dead space around it ---- */ .agif-note-full{grid-column:1/-1;margin:26px 0 0;padding-top:18px;max-width:none} /* ---- Register / invitation figure fills the column so both sides end level ---- */ .split>.reveal:has(>.reg-fig){display:flex;flex-direction:column;height:100%} .reg-fig{margin-top:auto;flex:0 0 auto} .prg-v .prg-tags{margin-top:18px} .split:has(.agif-note-full){row-gap:0} .agif-note-full{margin-top:34px} /* ===================== Release 54 — one hero treatment, every page ===================== Chairman, 18 Sep 2026: the home-page hero composition becomes the standard. The photograph is carried on the RIGHT and masked away toward the left half so it dissolves into the navy ground; the headline column never sits on picture detail. A restrained gold wash — soft-light, never a filter — warms the right edge only. */ .hero.hero-has-photo .hero-photo{ left:32%; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.72) 34%,#000 56%,#000 100%); mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 14%,rgba(0,0,0,.72) 34%,#000 56%,#000 100%)} .hero.hero-has-photo .hero-photo img{object-position:center} .hero.hero-has-photo .hero-photo:after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(112deg,rgba(176,146,63,0) 26%,rgba(176,146,63,.14) 66%,rgba(176,146,63,.24) 100%); mix-blend-mode:soft-light} .hero.hero-has-photo:after{ background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 27%,rgba(11,21,38,.78) 44%,rgba(11,21,38,.36) 66%,rgba(11,21,38,.14) 100%), linear-gradient(0deg,rgba(11,21,38,.88) 0%,rgba(11,21,38,.04) 46%,rgba(11,21,38,.28) 100%)} @media (max-width:860px){ .hero.hero-has-photo .hero-photo{left:0; -webkit-mask-image:none;mask-image:none} .hero.hero-has-photo .hero-photo img{object-position:center} .hero.hero-has-photo .hero-photo:after{ background:linear-gradient(135deg,rgba(176,146,63,0) 40%,rgba(176,146,63,.12) 100%)} .hero.hero-has-photo:after{ background:linear-gradient(0deg,rgba(11,21,38,.95) 0%,rgba(11,21,38,.74) 58%,rgba(11,21,38,.82) 100%)} } /* ===================== Release 55 — hero corrections ===================== Chairman, 18 Sep 2026. (1) The contour motif is removed wherever a photograph is carried — two decorative systems on one frame is one too many. It stays on the photo-less heroes. (2) Heroes 2, 4, 5 and 6 get their own object-position so the subject of each photograph lands inside the visible right band instead of being cropped away. */ .hero.hero-has-photo .hero-art{display:none} @media (max-width:860px){ } /* ===================== Release 59 — pages 2, 4 and 5 ===================== Chairman, 18 Sep 2026: these three heroes move to the right 62% of the frame and are re-rendered on a wider field, so the room or the corridor is read whole rather than cropped to a detail. The left fade is unchanged. */ .hero.hero-has-photo .hero-photo[data-ph="hero-capital"], .hero.hero-has-photo .hero-photo[data-ph="hero-advisory"], .hero.hero-has-photo .hero-photo[data-ph="hero-forum"]{left:38%} @media (max-width:860px){ .hero.hero-has-photo .hero-photo[data-ph="hero-capital"], .hero.hero-has-photo .hero-photo[data-ph="hero-advisory"], .hero.hero-has-photo .hero-photo[data-ph="hero-forum"]{left:0} } /* ---- One gold moment on every photograph: a soft-light warm edge and a hairline tick at the head of the frame. Restrained — never a filter. ---- */ .card-fig,.reg-fig,.cfig,.audcol-fig{position:relative} .card-fig:after,.reg-fig:after,.cfig:after,.audcol-fig:after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(118deg,rgba(176,146,63,0) 34%,rgba(176,146,63,.13) 74%,rgba(176,146,63,.22) 100%); mix-blend-mode:soft-light} .card-fig:before,.reg-fig:before,.cfig:before,.audcol-fig:before{ content:"";position:absolute;top:0;left:0;z-index:2;width:42px;height:2px;background:var(--gold)} /* ===================== Release 59 — the contact column ===================== Chairman: revamp. The address block was a flat stack of paragraphs. It becomes a ruled card set: a gold hairline at the head of each block, the label in caps, and the contact rows on one baseline grid with their icons aligned. */ .cblocks{margin-top:34px;display:grid;gap:0} .cblock{position:relative;padding:26px 0 24px;border-top:1px solid var(--lline)} .cblock:before{content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;background:var(--gold)} .cblock:first-child{padding-top:26px} .cblock h3{margin:0 0 16px;font:600 10.5px/1 var(--fu);letter-spacing:.2em;text-transform:uppercase;color:var(--on-light)} .cblock-b .row{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:start;gap:0 4px;padding:7px 0} .cblock-b .row+.row{border-top:1px solid var(--lline)} .cblock-b .contact-ic{margin-top:3px} .cblock-b .fine{margin-top:12px} /* ===================== Release 60 — the footprint becomes a map ===================== */ .fmap{margin:6px 0 0} .fmap-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:46px;align-items:center;margin-top:20px} .fmap-plot{position:relative;aspect-ratio:48/20;width:100%} .fm-dot{position:absolute;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%; background:rgba(155,172,196,.42)} .fm-pin{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%; background:transparent;border:1.5px solid var(--steel);z-index:2} .fm-pin.is-base{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-color:var(--gold);background:var(--gold); box-shadow:0 0 0 5px rgba(176,146,63,.18)} .fmap-key{list-style:none;margin:0;padding:0;display:grid;gap:0} .fmap-key li{padding:13px 0;border-top:1px solid var(--hair);display:grid; grid-template-columns:34px minmax(0,1fr);align-items:baseline;gap:0 4px} .fmap-key li.is-base{border-top:2px solid var(--gold)} .fmap-key .fpl-n{font:700 11px/1 var(--fl);letter-spacing:.14em;color:var(--steel)} .fmap-key h3{margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(18px,1.35vw,21px);line-height:1.1;color:#fff} .fmap-key p{grid-column:2;margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--on-dark)} @media(max-width:900px){ .fmap-in{grid-template-columns:1fr;gap:26px} } /* ---- Contact split: photograph fills the column so both sides finish level ---- */ .split>.reveal:has(>.cfig){display:flex;flex-direction:column;height:100%} .cfig{margin-top:auto;flex:0 0 auto;aspect-ratio:16/9} .cfig img{width:100%;height:100%;object-fit:cover} .fmap .cyc-lab,.fmap .cyc-foot{color:var(--steel)} /* ===================== Release 62 — the gold second line, everywhere ===================== Chairman, 18 Sep 2026: titles carry gold. On navy that is the brand gold #B0923F at 6.1:1. On the light and paper grounds #B0923F measures 2.7–3.0:1 and fails AA, so the light surfaces use the deep-gold #7A6220 (5.4–5.8:1) — the same hue, taken down until it is legible. One gold family, two grounds, nothing decorative. */ :root{--gold-deep:#B0923F} /* Chairman, 19 Sep 2026: the brand gold, on every ground */ .light h1 em,.light h2 em,.light h3 em, .paper h1 em,.paper h2 em,.paper h3 em{color:var(--gold-deep)} .light .eyebrow,.paper .eyebrow{color:var(--gold-deep)} .light .eyebrow:before,.paper .eyebrow:before{background:var(--gold)} .light .sec-head h2 em,.paper .sec-head h2 em{color:var(--gold-deep)} .light .dtb tbody th b,.paper .dtb tbody th b{color:var(--gold-deep)} .light .cyc-lab,.paper .cyc-lab,.light .fpl-n,.paper .fpl-n{color:var(--gold-deep)} /* ---- Release 63: the register figure absorbs the column instead of leaving a void ---- */ .reg-fig{margin-top:28px;flex:1 1 auto;aspect-ratio:auto;min-height:250px;overflow:hidden} .reg-fig img{width:100%;height:100%;object-fit:cover;display:block} /* Release 66 — the brand gold #B0923F carries the titles on every ground (Chairman, 19 Sep). The 12px eyebrow micro-labels keep the deeper gold: at that size #B0923F measures 2.74:1 on the light grounds and fails AA, and a label nobody can read is not a brand. */ .light .eyebrow,.paper .eyebrow{color:#6E5A1D} .light .cyc-lab,.paper .cyc-lab,.light .fpl-n,.paper .fpl-n{color:#6E5A1D} .light .dtb tbody th b,.paper .dtb tbody th b{color:#A28436} /* brand gold, one step down so the 36px figures clear AA */ /* Release 67 — Chairman 19 Sep: the micro-labels grow so they can carry the official gold. 14px / 700 with tighter tracking; colour is #B0923F on every ground, as instructed. */ .light .eyebrow,.paper .eyebrow{font-size:14px;font-weight:700;letter-spacing:.16em;color:#B0923F} .light .cyc-lab,.paper .cyc-lab,.light .fpl-n,.paper .fpl-n{font-size:13px;font-weight:700;color:#B0923F} .light .dtb tbody th b,.paper .dtb tbody th b{color:#B0923F} .light .dtb thead th,.paper .dtb thead th{font-size:11.5px} /* Release 67b — the official gold, and legible. #B0923F cannot clear AA as text on white (2.99:1) or on the paper grey (2.74:1) at ANY size. Rather than darken the Chairman's gold, the light-ground labels are set ON navy: gold #B0923F on #0B1526 measures 6.12:1. Exact brand colour, comfortably legible. */ .light .eyebrow,.paper .eyebrow{ display:inline-flex;align-items:center;background:var(--ink);color:#B0923F; padding:7px 13px 7px 12px;font-size:12px;font-weight:700;letter-spacing:.16em} .light .eyebrow:before,.paper .eyebrow:before{ content:"";width:20px;height:2px;background:#B0923F;margin-right:10px;transform:none} .light .cyc-lab,.paper .cyc-lab{ display:inline-flex;background:var(--ink);color:#B0923F;padding:6px 12px;font-size:11px;font-weight:700} .light .fpl-n,.paper .fpl-n{color:#8A6F22;font-weight:700} .light .dtb tbody th b,.paper .dtb tbody th b{color:#A28436} /* ===================== Release 68 — the header dropdown ===================== Chairman, 19 Sep 2026: "make it more elite". The panel was too narrow, so the item title wrapped and collided with its description, and the hairline cut through the type. Rebuilt: a wider panel that never wraps, title and description on their own baselines, a gold rule at the head of the panel and a gold marker that arrives on hover. Nothing decorative — spacing and one accent. */ .submenu{ min-width:330px;padding:0;border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,#101D30 0%,var(--ink-2) 100%); box-shadow:0 30px 64px rgba(0,0,0,.55);border-top:2px solid var(--gold); margin-top:-1px} .submenu a{ position:relative;display:block;height:auto;padding:18px 24px 17px 26px; color:var(--on-dark-strong);font-weight:500;white-space:nowrap; border-top:1px solid rgba(255,255,255,.07);transition:background .18s ease,padding-left .18s ease} .submenu a:first-child{border-top:0} .submenu a:before{ content:"";position:absolute;left:0;top:50%;width:2px;height:0;background:var(--gold); transform:translateY(-50%);transition:height .2s ease} .submenu a:hover,.submenu a[aria-current=page]{background:rgba(255,255,255,.055);padding-left:30px} .submenu a:hover:before,.submenu a[aria-current=page]:before{height:26px} .submenu .sm-t{ display:block;font-family:var(--fu);font-weight:600;font-size:15px;line-height:1.2; letter-spacing:.005em;color:#fff} .submenu a small{ display:block;font:400 12.5px/1.45 var(--fb);color:var(--steel); margin-top:5px;letter-spacing:.005em;white-space:normal} .submenu a[aria-current=page] .sm-t{color:var(--gold)} @media (max-width:1000px){ .nav-open .submenu{min-width:0;border:0;border-top:0;background:transparent;box-shadow:none;margin-top:0} .nav-open .submenu a{white-space:normal;border-top:0;padding:11px 0 11px 18px;border-left:1px solid var(--hair)} .nav-open .submenu a:before{display:none} .nav-open .submenu a:hover{background:transparent;padding-left:18px} .nav-open .submenu .sm-t{font-size:15px} .nav-open .submenu a small{font-size:12px;margin-top:3px} } /* The nav's `.nav a{display:inline-flex}` was winning here, which laid the item title and its description out side by side — the collision the Chairman flagged. */ .nav .submenu a{display:flex;flex-direction:column;align-items:flex-start;height:auto;line-height:1.2} /* The primary nav's hover underline and active inset shadow must not reach inside the panel — that hairline was the line cutting through the item descriptions. */ .nav .submenu a:not(.btn):after{display:none;content:none} .nav .submenu a[aria-current=page]{box-shadow:none} .nav .submenu a{padding:17px 24px 16px 26px} .nav .submenu .sm-t{margin:0} .nav .submenu a small{margin-top:6px} @media (max-width:1000px){ .nav-open .nav .submenu a,.nav .submenu a, .nav-links .submenu a:not(.btn){padding:15px 0 15px 18px} .nav-open .nav .submenu a small{margin-top:4px} .nav-open .nav .submenu a+a{border-top:1px solid rgba(255,255,255,.07)} } /* `.nav-links a:not(.btn){height:44px}` out-specified the panel reset, so each item was a fixed 44px flex box and the title/description were pushed apart by the spare space. */ .nav-links .submenu a:not(.btn){height:auto;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:0} /* ---- R71 · Capital hero: matched to the reference proportion (3.055:1) ---- The Chairman supplied a reference hero; its band measured 1848 x 605 CSS px. Expressing it as a ratio rather than a fixed height keeps that proportion at every desktop width, and the cap stops an ultrawide monitor turning the hero into a billboard. Absolutely-positioned children (.hero-photo, .hero-art) sit outside the flex flow, so only the copy column is re-centred. */ @media (min-width:1001px){ .hero.hero-tall{ min-height:min(calc(100vw / 3.055), 820px); display:flex;flex-direction:column;justify-content:center} } /* ================= R75 · ALIGNMENT FIX + LUXURY MOTION SYSTEM ================= Alignment: .hero-tall was given display:flex in R71 to centre its copy in the taller band. A flex item with `margin:0 auto` shrink-wraps instead of stretching, so .container collapsed from 1240px to its content width and the hero copy sat 256px right of the logo at every width. width:100% restores it. */ .hero.hero-tall>.container{width:100%} /* ---- Motion tokens. One easing curve governs the whole system: expo-out. It decelerates hard and settles, which is what reads as expensive. Nothing overshoots, nothing bounces, nothing rotates. ---- */ :root{--ease-lux:cubic-bezier(.16,1,.3,1);--dur-lux:1.05s;--dur-med:.72s} /* ---- 1 · Hero photograph: a 24s drift, and a parallax offset driven by JS. Scale and translate only, so it stays on the compositor. ---- */ @media (prefers-reduced-motion:no-preference){ .js .hero.hero-has-photo .hero-photo img{ animation:heroDrift 24s ease-in-out infinite alternate; will-change:transform} @keyframes heroDrift{from{transform:scale(1.02)}to{transform:scale(1.075)}} .js .hero.hero-has-photo .hero-photo{will-change:transform} } /* ---- 2 · Headline: each line wipes up behind its own mask. The gold second line is deliberately last — the eye lands on the brand colour. ---- */ .js .hero h1{overflow:hidden} @media (prefers-reduced-motion:no-preference){ /* This animation REPLACES the generic .hero .reveal heroIn animation on the h1 (same property, later rule), so it must carry opacity itself — otherwise the headline inherits opacity:0 from that rule and never becomes visible. */ .js .hero h1,.js .hero h1.reveal{opacity:0;clip-path:inset(0 0 104% 0); animation:lineWipe 1.25s var(--ease-lux) .12s forwards} @keyframes lineWipe{ 0%{opacity:1;clip-path:inset(0 0 104% 0);transform:translateY(10px)} 100%{opacity:1;clip-path:inset(0 0 -14% 0);transform:none}} .js .hero h1 em,.js .hero h1.reveal em{display:inline-block;opacity:0;transform:translateY(14px); animation:emRise .95s var(--ease-lux) .46s forwards} @keyframes emRise{to{opacity:1;transform:none}} } /* ---- 3 · The gold rule draws before the kicker text arrives ---- */ @media (prefers-reduced-motion:no-preference){ .js .hero .eyebrow:before{transform-origin:left;transform:scaleX(0); animation:ruleDraw .9s var(--ease-lux) .05s forwards} @keyframes ruleDraw{to{transform:scaleX(1)}} } /* ---- 4 · Buttons: a gold wash crosses the face. Slow enough to read as material, not as a hover state. ---- */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn:before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,transparent,rgba(176,146,63,.22),transparent); transform:translateX(-101%);transition:transform .62s var(--ease-lux)} .btn:hover:before,.btn:focus-visible:before{transform:translateX(101%)} .btn{transition:transform .38s var(--ease-lux),box-shadow .38s var(--ease-lux), background-color .3s ease,color .3s ease,border-color .3s ease} .btn:hover{transform:translateY(-2px)} .btn-gold:hover{box-shadow:0 12px 30px rgba(176,146,63,.26)} /* ---- 5 · Section imagery: a curtain opens from the lower edge while the frame settles out of a 1.06 scale. The two must share a duration or the image appears to slip inside its own mask. ---- */ @media (prefers-reduced-motion:no-preference){ .js .reveal .card-fig img,.js .card.in .card-fig img, .js .reveal .imgband img,.js .imgband.in img{ clip-path:inset(0 0 100% 0);transform:scale(1.06); transition:clip-path var(--dur-lux) var(--ease-lux),transform 1.4s var(--ease-lux)} .js .reveal.in .card-fig img,.js .card.in .card-fig img, .js .reveal.in .imgband img,.js .imgband.in img{ clip-path:inset(0 0 0 0);transform:scale(1)} } /* ---- 6 · Reveal, retuned: further travel, far slower settle ---- */ .js .reveal{transform:translateY(22px); transition:opacity var(--dur-med) var(--ease-lux),transform var(--dur-med) var(--ease-lux)} /* ---- 7 · Header condenses once the hero is behind you ---- */ .nav{transition:background-color .5s var(--ease-lux),box-shadow .5s var(--ease-lux), backdrop-filter .5s var(--ease-lux)} .nav.is-condensed{background:rgba(11,21,38,.86);backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 1px 0 rgba(176,146,63,.18),0 18px 40px rgba(0,0,0,.28)} /* ---- 8 · Cards lift, and a gold hairline grows along the top edge ---- */ .card{transition:transform .5s var(--ease-lux),box-shadow .5s var(--ease-lux)} .card:before{transition:transform .5s var(--ease-lux)} .card:hover{transform:translateY(-5px)} @media (prefers-reduced-motion:reduce){ .js .hero h1,.js .hero h1 em,.js .hero .eyebrow:before, .js .hero.hero-has-photo .hero-photo img{animation:none!important; clip-path:none!important;opacity:1!important;transform:none!important} .btn:before{display:none} } /* ---------------- R76 · motion scope: hero, scroll reveal, count-up ---------- JS-only changes this release (reveal on legal pages, below-fold reveals no longer forced visible at 2.5s, count-up bound to the published figures). Counters hold their width while running so nothing reflows. */ .proof li > b,th[data-l="Figure"] > b{font-variant-numeric:tabular-nums} /* ---------------- R77 · footer, mobile --------------------------------------- The four-column footer grid was never actually cancelled on phones: the R18 rule `.f-top{grid-template-columns:1.6fr .9fr .9fr .9fr}` sits after the narrow-width rules, so 320-620px kept three ~70px columns and every link wrapped word by word ("Request / a / briefing"). One column below 640px, two where there is room, and the rest is rhythm. Layout only - no copy, no colour, no motion changes. */ @media (max-width:640px){ footer{padding:44px 0 20px} .f-top{display:grid;grid-template-columns:1fr;gap:30px;padding-bottom:26px} .f-brand{grid-column:1/-1} footer .logo img{height:44px} .f-brand p{margin-top:14px;max-width:44ch;font-size:14.5px;line-height:1.65} .f-col h2{margin-bottom:8px;letter-spacing:.12em} .f-col ul{display:grid} .f-col li{margin-bottom:0} .f-col a{display:flex;align-items:center;min-height:44px;padding:2px 0;font-size:15px; white-space:normal;overflow-wrap:break-word} .f-bot{flex-direction:column;align-items:flex-start;gap:14px;padding-top:20px;font-size:12.5px;line-height:1.6} .f-bot p{max-width:46ch} .f-bot ul{gap:8px 22px} .f-bot ul a{min-height:44px;font-size:13px} } /* Two columns of links once the viewport can hold them: halves the scroll depth on a phone, and rescues the cramped four-column grid on tablets. */ @media (min-width:360px) and (max-width:900px){ .f-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px} .f-brand{grid-column:1/-1} } @media (min-width:641px) and (max-width:900px){ .f-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px} .f-col a{display:flex;align-items:center;min-height:40px;padding:2px 0} .f-col li{margin-bottom:0} } /* ---------------- R78 · hero fits the first screen on phones ----------------- At 375x667 the hero ran 666-714px against a 588px usable band, so the buttons and proof strip sat below the fold on every page. The band is now sized to the visible viewport (svh, which excludes the browser's own bars) and the interior rhythm is tightened to fit inside it. Desktop untouched. */ @media (max-width:640px){ .hero{padding:30px 0 26px;min-height:calc(100svh - 79px);display:flex;align-items:center} .hero > .container{width:100%} .hero .eyebrow{margin-bottom:12px} .hero h1{font-size:clamp(23px,5.6vw,30px);line-height:1.14} .hero .lede{margin-top:14px;margin-bottom:0;font-size:15.5px;line-height:1.5} .hero .btns{margin-top:18px;margin-bottom:0;gap:10px} .hero .btns .btn{min-height:46px;padding-top:0;padding-bottom:0} .hero .proof{margin-top:18px;padding-top:14px;gap:0} .hero .proof li{padding:5px 0} .hero .proof b{font-size:11.5px} .hero .proof span{font-size:12px;line-height:1.35} } /* Short phones (iPhone SE class): drop the proof strip's breathing room further rather than letting the primary calls to action fall off screen. */ @media (max-width:640px) and (max-height:700px){ .hero{padding:22px 0 20px} .hero .proof{margin-top:12px;padding-top:10px} .hero .proof li{padding:3px 0} .hero .lede{margin-top:12px} .hero .btns{margin-top:14px} } /* Very small phones (320x568 class): last tier of compression. Nothing is hidden — type steps down and the rhythm closes up so the calls to action and the proof strip still land above the fold. */ @media (max-width:640px) and (max-height:620px){ .hero{padding:12px 0 12px} .hero h1{font-size:clamp(20px,5.2vw,25px);line-height:1.12} .hero .eyebrow{margin-bottom:8px} .hero .lede{margin-top:10px;font-size:14.5px;line-height:1.45} .hero .btns{margin-top:12px;gap:8px} .hero .btns .btn{min-height:44px;font-size:14px} .hero .proof{margin-top:10px;padding-top:8px} .hero .proof li{padding:2px 0} .hero .proof b{font-size:10.5px} .hero .proof span{font-size:11px;line-height:1.28} .hero .proof li{padding:1px 0} } /* Narrow AND short (320x568 with a three-line headline): the headline itself is the last thing to give. */ @media (max-width:380px) and (max-height:660px){ .hero{padding:6px 0;min-height:calc(100svh - 79px)} .hero h1{font-size:19px;line-height:1.1} .hero .lede{font-size:13.5px;line-height:1.38;margin-top:8px} .hero .btns{margin-top:10px;gap:7px} .hero .btns .btn{min-height:42px;font-size:13.5px} .hero .proof{margin-top:8px;padding-top:6px} .hero .proof b{font-size:10px} .hero .proof span{font-size:10.5px;line-height:1.25} } /* R78.1 — last-mile trim. Live measurement on the narrow pages (AGIF and Advisory carry the longest headline and lede) still put the proof strip a few pixels under the fold at 316-371px of usable width. */ @media (max-width:420px){ .hero .lede{line-height:1.36} .hero .proof{margin-top:10px;padding-top:8px} .hero .proof li{padding:1px 0} .hero .proof b{font-size:11px;letter-spacing:.01em} .hero .proof span{font-size:11.5px;line-height:1.25} } @media (max-width:420px) and (max-height:700px){ .hero{padding:8px 0} .hero .eyebrow{margin-bottom:6px} .hero .btns{margin-top:10px;gap:7px} .hero .btns .btn{min-height:42px} .hero h1{line-height:1.1} .hero .proof{margin-top:8px;padding-top:6px} .hero .proof li{padding:0} } /* R79 — 320px class (iPhone SE 1st gen). AGIF and Track Record carry the longest headline and lede, and were still pushing the proof strip ~25px under the fold. Type steps down once more at this width only. */ @media (max-width:340px){ .hero{padding:6px 0} .hero .eyebrow{margin-bottom:5px;font-size:10.5px;letter-spacing:.16em} .hero h1{font-size:17.5px;line-height:1.08} .hero .lede{font-size:12.5px;line-height:1.34;margin-top:7px} .hero .btns{margin-top:9px;gap:6px} .hero .btns .btn{min-height:40px;font-size:13px} .hero .proof{margin-top:7px;padding-top:5px} .hero .proof li{padding:0} .hero .proof b{font-size:9.5px} .hero .proof span{font-size:10.5px;line-height:1.22} } /* ==================== R83 ==================== */ /* [1] Nav hover — gold, bold, highlighted */ .nav-links > li > a, .nav-links > li > button{position:relative;transition:color .18s ease,background-color .18s ease;border-radius:3px} .nav-links > li > a::after, .nav-links > li > button::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:#B0923F;transform:scaleX(0);transform-origin:center;transition:transform .24s cubic-bezier(.22,.61,.36,1)} .nav-links > li:not(.nav-cta):hover > a, .nav-links > li:not(.nav-cta):hover > button, .nav-links > li:not(.nav-cta):focus-within > a, .nav-links > li:not(.nav-cta):focus-within > button, .nav-links > li:not(.nav-cta) > a.is-here{color:#D6B85A;font-weight:700;background:rgba(176,146,63,.10)} .nav-links > li:not(.nav-cta):hover > a::after, .nav-links > li:not(.nav-cta):hover > button::after, .nav-links > li:not(.nav-cta):focus-within > a::after, .nav-links > li:not(.nav-cta):focus-within > button::after{transform:scaleX(1)} .nav-links > li > a[style*="--nw"], .nav-links > li > button[style*="--nw"]{min-width:var(--nw);justify-content:center} .submenu a:hover .sm-t,.submenu a:focus .sm-t{color:#D6B85A;font-weight:700} .submenu a:hover,.submenu a:focus{background:rgba(176,146,63,.10)} .nav-links > li > a.nav-parent{display:inline-flex;align-items:center;gap:6px} .nav-links > li > a.nav-parent > svg{transition:transform .2s ease} .nav-links > li:hover > a.nav-parent > svg{transform:rotate(180deg)} /* [3][6] EDGE Framework band — compact, separated, staggered */ #framework{padding:56px 0 60px} #framework .fw-head{margin-bottom:26px} #framework h2{margin:0 0 10px;line-height:1.08} #framework .fw-lede{max-width:760px;margin:0} .fw-words{display:flex;flex-wrap:wrap;align-items:baseline;gap:0} .fw-words > span{white-space:nowrap} .fw-words .fw-sep{display:inline-block;width:26px;height:1px;background:rgba(176,146,63,.55);margin:0 16px;transform:translateY(-.28em);flex:none} #framework .stage-grid{gap:16px} #framework .stage-card{padding:22px 20px 20px} #framework .stage-card .stage-ghost{font-size:44px;line-height:1;margin-bottom:8px} #framework .stage-card h3{font-size:22px;margin:0 0 8px} #framework .stage-card p{font-size:14px;line-height:1.55;margin:0 0 10px} #framework .stage-card .stage-ev{font-size:11.5px;letter-spacing:.06em} @media (max-width:1100px){#framework .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){ #framework{padding:42px 0 46px} #framework .stage-grid{grid-template-columns:1fr;gap:12px} #framework .stage-card .stage-ghost{font-size:34px} .fw-words{display:flex;gap:0 14px} .fw-words .fw-sep{display:none} } /* [9] Five-step chevron rail — reveals one by one */ .chev5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .chev5 li{position:relative;opacity:0;transform:translateY(14px)} .chev5 .cv{position:relative;display:block;padding:18px 26px 18px 30px;min-height:92px;background:#132038;color:#fff;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%)} .chev5 li:first-child .cv{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);padding-left:22px} .chev5 li:nth-child(2) .cv{background:#17263f} .chev5 li:nth-child(3) .cv{background:#1b2c48} .chev5 li:nth-child(4) .cv{background:#203350} .chev5 li:last-child .cv{background:#B0923F;color:#0B1526} .chev5 .cv-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);color:#D6B85A;font:700 11px/1 var(--fl,Inter,sans-serif);letter-spacing:.04em;margin-bottom:8px} .chev5 li:last-child .cv-n{background:rgba(11,21,38,.16);color:#0B1526} .chev5 .cv h3{font:400 19px/1.15 var(--fd,Georgia,serif);margin:0 0 5px} .chev5 .cv p{font:400 12.5px/1.45 var(--fb,Inter,sans-serif);margin:0;opacity:.84} html.js .chev5 li{transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)} html:not(.js) .chev5 li,.chev5.in li{opacity:1;transform:none} .chev5.in li:nth-child(1){transition-delay:0ms} .chev5.in li:nth-child(2){transition-delay:130ms} .chev5.in li:nth-child(3){transition-delay:260ms} .chev5.in li:nth-child(4){transition-delay:390ms} .chev5.in li:nth-child(5){transition-delay:520ms} @media (max-width:1000px){.chev5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.chev5 .cv,.chev5 li:first-child .cv{clip-path:none;padding:18px 20px}} @media (max-width:560px){.chev5{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.chev5 li{opacity:1;transform:none;transition:none}} /* [2] Briefing form — EDGE Advisory structure, Holding identity */ .form.form--grid .f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-bottom:18px} .form.form--grid .field{margin-bottom:18px} .form.form--grid .f2 .field{margin-bottom:0} .form.form--grid .hint{font:400 12.5px/1.5 var(--fb,Inter,sans-serif);color:#5A6675;margin:6px 0 0} .form.form--grid .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form.form--grid fieldset.field--chips{border:0;margin:0 0 18px;padding:0} .form.form--grid fieldset.field--chips legend{font:700 11px/1 var(--fl,Inter,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#0B1526;padding:0;margin:0 0 10px} .form.form--grid .chips{display:flex;flex-wrap:wrap;gap:8px} .form.form--grid .chip{display:inline-flex;align-items:center;cursor:pointer;border:1px solid #C9CFD8;background:#fff;border-radius:999px;padding:8px 15px;font:500 13px/1 var(--fb,Inter,sans-serif);color:#22303F;transition:border-color .16s ease,background .16s ease,color .16s ease} .form.form--grid .chip input{position:absolute;opacity:0;width:0;height:0} .form.form--grid .chip:hover{border-color:#B0923F;color:#0B1526} .form.form--grid .chip.is-on{background:#0B1526;border-color:#0B1526;color:#fff} @media (max-width:640px){.form.form--grid .f2{grid-template-columns:1fr;gap:18px}} /* [4] Footer sitemap in levels */ footer .f-col ul ul{list-style:none;margin:6px 0 10px;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.14)} footer .f-col ul ul li{margin:0} footer .f-col ul ul a{font-size:13px;opacity:.78} footer .f-col ul ul a:hover{opacity:1;color:#D6B85A} footer .f-col > ul > li > a{font-weight:600} footer .f-col > ul > li{margin-bottom:8px} @media (max-width:900px){.nav-links > li > a[style*="--nw"],.nav-links > li > button[style*="--nw"]{min-width:0;justify-content:flex-start}} /* ==================== R84 ==================== */ /* [2] Header — tighter, cleanly distributed */ header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px} header .logo{flex:none;display:inline-flex;align-items:center} header .logo img{height:38px;width:auto;display:block} header .nav-links{margin-left:auto;gap:2px;flex-wrap:nowrap} header .nav-links > li{display:flex;align-items:center} header .nav-links > li:not(.nav-cta) > a, header .nav-links > li:not(.nav-cta) > button{ padding:9px 12px;font-size:13.5px;letter-spacing:.005em;line-height:1; } header .nav-links > li.nav-cta{margin-left:14px} header .nav-links > li.nav-cta > a{padding:11px 18px;font-size:12.5px;line-height:1} header .nav-links > li > a::after, header .nav-links > li > button::after{left:8px;right:8px;bottom:4px} @media (min-width:901px) and (max-width:1180px){ header .container{gap:12px} header .logo img{height:34px} header .nav-links > li:not(.nav-cta) > a, header .nav-links > li:not(.nav-cta) > button{padding:8px 9px;font-size:13px} header .nav-links > li.nav-cta{margin-left:8px} header .nav-links > li.nav-cta > a{padding:10px 14px;font-size:12px} } @media (max-width:900px){ header .container{min-height:64px;justify-content:space-between} header .logo img{height:32px} header .nav-links{margin-left:0} } /* [1] Contact — pathway routes as buttons */ table.dtb th{vertical-align:middle} table.dtb th a.btn-route{ display:inline-flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 16px;border:1px solid #0B1526;border-radius:2px;background:#fff;color:#0B1526; font:600 13px/1 var(--fb,Inter,-apple-system,sans-serif);letter-spacing:.01em; text-decoration:none;border-bottom-color:#0B1526; transition:background .16s ease,color .16s ease,border-color .16s ease; } table.dtb th a.btn-route::after{content:"\2192";font-size:14px;line-height:1;opacity:.6;transition:opacity .16s ease,transform .16s ease} table.dtb th a.btn-route:hover{background:#0B1526;color:#fff;border-color:#0B1526} table.dtb th a.btn-route:hover::after{opacity:1;transform:translateX(2px)} table.dtb th a.btn-route:focus-visible{outline:2px solid #B0923F;outline-offset:2px} @media (max-width:760px){table.dtb th a.btn-route{width:100%}} /* ==================== R84.1 — header height ==================== */ .nav .container{height:80px;gap:20px} .nav.shrunk .container{height:64px} @media (min-width:901px) and (max-width:1180px){.nav .container{gap:12px}} @media (max-width:640px){.nav .container{height:64px}.nav.shrunk .container{height:58px}} /* ==================== R85 — footer offices ==================== */ footer .f-offices{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px} footer .f-office{display:flex;flex-direction:column;gap:3px;font-style:normal} footer .f-office .f-oc{font:700 10px/1 var(--fl,Inter,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#B0923F} footer .f-office strong{font:600 14px/1.2 var(--fb,Inter,sans-serif);color:#fff;margin-top:4px} footer .f-office span:not(.f-oc){font:400 12.5px/1.5 var(--fb,Inter,sans-serif);color:rgba(255,255,255,.66)} footer .f-omail{grid-column:1 / -1;font:500 13px/1 var(--fb,Inter,sans-serif);color:rgba(255,255,255,.82);text-decoration:none;border-bottom:1px solid rgba(176,146,63,.5);justify-self:start;padding-bottom:2px} footer .f-omail:hover{color:#D6B85A;border-bottom-color:#D6B85A} @media (max-width:640px){footer .f-offices{grid-template-columns:1fr;gap:16px}} /* ==================== R86 — offices as a footer column ==================== */ footer .f-top{grid-template-columns:1.55fr 1fr 1fr 1fr 1.08fr;gap:36px 30px} footer .f-col--offices .f-offices{margin-top:14px;padding-top:0;border-top:0;display:flex;flex-direction:column;gap:16px} footer .f-col--offices .f-office{gap:2px} footer .f-col--offices .f-omail{margin-top:2px} @media (max-width:1180px){footer .f-top{grid-template-columns:1.4fr 1fr 1fr 1fr 1.05fr;gap:32px 22px}} @media (max-width:1000px){footer .f-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px}} @media (min-width:641px) and (max-width:900px){footer .f-top{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:360px) and (max-width:640px){footer .f-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}} @media (max-width:359px){footer .f-top{grid-template-columns:1fr}} @media (max-width:640px){footer .f-col--offices .f-offices{gap:14px}} /* ==================== R87 — real office addresses ==================== */ footer .f-office .f-otel{font:500 12.5px/1.5 var(--fb,Inter,sans-serif);color:rgba(255,255,255,.82);text-decoration:none;margin-top:4px} footer .f-office .f-otel:hover{color:#D6B85A} footer .f-col--offices .f-office strong{margin-top:5px} footer .f-col--offices .f-offices{gap:20px} /* ==================== R88 — Legal column removed ==================== */ footer .f-top{grid-template-columns:1.6fr 1.05fr 1.05fr 1.15fr;gap:36px 34px} @media (max-width:1180px){footer .f-top{grid-template-columns:1.45fr 1fr 1fr 1.1fr;gap:32px 26px}} @media (max-width:1000px){footer .f-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}} @media (min-width:641px) and (max-width:900px){footer .f-top{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:360px) and (max-width:640px){footer .f-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}} @media (max-width:359px){footer .f-top{grid-template-columns:1fr}} /* ==================== R89 — briefing: sticky rail + live progress ==================== */ @media (min-width:1001px){ .split--sticky{align-items:start} .split--sticky > *:first-child{position:sticky;top:112px;align-self:start} } .bp{margin-top:34px;padding-top:26px;border-top:1px solid rgba(11,21,38,.12)} .bp-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px} .bp-n{font:300 30px/1 var(--fd,Georgia,serif);color:#0B1526;display:inline-flex;align-items:baseline} .bp-n b{font-weight:300;font-variant-numeric:tabular-nums;transition:color .3s ease} .bp-n i{font:600 13px/1 var(--fb,Inter,sans-serif);font-style:normal;color:#8A94A3;margin-left:2px} .bp.is-done .bp-n b{color:#B0923F} .bp-l{font:700 10.5px/1.3 var(--fl,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#6B7687;text-align:right} .bp-bar{height:3px;background:rgba(11,21,38,.10);border-radius:2px;overflow:hidden} .bp-bar > i{display:block;height:100%;width:0;background:#B0923F;border-radius:2px; transition:width .6s cubic-bezier(.22,.61,.36,1),background .3s ease} .bp.is-done .bp-bar > i{background:#0B1526} .bp-steps{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:13px} .bp-steps li{display:flex;align-items:center;gap:12px; font:500 14px/1.3 var(--fb,Inter,sans-serif);color:#9AA3B0; transition:color .35s ease,transform .35s cubic-bezier(.22,.61,.36,1)} .bp-d{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid #C2C9D3;background:transparent; transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease} .bp-steps li.is-active{color:#0B1526} .bp-steps li.is-active .bp-d{border-color:#B0923F;box-shadow:0 0 0 4px rgba(176,146,63,.16)} .bp-steps li.is-done{color:#3B4657} .bp-steps li.is-done .bp-d{background:#B0923F;border-color:#B0923F;transform:scale(1.15)} .bp-note{margin:24px 0 0;font:400 13px/1.6 var(--fb,Inter,sans-serif);color:#6B7687} @media (prefers-reduced-motion:reduce){ .bp-bar > i,.bp-steps li,.bp-d{transition:none} } @media (max-width:1000px){.bp{margin-top:28px}} /* ==================== R91 — nav header: Option B ==================== */ .nav{background:#0B1526;transition:box-shadow .3s ease} .nav .container{height:84px} .nav.shrunk{box-shadow:0 8px 26px -18px rgba(0,0,0,.85)} .nav.shrunk .container{height:66px} .nav .logo img{height:36px} .nav.shrunk .logo img{height:32px} .nav .nav-links{gap:4px} .nav .nav-links > li:not(.nav-cta) > a, .nav .nav-links > li:not(.nav-cta) > button{ font-size:12.5px;letter-spacing:.045em;text-transform:uppercase;font-weight:600;padding:10px 11px; } .nav .nav-links > li:not(.nav-cta) > a::after, .nav .nav-links > li:not(.nav-cta) > button::after{left:11px;right:11px;bottom:2px;height:1.5px} .nav .nav-links > li.nav-cta{margin-left:16px} .nav .nav-links > li.nav-cta > a{text-transform:none;letter-spacing:.01em} .nav .submenu{ top:calc(100% + 10px);left:50%;transform:translateX(-50%); min-width:330px;padding:8px; background:#fff;border:1px solid rgba(11,21,38,.10);border-top:2px solid #B0923F;border-radius:2px; box-shadow:0 30px 60px -30px rgba(11,21,38,.55); } .nav .submenu[data-open="true"]{animation:smCardIn .24s cubic-bezier(.22,.61,.36,1) both} @keyframes smCardIn{ from{opacity:0;transform:translateX(-50%) translateY(-7px)} to{opacity:1;transform:translateX(-50%) translateY(0)} } .nav .submenu a{ display:flex;flex-direction:column;gap:4px; padding:14px 16px;border-radius:2px;background:transparent; transition:background .18s ease; } .nav .submenu a::before{display:none} .nav .submenu a:hover,.nav .submenu a:focus{background:#F4F5F7} .nav .submenu .sm-t{font:600 14.5px/1.2 var(--fb,Inter,sans-serif);color:#0B1526;letter-spacing:0} .nav .submenu a:hover .sm-t,.nav .submenu a:focus .sm-t{color:#8C7433;font-weight:600} .nav .submenu small{font:400 12px/1.45 var(--fb,Inter,sans-serif);color:#6B7687} @media (min-width:901px) and (max-width:1180px){ .nav .nav-links > li:not(.nav-cta) > a, .nav .nav-links > li:not(.nav-cta) > button{font-size:11.5px;padding:9px 8px;letter-spacing:.03em} .nav .nav-links > li.nav-cta{margin-left:10px} } @media (max-width:900px){ .nav .container{height:64px} .nav.shrunk .container{height:58px} .nav .submenu{position:static;transform:none;min-width:0;box-shadow:none;border:0;border-top:1px solid rgba(11,21,38,.10);animation:none} } @media (prefers-reduced-motion:reduce){.nav .submenu[data-open="true"]{animation:none}} /* ==================== R93 — mobile drawer corrections ==================== */ @media (max-width:900px){ /* the desktop white card must not appear inside the dark drawer */ .nav .submenu{ background:transparent;border:0;border-top:1px solid rgba(255,255,255,.14); border-radius:0;box-shadow:none;padding:2px 0 8px;margin:2px 0 4px;min-width:0; } .nav .submenu a{padding:12px 16px;border-radius:2px} .nav .submenu a:hover,.nav .submenu a:focus{background:rgba(176,146,63,.12)} .nav .submenu .sm-t{color:#fff;font-size:14px} .nav .submenu a:hover .sm-t,.nav .submenu a:focus .sm-t{color:#D6B85A} .nav .submenu small{color:rgba(255,255,255,.58)} /* comfortable tap targets in the drawer */ .nav-open .nav-links > li > a, .nav-open .nav-links > li > button{min-height:46px;display:flex;align-items:center;width:100%} .nav-open .nav-links > li.nav-cta > a{justify-content:center;margin-top:10px} } /* ==================== R98 — header: EDGE Advisory structure + glass ==================== */ .nav .container{height:92px} .nav.shrunk .container{height:72px} .nav .logo img{height:46px;transition:height .3s cubic-bezier(.22,.61,.36,1)} .nav.shrunk .logo img{height:38px} .nav{ background:rgba(11,21,38,.42); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid rgba(255,255,255,.08); transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease; } .nav.shrunk{ background:rgba(11,21,38,.88); border-bottom-color:rgba(255,255,255,.10); box-shadow:0 10px 30px -22px rgba(0,0,0,.9); } @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){ .nav{background:rgba(11,21,38,.90)} } /* dropdown hover — close the dead band between item and card */ .nav .nav-links > li{align-self:stretch;align-items:center} .nav .submenu{top:100%} .nav .submenu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:transparent} .nav .nav-links > li:hover > a, .nav .nav-links > li:hover > button, .nav .nav-links > li:focus-within > a, .nav .nav-links > li:focus-within > button{color:#D6B85A;background:rgba(176,146,63,.10)} .nav .nav-links > li:hover > .submenu, .nav .nav-links > li:focus-within > .submenu{display:block} @media (max-width:900px){ .nav .container{height:70px} .nav.shrunk .container{height:62px} .nav .logo img{height:38px} .nav.shrunk .logo img{height:34px} .nav{background:rgba(11,21,38,.92)} .nav .submenu::before{display:none} .nav .nav-links > li{align-self:auto} } /* ============================================================ R99 - header glass (lighter) + horizontal text distribution ============================================================ */ .nav{background:rgba(11,21,38,.26); -webkit-backdrop-filter:blur(22px) saturate(155%); backdrop-filter:blur(22px) saturate(155%)} .nav.shrunk{background:rgba(11,21,38,.74)} @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){ .nav{background:rgba(11,21,38,.80)} .nav.shrunk{background:rgba(11,21,38,.92)} } @media (min-width:901px){ .nav .container > nav{flex:1 1 auto;min-width:0;display:flex;align-items:stretch} .nav .container > nav > .nav-links{flex:1 1 auto;width:100%;justify-content:space-between;gap:8px;padding-left:40px} .nav .container > nav > .nav-links > li.nav-cta{margin-left:8px} } /* ============================================================ R99.1 - tighter header title spacing + logo +15% titles 10px apart, cluster centred, CTA flush right logo 46->53px | shrunk 38->44px ============================================================ */ @media (min-width:901px){ .nav .container > nav > .nav-links{justify-content:flex-start;gap:10px;padding-left:0} .nav .container > nav > .nav-links > li:first-child{margin-left:auto} .nav .container > nav > .nav-links > li.nav-cta{margin-left:auto} .nav .logo img{height:53px} .nav.shrunk .logo img{height:44px} } /* ============================================================ R100 - dark at rest / glass at scroll ============================================================ */ .nav{background:rgba(11,21,38,.94); -webkit-backdrop-filter:none;backdrop-filter:none} .nav.shrunk{background:rgba(11,21,38,.26); -webkit-backdrop-filter:blur(22px) saturate(155%); backdrop-filter:blur(22px) saturate(155%); box-shadow:0 10px 30px -22px rgba(0,0,0,.55)} @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){ .nav.shrunk{background:rgba(11,21,38,.86)} } /* ============================================================ R101 - dark in BOTH states (glass removed) rest .94 | scrolled .98 + lift shadow | no backdrop-filter ============================================================ */ .nav{background:rgba(11,21,38,.94); -webkit-backdrop-filter:none;backdrop-filter:none} .nav.shrunk{background:rgba(11,21,38,.98); -webkit-backdrop-filter:none;backdrop-filter:none; box-shadow:0 10px 30px -22px rgba(0,0,0,.9)} /* ============================================================ R102 - Advisory hero: photo shifted left + extended fade left 38% -> 26% | 9-stop mask ramp instead of 5 scoped to .hero--wide so other heroes are untouched ============================================================ */ @media (min-width:1001px){ .hero.hero--wide .hero-photo{ left:26%; -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 10%, rgba(0,0,0,.10) 22%, rgba(0,0,0,.24) 34%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.68) 58%, rgba(0,0,0,.87) 70%, #000 82%, #000 100%); mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 10%, rgba(0,0,0,.10) 22%, rgba(0,0,0,.24) 34%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.68) 58%, rgba(0,0,0,.87) 70%, #000 82%, #000 100%);} } /* ============================================================ R103 - Advisory hero: shifted further left left 26% -> 14% | mask reaches solid at 66% (was 82%) net effect ~300px further left at 1900px viewport ============================================================ */ @media (min-width:1001px){ .hero.hero--wide .hero-photo{ left:14%; -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 8%, rgba(0,0,0,.10) 18%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.78) 56%, #000 66%, #000 100%); mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 8%, rgba(0,0,0,.10) 18%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.78) 56%, #000 66%, #000 100%);} } /* ============================================================ R105 - mobile + tablet responsive banding Scope: <=1024px ONLY. Desktop 1280/1440 deliberately untouched. Rule: a column never falls below 240px usable width - below that its row stacks (EDGE Advisory Responsive Spec). ============================================================ */ @media (max-width:1024px){ .audcols,.chev5,.pfive,.flow-grid,.grid.g4,.grid.g3,.grid.g6{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;} .audcols>*,.chev5>*,.pfive>*,.flow-grid>*, .grid.g4>*,.grid.g3>*,.grid.g6>*{min-width:0!important} ol[class]{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important} } @media (max-width:768px){ .btn, .nav-links>li>a,.nav-links>li>button, footer li a,.f-bot a, .nav button,header button{ min-height:44px!important; display:inline-flex!important; align-items:center!important} } /* ============================================================ R106 - mobile/tablet residuals closed 1. bare
    grids missed by ol[class] 2. .btn-route 37px, .skip 41px, p.row>a 30px -> 44px Inline links inside prose/labels are intentionally exempt (WCAG 2.5.8 exempts inline links in a sentence). ============================================================ */ @media (max-width:1024px){ ol{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important} } @media (max-width:768px){ .btn-route,a.skip,p.row>a{ min-height:44px!important; display:inline-flex!important; align-items:center!important} } /* R107 - last tap target: footer office email link (40px) */ @media (max-width:768px){ .f-omail{min-height:44px!important;display:inline-flex!important;align-items:center!important} } /* R108 - 404 route links (32px) inside wrappers */ @media (max-width:768px){ b>a{min-height:44px!important;display:inline-flex!important;align-items:center!important} }