:root {
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ink: #241A14;
    --canvas: #EDE6DA;
    --canvas-alt: #E3D8C6;
    --auburn: #7A3B2E;
    --auburn-dark: #5C2C22;
    --blush: #C98A80;
    --gold: #A9813F;
    --deep: #17110D;
    --on-deep: #EDE6DA;
    --line: rgba(36, 26, 20, 0.18);
    --row: 28px;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #EDE6DA;
      --canvas: #17110D;
      --canvas-alt: #221811;
      --auburn: #D08D72;
      --auburn-dark: #B9765C;
      --blush: #E3B6AC;
      --gold: #CBA25A;
      --deep: #0C0907;
      --on-deep: #EDE6DA;
      --line: rgba(237, 230, 218, 0.18);
    }
  }
  :root[data-theme="dark"] {
    --ink: #EDE6DA;
    --canvas: #17110D;
    --canvas-alt: #221811;
    --auburn: #D08D72;
    --auburn-dark: #B9765C;
    --blush: #E3B6AC;
    --gold: #CBA25A;
    --deep: #0C0907;
    --on-deep: #EDE6DA;
    --line: rgba(237, 230, 218, 0.18);
  }

  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }

  * { box-sizing: border-box; }
  [hidden] { display: none !important; }

  html, body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  @media (scripting: enabled) {
    html { scroll-behavior: smooth; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

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

  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--auburn);
    outline-offset: 3px;
  }

  .wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Header ---------- */
  header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 40;
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    max-width: 1120px;
    margin: 0 auto;
  }
  .wordmark {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--ink);
  }
  nav.primary-nav {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  nav.primary-nav a.nav-link {
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--ink);
    opacity: 0.82;
    transition: opacity 0.15s ease;
  }
  nav.primary-nav a.nav-link:hover { opacity: 1; }
  .btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.3;
  }
  .btn-primary {
    background: var(--auburn);
    color: var(--on-deep);
  }
  .btn-primary:hover { background: var(--auburn-dark); }
  .btn-ghost {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
  }
  .btn-ghost:hover { background: var(--ink); color: var(--canvas); }
  .btn:disabled, .btn:disabled:hover { opacity: 0.4; cursor: default; background: transparent; color: var(--ink); }
  .btn-primary:disabled, .btn-primary:disabled:hover { background: var(--auburn); color: var(--on-deep); }
  .btn-small { padding: 7px 14px; font-size: 0.82rem; }
  .link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--auburn);
    text-decoration: underline;
    cursor: pointer;
  }

  .menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    margin: 5px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* ---------- Hero ---------- */
  .hero {
    padding: 72px 0 88px;
  }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  .hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 22px;
  }
  .hero p.lede {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 42ch;
    opacity: 0.86;
    margin: 0 0 32px;
  }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-art { width: 100%; }

  @keyframes riseIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero h1, .hero p.lede, .hero-cta, .hero-art {
    animation: riseIn 0.7s ease both;
  }
  .hero p.lede { animation-delay: 0.1s; }
  .hero-cta { animation-delay: 0.2s; }
  .hero-art { animation-delay: 0.15s; }

  /* ---------- Section shell ---------- */
  section { padding: 84px 0; }
  section.alt { background: var(--canvas-alt); }
  h2.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    margin: 0 0 14px;
  }
  p.section-intro {
    max-width: 56ch;
    opacity: 0.82;
    font-size: 1.02rem;
    margin: 0 0 48px;
  }

  .divider {
    width: 100%;
    height: 28px;
    margin: 0 auto;
    opacity: 0.55;
  }

  /* ---------- About ---------- */
  .about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: start;
  }
  .about-grid p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 18px;
  }
  .about-grid p:last-child { margin-bottom: 0; }
  .signature {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    margin-top: 22px;
  }

  /* ---------- Services ---------- */
  .service-group { margin-bottom: 44px; }
  .service-group:last-child { margin-bottom: 0; }
  .service-group h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    margin: 0 0 18px;
  }
  .service-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .service-row .name { font-size: 1rem; }
  .service-row .leader {
    flex: 1;
    border-bottom: 1px dotted var(--line);
    margin-bottom: 5px;
  }
  .service-row .price {
    font-variant-numeric: tabular-nums;
    font-size: 0.98rem;
    opacity: 0.85;
    white-space: nowrap;
  }

  /* ---------- Booking wizard ---------- */
  .bk {
    background: var(--canvas);
    border: 1px solid var(--line);
    scroll-margin-top: 90px;
  }
  .bk-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }
  .bk-step {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: none;
    border: 0;
    border-right: 1px solid var(--line);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    opacity: 0.45;
    text-align: left;
    cursor: default;
  }
  .bk-steps li:last-child .bk-step { border-right: 0; }
  .bk-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid currentColor;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.88rem;
  }
  .bk-step.is-current { opacity: 1; color: var(--auburn); box-shadow: inset 0 -2px 0 var(--auburn); }
  .bk-step.is-done { opacity: 0.85; }
  .bk-step.is-done .bk-num { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
  .bk-step:not(:disabled) { cursor: pointer; }
  .bk-step:not(:disabled):not(.is-current):hover { opacity: 1; }

  .bk-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .bk.is-done .bk-body { grid-template-columns: minmax(0, 1fr); }
  .bk.is-done .bk-summary { display: none; }
  .bk-main { padding: 28px 30px 26px; min-width: 0; }
  .bk-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    margin: 0 0 6px;
  }
  .bk-title:focus { outline: none; }
  .bk-sub { margin: 0 0 20px; font-size: 0.94rem; opacity: 0.75; }

  .svc-group + .svc-group { margin-top: 22px; }
  .svc-group h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    margin: 0 0 8px;
    opacity: 0.8;
  }
  .svc-opt {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: none;
    border: 1px solid var(--line);
    border-top-width: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.98rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .svc-group h4 + .svc-opt { border-top-width: 1px; }
  .svc-opt[aria-pressed="true"] { background: var(--canvas-alt); box-shadow: inset 3px 0 0 var(--auburn); }
  .svc-name small { display: block; font-size: 0.8rem; opacity: 0.65; margin-top: 1px; }
  .svc-price { font-variant-numeric: tabular-nums; font-size: 0.92rem; white-space: nowrap; opacity: 0.9; }

  .bk-stylists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .sty-opt {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .sty-opt[aria-pressed="true"] { border-color: var(--auburn); box-shadow: inset 0 0 0 1px var(--auburn); background: var(--canvas-alt); }
  .sty-name { display: block; font-weight: 600; }
  .sty-role { display: block; font-size: 0.86rem; opacity: 0.75; margin-top: 2px; }
  .sty-hours { display: block; font-size: 0.8rem; opacity: 0.6; margin-top: 6px; }
  .monogram {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--on-deep);
  }
  .monogram.sm { width: 42px; height: 42px; font-size: 1.05rem; }
  .mono-stack { flex: none; width: 42px; height: 42px; position: relative; }
  .mono-stack i {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--canvas);
  }
  .mono-stack i:nth-child(1) { left: 0; top: 2px; background: var(--auburn); }
  .mono-stack i:nth-child(2) { left: 16px; top: 2px; background: var(--gold); }
  .mono-stack i:nth-child(3) { left: 8px; top: 16px; background: var(--blush); }
  .bk-note { font-size: 0.9rem; opacity: 0.75; margin: 0 0 14px; }

  .bk-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
  }
  .cal-nav-btn {
    background: none;
    border: 1px solid var(--line);
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1;
  }
  .cal-nav-btn:hover:not(:disabled) { border-color: var(--auburn); color: var(--auburn); }
  .cal-nav-btn:disabled { opacity: 0.3; cursor: default; }
  .bk-cal-week, .bk-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }
  .bk-cal-week span {
    text-align: center;
    font-size: 0.72rem;
    opacity: 0.55;
    padding-bottom: 4px;
  }
  .bk-day {
    position: relative;
    aspect-ratio: 1 / 0.82;
    border: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .bk-day::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateX(-50%);
  }
  .bk-day.is-free::after { background: var(--auburn); }
  .bk-day:disabled { cursor: default; }
  .bk-day.is-past, .bk-day.is-closed { opacity: 0.32; border-color: transparent; background: transparent; }
  .bk-day.is-full { opacity: 0.55; background: transparent; }
  .bk-day.is-full span { text-decoration: line-through; text-decoration-thickness: 1px; }
  .bk-day.is-today span { text-decoration: underline; text-underline-offset: 3px; }
  .bk-day.is-today.is-full span { text-decoration: underline line-through; }
  @media (hover: hover) {
    .svc-opt:hover { background: var(--canvas-alt); }
    .sty-opt:hover { border-color: var(--auburn); }
    .bk-day.is-free:hover { border-color: var(--auburn); }
    .bk-chip:hover { border-color: var(--auburn); }
  }
  .bk-day.is-selected { background: var(--auburn); border-color: var(--auburn); color: var(--canvas); }
  .bk-day.is-selected::after { background: var(--canvas); }
  .bk-day.is-empty { visibility: hidden; }
  @keyframes calPulse { from { opacity: 0.35; } to { opacity: 0.7; } }
  .bk-cal.is-loading .bk-day:not(.is-empty) { animation: calPulse 0.9s ease-in-out infinite alternate; pointer-events: none; }
  .bk-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; opacity: 0.7; margin-top: 10px; }
  .bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .bk-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--auburn); display: inline-block; }
  .bk-legend s { text-decoration-thickness: 1px; }

  .bk-times { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
  .bk-times-day { font-weight: 600; margin: 0 0 4px; }
  .bk-times h4 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 0.98rem;
    margin: 14px 0 8px;
    opacity: 0.85;
  }
  .bk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .bk-chip {
    min-width: 70px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    border-radius: 2px;
  }
  .bk-chip[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
  .bk-empty { font-size: 0.94rem; opacity: 0.75; margin: 0; }

  .bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .bk-form .full { grid-column: 1 / -1; }
  .bk-form label, .adm-dialog label, .adm-block label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
  }
  .bk-form label span, .adm-dialog label span, .adm-block label span { opacity: 0.85; }
  .bk-form input, .bk-form textarea, .adm-dialog input, .adm-block select, .adm-date {
    font-family: var(--font-body);
    font-size: 0.98rem;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink);
    border-radius: 2px;
    width: 100%;
  }
  .bk-form textarea { resize: vertical; min-height: 70px; }
  .bk-form [aria-invalid="true"] { border-color: var(--auburn); box-shadow: inset 0 0 0 1px var(--auburn); }
  .bk-hint { font-size: 0.85rem; opacity: 0.7; margin: 0; }
  .bk-error { color: var(--auburn); font-size: 0.9rem; font-weight: 500; margin: 0; min-height: 1.3em; }
  .bk-submit { justify-self: start; }

  .bk-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .bk-nav .btn-primary { margin-left: auto; }

  .bk-summary {
    border-left: 1px solid var(--line);
    padding: 28px 24px;
    background: var(--canvas-alt);
  }
  .bk-summary h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    margin: 0 0 16px;
  }
  .bk-summary dl { margin: 0; display: grid; gap: 12px; }
  .bk-summary dt { font-size: 0.8rem; opacity: 0.6; }
  .bk-summary dd { margin: 2px 0 0; font-weight: 500; }
  .bk-summary dd small { display: block; font-weight: 400; font-size: 0.8rem; opacity: 0.7; }
  .bk-summary dd.is-empty { opacity: 0.4; font-weight: 400; }
  .bk-summary .bk-pay { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.82rem; opacity: 0.7; }

  .bk-done { padding: 8px 0 4px; }
  .bk-done-mark {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--auburn);
    color: var(--canvas);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
  }
  @keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .bk-done-mark { animation: popIn 0.35s ease both; }
  .bk-done-list { margin: 18px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
  .bk-done-list dt { opacity: 0.65; font-size: 0.92rem; }
  .bk-done-list dd { margin: 0; font-weight: 500; }
  .bk-done-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

  .bk-mine {
    margin-top: 28px;
    border: 1px solid var(--line);
    background: var(--canvas);
    padding: 22px 26px;
  }
  .bk-mine h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0 0 6px; }
  .bk-mine > p { font-size: 0.86rem; opacity: 0.7; margin: 0 0 8px; }
  .my-booking-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
  }
  .my-booking-row:last-child { border-bottom: none; }
  .my-booking-info { display: flex; flex-direction: column; gap: 2px; }
  .my-booking-when { font-weight: 600; }
  .my-booking-service { opacity: 0.75; font-size: 0.88rem; }
  .row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  .row-actions .confirm-q { font-size: 0.85rem; }
  .cancel-btn {
    flex: none;
    background: none;
    border: none;
    color: var(--auburn);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 0;
  }
  .cancel-btn:hover { color: var(--auburn-dark); }
  .cancel-btn:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
  .bk-demo { font-size: 0.84rem; opacity: 0.65; margin: 18px 0 0; }

  /* ---------- Admin ---------- */
  .admin { border-top: 1px solid var(--line); }
  .admin-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .admin-head h2 { margin-bottom: 4px; }
  .admin-sub { margin: 0; opacity: 0.75; }
  .admin-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .adm-date { width: auto; padding: 6px 8px; font-size: 0.9rem; }
  .adm-board-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--canvas); }
  .adm-grid {
    display: grid;
    grid-template-columns: 56px repeat(var(--cols), minmax(150px, 1fr));
    min-width: calc(56px + var(--cols) * 150px);
  }
  .adm-corner, .adm-colhead { border-bottom: 1px solid var(--line); }
  .adm-colhead {
    padding: 12px;
    border-left: 1px solid var(--line);
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .adm-colhead i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
  .adm-colhead small { font-weight: 400; opacity: 0.6; margin-left: auto; font-size: 0.78rem; }
  .adm-times, .adm-col { position: relative; height: calc(var(--rows) * var(--row)); }
  .adm-times span {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 0.72rem;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
  }
  .adm-times span:first-child { transform: none; }
  .adm-times span:last-child { transform: translateY(-100%); }
  .adm-col {
    border-left: 1px solid var(--line);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) * 2 - 1px), var(--line) calc(var(--row) * 2 - 1px), var(--line) calc(var(--row) * 2));
  }
  .adm-off {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px);
  }
  .adm-bk {
    position: absolute;
    left: 4px;
    right: 4px;
    padding: 3px 8px;
    border: 0;
    border-left: 3px solid var(--c);
    background: color-mix(in srgb, var(--c) 20%, var(--canvas));
    color: var(--ink);
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.76rem;
    line-height: 1.3;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
  }
  .adm-bk strong { display: block; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .adm-bk span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
  .adm-bk.is-block { --c: var(--ink); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 10%, var(--canvas)) 0 6px, var(--canvas) 6px 12px); }
  .adm-bk[aria-pressed="true"] { outline: 2px solid var(--c); outline-offset: 1px; z-index: 3; }
  .adm-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--auburn); z-index: 2; pointer-events: none; }
  .adm-closed { padding: 28px; margin: 0; opacity: 0.75; }
  .adm-detail {
    margin-top: 16px;
    border: 1px solid var(--line);
    padding: 18px 20px;
    background: var(--canvas-alt);
  }
  .adm-detail h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 10px; }
  .adm-detail dl { margin: 0 0 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 0.94rem; }
  .adm-detail dt { opacity: 0.65; }
  .adm-detail dd { margin: 0; overflow-wrap: anywhere; }
  .adm-legacy { margin-top: 16px; font-size: 0.92rem; }
  .adm-legacy h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 0 0 6px; }
  .adm-block {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .adm-block h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 0 0 4px; }
  .adm-block > p { margin: 0 0 14px; font-size: 0.9rem; opacity: 0.75; }
  .adm-block-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
  .adm-block-row label { min-width: 140px; }
  .adm-status { margin: 10px 0 0; font-size: 0.9rem; color: var(--auburn); min-height: 1.3em; }

  .adm-dialog {
    border: 1px solid var(--line);
    background: var(--canvas);
    color: var(--ink);
    padding: 28px;
    width: min(380px, calc(100vw - 32px));
  }
  .adm-dialog::backdrop { background: rgba(23, 17, 13, 0.5); }
  .adm-dialog h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin: 0 0 4px; }
  .adm-dialog form { display: grid; gap: 14px; }
  .adm-dialog form > p { margin: 0; font-size: 0.9rem; opacity: 0.75; }
  .adm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

  /* ---------- Signature colors ---------- */
  .swatches {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .swatch { text-align: center; width: 78px; }
  .swatch .strand {
    width: 30px;
    height: 150px;
    border-radius: 999px;
    margin: 0 auto 14px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  }
  .swatch .swatch-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.3;
  }

  /* ---------- Team ---------- */
  .team-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
  }
  .team-row:last-child { border-bottom: none; }
  .team-info .team-name { font-weight: 600; font-size: 1.02rem; }
  .team-info .team-role { opacity: 0.75; font-size: 0.92rem; margin-top: 2px; }

  /* ---------- Testimonials ---------- */
  .testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .testimonial .mark {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 3rem;
    line-height: 1;
    color: var(--auburn);
    margin-bottom: 4px;
  }
  .testimonial p.quote {
    font-size: 1.08rem;
    line-height: 1.6;
    margin: 0 0 14px;
  }
  .testimonial .who { font-size: 0.92rem; opacity: 0.75; }

  /* ---------- Location ---------- */
  .location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .hours-table { width: 100%; border-collapse: collapse; margin: 22px 0 28px; }
  .hours-table td { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
  .hours-table td:last-child { text-align: right; opacity: 0.85; }
  .contact-links { display: flex; gap: 12px; flex-wrap: wrap; }

  /* ---------- Footer ---------- */
  footer {
    background: var(--deep);
    color: var(--on-deep);
    padding: 56px 0 40px;
  }
  footer .wordmark { color: var(--on-deep); }
  .footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 36px;
  }
  .footer-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    opacity: 0.85;
    max-width: 34ch;
  }
  .footer-social { display: flex; gap: 18px; font-size: 0.92rem; opacity: 0.8; flex-wrap: wrap; }
  .footer-bottom {
    border-top: 1px solid rgba(237,230,218,0.16);
    padding-top: 20px;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
  }
  .footer-bottom > * { opacity: 0.65; }
  .footer-admin {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--on-deep);
    text-decoration: underline;
    cursor: pointer;
  }
  .footer-bottom a { color: var(--on-deep); }

  /* ---------- Mobile ---------- */
  @media (max-width: 900px) {
    .bk-body { grid-template-columns: minmax(0, 1fr); }
    .bk-summary { border-left: 0; border-top: 1px solid var(--line); }
  }
  @media (max-width: 760px) {
    nav.primary-nav {
      position: fixed;
      inset: 0;
      top: 66px;
      background: var(--canvas);
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 12px 24px 24px;
      transform: translateY(-8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    nav.primary-nav.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    nav.primary-nav a.nav-link {
      width: 100%;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      font-size: 1.05rem;
    }
    nav.primary-nav .btn { margin-top: 16px; }
    .menu-toggle { display: block; }

    .hero .wrap { grid-template-columns: 1fr; }
    .hero-art { order: -1; max-width: 240px; margin: 0 auto; }
    .about-grid, .location-grid, .testimonial-grid { grid-template-columns: 1fr; }
    .swatch .strand { height: 110px; width: 24px; }

    .wrap { padding: 0 16px; }
    .bk-steps { display: flex; }
    .bk-steps li { flex: 0 0 auto; }
    .bk-steps li:has(.is-current) { flex: 1 1 auto; }
    .bk-step { padding: 14px 12px; }
    .bk-step .bk-step-label { display: none; }
    .bk-step.is-current .bk-step-label { display: inline; }
    .bk-main { padding: 22px 16px 20px; }
    .bk-summary { padding: 20px 16px; }
    .bk-stylists { grid-template-columns: 1fr; }
    .bk-form { grid-template-columns: 1fr; }
    .bk-day { aspect-ratio: 1; font-size: 0.88rem; }
    .bk-mine { padding: 18px 16px; }
    .my-booking-row { flex-direction: column; align-items: flex-start; }
    .row-actions { justify-content: flex-start; }
    .admin-tools { width: 100%; }
  }

/* ===== Szál Szalon – bővítő réteg ===== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--cream:var(--canvas);--sy:0}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s ease both}::view-transition-new(root){animation:vtIn .45s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.pbar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--auburn),var(--blush));z-index:100}
/* felfedés */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*1s)}
.js [data-r].in{opacity:1;transform:none}
.js [data-r="l"]{transform:translateX(-34px)}.js [data-r="r"]{transform:translateX(34px)}.js [data-r="z"]{transform:scale(.92)}
.js [data-r].in{transform:none}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sw>span{display:inline-block;transform:translateY(105%);transition:transform .95s var(--ease);transition-delay:calc(var(--i)*.06s + var(--sd,0s))}
.in .sw>span,.sw.in>span{transform:none}
[data-split].in .sw>span{transform:none}
/* betöltő */
.ploader{position:fixed;inset:0;z-index:200;background:var(--deep);color:var(--on-deep);display:grid;place-items:center;transition:transform .8s var(--ease)}
.ploader.out{transform:translateY(-100%)}
.ploader div{text-align:center}
.ploader svg{width:120px;height:80px;margin:0 auto 10px;overflow:visible}
.ploader path{fill:none;stroke:var(--blush);stroke-width:2;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:draw 1s .1s var(--ease) forwards}
.ploader path:nth-child(2){stroke:var(--gold);animation-delay:.25s}.ploader path:nth-child(3){stroke:var(--auburn);animation-delay:.4s}
.ploader b{font:italic 500 1.9rem var(--font-display);letter-spacing:.02em;opacity:0;animation:fade .6s .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}
/* fejléc */
.site-head{transition:box-shadow .3s,background .3s}
.site-head.stuck{box-shadow:0 12px 30px -22px rgba(36,26,20,.55)}
.site-head .wordmark{display:inline-flex;align-items:center;gap:10px}
.site-head .wordmark svg{width:26px;height:26px}
nav.primary-nav a.nav-link{position:relative;padding:4px 0}
nav.primary-nav a.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--auburn);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
nav.primary-nav a.nav-link:hover::after,nav.primary-nav a.nav-link[aria-current]::after{transform:scaleX(1)}
nav.primary-nav a.nav-link[aria-current]{opacity:1;font-weight:500}
.btn{transition:background .25s,color .25s,transform .3s var(--ease),box-shadow .3s;transform:translate(var(--mx,0),var(--my,0))}
.btn-primary:hover{box-shadow:0 14px 26px -14px var(--auburn)}
.btn.lg{padding:15px 30px;font-size:1rem;border-radius:999px}
.btn .arr{display:inline-block;transition:transform .3s var(--ease);margin-left:8px}.btn:hover .arr{transform:translateX(5px)}
@media(max-width:860px){
 .menu-toggle{display:block}
 nav.primary-nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--canvas);border-bottom:1px solid var(--line);padding:6px 24px 18px;clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease);pointer-events:none}
 nav.primary-nav.open{clip-path:inset(0);pointer-events:auto}
 nav.primary-nav a.nav-link{padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
 nav.primary-nav .btn{margin-top:14px}
}
/* hero */
.phero{min-height:calc(100svh - 70px);display:flex;align-items:center;padding:56px 0 70px;position:relative;overflow:hidden}
.phero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:1}
.phero h1{font:500 clamp(2.7rem,6.4vw,5.4rem)/1.02 var(--font-display);letter-spacing:-.02em;margin:0 0 26px}
.phero h1 em{font-style:italic;color:var(--auburn)}
.phero .lede{font-size:1.15rem;max-width:44ch;opacity:.86;margin:0 0 34px}
.kicker{display:inline-flex;align-items:center;gap:10px;font:600 .74rem var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--auburn);margin-bottom:22px}
.kicker::before{content:"";width:34px;height:1.5px;background:currentColor}
.bgfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgfx i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 16s ease-in-out infinite}
.bgfx i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-10vw;background:color-mix(in srgb,var(--blush) 60%,transparent)}
.bgfx i:nth-child(2){width:38vw;height:38vw;right:-10vw;bottom:-14vw;background:color-mix(in srgb,var(--gold) 45%,transparent);animation-delay:-6s}
.bgfx i:nth-child(3){width:22vw;height:22vw;left:40vw;top:30%;background:color-mix(in srgb,var(--auburn) 22%,transparent);animation-delay:-11s}
@keyframes float{50%{transform:translate(4vw,3vw) scale(1.08)}}
.arch{position:relative;aspect-ratio:4/5;max-width:440px;margin:0 auto;width:100%}
.arch .shape{position:absolute;inset:0;border-radius:999px 999px 28px 28px;background:linear-gradient(165deg,var(--auburn) 0%,color-mix(in srgb,var(--blush) 80%,var(--auburn)) 55%,var(--gold) 120%);overflow:hidden;translate:0 var(--py,0);box-shadow:0 50px 80px -40px rgba(92,44,34,.7)}
.arch .shape::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 30% 12%,rgba(255,255,255,.35),transparent 70%)}
.arch .ring{position:absolute;inset:-22px;border-radius:999px 999px 38px 38px;border:1.5px solid var(--gold);opacity:.55;translate:0 calc(var(--py,0px)*.5)}
.arch svg.strands{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.arch svg.strands path{fill:none;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.6s .5s var(--ease) forwards}
.arch svg.strands path:nth-child(1){stroke:#fff;stroke-width:2.6}.arch svg.strands path:nth-child(2){stroke:var(--on-deep);stroke-width:1.8;opacity:.7;animation-delay:.8s}.arch svg.strands path:nth-child(3){stroke:var(--gold);stroke-width:1.5;animation-delay:1.1s}
.chip{position:absolute;z-index:3;background:var(--canvas);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:10px 14px;font-size:.82rem;box-shadow:0 18px 30px -18px rgba(36,26,20,.5);display:flex;align-items:center;gap:10px;animation:bob 6s ease-in-out infinite}
.chip b{display:block;font:600 .95rem var(--font-body)}
.chip small{opacity:.7}
.chip .dot{width:9px;height:9px;border-radius:50%;background:#58a86a;box-shadow:0 0 0 0 rgba(88,168,106,.6);animation:pulse 2s infinite}
.chip.c1{left:-8%;top:22%}.chip.c2{right:-6%;bottom:16%;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-9px)}}@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(88,168,106,0)}100%{box-shadow:0 0 0 0 rgba(88,168,106,0)}}
.badge{position:absolute;right:-4%;top:-3%;width:120px;height:120px;z-index:3;animation:spin 22s linear infinite}
.badge text{font:600 9.5px var(--font-body);letter-spacing:.1em;text-transform:uppercase;fill:var(--ink)}
.badge circle{fill:var(--canvas);stroke:var(--line)}
@keyframes spin{to{transform:rotate(360deg)}}
.scrollcue{position:absolute;left:50%;bottom:18px;width:22px;height:36px;border:1.5px solid var(--ink);border-radius:12px;opacity:.5;transform:translateX(-50%);z-index:2}
.scrollcue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:cue 1.8s infinite}
@keyframes cue{60%{transform:translateY(12px);opacity:0}100%{opacity:0}}
/* futószalag */
.marq{background:var(--deep);color:var(--on-deep);overflow:hidden;padding:22px 0;border-block:1px solid #000}
.marq .tr{display:flex;width:max-content;animation:marq 38s linear infinite}
.marq:hover .tr{animation-play-state:paused}
.marq span{font:italic 500 clamp(1.5rem,3vw,2.3rem) var(--font-display);padding:0 26px;display:flex;align-items:center;gap:52px;white-space:nowrap}
.marq span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--gold)}
@keyframes marq{to{transform:translateX(-50%)}}
/* szekciók */
.ps{padding:110px 0}
.ps h2.big{font:500 clamp(2rem,4.4vw,3.4rem)/1.08 var(--font-display);letter-spacing:-.015em;margin:0 0 18px}
.ps .intro{max-width:56ch;opacity:.82;font-size:1.05rem;margin:0 0 50px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--line)}
.stat{padding:38px 24px;text-align:center;border-left:1px solid var(--line)}.stat:first-child{border-left:0}
.stat b{display:block;font:500 clamp(2.4rem,4.6vw,3.8rem)/1 var(--font-display);color:var(--auburn)}
.stat span{display:block;margin-top:10px;font-size:.9rem;opacity:.75}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.quote-big{font:italic 500 clamp(1.5rem,2.6vw,2.15rem)/1.3 var(--font-display);margin:0 0 20px;position:relative;padding-left:0}
.quote-big{border-left:3px solid var(--gold);padding-left:22px}
.portrait{position:relative;aspect-ratio:1/1.1;border-radius:240px 240px 20px 20px;overflow:hidden;background:linear-gradient(160deg,var(--canvas-alt),var(--blush));display:grid;place-items:center}
.portrait .m{font:italic 500 11rem/1 var(--font-display);color:var(--auburn);opacity:.9;translate:0 var(--py,0)}
.portrait::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.55);border-radius:230px 230px 10px 10px}
/* szolgáltatás kártyák */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.scard{position:relative;display:flex;flex-direction:column;padding:30px 26px 26px;background:var(--canvas);border:1px solid var(--line);border-radius:20px;text-decoration:none;min-height:320px;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .3s var(--ease),box-shadow .4s,border-color .3s}
.scard::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--blush) 45%,transparent),transparent 70%);opacity:0;transition:opacity .35s}
.scard:hover{box-shadow:0 34px 50px -34px rgba(92,44,34,.55);border-color:var(--auburn)}.scard:hover::before{opacity:1}
.scard>*{position:relative}
.scard .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--canvas-alt);color:var(--auburn);margin-bottom:0;transition:transform .5s var(--ease),background .3s,color .3s}
.scard:hover .ic{transform:rotate(-8deg) scale(1.1);background:var(--auburn);color:var(--on-deep)}
.scard .ic svg{width:32px;height:32px}
.scard h3{font:500 1.6rem var(--font-display);margin:60px 0 6px}
.scard p{margin:0 0 16px;font-size:.92rem;opacity:.78}
.scard .from{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.92rem;border-top:1px solid var(--line);padding-top:14px}
.scard .from i{font-style:normal;transition:transform .3s var(--ease)}.scard:hover .from i{transform:translateX(6px)}
/* lépések */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;position:relative}
.steps4::before{content:"";position:absolute;left:0;right:0;top:27px;height:1.5px;background:linear-gradient(90deg,var(--auburn),var(--gold));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--ease)}
.steps4.in::before{transform:scaleX(1)}
.step{position:relative;padding:0 26px 0 0}
.step .n{width:56px;height:56px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--auburn);display:grid;place-items:center;font:500 1.3rem var(--font-display);color:var(--auburn);margin-bottom:22px;position:relative;z-index:1;transition:background .3s,color .3s}
.step:hover .n{background:var(--auburn);color:var(--on-deep)}
.step h3{font:500 1.35rem var(--font-display);margin:0 0 8px}.step p{margin:0;font-size:.93rem;opacity:.78}
/* színek */
.sw5{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding-top:10px}
.strand2{flex:1;text-align:center;transform-origin:50% 0;animation:sway 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
.strand2 i{display:block;width:44px;max-width:60%;height:220px;margin:0 auto 14px;border-radius:30px 30px 30px 30px/12px 12px 40px 40px;background:var(--c);box-shadow:inset -8px 0 14px -8px rgba(0,0,0,.35),inset 7px 0 12px -8px rgba(255,255,255,.4);transition:height .5s var(--ease)}
.strand2:hover i{height:270px}
.strand2 b{font:500 1.05rem var(--font-display)}
@keyframes sway{50%{transform:rotate(2.4deg)}0%,100%{transform:rotate(-2.4deg)}}
/* csapat */
.team3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--canvas);border:1px solid var(--line);border-radius:24px;padding:28px 28px 30px;text-align:center;transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .3s var(--ease),box-shadow .4s}
.tcard:hover{box-shadow:0 40px 60px -40px rgba(92,44,34,.5)}
.tcard .av{width:150px;height:150px;border-radius:50%;margin:6px auto 22px;display:grid;place-items:center;font:italic 500 4.4rem var(--font-display);color:#fff;position:relative}
.tcard .av::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed var(--gold);animation:spin 26s linear infinite}
.tcard h3{font:500 1.5rem var(--font-display);margin:0 0 4px}.tcard .role{font-size:.9rem;opacity:.75;margin:0 0 16px}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.tags span{font-size:.76rem;padding:5px 11px;border-radius:99px;background:var(--canvas-alt)}
/* vélemények */
.rev{position:relative;max-width:860px;margin:0 auto;text-align:center;min-height:230px}
.rev blockquote{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s var(--ease);pointer-events:none}
.rev blockquote.on{opacity:1;transform:none;pointer-events:auto}
.rev p{font:italic 500 clamp(1.4rem,2.6vw,2rem)/1.35 var(--font-display);margin:0 0 20px}
.rev cite{font-style:normal;font-weight:600;font-size:.9rem;letter-spacing:.04em}
.stars{color:var(--gold);letter-spacing:4px;margin-bottom:16px}
.rdots{display:flex;justify-content:center;gap:8px;margin-top:20px}.rdots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:all .3s}.rdots button.on{background:var(--auburn);width:26px;border-radius:6px}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.rgrid .tm{background:var(--canvas);border:1px solid var(--line);border-radius:20px;padding:30px}
.rgrid .tm p{font:italic 500 1.25rem/1.4 var(--font-display);margin:0 0 16px}.rgrid .tm b{font-size:.9rem}
/* CTA */
.cta{background:var(--deep);color:var(--on-deep);position:relative;overflow:hidden;text-align:center;padding:110px 0}
.cta h2{font:500 clamp(2.2rem,5vw,4rem)/1.05 var(--font-display);margin:0 0 20px;letter-spacing:-.02em}
.cta p{opacity:.8;max-width:48ch;margin:0 auto 34px}
.cta .btn-primary{background:var(--on-deep);color:var(--deep)}.cta .btn-primary:hover{background:var(--gold);color:#17110D}
.cta svg.bgl{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.cta svg.bgl path{fill:none;stroke:var(--blush);stroke-width:1.2;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 3.2s var(--ease)}
.cta.in svg.bgl path{stroke-dashoffset:0}.cta svg.bgl path:nth-child(2){stroke:var(--gold);transition-delay:.3s}
.cta .wrap{position:relative}
/* belső oldalak */
.pagehead{padding:96px 0 70px;position:relative;overflow:hidden}
.pagehead .wrap{position:relative;z-index:1}
.pagehead h1{font:500 clamp(2.6rem,6vw,4.8rem)/1.03 var(--font-display);letter-spacing:-.02em;margin:0 0 18px}
.pagehead p{max-width:52ch;font-size:1.1rem;opacity:.82;margin:0}
.crumbs{font-size:.82rem;opacity:.65;margin-bottom:22px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
/* árlista */
.pl{display:grid;grid-template-columns:230px 1fr;gap:60px;align-items:start}
.pl aside{position:sticky;top:110px}
.pl aside a{display:block;padding:11px 0 11px 18px;border-left:2px solid var(--line);text-decoration:none;font-size:.95rem;opacity:.7;transition:all .3s}
.pl aside a:hover,.pl aside a.on{opacity:1;border-color:var(--auburn);color:var(--auburn);padding-left:24px}
.pl .service-group{margin-bottom:60px}
.pl .service-group h3{font:500 2rem var(--font-display);margin:0 0 16px;display:flex;align-items:center;gap:14px}
.pl .service-group h3::after{content:"";flex:1;height:1px;background:var(--line)}
.pl .service-row{padding:14px 12px;border-radius:10px;transition:background .25s,transform .3s var(--ease)}
.pl .service-row:hover{background:var(--canvas-alt);transform:translateX(8px)}
.pl .service-row .price{font-weight:600;color:var(--auburn)}
.note{padding:20px 24px;border-left:3px solid var(--gold);background:var(--canvas-alt);border-radius:0 12px 12px 0;font-size:.95rem}
/* elérhetőség */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.hours{width:100%;border-collapse:collapse;margin:22px 0 28px}
.hours td{padding:13px 0;border-bottom:1px solid var(--line)}.hours td:last-child{text-align:right;font-weight:500}
.hours tr.today td{color:var(--auburn);font-weight:600}.hours tr.today td:first-child::after{content:" · ma";font-weight:400;font-size:.82rem}
.mapcard{position:relative;border-radius:24px;overflow:hidden;background:var(--canvas-alt);border:1px solid var(--line);min-height:380px}
.mapcard svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;left:52%;top:46%;width:42px;height:42px;margin:-42px 0 0 -21px;color:var(--auburn);animation:drop 1s .3s var(--ease) both}
.pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:60px;height:60px;margin-left:-30px;border-radius:50%;border:2px solid var(--auburn);opacity:0;animation:ripple 2.4s 1s infinite}
@keyframes drop{from{transform:translateY(-60px);opacity:0}}@keyframes ripple{0%{transform:scale(.2);opacity:.8}100%{transform:scale(1.2);opacity:0}}
.mapcard .lab{position:absolute;left:18px;bottom:18px;background:var(--canvas);border-radius:12px;padding:12px 16px;font-size:.88rem;box-shadow:0 14px 26px -16px rgba(0,0,0,.4)}
/* foglalás oldal csiszolása */
.bk{border-radius:20px;overflow:hidden;box-shadow:0 40px 70px -50px rgba(92,44,34,.6)}
.bk-panel:not([hidden]){animation:panelIn .55s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateX(24px)}}
.bk-step .bk-num{transition:background .3s,color .3s,transform .4s var(--ease)}
.bk-step:hover .bk-num{transform:scale(1.12)}
.bk-summary{background:linear-gradient(180deg,var(--canvas-alt),color-mix(in srgb,var(--blush) 25%,var(--canvas-alt)))}
/* lábléc */
.pfoot{background:var(--deep);color:var(--on-deep);padding:80px 0 30px}
.pfoot a{color:inherit}
.pfoot .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(237,230,218,.14)}
.pfoot .big{font:italic 500 clamp(2.4rem,4.6vw,3.6rem)/1 var(--font-display);margin:0 0 14px}
.pfoot h4{font:600 .74rem var(--font-body);letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin:0 0 16px}
.pfoot .fg a{display:block;text-decoration:none;opacity:.85;padding:5px 0;transition:opacity .2s,transform .3s var(--ease)}.pfoot .fg a:hover{opacity:1;transform:translateX(5px)}
.pfoot .fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:.84rem;opacity:.7}
.footer-admin{background:none;border:0;color:inherit;font:inherit;cursor:pointer;opacity:.8;text-decoration:underline;padding:0}
@media(max-width:980px){
 .phero .wrap,.split,.loc,.pl{grid-template-columns:1fr}
 .cards4,.steps4{grid-template-columns:repeat(2,1fr);gap:28px 18px}.steps4::before{display:none}
 .stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}
 .team3{grid-template-columns:1fr}.rgrid{grid-template-columns:1fr}
 .pl aside{display:none}.pfoot .fg{grid-template-columns:1fr 1fr}
 .arch{max-width:340px}.chip.c1{left:-2%}.chip.c2{right:-2%}
 .ps{padding:76px 0}.sw5{flex-wrap:wrap}.strand2{flex:0 0 30%}
}
@media(max-width:560px){.cards4,.steps4{grid-template-columns:1fr}.pfoot .fg{grid-template-columns:1fr}.phero{padding-top:30px}.scrollcue{display:none}.rev{min-height:300px}}

.hl{padding:0 0 30px;margin-top:-54px;position:relative;z-index:3}
.hlbox{display:grid;grid-template-columns:repeat(3,1fr);background:var(--canvas);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 70px -46px rgba(92,44,34,.55);overflow:hidden;position:relative}
.hlbox::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--auburn),var(--gold),var(--blush),var(--auburn));background-size:200% 100%;animation:shine 8s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.hli{display:flex;align-items:center;gap:16px;padding:30px 30px;border-left:1px solid var(--line);transition:background .35s}
.hli:first-child{border-left:0}.hli:hover{background:var(--canvas-alt)}
.hic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--canvas-alt);color:var(--auburn);transition:transform .5s var(--ease),background .3s,color .3s}
.hli:hover .hic{transform:rotate(-10deg) scale(1.1);background:var(--auburn);color:var(--on-deep)}
.hic svg{width:26px;height:26px}
.hli b{display:block;font:500 1.25rem var(--font-display)}.hli span:not(.hic){display:block;font-size:.88rem;opacity:.72}
@media(max-width:860px){.hlbox{grid-template-columns:1fr}.hli{border-left:0;border-top:1px solid var(--line);padding:20px 24px}.hli:first-child{border-top:0}.hl{margin-top:-30px}}