/* ============================================================
   WYVERN FREIGHT · CONTACT (contact.html)
   Customer enquiries = copy of the DP World "Customer Enquiries" block (image-to-code, 2026-10-21):
   dark photo panel (heading + 3 connected steps) with a white form card overlapping it on the right.
   Wyvern system: square corners, Inter Tight, red only on the submit button, no arrow, no reCAPTCHA.
   Fields reuse the Integrity Line field style (legal.css .int-f / .int-sel / .int-err).
   ============================================================ */
.ct-enq{background:var(--tint);border-top:1px solid var(--line)}
.ct-enq-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap);align-items:center;padding-top:96px;padding-bottom:96px}

/* Photo panel: columns 1-8, darkened from 40% to 80% like the reference */
.ct-panel{grid-column:1 / span 8;grid-row:1;position:relative;overflow:hidden;min-height:820px;display:flex;flex-direction:column;justify-content:center;background:var(--night);color:#fff}
.ct-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ct-panel::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(10,12,15,.78) 0,rgba(10,12,15,.55) 55%,rgba(10,12,15,.3) 100%),linear-gradient(to bottom,rgba(10,12,15,.2),rgba(10,12,15,.6))}
.ct-panel-in{position:relative;z-index:2;padding:56px 48px 56px 64px;max-width:472px}
.ct-panel h2{font:500 clamp(34px,3.2vw,48px)/1.05 var(--sans);letter-spacing:-.03em;color:#fff;text-wrap:balance}

/* Steps: icon tile + title + one line, joined by a vertical rule */
.ct-steps{list-style:none;margin:44px 0 0;padding:0;display:grid}
.ct-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:20px;padding-bottom:30px}
.ct-steps li:last-child{padding-bottom:0}
.ct-steps li:not(:last-child)::before{content:"";position:absolute;left:17.5px;top:44px;bottom:6px;width:1px;background:rgba(255,255,255,.4)}
.ct-step-ic{width:36px;height:36px;display:grid;place-items:center;background:#fff;color:var(--ink)}
.ct-step-ic svg{width:20px;height:20px}
.ct-steps h3{margin:6px 0 0;font:500 19px/1.25 var(--sans);letter-spacing:-.01em;color:#fff}
.ct-steps p{margin:6px 0 0;font:400 15px/1.5 var(--sans);color:rgba(255,255,255,.82)}

/* Form card: columns 7-12, overlapping the panel, centred on its height */
.ct-card{grid-column:7 / -1;grid-row:1;position:relative;z-index:1;padding:36px 32px 32px;background:#fff;box-shadow:var(--shadow-overlay)}
.ct-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}
.ct-form > *{min-width:0}
.ct-span{grid-column:1 / -1}
.ct-form .int-f textarea{min-height:104px}
.ct-form .int-sel select:has(option[value=""]:checked){color:var(--subtle)}

/* Consent checkbox */
.ct-check{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;align-items:start;font:400 14px/1.55 var(--sans);color:var(--muted);cursor:pointer}
.ct-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.ct-check a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.ct-check a:hover{text-decoration-color:var(--ink)}
.ct-check input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.ct-submit{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ct-submit .int-err{flex:1 1 220px}
.ct-submit .btn-p{margin-left:auto}
.ct-done{padding:8px 0}
.ct-done h3{font:500 24px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.ct-done p{margin-top:10px;font:400 16px/1.55 var(--sans);color:var(--muted)}
.ct-done a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}

@media (max-width:1024px){
  .ct-panel{grid-column:1 / span 7}
  .ct-card{grid-column:6 / -1}
}
/* Tablet and phone: panel on top, card below it (no overlap) */
@media (max-width:860px){
  .ct-enq-grid{grid-template-columns:minmax(0,1fr);padding-top:56px;padding-bottom:64px}
  .ct-panel,.ct-card{grid-column:1;grid-row:auto}
  .ct-panel{min-height:0}
  .ct-panel-in{padding:48px 28px;max-width:none}
  .ct-card{margin-top:-24px;margin-inline:12px;padding:28px 20px 24px}
}
@media (max-width:560px){
  .ct-form{grid-template-columns:minmax(0,1fr)}
  .ct-card{margin-inline:0}
  .ct-submit .btn-p{width:100%;justify-content:center;margin-left:0}
}

/* Branch dropdown: in-page searchable list (contact.js), drawn in the field style so it opens right under the field */
.ct-combo input{padding-right:40px;cursor:text}
.ct-combo svg{transition:transform .2s var(--ease)}
.ct-combo input[aria-expanded="true"] + svg{transform:translateY(-50%) rotate(180deg)}
.ct-list{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:5;margin:0;padding:4px 0;list-style:none;max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--ink);box-shadow:var(--shadow-overlay)}
.ct-list li{display:flex;align-items:center;min-height:44px;padding:10px 14px;font:400 16px/1.4 var(--sans);color:var(--ink);cursor:pointer}
.ct-list li:hover,.ct-list li.is-active{background:var(--hover)}
.ct-list li[aria-selected="true"]{font-weight:500}
.ct-list li[hidden]{display:none}
.ct-list .ct-none{color:var(--muted);cursor:default}
.ct-list .ct-none:hover{background:none}