/* ==========================================================================
   VIRAL ADVICE MEDIA  -  PREMIUM LIGHT THEME (loads after v2.css)
   --------------------------------------------------------------------------
   Direction: white and warm off-white surfaces, near-black type, brand teal
   as the action colour, mint as the soft fill. Dark is used only as a
   contained, rounded "near dark" panel on a light page, never dark-on-dark.
   Headlines are bold grotesk; emphasis is brand teal, not serif italics.
   Page-specific styles live in assets/css/pages/<page>.css ($page['css']).
   ========================================================================== */
:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F6F6F2;   /* warm off-white section */
  --bg-tint:   #EEF6F7;   /* mint-tinted section */
  --tx:        #0F1416;   /* near-black text (not --fg: that name is the button's own colour var) */
  --tx-2:      #3C4648;
  --muted:     #5D6769;
  --line:      #E7E7E1;
  --panel:     #11181A;   /* near-dark panel (cards/sections on white) */
  --panel-2:   #1A2427;
  --accent:    #2E6E76;   /* brand teal: buttons, links, emphasis */
  --accent-2:  #1F555C;
  --accent-soft: #DCEFF1;
  --sun:       #F4D35E;   /* sparing highlight (stars, small marks) */
  --r: 20px;
  --r-lg: 28px;
  --shadow: 0 30px 60px -40px rgba(15, 20, 22, .35);
  --shadow-sm: 0 10px 30px -20px rgba(15, 20, 22, .3);
  --f-head: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}

body.v2 { background: var(--bg); color: var(--tx); }

/* ----- Type: bold grotesk, teal emphasis (no serif italics) ----- */
.v2-h2, .sv-hero__title, .h2-hero__title, .h2-final__title, .h2-audit__title, .h2-case__title, .pf-social__title, .fd__name, .bl-feat__title {
  font-family: var(--f-head); font-weight: 700; letter-spacing: -.035em; color: var(--tx);
}
.v2-h2 em, .sv-hero__title em, .h2-hero__title em, .h2-final__title em, .h2-audit__title em, .h2-case__title em,
.pf-social__title em, .v2-mega__promo-title em, .v2-foot__cta-title em, .sv-ben__title em, .v2-statement em {
  font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent);
}
.v2-h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; }
.v2-lead { color: var(--tx-2); }

/* Eyebrow becomes an outlined pill (Trifid-style section label) */
.v2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 14px;
  border: 1.5px solid var(--accent); border-radius: 999px; background: var(--bg);
  font: 600 13px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--tx);
}
.v2-eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.v2-eyebrow--light { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.v2-eyebrow--light::before { background: var(--mint); }
.v2-pill { background: var(--bg); border: 1.5px solid var(--line); color: var(--tx); backdrop-filter: none; }
.v2-pill__dot { background: var(--accent); box-shadow: 0 0 0 0 rgba(46,110,118,.5); }

/* ----- Surfaces ----- */
.v2-sec--sand { background: var(--bg-soft); }
.v2-sec--tint { background: var(--bg-tint); }
/* "Near dark" = a rounded dark panel inset on the light page */
.v2-sec--ink {
  background: var(--panel); color: #fff; overflow: hidden;
  margin-inline: clamp(8px, 1.6vw, 24px); border-radius: clamp(24px, 3vw, 40px);
}
.v2-sec--ink::before { background: radial-gradient(circle, rgba(88,154,162,.28), transparent 65%); }
.v2-sec--ink .v2-h2, .v2-sec--ink h3 { color: #fff; }
.v2-sec--ink .v2-h2 em { color: var(--mint); }

/* ----- Buttons ----- */
.v2-btn--primary { background: var(--accent); box-shadow: 0 14px 30px -16px rgba(46,110,118,.9); }
.v2-btn--primary:hover { background: var(--accent-2); }
.v2-btn--dark { --bg: var(--tx); }
.v2-btn--outline { --fg: #0F1416; border: 1.5px solid var(--tx); }
.v2-btn--outline:hover { --bg: var(--tx); --fg: #fff; }

/* ==========================================================================
   HEADER: floating white bar (always light)
   ========================================================================== */
.v2-head, .v2-head.is-solid, body.v2:not(.v2--dark-hero) .v2-head {
  padding: 14px 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.v2-head__bar {
  position: static; max-width: calc(var(--wrap) + 40px); margin-inline: auto; width: calc(100% - var(--gut) * 2);
  padding: 9px 10px 9px 22px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 40px -26px rgba(15,20,22,.35); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.v2-logo--light { opacity: 0 !important; }
.v2-logo--dark { opacity: 1 !important; }
.v2-nav__list, .v2-head.is-solid .v2-nav__list { background: transparent; border: 0; backdrop-filter: none; }
.v2-nav__link, .v2-head.is-solid .v2-nav__link { color: var(--tx); font-weight: 500; }
.v2-nav__link:hover, .v2-nav__item--drop.is-open .v2-nav__link,
.v2-head.is-solid .v2-nav__link:hover, .v2-head.is-solid .v2-nav__item--drop.is-open .v2-nav__link { background: var(--bg-soft); color: var(--accent); }
.v2-nav__link.is-current, .v2-head.is-solid .v2-nav__link.is-current { color: var(--accent); background: var(--accent-soft); }
.v2-head__phone, .v2-head.is-solid .v2-head__phone { color: var(--tx); }
.v2-head__search, .v2-head.is-solid .v2-head__search { color: var(--tx); background: var(--bg-soft); border-color: var(--line); }
.v2-burger, .v2-head.is-solid .v2-burger { background: var(--bg-soft); border-color: var(--line); }
.v2-burger span, .v2-head.is-solid .v2-burger span { background: var(--tx); }
.v2-head__actions { gap: 10px; }
.v2-head__phone { min-height: 42px; padding: 0 6px; border-radius: 999px; transition: color .2s, background-color .2s; }
.v2-head__phone:hover { color: var(--accent); }
.v2-head__cta { min-height: 42px; }

/* 961 to 1279: the desktop bar has six links plus three actions, so it tightens
   (smaller logo, compact links, phone as an icon button) instead of overflowing. */
@media (max-width: 1279px) and (min-width: 961px) {
  .v2-head__bar { gap: 12px; padding-left: 18px; }
  .v2-head__logo { width: 124px; height: 36px; }
  .v2-nav__list { gap: 0; }
  .v2-nav__link { padding: 9px 10px; font-size: 14.5px; }
  .v2-head__actions { gap: 8px; }
  .v2-head__phone { justify-content: center; width: 42px; padding: 0; background: var(--bg-soft); border: 1px solid var(--line); }
  .v2-head__phone span { display: none; }
  .v2-mega__grid { gap: 8px; padding: 10px; }
  .v2-mega__col { padding: 16px 14px 18px; }
}
@media (min-width: 1280px) and (max-width: 1380px) { .v2-nav__link { padding-left: 13px; padding-right: 13px; } }

/* ----- Full-width mega menu ----- */
.v2-head { position: fixed; }
.v2-nav__item--drop { position: static; }
.v2-mega {
  position: absolute; top: 100%; left: 0; right: 0; width: auto; translate: 0 8px;
  padding: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.v2-nav__item--drop.is-open .v2-mega { translate: 0 0; }
.v2-mega::before { inset: -18px 0 auto; height: 18px; }
.v2-mega__grid {
  max-width: calc(var(--wrap) + 40px); width: calc(100% - var(--gut) * 2); margin: 6px auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) clamp(230px, 19vw, 270px); gap: 10px; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(15,20,22,.45);
  max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.v2-mega__col { min-width: 0; background: var(--bg-soft); padding: 18px 18px 20px; gap: 20px; border-radius: 16px; }
.v2-mega__head { font-size: 15px; color: var(--tx); }
.v2-mega__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--tx); box-shadow: none; }
.v2-mega__ic .v2-ic { width: 18px; height: 18px; }
.v2-mega__links { gap: 1px; padding-left: 0 !important; margin-top: 4px !important; border-top: 1px solid var(--line); padding-top: 10px !important; }
/* labels wrap inside their own column (never clipped or spilling into the next one) */
.v2-mega__links a { font-size: 14px; line-height: 1.35; padding: 5px 0; color: var(--tx-2); overflow-wrap: break-word; text-wrap: pretty; }
.v2-mega__links a:hover, .v2-mega__links a[aria-current] { color: var(--accent); }
.v2-mega__promo { border-radius: 16px; background: var(--accent); }
.v2-mega__promo > img { opacity: .35; mix-blend-mode: luminosity; }
.v2-mega__promo::before { background: linear-gradient(180deg, rgba(46,110,118,.2) 0%, rgba(31,85,92,.95) 70%); }
.v2-mega__promo-title em { color: var(--accent-soft); }
.v2-mega__promo .v2-btn--primary { --fg: #0F1416; background: #fff; box-shadow: none; }
/* The promo card needs room: below 1600 it hides so the four columns keep their
   labels readable, and an "All services" link joins the industries strip. */
.v2-mega__strip a.v2-mega__strip-all.v2-mega__strip-svc { display: none; margin-left: 0; }
@media (max-width: 1599px) {
  .v2-mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-mega__promo { display: none; }
  .v2-mega__strip a.v2-mega__strip-all.v2-mega__strip-svc { display: inline-flex; }
}
.v2-mega__strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 16px; border-radius: 14px; background: var(--bg-soft); font-size: 14px; }
.v2-mega__strip-h { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-weight: 600; color: var(--tx); }
.v2-mega__strip-h .v2-ic { color: var(--accent); }
.v2-mega__strip a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--tx-2); transition: color .2s, border-color .2s; }
.v2-mega__strip a:hover, .v2-mega__strip a[aria-current] { color: var(--accent); border-color: var(--accent); }
.v2-mega__strip a.v2-mega__strip-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border-color: transparent; background: transparent; font-weight: 600; color: var(--accent); }

/* ----- Mobile menu: light overlay ----- */
@media (max-width: 960px) {
  .v2-head__bar { padding: 8px 8px 8px 16px; }
  .v2-nav { background: #fff; padding-top: 100px; }
  .v2-nav__link { color: var(--tx) !important; border-bottom-color: var(--line) !important; }
  .v2-mega__grid { width: auto; margin: 6px 0 12px; padding: 0; background: none; border: 0; box-shadow: none; grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .v2-mega__col { background: var(--bg-soft); border: 0; }
  .v2-mega__head { color: var(--tx) !important; }
  .v2-mega__links a { color: var(--tx-2) !important; }
  .v2-nav__phone { color: var(--accent) !important; }
  body.nav-open .v2-head .v2-logo--light { opacity: 0 !important; }
  body.nav-open .v2-head .v2-logo--dark { opacity: 1 !important; }
  body.nav-open .v2-head .v2-burger { background: var(--bg-soft); border-color: var(--line); }
  body.nav-open .v2-head .v2-burger span { background: var(--tx); }
}

/* ==========================================================================
   INNER PAGE HERO (v2_page_hero): light split layout, unique photo per page
   ========================================================================== */
.pg2 { position: relative; padding: clamp(118px, 12vw, 150px) 0 clamp(48px, 6vw, 80px); background: var(--bg); overflow: hidden; }
.pg2::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; background: linear-gradient(180deg, var(--bg-tint) 0%, rgba(238,246,247,0) 100%); pointer-events: none; }
.pg2__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pg2__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.pg2 .sv-crumbs ol { color: var(--muted); }
.pg2 .sv-crumbs a:hover { color: var(--accent); }
.pg2 .sv-crumbs [aria-current] { color: var(--tx); }
.pg2__title { margin: 16px 0 18px; font: 700 clamp(40px, 5.6vw, 78px)/.98 var(--f-head); letter-spacing: -.045em; color: var(--tx); text-wrap: balance; }
.pg2__title em { font-style: normal; color: var(--accent); }
.pg2__lead { font-size: clamp(17px, 1.35vw, 19px); color: var(--tx-2); max-width: 56ch; margin-bottom: 28px; }
.pg2__media { position: relative; margin: 0; }
.pg2__media img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pg2__badge {
  position: absolute; left: -22px; bottom: 26px; display: flex; align-items: center; gap: 12px; max-width: 280px;
  padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 14px; color: var(--tx-2);
}
.pg2__badge strong { display: block; color: var(--tx); font-size: 15px; }
.pg2__badge-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent); color: #fff; }
.pg2__note { position: absolute; right: -14px; top: 22px; padding: 10px 14px; border-radius: 12px; background: var(--tx); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) {
  .pg2__grid { grid-template-columns: 1fr; }
  .pg2__badge { left: 12px; bottom: 12px; }
  .pg2__note { right: 12px; }
}

/* ----- CTA band: light teal card instead of dark ----- */
.h2-final { background: var(--accent); }
.h2-final__title { color: #fff; }
.h2-final__title em { color: var(--accent-soft); }

/* ----- Footer: near-dark panel inset on white ----- */
.v2-foot { margin: 0 clamp(8px, 1.6vw, 24px) clamp(8px, 1.6vw, 24px); border-radius: clamp(24px, 3vw, 40px); background: var(--panel); }
.v2-foot__reach li { background: var(--panel); }
.v2-chat { background: var(--tx); }

/* ==========================================================================
   SHARED COMPONENTS, light premium versions (owned by the lead)
   ========================================================================== */
/* cards */
.h2-why__card, .sv-feat__card, .h2-svc__card, .sv-rel__card, .h2-ins__card, .tool-card, .hub__group, .in-card, .v2-statement, .ps-card, .lg__toc, .ct__methods li {
  border-color: var(--line); border-radius: var(--r);
}
.h2-why__card:hover, .sv-feat__card:hover, .h2-svc__card:hover, .h2-ins__card:hover { box-shadow: var(--shadow); border-color: #D6E6E8; }
.h2-why__ic { background: var(--accent-soft); color: var(--accent); }
.h2-svc__ic { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.h2-svc__card:hover .h2-svc__ic { background: var(--accent); color: #fff; border-color: var(--accent); }
.sv-feat__no { color: #B5C3C5; }
.h2-svc__goal { background: var(--bg-soft); color: var(--accent-2); }

/* FAQ */
.h2-faq__item { border-radius: 18px; background: #fff; }
.h2-faq__item.is-open { border-color: var(--accent); box-shadow: none; }
.h2-faq__q { font-family: var(--f-head); font-weight: 600; color: var(--tx); }
.h2-faq__sign { background: var(--bg-soft); color: var(--tx); }
.h2-faq__item.is-open .h2-faq__sign { background: var(--accent); color: #fff; }
.h2-faq__cta { background: var(--accent); color: #E6F4F5; border-radius: var(--r-lg); }
.h2-faq__cta .v2-btn--primary { --fg: #0F1416; background: #fff; box-shadow: none; }

/* audit form: teal panel + white form */
.h2-audit { background: var(--accent); box-shadow: var(--shadow); }
.h2-audit__side::before { background: linear-gradient(180deg, rgba(31,85,92,.15) 0%, rgba(31,85,92,.92) 62%); }
.h2-audit__title { color: #fff; }
.h2-audit__title em { color: var(--accent-soft); }
.h2-audit__side p, .h2-audit__contact a { color: #E6F4F5; }
.h2-audit__points .v2-ic { color: #fff; }
.h2-field input, .h2-field select, .h2-field textarea { background: var(--bg-soft); border-color: var(--line); }

/* steps on the inset near-dark panel */
.h2-proc__no { background: var(--panel); border-color: rgba(159,210,217,.45); box-shadow: 0 0 0 6px var(--panel); }

/* stats band: keep the contained near-dark card but calmer */
.v2-stats { background: var(--panel); }
.v2-stats dd { color: #fff; }

/* chips + pills */
.pf-chip { border-color: var(--line); }
.pf-chip.is-active { background: var(--tx); border-color: var(--tx); }

/* reviews + misc */
.h2-rev__card { border-radius: var(--r); }
.h2-team__img, .bk-svc__media img, .fd__media img { border-radius: var(--r-lg); }
.v2-foot__mark { -webkit-text-stroke: 1px rgba(159,210,217,.14); }

/* Mobile menu: backdrop-filter on the bar would make it the containing block
   for the fixed full-screen menu, trapping the overlay inside the bar. */
@media (max-width: 960px) {
  .v2-head__bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .v2-nav { z-index: -1; }
}
@media (max-width: 960px) {
  .v2-mega { position: static; translate: none !important; opacity: 1; visibility: visible; pointer-events: auto; display: none; margin: 4px 0 12px; }
  .v2-nav__item--drop.is-open .v2-mega { display: block; }
  .v2-mega::before { display: none; }
  .v2-mega__links a { white-space: normal; }
}

/* ==========================================================================
   v4: WIDER LAYOUT + SECTION TONE SYSTEM
   Tones (alternate them for rhythm):  .v2-sec (white)  .v2-sec--soft (warm
   off-white)  .v2-sec--tint (mint)  .v2-sec--teal (deep teal, "little dark")
   .v2-sec--dark (near black, "dark", full bleed)  .v2-sec--ink (inset panel).
   Inside --teal / --dark every shared component switches to its dark form.
   ========================================================================== */
:root { --wrap: 1440px; --gut: clamp(16px, 3.6vw, 56px); }
.v2-head__bar, .v2-mega__grid { max-width: calc(var(--wrap) + var(--gut) * 2 - 24px); }
.v2-sec--soft { background: var(--bg-soft); }
.v2-sec--teal { background: #123A3F; color: #E6F2F3; }
.v2-sec--dark { background: #0D1214; color: #E9EEEF; }
.v2-sec--teal, .v2-sec--dark { position: relative; overflow: hidden; }
.v2-sec--teal::after, .v2-sec--dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 0%, rgba(159,210,217,.14), transparent 70%);
}
.v2-sec--teal > *, .v2-sec--dark > * { position: relative; z-index: 1; }
:is(.v2-sec--teal, .v2-sec--dark) :is(.v2-h2, h2, h3, h4, strong) { color: #fff; }
:is(.v2-sec--teal, .v2-sec--dark) .v2-h2 em { color: var(--mint); }
:is(.v2-sec--teal, .v2-sec--dark) :is(.v2-lead, p, li, small, dd, dt) { color: rgba(233,238,239,.78); }
:is(.v2-sec--teal, .v2-sec--dark) .v2-eyebrow { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
:is(.v2-sec--teal, .v2-sec--dark) .v2-eyebrow::before { background: var(--mint); }
:is(.v2-sec--teal, .v2-sec--dark) :is(.h2-why__card, .sv-feat__card, .h2-svc__card, .sv-rel__card, .h2-ins__card, .h2-faq__item, .v2-statement, .tool-card, .hub__group) {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #E9EEEF;
}
:is(.v2-sec--teal, .v2-sec--dark) :is(.h2-why__card, .sv-feat__card, .h2-svc__card, .sv-rel__card, .h2-ins__card):hover { background: rgba(255,255,255,.08); border-color: rgba(159,210,217,.4); box-shadow: none; }
:is(.v2-sec--teal, .v2-sec--dark) :is(.h2-why__ic, .h2-svc__ic) { background: rgba(159,210,217,.14); color: var(--mint); }
:is(.v2-sec--teal, .v2-sec--dark) .h2-faq__q { color: #fff; }
:is(.v2-sec--teal, .v2-sec--dark) .h2-faq__sign { background: rgba(255,255,255,.1); color: #fff; }
:is(.v2-sec--teal, .v2-sec--dark) .h2-faq__item.is-open { border-color: var(--mint); }
:is(.v2-sec--teal, .v2-sec--dark) .h2-faq__cta { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
:is(.v2-sec--teal, .v2-sec--dark) .v2-btn--outline { --fg: #fff; border-color: rgba(255,255,255,.6); }
:is(.v2-sec--teal, .v2-sec--dark) .v2-btn--outline:hover { --bg: #fff; --fg: #0F1416; }
:is(.v2-sec--teal, .v2-sec--dark) .v2-btn--dark { --bg: #fff; --fg: #0F1416; }
:is(.v2-sec--teal, .v2-sec--dark) .v2-btn--primary { background: var(--mint); --fg: #0F1416; box-shadow: none; }
:is(.v2-sec--teal, .v2-sec--dark) .h2-svc__more, :is(.v2-sec--teal, .v2-sec--dark) a.v2-link { color: var(--mint); }
:is(.v2-sec--teal, .v2-sec--dark) .pf-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
:is(.v2-sec--teal, .v2-sec--dark) .pf-chip.is-active { background: #fff; color: #0F1416; }

/* Client avatars are square Instagram logos/photos: show them whole on white. */
.cs-client__av img, .pf3-more-cases__av img, .pf3-acc__av img, .gl-cal__av img { object-fit: contain; background: #fff; }