/* The KM Studio — site layout layer.
   The only CSS authored for this site. Everything in tokens/ and
   components.css is the design system, copied verbatim and never edited.
   Values here are lifted from the prototype's inline styles. */

/* ── Visually hidden — announced, not seen ────────────────────────────── */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Skip link ──────────────────────────────────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy-800);color:var(--white);padding:var(--space-3) var(--space-5);font:var(--type-small)}
.skip-link:focus{left:0}

/* ── Section rhythm ─────────────────────────────────────────────────── */
.section{padding:clamp(64px,9vw,128px) clamp(20px,4vw,40px)}
.section--tight{padding:clamp(56px,7vw,104px) clamp(20px,4vw,40px)}
.section--flush{padding:0}
.container{max-width:var(--container);margin:0 auto}

/* ── Bands ──────────────────────────────────────────────────────────── */
.band-ivory{background:var(--ivory)}
.band-ivory-deep{background:var(--ivory-deep)}
.band-white{background:var(--white)}
.band-navy{background:var(--navy-800);color:var(--white)}
.band-navy-deep{background:var(--navy-900);color:var(--white)}
.band-burgundy{background:var(--burgundy-800);color:var(--white)}
.band-navy h1,.band-navy h2,.band-navy h3,
.band-navy-deep h1,.band-navy-deep h2,.band-navy-deep h3,
.band-burgundy h1,.band-burgundy h2,.band-burgundy h3{color:var(--white)}

/* ── Splits — the prototype's auto-fit grids ────────────────────────── */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(40px,6vw,88px)}
.split--wide{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0}
.split--cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5)}
.split--thirds{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(28px,4vw,56px)}
.split--narrow{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.split--start{align-items:start}
.split--center{align-items:center}
.split--stretch{align-items:stretch}

/* ── Stacks ─────────────────────────────────────────────────────────── */
.stack{display:flex;flex-direction:column}
.stack-4{gap:var(--space-4)}
.stack-5{gap:var(--space-5)}
.stack-6{gap:var(--space-6)}
.stack-8{gap:var(--space-8)}
.actions{display:flex;gap:var(--space-4);flex-wrap:wrap}

/* ── Measures ───────────────────────────────────────────────────────── */
.measure{max-width:var(--measure)}
.measure-narrow{max-width:var(--measure-narrow)}
.measure-18{max-width:18ch}
.measure-20{max-width:20ch}
.measure-22{max-width:22ch}
.measure-24{max-width:24ch}
.measure-26{max-width:26ch}
.measure-46{max-width:46ch}
.measure-48{max-width:48ch}
.measure-52{max-width:52ch}
.measure-54{max-width:54ch}
.measure-56{max-width:56ch}
.measure-62{max-width:62ch}

/* ── Editorial type not covered by the km-* layer ───────────────────── */
.display{font:var(--weight-light) clamp(44px,5.4vw,76px)/1.06 var(--font-display);letter-spacing:var(--tracking-display);margin:0}
.lead{font:var(--type-lead);color:var(--text-secondary);margin:0}
.band-navy .lead,.band-navy-deep .lead,.band-burgundy .lead{color:var(--text-on-inverse-muted)}
.copy{color:var(--text-secondary)}
.band-navy .copy,.band-navy-deep .copy,.band-burgundy .copy{color:var(--text-on-inverse-muted)}
.pull{font:italic var(--weight-light) clamp(24px,2.4vw,32px)/1.35 var(--font-display);color:var(--text-primary);margin:0}
.numeral{font-family:var(--font-display);font-size:var(--text-md);letter-spacing:var(--tracking-wide);color:var(--taupe)}
.price{font:var(--weight-light) clamp(28px,3vw,42px)/1 var(--font-display);color:var(--text-primary)}
.meta-label{font-family:var(--font-eyebrow);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}

/* ── Media frames ───────────────────────────────────────────────────── */
.frame{position:relative;min-width:0}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--3x4{aspect-ratio:3/4}
.frame--4x3{aspect-ratio:4/3}
.frame--4x5{aspect-ratio:4/5}
.frame--tall{min-height:560px}

/* ── Numbered rows (process list, meta rows) ────────────────────────── */
.row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);padding:26px 0;border-top:1px solid var(--border-hairline)}
.row:last-child{border-bottom:1px solid var(--border-hairline)}
.row__n{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-light);color:var(--taupe)}
.meta-row{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-3) 0;border-top:1px solid var(--border-hairline)}

/* ── Carousel ───────────────────────────────────────────────────────── */
/* No scroll-snap and no authored scroll-behavior on the track: either one
   silently kills the continuous drift in site.js, because the browser's own
   scroll animation fights the per-frame scrollLeft writes. Brief §8. */
.carousel{display:flex;gap:var(--space-5);overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.carousel::-webkit-scrollbar{display:none}
.carousel__item{flex:0 0 clamp(240px,42%,300px);display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-xs)}

/* ── Accordions — FAQs ──────────────────────────────────────────────── */
.faq{border-top:1px solid var(--border-hairline)}
.faq:last-child{border-bottom:1px solid var(--border-hairline)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);padding:var(--space-6) 0;cursor:pointer;font:var(--weight-regular) var(--text-lg)/1.4 var(--font-display);list-style:none}
.faq summary::-webkit-details-marker,.faq summary::marker{display:none;content:""}
.faq summary:hover{color:var(--burgundy-800)}
.faq__mark{flex:none;transition:transform var(--duration-base) var(--ease-standard)}
.faq[open] .faq__mark{transform:rotate(45deg)}
.faq__body{padding:0 0 var(--space-6);max-width:62ch;color:var(--text-secondary);font:var(--type-body)}

/* ── Links ──────────────────────────────────────────────────────────────
   base.css gives every <a> a hairline underline, which is right for prose
   and wrong for chrome. .km-btn and .km-nav__link already win on
   specificity (a class beats an element selector) and need no help here —
   only the skip link does. Footer links are handled in Task 5. */
.skip-link{border-bottom:0}

/* ── Header ─────────────────────────────────────────────────────────── */
/* The veil (translucent tint + blur) lives here on the full-width wrapper
   rather than on .km-nav--veiled inside it — .header spans the viewport,
   while the nav sits in a 1200px container, so putting the veil on the
   wrapper is the one that actually reads edge-to-edge. .header__nav then
   only needs to cancel .km-nav's own opaque ivory background and hairline
   so the wrapper's veil shows through. */
.header{position:sticky;top:0;z-index:40;background:var(--veil-light);backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);border-bottom:1px solid var(--border-hairline)}
.header__inner{padding:0 clamp(20px,4vw,40px)}
.header__nav{background:transparent;border-bottom:0;padding:var(--space-4) 0}
.header__logo{border-bottom:0;display:flex;align-items:center}
.header__toggle{display:none}

/* ── Announcement bar ───────────────────────────────────────────────── */
.announce{background:var(--navy-900);color:var(--white);padding:11px clamp(20px,4vw,40px);display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;font:var(--type-small);text-align:center}
.announce__label{font-family:var(--font-eyebrow);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-on-inverse-muted)}
.announce__link{color:var(--white);border-bottom:1px solid rgba(255,255,255,.5)}
.announce__link:hover{color:var(--white);border-bottom-color:var(--white)}

/* ── Mobile navigation — not provided by the design system ──────────── */
@media (max-width:860px){
  .header__toggle{display:inline-flex;order:3}
  .header__nav{flex-wrap:wrap;gap:var(--space-4)}
  .header__links{
    display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;border-top:1px solid var(--border-hairline);
  }
  .header__links[data-open="true"]{display:flex}
  .header__links li{border-bottom:1px solid var(--border-hairline)}
  .header__links .km-nav__link{display:block;width:100%;padding:var(--space-5) 0;font-size:var(--text-xs)}
  .header__actions{order:2;margin-left:auto}
}
@media (max-width:520px){
  .header__actions .km-btn{padding:11px 18px;font-size:var(--text-2xs)}
  .header__logo img{height:36px}
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer{background:var(--navy-900);color:var(--white);padding:clamp(56px,7vw,96px) clamp(20px,4vw,40px) var(--space-10)}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(32px,5vw,64px)}
.footer a,.footer .footer__link{color:var(--text-on-inverse-muted);border-bottom:0;font:var(--type-small);text-align:left}
.footer a:hover{color:var(--white)}
.footer__legal{max-width:var(--container);margin:56px auto 0;padding-top:28px;border-top:1px solid var(--border-on-inverse);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.footer__legal-links{display:flex;gap:28px;flex-wrap:wrap;align-items:center}

/* ── Photo slots without a photograph yet ───────────────────────────── */
/* Holds the exact space the image will take, so dropping the file in later
   shifts nothing. Hairline and tracked caps, like every other quiet label
   in the system. */
.photo-slot{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:180px;padding:var(--space-6);
  background:var(--ivory-deep);border:1px solid var(--border-hairline);
  border-radius:2px;text-align:center;box-sizing:border-box}
.photo-slot__caption{font-family:var(--font-eyebrow);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);max-width:24ch;line-height:1.7}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer{padding:clamp(56px,7vw,96px) clamp(20px,4vw,40px) 40px}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(32px,5vw,64px)}
.footer__blurb{font:var(--type-small);font-size:12px;color:var(--text-on-inverse-muted);
  margin:0;max-width:34ch}
.footer__link{font:var(--type-small);color:var(--text-on-inverse-muted);text-align:left;
  transition:color var(--duration-fast) var(--ease-standard)}
.footer__link:hover{color:var(--white)}
.footer__link--static{cursor:default}
.footer__link--static:hover{color:var(--text-on-inverse-muted)}
.footer__legal{margin-top:56px;padding-top:28px;border-top:1px solid var(--border-on-inverse);
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.footer__legal-links{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.footer__copy{font-family:var(--font-eyebrow);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-on-inverse-muted)}

/* ── Carousel arrows ────────────────────────────────────────────────── */
.carousel__arrow{width:40px;height:40px;flex:none;display:flex;align-items:center;
  justify-content:center;background:none;border:1px solid var(--border-hairline);
  border-radius:2px;cursor:pointer;color:var(--text-primary);
  transition:border-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard)}
.carousel__arrow:hover{border-color:var(--burgundy-800);color:var(--burgundy-800)}
.carousel__chev{display:block;width:8px;height:8px;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor}
.carousel__chev--prev{transform:rotate(45deg);margin-right:2px}
.carousel__chev--next{transform:rotate(-135deg);margin-left:2px}

/* ── Tracked-caps text link ─────────────────────────────────────────── */
/* The prototype draws these as buttons with onClick handlers; as links they
   work without script and are crawlable. */
.link-caps{display:inline-block;border-bottom:1px solid var(--border-hairline);
  padding:0 0 7px;font-family:var(--font-eyebrow);font-size:var(--text-2xs);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-primary);text-align:left;
  transition:color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard)}
.link-caps:hover{color:var(--burgundy-800);border-bottom-color:var(--burgundy-800)}

/* ── Credentials list (About) ───────────────────────────────────────── */
.credential{display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-5) 0;border-top:1px solid var(--border-hairline)}
.credential:last-child{border-bottom:1px solid var(--border-hairline)}

/* ── Service selector rows ──────────────────────────────────────────── */
.row:has(.row__q){grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.row__q{font:italic var(--weight-light) var(--text-lg)/1.45 var(--font-display);
  color:var(--text-primary);margin:0;max-width:40ch}
.row__a{font:var(--type-body);color:var(--text-secondary);margin:0}

/* ── Service page anatomy ───────────────────────────────────────────────
   Shared by Color Analysis, Style Analysis and Identity Session. The three
   pages are deliberately parallel and that parallelism is part of the
   design (brief §9.4), so the structure lives here once. */

/* The translucent box that holds "What we'll explore" and "Leave with…". */
.panel{max-width:1200px;width:100%;margin:clamp(20px,3vw,36px) auto;
  padding:clamp(28px,4vw,44px);background:rgba(255,255,255,.6);
  border:1px solid var(--border-hairline);border-radius:2px;box-sizing:border-box}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30%),1fr));
  gap:clamp(24px,3vw,40px)}
.panel-item{max-width:30ch;margin:0 auto;text-align:center;
  padding-top:var(--space-5);border-top:1px solid var(--border-hairline)}
.panel-item h4{font:var(--type-h4);margin:var(--space-3) 0 var(--space-2)}

/* "How the session works" — three white cards, each with a palette strip. */
.step-card{background:var(--white);border:1px solid var(--border-hairline);
  border-radius:2px;padding:clamp(20px,3vw,28px);
  display:flex;flex-direction:column;gap:var(--space-4)}
.step-card__label{font-family:var(--font-eyebrow);font-size:var(--text-2xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--burgundy-800);font-weight:var(--weight-semibold)}

/* "Leave with…" — hairline-separated takeaway rows. */
.takeaway{padding:11px 0;border-top:1px solid var(--border-hairline);
  font:var(--type-body);color:var(--text-secondary);margin:0}
.takeaway:last-child{border-bottom:1px solid var(--border-hairline)}

/* "Before your appointment" — four numbered steps. */
.prep{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);
  padding:var(--space-5) 0;border-top:1px solid var(--border-hairline)}
.prep:last-child{border-bottom:1px solid var(--border-hairline)}
.prep__n{font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:var(--weight-light);color:var(--taupe);line-height:1.2}
.prep p{font:var(--type-body);color:var(--text-secondary);margin:0;max-width:62ch}

/* Palette strips need an explicit cell height — the design system sizes them
   from a `height` prop we resolve at build time instead. */
.km-palette__cell{height:10px}
.km-palette--tall .km-palette__cell{height:56px}

/* ── Coming Soon blocks ─────────────────────────────────────────────── */
/* The header is sticky, so an anchored block must clear it when linked to
   from the dropdown or the footer. */
.soon{scroll-margin-top:96px}
#privacy,#reservation,#terms{scroll-margin-top:96px}

/* ── Policy clauses ─────────────────────────────────────────────────── */
.clause{display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6) 0;border-top:1px solid var(--border-hairline)}
.clause:last-child{border-bottom:1px solid var(--border-hairline)}