/* DC Commercial Cleaning — shared static foundation
   See assets/partials/shell-patterns.html for the required markup hooks. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --font-display: "DM Serif Display", Georgia, serif;
  --font-ui: "Public Sans", Arial, sans-serif;
  --navy-950: #071a33;
  --navy-900: #0c2748;
  --navy-800: #12365e;
  --blue-700: #155ba8;
  --blue-100: #dcebfa;
  --blue-50: #f2f7fc;
  --red-700: #a91f36;
  --red-600: #c52a43;
  --white: #fff;
  --ink: #102238;
  --slate-700: #3e5167;
  --slate-300: #b8c5d1;
  --slate-100: #e8eef3;
  --focus: #ffcb3d;
  --text-xs: clamp(.75rem, .72rem + .1vw, .8125rem);
  --text-sm: clamp(.875rem, .84rem + .15vw, .9375rem);
  --text-base: clamp(1rem, .97rem + .15vw, 1.125rem);
  --text-lg: clamp(1.1875rem, 1.08rem + .55vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.26rem + 1.15vw, 2.25rem);
  --text-2xl: clamp(2.25rem, 1.73rem + 2.55vw, 4.25rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem;
  --gutter: clamp(1.125rem, 3vw, 2.5rem);
  --content-max: 76rem;
  --reading-max: 43rem;
  --radius-sm: .375rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --shadow-card: 0 14px 34px rgb(7 26 51 / .1);
  --shadow-lift: 0 22px 45px rgb(7 26 51 / .18);
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font: 400 var(--text-base)/1.65 var(--font-ui); text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--navy-800); text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px rgb(7 26 51 / .82); }

.container { width: min(calc(100% - (2 * var(--gutter))), var(--content-max)); margin-inline: auto; }
.reading-width { max-width: var(--reading-max); }
.section { padding-block: var(--space-8); }
.section--compact { padding-block: var(--space-6); }
.surface-muted { background: var(--blue-50); }
.surface-dark { color: var(--white); background: var(--navy-950); }
.eyebrow { display: flex; gap: var(--space-3); align-items: center; margin: 0 0 var(--space-4); color: var(--red-700); font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.eyebrow::before { width: 2.6rem; height: 4px; content: ""; background: currentColor; }
.signal-rail { border-inline-start: 4px solid var(--red-600); padding-inline-start: var(--space-5); }
h1, h2, h3 { color: var(--navy-950); margin: 0; }
h1 { max-width: 18ch; font: 400 var(--text-2xl)/.98 var(--font-display); letter-spacing: -.025em; }
h2 { font: 400 var(--text-xl)/1.06 var(--font-display); letter-spacing: -.018em; }
h3 { font: 700 var(--text-lg)/1.18 var(--font-ui); }
.section-heading { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-heading > p { max-width: 60ch; margin: 0; color: var(--slate-700); }

.skip-link { position: fixed; z-index: 1000; inset: var(--space-3) auto auto var(--space-3); transform: translateY(-180%); padding: .7rem 1rem; color: var(--navy-950); background: var(--focus); border-radius: var(--radius-sm); font-weight: 700; text-decoration: none; transition: transform .16s var(--ease-out); }
.skip-link:focus { transform: translateY(0); }
.utility-bar { color: var(--white); background: var(--navy-950); font-size: var(--text-sm); }
.utility-bar__inner { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; min-height: 2.5rem; }
.utility-bar a { color: var(--white); font-weight: 700; }
.utility-bar__service-area { color: var(--blue-100); }
.site-header { position: sticky; z-index: 100; top: 0; background: rgb(255 255 255 / .98); border-bottom: 1px solid var(--slate-100); }
.site-header__inner { display: flex; gap: var(--space-5); align-items: center; min-height: 5.3rem; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; max-width: 13rem; }
.brand img { width: 100%; max-height: 3.65rem; object-fit: contain; object-position: left center; }
.site-nav { margin-left: auto; }
.site-nav__list, .site-nav__sublist { padding: 0; margin: 0; list-style: none; }
.site-nav__list { display: flex; gap: .15rem; align-items: center; }
.site-nav a, .site-nav button { display: inline-flex; min-height: 44px; align-items: center; padding: .55rem .72rem; color: var(--navy-950); background: transparent; border: 0; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; text-decoration: none; }
.site-nav a:hover, .site-nav button:hover { color: var(--red-700); background: var(--blue-50); }
.nav-group { position: relative; }
.nav-disclosure::after { width: .45rem; height: .45rem; margin-left: .48rem; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.14rem) rotate(45deg); transition: transform .16s var(--ease-out); }
.nav-disclosure[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(225deg); }
.nav-panel { position: absolute; z-index: 3; top: calc(100% + .4rem); left: 0; width: min(20rem, calc(100vw - 2rem)); padding: var(--space-3); background: var(--white); border: 1px solid var(--slate-300); border-top: 6px solid var(--navy-900); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-card); }
.nav-panel a { display: block; width: 100%; }
.header-quote { flex: 0 0 auto; }
.menu-toggle { display: none; min-width: 44px; min-height: 44px; padding: .5rem .7rem; color: var(--navy-950); background: var(--white); border: 1px solid var(--navy-900); border-radius: var(--radius-sm); font-weight: 700; }
.menu-toggle__label { margin-left: .38rem; }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: .7rem 1rem; border: 2px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: transform .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.button--primary { color: var(--white); background: var(--red-600); }
.button--primary:hover { color: var(--white); background: var(--red-700); transform: translateY(-1px); }
.button--secondary { color: var(--navy-900); background: var(--white); border-color: var(--navy-900); }
.button--secondary:hover { color: var(--white); background: var(--navy-900); }
.button--light { color: var(--navy-950); background: var(--white); }
.button--light:hover { color: var(--navy-950); background: var(--blue-100); }
.button:active { transform: translateY(0); box-shadow: inset 0 2px 0 rgb(0 0 0 / .2); }

.breadcrumbs { padding-block: var(--space-4); border-bottom: 1px solid var(--slate-100); font-size: var(--text-sm); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem .6rem; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li + li::before { margin-right: .6rem; color: var(--slate-700); content: "/"; }
.hero { position: relative; overflow: clip; padding-block: clamp(4rem, 7vw, 7.5rem); color: var(--white); background: var(--navy-950); }
.hero--split { padding-block: 0; }
.hero__grid { display: grid; min-height: min(38rem, 78vh); grid-template-columns: minmax(0, 5fr) minmax(20rem, 7fr); align-items: stretch; }
.hero__content { position: relative; z-index: 1; display: flex; max-width: 44rem; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 6.5rem) var(--gutter) clamp(3rem, 6vw, 6.5rem) max(var(--gutter), calc((100vw - var(--content-max)) / 2)); }
.hero__content > * { max-width: 35rem; }
.hero__content h1, .surface-dark h1, .surface-dark h2, .surface-dark h3 { color: var(--white); }
.hero__content .eyebrow, .surface-dark .eyebrow { color: var(--blue-100); }
.hero__lede { margin: var(--space-5) 0 var(--space-6); font-size: var(--text-lg); line-height: 1.5; }
.hero__media { min-height: 20rem; background: var(--navy-800); }
.hero__media picture { display: block; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::after { position: absolute; content: ""; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--navy-950) 0%, rgb(7 26 51 / .45) 48%, rgb(7 26 51 / .03) 100%); }
.hero--editorial { background: linear-gradient(130deg, var(--navy-950), var(--navy-800)); }
.hero--editorial::after { position: absolute; right: 6%; bottom: -6rem; width: 23rem; height: 23rem; content: ""; border: 1px solid rgb(220 235 250 / .24); border-radius: 50%; box-shadow: 0 0 0 3rem rgb(220 235 250 / .06), 0 0 0 6rem rgb(220 235 250 / .035); }
.hero--utility { padding-block: var(--space-8); }

.card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.card { display: flex; min-height: 100%; flex-direction: column; padding: var(--space-5); color: var(--ink); background: var(--white); border: 1px solid var(--slate-300); border-radius: var(--radius-md); box-shadow: 0 1px 0 rgb(7 26 51 / .03); }
.card::before { width: 2.4rem; height: 4px; margin-bottom: var(--space-4); content: ""; background: var(--red-600); }
.card h3 { margin-bottom: var(--space-3); }
.card p { margin: 0 0 var(--space-4); color: var(--slate-700); }
.card > a:last-child { margin-top: auto; font-weight: 700; }
.card--link { text-decoration: none; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.card--link:focus-visible { outline-offset: 5px; }
.card--link:hover { color: var(--ink); border-color: var(--navy-900); box-shadow: var(--shadow-lift); }
.card--service { grid-column: span 4; }
.card--industry { grid-column: span 3; }
.card--area { grid-column: span 4; }
.card--price { grid-column: span 4; }
.card--price .price { margin: var(--space-3) 0; color: var(--navy-950); font: 400 var(--text-xl)/1 var(--font-display); }
.card--price .price-note { font-size: var(--text-sm); font-style: italic; }

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose p, .prose li { max-width: var(--reading-max); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { max-width: var(--reading-max); padding: var(--space-4) var(--space-5); margin-inline: 0; color: var(--navy-900); background: var(--blue-50); border-inline-start: 4px solid var(--red-600); }
.image-frame { overflow: hidden; background: var(--blue-100); border-radius: var(--radius-lg); }
.image-frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.image-frame--portrait img { aspect-ratio: 4 / 5; object-position: 56% 45%; }
.image-frame--van img { object-position: 72% 55%; }
.image-frame--floor img { object-position: 42% 58%; }
.content-split { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); align-items: start; }
.process-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: process; }
.process-list li { display: grid; gap: var(--space-3); grid-template-columns: 2.75rem 1fr; align-items: start; }
.process-list li::before { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--white); content: counter(process, decimal-leading-zero); counter-increment: process; background: var(--navy-900); border-radius: 50%; font-size: var(--text-sm); font-weight: 700; }
.rate-band { display: grid; gap: var(--space-5); grid-template-columns: auto 1fr; align-items: center; padding: var(--space-6); color: var(--navy-950); background: var(--blue-100); border-inline-start: 6px solid var(--blue-700); }
.rate-band__value { font: 400 clamp(2rem, 3vw, 3.35rem)/1 var(--font-display); }

.quote-section { position: relative; overflow: hidden; color: var(--white); background: var(--navy-950); }
.quote-section::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .06; background-image: linear-gradient(135deg, transparent 49%, var(--blue-100) 50%, transparent 51%), linear-gradient(45deg, transparent 49%, var(--blue-100) 50%, transparent 51%); background-size: 42px 42px; }
.quote-section__grid { position: relative; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 5fr) minmax(20rem, 7fr); align-items: start; }
.quote-section h2 { color: var(--white); }
.quote-section .eyebrow { color: var(--blue-100); }
.quote-section a:not(.button) { color: var(--white); }
.quote-points { display: grid; gap: var(--space-3); padding: 0; list-style: none; }
.quote-points li { display: grid; grid-template-columns: 1.2rem 1fr; gap: var(--space-3); }
.quote-points li::before { color: var(--focus); content: "✓"; font-weight: 700; }
.rr-form-panel { min-height: 38rem; padding: clamp(1.5rem, 4vw, 2.25rem); color: var(--ink); background: var(--white); border: 1px solid rgb(255 255 255 / .28); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.rr-form-panel > :first-child { margin-top: 0; }
.rr-form-loading { margin: 0 0 var(--space-4); color: var(--slate-700); font-size: var(--text-sm); }
.rr-form-fallback { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--slate-300); }

.faq-list { display: grid; gap: var(--space-3); }
.faq-list details { padding: 0 var(--space-5); background: var(--blue-50); border: 1px solid var(--slate-300); border-radius: var(--radius-sm); }
.faq-list details[open] { border-left: 4px solid var(--red-600); }
.faq-list summary { display: flex; min-height: 3.25rem; align-items: center; padding: var(--space-3) 0; color: var(--navy-950); cursor: pointer; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { margin-left: auto; content: "+"; color: var(--red-700); font-size: 1.45rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > div { padding-bottom: var(--space-4); }

.site-footer { color: var(--white); background: var(--navy-950); }
.footer-action { padding-block: var(--space-6); background: var(--navy-900); }
.footer-action__inner { display: flex; gap: var(--space-5); align-items: center; justify-content: space-between; }
.footer-action h2 { color: var(--white); font-size: var(--text-xl); }
.footer-main { padding-block: var(--space-8) var(--space-6); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1.4fr repeat(3, 1fr); }
.footer-brand { display: grid; gap: var(--space-4); }
.footer-brand .brand { max-width: 11rem; padding: var(--space-2) var(--space-3); background: var(--white); border-radius: var(--radius-sm); }
.footer-title { margin: 0 0 var(--space-3); color: var(--blue-100); font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.site-footer ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-footer address { font-style: normal; }
.site-footer a:not(.button) { color: var(--white); }
.footer-bottom { padding-block: var(--space-4); border-top: 1px solid rgb(220 235 250 / .2); color: var(--blue-100); font-size: var(--text-sm); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; }

@media (hover: hover) and (pointer: fine) { .card--link:hover { transform: translateY(-3px); } }
@media (max-width: 1023px) {
  .site-header__inner { min-height: 4.75rem; }
  .menu-toggle { display: inline-flex; align-items: center; margin-left: auto; }
  .header-quote { display: none; }
  .site-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; max-height: calc(100vh - 7rem); overflow: auto; padding: var(--space-3) var(--gutter) var(--space-5); background: var(--white); border-bottom: 1px solid var(--slate-300); box-shadow: var(--shadow-card); }
  .site-nav[data-open="true"] { display: block; }
  .site-nav__list { display: grid; gap: .15rem; }
  .site-nav a, .site-nav button { width: 100%; justify-content: space-between; padding: .78rem .7rem; font-size: 1rem; }
  .nav-panel { position: static; width: auto; margin: 0 .7rem; border-top-width: 3px; border-radius: 0; box-shadow: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__content { padding: var(--space-8) var(--gutter) var(--space-7); }
  .hero__media { min-height: min(58vw, 26rem); }
  .hero__media::after { background: linear-gradient(180deg, rgb(7 26 51 / .12), transparent); }
  .card--service, .card--area { grid-column: span 6; }
  .card--industry { grid-column: span 4; }
  .card--price { grid-column: span 4; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-section__grid { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .section { padding-block: var(--space-7); }
  .utility-bar__inner { justify-content: center; min-height: 2.7rem; }
  .utility-bar__service-area { display: none; }
  .site-header__inner { gap: var(--space-3); min-height: 4.5rem; }
  .brand { max-width: 10.5rem; }
  .hero { padding-block: var(--space-7); }
  .hero__content { padding-block: var(--space-7) var(--space-6); }
  .hero__lede { margin-block: var(--space-4) var(--space-5); }
  .button-row { align-items: stretch; }
  .button-row .button { flex: 1 1 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .card--service, .card--industry, .card--area, .card--price { grid-column: auto; }
  .content-split { grid-template-columns: 1fr; }
  .rate-band { grid-template-columns: 1fr; padding: var(--space-5); }
  .rr-form-panel { min-height: 38rem; padding: var(--space-5); }
  .footer-action__inner { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom__inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}