:root {
  --navy-950: #07111f;
  --navy-900: #0b192b;
  --navy-800: #14263d;
  --gold-600: #a87925;
  --gold-500: #c69a48;
  --gold-200: #e8d8b3;
  --paper: #f5f3ee;
  --white: #ffffff;
  --ink: #172033;
  --muted: #657084;
  --line: #d9dde5;
  --green: #19704b;
  --green-soft: #e7f3ed;
  --orange: #a85412;
  --orange-soft: #fff0db;
  --red: #a52b25;
  --red-soft: #fbe9e7;
  --shadow: 0 18px 48px rgba(7, 17, 31, 0.1);
  --page: min(1180px, calc(100% - 40px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body.nav-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--navy-950);
  font-weight: 600;
  letter-spacing: 0;
}

p {
  line-height: 1.7;
}

.page-width {
  width: var(--page);
  margin-inline: auto;
}

.is-hidden {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-160%);
  background: var(--white);
  color: var(--navy-950);
  padding: 10px 14px;
  border: 2px solid var(--gold-500);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(7, 17, 31, 0.97);
  color: var(--white);
}

.site-nav {
  width: var(--page);
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-brand img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(198, 154, 72, 0.6);
  background: var(--white);
}

.site-brand span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.site-brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  color: var(--white);
  white-space: nowrap;
}

.site-brand small {
  color: #bac4d2;
  font-size: 0.74rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-bottom: 2px solid transparent;
  color: #d7dde7;
  font-size: 0.88rem;
  font-weight: 700;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--gold-500);
  color: var(--white);
}

.nav-links .admin-link {
  margin-left: 8px;
  border: 1px solid rgba(198, 154, 72, 0.65);
  border-radius: 4px;
  color: var(--gold-200);
}

.menu-button {
  display: none;
  min-width: 64px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-weight: 800;
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--gold-600);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-hero {
  min-height: min(720px, calc(100vh - 76px));
  display: grid;
  align-items: center;
  background-color: rgba(245, 243, 238, 0.82);
  background-image: url("/assets/mcdougall-banner.png");
  background-repeat: no-repeat;
  background-position: center 18%;
  background-size: cover;
  background-blend-mode: screen;
  border-bottom: 1px solid var(--gold-200);
}

.hero-content {
  padding-block: 110px 130px;
}

.hero-content .eyebrow {
  font-size: 0.86rem;
}

.hero-content h1 {
  max-width: 780px;
  margin-bottom: 18px;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 0.96;
}

.hero-lead {
  max-width: 650px;
  margin-bottom: 30px;
  color: #38445a;
  font-size: 1.18rem;
}

.presence-inline {
  width: fit-content;
  max-width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(7, 17, 31, 0.08);
}

.presence-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 4px rgba(101, 112, 132, 0.13);
}

.is-online .presence-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(25, 112, 75, 0.14);
}

.is-offline .presence-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(165, 43, 37, 0.13);
}

.intro-band {
  padding: 62px 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.intro-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 80px;
  align-items: start;
}

.intro-layout h2 {
  margin-bottom: 0;
  font-size: 2rem;
  line-height: 1.25;
}

.intro-layout > p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.03rem;
}

.section {
  padding-block: 82px;
}

.section-heading {
  margin-bottom: 32px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: 2.2rem;
}

.section-heading > p {
  max-width: 500px;
  margin-bottom: 0;
  color: var(--muted);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-card {
  min-height: 210px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.service-index {
  display: block;
  margin-bottom: 34px;
  color: var(--gold-600);
  font-size: 0.78rem;
  font-weight: 900;
}

.service-card h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.service-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.action-band {
  padding-block: 80px;
  background: var(--navy-950);
  color: var(--white);
}

.light-heading h2,
.light-heading .eyebrow {
  color: var(--white);
}

.light-heading > p {
  color: #aeb9c9;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.action-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  border: 1px solid #334057;
  border-radius: 6px;
  background: var(--navy-900);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.action-card:hover,
.action-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold-500);
  background: var(--navy-800);
}

.action-card span {
  color: var(--gold-200);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.action-card strong {
  max-width: 270px;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  line-height: 1.25;
}

.action-card small {
  color: #aeb9c9;
}

.page-main {
  min-height: calc(100vh - 76px);
  padding-bottom: 80px;
}

.login-main {
  min-height: calc(100vh - 76px);
  display: grid;
  place-items: center;
  padding: 54px 20px;
  background-color: var(--paper);
  background-image: url("/assets/mcdougall-background.png");
  background-repeat: no-repeat;
  background-position: center 22%;
  background-size: cover;
  background-blend-mode: screen;
}

.login-panel {
  width: min(470px, 100%);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold-500);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: 34px;
}

.login-panel > img {
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  border: 1px solid var(--gold-200);
  object-fit: cover;
}

.login-panel h1 {
  margin-bottom: 12px;
  font-size: 2.4rem;
}

.login-panel > p {
  color: var(--muted);
}

.login-panel form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.login-help {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.login-help strong {
  color: var(--navy-900);
}

.login-help p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.client-identity-strip {
  width: fit-content;
  max-width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 3px solid var(--gold-500);
  background: var(--white);
  box-shadow: 0 6px 18px rgba(7, 17, 31, 0.06);
  padding: 10px 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.client-identity-strip strong {
  color: var(--navy-900);
}

.client-identity-strip a {
  color: var(--gold-600);
  font-weight: 800;
}

.page-intro {
  padding-block: 62px 38px;
}

.page-intro h1 {
  margin-bottom: 14px;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
}

.page-intro > p:last-child {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 800;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.button-primary {
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: var(--navy-950);
}

.button-primary:hover,
.button-primary:focus-visible {
  border-color: var(--gold-600);
  background: var(--gold-600);
  color: var(--white);
}

.button-quiet {
  border-color: var(--line);
  background: var(--white);
  color: var(--navy-900);
}

.button-quiet:hover,
.button-quiet:focus-visible {
  border-color: var(--gold-500);
}

.button-wide {
  width: 100%;
}

label {
  display: grid;
  gap: 7px;
  color: #39445a;
  font-size: 0.82rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(198, 154, 72, 0.17);
}

.form-grid,
.client-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-wide {
  grid-column: 1 / -1;
}

.checkbox-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted);
  font-weight: 700;
}

.checkbox-line input {
  width: 17px;
  height: 17px;
  min-height: auto;
  margin-top: 1px;
}

.form-status {
  min-height: 22px;
  margin: 12px 0 0;
  font-size: 0.88rem;
  font-weight: 800;
}

.form-status.success {
  color: var(--green);
}

.form-status.error {
  color: var(--red);
}

.chat-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: 650px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.chat-aside {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--navy-950);
  color: var(--white);
}

.cabinet-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cabinet-identity img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid var(--gold-500);
  background: var(--white);
}

.cabinet-identity div,
.presence-card div {
  display: grid;
  gap: 3px;
}

.cabinet-identity span {
  color: #aeb9c9;
  font-size: 0.82rem;
}

.presence-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #2a374b;
  border-bottom: 1px solid #2a374b;
}

.presence-card .presence-dot {
  margin-top: 5px;
}

.presence-card p {
  margin: 0;
  color: #aeb9c9;
  font-size: 0.82rem;
  line-height: 1.5;
}

.privacy-note {
  margin-top: auto;
}

.privacy-note strong {
  color: var(--gold-200);
  font-size: 0.84rem;
}

.privacy-note p {
  margin: 8px 0 0;
  color: #9eabba;
  font-size: 0.8rem;
  line-height: 1.55;
}

.chat-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(230px, 1fr) auto;
}

.chat-header {
  min-height: 72px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}

.chat-header > div {
  display: grid;
  gap: 4px;
}

.chat-header span {
  color: var(--muted);
  font-size: 0.78rem;
}

.conversation-area {
  min-height: 280px;
  max-height: 560px;
  overflow-y: auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #eef1f4;
  background-image: linear-gradient(rgba(7, 17, 31, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 17, 31, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
}

.conversation-empty {
  max-width: 420px;
  margin: auto;
  padding: 22px;
  text-align: center;
  color: var(--muted);
}

.conversation-empty strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}

.conversation-empty p {
  margin-bottom: 0;
}

.message-bubble {
  width: fit-content;
  max-width: min(74%, 620px);
  padding: 14px 16px 10px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(7, 17, 31, 0.08);
}

.message-bubble.client {
  align-self: flex-end;
  background: #dcece4;
}

.message-bubble.cabinet {
  align-self: flex-start;
  border-left: 3px solid var(--gold-500);
  background: var(--white);
}

.bubble-author {
  display: block;
  margin-bottom: 6px;
  color: var(--navy-900);
  font-size: 0.74rem;
  font-weight: 900;
}

.message-bubble p {
  margin-bottom: 8px;
  white-space: pre-wrap;
  line-height: 1.55;
}

.bubble-meta {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  color: var(--muted);
  font-size: 0.7rem;
}

.chat-compose {
  padding: 20px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.message-field {
  margin-top: 14px;
}

.message-field textarea {
  min-height: 90px;
}

.compose-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.compose-hint {
  color: var(--muted);
  font-size: 0.76rem;
}

.appointment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 22px;
  align-items: start;
}

.planner-panel,
.appointment-form-panel,
.pricing-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 14px 38px rgba(7, 17, 31, 0.07);
}

.planner-panel {
  min-width: 0;
  padding: 20px;
}

.planner-toolbar {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.planner-toolbar > div {
  display: grid;
  gap: 3px;
  padding-inline: 10px;
  text-align: center;
}

.planner-toolbar span {
  color: var(--muted);
  font-size: 0.72rem;
}

.planner-toolbar strong {
  color: var(--navy-900);
  font-size: 0.86rem;
}

.planner-legend {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.planner-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
}

.swatch.unavailable,
.slot.unavailable,
.slot.blocked {
  background: #d7dbe2;
}

.swatch.available,
.slot.available {
  background: var(--white);
}

.swatch.pending,
.slot.pending {
  border-color: #db9b5a;
  background: var(--orange-soft);
}

.swatch.booked,
.slot.booked {
  border-color: var(--red);
  background: var(--red);
}

.swatch.selected,
.slot.selected {
  border-color: var(--gold-600);
  background: #f3e6c7;
}

.week-planner {
  overflow: auto;
  border: 1px solid var(--line);
  outline: none;
}

.week-planner:focus-visible {
  box-shadow: 0 0 0 3px rgba(198, 154, 72, 0.18);
}

.week-grid {
  min-width: 750px;
}

.week-header,
.week-row {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(92px, 1fr));
}

.week-head,
.week-time,
.slot {
  min-height: 50px;
  padding: 7px;
  display: grid;
  align-content: center;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.week-head {
  background: #ece8df;
  color: var(--navy-900);
  font-size: 0.76rem;
}

.week-head strong,
.week-head span,
.week-time span {
  display: block;
}

.week-head span,
.week-time span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
}

.week-time {
  background: #f6f7f8;
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 900;
  text-align: left;
}

.slot {
  min-width: 0;
  color: #596376;
  font-size: 0.72rem;
  font-weight: 900;
}

button.slot.available {
  cursor: pointer;
  color: var(--green);
}

button.slot.available:hover,
button.slot.available:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: -3px;
}

.slot.pending {
  color: var(--orange);
}

.slot.booked {
  color: var(--white);
}

.slot-feedback {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 0.82rem;
}

.slot-feedback strong {
  color: var(--navy-900);
}

.appointment-form-panel {
  position: sticky;
  top: 96px;
  overflow: hidden;
}

.panel-heading {
  padding: 20px;
  display: grid;
  gap: 4px;
  border-bottom: 1px solid #26364c;
  background: var(--navy-900);
  color: var(--white);
}

.panel-heading span {
  color: var(--gold-200);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.appointment-form-panel form {
  padding: 20px;
}

.appointment-form-panel .form-grid {
  grid-template-columns: 1fr;
}

.appointment-form-panel .field-wide {
  grid-column: auto;
}

.appointment-form-panel .button {
  margin-top: 18px;
}

.approval-note {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.pricing-section {
  display: grid;
  gap: 18px;
}

.pricing-table-wrap {
  overflow: auto;
}

.pricing-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.pricing-table th {
  background: var(--navy-900);
  color: var(--white);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.pricing-table th:last-child,
.pricing-table td:last-child {
  width: 170px;
  text-align: right;
}

.pricing-table td:first-child {
  color: var(--navy-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  font-weight: 700;
}

.pricing-table td:nth-child(2) {
  color: var(--muted);
}

.pricing-table td:last-child {
  color: var(--gold-600);
  font-size: 1.03rem;
  font-weight: 900;
}

.pricing-table tbody tr:last-child td {
  border-bottom: 0;
}

.pricing-table tbody tr:hover {
  background: #faf8f3;
}

.pricing-note {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-left: 4px solid var(--gold-500);
  background: var(--white);
}

.pricing-note > div {
  display: grid;
  gap: 4px;
}

.pricing-note span {
  color: var(--gold-600);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pricing-note p {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--muted);
}

.pricing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.site-footer {
  border-top: 1px solid #2b384c;
  background: var(--navy-950);
  color: #aeb9c9;
}

.footer-inner {
  width: var(--page);
  min-height: 116px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
}

.footer-brand img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--gold-500);
  background: var(--white);
}

.footer-meta {
  display: flex;
  gap: 24px;
  font-size: 0.8rem;
}

@media (max-width: 960px) {
  .site-nav {
    min-height: 68px;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-links {
    position: fixed;
    inset: 68px 0 auto 0;
    display: none;
    padding: 14px 20px 22px;
    flex-direction: column;
    align-items: stretch;
    border-top: 1px solid #2b384c;
    background: var(--navy-950);
    box-shadow: 0 18px 30px rgba(7, 17, 31, 0.3);
  }

  .nav-open .nav-links {
    display: flex;
  }

  .nav-links a {
    justify-content: space-between;
    border-bottom: 1px solid #2b384c;
  }

  .nav-links .admin-link {
    margin: 8px 0 0;
  }

  .home-hero {
    min-height: 620px;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-grid {
    grid-template-columns: 1fr;
  }

  .action-card {
    min-height: 170px;
  }

  .chat-layout {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .appointment-layout {
    grid-template-columns: 1fr;
  }

  .appointment-form-panel {
    position: static;
  }

  .appointment-form-panel .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appointment-form-panel .field-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  :root {
    --page: min(100% - 28px, 1180px);
  }

  .site-brand small {
    display: none;
  }

  .home-hero {
    min-height: 560px;
    background-position: center top;
  }

  .hero-content {
    padding-block: 92px;
  }

  .hero-content h1 {
    font-size: 3.4rem;
  }

  .hero-lead {
    font-size: 1rem;
  }

  .intro-layout,
  .section-heading {
    grid-template-columns: 1fr;
    display: grid;
    gap: 20px;
  }

  .section {
    padding-block: 58px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .action-band {
    padding-block: 58px;
  }

  .page-intro {
    padding-block: 44px 28px;
  }

  .login-panel {
    padding: 24px;
  }

  .client-identity-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .chat-layout {
    display: block;
    overflow: visible;
  }

  .chat-aside {
    padding: 18px;
  }

  .privacy-note {
    display: none;
  }

  .chat-panel {
    display: block;
  }

  .conversation-area {
    min-height: 320px;
    max-height: 500px;
    padding: 18px;
  }

  .message-bubble {
    max-width: 88%;
  }

  .client-fields,
  .form-grid,
  .appointment-form-panel .form-grid {
    grid-template-columns: 1fr;
  }

  .field-wide,
  .appointment-form-panel .field-wide {
    grid-column: auto;
  }

  .compose-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .planner-toolbar {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .planner-toolbar > div {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .planner-toolbar .button {
    min-width: 0;
    padding-inline: 8px;
    font-size: 0.78rem;
  }

  .slot-feedback,
  .pricing-note,
  .footer-inner,
  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer-inner {
    min-height: 150px;
    justify-content: center;
  }

  .footer-meta {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Cabinet McDougall & Law Group */
:root {
  --navy-950: #070706;
  --navy-900: #0d0c0a;
  --navy-800: #17140f;
  --gold-600: #b68732;
  --gold-500: #d2a64d;
  --gold-200: #f2d895;
  --paper: #090908;
  --white: #f7eed8;
  --ink: #f4ead2;
  --muted: #b9af9b;
  --line: rgba(210, 166, 77, 0.28);
  --green: #5faa7b;
  --green-soft: rgba(54, 112, 77, 0.22);
  --orange: #d79642;
  --orange-soft: rgba(151, 91, 24, 0.24);
  --red: #cf665d;
  --red-soft: rgba(143, 42, 36, 0.24);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
}

body {
  background-color: #080807;
  background-image: url("/assets/mcdougall-background.png");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: var(--ink);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: rgba(5, 5, 4, 0.88);
  pointer-events: none;
}

h1, h2, h3 {
  color: #f5e3b7;
  text-shadow: 0 1px 18px rgba(210, 166, 77, 0.08);
}

.site-header {
  border-bottom-color: rgba(210, 166, 77, 0.34);
  background: rgba(5, 5, 4, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.site-nav { min-height: 82px; }
.site-brand { flex: 0 0 270px; }
.site-brand img, .footer-brand img {
  border: 1px solid rgba(210, 166, 77, 0.55);
  background: #0b0a08;
  object-fit: cover;
}
.site-brand img { width: 56px; height: 56px; }
.site-brand strong { color: #f2d895; font-size: 1.05rem; }
.site-brand small, .nav-links a, .footer-meta, .light-heading > p { color: #b9af9b; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: #f7eed8; }
.nav-links .admin-link { border-color: rgba(210, 166, 77, 0.58); color: #f2d895; }

.home-hero.mcdougall-hero {
  position: relative;
  isolation: isolate;
  min-height: min(680px, calc(100svh - 190px));
  overflow: hidden;
  align-items: end;
  border-bottom: 1px solid rgba(210, 166, 77, 0.5);
  background: #050504;
}

.hero-backdrop, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-backdrop { z-index: -2; object-fit: cover; object-position: center; }
.hero-shade { z-index: -1; background: rgba(0, 0, 0, 0.38); }
.mcdougall-hero .hero-content { padding-block: 70px 42px; }
.mcdougall-hero h1 {
  max-width: 760px;
  margin-bottom: 8px;
  color: #fff3d0;
  font-size: 4.25rem;
  line-height: 1.02;
  text-shadow: 0 4px 28px #000;
}
.mcdougall-hero .hero-lead {
  margin-bottom: 22px;
  color: #f2d895;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}
.hero-actions, .access-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.presence-inline {
  border-color: rgba(210, 166, 77, 0.34);
  background: rgba(8, 8, 7, 0.86);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  color: #ded4be;
}

.intro-band, .services-band, .section, .page-main { background: rgba(8, 8, 7, 0.92); }
.history-band { padding: 68px 0; border-color: var(--line); }
.history-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.3fr);
  gap: 64px;
  align-items: center;
}
.history-mark {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(210, 166, 77, 0.4);
  background: #0a0907;
  box-shadow: var(--shadow);
}
.history-mark img { width: 100%; height: 100%; object-fit: cover; }
.history-layout h2 { font-size: 2.4rem; }
.history-layout p, .section-heading > p, .service-card p, .value-item p { color: var(--muted); }

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.value-item {
  min-height: 210px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(18, 16, 12, 0.88);
  padding: 24px;
}
.value-item span, .service-index { color: var(--gold-500); font-weight: 800; }
.value-item h3 { margin: 42px 0 8px; }
.services-band { border-block: 1px solid var(--line); background: rgba(13, 12, 10, 0.95); }
.service-grid { border-color: var(--line); }
.service-card {
  border-color: var(--line);
  background: rgba(18, 16, 12, 0.9);
  transition: background 160ms ease, border-color 160ms ease;
}
.service-card:hover { border-color: rgba(210, 166, 77, 0.58); background: #1a1711; }
.action-band { border-top: 1px solid rgba(210, 166, 77, 0.35); background: #050504; }
.action-card { border-color: rgba(210, 166, 77, 0.24); background: #11100d; }
.action-card:hover, .action-card:focus-visible { border-color: var(--gold-500); background: #1a1711; }

.button { border-radius: 4px; }
.button-primary, button.primary {
  border-color: #e2bd6b;
  background: #d2a64d;
  color: #100e0a;
  box-shadow: 0 8px 24px rgba(210, 166, 77, 0.13);
}
.button-primary:hover, .button-primary:focus-visible { background: #edcb7d; color: #090806; }
.button-quiet {
  border-color: rgba(210, 166, 77, 0.36);
  background: rgba(13, 12, 10, 0.9);
  color: #ead6a3;
}
.button-quiet:hover, .button-quiet:focus-visible { border-color: var(--gold-500); background: #1a1711; }
.page-intro { padding-top: 54px; }
.page-intro h1 { font-size: 3rem; }

.login-main {
  position: relative;
  isolation: isolate;
  background-color: #050504;
  background-image: url("/assets/mcdougall-background.png");
  background-blend-mode: normal;
}
.login-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
}
.login-panel {
  position: relative;
  width: min(520px, 100%);
  border-color: rgba(210, 166, 77, 0.42);
  border-top-color: #d2a64d;
  background: rgba(10, 9, 7, 0.96);
  color: var(--ink);
}
.login-panel > img {
  width: 108px;
  height: 108px;
  border-color: rgba(210, 166, 77, 0.48);
  object-fit: cover;
}
.login-panel > p, .login-help p { color: var(--muted); }
.login-help { border-color: var(--line); }
.login-help strong { color: #f2d895; }
.discord-oauth-button { margin-top: 24px; }
.access-denied-panel { border-top-color: #cf665d; }

.client-identity-strip, .chat-aside, .chat-panel, .planner-panel, .appointment-form-panel,
.pricing-table-wrap, .pricing-note, .presence-card, .privacy-note {
  border-color: var(--line);
  background: rgba(15, 14, 11, 0.96);
  color: var(--muted);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.24);
}
.client-identity-strip strong, .chat-header strong, .cabinet-identity strong,
.panel-heading strong, .pricing-note strong { color: #f2d895; }
.cabinet-identity img { border-color: var(--line); background: #080807; }
.chat-header, .planner-toolbar, .panel-heading, .pricing-table th {
  border-color: var(--line);
  background: #0b0a08;
}
.conversation-area, .chat-compose, .week-planner, .slot-feedback {
  border-color: var(--line);
  background: #0d0c0a;
}
.message-bubble, .conversation-bubble { border-color: rgba(210, 166, 77, 0.22); background: #181610; }
.message-bubble.cabinet, .conversation-bubble.cabinet {
  border-color: rgba(210, 166, 77, 0.58);
  background: #211c12;
}
input, select, textarea {
  border-color: rgba(210, 166, 77, 0.28) !important;
  background: #0b0a08 !important;
  color: #f4ead2 !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold-500) !important;
  box-shadow: 0 0 0 3px rgba(210, 166, 77, 0.12);
}
.pricing-table th { color: #f2d895; }
.pricing-table td, .pricing-table th { border-color: var(--line); }
.pricing-table tbody tr:hover { background: rgba(210, 166, 77, 0.07); }
.site-footer { border-top: 1px solid rgba(210, 166, 77, 0.34); background: #050504; }

@media (max-width: 900px) {
  .site-brand { flex-basis: auto; }
  .mcdougall-hero h1 { font-size: 3.2rem; }
  .history-layout { grid-template-columns: 1fr; }
  .history-mark { width: min(360px, 100%); }
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .site-nav { gap: 10px; }
  .site-brand { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .site-brand img { width: 48px; height: 48px; }
  .site-brand span { min-width: 0; }
  .site-brand strong { white-space: normal; font-size: 0.9rem; line-height: 1.05; }
  .site-brand small { display: none; }
  .home-hero.mcdougall-hero { min-height: 610px; }
  .hero-backdrop { object-position: center top; }
  .hero-shade { background: rgba(0, 0, 0, 0.54); }
  .mcdougall-hero h1 { font-size: 2.35rem; }
  .mcdougall-hero .hero-lead { font-size: 1.15rem; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions .button { width: 100%; text-align: center; }
  .hero-actions .button:first-child { grid-column: 1 / -1; }
  .history-layout h2, .section-heading h2, .page-intro h1 { font-size: 2rem; }
  .value-grid { grid-template-columns: 1fr; }
}

/* Direction publique McDougall : noir, or et grands plans immersifs. */
body {
  background:#080806;
  color:#eee7d7;
}

.site-header {
  position:fixed;
  width:100%;
  background:rgba(5,5,4,.82);
  border-bottom-color:rgba(198,154,72,.28);
  backdrop-filter:blur(14px);
}

.site-nav { min-height:70px; }
.site-brand img { border-radius:0; background:#090806; }
.nav-links a { color:#d8d1c2; font-weight:600; }
.nav-links .admin-link { border-color:rgba(198,154,72,.42); }
.client-sound-toggle { min-height:34px; border:0; border-left:1px solid rgba(198,154,72,.3); background:transparent; color:#b9ae98; padding:0 0 0 12px; font-size:.7rem; cursor:pointer; }
.client-sound-toggle:hover,.client-sound-toggle:focus-visible { color:#f0d48e; }
.client-audio-controls { position:relative; }
.client-audio-panel { position:absolute; z-index:30; top:calc(100% + 16px); right:0; width:260px; padding:18px; border:1px solid rgba(198,154,72,.42); background:rgba(8,8,7,.98); box-shadow:0 22px 55px rgba(0,0,0,.52); color:#d9d0bf; }
.client-audio-panel::before { content:""; position:absolute; right:20px; top:-7px; width:12px; height:12px; border-left:1px solid rgba(198,154,72,.42); border-top:1px solid rgba(198,154,72,.42); background:#080807; transform:rotate(45deg); }
.client-audio-panel strong { display:block; margin-bottom:13px; color:#f1d89d; font:1.05rem Georgia,serif; }
.client-audio-panel label { display:flex; align-items:center; gap:9px; margin:10px 0; color:#d5cbbb; font-size:.78rem; }
.client-audio-panel input[type="checkbox"] { accent-color:#c69a48; }
.client-audio-panel .client-audio-volume { display:grid; grid-template-columns:1fr auto; margin-top:15px; }
.client-audio-volume input { grid-column:1/-1; width:100%; accent-color:#c69a48; }
.client-audio-panel small { display:block; margin-top:12px; color:#8f8677; font-size:.66rem; line-height:1.5; }
.client-autoplay-prompt { position:fixed; z-index:80; right:18px; bottom:18px; border:1px solid rgba(198,154,72,.62); border-radius:4px; background:rgba(8,8,7,.96); color:#f0d48e; padding:10px 13px; font:600 .72rem Georgia,serif; box-shadow:0 12px 34px rgba(0,0,0,.45); cursor:pointer; }
.client-autoplay-prompt:hover,.client-autoplay-prompt:focus-visible { border-color:#e3bd66; color:#fff1bf; }
.client-autoplay-prompt[hidden] { display:none; }

body:not(.luxury-home) main { padding-top:70px; }
body:not(.luxury-home) .page-intro,
body:not(.luxury-home) .portal-card,
body:not(.luxury-home) .form-card,
body:not(.luxury-home) .pricing-shell,
body:not(.luxury-home) .private-shell { color:#172033; }

.luxury-home main { background:#070706; }
.story-hero { position:relative; min-height:100vh; overflow:hidden; display:flex; align-items:flex-start; padding:clamp(120px,14vh,170px) 0 100px; isolation:isolate; }
.story-background { position:absolute; z-index:-3; inset:-5%; background:url('/assets/mcdougall-background.png') center top/cover no-repeat; will-change:transform; }
.story-overlay { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(4,4,3,.97) 0%,rgba(4,4,3,.9) 52%,rgba(4,4,3,.54) 100%),linear-gradient(0deg,#070706 0%,transparent 25%); }
.story-content { width:min(920px,calc(100% - 48px)); margin-left:max(24px,calc((100% - 1180px)/2)); margin-right:auto; }
.story-content h1 { margin:0 0 34px; max-width:720px; color:#f6ead0; font-size:clamp(3.2rem,8vw,7.2rem); line-height:.92; }
.story-copy { max-width:760px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1rem,1.35vw,1.18rem); color:#d8d1c4; }
.story-copy p { margin-bottom:1.15em; line-height:1.8; }
.story-copy blockquote { margin:34px 0; border-left:2px solid #c69a48; color:#f1d998; padding:12px 0 12px 26px; font:italic clamp(1.45rem,3vw,2.3rem) Georgia,serif; }
.story-signature { display:grid; gap:7px; max-width:560px; margin-top:56px; border-top:1px solid rgba(198,154,72,.42); padding-top:24px; }
.story-signature span,.story-signature small { color:#a99f8c; }
.story-signature strong { color:#f0d48e; font:clamp(1.4rem,3vw,2.1rem) Georgia,serif; }
.presence-inline { margin-top:28px; border-color:rgba(198,154,72,.36); background:rgba(5,5,4,.55); color:#eee7d7; }

.immersive-section { position:relative; min-height:92vh; display:grid; align-items:end; overflow:hidden; padding:100px 0; isolation:isolate; }
.immersive-media { position:absolute; z-index:-2; inset:-5%; background:url('/assets/mcdougall-banner.png') center/cover no-repeat; filter:saturate(.85); will-change:transform; }
.immersive-section::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(4,4,3,.96),rgba(4,4,3,.25) 70%),linear-gradient(90deg,rgba(4,4,3,.7),transparent); }
.commitment-section { background:url('/assets/mcdougall-background.png') center/cover fixed; }
.commitment-section::before { background:linear-gradient(90deg,rgba(4,4,3,.5),rgba(4,4,3,.96) 58%); }
.immersive-copy { max-width:740px; margin-left:max(24px,calc((100% - 1180px)/2)); margin-right:auto; }
.immersive-copy.align-end { margin-left:auto; margin-right:max(24px,calc((100% - 1180px)/2)); text-align:right; }
.immersive-copy h2 { margin:0 0 20px; color:#f5ead0; font-size:clamp(2.8rem,6vw,5.7rem); line-height:1; }
.immersive-copy p { max-width:620px; color:#d4ccbd; font-size:1.08rem; }
.align-end p { margin-left:auto; }
.discreet-cta { width:max-content; margin-top:22px; border-radius:2px; }
.align-end .discreet-cta { margin-left:auto; }
.reveal-section .story-content,.reveal-section .immersive-copy { opacity:0; transform:translateY(34px); transition:opacity .9s ease,transform .9s ease; }
.reveal-section.is-visible .story-content,.reveal-section.is-visible .immersive-copy { opacity:1; transform:translateY(0); }
.site-footer { background:#050504; border-top:1px solid rgba(198,154,72,.25); color:#cfc6b5; }

@media (prefers-reduced-motion:reduce) {
  .reveal-section .story-content,.reveal-section .immersive-copy { opacity:1; transform:none; transition:none; }
  .story-background,.immersive-media { transform:none!important; }
}

@media (max-width:900px) {
  .site-header { position:sticky; }
  .nav-links { background:rgba(5,5,4,.98); }
  .client-sound-toggle { width:100%; border-left:0; border-top:1px solid rgba(198,154,72,.25); padding:12px; text-align:left; }
  .client-audio-controls { width:100%; }
  .client-audio-panel { position:relative; top:auto; right:auto; width:100%; border-inline:0; box-shadow:none; }
  .client-audio-panel::before { display:none; }
  .story-hero { padding-top:80px; }
  .story-content,.immersive-copy,.immersive-copy.align-end { width:calc(100% - 40px); margin-inline:auto; text-align:left; }
  .align-end p,.align-end .discreet-cta { margin-left:0; }
  .commitment-section::before { background:rgba(4,4,3,.82); }
}

@media (max-width:620px) {
  .story-content h1 { font-size:3.4rem; }
  .story-copy { font-size:.98rem; }
  .immersive-section { min-height:82vh; }
  .immersive-copy h2 { font-size:2.7rem; }
}

/* Expérience tarifs : affiches suspendues dans un décor juridique profond. */
.luxury-pricing { background:#050504; color:#eee8dc; }
.luxury-pricing .site-footer { position:relative; z-index:3; }
.pricing-experience { overflow:hidden; background:#050504; }
.pricing-hero { position:relative; min-height:78vh; display:flex; align-items:flex-end; isolation:isolate; padding:150px 0 90px; }
.pricing-hero-media { position:absolute; z-index:-3; inset:-4%; background:url('/assets/mcdougall-background.png') center 30%/cover no-repeat; }
.pricing-hero-shade { position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(3,3,2,.96),rgba(3,3,2,.62) 58%,rgba(3,3,2,.38)),linear-gradient(0deg,#050504,transparent 45%); }
.pricing-hero-copy { width:min(760px,calc(100% - 48px)); margin-left:max(24px,calc((100% - 1180px)/2)); }
.pricing-hero-copy h1 { margin:0 0 24px; color:#f6ead0; font:clamp(3.2rem,7vw,6.7rem)/.95 Georgia,serif; }
.pricing-hero-copy>p:last-of-type { max-width:650px; color:#d6cebe; font-size:1.08rem; line-height:1.8; }
.pricing-scroll-link { display:inline-flex; margin-top:22px; padding:12px 0; border-bottom:1px solid #c69a48; color:#f0d48e; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.pricing-showcase { position:relative; min-height:110vh; isolation:isolate; display:grid; grid-template-columns:minmax(260px,.72fr) minmax(540px,1.28fr); align-items:center; gap:clamp(36px,6vw,92px); padding:120px max(24px,calc((100% - 1320px)/2)); perspective:1800px; content-visibility:auto; contain-intrinsic-size:auto 980px; }
.pricing-showcase-professionnels { grid-template-columns:minmax(540px,1.28fr) minmax(260px,.72fr); }
.pricing-showcase-professionnels .pricing-showcase-copy { order:2; }
.pricing-showcase-professionnels .pricing-premium-panel { order:1; }
.pricing-scene-media { position:absolute; z-index:-3; inset:-4%; background:url('/assets/mcdougall-banner.png') center/cover no-repeat; opacity:.34; }
.pricing-showcase-professionnels .pricing-scene-media { background-image:url('/assets/mcdougall-background.png'); transform-origin:center; }
.pricing-showcase::before { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(5,5,4,.96),rgba(5,5,4,.5) 55%,rgba(5,5,4,.86)),linear-gradient(0deg,#050504,transparent 30%,#050504); }
.pricing-showcase-professionnels::before { background:linear-gradient(270deg,rgba(5,5,4,.96),rgba(5,5,4,.5) 55%,rgba(5,5,4,.86)),linear-gradient(0deg,#050504,transparent 30%,#050504); }
.pricing-scene-glow { position:absolute; z-index:-1; width:52vw; height:52vw; max-width:800px; max-height:800px; right:5%; top:21%; border-radius:50%; background:radial-gradient(circle,rgba(198,154,72,.12),transparent 70%); }
.pricing-showcase-professionnels .pricing-scene-glow { right:auto; left:4%; }
.pricing-showcase-copy { position:relative; z-index:2; }
.pricing-showcase-copy h2 { margin:0 0 22px; color:#f5ead2; font:clamp(2.7rem,5vw,5.4rem)/1 Georgia,serif; }
.pricing-showcase-copy>p:last-child { color:#cfc5b5; font-size:1.05rem; line-height:1.8; }
.pricing-showcase-copy.align-end { text-align:right; }

.pricing-premium-panel { --tilt-x:0deg; --tilt-y:0deg; position:relative; z-index:1; width:100%; max-width:780px; margin:0; transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(18px); transform-style:preserve-3d; transition:transform .24s ease; box-shadow:0 28px 40px rgba(0,0,0,.52),0 0 18px rgba(198,154,72,.09); }
.pricing-premium-panel::before { content:""; position:absolute; z-index:-1; inset:1.4% -1.2% -1.4% 1.2%; border:1px solid rgba(231,191,102,.26); background:#11100d; transform:translateZ(-22px); }
.pricing-premium-panel img { position:relative; z-index:1; display:block; width:100%; height:auto; border:1px solid rgba(226,181,85,.52); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.pricing-panel-edge { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(105deg,rgba(255,226,157,.12),transparent 20%,transparent 78%,rgba(198,154,72,.08)); transform:translateZ(10px); }
.pricing-premium-panel figcaption { padding:13px 2px 0; color:#9f937f; font-size:.7rem; letter-spacing:.1em; text-align:right; text-transform:uppercase; }

.pricing-live-section { position:relative; padding:110px 24px 130px; background:linear-gradient(180deg,#050504,#0b0a08); content-visibility:auto; contain-intrinsic-size:auto 760px; }
.pricing-live-inner { width:min(1180px,100%); margin:0 auto; }
.pricing-live-heading { display:grid; grid-template-columns:1fr minmax(280px,480px); align-items:end; gap:50px; margin-bottom:42px; padding-bottom:30px; border-bottom:1px solid rgba(198,154,72,.3); }
.pricing-live-heading h2 { margin:0; color:#f4e8cf; font:clamp(2.2rem,4vw,4.2rem)/1.03 Georgia,serif; }
.pricing-live-heading>p { margin:0; color:#aaa08f; line-height:1.75; }
.pricing-live-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid rgba(198,154,72,.28); background:rgba(198,154,72,.22); }
.pricing-live-grid article { min-height:180px; display:flex; flex-direction:column; gap:9px; justify-content:flex-end; padding:26px; background:#0b0a08; transition:background .25s ease,transform .25s ease; }
.pricing-live-grid article:hover { position:relative; z-index:1; background:#12100c; transform:translateY(-3px); }
.pricing-live-grid span { color:#8f8677; font-size:.75rem; line-height:1.5; }
.pricing-live-grid strong { color:#eee3cd; font:1.3rem/1.2 Georgia,serif; }
.pricing-live-grid p { margin:0; color:#d7ae5b; font-weight:800; }
.luxury-pricing .reveal-section .pricing-showcase-copy,.luxury-pricing .reveal-section .pricing-premium-panel,.luxury-pricing .reveal-section .pricing-live-inner { opacity:0; transform:translateY(38px); transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1); }
.luxury-pricing .reveal-section.is-visible .pricing-showcase-copy,.luxury-pricing .reveal-section.is-visible .pricing-live-inner { opacity:1; transform:translateY(0); }
.luxury-pricing .reveal-section.is-visible .pricing-premium-panel { opacity:1; transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(28px); transition-delay:.12s; }

@media (max-width:1000px) {
  .pricing-showcase,.pricing-showcase-professionnels { grid-template-columns:1fr; min-height:auto; padding-top:100px; padding-bottom:100px; }
  .pricing-showcase-professionnels .pricing-showcase-copy,.pricing-showcase-professionnels .pricing-premium-panel { order:initial; }
  .pricing-showcase-copy,.pricing-showcase-copy.align-end { max-width:760px; text-align:left; }
  .pricing-premium-panel { max-width:720px; margin-inline:auto; }
  .pricing-live-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .pricing-hero { min-height:72vh; padding-top:110px; }
  .pricing-hero-copy h1 { font-size:3.35rem; }
  .pricing-showcase { padding-inline:18px; gap:34px; }
  .pricing-showcase-copy h2 { font-size:2.65rem; }
  .pricing-premium-panel { box-shadow:0 18px 28px rgba(0,0,0,.5); transform:none!important; }
  [data-parallax] { transform:none!important; }
  .pricing-live-heading { grid-template-columns:1fr; gap:20px; }
  .pricing-live-grid { grid-template-columns:1fr; }
  .pricing-live-grid article { min-height:145px; }
}

@media (prefers-reduced-motion:reduce) {
  .luxury-pricing .reveal-section .pricing-showcase-copy,.luxury-pricing .reveal-section .pricing-premium-panel,.luxury-pricing .reveal-section .pricing-live-inner { opacity:1; transform:none; transition:none; }
}

@view-transition { navigation:auto; }
::view-transition-old(root),::view-transition-new(root) { animation-duration:.18s; animation-timing-function:ease; }
html body { opacity:1; transition:opacity .16s ease; }
html.page-leaving body { opacity:.35; }