/*
 * Haus of Contour — the home page.
 *
 * The hero, the "four ways in" service list, the studio block, the question
 * rows, the visit grid, and the fixed enquiry panel. Everything shared with
 * other pages (bands, details, closing, chrome) lives in site.css.
 */

/* ------------------------------------------------------------------ hero */

/* Full-bleed photograph under bottom-aligned copy. `svh` rather than `vh` so
   the mobile browser chrome appearing does not crop the headline. */
.hero {
  position: relative;
  height: calc(100svh - 78px);
  min-height: 600px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero__layer {
  position: absolute;
  inset: -6% 0;
  will-change: transform;
  /* The same woven plate the shared frames use, so a missing hero reads as an
     empty frame rather than a white gap under the headline. */
  background: repeating-linear-gradient(
    97deg,
    #E7E1D7 0px, #E7E1D7 11px,
    #DED7CB 11px, #DED7CB 22px
  );
}

.hero__layer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 42%;
}

/* Warms the left third back to the page ground so the headline keeps its
   contrast over whatever the photograph is doing behind it. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    96deg,
    rgba(239, 235, 228, 0.88) 0%,
    rgba(239, 235, 228, 0.55) 42%,
    rgba(239, 235, 228, 0) 70%
  );
}

.hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 160px;
}

.hero__title { max-width: 19ch; font-size: clamp(48px, 6.4vw, 86px); }

.hero__lede { margin-top: 26px; max-width: 44ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/*
 * The header stops being a fixed 78px once it stacks, so the hero stops
 * subtracting one — but it still needs a definite height. With `height: auto`
 * the `justify-content: flex-end` above is inert, and the copy drifts to the
 * top of the frame while the scrim below still protects the bottom, which
 * leaves the lede sitting on whatever the photograph happens to be doing.
 */
@media (max-width: 900px) {
  .hero { height: 76svh; min-height: 520px; }
  .hero__inner { padding-bottom: 72px; }
  /* Portrait crops put the subject centre-frame, so the gradient runs
     bottom-to-top here and carries the copy that sits over it. */
  .hero__scrim {
    background: linear-gradient(
      0deg,
      rgba(239, 235, 228, 0.95) 0%,
      rgba(239, 235, 228, 0.86) 38%,
      rgba(239, 235, 228, 0.35) 66%,
      rgba(239, 235, 228, 0) 88%
    );
  }
}

/* -------------------------------------------------------- four ways in */

.services { padding-top: 104px; }

.services__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 44px;
}

.service {
  display: block;
  color: inherit;
  border-top: 1px solid var(--rule);
  padding: 38px 0 34px;
  transition: background 500ms var(--ease);
}
.service:hover { background: var(--raised); color: inherit; }

.service__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.service__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.service__figures {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.service__price { font-size: 15px; color: var(--ink); }

.service__duration {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.service__body {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 64ch;
}

.service__tags { margin-top: 22px; }

/* Closing rule under the last service, carrying the protocol link. */
.services__foot {
  border-top: 1px solid var(--rule);
  padding-top: 30px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.services__terms {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ studio clips */

/* The rail itself is styled in site.css. Here it only needs the gap that the
   service list does not carry (`.services` has no bottom padding), and the
   protocol band that follows drops its own margin so the two raised bands
   meet on a hairline the way they do on /treatments. */
.studio--after-services { margin-top: 104px; }

.studio--after-services + .protocol { margin-top: 0; }

/* ---------------------------------------------------------- the protocol */

.protocol {
  margin-top: 104px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--raised);
  padding-top: 96px;
  padding-bottom: 96px;
}

.protocol__statement {
  max-width: 34ch;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
}

.protocol__eyebrow { margin-bottom: 34px; }

.protocol__note { margin-top: 34px; max-width: 52ch; }

/* --------------------------------------------------------- studio block */

.studio-block { padding-top: 104px; padding-bottom: 104px; }

.studio-block__grid {
  display: grid;
  grid-template-columns: minmax(min(280px, 100%), 0.85fr) minmax(min(300px, 100%), 1fr);
  gap: 72px;
  align-items: start;
}

.studio-block__frame { aspect-ratio: 4 / 5; }

.studio-block__title { margin-top: 24px; font-size: 30px; line-height: 1.1; }

.studio-block__body {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 64ch;
}

/* Two short facts under a rule. */
.credentials {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}

.credentials__value { margin-top: 8px; font-size: 15px; color: var(--ink); }

@media (max-width: 860px) {
  .studio-block__grid { grid-template-columns: 1fr; gap: 48px; }
  /* Copy leads; the photograph follows it. */
  .studio-block__frame { order: 2; }
  .studio-block { padding-top: 64px; padding-bottom: 64px; }
}

/* ------------------------------------------------------ common questions */

.questions { border-top: 1px solid var(--rule); padding-top: 96px; }

.questions__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 40px;
}

@media (max-width: 720px) {
  .questions { padding-top: 64px; }
}

/* -------------------------------------------------------------- the visit */

.visit {
  margin-top: 96px;
  border-top: 1px solid var(--rule);
  background: var(--raised);
  padding-top: 88px;
  padding-bottom: 88px;
}

.visit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 56px;
  align-items: start;
}

.visit__body { margin-top: 14px; }

.visit__body--muted { color: var(--muted); max-width: 34ch; }

.visit__body a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.visit__body a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.visit__cta { margin-top: 22px; }

@media (max-width: 719px) {
  .visit { padding-top: 64px; padding-bottom: 64px; }
  .protocol { padding-top: 64px; padding-bottom: 64px; }
  .services { padding-top: 64px; }
}

/* ---------------------------------------------------------- enquiry panel */

/*
 * The corner panel from the design: a trigger that opens a short, staged
 * enquiry. Without JavaScript the trigger is an ordinary link to the contact
 * page and the panel never renders, so nothing here is load-bearing.
 */
.enquiry {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.enquiry__trigger {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: background var(--shift), color var(--shift),
    border-color 700ms var(--ease), box-shadow 700ms var(--ease);
}
.enquiry__trigger:hover { background: var(--ink); color: var(--raised); }

/* The periodic terracotta pulse that draws the eye without moving anything. */
.enquiry__trigger[data-nudging="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* A tiny envelope, drawn rather than fetched. */
.enquiry__icon {
  position: relative;
  display: block;
  width: 12px;
  height: 10px;
  border: 1px solid currentColor;
  flex: none;
}
.enquiry__icon::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 4px;
  height: 4px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.enquiry__panel {
  width: 340px;
  max-width: calc(100vw - 52px);
  background: var(--raised);
  border: 1px solid var(--rule);
}

.enquiry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding: 16px 18px;
}

.enquiry__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.enquiry__dot {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  flex: none;
}

.enquiry__close {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0;
  transition: color var(--shift);
}
.enquiry__close:hover { color: var(--accent); }

.enquiry__body { padding: 20px 18px; }

/* The studio's side of the exchange, set as a message rather than a label. */
.enquiry__bubble {
  background: var(--shell);
  border: 1px solid var(--rule);
  padding: 13px 14px;
  max-width: 88%;
}

.enquiry__bubble p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }

.enquiry__meta { margin-top: 10px; margin-bottom: 20px; }

/* Interest choices: full-width rows sharing hairlines. */
.enquiry__choices {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.enquiry__choice {
  text-align: left;
  background: var(--raised);
  border: none;
  cursor: pointer;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: background var(--shift), color var(--shift);
}
.enquiry__choice:hover { background: var(--shell); color: var(--accent); }

.enquiry__fields { display: flex; flex-direction: column; gap: 12px; }

.enquiry__fields input {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--shell);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 14px;
}
.enquiry__fields input:focus-visible { border-color: var(--accent); }

.enquiry__send {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--raised);
  background: var(--ink);
  border: none;
  cursor: pointer;
  padding: 16px 20px;
  transition: background var(--shift);
}
.enquiry__send:hover { background: var(--accent); }
.enquiry__send[disabled] { opacity: 0.6; cursor: default; }

.enquiry__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.enquiry__note[data-state="error"] { color: var(--accent); }

/* On a phone the panel spans the gutters rather than floating in a corner. */
@media (max-width: 520px) {
  .enquiry { right: 16px; left: 16px; bottom: 16px; align-items: stretch; }
  .enquiry__panel { width: auto; max-width: none; }
  .enquiry__trigger { justify-content: center; }
}

/* The panel is a distraction when someone is trying to print the page. */
@media print {
  .enquiry { display: none; }
}