/* =========================================================
   1st Choice Hair — Eerste River
   Palette lifted from the actual shopfront signage:
   Colours sampled directly from the shop's logo: cobalt blue, true red, white.
   Neutrals tinted toward the blue.
   ========================================================= */

:root{
  /* ---- palette sampled from the actual logo ----
     #075DAB primary blue (h208)  #02315F deep blue  #E00A13 red (h357)  white.
     There is no pink and no yellow in the mark, so there is none on the page.
     The two halves of the shop are told apart by LIGHT vs DARK, not by hue. */
  --blue:        oklch(0.47 0.16 249);   /* #075DAB */
  --blue-mid:    oklch(0.43 0.15 249);   /* #035199 */
  --blue-deep:   oklch(0.31 0.11 250);   /* #02315F */
  --blue-dark:   oklch(0.25 0.09 250);
  --blue-wash:   oklch(0.96 0.016 245);  /* palest blue, salon side */
  --red:         oklch(0.55 0.23 29);    /* #E00A13 */
  --red-on-dark: oklch(0.68 0.21 27);    /* red legible on deep blue */
  /* official WhatsApp brand green (Simple Icons #25D366).
     White on it is only 1.98:1, so the label/icon use WhatsApp's own dark
     ink #0b141a instead — 9.38:1, and it matches WhatsApp's own UI. */
  --wa:          #25D366;
  --wa-hover:    #1FBF5A;
  --wa-ink:      #0b141a;

  /* type scale — 5 steps, every gap >= 1.25 */
  --t-label: 0.8rem;                          /* 12.8 */
  --t-body:  1rem;                            /* 16   */
  --t-lead:  1.25rem;                         /* 20   */
  --t-h2:    clamp(1.75rem, 3.6vw, 2.6rem);   /* 28-42 */
  --t-h1:    clamp(2.2rem, 5.4vw, 3.9rem);    /* 35-62 */

  /* tinted neutrals — never pure black or white */
  --ink:         oklch(0.22 0.035 250);
  --ink-mid:     oklch(0.42 0.030 250);
  --ink-soft:    oklch(0.55 0.025 250);
  --paper:       oklch(0.985 0.006 250);
  --paper-2:     oklch(0.965 0.010 250);
  --line:        oklch(0.90 0.015 250);

  --r:   14px;
  --r-l: 22px;
  --wrap: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:78px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:'Rubik',system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* no overflow-x:hidden — it clipped the fixed mobile bar, and there is no overflow */
}

h1,h2,h3,.brand{ font-family:'Outfit',system-ui,sans-serif; line-height:1.08; letter-spacing:-0.02em; margin:0; }
h1{ font-size:var(--t-h1); font-weight:800; }
h2{ font-size:var(--t-h2); font-weight:700; }
h3{ font-size:var(--t-lead); font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1rem; }
img{ max-width:100%; display:block; }

a{ color:var(--blue); text-underline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--blue); outline-offset:3px; border-radius:6px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--blue); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

.eyebrow{
  font-family:'Outfit',sans-serif; font-weight:600; font-size:var(--t-label);
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
  margin:0 0 .85rem;
}
.eyebrow-pink{ color:var(--red); }               /* salon side, on pale blue */
.eyebrow-yellow{ color:var(--red-on-dark); }     /* barber side, on deep blue */

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.85rem 1.6rem;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:var(--t-body);
  border-radius:100px; text-decoration:none; cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-wa{ background:var(--wa); color:var(--wa-ink); }   /* official brand green + WhatsApp dark ink */
.btn-wa:hover{ background:var(--wa-hover); }
.btn-ghost{ background:transparent; color:var(--ink); border:2px solid var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-ghost-light{ color:#fff; border-color:oklch(1 0 0 / .45); }
.btn-ghost-light:hover{ background:oklch(1 0 0 / .12); border-color:#fff; color:#fff; }

/* ---------------- brand lockup: the real badge + name ---------------- */
.brand{
  display:inline-flex; align-items:center; gap:.65rem;
  text-decoration:none; white-space:nowrap;
}
.brand img{ width:52px; height:52px; object-fit:contain; }
.brand-name{
  display:flex; flex-direction:column; line-height:1.05;
  font-family:'Outfit',sans-serif; font-weight:800; font-size:var(--t-body);
  color:var(--blue); letter-spacing:-0.01em;
}
.brand-name em{
  font-style:normal; font-weight:600; font-size:.74em;
  letter-spacing:.06em; text-transform:uppercase; color:var(--red);
}
.brand-foot img{ width:66px; height:66px; }
.brand-foot .brand-name{ font-size:var(--t-lead); color:#fff; }
.brand-foot .brand-name em{ color:var(--red-on-dark); }

/* circular frame around the badge in the hero */
.hero-badge{
  width:132px; height:132px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:1.4rem;
  background:#fff;
  box-shadow:0 0 0 3px var(--blue), 0 0 0 9px oklch(0.47 0.16 249 / .14),
             0 14px 34px oklch(0.24 0.11 250 / .20);
}
.hero-badge img{ width:112px; height:112px; object-fit:contain; }

/* ---------------- nav ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:oklch(0.985 0.006 250 / .92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--wrap); margin:0 auto; padding:.85rem 1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-links{ display:flex; align-items:center; gap:1.6rem; }
.nav-links > a{
  font-family:'Outfit',sans-serif; font-weight:500; font-size:var(--t-body);
  color:var(--ink-mid); text-decoration:none; transition:color .2s var(--ease);
}
.nav-links > a:hover{ color:var(--blue); }
.nav-cta{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--wa); color:var(--wa-ink) !important; padding:.6rem 1.1rem;
  border-radius:100px; font-weight:600; min-height:44px;
}
.nav-cta:hover{ background:var(--wa-hover); }
.nav-toggle{
  display:none; background:none; border:0; color:var(--ink);
  min-width:44px; min-height:44px; cursor:pointer; align-items:center; justify-content:center;
}

/* ---------------- hero ---------------- */
.hero{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(3rem,7vw,5.4rem) 1.4rem clamp(2.6rem,6vw,4.2rem);
}
.hero-copy{ max-width:47rem; }
.hero h1 em{ font-style:normal; color:var(--blue); display:block; }
.lede{
  font-size:var(--t-lead); color:var(--ink-mid);
  max-width:36em; margin-top:1.3rem;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.9rem; }

/* ---------------- trust strip ---------------- */
.strip{ border-block:1px solid var(--line); background:var(--paper-2); margin-top:clamp(2.6rem,6vw,4.4rem); }
.strip ul{
  max-width:var(--wrap); margin:0 auto; padding:1.5rem 1.4rem;
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
.strip li{
  display:flex; align-items:center; gap:.65rem;
  font-size:var(--t-body); font-weight:500; color:var(--ink-mid); line-height:1.35;
}
.strip svg{ width:22px; height:22px; flex:0 0 22px; color:var(--blue); }

/* ---------------- pitch ---------------- */
.pitch{ padding:clamp(3.4rem,8vw,6rem) 1.4rem; }
.pitch-inner{ max-width:44rem; margin:0 auto; }
.pitch h2{ margin-bottom:1.5rem; }
.pitch p{ color:var(--ink-mid); font-size:var(--t-body); }
/* background tint, not a side stripe */
.pitch-turn{
  color:var(--ink); font-weight:500; margin-top:1.8rem;
  background:var(--blue-wash); padding:1.4rem 1.5rem; border-radius:var(--r);
}

/* ---------------- service menus ---------------- */
.menu{ padding:clamp(3rem,7vw,5.4rem) 1.4rem; }
/* salon side = the LIGHT half. Ink darkens to hold 4.5:1 on the tint. */
.menu-salon{ background:var(--blue-wash); --ink-mid:oklch(0.36 0.030 250); }
.menu-barber{ background:var(--blue-dark); color:oklch(0.93 0.012 250); }
.menu-head{ max-width:var(--wrap); margin:0 auto 2.6rem; max-width:42rem; }
.menu-head p:not(.eyebrow){ color:var(--ink-mid); font-size:var(--t-lead); margin-top:.9rem; }
.menu-barber .menu-head p:not(.eyebrow){ color:oklch(0.80 0.025 250); }
.menu-barber h2{ color:#fff; }

/* ---- the price board ----
   Not cards. A wall board: service name in the left column, what you get on the
   right, a hairline rule between each. The two services each side is actually
   known for (.is-lead) are set larger, so the list carries weight instead of
   being N identical tiles. */
.board{
  max-width:var(--wrap); margin:0 auto; padding:0; list-style:none;
  border-top:1px solid oklch(0.47 0.16 249 / .30);
}
.menu-barber .board{ border-top-color:oklch(1 0 0 / .24); }

.board-row{
  display:grid; grid-template-columns:minmax(9rem,15rem) 1fr;
  gap:.35rem clamp(1.5rem,4vw,4rem);
  padding:1.5rem 0;
  border-bottom:1px solid oklch(0.47 0.16 249 / .22);
  align-items:baseline;
}
.menu-barber .board-row{ border-bottom-color:oklch(1 0 0 / .14); }

.board-row h3{ margin:0; color:var(--ink); }
.menu-barber .board-row h3{ color:#fff; }
.board-row p{ margin:0; color:var(--ink-mid); max-width:52ch; }
.menu-barber .board-row p{ color:oklch(0.84 0.02 250); }

.board-row.is-lead{ padding:1.9rem 0; }
.board-row.is-lead h3{ font-size:var(--t-h2); font-weight:700; line-height:1.05; }
.board-row.is-lead p{ font-size:var(--t-lead); color:var(--ink); }
.menu-barber .board-row.is-lead p{ color:oklch(0.93 0.012 250); }

.menu-note{
  max-width:var(--wrap); margin:1.7rem auto 0; max-width:44rem;
  font-size:var(--t-body); color:var(--ink-mid);
}

/* ---------------- kids ---------------- */
.kids{
  max-width:46rem; margin:0 auto; padding:clamp(3.4rem,8vw,5.6rem) 1.4rem;
}
.kids-copy p{ color:var(--ink-mid); }
.kids-copy h2{ margin-bottom:1.1rem; }
blockquote{
  margin:1.8rem 0 0; padding:1.4rem 1.5rem;
  background:var(--blue-wash); border-radius:var(--r);
}
blockquote p{ margin:0 0 .6rem; font-size:var(--t-lead); color:var(--ink); font-weight:500; }
blockquote cite{ font-size:var(--t-label); color:oklch(0.40 0.030 250); font-style:normal; }

/* ---------------- gallery ---------------- */

/* ---------------- tiktok feed ---------------- */
.tt{ background:var(--blue-deep); padding:clamp(3.4rem,8vw,5.6rem) 1.4rem; }
.tt-head{ max-width:var(--wrap); margin:0 auto 2.2rem; text-align:center; }
.tt-head h2{ color:#fff; }
.tt-head p{ color:oklch(0.86 0.03 250); margin:.9rem auto 1.4rem; max-width:38rem; }
.tt-follow{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#fff; color:var(--blue-deep); text-decoration:none;
  padding:.7rem 1.35rem; border-radius:100px; min-height:44px;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:var(--t-body);
  transition:transform .2s var(--ease), background-color .2s var(--ease);
}
.tt-follow:hover{ background:var(--blue-wash); }

.tt-grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;
}
.tt-tile{
  position:relative; display:block; aspect-ratio:1; overflow:hidden;
  border-radius:var(--r); background:var(--blue-dark);
}
.tt-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease), filter .3s var(--ease);
}
.tt-tile:hover img{ transform:scale(1.06); filter:brightness(.72); }
.tt-play{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transition:opacity .25s var(--ease); pointer-events:none;
}
.tt-play svg{
  width:46px; height:46px; color:#fff;
  filter:drop-shadow(0 3px 10px oklch(0 0 0 / .55));
}
.tt-tile:hover .tt-play, .tt-tile:focus-visible .tt-play{ opacity:1; }
.tt-meta{
  position:absolute; left:.6rem; bottom:.55rem; z-index:2;
  display:inline-flex; align-items:center; gap:.32rem;
  font-size:var(--t-label); font-weight:600; color:#fff;
  text-shadow:0 1px 6px oklch(0 0 0 / .8); pointer-events:none;
}
.tt-meta svg{ width:14px; height:14px; }

/* ---------------- visit ---------------- */
.visit{
  max-width:var(--wrap); margin:0 auto; padding:clamp(3.4rem,8vw,5.6rem) 1.4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center;
}
.nap{ margin:1.8rem 0; display:grid; gap:1.3rem; }
.nap dt{
  font-family:'Outfit',sans-serif; font-weight:600; font-size:var(--t-label);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.3rem;
}
.nap dd{ margin:0; font-size:var(--t-body); line-height:1.55; }
.nap .muted{ color:var(--ink-soft); font-size:var(--t-label); }
.visit-map{ border-radius:var(--r-l); overflow:hidden; box-shadow:0 18px 44px oklch(0.24 0.11 250 / .18); }
.visit-map iframe{ width:100%; height:100%; min-height:400px; border:0; display:block; }

/* ---------------- faq ---------------- */
.faq{ background:var(--paper-2); border-top:1px solid var(--line); padding:clamp(3.4rem,8vw,5.6rem) 1.4rem; }
.faq h2{ max-width:46rem; margin:0 auto 2.2rem; }
.faq-list{ max-width:46rem; margin:0 auto; }
details{ border-bottom:1px solid var(--line); }
summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.4rem 1.15rem 0; position:relative;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:var(--t-lead); color:var(--ink);
  min-height:44px; display:flex; align-items:center;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:''; position:absolute; right:.4rem; top:50%;
  width:10px; height:10px; margin-top:-6px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
details p{ margin:0 0 1.2rem; color:var(--ink-mid); font-size:var(--t-body); max-width:60ch; }

/* ---------------- final cta ---------------- */
.final{
  background:var(--blue-deep); color:#fff; text-align:center;
  padding:clamp(3.4rem,8vw,5.4rem) 1.4rem;
}
.final h2{ color:#fff; }
.final p{ color:oklch(0.86 0.03 250); margin:1rem auto 0; max-width:34rem; }
.final .hero-ctas{ justify-content:center; }

/* ---------------- footer ---------------- */
.foot{ background:var(--blue-dark); color:oklch(0.86 0.02 250); padding:3.2rem 1.4rem 1.6rem; }
.foot-inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2.2rem;
}
.foot .brand{ font-size:var(--t-lead); margin-bottom:.8rem; }
.foot .brand-1st, .foot .brand-choice{ color:var(--red-on-dark); }
.foot .brand-hair{ color:oklch(0.78 0.13 258); }
.foot-brand p{ font-size:var(--t-body); line-height:1.6; margin:0; color:oklch(0.82 0.02 250); }
/* align-items:flex-start so each link is only as wide as its own text —
   otherwise the flex column stretches the anchor across the whole row */
.foot-links{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
.foot-links a, .foot-contact a{
  color:oklch(0.86 0.02 250); text-decoration:none; font-size:var(--t-body);
  min-height:24px; display:inline-flex; align-items:center; width:fit-content;
}
.foot-links a:hover, .foot-contact a:hover{ color:#fff; text-decoration:underline; }
.foot-contact{ display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; }
/* brand green reads 8.4:1 on the navy footer */
.foot-wa{ display:inline-flex; align-items:center; gap:.65rem; color:var(--wa) !important; }
.foot-wa:hover{ color:var(--wa-hover) !important; }
.foot-fine{
  max-width:var(--wrap); margin:2.6rem auto 0; padding-top:1.4rem;
  border-top:1px solid oklch(1 0 0 / .12);
  font-size:var(--t-label); color:oklch(0.76 0.02 250);
}
.foot-fine a{ color:oklch(0.86 0.02 250); text-decoration:underline; text-underline-offset:2px; }
.foot-fine a:hover{ color:#fff; }

/* ---------------- sticky mobile bar ---------------- */
.mobile-bar{ display:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 940px){
  .visit{ grid-template-columns:1fr; }
    .strip ul{ grid-template-columns:repeat(2,1fr); }
        .foot-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  body{ font-size:16px; }

  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem 1.4rem 1.2rem;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links > a{ padding:.9rem 0; border-bottom:1px solid var(--line); min-height:44px; display:flex; align-items:center; }
  .nav-cta{ margin-top:.9rem; justify-content:center; }


  /* board stacks: name above description */
  .board-row{ grid-template-columns:1fr; gap:.45rem; padding:1.25rem 0; }
  .board-row.is-lead{ padding:1.5rem 0; }
  .tt-grid{ grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .brand img{ width:44px; height:44px; }
  .brand-name{ font-size:.92rem; }
  .hero-badge{ width:104px; height:104px; margin-bottom:1.1rem; }
  .hero-badge img{ width:88px; height:88px; }
  .strip ul{ grid-template-columns:1fr; gap:1rem; }
      .foot-inner{ grid-template-columns:1fr; gap:1.8rem; }

  /* sticky call bar */
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:oklch(0.985 0.006 250 / .95); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:50px;
    border-radius:100px; font-family:'Outfit',sans-serif; font-weight:600;
    text-decoration:none; font-size:var(--t-body);
  }
  .mb-wa{ background:var(--wa); color:var(--wa-ink); }
  .mb-call{ background:var(--blue); color:#fff; }
  body{ padding-bottom:76px; }
}