/* ═══════════════════════════════════════════════════════════════
   Otto Connect — shared.css
   Loaded by every page via <link rel="stylesheet" href="css/shared.css">
   Page-specific overrides live in each page's own <style> block.
═══════════════════════════════════════════════════════════════ */

/* ─── BRAND TOKENS ─────────────────────────────────────── */
:root {
      /* Otto Connect platform */
      --otto-blue:      #4B8BC5;
      --otto-blue-dark: #2e6aa0;

      /* SurfCAST sub-brand */
      --surf-navy:  #204093;
      --surf-teal:  #108993;
      --surf-sand:  #C6B492;

      /* ParkingCAST sub-brand */
      --park-navy:  #204093;   /* shared navy — same CAST family */
      --park-green: #2A6B4F;
      --park-stone: #9EA898;

      /* Neutrals */
      --gray-900: #111827;
      --gray-700: #3C3C3C;
      --gray-500: #6B7280;
      --gray-200: #E5E7EB;
      --gray-100: #F3F4F6;
      --white:    #FFFFFF;

      /* Typography */
      --font-head: 'Outfit', 'Segoe UI', sans-serif;
      --font-body: 'Poppins', 'Segoe UI', sans-serif;
    }

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      color: var(--gray-700);
      background: var(--white);
      line-height: 1.6;
    }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }

/* ─── UTILITIES ─────────────────────────────────────────── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
    .section { padding: 88px 0; }
    .section--tight { padding: 60px 0; }
    .label {
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--surf-teal);
      margin-bottom: 12px;
      display: block;
    }
    .section-title {
      font-family: var(--font-head);
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 700;
      color: var(--gray-900);
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .section-sub {
      font-size: 17px;
      color: var(--gray-500);
      max-width: 600px;
      line-height: 1.7;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 6px;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s ease;
    }
    .btn-primary {
      background: var(--surf-teal);
	  border-color: rgba(255,255,255,0.6);
      color: var(--white);
    }
    .btn-primary:hover { background: #0d7179; transform: translateY(-1px); }
    .btn-outline {
      background: transparent;
      color: var(--white);
      border-color: rgba(255,255,255,0.6);
    }
    .btn-outline:hover { background: rgba(255,255,255,0.12); }
    .btn-outline-dark {
      background: transparent;
      color: var(--surf-navy);
      border-color: var(--surf-navy);
    }
    .btn-outline-dark:hover { background: var(--surf-navy); color: var(--white); }

/* ─── NAV ────────────────────────────────────────────────── */
nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--gray-200);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
    }

    /* Logo */
    .nav-logo { display: flex; align-items: center; }
    .nav-logo img { max-height: 40px; height: auto; width: auto; display: block; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-700);
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--surf-teal); }
    .nav-cta {
      background: var(--surf-teal);
      color: var(--white) !important;
      padding: 9px 20px;
      border-radius: 5px;
      font-weight: 600 !important;
    }
    .nav-cta:hover { background: #0d7179 !important; color: var(--white) !important; }


/* ─── PAGE HERO (inner pages) ───────────────────────────── */
    .page-hero {
      padding-top: 68px;
      background: linear-gradient(160deg, rgba(32,64,147,0.88) 0%, rgba(16,137,147,0.82) 100%),
        url('/images/bg-wave-1600x1064.jpeg') center/cover no-repeat;
      padding-bottom: 72px;
    }
    .page-hero-inner { padding-top: 64px; max-width: 65%; }

    /* Two-column hero layout — wrap .page-hero-inner and .page-hero-aside in .page-hero-cols */
    .page-hero-cols {
      display: flex;
      align-items: flex-end;
      gap: 40px;
      padding-top: 64px;
    }
    .page-hero-cols .page-hero-inner {
      padding-top: 0;
      max-width: 65%;
      flex: 0 0 65%;
    }
    .page-hero-aside {
      flex: 0 0 35%;
      max-width: 35%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .page-hero .eyebrow {
      display: inline-block; background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.92);
      font-family: var(--font-head); font-size: 12px; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px;
      border-radius: 20px; margin-bottom: 24px;
    }
    .page-hero h1 {
      font-family: var(--font-head); font-size: clamp(34px, 5vw, 52px);
      font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 20px;
    }
    .page-hero h1 em { font-style: normal; color: var(--surf-sand); }
    .page-hero p { font-size: 18px; color: rgba(255,255,255,0.85); line-height: 1.7; margin-bottom: 32px; max-width: 90%; }
    .page-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
	
/* ─── HERO ASIDE BUBBLE ─────────────────────────────────── */
	.hero-aside-bubble {
	  background: rgba(255,255,255,0.9);
	  border-radius: 8px;
	  padding: 0 24px;
	  height: 58px;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	  gap: 24px;
	  width: 100%;
	  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
	}
	.hero-aside-bubble img {
	  width: 45%;
	  max-width: 150px;
	  height: auto;
	}	

/* ─── CTA BANNER ─────────────────────────────────────────── */
    .cta-section, .cta-banner {
      background: linear-gradient(135deg, var(--surf-navy) 0%, var(--otto-blue) 100%);
      padding: 88px 0; text-align: center;
    }
    .cta-section h2, .cta-banner h2 {
      font-family: var(--font-head); font-size: clamp(28px, 4vw, 42px);
      font-weight: 800; color: var(--white); margin-bottom: 16px; line-height: 1.2;
    }
    .cta-section p, .cta-banner p {
      font-size: 18px; color: rgba(255,255,255,0.8); margin-bottom: 36px;
      max-width: 520px; margin-left: auto; margin-right: auto;
    }
    .cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ─── FOOTER ─────────────────────────────────────────────── */
footer {
      background: var(--gray-900);
      color: rgba(255,255,255,0.65);
      padding: 56px 0 32px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .footer-brand {}
    .footer-logo { display: block; margin-bottom: 16px; }
    .footer-logo img { height: 36px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
    .footer-desc { font-size: 13px; line-height: 1.7; margin-bottom: 20px; max-width: 280px; }
    .footer-contact-btn {
      display: inline-block;
      margin-bottom: 20px;
      padding: 10px 22px;
      background: var(--surf-teal);
      color: var(--white);
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      transition: background 0.2s;
    }
    .footer-contact-btn:hover { background: #0d7179; color: var(--white); }
    .footer-contact { font-size: 13px; line-height: 1.9; }
    .footer-contact a { color: var(--surf-teal); }
    .footer-col h4 {
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 700;
      color: var(--white);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 16px;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col ul li a { font-size: 13px; transition: color 0.2s; }
    .footer-col ul li a:hover { color: var(--surf-teal); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-bottom p { font-size: 12px; }
    .footer-bottom-products {
      display: flex;
      gap: 12px;
    }
    .footer-product-chip {
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
    }
    .chip-surf { background: rgba(16,137,147,0.25); color: #6dd5db; }
    .chip-park { background: rgba(42,107,79,0.25); color: #7ecfa7; }


/* ─── FOOTER PRODUCT BUBBLE ─────────────────────────────── */
.footer-product-bubble {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
  padding: 0 24px;
  height: 40px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  width: 75%;
}
.footer-product-bubble img {
  height: 28px;
  width: auto;
}

/* ─── FOOTER PRODUCT LOGOS ──────────────────────────────── */
	.footer-product-logos {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  gap: 24px;
	  margin-top: 20px;
	}
	.footer-product-logos img {
	  height: 40px;
	  width: auto;
	}



/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — shared elements
   All rules here fire at ≤768px (phone) or ≤480px (small phone).
   Desktop styles above are completely unaffected.
═══════════════════════════════════════════════════════════════ */

/* ─── HAMBURGER BUTTON (hidden on desktop) ──────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 4px;
  z-index: 101;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

/* low width desktops will mean the nav links wrap to multiple lines.
   These styles help keep it looking good until we hit the mobile
   breakpoint where we switch to the hamburger menu. */
@media (max-width: 940px) {
  /* Cut down the line height to keep the link text from sitting on
     the very top and very bottom of the li container */
  .nav-links li {
    line-height: 14px;
    text-align: center;
  }
  /* Don't let the CTA button wrap, the styling breaks if it does */
  .nav-links li a.nav-cta {
    white-space: nowrap;
  }
  /* Pseudo element to keep a flex gap between logo and nav links */
  .nav-links:before {
    content: "";
  }
}

@media (max-width: 768px) {

  /* ── Nav ── */
  .nav-hamburger { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    background: rgba(255,255,255,0.99);
    border-bottom: 1px solid var(--gray-200);
    flex-direction: column;
    padding: 12px 24px 24px;
    gap: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
  }
  .nav-links li:last-child a {
    border-bottom: none;
    margin-top: 10px;
    text-align: center;
    padding: 12px 20px;
    border-radius: 6px;
  }

  /* ── Page hero ── */
  .page-hero-inner { max-width: 100%; padding-top: 40px; }
  .page-hero h1 { font-size: clamp(28px, 7vw, 40px); }
  .page-hero p { font-size: 16px; }
  .page-hero-cols { flex-direction: column; align-items: stretch; padding-top: 40px; }
  .page-hero-cols .page-hero-inner { max-width: 100%; flex: none; padding-top: 0; }
  .page-hero-aside { display: flex; flex: none; max-width: 100%; justify-content: flex-start; margin-top: 20px; }
  .page-hero-aside .hero-aside-bubble { width: 100%; height: auto; padding: 12px 16px; gap: 12px; }
  .page-hero-aside .hero-aside-bubble img { max-width: 45%; height: auto; width: auto; }

  /* ── Section spacing ── */
  .section { padding: 56px 0; }
  .section--tight { padding: 40px 0; }

  /* ── CTA banner ── */
  .cta-section, .cta-banner { padding: 56px 0; }
  .cta-section p, .cta-banner p { font-size: 16px; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-product-bubble { max-width: 280px; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-product-bubble { max-width: 100%; }
}

/* Brand tile component (consolidated from solutions and platform) */

.brands-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.brand-tile {
  border-radius: 16px;
  padding: 40px 36px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brand-tile--surf { background: #EBF5F6; border-color: #c2e2e4; }
.brand-tile--park { background: #EBF2EE; border-color: #bfdaca; }

.brand-tile-community {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  align-self: flex-start;
}

.brand-tile--surf .brand-tile-community { background: #dff0f1; color: var(--surf-teal); }
.brand-tile--park .brand-tile-community { background: #ddeee6; color: var(--park-green); }
.brand-tile img { height: 72px; width: auto; max-width: 80%; object-fit: contain; align-self: center; }
.brand-tile-desc { font-size: 15px; color: var(--gray-700); line-height: 1.65; }
.brand-tile-stat { font-family: var(--font-head); font-size: 13px; color: var(--gray-500); padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.08); }
.brand-tile-stat strong { color: var(--gray-700); }

/* Brands section wrapper (consolidated from platform and solutions) */

.brands-section { background: var(--white); }
.brands-header { text-align: center; margin-bottom: 48px; }
.brands-header .section-sub { margin: 0 auto; }

/* How it works component (consolidated from index and platform) */

.how-it-works { background: var(--surf-navy); }
.how-it-works .section-title { color: var(--white); }
.how-it-works .section-sub { color: rgba(255,255,255,0.7); }
.how-it-works .label { color: var(--surf-sand); }
.hiw-header { margin-bottom: 56px; }
.hiw-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative;
}
.hiw-steps::before {
  content: ''; position: absolute; top: 28px;
  left: calc(16.67% + 14px); right: calc(16.67% + 14px);
  height: 2px; background: rgba(255,255,255,0.2);
}
.hiw-step { padding: 0 24px; text-align: center; }
.step-num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--surf-teal);
  font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; position: relative; z-index: 1; border: 3px solid var(--surf-navy);
}
.hiw-step h3 { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.hiw-step p { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.7; }



/* Testimonial section wrapper (consolidated from index, value, communities) */

.testimonial { background: var(--white); padding: 56px 0; }
/* Note: .testimonial-inner has page-specific alignment overrides (start vs center) — kept in page files */

/* Testimonial meta component (consolidated from index and value) */

.testimonial-town-badge {
  display: inline-block; background: var(--surf-teal); color: var(--white);
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 14px; border-radius: 4px; margin-bottom: 20px;
}
.testimonial-meta h3 {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  color: var(--gray-900); margin-bottom: 4px;
}
.testimonial-meta .role { font-size: 14px; color: var(--gray-500); margin-bottom: 20px; }
.testimonial-since {
  font-family: var(--font-head); font-size: 13px; color: var(--gray-500);
  border-top: 1px solid var(--gray-200); padding-top: 16px;
}
.testimonial-since strong { color: var(--surf-teal); }
.quote-card {
  background: var(--white); border-radius: 16px; padding: 40px 44px;
  border-left: 4px solid var(--surf-teal);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07); position: relative;
}
.quote-mark {
  font-family: Georgia, serif; font-size: 80px; color: var(--surf-teal);
  opacity: 0.25; position: absolute; top: 8px; left: 24px; line-height: 1;
}
.quote-text {
  font-size: 17px; color: var(--gray-700); line-height: 1.8;
  font-style: italic; position: relative; z-index: 1;
}

/* Communities section (consolidated from index, platform, communities) */

.communities { background: var(--white); }
.communities-header { margin-bottom: 48px; }
.communities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.community-card {
  background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 22px 20px; transition: all 0.2s;
}
.community-card:hover { border-color: var(--surf-teal); background: #f0fafa; transform: translateY(-2px); }
.community-name { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--surf-navy); margin-bottom: 4px; }
.community-state { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; }
.community-detail { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
.community-product { display: inline-block; margin-top: 12px; font-family: var(--font-head); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }

/* Product/brand tag pills (consolidated from index, platform, communities) */

.tag-surf { background: #e3eef9; color: var(--surf-navy); }
.tag-park { background: #e8f2ec; color: var(--park-green); }