/* Rose Ventures — site styles: component classes, hover/focus states,
 * responsive breakpoints and scroll-reveal. Layout lives inline in the
 * markup (from the design); this file owns interaction + component styling. */

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s var(--ease-standard), border-color .3s, box-shadow .3s, color .3s;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: rgba(255, 255, 255, 0.88);
}
.site-header.scrolled {
  background: rgba(251, 248, 245, 0.86);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--navy-700);
}
.logo-stack { position: relative; display: inline-flex; align-items: center; height: 46px; }
.logo-light, .logo-dark { height: 46px; width: auto; display: block; transition: opacity .3s var(--ease-standard); }
.logo-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header.scrolled .logo-light { opacity: 0; }
.site-header.scrolled .logo-dark { opacity: 1; }

.nav-link {
  color: inherit; font-family: var(--font-label); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.nav-link:hover { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-label); font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1; cursor: pointer;
  border-radius: var(--radius-button); border: 1.5px solid transparent;
  transition: all .18s var(--ease-standard); text-decoration: none;
}
.btn--sm { font-size: 13px; padding: 0 18px; height: 36px; }
.btn--md { font-size: 14px; padding: 0 24px; height: 44px; }
.btn--lg { font-size: 15px; padding: 0 30px; height: 54px; }
.btn--block { width: 100%; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-accent); color: #fff; }
.btn--dark { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn--dark:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.32); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,0.09); border-color: #fff; color: #fff; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Text links with arrows ---------- */
.link-accent { color: var(--accent); font-family: var(--font-label); text-transform: uppercase; font-weight: 600; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 8px; }
.link-accent:hover { color: var(--accent-hover); }
.link-rose { color: var(--rose-300); }
.link-rose:hover { color: #fff; }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); font-size: var(--text-xs);
  font-weight: 500; color: var(--text-accent);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow--on-dark { color: var(--rose-300); }

/* ---------- Contact info rows / links ---------- */
.contact-link { display: inline-flex; align-items: center; gap: 15px; color: #fff; }
.contact-link:hover { color: var(--rose-300); }
.footer-link { color: var(--text-on-dark-muted); font-size: 14.5px; }
.footer-link:hover { color: #fff; }

/* ---------- Cards with hover lift ---------- */
.lift { transition: transform .2s var(--ease-standard), box-shadow .2s, background .2s; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lift-dark:hover { transform: translateY(-4px); background: rgba(255,255,255,0.08); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-family: var(--font-label); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 15px; color: var(--text-strong);
  background: var(--white); border: 1px solid var(--border-strong);
  border-radius: var(--radius-input); padding: 12px 14px; width: 100%;
  transition: border-color .15s var(--ease-standard), box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring-focus);
}
.field--error input, .field--error textarea, .field--error select { border-color: var(--danger-600); }
.field-error { color: var(--danger-600); font-size: 12.5px; display: none; }
.field--error .field-error { display: block; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Decorative animation ---------- */
@keyframes rv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes rv-glow  { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
.rv-float { animation: rv-float 7s var(--ease-in-out) infinite; }
.rv-glow  { animation: rv-glow 6s ease-in-out infinite; }

/* ---------- Mobile menu ---------- */
.burger { display: none; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: inherit; padding: 6px; }
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--gradient-navy); flex-direction: column; padding: 24px clamp(20px,6vw,40px); display: none; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: #fff; font-family: var(--font-serif); font-size: 34px; padding: 12px 0; }

/* Turnstile widget. The embed is data-appearance="interaction-only", so on the happy
   path nothing is drawn — but the container is not empty: Turnstile still injects a
   wrapper holding the hidden cf-turnstile-response input. It collapses to zero height
   on its own, so it needs no help. Do not try to hide it with display:none; the widget
   has to be able to draw itself the moment a real visitor is challenged. */
.cf-turnstile { margin-top: 2px; }

/* ==========================================================================
   Layout primitives — used by the venture/landing pages. These exist so new
   pages are written with tokenised classes instead of inline style attributes.
   ========================================================================== */
.container { max-width: var(--container-max); margin: 0 auto; }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding: clamp(64px, 9vw, 100px) clamp(20px, 5vw, 40px); }
.section--tight { padding-top: clamp(40px, 5vw, 56px); padding-bottom: clamp(40px, 5vw, 56px); }
.section--cream { background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section--navy { background: var(--navy-800); color: var(--text-on-dark); position: relative; overflow: hidden; }
.section--navy h2, .section--navy h3 { color: #fff; }
/* The single rose radial glow the design system prescribes for navy bands. */
.section--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 420px at 88% 8%, rgba(180, 120, 106, 0.16), transparent 62%);
}
.section--navy > * { position: relative; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.grid--split-wide { grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 64px); align-items: center; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { background: var(--gradient-navy-hero); color: var(--text-on-dark); position: relative; overflow: hidden;
  padding: clamp(132px, 16vh, 176px) clamp(20px, 5vw, 40px) clamp(56px, 8vh, 84px); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 460px at 82% 14%, rgba(180, 120, 106, 0.28), transparent 62%);
}
.page-hero > * { position: relative; }
.page-hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); margin: 20px 0 20px; }
.page-hero .lede { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; color: var(--text-on-dark-muted); max-width: 620px; margin: 0; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-family: var(--font-label); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-300); }
.breadcrumb a { color: inherit; opacity: .8; }
.breadcrumb a:hover { color: #fff; opacity: 1; }
.breadcrumb span { opacity: .5; margin: 0 8px; }

/* ---------- Cards ---------- */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 32px); box-shadow: var(--shadow-md); }
.card--soft { background: var(--cream); box-shadow: none; }
.card--inverse { background: rgba(255, 255, 255, 0.05); border-color: var(--navy-700); box-shadow: none; color: var(--text-on-dark); }
.card--inverse h3 { color: #fff; }
.card__title { font-family: var(--font-serif); font-size: 21px; color: var(--text-strong); margin: 0 0 8px; font-weight: var(--fw-semibold); }
.card--inverse .card__title { color: #fff; }
.card__body { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; }
.card--inverse .card__body { color: var(--text-on-dark-muted); }

/* Icon chip — small rose-tinted square holding a Lucide glyph. */
.icon-chip { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--rose-100); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; }
.icon-chip--solid { background: var(--rose-600); color: #fff; }

/* ---------- Chips / badges ---------- */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--navy-700);
  background: var(--rose-100); border-radius: var(--radius-pill); padding: 7px 13px; }
.chip i { color: var(--accent); width: 15px; height: 15px; }
.badge { display: inline-flex; align-items: center; font-family: var(--font-label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--rose-100); color: var(--rose-800); }

/* ---------- Rose divider ---------- */
.rose-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: clamp(36px, 5vw, 52px) 0; }
.rose-divider::before, .rose-divider::after { content: ""; height: 1px; width: clamp(40px, 12vw, 120px); background: var(--border-accent); }
.rose-divider i { color: var(--accent); width: 16px; height: 16px; }

/* ---------- Prose ---------- */
.prose p { font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.75; color: var(--text-muted); margin: 0 0 18px; max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 20px; }
.prose h3 { font-size: clamp(20px, 1.7vw, 24px); margin: 34px 0 12px; }
.prose strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.section--navy .prose p { color: var(--text-on-dark-muted); }
.section--navy .prose strong { color: #fff; }

/* Answer block — the direct, self-contained answer that leads a section. Kept
   visible and unhidden so search engines and AI crawlers can extract it. */
.answer { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; color: var(--text-strong);
  border-left: 2px solid var(--accent); padding: 2px 0 2px 20px; margin: 0 0 26px; max-width: 64ch; font-weight: var(--fw-regular); }
.section--navy .answer { color: #fff; border-left-color: var(--rose-300); }

/* ---------- Steps ---------- */
.step { display: flex; gap: 16px; align-items: flex-start; }
.step__num { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--navy-800); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-label); font-size: 13px; font-weight: 600; }
.section--navy .step__num { background: var(--rose-600); }
.step__title { font-family: var(--font-serif); font-size: 18px; color: var(--text-strong); margin: 0 0 2px; font-weight: var(--fw-semibold); }
.section--navy .step__title { color: #fff; }
.step__body { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.section--navy .step__body { color: var(--text-on-dark-muted); }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.checklist i { color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.section--navy .checklist li { color: var(--text-on-dark-muted); }
.section--navy .checklist i { color: var(--rose-300); }

/* Compact variant, for a checklist sitting inside a card alongside body copy. */
.checklist--sm { gap: 9px; margin-top: 16px; }
.checklist--sm li { font-size: 14.5px; gap: 10px; }
.checklist--sm i { width: 15px; height: 15px; margin-top: 3px; }

/* ---------- FAQ ----------
   Answers are always visible, never collapsed. Hidden text is weighted lower by
   search engines and is harder for AI crawlers to extract, and these answers are
   the most citable content on the site. */
.faq { display: flex; flex-direction: column; }
.faq__item { padding: 26px 0; border-top: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 1px solid var(--border); }
.faq__q { font-family: var(--font-serif); font-size: clamp(18px, 1.5vw, 21px); color: var(--text-strong); margin: 0 0 10px; font-weight: var(--fw-semibold); }
.faq__a { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0; max-width: 72ch; }

/* ---------- Media frame ---------- */
.media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--cream); }
.media img { display: block; width: 100%; height: auto; }
.media--plain { border: none; box-shadow: none; background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid--split, .grid--split-wide, .grid--3 { grid-template-columns: 1fr !important; }
  .grid--4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .grid--2, .grid--4 { grid-template-columns: 1fr !important; }
}

@media (max-width: 980px) {
  .hero-grid, .about-grid, .graphics-grid, .auto-grid, .ai-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .hero-mark { order: -1; margin: 0 auto 8px !important; }
  .ai-grid { direction: ltr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 820px) {
  .nav-desktop { display: none !important; }
  .burger { display: inline-flex !important; }
}
@media (max-width: 640px) {
  .values-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .graphics-cards { grid-template-columns: 1fr 1fr !important; }
  .contact-form-row { grid-template-columns: 1fr !important; }
  .hide-sm { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rv-float, .rv-glow { animation: none !important; }
  html { scroll-behavior: auto; }
}