@font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/inter-latin-var.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
@font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/inter-latin-var.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
@font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 800;
      font-display: swap;
      src: url('../fonts/inter-latin-var.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
@font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 900;
      font-display: swap;
      src: url('../fonts/inter-latin-var.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
@font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url('../fonts/oswald-latin-var.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
@font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('../fonts/oswald-latin-var.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
@font-face {
      font-family: 'Oswald';
      font-style: normal;
      font-weight: 700;
      font-display: swap;
      src: url('../fonts/oswald-latin-var.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

/* Shared styles for Red Clay service pages.
   The homepage (index.html) keeps its own inline <style> and is untouched by
   this file — these are only the rules the service pages actually use. */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: #f4f0e8;
  color: #1f1f1c;
}

.font-heading { font-family: 'Oswald', sans-serif; }

.text-readable { color: #2d2c28; }

/* Copied verbatim from index.html's inline <style> so the service page
   banners match the homepage "Ready to Reclaim Your Space?" section exactly.
   Content inside must sit in a positioned child, since ::before overlays it. */
.clay-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(196, 90, 40, 0.65), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(154, 52, 18, 0.60), transparent 34%),
    linear-gradient(135deg, #140b08 0%, #3a1408 42%, #9a3412 100%);
  position: relative;
}

.clay-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.035), rgba(255,255,255,0.035)),
    repeating-linear-gradient(
      -18deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.04) 2px,
      transparent 2px,
      transparent 18px
    );
  opacity: 0.42;
  pointer-events: none;
}

.clay-band {
  /* Solid colour first so the band never renders transparent if another rule
     overrides background-image (the gradients below are image layers). */
  background-color: #5e1e08;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(255,255,255,0.10), transparent 28%),
    linear-gradient(135deg, #7c2a0e, #c45828 58%, #5e1e08);
}

.clay-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f0e8 100%);
  color: #1f1f1c;
  border: 1px solid rgba(154,52,18,0.25);
  box-shadow: 0 24px 70px rgba(31,31,28,0.16);
}

.clay-ridge {
  background:
    linear-gradient(180deg, rgba(244,240,232,0.96), rgba(226,213,195,0.96)),
    repeating-linear-gradient(
      0deg,
      rgba(154,52,18,0.11),
      rgba(154,52,18,0.11) 2px,
      transparent 2px,
      transparent 18px
    );
}

.grid-texture {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

.section-divider {
  height: 4px;
  width: 180px;
  border-radius: 999px;
  background: linear-gradient(to right, #5e1e08, #c45828, #e8960a);
}

/* Variant for the dark clay banner. The standard divider starts at #5e1e08,
   which is almost the banner's own colour, so its left third disappears.
   These stops all sit well above the background in luminance. */
.section-divider-light {
  background: linear-gradient(to right, #e8960a, #f8c878, #f5c4a0);
}

.mobile-menu { display: none; }
.mobile-menu.open {
  display: block;
  max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Visually hidden, still read by screen readers. Tailwind's sr-only is purged
   from the compiled CSS and there is no local build to regenerate it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Body copy for the service pages. Kept here rather than as utility classes
   because several needed Tailwind utilities are purged from tailwind.css. */
.svc-prose p { margin-top: 1rem; line-height: 1.7; color: #2d2c28; }
.svc-prose h2 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 1.9rem;
  line-height: 1.1;
  margin-top: 2.75rem;
  color: #1f1f1c;
}
.svc-prose h3 {
  font-weight: 800;
  font-size: 1.125rem;
  margin-top: 1.75rem;
  color: #1f1f1c;
}
.svc-prose ul { margin-top: 1rem; }
.svc-prose li {
  position: relative;
  padding-left: 1.6rem;
  margin-top: 0.6rem;
  line-height: 1.6;
  color: #2d2c28;
}
.svc-prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: #9a3412;
}
@media (min-width: 640px) {
  .svc-prose h2 { font-size: 2.25rem; }
}

/* ---------------------------------------------------------------------------
   Utilities used by the service pages that are ABSENT from css/tailwind.css.
   That file is a purged production build and there is no local Tailwind
   toolchain (no package.json / node_modules) to regenerate it, so any class
   the homepage never used simply does not exist. These are hand-written to
   match Tailwind's own output exactly.
   --------------------------------------------------------------------------- */
.h-56          { height: 14rem; }
.py-14         { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.max-w-2xl     { max-width: 42rem; }
.text-\[2rem\]  { font-size: 2rem; }
.border-earth-50 { --tw-border-opacity: 1; border-color: rgb(244 240 232 / var(--tw-border-opacity, 1)); }
.hover\:bg-clay-100:hover { --tw-bg-opacity: 1; background-color: rgb(252 232 213 / var(--tw-bg-opacity, 1)); }

@media (min-width: 640px) {
  .sm\:py-20    { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

@media (min-width: 1024px) {
  .lg\:block       { display: block; }
  .lg\:inline      { display: inline; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:col-span-1  { grid-column: span 1 / span 1; }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
}