:root{
    /* --gold, --gold-deep, --text, --muted, --glass, --glass-border
       now live in css/root.css (shared by all pages) */
    --cream:#faf8f2;
    --cream-2:#f2ede0;
    --panel-dark:#1c1712;
    --panel-dark-2:#241d15;
    --gold-soft:#f0cf82;
    --text-on-dark:#f4efe2;
    --muted-on-dark:#b8ab8f;
    --danger:#c0392b;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  body{
    font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
    background:#fff !important;
    color:var(--text);
    overflow-x:hidden;
  
  }
  .serif{ font-family:'Fraunces', Georgia, serif; }

  /* ============ TOP BANNER ============ */
  .banner{
    position:relative;
    background:radial-gradient(120% 160% at 50% -20%, #2c2318 0%, var(--panel-dark) 55%, #130f0a 100%);
    padding:64px 64px 64px;
    text-align:center;
    overflow:hidden;
    width: 100%;
  }
  .banner::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 15% 30%, rgba(225,181,76,0.10), transparent 40%),
      radial-gradient(circle at 85% 70%, rgba(225,181,76,0.08), transparent 40%);
    pointer-events:none;
  }
  .banner-title{
    position:relative;
    font-size:clamp(26px,4vw,36px);
    font-weight:700;
    color:#fff;
    letter-spacing:.01em;
    margin-bottom:14px;
    animation:fadeDown .6s ease both;
  }
  .breadcrumb{
    position:relative;
    display:inline-flex; align-items:center; gap:10px;
    font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--muted-on-dark);
    animation:fadeDown .6s ease .08s both;
  }
  .breadcrumb a{ color:var(--muted-on-dark); text-decoration:none; transition:color .2s ease; }
  .breadcrumb a:hover{ color:var(--gold); }
  .breadcrumb .dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); }
  .breadcrumb .current{ color:var(--gold); }

  @keyframes fadeDown{
    from{ opacity:0; transform:translateY(-10px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ============ MAIN GRID ============ */
  .contact-wrap{
    width:90%;
    margin:0 auto;
    padding:0 24px;
    margin-top: 3%;
    background-color: #fff !important;
  }

  .contact-grid{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr 0.9fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "heading form info"
      "map     map    info";
    column-gap:32px;
    row-gap:22px;
    position:relative;
    z-index:2;
    animation:cardIn .7s cubic-bezier(.2,.8,.2,1) .1s both;
  }
  @keyframes cardIn{
    from{ opacity:0; transform:translateY(26px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ---- heading block (top-left, plain text) ---- */
  .contact-intro{
    grid-area:heading;
    align-self:start;
    padding-top:10px;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color:#b3402c;
    margin-bottom:16px;
  }
  .eyebrow::before{ content:""; width:22px; height:2px; background:var(--gold); border-radius:2px; }

  .contact-intro .fc-title{
    font-size:clamp(28px,3.4vw,38px);
    font-weight:800;
    line-height:1.25;
    margin-bottom:16px;
  }
  .fc-title em{
    font-family:'Fraunces', Georgia, serif;
    font-style:italic;
    font-weight:500;
    color:#e1b54c;
  }
  .intro-sub{
    font-size:13.5px;
    color:var(--muted);
    line-height:1.7;
    max-width:320px;
  }

  /* ---- form card (top-middle) ---- */
  .form-card{
    grid-area:form;
    background:#fff;
    padding:22px 34px 22px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(26,23,18,0.16);
  }

  .fc-head{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:24px;
  }
  .fc-icon{
    flex:none;
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg,#e1b54c,#f0cf82);
    display:flex; align-items:center; justify-content:center;
    color:#1a1712;
    box-shadow:0 8px 20px rgba(225,181,76,0.45);
  }
  .fc-icon svg{ width:17px; height:17px; }
  .fc-heading{
    font-size:19px;
    font-weight:800;
    margin-bottom:3px;
  }
  .fc-sub{
    font-size:12.5px;
    color:var(--muted);
  }

  form{ display:flex; flex-direction:column; gap:12px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

  .field label{
    display:block; font-size:12px; font-weight:700; color:var(--text);
    margin-bottom:7px;
  }
  .field label .req{ color:var(--gold-deep); }
  .field input,
  .field textarea{
    width:100%;
    padding:13px 15px;
    font-size:13.5px;
    font-family:inherit;
    color:var(--text);
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:9px;
    outline:none;
    resize:none;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .field textarea{ min-height:110px; }
  .field input::placeholder,
  .field textarea::placeholder{ color:var(--muted); opacity:.75; }
  .field input:focus,
  .field textarea:focus{
    border-color:var(--gold);
    background:rgba(225,181,76,0.05);
    box-shadow:0 0 0 3px rgba(225,181,76,0.12);
  }

  .error-msg{ font-size:11px; color:var(--danger); margin-top:5px; display:none; }
  .field.invalid input, .field.invalid textarea{ border-color:var(--danger); }
  .field.invalid .error-msg{ display:block; }

  .send-btn{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:12px;
    padding:6px 26px 6px 6px;
    border:none; border-radius:999px;
    background:transparent;
    cursor:pointer;
    margin-top:8px;
  }
  .send-btn .send-ic{
    width:44px; height:44px; border-radius:50%; flex:none;
    background:linear-gradient(135deg,#e1b54c,#f0cf82);
    display:flex; align-items:center; justify-content:center;
    color:#1a1712;
    box-shadow:0 8px 20px rgba(225,181,76,0.45);
    transition:transform .3s ease;
  }
  .send-btn .send-ic svg{ width:17px; height:17px; }
  .send-btn:hover .send-ic{ transform:rotate(45deg) scale(1.05); }
  .send-btn span.lbl{ font-size:14px; font-weight:800; color:var(--text); }
  .send-btn:disabled{ opacity:.6; cursor:not-allowed; }

  .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

  /* success state */
  .success-state{
    display:none; flex-direction:column; align-items:flex-start; gap:6px;
    padding:10px 0 4px;
  }
  .success-state.show{ display:flex; animation:fadeDown .5s ease both; }
  .success-check{ width:52px; height:52px; margin-bottom:8px; }
  .success-check circle{
    fill:none; stroke:var(--gold); stroke-width:2;
    stroke-dasharray:150; stroke-dashoffset:150;
    animation:circleDraw .6s ease forwards;
  }
  .success-check path{
    fill:none; stroke:var(--gold-deep); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:40; stroke-dashoffset:40;
    animation:checkDraw .4s ease .5s forwards;
  }
  @keyframes circleDraw{ to{ stroke-dashoffset:0; } }
  @keyframes checkDraw{ to{ stroke-dashoffset:0; } }
  .success-title{ font-size:19px; font-weight:700; }
  .success-sub{ font-size:13px; color:var(--muted); max-width:340px; line-height:1.6; }

  /* ---- map (bottom, spans heading + form columns) ---- */
  .map-col{
    grid-area:map;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .map-col .map-label{
    display:flex; align-items:center; gap:9px;
    font-size:15px; font-weight:800; color:var(--text);
  }
  .map-col .map-label svg{ width:18px; height:18px; color:var(--gold-deep); flex:none; }
  .map-frame-wrap{
    height:200px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(26,23,18,0.16);
  }
  .map-frame{
    width:100%; height:100%; border:0; display:block;
    filter:grayscale(55%) contrast(1.05) brightness(1.02);
  }

  /* ---- info card (right, spans full height) ---- */
  .info-card{
    grid-area:info;
    background:radial-gradient(140% 140% at 100% 0%, #2a2116 0%, var(--panel-dark) 55%, #150f0a 100%);
    color:var(--text-on-dark);
    padding:38px 34px;
    display:flex; flex-direction:column; gap:24px;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 30px 70px rgba(26,23,18,0.16);
    height:100%;
  }
  .info-card::before{
    content:"";
    position:absolute; top:-60px; right:-60px;
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle,rgba(225,181,76,0.14),transparent 70%);
  }
  .info-block{ position:relative; }
  .info-block h4{
    display:flex; align-items:center; gap:9px;
    font-size:14px; font-weight:800; letter-spacing:.03em;
    color:var(--gold-soft); margin-bottom:10px;
  }
  .info-block h4 svg{ width:16px; height:16px; flex:none; }
  .info-block p{ font-size:13px; line-height:1.7; color:var(--muted-on-dark); }
  .info-block a{ color:var(--muted-on-dark); text-decoration:none; }
  .info-block a:hover{ color:var(--gold-soft); }
  .info-divider{ height:1px; background:rgba(225,181,76,0.15); }

  .social-row{ display:flex; gap:10px; position:relative; }
  .social-row a{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg,#e1b54c,#f0cf82);
    display:flex; align-items:center; justify-content:center;
    color:#1a1712; text-decoration:none;
    transition:transform .3s ease, box-shadow .3s ease;
    box-shadow:0 6px 14px rgba(225,181,76,0.3);
  }
  .social-row a:hover{ transform:translateY(-4px); box-shadow:0 10px 20px rgba(225,181,76,0.45); }
  .social-row svg{ width:16px; height:16px; }

  /* ============ FEATURES ROW ============ */
  .features{
    max-width:1080px; margin:0 auto;
    padding:52px 24px 70px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  }
  .feature{
    display:flex; align-items:flex-start; gap:16px;
    padding:8px;
    animation:fadeDown .6s ease both;
  }
  .feature:nth-child(2){ animation-delay:.08s; }
  .feature:nth-child(3){ animation-delay:.16s; }
  .feature .f-ic{
    flex:none; width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,rgba(225,181,76,0.2),rgba(225,181,76,0.06));
    border:1px solid rgba(225,181,76,0.3);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-deep);
    transition:transform .3s ease;
  }
  .feature:hover .f-ic{ transform:translateY(-4px) rotate(-4deg); }
  .feature .f-ic svg{ width:22px; height:22px; }
  .feature h5{ font-size:14.5px; font-weight:800; margin-bottom:5px; }
  .feature p{ font-size:12.5px; color:var(--muted); line-height:1.6; }

  /* ======================================================
     RESPONSIVE — TABLET (≤960px)
     ====================================================== */
  @media (max-width:960px){
    .banner{ padding:48px 28px; }

    .contact-wrap{
      width:100%;
      padding:0 20px;
      margin-top:24px;
    }
    .contact-grid{
      grid-template-columns:1fr;
      grid-template-areas:
        "heading"
        "form"
        "map"
        "info";
      row-gap:20px;
    }

    .contact-intro{ padding-top:0; text-align:center; }
    .eyebrow{ justify-content:center; }
    .contact-intro .fc-title{ margin-bottom:10px; }
    .intro-sub{ max-width:100%; margin:0 auto; }

    .form-card{ padding:28px 24px; }
    .map-frame-wrap{ height:260px; }
    .info-card{ height:auto; padding:34px 26px; }

    .features{ grid-template-columns:repeat(2,1fr); gap:22px; padding:40px 20px 56px; }
  }

  /* ======================================================
     RESPONSIVE — MOBILE (≤640px)
     ====================================================== */
  @media (max-width:640px){
    .banner{ padding:38px 20px; }
    .banner-title{ font-size:24px; margin-bottom:10px; }
    .breadcrumb{ font-size:11px; gap:8px; }

    .contact-wrap{ padding:0 16px; margin-top:20px; }
    .contact-grid{ row-gap:16px; }

    .contact-intro{ text-align:left; }
    .eyebrow{ justify-content:flex-start; font-size:11px; margin-bottom:12px; }
    .contact-intro .fc-title{ font-size:24px; line-height:1.3; }
    .intro-sub{ font-size:13px; margin:0; }

    .form-card{ padding:22px 18px; border-radius:16px; }
    .fc-head{ gap:10px; margin-bottom:18px; }
    .fc-icon{ width:38px; height:38px; }
    .fc-icon svg{ width:15px; height:15px; }
    .fc-heading{ font-size:16.5px; }
    .fc-sub{ font-size:11.5px; }

    form{ gap:14px; }
    .field-row{ grid-template-columns:1fr; gap:14px; }
    .field input, .field textarea{ padding:12px 13px; font-size:13px; }
    .field textarea{ min-height:100px; }

    .send-btn{ width:100%; justify-content:center; padding:6px 6px 6px 6px; margin-top:4px; }
    .send-btn span.lbl{ font-size:13.5px; }

    .map-col{ gap:10px; }
    .map-col .map-label{ font-size:14px; }
    .map-frame-wrap{ height:220px; border-radius:16px; }

    .info-card{ padding:28px 20px; border-radius:16px; gap:20px; }
    .info-block h4{ font-size:13px; }
    .info-block p{ font-size:12.5px; }

    .features{ grid-template-columns:1fr; gap:18px; padding:32px 16px 48px; }
    .feature{ gap:14px; padding:4px; }
    .feature .f-ic{ width:46px; height:46px; }
    .feature .f-ic svg{ width:19px; height:19px; }
  }

  /* ======================================================
     RESPONSIVE — SMALL MOBILE (≤420px)
     ====================================================== */
  @media (max-width:420px){
    .banner{ padding:32px 16px; }
    .banner-title{ font-size:21px; }

    .contact-wrap{ padding:0 12px; }
    .contact-intro .fc-title{ font-size:21px; }

    .form-card{ padding:18px 14px; }
    .map-frame-wrap{ height:190px; }
    .info-card{ padding:24px 16px; }

    .social-row a{ width:34px; height:34px; }
    .social-row svg{ width:14px; height:14px; }
  }