/* Orange-led palette from Caveman Flooring's supplied brand graphic.
   White and charcoal carry the layout; blue is reserved for small details. */
:root {
  color-scheme: light;
  --ink: #24292d;
  --black: #20272b;
  --paper: #fffdfb;
  --muted: #626971;
  --line: #e8e3dd;
  --orange: #f58220;
  --orange-hover: #ff963d;
  --orange-ink: #ad480b;
  --orange-soft: #fff3e7;
  --orange-line: #edc8a6;
  --blue: #006b8b;
  --blue-deep: #064c67;
  --gold: var(--orange);
}

body { background: var(--paper); color: var(--ink); }
button { color: inherit; }
::selection { background: #ffd7b3; color: var(--ink); }
.header, .footer, .utility-bar { background: #fff; }
.utility-bar { border-bottom-color: var(--line); }
.header { border-bottom: 2px solid var(--orange); }
.utility-bar svg { color: var(--orange-ink); }
.bbb-badge { background: var(--blue-deep); }
.desktop-nav a:hover, .mobile-menu-links a:hover,
.mobile-menu-links a[aria-current=page], .footer a:hover,
.utility-contact a:hover { color: var(--orange-ink); }
.mobile-menu-links svg { color: var(--orange); }
.button:hover { background: var(--orange-hover); }
.button-outline { border-color: var(--orange-ink); color: var(--orange-ink); }
.button-outline:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.eyebrow { color: var(--orange-ink); }
.text-link:not(.light-link) { color: var(--orange-ink); }
.hero .eyebrow { color: #fff2e4; }
.hero h1 span { color: var(--orange); }
.hero-description, .hero-rating, .scroll-hint { color: #f1f2f3; }
.hero-shade {
  background: linear-gradient(90deg, #191e23e0 0%, #191e239e 38%, #191e2310 88%),
              linear-gradient(0deg, #191e23a3, transparent 38%);
}
.project-overlay { background: linear-gradient(0deg, #191e23c4, transparent 60%); }
.story-photo > span { background: linear-gradient(transparent, #191e23cc); }
.portfolio-caption { background: linear-gradient(transparent, #191e23d4); }
dialog { background: #20272b; }
dialog::backdrop { background: #191e23db; }
.lightbox-bottom a, .lightbox-bottom .text-link { color: #ffab61; }

.trust-strip { background: #fff8f1; border-bottom-color: var(--orange-line); }
.trust-inner > div > strong span, .trust-inner svg { color: var(--orange-ink); }
.service-number { color: var(--orange-ink); background: var(--orange-soft); }
.service-tag { color: var(--blue); }
.work-section, .reviews { background: #faf8f5; }
.project-filters button { border-color: #d6d9dc; color: var(--ink); }
.project-filters button:hover { background: var(--orange-soft); border-color: var(--orange); }
.project-filters button.active, .portfolio-toolbar .project-filters button.active {
  background: var(--orange); border-color: var(--orange); color: var(--ink);
}
.featured-review blockquote { color: var(--ink); }
.page-intro { background: #fff8f1; border-bottom-color: var(--orange-line); }
.page-intro .eyebrow, .page-cta .eyebrow { color: var(--orange-ink); }
.page-intro h1 { color: var(--ink); }
.breadcrumbs a { color: var(--blue); }
.page-cta { background: #fff0e0; border-block: 1px solid var(--orange-line); }
.service-detail:nth-of-type(odd) { background: #faf8f5; }
.service-detail-copy li svg, .value-grid article > svg { color: var(--orange-ink); }
.values-section, .faq-page aside, .contact-location { background: var(--orange-soft); }
.team-names article > span { color: var(--orange-ink); background: var(--orange-soft); border-color: var(--orange-line); }

.area-section { background: #fff4e9; }
.area-copy > p:not(.eyebrow), .city-detail p { color: var(--muted); }
.city-options button { color: var(--ink); background: #fff; border-color: #e5cbb3; }
.city-options button:hover { background: #ffe5cb; border-color: var(--orange); }
.city-options button[aria-pressed=true] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.city-detail-icon { color: var(--orange-ink); border-color: var(--orange-line); background: #fffaf5; }
.area-map { border-color: #e7c5a5; box-shadow: 0 14px 40px #aa571410; }
.map-heading { color: var(--ink); }
.map-heading > span { color: var(--orange-ink); }
.pin-dot, .map-legend > span { background: var(--orange); }
.pin-dot { box-shadow: 0 0 0 1px #b75613; }
.pin-label { background: #ffffffed; color: var(--ink); box-shadow: 0 2px 5px #20272b10; }
.map-pin[aria-pressed=true] .pin-dot { background: var(--orange); box-shadow: 0 0 0 6px #f5822033, 0 0 0 1px #b75613; }
.map-pin[aria-pressed=true] .pin-label { color: var(--orange-ink); }
.map-pin:hover .pin-dot { box-shadow: 0 0 0 6px #f5822033; }
.map-legend, .map-legend small { color: var(--muted); }

.contact-section { background: #faf8f5; }
.contact-copy .eyebrow, .contact-copy h2 span, .contact-detail svg,
.contact-tabs svg, .contact-steps span, .booking-selection svg { color: var(--orange-ink); }
.contact-steps span { border-color: var(--orange-line); }
.contact-email svg { color: var(--blue); }
.contact-tabs { background: #fff4e9; }
.contact-tabs button[aria-selected=true] { color: var(--orange-ink); }
form input:focus, form textarea:focus { outline-color: var(--orange); border-color: var(--orange-ink); }
.required { color: var(--orange-ink); }
.service-picker input:checked + span { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-ink); }
.service-picker input:focus-visible + span { outline-color: var(--orange); }
.calendar-days button { background: var(--orange-soft); color: var(--ink); border-color: var(--orange-line); }
.calendar-days button[aria-pressed=true] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.calendar-days button:not(:disabled):hover, .time-options button:hover { border-color: var(--orange); background: #ffe5cb; }
.time-options button { border-color: var(--orange-line); color: var(--ink); }
.booking-selection { border-color: var(--orange-line); background: #fff8f1; }
.success-icon { background: #edf6fa; color: var(--blue); }
.newsletter-form [role=status] { color: var(--blue); }
.newsletter-form [role=status].error { color: #a13e2a; }
.footer-newsletter .eyebrow, .footer-contact svg { color: var(--orange-ink); }
.footer-newsletter { border-bottom-color: var(--orange-line); }
.footer-newsletter h2 { color: var(--ink); }
.newsletter-form .newsletter-input input { border-color: #d4d9dc; background: #fff; }
.newsletter-consent, .footer-payments p { color: var(--muted); }
.social-links a { border-color: var(--orange-line); color: var(--orange-ink); }
.social-links a:hover { background: var(--orange-soft); }
.footer-contact .footer-booking { color: var(--orange-ink); }
.mobile-contact { border-top-color: var(--orange-line); }

/* Match the original website's black footer and white/orange branding. */
.footer {
  --ink: #f5f4f2;
  --muted: #c2bfba;
  --line: #ffffff26;
  --orange-ink: var(--orange);
  background: #070400;
  color: var(--ink);
  border-top-color: #070400;
}
.footer-newsletter, .footer-assurance, .footer-bottom { border-color: var(--line); }
.footer .footer-links > a,
.footer .footer-contact > a,
.footer .footer-contact address,
.footer .footer-bottom a { color: #edeae6; }
.footer .footer-bottom { color: var(--muted); }
.footer a:hover { color: var(--orange); }
.footer .newsletter-form > label { color: #edeae6; }
.footer .newsletter-form .newsletter-input input { color: #20272b; border-color: #d4d9dc; }
.footer .newsletter-form [role=status] { color: #ffbd84; }
.footer .newsletter-form [role=status].error { color: #ffb4a4; }
.footer .social-links a { background: var(--orange); border-color: var(--orange); color: #070400; }
.footer .social-links a:hover { background: #fff; border-color: #fff; color: #070400; }
.footer-bottom { justify-content: center; text-align: center; }

/* A consistent, centered composition on phones, with readable form fields. */
/* Contact details stay visible at every breakpoint; accreditation remains in the footer. */
.utility-inner { min-height: 44px; height: auto; }
.utility-contact { gap: 24px; }
.utility-contact > a, .utility-contact > a:first-child { display: flex; min-height: 44px; white-space: nowrap; }
.utility-contact svg { flex-shrink: 0; }
.hero-media .hero-poster { transform: none; object-position: center; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .35s; }
.hero-media video.is-ready { opacity: 1; }
.video-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 15px; border: 1px solid #ffffff8c; border-radius: 30px; background: #161b2080; color: #fff; font-size: 11px; }
.video-toggle[hidden] { display: none; }
.video-toggle svg { width: 17px; height: 17px; }
.video-toggle:hover { color: #20272b; background: var(--orange); border-color: var(--orange); }
.video-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.story-photo img[src$="caveman-orange-shirt-floor-finishing.webp"] { object-position: 50% 40%; }
[data-page="about"] .page-intro-photo { min-height: 430px; }
[data-page="about"] .page-intro-photo img { object-position: 50% 35%; }
@media (max-width: 900px) {
  .utility-location { display: none; }
  .utility-inner { justify-content: center; }
}
@media (max-width: 420px) {
  .utility-inner { width: calc(100% - 24px); }
  .utility-contact { font-size: 10px; }
  .utility-contact > a { gap: 5px; }
  .utility-contact svg { width: 12px; height: 12px; }
}
@media (max-width: 359px) {
  .utility-contact { flex-direction: column; gap: 0; padding: 2px 0; font-size: 11px; }
  .utility-contact > a, .utility-contact > a:first-child { min-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video { transition: none; }
}
@media (max-width: 767px) {
  .hero-content, .section-heading, .story-copy, .area-copy,
  .contact-copy, .page-intro-copy, .page-cta, .service-detail-copy,
  .value-grid, .team-section, .contact-location, .faq-page aside,
  .subscription-page, .footer { text-align: center; }

  .hero { height: auto; min-height: 680px; max-height: none; }
  .hero-media .hero-poster, .hero-media video { object-position: 68% center; }
  .hero-content { padding: 58px 0 118px; }
  .hero .eyebrow {
    display: block; max-width: 34ch; margin: 0 auto 24px;
    font-size: 10px; line-height: 1.8; letter-spacing: .09em;
  }
  .hero .small-line { display: block; width: 34px; height: 3px; margin: 0 auto 14px; }
  .hero h1 { font-size: clamp(36px, 9.7vw, 60px); margin-inline: auto; }
  .hero-description { max-width: 440px; margin-inline: auto; }
  .hero-actions { flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
  .hero-rating { justify-content: center; flex-direction: column; gap: 10px; max-width: none; margin-inline: auto; font-size: 11px; }
  .hero-rating > span:last-child { max-width: none; }
  .hero-rating .rating-divider { margin: 0 5px; }

  .section-heading { display: block; }
  .section-heading > p, .work-intro, .story-copy > p:not(.eyebrow),
  .area-copy > p, .contact-copy > p:not(.eyebrow),
  .page-intro-copy > p:last-child, .page-cta p,
  .service-detail-copy > p:not(.eyebrow) { margin-inline: auto; }
  .section-heading > p, .work-intro { max-width: 460px; margin-top: 20px; }
  .trust-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: center; }
  .trust-inner > div { flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
  .trust-inner > div:last-child { display: none; }
  .trust-inner > div > span { font-size: 11px; }
  .trust-inner b { font-size: 12px; }

  .service-grid { grid-template-columns: 1fr; gap: 34px; }
  .service-card { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .service-image { width: 100%; height: auto; aspect-ratio: 1.65; }
  .service-copy { padding: 0; width: 100%; max-width: 440px; }
  .service-copy h3 { font-size: 26px; }
  .service-copy p { font-size: 15px; max-width: none; margin: 12px auto 0; }
  .service-tag { margin-inline: auto; }
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-photo > span { text-align: center; }
  .story-photo img { aspect-ratio: 1.4; }
  .featured-review figcaption { justify-content: center; align-items: center; flex-wrap: wrap; }
  .featured-review .stars { justify-content: center; }
  .project-overlay { justify-content: center; text-align: center; }
  .project-open { display: none; }
  .portfolio-toolbar { display: block; text-align: center; }
  .portfolio-toolbar .project-filters { justify-content: center; }
  .portfolio-toolbar > p { margin-top: 16px; }

  .page-intro { padding: 38px 0 40px; }
  .page-intro > .container, .page-intro.with-photo > .container { grid-template-columns: 1fr; gap: 30px; }
  .page-intro h1 { font-size: clamp(36px, 9.2vw, 52px); }
  .page-intro-photo { min-height: 250px; }
  .page-cta > .container { display: block; }
  .page-cta .button { margin-top: 24px; }
  .service-detail > .container { grid-template-columns: 1fr; gap: 30px; }
  .service-detail:nth-of-type(odd) .service-detail-image { order: 0; }
  .service-detail-image img { aspect-ratio: 1.45; }
  .service-detail-copy ul { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .value-grid { grid-template-columns: 1fr; }
  .value-grid article > svg { margin-inline: auto; }
  .team-names article { flex-direction: column; justify-content: center; gap: 14px; }
  .faq-page > .container { grid-template-columns: 1fr; gap: 35px; }
  .faq-page aside { max-width: 520px; margin-inline: auto; }

  .area-copy { max-width: none; }
  .city-options { justify-content: center; }
  .city-detail { flex-direction: column; align-items: center; gap: 14px; min-height: 0; padding: 18px 0 25px; }
  .city-detail p { max-width: 440px; margin-inline: auto; }
  .area-note { margin-inline: auto; }
  .contact-detail, .contact-email { justify-content: center; }
  .contact-copy .contact-detail { flex-direction: column; gap: 10px; }
  .contact-steps { width: fit-content; margin-inline: auto; text-align: left; }
  .contact-faq { margin-inline: auto; text-align: left; }
  .form-intro, .connection-notice, .timezone-note, .form-status { text-align: center; }
  .contact-location > .container { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .contact-location address { margin: 0; }

  .footer-newsletter { grid-template-columns: 1fr; gap: 25px; padding: 42px 0 35px; }
  .footer-newsletter > div > p:last-child, .footer-company p { margin-inline: auto; }
  .footer-newsletter .newsletter-form { width: 100%; max-width: 460px; margin-inline: auto; }
  .footer .newsletter-form > label { text-align: center; }
  .footer-top { display: grid; grid-template-columns: 1fr; gap: 38px; padding-top: 0; }
  .footer-top > *, .footer-top > div:last-child { grid-column: auto; grid-row: auto; min-width: 0; }
  .footer-brand { width: min(260px, 100%); margin-inline: auto; }
  .footer-company p { max-width: 420px; }
  .footer .social-links { justify-content: center; margin-top: 25px; }
  .footer .social-links a { width: 44px; height: 44px; }
  .footer-links { display: flex; flex-direction: column; align-items: center; }
  .footer-top h3 { margin: 0 0 15px; font-size: 17px; }
  .footer .footer-links > a { justify-content: center; min-height: 42px; font-size: 14px; }
  .footer .footer-contact > a, .footer .footer-contact address { justify-content: center; font-size: 14px; }
  .footer .footer-contact > a { min-height: 36px; align-items: center; }
  .footer .footer-contact .footer-booking { margin-top: 20px; }
  .footer-assurance { flex-direction: column; align-items: center; gap: 26px; margin-top: 28px; }
  .footer-payments { flex-direction: column; align-items: center; gap: 12px; }
  .payment-icons { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; gap: 0; }
  .footer-bottom > span { width: 100%; }
}

@media (max-width: 520px) {
  .hero-shade {
    background: linear-gradient(90deg, #191e23e0, #191e235c),
                linear-gradient(0deg, #191e23c2, transparent 65%);
  }
}
