/* css resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/roboto-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/roboto-bold.ttf") format("truetype");
}

/** Global styles
*/
:root {

  --yellow-5: #faf3d1;
  --yellow-5: oklch(96.1% 0.045 97.6);
  --yellow-10: #f5e6af;
  --yellow-10: oklch(92.4% 0.073 94.6);
  --yellow-20: #e6c74c;
  --yellow-20: oklch(83.4% 0.143 94.8);
  --yellow-30: #c9ab48;
  --yellow-30: oklch(74.9% 0.122 92.3);
  --yellow-40: #a88f48;
  --yellow-40: oklch(65.8% 0.095 90.2);
  --yellow-50: #8a7237;
  --yellow-50: oklch(56.2% 0.083 87.4);
  --yellow-60: #6b5a39;
  --yellow-60: oklch(47.6% 0.053 83.3);
  --yellow-70: #504332;
  --yellow-70: oklch(39.1% 0.032 74.1);
  --yellow-80: #332d27;
  --yellow-80: oklch(30.2% 0.014 67.3);
  --yellow-90: #1a1614;
  --yellow-90: oklch(20.4% 0.008 48.3);
  --yellow-5v: #fff5c2;
  --yellow-5v: oklch(96.6% 0.066 98.2);
  --yellow-10v: #fee685;
  --yellow-10v: oklch(92.4% 0.12 95.8);
  --yellow-20v: #face00;
  --yellow-20v: oklch(86.4% 0.177 93.2);
  --yellow-30v: #ddaa01;
  --yellow-30v: oklch(76.4% 0.156 86.8);
  --yellow-40v: #b38c00;
  --yellow-40v: oklch(65.8% 0.135 88.8);
  --yellow-50v: #947100;
  --yellow-50v: oklch(56.8% 0.116 87);
  --yellow-60v: #776017;
  --yellow-60v: oklch(49.9% 0.092 90.3);
  --yellow-70v: #5c4809;
  --yellow-70v: oklch(41.2% 0.08 89.2);
  --yellow-80v: #422d19;
  --yellow-80v: oklch(31.7% 0.044 63.7);
  --yellow-90v: #1a1614;
  --yellow-90v: oklch(20.4% 0.008 48.3);

  --mnt-01: #010101;
  --mnt-01: oklch(6.7% 0 0);
  --mnt-02: #1301cd;
  --mnt-02: oklch(38.8% 0.262 266.3);
  --mnt-03: #06f600;
  --mnt-03: oklch(84.3% 0.287 142.4);
  --mnt-04: #f6c505;
  --mnt-04: oklch(84.3% 0.172 90.4);
  --mnt-05: #afb6c6;
  --mnt-05: oklch(77.6% 0.024 266.9);
  --mnt-06: #0073fd;
  --mnt-06: oklch(58.7% 0.223 258.6);
  --mnt-07: #36454F;
  --mnt-07: oklch(38.1% 0.026 237.5);
  --mnt-08: #002060;
  --mnt-08: oklch(27.2% 0.12 261.3);
  --mnt-09: #92A8D1;
  --mnt-09: oklch(72.9% 0.065 262.7);
  --mnt-10: #002060;
  --mnt-10: oklch(27.2% 0.12 261.3);
}


body {
  --bkr-body: var(--mnt-01);
  background-color: var(--bkr-body);
  font-family: "Roboto", sans-serif;
  color: var(--yellow-5v);
  min-height: 100dvh;
  padding: clamp(0.5rem, 2vw, 1.5rem);
}

.site-frame {
  --frame-border: var(--yellow-30v);
  --frame-text: var(--yellow-5v);
  --frame-muted: var(--yellow-20v);
  border: 1px solid var(--frame-border);
  border-radius: 0.5rem;
  display: grid;
  margin-inline: auto;
  max-inline-size: 75rem;
  min-block-size: calc(100dvh - clamp(1rem, 4vw, 3rem));
  overflow: clip;
}

.site-header {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: auto 1fr;
  padding: 0.75rem;
}

.site-mark {
  align-items: center;
  color: var(--frame-text);
  display: flex;
  flex-direction: row;
  gap: 0.85rem;
  text-decoration: none;
}

.site-mark__circle {
  --mark-ring-size: clamp(4.5rem, 7vw, 6rem);
  align-items: center;
  border: 1px solid var(--frame-border);
  border-radius: 50%;
  display: flex;
  flex: none;
  inline-size: var(--mark-ring-size);
  aspect-ratio: 1;
  justify-content: center;
  position: relative;
}

.site-mark__logo {
  background-color: var(--bkr-body);
  inline-size: calc(var(--mark-ring-size) * 1.15);
  inset: 50% auto auto 50%;
  /* reset.css caps img width at its containing block; override so the logo can exceed the ring */
  max-inline-size: none;
  object-fit: contain;
  padding: 0.35rem;
  position: absolute;
  transform: translate(-50%, -50%);
}

.site-mark__word {
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  max-inline-size: 16ch;
  text-transform: uppercase;
}

.site-nav {
  align-items: center;
  align-self: start;
  border: 1px solid var(--frame-border);
  display: flex;
  gap: clamp(1rem, 4vw, 3rem);
  justify-content: flex-end;
  min-block-size: 3rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.snd-cticons {
  align-items: center;
  block-size: 50px;
  border: 0px solid var(--frame-border);
  /* matches the "Services" link color, inherited from body */
  color: var(--yellow-5v);
  display: flex;
  flex: none;
  gap: 0.5rem;
  justify-content: center;
  /* precedes the nav links on large viewports; moved after them once links shift left */
  order: -1;
  inline-size: 100px;
}

.snd-cticons svg {
  block-size: 1.125rem;
  fill: currentColor;
  flex: none;
  inline-size: 1.125rem;
}

.snd-cticons a {
  align-items: center;
  display: flex;
}

.site-nav a,
.contact-card__info a,
.social-links a {
  color: inherit;
  text-decoration: none;
}

.site-nav a {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.rule {
  border-block-start: 1px solid var(--frame-border);
  min-block-size: 0.75rem;
}

.rule--primary {
  min-block-size: 1.25rem;
}

.site-main {
  display: grid;
  gap: clamp(2.25rem, 7vw, 4.5rem);
  inline-size: min(100% - 2rem, 37.5rem);
  justify-self: center;
  padding-block: clamp(3rem, 10vw, 6.5rem);
}

.intro,
.services,
.services-page,
.location-page,
.contact {
  display: grid;
  gap: 1rem;
}

.intro__eyebrow,
.section-heading p {
  color: var(--frame-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.intro h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.96;
  text-transform: uppercase;
}

.intro__copy {
  color: var(--yellow-10);
  font-size: clamp(1rem, 2vw, 1.125rem);
  max-inline-size: 32ch;
}

.section-heading {
  align-items: baseline;
  display: flex;
  gap: 1rem;
}

.section-heading h1,
.section-heading h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  text-transform: uppercase;
}

.services-scroll {
  border: 1px solid var(--frame-border);
  border-radius: 0.375rem;
  block-size: min(65dvh, 40rem);
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.services-scroll__status {
  color: var(--yellow-10);
  font-size: 0.875rem;
}

.services-group+.services-group {
  margin-block-start: 1.75rem;
}

.services-group .services-group {
  margin-block-start: 1.25rem;
}

.services-group__title {
  border-block-end: 1px solid var(--frame-border);
  font-size: 1rem;
  padding-block-end: 0.5rem;
  margin-block-end: 0.75rem;
  text-transform: uppercase;
}

.services-group .services-group .services-group__title {
  color: var(--yellow-10);
  font-size: 0.875rem;
}

.services-list {
  display: grid;
  gap: 0.5rem;
  list-style: none;
}

.services-list__item {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.services-list__name {
  color: var(--yellow-10);
}

.services-list__price {
  color: var(--frame-text);
  font-weight: 700;
  white-space: nowrap;
}

.location-page__map {
  border: 1px solid var(--frame-border);
  border-radius: 0.375rem;
  inline-size: 100%;
}

.services__list {
  border-block-start: 1px solid var(--frame-border);
  list-style: none;
}

.services__list li {
  border-block-end: 1px solid var(--frame-border);
  padding-block: 0.875rem;
}

.contact-card {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.contact-card__photo {
  grid-column: 1;
  grid-row: 1;
}

.contact-card__photo img {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--frame-border);
  border-radius: 0.375rem;
  inline-size: 100%;
  object-fit: cover;
}

.contact-card__info {
  display: grid;
  gap: 0.625rem;
  grid-column: 1;
  grid-row: 2;
}

.contact-card__info a,
.contact-card__info address {
  color: var(--yellow-10);
  font-size: 0.875rem;
  font-style: normal;
}

.contact-card__schedule {
  align-self: start;
  border-collapse: collapse;
  font-size: 0.8125rem;
  grid-column: 2;
  grid-row: 1 / 3;
  inline-size: 100%;
}

.contact-card__schedule caption {
  caption-side: top;
  font-weight: 700;
  padding-block-end: 0.5rem;
  text-align: start;
  text-transform: uppercase;
}

.contact-card__schedule th,
.contact-card__schedule td {
  border: 1px solid var(--frame-border);
  font-weight: 400;
  padding: 0.4rem 0.6rem;
  text-align: start;
}

.social-links svg {
  block-size: 1.125rem;
  fill: currentColor;
  flex: none;
  inline-size: 1.125rem;
}

.site-footer {
  align-items: center;
  align-self: end;
  border-block-start: 1px solid var(--frame-border);
  display: flex;
  font-size: 0.75rem;
  justify-content: space-between;
  min-block-size: 6.75rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  text-transform: uppercase;
}

.social-links {
  display: flex;
  gap: 1rem;
  list-style: none;
}

.site-nav a:hover,
.contact-card__info a:hover,
.social-links a:hover {
  color: var(--frame-muted);
}

.site-mark:focus-visible,
.site-nav a:focus-visible,
.contact-card__info a:focus-visible,
.social-links a:focus-visible {
  outline: 2px solid var(--frame-muted);
  outline-offset: 0.25rem;
}

@media (width < 36rem) {
  .site-header {
    gap: 0.75rem;
    grid-template-columns: 1fr;
  }

  .site-nav {
    grid-row: 2;
    justify-content: start;
  }

  .snd-cticons {
    order: 1;
  }

  .contact-card {
    grid-template-columns: 1fr;
  }

  .contact-card__photo,
  .contact-card__info,
  .contact-card__schedule {
    grid-column: 1;
  }

  .contact-card__info {
    grid-row: 2;
  }

  .contact-card__schedule {
    grid-row: 3;
  }

  .services-list__item {
    flex-wrap: wrap;
  }

  .site-main {
    inline-size: min(100% - 1.5rem, 37.5rem);
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}