/* Gemensam stil för hela sajten (alla sidor). */
  /* Två salonger, två accenter. Vasastan = mahogny/beige, Hornstull = guld.
     Värdena är desamma som på vasastan.html och hornstull.html så att
     varje salong känns igen. Sektioner som växlar mellan salongerna
     sätter data-salon och läser --a / --a-text / --a-rgb därifrån. */
  :root {
    --ui:        #efe8dc;
    --bg:        #12100d;
    --bg-alt:    #150f0c;
    --card:      #1a1310;

    --vs:        #351819;   /* knappyta, varmvit text 13.3:1 */
    --vs-hover:  #5B3530;
    --vs-edge:   #4A2926;
    --vs-text:   #A89C8C;   /* etiketter på mörk botten */
    --vs-rgb:    74, 41, 38;

    --hs:        #C9A24A;   /* knappyta, mörk text 7.9:1 */
    --hs-hover:  #E2C07A;
    --hs-soft:   #D0AE62;
    --hs-rgb:    201, 162, 74;
    --on-hs:     #12100d;

    --star-gold: #c9a24a;

    /* Textfärger som sektioner med ljus bakgrund byter ut (.sec--light). */
    --tx: #efe8dc; --tx-soft: rgba(239,232,220,0.72); --tx-dim: rgba(239,232,220,0.5); --tx-faint: rgba(239,232,220,0.42);
    --chip-bg: rgba(239,232,220,0.06); --chip-line: rgba(239,232,220,0.16);
  }
  [data-salon="vasastan"]  { --a: var(--vs-edge); --a-text: var(--vs-text); --a-rgb: var(--vs-rgb); }
  [data-salon="hornstull"] { --a: var(--hs);      --a-text: var(--hs);      --a-rgb: var(--hs-rgb); }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scrollbar-color: #4A2926 #12100d; scrollbar-width: thin; }
  body { margin: 0; background: var(--bg); overflow-x: hidden; }
  a { color: var(--ui); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  button { font-family: inherit; }

  .page { font-family: 'Manrope', sans-serif; font-weight: 500; background: var(--bg); color: var(--ui); width: 100%; }
  .display { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.015em; margin: 0; }
  .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--a-text, var(--vs-text)); }
  .wrap { max-width: 1200px; margin: 0 auto; }
  section[id] { scroll-margin-top: 96px; }

  /* Knappar: bara bakgrundsfärgen ändras, aldrig layouten. */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px;
         font-size: 13px; font-weight: 700; letter-spacing: 0.06em; border-radius: 2px; white-space: nowrap;
         border: 1px solid transparent; cursor: pointer;
         transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
  .btn, .btn:hover, .btn:focus, .btn:active { text-decoration: none; }
  .btn--vs { background: var(--vs); color: var(--ui); border-color: var(--vs-edge); }
  .btn--vs:hover { background: var(--vs-hover); border-color: var(--vs-hover); }
  .btn--hs { background: var(--hs); color: var(--on-hs); border-color: var(--hs); }
  .btn--hs:hover { background: var(--hs-soft); border-color: var(--hs-soft); }
  .btn--ghost { border-color: rgba(239,232,220,0.4); color: var(--ui); background: transparent; }
  .btn--ghost:hover { background: rgba(239,232,220,0.08); border-color: rgba(239,232,220,0.65); }
  .btn--sm { padding: 11px 18px; font-size: 12px; }
  .btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--ui); outline-offset: 3px; }

  /* Hero */
  .curtain { position: relative; }
  .hero { position: sticky; top: 85px; z-index: 0; min-height: calc(100vh - 85px); display: flex; align-items: flex-end; padding: 140px 48px 110px; overflow: hidden; }
  .hero-inner { width: 100%; }
  .hero-bg { position: absolute; inset: -4% 0; will-change: transform; background: linear-gradient(180deg, rgba(18,16,13,0.55) 0%, rgba(18,16,13,0.72) 55%, #12100d 100%), var(--hero-img, url('uploads/heronew.jpg')); background-color: #1a1310; background-size: cover; background-position: center 30%; }
  .hero-inner { position: relative; z-index: 1; will-change: transform, opacity; }
  .hero h1 { font-weight: 700; font-size: clamp(52px, 8vw, 108px); line-height: 1.02; letter-spacing: 0.02em; max-width: 1000px; }
  .hero p.lead { font-size: 20px; line-height: 1.6; color: rgba(239,232,220,0.78); max-width: 560px; margin: 24px 0 0; }

  .salon-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .salon-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid rgba(var(--a-rgb),0.45); border-radius: 2px; overflow: hidden; }
  .salon-card .media { height: 220px; background-color: var(--card); background-size: cover; background-position: center; }
  .salon-card .body { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 30px; flex: 1; }
  .salon-card h2 { font-weight: 700; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.08; }
  .salon-card dl { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; line-height: 1.6; color: rgba(239,232,220,0.75); }
  .salon-card dt { color: var(--ui); font-weight: 600; }
  .salon-card dd { margin: 0; }
  .salon-card .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; }
  .salon-card .actions .btn { flex: 1 1 140px; }

  /* Sektioner */
  .sec { padding: 110px 48px; }
  .sec--alt { background: var(--bg-alt); border-top: 1px solid rgba(var(--hs-rgb),0.12); border-bottom: 1px solid rgba(var(--hs-rgb),0.12); }
  .sec-head { text-align: center; margin-bottom: 44px; }
  .sec-head h2 { font-weight: 600; font-size: clamp(32px, 4vw, 48px); margin-top: 10px; line-height: 1.1; }
  .sec-head p { max-width: 540px; margin: 14px auto 0; font-size: 16px; line-height: 1.7; color: rgba(239,232,220,0.68); }


  /* Historia: text till vänster, rum med roterande märke till höger och en
     tidslinje som ritas upp när den kommer i bild. */
  .hist { position: relative; z-index: 2; box-shadow: 0 -40px 80px rgba(0,0,0,0.55); padding: 130px 48px 120px; background: radial-gradient(70% 55% at 88% 8%, rgba(74,41,38,0.34) 0%, rgba(74,41,38,0) 70%), var(--bg); border-top: 1px solid rgba(var(--hs-rgb),0.12); overflow: hidden; }
  .hist-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
  .hist-copy { display: flex; flex-direction: column; gap: 26px; max-width: 560px; }
  .hist-copy h2 { font-weight: 700; font-size: clamp(46px, 6vw, 86px); line-height: 1.02; letter-spacing: 0.01em; }
  .mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .mask > span { display: block; transform: translateY(108%); transition: transform 1.1s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--d, 0) * 130ms + 100ms); }
  .hist-copy h2.in .mask > span { transform: none; }
  .hist-copy h2[data-reveal] { opacity: 1; transform: none; }
  .hist-frame[data-reveal] { opacity: 1; transform: none; }
  .hist-lead { margin: 0; font-size: 21px; line-height: 1.65; color: var(--ui); font-weight: 500; }
  .hist-body { margin: 0; font-size: 16px; line-height: 1.8; color: rgba(239,232,220,0.68); }
  .hist-rule { width: 56px; height: 1px; background: var(--hs); transform-origin: left; }

  .hist-fig { position: relative; margin: 0; }
  .hist-frame { position: relative; }
  .hist-frame::before { content: ''; position: absolute; inset: 20px -20px -20px 20px; border: 1px solid rgba(var(--hs-rgb),0.42); pointer-events: none; transition: inset 1.2s cubic-bezier(0.22,1,0.36,1) 0.5s; }
  .hist-photo { position: relative; aspect-ratio: 4 / 3.15; overflow: hidden; background: var(--card); clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(0.22,1,0.36,1) 0.15s; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
  .hist-frame.in .hist-photo { clip-path: inset(0 0 0 0); }
  .hist-photo img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; will-change: transform; filter: saturate(1.02) contrast(1.02); }
  .hist-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,13,0) 55%, rgba(18,16,13,0.45) 100%); pointer-events: none; }
  .hist-cap { margin-top: 40px; font-size: 13px; letter-spacing: 0.03em; color: rgba(239,232,220,0.55); }

  .hist-badge { position: absolute; top: -66px; left: -66px; z-index: 2; width: 168px; height: 168px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px rgba(var(--hs-rgb),0.45), 0 12px 40px rgba(0,0,0,0.55); }
  .hist-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hist-badge .ring { transform-origin: 100px 100px; animation: histSpin 38s linear infinite; }
  .hist-badge text { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.2em; fill: var(--hs); text-transform: uppercase; }
  .hist-badge img { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%; object-fit: contain; }
  @keyframes histSpin { to { transform: rotate(360deg); } }

  .hist-time { position: relative; margin-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: repeat(3, 1fr); }
  .hist-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(239,232,220,0.55); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(0.22,1,0.36,1) 0.1s; }
  .hist-time.in .hist-line { transform: none; }
  .hist-col { position: relative; padding: 38px 36px 6px 0; opacity: 0; transform: translateY(18px); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--i) * 220ms + 350ms); }
  .hist-col + .hist-col { padding-left: 36px; border-left: 1px solid rgba(239,232,220,0.14); }
  .hist-col::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--hs); transition: background-color 0.5s ease calc(var(--i) * 220ms + 700ms), box-shadow 0.8s ease calc(var(--i) * 220ms + 700ms); }
  .hist-col + .hist-col::before { left: -5px; }
  .hist-time.in .hist-col { opacity: 1; transform: none; }
  .hist-time.in .hist-col::before { background: var(--hs); box-shadow: 0 0 0 5px rgba(var(--hs-rgb),0.16); }
  .hist-col b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(38px, 4.4vw, 60px); line-height: 1; letter-spacing: 0.01em; color: var(--hs); margin-bottom: 14px; font-weight: 700; }
  .hist-col p { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(239,232,220,0.68); max-width: 320px; }
  @media (prefers-reduced-motion: reduce) {
    .mask > span, .hist-line, .hist-col { transition: none; transform: none; opacity: 1; }
    .hist-photo { clip-path: none; transition: none; }
    .hist-badge .ring { animation: none; }
  }

  /* Scroll-effekter */
  .salon-card .media { position: relative; overflow: hidden; }
  .media-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.2); transition: transform 1.8s cubic-bezier(0.22,1,0.36,1) 0.1s; }
  .salon-card.in .media-img { transform: scale(1); }
  .salon-card.in:hover .media-img { transform: scale(1.045); transition-duration: 1.2s; transition-delay: 0s; }
  .salon-card + .salon-card { transition-delay: 0.18s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .media-img { transform: none; transition: none; } .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

  /* Rullningsstyrda tillägg: dynamiska kort (.rv) stiger in i tur och
     ordning, rubriker avtäcks ord för ord, och dekor ritas upp. */
  .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1), border-color 0.5s ease, box-shadow 0.6s ease; transition-delay: calc(var(--n, 0) * 90ms); }
  .rv.in { opacity: 1; transform: none; }
  .svc-card.rv.in:hover, .svc-card.rv.in:focus-visible { transform: translateY(-5px); transition-delay: 0s; }
  .svc-card.rv.in:hover { transition-duration: 0.6s; }
  .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .w > span { display: inline-block; transform: translateY(112%); transition: transform 1s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--wi, 0) * 70ms + 80ms); }
  .in[data-split] .w > span, .in [data-split] .w > span { transform: none; }
  [data-split][data-reveal] { opacity: 1; transform: none; }
  .sec-head .eyebrow { display: inline-flex; align-items: center; gap: 0; transition: gap 1s cubic-bezier(0.22,1,0.36,1); }
  .sec-head .eyebrow::before, .sec-head .eyebrow::after { content: ''; height: 1px; width: 0; background: currentColor; opacity: 0.6; transition: width 1.1s cubic-bezier(0.22,1,0.36,1) 0.2s; }
  .sec-head.in .eyebrow { gap: 16px; }
  .sec-head.in .eyebrow::before, .sec-head.in .eyebrow::after { width: 34px; }
  .find-card iframe { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(0.22,1,0.36,1) 0.35s; }
  .find-card.in iframe { clip-path: inset(0 0 0 0); }
  .final { position: relative; overflow: hidden; }
  .final::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); height: min(520px, 80vw); margin: -260px 0 0 -450px; background: radial-gradient(closest-side, rgba(var(--hs-rgb),0.13), rgba(74,41,38,0.18) 55%, transparent 100%); transform: translate3d(0, var(--fy, 0px), 0); pointer-events: none; will-change: transform; }
  .final > * { position: relative; }
  .foot-word[data-reveal] { opacity: 1; transform: none; }
  .foot-word span { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(0.22,1,0.36,1); }
  .foot-word.in span { clip-path: inset(0 0 0 0); }
  @media (prefers-reduced-motion: reduce) {
    .w > span { transform: none; transition: none; }
    .sec-head .eyebrow::before, .sec-head .eyebrow::after { width: 34px; transition: none; }
    .find-card iframe, .foot-word span { clip-path: none; transition: none; }
    .final::before { transform: none; }
  }

  /* Salongsväxlare (tabs) */
  .tabs { position: relative; display: flex; justify-content: center; gap: 0; margin: 0 auto 48px; width: fit-content; max-width: 100%; padding: 5px; border: 1px solid rgba(239,232,220,0.2); border-radius: 999px; background: rgba(239,232,220,0.03); }
  .tab { position: relative; z-index: 1; appearance: none; background: transparent; color: rgba(239,232,220,0.66); border: 0; border-radius: 999px; padding: 13px 30px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
         display: inline-flex; align-items: center; gap: 10px; transition: color 0.35s ease; }
  .tab::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--a); border: 1px solid rgba(239,232,220,0.35); flex: none; }
  .tab[data-salon="hornstull"]::before { background: var(--hs); border-color: var(--hs); }
  .tab:hover { color: var(--ui); }
  .tab[aria-selected="true"] { color: var(--ui); }
  .tab[data-salon="hornstull"][aria-selected="true"] { color: var(--hs); }
  .tab-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: rgba(74,41,38,0.7); box-shadow: inset 0 0 0 1px rgba(168,156,140,0.35);
              transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), width 0.55s cubic-bezier(0.22,1,0.36,1), background-color 0.4s ease, box-shadow 0.4s ease; }
  .tabs[data-active="hornstull"] .tab-pill { background: rgba(var(--hs-rgb),0.16); box-shadow: inset 0 0 0 1px rgba(var(--hs-rgb),0.6); }

  /* Behandlingar */
  .svc-wrap { max-width: 1040px; margin: 0 auto; }
  /* Utvalda behandlingar: kort med stor siffra, pris och bokningslänk. */
  .svc-feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .svc-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 26px; background: linear-gradient(180deg, rgba(239,232,220,0.035) 0%, rgba(239,232,220,0.01) 100%), var(--bg);
              border: 1px solid rgba(var(--a-rgb),0.4); border-radius: 2px; color: var(--ui); overflow: hidden;
              transition: border-color 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s ease; }
  .svc-card, .svc-card:hover { text-decoration: none; }
  .svc-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--a-text); transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .svc-card:hover, .svc-card:focus-visible { border-color: rgba(var(--a-rgb),0.9); transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0,0,0,0.45); }
  .svc-card:hover::after, .svc-card:focus-visible::after { transform: none; }
  .svc-card:focus-visible { outline: 2px solid var(--ui); outline-offset: 3px; }
  .svc-card .num { position: absolute; top: 12px; right: 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 74px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--a-rgb),0.55); pointer-events: none; transition: -webkit-text-stroke-color 0.5s ease; }
  .svc-card:hover .num { -webkit-text-stroke-color: var(--a-text); }
  .svc-card .tag { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bg); background: var(--a-text); padding: 5px 10px; border-radius: 2px; }
  .svc-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; }
  .svc-card .svc-name { font-size: 26px; line-height: 1.05; max-width: 80%; margin-top: 6px; }
  .svc-card .svc-desc { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(239,232,220,0.62); max-width: none; }
  .svc-card .foot { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(239,232,220,0.1); }
  .svc-card .dur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(239,232,220,0.6); }
  .svc-card .dur::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(currentColor, currentColor) 50% 15% / 1.5px 4px no-repeat; }
  .svc-card .price { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 0.01em; color: var(--ui); white-space: nowrap; }
  .svc-card .price s { font-size: 20px; }
  .svc-card .go { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-text); display: inline-flex; align-items: center; gap: 8px; }
  .svc-card .go::after { content: '→'; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
  .svc-card:hover .go::after { transform: translateX(5px); }
  /* Signaturbehandlingen: bred rad längst ner med varmare yta. */
  .svc-card--sig { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 40px; padding: 36px 40px;
                   background: linear-gradient(110deg, rgba(var(--a-rgb),0.28) 0%, rgba(var(--a-rgb),0.06) 55%, rgba(var(--a-rgb),0) 100%), var(--bg); border-color: rgba(var(--a-rgb),0.7); }
  .svc-card--sig .sig-main { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
  .svc-card--sig .svc-name { font-size: clamp(30px, 3.4vw, 44px); max-width: none; margin-top: 4px; }
  .svc-card--sig .svc-desc { max-width: 520px; font-size: 15px; }
  .svc-card--sig .num { display: none; }
  .svc-card--sig .foot { margin: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid rgba(239,232,220,0.16); flex-direction: column; align-items: flex-start; gap: 14px; min-width: 190px; }
  .svc-card--sig .price { font-size: 52px; }

  /* Alla behandlingar: menyrader med prickad ledlinje mellan namn och pris. */
  .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px 64px; }
  .cat-title { margin: 44px 0 10px; display: flex; align-items: center; gap: 14px; }
  .cat-title::after { content: ''; flex: 1; height: 1px; background: rgba(var(--a-rgb),0.4); }
  .svc-line { padding: 13px 0; }
  .svc-line .top { display: flex; align-items: baseline; gap: 12px; }
  .svc-line .nm { font-size: 17px; font-weight: 600; color: var(--ui); }
  .svc-line .lead { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(239,232,220,0.3); transform: translateY(-4px); }
  .svc-line .mt { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; font-size: 13px; color: rgba(239,232,220,0.55); }
  .svc-line .mt .price { font-size: 17px; font-weight: 700; color: var(--ui); }
  .svc-line .d { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: rgba(239,232,220,0.5); max-width: 460px; }
  .svc-more { display: block; margin: 44px auto 0; background: none; border: 0; border-bottom: 1px solid var(--a-text); color: var(--ui); font-size: 13px; letter-spacing: 0.06em; padding: 0 0 4px; cursor: pointer; }
  .svc-more:hover { color: var(--a-text); }
  #all-services { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.7s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease; }
  .svc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 44px; }
  .svc-foot p { margin: 0; font-size: 13px; color: rgba(239,232,220,0.55); }
  .campaign-note { margin: 0 0 24px; font-size: 13px; letter-spacing: 0.04em; color: var(--a-text); text-align: center; }

  /* Galleri: sektionen är hög och sticky-ytan står still medan scrollen
     driver bandet i sidled (se initGallery). Bilderna sitter i
     passepartout med olika höjd och förskjutning, som foton på en vägg. */
  .gal { position: relative; background: linear-gradient(180deg, var(--bg) 0%, #1a0f10 50%, var(--bg) 100%); border-top: 1px solid rgba(var(--hs-rgb),0.12); }
  .gal-sticky { position: sticky; top: 84px; height: calc(100vh - 84px); min-height: 520px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
  .gal-track { display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); padding: 0 clamp(24px, 6vw, 96px); width: max-content; will-change: transform; }
  .gal-intro { flex: none; width: min(380px, 78vw); display: flex; flex-direction: column; gap: 18px; padding-right: 24px; }
  .gal-intro h2 { font-weight: 600; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.04; }
  .gal-intro p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(239,232,220,0.72); }
  .gal-hint { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs); margin-top: 6px; }
  .gal-hint i { display: block; width: 44px; height: 1px; background: currentColor; position: relative; }
  .gal-hint i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
  .gal-fig { flex: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 14px; transform: translateY(var(--dy, 0px)); }
  .gal-frame { background: #efe8dc; padding: clamp(8px, 0.9vw, 13px); box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--hs-rgb),0.25); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s ease; }
  .gal-frame img { display: block; height: var(--h, 48vh); width: auto; max-width: none; background: var(--card); }
  .gal-fig:hover .gal-frame, .gal-fig:focus-visible .gal-frame { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--hs-rgb),0.6); }
  .gal-fig:focus-visible { outline: 2px solid var(--ui); outline-offset: 6px; }
  .gal-cap { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs); }
  .gal-cap span:last-child { color: rgba(239,232,220,0.6); letter-spacing: 0.08em; }
  .gal-end { flex: none; width: clamp(24px, 6vw, 96px); }
  .gal-progress { position: absolute; left: clamp(24px, 6vw, 96px); right: clamp(24px, 6vw, 96px); bottom: 28px; height: 1px; background: rgba(239,232,220,0.18); }
  .gal-progress i { display: block; height: 100%; width: 100%; background: var(--hs); transform: scaleX(0); transform-origin: left; }
  /* Utan rörelse: ingen sticky, bandet blir ett vanligt sidled-scrollbart fält. */
  .gal.is-static .gal-sticky { position: relative; top: 0; height: auto; min-height: 0; overflow-x: auto; padding: 72px 0 64px; }
  .gal.is-static .gal-progress { display: none; }
  #lightbox { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(10,8,7,0.94); align-items: center; justify-content: center; padding: 48px; }
  #lightbox button { position: absolute; background: none; border: 0; color: var(--ui); cursor: pointer; }
  #lb-image { width: 100%; max-width: 1000px; height: 75vh; background-color: var(--card); background-size: contain; background-repeat: no-repeat; background-position: center; }

  /* Omdömen */
  #ratings-summary { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 36px; }
  .src-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 210px; padding: 20px 26px; background: var(--card); border: 1px solid rgba(var(--a-rgb),0.35); }
  #reviews-list { display: flex; flex-direction: column; gap: 24px; }
  .src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
  .review-card { background: var(--card); border: 1px solid rgba(var(--a-rgb),0.35); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.4s ease; }
  .review-card:hover { border-color: rgba(var(--a-rgb),0.8); }
  #reviews-cta-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; }
  @keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: .75 } }
  .skeleton { background: var(--card); border: 1px solid rgba(var(--a-rgb),0.25); min-height: 170px; animation: pulse 1.6s ease-in-out infinite; }

  /* Hitta hit */
  .find-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .find-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid rgba(var(--a-rgb),0.45); border-radius: 2px; overflow: hidden; }
  .find-card .info { padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 14px; }
  .find-card h3 { font-weight: 700; font-size: 30px; line-height: 1.1; }
  .find-card dl { margin: 0; display: grid; gap: 14px; font-size: 15px; line-height: 1.6; color: rgba(239,232,220,0.75); }
  .find-card dt { color: var(--ui); font-weight: 600; }
  .find-card dd { margin: 0; }
  .find-card iframe { width: 100%; height: 300px; border: 0; display: block; filter: grayscale(1) invert(0.92) contrast(0.9); }
  .find-card .actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
  .notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 40px; font-size: 14px; line-height: 1.7; color: rgba(239,232,220,0.68); }
  .notes strong { display: block; color: var(--ui); margin-bottom: 4px; }

  /* Avslutande CTA + footer */
  .final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .final h2 { font-weight: 700; font-size: clamp(36px, 5vw, 58px); max-width: 760px; }
  .final .pair { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
  .final .pair .btn { padding: 18px 40px; font-size: 14px; }
  .final .phones { font-size: 14px; color: rgba(239,232,220,0.6); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; }
  footer.foot { background: #0e0c0a; border-top: 1px solid rgba(var(--hs-rgb),0.15); }
  .foot-grid { padding: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; border-bottom: 1px solid rgba(var(--hs-rgb),0.15); }
  .foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(239,232,220,0.7); }
  .foot-col h4 { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vs-text); }
  .foot-col a { color: rgba(239,232,220,0.7); }
  .foot-word { padding: 8px 32px 24px; overflow: hidden; }
  .foot-word span { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(34px, 6.4vw, 88px); line-height: 0.9; color: rgba(var(--hs-rgb),0.14); white-space: nowrap; }
  .foot-bar { padding: 16px 48px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: rgba(239,232,220,0.4); border-top: 1px solid rgba(var(--hs-rgb),0.1); }
  .foot-bar a { color: rgba(239,232,220,0.4); }
  .social { display: flex; align-items: center; gap: 14px; }
  .social a { display: flex; }

  /* Reveal */
  [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
  [data-reveal].in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .skeleton { animation: none; opacity: .5; }
    html { scroll-behavior: auto; }
  }

  @media (max-width: 860px) {
    .hero { min-height: 85vh; padding: 96px 24px 64px; }
    .hist { padding: 80px 24px 72px; }
    .hist-grid { grid-template-columns: 1fr; gap: 72px; }
    .hist-fig { margin: 0 20px 0 0; }
    .hist-cap { margin-top: 36px; }
    .hist-badge { width: 128px; height: 128px; top: -48px; left: -12px; }
    .hist-badge img { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
    .hist-time { grid-template-columns: 1fr; }
    .hist-col, .hist-col + .hist-col { padding: 30px 0 30px 28px; border-left: 0; border-bottom: 0; }
    .hist-line { top: 0; bottom: 0; right: auto; left: 0; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
    .hist-time.in .hist-line { transform: none; }
    .hist-col::before, .hist-col + .hist-col::before { left: -4px; top: 36px; }
    .salon-cards, .find-grid { grid-template-columns: 1fr; }
    .sec { padding: 72px 24px; }
    .gal-frame img { height: var(--hm, 40vh); }
    .gal-progress { bottom: 18px; }
    .svc-feature { grid-template-columns: 1fr; }
    .svc-card--sig { flex-direction: column; align-items: stretch; gap: 22px; padding: 30px 26px; }
    .svc-card--sig .foot { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(239,232,220,0.16); flex-direction: row; align-items: flex-end; justify-content: space-between; min-width: 0; }
    .cat-grid { grid-template-columns: 1fr; }
    .tab { padding: 12px 20px; }
    .foot-grid { padding: 40px 24px 32px; gap: 32px; }
    .foot-bar { padding: 16px 24px; }
    .foot-word { padding: 24px; }
    .foot-word span { white-space: normal; font-size: 34px; line-height: 0.95; }
    #lightbox { padding: 16px; }
  }

  /* ---- Sidor för en salong och textsidor ---- */
  .hero--short { min-height: 64vh; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .hist--plain { padding-top: 110px; }

  /* Band med bild i bakgrunden och en kort text, bilden rör sig långsammare. */
  .band { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; justify-content: center; padding: 96px 48px; text-align: center; border-top: 1px solid rgba(var(--hs-rgb),0.12); }
  .band .px-img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
  .band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(18,16,13,0.62), rgba(18,16,13,0.84)); }
  .band-copy { position: relative; z-index: 1; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .band-copy h2 { font-weight: 600; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; }
  .band-copy p { margin: 0; font-size: 16px; line-height: 1.8; color: rgba(239,232,220,0.82); }

  /* Hitta hit för en salong: info till vänster, stor karta till höger. */
  .find-one { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border: 1px solid rgba(var(--a-rgb),0.45); background: var(--card); border-radius: 2px; overflow: hidden; }
  .find-one .info { padding: 44px 42px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
  .find-one h3 { font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; }
  .find-one dl { margin: 0; display: grid; gap: 14px; font-size: 15px; line-height: 1.6; color: rgba(239,232,220,0.75); }
  .find-one dt { color: var(--ui); font-weight: 600; }
  .find-one dd { margin: 0; }
  .find-one .actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
  .find-one iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(1) invert(0.92) contrast(0.9); clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(0.22,1,0.36,1) 0.35s; }
  .find-one.in iframe { clip-path: inset(0 0 0 0); }
  .salon-cards--one { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .salon-cards--wide { grid-template-columns: repeat(2, 1fr); }

  /* Textsidor (integritetspolicy) */
  .prose-wrap { padding: 120px 48px 110px; background: radial-gradient(70% 45% at 85% 0%, rgba(74,41,38,0.3) 0%, rgba(74,41,38,0) 70%), var(--bg); }
  .prose { max-width: 780px; margin: 0 auto; color: rgba(239,232,220,0.78); font-size: 16px; line-height: 1.85; }
  .prose h1 { font-weight: 700; font-size: clamp(44px, 6vw, 80px); line-height: 1.02; margin: 12px 0 28px; color: var(--ui); }
  .prose h2 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); color: var(--ui); margin: 52px 0 12px; padding-top: 28px; border-top: 1px solid rgba(var(--hs-rgb),0.18); }
  .prose h3 { font-size: 17px; font-weight: 700; color: var(--ui); margin: 28px 0 6px; }
  .prose p { margin: 0 0 16px; }
  .prose ul { margin: 0 0 18px; padding-left: 22px; }
  .prose li { margin-bottom: 6px; }
  .prose a { color: var(--hs); text-decoration: underline; text-underline-offset: 3px; }
  .prose strong { color: var(--ui); }

  @media (max-width: 860px) {
    .hero--short { min-height: 58vh; }
    .band { min-height: 440px; padding: 72px 24px; }
    .find-one { grid-template-columns: 1fr; }
    .find-one .info { padding: 32px 26px; }
    .find-one iframe { min-height: 320px; }
    .salon-cards--wide { grid-template-columns: 1fr; }
    .prose-wrap { padding: 80px 24px 72px; }
  }
  @media (prefers-reduced-motion: reduce) { .find-one iframe { clip-path: none; transition: none; } }
  .final-sub { margin: 0; font-size: 17px; color: rgba(239,232,220,0.7); }
  .hist-time--words .hist-col b { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.08; margin-bottom: 12px; }
  .prose h1 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.015em; }
  .anchor-alias { display: block; height: 0; scroll-margin-top: 96px; }
  .hist-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs); padding-bottom: 4px; border-bottom: 1px solid rgba(var(--hs-rgb),0.5); transition: gap 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease; }
  .hist-more:hover { gap: 16px; border-color: var(--hs); text-decoration: none; }
  .hist-more[data-reveal] { transition: gap 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }

  /* Barberarna */
  .bar-intro { max-width: 620px; margin: 14px auto 0; font-size: 16px; line-height: 1.75; color: rgba(239,232,220,0.68); }
  .bar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); }
  .bar-card { position: relative; display: flex; flex-direction: column; gap: 0; }
  .bar-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, #241012 0%, #17100e 70%); box-shadow: 0 26px 60px rgba(0,0,0,0.45); clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(0.22,1,0.36,1) 0.15s; }
  .bar-card.in .bar-photo { clip-path: inset(0 0 0 0); }
  .bar-photo::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(var(--hs-rgb),0.55); box-shadow: 0 0 0 1px rgba(10,9,8,0.28), inset 0 0 0 1px rgba(10,9,8,0.18); z-index: 2; pointer-events: none; transition: inset 0.7s cubic-bezier(0.22,1,0.36,1), border-color 0.5s ease; }
  .bar-card:hover .bar-photo::before { inset: 8px; border-color: rgba(var(--hs-rgb),0.8); }
  .bar-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: grayscale(1) contrast(1.05); transform: scale(1.12); transition: transform 1.8s cubic-bezier(0.22,1,0.36,1) 0.1s, filter 0.7s ease; }
  .bar-card.in .bar-photo img { transform: scale(1); }
  .bar-card.in:hover .bar-photo img { filter: grayscale(0) contrast(1); transform: scale(1.04); transition-duration: 1.2s, 0.7s; transition-delay: 0s; }
  .bar-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(120px, 14vw, 190px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--hs-rgb),0.4); }
  .bar-no { position: absolute; top: 22px; left: 24px; z-index: 3; padding: 5px 9px 4px; background: rgba(10,9,8,0.78); border-radius: 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.14em; color: var(--hs); }
  .bar-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 4px 0; flex: 1; }
  .bar-name { font-weight: 700; font-size: clamp(32px, 3.2vw, 42px); line-height: 1; }
  .bar-role { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs); position: relative; padding-left: 0; transition: padding-left 0.6s cubic-bezier(0.22,1,0.36,1); }
  .bar-card:hover .bar-role { padding-left: 14px; }
  .bar-role::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--hs); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
  .bar-card:hover .bar-role::before { width: 8px; }
  .bar-text { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(239,232,220,0.72); flex: 1; }
  .bar-salons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .bar-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui); border: 1px solid rgba(239,232,220,0.22); border-radius: 999px; transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
  .bar-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vs-text); }
  .bar-chip[data-s="hornstull"]::before { background: var(--hs); }
  .bar-chip:hover { text-decoration: none; background: rgba(239,232,220,0.07); border-color: rgba(239,232,220,0.55); }
  .bar-chip span { color: rgba(239,232,220,0.55); font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
  @media (max-width: 860px) {
    .bar-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  }
  @media (prefers-reduced-motion: reduce) { .bar-photo { clip-path: none; transition: none; } .bar-photo img { transform: none; transition: none; } }

  .gal-frame video { display: block; height: var(--h, 48vh); width: auto; max-width: none; background: var(--card); filter: grayscale(1) contrast(1.05); }
  @media (max-width: 760px) { .gal-frame video { height: var(--hm, 40vh); } }
  #lb-image video { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); display: block; }