/* Dark gold by default (Milano-style). Cream only when data-theme="light" is set. */
:root {
  --bg: #0B0A09;
  --surface: #171412;
  --ink: #F4EFE9;
  --muted: #BDB3A6;
  --accent: #C9A24B;
  --on-accent: #0B0A09;
  --focus: #E9CB84;
  --gutter: 16px;
  --max: 1080px;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
}
:root[data-theme="light"] {
  --bg: #F7F3EE;
  --surface: #FFFFFF;
  --ink: #1B1815;
  --muted: #5E574F;
  --accent: #8A6420;
  --on-accent: #FFFFFF;
  --focus: #1B1815;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gutter); top: var(--gutter); background: var(--accent); color: var(--on-accent); padding: 8px 12px; z-index: 10; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid rgba(128,118,108,0.35); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { color: var(--ink); text-decoration: none; font-size: var(--step-1); }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; display: inline-block; min-height: 44px; line-height: 44px; }
a:hover { text-decoration: underline; }
[id] { scroll-margin-top: 72px; }
nav a[aria-current="page"], nav a:hover { color: var(--ink); }
.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; border-radius: 4px; text-decoration: none; font-weight: 700;
  min-height: 44px; line-height: 20px;
}
.btn:hover { filter: brightness(1.05); }
.btn-small { padding: 8px 14px; min-height: 44px; }

/* Hero */
.hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; background: #1A1816; }
.hero video, .hero img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.05)); }
.hero .wrap { position: relative; z-index: 1; padding-bottom: 48px; }
.hero h1 { font-size: var(--step-4); line-height: 1.1; margin: 0 0 12px; max-width: 18ch; color: #F4EFE9; }
.hero p { color: #EDE7DF; max-width: 46ch; }
.pause-btn {
  position: absolute; right: var(--gutter); bottom: 16px; z-index: 2; min-width: 44px; min-height: 44px;
  border-radius: 22px; border: 1px solid #F4EFE9; background: rgba(0,0,0,0.7); color: #F4EFE9; cursor: pointer; font-size: 0.9rem;
}

/* Sections */
section { padding: 56px 0; }
h2 { font-size: var(--step-3); line-height: 1.2; margin: 0 0 16px; }
h3 { font-size: var(--step-1); margin: 0 0 8px; }
.lead { color: var(--muted); max-width: 60ch; }
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--surface); padding: 20px; border-radius: 6px; border: 1px solid rgba(128,118,108,0.28); }

/* Reveal: content is visible by default; JS adds .js-reveal before observing */
.js-reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 600ms ease; }
.js-reveal.is-in { opacity: 1; transform: none; }

/* Price table */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--surface); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.9rem; }

/* Facades for YouTube and Shorts: thumbnail first, embed on tap */
.facade { position: relative; background: var(--surface); border: 0; padding: 0; width: 100%; aspect-ratio: 16 / 9; cursor: pointer; border-radius: 6px; overflow: hidden; }
.facade img { width: 100%; height: 100%; object-fit: cover; }
.facade span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.6); color: #fff; padding: 10px 16px; border-radius: 22px; }
.embed-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 3D viewer slot: image first, model on tap */
.viewer-slot { background: var(--surface); padding: 16px; border-radius: 6px; }
.viewer-slot img { width: 100%; border-radius: 4px; }
.viewer-slot button { margin-top: 12px; }
.viewer-canvas { width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 4px; }

/* Notice */
.note { color: var(--muted); font-size: 0.95rem; }
footer { border-top: 1px solid rgba(128,118,108,0.35); padding: 32px 0; color: var(--muted); font-size: 0.9rem; }
footer a { color: var(--muted); }

/* Reduced motion: no motion, poster shown, reveals instant */
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Photos and media */
.card img, .gallery-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; margin: 0 0 12px; }
.gallery-grid img { aspect-ratio: 1 / 1; }
.gallery-grid figure { margin: 0; }
.hero video { z-index: 0; }

/* Display type and mobile menu */
h1, h2, .brand { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; }
.menu-btn { display: none; cursor: pointer; border: 0; font: inherit; }
@media (max-width: 719px) {
  .js .menu-btn { display: inline-block; }
  .site-header .wrap { flex-wrap: wrap; }
  nav#site-nav { width: 100%; order: 3; }
  nav#site-nav.is-collapsed { display: none; }
  nav#site-nav ul { flex-direction: column; gap: 0; }
  nav#site-nav li a { display: block; padding: 0 4px; }
}

/* Final review fixes */
:root { --rule: #3A3530; }
:root[data-theme="light"] { --rule: #D9D2C9; }
p a, li a, .lead a, footer a { text-decoration: underline; text-underline-offset: 3px; }
th, td { border-bottom: 1px solid var(--rule); }
.menu-btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.gallery-grid figcaption { margin-top: 8px; }
@media (max-width: 719px) {
  .brand { font-size: 1.5rem; }
  footer, .note { font-size: 0.95rem; }
}

/* Completion pass: hero top shade, body sans already set on body */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0) 35%); pointer-events: none; }

/* Final fixes: slow colour change on the accent words, photo zoom, reduced motion */
h1 em { font-style: normal; color: #D8A7A0; animation: tone-dark 40s ease-in-out infinite; }
:root[data-theme="light"] h1 em { color: #8E4F4A; animation-name: tone-light; }
@keyframes tone-dark { 0%, 100% { color: #D8A7A0; } 50% { color: #C9A27A; } }
@keyframes tone-light { 0%, 100% { color: #8E4F4A; } 50% { color: #7A5A3A; } }
.card:hover img, .gallery-grid figure:hover img { transform: scale(1.03); transition: transform 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
  h1 em { animation: none; }
  .card:hover img, .gallery-grid figure:hover img { transform: none; transition: none; }
}

/* Touch targets for inline links (WCAG 2.2 minimum 24 px) */
p a, li a, .lead a, footer a, figcaption a, summary { display: inline-block; padding: 4px 2px; }

/* Hero legibility: lighter accent words with a stronger shade; colour change stops under reduced motion */
:root .hero h1 em { animation-name: tone-hero; text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
@keyframes tone-hero { 0%, 100% { color: #F1D3CD; } 50% { color: #E9C9A6; } }
.hero::after { background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.25)); }
@media (prefers-reduced-motion: reduce) { :root .hero h1 em { animation: none; } }


/* ===== Cinematic layer (light) ===== */
.eyebrow { text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.78rem; color: var(--accent); margin: 0 0 12px; }
.hero { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; background: #2A211D; color: #FBF7F2; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: slow-push 24s ease-out forwards; z-index: 0; }
@keyframes slow-push { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(40,28,22,0.7) 0%, rgba(40,28,22,0.15) 55%, rgba(40,28,22,0) 100%); }
.hero .wrap { position: relative; z-index: 2; padding-top: 120px; padding-bottom: clamp(48px, 9vh, 96px); }
.hero, .hero p, .hero h1, .hero li { color: #FBF7F2; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: 0.96; letter-spacing: -0.015em; margin: 0 0 0.3em; }
.hero h1 em { color: #F1C9C2; font-style: normal; }
.hero .lead { max-width: 36rem; }
.hero .pause-btn { z-index: 3; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 22px; }
.facts li { border: 1px solid rgba(251,247,242,0.5); border-radius: 999px; padding: 7px 14px; font-size: 0.9rem; }

.split { padding: clamp(56px, 9vw, 110px) 0; }
.split-grid { display: grid; gap: 28px; align-items: center; }
.split-img { margin: 0; }
.split-img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.split-text h2 { margin-top: 0; }
.checks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.checks li { border-top: 1px solid rgba(94,87,79,0.3); padding-top: 10px; color: var(--ink); }
.checks strong { color: var(--accent); }
@media (min-width: 720px) {
  .split-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .split-grid.rev .split-img { order: 2; }
}

/* ===== Redesign round 2: services, gallery, FAQ, contact ===== */
.ico { width: 22px; height: 22px; flex: none; color: var(--accent); display: inline-block; vertical-align: middle; }
.page-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(20px, 4vw, 36px); background: radial-gradient(ellipse at 85% 0%, rgba(142,79,74,0.14), transparent 60%); }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: 0 0 14px; }
.page-hero .lead { max-width: 40rem; }

.price-group { margin: 0 0 28px; }
.price-group h2 { display: flex; align-items: center; gap: 12px; font-size: var(--step-2); margin: 0 0 12px; }
.price-card { background: var(--surface); border-radius: 22px; padding: 6px 22px; box-shadow: 0 20px 50px -34px rgba(27,24,21,0.4); overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: 15px 4px; border-bottom: 1px solid rgba(94,87,79,0.16); vertical-align: middle; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); font-weight: 600; }
.price-table td.amt { text-align: right; white-space: nowrap; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; font-weight: 600; color: var(--accent); }
.price-table th.amt { text-align: right; }
.price-table tr.feature td { font-weight: 600; }
.price-table tr.feature td.amt { color: var(--ink); }
.price-table tr:hover td { background: rgba(142,79,74,0.05); }
.price-note { color: var(--muted); font-size: 0.95rem; margin: 14px 4px 0; }

.clip { position: relative; margin: 0 0 clamp(40px, 6vw, 64px); border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: #2A211D; }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.clip::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(40,28,22,0.55), rgba(40,28,22,0) 45%); }
.clip figcaption { position: absolute; left: 20px; bottom: 16px; z-index: 1; color: #FBF7F2; font-size: 0.9rem; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }

.bento { display: grid; gap: 14px; grid-template-columns: 1fr; }
.bento figure { margin: 0; }
.bento img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; display: block; }
.bento figcaption { margin-top: 8px; font-size: 0.9rem; }
.bento figcaption a { color: var(--accent); font-weight: 600; text-decoration: none; }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .bento figure:nth-child(1), .bento figure:nth-child(6) { grid-column: span 2; }
  .bento figure:nth-child(1) img, .bento figure:nth-child(6) img { aspect-ratio: 16 / 10; }
}

.faq-list { display: grid; gap: 14px; }
.faq-card { display: flex; gap: 18px; align-items: center; justify-content: space-between; background: var(--surface); border-radius: 18px; padding: 22px; text-decoration: none; color: var(--ink); box-shadow: 0 16px 40px -30px rgba(27,24,21,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.faq-card:hover, .faq-card:focus-visible { transform: translateY(-2px); box-shadow: 0 24px 50px -28px rgba(27,24,21,0.5); }
.faq-card h2 { font-size: var(--step-1); margin: 0 0 6px; }
.faq-card p { margin: 0; color: var(--muted); }
.faq-go { color: var(--accent); font-weight: 600; white-space: nowrap; }

.contact-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .contact-grid { grid-template-columns: 1.1fr 1fr; gap: 22px; } }
.info-card { background: var(--surface); border-radius: 22px; padding: 28px; box-shadow: 0 20px 50px -34px rgba(27,24,21,0.4); }
.info-card h2 { font-size: var(--step-2); margin-top: 0; }
.tiles-col { display: grid; gap: 14px; align-content: start; }
.contact-tile { display: flex; gap: 16px; align-items: center; background: var(--surface); border-radius: 18px; padding: 18px 20px; color: var(--ink); text-decoration: none; box-shadow: 0 16px 40px -32px rgba(27,24,21,0.4); transition: transform 0.3s ease; }
.contact-tile:hover, .contact-tile:focus-visible { transform: translateY(-2px); }
.contact-tile .badge { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(142,79,74,0.1); flex: none; }
.contact-tile .badge .ico { width: 24px; height: 24px; }
.contact-tile strong { display: block; }
.contact-tile span.sub { color: var(--muted); font-size: 0.95rem; }
.hours-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px; background: rgba(142,79,74,0.1); color: var(--accent); font-weight: 600; font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) {
  .faq-card, .contact-tile { transition: none; }
  .faq-card:hover, .contact-tile:hover { transform: none; }
}

/* ===== Round 3: dark gold theme, triptych, safety, side bar, rich footer, logo ===== */
.dark-band { background: #0B0A09; color: #F4EFE9; padding: clamp(56px, 9vw, 110px) 0; }
.dark-band h2 { color: #F4EFE9; }
.dark-band p { color: #CFC6BA; }
.frame { position: relative; margin: 0; border: 1.5px solid #C9A24B; border-radius: 6px; padding: 10px; background: #15110F; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }
.frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 3px; }
.frame figcaption { margin-top: 14px; text-align: center; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.95rem; color: #F4EFE9; }
.frame.frame-lg img { aspect-ratio: 3 / 4.4; }
.tri-grid { display: grid; gap: 22px; align-items: end; }
@media (min-width: 720px) { .tri-grid { grid-template-columns: 1fr 1.2fr 1fr; } }
.ring { margin: 0 auto; width: min(360px, 80vw); }
.ring img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #C9A24B; box-shadow: 0 0 0 14px rgba(201,162,75,0.12), 0 0 60px rgba(201,162,75,0.25); display: block; }
.safety { text-align: center; }
.safety .rule { display: block; width: 88px; height: 3px; background: #C9A24B; margin: 0 auto 26px; }
.safety h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 40px; }
.safety-grid { display: grid; gap: 34px; }
@media (min-width: 900px) { .safety-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.safety-grid h3 { color: #F4EFE9; font-size: 1.1rem; margin: 16px 0 10px; }
.safety-grid p { margin: 0 auto; max-width: 16rem; font-size: 0.97rem; }
.gicon { width: 56px; height: 56px; color: #C9A24B; }
.side-social { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 4px; padding: 12px 8px; border-radius: 0 14px 14px 0; background: linear-gradient(180deg, #E9CB84, #B8893A); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); }
@media (min-width: 900px) { .side-social { display: flex; } }
.side-social a { width: 40px; height: 40px; display: grid; place-items: center; color: #1B1815; border-radius: 10px; }
.side-social a:hover, .side-social a:focus-visible { background: rgba(27,24,21,0.12); }
.side-social svg { width: 22px; height: 22px; }
.rich-footer { background: #0B0A09; color: #CFC6BA; padding: 56px 0 28px; }
.rich-footer h3 { color: #F4EFE9; font-size: 1.1rem; margin: 0 0 14px; }
.rich-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rich-footer a { color: #CFC6BA; text-decoration: none; }
.rich-footer a:hover, .rich-footer a:focus-visible { color: #E9CB84; }
.rich-footer .cols { display: grid; gap: 34px; }
@media (min-width: 900px) { .rich-footer .cols { grid-template-columns: repeat(4, 1fr); } }
.rich-footer .circles { display: flex; gap: 14px; margin-top: 36px; justify-content: center; }
.rich-footer .circles a { width: 46px; height: 46px; border: 1.5px solid rgba(201,162,75,0.6); border-radius: 50%; display: grid; place-items: center; color: #E9CB84; }
.rich-footer .circles svg { width: 20px; height: 20px; }
.rich-footer .legal { margin-top: 28px; text-align: center; font-size: 0.9rem; color: #8F867B; }
.wrap.wide { max-width: 1280px; }
.bento figure { position: relative; }
.bento figure::after { content: ""; position: absolute; top: 14px; right: 14px; width: 62px; height: 62px; background: url("../assets/logo-ds.svg") center / contain no-repeat; opacity: 0.85; pointer-events: none; }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .bento figure:nth-child(1), .bento figure:nth-child(6) { grid-column: span 2; }
  .bento figure:nth-child(1) img, .bento figure:nth-child(6) img { aspect-ratio: 16 / 9; }
  .bento figure img { aspect-ratio: 4 / 5; }
}
.brand-logo { width: 34px; height: 34px; vertical-align: middle; margin-right: 8px; }

/* ===== Round 4: gallery grid, load more ===== */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.tile { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(201,162,75,0.35); background: #15110F; }
.tile img, .tile video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.tile[hidden] { display: none !important; }
.tile::after { content: ""; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: url("../assets/logo-ds.svg") center / contain no-repeat; opacity: 0.85; pointer-events: none; }
.more { text-align: center; margin-top: 28px; }
.more[hidden] { display: none; }

/* ===== Round 5: light / dark switch ===== */
.theme-btn { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent); border: 1px solid var(--accent); cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6); }
.theme-btn:hover, .theme-btn:focus-visible { background: rgba(201,162,75,0.18); }
:root[data-theme="light"] .theme-btn { color: var(--ink); }

/* ===== About page: experience and bold My work ===== */
.about-grid { display: grid; gap: 22px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.facts-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.facts-list li { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--ink); }
.sub-h { font-size: 1rem; margin: 22px 0 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.work-band { padding: clamp(56px, 8vw, 96px) 0; background: radial-gradient(ellipse at 10% 0%, rgba(233,203,132,0.18), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(216,167,160,0.2), transparent 55%), #0B0A09; }
.work-band h2 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0 0 10px; }
.work-grid { display: grid; gap: 14px; margin-top: 30px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .work-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; } }
.work-tile { margin: 0; position: relative; border-radius: 14px; overflow: hidden; border: 1.5px solid #E9CB84; background: #15110F; box-shadow: 0 18px 40px -22px rgba(0,0,0,0.8); }
.work-tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform 0.6s ease; }
.work-tile:hover img { transform: scale(1.04); }
.work-tile figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, #E9CB84, #D8A7A0); color: #0B0A09; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { .work-tile:hover img { transform: none; } }


.work-tile::after { content: ""; position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; background: url("../assets/logo-ds.svg") center / contain no-repeat; opacity: 0.9; pointer-events: none; }

/* Booking button: Vagaro V in a red circle, "Book" underneath */
.vg-book { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); }
.vg-book:hover .vg-circle, .vg-book:focus-visible .vg-circle { transform: translateY(-1px); }
.vg-circle { width: 44px; height: 44px; border-radius: 50%; background: #C8413E; display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(200,65,62,0.7); transition: transform 0.2s ease; }
.vg-circle img { width: 22px; height: auto; filter: brightness(0) invert(1); }
.vg-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }

/* Header logo: larger mark, no name text */
.brand-logo { width: 64px; height: 64px; margin-right: 0; }

/* About hero: nail photo behind a dark gold-tinted veil */
.about-hero { position: relative; overflow: hidden; background: #0B0A09 url("../assets/gallery-02.webp") center / cover no-repeat; }
.about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,10,9,0.92) 0%, rgba(11,10,9,0.6) 60%, rgba(11,10,9,0.35) 100%); pointer-events: none; }
.about-hero .wrap { position: relative; }

/* Hero message: fades between lines once per video loop */
.hero-msg { display: inline-block; transition: opacity 0.35s ease; }
/* Logo: larger in the header and bolder on photos */
.brand-logo { width: 76px; height: 76px; }
.tile::after, .work-tile::after { width: 56px; height: 56px; }

/* Home service: prominent section and card */
.home-visit { background: linear-gradient(120deg, rgba(233,203,132,0.16), rgba(216,167,160,0.12)), #15110F; border-top: 1px solid rgba(201,162,75,0.35); border-bottom: 1px solid rgba(201,162,75,0.35); padding: clamp(48px, 7vw, 80px) 0; }
.home-visit h2 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: 0 0 14px; }
.home-visit .lead { font-size: 1.15rem; max-width: 40rem; }
.home-visit-card { border: 1.5px solid #C9A24B; background: linear-gradient(120deg, rgba(233,203,132,0.14), rgba(216,167,160,0.1)), var(--surface); }

/* Services at home dialog */
.home-dialog { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.home-dialog[hidden] { display: none; }
.home-dialog-panel { position: relative; width: min(560px, 100%); max-height: 92vh; overflow: auto; background: var(--surface); border: 1.5px solid #C9A24B; border-radius: 18px; padding: 26px; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9); }
.home-dialog-panel h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.home-dialog-close { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; color: var(--ink); font-size: 1.9rem; line-height: 1; cursor: pointer; }
.home-dialog-panel form, .home-dialog-panel > div { display: grid; gap: 12px; }
.home-dialog-panel label { display: grid; gap: 6px; font-size: 0.92rem; color: var(--ink); }
.home-dialog-panel input, .home-dialog-panel select, .home-dialog-panel textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid rgba(201,162,75,0.5); border-radius: 10px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.home-dialog-panel input[type=radio], .home-dialog-panel input[type=checkbox] { width: auto; }
.home-choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.home-choice legend { font-size: 0.92rem; margin-bottom: 6px; color: var(--muted); }
.home-choice label { display: flex; align-items: center; gap: 6px; }
.home-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.home-note { color: var(--muted); font-size: 0.9rem; margin: 0; }
.home-consent { display: flex !important; align-items: flex-start; gap: 8px; }
.contact-tile-btn { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }

/* Book at home: off until the request has been sent */
.vg-book.is-disabled { opacity: 0.4; pointer-events: none; }