/* 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--cal { white-space: normal; text-align: center; line-height: 1.2; max-width: 100%; }   /* 1.40.0: add-to-calendar buttons wrap on a 320 px phone */
  .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 */
  /* 1.7.0 — the free stay brochure, highlighted in the header (pill) and the phone menu (first item) */
  .hdr-gift { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .85rem; margin-right: .2rem; border-radius: var(--r-pill);
    background: var(--sun-soft); color: var(--ink); font-weight: 800; font-size: .9rem; white-space: nowrap; text-decoration: none;
    box-shadow: inset 0 0 0 1.5px var(--sun-deep); transition: background-color var(--dur-1); }
  .hdr-gift:hover { background: var(--sun); }
  .hdr-gift .i { width: 1.15em; height: 1.15em; color: #B3261E; }
  .hdr-gift[aria-current="page"] { background: var(--sun); }
  @media (min-width: 960px) and (max-width: 1023px) { .site-header .site-nav a { padding-inline: .48rem; } }   /* room for the gift pill at 960 */
  @media (max-width: 559px) { .hdr-gift { padding: 0 .7rem; margin-right: 0; } .hdr-gift__more { display: none; } }   /* phones: "🎁 Free" */
  @media (max-width: 359px), (min-width: 960px) and (max-width: 1239px) {
    .hdr-gift { width: 42px; min-height: 42px; padding: 0; justify-content: center; margin-right: 0; }
    .hdr-gift__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  /* "Feature your Billu" pill (v1.8.0): icon-only until the header has room for its label (≥ 1600 px) */
  @media (max-width: 1599px) {
    .hdr-sponsor { width: 42px; padding: 0; justify-content: center; margin-right: 0; }
    .hdr-sponsor__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  .menu-gift { display: grid !important; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; margin-bottom: var(--space-3);
    padding: .8rem 1rem !important; border-radius: var(--r-md); background: var(--sun-soft); border: 1.5px solid var(--sun-deep); }
  .menu-gift .i:first-child { width: 1.4rem; height: 1.4rem; color: #B3261E; }
  .menu-gift b { display: block; font-size: 1.05rem; }
  .menu-gift small { display: block; font-size: .88rem; font-weight: 600; color: var(--ink-2); margin-top: .1rem; }

  /* the first-visit pop-up (brochure-popup.js): a centred card on tablets/desktops, a bottom sheet on phones */
  .bq-pop { width: min(92vw, 440px); max-height: 92vh; padding: var(--space-6) var(--space-5) var(--space-5); border: 1px solid var(--line);
    border-radius: var(--r-lg); background: var(--paper-3); color: var(--ink); box-shadow: var(--shadow-2); text-align: center; overflow: auto; }
  .bq-pop::backdrop { background: rgba(42, 29, 20, .55); }
  .bq-pop[open] { animation: bq-pop-in .35s var(--ease-out); }
  .bq-pop__x { position: absolute; top: .5rem; right: .5rem; }
  .bq-pop__covers { position: relative; height: 112px; margin: 0 auto var(--space-3); width: 196px; }
  .bq-pop h2:focus, .bq-pop h2:focus-visible { outline: none; box-shadow: none; }   /* focused on open (not the ✕), no ring */
  .bq-pop__cover { position: absolute; top: 0; width: 82px; height: 110px; padding: 10px 8px; border-radius: 10px; box-shadow: var(--shadow-1);
    font: 800 .82rem/1.1 var(--font-display); text-align: left; }
  .bq-pop__cover--stay { left: 8px; z-index: 1; background: var(--sun); transform: rotate(-6deg); }
  .bq-pop__cover--stay b { background: var(--ink); color: var(--sun); border-radius: 30%; padding: 0 .1em; }
  .bq-pop__cover--stay small { display: block; margin-top: 8px; font: 700 .7rem/1.2 var(--font-text); }
  .bq-pop__cover--ww { right: 8px; background: var(--paper-2); color: #8A3B2C; border: 1px solid var(--line); transform: rotate(7deg); text-align: right; }
  .bq-pop__cover--ww em { position: absolute; right: -12px; bottom: 12px; padding: .2rem .5rem; border-radius: var(--r-pill); background: #B3261E;
    color: #fff; font: 800 .68rem/1 var(--font-text); font-style: normal; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); }
  .bq-pop__k { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .4rem; color: var(--amber); font-weight: 800; font-size: .85rem;
    letter-spacing: .1em; text-transform: uppercase; }
  .bq-pop__k .i { width: 1.1em; height: 1.1em; }
  .bq-pop h2 { margin: 0 0 var(--space-2); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem); line-height: 1.15; text-wrap: balance; }
  .bq-pop p { margin: 0 0 var(--space-4); color: var(--ink-2); }
  .bq-pop__go { width: 100%; justify-content: center; }
  .bq-pop__later { margin-top: var(--space-2); min-height: 44px; padding: 0 1rem; border: 0; background: none; color: var(--ink-2); font: 700 .95rem/1 var(--font-text);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  @media (max-width: 559px) {
    .bq-pop { width: 100vw; max-width: none; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); }
    .bq-pop[open] { animation-name: bq-pop-up; }
  }
  @keyframes bq-pop-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes bq-pop-up { from { transform: translateY(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .bq-pop[open] { animation: none; } }

  @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); }

  /* 1.30.0 pick-up day check (site.js BB.confirmPickup): a card with cat ears, centred; a bottom sheet on phones. "Yes" is the gold button. */
  .pk-dlg { width: min(460px, calc(100vw - 2 * var(--gutter))); margin: auto; background: transparent; overflow: visible; }
  .pk-dlg[open] { animation: bq-pop-in .28s var(--ease-out); }
  .pk-dlg__card { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); margin-top: 18px; }
  .pk-dlg__kick { margin: 0; font-size: .8rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
  .pk-dlg h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); line-height: 1.15; }
  .pk-dlg h2 span { white-space: nowrap; }
  .pk-dlg p { margin: 0; color: var(--ink-2); line-height: 1.5; }
  .pk-dlg__acts { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
  .pk-dlg__acts .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  @media (max-width: 560px) {
    .pk-dlg { width: 100%; margin: auto 0 0; max-width: none; }
    .pk-dlg[open] { animation: bq-pop-up .3s var(--ease-out); }
    .pk-dlg__card { border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  }
  @media (prefers-reduced-motion: reduce) { .pk-dlg[open] { animation: none; } }

  /* ---- 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; }
  /* 1.33.0 coupon box beside the ₹399: a dashed "ticket" with the code — tap = book online with the code ready */
  .ctag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; width: fit-content; max-width: 100%; padding: .3rem .7rem; border: 1.5px dashed var(--amber);
    border-radius: 12px; background: color-mix(in srgb, var(--sun) 14%, var(--paper-3)); color: var(--ink); text-decoration: none; font-size: .86rem; line-height: 1.25; }
  .ctag__l { font-weight: 700; color: var(--ink-2); }
  .ctag__c { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 900; letter-spacing: .06em; color: var(--ink); }
  .ctag__w { flex-basis: 100%; font-size: .74rem; font-weight: 700; color: var(--ink-2); }
  .ctag:hover { background: var(--sun-soft); } .ctag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .surface-deep .ctag, .price__col--direct .ctag { background: rgb(255 255 255 / .12); border-color: var(--sun); color: var(--on-deep, #fff); }
  .surface-deep .ctag__l, .surface-deep .ctag__w, .price__col--direct .ctag__l, .price__col--direct .ctag__w { color: var(--on-deep-2, #f3e9dc); }
  .surface-deep .ctag__c, .price__col--direct .ctag__c { color: var(--sun); }
  .ctag--btn { margin-top: .5rem; font: inherit; font-size: .86rem; cursor: pointer; }
  .ctag--btn[aria-pressed="true"] { border-style: solid; border-color: var(--sage-deep); background: color-mix(in srgb, var(--sage-deep) 12%, var(--paper-3)); }

  /* 1.32.0 — AI illustrations (app/art.py, docs/IMAGES.md): a slightly tilted postcard beside a section heading (above 900 px) or under it
     (phones). The "AI art" tag keeps them honest — real guest photos keep the arched frame. Sized + lazy, so nothing shifts. */
  .section-head-art { display: grid; gap: var(--space-4); align-items: center; margin-bottom: var(--space-6); }
  .section-head-art > .section-head { margin-bottom: 0; }
  @media (min-width: 900px) {
    .section-head-art { grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: var(--space-6); }
    .section-head-art--center { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  }
  .art { margin: 0; display: grid; gap: .55rem; justify-items: center; max-width: 520px; width: 100%; }
  .section-head-art--center .art { max-width: 460px; }
  .art__frame { position: relative; display: block; width: 100%; padding: 8px 8px 9px; border-radius: 22px; background: var(--paper-3);
    box-shadow: 0 1px 1px rgb(58 42 34 / .06), 0 14px 26px -10px rgb(58 42 34 / .28); transform: rotate(-1.4deg); transition: transform var(--dur-2) var(--ease); }
  .art:nth-of-type(even) .art__frame, .section-head-art:nth-of-type(even) .art__frame { transform: rotate(1.2deg); }
  .art__frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 15px; background: var(--paper-2); }
  @media (hover: hover) { .art:hover .art__frame { transform: rotate(0deg) translateY(-2px); } }
  .art__tag { position: absolute; right: 16px; bottom: 16px; padding: .12rem .5rem; border-radius: 999px; background: rgb(58 42 34 / .72); color: #fff;
    font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; pointer-events: auto; }
  .art figcaption { max-width: 34ch; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--ink-2); }
  @media (prefers-reduced-motion: reduce) { .art__frame, .art:hover .art__frame { transform: none; transition: none; } }
  @media (max-width: 899px) { .art { justify-self: center; } .art__frame { transform: rotate(-.8deg); } }
  .art--side { margin-top: var(--space-5); max-width: 360px; justify-self: start; }
  .site-hero__art .art { max-width: 440px; }
  .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; }
  .stepper button:disabled { opacity: .4; cursor: default; }

  /* 1.41.0: exact age (years + months steppers, macros.age_picker + site.js §8) */
  .agep { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; min-width: 0; }
  .agep legend { font-weight: 750; margin-bottom: .35rem; }
  .agep__row { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
  .agep__unit { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--ink-2); }
  .agep .hint { margin: 0; }

  .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; }
  /* 2026-11-07: the second button now carries the site's own words ("Book a vet visit") — keep them on one line on a 320 px phone too */
  @media (max-width: 340px) { .action-bar .btn { padding-inline: .5rem; gap: .4rem; font-size: .88rem; } }
  @media (min-width: 900px) { .action-bar { display: none; } }
}