@charset "utf-8";

/*
Theme Name: Hueora - Personal Stylist & Wardrobe Consultant HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Page Turn-In & Style Match
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Main Bar
   3.3 Main Menu
   3.4 Split Menu
   3.5 Home Mega Menu
   3.6 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Arrows & Tabs
   7.2 Chips & Checks
   7.3 Accordion
   7.4 Post Cards
   7.5 Tables, Steps & Days
8. Cards
   8.1 Package Cards
   8.2 Stylist Cards
   8.3 Lookbook Cards
   8.4 Stats, Steps & Voices
   8.5 Season Cards
9. Home One
   9.1 Hero Slider
   9.2 Steps & Colour
   9.3 Lookbook Mosaic
   9.4 The Edit
   9.5 Founder & Bands
10. Home Two
   10.1 Portrait Strip
   10.2 Your Season
   10.3 Seasons, Quiz & Lookbooks
11. Home Three
   11.1 Boxed Hero
   11.2 The Edit Book
   11.3 Keep, Tailor, Donate
   11.4 Hours, Tailor & Voices
12. Inner Pages
   12.1 Sidebar & Widgets
   12.2 Services
   12.3 Session Single
   12.4 Packages & The Builder
13. Inner Page Sections
   13.1 Booking Wizard
   13.2 Diary Calendar & Times
   13.3 Photo Frames
   13.4 Style Quiz
   13.5 Season Finder
   13.6 Closet Audit
   13.7 About, Team & Profile
   13.8 Contact & Client Area
14. Lookbooks, Gallery & Stories
   14.1 Lookbook Listing
   14.2 Lookbook Singles
   14.3 Style Gallery
   14.4 Stories, Process & Bands
15. Blog & Account
   15.1 Blog List
   15.2 Blog Details
   15.3 Account Pages
   15.4 Coming Soon & 404
16. Subheader
17. Footer
*/

/*======================
1. General
========================*/
:root {
  /* brand (the same in both themes) */
  --cs-ink: #141212;
  --cs-ink-rgb: 20, 18, 18;
  --cs-white: #FFFFFF;
  /* the base's gold: big Playfair numerals, rules, the hanger hook, words laid over photographs */
  --cs-gold: #8CCFC4;
  --cs-gold-rgb: 140, 207, 196;
  /* lipstick rouge: the style-match ring, quiz picks, "most booked" flags */
  --cs-rouge: #B8324B;
  --cs-rouge-rgb: 184, 50, 75;
  /* the diary's signals */
  --cs-free: #3F8F64;
  --cs-hold: #D19A2A;
  --cs-booked: #B8324B;
  /* semantic: white is the default; [data-theme="dark"] is the evening studio */
  --cs-bg: #FFFFFF;
  --cs-bg-rgb: 255, 255, 255;
  --cs-band: #F7F2ED;
  --cs-band-rgb: 247, 242, 237;
  --cs-plate: #F1EAE3;
  --cs-surface: #FFFFFF;
  --cs-surface-rgb: 255, 255, 255;
  --cs-heading: #141212;
  --cs-heading-rgb: 20, 18, 18;
  --cs-text: #5E5853;
  --cs-muted: #6B645E;
  --cs-line: #EAE3DC;
  --cs-line-2: rgba(20, 18, 18, 0.2);
  --cs-field: #F6F1EC;
  --cs-tonal: rgba(20, 18, 18, 0.055);
  --cs-tonal-2: rgba(20, 18, 18, 0.1);
  --cs-primary: #141212;
  --cs-on-primary: #FFFFFF;
  --cs-gold-text: #3E8177;
  --cs-rouge-text: #A62B43;
  --cs-free-text: #24704A;
  --cs-booked-text: #A62B43;
  --cs-hold-text: #1F726A;
  --cs-night: #141212;
  --cs-night-rgb: 20, 18, 18;
  --cs-shadow: 0 18px 44px rgba(20, 18, 18, 0.08);
  --cs-shadow-lg: 0 30px 70px rgba(20, 18, 18, 0.16);
  --cs-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* type: the base's Montserrat for headings and copy, its Playfair Display italic for the voice */
  --cs-ff-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --cs-ff-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --cs-ff-accent: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cs-fs-h1: clamp(36px, 4.3vw, 74px);
  --cs-fs-h2: clamp(28px, 2.75vw, 46px);
  --cs-fs-h3: clamp(19px, 1.4vw, 24px);
  --cs-fs-h4: 19px;
  --cs-fs-h5: 16.5px;
  --cs-fs-h6: 13px;
  /* WebGL Swatch Rain: the swatches' two colours and strength */
  --gl-1: #8CCFC4;
  --gl-2: #B8324B;
  --gl-alpha: 0.5;
}
[data-theme="dark"] {
  --cs-bg: #121010;
  --cs-bg-rgb: 18, 16, 16;
  --cs-band: #1A1716;
  --cs-band-rgb: 26, 23, 22;
  --cs-plate: #24201F;
  --cs-surface: #1C1918;
  --cs-surface-rgb: 28, 25, 24;
  --cs-heading: #F4EFEA;
  --cs-heading-rgb: 244, 239, 234;
  --cs-text: #BDB5AE;
  --cs-muted: #A99F97;
  --cs-line: rgba(244, 239, 234, 0.12);
  --cs-line-2: rgba(244, 239, 234, 0.24);
  --cs-field: #221E1D;
  --cs-tonal: rgba(244, 239, 234, 0.08);
  --cs-tonal-2: rgba(244, 239, 234, 0.14);
  --cs-primary: #F4EFEA;
  --cs-on-primary: #141212;
  --cs-gold-text: #9DD7D0;
  --cs-rouge-text: #F0708A;
  --cs-free-text: #7DCFA3;
  --cs-booked-text: #F0708A;
  --cs-hold-text: #8ADED4;
  --cs-night: #0C0A0A;
  --cs-night-rgb: 12, 10, 10;
  --cs-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  --cs-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
  --gl-1: #8CCFC4;
  --gl-2: #F0708A;
  --gl-alpha: 0.42;
}
/* bands that stay dark in both themes (the footer, the testimonial band, the night bands) */
.is-night {
  --cs-heading: #F4EFEA;
  --cs-heading-rgb: 244, 239, 234;
  --cs-text: rgba(244, 239, 234, 0.76);
  --cs-muted: rgba(244, 239, 234, 0.68);
  --cs-line: rgba(244, 239, 234, 0.12);
  --cs-line-2: rgba(244, 239, 234, 0.26);
  --cs-gold-text: #9DD7D0;
  --cs-rouge-text: #F0708A;
  --cs-free-text: #7DCFA3;
  --cs-booked-text: #F0708A;
  --cs-hold-text: #8ADED4;
  --cs-surface: #1E1B1A;
  --cs-surface-rgb: 30, 27, 26;
  --cs-plate: #272322;
  --cs-field: rgba(244, 239, 234, 0.07);
  --cs-tonal: rgba(244, 239, 234, 0.09);
  --cs-tonal-2: rgba(244, 239, 234, 0.16);
  --cs-primary: #F4EFEA;
  --cs-on-primary: #141212;
  --gl-1: #8CCFC4;
  --gl-2: #F0708A;
  --gl-alpha: 0.24;
  position: relative;
  isolation: isolate;
  background-color: var(--cs-night);
  color: var(--cs-text);
}
/* a night section keeps its WebGL layer inside itself */
section.is-night {
  overflow: clip;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cs-bg);
  color: var(--cs-text);
  font-family: var(--cs-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--cs-ease), background-color 0.3s var(--cs-ease);
}
a:hover {
  color: var(--cs-gold-text);
}
strong,
b {
  font-weight: 600;
  color: var(--cs-heading);
}
::selection {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
:focus-visible {
  outline: 2px solid var(--cs-heading);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--cs-gold-rgb), 0.85);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cs-heading-rgb), 0.28) transparent;
}

/*----- 1.1 Typography -----*/
/* the base's voice: Montserrat 800 capitals for the big titles, Title Case below them; Playfair italics speak */
h1, h2, h3, h4, h5, h6,
.cs-h1, .cs-h2, .cs-h3, .cs-h4, .cs-h5, .cs-h6 {
  margin: 0;
  color: var(--cs-heading);
  font-family: var(--cs-ff-head);
  font-weight: 700;
}
h1,
.cs-h1 {
  font-size: var(--cs-fs-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
h2,
.cs-h2 {
  font-size: var(--cs-fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
h3,
.cs-h3 {
  font-size: var(--cs-fs-h3);
  line-height: 1.25;
}
h4,
.cs-h4 {
  font-size: var(--cs-fs-h4);
  line-height: 1.3;
}
h5,
.cs-h5 {
  font-size: var(--cs-fs-h5);
  line-height: 1.35;
}
h6,
.cs-h6 {
  font-size: var(--cs-fs-h6);
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* a heading set as Title Case (the h2 look without the capitals) */
.cs-tc {
  text-transform: none;
  letter-spacing: -0.01em;
}
/* set lines: a title's lines never re-wrap */
.line {
  display: block;
  white-space: nowrap;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
/* the lead under a title, a step larger */
.cs-lead {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--cs-text);
}
/* Playfair italic: the base's voice for eyebrows, subtitles, numerals and quotes */
.cs-it {
  font-family: var(--cs-ff-accent);
  font-style: italic;
  font-weight: 400;
}
/* figures: prices, dates, counts */
.cs-num {
  font-family: var(--cs-ff-head);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.cs-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* R3 word rise: each word climbs out of a padded mask (main.js splits the words) */
.cs-words .w {
  display: inline-block;
  overflow: hidden;
  padding: 0.12em 0.2em 0.22em 0.1em;
  margin: -0.12em -0.2em -0.22em -0.1em;
  vertical-align: top;
}
.cs-words .w > span {
  display: inline-block;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
/* the base's pale band, warmed to powder */
.cs-bg-band {
  background-color: var(--cs-band);
}
/* photo band: one style everywhere (a cover photo under an ink wash from the copy side, white copy) */
.cs-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--cs-ink);
  --cs-heading: #FFFFFF;
  --cs-heading-rgb: 255, 255, 255;
  --cs-text: rgba(255, 255, 255, 0.86);
  --cs-muted: rgba(255, 255, 255, 0.76);
  --cs-gold-text: #9DD7D0;
  --cs-line: rgba(255, 255, 255, 0.2);
  --cs-line-2: rgba(255, 255, 255, 0.32);
  --cs-primary: #FFFFFF;
  --cs-on-primary: #141212;
  --cs-tonal: rgba(255, 255, 255, 0.12);
  --cs-tonal-2: rgba(255, 255, 255, 0.2);
  color: var(--cs-text);
}
.cs-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 18, 18, 0.84) 0%, rgba(20, 18, 18, 0.6) 46%, rgba(20, 18, 18, 0.14) 100%);
}
.cs-photo-band.is-center::after {
  background: radial-gradient(ellipse at 50% 55%, rgba(20, 18, 18, 0.66) 0%, rgba(20, 18, 18, 0.52) 60%, rgba(20, 18, 18, 0.4) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the base's title block: a small italic eyebrow, the 800 capitals, an italic line set in from the left and a short
   ink rule */
.cs-title {
  margin-bottom: 60px;
}
.cs-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}
.cs-title h2 {
  max-width: 980px;
}
.cs-sub {
  display: block;
  margin: 12px 0 0 1.8em;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: clamp(17px, 1.2vw, 20px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}
.cs-rule {
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 24px;
  background: var(--cs-heading);
  transform-origin: left center;
}
.cs-title .cs-lead {
  max-width: 680px;
  margin: 24px 0 0;
}
.cs-title.text-center h2,
.cs-title.text-center .cs-lead {
  margin-left: auto;
  margin-right: auto;
}
.cs-title.text-center .cs-sub {
  margin-left: 0;
}
.cs-title.text-center .cs-rule,
.text-center .cs-rule {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}
.cs-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.cs-title.is-split .cs-lead {
  max-width: 480px;
  margin: 0;
}
/* the base's gold Playfair numeral with its short rule */
.cs-numeral {
  position: relative;
  display: inline-block;
  color: var(--cs-gold);
  font-family: var(--cs-ff-accent);
  font-size: clamp(64px, 5.4vw, 96px);
  font-weight: 400;
  line-height: 0.9;
}
.cs-numeral::after {
  content: "";
  position: absolute;
  left: 40%;
  bottom: 2px;
  width: 0.4em;
  height: 2px;
  background: var(--cs-heading);
}

/*----- 1.4 Buttons & Links -----*/
/* friendly pills (the base's square boxes rounded): ink face, the hover takes the base's gold, lifts, and the arrow
   slides out while its twin slides in */
.cs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: 100px;
  background: var(--cs-primary);
  color: var(--cs-on-primary);
  font-family: var(--cs-ff-head);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--cs-ease), color 0.35s var(--cs-ease), box-shadow 0.35s var(--cs-ease), transform 0.35s var(--cs-ease);
}
.cs-btn i {
  position: relative;
  font-size: 12px;
  transition: transform 0.4s var(--cs-ease), opacity 0.3s ease;
}
.cs-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -24px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cs-btn:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
  box-shadow: 0 14px 30px rgba(var(--cs-gold-rgb), 0.32);
  transform: translateY(-2px);
}
.cs-btn:hover i.fa-arrow-right {
  transform: translateX(24px);
}
.cs-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.cs-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
/* tonal: a pale face, ink letters (never a hairline outline) */
.cs-btn.is-tonal {
  background: var(--cs-tonal);
  color: var(--cs-heading);
}
.cs-btn.is-tonal i:first-child {
  color: var(--cs-rouge-text);
}
.cs-btn.is-tonal:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cs-btn.is-tonal:hover i:first-child {
  color: var(--cs-ink);
}
.cs-btn.is-light {
  background: #FFFFFF;
  color: var(--cs-ink);
}
.cs-btn.is-gold {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cs-btn.is-gold:hover {
  background: #FFFFFF;
  color: var(--cs-ink);
}
.cs-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 13px;
}
.cs-btn.is-block {
  width: 100%;
}
.cs-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* "read more": the base's Playfair italic link on a hairline that lengthens */
.cs-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
}
.cs-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 0.45s var(--cs-ease), background-color 0.3s ease;
}
.cs-more i {
  font-size: 11px;
  transition: transform 0.35s var(--cs-ease);
}
.cs-more:hover {
  color: var(--cs-gold-text);
}
.cs-more:hover::after {
  transform: scaleX(0.4);
}
.cs-more:hover i {
  transform: translateX(5px);
}
.cs-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}

/*----- 1.5 Forms -----*/
.cs-field {
  position: relative;
  margin-bottom: 20px;
}
.cs-field label,
.cs-label {
  display: block;
  margin-bottom: 8px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* fields keep their border; a warm face and a gold ring on focus */
.cs-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 48px 0 20px;
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  background: var(--cs-field);
  color: var(--cs-heading);
  font-family: var(--cs-ff-body);
  font-size: 15.5px;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.cs-bg-band .cs-input {
  background: var(--cs-surface);
}
.cs-input[type="number"] {
  padding-right: 12px;
}
textarea.cs-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.cs-input::placeholder {
  color: var(--cs-muted);
}
.cs-input:focus {
  border-color: var(--cs-heading);
  box-shadow: 0 0 0 4px rgba(var(--cs-gold-rgb), 0.35);
  outline: 0;
}
.cs-input.is-invalid {
  border-color: var(--cs-booked);
  box-shadow: 0 0 0 3px rgba(var(--cs-rouge-rgb), 0.16);
}
.cs-input[type="date"] {
  color-scheme: light;
}
[data-theme="dark"] .cs-input[type="date"],
.is-night .cs-input[type="date"] {
  color-scheme: dark;
}
.cs-field > i {
  position: absolute;
  right: 20px;
  top: 49px;
  color: var(--cs-heading);
  font-size: 14px;
  opacity: 0.65;
  pointer-events: none;
}
.cs-field.is-area > i {
  top: 52px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--cs-muted);
}
.form-status.is-ok {
  color: var(--cs-free-text);
}
.form-status.is-error {
  color: var(--cs-booked-text);
}
.cs-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.cs-check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  accent-color: var(--cs-ink);
}
[data-theme="dark"] .cs-check input,
.is-night .cs-check input {
  accent-color: var(--cs-gold);
}
/* a native range slider in the house colours */
.cs-range {
  width: 100%;
  accent-color: var(--cs-ink);
}
[data-theme="dark"] .cs-range {
  accent-color: var(--cs-gold);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cs-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--cs-ease);
}
.cs-social a:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
  transform: translateY(-3px);
}
/* a round portrait beside a name */
.cs-face {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.cs-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  font-size: 20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.4s var(--cs-ease), background-color 0.4s ease, color 0.4s ease;
}
.cs-play i {
  margin-left: 4px;
}
.cs-play:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
  transform: scale(1.06);
}
/* the diary's signals: a round dot and its line */
.cs-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cs-muted);
}
.cs-dot.is-free,
[data-state="free"] > .cs-dot,
[data-state="open"] > .cs-dot {
  background: var(--cs-free);
  box-shadow: 0 0 0 4px rgba(63, 143, 100, 0.18);
}
.cs-dot.is-hold,
[data-state="hold"] > .cs-dot {
  background: var(--cs-hold);
  box-shadow: 0 0 0 4px rgba(209, 154, 42, 0.2);
}
.cs-dot.is-booked,
[data-state="booked"] > .cs-dot {
  background: var(--cs-booked);
  box-shadow: 0 0 0 4px rgba(184, 50, 75, 0.18);
}
.cs-dot.is-closed,
[data-state="closed"] > .cs-dot {
  background: var(--cs-muted);
}
.cs-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cs-heading);
}
/* rating stars (the apparel rule: yellow) */
.cs-stars {
  display: inline-flex;
  gap: 3px;
  color: #2BD7C9;
  font-size: 12px;
}
/* a small tag */
.cs-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-head);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cs-flag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 100px;
  background: var(--cs-rouge);
  color: #FFFFFF;
  font-family: var(--cs-ff-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* label / value rows: prices, hours, what a package includes (never bullet pills) */
.cs-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cs-line);
  font-size: 15px;
}
.cs-rows li:first-child {
  border-top: 1px solid var(--cs-line);
}
.cs-rows li > span {
  color: var(--cs-muted);
  font-family: var(--cs-ff-head);
  font-size: 13.5px;
  font-weight: 500;
}
.cs-rows li > b {
  color: var(--cs-heading);
  font-family: var(--cs-ff-head);
  font-size: 15px;
  font-weight: 600;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
/* colour swatches (22px for touch) and a row of them */
.cs-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(var(--cs-ink-rgb), 0.12);
}
.cs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cs-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 100px;
  background: var(--cs-ink);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: var(--cs-shadow-lg);
  transform: translate(-50%, 160%);
  transition: transform 0.5s var(--cs-ease);
}
.cs-toast i {
  color: var(--cs-gold);
}
.cs-toast.is-shown {
  transform: translate(-50%, 0);
}
.cs-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--cs-ink);
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--cs-ease), background-color 0.3s ease;
}
[data-theme="dark"] .cs-back-top {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cs-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cs-back-top:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
/* WebGL layers sit under a section's content */
.cs-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.cs-gl.is-on {
  opacity: 1;
}
/* the mark in two inks */
.cs-ink-pair .ink-light,
[data-theme="dark"] .cs-ink-pair .ink-dark,
.is-night .cs-ink-pair .ink-dark {
  display: none;
}
[data-theme="dark"] .cs-ink-pair .ink-light,
.is-night .cs-ink-pair .ink-light {
  display: inline-block;
}
/* avatar groups: four overlapping faces, a +N bubble and two short lines */
.cs-avatars {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
}
.cs-avatars .faces {
  display: flex;
}
.cs-avatars .faces img,
.cs-avatars .faces .more {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--cs-bg);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.cs-avatars .faces img:first-child {
  margin-left: 0;
}
.cs-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cs-gold);
  color: var(--cs-ink);
  font-size: 12.5px;
  font-weight: 700;
}
.cs-avatars .txt {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cs-muted);
}
.cs-avatars .txt b {
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 700;
}
.cs-bg-band .cs-avatars .faces img,
.cs-bg-band .cs-avatars .faces .more {
  border-color: var(--cs-band);
}
.is-night .cs-avatars .faces img,
.is-night .cs-avatars .faces .more,
.cs-photo-band .cs-avatars .faces img,
.cs-photo-band .cs-avatars .faces .more {
  border-color: rgba(20, 18, 18, 0.9);
}
.cs-avatars.is-centered {
  margin-left: auto;
  margin-right: auto;
}
/* the real Google average and count */
.cs-review {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cs-review > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  font-size: 17px;
}
.cs-review .rv-score {
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 40px;
  line-height: 1;
}
.cs-review .rv-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-review small {
  color: var(--cs-muted);
  font-size: 13px;
}

/*----- 1.7 Page Turn-In & Style Match -----*/
/* Page Turn-In: a photo turns in from the right like a lookbook page, hinged on its left edge (the right one in
   RTL); a page shade on it fades as it lands. main.js sets the turn; nothing is hidden by CSS. */
.cs-turn {
  position: relative;
  display: block;
  overflow: hidden;
}
.cs-turn > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  backface-visibility: hidden;
}
.cs-turn > .turn-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(20, 18, 18, 0.5) 0%, rgba(20, 18, 18, 0.12) 46%, rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
}
/* the style-match ring: fills on hover to the card's match with the saved style profile */
.cs-match {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cs-ink);
  box-shadow: 0 10px 24px rgba(20, 18, 18, 0.14);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.45s var(--cs-ease);
  pointer-events: none;
}
.cs-match .ring {
  --m: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--cs-rouge) calc(var(--m) * 3.6deg), rgba(20, 18, 18, 0.1) 0);
}
.cs-match .ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #FFFFFF;
}
.cs-match .ring b {
  position: relative;
  color: var(--cs-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cs-match .lbl {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.cs-match .lbl small {
  color: #6B645E;
  font-size: 10.5px;
  font-weight: 500;
}
.has-match:hover .cs-match,
.has-match:focus-within .cs-match {
  opacity: 1;
  transform: none;
}

/*======================
2. Preloader
========================*/
/* Colour Fan: a colour-analysis swatch fan opens from its pin, the blades fold back except one, which turns upright
   bearing the mark; the name comes up under it and the panel lifts (main.js runs the fan) */
.cs-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--cs-band);
  pointer-events: none;
}
.js .cs-preloader {
  pointer-events: auto;
}
.no-js .cs-preloader,
.cs-preloader.is-done {
  display: none;
}
/* the fan: every blade turns on the same pin near its foot */
.pre-fan {
  position: relative;
  width: 0;
  height: 300px;
  margin-top: 40px;
}
.fan-blade {
  position: absolute;
  left: -27px;
  bottom: 0;
  width: 54px;
  height: 280px;
  border-radius: 10px;
  background: var(--cs-plate);
  box-shadow: 0 10px 26px rgba(20, 18, 18, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transform-origin: 50% calc(100% - 27px);
}
/* the white chip at each blade's foot, where a deck prints its numbers */
.fan-blade::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 42px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
}
.fan-blade.is-mark {
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 30px;
  background: var(--cs-ink);
}
.fan-blade.is-mark::after {
  background: rgba(255, 255, 255, 0.12);
}
.fan-blade.is-mark img {
  width: 30px;
  height: auto;
}
.fan-pin {
  position: absolute;
  left: -8px;
  bottom: 19px;
  z-index: 5;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cs-gold);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 4px 10px rgba(20, 18, 18, 0.2);
}
.pre-word {
  height: 34px;
  width: auto;
  margin-top: 44px;
}
.pre-word.logo-light,
[data-theme="dark"] .pre-word.logo-main {
  display: none;
}
[data-theme="dark"] .pre-word.logo-light {
  display: block;
}
.pre-line {
  margin-top: 14px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 17px;
  font-style: italic;
}

/*======================
3. Header
========================*/
/* Hueora's header in three moods: style one is the base's black top line over the white bar (logo left, the small
   menu right; Home 1 and the inner pages), style two the white bar alone with the menu centred (Home 2), style three
   the base's centred logo between two halves of the menu (Home 3). */
.cs-header {
  position: relative;
  z-index: 1000;
  --hd-bar: var(--cs-bg);
  --hd-ink: var(--cs-heading);
  --hd-hover: var(--cs-heading);
  --hd-icon: var(--cs-tonal);
  --hd-line: var(--cs-line);
  --hd-top: #141212;
  --hd-top-ink: rgba(255, 255, 255, 0.78);
}
.cs-header .wide {
  display: flex;
  align-items: center;
  padding: 0 44px;
}
.cs-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.cs-logo img {
  height: 30px;
  width: auto;
}
.cs-logo .logo-light,
[data-theme="dark"] .cs-logo .logo-main {
  display: none;
}
[data-theme="dark"] .cs-logo .logo-light {
  display: block;
}
/* style two: the menu sits in the middle of the bar */
.header-style-two .cs-nav {
  margin: 0 auto;
}
.header-style-two .header-right {
  margin-left: 0;
}

/*----- 3.1 Top Bar -----*/
/* the base's black line: the studio open now and the next free appointment, the address; italic links, currency,
   language */
.header-top {
  --hd-ink: #FFFFFF;
  --hd-icon: rgba(255, 255, 255, 0.1);
  height: 40px;
  background: var(--hd-top);
  color: var(--hd-top-ink);
  font-size: 13.5px;
  overflow: visible;
  transition: height 0.4s var(--cs-ease), opacity 0.3s ease;
}
.header-top .wide {
  justify-content: space-between;
  height: 100%;
  gap: 30px;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: var(--hd-ink);
}
.cs-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cs-live b,
.header-top b {
  font-weight: 500;
  color: var(--hd-ink);
}
.header-top .top-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-top .top-light i {
  color: var(--hd-ink);
  font-size: 12px;
}
.header-top .top-right > a {
  position: relative;
  font-family: var(--cs-ff-accent);
  font-size: 14px;
  font-style: italic;
}
.header-top .cs-lang .lang-btn,
.header-top .cs-cur .cur-btn {
  height: 28px;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-family: var(--cs-ff-head);
  font-size: 11px;
}
.header-top .cs-lang .lang-btn:hover,
.header-top .cs-lang .lang-btn[aria-expanded="true"],
.header-top .cs-cur .cur-btn:hover,
.header-top .cs-cur .cur-btn[aria-expanded="true"] {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cs-gold);
  transform: translateY(-50%);
}

/*----- 3.2 Main Bar -----*/
.header-main {
  position: relative;
  background: var(--hd-bar);
  border-bottom: 1px solid var(--hd-line);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.header-main .wide {
  height: 90px;
  gap: 40px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hd-icon);
  color: var(--hd-ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cs-theme-toggle .ti-sun,
[data-theme="dark"] .cs-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .cs-theme-toggle .ti-sun {
  display: inline-block;
}
.header-actions .header-btn {
  margin-left: 8px;
}
/* the base's menu mark: three short lines, the middle one shorter */
.cs-menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cs-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hd-ink);
  transition: width 0.3s var(--cs-ease);
}
.cs-menu-toggle span:nth-child(2) {
  width: 14px;
}
.cs-menu-toggle span:nth-child(3) {
  width: 18px;
}
.cs-menu-toggle:hover span {
  width: 22px;
}

/*----- 3.3 Main Menu -----*/
/* the base's menu: small Montserrat capitals, tracked under 0.1em; no underline - hover and the current page by colour
   only */
.cs-nav {
  margin-left: auto;
}
.cs-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-nav li {
  position: relative;
}
.cs-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 35px 0;
  color: var(--hd-ink);
  font-family: var(--cs-ff-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.66;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.cs-nav > ul > li > a i {
  font-size: 7px;
  opacity: 0.7;
  transition: transform 0.3s var(--cs-ease);
}
.cs-nav > ul > li:hover > a,
.cs-nav > ul > li.active > a {
  color: var(--hd-hover);
  opacity: 1;
}
.cs-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.cs-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -28px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  border-radius: 4px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--cs-ease), transform 0.35s var(--cs-ease), visibility 0.3s;
}
.cs-nav .sub-menu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 3px;
  background: var(--cs-gold);
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.cs-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.cs-nav li:hover > .sub-menu,
.cs-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cs-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 28px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-head);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s var(--cs-ease), padding 0.35s var(--cs-ease);
}
.cs-nav .sub-menu a i {
  font-size: 8px;
  color: var(--cs-muted);
}
.cs-nav .sub-menu li:hover > a,
.cs-nav .sub-menu li.active > a {
  padding-left: 36px;
  color: var(--cs-heading);
}
.cs-nav .sub-menu .sub-menu {
  top: -16px;
  left: 100%;
}
.cs-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}

/*----- 3.4 Split Menu -----*/
/* style three: the logo centred between the two halves of the menu (the base's centred-logo home) */
.header-style-three .header-main .wide {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
}
.header-style-three .cs-nav {
  margin: 0;
}
.header-style-three .cs-nav.is-left > ul {
  justify-content: flex-end;
}
.header-style-three .hd-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.header-style-three .cs-logo {
  justify-self: center;
}
.header-style-three .cs-logo img {
  height: 34px;
}
.header-style-three .header-right {
  margin: 0;
}

/*----- 3.5 Home Mega Menu -----*/
.cs-nav .has-mega {
  position: static;
}
.cs-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(980px, calc(100vw - 60px));
  padding: 30px;
  border-radius: 4px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--cs-ease), transform 0.35s var(--cs-ease), visibility 0.3s;
}
.cs-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.cs-nav .mega-menu::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 3px;
  background: var(--cs-gold);
}
.cs-nav .has-mega:hover > .mega-menu,
.cs-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mega-card {
  display: block;
  color: var(--cs-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  background: var(--cs-plate);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--cs-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 14px;
  font-style: italic;
}
.mega-meta b {
  font-family: var(--cs-ff-head);
  font-size: 14px;
  font-weight: 700;
}
.mega-card.is-current .mega-meta small,
.mega-card:hover .mega-meta small {
  color: var(--cs-heading);
}
.mega-card.is-current .shot,
.mega-card:hover .shot {
  box-shadow: 0 0 0 3px var(--cs-gold);
}

/*----- 3.6 Sticky Header -----*/
.cs-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --hd-bar: var(--cs-bg);
  --hd-ink: var(--cs-heading);
  --hd-hover: var(--cs-heading);
  --hd-icon: var(--cs-tonal);
  --hd-line: var(--cs-line);
  animation: cs-header-in 0.6s var(--cs-ease) both;
}
.cs-header.is-sticky .header-top {
  height: 0;
  opacity: 0;
  overflow: hidden;
  border: 0;
}
.cs-header.is-sticky .header-main {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.cs-header.is-sticky .header-main .wide {
  height: 74px;
}
.cs-header.is-sticky .cs-nav > ul > li > a {
  padding: 27px 0;
}
.cs-header.is-sticky .cs-logo img {
  height: 26px;
}
.cs-header-spacer {
  display: none;
}
.cs-header-spacer.is-on {
  display: block;
}
@keyframes cs-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.cs-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--cs-surface);
  transform: translateX(105%);
  transition: transform 0.6s var(--cs-ease), box-shadow 0.6s var(--cs-ease);
  overflow-y: auto;
}
/* the shadow only while open: parked off the right edge it would still bleed into the page */
.cs-offcanvas.open {
  box-shadow: var(--cs-shadow-lg);
  transform: none;
}
.cs-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(12, 12, 12, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.cs-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--cs-line);
}
.offcanvas-head .cs-logo img {
  height: 28px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--cs-ease);
}
.offcanvas-close:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--cs-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--cs-heading);
  font-family: var(--cs-ff-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--cs-gold-text);
  font-size: 12px;
  transition: transform 0.35s var(--cs-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--cs-line);
  color: var(--cs-text);
  font-size: 15.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--cs-gold);
  color: var(--cs-heading);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--cs-ff-accent);
  font-size: 16px;
  font-style: italic;
  color: var(--cs-gold);
}
.oc-phone {
  color: #FFFFFF;
  font-family: var(--cs-ff-head);
  font-size: 22px;
  font-weight: 500;
}
.oc-mail {
  color: var(--cs-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.offcanvas-foot .header-icon {
  --hd-icon: rgba(255, 255, 255, 0.1);
  --hd-ink: #FFFFFF;
}
.oc-live {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 32px;
  background: var(--cs-band);
  color: var(--cs-heading);
  font-family: var(--cs-ff-body);
  font-size: 14px;
}
.offcanvas-foot .cs-cur .cur-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.cs-select {
  position: relative;
}
.cs-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.cs-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--cs-line);
  border-radius: 8px;
  background: var(--cs-field);
  font-size: 15px;
  text-align: left;
  color: var(--cs-heading);
  transition: border-color 0.3s var(--cs-ease);
}
.cs-select.is-open .select-button,
.cs-select .select-button:hover {
  border-color: var(--cs-heading);
}
.cs-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cs-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--cs-gold-text);
  transition: transform 0.35s var(--cs-ease);
}
.cs-select.is-open .select-button i {
  transform: rotate(180deg);
}
.cs-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--cs-surface);
  border-top: 3px solid var(--cs-gold);
  box-shadow: var(--cs-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--cs-ease), transform 0.3s var(--cs-ease), visibility 0.3s;
}
.cs-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 3px solid var(--cs-gold);
  transform: translateY(-10px);
}
.cs-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cs-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--cs-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--cs-ease), color 0.2s var(--cs-ease);
}
.cs-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-gold-text);
}
.cs-select .select-option .option-meta.is-none {
  color: var(--cs-muted);
}
.cs-select .select-option.is-focused,
.cs-select .select-option:hover {
  background-color: var(--cs-plate);
}
.cs-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.cs-select .select-option.is-selected {
  color: var(--cs-gold-text);
}
.cs-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--cs-gold-text);
}
.cs-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--cs-plate);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.cs-lang {
  position: relative;
  flex-shrink: 0;
}
.cs-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--cs-ff-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cs-lang .lang-btn:hover,
.cs-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--cs-ink);
}
.cs-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.cs-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.cs-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.cs-lang.is-icon .lang-btn {
  height: 46px;
  padding: 0 15px;
  background: var(--cs-plate);
  color: var(--cs-heading);
}
.cs-lang.is-icon .lang-btn:hover,
.cs-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cs-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 0;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-lg);
  font-family: var(--cs-ff-body);
  text-align: start;
  white-space: normal;
}
.cs-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.cs-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.cs-lang .lang-menu[hidden] {
  display: none;
}
.cs-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-muted);
}
.cs-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--cs-line);
}
.cs-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cs-heading);
  font-family: var(--cs-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.cs-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cs-muted);
}
.cs-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--cs-gold-text);
  opacity: 0;
}
.cs-lang .lang-item:hover,
.cs-lang .lang-item[aria-pressed="true"] {
  background: var(--cs-plate);
}
.cs-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.cs-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.cs-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--cs-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cs-muted);
}
/* the currency picker beside it: the same face, a menu of three currencies; every price on the page repaints */
.cs-cur {
  position: relative;
  flex-shrink: 0;
}
.cs-cur .cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--cs-ff-head);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cs-cur .cur-btn b {
  font-weight: 500;
  color: var(--cs-hd-ink, inherit);
}
.cs-cur .cur-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.cs-cur .cur-btn:hover,
.cs-cur .cur-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--cs-ink);
}
.cs-cur .cur-btn:hover b,
.cs-cur .cur-btn[aria-expanded="true"] b {
  color: inherit;
}
.cs-cur .cur-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.cs-cur.is-up .cur-btn {
  height: 46px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.1);
}
.cs-cur .cur-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 232px;
  padding: 10px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-lg);
  font-family: var(--cs-ff-body);
  text-align: start;
}
.cs-cur.is-up .cur-menu {
  top: auto;
  bottom: calc(100% + 12px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.cs-cur .cur-menu[hidden] {
  display: none;
}
.cs-cur .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-muted);
}
.cs-cur .cur-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  color: var(--cs-heading);
  font-size: 14.5px;
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}
.cs-cur .cur-item b {
  width: 18px;
  color: var(--cs-gold-text);
  font-family: var(--cs-ff-head);
  font-weight: 500;
}
.cs-cur .cur-item i {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--cs-gold-text);
  opacity: 0;
}
.cs-cur .cur-item:hover,
.cs-cur .cur-item[aria-pressed="true"] {
  background: var(--cs-plate);
}
.cs-cur .cur-item[aria-pressed="true"] i {
  opacity: 1;
}

/*======================
7. Components
========================*/
/*----- 7.1 Arrows & Tabs -----*/
/* the base's slider arrows, rounded: a white disc with an ink chevron, white on photographs and the night bands */
.cs-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cs-surface);
  color: var(--cs-heading);
  font-size: 13px;
  box-shadow: 0 8px 22px rgba(20, 18, 18, 0.08);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--cs-ease);
}
.cs-arrow:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
  transform: translateY(-2px);
}
.cs-arrow.is-light,
.is-night .cs-arrow,
.cs-photo-band .cs-arrow {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cs-arrow.is-light:hover,
.is-night .cs-arrow:hover,
.cs-photo-band .cs-arrow:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cs-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.rail-arrows {
  display: flex;
  gap: 10px;
}
.title-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
  text-align: end;
}
/* the slide counter: 01 - 03 in Playfair italics on a short rule */
.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 17px;
  font-style: italic;
  font-variant-numeric: tabular-nums;
}
.hero-count i {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--cs-line-2);
}
/* filter tabs: the base's italic tab links, the active one underlined in gold */
.cs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 30px;
  border-bottom: 1px solid var(--cs-line);
}
.cs-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px 14px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 17px;
  font-style: italic;
  transition: color 0.3s ease;
}
.cs-tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--cs-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--cs-ease);
}
.cs-tabs button:hover,
.cs-tabs button.is-active {
  color: var(--cs-heading);
}
.cs-tabs button.is-active::after {
  transform: scaleX(1);
}
.cs-count {
  color: var(--cs-muted);
  font-size: 14px;
  font-weight: 500;
}
.cs-empty {
  margin: 40px 0 0;
  text-align: center;
}
/* a segmented control: a tonal pill track, the pressed one in ink */
.cs-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 100px;
  background: var(--cs-tonal);
}
.cs-seg button {
  height: 40px;
  padding: 0 18px;
  border-radius: 100px;
  color: var(--cs-muted);
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cs-seg button:hover {
  color: var(--cs-heading);
}
.cs-seg button.is-on,
.cs-seg button.is-active {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--cs-heading);
  opacity: 0.25;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--cs-gold);
}
.is-hidden,
.is-unmatched {
  display: none !important;
}

/*----- 7.2 Chips & Checks -----*/
/* a tonal check chip (46px for touch): a pale face, the checked one in ink */
.cs-chip-check {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.cs-chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cs-chip-check > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--cs-tonal);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.cs-chip-check b {
  color: var(--cs-heading);
  font-size: 14px;
  font-weight: 600;
}
.cs-chip-check small {
  color: var(--cs-muted);
  font-size: 13px;
}
.cs-chip-check input:checked + span {
  background: var(--cs-primary);
}
.cs-chip-check input:checked + span b,
.cs-chip-check input:checked + span small {
  color: var(--cs-on-primary);
}
.cs-chip-check input:focus-visible + span {
  outline: 2px solid var(--cs-heading);
  outline-offset: 2px;
}
.cs-bg-band .cs-chip-check > span {
  background: var(--cs-surface);
}
.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* a size chip: 46px square for touch */
.cs-size {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.cs-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cs-size span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cs-size input:checked + span {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.cs-size input:focus-visible + span {
  outline: 2px solid var(--cs-heading);
  outline-offset: 2px;
}
/* a choice card (a package, a stylist, an add-on): a photo or a line, the name and the price; ink edge when on */
.cs-pick {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
}
.cs-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pick-face {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px;
  border-radius: 14px;
  background: var(--cs-tonal);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.pick-face img {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
}
.pick-face b {
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 700;
}
.pick-face small {
  color: var(--cs-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.pick-face .pick-price {
  margin-top: auto;
  padding-top: 6px;
  color: var(--cs-heading);
  font-size: 14px;
  font-weight: 600;
}
.pick-tick {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cs-surface);
  color: transparent;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(20, 18, 18, 0.12);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cs-pick input:checked ~ .pick-face {
  background: var(--cs-surface);
  box-shadow: inset 0 0 0 2px var(--cs-heading), var(--cs-shadow);
}
.cs-pick input:checked ~ .pick-tick {
  background: var(--cs-rouge);
  color: #FFFFFF;
}
.cs-pick input:focus-visible ~ .pick-face {
  outline: 2px solid var(--cs-heading);
  outline-offset: 2px;
}
.cs-bg-band .pick-face {
  background: var(--cs-surface);
}

/*----- 7.3 Accordion -----*/
.cs-accordion .acc-item {
  border-bottom: 1px solid var(--cs-line);
}
.cs-accordion .acc-item:first-child {
  border-top: 1px solid var(--cs-line);
}
.acc-title {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--cs-heading);
  font-family: var(--cs-ff-head);
  font-size: 16.5px;
  font-weight: 700;
  text-align: start;
}
.acc-head i {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  font-size: 11px;
  transition: transform 0.35s var(--cs-ease), background-color 0.3s ease, color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  background: var(--cs-gold);
  color: var(--cs-ink);
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 60px 24px 0;
}
.acc-body p {
  margin: 0;
}

/*----- 7.4 Post Cards -----*/
/* the base's post card: the photo, the italic date and author, the title, a line and "read more" */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pcd-img {
  display: block;
  aspect-ratio: 4 / 2.9;
}
.pcd-img img {
  transition: transform 0.9s var(--cs-ease);
}
.post-card:hover .pcd-img img {
  transform: scale(1.04);
}
.pcd-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px 0 0;
}
.pcd-meta {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.pcd-body h3 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.pcd-body p {
  font-size: 15px;
}
.pcd-body .cs-more {
  align-self: flex-start;
  margin-top: auto;
}

/*----- 7.5 Tables, Steps & Days -----*/
/* positioned, so the visually hidden labels in its cells scroll with it instead of widening the page */
.cs-table-wrap {
  position: relative;
  overflow-x: auto;
}
.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cs-table th,
.cs-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--cs-line);
  text-align: start;
  vertical-align: middle;
}
.cs-table thead th {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}
.cs-table tbody th {
  color: var(--cs-heading);
  font-size: 15.5px;
  font-weight: 700;
}
.cs-table tbody th small {
  display: block;
  margin-top: 4px;
  color: var(--cs-muted);
  font-size: 13.5px;
  font-weight: 400;
}
.cs-table td {
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* six steps on a hairline, each with its gold numeral */
.cs-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px;
  border-top: 1px solid var(--cs-line);
}
.cs-steps li {
  position: relative;
  padding-top: 30px;
}
.cs-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cs-gold);
}
.cs-steps .st-n {
  display: block;
  margin-bottom: 12px;
  color: var(--cs-gold);
  font-family: var(--cs-ff-accent);
  font-size: 44px;
  line-height: 1;
}
.cs-steps h3 {
  margin-bottom: 10px;
}
.cs-steps p {
  font-size: 15px;
}
/* the next free appointments (main.js fills them from the diaries) */
.free-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.free-days li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cs-tonal);
}
.free-days b {
  color: var(--cs-heading);
  font-size: 13px;
  font-weight: 700;
}
.free-days span {
  color: var(--cs-text);
  font-size: 14px;
}

/*======================
8. Cards
========================*/
/*----- 8.1 Package Cards -----*/
/* the base's product card, now a package: the photo on a plate, the italic hours and place, the capitals, the price */
.cs-pk {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}
.pk-photo {
  aspect-ratio: 4 / 5;
  background: var(--cs-plate);
}
.pk-photo img {
  object-position: center top;
  transition: transform 0.9s var(--cs-ease);
}
.cs-pk:hover .pk-photo img {
  transform: scale(1.05);
}
.pk-flag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
}
.pk-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px 0;
}
.pk-cat {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.pk-body h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pk-price {
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 600;
}

/*----- 8.2 Stylist Cards -----*/
/* the base's team card: the portrait, the capitals, a short rule and a line */
.cs-team {
  position: relative;
  height: 100%;
}
.tm-photo {
  aspect-ratio: 1 / 0.82;
  background: var(--cs-plate);
}
.tm-photo img {
  object-position: center 22%;
  transition: transform 0.9s var(--cs-ease);
}
.cs-team:hover .tm-photo img {
  transform: scale(1.05);
}
.tm-body {
  padding-top: 24px;
}
.tm-role {
  display: block;
  margin-bottom: 6px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.tm-body h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tm-body .cs-rule {
  width: 34px;
  margin: 16px 0;
}
.tm-body p {
  font-size: 15px;
}

/*----- 8.3 Lookbook Cards -----*/
.cs-look {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.lk-photo {
  aspect-ratio: 4 / 5;
  background: var(--cs-plate);
}
.lk-photo img {
  object-position: center 24%;
  transition: transform 0.9s var(--cs-ease);
}
.cs-look:hover .lk-photo img {
  transform: scale(1.05);
}
.lk-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding-top: 20px;
}
.lk-meta {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.lk-body h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lk-occ {
  margin: 0;
  font-size: 14.5px;
}
.lk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--cs-line);
}
.lk-foot .cs-swatch {
  width: 18px;
  height: 18px;
}
.lk-foot .cs-swatches {
  gap: 4px;
}
.lk-season {
  color: var(--cs-heading);
  font-size: 13px;
  font-weight: 600;
}
/* the base's post list row: a square photo, the italic date, the capitals, "read more" */
.cs-lrow {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--cs-line);
}
.lr-photo {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  overflow: hidden;
}
.lr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.7s var(--cs-ease);
}
.cs-lrow:hover .lr-photo img {
  transform: scale(1.06);
}
.lr-date {
  display: block;
  margin-bottom: 4px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.cs-lrow h3 {
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/*----- 8.4 Stats, Steps & Voices -----*/
/* the base's gold numerals band: the numeral behind the capitals, a line under */
.cs-stat {
  position: relative;
  padding-top: 26px;
}
.st-num {
  position: absolute;
  left: 0;
  top: -18px;
  color: var(--cs-gold);
  font-family: var(--cs-ff-accent);
  font-size: clamp(64px, 5.6vw, 92px);
  line-height: 1;
  opacity: 0.85;
}
.cs-stat h3 {
  position: relative;
  margin: 0 0 12px 24px;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.cs-stat p {
  margin-left: 24px;
  font-size: 15px;
}
/* a numbered step (the 1-2-3 band) */
.cs-step {
  max-width: 340px;
  margin: 0 auto;
}
.cs-step .cs-numeral {
  margin-bottom: 26px;
}
.cs-step h3 {
  margin-bottom: 14px;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.cs-step p {
  margin-bottom: 18px;
  font-size: 15.5px;
}
/* a quote card: the gold italic mark, the words, the face and name */
.cs-voice {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 36px 34px 30px;
  border-radius: 4px;
  background: var(--cs-band);
}
.cs-bg-band .cs-voice {
  background: var(--cs-surface);
}
.vc-mark {
  color: var(--cs-gold);
  font-family: var(--cs-ff-accent);
  font-size: 80px;
  line-height: 0.6;
}
.cs-voice blockquote {
  margin: 18px 0 26px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 19px;
  font-style: italic;
  line-height: 1.55;
}
.cs-voice blockquote p {
  margin: 0;
}
.cs-voice figcaption,
.voice-quote footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.cs-voice figcaption span,
.voice-quote footer span {
  display: flex;
  flex-direction: column;
  color: var(--cs-muted);
  font-size: 13.5px;
  line-height: 1.4;
}
.cs-voice figcaption b,
.voice-quote footer b {
  color: var(--cs-heading);
  font-size: 15px;
}

/*----- 8.5 Season Cards -----*/
.cs-season {
  height: 100%;
  padding: 26px 24px 24px;
  border-radius: 4px;
  background: var(--cs-surface);
  box-shadow: inset 0 0 0 1px var(--cs-line);
  transition: box-shadow 0.35s ease, transform 0.35s var(--cs-ease);
}
.cs-season:hover {
  box-shadow: inset 0 0 0 1px var(--cs-line), var(--cs-shadow);
  transform: translateY(-4px);
}
.ss-family {
  display: block;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.cs-season h3 {
  margin: 4px 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ss-palette {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  gap: 6px;
  margin-bottom: 18px;
}
.cs-season .cs-rows li {
  padding: 8px 0;
}
.ss-neutrals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.ss-neutrals small {
  color: var(--cs-muted);
  font-size: 13px;
}
.ss-neutrals .cs-swatch {
  width: 18px;
  height: 18px;
}

/*======================
9. Home One
========================*/
/*----- 9.1 Hero Slider -----*/
/* the base's full-bleed portrait hero: the photograph across the screen, a soft ink wash from the copy side, the italic
   welcome, the 800 capitals on set lines, the italic line set in, a short white rule and the pills */
.cs-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--cs-night);
}
.h1-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(90vh, 880px);
  padding: 110px 0 120px;
  overflow: hidden;
}
.h1-hero .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.h1-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 18, 18, 0.74) 0%, rgba(20, 18, 18, 0.48) 40%, rgba(20, 18, 18, 0.06) 72%);
}
.hero-copy {
  max-width: 760px;
}
.hero-copy .cs-eyebrow {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 19px;
}
.hero-copy h1,
.hero-copy .cs-h1 {
  font-size: clamp(40px, 5.2vw, 92px);
  line-height: 1.02;
}
.hero-copy .cs-sub {
  margin-top: 18px;
  color: #FFFFFF;
  font-size: clamp(18px, 1.45vw, 23px);
}
.hero-rule {
  display: block;
  width: 64px;
  height: 2px;
  margin: 28px 0 34px;
  background: #FFFFFF;
}
.hero-copy .cs-avatars {
  margin-top: 40px;
}
.hero-copy .cs-btn.is-tonal {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-copy .cs-btn.is-tonal i:first-child {
  color: var(--cs-gold);
}
.hero-copy .cs-btn.is-tonal:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.hero-copy .cs-btn.is-tonal:hover i:first-child {
  color: var(--cs-ink);
}
.h1-hero .hero-arrows {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 0 34px;
  pointer-events: none;
  transform: translateY(-50%);
}
.h1-hero .hero-arrows .cs-arrow {
  pointer-events: auto;
}
.h1-hero .hero-count {
  position: absolute;
  right: 44px;
  bottom: 40px;
  z-index: 3;
  color: #FFFFFF;
}
.h1-hero .hero-count i {
  background: rgba(255, 255, 255, 0.4);
}

/*----- 9.2 Steps & Colour -----*/
.h1-colour .colour-photo {
  aspect-ratio: 667 / 560;
  border-radius: 4px;
  background: #F1EAE3;
}
.h1-colour .colour-photo img {
  mix-blend-mode: multiply;
}
.season-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 34px;
}
.season-row li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: var(--cs-surface);
}
.season-row .cs-swatches {
  gap: 4px;
}
.season-row .cs-swatch {
  width: 20px;
  height: 20px;
}
.season-row b {
  font-size: 14px;
}
.h1-from {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 16px;
  font-style: italic;
}
.h1-from .cs-price {
  color: var(--cs-heading);
  font-family: var(--cs-ff-head);
  font-style: normal;
  font-weight: 700;
}

/*----- 9.3 Lookbook Mosaic -----*/
/* the base's mosaic: a tall frame at each end and four in a square between, hairline gutters */
.cs-mosaic {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 6px;
}
.mz-mid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mz-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--cs-plate);
}
.mz-tile.is-tall {
  aspect-ratio: auto;
  height: 100%;
}
.mz-tile img {
  object-position: center 25%;
  transition: transform 1s var(--cs-ease);
}
.mz-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 18, 18, 0) 50%, rgba(20, 18, 18, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.mz-cap {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.5s var(--cs-ease);
}
.mz-cap small {
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.mz-cap b {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
}
.mz-tile:hover img {
  transform: scale(1.05);
}
.mz-tile:hover::before,
.mz-tile:focus-visible::before {
  opacity: 1;
}
.mz-tile:hover .mz-cap,
.mz-tile:focus-visible .mz-cap {
  opacity: 1;
  transform: none;
}

/*----- 9.4 The Edit -----*/
/* a crowded rail of pieces on hooks; main.js places each slot along the rail and lifts the ones that go */
.cs-rail {
  position: relative;
  margin-top: 20px;
}
.rail-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 34px;
}
.rc-num {
  min-width: 1.2em;
  color: var(--cs-gold);
  font-family: var(--cs-ff-accent);
  font-size: clamp(56px, 5vw, 84px);
  line-height: 1;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.rc-txt {
  display: flex;
  flex-direction: column;
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rc-txt small {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.rail-wrap {
  position: relative;
  height: 330px;
  margin: 0 auto;
  max-width: 1720px;
}
.rail-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #B6E1DC 0%, var(--cs-gold) 45%, #57A094 100%);
  box-shadow: 0 3px 8px rgba(20, 18, 18, 0.18);
}
.rail-bar.is-two {
  display: none;
}
.rail-list {
  position: absolute;
  inset: 0;
}
.rail-slot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 150px;
  transform-origin: 50% 8px;
}
.rail-slot .hook {
  position: relative;
  display: block;
  width: 16px;
  height: 22px;
  margin: 0 auto;
  border: 2px solid var(--cs-heading);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.rail-slot .hook::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 64px;
  height: 2px;
  background: var(--cs-heading);
  transform: translateX(-50%);
}
.rs-card {
  display: block;
  height: 200px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 12px 26px rgba(20, 18, 18, 0.12);
}
.rs-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.rs-card.on-white img {
  object-fit: contain;
  padding: 10px;
  mix-blend-mode: multiply;
}
.rs-name {
  display: block;
  margin-top: 10px;
  color: var(--cs-heading);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rail-slot.is-shown .rs-name {
  opacity: 1;
}

/*----- 9.5 Founder & Bands -----*/
.founder-art {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1;
}
.fa-round {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: var(--cs-band);
}
.fa-piece {
  position: absolute;
  left: 8%;
  top: 6%;
  width: 84%;
  height: auto;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .fa-round {
  background: #EDE4DA;
}
.fa-word {
  position: absolute;
  right: -2%;
  bottom: 4%;
  color: var(--cs-gold);
  font-size: clamp(54px, 5vw, 86px);
  line-height: 1;
}
.h1-facts {
  margin: 26px 0 32px;
}
.h1-team-more,
.h1-pk-more {
  margin-top: 54px;
}
/* the base's black testimonial band */
.h1-voices .cs-title {
  margin-bottom: 40px;
}
.voices-wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 980px;
  margin: 0 auto 56px;
}
.voices-wrap .swiper {
  flex: 1;
  min-width: 0;
}
.voice-quote {
  margin: 0;
  text-align: center;
}
.voice-quote p {
  margin: 0 0 30px;
  color: #FFFFFF;
  font-family: var(--cs-ff-accent);
  font-size: clamp(21px, 1.9vw, 30px);
  font-style: italic;
  line-height: 1.5;
}
.voice-quote footer {
  justify-content: center;
}
.voice-quote footer span {
  text-align: start;
}
.cs-review.is-light .rv-score,
.cs-photo-band .cs-review .rv-score {
  color: #FFFFFF;
}
/* the base's wide film band */
.h1-film {
  min-height: 560px;
  display: flex;
  align-items: center;
}
.film-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.film-copy .cs-sub {
  margin: 0;
}

/*======================
10. Home Two
========================*/
/*----- 10.1 Portrait Strip -----*/
/* the base's strip of portraits under the white bar, hairline gutters, round arrows at its ends; the centred title
   block below it */
.h2-hero {
  background: var(--cs-bg);
}
.strip-wrap {
  position: relative;
}
.strip-frame {
  display: block;
  aspect-ratio: 3 / 4.3;
  overflow: hidden;
  background: var(--cs-plate);
}
.strip-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 1s var(--cs-ease);
}
.strip-frame:hover img {
  transform: scale(1.05);
}
.strip-wrap .cs-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
}
.strip-wrap .hero-prev {
  left: 28px;
}
.strip-wrap .hero-next {
  right: 28px;
}
.strip-wrap .cs-arrow:hover {
  transform: translateY(-50%) scale(1.05);
}
.h2-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 90px 0 110px;
  text-align: center;
}
.h2-intro h1 {
  font-size: clamp(38px, 4.4vw, 76px);
}
.h2-intro .cs-sub {
  margin-left: 0;
}
.h2-intro .cs-rule {
  margin: 26px auto 34px;
}
.h2-intro .cs-btns {
  justify-content: center;
}
.h2-intro .cs-avatars {
  margin-top: 36px;
}

/*----- 10.2 Your Season -----*/
/* a portrait in a ring of twelve swatches and a drape under the chin; the words follow the season */
.ys-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
}
.ys-portrait {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.ys-ring {
  position: absolute;
  inset: 0;
}
.ys-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11%;
  aspect-ratio: 1;
  margin: -5.5% 0 0 -5.5%;
  border: 4px solid var(--cs-band);
  border-radius: 50%;
  background: var(--cs-plate);
  box-shadow: 0 8px 18px rgba(20, 18, 18, 0.14);
}
.ys-face {
  position: absolute;
  inset: 15%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--cs-plate);
  box-shadow: 0 30px 60px rgba(20, 18, 18, 0.18);
}
.ys-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
/* the draping cloth: a wide curve of colour across the shoulders */
.ys-drape {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -44%;
  height: 72%;
  border-radius: 50%;
  background: #F0543C;
  box-shadow: inset 0 18px 30px rgba(255, 255, 255, 0.18), inset 0 -20px 40px rgba(0, 0, 0, 0.18);
}
.ys-copy .cs-eyebrow {
  margin-bottom: 8px;
}
.ys-name {
  font-family: var(--cs-ff-accent);
  font-size: clamp(48px, 5vw, 92px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}
.ys-names {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 20px;
  margin: 26px 0 30px;
  font-size: 15px;
  color: var(--cs-heading);
}
.ys-names li {
  padding: 8px 0;
  border-bottom: 1px solid var(--cs-line);
}
.ys-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 34px;
}
.ys-tabs li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  color: var(--cs-muted);
  font-size: 13px;
  transition: color 0.4s ease;
}
.ys-tabs li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--cs-line);
  transition: background-color 0.4s ease;
}
.ys-tabs li b {
  color: inherit;
  font-size: 15px;
}
.ys-tabs li.is-on {
  color: var(--cs-heading);
}
.ys-tabs li.is-on::before {
  background: var(--cs-heading);
}

/*----- 10.3 Seasons, Quiz & Lookbooks -----*/
.cs-tabs.is-center {
  justify-content: center;
  margin-bottom: 44px;
}
.h2-quiz {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.profile-dots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 34px;
}
.profile-dots li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cs-tonal);
}
.profile-dots .cs-swatches {
  flex-wrap: nowrap;
  gap: 0;
}
.profile-dots .cs-swatch {
  width: 18px;
  height: 18px;
  margin-left: -6px;
  box-shadow: 0 0 0 2px var(--cs-night);
}
.profile-dots .cs-swatch:first-child {
  margin-left: 0;
}
.profile-dots b {
  font-size: 14px;
}
/* the quiz card as it looks: the progress, the question and six pictured answers */
.cs-quizcard {
  --cs-heading: #141212;
  --cs-text: #5E5853;
  --cs-muted: #6B645E;
  --cs-line: #EAE3DC;
  padding: 30px;
  border-radius: 6px;
  background: var(--cs-bg);
  color: var(--cs-text);
  box-shadow: var(--cs-shadow-lg);
}
[data-theme="dark"] .cs-quizcard {
  --cs-heading: #F4EFEA;
  --cs-text: #BDB5AE;
  --cs-muted: #A99F97;
  --cs-line: rgba(244, 239, 234, 0.12);
}
.qc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.qc-bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--cs-line);
}
.qc-bar i {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: 4px;
  background: var(--cs-rouge);
}
.cs-quizcard h3 {
  margin-bottom: 20px;
  color: var(--cs-heading);
  text-transform: uppercase;
}
.qc-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.qc-opts li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--cs-heading);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}
.qp-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #F1EAE3;
}
.qp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.qc-opts li:first-child .qp-img {
  box-shadow: 0 0 0 2px var(--cs-rouge);
}
.h2-look-list {
  border-top: 1px solid var(--cs-line);
}
.know-tabs .cs-tabs {
  margin-bottom: 24px;
}
.know-panel .cs-rows {
  margin-top: 22px;
}
.know-photo {
  aspect-ratio: 4 / 4.6;
}
.know-photo img {
  object-position: center;
}

/*======================
11. Home Three
========================*/
/*----- 11.1 Boxed Hero -----*/
/* the base's boxed black-and-white hero inside the page margins: the photographs in greyscale, a gold italic word laid
   over the capitals, the italic line and a short white rule, centred */
.h3-hero {
  padding: 0 34px;
  background: var(--cs-bg);
}
.h3-box {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.h3-hero .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(78vh, 760px);
  padding: 100px 30px;
  overflow: hidden;
  text-align: center;
}
.h3-hero .hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(1) contrast(1.05);
}
.h3-hero .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 18, 18, 0.62) 0%, rgba(20, 18, 18, 0.44) 55%, rgba(20, 18, 18, 0.3) 100%);
}
.h3-hero .hero-copy {
  position: relative;
  max-width: 900px;
}
.h3-word {
  position: absolute;
  left: 50%;
  top: -0.62em;
  z-index: 1;
  color: var(--cs-gold);
  font-size: clamp(64px, 7vw, 128px);
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-88%) rotate(-8deg);
  text-shadow: 0 6px 24px rgba(20, 18, 18, 0.35);
}
.h3-hero .hero-copy h1,
.h3-hero .hero-copy .cs-h1 {
  font-size: clamp(40px, 5vw, 88px);
}
.h3-hero .cs-sub {
  margin: 18px 0 0;
  color: #FFFFFF;
}
.h3-hero .hero-rule {
  margin: 28px auto 0;
}
.h3-hero .hero-arrows {
  position: absolute;
  right: 34px;
  bottom: 32px;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.h3-hero .hero-count {
  position: absolute;
  left: 40px;
  bottom: 44px;
  z-index: 3;
  color: #FFFFFF;
}
.h3-hero .hero-count i {
  background: rgba(255, 255, 255, 0.4);
}
.h3-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 40px 0 0;
}
.h3-line {
  margin: 0;
  color: var(--cs-heading);
  font-size: 19px;
}
.h3-line .cs-price {
  font-family: var(--cs-ff-head);
  font-style: normal;
  font-weight: 700;
}

/*----- 11.2 The Edit Book -----*/
.cs-editbook {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  aspect-ratio: 1 / 1.33;
  max-width: 1100px;
  margin: 0 auto;
}
.eb-tile {
  position: relative;
  display: block;
  background: var(--cs-plate);
}
.eb-tile img {
  object-position: center 30%;
  transition: transform 1s var(--cs-ease);
}
.eb-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 18, 18, 0) 50%, rgba(20, 18, 18, 0.7) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.eb-tile:hover img {
  transform: scale(1.05);
}
.eb-tile:hover::before,
.eb-tile:hover .mz-cap {
  opacity: 1;
}
.eb-tile:hover .mz-cap {
  transform: none;
}
.eb-a {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.eb-b {
  grid-column: 2;
  grid-row: 1;
}
.eb-c {
  grid-column: 3;
  grid-row: 1;
}
.eb-d {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
}
.eb-e {
  grid-column: 1;
  grid-row: 3 / span 2;
}
.eb-f {
  grid-column: 2;
  grid-row: 4;
}
.eb-g {
  grid-column: 3;
  grid-row: 4;
}

/*----- 11.3 Keep, Tailor, Donate -----*/
.ktd-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 44px;
}
.ktd-tally li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 24px;
  border-radius: 14px;
  background: var(--cs-surface);
}
.ktd-tally b {
  font-family: var(--cs-ff-accent);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ktd-tally span {
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ktd-tally small {
  margin-left: auto;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.ktd-tally .is-keep b {
  color: var(--cs-heading);
}
.ktd-tally .is-tailor b {
  color: var(--cs-gold-text);
}
.ktd-tally .is-donate b {
  color: var(--cs-rouge-text);
}
.ktd-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border-radius: 14px;
  background: var(--cs-surface);
  box-shadow: 0 10px 24px rgba(20, 18, 18, 0.05);
}
.ktd-photo {
  flex-shrink: 0;
  width: 108px;
  height: 128px;
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF;
}
.ktd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.ktd-photo.on-white img {
  object-fit: contain;
  padding: 6px;
  mix-blend-mode: multiply;
}
.ktd-body {
  min-width: 0;
  padding-right: 84px;
}
.ktd-body h3 {
  margin-bottom: 6px;
}
.ktd-note {
  color: var(--cs-muted);
  font-size: 13.5px;
}
/* the swing tag: hung from the card's corner on a string, it turns over to its verdict */
.ktd-tag {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 78px;
  height: 34px;
  perspective: 400px;
}
.ktd-tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px;
  height: 14px;
  background: var(--cs-muted);
}
.tag-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backface-visibility: hidden;
  transition: transform 0.7s var(--cs-ease);
}
.tag-face.is-front {
  background: var(--cs-plate);
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}
.tag-face.is-back {
  transform: rotateY(180deg);
}
.ktd-card[data-verdict="keep"] .is-back {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.ktd-card[data-verdict="tailor"] .is-back {
  background: var(--cs-gold);
  color: #141212;
}
.ktd-card[data-verdict="donate"] .is-back {
  background: var(--cs-rouge);
  color: #FFFFFF;
}
.ktd-card.is-sorted .is-front {
  transform: rotateY(-180deg);
}
.ktd-card.is-sorted .is-back {
  transform: rotateY(0);
}

/*----- 11.4 Hours, Tailor & Voices -----*/
.h3-timeline li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cs-line);
}
.h3-timeline li:first-child {
  border-top: 1px solid var(--cs-line);
}
.h3-timeline span {
  grid-row: span 2;
  color: var(--cs-gold-text);
  font-size: 17px;
}
.h3-timeline b {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.h3-timeline p {
  margin: 0;
  font-size: 15px;
}
.h3-timeline + .cs-btns {
  margin-top: 34px;
}
.h3-sketch {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
}
.sk-round {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cs-band);
}
.h3-sketch img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .sk-round {
  background: #EDE4DA;
}
.h3-tailor {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.tailor-card {
  padding: 34px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}
.tailor-card .cs-rows li {
  padding: 14px 0;
}
.tc-note {
  margin: 20px 0 0;
  font-size: 14.5px;
}

/*======================
12. Inner Pages
========================*/
/*----- 12.1 Sidebar & Widgets -----*/
/* the sidebar is quiet: a small heading over a short gold stroke, plain lists, each widget on the powder band */
.cs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.cs-sidebar .widget {
  padding: 34px 32px;
  border-radius: 4px;
  background: var(--cs-band);
}
.cs-sidebar .widget > h2 {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.cs-sidebar .widget > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--cs-gold);
}
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 58px 0 20px;
  border: 1px solid var(--cs-line);
  border-radius: 100px;
  background: var(--cs-surface);
  color: var(--cs-heading);
  font-family: var(--cs-ff-body);
  font-size: 15px;
  outline: 0;
  transition: border-color 0.3s ease;
}
.widget-search input:focus {
  border-color: var(--cs-heading);
}
.widget-search button,
.widget-search .fs-ico {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cs-gold);
  color: var(--cs-ink);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-search button:hover {
  background: var(--cs-ink);
  color: #FFFFFF;
}
.widget-cats li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--cs-line);
  color: var(--cs-text);
  font-size: 15.5px;
  transition: color 0.3s ease, padding 0.3s var(--cs-ease);
}
.widget-cats li:first-child a {
  padding-top: 0;
}
.widget-cats li:last-child a {
  border-bottom: 0;
  padding-bottom: 0;
}
.widget-cats li span {
  color: var(--cs-muted);
  font-size: 14px;
}
.widget-cats.is-prices li span {
  color: var(--cs-heading);
  font-weight: 600;
}
.widget-cats li a:hover {
  padding-left: 6px;
  color: var(--cs-gold-text);
}
.widget-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 15px 20px;
  border-radius: 10px;
  background: var(--cs-surface);
  color: var(--cs-heading);
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.widget-nav li:last-child a {
  margin-bottom: 0;
}
.widget-nav li a i {
  color: var(--cs-gold-text);
  font-size: 13px;
  transition: transform 0.3s var(--cs-ease), color 0.3s ease;
}
.widget-nav li a:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.widget-nav li a:hover i {
  color: var(--cs-ink);
  transform: translateX(4px);
}
.side-posts li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cs-line);
}
.side-posts li:first-child {
  padding-top: 0;
}
.side-posts li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.side-posts .thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  overflow: hidden;
}
.side-posts .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 0.6s var(--cs-ease);
}
.side-posts li:hover .thumb img {
  transform: scale(1.08);
}
.side-posts .date {
  display: block;
  margin-bottom: 4px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 14px;
  font-style: italic;
}
.side-posts h3 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14.5px;
}
.side-posts h3 a {
  color: var(--cs-heading);
}
.side-posts h3 a:hover {
  color: var(--cs-gold-text);
}
.widget-tags {
  margin: 0;
  line-height: 1.9;
}
.widget-tags a {
  color: var(--cs-text);
}
.widget-tags a:hover {
  color: var(--cs-gold-text);
}
.cs-sidebar .widget .hours-list li {
  border-color: var(--cs-line);
}
.cs-sidebar .widget .cs-status {
  margin-bottom: 14px;
  font-size: 14px;
}
.cs-sidebar .widget.widget-cta {
  position: relative;
  padding: 44px 34px;
  background: var(--cs-night);
  text-align: center;
}
.widget-cta h2 {
  margin: 6px 0 12px;
  color: #FFFFFF;
}
.widget-cta p {
  margin-bottom: 24px;
}
.cs-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 60px;
}
.cs-pagination a,
.cs-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cs-pagination a i {
  font-size: 13px;
}
.cs-pagination .is-current,
.cs-pagination a:hover {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.is-unmatched,
[data-filter-grid] > .is-hidden {
  display: none;
}
/* the range slider: a thin track, a gold thumb ringed in white */
.cs-range {
  width: 100%;
  height: 4px;
  margin: 14px 0 10px;
  border-radius: 4px;
  background: var(--cs-line-2);
  appearance: none;
  -webkit-appearance: none;
}
.cs-range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border: 5px solid var(--cs-surface);
  border-radius: 50%;
  background: var(--cs-gold);
  box-shadow: 0 2px 8px rgba(20, 18, 18, 0.25);
  cursor: pointer;
  -webkit-appearance: none;
}
.cs-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 5px solid var(--cs-surface);
  border-radius: 50%;
  background: var(--cs-gold);
  cursor: pointer;
}

/*----- 12.2 Services -----*/
/* the base's service rows: copy beside a photograph with a gold italic word, sides swapping row by row, a hairline
   between the rows */
.svc-row {
  padding-bottom: 90px;
  margin-bottom: 90px;
  border-bottom: 1px solid var(--cs-line);
}
.svc-row:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
.svc-photo {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3.6;
  overflow: visible;
}
.svc-photo img {
  position: relative;
  object-position: center 30%;
  transition: transform 1s var(--cs-ease);
}
.svc-word {
  position: absolute;
  right: -10px;
  bottom: -26px;
  z-index: 3;
  color: var(--cs-gold);
  font-size: clamp(54px, 5.2vw, 92px);
  line-height: 1;
  text-shadow: 0 4px 18px rgba(20, 18, 18, 0.18);
  pointer-events: none;
}
.svc-rows {
  margin: 26px 0 30px;
}
.svc-mini {
  margin-bottom: 18px;
}

/*----- 12.3 Session Single -----*/
.single-photo {
  aspect-ratio: 16 / 9.5;
  margin-bottom: 44px;
}
.single-photo img {
  object-position: center 40%;
}
.single-body > p {
  margin-top: 26px;
}
.single-body .h3-timeline {
  margin: 30px 0 46px;
}
.single-pair {
  margin-bottom: 46px;
}
.single-pair h3 {
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.single-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 56px;
}
.single-gallery a {
  aspect-ratio: 3 / 4;
}
.single-gallery img {
  object-position: center 25%;
}
.single-q {
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/*----- 12.4 Packages & The Builder -----*/
.pk-table th small {
  font-family: var(--cs-ff-accent);
  font-style: italic;
}
.pk-table tbody th a {
  color: var(--cs-heading);
}
.pk-table tbody th a:hover {
  color: var(--cs-gold-text);
}
.pb-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.pb-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.pb-group legend {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  float: none;
  width: auto;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pb-group legend .cs-it {
  color: var(--cs-gold-text);
  font-size: 22px;
  text-transform: none;
}
.pb-group.is-off {
  opacity: 0.45;
}
.pb-range {
  display: flex;
  align-items: center;
  gap: 22px;
}
.pb-hours-out {
  flex-shrink: 0;
  min-width: 96px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 24px;
  font-style: italic;
}
.pb-hint {
  margin: 8px 0 0;
  color: var(--cs-muted);
  font-size: 14px;
}
.cs-seg button small {
  margin-left: 4px;
  opacity: 0.7;
}
/* the summary: a white card, the lines, the total in Playfair */
.pb-summary {
  position: sticky;
  top: 110px;
  padding: 34px 30px;
  border-radius: 6px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
.pb-summary h3 {
  margin: 4px 0 18px;
  text-transform: uppercase;
}
.pb-lines li span {
  max-width: 64%;
}
.pb-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 8px;
  color: var(--cs-heading);
  font-weight: 700;
}
.pb-total b {
  font-family: var(--cs-ff-accent);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
}
.pb-pay {
  margin-bottom: 24px;
}
.pb-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pb-ref {
  margin: 14px 0 0;
  color: var(--cs-free-text);
  font-size: 14px;
}

/*======================
13. Inner Page Sections
========================*/
/*----- 13.1 Booking Wizard -----*/
.wz-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 46px;
  border-bottom: 1px solid var(--cs-line);
}
.wz-steps button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 14px 10px 16px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--cs-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-align: start;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.wz-steps button span {
  font-family: var(--cs-ff-accent);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
}
.wz-steps button.is-done {
  color: var(--cs-heading);
}
.wz-steps button.is-active {
  border-color: var(--cs-rouge);
  color: var(--cs-heading);
}
.wz-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step legend {
  float: left;
  width: 100%;
  margin-bottom: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.wz-step legend + * {
  clear: both;
}
.wz-sub {
  margin-top: 18px;
}
.wz-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  color: var(--cs-heading);
  font-size: 14.5px;
}
.wz-note {
  color: var(--cs-muted);
  font-size: 14.5px;
}
.wz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--cs-line);
}
.wz-count {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 17px;
  font-style: italic;
}
.wz-review {
  margin-bottom: 24px;
}
.wz-terms {
  margin-bottom: 10px;
}
.wz-notes {
  margin-top: 22px;
}
.wz-done {
  padding: 50px 44px;
  border-radius: 6px;
  background: var(--cs-band);
  text-align: center;
}
.wz-done h3 {
  margin-bottom: 22px;
}
.wz-done .cs-rows {
  max-width: 520px;
  margin: 0 auto;
  text-align: start;
}
.wz-done .cs-btns {
  justify-content: center;
  margin-top: 30px;
}
/* the side card that follows the booking */
.wz-side {
  position: sticky;
  top: 110px;
  padding: 34px 30px;
  border-radius: 6px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
.wz-side h3 {
  margin: 4px 0 16px;
  text-transform: uppercase;
}
.wz-facts {
  margin-bottom: 14px;
}
.wz-lines li span {
  max-width: 64%;
}
.wz-side .cs-avatars {
  margin-top: 26px;
}
/* the stylist cards: a "first free" card without a portrait */
.bk-stylist .pick-face img {
  aspect-ratio: 1 / 0.9;
}
.bk-any {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.9;
  margin-bottom: 10px;
  border-radius: 8px;
  background: var(--cs-band);
  color: var(--cs-gold-text);
  font-size: 34px;
}
.bk-stylist .cs-match {
  top: 12px;
  right: 46px;
}

/*----- 13.2 Diary Calendar & Times -----*/
.cs-cal {
  padding: 24px;
  border-radius: 6px;
  background: var(--cs-band);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-head b {
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
}
.cal-head .cs-arrow {
  width: 42px;
  height: 42px;
}
.cal-days,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-days span {
  padding-bottom: 8px;
  color: var(--cs-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.cd-day {
  position: relative;
  aspect-ratio: 1.2 / 1;
  border-radius: 8px;
  background: var(--cs-surface);
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.cd-day::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
}
.cd-day.is-free::after {
  background: var(--cs-free);
}
.cd-day.is-full::after {
  background: var(--cs-booked);
}
.cd-day.is-free:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.cd-day[disabled] {
  color: var(--cs-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.cd-day.is-closed,
.cd-day.is-off,
.cd-day.is-lead,
.cd-day.is-past {
  background: transparent;
}
.cd-day.is-on {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  font-size: 13.5px;
}
.cal-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wz-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wz-times .wz-note {
  grid-column: 1 / -1;
  margin: 0;
}
.wz-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 10px;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.wz-time small {
  color: var(--cs-muted);
  font-size: 11.5px;
  font-weight: 500;
}
.wz-time:hover {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.wz-time.is-on {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.wz-time.is-on small {
  color: var(--cs-on-primary);
  opacity: 0.8;
}

/*----- 13.3 Photo Frames -----*/
/* one component: click or drop on the frame, the photo fills it, a small X takes it away */
.bk-slot {
  position: relative;
}
.slot-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 2px dashed var(--cs-line-2);
  border-radius: 12px;
  background: var(--cs-band);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.slot-drop:hover,
.bk-slot.is-over .slot-drop {
  border-color: var(--cs-gold);
  background: var(--cs-plate);
}
.slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
}
.slot-empty i {
  margin-bottom: 6px;
  color: var(--cs-gold-text);
  font-size: 30px;
}
.slot-empty b {
  color: var(--cs-heading);
  font-size: 15px;
}
.slot-empty small {
  color: var(--cs-muted);
  font-size: 13px;
  line-height: 1.45;
}
.slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-slot.is-filled .slot-drop {
  border-style: solid;
  border-color: transparent;
}
.slot-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(20, 18, 18, 0.72);
  color: #FFFFFF;
  font-size: 13px;
  transition: background-color 0.3s ease;
}
.slot-x:hover {
  background: var(--cs-rouge);
}
.bk-slot input:focus-visible + .slot-x,
.bk-slot input:focus-visible ~ .slot-drop {
  outline: 2px solid var(--cs-heading);
}

/*----- 13.4 Style Quiz -----*/
.cs-quiz {
  padding: 40px;
  border-radius: 6px;
  background: var(--cs-band);
}
.qz-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.qz-count {
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 20px;
  font-style: italic;
}
.qz-progress {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--cs-line);
}
.qz-progress i {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: 4px;
  background: var(--cs-rouge);
  transition: width 0.5s var(--cs-ease);
}
.qz-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.qz-q {
  display: flex;
  flex-direction: column;
  gap: 4px;
  float: left;
  width: 100%;
  margin-bottom: 24px;
  color: var(--cs-heading);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}
.qz-q .cs-it {
  color: var(--cs-muted);
  font-size: 17px;
  text-transform: none;
}
.qz-q + * {
  clear: both;
}
.qz-pick .pick-face {
  background: var(--cs-surface);
}
.qz-img {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF;
}
.qz-img img {
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  object-position: center 25%;
}
.qz-img.on-white img {
  object-fit: contain;
  padding: 8px;
  mix-blend-mode: multiply;
}
.qz-sw {
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 14px;
}
.qz-sw .cs-swatch {
  width: 44px;
  height: 44px;
  margin-left: -10px;
  box-shadow: 0 0 0 3px var(--cs-surface);
}
.qz-sw .cs-swatch:first-child {
  margin-left: 0;
}
.qz-num {
  margin-bottom: 8px;
  color: var(--cs-gold);
  font-size: 44px;
  line-height: 1;
}
.qz-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 34px;
}
.qz-result .cs-eyebrow {
  margin-bottom: 4px;
}
.qz-name {
  font-family: var(--cs-ff-accent);
  font-size: clamp(56px, 6vw, 104px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}
.qz-result .cs-sub {
  margin-left: 0;
}
.qz-second {
  margin: 22px 0 18px;
}
.qz-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.qz-bars li {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}
.qz-bars li b {
  text-align: end;
}
.qz-track {
  height: 6px;
  border-radius: 6px;
  background: var(--cs-line);
}
.qz-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 6px;
  background: var(--cs-heading);
}
.qz-bars li.is-top .qz-track i {
  background: var(--cs-rouge);
}
.qz-side {
  padding: 30px;
  border-radius: 6px;
  background: var(--cs-surface);
}
.qz-side h3 {
  margin: 0 0 14px;
}
.qz-side h3 + * {
  margin-bottom: 26px;
}
.qz-pieces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.qz-pieces li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.3;
}
.qz-pc {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--cs-line);
}
.qz-pc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  mix-blend-mode: multiply;
}
.qz-pk {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border-radius: 10px;
  background: var(--cs-band);
}
.qz-pk img {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  object-fit: cover;
}
.qz-pk span,
.qz-looks span {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.qz-pk b,
.qz-looks b {
  color: var(--cs-heading);
}
.qz-pk small,
.qz-looks small {
  color: var(--cs-muted);
  font-size: 13px;
}
.qz-looks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qz-looks a {
  display: flex;
  align-items: center;
  gap: 14px;
}
.qz-looks img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
}
/* the six profiles */
.cs-profile {
  height: 100%;
  padding: 30px;
  border-radius: 6px;
  background: var(--cs-surface);
}
.cs-profile .cs-swatches {
  gap: 0;
  margin-bottom: 18px;
}
.cs-profile .cs-swatch {
  width: 30px;
  height: 30px;
  margin-left: -8px;
  box-shadow: 0 0 0 3px var(--cs-surface);
}
.cs-profile .cs-swatch:first-child {
  margin-left: 0;
}
.cs-profile h3 {
  text-transform: uppercase;
}
.cs-profile .cs-rows li > span {
  white-space: nowrap;
}
.pf-line {
  margin: 8px 0 18px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 17px;
  font-style: italic;
}
.pf-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 18px;
}
.pf-thumb {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: #FFFFFF;
}
.pf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.pf-thumb.on-white img {
  object-fit: contain;
  padding: 4px;
  mix-blend-mode: multiply;
}

/*----- 13.5 Season Finder -----*/
.cs-finder {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cf-q {
  min-width: 0;
  margin: 0;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--cs-line);
}
.cf-q legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  float: left;
  width: 100%;
  margin-bottom: 14px;
  color: var(--cs-heading);
  font-size: 16px;
  font-weight: 700;
}
.cf-q legend + * {
  clear: both;
}
.cf-q legend .cs-it {
  color: var(--cs-gold-text);
  font-size: 19px;
  font-weight: 400;
}
.cs-finder .cs-btn {
  align-self: flex-start;
}
.cf-result {
  padding: 40px;
  border-radius: 6px;
  background: var(--cs-band);
}
.cf-name {
  font-family: var(--cs-ff-accent);
  font-size: clamp(44px, 4.6vw, 80px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}
.cf-result .cs-sub {
  margin: 12px 0 26px;
}
.cf-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 10px;
  margin-bottom: 26px;
}
.cf-palette li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.cf-palette .cs-swatch {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: 64px;
  background: var(--cs-plate);
}
.cf-palette small {
  min-height: 2.6em;
  color: var(--cs-muted);
  font-size: 11.5px;
  line-height: 1.3;
}
.cf-rows .cs-swatches {
  flex-wrap: nowrap;
}
.cf-rows {
  margin-bottom: 28px;
}
.cf-photo {
  aspect-ratio: 800 / 495;
}
.cs-season.is-mine {
  box-shadow: inset 0 0 0 2px var(--cs-rouge), var(--cs-shadow);
}

/*----- 13.6 Closet Audit -----*/
.au-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.au-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  padding: 12px;
  border-radius: 12px;
  background: var(--cs-band);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.au-row[data-state="keep"] {
  box-shadow: inset 4px 0 0 var(--cs-heading);
}
.au-row[data-state="tailor"] {
  box-shadow: inset 4px 0 0 var(--cs-gold);
}
.au-row[data-state="donate"] {
  box-shadow: inset 4px 0 0 var(--cs-rouge);
}
.au-photo {
  display: block;
  width: 76px;
  height: 90px;
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF;
}
.au-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.au-photo.on-white img {
  object-fit: contain;
  padding: 4px;
  mix-blend-mode: multiply;
}
.au-main h3 {
  margin-bottom: 2px;
}
.au-kind {
  color: var(--cs-muted);
  font-size: 13.5px;
}
.au-seg {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 100px;
  background: var(--cs-surface);
}
.au-opt {
  position: relative;
  cursor: pointer;
}
.au-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.au-opt span {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 100px;
  color: var(--cs-muted);
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.au-opt input:focus-visible + span {
  outline: 2px solid var(--cs-heading);
}
.au-opt.is-keep input:checked + span {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.au-opt.is-tailor input:checked + span {
  background: var(--cs-gold);
  color: #141212;
}
.au-opt.is-donate input:checked + span {
  background: var(--cs-rouge);
  color: #FFFFFF;
}
.au-alter {
  grid-column: 2 / -1;
  margin: 4px 0 0;
}
.au-alter .select-button,
.au-alter .cs-input {
  height: 46px;
}
.au-summary {
  position: sticky;
  top: 110px;
  padding: 34px 30px;
  border-radius: 6px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
.au-tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.au-tally li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 6px;
  border-radius: 12px;
  background: var(--cs-band);
  font-size: 13px;
  font-weight: 700;
}
.au-tally b {
  font-family: var(--cs-ff-accent);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}
.au-tally .is-tailor b {
  color: var(--cs-gold-text);
}
.au-tally .is-donate b {
  color: var(--cs-rouge-text);
}
.au-left,
.au-pickup {
  color: var(--cs-muted);
  font-size: 14px;
}
.au-summary h3 {
  margin: 22px 0 10px;
}
.au-run {
  margin: 14px 0 0;
  font-size: 14px;
}

/*----- 13.7 About, Team & Profile -----*/
/* the base's About Me: a narrow column with a drop cap, three photographs, the italic pull line and a signature */
.am-wrap {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.am-drop {
  text-align: start;
  font-size: 16.5px;
}
.am-drop::first-letter {
  float: left;
  margin: 8px 14px 0 0;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 84px;
  font-style: italic;
  line-height: 0.8;
}
.am-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 46px 0 40px;
}
.am-photo {
  aspect-ratio: 1.2 / 1;
}
.am-pull {
  max-width: 760px;
  margin: 0 auto;
  color: var(--cs-heading);
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
}
.am-wrap .cs-rule {
  margin: 30px auto;
}
.am-text {
  max-width: 760px;
  margin: 0 auto;
}
.am-sign {
  display: block;
  margin-top: 34px;
  color: var(--cs-gold-text);
  font-size: 44px;
  line-height: 1;
}
.pp-photo {
  aspect-ratio: 1 / 1.1;
}
.pp-photo img {
  object-position: center 20%;
}
.cs-profile-page .cs-rows {
  margin: 26px 0;
}
.pp-free {
  margin: 30px 0 4px;
}
.cs-profile-page .free-days {
  margin-bottom: 30px;
}
.cs-profile-page .cs-btns .cs-social {
  margin-left: 6px;
}

/*----- 13.8 Contact & Client Area -----*/
/* one strip with dividers across the top (never four floating cards) */
.info-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 6px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
.info-cell {
  padding: 34px 30px;
  border-inline-start: 1px solid var(--cs-line);
}
.info-cell:first-child {
  border-inline-start: 0;
}
.info-cell .cs-it {
  display: block;
  margin-bottom: 6px;
  color: var(--cs-muted);
  font-size: 16px;
}
.info-cell h3 {
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.info-cell p {
  margin: 0;
  font-size: 14.5px;
}
.info-cell .cs-status {
  font-size: 14px;
}
.contact-side h3 {
  margin: 0 0 16px;
}
.contact-side h3 ~ h3 {
  margin-top: 32px;
}
.contact-side .cs-btn {
  margin-top: 30px;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(0.4);
}
/* the client area */
.dash-side {
  padding: 32px 28px;
  border-radius: 6px;
  background: var(--cs-band);
}
.dash-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.dash-who img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.dash-who h2 {
  margin-bottom: 2px;
}
.dash-who span {
  color: var(--cs-muted);
  font-size: 13.5px;
}
.dash-counts {
  margin-bottom: 22px;
}
.dash-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.dash-tabs button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--cs-surface);
  color: var(--cs-heading);
  font-weight: 600;
  text-align: start;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.dash-tabs button i {
  width: 18px;
  color: var(--cs-rouge-text);
}
.dash-tabs button.is-active,
.dash-tabs button:hover {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.dash-tabs button.is-active i,
.dash-tabs button:hover i {
  color: var(--cs-gold);
}
.dash-panel h2 {
  margin-bottom: 24px;
  text-transform: uppercase;
}
.acc-bookings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}
.ab-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 12px;
  border-radius: 12px;
  background: var(--cs-band);
}
.ab-row img {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  object-fit: cover;
}
.ab-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
}
.ab-price {
  font-size: 16px;
}
.acc-orders {
  margin-bottom: 26px;
}
.acc-orders li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 120px 100px;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cs-line);
  font-size: 14.5px;
}
.acc-orders li b {
  text-align: end;
}
.acc-empty {
  color: var(--cs-muted);
}
.acc-card {
  height: 100%;
  padding: 28px;
  border-radius: 10px;
  background: var(--cs-band);
}
.acc-card .cs-it {
  color: var(--cs-muted);
}
.acc-card h3 {
  margin: 6px 0 12px;
}
.acc-card .cs-swatches {
  margin-bottom: 18px;
}
.acc-sub {
  margin: 30px 0 14px;
}

/*======================
14. Lookbooks, Gallery & Stories
========================*/
/*----- 14.1 Lookbook Listing -----*/
.lk-filters {
  margin-bottom: 44px;
}
.lk-filters .cs-tabs {
  margin-bottom: 26px;
}
.lk-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
}
.lk-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--cs-line);
}

/*----- 14.2 Lookbook Singles -----*/
.cs-look-single .cs-sub {
  margin-bottom: 0;
}
.cs-look-single .cs-rule {
  margin-bottom: 26px;
}
.lk-quote {
  margin: 34px 0 0;
  padding: 30px 34px;
  border-inline-start: 3px solid var(--cs-gold);
  background: var(--cs-band);
}
.lk-quote p {
  margin: 0 0 12px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 23px;
  font-style: italic;
  line-height: 1.45;
}
.lk-quote footer {
  font-size: 14px;
  font-weight: 700;
}
.lk-side {
  padding: 30px 28px;
  border-radius: 6px;
  background: var(--cs-band);
}
.lk-side h3 {
  margin: 0 0 14px;
}
.lk-side h3 ~ h3 {
  margin-top: 28px;
}
.lk-brief li b a {
  color: var(--cs-heading);
}
.lk-brief li b a:hover {
  color: var(--cs-gold-text);
}
.lk-palette {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-name {
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 22px;
  font-style: italic;
}
.lk-palette .cs-swatches {
  display: grid;
  grid-template-columns: repeat(6, 26px);
  gap: 6px;
}
.lk-palette .cs-swatch {
  width: 26px;
  height: 26px;
}
.lk-big .container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lk-frame {
  display: block;
  aspect-ratio: 3 / 4;
}
.lk-frame.is-wide {
  aspect-ratio: 1300 / 700;
}
.lk-frame img {
  object-position: center 25%;
}
.lk-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lk-pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lk-pieces li {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border-radius: 12px;
  background: var(--cs-band);
}
.lp-photo {
  display: block;
  width: 70px;
  height: 84px;
  overflow: hidden;
  border-radius: 8px;
  background: #FFFFFF;
}
.lp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.lp-photo.on-white img {
  object-fit: contain;
  padding: 4px;
  mix-blend-mode: multiply;
}
.lp-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.lp-txt b {
  color: var(--cs-heading);
}
.lp-txt small {
  color: var(--cs-muted);
  font-size: 13px;
}
.lp-how {
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
}
.lp-how.is-kept {
  background: var(--cs-primary);
  color: var(--cs-on-primary);
}
.lp-how.is-new {
  background: var(--cs-gold);
  color: #141212;
}
.lk-nav {
  margin: 70px 0 0;
  padding-top: 34px;
  border-top: 1px solid var(--cs-line);
}
.lk-nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 46%;
  color: var(--cs-heading);
}
.lk-nav img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
}
.lk-nav .pn-next {
  margin-inline-start: auto;
  text-align: end;
}
.lk-slider {
  position: relative;
}
.lk-slider .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}
.lk-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 260px;
  gap: 8px;
  margin-top: 60px;
}
.lk-masonry a {
  display: block;
}
.lk-masonry a:nth-child(1) {
  grid-row: span 2;
}
.lk-masonry a:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}
.lk-masonry a:nth-child(4) {
  grid-column: span 2;
}
.lk-masonry img {
  object-position: center 25%;
}

/*----- 14.3 Style Gallery -----*/
.gal-tabs {
  margin-bottom: 40px;
}
.cs-masonry {
  column-count: 4;
  column-gap: 8px;
}
.mz-item {
  margin: 0 0 8px;
  break-inside: avoid;
}
.mz-item a {
  display: block;
}
.mz-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--cs-ease);
}
.mz-item a:hover img {
  transform: scale(1.04);
}
.gal-cta .cs-eyebrow {
  margin-bottom: 4px;
}

/*----- 14.4 Stories, Process & Bands -----*/
.cs-voices-page .title-side {
  gap: 18px;
}
.pr-band {
  min-height: 520px;
  display: flex;
  align-items: center;
}
.pr-band .cs-btns {
  margin-top: 30px;
}
.cs-process .cs-steps {
  margin-top: 20px;
}

/*======================
15. Blog & Account
========================*/
/*----- 15.1 Blog List -----*/
/* the journal: wide photo posts with a date tile, and quote and link posts between them */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.post-thumb {
  position: relative;
  display: block;
  overflow: hidden;
}
.post-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--cs-ease);
}
.blog-post:hover .post-thumb img {
  transform: scale(1.04);
}
.post-date {
  position: absolute;
  left: 30px;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 84px;
  background: var(--cs-gold);
  color: var(--cs-ink);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
}
.post-date b {
  font-family: var(--cs-ff-head);
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
.post-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 15, 0.28);
}
.post-thumb.is-video .cs-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  margin: -45px 0 0 -45px;
}
.post-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mini-nav {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  margin-top: -25px;
  pointer-events: none;
}
.mini-nav .cs-arrow {
  pointer-events: auto;
}
.bp-body {
  padding-top: 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-bottom: 14px;
  color: var(--cs-muted);
  font-size: 14.5px;
}
.post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.post-meta .cs-face {
  width: 34px;
  height: 34px;
}
.post-meta a {
  color: var(--cs-gold-text);
}
.bp-body h3 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.bp-body h3 a {
  color: var(--cs-heading);
}
.bp-body h3 a:hover {
  color: var(--cs-gold-text);
}
.bp-body .cs-rule {
  margin: 18px 0 20px;
}
.bp-body p {
  margin-bottom: 18px;
}
/* the quote post: a night card with the title in Playfair italics and a gold quote mark behind it */
.blog-post.is-quote {
  position: relative;
  padding: 56px 60px;
  overflow: hidden;
  background: var(--cs-ink);
  --cs-heading: #F4EFEA;
}
.blog-post.is-quote .pcd-meta,
.blog-post.is-quote .pcd-meta a {
  color: #9DD7D0;
}
.blog-post.is-quote .pcd-meta a:hover {
  color: #F4EFEA;
}
.blog-post.is-quote h3 {
  position: relative;
  max-width: 560px;
  margin: 12px 0 18px;
  font-family: var(--cs-ff-accent);
  font-size: clamp(26px, 2.2vw, 36px);
  font-style: italic;
  font-weight: 400;
}
.blog-post.is-quote h3 a {
  color: #F4EFEA;
}
.blog-post.is-quote h3 a:hover {
  color: #9DD7D0;
}
.blog-post .nc-by {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.blog-post.is-quote .nc-by {
  color: rgba(244, 239, 234, 0.78);
}
.bp-glyph {
  position: absolute;
  right: 50px;
  bottom: -40px;
  color: rgba(140, 207, 196, 0.22);
  font-size: 240px;
  line-height: 1;
}

/*----- 15.2 Blog Details -----*/
.article-hero {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body > h2 {
  margin-bottom: 0;
}
.article-body > .cs-rule {
  margin: 20px 0 26px;
}
.article-body > h2 {
  margin-top: 6px;
}
.article-body > h3 {
  margin: 40px 0 16px;
}
.article-quote {
  position: relative;
  margin: 40px 0;
  padding: 44px 50px 40px;
  background: var(--cs-band);
  border-inline-start: 4px solid var(--cs-heading);
}
.article-quote p {
  margin-bottom: 14px;
  color: var(--cs-heading);
  font-family: var(--cs-ff-accent);
  font-size: 25px;
  font-style: italic;
  line-height: 1.5;
}
.article-quote cite {
  color: var(--cs-gold-text);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}
.article-pair {
  margin: 10px 0 0;
}
.article-pair img {
  height: 300px;
  object-fit: cover;
}
.article-rows {
  margin: 26px 0;
}
.article-rows > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cs-line);
}
.article-rows > div:first-child {
  border-top: 1px solid var(--cs-line);
}
.article-rows dt {
  color: var(--cs-heading);
  font-weight: 500;
}
.article-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-block: 1px solid var(--cs-line);
}
.share-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cs-gold);
  color: var(--cs-ink);
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.share-copy:hover,
.share-copy.is-done {
  background: var(--cs-ink);
  color: #FFFFFF;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
  padding: 40px;
  border-radius: 4px;
  background: var(--cs-band);
}
.author-box img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box .cs-eyebrow {
  display: block;
}
.author-box h3 {
  margin-bottom: 8px;
}
.post-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
}
.post-nav .pn-prev,
.post-nav .pn-next {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 42%;
  color: var(--cs-heading);
}
.post-nav .pn-next {
  text-align: end;
}
.post-nav small {
  display: block;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 15px;
  font-style: italic;
}
.post-nav b {
  font-weight: 700;
}
.post-nav > a > i {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cs-tonal);
  color: var(--cs-heading);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.post-nav > a:hover > i {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.post-nav .pn-all {
  color: var(--cs-gold-text);
  font-size: 22px;
}
.comment-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--cs-line);
}
.comment-list li > img {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.comment-list li > div {
  flex: 1 1 0;
  min-width: 0;
}
.comment-list b {
  margin-right: 14px;
  color: var(--cs-heading);
  font-size: 17px;
  font-weight: 700;
}
.comment-list li > div > span {
  color: var(--cs-muted);
  font-size: 13.5px;
}
.comment-list p {
  margin: 8px 0 10px;
}
.comment-list ul {
  flex: 1 1 100%;
  padding-inline-start: 92px;
}
.comment-list ul li {
  padding-bottom: 0;
  border-bottom: 0;
}
.comment-form {
  margin-top: 46px;
}

/*----- 15.3 Account Pages -----*/
.account-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6px;
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-lg);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: 46px;
  overflow: hidden;
  background: var(--cs-ink);
}
.account-side .as-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.account-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(20, 18, 18, 0.1) 0%, rgba(20, 18, 18, 0.55) 45%, rgba(20, 18, 18, 0.95) 100%);
}
.account-side > .cs-gl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 140px;
}
.account-side .as-seal {
  width: 96px;
}
.as-copy {
  margin-top: auto;
}
.as-copy h2 {
  margin: 4px 0 14px;
  color: #FFFFFF;
}
.as-copy p {
  margin-bottom: 26px;
  color: rgba(255, 255, 255, 0.85);
}
.as-copy .cs-avatars .faces img,
.as-copy .cs-avatars .more {
  border-color: var(--cs-ink);
}
.account-form {
  padding: 56px 54px;
}
.account-form .cs-eyebrow {
  display: block;
}
.account-form h3 {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 15px;
}
.account-row a,
.account-switch a {
  color: var(--cs-gold-text);
  font-weight: 600;
}
.account-terms {
  margin-bottom: 24px;
}
.account-switch {
  margin: 22px 0 0;
  font-size: 15px;
  text-align: center;
}
.pass-toggle {
  position: absolute;
  top: 37px;
  right: 8px;
  width: 42px;
  height: 42px;
  color: var(--cs-gold-text);
}
.pass-meter {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--cs-line);
}
.pass-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cs-booked);
  transition: width 0.4s var(--cs-ease), background-color 0.4s ease;
}
.pass-meter span[data-score="2"] {
  background: var(--cs-gold);
}
.pass-meter span[data-score="3"],
.pass-meter span[data-score="4"] {
  background: var(--cs-free);
}
.pass-hint {
  display: block;
  margin-top: 6px;
  color: var(--cs-muted);
  font-size: 13px;
}

/*----- 15.4 Coming Soon & 404 -----*/
/* a photograph on one side, the page on the other, the seal on the seam */
.cs-bare-page {
  min-height: 100vh;
  background: var(--cs-bg);
}
.bare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.bare-photo-side {
  position: relative;
  z-index: 2;
}
.bare-photo-side .bare-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.bare-seal {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  width: 140px;
  margin-top: -70px;
}
.bare-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 9% 80px 12%;
  overflow: hidden;
}
.bare-inner > .cs-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.bare-logo {
  margin-bottom: 60px;
}
.bare-logo img {
  width: auto;
  height: 38px;
}
.bare-inner h1 {
  max-width: 620px;
}
.bare-inner .cs-sub {
  margin-left: 0;
}
.bare-inner .cs-rule {
  margin: 24px 0;
}
.bare-inner .cs-lead {
  max-width: 560px;
}
.bare-inner .cs-btns {
  margin-top: 34px;
}
.error-code {
  display: block;
  margin-bottom: 6px;
  color: var(--cs-gold);
  font-family: var(--cs-ff-accent);
  font-size: clamp(120px, 13vw, 210px);
  font-weight: 400;
  line-height: 0.9;
}
.bare-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}
.bare-line > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cs-gold);
  color: var(--cs-ink);
  font-size: 16px;
}
.bare-line small {
  display: block;
  color: var(--cs-muted);
  font-size: 13px;
}
.bare-line b {
  color: var(--cs-heading);
  font-size: 21px;
  font-weight: 700;
}
.launch-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 36px 0;
}
.launch-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 10px 16px;
  border-radius: 12px;
  background: var(--cs-surface);
  color: var(--cs-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.launch-count .is-gold,
.launch-count .is-gold b {
  background: var(--cs-gold);
  color: var(--cs-ink);
}
.launch-count b {
  font-family: var(--cs-ff-accent);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.bare-news {
  position: relative;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 40px;
}
.bare-news input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 1px solid var(--cs-line);
  border-radius: 100px;
  background: var(--cs-surface);
  color: var(--cs-heading);
  font-family: var(--cs-ff-body);
  font-size: 16px;
  outline: 0;
}
.bare-news input:focus {
  border-color: var(--cs-gold);
}
.bare-news .form-status {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
/* the hooked-O seal on its ink plate, so it reads on the photograph and on the paper alike */
.bare-seal {
  border-radius: 28px;
  box-shadow: var(--cs-shadow-lg);
}

/*======================
16. Subheader
========================*/
/* the inner page title: the base's photo band - a wide photograph under an ink wash from the copy side, the crumbs in
   Playfair italic, the 800 capitals and the italic lead in white; Swatch Rain drifts through the wash */
.cs-subheader {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 400px;
  padding: 90px 0;
  overflow: clip;
  background: var(--cs-ink);
  --cs-heading: #FFFFFF;
  --cs-text: rgba(255, 255, 255, 0.86);
  --cs-muted: rgba(255, 255, 255, 0.76);
  --gl-alpha: 0.38;
  color: var(--cs-text);
}
.cs-subheader > .sub-img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.cs-subheader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(20, 18, 18, 0.86) 0%, rgba(20, 18, 18, 0.62) 42%, rgba(20, 18, 18, 0.12) 100%);
}
.cs-subheader .cs-gl {
  z-index: -1;
  right: 40%;
  width: auto;
}
.cs-subheader .container {
  position: relative;
}
.sub-copy {
  max-width: 760px;
}
.cs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 18px;
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 16px;
  font-style: italic;
}
.cs-crumbs a:hover {
  color: var(--cs-gold);
}
.cs-crumbs > span:last-child {
  color: #FFFFFF;
}
.cs-crumbs .sep {
  width: 14px;
  height: 1px;
  background: var(--cs-gold);
}
.cs-subheader h1 {
  margin: 0;
  color: #FFFFFF;
}
.cs-subheader .cs-lead {
  max-width: 600px;
  margin: 18px 0 0 1.6em;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--cs-ff-accent);
  font-size: clamp(18px, 1.3vw, 21px);
  font-style: italic;
  line-height: 1.5;
}
.cs-subheader .cs-rule {
  margin-top: 26px;
  background: #FFFFFF;
}

/*======================
17. Footer
========================*/
/* the base's black footer grown up: the colour-analysis wheel turning beside "find your season", the letter, the
   studio with open now and its hours, the sessions and the contact columns, then the logo and the menu */
.cs-footer {
  position: relative;
  padding-top: 90px;
}
/* the wheel and its call */
.footer-wheel {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: center;
  gap: 70px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--cs-line);
}
.wheel-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
}
.wheel-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* the season the visitor found (or the one the studio dresses most) in the middle of the wheel */
.wheel-core {
  position: absolute;
  inset: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cs-night);
  text-align: center;
}
.wheel-core small {
  color: var(--cs-muted);
  font-family: var(--cs-ff-accent);
  font-size: 13px;
  font-style: italic;
}
.wheel-core b {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.wheel-copy h2 {
  max-width: 640px;
}
.wheel-copy .cs-sub {
  margin-bottom: 30px;
}
.footer-cols {
  padding: 70px 0 60px;
}
.cs-footer .widget h2 {
  margin-bottom: 22px;
  color: #FFFFFF;
}
.cs-footer .widget-line {
  margin-bottom: 20px;
  font-size: 14.5px;
}
.footer-address {
  margin-bottom: 14px;
  color: var(--cs-heading);
  font-size: 15px;
}
.cs-footer .cs-status {
  margin-bottom: 16px;
  font-size: 14px;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cs-line);
  font-size: 14px;
}
.hours-list li span {
  color: var(--cs-muted);
  font-size: 13.5px;
}
.hours-list li b {
  color: var(--cs-heading);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hours-list li.is-today span,
.hours-list li.is-today b {
  color: var(--cs-gold);
}
.footer-links-list li + li {
  margin-top: 9px;
}
.footer-links-list a {
  color: var(--cs-text);
  font-size: 15px;
}
.footer-links-list a:hover,
.footer-contact a:hover {
  color: var(--cs-gold);
}
.footer-contact li + li {
  margin-top: 10px;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cs-text);
  font-size: 15px;
}
.footer-contact a i {
  width: 16px;
  color: var(--cs-gold);
  font-size: 13px;
}
.cs-footer .cs-social {
  margin-top: 26px;
}
/* the base's letter field: a line, an arrow */
.cs-newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cs-newsletter .cs-input {
  flex: 1;
  min-width: 0;
  padding-right: 64px;
}
.nl-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cs-gold);
  color: var(--cs-ink);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--cs-ease);
}
.nl-btn:hover {
  background: #FFFFFF;
  color: var(--cs-ink);
  transform: translateX(3px);
}
.cs-newsletter .form-status {
  flex-basis: 100%;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  padding: 30px 0 34px;
  border-top: 1px solid var(--cs-line);
  font-size: 14px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--cs-gold);
}
.footer-logo img {
  height: 28px;
  width: auto;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
}
.footer-links a {
  font-family: var(--cs-ff-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}