/* =====================================================
   Skyline v3 — Token EXTENSIONS
   Extends ../../styles/tokens.css (does NOT replace it).
   Adds editorial motion + display scale used by all three variants.
   Identity tokens (fonts, brand colors) are inherited unchanged.
   ===================================================== */

:root {
  /* ---- Motion tokens (Luke editorial easing) ---- */
  --ease-luke: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 1200ms;
  --dur-quick: 220ms;
  --stagger: 60ms;

  /* ---- Bigger editorial display sizes ---- */
  --text-massive:    clamp(4rem, 12vw, 12rem);   /* viewport-filling headlines */
  --text-editorial:  clamp(2.5rem, 6vw, 6rem);   /* section headlines */
  --text-kicker:     clamp(1.1rem, 1.4vw, 1.45rem);

  /* ---- Tighter editorial line-heights ---- */
  --lh-display: 0.9;
  --lh-tight: 1.05;

  /* ---- Photography vertical accent (aerial-blue) ---- */
  --azure-500: #3D6FB8;            /* primary photography accent (drone-sky tone) */
  --azure-400: #6A95D6;            /* lighter shade for type/links */
  --azure-glow: rgba(61, 111, 184, 0.35);
  --border-azure: rgba(61, 111, 184, 0.35);

  /* ---- Painting vertical accent (orange) ---- */
  --paint-500: #D95A1F;            /* deep painting orange */
  --paint-400: #F3803A;            /* lighter orange for type/links on dark */
  --paint-glow: rgba(217, 90, 31, 0.35);
  --border-paint: rgba(217, 90, 31, 0.35);

  /* ---- River cleaning vertical accent (purple) ---- */
  --river-500: #7C4DBE;            /* primary river purple */
  --river-400: #A184D4;            /* lighter purple for type/links on dark */
  --river-glow: rgba(124, 77, 190, 0.35);
  --border-river: rgba(124, 77, 190, 0.35);

  /* ---- Ship cleaning vertical accent (gray) ---- */
  --ship-500: #7A8A99;             /* steel gray for ports & vessels */
  --ship-400: #A2B0BE;             /* lighter cool gray */
  --ship-glow: rgba(122, 138, 153, 0.35);
  --border-ship: rgba(122, 138, 153, 0.35);

  /* ---- Flooding response vertical accent (gray) ---- */
  --flood-500: #6B7683;            /* deeper flood gray */
  --flood-400: #94A0AD;            /* lighter flood gray */
  --flood-glow: rgba(107, 118, 131, 0.35);
  --border-flood: rgba(107, 118, 131, 0.35);

  /* ---- Beach cleaning vertical accent (sand) ---- */
  --beach-500: #C39A4E;            /* deep sand */
  --beach-400: #D9B87A;            /* lighter sand */
  --beach-glow: rgba(195, 154, 78, 0.35);
  --border-beach: rgba(195, 154, 78, 0.35);

  /* ---- Water Rescue vertical accent (turquoise) ---- */
  --aqua-500: #1FA9A0;             /* primary turquoise accent */
  --aqua-400: #4FCFC7;             /* lighter turquoise for type/links on dark */
  --aqua-glow: rgba(31, 169, 160, 0.35);
  --border-aqua: rgba(31, 169, 160, 0.35);

  /* ---- Landscape vertical accent (deep forest green) ---- */
  --land-500: #2E5D3E;             /* primary landscape green */
  --land-400: #4C8B60;             /* lighter shade for type/links on dark */
  --land-glow: rgba(46, 93, 62, 0.35);
  --border-land: rgba(46, 93, 62, 0.35);

  /* ---- Paper section variants ---- */
  --paper-ink: #16130C;            /* near-black ink on paper */
  --paper-ink-soft: #4A4234;
  --paper-line: rgba(22, 19, 12, 0.14);

  /* ---- Per-variant intensity (overridden per variant.css) ---- */
  --v-intensity: 1;                /* 1 = editorial restraint, higher = cinematic */
  --v-section-pad: clamp(96px, 13vw, 220px);
  --v-grain-opacity: 0.6;
}

/* =====================================================
   Massive editorial headline primitive
   ===================================================== */
.headline-massive {
  font-family: var(--font-display);
  font-size: var(--text-massive);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.headline-editorial {
  font-family: var(--font-display);
  font-size: var(--text-editorial);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Editorial em — accent colour set per section, never two accents at once */
.headline-massive em,
.headline-editorial em { font-style: normal; }
.accent-gold  em, em.accent-gold  { color: var(--gold-400); }
.accent-ember em, em.accent-ember { color: var(--ember-300); }
.accent-azure em, em.accent-azure { color: var(--azure-400); }
.accent-paint em, em.accent-paint { color: var(--paint-400); }
.accent-aqua  em, em.accent-aqua  { color: var(--aqua-400); }

/* =====================================================
   Photography vertical (azure) — mirrors ember usage on firefighting
   ===================================================== */
.is-photography .cine-hero-headline em { color: var(--azure-400); }
.is-photography .cine-ed h2 em { color: var(--azure-400); }
.is-photography .cine-panel-num,
.is-photography .cine-panel h2 em { color: var(--azure-400); }
.is-photography .cine-head h2 em { color: var(--azure-400); }
.is-photography .cine-hcard-num { color: var(--azure-400); }
.is-photography .cine-step-num { color: var(--azure-400); }
.is-photography .eyebrow-glyph,
.is-photography .eyebrow-glyph.is-azure { color: var(--azure-400); }
.is-photography .nav-rotor { color: var(--azure-400); }
.is-photography ::selection { background: var(--azure-500); color: var(--ink-100); }
.is-photography .cmp-spec-value { color: var(--ink-100); }
.is-photography .cmp-faq-icon::before, .is-photography .cmp-faq-icon::after { background: var(--azure-400); }
.is-photography .cmp-trust-dot { color: var(--azure-400); }
.is-photography .cmp-footer-mark .rotor-mark { color: var(--azure-400); }
.is-photography .cmp-stat-num em { color: var(--azure-400); }
.eyebrow-glyph.is-azure { color: var(--azure-400); }

/* Azure buttons (mirror btn-gold / btn-ember) */
.btn-azure {
  background: var(--azure-500);
  color: var(--ink-100);
  border-color: var(--azure-500);
}
.btn-azure:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px var(--azure-glow);
}
.btn-outline-azure {
  background: transparent;
  color: var(--azure-400);
  border-color: var(--border-azure);
}
.btn-outline-azure:hover {
  background: var(--azure-500);
  color: var(--ink-100);
  border-color: var(--azure-500);
}
/* Azure full-screen accent treatment */
.cine-fullscreen.is-azure::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,7,0.6), rgba(4,8,16,0.85)), radial-gradient(120% 90% at 50% 30%, var(--azure-glow), transparent 60%);
}
.cine-fullscreen.is-azure h2 em { font-style: normal; color: var(--azure-400); }
.is-photography .nav-link:hover,
.is-photography .nav-link.is-active { color: var(--azure-400); }
.is-photography .nav-link.is-active::after { background: var(--azure-400); }
.nav-link.is-photo { color: var(--azure-400); }

/* =====================================================
   Painting vertical (forest green) — mirrors ember usage on firefighting
   ===================================================== */
.is-painting .cine-hero-headline em { color: var(--paint-400); }
.is-painting .cine-ed h2 em { color: var(--paint-400); }
.is-painting .cine-panel-num,
.is-painting .cine-panel h2 em { color: var(--paint-400); }
.is-painting .cine-head h2 em { color: var(--paint-400); }
.is-painting .cine-hcard-num { color: var(--paint-400); }
.is-painting .cine-step-num { color: var(--paint-400); }
.is-painting .eyebrow-glyph,
.is-painting .eyebrow-glyph.is-paint { color: var(--paint-400); }
.is-painting .nav-rotor { color: var(--paint-400); }
.is-painting ::selection { background: var(--paint-500); color: var(--ink-100); }
.is-painting .cmp-spec-value { color: var(--ink-100); }
.is-painting .cmp-faq-icon::before, .is-painting .cmp-faq-icon::after { background: var(--paint-400); }
.is-painting .cmp-trust-dot { color: var(--paint-400); }
.is-painting .cmp-footer-mark .rotor-mark { color: var(--paint-400); }
.is-painting .cmp-stat-num em { color: var(--paint-400); }
.is-painting .nav-link:hover,
.is-painting .nav-link.is-active { color: var(--paint-400); }
.is-painting .nav-link.is-active::after { background: var(--paint-400); }
.eyebrow-glyph.is-paint { color: var(--paint-400); }
.nav-link.is-paint { color: var(--paint-400); }

.btn-paint {
  background: var(--paint-500);
  color: var(--ink-100);
  border-color: var(--paint-500);
}
.btn-paint:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px var(--paint-glow);
}
.btn-outline-paint {
  background: transparent;
  color: var(--paint-400);
  border-color: var(--border-paint);
}
.btn-outline-paint:hover {
  background: var(--paint-500);
  color: var(--ink-100);
  border-color: var(--paint-500);
}
.cine-fullscreen.is-paint::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,7,0.6), rgba(6,16,10,0.85)), radial-gradient(120% 90% at 50% 30%, var(--paint-glow), transparent 60%);
}
.cine-fullscreen.is-paint h2 em { font-style: normal; color: var(--paint-400); }

/* =====================================================
   Water Rescue vertical (turquoise) — mirrors azure usage
   ===================================================== */
.is-water .cine-hero-headline em { color: var(--aqua-400); }
.is-water .cine-ed h2 em { color: var(--aqua-400); }
.is-water .cine-panel-num,
.is-water .cine-panel h2 em { color: var(--aqua-400); }
.is-water .cine-head h2 em { color: var(--aqua-400); }
.is-water .cine-hcard-num { color: var(--aqua-400); }
.is-water .cine-step-num { color: var(--aqua-400); }
.is-water .eyebrow-glyph,
.is-water .eyebrow-glyph.is-aqua { color: var(--aqua-400); }
.is-water .nav-rotor { color: var(--aqua-400); }
.is-water ::selection { background: var(--aqua-500); color: var(--ink-100); }
.is-water .cmp-spec-value { color: var(--ink-100); }
.is-water .cmp-faq-icon::before, .is-water .cmp-faq-icon::after { background: var(--aqua-400); }
.is-water .cmp-trust-dot { color: var(--aqua-400); }
.is-water .cmp-footer-mark .rotor-mark { color: var(--aqua-400); }
.is-water .cmp-stat-num em { color: var(--aqua-400); }
.is-water .nav-link:hover,
.is-water .nav-link.is-active { color: var(--aqua-400); }
.is-water .nav-link.is-active::after { background: var(--aqua-400); }
.eyebrow-glyph.is-aqua { color: var(--aqua-400); }
.nav-link.is-aqua { color: var(--aqua-400); }

.btn-aqua {
  background: var(--aqua-500);
  color: var(--ink-100);
  border-color: var(--aqua-500);
}
.btn-aqua:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px var(--aqua-glow);
}
.btn-outline-aqua {
  background: transparent;
  color: var(--aqua-400);
  border-color: var(--border-aqua);
}
.btn-outline-aqua:hover {
  background: var(--aqua-500);
  color: var(--ink-100);
  border-color: var(--aqua-500);
}
.cine-fullscreen.is-aqua::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,5,7,0.6), rgba(4,16,18,0.85)), radial-gradient(120% 90% at 50% 30%, var(--aqua-glow), transparent 60%);
}
.cine-fullscreen.is-aqua h2 em { font-style: normal; color: var(--aqua-400); }

/* =====================================================
   Comparison table (Skyline vs Traditional) — shared primitive
   ===================================================== */
.cmp-vs {
  width: 100%;
  border: 1px solid var(--border-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cmp-vs-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1.4fr;
  border-top: 1px solid var(--border-faint);
}
.cmp-vs-row:first-child { border-top: 0; }
.cmp-vs-row > div {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-body);
  color: var(--ink-200);
  line-height: 1.45;
  display: flex;
  align-items: center;
}
.cmp-vs-head > div {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-h5);
  color: var(--ink-100);
  background: var(--ink-850);
}
.cmp-vs-attr { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; color: var(--ink-400); }
.cmp-vs-skyline { color: var(--ink-100); border-left: 2px solid var(--gold-400); }
.is-firefighting .cmp-vs-skyline { border-left-color: var(--ember-300); }
.is-photography .cmp-vs-skyline { border-left-color: var(--azure-400); }
.cmp-vs-head .cmp-vs-skyline { color: var(--gold-400); }
.is-firefighting .cmp-vs-head .cmp-vs-skyline { color: var(--ember-300); }
.is-photography .cmp-vs-head .cmp-vs-skyline { color: var(--azure-400); }
.cmp-vs-trad { color: var(--ink-400); }
@media (max-width: 720px) {
  .cmp-vs-row { grid-template-columns: 1fr; }
  .cmp-vs-row > div { padding: var(--space-3) var(--space-5); }
  .cmp-vs-attr { padding-top: var(--space-5); color: var(--ink-300); font-size: 12px; }
  /* The head row's "Skyline X" / "Traditional Y" copy repeats per value below
     (see .cmp-vs-skyline/.cmp-vs-trad ::before), so hide it instead of
     showing a disconnected legend at the top of the table. */
  .cmp-vs-head { display: none; }
  /* Each stacked value keeps an explicit label (populated from the head row
     via data-label, injected at build time) so values never appear
     unlabeled on narrow screens — this is the actual mobile fix for the
     "pieces missing" comparison-table bug. */
  .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-skyline,
  .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-trad {
    display: block;
    padding-top: var(--space-2);
  }
  .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-skyline::before,
  .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-trad::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    margin-bottom: 2px;
  }
  /* --accent-400 tracks each page's business-vertical color via
     body[data-accent] (see variant.css) so the label matches the same
     accent already used for the .cmp-vs-skyline left border. */
  .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-skyline::before { color: var(--accent-400, var(--gold-400)); }
  .is-firefighting .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-skyline::before { color: var(--ember-300); }
  .is-photography .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-skyline::before { color: var(--azure-400); }
  .is-landscape .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-skyline::before { color: var(--land-400); }
  .cmp-vs-row:not(.cmp-vs-head) > .cmp-vs-trad::before { color: var(--ink-400); }
}

/* Surface grid (Every Surface, What we shoot, Why Skyline 3-card rows) */
.cmp-surface-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.cmp-surface {
  border: 1px solid var(--border-faint);
  border-radius: var(--r-md);
  padding: var(--space-8) var(--space-6);
  background: var(--glass-tint);
  transition: border-color var(--dur-quick) var(--ease-luke), transform var(--dur-quick) var(--ease-luke);
}
.cmp-surface:hover { transform: translateY(-3px); border-color: var(--border-gold); }
.is-firefighting .cmp-surface:hover { border-color: var(--border-ember); }
.is-photography .cmp-surface:hover { border-color: var(--border-azure); }
.cmp-surface h3 { font-family: var(--font-display); font-size: var(--text-h5); text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink-100); margin-bottom: var(--space-3); }
.cmp-surface p { color: var(--ink-300); font-size: 14px; line-height: 1.55; }
.cmp-surface-icon { color: var(--gold-400); font-family: var(--font-display); font-size: var(--text-h5); display:block; margin-bottom: var(--space-3); }
.is-firefighting .cmp-surface-icon { color: var(--ember-300); }
.is-photography .cmp-surface-icon { color: var(--azure-400); }

/* Photo service card with image */
.cmp-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.cmp-photo-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--border-faint); min-height: 320px;
  display: flex; align-items: flex-end; isolation: isolate;
  transition: transform var(--dur-quick) var(--ease-luke), border-color var(--dur-quick) var(--ease-luke);
}
.cmp-photo-card:hover { transform: translateY(-4px); border-color: var(--border-azure); }
.cmp-photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s var(--ease-luke); }
.cmp-photo-card:hover img { transform: scale(1.05); }
.cmp-photo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,7,0.05) 0%, rgba(5,5,7,0.9) 100%); }
.cmp-photo-card-body { padding: var(--space-8); }
.cmp-photo-card-num { font-family: var(--font-display); font-size: var(--text-h5); color: var(--azure-400); }
.cmp-photo-card h3 { font-family: var(--font-display); font-size: var(--text-h4); text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink-100); margin: var(--space-2) 0 var(--space-2); }
.cmp-photo-card p { color: var(--ink-300); font-size: 14px; line-height: 1.5; }

/* Three-vertical homepage box row */
.cmp-vert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .cmp-vert-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); max-width: 720px; margin: 0 auto; } }
@media (max-width: 560px) { .cmp-vert-grid { grid-template-columns: 1fr; max-width: 480px; } }
.cmp-vert {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--border-faint); min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;
  text-decoration: none; color: inherit;
  transition: transform var(--dur-quick) var(--ease-luke), border-color var(--dur-quick) var(--ease-luke);
}
@media (min-width: 1200px) { .cmp-vert { min-height: 420px; } }
.cmp-vert img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s var(--ease-luke); }
/* Base overlay for readability */
.cmp-vert::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,7,0.15) 0%, rgba(5,5,7,0.55) 50%, rgba(5,5,7,0.95) 100%); transition: background var(--dur-quick) var(--ease-luke); }

/* Service-colored bottom gradient overlay (medium treatment) */
.cmp-vert.is-clean::after { background: linear-gradient(180deg, rgba(5,5,7,0.10) 0%, rgba(5,5,7,0.50) 45%, rgba(232,184,75,0.30) 100%), linear-gradient(180deg, transparent 60%, rgba(5,5,7,0.75) 100%); }
.cmp-vert.is-paint::after { background: linear-gradient(180deg, rgba(5,5,7,0.10) 0%, rgba(5,5,7,0.50) 45%, rgba(74,148,102,0.35) 100%), linear-gradient(180deg, transparent 60%, rgba(5,5,7,0.75) 100%); }
.cmp-vert.is-fire::after  { background: linear-gradient(180deg, rgba(5,5,7,0.10) 0%, rgba(5,5,7,0.50) 45%, rgba(217,54,43,0.35) 100%), linear-gradient(180deg, transparent 60%, rgba(5,5,7,0.75) 100%); }
.cmp-vert.is-photo::after { background: linear-gradient(180deg, rgba(5,5,7,0.10) 0%, rgba(5,5,7,0.50) 45%, rgba(61,111,184,0.40) 100%), linear-gradient(180deg, transparent 60%, rgba(5,5,7,0.75) 100%); }
.cmp-vert.is-land::after  { background: linear-gradient(180deg, rgba(5,5,7,0.10) 0%, rgba(5,5,7,0.50) 45%, rgba(46,93,62,0.40) 100%), linear-gradient(180deg, transparent 60%, rgba(5,5,7,0.75) 100%); }
.cmp-vert.is-aqua::after  { background: linear-gradient(180deg, rgba(5,5,7,0.10) 0%, rgba(5,5,7,0.50) 45%, rgba(31,169,160,0.35) 100%), linear-gradient(180deg, transparent 60%, rgba(5,5,7,0.75) 100%); }

/* Colored default border per service (medium) */
.cmp-vert.is-clean { border-color: var(--border-gold); }
.cmp-vert.is-paint { border-color: var(--border-paint); }
.cmp-vert.is-fire  { border-color: var(--border-ember); }
.cmp-vert.is-photo { border-color: var(--border-azure); }
.cmp-vert.is-land  { border-color: var(--border-land); }
.cmp-vert.is-aqua  { border-color: var(--border-aqua); }

.cmp-vert-body { padding: var(--space-6) var(--space-6) var(--space-7); position: relative; z-index: 1; }
@media (min-width: 1200px) { .cmp-vert-body { padding: var(--space-5) var(--space-5) var(--space-6); } }
.cmp-vert-kicker { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-400); display: block; margin-bottom: var(--space-3); }
.cmp-vert.is-clean .cmp-vert-kicker { color: var(--gold-400); }
.cmp-vert.is-fire .cmp-vert-kicker { color: var(--ember-300); }
.cmp-vert.is-photo .cmp-vert-kicker { color: var(--azure-400); }
.cmp-vert.is-paint .cmp-vert-kicker { color: var(--paint-400); }
.cmp-vert.is-land  .cmp-vert-kicker { color: var(--land-400); }
.cmp-vert.is-aqua  .cmp-vert-kicker { color: var(--aqua-400); }
.cmp-vert h3 { font-family: var(--font-display); font-size: var(--text-h3); text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink-100); line-height: 1.02; margin-bottom: var(--space-4); overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.cmp-vert-kicker, .cmp-vert-link { overflow-wrap: break-word; }
@media (min-width: 1200px) { .cmp-vert h3 { font-size: 24px; margin-bottom: var(--space-3); } .cmp-vert p { font-size: 13.5px; margin-bottom: var(--space-4); } .cmp-vert-link { font-size: 11px; letter-spacing: 0.14em; } .cmp-vert-kicker { font-size: 10.5px; } }
.cmp-vert p { color: var(--ink-200); font-size: 15px; line-height: 1.5; margin-bottom: var(--space-5); }
.cmp-vert-link { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-100); display: inline-flex; align-items: center; gap: var(--space-2); }
/* Hover: lift, saturate image, stronger colored overlay + glow */
.cmp-vert:hover img { transform: scale(1.06); filter: saturate(1.15) brightness(1.02); }
.cmp-vert.is-clean:hover { transform: translateY(-5px); border-color: rgba(232,184,75,0.75); box-shadow: 0 20px 44px -18px var(--gold-glow); }
.cmp-vert.is-clean:hover::after { background: linear-gradient(180deg, rgba(5,5,7,0.05) 0%, rgba(232,184,75,0.20) 40%, rgba(217,163,50,0.70) 100%), linear-gradient(180deg, transparent 55%, rgba(5,5,7,0.55) 100%); }
.cmp-vert.is-paint:hover { transform: translateY(-5px); border-color: rgba(74,148,102,0.80); box-shadow: 0 20px 44px -18px var(--paint-glow); }
.cmp-vert.is-paint:hover::after { background: linear-gradient(180deg, rgba(5,5,7,0.05) 0%, rgba(74,148,102,0.25) 40%, rgba(42,106,63,0.75) 100%), linear-gradient(180deg, transparent 55%, rgba(5,5,7,0.55) 100%); }
.cmp-vert.is-fire:hover  { transform: translateY(-5px); border-color: rgba(255,107,94,0.80); box-shadow: 0 20px 44px -18px var(--ember-glow); }
.cmp-vert.is-fire:hover::after { background: linear-gradient(180deg, rgba(5,5,7,0.05) 0%, rgba(255,107,94,0.22) 40%, rgba(217,54,43,0.70) 100%), linear-gradient(180deg, transparent 55%, rgba(5,5,7,0.55) 100%); }
.cmp-vert.is-photo:hover { transform: translateY(-5px); border-color: rgba(106,149,214,0.80); box-shadow: 0 20px 44px -18px var(--azure-glow); }
.cmp-vert.is-photo:hover::after { background: linear-gradient(180deg, rgba(5,5,7,0.05) 0%, rgba(106,149,214,0.25) 40%, rgba(61,111,184,0.75) 100%), linear-gradient(180deg, transparent 55%, rgba(5,5,7,0.55) 100%); }
.cmp-vert.is-land:hover  { transform: translateY(-5px); border-color: rgba(76,139,96,0.80); box-shadow: 0 20px 44px -18px var(--land-glow); }
.cmp-vert.is-land:hover::after { background: linear-gradient(180deg, rgba(5,5,7,0.05) 0%, rgba(76,139,96,0.25) 40%, rgba(46,93,62,0.75) 100%), linear-gradient(180deg, transparent 55%, rgba(5,5,7,0.55) 100%); }
.cmp-vert.is-aqua:hover  { transform: translateY(-5px); border-color: rgba(79,207,199,0.80); box-shadow: 0 20px 44px -18px var(--aqua-glow); }
.cmp-vert.is-aqua:hover::after { background: linear-gradient(180deg, rgba(5,5,7,0.05) 0%, rgba(79,207,199,0.25) 40%, rgba(31,169,160,0.75) 100%), linear-gradient(180deg, transparent 55%, rgba(5,5,7,0.55) 100%); }

/* Hover: link + kicker keep their service color */
.cmp-vert.is-clean:hover .cmp-vert-link { color: var(--gold-400); }
.cmp-vert.is-fire:hover  .cmp-vert-link { color: var(--ember-300); }
.cmp-vert.is-photo:hover .cmp-vert-link { color: var(--azure-400); }
.cmp-vert.is-paint:hover .cmp-vert-link { color: var(--paint-400); }
.cmp-vert.is-land:hover  .cmp-vert-link { color: var(--land-400); }
.cmp-vert.is-aqua:hover  .cmp-vert-link { color: var(--aqua-400); }

/* Single-line credibility band */
.cmp-serveband {
  text-align: center;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: clamp(13px, 1.4vw, 16px);
  color: var(--ink-300); line-height: 2;
  max-width: 1100px; margin: 0 auto;
}
.cmp-serveband b { color: var(--gold-400); font-weight: inherit; }

/* ─────────────────────────────────────────────────────────────
   Landscape service theming (v3.8) — mirrors paint/aqua/gold sets
   ─────────────────────────────────────────────────────────── */
.accent-land em, em.accent-land { color: var(--land-400); }
.is-landscape .cine-hero-headline em { color: var(--land-400); }
.is-landscape .cine-ed h2 em { color: var(--land-400); }
.is-landscape .cine-panel h2 em { color: var(--land-400); }
.is-landscape .cine-head h2 em { color: var(--land-400); }
.is-landscape .cine-hcard-num { color: var(--land-400); }
.is-landscape .cine-step-num { color: var(--land-400); }
.is-landscape .cine-panel-num { color: var(--land-400); }
.is-landscape .eyebrow-glyph.is-land { color: var(--land-400); }
.is-landscape .nav-rotor { color: var(--land-400); }
.is-landscape ::selection { background: var(--land-500); color: var(--ink-100); }
.is-landscape .cmp-faq-icon::before, .is-landscape .cmp-faq-icon::after { background: var(--land-400); }
.is-landscape .cmp-trust-dot { color: var(--land-400); }
.is-landscape .cmp-footer-mark .rotor-mark { color: var(--land-400); }
.is-landscape .cmp-stat-num em { color: var(--land-400); }
.is-landscape .nav-link.is-active { color: var(--land-400); }
.is-landscape .nav-link.is-active::after { background: var(--land-400); }
.is-landscape .sector-num { color: var(--land-400); }
.is-landscape .cmp-surface-icon { color: var(--land-400); }
.is-landscape .cmp-tier-kicker { color: var(--land-400); }
.is-landscape .cmp-tier-popular { border-color: rgba(76,139,96,0.4); }
.is-landscape .cmp-tier-popular .cmp-tier-kicker { color: var(--land-400); }
.is-landscape .cmp-vs-skyline { color: var(--land-400); }
.is-landscape .cine-hero-lede em,
.is-landscape em.accent-land { color: var(--land-400); }
.eyebrow-glyph.is-land { color: var(--land-400); }
.nav-link.is-land { color: var(--land-400); }

/* Landscape button */
.btn-land {
  background: var(--land-500);
  color: var(--ink-100);
  border-color: var(--land-500);
}
.btn-land:hover {
  background: var(--land-400);
  border-color: var(--land-400);
  box-shadow: 0 14px 36px -10px var(--land-glow);
}
.btn-outline-land {
  color: var(--land-400);
  border-color: var(--land-400);
}
.btn-outline-land:hover {
  background: var(--land-500);
  color: var(--ink-100);
  border-color: var(--land-500);
}
.cine-fullscreen.is-land {
  background: linear-gradient(180deg, rgba(5,5,7,0.6), rgba(6,16,10,0.85)), radial-gradient(120% 90% at 50% 30%, var(--land-glow), transparent 60%);
}
.cine-fullscreen.is-land h2 em { font-style: normal; color: var(--land-400); }