:root {
     color-scheme: light;
     font-family: Arial, Helvetica, sans-serif;
     color: #242424;
     background: #fff;
     --link: #164c91;
     --secondary: #494949;
     --border: #737373;
}
 * {
     box-sizing: border-box;
}
 body {
     max-width: 46rem;
     margin: 0 auto;
     padding: 2rem 1.5rem;
     font-size: 1.125rem;
     line-height: 1.65;
}
 [hidden] {
     display: none !important;
}
 h1, h2, h3 {
     color: #171717;
     line-height: 1.35;
     overflow-wrap: break-word;
}
 h1 {
     font-size: 2rem;
     margin: 0 0 .65rem;
}
 h2 {
     font-size: 1.5rem;
     margin: 0 0 1rem;
}
 h3 {
     font-size: 1.1875rem;
     margin: 0 0 .75rem;
}
 p {
     margin: 0 0 1.15rem;
}
 a {
     color: var(--link);
     text-decoration: underline;
     text-underline-offset: .18em;
     text-decoration-thickness: 1px;
     overflow-wrap: anywhere;
}
 a:visited {
     color: #593884;
}
 a:hover {
     color: #0d366b;
     text-decoration-thickness: 2px;
}
 :focus-visible {
     outline: 3px solid #164c91;
     outline-offset: 4px;
}
 header {
     border-bottom: 1px solid #c5c5c5;
     padding-bottom: 1rem;
     margin-bottom: 1.5rem;
}
 header > p {
     color: var(--secondary);
}
 nav {
     display: flex;
     flex-wrap: wrap;
     gap: .25rem .85rem;
}
 nav a {
     display: inline-flex;
     align-items: center;
     min-height: 3rem;
     padding: .5rem .35rem;
}
 main > section {
     margin-top: 2.75rem;
     padding-top: 1.75rem;
     border-top: 1px solid #c5c5c5;
}
 [id] {
     scroll-margin-top: 1.25rem;
}
 .contact-actions {
     display: flex;
     flex-wrap: wrap;
     gap: .75rem;
     margin: 1.4rem 0 1rem;
}
 .availability-line {
     font-size: 1rem;
     color: var(--secondary);
}
 .service-group {
     margin-top: 1.75rem;
}
 .services {
     padding-left: 1.5rem;
     margin: 0 0 1.5rem;
}
 .services li {
     margin-bottom: .7rem;
     padding-left: .15rem;
}
 details {
     margin: 1.25rem 0;
}
 summary {
     min-height: 3rem;
     padding: .6rem .3rem;
     cursor: pointer;
     color: var(--link);
     text-decoration: underline;
     text-underline-offset: .18em;
}
 summary:hover {
     background: #f3f5f7;
}
 details > p {
     margin-top: .75rem;
}
 .software-list {
     margin: 1rem 0;
}
 .software-list > div {
     margin-bottom: 1.1rem;
}
 .software-list dt {
     font-weight: 700;
}
 .software-list dd {
     margin: .2rem 0 0;
}
 .contact-details {
     margin: 0 0 1rem;
}
 .contact-details > div {
     display: grid;
     grid-template-columns: 7rem minmax(0, 1fr);
     align-items: baseline;
     gap: 0 1rem;
}
 .contact-details dt {
     font-weight: 700;
     padding-block: .6rem;
}
 .contact-details dd {
     margin: 0;
     min-width: 0;
     overflow-wrap: anywhere;
}
 .contact-details dd a {
     display: inline-block;
     padding-block: .6rem;
     min-height: 3rem;
}
 .appointment {
     border-top: 1px solid #c5c5c5;
     padding-top: 1.5rem;
     margin-top: 1.75rem;
}
 .note, .field-help, .privacy-note {
     color: var(--secondary);
     font-size: 1rem;
}
 .note {
     border-left: 3px solid var(--border);
     padding-left: 1rem;
}
 form {
     max-width: 100%;
}
 .field {
     margin: 1.4rem 0 0;
}
 label, legend {
     color: #242424;
     font-size: 1.125rem;
}
 .field > label, legend {
     font-weight: 700;
}
 .field > label {
     display: block;
     margin-bottom: .5rem;
}
 .field > label span {
     font-weight: 400;
     font-size: 1rem;
     color: var(--secondary);
}
 button, input, textarea, select {
     font: inherit;
}
 input, textarea, select {
     min-width: 0;
     max-width: 100%;
}
 input:not([type="radio"]), textarea, select {
     display: block;
     width: 100%;
     min-height: 3rem;
     padding: .6rem .75rem;
     border: 1px solid var(--border);
     border-radius: 3px;
     background: #fff;
     color: #242424;
     font-size: 1.125rem;
     line-height: 1.5;
}
 textarea {
     resize: vertical;
}
 fieldset {
     min-width: 0;
     border: 0;
     padding: 0;
     margin: 1.4rem 0 0;
}
 legend {
     padding: 0;
     margin-bottom: .35rem;
}
 .radio-row {
     display: flex;
     flex-wrap: wrap;
     gap: .5rem;
}
 .radio-row label {
     display: flex;
     align-items: center;
     gap: .6rem;
     min-height: 3rem;
     padding: .5rem .75rem;
     border: 1px solid var(--border);
     border-radius: 3px;
     cursor: pointer;
}
 .radio-row label:has(input:checked) {
     background: #edf3f9;
     border-color: var(--link);
}
 input[type="radio"] {
     width: 1.25rem;
     height: 1.25rem;
     flex-shrink: 0;
     margin: 0;
     accent-color: var(--link);
}
 .field-help {
     margin: .5rem 0 0;
}
 .button-row {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: .75rem;
}
 .button, .button:visited {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 3rem;
     padding: .65rem 1rem;
     font-size: 1.125rem;
     line-height: 1.5;
     color: #164c91;
     background: #fff;
     border: 1px solid #164c91;
     border-radius: 3px;
     text-decoration: none;
     cursor: pointer;
     text-align: center;
}
 .button:hover {
     background: #edf3f9;
     color: #0d366b;
}
 .button-primary, .button-primary:visited {
     color: white;
     background: #164c91;
}
 .button-primary:hover {
     color: white;
     background: #0d366b;
}
 .button:disabled {
     color: #494949;
     background: #ededed;
     border-color: #737373;
     cursor: not-allowed;
}
 .form-button {
     margin: 1.5rem 0 1rem;
}
 .request-review {
     margin-top: 1.5rem;
}
 .request-review pre {
     font: inherit;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     padding: 1rem;
     border: 1px solid var(--border);
}
 .form-errors {
     border: 2px solid #8e2525;
     padding: 1rem;
     margin-top: 1.25rem;
}
 .form-errors p {
     margin-bottom: .5rem;
}
 .form-errors ul {
     margin: 0;
     padding-left: 1.25rem;
}
 .form-errors a {
     display: inline-block;
     min-height: 3rem;
     padding-block: .5rem;
     color: #8e2525;
}
 .field-error {
     color: #8e2525;
     font-size: 1rem;
     margin: .5rem 0 0;
}
 [aria-invalid="true"] {
     border: 2px solid #8e2525 !important;
}
 footer {
     border-top: 1px solid #c5c5c5;
     margin-top: 2.75rem;
     padding-top: 1rem;
     color: var(--secondary);
     font-size: 1rem;
}
 footer a {
     display: inline-block;
     min-height: 3rem;
     padding-block: .6rem;
}
 .skip-link {
     position: absolute;
     left: 1rem;
     top: -100px;
     background: white;
     padding: .75rem;
}
 .skip-link:focus {
     top: .5rem;
}
 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     white-space: nowrap;
     border: 0;
}
 @media (max-width: 480px) {
     body {
         padding: 1.25rem 1rem;
    }
     h1 {
         font-size: 1.75rem;
    }
     nav {
         gap: .25rem .75rem;
    }
     .contact-actions > a {
         flex: 1 1 10rem;
    }
     .contact-actions > a:first-child {
         flex-basis: 100%;
    }
     .contact-details > div {
         grid-template-columns: minmax(0, 1fr);
         gap: 0;
         margin-bottom: .5rem;
    }
     .contact-details dt {
         padding-bottom: 0;
    }
     .button-row {
         align-items: stretch;
         flex-direction: column;
    }
}
 @media (forced-colors: active) {
     .button, input, select, textarea, .radio-row label, .form-errors {
         border-color: ButtonText;
    }
     :focus-visible {
         outline-color: Highlight;
    }
}
 .schedule-row {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1rem;
}
 .schedule-fields legend span {
     font-weight: 400;
     font-size: 1rem;
     color: var(--secondary);
}
 @media (max-width: 480px) {
     .schedule-row {
         grid-template-columns: minmax(0, 1fr);
         gap: 0;
    }
}
 .portrait {
     width: 10rem;
     height: 10rem;
     border: 1px solid var(--border);
     background: #f3f5f7;
     display: grid;
     place-items: center;
     margin: 0 0 1.25rem;
}
 .portrait img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .portrait span {
     color: var(--secondary);
     font-size: 1rem;
}
 .honeypot {
     position: absolute;
     left: -10000px;
     width: 1px;
     height: 1px;
     overflow: hidden;
}
 .admin-page {
     max-width: 65rem;
}
 .admin-section {
     margin-block: 2rem;
     border-top: 1px solid #c5c5c5;
     padding-top: 1.5rem;
}
 .calendar-controls {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: .75rem;
     margin-bottom: 1rem;
}
 .calendar-controls h3 {
     margin: 0;
}
 .calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, minmax(0, 1fr));
     gap: .25rem;
}
 .calendar-grid .weekday {
     text-align: center;
     font-size: 1rem;
}
 .calendar-day {
     min-height: 4.5rem;
     padding: .35rem;
     background: white;
     color: var(--link);
     border: 1px solid var(--border);
     cursor: pointer;
}
 .calendar-day span {
     display: block;
     font-size: .875rem;
}
 .calendar-day[aria-pressed="true"] {
     border: 3px solid var(--link);
     background: #edf3f9;
}
 .appointment-item {
     padding: 1rem 0;
     border-bottom: 1px solid #c5c5c5;
}
 .appointment-item p {
     margin-bottom: .5rem;
     overflow-wrap: anywhere;
}
 .admin-editor {
     margin-top: 1.5rem;
     padding: 1rem;
     border: 1px solid var(--border);
}
 .admin-editor pre {
     white-space: pre-wrap;
     font: inherit;
     overflow-wrap: anywhere;
}
 @media (max-width: 480px) {
     .calendar-grid {
         gap: .1rem;
    }
     .calendar-day {
         padding: .2rem;
         min-height: 3.5rem;
    }
}
 .about-intro {
     display: flex;
     align-items: flex-start;
     gap: 1.5rem;
}
 .about-intro .portrait {
     flex-shrink: 0;
     margin: 0;
}
 .about-text {
     flex: 1;
     min-width: 0;
}
 @media (max-width: 600px) {
     .about-intro {
         flex-direction: column;
         gap: 1rem;
    }
}

/* Live sign, booking receipt and calendar. */
.availability-sign { padding: 1.25rem; margin: 1.5rem 0 1rem; border: 2px solid #737373; background: #f3f5f7; }
.availability-sign > strong { display: block; font-size: 1.4rem; line-height: 1.3; }
.availability-sign p { margin: .6rem 0 0; }
.availability-sign .button { margin-top: 1rem; }
.availability-sign.is-open { background: #e8f5ec; border-color: #24643a; }
.availability-sign.is-open > strong { font-size: 1.8rem; color: #174e2b; }
.availability-sign.is-open .button { background: #24643a; border-color: #24643a; color: white; }
#success-dialog { max-width: 30rem; width: calc(100% - 2rem); padding: 2rem; border: 1px solid #737373; border-radius: 6px; color: #242424; text-align: center; }
#success-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.success-check { display: block; color: #24643a; font-size: 3rem; line-height: 1.2; margin-bottom: 1rem; }
#success-reference { overflow-wrap: anywhere; font-size: 1rem; }
.public-calendar { margin-top: 1rem; }
.public-calendar .calendar-day { min-height: 3rem; }
.calendar-day:disabled { color: #737373; background: #eee; cursor: not-allowed; }
.calendar-day[aria-current="date"] { text-decoration: underline; text-underline-offset: .2em; }
.admin-danger { margin-top: 1.5rem; border-top: 1px solid #ccc; padding-top: .75rem; }
.button-danger { color: #8e2525; border-color: #8e2525; }
@media (max-width: 600px) {
  .about-intro {
    flex-direction: column;
    gap: 1.25rem;
  }

  .about-intro .portrait {
    display: block;
    height: auto;
    margin: 0;
  }

  .about-intro .portrait img {
    height: auto;
  }

  .about-intro .portrait img:not([hidden]) {
    display: block;
  }

  .about-text {
    flex: none;
    width: 100%;
  }
}