:root{ --navy-a:#16243C; --navy-b:#0E1828; --navy-deep:#08101B; --navy-grad:linear-gradient(160deg,#16243C,#0E1828); --ink-on-navy:#E6E9EF; --muted-on-navy:#9DAAC0; --logo-cream:#F5F2EA; --hairline-on-navy:#2A3A55; --bronze-bright:#C9A961; --bronze:#9C7A3F; --egg-bg:#FAF9F6; --egg-card:#FFFFFF; --egg-border:#E2E6EC; --text-primary:#18283F; --text-secondary:#45566E; --text-muted:#8B97A8; --danger:#C0392B; --font-display:"DM Serif Display",Georgia,serif; --font-body:"Spectral",Georgia,serif; --font-sans:"Inter",system-ui,sans-serif; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --maxw:1600px; --paper:#F5F1E7; --paper-line:#CBC4B2; --gut:48px; /* Home below-hero: the statement panel + its bronze dot texture (approved reference). */ --panel:#141F33; --dot-bronze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%239C7A3F' fill-opacity='0.18'/%3E%3C/svg%3E"); /* ---- Solution capability fields (editorial colour fields + metallic accents) ---- */ --navy-2:#1B2C48; --white:#FFFDF9; --muted-on-umber:#C9BEA6; --green:#3E7C5A; --amber:#B07E2E; --foil:linear-gradient(120deg,#7E6231,#C9A961 45%,#9C7A3F 70%,#D8BD7F); --field-clay:linear-gradient(160deg,#EFE7D6,#E2D4B6); --field-navy:radial-gradient(95% 130% at 80% 6%,#1B2C48,#0E1828 52%,#0A121E); --field-bronze:linear-gradient(155deg,#4A3A22,#3B2E1A 60%,#2E2413); --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:88px} body{font-family:var(--font-body);color:var(--text-primary);background:var(--egg-bg);-webkit-font-smoothing:antialiased} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px} .tm{font-family:var(--font-sans);font-size:.4em;vertical-align:super;letter-spacing:0} a:focus-visible,button:focus-visible{outline:2px solid var(--bronze-bright);outline-offset:3px;border-radius:4px} /* ---- shared reveal (every section's content; staggered per section by the observer) ---- */ /* FAIL-SAFE: the opacity:0 start state is gated on .js (set by an inline script in ), so with JavaScript off the copy is simply visible instead of a blank page. site.js also force-reveals everything after 1.5s in case an observer never fires. Never un-gate this. */ .js .r{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .r.in{opacity:1;transform:none} /* ---- eyebrow / emphasis ---- */ .eyebrow{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:var(--s5)} em{font-style:italic} /* ---- Masthead nav (shared by all four pages; fades in on Home once the hero is seen) ---- */ .nav{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(14,24,40,.5);backdrop-filter:blur(10px);opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease} body.home .nav{opacity:0;transform:translateY(-8px)} /* Home: hidden over the intro + hero */ body.home.hero-seen .nav{opacity:1;transform:none} /* revealed once the hero is seen */ .nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;padding:22px 40px} .lockup{display:flex;align-items:center;gap:14px;text-decoration:none} .mark{color:var(--logo-cream);display:block} /* still used by the intro panel's inline mark */ .nav-mark{height:40px;width:auto;color:var(--logo-cream);display:block} .wt{display:flex;flex-direction:column;line-height:1} .wordmark{font-family:var(--font-display);font-size:33px;color:var(--logo-cream);line-height:1} .tagline{font-family:var(--font-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-bright);margin-top:5px;white-space:nowrap} .rhead{display:flex;align-items:center;gap:30px;padding-bottom:4px} .lk{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-on-navy);text-decoration:none;padding-bottom:6px} .lk:hover{color:var(--ink-on-navy)} .lk.active{color:var(--logo-cream)} .cta-text{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--logo-cream);text-decoration:none;padding-bottom:5px;border-bottom:1px solid var(--bronze-bright)} /* MOBILE NAV. The hamburger is hidden above 720px, so desktop is untouched. When open, the menu panel is position:absolute UNDER the bar - it must never be in .nav's flow, because site.js measures .nav into --nav-h and .sol-head/.ed-wrap/.co-hero pad themselves by it; an in-flow panel would shove every page's content down the moment the menu opened. */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px; margin-right:-10px;padding:0 10px;background:none;border:0;cursor:pointer} .nav-burger span{display:block;height:2px;width:24px;background:var(--logo-cream);border-radius:2px; transition:transform .25s ease,opacity .2s ease} body.paper .nav-burger span{background:var(--text-primary)} .nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.open .nav-burger span:nth-child(2){opacity:0} .nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .masthead-rule{max-width:var(--maxw);margin:0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(201,169,97,.5) 15%,rgba(201,169,97,.5) 85%,transparent)} /* ---- inner-page header band (title only) ---- */ .page-head{background:linear-gradient(160deg,var(--navy-a),var(--navy-b));padding:150px 0 96px} /* top padding clears the fixed nav */ .page-title{font-family:var(--font-display);font-weight:400;color:var(--logo-cream);font-size:clamp(40px,4.4vw,60px);line-height:1.08;letter-spacing:-.01em} .page-body{min-height:40vh;background:var(--egg-bg)} /* ---- editorial language (paper field) — shared by rebuilt inner pages; supersedes the .page-head band ---- */ body.paper{background:var(--paper)} /* Paper-field nav. Scoped to body.paper so Home keeps the navy nav over its intro/hero and Solution/Company inherit this automatically on conversion. .wordmark/.tagline/.masthead-rule are BARE classes shared with the navy footer, so those three MUST stay scoped under .nav. */ body.paper .nav{background:var(--paper)} body.paper .nav-mark{color:var(--text-primary)} body.paper .nav .wordmark{color:var(--text-primary)} body.paper .nav .tagline{color:var(--text-secondary)} body.paper .lk{color:var(--text-secondary)} body.paper .lk:hover{color:var(--text-primary)} body.paper .lk.active{color:var(--text-primary)} body.paper .cta-text{color:var(--text-primary);border-bottom-color:var(--bronze)} body.paper .nav .masthead-rule{background:linear-gradient(90deg,transparent,rgba(156,122,63,.55) 15%,rgba(156,122,63,.55) 85%,transparent)} /* .nav is position:fixed and its height VARIES (the .rhead links wrap): 94px wide, up to 100/125/199px at the 821 / 481 / 320 worst cases. site.js measures it into --nav-h; the per-breakpoint fallbacks below are the worst case in each range, so whatever sits first on a page (Contact's .ed-wrap, Solution's .sol-head, Company's .co-hero) clears the nav even with JS off. Never hard-code one nav number. The running folio that used to lead the editorial pages is gone from BOTH of them, so its .ed-folio/.ed-folio-r/.ed-folio-solo rules are deleted and .ed-wrap now carries Contact's clearance itself — the same +88px air .sol-head uses, so the two editorial pages open on one rhythm. */ .ed-wrap{max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h,100px) + 88px) var(--gut) 120px;display:grid;grid-template-columns:1.5fr 1fr;gap:0} .ed-main{padding-right:8%} .ed-head{font-family:var(--font-display);font-weight:400;color:var(--text-primary);font-size:clamp(40px,4.6vw,68px);line-height:.92;letter-spacing:-.02em;margin-bottom:44px} .ed-stand{font-family:var(--font-body);font-size:22px;line-height:1.62;color:var(--text-primary);max-width:40ch} .ed-drop{float:left;font-family:var(--font-display);font-size:78px;line-height:.72;padding:8px 12px 0 0;color:var(--bronze)} .ed-side{border-left:1px solid var(--paper-line);padding-left:8%} .ed-ref{padding:26px 0;border-bottom:1px solid var(--paper-line)} .ed-ref:first-child{padding-top:6px} .ed-lab{display:block;font-family:var(--font-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px} .ed-val{font-family:var(--font-display);font-size:24px;color:var(--text-primary);text-decoration:none} .ed-val:hover{color:var(--bronze)} /* ---- Hero (photograph + navy scrim, verbatim from the approved hero) ---- */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:88px 0 64px;overflow:hidden;isolation:isolate;background:var(--navy-b)} .hero .photo{position:absolute;inset:0;z-index:-4;background-image:url('assets/hero-columns.jpg');background-size:cover;background-position:68% center} .hero .cool{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,rgba(14,24,40,.32),rgba(14,24,40,.44))} .hero .scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(14,24,40,.80) 0%,rgba(14,24,40,.56) 30%,rgba(14,24,40,.20) 60%,rgba(14,24,40,0) 88%)} .hero .vignette{position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 130% at 40% 40%,rgba(14,24,40,0) 46%,rgba(14,24,40,.5) 100%)} .hero .blend{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0E1828 0%,#0E1828 14%,rgba(14,24,40,0) 60%)} /* dissolves the intro panel's flat navy into the columns; painted after .vignette so it's the topmost layer */ .hero .fadeout{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(250,249,246,0) 80%,#FAF9F6 100%)} /* dissolves the columns into the off-white below — no hard seam at the hero's bottom edge */ .headline{font-family:var(--font-display);font-weight:400;color:var(--logo-cream);font-size:clamp(40px,4.8vw,66px);line-height:1.08;letter-spacing:-.01em;max-width:15ch;text-shadow:0 2px 32px rgba(0,0,0,.62)} .rule{width:64px;height:2px;background:var(--bronze-bright);margin:32px 0 26px} .subhead{font-family:var(--font-body);font-weight:500;font-size:clamp(19px,1.6vw,23px);line-height:1.55;color:var(--ink-on-navy);max-width:52ch;text-shadow:0 1px 20px rgba(0,0,0,.5)} .cta{display:inline-block;margin-top:40px;font-family:var(--font-sans);font-weight:500;font-size:15px;color:var(--navy-b);background:var(--logo-cream);text-decoration:none;padding:14px 28px;border-radius:999px} /* ---- Intro panel (first full-viewport section: flat navy, no image) ---- */ .intro{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#0E1828} .intro .mark{height:96px;width:auto;color:var(--logo-cream);filter:drop-shadow(0 4px 24px rgba(0,0,0,.5))} .intro .name{font-family:var(--font-display);font-size:clamp(56px,7.5vw,96px);color:var(--logo-cream);line-height:1;text-shadow:0 2px 40px rgba(0,0,0,.5)} .intro .tag{font-family:var(--font-sans);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze-bright)} .intro .cue{position:absolute;bottom:34px;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:0} .intro .cue span{width:4px;height:4px;border-radius:999px;background:var(--muted-on-navy);opacity:.20;animation:dotfall 2.4s infinite} .intro .cue span:nth-child(2){animation-delay:.384s} .intro .cue span:nth-child(3){animation-delay:.768s} @keyframes dotfall{0%,62%,100%{opacity:.20}30%{opacity:.92}} @media (prefers-reduced-motion:reduce){.intro .cue span{animation:none;opacity:.5}} /* ================= HOME - below the hero (ported from the approved reference) ================= Three moments: a big centred statement on a dotted bronze panel, the three problems as quiet supporting text, then the handoff into the Solution page. FIELD MELTS - every boundary dissolves, none of them step. Same stacked-gradient idiom the Solution page's colour fields use (.f-clay/.f-navy): an opaque melt-IN layer painted on top, an opaque seal-OUT layer beneath it, then the field itself, with each transparent endpoint written as rgba() of the colour underneath so the ramp never fades through grey. The hero above is UNTOUCHED, and its .fadeout resolves the hero's bottom edge to #FAF9F6 - so .stmt has to open on that exact cream and ramp into the panel. Never start .stmt on navy, and never "fix" this by editing .hero .fadeout. The last seal returns .handoff to --navy-b so it meets the navy .site-footer with no line. */ .stmt,.quiet,.handoff{position:relative;overflow:hidden} .stmt>.wrap,.quiet>.wrap,.handoff>.wrap{position:relative;z-index:1} .stmt .eyebrow,.quiet .eyebrow{font-size:12px;letter-spacing:.3em;color:var(--bronze-bright)} .eyebrow.center{display:block;text-align:center} .hl{color:var(--bronze-bright);font-style:italic} /* the centred statement face, shared by .stmt and the handoff */ .big{font-family:var(--font-display);font-weight:400;color:var(--logo-cream); font-size:clamp(38px,5vw,80px);line-height:1.03;letter-spacing:-.025em; text-align:center;max-width:17ch;margin:0 auto} /* -- 1. statement: melts out of the hero's cream into the dotted panel -- */ .stmt{padding:clamp(120px,18vh,220px) 0;background-color:var(--panel); background-image: linear-gradient(180deg,#FAF9F6 0%,var(--panel) 26%,rgba(20,31,51,0) 34%), linear-gradient(180deg,rgba(20,31,51,0) 84%,var(--panel) 100%), var(--dot-bronze); background-size:auto,auto,26px 26px; background-repeat:no-repeat,no-repeat,repeat} /* grain over the long cream-to-navy ramp: kills the banding a 300px light-to-dark traverse otherwise shows on wide gamut screens. Imperceptible as texture - do not raise the opacity. */ .stmt::before,.handoff::before{content:"";position:absolute;inset:0;background-image:var(--grain); opacity:.05;pointer-events:none;z-index:0} .stmt .eyebrow{margin-bottom:44px} .big-sub{font-family:var(--font-body);font-size:clamp(19px,1.7vw,25px);line-height:1.5; color:var(--muted-on-navy);text-align:center;max-width:52ch;margin:40px auto 0} /* -- 2. the problem, quiet -- */ .quiet{padding:clamp(90px,12vh,150px) 0;background-color:var(--navy-b); background-image:linear-gradient(180deg,var(--panel) 0%,rgba(14,24,40,0) 26%); background-repeat:no-repeat} .quiet .eyebrow{margin-bottom:64px} .q-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,90px);max-width:1200px;margin:0 auto} .q-cell{text-align:center;min-width:0} .q-name{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2vw,28px);color:var(--logo-cream);margin-bottom:16px} .q-body{font-family:var(--font-body);font-size:16px;line-height:1.64;color:var(--muted-on-navy); max-width:34ch;margin:0 auto;overflow-wrap:anywhere} /* -- 3. handoff: melts in from .quiet, seals back to the footer's navy -- */ .handoff{padding:clamp(120px,17vh,210px) 0;text-align:center;background-color:var(--navy-b); background-image: linear-gradient(180deg,var(--navy-b) 0%,rgba(10,18,30,0) 24%), linear-gradient(180deg,rgba(14,24,40,0) 78%,var(--navy-b) 100%), radial-gradient(120% 120% at 50% 120%,var(--navy-a),var(--navy-b) 55%,#0A121E); background-repeat:no-repeat} .cream-line{color:var(--logo-cream)} .handoff-link{display:inline-block;margin-top:40px;font-family:var(--font-sans);font-size:15px;letter-spacing:.04em; color:var(--logo-cream);text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--bronze-bright); transition:border-color .2s ease} .handoff-link:hover{border-bottom-color:var(--logo-cream)} /* ---- footer (mirrors the masthead) ---- */ .site-footer{background:var(--navy-b)} .site-footer .masthead-rule{margin:0 auto} .ft-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:52px 40px 30px} .ft-brand{display:flex;align-items:center;gap:14px;text-decoration:none} .ft-mark{height:44px;width:auto;color:var(--logo-cream);display:block} .ft-nav{display:flex;gap:34px} .ft-nav a{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-on-navy);text-decoration:none} .ft-nav a:hover{color:var(--logo-cream)} .ft-fine{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:22px 40px 40px;border-top:1px solid var(--hairline-on-navy)} .ft-fine span{font-family:var(--font-sans);font-size:13px;color:#7C89A0} .ft-mail{font-family:var(--font-sans);font-size:13px;color:var(--muted-on-navy);text-decoration:none} .ft-mail:hover{color:var(--logo-cream)} /* ================= SOLUTION - capability fields (ported from the approved prototype) ================= Three editorial colour fields, each with the grain overlay, a corner treatment, and a recreated product-UI card on a stacked-paper base. This page has NO running folio, so .sol-head itself carries the fixed-nav clearance (same calc(var(--nav-h,…) + 88px) pattern .ed-wrap uses on Contact, with the matching per-breakpoint fallbacks below). The .ed-head override is scoped to .sol-head so Contact is untouched. --maxw/--gut stay the site-wide values. */ .sol-head{max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h,100px) + 88px) var(--gut) 20px} .sol-head .ed-head{line-height:1;margin-bottom:0} /* The headline's bottom padding and the first section's top padding used to stack into ~138px of dead clay before CaseFlow began, pushing the card most of a screen down. Only the FIRST section is tightened (104 -> 64) so the 104+104 rhythm BETWEEN sections is untouched. */ main > .sec:first-of-type .sec-in{padding-top:64px} .sec{position:relative;overflow:hidden} .sec::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;pointer-events:none;z-index:0} .sec-in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);gap:7%;align-items:start;padding:104px var(--gut)} .sec.flip .sec-copy{order:2} .sec.flip .sec-el{order:1} .sec-name{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3.2vw,44px);margin-bottom:22px} .sec-body{font-family:var(--font-body);font-size:19px;line-height:1.64} .sec-el{display:flex;justify-content:center} /* three distinct fields */ .f-clay{background:linear-gradient(180deg,var(--paper) 0%,rgba(245,241,231,0) 20%),linear-gradient(180deg,rgba(27,44,72,0) 58%,#1B2C48 100%),var(--field-clay)} .f-clay .sec-name{color:var(--text-primary)} .f-clay .sec-body{color:var(--text-secondary)} .f-navy{background:linear-gradient(180deg,#1B2C48 0%,rgba(27,44,72,0) 38%),linear-gradient(180deg,rgba(74,58,34,0) 60%,#4A3A22 100%),var(--field-navy)} .f-navy::after{content:"";position:absolute;top:0;right:2%;width:56%;height:66%;background:radial-gradient(circle at 68% 32%,rgba(201,169,97,.16),rgba(201,169,97,0) 60%);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 52%,#000 62%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 52%,#000 62%,rgba(0,0,0,0) 100%)} .f-navy .sec-name{color:var(--logo-cream)} .f-navy .sec-body{color:var(--muted-on-navy)} .f-bronze{background:linear-gradient(180deg,#4A3A22 0%,rgba(74,58,34,0) 40%),var(--field-bronze)} .f-bronze::after{content:"";position:absolute;top:0;left:0;width:56%;height:70%;background:radial-gradient(circle at 30% 30%,rgba(201,169,97,.14),rgba(201,169,97,0) 62%);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 52%,#000 62%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 52%,#000 62%,rgba(0,0,0,0) 100%)} .f-bronze .sec-name{color:var(--logo-cream)} .f-bronze .sec-body{color:var(--muted-on-umber)} /* the product-UI card on its stacked-paper base */ .ui-stack{position:relative;width:100%;max-width:475px} .ui-behind{position:absolute;inset:16px -16px -16px 16px;background:rgba(255,255,255,.5);border:1px solid var(--paper-line);border-radius:16px;transform:rotate(1.6deg);z-index:0} .ui-behind.b2{inset:30px -30px -30px 30px;transform:rotate(3deg);opacity:.55} .f-navy .ui-behind,.f-bronze .ui-behind{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)} .ui{position:relative;z-index:2;background:linear-gradient(180deg,var(--white),#F6F1E7);border:1px solid var(--paper-line);border-radius:16px;padding:0 30px 26px;box-shadow:0 44px 90px -38px rgba(24,40,63,.55);overflow:hidden} .ui::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--foil)} .ui-top{display:flex;align-items:center;justify-content:space-between;padding:20px 0 16px;border-bottom:1px solid var(--paper-line);margin-bottom:18px} .ui-eyebrow{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)} .ui-chip-mini{font-family:var(--font-sans);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--paper-line);border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center;gap:5px} .ui-chip-mini.ok{color:var(--green);border-color:rgba(62,124,90,.4)} .ico-check{width:6px;height:6px;border-radius:999px;background:var(--green);display:inline-block} .dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:7px;vertical-align:middle} .dot-green{background:var(--green)} .ui-footnote{margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-line);font-family:var(--font-sans);font-size:11px;color:var(--text-muted);font-style:italic} /* CaseFlow card */ .wf-title{font-family:var(--font-display);font-weight:400;font-size:25px;color:var(--text-primary);margin-bottom:10px} .wf-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .wf-tag{font-family:var(--font-sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)} .wf-count{font-family:var(--font-sans);font-size:13px;color:var(--text-muted)} .wf-deadline{font-family:var(--font-sans);font-size:12px;color:var(--text-secondary);background:rgba(156,122,63,.08);border:1px solid rgba(156,122,63,.2);border-radius:8px;padding:8px 12px;margin-bottom:16px;display:flex;align-items:center;gap:8px} .ico-cal{width:11px;height:11px;border:1.5px solid var(--bronze);border-radius:2px;display:inline-block;flex:0 0 11px} .wf-progress{height:4px;background:var(--paper-line);border-radius:999px;overflow:hidden;margin-bottom:20px} .wf-progress span{display:block;height:100%;background:var(--foil)} .wf-roadmap-label{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:12px} .wf-steps{position:relative;display:flex;flex-direction:column} .wf-steps::before{content:"";position:absolute;left:13px;top:20px;bottom:20px;width:1px;background:var(--paper-line)} .wf-step{position:relative;display:flex;align-items:center;gap:13px;padding:8px 0} .wf-dot{position:relative;z-index:1;flex:0 0 27px;width:27px;height:27px;border-radius:999px;border:1px solid var(--paper-line);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:12px;color:var(--text-muted);background:#fff} .wf-step.done .wf-dot{background:var(--navy-b);color:var(--logo-cream);border-color:var(--navy-b)} .wf-step.active .wf-dot{border-color:var(--bronze);color:var(--bronze);box-shadow:0 0 0 3px rgba(201,169,97,.18)} .wf-steptxt{flex:1;font-family:var(--font-body);font-size:15px;color:var(--text-primary)} .wf-step.active .wf-steptxt{font-weight:500} .mini-av{width:22px;height:22px;border-radius:999px;background:var(--navy-2);color:#fff;font-family:var(--font-sans);font-size:9px;display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;border:2px solid var(--white);flex:0 0 22px} /* Performance card */ .perf-head{display:flex;align-items:center;gap:13px;margin-bottom:18px} .perf-avatar{width:44px;height:44px;border-radius:999px;background:var(--navy-b);color:var(--logo-cream);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:14px;font-weight:600;flex:0 0 44px} .perf-name{font-family:var(--font-display);font-size:20px;color:var(--text-primary)} .perf-role{font-family:var(--font-sans);font-size:12px;color:var(--text-muted)} .perf-badge{margin-left:auto;font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--amber);padding:3px 10px;border-radius:6px;white-space:nowrap} .perf-dims{display:flex;flex-direction:column;gap:11px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--paper-line)} .pd{display:flex;align-items:center;gap:12px} .pd-l{flex:0 0 84px;font-family:var(--font-sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)} .pips{display:flex;gap:4px;flex:1} .pip{width:100%;height:5px;border-radius:999px;background:var(--paper-line)} .pip.on{background:var(--bronze)} .pd b{font-family:var(--font-sans);font-size:10px;font-weight:600;padding:3px 9px;border-radius:6px;white-space:nowrap} .b-exc{color:#fff;background:var(--green)} .b-dev{color:#fff;background:var(--amber)} .perf-narr{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text-secondary)} .perf-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-line)} .perf-avstack{display:flex;align-items:center} .perf-avstack i{width:24px;height:24px;border-radius:999px;background:var(--navy-2);color:#fff;font-family:var(--font-sans);font-size:9px;font-style:normal;display:flex;align-items:center;justify-content:center;margin-left:-7px;border:2px solid var(--white)} .perf-avstack i:first-child{margin-left:0} .perf-avstack em{margin-left:8px;font-style:normal;font-family:var(--font-sans);font-size:11px;color:var(--text-muted)} .perf-src{font-family:var(--font-sans);font-size:11px;color:var(--text-muted)} /* Staffing card */ .staff-role{font-family:var(--font-display);font-size:18px;color:var(--text-primary);margin-bottom:16px} .staff-person{display:flex;align-items:center;gap:13px;margin-bottom:14px} .staff-avatar{width:44px;height:44px;border-radius:999px;background:var(--foil);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:14px;font-weight:600;flex:0 0 44px} .staff-id{flex:1;min-width:0} .staff-name{font-family:var(--font-display);font-size:20px;color:var(--text-primary)} .staff-sub{font-family:var(--font-sans);font-size:12px;color:var(--text-muted)} .staff-assign{font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--logo-cream);background:var(--navy-b);padding:9px 20px;border-radius:8px;text-decoration:none;white-space:nowrap} .staff-cap{display:flex;align-items:center;gap:11px;margin-bottom:16px} .staff-cap-l{font-family:var(--font-sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)} .cap-bar{flex:1;height:5px;background:var(--paper-line);border-radius:999px;overflow:hidden} .cap-bar span{display:block;height:100%;background:var(--green)} .staff-cap-v{font-family:var(--font-sans);font-size:12px;color:var(--green);white-space:nowrap} .staff-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .chip{font-family:var(--font-sans);font-size:12px;color:var(--text-secondary);background:#fff;border:1px solid var(--paper-line);border-radius:999px;padding:6px 12px} .staff-why{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--text-muted);padding:14px 0;border-top:1px solid var(--paper-line)} .staff-why b{color:var(--text-primary);font-family:var(--font-sans);font-size:12px;letter-spacing:.03em} .staff-alt{display:flex;align-items:center;gap:9px;padding-top:14px;border-top:1px solid var(--paper-line);font-family:var(--font-sans);font-size:12px;color:var(--text-muted)} .staff-alt b{color:var(--text-primary)} .staff-alt-av{width:24px;height:24px;border-radius:999px;background:var(--navy-2);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;flex:0 0 24px} .staff-alt-more{margin-left:auto;color:var(--bronze);white-space:nowrap} /* section scroll reveal (site.js observes .reveal; neutralized in the reduced-motion block below) */ .js .reveal .r1,.js .reveal .r2,.js .reveal .r3{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .reveal .r2{transition-delay:.09s} .reveal .r3{transition-delay:.17s} .reveal.in .r1,.reveal.in .r2,.reveal.in .r3{opacity:1;transform:none} /* ================= COMPANY - navy label-rail grid (ported from the approved prototype) ================= A deep-navy field carrying ONE type scale: a single dominant headline, then every section is a small bronze label in a 260px left rail beside its content in the right column, all on the same two columns down the page with a full-bleed hairline between. No decorative marks, no cards, and no scroll reveal (the prototype has none, and Contact - the other editorial page - has none either). Reuses .wrap for the max-width + gutters (including its 820/480 gutter steps), so this block only owns the grid, the rail and the type. --maxw/--gut stay the site-wide values, as on Solution. */ body.co-page{background:radial-gradient(130% 80% at 85% -5%,#1A2C48,var(--navy-b) 55%,var(--navy-deep))} /* the field's outer stop is --navy-deep, so the shared footer is darkened to match and the seam above it disappears (the base .site-footer is the lighter --navy-b, which would step visibly here). */ body.co-page .site-footer{background:var(--navy-deep)} /* .nav is position:fixed, so the hero carries its own clearance: the hero air (--co-air) plus the measured nav height, with the same per-breakpoint worst-case --nav-h fallbacks .sol-head/.ed-wrap use (125px at 820, 199px at 480). Never hard-code one nav number, and never drop the calc. ROOMY TEST (2026-09-10): --co-air 11vh -> 17vh (99 -> 153px of air at 1440x900) and the bottom 7vh -> 8.5vh (63 -> 77px). --co-air is the AIR BELOW THE NAV, not the total padding-top. */ .co-hero{--co-air:clamp(96px,17vh,170px);padding:calc(var(--nav-h,100px) + var(--co-air)) 0 clamp(64px,8.5vh,100px)} .co-label{display:block;font-family:var(--font-sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-bright)} .co-hero .co-label{margin-bottom:28px} .co-h1{font-family:var(--font-display);font-weight:400;color:var(--logo-cream);font-size:clamp(44px,5vw,72px);line-height:1.02;letter-spacing:-.02em;max-width:18ch} /* the hairline is full-bleed: it sits on the section, while .wrap holds the content in. ROOMY TEST (2026-09-10): 6vh -> 14vh (54 -> 130px per side at 1440, so 108 -> 260px across the hairline between two sections). This is the between-section pause the test is about; the WITHIN- section rhythm is deliberately untouched (.co-grid's 72px rail gap, .co-advisors, .co-adv). Every co-* class is Company-only, so this cannot reach Solution/Contact/Home. */ .co-row{padding:clamp(72px,14vh,130px) 0;border-top:1px solid var(--hairline-on-navy)} .co-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:start} .co-rail .co-label{padding-top:6px} /* the prototype leaves this measure uncapped, which lands at ~935px in its own 1440/6vw frame; the repo's wider 1600/48 frame would run it past 1150px, so it is capped to hold the approved measure. */ .co-body{font-family:var(--font-body);font-size:20px;line-height:1.62;color:var(--logo-cream);max-width:93ch} /* The two cards share ONE baseline across the row. Each card spans the grid's row pair and adopts those row heights (subgrid), so the header block and the bio start at the same y in both cards even when one advisor's role wraps to a second line - previously a wrapped role pushed that card's name and role up 4px and dropped its rule 7px (visible ~960-1180px). The cards are PORTRAITS: a 120px photo on top, then name and role, with the bio under the hairline. The fixed-height photo puts both names on a shared top edge by construction (it replaced align-items:flex-start, which did that job when the photo sat beside the name). The rule lives on the BIO's border-top, not on the header, so it is by construction exactly the bio's width and can never overhang it. */ .co-advisors{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:clamp(48px,6vw,110px)} .co-adv{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:22px} .co-adv-top{display:block} .co-adv-photo{width:120px;height:120px;border-radius:999px;border:1px solid var(--bronze);object-fit:cover;display:block;margin-bottom:24px} .co-adv-name{font-family:var(--font-display);font-weight:400;font-size:24px;color:var(--logo-cream);line-height:1} .co-adv-role{display:block;font-family:var(--font-sans);font-size:12px;letter-spacing:.05em;color:var(--bronze-bright);margin-top:8px} .co-adv-bio{font-family:var(--font-body);font-size:16px;line-height:1.66;color:var(--muted-on-navy);max-width:44ch; padding-top:22px;border-top:1px solid var(--hairline-on-navy)} /* Without subgrid the rule cannot ride a shared row edge, so reserve the second role line. */ @supports not (grid-template-rows:subgrid){ .co-adv-role{min-height:30px} } @media (max-width:900px){ .q-grid{grid-template-columns:1fr;gap:44px} .co-grid{grid-template-columns:1fr;gap:20px} .co-advisors{grid-template-columns:1fr;gap:34px} .sec-in{grid-template-columns:1fr;gap:44px} .sec.flip .sec-copy,.sec.flip .sec-el{order:0} .ui-stack{max-width:100%} } @media (prefers-reduced-motion:reduce){ .nav,body.home .nav{opacity:1;transform:none;transition:none} .hero .r{opacity:1;transform:none;transition:none} .r{opacity:1!important;transform:none!important;transition:none!important} .reveal .r1,.reveal .r2,.reveal .r3{opacity:1!important;transform:none!important;transition:none!important} html{scroll-behavior:auto} } @media (max-width:820px){ .wrap{padding:0 24px} .ed-wrap{grid-template-columns:1fr;gap:40px;padding-left:24px;padding-right:24px;padding-top:calc(var(--nav-h,72px) + 88px)} .sol-head{padding-left:24px;padding-right:24px;padding-top:calc(var(--nav-h,72px) + 88px)} .co-hero{padding-top:calc(var(--nav-h,72px) + var(--co-air))} .sec-in{padding-left:24px;padding-right:24px} .ed-side{border-left:none;padding-left:0} .nav-in{padding:14px 24px;align-items:center} .nav-mark{height:28px} .wordmark{font-size:21px} .tagline{font-size:9px} .rhead{gap:18px;flex-wrap:wrap;justify-content:flex-end;padding-bottom:0} .lk,.cta-text{font-size:11px;letter-spacing:.14em} .hero .scrim{background:linear-gradient(180deg,rgba(14,24,40,.64),rgba(14,24,40,.82))} .headline{max-width:20ch} .page-head{padding:130px 0 72px} .ft-in{padding:40px 24px 24px;gap:24px;flex-wrap:wrap} .ft-nav{gap:20px;flex-wrap:wrap} .ft-fine{padding:20px 24px 32px} } /* ===================== MOBILE NAV + TAP TARGETS (<=720px) ===================== Desktop (>720px) is completely unaffected: every rule here is inside the query. */ @media (max-width:720px){ .nav-in{align-items:center;padding:8px 16px} .nav-burger{display:flex} /* Without JS the burger cannot toggle, so leave the links as the old inline row rather than hiding them behind a control that does nothing. Only .js turns them into a panel. */ .js .rhead{ display:none;position:absolute;top:100%;left:0;right:0;z-index:19; flex-direction:column;align-items:stretch;gap:0; padding:6px 16px 14px;background:var(--navy-b); border-bottom:1px solid var(--hairline-on-navy); box-shadow:0 18px 40px -18px rgba(0,0,0,.55) } .js body.paper .rhead,.js.paper .rhead{background:var(--paper);border-bottom-color:var(--paper-line)} .js .nav.open .rhead{display:flex} /* >=44px tap targets, stacked, each on its own hairline */ .rhead .lk,.rhead .cta-text{ display:flex;align-items:center;min-height:48px;padding:0; font-size:13px;letter-spacing:.14em;border-bottom:0 } .js .rhead .lk,.js .rhead .cta-text{border-bottom:1px solid var(--hairline-on-navy)} .js body.paper .rhead .lk,.js body.paper .rhead .cta-text{border-bottom-color:var(--paper-line)} .js .rhead .cta-text{color:var(--bronze-bright);border-bottom:0} .js body.paper .rhead .cta-text{color:var(--bronze)} /* footer: 15px links become 44px rows */ .ft-nav{flex-direction:column;gap:0;align-items:flex-start} .ft-nav a{display:flex;align-items:center;min-height:44px} .ft-mail{display:inline-flex;align-items:center;min-height:44px} } /* ===================== MOBILE SPACING (<=600px) ===================== The desktop clamps run to 66% padding on a phone. Desktop values are untouched. */ @media (max-width:600px){ .co-hero{--co-air:clamp(64px,9vh,96px)} .co-row{padding:56px 0} .stmt{padding:64px 0} .handoff{padding:64px 0} .quiet{padding:56px 0} .stmt .eyebrow{margin-bottom:28px} .quiet .eyebrow{margin-bottom:36px} .big-sub{margin-top:28px} /* the offset paper layers run past the right edge and get clipped mid-stack at this width */ .ui-behind{display:none} } @media (max-width:480px){ .nav-in{padding:8px 16px} .ed-wrap{padding-left:16px;padding-right:16px;padding-top:calc(var(--nav-h,64px) + 88px)} .sol-head{padding-left:16px;padding-right:16px;padding-top:calc(var(--nav-h,64px) + 88px)} .co-hero{padding-top:calc(var(--nav-h,64px) + var(--co-air))} .sec-in{padding-left:16px;padding-right:16px;padding-top:72px;padding-bottom:72px} /* the base first-section rule outranks the line above (0,3,1 vs 0,1,0), so scale it here on purpose */ main > .sec:first-of-type .sec-in{padding-top:44px} .rhead{gap:12px} .lk,.cta-text{font-size:10px;letter-spacing:.1em} .ft-in{flex-direction:column;align-items:flex-start;padding:36px 16px 20px} .ft-fine{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px 28px} /* long-form copy is set for desktop measure; at 390px it makes very tall paragraphs */ .co-body{font-size:17px} .sec-body{font-size:17px} .ed-stand{font-size:17px} .ed-drop{font-size:52px;padding-right:10px} }