/* =============================================
   FOOTER / ENQUIRE — Figma 175:3779 "21" (1920×1401)
   Building render behind, enquiry heading + form on the right,
   QR / site links / contact top-left, SWO logo bottom-left,
   copyright bottom-right.
   The Figma frame is horizontally mirrored, so every coordinate here
   is the TRUE (un-mirrored) position read off the reference render.
   Every measurement is Figma px × --dpx (see CONVENTIONS).
   The CSS holds the FINAL (revealed) state; js/sections/footer.js
   fades the intro and the form up once the section enters the viewport.
   ============================================= */

.sec-footer .sec-canvas {
  height: calc(1401 * var(--dpx));
}

/* ---- Background — Figma 175:3780 ----
   1  full-frame render (assets/images/5.webp), covering the 1920×1401 frame
   2  cream fade from the top (#fffcef → transparent at 34.19%)
   3  dark fade at the bottom (transparent 69.2% → 26% at 81.63% → black at 107.6%)
   The Figma composition also carried a transparent-sky cut-out of the building on top of
   the cream fade; the new render set has no alpha-matted version, so that layer is gone
   (mobile already hid it) and the building now fades into the cream like every section.  */
.sec-footer .footer-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.sec-footer .footer-bg__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.sec-footer .footer-bg__fade {
  position: absolute;
  inset: 0;
}

.sec-footer .footer-bg__fade--cream {
  background: linear-gradient(to bottom, #fffcef 0%, rgba(255, 252, 239, 0) 34.19%);
}

.sec-footer .footer-bg__fade--dark {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 69.2%, rgba(0, 0, 0, 0.26) 81.63%, #000 107.6%);
}

/* Everything else sits above the background */
.sec-footer .footer-intro,
.sec-footer .footer-form,
.sec-footer .footer-nav,
.sec-footer .footer-contact,
.sec-footer .footer-qr,
.sec-footer .footer-logo,
.sec-footer .footer-copy {
  position: absolute;
  z-index: 1;
}

/* ---- Intro — Figma 175:3799: 596 wide, right edge 1788 (left 1192), top 68, items-end, gap 30 ---- */
.sec-footer .footer-intro {
  left: calc(1192 * var(--dpx));
  top: calc(68 * var(--dpx));
  width: calc(596 * var(--dpx));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(30 * var(--dpx));
  text-align: right;
}

/* Heading — Figma 175:3800: 562 wide, Loren Blake 64/76, three lines (the display face
   sets "sai world one" in its own swash capitals) */
.sec-footer .footer-title {
  width: calc(562 * var(--dpx));
  font-size: calc(64 * var(--dpx));
  line-height: calc(76 * var(--dpx));
}

/* Lead — Figma 175:3801: 556 wide, Neue Haas 45 Light 18/28 */
.sec-footer .footer-lead {
  width: calc(556 * var(--dpx));
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.556;
}

/* ---- Form — Figma 175:3802: 586 wide @ 1202,429; fields block then the button 45 below ---- */
.sec-footer .footer-form {
  left: calc(1202 * var(--dpx));
  top: calc(429 * var(--dpx));
  width: calc(586 * var(--dpx));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(45 * var(--dpx));
}

.sec-footer .footer-form__fields {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--dpx));
  width: 100%;
}

/* Row — Figma 175:3804: two 261-wide fields, gap 64 */
.sec-footer .footer-form__row {
  display: flex;
  gap: calc(64 * var(--dpx));
  width: 100%;
}

/* Field — Figma 175:3805: 261×41 = 22px label line + 19 gap + 1px rule (Vector 104) */
.sec-footer .footer-field {
  position: relative;
  flex: 0 0 auto;
  width: calc(261 * var(--dpx));
}

.sec-footer .footer-field--full {
  width: 100%;
}

.sec-footer .footer-field__control {
  display: block;
  width: 100%;
  height: calc(41 * var(--dpx));
  padding: 0 0 calc(19 * var(--dpx));
  margin: 0;
  border: 0;
  border-bottom: max(1px, calc(1 * var(--dpx))) solid rgba(48, 48, 48, 0.36);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.222;
  color: var(--dark);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.sec-footer .footer-field__control::placeholder {
  color: transparent;
}

.sec-footer .footer-field__control--textarea {
  min-height: calc(41 * var(--dpx));
  resize: none;
  overflow: hidden;
}

/* Native <select> needs an explicit text colour on the cream ground */
.sec-footer select.footer-field__control {
  cursor: pointer;
  padding-right: calc(24 * var(--dpx));
}

.sec-footer select.footer-field__control option {
  color: var(--dark);
  background: var(--cream);
}

/* Small chevron so the two selects read as menus (not in Figma, kept discreet) */
.sec-footer .footer-field--select::after {
  content: '';
  position: absolute;
  right: calc(4 * var(--dpx));
  top: calc(5 * var(--dpx));
  width: calc(8 * var(--dpx));
  height: calc(8 * var(--dpx));
  border-right: max(1px, calc(1 * var(--dpx))) solid rgba(48, 48, 48, 0.55);
  border-bottom: max(1px, calc(1 * var(--dpx))) solid rgba(48, 48, 48, 0.55);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Focus: the rule turns gold (the global outline would box the underline field) */
.sec-footer .footer-field__control:focus,
.sec-footer .footer-field__control:focus-visible {
  outline: none;
  border-bottom-color: var(--gold);
  box-shadow: 0 max(1px, calc(1 * var(--dpx))) 0 0 var(--gold);
}

/* Keep browser autofill from painting the field */
.sec-footer .footer-field__control:-webkit-autofill,
.sec-footer .footer-field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dark);
  transition: background-color 999999s ease-in-out 0s;
}

/* Label — Figma 175:3807: Neue Haas 45 Light 18, sits where the value will be typed;
   floats up (small, muted) once the field is focused or filled */
.sec-footer .footer-field__label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.222;
  color: var(--dark);
  white-space: nowrap;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

/* (:placeholder-shown is the no-JS fallback for inputs/textarea only — a <select>
   never "shows a placeholder", so it relies on the is-filled class set by JS) */
.sec-footer .footer-field__control:focus ~ .footer-field__label,
.sec-footer input.footer-field__control:not(:placeholder-shown) ~ .footer-field__label,
.sec-footer textarea.footer-field__control:not(:placeholder-shown) ~ .footer-field__label,
.sec-footer .footer-field.is-filled .footer-field__label {
  transform: translateY(calc(-17 * var(--dpx))) scale(0.67);
  color: var(--text-gray);
}

.sec-footer .footer-field__control:focus ~ .footer-field__label {
  color: var(--gold);
}

/* Inline error — sits in the 28px row gap under the rule */
.sec-footer .footer-field__error {
  position: absolute;
  left: 0;
  top: 100%;
  margin: calc(4 * var(--dpx)) 0 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: max(calc(12 * var(--dpx)), 11px);
  line-height: 1.167;
  color: #b3402e;
  white-space: nowrap;
}

.sec-footer .footer-field__error:empty {
  display: none;
}

.sec-footer .footer-field.is-invalid .footer-field__control {
  border-bottom-color: #b3402e;
}

.sec-footer .footer-field.is-invalid .footer-field__label {
  color: #b3402e;
}

/* Action row — the 190-wide button hugs the right edge; the status text shares the row */
.sec-footer .footer-form__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(24 * var(--dpx));
  width: 100%;
}

.sec-footer .footer-form__status {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: max(calc(14 * var(--dpx)), 11px);
  line-height: 1.429;
  text-align: right;
  color: #b3402e;
}

.sec-footer .footer-form__status:empty {
  display: none;
}

/* Sent: the thank-you note replaces the button in its slot */
.sec-footer .footer-form.is-sent .footer-form__status {
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.444;
  color: var(--dark);
}

.sec-footer .footer-form.is-sent .footer-form__submit {
  display: none;
}

/* Submit — Figma 175:3835: 190×35, padding 8 0, Neue Haas 55 Roman 16 tracking 0.8 uppercase gold,
   0.6px gold bottom rule */
.sec-footer .footer-form__submit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(190 * var(--dpx));
  padding: calc(8 * var(--dpx)) 0;
  border: 0;
  border-bottom: max(1px, calc(0.6 * var(--dpx))) solid var(--gold);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: max(calc(16 * var(--dpx)), 12px);
  line-height: normal;
  letter-spacing: calc(0.8 * var(--dpx));
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.sec-footer .footer-form__submit:hover,
.sec-footer .footer-form__submit:focus-visible {
  color: var(--dark);
  border-bottom-color: var(--dark);
}

.sec-footer .footer-form__submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Site links — Figma 175:3792 @ 396,68 and 175:3787 @ 609,68 (113 wide, gap 100 between) ---- */
.sec-footer .footer-nav {
  left: calc(396 * var(--dpx));
  top: calc(68 * var(--dpx));
  display: flex;
  gap: calc(100 * var(--dpx));
}

.sec-footer .footer-nav__col {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--dpx));
  width: calc(113 * var(--dpx));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Shared link/contact type — Neue Haas 45 Light 18/26 #303030 */
.sec-footer .footer-nav__col li,
.sec-footer .footer-link,
.sec-footer .footer-contact__addr {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.444;
  color: var(--dark);
  margin: 0;
}

.sec-footer .footer-nav__col li {
  white-space: nowrap;
}

.sec-footer .footer-link {
  display: inline-block;
  text-decoration: none;
  transition: color 0.25s var(--ease-out);
}

.sec-footer .footer-link:hover,
.sec-footer .footer-link:focus-visible {
  color: var(--gold);
}

/* ---- Contact — Figma 175:3783: 273 wide @ 822,68, rows gap 14
        (the e-mail line is 294 wide in Figma and overhangs the column) ---- */
.sec-footer .footer-contact {
  left: calc(822 * var(--dpx));
  top: calc(68 * var(--dpx));
  width: calc(273 * var(--dpx));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--dpx));
  font-style: normal;
}

.sec-footer .footer-contact__phone,
.sec-footer .footer-contact__email {
  white-space: nowrap;
}

.sec-footer .footer-contact__addr {
  width: 100%;
}

/* ---- QR code — Figma 175:3797: 167×167 @ 129,68, 1px rgba(0,0,0,.1) border ---- */
.sec-footer .footer-qr {
  left: calc(129 * var(--dpx));
  top: calc(68 * var(--dpx));
  width: calc(167 * var(--dpx));
  height: calc(167 * var(--dpx));
  margin: 0;
  border: 1px solid var(--border-light);
  background: var(--white);
  overflow: hidden;
}

.sec-footer .footer-qr img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

/* ---- Logo — Figma 175:3838: 140.46×149.84 @ 129,1190 ---- */
.sec-footer .footer-logo {
  left: calc(129 * var(--dpx));
  top: calc(1190 * var(--dpx));
  width: calc(140.46 * var(--dpx));
  height: calc(149.84 * var(--dpx));
  max-width: none;
}

/* ---- Copyright — Figma 175:3781: Neue Haas 45 Light 23/26 tracking 1.15 white,
        right edge 1788 (right 132), top 1314 ---- */
.sec-footer .footer-copy {
  right: calc(132 * var(--dpx));
  top: calc(1314 * var(--dpx));
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: calc(23 * var(--dpx));
  line-height: calc(26 * var(--dpx));
  letter-spacing: calc(1.15 * var(--dpx));
  color: var(--white);
  white-space: nowrap;
}

/* =============================================
   RESPONSIVE — below the scaled canvas (<992px)
   Stack in reading order: intro, form (single column), submit, links
   (two columns), contact, QR, logo, copyright. The render stays behind,
   anchored to the bottom, cream over its sky and dark over its base so
   the white logo/copyright stay legible.
   ============================================= */

@media (max-width: 991px) {
  .sec-footer .sec-canvas {
    height: auto;
    padding: 64px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    background: var(--cream);
  }

  .sec-footer .footer-bg__photo {
    top: auto;
    bottom: 0;
    height: min(85vw, 560px);
    object-position: center;
  }

  .sec-footer .footer-bg__fade {
    top: auto;
    bottom: 0;
    height: min(85vw, 560px);
  }

  .sec-footer .footer-bg__fade--cream {
    background: linear-gradient(to bottom, #fffcef 0%, #fffcef 15%, rgba(255, 252, 239, 0) 42%);
  }

  .sec-footer .footer-bg__fade--dark {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.92) 100%);
  }

  .sec-footer .footer-intro,
  .sec-footer .footer-form,
  .sec-footer .footer-nav,
  .sec-footer .footer-contact,
  .sec-footer .footer-qr,
  .sec-footer .footer-logo,
  .sec-footer .footer-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
  }

  .sec-footer .footer-intro {
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }

  .sec-footer .footer-title {
    width: 100%;
    font-size: 2rem;
    line-height: 1.2;
  }

  .sec-footer .footer-lead {
    width: 100%;
    max-width: 560px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .sec-footer .footer-form {
    gap: 32px;
    margin-top: 8px;
  }

  .sec-footer .footer-form__fields {
    gap: 26px;
  }

  .sec-footer .footer-form__row {
    flex-direction: column;
    gap: 26px;
  }

  .sec-footer .footer-field {
    width: 100%;
  }

  .sec-footer .footer-field__control {
    height: 44px;
    padding: 0 0 16px;
    border-bottom-width: 1px;
    font-size: 1rem;
    line-height: 28px;
  }

  .sec-footer .footer-field__control:focus,
  .sec-footer .footer-field__control:focus-visible {
    box-shadow: 0 1px 0 0 var(--gold);
  }

  .sec-footer .footer-field__control--textarea {
    min-height: 44px;
  }

  .sec-footer select.footer-field__control {
    padding-right: 28px;
  }

  .sec-footer .footer-field--select::after {
    right: 6px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-width: 1px;
  }

  .sec-footer .footer-field__label {
    font-size: 1rem;
    line-height: 28px;
  }

  .sec-footer .footer-field__control:focus ~ .footer-field__label,
  .sec-footer input.footer-field__control:not(:placeholder-shown) ~ .footer-field__label,
  .sec-footer textarea.footer-field__control:not(:placeholder-shown) ~ .footer-field__label,
  .sec-footer .footer-field.is-filled .footer-field__label {
    transform: translateY(-16px) scale(0.72);
  }

  .sec-footer .footer-field__error {
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: normal;
  }

  .sec-footer .footer-form__action {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .sec-footer .footer-form__status {
    flex-basis: 100%;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .sec-footer .footer-form.is-sent .footer-form__status {
    font-size: 1rem;
    line-height: 1.5;
  }

  .sec-footer .footer-form__submit {
    width: 190px;
    padding: 8px 0;
    border-bottom-width: 1px;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
  }

  .sec-footer .footer-nav {
    gap: 24px;
    margin-top: 16px;
  }

  .sec-footer .footer-nav__col {
    flex: 1 1 0;
    width: auto;
    gap: 12px;
  }

  .sec-footer .footer-nav__col li,
  .sec-footer .footer-link,
  .sec-footer .footer-contact__addr {
    font-size: 1rem;
    line-height: 1.5;
  }

  .sec-footer .footer-contact {
    gap: 12px;
    max-width: 420px;
  }

  .sec-footer .footer-contact__phone,
  .sec-footer .footer-contact__email {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sec-footer .footer-qr {
    width: 120px;
    height: 120px;
  }

  .sec-footer .footer-logo {
    width: 100px;
    height: 107px;
    margin-top: 40px;
  }

  .sec-footer .footer-copy {
    margin-top: -12px;
    font-size: 0.875rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .sec-footer .sec-canvas {
    padding: 48px 20px 36px;
    gap: 28px;
  }

  .sec-footer .footer-form__submit {
    width: 100%;
    max-width: 240px;
  }
}