/* Josue's Barber Shop: soft picture-book look. Cream paper, palm green, flamingo, sun. */
:root{--cream:#fff8ec;--palm:#1f6f50;--palm-d:#164f39;--flamingo:#f27fa3;--pink-ink:#a8264f;--sun:#ffc23d;--ink:#233029;--mute:#55605a}
body{font-family:Lexend,system-ui,sans-serif;font-weight:300;font-size:1.05rem;line-height:1.65;background:var(--cream);color:var(--ink)}
h1,h2,h3{font-family:Fredoka,system-ui,sans-serif;font-weight:600;line-height:1.1;margin:0 0 .45em;color:var(--palm-d)}
h1{font-size:clamp(2.4rem,7.5vw,4.4rem)}
h2{font-size:clamp(1.9rem,5vw,2.9rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
strong{font-weight:600}
.small{font-size:.92rem;color:var(--mute)}
.demo-ribbon{margin:0;background:var(--sun);color:#3d2c00;text-align:center;font-size:.85rem;padding:6px 12px;font-weight:400}
.photo-note,.demo-chip{display:inline-block;background:#fff;border:2px dashed var(--flamingo);color:var(--pink-ink);font-size:.78rem;font-weight:400;padding:2px 10px;border-radius:999px}

/* header: logo left, links center, phone chip; sits on cream with a soft green underline */
.site-head{position:sticky;top:0;z-index:40;background:var(--cream);display:flex;align-items:center;gap:16px;padding:12px clamp(16px,4vw,48px);border-bottom:3px solid var(--palm)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.logo-j{width:44px;height:44px;border-radius:14px 14px 14px 4px;background:var(--palm);color:var(--cream);display:grid;place-items:center;font:700 1.5rem Fredoka,sans-serif}
.logo-text{font:700 1.2rem/1 Fredoka,sans-serif;color:var(--palm-d)}
.logo-text small{font:400 .72rem Lexend,sans-serif;color:var(--mute)}
.links{display:none;list-style:none;margin:0;padding:0;gap:6px}
.links a{display:block;text-decoration:none;padding:6px 14px;border-radius:12px;font-weight:400}
.links a:hover{background:#ffe7ef}
.call-chip{display:none;text-decoration:none;font:600 1rem Fredoka,sans-serif;color:var(--pink-ink)}
.nav-toggle{background:var(--palm);color:var(--cream);border:0;border-radius:12px;padding:9px 14px;font:600 .95rem Fredoka,sans-serif;cursor:pointer}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:3px solid var(--palm);max-height:calc(100dvh - 100%);overflow:auto}
.mobile-menu ul{list-style:none;margin:0;padding:6px clamp(16px,4vw,48px) 14px}
.mobile-menu a{display:block;padding:11px 0;text-decoration:none;font:500 1.15rem Fredoka,sans-serif;color:var(--palm-d)}
@media (min-width:900px){.links{display:flex}.call-chip{display:block}.nav-toggle{display:none}.mobile-menu{display:none!important}}

.btn{display:inline-block;background:var(--palm);color:#fff;text-decoration:none;font:600 1.05rem Fredoka,sans-serif;padding:12px 22px;border:0;border-radius:16px 16px 16px 4px;cursor:pointer}
.btn:hover{background:var(--palm-d)}

/* hero: text, two arched doors, tall photo */
.hero{display:grid;gap:28px;padding:44px clamp(16px,4vw,48px) 56px;max-width:1240px;margin:0 auto}
.lead{font-size:1.15rem;max-width:46ch}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.door{display:flex;flex-direction:column;gap:6px;text-decoration:none;padding:0 16px 18px;border-radius:120px 120px 18px 18px;min-height:220px;justify-content:flex-end;position:relative;overflow:hidden}
.door strong{font:600 1.5rem Fredoka,sans-serif}
.door span:not(.door-top){font-size:.9rem;line-height:1.45}
.door-top{position:absolute;top:22px;left:50%;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--sun)}
.door-walk{background:var(--palm);color:#fff}
.door-call{background:#ffd9e5;color:#4a1023}
.door:hover{transform:translateY(-3px);transition:transform .2s}
.hero-photo{margin:0;position:relative;background:#e7dcc8;border-radius:28px;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.hero-photo .photo-note{position:absolute;left:12px;bottom:12px}
@media (min-width:960px){.hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-areas:"t p" "d p";align-items:start}.hero-text{grid-area:t}.doors{grid-area:d}.hero-photo{grid-area:p;align-self:stretch}.hero-photo img{aspect-ratio:auto}}

/* storyboard */
.first-visit{background:#fff;padding:60px clamp(16px,4vw,48px);border-top:3px dashed var(--sun);border-bottom:3px dashed var(--sun)}
.first-visit > *{max-width:1240px;margin-left:auto;margin-right:auto}
.fv-intro{max-width:56ch;margin-left:0}
.story{list-style:none;padding:8px 0 12px;margin-top:18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,72%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory}
.story li{scroll-snap-align:start;background:var(--cream);border:3px solid var(--palm);border-radius:22px;padding:20px;position:relative;min-width:0}
.story li:nth-child(even){background:#ffeef3;border-color:var(--flamingo)}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sun);font:700 1.3rem Fredoka,sans-serif;margin-bottom:10px;color:#3d2c00}
.story p{margin:0;font-size:.95rem}
@media (min-width:900px){.story{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}}

/* parents: speech bubbles, staggered */
.parents{padding:64px clamp(16px,4vw,48px);max-width:1240px;margin:0 auto}
.bubbles{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:16px}
.bubbles li{flex:1 1 260px;min-width:0;background:#fff;border-radius:24px 24px 24px 6px;padding:18px 20px;font-size:1.05rem;box-shadow:0 0 0 3px var(--palm) inset;position:relative}
.bubbles .b2,.bubbles .b4{border-radius:24px 24px 6px 24px;box-shadow:0 0 0 3px var(--flamingo) inset}
.bubbles .b3{background:var(--palm);color:#fff;box-shadow:none}
@media (min-width:900px){.bubbles .b2{margin-top:28px}.bubbles .b4{margin-top:-10px}}

/* hours + map */
.hours-map{display:grid;gap:24px;padding:0 clamp(16px,4vw,48px) 64px;max-width:1240px;margin:0 auto}
.hours-card{background:var(--palm);color:#fff;border-radius:28px;padding:28px}
.hours-card h2{color:#fff}
.hours-card .small{color:#d8eadf}
.days{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.days li{background:var(--cream);color:var(--ink);border-radius:14px;padding:6px 12px;font-size:.92rem;min-width:78px;text-align:center}
.days li span{display:block;font:600 1rem Fredoka,sans-serif;color:var(--palm-d)}
.days .odd{background:#ffd9e5}
.days .sat{background:var(--sun)}
.days .off{background:transparent;color:#d8eadf;box-shadow:0 0 0 2px #d8eadf inset}
.days .off span{color:#fff}
.addr{font-size:1.1rem}
.hours-card .btn{background:var(--sun);color:#3d2c00}
.map-blob{border-radius:40% 28px 28px 28px/28px;overflow:hidden;min-height:320px;background:#e7dcc8}
.map-blob iframe{width:100%;height:100%;min-height:320px;border:0}
@media (min-width:900px){.hours-map{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}

/* crew */
.crew{padding:56px clamp(16px,4vw,48px);max-width:1240px;margin:0 auto}
.crew-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}
.mate{margin:0}
.mate button{padding:0;border:0;background:#e7dcc8;border-radius:50%;overflow:hidden;cursor:zoom-in;width:100%;aspect-ratio:1}
.mate img{width:100%;height:100%;object-fit:cover}
.mate-blank{aspect-ratio:1;border-radius:50%;background:#ffeef3;border:3px dashed var(--flamingo);display:grid;place-items:center;font:700 4rem Fredoka,sans-serif;color:var(--flamingo)}
.mate figcaption{text-align:center;margin-top:10px}
.mate figcaption strong{display:block;font:600 1.3rem Fredoka,sans-serif;color:var(--palm-d)}

/* note form */
.note{background:#ffeef3;padding:56px clamp(16px,4vw,48px);}
.note > *{max-width:820px;margin-left:auto;margin-right:auto}
.note-form{display:grid;gap:4px 18px}
.note-form .field{min-width:0}
.note-form label{display:block;font-weight:400;margin-bottom:4px}
.note-form input,.note-form textarea{width:100%;padding:12px 14px;border:2px solid var(--palm);border-radius:14px;background:#fff}
.note-form .btn{justify-self:start;margin-top:6px}
.form-success{background:#fff;border-radius:20px;padding:20px;box-shadow:0 0 0 3px var(--palm) inset}
@media (min-width:700px){.note-form{grid-template-columns:1fr 1fr}.note-form .full{grid-column:1/-1}}

/* footer */
.wave-foot{background:var(--cream);color:#fff}
.wave{width:100%;height:50px}
.foot-in{background:var(--palm);padding:16px clamp(16px,4vw,48px) 32px;text-align:center}
.foot-in p{margin:0 0 6px}
.foot-name{font:700 1.6rem Fredoka,sans-serif}
.foot-small{color:#cfe5d8;font-size:.85rem}
.mate{max-width:280px;width:100%;justify-self:center}