/* ============================================================
   Studio Marcela — BRAND LAYER
   Aligns the site with the ad-creative design system in
   kreativa/brand/tokens.css + BRAND.md:
     Cormorant Garamond (display, gold italic <em>) + Montserrat (kickers/body),
     one gold #C9A84C, rich black #0a0a0a, no gradients, radius 0.
   Tokens (--gold, --serif, --sans, …) live in dark-theme.css :root.
   Loaded LAST of the shared stylesheets in base.html and deliberately uses
   !important — per-page <style> blocks ({% block extra_css %}) come after
   the shared CSS, so plain rules here would lose to them.
   Fonts: static/css/fonts.css (self-hosted woff2, see static/fonts/).
   ============================================================ */

/* ---------- base typography ---------- */
body {
  font-family: var(--sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-light);
  background-color: var(--bg-primary) !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; letter-spacing: 0; color: #fff; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold); }
a { color: var(--gold); }
a:hover { color: #fff; }

/* ---------- nav ---------- */
.navbar-inverse {
  background: rgba(10, 10, 10, 0.96) !important;
  border-bottom: 1px solid var(--gold-faint) !important;
}
.logo-text {
  background: none !important;
  -webkit-text-fill-color: var(--gold) !important;
  color: var(--gold) !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 23px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase;
}
.navbar-nav > li > a {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78) !important;
}
.navbar-nav > li > a:hover, .navbar-nav > li.active > a { color: var(--gold) !important; }
.nav-new-badge, .new-badge {
  background: var(--gold) !important;
  color: #0a0a0a !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 8px !important;
  letter-spacing: 0.14em !important;
  border-radius: 0 !important;
  padding: 3px 6px !important;
  box-shadow: none !important;
}

/* ---------- title banner (.locations-hero-section on o-nama, cjenik, faq, …) ---------- */
.locations-hero-section { min-height: 0; align-items: center; }
.hero-background-overlay {
  /* !important: usluge / group-services / careers redefine this inline with rgba(0,0,0,.3) → white title on a bright photo */
  background: linear-gradient(0deg, #0a0a0a 0%, rgba(10, 10, 10, 0.86) 45%, rgba(10, 10, 10, 0.72) 100%) !important;
}
.hero-content-wrapper { padding: 64px 20px 56px; align-items: center; }
.hero-text-background {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  max-width: 760px;
  margin: 0 auto !important;
}
.hero-kicker {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 24px;
}
.locations-main-title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 64px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  text-shadow: none !important;
  margin: 0 0 14px !important;
}
.locations-main-title em { -webkit-text-fill-color: var(--gold) !important; color: var(--gold) !important; font-style: italic; }
.locations-subtitle {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  letter-spacing: 0.01em !important;
  line-height: 1.6 !important;
  text-align: center !important;
  text-shadow: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 560px;
  margin: 0 auto !important;
}

/* ---------- homepage hero (.hero-home) ---------- */
.hero-home { min-height: 660px; }
.hero-home .hero-background-overlay {
  background:
    linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.72) 42%, rgba(10, 10, 10, 0.25) 100%),
    linear-gradient(0deg, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 0) 28%) !important;
}
.hero-home .hero-content-wrapper { padding: 80px 20px 72px; }
.hero-home .col-md-12.text-center { text-align: left !important; }
.hero-home .hero-text-background { max-width: 640px; margin: 0 !important; }
.hero-home .locations-main-title {
  font-size: 88px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.005em !important;
  text-align: left !important;
  margin: 0 0 20px !important;
}
.hero-home .locations-subtitle { text-align: left !important; max-width: 460px; margin: 0 0 38px !important; }
.hero-booking-cta {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important; /* welcome.html inline style pads it 18px 20px — misaligns the box vs the title */
  max-width: 640px;
}
.hero-promo-glass {
  background: rgba(10, 10, 10, 0.35) !important;
  border: 1px solid var(--gold-soft) !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 22px 28px 18px !important;
  display: inline-block !important;
  min-width: 360px;
  margin: 0 0 18px !important;
}
.hero-promo-glass-title {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin: 0 0 12px !important;
  text-align: left !important;
  text-shadow: none !important;
}
.hero-promo-glass-rows { display: block !important; }
.hero-promo-glass-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 48px;
  padding: 8px 0 !important;
  border-top: 1px solid var(--gold-faint);
}
.hero-promo-glass-row:first-child { border-top: 0; }
.hero-promo-glass-label {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: none !important;
}
.hero-promo-glass-price {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--gold) !important;
  text-shadow: none !important;
}
.hero-promo-includes {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  text-align: left !important;
  text-shadow: none !important;
  max-width: 460px;
  margin: 0 0 30px !important;
}
.hero-booking-cta-btn-row {
  display: flex !important;
  gap: 14px;
  justify-content: flex-start !important;
  flex-wrap: wrap;
}

/* ---------- buttons ---------- */
.btn, .btn-gold, .btn-outline-gold, .btn-whatsapp {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 15px 30px !important;
  box-shadow: none !important;
  transition: background .2s, color .2s, border-color .2s !important;
  text-shadow: none !important;
}
.btn-gold, .btn-primary {
  background: var(--gold) !important;
  background-image: none !important;
  color: #0a0a0a !important;
  border: 1px solid var(--gold) !important;
}
.btn-gold:hover, .btn-gold:focus, .btn-primary:hover { background: #fff !important; border-color: #fff !important; color: #0a0a0a !important; transform: none !important; }
.btn-outline-gold {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold-soft) !important;
}
.btn-outline-gold:hover { border-color: var(--gold) !important; color: #fff !important; }

/* ---------- locations (homepage) ---------- */
.hero-home + .locations-section { padding-top: 64px !important; }
.locations-section { background: var(--bg-primary) !important; }
.locations-city-name-desktop, .locations-city-name {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 46px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  text-align: left !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.locations-city-name-desktop::after, .locations-city-name::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin-top: 14px;
}
.location-card-row {
  background: #111 !important;
  border: 1px solid var(--gold-faint) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.location-card-row:hover { border-color: var(--gold-soft) !important; transform: none !important; }
.location-thumbnail img { border-radius: 0 !important; filter: saturate(.85) contrast(1.05); }
.location-name, .location-name a {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.location-address {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
}
.location-expanded {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
.status-text {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6) !important;
}
.status-indicator { width: 6px !important; height: 6px !important; box-shadow: none !important; }
.location-actions .btn, .accordion-actions .btn, .btn-whatsapp {
  padding: 11px 12px !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
}
.btn-phone {
  background: transparent !important;
  border: 1px solid var(--gold-faint) !important;
  color: #fff !important;
}
.btn-phone:hover { border-color: var(--gold) !important; }
.btn-whatsapp {
  background: transparent !important;
  border: 1px solid var(--gold-faint) !important;
  color: #fff !important;
}
.btn-whatsapp:hover { border-color: #25D366 !important; }
.btn-whatsapp i, .btn-whatsapp .fa { color: #25D366 !important; }
.btn-link-directions {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 8px 0 !important;
}
.btn-link-directions:hover { color: var(--gold) !important; }

/* mobile accordion */
.accordion-item { background: #111 !important; border: 1px solid var(--gold-faint) !important; border-radius: 0 !important; box-shadow: none !important; }
.accordion-header-content { display: flex !important; align-items: center !important; gap: 12px; }
.accordion-location-name { flex: 1 1 auto; min-width: 0; padding-right: 10px; }
.accordion-location-name strong { display: block; font-weight: 500 !important; }
.accordion-status { flex: 0 0 auto; margin-left: auto; position: static !important; }
.accordion-location-name {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.accordion-location-address {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
}

/* ---------- section headings (shared pattern) ---------- */
.services-section h2, .loyalty-club-section h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.services-section h2 em, .loyalty-club-section h2 em { -webkit-text-fill-color: var(--gold) !important; }
.services-subtitle, .loyalty-subtitle, .loyalty-club-section h2 small {
  display: block;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-top: 16px;
  line-height: 1.6 !important;
}

/* ---------- services: ruled "menu" grid, no circles (welcome.html .svc-grid) ---------- */
.services-section { background: var(--bg-primary) !important; padding: 80px 0 !important; border-top: 1px solid var(--gold-faint); }
.services-section h2 { margin-bottom: 40px !important; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;                         /* hairlines between cells = the grid background */
  background: var(--gold-faint);
  border: 1px solid var(--gold-faint);
}
.svc-tile {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 28px 12px 24px;
  background: var(--bg-primary);
  color: inherit;
  text-decoration: none !important;
  transition: background .2s;
}
.svc-tile:hover, .svc-tile:focus-visible { background: rgba(201,168,76,.07); color: inherit; outline: 0; }
.svc-tile:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); }
.svc-tile i { font-size: 22px; line-height: 1; color: var(--gold); transition: color .2s; }
.svc-tile:hover i { color: var(--gold-light, #dfc470); }
.services-section h3 {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  line-height: 1.8 !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85) !important;
}
.svc-tile h3 { margin: 0 !important; text-align: center; }
.btn-view-menu { margin-top: 36px !important; }

/* ---------- loyalty ---------- */
.loyalty-club-section { background: var(--bg-primary) !important; padding: 80px 0 !important; margin: 0 !important; /* dark-theme: margin 60px 0 */ border-top: 1px solid var(--gold-faint); }
.services-section { margin: 0 !important; }
.loyalty-description {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.loyalty-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-loyalty-more-info { background: transparent !important; color: var(--gold) !important; border: 1px solid var(--gold-soft) !important; }

/* ---------- footer ---------- */
.footer { background: var(--bg-primary) !important; border-top: 1px solid var(--gold-faint) !important; margin-top: 0 !important; /* sections carry their own bottom padding; the 60px margin doubled it */ }
.footer h3 {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  letter-spacing: 0.3em !important;
  color: var(--gold) !important;
  background: none !important;
  -webkit-text-fill-color: var(--gold) !important;
  margin: 0;
}
.footer ul li a, .footer a {
  font-family: var(--sans) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7) !important;
}
.footer a:hover { color: var(--gold) !important; }
.footer p { font-family: var(--sans); font-weight: 300; font-size: 12px; color: rgba(255,255,255,.5); }
.social-icons a { border: 1px solid var(--gold-soft) !important; color: var(--gold) !important; }

/* ============================================================
   PHASE 2 — other pages
   ============================================================ */

/* page titles (each page has its own h1 class) */
.services-main-title, .group-services-main-title, .privacy-main-title, .careers-main-title,
.hair-specialist-title, .makeup-hero-title, .contact-main-title, .gallery-simple-title,
.blog-main-title, .blog-topic-main-title, .loyalty-info-page h1 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}
.hair-specialist-title small, .hair-specialist-subtitle, .makeup-hero-title small, .makeup-hero-subtitle {
  display: block;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-top: 12px;
  -webkit-text-fill-color: var(--gold) !important;
}
.contact-subtitle, .privacy-subtitle-hero, .careers-subtitle, .blog-subtitle, .careers-hero-tagline,
.group-services-subtitle, .services-hero-subtitle, .services-subtitle-hero {
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
  color: rgba(255, 255, 255, 0.82) !important;
  text-shadow: none !important;
}

/* section titles */
.section-title, .section-title-left, .section-title-makeup, .cta-title, .makeup-cta-title,
.service-category-title, .privacy-section-title, .form-section-title, .blog-topic-content h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: 36px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}
.section-title::after, .section-title-makeup::after { background: var(--gold) !important; height: 1px !important; width: 48px !important; }

/* one radius: 0 (brand) — boxes, cards, images, pills */
.contact-card, .contact-form-wrapper, .contact-info-wrapper, .edu-box, .blog-topic-card, .blog-topic-content,
.blog-topic-content img, .blog-topic-content .blog-image, .category-image, .group-services-image,
.hair-specialist-image, .hotel-image-wrapper, .kx-notfound, .kx-radio, .kx-summary, .ladder-card,
.loyalty-benefit-card, .loyalty-step-card, .makeup-accordion-item, .makeup-hero-image, .ok-card,
.ok-figure img, .pf-card, .pf-lcard, .position-card, .pricelist-accordion .accordion-item,
.pricelist-hair-length-image, .privacy-content-wrapper, .rv-band, .rv-card, .section-image-wrapper,
.service-card, .sf-combo, .sf-hero-figure img, .sf-tile, .t-figure img, .t-flagship, .t-levels li,
.t-mini-card, .t-way, .treatments-table tr, .anti-stress-item, .application-form-wrapper,
.gallery-item, .gallery-item-inner, .location-preview, .ok-badge, .ladder-badge, .pf-tag,
.btn-gold-compact, .file-input-label-compact, .author-portrait-img, .booking-toggle-item,
.booking-location-tile, .form-control, .pricelist-accordion .accordion-header {
  border-radius: 0 !important;
}

/* page-specific copies of the hero banner (usluge, group-services, privacy, careers):
   centre the title vertically instead of pinning it to the top, drop the boxed title */
.services-hero-section, .group-services-hero-section, .privacy-hero-section, .careers-hero-section {
  align-items: center !important;
  min-height: 380px !important;
  margin-bottom: 0 !important;
}
.hero-text-background { border: 0 !important; }

/* blog post header: inline style paints a gold-tinted band with 60/40 padding + 40 margin + 40 section
   padding (looked like a brown block and an 80px hole on phones) */
.blog-topic-hero-section {
  background: var(--bg-primary) !important;
  padding: 48px 0 36px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--gold-faint) !important;
}
.blog-topic-section { padding-top: 40px !important; }
.blog-back-link {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}

/* closing CTA block — usluge and tretmani share the markup, tretmani had no styles for it
   (buttons sat directly on the footer line) */
.services-cta-section { padding: 64px 0 !important; margin: 0 !important; border-top: 1px solid var(--gold-faint); }
.cta-description {
  max-width: 560px; margin: 0 auto 28px;
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.8);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }

/* sticky-footer pages set their own body colour — keep them on the brand black */
body:has(.booking-locations-section), body:has(.loyalty-info-page) { background-color: var(--bg-primary) !important; }
.booking-locations-section, .loyalty-info-page { background-color: var(--bg-primary) !important; }

/* form fields */
.form-control {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-family: var(--sans) !important;
  box-shadow: none !important;
}
.form-control:focus { border-color: var(--gold-soft) !important; box-shadow: none !important; }

/* ---------- mobile ---------- */
@media (max-width: 991px) {
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* header: logo small enough to clear the hamburger (23px/.3em was 291px wide on a 360px
     phone and ran under the button); hamburger flush right */
  .logo-text { font-size: 19px !important; letter-spacing: 0.24em !important; white-space: nowrap; }
  .navbar-brand { padding-left: 12px !important; }
  button.navbar-toggle { right: 6px; margin-right: 0; border-radius: 0; }
  /* collapsed menu: readable entries */
  #navbar-collapse-1 { background: rgba(10, 10, 10, 0.97) !important; border-bottom: 1px solid var(--gold-faint); }
  .navbar-nav > li > a { font-size: 14px !important; letter-spacing: 0.2em !important; padding: 14px 20px !important; }
  .navbar-nav > li.active > a { border-bottom: 0 !important; }

  /* page titles / section titles */
  .services-main-title, .group-services-main-title, .privacy-main-title, .careers-main-title,
  .hair-specialist-title, .makeup-hero-title, .contact-main-title, .gallery-simple-title,
  .blog-main-title, .blog-topic-main-title, .loyalty-info-page h1 { font-size: 40px !important; }
  .section-title, .section-title-left, .section-title-makeup, .cta-title, .makeup-cta-title,
  .service-category-title, .privacy-section-title, .blog-topic-content h2 { font-size: 30px !important; }

  /* hero: ONE padding, not three — dark-theme adds `padding: 30px 20px` on the section at ≤768
     and the wrapper had its own 20px; the Bootstrap container gutter (15px) is enough */
  .locations-hero-section { padding: 0 !important; }
  .hero-content-wrapper { padding: 40px 0 40px; }
  .hero-text-background { width: 100% !important; max-width: none !important; }
  .locations-main-title { font-size: 44px !important; }
  .locations-subtitle { font-size: 15px !important; }
  .hero-home { min-height: 0; }
  /* portrait render of the same salon for phones (kreativa/campaigns/2026-08_site-hero); inline style carries the 16:9 one */
  .hero-home { background-image: url('/static/images/hero-galleria-mobile.webp') !important; }
  .hero-home .hero-content-wrapper { padding: 40px 0 44px; }
  .hero-home .locations-main-title { font-size: 56px !important; margin-bottom: 16px !important; }
  .hero-home .locations-subtitle { margin: 0 0 30px !important; }
  .hero-kicker { font-size: 10px; letter-spacing: 0.22em; white-space: nowrap; margin-bottom: 18px; }
  .hero-booking-cta, .hero-home .hero-text-background { width: 100%; max-width: none; }
  .hero-promo-glass { min-width: 0 !important; width: 100% !important; max-width: none !important; display: block !important; padding: 18px 20px 14px !important; }
  .hero-promo-glass-row { gap: 20px; }
  .hero-promo-glass-label { font-size: 12px !important; letter-spacing: 0.18em !important; }
  .hero-promo-glass-price { font-size: 32px !important; }
  .hero-promo-includes { max-width: none; margin: 0 0 24px !important; }
  .hero-booking-cta-btn-row { width: 100%; gap: 10px; }
  .hero-booking-cta-btn-row .btn { width: 100%; }
  .hero-home + .locations-section { padding-top: 32px !important; }
  .services-hero-section, .group-services-hero-section, .privacy-hero-section, .careers-hero-section { min-height: 260px !important; }
  .services-section h2, .loyalty-club-section h2 { font-size: 44px !important; }
  .services-section, .loyalty-club-section { padding: 56px 0 !important; }
  /* services: 3×2 ruled grid, full-bleed, tight paddings (was 3 rows of 88px circles ≈ 1,000px tall) */
  .services-section { padding: 40px 0 44px !important; }
  .services-section h2 { margin-bottom: 20px !important; }
  .services-section h2::after { margin: 14px auto 0 !important; }
  .svc-grid { margin: 0 -15px; border-left: 0; border-right: 0; }
  .svc-tile { padding: 18px 6px 16px; gap: 10px; }
  .svc-tile i { font-size: 20px; }
  .services-section h3 { font-size: 9.5px !important; letter-spacing: 0.08em !important; line-height: 1.55 !important; }
  .btn-view-menu { margin-top: 26px !important; }
  .locations-city-name { font-size: 38px !important; }

  /* loyalty: both buttons on one row; no stray column margin above the footer */
  .loyalty-club-section .col-md-6:last-child { margin-bottom: 0 !important; }
  .loyalty-cta-buttons { flex-wrap: nowrap !important; gap: 10px !important; }
  .loyalty-cta-buttons .btn {
    flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
    padding: 14px 4px !important; font-size: 11px !important; letter-spacing: 0.1em !important;
  }

  /* footer: brand name on one line */
  .footer h3 { font-size: 18px !important; letter-spacing: 0.26em !important; white-space: nowrap; }
  .footer .navbar-brand { padding: 0 !important; height: auto !important; }
}
/* very narrow phones (≤340px): keep the hero kicker on one line */
@media (max-width: 340px) {
  .services-section h3 { font-size: 9px !important; }
  .hero-kicker { font-size: 9px; letter-spacing: 0.16em; }
}