/* =============================================================
   Ashstep Surveys — Homepage V4
   Built on concept-d.css + home.css (the V1 structure), loaded
   LAST so it overrides where needed. Brings in V3 elements:
   cinematic parallax hero, router strip overlapping the hero,
   dark stats box, brand-blue auto-rotating testimonial carousel,
   blog section, brand-blue "Get in touch" band, V3 button
   geometry, and alternating white / #cdd1d9 section backgrounds.
   ============================================================= */

/* ---------- buttons: match V3 geometry (hover behaviour already
   comes from the "V3 RETONE" layer in home.css) ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 1rem; padding: .85rem 1.6rem; line-height: 1; border-radius: 0; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.0625rem; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- alternating section backgrounds ---------- */
/* tinted sections + eyebrow chips use the exact tint of the case-study
   "services used" tags (var(--brand-blue-tint)) so they all match */
.sec-white { background: #ffffff; }
.sec-alt   { background: var(--brand-blue-tint); }
.eyebrow   { background: var(--brand-blue-tint); }
/* on the tinted (alt) sections, flip the eyebrow chip to solid white */
.sec-alt .eyebrow { background: #ffffff; }

/* nav menu items sized like V3 (larger, body-weight, not the small mono label) */
.site-nav__link { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: normal; text-transform: none; }

/* call/email icon squares: fixed square that matches the "Request a Quote"
   button height (~47px = .85rem*2 padding + 1rem line + 2px*2 border) */
.site-header__actions { align-items: center; }
.site-header__actions .icon-link { width: 47px; height: 47px; flex: 0 0 auto; }

/* secondary buttons: solid border in the text colour (brand blue) */
.btn--secondary { border-color: var(--brand-blue); }

/* credentials spec sheet: transparent fill; dividers match the container border */
.creds__sheet { background: transparent; }
.creds__row { border-top-color: var(--grey-300); }

/* service-card images: uniform height regardless of source ratio */
.svc-tile__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ============================ HERO (V3 cinematic) =============== */
.v4hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; border-bottom: 3px solid var(--brand-blue); }
.v4hero__bg { position: absolute; inset: 0; z-index: -2; }
.v4hero__bg img { width: 100%; height: 150%; object-fit: cover; object-position: center; will-change: transform; }
.v4hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(11,12,18,.9) 0%, rgba(16,18,30,.74) 42%, rgba(51,64,255,.28) 100%); }
.v4hero__inner { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-9) var(--space-5) var(--space-8); min-height: clamp(560px, 84vh, 880px); display: flex; flex-direction: column; justify-content: center; }
.v4hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #cdd2ff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: .45rem .9rem; margin: 0 0 var(--space-5); width: max-content; max-width: 100%; }
.v4hero h1 { color: #fff; max-width: 24ch; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); margin: 0 0 var(--space-4); text-shadow: 0 3px 30px rgba(0,0,0,.3); }
.v4hero__sub { color: rgba(255,255,255,.92); font-size: 1.2rem; max-width: 52ch; margin: 0 0 var(--space-5); }
.v4hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
/* solid white fill like V3's hero button: white fill + ink text,
   hover slides brand blue in with white text */
.v4hero__actions .btn--secondary { color: var(--ink); border-color: #fff; }
.v4hero__actions .btn--secondary::before { background: #fff; }
.v4hero__actions .btn--secondary::after { background: var(--brand-blue); }
.v4hero__actions .btn--secondary:hover { color: #fff; border-color: var(--brand-blue); }

/* scroll-down cue — right edge of the hero (outside the container),
   "Scroll" set vertically with the arrow beneath it, small */
.v4hero__scroll { position: absolute; right: var(--space-4); bottom: var(--space-5); top: auto; left: auto; transform: none; z-index: 6; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3); color: #fff; font-family: var(--font-display); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; transition: opacity .25s var(--ease); }
.v4hero__scroll:hover { color: #fff; opacity: .7; text-decoration: none; }
.v4hero__scroll-text { writing-mode: vertical-rl; }
.v4hero__chev { width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: v4bob 1.8s var(--ease) infinite; }
@media (max-width: 700px) { .v4hero__scroll { display: none; } }
@keyframes v4bob { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .6; } 50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; } }

/* ---------- router strip overlapping the hero (in place of V3's
   trust strip). Section is transparent so only the cards float. ---------- */
.router-section { position: relative; z-index: 5; background: transparent; margin-top: calc(var(--space-8) * -1); padding-top: 0; padding-bottom: var(--space-8); }

/* on narrow screens the hero actions can wrap onto two lines; ease off the
   overlap so the wrapped button doesn't end up crowding the router cards */
@media (max-width: 700px) {
  .v4hero__actions { margin-bottom: var(--space-6); }
  .router-section { margin-top: calc(var(--space-5) * -1); }
}

/* ============================ DARK STATS BOX (V3) ============== */
.v4stats { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: var(--space-7) var(--space-6); margin-top: var(--space-7); display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; text-align: center; }
.v4stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% -20%, rgba(51,64,255,.4), transparent 60%); }
.v4stat { position: relative; }
.v4stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; color: #fff; }
.v4stat__num .prefix, .v4stat__num .suffix { color: #aeb4ff; }
.v4stat__label { font-size: .9rem; color: rgba(255,255,255,.7); margin-top: var(--space-3); }
@media (min-width: 760px) { .v4stats { grid-template-columns: repeat(3,1fr); padding: var(--space-8); } }

/* ===================== TESTIMONIAL CAROUSEL (brand blue) ======= */
.v4quotes { position: relative; overflow: hidden; background: var(--brand-blue); color: #fff; padding: var(--space-7) var(--space-6); }
.v4quotes__track { display: grid; }
/* slides cross-fade + slide: incoming enters from the right, outgoing
   leaves to the left, eased over 0.8s */
.v4quote { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity .8s var(--ease), transform .8s var(--ease), visibility .8s var(--ease); }
.v4quote.is-active { opacity: 1; visibility: visible; transform: translateX(0); }
.v4quote.is-leaving { opacity: 0; visibility: visible; transform: translateX(-40px); }
.v4quote__mark { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: .6; color: rgba(255,255,255,.55); }
.v4quote__t { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.45; color: #fff; margin: var(--space-4) 0 var(--space-5); }
.v4quote__cite { display: inline-flex; align-items: center; gap: var(--space-3); font-style: normal; }
.v4quote__av { width: 46px; height: 46px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: #fff; }
.v4quote__name { font-family: var(--font-display); font-weight: 600; color: #fff; }
.v4quote__role { font-size: .85rem; color: rgba(255,255,255,.78); }
/* controls row: dots (left) + prev/next arrows (right), at the bottom */
.v4quotes__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.v4quotes__dots { display: flex; gap: var(--space-2); }
.v4quotes__nav { display: inline-flex; gap: var(--space-2); }
.v4quotes__arrow { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.6); color: #fff; font-family: var(--font-display); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.v4quotes__arrow:hover { background: #fff; color: var(--brand-blue); }
.v4quotes__dot { width: 9px; height: 9px; border: 0; padding: 0; background: rgba(255,255,255,.4); cursor: pointer; }
.v4quotes__dot[aria-current="true"] { background: #fff; }

/* ===================== PROJECTS — P/S/O + services used ======== */
.case__pso { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.case__pso-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-3); font-size: var(--fs-small); }
.case__pso-k { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-blue); padding-top: 3px; }
.case__pso-v { margin: 0; }
.case__services { margin: 0 0 var(--space-5); }
.case__services-label { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-600); margin: 0 0 var(--space-3); }
.case__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.case__tag { display: inline-flex; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--brand-blue); background: var(--brand-blue-tint); padding: .35rem .75rem; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.case__tag:hover { background: var(--brand-blue); color: #fff; text-decoration: none; }

/* ============================ BLOG / INSIGHTS ================== */
.v4blog-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
.v4blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--grey-200); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.v4blog-card:hover { border-color: var(--brand-blue); transform: translateY(-4px); }
.v4blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.v4blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v4blog-card__media::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 4; pointer-events: none; width: clamp(110px, 34%, 200px); height: clamp(40px, 16%, 78px); background: var(--brand-blue); clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%); }
.v4blog-card__tag { position: absolute; top: 10px; left: 10px; z-index: 5; font-family: var(--font-display); font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: #fff; background: var(--brand-blue); padding: 3px 9px; }
.v4blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.v4blog-card__meta { font-family: var(--font-display); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-600); }
.v4blog-card__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.15rem; margin: 0; }
.v4blog-card__excerpt { margin: 0; font-size: var(--fs-small); flex: 1; }
.v4blog-card__more { font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--brand-blue); display: inline-flex; gap: var(--space-2); align-items: center; }
@media (min-width: 620px) { .v4blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .v4blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===================== GET IN TOUCH → blue gradient =========== */
.cta-band { background: linear-gradient(180deg, var(--brand-blue) 0%, var(--brand-blue-deep) 100%); }
.cta-band p { color: rgba(255,255,255,.9); }
.cta-band .contact-line__k { color: rgba(255,255,255,.8); }

/* form: transparent with white text & outlines, a thicker white bottom
   border (like the why-choose cards), and a white-fill submit button */
.cta-band .cta-form { background: transparent; border: 1px solid rgba(255,255,255,.45); border-bottom: 4px solid #fff; }
.cta-band .cta-form .field__label { color: #fff; }
.cta-band .cta-form .field__input,
.cta-band .cta-form .field__select { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.cta-band .cta-form .field__input::placeholder { color: rgba(255,255,255,.65); }
.cta-band .cta-form .field__input:focus,
.cta-band .cta-form .field__select:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.cta-band .cta-form .field__select option { color: var(--ink); } /* native dropdown stays readable */
.cta-band .cta-form .form-note { color: rgba(255,255,255,.8); }
/* white-fill submit button (blue text); hover slides to deep blue, white text */
.cta-band .cta-form .btn--primary { color: var(--brand-blue); border-color: #fff; }
.cta-band .cta-form .btn--primary::before { background: #fff; }
.cta-band .cta-form .btn--primary::after { background: var(--brand-blue-deep); }
.cta-band .cta-form .btn--primary:hover { color: #fff; border-color: #fff; }

/* ============================ FULL-SCREEN MOBILE NAV =============
   Replaces the plain stacked mobile-menu list below the mega-nav
   breakpoint: a full-screen brand-blue overlay with a horizontal
   "screen" track (root menu → service categories → each category's
   services). Panels are plain sibling <div>s; only their transform
   changes, driven by home-v4.js setting data-screen on the root.
   The .mobile-menu class is kept alongside .mnav purely so main.js's
   existing open/close + Escape-key handling keeps working unchanged;
   these rules simply take over its look at compound (two-class)
   specificity so load order doesn't matter. ==================== */
@media (max-width: 879px) {
  /* keep the header (logo + burger) above the full-screen overlay so the
     burger — which morphs into an "X" via .nav-toggle[aria-expanded] —
     stays visible and clickable to close the menu */
  .site-header { z-index: 110; }
  /* stop the page behind the overlay from scrolling while it's open */
  body.mnav-open { overflow: hidden; }

  .mobile-menu.mnav {
    display: none; position: fixed; inset: 0; z-index: 90;
    background: var(--brand-blue); border-top: 0;
    flex-direction: column; overflow: hidden;
  }
  .mobile-menu.mnav.is-open { display: flex; }

  .mnav__viewport { flex: 1 1 auto; overflow: hidden; }
  .mnav__track { display: flex; width: 500%; height: 100%; transition: transform .32s var(--ease); }
  /* top padding clears the sticky header (min-height 62px), which stays
     visible above the overlay so the burger-turned-"X" remains tappable */
  .mnav__screen { width: 20%; flex: 0 0 20%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(62px + var(--space-6)) var(--space-5) var(--space-6); box-sizing: border-box; }

  .mnav__back { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 0; color: rgba(255,255,255,.75); font-family: var(--font-display); font-weight: 600; font-size: .88rem; letter-spacing: .01em; padding: 0 0 var(--space-5); margin: 0; cursor: pointer; }
  .mnav__back:hover { color: #fff; }
  .mnav__chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; flex: 0 0 auto; }
  .mnav__chevron--back { transform: rotate(135deg); }
  .mnav__chevron--fwd { transform: rotate(-45deg); }

  .mnav__heading { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; margin: 0 0 var(--space-5); }

  .mnav__list { list-style: none; margin: 0; padding: 0; display: grid; }
  .mnav__link {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%;
    font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; text-align: left;
    background: none; border: 0; cursor: pointer;
  }
  /* compound (two-class) selectors deliberately outrank home.css's
     ".mobile-menu a" (color/padding/border-bottom on every plain link
     inside the panel) so the leaf <a> links render white, not near-black */
  .mobile-menu.mnav .mnav__link { color: #fff; padding: var(--space-4) 1px; border-bottom: 1px solid rgba(255,255,255,.18); }
  .mobile-menu.mnav .mnav__link:hover { color: #fff; opacity: .8; text-decoration: none; }

  /* Split row: the label links to the section's index page, the chevron
     drills down into the sub-menu. Both keep a 44px tap target and the
     row shares the single border-bottom the other rows have. */
  .mnav__item--split { display: flex; align-items: stretch; }
  .mobile-menu.mnav .mnav__link--split { flex: 1 1 auto; justify-content: flex-start; min-height: 44px; }
  .mobile-menu.mnav .mnav__chevron-btn {
    flex: 0 0 auto; width: 44px; min-height: 44px; justify-content: flex-end;
    padding-left: var(--space-3);
  }

  .mnav__viewall { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
  .mobile-menu.mnav .mnav__viewall { color: #fff; padding: 0; border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }
  .mobile-menu.mnav .mnav__viewall:hover { color: #fff; text-decoration: none; }

  .mnav__footer { flex: 0 0 auto; padding: var(--space-5); border-top: 1px solid rgba(255,255,255,.18); }
  /* home.css's "V3 RETONE" layer redefines .btn to paint its fill via
     ::before/::after pseudo-elements (with background: transparent
     !important on the element itself) — overriding "background" directly
     on the <a> has no effect. Flip the same ::before/::after pair the
     cta-band's white submit button already uses successfully. */
  .mobile-menu.mnav .mnav__footer .btn.btn--primary.mnav__cta {
    display: flex; justify-content: center; width: 100%; margin: 0;
    /* explicit match for the sitewide .btn padding/font-size (home-v4.css
       ~line 13) so this button is the same height as every other button,
       regardless of it sitting full-width in its own footer bar */
    padding: .85rem 1.6rem; font-size: 1rem;
    color: var(--brand-blue); border-color: #fff;
  }
  .mobile-menu.mnav .mnav__footer .btn.btn--primary.mnav__cta::before { background: #fff; }
  .mobile-menu.mnav .mnav__footer .btn.btn--primary.mnav__cta::after { background: var(--brand-blue-deep); }
  .mobile-menu.mnav .mnav__footer .btn.btn--primary.mnav__cta:hover { color: #fff; border-color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .v4hero__bg img { transform: none !important; }
  .v4hero__chev { animation: none; }
  .v4quote { transition: none; }
  .mnav__track { transition: none; }
}