/* =========================================================
   TRIMLY — Salon & Beauty, Simplified
   Design tokens: black + antique gold foil + rose-gold pink
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* Palette */
  --ink: #0a0a0a;
  --ink-soft: #141414;
  --panel: #1b1815;
  --panel-line: #2c2620;
  --gold-deep: #8a6a2f;
  --gold: #c9a44c;
  --gold-light: #f0d48a;
  --pink: #e893b5;
  --pink-soft: #f2c2d6;
  --ivory: #f7f3ea;
  --ivory-dim: #cfc7b7;

  --gold-gradient: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 45%, var(--gold-light) 100%);
  --pink-gold-gradient: linear-gradient(120deg, var(--pink) 0%, var(--gold-light) 100%);

  /* Type */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  /* Layout */
  --max-width: 1180px;
  --radius: 2px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 900px 700px at 88% -8%, rgba(232, 147, 181, 0.07), transparent 62%),
    radial-gradient(ellipse 750px 600px at -8% 55%, rgba(232, 147, 181, 0.05), transparent 65%),
    radial-gradient(ellipse 700px 850px at 102% 100%, rgba(242, 194, 214, 0.045), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  color: var(--ivory);
  letter-spacing: 0.01em;
}

p {
  margin: 0;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* Focus visibility for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

@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;
  }
}

/* ---------------------------------------------------------
   Eyebrow / small labels
   --------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* ---------------------------------------------------------
   Header / Nav
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  height: 40px;
  width: 40px;
  object-fit: cover;
  border-radius: 50%;
}

.brand-text {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.06em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.nav-links a {
  color: var(--ivory-dim);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold-light);
  border-color: var(--gold);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--panel-line);
  color: var(--ivory);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold-gradient);
  color: #201607;
  font-weight: 500;
}

.btn-primary:hover {
  box-shadow: 0 6px 22px rgba(201, 164, 76, 0.35);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-light);
}

.btn-outline:hover {
  background: var(--gold);
  color: #201607;
}

.btn-ghost {
  background: transparent;
  color: var(--ivory-dim);
  border-color: var(--panel-line);
}

.btn-ghost:hover {
  color: var(--ivory);
  border-color: var(--ivory-dim);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  padding: 90px 0 110px;
  overflow: hidden;
  border-bottom: 1px solid var(--panel-line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(232, 147, 181, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(201, 164, 76, 0.10), transparent 60%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  position: relative;
}

.hero-title {
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.05;
  margin: 18px 0 22px;
}

.hero-title em {
  font-style: italic;
  background: var(--pink-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy {
  font-size: 17px;
  color: var(--ivory-dim);
  max-width: 46ch;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-stat .num {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--gold-light);
  display: block;
}

.hero-stat .label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.hero-emblem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-emblem-ring {
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--panel-line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-emblem-ring::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 76, 0.25);
}

.hero-emblem img {
  width: 78%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 60px rgba(201, 164, 76, 0.18);
}

/* ---------------------------------------------------------
   Section shells
   --------------------------------------------------------- */
.section {
  padding: 90px 0;
}

.section-alt {
  background: var(--ink-soft);
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
}

.section-head {
  max-width: 640px;
  margin-bottom: 52px;
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 42px);
  margin-top: 14px;
}

.section-head p {
  color: var(--ivory-dim);
  margin-top: 14px;
  font-size: 15.5px;
}

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

/* ---------------------------------------------------------
   Service category strip (icons row, echoes the logo pill)
   --------------------------------------------------------- */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  border: 1px solid var(--gold-deep);
  border-radius: 999px;
  padding: 14px 28px;
  background: rgba(201, 164, 76, 0.05);
}

.category-pill .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory);
}

.category-pill .item .icon {
  color: var(--pink);
  font-size: 16px;
}

.category-pill .divider {
  width: 1px;
  height: 16px;
  background: var(--panel-line);
}

/* ---------------------------------------------------------
   Cards - services / features
   --------------------------------------------------------- */
.grid {
  display: grid;
  gap: 26px;
}

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

.card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--gold-deep);
  transform: translateY(-3px);
}

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 164, 76, 0.12);
  color: var(--gold-light);
  font-size: 20px;
  margin-bottom: 18px;
}

.card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.card p {
  color: var(--ivory-dim);
  font-size: 14.5px;
}

/* Service list card (services.html) */
.service-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.service-card.popular::after {
  content: "Popular";
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #201607;
  background: var(--gold-gradient);
  padding: 4px 10px;
  border-radius: 999px;
}

.service-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.service-card h3 {
  font-size: 21px;
}

.service-meta {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--ivory-dim);
  letter-spacing: 0.03em;
}

.service-price {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold-light);
  white-space: nowrap;
}

.service-desc {
  color: var(--ivory-dim);
  font-size: 14px;
  flex-grow: 1;
}

.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink);
  border: 1px solid rgba(232, 147, 181, 0.4);
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
}

/* ---------------------------------------------------------
   Filter tabs (services.html)
   --------------------------------------------------------- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.filter-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  background: transparent;
  color: var(--ivory-dim);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--gold);
  color: var(--ivory);
}

.filter-btn.active {
  background: var(--gold-gradient);
  color: #201607;
  border-color: transparent;
  font-weight: 500;
}

/* ---------------------------------------------------------
   Testimonials
   --------------------------------------------------------- */
.testimonial {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 30px;
  border-radius: var(--radius);
}

.testimonial .stars {
  color: var(--pink);
  letter-spacing: 3px;
  margin-bottom: 14px;
  font-size: 14px;
}

.testimonial p.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ivory);
  margin-bottom: 18px;
}

.testimonial .who {
  font-size: 13px;
  color: var(--ivory-dim);
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
   CTA band
   --------------------------------------------------------- */
.cta-band {
  text-align: center;
  padding: 80px 0;
  background: linear-gradient(180deg, var(--ink) 0%, #120d10 100%);
}

.cta-band h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 16px 0 30px;
}

/* ---------------------------------------------------------
   Forms (booking / account)
   --------------------------------------------------------- */
.form-shell {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 40px;
}

.form-row {
  margin-bottom: 22px;
}

.form-row label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 9px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  background: var(--ink-soft);
  border: 1px solid var(--panel-line);
  color: var(--ivory);
  padding: 13px 16px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14.5px;
  transition: border-color 0.2s ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--gold);
}

.form-row textarea {
  resize: vertical;
  min-height: 90px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.form-help {
  font-size: 12.5px;
  color: var(--ivory-dim);
  margin-top: 8px;
}

.form-message {
  padding: 13px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 22px;
  display: none;
}

.form-message.show {
  display: block;
}

.form-message.error {
  background: rgba(232, 90, 90, 0.12);
  border: 1px solid rgba(232, 90, 90, 0.4);
  color: #f2a3a3;
}

.form-message.success {
  background: rgba(120, 201, 140, 0.1);
  border: 1px solid rgba(120, 201, 140, 0.35);
  color: #a9dcb6;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.slot-btn {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid var(--panel-line);
  background: var(--ink-soft);
  color: var(--ivory-dim);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
}

.slot-btn:hover {
  border-color: var(--gold);
  color: var(--ivory);
}

.slot-btn.selected {
  background: var(--gold-gradient);
  border-color: transparent;
  color: #201607;
  font-weight: 500;
}

.slot-btn.taken {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

.auth-tabs {
  display: flex;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  margin-bottom: 34px;
  overflow: hidden;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 12px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  background: transparent;
  border: none;
  font-family: var(--font-body);
}

.auth-tab.active {
  background: var(--gold-gradient);
  color: #201607;
  font-weight: 500;
}

/* ---------------------------------------------------------
   Bookings list (my bookings)
   --------------------------------------------------------- */
.booking-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.booking-row .info h4 {
  font-size: 19px;
  margin-bottom: 6px;
}

.booking-row .info .meta {
  font-size: 13px;
  color: var(--ivory-dim);
}

.status-pill {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.status-pending { background: rgba(201, 164, 76, 0.15); color: var(--gold-light); }
.status-confirmed { background: rgba(120, 180, 220, 0.15); color: #9fd1f0; }
.status-completed { background: rgba(120, 201, 140, 0.15); color: #a9dcb6; }
.status-cancelled { background: rgba(232, 90, 90, 0.12); color: #f2a3a3; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--panel-line);
  padding: 60px 0 30px;
  background: var(--ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand .brand-text {
  font-size: 26px;
}

.footer-tagline {
  color: var(--ivory-dim);
  font-size: 14px;
  margin-top: 14px;
  max-width: 32ch;
}

.footer-col h4 {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  color: var(--ivory-dim);
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--gold-light);
}

.footer-bottom {
  border-top: 1px solid var(--panel-line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ivory-dim);
}

/* ---------------------------------------------------------
   Page header (inner pages)
   --------------------------------------------------------- */
.page-header {
  padding: 60px 0 50px;
  border-bottom: 1px solid var(--panel-line);
  position: relative;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 90% 0%, rgba(201, 164, 76, 0.08), transparent 60%);
  pointer-events: none;
}

.page-header h1 {
  font-size: clamp(34px, 5vw, 50px);
  margin-top: 14px;
}

.page-header p {
  color: var(--ivory-dim);
  margin-top: 14px;
  max-width: 56ch;
  font-size: 15.5px;
}

/* ---------------------------------------------------------
   About page specifics
   --------------------------------------------------------- */
.value-row {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--panel-line);
}

.value-row:last-child {
  border-bottom: none;
}

.value-num {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold-light);
  min-width: 40px;
}

.value-row h4 {
  font-size: 19px;
  margin-bottom: 6px;
}

.value-row p {
  color: var(--ivory-dim);
  font-size: 14.5px;
}

.contact-info-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.contact-info-row .icon {
  color: var(--gold-light);
  font-size: 18px;
  width: 26px;
}

.contact-info-row h4 {
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--ivory);
}

.contact-info-row p {
  color: var(--ivory-dim);
  font-size: 14px;
}

.map-frame {
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 260px;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.9) contrast(0.9);
}

/* ---------------------------------------------------------
   Utility
   --------------------------------------------------------- */
.mt-40 { margin-top: 40px; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-emblem { order: -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 26px; }
}

/* Mobile nav drawer */
.nav-links.open {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--ink-soft);
  border-bottom: 1px solid var(--panel-line);
  padding: 20px 28px;
  gap: 18px;
}

/* ===========================================================
   3D LAYER — animated depth, tilt & orbiting geometry
   =========================================================== */

body {
  perspective: 1600px;
}

/* --- three.js ambient canvas behind hero / page-header --- */
.bg3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

.hero,
.page-header {
  transform-style: preserve-3d;
}

.hero .container,
.page-header .container {
  position: relative;
  z-index: 1;
}

/* --- depth on interactive surfaces: cards tilt in 3D on hover --- */
.card,
.service-card,
.testimonial,
.booking-row,
.form-shell {
  transform-style: preserve-3d;
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover,
.service-card:hover,
.testimonial:hover,
.form-shell:hover {
  border-color: var(--gold-deep);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 164, 76, 0.12);
}

.card-icon {
  transform: translateZ(18px);
}

.card h3,
.service-card h3 {
  transform: translateZ(10px);
}

/* --- buttons: subtle 3D lift + gold edge on hover --- */
.btn {
  transform-style: preserve-3d;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.btn-primary {
  box-shadow: 0 4px 0 var(--gold-deep), 0 10px 24px rgba(201, 164, 76, 0.25);
}

.btn-primary:hover {
  box-shadow: 0 2px 0 var(--gold-deep), 0 14px 30px rgba(201, 164, 76, 0.4);
}

.btn-primary:active {
  box-shadow: 0 0 0 var(--gold-deep);
  transform: translateY(2px) translateZ(0) !important;
}

.btn-outline:hover,
.btn-ghost:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* --- hero emblem: Saturn-style orbiting 3D rings around the logo --- */
.hero-emblem {
  perspective: 1200px;
}

.emblem-3d {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: emblemFloat 7s ease-in-out infinite;
}

.emblem-ring-outer,
.emblem-ring-mid {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 76, 0.32);
  transform-style: preserve-3d;
}

.emblem-ring-outer {
  inset: -22px;
  border-color: rgba(201, 164, 76, 0.28);
  animation: ringSpinOuter 16s linear infinite;
}

.emblem-ring-mid {
  inset: -8px;
  border-color: rgba(232, 147, 181, 0.32);
  animation: ringSpinMid 11s linear infinite;
}

.hero-emblem-ring {
  transition: transform 0.15s ease-out;
}

@keyframes ringSpinOuter {
  from {
    transform: rotateX(72deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(72deg) rotateZ(360deg);
  }
}

@keyframes ringSpinMid {
  from {
    transform: rotateX(72deg) rotateZ(360deg);
  }
  to {
    transform: rotateX(72deg) rotateZ(0deg);
  }
}

@keyframes emblemFloat {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg);
  }
  50% {
    transform: translateY(-10px) rotateX(3deg);
  }
}

/* --- category pill lifts slightly on hover for depth (slot-btn and
   filter-btn intentionally excluded — a translateZ lift under the page's
   perspective caused a hover/click flicker on those interactive controls) --- */
.category-pill {
  transform-style: preserve-3d;
  transition: all 0.18s ease;
}

/* Reduced-motion / no-hover fallback: keep everything static & accessible */
@media (prefers-reduced-motion: reduce) {
  .emblem-ring-outer,
  .emblem-ring-mid,
  .emblem-3d {
    animation: none !important;
  }
  .bg3d-canvas {
    display: none;
  }
}

@media (hover: none) {
  .card:hover,
  .service-card:hover,
  .testimonial:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  .bg3d-canvas {
    opacity: 0.55;
  }
}

/* ===========================================================
   NAV DROPDOWNS — hover-revealed feature menus
   =========================================================== */
.nav-item {
  position: relative;
}

.nav-item.has-dropdown > a::after {
  content: "\25BE";
  display: inline-block;
  font-size: 9px;
  margin-left: 6px;
  opacity: 0.65;
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

.nav-item.has-dropdown:hover > a::after,
.nav-item.has-dropdown:focus-within > a::after {
  transform: translateY(0) rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 260px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 164, 76, 0.08);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: translateX(-50%) translateY(6px) rotateX(-10deg);
  transform-origin: top center;
  transition: opacity 0.2s ease, transform 0.22s ease, visibility 0.2s;
}

.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) rotateX(0deg);
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--ivory-dim);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.nav-dropdown a:hover {
  background: rgba(201, 164, 76, 0.1);
  color: var(--ivory);
  transform: translateZ(6px) translateX(2px);
}

.nav-dropdown strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ivory);
}

.nav-dropdown small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ivory-dim);
  line-height: 1.4;
}

.dd-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(201, 164, 76, 0.14);
  color: var(--gold-light);
}

.nav-dropdown-all {
  justify-content: center;
  margin-top: 4px;
  padding-top: 12px !important;
  border-top: 1px solid var(--panel-line);
  color: var(--gold-light) !important;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .nav-item.has-dropdown > a::after {
    display: none;
  }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.03);
    margin: 6px 0 6px 4px;
    padding: 6px;
  }
}

/* ===========================================================
   HOMEPAGE SERVICE CARDS — clickable, blinking glow on hover
   =========================================================== */
.service-glow-card {
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  position: relative;
}

.service-glow-card .card-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-glow-card:hover .card-cta {
  opacity: 1;
  transform: translateX(0);
}

.service-glow-card:hover .card-icon {
  animation: iconPulse 1s ease-in-out infinite;
}

.service-glow-card:hover {
  animation: cardBlink 1.1s ease-in-out infinite;
}

@keyframes cardBlink {
  0%,
  100% {
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 1px rgba(201, 164, 76, 0.35), 0 0 18px rgba(201, 164, 76, 0.28),
      0 0 42px rgba(232, 147, 181, 0.14);
  }
  50% {
    border-color: var(--gold-light);
    box-shadow: 0 0 0 1px rgba(240, 212, 138, 0.7), 0 0 32px rgba(201, 164, 76, 0.55),
      0 0 70px rgba(232, 147, 181, 0.35);
  }
}

@keyframes iconPulse {
  0%,
  100% {
    background: rgba(201, 164, 76, 0.14);
    color: var(--gold-light);
  }
  50% {
    background: rgba(201, 164, 76, 0.4);
    color: var(--ivory);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-glow-card:hover {
    animation: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 1px rgba(201, 164, 76, 0.5), 0 0 24px rgba(201, 164, 76, 0.35);
  }
  .service-glow-card:hover .card-icon {
    animation: none;
    background: rgba(201, 164, 76, 0.3);
  }
}

/* ===========================================================
   DOWNLOAD BUTTON — replaces Log In / Book Now in the navbar.
   Looks like the outline (Log In) button by default; on hover it
   swaps to look like the gold primary (Book Now) button. Clicking
   reveals a small popover with two platform options.
   =========================================================== */
.download-wrap {
  position: relative;
}

.btn-download {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dl-icon {
  display: inline-block;
  font-size: 13px;
  transition: transform 0.2s ease;
}

.btn-download:hover,
.btn-download:focus-visible,
.download-wrap.open .btn-download {
  background: var(--gold-gradient);
  color: #201607;
  box-shadow: 0 6px 22px rgba(201, 164, 76, 0.35);
  transform: translateY(-1px);
}

.download-wrap.open .dl-icon {
  transform: translateY(1px) rotate(180deg);
}

.download-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(201, 164, 76, 0.08);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.22s ease, visibility 0.2s;
}

.download-wrap.open .download-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.download-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--ivory-dim);
  transition: background 0.15s ease, color 0.15s ease;
}

.download-menu a:hover {
  background: rgba(201, 164, 76, 0.1);
  color: var(--ivory);
}

.download-menu strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ivory);
}

.download-menu small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ivory-dim);
}

.download-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel);
  border: 1px solid var(--gold-deep);
  color: var(--ivory);
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 500;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.download-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  .download-menu {
    right: -12px;
    min-width: 220px;
  }
}

/* ===========================================================
   RESPONSIVE OVERHAUL — laptop / tablet / phone
   Purely additive; later source order lets these safely refine
   the existing rules above for every breakpoint without editing
   any of them.
   =========================================================== */

html, body {
  overflow-x: hidden;
}

/* ---- Large tablets & small laptops ---- */
@media (max-width: 1080px) {
  .container {
    padding: 0 22px;
  }
  .nav {
    padding: 12px 22px;
  }
  .nav-links {
    gap: 22px;
    font-size: 13.5px;
  }
}

/* ---- Tablets: switch to the hamburger drawer earlier so the
   full link row + dropdown carets + Download button never
   overflow the header ---- */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-item.has-dropdown > a::after {
    display: none;
  }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.03);
    margin: 6px 0 6px 4px;
    padding: 6px;
    min-width: 0;
  }

  .hero {
    padding: 60px 0 70px;
  }
  .hero-title {
    font-size: clamp(34px, 7vw, 56px);
  }
  .section {
    padding: 60px 0;
  }
  .section-head {
    margin-bottom: 36px;
  }
  .form-shell {
    padding: 28px 22px;
  }
}

/* ---- Phones (landscape / large) ---- */
@media (max-width: 640px) {
  .container {
    padding: 0 18px;
  }
  .nav {
    padding: 12px 18px;
  }
  .brand img {
    height: 34px;
    width: 34px;
  }
  .brand-text {
    font-size: 20px;
  }

  .hero {
    padding: 44px 0 54px;
  }
  .hero-copy {
    font-size: 15.5px;
    max-width: 100%;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .hero-stats {
    gap: 22px;
  }
  .hero-emblem-ring {
    width: min(78%, 300px);
  }
  .emblem-3d {
    width: min(88%, 300px);
  }

  .section {
    padding: 46px 0;
  }
  .section-head h2 {
    font-size: clamp(26px, 7vw, 34px);
  }

  .grid-4,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .category-pill {
    justify-content: center;
    gap: 14px;
    padding: 14px 18px;
    width: 100%;
  }

  .filter-bar {
    gap: 8px;
  }
  .filter-btn {
    padding: 9px 16px;
    font-size: 12.5px;
  }

  .form-shell {
    padding: 22px 16px;
  }

  .booking-row {
    padding: 16px 18px;
    flex-direction: column;
    align-items: flex-start;
  }
  .booking-row > div {
    width: 100%;
  }
  .booking-row > div:last-child {
    justify-content: space-between;
    margin-top: 6px;
  }

  .footer-grid {
    gap: 30px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .download-menu {
    right: -8px;
  }
}

/* ---- Small phones ---- */
@media (max-width: 420px) {
  .hero-title {
    font-size: clamp(30px, 9vw, 42px);
  }
  .hero-stats {
    gap: 16px 24px;
  }
  .hero-stat .num {
    font-size: 24px;
  }
  .card,
  .service-card {
    padding: 20px 18px;
  }
  .testimonial {
    padding: 22px;
  }
  .brand-text {
    font-size: 18px;
  }
  .nav-toggle {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .btn {
    padding: 11px 20px;
    font-size: 12px;
  }
}

/* ---- Account dashboard: the sidebar/content split uses an
   inline style (grid-template-columns: 1fr 2fr) which beats normal
   class rules, so it needs an explicit override to stack on mobile. ---- */
@media (max-width: 900px) {
  #dashboardSection .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Tablet-width tightening for card grids so 2-up doesn't feel
   cramped between the 900px and 640px breakpoints above ---- */
@media (max-width: 760px) and (min-width: 641px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================================================
   RESPONSIVE FIXES — round 2 (logo scaling, dropdown clipping,
   category pill grid, account header crowding). Purely additive
   and placed last so these rules safely refine everything above
   without editing any existing rule.
   =========================================================== */

/* Fixed, deliberate crop for the navbar logo so the crest (crown + T)
   reads the same way at every size - it only gets smaller, never a
   different-looking crop, and scales smoothly instead of jumping
   straight from the desktop size to the phone size. Uses a dedicated
   pre-cropped icon (trimly-logo-icon.jpg) instead of squeezing the
   full business-card logo into a tiny circle. */
.brand img {
  object-position: 50% 50%;
}

@media (max-width: 900px) {
  .brand img {
    height: 38px;
    width: 38px;
  }
  .brand-text {
    font-size: 22px;
  }
}

/* Mobile hamburger dropdown panels (Services / Booking / About &
   Contact / Privacy Policy) must all match the width of the menu
   column instead of shrinking to fit their own content - that's
   what made each section look like a different-sized box. This also
   strips the desktop hover/focus-within centering transform (which
   was pushing the Privacy Policy panel off the left edge of the
   screen and clipping its text) so nothing but a plain full-width
   block is ever applied on mobile. */
@media (max-width: 900px) {
  .nav-dropdown,
  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown {
    width: 100%;
    box-sizing: border-box;
    left: 0;
    transform: none;
  }
}

/* Category pill (Hair / Skin / Nails / Grooming): a clean, centred
   2x2 grid on phones instead of an oddly-shaped pill that wraps to a
   ragged two-line row with a stray divider hanging off one line. */
@media (max-width: 640px) {
  .category-pill {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
    border-radius: 18px;
    padding: 16px 14px;
  }
  .category-pill .item {
    justify-content: center;
  }
  .category-pill .divider {
    display: none;
  }
}

/* Logged-in header (account.html, etc.): "TRIMLY" + "Hi, Name" +
   "Log Out" + the hamburger icon don't all fit on one line on phone
   widths. Drop the redundant greeting on small phones (the account
   page itself already shows the user's name) and shrink the
   remaining buttons so the row never overlaps or overflows. */
@media (max-width: 480px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .nav-cta {
    gap: 8px;
  }
  .nav-cta a[href="account.html"].btn-ghost {
    display: none;
  }
  .nav-cta .btn {
    padding: 8px 14px;
    font-size: 11px;
  }
}

/* Hero emblem (the orbiting-rings logo on the homepage): the rings
   around the logo used a fixed pixel gap (-22px / -8px / -18px)
   tuned for the desktop emblem size (~380px), but the emblem itself
   shrinks on phones (~300px). A percentage-based inset was tried
   here, but percentages on an absolutely-positioned element's
   top/bottom don't reliably resolve against a height that comes
   from `aspect-ratio` (rather than an explicit height) on some
   mobile browsers - that's exactly what was pushing the ring
   off-centre on phones. Fixed pixel values, re-tuned per breakpoint
   to match each screen's actual emblem size, avoid that ambiguity
   entirely and keep the ring centred and proportional everywhere. */
@media (max-width: 640px) {
  .emblem-ring-outer {
    inset: -17px;
  }
  .emblem-ring-mid {
    inset: -6px;
  }
  .hero-emblem-ring::before {
    inset: -14px;
  }
}

/* ===========================================================
   RESPONSIVE FIXES — round 3 (hero emblem gap on phones, even
   mobile-menu dropdown widths). Purely additive and placed last
   so these rules safely refine everything above without editing
   any existing rule.
   =========================================================== */

/* Hero emblem on phones: an earlier phone rule sized .emblem-3d to
   min(88%, 300px) AND separately sized .hero-emblem-ring (its own
   child) to min(78%, 300px) - since the ring's percentage resolves
   against emblem-3d, not the page, that stacked to roughly 69% of
   the frame instead of the ~100% desktop gets, which is exactly
   why the TRIMLY badge looked small with a big empty gap around it
   on a phone. Making the ring fill 100% of emblem-3d (its actual
   containing box) restores the same ring-to-frame ratio desktop
   uses, so the badge fills the circle the same way at every size. */
@media (max-width: 640px) {
  .hero-emblem-ring {
    width: 100%;
  }
}

/* Mobile hamburger dropdown panels: .nav-links had align-items:
   center (inherited from the desktop row layout) still active on
   .nav-links.open, so each <li> only shrink-wrapped to its own
   content width instead of stretching to the full menu width. The
   round 2 fix made .nav-dropdown width: 100%, but 100% of a
   shrink-wrapped <li> just matched that <li>'s own content, which
   is why Services/Booking/About/Privacy Policy each ended up a
   different width. Stretching the <li> items themselves is what
   makes every dropdown panel share one consistent container width. */
@media (max-width: 720px) {
  .nav-links.open {
    align-items: stretch;
  }
}