/* BYOM — Contact page specific styles */

@font-face {
    font-family: 'Canela';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/Canela-RegularItalic-Trial.otf') format('opentype');
  }

  @font-face {
    font-family: 'Canela';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Canela-Regular-Trial.otf') format('opentype');
  }

  @font-face {
    font-family: 'Canela';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/Canela-BoldItalic-Trial.otf') format('opentype');
  }

  @font-face {
    font-family: 'Canela';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Canela-Bold-Trial.otf') format('opentype');
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* Ensure HTML hidden attribute is never overridden by display:flex/block rules */
  [hidden] { display: none !important; }

  :root {
    --yellow:     #F5F233;
    --yellow-lt:  #FAFB8A;
    --yellow-pale:#FEFEE8;
    --yellow-mid: #EDE91A;
    --cream:      #FDFDF5;
    --ivory:      #F8F8E8;
    --text:       #1A1A14;
    --mid:        #2C2C1C;
    --light:      #9C9C7C;
    --white:      #FFFFFF;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Urbanist', sans-serif;
    background: var(--cream);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ─── HERO ─────────────────────────────────── */
  .page-hero {
    min-height: 60vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 120px 24px 80px;
    background: linear-gradient(160deg, var(--yellow-pale) 0%, var(--ivory) 60%, var(--cream) 100%);
  }

  .page-hero h1 {
    font-size: clamp(38px, 5vw, 66px); font-weight: 400;
    max-width: 760px; margin: 0 auto;
    font-family: 'Canela', 'Cormorant Garamond', Georgia, serif;
    font-style: normal; color: var(--text);
  }

  .page-hero h1 em { color: var(--text); font-style: normal; }
  .page-hero p { font-size: 18px; max-width: 560px; margin: 20px auto 0; color: var(--text); line-height: 1.7; }

  /* ─── FORM SECTION ─────────────────────────────────── */
  .form-section {
    padding: 100px 24px; background: var(--white);
  }

  .form-container {
    max-width: 600px; margin: 0 auto;
  }

  .form-title {
    font-size: clamp(28px, 4vw, 42px);
    font-family: 'Canela', 'Cormorant Garamond', Georgia, serif;
    font-style: italic; font-weight: 400;
    margin-bottom: 48px; color: var(--text);
  }

  .form-group {
    margin-bottom: 24px;
  }

  label {
    display: block; font-size: 14px; font-weight: 600;
    color: var(--text); margin-bottom: 8px;
    letter-spacing: 0.05em; text-transform: uppercase;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    width: 100%; padding: 14px 16px;
    border: 1px solid rgba(200,197,0,.18); border-radius: 8px;
    font-family: 'Urbanist', sans-serif; font-size: 15px;
    background: var(--cream); color: var(--text);
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="number"]:focus,
  select:focus,
  textarea:focus {
    outline: none; border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(245,242,51,0.1);
  }

  textarea {
    resize: vertical; min-height: 120px;
  }

  .form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }

  @media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
  }

  .submit-btn {
    background: var(--yellow); color: var(--text);
    border: none; padding: 14px 40px;
    border-radius: 8px; font-size: 15px;
    font-weight: 600; cursor: pointer;
    transition: all 0.3s;
    width: 100%; margin-top: 32px;
    letter-spacing: 0.05em; text-transform: uppercase;
  }

  .submit-btn:hover {
    background: var(--yellow-mid); box-shadow: 0 8px 24px rgba(245,242,51,0.2);
  }

  .submit-btn:disabled,
  .submit-btn.btn-loading {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
  }

  /* ── Field error highlight ── */
  .input-error {
    border-color: #e05252 !important;
    box-shadow: 0 0 0 3px rgba(224,82,82,0.12) !important;
  }

  /* ── Form feedback messages ── */
  .form-success {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 32px;
  }

  .form-success-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    background: #22c55e;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }

  .form-success-icon svg {
    width: 20px; height: 20px;
    stroke: #fff; fill: none;
    stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .form-success-body h3 {
    font-size: 17px; font-weight: 700;
    color: #15803d; margin-bottom: 6px;
    text-transform: none; letter-spacing: 0;
  }

  .form-success-body p {
    font-size: 14px; color: #166534; line-height: 1.6;
  }

  .form-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #b91c1c;
    line-height: 1.6;
  }

  /* ─── FOOTER ─────────────────────────────────── */
  footer {
    background: var(--cream); border-top: 1px solid rgba(200,197,0,.15);
    padding: 60px 24px 40px;
  }

  .footer-inner {
    max-width: 1040px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 2fr;
    gap: 60px; margin-bottom: 48px;
    align-items: start;
  }

  .footer-wordmark { text-align: center; }
  .footer-wordmark img { max-width: 180px; }

  .footer-nav {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  }

  .footer-col { display: flex; flex-direction: column; gap: 12px; }
  .footer-col a { text-decoration: none; color: var(--mid);
    font-size: 14px; transition: color 0.3s;
  }
  .footer-col a:hover { color: var(--yellow); }

  .footer-bottom {
    text-align: center; padding-top: 40px;
    border-top: 1px solid rgba(200,197,0,.15);
  }

  .footer-bottom p { font-size: 12px; color: var(--light); margin-bottom: 24px; }

  .footer-social {
    display: flex; gap: 20px; justify-content: center;
  }

  .footer-social a {
    width: 40px; height: 40px; display: flex;
    align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(200,197,0,.08);
    transition: all 0.3s;
  }

  .footer-social a:hover {
    background: var(--yellow); transform: translateY(-3px);
  }

  .footer-social svg { width: 20px; height: 20px; stroke: var(--text); fill: var(--text); }

  /* Light hero background — keep lang-btn dark so it reads on cream/ivory */
  nav .lang-btn { color: var(--text, #1a1a1a); }

  @media (max-width: 1100px) {
    .nav-links-pill { display: none; }
    .nav-hamburger { display: flex; }
  }

  @media (max-width: 768px) {
    .footer-inner { grid-template-columns: 1fr; gap: 40px; }
    .footer-nav { grid-template-columns: 1fr; }
    nav { padding: 0 24px; }
  }

  @media (max-width: 640px) {
    
  }

  .section-label {
    font-family: 'Canela', 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #F2CE18;
    margin-bottom: 12px;
    line-height: 1.1;
  }

/* ── Skip to main content (accessibility + SEO) ── */
.skip-to-main {
  position: absolute;
  top: -100%;
  left: 0;
  background: #F5F233;
  color: #1A1A14;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.2s;
}
.skip-to-main:focus {
  top: 0;
}

/* ── 480px: small phones ─────────────────────── */
@media (max-width: 480px) {
  

  .page-hero {
    padding: 96px 16px 48px;
    min-height: auto;
  }
  .page-hero h1 { font-size: clamp(30px, 8vw, 44px); }
  .page-hero p  { font-size: 16px; }

  .form-section { padding: 64px 16px; }
  .form-title   { font-size: clamp(24px, 6vw, 34px); margin-bottom: 32px; }

  label { font-size: 12px; }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea { padding: 12px 14px; font-size: 14px; }

  .submit-btn {
    padding: 13px 24px;
    font-size: 14px;
    margin-top: 24px;
  }

  footer { padding: 40px 16px 28px; }
  .footer-inner  { grid-template-columns: 1fr; gap: 28px; }
  .footer-nav    { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}