/* Ported from contact/index.html - 1 <style> block(s), in document order.
   Cascade order is preserved: a later block in the source is a later rule
   here, which is what several of these rely on to override the shared
   layer. */

/* Hero: ink base + subtle NeeDoh pattern overlay swept away behind the text. */
    .contact-hero {
      padding-top: 178px;
      padding-bottom: 122px;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }
    .contact-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('../images/branding-patterns/needoh-branding-pattern-2.svg');
      background-size: cover;
      background-position: center left;
      opacity: 0.07;
      z-index: 0;
      pointer-events: none;
    }
    .contact-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, var(--ink) 0%, var(--ink) 32%, rgba(35,31,32,0) 62%);
      z-index: 1;
      pointer-events: none;
    }
    .contact-hero .lede { max-width: 46ch; }
    .contact-hero h1.display { color: var(--brand-yellow); }

    @keyframes contact-hero-in {
      0%   { opacity: 0; transform: translateY(18px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .contact-hero .hero-split-text > * {
      animation: contact-hero-in 700ms cubic-bezier(.2,.7,.2,1) both;
    }
    .contact-hero .hero-split-text > *:nth-child(1) { animation-delay:  60ms; }
    .contact-hero .hero-split-text > *:nth-child(2) { animation-delay: 160ms; }
    .contact-hero .hero-split-text > *:nth-child(3) { animation-delay: 280ms; }
    @media (prefers-reduced-motion: reduce) {
      .contact-hero .hero-split-text > * { animation: none; }
    }

    /* Envelope tile — hero visual */
    .envelope-tile {
      background: var(--brand-blue);
      border-radius: 32px;
      aspect-ratio: 5 / 4;
      position: relative;
      overflow: hidden;
      box-shadow: 0 14px 32px -16px rgba(35,31,32,0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }
    .envelope-svg { width: 68%; height: auto; color: #fff; }
    .postmark {
      position: absolute;
      top: 24px;
      right: 24px;
      color: #fff;
      font-family: var(--font-display);
      font-size: 16px;
      text-align: center;
      border: 3px solid rgba(255,255,255,0.5);
      border-radius: 50%;
      width: 110px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(-16deg);
      padding: 12px;
      line-height: 1.05;
    }
    .stamp-tile {
      position: absolute;
      top: 24px;
      left: 24px;
      background: var(--accent);
      color: #fff;
      border-radius: 12px;
      padding: 8px 12px;
      font-family: var(--font-display);
      font-size: 14px;
      transform: rotate(-4deg);
      border: 3px solid #fff;
      box-shadow: 0 6px 14px -6px rgba(0,0,0,0.4);
    }

    /* Contact form lives in the hero's right column as a white card */
    .contact-form-card {
      background: var(--paper);
      border-radius: 32px;
      padding: 36px;
      box-shadow: 0 22px 44px -18px rgba(0,0,0,0.5);
      color: var(--ink);
      position: relative;
    }
    .contact-form-card .form-label { color: var(--ink-soft); }
    @media (max-width: 640px) { .contact-form-card { padding: 26px; } }

    /* Three-column info blocks below the hero */
    .contact-info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    @media (max-width: 900px) { .contact-info-grid { grid-template-columns: 1fr; } }
    .contact-form-title {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.8vw, 34px);
      line-height: 1.15;
      margin: 0 0 8px;
    }
    .contact-form-sub {
      color: var(--ink-soft);
      font-size: 15.5px;
      line-height: 1.55;
      margin: 0 0 24px;
    }
    .form-note {
      background: var(--brand-yellow);
      border-radius: 14px;
      padding: 14px 18px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink);
      margin-bottom: 24px;
    }
    .form-note strong { font-weight: 700; }
    .form-note a { color: var(--ink); font-weight: 700; text-decoration: underline; }
    .form-note a:hover { color: var(--accent); }

    .contact-form-card .btn-primary {
      background: var(--brand-yellow);
      color: var(--ink);
      padding: 18px 32px;
      font-size: 16px;
    }
    .contact-form-card .btn-primary:hover { background: var(--ink); color: var(--brand-yellow); }

    /* Colored info blocks */
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .info-block {
      border-radius: 24px;
      padding: 32px;
      position: relative;
      overflow: hidden;
    }
    .info-block.ink    { background: var(--ink);          color: #fff; }
    .info-block.pink   { background: var(--accent);       color: #fff; }
    .info-block.orange { background: var(--brand-orange); color: #fff; }
    .info-block h3 {
      font-family: var(--font-display);
      font-size: 22px;
      margin: 0 0 14px;
      color: inherit;
    }
    .info-block p {
      font-size: 15px;
      line-height: 1.6;
      margin: 0 0 8px;
      color: rgba(255,255,255,0.9);
    }
    .info-block a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); transition: color 180ms, border-color 180ms; }
    .info-block a:hover { color: var(--brand-yellow); border-color: var(--brand-yellow); }

    .inbox-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .inbox-list li {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 14.5px;
      color: rgba(255,255,255,0.9);
    }
    .inbox-list li strong {
      color: #fff;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 12.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .inbox-list li a { align-self: flex-start; }
    .inbox-list li .pending-inline {
      color: rgba(255,255,255,0.7);
      font-style: italic;
    }

    .socials-inline {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }
    .socials-inline a {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      transition: background 200ms, color 200ms, transform 200ms;
      border-bottom: none;
    }
    .socials-inline a:hover { background: #fff; color: var(--accent); transform: translateY(-2px); border-bottom: none; }

    .cta-band {
      background: var(--brand-green);
      color: var(--ink);
      text-align: center;
    }
    .cta-band h2 { color: var(--ink); }
    .cta-band p { color: var(--ink); }
    .cta-band .btn-primary { background: var(--ink); color: var(--brand-green); }
    .cta-band .btn-primary:hover { background: #fff; color: var(--ink); }
    .cta-band .btn-ghost { border-color: var(--ink); color: var(--ink); }
    .cta-band .btn-ghost:hover { background: var(--ink); color: var(--brand-green); }

    .cross-links {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 24px;
    }