/* hallmark — art direction: Cool silver commercial editorial system with direct, opportunity-led discovery */
.commercial-light { background:#fff; color:#121416; }
.commercial-light ::selection { background:#b7c5d0; color:#121416; }
.commercial-wrap { width:min(100% - 88px,1280px); margin-inline:auto; }
.commercial-header { height:72px; padding:0 clamp(24px,4.8vw,78px); border-bottom:1px solid #d8dde0; background:#fff; color:#101113; }
.commercial-wordmark { display:inline-flex; align-items:center; gap:8px; line-height:1; text-decoration:none; white-space:nowrap; }
.commercial-wordmark img { width:196px; height:auto; }
.commercial-wordmark span,.commercial-footer a span { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:-.035em; vertical-align:middle; }
.commercial-header nav { display:flex; gap:clamp(16px,2vw,34px); align-items:center; font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; }
.commercial-header nav a { text-decoration:none; color:#282c30; white-space:nowrap; }
.commercial-header nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.new-hero { min-height:clamp(480px,48vw,690px); position:relative; overflow:hidden; background:#e7ebed; isolation:isolate; }
.new-hero-image { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 55%; }
.new-hero-wash { position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.66) 35%,rgba(255,255,255,.02) 74%); }
.new-hero-content { position:relative; z-index:1; width:min(100% - 48px,1060px); margin:auto; padding:clamp(28px,4vw,58px) 0 240px; text-align:center; }
.overline,.eyebrow-dark { margin:0; font-size:11px; font-weight:800; letter-spacing:.21em; line-height:1.4; }
.overline { color:#30363b; }
.new-hero h1,.commercial-light h2,.commercial-light h3 { font-family:var(--font-display); font-weight:900; text-transform:uppercase; }
.new-hero h1 { margin:16px 0 11px; font-size:clamp(64px,9vw,142px); line-height:1; letter-spacing:-.015em; }
.hero-deck { margin:0 auto 20px; max-width:710px; font-size:clamp(15px,1.35vw,19px); line-height:1.38; }
.hero-deck strong { display:inline-block; margin-bottom:6px; font-weight:800; }
.button-dark { display:inline-flex; gap:24px; align-items:center; justify-content:center; min-height:38px; padding:11px 18px; background:#0d0e10; color:white; font-size:12px; font-weight:800; text-decoration:none; text-transform:uppercase; line-height:1; white-space:nowrap; }
.button-dark:hover { background:#3d4750; }
.button-dark span { font-size:19px; font-weight:400; }
.foundation-strip { background:#e7ecef; border-block:1px solid #d8e0e5; }
.foundation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-block:22px; }
.foundation-grid > div { padding:0 25px; border-right:1px solid #bfcad1; }
.foundation-grid > div:first-child { padding-left:0; }
.foundation-grid > div:last-child { border:0; padding-right:0; }
.foundation-grid h2 { margin:0 0 3px; font-size:22px; line-height:.95; }
.foundation-grid p { max-width:310px; margin:0; color:#525b63; font-size:13px; line-height:1.4; }
.build-section { padding-block:70px 80px; }
.section-title-row { display:grid; grid-template-columns:250px 1fr; align-items:end; gap:25px; margin-bottom:28px; }
.section-title-row > p { margin-bottom:5px; }
.section-title-row h2 { margin:0; font-size:clamp(52px,5.6vw,90px); line-height:1; letter-spacing:-.015em; }
.section-title-row div > p:not(.eyebrow-dark) { margin:8px 0 0; color:#444c52; font-size:16px; }
.tier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tier-card { min-width:0; background:#eef2f4; border:1px solid #d8e0e5; display:flex; flex-direction:column; }
.tier-card img { width:100%; height:clamp(170px,18vw,260px); object-fit:cover; background:#d9e0e4; }
.tier-copy { display:flex; flex:1; flex-direction:column; align-items:start; padding:21px 20px 17px; }
.tier-label { font-size:11px; font-weight:900; letter-spacing:.08em; }
.tier-copy h3 { margin:3px 0; font-size:clamp(26px,2.4vw,38px); line-height:1; letter-spacing:-.01em; }
.tier-copy p { margin:6px 0 18px; color:#5a636a; font-size:14px; line-height:1.35; }
.tier-copy a { margin-top:auto; color:#151719; font-size:12px; font-weight:800; text-decoration:none; border-bottom:1px solid #151719; padding-bottom:3px; white-space:nowrap; }
.tier-copy a:hover { color:#5b6c79; }
.services-section { padding:70px 0 75px; background:linear-gradient(135deg,#dce5eb,#f1f4f6 55%,#dfe7ec); }
.services-title-row { grid-template-columns:minmax(0,1.5fr) minmax(170px,.5fr); align-items:end; gap:35px; }
.services-title-row h2 { margin-top:9px; }
.services-title-row > p { font-size:15px; color:#505960; line-height:1.45; max-width:290px; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; }
.service-card { display:grid; grid-template-columns:45% 1fr; min-height:146px; align-items:stretch; gap:18px; background:rgba(255,255,255,.14); }
.service-photo { min-height:146px; background-image:url('/assets/commercial-services-collage.webp'); background-size:300% 200%; background-repeat:no-repeat; background-color:#dce4e9; }
.service-photo-1 { background-position:0 0; }.service-photo-2 { background-position:50% 0; }.service-photo-3 { background-position:100% 0; }.service-photo-4 { background-position:0 100%; }.service-photo-5 { background-position:50% 100%; }.service-photo-6 { background-position:100% 100%; }
.service-card > div:last-child { padding:18px 10px 12px 0; }
.service-card h3 { margin:0 0 5px; font-size:clamp(18px,1.6vw,25px); line-height:1; }
.service-card p { margin:0; color:#59636a; font-size:13px; line-height:1.4; }
.opportunity-section { padding:75px 0 88px; background:#f7f9fa; }
.opportunity-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr); gap:40px; align-items:end; margin-bottom:28px; }
.opportunity-intro h2 { margin:8px 0 0; font-size:clamp(48px,5.1vw,80px); line-height:1; letter-spacing:-.015em; }
.opportunity-intro > p { max-width:340px; margin:0; color:#4f5a61; font-size:15px; line-height:1.5; }
.opportunity-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; }
.opportunity-grid article:nth-child(odd) { grid-column:span 5; }
.opportunity-grid article:nth-child(even) { grid-column:span 7; }
.opportunity-grid article { min-height:280px; display:flex; flex-direction:column; align-items:start; padding:24px; border:1px solid #c8d2d8; background:#fff; }
.opportunity-grid article > span { color:#69777f; font-size:10px; font-weight:800; letter-spacing:.13em; line-height:1.4; }
.opportunity-grid h3 { margin:18px 0 8px; font-size:clamp(22px,2.05vw,31px); line-height:1.04; letter-spacing:-.005em; }
.opportunity-grid p { margin:0 0 20px; color:#4b565e; font-size:14px; line-height:1.5; }
.opportunity-grid a { display:inline-flex; gap:14px; align-items:center; margin-top:auto; padding:9px 0 4px; border-bottom:2px solid #15191c; color:#15191c; font-size:12px; font-weight:900; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.opportunity-grid a:hover { color:#596e7a; border-color:#596e7a; }
.work-section { padding-top:35px; }
.work-section > .commercial-wrap > h2 { margin:0 0 10px; font-size:clamp(42px,4.7vw,75px); letter-spacing:-.015em; line-height:1; }
.showcase { height:clamp(390px,45vw,620px); position:relative; overflow:hidden; isolation:isolate; background:#303b43; }
.showcase > img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; object-position:center center; }
.showcase-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,28,34,.91),rgba(20,28,34,.67) 31%,rgba(20,28,34,.06) 67%); }
.showcase-copy { position:relative; height:100%; display:flex; flex-direction:column; align-items:start; justify-content:center; color:#fff; }
.showcase-name { margin:0 0 2px; font-family:var(--font-display); font-size:clamp(42px,4.2vw,72px); font-weight:900; line-height:1; letter-spacing:-.01em; }
.showcase-name span { font-family:var(--font-body); font-size:.25em; vertical-align:top; }
.showcase-fleet .showcase-name { color:#fa7229; }
.showcase-creator .showcase-name { color:#38d9ee; }
.showcase-copy h3 { margin:5px 0 12px; font-size:clamp(43px,4.5vw,74px); line-height:1; letter-spacing:-.015em; }
.showcase-copy > p:not(.showcase-name) { max-width:320px; margin:0; font-size:16px; line-height:1.35; color:#e7e9ea; }
.showcase-link { display:inline-flex; align-items:center; gap:19px; margin-top:23px; padding:9px 0 7px; border-bottom:2px solid #fff; color:#fff; font-size:12px; font-weight:900; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.showcase-link:hover { color:#dce4e9; border-color:#dce4e9; }
.demo-tag { position:absolute; bottom:20px; right:0; color:#e7e9ea; font-size:10px; font-weight:800; letter-spacing:.24em; }
.approach-strip { padding:65px 0 72px; background:#e8edf0; }
.approach-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:22px; }
.approach-heading h2 { margin:7px 0 0; font-size:clamp(43px,4.3vw,68px); line-height:1; letter-spacing:-.015em; }
.approach-heading > p { margin:0; width:220px; color:#596168; font-size:13px; }
.approach-strip ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; }
.approach-strip li { display:grid; grid-template-columns:70px 1fr; gap:14px; border-right:1px solid #b9c5cc; padding:4px 25px 0; }
.approach-strip li:first-child { padding-left:0; }.approach-strip li:last-child { border:0; padding-right:0; }
.approach-strip li > span { color:#8d9aa4; font-family:var(--font-display); font-size:58px; font-weight:900; line-height:.8; }
.approach-strip h3 { margin:0 0 5px; font-size:22px; line-height:1.04; letter-spacing:-.005em; }
.approach-strip li p { margin:0; color:#5a636b; font-size:12px; line-height:1.4; }
.commercial-end { padding:70px 0 85px; background:#fff; }
.commercial-end > div { display:grid; grid-template-columns:1fr minmax(220px,.4fr); align-items:end; gap:20px 45px; }
.commercial-end h2 { grid-row:span 2; margin:0; font-size:clamp(63px,7vw,110px); letter-spacing:-.015em; line-height:1; }
.commercial-end p { margin:0; font-size:15px; color:#5b646c; line-height:1.45; }
.commercial-end .button-dark { width:max-content; }
.commercial-footer { background:#111416; color:#f5f6f7; padding:26px 0; }
.commercial-footer > div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.commercial-footer a { color:inherit; text-decoration:none; }
.commercial-footer-brand { display:inline-flex; align-items:center; gap:9px; }
.commercial-footer-brand img { width:210px; height:auto; }
.commercial-footer > div > span { font-size:11px; color:#b6c0c6; }
@media(max-width:900px){
 .commercial-wrap{width:min(100% - 48px,1280px)}
 .commercial-header{height:62px;padding-inline:24px}
 .commercial-header nav a:nth-child(3){display:none}
 .new-hero-content{padding-bottom:190px}
 .section-title-row{grid-template-columns:190px 1fr}
 .opportunity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .opportunity-grid article:nth-child(n){grid-column:auto}
 .service-card{grid-template-columns:42% 1fr;gap:12px}
 .approach-strip li{grid-template-columns:1fr;gap:9px}
 .approach-strip li>span{font-size:48px}
}
@media(max-width:640px){
 .commercial-wrap{width:min(100% - 36px,1280px)}
 .commercial-header{height:58px;padding-inline:18px}
 .commercial-wordmark img{width:162px}
 .commercial-wordmark span{font-size:10px}
 .commercial-header nav a:not(:last-child){display:none}
 .commercial-header nav a{font-size:11px}
 .new-hero{min-height:610px}
 .new-hero-image{object-position:53% center}
 .new-hero-wash{background:linear-gradient(180deg,rgba(255,255,255,.91),rgba(255,255,255,.72) 42%,rgba(255,255,255,.01) 80%)}
 .new-hero-content{width:min(100% - 24px,520px);padding:65px 0 0}
 .new-hero h1{font-size:clamp(54px,14vw,88px);line-height:1}
 .hero-deck{font-size:14px;max-width:340px}
 .foundation-grid{grid-template-columns:1fr;padding-block:10px}
 .foundation-grid>div,.foundation-grid>div:first-child,.foundation-grid>div:last-child{padding:12px 0;border:0;border-bottom:1px solid #c7d2d9}
 .foundation-grid>div:last-child{border:0}
 .foundation-grid h2{font-size:21px}
 .build-section{padding-block:58px}
 .section-title-row,.services-title-row{grid-template-columns:1fr;gap:12px}
 .section-title-row h2{font-size:clamp(50px,12vw,76px)}
 .tier-grid{grid-template-columns:1fr;gap:14px}
 .tier-card img{height:225px}
 .tier-copy{padding:17px 18px 18px}
 .tier-copy h3{font-size:33px}
 .services-section{padding-block:60px}
 .services-title-row>p{margin:0;max-width:500px}
 .service-grid{grid-template-columns:1fr;gap:13px}
 .service-card{min-height:126px;grid-template-columns:42% 1fr;gap:13px}
 .service-photo{min-height:126px}
 .service-card>div:last-child{padding:15px 10px 10px 0}
 .service-card h3{font-size:22px}
 .opportunity-section{padding:60px 0 65px}
 .opportunity-intro{grid-template-columns:1fr;gap:13px}
 .opportunity-intro h2{font-size:clamp(49px,12vw,74px)}
 .opportunity-grid{grid-template-columns:1fr}
 .opportunity-grid article{min-height:230px;padding:22px}
 .opportunity-grid h3{font-size:29px}
 .work-section{padding-top:28px}
 .showcase{height:600px}
 .showcase>img{object-position:62% center}
 .showcase-shade{background:linear-gradient(180deg,rgba(20,28,34,.91),rgba(20,28,34,.66) 39%,rgba(20,28,34,.06) 83%)}
 .showcase-copy{justify-content:flex-start;padding-top:55px}
 .showcase-name{font-size:52px}
 .showcase-copy h3{font-size:clamp(45px,11vw,70px)}
 .showcase-copy>p:not(.showcase-name){max-width:290px;font-size:14px}
 .showcase-link{margin-top:17px}
 .demo-tag{left:0;right:auto;bottom:16px;max-width:100%;font-size:9px;letter-spacing:.14em}
 .approach-strip{padding-block:55px}
 .approach-heading{display:block}
 .approach-heading>p{width:auto;margin-top:12px}
 .approach-strip ol{grid-template-columns:1fr}
 .approach-strip li,.approach-strip li:first-child,.approach-strip li:last-child{grid-template-columns:55px 1fr;padding:18px 0;border:0;border-top:1px solid #bcc8cf}
 .approach-strip li>span{font-size:48px}
 .commercial-end{padding-block:65px}
 .commercial-end>div{grid-template-columns:1fr}
 .commercial-end h2{grid-row:auto;font-size:clamp(65px,15vw,90px)}
 .commercial-footer>div{align-items:flex-start;flex-direction:column}
}
@media(max-width:380px){.commercial-wordmark img{width:145px}.commercial-wordmark span{font-size:9px}.commercial-header nav a{font-size:10px}.new-hero h1{font-size:53px}.service-card h3{font-size:19px}}