/* ============================================================
   KING ROOFING — kingroofingservices.co.uk
   Brand: charcoal #262220 / orange #E68A2E (van + uniform match)
   ============================================================ */

:root {
  --ink: #221f1d;
  --ink-2: #2b2724;
  --ink-3: #353029;
  --line: rgba(242, 235, 224, 0.12);
  --orange: #e68a2e;
  --orange-bright: #f09a3e;
  --orange-deep: #c9731d;
  --cream: #f2ebe0;
  --muted: #a89f93;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Outfit", -apple-system, sans-serif;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* film-grain overlay */
body::after {
  content: "";
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 10% { transform: translate(-5%,-10%); }
  20% { transform: translate(-15%,5%); } 30% { transform: translate(7%,-25%); }
  40% { transform: translate(-5%,25%); } 50% { transform: translate(-15%,10%); }
  60% { transform: translate(15%,0%); } 70% { transform: translate(0%,15%); }
  80% { transform: translate(3%,35%); } 90% { transform: translate(-10%,10%); }
}

::selection { background: var(--orange); color: var(--ink); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.o { color: var(--orange); }
.italic { font-style: italic; font-weight: 400; }

.wrap { padding-left: var(--pad); padding-right: var(--pad); max-width: 1680px; margin: 0 auto; }

/* ---------- eyebrow / labels ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orange); font-weight: 600;
}
.eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--orange); }

/* ============ PRELOADER ============ */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
}
.preloader .crown-mark { width: clamp(48px, 7vw, 84px); }
.preloader-word {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: var(--orange);
  display: flex; overflow: hidden;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
.preloader-word span { display: inline-block; transform: translateY(110%); }
.preloader-bar {
  width: clamp(140px, 20vw, 260px); height: 1px; background: var(--line); position: relative; overflow: hidden;
}
.preloader-bar i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }
body.loading { overflow: hidden; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
  transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(34, 31, 29, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; z-index: 1002; }
.brand svg { height: clamp(42px, 4.5vw, 56px); width: auto; }
.nav-links { display: flex; gap: 2.2rem; align-items: center; }
.nav-links a {
  font-size: 0.92rem; letter-spacing: 0.04em; color: var(--cream);
  position: relative; padding: 0.25rem 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform 0.35s cubic-bezier(0.65,0,0.35,1);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  border: 1px solid var(--orange); color: var(--orange) !important; border-radius: 100px;
  padding: 0.55rem 1.4rem !important; transition: background 0.3s, color 0.3s;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--orange); color: var(--ink) !important; }

.burger {
  display: none; z-index: 1002; background: none; border: 0; width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.burger i { display: block; width: 26px; height: 2px; background: var(--cream); transition: transform 0.35s, opacity 0.35s; }
.burger.open i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger.open i:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 1001; background: var(--ink-2);
  display: flex; flex-direction: column; justify-content: center; padding: var(--pad);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path 0.7s cubic-bezier(0.77,0,0.18,1);
  visibility: hidden;
}
.mobile-menu.open { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.2rem);
  padding: 0.35rem 0; color: var(--cream); display: flex; align-items: baseline; gap: 1rem;
}
.mobile-menu a small { font-family: var(--font-body); font-size: 0.8rem; color: var(--orange); letter-spacing: 0.2em; }
.mobile-menu .menu-contact { margin-top: 2.5rem; color: var(--muted); font-size: 0.95rem; line-height: 2; }

/* ============ HERO ============ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34,31,29,0.55) 0%, rgba(34,31,29,0.25) 40%, rgba(34,31,29,0.92) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 8.5rem var(--pad) clamp(5rem, 10vh, 8rem); }
.hero-title {
  /* capped by viewport height so 3 lines can never climb into the fixed nav */
  font-size: min(clamp(3.4rem, 12.5vw, 11.5rem), 19.5svh);
  text-transform: uppercase;
  line-height: 0.9;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero-title .line > span { display: inline-block; will-change: transform; padding-right: 0.08em; }
.hero-sub {
  max-width: 34rem; margin-top: 2rem; color: rgba(242,235,224,0.85); font-size: clamp(1rem, 1.4vw, 1.2rem);
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.6rem; align-items: center;
}
.hero-badge { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--muted); }
.hero-badge b { color: var(--cream); font-weight: 600; }
.stars { color: var(--orange); letter-spacing: 2px; font-size: 0.95rem; }
.scroll-hint {
  position: absolute; bottom: 2rem; right: var(--pad); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--muted); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 56px; background: var(--line); position: relative; overflow: hidden;
  background: linear-gradient(var(--orange) 0 0) no-repeat 0 -60px / 100% 60px, var(--line);
  animation: scrollline 2s ease-in-out infinite;
}
@keyframes scrollline { to { background-position: 0 120px, 0 0; } }

/* ============ MARQUEE ============ */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; padding: 1.1rem 0; background: var(--ink-2);
  display: flex; white-space: nowrap;
}
.marquee-track { display: flex; gap: 3rem; padding-right: 3rem; animation: marquee 28s linear infinite; flex-shrink: 0; }
.marquee-track span {
  font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.35rem);
  display: flex; align-items: center; gap: 3rem; color: var(--cream);
}
.marquee-track span::after { content: "✦"; color: var(--orange); font-size: 0.8em; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ============ SECTION SHELL ============ */
.section { padding-top: clamp(5rem, 12vh, 9rem); padding-bottom: clamp(5rem, 12vh, 9rem); position: relative; }
.section-head { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.section-title { font-size: clamp(2.4rem, 6vw, 5.2rem); margin-top: 1.2rem; max-width: 20ch; }
/* word masks — padding gives descenders (y, g, p) and italic overhangs room to render,
   negative margin cancels it out so layout is unchanged */
[data-split-words] .word {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: 0.05em 0.08em 0.16em 0.04em;
  margin: -0.05em -0.08em -0.16em -0.04em;
}
[data-split-words] .word > span { display: inline-block; will-change: transform; }

/* ============ INTRO (editorial) ============ */
.intro-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.intro-big {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.25;
  color: var(--cream);
}
.intro-big em { color: var(--orange); font-style: italic; }
.intro-side p { color: var(--muted); margin-bottom: 1.2rem; }
.intro-side .sig { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--cream); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(3rem, 8vh, 5rem); }
.stat { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.6rem); }
.stat b { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 4rem); color: var(--orange); display: block; line-height: 1; font-weight: 500; }
.stat span { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-top: 0.7rem; }

/* ============ SERVICES — pinned horizontal ============ */
.services-pin { position: relative; }
/* while pinned, the section must fill the viewport so no dead space shows below the cards */
@media (min-width: 761px) {
  .services-pin > .section {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(2rem, 6vh, 4rem); padding-bottom: clamp(2rem, 6vh, 4rem);
    box-sizing: border-box;
  }
  .services-pin .section-head { margin-bottom: clamp(1.5rem, 4vh, 3rem); }
}
.services-viewport { overflow: hidden; }
.services-track { display: flex; gap: clamp(1.2rem, 2.5vw, 2.5rem); padding: 0 var(--pad); will-change: transform; width: max-content; }
.svc-card {
  position: relative; width: clamp(300px, 34vw, 460px); flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--ink-2); display: flex; flex-direction: column;
  transition: border-color 0.4s;
}
.svc-card:hover { border-color: var(--orange); }
.svc-card-img { height: clamp(230px, 26vw, 330px); overflow: hidden; position: relative; }
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.svc-card:hover .svc-card-img img { transform: scale(1.08); }
.svc-card-num {
  position: absolute; top: 1rem; left: 1.15rem; z-index: 2;
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--cream);
  background: rgba(34,31,29,0.65); backdrop-filter: blur(6px); border-radius: 100px; padding: 0.2rem 0.9rem;
}
.svc-card-body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.svc-card-body h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.svc-card-body p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.svc-link { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--orange); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.05em; }
.svc-link svg { transition: transform 0.3s; }
.svc-card:hover .svc-link svg { transform: translateX(6px); }

/* ============ BLOOM (growing image) ============ */
.bloom {
  position: relative; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bloom-frame {
  width: min(42vw, 540px); height: min(50svh, 420px);
  border-radius: var(--radius); overflow: hidden;
  will-change: width, height, border-radius;
  position: relative;
}
.bloom-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); will-change: transform; }
.bloom-caption {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: var(--pad);
  background: rgba(34,31,29,0.35); opacity: 0;
}
.bloom-caption h2 { font-size: clamp(2rem, 5.5vw, 4.6rem); text-shadow: 0 2px 30px rgba(0,0,0,0.45); }
.bloom-caption .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }

/* ============ PROCESS (pinned steps) ============ */
.process-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); }
.process-sticky { position: sticky; top: 18vh; align-self: start; }
.process-steps { display: flex; flex-direction: column; gap: clamp(2rem, 5vh, 3.5rem); position: relative; padding-left: 2.6rem; }
.process-steps::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.process-steps .progress { position: absolute; left: 8px; top: 8px; width: 1px; height: 0; background: var(--orange); }
.step { position: relative; }
.step::before {
  content: ""; position: absolute; left: -2.6rem; top: 8px; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--ink); transition: background 0.4s, border-color 0.4s;
}
.step.active::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 6px rgba(230,138,46,0.15); }
.step h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin-bottom: 0.5rem; display: flex; gap: 0.9rem; align-items: baseline; }
.step h3 i { font-style: italic; color: var(--orange); font-size: 0.8em; }
.step p { color: var(--muted); max-width: 46ch; }

/* ============ REVIEWS ============ */
.reviews-rows { display: flex; flex-direction: column; gap: 1.4rem; overflow: hidden; }
.reviews-row { display: flex; gap: 1.4rem; width: max-content; will-change: transform; align-items: flex-start; padding: 0 var(--pad); }
.review-card {
  width: clamp(300px, 30vw, 430px); flex-shrink: 0;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem;
}
.review-card .stars { margin-bottom: 0.9rem; display: block; }
.review-card p { font-size: 0.95rem; color: rgba(242,235,224,0.88); }
.review-card footer { margin-top: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.review-card cite { font-style: normal; font-weight: 600; font-size: 0.9rem; }
.review-card small { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.verified {
  font-size: 0.7rem; letter-spacing: 0.1em; color: #8fce8f; border: 1px solid rgba(143,206,143,0.35);
  padding: 0.15rem 0.6rem; border-radius: 100px; text-transform: uppercase;
}

/* ============ AREAS ============ */
.areas-list { border-top: 1px solid var(--line); }
.area-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
  padding: clamp(1.2rem, 2.5vw, 1.8rem) 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.8rem);
  color: var(--muted); transition: color 0.35s, padding-left 0.45s cubic-bezier(0.22,1,0.36,1);
  position: relative;
}
.area-row:hover { color: var(--cream); padding-left: 1.5rem; }
.area-row i { font-style: italic; font-size: 0.55em; color: var(--orange); }
.area-row .tag { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ============ CTA FOOTER ============ */
.cta-final { padding-top: clamp(6rem, 16vh, 11rem); padding-bottom: clamp(3rem, 8vh, 5rem); text-align: center; position: relative; overflow: hidden; }
.cta-final .giant {
  font-size: clamp(3rem, 11vw, 10rem); text-transform: uppercase; line-height: 0.95;
}
.cta-final .giant .outline {
  color: transparent; -webkit-text-stroke: 1.5px var(--orange);
}
/* keep the stroke on word-split children (text-stroke doesn't inherit by default) */
.cta-final .giant .outline * { -webkit-text-stroke: inherit; color: inherit; }
.cta-btns { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1.05rem 2.3rem; border-radius: 100px; font-weight: 600; font-size: 1rem;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s;
  border: 1px solid transparent;
}
.btn-solid { background: var(--orange); color: var(--ink); }
.btn-solid:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(230,138,46,0.35); background: var(--orange-bright); }
.btn-ghost { border-color: var(--line); color: var(--cream); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-3px); }

.footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; background: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer h4 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--orange); margin-bottom: 1.1rem; font-weight: 600; }
.footer a, .footer p { color: var(--muted); font-size: 0.93rem; line-height: 2.1; transition: color 0.25s; }
.footer a:hover { color: var(--cream); }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  color: var(--muted); font-size: 0.8rem;
}
.footer-brand svg { height: 40px; width: auto; margin-bottom: 1rem; }

/* ============ WHATSAPP FLOAT ============ */
.wa-float {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 950;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25d366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(37,211,102,0.4);
  transition: transform 0.3s;
}
.wa-float:hover { transform: scale(1.1) rotate(6deg); }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #25d366; animation: wa-pulse 2.4s ease-out infinite; z-index: -1;
}
@keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-tip {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%) translateX(8px);
  background: var(--cream); color: var(--ink); font-size: 0.8rem; font-weight: 600;
  padding: 0.45rem 0.9rem; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s;
}
.wa-float:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ============ SERVICE PAGE ============ */
.page-hero { min-height: 72svh; display: flex; align-items: flex-end; position: relative; overflow: hidden; padding-bottom: clamp(3rem, 8vh, 5rem); }
.page-hero .hero-media img { transform: scale(1.12); }
.page-hero h1 { font-size: min(clamp(2.8rem, 8vw, 7rem), 16svh); text-transform: uppercase; line-height: 0.95; position: relative; z-index: 2; }
.page-hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.page-hero h1 .line > span { display: inline-block; will-change: transform; padding-right: 0.08em; }
.breadcrumb { position: relative; z-index: 2; margin-bottom: 1.4rem; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.breadcrumb a:hover { color: var(--orange); }

.svc-content { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.svc-content .lead { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.35; margin-bottom: 1.6rem; }
.svc-content p { color: var(--muted); margin-bottom: 1.2rem; }
.svc-content h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 2.4rem 0 1rem; }
.svc-aside { position: sticky; top: 14vh; display: flex; flex-direction: column; gap: 1.4rem; }
.aside-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
.aside-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.aside-card ul li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.93rem; display: flex; gap: 0.7rem; align-items: baseline; }
.aside-card ul li:last-child { border-bottom: 0; }
.aside-card ul li::before { content: "✦"; color: var(--orange); font-size: 0.7rem; }

.checklist li { padding: 0.5rem 0; color: var(--muted); display: flex; gap: 0.8rem; align-items: baseline; }
.checklist li::before { content: "→"; color: var(--orange); font-weight: 700; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.gallery figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3.4; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.gallery figure:hover img { transform: scale(1.07); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.2rem 1rem;
  background: linear-gradient(transparent, rgba(34,31,29,0.85)); font-size: 0.85rem; color: var(--cream);
}

/* services overview grid (services.html) */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.services-grid .svc-card { width: auto; }
@media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }

/* values grid (about.html) */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value-cell { background: var(--ink); padding: clamp(1.8rem, 3vw, 2.8rem); }
.value-cell i { font-family: var(--font-display); font-style: italic; color: var(--orange); font-size: 1.1rem; display: block; margin-bottom: 1rem; }
.value-cell h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 0.7rem; }
.value-cell p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .values-grid { grid-template-columns: 1fr; } }

/* domestic & commercial split */
.dc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); }
.dc-card { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.8rem); background: var(--ink-2); position: relative; overflow: hidden; }
.dc-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 1rem; }
.dc-card p { color: var(--muted); margin-bottom: 1rem; }
.dc-card .eyebrow { margin-bottom: 1.2rem; }
@media (max-width: 800px) { .dc-split { grid-template-columns: 1fr; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq-intro { position: sticky; top: 16vh; }
.faq-intro .section-title { margin-bottom: 1.4rem; }
.faq-intro p.small { color: var(--muted); max-width: 34ch; margin-bottom: 1.8rem; }
.faq-list { border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--orange); font-size: 1.6rem; transition: transform 0.3s; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 0 1.6rem; color: var(--muted); max-width: 62ch; }

/* ============ CONTACT ============ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.contact-info-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.2rem; }
.contact-info-list a.big, .contact-info-list .big {
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); color: var(--cream); transition: color 0.3s;
}
.contact-info-list a.big:hover { color: var(--orange); }
.contact-info-list small { display: block; color: var(--orange); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 0.4rem; font-weight: 600; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 0.8rem; }
.hours-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.hours-table td:last-child { text-align: right; color: var(--cream); }

.form-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.8rem, 3.5vw, 3rem); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.95rem 1.1rem; color: var(--cream); font: inherit; font-size: 0.98rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(230,138,46,0.18);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 1rem; }
.form-status { margin-top: 1rem; font-weight: 600; display: none; }
.form-status.ok { display: block; color: #8fce8f; }
.form-status.err { display: block; color: #e07a6a; }

/* ============ MAP (contact) ============ */
.map-wrap { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
#kr-map { height: clamp(320px, 48vh, 460px); width: 100%; background: var(--ink-2); z-index: 1; }
#kr-map .leaflet-control-attribution { background: rgba(34,31,29,0.8); color: var(--muted); font-size: 10px; }
#kr-map .leaflet-control-attribution a { color: var(--orange); }
.kr-pin { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.map-note {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 500;
  background: rgba(34,31,29,0.88); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1.1rem;
  font-size: 0.85rem; color: var(--cream); max-width: 260px;
}
.map-note b { color: var(--orange); display: block; margin-bottom: 0.15rem; }
.leaflet-popup-content-wrapper { background: var(--ink-2) !important; color: var(--cream) !important; border-radius: 12px !important; }
.leaflet-popup-tip { background: var(--ink-2) !important; }

/* ============ REVEAL DEFAULTS (no-js safe) ============ */
.reveal { opacity: 0; transform: translateY(40px); }
.no-js .reveal, .reduced .reveal { opacity: 1; transform: none; }

/* 404 */
.err-page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.4rem; padding: var(--pad); }
.err-page h1 { font-size: clamp(5rem, 20vw, 14rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--orange); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
  .intro-grid, .process-grid, .svc-content, .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .svc-aside { position: static; }
  .process-sticky { position: static; margin-bottom: 2.5rem; }
  .gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .services-track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
  .services-track::-webkit-scrollbar { height: 4px; }
  .services-track::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }
  .svc-card { scroll-snap-align: start; width: 84vw; }
  .hero-title { font-size: clamp(3.2rem, 16vw, 6rem); }
  .wa-float { width: 54px; height: 54px; right: 1rem; bottom: 1rem; }
}

@media (max-width: 760px) {
  .scroll-hint { display: none; }
  .bloom-frame { width: 78vw; height: 38svh; }
  .hero-inner { padding-bottom: 5.5rem; }
  .hero-meta { gap: 1.4rem; }
  .review-card { width: 86vw; max-width: 400px; }
  .area-row { grid-template-columns: auto 1fr; }
  .area-row .tag { display: none; }
  .checklist[style*="columns"] { columns: 1 !important; }
  .process-steps { padding-left: 2.2rem; }
  .svc-content .lead { font-size: 1.25rem; }
  .page-hero { min-height: 62svh; }
}

@media (max-width: 430px) {
  :root { --pad: 1.1rem; }
  .hero-title { font-size: clamp(2.9rem, 17vw, 4.4rem); }
  .cta-btns .btn { width: 100%; justify-content: center; }
  .hero-meta .btn { width: 100%; justify-content: center; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.2rem; }
  .stat b { font-size: 1.9rem; }
  .brand svg { height: 38px; }
  .form-card { padding: 1.4rem; }
  .marquee-track span { font-size: 0.95rem; }
  .cta-final .giant { font-size: clamp(2.5rem, 12.5vw, 3.4rem); }
  .footer-grid { gap: 1.6rem; }
  .mobile-menu a { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* short landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .hero, .page-hero { min-height: 130svh; }
  .mobile-menu { overflow-y: auto; justify-content: flex-start; padding-top: 5rem; }
}

/* very large screens — keep type from ballooning */
@media (min-width: 1800px) {
  .hero-title { font-size: 11rem; }
  .wrap { max-width: 1680px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}


/* ===================================================================
   King Roofing — new crown logo + entrance reveal  (appended block)
   =================================================================== */
:root{ --kr-orange:#E68A2E; --kr-introbg:#221f1d; }

/* Hide the old preloader visuals but let its script run harmlessly */
.preloader{ opacity:0 !important; pointer-events:none !important; }

/* --- Header logo lockup --- */
a.brand.kr-brand-new{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
a.brand.kr-brand-new .kr-crown{ width:34px; height:auto; flex:0 0 auto; overflow:visible; }
a.brand.kr-brand-new .kr-brand-word{
  font-family:Fraunces, Georgia, serif; font-weight:500; font-size:25px;
  color:var(--kr-orange); line-height:1; white-space:nowrap; letter-spacing:.3px;
}

/* --- Entrance overlay --- */
#kr-intro{
  position:fixed; inset:0; z-index:99999; background:var(--kr-introbg);
  display:flex; align-items:center; justify-content:center; opacity:1;
}
#kr-intro.kr-done{ opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s .7s; }
#kr-intro .kr-intro-lockup{ text-align:center; padding:0 24px; }
#kr-intro .kr-intro-crown{ width:clamp(96px,13vw,150px); height:auto; display:block; margin:0 auto; overflow:visible; }
#kr-intro .kr-intro-word{
  font-family:Fraunces, Georgia, serif; font-weight:500; color:var(--kr-orange);
  font-size:clamp(40px,7vw,86px); line-height:1; margin-top:22px;
  opacity:0; transform:translateY(16px); animation:krRise .7s ease forwards .95s;
}
#kr-intro .kr-intro-rule{
  width:0; height:2px; background:var(--kr-orange); margin:26px auto 0; opacity:.85;
  animation:krSweep .6s ease forwards 1.45s;
}
#kr-intro .kr-intro-crown path{ stroke-dasharray:560; stroke-dashoffset:560; animation:krDraw 1.1s ease forwards .2s; }
#kr-intro .kr-intro-crown rect{ stroke-dasharray:330; stroke-dashoffset:330; animation:krDraw .7s ease forwards .75s; }
@keyframes krDraw{ to{ stroke-dashoffset:0; } }
@keyframes krRise{ to{ opacity:1; transform:none; } }
@keyframes krSweep{ to{ width:min(460px,80%); } }
@media (prefers-reduced-motion: reduce){
  #kr-intro .kr-intro-crown path, #kr-intro .kr-intro-crown rect{ animation:none; stroke-dashoffset:0; }
  #kr-intro .kr-intro-word{ animation:none; opacity:1; transform:none; }
  #kr-intro .kr-intro-rule{ animation:none; width:min(460px,80%); }
}


/* ==================================================================
   King Roofing — site updates batch (quiz, CTA, bullets, map, links)
   ================================================================== */
:root{ --kr-orange:#E68A2E; }
#krq-ov{position:fixed;inset:0;z-index:100000;background:rgba(16,15,13,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;font-family:Outfit,-apple-system,sans-serif;}
#krq-ov.krq-open{display:flex;}
#krq-ov .krq-card{position:relative;width:100%;max-width:560px;background:#26241f;border:1px solid rgba(242,235,224,.10);border-radius:20px;padding:38px 34px 34px;box-shadow:0 30px 80px rgba(0,0,0,.55);color:#f2ebe0;animation:krqIn .35s ease;}
@keyframes krqIn{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
#krq-ov .krq-close{position:absolute;top:14px;right:18px;background:none;border:none;color:#a89f93;font-size:26px;line-height:1;cursor:pointer;padding:4px;}
#krq-ov .krq-close:hover{color:#f2ebe0;}
#krq-ov .krq-prog{height:4px;background:rgba(242,235,224,.12);border-radius:4px;overflow:hidden;margin-bottom:8px;}
#krq-ov .krq-prog i{display:block;height:100%;width:0;background:var(--kr-orange);border-radius:4px;transition:width .35s ease;}
#krq-ov .krq-step{font:600 12px/1 Outfit;letter-spacing:.14em;text-transform:uppercase;color:var(--kr-orange);margin:14px 0 12px;}
#krq-ov .krq-q{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:30px;line-height:1.12;margin:0 0 22px;color:#f2ebe0;}
#krq-ov .krq-opts{display:grid;gap:10px;}
#krq-ov .krq-opt{text-align:left;padding:15px 18px;border:1px solid rgba(242,235,224,.16);background:rgba(242,235,224,.03);border-radius:12px;color:#f2ebe0;font-size:16px;cursor:pointer;transition:all .15s;font-family:inherit;}
#krq-ov .krq-opt:hover{border-color:var(--kr-orange);background:rgba(230,138,46,.10);transform:translateY(-1px);}
#krq-ov .krq-fields{display:grid;gap:12px;}
#krq-ov .krq-fields input{width:100%;padding:14px 16px;border:1px solid rgba(242,235,224,.16);background:rgba(242,235,224,.04);border-radius:12px;color:#f2ebe0;font-size:16px;font-family:inherit;}
#krq-ov .krq-fields input::placeholder{color:#a89f93;}
#krq-ov .krq-fields input:focus{outline:none;border-color:var(--kr-orange);}
#krq-ov .krq-sub{margin-top:6px;padding:15px;border:none;border-radius:40px;background:var(--kr-orange);color:#20201c;font:700 16px Outfit;cursor:pointer;}
#krq-ov .krq-sub:hover{filter:brightness(1.06);}
#krq-ov .krq-back{background:none;border:none;color:#a89f93;font-size:14px;cursor:pointer;margin-top:16px;padding:4px;font-family:inherit;}
#krq-ov .krq-back:hover{color:#f2ebe0;}
#krq-ov .krq-summary{font-size:13px;color:#a89f93;margin:2px 0 16px;line-height:1.5;}
#krq-ov .krq-success{text-align:center;padding:14px 0 4px;}
#krq-ov .krq-tick{width:66px;height:66px;border-radius:50%;background:rgba(230,138,46,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
#krq-ov .krq-tick svg{width:34px;height:34px;}
#krq-ov .krq-success h3{font-family:Fraunces,serif;font-weight:500;font-size:26px;margin:0 0 10px;color:#f2ebe0;}
#krq-ov .krq-success p{color:#a89f93;font-size:15px;line-height:1.55;margin:0;}
.kr-std-cta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:15px 30px;border-radius:40px;background:var(--kr-orange);color:#20201c;font:700 16px Outfit,sans-serif;text-decoration:none;transition:filter .15s, transform .15s;}
.kr-std-cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
a.kr-yell-link{display:inline-block;text-decoration:none;color:inherit;cursor:pointer;}
a.kr-yell-link:hover{opacity:.85;}
ul.checklist{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;padding:0;margin-top:22px;}
ul.checklist li{background:rgba(242,235,224,.03);border:1px solid rgba(242,235,224,.09);border-radius:12px;padding:15px 18px;transition:border-color .15s, background .15s;}
ul.checklist li:hover{border-color:rgba(230,138,46,.5);background:rgba(230,138,46,.06);}
@media(max-width:640px){ ul.checklist{grid-template-columns:1fr;} }
.leaflet-container{height:560px !important;min-height:560px !important;}
@media(max-width:640px){ .leaflet-container{height:420px !important;min-height:420px !important;} }

/* KR mobile menu fix */
.mobile-menu{padding:56px 32px 40px !important;box-sizing:border-box;overflow-y:auto;}
.mobile-menu a{font-size:clamp(22px,7vw,30px) !important;padding:9px 0 !important;line-height:1.1 !important;}
.mobile-menu .menu-contact{font-size:15px !important;margin-top:18px !important;}
.kr-menu-close{position:absolute;top:16px;right:20px;width:44px;height:44px;border:none;background:none;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;padding:0;}
.kr-menu-close::before,.kr-menu-close::after{content:'';position:absolute;width:26px;height:2.5px;background:#f2ebe0;border-radius:2px;}
.kr-menu-close::before{transform:rotate(45deg);}
.kr-menu-close::after{transform:rotate(-45deg);}

/* KR burger CTA + logo */
.mobile-menu .kr-menu-cta{align-self:flex-start;display:inline-block;width:auto;margin:26px 0 4px;background:#E68A2E;color:#221f1d;border:none;font-family:'Outfit',system-ui,sans-serif;font-weight:600;font-size:17px;letter-spacing:.2px;padding:15px 34px;border-radius:40px;cursor:pointer;line-height:1;transition:transform .2s ease, background .2s ease;}
.mobile-menu .kr-menu-cta:hover{background:#f09a3e;transform:translateY(-1px);}
.mobile-menu .kr-menu-logo{align-self:flex-start;margin:30px 0 4px;opacity:.92;}

/* KR trust strip */
.kr-trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;background:var(--ink);}
.kr-trust-inner{max-width:1240px;margin:0 auto;padding:0 var(--pad);display:flex;flex-wrap:wrap;gap:22px 40px;justify-content:space-between;align-items:center;}
.kr-trust-item{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:160px;}
.kr-trust-item strong{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.1vw,27px);color:var(--orange);line-height:1.05;}
.kr-trust-item span{font-family:var(--font-body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
@media(max-width:640px){.kr-trust{padding:22px 0;}.kr-trust-inner{gap:18px 20px;}.kr-trust-item{flex:1 1 42%;min-width:42%;}}