@font-face{
    font-family:'Yeseva One';
    font-style:normal;font-weight:400;font-display:swap;
    src:url('/fonts/yeseva-one-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Public Sans';
    font-style:normal;font-weight:400 700;font-display:swap;
    src:url('/fonts/public-sans-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  /* PALETTE.
     Built from two sources, not invented:
       1. Her existing Vagaro theme, so the rebrand is continuous rather than a
          shock: --ink #1d1f28, --camel #c6a988, --cream #f0e9e6.
       2. Her own inspiration photos, which added the two notes her current site
          is missing and which are the whole difference between the spa she has
          and the barbershop she wants: DEEP GREEN subway tile and BRASS.
     Every text-on-background pair below was contrast checked by hand against
     WCAG AA at its actual size. */
  :root{
    --display:'Yeseva One',Georgia,'Times New Roman',serif;
    --sans:'Public Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

    --ink:#1d1f28;        /* her existing near black */
    --ink-soft:#2b2f3a;
    --body:#3f4453;       /* 9.1:1 on cream */
    --mute:#61677a;       /* 5.4:1 on cream, only used at 16px and above */

    --green:#1f4034;      /* subway tile, from her photos */
    /* ⚠️ BOTH OF THESE WERE MALFORMED UNTIL 2026-08-31 AND NEITHER FAILED LOUDLY.
       --green-dark read #16302708, which is valid CSS but is #163027 at 3% ALPHA,
       so anything using it would have been very nearly invisible.
       --green-deep read "#16302 7", five hex digits and a stray space, which is
       not a colour at all and resolves to nothing.
       ⭐ Neither was referenced anywhere, which is the only reason nothing broke.
       They are corrected rather than deleted because a named token that resolves
       to nothing is a trap for whoever reaches for it next. */
    /* ⭐ THE ROSE, ADDED 2026-08-31. Sampled from the final logo rather than
       chosen: the reddest pixel in each of the three roses and the halo behind
       her came back #B6361D, #B23A17, #B0371A and #AC3110, so #b2371a is the
       logo's own accent and not an approximation of it.
       ⚠️ USE IT AS AN ACCENT, NOT AS A SECOND BRAND COLOUR. The green stays
       primary. This exists for small emphasis and for anything that needs to
       feel like it came off the sign. */
    --rose:#b2371a;
    --rose-ink:#8d2b13;
    --rose-soft:#f7e6df;
    --green-dark:#163027;
    --green-deep:#0f241b;
    --green-ink:#173026;
    --green-soft:#eaf1ed;
    --green-line:#c3d6cb;

    --camel:#c6a988;      /* her existing accent */
    --brass:#a67c3d;      /* the lamps in her photos */
    --brass-ink:#7d5c2c;  /* 4.9:1 on cream, used for text */
    --brass-soft:#faf3e8;
    --brass-line:#e6d3b4;

    --cream:#f3ecdf;      /* her existing background */
    --page:#faf5ed;
    --white:#ffffff;
    --line:#e7dccb;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--page);color:var(--body);
    /* 18px, not 16. Her stated audience is older customers who already find her
       current site hard. This is the cheapest accessibility win available. */
    font:18px/1.7 var(--sans);
    -webkit-font-smoothing:antialiased;
    padding-bottom:0;
  }
  .wrap{max-width:1060px;margin:0 auto;padding:0 24px}
  .narrow{max-width:720px;margin:0 auto;padding:0 24px}
  h1,h2,h3{
    color:var(--ink);margin:0;line-height:1.14;
    font-family:var(--display);font-weight:400;text-wrap:balance;
  }
  a{color:var(--green)}
  img{max-width:100%;height:auto;display:block}

  /* Focus ring exists on EVERYTHING. A focus state that only some controls have
     is worse than none, because it teaches the keyboard user to distrust it. */
  :focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:4px}
  .skip{position:absolute;left:-9999px;top:0;z-index:100}
  .skip:focus{left:12px;top:12px;padding:12px 18px;background:var(--green);color:#fff;
              border-radius:8px;font-weight:700;text-decoration:none}

  /* BUTTONS. Minimum 52px tall. The brief is older thumbs on a phone. */
  .btn{display:inline-flex;align-items:center;justify-content:center;
       background:var(--green);color:#fff;text-decoration:none;font-weight:700;
       min-height:52px;padding:14px 26px;border-radius:8px;font-size:17px;
       border:0;cursor:pointer;transition:background .15s;line-height:1.2}
  .btn:hover{background:var(--green-ink)}

  /* Cancellation policy toggle. The summary is styled as a button because that is
     what Sara Jane asked for, but it stays a real <summary> so it is keyboard
     reachable and screen readers announce it as expandable. */
  .policy-toggle > summary{list-style:none;cursor:pointer;display:inline-flex;
       align-items:center;justify-content:center;background:var(--green);color:#fff;
       font-weight:700;min-height:52px;padding:14px 26px;border-radius:8px;
       font-size:17px;transition:background .15s;line-height:1.2}
  .policy-toggle > summary::-webkit-details-marker{display:none}
  .policy-toggle > summary:hover{background:var(--green-ink)}
  .policy-toggle > summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}
  .policy-toggle[open] > summary{margin-bottom:22px}
  .policy-body{max-width:100%}

  /* ⚠️ FULL JUSTIFICATION, requested via Sara Jane 2026-09-17 6:50 PM CT:
     "Joe said for the paragraphs do not justify left, justify fully."
     Applied only to the two real prose blocks (About and the stylist bio). It is
     NOT applied to headings, one-line subs, prices or labels, where justifying a
     short line stretches it across the column and looks broken.
     hyphens:auto is REQUIRED with justify. Without it, justified text on a 375px
     phone opens large gaps between words, which is the exact screen Joe also asked
     to prioritise. */
  .shoplede, .stylist-body p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .btn.ghost{background:transparent;color:var(--green);border:2px solid var(--green-line)}
  .btn.ghost:hover{background:var(--green-soft)}
  .btn.brass{background:var(--brass);color:#fff}
  .btn.brass:hover{background:var(--brass-ink)}

  /* HEADER */
  header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
  .pole{flex:none;width:13px;height:44px;border-radius:7px;border:1px solid rgba(29,31,40,.22);
        background:repeating-linear-gradient(135deg,#fff 0 6px,#b8332e 6px 12px,#fff 12px 18px,#2c4a8f 18px 24px)}
  .brand b{color:var(--ink);font-family:var(--display);font-size:20px;font-weight:400;line-height:1.15;display:block}
  .brand span{display:block;font-size:11.5px;color:var(--mute);font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-top:2px}
  .navlinks{display:flex;align-items:center;gap:24px}
  .navlinks a:not(.btn){color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
  .navlinks a:not(.btn):hover{color:var(--green)}
  /* ⭐ SARA JANE, via the group thread: "let's get rid of the book now button at the
     top right of the screen. It seems redundant when the book now option stays on
     the bottom of the screen even as you scroll, which she loves."
     She is right, and only on mobile. Below 860px the nav already hides every link
     EXCEPT the .btn, so the header collapses to logo plus Book now, while the
     sticky actionbar shows a second Book now. Two of them on one small screen.
     ⛔ SCOPED TO MOBILE ON PURPOSE. The actionbar is display:none above 860px, so
     removing the header button everywhere would leave DESKTOP with no persistent
     booking link at all. Changed 2026-09-14 from a:not(.btn) to a. */
  /* 🔴🔴 FIXED 2026-09-16 4:35 PM CT. SHE REPORTED IT FROM HER PHONE WITH A
     SCREENSHOT: "The letters at the top are sitting on top of each other when I
     view it from my phone." Services and Our stylist were printing ON TOP of the
     wordmark.

     🔑 CAUSE, AND IT IS A SPECIFICITY REGRESSION FROM THE 2026-09-14 EDIT ABOVE.
     The base rule is `.navlinks a:not(.btn)` = specificity (0,2,1).
     The mobile rule was changed that day to `.navlinks a` = (0,1,1).
     ⛔ A MEDIA QUERY ADDS NO SPECIFICITY, so the weaker mobile rule LOST and the
     text links were never hidden on a phone. It DID hide the .btn, which the base
     rule does not match, so the edit achieved exactly half of its intent: the
     Book now button went, and every other link came BACK.

     ✅ FIX: hide the CONTAINER. `.navlinks` beats nothing and is beaten by
     nothing here, and it hides all five links including the button, which is what
     the 09-14 change wanted.
     ⛔ DO NOT revert this to a rule targeting the anchors. It will silently fail
     the same way. Proven in the live page 2026-09-16: appending
     `.navlinks a{display:none}` left the link at display:flex, while
     `.navlinks{display:none}` removed it. */
  /* Mobile nav rules moved to build-pages.mjs with the multi-page split. */

  /* HERO. No photograph, because she has none yet and a stock barbershop photo
     would be a lie about her room. The barber pole stripe and the tile pattern
     carry the era instead, and both are CSS, so they cost nothing to load. */
  .hero{background:var(--cream);border-bottom:1px solid var(--line);padding:60px 0 56px;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:64px 34px;background-position:0 0;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 62%);
            mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 62%)}
  .hero-inner{position:relative}
  .eyebrow{color:var(--brass-ink);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin:0 0 18px}
  .hero h1{font-size:54px;line-height:1.04;max-width:15ch}
  .hero p.lede{font-size:20px;color:var(--ink-soft);max-width:56ch;margin:22px 0 0}
  .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
  .reassure{margin-top:18px;font-size:16px;color:var(--mute)}
  @media(max-width:640px){.hero h1{font-size:38px}.hero p.lede{font-size:18px}.hero{padding:44px 0 40px}}

  /* ======================================================================
     PHOTOGRAPHY, added 2026-08-28.

     All of it is HERS, pulled from her public Instagram @simply.sarajane.
     Her own work, her own room, her own logo. Nothing licensed, nothing stock,
     nothing invented.

     ⛔ THE IMAGES SHE TEXTED WERE DELIBERATELY NOT USED. Her words: "These were
     my inspiration when opening my shop." They show other shops and they look
     AI generated. Using them would show a customer a room that does not exist,
     and she is the one whose name is on it.

     ⚠️ TODO before launch: these are full resolution straight off Instagram,
     about 1.4 MB in total. Every gallery image is lazy loaded so only the hero
     costs anything up front, but they should still be resized and recompressed.
     Her audience is older customers who may be on slower connections.
     ====================================================================== */

  /* Hero becomes a photograph. Dark scrim so the type stays readable, which
     matters more here than usual: the brief is legibility for older eyes. */
  .hero{position:relative;padding:0;border-bottom:0;background:var(--ink)}
  .hero::before{display:none}
  .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .hero-scrim{position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(29,31,40,.94) 0%,rgba(29,31,40,.86) 42%,rgba(29,31,40,.45) 100%)}
  .hero-inner{position:relative;padding:78px 0 74px;z-index:2}
  .hero h1{color:#fff}
  .hero p.lede{color:#e6ded8}
  .hero .eyebrow{color:var(--camel)}
  .hero .reassure{color:#bdb4ad}
  .hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
  .hero .btn.ghost:hover{background:rgba(255,255,255,.12)}
  @media(max-width:640px){
    .hero-inner{padding:52px 0 48px}
    .hero-scrim{background:linear-gradient(180deg,rgba(29,31,40,.80) 0%,rgba(29,31,40,.93) 55%)}
    .hero-photo{object-position:center 22%}
  }

  /* Logo mark in the header, replacing the CSS barber pole. It is her real
     logo, so it beats anything drawn here. */
  .logo{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;
        border:1.5px solid var(--brass-line);display:block}

  /* Work gallery */
  .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:8px}
  .gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;
               border:1px solid var(--line);background:var(--cream)}
  .gallery .tall{aspect-ratio:4/5}
  .shopshot{width:100%;max-height:430px;object-fit:cover;object-position:center 55%;
            border-radius:14px;border:1px solid var(--line);margin-top:8px}

  /* SECTIONS */
  .section{padding:64px 0;border-bottom:1px solid var(--line)}
  .section h2{font-size:34px;margin-bottom:10px}
  .section .sub{font-size:18px;color:var(--mute);margin:0 0 34px;max-width:62ch}
  @media(max-width:640px){.section{padding:46px 0}.section h2{font-size:28px}}

  /* SERVICES.
     Grouped exactly the way her own booking page groups them, so a returning
     customer recognises the menu.
     ⛔ EVERY DESCRIPTION HERE WAS REWRITTEN. Hers were dictated and never
     proofread, and the live ones contain "scout massage" for scalp, "larger
     beers" for beards, "precise tweeting" for tweezing and "stainless blending"
     for seamless. The MEANING is unchanged and no service, price or inclusion
     was altered. Only the spelling and grammar. */

  /* ======================================================================
     SERVICES, REBUILT 2026-08-28 after the first draft was rejected as
     "the scroll of doom".

     THE PROBLEM: 28 services each rendered as a name, a price, a full
     paragraph and its own Book link. That is roughly 3,600px of service list
     on its own, and the booking section sat below all of it.

     THE RESEARCH: of 20 reviewed barbershop sites, NOT ONE presents 25+
     services as a flat list. What the good ones actually do:
       - Birds Barbershop: clean category breakdown, price beside each option.
       - East Nashville Beard & Barber: highlights the most popular combo to
         steer a first-time visitor.
       - Resident Barber: named combo PACKAGES rather than loose services.
       - Heritage and Entourage: price AND duration shown before you commit.

     THE FIX HERE, and why it does not break her accessibility brief:
       1. FEATURED FIVE at the top, large, with their own Book buttons. A
          first-time visitor never has to read 28 rows to find the usual thing.
       2. The FULL MENU stays on the page, compacted to one line per service in
          two columns. 28 rows at ~52px in two columns is about 730px instead of
          3,600px.
       3. ⛔ NOTHING IS HIDDEN BEHIND A TAB OR AN ACCORDION. Her stated audience
          is older customers who already find her current site hard. Content
          behind an interaction they do not notice is content they never see.
          Compacting is safe. Hiding is not. That is the whole distinction.
       4. Category jump links so the menu is navigable without being collapsed.
     ====================================================================== */

  /* Booking band, lifted directly under the hero. Was at the very bottom. */
  .bookband{background:var(--green);color:#e8f0ea;padding:26px 0}
  .bookband .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .bookband p{margin:0;font-size:19px;color:#fff;font-family:var(--display);line-height:1.3}
  .bookband span{display:block;font-family:var(--sans);font-size:16px;color:#c3d8c9;margin-top:4px}
  .bookband .acts{display:flex;gap:10px;flex-wrap:wrap}
  .bookband .btn{background:var(--brass)}
  .bookband .btn:hover{background:var(--brass-ink)}
  .bookband .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
  .bookband .btn.ghost:hover{background:rgba(255,255,255,.12)}

  /* Featured five */
  .featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 44px}
  .fcard{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column}
  .fcard .fname{font-family:var(--display);font-size:22px;color:var(--ink);line-height:1.2}
  .fcard .fprice{font-family:var(--display);font-size:26px;color:var(--green);margin-top:8px}
  .fcard .fprice small{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--mute);display:block;margin-top:2px}
  .fcard .fdesc{font-size:16px;color:var(--body);margin:12px 0 18px;flex:1}
  .fcard .btn{width:100%}

  /* Category jump links */
  .jump{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px;padding:0;list-style:none}
  .jump a{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;
          background:var(--white);border:1px solid var(--line);color:var(--ink);
          text-decoration:none;font-weight:700;font-size:16px}
  .jump a:hover{border-color:var(--green);color:var(--green)}

  /* Compact two column menu. One line per service. */
  .menu{margin:0 0 38px;scroll-margin-top:90px}
  .menu > h3{font-size:15px;font-weight:700;font-family:var(--sans);letter-spacing:.11em;
             text-transform:uppercase;color:var(--brass-ink);margin:0 0 4px}
  .menu > .catline{height:2px;background:var(--brass-line);margin:0 0 14px;max-width:60px}
  .rows{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
  @media(max-width:820px){.rows{grid-template-columns:1fr}}
  .row{display:flex;align-items:baseline;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
  .row .rn{font-size:17.5px;color:var(--ink);font-weight:600;white-space:nowrap}
  .row .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:12px}
  .row .rp{font-family:var(--display);font-size:18px;color:var(--green);white-space:nowrap}
  .menunote{margin:0 0 8px;font-size:16px;color:var(--mute)}

  /* HOURS + VISIT */
  .two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  @media(max-width:860px){.two{grid-template-columns:1fr;gap:32px}}
  .card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px}
  .card h3{font-size:24px;margin-bottom:16px}
  .hours{list-style:none;margin:0;padding:0}
  .hours li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:17px}
  .hours li:last-child{border-bottom:0}
  .hours .d{color:var(--ink);font-weight:600}
  .hours .t{color:var(--body);text-align:right}
  .hours li.closed .t{color:var(--mute)}
  .addr{margin:0 0 6px;font-size:18px;color:var(--ink);line-height:1.6}
  .addrnote{margin:14px 0 0;font-size:16px;color:var(--mute)}
  .contact-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
  .contact-list a{display:inline-flex;align-items:center;min-height:48px;font-size:18px;font-weight:700;
                  color:var(--green);text-decoration:none}
  .contact-list a:hover{text-decoration:underline}

  /* BOOK */
  .book{background:var(--green);color:#e8f0ea;border-bottom:1px solid var(--green-ink)}
  .book h2{color:#fff}
  .book p{color:#d3e2d8;font-size:19px;max-width:58ch;margin:16px 0 0}
  .book .cta-row{margin-top:30px}
  .book .btn{background:var(--brass);color:#fff}
  .book .btn:hover{background:var(--brass-ink)}
  .book .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
  .book .btn.ghost:hover{background:rgba(255,255,255,.1)}
  .booknote{margin-top:20px;font-size:16px;color:#b9cec1}

  /* FOOTER */
  footer{background:var(--ink);color:#b9bcc6;padding:44px 0 30px;font-size:16px}
  footer a{color:#e4d7c4}
  .foot-grid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
  .foot-brand{font-family:var(--display);color:#fff;font-size:21px}
  .foot-links{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
  .foot-links a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
  .foot-links a:hover{text-decoration:underline}
  .foot-legal{margin-top:26px;padding-top:20px;border-top:1px solid #2f333e;font-size:14.5px;color:#8b8f9a}

  /* STICKY MOBILE ACTION BAR.
     The single highest-value element on the page for this brief. Her customers
     arrive from a printed QR code, land mid-page, and before this the only way
     to act was to scroll back up hunting for a button. Pinning Book and Call
     into the thumb zone is the difference between booking and texting her.
     Desktop never sees it. */
  .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;
             background:var(--cream);border-top:1px solid var(--line);
             padding:10px 14px calc(10px + env(safe-area-inset-bottom));
             box-shadow:0 -4px 18px rgba(29,31,40,.10)}
  .actionbar .btn{flex:1;font-size:16px;padding:14px 10px}
  @media(max-width:860px){
    .actionbar{display:flex}
    body{padding-bottom:88px}
  }
  @media print{.actionbar{display:none}}

  /* ==== SERVICES: filters, search and expandable rows. Added 2026-09-02. ==== */
  .svc-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
                justify-content:space-between;margin:24px 0 8px}
  .svc-filters{display:flex;flex-wrap:wrap;gap:10px}
  .svc-filter{font:700 16px/1 var(--body-font,inherit);min-height:48px;padding:0 18px;
              border:2px solid var(--green-line);background:transparent;color:var(--ink);
              border-radius:999px;cursor:pointer}
  .svc-filter:hover{background:var(--green-soft);border-color:var(--green)}
  .svc-filter.is-on{background:var(--green);border-color:var(--green);color:#fff}
  .svc-searchwrap{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;max-width:340px}
  .svc-searchlabel{font-size:14px;font-weight:700;color:var(--muted,#5c5f57)}
  .svc-search{min-height:48px;padding:0 14px;font-size:17px;border:2px solid var(--line);
              border-radius:8px;background:#fff;color:var(--ink);width:100%}
  .svc-search:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
  .svc-count{font-size:15px;color:var(--muted,#5c5f57);margin:8px 0 0;min-height:1.4em}

  /* ⭐ TWO COLUMNS. Jarrod, 2026-09-02: "can you do a column left, right column
     for these? as that would look a little bit better than just a straight list."
     ⚠️ align-items:start MATTERS. Without it, opening one card stretches the one
     beside it to match, so a service nobody tapped grows a tall empty box. */
  .svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
            align-items:start;gap:12px;margin-top:16px}
  @media(max-width:720px){.svc-list{grid-template-columns:1fr}}
  .svc{border:1px solid var(--line);border-radius:10px;background:var(--cream)}
  .svc[open]{border-color:var(--green-line);background:#fff}
  .svc > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
                 gap:12px;flex-wrap:wrap;min-height:44px;padding:11px 15px}
  .svc > summary::-webkit-details-marker{display:none}
  .svc > summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;border-radius:9px}
  .svc-name{font-weight:700;font-size:17px;line-height:1.3;color:var(--ink);flex:1 1 auto}
  .svc-price{font-family:var(--display);font-size:19px;color:var(--green);white-space:nowrap}
  .svc-more{flex-basis:100%;font-size:13px;font-weight:700;color:var(--green);
            text-decoration:underline;margin-top:1px}
  .svc[open] .svc-more{display:none}
  .svc-body{padding:0 15px 16px;display:flex;flex-direction:column;gap:12px;
            border-top:1px solid var(--line);margin-top:2px;padding-top:13px}
  .svc-body p{margin:0;font-size:16px;line-height:1.55;max-width:62ch}
  .svc-mins{font-size:15px;font-weight:700;color:var(--green-ink);
            background:var(--green-soft);border-radius:999px;padding:7px 14px;align-self:flex-start}
  .svc-pic{width:100%;max-width:360px;height:auto;border-radius:10px;border:1px solid var(--line)}
  .svc-body .btn{align-self:flex-start}
  .svc-empty{margin-top:20px;font-size:17px}
  .shoplede{font-size:20px;line-height:1.6;max-width:62ch}
  .stylist-body{max-width:62ch}
  .stylist-body p{font-size:18px;line-height:1.65;margin-bottom:16px}
  .stylist-pitch{font-weight:600}

  /* ==== ASK A QUESTION. Added 2026-09-02, moved to the corner the same day. ====
     Jarrod: "The chatbot should be in the corner and expandable and collapse.
     Not front and center." It was sitting above the service filters and taking
     the attention that belongs to the menu and the Book button. */
  .ask-fab{position:fixed;right:16px;z-index:55;width:56px;height:56px;border-radius:50%;
           border:2px solid var(--green-ink);background:var(--green);color:#fff;
           font:700 26px/1 var(--display),Georgia,serif;cursor:pointer;
           box-shadow:0 4px 16px rgba(29,31,40,.28);
           bottom:24px;display:flex;align-items:center;justify-content:center}
  .ask-fab:hover{background:var(--green-ink)}
  .ask-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .ask-fab[aria-expanded="true"]{display:none}
  /* Above the sticky Book bar on any screen that shows it. */
  @media(max-width:860px){
    .ask-fab{bottom:calc(96px + env(safe-area-inset-bottom))}
  }

  .ask{position:fixed;right:16px;z-index:56;width:min(380px,calc(100vw - 32px));
       max-height:min(70vh,540px);overflow-y:auto;
       border:2px solid var(--green-ink);border-radius:12px;background:var(--cream);
       padding:16px 18px 18px;box-shadow:0 10px 34px rgba(29,31,40,.3);
       bottom:24px}
  @media(max-width:860px){
    .ask{bottom:calc(96px + env(safe-area-inset-bottom))}
  }
  .ask-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .ask-label{font-family:var(--display);font-size:21px;color:var(--ink);margin:0}
  .ask-close{width:44px;height:44px;flex:none;border:none;background:transparent;
             font-size:30px;line-height:1;color:var(--ink);cursor:pointer;border-radius:8px}
  .ask-close:hover{background:var(--green-soft)}
  .ask-close:focus-visible{outline:3px solid var(--green);outline-offset:-2px}
  .ask-sub{display:block;font-size:15px;color:var(--muted,#5c5f57);margin:2px 0 12px}
  .ask-row{display:flex;gap:10px;flex-wrap:wrap}
  /* min-width:0 defeats the flex default of min-width:auto, which was
     refusing to let the input shrink below its placeholder text and pushing
     the Ask button onto its own line. */
  .ask-input{flex:1 1 140px;min-width:0;min-height:48px;padding:0 14px;font-size:17px;
             border:2px solid var(--green-line);border-radius:8px;background:#fff;color:var(--ink)}
  .ask-input:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
  .ask-go{min-height:48px;flex:0 0 auto;white-space:nowrap}
  .ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .ask-chips[hidden]{display:none}
  .ask-chip{font-size:13.5px;font-weight:600;min-height:40px;padding:0 12px;cursor:pointer;text-align:left;
            border:1px solid var(--green-line);background:#fff;color:var(--green-ink);border-radius:999px}
  .ask-chip:hover{background:var(--green);border-color:var(--green);color:#fff}
  .ask-out{margin-top:14px;background:#fff;border:1px solid var(--green-line);
           border-radius:8px;padding:16px 18px}
  .ask-out .ask-a{margin:0;font-size:17px;line-height:1.6;color:var(--ink);max-width:62ch}
  .ask-out .ask-src{margin:10px 0 0;font-size:14px;color:var(--muted,#5c5f57)}
  .ask-out .btn{margin-top:12px}

  @media(max-width:520px){
    .svc-price{font-size:18px}
    .svc-searchwrap{max-width:none}
  }

  /* ==== SERVICES: filters, search and expandable rows. Added 2026-09-02. ==== */
  .svc-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
                justify-content:space-between;margin:24px 0 8px}
  .svc-filters{display:flex;flex-wrap:wrap;gap:10px}
  .svc-filter{font:700 16px/1 var(--body-font,inherit);min-height:48px;padding:0 18px;
              border:2px solid var(--green-line);background:transparent;color:var(--ink);
              border-radius:999px;cursor:pointer}
  .svc-filter:hover{background:var(--green-soft);border-color:var(--green)}
  .svc-filter.is-on{background:var(--green);border-color:var(--green);color:#fff}
  .svc-searchwrap{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;max-width:340px}
  .svc-searchlabel{font-size:14px;font-weight:700;color:var(--muted,#5c5f57)}
  .svc-search{min-height:48px;padding:0 14px;font-size:17px;border:2px solid var(--line);
              border-radius:8px;background:#fff;color:var(--ink);width:100%}
  .svc-search:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
  .svc-count{font-size:15px;color:var(--muted,#5c5f57);margin:8px 0 0;min-height:1.4em}

  /* ⭐ TWO COLUMNS. Jarrod, 2026-09-02: "can you do a column left, right column
     for these? as that would look a little bit better than just a straight list."
     ⚠️ align-items:start MATTERS. Without it, opening one card stretches the one
     beside it to match, so a service nobody tapped grows a tall empty box. */
  .svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
            align-items:start;gap:12px;margin-top:16px}
  @media(max-width:720px){.svc-list{grid-template-columns:1fr}}
  .svc{border:1px solid var(--line);border-radius:10px;background:var(--cream)}
  .svc[open]{border-color:var(--green-line);background:#fff}
  .svc > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
                 gap:12px;flex-wrap:wrap;min-height:44px;padding:11px 15px}
  .svc > summary::-webkit-details-marker{display:none}
  .svc > summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;border-radius:9px}
  .svc-name{font-weight:700;font-size:17px;line-height:1.3;color:var(--ink);flex:1 1 auto}
  .svc-price{font-family:var(--display);font-size:19px;color:var(--green);white-space:nowrap}
  .svc-more{flex-basis:100%;font-size:13px;font-weight:700;color:var(--green);
            text-decoration:underline;margin-top:1px}
  .svc[open] .svc-more{display:none}
  .svc-body{padding:0 15px 16px;display:flex;flex-direction:column;gap:12px;
            border-top:1px solid var(--line);margin-top:2px;padding-top:13px}
  .svc-body p{margin:0;font-size:16px;line-height:1.55;max-width:62ch}
  .svc-mins{font-size:15px;font-weight:700;color:var(--green-ink);
            background:var(--green-soft);border-radius:999px;padding:7px 14px;align-self:flex-start}
  .svc-pic{width:100%;max-width:360px;height:auto;border-radius:10px;border:1px solid var(--line)}
  .svc-body .btn{align-self:flex-start}
  .svc-empty{margin-top:20px;font-size:17px}
  .svc-prompt{margin-top:20px;font-size:17px;color:var(--muted,#5c5f57)}

  /* ==== ASK A QUESTION. Added 2026-09-02, moved to the corner the same day. ====
     Jarrod: "The chatbot should be in the corner and expandable and collapse.
     Not front and center." It was sitting above the service filters and taking
     the attention that belongs to the menu and the Book button. */
  .ask-fab{position:fixed;right:16px;z-index:55;width:56px;height:56px;border-radius:50%;
           border:2px solid var(--green-ink);background:var(--green);color:#fff;
           font:700 26px/1 var(--display),Georgia,serif;cursor:pointer;
           box-shadow:0 4px 16px rgba(29,31,40,.28);
           bottom:24px;display:flex;align-items:center;justify-content:center}
  .ask-fab:hover{background:var(--green-ink)}
  .ask-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .ask-fab[aria-expanded="true"]{display:none}
  /* Above the sticky Book bar on any screen that shows it. */
  @media(max-width:860px){
    .ask-fab{bottom:calc(96px + env(safe-area-inset-bottom))}
  }

  .ask{position:fixed;right:16px;z-index:56;width:min(380px,calc(100vw - 32px));
       max-height:min(70vh,540px);overflow-y:auto;
       border:2px solid var(--green-ink);border-radius:12px;background:var(--cream);
       padding:16px 18px 18px;box-shadow:0 10px 34px rgba(29,31,40,.3);
       bottom:24px}
  @media(max-width:860px){
    .ask{bottom:calc(96px + env(safe-area-inset-bottom))}
  }
  .ask-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .ask-label{font-family:var(--display);font-size:21px;color:var(--ink);margin:0}
  .ask-close{width:44px;height:44px;flex:none;border:none;background:transparent;
             font-size:30px;line-height:1;color:var(--ink);cursor:pointer;border-radius:8px}
  .ask-close:hover{background:var(--green-soft)}
  .ask-close:focus-visible{outline:3px solid var(--green);outline-offset:-2px}
  .ask-sub{display:block;font-size:15px;color:var(--muted,#5c5f57);margin:2px 0 12px}
  .ask-row{display:flex;gap:10px;flex-wrap:wrap}
  /* min-width:0 defeats the flex default of min-width:auto, which was
     refusing to let the input shrink below its placeholder text and pushing
     the Ask button onto its own line. */
  .ask-input{flex:1 1 140px;min-width:0;min-height:48px;padding:0 14px;font-size:17px;
             border:2px solid var(--green-line);border-radius:8px;background:#fff;color:var(--ink)}
  .ask-input:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
  .ask-go{min-height:48px;flex:0 0 auto;white-space:nowrap}
  .ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .ask-chips[hidden]{display:none}
  .ask-chip{font-size:13.5px;font-weight:600;min-height:40px;padding:0 12px;cursor:pointer;text-align:left;
            border:1px solid var(--green-line);background:#fff;color:var(--green-ink);border-radius:999px}
  .ask-chip:hover{background:var(--green);border-color:var(--green);color:#fff}
  .ask-out{margin-top:14px;background:#fff;border:1px solid var(--green-line);
           border-radius:8px;padding:16px 18px}
  .ask-out .ask-a{margin:0;font-size:17px;line-height:1.6;color:var(--ink);max-width:62ch}
  .ask-out .ask-src{margin:10px 0 0;font-size:14px;color:var(--muted,#5c5f57)}
  .ask-out .btn{margin-top:12px}

  @media(max-width:520px){
    .svc-price{font-size:18px}
    .svc-searchwrap{max-width:none}
  }/* GENERATED CSS START. build-services.mjs replaces this block. */
  /* ==== SERVICES: filters, search and expandable rows. Added 2026-09-02. ==== */
  .svc-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
                justify-content:space-between;margin:24px 0 8px}
  .svc-filters{display:flex;flex-wrap:wrap;gap:10px}
  .svc-filter{font:700 16px/1 var(--body-font,inherit);min-height:48px;padding:0 18px;
              border:2px solid var(--green-line);background:transparent;color:var(--ink);
              border-radius:999px;cursor:pointer}
  .svc-filter:hover{background:var(--green-soft);border-color:var(--green)}
  .svc-filter.is-on{background:var(--green);border-color:var(--green);color:#fff}
  .svc-searchwrap{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;max-width:340px}
  .svc-searchlabel{font-size:14px;font-weight:700;color:var(--muted,#5c5f57)}
  .svc-search{min-height:48px;padding:0 14px;font-size:17px;border:2px solid var(--line);
              border-radius:8px;background:#fff;color:var(--ink);width:100%}
  .svc-search:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
  .svc-count{font-size:15px;color:var(--muted,#5c5f57);margin:8px 0 0;min-height:1.4em}

  /* ⭐ TWO COLUMNS. Jarrod, 2026-09-02: "can you do a column left, right column
     for these? as that would look a little bit better than just a straight list."
     ⚠️ align-items:start MATTERS. Without it, opening one card stretches the one
     beside it to match, so a service nobody tapped grows a tall empty box. */
  .svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
            align-items:start;gap:12px;margin-top:16px}
  @media(max-width:720px){.svc-list{grid-template-columns:1fr}}
  .svc{border:1px solid var(--line);border-radius:10px;background:var(--cream)}
  .svc[open]{border-color:var(--green-line);background:#fff}
  .svc > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
                 gap:12px;flex-wrap:wrap;min-height:44px;padding:11px 15px}
  .svc > summary::-webkit-details-marker{display:none}
  .svc > summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;border-radius:9px}
  .svc-name{font-weight:700;font-size:17px;line-height:1.3;color:var(--ink);flex:1 1 auto}
  .svc-price{font-family:var(--display);font-size:19px;color:var(--green);white-space:nowrap}
  .svc-more{flex-basis:100%;font-size:13px;font-weight:700;color:var(--green);
            text-decoration:underline;margin-top:1px}
  .svc[open] .svc-more{display:none}
  .svc-body{padding:0 15px 16px;display:flex;flex-direction:column;gap:12px;
            border-top:1px solid var(--line);margin-top:2px;padding-top:13px}
  .svc-body p{margin:0;font-size:16px;line-height:1.55;max-width:62ch}
  .svc-mins{font-size:15px;font-weight:700;color:var(--green-ink);
            background:var(--green-soft);border-radius:999px;padding:7px 14px;align-self:flex-start}
  .svc-pic{width:100%;max-width:360px;height:auto;border-radius:10px;border:1px solid var(--line)}

  /* ==== ADD ONS. Added 2026-09-29 from her handwritten list of 2026-09-27. ==== */
  .svc-addons{border-top:1px dashed var(--line);padding-top:11px}
  .svc-addons-h{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;
                text-transform:uppercase;color:var(--muted,#5c5f57);margin-bottom:7px}
  .svc-addons ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
  .svc-addons li{display:flex;align-items:baseline;gap:8px;font-size:15px;line-height:1.4}
  .ao-n{flex:1 1 auto;color:var(--ink)}
  .ao-p{font-weight:700;color:var(--green-ink)}
  .ao-m{font-size:13px;color:var(--muted,#5c5f57);white-space:nowrap}
  /* The blanket add-ons, shown once per category rather than on every card. */
  .svc-note{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--green-ink);
            background:var(--green-soft);border:1px solid var(--green-line);
            border-radius:10px;padding:11px 14px}
  .svc-body .btn{align-self:flex-start}
  .svc-empty{margin-top:20px;font-size:17px}
  .svc-prompt{margin-top:20px;font-size:17px;color:var(--muted,#5c5f57)}

  /* ==== ASK A QUESTION. Added 2026-09-02, moved to the corner the same day. ====
     Jarrod: "The chatbot should be in the corner and expandable and collapse.
     Not front and center." It was sitting above the service filters and taking
     the attention that belongs to the menu and the Book button. */
  .ask-fab{position:fixed;right:16px;z-index:55;width:56px;height:56px;border-radius:50%;
           border:2px solid var(--green-ink);background:var(--green);color:#fff;
           font:700 26px/1 var(--display),Georgia,serif;cursor:pointer;
           box-shadow:0 4px 16px rgba(29,31,40,.28);
           bottom:24px;display:flex;align-items:center;justify-content:center}
  .ask-fab:hover{background:var(--green-ink)}
  .ask-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  .ask-fab[aria-expanded="true"]{display:none}
  /* Above the sticky Book bar on any screen that shows it. */
  @media(max-width:860px){
    .ask-fab{bottom:calc(96px + env(safe-area-inset-bottom))}
  }

  .ask{position:fixed;right:16px;z-index:56;width:min(380px,calc(100vw - 32px));
       max-height:min(70vh,540px);overflow-y:auto;
       border:2px solid var(--green-ink);border-radius:12px;background:var(--cream);
       padding:16px 18px 18px;box-shadow:0 10px 34px rgba(29,31,40,.3);
       bottom:24px}
  @media(max-width:860px){
    .ask{bottom:calc(96px + env(safe-area-inset-bottom))}
  }
  .ask-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .ask-label{font-family:var(--display);font-size:21px;color:var(--ink);margin:0}
  .ask-close{width:44px;height:44px;flex:none;border:none;background:transparent;
             font-size:30px;line-height:1;color:var(--ink);cursor:pointer;border-radius:8px}
  .ask-close:hover{background:var(--green-soft)}
  .ask-close:focus-visible{outline:3px solid var(--green);outline-offset:-2px}
  .ask-sub{display:block;font-size:15px;color:var(--muted,#5c5f57);margin:2px 0 12px}
  .ask-row{display:flex;gap:10px;flex-wrap:wrap}
  /* min-width:0 defeats the flex default of min-width:auto, which was
     refusing to let the input shrink below its placeholder text and pushing
     the Ask button onto its own line. */
  .ask-input{flex:1 1 140px;min-width:0;min-height:48px;padding:0 14px;font-size:17px;
             border:2px solid var(--green-line);border-radius:8px;background:#fff;color:var(--ink)}
  .ask-input:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
  .ask-go{min-height:48px;flex:0 0 auto;white-space:nowrap}
  .ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .ask-chips[hidden]{display:none}
  .ask-chip{font-size:13.5px;font-weight:600;min-height:40px;padding:0 12px;cursor:pointer;text-align:left;
            border:1px solid var(--green-line);background:#fff;color:var(--green-ink);border-radius:999px}
  .ask-chip:hover{background:var(--green);border-color:var(--green);color:#fff}
  .ask-out{margin-top:14px;background:#fff;border:1px solid var(--green-line);
           border-radius:8px;padding:16px 18px}
  .ask-out .ask-a{margin:0;font-size:17px;line-height:1.6;color:var(--ink);max-width:62ch}
  .ask-out .ask-src{margin:10px 0 0;font-size:14px;color:var(--muted,#5c5f57)}
  .ask-out .btn{margin-top:12px}

  @media(max-width:520px){
    .svc-price{font-size:18px}
    .svc-searchwrap{max-width:none}
  }
/* GENERATED CSS END */
  /* MULTI-PAGE NAV, 2026-09-17. Collapsible on phones: the links are behind a
     Menu button so they cost one row, not three. Jarrod, after seeing the first
     version: "now they're taking up more space at the top". */
  .navtoggle{display:none;align-items:center;gap:8px;background:transparent;
       border:1px solid var(--green-line);border-radius:8px;color:var(--green);
       font-weight:700;font-size:15px;min-height:44px;padding:0 14px;cursor:pointer}
  .navtoggle:hover{background:var(--green-soft)}
  .navtoggle-bars{width:16px;height:2px;background:currentColor;position:relative;display:block}
  .navtoggle-bars::before,.navtoggle-bars::after{content:"";position:absolute;left:0;
       width:16px;height:2px;background:currentColor}
  .navtoggle-bars::before{top:-5px}
  .navtoggle-bars::after{top:5px}
  .navlinks a[aria-current="page"]{color:var(--green);text-decoration:underline;text-underline-offset:5px}

  /* Joe's notes via Sara Jane, 2026-09-21.
     1. Centre the headline, "preferably just on the phone". Done on phones only,
        so the desktop hero keeps its left-aligned layout.
     3. The precision-cuts copy now sits BELOW his new opening line, so it is set
        smaller to keep one clear hierarchy instead of two competing ledes. */
  .lede-sub{font-size:0.92em;opacity:0.92;margin-top:10px}
  @media(max-width:860px){
    .hero-inner{text-align:center}
    .hero-inner .eyebrow{text-align:center}
  }

  @media(max-width:860px){
    .bar{flex-wrap:wrap;gap:10px}
    /* The brand is 349px wide unconstrained, which pushed the Menu button onto a
       second row and made the header 137px tall. flex-basis 0 lets it shrink so
       brand and Menu share one row. */
    .brand{flex:1 1 0;min-width:0;overflow:hidden}
    .brand b{font-size:16px}
    .brand span span{font-size:12px}
    .navtoggle{display:inline-flex;flex:0 0 auto;padding:0 12px;font-size:14px}
    .navlinks{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;order:3;
         border-top:1px solid var(--green-line);margin-top:10px}
    .navlinks.is-open{display:flex}
    .navlinks a:not(.btn){min-height:52px;font-size:17px;
         border-bottom:1px solid var(--green-line)}
    .navlinks a.btn{margin:12px 0 4px}
  }