/* Stijl van de site (style.css) */
/* Haarstudio Lyan · ontwerp "Pittig" · zwart, fel roze, gebroken wit · Big Shoulders Display + Inter Tight.
   Poster-achtig en gedurfd, maar ruim. Lettertypes zelf gehost (OFL, zie assets/fonts/LICENTIE.md).
   Elke sectie kiest een achtergrond via data-background (black, soft, white, pink); die zet de kleurvariabelen.
   Foto's worden met CSS zwart-wit gemaakt (de klant uploadt gewoon kleurenfoto's). Mobiel eerst. */

@font-face{font-family:"Big Shoulders Display";src:url(../assets/fonts/big-shoulders-display.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../assets/fonts/inter-tight.woff2) format("woff2");font-weight:400 700;font-display:swap}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd,table{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
table{border-collapse:collapse}

/* ---------- kleuren en maten ---------- */
:root{
  --black:#111011;
  --surface:#1c1a1c;
  --white:#f7f2ee;
  --grey:#b3abaa;          /* op zwart: 8,3:1 */
  --grey-dark:#5c5557;   /* op wit: 6,5:1 */
  --pink:#ff2d95;           /* neonroze; op zwart: 5,5:1, muted op roze: 4,7:1; nooit als tekst op wit */
  --pink-deep:#b8004f;      /* roze tekst op wit: 5,9:1 */
  --wide:1280px;
  --gutter:clamp(16px,4vw,48px);
  --section-space:clamp(80px,10vw,152px);
  --large:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --corner:4px;

  /* standaard: zwarte sectie */
  --bg:var(--black);
  --text:var(--white);
  --muted:var(--grey);
  --accent-text:var(--pink);
  --line:rgba(247,242,238,.16);
  --focus:var(--pink);
  --button-bg:var(--pink);
  --button-text:var(--black);
}
[data-background="soft"]{--bg:var(--surface)}
[data-background="white"]{
  --bg:var(--white);--text:var(--black);--muted:var(--grey-dark);--accent-text:var(--pink-deep);
  --line:rgba(17,16,17,.14);--focus:var(--black);--button-bg:var(--black);--button-text:var(--white);
}
[data-background="pink"]{
  --bg:var(--pink);--text:var(--black);--muted:#2e1a23;--accent-text:var(--black);
  --line:rgba(17,16,17,.22);--focus:var(--black);--button-bg:var(--black);--button-text:var(--white);
}
[data-background]{background:var(--bg);color:var(--text)}

/* ---------- basis ---------- */
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--black);color:var(--white);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;padding-bottom:76px}
@media (min-width:900px){body{padding-bottom:0}}
::selection{background:var(--pink);color:var(--black)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

h1,h2,h3{font-family:var(--large);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:.005em;hyphens:manual;overflow-wrap:normal}
h2{font-size:clamp(2.9rem,6.2vw,5.4rem)}
@media (max-width:420px){h2{font-size:clamp(2.25rem,11.5vw,2.9rem)}}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent-text)}
/* op wit: roze markeerstift met zwarte tekst; op roze: open letters */
[data-background="white"] h2 em{color:var(--black);background:linear-gradient(transparent .2em,var(--pink) .2em);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-background="pink"] h2 em{color:transparent;-webkit-text-stroke:2px var(--black)}

.container{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--pink);color:var(--black);padding:12px 18px;font-weight:700;text-decoration:none;border-radius:var(--corner)}
.skip:focus{top:12px;outline-color:var(--white)}

/* oog: klein label boven een kop */
.eyebrow{font:800 1.125rem/1 var(--large);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-text);margin-bottom:18px}

/* tekstlinks in lopende tekst */
.container p a,.container li a{text-underline-offset:4px;text-decoration-thickness:1.5px}
.container p a:hover,.container li a:hover{color:var(--accent-text)}

/* ---------- knoppen ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:var(--corner);background:var(--button-bg);color:var(--button-text);font:700 1.0625rem/1.1 var(--sans);text-decoration:none;text-align:center;transition:transform .15s ease}
.button svg{width:20px;height:20px;flex:none}
.button.border{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px currentColor}
@media (prefers-reduced-motion:no-preference){.button:hover{transform:rotate(-2deg) scale(1.03)}}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- gedeelde onderdelen ---------- */
/* zwart-wit foto */
.grayscale{filter:grayscale(1) contrast(1.12)}
/* schuin roze label */
.label{position:absolute;z-index:2;background:var(--pink);color:var(--black);font:700 .9375rem/1.2 var(--sans);padding:8px 14px;transform:rotate(4deg);box-shadow:0 0 0 4px var(--black)}
/* ronde sticker met het handje of een prijs */
.sticker{position:absolute;z-index:2;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:var(--white);color:var(--black);box-shadow:0 0 0 6px var(--black);transform:rotate(-12deg)}
.sticker img{width:74%;transform:rotate(82deg)} /* netto 70° met de -12° van de sticker: zoals de raamsticker van de salon, arm recht naar beneden */

/* open of dicht */
.status{display:inline-flex;align-items:center;gap:10px;font-weight:700}
/* open: groen; sluit binnen een uur: oranje; gesloten: grijs (Robin, 12-11-2026). De tekst zegt het ook. */
.status::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#2fd27a;box-shadow:0 0 0 4px rgba(47,210,122,.28)}
.status.closing::before{background:#ffa31a;box-shadow:0 0 0 4px rgba(255,163,26,.3)}
.status.closed::before{background:#8a8183;box-shadow:none}
.status:empty{display:none}

/* kop met tekst ernaast (h2 links, intro rechts) */
.header-split{display:grid;gap:20px 64px;margin-bottom:clamp(40px,6vw,72px)}
.header-split > p{color:var(--muted);max-width:34em;font-size:1.125rem}
@media (min-width:900px){
  .header-split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}
}

/* contact/lyan-contact */
/* Contact: links bellen/appen en het adres, rechts de openingstijden met "nu open" en vandaag in roze. */
.lyan-contact{padding:var(--section-space) 0}
.lyan-contact .contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px clamp(40px,7vw,112px)}
.lyan-contact h2{margin-bottom:22px}
.lyan-contact .intro{color:var(--muted);font-size:1.125rem;max-width:32em}
.lyan-contact .actions{margin-top:30px}
.lyan-contact .details{margin-top:40px;display:grid;max-width:32em}
.lyan-contact .details li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.lyan-contact .details svg,.lyan-contact .empty-icon{flex:none;width:24px;height:24px;color:var(--accent-text)}
.lyan-contact .details b{font-weight:700}
.lyan-contact .details a{font-weight:600}
.lyan-contact h3{font-size:clamp(2.2rem,3.4vw,3rem);margin-bottom:16px}
.lyan-contact .status{margin-bottom:18px;font-size:1.0625rem}
.lyan-contact .exceptions{margin-bottom:14px;color:var(--muted)}
.lyan-contact .exceptions b{color:var(--text)}
.lyan-contact .hours{width:100%;font-variant-numeric:tabular-nums}
.lyan-contact .hours th,.lyan-contact .hours td{padding:13px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.lyan-contact .hours th{white-space:nowrap;padding-right:16px}
.lyan-contact .hours td{text-align:right;color:var(--muted);text-wrap:balance}
.lyan-contact .hours tr.closed td{opacity:.85}
.lyan-contact .hours tr.today th,.lyan-contact .hours tr.today td{color:var(--accent-text);font-weight:700}
.lyan-contact .hours tr.today th::after{content:" · vandaag";font-weight:500}
.lyan-contact .remark{margin-top:16px;color:var(--muted);font-size:.9375rem}
.lyan-contact .contact-image img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--corner)}
@media (min-width:900px){
  .lyan-contact .contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .lyan-contact .contact-image{grid-column:1 / -1;margin-top:16px}
  .lyan-contact .contact-image img{aspect-ratio:3/1}
}

/* cta/lyan-booking */
/* Afspraak: roze poster met een groot schuin handje uit het logo. */
.lyan-booking{padding:var(--section-space) 0;overflow:hidden}
.lyan-booking .booking-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.lyan-booking h2{font-size:clamp(3.4rem,9vw,8rem);line-height:.86;max-width:9em}
.lyan-booking .text{margin-top:26px;font-size:1.1875rem;font-weight:500;max-width:30em}
.lyan-booking .actions{margin-top:32px}
.lyan-booking .note{margin-top:18px;font-size:.9375rem;color:var(--muted)}
.lyan-booking .hand{width:min(260px,70%);justify-self:end;transform:rotate(-14deg);margin-top:8px}
@media (min-width:900px){
  .lyan-booking .booking-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .lyan-booking .hand{width:100%;max-width:420px;margin:0}
}

/* faq/lyan-questions */
/* Vragen: titel links, uitklapbare vragen rechts met een plus die een min wordt. Regels in het antwoord blijven staan. */
.lyan-questions{padding:var(--section-space) 0}
.lyan-questions .questions-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px clamp(40px,7vw,112px);align-items:start}
.lyan-questions h2{font-size:clamp(2.4rem,3.6vw,3.25rem);line-height:.95}
.lyan-questions .intro{margin-top:22px;color:var(--muted);font-size:1.125rem;max-width:28em}
.lyan-questions details{border-top:3px solid var(--text)}
.lyan-questions details:last-child{border-bottom:3px solid var(--text)}
.lyan-questions summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:18px 0;cursor:pointer;list-style:none;font:900 clamp(1.6rem,2.4vw,2.1rem)/1 var(--large);text-transform:uppercase;letter-spacing:.01em}
.lyan-questions summary::-webkit-details-marker{display:none}
.lyan-questions summary:hover{color:var(--accent-text)}
.lyan-questions .plus{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--button-bg)}
.lyan-questions .plus::before,.lyan-questions .plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2.5px;margin:-1.25px 0 0 -8px;background:var(--button-text);transition:transform .2s}
.lyan-questions .plus::after{transform:rotate(90deg)}
.lyan-questions details[open] .plus::after{transform:rotate(0)}
.lyan-questions .answer{padding:0 0 26px}
.lyan-questions .answer p{color:var(--muted);font-size:1.0625rem;max-width:40em;white-space:pre-line}
@media (min-width:1000px){
  .lyan-questions .questions-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .lyan-questions .questions-head{position:sticky;top:24px}
}

/* features/lyan-benefits */
/* Voordelen: vier kolommen met nummer, icoon en een korte kop. */
.lyan-benefits{padding:clamp(64px,8vw,112px) 0;counter-reset:voordeel}
.lyan-benefits ol{display:grid;grid-template-columns:minmax(0,1fr);gap:0 32px}
.lyan-benefits li{counter-increment:voordeel;position:relative;padding:28px 0 32px;border-top:3px solid var(--text)}
.lyan-benefits li::before{content:counter(voordeel,decimal-leading-zero);position:absolute;right:0;top:26px;font:900 1.125rem/1 var(--large);color:var(--accent-text);letter-spacing:.06em}
.lyan-benefits svg{display:block;width:34px;height:34px;color:var(--accent-text);margin-bottom:20px}
.lyan-benefits h3{font-size:clamp(1.9rem,2.6vw,2.4rem);margin-bottom:10px}
.lyan-benefits p{color:var(--muted)}
@media (min-width:700px){.lyan-benefits ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.lyan-benefits ol{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* footer/lyan-footer */
/* Voet: enorme "App me" als laatste duw, daaronder logo, adres en kolommen. Op mobiel een vaste balk onderin. */
.lyan-footer{background:var(--black);color:var(--white);border-top:1px solid var(--line)}
.lyan-footer .footer-top{display:grid;gap:24px 64px;padding:clamp(64px,8vw,112px) 0 clamp(48px,6vw,80px);border-bottom:1px solid var(--line)}
.lyan-footer .footer-large{display:inline-flex;align-items:center;gap:.15em;width:max-content;max-width:100%;font:900 clamp(4.5rem,15vw,12rem)/.82 var(--large);text-transform:uppercase;text-decoration:none;color:var(--pink)}
.lyan-footer .footer-large svg{width:.6em;height:.6em;stroke-width:2.4;transition:transform .2s}
@media (prefers-reduced-motion:no-preference){.lyan-footer .footer-large:hover svg{transform:translateX(.08em)}}
.lyan-footer .footer-text{color:var(--grey);font-size:1.125rem;max-width:26em;align-self:end}
.lyan-footer .footer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;padding:56px 0}
.lyan-footer .footer-brand{grid-column:1 / -1}
.lyan-footer .logo{display:inline-block;margin-bottom:22px}
.lyan-footer .logo img{height:64px;width:auto;filter:invert(1)}
.lyan-footer .footer-brand p{color:var(--grey)}
.lyan-footer .footer-brand p + p{margin-top:12px}
.lyan-footer h2{font-size:1.5rem;letter-spacing:.06em;color:var(--pink);margin-bottom:14px}
.lyan-footer li{padding:4px 0}
.lyan-footer a{text-decoration:none}
.lyan-footer .footer-grid a:hover{color:var(--pink);text-decoration:underline;text-underline-offset:4px}
.lyan-footer .footer-column a{display:inline-block;padding:4px 0}
.lyan-footer .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px 0 32px;border-top:1px solid var(--line);color:var(--grey);font-size:.9375rem}
.lyan-footer .footer-bottom a{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.lyan-footer .footer-bottom a:hover{color:var(--pink)}
.lyan-footer .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--black);border-top:1px solid var(--line)}
.lyan-footer .mobile-bar .button{min-height:52px;padding:0 14px}
@media (min-width:900px){
  .lyan-footer .footer-top{grid-template-columns:auto minmax(0,1fr)}
  .lyan-footer .footer-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
  .lyan-footer .footer-brand{grid-column:auto}
  .lyan-footer .mobile-bar{display:none}
}

/* gallery/lyan-results */
/* Resultaten: per vijf foto's eerst drie staande, dan twee brede (geschikt voor voor/na). In kleur, want bij
   wenkbrauwen telt de echte kleur. Op mobiel twee naast elkaar en dan drie brede. */
.lyan-results{padding:var(--section-space) 0}
.lyan-results .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lyan-results li{min-width:0}
.lyan-results figure{position:relative;height:100%}
.lyan-results img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--corner)}
.lyan-results li:nth-child(5n+4),.lyan-results li:nth-child(5n+5){grid-column:span 2}
.lyan-results li:nth-child(5n+4) img,.lyan-results li:nth-child(5n+5) img{aspect-ratio:5/4}
.lyan-results li:nth-child(5n+3){grid-column:span 2}
.lyan-results li:nth-child(5n+3) img{aspect-ratio:5/4}
.lyan-results .label{top:14px;left:14px;transform:rotate(-3deg);box-shadow:none}
.lyan-results figcaption{margin-top:10px;font-weight:600;font-size:.9375rem}
.lyan-results figcaption small{display:block;color:var(--muted);font-weight:400}
@media (min-width:800px){
  .lyan-results .grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .lyan-results li,.lyan-results li:nth-child(5n+3){grid-column:span 2}
  .lyan-results li:nth-child(5n+3) img{aspect-ratio:4/5}
  .lyan-results li:nth-child(5n+4),.lyan-results li:nth-child(5n+5){grid-column:span 3}
  .lyan-results li:nth-child(5n+3):last-child{grid-column:span 2}
}

/* header/lyan-header */
/* Kop: logo, menu, App me. Zonder JavaScript staat het mobiele menu open. */
.lyan-header{background:var(--black);color:var(--white);position:relative;z-index:10}

/* balk */
.lyan-header .header-bar{display:flex;align-items:center;gap:24px;min-height:84px;padding-top:14px;padding-bottom:14px}
.lyan-header .logo{display:block;flex:none;margin-right:auto;border-radius:var(--corner)}
.lyan-header .logo img{height:50px;width:auto;filter:invert(1)}
.lyan-header .header-nav{display:none}
.lyan-header .header-button{display:none}
.lyan-header .menu-button{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px;border:0;border-radius:var(--corner);background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--white);font-weight:700}
.lyan-header .menu-button-line{position:relative;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.lyan-header .menu-button[aria-expanded="true"] .menu-button-line{background:transparent;box-shadow:none}
.lyan-header .menu-button[aria-expanded="true"] .menu-button-line::before,
.lyan-header .menu-button[aria-expanded="true"] .menu-button-line::after{content:"";position:absolute;left:0;top:0;width:18px;height:2px;background:currentColor;transform:rotate(45deg)}
.lyan-header .menu-button[aria-expanded="true"] .menu-button-line::after{transform:rotate(-45deg)}

.lyan-header .mobile-menu{display:none;padding:8px var(--gutter) 32px;border-top:1px solid var(--line)}
.lyan-header .mobile-menu.open{display:block}
.lyan-header .mobile-menu a:not(.button){display:block;padding:12px 0;border-bottom:1px solid var(--line);font:900 2.25rem/1 var(--large);text-transform:uppercase;text-decoration:none}
.lyan-header .mobile-menu a[aria-current]{color:var(--pink)}
.lyan-header .mobile-menu .button{margin-top:24px;width:100%}
@media (scripting:none) and (max-width:1279px){
  .lyan-header .menu-button{display:none}
  .lyan-header .mobile-menu{display:block}
}

@media (min-width:1280px){
  .lyan-header .header-bar{min-height:104px;gap:36px}
  .lyan-header .logo img{height:68px}
  .lyan-header .header-nav{display:block}
  .lyan-header .header-nav ul{display:flex;gap:4px 26px;flex-wrap:wrap;justify-content:flex-end}
  .lyan-header .header-nav a{display:block;padding:10px 0;font-weight:600;font-size:.9875rem;text-decoration:none;border-bottom:2px solid transparent}
  .lyan-header .header-nav a:hover{color:var(--pink)}
  .lyan-header .header-nav a[aria-current]{border-bottom-color:var(--pink)}
  .lyan-header .header-button{display:inline-flex}
  .lyan-header .menu-button,.lyan-header .mobile-menu{display:none}
  .lyan-header .mobile-menu.open{display:none}
}
@media (max-width:420px){
  .lyan-header .logo img{height:44px}
}

/* hero/lyan-hero */
/* Home-hero: de kop staat woord voor woord onder elkaar (min-content), het nadrukwoord in roze. De merknaam staat klein en roze erboven, ook in de h1. */
.lyan-hero{background:var(--black);color:var(--white)}
.lyan-hero .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding-top:clamp(24px,5vw,64px);padding-bottom:clamp(72px,9vw,120px)}
.lyan-hero h1 .title{display:block;font-size:clamp(5.25rem,25vw,13.5rem);width:min-content;max-width:100%;line-height:.84;margin-left:-.033em}
.lyan-hero h1 em{color:var(--pink)}
.lyan-hero h1 .subtitle{display:block;margin-bottom:18px;font:800 1.1875rem/1.2 var(--large);letter-spacing:.1em;color:var(--pink)}
.lyan-hero .hero-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:36px}
.lyan-hero .slogan{font-size:1.25rem;font-weight:600}
.lyan-hero .slogan em{font-style:normal;color:var(--pink)}
/* Vaste regel onder de knop: adres en de punten van de hero. */
.lyan-hero .hero-info{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:40px;padding:22px 0 0;border-top:1px solid rgba(247,242,238,.14);list-style:none;color:var(--grey);font-size:.9375rem}
/* "Nu open" staat bovenaan, zodat het op elke telefoon op het eerste scherm te zien is (Robin, 12-11-2026). */
.lyan-hero .hero-status{margin:0 0 16px;font-size:1rem;color:var(--white)}
.lyan-hero .hero-status:has(.status:empty){display:none}
.lyan-hero .media{position:relative;width:min(440px,calc(100% - 28px));margin:0 0 32px auto}
.lyan-hero .image{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--corner)}
.lyan-hero .label{top:22px;right:-14px}
.lyan-hero .sticker{left:-28px;bottom:-34px;width:clamp(120px,32vw,196px)}
@media (min-width:900px){
  .lyan-hero .hero-grid{grid-template-columns:min-content minmax(0,1fr);align-items:end;gap:clamp(32px,4vw,56px)}
  .lyan-hero h1 .title{font-size:clamp(8rem,17vw,13.5rem)}
  .lyan-hero h1 .subtitle{font-size:clamp(1.125rem,1.55vw,1.375rem)}
  .lyan-hero .media{width:100%;margin:0}
  .lyan-hero .sticker{left:-56px;bottom:-40px}
}
/* Breed scherm: de foto staat even hoog als het tekstblok, van de roze regel tot de onderste regel. */
@media (min-width:1200px){
  .lyan-hero .hero-grid{align-items:stretch}
  .lyan-hero .media{height:100%}
  .lyan-hero .image{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:68% 50%}
}
@media (max-width:899px){
  .lyan-hero .hero-text{order:0}
}

/* hero/lyan-page */
/* Paginakop: enorme titel; met foto staat de foto rechts (of links), zonder foto loopt de titel over de volle breedte
   met de sticker (prijs of handje) ernaast. */
.lyan-page{background:var(--black);color:var(--white);overflow:hidden}
.lyan-page .page-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding-top:clamp(32px,5vw,72px);padding-bottom:clamp(72px,9vw,128px)}
.lyan-page h1{font-size:clamp(3.4rem,13vw,7.5rem);line-height:.86}
@media (min-width:900px){.lyan-page.with-image h1{font-size:clamp(4rem,8.2vw,7.5rem)}}
.lyan-page h1 em{color:var(--pink)}
.lyan-page h1 .title{display:block;margin-left:-.028em}
.lyan-page h1 .subtitle{display:block;margin-top:.7em;font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1.05;letter-spacing:.02em}
.lyan-page .page-bottom{margin-top:clamp(28px,4vw,44px);display:grid;gap:28px;max-width:36em}
.lyan-page .intro{font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.55;color:var(--grey)}
.lyan-page .points{display:flex;flex-wrap:wrap;gap:10px 24px;font-weight:600;font-size:.9875rem}
.lyan-page .points li{display:flex;align-items:center;gap:8px}
.lyan-page .points svg{width:18px;height:18px;color:var(--pink);flex:none}

.lyan-page .media{position:relative;width:min(460px,calc(100% - 20px));margin-left:auto}
.lyan-page .image{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--corner)}
.lyan-page .label{top:22px;right:-12px}
.lyan-page .price-sticker{left:-24px;bottom:-30px;width:clamp(136px,36vw,184px);background:var(--pink);text-align:center;align-content:center;gap:4px;padding:18px;line-height:1.15}
.lyan-page .price-sticker b{display:block;font:900 clamp(2.1rem,6vw,2.75rem)/.9 var(--large);text-transform:uppercase}
.lyan-page .price-sticker span{display:block;font-size:.8125rem;font-weight:600;max-width:12em;margin:0 auto}

.lyan-page .media .hand{left:-24px;bottom:-30px;width:clamp(120px,30vw,176px)}

/* zonder foto */
.lyan-page.without-image h1{font-size:clamp(3.25rem,14vw,11rem)}
.lyan-page .media-loose{position:relative;display:flex;justify-content:flex-end}
.lyan-page .media-loose .sticker{position:relative;inset:auto}
.lyan-page .media-loose .hand{width:clamp(150px,24vw,300px)}
.lyan-page .media-loose .price-sticker{width:clamp(150px,22vw,220px)}
.lyan-page .price-sticker span{text-wrap:balance}

@media (min-width:900px){
  .lyan-page.with-image .page-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:clamp(40px,5vw,80px)}
  .lyan-page.with-image[data-image-position="left"] .page-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .lyan-page.with-image[data-image-position="left"] .media{order:-1;margin-left:0}
  .lyan-page.with-image[data-image-position="left"] .price-sticker{left:auto;right:-32px}
  .lyan-page .media{width:100%}
  .lyan-page .price-sticker,.lyan-page .media .hand{left:-48px;bottom:-36px}
  .lyan-page.without-image h1{font-size:clamp(3.25rem,10vw,11rem)}
  .lyan-page.without-image .page-grid{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .lyan-page.without-image .media-loose{align-self:start;margin-top:24px}
}

/* instagram/lyan-instagram */
/* Instagram (richting A, Raster): titel en tekst links, knop rechts, daaronder vierkante foto's die naar het bericht
   op Instagram linken. Op een telefoon twee naast elkaar, op een tablet drie, breed zes. Foto's in kleur (bij
   wenkbrauwen telt de echte kleur). BEM: lyan-instagram. */
.lyan-instagram{padding:var(--section-space) 0}
.lyan-instagram__head{display:grid;gap:22px;margin-bottom:36px}
.lyan-instagram__lead{display:grid;gap:22px;justify-items:start}
.lyan-instagram__intro{max-width:32em;color:var(--muted);font-size:1.125rem}
.lyan-instagram__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lyan-instagram__item{min-width:0}
.lyan-instagram__post{position:relative;display:block;border-radius:var(--corner)}
.lyan-instagram__image{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--corner)}
.lyan-instagram__post:hover .lyan-instagram__image{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--text)}
.lyan-instagram__badge{position:absolute;left:10px;top:10px;padding:6px 10px;border-radius:var(--corner);background:var(--black);color:var(--white);font:700 .8125rem/1 var(--sans)}
@media (min-width:700px){
  .lyan-instagram__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media (min-width:900px){
  .lyan-instagram__head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end;gap:48px;margin-bottom:56px}
}
@media (min-width:1100px){
  .lyan-instagram__list{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* reviews/lyan-quote */
/* Roze band: de titel is een groot citaat, de reviews staan eronder in kolommen. Sterren alleen als ze zijn ingevuld. */
.lyan-quote{padding:var(--section-space) 0}
.lyan-quote .quote{font-size:clamp(3rem,8.2vw,7.6rem);line-height:.9;max-width:11em}
.lyan-quote .quote::before{content:"“"}
.lyan-quote .quote::after{content:"”"}
.lyan-quote .source{margin-top:28px;font-weight:700;font-size:1.0625rem}
.lyan-quote .reviews{display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px;margin-top:clamp(56px,8vw,96px)}
.lyan-quote .reviews li{padding:24px 0;border-top:2px solid var(--black)}
.lyan-quote .stars{font-size:1.125rem;letter-spacing:.12em;margin-bottom:8px}
.lyan-quote .stars .empty{opacity:.3}
.lyan-quote blockquote p{font-size:1.0625rem;line-height:1.5;font-weight:500}
.lyan-quote figcaption{margin-top:10px;font-size:.9375rem;color:var(--muted)}
.lyan-quote figcaption b{color:var(--black)}
.lyan-quote .all{margin-top:32px;font-weight:700}
@media (min-width:700px){.lyan-quote .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* services/lyan-price-list */
/* Volledige prijslijst op gebroken wit: snelmenu met de groepen, per groep een grote kop links (blijft staan
   tijdens scrollen) en de prijzen rechts met een stippellijn ertussen. */
.lyan-price-list{padding:var(--section-space) 0}
.lyan-price-list .quick{margin-bottom:clamp(48px,7vw,88px)}
.lyan-price-list .quick ul{display:flex;flex-wrap:wrap;gap:10px}
.lyan-price-list .quick a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--black);font-weight:700;text-decoration:none}
.lyan-price-list .quick a:hover{background:var(--black);color:var(--white)}
.lyan-price-list .group{display:grid;grid-template-columns:minmax(0,1fr);gap:20px 64px;padding:40px 0;border-top:3px solid var(--black);scroll-margin-top:16px}
.lyan-price-list .group h3{font-size:clamp(2.6rem,5vw,4.25rem);align-self:start}
.lyan-price-list .lines li{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.lyan-price-list .lines li:last-child{border-bottom:0}
.lyan-price-list .name{font-weight:500;font-size:1.0625rem}
.lyan-price-list .name small,.lyan-price-list .duration{display:block;color:var(--muted);font-size:.875rem;font-weight:400}
.lyan-price-list .dot{flex:1;min-width:16px;border-bottom:2px dotted rgba(17,16,17,.28);transform:translateY(-4px)}
.lyan-price-list strong{font:800 1.5rem/1 var(--large);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.lyan-price-list strong em{font-style:normal;background:var(--pink);padding:0 .15em}
.lyan-price-list .footnote{margin-top:32px;padding:22px 24px;background:var(--black);color:var(--white);border-radius:var(--corner);max-width:46em;font-weight:500}
.lyan-price-list .actions{margin-top:28px}
@media (min-width:900px){
  .lyan-price-list .group{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:48px 0 56px}
  .lyan-price-list .group h3{position:sticky;top:24px}
}

/* services/lyan-rate */
/* Tarief van één behandeling: de eerste dienst als enorme hoofdprijs, de rest (touch-ups) eronder. */
.lyan-rate{padding:var(--section-space) 0;overflow:hidden}
.lyan-rate .rate-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px clamp(40px,7vw,120px)}
.lyan-rate h2{font-size:clamp(2.6rem,4.8vw,4.25rem)}
.lyan-rate .intro{margin-top:22px;max-width:30em;font-size:1.125rem;color:var(--muted)}
.lyan-rate .actions{margin-top:28px}
.lyan-rate .main{padding-bottom:28px;border-bottom:3px solid var(--text)}
.lyan-rate .main-name{font-weight:700;font-size:1.125rem}
.lyan-rate .main-price{font:900 clamp(4.25rem,22vw,11rem)/.82 var(--large);text-transform:uppercase;letter-spacing:-.01em;margin-top:10px;white-space:nowrap}
.lyan-rate .main-price em{font-style:normal}
.lyan-rate .main-description{margin-top:12px;color:var(--muted)}
.lyan-rate .lines li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.lyan-rate .lines small{display:block;color:var(--muted);font-size:.875rem}
.lyan-rate .lines strong{font:800 1.5rem/1 var(--large);letter-spacing:.02em;white-space:nowrap}
.lyan-rate .lines strong em{font-style:normal}
.lyan-rate .lines:empty{display:none}
.lyan-rate .footnote{margin-top:22px;font-size:.9375rem;color:var(--muted)}
@media (min-width:900px){
  .lyan-rate .rate-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
  .lyan-rate .main-price{font-size:clamp(5rem,11vw,10rem)}
}

/* services/lyan-specialties */
/* Prijzen per vak (Haar / Brows & ink): elke groep heeft een enorme kop en een prijslijst. */
.lyan-specialties{background:var(--black);color:var(--white);border-top:1px solid var(--line);padding:var(--section-space) 0}
.lyan-specialties .header-split h2{font-size:clamp(2.4rem,4.4vw,3.75rem)}
.lyan-specialties .specialties-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:72px clamp(40px,7vw,112px)}
.lyan-specialties .specialty h3{font-size:clamp(3.4rem,7.4vw,6.25rem);margin-bottom:22px}
.lyan-specialties .lines li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.lyan-specialties .lines li:first-child{border-top:1px solid var(--line)}
.lyan-specialties .name small{display:block;color:var(--grey);font-size:.875rem}
.lyan-specialties strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.lyan-specialties strong em{font-style:normal;color:var(--pink)}
.lyan-specialties .more-row{margin-top:48px}
.lyan-specialties .more{display:inline-flex;align-items:center;gap:12px;min-height:48px;font:900 1.75rem/1 var(--large);text-transform:uppercase;letter-spacing:.02em;color:var(--pink);text-decoration:none;border-bottom:3px solid var(--pink)}
.lyan-specialties .more svg{width:26px;height:26px;transition:transform .2s}
.lyan-specialties .more:hover svg{transform:translateX(4px)}
.lyan-specialties .footnote{margin-top:20px;color:var(--grey);font-size:.9375rem;max-width:44em}
@media (min-width:900px){
  .lyan-specialties .specialties-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* services/lyan-techniques */
/* Technieken: genummerde rijen met een brede foto (bijv. een strook wenkbrauw) in kleur. */
.lyan-techniques{padding:var(--section-space) 0;counter-reset:techniek}
.lyan-techniques .techniques li{counter-increment:techniek;display:grid;grid-template-columns:minmax(0,1fr);gap:18px 48px;align-items:center;padding:32px 0;border-top:3px solid var(--text)}
.lyan-techniques .techniques li:last-child{border-bottom:3px solid var(--text)}
.lyan-techniques h3{font-size:clamp(2rem,3.6vw,3rem);display:flex;gap:18px;align-items:baseline}
.lyan-techniques h3::before{content:counter(techniek,decimal-leading-zero);font-size:.55em;color:var(--accent-text);letter-spacing:.06em}
.lyan-techniques .technique-text p{margin-top:10px;color:var(--muted);max-width:30em}
.lyan-techniques .technique-text .price{color:var(--text);font-weight:700}
.lyan-techniques img{width:100%;aspect-ratio:18/5;object-fit:cover;border-radius:var(--corner)}
.lyan-techniques .footnote{margin-top:24px;color:var(--muted);max-width:44em}
.lyan-techniques .actions{margin-top:28px}
@media (min-width:900px){
  .lyan-techniques .techniques li{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* steps/lyan-journey */
/* Traject: kop links (blijft staan), stappen rechts onder elkaar; de slotstap in roze. */
.lyan-journey{padding:var(--section-space) 0}
.lyan-journey .journey-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px clamp(40px,7vw,112px);align-items:start}
.lyan-journey .intro{margin-top:24px;color:var(--muted);font-size:1.125rem;max-width:30em}
.lyan-journey .box{margin-top:32px;padding:24px;border:2px solid var(--text);border-radius:var(--corner)}
.lyan-journey .box h3{font-size:1.75rem;margin-bottom:10px}
.lyan-journey .box li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--line)}
.lyan-journey .box p{margin-top:10px;color:var(--muted);font-size:.9375rem}
.lyan-journey .steps li{padding:30px 0;border-top:1px solid var(--line)}
.lyan-journey .steps h3{font-size:clamp(1.9rem,2.8vw,2.5rem);margin-bottom:10px}
.lyan-journey .steps p{color:var(--muted);max-width:34em}
.lyan-journey .steps li.final{margin-top:12px;padding:30px clamp(20px,3vw,32px);border:0;border-radius:var(--corner);background:var(--pink);color:var(--black)}
.lyan-journey .steps li.final p{color:var(--black)}
@media (min-width:1000px){
  .lyan-journey .journey-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .lyan-journey .journey-head{position:sticky;top:24px}
}

/* text-media/lyan-list */
/* Lijst: elke alinea van de tekst is een regel met een kruisje (bijv. "Ik behandel niet als je…"). */
.lyan-list{padding:var(--section-space) 0;--cross:var(--pink)}
[data-background="white"].lyan-list,[data-background="pink"].lyan-list{--cross:var(--black)}
.lyan-list .list-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px clamp(40px,7vw,112px);align-items:start}
.lyan-list h2{font-size:clamp(2.9rem,6vw,5.2rem)}
.lyan-list .box{margin-top:24px;color:var(--muted);max-width:28em}
.lyan-list .box b{color:var(--text)}
.lyan-list .actions{margin-top:28px}
.lyan-list .lines{display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px}
.lyan-list .lines li{position:relative;padding:16px 0 16px 38px;border-bottom:1px solid var(--line);font-size:1.125rem;font-weight:500}
.lyan-list .lines li::before{content:"";position:absolute;left:2px;top:22px;width:16px;height:16px;
  background:linear-gradient(45deg,transparent 40%,var(--cross) 40% 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,var(--cross) 40% 60%,transparent 60%)}
@media (min-width:700px){.lyan-list .lines{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .lyan-list .list-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .lyan-list .list-head{position:sticky;top:24px}
}

/* text-media/lyan-story */
/* Verhaal: tekst naast een vierkante zwart-witfoto. Zonder foto staat de kop links en de tekst rechts. */
.lyan-story{padding:var(--section-space) 0}
.lyan-story .story-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px clamp(40px,7vw,112px);align-items:center}
.lyan-story .story-image{position:relative;width:min(520px,calc(100% - 12px))}
.lyan-story .story-image img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--corner)}
.lyan-story .story-image .label{bottom:28px;right:-12px;transform:rotate(-4deg)}
.lyan-story h2{margin-bottom:28px}
.lyan-story .paragraphs p{color:var(--muted);font-size:1.125rem;max-width:36em}
.lyan-story .paragraphs p + p{margin-top:16px}
.lyan-story .paragraphs em{font-style:normal;font-weight:700;color:var(--text)}
.lyan-story .points{margin-top:28px;display:grid;max-width:36em}
.lyan-story .points li{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-weight:600}
.lyan-story .points li::before{content:"";flex:none;width:9px;height:9px;background:var(--pink);transform:rotate(45deg) translateY(-2px)}
[data-background="pink"].lyan-story .points li::before,[data-background="white"].lyan-story .points li::before{background:var(--black)}
.lyan-story .box{margin-top:32px;padding:24px 26px;border-left:6px solid var(--pink);background:rgba(247,242,238,.06);max-width:36em}
[data-background="white"].lyan-story .box{background:rgba(17,16,17,.05)}
[data-background="pink"].lyan-story .box{border-left-color:var(--black);background:rgba(17,16,17,.07)}
.lyan-story .box-title{font:900 1.75rem/1 var(--large);text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.lyan-story .box p:not(.box-title){color:var(--muted)}
.lyan-story .actions{margin-top:32px}
@media (min-width:900px){
  .lyan-story.with-image .story-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .lyan-story.with-image .story-image{order:2;width:100%}
  .lyan-story.with-image[data-image-position="left"] .story-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .lyan-story.with-image[data-image-position="left"] .story-image{order:0}

  .lyan-story.without-image .story-text{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,7vw,112px);align-items:start}
  .lyan-story.without-image h2{margin-bottom:0;font-size:clamp(2.4rem,4.2vw,4rem);line-height:.95}
  .lyan-story.without-image .story-body{padding-top:36px}
}

/* Banner van Nuu */
.nuu-banner{position:relative;z-index:60;background:#211e1a;color:#fbf8f1;font-size:15px;line-height:1.4;font-weight:600}
.nuu-banner__in{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center;text-align:center}
.nuu-banner__label{background:#ffd23f;color:#211e1a;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.nuu-banner a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.nuu-banner__toggle{display:none}
@media (max-width:600px){
.nuu-banner--kort .nuu-banner__in,.nuu-banner--open .nuu-banner__in{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;text-align:left}
.nuu-banner--kort .nuu-banner__text,.nuu-banner--open .nuu-banner__text{flex:1;min-width:0;padding-top:1px}
.nuu-banner--kort .nuu-banner__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nuu-banner--kort .nuu-banner__label,.nuu-banner--open .nuu-banner__label{flex:none}
.nuu-banner--kort .nuu-banner__toggle,.nuu-banner--open .nuu-banner__toggle{display:inline-flex;flex:none;align-items:center;min-height:32px;margin:-5px -4px -5px 0;padding:0 4px;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
}