:root{
  --brand:#478ac9;         /* site blue */
  --ink:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --panel:#f8fafc;
}

*{box-sizing:border-box}
body{color:var(--ink)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout helpers */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* ===== Hero ===== */
.contact-hero{padding:48px 0;background:linear-gradient(180deg,#f2f7fc,#fff)}
.contact-hero h1{margin:0 0 8px;font-size:2rem}
.contact-hero .sub{color:var(--muted);max-width:840px}

.contact-cards{
  display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px
}
.contact-cards article{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px
}
.contact-cards h3{margin:0 0 6px}
.ticks{margin:8px 0 0;padding-left:18px}
@media(min-width:900px){
  .contact-cards{grid-template-columns:repeat(3,1fr)}
}

/* ===== Form ===== */
.contact-form{padding:28px 0 48px}
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px
}
.form-card h2{margin:0 0 10px}

.hp{display:none !important} /* honeypot */

.grid{display:grid;grid-template-columns:1fr;gap:12px}
.field{display:flex;flex-direction:column}
.field label{font-size:.95rem;margin-bottom:4px;color:#334155}
.field input,.field select,.field textarea{
  border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;font-size:1rem;background:#fff
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:#b6d2ef;box-shadow:0 0 0 3px rgba(71,138,201,.15)
}

/* wide fields */
.field-full{grid-column:1 / -1}
.field-half{grid-column:1 / -1}

/* responsive columns */
@media(min-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .field-full{grid-column:1 / 3}
  .field-half{grid-column:auto}
}

.disclaimer{margin-top:6px;color:#64748b;font-size:.9rem}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--line);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{background:#fff;color:var(--brand)}
.btn.outline{background:#fff;border-color:var(--brand);color:var(--brand)}
.btn:hover{text-decoration:none;filter:brightness(0.98)}

/* ===== Sidebar CTA ===== */
.alt-contact{
  margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px
}
.alt-contact h3{margin:0 0 6px}
@media(min-width:1000px){
  .contact-form .wrap{display:grid;grid-template-columns:2fr .9fr;gap:16px;align-items:start}
  .alt-contact{margin-top:0}
}

/* ===== Harmonize with Webpage spacing (optional) ===== */
.u-section-contact .u-header,
.u-section-contact footer{margin:0}

/* ====== Color / Design Enhancements for Contact page ====== */

/* Hero: soft brand gradient + accent underline */
.contact-hero {
  background: linear-gradient(180deg, rgba(71,138,201,.12), rgba(71,138,201,0));
  position: relative;
  overflow: hidden;
}
.contact-hero .wrap { position: relative; }
.contact-hero h1 {
  line-height: 1.15;
  margin-bottom: 6px;
}
.contact-hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #478ac9, #6ba6d8);
}

/* Subtle geometric background motif (pure CSS, no image files) */
.contact-hero::before {
  content:"";
  position:absolute; inset:-40px -40px auto auto;
  width: 360px; height: 360px;
  background:
    radial-gradient(closest-side, rgba(71,138,201,.14), rgba(71,138,201,0) 70%),
    conic-gradient(from 90deg, rgba(71,138,201,.08), rgba(71,138,201,0) 40%);
  border-radius: 50%;
  filter: blur(4px);
  transform: rotate(8deg);
}

/* Info cards: colored top borders to add variety */
.contact-cards article {
  border-top: 4px solid #478ac9;
  transition: transform .15s ease, box-shadow .15s ease;
}
.contact-cards article:nth-child(2){ border-top-color:#2d6a9f; }
.contact-cards article:nth-child(3){ border-top-color:#6ba6d8; }
.contact-cards article:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2,8,23,.08);
}

/* Links that matter */
.link-strong { font-weight: 600; }

/* Form card: light brand edge + micro-shadow */
.form-card{
  border: 1px solid #dbe7f5;
  box-shadow: 0 6px 18px rgba(2,8,23,.06);
}

/* Field labels and focus ring: crisper + branded */
.field label{
  font-weight: 600;
  color: #1f2a44;
}
.field input,.field select,.field textarea{
  background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#478ac9;
  box-shadow: 0 0 0 3px rgba(71,138,201,.18);
}

/* Two-column rhythm on desktop: add vertical hairline divider (visual structure) */
@media(min-width:1000px){
  .contact-form .wrap{
    position: relative;
  }
  .contact-form .wrap::before{
    content:"";
    position:absolute; top:0; bottom:0; left:calc(100% * 2/3 - 8px);
    width:1px; background: linear-gradient(#e5e7eb, #f3f4f6);
    opacity:.8;
  }
}

/* Buttons: richer states */
.btn.primary {
  background: linear-gradient(180deg, #5c98cf, #478ac9);
  border-color: #478ac9;
}
.btn.primary:hover { filter: brightness(1.03); }
.btn.ghost, .btn.outline {
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn.ghost:hover {
  background:#f0f6fd;
  color:#2d6a9f;
  border-color:#cfe0f3;
}
.btn.outline:hover {
  background:#eaf2fb;
}

/* Sidebar callout: add icon chip + gradient edge */
.alt-contact{
  position: relative;
  overflow: hidden;
  border-left: 4px solid #478ac9;
  background:
    linear-gradient(180deg, rgba(71,138,201,.08), rgba(71,138,201,0)),
    var(--panel);
}
.alt-contact h3{
  display:flex; align-items:center; gap:8px;
}
.alt-contact h3::before{
  content:"📅";
  font-size: 1.1rem;
  line-height:1;
}

/* Small, classy section dividers */
.contact-form { position: relative; }
.contact-form::before{
  content:"";
  display:block;
  height:1px; width:100%;
  background: linear-gradient(90deg, rgba(71,138,201,0), rgba(71,138,201,.25), rgba(71,138,201,0));
  margin:-6px 0 18px;
}

/* Make the whole page feel cohesive with subtle rounded cards */
.contact-cards article,
.form-card,
.alt-contact { border-radius: 12px; }

/* Improve mobile spacing */
@media(max-width: 520px){
  .contact-hero { padding: 40px 0; }
  .contact-form { padding: 22px 0 36px; }
}

/* Accessibility: ensure focus-visible is obvious on buttons/links */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid #478ac9;
  outline-offset: 2px;
  border-radius: 10px;
}
.designed-by {
  font-size: 0.8rem;
  color: #64748b;
}
.designed-by:hover {
  color: #478ac9;
}