/* G. Bouwman Herenkapsalon, eigen ontwerp, geen sjabloon. */

:root {
  --zwart: #1b140d;
  --creme: #f6efe2;
  --creme-2: #efe4cd;
  --inkt: #221a12;
  --inkt-zacht: #5c5140;
  --goud: #ad7f2c;
  --goud-tekst: #7c5c1e;
  --goud-licht: #d9b96a;
  --rood: #7c2a28;
  --lijn: rgba(34, 26, 18, .14);
  --lijn-donker: rgba(246, 239, 226, .22);
  --schaduw: 0 18px 40px -22px rgba(27, 20, 13, .45);

  --font-kop: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --font-tekst: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --opening-achtergrond: #1b140d;
  --opening-demping: .58;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-kop);
  color: var(--inkt);
  margin: 0;
  font-weight: 560;
  letter-spacing: -.01em;
}

p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--zwart);
  color: var(--creme);
  padding: .75rem 1.25rem;
  border-radius: .4rem;
  z-index: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  color: var(--goud-tekst);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .14em;
  font-weight: 600;
}
.kicker svg { flex: none; }

/* ---- knoppen ------------------------------------------------------------ */

.knop {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop--goud {
  background: var(--goud);
  color: var(--zwart);
}
.knop--goud:hover { background: var(--goud-licht); }

.knop--lijn {
  background: transparent;
  color: var(--inkt);
  border-color: var(--lijn);
}
.knop--lijn:hover { border-color: var(--goud); color: var(--goud-tekst); }

.opening .knop--lijn {
  color: var(--creme);
  border-color: var(--lijn-donker);
}
.opening .knop--lijn:hover { border-color: var(--goud-licht); color: var(--goud-licht); }

/* ---- topbar -------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 500;
  isolation: isolate;
  background: var(--creme);
  border-bottom: 1px solid var(--lijn);
}

.topbar__rij {
  max-width: 1180px;
  margin: 0 auto;
  padding: .7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
}
.topbar__naam {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--inkt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__naam-sub {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--inkt-zacht);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-size: .94rem;
  font-weight: 500;
}

.topnav a:not(.topnav__bel) {
  text-decoration: none;
  color: var(--inkt-zacht);
  position: relative;
  padding: .2rem 0;
}
.topnav a:not(.topnav__bel)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--goud);
  transition: right .22s ease;
}
.topnav a:not(.topnav__bel):hover { color: var(--inkt); }
.topnav a:not(.topnav__bel):hover::after { right: 0; }

.topnav__bel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--zwart);
  color: var(--creme);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  transition: background-color .18s ease;
}
.topnav__bel:hover { background: var(--goud); color: var(--zwart); }

.topbar__toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: .5rem;
  background: transparent;
  cursor: pointer;
}
.topbar__toggle-streep {
  display: block;
  height: 2px;
  margin: 0 8px;
  background: var(--inkt);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 860px) {
  .topbar__toggle { display: flex; }
  .topnav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--lijn);
    box-shadow: var(--schaduw);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .topnav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
  }
  .topnav a:not(.topnav__bel) { padding: .95rem 1.5rem; border-bottom: 1px solid var(--lijn); }
  .topnav a:not(.topnav__bel)::after { display: none; }
  .topnav__bel { margin: 1rem 1.5rem 1.4rem; justify-content: center; }
}

.topbar__toggle[aria-expanded="true"] .topbar__toggle-streep:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-streep:nth-child(2) { opacity: 0; }
.topbar__toggle[aria-expanded="true"] .topbar__toggle-streep:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- opening (hero) ------------------------------------------------------ */

/* De echte zaak als achtergrond; donkerder zodat de kernzin midden op het beeld leesbaar blijft. */
.opening__foto { filter: brightness(.55) saturate(.9); }
/* Schermvullend: de algemene sectie-padding gold voor de typografische versie. */
.opening { padding: 0; }
.opening__zin { text-shadow: 0 2px 18px rgba(0, 0, 0, .65); }

.opening__sfeer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  color: var(--goud);
}
.opening__jaartal {
  position: absolute;
  right: clamp(-2rem, -1vw, 1rem);
  bottom: clamp(-3rem, 2vh, 1rem);
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: clamp(9rem, 32vw, 24rem);
  line-height: 1;
  color: rgba(217, 185, 106, .1);
  user-select: none;
}
.opening__schaar {
  position: absolute;
  top: 12%;
  left: 6%;
  width: clamp(3.5rem, 9vw, 7rem);
  height: auto;
  opacity: .22;
  transform: rotate(-12deg);
}

.opening__kop {
  padding: 0 1.5rem clamp(5.5rem, 15svh, 9rem);
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  left: 0; right: 0;
}

.opening__opmaat {
  color: var(--goud-licht);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  font-weight: 600;
  margin: 0 0 1.1rem;
}

.opening__kop h1 {
  color: var(--creme);
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
}

.opening__zin-kort {
  color: rgba(246, 239, 226, .82);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 32rem;
  margin: 0 auto 2.1rem;
}

.opening__knoppen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.opening__zin {
  font-family: var(--font-kop);
  font-style: italic;
  font-weight: 500;
  color: var(--creme);
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  line-height: 1.25;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 44rem;
  margin: 0 auto;
}

.opening__wenk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: rgba(246, 239, 226, .7);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}
@media (prefers-reduced-motion: no-preference) {
  .opening__wenk svg { animation: wenk-op-neer 1.8s ease-in-out infinite; }
}
@keyframes wenk-op-neer {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---- onthullen (reveal) --------------------------------------------------- */

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
html.js .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(18px);
}

/* ---- algemene sectiestructuur --------------------------------------------- */

main section {
  padding: clamp(3.8rem, 9vw, 6.5rem) 1.5rem;
}

.over, .prijzen__rijen, .contact {
  max-width: 1180px;
  margin: 0 auto;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
}

/* ---- over ons -------------------------------------------------------------- */

.over {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.over__tekst p { color: var(--inkt-zacht); }
.over__tekst p + p { margin-top: 1.1rem; }

.over__tekst h2 { margin-bottom: 1.1rem; }

.praatje {
  font-family: var(--font-kop);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--inkt) !important;
  margin-top: 1.5rem !important;
  padding-left: 1.1rem;
  border-left: 2px solid var(--goud);
}

.over__extra {
  margin-top: 1.4rem !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--rood) !important;
}

.over__fotos {
  position: relative;
  padding: 1.2rem 2.4rem 2.4rem 0;
}

.over__foto-groot, .over__foto-klein {
  margin: 0;
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: var(--schaduw);
  border: 1px solid var(--lijn);
}

.over__foto-groot { aspect-ratio: 4 / 5; }
.over__foto-groot img, .over__foto-klein img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.over__foto-klein {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 4 / 3;
  background: var(--creme);
  padding: .5rem;
  box-shadow: 0 16px 30px -16px rgba(27, 20, 13, .5);
}
.over__foto-klein img { border-radius: .3rem; }

@media (max-width: 900px) {
  .over { grid-template-columns: 1fr; }
  .over__fotos { order: -1; padding: 0 1.6rem 2.6rem 0; max-width: 26rem; margin: 0 auto; }
}

/* ---- prijzen ---------------------------------------------------------------- */

.prijzen {
  background: var(--creme-2);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}

.prijzen__kop { text-align: center; max-width: 36rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.prijzen__kop .kicker { justify-content: center; }

.prijzen__rijen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.prijslijst {
  background: var(--creme);
  border: 1px solid var(--lijn);
  border-radius: .7rem;
  padding: clamp(1.6rem, 3vw, 2.3rem);
}

.prijslijst h3 {
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--goud);
  display: inline-block;
}

.prijslijst ul { list-style: none; margin: 0; padding: 0; }

.prijs-regel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .72rem 0;
  border-bottom: 1px dashed var(--lijn);
}
.prijs-regel:last-child { border-bottom: 0; }

.prijs-naam { color: var(--inkt); }
.prijs-bedrag {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--goud-tekst);
  white-space: nowrap;
}

.prijzen__afspraak {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.prijzen__afspraak p { color: var(--inkt-zacht); max-width: 30rem; }

@media (max-width: 700px) {
  .prijzen__rijen { grid-template-columns: 1fr; }
}

/* ---- sfeerband (foto-overgang tussen prijzen en openingstijden) ---------------- */

.sfeerband {
  position: relative;
  padding: 0;
  min-height: clamp(16rem, 38vw, 24rem);
  overflow: hidden;
}

.sfeerband__beeld { position: absolute; inset: 0; }
.sfeerband__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.sfeerband__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 20, 13, .12) 0%, rgba(27, 20, 13, .55) 60%, rgba(27, 20, 13, .86) 100%);
}

.sfeerband__tekst {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem clamp(2rem, 5vw, 3rem);
  box-sizing: border-box;
}

.sfeerband__adres {
  font-family: var(--font-kop);
  color: var(--creme);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 560;
}

.sfeerband__sinds {
  color: rgba(246, 239, 226, .82);
  font-size: .95rem;
  letter-spacing: .04em;
  margin-top: .4rem !important;
}

/* ---- openingstijden ----------------------------------------------------------- */

.tijden__kop { text-align: center; max-width: 36rem; margin: 0 auto clamp(2.2rem, 5vw, 3rem); }
.tijden__kop .kicker { justify-content: center; }

.tijden__lijst {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 40rem;
  border-top: 1px solid var(--lijn);
}

.tijden-regel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--lijn);
}

.tijden-dag { font-weight: 600; }
.tijden-tijd { color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.tijden-tijd--dicht { color: var(--rood); }

.tijden-regel--extra {
  flex-wrap: wrap;
  border-left: 2px solid var(--goud);
  padding-left: 1rem;
  background: rgba(173, 127, 44, .06);
}
.tijden-badge {
  flex-basis: 100%;
  font-size: .82rem;
  color: var(--goud-tekst);
  font-weight: 600;
}

/* ---- contact ---------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: stretch;
}

.contact__info h2 { margin-bottom: 1rem; }
.contact__adres { color: var(--inkt-zacht); margin-bottom: 1.4rem !important; }

.contact__lijst {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.contact__lijst li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.contact__label {
  color: var(--inkt-zacht);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  min-width: 8.5rem;
}
.contact__lijst a {
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--lijn);
}
.contact__lijst a:hover { color: var(--goud-tekst); border-color: var(--goud); }

.contact__parkeren {
  color: var(--inkt-zacht);
  font-size: .92rem;
  margin-bottom: 1.6rem !important;
}

.contact__kaart {
  border-radius: .7rem;
  overflow: hidden;
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw);
  min-height: 20rem;
}
.contact__kaart iframe { width: 100%; height: 100%; min-height: 20rem; border: 0; display: block; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
}

/* ---- footer ---------------------------------------------------------------- */

.footer {
  background: var(--zwart);
  color: rgba(246, 239, 226, .82);
  padding: clamp(2.5rem, 5vw, 3.5rem) 1.5rem clamp(1.6rem, 3vw, 2rem);
}

.footer__rij {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer__merk {
  display: inline-flex;
  align-items: center;
  background: var(--creme);
  padding: .5rem .9rem;
  border-radius: .4rem;
}

.footer__logo {
  height: 24px;
  width: auto;
  display: block;
}

.footer__nav {
  display: flex;
  gap: 1.6rem;
  font-size: .9rem;
  flex-wrap: wrap;
}
.footer__nav a { text-decoration: none; color: inherit; }
.footer__nav a:hover { color: var(--goud-licht); }

.footer__rij--klein {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lijn-donker);
  font-size: .82rem;
  color: rgba(246, 239, 226, .55);
}
.footer__rij--klein a { text-decoration: none; color: inherit; }
.footer__rij--klein a:hover { color: var(--goud-licht); }