body.commercial-detail {
  --page-bg: #0d1014;
  --page-text: #f7f2ea;
  --page-muted: rgba(247,242,234,.62);
  --page-line: rgba(247,242,234,.14);
  --page-accent: #c2e03a;
  margin: 0;
  background: var(--page-bg);
  color: var(--page-text);
  font-family: 'DM Sans', sans-serif;
}
body.commercial-detail > nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 86px;
  padding: 22px max(6%, 28px);
  border-bottom: 1px solid var(--page-line);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
body.commercial-detail > nav img { display: block; width: 180px; height: auto; }
body.commercial-detail > nav .detail-logo { display: block; line-height: 0; margin-right: auto; }
.detail-nav-links { display: flex; gap: 34px; list-style: none; margin: 0 40px 0 0; padding: 0; }
.detail-nav-links a { color: var(--page-muted); text-decoration: none; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: color .3s; }
.detail-nav-links a:hover { color: var(--page-text); }
.detail-nav-cta { display: inline-flex; padding: 12px 20px; border: 1px solid var(--page-accent); color: var(--page-accent); text-decoration: none; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; transition: background .3s, color .3s; }
.detail-nav-cta:hover { background: var(--page-accent); color: #111; }
.detail-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; font-size: 12px; color: var(--page-muted); }
.detail-crumbs a { color: var(--page-muted); text-decoration: none; transition: color .3s; }
.detail-crumbs a:hover { color: var(--page-text); }
.detail-crumbs a::after { content: '/'; margin-left: 10px; opacity: .5; }
.detail-crumbs span { color: var(--page-text); }
.detail-wrap { width: min(1240px, 88%); margin: 0 auto; }
.detail-hero { min-height: 760px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(42px, 6vw, 96px); align-items: center; padding: 142px 0 88px; box-sizing: border-box; }
.detail-btn { display: inline-flex; align-items: center; padding: 16px 24px; background: var(--page-accent); color: #111; text-decoration: none; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--page-accent); transition: background .3s, color .3s, border-color .3s; }
.detail-btn:hover { background: var(--page-text); border-color: var(--page-text); }
.detail-btn-ghost { background: transparent; color: var(--page-text); border-color: var(--page-line); }
.detail-btn-ghost:hover { background: transparent; color: var(--page-accent); border-color: var(--page-accent); }
.detail-link { color: var(--page-muted); text-decoration: none; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: color .3s; }
.detail-link:hover { color: var(--page-accent); }
.detail-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 38px; }
.detail-kicker { color: var(--page-accent); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 30px; }
.detail-hero h1, .detail-section h2, .detail-cta h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; line-height: .94; letter-spacing: -.02em; margin: 0; }
.detail-hero h1 { font-size: clamp(58px, 7.2vw, 112px); max-width: 9ch; }
.detail-hero h1 em, .detail-section h2 em, .detail-cta h2 em { color: var(--page-accent); font-style: italic; }
.detail-hero p { max-width: 43ch; color: var(--page-muted); font-size: 17px; line-height: 1.85; margin: 36px 0 0; }
.detail-hero-media { width: 100%; aspect-ratio: 3 / 2; position: relative; overflow: hidden; background: #171b20; }
.detail-hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86); }
.detail-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,16,20,.12), transparent 55%, rgba(13,16,20,.5)); pointer-events: none; }
.detail-hero-note { position: absolute; z-index: 1; right: 20px; bottom: 18px; color: white; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.detail-intro { border-top: 1px solid var(--page-line); border-bottom: 1px solid var(--page-line); padding: 42px 0; display: grid; grid-template-columns: 1fr 2fr; gap: 7vw; }
.detail-intro strong { color: var(--page-accent); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.detail-intro p { max-width: 62ch; color: var(--page-muted); line-height: 1.9; font-size: 18px; margin: 0; }
.detail-section { padding: 130px 0; }
.detail-section h2 { font-size: clamp(46px, 6vw, 84px); max-width: 16ch; }
.detail-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 58px; }
.detail-section-head p { max-width: 42ch; color: var(--page-muted); line-height: 1.8; margin: 0; }
.detail-gallery { display: grid; grid-template-columns: 1.35fr .8fr .8fr; grid-auto-rows: clamp(210px, 20vw, 270px); gap: 14px; }
.detail-gallery figure { margin: 0; overflow: hidden; background: #171b20; position: relative; }
.detail-gallery figure:first-child { grid-row: span 2; }
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.detail-gallery figure:hover img { transform: scale(1.035); }
.detail-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to top, rgba(13,16,20,.85), transparent); pointer-events: none; }
.detail-gallery figcaption b { color: white; font-weight: 500; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.detail-gallery figcaption span { color: rgba(247,242,234,.7); font-size: 12px; }
.detail-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--page-line); }
.detail-list article { padding: 30px 28px 30px 0; border-bottom: 1px solid var(--page-line); }
.detail-list article + article { padding-left: 28px; border-left: 1px solid var(--page-line); }
.detail-list b { color: var(--page-accent); font-size: 12px; letter-spacing: 3px; }
.detail-list h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 29px; margin: 18px 0 10px; }
.detail-list p { color: var(--page-muted); line-height: 1.7; margin: 0; }
.detail-cta { padding: 90px 0 130px; border-top: 1px solid var(--page-line); }
.detail-cta h2 { max-width: 14ch; }
.detail-cta h2 { font-size: clamp(46px, 6vw, 84px); }
.detail-cta p { max-width: 52ch; color: var(--page-muted); font-size: 17px; line-height: 1.85; margin: 30px 0 0; }
.detail-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.detail-siblings-wrap { padding: 0 0 110px; }
.detail-siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-sibling { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: #171b20; text-decoration: none; color: var(--page-text); }
.detail-sibling img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.75); transition: transform .7s ease, filter .5s ease; }
.detail-sibling:hover img { transform: scale(1.035); filter: saturate(.9) brightness(.85); }
.detail-sibling .detail-kicker { position: absolute; left: 24px; bottom: 66px; margin: 0; }
.detail-sibling strong { position: absolute; left: 24px; right: 24px; bottom: 22px; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 30px; line-height: 1; }
.detail-footer { border-top: 1px solid var(--page-line); padding: 70px 0 34px; font-size: 14px; }
.detail-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.detail-footer h3 { color: var(--page-accent); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 500; margin: 0 0 20px; }
.detail-footer a { display: block; color: var(--page-muted); text-decoration: none; line-height: 2.1; transition: color .3s; }
.detail-footer a:hover, .detail-footer a[aria-current="page"] { color: var(--page-text); }
.detail-footer address { font-style: normal; color: var(--page-muted); line-height: 1.8; margin-top: 8px; }
.detail-footer-bar { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--page-line); color: var(--page-muted); font-size: 12px; }
.detail-footer-bar a { display: inline; line-height: inherit; }
/* Tablet: tighten the header links, then drop them before they can push the CTA out of the bar */
@media (max-width: 1180px) {
  .detail-nav-links { gap: 22px; margin-right: 24px; }
  .detail-nav-links a { font-size: 11px; letter-spacing: 1.5px; }
}
@media (max-width: 1000px) {
  .detail-nav-links { display: none; }
}
@media (max-width: 760px) {
  body.commercial-detail > nav { height: 72px; padding: 17px 6%; }
  body.commercial-detail > nav img { width: 150px; }
  .detail-nav-links { display: none; }
  .detail-nav-cta { padding: 10px 14px; font-size: 10px; letter-spacing: 1.5px; }
  .detail-hero-actions { gap: 20px; }
  .detail-hero-actions .detail-btn, .detail-cta-row .detail-btn { width: 100%; justify-content: center; }
  .detail-cta h2 { font-size: clamp(40px, 11vw, 60px); }
  .detail-siblings { grid-template-columns: 1fr; }
  .detail-gallery figcaption { padding: 28px 12px 12px; }
  .detail-gallery figcaption b { font-size: 9.5px; letter-spacing: 1.5px; }
  .detail-gallery figcaption span { font-size: 11px; }
  .detail-sibling { aspect-ratio: 16 / 9; }
  .detail-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .detail-footer-bar { flex-direction: column; }
  .detail-hero { min-height: auto; grid-template-columns: 1fr; gap: 42px; padding: 122px 0 68px; }
  .detail-hero h1 { max-width: 8ch; font-size: clamp(58px, 16vw, 82px); }
  .detail-hero p { font-size: 16px; margin-top: 26px; }
  .detail-hero-media { aspect-ratio: 4 / 3; }
  .detail-intro, .detail-list { grid-template-columns: 1fr; }
  .detail-list article + article { padding-left: 0; border-left: 0; }
  .detail-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; }
  .detail-gallery figure:first-child { grid-row: span 2; }
  .detail-section-head { display: block; }
  .detail-section-head p { margin-top: 24px; }
}

/* ==========================================================
   BOOK CONSULTATION — LEAD MODAL
   Mirrors the dialog styles in css/commercial.css so the same
   markup + js/commercial-lead.js work on the detail pages.
   The dialog is a direct child of <body>, so it declares its own colours.
========================================================== */
.lead-modal .c-label { display: flex; align-items: center; gap: 16px; font-size: 11px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; color: #C2E03A; margin-bottom: 28px; }
.lead-modal .c-label::before { content: ''; width: 48px; height: 1px; background: #C2E03A; flex-shrink: 0; }
.lead-modal .c-display { font-family: 'Cormorant Garamond', serif; font-weight: 300; line-height: .94; letter-spacing: -.015em; margin: 0; }
.lead-modal .c-display em { color: #C2E03A; font-style: italic; }
.lead-modal .c-btn { font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; padding: 19px 44px; text-decoration: none; transition: all .35s cubic-bezier(.23,1,.32,1); border: 1px solid transparent; }
.lead-modal .c-btn-solid { background: #C2E03A; color: #0E1015; }
.lead-modal .c-btn-solid:hover { background: #F7F2EA; }
.lead-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; overscroll-behavior: contain; }
.lead-modal[hidden] { display: none; }
.lead-backdrop { position: fixed; inset: 0; background: rgba(6,7,10,.78); backdrop-filter: blur(6px); animation: lead-fade .3s ease; }
.lead-panel { position: relative; width: min(880px, 100%); margin: auto; background: #14171F; border: 1px solid rgba(247,242,234,.12); padding: 56px 60px 48px; animation: lead-rise .42s cubic-bezier(.23,1,.32,1); }
@keyframes lead-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lead-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lead-backdrop, .lead-panel { animation: none; } }
.lead-close { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(247,242,234,.16); color: #F7F2EA; cursor: pointer; transition: all .3s cubic-bezier(.23,1,.32,1); }
.lead-close svg { width: 20px; height: 20px; fill: none; }
.lead-close:hover { border-color: #C2E03A; color: #C2E03A; }
.lead-close:focus-visible { outline: 2px solid #C2E03A; outline-offset: 2px; }
.lead-head { margin-bottom: 38px; padding-right: 52px; }
.lead-title { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 16px; color: #F7F2EA; }
.lead-intro { font-size: 15px; line-height: 1.75; color: rgba(247,242,234,.58); font-weight: 300; max-width: 52ch; margin: 0; }
.lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-bottom: 30px; }
.lead-field { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.lead-field label { font-family: 'DM Sans', sans-serif; font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(247,242,234,.72); }
.lead-field label span { color: #C2E03A; }
.lead-field input, .lead-field select { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 300; color: #F7F2EA; background: #0E1015; border: 1px solid rgba(247,242,234,.14); padding: 14px 16px; width: 100%; box-sizing: border-box; transition: border-color .28s, background .28s; -webkit-appearance: none; appearance: none; border-radius: 0; }
.lead-field input::placeholder { color: rgba(247,242,234,.28); }
.lead-field select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23C2E03A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; padding-right: 42px; cursor: pointer; }
.lead-field select option { background: #14171F; color: #F7F2EA; }
.lead-field input:focus, .lead-field select:focus { outline: none; border-color: #C2E03A; background: #12151C; }
.lead-field input[aria-invalid="true"], .lead-field select[aria-invalid="true"] { border-color: #E0603A; }
.lead-error { font-size: 11.5px; letter-spacing: .3px; color: #E0603A; }
.lead-submit { border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; width: 100%; }
.lead-submit[disabled] { opacity: .55; cursor: not-allowed; }
.lead-status { font-size: 14px; line-height: 1.7; margin: 0 0 18px; padding: 14px 16px; display: none; }
.lead-status.is-error { display: block; color: #F2B8A2; background: rgba(224,96,58,.10); border-left: 2px solid #E0603A; }
.lead-status.is-ok { display: block; color: #DCEFA4; background: rgba(194,224,58,.10); border-left: 2px solid #C2E03A; }
.lead-note { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: rgba(247,242,234,.38); text-align: center; }
.lead-done { text-align: center; padding: 22px 0 8px; }
.lead-done h3 { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 300; color: #F7F2EA; margin: 0 0 14px; }
.lead-done p { font-size: 15px; line-height: 1.8; color: rgba(247,242,234,.58); font-weight: 300; max-width: 44ch; margin: 0 auto; }
body.lead-open { overflow: hidden; }
@media (max-width: 760px) {
  .lead-modal { padding: 0; }
  .lead-panel { padding: 64px 22px 34px; min-height: 100%; border: none; width: 100%; box-sizing: border-box; }
  .lead-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }
  .lead-head { margin-bottom: 28px; padding-right: 44px; }
  .lead-close { top: 14px; right: 14px; }
}