/* ============================================================
   Draft 3 (2026-10-17 evening): texture and depth on draft 2.
   His ask: "a little bit more texture... more designy stuff. A little bit more visually impressive, but just
   professional... we're actually an established business... Clients need us." Loaded after styles-light.css;
   the copy and the sections are draft 2's. Every motif comes from the trade: tile grout lines, a paper grain,
   the seal (the C with the logo's check).
   ============================================================ */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  --grout-light: rgba(27, 26, 23, 0.07);
  --grout-dark: rgba(246, 244, 239, 0.05);
  --tile: 64px;
  --ink-deep: #14120E;
}

/* ---------- paper grain over the whole page ---------- */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: var(--grain); opacity: 0.07; mix-blend-mode: multiply;
}

/* ---------- grout grid helper (masked so it fades out) ---------- */
.hero, #solution, #contact, #about, #reviews { position: relative; isolation: isolate; }
.hero::after, #solution::after, #contact::after, #about::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grout-light) 1px, transparent 1px), linear-gradient(90deg, var(--grout-light) 1px, transparent 1px);
  background-size: var(--tile) var(--tile); background-position: -1px -1px;
}
.hero::after { -webkit-mask-image: radial-gradient(ellipse 55% 70% at 78% 45%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 55% 70% at 78% 45%, #000 0%, transparent 70%); }
#about::after { -webkit-mask-image: radial-gradient(ellipse 40% 80% at 12% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 40% 80% at 12% 50%, #000 0%, transparent 75%); }
#solution::after, #contact::after {
  background-image: linear-gradient(var(--grout-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grout-dark) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%);
}

/* ---------- hero: a copper frame offset behind the photo ---------- */
.hero__visual { position: relative; }
.hero__card { position: relative; z-index: 1; }
.hero__float { z-index: 3 !important; }
.hero__visual::before {
  content: ""; position: absolute; inset: 22px -18px -18px 22px; border: 1.5px solid rgba(178,106,56,0.5); border-radius: var(--radius-xl); z-index: 0;
  background-image: linear-gradient(var(--grout-light) 1px, transparent 1px), linear-gradient(90deg, var(--grout-light) 1px, transparent 1px); background-size: 28px 28px;
}

/* ---------- stats: a spec strip with dividers ---------- */
.stats__grid {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: 0 18px 40px rgba(27,26,23,0.06);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem); position: relative; overflow: hidden;
}
.stats__grid::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--copper-deep), var(--copper-2), var(--copper-deep)); }
@media (min-width: 760px) {
  .stats__grid .stat + .stat { border-left: 1px solid var(--line); }
}

/* ---------- cards: a quiet copper edge on top ---------- */
.problem-card, .why-card, .step, .review { position: relative; overflow: hidden; }
.problem-card::before, .why-card::before, .step::before, .review::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper-line), transparent); opacity: .9;
}

/* ---------- dark "better way" section: a glow and the seal as a watermark ---------- */
#solution { background: radial-gradient(ellipse 60% 55% at 85% 20%, rgba(178,106,56,0.20), transparent 70%), var(--ink-deep); overflow: hidden; }
#solution .container { position: relative; z-index: 1; }
.seal-watermark { position: absolute; z-index: 0; pointer-events: none; color: #F6F4EF; opacity: 0.06; }
#solution .seal-watermark { right: -90px; bottom: -110px; width: 460px; height: 460px; }

/* ---------- copper bands: the tile photo under a copper tint ---------- */
.midcta {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(115deg, rgba(126,70,34,0.94) 0%, rgba(178,106,56,0.86) 55%, rgba(98,52,22,0.94) 100%), url("../images/tile.jpg") center / cover !important;
  box-shadow: 0 24px 60px rgba(98,52,22,0.28);
}
.midcta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.midcta::after {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,0.22); border-radius: calc(var(--radius-xl) - 8px); pointer-events: none;
}

/* ---------- reviews: a large quote mark behind the grid ---------- */
#reviews::before {
  content: "\201C"; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); z-index: -1;
  font-family: Georgia, "Times New Roman", serif; font-size: 360px; line-height: 1; color: var(--copper); opacity: 0.07; pointer-events: none;
}

/* ---------- who we are: the seal ---------- */
.about__monogram { width: 168px !important; height: 168px !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 50% !important; box-shadow: 0 22px 50px rgba(27,26,23,0.22); }
.about__monogram svg { width: 100% !important; height: 100% !important; display: block; }
.about__sig { display: inline-flex; align-items: center; gap: .75rem; }
.about__sig::before { content: ""; width: 36px; height: 1px; background: var(--copper); }

/* ---------- the booking section: two columns, texture, a raised form ---------- */
#contact { background: radial-gradient(ellipse 55% 60% at 12% 85%, rgba(178,106,56,0.22), transparent 70%), radial-gradient(ellipse 45% 40% at 95% 10%, rgba(178,106,56,0.10), transparent 70%), var(--ink-deep) !important; overflow: hidden; }
#contact .container { max-width: 1160px; }
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 0.95fr 1.05fr; } }
.contact-grid .section__head { text-align: left; margin: 0; }
.contact-grid .section__head .section__lead { margin-inline: 0; }
.contact-grid .form-card { margin-top: 0; }
.contact-aside { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.contact-proof {
  margin: 0; position: relative; padding: 1.5rem 1.5rem 1.25rem; border-radius: var(--radius-lg);
  background: rgba(246,244,239,0.04); border: 1px solid rgba(246,244,239,0.10); border-left: 3px solid var(--copper);
}
.contact-proof__stars { color: #E2A04A; letter-spacing: 3px; font-size: .95rem; }
.contact-proof__quote { margin: .6rem 0 .8rem; color: #F6F4EF; font-size: 1.05rem; line-height: 1.55; }
.contact-proof__who { color: rgba(246,244,239,0.6); font-size: .875rem; }
.contact-seal { display: flex; align-items: center; gap: 1rem; color: rgba(246,244,239,0.7); font-size: .9rem; }
.contact-seal svg { width: 72px; height: 72px; flex: none; }
#contact .contact-call { text-align: left; margin-top: 0; }
#contact .form-card {
  position: relative; background: linear-gradient(180deg, #24201A, #1C1915) !important;
  border: 1px solid rgba(246,244,239,0.12) !important; box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(246,244,239,0.06) !important;
}
#contact .form-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--copper-deep), var(--copper-2), var(--copper-deep)); }
#contact .seal-watermark { left: -200px; bottom: -230px; width: 520px; height: 520px; opacity: 0.045; }

/* ---------- footer: the seal beside the wordmark ---------- */
.footer__brand { position: relative; }
.footer__seal { width: 64px; height: 64px; margin-bottom: 1rem; display: block; }

@media (prefers-reduced-motion: reduce) { .hero__visual::before { transition: none; } }

/* draft 4 */
.stat__num--word { font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important; letter-spacing: -0.03em; color: var(--copper); justify-content: center; }
.stats__grid .stat { padding-inline: .75rem; }
.dash-shot { margin: 0; position: relative; }
.dash-shot img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 70px rgba(27,26,23,0.25), 0 0 0 1px rgba(27,26,23,0.06); }
.dash-shot figcaption { margin-top: .75rem; font-family: var(--font-mono, "Space Mono", monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-faint); }
.included { grid-template-columns: 1fr !important; }
.included__body { order: 1; }
.included__media { order: 2; max-width: 1080px; width: 100%; margin-inline: auto; }
@media (min-width: 760px) { .included-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.dash-shot figcaption { text-align: center; }

.included__media img, .dash-shot img { height: auto !important; max-height: none !important; object-fit: contain !important; }