/* ============================================================
   GTC CRANEX — contact page. Complements the footer: the form
   and direct channels only. One yellow accent — the submit.
   Picker follows the language-selector grammar.
   ============================================================ */

.cf-split{
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(300px,410px);
  justify-content:space-between;
  gap:clamp(28px,4vw,72px);
  align-items:start;
  padding:clamp(24px,3vw,48px) var(--gutter) 0;
}

/* ---- form card: yellow wrapper, hook watermark behind ---- */
.cf-form{
  position:relative;
  overflow:hidden;
  background:var(--yellow);
  border-radius:var(--radius);
  padding:clamp(22px,2.8vw,44px);
}
.cf-form::before{
  content:"";
  position:absolute;
  top:clamp(-70px,-5vw,-40px);
  right:clamp(-60px,-4vw,-30px);
  width:clamp(230px,24vw,330px);
  aspect-ratio:68/77;
  background:url("../img/footer/hook.svg") no-repeat center / contain;
  opacity:.08;
  pointer-events:none;
}
.cf-form > form,
.cf-form .cf-success{position:relative;z-index:1;}
/* ink-on-yellow adjustments */
.cf-form .cf-field > label{color:rgba(27,18,0,.66);}
.cf-form .cf-chip{border-color:rgba(27,18,0,.22);}
.cf-form .cf-consent{color:rgba(27,18,0,.55);}
.cf-form .cf-success p{color:rgba(27,18,0,.66);}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(12px,1.3vw,18px);}
.cf-field{margin-bottom:clamp(14px,1.6vw,22px);min-width:0;}
.cf-field > label{
  display:block;
  margin-bottom:7px;
  font-size:clamp(11px,.82vw,12.5px);
  font-weight:500;
  color:var(--soft);
}
.cf-field > label em{font-style:normal;color:var(--red);}
/* underline fields: no box, red line fills from the left on hover/focus,
   labels live in the field and float up once you type */
.cf-ctrl{position:relative;}
.cf-ctrl::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.cf-ctrl:hover::after,
.cf-ctrl:focus-within::after{transform:scaleX(1);}
.cf-inp{
  width:100%;
  min-width:0;
  padding:clamp(20px,1.8vw,24px) 0 clamp(9px,.9vw,12px);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(27,18,0,.30);
  border-radius:0;
  font:inherit;
  font-size:clamp(14px,1.05vw,16px);
  color:var(--ink);
}
.cf-inp:focus{outline:none;}
textarea.cf-inp{min-height:96px;resize:vertical;}
.cf-ctrl label{
  position:absolute;
  left:0;
  top:clamp(20px,1.8vw,24px);
  margin:0;
  font-size:clamp(14px,1.05vw,16px);
  font-weight:400;
  color:rgba(27,18,0,.55);
  pointer-events:none;
  transition:top .25s var(--ease),font-size .25s var(--ease),color .25s var(--ease);
}
.cf-inp:focus ~ label,
.cf-inp:not(:placeholder-shown) ~ label{
  top:0;
  font-size:clamp(10.5px,.8vw,12px);
  font-weight:500;
  color:rgba(27,18,0,.66);
}
/* format hints appear only once the label has floated */
.cf-inp::placeholder{color:transparent;transition:color .2s ease;}
.cf-inp:focus::placeholder{color:rgba(27,18,0,.4);transition-delay:.15s;}
.cf-field.is-error .cf-inp{border-bottom-color:var(--red);}
.cf-field.is-error .cf-ctrl::after{transform:scaleX(1);}
.cf-err{display:none;margin:6px 0 0;font-size:11.5px;color:var(--red);}
.cf-field.is-error .cf-err{display:block;}

/* ---- phone + country code ---- */
.cf-phone{display:flex;gap:clamp(14px,1.6vw,22px);align-items:stretch;}
.cf-phone .cf-ctrl{flex:1;min-width:0;}
.ccwrap{position:relative;flex:none;}
.ccwrap::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
.ccwrap:hover::after,
.ccwrap:focus-within::after{transform:scaleX(1);}
.ccbtn{
  display:flex;align-items:center;gap:8px;
  height:100%;
  padding:clamp(20px,1.8vw,24px) 2px clamp(9px,.9vw,12px);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(27,18,0,.30);
  border-radius:0;
  font:inherit;
  font-size:clamp(14px,1.05vw,16px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  cursor:pointer;
}
.ccbtn:focus-visible{outline:none;}
.ccbtn .flag{width:20px;height:20px;border-radius:50%;flex:none;}
.ccbtn .chev{width:12px;height:12px;flex:none;color:var(--faint);transition:transform .25s var(--ease);}
.ccwrap.is-open .ccbtn .chev{transform:rotate(180deg);}

.ccmenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:30;
  width:min(330px,84vw);
  padding:8px;
  background:#fff;border-radius:12px;
  border:1px solid rgba(20,25,34,.08);
  box-shadow:0 20px 46px -14px rgba(12,20,30,.4);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.ccwrap.is-open .ccmenu{opacity:1;visibility:visible;transform:none;}
.ccsearch{
  display:flex;align-items:center;gap:8px;
  height:38px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;
  margin-bottom:6px;
}
.ccsearch svg{width:15px;height:15px;color:var(--faint);flex:none;}
.ccsearch input{width:100%;border:0;outline:0;background:none;font:inherit;font-size:13px;color:var(--ink);}
.cclist{
  max-height:262px;overflow:auto;overscroll-behavior:contain;
  margin:0;padding:0;list-style:none;
}
.ccopt{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--ink);
}
.ccopt .flag{width:18px;height:18px;border-radius:50%;flex:none;}
.ccopt .dial{margin-left:auto;color:var(--soft);font-variant-numeric:tabular-nums;}
.ccopt:hover,.ccopt.is-hl{background:var(--card);}
.ccopt.is-active{background:var(--card);font-weight:700;}
.ccopt.is-active::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);margin-left:8px;flex:none;}
.ccempty{padding:12px 10px;font-size:12.5px;color:var(--faint);}

/* ---- interest cf-chips ---- */
.cf-chips{display:flex;gap:8px;flex-wrap:wrap;}
.cf-chips{gap:10px;}
.cf-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(11px,1.1vw,14px) clamp(18px,1.9vw,26px);
  border-radius:999px;
  border:1.4px solid rgba(27,18,0,.34);
  background:transparent;
  font-size:clamp(12.5px,.95vw,14px);
  font-weight:500;
  color:rgba(27,18,0,.75);
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.cf-chip:hover{background:rgba(27,18,0,.07);border-color:rgba(27,18,0,.5);}
.cf-chip:focus-within{border-color:var(--ink);}
.cf-chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.cf-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700;}

/* ---- submit: red, full width ---- */
.btn--red{
  width:100%;
  background:var(--red);
  color:#fff;
}
.btn--red:hover{background:#D63434;box-shadow:0 10px 26px rgba(231,63,63,.30);}

/* ---- cf-consent + submit + success ---- */
.cf-consent{margin:2px 0 clamp(14px,1.6vw,20px);max-width:52ch;font-size:11.5px;line-height:1.55;color:var(--faint);}
.cf-hp{position:absolute;left:-9999px;opacity:0;}

.cf-success{display:none;padding:clamp(8px,1.6vw,18px) 0;}
.cf-form.is-done form{display:none;}
.cf-form.is-done .cf-success{display:block;}
.cf-success svg{width:42px;height:42px;color:var(--ink);}
.cf-success h3{margin:14px 0 6px;font-size:clamp(18px,1.6vw,24px);font-weight:700;}
.cf-success p{margin:0 0 16px;font-size:clamp(13px,.95vw,15px);color:var(--soft);max-width:44ch;}
.cf-success a{font-weight:700;color:var(--ink);}
.cf-success a:hover{color:var(--soft);}

/* ---- direct rail ---- */
.cf-rail{padding-top:6px;}
.cf-rail h4{
  display:flex;align-items:center;
  margin:0 0 6px;
  font-size:clamp(13px,1vw,16px);
  font-weight:700;
}
.cf-crow{
  display:flex;align-items:center;gap:12px;
  padding:clamp(13px,1.5vw,19px) 2px;
  border-bottom:1px solid var(--line);
  font-size:clamp(13px,1vw,15px);
  color:var(--ink);
}
.cf-crow svg{width:18px;height:18px;flex:none;color:var(--soft);}
.cf-crow .big{font-size:clamp(17px,1.5vw,22px);font-weight:700;font-variant-numeric:tabular-nums;}
a.cf-crow{transition:color .2s ease;}
a.cf-crow:hover{color:var(--soft);}
.cf-crow .mut{color:var(--soft);}
.cf-rail .gap{height:clamp(22px,2.8vw,38px);}
.cf-crow .cf-stack{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cf-crow .cf-stack b{font-size:clamp(13.5px,1.05vw,16px);}
.cf-crow .cf-stack span{font-size:clamp(11.5px,.88vw,13px);color:var(--soft);}
.cf-crow .go{margin-left:auto;color:var(--faint);}
a.cf-crow:hover .go{color:var(--ink);}
.cf-soc{display:flex;gap:16px;padding:14px 2px 0;}
.cf-soc a{color:var(--soft);transition:color .2s ease;}
.cf-soc a:hover{color:var(--ink);}
.cf-soc svg{width:20px;height:20px;}

@media (max-width:960px){
  .cf-split{grid-template-columns:1fr;gap:clamp(24px,5vw,40px);}
  .cf-row{grid-template-columns:1fr;gap:0;}
}
@media (max-width:560px){
  .cf-chips{display:grid;grid-template-columns:repeat(2,1fr);}
  .ccmenu{left:auto;right:auto;width:min(330px,88vw);}
}