:root {
  color-scheme: light;
  --ink: #15171a;
  --muted: #626a72;
  --paper: #f8f7f2;
  --white: #ffffff;
  --line: rgba(21, 23, 26, 0.13);
  --accent: #007f73;
  --accent-2: #ff6848;
  --soft: #eaf2ec;
  --shadow: 0 20px 60px rgba(21, 23, 26, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.demo-shell {
  min-height: 100vh;
  overflow: hidden;
}

.demo-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
  padding: 0.85rem 4vw;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.demo-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 950;
  text-decoration: none;
}

.demo-logo span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
}

.demo-nav-links {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.demo-nav-links a,
.demo-button,
.choice-button,
.slot-button,
.mini-button,
.mini-link,
.addon-button,
.payment-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 8px;
  font-weight: 850;
  text-decoration: none;
  letter-spacing: 0;
}

.demo-nav-links a {
  padding: 0.62rem 0.85rem;
  color: var(--muted);
}

.top-contact {
  position: sticky;
  top: 70px;
  z-index: 18;
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(170px, 0.45fr) minmax(240px, 1fr);
  gap: 0.6rem;
  padding: 0.6rem 4vw;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px rgba(21, 23, 26, 0.08);
  backdrop-filter: blur(18px);
}

.top-contact a,
.top-contact-status {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
}

.top-contact-phone {
  background: var(--accent);
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  font-weight: 950;
}

.top-contact-facebook {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 950;
}

.top-contact-status {
  flex-direction: column;
  align-items: flex-start;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--soft);
}

.top-contact-status strong {
  font-size: 1.02rem;
}

.top-contact-status em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.86rem;
}

.demo-button,
.choice-button,
.slot-button,
.mini-button,
.addon-button,
.payment-button {
  position: relative;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  transition: background 260ms ease, border-color 260ms ease, color 260ms ease, transform 180ms ease, box-shadow 260ms ease;
}

.demo-button {
  gap: 0.5rem;
  padding: 0.78rem 1rem;
}

.demo-button.alt {
  background: var(--ink);
}

.demo-button.ghost,
.choice-button,
.slot-button,
.mini-button,
.mini-link,
.addon-button {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

.choice-button.is-active,
.slot-button.is-active,
.mini-button.is-active,
.addon-button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.choice-button.just-added,
.addon-button.just-added,
.demo-button.just-added {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(21, 23, 26, 0.16);
  transform: translateY(-1px);
}

.item-badge {
  flex: 0 0 auto;
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  margin-left: 0.45rem;
  padding: 0 0.42rem;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
  transform-origin: center;
}

.item-badge[hidden] {
  display: none;
}

.just-added .item-badge {
  background: #fff;
  color: var(--accent);
}

.item-badge.is-pop {
  animation: badge-pop 460ms ease both;
}

.has-quantity:not(.just-added) .item-badge {
  animation: badge-settle 240ms ease both;
}

@keyframes badge-pop {
  0% {
    transform: scale(0.7);
  }
  48% {
    transform: scale(1.24);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes badge-settle {
  from {
    transform: translateY(-1px);
  }
  to {
    transform: translateY(0);
  }
}

.mini-link {
  padding: 0.55rem 0.75rem;
  text-decoration: none;
}

.demo-kicker,
.demo-label {
  margin: 0 0 0.7rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.demo-status {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  color: var(--accent);
  font-weight: 850;
}

.demo-section {
  padding: 5rem 4vw;
}

.demo-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 2rem;
}

.demo-heading h2 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.order-builder h2,
.order-basket h2,
.booking-board h2,
.booking-summary h2,
.bouquet-builder h2,
.diagnosis-card h2,
.gift-card-preview h2,
.cafe-booking h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.demo-card,
.demo-panel,
.demo-contact,
.text-field {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 12px 34px rgba(21, 23, 26, 0.07);
}

.demo-card {
  padding: 1.15rem;
}

.demo-panel,
.demo-contact,
.text-field {
  padding: 1.25rem;
}

.text-field {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
  box-shadow: none;
}

.text-field span {
  color: var(--ink);
  font-weight: 900;
}

.text-field textarea {
  width: 100%;
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem;
  resize: vertical;
  font: inherit;
}

.demo-card strong {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.12rem;
}

.demo-card p,
.demo-contact p,
.demo-panel p {
  color: var(--muted);
}

.price-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.price-row:last-child {
  border-bottom: 0;
}

.demo-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 4vw;
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
}

.demo-footer strong {
  color: var(--white);
}

.hours {
  display: grid;
  gap: 0.55rem;
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.hero-photo {
  min-height: 520px;
  background: var(--demo-image) center/cover no-repeat;
}

/* Pizza */
.pizza {
  --accent: #d13b22;
  --accent-2: #1f8b60;
  --soft: #fff0e2;
  --paper: #22130d;
  --line: rgba(82, 38, 18, 0.16);
  color: #251611;
  background: #22130d;
}

.pizza .demo-nav {
  background: rgba(35, 18, 11, 0.82);
  color: #fff7ef;
  border-color: rgba(255, 255, 255, 0.11);
}

.pizza .top-contact,
.frisor .top-contact,
.kafe .top-contact {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(21, 23, 26, 0.9);
  color: #fff;
}

.pizza .top-contact-facebook,
.frisor .top-contact-facebook,
.kafe .top-contact-facebook,
.pizza .top-contact-status,
.frisor .top-contact-status,
.kafe .top-contact-status {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.pizza .top-contact-status em,
.frisor .top-contact-status em,
.kafe .top-contact-status em {
  color: rgba(255, 255, 255, 0.68);
}

.pizza .demo-nav-links a {
  color: rgba(255, 247, 239, 0.72);
}

.pizza-hero {
  min-height: 86vh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 0.78fr);
  gap: 2rem;
  align-items: end;
  padding: 6rem 4vw 4rem;
  color: #fff7ef;
  background:
    linear-gradient(90deg, rgba(35, 18, 11, 0.97), rgba(35, 18, 11, 0.7), rgba(35, 18, 11, 0.2)),
    var(--demo-image) center/cover no-repeat;
}

.pizza-hero h1,
.salon-hero h1,
.flower-hero h1,
.cafe-hero h1,
.skin-hero h1 {
  max-width: 820px;
  margin: 0 0 1rem;
  font-size: clamp(3rem, 6vw, 6.8rem);
  line-height: 0.9;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.pizza-hero p {
  max-width: 620px;
  color: rgba(255, 247, 239, 0.78);
  font-size: 1.18rem;
}

.pizza-deal {
  align-self: center;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(35, 18, 11, 0.7);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.pizza-deal strong {
  display: block;
  margin-bottom: 0.5rem;
  color: #ffd67e;
  font-size: 2rem;
  line-height: 1;
}

.pizza-menu {
  background: #fff8ed;
}

.pizza-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pizza-item {
  overflow: hidden;
  min-height: 420px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(62, 27, 12, 0.14);
}

.pizza-photo,
.treatment-photo {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.pizza-item-body {
  padding: 1rem;
}

.pizza-item h3 {
  max-width: 220px;
  margin-bottom: 0.45rem;
  font-size: 1.65rem;
}

.pizza-item p {
  color: #6f4a3b;
}

.pizza-item strong {
  display: block;
  margin-bottom: 0.85rem;
  color: #251611;
  font-size: 1.15rem;
}

.pizza-item .choice-button {
  margin-right: 0.45rem;
}

.card-quantity-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem;
  border: 1px solid rgba(201, 54, 34, 0.18);
  border-radius: 999px;
  background: #fff7ef;
  vertical-align: middle;
}

.card-quantity-controls[hidden] {
  display: none;
}

.card-quantity-controls button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
}

.card-quantity-controls button:first-child {
  background: #2a160f;
}

.card-quantity-controls strong {
  display: inline-grid;
  min-width: 2rem;
  margin: 0;
  place-items: center;
  color: #251611;
  font-size: 1rem;
}

.pizza-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  gap: 1rem;
  align-items: start;
  background: #2a160f;
  color: #fff7ef;
}

.order-builder,
.order-basket {
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 247, 239, 0.06);
}

.order-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.order-steps span {
  min-height: 38px;
  padding: 0.55rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 247, 239, 0.68);
  font-size: 0.8rem;
  font-weight: 850;
}

.order-steps .is-done {
  background: var(--accent-2);
  color: #fff;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.65rem 0 1rem;
}

.addon-grid,
.payment-grid,
.integration-links,
.payment-mini {
  display: grid;
  gap: 0.65rem;
}

.addon-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.8rem 0 1rem;
}

.addon-button {
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  min-height: 56px;
  padding: 0.75rem;
  text-align: left;
}

.addon-button strong {
  white-space: nowrap;
}

.addon-button .item-badge {
  margin-left: 0;
}

.order-basket ul {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
}

.order-basket li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
}

.pizza-cart-line {
  align-items: start;
}

.cart-main {
  min-width: 0;
}

.pizza-line-addons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.line-addon {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
}

.line-addon span {
  color: var(--muted);
}

.line-addon.is-active {
  border-color: rgba(201, 54, 34, 0.35);
  background: #fff0e2;
  color: #9d2516;
}

.cart-line span:first-child {
  min-width: 0;
}

.cart-line small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.cart-empty {
  color: var(--muted);
  font-weight: 850;
}

.cart-controls {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

.cart-controls > strong {
  min-width: 1.5rem;
  text-align: center;
}

.cart-controls button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 950;
}

.order-basket.has-items,
.service-cart.has-items {
  transition: box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.cart-pulse {
  animation: cart-pulse 620ms ease both;
}

@keyframes cart-pulse {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  42% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

.pizza .cart-line small,
.pizza .cart-empty,
.booking-board .cart-line small,
.booking-board .cart-empty,
.signature-booking .cart-line small,
.signature-booking .cart-empty {
  color: rgba(255, 255, 255, 0.64);
}

.service-cart {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0.75rem 0 1rem;
  list-style: none;
}

.service-cart .cart-line,
.service-cart .cart-empty {
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.booking-board .service-cart .cart-line,
.booking-board .service-cart .cart-empty,
.signature-booking .service-cart .cart-line,
.signature-booking .service-cart .cart-empty {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.compact-addons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wide-cart {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basket-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
  font-size: 1.35rem;
  font-weight: 950;
}

.payment-mini {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1rem;
}

.payment-mini span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 900;
  opacity: 0.82;
}

.compact-item {
  min-height: 0;
}

.compact-item .pizza-item-body,
.compact-treatment .treatment-body {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Salon */
.frisor {
  --accent: #5f6df2;
  --accent-2: #d8699a;
  --soft: #f1f1ff;
  --paper: #fbf7f1;
}

.salon-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.9fr);
  min-height: 86vh;
  background: #12131d;
  color: #fff;
}

.salon-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4vw;
}

.salon-copy p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.15rem;
}

.salon-photo {
  min-height: 640px;
  background: var(--demo-image) center/cover no-repeat;
}

.salon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
}

.salon-strip div {
  padding: 1.4rem 4vw;
  border-right: 1px solid var(--line);
}

.service-board {
  background: #f7f6ff;
}

.service-card {
  display: grid;
  gap: 0.75rem;
  min-height: 230px;
  padding: 1.2rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(58, 54, 120, 0.1);
}

.stylist-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.stylist {
  min-height: 280px;
  padding: 1rem;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(15, 16, 26, 0), rgba(15, 16, 26, 0.76)),
    var(--demo-image) center/cover no-repeat;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font: inherit;
  text-align: left;
}

.stylist.is-active {
  outline: 4px solid rgba(95, 109, 242, 0.38);
}

.booking-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  gap: 1rem;
  background: #151622;
  color: #fff;
}

.booking-board,
.booking-summary {
  padding: 1.25rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 0.55rem;
}

/* Signatur Frisør */
.signatur {
  --accent: #e6727d;
  --accent-2: #454545;
  --soft: #fff1f3;
  --paper: #fff7f6;
  --ink: #242121;
  background: #242121;
}

.signatur .demo-logo span:first-child {
  background: linear-gradient(135deg, #ffccd1, #e6727d);
}

.signatur-logo {
  min-width: 0;
  gap: 0.65rem;
}

.signatur-logo img {
  width: min(320px, 48vw);
  height: auto;
  max-height: 76px;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.28));
}

.signatur-logo > span {
  padding: 0.34rem 0.55rem;
  border: 1px solid rgba(255, 204, 209, 0.26);
  border-radius: 999px;
  color: #fff7f6;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.signatur-nav {
  background: rgba(36, 33, 33, 0.88);
  color: #fff7f6;
  border-color: rgba(255, 255, 255, 0.12);
}

.signatur-nav .demo-nav-links a {
  color: rgba(255, 247, 246, 0.76);
}

.signatur-contact {
  grid-template-columns: minmax(150px, 0.75fr) minmax(150px, 0.7fr) minmax(120px, 0.55fr) minmax(190px, 1fr);
  background: rgba(36, 33, 33, 0.94);
}

.top-contact-instagram {
  background: rgba(230, 114, 125, 0.16);
  color: #fff7f6;
}

.signature-hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.48fr);
  align-items: end;
  gap: 1rem;
  padding: 7rem 4vw 4rem;
  color: #fff7f6;
  background:
    linear-gradient(90deg, rgba(36, 33, 33, 0.98) 0 34%, rgba(36, 33, 33, 0.76) 53%, rgba(36, 33, 33, 0.12)),
    var(--demo-image) center/cover no-repeat;
}

.signature-hero::after {
  content: "";
  position: absolute;
  inset: auto 4vw 2rem 4vw;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 204, 209, 0.76), rgba(255, 247, 246, 0.08));
}

.signature-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.signature-hero h1 {
  max-width: 900px;
  margin: 0 0 1rem;
  font-size: clamp(3.2rem, 7vw, 7.6rem);
  line-height: 0.88;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.signature-hero p {
  max-width: 660px;
  color: rgba(255, 247, 246, 0.8);
  font-size: 1.16rem;
}

.signature-live-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid rgba(255, 204, 209, 0.22);
  border-radius: 8px;
  background: rgba(36, 33, 33, 0.68);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.signature-live-panel div {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.signature-live-panel span,
.signature-small {
  color: rgba(255, 247, 246, 0.7);
  font-size: 0.86rem;
}

.signature-live-panel strong {
  color: #fff7f6;
  font-size: 1.05rem;
}

.signature-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff7f6;
  color: #242121;
}

.signature-proof div {
  min-height: 130px;
  padding: 1.35rem 4vw;
  border-right: 1px solid rgba(36, 33, 33, 0.12);
}

.signature-proof strong,
.signature-proof span {
  display: block;
}

.signature-proof strong {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
}

.signature-proof span {
  color: #6a5d60;
}

.signature-services {
  background: #fff1f3;
}

.signature-social {
  background:
    linear-gradient(135deg, rgba(255, 247, 246, 0.98), rgba(255, 232, 236, 0.96)),
    #fff7f6;
}

.social-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.signature-social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
  gap: 1rem;
}

.social-card {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  border-radius: 8px;
  color: #fff7f6;
  text-decoration: none;
  background: #2d2929;
  box-shadow: 0 20px 54px rgba(69, 33, 37, 0.12);
}

.social-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 33, 33, 0.04), rgba(36, 33, 33, 0.88));
}

.social-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.social-card:hover img {
  transform: scale(1.04);
}

.social-card span,
.social-card strong,
.social-card p {
  position: relative;
  z-index: 1;
}

.social-card span {
  width: max-content;
  margin-bottom: 0.55rem;
  padding: 0.34rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 204, 209, 0.18);
  color: #ffe0e5;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.social-card strong {
  max-width: 420px;
  font-size: clamp(1.45rem, 2.4vw, 2.35rem);
  line-height: 0.98;
}

.social-card p {
  max-width: 360px;
  margin: 0.55rem 0 0;
  color: rgba(255, 247, 246, 0.78);
}

.social-card.tall {
  grid-row: span 2;
}

.social-card.wide {
  grid-column: span 2;
}

.facebook-card {
  min-height: 230px;
  background:
    radial-gradient(circle at top right, rgba(230, 114, 125, 0.38), transparent 42%),
    linear-gradient(135deg, #2d2929, #151313);
}

.facebook-card::after {
  display: none;
}

.signature-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.signature-service {
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #fffdfd;
  box-shadow: 0 20px 54px rgba(69, 33, 37, 0.11);
}

.signature-service.featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.65fr);
}

.signature-service img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.signature-service > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem;
}

.signature-service span {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

.signature-service h3 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 0.98;
}

.signature-service p {
  margin-bottom: 0.2rem;
  color: #6d5e61;
}

.signature-service strong {
  font-size: 1.1rem;
}

.signature-service.mini {
  min-height: 270px;
  background:
    linear-gradient(135deg, rgba(255, 253, 253, 0.96), rgba(255, 241, 243, 0.88)),
    #fffdfd;
}

.signature-mood {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  background: #242121;
  color: #fff7f6;
}

.signature-mood-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 620px;
}

.signature-mood-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 0.94;
}

.signature-mood-copy p {
  color: rgba(255, 247, 246, 0.72);
}

.signature-mood-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.signature-mood-grid .stylist {
  min-height: 360px;
  background:
    linear-gradient(180deg, rgba(36, 33, 33, 0.08), rgba(36, 33, 33, 0.82)),
    var(--demo-image) center/cover no-repeat;
}

.signature-mood-grid .stylist:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(36, 33, 33, 0.06), rgba(36, 33, 33, 0.82)),
    url("/assets/signatur-color-live.jpg") center/cover no-repeat;
}

.signature-mood-grid .stylist:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(36, 33, 33, 0.06), rgba(36, 33, 33, 0.82)),
    url("/assets/signatur-cut-live.jpg") center/cover no-repeat;
}

.signature-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  gap: 1rem;
  background: #2d2929;
  color: #fff7f6;
}

.signature-booking .booking-board,
.signature-booking .booking-summary {
  background: rgba(255, 247, 246, 0.08);
}

.signature-staff {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

.signature-integrations {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  gap: 1rem;
  background: #fff7f6;
}

.signature-integrations .integration-card {
  background: #fffdfd;
}

.signature-facts {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
}

.signature-facts div {
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(36, 33, 33, 0.1);
}

.signature-facts dt {
  color: #75686b;
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.signature-facts dd {
  margin: 0;
  color: #242121;
  font-weight: 850;
}

.signatur .demo-sticky-bar {
  display: none;
}

/* Flowers */
.blomster {
  --accent: #24834e;
  --accent-2: #e75178;
  --soft: #f3f8e9;
  --paper: #fbfaf3;
}

.flower-hero {
  min-height: 86vh;
  display: grid;
  align-items: end;
  padding: 5rem 4vw;
  color: #173323;
  background:
    linear-gradient(90deg, rgba(251, 250, 243, 0.96), rgba(251, 250, 243, 0.8) 38%, rgba(251, 250, 243, 0.16)),
    var(--demo-image) center/cover no-repeat;
}

.flower-hero p {
  max-width: 580px;
  color: #496052;
  font-size: 1.16rem;
}

.product-ribbon {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 1rem 4vw;
  background: #173323;
  color: #fff;
}

.product-ribbon span {
  flex: 0 0 auto;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.flower-shop {
  background: #fbfaf3;
}

.flower-products {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1rem;
}

.bouquet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.bouquet-card {
  min-height: 250px;
  padding: 1rem;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.96)),
    var(--demo-image) center/cover no-repeat;
  box-shadow: 0 18px 46px rgba(36, 131, 78, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bouquet-builder {
  padding: 1.25rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.flower-note {
  padding: 3rem 4vw;
  background: #eaf4de;
}

.flower-note h2 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: 0;
}

/* Cafe */
.kafe {
  --accent: #b36c24;
  --accent-2: #477d72;
  --soft: #fff4e2;
  --paper: #f5eee5;
}

.cafe-hero {
  min-height: 86vh;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(360px, 0.88fr);
  gap: 2rem;
  padding: 5rem 4vw 4rem;
  background: #342116;
  color: #fff7eb;
}

.cafe-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cafe-copy p {
  max-width: 590px;
  color: rgba(255, 247, 235, 0.78);
  font-size: 1.16rem;
}

.cafe-window {
  min-height: 580px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(52, 33, 22, 0), rgba(52, 33, 22, 0.48)),
    var(--demo-image) center/cover no-repeat;
  box-shadow: var(--shadow);
}

.chalk-menu {
  background: #22362f;
  color: #fff7eb;
}

.chalk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.chalk-card {
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.chalk-card p {
  color: rgba(255, 247, 235, 0.7);
}

.cafe-booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.5fr);
  gap: 1rem;
  background: #fff8ee;
}

.inline-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* Skin */
.hud {
  --accent: #5b9d98;
  --accent-2: #b47c72;
  --soft: #eef8f6;
  --paper: #f8f4ef;
}

.skin-hero {
  min-height: 86vh;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(380px, 0.8fr);
  gap: 1rem;
  padding: 5rem 4vw;
  background:
    linear-gradient(110deg, #f8f4ef 0 45%, rgba(248, 244, 239, 0.58) 58%, rgba(248, 244, 239, 0.05)),
    var(--demo-image) center/cover no-repeat;
}

.skin-copy {
  align-self: center;
}

.skin-copy p {
  max-width: 590px;
  color: #61726f;
  font-size: 1.16rem;
}

.skin-panel {
  align-self: end;
  padding: 1.25rem;
  border: 1px solid rgba(91, 157, 152, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.treatment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.treatment-card {
  overflow: hidden;
  min-height: 260px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(91, 157, 152, 0.13);
}

.treatment-body {
  padding: 1.2rem;
}

.treatment-card strong {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 1.18rem;
}

.treatment-card p {
  color: #61726f;
}

.treatment-card span {
  color: var(--accent);
  font-weight: 950;
}

.skin-booking {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.55fr);
  gap: 1rem;
  background: #eff8f5;
}

.diagnosis-card {
  padding: 1.25rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.gift-card-preview {
  min-height: 260px;
  padding: 1.25rem;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(91, 157, 152, 0.92), rgba(180, 124, 114, 0.82)),
    #5b9d98;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.integration-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.55fr);
  gap: 1rem;
  background: #fff;
}

.integration-card {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(21, 23, 26, 0.08);
}

.integration-card h2 {
  max-width: 780px;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 0.98;
}

.muted-card {
  background: var(--soft);
}

.integration-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}

.integration-links a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.checkout-flow[hidden] {
  display: none;
}

.checkout-flow {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 13, 0.72);
  backdrop-filter: blur(10px);
}

.checkout-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.25rem;
  border-radius: 8px;
  background: #fff;
  color: #15171a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

.checkout-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 950;
}

.checkout-card h2 {
  max-width: 440px;
  margin-bottom: 0.5rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.96;
}

.checkout-lead,
.checkout-note {
  color: var(--muted);
}

.payment-grid {
  grid-template-columns: repeat(3, 1fr);
  margin: 1rem 0;
}

.payment-button {
  min-height: 86px;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  color: #fff;
}

.payment-button span {
  font-size: 1.05rem;
  font-weight: 950;
}

.payment-button small {
  opacity: 0.78;
}

.payment-button.vipps {
  background: #ff5b24;
}

.payment-button.card {
  background: #1f2937;
}

.payment-button.apple {
  background: #050505;
}

.checkout-success {
  text-align: center;
}

.receipt-box {
  display: grid;
  gap: 0.3rem;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 8px;
  background: var(--soft);
}

.receipt-box strong {
  font-size: 1.8rem;
}

/* Admin */
.admin-page {
  --accent: #10885f;
  --soft: #edf8ee;
  background: #111419;
}

.admin-page .demo-nav {
  background: rgba(17, 20, 25, 0.86);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

.admin-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 0.76fr) minmax(0, 1.24fr);
  gap: 1rem;
  padding: 4vw;
  color: #111419;
}

.admin-sidebar,
.admin-preview,
.admin-log {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #fff;
}

.admin-wide {
  grid-column: 1 / -1;
}

.admin-config {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  background: #10131a;
  color: #e9f7ef;
  font: 0.9rem/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.pipeline-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pipeline-card strong {
  display: block;
  margin-bottom: 0.35rem;
}

.pipeline-card p {
  color: var(--muted);
}

.admin-sidebar {
  padding: 1.25rem;
}

.admin-preview {
  overflow: hidden;
}

.field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.field label {
  font-weight: 850;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem;
  font: inherit;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}

.preview-hero {
  padding: 2rem;
  background:
    linear-gradient(90deg, var(--soft), rgba(255, 255, 255, 0.62)),
    var(--admin-hero-image, url("/assets/wow-hero.png")) center/cover no-repeat;
}

.preview-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-weight: 950;
}

.preview-topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.preview-alert {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: var(--accent);
  font-weight: 950;
}

.admin-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-mini-grid .field {
  margin-bottom: 0;
}

.preview-hero h1 {
  max-width: 660px;
  margin: 0 0 0.8rem;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.preview-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1rem;
}

.preview-tile,
.admin-log {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}

.site-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  width: min(420px, calc(100vw - 2rem));
  padding: 1rem;
  border-radius: 8px;
  background: rgba(21, 23, 26, 0.94);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.site-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.demo-sticky-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  gap: 0.5rem;
  width: min(660px, calc(100vw - 2rem));
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(21, 23, 26, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.demo-sticky-bar a {
  flex: 1;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.demo-sticky-bar a + a {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 980px) {
  .pizza-hero,
  .pizza-order,
  .top-contact,
  .salon-hero,
  .booking-studio,
  .signature-hero,
  .signature-booking,
  .signature-mood,
  .signature-integrations,
  .flower-products,
  .cafe-hero,
  .cafe-booking,
  .skin-hero,
  .skin-booking,
  .integration-section,
  .admin-wrap {
    grid-template-columns: 1fr;
  }

  .demo-grid,
  .pizza-cards,
  .stylist-row,
  .signature-service-grid,
  .signature-social-grid,
  .signature-mood-grid,
  .signature-proof,
  .chalk-grid,
  .treatment-grid,
  .preview-band,
  .addon-grid,
  .integration-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .signature-service.featured {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .social-card.tall,
  .social-card.wide {
    grid-column: auto;
    grid-row: auto;
  }

  .signatur-nav .demo-nav-links {
    display: none;
  }

  .signatur-logo > span {
    display: none;
  }

  .signatur-contact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .demo-nav {
    min-height: 64px;
    align-items: center;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.65rem 5vw;
    width: 100vw;
    max-width: 100vw;
  }

  .demo-logo {
    min-width: 0;
  }

  .demo-logo span:first-child {
    width: 36px;
    height: 36px;
  }

  .demo-logo span:last-child {
    overflow: hidden;
    max-width: 230px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .demo-nav-links {
    display: none;
  }

  .top-contact {
    top: 64px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.42rem 5vw;
  }

  .top-contact a {
    min-height: 44px;
    padding: 0.55rem 0.65rem;
    font-size: 0.88rem;
    line-height: 1.05;
    text-align: center;
  }

  .top-contact-phone {
    font-size: 0.94rem;
  }

  .top-contact-status {
    display: none;
  }

  .pizza-hero h1,
  .salon-hero h1,
  .signature-hero h1,
  .flower-hero h1,
  .cafe-hero h1,
  .skin-hero h1 {
    font-size: clamp(2.15rem, 9vw, 2.65rem);
    line-height: 0.95;
  }

  .pizza-hero > div:first-child,
  .salon-copy,
  .signature-hero-copy,
  .flower-hero > div,
  .cafe-copy,
  .skin-copy {
    max-width: 342px;
  }

  .demo-section,
  .pizza-hero,
  .salon-copy,
  .signature-hero,
  .flower-hero,
  .cafe-hero,
  .skin-hero {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .pizza-hero,
  .salon-hero,
  .flower-hero,
  .cafe-hero,
  .skin-hero {
    min-height: calc(100vh - 112px);
  }

  .signature-hero {
    min-height: 640px;
    align-items: start;
    padding-top: 3rem;
    padding-bottom: 7rem;
  }

  .signature-hero h1 {
    max-width: 360px;
  }

  .signature-live-panel {
    align-self: start;
  }

  .demo-grid,
  .pizza-cards,
  .bouquet-grid,
  .stylist-row,
  .signature-service-grid,
  .signature-mood-grid,
  .signature-proof,
  .signature-staff,
  .chalk-grid,
  .treatment-grid,
  .preview-band,
  .order-steps,
  .slot-grid,
  .addon-grid,
  .wide-cart,
  .payment-grid,
  .payment-mini,
  .integration-links,
  .inline-summary {
    grid-template-columns: 1fr;
  }

  .cart-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cart-line > strong {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .inline-summary {
    display: grid;
  }

  .salon-strip {
    grid-template-columns: 1fr;
  }

  .demo-heading {
    align-items: start;
    flex-direction: column;
  }

  .demo-footer {
    flex-direction: column;
  }

  .site-toast {
    bottom: 5.7rem;
  }

  .demo-sticky-bar {
    bottom: 0.65rem;
    flex-direction: row;
    gap: 0.35rem;
    width: min(520px, calc(100vw - 1rem));
    padding: 0.35rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 1.2rem));
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .mobile-action-visible .demo-sticky-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%);
  }

  .demo-sticky-bar a {
    min-height: 40px;
    padding: 0.45rem 0.35rem;
    font-size: 0.82rem;
    line-height: 1;
  }

  .signatur .demo-nav {
    position: relative;
    min-height: 80px;
    padding: 0.62rem 5vw;
  }

  .signatur-logo img {
    width: min(232px, 70vw);
    max-height: 60px;
  }

  .signatur .signatur-contact {
    top: 0;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 0.45rem;
    padding: 0.48rem 5vw;
  }

  .signatur .signatur-contact .top-contact-instagram,
  .signatur .signatur-contact .top-contact-status {
    display: none;
  }

  .signatur .signatur-contact a {
    min-width: 0;
    width: 100%;
    min-height: 46px;
    padding: 0.6rem 0.45rem;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.08;
    text-align: center;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .signatur .signatur-contact .top-contact-facebook {
    font-size: 0.86rem;
  }

  .signatur .signature-hero {
    display: block;
    min-height: auto;
    padding: 1.55rem 5vw 1.2rem;
    background:
      linear-gradient(180deg, rgba(36, 33, 33, 0.54), rgba(36, 33, 33, 0.82) 52%, #242121 100%),
      var(--demo-image) 58% top/auto 56% no-repeat,
      #242121;
  }

  .signatur .signature-hero::after {
    display: none;
  }

  .signatur .signature-hero-copy {
    max-width: none;
  }

  .signatur .signature-hero h1 {
    max-width: 350px;
    margin-bottom: 0.75rem;
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: 0.94;
  }

  .signatur .signature-hero p {
    max-width: 350px;
    margin-bottom: 0.85rem;
    color: rgba(255, 247, 246, 0.86);
    font-size: 1rem;
    line-height: 1.45;
  }

  .signatur .choice-row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
  }

  .signatur .choice-row .demo-button {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.55rem;
    font-size: 0.92rem;
  }

  .signatur .choice-row .demo-button.ghost {
    display: none;
  }

  .signatur .signature-live-panel {
    margin-top: 0.7rem;
    padding: 0.55rem;
    border-color: rgba(255, 204, 209, 0.2);
    background: rgba(36, 33, 33, 0.62);
    box-shadow: none;
  }

  .signatur .signature-live-panel div {
    padding: 0.7rem;
  }

  .signatur .signature-live-panel div:nth-child(n+2) {
    display: none;
  }

  .signatur .signature-live-panel strong {
    font-size: 0.96rem;
  }

  .signatur .signature-proof {
    grid-template-columns: 1fr;
  }

  .signatur .signature-proof div {
    min-height: auto;
    padding: 0.95rem 5vw;
  }

  .signatur .signature-proof div:nth-child(1),
  .signatur .signature-proof div:nth-child(2) {
    display: none;
  }

  .signatur .signature-proof strong {
    font-size: 0.96rem;
    line-height: 1.12;
  }

  .signatur .signature-proof span {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .signatur .demo-section {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  .signatur .demo-heading {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .signatur .demo-heading h2 {
    font-size: clamp(1.7rem, 8vw, 2.25rem);
    line-height: 1.02;
  }

  .signatur .social-actions {
    width: 100%;
    justify-content: stretch;
  }

  .signatur .social-actions .mini-link {
    flex: 1 1 0;
    min-height: 42px;
  }

  .signatur .signature-social-grid {
    display: flex;
    gap: 0.75rem;
    margin-right: -5vw;
    padding-right: 5vw;
    padding-bottom: 0.45rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .signatur .social-card {
    flex: 0 0 min(82vw, 320px);
    min-height: 255px;
    scroll-snap-align: start;
  }

  .signatur .social-card strong {
    font-size: 1.45rem;
    line-height: 1.02;
  }

  .signatur .social-card p {
    font-size: 0.92rem;
    line-height: 1.3;
  }

  .signatur .signature-service-grid {
    gap: 0.7rem;
  }

  .signatur .signature-service,
  .signatur .signature-service.featured {
    min-height: auto;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .signatur .signature-service.mini {
    grid-template-columns: 1fr;
  }

  .signatur .signature-service img {
    height: 100%;
    min-height: 100%;
  }

  .signatur .signature-service > div {
    gap: 0.42rem;
    padding: 0.85rem;
  }

  .signatur .signature-service h3 {
    font-size: 1.12rem;
    line-height: 1.08;
  }

  .signatur .signature-service p {
    display: none;
  }

  .signatur .signature-service strong {
    font-size: 0.84rem;
    line-height: 1.25;
  }

  .signatur .signature-service .choice-button {
    width: 100%;
    min-height: 40px;
    padding: 0.45rem 0.6rem;
    font-size: 0.86rem;
  }

  .signatur .signature-mood {
    display: none;
  }

  .signatur .signature-booking {
    gap: 0.75rem;
  }

  .signatur .signature-booking .booking-board,
  .signatur .signature-booking .booking-summary {
    padding: 1rem;
  }

  .signatur .signature-booking .slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signatur .signature-staff,
  .signatur .compact-addons,
  .signatur .service-cart,
  .signatur .booking-board > p:not(.demo-label):not(.demo-status) {
    display: none;
  }

  .signatur .booking-summary .price-row:nth-of-type(2),
  .signatur .booking-summary .price-row:nth-of-type(3),
  .signatur .booking-summary .price-row:nth-of-type(4),
  .signatur .booking-summary .price-row:nth-of-type(7),
  .signatur .booking-summary .price-row:nth-of-type(8),
  .signatur .booking-summary .signature-small {
    display: none;
  }

  .signatur .signature-facts div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .signatur .signature-facts div:nth-child(2),
  .signatur .signature-facts div:nth-child(3),
  .signatur .signature-facts div:nth-child(4) {
    display: none;
  }
}

.demo-hint {
  margin: -0.25rem 0 1rem;
  color: var(--muted);
  font-weight: 800;
}


/* Header refresh: each demo gets its own visual language, not the same generated navbar */
.demo-nav {
  min-height: 82px;
  padding: .75rem clamp(1rem, 4vw, 4.5rem);
  border-bottom: 0;
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
}
.demo-logo {
  position: relative;
  gap: .85rem;
  min-width: 0;
  padding: .34rem .75rem .34rem .38rem;
  border-radius: 999px;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}
.demo-logo:hover { transform: translateY(-1px); }
.demo-logo-copy { display: grid; gap: .06rem; line-height: 1.02; }
.demo-logo-copy strong { font-size: 1.03rem; letter-spacing: -.025em; white-space: nowrap; }
.demo-logo-copy small { font-size: .68rem; font-weight: 850; letter-spacing: .035em; opacity: .68; white-space: nowrap; }
.demo-logo .demo-logo-mark,
.demo-logo span:first-child.demo-logo-mark {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 20px;
  font-weight: 1000;
  box-shadow: 0 16px 34px rgba(0,0,0,.18), inset 0 -14px 26px rgba(0,0,0,.12);
}
.demo-nav-links {
  gap: .3rem;
  padding: .34rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.demo-nav-links a { border-radius: 999px; transition: background .18s ease, color .18s ease, transform .18s ease; }
.demo-nav-links a:hover { transform: translateY(-1px); background: rgba(255,255,255,.15); }
.pizza .demo-nav {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,207,117,.28), transparent 34%),
    linear-gradient(90deg, rgba(38,17,8,.96), rgba(92,31,16,.88));
}
.pizza .demo-logo { background: rgba(255,238,211,.1); box-shadow: inset 0 0 0 1px rgba(255,238,211,.12); }
.pizza-logo .demo-logo-mark { background: conic-gradient(from 210deg, #ffd66e, #e94322, #7f2416, #ffd66e); color:#fff8e7; border-radius: 50% 50% 45% 50%; }
.pizza-logo .demo-logo-mark::after { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:#fff1b8; box-shadow: 13px 9px 0 #fff1b8, 7px 24px 0 #1f8b60; opacity:.95; }
.blomster .demo-nav {
  background:
    radial-gradient(circle at 8% 15%, rgba(255,185,215,.36), transparent 32%),
    linear-gradient(90deg, rgba(255,251,247,.94), rgba(255,242,248,.9));
  color: #2f2229;
}
.blomster .demo-logo { background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(148,64,102,.1), 0 14px 36px rgba(148,64,102,.08); }
.blomster-logo .demo-logo-mark { background: radial-gradient(circle, #ffe768 0 18%, #ff78b0 19% 47%, #7acb8d 48%); color:#fff; font-size:1.35rem; }
.blomster .demo-nav-links { background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 1px rgba(148,64,102,.11); }
.blomster .demo-nav-links a { color: rgba(47,34,41,.7); }
.frisor:not(.signatur) .demo-nav {
  background:
    radial-gradient(circle at 13% 10%, rgba(123,245,255,.28), transparent 31%),
    linear-gradient(100deg, rgba(16,19,34,.96), rgba(48,43,106,.88));
  color:#f8fbff;
}
.nordlys-logo .demo-logo-mark { background: linear-gradient(145deg, #7bf5ff, #5f6df2 48%, #151622); color:#fff; }
.nordlys-logo .demo-logo-mark::after { content:""; position:absolute; inset:12px 6px auto; height:13px; border-radius:999px; border-top:3px solid rgba(255,255,255,.82); transform: rotate(-18deg); }
.frisor:not(.signatur) .demo-logo { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.kafe .demo-nav {
  background:
    radial-gradient(circle at 10% 25%, rgba(255,226,156,.25), transparent 30%),
    linear-gradient(90deg, rgba(43,26,16,.96), rgba(99,64,33,.88));
  color:#fff9ed;
}
.kafe-logo .demo-logo-mark { background: linear-gradient(145deg, #f6c77a, #70401f); color:#fff8e8; font-size:1.25rem; }
.kafe-logo .demo-logo-mark::after { content:""; position:absolute; width:28px; height:18px; bottom:10px; border-bottom:3px solid rgba(255,255,255,.7); border-radius:50%; }
.kafe .demo-logo { background: rgba(255,246,230,.1); box-shadow: inset 0 0 0 1px rgba(255,246,230,.12); }
.hud .demo-nav {
  background:
    radial-gradient(circle at 10% 12%, rgba(203,238,216,.34), transparent 34%),
    linear-gradient(90deg, rgba(244,251,244,.96), rgba(229,241,229,.9));
  color:#1f2b22;
}
.tind-logo .demo-logo-mark { background: linear-gradient(145deg, #e8fff0, #79b987 56%, #24452d); color:#203c29; font-size:1.6rem; }
.tind-logo .demo-logo-mark::after { content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.62); border-radius:15px; transform: rotate(45deg) scale(.62); }
.hud .demo-logo { background: rgba(255,255,255,.64); box-shadow: inset 0 0 0 1px rgba(36,69,45,.1), 0 14px 36px rgba(36,69,45,.08); }
.hud .demo-nav-links { background: rgba(255,255,255,.68); box-shadow: inset 0 0 0 1px rgba(36,69,45,.1); }
.hud .demo-nav-links a { color: rgba(31,43,34,.7); }
.signatur-nav {
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(230px, auto) auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 9% 20%, rgba(255,204,209,.32), transparent 32%),
    linear-gradient(100deg, rgba(35,30,30,.97), rgba(75,50,52,.9));
}
.signatur-logo {
  padding: .28rem .7rem .28rem .28rem;
  background: rgba(255,247,246,.08);
  box-shadow: inset 0 0 0 1px rgba(255,247,246,.12), 0 18px 42px rgba(0,0,0,.16);
}
.signatur-logo::before {
  content:"";
  width:52px;
  height:52px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), transparent 42%),
    linear-gradient(145deg, #ffccd1, #e6727d 52%, #5a3d3f);
  box-shadow: 0 14px 34px rgba(230,114,125,.25), inset 0 -14px 22px rgba(36,33,33,.16);
}
.signatur-logo::after {
  content:"S";
  position:absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  color:#fff7f6;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.signatur-logo img { width: min(250px, 39vw); max-height: 54px; }
.signatur-nav-badge {
  justify-self: start;
  display: grid;
  gap: .02rem;
  padding: .52rem .78rem;
  border-radius: 999px;
  background: rgba(255,204,209,.12);
  border: 1px solid rgba(255,204,209,.18);
  color:#fff7f6;
  line-height:1;
}
.signatur-nav-badge b { font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.signatur-nav-badge small { opacity:.62; font-weight:800; }
.signatur-nav .demo-nav-links { justify-self:end; }
@media (max-width: 900px) {
  .demo-logo-copy small, .signatur-nav-badge { display:none; }
  .signatur-nav { grid-template-columns: minmax(0,1fr) auto; }
}
@media (max-width: 680px) {
  .demo-nav { min-height: 70px; }
  .demo-logo { padding: .24rem .45rem .24rem .24rem; }
  .demo-logo .demo-logo-mark, .demo-logo span:first-child.demo-logo-mark, .signatur-logo::before { width:44px; height:44px; border-radius:16px; }
  .signatur-logo::after { left:17px; font-size:1.65rem; }
  .signatur-logo img { width:min(205px, 63vw); }
}


/* Signatur header/content fixes 2026-05-15 */
.signatur-nav {
  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
  gap: clamp(.55rem, 1.4vw, 1rem);
  min-height: 78px;
}
.signatur-logo {
  max-width: min(470px, 52vw);
  overflow: hidden;
}
.signatur-logo::before,
.signatur-logo::after {
  display: none;
}
.signatur-logo img {
  width: min(280px, 34vw);
  max-height: 48px;
}
.signatur-nav .demo-nav-links {
  max-width: 100%;
  overflow: hidden;
}
.signatur-nav .demo-nav-links a {
  min-height: 38px;
  padding: .54rem .68rem;
  white-space: nowrap;
}
.signature-team {
  background: #fff7f6;
}
.signature-team .demo-heading {
  align-items: end;
}
.signature-small.dark {
  max-width: 420px;
  color: #6d5e61;
}
.signature-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.signature-team-grid article {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .55rem;
  padding: 1.1rem;
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(230,114,125,.18), transparent 42%),
    linear-gradient(135deg, #fffdfd, #fff1f3);
  box-shadow: 0 20px 54px rgba(69, 33, 37, 0.10);
}
.signature-team-grid span {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}
.signature-team-grid h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: .92;
}
.signature-team-grid p {
  margin: 0;
  color: #6d5e61;
}
.signature-booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem;
}
.signature-booking-actions .demo-button {
  min-width: min(240px, 100%);
}
@media (max-width: 900px) {
  .signatur-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: .58rem 4vw;
  }
  .signatur-nav .demo-nav-links,
  .signatur-nav-badge {
    display: none;
  }
  .signatur-logo {
    max-width: 100%;
    padding: .24rem .5rem;
  }
  .signatur-logo img {
    width: min(255px, 76vw);
    max-height: 46px;
  }
  .signatur-contact {
    top: 72px;
    grid-template-columns: 1fr 1fr;
  }
  .signatur-contact .top-contact-instagram,
  .signatur-contact .top-contact-status {
    display: none;
  }
  .signature-team-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .signatur-logo img { width: min(235px, 72vw); }
  .signatur .signatur-contact { top: 0; }
  .signature-booking-actions { display: grid; }
}

.signature-mood-grid .stylist { cursor: default; }


/* Blomster og Garnbutikken demo 2026-05-15 */
.blomstergarn {
  --accent: #e64f85;
  --accent-2: #2d8763;
  --soft: #fff0f6;
  --paper: #fff8f1;
  --ink: #281f24;
  background: #fff8f1;
}
.yarn-nav {
  background:
    radial-gradient(circle at 9% 14%, rgba(255, 183, 214, .55), transparent 28%),
    radial-gradient(circle at 72% 0%, rgba(126, 205, 151, .30), transparent 34%),
    linear-gradient(100deg, rgba(255, 250, 245, .96), rgba(255, 237, 247, .92));
  color: #2d2228;
}
.yarn-logo {
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(166,64,110,.12), 0 18px 42px rgba(166,64,110,.12);
}
.yarn-mark {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.yarn-mark::before,
.yarn-mark::after,
.yarn-mark i {
  content: "";
  position: absolute;
  border-radius: 999px;
}
.yarn-mark::before {
  inset: 5px;
  background:
    radial-gradient(circle at 35% 32%, #fff6a6 0 10%, transparent 11%),
    conic-gradient(from 20deg, #ff6fa3, #f7c85f, #73c888, #8c7cff, #ff6fa3);
  box-shadow: 0 14px 34px rgba(230,79,133,.28);
}
.yarn-mark::after {
  width: 34px;
  height: 34px;
  border: 5px solid rgba(255,255,255,.82);
  border-top-color: transparent;
  transform: rotate(-28deg);
}
.yarn-mark i {
  width: 17px;
  height: 17px;
  background: #2d8763;
  box-shadow: 18px 4px 0 #e64f85, 7px 21px 0 #f7c85f;
  opacity: .96;
}
.blomstergarn .demo-nav-links { background: rgba(255,255,255,.68); box-shadow: inset 0 0 0 1px rgba(166,64,110,.11); }
.blomstergarn .demo-nav-links a { color: rgba(45,34,40,.74); }
.yarn-contact {
  grid-template-columns: minmax(160px,.7fr) minmax(190px,.72fr) minmax(120px,.48fr) minmax(210px,1fr);
  background: rgba(255,248,241,.93);
}
.yarn-contact .top-contact-phone { background: linear-gradient(135deg, #e64f85, #f7a352); }
.yarn-contact .top-contact-instagram { background: rgba(45,135,99,.12); color: #285b45; font-weight: 950; }
.yarn-hero {
  position: relative;
  min-height: 82vh;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(310px,.42fr);
  align-items: end;
  gap: 1rem;
  padding: 7rem 4vw 4rem;
  overflow: hidden;
  color: #fffaf5;
  background:
    linear-gradient(90deg, rgba(40,31,36,.96) 0 38%, rgba(40,31,36,.66) 58%, rgba(40,31,36,.10)),
    var(--demo-image) center/cover no-repeat;
}
.yarn-hero::before {
  content: "";
  position: absolute;
  inset: 10% auto auto 50%;
  width: min(42vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 120deg, rgba(230,79,133,.45), rgba(247,200,95,.42), rgba(45,135,99,.40), rgba(125,162,255,.32), rgba(230,79,133,.45));
  filter: blur(28px);
  opacity: .62;
}
.yarn-hero-copy, .yarn-pinboard { position: relative; z-index: 1; }
.yarn-hero h1 { max-width: 980px; margin: 0 0 1rem; font-size: clamp(3.4rem, 7.3vw, 8rem); line-height: .88; letter-spacing: -.045em; }
.yarn-hero p { max-width: 660px; color: rgba(255,250,245,.82); font-size: 1.16rem; }
.yarn-pinboard { display: grid; gap: .75rem; padding: 1rem; border-radius: 18px; background: rgba(255,250,245,.12); border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.yarn-pinboard div { padding: .9rem; border-radius: 14px; background: rgba(255,255,255,.10); }
.yarn-pinboard span { display:block; color: rgba(255,250,245,.68); font-size:.82rem; font-weight:900; text-transform:uppercase; }
.yarn-pinboard strong { display:block; color:#fffaf5; font-size:1.02rem; }
.yarn-ribbon { display:flex; gap:.6rem; overflow:auto; padding:.9rem 4vw; background:#fff8f1; border-bottom:1px solid rgba(40,31,36,.10); }
.yarn-ribbon span { flex:0 0 auto; padding:.55rem .8rem; border-radius:999px; background:#fff; color:#684657; font-weight:900; box-shadow:0 12px 28px rgba(166,64,110,.08); }
.yarn-story { background: linear-gradient(135deg, #fff8f1, #fff0f6); }
.yarn-card-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:1rem; }
.yarn-card { min-height: 320px; display:flex; flex-direction:column; justify-content:flex-end; gap:.6rem; padding:1.1rem; border-radius:22px; color:#fffaf5; overflow:hidden; box-shadow:0 24px 60px rgba(104,70,87,.14); }
.yarn-card span { width:max-content; padding:.34rem .58rem; border-radius:999px; background:rgba(255,255,255,.18); font-size:.76rem; font-weight:950; text-transform:uppercase; }
.yarn-card h3 { margin:0; font-size:clamp(1.8rem,3vw,3.2rem); line-height:.92; }
.yarn-card p { margin:0; color:rgba(255,250,245,.82); }
.yarn-card.wide { grid-column: span 2; }
.bloom-card { background: linear-gradient(180deg, rgba(40,31,36,.04), rgba(40,31,36,.88)), url('/assets/florist-hero.png') center/cover no-repeat; }
.plant-card { background: radial-gradient(circle at top right, rgba(247,200,95,.42), transparent 44%), linear-gradient(145deg, #2d8763, #1f4f3d); }
.occasion-card { background: radial-gradient(circle at top left, rgba(255,213,231,.38), transparent 44%), linear-gradient(145deg, #68344f, #251921); }
.yarn-split { display:grid; grid-template-columns: minmax(0,.9fr) minmax(320px,.55fr); gap:1rem; background:#281f24; color:#fffaf5; }
.yarn-shop-window, .thread-wall { border-radius:22px; padding:1.2rem; background:rgba(255,250,245,.08); border:1px solid rgba(255,255,255,.12); }
.yarn-shop-window h2 { max-width:840px; margin:0 0 1rem; font-size:clamp(2.3rem,5vw,5.3rem); line-height:.9; }
.yarn-shop-window p { color:rgba(255,250,245,.76); }
.yarn-facts dt { color:rgba(255,250,245,.62); }
.yarn-facts dd { color:#fffaf5; }
.thread-wall { display:grid; grid-template-columns: repeat(3,1fr); align-content:end; gap:.7rem; min-height:420px; background: radial-gradient(circle at top, rgba(255,255,255,.10), transparent 48%), #34242c; }
.thread-wall span { min-height:105px; border-radius:999px 999px 28px 28px; background: var(--c); box-shadow: inset 0 -18px 26px rgba(40,31,36,.18), 0 18px 36px rgba(0,0,0,.16); }
.thread-wall strong, .thread-wall p { grid-column:1/-1; }
.thread-wall strong { font-size:clamp(1.8rem,3vw,3.4rem); line-height:.92; }
.thread-wall p { color:rgba(255,250,245,.72); margin:0; }
.yarn-interflora { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.58fr); gap:1rem; background:#fff8f1; }
.yarn-interflora .integration-card, .yarn-summary { background:#fff; box-shadow:0 22px 52px rgba(104,70,87,.10); }
.yarn-contact-panel { display:grid; grid-template-columns:minmax(0,.8fr) minmax(320px,.55fr); gap:1rem; background:linear-gradient(135deg,#fff0f6,#fff8f1); }
.yarn-contact-panel h2 { margin:0 0 1rem; font-size:clamp(2.2rem,5vw,5rem); line-height:.9; }
@media (max-width: 980px) { .yarn-hero, .yarn-split, .yarn-interflora, .yarn-contact-panel { grid-template-columns:1fr; } .yarn-card-grid { grid-template-columns:1fr; } .yarn-card.wide { grid-column:auto; } }
@media (max-width: 680px) { .yarn-nav { justify-content:center; } .yarn-nav .demo-nav-links { display:none; } .yarn-contact { grid-template-columns:1fr; } .yarn-contact .top-contact-instagram, .yarn-contact .top-contact-status { display:none; } .yarn-hero { min-height:auto; padding:2.2rem 5vw 1.5rem; background: linear-gradient(180deg, rgba(40,31,36,.44), rgba(40,31,36,.88) 58%, #281f24), var(--demo-image) 58% top/auto 55% no-repeat; } .yarn-hero h1 { font-size:clamp(2.35rem,12vw,3.2rem); } .yarn-pinboard { margin-top:1rem; } .thread-wall { min-height:320px; } .thread-wall span { min-height:78px; } }


/* Blomster og Garn wow polish 2026-05-15 */
.blomstergarn .demo-shell { background: linear-gradient(180deg, #fff8f1 0%, #fff0f6 48%, #fff8f1 100%); }
.yarn-hero { isolation: isolate; }
.yarn-hero::after {
  content:"";
  position:absolute;
  inset:auto -6vw -12vw auto;
  width:min(44vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255,255,255,.72) 0 7%, transparent 8%),
    conic-gradient(from 220deg, rgba(255,111,163,.78), rgba(247,200,95,.72), rgba(109,187,127,.72), rgba(125,162,255,.58), rgba(255,111,163,.78));
  filter: blur(2px);
  opacity:.72;
  z-index:0;
  animation: yarnGlowSpin 18s linear infinite;
}
@keyframes yarnGlowSpin { to { transform: rotate(360deg); } }
.yarn-hero-copy h1 {
  text-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.yarn-hero-copy .demo-kicker {
  display:inline-flex;
  width:max-content;
  padding:.48rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
}
.yarn-pinboard {
  transform: none;
}
.yarn-pinboard div:nth-child(2),
.yarn-pinboard div:nth-child(3) { transform: none; }
.yarn-ribbon-wow {
  position:relative;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.yarn-ribbon-wow span {
  border:1px solid rgba(230,79,133,.10);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.yarn-ribbon-wow span:hover { transform: translateY(-3px); box-shadow:0 18px 36px rgba(166,64,110,.14); }
.yarn-wow-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:#281f24;
  color:#fffaf5;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.yarn-wow-strip article {
  min-height:132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25rem;
  padding:1.1rem 4vw;
  border-right:1px solid rgba(255,255,255,.10);
  background: radial-gradient(circle at top right, rgba(230,79,133,.18), transparent 42%);
}
.yarn-wow-strip strong { font-size:clamp(1.55rem,2.7vw,2.8rem); line-height:.95; }
.yarn-wow-strip span { color:rgba(255,250,245,.68); font-weight:800; }
.yarn-card, .thread-wall, .yarn-shop-window, .yarn-interflora .integration-card, .yarn-summary, .yarn-contact-panel .integration-links {
  transition: transform .2s ease, box-shadow .2s ease;
}
.yarn-card:hover, .thread-wall:hover, .yarn-shop-window:hover, .yarn-interflora .integration-card:hover, .yarn-summary:hover {
  transform: translateY(-4px);
  box-shadow:0 30px 70px rgba(104,70,87,.20);
}
.yarn-moments {
  background:
    radial-gradient(circle at 8% 8%, rgba(247,200,95,.20), transparent 28%),
    radial-gradient(circle at 92% 20%, rgba(109,187,127,.18), transparent 30%),
    #fff8f1;
}
.moment-grid {
  display:grid;
  grid-template-columns: 1.15fr .92fr .92fr;
  gap:1rem;
}
.moment-card {
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.6rem;
  padding:1.15rem;
  border-radius:28px;
  color:#fffaf5;
  overflow:hidden;
  position:relative;
  box-shadow:0 26px 70px rgba(104,70,87,.15);
}
.moment-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(40,31,36,.04), rgba(40,31,36,.84)); }
.moment-card::after { content:""; position:absolute; width:190px; height:190px; border-radius:50%; right:-60px; top:-60px; background:rgba(255,255,255,.14); }
.moment-card > * { position:relative; z-index:1; }
.moment-card span { width:max-content; padding:.38rem .62rem; border-radius:999px; background:rgba(255,255,255,.18); font-size:.76rem; font-weight:950; text-transform:uppercase; }
.moment-card strong { max-width:540px; font-size:clamp(1.7rem,3vw,3.25rem); line-height:.94; }
.moment-card p { max-width:440px; margin:0; color:rgba(255,250,245,.78); }
.moment-card.spring { background:linear-gradient(145deg,#e64f85,#f7a352); }
.moment-card.yarn { background:linear-gradient(145deg,#7255d8,#e64f85); }
.moment-card.gift { background:linear-gradient(145deg,#2d8763,#6dbb7f); }
.blomstergarn .demo-footer {
  background:#281f24;
  color:#fffaf5;
  border-top:1px solid rgba(255,255,255,.12);
}
.blomstergarn .demo-footer span { color:rgba(255,250,245,.68); }
@media (max-width:980px) {
  .yarn-wow-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .moment-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .yarn-hero::after { width:72vw; right:-26vw; bottom:-22vw; opacity:.42; }
  .yarn-pinboard { transform:none; }
  .yarn-wow-strip { grid-template-columns:1fr; }
  .yarn-wow-strip article { min-height:96px; }
  .moment-card { min-height:270px; border-radius:22px; }
}
@media (prefers-reduced-motion: reduce) { .yarn-hero::after { animation:none; } }

/* Blomster og Garn mobile containment fix 2026-05-15 */
@media (max-width: 680px) {
  html,
  body,
  .blomstergarn .demo-shell {
    max-width: 100%;
    overflow-x: clip;
  }

  .blomstergarn .demo-shell,
  .yarn-hero,
  .yarn-hero-copy,
  .yarn-pinboard,
  .yarn-pinboard div,
  .yarn-card,
  .moment-card,
  .integration-card,
  .booking-summary,
  .yarn-contact-panel,
  .integration-links {
    min-width: 0;
  }

  .yarn-hero {
    width: 100%;
    padding: 1.55rem 5vw 1.35rem;
    gap: .9rem;
    background:
      linear-gradient(180deg, rgba(40,31,36,.54), rgba(40,31,36,.86) 54%, #281f24),
      var(--demo-image) 58% top/auto 50% no-repeat;
  }

  .yarn-hero-copy .demo-kicker {
    display: flex;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    font-size: .74rem;
    letter-spacing: .035em;
  }

  .yarn-hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 10.2vw, 2.72rem);
    line-height: .95;
    letter-spacing: -.04em;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .yarn-hero p {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: break-word;
  }

  .yarn-hero .choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }

  .yarn-hero .demo-button {
    width: 100%;
    min-width: 0;
    padding: .78rem .72rem;
    text-align: center;
    white-space: normal;
  }

  .yarn-pinboard {
    width: 100%;
    margin-top: .7rem;
    padding: .8rem;
    border-radius: 18px;
    overflow: hidden;
  }

  .yarn-pinboard div {
    width: 100%;
    padding: .82rem;
  }

  .yarn-pinboard strong,
  .booking-summary strong,
  .integration-links a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .yarn-pinboard strong {
    font-size: .96rem;
    line-height: 1.28;
  }

  .yarn-wow-strip,
  .moment-grid {
    grid-template-columns: 1fr;
  }

  .yarn-card,
  .thread-wall,
  .moment-card {
    max-width: 100%;
  }
}

/* 2 Anne Frisør — kundeklar demo 2026-05-16 */
:root{--twoanne-ink:#251516;--twoanne-wine:#7b2336;--twoanne-rose:#f5b8be;--twoanne-blush:#fff3f0;--twoanne-cream:#fffaf4;--twoanne-gold:#c78a42;--twoanne-line:rgba(80,31,36,.14)}
.twoanne-page{margin:0;background:radial-gradient(circle at 12% 4%,rgba(245,184,190,.42),transparent 30rem),linear-gradient(135deg,#fff8f3 0%,#fce9e1 42%,#f8d9d0 100%);color:var(--twoanne-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.twoanne-page a{color:inherit}.twoanne-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:18px 0 34px}.twoanne-nav{position:sticky;top:14px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 14px;border:1px solid rgba(255,255,255,.7);border-radius:28px;background:rgba(255,250,244,.82);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(98,35,45,.12)}.twoanne-logo{display:flex;align-items:center;gap:12px;text-decoration:none}.twoanne-logo-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:19px;background:linear-gradient(135deg,#38191d,#8f2f46 52%,#d28b61);color:#fff;font-weight:900;letter-spacing:-.08em;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px rgba(123,35,54,.24)}.twoanne-logo-text{display:flex;flex-direction:column;line-height:1}.twoanne-logo-text strong{font-size:1.08rem;letter-spacing:-.04em}.twoanne-logo-text em{font-size:.78rem;font-style:normal;color:#795056;margin-top:4px}.twoanne-nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.twoanne-nav-links a{padding:10px 12px;border-radius:999px;text-decoration:none;font-size:.9rem;color:#613941}.twoanne-nav-links a:hover{background:#fff;color:#251516}.twoanne-contactbar{display:grid;grid-template-columns:auto auto auto 1fr;gap:10px;align-items:center;margin:14px 0 18px;padding:10px;border-radius:24px;background:rgba(58,22,26,.92);color:#fff;box-shadow:0 22px 60px rgba(72,22,31,.18)}.twoanne-contactbar a,.twoanne-contactbar span{min-height:42px;display:flex;align-items:center;justify-content:center;border-radius:17px;padding:8px 14px;background:rgba(255,255,255,.09);text-decoration:none;font-size:.9rem}.twoanne-contactbar span{justify-content:space-between;gap:10px;background:#fff;color:#351a1e}.twoanne-contactbar em{font-style:normal;color:#87656a;font-size:.82rem}.twoanne-hero{display:grid;grid-template-columns:minmax(0,1.08fr) 420px;gap:24px;align-items:stretch;padding:48px;border-radius:42px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,246,240,.58)),radial-gradient(circle at 90% 0%,rgba(199,138,66,.22),transparent 25rem);box-shadow:0 30px 90px rgba(89,34,42,.13);overflow:hidden;position:relative}.twoanne-hero:before{content:"";position:absolute;right:-110px;top:-160px;width:410px;height:410px;border-radius:50%;background:repeating-conic-gradient(from 18deg,rgba(123,35,54,.08) 0 12deg,rgba(199,138,66,.1) 12deg 23deg);filter:blur(.2px)}.twoanne-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center}.twoanne-kicker,.twoanne-label{margin:0 0 12px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;font-size:.76rem;color:var(--twoanne-wine)}.twoanne-hero h1{max-width:760px;margin:0;font-size:clamp(3rem,7vw,6.4rem);line-height:.88;letter-spacing:-.075em}.twoanne-hero p{max-width:650px;margin:24px 0 0;font-size:1.15rem;line-height:1.65;color:#6d464c}.twoanne-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.twoanne-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:999px;background:#2f171a;color:#fff;text-decoration:none;font-weight:850;box-shadow:0 16px 36px rgba(47,23,26,.18)}.twoanne-button.light{background:#fff;color:#3b1c22;border:1px solid var(--twoanne-line);box-shadow:none}.twoanne-hero-card{position:relative;z-index:1;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:22px;border-radius:32px;background:linear-gradient(180deg,#3a1a20,#7b2336);color:#fff;box-shadow:0 24px 70px rgba(82,24,35,.26)}.twoanne-window{min-height:220px;border-radius:25px;padding:20px;background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),radial-gradient(circle at 30% 24%,rgba(245,184,190,.7),transparent 5rem);border:1px solid rgba(255,255,255,.24);position:relative;overflow:hidden}.twoanne-window:after{content:"";position:absolute;inset:auto -30px -55px auto;width:190px;height:190px;border-radius:50%;background:linear-gradient(135deg,#e8a2a9,#c78a42);opacity:.75}.twoanne-window span{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff;margin-right:6px;opacity:.82}.twoanne-window strong{display:block;margin-top:84px;font-size:2rem;letter-spacing:-.05em}.twoanne-window p{margin:5px 0 0;color:rgba(255,255,255,.78)}.twoanne-hero-card dl{display:grid;gap:10px;margin:0}.twoanne-hero-card div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(255,255,255,.17)}.twoanne-hero-card dt{color:rgba(255,255,255,.64);font-size:.82rem}.twoanne-hero-card dd{margin:0;text-align:right;font-weight:800}.twoanne-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.twoanne-proof div,.twoanne-card-grid article,.twoanne-note-card,.twoanne-contact-grid>*{padding:22px;border-radius:28px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 50px rgba(92,38,45,.08)}.twoanne-proof strong{display:block;font-size:1rem}.twoanne-proof span{display:block;margin-top:8px;color:#765359;line-height:1.45;font-size:.92rem}.twoanne-section{margin-top:18px;padding:38px;border-radius:38px;background:rgba(255,250,244,.68);border:1px solid rgba(255,255,255,.76)}.twoanne-heading{display:grid;grid-template-columns:1fr minmax(260px,.55fr);gap:24px;align-items:end;margin-bottom:22px}.twoanne-heading.compact{display:block;max-width:780px}.twoanne-heading h2,.twoanne-booking h2,.twoanne-salon h2{margin:0;font-size:clamp(2rem,4vw,3.35rem);line-height:.98;letter-spacing:-.055em}.twoanne-heading p:not(.twoanne-label),.twoanne-booking p,.twoanne-salon p{margin:0;color:#755259;line-height:1.65}.twoanne-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.twoanne-card-grid article{min-height:235px;display:flex;flex-direction:column}.twoanne-card-grid span{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:#391a1f;color:#fff;font-weight:900}.twoanne-card-grid h3{margin:28px 0 10px;font-size:1.35rem;letter-spacing:-.035em}.twoanne-card-grid p{margin:0;color:#755259;line-height:1.55}.twoanne-booking{display:grid;grid-template-columns:1fr 380px;gap:24px;background:linear-gradient(135deg,#32171c,#7b2336);color:#fff}.twoanne-booking .twoanne-label{color:#f7c6c9}.twoanne-booking p{color:rgba(255,255,255,.78)}.twoanne-call-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}.twoanne-call-stack a{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:24px;background:#fff;color:#2d1519;text-decoration:none}.twoanne-call-stack strong{font-size:1.55rem;letter-spacing:-.04em}.twoanne-call-stack span{color:#805b61}.twoanne-note-card{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);box-shadow:none}.twoanne-note-card ul{margin:0;padding-left:18px;color:rgba(255,255,255,.82);line-height:1.8}.twoanne-salon{display:grid;grid-template-columns:360px 1fr;gap:32px;align-items:center}.twoanne-salon-art{min-height:360px;border-radius:32px;background:linear-gradient(145deg,#fff,#ffe1db);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.85);box-shadow:0 20px 55px rgba(98,36,45,.1)}.twoanne-salon-art .comb{position:absolute;left:50px;bottom:55px;width:230px;height:38px;border-radius:19px;background:#32171c;transform:rotate(-18deg)}.twoanne-salon-art .comb:after{content:"";position:absolute;left:28px;right:20px;top:38px;height:72px;background:repeating-linear-gradient(90deg,#32171c 0 5px,transparent 5px 13px)}.twoanne-salon-art .strand{position:absolute;border:8px solid transparent;border-top-color:#bb7a85;border-radius:50%;opacity:.85}.twoanne-salon-art .one{width:230px;height:230px;left:60px;top:42px;transform:rotate(30deg)}.twoanne-salon-art .two{width:170px;height:170px;left:122px;top:78px;transform:rotate(80deg);border-top-color:#c78a42}.twoanne-salon-art .three{width:290px;height:290px;left:-70px;top:85px;transform:rotate(-18deg);border-top-color:#7b2336}.twoanne-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}.twoanne-facts div{padding:18px;border-radius:22px;background:#fff;border:1px solid var(--twoanne-line)}.twoanne-facts strong,.twoanne-facts span{display:block}.twoanne-facts span{margin-top:5px;color:#765359}.twoanne-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.twoanne-contact-grid>*{text-decoration:none}.twoanne-contact-grid span{display:block;color:#7f5d62;font-size:.88rem}.twoanne-contact-grid strong{display:block;margin-top:8px;font-size:1.05rem;letter-spacing:-.02em}.twoanne-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding:22px 6px;color:#6d4d52}.twoanne-footer strong{color:#32171c}@media (max-width:950px){.twoanne-contactbar,.twoanne-hero,.twoanne-booking,.twoanne-salon{grid-template-columns:1fr}.twoanne-contactbar{align-items:stretch}.twoanne-contactbar span{justify-content:center;text-align:center;flex-direction:column}.twoanne-proof,.twoanne-card-grid,.twoanne-contact-grid{grid-template-columns:repeat(2,1fr)}.twoanne-heading{grid-template-columns:1fr}.twoanne-hero{padding:34px}.twoanne-hero h1{font-size:clamp(2.55rem,13vw,4.7rem)}}@media (max-width:620px){.twoanne-shell{width:min(100% - 20px,1180px);padding-top:10px}.twoanne-nav{position:relative;top:0;border-radius:24px;align-items:flex-start;flex-direction:column}.twoanne-nav-links{justify-content:flex-start}.twoanne-nav-links a{padding:8px 10px;font-size:.86rem}.twoanne-contactbar{display:flex;flex-direction:column;border-radius:22px}.twoanne-hero,.twoanne-section{border-radius:28px;padding:24px}.twoanne-hero h1{letter-spacing:-.065em}.twoanne-hero p{font-size:1rem}.twoanne-proof,.twoanne-card-grid,.twoanne-contact-grid,.twoanne-facts,.twoanne-call-stack{grid-template-columns:1fr}.twoanne-card-grid article{min-height:auto}.twoanne-salon-art{min-height:260px}.twoanne-footer{font-size:.92rem}}