/* Contact page: buyer / supplier form (loaded last, contact.html only) */
.contact-hero{padding-bottom:34px}
.contact-section{padding-top:0}
.contact-form{max-width:880px;background:#fff;border:1px solid var(--fine-border);border-radius:var(--surface-radius);box-shadow:var(--surface-shadow);padding:44px 48px}
.contact-form fieldset{border:0;margin:0 0 34px;padding:0;min-width:0}
.cf-legend{display:block;padding:0;margin:0 0 16px;font-family:Manrope,Arial,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.cf-role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-role-card{position:relative;display:block;border:1.5px solid #c7d0db;border-radius:var(--control-radius);padding:20px 22px 20px 56px;cursor:pointer;background:#fff;transition:border-color .2s ease,background .2s ease}
.cf-role-card input{position:absolute;left:22px;top:23px;width:18px;height:18px;margin:0;accent-color:var(--ink)}
.cf-role-card:hover{border-color:#8794a3}
.cf-role-card.is-selected{border-color:var(--ink);background:#fffaf0}
.cf-role-card:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.cf-role-title{display:block;font-family:Manrope,Arial,sans-serif;font-size:18px;font-weight:600;color:var(--ink)}
.cf-role-text{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.cf-field{display:block}
.cf-label{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink)}
.cf-label em{font-style:normal;font-weight:400;color:var(--muted)}
.contact-form input:not([type=checkbox]):not([type=radio]),.contact-form select,.contact-form textarea{display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid #c7d0db;border-radius:var(--control-radius);background:#fff;color:var(--ink);font-size:16px;line-height:1.4}
.contact-form textarea{min-height:112px;resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px #f5a52440}
.contact-form [aria-invalid=true]{border-color:#b42318!important}
.cf-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:8px}
.cf-check,.cf-consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.cf-check{font-size:15px;line-height:1.4;color:var(--ink)}
.cf-check input,.cf-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink)}
.cf-cats .cf-field{margin-top:22px}
.cf-consent{font-size:14px;line-height:1.55;color:var(--muted)}
.cf-error{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:#b42318}
.cf-error:empty{display:none}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.cf-status{margin:0;font-size:14px;color:var(--muted)}
.cf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.cf-body[hidden],.contact-form [data-role][hidden]{display:none!important}
/* the site-wide 48px input height must not apply to tick-boxes and radios */
.contact-form input[type=checkbox],.contact-form input[type=radio]{min-height:0!important;padding:0}
/* no empty band under the role choice before a role is picked */
.contact-form .cf-role{margin-bottom:0}
.cf-body{margin-top:34px}
.cf-thanks{padding:8px 0}
.cf-thanks:focus{outline:none}
.cf-thanks h2{margin:0 0 14px;font-size:clamp(30px,3.2vw,44px)}
.cf-thanks .lead{margin:0 0 28px}
@media (max-width:760px){
 .contact-form{padding:26px 20px;border-radius:14px}
 .cf-role-grid,.cf-grid,.cf-checks{grid-template-columns:1fr}
 .cf-legend{font-size:18px}
}

/* background: the brand's Daylight Ring, large and faint on the right, turning slowly (still for reduced motion) */
.contact-stage{position:relative;overflow:hidden;isolation:isolate}
.contact-bg{position:absolute;z-index:-1;pointer-events:none;top:130px;right:calc((100vw - 1280px) / 2 - 120px);width:640px;height:640px}
.contact-bg .cf-ring{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);opacity:.14;transform-origin:50% 50%;animation:cf-turn 120s linear infinite}
.contact-orbit{position:absolute;inset:-13%;width:126%;height:126%;color:#9aa8b8;opacity:.55;transform-origin:50% 50%;animation:cf-turn 200s linear infinite reverse}
.contact-glow{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,#ffe3a8 0%,#ffe3a870 38%,#ffe3a800 70%)}
@keyframes cf-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.contact-bg .cf-ring,.contact-orbit{animation:none}}
@media (max-width:1099px){.contact-bg{top:30px;right:-150px;width:440px;height:440px}.contact-bg .cf-ring{opacity:.11}}
@media (max-width:760px){.contact-bg{top:-110px;right:-150px;width:320px;height:320px}.contact-bg .cf-ring{opacity:.08}.contact-orbit{opacity:.35}.contact-glow{opacity:.55}}
.cf-status.is-warning{color:#9a4b00;font-weight:600}

/* MOBILE FIXES (30 Oct): iPhone Safari ignores height on native dropdowns, so draw them like the other fields */
.contact-form select{-webkit-appearance:none;appearance:none;font:inherit;font-size:16px;color:var(--ink);background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23475a70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;padding-right:42px}
html[dir=rtl] .contact-form select{background-position:left 14px center;padding-right:14px;padding-left:42px}
/* tick boxes: comfortable tap rows (at least 24px; now about 34px) */
.cf-check,.cf-consent{padding:6px 0}
.cf-checks{gap:2px 20px}
.contact-form select{height:48px;min-height:48px;padding-top:11px;padding-bottom:11px;line-height:24px}