@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;600;700&display=swap');
:root{ --bg:#efe7e0; --ink:#0b0b0b; --muted:#6a6a6a; --gold:#bfa046; --card:#ffffff; --border:#d9d1c9; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.12); }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* --- Portrait / anti-crop utilities --- */
/* Appliquer .portrait-fit sur une image verticale pour éviter la coupe (object-fit:contain) */
.portrait-fit { object-fit: contain !important; background:#000; }
.studio-slide img.portrait-fit { object-fit: contain !important; width:auto; height:100%; background:#000; }
.studio-slide img.portrait-fit { max-width:100%; }
/* Orientation-specific slider adjustments */
.studio-slide.is-portrait img { width:auto; height:540px; max-height:540px; object-fit:contain; }
.studio-slide.is-landscape img { width:100%; height:540px; object-fit:cover; }
@media (max-width:900px){
  .studio-slide.is-portrait img, .studio-slide.is-landscape img { height:320px; max-height:320px; }
}
@media (max-width:600px){
  .studio-slide.is-portrait img, .studio-slide.is-landscape img { height:180px; max-height:180px; }
}
/* Variante: garde un léger crop mais ajoute des marges latérales pour les très hautes images */
.portrait-soft { object-fit: cover; object-position: center top; }
/* Forcer une hauteur automatique dans un conteneur slideshow si on veut adapter la vignette */
.allow-intrinsic-height { height:auto !important; position:relative; }
/* Dans une vignette où toutes les images ne doivent pas être étirées: activer ce mode sur le wrapper */
.vignette-slideshow.adaptive .vignette-slides img { object-fit: contain; background:#000; }

/* Header */
header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(255,255,255,0.88),rgba(255,255,255,0));backdrop-filter:saturate(130%) blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand img{height:120px}
@media (max-width:900px){.brand img{height:96px}}
@media (max-width:600px){.brand img{height:64px}}
.menu{display:flex;gap:24px;align-items:center}
.menu a{opacity:.95;line-height:1}
.cta{border:1px solid var(--gold);color:#0b0b0b;background:var(--gold);padding:10px 16px;border-radius:999px;font-weight:600;line-height:1}
.cta:hover{filter:brightness(1.05)}

/* Hero + slideshow */
.hero{position:relative;display:grid;min-height:85vh;place-items:center;overflow:hidden;color:#fff;text-align:center}
.slides{position:absolute;inset:0;z-index:0}
.slides img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease-in-out}
.slides img.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.65));z-index:1}
.hero-inner{position:relative;z-index:2;display:grid;gap:18px;justify-items:center;text-align:center;padding:60px 0}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-size:12px}
h1{font-family:Didot,"Bodoni Moda","Playfair Display",serif;font-weight:400;font-size:clamp(32px,5vw,54px);margin:0 0 8px;letter-spacing:0.01em;color:var(--ink);line-height:1.08}
.hero h1{color:#fff}
.sub{max-width:680px;color:#ddd}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.btn{padding:12px 18px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--ink);display: inline-flex;align-items: center;justify-content: center}
.btn:hover{border-color:var(--gold)}
.btn.gold {
  background: var(--gold);
  color: #0b0b0b;
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  font-weight: 600;
  font-size: 1em;
  transition: 
    background 0.25s cubic-bezier(.4,1.4,.6,1),
    color 0.25s cubic-bezier(.4,1.4,.6,1),
    transform 0.22s cubic-bezier(.4,1.4,.6,1),
    box-shadow 0.22s;
  box-shadow: 0 2px 12px 0 rgba(191,160,70,0.10);
  cursor: pointer;
}

.btn.gold:hover,
.btn.gold:focus {
  background: #0b0b0b;
  color: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 6px 24px 0 rgba(191,160,70,0.18);
  outline: none;
}

/* Effet hover doré pour Prestations & tarifs */
.btn.presta-tarifs:hover,
.btn.presta-tarifs:focus {
  background: var(--gold);
  color: #0b0b0b;
  border-color: var(--gold);
  transform: scale(1.08); /* Ajoute cette ligne */
}
.btn.presta-tarifs {
  transition:
    background 0.22s,
    color 0.22s,
    border-color 0.22s,
    transform 0.22s;
}

/* Sections */
.section{padding:72px 0}
.section h2{font-family:Didot,"Bodoni Moda","Playfair Display",serif;font-weight:400;font-size:clamp(26px,4.2vw,40px);margin:0 0 8px}
.section .lead{color:var(--muted);margin:0 0 26px;line-height:1.85}

/* Grid + cards */
.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;font-size:12px;backdrop-filter:blur(6px)}
.tile{position:relative;height:320px}
.tile img{object-fit:cover;width:100%;height:100%}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
@media (max-width:900px){.col-8{grid-column:span 12}.col-6{grid-column:span 12}.col-4{grid-column:span 6}}
@media (max-width:600px){.col-4{grid-column:span 12}}

/* Services */
.services{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.service{padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.service h3{font-family:Didot,"Bodoni Moda","Playfair Display",serif;margin:0 0 6px;font-size:22px;font-weight:400}
.price{color:var(--gold);font-weight:700}
@media (max-width:900px){.services{grid-template-columns:1fr}}

/* Quote */
.quote{display:grid;gap:10px;padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:#ffffff}
blockquote{margin:0;color:var(--ink);font-family:"Playfair Display",serif;font-size:20px;line-height:1.6}
cite{color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--border);padding:40px 0;color:var(--ink);background:#f4eee8;margin-top:80px}
.footer-grid{display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr;align-items:start}
.badge{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--gold);color:var(--gold);padding:8px 12px;border-radius:999px;margin-bottom:14px}
footer strong{font-family:Didot,"Bodoni Moda","Playfair Display",serif;font-weight:400;color:var(--ink)}
footer p{margin:6px 0;color:#5f5f5f;font-size:14px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* Form fields */
.field input,.field select,.field textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:#ffffff;color:var(--ink)}
textarea{resize:vertical;min-height:140px}
label{display:block;gap:6px}

/* Loader sur le bouton */
.btn{position:relative;overflow:hidden}
.btn.loading{pointer-events:none;opacity:.85}
.btn.loading::after{
  content:''; position:absolute; inset:auto auto auto 12px; width:14px; height:14px;
  border:2px solid rgba(0,0,0,.25); border-top-color:#000; border-radius:50%;
  animation: spin .8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Messages de statut */
.alert{font-size:14px}
.alert-success{color:#9ae6b4}
.alert-error{color:#feb2b2}

/* Vignette Slideshow */
.vignette-slides img {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; /* <-- Ajoute cette ligne */
}
.vignette-slides img.active { opacity: 1; z-index: 1; }
.vignette-slides { position: relative; width: 100%; height: 100%; }
/* Luxe hover vignette */
.vignette-overlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(20, 17, 5, 0.72);
  color: #fff;
  align-items: center; justify-content: center;
  z-index: 2;
  backdrop-filter: blur(6px) brightness(1.08);
  border: 2px solid transparent;
  transition: border 0.4s, box-shadow 0.4s;
  box-shadow: 0 8px 32px 0 rgba(191,160,70,0.18);
}
.vignette-slideshow:hover .vignette-overlay,
.vignette-slideshow:focus-within .vignette-overlay {
  display: flex;
  border: 2.5px solid var(--gold);
  box-shadow: 0 8px 40px 0 rgba(191,160,70,0.28), 0 2px 8px 0 rgba(0,0,0,0.18);
}

.vignette-slideshow:hover,
.vignette-slideshow:focus-within {
  z-index: 10;
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 12px 48px 0 rgba(191,160,70,0.22), 0 2px 8px 0 rgba(0,0,0,0.22);
}

.vignette-overlay .columns {
  display: flex; gap: 24px;
}
.vignette-overlay .columns > div {
  flex: 1;
  text-align: center;
  font-weight: 400;
  color: var(--gold);
  font-family: Didot, "Bodoni Moda", "Playfair Display", serif;
  font-size: 1em;           /* Taille plus petite */
  letter-spacing: 0.08em;   /* Espacement réduit */
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.13);
  transition: color 0.3s;
  padding: 6px 0;
}
.vignette-overlay .columns > div:hover {
  color: #fffbe6;
  text-shadow: 0 4px 16px var(--gold), 0 2px 8px rgba(0,0,0,0.22);
  cursor: pointer;
}
.vignette-slideshow .tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5; /* <-- Assure la superposition au-dessus des images */
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  opacity: 0.93;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.18);
}
.vignette-slideshow {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s, transform 0.4s; /* Ajoute cette ligne */
}

/* Back to top button */
.back-to-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.88;
  transition: transform 0.25s cubic-bezier(.4,1.4,.6,1), box-shadow 0.25s, opacity 0.25s;
  box-shadow: 0 4px 24px 0 rgba(191,160,70,0.13);
  border-radius: 50%;
  outline: none;
}
.back-to-top:hover, .back-to-top:focus {
  transform: scale(1.18);
  opacity: 1;
  box-shadow: 0 8px 32px 0 rgba(191,160,70,0.22), 0 2px 8px 0 rgba(0,0,0,0.18);
}
.back-to-top svg {
  display: block;
}
.back-to-top circle {
  filter: blur(0.5px);
}
.back-to-top path {
  filter: drop-shadow(0 2px 8px #bfa04644);
}
@media (max-width: 600px) {
  .back-to-top { right: 16px; bottom: 16px; }
}

html {
  scroll-behavior: smooth;
}

/* Ajoute dans styles.css */
.souscat-link {
  color: var(--gold);
  text-decoration: none;
  font-family: Didot, "Bodoni Moda", "Playfair Display", serif;
  font-weight: 400;
  transition: color 0.2s;
}
.souscat-link:hover {
  color: #fffbe6;
  text-shadow: 0 4px 16px var(--gold), 0 2px 8px rgba(0,0,0,0.22);
}

.footer-grid a[href*="instagram"], 
.footer-grid a[href*="tiktok"] {
  color: inherit;
  transition: color 0.22s;
}
.footer-grid a[href*="instagram"]:hover,
.footer-grid a[href*="instagram"]:focus,
.footer-grid a[href*="tiktok"]:hover,
.footer-grid a[href*="tiktok"]:focus {
  color: var(--gold);
}

/* Slider spécifique à la galerie studio */
.studio-slider-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 48px auto;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--card);
}
.studio-slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(.4,1.4,.6,1);
  will-change: transform;
}
.studio-slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.studio-slide img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18);
  background: #181818;
}
.studio-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.18s, box-shadow 0.22s;
  box-shadow: 0 4px 24px 0 rgba(191,160,70,0.13);
  opacity: 0.97;
  padding: 0;
}
.studio-slider-arrow svg {
  display: block;
}
.studio-slider-arrow:hover, .studio-slider-arrow:focus {
  transform: scale(1.16) translateY(-50%);
  box-shadow: 0 8px 32px 0 rgba(191,160,70,0.22), 0 2px 8px 0 rgba(0,0,0,0.18);
}
.studio-slider-arrow.left { left: 18px; }
.studio-slider-arrow.right { right: 18px; }
.studio-slider-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0 0;
  flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
  padding: 0 18px;
}
.studio-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bfa04644;
  border: 1.5px solid var(--gold);
  transition: background 0.22s, border 0.22s;
  cursor: pointer;
}
.studio-slider-dot.active {
  background: var(--gold);
  border-color: #fffbe6;
}
@media (max-width: 900px) {
  .studio-slide img { height: 320px; }
  .studio-slider-container { max-width: 98vw; }
}
@media (max-width: 600px) {
  .studio-slide img { height: 180px; }
  .studio-slider-arrow { width: 36px; height: 36px; font-size: 1.3em; }
}

/* Dropdown menu */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  cursor: pointer;
  min-width: 120px;
}
.dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 110%;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(191,160,70,0.18);
  z-index: 100;
  padding: 8px 0;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}
.dropdown-item {
  display: block;
  padding: 10px 22px;
  color: var(--gold);
  font-family: Didot, "Bodoni Moda", "Playfair Display", serif;
  font-weight: 400;
  font-size: 1em;
  background: none;
  border: none;
  text-align: left;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: #f3ede7;
  color: #0b0b0b;
}

/* --- Immersive premium direction --- */
:root {
  --bg: #0a0a0a;
  --ink: #f5f0e9;
  --muted: #aaa39b;
  --gold: #c9a96a;
  --gold-bright: #e3c78c;
  --card: #121212;
  --border: rgba(201,169,106,.28);
  --radius: 4px;
  --shadow: 0 20px 60px rgba(0,0,0,.34);
}

html { background: var(--bg); }
html { color-scheme: dark; scroll-padding-top: 104px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .01em;
  overflow-x: hidden;
}
a { color: var(--ink); }
.container { max-width: 1320px; padding: 0 32px; }
.section.container { padding-left: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 4vw, 64px); }
section[id], h1, h2, h3 { scroll-margin-top: 104px; }

header {
  background: rgba(10,10,10,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.nav { min-height: 82px; padding: 12px 0; }
.brand img { display: none; }
.brand a::before {
  content: "TANIA COHEN";
  display: block;
  color: var(--ink);
  font-family: Didot, "Bodoni Moda", "Playfair Display", serif;
  font-size: 18px;
  letter-spacing: .16em;
  white-space: nowrap;
}
.brand a::after {
  content: "PHOTOGRAPHE";
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .38em;
}
.menu { gap: 30px; }
.menu a:not(.btn) {
  color: #ddd7ce;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.menu a:not(.btn):hover, .menu a:not(.btn):focus { color: var(--gold-bright); }
.btn, .btn.gold, .cta {
  border-radius: 2px;
  padding: 13px 19px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10px;
}
.btn.gold, .cta { background: var(--gold); color: #0a0a0a; }
.btn.gold:hover, .btn.gold:focus { background: var(--gold-bright); color: #0a0a0a; transform: translateY(-2px); }
.btn:not(.gold) { background: transparent; border-color: rgba(255,255,255,.35); color: var(--ink); }

.hero { min-height: calc(100vh - 82px); border-bottom: 1px solid rgba(255,255,255,.1); }
.slides img { filter: saturate(.78) contrast(1.08); }
.hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.25) 65%, rgba(0,0,0,.6)); }
.hero-inner { justify-items: start; text-align: left; max-width: 1320px; width: 100%; padding: 100px 32px; }
.eyebrow { font-size: 10px; letter-spacing: .34em; }
.hero h1 { max-width: 780px; font-size: clamp(42px, 7vw, 88px); line-height: .98; letter-spacing: -.02em; }
.hero .sub { max-width: 500px; color: #d5d0ca; line-height: 1.8; }
.hero-actions { margin-top: 18px; }

.section { padding: 120px 0; }
.section h2 { color: var(--ink); font-size: clamp(34px, 5vw, 64px); letter-spacing: -.025em; }
.section h2, .hero h1 { text-wrap: balance; }
.section .lead { color: var(--muted); max-width: 620px; }
.grid { gap: 18px; }
.card { background: var(--card); border: 1px solid rgba(255,255,255,.09); border-radius: 2px; box-shadow: none; }
.tile { height: 390px; }
.tile img { filter: saturate(.88); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.vignette-slideshow:hover img, .vignette-slideshow:focus-within img { transform: scale(1.045); filter: saturate(1.05); }
.tag { top: 20px; left: 20px; background: rgba(8,8,8,.6); border: 1px solid rgba(255,255,255,.22); border-radius: 0; color: #f1eadf; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.vignette-overlay { display: flex; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.86)); border: 0; align-items: flex-end; justify-content: flex-start; padding: 24px; transition: opacity .35s ease; }
.vignette-slideshow:hover .vignette-overlay, .vignette-slideshow:focus-within .vignette-overlay { opacity: 1; border: 0; box-shadow: none; }
.vignette-slides img { pointer-events: auto; cursor: zoom-in; }
.vignette-overlay .souscat-link { pointer-events: auto; }
.vignette-overlay .columns { flex-wrap: wrap; gap: 8px 22px; justify-content: flex-start; }
.vignette-overlay .columns > div { text-align: left; font-size: 12px; letter-spacing: .12em; }
.souscat-link { color: var(--gold-bright); }

.services { gap: 16px; }
.service { min-height: 210px; padding: 28px; background: #111; border-color: rgba(201,169,106,.22); border-radius: 2px; }
.service h3 { color: var(--ink); font-size: 25px; }
.service p { color: var(--muted); line-height: 1.7; }
.price { color: var(--gold-bright); letter-spacing: .08em; }
.quote { background: #111; border-color: rgba(201,169,106,.24); border-radius: 2px; }
blockquote { color: var(--ink); }
cite { color: var(--gold); }
footer { background: #070707; border-top-color: rgba(255,255,255,.1); color: var(--muted); }
footer strong { color: var(--ink); }
footer p { color: var(--muted); }
.field input, .field select, .field textarea { background: #111; color: var(--ink); border-color: rgba(255,255,255,.18); border-radius: 2px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--gold); border-color: var(--gold); }
.menu a:focus-visible, .btn:focus-visible, .souscat-link:focus-visible, .back-to-top:focus-visible, .lightbox button:focus-visible, img[role="button"]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.section, .hero-inner, .card, .service { animation: reveal-up .8s both; }
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
  .container { padding: 0 20px; }
  .section.container { padding-left: 20px; padding-right: 20px; }
  .nav { min-height: 70px; }
  .brand a::before { font-size: 14px; }
  .menu { gap: 12px; }
  .menu a:not(.btn) { display: none; }
  .hero { min-height: 78vh; }
  .hero-inner { padding: 72px 20px; }
  .hero h1 { font-size: clamp(38px, 12vw, 60px); }
  .section { padding: 78px 0; }
  .tile { height: 280px; }
  .vignette-overlay { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Full-screen image viewer */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 28px; background: rgba(0,0,0,.94); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(92vw, 1500px); max-height: 84vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.lightbox button { position: absolute; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: var(--ink); cursor: pointer; }
.lightbox-close { top: 22px; right: 26px; width: 42px; height: 42px; font-size: 24px; }
.lightbox-prev, .lightbox-next { top: 50%; width: 48px; height: 48px; font-size: 24px; transform: translateY(-50%); }
.lightbox-prev { left: 24px; } .lightbox-next { right: 24px; }
.lightbox-caption { position: absolute; bottom: 22px; color: var(--muted); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* --- Spacing refinement --- */
.homepage .section { padding-top: 148px; padding-bottom: 148px; }
.homepage #portfolio { padding-top: 136px; }
.section h2 { margin-bottom: 18px; }
.section .lead { margin-bottom: 42px; line-height: 1.9; }
.grid { column-gap: 24px; row-gap: 24px; }
.tile { min-height: 400px; }
.services { gap: 24px; }
.service { padding: 34px; }
.service h3 { margin-bottom: 16px; }
.service p { margin-top: 0; margin-bottom: 18px; }
.quote { margin-top: 32px; padding: 32px; }
.footer-grid { gap: 42px; }
.contact-form { gap: 22px; }
.field { margin-bottom: 4px; }
.back-to-top { right: 38px; bottom: 38px; }
@media (max-width: 900px) {
  .homepage .section { padding-top: 108px; padding-bottom: 108px; }
  .homepage #portfolio { padding-top: 104px; }
  .tile { min-height: 340px; }
}
@media (max-width: 700px) {
  .homepage .section { padding-top: 82px; padding-bottom: 82px; }
  .homepage #portfolio { padding-top: 80px; }
  .section h2 { margin-bottom: 14px; }
  .section .lead { margin-bottom: 28px; }
  .grid { gap: 16px; }
  .tile { min-height: 280px; }
  .service { padding: 26px; }
  .quote { padding: 24px; margin-top: 24px; }
  .back-to-top { right: 18px; bottom: 18px; }
}