/* ==========================================================================
   VA Groups — extra.css
   --------------------------------------------------------------------------
   Components the original single-page site never needed: breadcrumbs, page
   headers, long-form body copy, fact cards, capability grids, FAQ accordions
   and the assistant widget.

   css/styles.css is UNTOUCHED. Everything here is built from its tokens
   (--navy-*, --crimson-*, --ink-*, --line, --brand-grad, --shadow-*, --r-*,
   --ease, --font-display, --font-body) and follows its naming conventions,
   so the new pages are indistinguishable from the original.
   ========================================================================== */

/* ---------- 1. Breadcrumbs ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55em;
  font-family:var(--font-display);font-size:.8rem;font-weight:600;
  color:var(--ink-400);margin:0 0 22px;
}
.crumbs a{color:var(--ink-600);transition:color .25s}
.crumbs a:hover{color:var(--crimson-700)}
.crumbs i{font-style:normal;color:var(--ink-300)}
.crumbs [aria-current]{color:var(--navy-800)}

/* ---------- 2. Page header ---------- */
.phead{
  position:relative;
  padding:calc(var(--nav-h) + clamp(40px,6vw,78px)) 0 clamp(34px,4vw,52px);
}
.phead .dotgrid{position:absolute;inset:0;z-index:0}
.phead > .wrap{position:relative;z-index:1}
.phead__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,60px);align-items:center;
}
.phead h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.04;letter-spacing:-.035em;
  color:var(--ink-900);margin:0 0 18px;
}
.phead__sub{
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.62;
  color:var(--ink-600);max-width:56ch;margin:0;
}
.phead__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.phead__media{display:grid;gap:14px}
@media (max-width:900px){
  .phead__grid{grid-template-columns:1fr}
  /* media column is hidden here, so the header no longer needs its height */
  .phead__media{display:none}
  .phead{padding-bottom:clamp(18px,3vw,28px)}
}
/* section that follows a page header shouldn't double up on padding */
.phead + .section{padding-top:clamp(30px,4vw,54px)}

/* ---------- 3. Long-form body ---------- */
.prose{max-width:70ch}
.prose h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,1.9vw,1.45rem);letter-spacing:-.022em;
  color:var(--ink-900);margin:34px 0 12px;
}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.05em;color:var(--ink-600)}
.prose strong{color:var(--ink-900);font-weight:600}
.prose ul{margin:0 0 1.15em;padding-left:1.15em;color:var(--ink-600)}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--crimson-600)}
.prose a{color:var(--navy-700);border-bottom:1.5px solid var(--line);transition:border-color .25s,color .25s}
.prose a:hover{color:var(--crimson-700);border-bottom-color:currentColor}

.split{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(28px,4.5vw,64px);align-items:start;
}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- 4. Fact card ---------- */
.factcard{
  padding:24px 26px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  position:sticky;top:calc(var(--nav-h) + 20px);
}
@media (max-width:900px){.factcard{position:static}}
.factcard h4{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  letter-spacing:-.015em;color:var(--ink-900);margin:0 0 16px;
}
.factcard dl{margin:0;display:grid;gap:14px}
.factcard dt{
  font-family:var(--font-display);font-size:.7rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--crimson-700);
}
.factcard dd{margin:4px 0 0;font-size:.94rem;color:var(--ink-800);line-height:1.5}

/* ---------- 5. Capability grid ---------- */
.caps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin:0;padding:0;list-style:none;
}
.caps li{
  padding:22px 24px;border-radius:var(--r-md);
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.caps li:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#D6DEEC}
.caps h4{
  font-family:var(--font-display);font-weight:700;font-size:.98rem;
  letter-spacing:-.015em;color:var(--ink-900);margin:0 0 6px;
}
.caps p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-600)}

/* ---------- 6. FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:80ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  padding:22px 52px 22px 0;
  font-family:var(--font-display);font-weight:700;font-size:1.03rem;
  letter-spacing:-.02em;color:var(--ink-900);
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--navy-700)}
.faq summary .ic{
  position:absolute;right:8px;top:50%;
  width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:var(--brand-grad-soft);
  display:block;
}
/* horizontal bar — always visible */
.faq summary .ic::before,
.faq summary .ic::after{
  content:"";position:absolute;left:50%;top:50%;
  width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:2px;background:#fff;
  transition:transform .3s var(--ease),opacity .2s linear;
}
/* vertical bar — present when closed (making a +), rotates away when open */
.faq summary .ic::after{transform:rotate(90deg)}
.faq details[open] summary .ic::after{transform:rotate(0deg);opacity:0}
.faq details[open] summary{color:var(--navy-800)}
.faq p{
  margin:0;padding:0 12% 24px 0;
  font-size:.96rem;line-height:1.68;color:var(--ink-600);
}
.faq p a{color:var(--navy-700);border-bottom:1.5px solid var(--line)}

/* ---------- 7. Related businesses ---------- */
.related{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
}
.related a{
  display:flex;flex-direction:column;gap:3px;
  padding:16px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  box-shadow:var(--shadow-xs);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.related a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#D6DEEC}
.related b{font-family:var(--font-display);font-size:.94rem;color:var(--ink-900);letter-spacing:-.015em}
.related small{font-size:.78rem;color:var(--ink-400)}

/* ---------- 8. Closing CTA band ---------- */
.endcta{
  margin:clamp(50px,7vw,86px) 0 0;
  padding:clamp(34px,4.5vw,54px) clamp(26px,4vw,54px);
  border-radius:var(--r-xl);
  background:var(--brand-grad);color:#fff;
  box-shadow:var(--shadow-lg);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
}
/* The global heading rule in styles.css sets a dark ink colour, which won
   over the inherited white and left this heading near-black on the gradient.
   Both lines are now explicitly white. */
.endcta h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.03em;line-height:1.1;
  margin:0;max-width:20ch;color:#fff;
}
.endcta p{margin:12px 0 0;color:#fff;max-width:46ch;font-size:.98rem}
.endcta .btn--light:hover{box-shadow:var(--shadow-lg)}
.endcta .btn--ghost{border-color:rgba(255,255,255,.42);color:#fff}
.endcta .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ==========================================================================
   9. VA Assistant
   ========================================================================== */
#va-launch{
  position:fixed;right:22px;bottom:22px;z-index:66;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  padding:.85em 1.35em;border-radius:var(--r-pill);
  background:var(--brand-grad);color:#fff;border:0;cursor:pointer;
  box-shadow:var(--shadow-lg);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
#va-launch:hover{transform:translateY(-2px)}
#va-launch svg{width:1.15em;height:1.15em;fill:currentColor;flex:none}
#va-launch[hidden]{display:none}
@media (max-width:560px){
  #va-launch{right:16px;bottom:16px;padding:.9em}
  #va-launch .va-lbl{display:none}
}
/* keep clear of the back-to-top button */
.totop{bottom:calc(22px + 58px)}

#va-chat{
  position:fixed;right:22px;bottom:22px;z-index:68;
  width:min(392px,calc(100vw - 30px));height:min(600px,calc(100dvh - 44px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  display:none;flex-direction:column;
}
#va-chat[data-open="true"]{display:flex}
@media (max-width:560px){
  #va-chat{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0}
}

.va-hd{
  display:flex;align-items:center;gap:11px;padding:15px 17px;
  background:var(--brand-grad);color:#fff;
}
.va-hd img{height:22px;width:auto}
.va-hd b{display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:-.015em}
.va-hd small{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:2px}
.va-hd button{
  margin-left:auto;width:30px;height:30px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;
  display:grid;place-items:center;transition:background .25s;
}
.va-hd button:hover{background:rgba(255,255,255,.26)}
.va-hd button svg{width:14px;height:14px}

.va-log{
  flex:1;overflow-y:auto;padding:18px 16px;
  display:flex;flex-direction:column;gap:11px;
  background:var(--paper-100);scroll-behavior:smooth;
}
.va-msg{
  max-width:88%;padding:11px 14px;font-size:.9rem;line-height:1.58;
  border-radius:var(--r-md);white-space:pre-wrap;word-wrap:break-word;
}
.va-msg--bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;align-self:flex-start;color:var(--ink-800)}
.va-msg--me{background:var(--navy-800);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.va-msg strong{font-weight:700;color:var(--ink-900)}
.va-msg--me strong{color:#fff}
.va-msg a{color:var(--navy-700);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.va-msg--me a{color:#fff}

.va-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--paper-100)}
.va-chips button{
  font-family:var(--font-display);font-weight:600;font-size:.78rem;
  padding:.45em .95em;border-radius:var(--r-pill);cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--ink-600);
  transition:border-color .25s,color .25s,transform .25s var(--ease);
}
.va-chips button:hover{border-color:var(--navy-600);color:var(--navy-700);transform:translateY(-1px)}

.va-typing{display:flex;gap:4px;align-items:center;padding:14px 15px}
.va-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-400);opacity:.4;animation:vabounce 1.2s infinite}
.va-typing i:nth-child(2){animation-delay:.15s}
.va-typing i:nth-child(3){animation-delay:.3s}
@keyframes vabounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:.9;transform:translateY(-4px)}}

.va-ft{border-top:1px solid var(--line);background:#fff;padding:12px 13px}
.va-form{display:flex;gap:8px;align-items:flex-end}
.va-form textarea{
  flex:1;font-family:var(--font-body);font-size:.9rem;line-height:1.45;
  padding:10px 13px;resize:none;min-height:42px;max-height:112px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper-50);color:var(--ink-900);
  transition:border-color .25s,background .25s;
}
.va-form textarea:focus{border-color:var(--navy-600);background:#fff;outline:none}
.va-form button{
  width:42px;height:42px;border-radius:var(--r-md);border:0;cursor:pointer;flex:none;
  background:var(--brand-grad);color:#fff;display:grid;place-items:center;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease);
}
.va-form button:hover{transform:translateY(-1px)}
.va-form button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.va-form svg{width:16px;height:16px;fill:currentColor}
.va-legal{margin:9px 2px 0;font-size:.68rem;line-height:1.45;color:var(--ink-400);text-align:center}
.va-legal a{color:var(--ink-600);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .va-typing i{animation:none}
  #va-launch,#va-launch:hover,.caps li:hover,.related a:hover,.va-chips button:hover{transform:none}
}

/* ---------- 9b. Sub-heading inside prose ---------- */
.prose__sub{
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--crimson-700);
  margin:26px 0 8px;
}

/* ---------- 9c. Embedded video (correction 8) ---------- */
.videoframe{
  position:relative;width:100%;aspect-ratio:16/9;margin-top:26px;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--paper-200);
}
.videoframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videonote{margin:10px 2px 0;font-size:.8rem;color:var(--ink-400);line-height:1.5}

/* ---------- 9d. Honeypot — off-screen, never display:none ----------
   Bots skip display:none fields; they fill this one. Screen readers skip it
   because the wrapper is aria-hidden and the input is tabindex="-1". */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- 9e. Footer brand alignment ----------
   styles.css line 703 centres the whole footer on mobile, which centred
   "VA Groups" over its own tagline and left it out of balance with the logo.
   Only the brand block is re-aligned; the links, socials and copyright stay
   centred. */
.ftr__brand{text-align:left}
.ftr__brand > div{text-align:left}

/* ---------- 9f. YouTube players ----------
   Real embedded players. The iframes carry loading="lazy" so the ~500KB each
   only downloads when the section approaches the viewport, and the src points
   at youtube-nocookie so nothing is set on the visitor until they press play. */
.videogrid{display:grid;gap:20px;margin-top:26px}
.videogrid--two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.videocard{margin:0}
.videocard figcaption{
  margin-top:10px;font-family:var(--font-display);font-weight:600;
  font-size:.9rem;color:var(--ink-600);letter-spacing:-.01em;
}
.ytframe{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:var(--shadow-md);background:#0E1420;
}
.ytframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- 9g. Reviews & testimonials ---------- */
.testi{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(22px,3.5vw,44px);align-items:start;margin-top:26px}
@media (max-width:860px){.testi{grid-template-columns:1fr}}

.reviewposter{
  margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--paper-200);
}
.reviewposter img{width:100%;display:block;aspect-ratio:1448/2048;object-fit:cover;transition:transform .5s var(--ease)}
.reviewposter:hover img{transform:scale(1.03)}
.reviewposter i{
  position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(11,27,77,.72);color:#fff;
  opacity:0;transition:opacity .25s;
}
.reviewposter:hover i{opacity:1}
.reviewposter i svg{width:15px;height:15px}
.reviewposter figcaption{
  padding:12px 14px;font-family:var(--font-display);font-weight:600;font-size:.82rem;
  color:var(--ink-600);background:#fff;border-top:1px solid var(--line);
}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.quote{
  margin:0;display:flex;flex-direction:column;gap:12px;
  padding:24px 26px;border-radius:var(--r-md);
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  box-shadow:var(--shadow-xs);position:relative;overflow:hidden;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.quote::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brand-grad)}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#D6DEEC}
.quote blockquote{
  margin:0;font-size:.94rem;line-height:1.62;color:var(--ink-800);flex:1;
}
.quote blockquote::before{content:"\201C";font-family:var(--font-display);font-size:2.4rem;
  line-height:0;color:var(--crimson-600);vertical-align:-.35em;margin-right:.12em}
.quote figcaption{display:grid;gap:2px}
.quote figcaption b{font-family:var(--font-display);font-size:.92rem;color:var(--ink-900);letter-spacing:-.01em}
.quote figcaption span{font-size:.8rem;color:var(--ink-600)}
.quote figcaption time{font-family:var(--font-display);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-400);margin-top:3px}
.quote__scan{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;color:var(--navy-700);
  transition:gap .25s,color .25s;
}
.quote__scan svg{width:13px;height:13px}
.quote__scan:hover{gap:11px;color:var(--crimson-700)}
@media (prefers-reduced-motion:reduce){
  .quote:hover,.reviewposter:hover img{transform:none}
}

/* ---------- 9g2. Wide gallery — sequential comic pages ----------
   The concept-art masonry runs four columns at ~230px. A multi-panel comic
   page is unreadable at that size, so these get two columns instead. */
.gal--wide{columns:2 380px;column-gap:18px}
.gal--wide figure{margin-bottom:18px}
@media (max-width:640px){.gal--wide{columns:1}}

/* ---------- 9h. Art plate — one wide artwork, shown at its own ratio ---------- */
.artplate{max-width:880px}
.artplate figure{
  margin:0;position:relative;cursor:pointer;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);
  background:var(--paper-200);
}
.artplate img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.artplate figure:hover img{transform:scale(1.02)}
.artplate i{
  position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(11,27,77,.72);color:#fff;
  opacity:0;transition:opacity .25s;
}
.artplate figure:hover i{opacity:1}
.artplate i svg{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.artplate figure:hover img{transform:none}}

/* ---------- 10. Skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--navy-800);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--navy-600);outline-offset:3px;border-radius:3px}

/* ---------- 11. Print ---------- */
@media print{
  .hdr,.drawer,.ftr,.totop,.endcta,#va-chat,#va-launch,.bgfield,.dotgrid{display:none!important}
  body{background:#fff}
  .phead{padding-top:0}
}


/* ==========================================================================
   CORRECTION 17 — background field
   The reconstructed assets/bg/field.svg drew a faint grid that read on screen
   as "transparent connecting pencil lines". The original tile was never
   recovered, so rather than guess again the drift layer is a plain wash.
   If the original field.svg turns up, drop it in and delete this block.
   ========================================================================== */
.bgfield{
  background:var(--paper-100, #F4F6FA) !important;
  background-image:none !important;
}