/* contact form (linked from contact.html only) */
.cform{background:var(--mist)}
.cform__in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.cform__h{position:sticky;top:calc(var(--hdr) + 40px)}
.cform__f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(16px,2.4vw,28px)}
.fld{display:flex;flex-direction:column;gap:8px}
.fld--full{grid-column:1/-1}
.fld label{font:700 15px/1.4 var(--arb);color:var(--head)}
html[lang=en] .fld label{font-family:var(--lat);font-size:13px;letter-spacing:.06em}
.fld input,.fld select,.fld textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid #737880;border-radius:0;background:#fff;color:var(--ink);font:500 17px/1.6 var(--arb);transition:border-color .25s,box-shadow .25s}
.fld textarea{min-height:150px;resize:vertical}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--head)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(68,108,207,.28)}
.fld [aria-invalid=true]{border-color:#B3261E}
.fld .err{font-size:14px;font-weight:600;color:#B3261E}
.fld.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cform__f{position:relative}
.cform__a{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.cform__s{margin:0;max-width:34em;font-size:15px;line-height:1.8;color:var(--ink)}
.cform__s--ok{color:#1b6b3a;font-weight:600}
.cform__s--off{color:#7a4b00;font-weight:600}
@media (max-width:900px){.cform__in{grid-template-columns:1fr}.cform__h{position:static}}
@media (max-width:560px){.cform__f{grid-template-columns:1fr}.cform__a .btn{width:100%}}

/* contact channels: one column. WhatsApp is the main button; email and the two phones are rows that end in a lance;
   hours and address sit side by side underneath */
.reach{display:grid;gap:24px;align-content:start}
.reach__wa{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 26px;background:var(--cyan);color:#fff;text-decoration:none;box-shadow:0 18px 36px -18px rgba(68,108,207,.7);transition:background .3s,transform .3s var(--ease)}
.reach__wa:hover{background:#5579d8;transform:translateY(-2px)}
.reach__wa:active{transform:translateY(0) scale(.99)}
.reach__wai{width:36px;height:36px;fill:#fff;flex:none}
.reach__wat{display:grid;gap:2px}
.reach__wah{font:700 19px/1.4 var(--arb)}
.reach__wav{justify-self:start;font:600 16px/1.4 var(--lat);letter-spacing:.03em;opacity:.9}
.reach .golance{width:40px;height:8px;fill:currentColor}
.reach__wa:hover .golance,.reach__row:hover .golance{transform:translateX(6px)}
[dir=rtl] .reach__wa:hover .golance,[dir=rtl] .reach__row:hover .golance{transform:scaleX(-1) translateX(6px)}
.reach__rows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(183,200,235,.18)}
.reach__row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) auto;align-items:center;gap:20px;padding:20px 6px;border-bottom:1px solid rgba(183,200,235,.18);color:#fff;text-decoration:none;transition:background .3s,padding .35s var(--ease)}
.reach__row:hover,.reach__row:focus-visible{background:rgba(68,108,207,.12);padding-inline:16px}
.reach__l{font:600 15px/1.4 var(--arb);color:var(--ice)}
.reach__v{justify-self:start;font:600 18px/1.4 var(--lat);letter-spacing:.02em;overflow-wrap:anywhere}
.reach__row .golance{color:var(--cyan)}
.reach__info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.reach__info div{padding:18px 20px;background:rgba(10,15,38,.55);border:1px solid rgba(183,200,235,.14)}
.reach__info dt{font:700 14px/1.4 var(--arb);color:var(--cyan)}
.reach__info dd{margin:6px 0 0;font-size:16px;line-height:1.7;color:#E9EEFF}
html[lang=en] .reach__wah,html[lang=en] .reach__l,html[lang=en] .reach__info dt{font-family:var(--lat)}
@media (max-width:600px){
  .reach__wa{padding:18px 20px;gap:14px}
  .reach__row{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px}
  .reach__row .reach__l{grid-column:1}
  .reach__row .reach__v{grid-column:1;grid-row:2;font-size:17px}
  .reach__row .golance{grid-column:2;grid-row:1/3}
  .reach__info{grid-template-columns:1fr}
}

/* the request form: a white sheet on the mist band, soft fields, a custom select arrow, and a submit button that ends in a lance */
.cform__f{padding:clamp(24px,3.4vw,48px);background:#fff;border-top:3px solid var(--cyan);box-shadow:0 40px 70px -40px rgba(10,15,38,.35),0 1px 2px rgba(10,15,38,.06)}
.fld label{font-size:14px;color:var(--head)}
.fld input,.fld select,.fld textarea{min-height:54px;border:1px solid #D3D9E6;background:#F7F8FB;font-size:16px;transition:border-color .25s,box-shadow .25s,background .25s}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:#9aa6c4}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{background:#fff}
.fld select{appearance:none;-webkit-appearance:none;padding-inline-end:44px;cursor:pointer;
  background:#F7F8FB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2C56' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
[dir=rtl] .fld select{background-position:left 16px center}
.fld textarea{min-height:170px}
.cform__a{padding-top:6px}
.cform__a .btn{gap:14px;min-width:220px}
.cform__a .btn .golance{width:36px;height:8px;fill:currentColor;transition:transform .4s var(--ease)}
.cform__a .btn:hover .golance{transform:translateX(6px)}
[dir=rtl] .cform__a .btn:hover .golance{transform:scaleX(-1) translateX(6px)}
.reach__v,.reach__wav{justify-self:stretch;text-align:left;unicode-bidi:isolate;overflow-wrap:normal;word-break:normal}
[dir=rtl] .reach__v,[dir=rtl] .reach__wav{text-align:right}
.reach__row{grid-template-columns:minmax(0,9em) minmax(0,1fr) auto}
@media (max-width:1100px) and (min-width:601px){.reach__v{font-size:16px}}
@media (max-width:600px){.reach__v{overflow-wrap:anywhere}}

/* the lance in each row says "Click here" so it reads as a link */
.reach__act{display:inline-flex;align-items:center;gap:10px}
.reach__ct{font:600 14px/1.4 var(--arb);color:var(--ice);opacity:.9;transition:color .3s}
html[lang=en] .reach__ct{font-family:var(--lat);font-size:12px;letter-spacing:.06em}
.reach__row:hover .reach__ct,.reach__row:focus-visible .reach__ct{color:#fff}
@media (max-width:600px){.reach__row .reach__act{grid-column:2;grid-row:1/3}}
@media (min-width:601px){
  .reach__row{grid-template-columns:7.4em minmax(0,1fr) auto;gap:12px 14px}
  .reach__row .reach__v{white-space:nowrap;font-size:17px}
}
@media (max-width:600px){
  .reach__row .reach__v{grid-column:1/-1;grid-row:2;font-size:16px}
  .reach__row .reach__act{grid-column:2;grid-row:1}
}

/* social rows: same rows as phone and email; an account with no address yet is shown but not clickable */
.reach__rows--soc{margin-top:clamp(22px,2.6vw,32px);border-top:0}
.reach__rows--soc li:first-child .reach__row{border-top:1px solid rgba(183,200,235,.18)}
.reach__v{display:flex;align-items:center;gap:12px}
.reach__si{width:18px;height:18px;flex:none;fill:currentColor;color:var(--ice)}
.reach__row:not([href]){cursor:default}
.reach__row:not([href]) .reach__act{opacity:.5}
.reach__row[href]:hover .reach__si{color:#fff}
/* long wording in the action column (Turkish, Kurdish) must not run into the email address */
.reach__row .reach__act{white-space:nowrap}
.reach__row[href^="mailto"] .reach__v{min-width:0;font-size:14.5px;overflow-wrap:anywhere;word-break:break-all}