/* V2/V3 footer hero: full-bleed photo footer, same visual language as the
   giant-photo hero (v2-hero.css) and the nav-on-dark glass pill (header.css),
   but built for a footer: menu + contact row, a left-set "Let's talk"
   statement (kept off Arnout's centered face by staying left-aligned rather
   than centered/giant), a white full-width rule, and a legal/company row.
   Mobile-first; the -m layer moves the top row to a single line and widens
   the legal row. */
.v2-footer-hero{position:relative;overflow:hidden;background:var(--v2-bg2);color:var(--v2-fg);min-height:600px;display:flex;flex-direction:column}
.v2-footer-hero .photo{position:absolute;inset:0}
.v2-footer-hero .photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:saturate(0.82) contrast(1.05);transform:scale(1.08);animation:v2fh-zoom 12s cubic-bezier(.16,.8,.3,1) forwards}
@keyframes v2fh-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.v2-footer-hero .wash{position:absolute;inset:0;background:
	linear-gradient(180deg,rgba(10,13,18,0.78) 0%,rgba(10,13,18,0.32) 26%,rgba(10,13,18,0.4) 62%,rgba(10,13,18,0.92) 100%),
	radial-gradient(900px 560px at 82% 6%,rgba(126,163,214,0.26),transparent 60%),
	radial-gradient(900px 640px at 14% 96%,rgba(47,109,181,0.34),transparent 62%)}
/* Fine grain over the wash for atmosphere/depth, not flat color; kept very
   faint (opacity 0.05) so it textures without muddying the photo. */
.v2-footer-hero .grain{position:absolute;inset:0;opacity:0.05;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.v2-footer-hero .container{position:relative;z-index:2;padding-top:21px;padding-bottom:5px;flex:1;display:flex;flex-direction:column}

/* Bottom cluster: talk statement + rule + legal row, pinned to the footer's
   bottom edge (margin-top:auto) regardless of how tall the photo area is,
   so the rule always reads as the closing line of the whole footer. */
.v2-footer-hero .f-bottom{margin-top:auto}

/* "Let's talk" statement: centered, sitting right above the rule, same
   kicker-with-line motif used across every other V2 section (v2-how/
   v2-services/v2-voices/…) so this reads as the same design system rather
   than a bespoke one-off. The icon rail (phone / WhatsApp / email / contact
   page / socials) replaces the old CTA button, horizontal, centered. */
.v2-footer-hero .f-talk{padding:0 0 36px;max-width:620px;margin:0 auto;text-align:center}
.v2-footer-hero .f-talk .kicker{display:inline-flex;align-items:center;gap:10px;color:var(--v2-fg);font-family:var(--f-mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:16px}
.v2-footer-hero .f-talk .kicker::before{content:"";width:22px;height:1.5px;background:var(--v2-accent-soft)}
.v2-footer-hero .f-talk h2{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,6vw,54px);line-height:1.02;letter-spacing:-0.02em;text-shadow:0 2px 24px rgba(10,13,18,0.5)}
.v2-footer-hero .f-talk h2 .a{color:var(--v2-accent-soft);font-style:italic}

/* Icon rail, +20% over the original 40px/18px sizing (48px/22px). */
.v2-footer-hero .f-rail{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.v2-footer-hero .f-icon{width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(148,153,166,0.22);border:1px solid rgba(237,241,246,0.16);color:rgba(237,241,246,0.92);transition:background .15s,color .15s,transform .15s}
.v2-footer-hero .f-icon svg{width:22px;height:22px}
.v2-footer-hero .f-icon:hover{background:var(--v2-accent);color:#FFF;transform:translateY(-2px)}
.v2-footer-hero .f-icon-wa:hover{background:var(--wa,#1EBE5D);color:#F2FBF5}

/* Two full-width white rules bracket the menu: talk/icons, rule, menu, rule,
   legal row. No margin on the rule itself — spacing comes from the elements
   around it, so the same .f-rule class reads correctly in both slots. */
.v2-footer-hero .f-rule{height:1px;background:rgba(255,255,255,0.9)}

/* "Fully open" horizontal menu: a flat, evenly spaced link row (no pill/
   glass container) rather than the compact nav pill, sitting between the
   two rules. Contact is appended as the last item (see render.php). Items
   with children get a dropdown that opens UPWARD (bottom:100% instead of
   top:100%) since this nav lives at the very bottom of the page — the
   chevron rests pointing up and flips down once opened, the mirror image
   of the header's own down-chevron-that-flips-up. Reuses the sitewide
   .has-sub/.sub-toggle/.sub-menu markup so header.js's global click/escape/
   outside-close handling just works here too. */
.v2-footer-hero .f-menu{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:14px;margin:13px 0}
.v2-footer-hero .f-menu > a,
.v2-footer-hero .f-menu .sub-toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:600;font-size:13.5px;letter-spacing:0.01em;color:rgba(237,241,246,0.82);transition:color .15s;white-space:nowrap}
.v2-footer-hero .f-menu .f-nav-ic{width:15px;height:15px;flex:none}
.v2-footer-hero .f-menu > a:hover,
.v2-footer-hero .f-menu .sub-toggle:hover,
.v2-footer-hero .f-menu .has-sub.is-open .sub-toggle{color:#FFF}
.v2-footer-hero .f-menu .has-sub{position:relative;display:flex;align-items:center}
.v2-footer-hero .f-menu .sub-toggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.v2-footer-hero .f-menu .chev{width:14px;height:14px;transition:transform .15s}
.v2-footer-hero .f-menu .has-sub.is-open .chev{transform:rotate(180deg)}
.v2-footer-hero .f-menu .sub-menu{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);min-width:180px;background:rgba(148,153,166,0.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(237,241,246,0.18);border-radius:14px;padding:8px;box-shadow:0 -12px 28px rgba(10,13,18,0.35);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:20;pointer-events:none}
/* Click-only (via header.js's .is-open toggle) — deliberately no :hover/
   :focus-within trigger here: those would keep the submenu visually open via
   CSS even after a second click removes .is-open (the cursor is still over
   the toggle right after clicking it), which reads as "click doesn't close". */
.v2-footer-hero .f-menu .has-sub.is-open .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.v2-footer-hero .f-menu .sub-menu a{padding:9px 14px;border-radius:8px;font-size:14px;font-weight:500;color:#FFF;white-space:nowrap;transition:background .15s}
.v2-footer-hero .f-menu .sub-menu a:hover{background:rgba(255,255,255,0.14)}

/* Legal row beneath the second rule, in near-white text (not muted grey) so
   it stays crisp against the darkened photo. */
.v2-footer-hero .f-legal{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;color:#F5F7FA;margin-top:5px}
.v2-footer-hero .f-legal .f-company{display:flex;flex-direction:column;align-items:center;gap:2px}
.v2-footer-hero .f-legal .sep{display:none}

/* talk-bottom: statement sits after the legal row instead of before the rule. */
.v2-footer-hero.talk-bottom .f-talk{padding:28px 0 0}