/* ==========================================================================
   MEI VENTURES — Contact Page
   Design tokens, reset and fonts all come from style.css. This file only adds
   what is specific to this page, under .contact-* names so nothing here can
   collide with the landing page.
   ========================================================================== */

.contact-page {
  background: var(--bg-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Overrides the global `body { overflow-x: hidden }` in style.css. `hidden`
     makes body a scroll container that never actually scrolls, which silently
     kills position:sticky on the aside and the legal contents rail. `clip`
     clips exactly the same way but creates no scroll container, so sticky
     still works. */
  overflow-x: clip;
}

/* Warm bronze bloom behind the masthead.
   Two stops of slightly different hue rather than one colour fading out: the
   core sits at an amber-gold (#e8a13c) and the falloff shifts to a deeper
   bronze (#b0702a), which reads as metallic rather than as a flat orange
   wash. Kept low-opacity so it lifts the background without tinting the
   white type sitting on top of it. */
.contact-glow {
  position: fixed;
  top: -320px;
  left: 50%;
  width: 1100px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(232, 161, 60, 0.15) 0%,
    rgba(198, 130, 48, 0.07) 34%,
    rgba(176, 112, 42, 0.03) 55%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   MASTHEAD
   -------------------------------------------------------------------------- */
.contact-masthead {
  position: relative;
  z-index: 2;
  padding: 40px 48px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}

/* Centre column of the grid, so the wordmark is centred on the page rather
   than on the space left over beside the back link. */
.contact-logo {
  grid-column: 2;
  justify-self: center;
  display: block;
  transition: opacity 0.3s var(--ease-out-expo);
}

/* Only when it is actually a link. On the contact form page the logo is a
   plain <div>, so it gets no hover feedback and no pointer cursor. */
a.contact-logo:hover { opacity: 0.75; }

.contact-logo img {
  height: 62px;
  width: auto;
}

.contact-back {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.25s ease, transform 0.25s var(--ease-out-expo);
}

.contact-back svg { width: 13px; height: 13px; }
.contact-back:hover { color: var(--text-primary); transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.contact-main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 48px 96px;
}

.contact-intro {
  text-align: center;
  margin-bottom: 64px;
}

.contact-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.contact-lede {
  max-width: 520px;
  margin: 22px auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 22px;
  padding: 38px 36px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 0;          /* fieldset reset */
  min-width: 0;
}

.field label,
.field legend {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  padding: 0;
}

.req { color: var(--accent-red); }

.optional {
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-left: 4px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.field textarea {
  resize: vertical;
  min-height: 132px;
  line-height: 1.55;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: rgba(255, 255, 255, 0.2); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* Invalid state is only ever applied by contact.js after a submit attempt, so
   fields are never red just because they have not been filled in yet. */
.field input.is-invalid,
.field textarea.is-invalid {
  border-color: rgba(255, 42, 0, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 42, 0, 0.12);
}

.field-error {
  font-size: 0.76rem;
  color: #ff6a4d;
  min-height: 0;
  display: none;
  /* Indented to the input's text origin (1px border + 15px padding) rather
     than its outer edge, so the message lines up with what the visitor typed
     instead of hanging 16px to its left. */
  padding-left: 16px;
}

/* The chips are padded 17px inside a 1px border. */
.field-error[data-for="services"] { padding-left: 18px; }

.field-error.is-shown { display: block; }

/* Native select arrow removed so the control matches the text inputs. */
.select-wrap { position: relative; }

.select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--text-secondary);
  border-bottom: 1.6px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.field select option {
  background: #15151a;
  color: var(--text-primary);
}

/* Honeypot. Moved off-screen instead of display:none / visibility:hidden,
   which the better bots detect and skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   SERVICE CHIPS
   -------------------------------------------------------------------------- */
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip { position: relative; }

/* Kept in the accessibility tree and focusable, just not painted. */
.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip span {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 9px 17px;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease,
              border-color 0.25s ease, transform 0.25s var(--ease-out-expo);
}

.chip span:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

/* Whole group flagged until a choice is made. Border only -- a focus ring on
   each of five chips at once would read as noise rather than as one error.
   Outranks the :hover rule on specificity, so the red persists while pointing
   at them. */
.chip-grid.is-invalid .chip span {
  border-color: rgba(255, 42, 0, 0.75);
}

.chip input:checked + span {
  color: var(--text-inverse);
  background: var(--text-primary);
  border-color: var(--text-primary);
  font-weight: 600;
}

.chip input:focus-visible + span {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   SUBMIT
   -------------------------------------------------------------------------- */
.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-inverse);
  background: var(--text-primary);
  border-radius: 100px;
  padding: 15px 30px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease, opacity 0.25s ease;
}

.btn-submit svg { width: 13px; height: 13px; transition: transform 0.25s ease; }

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.18);
}

.btn-submit:hover svg { transform: translate(2px, -2px); }

.btn-submit[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-status {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
  display: none;
}

.form-status.is-shown {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bg-card-border);
}

/* Success. Only reached once the message is actually stored and sent, so the
   green is meaningful rather than decorative. Sits alongside .is-error, which
   overrides it for failures. */
.form-status.is-success {
  color: #8ee0a6;
  border-color: rgba(74, 205, 122, 0.45);
  background: rgba(74, 205, 122, 0.09);
}

.form-status.is-error {
  color: #ff8f7a;
  border-color: rgba(255, 42, 0, 0.32);
  background: rgba(255, 42, 0, 0.07);
}

/* --------------------------------------------------------------------------
   ASIDE
   -------------------------------------------------------------------------- */
.contact-aside {
  position: sticky;
  top: 48px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 6px;
}

.aside-block { display: flex; flex-direction: column; gap: 9px; }

.aside-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.aside-email {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  transition: color 0.25s ease;
  word-break: break-word;
}

/* Scoped to anchors. The address on the form page is plain text with a copy
   button beside it, so it must not shift colour as though it were clickable. */
a.aside-email:hover { color: var(--accent-crimson); }

.aside-email-static { cursor: default; }

.aside-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.aside-divider { height: 1px; background: var(--bg-card-border); }

.aside-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 2px;
}

.aside-steps li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.aside-steps li span {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid var(--bg-card-border);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-primary);
}

.aside-socials { display: flex; flex-wrap: wrap; gap: 18px; }

.aside-socials a {
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: color 0.25s ease;
}

.aside-socials a:hover { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.contact-footer {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 48px 34px;
  border-top: 1px solid var(--bg-card-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.contact-footer-links { display: flex; gap: 22px; }

.contact-footer-links a { transition: color 0.25s ease; }
.contact-footer-links a:hover { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   ENTRANCE — CSS only, so the page does not depend on GSAP loading
   -------------------------------------------------------------------------- */
@keyframes contactRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.contact-masthead,
.contact-intro,
.contact-form,
.contact-aside {
  animation: contactRise 0.9s var(--ease-out-expo) backwards;
}

.contact-masthead { animation-delay: 0.05s; }
.contact-intro    { animation-delay: 0.15s; }
.contact-form     { animation-delay: 0.28s; }
.contact-aside    { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .contact-masthead,
  .contact-intro,
  .contact-form,
  .contact-aside { animation: none; }
  .contact-back:hover,
  .btn-submit:hover,
  .chip span:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .contact-aside { position: static; }
}

@media (max-width: 720px) {
  .contact-masthead { padding: 30px 24px 0; }
  .contact-main { padding: 48px 24px 72px; }
  .contact-footer { padding: 22px 24px 30px; }
  .contact-logo img { height: 48px; }
  .contact-back span { display: none; }
  .field-row { grid-template-columns: 1fr; gap: 22px; }
  .contact-form { padding: 28px 22px; border-radius: 18px; }
  .contact-intro { margin-bottom: 44px; }
}

/* --------------------------------------------------------------------------
   COPY BUTTONS
   -------------------------------------------------------------------------- */
.value-row,
.route-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.route-copy { justify-content: flex-end; }

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--bg-card-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  /* Sits on the last line of the address, which is inline text rather than a
     flex row -- so it needs an explicit baseline relationship. */
  vertical-align: middle;
  margin-left: 10px;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

/* Inside a flex row the gap already provides the spacing.

   The negative block margin matters: the button is 26px but the text line box
   is only 23.66px, so a centred flex row grew to 26px and pushed the text down
   1.2px -- enough to break the subgrid alignment against the address card.
   Pulling 3px off each side makes the button's outer height 20px, so the row
   is sized by the text again while the button still *looks* 26px and keeps its
   full click target. */
.value-row .copy-btn,
.route-copy .copy-btn {
  margin-left: 0;
  margin-block: -3px;
}

.copy-btn svg { width: 13px; height: 13px; }

.copy-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--bg-card-border-hover);
}

.copy-btn:focus-visible {
  outline: 2px solid rgba(232, 161, 60, 0.65);
  outline-offset: 2px;
}

/* Confirmation state, in the page's bronze rather than the usual green so it
   sits with the rest of the palette. */
.copy-btn.is-copied {
  color: #e8a13c;
  background: rgba(232, 161, 60, 0.12);
  border-color: rgba(232, 161, 60, 0.45);
}

.copy-btn .icon-check { display: none; }
.copy-btn.is-copied .icon-copy { display: none; }
.copy-btn.is-copied .icon-check { display: block; }

@media (prefers-reduced-motion: reduce) {
  .copy-btn { transition: none; }
}

/* ==========================================================================
   MOBILE
   Touch ergonomics and legibility only. Every rule here lives inside a media
   query, so the desktop layout is byte-for-byte unchanged.
   ========================================================================== */
@media (max-width: 860px) {
  /* BACK TO SITE collapsed to a bare 13px arrow once its label was hidden --
     far below the 44px minimum for a touch target, and the only way off these
     pages. The label comes back and the whole control gets a real hit area. */
  .contact-back {
    min-height: 44px;
    padding: 10px 14px 10px 10px;
    margin-right: -14px;      /* keeps the text optically flush with the edge */
    font-size: 0.8rem;
    /* The masthead is `1fr auto 1fr` with the wordmark in the centre column, so
       the back link inherits whatever the rails have left. Below ~430px that is
       less than the label needs and "BACK TO SITE" broke onto two lines, which
       also pushed the control to 58px tall and hard against the wordmark. */
    white-space: nowrap;
  }

  .contact-back span { display: inline; }

  /* Footer links sat at 18-20px tall. Padding grows the tap area without
     changing the type size or the visual rhythm. */
  .contact-footer-links { gap: 8px 20px; flex-wrap: wrap; }

  .contact-footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Small caps labels were rendering at 11.2px, below comfortable reading
     size on a phone. */
  .aside-label { font-size: 0.76rem; }

  /* The numbered markers in "What happens next". */
  .aside-steps li span { font-size: 0.76rem; width: 23px; height: 23px; }
  .contact-eyebrow { font-size: 0.78rem; }

  /* 26px is fine with a mouse, not with a thumb. The button keeps its size
     visually; the pseudo-element extends the touch area around it. */
  .copy-btn { position: relative; }

  .copy-btn::after {
    content: '';
    position: absolute;
    inset: -10px;             /* 26 + 20 = 46px square hit area, comfortably
                                 past the 44px minimum */
  }

  /* Inputs below 16px make iOS Safari zoom the page on focus, which then
     leaves the layout scaled up. 16px exactly prevents that. */
  .field input,
  .field textarea,
  .field select { font-size: 1rem; }

  .field label,
  .field legend { font-size: 0.86rem; }

  .optional { font-size: 0.78rem; }

  /* Chips are the primary control on the form; make them comfortably tappable. */
  .chip span { padding: 12px 18px; }

  .btn-submit { min-height: 48px; }

  /* Same reasoning as the landing footer: the desktop split -- copyright left,
     links right, one line -- needs far more width than a phone has, and
     left-aligning both rows left the block looking shunted into the corner.
     Centred and stacked is the honest mobile arrangement. */
  .contact-footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .contact-footer-links { justify-content: center; }

  /* The address is the widest unbreakable string on these pages. At the desktop
     1.18rem it needs ~215px, but the card only offers (viewport - 174)px, so
     from 430px down it was breaking mid-word -- "…grou / p".

     Sized off the viewport rather than stepped through breakpoints: the card
     tracks the viewport exactly (card width = vw - 138px), so a linear ramp
     fits the longest address on one line at every width instead of leaving a
     cliff between two fixed steps. The 178 (rather than 174) buys ~4px of
     slack for rounding. Capped at the desktop size so wide screens are
     unaffected, and this whole block is inside a max-width query regardless. */
  .aside-email {
    font-size: clamp(10.5px, calc(8.78vw - 15.63px), 1.18rem);
    white-space: nowrap;
    word-break: normal;
  }
}

/* Masthead at phone widths.

   Holding the wordmark at 48px kept it 113px wide -- a third of a 360px screen
   -- and the two `1fr` rails either side got whatever was left, which was less
   than "BACK TO SITE" needed. Bringing the mark down and trimming the page
   padding hands that width back to the rails, so the label sits on one line
   with real space between it and the mark instead of touching it. */
@media (max-width: 560px) {
  .contact-masthead {
    padding-left: 16px;
    padding-right: 16px;
    column-gap: 14px;
  }

  .contact-logo img { height: 40px; }

  .contact-back { font-size: 0.72rem; }
}

@media (max-width: 360px) {
  .contact-logo img { height: 32px; }

  .contact-back {
    font-size: 0.66rem;
    padding-left: 8px;
    padding-right: 12px;
    margin-right: -12px;
  }
}