/* ============================================================ Axxion Web Design System — canonical stylesheet Source: approved home build, 21 Jun 2026. Pair with axxion-core.js. Page-specific canvas motifs (hero line-art) are NOT here — each page ships its own script (see the design manual, section 8). Link in : ============================================================ */ :root{ --steel:#396B9E; --navy:#03314C; --black:#231F20; --ink:#191919; --white:#FFFFFF; --copper:#C96E3C; --sage:#5A8F7A; --skyblue:#8FB4D6; --accent:var(--sage); /* per-page hero signature colour — override per page */ --hair:rgba(255,255,255,0.16); --hair-dark:rgba(35,31,32,0.14); --maxw:1280px; --radius:4px; /* one corner radius site-wide */ /* section rhythm — a small varied scale so vertical spacing isn't uniform */ --band:120px; --band-lg:168px; --band-sm:88px; } @media(max-width:720px){ :root{--band:80px;--band-lg:104px;--band-sm:60px;} } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:"Roboto Condensed",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--black); background:var(--white); font-size:18px; line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.04;letter-spacing:-0.01em;} a{color:inherit;text-decoration:none;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;} .eyebrow{ font-family:"Roboto Condensed",sans-serif; text-transform:uppercase; letter-spacing:0.22em; font-size:0.74rem; font-weight:500; color:var(--steel); } .eyebrow.on-dark{color:#8FB4D6;} .btn{ display:inline-flex;align-items:center;gap:0.6em; font-family:"Roboto Condensed",sans-serif; text-transform:uppercase;letter-spacing:0.12em;font-weight:500;font-size:0.86rem; padding:1rem 1.9rem;border-radius:var(--radius); transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease; } .btn-primary{background:var(--steel);color:#fff;} .btn-primary:hover{background:var(--navy);transform:translateY(-2px);} .btn-ghost{border:1px solid var(--hair);color:#fff;} .btn-ghost:hover{background:#fff;color:var(--navy);transform:translateY(-2px);} .arrow{transition:transform .25s ease;} .btn:hover .arrow{transform:translateX(4px);} /* NAV moved to assets/axxion-nav.css (2 Aug 2026) so paper pages share it. */ /* ---------- HERO ---------- */ .hero{ background-color:var(--navy); background-image: linear-gradient(rgba(143,180,214,0.045) 1px,transparent 1px), linear-gradient(90deg,rgba(143,180,214,0.045) 1px,transparent 1px); background-size:48px 48px; color:#fff; position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:170px 0 110px; overflow:hidden; } #heroCanvas{ position:absolute;inset:0;width:100%;height:100%; z-index:1;display:block; } .hero::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(90deg,rgba(3,49,76,0.92) 0%,rgba(3,49,76,0.6) 34%,rgba(3,49,76,0) 64%), linear-gradient(180deg,rgba(3,49,76,0) 55%,rgba(3,49,76,0.5) 100%); } /* width:100% stops the flex child shrink-wrapping (margin:0 auto otherwise centres a content-width box, so headings drift instead of left-aligning) */ .hero .wrap{position:relative;z-index:3;width:100%;} .hero-scroll{z-index:3;} .hero h1{ font-size:clamp(2.4rem,6.6vw,6.2rem); font-weight:800; max-width:16ch; margin:26px 0 0; overflow-wrap:break-word; } .hero-scroll{ position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2; text-transform:uppercase;letter-spacing:0.22em;font-size:0.7rem;font-weight:500; color:rgba(255,255,255,0.55);display:flex;flex-direction:column;align-items:center;gap:10px; } .hero-scroll span{ width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent); position:relative;overflow:hidden; } .hero-scroll span::after{ content:"";position:absolute;top:-50%;left:0;width:1px;height:50%;background:var(--steel); animation:scrollDot 1.9s ease-in-out infinite; } @keyframes scrollDot{0%{top:-50%}60%,100%{top:100%}} .hero-lead{ max-width:60ch;margin-top:34px;font-size:1.18rem;line-height:1.62; color:rgba(255,255,255,0.82);font-weight:300; } .hero-lead p+p{margin-top:1em;} .hero-cta{margin-top:46px;display:flex;gap:16px;flex-wrap:wrap;} /* ---------- STAT STRIP (Civitta signature) ---------- */ .statband{background:#1F5C8C;color:#fff;border-top:1px solid var(--hair);} .statband .grid{ display:grid;grid-template-columns:repeat(4,1fr); } .statband .cell{ padding:64px 34px;border-right:1px solid var(--hair); } .statband .cell:last-child{border-right:none;} .stat-num{ font-family:"Playfair Display",serif;font-weight:800; font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1;color:#fff; } .stat-num::after{content:"";display:block;width:42px;height:3px;margin-top:16px;border-radius:var(--radius);background:#8FB4D6;} .stat-num .unit{color:inherit;} .stat-label{ margin-top:14px;font-size:0.96rem;line-height:1.4;color:rgba(255,255,255,0.66); text-transform:uppercase;letter-spacing:0.08em;font-weight:400; } /* ---------- BENTO ---------- */ .bento-sec{padding:var(--band) 0;} .bento{ display:grid;grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(178px,auto);gap:18px;margin-top:56px; } .tile{ border:1px solid var(--hair-dark);border-radius:var(--radius);padding:32px; display:flex;flex-direction:column;justify-content:space-between; background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease; position:relative;overflow:hidden; } /* hover only on tiles that contain a link (navigate/act); decorative tiles stay still */ .tile:has(a):hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(3,49,76,0.10);border-color:rgba(57,107,158,0.45);} .tile .kicker{text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:500;color:var(--steel);} .tile h3{font-size:1.5rem;font-weight:700;line-height:1.12;} .tile h4{font-family:"Roboto Condensed",sans-serif;font-size:1.02rem;font-weight:700;color:var(--navy);margin-top:10px;} .tile p{font-size:1rem;color:rgba(35,31,32,0.72);line-height:1.55;} .tile .stat{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(2.6rem,3.6vw,3.6rem);line-height:1;color:var(--steel);} .tile .stat .unit{color:inherit;} .tile .stat-cap{margin-top:14px;font-size:0.96rem;color:rgba(35,31,32,0.66);line-height:1.4;} .tile.t-accent{border-top:3px solid var(--steel);} .tile .ghost{ position:absolute;top:20px;right:26px; font-family:"Playfair Display",serif;font-weight:800;font-size:3.2rem;line-height:1; color:rgba(57,107,158,0.14);transition:color .35s ease;pointer-events:none; } .tile:has(a):hover .ghost{color:rgba(57,107,158,0.26);} /* dark bento tiles (for the outcomes section on black) */ .tile.t-dark{background:rgba(255,255,255,0.03);border-color:var(--hair);color:#fff;} .tile.t-dark:has(a):hover{background:rgba(255,255,255,0.06);border-color:rgba(143,180,214,0.55);box-shadow:none;} .tile.t-dark h3{color:#fff;} .tile.t-dark .kicker{color:#8FB4D6;} .tile.t-dark p{color:rgba(255,255,255,0.7);} .tile.t-dark .stat{color:#8FB4D6;} .tile.t-dark .stat-cap{color:rgba(255,255,255,0.66);} .t-big{grid-column:span 2;grid-row:span 2;background:var(--navy);color:#fff;} .t-big .kicker{color:#8FB4D6;} .t-big h3{font-size:clamp(1.8rem,2.6vw,2.5rem);margin-top:6px;} .t-big .xmark{width:60px;height:60px;opacity:0.9;} .t-big .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;} .t-big .chip{ border:1px solid var(--hair);border-radius:var(--radius);padding:7px 15px; font-size:0.82rem;letter-spacing:0.04em;color:rgba(255,255,255,0.85); text-transform:uppercase;font-weight:500; } .t-big .chip .dot{color:var(--steel);margin-right:2px;} .t-big p{color:rgba(255,255,255,0.82);} /* headline stat inside the navy anchor: sky-blue numeral on dark, light caption */ .t-big .stat{color:var(--skyblue);} .t-big .stat-cap{color:rgba(255,255,255,0.72);} .t-wide{grid-column:span 2;} /* mirror variant: navy anchor sits on the right instead of the left (desktop only — the 2-col/1-col stacks are unchanged) */ @media(min-width:1025px){.bento.mirror .t-big{grid-column:3 / span 2;grid-row:1 / span 2;}} /* top-align non-anchor tiles (for text / numbered tiles); the t-big anchor keeps space-between */ .bento.top-tiles .tile:not(.t-big){justify-content:flex-start;} .t-tint{background:#F5F8FB;border-color:rgba(57,107,158,0.18);} .tile .more{margin-top:18px;display:inline-flex;gap:0.5em;align-items:center;text-transform:uppercase;letter-spacing:0.1em;font-size:0.8rem;font-weight:500;color:var(--steel);} .tile .more:hover .arrow{transform:translateX(4px);} @media(max-width:1024px){ .bento{grid-template-columns:repeat(2,1fr);} .t-big{grid-column:span 2;grid-row:span 1;} .t-wide{grid-column:span 2;} } @media(max-width:720px){ .bento{grid-template-columns:1fr;} .t-big,.t-wide{grid-column:span 1;} } /* ---------- SECTION SHELL ---------- */ section{padding:var(--band) 0;} /* per-band rhythm: opt a section up or down so spacing isn't uniform */ .band-lg{padding-top:var(--band-lg);padding-bottom:var(--band-lg);} .band-sm{padding-top:var(--band-sm);padding-bottom:var(--band-sm);} /* seam utilities: collapse the doubled gap where two same-surface bands stack (apply to the second band) */ .pad-top-0{padding-top:0;} .section-head{max-width:62ch;} .section-head h2{font-size:clamp(2rem,3.8vw,3.4rem);margin-top:18px;font-weight:700;} .section-head p{margin-top:22px;font-size:1.12rem;color:rgba(35,31,32,0.72);line-height:1.6;} .lead-narrative p{font-size:1.18rem;line-height:1.7;color:rgba(35,31,32,0.82);max-width:64ch;} .lead-narrative p+p{margin-top:1.1em;} /* ---------- PROCESS ---------- */ .proc{background:var(--navy);color:#fff;} .proc .section-head h2{color:#fff;} .proc .section-head p{color:rgba(255,255,255,0.72);} .proc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:64px;} .pstep{background:#fff;border-radius:var(--radius);padding:30px 24px 28px;} .pstep .n{ font-family:"Playfair Display",serif;font-weight:800;font-size:2.7rem;color:var(--steel);line-height:1; } .pstep h3{font-size:1.18rem;margin-top:20px;font-weight:700;color:var(--navy);} .pstep p{margin-top:12px;font-size:0.96rem;color:rgba(35,31,32,0.7);line-height:1.5;} /* ---------- COMPOUNDING (animated timeline) ---------- */ .comp-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:80px;align-items:start;} .comp-intro{position:sticky;top:118px;} .comp-intro h2{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:700;margin-top:18px;} .comp-lead{margin-top:22px;font-size:1.12rem;color:rgba(35,31,32,0.78);line-height:1.65;max-width:46ch;} .comp-lead+.comp-lead{margin-top:1em;} .timeline{position:relative;padding-left:64px;} .spine{position:absolute;left:16px;top:10px;bottom:34px;width:2px;background:rgba(57,107,158,0.16);border-radius:var(--radius);} .spine-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--steel),#8FB4D6);transition:height .12s linear;} .spine-fill::after{content:"";position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:#8FB4D6;} .tstep{position:relative;padding:6px 0 46px;opacity:.32;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);} .tstep:last-child{padding-bottom:0;} .tnode{ position:absolute;left:-64px;top:-2px;width:36px;height:36px;border-radius:50%; border:2px solid rgba(57,107,158,0.35);background:#fff; display:flex;align-items:center;justify-content:center; font-family:"Roboto Condensed",sans-serif;font-size:0.78rem;font-weight:700;color:var(--steel); transition:all .45s cubic-bezier(.2,.7,.2,1);z-index:2; } .tstep.active{opacity:1;transform:none;} .tstep.active .tnode{border-color:var(--steel);background:var(--steel);color:#fff;} .tlabel{display:block;text-transform:uppercase;letter-spacing:0.14em;font-size:0.74rem;font-weight:500;color:var(--steel);margin-bottom:10px;} .tstep p{font-size:1.12rem;line-height:1.62;color:rgba(35,31,32,0.82);max-width:52ch;} @media(prefers-reduced-motion:reduce){ .tstep{opacity:1;transform:none;} .spine-fill{height:100%!important;transition:none;} } @media(max-width:1024px){ .comp-grid{grid-template-columns:1fr;gap:40px;} .comp-intro{position:static;} } /* ---------- GATES ---------- */ .gates{background:#F5F8FB;} /* ---------- OUTCOMES ---------- */ .outcomes{background:var(--navy);color:#fff;} .outcomes .section-head h2{color:#fff;} /* ---------- QUOTE ---------- */ .quote{background:#fff;color:var(--black);} .pull{max-width:820px;margin:0 auto;border-left:3px solid var(--steel);padding-left:34px;} .pull blockquote{ font-family:"Playfair Display",serif;font-style:italic;font-weight:500; font-size:clamp(1.25rem,2.1vw,1.8rem);line-height:1.45;color:var(--black);margin:0; } .pull blockquote::before{content:"\201C";} .pull blockquote::after{content:"\201D";} .pull figcaption{ margin-top:26px;font-family:"Roboto Condensed",sans-serif; text-transform:uppercase;letter-spacing:0.1em;font-size:0.84rem; } .pull .who{font-weight:700;color:var(--black);} .pull .sep{color:var(--steel);margin:0 8px;} .pull .role{color:rgba(35,31,32,0.6);} /* ---------- PILOT CTA ---------- */ .pilot{background:var(--steel);color:#fff;} .pilot .twocol{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:center;} .pilot h2{font-size:clamp(2.1rem,4vw,3.4rem);font-weight:700;} .pilot p{font-size:1.14rem;line-height:1.65;color:rgba(255,255,255,0.9);} .pilot p+p{margin-top:1em;} .pilot .cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap;} .pilot .btn-white{background:#fff;color:var(--navy);} .pilot .btn-white:hover{background:var(--navy);color:#fff;transform:translateY(-2px);} .pilot .btn-line{border:1px solid rgba(255,255,255,0.5);color:#fff;} .pilot .btn-line:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px);} /* ---------- FOOTER ---------- */ footer{background:var(--black);color:#fff;padding:90px 0 40px;} .foot-grid{display:grid;grid-template-columns:1.3fr 1.5fr 1fr 1.1fr;gap:40px;} /* Footer navigation rendered as two columns (Sitemap link list) */ .foot-nav-2col{columns:2;column-gap:30px;} .foot-nav-2col li{break-inside:avoid;-webkit-column-break-inside:avoid;} @media(max-width:720px){.foot-nav-2col{columns:1;}} footer h4{font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:0.12em;font-size:0.8rem;font-weight:500;color:rgba(255,255,255,0.55);margin-bottom:20px;} footer ul{list-style:none;} footer li{margin-bottom:12px;} footer li a{font-size:1rem;color:rgba(255,255,255,0.85);transition:color .2s;} footer li a:hover{color:var(--steel);} /* password-protected footer links — red with a padlock to flag they're gated */ .foot-locked{color:#E0604A;display:inline-flex;align-items:center;gap:6px;} .foot-locked:hover{color:#F0826B;} .foot-locked .lock-i{flex:none;display:block;} /* set the restricted pair apart from the contact details above */ .foot-locked-li{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);} .foot-brand img{height:40px;margin-bottom:22px;} .foot-brand p{color:rgba(255,255,255,0.6);font-size:0.98rem;max-width:34ch;} .foot-social{display:flex;gap:14px;margin-top:22px;} .foot-social a{width:40px;height:40px;border:1px solid var(--hair);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:all .25s;} .foot-social a:hover{background:var(--steel);border-color:var(--steel);} .foot-social img{height:16px;} .foot-bottom{margin-top:64px;padding-top:26px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;} .foot-bottom img{height:34px;} .foot-bottom span{font-size:0.86rem;color:rgba(255,255,255,0.5);} .foot-bottom a{font-size:0.86rem;color:rgba(255,255,255,0.5);text-decoration:none;transition:color .2s ease;} .foot-bottom a:hover{color:#fff;} /* ---------- REVEAL ANIMATION ---------- */ /* Gated behind .js (set by axxion-chrome.js in , before first paint): without JS — crawlers, print, screenshot tools — .reveal content stays visible instead of shipping a blank section. */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);} .js .reveal.in{opacity:1;transform:none;} /* stagger delays removed — at most one quiet fade per page, no cascade */ /* ---------- RESPONSIVE ---------- */ @media(max-width:1024px){ .statband .grid{grid-template-columns:repeat(2,1fr);} .statband .cell:nth-child(2){border-right:none;} .statband .cell:nth-child(1),.statband .cell:nth-child(2){border-bottom:1px solid var(--hair);} .proc-grid{grid-template-columns:repeat(2,1fr);} .compound .twocol,.pilot .twocol{grid-template-columns:1fr;gap:40px;} .foot-grid{grid-template-columns:1fr 1fr;} } @media(max-width:720px){ .wrap{padding:0 22px;} .hero{padding:150px 0 70px;} .proc-grid{grid-template-columns:1fr;} .statband .grid{grid-template-columns:1fr;} .statband .cell{border-right:none;border-bottom:1px solid var(--hair);} .foot-grid{grid-template-columns:1fr;} } /* Hint line under the interactive governance compare/handoff widgets. */ .table-hint{margin-top:10px;font-size:0.82rem;color:rgba(35,31,32,0.5);} @media(max-width:720px){.table-hint{display:block;}} /* ============================================================ CONTACT PAGE — compact hero, info + form split, form controls ============================================================ */ .hero.hero-sm{min-height:auto;padding:168px 0 96px;} .contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start;} .contact-info .block+.block{margin-top:34px;} .contact-info h3{font-size:1.3rem;font-weight:700;color:var(--navy);} .contact-info p{margin-top:10px;font-size:1.04rem;color:rgba(35,31,32,0.78);line-height:1.6;} .contact-info a{color:var(--steel);font-weight:500;} .contact-info a:hover{text-decoration:underline;} .contact-info .label{text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:500;color:var(--steel);} .contact-info .sign{margin-top:34px;font-family:"Playfair Display",serif;font-style:italic;font-size:1.12rem;color:var(--navy);} .contact-card{background:#fff;border:1px solid var(--hair-dark);border-top:3px solid var(--steel);border-radius:var(--radius);padding:38px;} .field{margin-bottom:22px;} .field label{display:block;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:0.1em;font-size:0.74rem;font-weight:500;color:var(--navy);margin-bottom:9px;} .field .req{color:var(--copper);} .field input,.field textarea{ width:100%;font-family:"Roboto Condensed",sans-serif;font-size:1rem;color:var(--black); padding:0.85rem 1rem;border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff;transition:border-color .2s,box-shadow .2s; } .field textarea{min-height:140px;resize:vertical;line-height:1.55;} .field input:focus,.field textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(57,107,158,0.12);} .contact-card .btn{width:100%;justify-content:center;border:none;cursor:pointer;font-family:"Roboto Condensed",sans-serif;} .form-note{margin-top:16px;font-size:0.84rem;color:rgba(35,31,32,0.55);line-height:1.5;text-align:center;} .contact-card .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;} .form-status{margin-top:18px;padding:14px 16px;border-radius:var(--radius);font-size:0.96rem;display:none;} .form-status.ok{display:block;background:rgba(90,143,122,0.12);border:1px solid rgba(90,143,122,0.4);color:#2f5a48;} .form-status.err{display:block;background:rgba(201,110,60,0.1);border:1px solid rgba(201,110,60,0.4);color:#8a3f17;} @media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px;}.contact-card{padding:28px;}} /* ============================================================ LIVE DASHBOARDS (home) — three data cards fed by /assets/data/*.json ============================================================ */ .dash-sec{background:#F5F8FB;} .dash-head{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;} .dash-date{font-size:0.82rem;color:rgba(35,31,32,0.5);text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;} /* Latest-update ticker — live pulse + recency, signals the data is fresh */ .dash-ticker{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff;white-space:nowrap;box-shadow:0 4px 14px rgba(3,49,76,0.05);} .dash-ticker-k{text-transform:uppercase;letter-spacing:0.1em;font-size:0.7rem;font-weight:700;color:var(--steel);} .dash-ticker .dash-date{text-transform:none;letter-spacing:0;color:var(--navy);font-weight:700;font-size:0.82rem;font-variant-numeric:tabular-nums;} .dash-pulse{flex:none;width:9px;height:9px;border-radius:50%;background:#9aa6ad;} .dash-ticker.is-live .dash-pulse{background:var(--sage);box-shadow:0 0 0 0 rgba(90,143,122,0.55);animation:dashPulse 2.2s ease-out infinite;} @keyframes dashPulse{0%{box-shadow:0 0 0 0 rgba(90,143,122,0.5);}70%{box-shadow:0 0 0 9px rgba(90,143,122,0);}100%{box-shadow:0 0 0 0 rgba(90,143,122,0);}} @media(prefers-reduced-motion:reduce){.dash-ticker.is-live .dash-pulse{animation:none;}} .dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;align-items:stretch;} .tile.dash{justify-content:flex-start;} .tile.dash .kicker{margin-bottom:16px;} .chip-tag{display:inline-block;text-transform:uppercase;letter-spacing:0.1em;font-size:0.66rem;font-weight:500;color:var(--copper);border:1px solid rgba(201,110,60,0.4);border-radius:var(--radius);padding:4px 11px;} .dash-name{font-family:"Playfair Display",serif;font-weight:800;font-size:1.85rem;color:var(--navy);line-height:1.05;margin-top:14px;} .dash-rows{margin-top:18px;display:flex;flex-direction:column;} .dash-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-top:1px solid var(--hair-dark);font-size:0.96rem;} .dash-row:first-child{border-top:none;} .dash-row span{color:rgba(35,31,32,0.66);} .dash-row b{font-family:"Roboto Condensed",sans-serif;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;} .dash-row.big{padding:15px 0;} .dash-row.big b{font-family:"Playfair Display",serif;font-weight:800;font-size:1.5rem;color:var(--steel);} .dash-big{font-size:1rem;color:rgba(35,31,32,0.66);margin-top:2px;} .dash-big b{font-family:"Playfair Display",serif;font-weight:800;font-size:2.7rem;color:var(--steel);margin-right:8px;line-height:1;} .dash-chart{width:100%;height:auto;margin-top:20px;display:block;overflow:visible;} .dash-chart .ln{fill:none;stroke:var(--steel);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;} .dash-chart .dot{fill:var(--steel);} .dash-chart .dot--last{fill:var(--copper);} .dash-chart .lbl{fill:rgba(35,31,32,0.5);font:11px "Roboto Condensed",sans-serif;text-anchor:middle;} .dash-chart .lbl--last{fill:var(--steel);font-weight:700;} .dash-sub,.dash-msg{margin-top:16px;font-size:0.9rem;color:rgba(35,31,32,0.55);line-height:1.5;} .dash-foot{margin-top:26px;font-size:0.8rem;color:rgba(35,31,32,0.5);line-height:1.55;max-width:none;} @media(max-width:920px){.dash-grid{grid-template-columns:1fr;gap:16px;}} /* ---------- LEADERSHIP — LinkedIn link on person tiles ---------- */ .person-li{ margin-top:20px;display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border:1px solid var(--hair-dark);border-radius:var(--radius); color:var(--steel);transition:background .25s,border-color .25s,color .25s,transform .25s; } .person-li:hover{background:var(--steel);border-color:var(--steel);color:#fff;transform:translateY(-2px);} .person-li svg{width:17px;height:17px;fill:currentColor;display:block;} /* on accent/navy tiles keep the icon legible */ .tile.t-accent .person-li{border-color:rgba(57,107,158,0.3);} /* row of three line-art portraits inside a navy team anchor (t-big). Smaller circular avatars so all three fit on one row; bento size unchanged. */ .team-faces{display:flex;gap:14px;margin-top:24px;} .team-faces figure{margin:0;flex:1 1 0;min-width:0;} .team-faces img{ width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block; background:#fff;border:2px solid rgba(255,255,255,0.22); } @media(max-width:520px){.team-faces{gap:10px;}} /* ============================================================ GOVERNANCE — INTERACTIVE GATE EXPLORER Track toggle (compliance / cost) -> stepper of gate nodes -> detail pane. Progressive enhancement: without JS every pane is visible and readable. ============================================================ */ .gate-tool{margin-top:52px;} .gate-tracks{display:inline-flex;gap:6px;padding:6px;border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff;} .track-btn{ font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:0.1em; font-size:0.78rem;font-weight:500;color:var(--navy);background:transparent;border:none;cursor:pointer; padding:0.7rem 1.3rem;border-radius:var(--radius);transition:background .25s,color .25s;display:inline-flex;align-items:center;gap:0.6em; } .track-btn em{font-style:normal;font-size:0.72rem;background:rgba(57,107,158,0.12);color:var(--steel);border-radius:var(--radius);padding:2px 9px;font-weight:700;transition:background .25s,color .25s;} .track-btn[aria-selected="true"]{background:var(--navy);color:#fff;} .track-btn[aria-selected="true"] em{background:rgba(255,255,255,0.18);color:#fff;} .gate-track{margin-top:28px;} .gate-track[hidden]{display:none;} /* stepper */ .gate-stepper{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin;} .gate-node{ position:relative;flex:1 1 0;min-width:108px;background:#fff;border:1px solid var(--hair-dark); border-radius:var(--radius);padding:16px 14px 15px;margin-right:10px;cursor:pointer;text-align:left; transition:border-color .25s,box-shadow .25s,transform .25s;display:flex;flex-direction:column;gap:6px; font-family:"Roboto Condensed",sans-serif; } .gate-node:last-child{margin-right:0;} .gate-node .gn-num{ font-family:"Playfair Display",serif;font-weight:800;font-size:1.15rem;line-height:1;color:var(--steel); display:inline-flex;align-items:center;gap:8px; } .gate-node .gn-name{font-size:0.86rem;font-weight:500;color:var(--navy);letter-spacing:0.02em;} .gate-node:hover{border-color:rgba(57,107,158,0.5);transform:translateY(-2px);} .gate-node[aria-selected="true"]{border-color:var(--steel);box-shadow:0 10px 26px rgba(3,49,76,0.12);border-top:3px solid var(--steel);} .gate-node.cleared .gn-num{color:var(--sage);} .gate-node .gn-tick{opacity:0;width:15px;height:15px;border-radius:50%;background:var(--sage);position:relative;transition:opacity .3s;} .gate-node .gn-tick::after{content:"";position:absolute;left:5px;top:2.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);} .gate-node.cleared .gn-tick{opacity:1;} /* detail pane */ .gate-detail{margin-top:18px;} .gate-pane{background:#fff;border:1px solid var(--hair-dark);border-top:3px solid var(--steel);border-radius:var(--radius);padding:34px 36px;} .gate-pane[hidden]{display:none;} .gate-pane .kicker{text-transform:uppercase;letter-spacing:0.12em;font-size:0.74rem;font-weight:500;color:var(--copper);} .gate-pane h3{font-size:1.5rem;font-weight:700;margin-top:10px;color:var(--navy);} .gate-pane .gate-sub{margin-top:8px;font-size:1.04rem;color:rgba(35,31,32,0.74);line-height:1.5;} .gate-checks{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;} .gate-checks li{position:relative;padding-left:28px;font-size:0.98rem;color:rgba(35,31,32,0.8);line-height:1.45;} .gate-checks li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:rgba(90,143,122,0.16);} .gate-checks li::after{content:"";position:absolute;left:5.5px;top:6px;width:3.5px;height:7px;border:solid var(--sage);border-width:0 2px 2px 0;transform:rotate(45deg);} .gate-checks li b{color:var(--navy);font-weight:700;} @media(max-width:720px){ .gate-checks{grid-template-columns:1fr;} .gate-pane{padding:26px 22px;} .gate-node{min-width:128px;} } /* ============================================================ GOVERNANCE — CBUAE COMPARE TOOL (left selector + animated boxes) Two columns: an obligation list on the left; the right stage animates the "industry today -> Axxion Claims OS" comparison in. No-JS safe: panes only collapse once .js-ready is set by script. ============================================================ */ /* Two-column bento: a WIDE left column holds the seven CBUAE obligation tiles laid out as a compact 2-up bento grid (so it isn't tall enough to push the result off-screen); selecting one stacks its two comparison boxes (industry today / how Axxion handles it) on top of each other in column 2. That right column is sticky, so the boxes stay in view while you pick any tile. Collapses to a single column on phones. No-JS safe: panes only collapse to the active one once .js-ready is set. */ .compare-tool{margin-top:44px;display:grid;grid-template-columns:1.7fr 1fr;gap:22px;align-items:start;} /* tinted panel groups the seven selectable tiles so the control surface reads as distinct from the result column — makes the interaction obvious */ .compare-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start;background:#E7EFF7;border:1px solid var(--hair-dark);border-radius:var(--radius);padding:16px;} .compare-item{ text-align:left;background:#fff;border:1px solid var(--hair-dark);border-radius:var(--radius); padding:18px 20px;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s; display:flex;flex-direction:column;gap:5px;font-family:"Roboto Condensed",sans-serif;border-left:3px solid transparent; } .compare-item:last-child{grid-column:1 / -1;} /* 7th tile spans the row — clean bento */ .compare-item .ci-title{font-family:"Playfair Display",serif;font-weight:700;font-size:1.04rem;color:var(--navy);line-height:1.2;} .compare-item .ci-ref{font-size:0.71rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--steel);} .compare-item:hover{border-color:rgba(57,107,158,0.5);transform:translateY(-2px);} .compare-item[aria-selected="true"]{border-color:var(--steel);border-left-color:var(--steel);background:#F5F8FB;box-shadow:0 8px 22px rgba(3,49,76,0.08);} /* column 2: the two comparison boxes stacked vertically; sticky so they stay on screen no matter which tile in the wide left bento is selected */ .compare-stage{display:grid;grid-template-columns:1fr;gap:18px;align-content:start;position:sticky;top:96px;} .compare-tool.js-ready .compare-pane{display:none;} .compare-tool.js-ready .compare-pane.is-active{display:contents;} .cmp-box{border:1px solid var(--hair-dark);border-radius:var(--radius);padding:24px 26px;} .compare-tool.js-ready .cmp-box{opacity:0;transform:translateY(12px);} .compare-tool.js-ready .compare-pane.is-active .cmp-box{animation:cmpIn .5s cubic-bezier(.2,.7,.2,1) forwards;} .compare-tool.js-ready .compare-pane.is-active .cmp-box.cmp-axx{animation-delay:.1s;} @keyframes cmpIn{to{opacity:1;transform:none;}} .cmp-now{border-top:3px solid var(--copper);background:#fff;} .cmp-axx{border-top:3px solid var(--sage);background:#F5F8FB;} .cmp-tag{display:block;text-transform:uppercase;letter-spacing:0.1em;font-size:0.72rem;font-weight:500;margin-bottom:9px;} .cmp-now .cmp-tag{color:var(--copper);} .cmp-axx .cmp-tag{color:#2f5a48;} .cmp-box p{font-size:1.02rem;color:rgba(35,31,32,0.82);line-height:1.55;} .cmp-box.cmp-axx p{color:var(--navy);} /* phone: stack the columns — the seven tiles (kept 2-up to stay compact), then the two boxes below. Sticky is dropped; the script scrolls the boxes into view on tap so the change is always visible. */ @media(max-width:860px){ .compare-tool{grid-template-columns:1fr;} .compare-stage{position:static;} } @media(max-width:480px){ .compare-list{grid-template-columns:1fr;} } @media(prefers-reduced-motion:reduce){.compare-tool.js-ready .cmp-box{opacity:1;transform:none;}.compare-tool.js-ready .compare-pane.is-active .cmp-box{animation:none;}} /* ============================================================ GOVERNANCE — AI HANDOFF TOOL (top chips + AI -> human stage) Deliberately different from the CBUAE tool: horizontal chips and a left-to-right "AI does / human decides" handoff with a navy human box. ============================================================ */ .handoff-tool{margin-top:48px;} .handoff-chips{display:flex;flex-wrap:wrap;gap:10px;} .handoff-chip{ background:#fff;border:1px solid var(--hair-dark);border-radius:var(--radius);cursor:pointer; padding:9px 18px;font-family:"Roboto Condensed",sans-serif;transition:background .25s,border-color .25s; display:inline-flex;flex-direction:column;gap:1px;text-align:left; } .handoff-chip .ho-name{font-size:0.92rem;font-weight:500;color:var(--navy);} .handoff-chip .ho-gate{font-size:0.64rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--steel);} .handoff-chip:hover{border-color:rgba(57,107,158,0.5);} .handoff-chip[aria-selected="true"]{background:var(--navy);border-color:var(--navy);} .handoff-chip[aria-selected="true"] .ho-name{color:#fff;} .handoff-chip[aria-selected="true"] .ho-gate{color:var(--skyblue);} .handoff-stage{margin-top:26px;} .handoff-pane{grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;} .handoff-tool.js-ready .handoff-pane{display:none;} .handoff-tool.js-ready .handoff-pane.is-active{display:grid;} .ho-box{border:1px solid var(--hair-dark);border-radius:var(--radius);padding:26px 28px;} .handoff-tool.js-ready .ho-box{opacity:0;transform:translateY(12px);} .handoff-tool.js-ready .handoff-pane.is-active .ho-box{animation:cmpIn .5s cubic-bezier(.2,.7,.2,1) forwards;} .handoff-tool.js-ready .handoff-pane.is-active .ho-human{animation-delay:.14s;} .ho-ai{background:#F5F8FB;border-top:3px solid var(--steel);} .ho-human{background:var(--navy);color:#fff;border-top:3px solid var(--sage);} .ho-tag{display:block;text-transform:uppercase;letter-spacing:0.1em;font-size:0.72rem;font-weight:500;margin-bottom:11px;} .ho-ai .ho-tag{color:var(--steel);} .ho-human .ho-tag{color:var(--sage);} .ho-box p{font-size:1.04rem;line-height:1.55;} .ho-ai p{color:rgba(35,31,32,0.82);} .ho-human p{color:rgba(255,255,255,0.88);} .ho-link{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;gap:9px;} .ho-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--hair-dark);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--steel);font-size:1.15rem;} .ho-cap{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.1em;color:rgba(35,31,32,0.5);text-align:center;max-width:78px;line-height:1.3;} @media(max-width:760px){ .handoff-pane{grid-template-columns:1fr;} .ho-link{flex-direction:row;padding:14px 0;} .ho-arrow{transform:rotate(90deg);} } @media(prefers-reduced-motion:reduce){.handoff-tool.js-ready .ho-box{opacity:1;transform:none;}.handoff-tool.js-ready .handoff-pane.is-active .ho-box{animation:none;}} /* ============================================================ FOR-INSURERS — SERVICE CONTAINMENT Claims management encompasses repair management. The nested box shows repair as a component inside claims, revealed on scroll. Static fallback: both boxes fully visible without JS. ============================================================ */ .contain-tool{margin-top:48px;} .contain-outer{ position:relative;border:1px solid var(--hair-dark);border-radius:var(--radius); background:#fff;padding:30px 30px 34px; } .contain-tag{ display:inline-block;font-family:"Roboto Condensed",sans-serif;font-weight:700; font-size:1.18rem;color:var(--navy);margin-bottom:12px; } .contain-outer > .contain-head > p{font-size:1.04rem;line-height:1.55;color:rgba(35,31,32,0.82);} .contain-inner{ margin-top:26px;border:1px solid rgba(57,107,158,0.32);border-left:3px solid var(--steel); border-radius:var(--radius);background:#F5F8FB;padding:24px 26px; } .contain-tag-inner{font-size:1.04rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;} .contain-tag-inner em{ font-style:normal;font-family:"Roboto",sans-serif;font-weight:400; font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--steel); } .contain-inner p{font-size:1.0rem;line-height:1.55;color:rgba(35,31,32,0.8);} .contain-tool .scope{margin-top:14px;} /* JS-enhanced reveal: containment slots in on scroll */ .contain-tool.js-ready .contain-outer{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);} .contain-tool.js-ready .contain-inner{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .65s cubic-bezier(.2,.7,.2,1) .18s,transform .65s cubic-bezier(.2,.7,.2,1) .18s;transform-origin:top center;} .contain-tool.js-ready.in .contain-outer{opacity:1;transform:none;} .contain-tool.js-ready.in .contain-inner{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .contain-tool.js-ready .contain-outer, .contain-tool.js-ready .contain-inner{opacity:1;transform:none;transition:none;} } /* ============================================================ ANALYTICS — PROMOTED HERO CTAS Two standalone boxes below the hero, each with a downward arrow that draws the eye to the section it jumps to. ============================================================ */ .cta-promo{padding:34px 0 6px;} .cta-promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:760px;} .cta-promo-box{ display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px; border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff; padding:15px 20px;text-decoration:none; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .cta-promo-box:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px rgba(35,31,32,0.09);} .cta-promo-label{ font-family:"Roboto Condensed",sans-serif;font-weight:700; font-size:clamp(0.96rem,1.1vw,1.08rem);line-height:1.25;color:var(--navy); } .cta-promo-arrow{ flex:none;font-size:1.3rem;line-height:1;color:var(--accent); animation:ctaArrowNudge 1.8s ease-in-out infinite; } @keyframes ctaArrowNudge{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}} @media(max-width:760px){.cta-promo-grid{grid-template-columns:1fr;}} @media(prefers-reduced-motion:reduce){.cta-promo-arrow{animation:none;}} /* ---------- SHARED CHROME (custom elements) ---------- */ /* ---------- PAGE-LOAD CUES (added 21 Jun 2026) ---------- */ /* Hero intro — runs on load (not scroll), so navigating to a page reads as arrival. Put .hero-in on each hero element and stagger with inline style="--d:.18s". */ .hero-in{opacity:0;transform:translateY(24px);animation:heroUp .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s);} @keyframes heroUp{to{opacity:1;transform:none;}} /* Sage/accent rule that sweeps in under the hero eyebrow — per-page colour identity. */ .hero-rule{height:2px;width:0;background:linear-gradient(90deg,var(--accent),transparent);margin:20px 0 0;animation:ruleSweep 1s cubic-bezier(.2,.7,.2,1) .55s forwards;} @keyframes ruleSweep{to{width:130px;}} @media(prefers-reduced-motion:reduce){ .hero-in{animation:none;opacity:1;transform:none;} .hero-rule{animation:none;width:130px;} } /* ============================================================ INTERIOR-PAGE MODULES (added 21 Jun 2026) Reusable across interior pages (for-insurers, analytics, …). ============================================================ */ /* surface helpers */ .dark{background:var(--navy);color:#fff;} .dark .section-head h2{color:#fff;} .dark .section-head p{color:rgba(255,255,255,0.72);} .tint-sec{background:#F5F8FB;} /* even grids (2-up / 3-up card rows) */ .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:56px;} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;} .grid2 .tile,.grid3 .tile{justify-content:flex-start;} .tile h3+p{margin-top:12px;} /* circular portrait beside intro prose (founder / feature) */ .intro-split{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:start;} .portrait{margin:0;} .portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:50%;display:block;border:1px solid var(--hair-dark);background:#F5F8FB;} .portrait figcaption{margin-top:18px;font-family:"Roboto Condensed",sans-serif;} .portrait .p-name{display:block;font-weight:700;color:var(--navy);font-size:1.05rem;} .portrait .p-role{display:block;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--steel);margin-top:4px;} @media(max-width:860px){.intro-split{grid-template-columns:1fr;gap:30px;}.portrait img{max-width:260px;}} /* bulleted list + scope line inside tiles */ .tile ul{list-style:none;margin-top:16px;padding:0;} .tile li{position:relative;padding-left:18px;font-size:0.95rem;color:rgba(35,31,32,0.7);line-height:1.45;margin-top:8px;} .tile li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--steel);} .tile .scope{margin-top:16px;font-size:0.95rem;color:rgba(35,31,32,0.62);} .tile .scope b{color:var(--navy);font-weight:700;} /* dark-tile extras (benefit band): h4, ghost, list */ .tile.t-dark h4{color:var(--skyblue);} .tile.t-dark .ghost{color:rgba(143,180,214,0.18);} .tile.t-dark li{color:rgba(255,255,255,0.7);} .tile.t-dark li::before{background:var(--skyblue);} /* stat superscript + sub-caption; opt-in accent-coloured stats (per-page accent) */ .tile .stat small{font-size:0.46em;font-weight:700;color:inherit;opacity:0.72;} .tile .stat-sub{margin-top:8px;font-size:0.9rem;color:rgba(35,31,32,0.6);line-height:1.45;} /* horizontal stat tile: big numeral beside its caption (suits wide stat tiles) */ .tile.stat-row{flex-direction:row;align-items:center;gap:22px;} .tile.stat-row .stat{flex:none;} .tile.stat-row .stat-cap{margin-top:0;} /* feature split: narrative beside a compact stat panel (fits one viewport) */ .feature-split{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:start;} .feature-split .section-head{max-width:none;} .stat-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} .stat-panel .wide{grid-column:1 / 3;} .stat-panel .tile{padding:22px 24px;justify-content:flex-start;} .stat-panel .stat{font-size:clamp(2.6rem,3vw,3.6rem);} .stat-panel .stat small{font-size:0.5em;} .stat-panel .stat-cap{margin-top:9px;font-size:0.92rem;line-height:1.25;} .stat-panel .stat-sub{margin-top:7px;} /* full-width navy anchor inside a stat panel (no row-span) */ .stat-panel .t-big{grid-row:auto;} .stat-panel .t-big h3{font-size:1.45rem;margin-top:8px;} /* dominant numerals variant (group facts) — large, copper, prominent + */ .stat-panel.big{gap:16px;} .stat-panel.big .tile{padding:24px 26px;} .stat-panel.big .stat{font-size:clamp(2.8rem,3.6vw,4.2rem);color:var(--copper);} .stat-panel.big .stat small{font-size:0.6em;color:var(--copper);} .stat-panel.big .stat-cap{font-size:1rem;} @media(max-width:920px){.feature-split{grid-template-columns:1fr;gap:38px;}} @media(max-width:560px){.stat-panel{grid-template-columns:1fr;}.stat-panel .wide{grid-column:auto;}} /* dark pull-quote variant — a navy band that stands out between light sections */ .quote.dark{background:var(--navy);} .quote.dark .pull{border-left-color:var(--accent);} .quote.dark .pull blockquote{color:#fff;} .quote.dark .pull .who{color:#fff;} .quote.dark .pull .role{color:rgba(255,255,255,0.65);} .quote.dark .pull .sep{color:var(--accent);} .accent-stats .tile .stat{color:var(--accent);} .accent-stats .tile .stat-cap{color:var(--navy);font-weight:700;} /* ---------- AIOS teaser card (links to /aios) ---------- */ .aios-teaser{display:flex;align-items:center;gap:20px;margin-top:28px;padding:18px 22px;background:#fff; border:1px solid var(--hair-dark);border-left:3px solid var(--steel);border-radius:var(--radius); text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;} .aios-teaser:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(3,49,76,0.12);border-color:rgba(57,107,158,0.5);} .aios-teaser-viz{flex:none;width:132px;height:96px;} .aios-teaser-viz svg{width:100%;height:100%;display:block;overflow:visible;} .aios-teaser-viz .lines line{stroke-dasharray:3 4;animation:aiosflow 3s linear infinite;} .aios-teaser-viz .node{transform-box:fill-box;transform-origin:center;animation:aiospulse 2.4s ease-in-out infinite;} .aios-teaser:hover .aios-teaser-viz .node{animation-duration:1.3s;} @keyframes aiosflow{to{stroke-dashoffset:-14;}} @keyframes aiospulse{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.18);}} .aios-teaser-txt{display:flex;flex-direction:column;gap:4px;} .aios-teaser-txt .k{text-transform:uppercase;letter-spacing:0.14em;font-size:0.68rem;font-weight:600;color:var(--steel);} .aios-teaser-txt .t{font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:1.14rem;color:var(--navy);line-height:1.2;} .aios-teaser-txt .m{font-size:0.86rem;color:rgba(35,31,32,0.62);display:inline-flex;align-items:center;gap:0.4em;} .aios-teaser:hover .arrow{transform:translateX(4px);} @media(prefers-reduced-motion:reduce){.aios-teaser-viz .lines line,.aios-teaser-viz .node{animation:none;}} @media(max-width:560px){.aios-teaser{flex-direction:column;align-items:flex-start;gap:14px;}} /* inter-insurer metric (Months -> Days) */ .metric{font-family:"Playfair Display",serif;font-weight:800;font-size:clamp(2.2rem,3.4vw,3.2rem);color:var(--steel);line-height:1.1;} .metric .ar{color:rgba(57,107,158,0.5);margin:0 10px;display:inline-block;animation:arrowPush 1.8s ease-in-out infinite;} @keyframes arrowPush{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(7px);opacity:1}} /* extra reveal stagger steps */ @media(prefers-reduced-motion:reduce){.metric .ar{animation:none;}} @media(max-width:1024px){ .grid3{grid-template-columns:repeat(2,1fr);} .grid2{grid-template-columns:1fr;} } @media(max-width:720px){ .grid2,.grid3{grid-template-columns:1fr;} } /* ============================================================ INSIGHTS / WHITE PAPERS (added 21 Jun 2026) Bento-style, searchable + sortable card grid (no icons — ghost dates). ============================================================ */ .wp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:52px;} .wp-search{flex:1 1 240px;min-width:200px;font-family:"Roboto Condensed",sans-serif;font-size:1rem;padding:0.85rem 1rem;border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff;color:var(--black);} .wp-search::placeholder{color:rgba(35,31,32,0.45);} .wp-search:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(57,107,158,0.12);} .wp-filters{display:flex;flex-wrap:wrap;gap:8px;} .wp-chip{font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;letter-spacing:0.08em;font-size:0.72rem;font-weight:500;padding:0.6rem 0.95rem;border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff;color:var(--navy);cursor:pointer;transition:background .2s,border-color .2s,color .2s;} .wp-chip:hover{border-color:var(--steel);color:var(--steel);} .wp-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;} .wp-sort{font-family:"Roboto Condensed",sans-serif;font-size:0.9rem;padding:0.72rem 0.9rem;border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff;color:var(--navy);cursor:pointer;} .wp-sort:focus{outline:none;border-color:var(--steel);} .wp-count{font-size:0.84rem;color:rgba(35,31,32,0.55);margin-left:auto;white-space:nowrap;} /* true bento: 4 columns, mixed spans, dense packing so filtered/sorted tiles backfill cleanly. Feature tiles vary in size + surface. */ .insights-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(214px,auto);grid-auto-flow:row dense;gap:18px;margin-top:34px;} .tile.insight{justify-content:flex-start;overflow:hidden;} .tile.insight .ghost{font-size:2rem;letter-spacing:-0.01em;top:22px;right:24px;} .tile.insight .kicker{margin-bottom:16px;} .tile.insight h3{font-size:1.3rem;line-height:1.18;font-weight:700;} .tile.insight h3 a{transition:color .2s ease;} .tile.insight:hover h3 a{color:var(--steel);} .tile.insight p{margin-top:12px;font-size:0.96rem;color:rgba(35,31,32,0.7);line-height:1.5;flex:1 1 auto;} .insight-foot{margin-top:20px;} .insight-meta{display:block;font-size:0.78rem;color:rgba(35,31,32,0.5);text-transform:uppercase;letter-spacing:0.06em;} .insight-links{margin-top:11px;display:flex;gap:11px;align-items:center;font-size:0.82rem;font-weight:500;text-transform:uppercase;letter-spacing:0.08em;} .insight-links a{color:var(--steel);transition:color .2s;} .insight-links a:hover{color:var(--navy);} .insight-links .sep{color:var(--hair-dark);} /* feature sizes */ .tile.insight.t-wide{grid-column:span 2;} .tile.insight.t-big{grid-column:span 2;grid-row:span 2;} .tile.insight.t-big .ghost{font-size:3rem;} .tile.insight.t-big h3{font-size:clamp(1.6rem,2.3vw,2.1rem);margin-top:4px;} .tile.insight.t-big p{font-size:1.04rem;} /* dark feature tiles (navy) */ .tile.insight.t-big,.tile.insight.dark-tile{background:var(--navy);color:#fff;border-color:var(--hair);} .tile.insight.t-big .kicker,.tile.insight.dark-tile .kicker{color:var(--skyblue);} .tile.insight.t-big h3,.tile.insight.dark-tile h3{color:#fff;} .tile.insight.t-big:hover h3 a,.tile.insight.dark-tile:hover h3 a{color:var(--skyblue);} .tile.insight.t-big p,.tile.insight.dark-tile p{color:rgba(255,255,255,0.78);} .tile.insight.t-big .ghost,.tile.insight.dark-tile .ghost{color:rgba(143,180,214,0.16);} .tile.insight.t-big .insight-meta,.tile.insight.dark-tile .insight-meta{color:rgba(255,255,255,0.55);} .tile.insight.t-big .insight-links a,.tile.insight.dark-tile .insight-links a{color:var(--skyblue);} .tile.insight.t-big .insight-links a:hover,.tile.insight.dark-tile .insight-links a:hover{color:#fff;} .tile.insight.t-big .insight-links .sep,.tile.insight.dark-tile .insight-links .sep{color:var(--hair);} .tile.insight.t-big:hover,.tile.insight.dark-tile:hover{box-shadow:0 18px 44px rgba(3,49,76,0.28);border-color:rgba(143,180,214,0.55);} .wp-empty{margin-top:44px;font-size:1.05rem;color:rgba(35,31,32,0.6);} @media(max-width:1024px){ .insights-grid{grid-template-columns:repeat(2,1fr);} .tile.insight.t-big{grid-column:span 2;grid-row:span 1;} .tile.insight.t-wide{grid-column:span 2;} } @media(max-width:680px){ .insights-grid{grid-template-columns:1fr;} .tile.insight.t-big,.tile.insight.t-wide{grid-column:span 1;} .wp-count{margin-left:0;width:100%;} } /* ============================================================ EVENTS / AGENTS OF INSIGHT — recap pages (added 26 Jun 2026) Photo-led bento, inline PDF deck readers, prominent gallery box. Built on the shared .bento / .tile system; accent = copper. ============================================================ */ /* compact hero with a photographic backdrop + navy wash */ .hero.event-hero{min-height:auto;padding:184px 0 104px;background-size:cover;background-position:center;} .hero.event-hero::before{ background: linear-gradient(90deg,rgba(3,49,76,0.94) 0%,rgba(3,49,76,0.72) 46%,rgba(3,49,76,0.5) 100%), linear-gradient(180deg,rgba(3,49,76,0.2) 0%,rgba(3,49,76,0.72) 100%); } .event-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;} .event-meta span{display:inline-flex;align-items:center;gap:9px;font-size:0.92rem;color:rgba(255,255,255,0.82);text-transform:uppercase;letter-spacing:0.1em;font-weight:500;} .event-meta b{color:#fff;font-weight:700;} .event-meta .em-dot{width:6px;height:6px;border-radius:50%;background:var(--copper);} .backlink{display:inline-flex;align-items:center;gap:8px;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.12em;font-weight:500;color:var(--skyblue);} .backlink:hover{color:#fff;} /* photo bento — tiles whose whole surface is an event photograph */ .photo-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;grid-auto-flow:row dense;gap:14px;margin-top:48px;} .photo-tile{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--hair-dark);background:#0b2336;display:block;} .photo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);} .photo-tile:hover img{transform:scale(1.05);} .photo-tile.span-2w{grid-column:span 2;} .photo-tile.span-2h{grid-row:span 2;} .photo-tile.span-2{grid-column:span 2;grid-row:span 2;} .photo-tile figcaption{ position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;margin:0; font-family:"Roboto Condensed",sans-serif;font-size:0.82rem;color:#fff;letter-spacing:0.02em; background:linear-gradient(180deg,rgba(3,49,76,0) 0%,rgba(3,49,76,0.82) 100%); opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease; } .photo-tile:hover figcaption{opacity:1;transform:none;} @media(max-width:880px){.photo-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;}.photo-tile.span-2{grid-column:span 2;}} @media(max-width:520px){.photo-bento{grid-template-columns:1fr;grid-auto-rows:200px;}.photo-tile.span-2w,.photo-tile.span-2{grid-column:span 1;}} /* presentation deck cards — cover + inline PDF reader + download */ .decks{display:grid;grid-template-columns:1fr;gap:22px;margin-top:52px;} .deck{border:1px solid var(--hair-dark);border-radius:var(--radius);background:#fff;overflow:hidden;border-top:3px solid var(--copper);} .deck-head{display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:start;padding:30px 32px;} .deck-badge{width:64px;height:64px;border-radius:var(--radius);background:#F5F8FB;border:1px solid var(--hair-dark);display:flex;align-items:center;justify-content:center;color:var(--steel);font-family:"Playfair Display",serif;font-weight:800;font-size:1.5rem;} .deck-body{min-width:0;} .deck-body .kicker{text-transform:uppercase;letter-spacing:0.14em;font-size:0.72rem;font-weight:500;color:var(--copper);} .deck-body h3{font-size:1.45rem;font-weight:700;color:var(--navy);margin-top:7px;line-height:1.14;} .deck-by{margin-top:8px;font-size:0.9rem;color:var(--steel);text-transform:uppercase;letter-spacing:0.06em;font-weight:500;} .deck-body p{margin-top:14px;font-size:1.02rem;color:rgba(35,31,32,0.74);line-height:1.55;max-width:62ch;} .deck-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:172px;} .deck-actions .btn{justify-content:center;cursor:pointer;border:none;font-family:"Roboto Condensed",sans-serif;font-size:0.8rem;} .btn-read{background:var(--navy);color:#fff;} .btn-read:hover{background:var(--steel);} .btn-dl{border:1px solid var(--steel)!important;color:var(--steel);} .btn-dl:hover{background:var(--steel);color:#fff;} .deck-viewer{border-top:1px solid var(--hair-dark);background:#F5F8FB;height:0;overflow:hidden;transition:height .15s linear;} .deck.is-open .deck-viewer{height:78vh;} .deck-viewer iframe{width:100%;height:100%;border:0;display:block;background:#fff;} @media(max-width:760px){ .deck-head{grid-template-columns:1fr;gap:16px;padding:24px 22px;} .deck-badge{display:none;} .deck-actions{flex-direction:row;min-width:0;} .deck-actions .btn{flex:1;} .deck.is-open .deck-viewer{height:70vh;} } /* prominent gallery call-to-action box */ .gallery-cta{ position:relative;overflow:hidden;border-radius:var(--radius);background:var(--navy);color:#fff; display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;padding:48px 52px;margin-top:18px; background-image:linear-gradient(135deg,rgba(57,107,158,0.35),rgba(3,49,76,0) 60%); } .gallery-cta .eyebrow{color:var(--skyblue);} .gallery-cta h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;margin-top:12px;} .gallery-cta p{margin-top:16px;font-size:1.08rem;color:rgba(255,255,255,0.84);line-height:1.6;max-width:48ch;} .gallery-cta .btn{background:#fff;color:var(--navy);margin-top:0;} .gallery-cta .btn:hover{background:var(--copper);color:#fff;transform:translateY(-2px);} .gallery-cta-right{display:flex;justify-content:flex-end;} .gallery-thumbs{display:grid;grid-template-columns:repeat(2,84px);grid-auto-rows:84px;gap:8px;} .gallery-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.18);} @media(max-width:760px){ .gallery-cta{grid-template-columns:1fr;padding:34px 26px;} .gallery-cta-right{justify-content:flex-start;} } /* talks & appearances — click-to-play YouTube facades (no player until clicked) */ .talks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px;} /* denser variant for a media rail (Insights hub); wraps on its own, no breakpoints */ .talks-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));} .talk{border:1px solid var(--hair-dark);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;} .talk:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(3,49,76,0.10);border-color:rgba(57,107,158,0.45);} .talk-media{position:relative;aspect-ratio:16/9;width:100%;padding:0;border:0;margin:0;display:block;cursor:pointer;background:#0b2336;overflow:hidden;} .talk-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;transition:transform .5s ease;} .talk-media:hover img{transform:scale(1.04);} .talk-media .play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:rgba(3,49,76,0.78);display:flex;align-items:center;justify-content:center;transition:background .25s ease,transform .25s ease;} .talk-media:hover .play{background:var(--copper);transform:scale(1.06);} .talk-media .play::after{content:"";width:0;height:0;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff;margin-left:4px;} .talk-media.is-playing{cursor:default;} .talk-media.is-playing .play{display:none;} .talk-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .talk-body{padding:20px 22px;} .talk-body .kicker{text-transform:uppercase;letter-spacing:0.12em;font-size:0.7rem;font-weight:500;color:var(--copper);} .talk-body h3{font-size:1.18rem;font-weight:700;color:var(--navy);margin-top:6px;line-height:1.16;} .talk-meta{margin-top:10px;display:flex;align-items:center;gap:12px;font-size:0.82rem;color:rgba(35,31,32,0.55);text-transform:uppercase;letter-spacing:0.06em;} .talk-meta a{color:var(--steel);font-weight:500;} .talk-meta a:hover{color:var(--navy);} @media(max-width:760px){.talks-grid{grid-template-columns:1fr;}}