/* =========================================================
   W&D Roofing & Contracting — Custom design system
   Premium Arizona desert / turquoise + gold identity
   ========================================================= */

:root {
  /* Brand palette inspired by the W&D logo */
  --turq-50:  #E6FAFC;
  --turq-200: #8FE7EF;
  --turq-300: #49DCE6;
  --turq-400: #1FB4C2;
  --turq-500: #15CDD9;
  --turq-600: #0EAAB7;
  --turq-700: #0B7C86;
  --gold-300: #FFD566;
  --gold-400: #F5C443;
  --gold-500: #E5A82B;
  --gold-600: #B8821C;
  --rust-500: #C24A1F;       /* desert sun accent */
  --burgundy:  #7A1F26;       /* W&D wordmark color */

  /* Surfaces */
  --ink-950: #07101A;        /* deepest near-black with cool tone */
  --ink-900: #0B1620;
  --ink-850: #0F1D29;
  --ink-800: #142634;
  --ink-700: #1C3344;
  --line:    #1F3A4D;
  --line-2:  #2A4A5F;

  --paper:    #FFFFFF;
  --paper-2:  #F6F8FA;
  --paper-3:  #ECF1F4;

  --text:        #E8F3F6;
  --text-muted:  #A8BEC9;
  --text-faint:  #6C8593;
  --text-dark:   #0B1620;
  --text-dark-2: #34495A;

  /* Type scale */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero: clamp(2.5rem, 5.6vw, 4.75rem);
  --fs-h1:   clamp(2rem, 3.8vw, 3.25rem);
  --fs-h2:   clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3:   1.375rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  /* Spacing & radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.55), 0 10px 30px -10px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 0 1px rgba(245,196,67,0.25), 0 12px 40px -10px rgba(245,196,67,0.35);
  --shadow-turq: 0 0 0 1px rgba(21,205,217,0.35), 0 12px 36px -10px rgba(21,205,217,0.5);

  --container: 1200px;
  --gutter: clamp(1rem, 3vw, 2rem);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ----- reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--turq-400); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-400); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 .5em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1em; color: var(--text-muted); }
ul { padding-left: 1.1rem; }
li { margin-bottom: .35em; color: var(--text-muted); }
hr { border: 0; height: 1px; background: var(--line); margin: 2.5rem 0; }
::selection { background: var(--gold-400); color: var(--ink-950); }

/* ----- utility ----- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; }
.section--paper { background: var(--paper); color: var(--text-dark); }
.section--paper h1,.section--paper h2,.section--paper h3 { color: var(--text-dark); }
.section--paper p { color: var(--text-dark-2); }
.section--paper li { color: var(--text-dark-2); }
.section--ink { background: var(--ink-900); }
.section--ink-deep { background: var(--ink-950); }
.section--alt { background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 100%); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--gold-400); display: inline-block;
}
.section--paper .eyebrow { color: var(--turq-700); }
.section--paper .eyebrow::before { background: var(--turq-600); }

.lede { font-size: 1.2rem; color: var(--text-muted); max-width: 60ch; }
.section--paper .lede { color: var(--text-dark-2); }

/* skip link */
.skip {
  position: absolute; top: -100px; left: 12px; background: var(--gold-400); color: var(--ink-950);
  padding: 8px 14px; border-radius: var(--r-sm); font-weight: 700; z-index: 200;
}
.skip:focus { top: 12px; }

/* ----- buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .95rem 1.45rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: linear-gradient(180deg, var(--turq-500), var(--turq-600));
  color: #04222A;
  box-shadow: var(--shadow-turq);
}
.btn--primary:hover { color: #04222A; background: linear-gradient(180deg, var(--turq-400), var(--turq-700)); transform: translateY(-2px); }
.btn--gold {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: #261A04;
  box-shadow: var(--shadow-glow);
}
.btn--gold:hover { color: #261A04; transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn--ghost:hover { color: var(--gold-400); border-color: var(--gold-400); }
.section--paper .btn--ghost { color: var(--text-dark); border-color: #C8D4DC; }
.section--paper .btn--ghost:hover { color: var(--turq-700); border-color: var(--turq-600); }

.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ----- header / nav ----- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 16, 26, 0.88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(31, 180, 194, 0.18);
}
.site-header.scrolled {
  background: rgba(7, 16, 26, 0.96);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.6);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem var(--gutter);
  max-width: var(--container); margin: 0 auto;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(245,196,67,.55), 0 0 24px -2px rgba(21,205,217,.45);
  background: #000;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text .name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1.02rem; letter-spacing: .01em; }
.brand-text .tag  { font-size: .68rem; color: var(--gold-400); letter-spacing: .26em; text-transform: uppercase; margin-top: 4px; }

/* primary nav */
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .15rem;
}
.nav-list > li { position: relative; }
.nav-list a {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--text);
  padding: .65rem .85rem;
  border-radius: 10px;
  font-size: .94rem;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}
.nav-list a:hover { color: var(--gold-400); background: rgba(21,205,217,.06); }
.nav-list a.is-active { color: var(--gold-400); }
.nav-list a.is-active::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .25rem; height: 2px;
  background: linear-gradient(90deg, var(--turq-500), var(--gold-400));
  border-radius: 2px;
}

/* dropdown */
.has-mega > a::after { content: "▾"; font-size: .7rem; margin-left: .25rem; color: var(--text-faint); }
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 640px;
  background: linear-gradient(180deg, #0E1F2A 0%, #0A1822 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.2rem;
  box-shadow: var(--shadow-lg);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .35rem 1rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .22s var(--ease), visibility .18s;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega h4 {
  grid-column: 1 / -1;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 .35rem;
}
.mega a {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem .65rem; border-radius: 10px;
  color: var(--text);
}
.mega a:hover { background: rgba(21,205,217,.08); }
.mega .ico {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(21,205,217,.18), rgba(245,196,67,.12));
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--turq-500);
}
.mega .ttl { font-weight: 600; font-size: .95rem; color: var(--text); display: block; line-height: 1.2; }
.mega .sub { font-size: .8rem; color: var(--text-faint); }

/* CTA in nav */
.nav-cta { display: flex; align-items: center; gap: .6rem; }
.nav-cta .phone {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-400);
  font-size: .98rem;
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: .4rem;
}
.nav-cta .phone span {
  line-height: 1.05;
  white-space: nowrap;
}
.nav-cta .phone small {
  display: block;
  font-size: .82em;
  letter-spacing: .03em;
  white-space: nowrap;
}
.nav-cta .phone:hover { color: var(--turq-400); }

/* mobile nav toggle */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
  width: 44px; height: 44px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle.is-open {
  color: var(--ink-950);
  background: linear-gradient(180deg, var(--gold-400), #FFD862);
  border-color: rgba(245,196,67,.55);
}

/* ----- HERO ----- */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  background: var(--ink-950);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 75% 18%, rgba(245,196,67,.30), transparent 60%),
    radial-gradient(700px 500px at 18% 80%, rgba(21,205,217,.22), transparent 65%),
    linear-gradient(180deg, #08131D 0%, #07101A 70%);
  z-index: -2;
}
.hero::after {
  /* desert silhouette + roofline */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  z-index: -1;
  background:
    /* roofline silhouette */
    linear-gradient(180deg, transparent 78%, rgba(7,16,26,.85) 100%),
    none;
  background-size: cover;
  background-position: bottom;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -0.025em;
}
.hero h1 .accent {
  background: linear-gradient(90deg, var(--turq-400) 0%, var(--gold-400) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: 1.18rem; }
.hero-mobile-logo { display: none; }
.hero-mobile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 2rem;
  border-top: 1px dashed var(--line-2); padding-top: 1.25rem;
}
.hero-trust .item { display: flex; flex-direction: column; }
.hero-trust .num { font-family: var(--font-display); font-weight: 700; color: var(--gold-400); font-size: 1.6rem; letter-spacing: -.02em; }
.hero-trust .lbl { font-size: .78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .14em; }

/* hero visual badge - circle with logo + glow */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px; margin-left: auto;
}
.hero-visual .ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(245,196,67,.55), rgba(245,196,67,0) 70%);
  filter: blur(10px);
}
.hero-visual .disc {
  position: absolute; inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #FFD566 0%, #F5C443 25%, #C24A1F 55%, #4A1308 85%),
    #0B1620;
  box-shadow:
    0 0 0 6px rgba(21,205,217,.85),
    0 0 0 10px rgba(245,196,67,.7),
    0 0 80px 8px rgba(245,196,67,.45),
    0 30px 60px -10px rgba(0,0,0,.7);
  overflow: hidden;
}
.hero-visual .disc::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* mountain + roof silhouette */
    linear-gradient(180deg, transparent 55%, #07101A 100%),
    none;
  background-size: cover;
  background-position: bottom;
}
.hero-visual .disc img {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78%; height: auto; border-radius: 50%;
}

/* ----- generic cards & sections ----- */
.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: linear-gradient(180deg, #0F2230 0%, #0B1A24 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(21,205,217,.55);
  box-shadow: 0 24px 48px -22px rgba(21,205,217,.4);
}
.card .ico-lg {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(245,196,67,.18), rgba(21,205,217,.10));
  border: 1px solid var(--line-2);
  color: var(--gold-400);
  margin-bottom: 1.1rem;
}
.card h3 { font-size: 1.2rem; }
.card .read {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .9rem;
  font-weight: 600; font-size: .9rem; letter-spacing: .04em;
  color: var(--turq-400);
  text-transform: uppercase;
}
.card .read:hover { color: var(--gold-400); }

.section--paper .card {
  background: #fff; border-color: #E5ECF1;
}
.section--paper .card:hover { box-shadow: 0 24px 48px -22px rgba(11,124,134,.25); border-color: var(--turq-400); }
.section--paper .card .ico-lg { color: var(--turq-700); }

/* section heading block */
.s-head { max-width: 760px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.s-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--rev { grid-template-columns: .95fr 1.05fr; }
.split .visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  position: relative; overflow: hidden;
  background: var(--ink-800);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2);
}

/* desert / roof scene generator */
.scene {
  position: relative; width: 100%; height: 100%;
}
.scene::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 70% 22%, rgba(245,196,67,.55), transparent 60%),
    linear-gradient(180deg, #0A1722 0%, #112634 70%, #0A1722 100%);
}
.scene::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* sun */
    radial-gradient(circle at 70% 30%, rgba(255,213,102,.95) 0%, rgba(245,196,67,.6) 5%, rgba(245,196,67,0) 9%),
    /* roof + mountains */
    none;
  background-size: cover;
  background-position: center;
}
.scene--metal::after {
  background:
    radial-gradient(circle at 80% 25%, rgba(245,196,67,.7) 0%, transparent 8%),
    repeating-linear-gradient(75deg, rgba(21,205,217,.10) 0 8px, rgba(11,22,32,.0) 8px 26px),
    none;
  background-size: cover;
}
.scene--tile::after {
  background:
    radial-gradient(circle at 80% 20%, rgba(245,196,67,.6), transparent 9%),
    none;
  background-size: cover;
}
.scene--foam::after {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,213,102,.4), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(21,205,217,.3), transparent 50%),
    none;
  background-size: cover;
}
.scene--storm::after {
  background:
    linear-gradient(180deg, #1A2434 0%, #0A1622 100%),
    radial-gradient(circle at 50% 0%, rgba(245,196,67,.4), transparent 25%);
  background-blend-mode: screen;
}
.scene--storm::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    none;
  background-size: cover;
}
.scene--commercial::after {
  background:
    radial-gradient(circle at 80% 25%, rgba(245,196,67,.5), transparent 8%),
    none;
  background-size: cover;
}
.scene--repair::after {
  background:
    radial-gradient(circle at 20% 30%, rgba(194,74,31,.5), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(21,205,217,.3), transparent 45%),
    none;
  background-size: cover;
}

/* ----- features list ----- */
.feat-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.feat-list li {
  display: grid; grid-template-columns: 28px 1fr;
  gap: .75rem; align-items: flex-start;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--line);
  color: var(--text-muted);
}
.section--paper .feat-list li { color: var(--text-dark-2); border-color: #E5ECF1; }
.feat-list .chk {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--turq-500), var(--turq-700));
  color: #04222A;
  display: grid; place-items: center;
  font-weight: 800; font-size: .85rem;
  box-shadow: 0 4px 12px -4px rgba(21,205,217,.7);
}

/* ----- stat band ----- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(135deg, #0E2630 0%, #07151E 100%);
  border-top: 1px solid rgba(245,196,67,.25);
  border-bottom: 1px solid rgba(21,205,217,.25);
  text-align: center;
}
.stat-band .item { padding: 2rem 1rem; border-right: 1px dashed var(--line); }
.stat-band .item:last-child { border-right: 0; }
.stat-band .num { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-400); font-weight: 700; }
.stat-band .lbl { color: var(--text-faint); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; }

/* ----- testimonials ----- */
.tm {
  background: linear-gradient(180deg, #0F2230, #0A1822);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  position: relative;
}
.tm::before {
  content: "“";
  position: absolute; top: -8px; left: 18px;
  font-family: var(--font-display); color: var(--gold-400);
  font-size: 4.5rem; line-height: 1; opacity: .85;
}
.tm p { color: var(--text); font-size: 1.02rem; }
.tm .who { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.tm .who .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--turq-500), var(--gold-400));
  color: #04222A; display: grid; place-items: center;
  font-weight: 700;
}
.tm .who .nm { font-weight: 600; color: var(--text); font-size: .95rem; }
.tm .who .meta { font-size: .8rem; color: var(--text-faint); }

/* ----- CTA strip ----- */
.cta-strip {
  background:
    radial-gradient(circle at 15% 50%, rgba(245,196,67,.18), transparent 55%),
    radial-gradient(circle at 85% 50%, rgba(21,205,217,.18), transparent 55%),
    linear-gradient(180deg, #0E2630 0%, #07151E 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  box-shadow: 0 30px 80px -30px rgba(21,205,217,.35);
}
.cta-strip h2 { margin: 0; max-width: 26ch; }
.cta-strip .actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ----- footer ----- */
.site-footer {
  background: #050B12;
  border-top: 1px solid rgba(245,196,67,.18);
  padding: 4rem 0 1.5rem;
  color: var(--text-muted);
}
.site-footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}
.site-footer h4 {
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-400); margin: 0 0 1rem;
}
.site-footer a { color: var(--text-muted); display: block; padding: .25rem 0; font-size: .95rem; }
.site-footer a:hover { color: var(--turq-400); }
.site-footer .brand { margin-bottom: 1rem; }
.site-footer .brand-text .name { font-size: 1.1rem; }
.site-footer .colophon {
  text-align: center;
  border-top: 1px solid rgba(31,180,194,.15);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
  font-size: .82rem;
  color: var(--text-faint);
}
.site-footer .colophon a { display: inline; color: var(--gold-400); }

/* ----- page banner (non-home pages) ----- */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 6rem) 0 clamp(3rem, 6vw, 4rem);
  background: var(--ink-950);
  isolation: isolate;
  border-bottom: 1px solid rgba(245,196,67,.18);
}
.page-banner::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 380px at 80% 0%, rgba(245,196,67,.28), transparent 55%),
    radial-gradient(700px 460px at 0% 100%, rgba(21,205,217,.18), transparent 55%),
    linear-gradient(180deg, #08131D 0%, #07101A 100%);
}
.page-banner::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1;
  background: none;
  background-size: cover; background-position: bottom;
  opacity: .9;
}
.crumbs {
  font-size: .82rem;
  color: var(--text-faint);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--gold-400); }
.page-banner h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  max-width: 22ch;
}
.page-banner .lede { max-width: 60ch; }
.page-banner .actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem; }
.page-banner--media .page-banner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .84fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.page-banner--media .lede {
  max-width: 66ch;
}

/* ----- FAQ accordion ----- */
.faq-list {
  display: grid; gap: .8rem;
  max-width: 880px; margin: 0 auto;
}
.faq-item {
  background: linear-gradient(180deg, #0F2230, #0A1822);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  color: var(--text); font-weight: 600; font-size: 1.02rem;
  font-family: var(--font-display);
}
.faq-q:hover { color: var(--gold-400); }
.faq-q .pm {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(21,205,217,.15);
  color: var(--turq-400);
  display: grid; place-items: center;
  font-weight: 700; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  flex: 0 0 auto;
}
.faq-item[open] .faq-q .pm { transform: rotate(45deg); background: var(--gold-400); color: var(--ink-950); }
.faq-a {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
}

/* ----- contact form ----- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.form-card {
  background: #fff;
  color: var(--text-dark);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--turq-500);
}
.form-card h2 { color: var(--text-dark); }
.form-card label { display: block; font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #3F5664; margin-bottom: .35rem; }
.form-card .field { margin-bottom: 1rem; }
.form-card .hidden-field { display: none; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%; padding: .85rem 1rem;
  border: 1.5px solid #D8E1E7;
  border-radius: 10px;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--text-dark);
  background: #F8FAFB;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: 0; border-color: var(--turq-500);
  box-shadow: 0 0 0 4px rgba(21,205,217,.18);
  background: #fff;
}
.form-card textarea { min-height: 140px; resize: vertical; }
.form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-card button[type="submit"] { width: 100%; justify-content: center; margin-top: .5rem; }
.form-success {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, #E6FAFC, #D4F1F4);
  border: 1.5px solid var(--turq-500);
  border-radius: 10px;
  color: #0B4750;
  font-weight: 600;
}
.form-success.is-on { display: block; }

.info-card {
  background: linear-gradient(180deg, #0F2230, #0A1822);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: 1.6rem;
}
.info-row {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 0; border-top: 1px dashed var(--line);
}
.info-row:first-of-type { border-top: 0; padding-top: 0; }
.info-row .ico {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(245,196,67,.2), rgba(21,205,217,.12));
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--gold-400);
}
.info-row h4 { margin: 0; font-size: .9rem; color: var(--text); text-transform: uppercase; letter-spacing: .14em; }
.info-row a, .info-row .v { color: var(--text); font-weight: 600; font-size: 1.08rem; }
.info-row a:hover { color: var(--turq-400); }
.info-row .sub { color: var(--text-faint); font-size: .85rem; }

/* ----- service areas list / map ----- */
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.area-chip {
  display: flex; align-items: center; gap: .55rem;
  background: #0F2230;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem 1rem;
  color: var(--text);
  font-weight: 500;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.area-chip:hover { transform: translateY(-2px); border-color: var(--gold-400); color: var(--gold-400); }
.area-chip::before {
  content: ""; width: 8px; height: 8px;
  background: var(--turq-500); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(21,205,217,.18);
}

/* desert map decoration */
.map-art {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 35% 60%, rgba(245,196,67,.18), transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(21,205,217,.18), transparent 55%),
    linear-gradient(180deg, #0E2230 0%, #07151E 100%);
  border: 1px solid var(--line-2);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.map-art::before {
  content: ""; position: absolute; inset: 0;
  background: none center/cover no-repeat;
}

/* ----- process steps ----- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: step; }
.step {
  background: linear-gradient(180deg, #0F2230, #0A1822);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 700; font-size: 2.4rem;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold-400);
  letter-spacing: -.04em;
  display: block; margin-bottom: .35rem;
}
.step h3 { font-size: 1.05rem; }
.step p { font-size: .94rem; margin: 0; }

/* logos / badge row */
.brand-row {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center;
}
.brand-pill {
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  padding: .55rem 1rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: .85rem;
}
.brand-pill .dot { color: var(--gold-400); margin-right: .35rem; }

/* numbered checklist (light) */
.section--paper .feat-list .chk { background: linear-gradient(180deg, var(--turq-500), var(--turq-700)); color: #fff; }

/* responsive */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band .item:nth-child(2) { border-right: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer .grid { grid-template-columns: 1fr 1fr; }
  .page-banner--media .page-banner-grid { grid-template-columns: 1fr; }
  .split, .split--rev, .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .split .visual, .map-art { aspect-ratio: 16/10; }
  .hero-visual { margin: 0 auto; max-width: 360px; }
  .spray-foam-hero-card,
  .spray-foam-process-photo,
  .spray-foam-feature-photo {
    min-height: clamp(300px, 62vw, 460px);
  }
}
@media (max-width: 860px) {
  .nav-list, .nav-cta .phone { display: none; }
  .menu-toggle { display: inline-flex; }
  .mega { position: static; transform: none; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: 0; padding: 0; }
  .has-mega > a::after { display: none; }
  .mobile-nav .nav-list { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
  .mobile-nav .nav-list a { padding: .85rem 1rem; border-radius: 10px; }
  .mobile-nav .nav-list a.is-active { background: rgba(245,196,67,.1); }
  .mobile-nav .mega { display: grid; padding-left: .5rem; }
  .mobile-nav .mega h4 { padding: .5rem 0 0; }
  .mobile-nav .nav-cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
  .mobile-nav .nav-cta .btn, .mobile-nav .nav-cta .phone { width: 100%; justify-content: center; display: inline-flex; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .form-card .row { grid-template-columns: 1fr; }
  .spray-foam-hero-card,
  .spray-foam-process-photo,
  .spray-foam-feature-photo {
    border-radius: 22px;
    min-height: 320px;
  }
  .spray-foam-media-grid .real-project-card,
  .spray-foam-media-grid .real-project-card--wide {
    min-height: 360px;
    height: 360px;
  }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .cta-strip { flex-direction: column; align-items: flex-start; }
  .brand-text .tag { display: none; }
  .brand img { width: 46px; height: 46px; }
}

/* ----- mobile nav drawer ----- */
.mobile-nav {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background:
    radial-gradient(600px 260px at 88% 0%, rgba(21,205,217,.16), transparent 70%),
    radial-gradient(520px 250px at 8% 6%, rgba(245,196,67,.12), transparent 72%),
    rgba(7,16,26,.985);
  z-index: 95;
  padding: 0 var(--gutter) max(2rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
  height: calc(100dvh - var(--mobile-header-offset, 72px));
  max-height: calc(100dvh - var(--mobile-header-offset, 72px));
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body.menu-open { overflow: hidden; }
.mobile-menu-shell {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 1rem 0 1.4rem;
}
.mobile-menu-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 calc(var(--gutter) * -1) 1rem;
  padding: .95rem var(--gutter);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(7,16,26,.94);
  backdrop-filter: blur(16px);
}
.mobile-menu-kicker {
  display: block;
  margin-bottom: .22rem;
  color: var(--gold-400);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mobile-menu-top strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.mobile-menu-close {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(245,196,67,.30);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  cursor: pointer;
}
.mobile-menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 2px;
  border-radius: 99px;
  background: #fff;
}
.mobile-menu-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-menu-list {
  display: grid !important;
  gap: .48rem !important;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.mobile-menu-list a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: .88rem 1rem !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px !important;
  color: #fff;
  background: rgba(255,255,255,.055);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
}
.mobile-menu-list a::after {
  content: "›";
  color: var(--gold-400);
  font-size: 1.35rem;
  line-height: 1;
}
.mobile-menu-list a:hover,
.mobile-menu-list a:focus-visible {
  color: #fff;
  border-color: rgba(21,205,217,.42);
  background: rgba(21,205,217,.12);
}
.mobile-menu-list a.is-active {
  color: var(--gold-400) !important;
  border-color: rgba(245,196,67,.35);
  background: rgba(245,196,67,.12) !important;
}
.mobile-menu-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: .75rem;
  padding: 1rem 0 .35rem;
  background: linear-gradient(180deg, rgba(7,16,26,0), rgba(7,16,26,.98) 22%);
}
.mobile-menu-actions .btn,
.mobile-call-now {
  width: 100%;
  min-height: 52px;
  justify-content: center;
}
.mobile-call-now {
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(245,196,67,.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.07);
  text-decoration: none;
  font-family: var(--font-display);
}
.mobile-call-now span {
  color: var(--gold-400);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mobile-call-now strong {
  color: #fff;
  font-size: 1.03rem;
}

/* Real W&D media replacement placeholders
   These containers intentionally replace all generated/stock-like visuals while
   preserving page layouts, spacing, overlays, motion, and premium branding. */
.media-placeholder {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px dashed rgba(143, 231, 239, .48) !important;
  background:
    radial-gradient(circle at 78% 15%, rgba(245, 196, 67, .2), transparent 32%),
    radial-gradient(circle at 18% 80%, rgba(21, 205, 217, .18), transparent 34%),
    linear-gradient(135deg, rgba(6, 13, 19, .98), rgba(12, 30, 42, .94) 54%, rgba(4, 10, 15, .98)) !important;
  box-shadow:
    0 34px 92px -48px rgba(21, 205, 217, .62),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 0 90px rgba(245, 196, 67, .08) !important;
}

.media-placeholder > * {
  display: none !important;
}

.media-placeholder::before {
  content: attr(data-media-type);
  position: absolute;
  top: clamp(1rem, 3vw, 1.65rem);
  left: clamp(1rem, 3vw, 1.65rem);
  z-index: 2;
  padding: .55rem .85rem;
  border: 1px solid rgba(245, 196, 67, .42);
  border-radius: 999px;
  background: rgba(3, 8, 12, .72);
  color: var(--gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 0 34px rgba(245, 196, 67, .18);
}

.media-placeholder::after {
  content: attr(data-media-label) "\A" attr(data-media-file) "\A" attr(data-media-folder);
  white-space: pre-line;
  position: absolute;
  inset: clamp(1rem, 3vw, 1.65rem);
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: calc(var(--r-xl) - .75rem);
  background:
    linear-gradient(90deg, rgba(143, 231, 239, .08) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(143, 231, 239, .07) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(circle at center, rgba(255, 255, 255, .06), transparent 54%);
  color: rgba(241, 252, 253, .94);
  font-size: clamp(1rem, 2.3vw, 1.45rem);
  font-weight: 850;
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .52);
}

.media-placeholder[data-media-type*="VIDEO"]::after {
  content: attr(data-media-label) "\A" attr(data-media-file) "\A" attr(data-media-folder) "\A Autoplay muted video slot";
}

@media (max-width: 720px) {
  .media-placeholder::before {
    font-size: .62rem;
    letter-spacing: .12em;
  }

  .media-placeholder::after {
    inset: .8rem;
    padding-top: 3.35rem;
    font-size: .95rem;
  }
}

/* animation polish */
.fade-up { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .fade-up { opacity: 0; transform: translateY(20px); }
html.js .fade-up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-up, html.js .fade-up { opacity: 1; transform: none; transition: none; } }

/* small icon helper */
.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* glow accent line */
.glow-line { height: 2px; background: linear-gradient(90deg, transparent, var(--gold-400), var(--turq-400), transparent); border: 0; }

/* small detail blocks */
.kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: .15rem .45rem;
  background: rgba(245,196,67,.12);
  color: var(--gold-400);
  border-radius: 4px;
  letter-spacing: .04em;
}

/* badge */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: rgba(21,205,217,.12);
  color: var(--turq-400);
  border: 1px solid rgba(21,205,217,.25);
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.badge--gold { background: rgba(245,196,67,.12); color: var(--gold-400); border-color: rgba(245,196,67,.3); }

/* =========================================================
   HOMEPAGE — rich visual sections
   ========================================================= */

/* ----- Larger hero with desert + monsoon imagery treatment ----- */
.hero--xl {
  min-height: 92vh;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #050B12 0%, #0A1822 55%, #0F2630 100%);
}
.hero-bg::before {
  /* desert sky gradient with monsoon clouds */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 110%, rgba(245,196,67,.20), transparent 60%),
    radial-gradient(800px 500px at 20% 0%, rgba(21,205,217,.12), transparent 65%),
    radial-gradient(900px 400px at 90% 0%, rgba(122,31,38,.18), transparent 65%);
}
.hero-sun {
  position: absolute; top: 14%; right: 14%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, #FFE07A 0%, #F5C443 30%, #C24A1F 60%, transparent 70%);
  filter: blur(1px);
  box-shadow:
    0 0 80px 30px rgba(245,196,67,.45),
    0 0 200px 80px rgba(245,196,67,.25);
  opacity: .85;
}
.hero-rays {
  position: absolute; top: 24%; right: 24%;
  width: 600px; height: 600px;
  transform: translate(50%, -50%);
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,213,102,.18) 4deg, transparent 8deg,
      transparent 30deg, rgba(255,213,102,.18) 34deg, transparent 38deg,
      transparent 60deg, rgba(255,213,102,.18) 64deg, transparent 68deg,
      transparent 90deg, rgba(255,213,102,.18) 94deg, transparent 98deg,
      transparent 120deg, rgba(255,213,102,.18) 124deg, transparent 128deg,
      transparent 150deg, rgba(255,213,102,.18) 154deg, transparent 158deg,
      transparent 180deg, rgba(255,213,102,.18) 184deg, transparent 188deg,
      transparent 210deg, rgba(255,213,102,.18) 214deg, transparent 218deg,
      transparent 240deg, rgba(255,213,102,.18) 244deg, transparent 248deg,
      transparent 270deg, rgba(255,213,102,.18) 274deg, transparent 278deg,
      transparent 300deg, rgba(255,213,102,.18) 304deg, transparent 308deg,
      transparent 330deg, rgba(255,213,102,.18) 334deg, transparent 338deg,
      transparent 360deg);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .55;
  animation: rays-spin 80s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-rays { animation: none; } }
@keyframes rays-spin { to { transform: translate(50%, -50%) rotate(360deg); } }

.hero-logo-feature {
  position: absolute;
  top: 10%;
  right: 8%;
  width: clamp(280px, 30vw, 460px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: clamp(14px, 1.4vw, 24px);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,213,102,.22), rgba(21,205,217,.1) 48%, transparent 70%);
  box-shadow:
    0 0 0 1px rgba(245,196,67,.26),
    0 0 68px 18px rgba(245,196,67,.24),
    0 0 150px 46px rgba(21,205,217,.12);
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.42));
  isolation: isolate;
}
.hero-logo-feature::before,
.hero-logo-feature::after {
  content: "";
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  pointer-events: none;
}
.hero-logo-feature::before {
  background:
    conic-gradient(from -16deg,
      transparent 0 12deg,
      rgba(255,213,102,.18) 13deg 16deg,
      transparent 17deg 58deg,
      rgba(21,205,217,.16) 59deg 62deg,
      transparent 63deg 118deg,
      rgba(255,213,102,.16) 119deg 122deg,
      transparent 123deg 198deg,
      rgba(21,205,217,.12) 199deg 202deg,
      transparent 203deg 296deg,
      rgba(255,213,102,.14) 297deg 300deg,
      transparent 301deg 360deg);
  mix-blend-mode: screen;
  opacity: .72;
  animation: rays-spin 96s linear infinite;
}
.hero-logo-feature::after {
  inset: 8%;
  border: 1px solid rgba(143,231,239,.22);
  box-shadow: inset 0 0 36px rgba(21,205,217,.16);
}
.hero-logo-feature img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: #050B12;
  box-shadow:
    0 0 0 2px rgba(245,196,67,.55),
    0 0 34px rgba(21,205,217,.38),
    0 22px 54px rgba(0,0,0,.52);
}
@media (prefers-reduced-motion: reduce) { .hero-logo-feature::before { animation: none; } }

.hero-mountains {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background:
    /* back range */
    none bottom/cover no-repeat,
    /* ground/foreground */
    linear-gradient(180deg, transparent 70%, rgba(7,16,26,.85) 100%);
}
.hero-rain {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(
      105deg,
      rgba(143,231,239,.08) 0 2px,
      transparent 2px 8px
    );
  mix-blend-mode: screen;
  opacity: .35;
  animation: rain-drift 8s linear infinite;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.9) 50%, transparent 75%);
}
@media (prefers-reduced-motion: reduce) { .hero-rain { animation: none; } }
@keyframes rain-drift { to { background-position: -200px 200px; } }

.hero-cactus {
  position: absolute; bottom: 8%; left: 4%;
  width: 80px; height: 200px;
  background: none center/contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(245,196,67,.3));
  opacity: .85;
}
.hero-house {
  position: absolute; bottom: 7%; right: 14%;
  width: 240px; height: 140px;
  background: none center/contain no-repeat;
  filter: drop-shadow(0 0 24px rgba(21,205,217,.35));
  opacity: .9;
}

/* Buttons larger on hero */
.btn--xl { padding: 1.05rem 1.7rem; font-size: 1rem; }

/* Orbit badges around hero disc */
.orbit-badge {
  position: absolute;
  display: none;
  background: linear-gradient(180deg, #0F2230, #0A1822);
  border: 1px solid rgba(245,196,67,.4);
  color: var(--gold-400);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem .85rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(245,196,67,.4);
  white-space: nowrap;
  align-items: center; gap: .4rem;
}
.orbit-badge span { color: var(--turq-400); }
.orbit-badge--1 { top: 4%; left: 2%; }
.orbit-badge--2 { top: 50%; right: 6%; }
.orbit-badge--3 { bottom: 4%; left: 10%; }

/* Ticker / marquee */
.ticker { margin-top: 2rem; overflow: hidden; }
.ticker-row {
  display: flex; gap: 2.5rem;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
  font-family: var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--text-muted);
}
.ticker .t-item { color: var(--gold-400); }
.ticker .t-item:nth-child(even) { color: var(--turq-400); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-row { animation: none; } }

/* ----- Services grid (overview) ----- */
.svc-card {
  position: relative;
  background: #fff;
  border: 1px solid #E5ECF1;
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .35rem;
  color: var(--text-dark);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  overflow: hidden;
}
.svc-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--turq-500), var(--gold-400));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--turq-400); box-shadow: 0 24px 48px -22px rgba(11,124,134,.25); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-card h3 { color: var(--text-dark); font-size: 1.12rem; margin: 0; }
.svc-card p { color: var(--text-dark-2); font-size: .92rem; margin: 0; }
.svc-card .svc-ico {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, var(--g1, #15CDD9), var(--g2, #0B7C86));
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: .7rem;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.18);
}
.svc-card .read {
  margin-top: .65rem; font-size: .82rem; font-weight: 700; letter-spacing: .12em;
  color: var(--turq-700); text-transform: uppercase;
}
.svc-card:hover .read { color: var(--gold-500); }

/* ----- Feature bands (coatings / metal) ----- */
.feature-band {
  position: relative;
  background: linear-gradient(180deg, #0A1822 0%, #0F2630 100%);
  overflow: hidden;
}
.feature-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 380px at 15% 50%, rgba(21,205,217,.16), transparent 60%),
    radial-gradient(700px 380px at 90% 50%, rgba(245,196,67,.14), transparent 60%);
}
.feature-band > .container { position: relative; }
.feature-band--metal { background: linear-gradient(180deg, #0F2630 0%, #07101A 100%); }

.home-intro-section {
  background:
    radial-gradient(800px 420px at 82% 10%, rgba(245,196,67,.1), transparent 62%),
    radial-gradient(760px 460px at 12% 80%, rgba(21,205,217,.12), transparent 64%),
    linear-gradient(180deg, #07101A 0%, #0A1B25 100%);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.home-intro-panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid rgba(143,231,239,.2);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(15,34,48,.9), rgba(7,16,26,.88)),
    radial-gradient(circle at 86% 16%, rgba(245,196,67,.16), transparent 34%);
  box-shadow: var(--shadow-lg);
}
.home-intro-copy h2 {
  max-width: 13ch;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -.035em;
}
.home-intro-copy p {
  max-width: 58ch;
  margin: 0 0 .85rem;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.7;
}
.home-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.35rem;
}
.home-intro-services {
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: calc(var(--r-xl) - .35rem);
  background: rgba(255,255,255,.035);
}
.home-intro-services h3 {
  margin: 0 0 1rem;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-service-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.home-service-chip-grid a {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 46px;
  padding: .78rem .85rem;
  border: 1px solid rgba(143,231,239,.18);
  border-radius: 14px;
  background: rgba(7,16,26,.55);
  color: rgba(241,252,253,.92);
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.home-service-chip-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(21,205,217,.62);
  background: rgba(21,205,217,.1);
}
.chip-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--turq-400), var(--gold-400));
  color: #061019;
  font-size: .76rem;
  font-weight: 950;
}

@media (max-width: 980px) {
  .home-intro-panel {
    grid-template-columns: 1fr;
  }
  .home-intro-copy h2 {
    max-width: 16ch;
  }
}

@media (max-width: 640px) {
  .home-service-chip-grid {
    grid-template-columns: 1fr;
  }
  .home-intro-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.project-media-gallery {
  background:
    radial-gradient(900px 500px at 82% 10%, rgba(245,196,67,.13), transparent 62%),
    radial-gradient(760px 520px at 12% 72%, rgba(21,205,217,.13), transparent 64%),
    linear-gradient(180deg, #07101A 0%, #0B202B 100%);
}
.project-media-gallery .section-head h2,
.project-media-gallery .section-head p {
  color: var(--text);
}
.project-media-gallery .section-head p {
  color: var(--text-muted);
}
.project-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}
.project-media-slot {
  min-height: 290px;
  border-radius: var(--r-xl);
}
.project-media-slot--wide {
  grid-column: span 2;
}
.project-media-slot--video {
  min-height: 360px;
}
.real-project-card {
  position: relative;
  min-height: 290px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.12);
  background: #050B12;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}
.real-project-card--wide {
  grid-column: span 2;
}
.real-project-card--video {
  min-height: 360px;
}
.real-project-card img,
.real-project-card video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.real-project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,7,11,.06) 35%, rgba(2,7,11,.82)),
    radial-gradient(circle at 16% 16%, rgba(21,205,217,.16), transparent 34%);
  pointer-events: none;
}
.real-project-card:hover img,
.real-project-card:hover video {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.07);
}
.real-project-card figcaption {
  position: absolute;
  left: clamp(16px, 3vw, 26px);
  right: clamp(16px, 3vw, 26px);
  bottom: clamp(16px, 3vw, 26px);
  z-index: 2;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(2,7,11,.84);
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.real-project-card figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.real-project-card figcaption strong {
  display: block;
  color: #F7FBFC;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.metal-project-gallery {
  position: relative;
  overflow: hidden;
}
.metal-project-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 68px 68px,
    linear-gradient(0deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 68px 68px;
  opacity: .42;
}
.metal-project-gallery > .container {
  position: relative;
}
.metal-media-grid .real-project-card {
  height: clamp(310px, 33vw, 460px);
  min-height: clamp(310px, 33vw, 460px);
  border-color: rgba(245,196,67,.16);
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.metal-media-grid .real-project-card--wide {
  height: clamp(330px, 36vw, 500px);
  min-height: clamp(330px, 36vw, 500px);
}
.metal-media-grid .real-project-card--video {
  height: clamp(360px, 42vw, 560px);
  min-height: clamp(360px, 42vw, 560px);
}
.metal-media-grid .real-project-card::after {
  background:
    linear-gradient(180deg, rgba(2,7,11,0) 50%, rgba(2,7,11,.10) 68%, rgba(2,7,11,.66)),
    radial-gradient(circle at 12% 14%, rgba(21,205,217,.04), transparent 34%),
    radial-gradient(circle at 84% 12%, rgba(245,196,67,.04), transparent 32%);
}
.metal-media-grid .real-project-card img,
.metal-media-grid .real-project-card video {
  height: 100%;
  min-height: 0;
  filter: saturate(1.08) contrast(1.04) brightness(1.05);
}
.metal-media-grid .real-project-card:hover img,
.metal-media-grid .real-project-card:hover video {
  filter: saturate(1.12) contrast(1.06) brightness(1.1);
}

.metal-material-figure {
  position: relative;
  width: min(100%, 860px);
  margin: 1.35rem 0 1.65rem;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 12% 12%, rgba(21,205,217,.10), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(245,196,67,.10), transparent 32%),
    #050B12;
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}
.metal-material-figure img {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  object-fit: contain;
  padding: clamp(14px, 2.5vw, 28px);
  filter: none;
}
.metal-material-figure::after {
  content: none;
}
.metal-material-figure figcaption {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  margin: 0 clamp(14px, 2.5vw, 28px) clamp(14px, 2.5vw, 24px);
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(2,7,11,.78);
  backdrop-filter: blur(12px);
}
.metal-material-figure figcaption span {
  display: block;
  margin-bottom: .25rem;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.metal-material-figure figcaption strong {
  color: #F7FBFC;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.metal-color-board {
  width: min(100%, 980px);
  margin: 1.5rem 0 1.35rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 8% 0%, rgba(21,205,217,.12), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(245,196,67,.12), transparent 32%),
    linear-gradient(180deg, rgba(9,18,28,.96), rgba(5,11,18,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.color-board-head {
  max-width: 760px;
  margin-bottom: 1.15rem;
}
.color-board-head h3 {
  margin: .35rem 0 .45rem;
  color: #F7FBFC;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
}
.color-board-head p {
  margin: 0;
  color: var(--text-muted);
}
.metal-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.metal-color-swatch {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: .75rem;
  min-height: 74px;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
.metal-color-swatch span {
  width: 54px;
  height: 54px;
  display: block;
  border-radius: 999px;
  background: var(--swatch);
  border: 2px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 12px 24px rgba(0,0,0,.22);
}
.metal-color-swatch strong {
  color: #F7FBFC;
  font-family: var(--font-display);
  font-size: .92rem;
  line-height: 1.1;
  letter-spacing: .02em;
}

@media (max-width: 900px) {
  .metal-color-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .metal-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metal-color-swatch {
    grid-template-columns: 46px 1fr;
    gap: .6rem;
    padding: .65rem;
  }
  .metal-color-swatch span {
    width: 46px;
    height: 46px;
  }
  .metal-color-swatch strong {
    font-size: .82rem;
  }
}

@media (max-width: 640px) {
  .metal-material-figure img {
    max-height: none;
    padding: 10px;
  }
  .metal-material-figure figcaption {
    margin: 0 10px 10px;
  }
}

@media (max-width: 980px) {
  .project-media-grid {
    grid-template-columns: 1fr 1fr;
  }
  .project-media-slot--wide {
    grid-column: span 2;
  }
  .real-project-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .project-media-grid {
    grid-template-columns: 1fr;
  }
  .project-media-slot,
  .project-media-slot--wide {
    grid-column: auto;
    min-height: 330px;
  }
  .real-project-card,
  .real-project-card--wide {
    grid-column: auto;
    min-height: 330px;
  }
}

/* Coating visual */
.coating-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 80% 25%, rgba(255,213,102,.3), transparent 25%),
    linear-gradient(180deg, #0A1622 0%, #0F2A38 100%);
  box-shadow: var(--shadow-lg);
}
.cv-roof {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background:
    /* reflective white roof with subtle stripes for coating layers */
    linear-gradient(180deg, #E8F3F6 0%, #BCE2E7 35%, #8FE7EF 100%);
  transform: perspective(800px) rotateX(58deg);
  transform-origin: center bottom;
  border-radius: 4px;
  box-shadow:
    inset 0 30px 60px rgba(255,255,255,.45),
    inset 0 -10px 30px rgba(11,124,134,.4),
    0 -10px 60px rgba(21,205,217,.3);
}
.cv-roof::before {
  /* reflectance shimmer */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 60px, rgba(255,255,255,.4) 60px 64px);
  mix-blend-mode: overlay;
  opacity: .6;
}
.cv-sun {
  position: absolute; top: 12%; right: 15%;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, #FFE07A 0%, #F5C443 50%, transparent 75%);
  box-shadow: 0 0 60px 18px rgba(245,196,67,.5);
}
.cv-rays {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 78% 22%,
    transparent 0deg, rgba(255,213,102,.0) 6deg,
    rgba(255,213,102,.18) 8deg, transparent 12deg,
    transparent 30deg, rgba(255,213,102,.18) 32deg, transparent 36deg,
    transparent 60deg, rgba(255,213,102,.18) 62deg, transparent 66deg,
    transparent 90deg, rgba(255,213,102,.18) 92deg, transparent 96deg);
  mix-blend-mode: screen;
  opacity: .55;
}
.cv-label {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(7,16,26,.78);
  border: 1px solid rgba(245,196,67,.35);
  padding: .4rem .7rem;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: .45rem;
  backdrop-filter: blur(6px);
}
.cv-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 12px 2px rgba(245,196,67,.7); }
.cv-label--1 { top: 10%; left: 6%; }
.cv-label--1 .dot { background: #fff; }
.cv-label--2 { top: 30%; left: 14%; }
.cv-label--2 .dot { background: var(--turq-400); }
.cv-label--3 { bottom: 14%; left: 8%; }

/* Metal visual */
.metal-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 80% 15%, rgba(245,196,67,.35), transparent 25%),
    linear-gradient(180deg, #0A1822 0%, #07101A 100%);
  box-shadow: var(--shadow-lg);
}
.metal-panel {
  position: absolute;
  left: -10%; right: -10%;
  height: 110%;
  background:
    linear-gradient(180deg,
      #6B7E89 0%,
      #B7C9D2 22%,
      #E2EDF2 40%,
      #B7C9D2 58%,
      #54636D 100%);
  transform: skewX(-18deg);
  box-shadow: inset 4px 0 0 rgba(255,255,255,.25), inset -4px 0 0 rgba(0,0,0,.45);
}
.metal-panel--1 { top: -10%; left: 8%; width: 70px; }
.metal-panel--2 { top: -10%; left: 28%; width: 110px; background:
  linear-gradient(180deg, #4E5E68, #A4B6C0 40%, #DDE9EE 55%, #6B7E89 100%); }
.metal-panel--3 { top: -10%; left: 56%; width: 90px; }
.metal-visual::before {
  /* additional repeating panels filling the surface */
  content: "";
  position: absolute; inset: -10% -10%;
  background:
    repeating-linear-gradient(108deg,
      #3F4D56 0 6px,
      #6B7E89 6px 18px,
      #C7D5DD 18px 34px,
      #6B7E89 34px 50px,
      #3F4D56 50px 56px);
  opacity: .85;
  transform: skewX(-18deg);
}
.metal-visual::after {
  /* highlight overlay */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(245,196,67,.18) 50%, transparent 100%),
    linear-gradient(180deg, transparent 60%, #050B12 100%);
}
.metal-glint {
  position: absolute; top: 0; bottom: 0; width: 60px;
  left: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  filter: blur(8px);
  animation: glint 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes glint { 0%,100% { left: 5%; opacity: 0; } 50% { left: 80%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .metal-glint { animation: none; opacity: 0; } }

.metal-spec {
  position: absolute;
  background: rgba(7,16,26,.85);
  border: 1px solid rgba(21,205,217,.4);
  color: var(--text);
  padding: .55rem .8rem;
  border-radius: 12px;
  font-family: var(--font-display);
  display: flex; flex-direction: column; line-height: 1.05;
  backdrop-filter: blur(8px);
  z-index: 3;
}
.metal-spec strong { font-size: 1.1rem; color: var(--gold-400); letter-spacing: .04em; }
.metal-spec span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.metal-spec.spec--1 { top: 12%; left: 6%; }
.metal-spec.spec--2 { top: 50%; right: 6%; }
.metal-spec.spec--3 { bottom: 10%; left: 8%; }

/* ----- Weather protection section ----- */
.weather { position: relative; isolation: isolate; overflow: hidden; }
.weather-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.weather-bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(122,31,38,.25), transparent 60%),
    radial-gradient(700px 400px at 80% 80%, rgba(21,205,217,.15), transparent 60%);
}
.w-storm {
  position: absolute; top: 0; left: 0; right: 0; height: 55%;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(20,38,52,.85) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 0%, rgba(7,16,26,.95) 0%, transparent 65%);
  filter: blur(2px);
}
.w-bolt {
  position: absolute;
  width: 4px; height: 200px;
  background: linear-gradient(180deg, #FFE07A, #F5C443, transparent);
  filter: drop-shadow(0 0 12px rgba(245,196,67,.9)) drop-shadow(0 0 24px rgba(245,196,67,.6));
  animation: flash 6s ease-out infinite;
  opacity: 0;
}
.w-bolt--1 { top: 8%; left: 22%; transform: rotate(8deg); }
.w-bolt--2 { top: 14%; right: 28%; transform: rotate(-12deg); animation-delay: 3s; height: 160px; }
@keyframes flash { 0%,8%,100% { opacity: 0; } 1%,3% { opacity: 1; } 2%,6% { opacity: .4; } 4% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .w-bolt { animation: none; opacity: .35; } }
.w-mountains {
  position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
  background: none bottom/cover no-repeat;
}

.weather-card {
  background: linear-gradient(180deg, rgba(15,34,48,.85), rgba(10,24,34,.85));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.weather-card:hover { transform: translateY(-3px); border-color: rgba(245,196,67,.45); }
.weather-card .wc-ico {
  width: 50px; height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(21,205,217,.2), rgba(245,196,67,.2));
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--gold-400);
  margin-bottom: 1rem;
}
.weather-card h3 { font-size: 1.05rem; }
.weather-card p { font-size: .92rem; margin: 0; }

/* ----- Trust / brand cards ----- */
.brand-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.brand-card {
  background: #fff;
  border: 1px solid #E5ECF1;
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex; gap: 1.1rem; align-items: flex-start;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.brand-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -22px rgba(11,124,134,.18); }
.brand-card h3 { font-size: 1.02rem; color: var(--text-dark); margin: 0 0 .25em; }
.brand-card p { color: var(--text-dark-2); font-size: .9rem; margin: 0; }
.brand-card .bc-mark {
  flex: 0 0 60px;
  width: 60px; height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--g1, #15CDD9), var(--g2, #0B7C86));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .02em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 12px 28px -12px rgba(11,124,134,.4);
}

/* stars row */
.stars { display: inline-flex; gap: 2px; color: var(--gold-400); margin-bottom: .5rem; }
.stars .i { width: 16px; height: 16px; fill: currentColor; stroke: none; }

.cta-strip--xl { padding: clamp(2rem, 5vw, 3.5rem); }
.cta-strip--xl h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* responsive overrides for homepage visuals */
@media (max-width: 1024px) {
  .brand-card-row { grid-template-columns: 1fr 1fr; }
  .hero-house { width: 180px; height: 110px; right: 4%; }
  .hero-cactus { width: 60px; height: 150px; }
  .hero-sun { width: 170px; height: 170px; }
  .hero-logo-feature { width: clamp(220px, 32vw, 320px); top: 11%; right: 5%; }
  .orbit-badge { font-size: .7rem; padding: .45rem .7rem; }
  .orbit-badge--1 { left: 0%; }
  .orbit-badge--2 { right: 0%; }
}
@media (max-width: 640px) {
  .brand-card-row { grid-template-columns: 1fr; }
  .hero-house, .hero-cactus { display: none; }
  .hero-sun { top: 6%; right: 6%; width: 120px; height: 120px; }
  .hero-logo-feature {
    display: none;
  }
  .hero-mobile-logo {
    display: grid;
    place-items: center;
    width: min(240px, 62vw);
    aspect-ratio: 1 / 1;
    margin: 1.45rem auto .35rem;
    padding: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,213,102,.18), rgba(21,205,217,.08) 55%, transparent 72%);
    box-shadow:
      0 0 0 1px rgba(245,196,67,.28),
      0 0 44px 12px rgba(245,196,67,.2),
      0 0 88px 28px rgba(21,205,217,.1);
  }
  .hero-mobile-logo img {
    box-shadow:
      0 0 0 2px rgba(245,196,67,.55),
      0 0 26px rgba(21,205,217,.32),
      0 18px 42px rgba(0,0,0,.46);
  }
  .orbit-badge { display: none; }
  .hero--xl { min-height: auto; }
  .ticker-row { font-size: .72rem; gap: 1.5rem; }
  .cta-strip--xl .actions { width: 100%; }
  .cta-strip--xl .actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* trust card on dark variant */
.section--ink .brand-card-row .brand-card,
.section--ink-deep .brand-card-row .brand-card {
  background: linear-gradient(180deg, #0F2230, #0A1822);
  border-color: var(--line);
}
.section--ink .brand-card h3, .section--ink-deep .brand-card h3 { color: var(--text); }
.section--ink .brand-card p, .section--ink-deep .brand-card p { color: var(--text-muted); }

/* =========================================================
   METAL ROOFING — premium page-specific treatments
   ========================================================= */

/* Charcoal section with industrial metallic feel */
.section--steel {
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(245,196,67,.10), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(21,205,217,.10), transparent 60%),
    linear-gradient(180deg, #0A0F14 0%, #0E1820 50%, #0A0F14 100%);
  position: relative; overflow: hidden;
}
.section--steel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02) 0 1px,
      transparent 1px 60px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.02) 0 1px,
      transparent 1px 60px
    );
  mix-blend-mode: screen;
  opacity: .35;
}

/* Hero variant: metal roofing showcase */
.metal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  background: #0A0F14;
}
.metal-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 500px at 75% 20%, rgba(245,196,67,.25), transparent 60%),
    radial-gradient(900px 600px at 10% 80%, rgba(21,205,217,.15), transparent 60%),
    linear-gradient(180deg, #050B12 0%, #0E1820 80%, #0A0F14 100%);
}
.metal-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: -1;
  background:
    none bottom/cover no-repeat,
    linear-gradient(180deg, transparent 60%, #0A0F14 100%);
}

/* Big metal panels showcase block */
.panel-showcase {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid #2A3744;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  background:
    repeating-linear-gradient(108deg,
      #2B3640 0 4px,
      #5B6E7B 4px 14px,
      #B3C5CF 14px 30px,
      #DAE6EC 30px 36px,
      #B3C5CF 36px 52px,
      #5B6E7B 52px 62px,
      #2B3640 62px 66px);
  transform-style: preserve-3d;
}
.panel-showcase::before {
  /* sun glint */
  content: "";
  position: absolute; top: -20%; left: -20%; width: 60%; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-22deg);
  filter: blur(4px);
  animation: panel-glint 8s ease-in-out infinite;
  mix-blend-mode: screen;
}
.panel-showcase::after {
  /* darken top to suggest depth */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(245,196,67,.15) 0%, transparent 40%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}
@keyframes panel-glint { 0%,100% { left: -30%; opacity: 0; } 50% { left: 80%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .panel-showcase::before { animation: none; opacity: 0; } }

.panel-showcase--photo {
  background: #050B12;
}
.panel-showcase--photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.04) brightness(1.04);
  transform: scale(1.01);
}
.panel-showcase--photo::before {
  z-index: 2;
  opacity: .24;
}
.panel-showcase--photo::after {
  z-index: 1;
  background:
    radial-gradient(circle at 76% 18%, rgba(245,196,67,.18), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(21,205,217,.14), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.62) 100%);
}

.panel-tag {
  position: absolute; z-index: 3;
  background: rgba(7,16,26,.88);
  border: 1px solid rgba(245,196,67,.45);
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: 14px;
  font-family: var(--font-display);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -15px rgba(245,196,67,.4);
}
.panel-tag .v { display: block; font-size: 1.2rem; font-weight: 700; color: var(--gold-400); letter-spacing: .02em; }
.panel-tag .k { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.panel-tag.pt-1 { top: 10%; left: 6%; }
.panel-tag.pt-2 { top: 50%; right: 6%; border-color: rgba(21,205,217,.5); }
.panel-tag.pt-2 .v { color: var(--turq-400); }
.panel-tag.pt-3 { bottom: 8%; left: 8%; }

/* Panel system cards (SSP / PBR / AG) */
.panel-system {
  position: relative;
  background: linear-gradient(180deg, #0F1A24 0%, #07101A 100%);
  border: 1px solid #1F3040;
  border-radius: var(--r-xl);
  padding: 1.6rem 1.6rem 1.4rem;
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.panel-system::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--turq-500) 0%, var(--gold-400) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.panel-system:hover { transform: translateY(-4px); border-color: rgba(245,196,67,.4); box-shadow: 0 28px 60px -25px rgba(245,196,67,.25); }
.panel-system:hover::before { transform: scaleX(1); }

.panel-system .preview {
  height: 110px;
  border-radius: 14px;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  border: 1px solid #243748;
  background: #1A2632;
}
.ps-ssp {
  background:
    linear-gradient(180deg, rgba(245,196,67,.2) 0%, transparent 40%),
    repeating-linear-gradient(90deg,
      #2B3640 0 18px,
      #5B6E7B 18px 22px,
      #C7D5DD 22px 26px,
      #5B6E7B 26px 30px,
      #2B3640 30px 48px);
}
.ps-pbr {
  background:
    linear-gradient(180deg, rgba(21,205,217,.18) 0%, transparent 40%),
    repeating-linear-gradient(90deg,
      #1B2A36 0 8px,
      #4E5E68 8px 14px,
      #A4B6C0 14px 18px,
      #4E5E68 18px 24px,
      #1B2A36 24px 32px);
}
.ps-ag {
  background:
    linear-gradient(180deg, rgba(245,196,67,.15) 0%, transparent 40%),
    repeating-linear-gradient(90deg,
      #28323C 0 12px,
      #5C6A75 12px 18px,
      #9CADB6 18px 22px,
      #5C6A75 22px 28px,
      #28323C 28px 40px);
}
.metal-preview-photo {
  background: #050B12;
}
.metal-preview-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04) brightness(1.02);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.panel-system:hover .metal-preview-photo img {
  transform: scale(1.05);
  filter: saturate(1.12) contrast(1.06) brightness(1.08);
}
.panel-system .preview::after {
  /* corner gradient sheen */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2,7,11,.02) 0%, rgba(2,7,11,.44) 100%),
    linear-gradient(135deg, transparent 58%, rgba(255,255,255,.18) 80%, transparent 100%);
  mix-blend-mode: screen;
}
.panel-system .ps-label {
  position: absolute; right: 12px; bottom: 10px;
  background: rgba(7,16,26,.85);
  color: var(--gold-400);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .16em;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(245,196,67,.4);
}
.panel-system h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.panel-system .ps-sub { color: var(--gold-400); font-family: var(--font-display); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .65rem; }
.panel-system .feat-list { margin-top: .8rem; }
.panel-system .feat-list li { padding: .35rem 0; font-size: .92rem; }

/* Spec strip — quick numbers */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: linear-gradient(135deg, #0F1A24 0%, #07101A 100%);
  border: 1px solid #243748;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.spec-strip .cell {
  padding: 1.5rem 1.2rem;
  border-right: 1px dashed #243748;
  text-align: center;
}
.spec-strip .cell:last-child { border-right: 0; }
.spec-strip .v {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
}
.spec-strip .k {
  display: block;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
@media (max-width: 860px) {
  .spec-strip { grid-template-columns: 1fr 1fr; }
  .spec-strip .cell:nth-child(2) { border-right: 0; }
  .spec-strip .cell:nth-child(1), .spec-strip .cell:nth-child(2) { border-bottom: 1px dashed #243748; }
}

/* Benefits hex/icon grid */
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.benefit {
  background: linear-gradient(180deg, rgba(15,26,36,.95), rgba(7,16,26,.95));
  border: 1px solid #1F3040;
  border-radius: var(--r-lg);
  padding: 1.3rem;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.benefit:hover { transform: translateY(-3px); border-color: rgba(21,205,217,.45); }
.benefit .b-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, #2A3744, #0F1A24);
  border: 1px solid rgba(245,196,67,.4);
  display: grid; place-items: center;
  color: var(--gold-400);
  margin-bottom: .8rem;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.4);
}
.benefit h3 { font-size: 1rem; margin-bottom: .25em; }
.benefit p { font-size: .88rem; margin: 0; }
@media (max-width: 1024px) { .benefits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .benefits-grid { grid-template-columns: 1fr; } }

/* Local materials feature */
.local-card {
  position: relative;
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(245,196,67,.16), transparent 60%),
    linear-gradient(180deg, #0F1A24, #07101A);
  border: 1px solid #243748;
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  overflow: hidden;
}
.local-card::before {
  content: "AZ";
  position: absolute;
  right: -10px; top: -30px;
  font-family: var(--font-display);
  font-size: 14rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px rgba(245,196,67,.18);
  pointer-events: none;
  line-height: 1;
}
.local-card .l-tag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(21,205,217,.12);
  border: 1px solid rgba(21,205,217,.35);
  color: var(--turq-400);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 999px;
}
.local-card .l-points {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  margin-top: 1.5rem;
}
.local-card .l-point {
  background: rgba(255,255,255,.02);
  border: 1px solid #243748;
  border-radius: 12px;
  padding: 1rem;
}
.local-card .l-point strong { color: var(--gold-400); display: block; font-family: var(--font-display); letter-spacing: .04em; }
@media (max-width: 720px) { .local-card .l-points { grid-template-columns: 1fr; } }

/* Use-case strip */
.use-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.use-card {
  background: #0F1A24;
  border: 1px solid #243748;
  border-radius: var(--r-lg);
  padding: 1.3rem 1.2rem;
  text-align: center;
}
.use-card .u-ico {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--turq-500), var(--turq-700));
  color: #04222A;
  display: grid; place-items: center; margin: 0 auto .8rem;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 12px 24px -10px rgba(21,205,217,.4);
}
.use-card h3 { font-size: 1rem; margin-bottom: .15em; }
.use-card p { font-size: .88rem; color: var(--text-muted); margin: 0; }
@media (max-width: 1024px) { .use-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .use-row { grid-template-columns: 1fr; } }

/* Big CTA buttons row */
.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ----- Roof coatings flagship page ----- */
.coatings-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  background: #07101A;
}
.coating-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(900px 500px at 72% 18%, rgba(245,196,67,.22), transparent 62%), radial-gradient(760px 520px at 18% 70%, rgba(21,205,217,.17), transparent 65%), linear-gradient(135deg, #050B12 0%, #07101A 48%, #0D2430 100%); }
.coating-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: none bottom/cover no-repeat; }
.coating-sun { position: absolute; top: 14%; right: 14%; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, #FFF3B0 0%, #F5C443 28%, #C76A24 58%, transparent 72%); box-shadow: 0 0 90px 28px rgba(245,196,67,.42), 0 0 220px 72px rgba(245,196,67,.18); opacity: .9; }
.coating-clouds { position: absolute; inset: 0; background: radial-gradient(360px 120px at 76% 12%, rgba(255,255,255,.08), transparent 70%), radial-gradient(420px 150px at 88% 26%, rgba(122,31,38,.18), transparent 75%), radial-gradient(460px 160px at 18% 10%, rgba(21,205,217,.09), transparent 70%); mix-blend-mode: screen; }
.coating-rain { position: absolute; inset: 0; background-image: repeating-linear-gradient(104deg, rgba(143,231,239,.07) 0 2px, transparent 2px 10px); opacity: .35; mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 76%); }
.coatings-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.coatings-hero h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); letter-spacing: -.035em; max-width: 12ch; background: linear-gradient(90deg, var(--turq-400), #BDEFD8 48%, var(--gold-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.coatings-hero .lede { color: var(--text-muted); }
.coating-roof-scene { min-height: 430px; position: relative; border: 1px solid rgba(143,231,239,.22); border-radius: var(--r-xl); overflow: hidden; background: radial-gradient(420px 260px at 50% 0%, rgba(245,196,67,.18), transparent 70%), linear-gradient(180deg, #0D2230, #07101A); box-shadow: 0 35px 90px -40px rgba(21,205,217,.5); }
.roof-plane { position: absolute; left: 8%; right: 8%; bottom: 12%; height: 52%; transform: perspective(820px) rotateX(58deg) rotateZ(-3deg); transform-origin: bottom; border-radius: 28px; background: linear-gradient(90deg, rgba(21,205,217,.18) 1px, transparent 1px) 0 0/54px 100%, linear-gradient(180deg, #FFFFFF 0%, #EAFBFC 38%, #BEE7EA 100%); box-shadow: inset 0 0 60px rgba(21,205,217,.18), 0 40px 80px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.28); }
.roof-plane::before { content: ""; position: absolute; inset: 7% 9%; border: 2px solid rgba(11,124,134,.28); border-radius: 20px; }
.roof-plane::after { content: ""; position: absolute; top: 12%; left: -12%; width: 42%; height: 12px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); filter: blur(2px); }
.drain { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, #07101A 0 34%, #DFFBFD 36% 55%, #15CDD9 57%); box-shadow: 0 0 18px rgba(21,205,217,.4); }
.drain--one { left: 18%; top: 38%; }
.drain--two { right: 22%; top: 62%; }
.seam { position: absolute; left: 10%; right: 10%; height: 3px; background: rgba(11,124,134,.2); border-radius: 999px; }
.seam--one { top: 32%; }
.seam--two { top: 67%; }
.coating-crew { position: absolute; left: 12%; bottom: 26%; display: flex; gap: 18px; transform: rotate(-3deg); }
.coating-crew span { width: 18px; height: 54px; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, var(--gold-400), #7A1F26 55%, #06111A); box-shadow: 0 0 16px rgba(245,196,67,.35); }
.drone-card { position: absolute; right: 8%; top: 10%; max-width: 240px; padding: .9rem 1rem; border: 1px solid rgba(245,196,67,.32); border-radius: 16px; background: rgba(7,16,26,.76); backdrop-filter: blur(10px); box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.drone-card strong { display: block; color: var(--gold-400); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; }
.drone-card span { display: block; color: var(--text-muted); font-size: .84rem; margin-top: .3rem; }
.coating-technical-card { padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: var(--r-xl); background: radial-gradient(360px 220px at 80% 0%, rgba(21,205,217,.12), transparent 70%), linear-gradient(180deg, #FFFFFF, #F1FBFC); border: 1px solid rgba(11,124,134,.16); box-shadow: 0 28px 70px -45px rgba(7,16,26,.45); }
.coating-technical-card h3 { color: var(--ink-950); font-size: clamp(1.45rem, 2.4vw, 2rem); }
.membrane-stack { display: grid; gap: .55rem; margin: 1.25rem 0; }
.membrane-stack span { padding: .9rem 1rem; border-radius: 14px; color: var(--ink-950); font-weight: 800; font-family: var(--font-display); background: linear-gradient(90deg, #FFFFFF, #DDFBFD); border: 1px solid rgba(11,124,134,.18); box-shadow: inset 0 -10px 18px rgba(21,205,217,.08); }
.membrane-stack span:nth-child(2) { background: linear-gradient(90deg, #E8FBFC, #AEEFF4); }
.membrane-stack span:nth-child(3) { background: linear-gradient(90deg, #1A2F3B, #07101A); color: #fff; border-color: rgba(245,196,67,.24); }
.product-stage { position: relative; overflow: hidden; }
.product-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 360px at 20% 12%, rgba(21,205,217,.13), transparent 70%), radial-gradient(760px 420px at 88% 20%, rgba(245,196,67,.12), transparent 68%); pointer-events: none; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.6rem); }
.coating-product { position: relative; overflow: hidden; padding: clamp(1.35rem, 3vw, 2rem); border-radius: var(--r-xl); border: 1px solid rgba(143,231,239,.2); background: linear-gradient(180deg, rgba(15,34,48,.94), rgba(7,16,26,.98)); box-shadow: 0 30px 70px -40px rgba(21,205,217,.45); }
.coating-product::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(135deg, rgba(21,205,217,.18), transparent 35%, rgba(245,196,67,.18)); opacity: .8; pointer-events: none; }
.coating-product > * { position: relative; z-index: 1; }
.coating-product h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: .9rem 0 .75rem; }
.product-topline { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.product-number, .product-type, .compare-kicker { display: inline-flex; border-radius: 999px; padding: .45rem .7rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-display); font-weight: 800; }
.product-number { color: var(--ink-950); background: linear-gradient(90deg, var(--gold-400), #FFE07A); }
.product-type { color: var(--turq-300); border: 1px solid rgba(21,205,217,.28); background: rgba(21,205,217,.08); }
.benefit-cloud { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0; }
.benefit-cloud span { border-radius: 999px; padding: .45rem .65rem; font-size: .82rem; color: #DDFBFD; background: rgba(21,205,217,.09); border: 1px solid rgba(21,205,217,.2); }
.benefit-cloud--silver span { color: #F8FCFF; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.used-on { margin: 1.1rem 0; padding: 1rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.used-on strong { color: var(--gold-400); font-family: var(--font-display); }
.used-on ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--text-muted); columns: 2; }
.coating-product-photo {
  position: relative;
  min-height: 260px;
  margin: 1.15rem 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(143,231,239,.22);
  background: #07101A;
  box-shadow: 0 24px 54px rgba(0,0,0,.24);
  isolation: isolate;
}
.coating-product-photo--wide {
  min-height: 320px;
}
.coating-product-photo--product {
  min-height: clamp(390px, 38vw, 520px);
}
.coating-product-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 78% 8%, rgba(245,196,67,.18), transparent 34%),
    linear-gradient(180deg, rgba(2,7,10,.02) 42%, rgba(2,7,10,.78));
  pointer-events: none;
}
.coating-product-photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03) brightness(.96);
  transition: transform .32s var(--ease), filter .32s var(--ease);
}
.coating-product-photo--product img {
  object-position: center 56%;
}
.coating-product-photo:hover img {
  transform: scale(1.025);
  filter: saturate(1.1) contrast(1.05) brightness(.99);
}
.coating-product-photo figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
}
.silicone-visual { min-height: 120px; margin: 1.1rem 0; border-radius: 18px; position: relative; overflow: hidden; background: radial-gradient(90px 55px at 68% 35%, rgba(21,205,217,.34), transparent 70%), linear-gradient(120deg, #F7FFFF, #C6F5F8 48%, #889BA3 49%, #F7FFFF 52%, #BFE9EC); }
.silicone-visual span { position: absolute; height: 3px; left: 8%; right: 8%; background: rgba(7,16,26,.12); border-radius: 999px; }
.silicone-visual span:nth-child(1) { top: 28%; }
.silicone-visual span:nth-child(2) { top: 52%; }
.silicone-visual span:nth-child(3) { top: 76%; }
.comparison-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 1.5rem); }
.compare-card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-xl); border: 1px solid rgba(11,124,134,.16); background: linear-gradient(180deg, #FFFFFF, #EFFBFC); color: var(--ink-950); }
.compare-card h3 { color: var(--ink-950); font-size: clamp(1.35rem, 2vw, 1.8rem); }
.compare-card p { color: var(--text-dark-2); }
.compare-card .feat-list li { border-color: rgba(11,124,134,.14); }
.compare-card--dark { background: radial-gradient(420px 240px at 80% 0%, rgba(245,196,67,.14), transparent 70%), linear-gradient(180deg, #102330, #07101A); border-color: rgba(245,196,67,.24); color: #fff; }
.compare-card--dark h3 { color: #fff; }
.compare-card--dark p, .compare-card--dark .feat-list li { color: var(--text-muted); }
.compare-kicker { color: var(--turq-700); background: rgba(21,205,217,.12); border: 1px solid rgba(21,205,217,.22); margin-bottom: .8rem; }
.compare-card--dark .compare-kicker { color: var(--gold-400); background: rgba(245,196,67,.1); border-color: rgba(245,196,67,.24); }
.coating-projects-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 360px at 12% 0%, rgba(21,205,217,.10), transparent 72%),
    radial-gradient(760px 360px at 92% 8%, rgba(245,196,67,.13), transparent 72%),
    linear-gradient(180deg, #FFFFFF, #F4FBFC);
}
.coating-project-gallery,
.coating-ba-grid {
  display: grid;
  gap: 18px;
}
.coating-project-gallery {
  grid-template-columns: 1.12fr .88fr .88fr;
  align-items: stretch;
}
.church-coating-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(780px 360px at 9% 0%, rgba(21,205,217,.08), transparent 72%),
    radial-gradient(720px 340px at 92% 10%, rgba(245,196,67,.12), transparent 74%),
    linear-gradient(180deg, #FFFFFF, #F7FBFC);
}
.church-coating-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr .92fr;
  gap: 18px;
  align-items: stretch;
}
.rio-rico-coating-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(780px 360px at 12% 4%, rgba(21,205,217,.14), transparent 72%),
    radial-gradient(760px 340px at 92% 10%, rgba(245,196,67,.14), transparent 74%),
    linear-gradient(180deg, #071018, #020406);
}
.rio-rico-coating-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr .92fr;
  gap: 18px;
  align-items: stretch;
}
.coating-sequence-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(780px 360px at 9% 0%, rgba(21,205,217,.08), transparent 72%),
    radial-gradient(720px 340px at 92% 10%, rgba(245,196,67,.12), transparent 74%),
    linear-gradient(180deg, #FFFFFF, #F7FBFC);
}
.coating-sequence-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr .92fr;
  gap: 18px;
  align-items: stretch;
}
.coating-primer-project-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(780px 360px at 14% 8%, rgba(245,196,67,.13), transparent 72%),
    radial-gradient(760px 340px at 92% 12%, rgba(21,205,217,.12), transparent 74%),
    linear-gradient(180deg, #08111A, #030508);
}
.coating-primer-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.coating-primer-project-grid .coating-project-card {
  min-height: 430px;
}
.coating-primer-project-grid .coating-project-card--landscape {
  grid-column: 1 / -1;
  min-height: 520px;
}
.coating-before-after-project-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(780px 360px at 10% 0%, rgba(21,205,217,.08), transparent 72%),
    radial-gradient(740px 360px at 90% 8%, rgba(245,196,67,.12), transparent 74%),
    linear-gradient(180deg, #FFFFFF, #F7FBFC);
}
.coating-before-after-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.coating-before-after-project-grid .coating-project-card {
  min-height: clamp(360px, 32vw, 470px);
}
.roof-restoration-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 390px at 12% 0%, rgba(21,205,217,.15), transparent 72%),
    radial-gradient(760px 360px at 88% 6%, rgba(245,196,67,.14), transparent 74%),
    linear-gradient(180deg, #061018, #020406);
}
.roof-restoration-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(circle at 50% 8%, #000 0%, transparent 64%);
  opacity: .55;
}
.roof-restoration-showcase > .container {
  position: relative;
  z-index: 1;
}
.restoration-story-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(245,196,67,.22);
  border-radius: 32px;
  background:
    radial-gradient(520px 260px at 8% 0%, rgba(21,205,217,.14), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.story-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: .75rem;
  padding: .42rem .72rem;
  border: 1px solid rgba(21,205,217,.30);
  border-radius: 999px;
  color: var(--turq-300);
  background: rgba(21,205,217,.10);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.restoration-story-panel h3,
.local-system-copy h3 {
  max-width: 14ch;
  color: #fff;
  font-size: clamp(1.55rem, 2.8vw, 2.55rem);
  line-height: .98;
}
.restoration-story-panel p,
.local-system-copy p {
  color: var(--text-muted);
}
.restoration-badges {
  display: grid;
  gap: .75rem;
}
.restoration-badges span {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: .8rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  color: #fff;
  background: rgba(3,10,15,.62);
  box-shadow: inset 4px 0 0 rgba(245,196,67,.72);
  font-family: var(--font-display);
  font-weight: 800;
}
.restoration-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.35rem);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.premium-ba-card {
  overflow: hidden;
  border: 1px solid rgba(245,196,67,.20);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 26px 74px rgba(0,0,0,.31);
}
.ba-slider {
  --position: 52%;
  position: relative;
  min-height: clamp(430px, 42vw, 590px);
  overflow: hidden;
  background: #07101A;
  isolation: isolate;
}
.ba-img,
.ba-img-wrap {
  position: absolute;
  inset: 0;
}
.ba-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.04) brightness(.94);
}
.ba-img--after {
  object-position: center 42%;
}
.ba-img-wrap {
  width: var(--position);
  overflow: hidden;
  border-right: 2px solid rgba(245,196,67,.92);
  box-shadow: 12px 0 34px rgba(0,0,0,.28);
  z-index: 2;
}
.ba-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 8%, rgba(245,196,67,.17), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.48));
}
.ba-label {
  position: absolute;
  top: 18px;
  z-index: 4;
  padding: .52rem .72rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(3,10,15,.72);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.ba-label--before { right: 18px; }
.ba-label--after {
  left: 18px;
  color: var(--ink-950);
  background: linear-gradient(135deg, var(--gold-400), #FFE07A);
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--position);
  z-index: 5;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.92) 45% 55%, transparent 55%),
    linear-gradient(180deg, transparent 45%, rgba(255,255,255,.92) 45% 55%, transparent 55%),
    radial-gradient(circle, rgba(21,205,217,.95), rgba(11,124,134,.88));
  box-shadow: 0 14px 38px rgba(0,0,0,.36), 0 0 0 8px rgba(21,205,217,.13);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.premium-ba-copy {
  padding: clamp(1.1rem, 2.5vw, 1.55rem);
}
.premium-ba-copy span {
  display: block;
  margin-bottom: .55rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.premium-ba-copy h3 {
  color: #fff;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
}
.premium-ba-copy p {
  margin-bottom: 0;
  color: var(--text-muted);
}
.restoration-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(1.4rem, 4vw, 2.5rem);
}
.restoration-detail-grid .coating-project-card {
  min-height: clamp(320px, 30vw, 430px);
}
.local-coating-system {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(21,205,217,.20);
  border-radius: 32px;
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(245,196,67,.13), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
}
.system-benefit-list {
  display: grid;
  gap: 1rem;
}
.system-benefit {
  padding: 1.1rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background: rgba(2,7,10,.46);
}
.system-benefit span {
  display: inline-flex;
  margin-bottom: .55rem;
  color: var(--turq-300);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.system-benefit h4 {
  color: #fff;
  font-size: 1.05rem;
}
.system-benefit p {
  margin-bottom: 0;
  color: var(--text-muted);
}
.coating-ba-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.coating-project-card {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(12,31,37,.10);
  border-radius: 30px;
  background: #07101A;
  box-shadow: 0 24px 62px rgba(7,19,24,.13);
  isolation: isolate;
}
.coating-project-card--wide {
  grid-row: span 2;
  min-height: 738px;
}
.coating-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 82% 9%, rgba(245,196,67,.18), transparent 34%),
    linear-gradient(180deg, rgba(2,7,10,.02) 42%, rgba(2,7,10,.82));
  pointer-events: none;
}
.coating-project-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(245,196,67,.19);
  border-radius: 22px;
  pointer-events: none;
}
.coating-project-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03) brightness(.96);
  transition: transform .34s var(--ease), filter .34s var(--ease);
}
.coating-project-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.09) contrast(1.05) brightness(.99);
}
.coating-project-card figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  color: #fff;
  background: rgba(4,13,18,.80);
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
}
.coating-project-card figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.coating-project-card figcaption strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(.98rem, 1.25vw, 1.18rem);
  line-height: 1.18;
}
.coating-before-after-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(21,205,217,.15), transparent 25%),
    radial-gradient(circle at 88% 10%, rgba(245,196,67,.13), transparent 28%),
    linear-gradient(180deg, #061018, #020406);
}
.coating-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.coating-process .process-step { min-height: 100%; padding: 1.25rem; border-radius: 20px; background: linear-gradient(180deg, #FFFFFF, #F4FBFC); border: 1px solid rgba(11,124,134,.14); box-shadow: 0 18px 50px -38px rgba(7,16,26,.45); }
.coating-process .process-step span { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink-950); background: linear-gradient(135deg, var(--gold-400), #FFE07A); font-family: var(--font-display); font-weight: 900; font-size: .82rem; margin-bottom: .85rem; }
.coating-process .process-step h3 { color: var(--ink-950); }
.coating-process .process-step p { color: var(--text-dark-2); margin-bottom: 0; }
.coating-weather .weather-card { min-height: 100%; }
@media (max-width: 1024px) {
  .coatings-hero-grid, .product-grid, .comparison-panel, .coating-project-gallery, .coating-sequence-grid, .coating-primer-project-grid, .coating-before-after-project-grid, .restoration-story-panel, .restoration-compare-grid, .local-coating-system, .rio-rico-coating-grid, .church-coating-grid, .coating-ba-grid { grid-template-columns: 1fr; }
  .restoration-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coatings-hero h1 { max-width: 14ch; }
  .coating-roof-scene { min-height: 360px; }
  .coating-primer-project-grid .coating-project-card--landscape {
    grid-column: auto;
    min-height: 360px;
  }
  .coating-project-card--wide {
    grid-row: auto;
    min-height: 460px;
  }
  .coating-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .coatings-hero { padding-top: 3rem; }
  .coatings-hero h1 { font-size: clamp(2rem, 13vw, 3.2rem); }
  .coating-roof-scene { min-height: 310px; }
  .drone-card { left: 8%; right: 8%; max-width: none; }
  .used-on ul { columns: 1; }
  .coating-project-card,
  .coating-project-card--wide,
  .coating-product-photo {
    min-height: 350px;
    border-radius: 24px;
  }
  .restoration-detail-grid { grid-template-columns: 1fr; }
  .ba-slider { min-height: 410px; }
  .restoration-story-panel,
  .local-coating-system,
  .premium-ba-card {
    border-radius: 24px;
  }
  .restoration-badges span {
    min-height: auto;
  }
  .coating-project-card figcaption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 13px;
  }
  .coating-process { grid-template-columns: 1fr; }
  .coatings-hero .hero-cta .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   SHINGLE ROOFING — premium residential page treatments
   ========================================================= */

.shingle-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  background: #07101A;
}
.shingle-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 72% 12%, rgba(245,196,67,.24), transparent 62%),
    radial-gradient(800px 520px at 8% 82%, rgba(21,205,217,.16), transparent 60%),
    linear-gradient(145deg, #050B12 0%, #07101A 48%, #0F2632 100%);
}
.shingle-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 120px at 78% 16%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(460px 160px at 86% 30%, rgba(122,31,38,.14), transparent 74%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 1px, transparent 1px 16px);
  mix-blend-mode: screen;
  opacity: .7;
}
.shingle-sun {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF1A6 0%, var(--gold-400) 29%, #C96825 58%, transparent 72%);
  box-shadow: 0 0 100px 32px rgba(245,196,67,.42), 0 0 240px 80px rgba(245,196,67,.16);
  opacity: .92;
}
.shingle-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: none bottom/cover no-repeat;
}
.shingle-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.shingle-hero h1 {
  font-size: clamp(2.25rem, 5vw, 4.6rem);
  max-width: 12ch;
  letter-spacing: -.04em;
  background: linear-gradient(90deg, #fff 0%, var(--turq-200) 44%, var(--gold-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shingle-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}
.shingle-trust .item {
  padding: .9rem;
  border-radius: 16px;
  border: 1px solid rgba(143,231,239,.18);
  background: rgba(7,16,26,.55);
  backdrop-filter: blur(8px);
}
.shingle-trust .num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-400);
}
.shingle-trust .num span { font-size: .85rem; margin-left: 2px; }
.shingle-trust .lbl {
  display: block;
  margin-top: .35rem;
  color: var(--text-muted);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shingle-house-scene {
  position: relative;
  min-height: 470px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(143,231,239,.22);
  background:
    radial-gradient(420px 260px at 74% 12%, rgba(245,196,67,.2), transparent 70%),
    linear-gradient(180deg, #0D2430 0%, #07101A 100%);
  box-shadow: 0 40px 90px -36px rgba(21,205,217,.46), inset 0 1px 0 rgba(255,255,255,.05);
}
.shingle-house-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background:
    radial-gradient(180px 80px at 18% 80%, rgba(21,205,217,.22), transparent 72%),
    linear-gradient(180deg, transparent, #06111A 74%);
}
.shingle-house-scene::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 16%;
  height: 44%;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/48px 100%,
    linear-gradient(180deg, #D9B27A 0%, #B88850 45%, #8B5E37 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 30px 65px rgba(0,0,0,.48);
}
.roof-facet {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 22px 22px rgba(0,0,0,.42));
}
.roof-facet::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(105deg,
      rgba(255,255,255,.08) 0 2px,
      transparent 2px 13px),
    linear-gradient(135deg, #2C3941 0%, #45535B 35%, #24303A 68%, #161F28 100%);
  clip-path: inherit;
}
.roof-facet--main {
  left: 10%;
  right: 10%;
  top: 31%;
  height: 32%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.roof-facet--left {
  left: 5%;
  top: 43%;
  width: 48%;
  height: 20%;
  clip-path: polygon(10% 0, 100% 0, 84% 100%, 0 100%);
}
.roof-facet--right {
  right: 5%;
  top: 43%;
  width: 48%;
  height: 20%;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 16% 100%);
}
.home-wall,
.home-window,
.home-door { z-index: 3; position: absolute; }
.home-wall { display: none; }
.home-window {
  bottom: 25%;
  width: 58px;
  height: 54px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(143,231,239,.88), rgba(21,205,217,.35));
  border: 3px solid rgba(255,255,255,.58);
  box-shadow: inset 0 0 18px rgba(255,255,255,.25), 0 0 24px rgba(21,205,217,.25);
}
.hw-1 { left: 20%; }
.hw-2 { right: 21%; }
.home-door {
  left: 50%;
  transform: translateX(-50%);
  bottom: 16%;
  width: 70px;
  height: 98px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #5F2F25, #2A1513);
  border: 2px solid rgba(245,196,67,.35);
}
.roof-tag {
  position: absolute;
  z-index: 5;
  max-width: 210px;
  padding: .75rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(245,196,67,.42);
  background: rgba(7,16,26,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
.roof-tag strong {
  display: block;
  color: var(--gold-400);
  font-family: var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}
.roof-tag span {
  display: block;
  margin-top: .25rem;
  color: var(--text-muted);
  font-size: .84rem;
}
.rt-1 { top: 9%; left: 7%; }
.rt-2 { right: 7%; bottom: 9%; border-color: rgba(21,205,217,.42); }
.rt-2 strong { color: var(--turq-400); }
.shingle-project-hero {
  position: relative;
  min-height: 500px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.22);
  background: #07101A;
  box-shadow: 0 40px 90px -36px rgba(21,205,217,.46), 0 0 76px rgba(245,196,67,.12);
  isolation: isolate;
}
.shingle-project-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 82% 12%, rgba(245,196,67,.22), transparent 34%),
    radial-gradient(circle at 10% 18%, rgba(21,205,217,.16), transparent 36%),
    linear-gradient(180deg, rgba(3,8,12,.03) 40%, rgba(3,8,12,.82));
  pointer-events: none;
}
.shingle-project-hero::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(245,196,67,.22);
  border-radius: calc(var(--r-xl) - 12px);
  pointer-events: none;
}
.shingle-project-hero img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.04) brightness(.96);
}
.shingle-project-hero figcaption,
.shingle-project-strip figcaption,
.shingle-gallery-card figcaption,
.shingle-process-gallery figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background: rgba(4,13,18,.78);
  backdrop-filter: blur(12px);
}
.shingle-project-hero figcaption span,
.shingle-project-strip figcaption span,
.shingle-gallery-card figcaption span,
.shingle-process-gallery figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.shingle-project-hero figcaption strong,
.shingle-project-strip figcaption strong,
.shingle-gallery-card figcaption strong,
.shingle-process-gallery figcaption strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.15;
}

.shingle-intro { position: relative; overflow: hidden; }
.shingle-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 280px at 90% 10%, rgba(21,205,217,.1), transparent 70%),
    radial-gradient(680px 320px at 5% 85%, rgba(245,196,67,.09), transparent 72%);
  pointer-events: none;
}
.shingle-side-card {
  position: relative;
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #FFFFFF, #F2FBFC);
  border: 1px solid rgba(11,124,134,.16);
  box-shadow: 0 28px 70px -45px rgba(7,16,26,.45);
}
.shingle-side-card h3 { color: var(--ink-950); font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.shingle-project-strip {
  display: grid;
  grid-template-columns: 1fr .86fr .62fr;
  gap: 18px;
  margin-top: 2rem;
}
.shingle-project-strip figure,
.shingle-gallery-card,
.shingle-process-gallery figure {
  position: relative;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(12,31,37,.1);
  background: #07101A;
  box-shadow: 0 24px 58px rgba(7,19,24,.12);
  isolation: isolate;
}
.shingle-project-strip figure::after,
.shingle-gallery-card::after,
.shingle-process-gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 80% 10%, rgba(245,196,67,.16), transparent 34%),
    linear-gradient(180deg, rgba(2,7,10,.02) 42%, rgba(2,7,10,.78));
  pointer-events: none;
}
.shingle-project-strip img,
.shingle-gallery-card img,
.shingle-process-gallery img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03);
  transition: transform .32s var(--ease), filter .32s var(--ease);
}
.shingle-project-strip figure:hover img,
.shingle-gallery-card:hover img,
.shingle-process-gallery figure:hover img {
  transform: scale(1.025);
  filter: saturate(1.1) contrast(1.05);
}
.shingle-project-strip figure:nth-child(3) {
  min-height: 430px;
}
.shingle-spec-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: linear-gradient(135deg, #0F2230 0%, #07101A 100%);
  border: 1px solid rgba(21,205,217,.22);
  box-shadow: 0 28px 70px -45px rgba(7,16,26,.55);
}
.shingle-spec-strip .cell {
  padding: 1.45rem 1rem;
  text-align: center;
  border-right: 1px dashed rgba(143,231,239,.16);
}
.shingle-spec-strip .cell:last-child { border-right: 0; }
.shingle-spec-strip .v {
  display: block;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1;
}
.shingle-spec-strip .k {
  display: block;
  margin-top: .4rem;
  color: var(--text-muted);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.shingle-brand-section {
  position: relative;
  overflow: hidden;
}
.shingle-brand-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(21,205,217,.12), transparent 70%),
    radial-gradient(760px 420px at 88% 10%, rgba(245,196,67,.12), transparent 70%);
  pointer-events: none;
}
.shingle-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.shingle-brand-card {
  position: relative;
  overflow: hidden;
  padding: 1.55rem;
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(21,205,217,.08), transparent 34%),
    linear-gradient(180deg, #0F2230, #07101A);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.shingle-brand-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245,196,67,.42);
  box-shadow: 0 30px 70px -34px rgba(245,196,67,.25);
}
.shingle-brand-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background:
    linear-gradient(90deg, rgba(21,205,217,.85), rgba(245,196,67,.75), transparent 82%);
  opacity: .85;
}
.brand-comparison-top {
  position: relative;
  display: grid;
  gap: .65rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(143,231,239,.14);
}
.brand-logo-text {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 46px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .95;
}
.brand-logo-text::after {
  content: "";
  display: inline-block;
  width: 42px;
  height: 1px;
  margin-left: .85rem;
  background: linear-gradient(90deg, var(--gold-400), transparent);
}
.brand-comparison-top .ps-sub {
  color: var(--gold-400);
}
.brand-gaf .brand-logo-text,
.brand-certainteed .brand-logo-text,
.brand-owens .brand-logo-text {
  text-shadow: 0 0 30px rgba(21,205,217,.14);
}
.brand-gaf .brand-logo-text::first-letter {
  color: var(--gold-400);
}
.shingle-brand-card h3 { font-size: 1.28rem; margin: 0 0 .65rem; }
.shingle-brand-card p { font-size: .94rem; }
.shingle-brand-card .feat-list {
  margin-top: 1rem;
  padding-top: .25rem;
}
.shingle-brand-card .feat-list li { padding: .45rem 0; font-size: .9rem; }
.owens-roofaq-panel {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(460px 280px at 100% 0%, rgba(245,196,67,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border: 1px solid rgba(143,231,239,.14);
  box-shadow: 0 30px 80px -46px rgba(0,0,0,.72);
}
.owens-roofaq-copy {
  padding: 1rem;
  border-radius: 22px;
  background:
    radial-gradient(360px 220px at 0% 0%, rgba(21,205,217,.12), transparent 70%),
    rgba(7,16,26,.72);
  border: 1px solid rgba(143,231,239,.12);
}
.owens-roofaq-copy h3 {
  margin: .35rem 0 .7rem;
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.02;
}
.owens-roofaq-copy p {
  color: rgba(235,250,252,.76);
}
.owens-roofaq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.owens-roofaq-grid figure {
  position: relative;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(143,231,239,.14);
  box-shadow: 0 24px 60px -38px rgba(0,0,0,.68);
  isolation: isolate;
}
.owens-roofaq-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,8,12,0) 42%, rgba(3,8,12,.82) 100%);
  pointer-events: none;
}
.owens-roofaq-grid img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.owens-roofaq-grid figure:hover img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.03);
}
.owens-roofaq-grid figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(3,8,12,.84);
  border: 1px solid rgba(143,231,239,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  backdrop-filter: blur(12px);
}
.owens-roofaq-grid figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.owens-roofaq-grid figcaption strong {
  display: block;
  color: #fff;
  font-size: .95rem;
  line-height: 1.2;
}
.shingle-info-library {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(520px 300px at 0% 0%, rgba(21,205,217,.12), transparent 72%),
    radial-gradient(460px 280px at 100% 0%, rgba(245,196,67,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(143,231,239,.14);
  box-shadow: 0 30px 80px -48px rgba(0,0,0,.75);
}
.shingle-info-intro {
  max-width: 76ch;
  padding: .75rem .75rem 1rem;
}
.shingle-info-intro h3 {
  margin: .35rem 0 .65rem;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1;
}
.shingle-info-intro p {
  color: rgba(235,250,252,.76);
}
.shingle-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.shingle-info-card {
  position: relative;
  min-height: 510px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(143,231,239,.14);
  box-shadow: 0 24px 60px -38px rgba(0,0,0,.68);
  isolation: isolate;
}
.shingle-info-card--wide {
  min-height: 360px;
}
.shingle-info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(3,8,12,0) 48%, rgba(3,8,12,.86) 100%);
  pointer-events: none;
}
.shingle-info-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.shingle-info-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}
.shingle-info-card figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(3,8,12,.84);
  border: 1px solid rgba(143,231,239,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  backdrop-filter: blur(12px);
}
.shingle-info-card figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.shingle-info-card figcaption strong {
  display: block;
  color: #fff;
  font-size: .95rem;
  line-height: 1.2;
}

.shingle-gallery-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 360px at 10% 0%, rgba(21,205,217,.1), transparent 72%),
    radial-gradient(740px 360px at 90% 0%, rgba(245,196,67,.1), transparent 72%),
    linear-gradient(180deg, #FFFDFC, #F5FAFC);
}
.shingle-gallery-section .s-head h2 { color: var(--ink-950); }
.shingle-gallery-section .s-head p {
  max-width: 70ch;
  color: var(--text-dark-2);
}
.shingle-gallery-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr .72fr;
  gap: 18px;
  margin-top: 2rem;
}
.shingle-gallery-card--wide {
  grid-row: span 2;
  min-height: 650px;
}
.shingle-gallery-card--tall {
  min-height: 650px;
}
.completed-shingle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.completed-shingle-card {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(11,124,134,.14);
  background: #07101A;
  box-shadow: 0 26px 60px -36px rgba(11,124,134,.44);
  isolation: isolate;
}
.completed-shingle-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,8,12,.04) 34%, rgba(3,8,12,.82) 100%),
    radial-gradient(circle at 78% 10%, rgba(245,196,67,.12), transparent 36%);
  pointer-events: none;
}
.completed-shingle-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.completed-shingle-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}
.completed-shingle-card figcaption {
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .95rem;
  z-index: 2;
  padding: .95rem;
  border-radius: 18px;
  background: rgba(3,8,12,.8);
  border: 1px solid rgba(143,231,239,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.completed-shingle-card figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.completed-shingle-card figcaption strong {
  display: block;
  color: #fff;
  font-size: .98rem;
  line-height: 1.22;
}
.shingle-before-after-showcase {
  margin-top: 1.2rem;
  padding: 1.2rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(640px 300px at 0% 0%, rgba(21,205,217,.1), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,250,252,.92));
  border: 1px solid rgba(11,124,134,.14);
  box-shadow: 0 30px 70px -48px rgba(11,124,134,.38);
}
.before-after-copy {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}
.before-after-copy h3 {
  margin: .2rem 0 0;
  color: var(--ink-950);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: .98;
}
.before-after-copy p {
  margin: 0;
  color: var(--text-dark-2);
}
.before-after-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.before-after-column {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  padding: .9rem;
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,124,134,.12);
}
.before-after-column--after {
  background:
    radial-gradient(300px 160px at 100% 0%, rgba(245,196,67,.1), transparent 72%),
    rgba(255,255,255,.84);
}
.ba-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 .8rem;
  border-radius: 999px;
  background: rgba(3,8,12,.86);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid rgba(143,231,239,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.ba-label--after {
  background: linear-gradient(135deg, var(--turq-500), #10AEBB);
  color: #031015;
}
.before-after-column figure {
  position: relative;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #07101A;
  border: 1px solid rgba(11,124,134,.12);
  box-shadow: 0 22px 52px -36px rgba(3,8,12,.5);
  isolation: isolate;
}
.before-after-column figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,8,12,.02) 34%, rgba(3,8,12,.8) 100%),
    radial-gradient(circle at 76% 8%, rgba(245,196,67,.1), transparent 36%);
  pointer-events: none;
}
.before-after-column img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.before-after-column figure:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}
.before-after-column figcaption {
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .8rem;
  z-index: 2;
  padding: .85rem;
  border-radius: 16px;
  background: rgba(3,8,12,.8);
  border: 1px solid rgba(143,231,239,.14);
  backdrop-filter: blur(12px);
}
.before-after-column figcaption span {
  display: block;
  margin-bottom: .3rem;
  color: var(--gold-400);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.before-after-column figcaption strong {
  display: block;
  color: #fff;
  font-size: .92rem;
  line-height: 1.2;
}
.single-before-after-job {
  display: grid;
  grid-template-columns: minmax(280px, .46fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
  padding: .9rem;
  border-radius: 24px;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(245,196,67,.11), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,250,252,.96));
  border: 1px solid rgba(11,124,134,.13);
}
.single-ba-copy {
  padding: .7rem;
  align-self: center;
}
.single-ba-copy h3 {
  margin: .25rem 0 .65rem;
  color: var(--ink-950);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1;
}
.single-ba-copy p {
  color: var(--text-dark-2);
  margin: 0;
}
.single-ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
.single-ba-card {
  position: relative;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #07101A;
  border: 1px solid rgba(11,124,134,.14);
  box-shadow: 0 22px 52px -36px rgba(3,8,12,.5);
  isolation: isolate;
}
.single-ba-card--after {
  border-color: rgba(21,205,217,.28);
  box-shadow: 0 28px 62px -38px rgba(21,205,217,.42);
}
.single-ba-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,8,12,.03) 30%, rgba(3,8,12,.84) 100%),
    radial-gradient(circle at 78% 10%, rgba(245,196,67,.1), transparent 36%);
  pointer-events: none;
}
.single-ba-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.single-ba-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}
.single-ba-card figcaption {
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .85rem;
  z-index: 2;
  padding: .9rem;
  border-radius: 16px;
  background: rgba(3,8,12,.82);
  border: 1px solid rgba(143,231,239,.14);
  backdrop-filter: blur(12px);
}
.single-ba-card figcaption span {
  display: block;
  margin-bottom: .3rem;
  color: var(--gold-400);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.single-ba-card figcaption strong {
  display: block;
  color: #fff;
  font-size: .95rem;
  line-height: 1.2;
}
.shingle-process-completion-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 380px at 15% 0%, rgba(21,205,217,.1), transparent 72%),
    radial-gradient(720px 340px at 90% 8%, rgba(245,196,67,.12), transparent 72%),
    linear-gradient(180deg, #FFFEFC, #F4FAFC);
}
.shingle-process-completion-section .s-head h2 { color: var(--ink-950); }
.shingle-process-completion-section .s-head p {
  max-width: 76ch;
  color: var(--text-dark-2);
}
.process-completion-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 2rem;
}
.process-completion-feature,
.process-completion-grid figure {
  position: relative;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #07101A;
  border: 1px solid rgba(11,124,134,.16);
  box-shadow: 0 30px 70px -42px rgba(11,124,134,.45);
  isolation: isolate;
}
.process-completion-feature::after,
.process-completion-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,8,12,.03) 28%, rgba(3,8,12,.82) 100%),
    radial-gradient(circle at 78% 10%, rgba(245,196,67,.12), transparent 38%);
  pointer-events: none;
}
.process-completion-feature img,
.process-completion-grid img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.process-completion-feature:hover img,
.process-completion-grid figure:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}
.process-completion-feature figcaption,
.process-completion-grid figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(3,8,12,.82);
  border: 1px solid rgba(143,231,239,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.process-completion-feature figcaption span,
.process-completion-grid figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.process-completion-feature figcaption strong,
.process-completion-grid figcaption strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 1.2;
}
.process-completion-copy {
  padding: 1.35rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(340px 220px at 100% 0%, rgba(21,205,217,.12), transparent 72%),
    linear-gradient(180deg, #FFFFFF, #F5FAFC);
  border: 1px solid rgba(11,124,134,.14);
  box-shadow: 0 26px 60px -42px rgba(11,124,134,.35);
}
.process-completion-copy h3 {
  margin: .35rem 0 .7rem;
  color: var(--ink-950);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1;
}
.process-completion-copy p {
  color: var(--text-dark-2);
}
.process-completion-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.process-completion-grid figure {
  min-height: 380px;
  border-radius: 24px;
}

.shingle-full-job-section {
  position: relative;
  overflow: hidden;
}
.shingle-full-job-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(21,205,217,.16), transparent 72%),
    radial-gradient(760px 390px at 86% 8%, rgba(245,196,67,.14), transparent 72%),
    linear-gradient(180deg, rgba(7,16,26,.98), rgba(4,9,15,.99));
  pointer-events: none;
}
.shingle-full-job-section .container {
  position: relative;
  z-index: 1;
}
.shingle-full-job-section .s-head p {
  max-width: 78ch;
  color: rgba(235,250,252,.76);
}
.full-job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 2rem;
}
.full-job-feature,
.full-job-card {
  position: relative;
  min-height: 600px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #07101A;
  border: 1px solid rgba(143,231,239,.14);
  box-shadow: 0 34px 80px -44px rgba(0,0,0,.82), 0 0 0 1px rgba(245,196,67,.03) inset;
  isolation: isolate;
}
.full-job-feature::after,
.full-job-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,8,12,.02) 25%, rgba(3,8,12,.85) 100%),
    radial-gradient(circle at 82% 12%, rgba(245,196,67,.16), transparent 34%);
  pointer-events: none;
}
.full-job-feature img,
.full-job-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.full-job-feature:hover img,
.full-job-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.04);
}
.full-job-feature figcaption,
.full-job-card figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(3,8,12,.84);
  border: 1px solid rgba(143,231,239,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  backdrop-filter: blur(12px);
}
.full-job-feature figcaption span,
.full-job-card figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.full-job-feature figcaption strong,
.full-job-card figcaption strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 1.2;
}
.full-job-copy {
  padding: 1.35rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(360px 240px at 100% 0%, rgba(21,205,217,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid rgba(143,231,239,.14);
  box-shadow: 0 30px 76px -46px rgba(0,0,0,.75);
}
.full-job-copy h3 {
  margin: .35rem 0 .7rem;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1;
}
.full-job-copy p {
  color: rgba(235,250,252,.76);
}
.full-job-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.full-job-card {
  min-height: 420px;
  border-radius: 24px;
}

.shingle-awning-project {
  position: relative;
  overflow: hidden;
}
.shingle-awning-project::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(820px 440px at 12% 0%, rgba(21,205,217,.14), transparent 70%),
    radial-gradient(760px 390px at 88% 8%, rgba(245,196,67,.13), transparent 72%),
    linear-gradient(180deg, rgba(7,16,26,.96), rgba(5,11,18,.99));
  pointer-events: none;
}
.shingle-awning-project .container {
  position: relative;
  z-index: 1;
}
.shingle-awning-project .s-head p {
  max-width: 78ch;
}
.awning-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  gap: 1.2rem;
  align-items: stretch;
  margin-top: 2rem;
}
.awning-feature-card,
.awning-progress-grid figure {
  position: relative;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.2);
  background: #07101A;
  box-shadow: 0 30px 70px rgba(0,0,0,.28), 0 0 70px rgba(21,205,217,.08);
  isolation: isolate;
}
.awning-feature-card::after,
.awning-progress-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3,8,12,.08) 35%, rgba(3,8,12,.82) 100%),
    radial-gradient(circle at 78% 12%, rgba(245,196,67,.14), transparent 38%);
  pointer-events: none;
}
.awning-feature-card img,
.awning-progress-grid img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.awning-feature-card:hover img,
.awning-progress-grid figure:hover img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.03);
}
.awning-feature-card figcaption,
.awning-progress-grid figcaption {
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 1.05rem;
  z-index: 2;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(3,8,12,.82);
  border: 1px solid rgba(143,231,239,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.awning-feature-card figcaption span,
.awning-progress-grid figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.awning-feature-card figcaption strong,
.awning-progress-grid figcaption strong {
  display: block;
  color: #fff;
  font-size: 1.04rem;
  line-height: 1.2;
}
.awning-copy-card {
  min-height: 100%;
  padding: 1.45rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(320px 240px at 100% 0%, rgba(21,205,217,.12), transparent 72%),
    linear-gradient(180deg, rgba(15,34,48,.94), rgba(7,16,26,.98));
  border: 1px solid rgba(143,231,239,.16);
  box-shadow: 0 30px 70px rgba(0,0,0,.18);
}
.awning-copy-card h3 {
  margin: .35rem 0 .7rem;
  color: #fff;
  font-size: clamp(1.45rem, 2.8vw, 2.25rem);
}
.awning-copy-card p {
  color: rgba(255,255,255,.78);
}
.awning-copy-card .cta-row {
  margin-top: 1.2rem;
}
.awning-progress-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.awning-progress-grid figure {
  min-height: 360px;
  border-radius: 24px;
}
.awning-progress-wide {
  grid-column: span 1;
}

.shingle-weather {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(122,31,38,.25), transparent 60%),
    linear-gradient(180deg, #0B1620 0%, #07101A 100%);
}

.shingle-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.benefit-card {
  position: relative;
  min-height: 100%;
  padding: 1.3rem;
  border-radius: var(--r-lg);
  background:
    radial-gradient(240px 150px at 90% 0%, rgba(21,205,217,.09), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F5FAFC);
  border: 1px solid rgba(11,124,134,.14);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(11,124,134,.28);
  box-shadow: 0 24px 52px -34px rgba(11,124,134,.34);
}
.benefit-card::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  margin-bottom: .85rem;
  background: linear-gradient(90deg, var(--turq-500), var(--gold-400));
}
.benefit-card h3 {
  color: var(--ink-950);
  font-size: 1rem;
  margin-bottom: .35em;
}
.benefit-card p {
  color: var(--text-dark-2);
  font-size: .9rem;
  margin: 0;
}

.shingle-process-section {
  position: relative;
  overflow: hidden;
}
.shingle-process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 360px at 10% 0%, rgba(21,205,217,.13), transparent 70%),
    radial-gradient(720px 360px at 90% 0%, rgba(245,196,67,.1), transparent 70%);
  pointer-events: none;
}
.shingle-process-gallery {
  display: grid;
  grid-template-columns: 1fr .86fr 1.1fr;
  gap: 18px;
  margin-top: 2rem;
}
.shingle-process-gallery figure {
  min-height: 330px;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
}
.replacement-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.replace-step {
  position: relative;
  padding: 1.25rem;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15,34,48,.94), rgba(7,16,26,.96));
  border: 1px solid var(--line);
}
.replace-step span {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: .85rem;
  color: #07101A;
  background: linear-gradient(135deg, var(--gold-400), #FFE07A);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .82rem;
}
.replace-step h3 { font-size: 1.08rem; }
.replace-step p { font-size: .92rem; margin: 0; }

.storm-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(520px 260px at 85% 15%, rgba(245,196,67,.15), transparent 70%),
    radial-gradient(520px 260px at 0% 100%, rgba(21,205,217,.12), transparent 70%),
    linear-gradient(180deg, #0E2630, #07151E);
}
.storm-callout h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.storm-meter {
  display: grid;
  gap: .7rem;
}
.storm-meter .m-label {
  position: relative;
  display: block;
  padding: .85rem 1rem;
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(143,231,239,.2);
  overflow: hidden;
}
.storm-meter .m-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--w, 78%);
  background: linear-gradient(90deg, rgba(21,205,217,.28), rgba(245,196,67,.22));
  z-index: -1;
}
.storm-meter .m-label:nth-child(1)::after { --w: 92%; }
.storm-meter .m-label:nth-child(2)::after { --w: 84%; }
.storm-meter .m-label:nth-child(3)::after { --w: 78%; }
.storm-meter .m-label:nth-child(4)::after { --w: 88%; }

@media (max-width: 1024px) {
  .shingle-hero-grid,
  .storm-callout { grid-template-columns: 1fr; }
  .shingle-hero h1 { max-width: 14ch; }
  .shingle-brand-grid { grid-template-columns: 1fr; }
  .owens-roofaq-panel { grid-template-columns: 1fr; }
  .shingle-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awning-showcase-grid { grid-template-columns: 1fr; }
  .process-completion-layout { grid-template-columns: 1fr; }
  .full-job-layout { grid-template-columns: 1fr; }
  .shingle-benefits,
  .shingle-project-strip,
  .shingle-gallery-grid,
  .completed-shingle-grid,
  .shingle-process-gallery,
  .process-completion-grid,
  .full-job-sequence,
  .awning-progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .replacement-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shingle-gallery-card--wide {
    grid-column: span 2;
    grid-row: auto;
    min-height: 480px;
  }
  .shingle-gallery-card--tall {
    min-height: 480px;
  }
  .before-after-copy,
  .before-after-columns,
  .single-before-after-job { grid-template-columns: 1fr; }
  .before-after-column figure { min-height: 280px; }
  .process-completion-feature { min-height: 480px; }
  .full-job-feature { min-height: 480px; }
  .awning-feature-card { min-height: 480px; }
  .awning-progress-wide { grid-column: span 2; min-height: 420px; }
}
@media (max-width: 720px) {
  .shingle-trust,
  .shingle-spec-strip,
  .owens-roofaq-grid,
  .shingle-info-grid,
  .replacement-timeline,
  .shingle-benefits,
  .shingle-project-strip,
  .shingle-gallery-grid,
  .completed-shingle-grid,
  .shingle-process-gallery,
  .process-completion-grid,
  .full-job-sequence,
  .awning-progress-grid { grid-template-columns: 1fr; }
  .shingle-gallery-card--wide {
    grid-column: auto;
    min-height: 360px;
  }
  .shingle-gallery-card--tall {
    min-height: 430px;
  }
  .owens-roofaq-panel { padding: .85rem; }
  .owens-roofaq-grid figure { min-height: 420px; }
  .shingle-info-library { padding: .85rem; }
  .shingle-info-card,
  .shingle-info-card--wide { min-height: 420px; }
  .shingle-before-after-showcase { padding: .85rem; }
  .before-after-column,
  .single-ba-grid { grid-template-columns: 1fr; }
  .before-after-column figure,
  .single-ba-card { min-height: 340px; }
  .process-completion-layout { grid-template-columns: 1fr; }
  .full-job-layout { grid-template-columns: 1fr; }
  .process-completion-feature,
  .process-completion-grid figure,
  .full-job-feature,
  .full-job-card { min-height: 380px; border-radius: 24px; }
  .awning-showcase-grid { grid-template-columns: 1fr; }
  .awning-feature-card,
  .awning-progress-grid figure,
  .awning-progress-wide {
    grid-column: auto;
    min-height: 380px;
  }
  .shingle-spec-strip .cell {
    border-right: 0;
    border-bottom: 1px dashed rgba(143,231,239,.16);
  }
  .shingle-spec-strip .cell:last-child { border-bottom: 0; }
  .shingle-house-scene { min-height: 360px; }
  .shingle-project-hero,
  .shingle-project-strip figure,
  .shingle-gallery-card,
  .completed-shingle-card,
  .shingle-process-gallery figure,
  .process-completion-feature,
  .process-completion-grid figure,
  .full-job-feature,
  .full-job-card,
  .awning-feature-card,
  .awning-progress-grid figure { min-height: 360px; border-radius: 24px; }
  .roof-tag { max-width: 185px; }
  .rt-1 { top: 6%; left: 5%; }
  .rt-2 { right: 5%; bottom: 6%; }
}
@media (max-width: 540px) {
  .shingle-hero { padding-top: 3rem; }
  .shingle-hero h1 { font-size: clamp(2rem, 13vw, 3.2rem); }
  .shingle-sun { width: 140px; height: 140px; right: 4%; }
  .shingle-house-scene,
  .owens-roofaq-grid figure,
  .shingle-info-card,
  .shingle-project-hero,
  .shingle-project-strip figure,
  .shingle-gallery-card,
  .completed-shingle-card,
  .shingle-process-gallery figure,
  .process-completion-feature,
  .process-completion-grid figure,
  .full-job-feature,
  .full-job-card,
  .awning-feature-card,
  .awning-progress-grid figure { min-height: 330px; }
  .shingle-gallery-card--tall { min-height: 430px; }
  .before-after-column figure,
  .single-ba-card { min-height: 315px; }
  .before-after-column figcaption,
  .completed-shingle-card figcaption,
  .single-ba-card figcaption,
  .owens-roofaq-grid figcaption,
  .shingle-info-card figcaption,
  .process-completion-feature figcaption,
  .process-completion-grid figcaption,
  .full-job-feature figcaption,
  .full-job-card figcaption {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    padding: .85rem;
  }
  .awning-copy-card { padding: 1rem; }
  .awning-feature-card figcaption,
  .awning-progress-grid figcaption {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    padding: .85rem;
  }
  .roof-tag { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: .75rem; max-width: none; }
  .roof-facet--main { top: 36%; }
  .roof-facet--left,
  .roof-facet--right { top: 48%; }
  .home-window { bottom: 20%; width: 44px; height: 44px; }
  .home-door { bottom: 12%; height: 72px; width: 54px; }
  .shingle-hero .cta-row .btn,
  .storm-callout + .cta-strip .actions .btn { width: 100%; justify-content: center; }
}

/* TILE ROOFING PAGE */
.tile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(900px 520px at 80% 8%, rgba(245,196,67,.17), transparent 68%),
    radial-gradient(700px 460px at 8% 18%, rgba(21,205,217,.16), transparent 72%),
    linear-gradient(180deg, #07101A 0%, #0C1B25 48%, #120D0A 100%);
}
.tile-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(13,40,55,.92), rgba(87,42,22,.62) 58%, rgba(7,16,26,.96)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px);
}
.tile-sun {
  position: absolute;
  width: clamp(160px, 22vw, 320px);
  height: clamp(160px, 22vw, 320px);
  right: 10%;
  top: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, #FFE39B 0 12%, #F5C443 35%, rgba(185,84,32,.42) 64%, transparent 72%);
  filter: blur(.2px);
  box-shadow:
    0 0 70px rgba(245,196,67,.34),
    0 0 140px rgba(190,82,31,.22);
}
.tile-mountains {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 34%;
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(163,76,41,.82) 18% 32%, transparent 32% 100%) 0 100% / 42% 100% no-repeat,
    linear-gradient(145deg, transparent 0 23%, rgba(100,47,34,.92) 23% 47%, transparent 47% 100%) 32% 100% / 46% 90% no-repeat,
    linear-gradient(132deg, transparent 0 31%, rgba(30,73,79,.86) 31% 54%, transparent 54% 100%) 72% 100% / 42% 76% no-repeat,
    linear-gradient(180deg, transparent, rgba(7,16,26,.92));
  opacity: .72;
}
.tile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.tile-hero h1 {
  max-width: 13ch;
  margin: .8rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6.9rem);
  line-height: .9;
  letter-spacing: -.07em;
  color: #fff;
  text-shadow: 0 22px 70px rgba(0,0,0,.42);
}
.tile-hero .lede {
  max-width: 66ch;
  color: rgba(255,255,255,.79);
}
.tile-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.25rem;
}
.tile-trust .stat,
.tile-trust .item {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(143,231,239,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.tile-trust strong,
.tile-trust .num {
  display: block;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
}
.tile-trust .num span {
  display: inline;
  margin: 0;
  color: currentColor;
  font-size: .6em;
  letter-spacing: .04em;
}
.tile-trust span,
.tile-trust .lbl {
  display: block;
  margin-top: .35rem;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tile-roof-scene {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.2);
  background:
    radial-gradient(420px 220px at 78% 18%, rgba(245,196,67,.2), transparent 70%),
    linear-gradient(180deg, rgba(15,49,63,.92) 0%, rgba(26,32,34,.92) 50%, rgba(70,39,26,.95) 100%);
  box-shadow: 0 36px 90px -48px rgba(0,0,0,.86);
}
.tile-roof-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, transparent 36%, rgba(7,16,26,.62));
  pointer-events: none;
}
.tile-row {
  position: absolute;
  left: -9%;
  right: -9%;
  z-index: 3;
  height: 72px;
  border-radius: 999px;
  transform: perspective(700px) rotateX(50deg) rotateZ(-1deg);
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255,222,168,.65) 0 10%, transparent 42%) 0 0 / 58px 72px,
    repeating-linear-gradient(90deg, #9F4424 0 24px, #C26232 24px 47px, #79341F 47px 58px);
  box-shadow:
    inset 0 9px 18px rgba(255,231,176,.22),
    inset 0 -15px 18px rgba(63,23,12,.45),
    0 18px 28px rgba(0,0,0,.28);
}
.tr-1 { top: 27%; }
.tr-2 { top: 36%; transform: perspective(700px) rotateX(50deg) rotateZ(1deg); }
.tr-3 { top: 45%; }
.tr-4 { top: 54%; transform: perspective(700px) rotateX(50deg) rotateZ(.6deg); }
.tile-wall {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 9%;
  height: 39%;
  border-radius: 30px 30px 12px 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.09), transparent 22% 78%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #F7E8CF, #D7B98E);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 30px 50px rgba(0,0,0,.24);
}
.tile-arch {
  position: absolute;
  bottom: 11%;
  z-index: 2;
  width: 68px;
  height: 104px;
  border-radius: 40px 40px 12px 12px;
  background:
    linear-gradient(180deg, rgba(12,28,38,.95), rgba(7,16,26,.92));
  border: 9px solid rgba(231,198,150,.9);
  box-shadow: inset 0 20px 30px rgba(0,0,0,.38);
}
.ta-1 { left: 28%; }
.ta-2 { right: 28%; }
.tile-card {
  position: absolute;
  z-index: 5;
  max-width: 210px;
  padding: .85rem .95rem;
  border-radius: 18px;
  background: rgba(7,16,26,.86);
  border: 1px solid rgba(245,196,67,.34);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.82);
  backdrop-filter: blur(12px);
}
.tile-card strong {
  display: block;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: .86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tile-card span {
  display: block;
  margin-top: .3rem;
  color: rgba(255,255,255,.74);
  font-size: .83rem;
  line-height: 1.35;
}
.tc-1 { left: 7%; top: 10%; }
.tc-2 { right: 7%; bottom: 10%; }

.tile-project-hero,
.tile-underlayment-photo,
.residential-project-hero {
  position: relative;
  margin: 0;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(143,231,239,.2);
  border-radius: var(--r-xl);
  background: #07101A;
  box-shadow: 0 36px 90px -48px rgba(0,0,0,.86), 0 0 70px rgba(245,196,67,.12);
  isolation: isolate;
}
.tile-project-hero::before,
.tile-underlayment-photo::before,
.residential-project-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 82% 12%, rgba(245,196,67,.22), transparent 34%),
    radial-gradient(circle at 16% 18%, rgba(21,205,217,.18), transparent 36%),
    linear-gradient(180deg, rgba(3,8,12,.04) 34%, rgba(3,8,12,.84));
  pointer-events: none;
}
.tile-project-hero::after,
.tile-underlayment-photo::after,
.residential-project-hero::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(245,196,67,.22);
  border-radius: calc(var(--r-xl) - 12px);
  box-shadow: inset 0 0 44px rgba(21,205,217,.09);
  pointer-events: none;
}
.tile-project-hero img,
.tile-underlayment-photo img,
.residential-project-hero img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.04) brightness(.98);
}
.tile-project-hero figcaption,
.tile-underlayment-photo figcaption,
.residential-project-hero figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 3;
  max-width: none;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  background: rgba(4,13,18,.78);
  box-shadow: 0 20px 44px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}
.tile-project-hero figcaption span,
.tile-underlayment-photo figcaption span,
.residential-project-hero figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tile-project-hero figcaption strong,
.tile-underlayment-photo figcaption strong,
.residential-project-hero figcaption strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.36rem);
  line-height: 1.14;
}

.tile-arizona {
  position: relative;
  overflow: hidden;
}
.tile-arizona::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(660px 320px at 8% 0%, rgba(194,98,50,.12), transparent 70%),
    radial-gradient(560px 280px at 92% 10%, rgba(21,205,217,.1), transparent 70%);
  pointer-events: none;
}
.tile-material-card {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #FFFFFF, #F8F1E7);
  border: 1px solid rgba(156,68,36,.16);
  box-shadow: 0 26px 72px -52px rgba(92,43,26,.45);
}
.material-choice {
  padding: 1rem;
  border-radius: 18px;
  background:
    radial-gradient(260px 140px at 95% 0%, rgba(245,196,67,.18), transparent 70%),
    #FFFFFF;
  border: 1px solid rgba(11,124,134,.12);
}
.material-choice span {
  display: inline-block;
  margin-bottom: .45rem;
  color: var(--turq-700);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.material-choice h3 {
  color: var(--ink-950);
  font-size: 1.15rem;
  margin-bottom: .45rem;
}
.material-choice p {
  color: var(--text-dark-2);
  font-size: .92rem;
  margin: 0;
}
.tile-benefit-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 2rem;
}
.tile-benefit-strip span {
  min-height: 84px;
  display: grid;
  place-items: center;
  padding: .85rem;
  border-radius: 999px;
  color: #3C2518;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(249,235,212,.9));
  border: 1px solid rgba(156,68,36,.16);
}

.tile-showcase-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 360px at 12% 0%, rgba(194,98,50,.14), transparent 70%),
    radial-gradient(760px 360px at 92% 8%, rgba(21,205,217,.12), transparent 72%),
    linear-gradient(180deg, #FFFDFC, #F5FAFC);
}
.tile-showcase-section .s-head h2 {
  color: var(--ink-950);
}
.tile-showcase-section .s-head .lede,
.tile-showcase-section .s-head p {
  color: var(--text-dark-2);
}
.tile-video-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(760px 420px at 86% 6%, rgba(245,196,67,.14), transparent 70%),
    radial-gradient(720px 380px at 6% 16%, rgba(21,205,217,.15), transparent 72%),
    linear-gradient(180deg, #07101A 0%, #102A35 100%);
}
.tile-video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
.tile-video-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.tile-video-grid h2 {
  max-width: 13ch;
  color: #fff;
}
.tile-video-grid p {
  max-width: 62ch;
  color: rgba(255,255,255,.76);
}
.tile-video-card {
  position: relative;
  margin: 0;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(143,231,239,.22);
  border-radius: 34px;
  background: #03080D;
  box-shadow: 0 36px 90px rgba(0,0,0,.36), 0 0 72px rgba(21,205,217,.12);
  isolation: isolate;
}
.tile-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 76% 10%, rgba(245,196,67,.18), transparent 36%),
    linear-gradient(180deg, rgba(3,8,12,.08), rgba(3,8,12,.72));
  pointer-events: none;
}
.tile-video-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(245,196,67,.22);
  border-radius: 24px;
  pointer-events: none;
}
.tile-video-card video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.04) brightness(.9);
}
.tile-video-card figcaption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(4,13,18,.78);
  backdrop-filter: blur(14px);
}
.tile-video-card figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tile-video-card figcaption strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.15;
}
.tile-showcase-grid,
.tile-detail-gallery,
.tile-replacement-showcase {
  display: grid;
  gap: 18px;
}
.tile-showcase-grid {
  grid-template-columns: 1.15fr .85fr .85fr;
  align-items: stretch;
}
.tile-showcase-card,
.tile-detail-card,
.tile-replacement-showcase figure,
.residential-system-media figure {
  position: relative;
  margin: 0;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid rgba(12,31,37,.10);
  border-radius: 28px;
  background: #07101A;
  box-shadow: 0 24px 58px rgba(7,19,24,.12);
  isolation: isolate;
}
.tile-showcase-card--wide {
  grid-row: span 2;
  min-height: 638px;
}
.tile-showcase-card::after,
.tile-detail-card::after,
.tile-replacement-showcase figure::after,
.residential-system-media figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 80% 10%, rgba(245,196,67,.18), transparent 34%),
    linear-gradient(180deg, rgba(2,7,10,.02) 44%, rgba(2,7,10,.78));
  pointer-events: none;
}
.tile-showcase-card img,
.tile-detail-card img,
.tile-replacement-showcase img,
.residential-system-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
  transition: transform .32s var(--ease), filter .32s var(--ease);
}
.tile-showcase-card:hover img,
.tile-detail-card:hover img,
.tile-replacement-showcase figure:hover img,
.residential-system-media figure:hover img {
  transform: scale(1.025);
  filter: saturate(1.1) contrast(1.05);
}
.tile-showcase-card figcaption,
.tile-detail-card figcaption,
.tile-replacement-showcase figcaption,
.residential-system-media figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  max-width: none;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  color: #fff;
  background: rgba(4,13,18,.78);
  backdrop-filter: blur(12px);
}
.tile-showcase-card figcaption span,
.tile-detail-card figcaption span,
.tile-replacement-showcase figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tile-showcase-card figcaption strong,
.tile-detail-card figcaption strong,
.tile-replacement-showcase figcaption strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.15;
}
.tile-expanded-gallery-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(860px 420px at 0% 0%, rgba(156,68,36,.12), transparent 70%),
    radial-gradient(720px 380px at 92% 0%, rgba(21,205,217,.1), transparent 72%),
    linear-gradient(180deg, #FBF8F3, #FFFFFF);
}
.tile-expanded-gallery-section .s-head h2 {
  color: var(--ink-950);
}
.tile-expanded-gallery-section .s-head p {
  max-width: 70ch;
  color: var(--text-dark-2);
}
.tile-photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 205px;
  gap: 18px;
  margin-top: 2rem;
}
.tile-photo-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(12,31,37,.1);
  background: #07101A;
  box-shadow: 0 24px 58px rgba(7,19,24,.12);
  isolation: isolate;
}
.tile-photo-card.is-wide { grid-column: span 2; }
.tile-photo-card.is-tall { grid-row: span 2; }
.tile-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 80% 10%, rgba(245,196,67,.16), transparent 34%),
    linear-gradient(180deg, rgba(2,7,10,.02) 42%, rgba(2,7,10,.8));
  pointer-events: none;
}
.tile-photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
  transition: transform .32s var(--ease), filter .32s var(--ease);
}
.tile-photo-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.1) contrast(1.05);
}
.tile-photo-card figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: rgba(4,13,18,.78);
  backdrop-filter: blur(12px);
}
.tile-photo-card figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tile-photo-card figcaption strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(.96rem, 1.2vw, 1.1rem);
  line-height: 1.15;
}
.tile-synthetic-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(780px 420px at 10% 0%, rgba(21,205,217,.15), transparent 72%),
    radial-gradient(760px 420px at 92% 8%, rgba(245,196,67,.14), transparent 72%),
    linear-gradient(180deg, #07101A, #0D1D27);
}
.tile-synthetic-intro {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-bottom: 2rem;
}
.tile-synthetic-intro h2 {
  max-width: 13ch;
  color: #fff;
}
.tile-synthetic-intro p {
  color: rgba(255,255,255,.76);
}
.synthetic-project-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}
.synthetic-project-card {
  position: relative;
  min-height: 330px;
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(143,231,239,.18);
  background: #07101A;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  isolation: isolate;
}
.synthetic-project-card--wide {
  grid-row: span 2;
  min-height: 678px;
}
.synthetic-project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 84% 12%, rgba(245,196,67,.18), transparent 34%),
    linear-gradient(180deg, rgba(2,7,10,.03) 42%, rgba(2,7,10,.82));
  pointer-events: none;
}
.synthetic-project-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.04);
  transition: transform .32s var(--ease), filter .32s var(--ease);
}
.synthetic-project-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.1) contrast(1.06);
}
.synthetic-project-card figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(4,13,18,.8);
  backdrop-filter: blur(12px);
}
.synthetic-project-card figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.synthetic-project-card figcaption strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.28vw, 1.16rem);
  line-height: 1.15;
}
.synthetic-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.synthetic-benefits article {
  padding: 1.1rem;
  border-radius: 20px;
  border: 1px solid rgba(143,231,239,.16);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.synthetic-benefits strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.15;
}
.synthetic-benefits span {
  display: block;
  margin-top: .45rem;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  line-height: 1.45;
}

.tile-underlayment-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 380px at 15% 0%, rgba(21,205,217,.14), transparent 70%),
    radial-gradient(760px 380px at 90% 12%, rgba(245,196,67,.13), transparent 70%),
    linear-gradient(180deg, #07101A, #0A1822);
}
.tile-underlayment-grid {
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.underlayment-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    linear-gradient(135deg, #102A35, #07101A);
  box-shadow: 0 28px 70px -48px rgba(0,0,0,.85);
}
.underlayment-visual::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 24px;
  border: 1px dashed rgba(143,231,239,.24);
  transform: skewY(-8deg);
}
.underlayment-visual .layer {
  position: absolute;
  left: 13%;
  right: 13%;
  min-height: 76px;
  display: flex;
  align-items: center;
  padding-inline: 1.1rem;
  border-radius: 18px;
  color: #07101A;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: skewY(-8deg);
  box-shadow: 0 22px 44px rgba(0,0,0,.28);
}
.underlayment-visual .top {
  top: 13%;
  background: repeating-linear-gradient(90deg, #B4542E 0 28px, #D16B38 28px 54px, #8E3C22 54px 68px);
}
.underlayment-visual .middle {
  top: 39%;
  background: linear-gradient(90deg, #14C8D7, #8FE7EF);
}
.underlayment-visual .bottom {
  top: 65%;
  background: linear-gradient(90deg, #D2AC74, #F4D8A5);
}
.underlayment-list {
  display: grid;
  gap: .85rem;
  margin: 1.15rem 0;
  padding: 0;
  list-style: none;
}
.underlayment-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .7rem;
  color: rgba(255,255,255,.78);
}
.underlayment-list strong { color: #fff; }

.tile-detail-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
}
.tile-detail-card {
  min-height: 360px;
}

.tile-repair-section {
  background:
    radial-gradient(760px 360px at 10% 0%, rgba(21,205,217,.09), transparent 72%),
    linear-gradient(180deg, #FFFFFF, #F5FAFC);
}
.tile-repair-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.tile-repair-card {
  position: relative;
  min-height: 100%;
  padding: 1.2rem;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(11,124,134,.12);
  box-shadow: 0 20px 48px -42px rgba(7,16,26,.28);
}
.tile-repair-card::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-bottom: .9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #C26232, var(--gold-400));
}
.tile-repair-card h3 {
  color: var(--ink-950);
  font-size: 1.05rem;
  margin-bottom: .45rem;
}
.tile-repair-card p {
  color: var(--text-dark-2);
  font-size: .9rem;
  margin: 0;
}
.tile-repair-card--cta {
  color: #fff;
  background:
    radial-gradient(240px 160px at 90% 0%, rgba(245,196,67,.18), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
  border-color: rgba(245,196,67,.3);
}
.tile-repair-card--cta h3,
.tile-repair-card--cta p { color: #fff; }
.tile-repair-card--cta .btn { margin-top: 1rem; }

.tile-replacement-section {
  background:
    radial-gradient(780px 420px at 12% 0%, rgba(156,68,36,.16), transparent 72%),
    radial-gradient(780px 420px at 92% 4%, rgba(21,205,217,.11), transparent 72%),
    linear-gradient(180deg, #07101A 0%, #0D1D27 100%);
}
.tile-replacement-showcase {
  grid-template-columns: 1fr .72fr .86fr;
  margin: 1.6rem 0 2rem;
}
.tile-replacement-showcase figure {
  min-height: 390px;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
}
.tile-weather {
  background:
    radial-gradient(900px 500px at 48% 0%, rgba(194,98,50,.22), transparent 62%),
    radial-gradient(760px 420px at 100% 20%, rgba(21,205,217,.12), transparent 70%),
    linear-gradient(180deg, #0D1D27 0%, #07101A 100%);
}
.tile-final-callout {
  background:
    radial-gradient(520px 260px at 84% 14%, rgba(194,98,50,.18), transparent 70%),
    radial-gradient(520px 260px at 0% 100%, rgba(21,205,217,.14), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
}

@media (max-width: 1100px) {
  .tile-hero-grid,
  .tile-underlayment-grid,
  .tile-video-grid,
  .tile-synthetic-intro {
    grid-template-columns: 1fr;
  }
  .tile-hero h1 { max-width: 14ch; }
  .tile-showcase-grid,
  .tile-replacement-showcase,
  .synthetic-project-grid {
    grid-template-columns: 1fr 1fr;
  }
  .synthetic-project-card--wide {
    grid-column: span 2;
    grid-row: auto;
    min-height: 520px;
  }
  .tile-photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 260px;
  }
  .tile-showcase-card--wide {
    grid-row: auto;
    grid-column: span 2;
    min-height: 520px;
  }
  .tile-benefit-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-repair-grid,
  .tile-detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tile-trust,
  .tile-benefit-strip,
  .tile-repair-grid,
  .tile-showcase-grid,
  .tile-detail-gallery,
  .tile-replacement-showcase,
  .tile-photo-gallery,
  .synthetic-project-grid,
  .synthetic-benefits {
    grid-template-columns: 1fr;
  }
  .synthetic-project-card--wide {
    grid-column: auto;
    min-height: 360px;
  }
  .tile-photo-gallery {
    grid-auto-rows: auto;
  }
  .tile-photo-card,
  .tile-photo-card.is-wide,
  .tile-photo-card.is-tall {
    grid-column: auto;
    grid-row: auto;
    min-height: 360px;
  }
  .tile-roof-scene,
  .tile-project-hero,
  .tile-underlayment-photo,
  .residential-project-hero { min-height: 390px; }
  .tile-showcase-card--wide {
    grid-column: auto;
    min-height: 390px;
  }
  .tile-showcase-card,
  .tile-detail-card,
  .tile-replacement-showcase figure,
  .tile-video-card,
  .synthetic-project-card {
    min-height: 360px;
    border-radius: 24px;
  }
  .tile-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: .75rem;
    max-width: none;
  }
  .tile-wall {
    left: 7%;
    right: 7%;
    bottom: 7%;
  }
  .tile-arch {
    width: 54px;
    height: 86px;
    border-width: 7px;
  }
  .ta-1 { left: 23%; }
  .ta-2 { right: 23%; }
  .underlayment-visual,
  .tile-underlayment-photo { min-height: 340px; }
  .tile-project-hero::after,
  .tile-underlayment-photo::after,
  .residential-project-hero::after {
    inset: 12px;
    border-radius: 22px;
  }
  .tile-project-hero figcaption,
  .tile-underlayment-photo figcaption,
  .residential-project-hero figcaption,
  .tile-video-card figcaption {
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 15px;
    border-radius: 18px;
  }
}
@media (max-width: 540px) {
  .tile-hero {
    padding-top: 3rem;
  }
  .tile-hero h1 {
    font-size: clamp(2.1rem, 13vw, 3.3rem);
    letter-spacing: -.055em;
  }
  .tile-sun {
    width: 138px;
    height: 138px;
    right: 2%;
    top: 8%;
  }
  .tile-roof-scene,
  .tile-project-hero,
  .tile-underlayment-photo,
  .residential-project-hero { min-height: 320px; }
  .tile-showcase-card,
  .tile-showcase-card--wide,
  .tile-detail-card,
  .tile-replacement-showcase figure,
  .tile-photo-card,
  .tile-photo-card.is-wide,
  .tile-photo-card.is-tall,
  .synthetic-project-card,
  .synthetic-project-card--wide {
    min-height: 330px;
  }
  .tile-video-card { min-height: 520px; }
  .tile-row {
    height: 54px;
    background-size: 44px 54px, auto;
  }
  .tr-1 { top: 33%; }
  .tr-2 { top: 42%; }
  .tr-3 { top: 51%; }
  .tr-4 { top: 60%; }
  .tile-wall { height: 31%; }
  .tile-arch { display: none; }
  .underlayment-visual .layer {
    left: 8%;
    right: 8%;
    min-height: 62px;
    font-size: .75rem;
  }
  .tile-hero .cta-row .btn,
  .tile-final-callout + .cta-strip .actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* FLAT ROOFING PAGE */
.flat-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(860px 520px at 82% 8%, rgba(21,205,217,.2), transparent 68%),
    radial-gradient(760px 420px at 14% 8%, rgba(245,196,67,.12), transparent 68%),
    linear-gradient(180deg, #07101A 0%, #0B1C27 54%, #061019 100%);
}
.flat-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(10,35,48,.94), rgba(6,16,25,.96)),
    repeating-linear-gradient(90deg, rgba(143,231,239,.035) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 48px);
}
.flat-sun {
  position: absolute;
  width: clamp(170px, 23vw, 330px);
  height: clamp(170px, 23vw, 330px);
  right: 10%;
  top: 9%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, #FFF3C0 0 10%, #F5C443 31%, rgba(21,205,217,.2) 61%, transparent 72%);
  box-shadow:
    0 0 90px rgba(21,205,217,.22),
    0 0 160px rgba(245,196,67,.18);
}
.flat-gridline {
  position: absolute;
  inset: auto -10% 13% -10%;
  height: 36%;
  transform: perspective(520px) rotateX(60deg);
  background:
    repeating-linear-gradient(90deg, rgba(143,231,239,.13) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(143,231,239,.1) 0 1px, transparent 1px 54px);
  opacity: .32;
}
.flat-mountains {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -2px;
  height: 28%;
  background:
    linear-gradient(135deg, transparent 0 20%, rgba(31,79,87,.8) 20% 42%, transparent 42% 100%) 0 100% / 45% 90% no-repeat,
    linear-gradient(145deg, transparent 0 27%, rgba(10,42,56,.92) 27% 53%, transparent 53% 100%) 32% 100% / 48% 100% no-repeat,
    linear-gradient(132deg, transparent 0 32%, rgba(55,74,78,.82) 32% 57%, transparent 57% 100%) 74% 100% / 44% 82% no-repeat;
  opacity: .68;
}
.flat-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .94fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.flat-hero h1 {
  max-width: 13.2ch;
  margin: .8rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 7vw, 6.8rem);
  line-height: .9;
  letter-spacing: -.07em;
  color: #fff;
  text-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.flat-hero .lede {
  max-width: 68ch;
  color: rgba(255,255,255,.78);
}
.flat-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.25rem;
}
.flat-trust div {
  padding: 1rem;
  border-radius: 18px;
  background:
    radial-gradient(180px 110px at 90% 0%, rgba(192,207,214,.14), transparent 70%),
    rgba(255,255,255,.07);
  border: 1px solid rgba(143,231,239,.18);
}
.flat-trust strong {
  display: block;
  color: var(--turq-300);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
}
.flat-trust span {
  display: block;
  margin-top: .35rem;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.flat-roof-visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.2);
  background:
    radial-gradient(360px 240px at 78% 16%, rgba(245,196,67,.16), transparent 70%),
    linear-gradient(180deg, rgba(15,49,63,.88), rgba(7,16,26,.94));
  box-shadow: 0 36px 90px -48px rgba(0,0,0,.85);
}
.flat-roof-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 38%, rgba(7,16,26,.46)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px);
}
.roof-plane {
  position: absolute;
  left: 9%;
  right: 9%;
  border-radius: 20px;
  transform: perspective(760px) rotateX(58deg) rotateZ(-4deg);
  border: 1px solid rgba(143,231,239,.18);
  box-shadow: 0 32px 48px rgba(0,0,0,.26);
}
.rp-main {
  top: 32%;
  height: 48%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), transparent 28% 74%, rgba(0,0,0,.08)),
    repeating-linear-gradient(90deg, #C9D5D9 0 48px, #EEF7F8 48px 96px);
}
.rp-coating {
  top: 23%;
  left: 21%;
  right: 18%;
  height: 19%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(143,231,239,.75));
  box-shadow:
    0 0 36px rgba(143,231,239,.28),
    0 26px 38px rgba(0,0,0,.24);
}
.hvac {
  position: absolute;
  z-index: 4;
  width: 86px;
  height: 58px;
  border-radius: 12px;
  transform: perspective(680px) rotateX(55deg) rotateZ(-4deg);
  background:
    repeating-linear-gradient(0deg, #7C8B91 0 7px, #B9C9CE 7px 11px);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 24px rgba(0,0,0,.32);
}
.hvac span {
  position: absolute;
  inset: 13px 18px;
  border-radius: 50%;
  border: 4px solid #485A61;
}
.hvac-1 { top: 35%; left: 30%; }
.hvac-2 { top: 51%; right: 18%; width: 72px; height: 50px; }
.drain {
  position: absolute;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: perspective(680px) rotateX(58deg) rotateZ(-4deg);
  background:
    radial-gradient(circle, #07101A 0 32%, #8FE7EF 33% 45%, #C9D5D9 46% 100%);
  box-shadow: 0 0 24px rgba(21,205,217,.32);
}
.drain-1 { top: 43%; left: 54%; }
.drain-2 { top: 62%; left: 26%; }
.pond-mark {
  position: absolute;
  z-index: 7;
  padding: .65rem .78rem;
  border-radius: 999px;
  color: var(--text);
  background: rgba(7,16,26,.88);
  border: 1px solid rgba(143,231,239,.28);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.75);
}
.pm-1 { left: 7%; top: 14%; }
.pm-2 { right: 7%; bottom: 10%; border-color: rgba(245,196,67,.34); }
.parapet {
  position: absolute;
  z-index: 3;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8FA0A6, #D9E4E7);
  transform: perspective(680px) rotateX(58deg) rotateZ(-4deg);
  box-shadow: 0 16px 22px rgba(0,0,0,.28);
}
.parapet-a { left: 11%; right: 11%; top: 74%; }
.parapet-b { left: 15%; right: 19%; top: 29%; }

.flat-specialists {
  position: relative;
  overflow: hidden;
}
.flat-specialists::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 320px at 8% 0%, rgba(21,205,217,.1), transparent 70%),
    radial-gradient(560px 300px at 92% 6%, rgba(192,207,214,.16), transparent 70%);
  pointer-events: none;
}
.flat-diagnostic-card {
  display: grid;
  gap: .8rem;
  padding: 1.25rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(260px 140px at 90% 0%, rgba(21,205,217,.1), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F4FAFB);
  border: 1px solid rgba(11,124,134,.14);
  box-shadow: 0 26px 72px -52px rgba(7,16,26,.34);
}
.diagnostic-row {
  display: grid;
  grid-template-columns: minmax(110px, .42fr) 1fr;
  gap: .75rem;
  align-items: center;
  padding: .85rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(11,124,134,.1);
}
.diagnostic-row strong {
  color: var(--ink-950);
  font-family: var(--font-display);
}
.diagnostic-row span {
  color: var(--text-dark-2);
  font-size: .9rem;
}
.flat-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.flat-service-card {
  padding: 1.2rem;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(11,124,134,.12);
  box-shadow: 0 20px 48px -42px rgba(7,16,26,.3);
}
.flat-service-card::before {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin-bottom: .9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--turq-500), #C9D5D9);
}
.flat-service-card h3 {
  color: var(--ink-950);
  font-size: 1.04rem;
  margin-bottom: .45rem;
}
.flat-service-card p {
  color: var(--text-dark-2);
  font-size: .9rem;
  margin: 0;
}

.flat-coatings-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 380px at 12% 0%, rgba(21,205,217,.16), transparent 70%),
    radial-gradient(760px 380px at 92% 8%, rgba(192,207,214,.13), transparent 70%),
    linear-gradient(180deg, #07101A, #0A1822);
}
.flat-coating-grid {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.flat-coating-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.18);
  background:
    radial-gradient(420px 220px at 60% 15%, rgba(245,196,67,.16), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
  box-shadow: 0 28px 70px -48px rgba(0,0,0,.85);
}
.flat-coating-visual .white-roof {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 25%;
  height: 46%;
  border-radius: 22px;
  transform: perspective(720px) rotateX(58deg) rotateZ(-6deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(143,231,239,.82)),
    repeating-linear-gradient(90deg, rgba(7,16,26,.08) 0 1px, transparent 1px 54px);
  box-shadow:
    0 0 38px rgba(143,231,239,.24),
    0 32px 44px rgba(0,0,0,.32);
}
.roller-path {
  position: absolute;
  z-index: 4;
  height: 18px;
  border-radius: 999px;
  transform: perspective(720px) rotateX(58deg) rotateZ(-6deg);
  background: linear-gradient(90deg, rgba(21,205,217,.92), rgba(255,255,255,.9));
  box-shadow: 0 0 24px rgba(21,205,217,.28);
}
.roller-path.rp-1 { left: 18%; right: 24%; top: 44%; }
.roller-path.rp-2 { left: 26%; right: 16%; top: 55%; }
.silver-edge {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 21%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #75858B, #E6F0F2, #87969C);
  transform: perspective(720px) rotateX(58deg) rotateZ(-6deg);
}
.cool-label {
  position: absolute;
  left: 8%;
  bottom: 9%;
  z-index: 5;
  padding: .7rem .9rem;
  border-radius: 999px;
  color: #07101A;
  background: linear-gradient(90deg, #8FE7EF, #FFFFFF);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.coating-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}
.coating-comparison div {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(143,231,239,.16);
}
.coating-comparison strong {
  display: block;
  color: var(--gold-400);
  margin-bottom: .35rem;
  font-family: var(--font-display);
}
.coating-comparison span {
  color: rgba(255,255,255,.74);
  font-size: .9rem;
  line-height: 1.45;
}

.flat-systems-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(680px 320px at 8% 0%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F5FAFC);
}
.flat-system-bento {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "foam bur"
    "foam restore";
  gap: 1rem;
}
.system-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid rgba(11,124,134,.12);
  box-shadow: 0 24px 58px -46px rgba(7,16,26,.28);
}
.system-panel::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,205,217,.13), transparent 70%);
}
.system-panel--foam { grid-area: foam; min-height: 360px; }
.system-panel--bur { grid-area: bur; }
.system-panel--restore {
  grid-area: restore;
  color: #fff;
  background:
    radial-gradient(320px 180px at 90% 0%, rgba(245,196,67,.15), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
  border-color: rgba(245,196,67,.22);
}
.flat-system-photo {
  position: relative;
  z-index: 1;
  height: clamp(220px, 26vw, 360px);
  margin: 0 0 1.1rem;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(11,124,134,.16);
  background: #07101A;
  box-shadow: 0 18px 42px rgba(7,16,26,.14);
}
.flat-system-photo--short {
  height: clamp(180px, 18vw, 240px);
}
.flat-system-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background:
    radial-gradient(420px 240px at 50% 50%, rgba(21,205,217,.09), transparent 70%),
    #07101A;
  filter: saturate(1.08) contrast(1.04) brightness(1.03);
}
.flat-system-photo figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(2,7,11,.78);
  backdrop-filter: blur(12px);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
}
.system-panel h3 {
  position: relative;
  z-index: 1;
  color: var(--ink-950);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  margin: .55rem 0 .6rem;
}
.system-panel p,
.mini-list {
  position: relative;
  z-index: 1;
}
.system-panel p {
  color: var(--text-dark-2);
  margin: 0;
}
.system-panel--restore h3,
.system-panel--restore p {
  color: #fff;
}
.panel-kicker {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--turq-700);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.system-panel--restore .panel-kicker { color: var(--gold-400); }
.mini-list {
  display: grid;
  gap: .55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.mini-list li {
  color: var(--text-dark-2);
  font-weight: 700;
}
.mini-list li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: .5rem;
  border-radius: 50%;
  color: #07101A;
  background: var(--turq-300);
}
.mini-list--dark li {
  color: var(--text-dark-2);
  border-color: rgba(11,124,134,.14);
  background: rgba(255,255,255,.76);
}
.bur-compilation-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: center;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid rgba(11,124,134,.16);
  border-radius: 34px;
  background:
    radial-gradient(620px 300px at 10% 0%, rgba(21,205,217,.10), transparent 72%),
    radial-gradient(620px 300px at 94% 8%, rgba(245,196,67,.12), transparent 72%),
    linear-gradient(180deg, #FFFFFF, #F2FAFC);
  box-shadow: 0 26px 70px -48px rgba(7,16,26,.42);
}
.bur-compilation-showcase figure {
  position: relative;
  min-height: clamp(340px, 35vw, 520px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(11,124,134,.16);
  border-radius: 28px;
  background: #07101A;
  box-shadow: 0 22px 56px rgba(7,16,26,.18);
}
.bur-compilation-showcase img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  background:
    radial-gradient(420px 240px at 50% 50%, rgba(21,205,217,.08), transparent 70%),
    #07101A;
}
.bur-compilation-showcase figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  color: #fff;
  background: rgba(2,7,11,.78);
  box-shadow: 0 16px 36px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
}
.bur-compilation-showcase figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bur-compilation-showcase figcaption strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
}
.bur-compilation-showcase h3 {
  color: var(--ink-950);
  font-size: clamp(1.55rem, 2.6vw, 2.45rem);
  line-height: 1;
}
.bur-compilation-showcase p {
  color: var(--text-dark-2);
}

.flat-drainage-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 400px at 88% 8%, rgba(21,205,217,.16), transparent 70%),
    linear-gradient(180deg, #07101A, #0C1B25);
}
.flat-drainage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.flat-drainage-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    linear-gradient(135deg, #102A35, #07101A);
  box-shadow: 0 28px 70px -48px rgba(0,0,0,.85);
}
.flat-drainage-visual::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 25%;
  height: 50%;
  border-radius: 24px;
  transform: perspective(700px) rotateX(58deg) rotateZ(-5deg);
  background:
    linear-gradient(135deg, #DDE9EB, #9AAAB0),
    repeating-linear-gradient(90deg, rgba(7,16,26,.08) 0 1px, transparent 1px 48px);
  box-shadow: 0 28px 40px rgba(0,0,0,.32);
}
.flat-drainage-photo {
  height: clamp(430px, 42vw, 560px);
  min-height: clamp(430px, 42vw, 560px);
}
.flat-drainage-photo img {
  object-fit: contain;
  background:
    radial-gradient(520px 300px at 50% 50%, rgba(143,231,239,.08), transparent 70%),
    #07101A;
}
.flat-drainage-photo::before {
  content: none;
  display: none;
}
.flat-project-gallery {
  position: relative;
  overflow: hidden;
}
.flat-media-grid .real-project-card {
  height: clamp(300px, 31vw, 430px);
  min-height: clamp(300px, 31vw, 430px);
  border-color: rgba(143,231,239,.16);
  box-shadow: 0 28px 80px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
.flat-media-grid .real-project-card--wide {
  height: clamp(330px, 36vw, 510px);
  min-height: clamp(330px, 36vw, 510px);
}
.flat-media-grid .real-project-card::after {
  background:
    linear-gradient(180deg, rgba(2,7,11,0) 50%, rgba(2,7,11,.08) 68%, rgba(2,7,11,.64)),
    radial-gradient(circle at 14% 12%, rgba(21,205,217,.07), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(245,196,67,.05), transparent 32%);
}
.flat-media-grid .real-project-card img {
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background:
    radial-gradient(520px 320px at 50% 50%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(145deg, #061018, #0B202B);
  filter: saturate(1.08) contrast(1.04) brightness(1.08);
}

/* Spray Foam Roofing real project media */
.spray-foam-hero {
  overflow: hidden;
  background:
    radial-gradient(780px 420px at 82% 22%, rgba(21,205,217,.14), transparent 66%),
    radial-gradient(620px 360px at 72% 80%, rgba(245,196,67,.12), transparent 68%),
    linear-gradient(180deg, #07101A 0%, #0B1A24 100%);
}
.spray-foam-hero-card,
.spray-foam-process-photo,
.spray-foam-feature-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(143,231,239,.18);
  border-radius: var(--r-xl);
  background:
    radial-gradient(520px 320px at 50% 50%, rgba(21,205,217,.1), transparent 70%),
    linear-gradient(145deg, #061018, #0B202B);
  box-shadow: 0 32px 82px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}
.spray-foam-hero-card {
  min-height: clamp(360px, 35vw, 520px);
}
.spray-foam-process-photo {
  min-height: clamp(380px, 48vw, 620px);
}
.spray-foam-feature-photo {
  min-height: clamp(320px, 33vw, 480px);
}
.spray-foam-hero-card img,
.spray-foam-process-photo img,
.spray-foam-feature-photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.05) brightness(1.06);
}
.spray-foam-hero-card::after,
.spray-foam-process-photo::after,
.spray-foam-feature-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,7,11,0) 45%, rgba(2,7,11,.78)),
    radial-gradient(circle at 14% 12%, rgba(21,205,217,.08), transparent 34%),
    radial-gradient(circle at 84% 14%, rgba(245,196,67,.06), transparent 34%);
}
.spray-foam-hero-card figcaption,
.spray-foam-process-photo figcaption,
.spray-foam-feature-photo figcaption {
  position: absolute;
  left: clamp(16px, 3vw, 26px);
  right: clamp(16px, 3vw, 26px);
  bottom: clamp(16px, 3vw, 26px);
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 32px);
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  color: #fff;
  background: rgba(2,7,11,.84);
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.spray-foam-hero-card figcaption span,
.spray-foam-process-photo figcaption span,
.spray-foam-feature-photo figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.spray-foam-hero-card figcaption strong,
.spray-foam-process-photo figcaption strong,
.spray-foam-feature-photo figcaption strong {
  display: block;
  max-width: 26ch;
  color: #F7FBFC;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.08;
}
.spray-foam-restoration-section {
  background:
    radial-gradient(680px 320px at 8% 0%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F5FAFC);
}
.spray-foam-project-gallery {
  position: relative;
  overflow: hidden;
}
.mobile-home-foam-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 420px at 12% 0%, rgba(21,205,217,.11), transparent 70%),
    radial-gradient(760px 360px at 88% 12%, rgba(245,196,67,.13), transparent 72%),
    linear-gradient(180deg, #FFFFFF, #F4FBFC);
}
.mobile-home-foam-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.1rem);
}
.mobile-home-foam-grid .real-project-card {
  height: clamp(430px, 42vw, 620px);
  min-height: clamp(430px, 42vw, 620px);
  border-color: rgba(12,31,37,.12);
  box-shadow: 0 24px 68px rgba(7,19,24,.14);
}
.mobile-home-foam-grid .real-project-card img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.03) brightness(1.04);
}
.spray-foam-education-section {
  background:
    radial-gradient(760px 360px at 15% 0%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F4F8FA);
}
.spray-foam-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
  align-items: stretch;
}
.spray-foam-info-card {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(7,16,26,.12);
  background: #fff;
  box-shadow: 0 22px 60px rgba(7,16,26,.12);
}
.spray-foam-info-card img {
  width: 100%;
  height: clamp(260px, 31vw, 430px);
  object-fit: contain;
  display: block;
  background: #fff;
  padding: clamp(.5rem, 1.4vw, 1rem);
}
.spray-foam-info-card figcaption {
  padding: 1rem 1.1rem 1.15rem;
  border-top: 1px solid rgba(7,16,26,.08);
  background:
    radial-gradient(360px 180px at 12% 0%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F7FBFC);
}
.spray-foam-info-card figcaption span {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent-2);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.spray-foam-info-card figcaption strong {
  display: block;
  color: #07101A;
  font-size: .98rem;
  line-height: 1.45;
}
.spray-foam-equipment-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(850px 470px at 76% 12%, rgba(21,205,217,.16), transparent 66%),
    radial-gradient(760px 420px at 8% 88%, rgba(245,196,67,.13), transparent 68%),
    linear-gradient(140deg, #07101A 0%, #0B1824 48%, #050B12 100%);
}
.spray-foam-equipment-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .55;
  pointer-events: none;
}
.equipment-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.4rem);
  align-items: center;
}
.equipment-showcase-copy h2,
.equipment-showcase-copy p {
  color: var(--text);
}
.equipment-showcase-copy h2 {
  max-width: 700px;
  margin-bottom: 1rem;
}
.equipment-showcase-copy p {
  color: var(--text-muted);
}
.equipment-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.45rem 0 1.6rem;
}
.equipment-capability-grid div {
  padding: 1rem;
  border: 1px solid rgba(143,231,239,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.equipment-capability-grid strong,
.equipment-capability-grid span {
  display: block;
}
.equipment-capability-grid strong {
  color: #fff;
  font-size: .92rem;
  line-height: 1.25;
}
.equipment-capability-grid span {
  margin-top: .35rem;
  color: rgba(234,249,251,.74);
  font-size: .78rem;
  line-height: 1.45;
}
.equipment-photo-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: repeat(2, minmax(250px, 1fr));
  gap: clamp(.8rem, 1.8vw, 1.1rem);
}
.equipment-photo-card {
  position: relative;
  min-height: 250px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.14);
  background: #050B12;
  box-shadow: 0 26px 76px rgba(0,0,0,.3);
}
.equipment-photo-card--feature {
  grid-row: span 2;
}
.equipment-photo-card--feature img {
  object-fit: contain;
  padding: clamp(.9rem, 2vw, 1.3rem);
  background:
    radial-gradient(440px 260px at 50% 44%, rgba(255,255,255,.08), transparent 72%),
    linear-gradient(145deg, #050B12, #0A1722);
}
.equipment-photo-card--vertical {
  grid-column: span 2;
  min-height: 300px;
}
.equipment-photo-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05) brightness(.98);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.equipment-photo-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.1) contrast(1.08) brightness(1.04);
}
.equipment-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,7,11,.04) 42%, rgba(2,7,11,.84)),
    radial-gradient(circle at 15% 12%, rgba(21,205,217,.16), transparent 35%);
  pointer-events: none;
}
.equipment-photo-card figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(12px, 2vw, 20px);
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  padding: .88rem .95rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: rgba(2,7,11,.84);
  backdrop-filter: blur(14px);
}
.equipment-photo-card figcaption span {
  display: block;
  margin-bottom: .25rem;
  color: var(--gold-400);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.equipment-photo-card figcaption strong {
  display: block;
  color: #fff;
  font-size: .92rem;
  line-height: 1.24;
}
.about-equipment-feature {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.8rem);
  align-items: center;
  max-width: 980px;
  margin: clamp(1.6rem, 4vw, 2.5rem) auto 0;
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 1px solid rgba(143,231,239,.18);
  border-radius: var(--r-xl);
  background:
    radial-gradient(500px 220px at 0% 0%, rgba(21,205,217,.12), transparent 70%),
    rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.22);
}
.about-equipment-feature figure {
  position: relative;
  min-height: 270px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: #050B12;
}
.about-equipment-feature img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.about-equipment-feature figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(2,7,11,.82));
}
.about-equipment-feature figcaption {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.about-equipment-feature h3,
.about-equipment-feature p {
  color: var(--text);
}
.about-equipment-feature p {
  color: var(--text-muted);
}
.spray-foam-industrial-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 460px at 82% 10%, rgba(245,196,67,.15), transparent 64%),
    radial-gradient(760px 480px at 8% 80%, rgba(21,205,217,.14), transparent 68%),
    linear-gradient(135deg, #050B12 0%, #07101A 46%, #0B202B 100%);
}
.spray-foam-industrial-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 78%);
  pointer-events: none;
}
.industrial-foam-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(1.4rem, 4vw, 3.25rem);
  align-items: center;
}
.industrial-foam-copy h2,
.industrial-foam-copy p {
  color: var(--text);
}
.industrial-foam-copy h2 {
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: -.03em;
}
.industrial-foam-copy p {
  color: var(--text-muted);
}
.industrial-foam-points {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1.35rem 0 1.6rem;
}
.industrial-foam-points span {
  padding: .62rem .82rem;
  border: 1px solid rgba(143,231,239,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #EAF9FB;
  font-size: .82rem;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.industrial-foam-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  gap: clamp(.9rem, 2vw, 1.15rem);
  align-items: stretch;
}
.industrial-foam-card {
  position: relative;
  min-height: clamp(360px, 42vw, 560px);
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.14);
  background: #050B12;
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}
.industrial-foam-card--after {
  transform: translateY(34px);
}
.industrial-foam-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.05) brightness(1.03);
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.industrial-foam-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.1) contrast(1.08) brightness(1.06);
}
.industrial-foam-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,7,11,.05) 42%, rgba(2,7,11,.82)),
    radial-gradient(circle at 14% 12%, rgba(21,205,217,.18), transparent 34%);
  pointer-events: none;
}
.industrial-foam-card figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  padding: .95rem 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(2,7,11,.84);
  backdrop-filter: blur(14px);
}
.industrial-foam-card figcaption span {
  display: block;
  margin-bottom: .28rem;
  color: var(--gold-400);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.industrial-foam-card figcaption strong {
  display: block;
  color: #fff;
  font-size: .98rem;
  line-height: 1.25;
}
.spray-foam-media-grid .real-project-card {
  height: clamp(320px, 34vw, 470px);
  min-height: clamp(320px, 34vw, 470px);
  border-color: rgba(143,231,239,.16);
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.spray-foam-media-grid .real-project-card--wide {
  height: clamp(350px, 38vw, 530px);
  min-height: clamp(350px, 38vw, 530px);
}
.spray-foam-media-grid .real-project-card::after {
  background:
    linear-gradient(180deg, rgba(2,7,11,0) 50%, rgba(2,7,11,.10) 68%, rgba(2,7,11,.72)),
    radial-gradient(circle at 14% 12%, rgba(21,205,217,.07), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(245,196,67,.05), transparent 32%);
}
.spray-foam-media-grid .real-project-card img,
.spray-foam-media-grid .real-project-card video {
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background:
    radial-gradient(520px 320px at 50% 50%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(145deg, #061018, #0B202B);
  filter: saturate(1.08) contrast(1.04) brightness(1.08);
}
.spray-foam-added-gallery .real-project-card::after {
  background:
    linear-gradient(180deg, rgba(2,7,11,0) 58%, rgba(2,7,11,.08) 72%, rgba(2,7,11,.56)),
    radial-gradient(circle at 14% 12%, rgba(21,205,217,.045), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(245,196,67,.035), transparent 32%);
}
html.js .spray-foam-added-gallery .fade-up,
.spray-foam-added-gallery .fade-up {
  opacity: 1 !important;
  transform: none !important;
}
.spray-foam-added-gallery .real-project-card img {
  filter: saturate(1.12) contrast(1.03) brightness(1.24);
}
.spray-foam-added-gallery .real-project-card:hover img {
  filter: saturate(1.16) contrast(1.05) brightness(1.3);
}
@media (max-width: 1024px) {
  .page-banner--media .page-banner-grid {
    grid-template-columns: 1fr;
  }
  .equipment-showcase {
    grid-template-columns: 1fr;
  }
  .industrial-foam-grid {
    grid-template-columns: 1fr;
  }
  .industrial-foam-card--after {
    transform: none;
  }
  .spray-foam-hero-card,
  .spray-foam-process-photo,
  .spray-foam-feature-photo {
    min-height: clamp(300px, 62vw, 460px);
  }
  .mobile-home-foam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .spray-foam-info-grid {
    grid-template-columns: 1fr;
  }
  .spray-foam-info-card img {
    height: auto;
    max-height: none;
  }
  .equipment-capability-grid,
  .equipment-photo-grid {
    grid-template-columns: 1fr;
  }
  .about-equipment-feature {
    grid-template-columns: 1fr;
  }
  .equipment-photo-card--feature,
  .equipment-photo-card--vertical {
    grid-row: auto;
    grid-column: auto;
  }
  .equipment-photo-card {
    min-height: 360px;
  }
  .industrial-foam-showcase {
    grid-template-columns: 1fr;
  }
  .industrial-foam-card,
  .industrial-foam-card--after {
    min-height: 360px;
  }
  .spray-foam-media-grid {
    grid-template-columns: 1fr;
  }
  .mobile-home-foam-grid {
    grid-template-columns: 1fr;
  }
  .mobile-home-foam-grid .real-project-card {
    height: 470px;
    min-height: 470px;
  }
  .spray-foam-media-grid .real-project-card,
  .spray-foam-media-grid .real-project-card--wide {
    grid-column: auto;
    height: 360px;
    min-height: 360px;
  }
}
@media (max-width: 520px) {
  .spray-foam-hero-card,
  .spray-foam-process-photo,
  .spray-foam-feature-photo {
    min-height: 320px;
    border-radius: 22px;
  }
  .spray-foam-hero-card figcaption,
  .spray-foam-process-photo figcaption,
  .spray-foam-feature-photo figcaption,
  .spray-foam-media-grid .real-project-card figcaption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
  }
}
.slope-line {
  position: absolute;
  z-index: 3;
  left: 17%;
  right: 18%;
  top: 48%;
  height: 4px;
  transform: rotate(-11deg);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-400), var(--turq-300));
  box-shadow: 0 0 18px rgba(21,205,217,.28);
}
.water-basin {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  transform: perspective(700px) rotateX(58deg) rotateZ(-5deg);
  background: radial-gradient(ellipse, rgba(143,231,239,.75), rgba(21,205,217,.22) 55%, transparent 72%);
}
.wb-1 { width: 150px; height: 82px; left: 24%; top: 39%; }
.wb-2 { width: 116px; height: 58px; right: 20%; top: 58%; }
.roof-drain,
.scupper,
.flow-arrow {
  position: absolute;
  z-index: 6;
  color: #07101A;
  background: linear-gradient(90deg, #8FE7EF, #FFFFFF);
  border-radius: 999px;
  padding: .55rem .75rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.roof-drain { right: 16%; top: 35%; }
.scupper { left: 14%; bottom: 18%; background: linear-gradient(90deg, var(--gold-400), #FFFFFF); }
.flow-arrow {
  color: var(--turq-300);
  background: rgba(7,16,26,.78);
  border: 1px solid rgba(143,231,239,.25);
  font-size: 1.2rem;
  padding: .25rem .65rem;
}
.fa-1 { top: 43%; right: 35%; }
.fa-2 { bottom: 29%; left: 34%; }

.flat-weather {
  background:
    radial-gradient(900px 500px at 48% 0%, rgba(21,205,217,.17), transparent 62%),
    radial-gradient(760px 420px at 100% 20%, rgba(245,196,67,.1), transparent 70%),
    linear-gradient(180deg, #0C1B25 0%, #07101A 100%);
}
.flat-final-callout {
  background:
    radial-gradient(560px 280px at 86% 12%, rgba(192,207,214,.16), transparent 70%),
    radial-gradient(520px 260px at 0% 100%, rgba(21,205,217,.15), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
}

@media (max-width: 1100px) {
  .commercial-system-details .commercial-system-grid {
    grid-template-columns: 1fr;
  }
  .flat-hero-grid,
  .flat-coating-grid,
  .flat-drainage-grid {
    grid-template-columns: 1fr;
  }
  .flat-hero h1 { max-width: 14ch; }
  .flat-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flat-system-bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "foam"
      "bur"
      "restore";
  }
  .bur-compilation-showcase {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .flat-trust,
  .flat-service-grid,
  .coating-comparison {
    grid-template-columns: 1fr;
  }
  .flat-roof-visual,
  .flat-coating-visual,
  .flat-drainage-visual {
    min-height: 360px;
  }
  .flat-drainage-photo {
    height: 380px;
    min-height: 380px;
  }
  .flat-system-photo,
  .commercial-system-photo {
    height: 260px;
  }
  .bur-compilation-showcase figure {
    min-height: 360px;
  }
  .diagnostic-row {
    grid-template-columns: 1fr;
  }
  .pond-mark {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: inline-flex;
    margin: .75rem;
    max-width: calc(100% - 1.5rem);
  }
  .hvac {
    width: 66px;
    height: 46px;
  }
  .hvac-1 { left: 24%; }
  .hvac-2 { right: 14%; }
}
@media (max-width: 540px) {
  .flat-hero {
    padding-top: 3rem;
  }
  .flat-hero h1 {
    font-size: clamp(2rem, 12.5vw, 3.25rem);
    letter-spacing: -.055em;
  }
  .flat-sun {
    width: 138px;
    height: 138px;
    right: 2%;
    top: 8%;
  }
  .flat-roof-visual,
  .flat-coating-visual,
  .flat-drainage-visual {
    min-height: 310px;
  }
  .flat-drainage-photo {
    height: 330px;
    min-height: 330px;
  }
  .flat-system-photo,
  .flat-system-photo--short,
  .commercial-system-photo {
    height: 220px;
  }
  .bur-compilation-showcase figure {
    min-height: 300px;
  }
  .rp-main { top: 38%; }
  .rp-coating { top: 29%; }
  .hvac { display: none; }
  .drain-1 { top: 47%; left: 58%; }
  .drain-2 { top: 64%; left: 26%; }
  .cool-label {
    left: .75rem;
    right: .75rem;
    text-align: center;
  }
  .roof-drain,
  .scupper {
    font-size: .68rem;
  }
  .flat-hero .cta-row .btn,
  .flat-final-callout + .cta-strip .actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ROOF REPAIR PAGE */
.repair-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(820px 500px at 80% 8%, rgba(245,196,67,.16), transparent 68%),
    radial-gradient(760px 460px at 10% 10%, rgba(21,205,217,.16), transparent 70%),
    linear-gradient(180deg, #07101A 0%, #0B1B27 52%, #060E16 100%);
}
.repair-storm {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(10,29,43,.96), rgba(7,16,26,.9) 56%, rgba(6,14,22,.98)),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px);
}
.repair-cloud {
  position: absolute;
  width: clamp(250px, 38vw, 560px);
  height: clamp(130px, 19vw, 270px);
  right: 5%;
  top: 11%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 55%, rgba(143,231,239,.22) 0 24%, transparent 25%),
    radial-gradient(circle at 45% 35%, rgba(192,207,214,.26) 0 34%, transparent 35%),
    radial-gradient(circle at 68% 58%, rgba(245,196,67,.13) 0 28%, transparent 29%),
    linear-gradient(180deg, rgba(67,95,106,.32), rgba(7,16,26,.02));
  filter: blur(.2px);
}
.repair-bolt {
  position: absolute;
  z-index: -1;
  width: 70px;
  height: 170px;
  clip-path: polygon(46% 0, 100% 0, 62% 42%, 92% 42%, 24% 100%, 43% 54%, 10% 54%);
  background: linear-gradient(180deg, #FFE57E, var(--gold-400), transparent);
  filter: drop-shadow(0 0 18px rgba(245,196,67,.42));
  opacity: .82;
}
.rb-1 { right: 24%; top: 25%; transform: rotate(8deg); }
.rb-2 { right: 8%; top: 36%; transform: rotate(-9deg) scale(.7); opacity: .45; }
.repair-mountains {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -2px;
  height: 28%;
  background:
    linear-gradient(135deg, transparent 0 22%, rgba(31,79,87,.74) 22% 44%, transparent 44% 100%) 0 100% / 45% 90% no-repeat,
    linear-gradient(145deg, transparent 0 26%, rgba(10,42,56,.92) 26% 54%, transparent 54% 100%) 32% 100% / 48% 100% no-repeat,
    linear-gradient(132deg, transparent 0 32%, rgba(65,62,64,.8) 32% 57%, transparent 57% 100%) 74% 100% / 44% 82% no-repeat;
  opacity: .68;
}
.repair-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(370px, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.repair-hero h1 {
  max-width: 13ch;
  margin: .8rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 7vw, 6.8rem);
  line-height: .9;
  letter-spacing: -.07em;
  color: #fff;
  text-shadow: 0 24px 70px rgba(0,0,0,.48);
}
.repair-hero .lede {
  max-width: 68ch;
  color: rgba(255,255,255,.78);
}
.repair-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.25rem;
}
.repair-trust div {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(143,231,239,.18);
}
.repair-trust strong {
  display: block;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
}
.repair-trust span {
  display: block;
  margin-top: .35rem;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.repair-roof-visual {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.2);
  background:
    radial-gradient(360px 240px at 78% 16%, rgba(245,196,67,.16), transparent 70%),
    linear-gradient(180deg, rgba(15,49,63,.88), rgba(7,16,26,.94));
  box-shadow: 0 36px 90px -48px rgba(0,0,0,.85);
}
.repair-roof-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(7,16,26,.56)),
    repeating-linear-gradient(120deg, rgba(143,231,239,.06) 0 1px, transparent 1px 36px);
}
.repair-roof-surface {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 36%;
  height: 42%;
  border-radius: 20px;
  transform: perspective(760px) rotateX(58deg) rotateZ(-6deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 28% 74%, rgba(0,0,0,.1)),
    repeating-linear-gradient(90deg, #252F38 0 38px, #43535E 38px 76px);
  border: 1px solid rgba(143,231,239,.2);
  box-shadow: 0 32px 48px rgba(0,0,0,.32);
}
.repair-patch {
  position: absolute;
  z-index: 5;
  padding: .62rem .76rem;
  border-radius: 999px;
  color: #07101A;
  background: linear-gradient(90deg, var(--gold-400), #FFE07A);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.75);
}
.patch-1 { left: 10%; top: 18%; }
.patch-2 { right: 7%; bottom: 12%; background: linear-gradient(90deg, var(--turq-300), #FFFFFF); }
.crew-card {
  position: absolute;
  z-index: 6;
  max-width: 205px;
  padding: .9rem 1rem;
  border-radius: 18px;
  color: #fff;
  background: rgba(7,16,26,.86);
  border: 1px solid rgba(143,231,239,.24);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.82);
}
.crew-card strong {
  display: block;
  color: var(--turq-300);
  font-family: var(--font-display);
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crew-card span {
  display: block;
  margin-top: .3rem;
  color: rgba(255,255,255,.72);
  font-size: .83rem;
  line-height: 1.35;
}
.crew-1 { left: 8%; bottom: 8%; }
.crew-2 { right: 8%; top: 13%; border-color: rgba(245,196,67,.3); }
.water-line {
  position: absolute;
  z-index: 4;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(143,231,239,.88), transparent);
  transform: rotate(-18deg);
  box-shadow: 0 0 18px rgba(21,205,217,.42);
}
.wl-1 { left: 22%; right: 28%; top: 47%; }
.wl-2 { left: 15%; right: 38%; top: 58%; }

.repair-intro {
  position: relative;
  overflow: hidden;
}
.repair-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 320px at 8% 0%, rgba(21,205,217,.1), transparent 70%),
    radial-gradient(560px 300px at 92% 6%, rgba(245,196,67,.09), transparent 70%);
  pointer-events: none;
}
.repair-urgent-card {
  display: grid;
  gap: .8rem;
  padding: 1.25rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(260px 140px at 90% 0%, rgba(245,196,67,.12), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F8FBFC);
  border: 1px solid rgba(11,124,134,.14);
  box-shadow: 0 26px 72px -52px rgba(7,16,26,.34);
}
.repair-urgent-card div {
  padding: .9rem 1rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(11,124,134,.1);
}
.repair-urgent-card strong {
  display: block;
  color: var(--ink-950);
  font-family: var(--font-display);
}
.repair-urgent-card span {
  display: block;
  margin-top: .25rem;
  color: var(--text-dark-2);
  font-size: .9rem;
}

.repair-leak-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 380px at 12% 0%, rgba(21,205,217,.16), transparent 70%),
    radial-gradient(760px 380px at 92% 8%, rgba(245,196,67,.12), transparent 70%),
    linear-gradient(180deg, #07101A, #0A1822);
}
.repair-leak-grid {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.repair-leak-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.18);
  background:
    radial-gradient(420px 220px at 60% 15%, rgba(245,196,67,.15), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
  box-shadow: 0 28px 70px -48px rgba(0,0,0,.85);
}
.leak-plane {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 28%;
  height: 44%;
  border-radius: 22px;
  transform: perspective(720px) rotateX(58deg) rotateZ(-6deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 30% 72%, rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, #9BAAB0 0 48px, #DDE9EB 48px 96px);
  box-shadow: 0 32px 44px rgba(0,0,0,.32);
}
.leak-drop {
  position: absolute;
  z-index: 4;
  width: 92px;
  height: 92px;
  border-radius: 50% 50% 50% 8%;
  transform: rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #FFFFFF, var(--turq-300) 42%, rgba(21,205,217,.2) 70%);
  box-shadow: 0 0 32px rgba(21,205,217,.32);
}
.ld-1 { left: 25%; top: 42%; }
.ld-2 { right: 22%; top: 56%; width: 62px; height: 62px; opacity: .78; }
.leak-scan,
.leak-flash {
  position: absolute;
  z-index: 5;
  padding: .7rem .9rem;
  border-radius: 999px;
  color: #07101A;
  background: linear-gradient(90deg, #8FE7EF, #FFFFFF);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.leak-scan { left: 8%; top: 12%; }
.leak-flash { right: 8%; bottom: 12%; background: linear-gradient(90deg, var(--gold-400), #FFFFFF); }
.leak-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: 1rem;
}
.leak-check-grid span {
  padding: .75rem .85rem;
  border-radius: 999px;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(143,231,239,.16);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
}

.repair-monsoon-section {
  background:
    radial-gradient(900px 500px at 48% 0%, rgba(21,205,217,.17), transparent 62%),
    radial-gradient(760px 420px at 100% 20%, rgba(245,196,67,.1), transparent 70%),
    linear-gradient(180deg, #0C1B25 0%, #07101A 100%);
}
.repair-types-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 340px at 8% 0%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F5FAFC);
}
.repair-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.repair-type-card {
  position: relative;
  min-height: 100%;
  padding: 1.25rem;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(11,124,134,.12);
  box-shadow: 0 20px 48px -42px rgba(7,16,26,.3);
}
.repair-type-card span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: .85rem;
  color: #07101A;
  background: linear-gradient(135deg, var(--turq-300), #FFFFFF);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .78rem;
}
.repair-type-card h3 {
  color: var(--ink-950);
  font-size: 1.08rem;
  margin-bottom: .45rem;
}
.repair-type-card p {
  color: var(--text-dark-2);
  font-size: .9rem;
  margin: 0 0 .8rem;
}
.repair-type-card a {
  color: var(--turq-700);
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.repair-type-card--urgent {
  color: #fff;
  background:
    radial-gradient(260px 160px at 90% 0%, rgba(245,196,67,.18), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
  border-color: rgba(245,196,67,.28);
}
.repair-type-card--urgent h3,
.repair-type-card--urgent p { color: #fff; }
.repair-type-card--urgent span {
  background: linear-gradient(135deg, var(--gold-400), #FFE07A);
}
.repair-type-card--urgent a { color: var(--gold-400); }

.repair-price-section {
  background:
    radial-gradient(760px 380px at 12% 0%, rgba(245,196,67,.12), transparent 70%),
    radial-gradient(760px 380px at 92% 8%, rgba(21,205,217,.14), transparent 70%),
    linear-gradient(180deg, #07101A, #0A1822);
}
.repair-price-callout,
.repair-final-cta {
  background:
    radial-gradient(560px 280px at 86% 12%, rgba(245,196,67,.16), transparent 70%),
    radial-gradient(520px 260px at 0% 100%, rgba(21,205,217,.15), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
}
.repair-process-section {
  background:
    radial-gradient(680px 320px at 8% 0%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(180deg, #FFFFFF, #F5FAFC);
}

@media (max-width: 1100px) {
  .repair-hero-grid,
  .repair-leak-grid {
    grid-template-columns: 1fr;
  }
  .repair-hero h1 { max-width: 14ch; }
  .repair-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .repair-trust,
  .repair-type-grid,
  .leak-check-grid {
    grid-template-columns: 1fr;
  }
  .repair-roof-visual,
  .repair-leak-visual {
    min-height: 360px;
  }
  .crew-card,
  .repair-patch {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: block;
    margin: .75rem;
    max-width: none;
  }
}
@media (max-width: 540px) {
  .repair-hero {
    padding-top: 3rem;
  }
  .repair-hero h1 {
    font-size: clamp(2rem, 12.5vw, 3.25rem);
    letter-spacing: -.055em;
  }
  .repair-cloud {
    width: 240px;
    height: 130px;
    right: -18%;
    top: 9%;
  }
  .repair-bolt { width: 44px; height: 116px; }
  .rb-1 { right: 17%; top: 23%; }
  .rb-2 { right: 2%; top: 35%; }
  .repair-roof-visual,
  .repair-leak-visual {
    min-height: 315px;
  }
  .repair-roof-surface {
    top: 43%;
  }
  .leak-plane {
    top: 36%;
  }
  .leak-drop {
    width: 58px;
    height: 58px;
  }
  .ld-1 { left: 22%; top: 48%; }
  .ld-2 { right: 18%; top: 60%; width: 44px; height: 44px; }
  .repair-hero .cta-row .btn,
  .repair-final-cta .actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Commercial Roofing Page */
.commercial-video-hero {
  position: relative;
  min-height: clamp(680px, 86vh, 920px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: #061019;
}
.commercial-video-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  filter: saturate(1.08) contrast(1.08);
}
.commercial-video-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(720px 420px at 78% 22%, rgba(21,205,217,.18), transparent 62%),
    radial-gradient(760px 440px at 20% 78%, rgba(245,196,67,.16), transparent 64%),
    linear-gradient(90deg, rgba(3,10,16,.92) 0%, rgba(5,14,22,.74) 42%, rgba(5,14,22,.5) 100%),
    linear-gradient(180deg, rgba(3,10,16,.68) 0%, rgba(3,10,16,.24) 36%, rgba(3,10,16,.9) 100%);
}
.commercial-video-hero__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(112deg, transparent 0 45%, rgba(143,231,239,.08) 50%, transparent 56%);
  background-size: 72px 72px, 72px 72px, 100% 100%;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.35) 70%, transparent 100%);
}
.commercial-video-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 150px;
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.commercial-video-hero__copy {
  max-width: 860px;
  padding: clamp(1.25rem, 3vw, 2.4rem);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(7,16,26,.72), rgba(7,16,26,.34)),
    radial-gradient(520px 240px at 100% 0%, rgba(21,205,217,.18), transparent 62%);
  border: 1px solid rgba(143,231,239,.22);
  box-shadow:
    0 38px 110px -52px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(245,196,67,.08);
  backdrop-filter: blur(12px);
}
.commercial-video-hero__copy .eyebrow {
  color: var(--gold-400);
}
.commercial-video-hero__copy h1 {
  max-width: 12ch;
  margin-top: .55rem;
  font-size: clamp(3.35rem, 7vw, 7.4rem);
  line-height: .85;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.commercial-video-hero__copy .lede {
  max-width: 68ch;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  color: rgba(235,246,248,.88);
}
.commercial-video-hero .cta-row {
  margin-top: 1.45rem;
}
.commercial-video-hero .btn--primary {
  box-shadow: var(--shadow-turq);
}
.commercial-video-hero .btn--ghost {
  background: rgba(7,16,26,.46);
  border-color: rgba(143,231,239,.28);
}
.commercial-video-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  height: 120px;
  background: linear-gradient(180deg, transparent, #07101A 78%);
  pointer-events: none;
}
.commercial-hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  padding: 168px 0 100px;
  color: #fff;
  background:
    radial-gradient(circle at 75% 16%, rgba(245,196,67,.26), transparent 24%),
    radial-gradient(circle at 18% 28%, rgba(21,205,217,.24), transparent 28%),
    linear-gradient(135deg, #03060A 0%, #08141A 45%, #111317 100%);
}
.commercial-sky,
.commercial-gridline,
.commercial-mountains,
.commercial-sun {
  position: absolute;
  pointer-events: none;
}
.commercial-sky {
  inset: 0;
  background:
    linear-gradient(115deg, rgba(21,205,217,.13), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 96px);
  opacity: .75;
}
.commercial-sun {
  top: 104px;
  right: clamp(36px, 9vw, 150px);
  width: clamp(170px, 22vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,225,127,.72) 0 9%, rgba(245,196,67,.36) 32%, transparent 68%);
  mix-blend-mode: screen;
}
.commercial-gridline {
  left: -8vw;
  right: -8vw;
  bottom: -140px;
  height: 42vh;
  transform: perspective(650px) rotateX(62deg);
  transform-origin: bottom;
  background:
    linear-gradient(rgba(21,205,217,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,205,217,.18) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .42;
}
.commercial-mountains {
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background:
    linear-gradient(145deg, transparent 0 42%, rgba(245,196,67,.16) 42% 44%, transparent 44%),
    linear-gradient(35deg, transparent 0 49%, rgba(21,205,217,.13) 49% 51%, transparent 51%);
  clip-path: polygon(0 76%, 11% 61%, 20% 72%, 34% 44%, 48% 70%, 60% 48%, 72% 68%, 84% 37%, 100% 64%, 100% 100%, 0 100%);
  opacity: .82;
}
.commercial-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: center;
}
.commercial-hero-grid > *,
.commercial-coating-grid > *,
.commercial-maint-grid > * {
  min-width: 0;
}
.commercial-hero h1,
.commercial-hero-title {
  max-width: 15ch;
  margin: 18px 0 22px;
  color: #fff;
  font-size: clamp(3.35rem, 5.1vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.commercial-hero .lede {
  max-width: 760px;
  color: rgba(255,255,255,.84);
  font-size: clamp(1.03rem, 1.25vw, 1.28rem);
}
.commercial-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin-top: 30px;
}
.commercial-trust > div {
  display: block;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.commercial-trust strong {
  display: block;
  color: var(--gold-400);
  font-size: 1.45rem;
  line-height: 1;
}
.commercial-trust span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.74);
  font-size: .72rem;
}
.commercial-roof-visual {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 14%, rgba(21,205,217,.28), transparent 25%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 34px 90px rgba(0,0,0,.45), 0 0 80px rgba(21,205,217,.18);
}
.commercial-roof-visual::before {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 32px;
  background:
    linear-gradient(120deg, rgba(245,196,67,.18), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 58px);
  transform: perspective(650px) rotateX(58deg) rotateZ(-7deg) translateY(64px);
  transform-origin: center bottom;
}
.commercial-building {
  position: absolute;
  left: 11%;
  right: 10%;
  bottom: 70px;
  height: 112px;
  border-radius: 8px 8px 22px 22px;
  background: linear-gradient(180deg, #27313A, #111920);
  box-shadow: 0 28px 50px rgba(0,0,0,.38);
}
.commercial-building::before {
  content: "";
  position: absolute;
  inset: 18px 24px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 22px, transparent 22px 46px);
  opacity: .55;
}
.commercial-roof-plane {
  position: absolute;
  left: 8%;
  right: 7%;
  top: 188px;
  height: 205px;
  border-radius: 28px 28px 10px 10px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.92), rgba(214,235,238,.72) 48%, rgba(130,153,160,.68)),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(0,0,0,.08) 64px 66px);
  transform: perspective(720px) rotateX(58deg) rotateZ(-7deg);
  box-shadow: 0 24px 58px rgba(0,0,0,.38), 0 0 48px rgba(21,205,217,.2);
}
.commercial-coating-zone {
  position: absolute;
  left: 22%;
  top: 216px;
  width: 44%;
  height: 82px;
  border: 1px solid rgba(21,205,217,.48);
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  transform: perspective(720px) rotateX(58deg) rotateZ(-7deg);
  box-shadow: 0 0 34px rgba(21,205,217,.36);
}
.commercial-hvac {
  position: absolute;
  width: 56px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(180deg, #D7E2E6, #788990);
  box-shadow: 0 12px 20px rgba(0,0,0,.25);
}
.commercial-hvac.ch-1 { top: 205px; right: 22%; }
.commercial-hvac.ch-2 { top: 270px; right: 35%; transform: scale(.84); }
.commercial-marker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(21,205,217,.36);
  border-radius: 999px;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(4,13,18,.78);
  box-shadow: 0 0 28px rgba(21,205,217,.2);
  backdrop-filter: blur(12px);
}
.commercial-marker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 16px rgba(245,196,67,.85);
}
.commercial-marker.cm-1 { left: 9%; top: 128px; }
.commercial-marker.cm-2 { right: 8%; top: 118px; }
.commercial-intro {
  background:
    radial-gradient(circle at 18% 20%, rgba(21,205,217,.08), transparent 26%),
    linear-gradient(180deg, #fff, #F5FAFC);
}
.commercial-investment-card {
  padding: clamp(28px, 4vw, 46px);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 16%, rgba(245,196,67,.28), transparent 26%),
    linear-gradient(145deg, #061018, #111820);
  box-shadow: 0 24px 54px rgba(0,0,0,.16);
}
.commercial-investment-card h3 {
  margin-top: 0;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  letter-spacing: -.04em;
}
.commercial-investment-card p,
.commercial-investment-card li {
  color: rgba(255,255,255,.76);
}
.commercial-investment-card .chk::before {
  color: var(--gold-400);
}
.commercial-property-grid,
.commercial-system-grid,
.commercial-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.commercial-property-grid > *,
.commercial-system-grid > *,
.commercial-trust-grid > * {
  min-width: 0;
}
.commercial-property-card {
  width: 100%;
  min-height: 230px;
  padding: 26px;
  border: 1px solid rgba(12, 31, 37, .09);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,252,253,.92));
  box-shadow: 0 18px 42px rgba(7, 19, 24, .08);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.commercial-property-card:hover {
  transform: translateY(-5px);
  border-color: rgba(21,205,217,.32);
  box-shadow: 0 24px 54px rgba(7, 19, 24, .13);
}
.commercial-property-card h3 {
  margin: 14px 0 10px;
  color: var(--ink-950);
  font-size: 1.25rem;
}
.commercial-property-card p {
  margin: 0;
  color: var(--text-dark-2);
}
.commercial-property-card .card-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(145deg, var(--turq-500), var(--turq-700));
  box-shadow: 0 12px 28px rgba(21,205,217,.22);
}
.commercial-property-card--cta {
  color: #fff;
  background:
    radial-gradient(circle at 80% 16%, rgba(245,196,67,.30), transparent 26%),
    linear-gradient(145deg, #07121A, #111B24);
}
.commercial-property-card--cta h3,
.commercial-property-card--cta p {
  color: #fff;
}
.commercial-systems-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(21,205,217,.15), transparent 25%),
    linear-gradient(180deg, #061018, #020406);
}
.commercial-system-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.commercial-system-panel {
  position: relative;
  min-height: 250px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.commercial-system-panel::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--turq-500), var(--gold-400));
  opacity: .9;
}
.commercial-system-panel h3 {
  margin-top: 0;
  color: #fff;
  font-size: 1.4rem;
}
.commercial-system-panel p {
  color: rgba(255,255,255,.72);
}
.commercial-system-photo {
  position: relative;
  z-index: 1;
  height: clamp(190px, 18vw, 280px);
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(143,231,239,.18);
  background: #07101A;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
}
.commercial-system-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background:
    radial-gradient(420px 260px at 50% 50%, rgba(21,205,217,.08), transparent 70%),
    #07101A;
  filter: saturate(1.08) contrast(1.04) brightness(1.05);
}
.commercial-system-photo figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: .52rem .68rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(2,7,11,.78);
  backdrop-filter: blur(12px);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
}
.commercial-system-details .commercial-system-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.commercial-system-details .commercial-system-panel {
  min-height: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-color: rgba(11,124,134,.16);
  background:
    radial-gradient(360px 220px at 90% 0%, rgba(21,205,217,.10), transparent 70%),
    linear-gradient(180deg, #102A35, #07101A);
  box-shadow: 0 24px 54px rgba(7, 19, 24, .16);
}
.commercial-system-details .commercial-system-panel h3 {
  margin-top: .2rem;
}
.commercial-system-details .commercial-system-panel p {
  color: rgba(255,255,255,.76);
}
.commercial-coatings-section {
  background:
    radial-gradient(circle at 18% 14%, rgba(245,196,67,.10), transparent 24%),
    linear-gradient(180deg, #F7FBFC, #fff);
}
.commercial-coating-grid,
.commercial-maint-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
}
.commercial-coating-visual {
  position: relative;
  min-height: 520px;
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(circle at 65% 18%, rgba(245,196,67,.32), transparent 22%),
    linear-gradient(145deg, #071018, #16212A);
  box-shadow: 0 26px 70px rgba(3, 14, 19, .2);
}
.cc-roof {
  position: absolute;
  left: 9%;
  right: 8%;
  bottom: 104px;
  height: 250px;
  border-radius: 34px 34px 12px 12px;
  background:
    linear-gradient(110deg, #F9FFFF, #DEEDF0 46%, #93A8AD),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(0,0,0,.075) 68px 70px);
  transform: perspective(760px) rotateX(57deg) rotateZ(-8deg);
  box-shadow: 0 30px 66px rgba(0,0,0,.34), 0 0 52px rgba(21,205,217,.2);
}
.cc-white {
  position: absolute;
  left: 22%;
  right: 20%;
  bottom: 214px;
  height: 72px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  transform: perspective(760px) rotateX(57deg) rotateZ(-8deg);
  box-shadow: 0 0 42px rgba(255,255,255,.52), 0 0 42px rgba(21,205,217,.34);
}
.cc-label {
  position: absolute;
  left: 34px;
  top: 32px;
  max-width: 280px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  color: rgba(255,255,255,.82);
  background: rgba(4, 14, 19, .72);
  backdrop-filter: blur(14px);
}
.cc-label strong {
  display: block;
  color: #fff;
  font-size: 1.1rem;
}
.cc-meter {
  position: absolute;
  right: 30px;
  bottom: 34px;
  width: min(260px, calc(100% - 60px));
  padding: 18px;
  border-radius: 20px;
  color: #fff;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.12);
}
.cc-meter::before {
  content: "";
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--turq-500), var(--gold-400));
  box-shadow: 0 0 24px rgba(21,205,217,.34);
}
.cc-meter::after {
  display: block;
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cc-meter.m1::after { content: "Waterproofing"; }
.cc-meter.m2 {
  bottom: 112px;
  right: 58px;
  width: 210px;
}
.cc-meter.m2::after { content: "Cool roof performance"; }
.commercial-maintenance-section {
  background: linear-gradient(180deg, #081018, #030507);
}
.commercial-maint-visual {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 18%, rgba(21,205,217,.20), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
}
.maint-roof {
  position: absolute;
  inset: 105px 52px 92px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(178,199,206,.62)),
    repeating-linear-gradient(90deg, transparent 0 55px, rgba(0,0,0,.08) 55px 57px),
    repeating-linear-gradient(0deg, transparent 0 50px, rgba(0,0,0,.06) 50px 52px);
  transform: perspective(760px) rotateX(56deg) rotateZ(-7deg);
  box-shadow: 0 28px 62px rgba(0,0,0,.38);
}
.maint-route {
  position: absolute;
  left: 24%;
  right: 18%;
  top: 236px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-400), var(--turq-500));
  transform: rotate(-8deg);
  box-shadow: 0 0 22px rgba(245,196,67,.5);
}
.maint-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 4px solid #071018;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 8px rgba(245,196,67,.18), 0 0 26px rgba(245,196,67,.5);
}
.maint-pin {
  color: transparent;
}
.maint-pin.mp-1 { left: 24%; top: 204px; }
.maint-pin.mp-2 { left: 48%; top: 235px; background: var(--turq-500); box-shadow: 0 0 0 8px rgba(21,205,217,.16), 0 0 26px rgba(21,205,217,.5); }
.maint-pin.mp-3 { right: 22%; top: 177px; }
.commercial-weather {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 20%, rgba(21,205,217,.13), transparent 25%),
    radial-gradient(circle at 85% 16%, rgba(245,196,67,.12), transparent 27%),
    linear-gradient(180deg, #fff, #F5FAFC);
}
.commercial-trust-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(21,205,217,.14), transparent 23%),
    linear-gradient(180deg, #061018, #020406);
}
.commercial-trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.trust-chip {
  padding: 23px 24px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.trust-chip::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 11px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--turq-500), var(--gold-400));
  box-shadow: 0 0 18px rgba(21,205,217,.42);
}
.commercial-final-callout {
  background:
    radial-gradient(circle at 70% 0%, rgba(245,196,67,.22), transparent 30%),
    radial-gradient(circle at 20% 20%, rgba(21,205,217,.20), transparent 28%),
    linear-gradient(145deg, #050B10, #101820);
}

@media (max-width: 1100px) {
  .commercial-hero-grid,
  .commercial-coating-grid,
  .commercial-maint-grid {
    grid-template-columns: 1fr;
  }
  .commercial-roof-visual,
  .commercial-coating-visual,
  .commercial-maint-visual {
    min-height: 500px;
  }
  .commercial-property-grid,
  .commercial-system-grid,
  .commercial-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .commercial-video-hero {
    min-height: 780px;
    align-items: end;
  }
  .commercial-video-hero__media {
    object-position: center center;
    transform: scale(1.04);
  }
  .commercial-video-hero__overlay {
    background:
      radial-gradient(420px 300px at 70% 22%, rgba(21,205,217,.16), transparent 62%),
      radial-gradient(520px 300px at 16% 78%, rgba(245,196,67,.14), transparent 62%),
      linear-gradient(180deg, rgba(3,10,16,.78) 0%, rgba(3,10,16,.52) 42%, rgba(3,10,16,.96) 100%),
      linear-gradient(90deg, rgba(3,10,16,.88), rgba(3,10,16,.5));
  }
  .commercial-video-hero__content {
    padding-top: 132px;
    padding-bottom: 4.25rem;
  }
  .commercial-video-hero__copy {
    border-radius: 26px;
    padding: 1.15rem;
  }
  .commercial-video-hero__copy h1 {
    max-width: 11ch;
    font-size: clamp(2.75rem, 12vw, 4.15rem);
    line-height: .9;
  }
  .commercial-video-hero__copy .lede {
    font-size: 1.02rem;
  }
  .commercial-hero {
    min-height: auto;
    padding: 138px 0 76px;
  }
  .commercial-hero h1,
  .commercial-hero-title {
    max-width: 12ch;
    font-size: clamp(2.75rem, 12vw, 4.2rem);
    line-height: .92;
  }
  .commercial-trust,
  .commercial-property-grid,
  .commercial-system-grid,
  .commercial-trust-grid {
    grid-template-columns: 1fr;
  }
  .commercial-system-details .commercial-system-grid {
    grid-template-columns: 1fr;
  }
  .commercial-roof-visual,
  .commercial-coating-visual,
  .commercial-maint-visual {
    min-height: 420px;
    border-radius: 28px;
  }
  .commercial-roof-plane {
    left: 4%;
    right: 3%;
    top: 168px;
  }
  .commercial-marker {
    font-size: .68rem;
    padding: 8px 10px;
  }
  .commercial-marker.cm-1 { left: 16px; top: 82px; }
  .commercial-marker.cm-2 { right: 14px; top: 130px; }
  .commercial-building {
    left: 7%;
    right: 7%;
    bottom: 54px;
  }
  .commercial-coating-zone,
  .cc-white {
    display: none;
  }
  .maint-roof {
    inset: 95px 24px 90px;
  }
}
@media (max-width: 540px) {
  .commercial-video-hero .cta-row {
    align-items: stretch;
  }
  .commercial-video-hero .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .commercial-hero .badge {
    max-width: 100%;
    white-space: normal;
  }
  .commercial-hero .cta-row,
  .commercial-final-callout .cta-actions {
    align-items: stretch;
  }
  .commercial-hero .btn,
  .commercial-final-callout .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .commercial-final-callout + .cta-strip > *,
  .commercial-final-callout + .cta-strip .actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .commercial-final-callout + .cta-strip h2,
  .commercial-final-callout + .cta-strip p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .commercial-final-callout + .cta-strip .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .commercial-roof-visual,
  .commercial-coating-visual,
  .commercial-maint-visual {
    min-height: 360px;
  }
  .commercial-roof-visual::before {
    inset: 22px;
  }
  .commercial-roof-plane {
    top: 142px;
    height: 170px;
  }
  .commercial-hvac {
    width: 42px;
    height: 27px;
  }
  .cc-label {
    left: 18px;
    right: 18px;
    top: 18px;
    max-width: none;
  }
  .cc-roof {
    left: 10%;
    right: 10%;
    bottom: 70px;
    height: 210px;
  }
  .commercial-property-card,
  .commercial-system-panel,
  .trust-chip {
    border-radius: 22px;
  }
  .commercial-property-card .btn {
    max-width: 100%;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
}

/* End Commercial Roofing Page */

/* Residential Roofing Page */
.residential-hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  padding: 168px 0 96px;
  color: #fff;
  background:
    radial-gradient(circle at 76% 18%, rgba(245,196,67,.28), transparent 23%),
    radial-gradient(circle at 18% 24%, rgba(21,205,217,.22), transparent 30%),
    linear-gradient(135deg, #061018 0%, #0E1B22 47%, #140E0A 100%);
}
.residential-sky,
.residential-sun,
.residential-mountains,
.residential-glow {
  position: absolute;
  pointer-events: none;
}
.residential-sky {
  inset: 0;
  background:
    linear-gradient(110deg, rgba(21,205,217,.10), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 86px);
}
.residential-sun {
  top: 98px;
  right: clamp(34px, 8vw, 140px);
  width: clamp(170px, 21vw, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,146,.82) 0 10%, rgba(245,196,67,.34) 34%, transparent 69%);
  filter: blur(.4px);
  mix-blend-mode: screen;
}
.residential-mountains {
  left: 0;
  right: 0;
  bottom: 0;
  height: 210px;
  background:
    linear-gradient(145deg, transparent 0 44%, rgba(245,196,67,.18) 44% 46%, transparent 46%),
    linear-gradient(35deg, transparent 0 51%, rgba(21,205,217,.14) 51% 53%, transparent 53%);
  clip-path: polygon(0 77%, 9% 55%, 18% 70%, 29% 42%, 43% 72%, 55% 48%, 66% 66%, 78% 35%, 90% 62%, 100% 46%, 100% 100%, 0 100%);
  opacity: .9;
}
.residential-glow {
  left: 7%;
  bottom: 9%;
  width: 36vw;
  height: 36vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,205,217,.16), transparent 68%);
  filter: blur(14px);
}
.residential-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  gap: clamp(38px, 6vw, 90px);
  align-items: center;
}
.residential-hero-grid > * {
  min-width: 0;
}
.residential-hero h1 {
  max-width: 12ch;
  margin: 18px 0 22px;
  color: #fff;
  font-size: clamp(3.5rem, 6.25vw, 6.8rem);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.residential-hero .lede {
  max-width: 760px;
  color: rgba(255,255,255,.84);
  font-size: clamp(1.02rem, 1.2vw, 1.22rem);
}
.residential-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin-top: 30px;
}
.residential-trust > div {
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.residential-trust strong {
  display: block;
  color: var(--gold-400);
  font-size: 1.38rem;
  line-height: 1;
}
.residential-trust span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.74);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.residential-home-visual {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 14%, rgba(245,196,67,.24), transparent 25%),
    radial-gradient(circle at 18% 24%, rgba(21,205,217,.24), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 34px 90px rgba(0,0,0,.43), 0 0 70px rgba(21,205,217,.16);
}
.residential-home-visual::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -10px;
  height: 180px;
  background: linear-gradient(180deg, rgba(245,196,67,.16), rgba(194,74,31,.22));
  clip-path: polygon(0 60%, 12% 45%, 24% 64%, 38% 35%, 51% 62%, 65% 42%, 78% 66%, 90% 38%, 100% 56%, 100% 100%, 0 100%);
}
.res-home-body {
  position: absolute;
  left: 14%;
  right: 12%;
  bottom: 98px;
  height: 170px;
  border-radius: 18px 18px 28px 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 76px),
    linear-gradient(180deg, #F8F1E7, #D9C4AD);
  box-shadow: 0 32px 54px rgba(0,0,0,.32);
}
.res-roof {
  position: absolute;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(122,31,38,.52) 0 13px, rgba(194,74,31,.55) 13px 25px),
    linear-gradient(135deg, #7A1F26, #C24A1F);
  box-shadow: 0 18px 36px rgba(0,0,0,.30), 0 0 34px rgba(245,196,67,.18);
}
.res-roof--main {
  left: 8%;
  right: 8%;
  bottom: 240px;
  height: 118px;
  clip-path: polygon(6% 92%, 50% 0, 94% 92%, 100% 100%, 0 100%);
}
.res-roof--porch {
  left: 29%;
  right: 22%;
  bottom: 218px;
  height: 88px;
  clip-path: polygon(5% 88%, 50% 6%, 95% 88%, 100% 100%, 0 100%);
}
.res-window {
  position: absolute;
  bottom: 142px;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  border: 3px solid rgba(255,255,255,.62);
  background: linear-gradient(145deg, rgba(21,205,217,.70), rgba(245,196,67,.22));
  box-shadow: 0 0 24px rgba(21,205,217,.26);
}
.res-window.w1 { left: 26%; }
.res-window.w2 { right: 24%; }
.res-cactus {
  position: absolute;
  bottom: 82px;
  width: 18px;
  height: 88px;
  border-radius: 999px;
  background: linear-gradient(180deg, #38C6B9, #0B7C86);
  box-shadow: 0 0 22px rgba(21,205,217,.22);
}
.res-cactus::before,
.res-cactus::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 45px;
  border-radius: 999px;
  border: 6px solid #15CDD9;
  border-bottom: 0;
}
.res-cactus::before { left: -22px; top: 24px; }
.res-cactus::after { right: -22px; top: 36px; }
.res-cactus.c1 { left: 8%; transform: scale(.86); }
.res-cactus.c2 { right: 8%; transform: scale(.72); }
.res-visual-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(21,205,217,.34);
  border-radius: 999px;
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(4,13,18,.78);
  box-shadow: 0 0 26px rgba(21,205,217,.22);
  backdrop-filter: blur(12px);
}
.res-visual-tag::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 16px rgba(245,196,67,.82);
}
.res-visual-tag.tag1 { left: 28px; top: 28px; }
.res-visual-tag.tag2 { right: 24px; top: 88px; }
.residential-intro {
  background:
    radial-gradient(circle at 18% 22%, rgba(21,205,217,.08), transparent 26%),
    linear-gradient(180deg, #fff, #F7FBFC);
}
.residential-care-card {
  padding: clamp(28px, 4vw, 46px);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 14%, rgba(245,196,67,.26), transparent 26%),
    linear-gradient(145deg, #07121A, #111B24);
  box-shadow: 0 24px 54px rgba(0,0,0,.16);
}
.residential-care-card strong,
.residential-care-card span {
  display: block;
}
.residential-care-card > div {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.residential-care-card > div:last-child {
  border-bottom: 0;
}
.residential-care-card strong {
  color: #fff;
  font-size: 1.08rem;
}
.residential-care-card span {
  margin-top: 5px;
  color: rgba(255,255,255,.72);
}
.residential-type-grid,
.residential-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.residential-type-grid > *,
.residential-trust-grid > * {
  min-width: 0;
}
.residential-type-card {
  position: relative;
  min-height: 255px;
  padding: 28px;
  border: 1px solid rgba(12,31,37,.09);
  border-radius: 30px;
  color: var(--text-dark);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 8%, rgba(21,205,217,.12), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,252,253,.94));
  box-shadow: 0 18px 42px rgba(7,19,24,.08);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.residential-type-card:hover {
  color: var(--text-dark);
  transform: translateY(-5px);
  border-color: rgba(21,205,217,.32);
  box-shadow: 0 24px 54px rgba(7,19,24,.13);
}
.residential-type-card span {
  color: var(--gold-500);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .14em;
}
.residential-type-card h3 {
  margin: 42px 0 12px;
  color: var(--ink-950);
  font-size: 1.45rem;
}
.residential-type-card p {
  margin: 0;
  color: var(--text-dark-2);
}
.residential-type-card--cta {
  color: #fff;
  background:
    radial-gradient(circle at 82% 12%, rgba(245,196,67,.27), transparent 26%),
    linear-gradient(145deg, #07121A, #111B24);
}
.residential-type-card--cta h3,
.residential-type-card--cta p,
.residential-type-card--cta strong {
  color: #fff;
}
.residential-type-card--cta strong {
  display: inline-flex;
  margin-top: 18px;
  color: var(--turq-300);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.residential-systems-section {
  background:
    radial-gradient(circle at 14% 14%, rgba(21,205,217,.14), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(245,196,67,.12), transparent 27%),
    linear-gradient(180deg, #061018, #020406);
}
.residential-system-stack {
  display: grid;
  gap: 22px;
}
.residential-system-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
  gap: 26px;
  align-items: stretch;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 34px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.residential-system-panel > * {
  min-width: 0;
}
.system-number {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .16em;
}
.residential-system-panel h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -.045em;
}
.residential-system-panel p {
  color: rgba(255,255,255,.76);
}
.mini-list {
  display: grid;
  gap: 10px;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mini-list li {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fff;
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(255,255,255,.055);
}
.mini-list--dark li {
  border-color: rgba(11,124,134,.14);
  color: var(--ink-950);
  background: rgba(255,255,255,.72);
}
.residential-panel-tile { box-shadow: inset 5px 0 0 rgba(194,74,31,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.residential-panel-shingle { box-shadow: inset 5px 0 0 rgba(21,205,217,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.residential-panel-metal { box-shadow: inset 5px 0 0 rgba(245,196,67,.75), inset 0 1px 0 rgba(255,255,255,.08); }
.residential-panel-flat {
  grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr);
  box-shadow: inset 5px 0 0 rgba(255,255,255,.62), inset 0 1px 0 rgba(255,255,255,.08);
}
.residential-system-media {
  display: grid;
  gap: 14px;
}
.residential-system-media figure {
  min-height: 230px;
  border-color: rgba(255,255,255,.13);
  border-radius: 24px;
  box-shadow: 0 24px 54px rgba(0,0,0,.20);
}
.residential-system-media--wide figure {
  min-height: clamp(300px, 28vw, 430px);
}
.residential-system-media--wide figure::after {
  background:
    radial-gradient(circle at 82% 8%, rgba(245,196,67,.12), transparent 28%),
    linear-gradient(180deg, rgba(2,7,10,.01) 58%, rgba(2,7,10,.68));
}
.residential-system-media--wide img {
  object-fit: contain;
  background:
    radial-gradient(420px 240px at 50% 50%, rgba(21,205,217,.08), transparent 70%),
    #07101A;
}
.residential-system-media figcaption {
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  color: var(--gold-400);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.residential-projects-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 14%, rgba(21,205,217,.09), transparent 28%),
    radial-gradient(circle at 88% 7%, rgba(245,196,67,.12), transparent 30%),
    linear-gradient(180deg, #FFFFFF, #F6FBFC);
}
.residential-project-gallery {
  display: grid;
  grid-template-columns: 1.08fr .92fr .92fr;
  gap: 18px;
  align-items: stretch;
}
.res-project-card {
  position: relative;
  min-height: 355px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(12,31,37,.10);
  border-radius: 30px;
  background: #07101A;
  box-shadow: 0 24px 62px rgba(7,19,24,.13);
  isolation: isolate;
}
.res-project-card--wide {
  grid-row: span 2;
  min-height: 728px;
}
.res-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 84% 8%, rgba(245,196,67,.19), transparent 34%),
    linear-gradient(180deg, rgba(2,7,10,.02) 42%, rgba(2,7,10,.82));
  pointer-events: none;
}
.res-project-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(245,196,67,.19);
  border-radius: 22px;
  pointer-events: none;
}
.res-project-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03) brightness(.96);
  transition: transform .34s var(--ease), filter .34s var(--ease);
}
.res-project-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.09) contrast(1.05) brightness(.99);
}
.res-project-card figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  color: #fff;
  background: rgba(4,13,18,.80);
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
  backdrop-filter: blur(12px);
}
.res-project-card figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.res-project-card figcaption strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(.98rem, 1.25vw, 1.18rem);
  line-height: 1.18;
}
.residential-weather {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 20%, rgba(21,205,217,.13), transparent 25%),
    radial-gradient(circle at 85% 16%, rgba(245,196,67,.12), transparent 27%),
    linear-gradient(180deg, #fff, #F5FAFC);
}
.residential-replacement-section {
  background:
    radial-gradient(circle at 82% 14%, rgba(21,205,217,.08), transparent 25%),
    linear-gradient(180deg, #fff, #F7FBFC);
}
.residential-replace-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: start;
}
.residential-replace-grid > * {
  min-width: 0;
}
.residential-process {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.residential-process div {
  padding: 22px;
  border: 1px solid rgba(12,31,37,.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 12%, rgba(245,196,67,.12), transparent 28%),
    #fff;
  box-shadow: 0 16px 38px rgba(7,19,24,.07);
}
.residential-process span {
  display: inline-flex;
  color: var(--turq-700);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .14em;
}
.residential-process strong {
  display: block;
  margin: 10px 0 6px;
  color: var(--ink-950);
  font-size: 1.05rem;
}
.residential-process p {
  margin: 0;
  color: var(--text-dark-2);
  font-size: .95rem;
}
.residential-before-after-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(21,205,217,.15), transparent 25%),
    radial-gradient(circle at 88% 10%, rgba(245,196,67,.13), transparent 28%),
    linear-gradient(180deg, #061018, #020406);
}
.residential-ba-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(470px, 1.18fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.residential-ba-layout h2 {
  color: #fff;
}
.residential-ba-layout p {
  color: rgba(255,255,255,.76);
}
.residential-ba-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.residential-ba-grid .res-project-card {
  min-height: 430px;
}
.residential-trust-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(21,205,217,.14), transparent 23%),
    linear-gradient(180deg, #061018, #020406);
}
.residential-final-callout {
  background:
    radial-gradient(circle at 76% 8%, rgba(245,196,67,.24), transparent 30%),
    radial-gradient(circle at 18% 16%, rgba(21,205,217,.20), transparent 28%),
    linear-gradient(145deg, #050B10, #111B24);
}

@media (max-width: 1100px) {
  .residential-hero-grid,
  .residential-replace-grid {
    grid-template-columns: 1fr;
  }
  .residential-home-visual {
    min-height: 500px;
  }
  .residential-type-grid,
  .residential-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .residential-project-gallery,
  .residential-ba-layout {
    grid-template-columns: 1fr;
  }
  .res-project-card--wide {
    grid-row: auto;
    min-height: 460px;
  }
}
@media (max-width: 820px) {
  .residential-system-panel {
    grid-template-columns: 1fr;
  }
  .residential-ba-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .residential-hero {
    min-height: auto;
    padding: 138px 0 76px;
  }
  .residential-hero h1 {
    max-width: 12ch;
    font-size: clamp(2.85rem, 12.5vw, 4.35rem);
    line-height: .92;
  }
  .residential-trust,
  .residential-type-grid,
  .residential-trust-grid,
  .residential-process {
    grid-template-columns: 1fr;
  }
  .residential-home-visual {
    min-height: 420px;
    border-radius: 28px;
  }
  .res-project-card,
  .res-project-card--wide,
  .residential-ba-grid .res-project-card {
    min-height: 360px;
    border-radius: 24px;
  }
  .res-project-card::after {
    inset: 10px;
    border-radius: 18px;
  }
  .res-project-card figcaption {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 13px;
  }
  .res-roof--main {
    bottom: 218px;
  }
  .res-home-body {
    left: 9%;
    right: 9%;
  }
  .res-visual-tag {
    font-size: .68rem;
    padding: 8px 10px;
  }
  .res-visual-tag.tag1 { left: 16px; top: 18px; }
  .res-visual-tag.tag2 { right: 14px; top: 70px; }
}
@media (max-width: 540px) {
  .residential-hero .badge {
    max-width: 100%;
    white-space: normal;
  }
  .residential-hero .cta-row,
  .residential-final-callout + .cta-strip .actions {
    align-items: stretch;
  }
  .residential-hero .btn,
  .residential-final-callout + .cta-strip .btn,
  .residential-type-card .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .residential-final-callout + .cta-strip > *,
  .residential-final-callout + .cta-strip .actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .residential-final-callout + .cta-strip h2,
  .residential-final-callout + .cta-strip p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .residential-home-visual {
    min-height: 360px;
  }
  .res-home-body {
    bottom: 76px;
    height: 132px;
  }
  .res-roof--main {
    bottom: 190px;
    height: 90px;
  }
  .res-roof--porch {
    bottom: 174px;
    height: 70px;
  }
  .res-window {
    bottom: 110px;
    width: 42px;
    height: 42px;
  }
  .res-cactus {
    bottom: 62px;
    height: 62px;
  }
  .residential-type-card,
  .residential-system-panel,
  .residential-process div {
    border-radius: 22px;
  }
}

/* End Residential Roofing Page */

/* About Us Page */
.about-hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  padding: 168px 0 96px;
  color: #fff;
  background:
    radial-gradient(circle at 74% 18%, rgba(245,196,67,.28), transparent 24%),
    radial-gradient(circle at 20% 28%, rgba(21,205,217,.22), transparent 30%),
    linear-gradient(135deg, #041017 0%, #0C1821 48%, #14100C 100%);
}
.about-sky,
.about-sun,
.about-mountains,
.about-gridline {
  position: absolute;
  pointer-events: none;
}
.about-sky {
  inset: 0;
  background:
    linear-gradient(110deg, rgba(21,205,217,.10), transparent 44%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px);
}
.about-sun {
  top: 98px;
  right: clamp(34px, 8vw, 150px);
  width: clamp(170px, 21vw, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,146,.82) 0 10%, rgba(245,196,67,.34) 34%, transparent 69%);
  mix-blend-mode: screen;
}
.about-gridline {
  left: -8vw;
  right: -8vw;
  bottom: -140px;
  height: 40vh;
  transform: perspective(680px) rotateX(62deg);
  transform-origin: bottom;
  background:
    linear-gradient(rgba(21,205,217,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,205,217,.16) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: .36;
}
.about-mountains {
  left: 0;
  right: 0;
  bottom: 0;
  height: 210px;
  background:
    linear-gradient(145deg, transparent 0 44%, rgba(245,196,67,.16) 44% 46%, transparent 46%),
    linear-gradient(35deg, transparent 0 51%, rgba(21,205,217,.12) 51% 53%, transparent 53%);
  clip-path: polygon(0 77%, 10% 58%, 21% 71%, 34% 43%, 47% 72%, 60% 48%, 73% 67%, 86% 36%, 100% 60%, 100% 100%, 0 100%);
  opacity: .86;
}
.about-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  gap: clamp(38px, 6vw, 90px);
  align-items: center;
}
.about-hero-grid > * {
  min-width: 0;
}
.about-hero h1 {
  max-width: 12ch;
  margin: 18px 0 22px;
  color: #fff;
  font-size: clamp(3.5rem, 6.25vw, 6.8rem);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.about-hero .lede {
  max-width: 780px;
  color: rgba(255,255,255,.84);
  font-size: clamp(1.02rem, 1.2vw, 1.22rem);
}
.about-family-hero,
.about-story-photo {
  position: relative;
  margin: 0;
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 42px;
  overflow: hidden;
  background: #050B12;
  box-shadow: 0 34px 90px rgba(0,0,0,.43), 0 0 70px rgba(21,205,217,.16);
  isolation: isolate;
}
.about-family-hero::before,
.about-story-photo::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  background:
    radial-gradient(circle at 78% 10%, rgba(245,196,67,.22), transparent 34%),
    radial-gradient(circle at 16% 18%, rgba(21,205,217,.20), transparent 36%),
    linear-gradient(180deg, transparent 46%, rgba(2,7,10,.82));
  pointer-events: none;
}
.about-family-hero::after,
.about-story-photo::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border: 1px solid rgba(245,196,67,.20);
  border-radius: 30px;
  pointer-events: none;
  box-shadow: inset 0 0 44px rgba(21,205,217,.08);
}
.about-family-hero img,
.about-story-photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.03) brightness(.98);
}
.about-family-hero figcaption,
.about-story-photo figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 3;
  max-width: none;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(4,13,18,.76);
  box-shadow: 0 18px 42px rgba(0,0,0,.25);
  backdrop-filter: blur(14px);
}
.about-family-hero figcaption span,
.about-story-photo figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.about-family-hero figcaption strong,
.about-story-photo figcaption strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.8vw, 1.48rem);
  line-height: 1.12;
}
.about-crew-visual {
  position: relative;
  min-height: 560px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 42px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 14%, rgba(245,196,67,.26), transparent 24%),
    radial-gradient(circle at 22% 24%, rgba(21,205,217,.24), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 34px 90px rgba(0,0,0,.43), 0 0 70px rgba(21,205,217,.16);
}
.about-crew-visual::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -8px;
  height: 190px;
  background: linear-gradient(180deg, rgba(245,196,67,.13), rgba(194,74,31,.22));
  clip-path: polygon(0 62%, 13% 44%, 25% 65%, 40% 36%, 54% 63%, 68% 42%, 80% 66%, 92% 39%, 100% 56%, 100% 100%, 0 100%);
}
.about-roof-plane {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 118px;
  height: 190px;
  border-radius: 32px 32px 12px 12px;
  background:
    linear-gradient(110deg, #F9FFFF, #DCECEF 48%, #8DA3AA),
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(0,0,0,.08) 64px 66px);
  transform: perspective(720px) rotateX(58deg) rotateZ(-7deg);
  box-shadow: 0 24px 58px rgba(0,0,0,.38), 0 0 48px rgba(21,205,217,.20);
}
.about-drone {
  position: absolute;
  top: 86px;
  left: 50%;
  width: 78px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.74), rgba(21,205,217,.72));
  transform: translateX(-50%);
  box-shadow: 0 0 28px rgba(21,205,217,.45);
}
.about-drone::before,
.about-drone::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255,255,255,.52);
  border-radius: 50%;
}
.about-drone::before { left: -42px; }
.about-drone::after { right: -42px; }
.about-worker {
  position: absolute;
  width: 46px;
  height: 86px;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, var(--gold-400) 0 24%, #17303A 24% 100%);
  box-shadow: 0 16px 24px rgba(0,0,0,.28);
}
.about-worker::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -17px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F1C193;
}
.about-worker.worker-a {
  left: 28%;
  bottom: 186px;
  transform: rotate(-7deg);
}
.about-worker.worker-b {
  right: 26%;
  bottom: 170px;
  transform: scale(.86) rotate(8deg);
}
.about-badge-card {
  position: absolute;
  left: 28px;
  bottom: 34px;
  width: min(310px, calc(100% - 56px));
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(4,13,18,.74);
  backdrop-filter: blur(14px);
}
.about-badge-card strong {
  display: block;
  color: var(--gold-400);
  font-size: 1.7rem;
  letter-spacing: .08em;
}
.about-badge-card span {
  display: block;
  color: rgba(255,255,255,.76);
}
.about-visual-tag,
.story-pin,
.community-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(21,205,217,.34);
  border-radius: 999px;
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(4,13,18,.78);
  box-shadow: 0 0 26px rgba(21,205,217,.22);
  backdrop-filter: blur(12px);
}
.about-visual-tag::before,
.story-pin::before,
.community-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 16px rgba(245,196,67,.82);
}
.about-visual-tag.tag-a { left: 26px; top: 28px; }
.about-visual-tag.tag-b { right: 24px; top: 108px; }
.about-intro-section,
.about-values-section,
.about-materials-section,
.about-community-section {
  background:
    radial-gradient(circle at 18% 22%, rgba(21,205,217,.08), transparent 26%),
    linear-gradient(180deg, #fff, #F7FBFC);
}
.about-family-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(760px 360px at 16% 0%, rgba(21,205,217,.12), transparent 70%),
    radial-gradient(820px 420px at 88% 18%, rgba(245,196,67,.16), transparent 68%),
    linear-gradient(180deg, #FFFFFF, #F6FAFB);
}
.about-family-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12,31,37,.035) 1px, transparent 1px),
    linear-gradient(rgba(12,31,37,.026) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 78%, transparent);
  pointer-events: none;
}
.about-family-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.about-family-grid > * {
  min-width: 0;
}
.about-family-copy h2 {
  max-width: 13ch;
  margin: 14px 0 18px;
  color: var(--ink-950);
  font-size: clamp(2.35rem, 4.8vw, 4.85rem);
  line-height: .92;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.about-family-copy p {
  color: var(--text-dark-2);
  font-size: clamp(1rem, 1.12vw, 1.16rem);
}
.about-family-section .btn--ghost {
  color: var(--ink-950);
  border-color: rgba(12,31,37,.24);
  background: rgba(255,255,255,.72);
}
.about-family-section .btn--ghost:hover,
.about-family-section .btn--ghost:focus-visible {
  color: var(--turq-700);
  border-color: rgba(21,205,217,.52);
  background: #fff;
}
.about-family-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 28px;
}
.about-family-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(12,31,37,.10);
  border-radius: 999px;
  color: var(--ink-950);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  background:
    linear-gradient(90deg, rgba(245,196,67,.14), rgba(21,205,217,.08)),
    rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(7,19,24,.06);
}
.about-family-photo-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
}
.about-family-photo {
  position: relative;
  margin: 0;
  min-height: 292px;
  border: 1px solid rgba(12,31,37,.10);
  border-radius: 28px;
  overflow: hidden;
  background: #061018;
  box-shadow: 0 22px 54px rgba(7,19,24,.12);
  isolation: isolate;
}
.about-family-photo--large {
  grid-row: span 2;
  min-height: 600px;
}
.about-family-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 82% 10%, rgba(245,196,67,.22), transparent 36%),
    linear-gradient(180deg, rgba(2,7,10,.04) 42%, rgba(2,7,10,.76));
  pointer-events: none;
}
.about-family-photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.02);
  transition: transform .32s var(--ease), filter .32s var(--ease);
}
.about-family-photo:hover img {
  transform: scale(1.025);
  filter: saturate(1.08) contrast(1.04);
}
.about-family-photo figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  max-width: none;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(4,13,18,.74);
  backdrop-filter: blur(12px);
}
.about-family-photo figcaption span {
  display: block;
  color: var(--gold-400);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.about-family-photo figcaption strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.15;
}
.about-principle-card {
  padding: clamp(28px, 4vw, 46px);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 14%, rgba(245,196,67,.26), transparent 26%),
    linear-gradient(145deg, #07121A, #111B24);
  box-shadow: 0 24px 54px rgba(0,0,0,.16);
}
.about-principle-card > div {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.about-principle-card > div:last-child {
  border-bottom: 0;
}
.about-principle-card strong,
.about-principle-card span {
  display: block;
}
.about-principle-card strong {
  color: #fff;
  font-size: 1.08rem;
}
.about-principle-card span {
  margin-top: 5px;
  color: rgba(255,255,255,.72);
}
.about-story-section,
.about-choose-section {
  background:
    radial-gradient(circle at 14% 14%, rgba(21,205,217,.14), transparent 24%),
    radial-gradient(circle at 86% 20%, rgba(245,196,67,.12), transparent 27%),
    linear-gradient(180deg, #061018, #020406);
}
.about-story-grid,
.about-materials-grid,
.about-community-grid {
  display: grid;
  grid-template-columns: minmax(420px, .98fr) minmax(0, 1.02fr);
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
}
.about-story-grid > *,
.about-materials-grid > *,
.about-community-grid > * {
  min-width: 0;
}
.about-story-visual,
.about-community-visual {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 18%, rgba(245,196,67,.24), transparent 24%),
    radial-gradient(circle at 20% 24%, rgba(21,205,217,.22), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: 0 26px 70px rgba(3,14,19,.20);
}
.story-roof {
  position: absolute;
  left: 9%;
  right: 8%;
  bottom: 112px;
  height: 230px;
  border-radius: 34px 34px 12px 12px;
  background:
    linear-gradient(110deg, #F9FFFF, #DEEDF0 46%, #93A8AD),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(0,0,0,.075) 68px 70px);
  transform: perspective(760px) rotateX(57deg) rotateZ(-8deg);
  box-shadow: 0 30px 66px rgba(0,0,0,.34), 0 0 52px rgba(21,205,217,.20);
}
.story-coating {
  position: absolute;
  left: 27%;
  right: 24%;
  bottom: 226px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  transform: perspective(760px) rotateX(57deg) rotateZ(-8deg);
  box-shadow: 0 0 42px rgba(255,255,255,.42), 0 0 42px rgba(21,205,217,.32);
}
.story-mountain {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 170px;
  background: linear-gradient(180deg, rgba(245,196,67,.11), rgba(194,74,31,.18));
  clip-path: polygon(0 70%, 16% 45%, 28% 66%, 43% 36%, 57% 65%, 72% 42%, 86% 62%, 100% 46%, 100% 100%, 0 100%);
}
.story-pin.pin-one { left: 24px; top: 28px; }
.story-pin.pin-two { right: 22px; bottom: 44px; }
.about-values-grid,
.about-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.about-values-grid > *,
.about-choose-grid > * {
  min-width: 0;
}
.about-value-card {
  min-height: 248px;
  padding: 28px;
  border: 1px solid rgba(12,31,37,.09);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 8%, rgba(21,205,217,.12), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,252,253,.94));
  box-shadow: 0 18px 42px rgba(7,19,24,.08);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.about-value-card:hover {
  transform: translateY(-5px);
  border-color: rgba(21,205,217,.32);
  box-shadow: 0 24px 54px rgba(7,19,24,.13);
}
.about-value-card span {
  color: var(--gold-500);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .14em;
}
.about-value-card h3 {
  margin: 42px 0 12px;
  color: var(--ink-950);
  font-size: 1.35rem;
}
.about-value-card p {
  margin: 0;
  color: var(--text-dark-2);
}
.about-value-card--cta {
  color: #fff;
  background:
    radial-gradient(circle at 82% 12%, rgba(245,196,67,.27), transparent 26%),
    linear-gradient(145deg, #07121A, #111B24);
}
.about-value-card--cta h3,
.about-value-card--cta p {
  color: #fff;
}
.about-value-card--cta .btn {
  margin-top: 18px;
}
.about-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.about-brand-grid div {
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(12,31,37,.09);
  border-radius: 24px;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-weight: 900;
  text-align: center;
  letter-spacing: .04em;
  background:
    radial-gradient(circle at 80% 16%, rgba(245,196,67,.12), transparent 26%),
    #fff;
  box-shadow: 0 16px 38px rgba(7,19,24,.07);
}
.about-weather {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 20%, rgba(21,205,217,.13), transparent 25%),
    radial-gradient(circle at 85% 16%, rgba(245,196,67,.12), transparent 27%),
    linear-gradient(180deg, #fff, #F5FAFC);
}
.about-choose-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-choose-grid .trust-chip:last-child {
  grid-column: span 2;
}
.about-community-grid {
  grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr);
}
.community-home,
.community-shop,
.community-roof,
.community-road {
  position: absolute;
}
.community-road {
  left: 8%;
  right: 8%;
  bottom: 74px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(21,205,217,.54), rgba(245,196,67,.50));
  box-shadow: 0 0 28px rgba(21,205,217,.24);
}
.community-home {
  left: 13%;
  bottom: 118px;
  width: 170px;
  height: 118px;
  border-radius: 14px 14px 20px 20px;
  background: linear-gradient(180deg, #F8F1E7, #D9C4AD);
}
.community-shop {
  right: 12%;
  bottom: 118px;
  width: 210px;
  height: 136px;
  border-radius: 16px 16px 22px 22px;
  background: linear-gradient(180deg, #DDE9EB, #9CADB2);
}
.community-roof {
  left: 9%;
  right: 10%;
  bottom: 228px;
  height: 82px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(122,31,38,.54) 0 13px, rgba(194,74,31,.58) 13px 25px),
    linear-gradient(135deg, #7A1F26, #C24A1F);
  clip-path: polygon(4% 88%, 50% 0, 96% 88%, 100% 100%, 0 100%);
}
.community-label {
  right: 24px;
  top: 28px;
}
.about-final-callout {
  background:
    radial-gradient(circle at 76% 8%, rgba(245,196,67,.24), transparent 30%),
    radial-gradient(circle at 18% 16%, rgba(21,205,217,.20), transparent 28%),
    linear-gradient(145deg, #050B10, #111B24);
}

@media (max-width: 1100px) {
  .about-hero-grid,
  .about-family-grid,
  .about-story-grid,
  .about-materials-grid,
  .about-community-grid {
    grid-template-columns: 1fr;
  }
  .about-family-photo-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-crew-visual,
  .about-family-hero,
  .about-story-photo,
  .about-story-visual,
  .about-community-visual {
    min-height: 500px;
  }
  .about-family-photo--large {
    min-height: 520px;
  }
  .about-values-grid,
  .about-choose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-choose-grid .trust-chip:last-child {
    grid-column: auto;
  }
}
@media (max-width: 720px) {
  .about-hero {
    min-height: auto;
    padding: 138px 0 76px;
  }
  .about-hero h1 {
    max-width: 12ch;
    font-size: clamp(2.85rem, 12.5vw, 4.35rem);
    line-height: .92;
  }
  .about-values-grid,
  .about-choose-grid,
  .about-brand-grid {
    grid-template-columns: 1fr;
  }
  .about-crew-visual,
  .about-family-hero,
  .about-story-photo,
  .about-story-visual,
  .about-community-visual {
    min-height: 420px;
    border-radius: 28px;
  }
  .about-family-photo-grid {
    grid-template-columns: 1fr;
  }
  .about-family-photo,
  .about-family-photo--large {
    min-height: 390px;
    border-radius: 24px;
  }
  .about-family-copy h2 {
    max-width: 12ch;
    font-size: clamp(2.3rem, 10.5vw, 3.6rem);
  }
  .about-family-hero::after,
  .about-story-photo::after {
    inset: 12px;
    border-radius: 22px;
  }
  .about-family-hero figcaption,
  .about-story-photo figcaption {
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 15px;
    border-radius: 18px;
  }
  .about-visual-tag,
  .story-pin,
  .community-label {
    font-size: .68rem;
    padding: 8px 10px;
  }
  .about-visual-tag.tag-a { left: 16px; top: 18px; }
  .about-visual-tag.tag-b { right: 14px; top: 70px; }
}
@media (max-width: 540px) {
  .about-hero .badge {
    max-width: 100%;
    white-space: normal;
  }
  .about-hero .cta-row,
  .about-final-callout + .cta-strip .actions {
    align-items: stretch;
  }
  .about-hero .btn,
  .about-final-callout + .cta-strip .btn,
  .about-value-card .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .about-final-callout + .cta-strip > *,
  .about-final-callout + .cta-strip .actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .about-final-callout + .cta-strip h2,
  .about-final-callout + .cta-strip p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .about-crew-visual,
  .about-family-hero,
  .about-story-photo,
  .about-story-visual,
  .about-community-visual {
    min-height: 360px;
  }
  .about-family-photo,
  .about-family-photo--large {
    min-height: 350px;
  }
  .about-family-trust span {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .about-roof-plane {
    left: 3%;
    right: 3%;
    bottom: 96px;
    height: 160px;
  }
  .about-worker {
    width: 36px;
    height: 66px;
  }
  .about-badge-card {
    left: 18px;
    right: 18px;
    width: auto;
  }
  .story-roof {
    left: 8%;
    right: 8%;
    bottom: 84px;
    height: 180px;
  }
  .story-mountain {
    left: 0;
    right: 0;
  }
  .story-coating {
    display: none;
  }
  .community-home {
    left: 10%;
    width: 126px;
  }
  .community-shop {
    right: 8%;
    width: 152px;
  }
  .community-roof {
    bottom: 214px;
  }
  .about-value-card,
  .about-brand-grid div {
    border-radius: 22px;
  }
}

/* End About Us Page */

/* =========================================================
   FAQ Page
   ========================================================= */
.faq-page {
  background: var(--ink-950);
}
.faq-hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 122px 0 96px;
  background:
    radial-gradient(900px 460px at 82% 8%, rgba(245,196,67,.24), transparent 58%),
    radial-gradient(760px 520px at 16% 62%, rgba(21,205,217,.18), transparent 60%),
    linear-gradient(135deg, #061019 0%, #0B1721 52%, #07101A 100%);
  isolation: isolate;
}
.faq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 85%);
}
.faq-hero::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1px;
  height: 220px;
  z-index: -1;
  background: none;
  background-size: cover;
  background-position: bottom;
}
.faq-hero__glow {
  position: absolute;
  width: 360px;
  height: 360px;
  right: 8%;
  top: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,196,67,.32), rgba(245,196,67,.08) 42%, transparent 68%);
  filter: blur(8px);
  opacity: .8;
}
.faq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.faq-hero h1 {
  max-width: 11.5ch;
  font-size: clamp(3rem, 5.8vw, 5.6rem);
  line-height: .9;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.faq-hero .lede {
  max-width: 66ch;
}
.faq-hero .actions,
.faq-final-callout .actions,
.faq-mid-cta .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.5rem;
}
.faq-hero-card {
  position: relative;
  min-height: 560px;
  border-radius: 34px;
  padding: 1.15rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)),
    linear-gradient(180deg, rgba(15,34,48,.96), rgba(7,16,26,.98));
  border: 1px solid rgba(143,231,239,.28);
  box-shadow: var(--shadow-lg), 0 0 80px -40px rgba(21,205,217,.85);
  overflow: hidden;
}
.faq-hero-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 33px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(245,196,67,.16);
}
.faq-card-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: 22px;
  background: rgba(4,16,25,.68);
  border: 1px solid rgba(255,255,255,.08);
}
.faq-card-top span {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--gold-400);
}
.faq-card-top strong {
  color: var(--turq-300);
  font-family: var(--font-display);
}
.faq-roof-visual {
  position: relative;
  min-height: 300px;
  margin: 1rem 0;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 20%, rgba(255,213,102,.36), transparent 22%),
    linear-gradient(180deg, #123144 0%, #0B1823 74%);
  border: 1px solid rgba(255,255,255,.1);
}
.faq-sun {
  position: absolute;
  right: 13%;
  top: 40px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE08A 0%, #F5C443 45%, rgba(245,196,67,.05) 72%);
  box-shadow: 0 0 70px rgba(245,196,67,.55);
}
.faq-mountain {
  position: absolute;
  bottom: 76px;
  width: 58%;
  height: 160px;
  clip-path: polygon(0 100%, 42% 18%, 62% 52%, 78% 28%, 100% 100%);
  background: linear-gradient(180deg, rgba(42,74,95,.9), rgba(9,28,41,.95));
}
.faq-mountain-a { left: -3%; }
.faq-mountain-b {
  right: -7%;
  bottom: 88px;
  opacity: .72;
  transform: scale(.88);
}
.faq-flat-roof {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 42px;
  height: 104px;
  transform: skewX(-9deg);
  background: linear-gradient(180deg, #F6FBFC 0%, #C9D8DF 100%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 24px 54px rgba(0,0,0,.38), inset 0 -12px 28px rgba(14,170,183,.16);
}
.faq-flat-roof span {
  position: absolute;
  top: 18px;
  width: 54px;
  height: 16px;
  border-radius: 999px;
  background: rgba(14,170,183,.28);
}
.faq-flat-roof span:nth-child(1) { left: 14%; }
.faq-flat-roof span:nth-child(2) { left: 43%; }
.faq-flat-roof span:nth-child(3) { right: 14%; }
.faq-waterline {
  position: absolute;
  left: 22%;
  right: 18%;
  bottom: 70px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--turq-300), transparent);
  box-shadow: 0 0 18px rgba(21,205,217,.72);
}
.faq-mini-list {
  display: grid;
  gap: .75rem;
}
.faq-mini-list div {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: .85rem;
  align-items: center;
  padding: .8rem .9rem;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}
.faq-mini-list span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(21,205,217,.16);
  color: var(--turq-300);
  font-family: var(--font-display);
  font-weight: 700;
}
.faq-mini-list p {
  margin: 0;
  font-size: .95rem;
}
.faq-trust {
  position: relative;
  margin-top: -1px;
}
.faq-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.faq-trust-card,
.faq-service-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 1.35rem;
  background: linear-gradient(180deg, #fff, #F4F8FA);
  border: 1px solid #DCE7ED;
  box-shadow: 0 22px 60px -42px rgba(7,16,26,.42);
}
.faq-trust-card::before,
.faq-service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--turq-500), var(--gold-400));
}
.faq-trust-card span,
.faq-service-card span {
  display: inline-flex;
  margin-bottom: 1.1rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(14,170,183,.1);
  color: var(--turq-700);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.faq-trust-card h2 {
  font-size: 1.2rem;
  margin-bottom: .5rem;
}
.faq-trust-card p,
.faq-service-card p {
  margin: 0;
}
.faq-accordion-section {
  overflow: hidden;
}
.faq-category {
  margin-top: 2rem;
}
.faq-list--premium {
  max-width: 1040px;
}
.faq-list--premium .faq-item {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15,34,48,.96), rgba(8,20,30,.98));
  border-color: rgba(143,231,239,.18);
  box-shadow: 0 20px 48px -34px rgba(0,0,0,.72);
}
.faq-list--premium .faq-q {
  padding: 1.18rem 1.35rem;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}
.faq-list--premium .faq-a {
  padding: 0 1.35rem 1.25rem;
  max-width: 86ch;
}
.faq-category--light .faq-list--premium .faq-item {
  background: linear-gradient(180deg, #FFFFFF, #F5F9FB);
  border-color: #D7E4EA;
  box-shadow: 0 20px 44px -36px rgba(7,16,26,.35);
}
.faq-category--light .faq-list--premium .faq-q {
  color: var(--text-dark);
}
.faq-category--light .faq-list--premium .faq-q:hover {
  color: var(--turq-700);
}
.faq-category--light .faq-list--premium .faq-a {
  color: var(--text-dark-2);
}
.faq-weather {
  background:
    radial-gradient(760px 420px at 18% 8%, rgba(21,205,217,.12), transparent 62%),
    radial-gradient(700px 420px at 84% 18%, rgba(245,196,67,.15), transparent 58%),
    var(--ink-900);
}
.faq-mid-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 34px;
  background:
    radial-gradient(600px 240px at 78% 0%, rgba(245,196,67,.18), transparent 60%),
    linear-gradient(135deg, #0F2230, #07101A);
  border: 1px solid rgba(143,231,239,.2);
  box-shadow: var(--shadow-lg);
}
.faq-mid-cta h2,
.faq-final-callout h2 {
  max-width: 18ch;
}
.faq-mid-cta p,
.faq-final-callout p {
  max-width: 68ch;
}
.faq-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.faq-service-card {
  color: var(--text-dark);
  min-height: 220px;
}
.faq-service-card h3 {
  color: var(--text-dark);
}
.faq-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px -44px rgba(7,16,26,.55), 0 0 0 1px rgba(14,170,183,.18);
}
.faq-final-callout {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 36px;
  background:
    linear-gradient(120deg, rgba(7,16,26,.94), rgba(11,34,48,.88)),
    radial-gradient(700px 320px at 80% 8%, rgba(245,196,67,.2), transparent 60%);
  border: 1px solid rgba(245,196,67,.18);
  box-shadow: var(--shadow-lg);
}
.faq-final-callout::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -105px;
  width: 360px;
  height: 240px;
  transform: rotate(-10deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(143,231,239,.2)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(7,16,26,.12) 38px 42px);
  clip-path: polygon(0 35%, 100% 0, 100% 78%, 0 100%);
  opacity: .22;
}
@media (max-width: 1040px) {
  .faq-hero-grid,
  .faq-mid-cta {
    grid-template-columns: 1fr;
  }
  .faq-hero-card {
    min-height: 520px;
  }
  .faq-trust-grid,
  .faq-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .faq-hero {
    min-height: auto;
    padding: 136px 0 76px;
  }
  .faq-hero h1 {
    max-width: 11.5ch;
    font-size: clamp(2.65rem, 11vw, 4.05rem);
  }
  .faq-hero-grid {
    gap: 2rem;
  }
  .faq-hero-card {
    min-height: auto;
  }
  .faq-roof-visual {
    min-height: 250px;
  }
  .faq-trust-grid,
  .faq-service-grid {
    grid-template-columns: 1fr;
  }
  .faq-mid-cta,
  .faq-final-callout {
    border-radius: 26px;
  }
}
@media (max-width: 540px) {
  .faq-hero .btn,
  .faq-mid-cta .btn,
  .faq-final-callout .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .faq-card-top,
  .faq-mini-list div {
    grid-template-columns: 1fr;
  }
  .faq-card-top {
    display: grid;
  }
  .faq-list--premium .faq-q {
    align-items: flex-start;
    padding: 1rem;
  }
  .faq-list--premium .faq-a {
    padding: 0 1rem 1rem;
  }
}

/* End FAQ Page */

/* =========================================================
   Contact Page
   ========================================================= */
.contact-page {
  background: var(--ink-950);
}
.contact-hero {
  position: relative;
  overflow: hidden;
  padding: 126px 0 90px;
  min-height: 760px;
  background:
    radial-gradient(820px 440px at 82% 8%, rgba(245,196,67,.24), transparent 60%),
    radial-gradient(720px 440px at 14% 72%, rgba(21,205,217,.18), transparent 62%),
    linear-gradient(135deg, #061019 0%, #0B1823 56%, #07101A 100%);
  isolation: isolate;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), transparent 86%);
}
.contact-hero::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -1px;
  height: 210px;
  z-index: -1;
  background: none;
  background-size: cover;
  background-position: bottom;
}
.contact-hero__glow {
  position: absolute;
  right: 10%;
  top: 134px;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,196,67,.3), rgba(245,196,67,.08) 42%, transparent 70%);
  filter: blur(8px);
}
.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .82fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.contact-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.2rem, 6.2vw, 6.1rem);
  line-height: .88;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.contact-hero .lede {
  max-width: 66ch;
}
.contact-hero .actions,
.contact-sidebar-actions,
.contact-final-cta .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.4rem;
}
.contact-hero-panel {
  position: relative;
  min-height: 560px;
  border-radius: 34px;
  padding: 1rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.025)),
    linear-gradient(180deg, rgba(15,34,48,.95), rgba(7,16,26,.98));
  border: 1px solid rgba(143,231,239,.28);
  box-shadow: var(--shadow-lg), 0 0 80px -42px rgba(21,205,217,.85);
  overflow: hidden;
}
.contact-phone-card {
  position: relative;
  z-index: 2;
  border-radius: 26px;
  padding: 1.25rem;
  background: rgba(4,16,25,.78);
  border: 1px solid rgba(245,196,67,.22);
}
.contact-phone-card span,
.contact-emergency-card span {
  display: inline-flex;
  margin-bottom: .7rem;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--gold-400);
  text-transform: uppercase;
}
.contact-phone-card a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--turq-300);
}
.contact-phone-card a + a {
  margin-top: .45rem;
  color: var(--gold-400);
}
.contact-phone-card p {
  margin: .85rem 0 0;
}
.contact-phone-links {
  display: grid;
  gap: .25rem;
}
.contact-phone-links a {
  display: inline-flex;
  width: fit-content;
}
.contact-crew-visual {
  position: relative;
  min-height: 360px;
  margin-top: 1rem;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 18%, rgba(255,213,102,.36), transparent 22%),
    linear-gradient(180deg, #123144 0%, #0B1823 76%);
  border: 1px solid rgba(255,255,255,.1);
}
.contact-sun {
  position: absolute;
  right: 14%;
  top: 42px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE08A 0%, #F5C443 45%, rgba(245,196,67,.06) 73%);
  box-shadow: 0 0 76px rgba(245,196,67,.55);
}
.contact-roof-plane {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 82px;
  height: 136px;
  transform: skewX(-12deg);
  background:
    linear-gradient(180deg, #F5FAFB 0%, #B9CDD7 100%),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(7,16,26,.08) 44px 48px);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}
.contact-worker {
  position: absolute;
  bottom: 118px;
  width: 38px;
  height: 74px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, var(--gold-400), #B8821C);
  box-shadow: 0 16px 28px rgba(0,0,0,.32);
}
.contact-worker::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: -18px;
  height: 18px;
  border-radius: 999px 999px 4px 4px;
  background: var(--turq-400);
}
.contact-worker-a { left: 30%; }
.contact-worker-b { left: 46%; transform: scale(.86); }
.contact-pin {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: .75rem .9rem;
  border-radius: 18px;
  background: rgba(7,16,26,.76);
  border: 1px solid rgba(143,231,239,.2);
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .72fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.contact-premium-form {
  border-top: 0;
  border: 1px solid rgba(143,231,239,.18);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(245,196,67,.12);
}
.contact-premium-form .btn {
  width: 100%;
  justify-content: center;
}
.contact-sidebar {
  display: grid;
  gap: 1rem;
}
.contact-direct-card,
.contact-emergency-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(245,196,67,.16), transparent 62%),
    linear-gradient(180deg, #0F2230, #07101A);
  border: 1px solid rgba(143,231,239,.18);
  box-shadow: var(--shadow-lg);
}
.contact-direct-card h2,
.contact-emergency-card h3 {
  margin-top: 0;
}
.contact-direct-row {
  display: grid;
  gap: .2rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(143,231,239,.14);
}
.contact-direct-row strong {
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.contact-direct-row a {
  color: var(--turq-300);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.contact-emergency-card {
  background:
    radial-gradient(440px 220px at 100% 0%, rgba(194,74,31,.25), transparent 62%),
    linear-gradient(180deg, #161018, #07101A);
  border-color: rgba(245,196,67,.22);
}
.contact-call-section {
  position: relative;
}
.contact-callout,
.contact-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border-radius: 34px;
  background:
    radial-gradient(560px 240px at 88% 0%, rgba(21,205,217,.14), transparent 60%),
    linear-gradient(135deg, #fff, #F4F8FA);
  border: 1px solid #DCE7ED;
  box-shadow: 0 26px 70px -48px rgba(7,16,26,.45);
}
.contact-callout h2,
.contact-callout p {
  color: var(--text-dark);
}
.contact-callout p {
  max-width: 62ch;
}
.contact-call-number-group {
  display: grid;
  gap: .75rem;
  min-width: min(100%, 430px);
}
.contact-call-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: .85rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--turq-500), var(--turq-600));
  color: #04222A;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 900;
  letter-spacing: -.03em;
  box-shadow: var(--shadow-turq);
}
.contact-call-number--secondary {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  box-shadow: 0 16px 34px -18px rgba(245, 196, 67, .7);
}
.contact-call-number:hover {
  color: #04222A;
}
.contact-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.contact-service-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 26px;
  padding: 1.35rem;
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(21,205,217,.12), transparent 62%),
    linear-gradient(180deg, rgba(15,34,48,.96), rgba(8,20,30,.98));
  border: 1px solid rgba(143,231,239,.18);
  box-shadow: 0 20px 48px -34px rgba(0,0,0,.72);
}
.contact-service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--turq-500), var(--gold-400));
}
.contact-service-card span {
  display: inline-flex;
  margin-bottom: 1.1rem;
  padding: .34rem .65rem;
  border-radius: 999px;
  background: rgba(21,205,217,.14);
  color: var(--turq-300);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.contact-service-card h3 {
  margin-bottom: .45rem;
}
.contact-service-card p {
  margin: 0;
}
.contact-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,196,67,.35);
  box-shadow: var(--shadow-lg);
}
.contact-map-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(430px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.contact-area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.4rem;
}
.contact-area-chips span {
  display: inline-flex;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(14,170,183,.1);
  border: 1px solid rgba(14,170,183,.18);
  color: var(--turq-700);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
}
.contact-map-visual {
  position: relative;
  min-height: 500px;
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(245,196,67,.32), transparent 22%),
    linear-gradient(180deg, #102B3B, #07101A 76%);
  border: 1px solid rgba(14,170,183,.22);
  box-shadow: var(--shadow-lg), 0 0 80px -46px rgba(21,205,217,.8);
}
.contact-map-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .6;
}
.contact-map-visual::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 170px;
  background: none;
  background-size: cover;
}
.map-line {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(21,205,217,.1), rgba(21,205,217,.95), rgba(245,196,67,.85));
  box-shadow: 0 0 18px rgba(21,205,217,.6);
}
.map-line-a { left: 29%; top: 33%; width: 280px; transform: rotate(-18deg); }
.map-line-b { left: 30%; top: 48%; width: 230px; transform: rotate(18deg); }
.map-line-c { left: 42%; top: 58%; width: 210px; transform: rotate(-6deg); }
.map-dot {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .7rem .45rem 1.35rem;
  border-radius: 999px;
  background: rgba(7,16,26,.78);
  border: 1px solid rgba(143,231,239,.28);
  color: var(--text);
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(0,0,0,.32);
}
.map-dot::before {
  content: "";
  position: absolute;
  left: .55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--turq-300);
  box-shadow: 0 0 18px var(--turq-300);
}
.map-dot.tucson { left: 28%; top: 52%; }
.map-dot.phoenix { left: 58%; top: 22%; }
.map-dot.sierra { left: 56%; top: 68%; }
.map-dot.rio { left: 22%; top: 74%; }
.map-dot.casa { left: 42%; top: 38%; }
.contact-trust-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
}
.contact-final-cta {
  margin-top: 2rem;
  background:
    radial-gradient(600px 260px at 82% 0%, rgba(245,196,67,.18), transparent 60%),
    linear-gradient(135deg, #0F2230, #07101A);
  border-color: rgba(143,231,239,.2);
  box-shadow: var(--shadow-lg);
}
.contact-final-cta h2,
.contact-final-cta p {
  color: var(--text);
}
.contact-final-cta p {
  color: var(--text-muted);
}
@media (max-width: 1060px) {
  .contact-hero-grid,
  .contact-layout,
  .contact-map-grid,
  .contact-callout,
  .contact-final-cta {
    grid-template-columns: 1fr;
  }
  .contact-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .contact-hero {
    min-height: auto;
    padding: 136px 0 76px;
  }
  .contact-hero h1 {
    max-width: 11.5ch;
    font-size: clamp(2.65rem, 11.5vw, 4.1rem);
  }
  .contact-hero-panel {
    min-height: auto;
  }
  .contact-crew-visual,
  .contact-map-visual {
    min-height: 360px;
  }
  .contact-service-grid,
  .contact-trust-grid {
    grid-template-columns: 1fr;
  }
  .contact-call-number {
    width: 100%;
  }
  .contact-call-number-group {
    width: 100%;
  }
}
@media (max-width: 540px) {
  .contact-hero .btn,
  .contact-sidebar .btn,
  .contact-final-cta .btn,
  .contact-call-number,
  .contact-call-number-group {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .contact-phone-card a {
    font-size: 2rem;
  }
  .map-dot {
    font-size: .66rem;
    padding-right: .55rem;
  }
  .map-dot.phoenix { left: 48%; }
  .map-dot.sierra { left: 42%; }
  .map-dot.casa { left: 34%; }
}

/* End Contact Page */

/* Final media placeholder override: keep these rules last so generated
   pseudo-elements and decorative roof graphics cannot reappear above the
   clean real-media replacement slots. */
.media-placeholder {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px dashed rgba(143, 231, 239, .48) !important;
  background:
    radial-gradient(circle at 78% 15%, rgba(245, 196, 67, .2), transparent 32%),
    radial-gradient(circle at 18% 80%, rgba(21, 205, 217, .18), transparent 34%),
    linear-gradient(135deg, rgba(6, 13, 19, .98), rgba(12, 30, 42, .94) 54%, rgba(4, 10, 15, .98)) !important;
  box-shadow:
    0 34px 92px -48px rgba(21, 205, 217, .62),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 0 90px rgba(245, 196, 67, .08) !important;
}

.media-placeholder > * {
  display: none !important;
}

.media-placeholder::before {
  content: attr(data-media-type) !important;
  position: absolute !important;
  top: clamp(1rem, 3vw, 1.65rem) !important;
  left: clamp(1rem, 3vw, 1.65rem) !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  z-index: 2 !important;
  padding: .55rem .85rem !important;
  border: 1px solid rgba(245, 196, 67, .42) !important;
  border-radius: 999px !important;
  background: rgba(3, 8, 12, .72) !important;
  color: var(--gold) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 34px rgba(245, 196, 67, .18) !important;
  opacity: 1 !important;
  filter: none !important;
}

.media-placeholder::after {
  content: attr(data-media-label) "\A" attr(data-media-file) "\A" attr(data-media-folder) !important;
  white-space: pre-line !important;
  position: absolute !important;
  inset: clamp(1rem, 3vw, 1.65rem) !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: calc(var(--r-xl) - .75rem) !important;
  background:
    linear-gradient(90deg, rgba(143, 231, 239, .08) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(143, 231, 239, .07) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(circle at center, rgba(255, 255, 255, .06), transparent 54%) !important;
  color: rgba(241, 252, 253, .94) !important;
  font-size: clamp(1rem, 2.3vw, 1.45rem) !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
  text-align: center !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .52) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.hero-mountains,
.hero-rain,
.hero-cactus,
.hero-house,
.cv-sun,
.coating-sun,
.coating-clouds,
.coating-rain,
.shingle-sun,
.shingle-mountains,
.tile-sun,
.tile-mountains,
.flat-sun,
.flat-mountains,
.repair-cloud,
.repair-bolt,
.repair-mountains,
.commercial-sun,
.commercial-mountains,
.residential-sun,
.residential-mountains,
.res-cactus,
.about-sun,
.about-mountains,
.faq-sun,
.faq-mountain,
.contact-sun,
.w-storm,
.w-bolt,
.w-mountains {
  display: none !important;
}

@media (max-width: 720px) {
  .media-placeholder::before {
    font-size: .62rem !important;
    letter-spacing: .12em !important;
  }

  .media-placeholder::after {
    inset: .8rem !important;
    padding-top: 3.35rem !important;
    font-size: .95rem !important;
  }
}

/* =========================================================
   Homepage hero redesign — luxury Arizona contractor styling
   ========================================================= */
.hero--xl {
  min-height: clamp(720px, 86vh, 900px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(4.25rem, 7vw, 7rem) 0 clamp(3.25rem, 6vw, 5rem) !important;
}

.hero--xl .hero-bg {
  background:
    radial-gradient(760px 380px at 76% 45%, rgba(245, 196, 67, .17), transparent 64%),
    radial-gradient(720px 420px at 18% 70%, rgba(21, 205, 217, .12), transparent 68%),
    linear-gradient(135deg, #04070c 0%, #07121b 47%, #101820 100%) !important;
}

.hero--xl .hero-bg::before {
  background:
    linear-gradient(105deg, transparent 0 18%, rgba(245, 196, 67, .13) 34%, transparent 53%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
    radial-gradient(circle at 70% 54%, rgba(143, 231, 239, .12), transparent 42%) !important;
  opacity: 1 !important;
}

.hero--xl .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 7, 12, .96) 0%, rgba(4, 7, 12, .8) 36%, rgba(4, 7, 12, .28) 72%, rgba(4, 7, 12, .62) 100%),
    linear-gradient(0deg, rgba(4, 7, 12, .88), transparent 42%);
  pointer-events: none;
}

.hero--xl .hero-sun,
.hero--xl .hero-rays,
.hero--xl .hero-rain,
.hero--xl .hero-cactus,
.hero--xl .hero-house {
  display: none !important;
}

.hero--xl .hero-mountains {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 38% !important;
  opacity: .82 !important;
  background:
    linear-gradient(165deg, transparent 0 53%, rgba(245, 196, 67, .08) 54% 55%, transparent 56%),
    linear-gradient(18deg, transparent 0 63%, rgba(21, 205, 217, .07) 64% 65%, transparent 66%),
    linear-gradient(180deg, transparent 0%, rgba(7, 16, 26, .82) 80%, rgba(4, 7, 12, .98) 100%) !important;
}

.hero--xl .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr) !important;
  min-height: auto !important;
  align-items: center !important;
}

.hero--xl h1 {
  max-width: 11ch !important;
  margin: .92rem 0 1rem !important;
  color: #fff !important;
  font-size: clamp(3rem, 5.65vw, 5.9rem) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.hero--xl .hero-gold {
  color: var(--gold-400) !important;
  text-shadow: 0 0 34px rgba(245, 196, 67, .24) !important;
}

.hero--xl .lede {
  max-width: 57ch !important;
  color: rgba(241, 252, 253, .86) !important;
  font-size: clamp(1.05rem, 1.35vw, 1.24rem) !important;
  line-height: 1.65 !important;
}

.hero--xl .hero-kicker {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gold-400) !important;
  letter-spacing: .18em !important;
  font-weight: 900 !important;
}

.hero--xl .hero-logo-feature {
  top: 50% !important;
  right: max(4vw, 42px) !important;
  width: clamp(310px, 35vw, 560px) !important;
  transform: translateY(-50%) !important;
  padding: clamp(16px, 2vw, 28px) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 213, 102, .2), rgba(21, 205, 217, .1) 48%, transparent 70%) !important;
  box-shadow:
    0 0 0 1px rgba(245, 196, 67, .22),
    0 0 82px 22px rgba(245, 196, 67, .18),
    0 0 140px 44px rgba(21, 205, 217, .1) !important;
  filter: drop-shadow(0 28px 60px rgba(0, 0, 0, .55)) !important;
}

.hero--xl .hero-logo-feature::before {
  display: none !important;
}

.hero--xl .hero-logo-feature::after {
  inset: 6% !important;
  border: 1px solid rgba(245, 196, 67, .22) !important;
  box-shadow:
    inset 0 0 40px rgba(21, 205, 217, .14),
    0 0 50px rgba(245, 196, 67, .08) !important;
}

.hero--xl .hero-logo-feature img {
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #050b12 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 0 2px rgba(245, 196, 67, .36),
    0 26px 80px rgba(0, 0, 0, .58) !important;
}

.hero-specialties {
  max-width: 690px;
  margin-top: 1.25rem;
  padding: 1.05rem 1.1rem;
  border-left: 2px solid rgba(245, 196, 67, .78);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
    rgba(6, 13, 19, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.hero-specialties > span {
  display: block;
  margin-bottom: .75rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-specialty-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.hero-specialty-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .42rem .68rem;
  border: 1px solid rgba(143, 231, 239, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: rgba(241, 252, 253, .94);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.hero-specialty-grid a:hover,
.hero-specialty-grid a:focus-visible {
  border-color: rgba(245, 196, 67, .52);
  background: rgba(21, 205, 217, .12);
  color: #fff;
  transform: translateY(-1px);
}

.hero-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  max-width: 690px;
  margin-top: 1.2rem;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-height: 82px;
  padding: .9rem;
  border: 1px solid rgba(143, 231, 239, .17);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)),
    rgba(5, 10, 16, .55);
  color: #fff;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 850;
  letter-spacing: .02em;
  line-height: 1.15;
}

.hero-proof .proof-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(21, 205, 217, .1);
  color: var(--turq-400);
  box-shadow: inset 0 0 0 1px rgba(143, 231, 239, .16);
}

.hero-proof .i {
  width: 22px;
  height: 22px;
}

.hero--xl .hero-cta {
  margin-top: 1.35rem !important;
  gap: .9rem !important;
}

.btn--xl small {
  display: block;
  margin-top: .05rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.1;
  opacity: .82;
}

.home-services-showcase {
  padding: clamp(3.25rem, 7vw, 5.5rem) 0;
  background: #f7f5ef;
  color: #07101a;
}

.home-services-head {
  max-width: 800px;
  margin: 0 auto 2rem;
  text-align: center;
}

.home-services-head h2 {
  margin: .45rem 0 .65rem;
  color: #07101a;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -.035em;
}

.home-services-head p {
  margin: 0 auto;
  max-width: 58ch;
  color: #4f5a62;
}

.home-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dfe4e7;
  border-right: 0;
  border-bottom: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px -48px rgba(4, 7, 12, .38);
}

.home-icon-grid a,
.home-service-note {
  min-height: 138px;
  padding: 1.25rem .85rem;
  border-right: 1px solid #dfe4e7;
  border-bottom: 1px solid #dfe4e7;
  background: linear-gradient(180deg, #fff, #fbfcfc);
  color: #07101a;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}

.home-icon-grid a strong {
  max-width: 13ch;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-icon-grid a:hover,
.home-icon-grid a:focus-visible {
  background: linear-gradient(180deg, rgba(21, 205, 217, .08), #fff);
  color: #075d66;
  transform: translateY(-2px);
}

.home-service-icon .i {
  width: 42px;
  height: 42px;
  color: #087f89;
  stroke-width: 1.75;
}

.home-service-note {
  align-items: flex-start;
  text-align: left;
  color: #17212b;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
}

.home-license-strip {
  padding: clamp(2.35rem, 5vw, 4.1rem) 0;
  background:
    radial-gradient(700px 300px at 80% 30%, rgba(245, 196, 67, .13), transparent 62%),
    linear-gradient(135deg, #04070c, #08131c 56%, #05070b);
}

.home-license-panel {
  display: grid;
  grid-template-columns: .95fr 1.35fr;
  gap: 1.6rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.15rem);
  border: 1px solid rgba(245, 196, 67, .3);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(245, 196, 67, .1), transparent 28%, rgba(21, 205, 217, .08)),
    rgba(255, 255, 255, .035);
  box-shadow:
    0 30px 90px -50px rgba(21, 205, 217, .4),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.home-family-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 118px;
  padding-right: 1.4rem;
  border-right: 1px solid rgba(245, 196, 67, .32);
}

.home-family-icon {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(21, 205, 217, .11);
  color: var(--turq-400);
  box-shadow: inset 0 0 0 1px rgba(143, 231, 239, .18);
}

.home-family-icon .i {
  width: 34px;
  height: 34px;
}

.home-family-photo {
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  margin: 0;
  border: 1px solid rgba(245, 196, 67, .34);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(21, 205, 217, .08);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .28),
    0 0 34px rgba(21, 205, 217, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.home-family-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.03);
}

.home-family-card h3 {
  margin: .35rem 0 .3rem;
  color: #fff;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
}

.home-family-card p {
  margin: 0;
  color: rgba(241, 252, 253, .78);
}

.home-roc-card {
  text-align: center;
}

.home-roc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: .9rem;
}

.home-roc-grid div {
  padding: .65rem 1rem;
  border-left: 1px solid rgba(245, 196, 67, .28);
}

.home-roc-grid div:first-child {
  border-left: 0;
}

.home-roc-grid strong {
  display: block;
  color: var(--gold-400);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: .02em;
}

.home-roc-grid span {
  display: block;
  margin-top: .28rem;
  color: rgba(241, 252, 253, .76);
  font-size: .82rem;
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .hero--xl {
    min-height: auto !important;
  }

  .hero--xl .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero--xl .hero-logo-feature {
    display: none !important;
  }

  .hero--xl .hero-mobile-logo {
    display: grid !important;
    place-items: center !important;
    width: min(380px, 66vw) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 1.6rem auto .35rem !important;
    padding: clamp(12px, 3vw, 20px) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 213, 102, .19), rgba(21, 205, 217, .09) 52%, transparent 72%) !important;
    box-shadow:
      0 0 0 1px rgba(245, 196, 67, .28),
      0 0 52px 12px rgba(245, 196, 67, .16),
      0 0 96px 28px rgba(21, 205, 217, .1) !important;
  }

  .hero--xl .hero-mobile-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .08),
      0 0 0 2px rgba(245, 196, 67, .34),
      0 20px 60px rgba(0, 0, 0, .48) !important;
  }

  .home-icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-license-panel {
    grid-template-columns: 1fr;
  }

  .home-family-card {
    padding-right: 0;
    padding-bottom: 1.4rem;
    border-right: 0;
    border-bottom: 1px solid rgba(245, 196, 67, .26);
  }
}

@media (max-width: 640px) {
  .hero--xl {
    padding-top: 3rem !important;
  }

  .hero--xl h1 {
    font-size: clamp(2.55rem, 13vw, 4rem) !important;
    max-width: 10.5ch !important;
  }

  .hero--xl .hero-logo-feature {
    display: none !important;
  }

  .hero--xl .hero-mobile-logo {
    width: min(276px, 74vw) !important;
  }

  .hero-specialties {
    padding: .95rem;
  }

  .hero-specialty-grid a {
    font-size: .78rem;
  }

  .hero-proof-row {
    grid-template-columns: 1fr;
  }

  .hero--xl .hero-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .home-icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-service-note {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .home-roc-grid {
    grid-template-columns: 1fr;
  }

  .home-roc-grid div {
    border-left: 0;
    border-top: 1px solid rgba(245, 196, 67, .24);
  }

  .home-roc-grid div:first-child {
    border-top: 0;
  }

  .home-family-card {
    align-items: flex-start;
  }

  .home-family-photo {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    border-radius: 20px;
  }
}

/* =========================================================
   Commercial Roofing real project photo integration
   ========================================================= */
.commercial-photo-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050b12 !important;
}

.commercial-photo-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(4, 8, 12, .12), rgba(4, 8, 12, .72)),
    radial-gradient(circle at 18% 16%, rgba(21, 205, 217, .2), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(245, 196, 67, .18), transparent 30%) !important;
  pointer-events: none !important;
  transform: none !important;
}

.commercial-photo-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
  transform: none;
}

.commercial-photo-card--hero img {
  object-position: center;
}

.commercial-coating-visual.commercial-photo-card img,
.commercial-maint-visual.commercial-photo-card img {
  object-position: center;
}
.coating-visual.commercial-photo-card,
.coating-roof-scene.commercial-photo-card,
.flat-roof-visual.commercial-photo-card,
.flat-coating-visual.commercial-photo-card,
.silicone-visual.commercial-photo-card {
  min-height: 430px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(143,231,239,.2);
  box-shadow: 0 36px 90px -48px rgba(0,0,0,.85);
}
.coating-roof-scene.commercial-photo-card {
  min-height: 560px;
}
.flat-roof-visual.commercial-photo-card {
  min-height: 500px;
}
.silicone-visual.commercial-photo-card {
  margin: 1.1rem 0 1.3rem;
  min-height: 300px;
}

.commercial-photo-label {
  position: absolute;
  left: clamp(18px, 4vw, 34px);
  right: clamp(18px, 4vw, 34px);
  bottom: clamp(18px, 4vw, 34px);
  z-index: 2;
  max-width: 430px;
  padding: 16px 18px;
  border: 1px solid rgba(245, 196, 67, .3);
  border-radius: 20px;
  background: rgba(2, 7, 11, .72);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
}

.commercial-photo-label span {
  display: block;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.commercial-photo-label strong {
  display: block;
  margin-top: .35rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.1;
}

.commercial-gallery-section {
  background:
    radial-gradient(circle at 18% 10%, rgba(21, 205, 217, .08), transparent 26%),
    linear-gradient(180deg, #fff, #f5fafc);
}

.commercial-before-after-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(780px 360px at 18% 20%, rgba(21, 205, 217, .13), transparent 66%),
    radial-gradient(760px 380px at 82% 18%, rgba(245, 196, 67, .12), transparent 66%),
    linear-gradient(180deg, #061018, #020406);
}

.commercial-before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
}

.before-after-card {
  position: relative;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 34px;
  background: #07101a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .36);
}

.before-after-card--after {
  border-color: rgba(245, 196, 67, .32);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .36), 0 0 56px rgba(245, 196, 67, .12);
}

.before-after-card img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.04);
}

.before-after-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 7, 11, .08) 35%, rgba(2, 7, 11, .84));
  pointer-events: none;
}

.before-after-card figcaption {
  position: absolute;
  left: clamp(18px, 3vw, 28px);
  right: clamp(18px, 3vw, 28px);
  bottom: clamp(18px, 3vw, 28px);
  z-index: 1;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: rgba(2, 7, 11, .72);
  backdrop-filter: blur(14px);
}

.before-after-card figcaption span {
  display: inline-flex;
  margin-bottom: .42rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.before-after-card figcaption strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  line-height: 1.08;
}

.before-after-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(18px, 3vw, 30px);
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(143, 231, 239, .16);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(21, 205, 217, .1), transparent),
    rgba(255, 255, 255, .045);
}

.before-after-cta p {
  max-width: 72ch;
  margin: 0;
  color: rgba(241, 252, 253, .78);
}

.commercial-sequence-section {
  background:
    radial-gradient(circle at 16% 12%, rgba(21, 205, 217, .08), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(245, 196, 67, .1), transparent 30%),
    linear-gradient(180deg, #fff, #f5fafc);
}

.commercial-sequence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(360px, 32vw, 440px);
  gap: clamp(14px, 2vw, 22px);
}

.sequence-card {
  position: relative;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(7, 16, 26, .12);
  border-radius: 28px;
  background: #07101a;
  box-shadow: 0 22px 58px rgba(7, 16, 26, .12);
}

.sequence-card--wide {
  grid-column: span 2;
}

.sequence-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
}

.sequence-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(2, 7, 11, .88));
  pointer-events: none;
}

.sequence-card figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
}

.sequence-card figcaption span {
  display: inline-flex;
  margin-bottom: .45rem;
  color: var(--gold-400);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sequence-card figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.1;
}

.sequence-card figcaption em {
  display: block;
  margin-top: .45rem;
  color: rgba(241, 252, 253, .78);
  font-style: normal;
  line-height: 1.35;
}

.commercial-project-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.commercial-gallery-card {
  position: relative;
  min-height: 330px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(7, 16, 26, .1);
  border-radius: 28px;
  background: #07101a;
  box-shadow: 0 22px 58px rgba(7, 16, 26, .12);
}

.commercial-gallery-card:nth-child(1),
.commercial-gallery-card:nth-child(4),
.commercial-gallery-card--featured {
  grid-column: span 2;
}

.commercial-gallery-card--featured {
  min-height: 380px;
  border-color: rgba(245, 196, 67, .28);
  box-shadow: 0 26px 70px rgba(7, 16, 26, .16), 0 0 44px rgba(245, 196, 67, .1);
}

.commercial-gallery-card--featured figcaption {
  color: var(--gold-400);
}

.commercial-gallery-card img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  display: block;
  object-fit: cover;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.commercial-gallery-card--natural img {
  object-fit: contain;
  background:
    radial-gradient(520px 320px at 50% 50%, rgba(21,205,217,.08), transparent 70%),
    linear-gradient(145deg, #061018, #0B202B);
  filter: saturate(1.08) contrast(1.04) brightness(1.08);
}
.commercial-gallery-card video {
  width: 100%;
  height: 100%;
  min-height: 330px;
  display: block;
  object-fit: cover;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}

.commercial-gallery-card:hover img {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05);
}
.commercial-gallery-card:hover video {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05);
}

.commercial-gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(2, 7, 11, .82));
  pointer-events: none;
}

.commercial-gallery-card figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .commercial-before-after-grid {
    grid-template-columns: 1fr;
  }

  .before-after-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .commercial-project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commercial-sequence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sequence-card--wide {
    grid-column: span 1;
  }

  .commercial-gallery-card:nth-child(1),
  .commercial-gallery-card:nth-child(4),
  .commercial-gallery-card--featured {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .before-after-card,
  .before-after-card img {
    min-height: 300px;
  }

  .before-after-cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .commercial-project-gallery {
    grid-template-columns: 1fr;
  }

  .commercial-sequence-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 340px;
  }

  .commercial-gallery-card,
  .commercial-gallery-card img {
    min-height: 290px;
  }

  .sequence-card,
  .sequence-card img {
    min-height: 320px;
  }

  .commercial-roof-visual.commercial-photo-card,
  .commercial-coating-visual.commercial-photo-card,
  .commercial-maint-visual.commercial-photo-card {
    min-height: 420px !important;
  }
}