/* ════════════════════════════════════════════════════════════
   CROWNTUNE — CONTACT PAGE
   Section 1: compact About Us (image + text).
   Section 2: message form widget + hours + exclusive support.
   Flat treatment: solid surfaces, no glows or gradient washes.
   ════════════════════════════════════════════════════════════ */

/* ── SHARED EYEBROW (matches playlists pattern) ── */
.contact-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.contact-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}


/* ════════════════════════════════════════
   SECTION 1 — ABOUT US (kept deliberately compact)
   ════════════════════════════════════════ */
#about {
  padding: 150px 60px 70px;
}

.about-layout {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Left: framed Instagram collage. The image has old text baked into
   its center, so .about-visual-label is a hand-written sticker overlaid
   exactly on top of it — no image editing needed. */
.about-visual {
  position: relative;
  max-width: 420px;
  justify-self: center;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(240,195,48,0.3);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-visual:hover {
  transform: scale(1.02);
}
.about-visual img {
  display: block;
  width: 100%;
}

.about-visual-label {
  position: absolute;
  left: 50%;
  top: 50.6%; /* centered on the baked-in "ELECTRO WEEK" text it covers */
  transform: translate(-50%, -50%) rotate(-3deg);
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  color: #232B22;
  background: #F6F3EA;
  padding: 10px 26px 13px;
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  pointer-events: none;
}

/* Fallback until crownabout.png lands in /images */
.about-visual-missing { display: none; }
.about-visual.missing {
  aspect-ratio: 682 / 845;
  width: 100%;
  border: 1px dashed rgba(240,195,48,0.4);
  background: #14110B;
}
.about-visual.missing img,
.about-visual.missing .about-visual-label { display: none; }
.about-visual.missing .about-visual-missing {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}
.about-visual-missing strong { color: var(--gold); margin: 0 5px; }

/* Right: about copy */
.about-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.about-headline em {
  font-style: normal;
  color: var(--gold);
}

.about-body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  max-width: 440px;
}
.about-body + .about-body { margin-top: 14px; }


/* ════════════════════════════════════════
   SECTION 2 — CONTACT FORM + SIDE WIDGETS
   ════════════════════════════════════════ */
#contact-sec {
  padding: 40px 60px 110px;
}

:root { --contact-max: 1180px; }

/* Headline left, Crown-artist note right, both above the full-width form */
.contact-head {
  max-width: var(--contact-max);
  margin: 0 auto 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.contact-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(44px, 5.2vw, 74px);
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--white);
  line-height: 1.05;
}
.contact-headline em {
  font-style: normal;
  color: var(--gold);
}

.contact-layout {
  max-width: var(--contact-max);
  margin: 0 auto;
}

/* ── The message widget ── */
.msg-widget {
  position: relative;
  scroll-margin-top: 96px;
  border-radius: 20px;
  background: linear-gradient(157deg, #1F1F1F 0%, #171717 46%, #101010 100%);
  border: 1px solid rgba(240,195,48,0.3);
  overflow: hidden;
}
.msg-widget::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
}

/* ── Form fields ──
   Wide form: topic / name / email share the top row, message spans it. */
.msg-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 22px;
  padding: 54px 48px 56px;
}
.field-full { grid-column: 1 / -1; }

.field-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  margin-bottom: 11px;
}

.field-group input,
.field-group textarea,
.field-group select {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--white);
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(240,195,48,0.2);
  border-radius: 12px;
  padding: 16px 18px;
  outline: none;
  transition: border-color 0.25s;
}
.field-group textarea { resize: vertical; min-height: 230px; }

.field-group input::placeholder,
.field-group textarea::placeholder { color: rgba(255,255,255,0.28); }

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
  border-color: rgba(240,195,48,0.6);
}

/* Custom select chevron */
.field-select { position: relative; }
.field-select select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
}
.field-select select:invalid { color: rgba(255,255,255,0.28); }
.field-select select option {
  background: #14110C;
  color: var(--white);
}
.field-select select option.opt-crown {
  color: var(--gold-light);
  font-weight: 700;
}
.field-select::after {
  content: '▾';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 13px;
  pointer-events: none;
}

.msg-submit {
  grid-column: 1 / -1;
  justify-self: end;      /* full-width would be ~1300px on desktop */
  min-width: 300px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--black);
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 17px;
  cursor: pointer;
  transition: transform 0.2s, background 0.25s, border-color 0.25s;
}
.msg-submit:hover {
  transform: translateY(-1px);
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* ── Success state (JS adds .sent to .msg-widget) ── */
.msg-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 40px;
}
.msg-widget.sent .msg-form { display: none; }
.msg-widget.sent .msg-success {
  display: flex;
  animation: successIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes successIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.success-ring {
  width: 92px;
  height: 92px;
  margin-bottom: 28px;
}
.success-ring svg { width: 100%; height: 100%; }
.success-circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: drawCircle 0.7s ease-out 0.15s forwards;
}
.success-check {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: drawCheck 0.45s ease-out 0.75s forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck  { to { stroke-dashoffset: 0; } }

.success-title {
  font-family: 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
}
.success-sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 340px;
}

/* ── Crown-artist note (sits beside the headline, above the form) ── */
.exclusive-widget {
  position: relative;
  flex-shrink: 0;
  width: max-content;   /* hug the two hard-wrapped lines — no dead space */
  max-width: 100%;
  border-radius: 16px;
  background: var(--card-warm);
  border: 1px solid rgba(240,195,48,0.45);
  border-top: 2px solid var(--gold);
  padding: 18px 24px 20px;
  transition: border-color 0.3s;
}
.exclusive-widget:hover { border-color: rgba(240,195,48,0.7); }

.excl-title {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.excl-body {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
}
.excl-body strong {
  color: var(--gold-light);
  font-weight: 600;
}


/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 1100px) {
  #about { padding: 130px 32px 50px; }
  #contact-sec { padding: 30px 32px 90px; }
  .about-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .about-text { order: -1; }
  /* headline and the Crown note stack once they can't sit side by side */
  .contact-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .exclusive-widget { max-width: none; }
  .msg-form { grid-template-columns: 1fr 1fr; padding: 32px; }
  .field-group:has(#cf-topic) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .msg-form { grid-template-columns: 1fr; }
  .msg-submit { justify-self: stretch; min-width: 0; }
  .about-visual-label { font-size: 20px; }
}


/* ════════════════════════════════════════════════════════════
   MOBILE — CONTACT PAGE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  #about { padding: 104px 20px 44px; }
  .about-layout { gap: 32px; }
  .about-headline { font-size: clamp(30px, 9vw, 44px); margin-bottom: 16px; }
  .about-body { font-size: 14.5px; max-width: none; }
  .about-visual { max-width: 320px; }

  #contact-sec { padding: 24px 20px 72px; }
  .contact-head { margin-bottom: 24px; gap: 20px; }
  .contact-headline { font-size: clamp(34px, 10vw, 52px); }
  /* desktop sizes this to max-content so it hugs the two hard-wrapped lines;
     on a phone that overflows the screen, so let it fill the column instead */
  .exclusive-widget { width: auto; max-width: none; }
  .excl-title { font-size: 16px; }
  .excl-body { font-size: 12.5px; }
  /* the note is hard-wrapped for desktop; let it reflow on a phone */
  .excl-body br { display: none; }

  .msg-form { padding: 28px 20px 32px; gap: 22px; }
  .field-group label { font-size: 13px; margin-bottom: 8px; }
  .field-group input,
  .field-group textarea,
  .field-group select {
    /* 16px keeps iOS Safari from zooming in when a field is focused */
    font-size: 16px;
    padding: 14px 15px;
  }
  .field-group textarea { min-height: 170px; }
  .msg-submit { min-width: 0; justify-self: stretch; font-size: 13px; }
  .msg-success { padding: 56px 24px; }
  .success-title { font-size: 32px; }
}