/*
Theme Name: Lily & May Hair Salon
Theme URI: https://lilyandmayhairsalon.com/
Author: Kisner's Solutions
Author URI: https://kisners.solutions/
Description: Lightweight hand-coded classic theme for Lily & May Hair Co. (Lancaster, PA) - no page builder, ported 1:1 from the live design. Replaces the Elementor/Astra build.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lily-and-may-salon
*/

/* ============================================================
   CONVENTIONS (2026-07-08 consolidation)
   - Naming: BEM components (block, block__el, block--mod) +
     `is-`/`has-` state prefixes + terse utilities (.text-center, .max*).
   - Breakpoints: 1024px (tablet) and 767px (phone) only.
   - Color/space/radius/shadow via :root tokens - no hardcoded hex in rules.
   - One authoritative declaration per concern (the old append-override
     sections 14–18 were folded back into these numbered sections).
   - Every button and component is defined ONCE in this single enqueued
     stylesheet; change a :root token or a component class to update site-wide.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Accents */
  --accent:#FCB36C; --accent-dark:#E38A33; --accent-deep:#9B5D16; --peach:#FFD1A4;
  /* Warm neutrals / backgrounds */
  --cream:#F7F1EC; --cream-light:#FEFCF8; --cream-alt:#F9F5EE;
  --beige:#E8D8CC; --tan:#C4B5A8;
  /* Dark surfaces */
  --espresso:#3A2218; --espresso-dark:#341B1B; --band-mauve:#B79F88;
  /* Text */
  --brown:#73543D; --ink:#020101; --black:#000; --white:#fff;
  --grey-body:#635c54; /* warm grey, ~5.9:1 on cream - WCAG AA */
  /* Type */
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Montserrat', system-ui, -apple-system, sans-serif;
  --font-accent:'Jost', 'Montserrat', sans-serif;
  /* Fluid heading sizes (clamp) */
  --h1-size:clamp(1.875rem, 1rem + 3.7vw, 3.75rem);   /* 30 → 60px */
  --h2-size:clamp(1.75rem, 1.3rem + 1.9vw, 2.6875rem); /* 28 → 43px */
  --h3-size:clamp(1.375rem, 1.2rem + .7vw, 1.625rem);  /* 22 → 26px */
  /* Spacing & layout */
  --maxw:1140px; --content-w:921px; --content-narrow:544px; --gutter:5vw;
  --s1:8px; --s2:16px; --s3:20px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
  --section-pad:120px; --heading-mb:20px;
  /* Fixed height for the stylist-profile portrait so every stylist page's photo
     is identical and fills the bio column (bios range ~680-1000px). Change here to
     resize all five profile photos at once. */
  --stylist-photo-h:780px;
  /* Radius scale - rounded-branding pass: cards/media 14px, buttons/inputs 10px, pills 999px. */
  --radius:14px; --radius-sm:10px; --radius-lg:16px; --radius-pill:999px;
  /* Elevation - warm espresso-tinted shadows. */
  --shadow-soft:0 1px 3px rgba(58,34,24,.08);
  --shadow-card:0 1px 2px rgba(58,34,24,.05),0 12px 28px -10px rgba(58,34,24,.18);
  /* Semantic surfaces - warm border hairline + soft alt background. */
  --line:#EADED2; --bg-soft:var(--cream-alt);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.65;
  color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent-dark);}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--accent-dark);outline-offset:3px;border-radius:var(--radius-sm);}

/* Accessibility: honor prefers-reduced-motion (disable reveals + long transitions). */
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important;transform:none !important;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* Screen-reader-only + skip link. */
.screen-reader-text{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-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--black);color:var(--white);padding:8px 16px;}
.skip-link:focus{left:8px;}

/* Tap targets - 44px minimum hit area (WCAG 2.2). */
.primary-nav a{display:inline-block;padding-block:9px;min-height:44px;}
.header-social a,.footer-social a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;}

/* Breadcrumbs (inner pages). */
.breadcrumbs{font-family:var(--font-accent);font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;margin:0;padding:var(--s1) 0;}
.breadcrumbs li{display:flex;gap:.5em;align-items:center;color:var(--grey-body);}
.breadcrumbs li+li::before{content:"/";color:var(--tan);}
.breadcrumbs a:hover{color:var(--accent-dark);}
.breadcrumbs [aria-current="page"]{color:var(--espresso);}

/* ============================================================
   3. TYPOGRAPHY  (display = Cormorant Garamond; fluid clamp sizes)
   ============================================================ */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--espresso);margin:0 0 var(--heading-mb);font-weight:600;line-height:1.15;}
h1{font-size:var(--h1-size);line-height:1.05;text-transform:capitalize;}
h2{font-size:var(--h2-size);font-weight:400;margin-bottom:.7em;}
h3{font-size:var(--h3-size);text-transform:uppercase;}
h4{font-size:15px;font-weight:300;line-height:1.6;}
p{margin:0 0 1em;color:var(--grey-body);font-size:16px;}
p:last-child{margin-bottom:0;}

/* Eyebrow micro-label - intentionally tiny (8–9px). Do not enlarge. */
.eyebrow{
  font-family:var(--font-body);font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;line-height:28px;color:var(--accent-dark);display:block;margin-bottom:8px;
}
/* Jost accent/meta label */
.label{font-family:var(--font-accent);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--tan);}

/* ============================================================
   4. LAYOUT - containers, section bands, utilities
   ============================================================ */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%;}
.container--content{max-width:var(--content-w);}
.container--narrow{max-width:var(--content-narrow);}
.container--wide{max-width:1360px;}
.section{padding-block:var(--section-pad);}
.section--cream{background:var(--cream);}
.section--cream-light{background:var(--cream-light);}
.section--beige{background:var(--beige);}
.section--tan{background:var(--band-mauve);color:var(--white);}
.section--tan h2,.section--tan h3{color:var(--white);}
.section--dark{background:var(--espresso);color:var(--cream);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--cream);}
.text-center{text-align:center;}
.hairline,hr.hairline{border:0;border-top:1px solid var(--beige);margin-block:var(--s6);}
.mt-5{margin-top:var(--s5);}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  display:inline-block;font-family:var(--font-body);font-size:16px;font-weight:500;
  padding:12px 30px;border:1px solid var(--black);border-radius:var(--radius-sm);
  background:var(--black);color:var(--white);transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:#323232;color:var(--white);}
.btn--brand{background:var(--accent);border-color:var(--accent);color:var(--black);}
.btn--brand:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--black);}
.btn--outline{background:transparent;color:var(--black);}
.btn--outline:hover{background:var(--black);color:var(--white);}
.btn--beige{background:var(--beige);border-color:var(--beige);color:var(--black);}
.btn--beige:hover{background:var(--tan);border-color:var(--tan);color:var(--black);}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);}
/* Center CTA button rows inside centered sections (hero rows stay left-aligned). */
.text-center .btn-row,.contact-info .btn-row{justify-content:center;}

/* ============================================================
   6. HEADER / NAV
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:var(--cream-light);border-bottom:1px solid var(--beige);}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:var(--s3);}
.brand img,.brand .custom-logo{max-height:80px;width:auto;}
.brand .wordmark{font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--espresso);}
.primary-nav>ul{display:flex;gap:var(--s5);align-items:center;}
/* Nav typography matched to the LIVE site (Montserrat 15/400, normal case). */
.primary-nav a{font-family:var(--font-body);font-size:15px;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink);}
.primary-nav a:hover{color:var(--accent-dark);}
/* Animated hover + current-page underline (top-level items only, so dropdown
   children stay clean). Active state is server-rendered via lms_nav_state(). */
.primary-nav>ul>li>a{position:relative;display:inline-flex;align-items:center;}
.primary-nav>ul>li>a::after{
  content:"";position:absolute;left:2px;right:2px;bottom:7px;height:2px;
  background:var(--accent-dark);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.primary-nav>ul>li>a:hover::after,
.primary-nav>ul>li>a.is-active::after,
.primary-nav>ul>li>a[aria-current="page"]::after{transform:scaleX(1);}
.primary-nav>ul>li>a.is-active,
.primary-nav>ul>li>a[aria-current="page"]{color:var(--accent-dark);}
.has-dropdown{position:relative;}
.has-dropdown>.dropdown{
  position:absolute;top:100%;left:0;min-width:200px;background:var(--cream-light);
  border:1px solid var(--beige);padding:var(--s2) 0;display:none;flex-direction:column;gap:0;
}
.has-dropdown:hover>.dropdown{display:flex;}
.dropdown a{padding:8px var(--s4);font-size:13px;letter-spacing:normal;white-space:nowrap;}
.header-social{display:flex;gap:var(--s2);align-items:center;}
.header-social a{display:inline-flex;}
.header-social svg{width:18px;height:18px;fill:var(--espresso);transition:fill .2s;}
.header-social a:hover svg{fill:var(--accent-dark);}
.nav-toggle{display:none;background:none;border:0;padding:8px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s;}

/* Mobile offcanvas panel + current-page highlight (no underline in the panel). */
.offcanvas{
  position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--cream-light);
  transform:translateX(100%);transition:transform .3s ease;z-index:60;padding:var(--s6) var(--s5);
  overflow-y:auto;box-shadow:-8px 0 24px rgba(0,0,0,.12);
}
.offcanvas.is-open{transform:translateX(0);}
.offcanvas ul{flex-direction:column;gap:var(--s2);display:flex;}
.offcanvas a{font-family:var(--font-body);font-size:15px;text-transform:none;letter-spacing:normal;}
.offcanvas a.is-active,.offcanvas a[aria-current="page"]{color:var(--accent-dark);}
.offcanvas-close{position:absolute;top:var(--s4);right:var(--s4);background:none;border:0;font-size:28px;line-height:1;}
.offcanvas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.3s;z-index:55;}
.offcanvas-backdrop.is-open{opacity:1;visibility:visible;}
/* Offcanvas Team submenu: the parent "Team" link navigates to /team/ normally; the stylist
   sublinks show as an always-visible indented list (no tap-to-expand accordion). */
.offcanvas .has-dropdown>.dropdown{
  position:static;display:flex;flex-direction:column;gap:var(--s1);min-width:0;
  padding:6px 0 0 var(--s3);margin-top:2px;border:0;background:none;
}

/* ============================================================
   7. FOOTER (+ mobile column accordion)
   ============================================================ */
.site-footer{background:var(--espresso-dark);color:var(--cream);padding-block:var(--s7) var(--s5);}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:var(--s6);}
.footer-col h2{font-size:32px;color:var(--cream);margin-bottom:var(--s3);}
.footer-col h4{font-family:var(--font-accent);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s3);}
/* Ambient footer link color - excludes .btn so the global button component stays authoritative. */
.footer-col p,.footer-col a:not(.btn),.footer-col li{font-size:14px;color:var(--beige);line-height:1.9;}
.footer-col a:not(.btn):hover{color:var(--accent);}
.footer-col__cta{margin-top:var(--s3);}
.footer-social{display:flex;gap:var(--s3);}
.footer-social svg{width:20px;height:20px;fill:var(--cream);}
.footer-social a:hover svg{fill:var(--accent);}
.footer-bottom{border-top:1px solid rgba(247,241,236,.15);margin-top:var(--s6);padding-top:var(--s4);text-align:center;font-size:12px;color:var(--tan);}
.footer-credit{display:block;margin-top:6px;}
.footer-credit a{color:var(--beige);border-bottom:1px solid rgba(232,216,204,.35);}
.footer-credit a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* ============================================================
   8. FORMS - Gravity Forms brand overrides (kill plugin blue)
   ============================================================ */
.gform_wrapper{--gf-color-primary:var(--accent);--gf-color-primary-rgb:252,179,108;--gf-color-primary-contrast:var(--black);--gf-radius:var(--radius-sm);}
.gform_wrapper input:not([type=submit]),.gform_wrapper select,.gform_wrapper textarea{border-radius:var(--radius-sm)!important;}
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button{
  background:var(--accent)!important;color:var(--black)!important;border:1px solid var(--accent)!important;
  border-radius:var(--radius-sm)!important;font-family:var(--font-body)!important;
}
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover{background:var(--accent-dark)!important;border-color:var(--accent-dark)!important;color:var(--black)!important;}
/* Center the submit button (+ ajax spinner) in the form footer. */
.gform_wrapper .gform_footer{display:flex;justify-content:center;align-items:center;gap:var(--s2);}
.gform_wrapper .gf_progressbar{border-radius:var(--radius-pill)!important;overflow:hidden;}
.gform_wrapper .gf_progressbar_percentage{background:var(--accent)!important;}

/* ============================================================
   9. PAGE HEROES  (one place for every page-intro pattern)
   ============================================================ */
/* Self-styled so the title looks identical whether it renders as <h1> (most pages) or a
   non-heading tag (stylist pages pass title_tag='p' to keep the stylist NAME the sole <h1>). */
.hero__title{max-width:14ch;font-family:var(--font-display);font-weight:600;font-size:var(--h1-size);line-height:1.05;text-transform:capitalize;margin:0 0 var(--heading-mb);}

/* Photo hero, dark-left scrim, light text, stationary (fixed) background.
   This is the ONE hero every page uses (home, services, team, our-salon,
   careers, policies, contact, and each stylist). Each page passes its own image. */
.hero--photo-dark{position:relative;min-height:62vh;display:flex;align-items:flex-start;padding-block:104px var(--s7);overflow:hidden;isolation:isolate;}
/* Parallax image layer. background-attachment:fixed does NOT work on mobile (iOS Safari ignores
   it; mobile Chrome disables it), so the "fixed/parallax" effect is driven by a JS transform on
   this oversized inner layer (theme.js). Oversized + overflow:hidden gives travel room without
   revealing edges. Each page passes its own image via the inline background-image below. */
.hero__bg{position:absolute;left:0;right:0;top:0;height:125%;background-size:cover;background-position:var(--hero-pos,center top);background-repeat:no-repeat;z-index:0;will-change:transform;}
/* The hero eyebrow (e.g. "OUR MENU") sits INSIDE the hero over the photo - see .hero--photo-dark .eyebrow below. */
.hero--photo-dark::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,10,5,.8) 0%,rgba(20,10,5,.5) 45%,rgba(20,10,5,.08) 78%);}
.hero--photo-dark .hero__content{position:relative;z-index:2;max-width:580px;}
.hero--photo-dark .eyebrow{color:var(--accent);}
.hero--photo-dark .hero__title{color:var(--cream-light);}
.hero--photo-dark .label{display:block;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:14px;margin:0 0 var(--s3);}
.hero--photo-dark .hero__intro{color:rgba(254,252,248,.92);max-width:52ch;margin-bottom:0;}
.hero--photo-dark .btn-row{margin-top:var(--s4);}
@media (prefers-reduced-motion:reduce){.hero__bg{top:0;height:100%;transform:none!important;}}
/* Stylist page - shared "Meet Our Stylists" hero (via .hero--photo-dark) + two-column profile. */
.stylist-profile__cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:start;}
.stylist-profile__img{display:block;width:100%;height:var(--stylist-photo-h);object-fit:cover;object-position:center top;border-radius:var(--radius);box-shadow:var(--shadow-card);}
.stylist-profile__bio h1{margin-bottom:var(--s1);}
.stylist-profile__bio .label{display:block;margin-bottom:var(--s3);}
.stylist-profile__bio .btn-row{margin-bottom:var(--s5);}
.stylist-profile__bio p{font-size:16px;margin-bottom:1.2em;}
.stylist-profile__bio h3{margin-top:var(--s5);}
@media (max-width:900px){ .stylist-profile__cols{grid-template-columns:1fr;gap:var(--s5);} .stylist-profile__photo{max-width:420px;margin-inline:auto;} .stylist-profile__img{height:auto;aspect-ratio:3/4;} }

/* Other staff members - compact 2-column grid of small square cards (photo + name + role).
   The whole card links to that stylist's profile. */
/* Other Staff Members - always ONE row of 3 (desktop and mobile); scrolls sideways if the
   roster ever exceeds 3. Native touch scroll + snap, scrollbar hidden. */
.stylist-grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*var(--s4))/3);
  gap:var(--s4);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:var(--s1);
}
.stylist-grid::-webkit-scrollbar{display:none;}
.stylist-grid>*{scroll-snap-align:start;}
.stylist-mini{
  display:block;background:var(--cream-light);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;text-align:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.stylist-mini:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
.stylist-mini__media{overflow:hidden;display:block;}
.stylist-mini__photo{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;margin:0;transition:transform .5s ease;}
.stylist-mini:hover .stylist-mini__photo{transform:scale(1.06);}
.stylist-mini__body{padding:var(--s3) var(--s2) var(--s4);}
.stylist-mini__name{font-size:20px;text-transform:none;margin-bottom:2px;}
.stylist-mini .role{display:block;font-family:var(--font-accent);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--tan);}
@media (max-width:520px){.stylist-grid{grid-auto-columns:calc((100% - 2*var(--s2))/3);gap:var(--s2);}.stylist-mini__body{padding:var(--s2) 6px var(--s3);}.stylist-mini__name{font-size:15px;}.stylist-mini .role{font-size:9px;letter-spacing:.08em;}}

/* ============================================================
   Our Salon - local-SEO location page (why-us points, service pills, FAQ)
   ============================================================ */
.local-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);}
/* 2-up variant - e.g. Our Salon's The Space / The Experience pair. */
.local-grid--2{grid-template-columns:repeat(2,1fr);}
.local-item{background:var(--cream-light);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5) var(--s4);box-shadow:var(--shadow-soft);}
.local-item h3{font-size:19px;text-transform:none;margin-bottom:var(--s1);}
.local-item p{font-size:14px;color:var(--grey-body);margin:0;}
@media (max-width:900px){.local-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.local-grid{grid-template-columns:1fr;}}

.service-pills{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;}
.service-pills a{
  display:inline-block;padding:10px 22px;border:1px solid var(--beige);border-radius:var(--radius-pill);
  background:var(--white);color:var(--espresso);font-family:var(--font-accent);font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;transition:background .2s,color .2s,border-color .2s;
}
.service-pills a:hover{background:var(--accent);border-color:var(--accent);color:var(--black);}

.faq-list{max-width:var(--content-w);margin-inline:auto;}
.faq{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:var(--s4) 0;font-family:var(--font-display);
  font-size:20px;color:var(--espresso);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .plus{color:var(--accent-dark);font-size:26px;line-height:1;flex:none;transition:transform .2s;}
.faq[open] summary .plus{transform:rotate(45deg);}
.faq .ans{padding:0 0 var(--s4);color:var(--grey-body);max-width:72ch;}


@media (max-width:767px){
  .hero--photo-dark{min-height:46vh;padding-block:var(--s6) var(--s5);}
  /* Mobile crops the sides of a wide hero - let each page aim its own crop. */
  .hero__bg{background-position:var(--hero-pos-mobile,var(--hero-pos,center top));}
  /* Zoom OUT on phones: a shorter image layer needs less upscaling to cover, so more of the
     photo's width stays in frame (group shots keep more people). Parallax travel shrinks to
     match the smaller overhang - see the mobile clamp in theme.js. */
  .hero__bg{height:108%;}
}

/* ============================================================
   10. CARDS - service + stylist (elevation, hover-lift, image zoom)
   ============================================================ */
.service-card,.stylist-card{
  border-radius:var(--radius);box-shadow:var(--shadow-soft);
  transition:transform .3s ease,box-shadow .3s ease;
}
.service-card:hover,.stylist-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);}

/* Service cards - full-bleed top media (image or placeholder) + padded body. */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.service-card{background:var(--cream-light);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;}
.service-card__media{aspect-ratio:4/3;overflow:hidden;display:block;}
.service-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.service-card:hover .service-card__img{transform:scale(1.05);}
.service-card__media--placeholder{display:flex;align-items:center;justify-content:center;background:var(--cream-alt);border-bottom:1px solid var(--line);}
/* Branded placeholder: accent glyph on a peach disc (swap in a photo via the 'image' arg). */
.service-card__icon{width:84px;height:84px;border-radius:50%;background:var(--peach);color:var(--accent-deep);display:grid;place-items:center;}
.service-card:hover .service-card__icon{background:var(--accent);}
.service-card__body{padding:var(--s5);flex:1;display:flex;flex-direction:column;}
.service-card h3{font-size:26px;text-transform:none;margin-top:0;}

/* Stylist cards (filled surface, full-bleed media header, padded body). */
.stylist-card{background:var(--cream-light);border:1px solid var(--line);overflow:hidden;text-align:center;display:flex;flex-direction:column;}
.card-media{overflow:hidden;display:block;}
.card-media img{display:block;width:100%;transition:transform .5s ease;}
.stylist-card:hover .card-media img{transform:scale(1.06);}
.stylist-card__photo{aspect-ratio:4/5;object-fit:cover;object-position:center top;width:100%;margin-bottom:0;border-radius:0;}
.stylist-card__body{padding:var(--s3) var(--s3) var(--s4);flex:1;display:flex;flex-direction:column;}
.stylist-card h3{font-size:22px;text-transform:none;margin-bottom:4px;}
.stylist-card .role{font-family:var(--font-accent);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--tan);}
.stylist-card__desc{font-size:14px;color:var(--grey-body);margin:var(--s2) 0;}
.stylist-card__body .skills{font-size:14px;margin:var(--s2) 0;}
.stylist-card__body .btn{margin-top:auto;align-self:center;}
.skills{margin:var(--s3) 0;text-align:left;font-size:13px;}
.skills li{padding-left:18px;position:relative;margin-bottom:4px;}
.skills li::before{content:"✓";position:absolute;left:0;color:var(--accent-dark);}
/* Stylist-page "top Skills" reads as all caps (team cards keep their sentence case). */
.skills--caps li{text-transform:uppercase;letter-spacing:.04em;}

/* Service-card CTA as a text link (home services). */
.card-link{display:inline-block;font-family:var(--font-body);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dark);}
/* Push the card CTA to the bottom so it lines up across every card in the row. */
.service-card__body .card-link{margin-top:auto;padding-top:var(--s4);align-self:flex-start;}
.card-link:hover{color:var(--accent-deep);}

/* ============================================================
   11. TEAM - hub grid + home group-photo link + values strip
   ============================================================ */
/* Rows of 3 equal columns; grid-auto-rows:1fr equalizes every card's height. */
/* auto-fit so the current roster fills the row - no empty trailing slots (was a fixed
   3-col grid, which left 2 dead cells with 4 stylists). */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));grid-auto-rows:1fr;gap:var(--s4);}
@media (max-width:1024px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:767px){.team-grid{grid-template-columns:1fr;}}

/* Home group-photo link → /team/ (rounded, elevated, hover lift + zoom). */
.team-photo-link{
  display:block;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease;
}
.team-photo-link:hover{transform:translateY(-6px);}
.team-photo-link img{width:100%;height:auto;display:block;transition:transform .5s ease;}
.team-photo-link:hover img{transform:scale(1.03);}

/* Values strip (Team). */
.values-strip{background:var(--espresso);}
.values-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);padding-block:var(--s4);}
.values-strip span{font-family:var(--font-accent);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);text-align:center;}
@media (max-width:767px){.values-strip .container{grid-template-columns:repeat(2,1fr);row-gap:var(--s3);}}

/* ============================================================
   12. SERVICE MENU (Services page)
   ============================================================ */
/* Literal production match: 2-column menu, slate text, square peach "Popular"
   tags + square add-on chips, plain consult callout. The slate/gray values
   (#1e293b / #787878) mirror the production Elementor page - swap to
   var(--espresso)/var(--grey-body) to bring the menu back on-brand. */
.menu-category{margin-bottom:var(--s7);}
.menu-category>h2{font-size:36px;font-weight:600;color:#1e293b;border-bottom:1px solid var(--accent);padding-bottom:var(--s2);margin-bottom:var(--s5);}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s7);}
.menu-col{display:flex;flex-direction:column;}
.menu-item{position:relative;padding-block:var(--s3);border-bottom:1px solid var(--beige);}
.menu-item h2,.menu-item h3{font-size:25px;font-weight:600;text-transform:none;margin-bottom:6px;color:#1e293b;padding-right:82px;}
.menu-item p{font-size:13px;color:#787878;}
.menu-strip{display:block;width:100%;border-radius:var(--radius);margin-top:var(--s5);box-shadow:var(--shadow-soft);}
/* Popular badge - production peach square tag above the item name. */
/* Pinned to the item's top-right so it adds NO height - a badged row would otherwise sit
   ~27px lower than its unbadged neighbour in the other column. */
.badge-popular{
  position:absolute;top:var(--s3);right:0;
  font-family:var(--font-body);font-size:8px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:var(--peach);color:var(--black);
  padding:5px 10px;border-radius:0;
}
/* Add-ons - orange label + square cream chips. */
.menu-addons{margin-bottom:var(--s6);}
.menu-addons .label{font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s3);display:block;}
.addon-chips{display:flex;flex-wrap:wrap;gap:var(--s2);}
.addon-chips span{font-family:var(--font-body);font-size:12px;letter-spacing:.04em;text-transform:uppercase;border:0;background:var(--cream);padding:5px 10px;color:#1e293b;border-radius:0;}
/* Consult callout - plain text block + solid-orange button (production). */
.menu-callout{background:none;border:0;border-radius:0;padding:0;text-align:center;max-width:640px;margin:var(--s6) auto;}
.menu-callout h3{text-transform:none;font-size:18px;font-weight:700;color:#1e293b;font-family:var(--font-body);}
@media (max-width:767px){.menu-grid{grid-template-columns:1fr;gap:0;}}

/* ============================================================
   13. GALLERY + lightbox (Our Salon)
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);}
.gallery img{aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;width:100%;border-radius:var(--radius);}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:90vw;max-height:90vh;}
dialog.lightbox::backdrop{background:rgba(0,0,0,.85);}
dialog.lightbox img{max-width:90vw;max-height:90vh;width:auto;}
@media (max-width:767px){.gallery{grid-template-columns:1fr;}}

/* ============================================================
   14. HOME - 2-col band, Elfsight wrapper
   ============================================================ */
.band-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;}
.band-2col__img{width:100%;height:auto;object-fit:cover;border-radius:var(--radius);}
.elfsight-block{padding-block:var(--s5);}
@media (max-width:767px){.band-2col{grid-template-columns:1fr;gap:var(--s5);}}

/* ============================================================
   15. HOME REVIEWS - branded Elfsight scrolling slider
   Light-DOM widget (styled-components + Swiper): themed via stable
   class-name PREFIXES + !important to beat its runtime styles. If Elfsight
   ships a shadow-DOM build these move to the Elfsight dashboard settings.
   ============================================================ */
.reviews-band{padding-block:var(--s7);}
.reviews-band>.container.text-center{margin-bottom:var(--s5);}
.elfsight-block--reviews [class*="WidgetBackground__"],
.elfsight-block--reviews [class*="Background__Base"],
.elfsight-block--reviews [class*="Background__Overlay"]{background:transparent!important;}
.elfsight-block--reviews [class*="ReviewBackground__Container"],
.elfsight-block--reviews [class*="ReviewContainer__Inner"]{
  background:var(--cream-light)!important;border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow-soft)!important;
}
.elfsight-block--reviews [class*="ReviewText__"],
.elfsight-block--reviews [class*="ShortenedText__"]{color:var(--grey-body)!important;}
.elfsight-block--reviews [class*="ReviewAuthorName__AuthorName"],
.elfsight-block--reviews [class*="ReviewLinkContainer__Link"]{color:var(--espresso)!important;}
.elfsight-block--reviews [class*="ShortenedText__"] a,
.elfsight-block--reviews [class*="ShortenedText__"] span[role="button"],
.elfsight-block--reviews [class*="TextControl__"]{color:var(--accent-dark)!important;}
.elfsight-block--reviews [class*="RatingItemFilledSvg__Filled"],
.elfsight-block--reviews [class*="RatingItemFilledSvg__Filled"] svg,
.elfsight-block--reviews [class*="RatingItemFilledSvg__Filled"] path{color:var(--accent-dark)!important;fill:var(--accent-dark)!important;}
.elfsight-block--reviews [class*="ArrowControl__ArrowControlIcon"],
.elfsight-block--reviews [class*="ArrowControl__ArrowControlIcon"] svg,
.elfsight-block--reviews [class*="ArrowControl__ArrowControlIcon"] path{color:var(--accent-dark)!important;fill:var(--accent-dark)!important;}
.elfsight-block--reviews [class*="BulletsControl__BulletsControlItem"]{background:var(--tan)!important;opacity:.6;}
.elfsight-block--reviews [class*="BulletsControl__BulletsControlItem"][aria-current="true"],
.elfsight-block--reviews .swiper-pagination-bullet-active{background:var(--accent-dark)!important;opacity:1;}

/* ============================================================
   16. $20-OFF COUPON - white rounded card (kisners-style signup)
   ============================================================ */
.coupon-cta{background:var(--beige);}
.coupon-card{
  display:grid;grid-template-columns:0.85fr 1.6fr;gap:var(--s6);align-items:start;
  background:var(--cream-light);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:clamp(var(--s5),3.5vw,var(--s6));
}
.coupon-card__intro h2{margin-bottom:var(--s3);}
.coupon-card__intro p{color:var(--grey-body);margin-bottom:0;}
.coupon-card__form{width:100%;}
.coupon-card__form .gform_wrapper,
.coupon-card__form .gform_wrapper form{margin:0;width:100%;}
/* Placeholder-only inputs (field + sub labels screen-reader-only), First/Last
   stacked full-width, small warm SMS-consent line - scoped so the contact/
   careers forms keep their visible labels. */
.coupon-card__form .gform_wrapper .gfield_label,
.coupon-card__form .gform_wrapper .gform-field-label--type-sub{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.coupon-card__form .gform_wrapper .gfield{margin-bottom:var(--s3)!important;}
/* Every field the same width, left edge, and 20px vertical gap: drop GF's 40px
   grid row-gap (so the field margin above governs spacing) and remove the name
   field's -6px gutter margin (its stacked sub-fields don't need the gutter). */
.coupon-card__form .gform_fields{row-gap:0!important;}
.coupon-card__form .ginput_complex.ginput_container_name{display:grid;grid-template-columns:1fr;gap:var(--s3);margin:0!important;}
.coupon-card__form .ginput_complex.ginput_container_name>span{width:100%!important;padding:0!important;margin:0!important;}
.coupon-card__form .ginput_container_consent{display:flex;gap:10px;align-items:flex-start;}
.coupon-card__form .ginput_container_consent input{margin-top:3px;flex:none;}
.coupon-card__form .gfield_consent_label{font-size:12px;color:var(--grey-body);line-height:1.55;font-weight:400;}
.coupon-card__form .ginput_container_consent a{color:var(--accent-dark);text-decoration:underline;}
@media (max-width:1024px){
  .coupon-card{grid-template-columns:1fr;gap:var(--s4);text-align:center;}
  .coupon-card__intro p{margin-inline:auto;max-width:52ch;}
  .coupon-card__form{text-align:left;}
  .coupon-card__form .gform_footer{text-align:center;}
}

/* ============================================================
   17. CAREERS + CONTACT + POLICIES page layouts
   ============================================================ */
/* Careers - 2-col Why-join / application-card. */
.careers-cols{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s7);align-items:start;}
.application-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow-card);}
.application-card h2{font-size:clamp(1.5rem,2.4vw,2rem);}

/* Contact - frosted form panel + map side-by-side; details + serif hours grid. */
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch;}
.contact-panel{background:rgba(254,252,248,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow-card);}
.contact-map__frame{width:100%;min-height:400px;border:0;display:block;border-radius:var(--radius);}
.contact-cols .contact-map__frame{height:100%;min-height:480px;box-shadow:var(--shadow-card);}
.contact-info,.contact-details{text-align:center;}
.contact-details{margin-inline:auto;}
.contact-details li{padding:4px 0;font-size:15px;}
.hours-grid{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;gap:0 var(--s7);max-width:760px;margin-inline:auto;
}
.hours-grid .day{text-align:center;padding:var(--s3) 0;border-bottom:1px solid var(--beige);}
.hours-grid .day h3{font-family:var(--font-display);font-size:24px;font-weight:600;text-transform:none;margin:0 0 4px;}
.hours-grid .day span{font-size:14px;color:var(--grey-body);}

/* Policies - 2-col Salon Policies | Privacy. */
.policies-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start;}

@media (max-width:1024px){
  .careers-cols,.contact-cols,.policies-cols{grid-template-columns:1fr;}
  .contact-cols .contact-map__frame{min-height:380px;}
}
@media (max-width:767px){
  .hours-grid{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}
}

/* ============================================================
   18. REVEAL ANIMATION (no-JS safe: only hides when html.js present)
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(20px);}
.reveal.is-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease;}

/* ============================================================
   19. MOBILE BOTTOM DOCK - Directions · Book · Follow · Call (phones only)
   ============================================================ */
.mobile-dock{display:none;}
@media (max-width:767px){
  .mobile-dock{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:70;background:var(--cream-light);border-top:1px solid var(--beige);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:4px;
    box-shadow:0 -4px 16px rgba(58,34,24,.08);
  }
  .mobile-dock a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    font-family:var(--font-accent);font-weight:500;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--espresso);text-align:center;line-height:1.2;min-height:44px;
  }
  .md-circle{
    width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    background:var(--cream);border:1.5px solid var(--beige);color:var(--espresso);
  }
  .md-circle svg{width:20px;height:20px;fill:currentColor;display:block;}
  .mobile-dock .md-primary .md-circle{background:var(--accent);border-color:var(--accent);color:var(--black);}
  body{padding-bottom:84px;}
  body.is-nav-open .mobile-dock{display:none;} /* hide while offcanvas open */
}

/* ============================================================
   20. GLOBAL RESPONSIVE - spacing + grids + nav toggle
   ============================================================ */
@media (max-width:1024px){
  :root{--section-pad:80px;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5);}
}
@media (max-width:767px){
  :root{--section-pad:56px;--gutter:24px;}
  .primary-nav,.header-social{display:none;}
  .nav-toggle{display:block;}
  .service-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:var(--s5);}
  /* Footer column accordion - brand column stays open; the 3 h4-led columns collapse. */
  .footer-grid.footer-acc{gap:0;}
  .footer-acc .footer-col--acc{border-top:1px solid rgba(247,241,236,.15);}
  .footer-acc .footer-col--acc h4{
    display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
    margin:0;padding:16px 2px;min-height:48px;
  }
  .footer-acc .footer-col--acc h4::after{
    content:"";flex:none;width:9px;height:9px;margin-right:4px;
    border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:rotate(45deg);transition:transform .25s ease;
  }
  .footer-acc .footer-col--acc.is-open h4::after{transform:rotate(-135deg);}
  .footer-acc .footer-col--acc .footer-col__body{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .footer-acc .footer-col--acc.is-open .footer-col__body{max-height:600px;padding-bottom:16px;}
}