/* ==========================================================================
   BEAUTY CEO SOCIETY — DESIGN SYSTEM
   --------------------------------------------------------------------------
   Perceptual language: warm editorial luxury. Oat canvas, espresso ink,
   mocha as the single brand voltage. Depth is carried by hairlines and
   surface-colour change — exactly one shadow exists in the system and it
   belongs to photography.

   Display type sits at weight 300. That is the whole voice: a magazine,
   not a funnel. Never take display to bold.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root {
  /* Canvas — the page floor is never pure white */
  --canvas:        #F4F1EC;
  --canvas-soft:   #FAF8F4;
  --canvas-warm:   #EBE3DA;
  --surface:       #FFFFFF;
  /* Dark surfaces are deep cocoa, never black. Black only appears as ink
     and inside shadows. */
  --espresso:      #46332A;
  --espresso-2:    #523C31;
  --espresso-deep: #35251E;

  /* Ink */
  --ink:           #241C18;
  --body:          #6A5A51;
  --muted:         #93817A;
  --muted-soft:    #B3A49C;
  --on-dark:       #F4F1EC;
  --on-dark-soft:  #B6A79E;

  /* Hairlines — all depth lives here */
  --line:          #E2D9D0;
  --line-soft:     #EDE6DE;
  --line-strong:   #CDBFB4;
  --line-dark:     rgba(244, 241, 236, 0.16);
  --line-dark-soft:rgba(244, 241, 236, 0.08);

  /* Voltage — used scarcely, on actions only */
  --mocha:         #744E3E;
  --mocha-deep:    #5B3B2E;
  --mocha-soft:    #B08A79;
  --blush:         #D9C4B6;
  --sand:          #C9A88F;

  /* Semantic */
  --positive:      #4E7A5E;
  --negative:      #A0524A;

  /* ---- Depth -----------------------------------------------------------
     Elevation is warm, not grey: every shadow carries a mocha tint so lifted
     surfaces read as lit from the same room as the rest of the page. A pure
     black shadow on a cream ground looks like dirt. --bezel is the deep
     stacked drop used on the perspective showcase and nothing else. */
  --lift-1: 0 1px 2px rgba(36, 28, 24, 0.04),
            0 6px 18px rgba(116, 78, 62, 0.06);
  --lift-2: 0 2px 4px rgba(36, 28, 24, 0.05),
            0 14px 34px rgba(116, 78, 62, 0.10);
  --lift-3: 0 6px 14px rgba(36, 28, 24, 0.06),
            0 30px 60px rgba(116, 78, 62, 0.14);
  --bezel:  0 9px 20px rgba(36, 28, 24, 0.20),
            0 37px 37px rgba(36, 28, 24, 0.17),
            0 84px 50px rgba(36, 28, 24, 0.10),
            0 149px 60px rgba(36, 28, 24, 0.04),
            0 233px 65px rgba(36, 28, 24, 0.01);

  --shadow-photo:  var(--lift-3);
  --shadow-float:  var(--lift-2);

  /* Fades the head and tail of any continuously scrolling region. Used on
     the testimonial columns, the marquees and the image corridor — it is the
     detail that makes looping motion read as designed rather than as a bug. */
  --fade-y: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  --fade-x: linear-gradient(to right,  transparent, #000 8%,  #000 92%, transparent);

  /* Type families */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale — Perfect Fourth at the top, gentler at body sizes */
  --t-mega:   clamp(3.1rem, 1.05rem + 8.5vw, 8.25rem);
  --t-xl:     clamp(2.45rem, 1.45rem + 4.2vw, 4.75rem);
  --t-lg:     clamp(2rem, 1.42rem + 2.5vw, 3.35rem);
  --t-md:     clamp(1.55rem, 1.26rem + 1.25vw, 2.25rem);
  --t-sm:     clamp(1.22rem, 1.11rem + 0.48vw, 1.5rem);
  --t-lead:   clamp(1.06rem, 1.0rem + 0.3vw, 1.24rem);
  --t-body:   1rem;
  --t-small:  0.9375rem;
  --t-cap:    0.8125rem;
  --t-label:  0.6875rem;

  /* Spacing — 8px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6rem;
  --s-section: clamp(3.5rem, 2.2rem + 4.5vw, 6.5rem);
  --s-gutter:  clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* Shape — generous. Tight radii on big surfaces read as cheap at this scale. */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
  --r-lg: 24px; --r-xl: 30px; --r-2xl: 40px; --r-pill: 999px;

  /* 3D — the page's depth vocabulary. One perspective value everywhere so
     separate scenes look like the same room. */
  --persp:      1200px;
  --persp-near: 620px;

  /* Motion — expo-out is the house curve */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast:    140ms;
  --t-base:    240ms;
  --t-slow:    780ms;

  --max:   1240px;
  --max-n: 1080px;
  --max-r: 720px;   /* reading measure */

  --nav-h: 76px;
  --field-h: 56px;   /* inputs and their buttons share one height */
}

/* ---------- 2. RESET ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Land anchored sections flush under the sticky nav. Any extra offset
     exposes a sliver of the previous band, which looks accidental when
     that band is dark. The section's own padding supplies the air. */
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--mocha);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--mocha); color: var(--canvas); }

/* ---------- 3. TYPOGRAPHY ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;              /* the editorial signature — never raise this */
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: var(--t-mega); line-height: 0.95; letter-spacing: -0.032em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); line-height: 1.16; }

/* Inner-page headings step down from the homepage hero so the h1 hierarchy
   stays honest across the site — /about is not shouting as loudly as /. */
.h-page { font-size: var(--t-xl); }
.h-mid  { font-size: var(--t-lg); }

h2 em, h1 em, h3 em, .em {
  font-style: italic;
  font-weight: 400;
  color: var(--mocha);
}

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--body);
  max-width: 56ch;
}

.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mocha-soft);
  display: block;
}

.label--dark { color: var(--sand); }

.serif-num {
  font-family: var(--serif);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.tnum { font-variant-numeric: tabular-nums; }

strong, b { font-weight: 600; color: var(--ink); }

/* Every dark surface must re-light its emphasis type. --ink and the dark
   canvas are the same value, so omitting a surface here makes its bold
   text literally invisible. Add new dark components to this list. */
.on-dark strong,      .on-dark b,
.band--dark strong,   .band--dark b,
.card-dark strong,    .card-dark b,
.magnet strong,       .magnet b,
.model__out strong,   .model__out b,
.plan--featured strong, .plan--featured b,
.foot strong,         .foot b,
.sticky strong,       .sticky b,
.announce strong,     .announce b { color: var(--canvas); }

/* ---------- 4. LAYOUT ---------------------------------------------------- */

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

section { position: relative; }

.band          { padding-block: var(--s-section); }
.band--tight   { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.band--soft    { background: var(--canvas-soft); }
.band--warm    { background: var(--canvas-warm); }
.band--surface { background: var(--surface); }

/* Dark tiles. The colour change IS the section divider — no border needed. */
.band--dark {
  background: var(--espresso);
  color: var(--on-dark-soft);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--canvas); }
/* A card that paints its own light surface inside a dark band has to opt back
   out of the rule above, or its heading ends up cream on white. */
.band--dark :is(.ccrd, .card-light) :is(h1, h2, h3, h4) { color: var(--ink); }
.band--dark .label { color: var(--sand); }
.band--dark .lead  { color: var(--on-dark-soft); }

/* Seams. A section's padding exists to separate two different surfaces. Where
   two neighbours share a surface there is no edge to announce, so the facing
   paddings simply stack into 200px of empty colour. Drop the second one's top
   padding and let the first one's bottom padding be the whole break: a bigger
   gap where the colour changes, a smaller one where it does not. */
.band--soft    + .band--soft,
.band--warm    + .band--warm,
.band--dark    + .band--dark,
.band--surface + .band--surface,
.band:not(.band--soft):not(.band--warm):not(.band--dark):not(.band--surface)
  + .band:not(.band--soft):not(.band--warm):not(.band--dark):not(.band--surface):not(.finale) {
  padding-top: 0;
}

.stack   > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head .label { margin-bottom: var(--s-4); }
.section-head h2 + p { margin-top: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Editorial split — image one side, copy the other, alternating */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: center;
}
.split--reverse > *:first-child { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--s-7); }
  .split--reverse > *:first-child { order: 0; }
}

/* ---------- 5. BUTTONS --------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1.15rem 2rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease);
  min-height: 52px;
  text-align: center;
}

/* Wipe-fill hover. Reads as considered rather than decorative. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mocha-deep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-base) var(--ease);
  z-index: -1;
}
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: scale(0.975); }

.btn--primary {
  background: var(--mocha);
  color: #FBF8F4;
}
.btn--primary:hover { color: #FFF; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover { color: var(--canvas); border-color: var(--ink); }

.btn--ink {
  background: var(--ink);
  color: var(--canvas);
}
.btn--ink::before { background: var(--mocha); }

.btn--on-dark {
  background: var(--canvas);
  color: var(--ink);
}
.btn--on-dark::before { background: var(--mocha-soft); }
.btn--on-dark:hover { color: var(--ink); }

.btn--ghost-dark {
  background: transparent;
  color: var(--canvas);
  border-color: var(--line-dark);
}
.btn--ghost-dark::before { background: var(--canvas); }
.btn--ghost-dark:hover { color: var(--ink); border-color: var(--canvas); }

.btn--lg   { padding: 1.35rem 2.6rem; font-size: 1rem; min-height: 60px; }
.btn--full { width: 100%; }

.btn__arrow { transition: transform var(--t-base) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Quiet text link with a rule that grows */
.tlink {
  position: relative;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 2px;
}
.tlink::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }

.microcopy {
  font-size: var(--t-cap);
  color: var(--muted);
  line-height: 1.5;
}
.band--dark .microcopy { color: var(--on-dark-soft); }

/* ---------- 6. SURFACES -------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card--flat { background: transparent; }
.card--hover:hover { border-color: var(--line-strong); transform: translateY(-3px); }

.card-dark {
  background: var(--espresso-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mocha);
  background: rgba(116, 78, 62, 0.07);
  border: 1px solid rgba(116, 78, 62, 0.16);
  border-radius: var(--r-pill);
  padding: 0.5rem 0.95rem;
  line-height: 1;
}
.pill--dark {
  color: var(--sand);
  background: rgba(201, 168, 143, 0.1);
  border-color: rgba(201, 168, 143, 0.22);
}

.rule { height: 1px; background: var(--line); border: 0; }
.band--dark .rule { background: var(--line-dark); }

/* Photography — the only shadow in the system lives here */
.photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--canvas-warm);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--raised { box-shadow: var(--shadow-photo); }
.photo--tall  { aspect-ratio: 4 / 5; }
.photo--wide  { aspect-ratio: 3 / 2; }
.photo--square{ aspect-ratio: 1 / 1; }

/* ---------- 7. SCROLL REVEAL --------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Photographs uncover rather than fade — feels physical */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

[data-reveal="scale"] { opacity: 0; transform: scale(0.965); }
[data-reveal="scale"].is-in { opacity: 1; transform: none; }

/* Per-line headline reveal */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.is-in .line-mask > span,
.line-mask.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal="clip"], [data-reveal="scale"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .line-mask > span { transform: none !important; }
}

/* ---------- 8. UTILITIES ------------------------------------------------- */

.u-center   { text-align: center; }
.u-mt-3     { margin-top: var(--s-3); }
.u-mt-4     { margin-top: var(--s-4); }
.u-mt-5     { margin-top: var(--s-5); }
.u-mt-6     { margin-top: var(--s-6); }
.u-mt-7     { margin-top: var(--s-7); }
.u-mt-8     { margin-top: var(--s-8); }
.u-mb-5     { margin-bottom: var(--s-5); }
.u-mb-6     { margin-bottom: var(--s-6); }
.u-muted    { color: var(--muted); }
.u-ink      { color: var(--ink); }
.u-measure  { max-width: var(--max-r); }
.u-nowrap   { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--ink); color: var(--canvas);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 500;
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: var(--s-4); }