/* Vicinity — national custom-candle site (storefront/site/).
 *
 * Shared design system for the 3-page no-build static site (Home,
 * Design Your Candle, About). One stylesheet linked by every page so the
 * three stay pixel-identical — Spectral + Roboto Mono, cream/brown/gold.
 * No build step: this is plain CSS served straight by Cloudflare Pages.
 *
 * Extracted verbatim from the original single-page index.html <style>
 * block (the split kept the design system unchanged) and extended with
 * the nav header, footer, and the cycling-mockups animation.
 */

html, body { margin: 0; padding: 0; }
.vc-corp {
  --vc-cream: #f4f2ef;
  --vc-ink: #1a1a1a;
  --vc-brown: #8a6f4e;
  --vc-gold: #c2a14d;
  --vc-line: #ddd7cd;
  --vc-muted: #6f685d;
  --vc-serif: "Spectral", Georgia, "Times New Roman", serif;
  --vc-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --vc-max: 1120px;
  background: var(--vc-cream);
  color: var(--vc-ink);
  font-family: var(--vc-serif);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.vc-corp * { box-sizing: border-box; }
.vc-corp img { display: block; max-width: 100%; height: auto; }
.vc-wrap { max-width: var(--vc-max); margin: 0 auto; padding: 0 24px; }
.vc-eyebrow { font-family: var(--vc-mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; font-weight: 500; color: var(--vc-brown); margin: 0 0 18px; }
.vc-corp h2 { font-family: var(--vc-serif); font-weight: 500; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.01em; }
.vc-accent { color: var(--vc-brown); font-style: italic; }
.vc-section { padding: clamp(48px, 6vw, 80px) 0; }
.vc-section--tight { padding: clamp(36px, 5vw, 60px) 0; }
.vc-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.vc-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vc-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12.5px; font-weight: 500; padding: 15px 26px; border-radius: 2px; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; cursor: pointer; border: 1px solid var(--vc-ink); }
.vc-btn--primary { background: var(--vc-ink); color: var(--vc-cream); }
.vc-btn--primary:hover { background: var(--vc-brown); border-color: var(--vc-brown); }
.vc-btn--ghost { background: transparent; color: var(--vc-ink); }
.vc-btn--ghost:hover { background: var(--vc-ink); color: var(--vc-cream); }

/* ---- Site nav (header) — cross-links across the 3 pages ---- */
.vc-nav { border-bottom: 1px solid var(--vc-line); background: var(--vc-cream); position: sticky; top: 0; z-index: 20; }
.vc-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 24px; max-width: var(--vc-max); margin: 0 auto; }
.vc-nav__mark { display: inline-grid; place-items: center; height: 28px; padding: 0 12px; border: 1.5px solid var(--vc-ink); font-family: var(--vc-mono); letter-spacing: .32em; font-size: 12px; text-transform: uppercase; color: var(--vc-ink); text-decoration: none; }
.vc-nav__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.vc-nav__links a { font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--vc-muted); text-decoration: none; }
.vc-nav__links a:hover, .vc-nav__links a[aria-current="page"] { color: var(--vc-ink); }
/* Current-page underline is for the plain links ONLY. Without the :not(), its
   higher specificity overrode the CTA pill's padding (9px -> 3px bottom) when
   the CTA was the current page, shrinking the whole header on
   design-your-candle/ vs Home/About (QA 2026-07-17). */
.vc-nav__links a[aria-current="page"]:not(.vc-nav__cta) { border-bottom: 1px solid var(--vc-brown); padding-bottom: 3px; }
.vc-nav__cta { color: var(--vc-ink) !important; border: 1px solid var(--vc-ink); border-radius: 2px; padding: 9px 16px; }
.vc-nav__cta:hover, .vc-nav__cta[aria-current="page"] { background: var(--vc-ink); color: var(--vc-cream) !important; }

.vc-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.vc-hero h1 { font-family: var(--vc-serif); font-weight: 500; font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 22px; }
.vc-hero__sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--vc-muted); max-width: 32em; margin: 0 0 30px; }
.vc-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.vc-hero__media-ph { width: 100%; aspect-ratio: 4 / 5; border-radius: 3px; background: linear-gradient(135deg, #e9e4db, #d8cfc0); display: grid; place-items: center; color: var(--vc-muted); font-family: var(--vc-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; text-align: center; padding: 20px; }
.vc-mark-ph { display:inline-grid; place-items:center; height:30px; padding:0 12px; margin-bottom:28px; border:1.5px solid var(--vc-ink); font-family:var(--vc-mono); letter-spacing:.34em; font-size:13px; text-transform:uppercase; }
.vc-scrollcue { margin-top: 34px; font-family: var(--vc-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vc-muted); display: inline-flex; align-items: center; gap: 10px; }
.vc-scrollcue::after { content: ""; width: 34px; height: 1px; background: var(--vc-muted); display: inline-block; }

/* ---- Cycling mockups — crossfade/rotate through a small frame set ----
   Each .vc-cycle__frame is one pre-rendered example; they stack absolutely
   and the animation steps opacity through them.

   MATTE FRAME: .vc-cycle-frame wraps the rotator with the same thin white
   matte used on the Shopify custom-candles hero (.vc-hero__frame there) so
   the two landing pages read as siblings — hairline border + 10px inset +
   soft shadow; the inner .vc-cycle keeps its 3px radius.

   N FRAMES: the crossfade generalizes to any count. Each frame is visible
   for one 1/N slice of the loop; per-frame animation-delay staggers them.
   Duration + keyframe name are set per rotator:
     - hero         = 2 frames -> vc-cycle-2, 9s   (base rule below)
     - format cards = 3 frames -> vc-cycle-3, 15s  (.vc-fmt__photo rotator)
   To add an Nth keyframe: on-window = 100/N %, with a ~2% crossfade lead. */
.vc-cycle-frame { padding: 10px; background: #fff; border: 1px solid var(--vc-line); border-radius: 5px; box-shadow: 0 8px 30px rgba(26,26,26,.07); }
.vc-cycle { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: #e3ddd2; }
.vc-cycle__frame { position: absolute; inset: 0; opacity: 0; animation: vc-cycle-2 9s infinite; }
.vc-cycle__frame:nth-child(1) { animation-delay: 0s; }
.vc-cycle__frame:nth-child(2) { animation-delay: 4.5s; }
.vc-cycle__frame > img { width: 100%; height: 100%; object-fit: cover; }
.vc-cycle__ph { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; background: linear-gradient(135deg, #e9e4db, #d8cfc0); color: var(--vc-muted); font-family: var(--vc-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; line-height: 1.8; }
.vc-cycle__dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.vc-cycle__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
/* Two-frame crossfade: each frame is visible for ~half the cycle. */
@keyframes vc-cycle-2 {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Format-card rotators: each .vc-fmt__photo is a 3-frame crossfade of real
   examples for THAT format (3oz / 9oz). Frames reuse .vc-cycle__frame (absolute
   stack + opacity) inside the photo box. 15s loop = 5s per frame; each frame
   holds for one 1/3 = 33.33% slice with a ~2% crossfade lead in/out. */
.vc-fmt__photo .vc-cycle__frame { animation-name: vc-cycle-3; animation-duration: 15s; }
.vc-fmt__photo .vc-cycle__frame:nth-child(1) { animation-delay: 0s; }
.vc-fmt__photo .vc-cycle__frame:nth-child(2) { animation-delay: 5s; }
.vc-fmt__photo .vc-cycle__frame:nth-child(3) { animation-delay: 10s; }
@keyframes vc-cycle-3 {
  0%      { opacity: 0; }
  2%      { opacity: 1; }
  31.33%  { opacity: 1; }
  33.33%  { opacity: 0; }
  100%    { opacity: 0; }
}
/* HELD Fairmont = a 4th frame in the 9oz card ONLY. To enable: uncomment the
   4th <div.vc-cycle__frame> in the 9oz card, add class vc-fmt__photo--4 to that
   card's photo box, and uncomment the block below. 20s loop = 5s/frame, 1/4 = 25%. */
/*
.vc-fmt__photo--4 .vc-cycle__frame { animation-name: vc-cycle-4; animation-duration: 20s; }
.vc-fmt__photo--4 .vc-cycle__frame:nth-child(4) { animation-delay: 15s; }
@keyframes vc-cycle-4 {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  23%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}
*/
@media (prefers-reduced-motion: reduce) {
  .vc-cycle__frame { animation: none; }
  .vc-cycle__frame:nth-child(1) { opacity: 1; }
}

/* ---- Examples showcase header (Formats section h2 + sub) ---- */
.vc-ex__head { max-width: 42em; margin-bottom: 32px; }
.vc-ex__sub { color: var(--vc-muted); font-size: 17px; margin: 0; }

.vc-gallery__head { max-width: 38em; margin-bottom: 40px; }
.vc-gallery__sub { color: var(--vc-muted); font-size: 17px; }
.vc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vc-card figure { margin: 0; }
.vc-card__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; background: #e3ddd2; }
.vc-card figcaption { font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vc-muted); margin-top: 14px; }
/* Cross-link card — replaces the live Route 1 widget; points at Shopify. */
.vc-cross { border: 1px solid var(--vc-line); border-radius: 6px; background: #faf8f5; padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; }
.vc-cross__tag { font-family: var(--vc-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--vc-gold); margin: 0 0 14px; }
.vc-cross h3 { font-family: var(--vc-serif); font-weight: 500; font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.vc-cross p { color: var(--vc-muted); margin: 0; max-width: 38em; }
.vc-cross__cta { white-space: nowrap; }
.vc-why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; margin-top: 8px; }
.vc-why__item { border-top: 1px solid var(--vc-line); padding-top: 20px; }
.vc-why__item b { display: block; font-family: var(--vc-serif); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.vc-why__item span { color: var(--vc-muted); }
.vc-formats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.vc-fmt { background: var(--vc-ink); color: var(--vc-cream); border-radius: 4px; padding: clamp(28px, 3.5vw, 44px); }
.vc-fmt__label { font-family: var(--vc-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: var(--vc-gold); margin-bottom: 18px; }
.vc-fmt h3 { font-family: var(--vc-serif); font-weight: 500; font-size: 30px; margin: 0 0 16px; }
.vc-fmt__line { color: #cfc8bb; margin: 0 0 18px; }
.vc-fmt__uses { font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9384; border-top: 1px solid #333; padding-top: 16px; }
.vc-proc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 8px; }
/* Three tiers per step: big display numeral, serif title, 17px body. */
.vc-proc__n { font-family: var(--vc-serif); font-weight: 500; font-size: clamp(52px, 5.5vw, 64px); line-height: 1; letter-spacing: -0.01em; color: var(--vc-gold); margin: 0 0 6px; }
.vc-proc h3 { font-family: var(--vc-serif); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0 0 12px; }
.vc-proc p { color: var(--vc-muted); font-size: 17px; margin: 0; }
.vc-seg { background: var(--vc-ink); color: var(--vc-cream); }
.vc-seg__inner { font-family: var(--vc-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12.5px; text-align: center; line-height: 2.4; color: #cfc8bb; }
.vc-seg__dot { color: var(--vc-gold); padding: 0 10px; }
.vc-story__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.vc-story__media-ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: linear-gradient(135deg, #e9e4db, #d8cfc0); display: grid; place-items: center; color: var(--vc-muted); font-family: var(--vc-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; text-align: center; padding: 20px; }
.vc-story p { color: var(--vc-muted); font-size: 17px; max-width: 34em; }
.vc-story__roots { display: inline-block; margin-top: 22px; font-family: var(--vc-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--vc-brown); text-decoration: none; border-bottom: 1px solid var(--vc-brown); padding-bottom: 3px; }
.vc-story__roots:hover { color: var(--vc-ink); border-color: var(--vc-ink); }
/* D5 (2026-07-18): the two credentials read as a single quiet eyebrow line with
   a gold middot separator — replaces the solid black slab bar that sat heavy on
   the cream page. Cream/brown letterspaced small caps, hairline gold dot, no
   dark fill; matches the .vc-eyebrow labels and the .vc-seg gold-dot row. Both
   phrases are kept exactly (see about/index.html).
   ALTERNATIVE (Steve's other option — hairline gold outline "badges"): comment
   out the three rules below and uncomment the block beneath them.
   Steve judges the look in browser. */
.vc-badgebar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 26px; background: none; }
.vc-badgebar span { font-family: var(--vc-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vc-brown); padding: 0; }
.vc-badgebar span + span::before { content: "·"; color: #b8935a; padding: 0 12px; font-size: 13px; }
/* ALT — hairline gold outline badges (no dark fill):
.vc-badgebar { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; background: none; }
.vc-badgebar span { font-family: var(--vc-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vc-brown); padding: 8px 16px; border: 1px solid #b8935a; border-radius: 2px; }
.vc-badgebar span + span::before { content: none; }
*/
.vc-close { background: var(--vc-ink); color: var(--vc-cream); text-align: center; }
.vc-close h2 { font-size: clamp(30px, 5vw, 52px); margin: 0 0 18px; }
.vc-close__roots { display:inline-block; margin: 6px 0 26px; font-family: var(--vc-serif); font-style: italic; font-size: 18px; color: var(--vc-cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--vc-gold); }
.vc-close__contact { font-family: var(--vc-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--vc-gold); }
.vc-close__contact a { color: inherit; text-decoration: none; }
.vc-widget-anchor { scroll-margin-top: 24px; }

/* ---- Site footer — quiet Route 1 cross-link + nav echo ---- */
.vc-foot { border-top: 1px solid var(--vc-line); background: var(--vc-cream); }
.vc-foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 34px 24px; max-width: var(--vc-max); margin: 0 auto; }
.vc-foot__links { display: flex; flex-wrap: wrap; gap: 22px; }
.vc-foot__links a { font-family: var(--vc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--vc-muted); text-decoration: none; }
.vc-foot__links a:hover { color: var(--vc-ink); }
.vc-foot__r1 { font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--vc-brown); text-decoration: none; border-bottom: 1px solid var(--vc-brown); padding-bottom: 2px; }
.vc-foot__r1:hover { color: var(--vc-ink); border-color: var(--vc-ink); }

@media (max-width: 860px) {
  .vc-hero__grid { grid-template-columns: 1fr; }
  .vc-hero__media { order: -1; }
  .vc-cards { grid-template-columns: 1fr 1fr; }
  .vc-why__grid, .vc-formats__grid, .vc-story__grid { grid-template-columns: 1fr; }
  .vc-cross { grid-template-columns: 1fr; }
  .vc-proc__grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 540px) {
  .vc-cards { grid-template-columns: 1fr; }
  .vc-nav__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- Route 2 form ---- */
.vc-r2__intro { max-width: 40em; margin-bottom: 40px; }
.vc-r2__sub { color: var(--vc-muted); font-size: 17px; }
.vc-r2__form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; align-items: start; }
.vc-field { display: flex; flex-direction: column; min-width: 0; }
.vc-field[hidden] { display: none; }
.vc-field--full { grid-column: 1 / -1; }
.vc-field { position: relative; }
.vc-field > label,
.vc-field__labelrow > label { font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--vc-ink); margin-bottom: 8px; }
/* Label + "?" popover toggle share one row (see .vc-pop below). */
.vc-field__labelrow { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.vc-field__labelrow > label { margin-bottom: 0; }
.vc-field input[type="text"], .vc-field input[type="email"], .vc-field input[type="url"], .vc-field input[type="number"], .vc-field textarea {
  font-family: var(--vc-serif); font-size: 16px; color: var(--vc-ink); background: #fff;
  border: 1px solid var(--vc-line); border-radius: 3px; padding: 12px 14px; width: 100%;
}
.vc-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.vc-field select {
  font-family: var(--vc-serif); font-size: 16px; color: var(--vc-ink); background: #fff;
  border: 1px solid var(--vc-line); border-radius: 3px; padding: 12px 14px; width: 100%;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a6f4e' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.vc-field select[hidden] { display: none; }
.vc-field input:focus, .vc-field select:focus, .vc-field textarea:focus { outline: none; border-color: var(--vc-brown); box-shadow: 0 0 0 3px rgba(138,111,78,.12); }
.vc-field .vc-reveal { margin-top: 10px; }
.vc-field input[hidden], .vc-field textarea[hidden] { display: none; }
.vc-field.is-invalid select { border-color: #a23a2e; background-color: #fdf6f5; }
.vc-field small { color: var(--vc-muted); font-size: 13px; margin-top: 6px; }
.vc-field--caps input { text-transform: uppercase; }
.vc-field--caps input::placeholder { text-transform: none; }
.vc-err { color: #a23a2e; font-size: 13px; margin: 7px 0 0; display: none; }
.vc-err.is-on { display: block; }
.vc-warn { color: var(--vc-brown); font-size: 13px; margin: 7px 0 0; display: none; }
.vc-warn.is-on { display: block; }
.vc-field.is-invalid input, .vc-field.is-invalid textarea { border-color: #a23a2e; background: #fdf6f5; }
.vc-field.is-invalid > label,
.vc-field.is-invalid .vc-field__labelrow > label { color: #a23a2e; }
.vc-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vc-toggle__opt { position: relative; cursor: pointer; display: block; }
.vc-toggle__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.vc-toggle__card { display: block; border: 1px solid var(--vc-line); border-radius: 4px; padding: 16px 18px; background: #fff; height: 100%; }
.vc-toggle__opt input:checked + .vc-toggle__card { border-color: var(--vc-brown); background: #faf6f0; box-shadow: inset 0 0 0 1px var(--vc-brown); }
.vc-toggle__opt input:focus-visible + .vc-toggle__card { box-shadow: 0 0 0 3px rgba(138,111,78,.18); }
.vc-toggle__name { display: block; font-family: var(--vc-serif); font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.vc-toggle__sub { font-family: var(--vc-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--vc-muted); line-height: 1.5; }
.vc-color { display: flex; gap: 12px; align-items: stretch; }
.vc-color input[type="color"] { width: 54px; min-width: 54px; height: 48px; padding: 4px; border: 1px solid var(--vc-line); border-radius: 3px; background: #fff; cursor: pointer; }
.vc-color input[type="text"] { flex: 1; }
.vc-field input[type="file"] { font-family: var(--vc-mono); font-size: 12.5px; color: var(--vc-muted); padding: 11px 12px; background: #fff; border: 1px dashed var(--vc-line); border-radius: 3px; width: 100%; }
.vc-field input[type="file"]::file-selector-button { font-family: var(--vc-mono); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding: 8px 14px; margin-right: 14px; border: 1px solid var(--vc-ink); background: var(--vc-ink); color: var(--vc-cream); border-radius: 2px; cursor: pointer; }
/* Suggest buttons + tappable suggestion chips (inspired-by / back message). */
.vc-suggest { display: flex; align-items: center; gap: 12px; margin-top: 9px; flex-wrap: wrap; }
.vc-suggest__btn {
  font-family: var(--vc-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid var(--vc-brown); border-radius: 2px;
  background: transparent; color: var(--vc-brown); cursor: pointer;
}
.vc-suggest__btn:hover { background: #faf6f0; }
.vc-suggest__btn[disabled] { opacity: .55; cursor: default; }
.vc-suggest__note { font-size: 12.5px; color: var(--vc-muted); }
.vc-suggest__chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.vc-suggest__chips:empty { display: none; }
.vc-chip {
  font-family: var(--vc-serif); font-size: 14.5px; line-height: 1.45; text-align: left;
  padding: 9px 14px; border: 1px solid var(--vc-line); border-radius: 16px;
  background: #fff; color: var(--vc-ink); cursor: pointer; max-width: 100%;
}
.vc-chip:hover { border-color: var(--vc-brown); background: #faf6f0; }

/* Debounced live estimate under the format toggle. */
.vc-live-est {
  font-family: var(--vc-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--vc-brown); margin: 10px 0 0;
}
.vc-live-est[hidden] { display: none; }

.vc-r2__submit { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 6px; }
.vc-r2__submit .vc-btn[disabled] { opacity: .6; cursor: default; }
.vc-r2__formerr { color: #a23a2e; font-family: var(--vc-mono); font-size: 12.5px; letter-spacing: .04em; display: none; }
.vc-r2__formerr.is-on { display: block; }
.vc-r2__confirm { max-width: 40em; }
.vc-r2__estimate { font-family: var(--vc-mono); font-size: 13px; letter-spacing: .04em; color: var(--vc-brown); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--vc-line); }

/* ---- Form section headers ("The basics" / "Your story & look") ---- */
.vc-r2__section {
  font-family: var(--vc-mono); text-transform: uppercase; letter-spacing: .2em;
  font-size: 12px; font-weight: 500; color: var(--vc-brown);
  margin: 14px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--vc-line);
}
.vc-r2__form > .vc-r2__section:first-child { margin-top: 0; }

/* ---- 9oz message candle-back add-on toggle (checkbox + "add-on" tag) ---- */
.vc-addon {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--vc-line); border-radius: 4px; background: #fff; cursor: pointer;
}
.vc-addon[hidden] { display: none; }
.vc-addon input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--vc-brown); cursor: pointer; flex: none; }
.vc-addon:has(input:checked) { border-color: var(--vc-brown); background: #faf6f0; }
.vc-addon__text { font-size: 15px; color: var(--vc-ink); }
.vc-addon__tag {
  font-family: var(--vc-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vc-brown); border: 1px solid var(--vc-brown); border-radius: 2px; padding: 3px 7px; margin-left: auto;
}

/* ---- Scent library/custom toggle (reuses .vc-toggle) — name-only cards ---- */
.vc-toggle--compact { margin-bottom: 12px; }
.vc-toggle--compact .vc-toggle__card { padding: 13px 16px; }
.vc-toggle--compact .vc-toggle__name { margin-bottom: 0; font-size: 15px; }

/* ---- "?" placement popovers ---- */
.vc-pop__toggle {
  width: 20px; height: 20px; flex: none; padding: 0; border-radius: 50%;
  border: 1px solid var(--vc-brown); background: transparent; color: var(--vc-brown);
  font-family: var(--vc-mono); font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center;
}
.vc-pop__toggle:hover { background: #faf6f0; }
.vc-pop__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(138,111,78,.18); }
.vc-pop__toggle[aria-expanded="true"] { background: var(--vc-brown); color: var(--vc-cream); }
.vc-pop {
  position: absolute; z-index: 30; top: 30px; left: 0; width: 100%; max-width: 344px;
  background: #fff; border: 1px solid var(--vc-brown); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(26,26,26,.16); padding: 14px 14px 12px;
}
.vc-pop[hidden] { display: none; }
.vc-pop__close {
  position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0;
  border: none; background: transparent; color: var(--vc-muted);
  font-size: 17px; line-height: 1; cursor: pointer; border-radius: 3px;
}
.vc-pop__close:hover { color: var(--vc-ink); background: #f4f2ef; }
/* Landscape placement art (300×178 SVG): show it wide/legible, scale down on
   narrow mobile, never overflow horizontally. */
.vc-pop__art { color: var(--vc-muted); max-width: 100%; margin: 2px auto 10px; }
.vc-pop__art svg,
.vc-pop__art img { width: 100%; height: auto; display: block; border-radius: 4px; }
.vc-pop__cap { font-family: var(--vc-mono); font-size: 11px; letter-spacing: .04em; color: var(--vc-muted); text-align: center; margin: 0; }

@media (max-width: 640px) {
  .vc-r2__form { grid-template-columns: 1fr; }
  .vc-toggle { grid-template-columns: 1fr; }
  .vc-toggle--compact { grid-template-columns: 1fr 1fr; }
}

/* ---- Real wordmark (self-hosted; replaces the old text mark) ---- */
.vc-nav__logo { display: inline-flex; align-items: center; text-decoration: none; }
.vc-nav__logo img { height: 26px; width: auto; }
.vc-hero__logo { width: clamp(180px, 22vw, 260px); height: auto; margin-bottom: 26px; }

/* ---- Process stepper (Design Your Candle progress strip) ---- */
.vc-stepper { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; padding: 0; }
.vc-step { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; min-width: 180px; padding: 14px 16px; border: 1px solid var(--vc-line); border-radius: 4px; background: #faf8f5; opacity: .55; transition: opacity .18s ease, border-color .18s ease, background .18s ease; }
.vc-step__n { font-family: var(--vc-mono); font-size: 12px; letter-spacing: .08em; color: var(--vc-muted); border: 1px solid var(--vc-line); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.vc-step__label { font-family: var(--vc-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--vc-muted); }
.vc-step.is-active { opacity: 1; border-color: var(--vc-brown); background: #faf6f0; }
.vc-step.is-active .vc-step__n { border-color: var(--vc-brown); color: var(--vc-cream); background: var(--vc-brown); }
.vc-step.is-active .vc-step__label { color: var(--vc-ink); }
.vc-step.is-done { opacity: 1; }
.vc-step.is-done .vc-step__n { border-color: var(--vc-gold); color: var(--vc-gold); }
/* C9 (2026-07-18): centered under the whole stepper — it used to sit
   left-aligned under step 01 while the active state was 02. */
.vc-stepper__note { font-family: var(--vc-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--vc-brown); margin: 0 0 26px; text-align: center; }
.vc-stepper__note[hidden] { display: none; }
/* C8: live message character counter ("97/140"), quiet mono under the field. */
.vc-count { font-family: var(--vc-mono); font-size: 11px; letter-spacing: .04em; color: var(--vc-muted); text-align: right; margin: 6px 0 0; }
.vc-count[hidden] { display: none; }
.vc-count.is-over { color: #a23a2e; }

/* D3 (2026-07-18): accumulative upload tracker — one removable chip per picked
   file + a "3/10 files" count. Quiet pill system, matching the color chips. */
.vc-filelist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vc-filelist:empty { display: none; }
.vc-filechip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: .02em; padding: 6px 6px 6px 12px; border: 1px solid var(--vc-line); border-radius: 20px; background: #fff; color: var(--vc-ink); }
.vc-filechip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15em; }
.vc-filechip__size { color: var(--vc-muted); flex: none; }
.vc-filechip__rm { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--vc-cream); color: var(--vc-brown); font-size: 15px; line-height: 1; cursor: pointer; }
.vc-filechip__rm:hover { background: var(--vc-brown); color: #fff; }
.vc-count--files { text-align: left; }

/* ---- Color direction chips (primary + secondary) ---- */
.vc-chipset { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-colorchip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: .03em; padding: 7px 13px 7px 9px; border: 1px solid var(--vc-line); border-radius: 20px; background: #fff; color: var(--vc-ink); cursor: pointer; }
.vc-colorchip__sw { width: 16px; height: 16px; border-radius: 50%; background: var(--chip, #ccc); border: 1px solid rgba(0,0,0,.18); flex: none; }
.vc-colorchip:hover { border-color: var(--vc-brown); }
.vc-colorchip.is-selected { border-color: var(--vc-brown); background: #faf6f0; box-shadow: inset 0 0 0 1px var(--vc-brown); }
.vc-colorchip--custom { gap: 7px; padding-left: 8px; }
.vc-colorchip__input { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; overflow: hidden; }
.vc-colorchip__input::-webkit-color-swatch-wrapper { padding: 0; }
.vc-colorchip__input::-webkit-color-swatch { border: none; border-radius: 50%; }

/* ---- Format card photo = a 3-frame example rotator for that format ----
   position:relative + overflow:hidden so the absolutely-stacked .vc-cycle__frame
   examples crop to the box. Box aspect = 3/4 portrait to match the source tiles
   (900x1200), so object-fit:cover shows the full candle with ~no crop. */
.vc-fmt__photo { position: relative; aspect-ratio: 3 / 4; margin-bottom: 20px; border-radius: 3px; overflow: hidden; background: #e3ddd2; }

/* ---- Closing CTA (button on the ink section) + tightened top gap ---- */
.vc-close--snug { padding-top: clamp(36px, 5vw, 60px); }
.vc-close__cta { margin: 8px 0 24px; }
.vc-btn--onink { background: var(--vc-cream); color: var(--vc-ink); border-color: var(--vc-cream); }
.vc-btn--onink:hover { background: var(--vc-gold); border-color: var(--vc-gold); color: var(--vc-ink); }

@media (max-width: 540px) {
  .vc-stepper { flex-direction: column; }
  .vc-step { flex: 1 1 auto; }
}