/* Tailwind-inspired dark theme overrides */
:root {
  --theme-text-color: #f8fafc;
  --theme-text-light: #cbd5e1;
  --theme-background: #020617;
  --theme-surface: #0f172a;
  --theme-border: #334155;
  --theme-accent: #38bdf8;
}
body {
  background: var(--theme-background);
  color: var(--theme-text-color);
}

.hero-bg {
  background: linear-gradient(to bottom, var(--theme-background), #0b1120);
}

.card {
  background: var(--theme-surface);
  padding-left: 2rem;
  border: 1px solid var(--theme-border);
}

#header .logo img, #header .logo svg {
  display: inherit;
  height: 60px;
}

body.header-fixed.header-animated #header.scrolled .logo img, body.header-fixed.header-animated #header.scrolled .logo svg {
	height: 38px;
}

.accent {
  color: var(--theme-accent);
  padding-bottom: 1rem;
}

h1,
h2,
h3 {
  color: #f8fafc;
}

p {
  color: #cbd5e1;
}

.text-slate-300 {
  color: #cbd5e1 !important;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-black {
  color: #000000;
}

/* ── Pricing Grid: 2×2 layout ── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left !important;
}

.pricing-card h2 {
  color: var(--theme-accent);
}

.pricing-card > p:last-child {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--theme-border);
}

/* ── Services summary ── */
.service-summary {
  background: #0f172a;
  border: 1px solid #334155;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 0rem;
  padding-top: 1.25rem;
}

@media (min-width: 1024px) {
  .service-summary {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-bottom: 0.5rem;
    padding-top: 1.75rem;
  }
}

/* ── How it works ── */
.hiw-wrapper {
  text-align: center;           /* center the inner box */
}

.hiw-box {
  display: inline-block;        /* shrink to fit content */
  text-align: left;             /* left-align text inside */
  max-width: 48rem;             /* optional: cap width (~768px) */
  padding: 1.5rem 2rem;         /* space around content */
  background-color: #020617;    /* or your existing panel bg */
  border-radius: 0.75rem;
}

.hiw-button {
  display: block;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: var(--theme-accent);
  color: #000 !important;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.hiw-button:hover, .hiw-button:active {
  background: #7dd3fc;
  text-decoration: none;
}

.hiw-button a {
  background-color: #0ea5e9 !important;
  color: #000 !important;
}

.hiw-button a:visited {
  color: #000 !important;
}

/* Get in touch */
.info-contact {
  max-width: 480px;
  margin: 0 auto;
}

/* Contact form */
.contact-form {
  max-width: 480px;
  margin: 0 auto;
}

.contact-form .form-input-wrapper {
  margin-bottom: 1.5rem;
}

.contact-form label {
  display: block !important;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--theme-text-color);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  display: block !important;
  width: 100% !important;
  padding: 0.75rem 1rem;
  background: #1e293b;
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem;
  color: var(--theme-text-color);
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--theme-accent);
}

.contact-form textarea {
  resize: vertical;
  min-height: 160px;
}

.contact-form button[type="submit"] {
  display: block;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 2rem;
  background: var(--theme-accent);
  color: #020617;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.contact-form button[type="submit"]:hover {
  background: #7dd3fc;
}

.contact-form .required {
  color: var(--theme-accent);
  margin-left: 0.25rem;
}



/* Contact page hero pills */
.contact-pills {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-pill {
  flex: 1;
  min-width: 160px;
  max-width: 220px;
  background: #1e293b;
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pill-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--theme-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}