/*
 * Woof Magic Spa — site overrides
 *
 * Loaded after the theme's style.css, so everything here survives a theme
 * update. Keep the vendor files untouched and put customisations in this file.
 */

/* ---------------------------------------------------------------------------
 * Space between sections
 *
 * The theme pads every .space section by 120px top and bottom, so two of them
 * back to back leave 240px of empty page between one heading and the next —
 * a lot of scrolling for nothing on a page with as many sections as ours.
 *
 * Changed at the source: .space, .space-top, .space-bottom and the .space-extra
 * variants all measure themselves from these two, so one number moves the lot
 * and they stay in proportion to each other.
 * ------------------------------------------------------------------------ */

:root {
  --section-space: 80px; /* theme: 120px */
  --section-space-mobile: 56px; /* theme: 80px */
}

/* ---------------------------------------------------------------------------
 * Header: logo, menu and buttons on one line
 *
 * The theme's header was drawn for a six-item menu. Ours carries seven and two
 * buttons, which pushed "Call us" and "Book Appointment" past the end of the
 * row and onto a second line between about 1300px and 1600px wide.
 *
 * The row is told never to wrap. What each part gives up as the viewport
 * narrows now lives with that part rather than here: the menu's spacing in
 * "Desktop menu: the icon over the label" and the buttons' in "The two header
 * actions", both at the foot of this file.
 * ------------------------------------------------------------------------ */

.th-header .menu-area > .container > .row {
  flex-wrap: nowrap;
}

/* The buttons keep their size; the menu is what gives way. */
.th-header .menu-area > .container > .row > .col-auto:last-child {
  flex-shrink: 0;
}

@media (max-width: 1499px) {
  /* The dropdown's own links. The top row sizes itself — see the desktop menu
     section — and this is what is left. */
  .header-default .main-menu a {
    font-size: 15px;
  }

  /* Below 992px .header-button holds the chat button and the menu toggle, and
     nothing else; the desktop pair is spaced with the actions at the foot of
     this file. */
  .header-default .header-button {
    gap: 22px;
  }
}

/* ---------------------------------------------------------------------------
 * The white behind the mark
 *
 * assets/img/logo-mark.png is the salon's mark with the white disc taken out
 * from behind it, so on the home page it sits straight on the hero's peach.
 *
 * The mark is black line art, though, and it has to survive two dark
 * backgrounds: the footer, and the breadcrumb banner every other page leads
 * with. It cannot simply be rendered white there — the dog and the cat are
 * told apart by the black between them, and a white silhouette merges the two
 * into one shape. So the disc comes back on those, drawn here rather than
 * baked into the file. The mark is square, so a round backdrop needs no more
 * than a radius.
 * ------------------------------------------------------------------------ */

body:not(.hero-light) .header-logo img,
.footer-default .about-logo img {
  background: var(--white-color, #fff);
  border-radius: 50%;
}

/* The footer's is drawn at its natural size, which the disc would dwarf. */
.footer-default .about-logo img {
  max-width: 132px;
}

/* ---------------------------------------------------------------------------
 * Logo
 *
 * The theme caps it at 80px, which leaves the salon's mark small against a
 * full-width header. It is grown into the empty page margin to its left — a
 * negative margin only where there is dead space to spend, so the menu keeps
 * every pixel the fit above bought it.
 *
 * The logo block is what sets the header's height, so anything changed here
 * has to be paid for in the hero's top padding. See the next section.
 * ------------------------------------------------------------------------ */

.header-default .header-logo img {
  max-height: 132px;
}

.header-default .header-logo {
  margin-left: -44px;
}

@media (max-width: 1399px) {
  .header-default .header-logo img {
    max-height: 112px;
  }

  .header-default .header-logo {
    margin-left: -18px;
  }
}

/* Below 1300px the container all but fills the window, so there is no margin
   left to borrow — any further and the logo would sit against the edge. */
@media (max-width: 1299px) {
  .header-default .header-logo {
    margin-left: -10px;
  }
}

@media (max-width: 575px) {
  .header-default .header-logo {
    margin-left: -8px;
  }
}

/* Stuck to the top of the screen, a 162px bar eats too much of the page. */
.header-default .sticky-wrapper.sticky .header-logo img {
  max-height: 76px;
  background-color: #fdefe7;
    border-radius: 50px;
}

/* The taller logo leaves the menu sitting low against it; lifted optically
   rather than by margin, so the row's height is still the logo's business.
 *
 * The buttons on the other side are lifted with it. They are centred on the
 * same row, so lifting only the menu left the two out of line with each other.
 * Above 992px only: below that this button holds the mobile menu toggle, which
 * lines up with the logo and should stay where it is. */
@media (min-width: 992px) {
  .header-default .main-menu,
  .header-default .header-button {
    position: relative;
    /* top: -12px; */
  }
}

/* The address band takes the place of the gap the theme left above the header,
   so the whole thing starts flush at the top of the page.

   The hero's top padding is worked out from these numbers, so the two have to
   change together — see the hero section further down. Below 992px the header
   stops being overlaid at all; that is "The address band on a phone" above. */
.header-default {
  top: 0; /* theme: 50px */
}

/* Where to find the salon. A band of its own rather than text laid over the
   page, because the header is overlaid on a light hero here and on a dark
   photograph elsewhere, and one colour has to hold up over both.

   On every screen, phones included — see "The address band on a phone" below
   for how it gets there without landing on the headline. */
.header-address {
  background: var(--title-color, #02000f);
  color: var(--white-color, #fff);
  padding: 8px 0;
}

/* Address to the left, the profiles to the right. */
.header-address > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-address p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: inherit;
}

.header-address p i {
  margin-right: 8px;
  color: var(--theme-color, #f8721f);
}

.header-address_social {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.header-address_social a {
  color: var(--white-color, #fff);
  font-size: 15px;
  line-height: 1;
  transition: 0.3s;
}

.header-address_social a:hover {
  color: var(--theme-color, #f8721f);
}

/* ---------------------------------------------------------------------------
 * The address band on a phone
 *
 * The band used to be hidden below 992px, because the header is one absolutely
 * positioned block laid over whatever the page leads with: everything in it
 * has to be paid for out of the hero's top padding, and an address that wraps
 * to two lines on one phone and three on the next cannot be paid for by a
 * number written down in a stylesheet. Hiding it was the cheap way out.
 *
 * So instead of guessing its height, the band is taken out of the overlay
 * altogether down here. The header goes back into the flow of the page, which
 * leaves it exactly as tall as the band inside it, and the menu bar is lifted
 * out and overlaid on its own. The band then sits above the hero and pushes it
 * down by however tall it happens to be, whatever the phone and however the
 * address wraps, and the hero's padding only has to clear the menu bar — which
 * is a fixed height and always was.
 *
 * The two rules below have to stay together: the header cannot go into the
 * flow unless the menu bar comes out of it, or the hero starts a menu bar's
 * height too low.
 * ------------------------------------------------------------------------ */

@media (max-width: 991px) {
  /* Back in the flow, and flush to the top — a gap above a full-width dark
     band reads as a mistake rather than as breathing room. Replaces the
     theme's 20px, and the 12px and 0 this file used to set here. */
  .header-default {
    position: relative;
    top: -25px;

  }

  /* And the menu bar back out of it, so the header's height is the band's
     alone. left/right rather than bare `position` — an absolute box with both
     auto shrinks to fit its contents, and the bar has to span the page.
     Nothing is said about `top`, so it stays where the flow put it: directly
     under the band.

     :not(.sticky) so this loses to the theme's `position: fixed` the moment
     main.js sticks the bar to the top of the screen. Without it the two rules
     have equal weight and this one, being the later of the two, would win. */
  .header-default .sticky-wrapper:not(.sticky) {
    position: absolute;
    left: 0;
    right: 0;
  }

  /* Smaller and tighter than on a desktop: the address is the longest thing on
     the page at this width, and every line it saves is a line the visitor does
     not scroll past to reach the hero. */
  .header-address {
    padding: 7px 0;
  }

  .header-address > .container {
    gap: 14px;
  }

  .header-address p {
    font-size: 12px;
    line-height: 1.4;
  }

  .header-address p i {
    margin-right: 6px;
  }

  /* Held on the same row as the address rather than wrapped below it, which
     would cost the band another 28px for two icons. */
  .header-address_social {
    gap: 14px;
  }

  .header-address_social a {
    font-size: 14px;
  }
}

/* Booking is the point of the page, so the button is filled theme colour
   rather than the theme's outline, and carries a slow glow to catch the eye
   against the hero photograph behind it. */
.header-book-btn {
  font-weight: 500;
  box-shadow: 0 8px 22px rgba(248, 114, 31, 0.4);
  animation: bookNowGlow 2.8s ease-in-out infinite;
}

.header-book-btn:hover,
.header-book-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(248, 114, 31, 0.55);
  animation: none;
}

@keyframes bookNowGlow {
  0%,
  100% {
    box-shadow: 0 8px 22px rgba(248, 114, 31, 0.32);
  }

  50% {
    box-shadow: 0 10px 30px rgba(248, 114, 31, 0.6);
  }
}

/* A pulsing button is a nuisance to anyone who asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  .header-book-btn {
    animation: none;
  }

  .header-book-btn:hover,
  .header-book-btn:focus {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Instagram reel
 *
 * The embed sets its own width in inline styles, and Instagram's script adds
 * more of them once it loads, so this only centres the result and stops it
 * running wider than its column. The `min-width: 326px` it comes with is what
 * would otherwise push it past the edge on a narrow phone.
 * ------------------------------------------------------------------------ */

.reel-embed {
  display: flex;
  justify-content: center;
}

.reel-embed .instagram-media {
  margin: 0 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Paw prints
 *
 * Scattered across the backgrounds of the home page by partials/paws, which
 * needs its section to carry `has-paws`. Faint enough to read as texture rather
 * than as something to look at, and never in the way of a click.
 *
 * Font Awesome's glyph rather than an image: it is already loaded on every
 * page, and one glyph scales to any size without a second request.
 *
 * The positions are set by hand rather than scattered by script — some of them
 * have to keep clear of a headline, and the rest read better following a
 * wandering trail than they do truly at random.
 * ------------------------------------------------------------------------ */

.has-paws {
  position: relative;
}

/* Whatever the section holds sits above them. */
.has-paws > .container {
  position: relative;
  z-index: 1;
}

.paw-scatter {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--theme-color, #f8721f);
}

.paw-scatter i {
  position: absolute;
  opacity: 0.13;
}

/* Lighter over a colour than over white, so they weigh the same either way. */
.bg-smoke2.has-paws .paw-scatter i,
.bg-smoke.has-paws .paw-scatter i {
  opacity: 0.1;
}

/* 1 — the hero. Eight, keeping off the headline and the collage. */
.paw-scatter--1 i:nth-child(1) {
  top: 15%;
  left: 3%;
  font-size: 38px;
  transform: rotate(-24deg);
}

.paw-scatter--1 i:nth-child(2) {
  top: 27%;
  left: 12%;
  font-size: 22px;
  transform: rotate(12deg);
}

.paw-scatter--1 i:nth-child(3) {
  top: 58%;
  left: 2%;
  font-size: 28px;
  transform: rotate(18deg);
}

.paw-scatter--1 i:nth-child(4) {
  top: 84%;
  left: 14%;
  font-size: 20px;
  transform: rotate(-14deg);
}

.paw-scatter--1 i:nth-child(5) {
  top: 88%;
  left: 33%;
  font-size: 32px;
  transform: rotate(28deg);
}

.paw-scatter--1 i:nth-child(6) {
  top: 12%;
  left: 44%;
  font-size: 24px;
  transform: rotate(-32deg);
}

.paw-scatter--1 i:nth-child(7) {
  top: 6%;
  left: 88%;
  font-size: 30px;
  transform: rotate(20deg);
}

.paw-scatter--1 i:nth-child(8) {
  top: 92%;
  left: 76%;
  font-size: 26px;
  transform: rotate(-18deg);
}

/* 2 — services. Down both edges, clear of the cards in the middle. */
.paw-scatter--2 i:nth-child(1) {
  top: 8%;
  left: 4%;
  font-size: 30px;
  transform: rotate(16deg);
}

.paw-scatter--2 i:nth-child(2) {
  top: 46%;
  left: 1%;
  font-size: 22px;
  transform: rotate(-22deg);
}

.paw-scatter--2 i:nth-child(3) {
  top: 82%;
  left: 6%;
  font-size: 26px;
  transform: rotate(30deg);
}

.paw-scatter--2 i:nth-child(4) {
  top: 14%;
  left: 93%;
  font-size: 24px;
  transform: rotate(-12deg);
}

.paw-scatter--2 i:nth-child(5) {
  top: 74%;
  left: 96%;
  font-size: 34px;
  transform: rotate(24deg);
}

/* 3 — testimonials. */
.paw-scatter--3 i:nth-child(1) {
  top: 12%;
  left: 8%;
  font-size: 26px;
  transform: rotate(-28deg);
}

.paw-scatter--3 i:nth-child(2) {
  top: 68%;
  left: 3%;
  font-size: 34px;
  transform: rotate(14deg);
}

.paw-scatter--3 i:nth-child(3) {
  top: 22%;
  left: 91%;
  font-size: 30px;
  transform: rotate(22deg);
}

.paw-scatter--3 i:nth-child(4) {
  top: 80%;
  left: 88%;
  font-size: 20px;
  transform: rotate(-16deg);
}

.paw-scatter--3 i:nth-child(5) {
  top: 90%;
  left: 46%;
  font-size: 22px;
  transform: rotate(34deg);
}

/* 4 — the blog. */
.paw-scatter--4 i:nth-child(1) {
  top: 10%;
  left: 6%;
  font-size: 24px;
  transform: rotate(20deg);
}

.paw-scatter--4 i:nth-child(2) {
  top: 52%;
  left: 2%;
  font-size: 32px;
  transform: rotate(-18deg);
}

.paw-scatter--4 i:nth-child(3) {
  top: 86%;
  left: 12%;
  font-size: 20px;
  transform: rotate(26deg);
}

.paw-scatter--4 i:nth-child(4) {
  top: 16%;
  left: 90%;
  font-size: 28px;
  transform: rotate(-24deg);
}

.paw-scatter--4 i:nth-child(5) {
  top: 78%;
  left: 94%;
  font-size: 22px;
  transform: rotate(12deg);
}

/* ---------------------------------------------------------------------------
 * Home hero
 *
 * Two columns on a light ground: what we do on the left, the collage on the
 * right. It replaces the theme's hero-1 entirely — that one laid white text
 * over a full-bleed photograph, which is why so much of this file used to be
 * about keeping the two apart.
 *
 * The header is absolutely positioned over whatever comes first, so the top
 * padding here is what stops the headline running under the logo:
 *
 *     header bottom edge = .header-default "top" + the address band (36px)
 *                          + the logo block (the logo cap, plus 15px padding
 *                          above and below)
 *                        = 198px at 1400px and wider, and 178px below it.
 *
 * Below 992px the band is no longer part of the overlay — it sits above the
 * hero and pushes it down by its own height, whatever that turns out to be, so
 * it drops out of this sum entirely. What is left to clear is the menu bar:
 * the same logo block, plus the 20px .menu-area adds of its own below 992px,
 * and nothing above it. That is 162px, and it does not change again further
 * down, which is why there is one figure below rather than two.
 * ------------------------------------------------------------------------ */

.hero-woof {
  --hero-bg: #fdefe7;

  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  padding: 238px 0 0px; /* edge 198 + 40 */
}

/* See "Paw prints" below. */

/* The theme's entrance animations start at opacity 0 and are only handed an
   animation to run by `.swiper-slide-active` — they were written for text
   inside the hero slider. Ours sits beside the slider rather than in it, so
   without this the words fade in from nothing to nothing and the column reads
   as empty. */
.hero-woof [data-ani="slideinup"] {
  --animation-name: slideinup;
}

/* And if animations are turned off, the text still has to be there. */
@media (prefers-reduced-motion: reduce) {
  .hero-woof [data-ani] {
    opacity: 1;
    animation: none;
  }
}

/* The offer, as a voucher stub beside the booking button.
 *
 * Drawn rather than dropped in as an image: it stays sharp at any size and the
 * wording can be changed without opening a graphics program. It stands in the
 * flow of the row rather than over the collage, where the prints run edge to
 * edge and anything on top of them covers a pet.
 *
 * Dark rather than orange, because the button it stands beside is orange and
 * two orange shapes side by side read as one.
 *
 * The notches are circles of the hero's own background sitting half outside
 * the stub — hence --hero-bg, so the two cannot fall out of step. */
.hero-woof_coupon {
  position: relative;
  flex-shrink: 0;
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--title-color, #02000f);
  color: var(--white-color, #fff);
  box-shadow: 0 10px 24px rgba(2, 0, 15, 0.2);
}

.hero-woof_coupon::before,
.hero-woof_coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hero-bg);
  transform: translateY(-50%);
}

.hero-woof_coupon::before {
  left: -9px;
}

.hero-woof_coupon::after {
  right: -9px;
}

/* The tear line, inset from the edge the way a printed voucher has it. */
.hero-woof_coupon-inner {
  padding: 7px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  text-align: center;
  line-height: 1.15;
}

/* The offer itself, never broken across lines — "20% Discount" wrapping to
   "20%" over "Discount" would read as two offers. */
.hero-woof_coupon strong {
  display: block;
  white-space: nowrap;
  font-family: var(--title-font);
  font-size: 22px;
  font-weight: 600;
  color: var(--theme-color2, #f4e11b);
}

/* What it applies to. The stub was drawn around "all services"; "on all premium
   services" is twice that, and on one line it stretched the voucher into a bar
   half as wide again as the button beside it. The cap breaks it in two under
   the offer, which is the shape a printed voucher has anyway.

   Set just under the width of the offer above, so the offer stays what decides
   how wide the stub is and a change of wording here cannot stretch it. */
.hero-woof_coupon span {
  display: block;
  max-width: 125px;
  margin: 2px auto 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-woof_title {
  font-size: 60px;
  font-weight: 500;
  margin-bottom: 24px;
}

/* A class beats the theme's h1 rules at every width, so the sizes it steps
   down to on smaller screens have to be restated here or 60px would follow the
   headline all the way onto a phone. These mirror the theme's own steps. */
@media (max-width: 767px) {
  .hero-woof_title {
    font-size: 44px;
  }
}

@media (max-width: 575px) {
  .hero-woof_title {
    font-size: 36px;
  }
}

/* A highlighter run under the words rather than through them: drawn as a
   background stroke so it sits behind the letters and follows a line break. */
.hero-woof_mark {
  background-image: linear-gradient(
    var(--theme-color2, #f4e11b),
    var(--theme-color2, #f4e11b)
  );
  background-repeat: no-repeat;
  background-size: 100% 0.22em;
  background-position: 0 86%;
  padding: 0 0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-woof_text {
  font-size: 18px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 40px;
}

/* The sticker sits in this row too, and is taller than the buttons. */
.hero-woof .btn-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* The collage.
 *
 * It stays inside its column: run wider than that and the right-hand print is
 * cut off by the edge of the window, which at most sizes leaves no page margin
 * to spare. The breathing room from the words is padding on the left instead.
 *
 * The yellow loop is drawn into the collage itself rather than laid behind it
 * here — the file is an opaque JPEG, so anything behind it is simply hidden.
 * See `ring` in config/site.php.
 */
.hero-woof_art {
  position: relative;
  top: -70px;
}

@media (min-width: 992px) {
  .hero-woof_art {
    padding-left: 48px;
  }
}

.hero-woof_slider {
  position: relative;
  z-index: 1;
  padding-bottom: 10px; /* for the dots */
}

.hero-woof_slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* Dots, so it is plain there is a second collage behind the first. */
.hero-woof_slider .slider-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.hero-woof_slider .slider-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0;
  opacity: 1;
  background: rgba(2, 0, 15, 0.18);
  transition: 0.3s;
}

.hero-woof_slider .slider-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 9px;
  background: var(--theme-color, #f8721f);
}

/* The logo cap drops to 112px here, so the block is 142 rather than 162. */
@media (max-width: 1399px) {
  .hero-woof {
    padding-top: 218px; /* edge 178 + 40 */
  }
}

@media (max-width: 1199px) {
  .hero-woof_text {
    font-size: 16px;
  }
}

/* .menu-area adds 20px of its own padding from here down, and the address band
   stops being overlaid — so this clears the menu bar alone: 142 + 20 = 162. */
@media (max-width: 991px) {
  .hero-woof {
    padding: 202px 0 70px; /* menu bar 162 + 40 */
    text-align: center;
    margin-top: -25px;
  }

  .hero-woof_text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-woof .btn-wrap {
    justify-content: center;
  }

  .hero-woof_art {
    top: 0;
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  /* The header used to drop its 12px offset here, and this took the 12px off
     to match. It is flush from 992px down now, so there is nothing left to
     take off and the padding above carries all the way down. */
  .hero-woof_ring {
    border-width: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * Chat in the header on a phone
 *
 * AiSensy's button floats at the bottom right of every page. On a desktop that
 * corner is empty and it sits well; on a phone it is a pill with wording in it,
 * held down in a corner the visitor's thumb is already using, and it competes
 * with the refer-a-friend tab opposite. So below 992px it moves into the header
 * beside the menu toggle, where it is the first thing on the page rather than
 * something laid over it.
 *
 * "Moves" is a simplification: theirs is hidden and ours takes its place.
 * Their button cannot be moved into the header itself — it is
 * `position: fixed !important` and would not travel with the header at all.
 *
 * Ours does not open their panel, and must not try: the panel is drawn inside
 * #df-btn-cont, which the rule below hides, so opening it would show nothing.
 * It goes straight to WhatsApp instead, which on a phone lands in the app.
 *
 * Their rules are injected into a <style> at run time, so they land after this
 * file whatever the order of the links in the head; the extra `body` is what
 * outranks them rather than relying on being later.
 * ------------------------------------------------------------------------ */

.header-chat-btn {
  display: none; /* desktop keeps their floating button */
}

@media (max-width: 991px) {
  .header-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px; /* to the left of the menu toggle */
    padding: 0 16px;
    height: 46px;
    border-radius: 999px;
    /* WhatsApp's own green rather than the theme's orange: beside an orange
       menu toggle, two orange buttons would read as one control, and this is
       the mark people know by its colour before its shape. */
    background: #25d366;
    color: var(--white-color, #fff);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
  }

  .header-chat-btn:hover,
  .header-chat-btn:focus {
    background: #1da851;
    color: var(--white-color, #fff);
  }

  .header-chat-btn i {
    font-size: 19px;
  }

  body #df-btn-cont {
    display: none !important;
  }
}

/* Below about 400px the logo, the wording, the toggle and the page's own
   margins stop fitting on one line. The wording is what goes — the green pill
   and the mark still say what it is. */
@media (max-width: 399px) {
  .header-chat-btn {
    padding: 0;
    width: 46px;
    justify-content: center;
  }

  .header-chat-btn_text {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Instagram, in its own colours
 *
 * The glyph is Font Awesome's official one and stays as it is; what changes is
 * that it is painted with Instagram's gradient instead of the white the rest of
 * the row is drawn in. It is the salon's only social account, so it is not one
 * icon of six that ought to match — it is the one thing there, and the mark
 * people recognise is the coloured one.
 *
 * Done by clipping a background to the glyph's own shape, which is the only way
 * to put a gradient inside a font character.
 *
 * Wrapped in @supports because the trick fails destructively: a browser that
 * understands `-webkit-text-fill-color` but not `background-clip: text` would
 * draw the icon in nothing at all. Without support it simply stays white.
 *
 * One rule covers the address band, the footer and the groomers' pages alike —
 * all three render through partials/social-links.
 * ------------------------------------------------------------------------ */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fa-instagram {
    /* Instagram's own: the light corner sits bottom-left of the mark, which is
       what the off-centre radial origin is for. */
    background: radial-gradient(
      circle at 30% 107%,
      #fdf497 0%,
      #fdf497 5%,
      #fd5949 45%,
      #d6249f 60%,
      #285aeb 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* The hover colour the links carry cannot reach a glyph whose fill is
     transparent, so the feedback is a lift in brightness instead. */
  a:hover > .fa-instagram {
    filter: brightness(1.18);
  }
}

/* ---------------------------------------------------------------------------
 * The refer-a-friend tab
 *
 * Bottom right, stacked above the chat button rather than opposite it. It was
 * bottom left when the scroll-to-top button still shared the right corner and
 * three things there would have been a pile; with that button gone the corner
 * has room for two, and the offer is worth more beside the chat button than
 * marooned across the page from it.
 *
 * The clearance is the 110px the scroll-to-top needed for the same job — see
 * "The bottom corners" at the end of this file. Only from 992px up: below that
 * AiSensy's button is hidden and ours sits in the header instead, so the corner
 * is empty and the tab can have it.
 *
 * It slides in from off the right edge a few seconds after the page settles,
 * which is late enough not to compete with whatever the visitor came to read.
 * `hidden` until then, so it never flashes on a slow connection.
 * ------------------------------------------------------------------------ */

.referral-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998; /* under AiSensy's button, over the page */
  /* Sized to its wording rather than to a number. With the explanatory line
     gone there is only the headline left, and that headline is written by the
     programme -- "Give 20%, get 20%" when the friend saves too, the longer
     "Refer a friend, get 20% off" when they do not. A fixed width either
     orphans a word off the end of the long one or leaves the short one
     rattling around. */
  width: max-content;
  max-width: min(340px, calc(100vw - 48px));
  border-radius: 14px;
  background: var(--title-color, #02000f);
  color: var(--white-color, #fff);
  box-shadow: 0 18px 44px rgba(2, 0, 15, 0.28);

  /* Held off the edge until the class arrives. */
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

/* Clear of AiSensy's button, which only exists at this width and up. */
@media (min-width: 992px) {
  .referral-float {
    bottom: 110px;
  }
}

.referral-float.is-shown {
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .referral-float {
    transition: none;
    transform: none;
  }
}

.referral-float_body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  color: inherit;
}

.referral-float_body:hover {
  color: inherit;
}

.referral-float_icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--theme-color, #f8721f);
  font-size: 18px;
}

.referral-float_words {
  display: block;
  line-height: 1.3;
}

.referral-float_title {
  display: block;
  font-family: var(--title-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--theme-color2, #f4e11b);
}

/* The second offer, under the first.
 *
 * Its own colour rather than dimmed white, because it is a second offer and
 * not a footnote to the first — set in the theme's orange against the
 * referral's yellow, so the two read as a pair of offers rather than as a
 * heading with a subtitle. Both are the site's own colours; a third hue would
 * have been a new one introduced for a box this size.
 *
 * No opacity: dimming was what made it read as secondary, and it also drops
 * the contrast on the one line here that quotes a rate. */
.referral-float_text {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--theme-color, #f8721f);
}

/* Small, and outside the link, so dismissing it can never be a mis-tap on the
   thing it is offering. */
.referral-float_close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white-color, #fff);
  color: var(--title-color, #02000f);
  font-size: 16px;
  line-height: 22px;
  box-shadow: 0 4px 12px rgba(2, 0, 15, 0.25);
}

/* On a phone the corner is the tab's own: AiSensy's button is hidden below
   992px and ours sits in the header, so unlike before it gives up no width to
   anything beside it. */
@media (max-width: 575px) {
  .referral-float {
    right: 16px;
    bottom: 16px;
    max-width: min(300px, calc(100vw - 32px));
  }

  .referral-float_body {
    gap: 10px;
    padding: 12px 14px;
  }

  .referral-float_icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .referral-float_title {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------
 * The refer-a-friend band
 *
 * A block of the hero's own cream set inside the page rather than a full-width
 * section: the sections above and below it are white and smoke, and a third
 * band running edge to edge would have read as one more of them rather than as
 * an offer. Inset and rounded, it reads as something pinned to the page.
 * ------------------------------------------------------------------------ */

.referral-band {
  position: relative;
  overflow: hidden;
  background: #fdefe7;
  border-radius: 20px;
  padding: 48px 16px;
}

/* The loyalty band, directly under the referral one.
 *
 * Dark rather than another tint. A pale one was tried first and it was very
 * nearly the page's own cream, so the card had no edges and the band read as
 * ordinary page copy rather than as something being pointed at. Dark is the
 * same treatment the figures block on the offers page gets, so it is a
 * borrowed idea rather than a new one, and it gives the pair a light card and
 * a dark card instead of two of the same.
 *
 * Everything inside it has to be re-coloured: the heading and the body text
 * are set for a light card. The sub-title and the button are already the
 * theme's orange, which holds up on this. */
.referral-band--loyalty {
  background: var(--title-color, #02000f);
}

.referral-band--loyalty .sec-title {
  color: var(--white-color, #fff);
}

.referral-band--loyalty .referral-band_text {
  color: rgba(255, 255, 255, 0.82);
}

.referral-band .sec-title {
  font-size: 38px;
}

.referral-band_text {
  max-width: 52em;
  font-size: 17px;
}

@media (max-width: 991px) {
  .referral-band {
    padding: 36px 12px;
    text-align: center;
  }

  .referral-band .sec-title {
    font-size: 30px;
  }

  /* The button follows the words into the middle rather than staying against
     an edge the text no longer has. */
  .referral-band .text-lg-end {
    text-align: center !important;
  }
}

/* ---------------------------------------------------------------------------
 * The same hero on the inner pages
 *
 * components/page-hero renders the block above's markup with the page's own
 * words in it, so the cream, the paws, the type and the space above it are all
 * inherited and only the differences are written down.
 *
 * What differs is what is behind the words: one of the salon's photographs,
 * run off the right-hand edge of the window and faded out under the text, so
 * the band is one thing rather than a column of words next to a picture. The
 * home page keeps its collage — that is three framed prints laid on the cream,
 * deliberately a picture you look at; this is a ground you read over.
 *
 * The photograph is optional — see `page_hero_photo` in config/site.php. Every
 * rule here that depends on it hangs off `.hero-woof--media`, which the
 * component only adds once it has found the file on disk, so without it the
 * hero is the plain cream band it was before.
 * ------------------------------------------------------------------------ */

/* Well short of the home page's 90px. That was set under a collage hanging
   below the end of the words; nothing here hangs that low. */
.hero-woof--page {
  padding-bottom: 55px;
}

/* A 60px headline set across 1300px is a banner rather than a page title.
   Roughly the width the home page's headline reaches before it wraps, so the
   two are read at the same measure. */
.hero-woof--page .hero-woof_content {
  max-width: 680px;
}

/* Held back further with the photograph behind it, so the words finish well
   before the picture starts to show through and the two never fight. */
.hero-woof--media .hero-woof_content {
  max-width: 560px;
}

/* The home page centres its words below 992px, and this block inherits that.
   A max-width block does not follow it on its own once the screen is wider
   than the text. */
@media (max-width: 991px) {
  .hero-woof--page .hero-woof_content {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------------------------------------------------------------------
 * The photograph behind it
 *
 * Absolute rather than in the row, and pinned to the right of the section
 * rather than the container: the section runs the full width of the window, so
 * this reaches the edge of the screen and off it. That bleed is most of the
 * effect — a picture that stops at the container's margin reads as a picture
 * on the page, and one that runs off the edge reads as the page itself.
 *
 * How far down it starts is the one figure here worth explaining.
 *
 * The header is drawn in ink over this hero and ink over a photograph is not
 * legible, so the picture has to begin below it. It used to begin at the
 * header's full bottom edge — 198px, the figure the hero's top padding is
 * worked out from further up this section — which left a band of bare cream
 * between the two.
 *
 * That figure is the wrong one, because it is set by the logo, and the logo is
 * at the far left where this picture never reaches. What the picture has to
 * clear is the header's right-hand end. The sum for that:
 *
 *     address band 36 + (162 - 56) / 2 + 56 = 145
 *
 * — the band, then the Book Appointment button centred in the 162px row the
 * logo makes (15 + 132 + 15), then the button's own height. The telephone
 * block beside it is shorter and finishes a few pixels higher.
 *
 * 145 is the floor, not a margin of comfort. Below it the picture runs behind
 * the header itself, and while the button is filled orange and would survive
 * that, "Call us" and the number are ink and sit at 81-94% of the window —
 * inside the stretch the veil has already let go of completely. Going higher
 * means giving that block a ground of its own to sit on.
 * ------------------------------------------------------------------------ */

.hero-woof_media {
  position: absolute;
  top: 10px; /* just below the header's text; see above */
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: 0;
}

.hero-woof_media img {
  width: 100%;
  height: 100%;
  /* The band is about three times as wide as it is tall and the file is
     square, so roughly a third of its height survives and none of its width.
     32% rather than centred puts that third across the ears, eyes and bow: the
     middle of the photograph is the chest, and centring cropped the head off
     at the whiskers. The paws go either way — there is no band this shape that
     keeps both a face and a pair of front paws. */
  object-fit: cover;
  object-position: 50% 32%;
}

/* What makes it emerge rather than sit there: the hero's own cream over the
   photograph, solid at its left edge and gone by a little past halfway, so
   there is no line anywhere the two meet.
 *
 * Across only. There was a second gradient down the top edge as well, to soften
 * the line where the picture starts below the header — but the cat's head is at
 * the top of the crop and that is exactly what it washed out. The seam is the
 * cheaper of the two to live with.
 *
 * Why it clears by 58% and not later: the file is square, so it fills the band
 * without being cropped from the sides, and the cat sits in the middle of it —
 * at 72% the face was still under half a veil of cream. The subject has to
 * land in the clear part, and with nothing cropped off the sides the only way
 * to arrange that is to clear the veil sooner.
 *
 * The colour is written out rather than taken from --hero-bg because these are
 * partly transparent stops and a variable cannot supply the alpha. It is the
 * same #fdefe7; change one and change the other. */
.hero-woof_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #fdefe7 0%,
    rgba(253, 239, 231, 0.97) 15%,
    rgba(253, 239, 231, 0.6) 35%,
    rgba(253, 239, 231, 0) 58%
  );
}

/* The logo drops to 112px here and the whole header comes up 20px with it, text
   and all. */
@media (max-width: 1399px) {
  .hero-woof_media {
    top: 130px;
  }
}

/* Narrower windows leave the words less room, so the picture gives some back
   rather than crowding them. */
@media (max-width: 1199px) {
  .hero-woof_media {
    width: 50%;
  }

  .hero-woof--media .hero-woof_content {
    max-width: 460px;
  }
}

/* Off below 992px.
 *
 * There the words are centred and run the full width, so there is nowhere for
 * the photograph to be except behind them — and ink over a photograph needs a
 * veil heavy enough that little of the picture survives it. A phone gets the
 * plain cream band, which is what it had before any of this. */
@media (max-width: 991px) {
  .hero-woof_media {
    display: none;
  }
}

/* The trail, in place of the home page's button row.
 *
 * The theme drew it as a 619px-wide masked white plaque, centred, 157px below a
 * banner title — which is what it needed sitting at the foot of a full-width
 * photograph. In a five-column block on cream it has to be an ordinary line of
 * text again, so the plaque, the width and the margin all come off. */
.hero-woof--page .breadcumb-menu {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.hero-woof--page .breadcumb-menu::before {
  display: none;
}

/* Theme: 24px, sized to fill the plaque. Beside an intro line at 18px that read
   as a second headline rather than as the trail. */
.hero-woof--page .breadcumb-menu li,
.hero-woof--page .breadcumb-menu a,
.hero-woof--page .breadcumb-menu span {
  font-size: 16px;
}

.hero-woof--page .breadcumb-menu li::after {
  font-size: 14px;
}

/* The words are centred below 992px — see the home hero's rules above — and an
   inline-block list does not follow the text-align of its parent on its own. */
@media (max-width: 991px) {
  .hero-woof--page .breadcumb-menu {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
 * The header over a light hero
 *
 * The theme's header is drawn in white for a dark photograph behind it. The
 * home page no longer has one, so on that page alone the links go back to ink
 * — except once the bar sticks, where the theme gives it a near-black
 * background and white is right again.
 * ------------------------------------------------------------------------ */

.hero-light .header-default .sticky-wrapper:not(.sticky) .main-menu > ul > li > a,
.hero-light .header-default .sticky-wrapper:not(.sticky) .main-menu > ul > li > a::after {
  color: var(--title-color, #02000f);
}

.hero-light
  .header-default
  .sticky-wrapper:not(.sticky)
  .main-menu
  > ul
  > li
  > a:hover {
  color: var(--theme-color, #f8721f);
}

/* The Call us button used to be the theme's .info-card and needed the same
   treatment. It has its own colours now, light bar and dark — see "The two
   header actions" at the foot of this file. */

/* ---------------------------------------------------------------------------
 * Team tabs — home and about pages
 *
 * Every other generated crop is sized by the theme's own CSS; the big photo in
 * the tab panel was the one slot it never sized, because the artwork it shipped
 * (assets/img/team/team-big-1-1.png) was already 397x538. Ours is generated at
 * twice that for high-density screens, so with nothing to size it the browser
 * laid it out at 794px wide: it squeezed the groomer's description into a
 * column a few words across, and the photo overflowed its own frame, which
 * clips — which is why the pet was cut off and the ceiling was in shot.
 * ------------------------------------------------------------------------ */

.team-tab-content .team-thumb {
  flex: 0 0 auto;
  width: 397px;
  max-width: 100%;
}

.team-tab-content .team-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stacked below 991px, where the theme turns the card into a column. */
@media (max-width: 991px) {
  .team-tab-content .team-thumb {
    width: 100%;
    max-width: 397px;
    margin-inline: auto;
  }
}

/* The tab list's avatars.
 *
 * The theme framed these with a ring on their container and left the corners
 * to the artwork, which was a circular PNG. Ours is a square photograph, so it
 * covered both the shape and the ring — including the orange one that marks
 * which groomer is being shown. The frame therefore goes on the photograph
 * itself, where nothing can hide it.
 *
 * The sizes are the theme's; only the border is ours, and it sits inside them,
 * so nothing moves. */
.team-nav-wrap .nav .nav-item .nav-link .team-thumb-sm {
  border-color: transparent;
  border-radius: 18px;
}

.team-nav-wrap .nav .nav-item .nav-link .team-thumb-sm img {
  border: 3px solid var(--th-border-color, #e4e4e5);
  border-radius: 18px;
  transition: 0.4s;
}

.team-nav-wrap .nav .nav-item .nav-link:hover .team-thumb-sm img {
  border-color: var(--th-border-color4, rgba(198, 201, 212, 0.5));
}

/* Carries the theme's own meaning: this is the groomer on show. */
.team-nav-wrap .nav .nav-item .nav-link.active .team-thumb-sm img {
  border-color: var(--theme-color, #f8721f);
}

/* ---------------------------------------------------------------------------
 * Services grid — home page and /services
 *
 * The section used to be a Swiper carousel; it is now a plain Bootstrap grid
 * so every service is visible at once. Cards are stretched to equal height so
 * the rows line up regardless of how long a description runs.
 *
 * The tile is our own, not the theme's .service-card: the photograph sits above
 * the text rather than behind it, and everything is centred. The theme's card
 * is left alone because the About page still uses it.
 * ------------------------------------------------------------------------ */

.service-grid > [class*="col-"] {
  display: flex;
}

.service-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 14px;
  border-radius: 24px;
  background: var(--smoke-color2, #f6f2ed);
  text-align: center;
  transition: 0.4s;
}

.service-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(2, 0, 15, 0.1);
}

.service-tile .box-img {
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

.service-tile .box-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: 0.4s;
}

.service-tile:hover .box-img img {
  transform: scale(1.06);
}

.service-tile .box-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 28px 16px 20px;
}

.service-tile .box-title {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 16px;
}

.service-tile .box-title a {
  color: var(--title-color, #02000f);
}

.service-tile .box-title a:hover {
  color: var(--theme-color, #f8721f);
}

.service-tile .box-text {
  margin: 0;
  line-height: 1.9;
}

/* Price and roughly-how-long, sitting between the title and the description. */
.service-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.service-price {
  color: var(--theme-color, #f8721f);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
}

.service-duration {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--white-color, #fff);
  color: var(--body-color, #6c6d71);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

.service-duration i {
  color: var(--theme-color, #f8721f);
}

/* ---------------------------------------------------------------------------
 * Spa menu (home page)
 *
 * Prices are laid out as one panel per size band, each carrying a labelled
 * chip per service level, rather than as a table. Three reasons:
 *
 * 1. The theme puts a 1px border on every table, th and td (style.css), which
 *    made the menu read as a spreadsheet.
 *
 * 2. Short coats are sold at two service levels and long coats at three, so
 *    columns never lined up between the two blocks, or between dogs and cats.
 *
 * 3. Chips wrap. A four-column table could not fit a phone without scrolling
 *    sideways; this needs no scroller at all.
 * ------------------------------------------------------------------------ */

.spa-menu-included {
  background: var(--white-color);
  border-radius: 30px;
  padding: 30px 35px;
  margin-bottom: 30px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.08);
}

.spa-menu-included_title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.spa-menu-included_list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spa-menu-included_list li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--body-color);
}

/* One icon per service, from config/spa-menu.php. The circle is a fixed size
   so the labels line up down the wrapped rows however wide the glyph is. */
.spa-menu-included_list li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-color5, #fff5f1);
  font-size: 15px;
  color: var(--theme-color);
}

/* Cards stack down each column and size to their own content: making them
   equal height is what left the shorter pet's card mostly empty.
 *
 * The two columns do finish level, though. Whichever is shorter takes the
 * difference in the gaps between its cards rather than in one stretched card,
 * so no card ends with a band of empty white under its last row. The column
 * with only one card in it has no gaps to give, which is why it is the one
 * that sets the height. */
.spa-menu-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  height: 100%;
}

.spa-menu-card_head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.spa-menu-card_head .box-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Decorative: the heading beside it already names the pet. */
.spa-menu-pet {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  padding: 11px;
  border-radius: 16px;
  background: var(--smoke-color2, #f6f2ed);
  object-fit: contain;
}

.spa-menu-badge {
  background: var(--smoke-color3);
  color: var(--title-color);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.spa-menu-badge strong {
  color: var(--theme-color);
  font-weight: 700;
}

.spa-menu-coat {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--theme-color);
  margin: 26px 0 10px;
}

.spa-menu-grades {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spa-menu-grade {
  padding: 18px 20px;
  border: 1px solid var(--th-border-color3, rgba(56, 61, 70, 0.1));
  border-radius: 20px;
  transition: 0.4s;
}

.spa-menu-grade:hover {
  border-color: var(--theme-color);
  box-shadow: 0 12px 28px rgba(2, 0, 15, 0.07);
}

.spa-menu-grade_head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-bottom: 14px;
}

.spa-menu-grade_name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.spa-menu-weight {
  font-size: 13px;
  color: var(--body-color);
  white-space: nowrap;
}

/* One chip per service level, each labelled so it reads on its own. */
.spa-menu-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.spa-menu-price {
  flex: 1 1 120px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--smoke-color2, #f6f2ed);
}

.spa-menu-price dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--body-color);
  margin-bottom: 2px;
}

.spa-menu-price dd {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--title-color);
  margin: 0;
}

/* That size band is not sold at that service level. */
.spa-menu-price.is-empty {
  background: transparent;
  border: 1px dashed var(--th-border-color3, rgba(56, 61, 70, 0.1));
}

.spa-menu-price.is-empty dd {
  color: var(--light-color);
}

.spa-menu-cta {
  margin-top: 50px;
}

.spa-menu-note {
  color: var(--body-color);
  font-size: 15px;
  margin: 10px 0 18px;
}

.spa-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.spa-menu-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--th-border-color);
}

.spa-menu-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.spa-menu-list strong {
  color: var(--theme-color);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .spa-menu-included {
    padding: 25px;
  }
}

@media (max-width: 575px) {
  .spa-menu-grade {
    padding: 16px;
  }

  .spa-menu-price {
    padding: 9px 14px;
  }
}

/* ---------------------------------------------------------------------------
 * The bottom corners
 *
 * The right-hand one carries AiSensy's chat button, bottom-right with a 30px
 * margin — a dashboard setting of theirs, not ours; see `whatsapp_widget` in
 * config/site.php — and the refer-a-friend tab stacked above it at 110px. The
 * left corner is empty; the tab used to be there, and moved once the corner
 * opposite had room for it.
 *
 * That 110px is the clearance the theme's scroll-to-top button needed for the
 * same job before it was taken off the site. Their button's height is theirs to
 * change from their dashboard, so if it ever grows, this is the number that
 * moves with it — and the tab is the thing that will overlap first.
 *
 * Below 992px none of this applies: their button is hidden and ours is in the
 * header, so the tab takes the corner at the usual margin.
 */

/* ---------------------------------------------------------------------------
 * The offers page
 *
 * Two cards, side by side above 992px and stacked below it. They are the same
 * card with the second tinted: the offers are worth the same amount of the
 * visitor's attention, and giving one a heavier treatment than the other would
 * be a claim about which matters that the salon has not made.
 *
 * Sized off the rate rather than the prose. The number is what somebody has
 * come to the page for, so it is the thing that reads first from across a room,
 * and everything under it is there for whoever has decided to care.
 * ------------------------------------------------------------------------ */

.offer-card {
  display: flex;
  flex-direction: column;
  padding: 40px;
  border-radius: 20px;
  background: var(--smoke-color3, #fff3e0);
}

.offer-card--alt {
  background: var(--smoke-color2, #f6f2ed);
}

.offer-card_flag {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--theme-color, #f8721f);
  color: var(--white-color, #fff);
  font-size: 14px;
  font-weight: 600;
}

.offer-card_rate {
  margin: 0;
  font-size: 64px;
  line-height: 1;
  color: var(--title-color, #02000f);
}

.offer-card_line {
  margin: 8px 0 16px;
  font-family: var(--title-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--title-color, #02000f);
}

.offer-card_text {
  margin-bottom: 16px;
}

.offer-card_tiers {
  font-size: 15px;
}

/* The button sits on the bottom edge whatever the prose above it does, so two
   cards of unequal wording still line up. */
.offer-card .th-btn {
  align-self: flex-start;
  margin-top: auto !important;
}

/* ---------------------------------------------------------------------------
 * What the offers have done
 *
 * Hidden entirely until the numbers are worth printing — see
 * App\Services\OfferStats. A quiet month should show the offers, not the
 * arithmetic against them.
 * ------------------------------------------------------------------------ */

.offer-stats {
  padding: 40px;
  border-radius: 20px;
  background: var(--title-color, #02000f);
  color: var(--white-color, #fff);
}

.offer-stats_title {
  margin-bottom: 28px;
  text-align: center;
  color: var(--white-color, #fff);
}

.offer-stats_figure {
  display: block;
  font-family: var(--title-font);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--theme-color2, #f4e11b);
}

.offer-stats_label {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  opacity: 0.8;
}

.offer-stats_note {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  opacity: 0.65;
}

.offer-how {
  padding: 40px;
  border-radius: 20px;
  background: var(--smoke-color, #f6f6f6);
}

.offer-how_title {
  margin-bottom: 20px;
}

.offer-how_steps {
  margin: 0;
  padding-left: 20px;
}

.offer-how_steps li + li {
  margin-top: 10px;
}

@media (max-width: 575px) {
  .offer-card,
  .offer-stats,
  .offer-how {
    padding: 28px 22px;
  }

  .offer-card_rate {
    font-size: 52px;
  }

  .offer-stats_figure {
    font-size: 36px;
  }
}

/* The points table on the offers page.
 *
 * Wrapped rather than left to fit: three money columns are readable down to
 * about 380px and then they are not, and a table that scrolls inside its own
 * box beats one that widens the page under it. */
.offer-table-wrap {
  overflow-x: auto;
  margin-top: 20px;
  border-radius: 14px;
  background: var(--white-color, #fff);
}

.offer-table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
}

.offer-table th,
.offer-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--th-border-color, #e9e6e2);
}

.offer-table thead th {
  font-family: var(--title-font);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--body-color, #6c6d71);
}

.offer-table tbody tr:last-child td {
  border-bottom: 0;
}

/* The middle column is the one the reader is checking the arithmetic on. */
.offer-table td:nth-child(2) {
  font-weight: 600;
  color: var(--title-color, #02000f);
}

.offer-table td:last-child {
  font-weight: 700;
  color: var(--theme-color, #f8721f);
}

.offer-how_note {
  margin-top: 20px;
  font-size: 15px;
  opacity: .75;
}

/* Third card in the row, so the rate has less width to sit in. */
@media (min-width: 992px) {
  .offer-card--points .offer-card_rate {
    font-size: 58px;
  }
}

/* ---------------------------------------------------------------------------
 * Menu icons
 *
 * Decorative, beside the label rather than instead of it — see
 * config/navigation.php. Sized in ems so they follow the menu's own type as it
 * shrinks with the viewport, and dimmed a little: at full strength seven icons
 * across a bar compete with the words they are labelling.
 *
 * This is now the layout for the desktop dropdown alone. The top row of the
 * bar stacks the icon over the label, and the off-canvas menu colours it and
 * gives it a fixed width; both override all of it. See the two sections after
 * this one.
 * ------------------------------------------------------------------------ */

.nav-icon {
  margin-right: 7px;
  font-size: 0.9em;
  opacity: 0.75;
  /* Fixed width so labels start on a common left edge in the dropdown and in
     the off-canvas menu, where the items are stacked and the ragged start
     would show. */
  width: 1.1em;
  text-align: center;
}

/* On the current page the label goes theme-orange; the icon follows it rather
   than staying grey beside it. */
.main-menu ul li.active > a .nav-icon,
.main-menu ul li:hover > a .nav-icon {
  opacity: 1;
}

/* Below 1400px the menu is already giving up letter spacing to fit; the icons
   give up their gap too before anything wraps. */
@media (max-width: 1399px) {
  .main-menu .nav-icon {
    margin-right: 5px;
    font-size: 0.85em;
  }
}

/* ---------------------------------------------------------------------------
 * Off-canvas menu: the same pills, down a drawer instead of across a bar
 *
 * The phone half of the bar redrawn above. What carries over is everything but
 * the stacking: coloured icons at full strength, the heading face on the
 * labels, and the page you are on filled solid in the theme colour.
 *
 * The icon stays beside the label rather than over it. A drawer 310px wide is
 * a column of rows, and a row is as wide as the drawer whatever is in it — the
 * argument for stacking was horizontal room, and there is none to save here.
 * Stacking would only make every row twice as tall in a list that already
 * scrolls.
 *
 * The hairlines between rows go. A row that fills solid when it is the page
 * cannot also sit in a ruled table: the rules run into the fill and the pill
 * reads as a mistake rather than as a mark. Space separates them now.
 *
 * Two marks rather than the bar's one, because a drawer shows a branch and its
 * pages at the same time where the bar hides them behind a dropdown: the page
 * itself fills, and the branch it sits under is tinted. Filling both would put
 * two solid blocks one above the other and say the same thing twice.
 * ------------------------------------------------------------------------ */

@media (max-width: 991px) {
  /* 40px each side of a 310px drawer left the rows barely 230px wide, and the
     pills have their own padding to find on top of that. */
  .th-mobile-menu > ul {
    padding: 0 18px;
  }

  /* The list scrolls and the Call us button below it does not, so the room
     that button takes has to come off the list's ceiling — otherwise the last
     row is pushed past the bottom of a short screen with no way to reach it.
     Theme: 100vh - 200px, with 40px of padding under the list. */
  .th-mobile-menu {
    max-height: calc(100vh - 270px);
    padding-bottom: 8px;
  }

  .th-mobile-menu ul li,
  .th-mobile-menu ul li li:first-child {
    border: none;
  }

  .th-mobile-menu ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Theme: 12px 0 12px 18px, drawn for a ruled row rather than a pill. */
    padding: 11px 14px;
    border-radius: 12px;
    font-family: var(--title-font, "Fredoka", sans-serif);
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  /* Fixed width, so the labels start on one edge however wide the mark inside
     it happens to be — an envelope is not a paw. */
  .th-mobile-menu .nav-icon {
    width: 24px;
    margin-right: 0;
    font-size: 19px;
    opacity: 1;
    color: var(--nav-color, var(--theme-color, #f8721f));
  }

  /* The theme floats a round +/− chip at the end of a parent row and the menu
     script appends a second one, absolutely positioned, on top of it — near
     enough the same place to pass for one chip while the row was a block. In a
     flex row the floated one stops floating and lands beside the label, so the
     pair comes apart. The script's is the one kept: it is out of flow, so the
     pill can lay itself out without working around it. */
  .th-mobile-menu ul .menu-item-has-children > a::after {
    display: none;
  }

  .th-mobile-menu ul .menu-item-has-children > a .th-mean-expand {
    right: 10px;
  }

  /* The branch the page sits under. Tinted rather than filled — see the note
     about two marks above. */
  .th-mobile-menu ul li.active > a {
    background-color: rgba(248, 114, 31, 0.1);
    color: var(--theme-color, #f8721f);
  }

  /* And the page itself. Keyed to the attribute rather than to a class because
     that is exactly what it means: one link in the drawer is the page, and
     .active is every link on the way to it. */
  .th-mobile-menu ul li > a[aria-current="page"] {
    background-color: var(--theme-color, #f8721f);
    color: var(--white-color, #fff);
  }

  .th-mobile-menu ul li > a[aria-current="page"] .nav-icon {
    color: var(--white-color, #fff);
  }

  /* Tablets have a pointer; phones do not, and lose nothing by this. */
  .th-mobile-menu ul li:not(.active) > a:hover {
    background-color: rgba(248, 114, 31, 0.08);
  }

  /* Theme: 20px, measured from a row that started 18px in. The pills start
     14px in already, so the step only has to be the difference. */
  .th-mobile-menu ul li ul li {
    padding-left: 14px;
  }

  /* Call us, under the list. The desktop pair's outlined pill, laid along the
     row rather than stacked, and lined up with the menu above it — same 18px
     margin as the list's padding, so the two left edges agree. */
  .mobile-call-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 18px 0;
    padding: 11px 14px;
    border: 1px solid rgba(2, 0, 15, 0.14);
    border-radius: 12px;
    color: var(--title-color, #02000f);
    text-align: left;
    transition: background-color 0.25s ease, border-color 0.25s ease,
      color 0.25s ease;
  }

  /* The same 24px column the menu icons stand in, so the mark lines up with
     the seven above it and the button reads as the end of the list rather
     than as something bolted under it. */
  .mobile-call-btn i {
    width: 24px;
    font-size: 19px;
    text-align: center;
    color: var(--theme-color, #f8721f);
  }

  .mobile-call-btn_text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .mobile-call-btn_caption {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
  }

  .mobile-call-btn_number {
    font-family: var(--title-font, "Fredoka", sans-serif);
    font-size: 16px;
    font-weight: 600;
  }

  .mobile-call-btn:hover,
  .mobile-call-btn:focus-visible {
    background-color: rgba(248, 114, 31, 0.1);
    border-color: rgba(248, 114, 31, 0.45);
    color: var(--theme-color, #f8721f);
  }
}

/* ---------------------------------------------------------------------------
 * Desktop menu: the icon over the label, the current page in a filled pill
 *
 * Seven items in a row, each a big coloured icon with its name under it, and
 * the page you are on picked out in a solid theme-orange pill. The icons were
 * already there but inline and dimmed, where they read as decoration on the
 * words; given a line of their own and their own colour they become the thing
 * the eye lands on, and the row scans as a set of places rather than a
 * sentence of links.
 *
 * The pill is the point of the exercise. Until now nothing on the page said
 * which of the seven you were looking at — the .active rules further up were
 * written but never reached, because no one was setting the class. That is
 * now App\Services\Navigation's job, and a whole branch lights up: open one of
 * the four pages under Resources and Resources is the one marked.
 *
 * Everything is scoped to min-width 992px and to the top level of the bar. The
 * dropdown keeps its inline icons, and the off-canvas menu below 992px is
 * untouched — the theme hides this menu there anyway.
 *
 * Width was the thing to watch: the bar has to hold seven items between a
 * 132px logo and the Book Appointment button. Stacking buys back roughly what
 * the icon and its gutter used to take on each line, and the pill's padding
 * spends it again, so the row comes out about where it was — checked at 1920,
 * 1600, 1440, 1280 and 1024. The labels do not wrap: two-line entries would
 * make the pills different heights and the icons ragged. If an eighth item is
 * ever added, this is the sum to redo.
 * ------------------------------------------------------------------------ */

@media (min-width: 992px) {
  .header-default .main-menu > ul {
    display: flex;
    align-items: stretch;
  }

  /* Stacking the labels and shrinking the two buttons at the end of the row
     left the bar with width to spare, and it is spent here: the pills need
     clear air between them or a row of tinted rectangles reads as one strip.
     Vertical padding on the li rather than the link, so the bar keeps roughly
     the height the theme's 29.5px links gave it and the dropdown — which hangs
     off the li — clears the pill instead of touching it. */
  .header-default .main-menu > ul > li {
    display: flex;
    margin: 0 14px;
    padding: 8px 0;
  }

  .header-default .main-menu > ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 13px 8px;
    border-radius: 14px;
    line-height: 1.15;
    text-align: center;
    /* See the note about width above: a wrapped label would leave one pill
       taller than its neighbours and the icons out of line. */
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease,
      box-shadow 0.25s ease;
  }

  /* Full strength and full size: on its own line the icon is carrying the
     item, not annotating it. The colour comes from the entry — see `color` in
     config/navigation.php — and falls back to the theme orange, so deleting
     those keys turns the row plain again. */
  .header-default .main-menu > ul > li > a .nav-icon {
    width: auto;
    margin-right: 0;
    font-size: 23px;
    opacity: 1;
    color: var(--nav-color, var(--theme-color, #f8721f));
    transition: color 0.25s ease;
  }

  /* The heading face rather than the body one. The icons set a rounded,
     friendly tone and Onest at 700 answers it a little flatly; Fredoka is
     already loaded for every heading on the site. */
  .header-default .main-menu > ul > li > a .nav-label {
    font-family: var(--title-font, "Fredoka", sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* The theme hangs the dropdown caret off the link. In a stacked item that
     makes it a third row, under the label and centred on nothing — so it is
     moved onto the label, where it sits beside the word as before. */
  .header-default .main-menu > ul > li.menu-item-has-children > a::after {
    display: none;
  }

  .header-default
    .main-menu
    > ul
    > li.menu-item-has-children
    > a
    .nav-label::after {
    content: "\f107";
    display: inline-block;
    margin-left: 5px;
    font-family: var(--icon-font);
    font-weight: 900;
    font-size: 0.8em;
    transition: transform 0.3s ease-in-out;
  }

  .header-default
    .main-menu
    > ul
    > li.menu-item-has-children:hover
    > a
    .nav-label::after {
    transform: rotate(180deg);
  }

  /* Hover, on anything that is not already the page.
   *
   * The doubled-up selectors below are specificity, not repetition. Every menu
   * colour on this site is set through .hero-light .header-default
   * .sticky-wrapper:not(.sticky) ... — five classes deep, see "The header over
   * a light hero" above — and a plainer selector here would lose to it and
   * leave dark text on an orange pill. Each rule therefore states the light
   * hero case as well, at a specificity that beats it. */
  .hero-light
    .header-default
    .sticky-wrapper
    .main-menu
    > ul
    > li:not(.active)
    > a:hover,
  .hero-light
    .header-default
    .sticky-wrapper
    .main-menu
    > ul
    > li:not(.active)
    > a:focus-visible,
  .header-default .main-menu > ul > li:not(.active) > a:hover,
  .header-default .main-menu > ul > li:not(.active) > a:focus-visible {
    background-color: rgba(248, 114, 31, 0.12);
    color: var(--theme-color, #f8721f);
  }

  /* The icon keeps its own colour on hover; only the pill and the word move. */
  .header-default .main-menu > ul > li:not(.active) > a:hover .nav-icon {
    color: var(--nav-color, var(--theme-color, #f8721f));
  }

  /* The current page. One colour for all seven rather than each item's own:
     the pill says "you are here", and seven different heres would say it seven
     different ways. :hover is spelled out so the pill does not come apart when
     the pointer crosses it. */
  .hero-light .header-default .sticky-wrapper .main-menu > ul > li.active > a,
  .hero-light
    .header-default
    .sticky-wrapper
    .main-menu
    > ul
    > li.active
    > a:hover,
  .header-default .main-menu > ul > li.active > a,
  .header-default .main-menu > ul > li.active > a:hover {
    background-color: var(--theme-color, #f8721f);
    color: var(--white-color, #fff);
    box-shadow: 0 6px 18px rgba(248, 114, 31, 0.3);
  }

  .header-default .main-menu > ul > li.active > a .nav-icon {
    color: var(--white-color, #fff);
  }

  /* Stuck to the top of the screen the bar goes dark and the labels go white,
     so the hover tint has to come off the white rather than the orange — an
     orange wash on near-black barely shows. The pill is unchanged: orange on
     dark is the one state that needed no help. */
  .header-default
    .sticky-wrapper.sticky
    .main-menu
    > ul
    > li:not(.active)
    > a:hover,
  .header-default
    .sticky-wrapper.sticky
    .main-menu
    > ul
    > li:not(.active)
    > a:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white-color, #fff);
  }
}

/* Above 1900px the header container grows to 1792px — the theme's own rule —
   and the row is swimming. The gaps take the difference rather than the items,
   which are the size they should be at any width. */
@media (min-width: 1900px) {
  .header-default .main-menu > ul > li {
    margin: 0 24px;
  }
}

/* Below 1500px the bar starts to run out of room between the logo and the two
   buttons. The gaps go first, then the pills' padding and the icons; the
   labels do not shrink until last, because that is the change that shows.
 *
 * The step down at 1400 rather than 1300 is Bootstrap's, not a judgement: the
 * container drops from 1320px to 1140px there, which is the largest single
 * loss of width anywhere in the range. */
@media (min-width: 992px) and (max-width: 1499px) {
  .header-default .main-menu > ul > li {
    margin: 0 10px;
  }

  .header-default .main-menu > ul > li > a {
    gap: 6px;
    padding: 8px 10px 7px;
  }

  .header-default .main-menu > ul > li > a .nav-icon {
    font-size: 21px;
  }

  .header-default .main-menu > ul > li > a .nav-label {
    font-size: 13px;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .header-default .main-menu > ul > li {
    margin: 0 7px;
  }

  .header-default .main-menu > ul > li > a {
    gap: 5px;
    padding: 7px 8px 6px;
    border-radius: 12px;
  }

  .header-default .main-menu > ul > li > a .nav-icon {
    font-size: 19px;
  }

  .header-default .main-menu > ul > li > a .nav-label {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
 * The two header actions
 *
 * Book Appointment and Contact us, built like the menu items beside them: the
 * mark on its own line with the words under it, in a pill of the same radius.
 * They sit at one end of a row whose other end is six more of those, and two
 * different button languages in one bar is one too many.
 *
 * Book stays filled and keeps its glow — it is the thing the header exists
 * for. Contact us is outlined instead, so the pair reads as a first and a
 * second choice rather than as two equals shouting.
 *
 * Both are as tall as the taller of the two. Side by side, two nearly-equal
 * blocks read as a mistake rather than as a pair; Contact us carries three
 * lines to Book's two, so Book is the one that stretches.
 *
 * Contact us is also a menu item in everything but position — it is what the
 * bar's Contact Us entry used to be — so it takes the same current-page mark
 * as the pills do. Tinted rather than filled: two solid orange blocks side by
 * side would read as two primary actions.
 *
 * The whole column is d-xl-block, so none of this is reachable below 1200px —
 * scoped to 992px anyway, so it does not depend on that staying true.
 * ------------------------------------------------------------------------ */

@media (min-width: 992px) {
  .header-default .header-button {
    align-items: stretch;
    gap: 14px;
  }

  .header-default .header-book-btn,
  .header-default .header-contact-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Theme: 15px 30px and a 50px radius, which is a lozenge. 14px is the
       menu pills' radius. */
    padding: 9px 22px;
    border-radius: 14px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
  }

  .header-default .header-book-btn i,
  .header-default .header-contact-btn i {
    font-size: 21px;
  }

  .header-default .header-book-btn_text,
  .header-default .header-contact-btn_number {
    font-family: var(--title-font, "Fredoka", sans-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* Filled, so the icon and the words are both white and the theme's own
     hover sweep still runs underneath — see .th-btn:before in style.css. */
  .header-default .header-book-btn,
  .header-default .header-book-btn:hover,
  .header-default .header-book-btn:focus {
    color: var(--white-color, #fff);
  }

  /* Outlined, and quiet: the border is the only thing holding it together, so
     it is drawn from the ink of whatever the header is sitting on rather than
     from a fixed grey.

     A box rather than a link, because it holds two of them — the caption
     stretches to cover it and the number sits on top. See the pair below. */
  .header-default .header-contact-btn {
    position: relative;
    border: 1px solid rgba(2, 0, 15, 0.14);
    background-color: transparent;
    color: var(--title-color, #02000f);
    transition: background-color 0.25s ease, border-color 0.25s ease,
      color 0.25s ease;
  }

  /* The mark is the theme orange, which pairs it with the filled button beside
     it: the two are one set of actions, apart from the coloured menu. */
  .header-default .header-contact-btn i {
    color: var(--theme-color, #f8721f);
    transition: color 0.25s ease;
  }

  /* Both take the box's colour rather than the theme orange every anchor on
     the site starts with, so the hover and sticky rules below only have to be
     written once, against the box. */
  .header-default .header-contact-btn_caption,
  .header-default .header-contact-btn_number {
    color: inherit;
  }

  /* "Contact us" is the caption and the number is the answer, so the caption
     is small and stood back. Both are needed: the icon says a phone is
     involved and the words say whose. */
  .header-default .header-contact-btn_caption {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
  }

  /* The caption is the link to the contact page and this is how it reaches the
     rest of the pill: an invisible cover over the whole box. Everything the
     number does not occupy leads to the page, so the target is the button the
     eye sees rather than the eleven characters of a label. */
  .header-default .header-contact-btn_caption::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* And the number sits over that cover, which is what gives it its own
     destination — and, incidentally, leaves it selectable, so the number can
     be copied off a machine that cannot dial it. */
  .header-default .header-contact-btn_number {
    position: relative;
    z-index: 2;
  }

  /* Two targets in one box need telling apart, and the underline is the whole
     of that signal: it appears under the digits alone, on the digits alone. */
  .header-default .header-contact-btn_number:hover,
  .header-default .header-contact-btn_number:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .header-default .header-contact-btn:hover,
  .header-default .header-contact-btn:focus-within {
    background-color: rgba(248, 114, 31, 0.12);
    border-color: rgba(248, 114, 31, 0.45);
    color: var(--theme-color, #f8721f);
  }

  /* On the contact page. The pills fill solid for this; a second solid orange
     block hard against the Book button would read as two things to press, so
     this holds the hover tint and firms up the border instead. */
  .header-default .header-contact-btn.active,
  .header-default .header-contact-btn.active:hover {
    background-color: rgba(248, 114, 31, 0.14);
    border-color: var(--theme-color, #f8721f);
    color: var(--theme-color, #f8721f);
  }

  /* Stuck to the top of the screen the bar goes near-black. The border and the
     caption come off the white there — ink on ink is invisible — while the
     filled button, which brings its own background, needs nothing. */
  .header-default .sticky-wrapper.sticky .header-contact-btn {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--white-color, #fff);
  }

  .header-default .sticky-wrapper.sticky .header-contact-btn:hover,
  .header-default .sticky-wrapper.sticky .header-contact-btn:focus-within {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--white-color, #fff);
  }

  /* The orange tint reads on the dark bar where an orange wash would not, so
     the mark here is the border alone doing what the pill's fill does. */
  .header-default .sticky-wrapper.sticky .header-contact-btn.active,
  .header-default .sticky-wrapper.sticky .header-contact-btn.active:hover {
    background-color: rgba(248, 114, 31, 0.2);
    border-color: var(--theme-color, #f8721f);
    color: var(--white-color, #fff);
  }
}

/* The same order of surrender as the menu: the gap between the two, then their
   padding, then the type. */
@media (min-width: 992px) and (max-width: 1499px) {
  .header-default .header-button {
    gap: 10px;
  }

  .header-default .header-book-btn,
  .header-default .header-contact-btn {
    padding: 8px 16px;
  }

  .header-default .header-book-btn i,
  .header-default .header-contact-btn i {
    font-size: 19px;
  }

  .header-default .header-book-btn_text,
  .header-default .header-contact-btn_number {
    font-size: 14px;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .header-default .header-button {
    gap: 8px;
  }

  .header-default .header-book-btn,
  .header-default .header-contact-btn {
    padding: 7px 12px;
    border-radius: 12px;
  }

  .header-default .header-book-btn i,
  .header-default .header-contact-btn i {
    font-size: 17px;
  }

  .header-default .header-book-btn_text,
  .header-default .header-contact-btn_number {
    font-size: 13px;
  }

  .header-default .header-contact-btn_caption {
    font-size: 10px;
  }
}