/* ==========================================================================
   SkyHi — Contact page (contact.html)
   Builds on style.css + about.css (+ location.css for crumbs)
   ========================================================================== */

.contact-page{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);min-height:100vh;min-height:100svh;background:var(--charcoal)}

/* ---------- left: sticky aerial panel ---------- */
.contact-visual{position:relative;margin:0}
.contact-visual-inner{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
.contact-visual picture,.contact-visual img{display:block;width:100%;height:100%;object-fit:cover}
.contact-visual img{animation:cv-drift 30s ease-in-out infinite alternate}
@keyframes cv-drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-2%,1.5%)}}
.contact-visual-inner::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom, rgba(28,29,32,.55) 0%, rgba(28,29,32,0) 25%, rgba(28,29,32,0) 60%, rgba(28,29,32,.75) 100%),
  linear-gradient(to right, rgba(48,50,54,0) 70%, rgba(48,50,54,.6) 100%)}
.contact-visual .osd{z-index:2}
.cv-quote{position:absolute;left:calc(var(--gutter) + 40px);right:calc(var(--gutter) + 40px);bottom:clamp(100px, 15vh, 150px);z-index:2;margin:0;font-family:var(--font-display);font-size:clamp(40px, 4.6vw, 72px);line-height:.92;color:var(--white);text-shadow:0 2px 30px rgba(0,0,0,.4)}
.cv-quote em{font-style:normal;color:var(--orange)}
.cv-cap{position:absolute;left:calc(var(--gutter) + 40px);bottom:clamp(58px, 9vh, 76px);z-index:2;margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--beige);opacity:.85}

/* ---------- right: form column ---------- */
.contact-main{padding:clamp(120px, 16vh, 170px) clamp(24px, 6vw, 96px) clamp(60px, 8vw, 110px)}
.contact-main .crumbs{margin-bottom:26px}
.contact-main h1{font-size:clamp(52px, 6.4vw, 104px);line-height:.9;margin:0 0 22px}
.contact-main .lede{max-width:560px;margin-bottom:34px}

.contact-trust{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.contact-trust li{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(245,245,245,.22);border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--beige)}
.contact-trust svg{width:14px;height:14px;fill:none;stroke:var(--orange);stroke-width:2.2}

/* form */
.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px;padding:clamp(22px, 3vw, 40px);border-radius:10px;background:rgba(28,29,32,.72);border:1px solid rgba(245,245,245,.12);max-width:760px}
.enquiry .full{grid-column:1 / -1}
.enquiry .field{display:grid;gap:8px}
.enquiry label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--beige)}
.enquiry label .opt{font-weight:400;letter-spacing:.04em;text-transform:none;opacity:.6;margin-left:4px}
.enquiry label .req{color:var(--orange-text)}
.enquiry input,.enquiry select,.enquiry textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--white);background:rgba(245,245,245,.06);border:1px solid rgba(245,245,245,.18);border-radius:6px;padding:13px 14px;transition:border-color .2s, background .2s;outline:none}
.enquiry textarea{resize:vertical;min-height:140px;line-height:1.5}
.enquiry input::placeholder,.enquiry textarea::placeholder{color:rgba(216,214,201,.45)}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{border-color:var(--orange);background:rgba(245,245,245,.09)}
.enquiry select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E65416' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.enquiry select option{color:var(--ink)}
.enquiry .was-validated :invalid{border-color:#ff7a59}
.enquiry .consent{margin:0;font-size:13px;line-height:1.5;color:var(--beige);opacity:.75}
.enquiry .consent a{color:var(--white);border-bottom:1px solid var(--orange)}
.enquiry .actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.enquiry .actions .btn{min-width:220px}
.enquiry .actions .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.form-status{margin:0;font-size:14px;color:var(--beige)}
.form-status.ok{color:#9fe0a6}
.form-status.err{color:#ff9b80}
.enquiry{position:relative}
.visually-hidden{position:absolute !important;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* success state */
.enquiry-done{display:none;max-width:760px;padding:clamp(28px, 4vw, 48px);border-radius:10px;border:1px solid rgba(230,84,22,.5);background:rgba(28,29,32,.72)}
.enquiry-done h2{font-size:clamp(40px, 4.4vw, 64px);margin:0 0 12px}
.enquiry-done p{color:var(--beige);margin:0 0 22px}
.enquiry-done .eyebrow{color:var(--orange-text);margin-bottom:14px}
.is-sent .enquiry{display:none}
.is-sent .enquiry-done{display:block}

/* next steps */
.next-steps{margin-top:clamp(56px, 7vw, 90px);max-width:760px}
.next-steps h2{font-size:clamp(34px, 3.6vw, 52px);margin:0 0 26px}
.next-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.next-steps li{padding-top:20px;border-top:2px solid rgba(245,245,245,.14);position:relative}
.next-steps li::before{content:"";position:absolute;top:-2px;left:0;width:32px;height:2px;background:var(--orange)}
.next-steps .n{display:block;font-family:var(--font-display);font-size:40px;line-height:1;color:var(--orange);margin-bottom:10px}
.next-steps h3{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1;margin:0 0 8px}
.next-steps p{margin:0;font-size:14px;line-height:1.6;color:var(--beige)}
.next-steps .contact-more{margin:clamp(48px, 5vw, 64px) 0 0;font-size:15px;color:var(--beige)}
.contact-more a{color:var(--white);border-bottom:1px solid var(--orange)}

.page-contact #footer{position:relative}

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .contact-page{grid-template-columns:1fr}
  .contact-visual-inner{position:relative;height:46vh;min-height:300px}
  .cv-quote{font-size:clamp(36px, 9vw, 56px);bottom:84px}
  .contact-main{padding-top:48px}
  .contact-visual-inner::after{background:linear-gradient(to bottom, rgba(28,29,32,.6) 0%, rgba(28,29,32,0) 35%, rgba(48,50,54,.85) 100%)}
}
@media (max-width: 600px){
  .enquiry{grid-template-columns:1fr}
  .next-steps ol{grid-template-columns:1fr}
  .enquiry .actions .btn{width:100%}
  .contact-visual .osd-read{display:none}
}
@media (prefers-reduced-motion: reduce){ .contact-visual img{animation:none} }