/* Louisard Lapierre booking: all styles. Tokens are the custom properties in :root. */
:root {
  --ink: #12110f;
  --navy: #0b1b33;
  --navy2: #132846;
  --coal: #1a1815;
  --panel: #24211c;
  --gold: #c9a557;
  --gold2: #e5cf98;
  --cream: #f7f2e7;
  --paper: #fffdf7;
  /* Contrast ratios against the light grounds (#f7f2e7 cream, #fffdf7 paper,
     #e7dcc6 / #efe3cb sand). WCAG AA needs 4.5:1 for normal text.
     --gold (#c9a557) is 1.7-2.3:1 there, so it is for decoration and dark
     grounds only; gold-coloured text on light grounds uses --gold-text. */
  --gold-text: #7a5c1e; /* 5.6 cream, 6.1 paper, 4.6 sand */
  --muted: #665e53; /* 5.7 cream, 6.3 paper, 4.7 sand (was #8b8275, 3.4) */
  --muted-strong: #655d52; /* was #786f63, 4.4 on cream */
  --line: #ddd2be;
  --green: #5e8870;
  --red: #a45f58;
  --shadow: 0 16px 50px rgba(12, 10, 7, 0.12);
  --radius: 24px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
.app {
  min-height: 100dvh;
  /* No bottom padding: the room the mobile navigation needs is inside the
     footer (see .site-footer in the max-width: 759px block), so the navy
     footer is always the last thing on the page. */
}
.topbar {
  height: 68px;
  padding: env(safe-area-inset-top) 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cream);
  position: relative;
  z-index: 30;
  border-bottom: 1px solid rgba(90, 75, 55, 0.08);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: -2px;
}
.brandtext b {
  display: block;
  font-family: Georgia, serif;
  font-size: 17px;
}
.brandtext span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 2px;
}
.lang {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: white;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
}
main {
  max-width: 1180px;
  margin: auto;
}
.screen {
  display: none;
  position: relative;
}
.screen.active {
  display: block;
  animation: enter 0.32s ease;
}
@keyframes enter {
  from {
    opacity: 0.3;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero {
  position: relative;
  min-height: 590px;
  background: var(--ink);
  color: white;
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: saturate(0.88);
}
.hero:after {
  content: "";
  position: absolute;
  inset: 140px 0 auto;
  height: 200px;
  background: linear-gradient(transparent, var(--ink));
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 6px 22px 36px;
  margin-top: -42px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
/* On the dark hero and the navy staff header the original gold is the
   readable one. */
.hero .eyebrow,
.staff-top .eyebrow {
  color: var(--gold);
}
h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
}
h1 {
  font-size: 42px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 560px;
}
.hero p {
  color: #d8d0c3;
  line-height: 1.55;
  font-size: 15px;
  max-width: 530px;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn {
  border: 0;
  border-radius: 14px;
  min-height: 50px;
  padding: 0 18px;
  font-weight: 800;
  background: var(--gold);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn.secondary {
  background: transparent;
  color: var(--gold2);
  border: 1px solid #6a5b3b;
}
.btn.full {
  width: 100%;
}
.btn.dark {
  background: var(--ink);
  color: white;
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn.small {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
}
.trust {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.chip {
  border: 1px solid #625535;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  color: var(--gold2);
  font-weight: 800;
}
.section {
  padding: 40px 20px;
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 22px;
}
.section h2 {
  font-size: 30px;
  line-height: 1.05;
}
.section .lead {
  color: #6f675c;
  line-height: 1.55;
}
.cards {
  display: grid;
  gap: 14px;
}
.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 7px 25px rgba(27, 21, 13, 0.045);
}
.service-card h3 {
  font-size: 22px;
}
.service-card p {
  color: #70685d;
  line-height: 1.5;
  font-size: 14px;
}
.service-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  font-size: 12px;
  font-weight: 800;
  color: #8a682e;
}
.arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f0e5cd;
  color: #8a682e;
  font-size: 20px;
}
.bio {
  background: #e7dcc6;
}
.bio-photo {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4/5;
  margin-bottom: 22px;
}
.bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.bio p {
  line-height: 1.62;
  color: #5d564d;
}
.quote {
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
  margin: 18px 0;
}
.review {
  background: var(--paper);
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--line);
}
.stars {
  color: #a97825;
  letter-spacing: 2px;
}
.review p {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
}
.review small {
  color: var(--muted);
  font-weight: 700;
}
.pagehead {
  padding: 34px 20px 20px;
}
.pagehead h1 {
  font-size: 36px;
  color: var(--ink);
  margin-top: 8px;
}
.pagehead p {
  color: #726a5f;
  line-height: 1.55;
}
.service-list {
  padding: 0 20px 34px;
}
.service-list .service-card {
  margin-bottom: 14px;
}
.notice {
  background: #f1e4c6;
  border: 1px solid #d9bd7d;
  border-radius: 16px;
  padding: 15px;
  color: #5e4a25;
  font-size: 13px;
  line-height: 1.45;
}
.booking {
  padding: 22px 18px 34px;
  max-width: 680px;
  margin: auto;
}
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 26px;
}
.stepdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0c6b5;
}
.stepdot.on {
  width: 26px;
  border-radius: 99px;
  background: var(--gold);
}
.book-title {
  font-size: 30px;
  margin-bottom: 8px;
}
.book-sub {
  color: var(--muted-strong);
  font-size: 14px;
  margin-bottom: 22px;
}
.choice {
  display: flex;
  width: 100%;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 17px;
  margin: 0 0 11px;
  align-items: center;
  gap: 14px;
}
.choice.selected {
  border: 2px solid var(--gold);
  background: #fff9eb;
}
.choice-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #efe3cb;
  display: grid;
  place-items: center;
  color: #8c6726;
  font-weight: 900;
}
.choice b {
  display: block;
  font-family: Georgia, serif;
  font-size: 18px;
}
.choice span {
  color: var(--muted-strong);
  font-size: 12px;
}
.choice .check {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: 1px solid #b9ad99;
  border-radius: 50%;
}
.choice.selected .check {
  background: var(--gold);
  border: 5px solid #fff;
  box-shadow: 0 0 0 1px var(--gold);
}
.sticky-action {
  position: sticky;
  /* Clears the bottom nav plus the raised Book circle, which sits about
     9px above the bar. */
  bottom: 88px;
  background: linear-gradient(transparent, var(--cream) 26%);
  padding: 28px 0 4px;
  z-index: 10;
}
.booking-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.booking-head .book-title {
  margin: 0;
}
.backbtn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  border-radius: 14px;
  font-size: 22px;
  font-weight: 900;
}
.calendar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 15px;
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.calendar-head button {
  width: 40px;
  height: 40px;
  border: 0;
  background: #edf1f6;
  color: var(--navy);
  border-radius: 12px;
  font-size: 20px;
}
.calendar-head b {
  font-family: Georgia, serif;
  font-size: 18px;
  color: var(--navy);
}
.weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.weekdays span {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding-bottom: 6px;
}
.calday {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.calday:not(:disabled):hover {
  background: #edf1f6;
}
.calday.active {
  background: var(--navy);
  color: white;
}
.calday:disabled {
  color: #c9c2b8;
  cursor: not-allowed;
}
.calday.blank {
  visibility: hidden;
}
.calendar-help {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 11px;
}
.times {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.time {
  border: 1px solid #aeb9c9;
  background: var(--paper);
  color: var(--navy);
  border-radius: 14px;
  min-height: 48px;
  font-weight: 800;
}
.time.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--gold);
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 14px;
  padding: 14px;
  outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #9f7836;
  box-shadow: 0 0 0 3px rgba(201, 165, 87, 0.18);
}
.field input.invalid,
.field select.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(164, 95, 88, 0.12);
}
.field textarea {
  min-height: 94px;
  resize: vertical;
}
.error {
  display: block;
  color: #8e3f39;
  font-size: 11px;
  font-weight: 700;
  margin-top: 6px;
}
.form-error {
  background: #f8e8e5;
  border: 1px solid #ddb0aa;
  color: #783832;
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.45;
}
.agree {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #5f584e;
}
.agree input {
  width: 20px;
  height: 20px;
  accent-color: #a77b2c;
}
.summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid #ece5da;
}
.summary-row:last-child {
  border: 0;
}
.summary-row span {
  color: var(--muted);
  font-size: 12px;
}
.summary-row b {
  text-align: right;
  font-size: 13px;
}
.success {
  text-align: center;
  padding: 45px 20px;
}
.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e3eee6;
  color: var(--green);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font-size: 34px;
}
.success h1 {
  font-size: 36px;
  color: var(--ink);
  margin: auto;
}
.success p {
  color: #6c6459;
  line-height: 1.6;
}
.manage-link {
  display: block;
  margin-top: 12px;
  color: #8b6628;
  font-weight: 800;
  text-decoration: none;
}
.bottomnav {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 0;
  right: 0;
  height: 74px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(20, 18, 15, 0.97);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.16);
}
.navbtn {
  border: 0;
  background: transparent;
  color: #918a80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  min-width: 0;
}
.navbtn svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.navbtn.active {
  color: var(--gold2);
}
.navbtn.booknav {
  transform: translateY(-13px);
}
.navbtn.booknav .navcircle {
  width: 52px;
  height: 52px;
  background: var(--gold);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  border: 4px solid var(--cream);
}
.navbtn.booknav span:last-child {
  color: var(--gold2);
}
.more-list {
  padding: 0 20px 40px;
}
.more-item {
  width: 100%;
  border: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 18px 4px;
  display: flex;
  justify-content: space-between;
  text-align: left;
  font-weight: 800;
}
.staff-demo {
  margin: 20px;
  background: var(--ink);
  color: white;
  padding: 22px;
  border-radius: 22px;
}
.staff-demo p {
  color: #cfc7ba;
  line-height: 1.5;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.metric {
  background: #2a2722;
  border: 1px solid #4a4338;
  border-radius: 16px;
  padding: 14px;
}
.metric span {
  display: block;
  color: #aaa094;
  font-size: 10px;
  text-transform: uppercase;
}
.metric b {
  display: block;
  font-size: 20px;
  margin-top: 6px;
}
.today {
  margin-top: 14px;
  background: #24211c;
  border-radius: 16px;
  padding: 14px;
}
.appointment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #3d3830;
}
.appointment:last-child {
  border: 0;
}
.appointment time {
  font-weight: 900;
  color: var(--gold2);
}
.appointment div {
  flex: 1;
}
.appointment small {
  display: block;
  color: #aaa094;
  margin-top: 3px;
}
.status {
  font-size: 10px;
  color: #9fceb0;
}
.info-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 14px;
}
.info-block h3 {
  font-size: 21px;
  margin-bottom: 8px;
}
.info-block p,
.info-block li {
  color: #675f54;
  line-height: 1.55;
  font-size: 14px;
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 7, 0.68);
  z-index: 80;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
}
.overlay.open {
  display: flex;
}
.sheet {
  background: var(--paper);
  border-radius: 24px 24px 18px 18px;
  width: min(100%, 520px);
  padding: 22px;
  box-shadow: var(--shadow);
  max-height: 88dvh;
  overflow: auto;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.sheet h2 {
  font-size: 27px;
}
.close {
  border: 0;
  background: #eee6d8;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 22px;
}
.sheet-option {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  border-radius: 14px;
  padding: 14px;
  margin-top: 9px;
  text-align: left;
  font-weight: 800;
}
.sheet-option.active {
  border-color: var(--gold);
  background: #fff7e6;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  max-width: calc(100% - 36px);
  font-size: 13px;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.desktop-only {
  display: none;
}
@media (min-width: 760px) {
  .app {
    padding-bottom: 0;
  }
  .topbar {
    padding-left: 34px;
    padding-right: 34px;
  }
  .brandtext b {
    font-size: 20px;
  }
  .bottomnav {
    position: sticky;
    top: 68px;
    bottom: auto;
    height: 56px;
    max-width: none;
    padding: 0;
    background: var(--ink);
  }
  .navbtn {
    flex-direction: row;
    font-size: 12px;
    gap: 8px;
  }
  .navbtn.booknav {
    transform: none;
  }
  .navbtn.booknav .navcircle {
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
  }
  .hero {
    min-height: 610px;
    border-radius: 0 0 34px 34px;
  }
  .hero img {
    position: absolute;
    right: 0;
    width: 52%;
    height: 100%;
    object-position: center;
  }
  .hero:after {
    inset: 0 35% 0 0;
    height: auto;
    background: linear-gradient(90deg, var(--ink) 55%, transparent);
  }
  .hero-copy {
    padding: 130px 6vw 80px;
    margin: 0;
    width: 58%;
  }
  h1 {
    font-size: 65px;
  }
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .bio {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 50px;
    align-items: center;
    padding: 70px 7vw;
  }
  .bio-photo {
    margin: 0;
  }
  .reviews-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pagehead,
  .service-list {
    max-width: 980px;
    margin: auto;
  }
  .pagehead {
    padding-top: 60px;
  }
  .booking {
    padding-top: 55px;
  }
  .sticky-action {
    bottom: 0;
  }
  .overlay {
    align-items: center;
  }
  .sheet {
    border-radius: 24px;
  }
  .desktop-only {
    display: block;
  }
}
@media (max-width: 380px) {
  h1 {
    font-size: 38px;
  }
  .hero-copy {
    padding-left: 18px;
    padding-right: 18px;
  }
  .brandtext b {
    font-size: 15px;
  }
  .brandtext span {
    font-size: 9px;
  }
  .section {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.more-list {
  display: grid;
  gap: 10px;
}
.more-item {
  border: 1px solid #243b5b;
  background: var(--navy);
  color: white;
  border-radius: 16px;
  padding: 18px 16px;
}
.more-item span {
  color: var(--gold2);
}
.sheet-option {
  background: var(--navy);
  border-color: #243b5b;
  color: white;
}
.sheet-option.active {
  background: var(--navy2);
  border: 2px solid var(--gold);
  color: var(--gold2);
}
.bio-photo {
  border-radius: 0;
  width: 100%;
  margin-bottom: 22px;
}
.bio > div:last-child {
  padding: 0 20px 42px;
  min-width: 0;
}
.bio h1,
.bio h2,
.bio p,
.bio .quote {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.staff-calday {
  border: 0;
}
.staff-calday.selected {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
.slot-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 13px;
}
.slot-toggle {
  border: 1px solid #aeb9c9;
  background: white;
  color: var(--navy);
  border-radius: 14px;
  padding: 12px 8px;
  font-size: 11px;
  font-weight: 900;
}
.slot-toggle small {
  display: block;
  margin-top: 4px;
  color: #4c785d;
}
.slot-toggle.blocked {
  background: #e8ebef;
  color: #6e7884;
  border-color: #d0d6dd;
  text-decoration: none;
}
.slot-toggle.blocked small {
  color: #934a45;
}
.availability-key {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: #667484;
  font-size: 10px;
}
.availability-key span:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5e8870;
  margin-right: 5px;
}
.availability-key span:last-child:before {
  background: #a45f58;
}
.bio .btn.dark,
#about .btn.dark {
  background: var(--navy);
  color: white;
}
.calday:disabled {
  background: #eceff2;
  color: #a1a8b0;
}
.calday.active {
  background: var(--navy);
  color: white;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.time:disabled {
  background: #e5e8ec;
  color: #8b939c;
  border-color: #d4d8dd;
  cursor: not-allowed;
}
.time-picker {
  width: 100%;
  border: 1px solid #aeb9c9;
  background: white;
  color: var(--navy);
  border-radius: 14px;
  padding: 14px;
  font-weight: 800;
}
.policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.policy-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: #73551d;
  text-decoration: underline;
  font-weight: 800;
  font-size: 12px;
}
.page-close {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  border-radius: 50%;
  font-size: 23px;
  z-index: 55;
}
.screen > .pagehead {
  position: relative;
}
.staff-settings-btn {
  width: 43px;
  height: 43px;
  border: 1px solid #365170;
  background: #203654;
  color: var(--gold2);
  border-radius: 14px;
  font-size: 20px;
}
.range-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.range-row input,
.settings-field input,
.settings-field select {
  width: 100%;
  border: 1px solid #cad3de;
  border-radius: 12px;
  padding: 11px;
  background: white;
}
.batch-bar {
  position: sticky;
  bottom: 82px;
  background: white;
  border: 1px solid #d9e0e8;
  border-radius: 16px;
  padding: 12px;
  margin-top: 12px;
  box-shadow: var(--shadow);
}
.slot-toggle.selected {
  background: var(--navy);
  color: white;
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.slot-toggle.selected small {
  color: var(--gold2);
}
.settings-field {
  margin: 14px 0;
}
.settings-field label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 6px;
}
#staff > .page-close {
  left: auto;
  right: 18px;
  top: 18px;
  background: #203654;
  color: white;
  border-color: #365170;
}
.staff-calday:disabled {
  opacity: 0.5;
}
.staff-shell {
  background: #eef1f5;
  min-height: calc(100dvh - 142px);
  padding-bottom: 34px;
}
.staff-top {
  background: var(--navy);
  color: white;
  padding: 28px 20px 18px;
}
.staff-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.staff-top h1 {
  font-size: 31px;
}
.staff-top p {
  color: #b8c2d0;
  font-size: 13px;
  margin: 7px 0 0;
}
.role-pill {
  background: #203654;
  color: var(--gold2);
  border: 1px solid #365170;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.staff-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  background: var(--navy);
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 20;
}
.staff-tab {
  flex: 0 0 auto;
  border: 1px solid #365170;
  background: transparent;
  color: #c5cfda;
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 11px;
  font-weight: 800;
}
.staff-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.staff-content {
  padding: 18px;
  max-width: 980px;
  margin: auto;
}
.staff-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 15px;
}
.staff-section-head h2 {
  font-size: 27px;
  color: var(--navy);
}
.staff-section-head p {
  margin: 5px 0 0;
  color: #677486;
  font-size: 12px;
}
.staff-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.staff-metric {
  background: white;
  border: 1px solid #d9e0e8;
  border-radius: 17px;
  padding: 15px;
}
.staff-metric span {
  display: block;
  color: #687789;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.staff-metric b {
  display: block;
  color: var(--navy);
  font-size: 21px;
  margin-top: 5px;
}
.staff-card {
  background: white;
  border: 1px solid #d9e0e8;
  border-radius: 19px;
  padding: 17px;
  margin-top: 12px;
}
.staff-card h3 {
  font-size: 20px;
  color: var(--navy);
}
.staff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #e7ebf0;
}
.staff-row:last-child {
  border: 0;
}
.staff-row-main {
  flex: 1;
  min-width: 0;
}
.staff-row-main b {
  display: block;
  color: var(--navy);
  font-size: 13px;
}
.staff-row-main small {
  display: block;
  color: #6c7989;
  margin-top: 4px;
  line-height: 1.35;
}
.staff-time {
  width: 52px;
  color: #81601f;
  font-weight: 900;
  font-size: 12px;
}
.staff-badge {
  border-radius: 999px;
  padding: 5px 8px;
  background: #e6f1ea;
  color: #346447;
  font-size: 9px;
  font-weight: 900;
}
.staff-badge.pending {
  background: #fff0d1;
  color: #805d16;
}
.staff-badge.cancelled {
  background: #f7e2df;
  color: #8c463f;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.quick {
  border: 0;
  background: var(--navy);
  color: white;
  border-radius: 16px;
  padding: 15px;
  text-align: left;
  font-weight: 800;
  min-height: 76px;
}
.quick span {
  display: block;
  color: var(--gold2);
  font-size: 20px;
  margin-bottom: 8px;
}
.searchbox {
  width: 100%;
  border: 1px solid #cad3de;
  border-radius: 14px;
  padding: 13px 14px;
  background: white;
  margin-bottom: 10px;
}
.staff-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.staff-calday {
  background: #f6f8fa;
  border-radius: 10px;
  text-align: center;
  padding: 10px 3px;
  font-size: 11px;
  color: #536174;
}
.staff-calday.busy {
  background: var(--navy);
  color: white;
}
.staff-calday b {
  display: block;
  font-size: 14px;
}
.permission-banner {
  background: var(--navy);
  color: white;
  border-radius: 19px;
  padding: 18px;
  margin-bottom: 12px;
}
.permission-banner p {
  color: #bec8d4;
  font-size: 12px;
  line-height: 1.45;
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #e5e9ee;
}
.toggle-row:last-child {
  border: 0;
}
.toggle-copy {
  flex: 1;
}
.toggle-copy b {
  display: block;
  color: var(--navy);
  font-size: 13px;
}
.toggle-copy small {
  color: #6b7888;
  display: block;
  margin-top: 3px;
}
.switch {
  width: 48px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #c9d0d8;
  padding: 3px;
  transition: 0.2s;
}
.switch:after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
}
.switch.on {
  background: var(--navy);
}
.switch.on:after {
  transform: translateX(20px);
}
.full-access {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--navy);
  border-radius: 14px;
  font-weight: 900;
}
.staff-note {
  color: #6d7987;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 12px;
}
.staff-empty {
  text-align: center;
  padding: 35px 15px;
  color: #697788;
}
.owner-lock {
  color: #8a651f;
  font-size: 10px;
  font-weight: 800;
}
.danger-link {
  border: 0;
  background: transparent;
  color: #974b46;
  font-weight: 800;
  font-size: 11px;
}
@media (min-width: 760px) {
  .staff-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
  .quick-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .staff-tabs {
    top: 124px;
    justify-content: center;
  }
  .staff-content {
    padding: 28px;
  }
  .staff-shell {
    min-height: calc(100dvh - 124px);
  }
  .bio-photo {
    border-radius: 22px;
    margin: 0;
  }
  .bio > div:last-child {
    padding: 0;
  }
  .hero img {
    width: 46%;
  }
  .hero:after {
    inset: 0 40% 0 0;
    background: linear-gradient(
      90deg,
      var(--ink) 72%,
      rgba(18, 17, 15, 0.82) 86%,
      transparent
    );
  }
  .hero-copy {
    width: 52%;
    padding-right: 2vw;
  }
  .hero-copy h1,
  .hero-copy p {
    max-width: 540px;
  }
}
@media (min-width: 760px) {
  .topbar {
    position: sticky;
    top: 0;
    backdrop-filter: blur(18px);
    background: rgba(247, 242, 231, 0.94);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .screen.active {
    animation: none;
  }
  .toast {
    transition: none;
  }
}
.staff-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  margin-bottom: 16px;
  border: 1px solid #cad3de;
  border-radius: 12px;
  background: white;
  color: var(--navy);
  font-weight: 800;
}
.staff-top {
  padding-top: 62px;
}
@media (max-width: 759px) {
  .hero-copy {
    margin-top: 0;
    padding-top: 26px;
    background: var(--ink);
  }
  .hero:after {
    display: none;
  }
}
.native-switch {
  appearance: none;
  width: 48px;
  height: 28px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: #c9d0d8;
  position: relative;
  border: 0;
  cursor: pointer;
}
.native-switch:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
}
.native-switch:checked {
  background: var(--navy);
}
.native-switch:checked:before {
  transform: translateX(20px);
}
.appointment-button {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.summary-row b {
  overflow-wrap: anywhere;
  max-width: 70%;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* Keyboard focus. Deep gold on light grounds (5.6:1), the original gold on
   the dark ones, so the ring always clears the 3:1 a focus indicator needs. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-text);
  outline-offset: 3px;
}
.hero :focus-visible,
.staff-top :focus-visible,
.staff-tabs :focus-visible,
.bottomnav :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold);
}
.sheet label {
  display: block;
}
.staff-time {
  flex-shrink: 0;
}
.hero-copy {
  overflow-wrap: break-word;
}
/* Conversation-led hero: square edges and a separate solid text panel. */
.hero {
  min-height: 0;
  border-radius: 0;
  display: block;
}
.hero img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
  filter: none;
  border-radius: 0;
}
.hero:after {
  display: none;
}
.hero-copy {
  width: 100%;
  margin: 0;
  padding: 28px 22px 36px;
  background: var(--ink);
}
.hero-copy h1,
.hero-copy p {
  max-width: 760px;
}
.outdoor-photo {
  aspect-ratio: 941/1672;
}
.outdoor-photo img {
  object-fit: contain;
  object-position: center;
}
.portrait-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  align-items: start;
}
.portrait-gallery img {
  height: auto;
  object-fit: contain;
  border-radius: 0;
}
@media (min-width: 760px) {
  .hero img {
    height: auto;
    max-height: 560px;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .hero-copy {
    padding: 40px 6vw 48px;
  }
  .hero-copy h1 {
    font-size: 58px;
  }
  .outdoor-photo {
    max-width: 340px;
    justify-self: center;
  }
}
.home-conversation {
  margin: 0;
  background: var(--ink);
}
.home-conversation img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Reading widths retain breathing room on larger screens. */
.app {
  display: flex;
  flex-direction: column;
}
.app > main {
  width: 100%;
  flex: 1;
}
.site-footer {
  background: var(--navy);
  color: #d6deea;
  padding: 32px 22px;
  margin-top: 36px;
}
.footer-inner {
  max-width: 980px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand b {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--gold2);
}
.footer-brand p {
  font-size: 12px;
  margin: 7px 0 0;
  color: #b8c2d0;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  max-width: 450px;
  align-items: center;
}
.footer-links button {
  background: transparent;
  border: 0;
  color: #e5cf98;
  padding: 10px 0;
  font-size: 13px;
  text-align: left;
  min-height: 44px;
}
.footer-copyright {
  max-width: 980px;
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid #365170;
  font-size: 11px;
  color: #b8c2d0;
}
@media (min-width: 760px) {
  #more {
    max-width: 620px;
    margin-inline: auto;
  }
  #reviews {
    max-width: 900px;
    margin-inline: auto;
  }
  #reviews .reviews-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 280px), 360px)
    );
    justify-content: start;
  }
  .reviews-grid .review {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #homeReviews {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 280px), 340px)
    );
  }
  #policies,
  #contact,
  #manage {
    max-width: 720px;
    margin-inline: auto;
  }
  .site-footer {
    padding: 40px 34px;
  }
  .app > main {
    min-height: 55vh;
  }
}
@media (max-width: 759px) {
  /* Slides with a decelerating curve, the way native iOS bars move.
     Visibility flips only after the slide out finishes (and at once on the
     way in), so the bar is never cut off mid-animation. */
  .bottomnav {
    height: calc(74px + env(safe-area-inset-bottom));
    will-change: transform;
    transition:
      transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 0s;
  }
  .bottomnav.nav-hidden {
    transform: translateY(calc(100% + 20px));
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 0.34s;
  }
  /* The space the fixed bottom navigation covers belongs inside the navy
     footer, not after it, so navy is the last colour on the page. */
  .site-footer {
    padding-bottom: calc(32px + 90px + env(safe-area-inset-bottom));
    margin-top: 24px;
  }
  .footer-inner {
    display: block;
  }
  .footer-links {
    margin-top: 20px;
  }
  /* The booking button slides down with the bar instead of jumping:
     same distance, same curve, transform only (no layout change). */
  .sticky-action {
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .nav-is-hidden .sticky-action {
    transform: translateY(76px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bottomnav,
  .bottomnav.nav-hidden,
  .sticky-action {
    transition: none;
  }
}


/* ------------------------------------------------------------------------
   Launch polish (October 2026). Same tokens, refined details.
   ------------------------------------------------------------------------ */

[hidden] {
  display: none !important;
}

/* Service cards: one honest line each, and the whole card is the button.
   The arrow's hit area is stretched over the card, so the markup keeps a
   single, properly named control. */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.service-desc {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.service-card .service-meta {
  margin-top: auto;
  padding-top: 18px;
  color: var(--gold-text);
}
.service-card .arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
}
.service-card:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(27, 21, 13, 0.08);
}
.service-card:has(.arrow:focus-visible) {
  outline: 3px solid var(--gold-text);
  outline-offset: 3px;
}
.service-card .arrow:focus-visible {
  outline: none;
}
@media (prefers-reduced-motion: no-preference) {
  .service-card:hover {
    transform: translateY(-2px);
  }
}
@media (min-width: 760px) {
  #homeServices,
  #serviceList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1180px) {
  #homeServices {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* How it works: a real sequence, so it is numbered. */
.how {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: step;
}
.steps-list li {
  counter-increment: step;
  position: relative;
  padding: 18px 18px 18px 66px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.steps-list li::before {
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 17px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--gold2);
  font: 700 15px Georgia, serif;
}
.steps-list h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.steps-list p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
@media (min-width: 760px) {
  .steps-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Form hints sit quietly under their field. */
.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* About: the heading scales with the screen instead of a fixed 44px that
   ran five lines on a phone, and the forced full-screen height (which left a
   gap before the footer) only applies where there is room for it. */
.about-title {
  color: var(--ink);
  font-size: clamp(32px, 8.5vw, 44px);
  line-height: 1.08;
  margin: 10px 0 18px;
}
@media (min-width: 760px) {
  .about-bio {
    min-height: calc(100dvh - 142px);
  }
}

.footer-staff {
  opacity: 0.75;
}

/* Staff: time off, erasure. */
.range-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.range-form .staff-note,
.range-form .actions {
  grid-column: 1 / -1;
}
.danger-action {
  margin-top: 14px;
  color: #8f4740;
  border-color: #c99a94;
}
.info-block strong {
  color: var(--ink);
}
/* A policy shown in the dialog already has the dialog's title. */
#sheetBody > .info-block > h3:first-child {
  display: none;
}

/* Bounce colours. When an iPhone page bounces past its top, the space
   revealed matches the cream header; past its end, the navy footer.
   The page itself is painted by .app; behind it, the document is cream and
   a fixed layer covers the lower half of the screen in navy. A bounce at
   the bottom uncovers the navy layer, a bounce at the top uncovers cream. */
html {
  background: var(--cream);
}
body {
  background: transparent;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  background: var(--navy);
  z-index: -1;
  pointer-events: none;
}
.app {
  background: var(--cream);
}

/* Hero: the label above the heading keeps clear space at any font size and
   on any browser's font metrics. */
.hero-copy .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.hero-copy h1 {
  line-height: 1.06;
}

/* The arrow is a drawn chevron, centred geometrically in its circle; a text
   glyph like "›" sits off-centre because of the font's own spacing. */
.arrow {
  padding: 0;
  line-height: 0;
}
.arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}