/* ============================================================================
   DESERT VISTA CONSTRUCTION — "HIGH DESERT SURVEY" bespoke art-direction
   ----------------------------------------------------------------------------
   One-of-one design for a Nogales AZ GENERAL CONTRACTOR, built by MIXING:

   1) The CARUTH craft (the gold-standard voice): ANTON condensed display +
      JETBRAINS MONO kickers + Barlow body, a full-bleed STAT BAND, "TICKET"
      service cards, a numbered editorial service index, giant outline words
      behind hero / CTA, squared tactile buttons.

   2) Desert Vista's own material identity (so it is NOT a BSD/Caruth clone):
      a warm HIGH-DESERT sand canvas instead of plaster white; sunset-warm
      charcoal darks; the brand's muted gold; a "survey / plot line" motif
      (horizontal grade lines + a crosshair "+" kicker tick) instead of
      drywall seams; and a "Dirt to done" reveal slider as the signature
      interactive.

   Loaded AFTER styles.css so it overrides the generic template look.
   ========================================================================== */

:root{
  /* High-desert canvas */
  --sand:         #F1EDE4;   /* warm desert sand — primary page canvas */
  --sand-2:       #E8E2D4;   /* caliche off-white */
  --adobe:        #DDD5C2;   /* dried-adobe tan */
  --dust:         #D2C8B2;

  /* Warm charcoal (dark sections) — never pure black */
  --mesa:         #151517;
  --mesa-2:       #1E1E21;
  --mesa-3:       #29292D;

  /* Re-map the template's core tokens onto the new palette */
  --paper:        #F1EDE4;
  --bone:         #E8E2D4;
  --bone-2:       #DDD5C2;
  --ink:          #151517;
  --ink-2:        #1E1E21;
  --steel:        #29292D;

  --text:         #221F1A;
  --text-80:      rgba(34,31,26,0.82);
  --text-65:      rgba(34,31,26,0.62);
  --text-45:      rgba(34,31,26,0.42);
  --text-25:      rgba(34,31,26,0.22);

  --paper-80:     rgba(241,237,228,0.86);
  --paper-65:     rgba(241,237,228,0.66);
  --paper-45:     rgba(241,237,228,0.48);
  --paper-25:     rgba(241,237,228,0.24);

  /* Desert Vista brand gold — muted, warm, from the sign */
  --gold-300:     #D7BB7E;
  --gold-400:     #CFAE6F;
  --gold-500:     #C8A968;
  --gold-600:     #A88B4B;
  --gold-700:     #826A35;
  --on-gold:      #191510;

  --divider-light: #D8D0BE;
  --divider-dark:  rgba(241,237,228,0.10);
  --rule:          #D8D0BE;
  --seam:          #C8A968;

  --font-display: "Anton","Archivo","Inter",system-ui,sans-serif;
  --font-body:    "Barlow","Inter",system-ui,sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,monospace;
}

/* ── Typography: Anton condensed display, Barlow body, mono details ──────── */
body{ font-family: var(--font-body); }
.display, h1, h2, h3, h4,
.stat-cell .k, .process-num, .cred-card .num,
.price-band-amount .amt{ font-family: var(--font-display) !important; }

.display, h1, h2{
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.04 !important;
  text-transform: uppercase;
}
h3, h4{ font-weight: 400 !important; letter-spacing: 0.01em !important; text-transform: uppercase; }
.tight{ letter-spacing: 0.005em !important; }

/* Warm the canvas + a barely-there desert grain so flat areas aren't dead */
body{
  background-color: var(--sand);
  color: var(--text);
  background-image:
    radial-gradient(circle at 82% 4%, rgba(200,169,104,0.06), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}
::selection{ background: var(--gold-500); color: var(--on-gold); }

/* ── Section themes ──────────────────────────────────────────────────────── */
.section-light  { background: var(--sand); color: var(--text); }
.section-bone   { background: var(--sand-2); color: var(--text); }
.section-dark   { background: var(--mesa); color: var(--paper); }
.section-darker { background: #0F0F11; color: var(--paper); }

/* Sunset graze: dark sections get a soft low warm light from the west */
.section-dark, .section-darker{ position: relative; }
.section-dark::before, .section-darker::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(200,169,104,0.09), transparent 55%),
    linear-gradient(255deg, rgba(255,255,255,0.04) 0%, transparent 34%);
}
.section-dark > *, .section-darker > *{ position: relative; z-index: 1; }

/* ── The mono kicker: a surveyor's crosshair "+" tick, wide-tracked gold ─── */
.eyebrow, .smallcaps{
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase;
  color: var(--gold-600);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before{
  content: "+"; display: inline; width: auto; height: auto; margin: 0;
  background: none; font-weight: 700; letter-spacing: 0; color: inherit;
  vertical-align: baseline;
}
.smallcaps::before{ content: "+ "; font-weight: 700; letter-spacing: 0; }
.section-dark .eyebrow, .section-darker .eyebrow,
.section-dark .smallcaps, .section-darker .smallcaps{ color: var(--gold-400); }

.standfirst{ font-family: var(--font-body) !important; font-weight: 400; }

/* ── Gold rule → a surveyor's plot line with end ticks ───────────────────── */
.gold-rule{
  height: 2px; width: 64px;
  background: linear-gradient(90deg, var(--seam), var(--seam));
  position: relative; border: 0;
}
.gold-rule::before, .gold-rule::after{
  content:''; position:absolute; top:-4px; width:2px; height:10px; background: var(--seam);
}
.gold-rule::before{ left:0; } .gold-rule::after{ right:0; }

/* ── Grade band: repeating survey hatch used as a thin section signature ─── */
.seam-band{
  height: 8px; border: 0;
  background: repeating-linear-gradient(135deg,
    var(--gold-500) 0 14px, rgba(200,169,104,0.18) 14px 28px);
  opacity: 0.9;
}
.seam-band.on-dark{ background: repeating-linear-gradient(135deg,
    var(--gold-500) 0 14px, rgba(21,21,23,0) 14px 28px); }

/* ── Buttons: squared, tactile, gold face ────────────────────────────────── */
.btn{
  font-family: var(--font-body) !important;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 2px;
  background: var(--gold-500);
  color: var(--on-gold);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn:hover{ background: var(--gold-400); color: var(--on-gold); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(168,139,75,0.7), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-outline-light{ border-color: rgba(241,237,228,0.42); color: var(--paper); border-radius:2px; }
.btn-outline-light:hover{ background: var(--paper); color: var(--mesa); }
.btn-outline-dark{ border-color: rgba(34,31,26,0.4); color: var(--text); border-radius:2px; }
.btn-outline-dark:hover{ background: var(--mesa); color: var(--paper); }
.btn-outline{ border-color: rgba(34,31,26,0.4); color: var(--text); border-radius:2px; }
.btn .arr, .btn svg{ transition: transform .18s ease; }
.btn:hover .arr{ transform: translateX(4px); }

/* ── STAT BAND (full-bleed gold, honest structural stats only) ───────────── */
.statband{ background: var(--gold-500); color: var(--on-gold); position: relative; overflow: clip; }
.statband::before{
  content:''; position:absolute; top:0; left:0; right:0; height:8px;
  background: repeating-linear-gradient(135deg, var(--mesa) 0 14px, transparent 14px 28px);
  opacity: 0.16;
}
.statband-inner{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem;
  padding: clamp(1.8rem,4vw,2.8rem) 0;
}
.statband .stat{ border-left: 3px solid var(--on-gold); padding-left: 1.1rem; }
.statband .stat .sv{ font-family: var(--font-display); font-size: clamp(2rem,4.4vw,3.4rem); line-height: 1; }
.statband .stat .sl{ font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.4rem; color: rgba(25,21,16,0.82); }
@media(max-width:900px){ .statband-inner{ grid-template-columns: 1fr 1fr; gap: 1.4rem 0.9rem; } }

/* ── "TICKET" service cards ──────────────────────────────────────────────── */
.service-card, .cred-card, .testimonial{
  border-radius: 3px;
  border-color: var(--divider-light);
  background: #FAF7F0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  position: relative;
}
.service-card{ transition: border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; overflow: hidden; }
.service-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1); z-index: 3;
}
.service-card:hover::before{ transform: scaleX(1); }
.service-card:hover{ border-color: var(--gold-500); transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(34,31,26,0.4); }
.service-card::after{
  content:''; position:absolute; left:28px; right:28px; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.service-card:hover::after{ transform: scaleX(1); }
.service-card.dark{ background: var(--mesa-2); border-color: rgba(241,237,228,0.08); }
.cred-card{ background: var(--mesa-2); border-color: rgba(241,237,228,0.08); border-radius:3px; }
.cred-card:hover{ border-color: rgba(200,169,104,0.4); }
.cred-card .num{ color: var(--gold-500); }

.svc-ticket{
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-600);
  display: inline-block; margin-bottom: 0.35rem;
}
.section-dark .svc-ticket, .service-card.dark .svc-ticket{ color: var(--gold-400); }

.service-card .img-slot,
.gallery-tile{
  background-image: linear-gradient(120deg, var(--adobe), var(--sand-2) 55%, var(--dust));
  background-size: cover;
}

/* ── Gallery tiles: sunset raking-light hover ────────────────────────────── */
.gallery-tile{ border-radius: 3px; }
.gallery-tile::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(245deg, rgba(255,255,255,0.16) 0%, transparent 30%);
  opacity: 0; transition: opacity .4s ease;
}
.gallery-tile:hover::after{ opacity: 1; }

/* ── Trust strip: mesa band with mono tracking ───────────────────────────── */
.trust-strip{ background: var(--mesa); border-top: 0; border-bottom: 0; color: var(--paper); }
.trust-strip-inner{ color: var(--paper-80); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
.trust-strip .dot{ color: var(--gold-500); }

/* ── Process numbers: stamped gold chips ─────────────────────────────────── */
.process-num{ background: var(--gold-500); color: var(--on-gold); border-radius:2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
#site-nav.nav-solid{ background: rgba(21,21,23,0.92); backdrop-filter: blur(10px) saturate(1.1); border-bottom-color: rgba(200,169,104,0.18); }
.nav-link{ color: var(--paper-80); position: relative; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }
.nav-link:hover, .nav-link.active{ color: var(--gold-400); }
.nav-link::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--gold-500); transition: right .25s ease; }
.nav-link:hover::after, .nav-link.active::after{ right:0; }

/* ── Modal: sand panel, gold top edge ────────────────────────────────────── */
.modal-box{ background: #FAF7F0; border-top: 4px solid var(--gold-500); border-radius: 4px; }

/* ── Hero signature: low sunset light + horizontal GRADE LINES ───────────── */
.vista-hero{ position: relative; }
.vista-hero .rake-light{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(260deg, rgba(255,255,255,0.09) 0%, transparent 26%),
    radial-gradient(90% 70% at 92% 88%, rgba(200,169,104,0.16), transparent 60%);
  mix-blend-mode: screen;
}
.grade-lines{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.55;
  background-image: linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 72px;
  mask-image: linear-gradient(180deg, transparent 30%, black 60%, black 86%, transparent);
}

.hero-ghost{
  position:absolute; left:-0.02em; bottom:-0.12em; z-index:0;
  font-family: var(--font-display); font-size: clamp(5rem,15vw,13rem); line-height:1;
  color: transparent; -webkit-text-stroke: 1px rgba(241,237,228,0.05);
  pointer-events:none; user-select:none; white-space:nowrap;
}
@media(max-width:1023px){ .hero-ghost{ display:none; } }

/* ── "Dirt to done" before/after reveal slider ───────────────────────────── */
.hero-ba-frame{ position: relative; z-index: 2; }
.hero-ba-frame .ba{
  aspect-ratio: 4/3;
  border: 1px solid rgba(200,169,104,0.30);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.2);
}
.hero-ba-cap{
  margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  letter-spacing: 0.02em; color: var(--paper-65); max-width: 46ch;
}
@media (max-width: 1023px){
  .hero-ba-frame{ margin-top: 4px; }
  .hero-ba-frame .ba{ aspect-ratio: 16/10; }
}
.ba{
  position: relative; width: 100%; aspect-ratio: 16/10;
  overflow: hidden; border-radius: 4px; user-select: none; touch-action: none;
  border: 1px solid rgba(241,237,228,0.12);
  background: #1b1b1e;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba .ba-after{ clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba .ba-line{
  position:absolute; top:0; bottom:0; left: var(--pos, 50%); width:2px;
  background: var(--gold-500); transform: translateX(-1px); z-index:3;
  box-shadow: 0 0 14px 2px rgba(200,169,104,0.5);
}
.ba .ba-handle{
  position:absolute; top:50%; left: var(--pos, 50%);
  width:46px; height:46px; transform: translate(-50%,-50%);
  background: var(--gold-500); color: var(--on-gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:4;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,0.6); cursor: ew-resize; font-weight:900;
}
.ba .ba-tag{
  position:absolute; bottom:14px; z-index:3; font-family: var(--font-mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.14em; padding:6px 12px; border-radius:2px;
  background: rgba(17,17,18,0.72); color: var(--paper); backdrop-filter: blur(4px);
}
.ba .ba-tag.left{ left:14px; }
.ba .ba-tag.right{ right:14px; color: var(--gold-300); }

/* ── Stat / number strip (secondary, inner pages) ────────────────────────── */
.stat-strip{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--divider-light); border:1px solid var(--divider-light); border-radius:3px; overflow:hidden; }
@media(min-width:768px){ .stat-strip{ grid-template-columns: repeat(4,1fr); } }
.stat-cell{ background: #FAF7F0; padding:26px 22px; }
.stat-cell .k{ font-family: var(--font-display); font-weight:400; font-size:2.4rem; letter-spacing:0; color: var(--text); line-height:1; }
.stat-cell .l{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color: var(--text-65); margin-top:8px; font-weight:500; }
.section-dark .stat-strip, .section-darker .stat-strip{ background: rgba(241,237,228,0.08); border-color: rgba(241,237,228,0.08); }
.section-dark .stat-cell, .section-darker .stat-cell{ background: var(--mesa-2); }
.section-dark .stat-cell .k, .section-darker .stat-cell .k{ color: var(--gold-400); }
.section-dark .stat-cell .l, .section-darker .stat-cell .l{ color: var(--paper-65); }

/* ── Giant outline words behind CTA / statement bands ────────────────────── */
.giant-ghost{
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.8rem,7.5vw,6rem); line-height:.92;
  color: transparent; -webkit-text-stroke: 1.4px rgba(200,169,104,0.30);
  user-select:none; pointer-events:none; max-width:100%; overflow:hidden;
}
.cta-ghost{
  position:absolute; left:0; right:0; bottom:-1vw; z-index:0; text-align:center;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(4rem,15vw,12rem); line-height:.8;
  color: transparent; -webkit-text-stroke: 1.4px rgba(200,169,104,0.16);
  user-select:none; pointer-events:none; white-space:nowrap; overflow:hidden;
}

/* ── Statement / pull-quote band (its own shape: serif italic on dark) ───── */
.statement-band blockquote{
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.25;
  color: var(--paper); letter-spacing: -0.01em;
}
.statement-band .attr{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-400); margin-top: 1.6rem;
}

/* ── STICKY MOBILE CALL / QUOTE BAR (every page, thumb-reach) ────────────── */
#mobile-cta-bar{
  position: fixed; left:0; right:0; bottom:0; z-index:70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(21,21,23,0.96); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(200,169,104,0.28);
  box-shadow: 0 -6px 20px -8px rgba(0,0,0,0.5);
  padding: max(10px, env(safe-area-inset-bottom, 0px)) 12px 12px;
  gap: 10px;
}
@media(min-width: 1024px){ #mobile-cta-bar{ display: none; } }
#mobile-cta-bar a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-size: 13px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
  padding: 13px 10px; border-radius: 3px;
}
#mobile-cta-bar .mc-call{ background: transparent; color: var(--paper); border:1px solid rgba(241,237,228,0.35); }
#mobile-cta-bar .mc-quote{ background: var(--gold-500); color: var(--on-gold); }
@media(max-width:1023px){
  body{ padding-bottom: 74px; }
  footer{ padding-bottom: 90px !important; }
}

/* ── Reveal easing ───────────────────────────────────────────────────────── */
.reveal{ transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }

/* logo placeholder recolor */
.logo-placeholder{ background: var(--gold-500); color: var(--on-gold); font-family: var(--font-display); }

/* ── Unified photo grade: one warm desert grade over every real photo ────── */
.service-card .img-slot,
.gallery-tile img,
.ba img,
img.photo-grade,
#hero-img{
  filter: saturate(0.92) sepia(0.1) contrast(1.03) brightness(0.99);
}

/* ── Service index (numbered editorial list, home) ───────────────────────── */
.svc-index{ border-top: 1px solid var(--divider-light); }
.svc-index-row{
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 18px; padding: 22px 6px;
  border-bottom: 1px solid var(--divider-light);
  transition: background .2s ease, padding-left .25s cubic-bezier(.16,1,.3,1);
}
.svc-index-num{
  font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
  color: var(--gold-600); letter-spacing: 0.08em;
}
.svc-index-main{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc-index-title{
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.1; color: var(--text); letter-spacing: 0.01em; text-transform: uppercase;
}
.svc-index-short{ font-size: 14px; line-height: 1.55; color: var(--text-65); max-width: 46em; }
.svc-index-arrow{ color: var(--gold-600); font-size: 1.25rem; transition: transform .2s ease; }
.svc-index-row:hover{ background: rgba(200,169,104,0.08); padding-left: 14px; }
.svc-index-row:hover .svc-index-arrow{ transform: translateX(6px); }
@media (min-width: 768px){
  .svc-index-main{ flex-direction: row; align-items: baseline; gap: 20px; }
  .svc-index-title{ flex: 0 0 34%; }
}

/* ── INNER-PAGE HERO: full-bleed photo + left-weighted scrim ─────────────────
   Shared fix for the "headline left, dead space right" inner heroes.
   Usage: <section class="section-dark page-hero ..." style="--hero-img:url('assets/img/x.jpg')">
   The photo fills the whole band; a left-weighted warm-charcoal gradient keeps
   the Anton headline crisp while the jobsite stays visible on the right. */
.page-hero{
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(52vh, 560px);
}
.page-hero > *{ width: 100%; position: relative; }
.page-hero::before{
  content:''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img);
  background-size: cover; background-position: var(--hero-pos, center);
}
.page-hero::after{
  content:''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg, rgba(21,21,23,0.95) 0%, rgba(21,21,23,0.88) 34%, rgba(21,21,23,0.66) 66%, rgba(21,21,23,0.52) 100%),
    linear-gradient(180deg, rgba(21,21,23,0.46) 0%, rgba(21,21,23,0.12) 42%, rgba(21,21,23,0.55) 100%);
}
.page-hero h1{ text-shadow: 0 2px 28px rgba(0,0,0,0.4); }
.page-hero .standfirst{ text-shadow: 0 1px 14px rgba(0,0,0,0.55); }
@media (max-width: 767px){
  .page-hero{ min-height: 46vh; }
  .page-hero::after{
    background:
      linear-gradient(180deg, rgba(21,21,23,0.88) 0%, rgba(21,21,23,0.72) 45%, rgba(21,21,23,0.88) 100%);
  }
}

/* ── Service-index thumbnails (home numbered band, kills the empty middle) ── */
.svc-index-thumb{
  width: 64px; height: 64px; border-radius: 2px; align-self: center;
  background-size: cover; background-position: center;
  border: 1px solid var(--divider-light);
  filter: saturate(0.82); transition: filter .25s ease, transform .25s ease;
}
.svc-index-row:hover .svc-index-thumb{ filter: saturate(1.05); transform: scale(1.05); }
.svc-index-row.has-thumb{ grid-template-columns: auto auto 1fr auto; align-items: center; }
@media (max-width: 639px){
  .svc-index-thumb{ display: none; }
  .svc-index-row.has-thumb{ grid-template-columns: auto 1fr auto; }
}

/* -- SIGNATURE INTERACTIVE #2: "Permit to keys" journey explorer ----------- */
.pj{ max-width:1020px; margin:0 auto; }
.pj-rail{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:4px; margin-bottom:22px; padding:0 2px; }
.pj-track{ position:absolute; left:26px; right:26px; top:22px; height:2px; background:rgba(241,237,228,0.14); z-index:0; }
.pj-fill{ height:100%; width:0%; background:var(--gold-500); transition: width .5s cubic-bezier(.16,1,.3,1); }
.pj-stop{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; background:transparent; border:0; cursor:pointer; padding:0; }
.pj-stop .dot{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.02rem; line-height:1;
  color:var(--paper-65); background:var(--mesa-2);
  border:1px solid rgba(241,237,228,0.2); border-radius:2px;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.pj-stop .lbl{
  font-family:var(--font-mono); font-size:0.62rem; font-weight:700;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--paper-45);
  transition: color .25s ease;
}
.pj-stop:hover .dot{ border-color:rgba(200,169,104,0.5); color:var(--paper); transform:translateY(-2px); }
.pj-stop.done .dot{ border-color:rgba(200,169,104,0.45); color:var(--gold-400); }
.pj-stop[aria-selected="true"] .dot{ background:var(--gold-500); border-color:var(--gold-500); color:var(--on-gold); }
.pj-stop[aria-selected="true"] .lbl{ color:var(--gold-400); }
.pj-stop:focus-visible{ outline:none; }
.pj-stop:focus-visible .dot{ outline:2px solid var(--gold-400); outline-offset:2px; }
.pj-panel{
  border:1px solid rgba(241,237,228,0.12); border-radius:3px;
  background:rgba(255,255,255,0.015); padding:28px 26px 30px; min-height:250px;
}
@media(min-width:768px){ .pj-panel{ padding:34px 36px 36px; min-height:230px; } }
.pj-you{
  font-family:var(--font-mono); font-size:0.74rem; font-weight:600;
  letter-spacing:0.06em; color:var(--paper-65); line-height:1.6;
  border-left:2px solid var(--gold-600); padding-left:12px; margin-bottom:20px;
}
.pj-you span{ color:var(--gold-500); }
.pj-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pj-chip{
  font-family:var(--font-mono); font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-300);
  border:1px solid rgba(200,169,104,0.35); border-radius:2px; padding:9px 12px;
  text-decoration:none; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.pj-chip:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--on-gold); transform:translateY(-2px); }
@media(max-width:639px){
  .pj-stop .lbl{ display:none; }
  .pj-stop .dot{ width:40px; height:40px; }
  .pj-track{ top:20px; left:22px; right:22px; }
}
@media (prefers-reduced-motion: reduce){
  .pj-fill, .pj-stop .dot, .pj-stop .lbl, .pj-chip{ transition:none !important; }
}