/* Legacy Grooming — concept page.
   Colours lifted from the shop's own site: the dark brown plaid header band,
   the terracotta/salmon gradient behind the hero animals, cream panels and
   the red nav buttons. Nothing here is invented branding. */

:root{
  --plaid:#3A1E12;
  --brown:#5A2D1A;
  --brown-deep:#2A150D;
  --terracotta:#C2805F;
  --salmon:#D99A7C;
  --salmon-soft:#EBC4AC;
  --cream:#FAF4EC;
  --cream-2:#F2E7D9;
  --ink:#32241C;
  --ink-soft:#6A564A;
  --accent:#AE3F38;
  --accent-hi:#D96C61;
  --line:#E0CFBC;
  --confirm-bg:#FFF4C2;
  --confirm-ink:#6B4B00;
  --radius:12px;
  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:Lato,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.62;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:Bitter,Georgia,"Times New Roman",serif;line-height:1.22;margin:0 0 .4em}
h1{font-size:2rem}
h2{font-size:1.55rem;color:var(--brown)}
h3{font-size:1.1rem;color:var(--brown)}
p{margin:0 0 1em}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
}

.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:16px}
section{padding-block:40px}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--brown);padding:10px 16px;z-index:200}
.skip-link:focus{left:8px;top:8px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--plaid);
  border-bottom:3px solid var(--accent);
}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:7px;justify-content:space-between}
/* The logo is a link home. Its hit area is held at 48px tall so it is a real
   tap target on a phone, even though the wordmark itself is shorter. */
/* On a phone the wordmark takes every pixel the menu button does not use, so the
   header reads as the salon's name rather than a small mark in the corner. It is
   capped at 260px because this bar is sticky: its height is screen the visitor
   never gets back. 260 x 87 on a 390px phone, against 150 x 50 before. */
.brand-link{display:flex;align-items:center;flex:1 1 auto;min-width:0;min-height:48px;line-height:0;border-radius:6px}
/* Supplied wordmark: 3:1, white on transparent, so it sits straight on the brown. */
.site-header .brand{width:100%;max-width:260px;height:auto;aspect-ratio:3/1;object-fit:contain}
.burger{order:3}
.hdr-call{order:2}
/* The open menu is a full-width row that pushes the header taller, rather than a
   floating panel. One less thing to go wrong on a narrow screen. */
.navwrap{order:4;flex:0 0 100%}
.hdr-call{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;
  padding:9px 14px;border-radius:999px;font-size:.92rem;white-space:nowrap;
}
.hdr-call:hover{background:var(--accent-hi)}
/* Below 520px the wordmark, the call button and the menu button together push the
   header onto two rows. The sticky bar at the foot carries the call action on
   phones and is always in reach, so the header button stands down. */
.hdr-call{display:none}

/* ---------- hero ---------- */
.hero{background:var(--plaid);padding:0}
.hero img{width:100%}
.hero-copy{
  background:linear-gradient(180deg,var(--salmon) 0%,var(--terracotta) 100%);
  color:#fff;text-align:center;padding:26px 16px 30px;
}
.hero-copy h1{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);margin-bottom:.25em}
.hero-copy .tag{font-size:1.06rem;margin:0 0 18px;color:#fff}
.btn-row{display:flex;flex-direction:column;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 24px;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:1.04rem;width:100%;max-width:330px;
  border:2px solid transparent;cursor:pointer;
}
.btn-primary{background:#fff;color:var(--accent)}
.btn-primary:hover{background:var(--cream-2)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- trust strip ---------- */
.trust{background:var(--brown);color:#fff;padding-block:18px}
.trust ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;text-align:center}
.trust li{font-size:.95rem}
.trust b{display:block;font-family:Bitter,Georgia,serif;font-size:1.22rem;color:var(--salmon-soft)}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px}
.card h3{margin-bottom:.3em}
.card p{margin:0;font-size:.97rem;color:var(--ink-soft)}
.alt{background:var(--cream-2)}

/* ---------- groomers ---------- */
.people{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);max-width:420px}
.people span{
  background:var(--salmon-soft);color:var(--brown);font-weight:700;
  border-radius:999px;padding:9px 6px;text-align:center;font-size:1rem;
}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}

/* ---------- visit ---------- */
.visit-grid{display:grid;gap:20px}
.fact{border-left:4px solid var(--salmon);padding-left:14px;margin-bottom:16px}
.fact b{display:block;color:var(--brown);font-family:Bitter,Georgia,serif}
.pay{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:6px 0 0;padding:0}
.pay li{background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:.88rem}

/* ---------- form ---------- */
form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
label{display:block;font-weight:700;margin:0 0 5px;font-size:.95rem;color:var(--brown)}
input,textarea,select{
  width:100%;font:inherit;font-size:16px;padding:11px 12px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--ink);
}
textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.88rem;color:var(--ink-soft);margin:10px 0 0}
#form-status{margin-top:12px;font-weight:700}

/* ---------- confirm markers ---------- */
.confirm{
  background:var(--confirm-bg);color:var(--confirm-ink);
  border-left:4px solid #E0B700;border-radius:4px;
  padding:7px 11px;font-size:.88rem;display:block;margin:8px 0;
}

/* ---------- footer ---------- */
footer{background:var(--plaid);color:#E8D6C6;padding-block:28px 96px;font-size:.92rem}
footer a{color:var(--salmon-soft)}
.concept{
  background:var(--brown-deep);border:1px dashed var(--salmon);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:18px;color:#F3E2D4;font-size:.9rem;
}

/* ---------- sticky phone bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--accent);display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;
}
.callbar a+a{border-left:1px solid rgba(255,255,255,.35)}

@media (min-width:520px){
  /* The call button is back in the header from here up, so the wordmark stops
     growing and returns to a fixed size beside it. */
  .brand-link{flex:0 0 auto}
  .site-header .brand{width:230px;height:77px;max-width:none;aspect-ratio:auto}
  .hdr-call{display:inline-flex}
}

@media (min-width:700px){
  h1{font-size:2.6rem}
  h2{font-size:1.9rem}
  section{padding-block:56px}
  .btn-row{flex-direction:row;justify-content:center}
  .btn{width:auto}
  .trust ul{grid-template-columns:repeat(4,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .visit-grid{grid-template-columns:1fr 1fr}
  .callbar{display:none}
  footer{padding-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   Phone menu
   The page is six of their old pages in one, so it is long. The
   menu is anchors only; the call action stays in the sticky bar
   so navigation never competes with the thing that earns money.
   ============================================================ */
.burger{
  width:46px;height:46px;flex:0 0 auto;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:transparent;border:1px solid rgba(255,255,255,.45);border-radius:10px;cursor:pointer;
}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .18s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{
  list-style:none;margin:0;padding:4px 0 8px;
  border-top:1px solid rgba(255,255,255,.18);
}
.menu[hidden]{display:none}
.menu a{
  display:block;color:#F3E2D4;text-decoration:none;font-weight:700;
  padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.12);min-height:48px;
}
.menu a:hover{color:var(--salmon-soft)}
.menu li:last-child a{border-bottom:0}

/* ============================================================
   Photo viewer
   ============================================================ */
.gallery .shot{
  padding:0;border:1px solid var(--line);background:none;border-radius:10px;
  cursor:zoom-in;overflow:hidden;display:block;width:100%;
}
.gallery .shot img{border:0;border-radius:0}

.lb{
  position:fixed;inset:0;z-index:300;
  background:rgba(22,10,6,.985);
  display:flex;align-items:center;justify-content:center;
  padding:12px;
  touch-action:pan-y;
}
.lb[hidden]{display:none}
.lb-stage{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.lb-stage img{
  max-width:100%;max-height:72vh;width:auto;height:auto;
  border-radius:10px;background:#000;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
}
.lb-stage figcaption{color:#F3E2D4;text-align:center;font-size:.93rem;max-width:34em;padding-inline:8px}
.lb-count{display:block;color:var(--salmon-soft);font-size:.82rem;margin-top:3px}

.lb-close,.lb-nav{
  position:absolute;background:rgba(0,0,0,.5);color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.lb-close{top:10px;right:10px;width:48px;height:48px;font-size:1.9rem}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:2rem;padding-bottom:4px}
.lb-prev{left:8px}
.lb-next{right:8px}
.lb-close:hover,.lb-nav:hover{background:var(--accent)}
.lb-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#C9B2A3;font-size:.8rem}

@media (min-width:700px){
  .site-header .container{padding-block:12px}
  .site-header .brand{width:240px;height:80px}
  .lb-stage img{max-height:78vh}
}

/* The inline row of links needs real room: wordmark + five links + the call
   button. Below 980px they wrap and spill, so the hamburger stays until then. */
@media (min-width:980px){
  .site-header .brand{width:252px;height:84px}
  .navwrap{order:2;flex:1 1 auto;display:flex;justify-content:center}
  .hdr-call{order:3}
  .burger{display:none}
  .menu{
    display:flex;gap:2px;background:transparent;border-top:0;padding:0;
  }
  .menu[hidden]{display:flex}
  .menu a{
    border-bottom:0;padding:13px 10px;font-size:.9rem;
    min-height:48px;display:flex;align-items:center;white-space:nowrap;
  }
}