:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; --red:#1f6b4f; --red-dark:#15513c; --ink:#17202a; --muted:#66707c; --line:#e0e2e5; --soft:#f6f7f8; --green:#4f8a70; --blue:#54729a; --shadow:0 8px 24px rgba(23,32,42,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fff; line-height:1.65; } img { max-width:100%; display:block; } svg { width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
a { color:var(--red); text-underline-offset:.2em; } a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(31,107,79,.28); outline-offset:3px; }
.site-header,.site-main,.site-footer { max-width:1280px; margin:0 auto; padding-left:28px; padding-right:28px; }
.site-header { min-height:80px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:42px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:var(--red); text-decoration:none; font-weight:900; font-size:1.45rem; letter-spacing:-.04em; white-space:nowrap; }
.brand-mark { width:2.15rem; height:2.15rem; display:grid; place-items:center; color:#fff; background:var(--red); border-radius:4px; font-size:.9rem; }
.main-nav { display:flex; justify-content:center; gap:34px; align-items:center; }
.main-nav a { position:relative; color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:600; white-space:nowrap; }
.main-nav a:hover { color:var(--red); }
.header-action,.button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:.62rem 1.2rem; border:1px solid var(--red); border-radius:5px; background:var(--red); color:#fff; font-weight:700; text-decoration:none; }
.header-action:hover,.button:hover { background:var(--red-dark); }
.site-main { min-height:62vh; padding-top:34px; padding-bottom:72px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:24px; color:var(--muted); font-size:.9rem; } .breadcrumbs a { color:inherit; text-decoration:none; }
.page-intro { margin-bottom:30px; } .page-intro h1,.home-hero h1 { margin:0 0 10px; font-size:clamp(2.1rem,4vw,3.55rem); line-height:1.12; letter-spacing:-.055em; } .page-intro p { margin:.3rem 0; color:var(--muted); font-size:1.08rem; }
.content-section { margin-top:54px; padding-top:42px; border-top:1px solid var(--line); } .content-section h2,.city-directory-band h2 { margin:0; font-size:1.45rem; letter-spacing:-.025em; }
.home-hero { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr); min-height:410px; margin-top:-34px; margin-left:-28px; margin-right:-28px; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:46px 42px 42px 28px; } .hero-eyebrow { margin:0 0 9px; color:var(--red); font-size:.78rem; font-weight:800; letter-spacing:.09em; } .hero-lead { max-width:660px; margin:0; color:var(--muted); font-size:1.08rem; } .hero-media { min-width:0; margin:0; overflow:hidden; } .hero-media img { width:100%; height:100%; object-fit:cover; }
.entry-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; } .entry-card { display:grid; gap:1px; min-width:215px; padding:.7rem 1.12rem; border:1px solid var(--red); border-radius:5px; text-decoration:none; } .entry-card strong { font-size:.96rem; } .entry-card span { font-size:.76rem; }
.entry-card-primary { color:#fff; background:var(--red); } .entry-card-primary:hover { background:var(--red-dark); } .entry-card-secondary { color:var(--ink); background:#fff; border-color:#6e7681; } .entry-card-secondary:hover { border-color:var(--red); color:var(--red); }
.directory-proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-width:620px; margin:22px 0 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); list-style:none; } .directory-proof li { display:grid; gap:0; padding:0 14px; border-left:1px solid var(--line); } .directory-proof li:first-child { padding-left:0; border-left:0; } .directory-proof strong { color:var(--ink); font-size:1.15rem; line-height:1.3; } .directory-proof span { color:var(--muted); font-size:.74rem; }
.trust-line { margin:14px 0 0; color:var(--muted); font-size:.8rem; }
.city-directory-band { margin-left:-28px; margin-right:-28px; padding:36px 28px 40px; background:var(--soft); border-top:1px solid #eceef0; border-bottom:1px solid #eceef0; }
.band-heading,.directory-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:22px; margin-bottom:22px; } .band-heading p,.directory-heading p { margin:3px 0 0; color:var(--muted); } .band-heading>a,.directory-heading>a { font-weight:700; text-decoration:none; }
.city-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); } .city-item { position:relative; display:grid; gap:1px; min-height:82px; padding:14px 20px; color:var(--ink); text-decoration:none; border-left:1px solid var(--line); } .city-item:first-child { border-left:0; } .city-item strong { font-size:1.35rem; } .city-item span { color:var(--muted); font-size:.84rem; } .city-item svg { position:absolute; right:14px; top:31px; color:var(--red); }
.city-item-detailed { min-height:112px; align-content:center; } .city-item-detailed small { max-width:90%; color:#4f5964; font-size:.72rem; line-height:1.45; }
.coverage-index-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); } .coverage-index-list a { position:relative; display:grid; gap:2px; min-height:82px; padding:17px 48px 17px 8px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); } .coverage-index-list a:nth-child(odd) { border-right:1px solid var(--line); } .coverage-index-list span { color:var(--muted); font-size:.82rem; } .coverage-index-list svg { position:absolute; right:18px; top:31px; color:var(--red); }
.service-visual-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); } .service-visual { position:relative; display:grid; grid-template-columns:92px 1fr; grid-template-rows:1fr 1fr; column-gap:18px; min-height:94px; padding:12px; background:#fff; color:var(--ink); text-decoration:none; } .service-visual img { grid-row:1/3; width:92px; height:68px; object-fit:cover; border-radius:4px; } .service-visual strong { align-self:end; } .service-visual span { color:var(--red); font-size:.82rem; }
.directory-table { border-top:1px solid var(--line); } .supplier-directory { display:block; } .directory-row,.supplier-card { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(150px,.8fr) minmax(120px,.7fr) 112px; align-items:center; gap:20px; min-height:74px; border-bottom:1px solid var(--line); }
.intro-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .trust-badge { display:inline-block; padding:3px 8px; border-radius:999px; font-size:.75rem; font-weight:700; line-height:1.2; } .trust-badge-confirmed { color:#176b46; background:#e8f5ee; } .trust-badge-pending { color:#8a5a00; background:#fff4d6; }
.unverified-card small { display:block; margin-top:4px; color:var(--muted); font-size:.75rem; line-height:1.4; }
.directory-row-head { min-height:42px; padding:0 14px; color:var(--muted); background:var(--soft); font-size:.82rem; } .supplier-card { padding:10px 14px; background:#fff; } .supplier-card:hover { background:#fcfcfc; } .supplier-card h3 { margin:0; font-size:1rem; } .supplier-card h3 a { color:var(--ink); text-decoration:none; } .supplier-card-type,.supplier-card-meta { margin:2px 0 0; color:var(--muted); font-size:.85rem; } .supplier-card-link { justify-self:end; display:inline-flex; align-items:center; gap:4px; min-height:34px; color:var(--red); font-size:.86rem; font-weight:700; text-decoration:none; white-space:nowrap; } .supplier-card-link svg { width:16px; }
.onboarding-banner { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.7fr); padding-top:0; overflow:hidden; color:#fff; background:var(--red); border-top:0; } .onboarding-banner img { width:100%; height:100%; min-height:240px; object-fit:cover; } .onboarding-banner>div { padding:38px 42px; align-self:center; } .onboarding-banner h2 { font-size:2rem; } .onboarding-banner .button-light { margin-top:12px; border-color:#fff; background:transparent; } .onboarding-banner .button-light:hover { background:#fff; color:var(--red); }
.flow-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); list-style:none; } .flow-steps li { display:grid; gap:5px; min-height:128px; padding:24px 22px; border-left:1px solid var(--line); } .flow-steps li:first-child { border-left:0; } .flow-steps strong { color:var(--red); } .flow-steps span { color:var(--muted); font-size:.86rem; }
.lead-panel { display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1fr); gap:42px; padding:32px; background:var(--soft); border:1px solid var(--line); border-radius:6px; } .lead-panel h2 { margin-top:0; }
form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:none; } label { display:grid; gap:4px; color:var(--muted); font-size:.86rem; } input,select,button { width:100%; min-width:0; min-height:42px; padding:.62rem .72rem; border:1px solid #c9cdd2; border-radius:4px; background:#fff; color:var(--ink); font:inherit; } button { grid-column:1/-1; cursor:pointer; border-color:var(--red); background:var(--red); color:#fff; font-weight:700; } button:hover { background:var(--red-dark); }
.directory-intro { max-width:850px; } .directory-city-list { border-top:1px solid var(--line); } .directory-city-row { display:grid; grid-template-columns:280px 120px 150px minmax(180px,1fr) 190px; align-items:center; min-height:112px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); } .directory-city-row>img { width:260px; height:88px; object-fit:cover; } .directory-city-row>strong { font-size:1.7rem; } .directory-city-row>span { padding-left:26px; border-left:1px solid var(--line); } .directory-city-row .city-service-summary { color:var(--muted); font-size:.9rem; } .directory-city-row .city-row-action { display:flex; align-items:center; justify-content:flex-end; gap:12px; color:var(--red); font-weight:700; border-left:0; }
.directory-disclosure { margin:28px 0 0; padding:16px 18px; color:var(--muted); background:var(--soft); border-left:3px solid var(--red); font-size:.87rem; }
.page-intro:has(.city-page-intro) { margin-bottom:0; } .city-kicker { color:var(--red) !important; font-size:.82rem !important; font-weight:800; letter-spacing:.08em; }
.city-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.58fr); gap:28px; align-items:center; } .city-hero img { width:100%; height:132px; object-fit:cover; }
.city-directory-section { margin-top:22px; padding-top:22px; } .city-directory-overview { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.55fr); gap:24px; align-items:center; margin-bottom:14px; padding:0 0 14px; border-bottom:1px solid var(--line); } .city-directory-summary h2 { margin:0 0 2px; font-size:.92rem; color:var(--muted); font-weight:600; } .city-live-count { display:block; font-size:1.45rem; line-height:1.35; } .city-directory-summary p { margin:3px 0 0; color:var(--muted); font-size:.8rem; }
.city-fact-strip { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.4fr); gap:28px; align-items:end; margin-bottom:28px; padding:22px 24px; background:var(--soft); border-left:3px solid var(--red); } .section-kicker { margin:0 0 4px !important; color:var(--red) !important; font-size:.76rem !important; font-weight:800; letter-spacing:.08em; } .city-fact-strip h2 { margin:0; } .city-fact-strip p { margin:4px 0 0; color:var(--muted); font-size:.82rem; } .city-fact-strip dl { display:grid; grid-template-columns:repeat(4,1fr); margin:0; } .city-fact-strip dl>div { padding:0 14px; border-left:1px solid var(--line); } .city-fact-strip dt { color:var(--muted); font-size:.76rem; } .city-fact-strip dd { margin:2px 0 0; font-size:1.05rem; font-weight:800; } .service-count-links a { display:grid; grid-template-columns:1fr auto; } .service-count-links small { color:var(--muted); font-size:.76rem; font-weight:400; } .service-count-links span { grid-column:2; grid-row:1/3; align-self:center; }
.capability-distribution { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.5fr); gap:30px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); } .capability-distribution h2 { margin:0; } .capability-distribution p { margin:4px 0 0; color:var(--muted); font-size:.82rem; } .capability-distribution dl { display:flex; flex-wrap:wrap; gap:8px; margin:0; } .capability-distribution dl>div { min-width:160px; padding:9px 12px; background:var(--soft); border-left:2px solid var(--red); } .capability-distribution dt { font-weight:750; } .capability-distribution dd { margin:0; color:var(--muted); font-size:.76rem; }
.directory-filter-bar { display:grid; grid-template-columns:minmax(180px,.72fr) minmax(190px,1fr) minmax(220px,1.15fr) auto; align-items:end; gap:12px 16px; margin-bottom:18px; padding:13px 14px; border:1px solid var(--line); background:var(--soft); } .directory-filter-bar>strong { align-self:center; font-size:.92rem; } .directory-filter-bar label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; white-space:nowrap; } .directory-filter-bar label span { color:var(--ink); font-weight:600; } .directory-filter-bar select { min-height:38px; padding:.45rem .6rem; } .directory-filter-actions { display:flex; align-items:center; gap:10px; } .directory-filter-actions button { grid-column:auto; width:auto; min-height:38px; padding:.45rem .9rem; } .directory-filter-actions a { font-size:.84rem; white-space:nowrap; }
.procurement-guide { display:grid; grid-template-columns:155px 1fr; gap:16px; margin:0; padding:0; border:0; background:#fff; } .procurement-guide>strong { align-self:center; font-size:.86rem; } .procurement-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0; padding:0; list-style:none; counter-reset:procurement-step; } .procurement-steps li { display:grid; grid-template-columns:22px 1fr; gap:0 7px; counter-increment:procurement-step; } .procurement-steps li:before { grid-row:1/3; content:counter(procurement-step); display:grid; place-items:center; width:20px; height:20px; color:#fff; background:var(--red); border-radius:50%; font-size:.68rem; font-weight:800; } .procurement-steps b { font-size:.8rem; } .procurement-steps span { color:var(--muted); font-size:.72rem; }
.supplier-capabilities { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; } .supplier-capability-tag { display:inline-block; padding:1px 7px; border:1px solid #d8dadd; border-radius:3px; color:#4d5660; background:#fafafa; font-size:.76rem; line-height:1.7; } .directory-empty { padding:28px 14px; }
.all-suppliers-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); }
.all-supplier-row { display:grid; grid-template-columns:minmax(0,1.4fr) 72px minmax(100px,.8fr) auto; gap:12px; align-items:center; min-height:58px; padding:10px 8px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.all-supplier-row:nth-child(odd) { border-right:1px solid var(--line); } .all-supplier-row:hover { background:var(--soft); } .all-supplier-name { font-weight:700; } .all-supplier-type,.all-supplier-cities { color:var(--muted); font-size:.8rem; } .all-supplier-action { display:inline-flex; align-items:center; gap:3px; color:var(--red); font-size:.8rem; font-weight:700; white-space:nowrap; } .all-supplier-action svg { width:14px; }
.supplier-profile-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.85fr); gap:42px; align-items:start; } .supplier-profile-media img { width:100%; height:300px; object-fit:cover; border-radius:6px; } .supplier-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; } .supplier-actions .button-outline { color:var(--red); background:#fff; }
.profile-facts { border-top:1px solid var(--line); } .profile-fact { display:grid; grid-template-columns:150px 1fr; gap:20px; padding:15px 8px; border-bottom:1px solid var(--line); } .profile-fact dt { font-weight:700; } .profile-fact dd { margin:0; color:#3f4852; } .tag { display:inline-block; margin:0 6px 6px 0; padding:3px 9px; border:1px solid #d5d8dc; border-radius:3px; color:#3f4852; font-size:.84rem; }
.profile-trust-panel { margin-top:14px; padding:20px 22px; border:1px solid var(--line); border-top:3px solid var(--red); border-radius:5px; background:#fff; } .trust-kicker { margin:0; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.08em; } .profile-trust-panel h2 { margin:2px 0 14px; font-size:1.18rem; } .profile-trust-panel dl { margin:0; border-top:1px solid var(--line); } .profile-trust-panel dl>div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); } .profile-trust-panel dt { color:var(--muted); font-size:.8rem; } .profile-trust-panel dd { margin:0; font-size:.84rem; font-weight:650; } .profile-trust-panel>p { font-size:.82rem; } .trust-notice { padding:11px 12px; color:#4d5660; background:var(--soft); } .profile-compare-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; } .profile-compare-links a { font-size:.84rem; font-weight:700; }
.supplier-buying-guide,.scope-guide { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:44px; } .supplier-buying-guide aside,.scope-guide aside { padding:22px 24px; background:var(--soft); border-left:3px solid var(--red); } .supplier-buying-guide h3,.scope-guide h2 { margin:0 0 8px; font-size:1rem; } .supplier-buying-guide ul,.scope-guide ul { margin:0; padding-left:1.1rem; color:var(--muted); font-size:.86rem; }
.public-fact-summary,.operator-method { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr); gap:42px; } .public-fact-summary p,.operator-method p { margin:0 0 10px; } .operator-method { padding:34px; background:var(--soft); border-top:3px solid var(--red); } .operator-method a { font-weight:700; }
.lead-secondary { opacity:.94; padding:26px 30px; } .lead-secondary h2 { font-size:1.2rem; } .lead-secondary p { color:var(--muted); font-size:.86rem; }
.muted { color:var(--muted); }
.site-footer { display:grid; grid-template-columns:1.5fr .7fr 1fr; gap:50px; padding-top:38px; padding-bottom:42px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; } .site-footer strong { color:var(--ink); font-size:1rem; } .site-footer p { margin:5px 0; } .site-footer a { color:inherit; }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; gap:16px; padding-top:16px; padding-bottom:16px; } .main-nav { grid-column:1/-1; grid-row:2; justify-content:flex-start; gap:16px 24px; overflow-x:auto; } .home-hero { grid-template-columns:1fr; } .hero-media { min-height:270px; max-height:340px; } .city-grid { grid-template-columns:repeat(2,1fr); } .city-item { border-bottom:1px solid var(--line); } .service-visual-grid { grid-template-columns:repeat(2,1fr); } .directory-city-row { grid-template-columns:190px 100px 140px 1fr; } .directory-city-row>img { width:174px; height:72px; } .directory-city-row .city-row-action { display:none; } .directory-layout,.supplier-profile-hero { grid-template-columns:1fr; } .city-directory-overview,.city-fact-strip,.capability-distribution,.public-fact-summary,.operator-method { grid-template-columns:1fr; gap:10px; } .directory-filter-bar { grid-template-columns:1fr 1fr; } .directory-filter-bar>strong,.directory-filter-actions { grid-column:1/-1; } .procurement-guide { grid-template-columns:145px 1fr; } .flow-steps { grid-template-columns:repeat(2,1fr); } .flow-steps li:nth-child(3) { border-left:0; border-top:1px solid var(--line); } .flow-steps li:nth-child(4) { border-top:1px solid var(--line); } }
@media (max-width:620px) { .site-header,.site-main,.site-footer { padding-left:18px; padding-right:18px; } .site-header { margin:0; min-height:68px; } .header-action { display:none; } .brand { font-size:1.22rem; } .main-nav { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; } .main-nav::-webkit-scrollbar { display:none; } .site-main { padding-top:20px; } .breadcrumbs { margin-bottom:14px; } .home-hero { margin-left:-18px; margin-right:-18px; margin-top:-20px; } .hero-copy { padding:36px 18px 28px; } .hero-media { min-height:210px; } .entry-grid { display:grid; } .entry-card { min-width:0; } .directory-proof { max-width:none; } .directory-proof li { padding:0 8px; } .directory-proof strong { font-size:1rem; } .directory-proof span { font-size:.68rem; } .city-directory-band { margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; } .city-grid,.service-visual-grid,.coverage-index-list,.all-suppliers-grid { grid-template-columns:1fr; } .coverage-index-list a:nth-child(odd),.all-supplier-row:nth-child(odd) { border-right:0; } .city-item { border-left:0; } .directory-row-head { display:none; } .directory-row,.supplier-card { grid-template-columns:1fr auto; gap:5px 12px; padding:14px 4px; } .directory-row>div,.supplier-card>div { grid-column:1; } .directory-row>.supplier-card-meta,.supplier-card>.supplier-card-meta { grid-column:1; } .directory-row>.supplier-card-link,.supplier-card>.supplier-card-link { grid-column:2; grid-row:1/4; align-self:center; } .supplier-card-link span { display:none; } .all-supplier-row { grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; } .all-supplier-name { grid-column:1; } .all-supplier-type { grid-column:2; } .all-supplier-cities { grid-column:1; } .all-supplier-action { grid-column:2; grid-row:1/3; align-self:center; } .onboarding-banner,.lead-panel,.supplier-buying-guide,.scope-guide { grid-template-columns:1fr; } .onboarding-banner>div { padding:28px 22px; } form { grid-template-columns:1fr; } .directory-city-row { grid-template-columns:106px 1fr; gap:4px 14px; padding:12px 0; } .directory-city-row>img { grid-row:1/4; width:106px; height:90px; } .directory-city-row>strong { font-size:1.3rem; } .directory-city-row>span { padding-left:0; border-left:0; font-size:.82rem; } .directory-city-row .city-service-summary { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .city-hero { grid-template-columns:minmax(0,1fr) 104px; gap:14px; } .city-hero img { height:104px; } .city-page-intro h1 { font-size:1.85rem; } .city-page-intro p { font-size:.9rem; } .city-kicker { margin-bottom:2px !important; } .city-directory-section { margin-top:20px; padding-top:20px; } .city-directory-summary h2 { font-size:.84rem; } .city-live-count { font-size:1.22rem; } .city-directory-summary p { font-size:.78rem; } .city-fact-strip dl { grid-template-columns:repeat(2,1fr); gap:14px 0; } .procurement-guide { grid-template-columns:1fr; gap:8px; } .procurement-steps { grid-template-columns:1fr; gap:8px; } .directory-filter-bar { grid-template-columns:1fr; gap:9px; padding:12px; } .directory-filter-bar>strong,.directory-filter-actions { grid-column:1; } .directory-filter-bar label { grid-template-columns:76px minmax(0,1fr); } .directory-filter-actions button { flex:1; } .profile-fact { grid-template-columns:1fr; gap:4px; } .supplier-profile-media img { height:220px; } .profile-trust-panel dl>div { grid-template-columns:96px 1fr; } .flow-steps { grid-template-columns:1fr; } .flow-steps li { min-height:0; border-left:0; border-top:1px solid var(--line); } .flow-steps li:first-child { border-top:0; } .operator-method { padding:24px 20px; } .site-footer { grid-template-columns:1fr; gap:22px; } }
@media (max-width:420px) { .page-intro h1,.home-hero h1 { font-size:2rem; } .entry-card { width:100%; padding:.78rem 1rem; } .directory-proof { grid-template-columns:1fr; gap:8px; } .directory-proof li { grid-template-columns:56px 1fr; align-items:center; padding:6px 0; border-left:0; border-top:1px solid var(--line); } .directory-proof li:first-child { border-top:0; } .hero-media { min-height:180px; } .city-hero { grid-template-columns:1fr; } .city-hero img { height:118px; } .directory-filter-bar label { grid-template-columns:1fr; gap:3px; } .supplier-actions { display:grid; } .supplier-actions .button { width:100%; } .profile-trust-panel { padding:18px; } .lead-secondary { padding:22px 18px; } }

/* Premium directory refresh: open editorial grid, pine-green accent, quiet depth. */
:root { --ink:#13221b; --muted:#64736b; --line:#dfe7e2; --soft:#f4f8f5; --red:#176b4b; --red-dark:#0f5138; --shadow:0 18px 50px rgba(23,71,52,.10); }
body { background:#fbfcfb; letter-spacing:-.01em; }
.site-header { max-width:1360px; min-height:86px; padding-left:34px; padding-right:34px; border-bottom-color:var(--line); background:rgba(255,255,255,.94); }
.site-header { grid-template-columns:auto minmax(200px,360px) 1fr auto; gap:22px; }
.header-search { display:flex; gap:0; margin:0; }
.header-search input { min-height:42px; border-radius:999px 0 0 999px; border-right:0; padding-left:16px; background:#f7faf8; }
.header-search button { width:46px; min-height:42px; padding:0; border:1px solid var(--red); border-radius:0 999px 999px 0; box-shadow:none; font-size:1.2rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.brand { font-size:1.58rem; letter-spacing:-.055em; }
.brand-mark { width:2.4rem; height:2.4rem; border-radius:9px; background:var(--red); box-shadow:0 5px 15px rgba(23,107,75,.2); }
.main-nav { gap:28px; }
.main-nav a { font-size:.9rem; font-weight:650; color:#35433c; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-9px; height:2px; background:var(--red); transition:right .2s ease; }
.main-nav a:hover::after { right:0; }
.header-action,.button { min-height:44px; padding:.65rem 1.3rem; border-radius:999px; box-shadow:0 7px 18px rgba(23,107,75,.14); }
.header-action { font-size:.88rem; }
.header-action { justify-self:end; width:max-content; }
.site-main { max-width:1360px; padding-top:38px; padding-bottom:90px; }
.home-hero { min-height:510px; margin-top:-38px; margin-left:-34px; margin-right:-34px; background:#fff; }
.hero-copy { padding:76px 58px 66px 54px; }
.hero-eyebrow,.section-kicker,.city-kicker { color:#23805e !important; letter-spacing:.12em; }
.home-hero h1 { max-width:640px; font-size:clamp(3rem,5.5vw,5.3rem); line-height:1.02; letter-spacing:-.075em; }
.hero-lead { max-width:520px; margin-top:16px; font-size:1.1rem; line-height:1.75; }
.hero-search { display:flex; max-width:560px; margin-top:28px; gap:0; }
.hero-search input { min-height:52px; border-radius:12px 0 0 12px; border-right:0; padding-left:18px; font-size:.95rem; background:#fff; box-shadow:0 6px 20px rgba(23,71,52,.06); }
.hero-search button { width:auto; min-height:52px; padding:0 1.35rem; border-radius:0 12px 12px 0; white-space:nowrap; }
.hero-media { position:relative; min-height:510px; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 24%); pointer-events:none; }
.hero-media img { object-position:center; }
.entry-grid { margin-top:18px; gap:12px; }
.entry-card { min-width:220px; padding:.8rem 1.15rem; border-radius:10px; transition:transform .2s ease, box-shadow .2s ease; }
.entry-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.entry-card-primary { background:var(--red); }
.entry-card-secondary { border-color:#b8c9bf; }
.directory-proof { margin-top:30px; max-width:560px; }
.directory-proof strong { font-size:1.35rem; }
.trust-line { max-width:580px; line-height:1.6; }
.city-directory-band { margin-left:-34px; margin-right:-34px; padding:48px 54px 52px; background:#f2f7f4; border-color:#e1ebe5; }
.band-heading,.directory-heading { margin-bottom:26px; }
.band-heading h2,.directory-heading h2,.content-section h2 { font-size:1.65rem; letter-spacing:-.045em; }
.city-grid { gap:10px; }
.city-item { min-height:120px; padding:14px 18px; border:1px solid #dfe9e3; border-radius:14px; background:#fff; box-shadow:0 5px 16px rgba(30,78,56,.04); transition:transform .2s ease, border-color .2s ease; }
.city-item-detailed { grid-template-columns:58px 1fr; align-items:center; column-gap:12px; }
.city-item-detailed img { width:58px; height:58px; object-fit:cover; border-radius:10px; filter:saturate(.7); }
.city-item-detailed div { display:grid; gap:1px; }
.city-item:first-child { border-left:1px solid #dfe9e3; }
.city-item:hover { transform:translateY(-3px); border-color:#8fc1aa; }
.city-item strong { font-size:1.5rem; }
.city-item svg { top:47px; right:18px; }
.content-section { margin-top:72px; padding-top:48px; }
.coverage-index-list,.directory-table { border-top-color:var(--line); }
.coverage-index-list a { padding:20px 52px 20px 12px; min-height:92px; transition:background .2s ease; }
.coverage-index-list a:hover,.all-supplier-row:hover { background:#f1f7f3; }
.service-visual-grid { gap:12px; border:0; background:transparent; }
.service-visual { min-height:112px; padding:15px; border:1px solid var(--line); border-radius:12px; box-shadow:0 5px 18px rgba(30,78,56,.04); }
.service-visual img { width:98px; height:76px; border-radius:9px; }
.supplier-card { min-height:86px; padding:14px 12px; background:transparent; }
.supplier-card:hover { background:#f4f8f5; }
.supplier-card h3 { font-size:1.02rem; }
.supplier-card-link { padding:0 6px; }
.all-suppliers-grid { gap:0 18px; border-top:0; }
.all-supplier-row { min-height:70px; padding:13px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:#fff; }
.all-supplier-row:nth-child(odd) { border-right:1px solid var(--line); }
.operator-method { padding:38px; border:1px solid var(--line); border-top:3px solid var(--red); border-radius:16px; background:#f2f7f4; }
.onboarding-banner { border-radius:16px; box-shadow:var(--shadow); }
.lead-panel { border-color:var(--line); border-radius:16px; box-shadow:0 10px 30px rgba(23,71,52,.05); }
input,select,button { border-radius:10px; }
button { box-shadow:0 7px 16px rgba(23,107,75,.16); }
.site-footer { max-width:1360px; padding-top:46px; padding-bottom:50px; border-top-color:var(--line); }
@media (max-width:1100px) { .site-header { grid-template-columns:auto 1fr auto; } .header-search { display:none; } }
@media (max-width:900px) { .site-header { padding-left:24px; padding-right:24px; } .home-hero { margin-left:-24px; margin-right:-24px; } .hero-copy { padding:52px 34px 42px; } .city-directory-band { margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; } }
@media (max-width:620px) { .site-header { padding-left:18px; padding-right:18px; } .site-main { padding-top:24px; } .home-hero { margin-left:-18px; margin-right:-18px; margin-top:-24px; } .hero-copy { padding:42px 20px 32px; } .home-hero h1 { font-size:2.8rem; } .hero-media { min-height:250px; } .hero-media::after { background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 22%); } .city-directory-band { margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; } .city-item { min-height:98px; } .city-item-detailed img { width:50px; height:50px; } .all-supplier-row { margin-bottom:8px; } .operator-method { padding:26px 20px; } }