/* Delviom — Contact page (inner page).
   Layered on top of main.css + index1.css so header, footer and tokens stay
   identical to the approved homepage design.
   Layout reference: 1300australia.com.au/contact —
     1. dark wave banner: heading + lead left, image right
     2. pale-blue "Get in touch" band: hours/address left, call badge right,
        then square media left + white form card right */

/* Screen-reader-only (form labels are visual placeholders in this design) */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ===================== Inner banner (large-bg-wave) ===================== */
.page-banner {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   color: #fff;
   background-color: var(--navy-deep);
   background-image: url("../images/large-bg-wave.png");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   border-bottom-left-radius: 40px;
   border-bottom-right-radius: 40px;
   padding-top: calc(var(--header-height) + clamp(30px, 4vw, 56px));
   padding-bottom: clamp(48px, 5.5vw, 76px);
}

/* Deepens the left side so white type stays readable over the wave */
/* .page-banner::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(100deg,
         rgba(5, 20, 40, 0.72) 0%,
         rgba(5, 20, 40, 0.46) 44%,
         rgba(5, 20, 40, 0.10) 78%,
         rgba(5, 20, 40, 0.00) 100%);
} */

.page-banner-inner {
   display: grid;
   grid-template-columns: 1fr 0.92fr;
   align-items: center;
   gap: clamp(32px, 5vw, 72px);
}

.page-banner-title {
   font-size: clamp(2.2rem, 4.6vw, 3.5rem);
   line-height: 1.1;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: #fff;
}

.page-banner-lead {
   margin-top: clamp(18px, 2.2vw, 26px);
   max-width: 58ch;
   color: rgba(245, 247, 250, 0.86);
   font-size: clamp(1rem, 1.25vw, 1.1rem);
   line-height: 1.75;
}

/* Sample image, right side */
.page-banner-media {
   justify-self: end;
   width: 100%;
   max-width: 620px;
}

/* hero-contact-us.jpg already carries the gold corner motif, so it gets a clean
   rounded crop rather than another frame on top of it. */
.page-banner-media img {
   width: 100%;
   height: clamp(300px, 30vw, 420px);
   object-fit: cover;
   object-position: center;
   border-radius: 22px;
   box-shadow: 0 26px 60px rgba(3, 12, 26, 0.42);
}

/* ===================== "Get in touch" band ===================== */
.get-in-touch {
   background: rgb(233, 252, 255);
   padding-block: clamp(48px, 6vw, 78px);
}

.git-head {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: clamp(24px, 4vw, 48px);
   margin-bottom: clamp(32px, 4vw, 52px);
}

.git-head h2 {
   color: var(--navy);
   font-size: clamp(1.7rem, 3vw, 2.5rem);
   font-weight: 700;
   letter-spacing: -0.02em;
   margin-bottom: 20px;
}

.git-line {
   color: var(--text);
   font-size: 1rem;
   line-height: 1.9;
}

.git-line strong {
   color: var(--navy);
   font-weight: 700;
}

/* Call-us badge (circle icon + label + number) */
.call-badge {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   white-space: nowrap;
}

.call-badge-icon {
   display: grid;
   place-items: center;
   width: 58px;
   height: 58px;
   flex: none;
   border-radius: 50%;
   background: var(--white);
   color: var(--teal-deep);
   box-shadow: 0 8px 20px rgba(11, 31, 58, 0.10);
   transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.call-badge-icon svg {
   width: 24px;
   height: 24px;
}

.call-badge small {
   display: block;
   color: var(--navy);
   font-size: 0.9rem;
   font-weight: 600;
   line-height: 1.4;
}

.call-badge strong {
   display: block;
   color: var(--steel);
   font-size: clamp(1.4rem, 2.2vw, 1.9rem);
   font-weight: 700;
   letter-spacing: -0.01em;
   line-height: 1.2;
   transition: color .2s ease;
}

.call-badge:hover .call-badge-icon {
   background: var(--teal-deep);
   color: #fff;
   transform: translateY(-2px);
}

.call-badge:hover strong {
   color: var(--navy);
}

/* ---------- Media (brand image) + form ---------- */
.git-body {
   display: grid;
   grid-template-columns: 0.5fr 1fr;
   gap: clamp(24px, 3vw, 40px);
   align-items: start;
}

/* Grid items default to min-width:auto, so the widest intrinsic child (a form
   field, the reCAPTCHA widget) can push a column past its track and put the
   whole page into horizontal scroll on small phones. */
.git-body>* {
   min-width: 0;
}

.git-media {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

/* Homepage hero artwork. It is a wide 16:9 frame with the Capitol on the right,
   so the crop is pushed right to keep the subject in a portrait-ish slot. */
.git-media-figure {
   overflow: hidden;
   border-radius: 22px;
   box-shadow: 0 10px 30px rgba(11, 31, 58, 0.10);
}

.git-media-figure img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 1;
   min-height: 320px;
   object-fit: cover;
   /* object-position: 78% center; */
}

.contact-social {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 13px 20px;
   border-radius: 14px;
   background: var(--white);
   color: var(--navy);
   font-size: 0.92rem;
   font-weight: 600;
   box-shadow: 0 6px 18px rgba(11, 31, 58, 0.07);
   transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.contact-social svg {
   width: 18px;
   height: 18px;
}

.contact-social:hover {
   background: var(--navy);
   color: #fff;
   transform: translateY(-2px);
}

/* ---------- Form card ---------- */
.contact-form {
   padding: clamp(26px, 3vw, 44px);
   border-radius: 24px;
   background: var(--white);
   box-shadow: 0 14px 40px rgba(11, 31, 58, 0.08);
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
}

.field {
   display: block;
}

.field--full {
   grid-column: 1 / -1;
}

/* Input shell holds the trailing icon */
.field-control {
   position: relative;
   display: block;
}

.field-control input,
.field-control textarea {
   width: 100%;
   /* beats the control's default intrinsic width on narrow screens */
   min-width: 0;
   padding: 16px 48px 16px 20px;
   border-radius: 12px;
   border: 1px solid rgba(62, 110, 156, 0.28);
   background: var(--white);
   color: var(--ink);
   font-size: 0.96rem;
   transition: border-color .18s ease, box-shadow .18s ease;
}

.field-control textarea {
   min-height: 132px;
   padding-right: 20px;
   resize: vertical;
}

.field-control input::placeholder,
.field-control textarea::placeholder {
   color: var(--steel);
   opacity: 0.85;
}

.field-control input:focus,
.field-control textarea:focus {
   outline: none;
   border-color: var(--teal);
   box-shadow: 0 0 0 3px rgba(92, 183, 170, 0.18);
}

.field-icon {
   position: absolute;
   top: 50%;
   right: 18px;
   width: 20px;
   height: 20px;
   transform: translateY(-50%);
   color: var(--steel);
   opacity: 0.75;
   pointer-events: none;
}

/* Footer row of the card: captcha left, gold submit right */
.form-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   margin-top: 22px;
}

.contact-form .g-recaptcha {
   margin: 0;
   max-width: 100%;
   overflow: hidden;
}

.btn-submit {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 200px;
   height: 54px;
   padding: 0 34px;
   border-radius: 12px;
   background: var(--gold);
   color: var(--navy-deep);
   font-size: 0.98rem;
   font-weight: 600;
   letter-spacing: 0.01em;
   transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.btn-submit:hover {
   background: var(--gold-deep);
   transform: translateY(-2px);
}

.contact-form .form-status {
   margin-top: 16px;
}

.contact-form .form-note {
   margin-top: 14px;
   color: var(--muted);
   font-size: 0.82rem;
   line-height: 1.6;
}

/* ===================== HQ map band (contained, on white) ===================== */
.map-band {
   background: var(--white);
   padding-block: clamp(48px, 3vw, 78px);
}

/* Overrides index1.css's inline-contact map block (margin/border/fixed height) */
.map-band .contact-map {
   margin-top: 0;
   border: 0;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 14px 40px rgba(11, 31, 58, 0.10);
}

.map-band .contact-map iframe {
   display: block;
   width: 100%;
   height: clamp(320px, 25vw, 440px);
   border: 0;
}

/* Lenis disables iframe pointer events globally — the map needs them back */
.lenis.lenis-smooth .map-band .contact-map iframe {
   pointer-events: auto;
}

/* ===================== Responsive ===================== */
@media (max-width: 1080px) {
   .page-banner-inner {
      grid-template-columns: 1fr;
      gap: clamp(34px, 5vw, 48px);
   }

   .page-banner-media {
      justify-self: stretch;
      max-width: 100%;
   }

   .git-body {
      grid-template-columns: 1fr;
   }

   .git-media-figure img {
      aspect-ratio: 16 / 9;
      min-height: 0;
      object-position: 78% center;
   }

   .contact-social {
      align-self: flex-start;
   }
}

@media (max-width: 820px) {
   .git-head {
      grid-template-columns: 1fr;
      align-items: start;
   }
}

@media (max-width: 620px) {
   .page-banner {
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
   }

   .page-banner-media img {
      border-radius: 18px;
   }

   .form-grid {
      grid-template-columns: 1fr;
   }

   /* The reCAPTCHA iframe renders at a fixed 304px; scale it so it clears the
      form's padding on a 360px-wide phone instead of forcing a scrollbar. */
   .contact-form .g-recaptcha {
      transform: scale(0.85);
      transform-origin: 0 50%;
      height: 66px;
   }

   .form-actions {
      justify-content: flex-start;
   }

   .btn-submit {
      width: 100%;
   }
}