/* ============================================================
   Homepage V2 — Clay.global-inspired
   hp2- prefix · full visual upgrade with modern effects
   ============================================================ */

/* ---- Kill the legacy theme chrome on V2 ----
   The parent theme emits: #masthead → .container-fluid → #site-navigation (.navbar.main-navigation)
   → button → .fullpage-menu overlay → .modal.log-in-popup. All must be gone so the
   video hero reaches the very top of the viewport. Also reset any top padding/margin
   from the outer wrappers so the v2 nav can float cleanly over the video. */
.page-template-template-homepage-v2 #masthead,
.page-template-template-homepage-v2 .site-header,
.page-template-template-homepage-v2 #site-navigation,
.page-template-template-homepage-v2 .main-navigation,
.page-template-template-homepage-v2 .fullpage-menu,
.page-template-template-homepage-v2 .modal.log-in-popup,
.page-template-template-homepage-v2 .modal#GFG,
.page-template-template-work-v2 #masthead,
.page-template-template-work-v2 .site-header,
.page-template-template-work-v2 #site-navigation,
.page-template-template-work-v2 .main-navigation,
.page-template-template-work-v2 .fullpage-menu,
.page-template-template-work-v2 .modal.log-in-popup,
.page-template-template-work-v2 .modal#GFG,
.page-template-template-services-v2 #masthead,
.page-template-template-services-v2 .site-header,
.page-template-template-services-v2 #site-navigation,
.page-template-template-services-v2 .main-navigation,
.page-template-template-services-v2 .fullpage-menu,
.page-template-template-services-v2 .modal.log-in-popup,
.page-template-template-services-v2 .modal#GFG {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
/* Zero layout of the page wrappers so nothing pushes the hero down */
.page-template-template-homepage-v2 html,
.page-template-template-homepage-v2 body,
.page-template-template-homepage-v2 #page,
.page-template-template-homepage-v2 #content,
.page-template-template-homepage-v2 .site,
.page-template-template-work-v2 html,
.page-template-template-work-v2 body,
.page-template-template-work-v2 #page,
.page-template-template-work-v2 #content,
.page-template-template-work-v2 .site,
.page-template-template-services-v2 html,
.page-template-template-services-v2 body,
.page-template-template-services-v2 #page,
.page-template-template-services-v2 #content,
.page-template-template-services-v2 .site {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Body bg matches the first section so the frosted nav blur never reveals white */
.page-template-template-homepage-v2 body {
  background: #050510;
}
/* Work page sits on white throughout */
.page-template-template-work-v2 body {
  background: #ffffff;
}
/* Services page also sits on white — same rhythm as work, with two
   dark sections (process + closing CTA) breaking up the lightness. */
.page-template-template-services-v2 body {
  background: #ffffff;
}

/* ---- Hide legacy chrome appended by footer.php on V2 pages ----
   footer.php appends two blocks outside .hp2-main:
     1) A "Let's Plan / Let's Wireframe" marquee CTA
        (.full-section.home-section-10) — duplicate of the v2 closing CTA.
     2) The bare WP <footer> (logo + social icons + copyright) — replaced
        by the richer .hp2-footer partial that now lives INSIDE .hp2-main
        on both v2 templates.
   Both are hidden via the sibling combinator (.hp2-main ~ …), which only
   matches elements that live as siblings of hp2-main inside #page. The
   new <footer class="hp2-footer"> is INSIDE hp2-main, so the selector
   correctly skips it. */
.page-template-template-work-v2     .hp2-main ~ .full-section.home-section-10,
.page-template-template-homepage-v2 .hp2-main ~ .full-section.home-section-10,
.page-template-template-services-v2 .hp2-main ~ .full-section.home-section-10,
.page-template-template-work-v2     .hp2-main ~ footer,
.page-template-template-homepage-v2 .hp2-main ~ footer,
.page-template-template-services-v2 .hp2-main ~ footer { display: none !important; }

/* ---- Kill sitewide custom cursor blob on V2 (competes with cinematic video) ---- */
.page-template-template-homepage-v2 .theme-cursor,
.page-template-template-homepage-v2 .custom-cursor,
.page-template-template-homepage-v2 .cursor-follower { display: none !important; }
/* Since this stylesheet only loads on v2, a bare rule is safe too */
.theme-cursor { display: none !important; }

/* ---- Roobert, self-hosted from the coduzion.com origin ----
   fonts.css declares Roobert with RELATIVE urls; on production the
   stylesheet's base is the CloudFront WP_CONTENT_URL, which serves
   the woff2 files without Access-Control-Allow-Origin — the browser
   CORS-blocks every weight and the whole v2 page falls back to
   Segoe/Arial. Redeclaring here with absolute origin urls wins over
   fonts.css (same family/weight, later declaration) and only loads
   on v2 templates. Same cloudfront-bypass pattern as
   coduzion_hp2_scripts() in functions.php. */
@font-face {
  font-family: 'Roobert';
  src: local('Roobert Regular'), local('Roobert-Regular'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Regular.woff2') format('woff2'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: local('Roobert Medium'), local('Roobert-Medium'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Medium.woff2') format('woff2'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: local('Roobert SemiBold'), local('Roobert-SemiBold'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-SemiBold.woff2') format('woff2'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: local('Roobert Bold'), local('Roobert-Bold'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Bold.woff2') format('woff2'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: local('Roobert Heavy'), local('Roobert-Heavy'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Heavy.woff2') format('woff2'),
       url('https://coduzion.com/wp-content/themes/coduzion/assets/fonts/Roobert-Heavy.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset within hp2 scope ---- */
.hp2-main {
  font-family: var(--theme-font, 'Roobert'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #0d0d0d;
  overflow-x: clip; /* clip instead of hidden — preserves position:sticky */
}
.hp2-main *, .hp2-main *::before, .hp2-main *::after { box-sizing: border-box; }
.hp2-main img { max-width: 100%; height: auto; display: block; }
.hp2-main ul  { list-style: none; margin: 0; padding: 0; }
.hp2-main h1, .hp2-main h2, .hp2-main h3,
.hp2-main h4, .hp2-main p { margin: 0; }

/* ---- Design tokens ---- */
:root {
  --hp2-blue:    #0a0a0f;
  --hp2-blue-2:  #3a3a42;
  --hp2-violet:  #26262c;
  --hp2-dark:    #0a0a0f;
  --hp2-mid:     #555;
  --hp2-light:   #f4f4f0;
  --hp2-white:   #ffffff;
  --hp2-border:  rgba(0,0,0,0.08);
  --hp2-r:       20px;
  --hp2-r-sm:    10px;
  --hp2-gap:     clamp(24px, 4vw, 64px);
  --hp2-glow:    rgba(10,10,15,0.18);
}

/* ============================================================
   OPEN NAVIGATION — Clay/AVEX style
   ============================================================ */
/* Default — over video hero: TRULY transparent. No blur (blur was haze-ing
   bright video frames into a fake white strip). Legibility is handled by
   text-shadow on links + a high-contrast dark CTA pill. */
.hp2-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 12px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
/* Scrolled — over content sections: frosted glass (lighter blur for scroll perf) */
.hp2-nav.hp2-nav--scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 16px rgba(0,0,0,0.04);
}
.hp2-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.hp2-nav__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.hp2-nav__logo-img,
.hp2-nav__logo img,
.hp2-nav .custom-logo {
  height: 34px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
}
.hp2-nav__logo-text {
  font-size: 22px;
  font-weight: 900;
  color: var(--hp2-dark);
  letter-spacing: -0.03em;
}
.hp2-nav__links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Nav links — DEFAULT (over video): white text + strong drop-shadow for bright frames */
.hp2-nav__links li a {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.22s, color 0.3s ease, transform 0.22s, text-shadow 0.4s ease;
  letter-spacing: 0;
  position: relative;
  /* Two-stop shadow: tight crisp + soft glow — readable on any video frame */
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 12px rgba(0,0,0,0.4);
}
.hp2-nav__links li a:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateY(-1px);
}
/* SCROLLED — dark text on frost */
.hp2-nav--scrolled .hp2-nav__links li a {
  color: var(--hp2-dark);
  text-shadow: none;
}
/* Wash hover background lighter on the truly transparent default state */
.hp2-nav:not(.hp2-nav--scrolled) .hp2-nav__links li a:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.hp2-nav--scrolled .hp2-nav__links li a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--hp2-dark);
}
/* Logo — DEFAULT (over video): white via invert */
.hp2-nav__logo-img,
.hp2-nav__logo img,
.hp2-nav .custom-logo {
  filter: brightness(0) invert(1);
  transition: filter 0.4s ease;
}

/* CTA — DEFAULT (over video): dark pill, white text — decisive on any frame */
.hp2-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--hp2-dark);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
  white-space: nowrap;
  border: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.hp2-nav__cta:hover {
  background: #1f1f28;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
/* SCROLLED — dark CTA on frost */
.hp2-nav--scrolled .hp2-nav__cta {
  background: var(--hp2-dark);
  color: #fff;
}
.hp2-nav--scrolled .hp2-nav__cta:hover {
  background: #1f1f28;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
/* SCROLLED — logo back to black */
.hp2-nav--scrolled .hp2-nav__logo-img,
.hp2-nav--scrolled .hp2-nav__logo img,
.hp2-nav--scrolled .hp2-nav .custom-logo {
  filter: brightness(0) !important;
}
.hp2-nav__logo:hover {
  opacity: 0.7;
  transition: opacity 0.2s;
}

/* Hide old hero since video hero replaces it */
.hp2-hero { display: none !important; }

/* Adjust nav z-index over video */
.hp2-nav { z-index: 1000; }

/* Ensure sticky works — kill overflow on ALL ancestors */
.page-template-template-homepage-v2 #page,
.page-template-template-homepage-v2 #content,
.page-template-template-homepage-v2 .site {
  overflow: visible !important;
}
.hp2-services {
  overflow: visible !important;
}
.hp2-services .container {
  overflow: visible !important;
}

/* Mobile nav */
@media (max-width: 768px) {
  .hp2-footer__lead{
    padding-bottom: clamp(0px, 4vw, 0px) !important;
  }
  .hp2-nav__links { display: none; }
  .hp2-nav__cta { padding: 8px 18px; font-size: 13px; }

  /* GLOBAL (all v2 pages): keep the open-nav philosophy on mobile — the
     links drop to a slim second row under the logo bar instead of
     vanishing. There is no hamburger anywhere in v2, so the `display:
     none` above previously left Services/Work/About/Contact completely
     unreachable at ≤768px on every page except the homepage.
     This file is only enqueued on the v2 templates (see
     coduzion_hp2_scripts() in functions.php), so an unprefixed .hp2-nav
     rule is automatically limited to v2 pages and cannot leak onto
     legacy/Woo templates. Row scrolls horizontally on very narrow
     screens rather than wrapping. */
  .hp2-nav__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .hp2-nav__links {
    display: flex;
    order: 3;
    width: 100%;
    gap: 0;
    /* margin was `0 -12px` to optically align the first link's inner
       padding with the logo when the row was left-aligned; in the
       centered layout it just skewed the row 12px left. */
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Center the links row under the logo bar. `safe` keeps the row
       scrollable from its left edge if it ever overflows a very
       narrow screen (plain `center` would clip the first link);
       browsers without `safe` support fall back to the plain
       `center` declared first. */
    justify-content: center;
    justify-content: safe center;
  }
  .hp2-nav__links::-webkit-scrollbar { display: none; }
  .hp2-nav__links li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                 /* WCAG tap target */
    padding: 4px 12px;
    font-size: 13px;
  }
  /* CTA pill up to a 44px tap height (was 37px) */
  .hp2-nav__cta {
    min-height: 44px;
    padding: 10px 18px;
  }
}

/* ---- Gradient text utility ---- */
.hp2-gradient-text {
  background: linear-gradient(135deg, #0a0a0f 0%, #26262c 50%, #3a3a42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Shared typography ---- */
.hp2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-blue);
  margin-bottom: 16px;
}
.hp2-eyebrow::before {
  /* Decorative dash before eyebrow labels — removed site-wide per request. */
  display: none;
}
.hp2-eyebrow--light { color: rgba(255,255,255,0.55); }
.hp2-eyebrow--light::before { background: rgba(255,255,255,0.4); }

/* Eyebrow "double title" labels (SERVICES, WHAT WE DID, etc.) removed
   site-wide per request — they doubled up with the headline below them. */
.hp2-eyebrow,
.hp2-sva__eyebrow,
.hp2-tes__eyebrow,
.hp2-bloghero__eyebrow,
.hp2-wgrid__rail-eyebrow,
.hp2-wgrid__rail-eyebrow-min { display: none !important; }

.hp2-h2 {
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--hp2-dark);
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.hp2-section-header { margin-bottom: clamp(36px, 5vw, 72px); }

/* ---- Buttons ---- */
.hp2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.hp2-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.hp2-btn:hover::after { opacity: 0.1; }

.hp2-btn--primary {
  background: var(--hp2-blue);
  color: #fff;
  border-color: var(--hp2-blue);
  box-shadow: 0 4px 20px rgba(10,10,15,0.3);
}
.hp2-btn--primary:hover {
  background: #0033cc;
  border-color: #0033cc;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(10,10,15,0.38);
  color: #fff;
}
.hp2-btn--outline {
  background: transparent;
  color: var(--hp2-dark);
  border-color: rgba(0,0,0,0.2);
}
.hp2-btn--outline:hover {
  background: var(--hp2-dark);
  color: #fff;
  border-color: var(--hp2-dark);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
.hp2-btn--white {
  background: rgba(255,255,255,0.95);
  color: var(--hp2-dark);
  border-color: transparent;
  backdrop-filter: blur(8px);
}
.hp2-btn--white:hover {
  background: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  color: var(--hp2-dark);
}

.hp2-link { color: var(--hp2-blue); text-decoration: none; font-weight: 600; }
.hp2-link:hover { text-decoration: underline; }

/* ============================================================
   NOISE GRAIN OVERLAY — global texture like Clay
   ============================================================ */
.hp2-main section { position: relative; }


/* ============================================================
   §0  VIDEO HERO — full-bleed cinematic banner
   ============================================================ */
.hp2-video-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hp2-video-hero__wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  max-height: 960px;
  background: #050510;
  overflow: hidden;
}
.hp2-video-hero__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Video is the hero — let it breathe. Tiny dim + micro contrast boost only. */
  filter: brightness(0.92) contrast(1.02) saturate(1.05);
}

/* Edge-only scrims — dark at top for nav legibility, dark at bottom for the ticker.
   Middle 70% of the hero is clean video. */
.hp2-video-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 14%, rgba(0,0,0,0) 34%);
}

/* Page H1 — bottom-left, in the scrimmed band directly above the ticker.
   z-index sits between the scrim (2) and the ticker (4). */
.hp2-video-hero__copy {
  position: absolute;
  left: 0; right: 0;
  bottom: 52px;            /* clears the ticker row */
  z-index: 3;
  padding: 0 clamp(20px, 5vw, 64px);
  pointer-events: none;
}
.hp2-video-hero__h1 {
  margin: 0;
  max-width: 15ch;         /* forces the natural 2-line break, no <br> needed */
  color: #fff;
  font-size: clamp(30px, 5.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
/* Ghost button for dark bg */
.hp2-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1.5px solid rgba(255,255,255,0.25);
}
.hp2-btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  transform: translateY(-2px);
}

/* Bottom service ticker — transparent so video peeks through */
.hp2-video-hero__ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.hp2-ticker-track {
  display: flex;
  width: max-content;
  animation: hp2-ticker 20s linear infinite;
}
.hp2-ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 16px 40px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.07);
  transition: color 0.3s;
  flex-shrink: 0;
  /* Soft drop shadow keeps text legible on bright video frames without a tinted bar */
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.hp2-ticker-item:hover { color: #fff; }

@keyframes hp2-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  /* The showreel is 16:9 landscape. In the tall portrait mobile
     wrapper, object-fit:cover cropped 50-70% of the frame WIDTH,
     slicing text off both sides ("From US" -> "From U"). Switch to
     `contain` so the whole frame + its text always shows; the dark
     wrapper bg (#050510) reads as a cinematic letterbox. Height is
     tuned so the video band is generous and the nav (top) + ticker
     (bottom) sit on the slim letterbox bands. */
  .hp2-video-hero__wrapper {
    /* Height = the video's own contained height (16:9 → 56.25vw) plus
       ~220px split into a top band for the fixed nav and a bottom band
       for the ticker. Keeps the letterbox ≈110px each side at every
       width instead of the arbitrary black a fixed aspect-ratio gives. */
    /* +330 rather than +220: the extra ~110px is the bottom band the H1
       now occupies, above the ticker. The video's contained height is
       unchanged, so the footage is not cropped any further. */
    height: calc(56.25vw + 330px);
    min-height: 460px;
    max-height: 90vh;
    background: #050510;
  }
  .hp2-video-hero__vid {
    object-fit: contain;
    object-position: center;
  }
  .hp2-video-hero__scrim {
    background:
      linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 12%, rgba(0,0,0,0) 24%);
  }
  .hp2-video-hero__copy {
    bottom: 56px;
  }
  .hp2-video-hero__h1 {
    max-width: none;       /* let it use the full column at phone widths */
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.12;
  }
}

/* ============================================================
   §1  HERO
   ============================================================ */
.hp2-hero {
  padding: clamp(80px, 12vw, 160px) 0 clamp(70px, 9vw, 120px);
  background: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Animated gradient orbs */
.hp2-hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(10,10,15,0.10) 0%, rgba(10,10,15,0.06) 40%, transparent 70%);
  border-radius: 50%;
  animation: hp2-orb-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.hp2-hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(10,10,15,0.07) 0%, transparent 65%);
  border-radius: 50%;
  animation: hp2-orb-drift 10s ease-in-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 0;
}
@keyframes hp2-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, 20px) scale(1.06); }
}

.hp2-hero .container { position: relative; z-index: 1; }

.hp2-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hp2-gap);
  align-items: center;
}

.hp2-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-blue);
  padding: 7px 16px;
  background: rgba(10,10,15,0.07);
  border-radius: 50px;
  border: 1px solid rgba(10,10,15,0.15);
  margin-bottom: 24px;
  width: fit-content;
}
/* Blue dot removed */

.hp2-hero__headline {
  font-size: clamp(42px, 5.8vw, 84px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--hp2-dark);
  margin-bottom: 24px;
}
.hp2-hero__headline em {
  font-style: italic;
  background: linear-gradient(135deg, #0a0a0f 0%, #26262c 60%, #3a3a42 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hp2-hero__sub {
  font-size: clamp(16px, 1.25vw, 18px);
  color: #666;
  margin-bottom: 40px;
  max-width: 480px;
  line-height: 1.78;
}

.hp2-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hp2-hero__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hp2-badge {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  padding: 5px 12px;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 50px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}
.hp2-badge:hover {
  border-color: var(--hp2-blue);
  color: var(--hp2-blue);
  transform: translateY(-1px);
}

/* Hero visual */
.hp2-hero__visual { position: relative; }

.hp2-hero__mockup {
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 20px rgba(0,0,0,0.06),
    0 32px 64px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.05);
  background: var(--hp2-light);
  aspect-ratio: 4/3;
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-hero__mockup:hover {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0deg);
}
.hp2-hero__img { width: 100%; height: 100%; object-fit: cover; }

/* Floating badge cards */
.hp2-floater {
  position: absolute;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  animation: hp2-float 4s ease-in-out infinite;
}
.hp2-floater--1 {
  bottom: 18%; left: -36px;
  animation-delay: 0s;
}
.hp2-floater--2 {
  top: 12%; right: -24px;
  animation-delay: -2s;
}
@keyframes hp2-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.hp2-floater__num {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--hp2-blue), var(--hp2-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp2-floater__label {
  font-size: 11px;
  color: #888;
  font-weight: 500;
  white-space: nowrap;
}


/* ============================================================
   §2  METRICS STRIP
   ============================================================ */
.hp2-metrics {
  background: var(--hp2-dark);
  padding: clamp(48px, 6vw, 88px) 0;
  position: relative;
  overflow: hidden;
}
.hp2-metrics::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(10,10,15,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(10,10,15,0.10) 0%, transparent 50%);
  pointer-events: none;
}

.hp2-metrics__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--hp2-r);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.hp2-metric {
  background: var(--hp2-dark);
  padding: clamp(32px, 3.5vw, 52px) clamp(20px, 2vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.hp2-metric::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,10,15,0.06), rgba(10,10,15,0.04));
  opacity: 0;
  transition: opacity 0.3s;
}
.hp2-metric:hover::before { opacity: 1; }

.hp2-metric__num {
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hp2-metric__label {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}


/* ============================================================
   §3  CLIENT LOGOS TICKER
   ============================================================ */
.hp2-logos {
  padding: clamp(40px, 5vw, 72px) 0;
  background: var(--hp2-white);
  overflow: hidden;
  border-bottom: 1px solid var(--hp2-border);
  position: relative;
}
.hp2-logos__label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(0,0,0,0.25);
  margin-bottom: 28px;
}
.hp2-logos__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.hp2-logos__wrap::before,
.hp2-logos__wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.hp2-logos__wrap::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.hp2-logos__wrap::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}
.hp2-logos__track {
  display: flex;
  width: max-content;
}
.hp2-logos__track--fwd { animation: hp2-fwd 36s linear infinite; }
.hp2-logos__track--rev { animation: hp2-rev 28s linear infinite; }

.hp2-logos__wrap:hover .hp2-logos__track { animation-play-state: paused; }

.hp2-logo-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 32px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,0.18);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
  transition: color 0.25s, transform 0.25s;
  white-space: nowrap;
  cursor: default;
}
.hp2-logo-item:hover {
  color: var(--hp2-blue);
  transform: scale(1.05);
}

@keyframes hp2-fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes hp2-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}


/* ============================================================
   §4  SERVICES — DARKROOM-STYLE NUMBERED SCROLL
   ============================================================ */
.hp2-services {
  padding: clamp(72px, 9vw, 140px) 0;
  background: var(--hp2-white);
  position: relative;
}
.hp2-services::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(10,10,15,0.2), transparent);
}

/* Darkroom 2-column layout */
.hp2-dr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* Left: numbered service items */
.hp2-dr__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hp2-dr__item {
  padding: clamp(32px, 4vw, 52px) 0;
  cursor: pointer;
  transition: opacity 0.4s ease;
}
/* Inactive items are faded — Darkroom style */
.hp2-dr__item:not(.active) {
  opacity: 0.3;
}
.hp2-dr__item:not(.active):hover {
  opacity: 0.6;
}

.hp2-dr__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--hp2-border);
  margin-bottom: 20px;
  transition: border-color 0.3s, background 0.3s;
}
.hp2-dr__item.active .hp2-dr__num {
  border-color: var(--hp2-dark);
}
.hp2-dr__num span {
  font-size: 15px;
  font-weight: 700;
  color: var(--hp2-dark);
  line-height: 1;
}

.hp2-dr__line {
  width: 100%;
  height: 2px;
  background: var(--hp2-border);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.hp2-dr__item.active .hp2-dr__line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--hp2-dark);
  animation: hp2-line-fill 5s linear forwards;
}
@keyframes hp2-line-fill {
  from { width: 0; }
  to   { width: 100%; }
}

.hp2-dr__title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--hp2-dark);
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.hp2-dr__desc {
  font-size: 16px;
  color: var(--hp2-mid);
  line-height: 1.78;
  max-width: 520px;
}

/* Right: sticky image card */
.hp2-dr__visual {
  position: sticky;
  top: 120px;
}
.hp2-dr__card {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3/4;
  position: relative;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.04),
    0 20px 48px rgba(0,0,0,0.08),
    0 0 0 1px rgba(0,0,0,0.04);
  background: var(--hp2-light);
}
.hp2-dr__img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.45s ease;
  padding: 24px;
}
.hp2-dr__img.active {
  opacity: 1;
}
.hp2-dr__img img {
  width: 85%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 900px) {
  .hp2-dr {
    grid-template-columns: 1fr;
  }
  .hp2-dr__visual {
    position: static;
    order: -1;
  }
  .hp2-dr__card {
    aspect-ratio: 16/10;
    max-height: 360px;
  }
}


/* ============================================================
   §5  INDUSTRY SPOTLIGHT
   ============================================================ */
.hp2-spotlight {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hp2-spotlight__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #08080a 0%, #161616 45%, #0a0a0f 130%);
  will-change: transform;
}
/* Animated mesh grid overlay */
.hp2-spotlight__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.hp2-spotlight__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 40% 50%, rgba(10,10,15,0.2) 0%, transparent 60%);
}
.hp2-spotlight__inner {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 9vw, 130px) 0;
  max-width: 720px;
}
.hp2-spotlight__headline {
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 900;
  color: #fff;
  line-height: 1.07;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.hp2-spotlight__sub {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin-bottom: 38px;
}


/* ============================================================
   §6  WORK SHOWCASE
   ============================================================ */
.hp2-work {
  padding: clamp(72px, 9vw, 140px) 0;
  background: var(--hp2-white);
}
.hp2-work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}
.hp2-case {
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.hp2-case--large { grid-column: span 2; }

.hp2-case__inner {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-case:hover .hp2-case__inner { transform: scale(1.03); }

.hp2-case-bg--1 {
  background: linear-gradient(135deg, #1a0533 0%, #3b0a6b 50%, #6b21a8 100%);
}
.hp2-case-bg--2 {
  background: linear-gradient(135deg, #161616 0%, #0a0a0f 100%);
}
.hp2-case-bg--3 {
  background: linear-gradient(135deg, #052e16 0%, #14532d 60%, #166534 100%);
}
.hp2-case-bg--4 {
  background: linear-gradient(135deg, #1c0a03 0%, #92400e 100%);
}
/* Subtle grid texture on case cards */
.hp2-case-bg--1::before,
.hp2-case-bg--2::before,
.hp2-case-bg--3::before,
.hp2-case-bg--4::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

.hp2-case__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  transition: all 0.35s ease;
  z-index: 1;
}
.hp2-case:hover .hp2-case__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}

.hp2-case__meta { display: flex; flex-direction: column; gap: 6px; }
.hp2-case__platform {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
}
.hp2-case__name {
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.025em;
  transform: translateY(4px);
  transition: transform 0.3s;
}
.hp2-case:hover .hp2-case__name { transform: translateY(0); }

.hp2-case__badge {
  display: inline-block;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.02em;
  transform: translateY(8px);
  opacity: 0;
  transition: all 0.3s 0.05s;
}
.hp2-case:hover .hp2-case__badge { transform: translateY(0); opacity: 1; }

.hp2-work__footer { text-align: center; }


/* ============================================================
   §7  AI BLOCK + TESTIMONIALS
   ============================================================ */
.hp2-proof {
  padding: clamp(72px, 9vw, 140px) 0;
  background: #f7f7f5;
  position: relative;
  overflow: hidden;
}
.hp2-proof::before {
  content: '';
  position: absolute;
  top: -200px; right: -300px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(10,10,15,0.05) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.hp2-ai-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hp2-gap);
  align-items: center;
  margin-bottom: clamp(72px, 9vw, 110px);
}
.hp2-ai-block__text p {
  font-size: 17px;
  color: #666;
  line-height: 1.78;
  margin-bottom: 26px;
}
.hp2-ai-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hp2-pill {
  padding: 7px 16px;
  border-radius: 50px;
  border: 1.5px solid rgba(10,10,15,0.2);
  color: var(--hp2-blue);
  font-size: 13px;
  font-weight: 700;
  background: rgba(10,10,15,0.04);
  transition: all 0.2s;
  cursor: default;
}
.hp2-pill:hover {
  background: var(--hp2-blue);
  color: white;
  border-color: var(--hp2-blue);
  transform: translateY(-2px);
}

.hp2-ai-block__visual {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
  position: relative;
}
.hp2-ai-visual-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #0a0a0f 0%, #26262c 50%, #3a3a42 100%);
  position: relative;
  overflow: hidden;
}
.hp2-ai-visual-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg, transparent 0px, transparent 30px,
    rgba(255,255,255,0.05) 30px, rgba(255,255,255,0.05) 31px
  );
}
.hp2-ai-visual-inner::after {
  content: '';
  position: absolute;
  top: 30%; left: 20%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 65%);
  animation: hp2-orb-drift 5s ease-in-out infinite alternate;
}

/* Testimonials */
.hp2-swiper { padding-bottom: 52px !important; }

.hp2-testi {
  background: #fff;
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
  height: 100%;
  transition: transform 0.3s, box-shadow 0.3s;
}
.hp2-testi:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
}
.hp2-testi__stars {
  font-size: 16px;
  color: #f59e0b;
  letter-spacing: 3px;
  margin-bottom: 18px;
}
.hp2-testi__quote {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--hp2-dark);
  line-height: 1.78;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 24px;
  position: relative;
}
.hp2-testi__quote::before {
  content: '\201C';
  position: absolute;
  top: -20px; left: -8px;
  font-size: 60px;
  font-style: normal;
  color: rgba(10,10,15,0.1);
  font-weight: 900;
  line-height: 1;
}
.hp2-testi__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hp2-testi__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.hp2-testi__avatar::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--hp2-blue), var(--hp2-violet)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.hp2-avatar--1 { background: linear-gradient(135deg, #f472b6, #ec4899); }
.hp2-avatar--2 { background: linear-gradient(135deg, #34d399, #059669); }
.hp2-avatar--3 { background: linear-gradient(135deg, #818cf8, #6366f1); }

.hp2-testi__author strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--hp2-dark);
  line-height: 1.3;
}
.hp2-testi__author span { font-size: 13px; color: #888; }

.hp2-swiper-prev, .hp2-swiper-next { color: var(--hp2-blue) !important; }
.hp2-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--hp2-blue) !important;
}


/* ============================================================
   §8  SPLIT CTA
   ============================================================ */
.hp2-cta-split {
  padding: clamp(72px, 9vw, 140px) 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.hp2-cta-split::before {
  content: '';
  position: absolute;
  bottom: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(10,10,15,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.hp2-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.hp2-cta-card {
  border-radius: 24px;
  padding: clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-cta-card:hover { transform: translateY(-4px); }

.hp2-cta-card--dark {
  background: var(--hp2-dark);
  color: #fff;
}
.hp2-cta-card--dark::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(10,10,15,0.3) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.hp2-cta-card--dark::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(10,10,15,0.25) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.hp2-cta-card--dark .hp2-eyebrow { color: rgba(255,255,255,0.4); }
.hp2-cta-card--dark .hp2-eyebrow::before { background: rgba(255,255,255,0.3); }
.hp2-cta-card--dark p { color: rgba(255,255,255,0.58); }

/* Animated border on light CTA card */
.hp2-cta-card--light {
  background: rgba(10,10,15,0.03);
  border: 1.5px solid rgba(10,10,15,0.12);
  position: relative;
}
.hp2-cta-card--light::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 25px;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(10,10,15,0.25), rgba(10,10,15,0.15), rgba(10,10,15,0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
.hp2-cta-card--light:hover::before { opacity: 1; }

.hp2-cta-card__title {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.hp2-cta-card--dark .hp2-cta-card__title { color: #fff; }
.hp2-cta-card--light .hp2-cta-card__title { color: var(--hp2-dark); }

.hp2-cta-card p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.hp2-email-form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.hp2-email-input {
  flex: 1; min-width: 200px;
  padding: 14px 22px;
  border: 1.5px solid var(--hp2-border);
  border-radius: 50px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: var(--hp2-dark);
}
.hp2-email-input::placeholder { color: #bbb; }
.hp2-email-input:focus {
  border-color: var(--hp2-blue);
  box-shadow: 0 0 0 3px rgba(10,10,15,0.1);
}


/* ============================================================
   §9  FAQ
   ============================================================ */
.hp2-faq {
  padding: clamp(72px, 9vw, 140px) 0;
  background: #f7f7f5;
  position: relative;
}
.hp2-faq__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}
.hp2-faq__header .hp2-h2 { margin-bottom: 16px; }
.hp2-faq__header p { font-size: 16px; color: #888; }

.hp2-faq__list { display: flex; flex-direction: column; }

.hp2-faq-item {
  border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: background 0.2s;
}
.hp2-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--hp2-dark);
  text-align: left;
  gap: 20px;
  transition: color 0.2s;
}
.hp2-faq-q:hover { color: var(--hp2-blue); }
.hp2-faq-q.open  { color: var(--hp2-blue); }

.hp2-faq-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.28s ease;
  color: var(--hp2-dark);
}
.hp2-faq-q:hover .hp2-faq-icon { border-color: var(--hp2-blue); color: var(--hp2-blue); }
.hp2-faq-q.open .hp2-faq-icon {
  transform: rotate(45deg);
  background: var(--hp2-blue);
  border-color: var(--hp2-blue);
  color: white;
}

.hp2-faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.38s ease, padding-bottom 0.38s ease;
}
.hp2-faq-a.open { max-height: 220px; padding-bottom: 22px; }
.hp2-faq-a p { font-size: 15px; color: #777; line-height: 1.78; }


/* ============================================================
   HERO CSS KEYFRAME ENTRANCE — runs regardless of tab focus
   ============================================================ */
@keyframes hp2-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hp2-fade-in-right {
  from { opacity: 0; transform: translateX(40px) perspective(1200px) rotateY(-8deg); }
  to   { opacity: 1; transform: translateX(0) perspective(1200px) rotateY(-4deg); }
}
@keyframes hp2-pop-in {
  from { opacity: 0; transform: scale(0.82) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Hero content — staggered CSS animations */
.hp2-hero__eyebrow  { animation: hp2-fade-up 0.55s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
.hp2-hero__headline { animation: hp2-fade-up 0.75s cubic-bezier(0.22,1,0.36,1) 0.22s both; }
.hp2-hero__sub      { animation: hp2-fade-up 0.65s cubic-bezier(0.22,1,0.36,1) 0.38s both; }
.hp2-hero__ctas     { animation: hp2-fade-up 0.55s cubic-bezier(0.22,1,0.36,1) 0.50s both; }
.hp2-hero__badges   { animation: hp2-fade-up 0.5s  cubic-bezier(0.22,1,0.36,1) 0.62s both; }
.hp2-hero__mockup   { animation: hp2-fade-in-right 0.85s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.hp2-floater--1     { animation: hp2-pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.80s both; }
.hp2-floater--2     { animation: hp2-pop-in 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.95s both; }

/* ============================================================
   SCROLL REVEAL — JS-driven via IntersectionObserver / GSAP
   Sections are VISIBLE by default; .hp2-animate class added
   by JS sets initial hidden state only when JS is ready
   ============================================================ */
.hp2-will-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.hp2-will-animate.hp2-animated {
  opacity: 1;
  transform: none;
}
/* Legacy class kept for JS that already uses it */
.hp2-reveal { }
.hp2-reveal-left  { }
.hp2-reveal-right { }
.hp2-reveal-scale { }


/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Old tab layout removed — Darkroom responsive is inline above */
@media (max-width: 900px) {
  .hp2-work__grid { grid-template-columns: repeat(2, 1fr); }
  .hp2-case--large { grid-column: span 2; }
  .hp2-ai-block { grid-template-columns: 1fr; }
  .hp2-ai-block__visual { display: none; }
  .hp2-cta-grid { grid-template-columns: 1fr; }
  .hp2-faq__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hp2-hero__inner { grid-template-columns: 1fr; }
  .hp2-hero__visual { display: none; }
  .hp2-metrics__grid { grid-template-columns: repeat(2, 1fr); }
  .hp2-work__grid { grid-template-columns: 1fr; }
  .hp2-case--large { grid-column: span 1; }
}
@media (max-width: 480px) {
  .hp2-hero__ctas { flex-direction: column; }
  .hp2-hero__ctas .hp2-btn { width: 100%; }
  .hp2-email-form { flex-direction: column; }
  .hp2-email-form .hp2-btn { width: 100%; }
  .hp2-metrics__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   §A  SELECTED WORK — clay.global-style case studies
   ============================================================ */
.hp2-cases {
  padding: clamp(64px, 7vw, 104px) 0 clamp(80px, 10vw, 140px);
  background: #ffffff;
  color: var(--hp2-dark);
}
.hp2-cases__head {
  /* Centered at the same width as the grid below so the headline's
     left edge lines up with the left card. The narrower column +
     centering leaves deliberate whitespace on both sides. */
  /*max-width: 1080px;*/
  margin: 0 auto clamp(40px, 5vw, 72px);
}
.hp2-cases__h2 {
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--hp2-dark);
  margin: 14px 0 22px;
}
.hp2-cases__lead {
  font-size: 18px;
  color: #4b4b58;
  line-height: 1.6;
  max-width: 640px;
}

.hp2-cases__grid {
  /* 2-col grid kept, but cards are slimmer (landscape aspect) so
     the section doesn't eat as much vertical space. On hover, the
     focused card SCALES UP and the siblings dim — the focus stays
     on one card at a time. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2.8vw, 40px);
  row-gap: clamp(36px, 5vw, 64px);
}
/* Homepage cases — narrower centered column + bigger gaps so the
   cards read distinctly SMALLER with generous whitespace on either
   side (the section was eating the full 1760 canvas). Scoped away
   from the work-page grid (.hp2-wgrid__grid), which needs full
   width for its wide video showcase tiles. */
.hp2-cases__grid:not(.hp2-wgrid__grid) {
  /*max-width: 1080px; */
  margin: 0 auto;
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: clamp(48px, 6vw, 88px);
}
@media (max-width: 640px) {
  .hp2-cases__grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}

.hp2-casecard {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  /* CSS vars driven by JS — cursor position (−1..1) and per-card stagger */
  --hp2-mx: 0;
  --hp2-my: 0;
  --hp2-stagger: 0s;
}

/* 3D context for the tilt — perspective lives on the card so meta isn't tilted */
.hp2-casecard__media {
  position: relative;
  /* Landscape aspect — was 4/3 then 5/4. Now 16/10 so cards are
     visibly slimmer at rest; the hover scale-up restores presence
     only on the focused card. */
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  margin-bottom: 16px;
  isolation: isolate;
  transform-style: preserve-3d;
  perspective: 1100px;
  /* Cursor-tracked tilt + idle scale; hover bumps the scale up. */
  transform:
    rotateX(calc(var(--hp2-my) * -3.5deg))
    rotateY(calc(var(--hp2-mx) *  4.5deg))
    scale(1);
  transition:
    transform 0.55s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.55s cubic-bezier(0.22,1,0.36,1),
    filter 0.45s ease;
  will-change: transform;
}
/* Hover enlarge — scales the media ~8% larger with a shadow lift
   so the focused card pops forward. Combined with sibling dim
   below, the user's attention follows the cursor without the
   page needing to scroll. */
.hp2-casecard:hover .hp2-casecard__media,
.hp2-casecard:focus-visible .hp2-casecard__media {
  transform:
    rotateX(calc(var(--hp2-my) * -3.5deg))
    rotateY(calc(var(--hp2-mx) *  4.5deg))
    scale(1.06);
  box-shadow:
    0 40px 80px -24px rgba(10, 10, 15, 0.28),
    0 12px 28px rgba(10, 10, 15, 0.08);
}
.hp2-casecard {
  /* Establish a stacking context so the hovered card lifts above
     its siblings — without this, the dimmed siblings would render
     over the enlarged card at certain grid positions. */
  position: relative;
  z-index: 1;
  transition: z-index 0s linear 0.4s;
}
.hp2-casecard:hover,
.hp2-casecard:focus-visible {
  z-index: 5;
  transition: z-index 0s linear 0s;
}
/* Sibling dim — when ANY card in the grid is hovered, the other
   cards fade and slightly desaturate so the focus is unmistakable.
   Avex / Charle pattern. */
@media (hover: hover) {
  .hp2-cases__grid:hover .hp2-casecard:not(:hover):not(:focus-visible) {
    opacity: 0.5;
    filter: saturate(0.6);
    transition: opacity 0.4s ease, filter 0.4s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-casecard:hover .hp2-casecard__media,
  .hp2-casecard:focus-visible .hp2-casecard__media {
    transform: none !important;
  }
  .hp2-cases__grid:hover .hp2-casecard:not(:hover):not(:focus-visible) {
    opacity: 1 !important;
    filter: none !important;
  }
}
.hp2-casecard.is-hover .hp2-casecard__media {
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

/* Base (default) + hover image share positioning & easing — clean crossfade */
.hp2-casecard__base,
.hp2-casecard__hover {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: opacity .55s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.hp2-casecard__base  { z-index: 1; opacity: 1; transform: scale(1); }
.hp2-casecard__hover { z-index: 2; opacity: 0; transform: scale(1.06); }

/* Hover / keyboard-focus: crossfade to the portfolio hover image */
.hp2-casecard:hover .hp2-casecard__base,
.hp2-casecard:focus-visible .hp2-casecard__base {
  opacity: 0;
  transform: scale(1.02);
}
.hp2-casecard:hover .hp2-casecard__hover,
.hp2-casecard:focus-visible .hp2-casecard__hover {
  opacity: 1;
  transform: scale(1);
}

/* Immersive hover scrim — a gradient that rises from the bottom of
   the image on hover, anchoring the "View case study" label. Sits
   above the images (z 1/2), below the pill (z 4). At rest opacity 0
   so cards show the screenshot at full clarity. */
.hp2-casecard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top,
    rgba(10, 10, 15, 0.62) 0%,
    rgba(10, 10, 15, 0.12) 36%,
    transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hp2-casecard:hover .hp2-casecard__media::after,
.hp2-casecard:focus-visible .hp2-casecard__media::after { opacity: 1; }

/* "View case study" pill — revived as an immersive affordance: a
   frosted chip that slides up from the bottom-left of the image on
   hover, over the scrim. Makes each card feel like a portal into
   the case rather than a static thumbnail. */
.hp2-casecard__pill {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--hp2-dark);
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(10, 10, 15, 0.18);
}
.hp2-casecard:hover .hp2-casecard__pill,
.hp2-casecard:focus-visible .hp2-casecard__pill {
  opacity: 1;
  transform: translateY(0);
}
.hp2-casecard__pill--disabled-placeholder {
  display: none !important;
}
.hp2-casecard__pill--unused {
  /* Original styles parked here in case we revive a hover affordance
     later (kept off the runtime via the unused-modifier guard). */
  position: absolute;
  top: 50%; left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hp2-dark);
  color: #fff;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -42%) scale(.94);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 4;
  transform-style: preserve-3d;
}
/* Also reveal the pill while JS-driven tilt adds .is-hover (keeps
   the bottom-left slide-up consistent with the :hover rule above —
   the old centred magnetic transform was removed). */
.hp2-casecard.is-hover .hp2-casecard__pill {
  opacity: 1;
  transform: translateY(0);
}
.hp2-casecard__pill svg { margin-top: 1px; }

/* Keyboard focus ring on the link without killing the hover feel */
.hp2-casecard:focus { outline: none; }
.hp2-casecard:focus-visible { outline: 2px solid var(--hp2-blue); outline-offset: 4px; border-radius: 20px; }

.hp2-casecard__meta { padding: 0 2px; }
.hp2-casecard__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b6b7a;
  margin-bottom: 6px;
}
.hp2-casecard__title {
  /* Was clamp(26, 2.2vw, 34) — too big for a 3-col grid. Scaled
     down so each card's title reads as a label, not a heading. */
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--hp2-dark);
  margin: 0 0 6px;
  transition: color .25s ease;
}
/* Title hover — subtle lift + arrow reveal (Clay-style) */
.hp2-casecard__title {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
.hp2-casecard__title::after {
  content: ' →';
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  font-weight: 400;
}
.hp2-casecard:hover .hp2-casecard__title {
  color: var(--hp2-dark);
  transform: translateY(-2px);
}
.hp2-casecard:hover .hp2-casecard__title::after {
  opacity: 1;
  transform: translateX(2px);
}
.hp2-casecard__desc {
  font-size: 13.5px;
  color: #4b4b58;
  line-height: 1.5;
  margin: 0;
  max-width: 480px;
}

.hp2-cases__footer {
  margin-top: clamp(60px, 8vw, 110px);
  display: flex;
  justify-content: center;
}

@media (max-width: 960px) {
  .hp2-cases__grid { grid-template-columns: 1fr; row-gap: clamp(40px, 9vw, 64px); }
  .hp2-casecard__media { aspect-ratio: 16/11; border-radius: 14px; }
}

/* ============================================================
   §A — Curtain-rise scroll entrance
   ----------------------------------------------------------------
   Initial (--will):    media is masked from below (clip-path),
                        image is zoomed in (1.15×),
                        meta is offset down + invisible.
   Target (--in):       media reveals top→bottom,
                        image settles to 1.0× (long camera-zoom feel),
                        meta crossfades up with a baked-in 400ms delay.
   The whole sequence is staggered per-card via --hp2-stagger.
   ============================================================ */

/* STATIC CARDS — entrance reveal removed (was a curtain-clip-path
   that ran on scroll), tilt/scale-on-hover removed, image crossfade
   removed. The card is now exactly what it shows: a static thumbnail
   with a small hover-shadow lift for affordance. Videos on wide
   tiles autoplay continuously as the base layer (see template).
   These overrides neutralise the older animation rules above without
   us needing to delete them — keeps the diff minimal and reversible. */
.hp2-casecard,
.hp2-casecard--will,
.hp2-casecard--in,
.hp2-casecard.is-focused,
.hp2-casecard--no-swap {
  transform: none !important;
}
.hp2-casecard--will .hp2-casecard__media,
.hp2-casecard--in .hp2-casecard__media {
  clip-path: none;
}
.hp2-casecard--will .hp2-casecard__base,
.hp2-casecard--in .hp2-casecard__base,
.hp2-casecard:hover .hp2-casecard__base,
.hp2-casecard:focus-visible .hp2-casecard__base,
.hp2-casecard--no-swap:hover .hp2-casecard__base {
  transform: none !important;
}
.hp2-casecard--will .hp2-casecard__meta,
.hp2-casecard--in .hp2-casecard__meta {
  opacity: 1;
  transform: none;
}
/* Hide the hover image overlay entirely — template no longer renders
   it for non-video cards, but kill any legacy markup just in case. */
.hp2-casecard__hover:not(video) { display: none; }

/* Card hover — fully static media. No scale, no lift, no shadow,
   no filter, no opacity drift. The image is the artefact and it
   stays put. The only hover affordance is the existing title-arrow
   reveal (line ~1782-1788): title nudges 2px up + "→" arrow slides
   in. That's enough motion to read as interactive without theatrics. */
.hp2-casecard,
.hp2-casecard__base,
.hp2-casecard:hover .hp2-casecard__base,
.hp2-casecard:focus-visible .hp2-casecard__base {
  transform: none !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.hp2-casecard__media {
  overflow: hidden;  /* keep image inside the rounded media frame */
}

/* Wide showcase tile: keep the cinematic depth-shadow on the media
   box so the autoplay video reads as a banner sitting just above the
   page surface. The video itself fills the media via __base__video. */
.hp2-wcard--wide .hp2-casecard__media {
  box-shadow: 0 30px 70px -32px rgba(10, 10, 15, 0.32);
}
.hp2-casecard__base--video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   §B  SERVICES ACCORDION
   Clay-style 3-column: intro copy (left) | slab tower (middle) | accordion (right)
   ============================================================ */

.hp2-sva {
  padding: clamp(56px, 8vw, 100px) 0;
  background: #fff;
  color: var(--hp2-dark);
  border-top: 1px solid var(--hp2-border);
  border-bottom: 1px solid var(--hp2-border);
}
/* Force the inner container to center regardless of theme wrapper quirks */
.hp2-sva > .container {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

/* Section header — sits above the 2-col body (preview + accordion). */
.hp2-sva__head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.hp2-sva__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  margin-bottom: 14px;
}

/* Two-column body: storefront preview (left, dominant) · accordion (right).
   Top-aligned so the preview lines up with the first accordion row and stays
   put when the open item changes height. */
.hp2-sva__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto;
}

.hp2-sva__h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.06;
  color: var(--hp2-dark);
  letter-spacing: -0.03em;
  margin: 0;
}

/* Masked word-by-word reveal for the H2.
   Each word sits inside an overflow:hidden span; the inner span slides up
   from 105% below to 0 with a stagger driven by the --i CSS var (set in PHP). */
.hp2-sva__h2-line {
  display: block;
}
.hp2-sva__h2-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* slight padding so descenders (g, p, y) aren't clipped */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.hp2-sva__h2-word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
  will-change: transform;
}
.hp2-sva__h2.hp2-animated .hp2-sva__h2-word,
.hp2-animated .hp2-sva__h2-word {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hp2-sva__h2-word { transform: translateY(0) !important; transition: none !important; }
}
/* Clay-style supporting tagline under the H2 */
.hp2-sva__tagline {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp2-mid);
  margin: 20px 0 0;
}

/* ============================================================
   §B "What we do" — split header + storefront proof-card grid.
   Replaces the accordion + 3D browser-preview layout. Header goes
   two-column (big headline left, supporting line right); the body
   is a 3×2 wall of grayscale client-storefront cards.
   ============================================================ */
.hp2-sva__head--split {
  max-width: none;
  margin: 0 auto clamp(36px, 4vw, 60px);
  text-align: left;
}
.hp2-sva__head--split .hp2-sva__h2 {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;
}
.hp2-sva__head--split .hp2-sva__tagline {
  margin: 0 0 8px;
  max-width: 460px;
  color: #dd7a54; /* warm coral accent for the supporting line */
}
@media (max-width: 860px) {
  .hp2-sva__head--split {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }
}

.hp2-svcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
  /*max-width: 1560px;*/
  margin: 0 auto;
}
.hp2-svcard {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 28px;
  overflow: hidden;
  background: #0a0a0f;
  text-decoration: none;
  box-shadow: 0 18px 40px -26px rgba(10, 10, 15, 0.55);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-svcard:hover,
.hp2-svcard:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -34px rgba(10, 10, 15, 0.5);
}
.hp2-svcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Full colour, not the old grayscale-until-hover treatment — six stock
     photos from different sources carry different colour casts (warm
     office tones, cool phone-screen blue, green foliage), so a light
     saturate+contrast here is a harmonizer, not a style choice: it settles
     them onto one palette without flattening them to monochrome. */
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.hp2-svcard:hover .hp2-svcard__img,
.hp2-svcard:focus-visible .hp2-svcard__img {
  transform: scale(1.07);
  filter: saturate(1.15) contrast(1.05);
}

/* Hover motion loop. The animated WebP sits directly on top of the still
   photo and below the scrim/number/title (z-index 1+), so the card's text
   never loses its backing. It renders at the card's own radius because the
   card clips with overflow:hidden, and it holds the same base scale as the
   still so the cross-fade is a fade only — no jump between the two layers.
   src is empty until homepage-v2.js fills it from data-src.
   The base 0.5s is the hover-OUT duration; :hover overrides it with a faster
   0.3s in. Motion should answer the cursor promptly and then let go slowly —
   a symmetric fade reads as sluggish arriving and abrupt leaving. */
.hp2-svcard__gif {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  object-fit: cover;
  opacity: 0;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
  pointer-events: none;
  transition: opacity 0.5s ease,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .is-loaded is set by the JS on the image's own load event. Without it the
   opacity stays 0 through a first hover that is still fetching, so the card
   holds its poster rather than revealing a partially decoded frame — the
   card's lift and the still's own scale carry the feedback in the meantime. */
.hp2-svcard--gif:hover .hp2-svcard__gif.is-loaded,
.hp2-svcard--gif:focus-visible .hp2-svcard__gif.is-loaded {
  opacity: 1;
  transform: scale(1.03);
  transition: opacity 0.3s ease,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Touch-only pointers never load or reveal the loop (the JS gate matches
   this query); :focus-visible above still covers keyboard users there. */
@media (hover: none), (pointer: coarse) {
  .hp2-svcard--gif:hover .hp2-svcard__gif.is-loaded { opacity: 0; }
}
.hp2-svcard__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(8, 8, 12, 0.86) 0%,
    rgba(8, 8, 12, 0.42) 42%,
    rgba(8, 8, 12, 0.05) 72%);
}
.hp2-svcard__num {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
.hp2-svcard__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: #0a0a0f;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hp2-svcard__body {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hp2-svcard__tag {
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.hp2-svcard__tag::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: #fff;
}
.hp2-svcard__title {
  font-size: clamp(18px, 1.35vw, 23px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #fff;
}
/* Column-count breakpoints aligned to .hp2-tes__wall (980 / 620) so
   the two back-to-back 3-col card grids (service cards, review cards)
   reflow 3→2→1 at the SAME widths. They previously diverged (900/560
   vs 980/620), so the 901–980px and 561–620px bands showed the
   service grid and review grid with different column counts stacked
   directly on top of each other. Reviews keep the wider 980 threshold
   because their text needs the room, so the service grid follows it. */
@media (max-width: 980px) {
  .hp2-svcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .hp2-svcards { grid-template-columns: 1fr; }
  .hp2-svcard { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-svcard,
  .hp2-svcard__img { transition: none !important; }
  .hp2-svcard:hover,
  .hp2-svcard:focus-visible { transform: none; }
  .hp2-svcard:hover .hp2-svcard__img,
  .hp2-svcard:focus-visible .hp2-svcard__img { transform: scale(1.02); }
  /* No hover loop at all — the still photo is the whole card. display:none
     also stops the GIF decoding if it was already fetched. */
  .hp2-svcard__gif { display: none !important; }
}

/* ----------------------------------------------------------------
   Col 2 — Clay-style multi-form 3D sculpture

   Architecture:
     .hp2-sva__visual  → perspective scene (3D camera)
     .hp2-sva__stage   → rotating root (continuous Y rotation)
     .hp2-sva__form    → one per service; absolute, only .is-active is opaque
     .hp2-cube         → reusable 3D cube primitive (6 face divs)

   Form positioning is encoded as transforms on the inner .hp2-cube*
   children of each .hp2-sva__form. All cubes use top:50%; left:50% +
   translate(-50%,-50%) as their centering origin.
   ---------------------------------------------------------------- */
.hp2-sva__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  min-height: 340px; /* reserves space for the bigger sculpture */
}

/* Neutralize the generic .hp2-will-animate fade — the stage handles its own entrance. */
.hp2-sva__visual.hp2-will-animate {
  opacity: 1;
  transform: none;
  transition: none;
}

/* TRACKER — wraps the stage. JS sets translateY(--track-y) so the sculpture
   magnetically follows the vertically-hovered service. Smooth interpolation.
   CRITICAL: transform-style: preserve-3d, otherwise the tracker's own
   transform flattens the entire 3D scene below it — every cube face and
   satellite collapses onto a single plane. */
.hp2-sva__tracker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(var(--track-y, 0px));
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* The rotating stage. All forms live inside it.
   X-tilt of -25° (was -22°) shows more of the top face on every form,
   making the 3D readable even on flatter slab forms (CRO tiers, platform).
   ──────────────────────────────────────────────────────────────────────
   No `scale()` in the resting transform: the entrance animation handles
   the grow-in. If we kept scale(0.82) here it would visibly POP from 82%
   to 100% the moment the rotation animation starts (CSS animations
   override the static transform; missing keyframe properties default to
   identity, so scale silently jumped to 1).
   ────────────────────────────────────────────────────────────────────── */
.hp2-sva__stage {
  --stage-size: clamp(280px, 24vw, 360px);
  position: relative;
  width: var(--stage-size);
  height: var(--stage-size);
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(20deg) scale(0.78);
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Two-stage animation:
     1) hp2-stage-enter (0.9s, runs once, `forwards` holds end state)
        swings Y 0°→40° and grows 0.72→1, so every entry frame is 3D.
     2) hp2-stage-orbit (16s, infinite, delayed 0.9s) takes over at
        the exact end-state of (1) for a seamless handoff into the
        continuous oscillation.
   ──────────────────────────────────────────────────────────────────
   Why oscillation, not full 360° rotation:
   A 360° loop sweeps through every Y angle, including the four
   axis-aligned poses (0°, 90°, 180°, 270°) where only ONE side face
   is visible per cube-half. On thin forms (split cube, platform) those
   moments read as flat parallelograms — exactly the "2D then 3D" the
   user reported. Constraining Y to a 40°-amplitude oscillation between
   20° and 60° guarantees ≥3 faces are visible at every frame, so the
   cube is mathematically always 3D, never just "currently 3D". */
.hp2-sva__visual.hp2-animated .hp2-sva__stage {
  opacity: 1;
  animation:
    hp2-stage-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hp2-stage-orbit 16s 0.9s ease-in-out infinite;
}
/* On focus: ease the oscillation slower (16s → 26s) so the user can
   read the active face, but stay well clear of "frozen". Because the
   path never visits axis-aligned poses, even a slow swing always shows
   3 faces — there is no "wait for it to look 3D" anymore.
   ──────────────────────────────────────────────────────────────────
   IMPORTANT — do NOT add `filter:` to .hp2-sva__stage. The browser
   flattens every transform-style:preserve-3d child whenever a `filter`
   is set on the 3D root, collapsing every cube face onto a single
   plane. The grounding shadow lives on .hp2-sva__visual::after instead
   (separate element, no preserve-3d ancestor → no flattening risk).
   ────────────────────────────────────────────────────────────────── */
.hp2-sva__visual.is-focusing.hp2-animated .hp2-sva__stage {
  animation-duration: 0.9s, 26s;
}
/* Entrance: lands at rotateY(40°) — the midpoint of the oscillation
   range — so the orbit handoff is seamless (eased orbit starts from
   its mean, swings to 60°, back through 40° to 20°, and repeats). */
@keyframes hp2-stage-enter {
  from { transform: rotateX(-30deg) rotateY(0deg)  scale(0.72); }
  to   { transform: rotateX(-30deg) rotateY(40deg) scale(1);    }
}
/* Constrained Y oscillation — Y stays inside [20°, 60°], never near
   axis-aligned. Combined with the constant -30° X-tilt, the top face
   is always prominently visible AND at least one side face is ≥30°
   off the camera plane, so 3 faces are always rendering. ease-in-out
   on the parent animation gives a natural "hand-of-god" wobble rather
   than a robotic ping-pong. */
@keyframes hp2-stage-orbit {
  0%   { transform: rotateX(-30deg) rotateY(40deg) scale(1); }
  25%  { transform: rotateX(-30deg) rotateY(60deg) scale(1); }
  50%  { transform: rotateX(-30deg) rotateY(40deg) scale(1); }
  75%  { transform: rotateX(-30deg) rotateY(20deg) scale(1); }
  100% { transform: rotateX(-30deg) rotateY(40deg) scale(1); }
}

/* Each form fills the stage; only .is-active is visible.
   ──────────────────────────────────────────────────────────────────────
   Transition design — history:
     1) `scale(0.55) rotateY(55deg)` overshoot: rotateY direction made
        outgoing/incoming swing opposite ways, so the first hover felt
        different from subsequent ones (asymmetric swing).
     2) `scale(0.85) → scale(1)` symmetric: solved asymmetry but reads
        as a flat 2D zoom — the form looks 2D until the stage rotation
        reveals the cube faces, hence "shows 2D first then 3D".
     3) `rotateX(-28deg) scale(0.72) → rotateX(0) scale(1)`: tipped
        around the horizontal axis. Still landed on a `rotateY(0)` pose
        every swap, so when the stage's continuous Y-rotation happened
        to be near 0/180/360°, the brief moment between opacity:0→1 and
        the rotateX completing read as flat — the user reported this as
        "2D first then 3D".
     4) `rotateY(-22deg) rotateX(-14deg) scale(0.86) → 0° 0° 1`:
        combined Y + X rotation gave ≥2 faces from frame 1 of the swap,
        but the active resting pose still landed at rotateY(0) — and
        because the stage was sweeping a full 360° loop, the form would
        often settle at a moment where the stage was near axis-aligned,
        so the cube would briefly read flat AFTER the swap completed
        (user-reported "takes time and then it gets 3D").
     5) Current: paired with a constrained stage oscillation (see
        hp2-stage-orbit) that never visits axis-aligned poses, so the
        active resting pose is now safe at rotateY(0). Inactive starts
        at `rotateY(-18deg) rotateX(-10deg) scale(0.9)` — a minimal
        delta — and the swap is fast (0.18s opacity / 0.45s transform)
        so it reads as a confident, snappy 3D settle rather than a
        slow "growing in" arrival.
   visibility is delayed on exit so inactive forms don't ghost through
   during the crossfade (real glitch with preserve-3d + opacity).
   ────────────────────────────────────────────────────────────────────── */
.hp2-sva__form {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* PURE OPACITY CROSSFADE — no transform changes at all.
     Every previous attempt (scale, rotateX, compound rotateY+X)
     passed the form through an intermediate transform state that
     briefly read as "flat" or "2D-first" before settling at the
     stage's 3D pose. Eliminating the transform entirely means the
     form is ALREADY at full 3D pose from frame 1: it just fades in
     to reveal the cube faces that the stage's continuous orbit is
     already rotating through. No interpolated pose = no 2D phase. */
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.4s;
}
.hp2-sva__form.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

/* ============================================================
   SERVICES VISUAL · MEDIA MODE — real browser-framed storefront
   screenshots replace the abstract 3D cube. The accordion JS still
   only toggles .is-active on each .hp2-sva__form, so the active
   store crossfades in. Here we flatten the 3D stage so screenshots
   stay crisp and face-on, with a gentle float for life. The extra
   .hp2-sva--media class outranks the cube stage/orbit rules above.
   ============================================================ */
.hp2-sva__visual.hp2-sva--media { display: block; height: 100%; perspective: none !important; min-height: 0; }
.hp2-sva__visual.hp2-sva--media::after { display: none; }            /* drop the 3D floor shadow */
.hp2-sva__visual.hp2-sva--media .hp2-sva__tracker { width: 100%; height: 100%; transform: none !important; transform-style: flat !important; }
.hp2-sva__visual.hp2-sva--media .hp2-sva__stage {
  /* Fills the dominant left column AND matches the accordion's height:
     align-items:stretch on the grid gives the visual a definite height,
     which this 100% chain (visual -> tracker -> stage) flows down to. The
     min-height is a floor so a % size can never collapse the stage to zero;
     the stacked mobile layout swaps in an aspect-ratio instead. */
  width: 100%;
  height: 100%;
  min-height: 320px;
  /* !important defeats the cube orbit animation + base 3D transform that
     would otherwise skew the flat screenshot into a parallelogram.
     (CSS spec: an !important author rule beats running animations.) */
  transform: none !important;
  transform-style: flat !important;
  opacity: 1 !important;
  animation: none !important;
}
/* Browser mockup — chrome bar + storefront screen. */
.hp2-sva--media .hp2-sva__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(10, 10, 15, 0.10);
  box-shadow: 0 44px 80px -38px rgba(10, 10, 15, 0.5),
              0 10px 26px -18px rgba(10, 10, 15, 0.35);
}
.hp2-sva__shot-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  background: #f4f4f5;
  border-bottom: 1px solid rgba(10, 10, 15, 0.07);
  flex-shrink: 0;
}
.hp2-sva__shot-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.hp2-sva__shot-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.16);
}
.hp2-sva__shot-url {
  flex: 1 1 auto;
  font-size: 11px;
  line-height: 1;
  color: rgba(10, 10, 15, 0.5);
  background: #ffffff;
  border: 1px solid rgba(10, 10, 15, 0.07);
  border-radius: 6px;
  padding: 5px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp2-sva__shot-screen {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: #ffffff;
}
.hp2-sva__shot-screen img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: top center;
}
/* Brand caption overlay — crossfades with each storefront shot (it lives
   inside the .is-active form), giving the preview a portfolio "live build"
   label instead of reading as a static stock image. */
.hp2-sva__shot-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.82) 0%, rgba(10, 10, 15, 0) 100%);
  color: #fff;
  pointer-events: none;
}
.hp2-sva__shot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: hp2-sva-live 2s ease-out infinite;
}
@keyframes hp2-sva-live {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.hp2-sva__shot-brand {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hp2-sva__shot-tag {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
}
.hp2-sva__shot-tag::before {
  content: '\00b7';
  margin: 0 7px 0 1px;
  opacity: 0.6;
}

/* Soft floor shadow — heavier now that the cube is dark, so it still
   grounds visibly on a light page. Tracks vertically with the cube via
   --track-y, intensifies on focus. */
.hp2-sva__visual::after {
  content: '';
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 82%;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(10, 12, 22, 0.45) 0%,
    rgba(10, 12, 22, 0.18) 40%,
    transparent 74%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
  /* Tracks vertically with the cube via the same --track-y JS sets on .visual */
  transform: translateX(-50%) translateY(var(--track-y, 0px));
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease, background 0.4s ease;
}
.hp2-sva__visual.is-focusing::after {
  /* Compensates for the (intentionally) removed stage-filter drop-shadow:
     a wider, deeper floor shadow signals "focus" without flattening 3D. */
  transform: translateX(-50%) translateY(var(--track-y, 0px)) scaleX(1.22);
  opacity: 1.5;
  background: radial-gradient(ellipse at center,
    rgba(10, 12, 22, 0.58) 0%,
    rgba(10, 12, 22, 0.22) 40%,
    transparent 74%);
}

/* ============================================================
   .hp2-cube — reusable CSS-3D cube primitive
   Each cube has 3 size vars: --w (X), --h (Y), --d (Z).
   Default = 100×100×100. Per-form rules override these + position.
   ============================================================ */
.hp2-cube {
  --w: 100px;
  --h: 100px;
  --d: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  /* Default: centered in stage. Per-form rules override transform. */
  transform: translate(-50%, -50%);
}
/* Faces — dark, premium palette with simulated directional lighting
   (light source at upper-front-left). Brightness range is wide
   (top ~L60% → bottom ~L2%) so adjacent faces ALWAYS differentiate at
   any rotation — narrow palettes blend together on thin slabs and read
   as floating panels rather than a solid cube. Crisp white top-edge
   highlight + dark inset border give every face a visible bevel so the
   silhouette of the cube is unmistakable against the light page. */
.hp2-cube__face {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.55),
    inset -1px 0 0 rgba(0, 0, 0, 0.4);
  backface-visibility: hidden;
}
/* Faces are anchored to the exact "Get in Touch" button colour
   (--hp2-dark: #0a0a0f) — neutral black with no blue cast, so the
   3D sculpture reads as one continuous brand object with the CTAs.
   Each face steps that base toward white (lit) or pure black
   (shadowed) so the cube silhouette still reads at every angle. */
.hp2-cube__face--front {
  width: var(--w); height: var(--h);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.30) 100%),
    linear-gradient(160deg, #1a1a20 0%, #0a0a0f 55%, #050507 100%);
  transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2));
}
.hp2-cube__face--back {
  width: var(--w); height: var(--h);
  background: linear-gradient(160deg, #07070a 0%, #020203 100%);
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--d) / 2));
}
.hp2-cube__face--right {
  width: var(--d); height: var(--h);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 25%),
    linear-gradient(180deg, #0e0e14 0%, #05050a 100%);
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--w) / 2));
}
.hp2-cube__face--left {
  width: var(--d); height: var(--h);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(180deg, #1c1c24 0%, #0a0a0f 100%);
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--w) / 2));
}
.hp2-cube__face--top {
  width: var(--w); height: var(--d);
  background:
    radial-gradient(140% 120% at 20% 10%, rgba(255,255,255,0.32), transparent 60%),
    linear-gradient(140deg, #2a2a34 0%, #16161c 50%, #0a0a0f 100%);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--h) / 2));
}
.hp2-cube__face--bottom {
  width: var(--w); height: var(--d);
  background: linear-gradient(140deg, #020203 0%, #000000 100%);
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--h) / 2));
}

/* ============================================================
   Per-form positioning — each cube class places itself
   ============================================================ */

/* Form 0: Solid Cube — Storefront Builds */
.hp2-cube--solid {
  --w: 130px; --h: 130px; --d: 130px;
}

/* Form 1: AI Commerce Agents — main cube + 2 visibly-sized satellites.
   Main cube pulses (intelligence); satellites trace clear orbital paths. */
.hp2-cube--ai-main {
  --w: 110px; --h: 110px; --d: 110px;
  animation: hp2-ai-pulse 3.6s ease-in-out infinite;
}
@keyframes hp2-ai-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.09); }
}
.hp2-cube--ai-satellite {
  --w: 50px; --h: 50px; --d: 50px;
  animation: hp2-sat-orbit-a 4.2s linear infinite;
}
.hp2-cube--ai-satellite-2 {
  --w: 36px; --h: 36px; --d: 36px;
  animation: hp2-sat-orbit-b 6s linear infinite;
}
@keyframes hp2-sat-orbit-a {
  from { transform: translate(-50%, -50%) translateY(-90px) rotateY(0deg)   translateX(60px); }
  to   { transform: translate(-50%, -50%) translateY(-90px) rotateY(360deg) translateX(60px); }
}
@keyframes hp2-sat-orbit-b {
  from { transform: translate(-50%, -50%) translateY(85px)  rotateY(360deg) translateX(72px); }
  to   { transform: translate(-50%, -50%) translateY(85px)  rotateY(0deg)   translateX(72px); }
}

/* Form 2: Solid cube + rising satellite — CRO.
   Replaces the old 3-tier stepped pyramid (slab geometry that read as
   floating panels at axis-aligned moments). The main cube is identical
   to Form 0's solid cube; a small satellite rises above it on a slow
   ease so the "lift / step up" metaphor is carried by motion, not by
   thin slabs. Both elements are cube-proportioned. */
.hp2-cube--cro-main {
  --w: 130px; --h: 130px; --d: 130px;
}
.hp2-cube--cro-rising {
  --w: 50px; --h: 50px; --d: 50px;
  animation: hp2-cro-rise 3.4s ease-in-out infinite;
}
@keyframes hp2-cro-rise {
  0%, 100% { transform: translate(-50%, -50%) translateY(-95px); }
  50%      { transform: translate(-50%, -50%) translateY(-118px); }
}

/* Form 3: Solid cube — Headless & Composable.
   Replaces the split-cube (two thin halves with a gap that exposed the
   bright top face of the lower half through the gap as a "ghost panel"
   at certain camera angles). A single solid cube with a subtle scale-
   pulse carries "modular, decoupled" via animation rather than shape. */
/* Two thick half-cubes (140 wide × 60 tall × 140 deep — proper
   cuboids, not flat panels) that decouple and reconverge along the
   Y axis. Bottom half stays put, top half breathes up & back. The
   visible gap between them at peak (≈40px) is the literal "decoupled"
   read — frontend lifting off the backend. */
.hp2-cube--split-bottom {
  --w: 140px; --h: 60px; --d: 140px;
  transform: translate(-50%, -50%) translateY(40px);
}
.hp2-cube--split-top {
  --w: 140px; --h: 60px; --d: 140px;
  animation: hp2-headless-decouple 3.4s ease-in-out infinite;
}
@keyframes hp2-headless-decouple {
  0%, 100% { transform: translate(-50%, -50%) translateY(-40px); }
  50%      { transform: translate(-50%, -50%) translateY(-72px); }
}

/* Form 4: Quartered — Custom Apps. Bigger cubes + stronger drift make
   the modular metaphor obvious. */
.hp2-cube--q1, .hp2-cube--q2, .hp2-cube--q3, .hp2-cube--q4 {
  --w: 64px; --h: 64px; --d: 64px;
  animation: hp2-quad-drift 4.6s ease-in-out infinite;
}
.hp2-cube--q1 { --qx: -42px; --qz: -42px; }
.hp2-cube--q2 { --qx:  42px; --qz: -42px; animation-delay: 0.15s; }
.hp2-cube--q3 { --qx: -42px; --qz:  42px; animation-delay: 0.30s; }
.hp2-cube--q4 { --qx:  42px; --qz:  42px; animation-delay: 0.45s; }
@keyframes hp2-quad-drift {
  0%, 100% { transform: translate(-50%, -50%) translateX(var(--qx)) translateZ(var(--qz)); }
  50%      { transform: translate(-50%, -50%)
                        translateX(calc(var(--qx) * 1.55))
                        translateZ(calc(var(--qz) * 1.55)); }
}

/* Form 5: Solid cube + ground radar — Growth Retainer.
   Replaces the cube-on-platform (the platform was a 200×50×200 slab that
   read as a flat panel at the slowest moments of the orbit). The radar
   ring now lives on the form wrapper's ::after, positioned beneath the
   cube on the ground plane — same "monitoring, grounded retainer"
   metaphor without slab geometry. */
/* Main cube — the partnership object at centre. Slightly smaller
   than other forms (110 vs 130) to leave clear visual room for the
   orbiting satellite that wraps around it. */
.hp2-cube--retainer-main {
  --w: 110px; --h: 110px; --d: 110px;
  transform: translate(-50%, -50%) translateY(-8px);
  animation: hp2-retainer-pulse 3.6s ease-in-out infinite;
}
@keyframes hp2-retainer-pulse {
  0%, 100% { transform: translate(-50%, -50%) translateY(-8px) scale(1); }
  50%      { transform: translate(-50%, -50%) translateY(-8px) scale(1.04); }
}
/* Satellite — small cube that orbits the main on the XZ plane (Y
   = horizontal). The compound transform (translate to centre →
   rotateY → translateX out → counter-rotateY to keep the satellite
   facing camera) creates a clean circular orbit. 5s linear loop
   reads as steady "ongoing monitoring", not frenetic. */
.hp2-cube--retainer-sat {
  --w: 36px; --h: 36px; --d: 36px;
  animation: hp2-retainer-orbit 5.2s linear infinite;
}
@keyframes hp2-retainer-orbit {
  from { transform: translate(-50%, -50%) rotateY(0deg)   translateX(105px) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) rotateY(360deg) translateX(105px) rotateY(-360deg); }
}
/* Ground radar — flat ring on the y=78 plane (just below the cube's
   bottom face). Anchored to the form, not the cube, so it shares the
   form's transform-style: preserve-3d but isn't affected by the cube's
   own transforms. The orbit's -30° X-tilt makes the rotateX(90deg) ring
   read as an ellipse — exactly what a "floor radar" should look like. */
.hp2-sva__form--retainer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.32);
  transform: translateY(78px) rotateX(90deg);
  animation: hp2-radar-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes hp2-radar-pulse {
  0%   { transform: translateY(78px) rotateX(90deg) scale(0.4); opacity: 0.85; }
  80%  { opacity: 0; }
  100% { transform: translateY(78px) rotateX(90deg) scale(1.5); opacity: 0; }
}

/* Reduced-motion: freeze the rotation, keep the active form visible at a fixed angle. */
@media (prefers-reduced-motion: reduce) {
  .hp2-sva__stage {
    opacity: 1 !important;
    transform: rotateX(-30deg) rotateY(40deg) !important;
    animation: none !important;
    transition: none !important;
  }
  .hp2-cube--ai-satellite,
  .hp2-cube--ai-satellite-2,
  .hp2-cube--ai-main,
  .hp2-cube--cro-rising,
  .hp2-cube--split-top,
  .hp2-cube--retainer-main,
  .hp2-cube--retainer-sat,
  .hp2-cube--q1, .hp2-cube--q2, .hp2-cube--q3, .hp2-cube--q4,
  .hp2-sva__form--retainer::after { animation: none !important; }
}

/* ----------------------------------------------------------------
   Column 3 — Accordion
   ---------------------------------------------------------------- */
.hp2-sva__list {
  display: flex;
  flex-direction: column;
}
.hp2-sva__item {
  position: relative;
  border-bottom: 1px solid var(--hp2-border);
  transition: background 0.35s ease;
}
.hp2-sva__item:last-child {
  border-bottom: 1px solid var(--hp2-border);
}
/* White always — no fill. The selection cue is a short dark dash that
   draws in from the left (echoing the brand's eyebrow dash) while the
   row content slides across to meet it. Blends with the B&W page.
   Anchored to the trigger (not the item) so it stays centred on the
   name row even when the item grows to show its description. */
.hp2-sva__trigger::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--hp2-dark);
  transform: translateY(-50%);
  pointer-events: none;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-sva__item:hover .hp2-sva__trigger::before,
.hp2-sva__item--open .hp2-sva__trigger::before {
  width: 24px;
}

/* Monospaced index (01–06) — a quiet editorial marker; lifts to full
   dark on the active row. */
.hp2-sva__num {
  flex-shrink: 0;
  width: 24px;
  font-family: 'SF Mono','JetBrains Mono',Consolas,monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hp2-mid);
  opacity: 0.45;
  transition: opacity 0.24s ease, color 0.24s ease;
}
.hp2-sva__trigger:hover .hp2-sva__num,
.hp2-sva__item--open .hp2-sva__num {
  opacity: 1;
  color: var(--hp2-dark);
}

/* Trigger button — number + name (flex 1) + chevron (right). On
   hover/open the content slides right to sit just past the drawn-in dash. */
.hp2-sva__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-sva__item:hover .hp2-sva__trigger,
.hp2-sva__item--open .hp2-sva__trigger {
  padding-left: 46px;
}

/* Name takes the remaining space so the chevron sits at the far right. */
.hp2-sva__trigger > .hp2-sva__name { flex: 1; }

/* Lighter, tighter type — the old 700 / 28px read heavy and clunky. */
.hp2-sva__name {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  color: var(--hp2-dark);
  letter-spacing: -0.016em;
  line-height: 1.25;
}

/* "New" badge — dark pill beside the AI service name */
.hp2-sva__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--hp2-dark);
  border-radius: 50px;
  vertical-align: middle;
  line-height: 1.4;
  position: relative;
  top: -1px;
  animation: hp2-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes hp2-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.hp2-sva__chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--hp2-dark);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.24s ease;
}

.hp2-sva__trigger:hover .hp2-sva__chevron,
.hp2-sva__item--open   .hp2-sva__chevron {
  color: var(--hp2-dark);
}
.hp2-sva__item--open .hp2-sva__chevron {
  transform: rotate(180deg);
}

/* Accordion body — smooth max-height reveal. Now just one short description. */
.hp2-sva__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-sva__item--open .hp2-sva__body {
  max-height: 140px;
}

.hp2-sva__desc {
  padding: 2px 20px 22px 20px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--hp2-mid);
  max-width: 520px;
  /* Rise + fade in once the body opens. Delay so it lands after the
     max-height reveal completes — no janky simultaneous expansion. */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease 0.18s,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.hp2-sva__item--open .hp2-sva__desc {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hp2-sva__desc { transition: none !important; transform: none !important; }
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */

/* Narrow: preview stacks above the accordion (it's the hero now, so it
   stays visible on mobile rather than being hidden like the old cube). */
@media (max-width: 980px) {
  .hp2-sva__grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
  .hp2-sva__visual.hp2-sva--media .hp2-sva__stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    max-width: 620px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .hp2-sva__h2 { font-size: 30px; }
  .hp2-sva__trigger { padding: 18px 10px; gap: 12px; }
  .hp2-sva__num { width: 20px; }
}

/* Reduced-motion: disable accordion-related transitions
   (cube reduced-motion is handled inline above with the cube styles) */
@media (prefers-reduced-motion: reduce) {
  .hp2-sva__body { transition: none; }
  .hp2-sva__chevron { transition: none; }
  .hp2-sva__trigger::before { transition: none; }
  .hp2-sva__trigger { transition: none; }
  .hp2-sva__shot-live { animation: none !important; }
}

/* ==============================================================
   §B  CAPABILITIES — bento grid (3×2)
   Replaces the old accordion+cube approach with a clean, static,
   at-a-glance services layout. Every card self-contained.
   ============================================================== */
.hp2-cap {
  padding: clamp(80px, 9vw, 128px) 0;
  background: #fff;
  color: var(--hp2-dark);
  border-top: 1px solid var(--hp2-border);
  border-bottom: 1px solid var(--hp2-border);
}

/* ---- Header ---- */
.hp2-cap__head {
  max-width: 960px;
  margin: 0 0 clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 20px;
  align-items: end;
}
.hp2-cap__head .hp2-eyebrow {
  grid-column: 1 / -1;
  color: var(--hp2-dark);
}
.hp2-cap__head .hp2-eyebrow::before { background: var(--hp2-dark); }
.hp2-cap__h2 {
  grid-column: 1 / 2;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 4px 0 0;
  color: var(--hp2-dark);
}
.hp2-cap__lead {
  grid-column: 1 / 2;
  grid-row: 3;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--hp2-mid);
  margin: 0;
  max-width: 540px;
}
.hp2-cap__cta {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--hp2-dark);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: transform .22s cubic-bezier(0.22,1,0.36,1), box-shadow .22s ease, background .22s ease;
}
.hp2-cap__cta:hover {
  background: #1f1f28;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

/* ---- Grid ---- */
.hp2-cap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.4vw, 22px);
}

/* ---- Card ---- */
.hp2-cap__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  background: #fafaf9;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  transition: transform .35s cubic-bezier(0.22,1,0.36,1), box-shadow .35s ease, border-color .35s ease;
  isolation: isolate;
  overflow: hidden;
}
.hp2-cap__card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.22);
}

/* Card head: number + optional NEW pill */
.hp2-cap__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  min-height: 22px;
}
.hp2-cap__num {
  font-family: 'SF Mono','JetBrains Mono',Consolas,monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--hp2-mid);
}
.hp2-cap__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--hp2-dark);
  border-radius: 999px;
}

/* Card title */
.hp2-cap__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--hp2-dark);
  margin: 0 0 14px;
}

/* Visual: 16:10 SVG scene — fills the card width */
.hp2-cap__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  transition: transform .5s cubic-bezier(0.22,1,0.36,1);
}
.hp2-cap__card:hover .hp2-cap__visual { transform: scale(1.015); }
.hp2-cap__visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tinted per-service surface behind the SVG */
.hp2-cap__visual--store   { background: #f3f5ff; }
.hp2-cap__visual--ai      { background: #f9f4ff; }
.hp2-cap__visual--cro     { background: #f1fdfa; }
.hp2-cap__visual--dev     { background: #14141c; }
.hp2-cap__visual--hl      { background: #ecfeff; }
.hp2-cap__visual--support { background: #f0fdf4; }

/* Description */
.hp2-cap__desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hp2-mid);
  margin: 0 0 16px;
  max-width: 420px;
}

/* Hero stat — one quantified proof per card */
.hp2-cap__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 0 14px;
  margin: 2px 0 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hp2-cap__stat-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--hp2-dark);
  line-height: 1.05;
}
.hp2-cap__stat-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--hp2-mid);
  line-height: 1.4;
}

/* Tech pills */
.hp2-cap__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.hp2-cap__tech li {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--hp2-dark);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
}

/* Case link */
.hp2-cap__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--hp2-dark);
  text-decoration: none;
}
.hp2-cap__link-text {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .4s cubic-bezier(0.22,1,0.36,1);
}
.hp2-cap__link:hover .hp2-cap__link-text,
.hp2-cap__link:focus-visible .hp2-cap__link-text {
  background-size: 100% 1.5px;
}
.hp2-cap__link svg { transition: transform .25s cubic-bezier(0.22,1,0.36,1); }
.hp2-cap__link:hover svg,
.hp2-cap__link:focus-visible svg { transform: translate(3px, -3px); }

/* Scroll-reveal: opt-in via JS */
.hp2-cap__card.hp2-will-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(0.22,1,0.36,1), transform .65s cubic-bezier(0.22,1,0.36,1);
}
.hp2-cap__card.hp2-will-animate.hp2-animated {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1023px) {
  .hp2-cap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hp2-cap__head { grid-template-columns: 1fr; }
  .hp2-cap__cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .hp2-cap__grid { grid-template-columns: 1fr; }
  .hp2-cap__name { font-size: 20px; }
  .hp2-cap__stat-num { font-size: 24px; }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hp2-cap__card,
  .hp2-cap__visual,
  .hp2-cap__link svg,
  .hp2-cap__link-text { transition: none !important; }
  .hp2-cap__card:hover { transform: none; }
  .hp2-cap__card:hover .hp2-cap__visual { transform: none; }
}

/* ==============================================================
   §C  TESTIMONIALS — 2-col slide (brand card + quote) with crossfade
   ============================================================== */
.hp2-tes {
  position: relative;
  padding: clamp(40px, 5vw, 68px) 0 clamp(36px, 4.5vw, 60px);
  background: #fff;
  color: var(--hp2-dark);
  overflow: hidden;
}

/* Header — eyebrow + title row with an aggregate star rating, sized
   to the card-wall width below so everything lines up. */
.hp2-tes__head {
  /*max-width: 1180px;*/
  margin: 0 auto clamp(26px, 3vw, 40px);
}
$hp2-tes .hp2-tes__head {
  /*max-width: 1180px;*/
  margin: 0 auto clamp(26px, 2vw, 40px);
}
.hp2-tes__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  margin-bottom: clamp(12px, 1.4vw, 16px);
}
.hp2-tes__head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  padding-bottom: clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid rgba(10, 10, 15, 0.1);
}
.hp2-tes__h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--hp2-dark);
  margin: 0;
  max-width: 16ch;
}
/* Aggregate rating — the "5.0 stars · 6 reviews" summary, Google-style */
.hp2-tes__rating {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.hp2-tes__rating-num {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--hp2-dark);
}
.hp2-tes__rating-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hp2-tes__rating-count {
  font-size: 12.5px;
  color: var(--hp2-mid);
}
/* Star rows — solid glyphs kept black to honour the B&W system */
.hp2-tes__stars {
  color: var(--hp2-dark);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
}
.hp2-tes__stars--lg { font-size: 18px; }

/* ==============================================================
   Card wall — every review visible as a Google-style review card.
   ============================================================== */
.hp2-tes__wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
  max-width: 1180px;
  margin: 0 auto;
}
/* Reveal wrapper owns the scroll-in transform so the card is free to
   own its hover transform — no fighting over the same property. */
.hp2-tes__cell {
  display: flex;
}
.hp2-tes__card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(20px, 1.8vw, 26px);
  background: #fff;
  border: 1px solid rgba(10, 10, 15, 0.1);
  border-radius: 16px;
  transition:
    transform .35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow .35s ease,
    border-color .35s ease;
}
.hp2-tes__card:hover {
  transform: translateY(-3px);
  border-color: rgba(10, 10, 15, 0.2);
  box-shadow: 0 18px 40px -22px rgba(10, 10, 15, 0.3);
}

/* Card head — monogram avatar + identity + review date */
.hp2-tes__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hp2-tes__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: var(--hp2-dark);
  border: 1px solid rgba(10, 10, 15, 0.08);
}
.hp2-tes__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hp2-tes__avatar-initials {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hp2-tes__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.hp2-tes__name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--hp2-dark);
  letter-spacing: -0.005em;
}
.hp2-tes__brand-line {
  font-size: 12px;
  color: var(--hp2-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp2-tes__date {
  margin-left: auto;
  align-self: flex-start;
  font-size: 11.5px;
  color: #9a9a97;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Rating row inside the card */
.hp2-tes__rate-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hp2-tes__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hp2-mid);
}
.hp2-tes__verified svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Quote body — the review itself */
.hp2-tes__text {
  font-size: 14.5px;
  line-height: 1.58;
  font-weight: 400;
  color: #1a1a1f;
  margin: 0;
  text-wrap: pretty;
}

/* Proof chips — metrics demoted so the card reads as a review first */
.hp2-tes__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.hp2-tes__chip {
  font-size: 11px;
  font-weight: 500;
  color: var(--hp2-mid);
  background: var(--hp2-light);
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
}
.hp2-tes__chip b {
  font-weight: 800;
  color: var(--hp2-dark);
}

/* Slider panel, author row, nav and progress bar were removed with the
   card-wall redesign — structure now lives in .hp2-tes__wall / .hp2-tes__card above. */

/* --- Client logo marquee — compact, subtle --- */
.hp2-tes__logos {
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid rgba(0,0,0,0.08);
}
.hp2-tes__logos-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  text-align: center;
  /* Generous space above (lift the label off the section border) +
     below (room for the logo strip to sit clearly beneath it). Was
     `0 0 18px` — too tight, label sat right on top of the logos. */
  margin: clamp(28px, 4vw, 56px) 0 clamp(36px, 4.5vw, 64px);
}
.hp2-tes__logos-wrap {
  position: relative;
  overflow: hidden;
  /* Soft edge fade masks */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.hp2-tes__logos-track {
  display: flex;
  width: max-content;
  animation: hp2-tes-marquee 38s linear infinite;
}
.hp2-tes__logos-wrap:hover .hp2-tes__logos-track {
  animation-play-state: paused;
}
.hp2-tes__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 clamp(28px, 3.5vw, 56px);
  height: clamp(40px, 4vw, 56px);
}
/* Real brand logo images — grayscale + low-opacity at rest, then
   restore full colour + opacity on hover. Sized by max-height to
   keep the marquee line consistent regardless of source aspect. */
.hp2-tes__logo img {
  max-height: 100%;
  max-width: clamp(120px, 14vw, 180px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.7) contrast(0.95);
  opacity: 0.55;
  transition: filter .35s ease, opacity .35s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-tes__logo:hover img,
.hp2-tes__logo:focus-visible img {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
  transform: scale(1.04);
}
/* Text wordmark variant — real client names as a clean B&W marquee
   (no logo images). Muted at rest, full-black on hover. */
.hp2-tes__logo--text {
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hp2-dark);
  opacity: 0.42;
  white-space: nowrap;
  transition: opacity .35s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-tes__logo--text:hover {
  opacity: 1;
  transform: scale(1.04);
}

/* Logo-image marquee (real brand files, assets/img/hp2/logos/).
   Height-driven sizing: each shape class fixes a render height so
   wordmarks with wildly different aspect ratios (13:1 Citizenry vs
   2:1 Gifts for Good) carry similar visual weight. Overrides the
   generic `.hp2-tes__logo img` width clamp above.
   The strip stays B&W by design: grayscale at rest AND on hover —
   hover only lifts opacity (unlike the colour-restore hover of the
   generic rule). */
/* `img.` in the selectors so these outrank the generic
   `.hp2-tes__logo img` rule above (0,1,2 vs 0,1,1) — otherwise its
   height:auto / max-width clamp wins and the sizing collapses. */
.hp2-tes__logo img.hp2-tes__logo-img {
  height: clamp(20px, 2.2vw, 30px);   /* ~6:1 wordmarks */
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity .35s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-tes__logo img.hp2-tes__logo-img--xwide   { height: clamp(15px, 1.7vw, 23px); }  /* 11-13:1 */
.hp2-tes__logo img.hp2-tes__logo-img--compact { height: clamp(26px, 2.7vw, 38px); }  /* ~4:1 */
.hp2-tes__logo img.hp2-tes__logo-img--stacked { height: clamp(34px, 3.6vw, 50px); }  /* ~2:1 */
.hp2-tes__logo:hover img.hp2-tes__logo-img,
.hp2-tes__logo:focus-visible img.hp2-tes__logo-img {
  filter: grayscale(1);
  opacity: 0.95;
  transform: scale(1.04);
}

@keyframes hp2-tes-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Scroll-reveal entrance (opt-in via .hp2-will-animate). Each card's
   wrapper (.hp2-tes__cell) reveals on its own staggered delay. */
.hp2-tes__head > *.hp2-will-animate,
.hp2-tes__cell.hp2-will-animate,
.hp2-tes__logos.hp2-will-animate {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1);
}
.hp2-tes__head > *.hp2-will-animate.hp2-animated,
.hp2-tes__cell.hp2-will-animate.hp2-animated,
.hp2-tes__logos.hp2-will-animate.hp2-animated {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive — 3 cols → 2 → 1 */
@media (max-width: 980px) {
  .hp2-tes__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* minmax(0,…) matches the 3-col/2-col rules above — a bare 1fr track
     takes the card-head's min-content (nowrap brand line + date) as its
     floor, which pins the card at ~354px and clips quotes/chips on
     320-390px screens. */
  .hp2-tes__wall { grid-template-columns: minmax(0, 1fr); }
  .hp2-tes__head-row { align-items: flex-start; }
  .hp2-tes__rating-num { font-size: 32px; }
  .hp2-tes__text { font-size: 14px; }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hp2-tes__cell,
  .hp2-tes__card,
  .hp2-tes__logos-track { transition: none !important; animation: none !important; }
}

/* ==============================================================
   §D  CTA FORM — dark split-screen
   ============================================================== */
/* LIGHT CTA section — flipped from dark to white so the dark
   footer that follows has clear contrast against this band. The
   form keeps every interaction (animated underline, floating
   labels, blob-fill submit hover); only the colour palette is
   inverted to ink-on-white. */
.hp2-cta {
  position: relative;
  padding: clamp(72px, 9vw, 120px) 0;
  background: #ffffff;
  color: var(--hp2-dark);
  border-top: 1px solid rgba(10, 10, 15, 0.06);
  overflow: hidden;
}
/* Subtle ambient blue glow — premium hint of the brand accent
   without lifting the page off its calm white base. */
.hp2-cta::before {
  content: '';
  position: absolute;
  inset: -20% -20% auto -20%;
  height: 70%;
  background: radial-gradient(60% 80% at 30% 20%, rgba(10, 10, 15,0.045), transparent 70%);
  pointer-events: none;
}

.hp2-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
}

/* --- Left intro (inverted for white bg) --- */
.hp2-cta__intro .hp2-eyebrow {
  color: var(--hp2-blue, #0a0a0f);
}
.hp2-cta__intro .hp2-eyebrow::before {
  background: var(--hp2-blue, #0a0a0f);
}
.hp2-cta__h2 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.02;
  color: var(--hp2-dark);
  margin: 14px 0 18px;
  max-width: 600px;
  text-wrap: balance;
}
.hp2-cta__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(10, 10, 15, 0.62);
  margin: 0 0 clamp(48px, 5.5vw, 72px);
  max-width: 460px;
}

/* Details list — pure whitespace separation. No borders, just rhythm. */
.hp2-cta__details {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
}
.hp2-cta__detail {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 20px;
  align-items: baseline;
  transition: color .2s ease;
}
.hp2-cta__detail:hover .hp2-cta__detail-label {
  color: rgba(255,255,255,0.72);
}
.hp2-cta__detail-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  transition: color .25s ease;
}
.hp2-cta__detail-value {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color .2s ease;
}
a.hp2-cta__detail-value:hover { color: #fff; }

/* --- Right form wrapper --- */
.hp2-cta__form-wrap {
  position: relative;
  min-height: 540px;
}

/* --- The form --- */
.hp2-cta__form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity .5s cubic-bezier(0.22,1,0.36,1), filter .5s ease, transform .55s cubic-bezier(0.22,1,0.36,1);
}
.hp2-cta__form.is-sent {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-8px);
  pointer-events: none;
}

/* --- Field: input + floating label + animated underline --- */
.hp2-cta__field {
  position: relative;
  padding-top: 18px;
}
.hp2-cta__field input,
.hp2-cta__field textarea {
  width: 100%;
  background: transparent;
  /* Lock 3 sides to zero with !important so parent-theme :focus rules
     (Bootstrap .form-control:focus adds a full border + box-shadow)
     can never apply borders to the top/left/right edges. */
  border-top:    0 none transparent !important;
  border-left:   0 none transparent !important;
  border-right:  0 none transparent !important;
  border-bottom: 1px solid rgba(10, 10, 15, 0.18) !important;
  outline: 0 none !important;
  box-shadow: none !important;
  /* Zero margin so a parent-theme default (Bootstrap .form-control
     adds margin-bottom: 1rem) can't push the field bottom away from
     the input's own bottom border — that gap is what was creating the
     visible "two lines" between the textarea border and the ::after
     animated underline. */
  margin: 0 !important;
  padding: 20px 0 12px;
  font: inherit;
  font-size: 16px;
  color: var(--hp2-dark);
  letter-spacing: -0.005em;
  transition: border-bottom-color .3s ease;
  resize: none;
  font-family: inherit;
}
.hp2-cta__field textarea { min-height: 88px; padding-top: 16px; }
.hp2-cta__field input:focus,
.hp2-cta__field textarea:focus,
.hp2-cta__field input:focus-visible,
.hp2-cta__field textarea:focus-visible {
  /* Override Bootstrap parent-theme .form-control:focus which adds a
     full rectangular border + box-shadow ring. We only want our own
     animated bottom underline (the ::after). */
  border-color: transparent transparent rgba(10, 10, 15, 0.4) transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Chrome autofill ships a sandy-yellow fill + its own border. Keep the
   field visually identical when autofill triggers. */
.hp2-cta__field input:-webkit-autofill,
.hp2-cta__field input:-webkit-autofill:hover,
.hp2-cta__field input:-webkit-autofill:focus,
.hp2-cta__field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--hp2-dark);
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Animated underline removed — was creating a visible double-line
   when parent-theme margin-bottom on .form-control pushed the
   field's bottom edge below the textarea's own bottom border.
   The single border-bottom on the input/textarea (darkening to 0.4
   alpha on focus, see :focus block above) is the only underline. */
.hp2-cta__field::after { content: none !important; display: none !important; }

/* Floating label — rests above the baseline, pops up on focus/fill */
.hp2-cta__field label {
  position: absolute;
  left: 0;
  top: 38px;
  font-size: 15px;
  color: rgba(10, 10, 15, 0.48);
  letter-spacing: 0;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .3s cubic-bezier(0.22,1,0.36,1), color .25s ease;
}
.hp2-cta__field input:focus ~ label,
.hp2-cta__field input:not(:placeholder-shown) ~ label,
.hp2-cta__field textarea:focus ~ label,
.hp2-cta__field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-24px) scale(0.78);
  color: rgba(10, 10, 15, 0.72);
}

/* --- Row: submit + fineprint --- */
.hp2-cta__row {
  margin-top: clamp(20px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp2-cta__submit {
  align-self: flex-start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  /* Dark fill on white section — high-contrast primary action.
     Hover mirrors the nav "Get in Touch" CTA exactly: bg lightens
     to #1f1f28, button lifts 2px, shadow deepens. No blob/invert
     animation — keeps the interaction consistent across every
     primary CTA on the site. */
  background: var(--hp2-dark);
  color: #fff;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(10, 10, 15, 0.18);
  transition: background 0.3s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.hp2-cta__submit:hover {
  background: #1f1f28;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(10, 10, 15, 0.28);
}
.hp2-cta__submit:active { transform: translateY(0); }
/* Inner text + arrow micro-motion — kept so the arrow nudge gives
   the button a satisfying directional feel on hover. */
.hp2-cta__submit-text { position: relative; transition: transform .3s cubic-bezier(0.22,1,0.36,1); }
.hp2-cta__submit-arrow {
  display: inline-flex;
  position: relative;
  transition: transform .3s cubic-bezier(0.22,1,0.36,1);
}
.hp2-cta__submit:hover .hp2-cta__submit-arrow { transform: translate(4px, -4px); }

.hp2-cta__fineprint {
  font-size: 12.5px;
  color: rgba(10, 10, 15, 0.42);
  margin: 0;
  max-width: 420px;
  line-height: 1.4;
}
/* Inline fineprint under the intro — "prefer to chat?" with inline mailto/tel.
   Spacing bumped (was 40-64px) so the line reads as a clearly-separated
   alternative contact route, not a tail of the preceding lead paragraph. */
.hp2-cta__fineprint--intro {
  margin-top: clamp(64px, 7vw, 96px) !important;
  font-size: 13px;
  color: rgba(10, 10, 15, 0.48);
  max-width: 460px;
}
.hp2-cta__fineprint--intro a {
  color: var(--hp2-dark);
  text-decoration: none;
  border-bottom: 0px solid rgba(10, 10, 15, 0.28);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.hp2-cta__fineprint--intro a:hover {
  color: var(--hp2-blue, #0a0a0f);
  border-bottom-color: var(--hp2-blue, #0a0a0f);
}

/* --- Success state --- */
.hp2-cta__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  transition: opacity .55s cubic-bezier(0.22,1,0.36,1) .2s, transform .6s cubic-bezier(0.22,1,0.36,1) .2s, visibility 0s linear .6s;
}
.hp2-cta__success.is-shown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity .6s cubic-bezier(0.22,1,0.36,1) .2s, transform .7s cubic-bezier(0.22,1,0.36,1) .2s, visibility 0s linear 0s;
}
.hp2-cta__success-check {
  display: inline-flex;
  width: 56px;
  height: 56px;
  color: var(--hp2-blue, #0a0a0f);
}
.hp2-cta__success-check svg { width: 100%; height: 100%; display: block; }
.hp2-cta__success-tick {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.hp2-cta__success.is-shown .hp2-cta__success-tick {
  animation: hp2-cta-tick .7s cubic-bezier(0.86,0,0.07,1) .45s forwards;
}
@keyframes hp2-cta-tick {
  to { stroke-dashoffset: 0; }
}
.hp2-cta__success-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--hp2-dark);
  margin: 0;
}
.hp2-cta__success-body {
  font-size: 14.5px;
  color: rgba(10, 10, 15, 0.62);
  margin: 0;
  max-width: 440px;
  line-height: 1.55;
}

/* --- Entrance reveal (uses the generic hp2-will-animate) --- */
.hp2-cta__intro > *.hp2-will-animate,
.hp2-cta__detail.hp2-will-animate,
.hp2-cta__field.hp2-will-animate,
.hp2-cta__row.hp2-will-animate {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1);
}
.hp2-cta__intro > *.hp2-will-animate.hp2-animated,
.hp2-cta__detail.hp2-will-animate.hp2-animated,
.hp2-cta__field.hp2-will-animate.hp2-animated,
.hp2-cta__row.hp2-will-animate.hp2-animated {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .hp2-cta__grid { grid-template-columns: 1fr; gap: 40px; }
  .hp2-cta__form-wrap { min-height: 0; }
  .hp2-cta__success { position: static; min-height: 200px; }
  .hp2-cta__form.is-sent { display: none; }
}
@media (max-width: 520px) {
  .hp2-cta__detail { grid-template-columns: 1fr; gap: 4px; }
  .hp2-cta__field label { font-size: 14px; }
  .hp2-cta__submit { width: 100%; justify-content: center; }
}

/* --- Reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .hp2-cta__field::after,
  .hp2-cta__submit,
  .hp2-cta__submit::before,
  .hp2-cta__success-tick,
  .hp2-cta__success { transition: none !important; animation: none !important; }
  .hp2-cta__form.is-sent { opacity: 0; filter: none; transform: none; }
}

/* ============================================================
   /work PAGE — Avex-style listing in hp2 design language
   --------------------------------------------------------------
   Reuses from the homepage where possible:
     • .hp2-nav, .hp2-eyebrow, .hp2-btn, .hp2-casecard
   New rules cover only what's unique to /work:
     • §A whero  – text-only hero with masked-word H1
     • §B wgrid  – Avex-style 3-col grid + scoped card overrides
     • §C wcta   – simple dark CTA band
   ============================================================ */

/* Was padding-top: 86px — that reserved band created a flat white
   strip between the fixed nav and the hero gradient (the "white
   line" under the nav). Now 0: the hero background fills from y=0
   up behind the frosted nav, so the gradient bleeds right under it
   with no seam. The hero's own top padding clears the nav instead. */
.hp2-work-page { padding-top: 0; }

/* Kill the nav's hard 1px border + shadow on the work page so it
   blends into the white hero at the top (no dividing line). The
   frosted backdrop-blur still separates it from content on scroll. */
/*.page-template-template-work-v2 .hp2-nav--scrolled {
  border-bottom-color: transparent;
  box-shadow: none;
}*/

/* Scroll-progress rail — fixed 2px line at the very top of the viewport,
   filled left-to-right based on document scroll position. Scoped to the
   /work page (rendered inside .hp2-work-page). The rail itself is the
   track (faint), the ::before is the progress fill scaled via --p (set
   by JS to a 0→1 number, rAF-throttled). transform-origin:left so the
   fill grows from the leading edge. transform-only animation keeps this
   off the layout/paint critical path. Sits ABOVE the nav (z-index 1000)
   so it remains visible during the nav's own scrolled state. */
.hp2-work-progress {
  /* Hidden — was a thin scroll-progress rail at the top of the
     viewport (blue → violet gradient driven by scroll position).
     Removed at request because it competed with the nav for
     visual attention. JS that creates the element is kept intact;
     this single rule short-circuits its rendering. */
  display: none !important;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: rgba(10, 12, 22, 0.06);
  z-index: 1000;
  pointer-events: none;
}
.hp2-work-progress::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #0a0a0f 0%, #26262c 100%);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  /* No transition — JS updates 60× per second already. A transition
     would lag visibly behind the scroll wheel and feel "rubbery". */
}
@media (prefers-reduced-motion: reduce) {
  /* Still visible, just no fancy gradient — flat brand colour. */
  .hp2-work-progress::before { background: #0a0a0f; }
}

/* ---- §A  HERO — single column, left-aligned, text only ---- */
.hp2-whero {
  /* Top padding now also absorbs the ~86px fixed-nav clearance that
     used to live on .hp2-work-page. The hero bg starts at y=0 (behind
     the nav) and this padding pushes the H1 down clear of it. */
  padding: clamp(128px, 13vw, 184px) 0 clamp(32px, 5vw, 72px);
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
/* Soft background orb — repositioned so its peak sits right at the
   section's top edge (center near y=0). With the larger 980px radius
   and slightly stronger stops, the visible gradient now fills the
   entire top region of the hero — no white strip between the nav
   border and where the rainbow becomes visible. Subtle, not loud. */
.hp2-whero::before {
  content: '';
  position: absolute;
  top: -420px; right: -260px;
  width: 980px; height: 980px;
  background: radial-gradient(circle, rgba(10,10,15,0.09) 0%, rgba(10,10,15,0.055) 45%, transparent 78%);
  border-radius: 50%;
  animation: hp2-orb-drift 11s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
/* Cursor-aware ambient spotlight — a soft brand-tinted radial that
   follows the cursor across the hero. JS sets --hp2-mx / --hp2-my as
   unitless 0–100 numbers (rAF-throttled); CSS multiplies by 1% to get
   the gradient origin. Fades to transparent ~38% from the pointer, so
   it reads as atmospheric mood-light, not a pointer-tail. Sits beneath
   the orb (z-index 0) and the copy (z-index 1) — never competes with
   the headline.
   Hidden by default and revealed only after JS adds .hp2-whero--cursor
   on first move, so users on touch devices (no pointer-move events)
   see no static ghost light at the default 50/30. */
.hp2-whero::after {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(
    420px circle at calc(var(--hp2-mx, 50) * 1%) calc(var(--hp2-my, 30) * 1%),
    rgba(10, 10, 15,0.10) 0%,
    rgba(10, 10, 15,0.05) 38%,
    transparent 62%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
  will-change: background;
}
.hp2-whero.hp2-whero--cursor::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hp2-whero::after { display: none; }
  .hp2-whero__fx { display: none; }
}

/* ---- Interactive fx layer — dot-grid + floating geometric shapes
   that parallax with the cursor. Driven by the same --hp2-mx /
   --hp2-my vars (0–100) the spotlight uses: each layer translates a
   few px OPPOSITE the cursor for depth. Sits beneath the copy
   (z-index 0). The dot-grid is masked to fade out toward the
   bottom-left where the headline sits, so it never competes with
   text. Squares echo the brand's cube motif. ---- */
.hp2-whero__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hp2-whero__fx-grid {
  position: absolute;
  inset: -40px;
  background-image: radial-gradient(rgba(10, 10, 15, 0.08) 1px, transparent 1.7px);
  background-size: 30px 30px;
  /* Strongest top-right (near the orb), fades to nothing toward the
     bottom-left where the H1 + lead live. */
  -webkit-mask-image: radial-gradient(120% 120% at 82% 4%, #000 22%, transparent 68%);
  mask-image: radial-gradient(120% 120% at 82% 4%, #000 22%, transparent 68%);
  opacity: 0.65;
  transform: translate(
    calc((var(--hp2-mx, 50) - 50) * -0.35px),
    calc((var(--hp2-my, 30) - 50) * -0.35px));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-whero__fx-shape {
  position: absolute;
  border: 1.5px solid rgba(10, 10, 15,0.16);
  border-radius: 9px;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Larger parallax multiplier = appears closer to the viewer. */
.hp2-whero__fx-shape--1 {
  top: 16%; right: 11%;
  width: 66px; height: 66px;
  transform:
    rotate(18deg)
    translate(calc((var(--hp2-mx, 50) - 50) * 0.9px),
              calc((var(--hp2-my, 30) - 50) * 0.9px));
}
.hp2-whero__fx-shape--2 {
  top: 33%; right: 28%;
  width: 36px; height: 36px;
  border-color: rgba(10, 10, 15,0.18);
  border-radius: 50%;
  transform:
    translate(calc((var(--hp2-mx, 50) - 50) * 1.5px),
              calc((var(--hp2-my, 30) - 50) * 1.5px));
}
.hp2-whero__fx-shape--3 {
  bottom: 16%; right: 17%;
  width: 96px; height: 96px;
  border-color: rgba(10, 10, 15,0.12);
  transform:
    rotate(-12deg)
    translate(calc((var(--hp2-mx, 50) - 50) * 0.55px),
              calc((var(--hp2-my, 30) - 50) * 0.55px));
}
@media (max-width: 720px) {
  /* Shapes crowd the headline on narrow screens — keep only the
     dot-grid, drop the floating squares. */
  .hp2-whero__fx-shape { display: none; }
}

.hp2-whero .container { position: relative; z-index: 1; }
.hp2-whero__copy { max-width: 1040px; }

/* Big, calm H1 — Avex-shape (one long descriptive sentence, big bold display).
   Wraps naturally to 3 lines at desktop, 4-5 on mobile.
   Ceiling reduced from 96px → 80px so the H1 stays bold without dominating
   the supporting hierarchy (lead + CTA still need room to breathe). */
.hp2-whero__h1 {
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--hp2-dark);
  margin: 14px 0 26px;
}
/* Word-by-word reveal disabled — text is now fully static at all times.
   The mask wrapper is still emitted by PHP for backwards compat, but
   visually it's just a transparent inline-block; the word inside sits
   at translateY(0) with no transition. No slow reveal, no FOUC, no
   half-rendered mid-animation states if the JS misses the trigger. */
.hp2-whero__h1-mask {
  display: inline-block;
  overflow: visible;
  vertical-align: baseline;
  padding-bottom: 0;
  margin-bottom: 0;
}
.hp2-whero__h1-word,
.hp2-whero__h1.hp2-animated .hp2-whero__h1-word,
.hp2-animated .hp2-whero__h1-word {
  display: inline-block;
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

.hp2-whero__lead {
  font-size: clamp(16px, 1.2vw, 19px);
  color: #4b4b58;
  line-height: 1.65;
  max-width: 720px;
  /* Tight gap to the CTA — the lead and button now read as one
     hero unit rather than two stacked blocks separated by air.
     Was 48-80px when the H1 was 4 lines; with the shorter 2-line
     H1, 24-40px is the right rhythm. */
  margin-bottom: clamp(24px, 2.4vw, 40px);
}
.hp2-whero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  /* Tight gap from lead → CTA. Previous defensive 48-80px margin-top
     was sized for the 4-line H1; with the 2-line H1 it left the CTA
     orphaned with too much air. 20-32px is the right rhythm now —
     lead and button read as one hero unit. !important still needed
     to override inline styles set by the scroll-reveal mechanism. */
  margin-top: clamp(20px, 2.2vw, 32px) !important;
}

@media (max-width: 480px) {
  .hp2-whero__ctas { flex-direction: column; align-items: stretch; }
  .hp2-whero__ctas .hp2-btn { width: 100%; }
}

/* ---- §B  WORK GRID — homepage-scale 2-col with alternating offset ---- */
.hp2-wgrid {
  /* Bottom padding was 72-120px which created a large empty band
     above the brand-logo strip. Tightened to 12-24px so the trust
     proof sits close to the cards as a continuation, not a
     disconnected section after a long pause. */
  padding: clamp(24px, 4vw, 56px) 0 clamp(12px, 1.5vw, 24px);
  background: #ffffff;
}

/* §B.5 — Trust strip on /work/. Sits tight to the case grid — no
   border separator, minimal top padding — so the cards → proof
   flow reads as one unit instead of two stacked sections. Inner
   styles inherit from .hp2-tes__logos / .hp2-tes__logo so the
   marquee behaves identically to the homepage version. */
.hp2-wbrands {
  background: #ffffff;
  padding: clamp(16px, 2.5vw, 32px) 0 clamp(24px, 3vw, 40px);
}

/* 2-col layout at homepage scale, with two full-row "wide" showcase tiles
   for autoplay video brands. Card ordering in PHP places wides at positions
   3 and 8 — the only spots where full-row spans don't create grid holes
   in a 2-col layout (positions where a fresh row begins). The wide breaks
   themselves provide the vertical rhythm, so no alternating offset needed. */
.hp2-wgrid__grid {
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(40px, 5vw, 72px);
}
@media (max-width: 960px) {
  .hp2-wgrid__grid { grid-template-columns: 1fr; row-gap: clamp(32px, 5vw, 48px); }
}

/* ----------------------------------------------------------------
   .hp2-wcard — modifier on .hp2-casecard for Avex-style card body.
   Layout overrides only — hover behaviors (tilt, magnetic pill,
   crossfade, sibling-dim) inherit from .hp2-casecard untouched.
   ---------------------------------------------------------------- */

/* Landscape media aspect — matches the homepage's .hp2-casecard__media
   exactly (4/3, 18px radius). Cards now feel like the same "showcase tile"
   class on both pages instead of a smaller mobile-style portrait variant. */
.hp2-wcard .hp2-casecard__media {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  /* More room between the image and the title — was 22px, title was
     hugging the media edge. clamp gives a responsive 24-32px gap. */
  margin-bottom: clamp(24px, 2vw, 32px);
}

/* Wide showcase tile: spans both columns. Sized as a near-viewport-
   height cinematic banner so the showcase video gets real visual
   weight — earlier 21/5 (~314px) read as a thin strip, shorter than
   the 4/3 small pairs above it (~495px), which made the "showcase"
   tile feel less important than the regular tiles. 16/9 at the
   1320px container gives ~743px (~80% of a 1080p viewport); the
   60vh floor keeps it page-height-class on shorter viewports.
   NOTE: this rule MUST come after the general
   `.hp2-wcard .hp2-casecard__media` block above — both selectors
   have identical specificity (0,2,1) and source-order decides the
   winner; if this block moves up the wide tile silently inherits
   4/3 and blows out to ~990px on a 1320px container. Hover-video
   pattern (static poster as base + video as hover overlay) is
   reused from the homepage cases, so .hp2-casecard__hover--video
   plays on mouseenter via hp2InitCases. */
.hp2-wcard--wide {
  grid-column: 1 / -1;
}
.hp2-wcard--wide .hp2-casecard__media {
  /* 21/9 cinematic letterbox (was 16/9 + 60vh floor — both made the
     tile eat the entire fold). At the new 1560 container the tile
     resolves to ~640px tall — comfortably within a single viewport
     fold on every standard display. No min-height: the aspect alone
     drives height so it scales linearly with the page. */
  aspect-ratio: 21 / 9;
  border-radius: 18px;
}
/* Mobile (≤960px): grid is already 1-col, so wide is a no-op for layout —
   normalize the aspect so the page reads consistently when stacked, and
   drop the viewport floor so a tall wide tile doesn't dominate phones. */
@media (max-width: 960px) {
  .hp2-wcard--wide .hp2-casecard__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* Re-order meta so title comes first, tag becomes a Avex-style tagline below.
   Don't touch the homepage cards — scoping via .hp2-wcard ensures isolation. */
.hp2-wcard .hp2-casecard__meta {
  display: flex;
  flex-direction: column;
  /* Tiny inset so the meta text doesn't sit flush with the card edge */
  padding: 0 4px;
  /* Breathing room below the meta block so it doesn't touch whatever
     section sits underneath the card row. */
  padding-bottom: 4px;
}
.hp2-wcard .hp2-casecard__title {
  order: 1;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.hp2-wcard .hp2-casecard__tag {
  order: 2;
  /* Doubled the gap (was 6px) so the tag is a clearly separate
     line below the title — not crowding into it. */
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hp2-mid);
  line-height: 1.4;
}
/* Hide the description — Avex cards don't have a long description block */
.hp2-wcard .hp2-casecard__desc { display: none; }

/* ----------------------------------------------------------------
   Inline video as HOVER layer — paused at rest on /work wide showcase
   tiles (GoldenScent, IronEdge). The static brand poster sits at the
   .__base layer; the <video class="__hover"> stacks on top, opacity 0
   by default and crossfades in on hover. hp2InitCases binds mouseenter
   /focusin → video.play() and mouseleave/focusout → pause + reset, so
   the video only plays while the user is hovering. Position, sizing,
   object-fit, and crossfade are inherited from the shared
   .hp2-casecard__base, .hp2-casecard__hover rule above — only the
   selector below tightens object-position for tall video sources so
   product hero shots stay framed correctly inside the 21/6 banner. */
.hp2-wcard--wide .hp2-casecard__hover--video {
  object-position: center;
}

/* The arrow on title hover ("→" suffix) is fine but the homepage version
   is a bit large for a 3-up grid — tone it down. */
.hp2-wcard .hp2-casecard__title::after {
  font-size: 0.85em;
}


/* ---- §C  CTA SECTION — calm, premium closing card.
   One header (availability pill), one headline, one lead, one
   primary CTA + a quiet email link below. The dark fill is layered:
   subtle dot-grid texture → 2 drifting orbs → faint top hairline. No
   gradient text, no chips, no border ring — every layer is ambient
   depth, none of it competes with the copy or the CTA. ---- */
.hp2-wcta {
  padding: clamp(56px, 8vw, 110px) 0 clamp(80px, 10vw, 140px);
  background: #ffffff;
}
.hp2-wcta__card {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  background: var(--hp2-dark);
  color: #fff;
  border-radius: clamp(24px, 2.4vw, 36px);
  /* Tighter vertical padding (was 56-120 — content was floating in
     the middle of a tall slab). 56-88 keeps the card substantial
     but the copy density now feels intentional, not airy. */
  padding: clamp(48px, 6vw, 88px) clamp(40px, 5.5vw, 96px);
  overflow: hidden;
  isolation: isolate;
  /* Dot-grid texture baked into the dark fill — barely visible at
     rest, gives the card a premium "graph paper" depth that catches
     the orb light at the right angles. background-image + size makes
     this GPU-cheap (no extra DOM). */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1.5px),
    linear-gradient(var(--hp2-dark), var(--hp2-dark));
  background-size: 22px 22px, 100% 100%;
  background-position: 0 0, 0 0;
}
/* Faint top hairline — a 1px highlight along the top edge, like the
   card is catching reflected light from above. Same trick the v2
   navigation glass uses. */
.hp2-wcta__card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Top-right blue/violet orb — the "warm" corner */
.hp2-wcta__card::before {
  content: '';
  position: absolute;
  top: -220px; right: -140px;
  width: 560px; height: 560px;
  background: radial-gradient(circle,
    rgba(10, 10, 15,0.38) 0%,
    rgba(10, 10, 15,0.20) 35%,
    transparent 68%);
  border-radius: 50%;
  animation: hp2-orb-drift 12s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
}
/* Bottom-left teal orb — the "cool" counterweight */
.hp2-wcta__card::after {
  content: '';
  position: absolute;
  bottom: -160px; left: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle,
    rgba(10, 10, 15,0.22) 0%,
    rgba(16, 185, 129, 0.10) 38%,
    transparent 65%);
  border-radius: 50%;
  animation: hp2-orb-drift 14s ease-in-out infinite alternate-reverse;
  z-index: 0;
  pointer-events: none;
  filter: blur(4px);
}

.hp2-wcta__copy,
.hp2-wcta__action { position: relative; z-index: 1; }

/* Availability pill — replaces the eyebrow. Single-element header
   that carries both "this is the contact section" and "we're live
   right now" signals. The green pulse is subtle ambient motion. */
.hp2-wcta__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 7px 14px 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.78);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.26);
  border-radius: 999px;
}
.hp2-wcta__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: hp2-wcta-pulse 2.4s ease-out infinite;
}
@keyframes hp2-wcta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hp2-wcta__h2 {
  /* Bumped from 34–60 → 40–72: a confident, agency-scale display
     that carries the card without crowding the lead below. */
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 24px;
}
.hp2-wcta__lead {
  font-size: clamp(15px, 1.05vw, 17px);
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  max-width: 520px;
  margin: 0;
}

/* Action column — primary CTA + a structured email line below it.
   The email is a labeled three-part link (icon + "Or email" label +
   address) so it reads as an anchored secondary action instead of
   orphaned text floating beneath the button. Right-aligned on
   desktop so the eye lands "headline → button" on one axis. */
.hp2-wcta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
.hp2-wcta__cta-primary {
  font-size: 15.5px;
  padding: 14px 28px;
}

/* Email link — three semantic spans: envelope icon, soft "Or email"
   label, then the address itself in higher-contrast white. The icon
   gives the line a visual hook so it stops feeling weightless; the
   prefix label makes it read as a deliberate secondary path. Pill
   container kept restrained (transparent default → subtle hover lift)
   so it never competes with the white primary button. */
.hp2-wcta__cta-email {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.hp2-wcta__cta-email:hover,
.hp2-wcta__cta-email:focus-visible {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.78);
}
.hp2-wcta__cta-email-icon {
  flex-shrink: 0;
  color: rgba(255,255,255,0.55);
  transition: color 0.25s ease;
}
.hp2-wcta__cta-email:hover .hp2-wcta__cta-email-icon,
.hp2-wcta__cta-email:focus-visible .hp2-wcta__cta-email-icon {
  color: #fff;
}
.hp2-wcta__cta-email-label {
  /* Soft prefix — makes the email line read as "Or email
     hello@coduzion.com" rather than a bare address floating in the
     dark card. Slightly de-emphasised vs the address. */
  color: rgba(255,255,255,0.55);
}
.hp2-wcta__cta-email-addr {
  /* The actual contact value — highest-contrast text in the line so
     a scanning eye lands on it. */
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Tablet (≤960px): two-column collapses to one. Action stack moves
   below the copy and aligns left to match the rest of the card. */
@media (max-width: 960px) {
  .hp2-wcta__card {
    grid-template-columns: 1fr;
    padding: clamp(36px, 5vw, 60px) clamp(26px, 4vw, 40px);
    gap: clamp(28px, 4vw, 40px);
  }
  .hp2-wcta__action {
    align-items: flex-start;
    width: 100%;
    gap: 14px;
  }
  .hp2-wcta__cta-primary {
    align-self: stretch;
    justify-content: center;
  }
  .hp2-wcta__cta-email {
    align-self: stretch;
    justify-content: center;
  }
  .hp2-wcta__h2 { font-size: clamp(34px, 7vw, 52px); }
}

/* Phone (≤480px): pull the card padding tighter and let the email
   line wrap naturally so it doesn't overflow the rounded pill. */
@media (max-width: 480px) {
  .hp2-wcta__card {
    border-radius: 22px;
    padding: 32px 22px;
  }
  .hp2-wcta__h2 {
    font-size: clamp(30px, 8.6vw, 40px);
    letter-spacing: -0.03em;
  }
  .hp2-wcta__cta-email {
    flex-wrap: wrap;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ---- Active nav link state on /work ---- */
.hp2-nav__links li a.is-current {
  color: var(--hp2-blue);
  font-weight: 600;
}
.hp2-nav--scrolled .hp2-nav__links li a.is-current {
  color: var(--hp2-blue);
}

/* ---- /work prefers-reduced-motion guardrail ----
   Freeze every looping ambient animation on the hero + CTA card —
   orb drifts plus the green availability/response pulses. Autoplay
   videos are blocked from JS (hp2InitWorkPage) since CSS can't drive
   <video> playback. Hover behaviours stay as-is — those are explicit
   user gestures, not ambient motion. */
@media (prefers-reduced-motion: reduce) {
  .hp2-whero::before,
  .hp2-wcta__card::before,
  .hp2-wcta__card::after,
  .hp2-wcta__copy::before,
  .hp2-wcta__status-dot,
  .hp2-wcta__response-pulse,
  .hp2-agallery__track {
    animation: none;
  }
  .hp2-wcta__card { transition: none; }
}


/* ============================================================
   §FOOTER  Darkroom-style v2 footer
   Replaces the legacy WP <footer> on /homepage-v2/ and /work/.
   Structure mirrors darkroomagency.com: lead (brand cube + 4
   big-link prompts) → hubs (remote-first + 4 locations) → bottom
   bar (copyright · legal · social). Dark base, restrained colour,
   no JS — only CSS transitions for hover.
   ============================================================ */

.hp2-footer {
  position: relative;
  background: #050507;
  color: rgba(255, 255, 255, 0.78);
  /* Compacted — top padding was 64–128px (too airy). */
  padding: clamp(44px, 5vw, 80px) 0 clamp(24px, 2.6vw, 36px);
  margin-top: 0;
  font-family: var(--theme-font, 'Roobert'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  isolation: isolate;
}
/* No fade lead-in — the white section above ends flush and the
   dark footer starts as a clean band. Earlier we tried a 120px
   transparent→dark gradient sliver, but it read as a tinted band
   on the white section rather than a smooth blend. Plain edges
   sit better with the rest of the v2 design language. */
.hp2-footer::before {
  /* Subtle radial accent in the top-left so the dark slab doesn't
     feel like a flat block — mirrors the orb language of §C. */
  content: '';
  position: absolute;
  top: -180px; left: -120px;
  width: 520px; height: 520px;
  background: radial-gradient(circle,
    rgba(10, 10, 15,0.18) 0%,
    rgba(10, 10, 15,0.10) 38%,
    transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(2px);
}
.hp2-footer .container { position: relative; z-index: 1; }

/* §1  Lead — brand cube on the left, 4 link prompts on the right.
   Desktop: cube column ~280px + flex links. Mobile: stacks. */
.hp2-footer__lead {
  display: grid;
  grid-template-columns: minmax(300px, 440px) 1fr;
  gap: clamp(28px, 3.5vw, 0px);
  align-items: center;
  padding-bottom: clamp(36px, 4vw, 0px);
  border-bottom: 0px solid rgba(255, 255, 255, 0.08);
}

/* Brand block — polaroid STACK carousel. 5 polaroids are absolutely
   layered on top of each other; the active card sits flat and on
   top, the next-up cards peek out with a slight tilt + downscale +
   x/y offset like a real photo stack. Every ~3.2s the active card
   slides off (translateX + rotate + fade) and the next one snaps
   into the active position. All driven by JS toggling .is-active /
   .is-leaving / position-classes on figures.
   No layered ::before/::after pseudo-slabs anymore — the other 4
   real polaroids ARE the stack we used to fake. */
.hp2-footer__brand {
  display: flex;
  align-items: center;
  justify-content: start;
}
.hp2-footer__polaroid-stack {
  position: relative;
  /* Sized back up from 160-200 to give captions room to read on
     a single line. Halfway between the previous oversized 220-300
     and the too-tight 160-200. */
  width: clamp(240px, 22vw, 360px);
  /* Match the aspect of a polaroid (square photo + caption strip):
     1:1 + ~52px caption + 24px padding = roughly 1.22 ratio. The
     stack needs explicit height because all children are absolute. */
  aspect-ratio: 1 / 1.22;
  margin: 0;
}
.hp2-footer__polaroid {
  position: absolute;
  inset: 0;
  padding: 12px 12px 14px;
  background: #f5f5f0;
  border-radius: 4px;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.42),
    0 6px 14px rgba(0, 0, 0, 0.26);
  margin: 0;
  text-align: center;
  /* Default stacked state — gets overridden by .is-active and the
     position modifier classes below. Behind cards downscale + tint
     darker so the stack reads as depth. */
  transform: rotate(2deg) translate(8px, 6px) scale(0.96);
  transform-origin: center center;
  opacity: 0.6;
  z-index: 1;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease,
    filter 0.5s ease;
  filter: brightness(0.85);
}
/* Active card — flat, full opacity, in front. */
.hp2-footer__polaroid.is-active {
  transform: rotate(-3deg) translate(0, 0) scale(1);
  opacity: 1;
  z-index: 5;
  filter: brightness(1);
}
/* Position modifiers — JS labels the 2nd-on-deck card with --next1
   and 3rd with --next2 so they peek out at different tilt + offsets.
   --leaving: previously-active card sliding off to the left. */
.hp2-footer__polaroid--next1 {
  transform: rotate(4deg) translate(10px, 6px) scale(0.97);
  z-index: 4;
  opacity: 0.85;
  filter: brightness(0.92);
}
.hp2-footer__polaroid--next2 {
  transform: rotate(-6deg) translate(-12px, 10px) scale(0.94);
  z-index: 3;
  opacity: 0.55;
  filter: brightness(0.78);
}
.hp2-footer__polaroid.is-leaving {
  transform: rotate(-14deg) translate(-120%, -20px) scale(0.88);
  opacity: 0;
  z-index: 6;
  filter: brightness(0.7);
  transition:
    transform 0.65s cubic-bezier(0.5, 0, 0.55, 1),
    opacity 0.45s ease,
    filter 0.4s ease;
}
.hp2-footer__brand:hover .hp2-footer__polaroid.is-active {
  transform: rotate(0deg) translate(0, -4px) scale(1.02);
}
.hp2-footer__polaroid-img {
  /* Parent theme's `.hp2-main img { height: auto }` was winning the
     cascade (specificity 0,1,1 > 0,1,0) and overriding our aspect
     ratio — the IMG was rendering at its natural ratio inside a
     square box, letterboxing with the IMG's `background: #0a0a0f`
     showing as a black bar below the photo.
     Fix: use !important on the dimensional rules to defeat that,
     and switch the fallback background from black → paper color so
     any remaining gap blends with the polaroid card itself. */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 2px;
  background: #f5f5f0;
}
.hp2-footer__polaroid-cap {
  /* Captions removed per request — the polaroid stack reads as a
     pure-image carousel now. Leaving the markup intact so it can
     be re-enabled later by toggling this rule. */
  display: none !important;
}
.hp2-footer__polaroid-cap strong {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1f;
  letter-spacing: -0.005em;
}
.hp2-footer__polaroid-cap span {
  font-size: 12px;
  font-weight: 400;
  color: #6b6b75;
  letter-spacing: 0.01em;
}

/* 4 question/action pairs in a 2x2 grid. */
.hp2-footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 48px) clamp(32px, 4vw, 72px);
}
.hp2-footer__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp2-footer__link-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.hp2-footer__link-cta {
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  /* Each CTA holds one line: a wrapped label paints the animated underline
     under both lines and reads as two links. Column widths + this font
     clamp are sized so the longest label fits at every breakpoint. */
  white-space: nowrap;
  color: #ffffff;
  text-decoration: none;
  /* Animated underline — sits at the baseline, slides full-width on
     hover via background-size transition. Cleaner than text-decoration. */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 4px;
  transition: background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s ease;
}
.hp2-footer__link-cta:hover,
.hp2-footer__link-cta:focus-visible {
  background-size: 100% 2px;
  color: #ffffff;
}

/* §2  Hubs row. */
.hp2-footer__hubs {
  padding: clamp(22px, 3.5vw, 22px) 0;
  border-bottom: none; 
}
.hp2-footer__bottom{
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hp2-footer__hubs-intro {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}
.hp2-footer__hubs-list {
  list-style: none;
  /* Full-width flex row centred with justify-content — reliably centres
     the two office blocks under the intro line. (The earlier
     max-width + margin:auto approach was left-aligning on live.) */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(24px, 5vw, 80px);
  width: 100%;
  max-width: none;
}
.hp2-footer__hub { flex: 0 1 260px; }
.hp2-footer__hub-sub {
  /* Multi-line: role + full address, each on its own line. */
  display: block;
  line-height: 1.65;
}
.hp2-footer__hub {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centred landmark + text, vertically aligned */
  text-align: center;
  gap: 6px;
}
/* Small landmark line-art above each city — the same Statue of Unity
   / Hollywood figures from the About offices cards, shrunk down and
   inverted to white so the black line-art reads on the dark footer. */
.hp2-footer__hub-figure {
  display: flex;
  align-items: flex-start;
  justify-content: center;   /* centre the landmark over its column */
  height: 100px;             /* a touch bigger */
  margin: 0px 0 20px;       /* breathing room above (and below) */
}
.hp2-footer__hub-figure img {
  display: block;
  max-height: 100px !important;
  max-width: 108px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  filter: invert(1);
  opacity: 0.9;
}
/* Hollywood is wide/short — give it width and a matching cap height so
   it carries similar visual weight to the tall statue beside it. */
.hp2-footer__hub-figure--wide img {
  max-height: 76px !important;
  max-width: 216px !important;
}
.hp2-footer__hub-city {
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.hp2-footer__hub-sub {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* §3  Bottom bar. */
.hp2-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 2.4vw, 22px) clamp(22px, 2.4vw, 22px) 0px;
  flex-wrap: wrap;
}
.hp2-footer__bottom-left {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 0px);
  flex-wrap: wrap;
}
.hp2-footer__copyright {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.01em;
}
.hp2-footer__legal,
.hp2-footer__social {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  flex-wrap: wrap;
}
.hp2-footer__legal a,
.hp2-footer__social a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s ease;
}
.hp2-footer__legal a:hover,
.hp2-footer__legal a:focus-visible,
.hp2-footer__social a:hover,
.hp2-footer__social a:focus-visible {
  color: #ffffff;
}

/* Tablet (≤960px): lead column stacks (polaroid above links). */
@media (max-width: 960px) {
  .hp2-footer__lead {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
    text-align: left;
  }
  .hp2-footer__brand { justify-content: flex-start; }
}

/* Mobile (≤640px): all multi-column grids collapse to single column,
   bottom bar wraps social below copyright/legal. */
@media (max-width: 640px) {
  .hp2-footer { padding: clamp(48px, 9vw, 72px) 0 24px; }
  .hp2-footer__links {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hp2-footer__hubs-list {
    grid-template-columns: 1fr;
  }
  .hp2-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }
}

/* Reduced-motion: kill the polaroid tilt-on-hover and link underline
   animation so the section reads as fully static. */
@media (prefers-reduced-motion: reduce) {
  .hp2-footer__polaroid,
  .hp2-footer__link-cta {
    transition: none !important;
  }
  /* Reduce-motion: skip the slide animation, just hard-cut between
     cards. JS still rotates which card is .is-active, but the
     visual transitions are instant. */
  .hp2-footer__polaroid.is-leaving {
    transform: rotate(-3deg) translate(0, 0) scale(1);
    opacity: 0;
  }
  .hp2-footer__brand:hover .hp2-footer__polaroid.is-active {
    transform: rotate(-3deg) translate(0, 0) scale(1);
  }
}


/* ============================================================
   §ABOUT v2  ·  /about-v2/
   ============================================================ */

/* Body sits on white for the v2 about page */
.page-template-template-about-v2 body,
.page-template-template-contact-v2 body {
  background: #ffffff;
}
/* Same legacy-chrome hide for the new templates */
.page-template-template-about-v2 #masthead,
.page-template-template-about-v2 .site-header,
.page-template-template-about-v2 #site-navigation,
.page-template-template-about-v2 .main-navigation,
.page-template-template-about-v2 .fullpage-menu,
.page-template-template-about-v2 .modal.log-in-popup,
.page-template-template-about-v2 .modal#GFG,
.page-template-template-contact-v2 #masthead,
.page-template-template-contact-v2 .site-header,
.page-template-template-contact-v2 #site-navigation,
.page-template-template-contact-v2 .main-navigation,
.page-template-template-contact-v2 .fullpage-menu,
.page-template-template-contact-v2 .modal.log-in-popup,
.page-template-template-contact-v2 .modal#GFG {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.page-template-template-about-v2 html,
.page-template-template-about-v2 body,
.page-template-template-about-v2 #page,
.page-template-template-about-v2 #content,
.page-template-template-about-v2 .site,
.page-template-template-contact-v2 html,
.page-template-template-contact-v2 body,
.page-template-template-contact-v2 #page,
.page-template-template-contact-v2 #content,
.page-template-template-contact-v2 .site {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Hide the legacy marquee + footer on these v2 pages too */
.page-template-template-about-v2     .hp2-main ~ .full-section.home-section-10,
.page-template-template-about-v2     .hp2-main ~ footer,
.page-template-template-contact-v2   .hp2-main ~ .full-section.home-section-10,
.page-template-template-contact-v2   .hp2-main ~ footer { display: none !important; }
.page-template-template-about-v2 .theme-cursor,
.page-template-template-contact-v2 .theme-cursor { display: none !important; }

/* Same legacy-chrome hide for the blog + service-detail templates.
   These templates were added after the blocks above and were never
   added to the hide list, so the theme's #masthead (blue logo +
   hamburger) leaked in above the hp2 nav on /blog and /services/<slug>. */
.page-template-template-blog-v2 #masthead,
.page-template-template-blog-v2 .site-header,
.page-template-template-blog-v2 #site-navigation,
.page-template-template-blog-v2 .main-navigation,
.page-template-template-blog-v2 .fullpage-menu,
.page-template-template-blog-v2 .modal.log-in-popup,
.page-template-template-blog-v2 .modal#GFG,
.page-template-template-service-v2 #masthead,
.page-template-template-service-v2 .site-header,
.page-template-template-service-v2 #site-navigation,
.page-template-template-service-v2 .main-navigation,
.page-template-template-service-v2 .fullpage-menu,
.page-template-template-service-v2 .modal.log-in-popup,
.page-template-template-service-v2 .modal#GFG {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.page-template-template-blog-v2 html,
.page-template-template-blog-v2 body,
.page-template-template-blog-v2 #page,
.page-template-template-blog-v2 #content,
.page-template-template-blog-v2 .site,
.page-template-template-service-v2 html,
.page-template-template-service-v2 body,
.page-template-template-service-v2 #page,
.page-template-template-service-v2 #content,
.page-template-template-service-v2 .site {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.page-template-template-blog-v2     .hp2-main ~ .full-section.home-section-10,
.page-template-template-blog-v2     .hp2-main ~ footer,
.page-template-template-service-v2  .hp2-main ~ .full-section.home-section-10,
.page-template-template-service-v2  .hp2-main ~ footer { display: none !important; }
.page-template-template-blog-v2 .theme-cursor,
.page-template-template-service-v2 .theme-cursor { display: none !important; }
.page-template-template-blog-v2 body { background: #ffffff; }
.page-template-template-service-v2 body { background: #f4f4f0; }

/* Service Detail V3 (proof-led long-form service page) — same legacy
   chrome hide as the v2 service template; the page itself sits on white. */
.page-template-template-service-v3 #masthead,
.page-template-template-service-v3 .site-header,
.page-template-template-service-v3 #site-navigation,
.page-template-template-service-v3 .main-navigation,
.page-template-template-service-v3 .fullpage-menu,
.page-template-template-service-v3 .modal.log-in-popup,
.page-template-template-service-v3 .modal#GFG {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
.page-template-template-service-v3 html,
.page-template-template-service-v3 body,
.page-template-template-service-v3 #page,
.page-template-template-service-v3 #content,
.page-template-template-service-v3 .site {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.page-template-template-service-v3 .hp2-main ~ .full-section.home-section-10,
.page-template-template-service-v3 .hp2-main ~ footer { display: none !important; }
.page-template-template-service-v3 .theme-cursor { display: none !important; }
.page-template-template-service-v3 body { background: #ffffff; }

.hp2-about-page {
  padding-top: 86px;
}

/* §A  Hero — editorial serif headline only, centered. The full-width
   team photo lives in its own section below for a Clay-style two-beat
   opener (statement → image). Top padding is small now (just enough
   to clear the fixed nav); the nav-clearance is already on the page
   wrapper so we don't double-up the gap above the H1. */
.hp2-ahero {
  padding: clamp(24px, 3vw, 56px) 0 clamp(40px, 5vw, 72px);
  text-align: center;
}
.hp2-ahero__h1 {
  /* font-family removed — inherits site sans-serif (Roobert/Inter system)
     so the H1 matches the rest of the v2 typography. Weight bumped from
     500 → 700 to keep visual presence after the serif fell away. */
  font-size: clamp(48px, 7.6vw, 124px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--hp2-dark);
  margin: 0 auto;
  max-width: 1280px;
  text-wrap: balance;
}
.hp2-ahero__h1 em { font-style: italic; color: var(--hp2-dark); }

/* §A.split  HERO — split layout (founder polaroid pair LEFT, huge
   headline + lead RIGHT). Activates only when .hp2-ahero--split is
   on the section. 2-col grid: founders ~38% / copy ~62%. The polaroid
   pair stays vertically centered with the headline so both columns
   feel balanced; on mobile the pair stacks above the headline. */
.hp2-ahero--split {
  padding: clamp(48px, 6vw, 100px) 0 clamp(48px, 5vw, 80px);
  text-align: left;
}
.hp2-ahero--split .hp2-ahero__grid {
  display: grid;
  /* Left column min-width bumped to comfortably hold the larger
     polaroid pair (~520px wide at max). Gap bumped so the headline
     reads as a deliberate second-column object, not crowding the
     polaroids. */
  grid-template-columns: minmax(360px, 0.95fr) 1.35fr;
  gap: clamp(64px, 7vw, 128px);
  align-items: center;
}

/* Polaroid pair — left column. Two cards fanned together; pair
   stays compact so the left column isn't crowded. Same paper-frame
   styling as the footer signature polaroid for visual consistency. */
.hp2-ahero__founders--polaroid {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(-20px, -1.5vw, -8px);  /* negative gap = overlap */
  padding: 12px 0;
  margin: 0;
  list-style: none;
}
.hp2-ahero__polaroid {
  position: relative;
  /* Bumped from clamp(200, 19vw, 280) to clamp(230, 22vw, 320) so
     the founder pair has more presence on the left of the hero —
     was reading slightly small next to the wide headline column. */
  width: clamp(230px, 22vw, 320px);
  margin: 0;
  padding: 14px 14px 16px;
  background: #f5f5f0;
  border-radius: 5px;
  box-shadow:
    0 36px 72px -20px rgba(10, 10, 15, 0.32),
    0 8px 16px rgba(10, 10, 15, 0.12);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.hp2-ahero__polaroid--left {
  transform: rotate(-6deg) translateY(10px);
  z-index: 1;
}
.hp2-ahero__polaroid--right {
  transform: rotate(5deg) translate(-18px, -8px);
  z-index: 2;
}
.hp2-ahero__founders--polaroid:hover .hp2-ahero__polaroid--left {
  transform: rotate(-3deg) translateY(2px) scale(1.02);
}
.hp2-ahero__founders--polaroid:hover .hp2-ahero__polaroid--right {
  transform: rotate(2deg) translate(-12px, -14px) scale(1.02);
}
.hp2-ahero__polaroid-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f0eee5;
  border-radius: 3px;
  overflow: hidden;
}
.hp2-ahero__polaroid-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hp2-ahero__polaroid-cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
  margin-top: 14px;
  padding: 0 4px;
  text-align: center;
}
.hp2-ahero__polaroid-cap strong {
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #1a1a1f;
}
.hp2-ahero__polaroid-cap span {
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 400;
  color: #6b6b75;
  letter-spacing: 0.01em;
}

/* Split-hero copy block — H1 sits LEFT-aligned to the right column,
   editorial scale (the centerpiece of the page). Lead paragraph
   below at standard body size, narrower max-width than H1 so it
   reads as supporting detail. Copy block cap bumped 720 → 940 so
   the headline fills the right column instead of leaving a void on
   the right at 1760px container widths. */
.hp2-ahero--split .hp2-ahero__copy {
  max-width: 940px;
}
.hp2-ahero--split .hp2-ahero__h1 {
  /* Was clamp(44, 6.4vw, 104) — too large; with text-wrap:balance it
     was breaking onto 4 single-word lines at 1920px. Scaled down to
     clamp(40, 5.2vw, 84) so "We build commerce / that compounds."
     reads as two natural lines that fill the column. text-wrap
     switched balance → pretty so the browser lets long lines run
     to the column edge instead of equalizing line lengths. */
  font-size: clamp(40px, 5.2vw, 84px);
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin: 0 0 clamp(20px, 2.2vw, 32px);
  max-width: 100%;
  text-align: left;
  text-wrap: pretty;
}
.hp2-ahero--split .hp2-ahero__lead {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(10, 10, 15, 0.62);
  margin: 0 0 20px;
  max-width: 580px;
  text-align: left;
}
.hp2-ahero--split .hp2-ahero__lead:last-of-type {
  margin-bottom: 0;
}
/* Second paragraph — slightly smaller + more muted so the first
   paragraph stays the lead, the second reads as supporting detail. */
.hp2-ahero--split .hp2-ahero__lead--sub {
  font-size: clamp(14px, 1.05vw, 16px);
  color: rgba(10, 10, 15, 0.52);
}

/* Signature strip at the bottom of the hero — pulses a small green
   "we're online" dot next to the locations + tagline. Gives the
   hero column more vertical weight without adding noise. */
.hp2-ahero--split .hp2-ahero__signature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 12px 18px;
  border: 1px solid rgba(10, 10, 15, 0.08);
  border-radius: 999px;
  background: rgba(10, 10, 15, 0.02);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(10, 10, 15, 0.7);
}
.hp2-ahero__signature-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
  animation: hp2-ahero-sig-pulse 2.2s ease-in-out infinite;
}
@keyframes hp2-ahero-sig-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16); }
  50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-ahero__signature-dot { animation: none; }
}

@media (max-width: 880px) {
  /* Mobile: stack the polaroid pair above the headline, centered. */
  .hp2-ahero--split { text-align: center; padding-top: clamp(40px, 8vw, 72px); }
  .hp2-ahero--split .hp2-ahero__grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 44px);
    justify-items: center;
  }
  .hp2-ahero--split .hp2-ahero__h1,
  .hp2-ahero--split .hp2-ahero__lead { text-align: center; }
  .hp2-ahero--split .hp2-ahero__lead { margin: 0 auto; }
  .hp2-ahero--split .hp2-ahero__copy { max-width: 100%; }
}
@media (max-width: 480px) {
  .hp2-ahero__polaroid { width: clamp(140px, 38vw, 180px); }
  .hp2-ahero__polaroid--left  { transform: rotate(-5deg) translateY(8px); }
  .hp2-ahero__polaroid--right { transform: rotate(4deg) translate(-12px, -6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-ahero__polaroid { transition: none; }
}

/* §B  Full-width team photo banner */
.hp2-aphoto {
  padding: 0 clamp(20px, 4vw, 64px) clamp(40px, 5vw, 72px);
}
.hp2-aphoto__wrap {
  max-width: 1560px;
  margin: 0 auto;
}
.hp2-aphoto__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: clamp(18px, 1.8vw, 28px);
  background: #0a0a0f;
}

/* §B  Stats strip — 4-up full-width row. Spans the entire container
   (no max-width cap) so the four proof numbers occupy the same
   horizontal canvas as the hero copy and the philosophies grid below.
   Each cell anchored top-left so all four stats baseline-align cleanly.
   No border on this section — the philosophies section below carries
   the top divider, so we never double up rules between adjacent bands. */
.hp2-astats {
  padding: clamp(56px, 7vw, 96px) 0;
}
.hp2-astats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.hp2-astats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.hp2-astats__num {
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--hp2-dark);
}
.hp2-astats__unit {
  font-size: 0.55em;
  font-weight: 600;
  color: rgba(10, 10, 15, 0.4);
  margin-left: 2px;
}
.hp2-astats__lbl {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(10, 10, 15, 0.5);
  font-weight: 500;
}
@media (max-width: 800px) {
  .hp2-astats__list { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

/* §D  Image gallery — auto-scrolling marquee of mixed-aspect photos.
   Bleeds full-viewport (escapes the container) so the strip reads as
   a long horizontal beat. Pauses on hover; varied aspect ratios give
   the marquee a Clay-like editorial rhythm. */
.hp2-agallery {
  padding: clamp(48px, 6vw, 88px) 0 clamp(48px, 6vw, 88px);
  overflow: hidden;
  position: relative;
  /* Edge fades so the marquee doesn't read as a hard cut at the edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.hp2-agallery__wrap {
  position: relative;
  width: 100%;
}
.hp2-agallery__track {
  display: flex;
  width: max-content;
  gap: clamp(16px, 1.5vw, 28px);
  animation: hp2-agallery-marquee 60s linear infinite;
  align-items: center;
}
.hp2-agallery:hover .hp2-agallery__track {
  animation-play-state: paused;
}
.hp2-agallery__cell {
  margin: 0;
  flex-shrink: 0;
  /* Uniform height; widths vary by aspect-ratio modifier so the strip
     keeps a clean horizontal baseline even with mixed source ratios. */
  height: clamp(280px, 36vw, 460px);
  border-radius: clamp(10px, 1vw, 18px);
  overflow: hidden;
  background: #f4f4f0;
}
.hp2-agallery__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp2-agallery__cell--square { aspect-ratio: 1 / 1;   width: auto; }
.hp2-agallery__cell--tall   { aspect-ratio: 4 / 5;   width: auto; }
.hp2-agallery__cell--wide   { aspect-ratio: 5 / 4;   width: auto; }

@keyframes hp2-agallery-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* §E  Two-paragraph intro — narrow centred column under the gallery. */
.hp2-aintro {
  padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 9vw, 120px);
}
.hp2-aintro__body {
  max-width: 720px;
  margin: 0 auto;
}
.hp2-aintro__body p {
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--hp2-dark);
  font-weight: 500;
  margin: 0 0 clamp(18px, 1.8vw, 28px);
}
.hp2-aintro__body p:last-child { margin-bottom: 0; }

/* §F  Process — 4 numbered steps in a 4-column grid (2-col on tablet,
   1-col on mobile). Ports the legacy carousel concept but flattens it
   into a static glance-readable matrix. */
.hp2-aproc {
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: 1px solid rgba(10, 10, 15, 0.06);
}
.hp2-aproc__head {
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.hp2-aproc__h {
  font-size: clamp(32px, 4.2vw, 64px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--hp2-dark);
  margin: 0 0 18px;
}
.hp2-aproc__sub {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(10, 10, 15, 0.55);
  margin: 0;
}
.hp2-aproc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.hp2-aproc__step {
  padding-top: 24px;
  border-top: 1px solid rgba(10, 10, 15, 0.14);
}
.hp2-aproc__num {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(10, 10, 15, 0.4);
  margin-bottom: 18px;
}
.hp2-aproc__step-h {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--hp2-dark);
  margin: 0 0 12px;
}
.hp2-aproc__step-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(10, 10, 15, 0.68);
  margin: 0;
}
@media (max-width: 900px) {
  .hp2-aproc__list { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .hp2-aproc__list { grid-template-columns: 1fr; gap: 28px; }
}

/* §D.industries  PHOTO STRIP — verticals we build for. 5-up grid
   of captioned image tiles. Each tile: square media + small label
   below. Static, no carousel, generous gap so the photos breathe. */
.hp2-aindustries {
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  border-top: 1px solid rgba(10, 10, 15, 0.06);
}
.hp2-aindustries__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.hp2-aindustries__h {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--hp2-dark);
  margin: 0 0 14px;
  text-wrap: balance;
}
.hp2-aindustries__sub {
  font-size: clamp(14px, 1.05vw, 16.5px);
  line-height: 1.6;
  color: rgba(10, 10, 15, 0.55);
  margin: 0;
  text-wrap: balance;
}
.hp2-aindustries__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
.hp2-aindustries__cell { display: block; }

/* Story tile — monochrome ring wrapper. Light hairline ring at
   rest, darkens to near-black on hover. The 2px padding is the ring
   thickness; the inner holder sits inside it. */
.hp2-aindustries__story {
  position: relative;
  padding: 2px;
  border-radius: 18px;
  background: rgba(10, 10, 15, 0.12);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.5s ease;
}
.hp2-aindustries__cell:hover .hp2-aindustries__story {
  transform: translateY(-6px);
  background: #0a0a0f;
  box-shadow: 0 28px 56px -20px rgba(10, 10, 15, 0.34);
}
/* Inner holder — true Instagram reel/story aspect (9:16 portrait),
   clips the photo + scrim. */
.hp2-aindustries__inner {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #11111a;
}
/* !important defeats the parent theme's `.hp2-main img { height: auto }`
   (specificity 0,1,1) which was collapsing the photo to its natural
   height — leaving the big white gap below it. */
.hp2-aindustries__photo {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}
.hp2-aindustries__cell:hover .hp2-aindustries__photo {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1);
}
/* Dark scrim at the bottom so the overlaid label stays legible
   over any photo. */
.hp2-aindustries__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(10, 10, 15, 0.72) 0%,
              rgba(10, 10, 15, 0.28) 28%,
              transparent 52%);
  pointer-events: none;
}
/* Label — overlaid bottom-left on the scrim, white, like a story
   caption. */
.hp2-aindustries__label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 15px;
  z-index: 1;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
@media (max-width: 860px) {
  /* Stories-style horizontal swipe — the row scrolls sideways with
     snap points, exactly like flicking through Instagram stories. */
  .hp2-aindustries__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 6px;
    /* edge fade so partial next-tile peeks in */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    scrollbar-width: none;
  }
  .hp2-aindustries__grid::-webkit-scrollbar { display: none; }
  .hp2-aindustries__cell {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
}
@media (max-width: 520px) {
  .hp2-aindustries__cell { flex-basis: 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-aindustries__photo,
  .hp2-aindustries__cell:hover .hp2-aindustries__photo,
  .hp2-aindustries__story,
  .hp2-aindustries__cell:hover .hp2-aindustries__story {
    transition: none;
    transform: none;
  }
}

/* §H  Oversized closing contact (reused by /about and /contact) */
.hp2-aclose {
  padding: clamp(80px, 10vw, 144px) 0;
  text-align: center;
  border-top: 1px solid rgba(10, 10, 15, 0.06);
}
.hp2-aclose__kicker {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(10, 10, 15, 0.45);
  margin: 0 0 24px;
}
.hp2-aclose__link {
  display: block;
  font-size: clamp(40px, 6.4vw, 96px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.1;
  color: var(--hp2-dark);
  text-decoration: none;
  transition: color .25s ease, transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-aclose__link:hover,
.hp2-aclose__link:focus-visible {
  color: var(--hp2-blue, #0a0a0f);
  transform: translateX(6px);
}
.hp2-aclose__link--phone {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  color: rgba(10, 10, 15, 0.55);
  margin-top: 18px;
}
.hp2-aclose__link--phone:hover { color: var(--hp2-dark); }

/* ============================================================
   §CONTACT v2  ·  /contact-v2/
   ============================================================ */
.hp2-contact-page { /*padding-top: 86px;*/ }

/* §A  Hero split — copy left, autoplay showreel video right.
   Darkroom-inspired layout: the editorial headline pairs with a
   silent looping video so the page opens with motion + statement. */
.hp2-bhero {
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
}
.hp2-bhero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hp2-bhero__copy {
  max-width: 600px;
}
.hp2-bhero__h1 {
  /* font-family removed — inherits site sans-serif so the contact hero
     matches the v2 typography everywhere else (homepage CTA, work hero,
     about hero, form labels). Weight bumped from 500 → 700 to keep the
     headline anchored after the serif's natural display weight fell away. */
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--hp2-dark);
  margin: 0 0 28px;
}
.hp2-bhero__lead {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: #4b4b58;
  margin: 0;
  max-width: 480px;
}
.hp2-bhero__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: clamp(16px, 1.8vw, 28px);
  overflow: hidden;
  background: #0a0a0f;
}
.hp2-bhero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 960px) {
  .hp2-bhero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hp2-bhero__media { aspect-ratio: 16 / 9; }
}

/* §B  Form pill — Darkroom signature rounded container.
   2-col grid with full-width fields for services + hear-about-us;
   the submit row spans full width with the button + a note. */
.hp2-bform {
  padding: clamp(40px, 5vw, 80px) 0 clamp(64px, 8vw, 112px);
}
/* §B  Form pill — Darkroom signature rounded container. Trimmed
   to 4 fields total (Name + Email row, Phone + Services row, submit
   row) so each field can breathe. World-class polish: 16px input
   font (no iOS zoom), 18px inset padding, 16px corner radius,
   generous 22-32px field gap. Pill submit button matches the rest
   of the v2 primary CTAs site-wide. */
.hp2-bform__pill {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 15, 0.07);
  border-radius: clamp(16px, 2vw, 28px);
  /* Compacted more aggressively for one-fold fit. */
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 30px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 22px);
  box-shadow:
    0 30px 80px -40px rgba(10, 10, 15, 0.12),
    0 2px 8px rgba(10, 10, 15, 0.03);
}
.hp2-bform__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;  /* prevent grid blowout from long placeholder */
}
.hp2-bform__field--full {
  grid-column: 1 / -1;
}
.hp2-bform__field label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--hp2-dark);
}
.hp2-bform__opt {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(10, 10, 15, 0.42);
  letter-spacing: 0;
}
.hp2-bform__field input,
.hp2-bform__field select {
  width: 100%;
  /* Compacted further for one-fold fit. */
  padding: 11px 14px;
  font: inherit;
  /* 16px = iOS Safari's zoom-suppression threshold. Anything smaller
     auto-zooms the page on focus, which is a UX cardinal sin. */
  font-size: 16px;
  color: var(--hp2-dark);
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 12px;
  outline: none;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
  font-family: inherit;
  letter-spacing: -0.005em;
  appearance: none;
  -webkit-appearance: none;
  /* Reset parent-theme Bootstrap that adds margin-bottom: 1rem on
     .form-control — prevented elsewhere too but belt-and-braces. */
  margin: 0 !important;
}
.hp2-bform__field input::placeholder {
  color: rgba(10, 10, 15, 0.32);
  letter-spacing: -0.005em;
}
.hp2-bform__field input:hover,
.hp2-bform__field select:hover {
  background: #f0f0f3;
}
.hp2-bform__field input:focus,
.hp2-bform__field select:focus,
.hp2-bform__field input:focus-visible,
.hp2-bform__field select:focus-visible {
  background: #ffffff;
  border-color: rgba(10, 10, 15, 0.92) !important;
  outline: none !important;
  /* Subtle focus ring — anchors keyboard focus without the heavy
     blue browser-default ring. */
  box-shadow: 0 0 0 4px rgba(10, 10, 15, 0.06) !important;
}
/* Chrome autofill consistency on the contact form */
.hp2-bform__field input:-webkit-autofill,
.hp2-bform__field input:-webkit-autofill:hover,
.hp2-bform__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hp2-dark);
  box-shadow: 0 0 0 1000px #f5f5f7 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}
.hp2-bform__field select {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'><path d='M4 7l5 5 5-5' stroke='%230a0a0f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    none;
  background-repeat: no-repeat;
  background-position: right 20px center, 0 0;
  background-size: 14px;
  padding-right: 48px;
}
.hp2-bform__row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(8px, 1vw, 16px);
  flex-wrap: wrap;
}
.hp2-bform__submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: var(--hp2-dark);
  color: #fff;
  border: none;
  /* Pill shape — matches the homepage CTA submit and the work-page
     "Schedule a call" button for site-wide CTA consistency. */
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(10, 10, 15, 0.18);
  transition: background 0.3s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.hp2-bform__submit:hover {
  background: #1f1f28;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(10, 10, 15, 0.28);
}
.hp2-bform__submit:active { transform: translateY(0); }
.hp2-bform__submit-arrow {
  display: inline-flex;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-bform__submit:hover .hp2-bform__submit-arrow { transform: translate(4px, -4px); }
.hp2-bform__note {
  font-size: 13px;
  color: rgba(10, 10, 15, 0.48);
  margin: 0;
  letter-spacing: 0;
  line-height: 1.5;
}
.hp2-bform__hp {
  position: absolute !important;
  width: 0; height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.hp2-bform.is-sent .hp2-bform__pill {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  transition: opacity .5s ease, filter .5s ease;
}

/* Success card — slides in once the form sends */
.hp2-bform__success {
  display: none;
  margin-top: 24px;
  padding: clamp(32px, 4vw, 56px);
  background: #fafafb;
  border-radius: clamp(20px, 2vw, 28px);
  text-align: center;
}
.hp2-bform__success.is-shown { display: block; }
.hp2-bform__success-check {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  color: var(--hp2-blue, #0a0a0f);
}
.hp2-bform__success-check svg { width: 100%; height: 100%; display: block; }
.hp2-bform__success-tick {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: hp2-cta-tick .7s cubic-bezier(0.86,0,0.07,1) .25s forwards;
}
.hp2-bform__success-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--hp2-dark);
  margin: 0 0 8px;
}
.hp2-bform__success-body {
  font-size: 15px;
  color: rgba(10, 10, 15, 0.62);
  margin: 0;
}

@media (max-width: 720px) {
  .hp2-bform__pill { grid-template-columns: 1fr; gap: 14px; }
}

/* §C  Proof — small intro + logo marquee. Equal vertical padding
   above and below so the logo strip sits as a balanced beat between
   the form and FAQ. Tinted band + soft 1px borders break up the page
   rhythm. Inherits .hp2-tes__logo* styles from the homepage trust
   strip so logos behave identically. */
.hp2-bproof {
  padding: clamp(56px, 7vw, 96px) 0;
  background: #fafafb;
  border-top: 1px solid rgba(10, 10, 15, 0.06);
  border-bottom: 1px solid rgba(10, 10, 15, 0.06);
}
.hp2-bproof__intro {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: rgba(10, 10, 15, 0.55);
  max-width: 720px;
  /* Equal margin above the logo strip to mirror the section padding,
     so the logos sit visually centred in the band. */
  margin: 0 auto clamp(56px, 7vw, 96px);
}

/* §E  FAQ */
.hp2-cfaq {
  padding: clamp(72px, 9vw, 120px) 0;
}
.hp2-cfaq__h {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--hp2-dark);
  margin: 0 0 clamp(36px, 4vw, 56px);
  line-height: 1.1;
}
/* Darkroom-style dual-line FAQ heading: second clause sits below in
   a muted tint, reads as "Frequent questions / with specific answers" */
.hp2-cfaq__h-sub {
  display: block;
  color: rgba(10, 10, 15, 0.28);
}
.hp2-cfaq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp2-cfaq__item {
  border-top: 1px solid rgba(10, 10, 15, 0.08);
}
.hp2-cfaq__item:last-child { border-bottom: 1px solid rgba(10, 10, 15, 0.08); }
.hp2-cfaq__item details {
  padding: 0;
}
.hp2-cfaq__item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(22px, 2.4vw, 32px) 48px clamp(22px, 2.4vw, 32px) 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--hp2-dark);
  position: relative;
  transition: color .25s ease;
}
.hp2-cfaq__item summary::-webkit-details-marker { display: none; }
.hp2-cfaq__item summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'><path d='M4 7l5 5 5-5' stroke='%230a0a0f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-cfaq__item details[open] summary::after { transform: rotate(180deg); }
.hp2-cfaq__item summary:hover { color: var(--hp2-blue, #0a0a0f); }
.hp2-cfaq__a {
  padding: 0 0 clamp(22px, 2.4vw, 32px);
  max-width: 760px;
}
.hp2-cfaq__a p {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(10, 10, 15, 0.7);
  margin: 0;
}

/* ============================================================
   §DROPDOWN  ·  Custom select replacement
   Replaces native <select> so the open panel matches the v2
   form aesthetic: rounded corners, soft drop-shadow, smooth
   hover-highlighted options. Trigger button is sized identical
   to .hp2-bform__field input/select so the layout is unchanged
   when swapped in. Wired up by hp2InitDropdowns() in JS.
   ============================================================ */
.hp2-dropdown {
  position: relative;
}
.hp2-dropdown__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 18px 48px 18px 20px;
  font: inherit;
  font-size: 16px;
  text-align: left;
  color: var(--hp2-dark);
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  outline: none;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  margin: 0;
}
.hp2-dropdown__trigger:hover {
  background: #f0f0f3;
}
.hp2-dropdown.is-open .hp2-dropdown__trigger,
.hp2-dropdown__trigger:focus-visible {
  background: #ffffff;
  border-color: rgba(10, 10, 15, 0.92);
  outline: none;
  box-shadow: 0 0 0 4px rgba(10, 10, 15, 0.06);
}
.hp2-dropdown__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp2-dropdown__value.is-placeholder {
  color: rgba(10, 10, 15, 0.32);
}
.hp2-dropdown__chevron {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  pointer-events: none;
  color: var(--hp2-dark);
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-dropdown.is-open .hp2-dropdown__chevron {
  transform: rotate(180deg);
}

/* Panel — opens below the trigger. Rounded, white, soft shadow. */
.hp2-dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(10, 10, 15, 0.10);
  border-radius: 14px;
  box-shadow:
    0 20px 50px -20px rgba(10, 10, 15, 0.18),
    0 4px 10px -4px rgba(10, 10, 15, 0.08);
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
}
.hp2-dropdown__panel[hidden] {
  display: none;
}
.hp2-dropdown__option {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--hp2-dark);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease;
  outline: none;
}
.hp2-dropdown__option:hover,
.hp2-dropdown__option:focus-visible {
  background: rgba(10, 10, 15, 0.05);
}
.hp2-dropdown__option[aria-selected="true"] {
  background: var(--hp2-dark);
  color: #ffffff;
}
.hp2-dropdown__option[aria-selected="true"]:hover,
.hp2-dropdown__option[aria-selected="true"]:focus-visible {
  background: var(--hp2-dark);
  color: #ffffff;
}

/* ============================================================
   SERVICES V2 PAGE — template-services-v2.php
   Eight sections, light page with two dark breaks (§D, §H).
   Reuses: .hp2-btn, .hp2-eyebrow, .hp2-ticker-track, .hp2-casecard
   ============================================================ */

/* Active nav state — shared across v2 pages */
.hp2-nav__links li a.is-current {
  color: var(--hp2-dark);
  background: rgba(10, 10, 15, 0.06);
}
.hp2-nav--scrolled .hp2-nav__links li a.is-current {
  background: rgba(10, 10, 15, 0.06);
}

/* Page scope — give the nav some breathing room beneath since
   we don't have a video hero to flow under it. */
.hp2-svc-page {
  padding-top: 80px;
}

/* ============================================================
   §A  HERO
   ============================================================ */
.hp2-svchero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 112px);
  background: #ffffff;
}
.hp2-svchero__copy {
  max-width: 920px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  text-align: center;
}
.hp2-svchero__h1 {
  font-size: clamp(40px, 6.2vw, 88px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--hp2-dark);
  margin: 18px 0 24px;
}
.hp2-svchero__lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: #404049;
  max-width: 720px;
  margin: 0 auto 36px;
}
.hp2-svchero__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.hp2-svchero__trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hp2-mid);
  letter-spacing: 0.01em;
  margin: 0;
}
.hp2-svchero__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
  animation: hp2-svc-pulse 2.2s ease-in-out infinite;
}
@keyframes hp2-svc-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14); }
  50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-svchero__dot { animation: none; }
}

/* Stats strip — 4 columns. Real Coduzion numbers. */
.hp2-svchero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  margin: 0;
  background: var(--hp2-light);
  border-radius: 24px;
  border: 1px solid rgba(10, 10, 15, 0.04);
}
.hp2-svchero__stat {
  text-align: center;
}
.hp2-svchero__stat-num {
  display: block;
  font-size: clamp(36px, 4.8vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--hp2-dark);
  margin: 0 0 8px;
}
.hp2-svchero__stat-num span {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--hp2-blue);
  margin-left: 2px;
}
.hp2-svchero__stat-label {
  margin: 0;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 500;
  color: var(--hp2-mid);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .hp2-svchero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   §B  CAPABILITIES — silent marquee
   ============================================================ */
.hp2-svccap {
  padding: clamp(40px, 5vw, 72px) 0;
  background: #ffffff;
  border-top: 1px solid rgba(10, 10, 15, 0.06);
  border-bottom: 1px solid rgba(10, 10, 15, 0.06);
  overflow: hidden;
}
.hp2-svccap__h {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  margin: 0 0 28px;
}
.hp2-svccap__marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.hp2-svccap__marquee .hp2-ticker-track {
  /* Inherit the homepage ticker animation, but override colors
     for the light background. */
  color: var(--hp2-dark);
  opacity: 0.78;
}
.hp2-svccap__marquee .hp2-ticker-item {
  color: var(--hp2-dark);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.04em;
}
.hp2-svccap__marquee .hp2-ticker-item:hover {
  color: var(--hp2-blue);
}

/* ============================================================
   §C  SERVICE MODULES — alternating L/R, six rows
   ============================================================ */
.hp2-svcmod {
  padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 8vw, 96px);
  background: #ffffff;
}
/* Width cap on the modules so the section reads as a focused
   editorial column on wide screens instead of stretching the full
   1760 container. Modules center within the container. */
.hp2-svcmod__head,
.hp2-svcmod__row {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.hp2-svcmod__head {
  margin-bottom: clamp(56px, 8vw, 96px);
}
.hp2-svcmod__h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--hp2-dark);
  margin: 14px 0 18px;
}
.hp2-svcmod__lead {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--hp2-mid);
  max-width: 600px;
  margin: 0;
}

/* Each row = 2-column grid; --flip swaps the visual column.
   Compacted: column gap clamp(48-112) → clamp(40-80), row padding
   clamp(48-88) → clamp(36-64). Pulls modules visually tighter
   without crowding the copy. */
.hp2-svcmod__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding: clamp(36px, 4.5vw, 64px) 0;
  border-top: 1px solid rgba(10, 10, 15, 0.06);
}
.hp2-svcmod__row:first-of-type { border-top: none; padding-top: 0; }
.hp2-svcmod__row--flip .hp2-svcmod__visual { order: 2; }
.hp2-svcmod__row--flip .hp2-svcmod__copy   { order: 1; }

.hp2-svcmod__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---- Polaroid frame — same language as footer carousel + about
        hero, sized up for these big feature blocks. ---- */
.hp2-svc__poly {
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0;
  padding: 18px 18px 22px;
  background: #f5f5f0;
  border-radius: 8px;
  box-shadow:
    0 48px 96px -24px rgba(10, 10, 15, 0.35),
    0 12px 24px rgba(10, 10, 15, 0.12);
  transform: rotate(-1.2deg);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-svcmod__row--flip .hp2-svc__poly { transform: rotate(1.2deg); }

.hp2-svcmod__row:hover .hp2-svc__poly,
.hp2-svcmod__row:focus-within .hp2-svc__poly {
  transform: rotate(0) translateY(-4px);
  box-shadow:
    0 60px 120px -28px rgba(10, 10, 15, 0.4),
    0 16px 32px rgba(10, 10, 15, 0.14);
}

.hp2-svc__poly-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  aspect-ratio: 4 / 3;
}
.hp2-svc__poly-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp2-svc__poly-cap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 8px 4px;
}
.hp2-svc__poly-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hp2-dark);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.22s ease, border-color 0.22s ease;
}
.hp2-svc__poly-tag:hover {
  color: var(--hp2-blue);
  border-bottom-color: var(--hp2-blue);
}
.hp2-svc__poly-tag svg {
  transition: transform 0.22s ease;
}
.hp2-svc__poly-tag:hover svg {
  transform: translate(2px, -2px);
}

/* ---- Copy column ---- */
.hp2-svcmod__copy {
  max-width: 540px;
}
.hp2-svcmod__num {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--hp2-blue);
  margin-bottom: 14px;
}
.hp2-svcmod__title {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--hp2-dark);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hp2-svcmod__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--hp2-blue);
  padding: 4px 9px;
  border-radius: 4px;
  vertical-align: middle;
}
.hp2-svcmod__lede {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: #4a4a52;
  margin: 0 0 24px;
}

/* Capability chips — quiet pills, sized down so 5-6 chips fit on
   one row at the new narrower module width. */
.hp2-svcmod__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin: 0 0 24px;
  padding: 0;
}
.hp2-svcmod__chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--hp2-dark);
  background: transparent;
  padding: 5px 10px;
  border: 1px solid rgba(10, 10, 15, 0.12);
  border-radius: 999px;
}

/* "What you'll ship" — editorial deliverables list.
   Earlier iterations: grey-filled card (read as flooded with six
   in a row), then a white card with an overhanging chip label
   (the chip absolutely-positioned itself into the wrapped chips
   row above, creating visible overlap). Final: no box, no card.
   Just a thin top-border divider + small uppercase label + clean
   checked list. Reads professional, scannable, hierarchical. */
.hp2-svcmod__ship {
  position: relative;
  padding: 18px 0 0;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(10, 10, 15, 0.1);
  border-radius: 0;
  margin: 4px 0 24px;
}
.hp2-svcmod__ship-label {
  display: block;
  position: static;
  padding: 0;
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  margin-bottom: 12px;
}
.hp2-svcmod__ship-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp2-svcmod__ship-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hp2-dark);
}
.hp2-svcmod__ship-check {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--hp2-blue);
}

/* Inline CTA — Darkroom underline-grow */
.hp2-svcmod__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hp2-dark);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid var(--hp2-dark);
  transition: color 0.22s ease, border-color 0.22s ease, gap 0.22s ease;
}
.hp2-svcmod__cta:hover {
  color: var(--hp2-blue);
  border-bottom-color: var(--hp2-blue);
  gap: 12px;
}

/* ---- Service-module responsive ---- */
@media (max-width: 980px) {
  .hp2-svcmod__row,
  .hp2-svcmod__row--flip {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 48px);
  }
  .hp2-svcmod__row--flip .hp2-svcmod__visual,
  .hp2-svcmod__row--flip .hp2-svcmod__copy { order: initial; }
  .hp2-svc__poly { max-width: 440px; }
}
@media (max-width: 560px) {
  .hp2-svcmod__title { font-size: 26px; }
  .hp2-svcmod__chips { gap: 6px; }
  .hp2-svcmod__chip  { font-size: 11px; padding: 5px 9px; }
}

/* ============================================================
   §D  PROCESS STRIP — dark break in the page rhythm
   ============================================================ */
.hp2-svcproc {
  padding: clamp(72px, 9vw, 128px) 0;
  background: var(--hp2-dark);
  color: #ffffff;
}
.hp2-svcproc__head {
  max-width: 760px;
  margin: 0 0 clamp(48px, 6vw, 80px);
}
.hp2-svcproc__h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 14px 0 0;
}

.hp2-svcproc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  counter-reset: hp2-svcproc;
}
.hp2-svcproc__step {
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hp2-svcproc__num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.hp2-svcproc__name {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 12px;
}
.hp2-svcproc__body {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (max-width: 980px) {
  .hp2-svcproc__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .hp2-svcproc__list { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   §G  FAQ — native <details>/<summary>, zero JS
   ============================================================ */
.hp2-svcfaq {
  padding: clamp(72px, 9vw, 128px) 0;
  background: #ffffff;
}
.hp2-svcfaq__head {
  max-width: 760px;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.hp2-svcfaq__h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--hp2-dark);
  margin: 14px 0 0;
}
.hp2-svcfaq__list {
  max-width: 920px;
  margin: 0;
}
.hp2-svcfaq__item {
  border-top: 1px solid rgba(10, 10, 15, 0.1);
  padding: 0;
}
.hp2-svcfaq__item:last-of-type { border-bottom: 1px solid rgba(10, 10, 15, 0.1); }
.hp2-svcfaq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  font-size: clamp(17px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--hp2-dark);
  transition: color 0.22s ease;
}
.hp2-svcfaq__q::-webkit-details-marker { display: none; }
.hp2-svcfaq__q:hover { color: var(--hp2-blue); }
.hp2-svcfaq__chev {
  flex-shrink: 0;
  color: var(--hp2-dark);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease;
}
.hp2-svcfaq__q:hover .hp2-svcfaq__chev { color: var(--hp2-blue); }
.hp2-svcfaq__item[open] .hp2-svcfaq__chev { transform: rotate(180deg); }
.hp2-svcfaq__a {
  max-width: 760px;
  margin: 0;
  padding: 0 0 28px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--hp2-mid);
}

/* ============================================================
   §H  CLOSING CTA — Charle quiet close, dark
   ============================================================ */
.hp2-svccta {
  padding: clamp(96px, 12vw, 176px) 0 clamp(96px, 12vw, 176px);
  background: var(--hp2-dark);
  color: #ffffff;
  /* Stacking context for the background video + scrim layers. */
  position: relative;
  overflow: hidden;
}
/* Background video — covers the section, slightly dimmed so the
   dark base shows through and the headline never loses contrast. */
.hp2-svccta__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
/* Radial scrim — darker at edges, gentler at the centre where text
   sits. Reads as a vignette, not a flat overlay. */
.hp2-svccta__bg-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              rgba(10, 10, 15, 0.35) 0%,
              rgba(10, 10, 15, 0.75) 65%,
              rgba(10, 10, 15, 0.9) 100%);
  z-index: 1;
  pointer-events: none;
}
.hp2-svccta > .container {
  position: relative;
  z-index: 2;
}
/* Reduced-motion: pause the video (still shows the poster frame). */
@media (prefers-reduced-motion: reduce) {
  .hp2-svccta__bg-video {
    display: none;
  }
}
.hp2-svccta__inner {
  /* Widened 820 → 1120 so the headline can flow as two natural
     lines ("Let's build the next chapter / of your store.") instead
     of being squeezed into 3 awkward lines at 76px font. */
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}
.hp2-svccta__h2 {
  /* Was clamp(36, 5.4vw, 76) — too large at the old container width.
     Dropped max 76 → 60 and tightened line-height for a calmer close. */
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: #ffffff;
  margin: 0 auto 24px !important;
  text-wrap: pretty;
  text-align: center !important;
}
.hp2-svccta__lead {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 620px !important;
  margin: 0 auto 44px !important;
  /* Explicit text-align so the lead can't inherit a left-align from
     the parent theme's body / paragraph rules. */
  text-align: center !important;
}
.hp2-svccta__btn {
  padding: 18px 36px !important;
  font-size: 15px !important;
  /* Belt-and-braces center: even though the parent .hp2-svccta__inner
     has text-align:center, button display-mode varies between user
     agents — margin auto guarantees it sits dead center. */
  margin: 0 auto;
  /* INVERTED for the dark closing section — was black-on-near-black
     (invisible) after the B&W conversion. White pill, dark text. */
  background: #ffffff !important;
  color: #0a0a0f !important;
  border-color: #ffffff !important;
  /* overflow visible so the pulse ring can expand beyond the pill;
     position relative anchors the ring + magnetic transform. */
  position: relative;
  overflow: visible !important;
}
.hp2-svccta__btn:hover {
  background: #f0f0f0 !important;
  color: #0a0a0f !important;
}
/* Soft pulse ring — a white pill-shaped ring that expands outward
   and fades on a slow loop, drawing the eye to the CTA without
   shouting. Sits behind the button (z-index -1) so it never blocks
   clicks. The magnetic cursor-pull is handled by the global
   hp2InitMagneticButtons handler (every .hp2-btn). */
.hp2-svccta__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: hp2-svccta-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes hp2-svccta-pulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.45); }
  100% { opacity: 0;    transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-svccta__btn::before { animation: none; opacity: 0; }
}
.hp2-svccta__fineprint {
  /* Bumped from 28 → 48px so the contact line sits as its own beat
     beneath the button instead of clinging to it. */
  margin: 48px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.hp2-svccta__fineprint a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  transition: color 0.22s ease, border-color 0.22s ease;
}
.hp2-svccta__fineprint a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ============================================================
   Reduced motion — kill micro-interactions on services page
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hp2-svc__poly,
  .hp2-svcfaq__chev,
  .hp2-svc__poly-tag svg,
  .hp2-svcmod__cta,
  .hp2-svchero__poly,
  .hp2-svcvideo__wrap {
    transition: none !important;
  }
  .hp2-svcmod__row:hover .hp2-svc__poly {
    transform: none !important;
  }
  /* Immersive video: pin to final state instead of running the
     scroll-driven scale + radius animation. */
  .hp2-svcvideo__wrap {
    width: 100% !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   SERVICES V2 — §A HERO SPLIT (Darkroom layout)
   ============================================================
   When .hp2-svchero--split is on the section, the hero becomes a
   2-column grid (copy left, polaroid collage right). Overrides the
   centered single-column defaults from the original hero rules. */

.hp2-svchero--split {
  padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 88px);
}
.hp2-svchero--split .hp2-svchero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(56px, 7vw, 96px);
}

/* Override the centered copy styles from the original hero */
.hp2-svchero--split .hp2-svchero__copy {
  max-width: none;
  margin: 0;
  text-align: left;
}
.hp2-svchero--split .hp2-svchero__h1 {
  font-size: clamp(36px, 4.8vw, 76px);
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin: 16px 0 22px;
  text-wrap: pretty;
}
.hp2-svchero--split .hp2-svchero__lead {
  max-width: 540px;
  margin: 0 0 32px;
  text-align: left;
}
.hp2-svchero--split .hp2-svchero__ctas {
  justify-content: flex-start;
  margin-bottom: 22px;
}

/* ---- Polaroid collage (right column) ----
   3 overlapping cards. Container is a positioned context with an
   aspect-ratio so the layout reserves space; cards are absolutely
   positioned with distinct rotations + z-indexes. */
.hp2-svchero__visual {
  position: relative;
  width: 100%;
  /* aspect-ratio keeps the collage roughly square at any width so
     the cards never crash into the copy column on resize. */
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin-left: auto;
}
.hp2-svchero__poly {
  position: absolute;
  margin: 0;
  padding: 14px 14px 16px;
  background: #f5f5f0;
  border-radius: 5px;
  box-shadow:
    0 32px 64px -16px rgba(10, 10, 15, 0.32),
    0 8px 16px rgba(10, 10, 15, 0.12);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-svchero__poly-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
}
.hp2-svchero__poly-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp2-svchero__poly-cap {
  display: block;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1a1a1f;
  text-align: center;
}

/* Three card positions — manually placed for a balanced layered
   composition. Back card is the largest behind-and-up; mid card is
   medium top-right; front card is smaller bottom-center, in front
   of the others. */
.hp2-svchero__poly--back {
  top: 4%;
  left: 0;
  width: 56%;
  transform: rotate(-5deg);
  z-index: 1;
}
.hp2-svchero__poly--mid {
  top: 14%;
  right: 0;
  width: 50%;
  transform: rotate(4deg);
  z-index: 2;
}
.hp2-svchero__poly--front {
  bottom: 0;
  left: 22%;
  width: 46%;
  transform: rotate(-1deg);
  z-index: 3;
}

/* Subtle "settle" on hover — cards relax their rotation and lift */
.hp2-svchero__visual:hover .hp2-svchero__poly--back  { transform: rotate(-2deg) translateY(-4px); }
.hp2-svchero__visual:hover .hp2-svchero__poly--mid   { transform: rotate(2deg)  translateY(-4px); }
.hp2-svchero__visual:hover .hp2-svchero__poly--front { transform: rotate(0)     translateY(-6px); }

/* ---- Hero split responsive ---- */
@media (max-width: 1080px) {
  .hp2-svchero--split .hp2-svchero__grid {
    grid-template-columns: 1fr;
    gap: clamp(48px, 8vw, 72px);
  }
  .hp2-svchero--split .hp2-svchero__copy { text-align: center; }
  .hp2-svchero--split .hp2-svchero__h1   { text-align: center; }
  .hp2-svchero--split .hp2-svchero__lead { margin-left: auto; margin-right: auto; text-align: center; }
  .hp2-svchero--split .hp2-svchero__ctas { justify-content: center; }
  .hp2-svchero__visual { max-width: 520px; margin: 0 auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .hp2-svchero__visual { aspect-ratio: 5 / 4; max-width: 380px; }
  .hp2-svchero__poly-cap { font-size: 11px; }
}

/* ============================================================
   SERVICES V2 — §A2  IMMERSIVE VIDEO
   ============================================================
   Showreel video that starts as an ~86% card with rounded corners
   and expands to full viewport width as the user scrolls through.
   Width + border-radius driven from JS (hp2InitSvcVideoExpand).
   Reduced-motion users get the final state pinned via media query
   above (width: 100%, border-radius: 0). */

.hp2-svcvideo {
  padding: clamp(60px, 8vw, 120px) 0;
  background: #ffffff;
  /* Section ignores the .container width-lock by living outside it. */
  overflow: hidden;
}
.hp2-svcvideo__wrap {
  position: relative;
  /* Default state = collapsed card. JS animates width + radius
     toward 100% / 0 as the section scrolls into view. */
  width: 86%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: var(--hp2-dark);
  box-shadow: 0 40px 80px -24px rgba(10, 10, 15, 0.4);
  will-change: width, border-radius;
}
.hp2-svcvideo__vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  /* Smaller screens already feel immersive at the starting width.
     Skip the heavy animation; pin to 92% with a tighter radius. */
  .hp2-svcvideo { padding: clamp(48px, 8vw, 80px) 0; }
  .hp2-svcvideo__wrap { width: 92%; border-radius: 14px; }
}

/* ============================================================
   CONTACT V2 — Charle-style split section, white theme
   Wraps the existing .hp2-bform__pill inside a 2-column layout:
   eyebrow + copy + trust + testimonial + stats on the left,
   white form card on the right. White page bg matches the rest
   of the v2 site (services, about, work).
   ============================================================ */
.hp2-bcontact {
  /* Aggressively compacted — target one-fold fit on ~720px viewports.
     Was clamp(40, 5vw, 80) / clamp(40, 5vw, 72) → now clamp(24, 3vw, 56)
     both sides. Saves another ~48px top + 32px bottom. */
  padding: clamp(24px, 3vw, 56px) 0 clamp(24px, 3vw, 48px);
  background: #ffffff;
  color: var(--hp2-dark);
  position: relative;
  overflow: hidden;
}
/* Soft tinted radial behind the form so the form card has a
   gentle backdrop instead of sitting on flat white. Very subtle
   blue wash — matches the existing v2 accent palette. */
.hp2-bcontact::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 70%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(10, 10, 15,0.06), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
}
.hp2-bcontact > .container { position: relative; z-index: 1; }

.hp2-bcontact__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
}

/* ---- New Darkroom-shape layout ----
   Hero band: text left, showreel video right (no form, no testi).
   Form section: centered card below, capped width. */
.hp2-bcontact__hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  /* Width matched to the form section below (1080px) so the hero
     and form share the same horizontal extent — visually they sit
     as one centered column on the page. */
  /*max-width: 1080px;*/
  margin: 0 auto clamp(32px, 4vw, 56px);
}

.hp2-bcontact__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: clamp(16px, 2vw, 28px);
  overflow: hidden;
  background: var(--hp2-dark);
  box-shadow:
    0 40px 80px -28px rgba(10, 10, 15, 0.22),
    0 6px 18px rgba(10, 10, 15, 0.06);
}
.hp2-bcontact__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Form sits centered below the hero in its own constrained band */
.hp2-bcontact__form-section {
  /*max-width: 1080px;*/
  margin: 0 auto;
}

@media (max-width: 880px) {
  .hp2-bcontact__hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-template-template-contact-v2 .hp2-bcontact__hero {
        margin-top: 80px;
    }
  .hp2-bcontact__media { aspect-ratio: 16 / 9; }
}
.hp2-bcontact__copy {
  max-width: 540px;
  padding-top: clamp(4px, 1vw, 12px);
}
.hp2-bcontact__copy .hp2-eyebrow {
  margin-bottom: 18px;
}
.hp2-bcontact__h1 {
  /* Reduced clamp(36, 4.8vw, 64) → clamp(30, 3.8vw, 48) for the
     compact first-fold layout. Still anchors the column. */
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--hp2-dark);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.hp2-bcontact__lead {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: rgba(10, 10, 15, 0.62);
  margin: 0 0 20px;
  max-width: 520px;
}
.hp2-bcontact__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(10, 10, 15, 0.62);
  /* Tightened 52 → 32 to compact the column. Testimonial card
     still has breathing room beneath the trust pulse. */
  margin: 0 0 32px;
}
.hp2-bcontact__dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
  animation: hp2-bcontact-pulse 2.2s ease-in-out infinite;
}
@keyframes hp2-bcontact-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.04); }
}

/* Testimonial — light grey card, padding tightened for compact mode. */
.hp2-bcontact__testi {
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  background: var(--hp2-light);
  border: 1px solid rgba(10, 10, 15, 0.06);
  border-radius: 16px;
}
.hp2-bcontact__testi-quote {
  margin: 0 0 20px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--hp2-dark);
  font-weight: 400;
}
.hp2-bcontact__testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Browser default for <figcaption> inside <figure> can carry a
     left indent (some UAs apply margin-inline-start). Force-zero
     it so the SN avatar sits flush at the card's content edge,
     aligned with the quote text above it. */
  margin: 0;
  padding: 0;
}
/* Initials avatar — solid dark circle with white text. Cleaner
   than cropping a brand product photo into a 44px circle. */
.hp2-bcontact__testi-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hp2-dark);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  line-height: 1;
}
.hp2-bcontact__testi-who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hp2-bcontact__testi-who strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--hp2-dark);
}
.hp2-bcontact__testi-who em {
  font-size: 12.5px;
  font-style: normal;
  color: var(--hp2-mid);
  margin-top: 2px;
}

/* Stats strip — concrete numbers anchor the bottom of the left
   column and give it weight matching the form card's height. */
.hp2-bcontact__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  /* Compact mode: tighter top spacing. */
  margin: clamp(16px, 2vw, 24px) 0 0;
  padding: clamp(14px, 1.6vw, 18px) 0 0;
  border-top: 1px solid rgba(10, 10, 15, 0.1);
}
.hp2-bcontact__stat { text-align: left; }
.hp2-bcontact__stat-num {
  display: block;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--hp2-dark);
  margin: 0 0 4px;
}
.hp2-bcontact__stat-num span {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--hp2-blue);
  margin-left: 2px;
}
.hp2-bcontact__stat-label {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--hp2-mid);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Right column — form card. On white bg the existing shadow is
   too soft, so we bump it here scoped to this section only. */
.hp2-bcontact__form-wrap {
  position: relative;
}
.hp2-bcontact .hp2-bform__pill {
  border: 1px solid rgba(10, 10, 15, 0.08);
  box-shadow:
    0 50px 100px -32px rgba(10, 10, 15, 0.16),
    0 8px 20px rgba(10, 10, 15, 0.05);
}

/* Required field indicator (red asterisk). Inline with label. */
.hp2-bform__req {
  color: #e53935;
  font-weight: 600;
  margin-left: 2px;
}

/* Textarea — same visual treatment as .hp2-bform__field input.
   Mirrors background, padding, border, focus state. */
.hp2-bform__field textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--hp2-dark);
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 12px;
  outline: none;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
  font-family: inherit;
  letter-spacing: -0.005em;
  resize: vertical;
  /* Even shorter min-height for one-fold fit. */
  min-height: 64px;
  margin: 0 !important;
}
.hp2-bform__field textarea::placeholder {
  color: rgba(10, 10, 15, 0.32);
  letter-spacing: -0.005em;
}
.hp2-bform__field textarea:hover { background: #f0f0f3; }
.hp2-bform__field textarea:focus,
.hp2-bform__field textarea:focus-visible {
  background: #ffffff;
  border-color: rgba(10, 10, 15, 0.92) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(10, 10, 15, 0.06) !important;
}

/* Stack on mobile/tablet — copy stacks above form */
@media (max-width: 980px) {
  .hp2-bcontact__grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 64px);
  }
  .hp2-bcontact__copy { max-width: 100%; padding-top: 0; }
}

/* Reduced motion — kill the pulse */
@media (prefers-reduced-motion: reduce) {
  .hp2-bcontact__dot { animation: none; }
}

/* ============================================================
   ABOUT V2 — §B2  Origin story
   Editorial 2-col: small intro left (sticky on desktop), three
   Q&A chapters right with divider rules between them. Sits
   between the stats strip and the core philosophies.
   ============================================================ */
.hp2-aorigin {
  padding: clamp(64px, 8vw, 112px) 0;
  background: #ffffff;
}
.hp2-aorigin__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1.4fr;
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.hp2-aorigin__head {
  max-width: 420px;
  /* Sticky on desktop so the intro stays in view while the
     reader scrolls through the three chapters on the right. */
  position: sticky;
  top: 100px;
}
.hp2-aorigin__head .hp2-eyebrow {
  margin-bottom: 16px;
}
.hp2-aorigin__h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--hp2-dark);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.hp2-aorigin__note {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--hp2-mid);
  margin: 0;
}

.hp2-aorigin__chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.hp2-aorigin__chapter {
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid rgba(10, 10, 15, 0.08);
}
.hp2-aorigin__chapter:first-child {
  padding-top: 0;
  border-top: none;
}
.hp2-aorigin__chapter:last-child { padding-bottom: 0; }
.hp2-aorigin__chapter-num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-blue);
  margin-bottom: 14px;
}
.hp2-aorigin__chapter-body {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(10, 10, 15, 0.78);
  max-width: 640px;
}

@media (max-width: 880px) {
  .hp2-aorigin__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hp2-aorigin__head {
    position: static;
    max-width: 100%;
  }
}

/* ============================================================
   ABOUT V2 — §B3  Two-office locations
   Sits between the stats strip and the core philosophies.
   Two-up grid; each office is a card with country, city, role,
   and a small metadata strip at the bottom.
   ============================================================ */
.hp2-aoffices {
  padding: clamp(44px, 5vw, 68px) 0;
  background: #ffffff;
}
.hp2-aoffices__head {
  max-width: 760px;
  margin: 0 auto clamp(30px, 3.5vw, 44px);
  text-align: center;
}
.hp2-aoffices__head .hp2-eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.hp2-aoffices__h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--hp2-dark);
  margin: 14px 0 14px;
  text-wrap: pretty;
}
.hp2-aoffices__sub {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--hp2-mid);
  margin: 0;
}
.hp2-aoffices__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 1080px;
  margin: 0 auto;
}
/* Light figure-led location cards — white cards on the white
   section, each with its city's landmark as prominent BLACK
   line-art on top, a divider, then the text below. Side by side. */
.hp2-aoffices__office {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: #ffffff;
  border: 1px solid rgba(10, 10, 15, 0.1);
  border-radius: 22px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease;
}
.hp2-aoffices__office:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(10, 10, 15, 0.18);
  border-color: rgba(10, 10, 15, 0.22);
}
/* Figure on top — black line-art, prominent (not a watermark),
   centered in a fixed-height stage with a divider beneath it. */
.hp2-aoffices__figure-wrap {
  height: clamp(136px, 11vw, 160px);
  display: flex;
  /* Figures sit on the divider baseline — the statue stands on it,
     the Hollywood hillside rests on it — so they read as grounded
     illustrations, not clip-art floating mid-card. */
  align-items: flex-end;
  justify-content: center;
  margin-bottom: clamp(16px, 1.8vw, 22px);
  padding-bottom: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(10, 10, 15, 0.08);
  overflow: hidden;
}
/* !important defeats the parent theme's `.hp2-main img { height:auto;
   max-width:100% }` (specificity 0,1,1) — without it the figures
   ballooned to full card width and overflowed over the text. The
   max-* constraints fit each figure inside the wrap, preserving
   aspect: tall statue is height-bound, wide Hollywood width-bound. */
.hp2-aoffices__figure {
  display: block;
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  opacity: 1;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-aoffices__office:hover .hp2-aoffices__figure {
  transform: scale(1.05);
}
/* Hollywood is wide — give it a confident width so it pairs with
   the tall statue in visual mass. */
.hp2-aoffices__figure--wide {
  max-width: clamp(300px, 42vw, 420px) !important;
  margin-bottom: 6px; /* nudge the hillside onto the baseline */
}
.hp2-aoffices__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* fill the card so the meta can bottom-align across both */
}
.hp2-aoffices__country {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.hp2-aoffices__city {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hp2-dark);
  margin: 0 0 10px;
}
.hp2-aoffices__role {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--hp2-dark);
  margin: 0 0 14px;
}
/* Per-card description — fuller copy, with comfortable breathing room
   below it before the stat rows. */
.hp2-aoffices__desc {
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.65;
  color: rgba(10, 10, 15, 0.52);
  margin: 0 0 clamp(30px, 3.4vw, 44px);
  max-width: 46ch;
}
.hp2-aoffices__meta {
  list-style: none;
  /* margin-top:auto pins the stats to the card bottom, so both cards'
     stat rows line up even when the descriptions differ in length. */
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.hp2-aoffices__meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(10, 10, 15, 0.1);
  line-height: 1.4;
}
.hp2-aoffices__meta li:last-child {
  border-bottom: 1px solid rgba(10, 10, 15, 0.1);
}
.hp2-aoffices__meta li span {
  font-size: 13.5px;
  color: var(--hp2-mid);
}
.hp2-aoffices__meta li strong {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--hp2-dark);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .hp2-aoffices__grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-aoffices__office,
  .hp2-aoffices__figure { transition: none !important; }
  .hp2-aoffices__office:hover,
  .hp2-aoffices__office:hover .hp2-aoffices__figure { transform: none !important; }
}

/* ============================================================
   ABOUT · §B1 TEAM — full-width brand portrait band. Symmetric
   vertical padding (matches the offices/stats rhythm) so it reads
   as a breathable beat between the story and the numbers.
   ============================================================ */
.hp2-ateam {
  padding: clamp(44px, 5vw, 68px) 0;
  background: #ffffff;
}
.hp2-ateam__figure {
  margin: 0 auto;
  /* Native image is 1280px wide — cap here so it stays crisp and
     framed rather than upscaling edge-to-edge on wide monitors. */
  max-width: 1180px;
}
.hp2-ateam__img {
  display: block;
  width: 100% !important;
  height: auto !important;
  border-radius: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(10, 10, 15, 0.08);
}
.hp2-ateam__cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-top: clamp(18px, 2vw, 26px);
}
.hp2-ateam__cap-text {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--hp2-mid);
  max-width: 620px;
}

/* ============================================================
   CASE STUDY V2  ·  /case-study/?case=slug
   File-driven detail pages (templates/template-casestudy-v2.php).
   ============================================================ */
.page-template-template-casestudy-v2 body { background: #ffffff; }
.page-template-template-casestudy-v2 #masthead,
.page-template-template-casestudy-v2 .site-header,
.page-template-template-casestudy-v2 #site-navigation,
.page-template-template-casestudy-v2 .main-navigation,
.page-template-template-casestudy-v2 .fullpage-menu,
.page-template-template-casestudy-v2 .modal.log-in-popup,
.page-template-template-casestudy-v2 .modal#GFG {
  display: none !important; height: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
}

/* Shared section heads */
.hp2-cs-sec-head { max-width: 720px; margin: 0 0 clamp(26px, 3vw, 42px); }
.hp2-cs-sec-h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; color: var(--hp2-dark); margin: 12px 0 0; }
.hp2-cs-sec-sub { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; color: var(--hp2-mid); margin: 14px 0 0; max-width: 60ch; }

/* Buttons used on case pages — unified box so dark/outline/light align */
.hp2-cs-hero__actions .hp2-btn,
.hp2-cs-cta__band .hp2-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; border-radius: 999px; text-decoration: none; line-height: 1; }
.hp2-btn--dark { background: var(--hp2-dark); color: #fff; border: 1.5px solid var(--hp2-dark); transition: background .2s ease, border-color .2s ease; }
.hp2-btn--dark:hover { background: #000; border-color: #000; color: #fff; }
.hp2-btn--light { background: #fff; color: var(--hp2-dark); border: 1.5px solid #fff; transition: background .2s ease; }
.hp2-btn--light:hover { background: rgba(255,255,255,.85); color: var(--hp2-dark); }

/* Hero */
.hp2-cs-hero { padding: clamp(100px, 11vw, 144px) 0 clamp(32px, 4vw, 52px); }
.hp2-cs-back { display: inline-block; font-size: 13px; font-weight: 600; color: var(--hp2-mid); text-decoration: none; margin-bottom: clamp(18px, 2.2vw, 30px); transition: color .2s ease; }
.hp2-cs-back:hover { color: var(--hp2-dark); }
.hp2-cs-hero__title { font-size: clamp(40px, 7vw, 86px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; color: var(--hp2-dark); margin: 12px 0 0; }
.hp2-cs-hero__lead { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: var(--hp2-mid); margin: clamp(16px,1.6vw,22px) 0 0; max-width: 62ch; }
.hp2-cs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(22px,2.4vw,30px) 0 0; }
.hp2-cs-hero__media { margin: clamp(30px,3.6vw,52px) 0 0; border-radius: 18px; overflow: hidden; background: #f3f4f6; aspect-ratio: 16 / 9; }
.hp2-cs-hero__media img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center top; display: block; }
.hp2-cs-facts { list-style: none; margin: clamp(24px,2.6vw,36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,28px); }
.hp2-cs-facts li { display: flex; flex-direction: column; gap: 5px; padding-top: 16px; border-top: 1px solid rgba(10,10,15,.12); }
.hp2-cs-facts li span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hp2-mid); }
.hp2-cs-facts li strong { font-size: clamp(15px,1.2vw,18px); font-weight: 700; color: var(--hp2-dark); letter-spacing: -0.01em; }

/* Brief */
.hp2-cs-brief { padding: clamp(40px,5vw,72px) 0; }
.hp2-cs-brief__grid { display: grid; grid-template-columns: minmax(0,240px) minmax(0,1fr); gap: clamp(20px,4vw,72px); align-items: start; max-width: 1040px; }
.hp2-cs-brief__h2 { font-size: clamp(12px,1.1vw,14px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hp2-mid); margin: 8px 0 0; }
.hp2-cs-brief__body { font-size: clamp(17px,1.5vw,23px); line-height: 1.5; letter-spacing: -0.01em; color: var(--hp2-dark); margin: 0; text-wrap: pretty; }

/* Scope */
.hp2-cs-scope { padding: clamp(40px,5vw,72px) 0; }
.hp2-cs-scope__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px,2.4vw,32px); }
.hp2-cs-scope__item { padding-top: 18px; border-top: 2px solid var(--hp2-dark); }
.hp2-cs-scope__num { font-size: 12px; font-weight: 700; color: var(--hp2-mid); font-variant-numeric: tabular-nums; }
.hp2-cs-scope__title { font-size: clamp(17px,1.4vw,20px); font-weight: 700; letter-spacing: -0.01em; color: var(--hp2-dark); margin: 8px 0 8px; }
.hp2-cs-scope__desc { font-size: 14.5px; line-height: 1.6; color: var(--hp2-mid); margin: 0; }

/* Stack */
.hp2-cs-stack { padding: clamp(36px,4.5vw,64px) 0; }
.hp2-cs-stack__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hp2-cs-chip { font-size: 13.5px; font-weight: 600; color: var(--hp2-dark); background: #f3f4f6; border: 1px solid rgba(10,10,15,.08); border-radius: 999px; padding: 9px 16px; }

/* Ongoing care — full-bleed dark band (the maintenance statement) */
.hp2-cs-care { padding: clamp(56px,6vw,88px) 0; background: var(--hp2-dark); }
.hp2-cs-care .hp2-eyebrow,
.hp2-cs-care .hp2-cs-sec-h2 { color: #ffffff; }
.hp2-cs-care .hp2-cs-sec-sub { color: rgba(255,255,255,.62); }
.hp2-cs-care__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: clamp(20px,2.4vw,32px); }
.hp2-cs-care__item { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
.hp2-cs-care__title { font-size: clamp(16px,1.3vw,18px); font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; }
.hp2-cs-care__desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.62); margin: 0; }

/* Results */
.hp2-cs-results { padding: clamp(48px,5.5vw,80px) 0; }
.hp2-cs-results__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2.4vw,32px); }
.hp2-cs-results__item { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px,2.6vw,34px); background: #f7f7f5; border-radius: 16px; }
.hp2-cs-results__num { font-size: clamp(34px,4.4vw,56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--hp2-dark); font-variant-numeric: tabular-nums; }
.hp2-cs-results__label { font-size: 14px; color: var(--hp2-mid); }

/* CTA + next case */
.hp2-cs-cta { padding: clamp(8px,1vw,16px) 0 clamp(64px,7vw,100px); }
.hp2-cs-cta__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(32px,4vw,56px); background: var(--hp2-dark); border-radius: clamp(18px,2.2vw,28px); }
.hp2-cs-cta__h2 { font-size: clamp(22px,2.4vw,32px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0; max-width: 24ch; }
.hp2-cs-cta__sub { font-size: 15px; color: rgba(255,255,255,.6); margin: 10px 0 0; }
.hp2-cs-next { display: flex; flex-direction: column; gap: 4px; margin: clamp(28px,3vw,44px) 0 0; padding-top: clamp(20px,2.2vw,28px); border-top: 1px solid rgba(10,10,15,.12); text-decoration: none; }
.hp2-cs-next__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hp2-mid); }
.hp2-cs-next__title { font-size: clamp(24px,3vw,40px); font-weight: 800; letter-spacing: -0.03em; color: var(--hp2-dark); transition: opacity .2s ease; }
.hp2-cs-next:hover .hp2-cs-next__title { opacity: .55; }

/* Index fallback (/case-study/ with no valid ?case=) */
.hp2-cs-index { padding: clamp(100px,11vw,144px) 0 clamp(64px,7vw,100px); }
.hp2-cs-index__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: clamp(20px,2.4vw,32px); }
.hp2-cs-index__card { text-decoration: none; display: block; }
.hp2-cs-index__media { aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; background: #f3f4f6; margin-bottom: 14px; }
.hp2-cs-index__media img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.hp2-cs-index__card:hover .hp2-cs-index__media img { transform: scale(1.04); }
.hp2-cs-index__tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hp2-mid); }
.hp2-cs-index__title { font-size: clamp(20px,1.8vw,26px); font-weight: 800; letter-spacing: -0.02em; color: var(--hp2-dark); margin: 6px 0 0; }

@media (max-width: 760px) {
  .hp2-cs-brief__grid { grid-template-columns: 1fr; gap: 14px; }
  .hp2-cs-facts { grid-template-columns: 1fr; }
  .hp2-cs-results__grid { grid-template-columns: 1fr; }
  .hp2-cs-hero__media { aspect-ratio: 16 / 11; }
  .hp2-cs-cta__band { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   WORK V2 — Darkroom-style left rail
   Wraps the existing .hp2-wgrid__grid (2-col case grid) in a
   2-col outer layout: sticky left rail (eyebrow + nav + meta)
   compacts the effective grid width on wide displays so cards
   stay readable and the page feels editorial, not sprawling.
   ============================================================ */
.hp2-wgrid__layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* Left rail — sticky on scroll so it stays in view while the
   case grid passes alongside it. Top offset accounts for the
   fixed nav height + a comfortable margin. */
.hp2-wgrid__rail {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hp2-wgrid__rail-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  margin: 0 0 4px;
}
.hp2-wgrid__rail-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp2-wgrid__rail-nav a {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(10, 10, 15, 0.42);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.22s ease;
}
.hp2-wgrid__rail-nav a:hover {
  color: var(--hp2-dark);
}
.hp2-wgrid__rail-nav a.is-current {
  color: var(--hp2-dark);
}
.hp2-wgrid__rail-meta {
  margin: 12px 0 0;
  padding: 0px 0 0;
  border-top: none;
  font-size: 13px;
  line-height: 1.55;
  color: var(--hp2-mid);
}

/* ============================================================
   §B  WORK RAIL SPOTLIGHT — scroll-driven active-case block.
   Layout (top → bottom):
     • Thumbnail (click-through to case)
     • Counter + thin progress bar
     • Tag (small uppercase) → Title (bold) → "View case study →"
   JS updates all of these as cards enter the viewport. The
   .hp2-wgrid__rail-active wrapper around the text block does a
   fade-swap (.is-swapping → opacity 0, swap, fade in) so changes
   feel like real transitions, not jump-cuts.
   ============================================================ */
.hp2-wgrid__rail-spotlight {
    margin: 0px 0 0px;
    padding: 0px 0 0px;
    border-top: none;
    border-bottom: none;
}

/* ---- Thumbnail ---- */
.hp2-wgrid__rail-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--hp2-light);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 18px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-wgrid__rail-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(10, 10, 15, 0.16);
}
.hp2-wgrid__rail-thumb-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: opacity 0.32s ease;
}
.hp2-wgrid__rail-thumb-img.is-swapping { opacity: 0; }

/* Arrow pill that fades in on hover, signals click-through */
.hp2-wgrid__rail-thumb-hover {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hp2-dark);
  color: #ffffff;
  opacity: 0;
  transform: translateY(-2px) scale(0.92);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.hp2-wgrid__rail-thumb:hover .hp2-wgrid__rail-thumb-hover {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Counter + progress bar ---- */
.hp2-wgrid__rail-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.hp2-wgrid__rail-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  /* Subdued from heavy blue → dark with tabular nums. Reads as
     metadata, not a focal element. */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hp2-dark);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hp2-wgrid__rail-current,
.hp2-wgrid__rail-total {
  font-variant-numeric: tabular-nums;
}
.hp2-wgrid__rail-divider {
  opacity: 0.32;
  margin: 0 3px;
}
.hp2-wgrid__rail-total {
  color: rgba(10, 10, 15, 0.42);
}
.hp2-wgrid__rail-bar {
  flex: 1;
  height: 2px;
  background: rgba(10, 10, 15, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.hp2-wgrid__rail-bar-fill {
  /* JS sets width: "${(idx+1)/total*100}%" */
  width: 0%;
  height: 100%;
  background: var(--hp2-dark);
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Active-case text block ---- */
.hp2-wgrid__rail-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.hp2-wgrid__rail-active.is-swapping {
  opacity: 0;
  transform: translateY(4px);
}
/* "INDUSTRY" eyebrow above the big industry label. Quiet, small,
   uppercase — matches the rail's "CASE STUDIES" eyebrow style. */
.hp2-wgrid__rail-eyebrow-min {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp2-blue);
  margin-bottom: 14px;
}
/* Industry — the new hero element on the rail. Big, bold,
   transitions as the user scrolls. */
.hp2-wgrid__rail-industry {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  color: var(--hp2-dark);
  /* Meta-row removed — industry now sits directly above the "View
     case study" link. A divider rule + more space replaces the old
     meta-row separation so the link reads as its own beat. */
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: none;
  text-wrap: pretty;
}
/* Secondary row beneath the industry — small brand name + tag
   sitting on the same baseline as a quiet metadata line. */
.hp2-wgrid__rail-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 28px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(10, 10, 15, 0.08);
}
.hp2-wgrid__rail-meta-row .hp2-wgrid__rail-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--hp2-dark);
  margin: 0;
}
.hp2-wgrid__rail-meta-row .hp2-wgrid__rail-tag {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  margin: 0;
  display: block;
}
.hp2-wgrid__rail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hp2-dark);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid var(--hp2-dark);
  transition: color 0.22s ease, border-color 0.22s ease, gap 0.22s ease;
}
.hp2-wgrid__rail-link:hover {
  color: var(--hp2-blue);
  border-bottom-color: var(--hp2-blue);
  gap: 10px;
}
.hp2-wgrid__rail-link svg {
  transition: transform 0.22s ease;
}
.hp2-wgrid__rail-link:hover svg {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .hp2-wgrid__rail-active,
  .hp2-wgrid__rail-thumb,
  .hp2-wgrid__rail-thumb-img,
  .hp2-wgrid__rail-bar-fill,
  .hp2-wgrid__rail-link,
  .hp2-wgrid__rail-link svg {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.hp2-wgrid__main {
  min-width: 0;  /* prevent inner grid from forcing the column wider */
}

/* Responsive — drop the rail on tablet/mobile so the cards get
   full width. Rail content stacks above the grid as a header. */
@media (max-width: 980px) {
  .hp2-wgrid__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hp2-wgrid__rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px 24px;
  }
  .hp2-wgrid__rail-eyebrow { margin: 0; }
  .hp2-wgrid__rail-nav { flex-direction: row; gap: 16px; }
  .hp2-wgrid__rail-meta {
    flex-basis: 100%;
    margin: 4px 0 0;
    padding: 16px 0 0;
  }
}

/* ============================================================
   CASE-STUDY MODAL — same-page lightbox.
   Card clicks (a[href*="/case-study/?case="]) are intercepted by
   hp2InitCaseModal(); the case-study page's main content is fetched
   and injected here, so there's zero data duplication and the full
   page still works for direct links / no-JS.
   ============================================================ */
html.hp2-csmodal-lock, html.hp2-csmodal-lock body { overflow: hidden !important; }
.hp2-csmodal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  opacity: 0;
  transition: opacity .32s ease;
}
.hp2-csmodal.is-open { display: block; }
.hp2-csmodal.is-visible { opacity: 1; }
.hp2-csmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hp2-csmodal__dialog {
  position: relative;
  max-width: 1080px;
  margin: clamp(16px, 4vh, 56px) auto;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border-radius: clamp(16px, 2vw, 24px);
  box-shadow: 0 60px 120px -30px rgba(10, 10, 15, 0.55);
  transform: translateY(28px) scale(.985);
  opacity: 0;
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), opacity .4s ease;
  /* Modern thin scrollbar (Firefox). */
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 10, 15, 0.22) transparent;
}
.hp2-csmodal.is-visible .hp2-csmodal__dialog { transform: none; opacity: 1; }
/* Modern scrollbar (WebKit / Chromium) — slim, rounded, inset from edge. */
.hp2-csmodal__dialog::-webkit-scrollbar { width: 12px; }
.hp2-csmodal__dialog::-webkit-scrollbar-track { background: transparent; }
.hp2-csmodal__dialog::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 15, 0.18);
  border: 4px solid #fff;
  border-radius: 999px;
  background-clip: padding-box;
}
.hp2-csmodal__dialog::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 15, 0.34);
  border: 4px solid #fff;
  background-clip: padding-box;
}
/* Floating close — a zero-height sticky bar so the button never overlays
   or hides the case content underneath it. */
.hp2-csmodal__bar {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.hp2-csmodal__close {
  pointer-events: auto;
  position: relative;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 15, 0.1);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hp2-dark);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px -8px rgba(10, 10, 15, 0.35);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.hp2-csmodal__close:hover {
  background: var(--hp2-dark);
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(10, 10, 15, 0.5);
}
.hp2-csmodal__close:focus-visible { outline: 2px solid var(--hp2-dark); outline-offset: 3px; }
/* Content fades in (and crossfades on case-to-case navigation). */
.hp2-csmodal__body { opacity: 0; transition: opacity .35s ease; }
.hp2-csmodal__body.is-ready { opacity: 1; }
/* Re-scope the case-study container width inside the modal (the
   #hp2-main width-lock from the standalone page isn't present here). */
.hp2-csmodal__body .container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}
/* Give the hero room so nothing hides under the floating close button. */
.hp2-csmodal__body .hp2-cs-hero { padding-top: clamp(56px, 6vw, 76px); }
/* Branded Coduzion loader — spinning ring + pulsing dot + wordmark. */
.hp2-csmodal__loading {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.hp2-csloader { position: relative; width: 54px; height: 54px; }
.hp2-csloader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(10, 10, 15, 0) 18%, var(--hp2-dark) 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: hp2-csspin .9s linear infinite;
}
.hp2-csloader__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--hp2-dark);
  animation: hp2-cspulse 1.1s ease-in-out infinite;
}
@keyframes hp2-csspin { to { transform: rotate(360deg); } }
@keyframes hp2-cspulse { 0%, 100% { transform: scale(.5); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
.hp2-csloader__label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp2-mid);
  font-weight: 600;
}
.hp2-csloader__label b { color: var(--hp2-dark); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .hp2-csmodal, .hp2-csmodal__dialog, .hp2-csmodal__body { transition: none; }
  .hp2-csmodal__dialog { transform: none; }
  .hp2-csloader__ring, .hp2-csloader__dot { animation-duration: 2.4s; }
}

/* ============================================================
   Blog V2 — /blog "Resources" listing in the hp2 design system.
   Editorial hero + dark free-report CTA banner (replaces the old
   newsletter) + category sidebar + grayscale post-card grid.
   ============================================================ */
.hp2-blog-page { background: #fff; }

.hp2-bloghero { padding: clamp(120px, 14vw, 180px) 0 clamp(24px, 3vw, 40px); }
.hp2-bloghero__eyebrow {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hp2-mid); margin-bottom: 16px;
}
.hp2-bloghero__h1 {
  font-size: clamp(34px, 5vw, 66px); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.03em; color: var(--hp2-dark); margin: 0; max-width: 16ch;
}
.hp2-bloghero__lead {
  margin: 20px 0 0; max-width: 620px; font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6; color: var(--hp2-mid);
}

.hp2-blogcta { padding: 8px 0 clamp(40px, 5vw, 64px); }
.hp2-blogcta__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background: #0a0a0f; color: #fff; border-radius: 24px;
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 52px);
}
.hp2-blogcta__h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: #fff; }
.hp2-blogcta__sub { margin: 8px 0 0; max-width: 520px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }
.hp2-blogcta__btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #0a0a0f; text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 13px 22px; border-radius: 999px; transition: transform 0.2s ease;
}
.hp2-blogcta__btn:hover { transform: translateY(-2px); }

.hp2-blogbody { padding: 0 0 clamp(60px, 8vw, 110px); }
.hp2-blogbody__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }

.hp2-blogcats { position: sticky; top: 96px; }
.hp2-blogcats__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hp2-mid); margin: 0 0 14px; }
.hp2-blogcats__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hp2-blogcats__link {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--hp2-mid); font-size: 14.5px; font-weight: 500; transition: background 0.18s ease, color 0.18s ease;
}
.hp2-blogcats__link:hover { background: #f4f4f0; color: var(--hp2-dark); }
.hp2-blogcats__link.is-active { background: var(--hp2-dark); color: #fff; }
.hp2-blogcats__count { font-size: 12px; opacity: 0.6; }

.hp2-blogcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.hp2-blogcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.hp2-blogcard:hover { transform: translateY(-4px); }
.hp2-blogcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; background: #e4e2db; }
.hp2-blogcard__img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.03); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease; }
.hp2-blogcard:hover .hp2-blogcard__img { transform: scale(1.05); filter: grayscale(0); }
.hp2-blogcard__img--placeholder { background: #e4e2db; }
.hp2-blogcard__tag {
  position: absolute; top: 14px; left: 14px; background: rgba(10, 10, 15, 0.82); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px;
}
.hp2-blogcard__body { padding: 16px 4px 4px; }
.hp2-blogcard__title { font-size: clamp(17px, 1.3vw, 20px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--hp2-dark); margin: 0 0 8px; }
.hp2-blogcard__meta { font-size: 13px; color: var(--hp2-mid); }

.hp2-blogpager { display: flex; align-items: center; gap: 18px; margin-top: clamp(32px, 4vw, 48px); }
.hp2-blogpager__btn { text-decoration: none; color: var(--hp2-dark); font-weight: 600; font-size: 14px; border: 1px solid #e2e2dc; border-radius: 999px; padding: 9px 18px; transition: border-color 0.2s ease; }
.hp2-blogpager__btn:hover { border-color: var(--hp2-dark); }
.hp2-blogpager__info { font-size: 13.5px; color: var(--hp2-mid); }
.hp2-blogempty { color: var(--hp2-mid); padding: 40px 0; }

@media (max-width: 860px) {
  .hp2-blogbody__grid { grid-template-columns: 1fr; }
  .hp2-blogcats { position: static; }
  .hp2-blogcats__list { flex-direction: row; flex-wrap: wrap; }
  .hp2-blogcards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hp2-blogcard, .hp2-blogcard__img { transition: none !important; }
  .hp2-blogcard:hover { transform: none; }
  .hp2-blogcard:hover .hp2-blogcard__img { transform: none; }
}

/* ============================================================
   §HOMEPAGE SPACING — unified vertical rhythm + grid gaps
   Scoped to .page-template-template-homepage-v2 (the CTA section is
   shared with work-v2 / services-v2 / blog-v2, so its spacing must
   not change there). Spacing only — no typography/colour/structure.

   Before this block the four content sections each had their own
   ad-hoc vertical padding (measured at 1440px):
     cases  clamp(64,7vw,104) / clamp(80,10vw,140)  -> 101 / 140 (asymmetric)
     sva    clamp(56,8vw,100)                        -> 100 / 100
     tes    clamp(40,5vw,68)  / clamp(36,4.5vw,60)   ->  68 /  60 (undersized)
     cta    clamp(72,9vw,120)                        -> 120 / 120 (largest)
   That produced uneven section-to-section gaps (168–240px) and a
   visibly cramped testimonials section. One symmetric clamp on all
   four gives a consistent rhythm at every width, mobile→1920. */
.page-template-template-homepage-v2 .hp2-cases,
.page-template-template-homepage-v2 .hp2-sva,
.page-template-template-homepage-v2 .hp2-tes,
.page-template-template-homepage-v2 .hp2-cta {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

/* The two 3-column card grids used slightly different gap clamps
   (service cards ...1.5vw,24px · review cards ...1.6vw,22px), so
   their columns drifted apart at ≥1100px (21.6 vs 22, then 24 vs 22
   at 1920). One shared gap scale keeps the card rows identical. */
.page-template-template-homepage-v2 .hp2-svcards,
.page-template-template-homepage-v2 .hp2-tes__wall {
  gap: clamp(16px, 2vw, 24px);
}

/* ============================================================
   §HOMEPAGE A11Y — tap targets, contrast, anchor clearance
   Scoped to .page-template-template-homepage-v2 because the CTA
   block is shared with work-v2 and hp2-footer with every v2 page;
   this pass was commissioned for the homepage only.
   ============================================================ */

/* Fineprint was rgba(10,10,15,.42/.48) on white — ~2.8:1, below
   WCAG AA for 12.5-13px text. 0.62 keeps the muted tone at ~5.6:1. */
.page-template-template-homepage-v2 .hp2-cta__fineprint {
  color: rgba(10, 10, 15, 0.62);
}
.page-template-template-homepage-v2 .hp2-cta__fineprint--intro {
  color: rgba(10, 10, 15, 0.62);
}

/* More sub-AA muted text (measured on solid backgrounds):
   review date 2.82:1, field label 3.47:1 (the floating label is the
   field's only affordance), footer muted whites 4.0:1. */
.page-template-template-homepage-v2 .hp2-tes__date { color: #767673; }
.page-template-template-homepage-v2 .hp2-cta__field label { color: rgba(10, 10, 15, 0.6); }
/* GLOBAL (all v2 pages) — footer muted whites were 4.0:1, below AA. */
.hp2-footer__link-label,
.hp2-footer__copyright,
.hp2-footer__hub-sub { color: rgba(255, 255, 255, 0.56); }

/* Nav link legibility over the video hero shouldn't depend on the
   current frame — add a fixed top band to the existing scrim (the
   bottom band for the ticker is preserved). */
.page-template-template-homepage-v2 .hp2-video-hero__scrim {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 140px),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 10%, rgba(0,0,0,0) 22%);
}

/* In-page anchors (nav "Get in Touch" → #hp2-cta) must clear the
   fixed nav, which is 68-130px tall depending on width — without
   this the frosted bar covers the section heading after the jump. */
.page-template-template-homepage-v2 #hp2-top,
.page-template-template-homepage-v2 #hp2-cases,
.page-template-template-homepage-v2 #hp2-sva,
.page-template-template-homepage-v2 #hp2-tes,
.page-template-template-homepage-v2 #hp2-cta {
  scroll-margin-top: 96px;
}
span.hp2-vt__dur {
    display: none;
}
/* Container for video testimonials */
.hp2-tes .hp2-vt__card {
  position: relative;
  overflow: hidden;
}

/* Play button covering entire video frame */
.hp2-tes .hp2-vt__card .hp2-vt__play {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: background 0.3s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0px;
}

/* Hover effect - darker overlay on hover */
.hp2-tes .hp2-vt__card .hp2-vt__play:hover {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Play icon styling */
.hp2-tes .hp2-vt__card .hp2-vt__play-icon {
  width: 3.5rem !important;
  height: 3.5rem !important;
  color: white !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
}

/* Hide play ring on full-frame button */
.hp2-tes .hp2-vt__card .hp2-vt__play-ring {
  display: none !important;
}
/* Touch-tablet widths (769-1024) fall outside the ≤768 mobile block,
   so the tap-height rules live at ≤1024 — iPads inherit them too. */
@media (max-width: 1024px) {
  /* mailto/tel fineprint links measured 18px tall — pad the hit area
     without shifting the text (negative margin absorbs the padding). */
  .page-template-template-homepage-v2 .hp2-cta__fineprint--intro a {
    display: inline-block;
    padding: 13px 2px;
    margin: -13px -2px;
  }

  /* hp2-footer big links measured 29px, legal/social links 26px, and
     the TikTok link 43px wide. inline-flex + min-height centers the
     text in a ≥44px hit box; 3px inline padding clears 44px width. */
  /* GLOBAL (all v2 pages) */
  .hp2-footer__link-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hp2-footer__legal a,
  .hp2-footer__social a {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 3px;
  }

  /* GLOBAL — desktop-style nav link row at 769-1024 measured 38px tall. */
  .hp2-nav__links li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The CTA pill only got its 44px floor in the <=768 block, so on
     touch tablets (769-1024) it fell back to the desktop padding and
     measured 43px — 1px under the AA target. */
  .hp2-nav__cta {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  /* Deeper anchor offset: the nav carries the second links row here. */
  .page-template-template-homepage-v2 #hp2-top,
  .page-template-template-homepage-v2 #hp2-cases,
  .page-template-template-homepage-v2 #hp2-sva,
  .page-template-template-homepage-v2 #hp2-tes,
  .page-template-template-homepage-v2 #hp2-cta {
    scroll-margin-top: 130px;
  }
}

/* ≤430: logo (180px) + CTA no longer share the first nav row, which
   stacked the fixed bar to THREE rows (~147px instead of 113px). On the
   homepage that only cost space, but inner pages open with a text hero
   directly under the fixed bar, so the extra row covered the <h1> on
   /work/ (19px) and /blog/ (27px). Pages with a long CTA label
   ("Get my free report", "Start a Project") wrap earliest, which is why
   this was raised from the original 360px to 430px — a narrower logo +
   tighter gap keeps every v2 page on two rows across all phone widths. */
@media (max-width: 430px) {
  /* GLOBAL (all v2 pages) */
  .hp2-nav__logo-img,
  .hp2-nav__logo img,
  .hp2-nav .custom-logo {
    max-width: 140px !important;
  }
  .hp2-nav__inner { gap: 12px; }
}

/* Mobile/tablet ≤900: the hidden success card was position:static +
   min-height:200px while only visibility:hidden — it reserved ~200px
   of blank space between the form and the footer before any submit.
   display:none keeps it out of flow until .is-shown (hard cut instead
   of the desktop fade; matches the reduced-motion behaviour). */
@media (max-width: 900px) {
  .page-template-template-homepage-v2 .hp2-cta__success {
    display: none;
    min-height: 0;
  }
  .page-template-template-homepage-v2 .hp2-cta__success.is-shown {
    display: flex;
    min-height: 200px;
  }
}

/* ============================================================
   §V2 FOOTER (GLOBAL) — mobile centering
   On small screens the polaroid stack and the bottom bar
   (copyright · legal menu · social menu) hugged the left edge;
   they now center. Applies to every v2 page — hp2-footer.php is a
   shared partial, so this must not be homepage-only.
   ============================================================ */
@media (max-width: 960px) {
  .hp2-footer__brand {
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .hp2-footer__bottom {
    align-items: center;
    text-align: center;
  }
  .hp2-footer__bottom-left {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .hp2-footer__legal,
  .hp2-footer__social {
    justify-content: center;
  }
}
h2.hp2-cta__h2.hp2-will-animate.hp2-animated {
    line-height: 55px !important;
    padding-bottom: 20px;
}
.hp2-will-animate.hp2-animated h2.hp2-tes__h2
 {
    padding-bottom: 0px;
    line-height: 55px !important;
}
.page-template-template-homepage-v2 .hp2-tes{
  padding-bottom: clamp(28px, 3.5vw, 44px);  
  padding-top: clamp(64px, 4vw, 112px);
}

.page-template-template-homepage-v2 .hp2-cta {
    padding-top: clamp(64px, 4vw, 112px);
    padding-bottom: clamp(0px, 0vw, 0px);
}
.hp2-cases .container .hp2-cases__footer {
    margin-top: clamp(60px, 4vw, 110px);
    padding-bottom: clamp(60px, 4vw, 110px);
}
.page-template-template-homepage-v2 .hp2-cases{
    padding-top: clamp(64px, 4vw, 112px);
    padding-bottom: 0;
}
h2.hp2-cases__h2.hp2-will-animate.hp2-animated {
    line-height: 65px !important;
    padding-bottom: 21px;
}
.page-template-template-homepage-v2 .hp2-sva {
    padding-top: 0px;
    padding-bottom: 0px;
    border-top: 0px;
    border-bottom: 0px;
}
@media (max-width: 900px) {
  .page-template-template-homepage-v2 .hp2-cta__fineprint{
    padding: 10px 0 20px;
        margin-top: 0 !important;
    }
  .page-template-template-homepage-v2 .hp2-svcards, .page-template-template-homepage-v2 .hp2-tes__wall {
      gap: clamp(22px, 2vw, 24px);
  }
  #hp2-cta .container .hp2-cta__grid {
        gap: 0px;
    }
}
@media (max-width: 640px) {
  .page-template-template-homepage-v2 .hp2-cta__fineprint{
    text-align: center;
  }
  .hp2-footer__bottom-left{
    gap: clamp(3px, 2vw, 0px);
  }
  .page-template-template-homepage-v2 .hp2-sva {
      padding-top: 0px;
      padding-bottom: clamp(44px, 4vw, 112px);
  }
  .page-template-template-homepage-v2 .hp2-tes{
      padding-top: 0px;
  }
  .page-template-template-homepage-v2 .hp2-cases {
    padding-top: clamp(44px, 4vw, 112px);
    padding-bottom: 0;
}
h2.hp2-cases__h2.hp2-will-animate.hp2-animated {
    line-height: 46px !important;
    padding-bottom: 21px;
}
}
@media (max-width: 768px) {
  .hp2-cta__fineprint--intro {
      margin-top: 0px !important;
      font-size: 13px;
      color: rgba(10, 10, 15, .48);
      max-width: 460px;
      padding-top: 20px !important;
  }
}
@media (max-width: 1024px) {
  h2.hp2-cta__h2.hp2-will-animate.hp2-animated {
      line-height: 44px !important;
  }
  .hp2-will-animate.hp2-animated h2.hp2-tes__h2
   {
      line-height: 44px !important;
  }
  h2.hp2-cases__h2.hp2-will-animate.hp2-animated {
    line-height: 44px !important;
  }
  .page-template-template-homepage-v2 .hp2-cta {
      padding-top: clamp(50px, 4vw, 112px);
      padding-bottom: clamp(0px, 0vw, 0px);
  }
}
/* ============================================================
   §SERVICES + CONTACT SPACING — match the homepage rhythm
   Appended after the hand-written overrides above so it cannot
   disturb them; these selectors are page-specific (hp2-svc*, hp2-b*,
   hp2-cfaq) and do not overlap the homepage rules there.

   Measured before (1440px):
     services  svchero 112/86 · svcvideo 115/115 · svccap 72/72
               svcmod 128/96 · svcproc 128/128 · svcfaq 128/128
               svccta 173/173
     contact   bcontact 43/43 · bproof 96/96 · cfaq 120/120
   An 87px spread on services (two sections asymmetric, the closing CTA
   half again as tall as everything else) and a hero on contact at barely
   a third of the page rhythm. Both now use the homepage's symmetric
   clamp(64px, 8vw, 112px): 64 mobile → 80 @1000 → 96 @1200 → 112 @1440+.
   ============================================================ */
.hp2-svchero,
.hp2-svcvideo,
.hp2-svcmod,
.hp2-svcproc,
.hp2-svcfaq,
.hp2-svccta,
.hp2-bcontact,
.hp2-cfaq {
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

/* The two logo-marquee strips are the SAME shared component
   (template-parts/hp2-logo-marquee.php) but carried different padding
   (services 72/72 vs contact 96/96). A thin wordmark strip does not need
   the full section rhythm, so both get one lighter, shared value. */
.hp2-svccap,
.hp2-bproof {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.page-template-template-contact-v2 .hp2-bcontact{
  padding-bottom: clamp(64px, 4vw, 112px);
}
.page-template-template-contact-v2 .hp2-bproof{
      padding-top: 0px;
      background: #ffffff;
      border-top: 0px;
      padding-bottom: clamp(28px, 3.5vw, 44px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
}
.page-template-template-contact-v2 .hp2-tes__logos.hp2-will-animate.hp2-animated {
    margin: 0;
}
.page-template-template-contact-v2 .hp2-tes__logo img.hp2-tes__logo-img--xwide {
    height: clamp(15px, 1.7vw, 23px);
}
.page-template-template-contact-v2 .hp2-cfaq {
    padding-top: 0px;
    padding-bottom: clamp(64px, 4vw, 112px);
}
.page-template-template-contact-v2 h2.hp2-cfaq__h {
    line-height: 32px !important;
    margin-bottom: 28px;
    border-top: none;
    padding-top: clamp(28px, 3.5vw, 44px);
}
.page-template-template-contact-v2 .hp2-cfaq .container {
    padding-top: 0;
}
/* Inner-page hero clearance under the fixed 2-row mobile nav.
   .hp2-whero and .hp2-bloghero place their <h1> right at the section's
   padding edge (no eyebrow above it), so their own top padding IS the
   clearance. The mobile bar is 113–125px tall, which left the blog h1
   5px under it and work with only 3px to spare. 140px clears both with
   breathing room. Other v2 heroes (services, contact, about) already
   start their content 150px+ down and are deliberately not touched —
   forcing this value on them would push their headings too far. */
@media (max-width: 768px) {
  .hp2-whero,
  .hp2-bloghero,
  .hp2-cs-hero {
    padding-top: 140px;
  }
  /* Service-detail pages open with a breadcrumb strip that had NO top
     padding, so it sat at y=0 completely beneath the fixed nav — a
     pre-existing bug (62px hidden even with the old single-row bar),
     just made more obvious by the taller two-row mobile nav. */
  .hp2-sd__crumb-wrap {
    padding-top: 136px;
  }
}

/* Services — mobile/touch tap targets (≤1024 so touch tablets inherit,
   matching the homepage's approach). Measured at 375px:
     .hp2-svc__poly-tag   154x31  ("IronEdge · Magento 2" case link)
     .hp2-svcmod__cta     145x35  ("Talk about a build")
     .hp2-svccta__fineprint a  157x19 (mailto/tel)
   The fineprint links use the same padding + negative-margin trick as
   the homepage's .hp2-cta__fineprint--intro a, so the hit area grows
   without shifting the text baseline. */
@media (max-width: 1024px) {
  .hp2-svc__poly-tag,
  .hp2-svcmod__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hp2-svccta__fineprint a {
    display: inline-block;
    padding: 13px 2px;
    margin: -13px -2px;
  }
}

/* ≤360: the ≤430 two-row lock above is still over budget on the very
   narrowest phones. At 320px the nav has 280px of usable width
   (320 − 2×20 gutter) and the longest CTA labels in the site blow it:
     logo 140 + gap 12 + "Start a Project"     132 = 284  (4px over)
     logo 140 + gap 12 + "Get my free report"  159 = 311  (31px over)
   That wrapped the bar to a THIRD row (171px tall) and buried the <h1>
   on /work/, /blog/ and /services/ behind the frosted nav. Trimming the
   logo and the CTA pill a little further keeps every v2 page — whatever
   its CTA label — on two rows right down to 320px. */
@media (max-width: 360px) {
  .hp2-nav__logo-img,
  .hp2-nav__logo img,
  .hp2-nav .custom-logo {
    max-width: 120px !important;
  }
  .hp2-nav__inner { gap: 10px; }
  .hp2-nav__cta {
    font-size: 12px;
    padding: 9px 12px;
  }
}

/* ============================================================
   §POST-DEPLOY REVIEW FIXES (about / work / blog)
   ============================================================ */

/* ABOUT — founder polaroids clipped the first card's caption.
   The two cards deliberately overlap (fanned-deck look), but
   .hp2-ahero__polaroid--right carried z-index:2, so it painted OVER
   the left card — burying the end of "Chirag Bhavsar" / "Founder & CEO".
   Measured coverage: 6px @320, 7px @375, 8px @430, 23px @600-768.
   Flipping the stacking order keeps the identical layout/overlap but
   puts the left card (and its caption) on top, so no text is covered.
   The right card's own caption is centred well clear of the left card,
   so it stays fully visible too. */
.hp2-ahero__polaroid--left  { z-index: 2; }
.hp2-ahero__polaroid--right { z-index: 1; }

/* Remaining sub-44px touch targets on the pages reviewed after deploy.
   Same ≤1024 scoping as every other tap fix in this file. */
@media (max-width: 1024px) {
  /* Inline mailto/tel inside fineprint paragraphs — padded hit area,
     negative margin so the text baseline does not move.
     (work uses .hp2-cta__fineprint; the homepage variant --intro and
     services' .hp2-svccta__fineprint are already handled above.) */
  .hp2-cta__fineprint a {
    display: inline-block;
    padding: 13px 2px;
    margin: -13px -2px;
  }
  /* Standalone links/buttons: 30px (work rail), 24px (about phone),
     41px (blog category pills), 42px (blog pager). */
  .hp2-wgrid__rail-link,
  .hp2-aclose__link,
  .hp2-blogcats__link,
  .hp2-blogpager__btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.hp2-main p.hp2-svccta__fineprint{
  margin: 44px 0 0;
}