/* ==========================================================================
   JARVIS — Contact page                        assets/css/pages/contact.css
   Loaded after site.css. Page-only layout + the stage pills and Dubai dial;
   everything else reuses the shared components (page hero, glass, form,
   contact-meta, steps, marquee, copy button, toast).
   Prefix: .ct-
   ========================================================================== */

/* ---- hero: compact, title kept on two lines on wide screens ---- */
.ct-hero .page-hero-inner{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.ct-hero .page-title{font-size:clamp(46px,5.6vw,88px)}
.ct-hero .page-hero-sub{max-width:20em}

/* ---- enquiry section: glass form (centrepiece) + direct details ---- */
.ct-enquiry{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(88px,9vw,140px)}
.ct-blur img{filter:blur(28px) saturate(.8) brightness(.62);opacity:.5;transform:scale(1.15)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:clamp(32px,4.6vw,76px);align-items:stretch}

.ct-card{padding:clamp(28px,3.9vw,56px)}
.ct-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-bottom:28px;margin-bottom:34px;border-bottom:1px solid var(--hair)}
.ct-card-head .eyebrow{display:flex}   /* block-level: no inline strut, aligns with the aside */
.ct-card-head .h2{margin-top:16px;font-size:clamp(34px,3.3vw,48px)}
.ct-required{font:400 12.5px/1.5 var(--sans);letter-spacing:.02em;color:var(--text-dim);padding-bottom:6px}

/* form fine-tuning */
.ct-form{gap:28px 22px}
.ct-form .form-foot{margin-top:10px}
.ct-form .form-status:empty{margin-top:-28px}   /* no empty grid gap under the button */
.ct-form textarea{min-height:150px}
.ct-form noscript{grid-column:1/-1}   /* the no-JS note spans the form */

/* project stage: radio pills (serif values, like the inputs) */
.ct-stage{margin:0;padding:0;border:0;min-width:0}
.ct-stage legend{padding:0;margin-bottom:12px;font:500 10px/1.2 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.ct-pills{display:flex;flex-wrap:wrap;gap:8px}
.ct-stage .ct-pill{position:relative;display:inline-flex;font:inherit;letter-spacing:normal;text-transform:none;color:inherit;cursor:pointer}
.ct-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ct-pill span{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 12px;border:1px solid rgba(245,240,235,.26);border-radius:999px;background:rgba(10,26,31,.35);font:300 15.5px/1.2 var(--serif);color:var(--text);white-space:nowrap;transition:border-color .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease)}
.ct-pill span::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:1px solid rgba(201,169,110,.7);transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.ct-pill:hover span{border-color:var(--gold);color:var(--cream)}
.ct-pill input:checked + span{border-color:var(--gold);background:rgba(201,169,110,.16);color:var(--cream)}
.ct-pill input:checked + span::before{background:var(--gold-light);border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(201,169,110,.2)}
.ct-pill input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}

/* fallback panel shown after sending (contact.js) */
.ct-sent{grid-column:1/-1;margin-top:-6px;padding:18px 20px;border:1px solid var(--hair);border-radius:4px;background:rgba(10,26,31,.42)}
.ct-sent p{font:400 13.5px/1.55 var(--sans);letter-spacing:.01em;color:var(--text)}
.ct-sent p a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.ct-sent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:12px}

/* direct details */
.ct-direct{display:flex;flex-direction:column;padding-top:calc(clamp(28px,3.9vw,56px) + 1px)}   /* = card padding + border */
.ct-direct .h3{margin-top:18px}
.ct-meta{margin-top:30px;padding-top:0;gap:0;border-bottom:1px solid var(--hair)}
.ct-meta > div{padding:22px 0;border-top:1px solid var(--hair)}
.ct-mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ct-time{display:flex;align-items:center;gap:16px}
.ct-time-text{display:flex;flex-direction:column;gap:4px}
.ct-tz{font:500 10px/1.4 var(--sans);letter-spacing:.24em;color:var(--text-dim)}
html:not(.js) .ct-tz,html:not(.js) .ct-dial{display:none}

.ct-dial{flex:none;width:52px;height:52px;overflow:visible}
.ct-dial-face{fill:rgba(10,26,31,.4);stroke:var(--hair-strong);stroke-width:1}
.ct-dial-ticks line{stroke:rgba(212,187,138,.55);stroke-width:1.2;stroke-linecap:round}
.ct-dial-h,.ct-dial-m{stroke:var(--cream);stroke-linecap:round}
.ct-dial-h{stroke-width:2.2}
.ct-dial-m{stroke-width:1.4;stroke:var(--gold-light)}
.ct-dial-c{fill:var(--gold)}

.ct-partner{margin-top:clamp(36px,4vw,56px)}
.ct-partner-k{font:500 10px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.ct-partner-q{margin-top:12px;font:300 italic 20px/1.45 var(--serif);color:var(--text);max-width:22em}
.ct-partner .link-arrow{margin-top:14px}

/* ---- what happens next (cream) ---- */
.ct-steps{margin-top:clamp(40px,4.4vw,60px)}
.ct-steps > li{padding-bottom:10px}
.ct-steps h3{font-size:clamp(23px,2vw,29px);line-height:1.28;max-width:15em;text-wrap:balance}

/* slim client strip */
.ct-trust{margin-top:clamp(72px,8vw,112px);padding-top:clamp(40px,4vw,56px);border-top:1px solid rgba(201,169,110,.45);display:flex;justify-content:center}
.ct-logos{margin-top:22px}
.ct-next{padding-bottom:clamp(72px,7vw,104px)}
.ct-logos .mq-track li{width:clamp(104px,10vw,144px);height:clamp(72px,6.4vw,92px);margin:0 clamp(10px,1.6vw,24px)}
.ct-next .mq-toggle{margin-top:18px}

/* ---- quiet sign-off ---- */
.ct-signoff{position:relative;background:radial-gradient(ellipse 46% 80% at 50% 100%, rgba(0,74,89,.32) 0%, rgba(0,74,89,0) 70%),var(--ink);padding:clamp(80px,9vw,128px) 0 clamp(64px,7vw,96px)}
.ct-signoff-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.ct-signoff .bird{width:56px;filter:drop-shadow(0 0 14px rgba(201,169,110,.35))}
.ct-signoff-inner > p:not(.ct-signoff-by){margin-top:22px;font:300 clamp(28px,3vw,42px)/1.2 var(--serif);color:var(--cream);text-wrap:balance}
.ct-signoff-inner em{font-style:italic;color:var(--gold-light)}
.ct-signoff-by{display:flex;align-items:center;gap:14px;margin-top:22px;font:500 10.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--text-dim)}
.ct-signoff-by::before,.ct-signoff-by::after{content:"";width:28px;height:1px;background:var(--gold);opacity:.6}

/* ---- responsive ---- */
@media (max-width:1023px){
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .ct-direct{padding-top:8px}
  .ct-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--hair)}
  .ct-meta > div{border-top:0}
  .ct-partner{margin-top:36px}
  .ct-hero .page-hero-inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .ct-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ct-meta > div:first-child{grid-column:1/-1}
  .ct-meta > div + div{border-top:1px solid var(--hair)}
}
@media (max-width:767px){
  .ct-enquiry{padding-top:40px}
  .ct-card{padding:28px 22px 30px}
  .ct-card-head{padding-bottom:22px;margin-bottom:26px}
  .ct-meta{grid-template-columns:minmax(0,1fr)}
  .ct-meta > div{padding:18px 0}
  .ct-pill span{min-height:42px;padding:0 15px 0 12px;font-size:15.5px}
  .ct-pills{gap:8px}
  .ct-form .form-foot .btn{width:100%}
  .ct-steps h3{font-size:24px}
  .ct-signoff-inner > p:not(.ct-signoff-by){font-size:30px}
}