/* ---- Contact hero (pale band, photo bleeds top-right) ---- */
.contact-hero{
  position:relative;
  overflow:hidden;
  padding-top:0;
  /* single curved corner at the bottom-left, matching the mockup */
  border-bottom-left-radius:140px;        /* Figma: Header radii [0,0,0,140] */
  border-bottom-right-radius:0;
}
.contact-hero .container{ position:relative; z-index:2; }
.contact-hero__copy{
  width:min(42ch, 100%);        /* defined width so it can be a cqi query container */
  container-type:inline-size;   /* proportional hero: title scales in cqi of this box */
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
}
.contact-hero .hero__title{ margin:0 0 var(--space-lg); color:var(--c-blue);
  /* cqi of the copy box → keeps the 2-line wrap ("Ready to Lead" / "Courageously?") proportional */
  font-size:clamp(2rem, 12.8cqi, 4.25rem); line-height:1.05; }
.contact-hero .lead{ margin:0; color:var(--c-eclipse); }

/* Full-bleed photo anchored to the top-right of the band */
.contact-hero__media{
  position:absolute;
  top:0; right:0; bottom:0;
  width:54%;
  z-index:1;
  pointer-events:none;
}
.contact-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Pale wash fading the photo into the text column on its left edge */
.contact-hero__media::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(90deg,
    var(--c-pale) 0%,
    rgba(190,227,250,0.65) 22%,
    rgba(190,227,250,0.18) 48%,
    rgba(190,227,250,0) 70%);
}

/* ---- Contact body grid ---- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-3xl);
  align-items:start;
}
.contact-col h2{ margin:0 0 var(--space-lg); }
.contact-address{
  font-size:var(--fs-body);
  margin:0 0 var(--space-xl);
}
.contact-map{
  width:100%;
  border-radius:var(--r-lg);
  overflow:hidden;        /* clip the map tiles to the rounded corners */
  background:#e3e8ed;     /* = the map style's landscape fill, so it loads in seamlessly */
}
.contact-phone{
  font-size:var(--fs-body);
  margin:0 0 var(--space-xl);
}
.contact-phone a{ color:inherit; }
.contact-phone a:hover{ color:var(--c-blue); }

/* ---- Form ---- */
.contact-form .field{ margin-bottom:var(--space-md); }
.contact-form input,
.contact-form textarea{
  width:100%;
  background:transparent;
  color:var(--c-white);
  border:1px solid rgba(190,227,250,0.35);
  border-radius:var(--r-md);
  padding:var(--space-md) var(--space-lg);
  font:inherit;
  font-size:var(--fs-sm);
}
.contact-form textarea{
  resize:vertical;
  min-height:9rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(190,227,250,0.55);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--c-blue);
}
.contact-form .btn--pale{
  margin-top:var(--space-sm);
  min-width:9rem;
}

/* ---- CF7 form (WP injection): CF7 renders its OWN markup, so map it to the .contact-form look ---- */
.wpcf7-form .hidden-fields-container{ display:none; }   /* CF7's hidden-input <fieldset> has a default border → hide it (inputs still submit) */
.wpcf7-form > p,
.wpcf7-form > div{ margin:0 0 var(--space-md); }         /* rows are a mix of <div> (name/email/subject) and <p> (message/send) → even gaps */
.wpcf7-form-control-wrap{ display:block; }
.wpcf7-form input.wpcf7-form-control:not(.wpcf7-submit),
.wpcf7-form textarea.wpcf7-form-control{
  width:100%; background:transparent; color:var(--c-white);
  border:1px solid rgba(190,227,250,0.35); border-radius:var(--r-md);
  padding:var(--space-md) var(--space-lg); font:inherit; font-size:var(--fs-sm);
}
.wpcf7-form textarea.wpcf7-textarea{ resize:vertical; min-height:9rem; }
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit)::placeholder{ color:rgba(190,227,250,0.55); }
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus{ outline:none; border-color:var(--c-blue); }
.wpcf7-form input.wpcf7-submit{         /* = .btn.btn--pale */
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); font-weight:var(--w-semi);
  padding:var(--space-sm) var(--space-xl); border-radius:var(--r-pill);
  border:1px solid transparent; background:var(--c-pale); color:var(--c-eclipse);
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:transform .15s var(--ease), background .18s var(--ease);
  margin-top:var(--space-sm); min-width:9rem;
}
.wpcf7-form input.wpcf7-submit:hover{ background:#a9d6f3; transform:translateY(-1px); }
.wpcf7-form .wpcf7-spinner{ margin-left:.5rem; }
/* status/validation output: no empty bordered box — it appears only once CF7 flags a submit status */
.wpcf7-form .wpcf7-response-output{ display:none !important; }
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output{
  display:block !important; margin:var(--space-md) 0 0;
  padding:var(--space-sm) var(--space-md);
  border:1px solid rgba(190,227,250,0.35); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--c-white);
}
.wpcf7-not-valid-tip{ color:#ff9b8a; font-size:var(--fs-xs); margin-top:.35rem; display:block; }
.wpcf7-form .wpcf7-not-valid{ border-color:#ff9b8a !important; }

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

@media (max-width:979.98px){
  /* Contact hero — P1 treatment on T/M: cover photo + full dark overlay + centered
     text; the hero PINS and the page content folds up over it, revealing a moving
     concave bottom-LEFT corner (same as Executive Coaching). Desktop untouched. */
  .page-contact .contact-hero{
    display:flex; align-items:center; justify-content:center;
    min-height:70vh; min-height:70svh;
    padding-block:0;                    /* base has padding-top:0 + .section padding-bottom → asymmetric; zero both so flex truly centres */
    border-bottom-left-radius:0;
    background:var(--c-eclipse);
    position:sticky; top:var(--solnav-h, 84px); z-index:0;   /* fallback: no solnav.css here, pin under the 84px header */
  }
  .page-contact .contact-hero__media{
    position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;
  }
  .page-contact .contact-hero__media img{ object-position:center 30%; }
  .page-contact .contact-hero__media::before{
    display:block; inset:0;
    background:linear-gradient(180deg, rgba(1,18,33,.75) 0%, rgba(1,18,33,.85) 62%, rgba(1,18,33,.95) 100%);
  }
  .page-contact .contact-hero__copy{
    max-width:none; width:auto; text-align:center; margin-inline:auto;
  }
  .page-contact .contact-hero .hero__title{ color:var(--c-blue); }   /* keep the headline blue (matches desktop) */
  .page-contact .contact-hero .lead{ color:var(--t-on-dark); max-width:40ch; margin-inline:auto; }

  .page-contact .contact-hero ~ .page-flow{
    position:relative; z-index:1; background:var(--c-eclipse);
    --reveal-r:clamp(48px, 14vw, 140px);
  }
  .page-contact .contact-hero ~ .page-flow::before{
    content:""; position:absolute; left:0; top:calc(-1 * var(--reveal-r));
    width:var(--reveal-r); height:var(--reveal-r); pointer-events:none;
    background:radial-gradient(circle var(--reveal-r) at right top, #0000 calc(100% - 1px), var(--c-eclipse) 100%);
  }
}

/* Tablet + Mobile: contact grid stacks to a single, non-overflowing column */
@media (max-width:767.98px){
  .contact-grid{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-xl);
  }
  .contact-col--location{ margin-bottom:var(--space-md); }
  /* From tablet portrait down: centre the Location + Get-in-Touch headers & subs (matches mobile). */
  .contact-col{ text-align:center; }
  .contact-form .btn--pale{ margin-inline:auto; }
}