/* ================================================================
   KEMI KING — CONTACT.CSS
   Application page. Layered on index.css.
   ================================================================ */


/* ── ACTIVE NAV CTA STATE ─────────────────────────────────── */
.nav__cta--active {
    background: var(--espresso);
    color: var(--cream);
  }
  
  
  /* ================================================================
     CONTACT HERO — full split, no padding-top cap
     ================================================================ */
  .contact-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100svh;
    padding-top: var(--nav-h);
  }
  
  /* LEFT — warm cream, context and trust */
  .contact-hero__left {
    background: var(--cream-deep);
    display: flex;
    align-items: flex-start;
    padding: 5rem var(--pad-x) 5rem calc(var(--pad-x) * 1.1);
    border-right: 1px solid var(--border);
  }
  
  .contact-hero__content { max-width: 36rem; }
  
  .contact-hero__headline {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 300;
    line-height: 1.12;
    color: var(--espresso);
    margin: .5rem 0 1.2rem;
  }
  .contact-hero__headline em {
    font-style: italic;
    color: var(--gold-dark);
  }
  
  .contact-hero__body {
    font-size: .94rem;
    color: var(--muted);
    line-height: 1.85;
    margin-bottom: 2.4rem;
  }
  
  /* ── WHAT TO EXPECT strip ──────────────────────────────────── */
  .contact-expect {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 1.6rem 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 2.4rem;
  }
  
  .contact-expect__item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    flex: 1;
  }
  
  .contact-expect__num {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
    flex-shrink: 0;
    min-width: 2rem;
  }
  
  .contact-expect__text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  
  .contact-expect__label {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--espresso);
    line-height: 1.2;
  }
  
  .contact-expect__note {
    font-size: .72rem;
    color: var(--muted-light);
    line-height: 1.4;
  }
  
  .contact-expect__div {
    width: 1px;
    height: 36px;
    background: var(--border);
    flex-shrink: 0;
    margin-top: .25rem;
  }
  
  /* ── TESTIMONIAL compact ───────────────────────────────────── */
  .contact-testimonial {
    background: rgba(255,253,249,.65);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(193,154,107,.2);
    border-left: 2px solid #F2C4CE;
    padding: 1.2rem 1.4rem;
  }
  
  .contact-testimonial__quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .98rem;
    color: var(--espresso);
    line-height: 1.75;
    margin-bottom: .9rem;
  }
  
  .contact-testimonial__attr {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  
  .contact-testimonial__name {
    font-weight: 500;
    color: var(--espresso);
  }
  
  .contact-testimonial__detail {
    color: var(--muted-light);
  }
  
  
  /* RIGHT — form panel */
  .contact-hero__right {
    background: var(--cream);
    display: flex;
    align-items: flex-start;
    overflow-y: auto;
  }
  
  .contact-form-wrap {
    width: 100%;
    padding: 5rem var(--pad-x) 5rem calc(var(--pad-x) * .8);
    max-width: 560px;
  }
  
  .contact-form__header {
    margin-bottom: 2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--border-soft);
  }
  
  .contact-form__title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--espresso);
    margin-bottom: .3rem;
  }
  
  .contact-form__sub {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-light);
  }
  
  
  /* ================================================================
     FORM ELEMENTS
     ================================================================ */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  
  .form-field {
    display: flex;
    flex-direction: column;
    gap: .45rem;
  }
  
  .form-label {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--espresso);
    display: flex;
    flex-direction: column;
    gap: .2rem;
  }
  
  .form-label__note {
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--muted-light);
    font-style: italic;
    text-transform: none;
  }
  
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    background: var(--cream-deep);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: .85rem 1rem;
    font-family: var(--font-sans);
    font-size: .88rem;
    color: var(--espresso);
    outline: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--muted-light);
    font-style: italic;
  }
  
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(193,154,107,.08);
  }
  
  .form-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.7;
  }
  
  /* Select with custom arrow */
  .form-select-wrap {
    position: relative;
  }
  .form-select {
    width: 100%;
    cursor: none;
    padding-right: 2.5rem;
  }
  .form-select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted);
  }
  
  /* Form footer */
  .form-footer {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding-top: .4rem;
  }
  
  .form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 1rem 2.2rem;
    background: var(--espresso);
    color: var(--cream);
    border: 1px solid var(--espresso);
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: none;
    transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
    width: 100%;
  }
  .form-submit:hover:not(:disabled) {
    background: var(--espresso-mid);
    box-shadow: 0 12px 32px rgba(30,25,22,.2);
    transform: translateY(-1px);
  }
  .form-submit:hover:not(:disabled) svg {
    transform: translateX(4px);
  }
  .form-submit svg {
    transition: transform .22s var(--ease-smooth);
  }
  .form-submit:disabled {
    opacity: .6;
    cursor: default;
  }
  
  .form-footer__note {
    font-size: .7rem;
    color: var(--muted-light);
    text-align: center;
    line-height: 1.55;
  }
  
  
  /* ================================================================
     SUCCESS STATE
     ================================================================ */
  .contact-success {
    text-align: center;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .contact-success[hidden] { display: none; }
  
  .contact-success__ornament {
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: .4rem;
  }
  
  .contact-success__title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--espresso);
    line-height: 1.3;
  }
  
  .contact-success__body {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.85;
    max-width: 28rem;
  }
  
  .contact-success__link {
    margin-top: .5rem;
  }
  
  
  /* ================================================================
     NEWSLETTER SECTION — reused from index pattern
     ================================================================ */
  .letter { background: var(--cream-deep); text-align: center; }
  .letter__inner { max-width: 600px; }
  
  .letter__ornament {
    font-size: .85rem;
    color: var(--gold);
    margin-bottom: 1.2rem;
    display: block;
  }
  
  .letter__title { font-size: clamp(1.8rem, 3vw, 2.6rem); }
  
  .letter__sub {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.85;
    margin: 1rem auto 2rem;
    max-width: 36rem;
  }
  
  .letter__form-row {
    display: flex;
    gap: .75rem;
    max-width: 440px;
    margin: 0 auto;
  }
  
  .letter__form-row input {
    flex: 1;
    padding: .85rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--cream);
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--espresso);
    outline: none;
    transition: border-color .18s ease;
  }
  .letter__form-row input::placeholder { color: var(--muted-light); }
  .letter__form-row input:focus { border-color: var(--gold); }
  
  .letter__form-row button {
    padding: .85rem 1.6rem;
    background: var(--espresso);
    color: var(--cream);
    border: 1px solid var(--espresso);
    font-family: var(--font-sans);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: none;
    transition: background .18s ease;
    white-space: nowrap;
    border-radius: 0;
  }
  .letter__form-row button:hover { background: var(--espresso-mid); }
  
  .letter__form-note {
    font-size: .7rem;
    color: var(--muted-light);
    margin-top: .75rem;
  }
  
  
  /* ================================================================
     RESPONSIVE
     ================================================================ */
  
  @media (max-width: 960px) {
    .contact-hero {
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .contact-hero__left {
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 4rem var(--pad-x) 3rem;
    }
    .contact-hero__content { max-width: none; }
    .contact-hero__right { justify-content: flex-start; }
    .contact-form-wrap {
      padding: 3.5rem var(--pad-x);
      max-width: none;
    }
  }
  
  @media (max-width: 720px) {
    .contact-expect {
      flex-wrap: wrap;
      gap: 1.2rem;
    }
    .contact-expect__div { display: none; }
    .contact-expect__item { flex: 0 0 calc(50% - .6rem); }
    .letter__form-row { flex-direction: column; }
    .letter__form-row button { width: 100%; }
  }
  
  @media (max-width: 480px) {
    .contact-hero__headline { font-size: 2.1rem; }
    .contact-expect__item { flex: 0 0 100%; }
  }