/* ============================================================
   MEDIVEXA LABS — CONTACT PAGE ONLY
   Loaded after style.css. All colour/typography comes from the
   shared tokens — no new hex values are introduced here.
   Section rhythm: tint (hero) -> white -> tint -> white
   ============================================================ */

/* ============ PAGE HERO ============
   Duplicated from about.css by design — page-hero is a per-page
   block (see about.css §PAGE HERO), not part of the shared style.css. */
.page-hero{
  position:relative;padding:64px 0 76px;background:var(--tint);
  border-bottom:1px solid var(--line);overflow:hidden;
}
.ph-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ph-ring{
  position:absolute;top:-260px;right:-180px;width:620px;height:620px;
  border-radius:50%;border:1px dashed rgba(73,66,225,.16);
  animation:ringSpinContact 60s linear infinite;
}
@keyframes ringSpinContact{to{transform:rotate(360deg)}}
.ph-dots{
  position:absolute;bottom:-30px;left:2%;width:220px;height:150px;
  background-image:radial-gradient(rgba(73,66,225,.16) 1.4px,transparent 1.4px);
  background-size:19px 19px;
  mask-image:radial-gradient(ellipse,#000 15%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse,#000 15%,transparent 72%);
}
.page-hero .container{position:relative;z-index:1}

.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}

.crumb{display:flex;align-items:center;gap:8px;margin-bottom:26px;
  font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.crumb a{color:var(--violet)}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.crumb svg{opacity:.5}

.page-hero h1{
  font-size:clamp(2.1rem,3.9vw,3.1rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.14;margin:20px 0 18px;text-wrap:balance;
}
.ph-content>p{color:var(--ink2);font-size:1.06rem;line-height:1.75;max-width:520px}

.ph-facts{display:flex;gap:0;flex-wrap:wrap;margin-top:38px;border-top:1px solid var(--line);padding-top:26px}
.phf{padding:0 34px;border-left:1px solid var(--line)}
.phf:first-child{padding-left:0;border-left:none}
.phf b{display:block;font-family:var(--fd);font-size:1.85rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.phf b em{font-style:normal;color:var(--orchid)}
.phf span{font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);display:block;margin-top:9px}

/* ---------- HERO MEDIA ---------- */
.ph-media{position:relative}
.ph-media-fig{
  border-radius:var(--r-lg);overflow:hidden;border:5px solid #fff;
  box-shadow:var(--sh-card);aspect-ratio:4/4.2;
}
.ph-media-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ph-badge{
  position:absolute;left:-18px;bottom:26px;display:flex;align-items:center;gap:12px;
  background:#fff;padding:14px 18px;border-radius:var(--r-md);box-shadow:var(--sh);
  max-width:270px;border:1px solid #EDEAF8;
}
.ph-badge-ico{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad);color:#fff;
}
.ph-badge b{display:block;font-family:var(--fd);font-size:.86rem;font-weight:600;color:var(--ink)}
.ph-badge span{display:block;font-size:.74rem;color:var(--ink2);line-height:1.4;margin-top:2px}

/* ============ CONTACT MAIN ============ */
.contact-main{padding:104px 0 96px;background:#fff}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:stretch}

.contact-info{display:flex;flex-direction:column}
.contact-info .kicker{margin-bottom:16px}
.contact-info h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:16px;font-weight:600}
.contact-info>p{color:var(--ink2);font-size:1.02rem;line-height:1.75;max-width:460px;margin-bottom:36px}

.ci-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:32px;flex:1}
.ci-list li{
  display:flex;gap:16px;align-items:flex-start;padding:18px;
  background:#fff;border:1px solid #EDEAF8;border-radius:var(--r-md);box-shadow:var(--sh-card);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.ci-list li:hover{transform:translateY(-6px);border-color:transparent;box-shadow:var(--sh-card-hover)}
.ci-ico{
  flex-shrink:0;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--grad-soft);color:var(--violet);border:1px solid var(--line);transition:.45s var(--ease);
}
.ci-list li:hover .ci-ico{background:var(--grad);color:#fff;border-color:transparent;transform:rotate(-8deg) scale(1.06)}
.ci-list li div{display:flex;flex-direction:column;gap:2px}
.ci-list b{font-family:var(--fd);font-size:.95rem;color:var(--ink);font-weight:600}
.ci-list a{font-family:var(--fd);font-size:1.02rem;color:var(--indigo);font-weight:600}
.ci-list a:hover{color:var(--violet)}
.ci-addr{font-size:.94rem;color:var(--ink2);line-height:1.55}
.ci-note{font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:2px}

.wa-inline{display:inline-flex;align-items:center;gap:10px;padding:.85rem 1.4rem;border-radius:999px;background:#E9FBEF;color:#0F9D58;font-family:var(--fd);font-weight:600;font-size:.92rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wa-inline:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}

/* ---------- FORM CARD ---------- */
.contact-form-card{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid #EDEAF8;border-radius:var(--r-lg);
  box-shadow:var(--sh-card);padding:2.4rem 2.2rem;overflow:hidden;
}
.contact-form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.cf-head{margin-bottom:24px}
.cf-head .kicker{margin-bottom:12px}
.cf-head h3{font-size:1.4rem;font-weight:600;margin-bottom:8px}
.cf-head p{font-size:.9rem;color:var(--ink2);line-height:1.6;max-width:420px}

#contactForm{display:flex;flex-direction:column;flex:1}

.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{margin-bottom:18px;display:flex;flex-direction:column;gap:7px}
.cf-field label{font-family:var(--fd);font-size:.82rem;font-weight:600;color:var(--ink)}

.cf-field--grow{flex:1;margin-bottom:22px}
.cf-field--grow .cf-input-wrap--area{flex:1;display:flex}
.cf-field--grow textarea{flex:1;height:100%;min-height:96px}

.cf-input-wrap{position:relative;display:flex;align-items:center}
.cf-ico{position:absolute;left:1rem;color:var(--ink3);pointer-events:none;transition:color .25s}
.cf-input-wrap--area .cf-ico{top:1rem;align-self:flex-start}

.cf-field input,.cf-field select,.cf-field textarea{
  font-family:var(--fb);font-size:.95rem;padding:.85rem 1rem .85rem 2.7rem;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--tint);color:var(--ink);
  transition:border-color .25s,background .25s,box-shadow .25s;width:100%;resize:vertical;
}
.cf-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5675' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:#9A93B5}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(73,66,225,.16)}
.cf-input-wrap:focus-within .cf-ico{color:var(--violet)}
.cf-field.invalid input,.cf-field.invalid textarea{border-color:var(--danger);background:#FDF1F3}
.cf-err{display:none;font-size:.78rem;color:var(--danger);font-family:var(--fb)}
.cf-field.invalid .cf-err{display:block}

.cf-consent{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;cursor:pointer}
.cf-consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--indigo);flex-shrink:0}
.cf-consent span{font-size:.82rem;color:var(--ink3);line-height:1.55}

.cf-submit-row{margin-top:auto}
.cf-submit{width:100%}
.cf-status{margin-top:14px;font-size:.88rem;font-weight:500;text-align:center;min-height:1.2em}
.cf-status.ok{color:var(--success)}
.cf-status.err{color:var(--danger)}

/* ============ MAP ============ */
.contact-map{padding:100px 0;background:var(--tint)}
.map-shell{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card);border:1px solid #EDEAF8;height:440px}
.map-shell iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15) contrast(1.02)}
.map-pin-card{
  position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:14px;
  background:#fff;padding:16px 20px;border-radius:var(--r-md);box-shadow:var(--sh);max-width:320px;
  transition:transform .4s var(--ease);
}
.map-pin-card:hover{transform:translateY(-5px)}
.mpc-ico{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff}
.map-pin-card b{display:block;font-family:var(--fd);font-size:.92rem;color:var(--ink);font-weight:600}
.map-pin-card em{display:block;font-style:normal;font-size:.8rem;color:var(--indigo);font-weight:600;margin-top:2px}

/* ============ FAQ STRIP ============ */
.contact-faq{padding:100px 0 110px;background:#fff}
.cfaq-shell{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;align-items:start}
.cfaq-shell h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-top:16px;font-weight:600}
.cfaq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cfaq-item{
  background:#fff;border:1px solid #EDEAF8;border-radius:20px;padding:1.7rem 1.5rem;
  box-shadow:var(--sh-card);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.cfaq-item:hover{transform:translateY(-9px);border-color:transparent;box-shadow:var(--sh-card-hover)}
.cfaq-item b{display:block;font-family:var(--fd);font-size:.98rem;margin-bottom:8px;color:var(--ink);font-weight:600}
.cfaq-item p{font-size:.9rem;color:var(--ink2);line-height:1.65}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .cfaq-shell{grid-template-columns:1fr;gap:28px}
  .cfaq-grid{grid-template-columns:1fr}
}
@media (max-width:920px){
  .ph-ring{width:440px;height:440px;top:-180px;right:-160px}
  .ph-grid{grid-template-columns:1fr;gap:36px}
  .ph-media{order:-1;max-width:360px;margin-inline:auto;width:100%}
  .ph-content>p{max-width:none}
}
@media (max-width:640px){
  .page-hero{padding:44px 0 56px}
  .page-hero h1{font-size:clamp(1.9rem,7vw,2.4rem)}
  .ph-facts{gap:20px 0;padding-top:20px}
  .ph-media-fig{aspect-ratio:4/3.2}
  .ph-badge{left:0;right:0;margin:0 auto;bottom:-16px;max-width:88%}
  .contact-main{padding:70px 0}
  .contact-map{padding:70px 0}
  .contact-faq{padding:70px 0}
  .contact-form-card{padding:1.6rem}
  .cf-row{grid-template-columns:1fr}
  .map-shell{height:320px}
  .map-pin-card{left:14px;right:14px;bottom:14px;max-width:none}
}
