/*
Theme Name:  La Vogue Kalmar
Theme URI:   https://lavoguekalmar.se
Author:      Dan / Media4you, design av Kevin Haveland
Author URI:  https://lavoguekalmar.se
Description: Premium WordPress-tema för La Vogue Kalmar — frisörsalong på Larmgatan sedan 1939. Baserat på Kevin Havelands design.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lavogue
*/

  :root{
    /* light warm base */
    --bg:#f0ebe2;
    --bg-2:#e8e2d6;
    --bg-3:#ddd4c3;
    --ink:#1c1916;
    --ink-2:#2a2520;
    --mute:#6e655a;
    --mute-2:#9a9082;
    --line:rgba(28,25,22,0.14);
    --line-2:rgba(28,25,22,0.28);
    --accent:#7a6e5a;
    --dark:#1c1916;
    --dark-ink:#ede1cc;

    --serif:"Cormorant Garamond", "Times New Roman", serif;
    --sans:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --max:1640px;
    --pad-x:clamp(24px, 6vw, 96px);
    --t-eyebrow:11px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  ::selection{ background:var(--ink); color:var(--bg); }

  h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; line-height:1.04; letter-spacing:-.015em; margin:0; color:var(--ink); }
  p{ margin:0; }
  .it{ font-style:italic; }

  .eyebrow{
    font-family:var(--sans);
    font-size:11px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--mute); font-weight:400;
    display:inline-flex; align-items:center; gap:14px;
  }
  .eyebrow::before{ content:""; width:24px; height:1px; background:var(--mute); display:inline-block; }
  .eyebrow.center::after{ content:""; width:24px; height:1px; background:var(--mute); display:inline-block; }

  .wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad-x); }
  .wrap-narrow{ max-width:1080px; margin:0 auto; padding:0 var(--pad-x); }

  /* ─────────────── NAV ─────────────── */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:60;
    padding:28px var(--pad-x);
    display:flex; align-items:center; justify-content:space-between;
    transition: padding .45s, background .45s, border-color .45s, color .45s;
    color:var(--ink);
    mix-blend-mode: normal;
  }
  .nav.over-dark{ color:var(--dark-ink); }
  .nav.scrolled{
    padding:14px var(--pad-x);
    background:rgba(240,235,226,0.92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom:1px solid var(--line);
    color:var(--ink);
  }
  .brand{ font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:.04em; display:flex; align-items:baseline; gap:14px; }
  .brand .est{ font-family:var(--sans); font-size:10px; letter-spacing:.28em; text-transform:uppercase; opacity:.6; font-weight:400; }
  .nav-links{ display:flex; align-items:center; gap:42px; list-style:none; margin:0; padding:0; }
  .nav-links a{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:400; position:relative; padding:8px 0; opacity:.85; transition:opacity .25s; }
  .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:currentColor; transition: right .4s ease; }
  .nav-links a:hover{ opacity:1; }
  .nav-links a:hover::after, .nav-links a.active::after{ right:0; }
  .nav-links a.active{ opacity:1; }

  .nav-cta{
    display:inline-flex; align-items:center; gap:12px;
    padding:12px 22px;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
    border:1px solid currentColor;
    transition: background .25s, color .25s;
  }
  .nav.scrolled .nav-cta:hover{ background:var(--ink); color:var(--bg); }
  .nav .nav-cta:hover{ background:var(--ink); color:var(--bg); }
  .nav.over-dark .nav-cta:hover{ background:var(--dark-ink); color:var(--dark); }

  /* ─────────────── DROPDOWN ─────────────── */
  .nav-links .has-dropdown{ position:relative; }
  .nav-links .has-dropdown > a .caret{
    display:inline-block; margin-left:6px; font-size:9px;
    transform: translateY(-1px); transition: transform .3s;
    opacity:.7;
  }
  .nav-links .has-dropdown:hover > a .caret{ transform: translateY(1px); opacity:1; }
  .dropdown{
    position:absolute; top:100%; left:50%; transform: translate(-50%, 6px);
    margin:0; padding: 18px 0; min-width: 240px;
    list-style:none;
    background: var(--bg);
    border:1px solid var(--line);
    color: var(--ink);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .25s, transform .25s, visibility .25s;
    z-index: 70;
  }
  .nav-links .has-dropdown:hover > .dropdown,
  .nav-links .has-dropdown:focus-within > .dropdown{
    opacity:1; visibility:visible; pointer-events:auto;
    transform: translate(-50%, 14px);
  }
  /* invisible bridge so cursor can travel from trigger to dropdown */
  .dropdown::before{
    content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
  }
  .dropdown li{ list-style:none; }
  .dropdown a{
    display:block; padding: 12px 28px;
    font-family: var(--sans);
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--ink); opacity:.78;
    transition: opacity .2s, background .2s;
  }
  .dropdown a:hover{ opacity:1; background: var(--bg-2); }
  .dropdown a::after{ display:none; }

  .menu-toggle{ display:none; }

  /* ─────────────── BUTTONS ─────────────── */
  .btn{
    display:inline-flex; align-items:center; gap:14px;
    padding:18px 32px;
    font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
    border:1px solid currentColor;
    transition: background .3s, color .3s;
  }
  .btn .arrow{ transition: transform .35s; }
  .btn:hover .arrow{ transform: translateX(6px); }
  .btn-dark{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .btn-dark:hover{ background:transparent; color:var(--ink); }
  .btn-light{ color:var(--dark-ink); border-color:var(--dark-ink); }
  .btn-light:hover{ background:var(--dark-ink); color:var(--dark); }
  .btn-ghost{ color:var(--ink); border-color:var(--line-2); }
  .btn-ghost:hover{ border-color:var(--ink); }

  .link-arrow{
    display:inline-flex; align-items:center; gap:14px;
    font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    padding:6px 0;
    border-bottom:1px solid var(--line-2);
    transition: border-color .3s;
  }
  .link-arrow:hover{ border-color:currentColor; }
  .link-arrow .arrow{ transition: transform .35s; }
  .link-arrow:hover .arrow{ transform: translateX(5px); }

  /* ─────────────── IMG ─────────────── */
  .imgbox{ position:relative; overflow:hidden; background:var(--bg-2); }
  .imgbox img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* ─────────────── ROUTES ─────────────── */
  main{ opacity:1; transition: opacity .35s ease; }
  main.swap{ opacity:0; }
  .route{ display:none; }
  .route.active{ display:block; }

  /* ─────────────── HERO (home) ─────────────── */
  .hero-full{
    position:relative;
    height:100vh; min-height:680px;
    width:100%;
    overflow:hidden;
  }
  .hero-full > img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .hero-full::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(20,16,12,0.55) 0%, rgba(20,16,12,0.35) 30%, rgba(20,16,12,0.45) 60%, rgba(20,16,12,0.78) 100%);
  }
  .hero-content{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding: 0 var(--pad-x) clamp(60px, 9vw, 130px);
    color:var(--dark-ink);
    z-index:2;
  }
  .hero-content .top{
    position:absolute; top: clamp(120px, 16vh, 220px); left:var(--pad-x); right:var(--pad-x);
    display:flex; justify-content:space-between; align-items:flex-start; gap:40px;
  }
  .hero-content .top .eyebrow{ color:rgba(237,225,204,.85); }
  .hero-content .top .eyebrow::before{ background:rgba(237,225,204,.7); }
  .hero-meta-right{
    font-size:11px; letter-spacing:.28em; text-transform:uppercase; opacity:.8; text-align:right; line-height:1.9;
  }
  .hero-title{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(56px, 10.4vw, 184px);
    line-height:.95; letter-spacing:-.025em;
    color:var(--dark-ink);
    max-width: 1400px;
  }
  .hero-title .it{ font-style:italic; }
  .hero-bottom-row{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:60px; margin-top: clamp(28px, 4vw, 56px);
  }
  .hero-sub{
    max-width:440px; font-size: clamp(15px,1.05vw,17px); line-height:1.6;
    color:rgba(237,225,204,.85);
  }
  .hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

  .scroll-cue{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:24px; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
    color:rgba(237,225,204,.7); display:flex; flex-direction:column; align-items:center; gap:10px;
    z-index:3;
  }
  .scroll-cue .line{ width:1px; height:36px; background:rgba(237,225,204,.5); animation:scrollPulse 2.2s ease-in-out infinite; transform-origin:top; }
  @keyframes scrollPulse{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }

  /* ─────────────── PAGE HERO (inner pages) ─────────────── */
  .page-hero{
    padding: clamp(160px, 22vh, 240px) var(--pad-x) clamp(80px, 12vw, 160px);
  }
  .page-hero .crumb{
    font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
    margin-bottom: clamp(32px,5vw,64px);
  }
  .page-hero h1{
    font-size: clamp(56px, 9vw, 168px);
    line-height:.94; letter-spacing:-.025em;
    max-width: 14ch;
  }
  .page-hero .ph-sub{
    margin-top: clamp(40px,5vw,72px);
    max-width: 620px;
    font-size: clamp(16px,1.15vw,19px);
    color:var(--mute);
    line-height:1.65;
  }

  /* ─────────────── EDITORIAL TWO-COL ─────────────── */
  .ed-section{ padding: clamp(120px, 18vw, 260px) 0; }
  .ed-tight{ padding: clamp(80px, 12vw, 180px) 0; }
  .ed-twocol{
    display:grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 8vw, 140px);
    align-items:start;
  }
  .ed-side .eyebrow{ margin-bottom: 36px; }
  .ed-side h2{ font-size: clamp(40px,5.6vw,88px); }
  .ed-body{ font-size: clamp(16px,1.15vw,19px); color:var(--ink-2); line-height:1.75; max-width:540px; }
  .ed-body p{ margin-bottom:1.4em; }
  .ed-body p:last-child{ margin-bottom:0; }

  /* ─────────────── FULL-BLEED IMAGE BAND ─────────────── */
  .image-band{
    height: clamp(520px, 80vh, 880px);
    position:relative; overflow:hidden;
  }
  .image-band > img{ width:100%; height:100%; object-fit:cover; }
  .image-band .caption{
    position:absolute; left:var(--pad-x); bottom:32px;
    font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--dark-ink); opacity:.85;
  }

  /* ─────────────── SPLIT (image + copy 50/50) ─────────────── */
  .split{
    display:grid; grid-template-columns: 1fr 1fr;
    align-items:stretch;
    min-height: clamp(520px, 78vh, 860px);
  }
  .split.flip{ direction:rtl; }
  .split.flip > *{ direction:ltr; }
  .split .img-side{ position:relative; min-height:520px; }
  .split .img-side img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .split .copy-side{
    display:flex; flex-direction:column; justify-content:center;
    padding: clamp(60px, 8vw, 140px);
    gap: clamp(20px, 2.5vw, 36px);
  }
  .split .copy-side .num{ font-family:var(--serif); font-size:14px; letter-spacing:.04em; color:var(--mute); }
  .split .copy-side h2{ font-size: clamp(40px, 5.4vw, 84px); }
  .split .copy-side .text{ color:var(--ink-2); font-size: clamp(16px,1.1vw,18px); line-height:1.7; max-width:440px; }

  .split.dark{ background:var(--dark); color:var(--dark-ink); }
  .split.dark .copy-side h2{ color:var(--dark-ink); }
  .split.dark .copy-side .text{ color:rgba(237,225,204,.78); }
  .split.dark .copy-side .num{ color:rgba(237,225,204,.5); }
  .split.dark .eyebrow{ color:rgba(237,225,204,.75); }
  .split.dark .eyebrow::before{ background:rgba(237,225,204,.6); }

  /* ─────────────── SERVICE TILES (image-led, no card chrome) ─────────────── */
  .svc-list .svc-item{
    display:grid; grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 7vw, 120px);
    padding: clamp(100px, 14vw, 200px) 0;
    align-items:center;
    border-top:1px solid var(--line);
  }
  .svc-list .svc-item:first-child{ border-top:0; }
  .svc-list .svc-item.flip{ grid-template-columns: 1fr 1.05fr; }
  .svc-list .svc-item.flip .svc-media{ order:2; }
  .svc-media{ aspect-ratio: 4/5; }
  .svc-info .num{ font-family:var(--serif); font-size:16px; color:var(--mute); letter-spacing:.06em; }
  .svc-info h3{ font-size: clamp(40px, 4.8vw, 72px); margin: 18px 0 28px; line-height:1; letter-spacing:-.02em; }
  .svc-info .text{ color:var(--ink-2); font-size: clamp(15px,1.05vw,17px); line-height:1.75; max-width:480px; margin-bottom: 32px; }
  .svc-info .price-hint{ font-family:var(--serif); font-style:italic; color:var(--mute); font-size:18px; margin-bottom:36px; }

  /* ─────────────── MINIMAL SERVICE GRID (home) ─────────────── */
  .mini-svc{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(36px, 5vw, 80px);
  }
  .mini-svc .m{ display:flex; flex-direction:column; gap:20px; }
  .mini-svc .m .imgbox{ aspect-ratio: 4/5; }
  .mini-svc .m h3{ font-size: clamp(26px, 2.4vw, 36px); margin-top: 6px; }
  .mini-svc .m .text{ color:var(--mute); font-size:14px; line-height:1.65; max-width:340px; }
  .mini-svc .m .more{ margin-top:8px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:10px; }
  .mini-svc .m .more .arrow{ transition: transform .3s; }
  .mini-svc .m:hover .more .arrow{ transform: translateX(5px); }

  /* ─────────────── YEARS (typographic, unboxed) ─────────────── */
  .years{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(40px, 6vw, 100px);
    padding: clamp(60px, 8vw, 120px) 0;
  }
  .years .y{ display:flex; flex-direction:column; gap:20px; }
  .years .y .big{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(80px, 11vw, 200px);
    line-height:.88; letter-spacing:-.025em;
  }
  .years .y .lbl{ color:var(--mute); font-size:13px; max-width:280px; line-height:1.5; }

  /* ─────────────── REVIEWS (editorial pull-quotes) ─────────────── */
  .reviews-ed{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 9vw, 140px); }
  .review-ed .stars{ color:var(--ink); letter-spacing:.18em; font-size:14px; margin-bottom:32px; }
  .review-ed blockquote{
    margin:0;
    font-family:var(--serif);
    font-size: clamp(24px, 2.4vw, 36px);
    line-height:1.25; letter-spacing:-.01em;
    color:var(--ink);
    margin-bottom:32px;
  }
  .review-ed .attr{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); }
  .review-ed .attr strong{ color:var(--ink); font-weight:500; }

  /* ─────────────── INSTAGRAM FEED ─────────────── */
  .ig-section{ padding: clamp(100px, 14vw, 180px) 0; }
  .ig-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap: 40px; margin-bottom: clamp(48px, 7vw, 96px); flex-wrap:wrap;
  }
  .ig-head .ig-title{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(40px, 5.4vw, 84px); line-height:1.04; letter-spacing:-.015em;
    max-width: 16ch; margin:0;
  }
  .ig-head .ig-handle{
    font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
    display:inline-flex; align-items:center; gap:14px;
    padding-bottom: 12px;
  }
  .ig-head .ig-handle .arrow{ transition: transform .35s; }
  .ig-head .ig-handle:hover{ color:var(--ink); }
  .ig-head .ig-handle:hover .arrow{ transform: translateX(5px); }
  .ig-grid{
    display:grid; grid-template-columns: repeat(6, 1fr);
    gap: clamp(6px, 0.6vw, 12px);
  }
  .ig-tile{
    position:relative; overflow:hidden;
    aspect-ratio: 1/1;
    background: var(--bg-2);
  }
  .ig-tile img{
    width:100%; height:100%; object-fit:cover;
    transition: transform .9s ease;
  }
  .ig-tile:hover img{ transform: scale(1.04); }
  .ig-tile::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 60%, rgba(20,16,12,0.35) 100%);
    opacity:0; transition: opacity .3s;
  }
  .ig-tile:hover::after{ opacity:1; }

  /* ─────────────── DARK CTA ─────────────── */
  .cta-dark{
    background:var(--dark); color:var(--dark-ink);
    padding: clamp(120px, 16vw, 220px) 0;
    text-align:center;
  }
  .cta-dark .eyebrow{ color:rgba(237,225,204,.7); }
  .cta-dark .eyebrow::before, .cta-dark .eyebrow.center::after{ background:rgba(237,225,204,.6); }
  .cta-dark h2{ color:var(--dark-ink); font-size: clamp(48px, 7vw, 120px); line-height:.98; margin: 36px auto 32px; max-width:18ch; }
  .cta-dark .sub{ color:rgba(237,225,204,.72); max-width:540px; margin:0 auto 48px; font-size: clamp(15px,1.1vw,18px); line-height:1.7; }
  .cta-dark .actions{ display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }

  /* ─────────────── STYLIST FULL (våra frisörer) ─────────────── */
  .stylist-block{
    display:grid; grid-template-columns: 1fr 1fr;
    align-items:stretch;
    min-height: clamp(620px, 90vh, 980px);
    border-top:1px solid var(--line);
  }
  .stylist-block:first-of-type{ border-top:0; }
  .stylist-block.flip{ direction:rtl; }
  .stylist-block.flip > *{ direction:ltr; }
  .stylist-block .ph{ position:relative; min-height:560px; }
  .stylist-block .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .stylist-block .info{
    display:flex; flex-direction:column; justify-content:center;
    padding: clamp(60px, 8vw, 130px);
    gap: clamp(20px, 2.5vw, 36px);
  }
  .stylist-block .num{ font-family:var(--serif); color:var(--mute); font-size:14px; }
  .stylist-block .info h2{ font-size: clamp(48px, 5.6vw, 88px); line-height:.98; letter-spacing:-.02em; }
  .stylist-block .role{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); }
  .stylist-block .spec{ color:var(--ink-2); font-size: clamp(15px,1.1vw,18px); line-height:1.7; max-width:440px; margin-top:8px; }
  .stylist-block .stats{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; padding-top:24px; border-top:1px solid var(--line); margin-top:8px; max-width:440px; }
  .stylist-block .stats .k{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
  .stylist-block .stats .v{ font-family:var(--serif); font-size: clamp(22px,1.8vw,28px); line-height:1.1; }

  /* ─────────────── PRICE (editorial, unboxed) ─────────────── */
  .price-list{ max-width: 980px; margin:0 auto; }
  .price-row{
    display:grid; grid-template-columns: 1fr auto; gap:32px;
    padding: clamp(22px, 2.4vw, 32px) 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
  }
  .price-row:first-child{ border-top:1px solid var(--line); }
  .price-row .label{
    font-family:var(--serif); font-size: clamp(22px,2vw,30px); line-height:1.15;
  }
  .price-row .label .sub{
    display:block;
    font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--mute); margin-top:6px;
  }
  .price-row .price{
    font-family:var(--serif); font-size: clamp(22px,2vw,30px); color:var(--ink); white-space:nowrap;
  }
  .price-note{ margin: 56px auto 0; max-width: 980px; color:var(--mute); font-size:14px; line-height:1.7; font-style:italic; font-family:var(--serif); }

  /* ─────────────── PRODUCTS (typographic row) ─────────────── */
  .prod-row{
    display:flex; flex-wrap:wrap; justify-content:space-between;
    align-items:center; gap: clamp(32px, 6vw, 80px);
    padding: clamp(60px, 8vw, 100px) 0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .prod-row .p{
    font-family:var(--serif); font-size: clamp(28px, 3.4vw, 56px); font-style:italic; font-weight:300;
    letter-spacing:.01em; color:var(--ink);
  }

  /* ─────────────── BRAND COLLAGE (magazine spread) ─────────────── */
  .brand-collage{
    position:relative;
    margin: clamp(80px, 11vw, 160px) auto 0;
    height: clamp(560px, 50vw, 720px);
    max-width: 1400px;
  }
  .bc-item{ position:absolute; margin:0; }
  .bc-item img{
    width:100%; height:auto; display:block;
    box-shadow: 0 30px 60px -28px rgba(20,16,12,0.18);
  }
  .bc-item figcaption{
    margin-top:14px;
    font-size:10px; letter-spacing:.28em; text-transform:uppercase;
    color: var(--mute); font-family: var(--sans);
  }
  /* 01 Davines — dominant, top-left */
  .bc-1{ left: 0; top: 0; width: 44%; }
  /* 02 K18 — top-right, portrait, lower */
  .bc-2{ left: 60%; top: 6%; width: 18%; }
  /* 03 Color Wow — center, overlapping */
  .bc-3{ left: 34%; top: 50%; width: 22%; z-index:2; }
  /* 04 Redken — bottom-right */
  .bc-4{ left: 64%; top: 58%; width: 28%; }

  /* ─────────────── FOOTER ─────────────── */
  footer{
    background:var(--dark); color:var(--dark-ink);
    padding: clamp(100px, 14vw, 180px) 0 36px;
  }
  .foot-top{ margin-bottom: clamp(60px,8vw,120px); }
  .foot-mark{
    font-family:var(--serif); font-weight:300;
    font-size: clamp(72px, 14vw, 240px); line-height:.86; letter-spacing:-.02em;
  }
  .foot-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px,4vw,56px); margin-top: clamp(80px,10vw,120px); }
  .foot-col h4{
    font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
    color:rgba(237,225,204,.55); margin-bottom:24px; font-weight:400;
  }
  .foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
  .foot-col li, .foot-col a{ font-size:15px; color:rgba(237,225,204,.82); }
  .foot-col a:hover{ color:var(--dark-ink); }
  .foot-col .placeholder{ opacity:.45; font-style:italic; }
  .foot-social a{ display:inline-flex; align-items:center; gap:12px; }
  .foot-social svg{ width:20px; height:20px; flex-shrink:0; opacity:.78; transition: opacity .25s; }
  .foot-social a:hover svg{ opacity:1; }
  .foot-bottom{
    border-top:1px solid rgba(237,225,204,.18);
    margin-top: clamp(56px,7vw,96px);
    padding-top: clamp(40px,4vw,56px);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(237,225,204,.5);
  }

  /* ─────────────── RESPONSIVE ─────────────── */
  @media (max-width: 1100px){
    .ed-twocol, .reviews-ed, .mini-svc{ grid-template-columns:1fr; gap:48px; }
    .split, .stylist-block{ grid-template-columns:1fr; min-height:auto; }
    .split.flip, .stylist-block.flip{ direction:ltr; }
    .split .img-side, .stylist-block .ph{ min-height:520px; }
    .svc-list .svc-item, .svc-list .svc-item.flip{ grid-template-columns:1fr; gap:40px; }
    .svc-list .svc-item.flip .svc-media{ order:0; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .years{ grid-template-columns:1fr; gap:48px; }
    .ig-grid{ grid-template-columns: repeat(3, 1fr); }
    .brand-collage{ height: clamp(640px, 95vw, 880px); }
    .bc-1{ width: 52%; }
    .bc-2{ width: 22%; left: 60%; top: 4%; }
    .bc-3{ width: 30%; left: 30%; top: 52%; }
    .bc-4{ width: 36%; left: 60%; top: 58%; }
  }
  @media (max-width: 760px){
    .ig-grid{ grid-template-columns: repeat(2, 1fr); }
    .ig-head{ flex-direction:column; align-items:flex-start; gap:24px; }
    .brand-collage{
      position:static; height:auto;
      display:flex; flex-direction:column; gap: 56px;
    }
    .bc-item{ position:static; }
    .bc-1{ width:90%; align-self:flex-start; }
    .bc-2{ width:50%; align-self:flex-end; }
    .bc-3{ width:65%; align-self:flex-start; margin-left:8%; }
    .bc-4{ width:75%; align-self:flex-end; }
    .nav-links, .nav-cta{ display:none; }
    .menu-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid currentColor; }
    .menu-toggle span{ width:18px; height:1px; background:currentColor; position:relative; display:block; }
    .menu-toggle span::before, .menu-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:1px; background:currentColor; }
    .menu-toggle span::before{ top:-6px; }
    .menu-toggle span::after{ top:6px; }
    .nav.menu-open{
      padding: 14px var(--pad-x);
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      color: var(--ink);
    }
    .nav.over-dark.menu-open{ color: var(--ink); }
    .nav.menu-open .nav-links{
      display:flex; flex-direction:column; gap:18px;
      position:fixed; top:60px; left:0; right:0;
      max-height: calc(100vh - 60px); overflow-y:auto;
      background:var(--bg); color:var(--ink);
      padding:32px var(--pad-x) 40px; border-bottom:1px solid var(--line);
    }
    .nav.menu-open .nav-links a{
      font-family:var(--serif); font-size:24px; letter-spacing:.02em; text-transform:none;
      color:var(--ink);
    }
    .nav.menu-open .nav-links a::after{ display:none; }
    .nav.menu-open .has-dropdown > a .caret{ display:none; }
    .nav.menu-open .has-dropdown .dropdown{ display:none; }
    .mobile-cta-li{ display:none; }
    .nav.menu-open .mobile-cta-li{
      display:block; margin-top: 12px; padding-top: 24px; border-top:1px solid var(--line);
    }
    .nav.menu-open .mobile-cta-li .mobile-cta{
      display:inline-flex; align-items:center; gap:12px;
      padding:16px 28px;
      font-family: var(--sans);
      font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:400;
      background: var(--ink); color: var(--bg);
      border:1px solid var(--ink);
    }
    .nav.menu-open .mobile-cta-li .mobile-cta .arrow{ transition: transform .3s; }
    .nav.menu-open .mobile-cta-li .mobile-cta:hover{ background: transparent; color: var(--ink); }
    .nav.menu-open .mobile-cta-li .mobile-cta:hover .arrow{ transform: translateX(5px); }
    .hero-content .top{ flex-direction:column; }
    .hero-meta-right{ text-align:left; }
    .hero-bottom-row{ flex-direction:column; align-items:flex-start; gap:32px; }
    .foot-grid{ grid-template-columns:1fr; }
    .stylist-block .stats{ grid-template-columns:1fr; }
  }