/* Contact page only (contact.html). Loads after site.css.
   Works like heyjack.com.au/contact-hey-jack: the whole page is one split section between the header and footer.
   Desktop (1009px+): photo carousel 40% left, cream panel 60% right; the three steps slide sideways.
   Phones and tablets: carousel on top, then every step stacked with one "Submit enquiry" button. */

.c-enq{display:flex;align-items:flex-start;background:var(--ground);color:var(--ink);--err:var(--accent)}
.c-enq__media{position:relative;flex:0 0 40%;width:40%;height:min(58rem,calc(100vh - var(--header-h)));min-height:640px;overflow:hidden;background:color-mix(in srgb,var(--ink) 10%,var(--ground))}
.c-enq__track{display:flex;height:100%;transition:transform .8s cubic-bezier(.45,0,.2,1)}
.c-enq__slide{flex:0 0 100%;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,center)}
.c-enq__panel{flex:1;min-width:0;padding:56px clamp(32px,5.5vw,80px) 72px}
.c-enq__intro{max-width:720px;margin-bottom:40px}
.c-enq__eyebrow{margin:0 0 14px;font:500 13px/1.3 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.c-enq__lead{margin:0 0 14px;font:500 clamp(20px,1vw + 12px,24px)/1.35 var(--f-ui);letter-spacing:0;color:var(--ink)}
.c-enq__text{margin:0;max-width:62ch;font:16px/1.65 var(--f-ui);letter-spacing:.01em;color:var(--muted)}
/* "Prefer to talk?" under the intro: the phone and email, tap to call */
.c-enq__talk{margin:14px 0 0;max-width:62ch;font:16px/1.65 var(--f-ui);letter-spacing:.01em;color:var(--ink);container-type:inline-size}
.c-enq__talk .c-link{font:inherit}

/* progress header: circles on a line that fills to the current step (desktop only, as on Hey Jack) */
.c-steps{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0 0 40px;padding:0;--progress:0}
.c-steps::before,.c-steps::after{content:"";position:absolute;top:15px;left:calc(100% / 6);right:calc(100% / 6);height:2px;background:color-mix(in srgb,var(--ink) 15%,transparent)}
.c-steps::after{right:auto;width:calc((100% - 100% / 3) * var(--progress));background:var(--ink);transition:width .5s var(--ease)}
.c-steps__item{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;font:13px/1.2 var(--f-ui);letter-spacing:.02em;color:var(--muted)}
.c-steps__num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;background:var(--ground);font:16px/1 var(--f-ui);color:var(--ink);box-shadow:0 0 0 8px var(--ground);transition:background-color .3s ease,color .3s ease}
.c-steps__item.is-active{color:var(--ink)}
.c-steps__item.is-active .c-steps__num{background:var(--ink);color:var(--ground)}

/* steps: a row that slides; only the current one has height */
.c-enq__viewport{overflow:hidden;margin:0 -4px;padding:0 4px}
.c-enq__steps{display:flex;align-items:flex-start;transition:transform .5s ease-in-out}
.c-step{flex:0 0 100%;min-width:0;padding:4px}
.c-step.is-off{height:0;overflow:hidden;visibility:hidden}
.c-step > * + *{margin-top:44px}

.f-block[hidden],.f-field[hidden],.f-group[hidden],[data-show-dates][hidden]{display:none}
.f-group{margin-inline:0;margin-bottom:0;padding:0;border:0;min-width:0}
.f-label{display:block;margin:0 0 14px;padding:0;font:500 15px/1.3 var(--f-ui);letter-spacing:.01em;color:var(--ink)}
.f-inline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:18px}
.f-inline__q{float:left;padding:0;margin:0;font:15px/1.4 var(--f-ui);color:var(--muted)}
.f-inline .f-error{flex-basis:100%;margin-top:0}
.f-options{display:flex;flex-wrap:wrap;gap:10px}
.f-options--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.f-options--grid .f-opt span{white-space:nowrap;padding:0 14px}
.f-opt{position:relative;display:flex;cursor:pointer}
.f-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.f-opt span{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:0 20px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);background:var(--ground);font:15px/1.2 var(--f-ui);letter-spacing:.01em;color:var(--ink);text-align:center;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.f-opt:hover span{border-color:var(--ink)}
.f-opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.f-opt input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.f-group[aria-invalid="true"] .f-opt span{border-color:var(--err)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px}
.f-grid + .f-grid{margin-top:22px}
.f-field{display:flex;flex-direction:column;min-width:0}
.f-field--full{grid-column:1 / -1}
.f-input{width:100%;min-height:48px;padding:10px 0;margin:0;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:0;color:var(--ink);font:16px/1.4 var(--f-ui);letter-spacing:.01em;-webkit-appearance:none;appearance:none}
.f-input::placeholder{color:color-mix(in srgb,var(--ink) 55%,transparent);opacity:1}
.f-input:hover{border-bottom-color:var(--ink)}
.f-input:focus-visible{outline:none;border-bottom:1px solid var(--ink);box-shadow:0 1px 0 var(--ink)}
.f-input--box{min-height:120px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);resize:vertical}
.f-input--box:focus-visible{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.f-input[aria-invalid="true"]{border-bottom-color:var(--err);box-shadow:0 1px 0 var(--err)}
.f-input--box[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
select.f-input{padding-right:28px;cursor:pointer}
select.f-input:invalid,select.f-input.is-empty{color:color-mix(in srgb,var(--ink) 55%,transparent)}
select.f-input option{color:var(--ink);background:var(--ground)}
.f-select{position:relative}
.f-select::after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg);pointer-events:none}
/* "(optional)" after a label: quiet, never capitals */
.f-optional{margin-left:4px;font:400 13px/1 var(--f-ui);letter-spacing:.02em;color:var(--muted)}
.f-error{margin:8px 0 0;font:500 14px/1.4 var(--f-ui);color:var(--err)}
.f-error:empty{display:none}
.f-note{margin:8px 0 0;font:14px/1.4 var(--f-ui);color:var(--muted)}
.f-note:empty{display:none}

/* actions: Back (hidden on step 1) left, Next Step right; Next becomes "Submit enquiry" on the last step */
.c-enq__actions{display:flex;align-items:center;gap:16px;margin-top:40px}
.c-enq__back{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 0;background:none;border:0;cursor:pointer;font:500 15px/1 var(--f-ui);color:var(--ink)}
.c-enq__back[hidden]{display:none}
.c-enq__back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.c-enq__back:hover svg{transform:translateX(-4px)}
.c-enq__back:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.c-enq__next{margin-left:auto}
.c-btn--ink{background:var(--ink);border-color:var(--ink);color:var(--ground);font-size:15px;letter-spacing:.04em;padding:0 32px;min-height:54px}
.c-btn--ink:hover{background:transparent;color:var(--ink)}
/* the response promise, under the button on every step */
.c-enq__promise{max-width:75%;margin:20px 0 0 auto;text-align:right;font:500 14px/1.5 var(--f-ui);color:var(--ink)}
.c-enq__agree{max-width:75%;margin:6px 0 0 auto;text-align:right;font:13px/1.5 var(--f-ui);color:var(--muted)}
.c-enq__agree[hidden]{display:none}
.c-enq__error{margin:16px 0 0;font:italic 15px/1.5 var(--f-ui);color:var(--err)}
.c-enq__error:focus{outline:none}

@media (max-width:1008px){
  .c-enq{flex-direction:column}
  .c-enq__media{flex:none;width:100%;height:auto;min-height:0;aspect-ratio:4 / 3}
  .c-enq__panel{width:100%;padding:40px var(--gutter) 56px}
  .c-steps{display:none}
  .c-enq__viewport{overflow:visible;margin:0;padding:0}
  .c-enq__steps{display:block;transform:none!important}
  .c-step,.c-step.is-off{height:auto;overflow:visible;visibility:visible;padding:0}
  .c-step + .c-step{margin-top:32px}
  .c-enq__back{display:none}
  .c-enq__next{width:100%;margin:0}
  .c-enq__agree,.c-enq__promise{max-width:none;text-align:center;margin-left:0}
}
@media (max-width:600px){
  .c-enq__media{aspect-ratio:1 / 1;max-height:400px}
  .f-grid{grid-template-columns:1fr;gap:20px}
  .f-field:has(> .f-label){margin-top:12px}
  .f-options--grid{grid-template-columns:1fr}
  .f-options--grid .f-opt span{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.c-enq__steps,.c-enq__track{transition:none}}