/* ============================================================
   HEEELP — Home v3
   Palette derived FROM the existing logo (warm terracotta sheep,
   cream wool, umber wordmark) instead of fighting it. The "sea"
   half of the brief (sheep overboard, shouting heeelp, rescued)
   shows up as a secondary deep-teal accent — wave dividers, a
   life-ring signature motif, footer — never as the dominant hue.
   Corporate execution: generous whitespace, restrained motion,
   one recurring signature shape (the life ring) instead of scattered
   decoration.
   ============================================================ */

:root {
  --cream: #fbf3e4;
  --cream-deep: #f2e6cd;
  --terracotta: #e8935f;
  --terracotta-deep: #c96f3e;
  --umber: #6b4f35;
  --umber-deep: #3d2c1c;
  --sea: #1f6f78;
  --sea-deep: #123338;
  --sand: #d9c9a3;
  --white: #ffffff;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 8px;
  --shadow-soft: 0 10px 32px rgba(61, 44, 28, 0.12);
  --max-width: 1180px;
}

.hp-v2 * { box-sizing: border-box; }
.hp-v2 {
  font-family: var(--font-body);
  color: var(--umber-deep);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
.hp-v2 a { color: inherit; text-decoration: none; }
.hp-v2 img { max-width: 100%; display: block; }
.hp-v2 .container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }
.hp-v2 .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* -------------------- Loader -------------------- */
#loader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
#loader .hp-loader-sheep {
  width: 72px; height: auto;
  animation: hp-loader-bounce 1s ease-in-out infinite;
}
@keyframes hp-loader-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  #loader .hp-loader-sheep { animation: none; }
}

/* -------------------- Header -------------------- */
.hp-v2-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 243, 228, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(61, 44, 28, 0.08);
}
.hp-v2-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; padding-bottom: 12px;
  min-height: 76px;
}
.hp-v2-brand { display: flex; align-items: center; }
.hp-v2-brand img {
  height: 66px;
  width: auto;
}
.hp-v2-nav { display: flex; align-items: center; gap: 30px; }
.hp-v2-nav a {
  font-size: 0.95rem; font-weight: 600; color: var(--umber-deep);
  opacity: 0.82; transition: opacity 0.15s ease;
}
.hp-v2-nav a:hover { opacity: 1; }
.hp-v2-nav a.active { opacity: 1; color: var(--terracotta-deep); }

.hp-v2-lang {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; color: var(--umber-deep);
}
.hp-v2-lang .hp-switch { position: relative; display: inline-block; width: 38px; height: 20px; }
.hp-v2-lang .hp-switch input { opacity: 0; width: 0; height: 0; }
.hp-v2-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--sand); border-radius: 999px; transition: 0.2s;
}
.hp-v2-slider::before {
  content: ""; position: absolute; height: 14px; width: 14px;
  left: 3px; bottom: 3px; background: var(--white); border-radius: 50%; transition: 0.2s;
}
.hp-v2-lang input:checked + .hp-v2-slider { background: var(--sea); }
.hp-v2-lang input:checked + .hp-v2-slider::before { transform: translateX(18px); }

/* -------------------- Mobile menu toggle -------------------- */
.hp-v2-menu-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; border: none; background: transparent; cursor: pointer;
  flex: none;
}
.hp-v2-menu-toggle span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--umber-deep); transition: transform 0.2s ease, opacity 0.2s ease;
}
.hp-v2-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-v2-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.hp-v2-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .hp-v2-menu-toggle { display: flex; }
  .hp-v2-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--cream); padding: 10px 28px 24px;
    border-bottom: 1px solid rgba(61, 44, 28, 0.1);
    box-shadow: 0 16px 24px rgba(61, 44, 28, 0.1);
  }
  .hp-v2-nav.is-open { display: flex; }
  .hp-v2-nav a { display: block; padding: 10px 0; width: 100%; }
  .hp-v2-lang { margin-top: 10px; }
}

/* -------------------- Hero -------------------- */
.hp-v2-hero { position: relative; overflow: hidden; padding: 84px 0 60px; }

.hp-v2-hero .container {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}

.hp-v2-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--terracotta-deep);
  margin-bottom: 18px;
}
.hp-v2-eyebrow .ring { width: 14px; height: 14px; flex: none; }

.hp-v2-hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.14;
  margin: 0 0 22px; color: var(--umber-deep);
}
.hp-v2-hero h1 .accent { color: var(--terracotta-deep); }

.hp-v2-hero p.lead {
  font-size: 1.08rem; line-height: 1.62; color: var(--umber);
  max-width: 46ch; margin: 0 0 32px;
}

.hp-v2-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.hp-v2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hp-v2-btn-primary { background: var(--terracotta); color: var(--white); }
.hp-v2-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(232, 147, 95, 0.4); }
.hp-v2-btn-ghost { background: transparent; border-color: var(--umber); color: var(--umber-deep); }
.hp-v2-btn-ghost:hover { border-color: var(--terracotta-deep); color: var(--terracotta-deep); }

.hp-v2-ring-float {
  animation: hp-bob 4s ease-in-out infinite;
}
@keyframes hp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-v2-ring-float { animation: none; }
}

.hp-v2-hero-wave { position: relative; z-index: 1; line-height: 0; margin-top: -1px; }
.hp-v2-hero-wave svg { width: 100%; height: auto; display: block; }

/* Hero illustration: animated multi-agent network (nodes pulse, links flow) */
.hp-v2-hero-art {
  position: relative;
  height: 420px;
  display: flex; align-items: center; justify-content: center;
}
.hp-v2-hero-art svg { width: 100%; height: 100%; }

/* Shared agent-network animation (hero illustration + parked showcase below) */
.hp-v2-agent-links path {
  stroke-dasharray: 8 10;
  animation: hp-agent-flow 1.6s linear infinite;
}
@keyframes hp-agent-flow { to { stroke-dashoffset: -180; } }
/* transform-origin set in SVG user-space coordinates (matching each
   node's cx/cy) rather than relying on transform-box:fill-box, which
   has inconsistent support for nested <g> elements across browsers. */
.hp-v2-agent-node-1 { animation: hp-agent-pulse 2.6s ease-in-out infinite; transform-origin: 570px 225px; }
.hp-v2-agent-node-2 { animation: hp-agent-pulse 3s ease-in-out infinite 0.3s; transform-origin: 510px 110px; }
.hp-v2-agent-node-3 { animation: hp-agent-pulse 2.2s ease-in-out infinite 0.6s; transform-origin: 400px 60px; }
.hp-v2-agent-node-4 { animation: hp-agent-pulse 3.2s ease-in-out infinite 0.9s; transform-origin: 290px 110px; }
.hp-v2-agent-node-5 { animation: hp-agent-pulse 2.4s ease-in-out infinite 1.2s; transform-origin: 230px 225px; }
.hp-v2-agent-node-6 { animation: hp-agent-pulse 2.9s ease-in-out infinite 1.5s; transform-origin: 290px 340px; }
.hp-v2-agent-node-7 { animation: hp-agent-pulse 2.5s ease-in-out infinite 0.15s; transform-origin: 400px 390px; }
.hp-v2-agent-node-8 { animation: hp-agent-pulse 3.1s ease-in-out infinite 0.45s; transform-origin: 510px 340px; }
.hp-v2-agent-node-central { animation: hp-agent-pulse-central 2.2s ease-in-out infinite; transform-origin: 400px 225px; }
.hp-v2-agent-parallax { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes hp-agent-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.55); opacity: 1; }
}
@keyframes hp-agent-pulse-central {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-v2-agent-links path, .hp-v2-agent-node-1, .hp-v2-agent-node-2,
  .hp-v2-agent-node-3, .hp-v2-agent-node-4, .hp-v2-agent-node-5,
  .hp-v2-agent-node-6, .hp-v2-agent-node-7, .hp-v2-agent-node-8,
  .hp-v2-agent-node-central { animation: none; }
  .hp-v2-agent-parallax { transition: none; }
}

/* -------------------- GameBrains showcase (parked, kept for later) -------------------- */
.hp-v2-showcase { padding: 12px 0 84px; background: var(--sea-deep); }
.hp-v2-section-head-center { max-width: 660px; margin-left: auto; margin-right: auto; text-align: center; }
.hp-v2-showcase .kicker { color: var(--terracotta); }
.hp-v2-showcase h2 { color: var(--white); }
.hp-v2-showcase p { color: rgba(251, 243, 228, 0.78); }
.hp-v2-video-frame {
  max-width: 900px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.hp-v2-video-frame video { width: 100%; height: auto; display: block; }
.hp-v2-showcase-graphic {
  aspect-ratio: 16 / 9; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #163c42 0%, var(--sea) 100%);
  border: 1px solid rgba(251, 243, 228, 0.12);
}
.hp-v2-showcase-graphic svg { width: 100%; height: 100%; }
@media (max-width: 640px) {
  .hp-v2-showcase { padding: 8px 0 56px; }
}

/* -------------------- Stats strip -------------------- */
.hp-v2-stats { background: var(--sea-deep); }
.hp-v2-stats .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding: 40px 28px;
}
.hp-v2-stat { text-align: center; }
.hp-v2-stat .num {
  font-family: var(--font-display); font-weight: 600; font-size: 2rem;
  color: var(--white); display: block;
}
.hp-v2-stat .label { font-size: 0.84rem; color: rgba(251, 243, 228, 0.72); margin-top: 4px; }

/* -------------------- Services -------------------- */
.hp-v2-section { padding: 84px 0; }
.hp-v2-section-head { max-width: 640px; margin: 0 0 46px; }
.hp-v2-section-head .kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sea); margin-bottom: 10px; display: block;
}
.hp-v2-section-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--umber-deep); margin: 0 0 12px;
}
.hp-v2-section-head p { color: var(--umber); font-size: 1.03rem; line-height: 1.6; margin: 0; }

.hp-v2-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.hp-v2-service-card {
  background: var(--white);
  border: 1px solid rgba(61, 44, 28, 0.08);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hp-v2-service-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--terracotta);
}
.hp-v2-service-card .icon-chip {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.hp-v2-service-card .icon-chip img { width: 26px; height: 26px; }
.hp-v2-service-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  color: var(--umber-deep); margin: 0 0 8px;
}
.hp-v2-service-card p { font-size: 0.9rem; color: var(--umber); line-height: 1.55; margin: 0; }

/* -------------------- Approach band -------------------- */
.hp-v2-band { background: var(--cream-deep); }
.hp-v2-band .container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 84px 28px;
}
.hp-v2-band h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--umber-deep); margin: 0 0 18px;
}
.hp-v2-band p { color: var(--umber); line-height: 1.65; font-size: 1rem; }
.hp-v2-leaf-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.hp-v2-leaf-list li {
  display: flex; gap: 12px; align-items: flex-start; color: var(--umber-deep); font-size: 0.96rem;
}
.hp-v2-leaf-list li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }

.hp-v2-band-visual {
  background: var(--white); border-radius: 12px; border: 1px solid rgba(61, 44, 28, 0.08);
  padding: 40px; box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
}
.hp-v2-band-visual img { width: 100%; max-width: 220px; }

/* -------------------- CTA -------------------- */
.hp-v2-cta {
  background: var(--sea-deep);
  color: var(--cream);
  text-align: center;
  padding: 76px 0;
  position: relative;
  overflow: hidden;
}
.hp-v2-cta h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 16px; color: var(--white);
}
.hp-v2-cta p { color: rgba(251, 243, 228, 0.82); max-width: 52ch; margin: 0 auto 30px; line-height: 1.6; }

/* Rescued-sheep scene above the CTA heading: a visible scrolling wave
   strip (two layered, seamlessly-looping scalloped bands) with the
   floating mascot sitting on top of it. */
.hp-v2-cta-sea {
  position: relative;
  height: 140px;
  display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 8px;
}
.hp-v2-cta-sheep { width: 100px; margin-bottom: 22px; position: relative; z-index: 2; }
.hp-v2-cta-water {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 210px; height: 26px; border-radius: 999px; overflow: hidden;
  background: var(--sea-deep);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.hp-v2-cta-wave {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 0%, var(--sea) 0 60%, transparent 61%);
}
.hp-v2-cta-wave-back {
  opacity: 0.55;
  background-size: 34px 34px;
  background-position: 0 -8px;
  background-repeat: repeat-x;
  animation: hp-wave-scroll-a 4.5s linear infinite;
}
.hp-v2-cta-wave-front {
  opacity: 0.9;
  background-size: 24px 24px;
  background-position: 0 -3px;
  background-repeat: repeat-x;
  animation: hp-wave-scroll-b 2.6s linear infinite reverse;
}
@keyframes hp-wave-scroll-a { to { background-position: -34px -8px; } }
@keyframes hp-wave-scroll-b { to { background-position: -24px -3px; } }
@media (prefers-reduced-motion: reduce) {
  .hp-v2-cta-wave-back, .hp-v2-cta-wave-front { animation: none; }
}
@media (max-width: 640px) {
  .hp-v2-cta-sea { height: 108px; }
  .hp-v2-cta-sheep { width: 76px; margin-bottom: 16px; }
  .hp-v2-cta-water { width: 160px; height: 20px; bottom: 6px; }
}

/* -------------------- Floating contact trigger -------------------- */
.hp-v2-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: var(--terracotta); border: none;
  border-radius: 999px; padding: 14px 22px 14px 14px;
  box-shadow: 0 12px 28px rgba(232, 147, 95, 0.45);
  cursor: pointer; transition: transform 0.15s ease;
}
.hp-v2-fab:hover { transform: translateY(-3px); }
.hp-v2-fab svg { width: 26px; height: 26px; }
.hp-v2-fab span { font-weight: 700; font-size: 0.88rem; color: var(--white); }

/* -------------------- Footer -------------------- */
.hp-v2-footer { background: var(--umber-deep); color: rgba(251, 243, 228, 0.82); padding: 56px 0 96px; }
.hp-v2-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.hp-v2-footer-logo {
  display: block; width: 210px; height: 97px; margin-bottom: 12px;
  background-color: var(--sea);
  -webkit-mask: url(/images/logo.png) left center/contain no-repeat;
  mask: url(/images/logo.png) left center/contain no-repeat;
}
.hp-v2-footer-brand p { max-width: 210px !important; }
.hp-v2-footer h4 {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 14px;
}
.hp-v2-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hp-v2-footer a { font-size: 0.9rem; opacity: 0.86; }
.hp-v2-footer a:hover { opacity: 1; text-decoration: underline; }
.hp-v2-footer-services li a { display: flex; align-items: center; gap: 8px; }
.hp-v2-footer-services li img { width: 16px; height: 16px; opacity: 0.9; filter: brightness(0) invert(1); }
.hp-v2-footer-bottom {
  max-width: var(--max-width); margin: 28px auto 0; padding: 18px 28px 0;
  border-top: 1px solid rgba(251, 243, 228, 0.14);
  font-size: 0.82rem; opacity: 0.7;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.hp-v2-footer-stack-item { display: block; margin-top: 14px; }
.hp-v2-eu-badge-img { height: 48px; width: auto; border-radius: 4px; }

/* Deliberately unobtrusive: a hidden-in-plain-sight link to the old site. */
.hp-v2-footer-classic { font-size: 0.72rem; opacity: 0.4; transition: opacity 0.15s ease; }
.hp-v2-footer-classic:hover { opacity: 0.85; text-decoration: underline; }

/* Reusable floating-sheep mascot (eyes track the cursor, bobs gently). */
.hp-v2-floating-sheep {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  animation: hp-bob-small 3s ease-in-out infinite;
}
.hp-v2-floating-sheep img { width: 100%; height: auto; display: block; }
.hp-sheep-eye {
  position: absolute;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Coordinates derived by sampling the source PNG for its two white eye
   blobs, not eyeballed - the image's face is small and off-center. */
.hp-sheep-eye-1 { left: 69.7%; top: 48%; width: 7px; height: 7px; }
.hp-sheep-eye-2 { left: 65.8%; top: 31.2%; width: 6px; height: 6px; }
.hp-sheep-eye-1 .hp-sheep-pupil { width: 4.2px; height: 4.2px; }
.hp-sheep-eye-2 .hp-sheep-pupil { width: 3.5px; height: 3.5px; }
.hp-sheep-pupil {
  display: block; border-radius: 50%;
  background: #3d2c1c;
  transition: transform 0.06s linear;
}
@keyframes hp-bob-small {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-v2-floating-sheep { animation: none; }
}

@media (max-width: 640px) {
  .hp-v2-footer { padding-bottom: 108px; }
}

/* -------------------- Contact modal -------------------- */
.hp-v2 .hp-formarea {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(18, 51, 56, 0.6);
  padding: 40px 24px; overflow-y: auto;
}
.hp-v2 .hp-formarea.modal-close { animation: hp-fade-out 0.2s ease forwards; }
@keyframes hp-fade-out { to { opacity: 0; } }

.hp-v2-modal-inner {
  position: relative; max-width: 460px; margin: 0 auto;
  background: var(--white); border-radius: 14px; padding: 36px 32px 28px;
  box-shadow: 0 24px 60px rgba(18, 51, 56, 0.4);
}
.hp-v2 .hp-closebtn {
  position: absolute; top: 14px; right: 14px; border: none; background: transparent;
  cursor: pointer; padding: 6px; opacity: 0.6;
}
.hp-v2 .hp-closebtn:hover { opacity: 1; }
.hp-v2 .hp-closebtn img { width: 16px; height: 16px; }

.hp-v2 #at-form h3 {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--umber-deep); margin: 0 0 4px;
}
.hp-v2 .hp-form-group { margin-bottom: 16px; position: relative; }
.hp-v2 .hp-uploadfile {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px dashed var(--sand); border-radius: 8px; padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s ease;
}
.hp-v2 .hp-uploadfile:hover { border-color: var(--terracotta); }
.hp-v2 .hp-uploadfile input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hp-v2 .hp-fileicon { width: 22px; height: 22px; }
.hp-v2 .hp-uploadcontent span { display: block; font-size: 0.78rem; color: var(--umber); }
.hp-v2 .hp-form-control {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--sand); border-radius: 8px;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--umber-deep); background: var(--cream);
}
.hp-v2 .hp-form-control:focus { outline: none; border-color: var(--terracotta); background: var(--white); }
.hp-v2 .hp-placeholdertext { font-size: 0.78rem; color: var(--umber); margin-top: 4px; display: block; }
.hp-v2 .hp-placeholdertext em { font-style: normal; color: var(--terracotta-deep); }
.hp-v2 textarea.hp-form-control { min-height: 90px; resize: vertical; }
.hp-v2 .file-outer-wrapper {
  display: none; align-items: center; gap: 10px; background: var(--cream-deep);
  border-radius: 8px; padding: 10px 14px; margin-top: 4px;
}
.hp-v2 .file-outer-wrapper img { width: 22px; height: 22px; }
.hp-v2 .file-outer-wrapper span { flex: 1; font-size: 0.85rem; color: var(--umber-deep); }
.hp-v2 .file-outer-wrapper svg { cursor: pointer; stroke: var(--umber); width: 18px; height: 18px; }
.hp-v2 .error-message { color: #b3452f; font-size: 0.78rem; margin-top: 4px; }
.hp-v2 .d-none { display: none !important; }
.hp-v2 #at-form .hp-btn {
  width: 100%; padding: 14px; border: none; border-radius: 999px;
  background: var(--terracotta); color: var(--white); font-weight: 700; font-size: 0.98rem;
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.hp-v2 #at-form .hp-btn:hover { transform: translateY(-2px); background: var(--terracotta-deep); }

/* -------------------- Founder section (About page) -------------------- */
.hp-v2-founder-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 44px;
  align-items: center;
}
.hp-v2-founder-photo {
  width: 220px; height: 220px; border-radius: 50%;
  overflow: hidden; background: var(--cream-deep);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-soft);
}
.hp-v2-founder-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.hp-v2-founder-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--terracotta) 0%, var(--terracotta-deep) 100%);
}
.hp-v2-founder-photo-fallback::after {
  content: "NP";
  font-family: var(--font-display); font-weight: 600;
  font-size: 3rem; color: var(--white);
}

/* -------------------- Legal text (About: privacy/terms) -------------------- */
.hp-v2-legal { max-width: 780px; }
.hp-v2-legal h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--umber-deep); margin: 0 0 20px;
}
.hp-v2-legal p {
  color: var(--umber); line-height: 1.75; font-size: 0.98rem;
}
.hp-v2-legal p strong { color: var(--umber-deep); }

@media (max-width: 640px) {
  .hp-v2-founder-grid { grid-template-columns: 1fr; text-align: center; }
  .hp-v2-founder-photo { margin: 0 auto; }
}

/* -------------------- Responsive -------------------- */
@media (max-width: 960px) {
  .hp-v2-hero .container { grid-template-columns: 1fr; }
  .hp-v2-hero-art { display: none; }
  .hp-v2-stats .container { grid-template-columns: repeat(2, 1fr); }
  .hp-v2-services-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-v2-band .container { grid-template-columns: 1fr; padding: 56px 28px; }
  .hp-v2-footer .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .hp-v2-services-grid { grid-template-columns: 1fr; }
  .hp-v2-hero { padding: 56px 0 40px; }
  .hp-v2-footer .container { grid-template-columns: 1fr; }
}

/* -------------------- Services page hero -------------------- */
.hp-v2-services-hero { padding: 84px 0 60px; position: relative; overflow: hidden; }
.hp-v2-services-hero .container {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.6fr);
  gap: 48px; align-items: center;
}
.hp-v2-services-hero-text h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.14;
  margin: 0 0 22px; color: var(--umber-deep);
}
.hp-v2-services-hero-text h1 .accent { color: var(--terracotta-deep); }
.hp-v2-services-hero-text p.lead {
  font-size: 1.05rem; line-height: 1.65; color: var(--umber);
  margin: 0 0 18px;
}
.hp-v2-services-hero-visual {
  height: 280px; display: flex; align-items: center; justify-content: center;
}
.hp-v2-services-hero-visual svg { width: 100%; height: 100%; }

/* -------------------- Competencies list (services page) -------------------- */
.hp-v2-comp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hp-v2-comp-list li {
  display: flex; gap: 14px; align-items: flex-start;
}
.hp-v2-comp-list li svg { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.hp-v2-comp-list li div { display: grid; gap: 2px; }
.hp-v2-comp-list li strong {
  font-size: 1.02rem; color: var(--umber-deep);
}
.hp-v2-comp-list li span { font-size: 0.92rem; color: var(--umber); }

/* -------------------- Offer grid (services page) -------------------- */
.hp-v2-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-v2-offer-card {
  background: var(--white); border: 1px solid rgba(61, 44, 28, 0.08);
  border-radius: 12px; padding: 32px 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: grid; gap: 12px;
}
.hp-v2-offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.hp-v2-offer-card-highlight {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 1px var(--terracotta), var(--shadow-soft);
}
.hp-v2-offer-num {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  color: var(--terracotta); line-height: 1;
}
.hp-v2-offer-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: var(--umber-deep); margin: 0;
}
.hp-v2-offer-card p { font-size: 0.95rem; color: var(--umber); line-height: 1.6; margin: 0; }

/* -------------------- Testimonials section (home) -------------------- */
.hp-v2-testimonials {
  background: var(--white);
  padding: 84px 0;
  border-bottom: 1px solid rgba(61, 44, 28, 0.06);
}
.hp-v2-testimonial-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.hp-v2-testimonial-visual {
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--cream-deep);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.hp-v2-testimonial-visual img { width: 100%; height: auto; display: block; }
.hp-v2-testimonial-fallback {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.hp-v2-testimonial-fallback::after {
  content: "\2605 \2605 \2605 \2605 \2605";
  font-size: 3rem; color: var(--sand); letter-spacing: 6px;
}
.hp-v2-testimonial-quotes { display: grid; gap: 24px; }
.hp-v2-testimonial-quotes blockquote { margin: 0; }
.hp-v2-testimonial-quotes blockquote p {
  font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6;
  color: var(--umber); font-style: italic; margin: 0 0 8px;
}
.hp-v2-testimonial-quotes blockquote cite {
  font-size: 0.85rem; font-weight: 600; color: var(--sea);
  font-style: normal;
}

/* -------------------- Footer classic link isolation -------------------- */
.hp-v2-footer-classic {
  font-size: 0.78rem;
  opacity: 0.5;
  text-decoration: underline;
  transition: opacity 0.15s ease;
}
.hp-v2-footer-classic:hover { opacity: 0.85; }

/* -------------------- Services responsive -------------------- */
@media (max-width: 960px) {
  .hp-v2-services-hero .container { grid-template-columns: 1fr; }
  .hp-v2-services-hero-visual { display: none; }
  .hp-v2-offer-grid { grid-template-columns: 1fr; }
  .hp-v2-testimonial-card { grid-template-columns: 1fr; }
  .hp-v2-testimonial-visual { max-height: 200px; }
}
@media (max-width: 620px) {
  .hp-v2-offer-card { padding: 24px 20px; }
}