/* ══════════════════════════════════════════════════════════
   BALI SUNRISE AGENCY — Shared Styles
   Vogue × Supercool editorial aesthetic
══════════════════════════════════════════════════════════ */

/* ── VARIABLES ───────────────────────────────────────────── */
:root {
  --papaya:   #BD6809;
  --paradise: #9A3F4A;
  --fuschia:  #3D1419;
  --palm:     #2F4731;
  --blue:     #324876;
  --cream:    #F8F4EF;
  --dark:     #1A0D0A;
  --font-h:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-b:   'Open Sans', sans-serif;
  --ease:     cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; cursor: none !important }
html { font-size: 16px }
body {
  background: var(--cream);
  color: var(--dark);
  font-family: var(--font-b);
  overflow-x: hidden;
}
a, button, input, select, textarea, label, [role="button"] {
  cursor: none !important;
  pointer-events: all !important;
}
img { display: block; width: 100%; height: 100%; object-fit: cover }
a { text-decoration: none; color: inherit }
button, input, textarea, select {
  font-family: var(--font-b);
  background: none;
  border: none;
  outline: none;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

/* ── CURSOR ──────────────────────────────────────────────── */
#dot {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #BD6809 !important;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  mix-blend-mode: normal !important;
  will-change: transform;
  transform: translate(-50%, -50%) translateZ(0);
}

#ring {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1.5px solid #BD6809;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 2147483646 !important;
  mix-blend-mode: normal !important;
  will-change: transform;
  transform: translate(-50%, -50%) translateZ(0);
  transition: width 0.3s ease,
              height 0.3s ease,
              opacity 0.3s ease;
}
@media (hover: none) { #dot, #ring { display: none } }

/* ── NAV ─────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  transform: none !important;
  will-change: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 80px);
  height: 72px;
  transition: background .4s;
}
#nav.solid {
  background: rgba(248,244,239,.98);
  border-bottom: 1px solid rgba(26,13,10,.07);
}
.nav-logo {
  height: 50px;
  width: auto;
  max-width: 160px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #FFFFFF;
}
.nav-logo svg, .nav-logo img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
#nav.solid .nav-logo { color: var(--dark); }
.nav-links {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
}
.nav-links a {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248,244,239,.65);
  transition: color .25s;
}
#nav.solid .nav-links a { color: rgba(26,13,10,.45) }
.nav-links a:hover { color: var(--cream) }
#nav.solid .nav-links a:hover { color: var(--dark) }
.nav-links a.active { color: var(--papaya) !important }
#nav .nav-cta {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .65rem 1.5rem;
  border: 1.5px solid rgba(248,244,239,.4);
  color: var(--cream);
  transition: background .3s, border-color .3s, color .3s;
}
#nav.solid .nav-cta {
  border-color: rgba(26,13,10,.2);
  color: var(--dark);
}
#nav .nav-cta:hover { background: var(--papaya); border-color: var(--papaya); color: var(--cream) }
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--cream);
  transition: transform .3s, opacity .3s;
}
#nav.solid .nav-burger span { background: var(--dark) }
.nav-burger { border: 0; background: none; z-index: 950 }
.nav-burger.open span { background: var(--cream) !important }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.nav-burger.open span:nth-child(2) { opacity: 0 }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* ── MOBILE MENU ─────────────────────────────────────────── */
body.mm-open #nav { background: transparent !important; border-bottom: 0 !important }
body.mm-open .nav-logo { color: var(--cream) !important }
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--dark);
  z-index: 890;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(1.4rem, 4vh, 2.2rem);
  opacity: 0;
  pointer-events: none;
  /* visibility:hidden is the only hit-test blocker every engine honors —
     iOS Safari can leak taps through pointer-events:none fixed overlays */
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .35s ease }
.mobile-menu a {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s var(--ease-out), color .25s;
}
.mobile-menu.open a { opacity: 1; transform: none }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--papaya) }
.mobile-menu .mm-cta {
  margin-top: .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  border: 1.5px solid var(--cream);
  padding: .95rem 2.2rem;
}
.mobile-menu.open a:nth-child(1) { transition-delay: .05s }
.mobile-menu.open a:nth-child(2) { transition-delay: .1s }
.mobile-menu.open a:nth-child(3) { transition-delay: .15s }
.mobile-menu.open a:nth-child(4) { transition-delay: .2s }
.mobile-menu.open a:nth-child(5) { transition-delay: .25s }
.mobile-menu.open a:nth-child(6) { transition-delay: .3s }
.mobile-menu.open a:nth-child(7) { transition-delay: .35s }

/* ── PAGE HERO (inner pages) ─────────────────────────────── */
.page-hero {
  padding-top: 72px;
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(40px, 6vw, 80px);
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
  background: var(--cream);
  border-bottom: 1px solid rgba(26,13,10,.08);
}
.page-hero-inner { width: 100% }
.page-hero-label {
  display: block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--papaya);
  margin-bottom: 1rem;
}
.page-hero-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 9rem);
  letter-spacing: -.03em;
  line-height: .92;
  color: var(--dark);
}

/* ── SHARED SECTION ──────────────────────────────────────── */
.sec-pad { padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 80px) }
.sec-label {
  display: block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--papaya);
  margin-bottom: 1.25rem;
}
.sec-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  letter-spacing: -.025em;
  line-height: .93;
  color: var(--dark);
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 80px);
}
.ft-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid rgba(248,244,239,.08);
  flex-wrap: wrap;
}
.ft-logo { height: 30px; color: var(--cream) }
.ft-nav {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  list-style: none;
  flex-wrap: wrap;
}
.ft-nav a {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248,244,239,.4);
  transition: color .25s;
}
.ft-nav a:hover { color: var(--cream) }
.ft-social {
  display: flex;
  gap: 1.5rem;
}
.ft-social a {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(248,244,239,.4);
  transition: color .25s;
}
.ft-social a:hover { color: var(--papaya) }
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(20px, 3vw, 32px);
  flex-wrap: wrap;
  gap: 1rem;
}
.ft-copy {
  font-size: .65rem;
  color: rgba(248,244,239,.22);
  letter-spacing: .08em;
}
.ft-email a {
  font-size: .7rem;
  color: rgba(248,244,239,.35);
  letter-spacing: .06em;
  transition: color .25s;
}
.ft-email a:hover { color: var(--papaya) }

/* ── DIVIDER LINE ────────────────────────────────────────── */
.line-h { width: 100%; height: 1px; background: rgba(26,13,10,.08) }

/* ══════════════════════════════════════════════════════════
   LOCOMOTIVE SCROLL — Premium is-inview Animations
══════════════════════════════════════════════════════════ */

/* ── CLIP-PATH TITLE REVEAL ─────────────────────────────── */
.clip-title {
  overflow: hidden;
}
.clip-title-inner {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.clip-title.is-inview .clip-title-inner {
  transform: translateY(0);
}

/* ── FADE-UP REVEAL ─────────────────────────────────────── */
[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-scroll-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ── IMAGE SCALE REVEAL ─────────────────────────────────── */
.img-reveal {
  overflow: hidden;
}
.img-reveal > * {
  transform: scale(1.07);
  transition: transform 1.7s cubic-bezier(0.19, 1, 0.22, 1);
}
.img-reveal.is-inview > * {
  transform: scale(1);
}

/* ── HORIZONTAL LINE WIPE ───────────────────────────────── */
[data-scroll-wipe] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.3s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-scroll-wipe].is-inview {
  clip-path: inset(0 0% 0 0);
}

/* ── STAGGER DELAYS (children with data-scroll-reveal) ──── */
[data-scroll-stagger] [data-scroll-reveal]:nth-child(1)  { transition-delay: 0s }
[data-scroll-stagger] [data-scroll-reveal]:nth-child(2)  { transition-delay: .1s }
[data-scroll-stagger] [data-scroll-reveal]:nth-child(3)  { transition-delay: .2s }
[data-scroll-stagger] [data-scroll-reveal]:nth-child(4)  { transition-delay: .3s }
[data-scroll-stagger] [data-scroll-reveal]:nth-child(5)  { transition-delay: .4s }
[data-scroll-stagger] [data-scroll-reveal]:nth-child(6)  { transition-delay: .5s }
[data-scroll-stagger] [data-scroll-reveal]:nth-child(7)  { transition-delay: .6s }
[data-scroll-stagger] [data-scroll-reveal]:nth-child(8)  { transition-delay: .7s }

/* ── PAGE HERO TITLE ENTRANCE ───────────────────────────── */
.page-hero-title {
  overflow: hidden;
  padding-bottom: .22em;
}
.page-hero-title .title-line {
  display: block;
  transform: translateY(100%);
  animation: titleSlideIn 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.page-hero-title .title-line:nth-child(2) { animation-delay: .08s }
.page-hero-title .title-line:nth-child(3) { animation-delay: .16s }
@keyframes titleSlideIn {
  to { transform: translateY(0) }
}

/* ── LABEL FADE ─────────────────────────────────────────── */
.page-hero-label {
  opacity: 0;
  animation: fadeIn .8s .3s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1 }
}

/* ── MOBILE NAV ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none }
  .nav-burger { display: flex }
  #nav .nav-cta { display: none }
}

/* ── PAGE TRANSITION OVERLAY ─────────────────────────────── */
#page-transition {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--cream);
  will-change: transform;
  pointer-events: none;
}

/* ── SPLITTYPE LINE WRAPPER ──────────────────────────────── */
.st-line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
}
.sec-title.st-done { overflow: visible }

/* ── MAGNETIC BUTTON BASE ────────────────────────────────── */
.nav-cta, .contact-submit {
  transform-origin: center;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════
   FLOATING BACKGROUND TEXT
══════════════════════════════════════════════════════════ */
#float-bg {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.fb-wrap {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.fb-word {
  display: block;
  font-family: 'Helvetica Neue', 'Inter', 'Arial Black', Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(100px, 13vw, 200px);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px var(--papaya);  /* wider stroke = more visible on cream */
  opacity: 0.08;
  user-select: none;
  will-change: transform;
}

/* Alternate words use white stroke — visible on dark hero/footer */
.fb-word.fb-light {
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.9);
  opacity: 0.07;
}

@media (max-width: 768px) {
  .fb-word          { opacity: 0.035; font-size: clamp(60px, 18vw, 110px); -webkit-text-stroke: 2px var(--papaya); }
  .fb-word.fb-light { opacity: 0.03;  -webkit-text-stroke: 2px rgba(255,255,255,0.9); }
}

/* ══════════════════════════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════════════════════════ */
.svc-faq { background: var(--cream) }
.svc-faq .sec-title { margin-bottom: clamp(2.5rem, 5vw, 4rem) }
.faq-list { max-width: 860px }
.faq-item {
  border-top: 1px solid rgba(26,13,10,.08);
}
.faq-item:last-child { border-bottom: 1px solid rgba(26,13,10,.08) }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  font-family: var(--font-h);
  font-weight: 600;
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
  letter-spacing: -.01em;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none }
.faq-q::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--papaya);
  flex-shrink: 0;
  transition: transform .35s var(--ease);
}
details[open] .faq-q::after { transform: rotate(45deg) }
.faq-a {
  font-size: clamp(.85rem, 1.1vw, .95rem);
  line-height: 1.8;
  color: rgba(26,13,10,.55);
  font-weight: 300;
  padding-bottom: 1.5rem;
  max-width: 720px;
}

/* ══════════════════════════════════════════════════════════
   FOOTER NAP
══════════════════════════════════════════════════════════ */
.ft-nap {
  font-style: normal;
  font-size: .65rem;
  color: rgba(248,244,239,.25);
  letter-spacing: .06em;
  padding: clamp(12px, 2vw, 20px) 0;
  border-top: 1px solid rgba(248,244,239,.06);
  margin-top: clamp(12px, 2vw, 20px);
}
.ft-nap a { color: inherit; transition: color .25s }
.ft-nap a:hover { color: var(--papaya) }

/* ══════════════════════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════════════════════ */
.svc-overview {
  background: var(--cream);
  border-bottom: 1px solid rgba(26,13,10,.08);
}
.svc-overview-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px,8vw,120px);
  align-items: start;
}
.svc-overview-sticky {
  position: sticky;
  top: 100px;
}
.svc-overview-sticky .sec-title { margin-bottom: 1.5rem }
.svc-overview-intro {
  font-size: clamp(.85rem,1.2vw,1rem);
  line-height: 1.75;
  color: rgba(26,13,10,.5);
  font-weight: 300;
  max-width: 320px;
}

.svc-big-list { list-style: none }
.svc-big-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.2rem,2vw,1.8rem) 0;
  border-bottom: 1px solid rgba(26,13,10,.08);
  cursor: pointer;
}
.svc-big-row:first-child { border-top: 1px solid rgba(26,13,10,.08) }
.sbn { font-size:.6rem;font-weight:600;letter-spacing:.18em;color:rgba(26,13,10,.2);min-width:2rem;transition:color .25s }
.sbname {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(1.2rem,2.5vw,2.2rem);
  letter-spacing: -.02em;
  flex: 1;
  transition: color .25s, transform .35s var(--ease);
}
.sb-arr { color:var(--papaya);opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .35s var(--ease) }
.svc-big-row:hover .sbn { color:var(--papaya) }
.svc-big-row:hover .sbname { color:var(--papaya);transform:translateX(6px) }
.svc-big-row:hover .sb-arr { opacity:1;transform:translateX(0) }

/* ── SERVICE DETAIL SECTIONS ──────────────────────────── */
.svc-section {
  padding: clamp(80px,10vw,140px) clamp(24px,5vw,80px);
  border-bottom: 1px solid rgba(26,13,10,.08);
  background: var(--cream);
  scroll-margin-top: 100px;
}
.svc-section:nth-child(odd) { background: var(--cream) }
.svc-section:nth-child(even) { background: rgba(26,13,10,.02) }

.svc-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,7vw,100px);
  align-items: center;
}
.svc-detail.reverse { direction: rtl }
.svc-detail.reverse > * { direction: ltr }

.svc-detail-num {
  font-size: clamp(4rem,8vw,9rem);
  font-family: var(--font-h);
  font-weight: 700;
  color: rgba(26,13,10,.04);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: -.5rem;
}
.svc-detail-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(1.8rem,3.5vw,3.5rem);
  letter-spacing: -.025em;
  line-height: .95;
  margin-bottom: 1.5rem;
  color: var(--dark);
}
.svc-detail-desc {
  font-size: clamp(.85rem,1.2vw,1rem);
  line-height: 1.8;
  color: rgba(26,13,10,.55);
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 2rem;
}
.svc-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.svc-tag {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  border: 1.5px solid rgba(26,13,10,.12);
  color: rgba(26,13,10,.4);
}
.svc-detail-visual {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(145deg, #BD6809, #9A3F4A);
}
.svc-section:nth-child(2) .svc-detail-visual { background: linear-gradient(145deg, #2F4731, #BD6809) }
.svc-section:nth-child(3) .svc-detail-visual { background: linear-gradient(145deg, #9A3F4A, #324876) }
.svc-section:nth-child(4) .svc-detail-visual { background: linear-gradient(145deg, #3D1419, #BD6809) }
.svc-section:nth-child(5) .svc-detail-visual { background: linear-gradient(145deg, #324876, #2F4731) }
.svc-section:nth-child(6) .svc-detail-visual { background: linear-gradient(145deg, #BD6809, #2F4731) }
.svc-section:nth-child(7) .svc-detail-visual { background: linear-gradient(145deg, #2F4731, #9A3F4A) }
.svc-section:nth-child(8) .svc-detail-visual { background: linear-gradient(145deg, #9A3F4A, #BD6809) }
.svc-detail-visual img { transition: transform .7s var(--ease) }
.svc-detail-visual:hover img { transform: scale(1.05) }

/* ── CTA BAND ─────────────────────────────────────────── */
.svc-cta-band {
  background: var(--dark);
  color: var(--cream);
  padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.svc-cta-title {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: clamp(2rem,4vw,4.5rem);
  letter-spacing: -.03em;
  line-height: .93;
}
.svc-cta-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 1.1rem 2.5rem;
  border: 1.5px solid rgba(248,244,239,.25);
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
}
.svc-cta-link:hover { background: var(--papaya); border-color: var(--papaya) }

.svc-bullets {
  list-style: none;
  margin: 0 0 2.2rem;
}
.svc-bullets li {
  font-size: clamp(.82rem, 1.1vw, .95rem);
  font-weight: 400;
  color: rgba(26,13,10,.7);
  padding: .6rem 0;
  border-bottom: 1px solid rgba(26,13,10,.07);
  display: flex;
  align-items: center;
  gap: .8rem;
  letter-spacing: .01em;
}
.svc-bullets li:first-child { border-top: 1px solid rgba(26,13,10,.07) }
.svc-bullets li::before {
  content: '—';
  color: var(--papaya);
  font-weight: 600;
  flex-shrink: 0;
}
.svc-detail-cta {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--dark);
  padding: .95rem 2.2rem;
  transition: background .3s, transform .25s;
}
.svc-detail-cta:hover { background: var(--papaya); transform: translateX(4px) }

@media (max-width: 768px) {
  .svc-overview-inner, .svc-detail { grid-template-columns: 1fr }
  .svc-overview-sticky { position: static; margin-bottom: 2rem }
  .svc-detail.reverse { direction: ltr }
  .svc-detail { gap: 28px }
  .svc-section { padding-top: 56px; padding-bottom: 56px }
  .svc-detail-visual { width: 74%; margin: 0 auto; aspect-ratio: 3/4 !important }
}

/* ══════════════════════════════════════════════════════
   DECORATIVE ELEMENTS
══════════════════════════════════════════════════════ */

/* ── Film grain — subtle cinematic texture over the whole site ── */
body::after {
  content: '';
  position: fixed;
  inset: -100px;
  z-index: 850;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

/* ── Scroll progress line ── */
#scroll-line {
  position: fixed;
  left: 0; top: 0;
  width: 2px; height: 100vh;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #BD6809 8%,
    #BD6809 92%,
    transparent 100%
  );
  transform-origin: top center;
  transform: scaleY(0);
  z-index: 890;
  pointer-events: none;
  opacity: 0.8;
}


/* ── GALERIES PROJETS — MOBILE : 2 images par ligne (style Moss The Label) ──
   La dernière image d'un nombre impair passe en pleine largeur, en grand. */
@media (max-width: 600px) {
  body .pgr-2, body .pgr-3, body .pgr-4,
  body .pgr-6-4, body .pgr-4-6, body .pgr-7-5,
  body .pgr-5-7, body .pgr-3-9, body .pgr-9-3 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body .pgr-2 .pg-img, body .pgr-3 .pg-img, body .pgr-4 .pg-img,
  body .pgr-6-4 .pg-img, body .pgr-4-6 .pg-img, body .pgr-7-5 .pg-img,
  body .pgr-5-7 .pg-img, body .pgr-3-9 .pg-img, body .pgr-9-3 .pg-img {
    height: clamp(170px, 48vw, 280px);
  }
  body .pg-img:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    height: clamp(300px, 82vw, 440px);
  }
}