/* Selected reference compositions, scoped strictly below the existing hero. */ #home-view.public-landing-shell > .section-container.public-section { --section-navy:#0b1e33; --section-body:#bccadb; --section-mint:#62deb5; box-sizing:border-box; width:100%; max-width:none; margin:0; padding:72px max(40px,calc((100% - 1272px)/2)); border:0; border-radius:0!important; box-shadow:none; clip-path:none; } #home-view.public-landing-shell > .public-section .section-title, #home-view.public-landing-shell #sourcing-savings h2 { margin:0; color:#0a1428; font-size:clamp(38px,4vw,58px); font-weight:400; line-height:1.08; letter-spacing:-.055em!important; text-wrap:pretty; } #home-view.public-landing-shell > .public-section .section-description { margin:0; max-width:54ch; font-size:19px; line-height:1.6; color:#536176; } #home-view.public-landing-shell > .public-section .section-kicker, #home-view.public-landing-shell #sourcing-savings .sourcing-savings-kicker { display:flex; align-items:center; gap:14px; margin:0 0 32px; color:#087e6b; font-size:12px; font-weight:600; letter-spacing:.065em!important; line-height:1.5; text-transform:uppercase; } #home-view.public-landing-shell > .public-section .section-kicker::before, #home-view.public-landing-shell #sourcing-savings .sourcing-savings-kicker::before { content:''; position:static; width:42px; height:1px; background:currentColor; flex-shrink:0; } /* Pale benchmark panel. */ #home-view.public-landing-shell #sourcing-savings { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:40px 64px; padding-block:90px 64px; background:#f5fbf9 url('../landing/section-mint.webp') center/cover no-repeat; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-copy { display:block; } #home-view.public-landing-shell #sourcing-savings h2 { font-size:clamp(38px,4.35vw,63px); max-width:20ch; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-copy p { max-width:45ch; margin:24px 0 0; font-size:20px; line-height:1.6; color:#626e7b; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search { margin:28px 0 0; min-width:0; width:100%; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; padding:13px; border:1px solid #d9e8e5; border-radius:16px!important; background:#fff; box-shadow:0 3px 14px #12304203; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar > i { color:#0a1428; margin-left:10px; font-size:19px; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar input { color:#0a1428; font-size:16px; padding:0; min-width:0; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar input::placeholder { color:#67717a; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar button { grid-column:auto; width:auto; min-height:54px; padding:14px 24px; border-radius:10px; background:#0a1428; color:white; font-size:17px; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar button:hover { background:#1a304b; } #home-view.public-landing-shell #sourcing-savings .savings-assurances { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:24px 44px; list-style:none; padding:0; margin:0; font-size:16px; color:#25334a; } #home-view.public-landing-shell #sourcing-savings .savings-assurances li { display:flex; align-items:center; gap:12px; } #home-view.public-landing-shell #sourcing-savings .savings-assurances i { color:#249c7e; font-size:24px; } #home-view.public-landing-shell #sourcing-savings :is(.sourcing-savings-result,.sourcing-savings-rollout-note) { grid-column:1/-1; margin:0; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-result:empty { display:none; } /* Two featured comparisons with optional supporting information. */ #home-view.public-landing-shell #value-proposition { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px 88px; align-items:start; background:var(--section-navy); color:#fff; padding-block:60px; } #home-view.public-landing-shell #value-proposition .value-intro .section-title { grid-column:1; grid-row:1; color:#fff; font-size:clamp(38px,4vw,56px); } #home-view.public-landing-shell #value-proposition .value-intro .section-description { grid-column:1; grid-row:2; color:var(--section-body); } #home-view.public-landing-shell #value-proposition .value-grid--featured { grid-column:2; grid-row:1/3; } #home-view.public-landing-shell #value-proposition .value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; margin:0; } #home-view.public-landing-shell #value-proposition .value-card:nth-child(n) { display:block; min-width:0; padding:30px; border:1px solid #34465a; border-radius:22px!important; background:#1a2d41; box-shadow:none; } #home-view.public-landing-shell #value-proposition .value-card-graph { display:grid; grid-template-columns:1fr; gap:0; margin:0 0 28px; } #home-view.public-landing-shell #value-proposition .value-graph-row { display:flex; flex-direction:column; align-items:start; gap:9px; } #home-view.public-landing-shell #value-proposition .value-graph-row + .value-graph-row { border-top:1px solid #405063; padding-top:16px; margin-top:20px; } #home-view.public-landing-shell #value-proposition .value-graph-label { color:#d0d9e4; font-size:14px; line-height:1.4; } #home-view.public-landing-shell #value-proposition .value-graph-value { color:#a5b2c3; font-size:clamp(38px,3.6vw,52px); line-height:1.1; font-weight:400; } #home-view.public-landing-shell #value-proposition .comparison-caption { color:#b4c1cf; font-size:16px; } #home-view.public-landing-shell #value-proposition .value-graph-row:last-child .value-graph-value { color:var(--section-mint); order:-1; } #home-view.public-landing-shell #value-proposition .value-graph-row:last-child .value-graph-label { color:#9bcebd; font-size:16px; } #home-view.public-landing-shell #value-proposition .comparison-arrow { color:var(--section-mint); float:left; font-size:20px; margin:0 12px 0 0; line-height:1.4; } #home-view.public-landing-shell #value-proposition .value-card h3 { color:#81e7c6; font-size:15px; line-height:1.6; font-weight:500; margin:0; letter-spacing:-.02em!important; } #home-view.public-landing-shell #value-proposition .value-card p { color:var(--section-body); font-size:16px; line-height:1.7; } #home-view.public-landing-shell #value-proposition .comparison-details { grid-column:1/-1; color:var(--section-body); margin-top:8px; } #home-view.public-landing-shell #value-proposition .comparison-explanations { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:24px 0; font-size:16px; line-height:1.7; } #home-view.public-landing-shell > .public-section .landing-details summary { width:fit-content; min-height:44px; padding-block:12px; cursor:pointer; font-size:14px; line-height:1.5; } #home-view.public-landing-shell > .public-section .landing-details summary:hover { text-decoration:underline; text-underline-offset:4px; } #home-view.public-landing-shell > .public-section .landing-details summary:focus-visible { outline:2px solid #0d8f89; outline-offset:5px; } /* Four process cards on one navy plane. */ #home-view.public-landing-shell #solution { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:0 92px; background:var(--section-navy); color:#fff; padding-block:68px 40px; } #home-view.public-landing-shell #solution .section-kicker { grid-column:1/-1; color:#62deb5; margin-bottom:24px; } #home-view.public-landing-shell #solution .section-title { color:#fff; font-size:clamp(38px,3.9vw,56px); } #home-view.public-landing-shell #solution .section-description { align-self:center; color:var(--section-body); font-size:18px; } #home-view.public-landing-shell #solution .bridge-process { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:40px 0 0; } #home-view.public-landing-shell #solution .bridge-process li { display:block; position:relative; padding:30px 24px; border:1px solid #3b4b5c; border-radius:15px; background:#13263a; } #home-view.public-landing-shell #solution .bridge-process-number { color:#36d4a2; font-size:54px; line-height:1; margin:0 0 30px; letter-spacing:-.06em!important; } #home-view.public-landing-shell #solution li:first-child .bridge-process-number { color:#54cef1; } #home-view.public-landing-shell #solution li:nth-child(3) .bridge-process-number { color:#4fd7bd; } #home-view.public-landing-shell #solution li:last-child .bridge-process-number { color:#c1b2fc; } #home-view.public-landing-shell #solution .process-icon { position:absolute; right:28px; top:40px; font-size:34px; color:#edf4fc; } #home-view.public-landing-shell #solution .bridge-process h3 { color:#fff; font-size:19px; font-weight:500; line-height:1.35; min-height:0; margin:0 0 14px; } #home-view.public-landing-shell #solution .bridge-process p { color:var(--section-body); font-size:15.5px; line-height:1.55; margin:0; } /* Photograph is illustrative; team details and logos remain available. */ #home-view.public-landing-shell #about { display:grid; grid-template-columns:1fr 1.06fr; gap:36px 64px; align-items:start; background:#f7fcfa url('../landing/section-mint.webp') center/cover no-repeat; padding-block:56px; } #home-view.public-landing-shell #about .section-title { font-size:clamp(38px,3.8vw,55px); } #home-view.public-landing-shell #about .section-kicker { margin-bottom:26px; } #home-view.public-landing-shell #about .about-lead { color:#5a6577; font-size:18px; line-height:1.55; margin:26px 0 34px; } #home-view.public-landing-shell #about .about-principles { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } #home-view.public-landing-shell #about .about-principles li { display:flex; align-items:center; gap:16px; color:#25344b; font-size:13px; line-height:1.4; } #home-view.public-landing-shell #about .about-principles i { color:#098d73; font-size:28px; } #home-view.public-landing-shell #about .about-visual { position:relative; min-width:0; } #home-view.public-landing-shell #about .about-port { display:block; width:100%; height:358px; object-fit:cover; object-position:40% center; border-radius:15px; } #home-view.public-landing-shell #about .about-benefit-panel { position:absolute; top:42px; right:-28px; width:54%; min-width:280px; margin:0; padding:8px 26px; list-style:none; border-radius:16px; background:#f7fdfa; box-shadow:0 12px 36px #16334708; } #home-view.public-landing-shell #about .about-benefit-panel li { display:grid; grid-template-columns:32px 1fr; gap:20px; align-items:center; padding:23px 0; } #home-view.public-landing-shell #about .about-benefit-panel li + li { border-top:1px solid #e3efeb; } #home-view.public-landing-shell #about .about-benefit-panel i { color:#079c80; font-size:29px; } #home-view.public-landing-shell #about .about-benefit-panel strong { display:block; color:#0a1428; font-size:15px; font-weight:500; line-height:1.4; } #home-view.public-landing-shell #about .about-benefit-panel span { display:block; margin-top:5px; color:#5a6577; font-size:13px; line-height:1.4; } #home-view.public-landing-shell #about .about-content { grid-column:1/-1; min-width:0; color:#344054; } #home-view.public-landing-shell #about .about-text { max-width:100%; margin-top:20px; } #home-view.public-landing-shell #about .about-text > p { font-size:17px; line-height:1.85; max-width:80ch; color:#344054; } #home-view.public-landing-shell #about .about-text strong { color:#0a1428; } #home-view.public-landing-shell #about .trust-banner-container { border-color:#cfdfda; margin-top:28px; } #home-view.public-landing-shell #about .trust-marquee { display:block; overflow:visible; mask-image:none; } #home-view.public-landing-shell #about .marquee-content { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; gap:24px; animation:none!important; transform:none; } #home-view.public-landing-shell #about .marquee-content + .marquee-content { display:none; } #home-view.public-landing-shell #about .trust-logo { min-width:0; width:auto; height:70px; padding:10px; background:transparent; border:0; } #home-view.public-landing-shell #about .trust-logo img { width:auto; max-width:100%; height:32px; object-fit:contain; } /* Contact extends the selected language without changing the form. */ #home-view.public-landing-shell #contact { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; background:#fff; padding-block:96px; } #home-view.public-landing-shell #contact .contact-grid { display:grid; grid-template-columns:1fr; gap:36px; } #home-view.public-landing-shell #contact .contact-info p { font-size:18px; line-height:1.7; margin:0; color:#536176; } #home-view.public-landing-shell #contact .contact-list { display:flex; flex-wrap:wrap; gap:16px 32px; margin-top:24px; } #home-view.public-landing-shell #contact .contact-item { color:#0a1428; font-size:14px; } #home-view.public-landing-shell #contact .contact-form { border-top:1px solid #d9dde3; padding-top:32px; } #home-view.public-landing-shell #contact .contact-form label { color:#0a1428; font-size:14px; } #home-view.public-landing-shell #contact .contact-form :is(input,textarea) { color:#0a1428; background:#fff; border-color:#929dab!important; border-radius:8px; } #home-view.public-landing-shell #contact .contact-form :is(input,textarea)::placeholder { color:#536176; } @media(max-width:1100px) { #home-view.public-landing-shell #sourcing-savings { column-gap:32px; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar { gap:10px; padding:10px; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar button { padding-inline:14px; } #home-view.public-landing-shell #value-proposition { gap:28px 40px; } #home-view.public-landing-shell #value-proposition .value-grid { gap:16px; } #home-view.public-landing-shell #value-proposition .value-card:nth-child(n) { padding:22px; } #home-view.public-landing-shell #solution { column-gap:40px; } #home-view.public-landing-shell #solution .bridge-process { grid-template-columns:repeat(2,minmax(0,1fr)); } #home-view.public-landing-shell #solution .bridge-process h3 { min-height:0; } #home-view.public-landing-shell #about { gap:30px; } #home-view.public-landing-shell #about .about-principles { grid-template-columns:1fr; gap:16px; } #home-view.public-landing-shell #about .about-benefit-panel { position:relative; top:auto; right:auto; width:auto; min-width:0; margin:-60px 16px 0; } #home-view.public-landing-shell #contact { gap:40px; } } @media(max-width:767px) { #home-view.public-landing-shell > .section-container.public-section { padding:56px 24px; } #home-view.public-landing-shell #sourcing-savings,#home-view.public-landing-shell #value-proposition,#home-view.public-landing-shell #solution,#home-view.public-landing-shell #about,#home-view.public-landing-shell #contact { grid-template-columns:minmax(0,1fr); gap:28px; } #home-view.public-landing-shell #sourcing-savings h2 { font-size:42px; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search { margin:0; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar { grid-template-columns:auto minmax(0,1fr); } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-search-bar button { grid-column:1/-1; } #home-view.public-landing-shell #sourcing-savings .sourcing-savings-copy p { font-size:17px; } #home-view.public-landing-shell #sourcing-savings .savings-assurances { gap:18px; font-size:14px; } #home-view.public-landing-shell #value-proposition .value-intro .section-title,#home-view.public-landing-shell #value-proposition .value-intro .section-description,#home-view.public-landing-shell #value-proposition .value-grid--featured { grid-column:1; grid-row:auto; } #home-view.public-landing-shell #value-proposition .value-grid,#home-view.public-landing-shell #value-proposition .comparison-explanations { grid-template-columns:minmax(0,1fr); } #home-view.public-landing-shell #value-proposition .value-card:nth-child(n) { padding:28px; } #home-view.public-landing-shell #value-proposition .value-graph-value { font-size:48px; } #home-view.public-landing-shell #solution .section-kicker { margin:0; } #home-view.public-landing-shell #solution .bridge-process { grid-template-columns:minmax(0,1fr); margin:8px 0 0; } #home-view.public-landing-shell #solution .section-description { font-size:17px; } #home-view.public-landing-shell #solution .bridge-process h3 { font-size:21px; } #home-view.public-landing-shell #about .section-title br,#home-view.public-landing-shell #solution .section-title br { display:none; } #home-view.public-landing-shell #about .about-lead { font-size:17px; } #home-view.public-landing-shell #about .about-port { height:290px; } #home-view.public-landing-shell #about .about-benefit-panel { padding-inline:20px; } #home-view.public-landing-shell #about .about-content { grid-column:1; } #home-view.public-landing-shell #about .marquee-content { grid-template-columns:repeat(2,minmax(0,1fr)); } #home-view.public-landing-shell > .public-section .section-description { font-size:17px; } } /* Thin, locally hosted MIT-licensed Tabler icons match the reference art direction. */ #home-view.public-landing-shell > .public-section .section-icon { display:inline-block; width:32px; height:32px; flex-shrink:0; background:currentColor; mask:var(--section-icon) center/contain no-repeat; -webkit-mask:var(--section-icon) center/contain no-repeat; } #home-view.public-landing-shell #solution .process-icon { width:40px; height:40px; } #home-view.public-landing-shell #value-proposition .comparison-arrow { width:auto; height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; } #home-view.public-landing-shell #value-proposition .value-intro { grid-column:1; grid-row:1/3; padding-top:28px; } #home-view.public-landing-shell #value-proposition .value-intro .section-description { margin-top:28px; } @media(max-width:767px) { #home-view.public-landing-shell #value-proposition .value-intro { grid-column:1; grid-row:auto; padding-top:0; } } .icon-file-text { --section-icon:url("../vendor/tabler/file-text.svg"); } .icon-user { --section-icon:url("../vendor/tabler/user.svg"); } .icon-heart-handshake { --section-icon:url("../vendor/tabler/heart-handshake.svg"); } .icon-clipboard-check { --section-icon:url("../vendor/tabler/clipboard-check.svg"); } .icon-world { --section-icon:url("../vendor/tabler/world.svg"); } .icon-shield-check { --section-icon:url("../vendor/tabler/shield-check.svg"); } .icon-chart-bar { --section-icon:url("../vendor/tabler/chart-bar.svg"); } .icon-stack-2 { --section-icon:url("../vendor/tabler/stack-2.svg"); }