@charset "UTF-8";
/* ==========================================================================
   Eric the Barber - design system
   Built by AppWT Web & AI Solutions
   Palette per client brief: black, white, silver/grey, powder-blue accent.
   Mobile-first. No horizontal scroll anywhere. WCAG 2.1 AA targeted.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face{
  font-family:'Yellowtail';           /* script - stands in for Sounding Script */
  src:url('/assets/fonts/yellowtail-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Oswald';               /* headings - barber signage */
  src:url('/assets/fonts/oswald-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'InterVar';             /* body */
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}

/* ------------------------------------------------------------------ tokens */
:root{
  --ink:#0A0A0A;
  --surface:#131519;
  --surface-2:#1B1E24;
  --line:#2A2E35;
  --pearl:#F6F8FA;
  --silver:#C2C8D0;
  --silver-dim:#98A0AA;      /* 5.6:1 on --ink, AA for body text */
  --blue:#A7CBE6;            /* powder blue accent */
  --blue-deep:#5E93BD;
  --blue-ink:#1B4F79;        /* for use on light surfaces */
  --focus:#7FB6E4;

  --shell:min(1180px,100%);
  --gutter:clamp(1rem,4vw,2.5rem);
  --radius:15px;             /* client-specified 15px for the portrait */
  --radius-lg:20px;
  --shadow:0 18px 44px rgba(0,0,0,.55);
  --shadow-blue:0 0 0 1px rgba(167,203,230,.28),0 18px 44px rgba(0,0,0,.5);

  --ff-script:'Yellowtail',cursive;
  --ff-head:'Oswald','Arial Narrow',system-ui,sans-serif;
  --ff-body:'InterVar',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
/* House rule: never allow horizontal scroll. `hidden` is the baseline fallback.
   BUT `overflow-x:hidden` turns html/body into a SCROLL CONTAINER, and position:sticky
   binds to its nearest scrolling ancestor - which silently killed the sticky header.
   `overflow-x:clip` gives the identical protection WITHOUT creating a scroll container,
   so sticky binds to the viewport again. Upgrade where supported. */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow-x:clip){
  html,body{overflow-x:clip}
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--silver);
  font-family:var(--ff-body);font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:.22em}
a:hover{color:var(--pearl)}
h1,h2,h3,h4{font-family:var(--ff-head);color:var(--pearl);line-height:1.15;
  letter-spacing:.01em;margin:0 0 .6em;font-weight:600}
h1{font-size:clamp(2.1rem,1.5rem + 3.1vw,3.9rem);text-transform:uppercase}
h2{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.5rem);text-transform:uppercase}
h3{font-size:clamp(1.18rem,1.06rem + .6vw,1.45rem)}
p{margin:0 0 1.1em}
ul,ol{padding-left:1.15em}
li{margin-bottom:.45em}

/* -------------------------------------------------------------- scrollbars */
/* Firefox + any engine supporting the standard properties */
html{scrollbar-color:var(--blue-deep) var(--surface);scrollbar-width:thin}
/* WebKit / Blink: Chrome, Edge, Safari, Android, iOS */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--surface);border-left:1px solid var(--line)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#5E93BD 0%,#2F6B99 100%);
  border-radius:999px;border:3px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#A7CBE6 0%,#5E93BD 100%)}
::-webkit-scrollbar-corner{background:var(--surface)}
/* Inner scrollers (ADA panel, translate panel) get the same slim treatment */
.ada-content::-webkit-scrollbar,.appwt-translate-panel::-webkit-scrollbar{width:8px}
/* Respect users who ask the OS for always-visible/system scrollbars on touch */
@media (pointer:coarse){::-webkit-scrollbar{width:8px;height:8px}}
::selection{background:var(--blue);color:#08131D}

/* ------------------------------------------------- accessibility utilities */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:var(--blue);color:#08131D;padding:.85rem 1.4rem;
  font-family:var(--ff-head);text-transform:uppercase;font-weight:600;
  border-radius:0 0 var(--radius) 0;text-decoration:none;
}
.skip-link:focus{left:0}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
@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}
}

/* ------------------------------------------------------------------ layout */
.shell{width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3rem,2rem + 6vw,6rem)}
.section--surface{background:var(--surface);border-block:1px solid var(--line)}
.lede{font-size:clamp(1.06rem,1rem + .5vw,1.28rem);color:var(--silver);max-width:62ch}
.eyebrow{
  font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.22em;
  font-size:.78rem;color:var(--blue);margin:0 0 .9rem;font-weight:600;
}
.script{font-family:var(--ff-script);color:var(--blue);text-transform:none;letter-spacing:0}
.grid{display:grid;gap:clamp(1.4rem,1rem + 2vw,2.6rem)}
@media(min-width:760px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
}

/* ------------------------------------------------------------------ header */
.site-header{
  position:sticky;top:0;z-index:9000;background:rgba(10,10,10,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.brand img{width:auto;height:46px}
.brand__text{font-family:var(--ff-script);font-size:1.5rem;color:var(--pearl);
  line-height:1;white-space:nowrap}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:transparent;border:1px solid var(--line);color:var(--pearl);
  border-radius:10px;padding:.55rem .8rem;font-family:var(--ff-head);
  text-transform:uppercase;font-size:.82rem;letter-spacing:.1em;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--blue)}
.nav{display:none}
.nav[data-open="true"]{display:block}
.nav ul{list-style:none;margin:0;padding:0 0 .9rem}
.nav a{
  display:block;padding:.78rem .2rem;color:var(--silver);text-decoration:none;
  font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.09em;
  border-bottom:1px solid var(--line);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blue)}
@media(min-width:900px){
  .nav-toggle{display:none}
  .nav{display:block!important}
  .nav ul{display:flex;gap:1.6rem;padding:0}
  .nav a{border:0;padding:.35rem 0;font-size:.92rem}
  .nav a[aria-current="page"]{border-bottom:2px solid var(--blue)}
}

/* ------------------------------------------------------------------ button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:999px;text-decoration:none;cursor:pointer;
  font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.1em;
  font-size:.9rem;font-weight:600;border:1px solid transparent;
  transition:transform .2s ease,background .2s ease,color .2s ease;
  min-height:48px; /* touch target */
}
.btn--primary{background:var(--blue);color:#08131D}
.btn--primary:hover{background:var(--pearl);color:var(--ink);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--pearl);background:transparent}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* -------------------------------------------------------------------- hero */
/* Identical height on EVERY page (home, about, services, contact, legal). */
.hero{
  position:relative;isolation:isolate;
  min-height:clamp(430px,54vw,620px);
  display:flex;align-items:center;
  padding-block:clamp(2.6rem,1.6rem + 5vw,4rem);
  background:var(--ink);
  overflow:hidden;
}
/* Contained square video lives on the right; copy keeps the left half to itself.
   Constrains the existing children rather than requiring a new wrapper element. */
@media(min-width:761px){
  .hero .shell > *{max-width:min(58%,620px)}
}
/* Still fallback: paints instantly, and stands in whenever the video is suppressed
   (reduced-motion, save-data, no autoplay, slow connection). */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background-image:image-set(url('/assets/img/hero-bg.webp') type('image/webp'),
                             url('/assets/img/hero-bg.jpg')  type('image/jpeg'));
  background-size:cover;background-position:62% 28%;
  opacity:.42;
}
/* Looping background video - Eric's own photo, slow Ken Burns, ping-pong loop */
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
/* CONTAIN, not cover - the whole 1:1 frame is visible on every device.
   Sat to the right on desktop so it never sits under the copy. */
.hero__video{
  width:100%;height:100%;
  object-fit:contain;
  object-position:88% center;
  opacity:0;transition:opacity 1.1s ease;display:block;
}
.hero__video.is-playing{opacity:.92}
/* Because the scrim is now light on the right, hero copy carries its own shadow so
   contrast never depends on which frame of the video happens to be behind it. */
.hero .shell{text-shadow:0 2px 14px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.9)}
.hero .btn{text-shadow:none}
/* Once the video is genuinely playing, retire the still. Leaving both visible
   stacked two slightly-different-scale copies of the same photo and read as a
   ghosted double image. */
.hero.video-on::before{opacity:0;transition:opacity 1.1s ease}
@media (prefers-reduced-motion:reduce){
  .hero__media{display:none}   /* still image only, no motion at all */
}
/* Scrim is LEFT-WEIGHTED on purpose: heavy enough behind the copy to hold contrast,
   then falls away to almost nothing on the right so the footage reads in full colour.
   A flat 94% scrim over a 50%-opacity video is what made this look black and white. */
/* Scrim clears completely over the right-hand zone where the contained square sits,
   so the footage shows at full strength while the copy on the left keeps its contrast. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(10,10,10,.92) 0%,
      rgba(10,10,10,.80) 30%,
      rgba(10,10,10,.30) 52%,
      rgba(10,10,10,0)   68%),
    radial-gradient(120% 90% at 80% 6%,rgba(167,203,230,.10) 0%,transparent 60%);
}
@media(max-width:760px){
  /* No room to sit side by side, so stack: square up top, copy underneath.
     Tall enough that the full 1:1 frame shows AND the copy still has its own space. */
  .hero{
    min-height:clamp(560px,122vw,760px);
    align-items:flex-end;
    padding-bottom:clamp(1.6rem,1rem + 3vw,2.4rem);
  }
  .hero::before{
    background-image:image-set(url('/assets/img/hero-bg-sm.webp') type('image/webp'),
                               url('/assets/img/hero-bg-sm.jpg')  type('image/jpeg'));
    background-position:58% 22%;opacity:.30;
  }
  /* Vertical scrim: clear over the square at the top, solid behind the copy at the bottom. */
  .hero::after{background:
    linear-gradient(180deg,
      rgba(10,10,10,0)   0%,
      rgba(10,10,10,.10) 34%,
      rgba(10,10,10,.72) 56%,
      rgba(10,10,10,.94) 100%)}
  .hero__video{object-position:center top}
}
.hero > .shell{position:relative;z-index:1;width:100%}
.hero__script{font-family:var(--ff-script);color:var(--blue);
  font-size:clamp(1.7rem,1.2rem + 2.4vw,3rem);line-height:1;margin:0 0 .35rem}
.hero h1{margin-bottom:.5rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:1.4rem 0 1.8rem;
  font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.09em;
  font-size:.85rem;color:var(--silver-dim)}
.hero__meta span{display:inline-flex;align-items:center;gap:.45rem}

/* ------------------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.3rem,1rem + 1.4vw,2rem)}
.card h3{color:var(--pearl)}
.card p:last-child{margin-bottom:0}
.card__icon{width:44px;height:44px;color:var(--blue);margin-bottom:.9rem}

/* -------------------------------------------------- portrait (client spec) */
/* 15px radius + shadow, per Tony's instruction for Eric's photo */
.portrait{
  border-radius:15px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  border:1px solid rgba(167,203,230,.35);
  width:100%;
}
.portrait-frame{position:relative;border-radius:15px}
.portrait-frame::after{
  content:"";position:absolute;inset:-10px;border-radius:22px;
  border:1px solid rgba(167,203,230,.18);pointer-events:none;
}
@media(min-width:760px){
  .about-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:start}
}

/* -------------------------------------------------------------- area chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.2rem 0 0}
.chips li{
  border:1px solid var(--line);border-radius:999px;padding:.4rem .95rem;
  font-size:.85rem;color:var(--silver);background:var(--surface-2);
}

/* --------------------------------------------------------------- contact */
.contact-list{list-style:none;padding:0;margin:0}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.15rem}
.contact-list svg{flex:0 0 24px;width:24px;height:24px;color:var(--blue);margin-top:.28rem}
.contact-list a{color:var(--pearl);text-decoration:none;font-weight:500;word-break:break-word}
.contact-list a:hover{color:var(--blue);text-decoration:underline}

/* ------------------------------------------------------------------- form */
.form-field{margin-bottom:1.1rem}
.form-field label{display:block;margin-bottom:.4rem;font-family:var(--ff-head);
  text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--silver)}
.form-field .req{color:var(--blue)}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:.85rem 1rem;background:var(--surface-2);color:var(--pearl);
  border:1px solid var(--line);border-radius:12px;font:inherit;min-height:48px;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  border-color:var(--blue);outline:3px solid var(--focus);outline-offset:2px}
.form-note{font-size:.86rem;color:var(--silver-dim)}
/* Human-check panel: deliberately oversized. Plenty of people have low vision but
   use no assistive software at all, so this has to be legible on its own. */
.human-check{
  border:2px solid var(--blue);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(167,203,230,.10) 0%,rgba(167,203,230,.03) 100%);
  padding:clamp(1.1rem,1rem + 1vw,1.6rem);
  margin:1.8rem 0 1.4rem;
  box-shadow:0 0 0 4px rgba(167,203,230,.10);
}
.human-check legend{
  font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.14em;
  font-size:.9rem;color:var(--blue);padding:0 .5rem;font-weight:600;
}
.human-check label{
  display:block;
  font-family:var(--ff-head);
  font-size:clamp(1.35rem,1.15rem + 1vw,1.75rem);
  line-height:1.35;color:var(--pearl);
  text-transform:none;letter-spacing:.01em;
  margin-bottom:.85rem;font-weight:600;
}
.human-check input[type="number"]{
  font-size:clamp(1.4rem,1.2rem + 1vw,1.8rem);
  font-weight:700;text-align:center;
  padding:.7rem .9rem;max-width:8.5rem;min-height:60px;
  border:2px solid var(--line);border-radius:12px;
}
.human-check input[type="number"]:focus{border-color:var(--blue)}
.human-check .form-note{font-size:1.02rem;color:var(--silver);margin-top:.7rem}

.form-status{padding:.9rem 1.1rem;border-radius:12px;margin-bottom:1rem}
.form-status--ok{background:rgba(40,167,69,.14);border:1px solid #2f9e4f;color:#b9f0c8}
.form-status--err{background:rgba(220,53,69,.14);border:1px solid #c9414f;color:#f6c3c8}

/* ------------------------------------------------------------------- prose */
.prose{max-width:75ch}
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:1.7rem;color:var(--blue)}
.prose ul{margin-bottom:1.2em}
.prose__updated{color:var(--silver-dim);font-size:.9rem}

/* ------------------------------------------------------------------ footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);
  padding-block:clamp(2.4rem,2rem + 3vw,3.6rem);margin-top:0}
.site-footer h2{font-size:1.05rem;letter-spacing:.14em;color:var(--pearl)}
.site-footer a{color:var(--silver);text-decoration:none}
.site-footer a:hover{color:var(--blue);text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.55rem}
.footer-bottom{border-top:1px solid var(--line);margin-top:2.2rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  font-size:.86rem;color:var(--silver-dim)}

/* ------------------------------------------------- PWA install (bottom-LEFT) */
.pwa-install{
  position:fixed;left:16px;bottom:22px;z-index:9970;display:none;
  align-items:center;gap:.55rem;padding:.7rem 1.1rem;border-radius:999px;
  background:var(--blue);color:#08131D;border:none;cursor:pointer;
  font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.09em;
  font-size:.8rem;font-weight:600;box-shadow:0 10px 26px rgba(0,0,0,.5);
  min-height:44px;
}
.pwa-install[data-ready="true"]{display:inline-flex}
.pwa-install:hover{background:var(--pearl)}
.pwa-install svg{width:18px;height:18px}
@media(max-width:480px){.pwa-install{left:12px;bottom:16px;font-size:.74rem;padding:.6rem .9rem}}

/* ---------------------------------------------------------------- hours table
   Added 2026-07-25 with the published opening hours. Values come from
   etb_hours_rows() in includes/config.php so the table and the schema agree. */
.hours-table{width:100%;max-width:26rem;border-collapse:collapse;margin-top:.9rem;
  font-variant-numeric:tabular-nums}
.hours-table th,.hours-table td{text-align:left;padding:.55rem .2rem;
  border-bottom:1px solid rgba(167,203,230,.16);font-weight:400}
.hours-table th{color:var(--silver-dim);font-family:var(--ff-body);width:11rem}
.hours-table tr:last-child th,.hours-table tr:last-child td{border-bottom:none}
.hours-table tr.is-closed td{color:var(--silver-dim)}

/* ------------------------------------------------- FAQ, crumbs, price badge
   Added 2026-07-25 with the FAQ, per-service and per-town pages. */
.crumbs{font-size:.86rem;color:var(--silver-dim);margin:0 0 .9rem;display:flex;
  flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{color:var(--silver-dim);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--blue);border-bottom-color:currentColor}
.crumbs span[aria-current]{color:var(--pearl)}

.price-badge{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;
  margin:1.1rem 0 0;font-family:var(--ff-head);font-size:2rem;color:var(--blue);line-height:1.1}
.price-badge span{font-family:var(--ff-body);font-size:.92rem;color:var(--silver-dim)}

.faq-list{display:flex;flex-direction:column;gap:.65rem;margin-top:1.3rem;max-width:80ch}
.faq-item{border:1px solid rgba(167,203,230,.2);border-radius:6px;background:rgba(255,255,255,.02)}
.faq-item summary{cursor:pointer;padding:.85rem 1.05rem;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--blue);font-size:1.25rem;line-height:1;flex:none}
.faq-item[open] summary::after{content:"\2013"}
.faq-item summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.faq-item p{margin:0;padding:0 1.05rem 1.05rem;color:var(--silver-dim);max-width:70ch}