/* Victory Solutions: shared styles
   Most layout styling lives inline in each page (carried over 1:1 from the design canvas).
   This file holds the base, interaction states and responsive rules shared by every page. */

:root {
  --ink: #351e0f;
  --ink-2: #5e5044;
  --muted: #786a5e;
  --line: #f6f0e9;
  --bg: #fefdfb;
  --pink: #be4c00;
  --pink-hover: #a24100;
  --purple: #97440c;
  --grad-cta: linear-gradient(135deg, #ed5f00 0%, #ad4500 100%);
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: #c64f00; }
a:hover { color: var(--pink-hover); }
:focus-visible { outline: 3px solid #a3490d; outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.vs-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }
.vs-skip:focus { top: 12px; color: #fff; }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vs-grad-text { background: linear-gradient(90deg, #8a3e0b 0%, #823a0b 36%, #b94a00 66%, #c64f00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* Hover / interaction */
.vs-lift { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.vs-lift:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -20px rgba(110,49,9,0.182) !important; border-color: #f5e6d5 !important; }
.vs-btn { transition: transform .15s ease, filter .15s ease; }
.vs-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vs-btn-primary:hover, .vs-btn-primary:focus { color: #fff !important; }
.vs-navlink:hover { color: #c64f00; }
.vs-flink:hover { color: #ffffff !important; }
.vs-input:focus { outline: none; border-color: #a3490d !important; box-shadow: 0 0 0 4px rgba(163,73,13,0.098); }

/* Filter / tab pills (used with data-filter / data-tabs in main.js) */
.vs-pill { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #f0e8de; background: #ffffff; color: #4a372a; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.vs-pill:hover { border-color: #e2d2c4; }
.vs-pill.is-active, .vs-pill[aria-pressed="true"], .vs-pill[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 700; }

/* ---------- Header ---------- */
.vs-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #f6f2ed; transition: box-shadow .25s ease; }
/* brand-gradient hairline along the bottom of the header */
.vs-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(163,73,13,0) 0%, rgba(163,73,13,0.358) 30%, rgba(198,79,0,0.423) 70%, rgba(198,79,0,0) 100%); pointer-events: none; }
.vs-header.is-scrolled { box-shadow: 0 12px 30px -22px rgba(88,48,22,0.293); }
.vs-header-bar { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.vs-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: #532a00; }
.vs-logo:hover { color: #532a00; }
.vs-mark { display: block; width: 54px; height: 54px; flex-shrink: 0; overflow: visible; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.vs-logo:hover .vs-mark { transform: rotate(-8deg) scale(1.05); }
.vs-logo-word { display: flex; flex-direction: column; line-height: 1; }
.vs-logo-word b { font-size: 24px; font-weight: 800; letter-spacing: 0.01em; }
.vs-logo-word b i { font-style: normal; background: linear-gradient(90deg, #ff8a10 0%, #ff7900 50%, #f06400 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vs-logo-word small { margin-top: 5px; padding-left: 1px; font-size: 8.4px; font-weight: 700; letter-spacing: 0.3em; color: #8a6a4f; white-space: nowrap; }
.vs-logo-dark, .vs-logo-dark:hover { color: #ffffff; }
.vs-logo-dark .vs-logo-word small { color: #d9c3ad; }

.vs-nav { position: relative; display: flex; align-items: center; gap: 6px; height: 100%; }
.vs-navitem { position: relative; height: 100%; display: flex; align-items: center; }
.vs-navitem > a { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #452c1c; text-decoration: none; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vs-navitem > a svg { transition: transform .2s ease; }
/* gradient bar under the links: grows in on hover, full and glowing on the current page */
.vs-navitem > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 1px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #a3490d, #c64f00); transform: scaleX(0); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.vs-navitem:hover > a::after, .vs-navitem:focus-within > a::after { transform: scaleX(.55); opacity: .45; }
.vs-navitem:hover > a svg, .vs-navitem:focus-within > a svg { transform: rotate(180deg); }
.vs-navitem > a[aria-current="page"] { color: #a14000; font-weight: 700; }
.vs-navitem > a[aria-current="page"] .vs-nav-txt { background: linear-gradient(90deg, #8a3e0b 0%, #823a0b 40%, #b94a00 75%, #c64f00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vs-navitem > a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; box-shadow: 0 3px 10px -1px rgba(198,79,0,0.325); }
.vs-navitem > a.vs-nav-cta::after { display: none; }
/* Contact Us: the header's call to action */
.vs-navitem > a.vs-nav-cta { margin-left: 10px; gap: 8px; padding: 0 20px; color: #ffffff !important; background: var(--grad-cta); box-shadow: 0 12px 22px -12px rgba(198,79,0,0.455); }
.vs-navitem > a.vs-nav-cta svg { transform: none !important; }
.vs-navitem:hover > a.vs-nav-cta, .vs-navitem > a.vs-nav-cta:focus-visible { transform: translateY(-1px); background: var(--grad-cta); filter: brightness(1.06); box-shadow: 0 16px 26px -12px rgba(198,79,0,0.488); }
.vs-navitem:hover > a.vs-nav-cta svg { transform: translateX(3px) !important; }
.vs-navitem > a.vs-nav-cta[aria-current="page"] { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(198,79,0,0.227), 0 12px 22px -12px rgba(198,79,0,0.455); }
.vs-menu { position: absolute; top: 70px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(88,48,22,0.195); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.vs-navitem:hover > .vs-menu, .vs-navitem:focus-within > .vs-menu { visibility: visible; opacity: 1; transform: none; }
.vs-navitem-wide { position: static; } /* its menu is positioned against the whole nav, so it lines up with the nav's right edge */
.vs-menu-svc { left: auto; right: 0; width: 640px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.vs-menu-svc a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.vs-menu-svc a:hover { background: #fefaf5; color: var(--ink); }
.vs-menu-svc img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.vs-menu-svc .t { display: flex; flex-direction: column; gap: 2px; }
.vs-menu-svc .t b { font-size: 14px; font-weight: 700; }
.vs-menu-svc .t span { font-size: 12.5px; line-height: 1.35; color: #766759; }
.vs-menu-ind { left: auto; right: -60px; width: 280px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.vs-menu-ind a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.vs-menu-ind a:hover { background: #fefaf5; color: var(--ink); }
.vs-menu-ind .ic { width: 34px; height: 34px; border-radius: 10px; background: #fff8f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.vs-actions { display: none; align-items: center; gap: 12px; } /* only holds the burger, shown on smaller screens */
.vs-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1.5px solid #e8e0d6; border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; }
.vs-mobile { position: absolute; top: 78px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #f6f2ed; box-shadow: 0 30px 50px -24px rgba(60,36,20,0.195); padding: 8px 24px 24px; max-height: calc(100vh - 78px); overflow-y: auto; }
.vs-mobile nav { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; }
.vs-mobile nav > a { display: flex; align-items: center; min-height: 50px; border-bottom: 1px solid #f6f2ee; font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; }
.vs-mobile nav > a[aria-current="page"] { color: var(--pink); }

@media (max-width: 1100px) { .vs-nav { display: none !important; } .vs-actions { display: flex; } .vs-burger { display: inline-flex !important; } }

/* ---------- Page-level responsive fixes ---------- */
@media (max-width: 560px) {
  .vs-hero-eyebrow { letter-spacing: 0.2em !important; font-size: 11.5px !important; }
  /* Home stats: three equal columns, icon above the number, no wrapped orphan */
  .vs-hero-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); }
  .vs-hero-stats > div { flex-direction: column; gap: 8px !important; padding: 0 12px !important; }
  .vs-hero-stats > div:first-child { padding-left: 0 !important; }
  /* About stats: three equal columns in one row instead of one tall column */
  .ab-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .ab-stats > div { padding: 20px 12px !important; }
  .ab-stats > div > div:first-child { font-size: 28px !important; }
  .ab-stats > div > div:last-child { font-size: 13px !important; }
}

/* ---------- Home hero: photo on the right, copy on the left ---------- */
.vs-hero { position: relative; overflow: hidden; background: #fffcf8; }
.vs-hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; }
.vs-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 98% 55%; }
/* the photo fades into the page under the copy */
.vs-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fffcf8 0%, rgba(255,252,248,.96) 14%, rgba(255,252,248,.72) 26%, rgba(255,252,248,.25) 38%, rgba(255,252,248,0) 48%); }
.vs-hero-inner { position: relative; max-width: 1200px; min-height: clamp(540px, 40vw, 600px); margin: 0 auto; padding: 56px 24px 72px; box-sizing: border-box; display: flex; align-items: center; }
.vs-hero-copy { max-width: 590px; }

/* straight divider under the hero, with a centred scroll cue */
.vs-hero-rule { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-top: -23px; }
.vs-hero-rule-line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(255,121,0,0), rgba(255,121,0,.6)); }
.vs-hero-rule-line:last-child { background: linear-gradient(90deg, rgba(255,121,0,.6), rgba(255,121,0,0)); }
.vs-hero-rule i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 1.5px; background: #ff7900; transform: rotate(45deg); }
.vs-hero-rule-btn { flex-shrink: 0; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #ffffff; border: 1.5px solid #f3c69e; box-shadow: 0 10px 22px -12px rgba(122,55,10,.45); color: #ed5f00; transition: transform .2s ease, color .2s ease; }
.vs-hero-rule-btn:hover { color: #be4c00; transform: translateY(2px); }
.vs-hero-rule-btn svg { animation: vsNudge 2.4s ease-in-out infinite; }
@keyframes vsNudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }

/* service photos (cards, menu, Services and About pages) */
.vs-photo { object-fit: cover !important; border-radius: 12px; background: #f3ebe3; }
.vs-photo-tile { object-fit: contain !important; border-radius: 12px; background: #fff4ea; padding: 8px; box-sizing: border-box; }
.vs-menu-svc img { border-radius: 10px; }
.vs-menu-svc img[src$=".svg"] { background: #fff4ea; padding: 4px; box-sizing: border-box; }
.vs-menu-svc img[src$=".webp"] { object-fit: cover; }
.vs-photo-fill { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }

@media (max-width: 1100px) {
  .vs-hero-media { width: 55%; }
  .vs-hero-copy { max-width: 470px; }
  .vs-hero-copy > p:not(.vs-hero-eyebrow) { max-width: 440px !important; }
}
/* tablet portrait and phones: copy first, photo below it as a rounded image */
@media (max-width: 900px) {
  .vs-hero { display: flex; flex-direction: column; }
  .vs-hero-inner { order: 1; min-height: 0; width: 100%; padding: 40px 20px 28px; }
  .vs-hero-media { order: 2; position: relative; width: auto; margin: 0 16px 48px; aspect-ratio: 19 / 10; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 40px -28px rgba(122,55,10,.55); }
  .vs-hero-media::after { display: none; }
  .vs-hero-media img { object-position: 92% 50%; }
  .vs-hero-rule { gap: 10px; }
}

/* ---- original (logo) theme: balance tweaks. Appended to styles.css by build.mjs only when THEME = 'original'. ---- */

/* About › "Ways to Work With Us": the brown→orange gradient border reads heavy; same gradient at lower opacity */
.ab-model-featured {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(135deg, rgba(150, 70, 14, 0.38), rgba(214, 90, 10, 0.45)) border-box !important;
}
.ab-model-featured:hover {
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(135deg, rgba(150, 70, 14, 0.6), rgba(214, 90, 10, 0.7)) border-box !important;
}