/* ============================================================
   public/css/contact.css: the contact page, on top of glass.css.
   ============================================================ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ct-stage .lq{--t:.56} }

/* ---------- hero ---------- */
.ct-hero{position:relative; padding-top:clamp(84px,7vw,96px)}
.ct-stage{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(14px,2vw,22px); min-height:clamp(620px,50vw,720px); padding:clamp(14px,2.2vw,28px); border-radius:clamp(26px,3vw,40px); overflow:hidden; background:#CDBFA8; box-shadow:var(--shadow-lg)}
.ct-stage > picture,.ct-stage > picture img{position:absolute; inset:0; display:block; width:100%; height:100%}
.ct-stage > picture img{object-fit:cover; object-position:60% 30%}
/* daylight on the photo, only behind the words and under the glass rather than in it: the dark ceiling stripe and desks would otherwise fail contrast */
.ct-stage::before,.ct-stage::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none}
.ct-stage::before{background:linear-gradient(96deg,rgba(255,249,240,.74) 0,rgba(255,249,240,.64) 36%,rgba(255,249,240,.4) 50%,rgba(255,249,240,0) 66%); -webkit-mask:linear-gradient(180deg,#000 52%,transparent 74%); mask:linear-gradient(180deg,#000 52%,transparent 74%)}
.ct-stage::after{background:linear-gradient(0deg,rgba(255,249,240,.66),rgba(255,249,240,.5) 14%,rgba(255,249,240,0) 26%); -webkit-mask:linear-gradient(90deg,#000 64%,transparent 80%); mask:linear-gradient(90deg,#000 64%,transparent 80%)}
.ct-lead,.ct-quick{position:relative; z-index:2}
.ct-lead{display:grid; justify-items:start; gap:10px}
.ct-copy{--t:.14; display:grid; gap:14px; width:min(58%,590px); padding:clamp(22px,2.8vw,36px); border-radius:32px}
.ct-copy h1{margin:0; font-size:clamp(2.75rem,1.9rem + 3.4vw,4.5rem)}
.ct-copy > p{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); font-weight:450; line-height:1.5; text-wrap:pretty}
.ct-badge{display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 22px 10px 10px; border-radius:22px}
.ct-badge b,.cq b,.info-item b{display:block; font:600 1rem/1.25 var(--display)}
.ct-badge span:not(.ic-chip){font-size:.9375rem}
.ct-badge .ic-chip{background:var(--ink); color:#fff; box-shadow:none}
.ct-quick{display:grid; grid-template-columns:repeat(3,minmax(0,max-content)); gap:10px}
.cq{display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 22px 10px 10px; border-radius:22px; transition:transform var(--t-spring) var(--spring)}
.cq:has(a):active{transform:scale(.975); transition-duration:.1s}
.cq a,.cq span{font-size:.9375rem; color:var(--ink)}
.cq a{text-underline-offset:2px}
.cq a::after{content:""; position:absolute; inset:0; border-radius:inherit}
@media (prefers-reduced-motion:no-preference){
  .ct-lead > *,.ct-quick > *{animation:glassIn var(--t-spring) var(--spring) backwards}
  .ct-lead > :nth-child(2){animation-delay:60ms}
  .ct-lead > :nth-child(3){animation-delay:120ms}
  .ct-quick > :nth-child(1){animation-delay:180ms}
  .ct-quick > :nth-child(2){animation-delay:230ms}
  .ct-quick > :nth-child(3){animation-delay:280ms}
}
@keyframes glassIn{from{opacity:0; transform:translate3d(0,10px,0) scale(.98)} to{opacity:1; transform:none}}
@media (max-width:1023px){
  .ct-quick{grid-template-columns:1fr; width:min(100%,380px)}
  /* the chips stack here and climb up over the desks, so the daylight runs the full height */
  .ct-stage::before{-webkit-mask:none; mask:none}
}
@media (max-width:767px){
  .ct-stage{justify-content:flex-end; min-height:0; padding-top:68vw; background:var(--rings-amber) right -420px bottom -360px/820px 820px no-repeat,var(--rings-sky) left -480px top 62%/820px 820px no-repeat,linear-gradient(180deg,#D8C9B3 0,#F1E8DA 74vw,#F4F2EC 100%)}
  .ct-stage > picture,.ct-stage > picture img{height:88vw; bottom:auto}
  .ct-stage > picture{-webkit-mask:linear-gradient(#000 64%,transparent); mask:linear-gradient(#000 64%,transparent)}
  .ct-stage > picture img{object-position:76% 20%}
  .ct-stage::before,.ct-stage::after{display:none}
  .ct-stage .lq{--t:.26}
  .ct-copy{width:100%}
  .ct-quick{width:100%}
}

/* ---------- form ---------- */
.ct-form,.ct-faq{padding-block:clamp(14px,2vw,24px) 0}
.ct-fstage{display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); gap:clamp(24px,4vw,60px); align-items:start; padding:clamp(20px,4vw,60px); border-radius:clamp(26px,3vw,40px); box-shadow:var(--shadow-lg)}
/* stacked in one column the form stage gets tall, so the rings walk down it */
@media (max-width:919px){
  .ct-fstage{--r:900px; background-image:var(--rings-amber),var(--rings-sky),var(--rings-amber),linear-gradient(135deg,#E1EEFB,#FAF3E4); background-size:var(--r) var(--r),var(--r) var(--r),var(--r) var(--r),100% 100%; background-position:right calc(var(--r)/-2) top calc(var(--r)/-2),left calc(var(--r)/-1.8) top 44%,right calc(var(--r)/-2) bottom calc(var(--r)/-2),0 0}
}
.ct-aside{position:sticky; top:96px; display:grid; gap:14px}
.ct-aside h2{font-size:clamp(2.25rem,1.6rem + 1.8vw,3.25rem)}
.ct-aside > p{font-weight:450; text-wrap:pretty}
.info-list{display:grid; gap:10px; margin-top:4px}
.info-item{display:flex; align-items:center; gap:12px; min-height:64px; padding:10px 18px 10px 10px; border-radius:22px; transition:transform var(--t-spring) var(--spring)}
.info-item:has(a):active{transform:scale(.98); transition-duration:.1s}
.info-item a,.info-item span:not(.ic-chip){font-size:.9375rem; color:var(--ink); overflow-wrap:anywhere}
.info-item a{text-underline-offset:2px}
.info-item a::after{content:""; position:absolute; inset:0; border-radius:inherit}
.aside-socials{display:flex; gap:10px; margin-top:2px}
.aside-socials a{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:var(--ink); transition:transform var(--t-spring) var(--spring)}
.aside-socials a:active{transform:scale(.92); transition-duration:.1s}
.aside-socials a:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.ct-card{display:grid; min-width:0}
.ct-card h3{font-size:clamp(1.625rem,1.35rem + .9vw,2.125rem)}
.fc-sub{margin-top:6px; margin-bottom:20px; font-size:.9375rem; font-weight:450}
.req{color:var(--ink); font-weight:700}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.f-group{display:grid; gap:6px; margin-bottom:14px; min-width:0}
.f-group label{font-size:.9375rem; font-weight:600}
/* each field is its own small lens; a little more white so it still reads as somewhere to type */
.f-field{--t:.32; border-radius:16px; transition:--t .2s ease, box-shadow .16s ease}
@media (hover:hover) and (pointer:fine){ .f-field:hover{--t:.42} }
.f-field:focus-within{--t:.66; --lift:0 0 0 1.5px var(--ink), 0 0 0 5px rgba(245,166,35,.6)}
.f-field:has([aria-invalid="true"]){--lift:0 0 0 1.5px var(--red), 0 0 0 5px rgba(179,50,31,.18)}
.f-input,.f-select,.f-textarea{display:block; width:100%; min-width:0; border:0; border-radius:inherit; background-color:transparent; font-size:1rem; color:var(--ink); outline:0; scroll-margin-block:112px}
.f-input,.f-select{height:52px; padding:0 16px}
.f-select{appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%230D1B2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:16px}
.f-select option{color:var(--ink); background:#fff}
.f-textarea{min-height:124px; padding:14px 16px; line-height:1.5; resize:vertical}
.f-input::placeholder,.f-textarea::placeholder{color:#3F4D5B; opacity:1}
/* autofill keeps its text colour, not its yellow box */
.f-input:-webkit-autofill,.f-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink); transition:background-color 99999s linear}
.f-hint{font-size:.875rem}
.f-check{display:flex; align-items:flex-start; gap:12px; margin:2px 0 16px}
.f-check input{flex:none; appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:1px 0 0; border-radius:8px; cursor:pointer; background:rgba(255,255,255,.42) center/16px no-repeat; box-shadow:inset 0 0 0 1.5px rgba(13,27,42,.62), inset 0 2px 2px rgba(255,255,255,.6); scroll-margin-block:112px; transition:background-color .16s ease, transform .16s var(--ease-out)}
.f-check input:active{transform:scale(.9)}
.f-check input:checked{background-color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow:none}
.f-check input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--red), 0 0 0 4px rgba(179,50,31,.18)}
.f-check label{font-size:.9375rem; line-height:1.45}
.f-check a,.form-foot-note a{font-weight:600; text-underline-offset:2px}
.f-submit{width:100%; justify-content:space-between; padding-left:24px}
.f-submit:disabled{opacity:.72; cursor:progress}
.form-foot-note{margin-top:12px; text-align:center; font-size:.9375rem}
/* the message sits under whatever it's about, so it needs real white behind it wherever it lands */
.f-status{display:none; align-items:flex-start; gap:10px; margin-bottom:14px; padding:12px 14px; border-radius:16px; font-size:.9375rem; font-weight:500; line-height:1.4; background:rgba(255,255,255,.78); box-shadow:inset 0 1px 0 #fff, 0 8px 20px -14px rgba(13,27,42,.4)}
.f-status.show{display:flex; animation:statusIn var(--t-spring) var(--spring) both}
.f-status.error svg{color:var(--red)}
.f-status.success svg{color:var(--green)}
.f-status svg{flex:none; margin-top:-1px}
@keyframes statusIn{from{opacity:0; transform:translate3d(0,-6px,0)} to{opacity:1; transform:none}}
.form-success{--t:.16; display:none; align-self:center; justify-items:center; gap:10px; padding:clamp(28px,5vw,60px) clamp(20px,3vw,40px); border-radius:32px; text-align:center}
.form-success.show{display:grid; animation:glassIn var(--t-spring) var(--spring) both}
.form-success h3:focus{outline:0}
.fs-ic{display:grid; place-items:center; width:72px; height:72px; margin-bottom:6px; border-radius:50%; background:var(--ink); color:#fff}
.form-success.show .fs-ic{animation:fsIn var(--t-bounce) var(--spring-bounce) .08s both}
@keyframes fsIn{from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none}}
.form-success p{max-width:34ch; margin-bottom:10px}
@media (max-width:919px){ .ct-fstage{grid-template-columns:1fr} .ct-aside{position:static} }
@media (max-width:767px){ .f-field{--t:.48} }
@media (max-width:560px){ .f-row{grid-template-columns:1fr; gap:0} }

/* ---------- FAQ ---------- */
.ct-fqstage{padding:clamp(28px,4.4vw,64px) clamp(14px,3.4vw,48px) clamp(18px,4.4vw,64px); border-radius:clamp(26px,3vw,40px); box-shadow:var(--shadow-lg)}
.ct-fqhead{display:grid; justify-items:center; gap:4px; margin-bottom:clamp(18px,2.6vw,30px); text-align:center}
.ct-fqstage .faq-glass{max-width:800px; margin-inline:auto}
.faq-glass .faq-item:nth-child(2){--d:50ms}
.faq-glass .faq-item:nth-child(3){--d:100ms}
.faq-glass .faq-item:nth-child(4){--d:150ms}

/* ---------- CTA ---------- */
.ct-cta{padding-block:clamp(14px,2vw,24px) clamp(56px,7vw,96px)}

@media (prefers-reduced-motion:reduce){ .f-status.show,.form-success.show,.form-success.show .fs-ic{animation:none} }