/* Bold poster / Keycap: a variant of bold-poster, after instalanding.ai's squircle-keycap-product-page
   (MIT). Neo-brutalist bento on warm paper: every surface a flat poster-coloured card (yellow,
   cornflower, pink, lime, purple, orange) with a 3px ink border, a 22px radius and a hard 7px ink
   shadow; no blur and no gradients on any card or control. Buttons are keycaps: a face, a darker
   shade edge below, an ink ring, and they press down. Space Grotesk for headlines and reading,
   DM Mono for labels. The notches of the poster are gone; its panels become the bento. Borrows
   swiss's services "index", dressed as poster-coloured slabs that press in.
   Loads after bold-poster.css and overrides it. Suits gyms, barbers, food trucks, kids' clubs. */

:root[data-variant="bold-poster-keycap"] {
  --bp-cobalt: #111111;   /* the base's "cobalt" accents (prices, index chips, ticks) are ink here */
  --bp-mid: #7b9cff;      /* cornflower */
  --bp-pale: #ff8fc7;     /* pink */
  --bp-chip: #fffaf0;     /* paper, lifted */
  --bp-yellow: #ffd23a;
  --bp-ink: #111111;
  --bp-lime: #b8f06a;
  --bp-purple: #b69cff;
  --bp-orange: #ff8a3d;

  --bg: #f4efe4;
  --bg-soft: #ece5d3;
  --surface: #fffaf0;
  --ink: #111111;
  --ink-2: #222222;
  --muted: #2e2e2e;
  --line: rgb(17 17 17 / 0.22);
  --accent: #111111;
  --eyebrow: #111111;
  --primary: #ffd23a;
  --primary-ink: #111111;
  --glass: #fffaf0;
  --glass-border: #111111;
  color-scheme: light;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.04em;
  --display-leading: 0.98;
  --reveal-y: 16px; --reveal-in: drop;

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 22px;
  --shadow: 7px 7px 0 #111111;
  --card-border: 3px solid #111111;

  --slab-bg: #7b9cff;
  --slab-ink: #111111;
  --footer-bg: #b69cff;
  --footer-ink: #111111;

  /* placeholders: flat poster colours, nothing else */
  --ph-1: #ffd23a;
  --ph-2: #7b9cff;
  --ph-3: #ff8fc7;
  --ph-4: #b8f06a;
  --ph-5: #b69cff;
  --ph-6: #ff8a3d;

  /* the keycap: a face, and a shade edge that is the face mixed toward black */
  --mould: 0 5px 0 var(--shade), 0 5px 0 3px #111111;
  --mould-sm: 0 4px 0 var(--shade), 0 4px 0 3px #111111;
  --mould-press: 0 1px 0 var(--shade), 0 1px 0 3px #111111;

  & body {
    background:
      radial-gradient(40% 35% at 92% 4%, rgb(255 210 58 / 0.22), transparent 70%),
      radial-gradient(40% 35% at 4% 55%, rgb(123 156 255 / 0.15), transparent 70%),
      var(--bg);
    font-weight: 500;
  }
  & h1, & h2, & h3, & h4 { text-transform: none; }
  & h2 { font-size: clamp(34px, 5.2vw, 68px); max-width: 16ch; }
  & h3 { font-size: 24px; }
  & .eyebrow { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.12em; }
  & .lead { color: var(--ink-2); }
  & :focus-visible { outline: 3px solid #111111; }

  /* panels that sit on the paper are poster-coloured and keep ink text */
  & .card, & .plan, & .poster, & .nav-menu ul, & .map, & .chips .pill, & .stat {
    --ink: #111111; --ink-2: #222222; --muted: #2e2e2e; --line: rgb(17 17 17 / 0.3);
    --accent: #111111; --eyebrow: #111111; --glass: #fffaf0;
  }

  /* ---------- cards: flat colour, 3px ink border, hard shadow ---------- */
  & .card, & .plan, & .poster, & .pricing-slab {
    background: var(--card-bg); --card-bg: var(--bp-yellow);
    isolation: auto;
    border: 3px solid #111111; border-radius: 22px;
  }
  & .card::before, & .plan::before, & .poster::before, & .pricing-slab::before,
  & .card::after, & .plan::after, & .poster::after, & .pricing-slab::after, & .block::before, & .block::after { content: none; }
  & .card, & .pricing-slab, & .poster { box-shadow: 7px 7px 0 #111111; }
  & .plan, & .plan.featured { box-shadow: 5px 5px 0 #111111; }

  & .services-grid > li:nth-child(6n + 1), & .reviews-grid > li:nth-child(6n + 1) { --card-bg: #ffd23a; }
  & .services-grid > li:nth-child(6n + 2), & .reviews-grid > li:nth-child(6n + 2) { --card-bg: #7b9cff; }
  & .services-grid > li:nth-child(6n + 3), & .reviews-grid > li:nth-child(6n + 3) { --card-bg: #ff8fc7; }
  & .services-grid > li:nth-child(6n + 4), & .reviews-grid > li:nth-child(6n + 4) { --card-bg: #b8f06a; }
  & .services-grid > li:nth-child(6n + 5), & .reviews-grid > li:nth-child(6n + 5) { --card-bg: #b69cff; }
  & .services-grid > li:nth-child(6n + 6), & .reviews-grid > li:nth-child(6n + 6) { --card-bg: #ff8a3d; }
  & .visit-card { --card-bg: #b8f06a; border-radius: 22px; }
  & .form { --card-bg: #ff8fc7; border-radius: 22px; }
  & .pricing-slab { --card-bg: #7b9cff; border-radius: 22px; }
  & .pricing-slab .lead, & .pricing-slab .eyebrow { color: #111111; }
  & .plans > li:nth-child(3n + 1) { --card-bg: #ffd23a; }
  & .plans > li:nth-child(3n + 2) { --card-bg: #ff8fc7; }
  & .plans > li:nth-child(3n + 3) { --card-bg: #b8f06a; }
  & .plan.featured { --card-bg: #ff8a3d; }
  & .plan { padding: 28px; }
  & .plan-flag { background: #111111; color: #ffd23a; border-color: #111111; }
  & .plan-period { color: #2e2e2e; }
  & .plan-price .mono { font: 700 52px/1 var(--font-display); letter-spacing: -0.05em; }
  & .plan-features li::before { color: #111111; }
  & .plan.featured .plan-features li::before { color: #111111; }
  & .card:hover { translate: 0 -3px; }
  & .service { padding: 26px; }
  & .service-name { font-size: 26px; letter-spacing: -0.035em; }
  & .service-foot { border-top: 3px solid #111111; }
  & .index { background: #111111; color: #fffaf0; font-family: var(--font-mono); font-weight: 500; }
  & .price { font: 700 28px/1 var(--font-display); letter-spacing: -0.04em; color: #111111; }
  & .review blockquote { font-weight: 500; }
  & .review-author { letter-spacing: 0.04em; }
  & .review-source { font-family: var(--font-mono); }

  /* ---------- page "stack": paper panels piled with ink rules; blocks and posters flat ---------- */
  & .page-stack > .section, & .page-stack > .highlights-blocks { background: var(--bg); border-top: 3px solid #111111; }
  & .page-stack > .section:nth-child(odd), & .page-stack > .highlights-blocks:nth-child(odd) { background: var(--bg-soft); }
  & .blocks { gap: 22px; }
  & .block { background: var(--b-bg); border: 3px solid #111111; border-radius: 22px; box-shadow: 7px 7px 0 #111111; text-transform: none; }
  & .block:nth-child(4n) { --b-ink: #111111; }
  & .block:nth-child(4n + 1) { --b-bg: #ffd23a; }
  & .block:nth-child(4n + 2) { --b-bg: #ff8fc7; }
  & .block:nth-child(4n + 3) { --b-bg: #b8f06a; }
  & .block:nth-child(4n) { --b-bg: #7b9cff; }
  & .block-n { font-family: var(--font-mono); font-weight: 500; }
  & .block-text { font: 700 clamp(32px, 9vw, 72px)/0.98 var(--font-display); letter-spacing: -0.05em; }
  & .poster { border: 3px solid #111111; border-radius: 22px; --card-bg: #ffd23a; }
  & .poster-1 { --card-bg: #ffd23a; }
  & .poster-2 { --card-bg: #7b9cff; }
  & .poster-3 { --card-bg: #b8f06a; }
  & .poster.featured { --card-bg: #ff8a3d; }
  & .poster-amount { font: 700 clamp(60px, 28cqi, 150px)/0.9 var(--font-display); letter-spacing: -0.06em; color: #111111; }
  & .poster-flag { background: #111111; color: #ffd23a; }
  & .poster-period { color: #2e2e2e; font-family: var(--font-mono); font-weight: 500; }
  & .poster-name { letter-spacing: -0.04em; }

  /* ---------- highlights "keys": squircle keycaps that press in ---------- */
  & .page-stack > .highlights-keys { background: var(--bg); border: 0; border-top: 3px solid #111111; }
  & .page-stack > .highlights-keys:nth-child(odd) { background: var(--bg-soft); }
  & .highlights-keys { background: var(--bg); border-block: 0; }
  & .keys { gap: 22px; padding-bottom: 10px; }
  & .key {
    --face: var(--k-bg, #ffd23a); --shade: color-mix(in srgb, var(--face) 68%, black);
    min-height: 132px; padding: 16px 18px 20px;
    border: 3px solid #111111; border-radius: 34px; corner-shape: squircle;
    box-shadow: var(--mould);
  }
  & .key:nth-child(6n + 2) { --k-bg: #7b9cff; }
  & .key:nth-child(6n + 3) { --k-bg: #ff8fc7; }
  & .key:nth-child(6n + 4) { --k-bg: #b8f06a; }
  & .key:nth-child(6n + 5) { --k-bg: #b69cff; }
  & .key:nth-child(6n + 6) { --k-bg: #ff8a3d; }
  @media (hover: hover) { & .key:hover { translate: 0 3px; box-shadow: 0 2px 0 var(--shade), 0 2px 0 3px #111111; } }
  & .key-n { color: #111111; font-family: var(--font-mono); font-weight: 500; }
  & .key-text { color: #111111; font: 700 clamp(21px, 2.3vw, 28px)/1.05 var(--font-display); letter-spacing: -0.04em; }

  /* ---------- services "index" (borrowed): each row a flat poster-coloured slab that presses in ---------- */
  & .ix-list { display: grid; gap: 18px; padding-bottom: 7px; }
  & .ix,
  & .ix-list > li:last-child .ix {
    padding: 18px 20px; border: 3px solid #111111; border-radius: 22px;
    background: var(--t-bg, #ffd23a); color: #111111; box-shadow: 7px 7px 0 #111111;
  }
  & .ix-list > li:nth-child(6n + 1) .ix { --t-bg: #ffd23a; }
  & .ix-list > li:nth-child(6n + 2) .ix { --t-bg: #7b9cff; }
  & .ix-list > li:nth-child(6n + 3) .ix { --t-bg: #ff8fc7; }
  & .ix-list > li:nth-child(6n + 4) .ix { --t-bg: #b8f06a; }
  & .ix-list > li:nth-child(6n + 5) .ix { --t-bg: #b69cff; }
  & .ix-list > li:nth-child(6n + 6) .ix { --t-bg: #ff8a3d; }
  & .ix:hover, & .ix:focus-visible { translate: 5px 5px; box-shadow: 2px 2px 0 #111111; }
  & .ix:active { translate: 7px 7px; box-shadow: 0 0 0 #111111; }
  & .ix-n { justify-self: start; padding: 3px 8px; border-radius: 8px; background: #111111; color: #fffaf0; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.04em; }
  & .ix-name { font: 700 clamp(26px, 6.5vw, 44px)/1 var(--font-display); letter-spacing: -0.045em; overflow-wrap: anywhere; }
  & .ix-details { color: #222222; }
  & .ix-meta { color: #111111; font: 500 13px/1.3 var(--font-mono); letter-spacing: 0.04em; }
  @media (min-width: 900px) {
    & .ix { padding: 22px 28px; align-items: center; }
    & .ix-name { font-size: clamp(30px, 3.6vw, 52px); }
  }

  /* ---------- keycaps ---------- */
  & .btn {
    --face: #fffaf0; --shade: color-mix(in srgb, var(--face) 68%, black);
    background: var(--face); color: #111111;
    border: 3px solid #111111; border-radius: 16px;
    font: 700 14px/1 var(--font-body); letter-spacing: 0.02em; text-transform: none;
    box-shadow: var(--mould);
    translate: 0 0;
  }
  & .btn-primary { --face: #ffd23a; background: var(--face); color: #111111; }
  & .btn-ghost, & .card .btn-ghost, & .plan .btn-ghost, & .nav-menu .btn-ghost { --face: #fffaf0; background: var(--face); color: #111111; }
  & .btn-sm { box-shadow: var(--mould-sm); font-size: 13px; border-radius: 12px; }
  & .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--shade), 0 7px 0 3px #111111; }
  & .btn-sm:hover { box-shadow: 0 6px 0 var(--shade), 0 6px 0 3px #111111; }
  & .btn:active, & .btn:disabled {
    transform: translateY(4px); filter: none; font-size: 14px;
    box-shadow: var(--mould-press);
  }
  & .btn-sm:active, & .btn-sm:disabled { font-size: 13px; transform: translateY(3px); }
  & .btn:disabled { opacity: 1; --face: #d8d1bf; background: var(--face); color: #111111; }
  & .footer .btn-primary, & .plan .btn-primary { --face: #ffd23a; }
  & .footer .btn-ghost { --face: #fffaf0; }

  & .pill { background: #fffaf0; color: #111111; border: 2px solid #111111; font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.06em; }
  & .chips .pill { font-size: 13px; padding: 8px 16px; background: #fffaf0; }
  & .chips .pill:nth-child(6n + 1) { background: #ffd23a; }
  & .chips .pill:nth-child(6n + 2) { background: #7b9cff; }
  & .chips .pill:nth-child(6n + 3) { background: #ff8fc7; }
  & .chips .pill:nth-child(6n + 4) { background: #b8f06a; }
  & .chips .pill:nth-child(6n + 5) { background: #b69cff; }
  & .chips .pill:nth-child(6n + 6) { background: #ff8a3d; }

  /* ---------- nav ---------- */
  & .nav { background: rgb(244 239 228 / 0.95); border-bottom: 3px solid #111111; }
  & .brand { background: #ffd23a; color: #111111; border: 3px solid #111111; box-shadow: 3px 3px 0 #111111; padding: 4px 16px 4px 4px; }
  & .brand-mark { background: #111111; color: #ffd23a; font: 700 17px/1 var(--font-display); }
  & .brand-name { font: 700 20px/1 var(--font-display); text-transform: none; letter-spacing: -0.04em; padding-top: 0; }
  & .nav-links a { color: #111111; font: 500 12px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  & .nav-links a:hover { color: #111111; border-bottom-color: #111111; }
  & .nav-phone { color: #111111; border: 2px solid #111111; font-family: var(--font-mono); font-weight: 500; }
  & .nav-phone:hover { background: #ffd23a; border-color: #111111; }
  & .nav-menu summary { --face: #ffd23a; --shade: color-mix(in srgb, var(--face) 68%, black); background: var(--face); border: 3px solid #111111; box-shadow: var(--mould-sm); }
  & .nav-menu[open] summary { box-shadow: var(--mould-press); transform: translateY(3px); }
  & .nav-menu ul { background: #fffaf0; border: 3px solid #111111; border-radius: 22px; box-shadow: 5px 5px 0 #111111; }
  & .nav-menu a { font-weight: 700; border-radius: 12px; }
  & .nav-menu a:hover { background: #ffd23a; }
  & .callbar { background: #f4efe4; border-top: 3px solid #111111; }

  /* ---------- hero: the poster becomes a bento ---------- */
  & .bp-poster { gap: 22px; }
  & .bp-panel {
    isolation: auto; background: var(--p-bg);
    border: 3px solid #111111; border-radius: 22px; box-shadow: 7px 7px 0 #111111;
    --ink: var(--p-ink); --muted: var(--p-ink);
  }
  & .bp-panel::before, & .bp-panel::after { content: none; }
  & .bp-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.12em; }
  & .bp-title { --p-bg: #ffd23a; }
  & .bp-title h1 { font-size: clamp(30px, 8.2vw, 104px); line-height: 0.94; letter-spacing: -0.05em; max-width: 14ch; overflow-wrap: break-word; }
  & .bp-sticker { background: #111111; color: #ffd23a; font: 700 17px/1.1 var(--font-display); letter-spacing: 0; text-transform: none; }
  & .bp-copy { --p-bg: #7b9cff; --p-ink: #111111; }
  & .bp-copy .lead { color: #111111; }
  & .bp-phone { --p-bg: #ff8fc7; --p-ink: #111111; --accent: #111111; }
  & .bp-number { font: 700 clamp(30px, 4.6vw, 58px)/1 var(--font-display); letter-spacing: -0.04em; }
  & .bp-number:hover { color: #111111; text-decoration: underline; text-decoration-thickness: 3px; }
  & .bp-feat { --p-bg: #b8f06a; --p-ink: #111111; --accent: #111111; }
  & .bp-feat li + li { border-top: 3px solid #111111; }
  & .bp-feat-name { font-weight: 700; }
  & .bp-feat-price { font: 700 22px/1 var(--font-display); color: #111111; letter-spacing: -0.03em; }
  & .bp-hours { --p-bg: #ff8a3d; --p-ink: #111111; }
  & .bp-hours .bp-label { color: #111111; }
  & .bp-hours dl div { border-bottom: 2px solid #111111; }
  & .bp-hours dd { font: 700 18px/1.2 var(--font-display); color: #111111; letter-spacing: -0.02em; }

  /* ---------- sections ---------- */
  & .highlights { background: #ffd23a; border-block: 3px solid #111111; }
  & .marquee-track { color: #111111; font: 700 22px/1.2 var(--font-display); letter-spacing: -0.02em; }
  & .marquee-track li::after { color: #111111; }
  & .group-title { font-size: 30px; border-bottom: 6px solid #ffd23a; letter-spacing: -0.04em; }

  & .about-media, & .gallery-item, & .hero-media { border: 3px solid #111111; border-radius: 22px; box-shadow: 7px 7px 0 #111111; }
  & .gallery-grid li:nth-child(odd) .gallery-item, & .gallery-grid li:nth-child(even) .gallery-item { border-radius: 22px; }
  & .gallery-grid { gap: 22px; }
  & .about-copy p { color: var(--ink-2); }
  & .ph-label { background: #111111; color: #fffaf0; font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.04em; border-radius: 8px; }
  & .stat { background: #fffaf0; border: 3px solid #111111; border-radius: 16px; box-shadow: 4px 4px 0 #111111; padding: 14px 16px 16px; }
  & .stats .stat:nth-child(6n + 1) { background: #b8f06a; }
  & .stats .stat:nth-child(6n + 2) { background: #ffd23a; }
  & .stats .stat:nth-child(6n + 3) { background: #ff8fc7; }
  & .stat dt { color: #2e2e2e; font-family: var(--font-mono); font-weight: 500; }
  & .stat dd { font: 700 38px/1.1 var(--font-display); letter-spacing: -0.045em; color: #111111; }
  & .stars { color: #111111; }

  & .faq-item, & .faq-item:first-child { border-color: #111111; }
  & .faq-item summary { color: #111111; font: 700 19px/1.35 var(--font-body); }
  & .faq-item summary::after {
    --face: #ffd23a; --shade: color-mix(in srgb, var(--face) 68%, black);
    background: var(--face); border: 2px solid #111111; color: #111111;
    box-shadow: 0 3px 0 var(--shade), 0 3px 0 2px #111111;
  }
  & .faq-item[open] summary::after { box-shadow: 0 1px 0 var(--shade), 0 1px 0 2px #111111; }
  & .faq-item p { color: var(--ink-2); }

  & .map { border: 3px solid #111111; border-radius: 22px; background: #ffd23a; box-shadow: 7px 7px 0 #111111; }
  & .hours th { font-weight: 700; }
  & .hours th, & .hours td { border-bottom: 2px solid rgb(17 17 17 / 0.5); }
  & .hours td { font: 700 18px/1.2 var(--font-display); color: #111111; letter-spacing: -0.02em; }
  & .hours caption { font-family: var(--font-mono); font-weight: 500; }
  & .contact-direct { color: #111111; }
  & .contact-direct a { text-decoration-color: #111111; text-decoration-thickness: 3px; }
  & .field label { font-family: var(--font-mono); font-weight: 500; }
  & .field input, & .field textarea { background: #fffaf0; color: #111111; border: 3px solid #111111; box-shadow: inset 0 3px 0 rgb(17 17 17 / 0.1); }
  & .field input:focus, & .field textarea:focus { outline: 3px solid #111111; outline-offset: 2px; background: #ffffff; }
  & .book-option, & .book-time, & .book-day { background: #fffaf0; border: 2px solid #111111; }
  & .book-option:has(input:checked), & .book-time:has(input:checked), & .book-day[aria-pressed="true"] { background: #ffd23a; color: #111111; border-color: #111111; }
  & .book-option-meta { color: #2e2e2e; }

  & .footer-card { border: 3px solid #111111; border-radius: 22px; box-shadow: 7px 7px 0 #111111; }
  & .footer-name { font: 700 30px/1 var(--font-display); text-transform: none; letter-spacing: -0.04em; }
  & .footer-title { color: #111111; font-family: var(--font-mono); font-weight: 500; }
  & .footer-base { border-top-color: rgb(17 17 17 / 0.5); color: #111111; }
  & .footer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
  & .footer a.btn { text-decoration: none; }
  & .footer a:hover { color: #111111; text-decoration-thickness: 4px; }
  & .wordmark { color: #111111; font: 700 clamp(60px, 15vw, 220px)/0.9 var(--font-display); text-transform: none; letter-spacing: -0.06em; }

  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .btn { transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s ease; }
      & .btn:active { transform: translateY(4px); }
      & .btn-sm:active { transform: translateY(3px); }
      & .faq-item summary::after { transition: box-shadow 0.15s ease; }
      & .ix { transition: translate 0.15s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1); }
    }
  }
}