:root {
  --ink:#293c33;
  --sage:#709785;
  --coral:#efa397;
  --cream:#faf7f1;
  --taupe:#d8cbb7;
  --line:#d8dfd6
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:17px/1.65 ui-rounded,"Trebuchet MS",Arial,sans-serif
}
a {
  color:inherit;
  text-underline-offset:5px
}
a:hover {
  color:#324f40
}
a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid #8a443c;
  outline-offset:5px
}
.skip {
  position:absolute;
  top:-100px;
  background:white;
  padding:1rem;
  z-index:5
}
.skip:focus {
  top:0
}
.test-banner {
  padding:6px 16px;
  text-align:center;
  background:var(--ink);
  color:white;
  font-size:12px;
  letter-spacing:.07em
}
header,main,footer {
  max-width:1280px;
  margin:auto
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 40px;
  border-bottom:1px solid var(--line);
  gap:24px
}
.brand {
  display:block;
  width:185px;
  flex-shrink:0
}
.brand img {
  display:block;
  width:100%;
  height:105px;
  object-fit:contain;
  background:white;
  border-radius:18px
}
nav {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:14px;
  font-weight:bold
}
nav a {
  text-decoration:none
}
main {
  padding:0 40px
}
section {
  margin:64px 0
}
.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:60px;
  align-items:center;
  margin:56px 0 80px
}
.eyebrow {
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.16em;
  font-weight:bold
}
h1,h2,h3 {
  line-height:1.12;
  letter-spacing:-.045em
}
h1 {
  font-size:clamp(43px,5.4vw,76px);
  margin:22px 0
}
h2 {
  font-size:clamp(29px,3vw,44px)
}
h3 {
  font-size:28px
}
em {
  font-style:normal;
  color:#916055
}
p {
  margin:16px 0
}
.lead {
  font-size:19px;
  line-height:1.75;
  max-width:760px
}
.button {
  display:inline-flex;
  gap:28px;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:white;
  border:0;
  border-radius:100px;
  padding:16px 25px;
  text-decoration:none;
  font:inherit;
  font-weight:bold;
  cursor:pointer
}
.button:hover {
  background:#425e4e;
  color:white
}
.button.small {
  padding:11px 22px
}
.caption,small {
  font-size:13px;
  letter-spacing:0;
  line-height:1.6
}
.hero-photo {
  position:relative
}
.hero-photo img {
  width:100%;
  height:490px;
  object-fit:cover;
  border-radius:44% 44% 35% 40%;
  border:12px solid #e0e8de
}
.photo-badge {
  position:absolute;
  right:-12px;
  bottom:20px;
  transform:rotate(-9deg);
  background:var(--coral);
  border-radius:40% 48% 43% 35%;
  padding:25px;
  color:var(--ink);
  font-size:24px;
  line-height:1.1;
  font-weight:bold;
  text-align:center
}
.intro {
  max-width:800px;
  text-align:center;
  margin:90px auto
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.cards article,.panel {
  background:#e5ebe1;
  border-radius:30px;
  padding:30px
}
.cards article:nth-child(2),.coral {
  background:#f6dfd6
}
.cards article:nth-child(3) {
  background:#e9e1d5
}
.cards h2 {
  font-size:30px
}
.number {
  font-size:12px;
  letter-spacing:.15em
}
.text-link {
  font-weight:bold
}
.page-heading {
  max-width:850px
}
.split,.area-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px
}
.area-grid article {
  padding:28px;
  border-top:2px solid var(--sage)
}
.notice {
  padding:16px 20px;
  border-left:4px solid #8a594f;
  background:#f3e5dc
}
.slots {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px
}
.slot {
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#e5ebe1;
  padding:20px;
  border-radius:22px;
  font-size:14px
}
.unavailable {
  background:#e8e8e5;
  color:#555
}
.day {
  margin:36px 0 52px
}
.staff-layout {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:40px
}
.staff-layout aside {
  padding-top:65px;
  display:flex;
  flex-direction:column;
  gap:16px
}
.login {
  max-width:580px;
  margin:60px auto
}
.login h1 {
  font-size:40px
}
label {
  display:block;
  font-weight:bold
}
input {
  width:100%;
  border:1px solid #657567;
  background:white;
  border-radius:10px;
  padding:13px;
  font:inherit
}
.errorlist {
  color:#8c2626
}
.inline {
  display:inline
}
.text-button {
  border:0;
  background:none;
  text-decoration:underline;
  font:inherit;
  color:inherit;
  cursor:pointer;
  padding:0
}
footer {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding:48px 40px;
  border-top:1px solid var(--line);
  font-size:14px
}
footer p {
  margin:8px 0
}
@media(max-width:850px) {
  header {
    flex-direction:column;
    padding:15px 24px;
    gap:15px
  }
  nav {
    flex-wrap:wrap;
    justify-content:center;
    gap:15px
  }
  main {
    padding:0 24px
  }
  .hero {
    grid-template-columns:1fr;
    gap:25px
  }
  .hero-photo img {
    height:380px
  }
  .cards {
    grid-template-columns:1fr
  }
  .slots {
    grid-template-columns:repeat(2,1fr)
  }
  .staff-layout {
    grid-template-columns:1fr
  }
  .staff-layout aside {
    padding-top:25px
  }
  .staff-layout section {
    margin-top:10px
  }
}
@media(max-width:550px) {
  .split,.area-grid {
    grid-template-columns:1fr
  }
  .slots {
    grid-template-columns:1fr
  }
  section {
    margin:40px 0
  }
  footer {
    flex-direction:column;
    padding:30px 24px
  }
  .hero-photo img {
    height:320px
  }
  .photo-badge {
    right:0
  }
  .button {
    gap:15px
  }
}
.area-photo {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:32px 32px 50px 25px
}

.customer-list,.customer-cards { display: grid; gap: 20px; }
.customer-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
.customer-cards h2 { font-size: 28px; }
.customer-cards .panel { min-width: 0; overflow-wrap: anywhere; }
.staff-layout > section { min-width: 0; }
.staff-layout h1 { font-size: clamp(36px,4vw,60px); }
.search-form { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.search-form label { width: 100%; }
.search-form input { flex: 1; min-width: 180px; }
.record-form { max-width: 650px; }
.record-form textarea,.record-form select { width: 100%; font: inherit; border: 1px solid #657567; border-radius: 10px; padding: 12px; }
.record-form a { margin-left: 20px; }
.comment { border-top: 1px solid #b1c1ae; padding-top: 12px; margin-top: 15px; }
dt { font-size: 13px; font-weight: bold; }
dd { margin: 0 0 12px; }
summary { cursor: pointer; font-weight: bold; }
.audit-details { white-space: pre-wrap; overflow-wrap: anywhere; }
.customer-list h2 { font-size: 28px; }
@media(max-width:850px) { .customer-cards { grid-template-columns:1fr; } }

.customer-list .panel,.staff-layout h1,.record-form { overflow-wrap: anywhere; }

input[type="checkbox"],input[type="radio"] { width:auto; padding:0; margin-right:8px; }
.staff-layout .panel { min-width:0; overflow-wrap:anywhere; }
.staff-layout code { overflow-wrap:anywhere; }