/* ============================================================ BLUEPRINT ALIGNMENT V2 — brand-skill compliance layer. Loaded only by "blueprint aligned v2.html", on top of blueprint-align.css. Scoped to html[data-bp2="on"]. Against 1a-theme-intelligence-assist: F1 Rule 4 — Success Green #63C240 and Error Red #E23741 are reserved for status. Task AI moves off Success Green. F2 Accelerator hexes brought inside the IA palette: the off-palette purple #885CF6 and teal #0D9488 retire. F3 Rule 3 — Light Blue and Teal used sparingly. Cyan stops being a surface and goes back to being an accent. F4 Trivial token corrections: Light Grey, Success Green. ============================================================ */ html[data-bp2="on"] { /* F4 — exact skill values */ --ia-grey-50: #F8F8F8; /* Light Grey — was #FBFBFB */ --ia-success: #63C240; /* Success Green — was #63C242 */ /* F1 + F2 — the five accelerators, rebuilt from the IA palette. Separation comes from VALUE STEPS across Blue, Cyan and Teal, not from hue alone: Dark Blue and Navy are too close to serve as two categories, so Navy is not used as a category colour at all. Every dot is a brand hex or a documented tint from tokens.css. Success Green and Error Red no longer appear as category colours. */ --ac-agents-bg: #DCE1F0; --ac-agents-fg: #001A55; --ac-agents-dot: #001A55; /* Dark Blue */ --ac-decision-bg:#C9D0F2; --ac-decision-fg:#001880; --ac-decision-dot:#0119B7; /* Blue */ --ac-tool-bg: #EAEDF9; --ac-tool-fg: #2B3475; --ac-tool-dot: #8C9AE3; /* blue-200 */ --ac-knowledge-bg:#DCEFEE; --ac-knowledge-fg:#00534E; --ac-knowledge-dot:#00968F; /* Teal */ --ac-conversational-bg:#DAFAFE; --ac-conversational-fg:#0A4E5A; --ac-conversational-dot:#4BE4F8; /* Light Blue */ --ac-everyday-bg:#F8F8F8; --ac-everyday-fg:#5C5C5C; --ac-everyday-dot:#5C5C5C; /* Dark Grey */ /* F2 — the two doors and the pillars, same rule */ --pl-enable-bg: #DCEFEE; --pl-enable-fg: #00655F; --pl-enable-accent: #00968F; --pl-build-bg: #C9D0F2; --pl-build-fg: #001A55; /* = --ia-dark-blue, the Accelerators door */ --pl-strategy-bg:#DCE1F0; --pl-strategy-fg:#001A55; } /* ---------- F3 · cyan and teal as accents, not surfaces ---------- */ /* The hero dot grid was a full-bleed cyan texture. Dial it back to a whisper. */ html[data-bp2="on"] .hero--slab::before, html[data-bp2="on"] .home-close::before { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); } /* The two doors keep the teal / dark-blue split from before v2. Teal is a deliberate exception to the surface rule, since it carries the two-door idea. The door reads --pl-enable-fg rather than a literal, so every Foundations consumer (doors, journey dots, value dots, the Service Finder result) stays on one green. */ /* The closing CTA was a large cyan surface. Blue is the skill's button colour; cyan returns to the arrow and the hover. */ html[data-bp2="on"] .home-close-cta { background: var(--ia-blue); color: #fff; } html[data-bp2="on"] .home-close-cta:hover { background: #0021E0; box-shadow: 0 16px 38px rgba(1,25,183,.3); } html[data-bp2="on"] .home-close-cta .arrow { color: var(--ia-light-blue); } /* Headline emphasis on dark stays cyan — that is accent use and the skill allows it — but the accent rule above the eyebrow shortens so it reads as a mark, not a band. */ html[data-bp2="on"] .hero-rule { width: 44px; height: 3px; } /* ---------- F1 · Error Red and Success Green, status only ---------- */ html[data-bp2="on"] .status-flag--placeholder { background: #FDF0C8; color: #8A5A00; } html[data-bp2="on"] .status-flag--final { background: #FDF0C8; color: #8A5A00; } html[data-bp2="on"] .story-pending, html[data-bp2="on"] .pending-pill { color: #A8171F; } html[data-bp2="on"] .pending-pill { background: #FBE3E4; } /* The curve out of the hero lands on white, so it meets the logo block seamlessly; the logo band then ramps down into the cool wash. */ html[data-bp2="on"] .hero-fade svg path { fill: #fff; } html[data-bp2="on"] .logo-strip-band { background: linear-gradient(to bottom, #fff 0%, #fff 46%, #FBFCFE 76%, var(--paper) 100%); } /* The closing statement reads quieter than the hero — it is an invitation, not a second headline. */ html[data-bp2="on"] .home-close-title { font-weight: 600; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.028em; } html[data-bp2="on"] .home-close { padding: 108px 0 104px; } /* Hero headline at 700 — the Blueprint's own headline weight. */ html[data-bp2="on"] .hero--slab .h-display { font-weight: 700; letter-spacing: -.028em; } /* Foundations — the pillar rows already close on a rule, so the gap before "no fixed order" was doubling section padding. */ html[data-bp2="on"] .section--white:has(.pillar-rows) { padding-bottom: 56px; } html[data-bp2="on"] .section--paper:has(.cycrow) { padding-top: 96px; padding-bottom: 96px; } html[data-bp2="on"] .section--paper:has(.cycrow) + .section--white { padding-top: 56px; } /* Foundations — hero sits directly above the triangle section, so the join was doubling padding. */ /* .hero.acc-hero (0,2,2) beats html[data-density] .hero (0,2,1), which is injected inline and would otherwise win the tie on source order at every density. */ html[data-bp2="on"] .hero.acc-hero { padding-top: 72px; padding-bottom: 40px; } /* Device heroes are followed by a section with its own top padding, so they can close tighter. Text-only heroes sit above a sticky filter bar with none. */ html[data-bp2="on"] .hero.acc-hero:has(.svc-hero) { padding-bottom: 12px; } html[data-bp2="on"] .acc-hero .svc-hero { margin-top: 4px; align-items: start; } html[data-bp2="on"] .acc-hero .svc-hero-tri { align-self: center; } html[data-bp2="on"] .acc-hero + .section--white { padding-top: 64px; } /* Soften the hero-to-white join: the white section fades up out of the page wash. */ html[data-bp2="on"] .acc-hero + .section--white { background: linear-gradient(180deg, rgba(255,255,255,0) 0, #fff 180px); } html[data-bp2="on"] .acc-hero + .section--white .section-head { margin-bottom: 24px; } /* The two-ways-in section closes on nothing, so the dark band's join was doubling padding. */ html[data-bp2="on"] .section--paper:has(.build-band) { padding-top: 24px; } html[data-bp2="on"] .section--paper:has(.atb) { padding-top: 32px; } html[data-bp2="on"] .section--white:has(.build-gal) { padding-top: 32px; } /* Two-ways-in and "an accelerator might be" are both white; their paddings stacked. */ html[data-bp2="on"] .section--white:has(.rcards) { padding-bottom: 56px; } html[data-bp2="on"] .section--white:has(.wbh) { padding-top: 88px; } /* --------------------------------------------------------------- Home consistency pass (Tweaks: "Home: consistency"). One statement voice, one label voice, one soft edge, one button. ---------------------------------------------------------------- */ /* 1. Statements share a single type rule: light weight, italic accent clause. */ html[data-bp2="on"][data-homealign="aligned"] .philosophy-quote{padding-left:0;font-weight:300;font-size:clamp(21px,2.4vw,30px);line-height:1.4;letter-spacing:-.024em;max-width:34ch} html[data-bp2="on"][data-homealign="aligned"] .philosophy-quote::before{display:none} html[data-bp2="on"][data-homealign="aligned"] .home-philosophy--solo .philosophy-quote{max-width:34ch} html[data-bp2="on"][data-homealign="aligned"] .home-close-title{font-weight:300;letter-spacing:-.028em;line-height:1.14;font-size:clamp(36px,4.2vw,56px)} html[data-bp2="on"][data-homealign="aligned"] .home-close-title em{font-style:italic;font-weight:400} html[data-bp2="on"][data-homealign="aligned"] .wwa-dark-q, html[data-bp2="on"][data-homealign="aligned"] .wwa-cols-q, html[data-bp2="on"][data-homealign="aligned"] .wwa-flip-pos{line-height:1.4;letter-spacing:-.024em} html[data-bp2="on"][data-homealign="aligned"] .wwa-dark-q em, html[data-bp2="on"][data-homealign="aligned"] .wwa-cols-q em, html[data-bp2="on"][data-homealign="aligned"] .wwa-flip-pos em{font-style:italic;font-weight:400} /* 2. One label voice: the eyebrow. The grey strip labels join it. */ html[data-bp2="on"][data-homealign="aligned"] .logo-strip-label{color:var(--ia-blue);font-size:12px;font-weight:600;letter-spacing:.14em} html[data-bp2="on"][data-homealign="aligned"] .badge-cap b{letter-spacing:.14em} /* 3. One soft edge. The hero curve is the signature; the closing band cuts flat. */ html[data-bp2="on"][data-homealign="aligned"] .home-close-curve{display:none} html[data-bp2="on"][data-homealign="aligned"] .home-close{padding-top:104px} /* 4. One button. The closing CTA takes the standard on-dark pill. */ html[data-bp2="on"][data-homealign="aligned"] .home-close-cta{font-size:16px;font-weight:600;padding:14px 26px;border-radius:999px;letter-spacing:0;box-shadow:none} html[data-bp2="on"][data-homealign="aligned"] .home-close-cta:hover{transform:none;box-shadow:0 10px 26px rgba(75,228,248,.22)} /* Consistency pass, part two: one alignment rule and three grounds. */ /* 5. Everything reads off the same left margin. The page stops re-centring. */ /* The big statements are the one thing that centres — thesis, "What we are", close. */ html[data-bp2="on"][data-homealign="aligned"] .thesis-head{text-align:center} html[data-bp2="on"][data-homealign="aligned"] .thesis-head .eyebrow{justify-content:center} html[data-bp2="on"][data-homealign="aligned"] .thesis-head .eyebrow:before{display:none} html[data-bp2="on"][data-homealign="aligned"] .thesis-statement{margin-left:auto;margin-right:auto;max-width:42ch} html[data-bp2="on"][data-homealign="aligned"] .home-philosophy--solo{text-align:center} html[data-bp2="on"][data-homealign="aligned"] .home-philosophy--solo .eyebrow{justify-content:center} html[data-bp2="on"][data-homealign="aligned"] .home-philosophy--solo .eyebrow:before{display:none} html[data-bp2="on"][data-homealign="aligned"] .home-philosophy--solo .philosophy-quote{margin-left:auto;margin-right:auto;max-width:42ch} html[data-bp2="on"][data-homealign="aligned"] .wwa-cols{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px} html[data-bp2="on"][data-homealign="aligned"] .wwa-cols-q{max-width:32ch} html[data-bp2="on"][data-homealign="aligned"] .wwa-flip{max-width:none;text-align:center} html[data-bp2="on"][data-homealign="aligned"] .wwa-flip-rule{margin-left:auto;margin-right:auto} html[data-bp2="on"][data-homealign="aligned"] .wwa-flip-pos{max-width:32ch;margin-left:auto;margin-right:auto} html[data-bp2="on"][data-homealign="aligned"] .wwa-dark .container{text-align:center} html[data-bp2="on"][data-homealign="aligned"] .wwa-dark .eyebrow{justify-content:center} html[data-bp2="on"][data-homealign="aligned"] .wwa-dark .eyebrow:before{display:none} html[data-bp2="on"][data-homealign="aligned"] .wwa-dark-q{margin-left:auto;margin-right:auto;max-width:32ch} html[data-bp2="on"][data-homealign="aligned"] .logo-strip-label-row{justify-content:center;text-align:center} html[data-bp2="on"][data-homealign="aligned"] .recognition--row{justify-content:flex-start} /* 6. Three grounds, four zones: white intro, the doors, paper proof, navy close. */ html[data-bp2="on"][data-homealign="aligned"] .logo-strip-band{background:#fff} html[data-bp2="on"][data-homealign="aligned"] .section--paper:has(.thesis-head){background:#fff} html[data-bp2="on"][data-homealign="aligned"] .section--white:has(.philosophy-quote), html[data-bp2="on"][data-homealign="aligned"] .section--white:has(.wwa-cols), html[data-bp2="on"][data-homealign="aligned"] .section--white:has(.wwa-flip){background:var(--paper)} /* 7. Two type voices only: headings at 600, statements at 300. */ /* Recognition: one quiet row, no label, no rule of its own — the closer carries the rule. */ html[data-bp2="on"][data-homealign="aligned"] .recognition--row{border-top:0;padding-top:0;margin-top:34px;gap:44px;justify-content:flex-start;align-items:center} html[data-bp2="on"][data-homealign="aligned"] .recognition--row .logo-strip-label{display:none} html[data-bp2="on"][data-homealign="aligned"] .recognition--row .badge-row{flex-wrap:nowrap;gap:44px} html[data-bp2="on"][data-homealign="aligned"] .recognition--row .badge-item img{height:60px} html[data-bp2="on"][data-homealign="aligned"] .recognition--row .badge-cap{font-size:14px;max-width:22ch} html[data-bp2="on"][data-homealign="aligned"] .recognition--row .badge-cap-awards{font-size:12px} @media (max-width:760px){html[data-bp2="on"][data-homealign="aligned"] .recognition--row .badge-row{flex-wrap:wrap;gap:22px}} html[data-bp2="on"] .nav-brand::after{content:none;display:none} /* ============================================================ Our Work — light hero stage, corridor of engagements. Paper ground, dark cards, no scrim. The wings start folded near the headline and open as the visitor scrolls (--open, set in WorkV2.jsx). ============================================================ */ .tilt-stage { --mx: 0; --my: 0; } html[data-bp2="on"] .hero.wk-stage { position: relative; padding: 56px 0 28px; overflow: hidden; background: var(--paper); color: var(--ink); } html[data-bp2="on"] .wk-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(0,26,85,.08) 1px, transparent 1px); background-size: 22px 22px; opacity: 1; pointer-events: none; } html[data-bp2="on"] .wk-stage::after { display: none; } html[data-bp2="on"] .wk-stage-inner { position: relative; z-index: 5; } /* The stage keeps .hero--slab for its layout, but that class tints crumbs white for a dark ground — restate the standard light-background colours. */ html[data-bp2="on"] .wk-stage .crumbs, html[data-bp2="on"] .wk-stage .crumbs .crumb-link { color: #9BA0AE; } html[data-bp2="on"] .wk-stage .crumbs .crumb-link:hover { color: var(--ia-blue); } html[data-bp2="on"] .wk-stage .crumbs strong { color: var(--ink); } html[data-bp2="on"] .wk-stage .crumbs .sep { color: #C7CCD8; } html[data-bp2="on"] .wk-stage-copy { position: relative; z-index: 5; max-width: 560px; margin: 0 auto; text-align: center; padding: 89px 0 11px; } html[data-bp2="on"] .wk-stage-copy .h-display { margin: 0; font-weight: 600; letter-spacing: -.028em; color: var(--ia-dark-blue); font-size: clamp(36px,3.9vw,54px); } html[data-bp2="on"] .wk-stage-copy .h-display em { color: var(--ia-blue); font-style: italic; font-weight: 700; text-decoration: none; } html[data-bp2="on"] .wk-stage-copy .lede { margin: 484px auto 0; max-width: 100%; color: #4A5163; font-size: 18px; font-weight: 300; line-height: 1.4; text-align: center; } html[data-bp2="on"] .wk-corridor { position: absolute; inset: 0; z-index: 1; perspective: 900px; perspective-origin: 50% 50%; transform-style: preserve-3d; --open: 0; } html[data-bp2="on"] .wk-corr-card { position: absolute; left: calc(50% + var(--x) * (0.86 + var(--open) * 0.14)); top: 50%; width: 262px; height: 392px; margin: -196px 0 0 -131px; padding: 0; border: 0; border-radius: 2px; overflow: hidden; cursor: pointer; background: #0B1B3F; box-shadow: 0 18px 40px -26px rgba(0,26,85,.5); opacity: var(--op, 1); transform: translate3d(calc(var(--mx) * var(--pz) * 20px), calc(var(--my) * var(--pz) * 11px + var(--lift, 0px) + var(--fy, 0px)), calc(var(--z) * (1 - var(--open) * 0.22))) rotateY(calc(var(--rot) * (0.62 + var(--open) * 0.38))) scale(var(--s)); transition: transform .18s linear, left .18s linear, opacity .35s ease, box-shadow .35s ease; } html[data-bp2="on"] .wk-corr-card:hover { --lift: -12px; opacity: 1; box-shadow: 0 0 0 1px rgba(0,90,255,.4), 0 34px 62px -24px rgba(0,26,85,.5); } html[data-bp2="on"] .wk-corr-card img { width: 100%; height: 100%; object-fit: cover; display: block; } html[data-bp2="on"] .wk-corr-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(rgba(3,12,36,0), rgba(3,12,36,.78)); pointer-events: none; } html[data-bp2="on"] .wk-corr-cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; max-width: 76%; text-align: left; font-family: var(--font-display); font-size: 14px; line-height: 1.25; color: #fff; text-shadow: 0 1px 6px rgba(0,8,32,.6); } html[data-bp2="on"] .wk-corr-cap span { display: block; margin-top: 3px; font-family: var(--font-body, inherit); font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.62); } @media (max-width: 1100px) { html[data-bp2="on"] .wk-corr-card { left: calc(50% + var(--x) * (0.62 + var(--open) * 0.1)); } html[data-bp2="on"] .wk-corr-card { transform: translate3d(calc(var(--mx) * var(--pz) * 12px), calc(var(--my) * var(--pz) * 7px + var(--lift, 0px) + var(--fy, 0px)), calc(var(--z) * (1 - var(--open) * 0.22))) rotateY(calc(var(--rot) * (0.62 + var(--open) * 0.38))) scale(calc(var(--s) * .68)); } html[data-bp2="on"] .wk-stage-copy { padding: 58px 0 12px; } html[data-bp2="on"] .wk-stage-copy .lede { margin-top: 396px; } } @media (max-width: 760px) { html[data-bp2="on"] .wk-corridor { display: none; } html[data-bp2="on"] .wk-stage-copy { padding: 18px 0 26px; text-align: left; margin: 0; max-width: 620px; } html[data-bp2="on"] .wk-stage-copy .lede { margin-top: 20px; } } @media (prefers-reduced-motion: reduce) { html[data-bp2="on"] .wk-corr-card { transition: none; } } /* ---- Work hero motion modes (Tweaks: Work: hero motion) ---- */ html[data-bp2="on"] .wk-motion--deal .wk-corr-card:nth-child(1), html[data-bp2="on"] .wk-motion--deal .wk-corr-card:nth-child(6) { --i: 0 } html[data-bp2="on"] .wk-motion--deal .wk-corr-card:nth-child(2), html[data-bp2="on"] .wk-motion--deal .wk-corr-card:nth-child(5) { --i: 1 } html[data-bp2="on"] .wk-motion--deal .wk-corr-card:nth-child(3), html[data-bp2="on"] .wk-motion--deal .wk-corr-card:nth-child(4) { --i: 2 } @keyframes wk-deal { from { opacity: 0; transform: translate3d(0, 30px, -760px) rotateY(0deg) scale(.35); } to { opacity: var(--op); transform: translate3d(0, 0, var(--z)) rotateY(var(--rot)) scale(var(--s)); } } html[data-bp2="on"] .wk-motion--deal .wk-corr-card { animation: wk-deal 1.15s cubic-bezier(.16,.84,.28,1) backwards; animation-delay: calc(.2s + (2 - var(--i)) * .18s); } @property --fy { syntax: ''; inherits: false; initial-value: 0px } @keyframes wk-float { 0% { --fy: 0px } 50% { --fy: -30px } 100% { --fy: 0px } } html[data-bp2="on"] .wk-motion--float .wk-corr-card { animation: wk-float var(--dur, 5s) ease-in-out infinite; } html[data-bp2="on"] .wk-motion--float .wk-corr-card:nth-child(1) { --dur: 4.6s; animation-delay: 0s } html[data-bp2="on"] .wk-motion--float .wk-corr-card:nth-child(2) { --dur: 5.4s; animation-delay: -1.9s } html[data-bp2="on"] .wk-motion--float .wk-corr-card:nth-child(3) { --dur: 4.2s; animation-delay: -3.8s } html[data-bp2="on"] .wk-motion--float .wk-corr-card:nth-child(4) { --dur: 5.8s; animation-delay: -5.7s } html[data-bp2="on"] .wk-motion--float .wk-corr-card:nth-child(5) { --dur: 4.8s; animation-delay: -2.6s } html[data-bp2="on"] .wk-motion--float .wk-corr-card:nth-child(6) { --dur: 6.2s; animation-delay: -4.4s } html[data-bp2="on"] .wk-motion--hover:hover .wk-corr-card { opacity: .4; } html[data-bp2="on"] .wk-motion--hover .wk-corr-card:hover { opacity: 1; z-index: 9; transform: translate3d(calc(var(--mx) * var(--pz) * 20px), calc(var(--my) * var(--pz) * 11px - 16px), calc(var(--z) + 120px)) rotateY(calc(var(--rot) * .45)) scale(calc(var(--s) * 1.06)); } html[data-bp2="on"] .wk-motion--hover .wk-corr-card { transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease, box-shadow .3s ease; } @media (prefers-reduced-motion: reduce) { html[data-bp2="on"] .wk-motion--deal .wk-corr-card, html[data-bp2="on"] .wk-motion--float .wk-corr-card { animation: none } } /* ---- stream: an endless outward conveyor. Geometry is set per frame in WorkV2.jsx so the panels stay butted together as they grow; CSS only handles the look: square corners, no shadow, no captions. ---- */ html[data-bp2="on"] .wk-motion--stream { perspective: none; } html[data-bp2="on"] .wk-motion--stream .wk-corr-card { left: 50%; top: 50%; opacity: 0; border-radius: 0; box-shadow: none; transition: none; animation: none; transform-origin: 50% 50%; } html[data-bp2="on"] .wk-motion--stream .wk-corr-card::after { display: none; } html[data-bp2="on"] .wk-motion--stream .wk-corr-cap { display: none; } /* In stream mode the band runs between the headline and the lede, as in the reference, rather than straight through the paragraph. */ @media (max-width: 1100px) { } /* ---- chained ribbon: the small waist tiles crop square and lose the caption gradient, so the centre of the corridor reads as a band of blocks ---- */ html[data-bp2="on"] .wk-corr-card--tile::after { display: none; } html[data-bp2="on"] .wk-corr-card--tile { border-radius: 2px; } html[data-bp2="on"] .wk-corridor { perspective: 980px; } /* ---- stream entry: the band starts as a small cluster at the centre, bursts outward to full width, then eases into the slow conveyor. The copy arrives after it, headline first. ---- */ @keyframes wk-burst { 0% { scale: .07; opacity: 0 } 8% { opacity: 1 } 22% { scale: .07 } 78% { scale: 1.035 } 100% { scale: 1 } } @keyframes wk-copy-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } html[data-bp2="on"] .wk-motion--stream { animation: wk-burst 1.25s cubic-bezier(.22,.8,.3,1) backwards; } html[data-bp2="on"] .wk-stage--stream .wk-stage-copy .h-display { animation: wk-copy-in .62s cubic-bezier(.2,.8,.3,1) .62s backwards; } html[data-bp2="on"] .wk-stage--stream .wk-stage-copy .lede { animation: wk-copy-in .62s cubic-bezier(.2,.8,.3,1) .82s backwards; } @media (prefers-reduced-motion: reduce) { html[data-bp2="on"] .wk-motion--stream, html[data-bp2="on"] .wk-stage--stream .wk-stage-copy .h-display, html[data-bp2="on"] .wk-stage--stream .wk-stage-copy .lede { animation: none } } /* ---- Fan: overlapping panels rising from the bottom edge ---- */ html[data-bp2="on"] .hero.wk-stage--fan { padding-top: 72px; padding-bottom: 0; min-height: 724px; } html[data-bp2="on"] .wk-stage--fan .wk-stage-copy { padding: 24px 0 0; max-width: 900px; } html[data-bp2="on"] .wk-stage--fan .wk-stage-copy .lede { margin-top: 22px; font-size: 25px; line-height: 1.4; max-width: 820px; margin-left: auto; margin-right: auto; } html[data-bp2="on"] .wk-motion--fan { perspective: 1600px; perspective-origin: 50% 100%; } html[data-bp2="on"] .wk-fan-face { position: absolute; left: 50%; top: auto; bottom: -74px; width: 300px; height: 400px; margin: 0 0 0 -150px; border-radius: 26px; opacity: 1; filter: none; transform: translate3d(calc(var(--x) + var(--mx) * var(--pz) * 16px), calc(var(--y) + var(--my) * var(--pz) * 8px + var(--lift, 0px)), 0) rotate(var(--rot)); animation: wk-fan-rise .9s cubic-bezier(.18,.85,.26,1) backwards; animation-delay: calc(var(--i) * .07s); } html[data-bp2="on"] .wk-fan-face:hover { --lift: -26px; z-index: 20; } html[data-bp2="on"] .wk-stage--fan .wk-corr-card::after { height: 62%; } @keyframes wk-fan-rise { from { opacity: 0; transform: translate3d(calc(var(--x) * .55), 190px, 0) rotate(calc(var(--rot) * .3)) } } html[data-bp2="on"] .wk-stage--fan .wk-corr-cap { left: 22px; bottom: 152px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; } html[data-bp2="on"] .wk-stage--fan .wk-corr-cap span { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.7); } @media (max-width: 1100px) { html[data-bp2="on"] .wk-fan-face { width: 244px; height: 326px; margin-left: -122px; bottom: -58px; transform: translate3d(calc(var(--x) * .74 + var(--mx) * var(--pz) * 12px), calc(var(--y) + var(--my) * var(--pz) * 6px + var(--lift, 0px)), 0) rotate(var(--rot)); } html[data-bp2="on"] .hero.wk-stage--fan { min-height: 616px; } html[data-bp2="on"] .wk-stage--fan .wk-stage-copy { padding-top: 24px; } html[data-bp2="on"] .wk-stage--fan .wk-corr-cap { bottom: 130px; } } @media (max-width: 760px) { html[data-bp2="on"] .hero.wk-stage--fan { min-height: 0; } } @media (prefers-reduced-motion: reduce) { html[data-bp2="on"] .wk-fan-face { animation: none } } /* ============================================================ Photo-field home hero (v3, html[data-hero="photo"]) — C1 "light and airy": full-bleed photo slot under a paper scrim, centred statement, white curve into the logo strip. Nav picks up the brand-blue pill treatment sitewide. ============================================================ */ .hero--photo { padding: 0 !important; position: relative; overflow: hidden; min-height: 92vh; display: flex; flex-direction: column; background: radial-gradient(120% 90% at 50% -20%, #E7EBFA 0%, #F6F7FA 55%, #FDFDFE 86%, #fff 100%); } .hero--photo .hp-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 160px 48px 120px; pointer-events: none; } .hero--photo .hp-body .cta-row { pointer-events: auto; justify-content: center; } html[data-bp="on"] .hero--photo .h-display { color: #0B1024; font-size: clamp(48px, 6.6vw, 92px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin: 0 auto; max-width: 16ch; } html[data-bp="on"] .hero--photo .h-display em, html[data-bp="on"] .hero--photo .h-display .hand { background: none; padding: 0; color: #0B1024; font-style: normal; font-weight: 600; } .hero--photo .lede { color: #2A3044; margin-top: 22px; font-size: clamp(16px, 1.4vw, 20px); max-width: 52ch; } .hero--photo .cta-row { margin-top: 36px; } .hero--photo .cta-row .btn { padding: 15px 26px; } /* Staggered entrance: lines rise in sequence, then the pen underlines "simplified" */ .hero--photo .h-display .ln { display: block; opacity: 0; transform: translateY(26px); animation: hp-rise .8s cubic-bezier(.2,.8,.2,1) forwards; } .hero--photo .h-display .ln:nth-child(2) { animation-delay: .14s; } .hero--photo .h-display .ln:nth-child(3) { animation-delay: .28s; } .hero--photo .lede, .hero--photo .cta-row { opacity: 0; animation: hp-rise .8s cubic-bezier(.2,.8,.2,1) forwards; } .hero--photo .lede { animation-delay: 2.4s; } .hero--photo .cta-row { animation-delay: 2.56s; } @keyframes hp-rise { to { opacity: 1; transform: translateY(0); } } .hero--photo .h-display .ln:nth-child(2) { z-index: 2; } /* Poster-style scatter: the IA capability icons drifting at the hero's edges */ .hero--photo .hp-scatter { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hero--photo .sc { position: absolute; opacity: 0; animation: hp-rise 1s cubic-bezier(.2,.8,.2,1) forwards; } .hero--photo .sc img { display: block; width: 100%; height: auto; } .hero--photo .sc-1 { width: 190px; left: -56px; top: 22%; animation-delay: .9s; transform: rotate(-12deg); } .hero--photo .sc-2 { width: 150px; right: -44px; top: 12%; animation-delay: 1.2s; transform: rotate(10deg); } .hero--photo .sc-3 { width: 170px; right: 16%; bottom: 40px; animation-delay: 1.05s; transform: rotate(-7deg); } @media (max-width: 900px) { .hero--photo .sc { display: none; } } @media (prefers-reduced-motion: reduce) { .hero--photo .sc { opacity: 1; animation: none; } } /* Ghosted scatter (tweak): faint, larger, drifting behind the headline instead of at the edges */ .hero--photo .hp-scatter--ghost .sc { animation-name: hp-rise-ghost; } @keyframes hp-rise-ghost { to { opacity: var(--o, 1); transform: translateY(0) rotate(var(--rot, 0deg)); } } .hero--photo .hp-scatter--ghost .sc-1 { width: 270px; left: 14%; right: auto; top: 12%; bottom: auto; --o: .16; --rot: -10deg; transform: translateY(26px) rotate(-10deg); } .hero--photo .hp-scatter--ghost .sc-2 { width: 220px; right: 16%; left: auto; top: 44%; bottom: auto; --o: .14; --rot: 8deg; transform: translateY(26px) rotate(8deg); } .hero--photo .hp-scatter--ghost .sc-3 { width: 240px; left: 32%; right: auto; top: auto; bottom: -40px; --o: .15; --rot: -6deg; transform: translateY(26px) rotate(-6deg); } @media (prefers-reduced-motion: reduce) { .hero--photo .hp-scatter--ghost .sc { opacity: var(--o, 1); } } .hero--photo .hand { position: relative; font-style: normal; display: inline-block; } .hero--photo .hand svg { position: absolute; left: -.06em; right: -.1em; bottom: -.16em; width: calc(100% + .16em); height: .24em; overflow: visible; pointer-events: none; } .hero--photo .hand path { fill: none; stroke: var(--ia-blue); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; animation: hp-pen .85s cubic-bezier(.45,.05,.35,1) 1.05s forwards; } @keyframes hp-pen { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .hero--photo .h-display .ln, .hero--photo .lede, .hero--photo .cta-row { opacity: 1; transform: none; animation: none; } .hero--photo .hand path { opacity: 1; stroke-dashoffset: 0; animation: none; } } @media (max-width: 760px) { .hero--photo { min-height: 68vh; } } /* Home defines the bar: floats over the sky wash, extra breathing room on top. Subpages copy it exactly — same position-in-flow, same wash behind, so nothing moves between routes. */ html[data-hero="photo"] .nav { position: static; background: transparent; backdrop-filter: none; border-bottom: 0; padding-top: 14px; } html[data-photohome="on"] .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; } /* Subpages blend into the bar like home: the wash is painted once at the top of the page, the nav floats transparent over it, content fades to paper beneath. */ html[data-hero="photo"]:not([data-photohome="on"]) .nav { background: transparent; } /* Sticky in-page bars assumed a 68px sticky nav; with the transparent scrolled-away nav they stick to the top edge. */ .wk-filterbar{position:sticky;top:68px;z-index:20;background:rgba(250,250,247,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--hairline)} html[data-hero="photo"] .wk-filterbar{top:0} html[data-hero="photo"] .gov-subnav{top:0} html[data-hero="photo"]:not([data-photohome="on"]) body { background: radial-gradient(120% 90% at 50% -20%, #E7EBFA 0%, #F6F7FA 55%, #FBFBF9 100%) top center / 100% 92vh no-repeat, var(--paper); } /* Subpage heroes paint paper + dots over the wash — drop both so the wash runs clean */ html[data-hero="photo"]:not([data-photohome="on"]) .hero.dot-grid { background: none; } /* Work stage paints its own paper + dot grid — drop both too so the nav sits on the same wash */ html[data-hero="photo"]:not([data-photohome="on"]) .hero.wk-stage { background: transparent; } html[data-hero="photo"]:not([data-photohome="on"]) .wk-stage::before { display: none; } /* Case-detail top sits on the page wash so the transparent nav matches it */ html[data-hero="photo"] .wk-detail-top,html[data-hero="photo"] .wk-detail-hero{background:transparent} /* Brand-blue pill nav (photo-hero build only) */ html[data-hero="photo"] .nav-links { gap: clamp(4px, .55vw, 9px); } html[data-hero="photo"] .nav-links .nav-link { border: 0; background: none; color: var(--ink, #0B1024); border-radius: 999px; padding: 8px clamp(9px, .95vw, 13px); font-weight: 500; font-size: clamp(12.5px, .95vw, 15px); } html[data-hero="photo"] .nav-links .nav-link:hover { background: var(--ia-blue-50); color: var(--ia-blue); } html[data-hero="photo"] .nav-links .nav-link.active { background: var(--ia-blue-50); color: var(--ia-blue); } html[data-hero="photo"] .nav-inner { height: auto; padding-block: 24px; } html[data-hero="photo"] .nav-logo { height: clamp(26px, 2.4vw, 34px); } html[data-hero="photo"] .nav-cta .btn { font-weight: 600; } html[data-hero="photo"] .nav-playground { font-size: clamp(12.5px, 1vw, 14px); font-weight: 600; padding: 9px 16px; } /* Below-hero tweak variants (Home) */ .bh-lbl { display: block; text-align: center; font-size: 12px; font-weight: 600; letter-spacing:.01em; color: #9BA0AE; } .bh-quiet { padding: 36px 0 40px; border-bottom: 1px solid #EFEFEA; background: #fff; } .bh-quiet .bh-lbl { margin-bottom: 22px; } .bh-row { display: flex; justify-content: center; align-items: center; gap: 44px; flex-wrap: wrap; padding: 0 32px; } .bh-slot { border: 0; background: none; padding: 0; cursor: pointer; } .bh-slot image-slot { display: block; width: 132px; height: 48px; filter: grayscale(1); opacity: .72; transition: filter .3s, opacity .3s; } .bh-slot:hover image-slot { filter: none; opacity: 1; } .bh-row--sm .bh-slot image-slot { width: 116px; height: 42px; } .bh-sectors { padding: 26px 32px; border-bottom: 1px solid #EFEFEA; background: #fff; display: flex; justify-content: center; align-items: baseline; gap: 12px 28px; flex-wrap: wrap; } .bh-sectors .bh-lbl { display: inline; } .bh-sector-row { display: inline-flex; align-items: baseline; gap: 0 28px; flex-wrap: wrap; } .bh-sector { font-size: 14px; font-weight: 600; color: var(--ia-dark-blue); letter-spacing: .02em; } .bh-sector + .bh-sector::before { content: "·"; color: #B9BEC9; margin-right: 28px; font-weight: 400; } .thesis-head--center { text-align: center; margin-inline: auto; } .thesis-head--center .eyebrow { justify-content: center; } .thesis-head--center .eyebrow::before { display: none; } .thesis-head--center .thesis-statement { margin-inline: auto; } .bh-inline-logos { margin-top: 52px; padding-top: 36px; border-top: 1px solid #EFEFEA; } .bh-inline-logos .bh-lbl { margin-bottom: 16px; } .bh-inhero { position: relative; z-index: 1; padding: 0 32px 44px; pointer-events: auto; } .bh-inhero .bh-lbl { margin-bottom: 18px; opacity: 0; animation: hp-rise .8s cubic-bezier(.2,.8,.2,1) 2.4s forwards; } .bh-inhero .bh-row { opacity: 0; animation: hp-rise .8s cubic-bezier(.2,.8,.2,1) 2.5s forwards; } .bh-awards { padding: 30px 32px 34px; border-bottom: 1px solid #EFEFEA; background: #fff; text-align: center; } .bh-awards .bh-lbl { margin-bottom: 18px; } .bh-awards-row { display: flex; justify-content: center; align-items: center; gap: 40px; } .bh-awards-row img { height: 88px; width: auto; } /* Where-to-start statement voices (Home tweak) */ .thesis-head--weighted .thesis-statement { color: #3A4054; } .thesis-head--weighted .thesis-statement b { font-weight: 600; color: var(--ia-dark-blue); } .thesis-head--weighted .thesis-statement em { font-style: normal; font-weight: 600; color: var(--ia-blue); display: block; margin-top: 18px; font-size: .72em; letter-spacing: -.01em; } .thesis-sub { margin: 22px auto 0; font-size: 17px; line-height: 1.65; font-weight: 400; color: #5C6172; max-width: 56ch; } .hand--thesis { position: relative; font-style: normal; display: inline-block; } .hand--thesis svg { position: absolute; left: -.06em; right: -.1em; bottom: -.14em; width: calc(100% + .16em); height: .22em; overflow: visible; pointer-events: none; } .hand--thesis path { fill: none; stroke: var(--ia-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } .thesis-head--marked.thesis-in .hand--thesis path { animation: hp-pen .7s cubic-bezier(.45,.05,.35,1) .4s forwards; } @media (prefers-reduced-motion: reduce) { .hand--thesis path { opacity: 1; stroke-dashoffset: 0; animation: none !important; } } /* Thesis, designed: centred on the page's axis like the hero, three things on a hairline rail */ .thesis-head.thesis-head--built { text-align: center; margin-bottom: 72px; } .thesis-head.thesis-head--built .h-section { margin: 14px auto 0; text-align: center; } .thesis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; } .th-col { display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 1px solid var(--hairline); padding-top: 18px; text-align: center; } .th-col b { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ia-blue); } .th-word { font-size: 20px; font-weight: 600; color: var(--ia-dark-blue); letter-spacing: -.01em; } .th-clause { font-size: 15px; line-height: 1.55; color: #5C6172; max-width: 30ch; margin-inline: auto; } .thesis-head.thesis-head--built .thesis-foot { margin: 40px 0 0; font-size: 16px; color: #5C6172; text-align: center; } @media (max-width: 860px) { .thesis-grid { grid-template-columns: 1fr; gap: 18px; } } @media (prefers-reduced-motion: reduce) { .bh-inhero .bh-lbl, .bh-inhero .bh-row { opacity: 1; animation: none; } } /* How we work — the "What we believe" heading held in the left margin while the three beliefs scroll past it. Same register as the values band below. */ /* No align-items:start — the head must stretch to the row height so the sticky child has the full scroll distance of the beliefs to travel. */ .jpin{display:grid;grid-template-columns:380px 1fr;gap:72px} .jpin-stick{position:sticky;top:112px} .jpin-head .h-section{margin:10px 0 0;font-size:clamp(34px,3.4vw,52px);line-height:1.08} /* Each belief is a ruled row: the statement holds the left, the reasoning sits in a narrower column to its right. */ .jpin .believe{margin-top:0;display:block} .jpin .blf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;padding:44px 0;border-top:1px solid rgba(0,26,85,.18);border-bottom:0;background:none;border-radius:0} .jpin .blf:last-child{border-bottom:1px solid rgba(0,26,85,.18)} .jpin .blf-big{margin:0;font-size:clamp(26px,2.1vw,34px);font-weight:400;line-height:1.16;letter-spacing:-.02em;max-width:16ch} /* Row 1's tone equals the base text colour, so weight carries the emphasis. */ .jpin .blf-big strong{font-weight:600;color:var(--bl)} .jpin .blf-col{display:flex;flex-direction:column;gap:18px;align-items:flex-start} .jpin .blf-sm{margin:0;font-size:16px;line-height:1.65;max-width:44ch} @media (max-width:1000px){ .jpin{grid-template-columns:minmax(0,1fr);gap:26px} .jpin-stick{position:static} .jpin .blf{grid-template-columns:minmax(0,1fr);gap:16px;padding:30px 0} .jpin .blf-big{max-width:none} } /* How we work v3 — the journey as a horizontal stepper. All four bodies stay in the DOM (grid-stacked, so the panel height never jumps); one faces the reader at a time, which stops the section reading as a wall before the beliefs manifesto below. */ .jrny{margin-top:30px} .jrny-rail{display:grid;grid-template-columns:repeat(4,1fr);position:relative} .jrny-rail::before{content:"";position:absolute;left:12.5%;right:12.5%;top:22px;height:2px;background:linear-gradient(90deg,#001A55,#00655F,#0119B7,#0A6C7D);opacity:.3} .jrny-tab{appearance:none;background:none;border:0;font:inherit;cursor:pointer;padding:0 14px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;position:relative} .jrny-num{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--jt);color:var(--jt);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;transition:background .2s var(--ease-standard),color .2s,box-shadow .2s} .jrny-tab.is-on .jrny-num{background:var(--jt);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--jt) 12%,transparent)} .jrny-tab:hover .jrny-num{box-shadow:0 0 0 6px color-mix(in srgb,var(--jt) 10%,transparent)} .jrny-nm{font-size:16px;font-weight:500;line-height:1.35;color:#5C6172;letter-spacing:-.01em;transition:color .2s} .jrny-tab.is-on .jrny-nm,.jrny-tab:hover .jrny-nm{color:var(--ink)} .jrny-tab.is-on .jrny-nm{font-weight:600} .jrny-panels{display:grid;margin-top:40px} .jrny-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .26s var(--ease-standard),transform .26s var(--ease-standard),visibility .26s;border-left:3px solid var(--jt);padding:2px 0 2px 30px} .jrny-p.is-on{opacity:1;visibility:visible;transform:none} .jrny-h{margin:0 0 10px;font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--ink)} .jrny-p p{margin:0;font-size:18px;line-height:1.7;color:#454B5E;max-width:76ch;text-wrap:pretty} @media (max-width:820px){ .jrny-rail{grid-template-columns:minmax(0,1fr)} .jrny-rail::before{display:none} .jrny-tab{flex-direction:row;gap:16px;text-align:left;padding:14px 0;border-top:1px solid rgba(0,26,85,.12)} .jrny-tab:last-child{border-bottom:1px solid rgba(0,26,85,.12)} .jrny-num{width:38px;height:38px;font-size:16px;flex:0 0 auto} .jrny-panels{margin-top:26px} .jrny-p{padding-left:20px} } /* The beliefs are the counterweight to the pinned journey above: static, all three at once, nothing revealing itself. Statement holds the left, reasoning to its right, full width under a normal section head. */ .believe--flat{display:block;margin-top:0} .believe--flat .blf{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start;padding:40px 0;border-top:1px solid rgba(0,26,85,.18);border-bottom:0;background:none;border-radius:0} .believe--flat .blf:last-child{border-bottom:1px solid rgba(0,26,85,.18)} .believe--flat .blf-big{margin:0;font-size:clamp(26px,2.1vw,34px);font-weight:400;line-height:1.16;letter-spacing:-.02em;max-width:18ch;color:var(--ia-dark-blue)} .believe--flat .blf-big strong{font-weight:600;color:var(--bl)} .believe--flat .blf-col{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .believe--flat .blf-sm{margin:0;font-size:16px;line-height:1.68;color:#5C6172;max-width:46ch} @media (max-width:1000px){ .believe--flat .blf{grid-template-columns:minmax(0,1fr);gap:16px;padding:30px 0} .believe--flat .blf-big{max-width:none} } /* Journey option "pinned": the section holds while the steps cross-fade. */ .pin-wrap{height:240vh;position:relative} /* The pinned stage fills the viewport below the fixed nav and centres its content, rather than being a 420px box stuck near the top -- that left a ~730px void underneath on a tall screen. Making it one viewport tall also matches what JourneyPinned assumes when it derives progress from (wrapHeight - innerHeight): previously the four numbers finished cycling ~730px before the section released, so you sat on '4' staring at nothing. */ /* One fixed position for the whole pin -- nothing moves as you scroll. The group is top-aligned with a modest offset rather than centred: centring in a full-height stage put 264px of it above the text, which read as a hole between the hero and the journey. --pin-offset is the only knob; it is a padding rather than a centring trick so it can never clip on a short window. */ /* Height follows the content, NOT the viewport. A sticky box comes to rest against the bottom of its scroll container, so a full-height stage parked 740px of its own empty space between the last step and the next section. JourneyPinned derives the pin length from this height, so the two stay in step whatever it is. */ .pin-stage{position:sticky;top:68px;--pin-offset:clamp(8px,5vh,80px); display:flex;flex-direction:column;padding-top:var(--pin-offset)} .pin-inner{display:flex;flex-direction:column;gap:44px} .pin-head{margin:0} .pin-body{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center} .pin-num{position:relative;width:190px;height:190px} .pin-num > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:150px;font-weight:700;letter-spacing:-.06em;line-height:1;color:var(--jt);opacity:0;transform:translateY(26px) scale(.94);transition:opacity .5s var(--ease-standard),transform .5s var(--ease-standard)} .pin-num > span.is-on{opacity:.16;transform:none} .pin-panels{position:relative;min-height:230px} .pin-p{position:absolute;inset:0;opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease-standard),transform .5s var(--ease-standard);display:flex;flex-direction:column;justify-content:center} .pin-p.is-on{opacity:1;transform:none} .pin-p h3{margin:0 0 14px;font-size:clamp(28px,3vw,38px);font-weight:600;letter-spacing:-.03em;color:var(--ia-dark-blue);line-height:1.1} .pin-p p{margin:0;font-size:18px;line-height:1.72;color:#454B5E;max-width:60ch;text-wrap:pretty} .pin-ticks{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px} .pin-ticks i{width:2px;height:26px;background:rgba(0,26,85,.16);transition:background .4s,height .4s} .pin-ticks i.is-on{background:var(--ia-blue);height:40px} /* Journey option "editorial": one step set like a magazine page. */ .ed{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:end;border-top:1px solid rgba(0,26,85,.16);padding-top:34px;margin-top:26px} .ed-panels{display:grid;min-height:210px} .ed-p{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .38s var(--ease-standard),transform .38s,visibility .38s} .ed-p.is-on{opacity:1;visibility:visible;transform:none} .ed-p h3{margin:0 0 14px;font-size:clamp(26px,2.8vw,34px);font-weight:600;letter-spacing:-.03em;color:var(--ia-dark-blue);line-height:1.12} .ed-p p{margin:0;font-size:17px;line-height:1.72;color:#454B5E;max-width:58ch;text-wrap:pretty} .ed-side{display:flex;flex-direction:column;align-items:flex-end;gap:22px} .ed-big{font-size:120px;font-weight:700;line-height:.82;letter-spacing:-.07em;color:var(--jt);transition:color .38s} .ed-of{font-size:14px;font-weight:500;color:#8A8FA0;letter-spacing:.02em} .ed-arrows{display:flex;gap:10px} .ed-arrows button{appearance:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,26,85,.2);background:#fff;color:var(--ia-dark-blue);font-size:18px;cursor:pointer;transition:background .2s,border-color .2s,color .2s} .ed-arrows button:hover:not(:disabled){background:var(--ia-dark-blue);border-color:var(--ia-dark-blue);color:#fff} .ed-arrows button:disabled{opacity:.3;cursor:default} @media (max-width:900px){ .pin-wrap{height:auto} .pin-stage{position:static;height:auto;display:block;overflow:visible;padding-top:0} .pin-inner{display:block} .pin-head{margin:0 0 28px} .pin-body{grid-template-columns:minmax(0,1fr);gap:20px} .pin-num{display:none} .pin-panels{position:static;display:flex;flex-direction:column;gap:34px} .pin-p{position:relative;inset:auto;opacity:1;transform:none} .pin-ticks{display:none} .ed{grid-template-columns:minmax(0,1fr);gap:26px} .ed-side{align-items:flex-start} } /* Values as a three-across register. The beliefs above already use the pinned-heading + ruled-rows shape; repeating it here made the bottom of the page read as a fourth list. Three short columns under one heading reads as an ending. */ /* Values: one wide photograph, then the three values in clean typographic columns beneath. The picture carries the warmth so the type doesn't have to pretend to. */ .values-flat-head{margin-bottom:40px} .values-flat-head .values-band-h{margin:8px 0 0;font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:-.04em;line-height:1.06;color:var(--ia-dark-blue)} .values-photo{height:300px;background:#EFEAE2;margin-bottom:44px} .values-photo image-slot{width:100%;height:100%;display:block} .values-cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:44px} .values-col3 b{display:block;font-size:19px;font-weight:600;color:var(--ia-dark-blue);letter-spacing:-.022em;padding-top:16px;border-top:2px solid var(--vt);margin-bottom:10px} .values-col3 p{margin:0;font-size:15px;line-height:1.78;color:#5C6172;text-wrap:pretty} @media (max-width:860px){.values-cols3{grid-template-columns:minmax(0,1fr);gap:26px}.values-photo{height:200px;margin-bottom:30px}} /* Team card hover: the photo gives way to a short line about the person. */ .team-photo{position:relative} .team-hover{position:absolute;inset:0;background:#fff;padding:22px;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .28s var(--ease-standard),visibility .28s} .team-card:hover .team-hover,.team-card:focus-visible .team-hover,.team-card:focus-within .team-hover{opacity:1;visibility:visible} .team-card:focus-visible{outline:2px solid var(--ia-blue);outline-offset:2px} .team-hover-blurb{margin:0;font-size:14px;line-height:1.55;color:var(--fg-muted)} @media (hover:none){.team-hover{display:none}} @media (prefers-reduced-motion:reduce){.team-hover{transition:none}} /* Foundations — "no fixed order": three large icons over a rule, each with a name and a line. The icons roll continuously, the middle one against the others, so no single pillar reads as the starting point. */ .cyc-head{max-width:62ch} .cyc-head .lede{margin-top:16px} .cycrow{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:64px} .cycrow-col{display:flex;flex-direction:column} .cycrow-ic{height:168px;display:grid;place-items:center;margin-bottom:26px} .cycrow-ic img{width:140px;height:140px;object-fit:contain;animation:cycrow-roll 22s var(--ph,0s) linear infinite;transition:transform .5s var(--ease-standard)} @keyframes cycrow-roll{to{transform:rotate(calc(var(--dir,1) * 360deg))}} .cycrow-name{padding-top:18px;border-top:1px solid rgba(0,26,85,.22);font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ia-dark-blue);transition:color .3s} .cycrow-line{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--fg-muted)} .cycrow-col:hover .cycrow-name{color:var(--cn)} .cycrow-col:hover .cycrow-ic img{animation-play-state:paused} @media (max-width:860px){.cycrow{grid-template-columns:1fr;gap:40px;margin-top:44px}.cycrow-ic{height:120px;margin-bottom:18px}.cycrow-ic img{width:100px;height:100px}} @media (prefers-reduced-motion:reduce){.cycrow-ic img{animation:none}} /* "The two ways in" — the rail diagram was removed, so the copy takes the full measure instead of sitting in the old 300px + 1fr split. */ /* "The two ways in" — the two routes as cards, centred heading above. */ .rcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} /* Same two tints as the home doors: pale teal for the Foundations route, pale navy for the direct one. */ .rcard{background:var(--paper);border:1px solid var(--hairline);border-radius:18px;padding:30px 30px 32px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:left;font-family:inherit;width:100%} button.rcard{cursor:pointer;transition:box-shadow .2s,transform .2s} button.rcard:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,26,85,.10)} button.rcard:hover .rcard-go .arrow{transform:translateX(4px)} .rcard-go{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:500;color:var(--pl-enable-fg)} .rcard-go .arrow{transition:transform .2s var(--ease-standard)} .rcard--a{background:var(--pl-enable-bg);border-color:color-mix(in oklch,var(--pl-enable-accent) 18%,#fff)} .rcard--b{background:var(--pl-strategy-bg);border-color:color-mix(in oklch,var(--ia-dark-blue) 14%,#fff)} .rcard-k{font-size:12px;font-weight:700;letter-spacing:.01em} .rcard--a .rcard-k{color:var(--pl-enable-fg)} .rcard--b .rcard-k{color:var(--ia-dark-blue)} .rcard-n{font-size:22px;font-weight:600;color:var(--ia-dark-blue);letter-spacing:-.02em;margin:10px 0} .rcard-p{font-size:16px;line-height:1.65;color:#5C6172} .rcards-foot{grid-column:1/-1;text-align:center;font-size:16px;color:var(--ia-dark-blue);font-weight:500;padding-top:6px} @media (max-width:900px){.rcards{grid-template-columns:minmax(0,1fr)}} /* Accelerators "what we build, and how" — split band: the statement holds the left, the three build shapes read as a numbered rail on the right. */ .bbc-lay{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:16px} .bbc-stat{color:#fff;margin:0;font-size:clamp(28px,2.7vw,40px);line-height:1.2;font-weight:400;letter-spacing:-.02em} .bbc-stat em{font-style:normal;color:var(--ia-light-blue)} .bbc-sub{margin:24px 0 0;font-size:17px;line-height:1.68;color:rgba(255,255,255,.78);max-width:44ch} .bbc-rows{display:flex;flex-direction:column} .bbc-row{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:22px 0;border-top:1px solid rgba(255,255,255,.24)} .bbc-row:last-child{border-bottom:1px solid rgba(255,255,255,.24)} .bbc-num{font-size:14px;font-weight:600;color:var(--ia-light-blue);font-variant-numeric:tabular-nums;padding-top:3px} .bbc-name{font-size:20px;font-weight:600;letter-spacing:-.015em;color:#fff} .bbc-body{margin:6px 0 0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.78)} @media (max-width:900px){.bbc-lay{grid-template-columns:minmax(0,1fr);gap:32px}.bbc-sub{max-width:none}} /* Accelerators — "what we build, and how": three marks in a large field, the sentence broken only at its own commas. Single-colour icon files are used because CSS masks can't read cross-origin images. */ .wbh{padding:16px 0 8px} /* Same recipe as the Foundations "flexible sequence" row, so the two service pages read as a pair: left-aligned head, full-colour marks, rule, then the clause with its noun carrying the weight. */ .wbh-title{margin:0;font-size:clamp(32px,3vw,44px);line-height:1.08;font-weight:700;letter-spacing:-.025em;color:var(--ia-dark-blue)} .wbh-row{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:64px} .wbh-col{display:flex;flex-direction:column} .wbh-ic{height:132px;width:132px;display:grid;place-items:center;margin-bottom:26px;background:#F2F5FB;border-radius:50%;justify-self:center;align-self:center} .wbh-ic .wbh-ic-img{width:62px;height:62px;object-fit:contain;animation:wbh-osc 9s var(--ph,0s) ease-in-out infinite} @keyframes wbh-osc{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}} .wbh-ic img{width:140px;height:140px;object-fit:contain;animation:wbh-roll 22s var(--ph,0s) linear infinite} .wbh-ic-m{display:block;width:86px;height:86px;background:var(--ia-dark-blue);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;animation:wbh-roll 22s var(--ph,0s) linear infinite} @keyframes wbh-roll{to{transform:rotate(calc(var(--dir,1) * 360deg))}} .wbh-rule{height:1px;background:rgba(0,26,85,.22)} .wbh-clause{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--fg-muted)} .wbh-clause strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ia-dark-blue);margin-bottom:6px} .wbh-atb{margin-top:60px} /* Same register as the Accelerators closer statement below. */ html[data-bp2="on"] .section--paper:has(.wbh){padding-top:72px;padding-bottom:88px} html[data-bp2="on"] .section--white:has(.wbh){padding-bottom:88px} @media (max-width:900px){.wbh-row{grid-template-columns:1fr;gap:48px}.wbh-ic{height:112px;width:112px}.wbh-ic-m{width:72px;height:72px}} @media (prefers-reduced-motion:reduce){.wbh-ic img,.wbh-ic-m,.wbh-ic-img{animation:none}} /* The two closing sentences read as one block, stacked rather than split. */ /* Closing statement: hairline lead-in, the caveat set apart on its own line. */ .wbh-atb{margin-top:104px;padding-top:40px;display:grid;justify-items:center} .wbh-atb .atb-statement{max-width:46ch;font-size:28px;font-weight:400;line-height:1.42;letter-spacing:-.02em;text-align:center} .wbh-atb .atb-statement strong{font-weight:600} .wbh-atb .atb-statement em{display:block;margin-top:20px;font-size:20px;line-height:1.5;font-style:italic;font-weight:400;color:var(--ia-blue)} @media (max-width:900px){.wbh-atb{margin-top:64px;padding-top:32px}.wbh-atb .atb-statement{font-size:24px;text-align:left}.wbh-atb .atb-statement em{font-size:18px}} /* MVP: the hero is centred, so the philosophy statement and the page closer are set left. Three centred blocks in a row left the page without a spine. */ /* Home page ending, option 1: the statement pairs with the awards in one row, so the block has something to align against instead of floating centred. */ .home-philosophy--paired{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:start;text-align:left;max-width:none} html[data-bp2="on"][data-homealign] .home-philosophy--paired, html[data-bp2="on"][data-homealign] .home-philosophy--paired>div{text-align:left} html[data-bp2="on"][data-homealign] .home-philosophy--paired .eyebrow{justify-content:flex-start} html[data-bp2="on"][data-homealign] .home-philosophy--paired .philosophy-quote{margin-left:0;margin-right:0;text-align:left;max-width:32ch} .home-philosophy--paired>div{max-width:none} .home-philosophy--paired .philosophy-quote{margin-left:0;margin-right:0;text-align:left;max-width:32ch} .home-philosophy--paired .eyebrow{justify-content:flex-start} .phil-awards{text-align:left;padding-top:4px} .phil-awards-imgs{display:flex;gap:20px;align-items:center;margin:0} .phil-awards-imgs img{height:112px;width:auto} /* Accelerators — the two ways in, as one statement rather than two cards. The section is reassurance, not a fork the visitor has to choose from. */ /* Accelerators hero figure: the home journey arc on a light ground. */ .acc-arc{max-width:380px;margin-left:auto} .acc-arc svg{overflow:visible} @media (max-width:900px){.acc-arc{display:none}} .twoways{max-width:none} .twoways-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start} .twoways-p--turn{max-width:24ch} @media (max-width:820px){.twoways-cols{grid-template-columns:minmax(0,1fr);gap:24px}.twoways-p--turn{max-width:none}} .twoways-p{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.5;font-weight:300;letter-spacing:-.02em;color:var(--ia-dark-blue);text-wrap:pretty} .twoways-p em{font-style:normal;font-weight:500;color:var(--ia-blue)} /* Two routes named, then the resolving line. Copy unchanged, split by sentence. */ .tw2{max-width:78ch;margin:0 auto;text-align:center} .tw2-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;text-align:left} .tw2-n{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ia-dark-blue)} .tw2-i{width:8px;height:8px;border-radius:50%;flex:none} .tw2-i--found{background:#00655F} .tw2-i--direct{background:var(--ia-blue)} .tw2-p{margin:8px 0 0;font-size:16px;line-height:1.62;color:#4A5064;text-wrap:pretty} .tw2-endp{margin:34px 0 0;font-size:clamp(20px,2vw,26px);line-height:1.45;font-weight:300;letter-spacing:-.02em;color:var(--ia-dark-blue);text-wrap:pretty} .tw2-endp em{font-style:normal;font-weight:500;color:var(--ia-blue)} @media (max-width:760px){.tw2-routes{grid-template-columns:minmax(0,1fr);gap:26px}} .twoways-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:0;border:0;background:none;font:inherit;font-size:16px;font-weight:500;color:var(--ia-blue);cursor:pointer} .twoways-link .arrow{transition:transform .18s ease} .twoways-link:hover .arrow{transform:translateX(3px)} .phil-awards p{margin:16px 0 0;font-size:14px;line-height:1.62;color:#5C6172;max-width:34ch;text-align:left} .phil-awards p b{font-weight:600;color:var(--ia-dark-blue)} @media(max-width:900px){.home-philosophy--paired{grid-template-columns:minmax(0,1fr);gap:32px}} /* Home page ending, option 2: the closer sits on the footer's own ground, so the page ends on the doors and the proof rather than a third centred block. */ .home-closer-foot{background:var(--ink);color:#fff;padding:64px 0 0} .home-closer-foot .hww-closer{border-top:0;padding-top:0;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.14)} .home-closer-foot .hww-closer-t{color:#fff} .home-closer-foot .hww-closer-t em{color:var(--ia-light-blue)} .home-closer-foot+.footer{padding-top:48px} .home-closer-foot .btn--primary{background:var(--ia-blue);color:#fff;border-color:transparent} /* Interior pages carry the home statement hero, shorter */ .hero--v4.hero--sub{min-height:0} .hero--sub .st-body{padding:120px 48px 64px} html[data-bp="on"] .hero--statement.hero--sub .h-display{max-width:18ch;font-size:clamp(34px,3.6cqw,52px)} .hero--sub .st-glow{bottom:-300px} html[data-bp="on"] .hero--v4.hero--sub + .section{position:relative;padding-top:56px!important} html[data-bp="on"] .hero--v4.hero--sub + .section::before{display:none} /* Interior heroes keep the page's own left-aligned structure on the hero's navy field */ .hero--v4 .st-body.st-body--left{align-items:flex-start;text-align:left;width:100%;max-width:1240px;margin:0 auto;padding:120px 36px 64px} .hero--v4 .st-body--left .h-display{margin:14px 0 0!important;max-width:20ch;text-align:left} .hero--v4 .st-body--left .lede{margin-left:0;margin-right:0;text-align:left} .hero--v4.hero--statement-lt .st-body--left .crumbs{color:var(--ia-blue-200)} html[data-bp="on"] .hero--statement-lt.hero--sub{background:radial-gradient(120% 96% at 50% -14%,var(--ia-blue-50) 0%,#F5F6F4 52%,var(--paper) 84%,var(--paper) 100%);color:var(--ink)} html[data-bp="on"] .hero--statement-lt.hero--sub .st-glow{inset:auto 0 -180px;height:520px;background:radial-gradient(50% 58% at 50% 36%,var(--ia-cyan-100),rgba(1,25,183,.05) 44%,transparent 72%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 78%)} html[data-bp="on"] .hero--statement-lt.hero--sub .lede{color:var(--ia-dark-blue);opacity:.72} html[data-bp="on"] .hero--statement-lt.hero--sub .h-display{color:var(--ia-dark-blue)} html[data-bp="on"] .hero--statement-lt.hero--sub .h-display strong{color:var(--ia-blue)} /* About people-card variants (Tweak: teamCard). Base .team-grid/.team-card stay as the "current" option; these three swap the treatment on the same markup. */ .tcv-portraits .team-grid{grid-template-columns:repeat(3,1fr);gap:32px 28px} .tcv-portraits .team-card{background:none;border:0;border-radius:0} .tcv-portraits .team-card:hover{transform:none} .tcv-portraits .team-photo{aspect-ratio:4/5;border-bottom:0;border-radius:16px;overflow:hidden} .tcv-portraits .team-card figcaption{padding:14px 0 0} .tcv-portraits .team-name{font-size:18px} .tcv-portraits .team-hover{padding:22px;border-radius:16px} .tcv-tiles .team-card{background:none;border:0;border-radius:16px;position:relative;overflow:hidden} .tcv-tiles .team-card:hover{transform:none} .tcv-tiles .team-photo{aspect-ratio:3/4;border-bottom:0} .tcv-tiles .team-hover{background:none} .tcv-tiles .team-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(to top,rgba(0,26,85,.92),rgba(0,26,85,0))} .tcv-tiles .team-name{color:#fff;font-size:17px} .tcv-tiles .team-role{color:var(--ia-light-blue)} .tcv-tiles .team-hover-blurb{color:rgba(255,255,255,.9)} .tcv-tiles .team-hover{align-items:flex-end;padding:20px;background:linear-gradient(to top,rgba(0,26,85,.96) 55%,rgba(0,26,85,.55))} .tcv-tiles .team-hover-blurb{padding-bottom:76px} @media(max-width:1000px){.tcv-portraits .team-grid{grid-template-columns:repeat(2,1fr)}} /* "An accelerator might be" as a dark band (Tweak: accelBand). IA master palette only: Dark Blue ground, Light Blue accents, white type. */ .kb-sec{padding-top:0!important;padding-bottom:0!important;background:#fff} .kb{padding:84px 0 92px} .kb--dark{background:#001A55} .kb--light{background:#F8F8F8} .kb .container{position:relative;z-index:1} .kb img{object-fit:contain;display:block} .kb1-h{margin:0 0 44px;font-size:clamp(26px,2.4vw,36px);line-height:1.1;font-weight:300;letter-spacing:-.03em;color:rgba(255,255,255,.62)} .kb1-r{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding:28px 0;border-top:1px solid rgba(255,255,255,.22)} .kb1-r:last-child{border-bottom:1px solid rgba(255,255,255,.22)} .kb1-t{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.28;letter-spacing:-.028em;font-weight:400;color:#fff;max-width:38ch;text-wrap:pretty} .kb1-t b{font-weight:600;color:#4BE4F8} .kb1-r img{width:44px;height:44px;opacity:.9} .kb2{position:relative;overflow:hidden} .kb2::after{content:"";position:absolute;left:50%;bottom:-340px;width:820px;height:560px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(75,228,248,.2),rgba(75,228,248,0) 70%);pointer-events:none} .kb2-head{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:32px;margin-bottom:16px} .kb2-h{margin:0;font-size:clamp(28px,2.6vw,40px);line-height:1.06;font-weight:300;letter-spacing:-.03em;color:#fff} .kb2-k{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#4BE4F8} .kb2-r{position:relative;display:grid;grid-template-columns:34px 1fr 72px;gap:28px;align-items:center;padding:30px 0;border-top:1px solid rgba(255,255,255,.2)} .kb2-r:last-child{border-bottom:1px solid rgba(255,255,255,.2)} .kb2-n{font-size:12px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.45)} .kb2-t{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.3;letter-spacing:-.028em;font-weight:300;color:rgba(255,255,255,.82);max-width:40ch;text-wrap:pretty} .kb2-t b{font-weight:600;color:#fff} .kb2-r img{width:52px;height:52px;justify-self:end;opacity:.92} .kb3-h{margin:0 0 40px;font-size:clamp(28px,2.6vw,40px);line-height:1.06;font-weight:300;letter-spacing:-.03em;color:#fff;max-width:18ch} .kb3-r{display:grid;grid-template-columns:96px 1fr;gap:34px;align-items:center;padding:26px 0;border-top:1px solid rgba(255,255,255,.18)} .kb3-r:last-child{border-bottom:1px solid rgba(255,255,255,.18)} .kb3-d{width:96px;height:96px;border-radius:50%;border:1px solid rgba(75,228,248,.5);display:grid;place-items:center} .kb3-d img{width:42px;height:42px} .kb3-n{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#4BE4F8} .kb3-t{margin:8px 0 0;font-size:clamp(20px,1.9vw,27px);line-height:1.32;letter-spacing:-.026em;font-weight:300;color:rgba(255,255,255,.84);max-width:42ch;text-wrap:pretty} .kb4{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.9fr);gap:72px;align-items:start} .kb4-h{margin:0;font-size:clamp(28px,2.5vw,38px);line-height:1.08;font-weight:300;letter-spacing:-.03em;color:#fff} .kb4-h em{display:block;margin-top:18px;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#4BE4F8} .kb4-r{display:grid;grid-template-columns:1fr 56px;gap:28px;align-items:center;padding:24px 0;border-top:1px solid rgba(255,255,255,.2)} .kb4-r:last-child{border-bottom:1px solid rgba(255,255,255,.2)} .kb4-t{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.4;letter-spacing:-.022em;font-weight:300;color:rgba(255,255,255,.8);text-wrap:pretty} .kb4-t b{font-weight:600;color:#fff} .kb4-r img{width:40px;height:40px;justify-self:end;opacity:.9} .kb-sec .wbh--after{padding:64px 0 88px} .kb-sec .wbh-atb{margin-top:0;padding-top:0} @media(max-width:900px){.kb4{grid-template-columns:1fr;gap:32px}} /* Light grounds for k1/k3/k4: same structure, IA palette on paper rather than navy. */ .kb--light .kb1-h,.kb--light .kb3-h,.kb--light .kb4-h{color:#001A55} .kb--light .kb1-h{color:#5C5C5C} .kb--light .kb1-r,.kb--light .kb3-r,.kb--light .kb4-r{border-top-color:#DDDDDD} .kb--light .kb1-r:last-child,.kb--light .kb3-r:last-child,.kb--light .kb4-r:last-child{border-bottom-color:#DDDDDD} .kb--light .kb1-t{color:#001A55} .kb--light .kb1-t b{color:#0119B7} .kb--light .kb3-d{border-color:rgba(1,25,183,.35)} .kb--light .kb3-n{color:#0119B7} .kb--light .kb3-t{color:#5C5C5C} .kb--light .kb4-h em{color:#0119B7} .kb--light .kb4-t{color:#5C5C5C} .kb--light .kb4-t b{color:#001A55} /* Quiet version of "an accelerator might be": three lines on the page, no block, no circles, type a step below the section heads around it. */ .wbh{padding:0} .wbh-title{font-size:clamp(24px,2vw,30px)!important;font-weight:600!important;color:#001A55!important} .wbh-lines{margin-top:22px;max-width:700px;display:flex;flex-direction:column;gap:10px} .wbh-line{display:block;padding:0;border:0} .wbh-line-ic{display:none} .wbh-line .wbh-clause{margin:0;font-size:18px;line-height:1.6;color:#5C5C5C;text-wrap:pretty} .wbh-line .wbh-clause strong{display:inline;font-size:inherit;font-weight:600;color:#001A55;margin:0} .wbh-atb{margin-top:52px!important;padding-top:0!important;justify-items:start!important} .wbh-atb .atb-statement{text-align:left!important;font-size:20px!important;line-height:1.55!important;max-width:62ch!important} .wbh-atb .atb-statement em{font-size:18px!important;margin-top:14px!important} html[data-bp2="on"] .section--white:has(.wbh){padding-top:64px;padding-bottom:64px} /* One statement, one measure. No rules, icons or panels: the three examples are endings to a single sentence, so they are set as one. */ .wbh-sentence{margin:0;max-width:60ch;font-size:clamp(22px,2vw,28px);line-height:1.45;font-weight:300;letter-spacing:-.02em;color:#5C5C5C;text-wrap:pretty} .wbh-sentence strong{font-weight:600;color:#001A55} .wbh-note{margin:32px 0 0;max-width:58ch;font-size:17px;line-height:1.65;color:#5C5C5C;text-wrap:pretty} .wbh-note em{display:block;margin-top:10px;font-style:italic;color:#0119B7} html[data-bp2="on"] .section--white:has(.wbh){padding-top:72px;padding-bottom:72px} /* The three shapes now open the Build stories section rather than standing alone. */ .acc-shapes{margin-top:16px;max-width:68ch;font-size:18px;line-height:1.65;color:#5C5C5C;text-wrap:pretty} .acc-shapes-note{margin:14px 0 0;max-width:62ch;font-size:16px;line-height:1.6;color:#5C5C5C;text-wrap:pretty} .acc-shapes-note em{font-style:italic;color:#0119B7} /* "What we build, and how": one paragraph on its own light ground, sitting between two white sections. Emphasis is weight and colour only — no chips, no rules. */ .wwb{background:#fff;border-top:1px solid var(--hairline)} html[data-bp2="on"] .wwb{padding-top:72px;padding-bottom:76px} .wwb-h{margin:0} .wwb-body{display:grid;gap:16px;margin-top:20px} .wwb-p{margin:0;max-width:56ch;font-size:18px;line-height:1.7;font-weight:400;letter-spacing:0;color:#5C6172;text-wrap:pretty} .wwb-n{font-weight:500;color:#3A4055} .wwb-e{font-weight:500;color:#001A55} .wwb-close{margin:22px 0 0;max-width:34ch;padding-left:20px;border-left:2px solid var(--ia-light-blue);font-size:24px;line-height:1.35;font-weight:500;letter-spacing:-.02em;color:#001A55} /* Closing statement treatments (Tweaks → AI Accelerators → Closing statement). */ html[data-wwbclose="hairline"] .wwb-close{margin-top:30px;max-width:30ch;padding:24px 0 0;border-left:0;border-top:1px solid var(--hairline);font-size:30px;line-height:1.25;font-weight:300;letter-spacing:-.03em} html[data-wwbclose="card"] .wwb-close{margin-top:28px;max-width:44ch;padding:24px 28px;border:1px solid var(--hairline);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,26,85,.05);font-size:22px;line-height:1.4} html[data-wwbclose="navy"] .wwb-close{margin-top:28px;max-width:46ch;padding:26px 30px;border:0;border-radius:14px;background:var(--ia-dark-blue);color:#fff;font-size:22px;line-height:1.4;font-weight:400} html[data-wwbclose="right"] .wwb-body{grid-template-columns:minmax(0,1fr) minmax(0,300px);column-gap:64px;align-items:start} html[data-wwbclose="right"] .wwb-close{grid-column:2;grid-row:1 / span 2;margin:0;max-width:none;padding-left:0;border-left:0;font-size:26px;line-height:1.3} html[data-wwbclose="tick"] .wwb-close{margin-top:34px;max-width:26ch;padding:26px 0 0;border-left:0;border-top:1px solid var(--hairline);font-size:28px;line-height:1.3;letter-spacing:-.03em} html[data-wwbclose="tick"] .wwb-close::before{content:"";display:block;width:26px;height:2px;background:var(--ia-light-blue);margin-bottom:18px} @media (max-width:900px){html[data-wwbclose="right"] .wwb-body{grid-template-columns:minmax(0,1fr)}html[data-wwbclose="right"] .wwb-close{grid-column:1;grid-row:auto;margin-top:22px}} /* Tool card treatments (Tweak: toolCard). Structure unchanged — same grid, same link target; only the card's surface differs. */ .tc-plate{background:#fff;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:box-shadow .18s var(--ease-standard)} .tc-plate:hover{box-shadow:0 8px 26px rgba(0,26,85,.09)} .tc-plate:focus-visible{outline:2px solid var(--ia-blue);outline-offset:2px} .tc-plate-top{background:var(--bg);padding:22px;display:flex;align-items:center;gap:14px} .tc-plate-n{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--fg)} .tc-plate-v{font-size:12px;color:var(--fg);opacity:.7;margin-top:2px} .tc-plate-b{padding:18px 22px 22px;flex:1 1 auto} .tc-plate-c{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9BA0AE} .tc-plate-u{margin:8px 0 0;font-size:14px;line-height:1.55;color:#4A4F60} /* About hero: the origin sentence carries the weight, the closer sits under it. */ .ab-lede{max-width:56ch} .ab-tail{margin:18px 0 0;max-width:56ch;font-size:20px;line-height:1.6;color:var(--ia-blue)} /* Photo credit under the team grid. */ /* Interior statement heroes: drop the cyan cast from the glow, keep a soft blue lift. */ html[data-bp="on"] .hero--statement-lt.hero--sub .st-glow{background:radial-gradient(50% 58% at 50% 36%,rgba(1,25,183,.07),rgba(1,25,183,.03) 46%,transparent 74%)} /* ---- Work hero fan, still: decoration, not navigation. No cursor tilt (--mx/--my are never set without TiltStage), no hover lift, no rise-in, no pointer. ---- */ html[data-bp2="on"] .wk-corridor--still { --mx: 0; --my: 0; } html[data-bp2="on"] .wk-corridor--still .wk-corr-card { pointer-events: none; cursor: default; animation: none; transition: none; } html[data-bp2="on"] .wk-corridor--still .wk-fan-face:hover { --lift: 0px; z-index: auto; } /* ---------- Case study page: three alternative body layouts (Tweaks → Our Work) ---------- */ .csl-a{margin-top:32px} .csl-ab{display:grid;grid-template-columns:1fr 1fr} .csl-ab-half{padding:40px 44px} .csl-ab-before{background:#F2F2EE} .csl-ab-now{background:var(--ia-dark-blue);position:relative;overflow:hidden} .csl-ab-now::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(75,228,248,.13) 1px,transparent 1px);background-size:22px 22px} .csl-ab-now>*{position:relative} .csl-ab-l{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8A8F9E} .csl-ab-now .csl-ab-l{color:var(--ia-light-blue)} .csl-ab-t{font-size:18px;line-height:1.6;color:#3D4252;margin:12px 0 0;text-wrap:pretty} .csl-ab-now .csl-ab-t{color:#fff} .csl-build{margin-top:44px} .csl-stages{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:16px} .csl-stage{border:1px solid var(--hairline);border-radius:16px;padding:22px 24px;background:#fff} .csl-stage-n{font-size:12px;font-weight:600;color:var(--ia-blue);letter-spacing:.04em} .csl-stage-t{font-size:16px;line-height:1.55;color:var(--ia-dark-blue);margin:8px 0 0;font-weight:500} .csl-eng{margin-top:26px} .csl-eng strong{font-weight:600;color:var(--ia-dark-blue)} .csl-pend{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} .csl-pend-p{font-size:14px;font-style:italic;color:#8A5A00;background:#FDF0C8;border-radius:10px;padding:10px 14px} .csl-b{margin-top:32px} .csl-flow{display:grid;grid-template-columns:1fr 44px 1fr;align-items:stretch;margin-top:16px} .csl-flow-card{border:1px solid var(--hairline);border-radius:18px;padding:26px 28px;background:#fff} .csl-flow-card--gate{background:#F7F8FB} .csl-flow-arrow{display:flex;align-items:center;justify-content:center;color:#B9BDC8} .csl-flow-n{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ia-blue)} .csl-flow-t{font-size:17px;line-height:1.5;font-weight:500;color:var(--ia-dark-blue);margin:10px 0 0} .csl-holds{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px} .csl-hold{border-left:1px solid var(--hairline);padding-left:16px} .csl-hold p{margin:0;font-size:15px;line-height:1.6;color:#3D4252} .csl-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:44px;padding-top:34px;border-top:1px solid var(--hairline)} .csl-c{display:grid;grid-template-columns:264px 1fr;gap:48px;margin-top:32px} .csl-rail{border-right:1px solid var(--hairline);padding-right:28px} .csl-rail-item{padding:14px 0;border-bottom:1px solid var(--hairline)} .csl-rail-item:last-child{border-bottom:0} .csl-rail-l{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#8A8F9E} .csl-rail-v{display:block;font-size:15px;font-weight:600;color:var(--ia-dark-blue);margin-top:4px;line-height:1.4} .csl-rail-v--pend{color:#8A5A00} .csl-rail-s{display:block;font-size:12px;color:#B3261E;margin-top:3px} .csl-run{max-width:62ch} .csl-run h3{font-size:14px;font-weight:600;color:var(--ia-blue);margin:34px 0 0} .csl-run h3:first-child{margin-top:0} .csl-checks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .csl-checks li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;color:#3D4252} .csl-checks li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:2px;background:var(--ia-blue)} .csl-quote-pend{margin:34px 0 0;padding:26px 28px;background:#F7F8FB;border-radius:16px;font-size:18px;line-height:1.6;color:#8A8F9E;font-style:italic} @media (max-width:860px){ .csl-ab,.csl-stages,.csl-holds,.csl-cols{grid-template-columns:1fr} .csl-flow{grid-template-columns:1fr} .csl-flow-arrow{transform:rotate(90deg);padding:10px 0} .csl-c{grid-template-columns:1fr;gap:28px} .csl-rail{border-right:0;border-bottom:1px solid var(--hairline);padding:0 0 12px} } /* MVP page ending: the awards sit beside the statement, so the closer is alone on the band. No rule, and no space held for one. */ html[data-mvp="on"][data-homealign] .recognition-band--light .hww-closer--norule{border-top:none;padding-top:16px;margin-top:0} html[data-mvp="on"][data-homealign] .recognition-band--light:has(.hww-closer--norule){padding-top:44px} /* ============================================================ AI Accelerators — redesign, Aug 2026. Three weights on this page: 600 headings, 400 body, 300 statements. One statement style (.acc-stmt) does the two-ways line, the closing line and the after-the-build line, so they are the same voice. One small-label style (.acc-case-k). No uppercase tracking. ============================================================ */ .acc-stmt{margin:0;font-size:clamp(21px,2vw,26px);line-height:1.45;font-weight:300;letter-spacing:-.022em;color:var(--ia-dark-blue);max-width:52ch;text-wrap:pretty} .acc-stmt strong{font-weight:600} .acc-stmt em{font-style:italic;font-weight:300;color:inherit} /* --- The two ways in: one measure, one turn, one link --- */ html[data-bp2="on"] .acc-ways-sec{padding-top:72px;padding-bottom:72px} .acc-ways-p{margin-top:18px} .acc-ways-sec .twoways-link{margin-top:28px} /* --- What we build: prose, one emphasis, statement on a hairline. Sits on paper so the page alternates white / paper / white / paper. --- */ .wwb{background:var(--paper)!important;border-top:0!important} /* Hero and wwb share one paper ground: kill the hero's fade-to-white on this page, and fade its dot grid out into flat paper so there's no visible join. */ .hero.acc-hero.acc-hero--blend.dot-grid{background-image:radial-gradient(rgba(11,16,36,.07) 1px, transparent 1px),linear-gradient(to bottom,var(--paper),var(--paper))} /* Overlay sits behind the copy, so the text never washes out. */ .hero.acc-hero--blend::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:180px;background:linear-gradient(to bottom,rgba(250,249,245,0),var(--paper));pointer-events:none} .hero.acc-hero--blend>.container{position:relative;z-index:1} html[data-bp2="on"] .wwb{padding-top:88px;padding-bottom:88px} .wwb-body{margin-top:20px} .wwb-p{font-size:18px!important;line-height:1.75!important;font-weight:400;color:#5C6172;max-width:62ch} .wwb-p strong{font-weight:600;color:var(--ia-dark-blue)} .wwb-close{margin:40px 0 0!important;padding:32px 0 0!important;border-left:0!important;border-top:1px solid #E1E1D8;max-width:34ch!important} /* --- Arc-spine pass (Aug 2026): two-ways folded into the hero --- */ .acc-hero-ways{margin-top:14px} .acc-hero-ways em{font-style:normal;color:var(--ia-blue)} /* --- Foundations page carries the same pale teal as the home Foundations door --- */ /* --- Foundations colour rule --- The pale teal chosen on the home Foundations door is THE Foundations colour. Wherever a colour stands for Foundations, use these tokens: --pl-enable-bg #DCEFEE pale teal surface (tints, chips, doors) --pl-enable-fg #00655F ink on that surface / Foundations text accent --pl-enable-accent #00968F marks, rules, dots, underlines Don't hard-code the hexes and don't substitute --ia-blue for Foundations. Note: heading accents stay --ia-blue sitewide, including on Foundations. --- */ /* --- Contact: brought onto the shared interior-page pattern (Aug 2026). Layout options live in Tweaks → About → Contact page layout. --- */ .ct-main{padding-top:64px!important;padding-bottom:88px!important} .ct-grid{display:grid;gap:0} .ct-main--standard .ct-grid{grid-template-columns:minmax(0,1fr) 320px;column-gap:64px;align-items:start} .ct-aside{padding-top:6px} .ct-main--editorial .ct-grid,.section--paper .ct-grid{grid-template-columns:280px minmax(0,1fr);column-gap:56px;padding-top:26px;border-top:1px solid rgba(0,26,85,.14)} .ct-ed-h{font-size:24px;margin:0} .ct-glance{position:relative;align-self:end;background:#fff;border:1px solid rgba(0,26,85,.1);border-radius:16px;padding:26px 28px 22px;box-shadow:0 24px 60px rgba(0,26,85,.1),0 2px 8px rgba(0,26,85,.05)} .ct-glance::before{content:"";position:absolute;top:0;left:28px;right:28px;height:2px;border-radius:2px;background:var(--ia-light-blue)} .ct-glance-l{margin:0 0 12px;font-size:14px;font-weight:500;color:var(--ia-dark-blue)} .ct-glance-row{display:block;padding:11px 0;border-top:1px solid var(--hairline);font-size:15px;color:#5C6172;text-decoration:none} a.ct-glance-row:hover{color:var(--ia-blue)} .ct-glance-note{color:#9BA0AE} @media (max-width:900px){.ct-main--standard .ct-grid,.ct-main--editorial .ct-grid,.section--paper .ct-grid{grid-template-columns:1fr;row-gap:28px}} /* --- What we build: editorial split (chosen) --- */ .wwb-card{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:56px;padding-top:26px;border-top:1px solid rgba(0,26,85,.14)} .wwb-card .wwb-h{font-size:24px;grid-column:1;grid-row:1 / span 2} .wwb-stmt{grid-column:2;margin-top:0} .wwb-sub{grid-column:2;margin:18px 0 0;max-width:56ch;font-size:16px;line-height:1.7;font-weight:400;color:#5C6172;text-wrap:pretty} @media (max-width:900px){.wwb-card{grid-template-columns:1fr}.wwb-card .wwb-h{grid-row:auto}.wwb-stmt{grid-column:1;margin-top:16px}.wwb-sub{grid-column:1}} .wwb-stmt{margin-top:20px} .wwb-sub{margin:18px 0 0;max-width:56ch;font-size:16px;line-height:1.7;font-weight:400;color:#5C6172;text-wrap:pretty} .acc-case-k{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .acc-case-stage{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:rgba(0,26,85,.55)} .acc-case-stage::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor} @media (max-width:900px){.acc-ways-links{flex-direction:column;gap:14px}} /* --- Build stories as a physical card deck (from stories-D-deck.html) --- */ html[data-bp2="on"] .acc-cases-sec{overflow-x:clip} .acc-deck{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:64px;align-items:center;margin-top:44px} .acc-deck-word{font-size:64px;font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ia-dark-blue)} .acc-deck-kindline{margin:12px 0 0;font-size:16px;font-weight:400;color:#5C6172} .acc-deck-count{margin:24px 0 0;font-size:14px;font-weight:500;color:rgba(0,26,85,.45)} .acc-deck-ctl{display:flex;align-items:center;gap:16px;margin-top:20px} .acc-deck-arr{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,26,85,.25);background:#fff;color:var(--ia-dark-blue);cursor:pointer;transition:border-color .2s,transform .2s} .acc-deck-arr:hover{border-color:var(--ia-dark-blue);transform:translateY(-1px)} .acc-deck-dots{display:flex;gap:2px} .acc-deck-dot{position:relative;width:24px;height:24px;margin:0;padding:0;border:0;background:none;cursor:pointer} .acc-deck-dot::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:rgba(0,26,85,.15);transition:background .25s,transform .25s} .acc-deck-dot:hover::before{background:rgba(0,26,85,.35)} .acc-deck-dot.is-on::before{background:var(--ia-blue);transform:translate(-50%,-50%) scale(1.2)} .acc-deck-hint{margin:14px 0 0;font-size:12px;font-weight:500;color:rgba(0,26,85,.4)} .acc-deck-stage{position:relative;height:460px;perspective:1200px} .acc-deck-card{position:absolute;inset:0;max-width:620px;margin-left:auto;display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid rgba(0,26,85,.1);border-radius:16px;padding:34px 38px 28px;box-shadow:0 24px 60px rgba(0,26,85,.12),0 2px 8px rgba(0,26,85,.06);cursor:pointer;transform-origin:60% 100%;transition:transform .6s cubic-bezier(.3,1.4,.4,1),opacity .5s,filter .5s} .acc-deck-card::before{content:"";position:absolute;top:0;left:38px;right:38px;height:2px;border-radius:2px;background:var(--bt)} .acc-deck-card::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(75,228,248,0);transition:box-shadow .3s} .acc-deck-card.p0:hover::after{box-shadow:inset 0 0 0 1px rgba(75,228,248,.55)} .acc-deck-card.p0{z-index:3;transform:rotateY(calc(var(--mx,0)*4deg)) rotateX(calc(var(--my,0)*-3deg))} .acc-deck-card.p1{z-index:2;opacity:.9;filter:blur(.4px);transform:translate(34px,-26px) rotate(3.5deg) scale(.955) rotateY(calc(var(--mx,0)*4deg))} .acc-deck-card.p2{z-index:1;opacity:.65;filter:blur(1.1px);transform:translate(66px,-50px) rotate(7deg) scale(.91) rotateY(calc(var(--mx,0)*4deg))} .acc-deck-card.p1:hover,.acc-deck-card.p2:hover{opacity:1;filter:none} .acc-deck-card.fly{transform:translate(-46%,10%) rotate(-9deg) scale(.98);opacity:0} .acc-deck-in{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0} .acc-deck-ghost{position:absolute;right:18px;bottom:-28px;font-size:150px;font-weight:600;letter-spacing:-.05em;line-height:1;color:rgba(0,26,85,.05);pointer-events:none} .acc-deck-card.p1 .acc-deck-in,.acc-deck-card.p2 .acc-deck-in{opacity:0;transition:opacity .3s} .acc-deck-card.p0 .acc-deck-in{opacity:1;transition:opacity .35s .25s} .acc-deck-card .acc-case-prob{font-size:22px;font-weight:300} .acc-deck-card .acc-case-k span:first-child{white-space:nowrap} .acc-deck-card .acc-case-go{margin-top:18px} .acc-deck-card .acc-case-f{margin-top:auto} @media (max-width:900px){.acc-deck{grid-template-columns:1fr;gap:30px}.acc-deck-stage{height:500px}.acc-deck-card{margin-left:0}} /* --- Build stories: open columns under a coloured rule, no boxes --- */ html[data-bp2="on"] .acc-cases-sec{padding-top:88px;padding-bottom:88px} .acc-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:34px} .acc-case{padding-top:18px;border-top:2px solid var(--bt)} .acc-case-k{font-size:14px;font-weight:500;color:var(--bt);text-wrap:pretty} .acc-case-prob{margin:16px 0 0;font-size:20px;line-height:1.45;font-weight:400;letter-spacing:-.018em;color:var(--ia-dark-blue);text-wrap:pretty} .acc-case-body{margin:16px 0 0;font-size:16px;line-height:1.75;font-weight:400;color:#5C6172;text-wrap:pretty} .acc-case-f{margin-top:24px;padding-top:16px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:10px} @media (max-width:900px){.acc-cases{grid-template-columns:minmax(0,1fr);gap:40px}} /* --- Hero: one CTA above the fold --- */ .acc-hero-cta{margin-top:28px} /* --- Build stories: emphasis inverted (what we built leads), card is the link --- (legacy grid treatment; scoped to .acc-case so the deck cards escape it) --- */ .acc-case .acc-case-prob{font-size:16px!important;line-height:1.7!important;color:#5C6172!important} .acc-case .acc-case-body{font-size:18px!important;line-height:1.6!important;letter-spacing:-.012em;color:var(--ia-dark-blue)!important} .acc-case--link{cursor:pointer} .acc-case--link:focus-visible{outline:2px solid var(--ia-blue);outline-offset:6px} .acc-case-go{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:14px;font-weight:500;color:var(--ia-blue)} .acc-case--link:hover .acc-case-go{text-decoration:underline} /* --- After the build: both columns start on the same line --- */ html[data-bp2="on"] .acc-after-sec{padding-top:88px;padding-bottom:88px} .acc-after{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start} .acc-after-statement{max-width:28ch} .acc-after-note p{margin:0;font-size:16px;line-height:1.75;font-weight:400;color:#5C6172;text-wrap:pretty} @media (max-width:900px){.acc-after{grid-template-columns:minmax(0,1fr);gap:28px}.acc-after-statement{max-width:none}} /* ============================================================ AI ACCELERATORS, VERSION B (brief v4 §4 complete) Card-stage material: paper plates, cursor parallax, cyan seam. ============================================================ */ /* --- Hero: the claim leads, page name demoted to the one label style --- */ .accb-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:34px} /* B hides its arc earlier (it crops badly under 1080) and gives the copy the full measure when it does. Scoped to B so Foundations and version A keep the 900px breakpoint every other two-column hero uses. */ @media (max-width:1080px){ .acc-hero--b .acc-arc{display:none} .acc-hero--b .svc-hero{grid-template-columns:minmax(0,1fr)} } .accb-orient{margin-top:44px} /* --- Hero orientation line: the two ways in, where orientation belongs --- */ .accb-orient{margin:56px 0 0;padding-top:26px;border-top:1px solid rgba(0,26,85,.14);max-width:76ch;font-size:16px;line-height:1.75;font-weight:400;color:#5C6172;text-wrap:pretty} .accb-orient strong{font-weight:500;color:var(--ia-dark-blue)} /* --- What we build: the statement carries it (variant C). Sits well down the page so it is scrolled into, not landed on. Its white ground ramps up out of the hero's paper wash so the join between the two backgrounds is invisible. --- */ .accb-wwb-sec{padding-top:200px!important;background:linear-gradient(to bottom,var(--paper) 0,#F8FAFD 90px,#FCFDFE 240px,#fff 400px)!important} /* Local reveal: fires when the element is properly in view, not at 8% like the page default, so this section actually animates as you arrive at it. */ .accb-in{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.7,.3,1)} .accb-in.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.accb-in{opacity:1;transform:none;transition:none}} .acc-hero--b.acc-hero--blend{padding-bottom:0!important} @media (max-width:860px){.accb-wwb-sec{padding-top:130px!important;background:linear-gradient(to bottom,var(--paper) 0,#F8FAFD 60px,#FCFDFE 160px,#fff 260px)!important}} .accb-wwb{padding:16px 0 24px} .accb-wwb-stmt{margin:0;max-width:26ch;font-size:clamp(30px,3.6vw,48px);line-height:1.22;font-weight:300;letter-spacing:-.025em;color:var(--ia-dark-blue);text-wrap:pretty} .accb-wwb-stmt strong,.accb-wwb-stmt .accb-t-b{font-weight:600} .accb-wwb-stmt em,.accb-wwb-stmt .accb-t-em{font-style:italic;font-weight:300} /* Statement animations: reserve the full height so the paragraph never jumps. */ .accb-wwb-stmt{min-height:calc(1.22em * 4)} /* Cycling shape: the shape types and untypes above a claim that never moves. */ .accb-cyc{display:grid;gap:2px} .accb-cyc-line{display:block;min-height:1.22em} .accb-cyc-claim{display:block} /* Emphasis last: the claim arrives, then the key phrase, then its underline draws. */ .accb-late-rest,.accb-late-key{display:inline;opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.3,1)} .accb-late-rest{transform:translateY(18px)} .accb-late-key{transform:translateY(18px);transition-delay:.55s} .accb-late-key strong{position:relative;isolation:isolate} .accb-late-key strong::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;background:var(--ia-light-blue);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.7,.3,1) 1.15s} .accb-late.is-on .accb-late-rest,.accb-late.is-on .accb-late-key{opacity:1;transform:none} .accb-late.is-on .accb-late-key strong::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){.accb-late-rest,.accb-late-key{opacity:1;transform:none;transition:none}.accb-late-key strong::after{transform:scaleX(1);transition:none}} .accb-caret{display:inline-block;width:2px;height:.82em;margin-left:2px;vertical-align:-.06em;background:var(--ia-light-blue);animation:accb-blink .9s steps(1,end) infinite} @keyframes accb-blink{0%,49%{opacity:1}50%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){.accb-caret{display:none}} .accb-wwb-p{margin:32px 0 0;max-width:60ch;font-size:18px;line-height:1.75;font-weight:400;color:#5C6172;text-wrap:pretty} @media (min-width:1000px){ .accb-wwb{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:88px;align-items:start;padding:24px 0 40px} .accb-wwb-p{margin:10px 0 0;max-width:44ch} } /* --- After the build: two paths as cards, same material as the build stories --- */ .accb-ab-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px} .accb-ab-card{position:relative;background:var(--ia-dark-blue);border-radius:16px;padding:32px;color:#fff} .accb-ab-card::before{content:"";position:absolute;top:0;left:32px;right:32px;height:2px;border-radius:2px;background:var(--ia-light-blue)} .accb-ab-card h3{margin:0 0 12px;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff} .accb-ab-card p{margin:0;font-size:16px;line-height:1.7;font-weight:400;color:rgba(255,255,255,.75);text-wrap:pretty} .accb-ab-links{margin-top:28px} /* Ruled-columns option: statement full width, the two paths named under a hairline. */ .accb-ab-stmt{max-width:46ch} .accb-ab-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;border-top:1px solid rgba(0,26,85,.14)} .accb-ab-path{padding:26px 40px 0 0} .accb-ab-path+.accb-ab-path{padding-left:56px;border-left:1px solid rgba(0,26,85,.1)} .accb-ab-path h3{margin:0 0 10px;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ia-dark-blue)} .accb-ab-path p{margin:0;font-size:16px;line-height:1.7;font-weight:400;color:#5C6172;text-wrap:pretty} @media (max-width:860px){.accb-ab-paths{grid-template-columns:minmax(0,1fr)}.accb-ab-path+.accb-ab-path{padding-left:0;border-left:0;border-top:1px solid rgba(0,26,85,.1);margin-top:22px}} @media (max-width:860px){.accb-ab-cards{grid-template-columns:minmax(0,1fr)}} /* --- After the build: the two aftercare paths, drawn (figure retired with option B) --- */ .accb-after-lay{display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:72px;align-items:center} .accb-after-fig svg{width:100%;height:auto;display:block;overflow:visible} .accb-after-copy{grid-template-columns:minmax(0,1fr)!important;gap:26px!important} .accb-after-copy .acc-after-statement{max-width:34ch} .accb-after-lay.is-plain{grid-template-columns:minmax(0,1fr)} .accb-after-lay.is-plain .accb-after-copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:80px!important} @media (max-width:980px){.accb-after-lay{grid-template-columns:minmax(0,1fr);row-gap:36px}.accb-after-fig{max-width:320px}.accb-after-lay.is-plain .accb-after-copy{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}} /* --- Closer folded under the after-the-build pair --- */ .accb-end{margin-top:72px;padding-top:40px;border-top:1px solid rgba(0,26,85,.14);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px} .accb-end p{margin:0;font-size:16px;line-height:1.7;font-weight:400;color:#5C6172;max-width:52ch;text-wrap:pretty} /* --- Build stories, spotlight option: plate + rail (Tweaks → Build stories) --- */ .accb-spot{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:64px;align-items:start} .accb-spot-rail{display:grid;border-top:1px solid rgba(0,26,85,.14)} .accb-rail-b{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;align-items:start;width:100%;text-align:left;font-family:inherit;background:none;border:0;border-bottom:1px solid var(--hairline);border-left:2px solid transparent;padding:20px 0 20px 14px;cursor:pointer;opacity:.55;transition:opacity .25s,border-color .25s} .accb-rail-b:hover{opacity:.85} .accb-rail-b.is-on{opacity:1;border-left-color:var(--bt)} .accb-rail-n{font-size:14px;font-weight:500;color:var(--bt);line-height:1.5} .accb-rail-w{display:grid;gap:4px} .accb-rail-s{font-size:16px;font-weight:500;line-height:1.4;color:var(--ia-dark-blue);text-wrap:pretty} .accb-rail-k{font-size:14px;font-weight:500;color:rgba(0,26,85,.55)} .accb-plate{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(0,26,85,.1);border-radius:16px;padding:38px 42px 34px;min-height:320px;display:flex;box-shadow:0 24px 50px -28px rgba(0,26,85,.22)} .accb-plate::before{content:"";position:absolute;top:0;left:38px;right:38px;height:2px;border-radius:2px;background:var(--bt);transition:background .3s} .accb-plate-in{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;animation:accb-plate-in .4s cubic-bezier(.4,0,.2,1) both} @keyframes accb-plate-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .accb-plate-prob{margin:22px 0 0;font-size:22px;line-height:1.5;font-weight:300;letter-spacing:-.02em;color:var(--ia-dark-blue);max-width:44ch;text-wrap:pretty} .accb-plate-body{margin:14px 0 26px;font-size:16px;line-height:1.75;color:#5C6172;max-width:56ch;text-wrap:pretty} .accb-plate .acc-case-f{margin-top:auto} @media (max-width:900px){ .accb-spot{grid-template-columns:minmax(0,1fr);row-gap:28px} .accb-spot-rail{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0} .accb-rail-b{grid-template-columns:minmax(0,1fr);row-gap:6px;border-bottom:0;border-top:1px solid var(--hairline);padding:14px 10px 0 12px} .accb-rail-n{display:none} .accb-plate{min-height:0;padding:28px} } /* --- Build stories: three paper cards, same material as the deck plates --- */ .accb-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch} .accb-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,26,85,.1);border-radius:16px;padding:34px 32px 30px;box-shadow:0 20px 44px -28px rgba(0,26,85,.22);transition:transform .3s cubic-bezier(.22,.7,.3,1),box-shadow .3s} .accb-card::before{content:"";position:absolute;top:0;left:32px;right:32px;height:2px;border-radius:2px;background:var(--bt)} .accb-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(0,26,85,.3)} .accb-card-prob{margin:22px 0 0;font-size:22px;line-height:1.45;font-weight:300;letter-spacing:-.02em;color:var(--ia-dark-blue);text-wrap:pretty} .accb-card-body{margin:14px 0 26px;font-size:16px;line-height:1.7;font-weight:400;color:#5C6172;text-wrap:pretty} .accb-card .acc-case-f{margin-top:auto} @media (max-width:980px){.accb-cards{grid-template-columns:minmax(0,1fr)}} /* --- Build stories, fanned deck option --- */ .accb-fan{position:relative;height:440px;perspective:1400px} .accb-fan-c{position:absolute;top:0;left:50%;width:min(600px,86%);display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,26,85,.1);border-radius:16px;padding:34px 36px 30px;cursor:pointer;box-shadow:0 26px 56px -30px rgba(0,26,85,.32);transition:transform .45s cubic-bezier(.22,.7,.3,1),opacity .35s,filter .35s} .accb-fan-c::before{content:"";position:absolute;top:0;left:36px;right:36px;height:2px;border-radius:2px;background:var(--bt)} .accb-fan-c.f0{transform:translateX(-50%) translateY(0) rotate(calc(var(--mx,0)*.8deg)) scale(1);z-index:3} .accb-fan-c.f1{transform:translateX(-46%) translateY(22px) rotate(3.2deg) scale(.97);z-index:2;opacity:.6;filter:saturate(.5)} .accb-fan-c.f2{transform:translateX(-54%) translateY(44px) rotate(-3.2deg) scale(.94);z-index:1;opacity:.4;filter:saturate(.4)} .accb-fan-c.f1:hover,.accb-fan-c.f2:hover{opacity:.85;filter:none} .accb-fan-c:focus-visible{outline:2px solid var(--ia-light-blue);outline-offset:3px} .accb-fan-c .acc-case-f{margin-top:auto} .accb-fan-hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);margin:0;font-size:14px;font-weight:500;color:rgba(0,26,85,.45)} @media (max-width:900px){.accb-fan{height:auto;perspective:none;display:grid;gap:20px}.accb-fan-c{position:relative;left:auto;width:auto}.accb-fan-c.f0,.accb-fan-c.f1,.accb-fan-c.f2{transform:none;opacity:1;filter:none}.accb-fan-hint{display:none}} /* --- Build stories, reveal option: problem on the face, build underneath --- */ .accb-rev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start} .accb-rev-c{position:relative;background:#fff;border:1px solid rgba(0,26,85,.1);border-radius:16px;padding:34px 32px 30px;box-shadow:0 20px 44px -28px rgba(0,26,85,.22);transition:box-shadow .3s,transform .3s cubic-bezier(.22,.7,.3,1)} .accb-rev-c::before{content:"";position:absolute;top:0;left:32px;right:32px;height:2px;border-radius:2px;background:var(--bt)} .accb-rev-c:hover,.accb-rev-c:focus-within{transform:translateY(-4px);box-shadow:0 32px 62px -28px rgba(0,26,85,.3)} .accb-rev-cue{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:0;background:none;border:0;font-family:inherit;font-size:14px;font-weight:500;color:var(--bt);cursor:pointer;transition:opacity .25s} .accb-rev-cue:focus-visible{outline:2px solid var(--ia-light-blue);outline-offset:3px;border-radius:3px} .accb-rev-cue::after{content:"↓"} .accb-rev-c:hover .accb-rev-cue,.accb-rev-c.is-open .accb-rev-cue{opacity:0;pointer-events:none} .accb-rev-back{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,.7,.3,1)} .accb-rev-c:hover .accb-rev-back,.accb-rev-c:focus-within .accb-rev-back,.accb-rev-c.is-open .accb-rev-back{grid-template-rows:1fr} .accb-rev-in{overflow:hidden;min-height:0} .accb-rev-in .accb-card-body{margin:0} .accb-rev-c:hover .accb-rev-in .accb-card-body,.accb-rev-c:focus-within .accb-rev-in .accb-card-body,.accb-rev-c.is-open .accb-rev-in .accb-card-body{margin:4px 0 22px} @media (max-width:980px){.accb-rev{grid-template-columns:minmax(0,1fr)}.accb-rev-back{grid-template-rows:1fr}.accb-rev-cue{display:none}} /* --- Build stories, wide tiles option: one per row, the first oversized --- */ .accb-tiles{display:grid;gap:20px} .accb-tile{display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:56px;background:#fff;border:1px solid rgba(0,26,85,.1);border-radius:16px;padding:34px 36px 30px;box-shadow:0 18px 40px -28px rgba(0,26,85,.2)} .accb-tile::before{content:"";position:absolute} .accb-tile{position:relative;overflow:hidden} .accb-tile::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--bt)} .accb-tile-k{display:grid;gap:8px;align-content:start} .accb-tile-s{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--ia-dark-blue);text-wrap:pretty} .accb-tile-kind{font-size:14px;font-weight:500;color:rgba(0,26,85,.55)} .accb-tile.is-lead{padding:44px 44px 38px} .accb-tile.is-lead .accb-card-prob{font-size:26px} .accb-tile .accb-card-prob{margin-top:0} @media (max-width:900px){.accb-tile{grid-template-columns:minmax(0,1fr);row-gap:18px}}