/* components.css — small reusable parts (all token-driven, touch-first: 44–52 px targets, visible states).
   Inner-page authors: reuse these classes, see docs/DESIGN.md §12 for the catalogue. */

@layer components {
  /* ---- The B pebble: the brand's loud letter. <b class="bb">B</b> (made by the |bmark filter). Gold stone, cocoa B, two cat ears. ---- */
  .bb { position: relative; isolation: isolate; display: inline-block; font: inherit; font-weight: inherit; line-height: .98;
    color: var(--sun-ink); background: var(--sun); padding: .015em .17em .045em; margin-inline: .03em .02em;
    border-radius: .34em .34em .44em .44em; }
  .bb::before, .bb::after { content: ""; position: absolute; z-index: -1; top: -.14em; width: .36em; height: .3em; background: var(--sun); }
  .bb::before { left: .02em;  clip-path: polygon(0 100%, 6% 38%, 20% 4%, 34% 0, 100% 100%); }
  .bb::after  { right: .02em; clip-path: polygon(100% 100%, 94% 38%, 80% 4%, 66% 0, 0 100%); }
  .btn--sun .bb { background: var(--ink); color: var(--sun); }
  .btn--sun .bb::before, .btn--sun .bb::after { background: var(--ink); }
  .pebble-mark { width: 1.6em; height: 1.6em; }

  /* ---- Buttons ----------------------------------------------------------------------------------------------------- */
  .btn {
    --bg: var(--ink); --fg: var(--paper); --bd: transparent;
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 50px; padding: .72rem 1.5rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--bd); background: var(--bg); color: var(--fg);
    font-family: var(--font-text); font-weight: 780; font-size: 1rem; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
    transition: transform var(--dur-1) var(--ease), background-color var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2);
  }
  .btn:hover { color: var(--fg); }
  @media (hover: hover) { .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); } }
  .btn:active { transform: scale(.98); box-shadow: none; }
  .btn .i { width: 20px; height: 20px; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
  .btn--sun { --bg: var(--sun); --fg: var(--sun-ink); box-shadow: var(--glow); }
  .btn--sun:hover { --bg: var(--sun-press); }
  .btn--wa { --bg: var(--wa); --fg: var(--paper); }
  .btn--wa:hover { --bg: var(--wa-press); }
  .btn--ink { --bg: var(--ink); --fg: var(--paper); }
  .btn--deep { --bg: var(--sage-deep); --fg: var(--on-deep); }
  .btn--paper { --bg: var(--paper-3); --fg: var(--ink); --bd: var(--line); }
  .btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line-strong); }
  .btn--ghost:hover { --bd: var(--ink); }
  .surface-deep .btn--ghost, .sheet--deep .btn--ghost { --fg: var(--on-deep); --bd: var(--deep-line); }
  .btn--sm { min-height: 44px; padding: .5rem 1.15rem; font-size: .95rem; }
  .btn--lg { min-height: 56px; padding: .85rem 1.9rem; font-size: 1.08rem; }
  .btn--block { display: flex; width: 100%; }
  .btn.is-loading { color: transparent; pointer-events: none; }
  .btn.is-loading > * { visibility: hidden; }
  .btn.is-loading::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--fg); border-right-color: transparent; animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* The purr ring: a very slow, soft pulse behind THE primary button of a view (one per screen). */
  .btn--purr::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; border: 2px solid var(--sun-press); opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) { .btn--purr::before { animation: purr 3.8s 1.6s ease-out infinite; } }
  @keyframes purr { 0% { transform: scale(1); opacity: .65; } 62%, 100% { transform: scale(1.1, 1.42); opacity: 0; } }

  .icon-btn { flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: transparent; color: inherit; position: relative; text-decoration: none; }
  .icon-btn .i { width: 24px; height: 24px; }
  .icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  .icon-btn--wa { color: var(--wa); }
  .link-more { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-weight: 750; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--sun); align-self: center; }
  .link-more .i { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease); }
  .link-more:hover { color: var(--ink); } .link-more:hover .i { transform: translateX(4px); }
  .surface-deep .link-more { color: var(--on-deep); }

  /* ---- Announcement bar + header ----------------------------------------------------------------------------------- */
  .announce { background: var(--sage-deep); color: var(--on-deep); font-size: .9rem; font-weight: 650; }
  .announce p { max-width: none; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem var(--gutter); text-align: center; line-height: 1.35; }
  .announce .i { color: var(--sun); width: 1.1em; height: 1.1em; }

  .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
  .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -22px rgba(58,42,34,.6); }
  .site-header__inner { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); }
  .brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 750; font-size: 1.62rem; letter-spacing: -.025em; line-height: 1; color: var(--ink); white-space: nowrap; }
  .brand:hover { color: var(--ink); }
  .brand--lg { font-size: 2.1rem; } .surface-deep .brand, .site-footer .brand { color: var(--on-deep); }
  .site-nav { display: none; margin-left: var(--space-6); }
  .site-nav ul { list-style: none; display: flex; gap: var(--space-1); }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border-radius: var(--r-pill); font-weight: 750; text-decoration: none; transition: background-color var(--dur-1); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { background: color-mix(in srgb, var(--sun) 32%, transparent); }
  .site-header__actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex: none; }
  @media (min-width: 960px) { .site-nav { display: block; } .site-header__menu { display: none; } :root { --header-h: 72px; } }
  .site-nav a { white-space: nowrap; }
  /* five links + the Book button: tighten the nav between 960 and 1139 px so it never wraps */
  @media (min-width: 960px) and (max-width: 1139px) { .site-nav { margin-left: var(--space-2); } .site-nav a { padding-inline: .6rem; } .site-nav .has-sub > a { padding-right: .3rem; } .brand { font-size: 1.5rem; } }

  /* Services dropdown (desktop): hover or the chevron button opens it; Esc / outside click closes (site.js). Mobile uses the accordion in the menu sheet. */
  .site-nav .has-sub { position: relative; display: flex; align-items: center; }
  .site-nav .has-sub > a { padding-right: .35rem; }
  .sub-toggle { display: inline-grid; place-items: center; width: 34px; height: 44px; margin-left: -.3rem; border: 0; background: none; border-radius: 50%; color: inherit; }
  .sub-toggle .i { width: 16px; height: 16px; stroke-width: 2.4; transition: transform var(--dur-2) var(--ease); }
  .has-sub.is-open .sub-toggle .i { transform: rotate(180deg); }
  .submenu { position: absolute; z-index: 5; top: 100%; left: -.5rem; display: none; padding-top: 10px; }
  .submenu ul { list-style: none; display: grid; gap: .1rem; min-width: 340px; padding: .5rem; border-radius: var(--r-md); background: var(--paper-3); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .site-nav .submenu a { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .3rem .7rem .3rem .4rem; border-radius: var(--r-sm); font-weight: 700; }
  .site-nav .submenu a:hover, .site-nav .submenu a[aria-current="page"] { background: var(--sun-soft); }
  .submenu .pebble { width: 36px; height: 36px; background: var(--paper-2); } .submenu .pebble .i { width: 18px; height: 18px; }
  @media (hover: hover) { .has-sub:hover > .submenu { display: block; } }
  .has-sub.is-open > .submenu { display: block; }
  .menu-sheet .menu-sub { border-bottom: 1px solid var(--line); }
  .menu-sheet .menu-sub summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; list-style: none; cursor: pointer; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.55rem; font-weight: 650; }
  .menu-sheet .menu-sub summary::-webkit-details-marker { display: none; }
  .menu-sheet .menu-sub summary .i { color: var(--amber); transition: transform var(--dur-2) var(--ease); } .menu-sub[open] summary .i { transform: rotate(180deg); }
  .menu-sheet .menu-sub ul { list-style: none; display: grid; padding: 0 0 var(--space-3) var(--space-3); }
  .menu-sheet .menu-sub li a { min-height: 48px; border-bottom: 0; font-family: var(--font-text); font-size: 1.05rem; font-weight: 700; }
  .menu-sheet .menu-sub li:last-child a { color: var(--amber); }

  .menu-sheet { position: fixed; inset: 0 0 auto 0; width: 100%; max-height: 100dvh; margin: 0; overflow-y: auto; background: var(--paper); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-2); }
  .menu-sheet[open] { animation: sheet-in .34s var(--ease-out); }
  @keyframes sheet-in { from { transform: translateY(-14%); opacity: 0; } }
  .menu-sheet__inner { padding: var(--space-4) var(--gutter) var(--space-6); max-width: 560px; margin-inline: auto; display: grid; gap: var(--space-4); }
  .menu-sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
  .menu-sheet nav { display: grid; }
  .menu-sheet nav a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.55rem; font-weight: 650; }
  .menu-sheet nav a .i { color: var(--amber); }
  .menu-sheet__cta { display: grid; gap: var(--space-3); }
  dialog { padding: 0; border: 0; max-width: none; max-height: none; color: var(--ink); }
  dialog::backdrop { background: color-mix(in srgb, var(--ink) 50%, transparent); backdrop-filter: blur(3px); }

  /* ---- Cards ------------------------------------------------------------------------------------------------------- */
  .card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--r-lg); background: var(--paper-3); border: 1px solid var(--line); min-width: 0; }
  .card--flat { box-shadow: none; }
  /* Cat-ear corners: two soft triangles on the top edge. drop-shadow on the card (not box-shadow) so the ears carry the shadow too. */
  .ears { --ear-bg: var(--paper-3); position: relative; background: var(--ear-bg); border-radius: var(--r-lg); border: 0; filter: drop-shadow(0 1px 1px rgba(58,42,34,.07)) drop-shadow(0 14px 18px rgba(58,42,34,.12)); }
  .ears::before, .ears::after { content: ""; position: absolute; top: -16px; width: 40px; height: 34px; background: var(--ear-bg); pointer-events: none; }
  .ears::before { left: calc(var(--r-lg) - 8px); clip-path: path("M0 34 L5 10 Q8 -1 17 5.5 L40 34 Z"); }
  .ears::after  { right: calc(var(--r-lg) - 8px); clip-path: path("M40 34 L35 10 Q32 -1 23 5.5 L0 34 Z"); }
  .ears--paper-2 { --ear-bg: var(--paper-2); } .ears--deep { --ear-bg: var(--deep-2); color: var(--on-deep); }
  @media (hover: hover) { .lift { transition: transform var(--dur-2) var(--ease); } .lift:hover { transform: translateY(-4px); } }

  .tag { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font-size: .8rem; font-weight: 750; line-height: 1.3; }
  .tag .i { width: 14px; height: 14px; stroke-width: 2.4; }
  .tag--ok { background: #DFF1E5; color: #14633C; }
  .tag--sun { background: var(--sun-soft); color: var(--ink); }
  .tag--deep { background: var(--sage-deep); color: var(--on-deep); }

  .pebble { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 42% 42% 46% 46% / 52% 52% 48% 48%; background: var(--sun-soft); color: var(--ink); }
  .pebble .i { width: 26px; height: 26px; stroke-width: 1.7; }
  .pebble--sun { background: var(--sun); }

  /* Arched window: the site's signature photo shape. Set --ar-w / --ar-h (unitless) for the ratio; radius derives from it. */
  .arch { --ar-w: 4; --ar-h: 5; position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: var(--ar-w) / var(--ar-h);
    border-radius: 50% 50% var(--arch-r) var(--arch-r) / calc(50% * var(--ar-w) / var(--ar-h)) calc(50% * var(--ar-w) / var(--ar-h)) var(--arch-r) var(--arch-r); }
  .arch--sill { box-shadow: 0 0 0 6px var(--paper-3), var(--shadow-2); }
  .arch > .photo { position: absolute; inset: 0; }
  .photo { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; background-color: var(--paper-2); }
  .photo--placeholder { object-fit: contain; padding: 14%; }

  .stars { display: inline-flex; gap: 2px; color: var(--sun-deep); }
  .stars .i { width: 18px; height: 18px; }
  .stat { display: grid; gap: .1rem; align-content: start; }
  .stat__v { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: var(--step-2); line-height: 1; font-weight: 750; }
  .stat__l { font-size: var(--step--1); line-height: 1.3; color: var(--ink-2); font-weight: 650; }
  .surface-deep .stat__l, .stat--on-deep .stat__l { color: var(--on-deep-2); }

  /* Section title block */
  .section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 44rem; justify-items: start; }
  .section-head--center { margin-inline: auto; justify-items: center; text-align: center; }
  .whisk { width: 76px; height: 20px; fill: none; stroke: var(--sun-deep); stroke-width: 2.4; stroke-linecap: round; }
  .surface-deep .whisk { stroke: var(--sun); }

  /* Paw-bullet lists (checklists only) */
  .paws { list-style: none; display: grid; gap: .45rem; }
  .paws li { position: relative; padding-left: 1.7rem; line-height: 1.4; font-weight: 650; }
  .paws li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.15rem; height: 1.15rem; background: var(--amber);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.4c-3 0-5.4 2.4-5.4 4.6 0 1.8 1.5 2.6 3.1 2.6 1 0 1.5-.4 2.3-.4s1.3.4 2.3.4c1.6 0 3.1-.8 3.1-2.6 0-2.2-2.4-4.6-5.4-4.6z'/%3E%3Cellipse cx='5.4' cy='10' rx='1.9' ry='2.3'/%3E%3Cellipse cx='9.4' cy='5.8' rx='1.9' ry='2.4'/%3E%3Cellipse cx='14.6' cy='5.8' rx='1.9' ry='2.4'/%3E%3Cellipse cx='18.6' cy='10' rx='1.9' ry='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.4c-3 0-5.4 2.4-5.4 4.6 0 1.8 1.5 2.6 3.1 2.6 1 0 1.5-.4 2.3-.4s1.3.4 2.3.4c1.6 0 3.1-.8 3.1-2.6 0-2.2-2.4-4.6-5.4-4.6z'/%3E%3Cellipse cx='5.4' cy='10' rx='1.9' ry='2.3'/%3E%3Cellipse cx='9.4' cy='5.8' rx='1.9' ry='2.4'/%3E%3Cellipse cx='14.6' cy='5.8' rx='1.9' ry='2.4'/%3E%3Cellipse cx='18.6' cy='10' rx='1.9' ry='2.3'/%3E%3C/svg%3E") center / contain no-repeat; }
  .surface-deep .paws li::before { background: var(--sun); }

  /* ---- Reviews ----------------------------------------------------------------------------------------------------- */
  .review { display: flex; flex-direction: column; gap: .85rem; padding: 1.35rem 1.35rem 1.25rem; border-radius: var(--r-lg); background: var(--paper-3); border: 1px solid var(--line); box-shadow: var(--shadow-1); break-inside: avoid; min-width: 0; }
  .review__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
  .review__text p { max-width: none; font-size: 1rem; line-height: 1.62; }
  .js .review__text.is-clamped p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
  .review__more { align-self: start; min-height: 44px; padding: 0 .1rem; border: 0; background: none; font-weight: 800; color: var(--amber); border-bottom: 2px solid var(--sun); border-radius: 0; margin-top: -.5rem; }
  .review__who { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
  .review__avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 42% 42% 46% 46%; background: var(--sun-soft); font-family: var(--font-display); font-weight: 750; font-size: 1.15rem; }
  .review__name { display: grid; line-height: 1.3; min-width: 0; justify-items: start; }
  .review__name small { font-size: .84rem; color: var(--ink-3); font-weight: 600; }
  .review__name a { color: var(--ink-2); }
  .review__reply { border-radius: var(--r-md); background: var(--blush-soft); padding: 0 1rem; }
  .review__reply summary { list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 46px; font-weight: 750; cursor: pointer; }
  .review__reply summary::-webkit-details-marker { display: none; }
  .review__reply summary::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--amber); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3.5 11.5 9 17M4 11.5h9a7 7 0 0 1 7 7v1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3.5 11.5 9 17M4 11.5h9a7 7 0 0 1 7 7v1'/%3E%3C/svg%3E") center / contain no-repeat; }
  .review__reply summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; font-weight: 700; color: var(--amber); }
  .review__reply[open] summary::after { content: "–"; }
  .review__reply p { max-width: none; padding-bottom: 1rem; font-size: .96rem; color: var(--ink-2); }

  /* ---- Forms: labelled, 16 px+ text (iOS never zooms), chips instead of native selects, errors = scroll + glow + focus ---- */
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  legend { padding: 0; }
  .field { display: grid; gap: .4rem; min-width: 0; align-content: start; }
  .field > label, .field > legend, .label { font-weight: 750; font-size: .98rem; line-height: 1.3; }
  .req { color: var(--err); font-weight: 800; }
  .hint { font-size: var(--step--1); color: var(--ink-3); line-height: 1.4; max-width: none; }
  .field input:not([type=checkbox]):not([type=radio]), .field textarea {
    width: 100%; min-height: 52px; padding: .8rem 1rem; font-size: 1rem; font-weight: 600; border-radius: 16px;
    border: 1.5px solid var(--line-strong); background: var(--paper-3); color: var(--ink); transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2); appearance: none; -webkit-appearance: none; }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); font-weight: 500; opacity: 1; }
  .field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
  .field input[type=date] { min-height: 52px; }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--sage-deep); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 55%, transparent); }
  .field-error { color: var(--err); font-size: .92rem; font-weight: 750; max-width: none; line-height: 1.35; }
  .field[aria-invalid="true"] input, .field[aria-invalid="true"] textarea { border-color: var(--err); background: #FFF4F2; }
  .field[aria-invalid="true"] .chip span { border-color: color-mix(in srgb, var(--err) 60%, var(--line-strong)); }
  .field-glow { border-radius: var(--r-md); animation: field-glow 3s ease-in-out; }
  .field-glow input, .field-glow textarea { animation: field-glow-in 3s ease-in-out; }
  @keyframes field-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 20%, 80% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--err) 30%, transparent); } }
  @keyframes field-glow-in { 0%, 100% { border-color: var(--line-strong); } 20%, 80% { border-color: var(--err); } }
  .check { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .98rem; line-height: 1.45; min-height: 44px; padding-block: .35rem; }
  .check input { width: 24px; height: 24px; margin: 0; accent-color: var(--sage-deep); flex: none; }

  .chiprow { display: flex; flex-wrap: wrap; gap: .5rem; }
  .chip { position: relative; display: inline-flex; }
  .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .chip span { display: inline-flex; align-items: center; gap: .4rem; min-height: 46px; padding: .5rem 1.1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper-3); font-weight: 700; font-size: .98rem; transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-1); }
  .chip:hover span { border-color: var(--ink-2); }
  .chip input:checked + span { background: var(--sun); border-color: var(--sun-press); color: var(--sun-ink); }
  .chip input:checked + span::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.8 4.8 9.6-10.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.8 4.8 9.6-10.4'/%3E%3C/svg%3E") center / contain no-repeat; }
  .chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
  .chip:active span { transform: scale(.97); }

  .stepper { display: inline-flex; align-items: center; gap: .25rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--paper-3); padding: 3px; width: fit-content; }
  .stepper button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; }
  .stepper button:hover { background: var(--sun-soft); }
  .stepper .i { width: 20px; height: 20px; }
  .stepper output { min-width: 2.4rem; text-align: center; font-weight: 800; font-size: 1.1rem; }

  .phone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; position: relative; }
  .cc { position: relative; }
  .cc__btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 52px; padding: 0 .8rem 0 1rem; border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--paper-3); font-weight: 750; }
  .cc__btn .i { width: 16px; height: 16px; }
  .cc__list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; list-style: none; padding: .4rem; border-radius: 16px; background: var(--paper-3); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .cc__list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 0 .8rem; border-radius: 12px; cursor: pointer; font-weight: 650; }
  .cc__list li:hover, .cc__list li:focus-visible { background: var(--sun-soft); }
  .cc__list li[aria-selected="true"] { background: var(--sage-tint); font-weight: 800; }

  .estimate { display: grid; gap: .25rem; padding: 1rem 1.15rem; border-radius: var(--r-md); background: var(--sun-soft); color: var(--ink); }
  .estimate__main { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 1.3rem; line-height: 1.25; }
  .estimate p { max-width: none; font-size: .95rem; }
  .estimate .save { color: #14633C; font-weight: 800; }

  /* ---- Toasts: top of the stack (z 99999), polite live region, never block input ----------------------------------- */
  .toast-stack { position: fixed; z-index: var(--z-toast); right: 1rem; bottom: 1rem; display: grid; gap: .5rem; width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
  .toast { pointer-events: auto; display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-2); font-size: .95rem; font-weight: 650; animation: toast-in .35s var(--ease-out); }
  .toast--error { background: var(--err); color: #fff; }
  .toast__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .85; padding: .35rem .5rem; font-size: 1.2rem; line-height: 1; min-width: 36px; min-height: 36px; }
  .toast.is-leaving { opacity: 0; transform: translateY(8px); transition: .25s; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  @media (max-width: 760px) { .toast-stack { left: 1rem; right: 1rem; bottom: calc(5.2rem + env(safe-area-inset-bottom)); width: auto; } }

  /* ---- Sticky mobile action bar: the primary action stays in thumb reach once the hero buttons scroll away ------------- */
  .action-bar { position: fixed; z-index: var(--z-bar); left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-3); padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
    transform: translateY(110%); visibility: hidden; transition: transform var(--dur-2) var(--ease), visibility 0s var(--dur-2); }
  .action-bar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
  .action-bar .btn { flex: 1; padding-inline: .8rem; }
  .action-bar .btn--sun { flex: 1.35; box-shadow: none; }
  .action-bar .btn .i:last-child:not(:first-child) { display: none; }
  @media (min-width: 900px) { .action-bar { display: none; } }
}