/* Styles the static (no-React) pages need that Radix used to apply inline. */
[hidden] { display: none !important; }

/* Services dropdown: positioned under its trigger instead of in a portal. */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd > [role="menu"] { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: max-content; }
.nav-dd > [role="menu"] a { cursor: pointer; }
.nav-dd > [role="menu"] a:hover,
.nav-dd > [role="menu"] a:focus-visible { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* Not in the compiled Tailwind build; used by in-text links. */
.underline-offset-2 { text-underline-offset: 2px; }

/* mobile-carousel.js stretches every "rounded" element inside a process step
   (flex: 1), which turned the round step number into a wide pill. Keep it a
   circle. */
@media (max-width: 767px) {
  .mobile-process-carousel [data-testid^="process-step-"] .w-10.h-10.rounded-full {
    flex: 0 0 2.5rem !important;
    flex-direction: row !important;
  }
}

/* Homepage Google reviews (static cards, replacing the Trustindex widget). */
.rv-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 768px) { .rv-grid { grid-template-columns: 3fr 2fr; align-items: start; } .rv-card:first-child { grid-row: span 2; } }
.rv-card { margin: 0; display: flex; flex-direction: column; gap: .75rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: .75rem; padding: 1.5rem; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.rv-stars { display: flex; gap: 2px; }
.rv-text { margin: 0; font-size: .95rem; line-height: 1.6; }
.rv-text p + p { margin-top: .75rem; }
.rv-meta { margin: 0; font-size: .8rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-top: .75rem; border-top: 1px solid hsl(var(--border)); }
.rv-name { font-weight: 600; }
.rv-src, .rv-all { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-weight: 600; }
.rv-src { font-size: .8rem; color: hsl(var(--muted-foreground)); }
.rv-src:hover { color: hsl(var(--primary)); }
.rv-all { margin-top: 2rem; background: #fff; color: hsl(var(--primary)); padding: .7rem 1.4rem; border-radius: .5rem; font-size: .95rem; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
.rv-all:hover { background: #fdf7f2; }

/* Contact page: hero checklist, form card, town list. */
.cf-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: rgba(255,255,255,.85); font-size: .95rem; }
.cf-facts li { display: flex; align-items: center; gap: .5rem; justify-content: center; }
@media (min-width: 768px) { .cf-facts li { justify-content: flex-start; } }
.cf-facts svg { color: #4ade80; flex-shrink: 0; }
.cf-card { position: relative; z-index: 10; width: 100%; max-width: 27.5rem; margin-inline: auto; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.45); scroll-margin-top: 6rem; }
@media (min-width: 640px) { .cf-card { padding: 1.75rem; } }
.cf-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem; }
.cf-sub { font-size: .85rem; color: hsl(var(--muted-foreground)); margin: 0 0 1rem; }
.cf-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; }
.cf-field label { font-size: .8rem; font-weight: 600; }
.cf-field input, .cf-field textarea { font: inherit; font-size: 16px; color: hsl(var(--foreground)); background: hsl(var(--background)); border: 1.5px solid hsl(var(--border)); border-radius: .6rem; padding: .5rem .8rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.cf-field input:focus, .cf-field textarea:focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .15); }
.cf-field textarea { resize: vertical; min-height: 0; height: 72px; }
.cf-submit { width: 100%; padding: .65rem; border: none; border-radius: .6rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; transition: filter .2s; }
.cf-submit:hover { filter: brightness(.92); }
.cf-submit:disabled { opacity: .6; cursor: not-allowed; }
.cf-note { text-align: center; font-size: .8rem; color: hsl(var(--muted-foreground)); margin: .75rem 0 0; }
.cf-note a { color: hsl(var(--primary)); font-weight: 600; }
.cf-success { text-align: center; padding: 1.5rem 0; }
.cf-success svg { margin: 0 auto .75rem; display: block; }
.cf-success h3 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .5rem; }
.cf-success p { color: hsl(var(--muted-foreground)); font-size: .95rem; margin: 0 0 1rem; }
.cf-call { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border: 1.5px solid hsl(var(--border)); border-radius: .6rem; color: hsl(var(--primary)); font-weight: 600; }
.cf-towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; }
@media (min-width: 640px) { .cf-towns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cf-towns li { display: flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 500; }
/* Staggered (masonry-style) layout when a page shows more reviews. */
.rv-grid.rv-masonry { display: block; columns: 1; column-gap: 1.25rem; }
@media (min-width: 768px) { .rv-grid.rv-masonry { columns: 2; } }
@media (min-width: 1024px) { .rv-grid.rv-masonry { columns: 3; } }
.rv-masonry .rv-card { width: 100%; break-inside: avoid; margin-bottom: 1.25rem; }
.rv-masonry .rv-card:first-child { grid-row: auto; }
/* One row of equal-height review cards (footer pinned to the bottom). */
@media (min-width: 768px) { .rv-grid.rv-row { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.rv-row .rv-card:first-child { grid-row: auto; }
.rv-row .rv-foot { margin-top: auto; }

/* Service pages: numbered process steps (on the orange section). */
.oc-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.oc-step { display: flex; gap: .85rem; align-items: flex-start; }
.oc-step-n { flex: 0 0 1.75rem; height: 1.75rem; border-radius: 9999px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; margin-top: .1rem; }

/* "From a real job" photo card. */
.oc-job { margin: 0; display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; }
.oc-job img { width: 160px; height: 160px; object-fit: cover; border-radius: .6rem; flex-shrink: 0; }
.oc-job figcaption { display: flex; flex-direction: column; gap: .4rem; font-size: .9rem; }
.oc-job-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--primary)); }
.oc-job-text { color: hsl(var(--muted-foreground)); line-height: 1.55; }
@media (max-width: 520px) { .oc-job { flex-direction: column; align-items: flex-start; } .oc-job img { width: 100%; height: auto; max-width: 240px; } }

/* Product cards ("what we clean with"). */
.pc-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 210px)); justify-content: center; }
.pc-card { display: flex; flex-direction: column; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.pc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(60,35,12,.5); }
.pc-pic { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: .75rem; background: radial-gradient(circle at 50% 34%, #fff 0%, #fbf7f1 60%, #f4ece1 100%); border-bottom: 1px solid hsl(var(--border)); }
.pc-pic img { max-height: 100%; max-width: 58%; width: auto; object-fit: contain; }
.pc-cat { display: block; padding: .7rem .85rem 0; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: hsl(142 45% 30%); }
.pc-name { display: block; padding: .2rem .85rem .9rem; font-size: .88rem; font-weight: 600; color: hsl(var(--foreground)); line-height: 1.3; }

/* Google rating line (hero). */
.rt-line { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .6rem; margin-top: 1.5rem; color: rgba(255,255,255,.85); font-size: .9rem; text-decoration: none; }
.rt-line strong { color: #fff; }
.rt-stars { display: inline-flex; gap: 1px; }
.rt-read { text-decoration: underline; text-underline-offset: 2px; }
.rt-line:hover .rt-read { color: #fff; }
.rt-wrap { margin: -1rem 0 1.5rem; }
.rt-wrap .rt-line { margin-top: 0; }

/* Decorative badges and wide cards must never cause sideways scrolling.
   overflow-x: clip (not hidden) keeps the sticky header working. */
#root > div { overflow-x: clip; }
/* Long URLs in body text wrap instead of widening the page. */
main p a, main li a { overflow-wrap: anywhere; }

/* Videos page grid (replaces the old slider so every video is visible). */
.vid-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vid-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vid-grid { grid-template-columns: repeat(3, 1fr); } }
.vid-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: hsl(var(--muted)); }
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play { position: absolute; inset: 0; margin: auto; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: hsl(var(--primary)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .2s; }
.vid-thumb:hover .vid-play { transform: scale(1.08); }

/* Product cards: one row on desktop, whatever the column width. */
@media (min-width: 1024px) {
  .pc-row.pc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pc-row.pc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pc-row { max-width: 46rem; margin-inline: auto; }

/* Grid columns may shrink below their content width (otherwise wide children push a column past the screen on phones). */
.grid > * { min-width: 0; }

/* Videos slider: 1 / 2 / 3 per view, swipe on touch, arrows in site.js. */
.vs-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vs-track::-webkit-scrollbar { display: none; }
.vs-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) { .vs-slide { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 1024px) { .vs-slide { flex-basis: calc((100% - 2rem) / 3); } }
.vs-slide > .shadcn-card { height: 100%; }