while image copy always sits on a deterministic contrast layer. */

:root {
  --tenant-primary: #d5ac5b;
  --tenant-secondary: #8067ec;
  --tenant-bg: #0b100e;
  --tenant-surface: #161c19;
  --tenant-text: #fff;
  --tenant-muted: #aeb8b2;
  --tenant-surface-text: #fff;
  --tenant-surface-muted: #a8b1ac;
  --tenant-accent: var(--ember);
  --tenant-secondary-ink: #11130f;
  --tenant-accent-ink: #11130f;
  --image-ink: #fff;
  --image-muted: rgba(255,255,255,.86);
}

/* The previous showcase stylesheet had fixed demo colours for these layouts.
   Every v52 layout instead consumes the venue-owned palette. */
:root[data-design-template="editorial"],
:root[data-design-template="gallery"],
:root[data-design-template="atelier"] {
  --brand: var(--tenant-primary) !important;
  --ember: var(--tenant-secondary) !important;
}

:root[data-design-template] {
  --bg: var(--tenant-bg) !important;
  --surface: var(--tenant-surface) !important;
  --surface-2: color-mix(in srgb, var(--tenant-surface) 88%, var(--tenant-text)) !important;
  --panel: var(--tenant-surface) !important;
  --ink: var(--tenant-text) !important;
  --text: var(--tenant-text) !important;
  --muted: var(--tenant-muted) !important;
  --line: color-mix(in srgb, var(--tenant-text) 17%, transparent) !important;
  --border: var(--line) !important;
  color-scheme: normal;
}

:root[data-design-template] body { background: color-mix(in srgb, var(--tenant-bg) 82%, #000); }
:root[data-design-template] .app { color: var(--tenant-text); background-color: var(--tenant-bg); }
:root[data-design-template] :where(.card,.menu-item,.news-card,.menu-control-deck,.table-access,.profile-empty-card,.sheet) {
  color: var(--tenant-surface-text);
  background-color: var(--tenant-surface);
}
:root[data-design-template] :where(.card,.menu-item,.news-card,.profile-empty-card) :where(p,small,time) { color: var(--tenant-surface-muted); }
:root[data-design-template] :where(.button,.hero-booking-cta,.menu-category-rail .chip.on,.service-quick.is-primary) {
  color: var(--brand-ink);
  background-color: var(--brand);
}
:root[data-design-template] :where(.button,.hero-booking-cta,.menu-category-rail .chip.on,.service-quick.is-primary) :where(svg,strong,span,b,i) { color: inherit; }

/* Anything that can receive an arbitrary photograph gets a local contrast
   guarantee. This is intentionally independent of the venue palette. */
:root[data-design-template] .top-home .hero-backdrop { z-index: 0; }
:root[data-design-template] .top-home::after { pointer-events: none; z-index: 1; }
:root[data-design-template] .top-home .hero-copy { z-index: 2; }
/* Above hero-copy (not just tied with it): the header row hosts the language
   switcher's dropdown, which must stay clickable instead of being hit-tested
   behind the hero caption whenever their boxes overlap on narrow screens. */
:root[data-design-template] .top-home .top-row { z-index: 3; }
:root[data-design-template] .home-feature-story::after,
:root[data-design-template] .guest-hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,5,4,.2) 18%, rgba(3,5,4,.92) 100%);
}
:root[data-design-template] .home-feature-story > :not(img),
:root[data-design-template] .guest-hero > * { position: relative; z-index: 2; }
:root[data-design-template] .home-feature-story :where(strong,small,p,b,span),
:root[data-design-template] .guest-hero :where(h2,small,p,span) { color: var(--image-ink) !important; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
:root[data-design-template] .home-feature-story :where(p,small,span),
:root[data-design-template] .guest-hero p { color: var(--image-muted) !important; }

:root[data-design-template="signature"] .top-home::after,
:root[data-design-template="nocturne"] .top-home::after {
  background:
    linear-gradient(90deg, rgba(2,5,4,.78), rgba(2,5,4,.18) 74%),
    linear-gradient(180deg, rgba(2,5,4,.16) 30%, rgba(2,5,4,.86));
}
:root[data-design-template="signature"] .top-home :where(.venue-name,.venue-sub,.hero-eyebrow,.hero-copy h2,.hero-copy>p),
:root[data-design-template="nocturne"] .top-home :where(.venue-name,.venue-sub,.hero-eyebrow,.hero-copy h2,.hero-copy>p) { color: var(--image-ink) !important; }

:root[data-design-template] .loyalty-preview {
  color: var(--brand-ink) !important;
  background:
    linear-gradient(115deg, transparent 58%, color-mix(in srgb, var(--ember) 28%, transparent)),
    var(--brand) !important;
}
:root[data-design-template] .loyalty-preview :where(strong,small,span,b,.loyalty-arrow) { color: inherit !important; opacity: 1; }
:root[data-design-template] .loyalty-preview :where(small,span) { opacity: .86; }

/* ------------------------------------------------------------------
   SAHRA — collectible editorial journal.
   Image and copy are separate planes; no hero text ever depends on a photo. */
:root[data-design-template="editorial"] .app {
  background-color: var(--tenant-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--tenant-bg) 82%, transparent), color-mix(in srgb, var(--tenant-bg) 82%, transparent)),
    url("assets/theme-sahra-material-v52.webp");
  background-blend-mode: normal, soft-light;
}
:root[data-design-template="editorial"] .top-home,
:root[data-design-template="editorial"] .top-home:has(.hero-booking-cta) {
  height: 525px;
  margin: 0 12px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 42px 4px;
  color: var(--tenant-surface-text);
  background: var(--tenant-surface);
  box-shadow: 0 18px 42px color-mix(in srgb, #000 18%, transparent);
}
:root[data-design-template="editorial"] .top-home .hero-backdrop {
  width: 100%;
  height: 54%;
  object-position: center;
  filter: saturate(.82) contrast(1.04);
}
:root[data-design-template="editorial"] .top-home::after {
  inset: 0 0 auto;
  height: 54%;
  background: linear-gradient(180deg, rgba(2,4,3,.72), rgba(2,4,3,.06) 44%, rgba(2,4,3,.52));
}
:root[data-design-template="editorial"] .top-home .top-row { padding: 18px 18px 0; }
:root[data-design-template="editorial"] .top-home .top-row :where(.venue-name,.venue-sub) { color: #fff !important; }
:root[data-design-template="editorial"] .top-home .top-row .venue-sub { color: rgba(255,255,255,.82) !important; }
:root[data-design-template="editorial"] .top-home :where(.venue-mark,.profile-button,.notification-button) {
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 1px;
  color: #fff;
  background: rgba(4,7,5,.42);
  backdrop-filter: blur(9px);
}
:root[data-design-template="editorial"] .hero-copy {
  right: 0 !important;
  bottom: 0 !important;
  left: 0;
  min-height: 46%;
  padding: 25px 24px 21px;
  color: var(--tenant-surface-text);
  background: var(--tenant-surface);
}
:root[data-design-template="editorial"] .hero-copy::before {
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 13px;
  background: var(--tenant-accent);
  content: "";
}
:root[data-design-template="editorial"] .hero-copy .hero-eyebrow { color: var(--tenant-accent) !important; font: 800 9px/1.2 var(--font-body); letter-spacing: .2em; }
:root[data-design-template="editorial"] .hero-copy h2 { max-width: 355px; color: var(--tenant-surface-text) !important; font: 400 37px/.94 Georgia, serif; text-shadow: none; }
:root[data-design-template="editorial"] .hero-copy > p:last-of-type { max-width: 330px; color: var(--tenant-surface-muted) !important; text-shadow: none; }
:root[data-design-template="editorial"] .hero-booking-cta {
  width: min(100%, 268px);
  min-height: 48px;
  border: 0;
  border-radius: 0 0 18px 0;
  box-shadow: none;
}
:root[data-design-template="editorial"] .screen { padding-inline: 18px; }
:root[data-design-template="editorial"] .home-screen > section { margin-top: 30px; }
:root[data-design-template="editorial"] :where(.section-headline,.service-hub-head) { align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
:root[data-design-template="editorial"] :where(.section-headline h2,.service-hub-head h2,.content-intro h2,.mix-of-day h3) { color: var(--tenant-text); font-family: Georgia, serif; font-weight: 400; }
:root[data-design-template="editorial"] .home-service-hub { padding-block: 14px; border-block: 1px solid var(--line); }
:root[data-design-template="editorial"] .service-quick-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
:root[data-design-template="editorial"] .service-quick {
  min-width: 0;
  min-height: 64px;
  grid-template-columns: 38px minmax(0,1fr);
  display: grid;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 0 0 14px 0;
  color: var(--tenant-surface-text);
  background: var(--tenant-surface);
  box-shadow: none;
}
:root[data-design-template="editorial"] .service-quick::before,
:root[data-design-template="editorial"] .service-quick::after { display: none; }
:root[data-design-template="editorial"] .service-quick span { width: 36px; height: 36px; border-radius: 0; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
:root[data-design-template="editorial"] .service-quick strong { color: inherit; font: 700 9px/1.15 var(--font-body); text-align: left; }
:root[data-design-template="editorial"] .mix-of-day { display: grid; grid-template-columns: 42% minmax(0,1fr); border: 1px solid var(--line); border-radius: 0 0 28px 0; background: var(--tenant-surface); }
:root[data-design-template="editorial"] .mix-of-day img { order: -1; min-height: 224px; border-radius: 0; filter: saturate(.82); }
:root[data-design-template="editorial"] .mix-of-day > div { padding: 22px 18px; }
:root[data-design-template="editorial"] .mix-of-day h3 { color: var(--tenant-surface-text); }
:root[data-design-template="editorial"] .mix-of-day p { color: var(--tenant-surface-muted); }
:root[data-design-template="editorial"] :where(.news-card,.menu-item) { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
:root[data-design-template="editorial"] .tabs {
  right: 9px;
  bottom: 8px;
  left: 9px;
  border: 1px solid var(--line);
  border-radius: 0 0 24px 0;
  background: color-mix(in srgb, var(--tenant-surface) 96%, transparent);
  box-shadow: 0 14px 32px rgba(0,0,0,.15);
  backdrop-filter: blur(18px);
}
:root[data-design-template="editorial"] .tab { color: var(--tenant-surface-muted); }
:root[data-design-template="editorial"] .tab.on { color: var(--brand); }
:root[data-design-template="editorial"] .tab-primary .tab-icon-shell { border-radius: 0 0 12px 0; }

/* ------------------------------------------------------------------
   LINEN — tactile gallery with floating captions and organic shapes. */
:root[data-design-template="gallery"] .app {
  background-color: var(--tenant-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--tenant-bg) 87%, transparent), color-mix(in srgb, var(--tenant-bg) 87%, transparent)),
    url("assets/theme-linen-material-v52.webp");
  background-blend-mode: normal, soft-light;
}
:root[data-design-template="gallery"] .top-home,
:root[data-design-template="gallery"] .top-home:has(.hero-booking-cta) {
  height: 440px;
  margin: 14px 14px 0;
  border: 0;
  border-radius: 44px 44px 12px 44px;
  overflow: hidden;
  background: var(--tenant-surface);
  box-shadow: 0 22px 44px rgba(0,0,0,.18);
}
:root[data-design-template="gallery"] .top-home::after { background: linear-gradient(180deg, rgba(3,5,4,.68), transparent 34%, rgba(3,5,4,.22)); }
:root[data-design-template="gallery"] .top-home .top-row { padding: 16px; }
:root[data-design-template="gallery"] .top-home .top-row :where(.venue-name,.venue-sub) { color: #fff !important; }
:root[data-design-template="gallery"] .top-home .top-row .venue-sub { color: rgba(255,255,255,.82) !important; }
:root[data-design-template="gallery"] .top-home :where(.venue-mark,.profile-button,.notification-button) { border-color: rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: rgba(6,10,8,.38); backdrop-filter: blur(9px); }
:root[data-design-template="gallery"] .hero-copy {
  right: 18px !important;
  bottom: 18px !important;
  left: 18px;
  padding: 17px 18px 16px;
  border: 1px solid color-mix(in srgb, var(--tenant-surface-text) 14%, transparent);
  border-radius: 28px 28px 8px 28px;
  color: var(--tenant-surface-text);
  background: color-mix(in srgb, var(--tenant-surface) 94%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(18px) saturate(1.15);
}
:root[data-design-template="gallery"] .hero-copy .hero-eyebrow { color: var(--tenant-accent) !important; }
:root[data-design-template="gallery"] .hero-copy h2 { max-width: 315px; margin-block: 6px; color: var(--tenant-surface-text) !important; font: 650 31px/.98 var(--font-display); text-shadow: none; }
:root[data-design-template="gallery"] .hero-copy > p:last-of-type { display: none; }
:root[data-design-template="gallery"] .hero-booking-cta { min-height: 44px; border: 0; border-radius: 999px; box-shadow: none; }
:root[data-design-template="gallery"] .screen { padding-inline: 15px; }
:root[data-design-template="gallery"] .home-screen > section { margin-top: 25px; }
:root[data-design-template="gallery"] .home-service-hub { padding: 0; }
:root[data-design-template="gallery"] .service-quick-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; }
:root[data-design-template="gallery"] .service-quick {
  min-width: 0;
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 34px 34px 9px 34px;
  color: var(--tenant-surface-text);
  background: color-mix(in srgb, var(--tenant-surface) 94%, transparent);
  box-shadow: 0 9px 20px rgba(0,0,0,.08);
}
:root[data-design-template="gallery"] .service-quick::before { display: none; }
:root[data-design-template="gallery"] .service-quick::after { right: 17px; bottom: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--tenant-accent); }
:root[data-design-template="gallery"] .service-quick span { border-radius: 50%; color: var(--brand); background: color-mix(in srgb, var(--brand) 11%, var(--tenant-surface)); }
:root[data-design-template="gallery"] .service-quick strong { color: inherit; }
:root[data-design-template="gallery"] .popular-strip { grid-auto-columns: 142px; gap: 13px; }
:root[data-design-template="gallery"] .popular-strip img,
:root[data-design-template="gallery"] .popular-strip article:first-child img { width: 142px; aspect-ratio: .86; border-radius: 72px 72px 16px 16px; }
:root[data-design-template="gallery"] .mix-of-day { display: grid; grid-template-columns: 1fr; border: 0; border-radius: 34px 34px 10px 34px; background: var(--tenant-surface); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
:root[data-design-template="gallery"] .mix-of-day img { order: -1; height: 225px; min-height: 225px; border-radius: 34px 34px 0 34px; }
:root[data-design-template="gallery"] .mix-of-day > div { padding: 19px 21px 22px; }
:root[data-design-template="gallery"] .mix-of-day h3 { color: var(--tenant-surface-text); }
:root[data-design-template="gallery"] .news-card { grid-template-columns: 102px minmax(0,1fr); border: 0; border-radius: 28px 28px 8px 28px; background: var(--tenant-surface); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
:root[data-design-template="gallery"] .news-card img { border-radius: 24px 24px 7px 24px; }
:root[data-design-template="gallery"] .tabs {
  right: 10px;
  bottom: 9px;
  left: 10px;
  border: 1px solid var(--line);
  border-radius: 38px 38px 13px 38px;
  background: color-mix(in srgb, var(--tenant-surface) 94%, transparent);
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  backdrop-filter: blur(20px);
}
:root[data-design-template="gallery"] .tab { color: var(--tenant-surface-muted); }
:root[data-design-template="gallery"] .tab.on { color: var(--brand); }
:root[data-design-template="gallery"] .tab-primary .tab-icon-shell { border-radius: 50%; }

/* ------------------------------------------------------------------
   EMBER — asymmetric night console, modular and architectural. */
:root[data-design-template="atelier"] .app {
  background-color: var(--tenant-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--tenant-bg) 88%, transparent), color-mix(in srgb, var(--tenant-bg) 88%, transparent)),
    url("assets/theme-ember-material-v52.webp");
  background-blend-mode: normal, soft-light;
}
:root[data-design-template="atelier"] .top-home,
:root[data-design-template="atelier"] .top-home:has(.hero-booking-cta) {
  height: 448px;
  margin: 10px 10px 0;
  border: 1px solid var(--line);
  border-radius: 6px 30px 6px 30px;
  overflow: hidden;
  color: var(--tenant-text);
  background: var(--tenant-bg);
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
}
:root[data-design-template="atelier"] .top-home .hero-backdrop {
  right: 0;
  left: auto;
  width: 68%;
  height: 100%;
  clip-path: polygon(24% 0,100% 0,100% 100%,0 100%);
  filter: saturate(.86) contrast(1.08);
}
:root[data-design-template="atelier"] .top-home::after {
  background:
    linear-gradient(90deg, var(--tenant-bg) 0 38%, color-mix(in srgb, var(--tenant-bg) 88%, transparent) 56%, rgba(0,0,0,.25)),
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 45%, rgba(0,0,0,.58));
}
:root[data-design-template="atelier"] .top-home .top-row {
  margin: 12px;
  padding: 10px 11px;
  border-left: 3px solid var(--tenant-accent);
  background: color-mix(in srgb, var(--tenant-surface) 90%, transparent);
  backdrop-filter: blur(16px);
}
:root[data-design-template="atelier"] .top-home .top-row :where(.venue-name,.venue-sub,.profile-button,.notification-button) { color: var(--tenant-surface-text) !important; }
:root[data-design-template="atelier"] .top-home :where(.venue-mark,.profile-button,.notification-button) { border-color: var(--line); border-radius: 3px; background: transparent; }
:root[data-design-template="atelier"] .hero-copy {
  right: auto !important;
  bottom: 24px !important;
  left: 22px;
  width: 61%;
  padding: 0;
  color: var(--tenant-text);
}
:root[data-design-template="atelier"] .hero-copy .hero-eyebrow { color: var(--tenant-accent) !important; letter-spacing: .18em; }
:root[data-design-template="atelier"] .hero-copy h2 { color: var(--tenant-text) !important; font: 720 35px/.94 var(--font-display); text-shadow: none; }
:root[data-design-template="atelier"] .hero-copy > p:last-of-type { max-width: 210px; color: var(--tenant-muted) !important; text-shadow: none; }
:root[data-design-template="atelier"] .hero-booking-cta { width: 100%; min-height: 49px; border: 1px solid color-mix(in srgb, var(--brand) 65%, var(--tenant-text)); border-radius: 3px 16px 3px 16px; box-shadow: none; }
:root[data-design-template="atelier"] .screen { padding-inline: 14px; }
:root[data-design-template="atelier"] .home-screen > section { margin-top: 22px; }
:root[data-design-template="atelier"] :where(.section-headline,.service-hub-head) { padding-left: 12px; border-left: 3px solid var(--tenant-accent); }
:root[data-design-template="atelier"] .home-service-hub { padding: 13px; border: 1px solid var(--line); border-radius: 4px 22px 4px 22px; background: var(--tenant-surface); }
:root[data-design-template="atelier"] .service-quick-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
:root[data-design-template="atelier"] .service-quick {
  min-width: 0;
  min-height: 86px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 3px 18px 3px 18px;
  color: var(--tenant-surface-text);
  background: color-mix(in srgb, var(--tenant-surface) 90%, var(--tenant-bg));
  box-shadow: none;
}
:root[data-design-template="atelier"] .service-quick::before { display: none; }
:root[data-design-template="atelier"] .service-quick::after { right: 10px; bottom: 9px; width: 18px; height: 2px; background: var(--tenant-accent); }
:root[data-design-template="atelier"] .service-quick span { width: 38px; height: 38px; border-radius: 2px 12px 2px 12px; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
:root[data-design-template="atelier"] .service-quick strong { color: inherit; text-align: left; }
:root[data-design-template="atelier"] .mix-of-day { display: grid; grid-template-columns: minmax(0,1fr) 48%; border: 1px solid var(--line); border-radius: 4px 26px 4px 26px; background: var(--tenant-surface); box-shadow: 0 16px 32px rgba(0,0,0,.2); }
:root[data-design-template="atelier"] .mix-of-day > div { padding: 23px 17px; }
:root[data-design-template="atelier"] .mix-of-day img { min-height: 228px; clip-path: polygon(16% 0,100% 0,100% 100%,0 100%); }
:root[data-design-template="atelier"] .mix-of-day h3 { color: var(--tenant-surface-text); }
:root[data-design-template="atelier"] .mix-of-day p { color: var(--tenant-surface-muted); }
:root[data-design-template="atelier"] :where(.news-card,.menu-item) { border: 1px solid var(--line); border-radius: 3px 16px 3px 16px; background: var(--tenant-surface); box-shadow: none; }
:root[data-design-template="atelier"] .tabs { right: 8px; bottom: 8px; left: 8px; gap: 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
:root[data-design-template="atelier"] .tab {
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 3px 15px 3px 15px;
  color: var(--tenant-surface-muted);
  background: color-mix(in srgb, var(--tenant-surface) 95%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
}
:root[data-design-template="atelier"] .tab.on { border-color: var(--brand); color: var(--brand-ink); background: var(--brand); }
:root[data-design-template="atelier"] .tab-primary { transform: none; }
:root[data-design-template="atelier"] .tab-primary .tab-icon-shell { border: 0; border-radius: 0; background: transparent; box-shadow: none; }

@media (max-width: 390px) {
  :root[data-design-template="editorial"] .top-home,
  :root[data-design-template="editorial"] .top-home:has(.hero-booking-cta) { height: 510px; margin-inline: 8px; }
  :root[data-design-template="editorial"] .hero-copy { padding-inline: 19px; }
  :root[data-design-template="editorial"] .mix-of-day { grid-template-columns: 1fr; }
  :root[data-design-template="editorial"] .mix-of-day img { height: 176px; min-height: 176px; }
  :root[data-design-template="gallery"] .top-home,
  :root[data-design-template="gallery"] .top-home:has(.hero-booking-cta) { height: 430px; margin-inline: 9px; }
  :root[data-design-template="atelier"] .top-home,
  :root[data-design-template="atelier"] .top-home:has(.hero-booking-cta) { height: 432px; margin-inline: 7px; }
  :root[data-design-template="atelier"] .hero-copy { left: 17px; width: 65%; }
  :root[data-design-template="atelier"] .hero-copy h2 { font-size: 31px; }
  :root[data-design-template="atelier"] .mix-of-day { grid-template-columns: 1fr; }
  :root[data-design-template="atelier"] .mix-of-day img { order: -1; height: 174px; min-height: 174px; clip-path: none; }
  :root[data-design-template="atelier"] .tabs { gap: 3px; }
  :root[data-design-template="atelier"] .tab { min-height: 64px; }
}

@media (max-width: 350px) {
  :root[data-design-template="editorial"] .service-quick-rail,
  :root[data-design-template="gallery"] .service-quick-rail,
  :root[data-design-template="atelier"] .service-quick-rail { grid-template-columns: 1fr; }
  :root[data-design-template="editorial"] .top-home { height: 500px; }
  :root[data-design-template="gallery"] .hero-copy h2 { font-size: 27px; }
  :root[data-design-template="atelier"] .hero-copy { width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-design-template] * { scroll-behavior: auto !important; }
}