/* Vicinity — national custom-candle site (storefront/site/).
 *
 * Shared design system for the 3-page no-build static site (Home,
 * Custom Concept, 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(56px, 8vw, 104px) 0; }
.vc-section--tight { padding: clamp(40px, 6vw, 72px) 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); }
.vc-nav__links a[aria-current="page"] { 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 { 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 ----
   Structure-only (placeholder frames for now). Each .vc-cycle__frame is
   one pre-rendered example; they stack and the animation steps opacity
   through them. Extensible to N frames: the keyframes below cover 2; add
   nth-child delays if a third example lands. TODO(asset): replace the
   placeholder divs with real 3oz / 9oz custom renders. */
.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; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-cycle__frame { animation: none; }
  .vc-cycle__frame:nth-child(1) { opacity: 1; }
}

.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; }
.vc-proc__n { font-family: var(--vc-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--vc-gold); margin-bottom: 14px; }
.vc-proc h3 { font-family: var(--vc-serif); font-weight: 500; font-size: 23px; margin: 0 0 10px; }
.vc-proc p { color: var(--vc-muted); 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); }
.vc-badgebar { display: inline-flex; gap: 0; margin-top: 26px; background: var(--vc-ink); color: var(--vc-cream); border-radius: 3px; overflow: hidden; }
.vc-badgebar span { font-family: var(--vc-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 20px; }
.vc-badgebar span + span { border-left: 1px solid #333; }
.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-badgebar { flex-direction: column; }
  .vc-badgebar span + span { border-left: 0; border-top: 1px solid #333; }
  .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 > label { font-family: var(--vc-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--vc-ink); margin-bottom: 8px; }
.vc-field input[type="text"], .vc-field input[type="email"], .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 { 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); }
@media (max-width: 640px) {
  .vc-r2__form { grid-template-columns: 1fr; }
  .vc-toggle { grid-template-columns: 1fr; }
}