/* ===================================
   RokMyStyle Shared Stylesheet
   Brand: Deep Brown · Blush Pink · Leopard Tan
   =================================== */

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

/* === Design Tokens === */
:root {
  --brown-dark:   #5C3A2E;
  --brown-mid:    #8B5A4A;
  --brown-light:  #B8865A;
  --blush:        #F2D7D0;
  --blush-mid:    #E8C4BA;
  --blush-light:  #FAF0EC;
  --blush-pale:   #FDFAF8;
  --tan:          #C8A882;
  --tan-dark:     #A07850;
  --cream:        #FDFAF8;
  --white:        #FFFFFF;
  --text-dark:    #2C1810;
  --text-body:    #4A3429;
  --text-muted:   #8B7068;
  --border:       #E8D5CC;

  --shadow-sm:  0 2px 8px rgba(92,58,46,0.08);
  --shadow-md:  0 4px 20px rgba(92,58,46,0.13);
  --shadow-lg:  0 8px 40px rgba(92,58,46,0.18);

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-max: 1200px;
  --section-v:     5rem;
  --radius:        0.5rem;
  --radius-lg:     1rem;
  --transition:    0.28s ease;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--cream); color: var(--text-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font-body); }

/* === Typography === */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-dark); line-height: 1.2; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
h4 { font-size: 1.15rem; }
p { color: var(--text-body); line-height: 1.8; }

/* === Layout === */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: var(--section-v) 0; }
.section--dark   { background-color: var(--brown-dark); }
.section--light  { background-color: var(--blush-light); }
.section--blush  { background-color: var(--blush); }
.section--white  { background-color: var(--white); }

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

/* === HEADER === */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background-color: #F5EDE0;
  padding: 0.875rem 0;
  box-shadow: 0 2px 12px rgba(92,58,46,0.14);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wordmark {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.8rem; font-weight: 500;
  color: var(--brown-dark); letter-spacing: 0.02em; flex-shrink: 0;
  display: flex; align-items: center;
}
.wordmark em { font-style: normal; font-weight: 400; }
.header-logo { height: 48px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 0.15rem; }
.site-nav a {
  color: var(--brown-dark); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 0.7rem; border-radius: var(--radius);
  transition: background var(--transition);
}
.site-nav a:hover, .site-nav a.active {
  background-color: rgba(92,58,46,0.08);
}

.header-cta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.header-phone {
  color: var(--brown-dark); font-size: 0.875rem; font-weight: 600;
  white-space: nowrap; display: flex; align-items: center; gap: 0.35rem;
  transition: color var(--transition);
}
.header-phone:hover { color: var(--brown-mid); }
.header-phone svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 40px; height: 40px;
  /* Without this the header row squeezes it to nothing on the pages whose
     wordmark is wide, and there is no button left to tap. */
  flex-shrink: 0;
  cursor: pointer; background: none; border: none; padding: 8px;
}
.hamburger span {
  display: block; height: 2px; background: var(--brown-dark);
  border-radius: 2px; transition: transform var(--transition), opacity var(--transition);
}

/* === LIVE NOW RIBBON ===
   The way in to live.html, on every page. It only exists while a broadcast is
   actually on air: main.js asks once on load and unhides it. Hidden, it is
   display:none, so an ordinary day looks exactly as it did before.
   It sits above the header row instead of inside it because that row is already
   down to its last few pixels on a small phone, and a full width ribbon cannot
   push anything sideways at any width. */
.live-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; flex-wrap: wrap;
  /* Cancels the header's own top padding so the ribbon meets the top edge. */
  margin: -0.875rem 0 0.875rem;
  padding: 0.5rem 1rem; min-height: 38px;
  background: var(--brown-dark); color: var(--blush);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; line-height: 1.4;
  transition: background var(--transition);
}
.live-bar[hidden] { display: none; }
.live-bar:hover { background: var(--text-dark); }
.live-bar-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--blush); animation: liveBarPulse 1.4s infinite;
}
@keyframes liveBarPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }
.live-bar-sub {
  font-weight: 500; letter-spacing: 0.03em; text-transform: none;
  color: rgba(242,215,208,0.78);
}
@media (prefers-reduced-motion: reduce) {
  .live-bar-dot { animation: none; }
}
/* On a phone the ribbon drops to the short form so it stays one line, and grows
   to a 44px target since the whole bar is the link. */
@media (max-width: 720px) {
  .live-bar { min-height: 44px; letter-spacing: 0.06em; }
  .live-bar-sub { display: none; }
}

/* === MODAL === */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(44,24,16,0.72); z-index: 999;
  align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white); border-radius: var(--radius-lg);
  max-width: 620px; width: 100%; margin: auto;
  padding: 2.5rem 2.5rem 2rem; position: relative;
  box-shadow: 0 16px 64px rgba(0,0,0,0.35);
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.75rem; line-height: 1;
  cursor: pointer; color: var(--text-muted); padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
}
.modal-close:hover { color: var(--text-dark); background: var(--blush-light); }
.modal-service-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
@media (max-width: 768px) {
  .modal-box { padding: 2rem 1.25rem 1.5rem; }
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* === FOOTER === */
.site-footer { background: var(--brown-dark); color: var(--blush-light); padding: 4rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }

.footer-brand .wordmark { display: block; margin-bottom: 0.75rem; }
.footer-tagline { color: rgba(242,215,208,0.65); font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.7; }
.footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 0.75rem;
  border-radius: 2rem; border: 1px solid rgba(242,215,208,0.28);
  color: var(--blush); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition);
}
.social-link:hover { background: rgba(242,215,208,0.14); border-color: var(--blush); }

.footer-col h4 { color: var(--blush); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; margin-bottom: 1.25rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a { color: rgba(242,215,208,0.65); font-size: 0.875rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--blush); }
.footer-contact-item { color: rgba(242,215,208,0.65); font-size: 0.875rem; margin-bottom: 0.6rem; }
.footer-contact-item a { color: rgba(242,215,208,0.65); transition: color var(--transition); }
.footer-contact-item a:hover { color: var(--blush); }
.footer-bottom {
  border-top: 1px solid rgba(242,215,208,0.14); padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.footer-copyright { color: rgba(242,215,208,0.45); font-size: 0.78rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.footer-legal a { color: rgba(242,215,208,0.6); font-size: 0.78rem; transition: color var(--transition); }
.footer-legal a:hover { color: var(--blush); }
@media (max-width: 768px) {
  /* Tall enough to tap comfortably with a thumb. */
  .footer-legal a { display: inline-block; padding: 0.75rem 0; }
}

/* === POLICY PAGES === */
.policy-content { max-width: 760px; margin: 0 auto; color: var(--text-body); }
.policy-content h2 { font-size: clamp(1.25rem, 3vw, 1.55rem); margin: 2.5rem 0 0.9rem; }
.policy-content p, .policy-content li { font-size: 1rem; line-height: 1.8; }
.policy-content p { margin-bottom: 1rem; }
.policy-content ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1.25rem; }
.policy-content li { margin-bottom: 0.4rem; }
.policy-content a { color: var(--brown-mid); font-weight: 600; text-decoration: underline; }
.policy-updated { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.policy-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.875rem 2rem; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
  transition: all var(--transition); white-space: nowrap; text-decoration: none;
}
.btn--primary { background: var(--brown-dark); color: var(--blush); border-color: var(--brown-dark); }
.btn--primary:hover { background: var(--brown-mid); border-color: var(--brown-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; color: var(--brown-dark); border-color: var(--brown-dark); }
.btn--outline:hover { background: var(--brown-dark); color: var(--blush); transform: translateY(-2px); }
.btn--light { background: var(--blush); color: var(--brown-dark); border-color: var(--blush); }
.btn--light:hover { background: var(--blush-mid); border-color: var(--blush-mid); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline-light { background: transparent; color: var(--blush); border-color: var(--blush); }
.btn--outline-light:hover { background: var(--blush); color: var(--brown-dark); }
.btn--sm { padding: 0.6rem 1.25rem; font-size: 0.75rem; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* === HERO (Home) === */
.hero {
  background-color: var(--brown-dark);
  padding: 7rem 0 5.5rem; position: relative; overflow: hidden;
  min-height: 70vh;
}
.hero::before {
  content: ''; position: absolute; top: -20%; right: -5%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200,168,130,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,215,208,0.2), transparent);
}
.hero-content { position: relative; z-index: 1; max-width: 680px; }
.hero-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tan); margin-bottom: 1.25rem;
}
.hero h1 { color: var(--blush); margin-bottom: 1.5rem; font-style: italic; font-weight: 600; }
.hero p { color: rgba(242,215,208,0.78); font-size: 1.1rem; margin-bottom: 2.5rem; max-width: 520px; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* === PAGE HERO (inner pages) === */
.page-hero {
  background: var(--brown-dark); color: var(--blush);
  padding: 4.5rem 0 3.5rem; text-align: center; position: relative; overflow: hidden;
  min-height: 40vh;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,168,130,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 1; }
.eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--tan); margin-bottom: 0.75rem;
}
.page-hero h1 { color: var(--blush); font-style: italic; margin-bottom: 1rem; }
.page-hero .subtitle { color: rgba(242,215,208,0.72); max-width: 540px; margin: 0 auto; font-size: 1.05rem; }

/* === SECTION HEADERS === */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header .eyebrow { color: var(--tan-dark); }
.section-header h2 { font-style: italic; margin-bottom: 1rem; }
.section-header p { max-width: 540px; margin: 0 auto; color: var(--text-muted); }
.section--dark .section-header .eyebrow { color: var(--tan); }
.section--dark .section-header h2 { color: var(--blush); }
.section--dark .section-header p { color: rgba(242,215,208,0.68); }

/* === SERVICE CARDS === */
.service-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.service-card-icon {
  background: var(--blush-light); padding: 2.25rem;
  display: flex; align-items: center; justify-content: center; font-size: 2.75rem;
}
.service-card-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.service-card-body h3 { font-size: 1.15rem; margin-bottom: 0.75rem; color: var(--brown-dark); }
.service-card-body p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.75; flex: 1; }
.service-card-price {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 600;
  color: var(--brown-dark); border-top: 1px solid var(--border);
  padding-top: 1rem; margin-top: auto;
}

/* === TESTIMONIALS === */
.testimonial-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial-stars { color: var(--tan-dark); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 1rem; }
.testimonial-quote {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.05rem; color: var(--text-body); margin-bottom: 1.5rem;
  line-height: 1.75; padding-top: 1rem; position: relative;
}
.testimonial-quote::before {
  content: '\201C'; font-size: 5rem; color: var(--blush-mid);
  position: absolute; top: -1.5rem; left: -0.5rem;
  font-family: var(--font-heading); line-height: 1; pointer-events: none;
}
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush-mid), var(--tan));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700;
  color: var(--brown-dark); flex-shrink: 0;
}
.testimonial-name { font-weight: 600; color: var(--text-dark); font-size: 0.9rem; }
.testimonial-location { font-size: 0.78rem; color: var(--text-muted); }

/* === LEOPARD DIVIDER === */
.leopard-divider {
  height: 34px;
  background-color: #C8A87A;
  background-image:
    /* Rosette 1 at (18, 17): main */
    radial-gradient(ellipse 13px 9px at 18px 17px, rgba(42,18,5,0.62) 44%, transparent 52%),
    radial-gradient(ellipse 7px 4px at 7px  8px,  rgba(61,26,8,0.45) 54%, transparent 62%),
    radial-gradient(ellipse 7px 4px at 29px 8px,  rgba(61,26,8,0.45) 54%, transparent 62%),
    radial-gradient(ellipse 7px 4px at 7px  26px, rgba(61,26,8,0.45) 54%, transparent 62%),
    radial-gradient(ellipse 7px 4px at 29px 26px, rgba(61,26,8,0.45) 54%, transparent 62%),
    /* Rosette 2 at (55, 10): smaller, high */
    radial-gradient(ellipse 10px 6px at 55px 10px, rgba(42,18,5,0.52) 44%, transparent 52%),
    radial-gradient(ellipse 5px 3px at 46px 4px,  rgba(61,26,8,0.38) 54%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 64px 4px,  rgba(61,26,8,0.38) 54%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 46px 16px, rgba(61,26,8,0.38) 54%, transparent 62%),
    radial-gradient(ellipse 5px 3px at 64px 16px, rgba(61,26,8,0.38) 54%, transparent 62%),
    /* Rosette 3 at (83, 24): low */
    radial-gradient(ellipse 12px 8px at 83px 24px, rgba(42,18,5,0.58) 44%, transparent 52%),
    radial-gradient(ellipse 6px 4px at 73px 16px, rgba(61,26,8,0.42) 54%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 94px 16px, rgba(61,26,8,0.42) 54%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 73px 32px, rgba(61,26,8,0.42) 54%, transparent 62%),
    radial-gradient(ellipse 6px 4px at 94px 32px, rgba(61,26,8,0.42) 54%, transparent 62%);
  background-size: 100px 34px;
}

/* === CTA SECTION === */
.cta-section {
  background: var(--brown-dark); padding: var(--section-v) 0;
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(200,168,130,0.1) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(242,215,208,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.cta-section-content { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.cta-section h2 { color: var(--blush); font-style: italic; margin-bottom: 1rem; }
.cta-section p { color: rgba(242,215,208,0.72); margin-bottom: 2.5rem; font-size: 1.05rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* === FORMS === */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dark); margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 0.875rem 1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.95rem;
  color: var(--text-dark); background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none; -webkit-appearance: none; appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brown-mid);
  box-shadow: 0 0 0 3px rgba(139,90,74,0.1);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B5A4A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }

/* === CONTACT PAGE === */
.contact-grid { display: grid; grid-template-columns: 380px 1fr; gap: 3rem; align-items: start; }
.contact-info-card, .contact-form-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
}
.contact-phone-big {
  font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700;
  color: var(--brown-dark); display: block; margin: 0.5rem 0 1.5rem;
  transition: color var(--transition);
}
.contact-phone-big:hover { color: var(--brown-mid); }
.contact-detail { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.contact-detail:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-detail-icon {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blush-light);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0;
}
.contact-detail-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; }
.contact-detail-value { color: var(--text-dark); font-size: 0.95rem; }
.contact-detail-value a { color: var(--brown-dark); transition: color var(--transition); }
.contact-detail-value a:hover { color: var(--brown-mid); }
.map-container { border-radius: var(--radius-lg); overflow: hidden; margin-top: 1.5rem; box-shadow: var(--shadow-sm); }
.map-container iframe { display: block; width: 100%; height: 280px; border: 0; }

/* === ORDER PAGE === */
.order-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.product-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-btn {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.45rem 1.25rem; border-radius: 2rem;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--text-muted); cursor: pointer; transition: all var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--brown-dark); border-color: var(--brown-dark); color: var(--blush);
}
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.product-card {
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-image {
  aspect-ratio: 3/4; background: var(--blush-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; font-size: 3.5rem;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-badge {
  position: absolute; top: 0.65rem; left: 0.65rem;
  background: var(--brown-dark); color: var(--blush);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 2rem;
}
.product-body { padding: 1rem 1.1rem 1.25rem; }
.product-category { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan-dark); margin-bottom: 0.3rem; }
.product-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.75rem; line-height: 1.3; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--brown-dark); }
.add-to-cart-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brown-dark); color: var(--blush);
  border: none; cursor: pointer; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.add-to-cart-btn:hover { background: var(--brown-mid); transform: scale(1.1); }

/* Cart Sidebar */
.cart-sidebar { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; position: sticky; top: 5.5rem; }
.cart-header { background: var(--brown-dark); color: var(--blush); padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.cart-header h3 { color: var(--blush); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; }
.cart-count-badge {
  background: var(--tan); color: var(--brown-dark);
  font-size: 0.68rem; font-weight: 700;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
}
.cart-items { padding: 0.75rem 1rem; min-height: 180px; max-height: 320px; overflow-y: auto; }
.cart-empty { text-align: center; color: var(--text-muted); font-size: 0.85rem; padding: 2.5rem 1rem; }
.cart-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 0.875rem; font-weight: 600; color: var(--text-dark); }
.cart-item-price { font-size: 0.78rem; color: var(--text-muted); }
.cart-item-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0.2rem; transition: color var(--transition); }
.cart-item-remove:hover { color: #c0392b; }
.cart-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.cart-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1rem; color: var(--text-dark); margin-bottom: 0.875rem; }
.checkout-section { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.checkout-section h4 { font-family: var(--font-heading); font-size: 0.9rem; color: var(--brown-dark); margin-bottom: 1rem; }

/* === BOOKING PAGE === */
.booking-layout { display: grid; grid-template-columns: 1fr 400px; gap: 3rem; align-items: start; }
.booking-info-card, .booking-form-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
}
.booking-steps { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0; }
.booking-step { display: flex; gap: 1rem; align-items: flex-start; }
.booking-step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brown-dark); color: var(--blush);
  font-size: 0.8rem; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.booking-step-text h4 { font-size: 0.95rem; color: var(--text-dark); margin-bottom: 0.2rem; }
.booking-step-text p { font-size: 0.85rem; color: var(--text-muted); }
.booking-note { background: var(--blush-light); border-left: 3px solid var(--tan); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.875rem; color: var(--text-body); margin-top: 1.5rem; }

/* === ABOUT PAGE === */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about-photo-placeholder {
  aspect-ratio: 4/5; background: var(--blush-light);
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  border: 2px dashed var(--blush-mid);
}
.about-photo-icon { font-size: 4rem; opacity: 0.28; }
.about-photo-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.about-content .eyebrow { margin-bottom: 0.75rem; }
.about-content h2 { font-style: italic; margin-bottom: 1.5rem; }
.about-content p { margin-bottom: 1.25rem; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.about-stat { text-align: center; padding: 1.5rem 1rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.about-stat-number { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; color: var(--brown-dark); font-style: italic; display: block; }
.about-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.value-card { text-align: center; padding: 2rem 1.5rem; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.value-icon { font-size: 2.75rem; margin-bottom: 1rem; }
.value-card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; color: var(--brown-dark); }
.value-card p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; }

/* === SERVICES FULL PAGE === */
.services-full-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.service-full-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 2.5rem; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; gap: 1.5rem; align-items: flex-start;
}
.service-full-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-full-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--blush-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.service-full-content h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--brown-dark); }
.service-full-content p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.75; }
.service-full-price { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--brown-mid); }
.service-full-cta { margin-top: 0.75rem; }

/* === MISC === */
.badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.28rem 0.75rem; border-radius: 2rem;
  background: var(--blush); color: var(--brown-dark);
}
.badge--tan { background: var(--tan); color: var(--brown-dark); }
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.hidden { display: none !important; }

/* Notification toast */
.cart-notification {
  position: fixed; bottom: 2rem; right: 2rem;
  background: var(--brown-dark); color: var(--blush);
  padding: 0.75rem 1.5rem; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 9999;
  animation: fadeInUp 0.3s ease; pointer-events: none;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .services-full-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === HEADER AT NARROW WIDTHS ===
   The header runs out of room well before the rest of the layout does: seven
   links, a phone number and a button on one line need about 1070px. These
   breakpoints are the header's own, so the page layout still changes at 768. */
@media (max-width: 1100px) {
  .header-phone { display: none; }
}

@media (max-width: 980px) {
  .hamburger { display: flex; }
  .site-nav { display: none; }

  /* The wordmark, the Book Now button and the menu button now share the row,
     so it tightens rather than pushing the page sideways. */
  .header-inner { gap: 0.5rem; }
  .wordmark { font-size: 1.35rem; }
  /* Narrower, but still a 44px target for a thumb. */
  .header-cta .btn--sm { padding: 0.55rem 0.85rem; font-size: 0.68rem; min-height: 44px; }

  /* The menu drops out of the bar rather than covering the screen: it keeps the
     logo and the close button readable, and it does not care how tall the bar
     is, which changes from page to page. The panel is the same cream as the
     bar, because the links are brown and were invisible on a brown panel. */
  .site-nav.open {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    background-color: #F5EDE0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Clears the logo, which hangs below the bar on the home page. */
    padding: 1.75rem 0 0.75rem;
    border-top: 1px solid var(--border);
    box-shadow: 0 14px 28px rgba(92,58,46,0.18);
    max-height: 70vh; overflow-y: auto;
  }
  .site-nav a {
    font-size: 0.95rem; padding: 0.95rem 1.5rem; border-radius: 0;
    border-bottom: 1px solid rgba(92,58,46,0.1);
  }
  .site-nav a:last-child { border-bottom: 0; }
}

/* The smallest phones still sold, where the row is down to the last few pixels. */
@media (max-width: 360px) {
  .wordmark { font-size: 1.15rem; }
  .header-logo { height: 40px; }
}

@media (max-width: 768px) {
  :root { --section-v: 3.5rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .about-story { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .order-layout { grid-template-columns: 1fr; }
  .booking-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero { padding: 4.5rem 0 3.5rem; min-height: 50vh; }
  .page-hero { min-height: 25vh; }
  .hero-cta, .cta-buttons { flex-direction: column; align-items: flex-start; }
  .cta-section .cta-buttons { align-items: center; }
  .service-full-card { flex-direction: column; gap: 1rem; }
}

@media (max-width: 540px) {
  .product-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}