/* C · Dew, brand version (/brand/, html.v-brand): me:in Brand Identity Guidelines v1.0 (2025), on top of c.css.
   Colour (p. 15): Navy #000C36 and Very Peri #858EE5, the four steps between them (20/40/60/80%), and the sub colours
   #F8F7F3 and #FFFFFF (white is the default ground, p. 16). Type (pp. 19, 20): Wanted Sans for headlines, tracking -20;
   Noto Sans for text, tracking -10. Logo (p. 16): full colour on white, all Very Peri on navy. Motif (pp. 22, 23): the
   i's curve and dot, drawn pale and large; its dot falls like a drop, which is where C's water comes from now. */
html.v-brand.dir-c-dew {
  --navy: #000C36;
  --peri: #858EE5;
  --n20: #1B2659;
  --n40: #35407C;
  --n60: #505A9F;              /* labels and small accents: 6.4:1 on white, 6.0:1 on #F8F7F3 */
  --n80: #6A74C2;
  --warm: #F8F7F3;
  --peri-wash: #ECEEFB;        /* the pale peri the owner's own posts use behind the motif */
  --c-deep: var(--n60);
  --c-mid: var(--n80);
  --c-soft: #A3AAEE;
  --c-ink: var(--n40);
  --c-wash: var(--peri-wash);
  --pearl: #FFFFFF;
  --page: #FFFFFF;
  --muted: #3A4060;
  --label: var(--n60);
  --focus: var(--n60);
  --btn: var(--navy);
  --btn-hover: var(--n20);
  --btn-radius: 999px;
  --header-bg-blur: rgb(255 255 255 / .84);
  --foot-text: #E9EAF6;
  --foot-logo-bg: transparent;
  --display: "Wanted Sans", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --body: "Noto Sans", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --ko: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --display-weight: 700;
  --h-track: -.02em;
  --bk-field: var(--warm);
  --bk-hover: var(--peri-wash);
  --hl-text: #FFFFFF;
  --hl-ico: var(--peri);
  --hl-dot: var(--peri);
  --hl-font: 500 .9rem/1 var(--display);
}
html.v-brand.dir-c-dew body { letter-spacing: -.01em; }
html.v-brand.dir-c-dew .h1, html.v-brand.dir-c-dew .h2, html.v-brand.dir-c-dew .tx-head h3 { letter-spacing: -.02em; }
html.v-brand.dir-c-dew .treatments, html.v-brand.dir-c-dew .reviews { background: var(--warm); }
html.v-brand.dir-c-dew .s-top { --field: #FFFFFF; }
html.v-brand .tone-navy { --label: var(--peri); --focus: var(--peri); }

/* Logo: the traced SVG. Full colour on light grounds; all Very Peri on navy. */
.logo-svg { display: block; aspect-ratio: 6246 / 1926; height: auto; }
.logo-svg.on-light { color: var(--peri); fill: var(--navy); }
.logo-svg.on-navy { color: var(--peri); fill: var(--peri); }
.brand .logo-svg { width: 148px; }
.foot-logo .logo-svg { width: 150px; }
.foot-logo { display: grid; gap: 12px; padding: 0; background: none; }
.foot-slogan { font: 500 .95rem/1.3 var(--display); letter-spacing: -.01em; color: var(--peri); }
@media (max-width: 1023px) { .brand .logo-svg { width: 124px; } }

/* The motif behind the hero words: a pale arc that draws itself in, then the dot falls onto it and spreads a ring,
   like a drop landing. Reduced motion (or no script) shows it finished. */
.motif-hero { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.motif-hero .mo-arc { fill: none; stroke: #FFFFFF; stroke-width: 20; stroke-opacity: .62; }
.motif-hero .mo-dot { fill: #FFFFFF; fill-opacity: .8; }   /* pale like the arc, as in the guide's banner (p. 22) */
.motif-hero .mo-ring { fill: none; stroke: var(--peri); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.s-top > .copy { position: relative; z-index: 1; }
html.v-brand .s-top { overflow-x: clip; }   /* the motif may run off the edge; the page must not */
@media (min-width: 1024px) {
  .motif-hero { left: 0; top: 24%; width: 42vw; }
}
@media (max-width: 1023px) {
  .motif-hero { top: calc(var(--header-h) + 10px); right: -8vw; width: 58vw; max-width: 420px; }
  .motif-hero .mo-arc { stroke: var(--peri-wash); stroke-opacity: 1; }
  .motif-hero .mo-dot { fill: var(--peri-wash); fill-opacity: 1; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .motif-hero .mo-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mo-draw 1.5s .35s cubic-bezier(.6, .05, .25, 1) forwards; }
  .motif-hero .mo-dot { transform: translateY(-70px); opacity: 0; animation: mo-fall .7s 1.65s cubic-bezier(.3, 1.5, .5, 1) forwards; }
  .motif-hero .mo-ring { animation: mo-ring 1.1s 2.15s ease-out forwards; }
  @keyframes mo-draw { to { stroke-dashoffset: 0; } }
  @keyframes mo-fall { 0% { transform: translateY(-70px) scale(.9, 1.15); opacity: 0; } 55% { opacity: 1; transform: translateY(0) scale(1.18, .82); } 100% { transform: none; opacity: 1; } }
  @keyframes mo-ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
}

/* The strip: navy ground, white words, Very Peri icons; a small smile (the motif) between facts instead of a dot. */
html.v-brand .hl-list li + li::before { width: 18px; height: 12px; border-radius: 0; background: var(--hl-dot); -webkit-mask: url(/shared/img/motif-smile.svg) center / contain no-repeat; mask: url(/shared/img/motif-smile.svg) center / contain no-repeat; }

/* A band of the guide's pattern (p. 23) along the top of the navy footer. */
html.v-brand .site-footer::before { content: ""; display: block; height: 44px; margin-bottom: 28px; background: rgb(133 142 229 / .26); -webkit-mask: url(/shared/img/motif-pattern.svg) 0 0 / 56px 28px repeat; mask: url(/shared/img/motif-pattern.svg) 0 0 / 56px 28px repeat; }

/* Review stars and the How it works marks follow the brand steps (the tokens above); avatars too. */
html.v-brand.dir-c-dew .rv:nth-child(3n + 3) .rv-avatar { background: var(--navy); color: #FFFFFF; }