@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --plum-950: #190a11;
  --plum-900: #241019;
  --plum-800: #33162a;
  --plum-700: #4a2039;
  --plum-600: #5c2b48;
  --rose-600: #a43758;
  --rose-500: #c35170;
  --rose-400: #e593a4;
  --rose-300: #f4c6d1;
  --blush-100: #fbeef1;
  --cream-100: #fbf6f1;
  --cream-200: #f3ebe2;
  --cream-300: #e6d9cb;
  --gold-600: #9a7638;
  --gold-500: #b8934f;
  --gold-400: #d4b47a;
  --ink-900: #1a1014;
  --ink-700: #3b2a32;
  --ink-500: #6a5560;
  --white: #ffffff;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 18px 40px -22px rgba(36, 16, 25, 0.45);
  --shadow-lift: 0 30px 60px -30px rgba(36, 16, 25, 0.55);
  --transition: 220ms ease;
  --shell-max: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

body.nav-locked {
  overflow: hidden;
}

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

a {
  color: var(--rose-600);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover,
a:focus-visible {
  color: var(--plum-700);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--plum-900);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1.15em; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }

strong { color: var(--plum-900); }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 42px);
}

.section {
  padding: clamp(56px, 8vw, 108px) 0;
  position: relative;
}

.section--tint {
  background: var(--cream-200);
}

.section--blush {
  background: var(--blush-100);
}

.section--dark {
  background: var(--plum-900);
  color: #f6ecec;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--white);
}

.section--dark a {
  color: var(--rose-300);
}

.section--dark a:hover {
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose-600);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-500);
}

.section--dark .eyebrow {
  color: var(--rose-300);
}

.section-heading {
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 52px);
}

.section-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

.section-lead {
  font-size: 1.08rem;
  color: var(--ink-700);
  max-width: 62ch;
}

.section--dark .section-lead {
  color: rgba(255, 255, 255, 0.86);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(251, 246, 241, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(36, 16, 25, 0.08);
  transition: box-shadow var(--transition), background var(--transition);
}

.site-header.is-scrolled {
  box-shadow: 0 14px 30px -22px rgba(36, 16, 25, 0.55);
  background: rgba(251, 246, 241, 0.99);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--plum-900);
  letter-spacing: 0.01em;
}

.brand:hover { color: var(--plum-900); }

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

.header-meta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  margin-right: 18px;
}

.header-meta__item {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--ink-700);
  max-width: 230px;
}

.header-meta__item i {
  color: var(--rose-600);
  font-size: 0.82rem;
  margin-top: 5px;
}

.header-meta__item span {
  display: block;
  line-height: 1.4;
}

.header-meta__item a {
  color: var(--ink-700);
}

.header-meta__item a:hover {
  color: var(--rose-600);
}

/* ---------- Navigation ---------- */

.site-nav {
  display: flex;
  align-items: center;
}

.site-nav__panel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav__link {
  display: inline-block;
  padding: 9px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-700);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--plum-900);
  background: var(--cream-200);
}

.site-nav__link.is-current {
  color: var(--plum-900);
  background: var(--blush-100);
}

.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(36, 16, 25, 0.14);
  background: transparent;
  color: var(--plum-900);
  font-size: 1.05rem;
  cursor: pointer;
}

.site-nav__toggle:hover {
  background: var(--cream-200);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background: var(--plum-900);
  color: var(--white);
  display: flex;
  align-items: center;
}

.hero__stage {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: clamp(60px, 10vw, 130px) 0;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 22px;
}

.hero h1 em {
  font-style: italic;
  color: var(--rose-300);
}

.hero__lead {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 54ch;
  margin-bottom: 32px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__dots {
  position: absolute;
  left: clamp(18px, 4vw, 42px);
  bottom: 34px;
  z-index: 3;
  display: flex;
  gap: 10px;
}

.hero__dot {
  width: 34px;
  height: 3px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background var(--transition), width var(--transition);
}

.hero__dot.is-active {
  background: var(--rose-400);
  width: 56px;
}

.hero__caption {
  position: absolute;
  right: clamp(18px, 4vw, 42px);
  bottom: 32px;
  z-index: 3;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--plum-800);
  color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--rose-600);
  color: var(--white);
}

.btn-rose {
  background: var(--rose-600);
  color: var(--white);
}

.btn-rose:hover,
.btn-rose:focus-visible {
  background: var(--plum-800);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  border-color: var(--plum-800);
  color: var(--plum-900);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--plum-800);
  color: var(--white);
}

.btn-light {
  background: var(--cream-100);
  color: var(--plum-900);
}

.btn-light:hover,
.btn-light:focus-visible {
  background: var(--rose-300);
  color: var(--plum-900);
}

.btn-ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
  background: var(--white);
  color: var(--plum-900);
}

.btn--full { width: 100%; }

/* ---------- Stats strip ---------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: -52px;
  position: relative;
  z-index: 4;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 4vw, 36px);
}

.stat-strip__item {
  text-align: center;
  padding: 8px 8px;
}

.stat-strip__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--plum-900);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.stat-strip__value sup {
  color: var(--rose-600);
  font-size: 0.5em;
  top: -1em;
}

.stat-strip__label {
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-700);
}

/* ---------- Service cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 3vw, 30px);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.service-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-200);
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.service-card:hover .service-card__media img {
  transform: scale(1.05);
}

.service-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(36, 16, 25, 0.78);
  color: var(--white);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.service-card__body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card__title {
  margin-bottom: 12px;
}

.service-card__title a {
  color: var(--plum-900);
}

.service-card__title a:hover {
  color: var(--rose-600);
}

.service-card__text {
  color: var(--ink-700);
  font-size: 0.96rem;
  margin-bottom: 20px;
}

.service-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.price-tag {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--plum-900);
}

.price-tag span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: block;
  font-weight: 500;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--rose-600);
}

.text-link i {
  transition: transform var(--transition);
}

.text-link:hover i {
  transform: translateX(4px);
}

/* ---------- Split blocks ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 6;
  background: var(--cream-200);
  box-shadow: var(--shadow-soft);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__media--wide {
  aspect-ratio: 6 / 5;
}

.split__badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  background: var(--white);
  color: var(--plum-900);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  font-size: 0.86rem;
  line-height: 1.35;
  max-width: 220px;
}

.split__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.check-list li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: var(--ink-700);
}

.check-list li i {
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--rose-600);
  font-size: 0.9rem;
}

.section--dark .check-list li {
  color: rgba(255, 255, 255, 0.85);
}

.section--dark .check-list li i {
  color: var(--rose-300);
}

/* ---------- Media band ---------- */

.media-band {
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: clamp(64px, 10vw, 132px) 0;
}

.media-band h2,
.media-band h3 {
  color: var(--white);
}

.media-band .section-lead {
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- Process ---------- */

.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  counter-reset: step;
}

.process-step {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 24px 26px;
  box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--gold-400);
}

.process-step__num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--rose-300);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

.process-step h4 {
  margin-bottom: 8px;
}

.process-step p {
  font-size: 0.93rem;
  color: var(--ink-700);
  margin: 0;
}

.section--dark .process-step {
  background: rgba(255, 255, 255, 0.04);
  border-top-color: var(--rose-400);
  box-shadow: none;
}

.section--dark .process-step h4 {
  color: var(--white);
}

.section--dark .process-step p {
  color: rgba(255, 255, 255, 0.82);
}

.section--dark .process-step__num {
  color: var(--rose-400);
}

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.gallery-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cream-200);
}

.gallery-tile--wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.gallery-tile--tall {
  grid-row: span 2;
  aspect-ratio: 1 / 2;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.gallery-tile:hover img {
  transform: scale(1.05);
}

.gallery-tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 18px;
  background: linear-gradient(transparent, rgba(25, 10, 17, 0.82));
  color: var(--white);
  font-size: 0.88rem;
}

/* ---------- Team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}

.team-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.team-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--cream-200);
  overflow: hidden;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__body {
  padding: 22px 20px 26px;
}

.team-card__name {
  margin-bottom: 4px;
}

.team-card__role {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-600);
  margin-bottom: 14px;
  display: block;
}

.team-card__bio {
  font-size: 0.9rem;
  color: var(--ink-700);
  margin: 0;
}

/* ---------- Testimonials ---------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.testimonial-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px 30px 30px;
  box-shadow: var(--shadow-soft);
}

.testimonial-card::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--rose-300);
  position: absolute;
  top: 12px;
  right: 24px;
}

.testimonial-card__quote {
  font-size: 1rem;
  color: var(--ink-700);
  margin-bottom: 22px;
}

.testimonial-card__person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream-200);
  flex: 0 0 auto;
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  font-weight: 600;
  color: var(--plum-900);
  font-size: 0.95rem;
  display: block;
}

.testimonial-card__meta {
  font-size: 0.82rem;
  color: var(--ink-500);
}

.star-row {
  color: var(--gold-500);
  font-size: 0.8rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

/* ---------- Pricing tier ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.price-tier {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.price-tier--featured {
  background: var(--plum-900);
  color: rgba(255, 255, 255, 0.88);
  transform: translateY(-6px);
}

.price-tier--featured h3,
.price-tier--featured .price-tier__amount {
  color: var(--white);
}

.price-tier__label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-600);
  margin-bottom: 14px;
  display: block;
}

.price-tier--featured .price-tier__label {
  color: var(--rose-300);
}

.price-tier__amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--plum-900);
  line-height: 1;
  margin-bottom: 6px;
}

.price-tier__amount small {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}

.price-tier--featured .price-tier__amount small {
  color: rgba(255, 255, 255, 0.72);
}

.price-tier ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
}

.price-tier ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.94rem;
}

.price-tier ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--rose-600);
  font-size: 0.78rem;
}

.price-tier--featured ul li::before {
  color: var(--rose-300);
}

.price-tier .btn {
  margin-top: auto;
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.faq-item__button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 22px 24px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--plum-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.faq-item__button i {
  color: var(--rose-600);
  transition: transform var(--transition);
  flex: 0 0 auto;
}

.faq-item__button[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.faq-item__panel {
  padding: 0 24px 22px;
  color: var(--ink-700);
  font-size: 0.96rem;
}

.faq-item__panel[hidden] {
  display: none;
}

/* ---------- Blog ---------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.blog-card__media {
  aspect-ratio: 16 / 10;
  background: var(--cream-200);
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__meta {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose-600);
  margin-bottom: 12px;
}

.blog-card__title {
  margin-bottom: 12px;
}

.blog-card__title a {
  color: var(--plum-900);
}

.blog-card__title a:hover {
  color: var(--rose-600);
}

.blog-card__text {
  font-size: 0.95rem;
  color: var(--ink-700);
  margin-bottom: 20px;
}

.blog-card__foot {
  margin-top: auto;
}

/* ---------- Forms ---------- */

.contact-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(26px, 4vw, 44px);
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-700);
  text-transform: uppercase;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink-900);
  background: var(--cream-100);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.form-control::placeholder {
  color: var(--ink-500);
}

.form-control:hover {
  border-color: var(--gold-400);
}

.form-control:focus {
  outline: none;
  border-color: var(--rose-500);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(195, 81, 112, 0.16);
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  background-image: none;
  cursor: pointer;
}

.form-control.field-invalid {
  border-color: var(--rose-600);
  box-shadow: 0 0 0 3px rgba(164, 55, 88, 0.14);
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--ink-700);
  grid-column: 1 / -1;
}

.form-consent input {
  margin-top: 4px;
  accent-color: var(--rose-600);
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.newsletter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.newsletter .form-control {
  flex: 1 1 240px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--white);
}

.newsletter .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter .form-control:focus {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--rose-300);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--plum-800);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 60px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.cta-band h2,
.cta-band h3 {
  color: var(--white);
  margin-bottom: 8px;
}

.cta-band p {
  margin: 0;
  max-width: 54ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--plum-950);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(48px, 7vw, 84px) 0 26px;
  font-size: 0.92rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.78);
}

.site-footer a:hover {
  color: var(--rose-300);
}

.site-footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 34px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--white);
  margin-bottom: 16px;
}

.footer-brand:hover {
  color: var(--white);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.footer-contact i {
  color: var(--rose-300);
  margin-top: 5px;
  font-size: 0.85rem;
}

.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 0.95rem;
  transition: background var(--transition), color var(--transition);
}

.footer-socials a:hover {
  background: var(--rose-600);
  color: var(--white);
}

.footer-legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-legal p {
  margin: 0;
}

.footer-registry {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
}

/* ---------- Cookie banner ---------- */

.frenumi-cookie {
  position: fixed;
  left: clamp(14px, 3vw, 34px);
  bottom: clamp(14px, 3vw, 30px);
  z-index: 1080;
  width: min(430px, calc(100vw - 28px));
  display: none;
}

.frenumi-cookie.is-visible {
  display: block;
  animation: frenumi-cookie-rise 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.frenumi-cookie[hidden] {
  display: none !important;
}

.frenumi-cookie__panel {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(36, 16, 25, 0.08);
  box-shadow: 0 26px 60px -26px rgba(36, 16, 25, 0.6);
  padding: 26px 26px 22px;
}

.frenumi-cookie__badge {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--plum-800);
  color: var(--rose-300);
  font-size: 1.05rem;
  box-shadow: 0 10px 24px -12px rgba(36, 16, 25, 0.65);
}

.frenumi-cookie__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--plum-900);
  margin: 10px 0 8px;
}

.frenumi-cookie__copy {
  font-size: 0.9rem;
  color: var(--ink-700);
  margin: 0 0 20px;
}

.frenumi-cookie__link {
  color: var(--rose-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.frenumi-cookie__link:hover {
  color: var(--plum-800);
}

.frenumi-cookie__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.frenumi-cookie__button {
  flex: 1 1 auto;
  padding: 12px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.frenumi-cookie__button:hover {
  transform: translateY(-1px);
}

.frenumi-cookie__button--decline {
  background: transparent;
  border-color: rgba(36, 16, 25, 0.22);
  color: var(--plum-900);
}

.frenumi-cookie__button--decline:hover {
  border-color: var(--plum-800);
  background: var(--cream-200);
}

.frenumi-cookie__button--accept {
  background: var(--plum-800);
  color: var(--white);
}

.frenumi-cookie__button--accept:hover {
  background: var(--rose-600);
  color: var(--white);
}

@keyframes frenumi-cookie-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Utilities ---------- */

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--blush-100);
  color: var(--rose-600);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.badge-soft--dark {
  background: rgba(255, 255, 255, 0.1);
  color: var(--rose-300);
}

.divider-gold {
  width: 60px;
  height: 2px;
  background: var(--gold-500);
  border: 0;
  margin: 22px 0;
}

.ratio-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.surface-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 4vw, 38px);
}

.section--dark .surface-card {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.lead-note {
  font-size: 1.02rem;
  color: var(--ink-700);
  border-left: 3px solid var(--gold-400);
  padding-left: 18px;
}

.section--dark .lead-note {
  color: rgba(255, 255, 255, 0.86);
  border-left-color: var(--rose-400);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .header-meta__item--address {
    display: none;
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .site-nav__toggle {
    display: inline-flex;
  }

  .site-nav__panel {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--cream-100);
    flex-direction: column;
    align-items: stretch;
    padding: 24px clamp(18px, 4vw, 42px);
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
    overflow-y: auto;
  }

  .site-nav__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--transition), transform var(--transition);
  }

  .site-nav__link {
    padding: 14px 4px;
    font-size: 1.05rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(36, 16, 25, 0.08);
  }

  .split,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__media {
    order: 0;
  }

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

  .gallery-tile--wide {
    grid-column: span 2;
  }

  .gallery-tile--tall {
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  .header-meta {
    display: none;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .hero {
    min-height: 560px;
  }

  .hero__caption {
    display: none;
  }

  .hero__dots {
    bottom: 24px;
  }

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }

  .stat-strip {
    margin-top: -36px;
  }

  .frenumi-cookie__button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---------- Fixes: media band text contrast ---------- */

.media-band h1,
.media-band h2,
.media-band h3,
.media-band h4,
.media-band h5 {
  color: #ffffff;
}

.media-band .eyebrow {
  color: #f4c6d1;
}

.media-band .eyebrow::before {
  background: #d4b47a;
}

.media-band p,
.media-band .section-lead {
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- QA overrides: media-band contrast ---------- */

.media-band h1 {
  color: var(--white);
}

.media-band .eyebrow {
  color: var(--rose-300);
}

.media-band .eyebrow::before {
  background: var(--rose-300);
}

.media-band .surface-card {
  color: var(--ink-900);
}

.media-band .surface-card h1,
.media-band .surface-card h2,
.media-band .surface-card h3,
.media-band .surface-card h4,
.media-band .surface-card strong {
  color: var(--plum-900);
}

.media-band .surface-card p,
.media-band .surface-card li,
.media-band .surface-card span,
.media-band .surface-card .footer-contact li,
.media-band .surface-card .footer-contact span {
  color: var(--ink-700);
}

.media-band .surface-card .footer-contact i {
  color: var(--rose-600);
}

.media-band .surface-card a,
.media-band .surface-card a span {
  color: var(--rose-600);
}

.media-band .surface-card a:hover,
.media-band .surface-card a:hover span {
  color: var(--plum-800);
}

/* ---------- QA overrides: inline form confirmation ---------- */

.form-notice {
  display: none;
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--gold-500);
  background: var(--blush-100);
  color: var(--plum-900);
  font-size: 0.95rem;
  font-weight: 600;
}

.form-notice.is-visible {
  display: block;
}

/* ---------- About page overrides: hero contrast + nav toggle button ---------- */

.media-band {
  background-color: var(--plum-950);
}

.media-band h1,
.media-band h2,
.media-band h3,
.media-band h4 {
  color: var(--white);
}

.media-band .eyebrow {
  color: var(--rose-300);
}

.media-band .eyebrow::before {
  background: var(--rose-300);
}

.media-band .section-lead {
  color: rgba(255, 255, 255, 0.92);
}

.site-nav__link.nav-services-toggle {
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

.site-nav__link.nav-services-toggle:hover,
.site-nav__link.nav-services-toggle:focus-visible {
  color: var(--plum-900);
  background: var(--cream-200);
}

@media (max-width: 900px) {
  .site-nav__link.nav-services-toggle {
    width: 100%;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(36, 16, 25, 0.08);
    border-radius: 0;
  }
}

/* ---------- QA fix: process steps readable column widths ---------- */

/* Six numbered steps: keep one column on phones, two readable columns on
   tablets and desktops so paragraph text is not squeezed into ~250px tracks. */
@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 30px);
  }
}

@media (min-width: 1400px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.process > .process-step {
  width: 100%;
  min-width: 0;
}

/* ---------- QA fix: process step grid readability ---------- */

/* Four step cards in one wide row left each column too narrow for the
   body copy, so the paragraph was squeezed into a 256px track.
   Use two readable columns on desktop / tablet and one on phones. */

.process {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 28px);
}

.process > .process-step {
  width: 100%;
  min-width: 0;
}

@media (max-width: 620px) {
  .process {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Fix: process step card text was hidden behind invisible placeholders ---------- */

/* AOS fade-up leaves data-aos elements at opacity 0 until the reveal runs; when a
   step card is not triggered (or the reveal script fails) only the number-less
   placeholder area stayed visible, producing tall blank cards. Keep step text
   readable regardless of the reveal state, and stop cards from stretching. */
.media-band .process-step,
.media-band .process-step[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  align-self: start;
}

.media-band .process-step h4,
.media-band .process-step p {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: block;
}

/* ---------- Fix: step card heading and description must be rendered ---------- */

/* The number label rendered but the h4 + paragraph were collapsing to zero
   height inside the cards. Re-assert normal block boxes and typography for the
   card children so the step text is always visible, independent of any
   animation or utility rule that may hide them. */
.media-band .process-step > h4,
.media-band .process-step > p {
  display: block !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
  font-size: inherit;
  content-visibility: visible !important;
}

.media-band .process-step > h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--plum-900) !important;
  margin: 0 0 8px;
}

.media-band .process-step > p {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--ink-700) !important;
  margin: 0;
}

/* Keep the cards sized to their content instead of stretching the grid rows. */
.media-band .process > .process-step {
  align-self: start;
  height: auto;
}

/* ---------- Fix: cookie notice no longer clips the hero paragraph on phones ---------- */

/* On small screens the fixed cookie panel sat over the middle of the hero and
   covered the tail of the introductory paragraph. Reserve room for the notice
   inside the hero at the bottom of its content flow, so the lead copy and the
   action buttons stay fully readable above it. */
@media (max-width: 620px) {
  body:has(.frenumi-cookie.is-visible:not([hidden])) .hero__inner {
    padding-bottom: 380px;
  }
}

/* ---------- Fix 2: cookie panel must not cover the hero copy on small screens ---------- */

/* The fixed notice is anchored to the viewport bottom, so the hero paragraph was
   still being covered when it extended into the lower half of the screen.
   Instead of only reserving space, cap the panel height and let its body scroll,
   so it never grows over the introductory text. */
.frenumi-cookie__panel {
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 620px) {
  .frenumi-cookie {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .frenumi-cookie__panel {
    max-height: none;
    overflow: visible;
    padding: 22px 20px 18px;
  }

  .frenumi-cookie__badge {
    top: -14px;
    left: 18px;
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .frenumi-cookie__title {
    font-size: 1.05rem;
    margin: 6px 0 6px;
  }

  .frenumi-cookie__copy {
    font-size: 0.84rem;
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .frenumi-cookie__actions {
    gap: 8px;
  }

  .frenumi-cookie__button {
    flex: 1 1 calc(50% - 4px);
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  /* Keep the whole hero block readable when the notice is showing. */
  body:has(.frenumi-cookie.is-visible:not([hidden])) .hero__inner {
    padding-bottom: 60px;
    padding-top: 28px;
  }

  body:has(.frenumi-cookie.is-visible:not([hidden])) .hero {
    align-items: flex-start;
    min-height: 0;
    padding-bottom: 300px;
  }
}

/* ---------- Fix 3: dock the cookie notice below the hero copy on phones ---------- */

/* The fixed notice kept sitting on top of the introductory paragraph because the
   hero text simply extends to the bottom of the screen. Move the notice into the
   normal document flow on small screens so it appears after the hero content,
   never across the paragraph, and make the hero content start at the top. */
@media (max-width: 620px) {
  .hero {
    align-items: flex-start;
    min-height: 0;
  }

  .hero__inner {
    padding-top: 32px;
    padding-bottom: 56px;
  }

  body:has(.frenumi-cookie.is-visible:not([hidden])) .hero__inner {
    padding-top: 32px;
    padding-bottom: 56px;
  }

  body:has(.frenumi-cookie.is-visible:not([hidden])) .hero {
    align-items: flex-start;
    min-height: 0;
    padding-bottom: 0;
  }

  .frenumi-cookie,
  body:has(.frenumi-cookie.is-visible:not([hidden])) .frenumi-cookie {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0 12px 18px;
    z-index: auto;
  }

  .frenumi-cookie.is-visible {
    animation: none;
  }

  .frenumi-cookie__panel {
    max-height: none;
    overflow: visible;
    box-shadow: var(--shadow-soft);
  }

  .frenumi-cookie__button {
    flex: 1 1 calc(50% - 4px);
  }
}

/* ---------- Fix: checklist text in photo-backed media bands ---------- */

/* The "Six years of nails" / studio-history band sets a dark photo as its
   background with a plum overlay, but the shared .check-list rule still paints
   the bullet text in --ink-700 (dark grey), so the list was effectively
   invisible on the photo. Only the dark, photo-backed band (and the plum
   section--dark) needs the light treatment; lists on cream/white sections keep
   their dark ink. */
.media-band .check-list li,
.section--dark .check-list li {
  color: rgba(255, 255, 255, 0.92);
}

.media-band .check-list li i,
.section--dark .check-list li i {
  color: var(--rose-300);
}

/* ---------- Fix: checklist legibility inside photo-backed media bands (mobile) ---------- */

/* The studio-history / experience bands place a dark photo behind the content
   and rely on a plum overlay for contrast, but the check-list items inherited a
   colour that lost the specificity battle on small screens, leaving near-black
   text over the photograph. Anchor the light treatment to the section scope
   with an explicit, unambiguous selector chain so the list stays readable at
   every breakpoint, while the star/check glyphs keep their rose tint. */
main > section.media-band .check-list li,
main > section.media-band .check-list > li {
  color: #ffffff;
}

main > section.media-band .check-list li i,
main > section.media-band .check-list > li > i {
  color: var(--rose-300);
}

/* ---------- Fix: price figures inside pricing tier cards were overlapped by the list ---------- */

/* The tier amount is a single-line display line-height:1 block whose glyphs
   (Playfair Display with descenders and a tall cap height) can overflow its
   own box; the following <ul> then painted a few pixels into it on narrow
   screens, cutting through the $65 / $95 / $140 figures. Give the amount a
   real line box, keep it as an isolated stacking context above the list, and
   make sure the list always starts below it. Desktop and mobile share the same
   rules since the defect is spacing-based, not breakpoint-based. */
.price-tier .price-tier__amount {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1.12;
  padding-bottom: 2px;
  overflow: visible;
}

.price-tier ul {
  position: relative;
  z-index: 0;
  margin-top: clamp(16px, 4vw, 22px);
  padding-top: 0;
}

.price-tier ul > li {
  overflow-wrap: break-word;
}