/* ==========================================================================
   Managed IT Services page (managed.php)
   Every class starts with ms- so nothing else on the site is affected.
   Colours match the Navada theme: yellow #fcbf18, cyan #04bad2,
   and the side-menu colours green #48ae51, blue #2295f0, red #e60000, purple #9d29ae.
   ========================================================================== */

.ms-page { color: #334155; line-height: 1.6; }
.ms-page *, .ms-page *:before, .ms-page *:after { box-sizing: border-box; }
.ms-page img { max-width: 100%; height: auto; }
.ms-section { margin: 0 0 56px; }

/* section headings: small coloured label, then the heading */
.ms-eyebrow { display: inline-block; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
              text-transform: uppercase; color: #04bad2; }
.ms-page h2.ms-h2 { margin: 0 0 10px; font-size: 30px; line-height: 1.25; font-weight: 700; color: #1e293b; }
.ms-lead { max-width: 760px; margin: 0 0 28px; font-size: 17px; color: #64748b; }
.ms-center { text-align: center; }
.ms-center .ms-lead { margin-left: auto; margin-right: auto; }

/* buttons: !important because the site's global button styles force widths and padding */
a.ms-btn, button.ms-btn { display: inline-block !important; width: auto !important; margin: 0 !important;
                          padding: 13px 26px !important; border-radius: 8px; border: 2px solid #fcbf18;
                          background: #fcbf18; color: #1e293b !important; font-size: 16px; font-weight: 700;
                          line-height: 1.2; text-decoration: none !important; cursor: pointer;
                          transition: background .2s, border-color .2s, color .2s; }
a.ms-btn:hover, button.ms-btn:hover { background: #e5aa05; border-color: #e5aa05; opacity: 1; }
a.ms-btn.ms-btn-ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff !important; }
a.ms-btn.ms-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.ms-btn-row a.ms-btn { margin: 0 10px 10px 0 !important; }

/* ---------- hero ---------- */
.ms-hero { margin: 0 0 56px; padding: 48px 44px 0; border-radius: 14px; overflow: hidden; color: #e2e8f0;
           background: #2b3240; background: linear-gradient(160deg, #343c4d 0%, #232934 100%);
           border-bottom: 6px solid #fcbf18; }
.ms-hero .ms-eyebrow { color: #fcbf18; }
.ms-page .ms-hero h1 { margin: 0 0 14px; max-width: 760px; font-size: 40px; line-height: 1.15; font-weight: 700; color: #fff; }
.ms-hero p { max-width: 640px; margin: 0 0 26px; font-size: 18px; color: #cbd5e1; }
.ms-hero-img { display: block; margin: 36px auto 0; border-radius: 10px 10px 0 0; box-shadow: 0 -4px 30px rgba(0,0,0,.35); }

/* ---------- trust strip ---------- */
.ms-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: -28px 0 56px; }
.ms-trust div { padding: 18px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
                box-shadow: 0 4px 16px rgba(15,23,42,.06); text-align: center; }
.ms-trust strong { display: block; font-size: 22px; line-height: 1.2; color: #1e293b; }
.ms-trust span { font-size: 13px; color: #64748b; }

/* ---------- service pillars ---------- */
.ms-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ms-pillar { padding: 26px 26px 10px; background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--c);
             border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.ms-pillar h3 { margin: 0 0 4px; font-size: 21px; color: #1e293b; }
.ms-pillar .ms-pillar-sub { margin: 0 0 18px; font-size: 14px; color: var(--c); font-weight: 600; }
.ms-item { overflow: hidden; margin: 0 0 18px; }
.ms-item img { float: left; width: 46px; height: 46px; margin: 2px 14px 0 0; object-fit: contain; }
.ms-item h4 { margin: 0 0 2px; font-size: 16px; color: #1e293b; }
.ms-item p { margin: 0; padding: 0; background: transparent; font-size: 14px; color: #64748b; }
.ms-green  { --c: #48ae51; }
.ms-blue   { --c: #2295f0; }
.ms-red    { --c: #e60000; }
.ms-purple { --c: #9d29ae; }
.ms-yellow { --c: #e5aa05; }
.ms-note { margin: 12px 0 0; font-size: 12px; color: #94a3b8; }

/* ---------- "what we do" quote band ---------- */
.ms-band { margin: 0 0 56px; padding: 36px 40px; border-left: 6px solid #fcbf18; border-radius: 10px;
           background: #fffbea; font-size: 19px; line-height: 1.6; color: #334155; }
.ms-band strong { color: #1e293b; }

/* ---------- dashboard ---------- */
.ms-dash-img { display: block; width: 100%; max-width: 900px; margin: 0 auto 30px; border-radius: 10px;
               border: 1px solid #e2e8f0; box-shadow: 0 12px 40px rgba(15,23,42,.12); }
.ms-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ms-feature { padding: 18px 18px 16px; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #04bad2;
              border-radius: 8px; }
.ms-feature h4 { margin: 0 0 6px; font-size: 15px; color: #1e293b; }
.ms-feature p { margin: 0; padding: 0; background: transparent; font-size: 14px; color: #64748b; }

/* ---------- enquiry ---------- */
.ms-enquire { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }
.ms-form-card, .ms-contact-card { padding: 30px; border-radius: 12px; }
.ms-form-card { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.ms-contact-card { background: #2b3240; color: #cbd5e1; border-bottom: 6px solid #fcbf18; }
.ms-contact-card h3 { margin: 0 0 8px; font-size: 21px; color: #fff; }
.ms-contact-card p { margin: 0 0 18px; padding: 0; background: transparent; color: #cbd5e1; }
.ms-contact-card a { color: #fcbf18; text-decoration: none; font-weight: 700; }
.ms-contact-line { display: block; margin: 0 0 10px; font-size: 18px; }
.ms-contact-line small { display: block; font-size: 12px; font-weight: 400; color: #94a3b8; letter-spacing: .05em; text-transform: uppercase; }

.ms-field { margin: 0 0 16px; }
.ms-field label { display: block; position: static; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #1e293b; }
.ms-field input[type=text], .ms-field input[type=email], .ms-field textarea {
  display: block; width: 100%; margin: 0; padding: 11px 13px; height: auto; line-height: 1.4;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: #1e293b; }
.ms-field textarea { min-height: 130px; resize: vertical; }
.ms-field input:focus, .ms-field textarea:focus { border-color: #04bad2; outline: none; box-shadow: 0 0 0 3px rgba(4,186,210,.2); }
.ms-field.ms-has-error input, .ms-field.ms-has-error textarea { border-color: #e60000; }
.ms-error-text { display: block; margin-top: 5px; font-size: 13px; color: #c00000; }
.ms-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; font-size: 15px; }
.ms-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.ms-success { padding: 30px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.ms-success h3 { margin: 0 0 6px; color: #166534; }
.ms-success p { margin: 0; padding: 0; background: transparent; }
.ms-captcha { margin: 4px 0 18px; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .ms-trust { grid-template-columns: repeat(2, 1fr); }
  .ms-pillars, .ms-enquire { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ms-hero { padding: 32px 22px 0; }
  .ms-page .ms-hero h1 { font-size: 30px; }
  .ms-hero p { font-size: 16px; }
  .ms-page h2.ms-h2 { font-size: 24px; }
  .ms-band { padding: 24px 22px; font-size: 17px; }
  .ms-form-card, .ms-contact-card { padding: 22px; }
}