/* ---- the enquiry form ---------------------------------------------------
   Shared by the homepage, the contact page and the careers page, so the form
   exists once. It was inline in the homepage until 2026-08-17. The card, the
   drawn listbox and the human check all live here; the sections around them
   do not. */

.ccard{background:#fff;border-radius:var(--r);padding:clamp(20px,2vw,30px);
 box-shadow:0 1px 0 rgba(19,26,38,.06),0 18px 44px rgba(19,26,38,.06)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.form .full{grid-column:1 / -1}
/* ⚠️ ON A PHONE EVERY FIELD HAS ITS OWN LINE. Two abreast at 390px gave name
   and email 144px each, which cuts off what the visitor is typing. The user's
   words: "email and company is not going in next line". 640 and not 900: the
   contact page's card is roughly half the viewport above that, so two columns
   still have room there. */
@media (max-width:640px){
 .form{grid-template-columns:1fr}
}
.fld{display:block}
.lb{display:flex;align-items:baseline;gap:6px;font-family:'TTS';font-size:12px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.lb em{font-style:normal;color:var(--flare)}
/* --silver on white is 2.9:1, which is not text. --slate is 5.6:1. */
.lb .count{margin-left:auto;font-weight:400;letter-spacing:.06em;color:var(--slate)}
.form input,.form textarea,.form select{width:100%;background:#fff;color:var(--ink);
 border:1px solid var(--mist);border-radius:var(--r);padding:10px 12px;
 font-family:var(--body);font-size:15.5px;transition:border-color .18s ease,box-shadow .18s ease}
/* the category listbox, drawn by us so it can carry the design */
.sel{position:relative}
.sel-btn{width:100%;display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);
 border:1px solid var(--mist);border-radius:var(--r);padding:12px 13px;cursor:pointer;
 font-family:'TTS';font-size:15px;letter-spacing:-.0074em;text-align:left;
 transition:border-color .18s ease,box-shadow .18s ease}
.sel-btn i{margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--slate);
 border-bottom:1.5px solid var(--slate);transform:rotate(45deg) translate(-2px,-2px);
 transition:transform .2s ease}
.sel-btn[aria-expanded="true"]{border-color:var(--flare);box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}
.sel-btn[aria-expanded="true"] i{transform:rotate(-135deg) translate(-2px,-2px)}
.sel-btn:focus-visible{outline:0;border-color:var(--flare);box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}
.sel-list{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:270px;
 overflow:auto;background:#fff;border:1px solid var(--mist);border-radius:var(--r);
 box-shadow:0 14px 38px rgba(19,26,38,.14);list-style:none;padding:5px}
.sel-list li{padding:10px 11px;border-radius:var(--r);cursor:pointer;
 font-family:'TTS';font-size:15px;letter-spacing:-.0074em;color:var(--graphite)}
.sel-list li[aria-selected="true"]{color:var(--flare)}
.sel-list li.on{background:var(--paper)}
@media (hover:hover){.sel-list li:hover{background:var(--paper)}}
/* the drag handle is capped: an unbounded textarea can be pulled taller than
   the card and breaks the section's 100vh fit */
.form textarea{resize:vertical;min-height:76px;max-height:260px;line-height:1.55}
.form input::placeholder,.form textarea::placeholder{color:var(--silver)}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--flare);
 box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}
.form .cta{gap:.32em;margin-top:2px;border:0;cursor:pointer;width:100%;justify-content:center;height:46px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* THE TICK is Cloudflare Turnstile at data-size="flexible", which is why it
   can be the width of the message box: the widget stretches to its container
   from a 300px minimum. Google's reCAPTCHA cannot, which is why it is not here.

   No frame of ours: Turnstile draws its own bordered card, and a border round a
   border reads as a mistake. */
.cap{display:block;width:100%;min-width:0}
.cap .cf-turnstile{width:100%}
.cap iframe{width:100% !important}
/* ⚠️ Flexible has a 300px floor of its own, and the card is narrower than that
   below about 340px, so there the widget is pinned at 300 and scaled down from
   its top left corner. Without this the page scrolls sideways on a small
   phone. */
@media (max-width:360px){
 /* the widget keeps its 300px and is scaled inside a box that is still the
    grid's width: giving .cap itself 300px made the whole form 300 wide and
    pushed the page sideways on a 320px screen */
 .cap{overflow:hidden;height:62px}
 .cap .cf-turnstile{width:300px !important;transform:scale(.92);transform-origin:0 0}
 .cap iframe{width:300px !important}
}
@media (max-width:340px){
 .cap{height:54px}
 .cap .cf-turnstile{transform:scale(.78)}
}

/* ---- attach a CV (careers) ---------------------------------------------
   The native file input is hidden and its label is the control, because the
   browser's own button cannot be styled. The label still receives the click
   and the keyboard, so nothing is lost by hiding the input. */
.file .drop{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;
 background:#fff;border:1px solid var(--mist);border-radius:var(--r);padding:8px 10px;
 transition:border-color .18s ease,box-shadow .18s ease}
@media (hover:hover){.file .drop:hover{border-color:var(--slate)}}
.file .drop:focus-within{border-color:var(--flare);box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}
.file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop-btn{flex:none;font-family:'TTS';font-size:13px;letter-spacing:.06em;text-transform:uppercase;
 color:var(--graphite);background:var(--paper);border:1px solid var(--mist);border-radius:var(--r);
 padding:7px 12px}
.drop-name{min-width:0;font-size:14.5px;line-height:1.4;color:var(--slate);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop.has .drop-name{color:var(--graphite)}
.drop.over{border-color:var(--flare);background:rgba(var(--red-rgb),.04);
 box-shadow:0 0 0 3px rgba(var(--red-rgb),.12)}
.drop.bad{border-color:var(--flare)}
.drop.bad .drop-name{color:var(--flare)}
/* The remove control appears only once a file is attached. The [hidden] rule
   is not optional: `display:grid` below overrides the hidden attribute's own
   `display:none`, so without it the button shows on an empty field. */
.drop-x[hidden]{display:none}
.drop-x{flex:none;margin-left:auto;width:30px;height:30px;display:grid;place-items:center;
 padding:0;border:0;border-radius:var(--r);background:transparent;color:var(--slate);cursor:pointer;
 transition:background .18s ease,color .18s ease}
.drop-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (hover:hover){.drop-x:hover{background:rgba(var(--red-rgb),.10);color:var(--flare)}}
.drop-x:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.lb .hint{margin-left:auto;font-weight:400;letter-spacing:.06em;color:var(--slate)}

/* what happened to the enquiry, said in the form rather than on another page */
.form-status{grid-column:1/-1;margin-top:14px;padding:13px 16px;border-radius:var(--r);
 font-size:15px;line-height:1.5;border:1px solid var(--mist);background:rgba(var(--ink-rgb),.02);
 color:var(--slate)}
.form-status:empty{display:none}
.form-status.is-busy{border-color:rgba(var(--blue-rgb),.35);background:rgba(var(--blue-rgb),.06);
 color:var(--graphite)}
.form-status.is-ok{border-color:rgba(var(--blue-rgb),.45);background:rgba(var(--blue-rgb),.08);
 color:var(--ink)}
.form-status.is-bad{border-color:rgba(var(--red-rgb),.45);background:rgba(var(--red-rgb),.06);
 color:var(--ink)}