/* DS-10 Soft Organic Studio -- Lacquer Room Nail & Beauty Studio.
 *
 * Profession treatment: Recommendation #3, Nails/beauty studio. The palette,
 * type pairing, frame treatment and media grading below are that section's
 * tokens, applied without blending any other treatment. The master layout,
 * header, hero mask, overlapping bands, footer, spacing scale and the
 * signature slideshow are the base build's, unchanged.
 *
 *   page ground #1C1811, cards #2E281F, text #F7F5F2, muted #CAC4B9
 *   action #9FB3EF / label #101318 / hover #B7C7F5 / active #879FE8
 *   secondary accent #E2BF83, highlight #C59CF2 (text #101318)
 *   frames #B0986D -- double 1px, 22px radius, 0 8px 24px shadow
 *   review panel #373025, staff panel #3C392A, footer #14100B / #FFFFFF
 *   focus 3px solid #9FB3EF, 3px offset
 */




:root {
  --bg: #1C1811;
  --ink: #F7F5F2;
  --act: #9FB3EF;
  --act-h: #B7C7F5;
  --act-a: #879FE8;
  --acc: #E2BF83;
  --hi: #C59CF2;
  --on-hi: #101318;
  --surface: #2E281F;
  --cream: #373025;
  --field: #3C392A;
  --muted: #CAC4B9;
  --edge: #B0986D;
  --rule: #B0986D;
  --on-act: #101318;
  --ft-bg: #14100B;
  --ft-ink: #FFFFFF;
  --ft-muted: #CAC4B9;

  /* Recommendation #3 frame and media grading. */
  --frame: 3px double #B0986D;
  --frame-radius: 22px;
  --frame-shadow: 0 8px 24px rgba(0,0,0,.38);
  --media-filter: saturate(.88) contrast(1.08);
  --media-overlay: linear-gradient(180deg, rgba(5,7,10,.08) 0%, rgba(5,7,10,.76) 100%);

  /* Section 4's spacing scale, entire. Nothing in this build uses a value
     that is not on it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --max: 1360px;
  --measure: 68ch;
  --measure-s: 52ch;

  /* Large-radius geometry: 28px on controls as section 4 names, and a much
     larger radius on the colour fields, which is what makes a band read as a
     shape rather than as a stripe. */
  --radius: 28px;
  --radius-lg: 32px;

  --head-h:var(--catalog-font-heading);
  --band-pad: 72px;
  --overlap: 12px;

  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);

  --t: 220ms cubic-bezier(.2,.8,.2,1);
  --t-long: 600ms cubic-bezier(.2,.8,.2,1);

  --gutter: 16px;

  /* base.css reads these three. The geometry is section 4's, exactly. */
  --focus-ring: #9FB3EF;
  --focus-width: 3px;
  --focus-offset: 3px;
}

@media (min-width: 360px) { :root { --gutter: 18px; } }
@media (min-width: 375px) { :root { --gutter: 20px; } }
@media (min-width: 414px) { :root { --gutter: 24px; } }
@media (min-width: 768px) {
  :root {
    --gutter: 36px; --band-pad: 112px; --head-h:var(--catalog-font-heading);
    --radius-lg: 56px; --overlap: 24px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 48px; --band-pad: 144px; --radius-lg: 80px; --overlap: 48px;
  }
}

/* ---- the material ----------------------------------------------------- */

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3, .mark__h, .price__v, .ft__invite-h {
  font-family: var(--font-h);
  font-weight: 700;
}

h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3.25rem, 7vw, 7rem);
    line-height: .94;
    letter-spacing: -.035em;
  }
}

h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; margin: 0; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; margin: 0; }

.measure   { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }

a { color: var(--act); }
a:hover { color: var(--act-h); }

/* ---- flowing overlapping sections ------------------------------------- */
/*
 * Every band is an opaque large-radius field. Each one rides up over the
 * band before it by --overlap, which is 12px at 320 -- section 7's own
 * ceiling for that width -- and 48px at 1024. A negative BLOCK margin cannot
 * push anything sideways, so this treatment is free of the horizontal
 * overflow that an overlapping layout usually costs.
 *
 * The paint order is DOM order: a later section is painted over an earlier
 * one without a single z-index, which is why every band has to be opaque.
 */

.sec {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding-block: var(--band-pad);
}

.sec + .sec { margin-top: calc(var(--overlap) * -1); }

.svcp, .how, .rev, .cta, .proc { background: var(--cream); }
.appr, .limit, .alt, .focus, .note { background: var(--field); }
.stfp, .stf, .prin { background: var(--surface); }

/* Three FAQ groups run one after another, so they alternate between the two
   light fields rather than reading as one long block. */
.faqg { background: var(--cream); }
.faqg:nth-of-type(even) { background: var(--surface); }
.faqp { background: var(--surface); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- rounded floating header ------------------------------------------ */
/*
 * The rail is a pill floating on the page ground rather than a bar welded to
 * the top of it. The pill carries its own padding, so at 320px the row has
 * the page gutter outside it and a smaller inner gutter inside it; both are
 * counted in the header arithmetic below.
 */

.hd {
  position: relative;
  z-index: 30;
  padding: var(--s2) var(--gutter);
  background: var(--bg);
}

.hd__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--head-h);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

@media (min-width: 768px) {
  .hd__in { gap: var(--s4); padding-inline: var(--s5); }
}

.mark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--s1);
}

.mark__h { font-size: 1.125rem; letter-spacing: -.01em; }

.mark__sub {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

@media (min-width: 768px) {
  .mark__h { font-size: 1.375rem; }
  .mark__sub { font-size: .8125rem; letter-spacing: .16em; }
}

/* ---- soft segmented navigation ---------------------------------------- */
/*
 * Each link is a soft pill segment sitting on the rail. The segments touch,
 * which is what makes them read as one control rather than nine links, and
 * the current page is the one segment that is filled.
 */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--bg);
  border-radius: 999px;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding-inline: var(--s3);
  border-radius: 999px;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}

.nav__link:hover { background: var(--cream); color: var(--ink); }

.nav__link[aria-current="page"] {
  background: var(--act);
  color: var(--on-act);
  font-weight: 700;
}

.nav__no {
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.nav__link[aria-current="page"] .nav__no { color: var(--on-act); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .drawer { display: none; }
}

/*
 * The rail is a fixed width and the nav is not, so the nav has to be sized
 * for the NARROWEST width that shows it, not the widest. Measured at 1024:
 * the rail offers 1024 - 96 (page gutter) - 48 (rail padding) = 880px, of
 * which the wordmark takes ~107 and the book button 96, leaving about 653
 * for nine segments that wanted 844. The segment numbers are the first
 * thing to go -- they are ornament, and the link text beside them says the
 * same thing -- followed by four pixels of padding a side and a step down
 * in size. That buys back roughly 260px, comfortably clear of the 191 the
 * overflow actually costs. The drawer keeps its own numbers: it is a
 * stacked list with a whole viewport of room, and `.nav__no` is shared.
 */
.nav .nav__no { display: none; }
.nav .nav__link { padding-inline: 10px; font-size: .8125rem; }

@media (min-width: 1360px) {
  .nav .nav__no { display: inline; }
  .nav .nav__link { padding-inline: var(--s3); font-size: .875rem; }
}

/* ---- the disclosure that replaces it below 1024 ----------------------- */

.drawer { position: relative; }

.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s3);
  border: 2px solid var(--edge);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  list-style: none;
}

.drawer__toggle::-webkit-details-marker { display: none; }

.drawer__bars {
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

/* Below 414px the three header items -- wordmark, Book action and disclosure
   -- do not fit a 320px viewport once the page gutter and the pill's own
   inner gutter are both paid for. The toggle drops its word and becomes a
   44px circle, which brings the row back inside the viewport.

   The word is CLIPPED, not display:none. A `display: none` label leaves the
   summary with nothing but an aria-hidden icon, so the control loses its
   accessible name and a screen reader announces an unlabelled disclosure --
   the exact failure this rule exists to avoid making. Clipped, it takes no
   layout space and still names the control. */
@media (max-width: 413px) {
  .drawer__toggle { padding-inline: 0; width: 44px; }
  .drawer__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.drawer__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s3));
  z-index: 40;
  width: min(20rem, calc(100vw - (var(--gutter) * 2) - 20px));
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 20px 48px rgba(0,0,0,.45);
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
}

.drawer__link:hover { background: var(--cream); }
.drawer__link[aria-current="page"] { background: var(--act); color: var(--on-act); font-weight: 700; }
.drawer__link[aria-current="page"] .nav__no { color: var(--on-act); }

/* ---- actions ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.btn--primary, .btn--book, .btn--sub {
  background: var(--act);
  color: var(--on-act);
  border-color: var(--act);
}

/* Hover, focus and active all keep the label at full contrast -- section 5
   requires the Book label visible in every one of the four states, and a
   button that pales on hover is the usual way that is failed. */
.btn--primary:hover, .btn--book:hover, .btn--sub:hover,
.btn--primary:active, .btn--book:active, .btn--sub:active {
  background: var(--act-h);
  border-color: var(--act-h);
  color: var(--on-act);
}
.btn--primary:active, .btn--book:active, .btn--sub:active {
  background: var(--act-a);
  border-color: var(--act-a);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--edge);
}

.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* The header action keeps section 4's 24px of horizontal padding from 414px
   up. Below that the 320px row cannot carry it, and 16px is the figure that
   brings the row inside the viewport; the 44px minimum height is untouched
   at every width. */
@media (max-width: 413px) {
  .btn--book { padding-inline: var(--s4); font-size: .9375rem; white-space: nowrap; }
}

/* ---- subscribe band ---------------------------------------------------- */

.sub-band {
  position: relative;
  margin-top: calc(var(--overlap) * -1);
  padding-block: var(--band-pad);
  background: var(--field);
  border-radius: var(--radius-lg);
}

.sub-band__in { display: grid; gap: var(--s6); }
.sub-band__h { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
.sub-band__p { max-width: var(--measure); margin: var(--s4) 0 0; }
.sub-form { display: grid; gap: var(--s4); max-width: 34rem; }

@media (min-width: 1024px) {
  .sub-band__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* ---- curved invitation footer ----------------------------------------- */

.ft {
  position: relative;
  margin-top: calc(var(--overlap) * -1);
  padding-block: var(--band-pad) var(--s8);
  background: var(--ft-bg);
  color: var(--ft-ink);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);

  --focus-ring: var(--act);
}

.ft a { color: var(--ft-ink); }
.ft a:hover { color: var(--hi); }

.ft__invite {
  max-width: var(--measure);
  margin: 0 0 var(--s8);
  padding: var(--s6);
  border: 1px solid var(--ft-muted);
  border-radius: var(--radius-lg);
}

.ft__invite-h {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  margin-bottom: var(--s3);
}

.ft__invite-p { display: block; color: var(--ft-muted); margin: 0; }

.ft__h { font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.ft__in { display: grid; gap: var(--s7); }
.ft__addr { font-style: normal; line-height: 1.65; }
.ft__hours { margin: 0; }
.ft__row + .ft__row { margin-top: var(--s4); }
.ft__row dd { margin: var(--s1) 0 0; }
.ft__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5); margin: 0; padding: 0; list-style: none; }
.ft__list a { display: inline-flex; align-items: center; min-height: 44px; }
.ft__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s7); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--ft-muted); color: var(--ft-muted); }
.ft__foot p { margin: 0; }

@media (min-width: 768px) {
  .ft__invite { max-width: 70rem; }
  .ft__in { grid-template-columns: 1.1fr .9fr 1.4fr; align-items: start; }
  .ft__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- forms ------------------------------------------------------------- */

.field label, .sub-form label {
  display: block;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: var(--s2);
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.field textarea { min-height: 168px; resize: vertical; border-radius: var(--radius); }

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--act);
}

/* The subscribe band sits on the staff-panel field; the card surface is the
   readable ground for an input there. */
.sub-form input { background: var(--surface); }

/* ---- reduced motion ---------------------------------------------------- */
/*
 * Section 4's animation-off state: "First image stays in the mask; curved
 * sections retain their shapes without movement." base.css already reduces
 * every duration to 0.001ms, which makes the crossfade instant and leaves
 * the first slide in place, and every curve in this file is static geometry
 * with nothing to stop. What remains is to make sure no hover moves anything
 * either.
 */

@media (prefers-reduced-motion: reduce) {
  .nav__link, .btn, .hero__slide { transition: none; }
}