/* ---------------------------------------------------------------------------
   oswsolutions.com

   Hand-written so it can be edited. The previous site was Elementor output:
   thousands of generated wrappers and hashed class names that nobody, human or
   otherwise, could change with confidence.

   Every value below was read off the live site's computed styles, not matched
   by eye. Where a number looks oddly specific (55px, 82.5px line-height, a
   1.45px border) that is the Elementor original, kept on purpose. Changing one
   is changing the design, not tidying it.
--------------------------------------------------------------------------- */

:root {
  /* The brand gradient, as the live site actually draws it. */
  --grad-a: #4489fe;
  --grad-b: #24b4a5;
  --grad: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);

  --navy-deep: #042b4d;     /* services section, footer */
  --navy-card: #073760;     /* service cards, why section */
  --heading: #191d4d;       /* headings on light backgrounds */
  --ink: #25292a;           /* body text */
  --muted: #576476;
  --bg: #ffffff;

  --pill-bg: rgba(241, 249, 248, .9);

  --wrap: 1140px;           /* content column, measured off the live site */
  --line: #e1e7ef;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--grad-a); }

h1, h2, h3, h4 { color: var(--heading); margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 4.2vw, 55px); line-height: 1.5; }
h2 { font-size: clamp(1.9rem, 3.4vw, 48px); line-height: 1.25; }
h3 { font-size: 24px; line-height: 1.3; }
h4 { font-size: 18px; }
p  { margin: 0 0 1rem; }

.wrap { width: min(100% - 1.25rem, var(--wrap)); margin-inline: auto; padding-inline: 10px; }

.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: .6rem 1rem; z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }

/* --- buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  border-radius: 100px; text-decoration: none;
  font-size: 18px; font-weight: 400; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--grad); color: #fff; padding: .7rem .7rem .7rem 1.6rem; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(68,137,254,.3); }

.btn-white {
  background: rgba(255,255,255,.75); color: #182034;
  border: 1.45px solid var(--line); padding: .95rem 1.75rem;
}
.btn-white:hover { background: #fff; transform: translateY(-1px); }

/* The white disc with the blue arrow, on the gradient buttons. */
.arrow {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--grad-a);
  font-size: 1rem; line-height: 1; flex: 0 0 auto;
}

/* --- top bar --------------------------------------------------------------- */

.topbar { background: var(--navy-deep); color: #fff; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; font-size: 17px; }
.topbar strong { font-weight: 700; }
.topbar-social { display: inline-flex; align-items: center; gap: .6rem; }
.topbar-social img { width: 26px; height: 26px; }

/* --- header: a floating pill over the hero --------------------------------- */

/* Static, not sticky. The live header scrolls away with the hero; making it
   follow the reader is a different design decision, not a reproduction. */
.site-header { position: relative; z-index: 60; padding-top: 1.75rem; }

.pill {
  width: max-content; max-width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  display: flex; align-items: center; gap: 2.5rem;
  padding: 10px 15px 10px 40px;
  background: var(--pill-bg);
  border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}
.brand { display: block; }
.brand img { width: 112px; }

.nav { display: flex; gap: 2.2rem; }
.nav a { color: var(--ink); text-decoration: none; font-size: 18px; }
.nav a:hover { color: var(--grad-a); }

.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem .6rem; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--heading); margin: 5px 0; border-radius: 2px; }

.mobile-nav {
  display: none; flex-direction: column;
  width: min(100% - 2.5rem, var(--wrap)); margin: .5rem auto 0;
  background: #fff; border-radius: 18px; padding: .5rem 1.25rem 1rem;
  box-shadow: 0 10px 30px rgba(4,43,77,.16);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { color: var(--heading); text-decoration: none; font-weight: 500; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; }

/* --- hero ------------------------------------------------------------------ */

/* Light, and photographic. No overlay: the artwork is already pale enough for
   navy text, and darkening it turns the whole page cold. */
.hero {
  background: url("assets/Background-scaled.png") 50% 50% / cover no-repeat;
  padding-bottom: 3.5rem;
}
.hero-in { padding-top: clamp(3rem, 7vw, 6.5rem); }
.hero h1 { margin-bottom: 1.4rem; }
.lede { font-size: 18px; line-height: 27px; color: var(--ink); max-width: 72ch; margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* The AT&T badges sit at the far right of the hero, not centred under it. */
.hero-badges { width: 400px; margin: 2.5rem 0 0 auto; }

/* --- stats: a tinted band, left-aligned within each column ----------------- */

.stats { background: linear-gradient(270deg, rgba(37,188,200,.28) 20%, rgba(55,141,237,.22) 68%); }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 2.5rem 0; }
.stat strong { display: block; font-size: 28px; font-weight: 700; color: #000; line-height: 1.4; }
.stat span { font-size: 16px; color: var(--muted); }

/* --- sections -------------------------------------------------------------- */

.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-dark { background: var(--navy-deep); }
.section-mid  { background: var(--navy-card); }

.section-head { margin: 0 0 3rem; }
.section-head h2 { margin-bottom: .75rem; }
.section-head p { color: var(--ink); margin: 0; }

.section-dark h2, .section-mid h2, .section-dark h3, .section-mid h3 { color: #fff; }
.section-dark .section-head p, .section-mid .section-head p { color: rgba(255,255,255,.8); }

/* --- solutions: the asymmetric mosaic -------------------------------------- */

/* Four tracks so a card can be two wide: wide+narrow+narrow, then the mirror. */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.card { grid-column: span 1; }
.card-wide { grid-column: span 2; }

.card {
  display: flex; flex-direction: column;
  background: #fff; border: 0.73px solid var(--line);
  padding: 25px;
}
.card h3 { font-size: 28px; line-height: 28px; margin-bottom: .9rem; }
.card p { color: var(--ink); margin: 0; font-size: 18px; }

/* Artwork sits at the bottom of the card, inset rather than bled to the edge. */
.card-media { margin-top: auto; padding-top: 1.75rem; }
.card-media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: end; }

/* --- services: two columns on dark navy ------------------------------------ */

.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }

.service { background: var(--navy-card); padding: 25px; }

/* No background here: the tile is baked into the PNG as white at 12% alpha,
   which is what gives it that faint lift off the card. */
.service-icon { display: block; width: 48px; margin-bottom: 1.25rem; }
.service-icon img { width: 48px; height: 48px; }
.service h3 { margin-bottom: .75rem; }
.service p { color: rgba(255,255,255,.82); font-size: 18px; margin: 0; }

.chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li {
  font-size: 14px; color: #fff;
  background: rgba(255,255,255,.12);
  padding: 10px 5px;
}

/* --- why choose us: four columns, circular numbers ------------------------- */

.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.why-list .num {
  display: grid; place-items: center;
  width: 41px; height: 40px; border-radius: 100px;
  background: #104573; color: #fff; font-weight: 700; font-size: 20px;
  margin-bottom: 1.5rem;
}
.why-list h3 { font-size: 20px; margin-bottom: .75rem; }
.why-list p { color: rgba(255,255,255,.82); margin: 0; font-size: 18px; }

/* --- contact: two columns, circular icon rows, no form --------------------- */

.contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-copy h2 { margin-bottom: 1rem; }
.contact-copy p { color: var(--ink); max-width: 42ch; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.contact-list li { display: flex; align-items: center; gap: 1.1rem; }
.contact-list img { width: 44px; height: 44px; flex: 0 0 auto; }
.contact-list div { display: flex; flex-direction: column; line-height: 1.45; }
.contact-list a, .contact-list strong { color: var(--heading); font-weight: 700; font-size: 18px; text-decoration: none; }
.contact-list a:hover { color: var(--grad-a); }
.contact-list span { color: var(--muted); font-size: 17px; }

/* --- footer ---------------------------------------------------------------- */

.site-footer { background: var(--navy-deep); color: #c8d8e6; padding: 3.5rem 0 0; }
.footer-in { display: grid; grid-template-columns: 2.26fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-logo { width: 112px; margin-bottom: 1.5rem; }
.footer-brand p { font-size: 18px; color: #c8d8e6; }
.footer-badges { width: 340px; margin-top: 1.5rem; }

.footer-col { display: flex; flex-direction: column; gap: .85rem; }
.footer-col h4 { color: #fff; margin: 0 0 .5rem; font-size: 20px; }
.footer-col a { color: #c8d8e6; text-decoration: none; font-size: 18px; }
.footer-col a:hover { color: #fff; }

.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  margin-top: 3rem; padding: 1.5rem 0; font-size: 18px; color: #c8d8e6;
}
.footer-legal a { color: #c8d8e6; text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* --- responsive ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .card-wide { grid-column: span 2; }
  .why-list { grid-template-columns: repeat(2, 1fr); }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .hero-badges { width: 340px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .pill { width: auto; gap: 1rem; padding: 10px 15px 10px 24px; justify-content: space-between; }
  .pill .btn-primary { display: none; }
  .services { grid-template-columns: 1fr; }
  .contact-in { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 17px; }
  .mosaic { grid-template-columns: 1fr; }
  .card, .card-wide { grid-column: span 1; }
  .why-list { grid-template-columns: 1fr; gap: 1.75rem; }
  .stats-in { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .footer-in { grid-template-columns: 1fr; }
  .footer-badges { width: 280px; }
  .hero-badges { width: 260px; margin-inline: 0; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}