/* The supplied Ashburn mark: midnight navy, appliance blue and brushed steel. */
:root {
  --ink: #10283c;
  --muted: #526678;
  --mocha: #17689d;
  --accent: #17689d;
  --cream: #f3f6f8;
  --sand: #e8f0f6;
  --line: #d7e1e9;
  --white: #ffffff;
  --navy: #0b1c2c;
  --blue: #17689d;
  --sky: #71b9e8;
  --steel: #c5d2dc;
  color-scheme: light;
}
html { scroll-padding-top: calc(var(--header-height, 106px) + 18px); }
body { background: #f8fafc; color: var(--ink); }
.service-hours-banner { background: linear-gradient(110deg, #102d45, #155b88); color: #fff; border-bottom: 3px solid #79c9fa; }
.service-hours-banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; }
.service-hours-banner p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: .9375rem; line-height: 1.5; }
.service-hours-banner strong { font-size: 1.125rem; color: #fff; white-space: nowrap; }
.hours-symbol { font-size: 1.7rem; line-height: 1; color: #aae0ff; }
.service-hours-banner .weekend-promise { background: #e2f3ff; color: #10334c; padding: 8px 15px; border-radius: 7px; font-weight: 700; }
.booking-hours-note { display: flex; flex-wrap: wrap; gap: 6px 22px; background: #e5f3fc; color: #123b57; padding: 16px 20px; margin-top: 24px; border-left: 4px solid #17689d; border-radius: 6px; font-size: 1rem; line-height: 1.5; }
@media(max-width: 700px) { .service-hours-banner .wrap { align-items: stretch; flex-direction: column; gap: 10px; } .service-hours-banner p { font-size: .875rem; } .service-hours-banner .weekend-promise { justify-content: center; text-align: center; } }
body, input, textarea, select, button { font-family: 'Avenir Next', 'Segoe UI', Arial, sans-serif; }
h1, h2, h3, h4, h5, h6,
.ash-opening h1, .ash-section-title h2, .ash-home .flow-section h2,
.journey-hero h1, .page-intro h1, .local-hero h1 {
  font-family: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  font-weight: 650;
  letter-spacing: -.035em;
}
h1 { line-height: 1.08; }
h2 { line-height: 1.16; }
h3 { line-height: 1.3; letter-spacing: -.02em; }
::selection { background: #c5e4f8; color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.ash-service-card:focus-visible, .clean-brand:focus-visible,
.clean-city:focus-visible, a.problem:focus-visible {
  outline: 3px solid #358cca;
  outline-offset: 4px;
}
.eyebrow, .contact-label, .service-card .index, .step .num,
.ash-card-book, .photo-attribution a { color: var(--blue); }
.muted, .tiny, .ash-lead, .ash-local, .request-summary dt,
.ash-section-title p, .ash-service-main p, .ash-card-detail { color: var(--muted); }

/* A dark, compact masthead frames the original artwork without altering it. */
.topbar { background: #071522; color: #c5d7e5; padding: 8px 0; font-size: .8rem; }
.topbar .wrap span:first-child { letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; }
.header { z-index: 50; background: var(--navy); color: #fff; border-bottom: 1px solid #284153; box-shadow: 0 5px 18px #07152212; }
.skip { z-index: 60; }
.navrow, .home-page .navrow { display: grid; grid-template-columns: 180px auto minmax(0, 1fr); min-height: 106px; height: auto; gap: 20px; padding: 0; }
.brand { min-width: 0; width: 180px; display: block; }
.supplied-logo { width: 180px; height: 100px; object-fit: cover; object-position: center 36%; }
.navlinks { font-size: .875rem; gap: 15px; justify-self: end; }
.navlinks a { color: #e7eff5; }
.navlinks a:hover, .navlinks a[aria-current=page] { color: #8acbfa; }
.navright, .home-page .navright { display: grid; grid-template-columns: repeat(2, 100px); gap: 6px; margin: 0; max-width: none; }
.navright > .button, .navright > .button:first-child, .navright > .button:nth-child(2),
.home-page .navright > .button { display: inline-flex; width: 100%; min-height: 44px; padding: 8px; border-radius: 7px; font-size: .875rem; line-height: 1.25; white-space: normal; text-align: center; }
.navright .button.outline { background: transparent; border-color: #698397; color: #fff; }
.navright .button.outline:hover { background: #18374e; border-color: #a4cce7; }
.menu-toggle { color: #fff; background: #132e43; border-color: #496477; border-radius: 7px; }

/* Keep the familiar opening photograph and service entrances. */
.ash-opening, .picture-opening { background: #f8fafc; padding-top: 46px; }
.home-section-intro { position: relative; padding-bottom: 28px; }
.home-section-intro .eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: var(--blue); }
.home-section-intro h1 { max-width: 1050px; font-size: clamp(36px, 4.5vw, 64px); font-weight: 650; line-height: 1.08; margin: 0 0 20px; }
.ash-opening h1 span, .hero-copy h1 span { color: var(--blue); }
.home-section-intro > p:last-child { max-width: 760px; line-height: 1.65; color: var(--muted); font-size: 1.05rem; }
.home-feature { border-radius: 14px 14px 0 0; }
.home-feature-photo { height: clamp(285px, 35vw, 470px); border-radius: 14px 14px 0 0; }
.home-reassurance { background: #eaf1f6; border-color: var(--line); border-bottom: 3px solid #bdd9eb; margin-bottom: 30px; }
.reassurance-item + .reassurance-item { border-color: #cddbe5; }
.reassurance-item h2 { font-weight: 650; color: var(--ink); }
.reassurance-item p { color: var(--muted); }
.category-entrances, .journey-categories { gap: 22px; }
.category-entrance { border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px #10283c08; }
.category-entrance { border: 1px solid #97bfdc; border-top: 4px solid var(--blue); }
.category-entrance > div { background: var(--navy); color: #fff; padding: 23px; }
.category-entrance > div > span { color: var(--sky); }
.category-entrance h2 { font-size: clamp(20px, 1.8vw, 25px); font-weight: 650; }
.category-entrance:hover { border-color: #3486bd; box-shadow: 0 9px 24px #10283c14; }

/* Blue calls to action and light steel booking surfaces. */
.button, .floating-actions .book-float { background: var(--blue); color: #fff; border-color: var(--blue); border-radius: 8px; font-weight: 650; }
.button:hover, .floating-actions .book-float:hover { background: #104f78; border-color: #104f78; color: #fff; }
.button.outline, .floating-actions .call-float { background: #fff; color: var(--ink); border-color: #9cb0c0; }
.button.outline:hover, .floating-actions .call-float:hover { background: #e8f3fa; border-color: var(--blue); color: #104f78; }
.button.light { background: #fff; color: var(--navy); border-color: #fff; }
.floating-actions { filter: drop-shadow(0 5px 15px #07152229); }
.floating-actions .button { border-radius: 999px; }
.ash-home .booking-section { background: #fff; padding: 60px 0; }
.ash-booking { border: 1px solid #cddce8; border-radius: 14px; background: #edf4f9; box-shadow: 0 10px 30px #10283c09; }
.ash-booking .book-intro { padding-top: 32px; }
.ash-booking .book-intro h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 650; }
.ash-booking .booking-calendar { border-color: #c7d8e5; }
.flow-field input, .flow-field select, .flow-field textarea,
.customer-fields input, .customer-fields textarea { border-color: #b9cbd9; border-radius: 7px; background: #fff; color: var(--ink); }
.calendar-head button { background: #fff; color: var(--ink); border-color: #cbd9e4; }
.calendar-days button { color: var(--ink); border-color: #d6e3ed; border-radius: 7px; }
.calendar-days button:hover:not(:disabled) { background: #dcecf7; border-color: #83b4d7; }
.calendar-days button[aria-pressed=true], .calendar-days button[aria-pressed=true]:hover,
.ash-booking .calendar-days button[aria-pressed=true] { background: var(--blue); color: #fff; border-color: var(--blue); }
.calendar-days button:disabled { color: #82919e; background: transparent; }
.calendar-note, .calendar-weekdays { color: var(--muted); }
.full-booking-panel { border-color: var(--line); border-radius: 14px; box-shadow: 0 10px 32px #10283c08; }
.booking-card { background: #e8f0f6; border: 1px solid var(--line); border-radius: 12px; }
.booking-review, .booking-receipt { color: var(--ink); }
.request-card { border-color: var(--line); }
.delivery-note { background: #e8f3fa; border-color: var(--blue); }

/* Appliance, brand and city directories share the same visual language. */
.ash-directory { background: #f8fafc; padding-top: 52px; }
.ash-section-title h2, .ash-home .flow-section h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 650; }
.ash-service-card.ash-service-main, .clean-brand, .clean-city,
.service-card, .brand-card, .offer, .contact-card, .city-appliance-grid a {
  background: #fff; color: var(--ink); border-color: var(--line); border-radius: 10px;
}
.ash-service-card.ash-ac-card { background: var(--navy); border-color: var(--line); color: #fff; }
.ash-home .ac-photo-only { border-color: var(--line); }
.ash-service-card:hover, .clean-brand:hover, .clean-city:hover,
.service-card:hover, .brand-card:hover { border-color: #438dbf; box-shadow: 0 6px 18px #10283c12; }
.ash-service-card.ash-service-main h3 { font-weight: 650; }
.tile-arrow { color: var(--blue); }
.ash-ac-card .tile-arrow { color: var(--sky); }
.clean-brand { box-shadow: 0 2px 8px #10283c04; }
.clean-city { border-radius: 10px; }
.clean-city img { border-radius: 6px; }
.ash-home .brand-section { background: #fff; border-color: var(--line); }
.ash-home .city-section { background: #eaf1f6; border-top: 1px solid var(--line); }
.service-grid { gap: 15px; border: 0; background: transparent; }
.service-card { border: 1px solid var(--line); }
.chip { background: #fff; color: var(--ink); border-color: #c6d6e3; border-radius: 6px; }
.chip:hover { background: #e5f1fa; border-color: #6da5cc; }
.text-link { color: var(--blue); border-color: #9cbfd6; }

/* Service detail, manufacturer and local pages. */
.journey-hero { background: #edf3f8; border-bottom: 1px solid var(--line); }
.journey-hero h1 { font-weight: 650; }
.journey-hero-grid > img, .page-photo img, .local-hero img { border-radius: 12px; }
.journey-lead { color: var(--muted); }
.journey-city { background: var(--navy); color: #fff; border-color: #294456; }
.journey-city .journey-lead, .journey-city .eyebrow { color: #bfdbef; }
.journey-city .button.outline { background: transparent; color: #fff; border-color: #809daf; }
.journey-city .button.outline:hover { background: #1a3b52; }
.journey-brand { background: #f3f7fa; }
.journey-brand-logo img { border: 1px solid var(--line); }
.logo-full { background: var(--navy); border-color: #294456; border-radius: 12px; overflow: hidden; }
.selection-note { border-color: #3997d4; color: var(--ink); }
.back-row { padding-top: 20px; padding-bottom: 20px; }
.back-button { background: #fff; color: var(--ink); border: 1px solid #c6d6e3; border-radius: 6px; }
.back-button:hover { background: #e8f3fa; }
.back-row > a { color: var(--blue); }
.issue-group { border-color: var(--line); }
a.problem { background: #155a88; color: #fff; border: 1px solid #155a88; border-bottom: 4px solid #0c3e60; border-radius: 10px; box-shadow: 0 4px 12px #10283c0d; }
a.problem .issue-action { color: #fff; border-color: #a4cbe599; }
a.problem:hover { background: #0e476d; color: #fff; box-shadow: 0 7px 20px #10283c20; }
a.problem:active { background: #0b354f; }
a.problem.other-issue { border: 1px dashed #4c89b2!important; border-bottom-width: 4px!important; background: #eaf3fa; color: var(--ink); }
a.problem.other-issue .issue-action { color: var(--blue); border-color: #85acc8; }
.dark, .cta { background: var(--navy); color: #fff; }
.dark p, .cta p, .dark .eyebrow { color: #bfd0de; }
.dark .feature-list li:before { color: var(--sky); }

/* Use the exact supplied logo in the footer as well. */
.footer { background: var(--navy); color: #fff; border-top: 3px solid #2c79ac; }
.footer h3 { font-weight: 650; color: #fff; }
.footer a, .footer p { color: #c5d6e3; }
.footer a:hover { color: #8acbfa; }
.footer .footer-brand { width: 250px; max-width: 100%; margin: 0 0 22px; }
.footer-brand img { width: 250px; height: 140px; object-fit: cover; object-position: center 36%; }
.foot-bottom { border-color: #2c4659; color: #b1c5d5; }

@media(max-width:1250px) {
  .navrow, .home-page .navrow { grid-template-columns: 180px auto minmax(44px, 1fr); }
  .menu-toggle { justify-self: end; }
  .navlinks { top: 100%; width: 100%; justify-self: stretch; background: #0f2639; color: #fff; border-bottom: 1px solid #3c5b70; box-shadow: 0 12px 20px #07152220; max-height: calc(100vh - var(--header-height, 106px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
  .navlinks a { padding: 9px 0; min-height: 44px; width: 100%; }
}
@media(max-width:760px) {
  .picture-opening { padding-top: 30px; }
  .home-section-intro h1 { font-size: clamp(34px, 7.6vw, 48px); line-height: 1.1; }
  .home-section-intro > p:last-child { font-size: 16px; }
  .home-feature-photo { height: 290px; }
  .ash-home .booking-section { padding: 35px 0; }
  .ash-booking .book-intro { padding-top: 24px; }
  .ash-directory { padding-top: 32px; }
  .ash-section-title h2, .ash-home .flow-section h2 { font-size: 30px; }
  .category-entrance > div { padding: 20px; }
  .category-entrance h2 { font-size: 23px; }
  .floating-actions { filter: none; }
  .floating-actions .button { box-shadow: 0 5px 18px #07152224; }
  .journey-hero h1 { font-size: 2.25rem; }
}
@media(max-width:360px) {
  .home-section-intro h1 { font-size: 32px; }
}
/* Compact, equal actions beside the logo, with full-size touch targets. */
@media(max-width:600px) {
  .header > .wrap { width: calc(100% - 24px); }
  .navrow, .home-page .navrow {
    grid-template-columns: minmax(76px, 1fr) clamp(144px, 48vw, 200px) 44px;
    gap: 6px; min-height: 90px; padding: 7px 0;
  }
  .brand { width: 160px; max-width: 100%; }
  .supplied-logo, .home-page .supplied-logo { width: 100%; height: auto; aspect-ratio: 1.8; object-fit: cover; object-position: center 36%; }
  .navright, .home-page .navright { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
  .menu-toggle { grid-column: 3; grid-row: 1; }
}
/* Prevent long names, contact details and form controls widening small screens. */
.header .navright > .button, .home-page .header .navright > .button { display: inline-flex; width: 100%; min-height: 44px; padding: 8px 6px; font-size: .875rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.navrow > *, .booking-fields > *, .customer-fields > *, .request-summary > *,
.journey-hero-grid > *, .footer-grid > *, .contact-card { min-width: 0; }
.flow-field input, .flow-field select, .flow-field textarea { width: 100%; min-width: 0; font-size: 1rem; }
.request-summary dd, .contact-card a, .footer a, .city-credit, .photo-attribution { overflow-wrap: anywhere; }
.booking-review, .booking-receipt, #booking-form { scroll-margin-top: calc(var(--header-height, 106px) + 18px); }
.floating-actions { bottom: max(14px, env(safe-area-inset-bottom)); }
body { padding-bottom: 96px; }
.floating-actions:focus-within { z-index: 45; }
@media(max-height:480px) and (max-width:1000px) { .header { position: relative; } }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition: none!important; scroll-behavior: auto!important; }
}
/* Focused service entrances and unobstructed booking. */
.desktop-contact { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:0 max(24px,calc((100% - 1260px)/2)) 10px; font-size:.875rem; }
.desktop-contact a { color:#fff; font-variant-numeric:tabular-nums; }
.desktop-contact button { color:#cde8fa; background:none; border:0; padding:5px 0; text-decoration:underline; cursor:pointer; font:inherit; }
.desktop-contact [role=status] { color:#cde8fa; }
.picture-opening { padding-top:28px; }
.home-section-intro { padding-top:0; padding-bottom:0; }
.home-section-intro h1 { font-size:clamp(32px,3.8vw,52px); margin-bottom:14px; }
.home-section-intro > p:last-child { max-width:730px; font-size:1.0625rem; line-height:1.6; }
.home-page .category-entrances { margin-top:24px; gap:20px; }
.home-page .category-entrance img,.home-page .category-entrance:first-child img { height:210px; }
.home-page .category-entrance > div { padding:18px 20px; }
.home-page .category-entrance h2 { font-size:1.4rem; }
.home-reassurance { margin-top:24px; border:1px solid var(--line); border-radius:10px; }
.benefit-symbol { display:block; height:28px; margin-bottom:9px; }
.benefit-symbol img { display:block; margin:auto; }
.home-feature-photo { height:260px; border-radius:10px; }
.floating-actions[hidden] { display:none!important; }
.booking-route .bread { display:none; }
.booking-route .booking-page { padding-top:20px; }
.booking-page-heading { margin-bottom:24px; }
.booking-page-heading h1 { font-size:clamp(30px,3.5vw,44px); }
.full-booking-panel { max-width:980px; margin:auto; padding:28px; }
.full-booking-panel .booking-flow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 32px; }
.full-booking-panel .booking-fields { grid-column:1; grid-row:1; }
.full-booking-panel .booking-time { grid-column:1; grid-row:2; }
.full-booking-panel .booking-calendar { grid-column:2; grid-row:1 / span 2; }
.full-booking-panel .customer-fields,.full-booking-panel .booking-submit { grid-column:1/-1; }
.time-guidance { font-size:.875rem; line-height:1.5; color:var(--muted); }
.field-error { display:block; color:#a12323; font-size:.875rem; line-height:1.4; }
.field-error:empty { display:none; }
.flow-field [aria-invalid=true] { border:2px solid #b52d2d; background:#fffafa; }
@media(max-width:700px) {
 .desktop-contact { display:none; }
 .home-page .category-entrance img,.home-page .category-entrance:first-child img { height:200px; }
 .home-feature-photo { height:210px; }
 .full-booking-panel { padding:20px 16px; }
 .full-booking-panel .booking-flow { display:flex; flex-direction:column; gap:22px; }
 .full-booking-panel .booking-calendar { order:2; }
 .full-booking-panel .booking-time { order:3; }
 .full-booking-panel .customer-fields { order:4; }
 .full-booking-panel .booking-submit { order:5; }
 .full-booking-panel .booking-fields { order:1; }
}
