/* ==========================================================================
   Onesto Studio — Connect page
   Builds on styles.css (tokens, header, menu, footer, reveal). Same rule:
   desktop sizes are design pixels on a 1366px artboard, via var(--u).
   ========================================================================== */

/* ---------- Hero ---------- */

.con-hero {
  position: relative;
  height: calc(650 * var(--u));
  overflow: hidden;
  background: var(--black);
}
.con-hero__bg {
  position: absolute;
  inset: calc(130 * var(--u)) 0 0;
  background: #2a0b0e url("../images/connect-hero-fabric.jpg") 0 56.5% / 100% auto no-repeat;
}

.con-hero__copy {
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(262.5 * var(--u));
}
.con-hero__eyebrow {
  font-size: max(11px, calc(15 * var(--u)));
  font-weight: 400;
  line-height: calc(15 * var(--u));
  letter-spacing: .26em;
  text-transform: uppercase;
}
.con-hero__title {
  margin-top: calc(28 * var(--u));
  font-family: var(--serif);
  font-size: calc(64 * var(--u));
  font-weight: 400;
  line-height: calc(72 * var(--u));
}
.con-hero__lead {
  margin-top: calc(28.4 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: calc(22 * var(--u));
  letter-spacing: .065em;
}

/* ---------- Band ---------- */

.con-band {
  height: calc(118 * var(--u));
  padding-top: calc(48.5 * var(--u));
  background: var(--black);
  font-size: calc(24 * var(--u));
  font-weight: 300;
  line-height: calc(24 * var(--u));
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Enquiry form ---------- */

.enquiry {
  display: grid;
  grid-template-columns: calc(793 * var(--u)) 1fr;
  background: var(--maroon);
}
.enquiry__panel {
  padding: calc(61 * var(--u)) 0 calc(46 * var(--u)) calc(77 * var(--u));
}

.enquiry__title,
.direct__title {
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: calc(24 * var(--u));
  letter-spacing: .225em;
  text-transform: uppercase;
}
.enquiry__lead,
.direct__lead {
  font-family: var(--serif);
  font-size: max(15px, calc(18.5 * var(--u)));
  line-height: calc(24 * var(--u));
}
.enquiry__lead { margin-top: calc(21 * var(--u)); }

.enquiry__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(55 * var(--u)) calc(56 * var(--u));
  width: calc(643 * var(--u));
  margin-top: calc(74 * var(--u));
}
.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: max(10px, calc(13.5 * var(--u)));
  font-weight: 400;
  line-height: calc(14 * var(--u));
  letter-spacing: .21em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin: calc(24.5 * var(--u)) 0 0;
  padding: 0 0 calc(4.5 * var(--u));
  border: 0;
  border-bottom: calc(2 * var(--u)) solid rgba(252, 242, 224, .5);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font: 300 max(12px, calc(13 * var(--u))) / calc(16 * var(--u)) var(--sans);
  letter-spacing: .23em;
  transition: border-color .3s;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(252, 242, 224, .5); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 0; border-bottom-color: var(--cream); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { box-shadow: 0 1px 0 0 var(--cream); }

.field select {
  padding-right: calc(40 * var(--u));
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 0h26L13 12z' fill='%23fcf2e0' fill-opacity='.5'/%3E%3C/svg%3E") right calc(1 * var(--u)) top calc(1 * var(--u)) / calc(26 * var(--u)) calc(12 * var(--u)) no-repeat;
  cursor: pointer;
}
.field select:invalid { color: rgba(252, 242, 224, .5); }
.field option { color: #000; }

.field--area textarea {
  margin-top: calc(43 * var(--u));
  min-height: calc(20.5 * var(--u));
  resize: none;
  overflow: hidden;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-bottom-color: #f2a39b; }
.field__error {
  margin-top: 8px;
  color: #f2a39b;
  font-size: max(11px, calc(12 * var(--u)));
  letter-spacing: .04em;
}

.enquiry__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  margin-top: calc(-10 * var(--u));
}
.enquiry__send {
  width: calc(102 * var(--u));
  min-width: 84px;
  height: calc(50 * var(--u));
  min-height: 40px;
  border-radius: calc(8 * var(--u));
  background: var(--cream);
  color: var(--maroon);
  font-size: max(12px, calc(14 * var(--u)));
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: background-color .3s, transform .3s var(--ease);
}
.enquiry__send:hover { background: #fff; }
.enquiry__send:active { transform: translateY(1px); }
.enquiry__send[disabled] { opacity: .6; cursor: progress; }
.enquiry__status {
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.5;
  letter-spacing: .03em;
}
.enquiry__privacy {
  grid-column: 1 / -1;
  margin-top: calc(-30 * var(--u));
  font-size: max(12px, calc(13 * var(--u)));
  line-height: 1.5;
  letter-spacing: .03em;
  opacity: .8;
}
.enquiry__privacy a { text-decoration: underline; text-underline-offset: 3px; }

.enquiry__media { overflow: hidden; }
.enquiry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* ---------- Direct contact ---------- */

.direct {
  height: calc(290 * var(--u));
  padding: calc(56 * var(--u)) 0 0 calc(77 * var(--u));
  background: var(--cream);
  color: var(--maroon);
}
.direct__lead { margin-top: calc(24 * var(--u)); }
.direct__list {
  display: grid;
  row-gap: calc(21.5 * var(--u));
  margin-top: calc(45 * var(--u));
}
.direct__list div {
  display: grid;
  grid-template-columns: calc(135 * var(--u)) auto;
  justify-content: start;
}
.direct__list dt,
.direct__list dd {
  margin: 0;
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 400;
  line-height: calc(14 * var(--u));
  letter-spacing: .24em;
  text-transform: uppercase;
}
.direct__list a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .4s var(--ease);
}
.direct__list a:hover { background-size: 100% 1px; }

/* ---------- Sign-off ---------- */

.signoff {
  height: calc(218 * var(--u));
  padding-top: calc(38 * var(--u));
  background: var(--black);
  text-align: center;
  text-transform: uppercase;
}
.signoff__title {
  font-family: var(--serif);
  font-size: calc(34 * var(--u));
  line-height: calc(34 * var(--u));
}
.signoff__name {
  margin-top: calc(42 * var(--u));
  font-size: calc(24 * var(--u));
  font-style: italic;
  line-height: calc(24 * var(--u));
  letter-spacing: .04em;
}
.signoff__tagline {
  margin-top: calc(26 * var(--u));
  font-size: max(12px, calc(16 * var(--u)));
  font-style: italic;
  line-height: calc(16 * var(--u));
  letter-spacing: .045em;
}

/* ---------- Footer variant ---------- */

.site-footer--connect { border-top: 0; }
.site-footer--connect .site-footer__main { height: calc(374 * var(--u)); }
.site-footer--connect .site-footer__cta { padding-top: calc(70 * var(--u)); }
.site-footer--connect .site-footer__title { margin-top: 0; }
.site-footer--connect .site-footer__lead { margin-top: calc(24 * var(--u)); }
.site-footer--connect .site-footer__divider { margin-top: calc(55 * var(--u)); }
.site-footer--connect .site-footer__col { padding-top: calc(58 * var(--u)); }

.cta--plain {
  display: inline-block;
  width: auto;
  min-width: 0;
  padding-bottom: 3px;
  border-bottom: 0;
  letter-spacing: .3em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .4s var(--ease);
}
.cta--plain:hover { background-size: 100% 1px; }

/* ==========================================================================
   Tablet & mobile
   ========================================================================== */

@media (max-width: 1023.98px) {
  .con-hero { height: auto; padding-top: var(--header-h); }
  .con-hero__bg { inset: 0; background-size: cover; background-position: 30% 50%; }
  .con-hero__copy { position: relative; inset: auto; padding: 64px var(--gutter) 80px; }
  .con-hero__eyebrow { font-size: 12px; }
  .con-hero__title { margin-top: 20px; font-size: clamp(42px, 9vw, 64px); line-height: 1.08; }
  .con-hero__lead { margin-top: 20px; max-width: 32em; font-size: 16px; line-height: 1.5; }

  .con-band { height: auto; padding: 36px var(--gutter); font-size: 17px; line-height: 1.4; }

  .enquiry { grid-template-columns: 1fr; }
  .enquiry__panel { padding: 56px var(--gutter) 64px; }
  .enquiry__title,
  .direct__title { font-size: 18px; line-height: 1.4; letter-spacing: .18em; }
  .enquiry__lead,
  .direct__lead { margin-top: 14px; font-size: 18px; line-height: 1.4; }
  .enquiry__form { width: 100%; margin-top: 40px; gap: 36px 24px; }
  .field label { font-size: 11px; line-height: 1.4; letter-spacing: .16em; }
  .field input,
  .field select,
  .field textarea { margin-top: 14px; padding-bottom: 8px; border-bottom-width: 1px; font-size: 15px; line-height: 1.4; letter-spacing: .08em; }
  .field select { padding-right: 36px; background-size: 18px 9px; background-position: right 2px top 6px; }
  .field--area textarea { margin-top: 22px; min-height: 30px; }
  .enquiry__actions { margin-top: 0; flex-wrap: wrap; }
  .enquiry__privacy { margin-top: -16px; }
  .enquiry__send { width: 120px; height: 48px; border-radius: 8px; font-size: 13px; }
  .enquiry__media { aspect-ratio: 4 / 5; max-height: 70vh; }

  .direct { height: auto; padding: 56px var(--gutter); }
  .direct__list { margin-top: 32px; row-gap: 14px; }
  .direct__list div { grid-template-columns: 100px 1fr; }
  .direct__list dt,
  .direct__list dd { font-size: 12px; line-height: 1.5; letter-spacing: .14em; overflow-wrap: anywhere; }

  .signoff { height: auto; padding: 56px var(--gutter); }
  .signoff__title { font-size: clamp(24px, 6vw, 34px); line-height: 1.2; }
  .signoff__name { margin-top: 28px; font-size: 20px; line-height: 1.3; }
  .signoff__tagline { margin-top: 14px; font-size: 13px; line-height: 1.4; }

  .site-footer--connect .site-footer__main { height: auto; }
  .site-footer--connect .site-footer__cta,
  .site-footer--connect .site-footer__col { padding-top: 0; }
  .site-footer--connect .site-footer__divider { margin-top: 0; }
}

@media (max-width: 559.98px) {
  .enquiry__form { grid-template-columns: 1fr; }
}