/* =========================================================
   Contact V3 — full-screen CTA + polished modal
   ========================================================= */
.contact-pro-v2{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#fff8d8;
  padding:clamp(86px,7vw,118px) 0 clamp(70px,6vw,96px);
}
.contact-pro-v2__inner{
  position:relative;
  z-index:3;
  width:100%;
  min-height:calc(100svh - var(--header) - 42px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(42px,6vh,68px);
}
.contact-pro-v2__headline{
  appearance:none;
  width:100%;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-align:center;
  font:inherit;
}
.contact-pro-v2__headline h2{
  width:min(1320px,94vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,2vw,28px);
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;
  letter-spacing:-.028em;
}

/* Highlight: rounded marker stripe, animated on load and interactive on hover/focus. */
.contact-pro-v2__headline .contact-highlight{
  display:block;
  max-width:min(1320px,94vw);
  margin:0 auto;
  padding:0;
  color:var(--ink);
  background:transparent;
  font-size:clamp(50px,6.5vw,102px);
  font-weight:800;
  line-height:1.12;
}

.contact-pro-v2__headline .contact-highlight>span{
  display:inline;
  padding-inline:.18em;
  color:inherit;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='120' height='24' rx='2' ry='18' fill='%23ffd65c'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 86%;
  background-size:100% .36em;

  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;

  /* Same visual result as before, but the animation no longer locks the final
     background-size, so hover/focus can animate in both languages. */
  animation:contact-highlight-draw .85s cubic-bezier(.16,1,.3,1) .15s backwards;
  transition:
    background-size .28s cubic-bezier(.16,1,.3,1),
    background-position .28s cubic-bezier(.16,1,.3,1),
    filter .28s ease;
}

html[lang="en"] .contact-pro-v2__headline .contact-highlight>span{
  background-position:left 86%;
}

.contact-pro-v2__headline:hover .contact-highlight>span,
.contact-pro-v2__headline:focus-visible .contact-highlight>span{
  background-size:100% .43em;
  background-position-y:82%;
  filter:saturate(1.06);
}

/* English keeps the exact same marker dimensions, but its hover motion runs
   from the opposite side so it is visibly interactive in LTR. */
html[lang="en"] .contact-pro-v2__headline:hover .contact-highlight>span,
html[lang="en"] .contact-pro-v2__headline:focus-visible .contact-highlight>span{
  background-position:right 82%;
}

@keyframes contact-highlight-draw{
  from{ background-size:0% .36em; }
  to{ background-size:100% .36em; }
}

@media(prefers-reduced-motion:reduce){
  .contact-pro-v2__headline .contact-highlight>span{
    animation:none;
    background-size:100% .36em;
    transition:none;
  }
}

.contact-pro-v2__headline .contact-title-bottom{
  display:block;
  max-width:min(1120px,90vw);
  color:var(--ink);
  font-size:clamp(42px,5.4vw,82px);
  font-weight:800;
  line-height:1.14;
}
.contact-pro-v2__actions{
  direction:ltr;
  width:min(1120px,90vw);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}
.contact-pro-v2__card{
  appearance:none;
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  border:2px solid var(--ink);
  border-radius:22px;
  color:var(--ink);
  box-shadow:0 7px 0 var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s ease;
  text-align:center;
  font:inherit;
  cursor:pointer;
}
.contact-pro-v2__card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 0 var(--ink);
  filter:saturate(1.04);
}
.contact-pro-v2__card strong{
  direction:auto;
  font-size:clamp(20px,1.8vw,28px);
  line-height:1.15;
  font-weight:800;
  overflow-wrap:anywhere;
}
.contact-pro-v2__card--green{background:#dcf9e9;}
.contact-pro-v2__card--yellow{background:#ffd65c;}
.contact-pro-v2__card--blue{background:#dff3ff;}
.contact-action-linkedin{grid-column:1;}
.contact-action-form{grid-column:2;}
.contact-action-email{grid-column:3;}
.contact-pro-v2__scribble{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.38;
}
.contact-pro-v2__scribble--one{
  width:180px;height:58px;right:-38px;top:12%;
  border:5px solid var(--coral);border-radius:50%;transform:rotate(-13deg);
}
.contact-pro-v2__scribble--two{
  width:130px;height:130px;left:-58px;bottom:8%;
  border:5px solid var(--blue-deep);border-radius:50%;
}
.contact-pro-v2__star{
  position:absolute;z-index:1;right:9%;bottom:8%;width:58px;opacity:.9;transform:rotate(-8deg);
}

/* Modal */
.contact-modal-v2{
  position:fixed;
  inset:0;
  z-index:220;
  display:none;
  place-items:center;
  padding:18px;
}
.contact-modal-v2.open{display:grid;}
.contact-modal-v2__backdrop{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  padding:0;border:0;
  background:rgba(18,18,18,.48);
  backdrop-filter:blur(9px);
  cursor:default;
}
.contact-modal-v2__panel{
  position:relative;
  z-index:2;
  width:min(920px,100%);
  max-height:calc(100svh - 36px);
  overflow:auto;
  border:1px solid rgba(23,23,23,.11);
  border-radius:34px;
  background:#fffdf8;
  box-shadow:0 28px 90px rgba(0,0,0,.26);
  padding:clamp(28px,4vw,48px);
}
.contact-modal-v2__close{
  position:absolute;
  top:20px;
  inset-inline-start:20px;
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid rgba(23,23,23,.13);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:transform .2s var(--ease),background .2s ease;
}
.contact-modal-v2__close:hover{transform:rotate(6deg);background:#fff7d0;}
.contact-modal-v2__header{
  margin-bottom:clamp(28px,3vw,38px);
  padding-inline:64px;
  text-align:center;
}
.contact-modal-v2__header h3{
  margin:0;
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;
  font-size:clamp(42px,5vw,66px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
}
.contact-modal-v2__header p{
  margin:10px 0 0;
  color:#746c60;
  font-size:15px;
  line-height:1.6;
  font-weight:700;
}
.contact-form-v2{display:grid;gap:20px;}
.contact-form-v2__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 22px;
}
.contact-field-v2{
  display:grid;
  gap:8px;
  color:#6b6358;
  font-size:14px;
  font-weight:800;
}
.contact-field-v2 input,
.contact-field-v2 textarea{
  width:100%;
  border:1.5px solid #e2ddd3;
  border-radius:18px;
  background:#fff;
  color:var(--ink);
  outline:none;
  padding:15px 17px;
  font:700 16px/1.45 "Baloo Bhaijaan 2",system-ui,sans-serif;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.contact-field-v2 input::placeholder,
.contact-field-v2 textarea::placeholder{
  color:#aaa297;
  font-weight:600;
  opacity:1;
}
.contact-field-v2 input[type="email"],
.contact-field-v2 input[type="tel"]{
  direction:ltr;
  text-align:left;
}
.contact-field-v2 textarea{
  min-height:160px;
  resize:vertical;
}
.contact-field-v2 input:focus,
.contact-field-v2 textarea:focus{
  border-color:var(--blue-deep);
  background:#fffefb;
  box-shadow:0 0 0 4px rgba(43,114,232,.10);
}
.contact-field-v2 input.invalid,
.contact-field-v2 textarea.invalid{
  border-color:#d84d4d;
  box-shadow:0 0 0 4px rgba(216,77,77,.09);
}
.contact-field-v2__error{
  min-height:16px;
  color:#aa3030;
  font-size:12px;
  font-weight:800;
}
.contact-form-v2__honeypot{
  position:absolute!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.contact-form-v2__status{
  min-height:22px;
  margin:0;
  color:#554e45;
  font-weight:800;
  font-size:14px;
}
.contact-form-v2__status.success{color:#18734a;}
.contact-form-v2__status.warning{color:#8a5a00;}
.contact-form-v2__status.error{color:#a72e2e;}
.contact-form-v2__submit{
  width:100%;
  border:2px solid var(--ink);
  border-radius:17px;
  background:#ffd65c;
  color:#111;
  padding:16px 22px;
  font:800 20px/1 "Baloo Bhaijaan 2",system-ui,sans-serif;
  cursor:pointer;
  box-shadow:0 5px 0 var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.contact-form-v2__submit:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink);}
.contact-form-v2__submit:disabled{opacity:.65;cursor:wait;transform:none;}
body.contact-modal-open{overflow:hidden;}

@media(max-width:900px){
  .contact-pro-v2__actions{
    grid-template-columns:1fr;
    max-width:560px;
    width:88vw;
  }
  .contact-action-form{grid-column:1;order:1;}
  .contact-action-email{grid-column:1;order:2;}
  .contact-action-linkedin{grid-column:1;order:3;}
  .contact-pro-v2__card{min-height:76px;}
  .contact-form-v2__grid{grid-template-columns:1fr;gap:15px;}
}
@media(max-width:720px){
  .contact-pro-v2{
    min-height:100svh;
    padding:78px 0 58px;
  }
  .contact-pro-v2__inner{
    min-height:calc(100svh - var(--header) - 18px);
    gap:34px;
  }
  .contact-pro-v2__headline h2{
    width:92vw;
    gap:18px;
  }
  .contact-pro-v2__headline .contact-highlight{
    width:92vw;
    max-width:92vw;
    font-size:clamp(39px,11vw,54px);
    line-height:1.18;
  }
  .contact-pro-v2__headline .contact-highlight>span{
    padding-inline:.14em;
  }
  .contact-pro-v2__headline .contact-title-bottom{
    max-width:88vw;
    font-size:clamp(34px,9.8vw,48px);
    line-height:1.2;
  }
  .contact-pro-v2__actions{width:90vw;gap:12px;}
  .contact-pro-v2__card{
    min-height:70px;
    padding:14px 16px;
    border-radius:18px;
    box-shadow:0 5px 0 var(--ink);
  }
  .contact-pro-v2__card strong{font-size:20px;}
  .contact-pro-v2__star{right:7%;bottom:5%;width:44px;}
  .contact-pro-v2__scribble--one{width:130px;height:42px;right:-35px;top:10%;}
  .contact-pro-v2__scribble--two{width:88px;height:88px;left:-44px;bottom:5%;}

  .contact-modal-v2{padding:9px;}
  .contact-modal-v2__panel{
    max-height:calc(100svh - 18px);
    border-radius:26px;
    padding:22px 16px 20px;
  }
  .contact-modal-v2__close{top:13px;inset-inline-start:13px;width:40px;height:40px;font-size:23px;}
  .contact-modal-v2__header{padding-inline:48px;margin-bottom:22px;}
  .contact-modal-v2__header h3{font-size:clamp(34px,10.7vw,48px);line-height:1.12;}
  .contact-modal-v2__header p{font-size:13px;line-height:1.5;}
  .contact-form-v2{gap:15px;}
  .contact-field-v2{gap:6px;font-size:13px;}
  .contact-field-v2 input,.contact-field-v2 textarea{padding:13px 14px;border-radius:15px;font-size:15px;}
  .contact-field-v2 textarea{min-height:130px;}
  .contact-form-v2__submit{font-size:18px;padding:14px 18px;}
}

/* V6 performance test: do not paint the full contact screen until it approaches view. */
@supports (content-visibility:auto){
  .contact-pro-v2{
    content-visibility:auto;
    contain-intrinsic-size:900px;
  }
}

#contactFormStatus.success{
  color:#15803d !important;
}