/* ==========================================================================
   ATELIER Hair Studio: homepage (navbar + hero)
   Builds on css/main.css. Uses its tokens, type, container, hairlines,
   buttons and surfaces; nothing from the foundation is redefined here.
   ========================================================================== */


/* 1. Page-level variables and helpers
   ========================================================================== */
:root {
  --header-h: 4.5rem;
  --hero-title: clamp(3.75rem, 1.5rem + 8.6vw, 8.5rem);
}

@media (min-width: 60rem) {
  :root {
    --header-h: 5rem;
  }
}

html {
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

/* Locks page scroll while the mobile menu is open (set by js/main.js) */
html.nav-open {
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -5rem;
  left: var(--gutter);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-espresso);
  color: var(--color-ivory);
  font-size: var(--text-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-3);
}

.skip-link:focus-visible {
  outline: 2px solid var(--color-ivory);
  outline-offset: -6px;
}


/* 2. Navbar
   ========================================================================== */
.site-header {
  position: static;              /* without JS the header holds the whole nav list, so it must not stick */
  top: 0;
  z-index: 100;
  background-color: var(--color-bg);
  border-bottom: var(--border-hairline);
}

/* Sticky only when the nav collapses into the Menu button (JS on), or on desktop (single-row bar) */
.js .site-header {
  position: sticky;
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;               /* lets the nav sit below the bar when JS is off */
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: anywhere;               /* only matters at extreme text sizes on very narrow screens */
}

/* Menu button: reuses .btn.btn--text; only shown when JS can drive it */
.nav-toggle {
  display: none;
}

.js .nav-toggle {
  display: inline-flex;
}

/* Navigation: no-JS fallback is a simple stacked list under the bar */
.site-nav {
  flex-basis: 100%;
  padding-block: var(--space-4) var(--space-5);
}

.site-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  border-bottom: var(--border-hairline);
}

.site-nav__item:first-child {
  border-top: var(--border-hairline);
}

.site-nav__link {
  display: block;
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  text-decoration: none;
}

.site-nav__cta {
  width: 100%;
  margin-top: var(--space-6);
}

.site-nav__note {
  margin: var(--space-6) 0 0;
}

/* Mobile and tablet menu: full-screen espresso panel (class .surface-dark is added by JS) */
.js .site-nav {
  position: fixed;
  top: calc(var(--header-h) + 1px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  padding: var(--space-6) var(--gutter) var(--space-7);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.js .site-nav.is-open {
  display: flex;
  animation: nav-in var(--duration) var(--ease);
}

@keyframes nav-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.js .site-nav__note {
  margin-top: auto;
  padding-top: var(--space-6);
}

/* Desktop: single-row bar. Wordmark left, links and CTA right. */
@media (min-width: 60rem) {
  .site-header {
    position: sticky;
  }

  .nav-toggle,
  .js .nav-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav {
    position: static;
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    flex-wrap: wrap;                   /* at very large text sizes the nav wraps inside the header instead of overflowing it */
    align-items: center;
    max-width: 100%;
    gap: var(--space-3) var(--space-8);
    padding: 0;
    overflow: visible;
  }

  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-7);
  }

  .site-nav__item,
  .site-nav__item:first-child {
    border: 0;
  }

  .site-nav__link {
    position: relative;
    padding-block: var(--space-4);     /* 44px-tall hit area for touch laptops and tablets; the header height is unchanged */
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    right: var(--tracking-label);
    bottom: 0.65rem;
    left: 0;
    height: var(--border-width);
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
  }

  .site-nav__link:hover::after,
  .site-nav__link:focus-visible::after {
    transform: scaleX(1);
  }

  .site-nav__cta {
    width: auto;
    margin: 0;
  }

  .site-nav__note {
    display: none;
  }
}


/* 3. Hero
   Editorial split: text on the left, one large portrait bleeding off the right edge.
   The photo keeps its natural 2:3 proportions. It is shown at full strength on the right and is
   faded into the page background (gradient overlay) towards the left and bottom, so it has no frame.
   ========================================================================== */
.hero {
  --photo-w: min(86vw, 26rem, calc(var(--hero-vh) * 0.307));   /* phones: photo hangs from the top right; its height (1.5x this) is capped at ~46% of the screen so the headline and booking button stay in the first screen */
  --photo-h: calc(var(--photo-w) * 1.5);        /* 2:3, the photo's own ratio */
  --photo-top: 3.5rem;                           /* phones: leaves the eyebrow label clear of the photo */
  --hero-vh: 100vh;
  position: relative;
  overflow: hidden;                              /* the photo may run past the bottom edge, inside its fade */
}

/* svh excludes mobile browser chrome. A second declaration with an unknown unit would NOT be dropped
   (custom properties accept any value), so the upgrade has to live in @supports. */
@supports (height: 1svh) {
  .hero {
    --hero-vh: 100svh;
  }
}

/* Short phones (about 700px tall or less, e.g. 320x640, 375x667): the same stack, a little tighter, so the booking button
   still lands as close to the first screen as the content allows. Body text stays at 16px. Tablets and up are unaffected
   (their layout rules follow and override this); landscape phones are handled by the height-based headline cap further down. */
@media (max-width: 47.9375rem) and (max-height: 44rem) and (orientation: portrait) {
  .hero {
    --photo-w: min(86vw, 26rem, calc(var(--hero-vh) * 0.26));
    --photo-top: 3rem;                 /* the eyebrow label still sits clear above the photo */
    --hero-title: 3.25rem;
  }

  .hero__grid {
    row-gap: var(--space-4);
  }

  .hero__copy {
    gap: var(--space-4);
  }

  .hero__body {
    gap: var(--space-4);
  }

  .hero__lede {
    font-size: 1rem;
  }
}

/* Photo and its fade */
.hero__media {
  margin: 0;
}

.hero__photo {
  position: absolute;
  top: var(--photo-top);
  right: 0;
  z-index: 0;
  width: var(--photo-w);
  aspect-ratio: 2 / 3;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                              /* the box has the photo's own ratio, so nothing is cropped */
}

/* Two overlapping fades in the page colour: upwards from the bottom edge, and rightwards from the left edge.
   Fully solid at the bottom and left edges, fully clear from about half way. Right side stays untouched. */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--color-bg) 0%, var(--color-bg) 12%, transparent 50%),
    linear-gradient(to right, var(--color-bg) 0%, transparent 58%);
}

.hero__caption {
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--container-max)) / 2));   /* lines up with the container's right edge */
  bottom: var(--space-5);
  z-index: 1;
  margin: 0;
  text-align: right;
}

/* Text column. On phones it starts partly over the photo's faded lower part. */
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-6);
  padding-block: var(--space-5) var(--space-9);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.hero__meta p {
  margin: 0;   /* cancels the foundation's p + p spacing so both labels share a baseline */
}

.hero__meta-aside {
  display: none;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: max(0px, calc(var(--photo-top) + var(--photo-h) - 10rem));   /* leaves the photo's clear upper part to the portrait */
}

.hero__title {
  font-size: var(--hero-title);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.hero__line {
  display: block;
}

/* Staggered indents give the headline its editorial rhythm */
.hero__line--2 { padding-left: 0.35em; }
.hero__line--3 { padding-left: 0.7em; }

.hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__lede {
  max-width: 24rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}

.hero__actions .btn--primary {
  width: 100%;
}

@media (min-width: 40rem) {
  .hero__actions .btn--primary {
    width: auto;
  }

  .hero__line--2 { padding-left: 0.5em; }
  .hero__line--3 { padding-left: 1em; }
}

/* Tablet and up: side by side. The hero is as tall as the screen allows (within limits) and the photo is a
   little taller than the hero, so its faded lower part runs off the bottom edge instead of being cut short. */
@media (min-width: 48rem), (min-width: 34rem) and (max-height: 32rem) and (orientation: landscape) {   /* phones turned sideways get this layout too */
  .hero {
    --hero-h: clamp(34rem, min(calc(var(--hero-vh) - var(--header-h)), 56vw), 64rem);
    --photo-top: 0px;
    --photo-h: calc(var(--hero-h) * 1.14);
    --photo-w: min(calc(var(--photo-h) * 2 / 3), 50vw);
  }

  .hero__grid {
    min-height: var(--hero-h);
    align-content: center;
    padding-block: var(--space-6) var(--space-8);
  }

  .hero__copy {
    margin-top: 0;
    gap: var(--space-7);
  }

  .hero__meta-aside {
    display: block;
  }
}

/* Short, wide windows: scale the headline down so the booking CTA stays visible.
   vh is the baseline; the svh upgrade follows in @supports (see the note at the top of this section). */
@media (min-width: 60rem), (orientation: landscape) and (max-height: 32rem) {   /* short landscape phones scale the headline with the height too */
  :root {
    --hero-title: min(clamp(3.75rem, 1.5rem + 8.6vw, 8.5rem), 15vh);
  }
}

@supports (height: 1svh) {
  @media (min-width: 60rem), (orientation: landscape) and (max-height: 32rem) {
    :root {
      --hero-title: min(clamp(3.75rem, 1.5rem + 8.6vw, 8.5rem), 15svh);
    }
  }
}

/* Short side-by-side windows (laptops with toolbars, tablets in landscape): the headline already scales with the
   height, but the vertical gaps and the narrow lede did not, so the booking button fell below the first screen.
   Tighten the rhythm and let the lede run wider (fewer lines) instead of shrinking the type further. */
@media (min-width: 34rem) and (max-height: 50rem) and (orientation: landscape), (min-width: 48rem) and (max-height: 50rem) {
  .hero__grid {
    padding-block: var(--space-4) var(--space-6);
  }

  .hero__copy {
    gap: var(--space-5);
  }

  .hero__body {
    gap: var(--space-4);
  }

  .hero__lede {
    max-width: 32rem;
  }
}


/* 4. Services
   Sample menu. Content is fictional; replace with the client's real services (see README).
   Mobile first: a single column. From 60rem each category becomes a row: heading left, list right.
   ========================================================================== */
.services {
  border-top: var(--border-hairline);   /* hairline divides it from the hero */
}

/* Intro: eyebrow, headline, lede */
.services__intro {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.services__title {
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.services__title em {
  font-style: italic;
}

.services__lede {
  max-width: 34rem;
}

/* Category: heading block, then its list */
.service-group {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-7);
  border-top: var(--border-hairline);
}

.service-group__head {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.service-group__title {
  font-size: var(--text-2xl);
}

.service-group__note {
  font-size: var(--text-sm);
}

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

/* Service row: name and description left, price right */
.service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* minmax(0,…) lets long names wrap instead of pushing the price out */
  column-gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5);
  border-top: var(--border-hairline);
}

.service:first-child {
  padding-top: 0;
  border-top: 0;
}

.service__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  overflow-wrap: break-word;
}

.service__desc {
  max-width: 30rem;
  overflow-wrap: break-word;               /* safety net below ~250px wide (e.g. a phone at 200% zoom) where the price column squeezes this one */
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.service__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;                          /* an amount must never split across lines */
}

.service__from {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.service__amount {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}

.services__note {
  max-width: 40rem;
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  font-size: var(--text-sm);
}

/* Hover (pointer devices only): the row's top hairline draws in, and the text steps in slightly.
   Rows are not links, so there is no focus or active state to match. */
@media (hover: hover) and (pointer: fine) {
  .service::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: var(--border-width);
    background-color: var(--color-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration) var(--ease);
  }

  .service:hover::before {
    transform: scaleX(1);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service__text {
    transition: transform var(--duration) var(--ease);
  }

  .service:hover .service__text {
    transform: translateX(var(--space-2));
  }
}

@media (min-width: 40rem) {
  .service__desc {
    font-size: var(--text-base);
  }
}

/* Desktop: 12-column composition */
@media (min-width: 60rem) {
  .services__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-6);
    align-items: end;
    margin-bottom: var(--space-9);
  }

  .services__eyebrow {
    grid-column: 1 / -1;
  }

  .services__title {
    grid-column: 1 / 8;
  }

  .services__lede {
    grid-column: 9 / 13;
    padding-bottom: var(--space-2);
  }

  .services__sample {
    grid-column: 1 / -1;
  }

  .service-group {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    padding-block: var(--space-7) var(--space-8);
  }

  .service-group__head {
    grid-column: 1 / 5;
    gap: var(--space-3);
  }

  .service-list {
    grid-column: 6 / 13;
  }

  .service {
    padding-block: var(--space-5);
  }

  .services__note {
    /* starts at the same x as the lists above: five 12-column tracks plus five gaps */
    margin-left: calc((100% - 11 * var(--space-5)) / 12 * 5 + 5 * var(--space-5));
    max-width: none;
  }
}


/* 5. Our Studio
   Sample imagery of stylists at work, shown candidly at natural proportions (never cropped). Beige surface.
   An asymmetric grid: 6 columns on phones and tablets, 12 from 60rem. Placement follows the photos' composition:
   the friendly full-length shot leads, the tall colour shot is dropped beside it, the close-up of hands is a
   small detail, and the salon-station shot closes the group. DOM order is the reading order at every width.
   ========================================================================== */
.studio__intro,
.gallery__intro {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.studio__title,
.gallery__title {
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.studio__title em,
.gallery__title em {
  font-style: italic;
}

.studio__lede,
.gallery__lede {
  max-width: 30rem;
}

.studio__grid,
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-7);
  align-items: start;
}

.studio__item,
.gallery__item {
  margin: 0;
}

/* Photo wrapper: keeps any hover zoom inside the photo's own edges. Height follows the image, so no crop. */
.studio__photo,
.gallery__photo {
  overflow: hidden;
  background-color: var(--color-taupe);   /* only visible for a moment while an image loads */
}

.studio__photo img,
.gallery__photo img {
  width: 100%;
  height: auto;                           /* width/height attributes reserve the space, this keeps the ratio */
}

.studio__no,
.gallery__no {
  margin-top: var(--space-3);
}

/* Phones: Studio */
.studio__item--lead   { grid-column: 1 / 6; }
.studio__item--tall   { grid-column: 2 / 7; }
.studio__item--detail { grid-column: 1 / 5; }
.studio__item--wide   { grid-column: 2 / 7; }

/* Pointer-only hover: a slow, slight zoom inside the photo's edges (not applied for reduced motion) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .studio__photo img,
  .gallery__photo img {
    transition: transform 0.9s var(--ease);
  }

  .studio__item:hover .studio__photo img,
  .gallery__item:hover .gallery__photo img {
    transform: scale(1.035);
  }
}

@media (min-width: 40rem) {
  .studio__grid,
  .gallery__grid {
    column-gap: var(--space-5);
    row-gap: var(--space-8);
  }

  .studio__item--lead   { grid-column: 1 / 5; }
  .studio__item--tall   { grid-column: 3 / 7; margin-top: var(--space-7); }
  .studio__item--detail { grid-column: 1 / 4; }
  .studio__item--wide   { grid-column: 4 / 7; margin-top: var(--space-8); }
}

@media (min-width: 60rem) {
  .studio__intro,
  .gallery__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-6);
    align-items: end;
    margin-bottom: var(--space-9);
  }

  .studio__eyebrow,
  .gallery__eyebrow {
    grid-column: 1 / -1;
  }

  .studio__title,
  .gallery__title {
    grid-column: 1 / 8;
  }

  .studio__lede,
  .gallery__lede {
    grid-column: 9 / 13;
    padding-bottom: var(--space-2);
  }

  .studio__grid,
  .gallery__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--space-9);
  }

  .studio__item--lead   { grid-column: 1 / 6; }
  .studio__item--tall   { grid-column: 7 / 11; margin-top: var(--space-9); }
  .studio__item--detail { grid-column: 2 / 5; margin-top: var(--space-7); }
  .studio__item--wide   { grid-column: 7 / 12; }
}


/* 6. Gallery
   Static, ivory. Eight looks at natural proportions in an asymmetric grid (no crop, no lightbox).
   Placement by composition: the one front-facing portrait leads and is the largest; the tallest back views
   are given narrow columns; the half-up and updo shots, which read well small, sit at the edges.
   Figure numbers follow the DOM order, which is the reading order at every width.
   ========================================================================== */
/* Phones */
.gallery__item--1 { grid-column: 1 / -1; }
.gallery__item--2 { grid-column: 1 / 4; }
.gallery__item--3 { grid-column: 4 / 7; margin-top: var(--space-6); }
.gallery__item--4 { grid-column: 2 / 7; }
.gallery__item--5 { grid-column: 1 / 4; }
.gallery__item--6 { grid-column: 4 / 7; margin-top: var(--space-6); }
.gallery__item--7 { grid-column: 1 / 4; }
.gallery__item--8 { grid-column: 4 / 7; margin-top: var(--space-6); }

/* Tablet */
@media (min-width: 40rem) {
  .gallery__item--1 { grid-column: 1 / 5; }
  .gallery__item--2 { grid-column: 5 / 7; margin-top: var(--space-7); }
  .gallery__item--3 { grid-column: 1 / 4; margin-top: 0; }
  .gallery__item--4 { grid-column: 4 / 7; margin-top: var(--space-7); }
  .gallery__item--5 { grid-column: 1 / 4; }
  .gallery__item--6 { grid-column: 4 / 7; margin-top: var(--space-7); }
  .gallery__item--7 { grid-column: 2 / 5; }
  .gallery__item--8 { grid-column: 5 / 7; margin-top: var(--space-7); }
}

/* Desktop: 12 columns */
@media (min-width: 60rem) {
  .gallery__item--1 { grid-column: 1 / 6; }
  .gallery__item--2 { grid-column: 7 / 10; margin-top: var(--space-8); }
  .gallery__item--3 { grid-column: 10 / 13; margin-top: var(--space-6); }
  .gallery__item--4 { grid-column: 1 / 5; margin-top: 0; }
  .gallery__item--5 { grid-column: 6 / 9; margin-top: var(--space-7); }
  .gallery__item--6 { grid-column: 10 / 13; margin-top: var(--space-9); }
  .gallery__item--7 { grid-column: 2 / 6; }
  .gallery__item--8 { grid-column: 8 / 12; margin-top: var(--space-8); }
}


/* 7. Book and visit
   Espresso surface (.surface-dark re-maps text, lines and focus colour). Form fields use ivory borders for
   strong contrast, and errors are shown with text, never colour alone. Mobile: intro, form, contact in that
   order. Desktop: intro and contact in the left column, form on the right.
   ========================================================================== */
.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* lets long words wrap at large text sizes instead of widening the page */
  gap: var(--space-8);
}

.booking__title {
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.booking__title em {
  font-style: italic;
}

.booking__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* without this a long word widens the column at large text sizes */
  gap: var(--space-5);
  align-content: start;
}

.booking__intro .lead {
  max-width: 30rem;
}

/* Form */
.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  color-scheme: dark;                    /* native select arrow, date picker and checkbox follow the dark surface */
}

.form[hidden],
.form__result[hidden],
.form__summary[hidden],
.form__trap[hidden],
.field__error[hidden] {
  display: none;
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* an implicit auto column would grow to the date input's minimum width */
  gap: var(--space-2);
  min-width: 0;
}

.field-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-group__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;               /* date and time fields line up even when only one has a hint */
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0;
}

.field__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field__req,
.field__opt {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field__control {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-text);   /* ivory on espresso: well above the 3:1 UI minimum */
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;                                          /* 16px: stops iOS zooming into the field */
  line-height: 1.4;
}

textarea.field__control {
  min-height: 7rem;
  resize: vertical;
}

select.field__control option {
  background-color: var(--color-espresso);
  color: var(--color-ivory);
}

.field__control:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.field__control[aria-invalid="true"] {
  border-width: 2px;                                       /* a second, non-colour cue next to the "Error:" text */
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.field__error {
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Consent */
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.consent__box {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-ivory);
}

.consent__box:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.consent__label {
  font-size: var(--text-sm);
  line-height: 1.55;
}

.form__summary {
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-text);
}

.form__summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.form__summary-title {
  font-weight: 500;
}

.form__summary ul {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}

.form__summary li + li {
  margin-top: var(--space-2);
}

.form__submit {
  width: 100%;
}

.form__submit[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}

/* The primary button is ivory on espresso here; keep its hover inverted like everywhere else */
.form__note {
  font-size: var(--text-sm);
}

/* Shown only when JavaScript is off (inside <noscript>): says plainly that the basic form needs a configured key */
.form__note--nojs {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-text);
}

.form__result {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: var(--space-6);
  border: var(--border-hairline);
}

.form__result:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.form__result-title {
  font-size: var(--text-2xl);
}

/* Contact details */
.contact {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.contact__title {
  font-size: var(--text-2xl);
}

.contact__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.contact__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: var(--border-hairline);
}

.contact__row dd {
  margin: 0;
}

.contact__link {
  overflow-wrap: anywhere;                 /* a long email address may break instead of widening the page at large text sizes */
  text-underline-offset: 0.25em;
}

.contact__link:hover,
.site-footer a:hover {
  text-decoration-thickness: 2px;
}

.contact__sample {
  margin-top: var(--space-1);
}

@media (min-width: 40rem) {
  .field-group__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .form__submit {
    width: auto;
    justify-self: start;
  }
}

@media (min-width: 60rem) {
  .booking__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-8);
    align-items: start;
  }

  .booking__intro {
    grid-column: 1 / 6;
    grid-row: 1;
  }

  .contact {
    grid-column: 1 / 6;
    grid-row: 2;
  }

  .booking__formwrap {
    grid-column: 7 / 13;
    grid-row: 1 / span 2;
  }
}


/* 8. Footer
   Ivory, with a hairline above. Wordmark and tagline, links, and the sample contact details.
   ========================================================================== */
.site-footer {
  border-top: var(--border-hairline);
  padding-block: var(--space-8) var(--space-6);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.site-footer__brand {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.site-footer__tag {
  max-width: 20rem;
  font-size: var(--text-sm);
}

.site-footer__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list a {
  display: inline-block;
  padding-block: var(--space-2);        /* a comfortable tap target without extra visual weight */
}

.site-footer__contact {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  font-size: var(--text-sm);
}

.site-footer__line {
  overflow-wrap: anywhere;
  margin-top: var(--space-1);
}

/* The phone and email links are the main way to reach the salon: give them a finger-sized hit area without changing the type */
.site-footer__line a {
  display: inline-block;
  padding-block: 0.75rem;
}

.site-footer__legal {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
  line-height: 1.6;
}

@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .site-footer__brand {
    grid-column: 1 / 6;
  }

  .site-footer__nav {
    grid-column: 6 / 9;
  }

  .site-footer__contact {
    grid-column: 9 / 13;
  }
}


/* 9. Privacy note page (privacy.html)
   ========================================================================== */
.privacy {
  display: grid;
  gap: var(--space-5);
}

.privacy__title {
  font-size: var(--text-3xl);
}

.privacy h2 {
  margin-top: var(--space-5);
  font-size: var(--text-xl);
}

.privacy ul {
  margin: 0;
  padding-left: var(--space-5);
}

.privacy li + li {
  margin-top: var(--space-2);
}

.privacy__demo {
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-text);
}

.site-header__bar .btn--text {
  min-height: 2.75rem;
}