/* ===== Contact page: warm cream form on navy, so it stands out ===== */
#demoForm.glass-form{background:linear-gradient(180deg,#fffaf0,#f8ecd3);border:1px solid #f1dfb8;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,194,102,.55),0 0 38px rgba(245,154,31,.22);color:#1b2147;position:relative;overflow:hidden}
#demoForm h2{color:#0b1238;font-family:'Fraunces',serif}
#demoForm .lbl{color:#6b5320;font-weight:800}
#demoForm .field{background:#ffffff;border:1.5px solid #e2cfa6;color:#0b1238;backdrop-filter:none;box-shadow:0 1px 0 rgba(11,18,56,.04)}
#demoForm .field::placeholder{color:#8a8470}
#demoForm .field:hover{border-color:#cfae6a}
#demoForm .field:focus{background:#fff;border-color:#f59a1f;box-shadow:0 0 0 4px rgba(245,154,31,.28)}
#demoForm select.field{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f59a1f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
#demoForm .field option{color:#0b1238;background:#fff}
#demoForm .pageclip-form__submit{background:linear-gradient(135deg,#0b1238,#27409a);color:#fff;border:0;box-shadow:0 16px 36px rgba(39,64,154,.4);font-size:1rem;padding:16px 26px}
#demoForm .pageclip-form__submit:hover{background:linear-gradient(135deg,#141d52,#3a50c4)}
#demoForm p.text-xs{color:#5f553f}
#demoForm p.text-xs a{color:#27409a;font-weight:700}
#demoForm #formStatus{border:1px solid transparent}
#demoForm #formStatus.status-pending{background:#eef1fb;border-color:#c9d3f5;color:#27409a}
#demoForm #formStatus.status-ok{background:#d9f5f0;border-color:#7fd6cc;color:#087a6e}
#demoForm #formStatus.status-error{background:#ffdede;border-color:#f4a3a3;color:#b62a37}

/* the left side stays dark: soften the three cards so they feel connected to the form */
.nextsteps .s{background:rgba(255,255,255,.07)!important;border-color:rgba(255,226,176,.28)!important}

/* the section behind: richer navy with an amber glow behind the form */
section.relative.min-h-screen{background:radial-gradient(900px 600px at 78% 40%,rgba(245,154,31,.22),transparent 62%),radial-gradient(800px 600px at 0% 100%,rgba(61,92,255,.30),transparent 60%),linear-gradient(160deg,#0b1238,#141d52 60%,#1d2766)}
@media(max-width:640px){#demoForm.glass-form{border-radius:22px}}


/* ===== equal height columns, and a lighter left side ===== */
@media(min-width:1024px){
  .contact-grid{align-items:stretch}
  .lcol{display:flex;flex-direction:column;height:100%}
  .lcol .trusty{margin-top:auto;padding-top:18px}
  #demoForm.cform{display:flex;flex-direction:column;height:100%}
  #demoForm.cform .grid{flex:1 1 auto;grid-template-rows:repeat(4,auto) 1fr}
  #demoForm.cform .pageclip-form__submit{margin-top:auto}
  #demoForm.cform .grid{margin-bottom:28px}
}

/* left side: bright cream cards for the contact details, glass steps below */
.lcards a.cc.glass{background:linear-gradient(180deg,#fffaf0,#f8ecd3)!important;backdrop-filter:none!important;border:1px solid #ecd9ae!important;color:#0b1238!important;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.lcards a.cc.glass:hover{border-color:#f59a1f!important;box-shadow:0 22px 48px rgba(0,0,0,.38),0 0 0 2px rgba(245,154,31,.45)}
.lcards a.cc.glass b{color:#0b1238!important}
.lcards a.cc.glass .cl{color:#8a5a12!important}
.lcards a.cc.glass div[style]{color:#4b4437!important}
.nextsteps .s{background:linear-gradient(135deg,rgba(255,194,102,.16),rgba(255,255,255,.06))!important;border-color:rgba(255,194,102,.4)!important}
.nextsteps .s b{color:#fff}
.nextsteps .s span:not(.n){color:#e6dcc4}
.lcol h1{text-shadow:0 8px 40px rgba(0,0,0,.4)}
.lcol .trusty span{background:rgba(255,194,102,.16);border-color:rgba(255,194,102,.5);color:#ffe2b0}


/* ===== centred heading, compact form that matches the left column ===== */
.chead{margin-bottom:6px}
.chead h1{text-shadow:0 8px 40px rgba(0,0,0,.4)}
#demoForm.cform{padding:26px 28px!important}
#demoForm.cform h2{font-size:1.35rem}
#demoForm.cform .grid{gap:12px!important;margin-top:16px!important}
#demoForm.cform .lbl{font-size:.68rem;margin-bottom:5px}
#demoForm.cform .field{padding:10px 14px;font-size:.88rem;border-radius:12px}
#demoForm.cform select.field{padding-right:34px}
#demoForm.cform .pageclip-form__submit{padding:13px 24px;margin-top:6px!important}
#demoForm.cform p.text-xs{margin-top:12px!important;font-size:.7rem}
#demoForm.cform textarea.field{min-height:84px}
@media(min-width:1024px){
  #demoForm.cform .grid{margin-bottom:16px}
}
.lcards{margin-top:0!important}
.lcol .lcards.space-y-4>*+*{margin-top:12px}
.lcards .cc{padding:16px 18px!important}
.nextsteps{margin-top:14px;gap:10px}
.nextsteps .s{padding:12px 14px}
.lcol .trusty{padding-top:14px}


/* ===== message box flows normally, so the button can never be overlapped ===== */
#demoForm.cform .grid>div:last-child{display:flex;flex-direction:column;min-height:132px}
#demoForm.cform .grid>div:last-child textarea.field{position:static;display:block;flex:1 1 auto;width:100%;height:auto;min-height:96px;resize:vertical}
#demoForm.cform .grid{grid-template-rows:none;margin-bottom:22px}
#demoForm.cform .pageclip-form__submit{position:relative;z-index:2;flex:none}
#demoForm.cform p.text-xs{flex:none}


/* ===== three feature boxes in one row, stretching to meet the form ===== */
.tboxes{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.tbox{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,194,102,.2),rgba(255,255,255,.07));border:1px solid rgba(255,194,102,.5);color:#fff;transition:transform .25s,border-color .25s}
.tbox:hover{transform:translateY(-3px);border-color:#ffc266}
.tbox .ti{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#241500;background:linear-gradient(135deg,#ffc266,#f59a1f);box-shadow:0 8px 20px rgba(245,154,31,.4)}
.tbox b{display:block;font-family:'Fraunces',serif;font-size:1rem;font-weight:600;line-height:1.2}
.tbox div span{display:block;margin-top:2px;font-size:.78rem;color:#e6dcc4;line-height:1.35}
@media(min-width:640px){
  .tboxes{grid-template-columns:repeat(3,1fr)}
  .tbox{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 14px 16px}
}
@media(min-width:1024px){
  .lcol .tboxes{flex:1 1 auto;grid-template-rows:1fr;margin-top:14px}
  .lcol .tbox{height:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tbox{transition:none}}