/*
  Alatex Network Services LLC — Responsive styles
  Notes:
  - Mobile-first with progressive enhancements.
  - Uses CSS clamps for fluid type and spacing.
  - Reduces motion when user prefers.
*/

:root {
    --brand: #0aa3d6;
    --brand-dark: #0290bd;
    --text: #0b0f19;
    --muted: #5b6575;
    --bg: #ffffff;
    --chip-bg: #f9b233;
    --pill-radius: 999px;
    --container: 1200px;
  }
  
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  
  html, body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
  }
  
  /* Utilities */
  .container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
  }
  .ratio-16x9 { aspect-ratio: 16 / 9; }
  .link-arrow { text-decoration: none; color: var(--text); font-weight: 600; }
  .link-arrow:hover { color: var(--brand); }
  
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }
  
  /* NAVBAR */
  .nav-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem 1.25rem;
    padding: .5rem 1rem;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
  }
  
  .nav-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
  
  .nav-bar-left-logo-img {
    width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: 0 0 64px;
  }
  .nav-bar-left-logo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  
  .nav-bar-left-logo-text p { margin: 0; font-weight: 700; font-size: clamp(1rem, 1vw + .8rem, 1.2rem); line-height: 1.1; }
  
  .nav-bar-right { display: grid; align-content: center; gap: .5rem; }
  
  .nav-bar-right-upper { justify-self: end; display: flex; gap: .5rem; }
  .nav-bar-right-upper button {
    appearance: none; border: 0; background: var(--chip-bg); color: #0a0a0a;
    padding: .5rem .9rem; border-radius: var(--pill-radius); font-weight: 600; cursor: pointer;
  }
  .nav-bar-right-upper button:first-child { padding-left: 2rem; position: relative; }
  .nav-bar-right-upper button:first-child::before {
    content: "★"; position: absolute; left: .8rem; top: 50%; translate: 0 -50%; color: #000;
  }
  
  .nav-bar-right-lower { display: grid; grid-auto-flow: column; align-items: center; justify-content: end; gap: .75rem; }
  
  /* Hamburger */
  #nav-toggle { display: none; }
  .hamburger {
    display: none; width: 42px; height: 36px; border-radius: 10px; cursor: pointer; border: 0; background:#fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M3 12h18'/><path d='M3 18h18'/></svg>");
    background-repeat:no-repeat; background-position:center; background-size:24px 24px;
  }
  
  .nav-bar-menu { position: static; display: inline-flex; margin-left: auto; }
  .nav-bar-menu ul { list-style:none; margin:0; padding:0; display:flex; gap: clamp(.75rem, 1.5vw, 1.75rem); }
  .nav-bar-menu a { color:#1f2937; text-decoration:none; font-weight:500; }
  .nav-bar-menu a:hover { color: var(--brand); }
  
  .nav-bar-search {
    display:flex; align-items:center; gap:.5rem; background: var(--bg);
    padding:.4rem .5rem .4rem .8rem; border:2px solid #eef2f7; border-radius: 999px;
    position: relative;
  }
  .nav-bar-search input { border:0; outline:0; min-width: 12ch; font-size: .95rem; }
  .nav-bar-search button { appearance:none; border:0; background: var(--text); color:#fff; padding:.5rem .9rem; border-radius: 24px; font-weight: 700; }

  /* Search Suggestions Dropdown */
  .search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #eef2f7;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 2px;
  }

  .search-suggestions[hidden] {
    display: none;
  }

  .search-suggestion-item {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
    cursor: pointer;
  }

  .search-suggestion-item:hover,
  .search-suggestion-item:focus {
    background-color: #f8fafc;
    color: var(--brand);
    outline: none;
  }

  .search-suggestion-item:last-child {
    border-bottom: none;
  }

  .search-suggestion-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .search-suggestion-content {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
  }

  .search-suggestion-highlight {
    background-color: #fef3c7;
    padding: 1px 2px;
    border-radius: 2px;
  }
  
  /* MOBILE NAV */
  @media (max-width: 980px) {
    .nav-bar-right-upper { display: none; } /* hide chips */
    .nav-bar-search { display: none; }
    .hamburger { display: inline-flex; }
  
    .nav-bar-menu {
      position: fixed; inset: 64px 0 0 30%;
      background:#fff; border-left:1px solid #e5e7eb; box-shadow: -12px 0 28px rgba(0,0,0,.08);
      padding: 1rem; display: none; z-index: 1000;
    }
    .nav-bar-menu ul { flex-direction: column; }
    .nav-bar-menu li { border-bottom: 1px solid #f1f5f9; }
    .nav-bar-menu a { display:block; padding: 1rem; color:#334155; }
    .nav-bar-menu a:hover { background:#f8fafc; color: var(--brand); }
  
    #nav-toggle:checked ~ .nav-bar-menu { display: block; }
  }
  
  /* HERO */
  .hero { background-color: #0290bd; padding: 1.25rem .75rem 7rem; position: relative; }
  .hero-inner { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding: 2rem 1rem; position: relative; }
  .hero-inner::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--brand);
    border-bottom-right-radius: 140px; z-index: -1;
  }
  
  .hero-left h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 2.3vw + 1rem, 3rem); line-height: 1.15; font-weight: 800; color:#071520; }
  .hero-left h1 span { display: block; }
  .hero-left p { margin: 0 0 1rem; color:#12394a; font-weight: 500; font-size: clamp(.95rem, .6vw + .7rem, 1.1rem); }
  .cta-primary { appearance:none; border:0; background:#f9b233; color:#0a0a0a; padding:.9rem 1.25rem; border-radius: 28px; font-weight: 700; cursor: pointer; }
  
  .hero-right img { width: 100%; height: 100%; object-fit: cover; display:block; border-radius: 18px; }
  
  .hero-inner-pill { position: absolute; left: 50%; translate: -50% 0; bottom: -50px; background:#fff; padding:.6rem 2rem; border-radius: 50px; max-width: 90%; text-align: center; }
  .hero-inner-pill h2 { margin: 0; font-size: clamp(1rem, 2vw, 1.4rem); }
  
@media (min-width: 860px) {
  .hero-inner { grid-template-columns: 60% 40%; padding: 3rem 1.75rem; }
  .hero-inner::before { width: 68%; }
}
  
  /* SERVICES */
  .hero-services {
    padding: 3.5rem 1rem; display: grid; gap: 2rem; grid-template-columns: repeat(12, 1fr);
  }
  .serv-card { background:#fff; border-radius: 20px; overflow: clip; }
  .serv-card > [class$='-img'] { width: 100%; height: auto; }
  .serv-card img { width: 100%; height: 100%; object-fit: cover; display:block; }
  .serv-1, .serv-2, .serv-3 { grid-column: span 12; }
  
  .serv-1-text, .serv-2-text, .serv-3-text { padding: 1.25rem; }
  .serv-1-text-heading h3, .serv-2-text-heading h3, .serv-3-text-heading h3 { margin: 0 0 .75rem; font-size: clamp(1.1rem, .9vw + .9rem, 1.5rem); }
  .serv-1-text-text, .serv-2-text-text, .serv-3-text-text { margin: 0 0 1rem; color: var(--muted); line-height: 1.65; }
  .serv-1-text-text::after, .serv-2-text-text::after, .serv-3-text-text::after { content: ""; display:block; height:1px; background:#e5e7eb; margin-top: 1rem; }
  .link-arrow::after { content: "→"; display:inline-grid; place-items:center; width: 24px; height: 24px; background: var(--chip-bg); border-radius: 50%; font-size: 14px; font-weight: 700; margin-left: .5rem; }
  
  @media (min-width: 720px) {
    .hero-services { grid-template-columns: repeat(12, 1fr); }
    .serv-1, .serv-2, .serv-3 { grid-column: span 6; }
  }
  @media (min-width: 1024px) {
    .serv-1, .serv-2, .serv-3 { grid-column: span 4; }
  }
  
  .serv-seemore-btn {
    grid-column: 1 / -1; justify-self: center; appearance:none; border:0; background: var(--brand);
    color: #fff; padding: .9rem 2rem; border-radius: 28px; font-weight: 700; cursor: pointer;
  }
  .serv-seemore-btn:hover { background: var(--brand-dark); }
  
  /* GET INVOLVED */
  .get-involved { background: var(--brand); padding: 5rem 1rem; }
  .get-involved-content { display:grid; gap: 2rem; align-items:center; }
  .get-involved-left h2 { margin:0 0 .75rem; font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem); font-weight: 800; color:#0a0a0a; }
  .get-involved-left p { margin:0; font-size: clamp(1rem, .6vw + .75rem, 1.15rem); line-height: 1.7; color:#ffffff; }
  .get-involved-right { width: 100%; height: clamp(260px, 36vw, 420px); border-radius: 20px; overflow: clip; border: 8px solid rgba(255,255,255,.2); }
  .get-involved-right img { width:100%; height:100%; object-fit: cover; }
  
  @media (min-width: 960px) {
    .get-involved-content { grid-template-columns: 1fr 1.2fr; gap: 3.5rem; }
  }
  
  .get-involved-cards { margin-top: 2.5rem; display:grid; gap: 1rem; grid-template-columns: 1fr; }
  .involvement-card { background:#fff; padding: 1.75rem; border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease; }
  .involvement-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
  .involvement-card h3 { margin: 0 0 .9rem; font-size: clamp(1.1rem, .7vw + .9rem, 1.35rem); }
  .involvement-card p { margin: 0; font-size: .95rem; color: var(--muted); }
  .card-arrow { width: 48px; height: 48px; background: var(--chip-bg); border-radius: 50%; display:grid; place-items:center; font-size: 24px; font-weight: 700; color:#0a0a0a; margin-bottom: 1rem; }
  .inline-arrow { display:inline-grid; place-items:center; width: 28px; height: 28px; background: var(--chip-bg); border-radius: 50%; font-size: 16px; font-weight: 700; margin-left: .5rem; }
  
  @media (min-width: 760px) {
    .get-involved-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1120px) {
    .get-involved-cards { grid-template-columns: repeat(4, 1fr); }
  }
  
  /* FOOTER */
  .site-footer { padding: 2.5rem 1rem; text-align: center; font-size: .95rem; color: #475569; }
  
  /* PRINT */
  @media print {
    .nav-bar, .hero-inner-pill, .serv-seemore-btn { display: none !important; }
    .container { width: 100%; }
  }

  .aboutus-section{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;          /* Adds breathing space */
  max-width: 800px;            /* Keeps text nicely contained */
  margin: 0 auto;              /* Centers the entire section */
  line-height: 1.6;
  }

 /* OUR SERVICES (Full Width Section) */
.services-section {
    background: var(--brand);
    padding: 5rem 1rem;
    display: block;
    width: 100%;
    margin: 0;
  }
  
  .services-wrapper {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }
  
  /* LEFT COLUMN */
  .services-section-left {
    display: grid;
    grid-template-rows: auto auto;
    gap: 2rem;
  }
  
  .services-section-texts h2 {
    margin: 0 0 0.75rem 0;
    font-weight: 800;
    font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
    color: #ffffff;
  }
  
  .services-section-texts p {
    margin: 0;
    color: #ffffff;
    line-height: 1.7;
    max-width: 40ch;
    font-size: clamp(1rem, 0.6vw + 0.75rem, 1.15rem);
  }
  
  /* IMAGE STYLING */
  .services-section-img {
    align-self: end;
    justify-self: center;
    position: relative;
  }
  
  .services-section-img img {
    width: clamp(400px, 55vw, 650px);
    height: auto;
    display: block;
    object-fit: contain;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  @media (min-width: 960px) {
    .services-section-img img {
      width: clamp(500px, 48vw, 720px);
      transform: translateY(30px);
    }
  }
  
  /* Hide image on smaller screens */
  @media (max-width: 960px) {
    .services-section-img {
      display: none;
    }
  }
  
  /* RIGHT COLUMN (SERVICE CARDS) */
  .services-section-boxes {
    display: grid;
    gap: 1.25rem;
    max-width: 640px;
    margin-inline: auto;
  }
  
  .services-section-boxes article {
    background: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .services-section-boxes article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  }
  
  .services-section-boxes h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.35rem);
    font-weight: 800;
    color: #0b0f19;
  }
  
  .services-section-boxes p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
  }
  
  .services-section-boxes .inline-arrow {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--chip-bg);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    color: #0a0a0a;
    flex-shrink: 0;
  }
  
  @media (min-width: 960px) {
    .services-wrapper {
      grid-template-columns: 1.1fr 1fr;
      gap: 2.5rem;
    }
    .services-section-boxes {
      margin-inline: 0;
    }
  }
  
  /* MEET THE PEOPLE (testimonials/cards) */
.stories-section {
    background: #fff;
    padding: 5rem 1rem;
  }
  
  .stories-wrapper {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
  }
  
  .stories-title {
    text-align: center;
    margin: 0 0 2rem 0;
    font-weight: 700;
    font-size: clamp(1.4rem, 1.6vw + 1rem, 2.2rem); /* smaller and adaptive */
    color: #0b0f19;
    line-height: 1.3;
  }
  
  
  .stories-grid {
    display: grid;
    grid-template-columns: 1fr;          /* mobile-first */
    gap: 2rem;
    align-items: start;
  }
  
  .story-card {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 0 1rem;
  }
  
  .story-portrait {
    width: clamp(180px, 22vw, 260px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--accent, #eef2f7);  /* soft circular backdrop */
    display: grid;
    place-items: center;
    overflow: hidden;
    margin: 0 auto 1rem;
  }
  
  .story-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;                   /* fills the circle nicely */
    border-radius: 50%;
  }
  
  .story-card h3 {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1.05rem, 0.6vw + 0.95rem, 1.35rem);
    color: #0b0f19;
  }
  
  .story-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
    max-width: 42ch;
  }
  
  .story-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 800;
    color: #0b0f19;
    margin-top: 1rem;
  }
  
  .story-cta .inline-arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
    font-weight: 800;
    background: var(--chip-bg);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: #0a0a0a;
  }
  
  /* Desktop: three columns, a little more space */
  @media (min-width: 980px) {
    .stories-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }
    .story-card p {
      max-width: 48ch;
    }
  }
  
  /* NEWSLETTER SECTION */
.newsletter-section {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .newsletter-bg {
    position: relative;
    width: 100%;
    height: clamp(300px, 50vw, 480px);
  }
  
  .newsletter-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Floating white card */
  .newsletter-content {
    position: absolute;
    top: 15%;
    left: 10%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  .newsletter-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 2rem 2.5rem;
    max-width: 360px;
  }
  
  .newsletter-card h2 {
    margin: 0 0 0.5rem;
    font-weight: 800;
    font-size: clamp(1.4rem, 1.6vw + 1rem, 2rem);
    color: #0b0f19;
  }
  
  .newsletter-card p {
    margin: 0;
    color: #333;
    font-size: clamp(1rem, 0.5vw + 0.8rem, 1.15rem);
    line-height: 1.6;
  }
  
  /* RESPONSIVE ADJUSTMENTS */
  @media (max-width: 768px) {
    .newsletter-content {
      position: static;
      padding: 1rem;
      justify-content: center;
    }
  
    .newsletter-card {
      max-width: 100%;
      width: 100%;
      border-radius: 12px;
    }
  }
/* ========== Professional Compact Footer ========== */
.site-footer-pro {
    --footer-bg: #2b2b2b;
    --footer-fg: #e5e7eb;
    --footer-muted: #a8b0bb;
    background: var(--footer-bg);
    color: var(--footer-fg);
    font-size: 0.95rem; /* smaller overall */
  }
  
  .site-footer-pro a { color: var(--footer-fg); text-decoration: none; }
  .site-footer-pro a:hover { color: var(--chip-bg); }
  
  /* Containers */
  .site-footer-pro .footer-top,
  .site-footer-pro .footer-bottom,
  .site-footer-pro .footer-legal {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
  }
  
  /* Top: brand + three columns */
  .site-footer-pro .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.25rem 0 1.25rem; /* compact */
  }
  
  .footer-brand {
    display: flex; align-items: center; gap: .9rem;
  }
  .footer-brand img {
    width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
  }
  .footer-brand p {
    margin: 0; line-height: 1.1; font-weight: 700;
  }
  
  .footer-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .footer-col h4 {
    margin: 0 0 .6rem 0;
    font-size: 1rem; /* smaller heading */
    font-weight: 700;
  }
  .footer-col ul {
    list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem;
  }
  .footer-col li a { color: var(--footer-muted); }
  .footer-col li a:hover { color: var(--chip-bg); }
  
  /* Divider */
  .footer-divider {
    margin: 0;
    border: 0; height: 1px;
    background: rgba(255,255,255,.08);
  }
  
  /* Bottom: contacts + actions */
  .site-footer-pro .footer-bottom {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1.25rem;
    padding: 1.25rem 0 1.5rem; /* compact */
  }
  
  .footer-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .contact-block .label {
    display: block; font-size: .9rem; color: var(--footer-muted);
  }
  .contact-block .phone {
    font-size: 1.35rem; font-weight: 700; letter-spacing: .5px;
    color: #ff5a52; /* subtle emphasis but smaller than before */
  }
  
  .contact-item {
    display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: start;
  }
  .contact-item .icon {
    width: 20px; height: 20px; display: inline-block; border-radius: 50%;
    background: rgba(255,255,255,.12); position: relative;
  }
  .icon.pin::after {
    content: ""; position: absolute; inset: 4px 6px auto 6px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--chip-bg);
    top: 6px;
  }
  .icon.mail::after {
    content: "✉"; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); font-size: 12px;
  }
  .contact-item address { margin: 0; font-style: normal; color: var(--footer-muted); }
  .contact-item a { color: var(--footer-muted); }
  .contact-item a:hover { color: var(--chip-bg); }
  
  /* Actions: CTA + socials */
  .footer-actions {
    display: grid; justify-items: end; align-content: start; gap: 1rem;
  }
  
  .btn-contact {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--brand); color: #0a0a0a;
    padding: .65rem 1rem; border-radius: 999px;
    font-weight: 700; line-height: 1;
  }
  .btn-contact:hover { background: var(--brand-dark); }
  
  .footer-actions .inline-arrow {
    width: 28px; height: 28px; display: inline-grid; place-items: center;
    background: var(--chip-bg); border-radius: 50%; font-weight: 800;
  }
  
  .socials { display: flex; gap: .75rem; }
  .socials a {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(255,255,255,.08);
    font-weight: 700;
  }
  .socials a:hover { background: rgba(255,255,255,.16); }
  
  /* Legal line */
  .site-footer-pro .footer-legal {
    padding: .9rem 0 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
  }
  .site-footer-pro .footer-legal p {
    margin: 0; font-size: .85rem; color: var(--footer-muted);
  }
  
  /* Responsive tweaks */
  @media (max-width: 980px) {
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .site-footer-pro .footer-bottom { grid-template-columns: 1fr; }
    .footer-actions { justify-items: start; }
  }
  @media (max-width: 640px) {
    .footer-cols { grid-template-columns: 1fr; }
    .footer-brand img { width: 48px; height: 48px; }
    .contact-block .phone { font-size: 1.1rem; }
  }
    
/* ====== CLEAN NAV DROPDOWN ====== */
.nav-bar-menu li {
  position: relative;
}

/* caret */
.has-submenu > .menu-parent {
  position: relative;
  padding-right: 1.1rem;
}
.has-submenu > .menu-parent::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.7;
}

/* dropdown container */
.submenu {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.75rem);
  transform: translateX(-50%) translateY(8px);
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
}

/* Keep dropdown visible when hovering anywhere inside */
.has-submenu {
  position: relative;
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Add a small hover buffer area so it doesn't flicker */
.has-submenu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0.75rem; /* invisible buffer zone */
}


/* submenu links */
.submenu li {
  width: 100%;
}
.submenu a {
  display: block;
  padding: 0.65rem 1rem;
  color: #1f2937;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.submenu a:hover {
  background: #f8fafc;
  color: var(--brand);
  font-weight: 600;
}

/* better spacing below dropdown */
.nav-bar-menu {
  position: relative;
  z-index: 1000;
}

/* MOBILE (inline dropdown inside slide-in menu) */
@media (max-width: 980px) {
  .has-submenu > .menu-parent::after {
    display: none;
  }
  .submenu {
    position: static;
    transform: none;
    border: none;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .submenu a {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
  }
}

/* ---------- ABOUT PAGE ---------- */

/* Full-bleed hero with image, like Services section */
.about-hero {
  background: var(--brand);
  padding: 4.5rem 1rem 1rem;
}
.about-hero-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.about-hero-copy h1 {
  margin: 0 0 .6rem;
  font-weight: 800;
  color: #071520;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
}
.about-hero-copy p {
  margin: 0;
  color: #ffffff;
  line-height: 1.7;
  font-size: clamp(1rem, .6vw + .75rem, 1.15rem);
  max-width: 60ch;
}
.about-hero-media {
  width: 100%;
  height: clamp(240px, 36vw, 420px);
  border-radius: 20px;
  overflow: clip;
  border: 8px solid rgba(255,255,255,.2);
}
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 960px) {
  .about-hero-wrap { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; }
}

/* Intro + stats */
.about-intro { background: #fff; padding: 3.5rem 1rem; }
.about-intro-inner {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid; gap: 2rem;
}
.about-intro-text h2 {
  margin: 0 0 .5rem; font-weight: 800; font-size: clamp(1.3rem, 1.4vw + 1rem, 2rem);
}
.about-intro-text p { margin: 0 0 1rem; color: var(--muted); line-height: 1.7; max-width: 60ch; }
.about-bullets { margin: 0; padding-left: 1rem; color: #0b0f19; line-height: 1.7; }
.about-bullets li { margin: .25rem 0; }

.about-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.stat {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 1.25rem; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.stat h3 { margin: 0; font-size: clamp(1.4rem, 2vw + .4rem, 2.2rem); font-weight: 800; }
.stat p { margin: .25rem 0 0; color: var(--muted); font-size: .95rem; }

@media (min-width: 960px) {
  .about-intro-inner { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* Values */
.values-section { background: #f8fafc; padding: 3.5rem 1rem; }
.values-wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.values-wrap h2 { margin: 0 0 1.25rem; font-weight: 800; font-size: clamp(1.3rem, 1.4vw + 1rem, 2rem); }
.values-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.value-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.value-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.value-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 800; }
.value-card p { margin: 0; color: var(--muted); line-height: 1.7; }
@media (min-width: 800px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }

/* Team */
.team-section { background: #fff; padding: 3.5rem 1rem; }
.team-wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.team-wrap h2 { margin: 0 0 1.25rem; font-weight: 800; font-size: clamp(1.3rem, 1.4vw + 1rem, 2rem); }
.team-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.team-card { text-align: center; padding: 0 1rem; }
.team-portrait {
  width: clamp(180px, 22vw, 220px); aspect-ratio: 1/1; border-radius: 50%;
  background: var(--accent,#eef2f7); display: grid; place-items:center; overflow: hidden;
  margin: 0 auto 1rem;
}
.team-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-card h3 { margin: 0; font-weight: 800; font-size: 1.1rem; }
.team-card .role { margin: .15rem 0 .35rem; color: #0b0f19; font-weight: 600; }
.team-card .bio { margin: 0; color: var(--muted); line-height: 1.7; max-width: 46ch; margin-inline: auto; }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3,1fr); } }

/* Timeline */
.timeline-section { background: #f8fafc; padding: 3.5rem 1rem; }
.timeline-wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.timeline-wrap h2 { margin: 0 0 1rem; font-weight: 800; font-size: clamp(1.3rem, 1.4vw + 1rem, 2rem); }
.timeline {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: 1rem;
}
.timeline li {
  display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 1rem;
}
.timeline .dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--chip-bg); margin-top: .35rem;
}
.timeline h3 { margin: 0; font-weight: 800; font-size: 1.05rem; }
.timeline p { margin: .25rem 0 0; color: var(--muted); }

/* CTA */
.about-cta { background: var(--brand); padding: 3.5rem 1rem; text-align: center; }
.about-cta-wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.about-cta h2 { margin: 0 0 .4rem; font-weight: 800; color: #0a0a0a; font-size: clamp(1.4rem, 1.6vw + 1rem, 2.2rem); }
.about-cta p { margin: 0 0 1rem; color: #fff; font-size: clamp(1rem, .6vw + .75rem, 1.1rem); }

/* ---------- CONTACT PAGE ---------- */

/* Hero */
.contact-hero {
  background: var(--brand);
  padding: 4rem 1rem 2rem;
}
.contact-hero-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.contact-copy h1 {
  margin: 0 0 .4rem; color: #071520; font-weight: 800;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
}
.contact-copy p {
  margin: 0; color: #ffffff; line-height: 1.7;
  font-size: clamp(1rem, .6vw + .75rem, 1.1rem);
  max-width: 60ch;
}
.contact-hero-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 1.25rem 1.25rem;
}
.contact-hero-card .contact-meta {
  display: grid; gap: .75rem;
}
.contact-hero-card strong { display: block; font-size: .9rem; color: #0b0f19; }
.contact-hero-card a, .contact-hero-card address { color: var(--muted); font-style: normal; }
.contact-hero-card .btn-contact { margin-top: .5rem; }

@media (min-width: 960px) {
  .contact-hero-wrap {
    grid-template-columns: 1.1fr .9fr;
    gap: 2rem;
    align-items: center;
  }
}

/* Form + aside layout */
.contact-section {
  background: #fff; padding: 3rem 1rem;
}
.contact-grid {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 1.2fr .8fr; gap: 2.5rem; }
}

/* Form */
.contact-form {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.hp-field { display: none !important; }
.form-field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.form-field label { font-weight: 600; font-size: .95rem; color: #0b0f19; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; border: 2px solid #eef2f7; border-radius: 12px;
  padding: .7rem .8rem; font: inherit; color: #0b0f19; background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10,163,214,.12);
}
.form-field small.error { display: none; color: #b00020; }
.form-field.invalid small.error { display: block; }
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea { border-color: #b00020; }

.form-submit { margin-top: .25rem; }

.form-status {
  margin: .6rem 0 0;
  font-size: .95rem;
  color: #0b0f19;
}

/* Aside info */
.contact-aside { display: grid; gap: 1rem; }
.aside-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.aside-card h3 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 800; }
.aside-card p { margin: 0; color: var(--muted); line-height: 1.6; }

.aside-map { border-radius: 16px; overflow: hidden; border: 1px solid #e5e7eb; }
.aside-map iframe { width: 100%; height: 260px; display: block; }

/* FAQ */
.faq-section { background: #f8fafc; padding: 3rem 1rem; }
.faq-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.faq-wrap h2 { margin: 0 0 1rem; font-weight: 800; font-size: clamp(1.3rem, 1.4vw + 1rem, 2rem); }
.faq-wrap details {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: .8rem 1rem; margin-bottom: .6rem;
}
.faq-wrap summary { cursor: pointer; font-weight: 600; color: #0b0f19; }
.faq-wrap p { margin: .5rem 0 0; color: var(--muted); line-height: 1.65; }

/* ---------- OUR WORKS PAGE ---------- */

/* Hero */
.works-hero {
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 4rem 1rem 3rem;
}
.works-hero-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.works-hero h1 {
  font-weight: 800;
  color: #071520;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  margin: 0 0 .4rem;
}
.works-hero p {
  color: #ffffff;
  line-height: 1.6;
  max-width: 60ch;
  margin-inline: auto;
}

/* Gallery */
.works-gallery {
  background: #fff;
  padding: 3rem 1rem;
}
.works-grid {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.work-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.work-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.work-info {
  padding: 1rem 1.25rem 1.5rem;
}
.work-info h3 {
  margin: 0 0 .25rem;
  font-weight: 700;
  color: #0b0f19;
}
.work-info p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
@media (min-width: 900px) {
  .works-grid { grid-template-columns: repeat(3, 1fr); }
  .work-card img { height: 240px; }
}

/* Testimonials */
.works-testimonials {
  background: #f8fafc;
  padding: 3.5rem 1rem;
  text-align: center;
}
.works-testimonials-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.works-testimonials h2 {
  margin: 0 0 1rem;
  font-weight: 800;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2rem);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.testimonial-grid blockquote {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 1.5rem;
  font-style: italic;
  line-height: 1.7;
  color: #0b0f19;
}
.testimonial-grid cite {
  display: block;
  margin-top: .75rem;
  font-style: normal;
  font-weight: 600;
  color: var(--muted);
}
@media (min-width: 900px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

/* CTA */
.works-cta {
  background: var(--brand);
  text-align: center;
  padding: 3rem 1rem;
}
.works-cta-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.works-cta h2 {
  font-weight: 800;
  color: #071520;
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2.2rem);
}

/* ---------- PORTFOLIO PAGE ---------- */

/* Hero */
.portfolio-hero {
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 4rem 1rem 3rem;
}
.portfolio-hero-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.portfolio-hero h1 {
  font-weight: 800;
  color: #071520;
  font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem);
  margin: 0 0 .4rem;
}
.portfolio-hero p {
  color: #ffffff;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}

/* Filter bar */
.portfolio-filter {
  background: #fff;
  padding: 1rem 1rem 0;
}
.portfolio-filter-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.chip {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0b0f19;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.chip.is-active,
.chip:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #0a0a0a;
}

/* Grid */
.portfolio-grid-section {
  background: #fff;
  padding: 2rem 1rem 3rem;
}
.portfolio-grid {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.portfolio-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.portfolio-thumb { height: 220px; overflow: hidden; }
.portfolio-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.portfolio-info { padding: 1rem 1.25rem 1.25rem; }
.portfolio-info h3 { margin: 0 0 .3rem; font-weight: 700; color: #0b0f19; }
.portfolio-info p { margin: 0; color: var(--muted); line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.tag {
  background: #f8fafc;
  color: #0b0f19;
  border: 1px solid #e5e7eb;
  font-size: .85rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-weight: 600;
}

@media (min-width: 760px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-thumb { height: 240px; }
}
@media (min-width: 1080px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-thumb { height: 260px; }
}

/* CTA */
.portfolio-cta {
  background: var(--brand);
  text-align: center;
  padding: 3rem 1rem;
}
.portfolio-cta-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.portfolio-cta h2 {
  font-weight: 800;
  color: #071520;
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 1.6vw + 1rem, 2.2rem);
}

/* ======= RESPONSIVE NAVIGATION FIX ======= */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* default desktop menu */
.nav-bar-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* hamburger icon */
.hamburger {
  display: none;
  width: 28px;
  height: 20px;
  cursor: pointer;
  position: relative;
}
.hamburger::before,
.hamburger::after,
.hamburger {
  background: #0b0f19;
  height: 3px;
  width: 100%;
  border-radius: 2px;
  transition: all 0.3s ease;
  content: "";
  position: absolute;
  left: 0;
}
.hamburger::before {
  top: 0;
}
.hamburger::after {
  bottom: 0;
}
#nav-toggle:checked + .hamburger::before {
  transform: rotate(45deg);
  top: 9px;
}
#nav-toggle:checked + .hamburger::after {
  transform: rotate(-45deg);
  bottom: 9px;
}

/* hide checkbox */
#nav-toggle {
  display: none;
}

/* === MOBILE MENU === */
@media (max-width: 980px) {
  .nav-bar-right-lower {
    position: relative;
  }

  /* hamburger visible */
  .hamburger {
    display: block;
    z-index: 1101;
  }

  /* hide desktop nav */
  .nav-bar-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    position: fixed;
    top: 70px; /* adjust to height of your nav-bar */
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem;
    overflow-y: auto;
    gap: 1rem;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1100;
  }

  /* open state */
  #nav-toggle:checked ~ .nav-bar-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* make links look tidy */
  .nav-bar-menu ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  .nav-bar-menu a {
    display: block;
    width: 100%;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    color: #0b0f19;
    border-radius: 8px;
    transition: background 0.2s ease;
  }
  .nav-bar-menu a:hover {
    background: #f8fafc;
  }

  /* fix dropdown inside mobile menu */
  .submenu {
    position: static !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    padding-left: 1rem;
    gap: 0.3rem;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* hide caret on mobile */
  .has-submenu > .menu-parent::after {
    display: none;
  }

  /* hide search on small screens or move below menu */
  .nav-bar-search {
    width: 100%;
    margin-top: 1.5rem;
  }
  .nav-bar-search input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
  }
}
/* --- Three-line hamburger icon --- */
.hamburger {
  display: none;
  width: 24px;              /* overall width */
  height: 18px;             /* overall height */
  cursor: pointer;
  position: relative;
  z-index: 1101;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;              /* line thickness */
  background: #0b0f19;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Three lines positioned vertically */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }  /* middle */
.hamburger span:nth-child(3) { top: 16px; }

/* Animate to X when checked */
#nav-toggle:checked + .hamburger span:nth-child(1) {
  transform: rotate(45deg);
  top: 8px;
}
#nav-toggle:checked + .hamburger span:nth-child(2) {
  opacity: 0;
}
#nav-toggle:checked + .hamburger span:nth-child(3) {
  transform: rotate(-45deg);
  top: 8px;
}

/* Hide checkbox */
#nav-toggle {
  display: none;
}

/* Show only on mobile */
@media (max-width: 980px) {
  .hamburger {
    display: block;
  }
}/* --- RESET old hamburger styles (kills the black box) --- */
.hamburger {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* If you still have old pseudo-element lines, remove them */
.hamburger::before,
.hamburger::after { content: none !important; }

/* --- Three-line hamburger (final) --- */
.hamburger {
  display: none;                 /* shown only on mobile */
  width: 24px;                   /* small, tidy */
  height: 18px;
  position: relative;
  cursor: pointer;
  z-index: 1101;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;                   /* line thickness */
  background: #0b0f19;
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}

/* 3 lines */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }

/* animate to X when menu open */
#nav-toggle:checked + .hamburger span:nth-child(1) { transform: rotate(45deg); top: 8px; }
#nav-toggle:checked + .hamburger span:nth-child(2) { opacity: 0; }
#nav-toggle:checked + .hamburger span:nth-child(3) { transform: rotate(-45deg); top: 8px; }

/* show on mobile */
@media (max-width: 980px) {
  .hamburger { display: block; }
}

/* ---------- LOW VOLTAGE SERVICE PAGE ---------- */
.svc-hero {
  background: var(--brand);
  padding: 4rem 1rem 2rem;
}
.svc-hero-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: 1fr;
}
.svc-hero .eyebrow {
  margin: 0 0 .3rem; font-weight: 700; color: #0b0f19; opacity: .9;
  letter-spacing: .25px;
}
.svc-hero h1 {
  margin: 0 0 .5rem; font-weight: 800; color: #071520;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
}
.svc-hero .lead { margin: 0; color: #fff; line-height: 1.7; max-width: 60ch; }
.svc-hero-media {
  width: 100%; height: clamp(220px, 36vw, 420px);
  border-radius: 20px; overflow: clip; border: 8px solid rgba(255,255,255,.2);
}
.svc-hero-media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 960px) {
  .svc-hero-wrap { grid-template-columns: 1.1fr .9fr; }
}

/* Services included */
.svc-included { background: #fff; padding: 3rem 1rem; }
.svc-wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.svc-included h2, .svc-why h2, .svc-industries h2 { 
  margin: 0 0 1rem; font-weight: 800; font-size: clamp(1.3rem, 1.4vw + 1rem, 2rem);
}
.svc-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
.svc-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
  padding: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.svc-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; }
.svc-card p { margin: 0; color: var(--muted); line-height: 1.7; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

/* Why choose */
.svc-why { background: #f8fafc; padding: 3rem 1rem; }
.why-list { margin: 0; padding-left: 1rem; color: #0b0f19; line-height: 1.8; }
.why-list li { margin: .25rem 0; }

/* Industries */
.svc-industries { background: #fff; padding: 3rem 1rem; }
.industries-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  border: 1px solid #e5e7eb; background: #fff; color: #0b0f19;
  padding: .4rem .7rem; border-radius: 999px; font-weight: 600;
}

/* CTA */
.svc-cta { background: var(--brand); padding: 3rem 1rem; text-align: center; }
.svc-cta-wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.svc-cta h2 { margin: 0 0 .4rem; color: #071520; font-weight: 800; font-size: clamp(1.3rem,1.4vw+1rem,2rem); }
.svc-cta p { margin: 0 0 1rem; color: #fff; line-height: 1.7; }
.contact-cards {
  display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1rem 0 1.25rem;
}
.mini-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  padding: .75rem 1rem; color:#0b0f19;
}
@media (min-width: 760px) {
  .contact-cards { grid-template-columns: repeat(3,1fr); }
}

/* ========= IP CAMERAS (distinct look) ========= */

/* Full-bleed hero with overlay */
.cam-hero {
  position: relative;
  background: #0aa3d6;
  min-height: 52vh;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.cam-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  filter: brightness(0.6) saturate(1.05);
  z-index: -2;
}
.cam-hero::after {
  /* diagonal overlay for extra depth */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(2, 27, 43, 0.55), rgba(2, 27, 43, 0.25) 40%, transparent 70%);
  z-index: -1;
}
.cam-hero-inner {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  text-align: left;
  color: #fff;
  padding: 4.5rem 0 3.5rem;
}
.cam-hero .eyebrow {
  margin: 0 0 0.4rem;
  font-weight: 700;
  letter-spacing: .28px;
  opacity: .9;
}
.cam-hero h1 {
  margin: 0 0 .5rem;
  font-weight: 800;
  font-size: clamp(2rem, 2.8vw + 1rem, 3rem);
}
.cam-hero .lead {
  margin: 0 0 1rem;
  max-width: 60ch;
  color: #eaf2f7;
}

/* Icon highlight row */
.cam-highlights {
  background: #fff;
  padding: 2.25rem 1rem 1.25rem;
}
.cam-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.highlight-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2,1fr); gap: .9rem;
}
.highlight-grid li {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: .9rem .9rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.highlight-grid h3 { margin: .3rem 0 .2rem; font-size: 1.05rem; font-weight: 800; color:#0b0f19; }
.highlight-grid p { margin: 0; color: var(--muted); }
.highlight-grid .ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; background: #f1f5f9; font-weight: 800;
}

/* Alternating bands */
.cam-bands { background: #f8fafc; padding: 2.5rem 1rem; display: grid; gap: 1.5rem; }
.cam-band {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  overflow: clip;
  display: grid; grid-template-columns: 1fr; gap: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.cam-band .band-media { height: clamp(200px, 36vw, 360px); }
.cam-band .band-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-band .band-copy { padding: 1.25rem 1.25rem 1.5rem; }
.cam-band h2 { margin: 0 0 .4rem; font-size: clamp(1.25rem, 1.5vw + 1rem, 1.8rem); font-weight: 800; }
.cam-band p { margin: 0 0 .5rem; color: var(--muted); line-height: 1.7; }
.ticks { margin: 0; padding-left: 1rem; color: #0b0f19; line-height: 1.7; }
.ticks li { margin: .2rem 0; }


@media (min-width: 960px) {
  .cam-hero-inner { text-align: left; padding: 6rem 0 5rem; }
  .highlight-grid { grid-template-columns: repeat(6, 1fr); }
  .cam-band { grid-template-columns: 1.05fr .95fr; }
  .cam-band.flip { grid-template-columns: .95fr 1.05fr; }
  .cam-band.flip .band-media { order: 2; }
  .cam-band.flip .band-copy  { order: 1; }
  .cam-band .band-copy { padding: 1.8rem 1.8rem 2rem; }
}

/* Industries (reusing pill tokens) */
.cam-industries { background: #fff; padding: 2.25rem 1rem; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Dark CTA strip */
.cam-cta {
  background: #0aa3d6;
  color: #eaf2f7;
  padding: 3rem 1rem;
  text-align: center;
}
.cam-cta-wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.cam-cta h2 { margin: 0 0 .5rem; font-weight: 800; color: #cfe9f7; }
.cam-cta p { margin: 0 0 1rem; color: #c7d5df; }

/* Subtle reveal animation (on load) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: fadeUp .5s ease forwards;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; }
}

/* ======= CLIENTS REVIEW PAGE ======= */
.rev-wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }

/* Hero */
.rev-hero {
  background: linear-gradient(135deg, #00b4d8 0%, #90e0ef 100%);
  color: #071520;
  padding: 4rem 1rem 3rem;
}
.rev-hero-inner { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.rev-hero .eyebrow { font-weight: 700; margin-bottom: .4rem; opacity: .9; }
.rev-hero h1 { margin: 0 0 .5rem; font-weight: 800; font-size: clamp(1.8rem, 2.2vw + 1rem, 2.8rem); }
.rev-hero .lead { margin: 0; max-width: 60ch; line-height: 1.7; }

/* Logo strip */
.rev-logos { background:#fff; padding: 1.25rem 0; }
.logos-row { display:flex; gap:1.25rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.logos-row img { height:32px; opacity:.75; filter:grayscale(1); transition:opacity .2s ease; }
.logos-row img:hover { opacity:1; }

/* Featured */
.rev-featured { background:#fff; padding: 2rem 1rem 1rem; }
.rev-featured-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:20px; padding:1.25rem;
  box-shadow:0 10px 28px rgba(0,0,0,.06); text-align:center;
}
.rev-featured blockquote { margin:.5rem auto 1rem; max-width:60ch; font-size:1.05rem; color:#0b0f19; }
.rev-stars { color:#f59e0b; font-size:1.1rem; letter-spacing:1px; }
.rev-author { display:flex; gap:.75rem; align-items:center; justify-content:center; }
.rev-author img { width:42px; height:42px; object-fit:cover; border-radius:999px; }

/* Grid */
.rev-grid { background:#f8fafc; padding:2rem 1rem; }
.rev-grid .cards { display:grid; grid-template-columns:1fr; gap:1rem; }
.rev-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.05); transition:transform .2s ease, box-shadow .2s ease;
}
.rev-card:hover { transform: translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.rev-card h3 { margin:.25rem 0 .25rem; font-weight:800; font-size:1.05rem; color:#071520; }
.rev-card p { margin:0 0 .4rem; color:var(--muted); }
.rev-meta { color:#64748b; font-weight:600; font-size:.9rem; }

/* Form */
.rev-form { background:#fff; padding:2rem 1rem; }
.form-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:1rem;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.rev-form h2 { margin:0 0 .25rem; font-weight:800; }
.rev-form .muted { color:var(--muted); margin:0 0 .75rem; }
.form-row { display:grid; grid-template-columns:1fr; gap:.75rem; margin-bottom:.75rem; }
.form-row label, .rev-form label { display:flex; flex-direction:column; gap:.35rem; font-weight:600; color:#071520; }
.rev-form input, .rev-form select, .rev-form textarea {
  border:1px solid #e5e7eb; border-radius:12px; padding:.6rem .7rem; font:inherit; color:#0b0f19;
}
.rev-form textarea { resize:vertical; }
.form-msg { margin-top:.6rem; color:#0b7; font-weight:700; }
@media (min-width: 900px) {
  .rev-grid .cards { grid-template-columns: repeat(3,1fr); }
  .form-row { grid-template-columns:1fr 1fr; }
}

/* Small chip buttons in header */
.btn-chip {
  display:inline-block; padding:.35rem .7rem; border-radius:999px; font-weight:700;
  background:#fff; border:1px solid #e5e7eb; color:#0b0f19; text-decoration:none;
}
.btn-chip:hover { border-color:#00b4d8; color:#00b4d8; }
.active-chip { border-color:#00b4d8; color:#00b4d8; }

/* Review submit button styling */
.review-submit {
  margin-top: 1rem;             /* adds a little breathing space above */
  background: #f9b233;          /* ensures the yellow hue */
  color: #0a0a0a;
  border: none;
  border-radius: 28px;
  font-weight: 700;
  padding: 0.9rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.review-submit:hover {
  background: #ffca46;          /* a soft hover effect */
}

/* Unified brand image (logo + wordmark) */
.nav-brand .logo-combined {
  display: block;
  height: 64px;           /* matches previous visual size */
  width: auto;
}

/* Keep brand area aligned just like before */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;            /* keeps existing spacing */
  text-decoration: none;
  color: inherit;
}

/* Optional: shrink slightly on smaller screens */
@media (max-width: 480px) {
  .nav-brand .logo-combined {
    height: 56px;
  }
}

/* Accessible-only text helper (if not already present) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 1px, 1px) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Footer Layout and Logo */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.footer-logo-combined {
  height: 70px;       /* matches your second screenshot */
  width: auto;
  display: block;
  margin-bottom: 1rem;
}

/* General footer alignment */
footer {
  background-color: #1f1f1f;
  color: #fff;
  padding: 4rem 0;
  font-family: 'Poppins', sans-serif;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-column h4 {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li a {
  color: #bfbfbf;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-column ul li a:hover {
  color: #ffffff;
}

/* Contact info section */
.footer-contact {
  margin-top: 1rem;
}

.footer-contact a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: #e53935;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.footer-social a {
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #e53935;
}

/* --- Footer: make top row = [logo | columns] on desktop --- */
@media (min-width: 980px) {
  .site-footer-pro .footer-top {
    grid-template-columns: auto 1fr;   /* logo left, columns right */
    align-items: start;
  }
}

/* Footer brand container alignment matches screenshot 2 */
.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 0;               /* no gap; the logo image already contains the wordmark */
  margin-bottom: 0.5rem;
}

/* Use the combined logo (no rounding, larger like screenshot 2) */
.footer-logo-combined {
  display: block;
  height: 72px;         /* visually matches screenshot 2 */
  width: auto;
  border-radius: 0;     /* ensure no rounding from older rule */
  object-fit: contain;
}

/* Tweak column spacing/headings to match screenshot density */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.footer-col h4 {
  margin: 0 0 0.6rem 0;
  font-size: 1rem;
  font-weight: 700;
}

/* Keep phone highlight and bottom row layout as you already have */
/* --- Footer Bottom Row --- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  margin-top: 2rem;
}

.footer-bottom-left {
  flex: 1 1 60%;
  color: #fff;
}

.footer-company h4 {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
}

.footer-phone {
  font-size: 1.3rem;
  color: #e53935;
  font-weight: 700;
  margin: 0.3rem 0 1rem;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
}

.contact-item i {
  color: #e53935;
  font-size: 1rem;
}

.contact-item a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-item a:hover {
  color: #e53935;
}

/* --- Right Side --- */
.footer-bottom-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2rem;
}

.footer-contact-btn {
  background-color: #e53935;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 2rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.3s ease;
}

.footer-contact-btn:hover {
  background-color: #c62828;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #e53935;
}

/* --- Footer Credits --- */
.footer-credits {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
  color: #aaa;
  font-size: 0.9rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom-right {
    align-items: flex-start;
  }
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: 1180px;           /* matches screenshot rhythm */
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Footer base ---------- */
.site-footer {
  background: #2e2e2e;         /* dark charcoal like screenshot */
  color: #ffffff;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.site-footer a { color: #bfbfbf; text-decoration: none; }
.site-footer a:hover { color: #ffffff; }

.footer-inner { padding: 56px 0 28px; }

/* ---------- Top Row ---------- */
.footer-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start;
}
.footer-brand { display: flex; align-items: flex-start; }
.footer-logo-combined {
  height: 72px;
  width: auto;
  display: block;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.footer-col h4 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 700;
  color: #d9d9d9;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 10px 0; }

/* column in the middle looks brighter in screenshot */
.footer-col-strong a { color: #ffffff; font-weight: 600; }

/* ---------- Separators ---------- */
.footer-sep {
  border: none;
  height: 1px;
  background: rgba(255,255,255,.15);
  margin: 28px 0;
}

/* ---------- Bottom Row ---------- */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr; /* left info | right CTA & socials */
  gap: 32px;
  align-items: start;
}

.footer-bottom-left { max-width: 520px; }
.footer-company {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
}
.footer-phone {
  margin: 0 0 24px 0;
  font-size: 34px;             /* large red phone number */
  font-weight: 800;
  letter-spacing: 1px;
  color: #e53935;
}
.footer-phone span { color: #e53935; }

.footer-contact-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  color: #d9d9d9;
}

/* CTA button (red pill) */
.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #d62828;       /* vivid red */
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform .08s ease, background .2s ease;
}
.footer-contact-btn:hover { background: #c12020; }
.footer-contact-btn:active { transform: translateY(1px); }
.btn-arrow { font-weight: 700; }

.footer-bottom-right { justify-self: end; max-width: 520px; width: 100%; }
.contact-line {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: #e6e6e6;
}
.contact-line a { color: #e6e6e6; }
.contact-line a:hover { color: #ffffff; }
.dot { margin-right: 6px; color: #ffffff; opacity: .9; }

/* Red circular icons */
.icon-wrap {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  background: #d62828;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}

/* Socials under the contact lines */
.footer-social {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.social-svg { width: 22px; height: 22px; fill: #ffffff; opacity: .9; }
.footer-social a:hover .social-svg { opacity: 1; }

/* ---------- Credits ---------- */
.footer-credits {
  text-align: center;
  color: #b3b3b3;
  font-size: 14px;
  margin-top: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { margin-bottom: 8px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom-right { justify-self: start; }
}
@media (max-width: 520px) {
  .footer-logo-combined { height: 64px; }
  .footer-phone { font-size: 30px; }
}

/* single subtle separator line */
.footer-sep {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.15); /* one thin line */
  margin: 30px 0; /* spacing between sections */
}

/* ensure the footer logo shows full image without clipping */
.footer-logo-combined {
  height: 72px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 0;         /* remove any inherited rounding */
  background: transparent;  /* clear any default background */
}

.footer-brand img.footer-logo-combined {
  border-radius: 0 !important;
}

/* ---------- Footer base ---------- */
.site-footer {
  background: #1f1f1f; /* slightly darker */
  color: #ffffff;
  font-family: "Poppins", sans-serif;
}

.footer-inner {
  padding: 60px 0 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 50px;
  align-items: start;
}

.footer-brand img.footer-logo-combined {
  height: 72px;
  width: auto;
  display: block;
  border-radius: 0;
  object-fit: contain;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-col h4 {
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1rem;
}

.footer-col ul li a {
  color: #bfbfbf;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-col ul li a:hover {
  color: #ffffff;
}

/* Separator */
.footer-sep {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 35px 0;
}

/* Bottom Row */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  color: #fff;
}

.footer-phone {
  color: #e53935;
  font-weight: 800;
  font-size: 2.2rem;
  margin: 0.3rem 0 1rem;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #e53935;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 2rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}
.footer-contact-btn:hover {
  background: #c62828;
}

/* Icon circles */
.icon-wrap {
  height: 44px;
  width: 44px;
  background: #e53935;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-svg {
  fill: #fff;
  width: 22px;
  height: 22px;
}

/* Social icons */
.footer-social a {
  color: #fff;
  transition: color 0.3s ease;
}
.footer-social a:hover {
  color: #e53935;
}

/* Credits */
.footer-credits {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  color: #b3b3b3;
  font-size: 0.9rem;
  padding-top: 1rem;
  margin-top: 2rem;
}
/* ---- Footer Separator Fix ---- */
.footer-sep {
  border: none;                 /* removes double-line browser default */
  height: 1px;                  /* single clean line */
  background: rgba(255, 255, 255, 0.15); /* subtle white divider */
  margin: 30px 0;               /* even spacing above/below */
}

/* remove any duplicate borders that caused a second line */
.footer-bottom,
.footer-credits {
  border-top: none !important;
}

/* ---------- Compact Footer Layout ---------- */
.site-footer {
  background: #1f1f1f;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  line-height: 1.4;
}

.footer-inner {
  padding: 40px 0 25px; /* ↓ reduced from 60/40 */
}

.footer-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 35px; /* ↓ reduced from 50px */
  align-items: start;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px; /* ↓ reduced from 40px */
}

.footer-col h4 {
  margin-bottom: 0.75rem; /* ↓ reduced from 1rem */
  font-weight: 600;
  font-size: 0.95rem;
}

.footer-col ul li {
  margin-bottom: 0.25rem; /* tighter line spacing */
}

.footer-sep {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 20px 0; /* ↓ reduced from 35px */
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem; /* ↓ tighter spacing between columns */
  margin-top: 10px; /* ↓ reduced */
}

.footer-phone {
  font-size: 1.8rem; /* ↓ smaller from 2.2rem */
  margin: 0.25rem 0 0.75rem;
}

.footer-contact-btn {
  padding: 0.6rem 1rem; /* ↓ smaller button padding */
  border-radius: 1.5rem;
  font-size: 0.9rem;
}

/* contact-line spacing */
.contact-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem; /* ↓ tighter */
}

.icon-wrap {
  height: 36px; /* ↓ smaller icon circle */
  width: 36px;
}

.icon-svg {
  width: 18px;
  height: 18px;
}

.footer-social a {
  margin-right: 0.6rem;
}

.footer-credits {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  color: #b3b3b3;
  font-size: 0.85rem;
  padding-top: 0.75rem; /* ↓ smaller padding */
  margin-top: 1.2rem;
}

/* ================================
   FOOTER — RESPONSIVE TWEAKS
   (append to the end of styles.css)
   ================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .footer-inner { padding: 32px 0 22px; }                 /* slightly tighter */
  .footer-top {
    grid-template-columns: 1fr;                           /* logo above columns */
    gap: 28px;
  }
  .footer-brand { justify-content: center; }              /* center logo */
  .footer-logo-combined { height: 64px; }                 /* shrink a touch */

  .footer-cols {
    grid-template-columns: repeat(2, 1fr);                /* 2 columns on tablet */
    gap: 22px;
    text-align: left;
  }

  .footer-sep { margin: 18px 0; }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr;                           /* stack left/right */
    gap: 16px;
    justify-items: center;                                /* center group */
    text-align: center;
  }

  .footer-bottom-left,
  .footer-bottom-right { max-width: 720px; width: 100%; }

  .footer-company { font-size: 20px; }
  .footer-phone { font-size: 1.6rem; margin: .2rem 0 .6rem; }

  .contact-line {
    grid-template-columns: 40px 1fr;                      /* icon + text */
    justify-content: center;
  }
  .icon-wrap { width: 38px; height: 38px; }
  .icon-svg  { width: 18px; height: 18px; }

  .footer-social { justify-content: center; }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  .footer-inner { padding: 26px 0 18px; }
  .footer-cols {
    grid-template-columns: 1fr;                           /* one column list */
    gap: 16px;
    text-align: center;                                   /* center list items */
  }
  .footer-col h4 { margin-bottom: .5rem; font-size: .95rem; }
  .footer-col li { margin: .2rem 0; }

  .footer-bottom { gap: 14px; }
  .footer-company { font-size: 18px; }
  .footer-phone { font-size: 1.4rem; }

  .footer-contact-btn {
    width: 100%;                                          /* easy tap target */
    justify-content: center;
    padding: .55rem .9rem;
    border-radius: 24px;
    font-size: .9rem;
  }

  .contact-line {
    grid-template-columns: 32px 1fr;                      /* smaller icon circle */
    gap: 10px;
  }
  .icon-wrap { width: 32px; height: 32px; }
  .icon-svg  { width: 16px; height: 16px; }

  .footer-social { justify-content: center; gap: 14px; }
  .footer-credits { font-size: .8rem; padding-top: .6rem; margin-top: 1rem; }
}

/* ===============================
   MARGIN & LAYOUT FIX PATCH
   =============================== */

/* 1️⃣ Hero section spacing fix */
.hero {
  padding-bottom: 6rem !important;   /* add space for the floating pill */
  position: relative;
}

/* 2️⃣ Hero pill alignment fix */
.hero-inner-pill {
  position: relative !important;     /* let it flow naturally */
  bottom: auto !important;
  left: 50%;
  translate: -50% 0;
  margin-top: -2.5rem;               /* visually pull it close to hero */
  margin-bottom: 3rem;               /* adds breathing room before next section */
  background: #fff;
  padding: 0.6rem 2rem;
  border-radius: 50px;
  max-width: 90%;
  text-align: center;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* 3️⃣ Services section alignment */
.hero-services {
  padding-top: 2.5rem !important;
  margin-top: -1rem;                 /* closes blue/white gap under hero */
}

/* 4️⃣ General section transition smoothing */
section + section {
  margin-top: 0 !important;
  padding-top: 3rem !important;
}

/* 5️⃣ Footer anchor (ensure no overlaps) */
.site-footer {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: 4rem;
}
/* =========================
   HERO PILL "NOTCH" PATCH
   ========================= */

/* tune how far the pill dips into the next (white) section:
   50% = the pill's center is exactly on the blue edge.
   Try 40% if you want a subtler dip. */
   :root { --pill-overlap: 50%; }

   /* Make the hero the positioning context */
   .hero {
     position: relative !important;
     padding-bottom: 4.5rem !important;  /* room so content above doesn't feel cramped */
   }
   
   /* Put the pill exactly on the bottom edge and dip it by --pill-overlap */
   .hero-inner-pill {
     position: absolute !important;
     left: 50%;
     bottom: 0;                           /* stick to the blue edge */
     transform: translate(-50%, var(--pill-overlap)) !important;
     margin: 0 !important;
     background: #fff;
     padding: 0.6rem 2rem;
     border-radius: 50px;
     box-shadow: 0 8px 24px rgba(0,0,0,.10);
     z-index: 2;
   }
   
   /* The section after the hero gets a little top padding so it doesn't
      collide with the pill that dips down. */
   .hero + .hero-services {
     padding-top: 3.25rem !important;
     margin-top: 0 !important;
   }
   
   :root { --pill-overlap: 80%; }

   /* ====== Centered Notch: resolve translate vs transform conflict ====== */
:root { --pill-overlap: 100%; } /* tweak 40–80% to change how deep it dips */

.hero {
  position: relative !important;                     /* keeps pill anchored */
  padding-bottom: 4.75rem !important;                /* room for the dip */
}

.hero-inner-pill {
  position: absolute !important;
  left: 50%;
  bottom: 0;

  /* Use the same sub-property used earlier in your file to override it */
  translate: -50% var(--pill-overlap) !important;    /* X = center, Y = dip */
  transform: none !important;                        /* neutralize any old transform */

  margin: 0 !important;
  background: #fff;
  padding: 0.6rem 2rem;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(0,0,0,0);
  z-index: 2;
  text-align: center;
}

/* add a bit of clearance so the next section doesn't collide */
.hero + .hero-services {
  padding-top: 3.25rem !important;
  margin-top: 0 !important;
}
/* =========================
   ADD GAP BELOW SEE MORE
   ========================= */

   .hero-services {
    padding-bottom: 3.5rem !important;   /* space before next section */
  }
  
  .serv-seemore-btn {
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 1.5rem;              /* ensures button has air around it */
  }
  
  /* Smooth transition to next section */
  .hero-services + .get-involved {
    margin-top: 0;
    padding-top: 4rem;
  }
/* =========================
   SPACE ABOVE GET INVOLVED CARDS
   ========================= */

   .get-involved-cards {
    margin-top: 2.5rem; /* adjust between 2rem–3rem to taste */
  }
  
  @media (max-width: 768px) {
    .get-involved-cards {
      margin-top: 2rem; /* slightly tighter on mobile */
    }
  }
    
/* =========================
   HERO PILL – RESPONSIVE FIX
   ========================= */

/* sensible defaults */
:root { --pill-overlap: 100%; } /* how deep the pill dips */

.hero { position: relative; padding-bottom: 4.75rem; }

.hero-inner-pill{
  position: absolute;
  left: 50%;
  bottom: 0;
  /* center + dip */
  translate: -50% var(--pill-overlap);
  transform: none;

  /* keep it readable & non-overflowing */
  max-width: min(92vw, 720px);
  padding: clamp(10px, 1.2vw, 14px) clamp(16px, 3vw, 28px);
  border-radius: 999px;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;         /* modern browsers: nicer wrapping */
  box-shadow: none;           /* you asked to remove the shadow */
  z-index: 2;
}

/* bring the next section down enough to clear the dip */
.hero + .hero-services { padding-top: 3.25rem; }

/* --- step down the dip on narrower screens --- */
@media (max-width: 900px){
  :root { --pill-overlap: 50%; }
}
@media (max-width: 700px){
  :root { --pill-overlap: 100%; }
  .hero-inner-pill{ max-width: min(94vw, 640px); }
}

/* --- tiny screens: switch to a safe flow layout ---
   We overlap a little with negative margin to keep the notch feel,
   but avoid any centering/overflow issues. */
@media (max-width: 520px){
  .hero { padding-bottom: 2rem; } /* less reserved room */
  .hero-inner-pill{
    position: relative;
    inset: auto;
    translate: 0 0;               /* cancel the absolute translate */
    margin: -1rem auto 1.25rem;   /* small overlap = notch effect */
    max-width: 94vw;
  }
  .hero + .hero-services { padding-top: 2.5rem; }
}
/* ===============================
   HERO PILL – UNIVERSAL RESPONSIVE FIX
   =============================== */
   .hero {
    position: relative;
    padding-bottom: clamp(3.5rem, 6vw, 5rem); /* scales space smoothly */
  }
  
  /* main pill style */
  .hero-inner-pill {
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 60%;  /* dip about 60% of its height */
    transform: none;
    margin: 0;
  
    /* responsive sizing */
    max-width: min(90vw, 700px);
    width: fit-content;
    padding: clamp(0.5rem, 1vw, 0.8rem) clamp(1.25rem, 3vw, 2rem);
    border-radius: 999px;
    background: #fff;
    text-align: center;
    white-space: normal;
    box-shadow: none;
    z-index: 2;
    transition: translate 0.3s ease, padding 0.3s ease, max-width 0.3s ease;
  }
  
  /* give space to the next section */
  .hero + .hero-services {
    padding-top: clamp(2.5rem, 4vw, 3.25rem);
    margin-top: 0;
  }
  
  /* medium screens */
  @media (max-width: 1024px) {
    .hero-inner-pill {
      translate: -50% 50%;   /* slightly shallower dip */
      max-width: 94vw;
    }
  }
  
  /* tablets and small laptops */
  @media (max-width: 768px) {
    .hero-inner-pill {
      translate: -50% 45%;
      max-width: 96vw;
      padding: 0.6rem 1.5rem;
    }
  }
  
  /* phones – switch to flow layout to avoid overflow */
  @media (max-width: 540px) {
    .hero { padding-bottom: 2.5rem; }
    .hero-inner-pill {
      position: relative;
      inset: auto;
      translate: 0 0;
      margin: -1.25rem auto 1.25rem; /* gentle notch look */
      max-width: 94vw;
    }
    .hero + .hero-services {
      padding-top: 2.5rem;
    }
  }
/* =========================================
   HERO PILL — TINY SCREEN ALIGNMENT FIX
   (keeps pill inside the same gutters as .container)
   ========================================= */
   :root{
    /* match your global horizontal gutter on phones */
    --mobile-gutter: 16px; /* tweak to 20px if you prefer more side padding */
  }
  
  @media (max-width: 540px){
    .hero{ padding-bottom: 2.5rem; }
  
    .hero-inner-pill{
      /* switch to flow layout on the smallest screens */
      position: relative;
      inset: auto;
      translate: 0 0 !important;   /* cancel the absolute translate */
      transform: none !important;
  
      /* make width follow the same side gutters as .container */
      width: calc(100% - var(--mobile-gutter) * 2);
      max-width: none;              /* let the calc drive it */
      margin: -1rem auto 1.25rem;   /* small lift for the “notch” look */
      padding: clamp(10px, 3.5vw, 16px) clamp(14px, 5vw, 22px);
      border-radius: 999px;
      text-align: center;
      white-space: normal;
      text-wrap: balance;
      box-shadow: none;             /* you asked to remove shadow */
      z-index: 2;
    }
  
    /* give the next section a bit of room */
    .hero + .hero-services{
      padding-top: 2.5rem;
      margin-top: 0;
    }
  }
    
/* =========================================
   FINAL RESPONSIVE HERO PILL FIX
   ========================================= */
   .hero {
    position: relative;
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }
  
  .hero-inner-pill {
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 60%;
    transform: none;
    background: #fff;
    border-radius: 999px;
    padding: clamp(10px, 1vw, 14px) clamp(20px, 3vw, 30px);
    max-width: min(90vw, 720px);
    width: fit-content;
    text-align: center;
    z-index: 2;
    box-shadow: none;
    transition: all 0.3s ease;
  }
  
  /* Give space to next section */
  .hero + .hero-services {
    padding-top: clamp(2.5rem, 4vw, 3rem);
  }
  
  /* Tablet adjustments */
  @media (max-width: 768px) {
    .hero-inner-pill {
      translate: -50% 50%;
      max-width: 94vw;
    }
  }
  
  /* ✅ Smallest phones — switch to flow layout */
  @media (max-width: 480px) {
    .hero {
      padding-bottom: 1.75rem; /* less reserved space */
    }
  
    .hero-inner-pill {
      position: relative;
      inset: auto;
      translate: 0 0;
      transform: none;
      margin: 0 auto 1.25rem;
      width: 90%;
      max-width: 90%;
      padding: 0.7rem 1.25rem;
      border-radius: 999px;
    }
  
    .hero + .hero-services {
      padding-top: 2.25rem;
    }
  }
/* =========================================
   HERO PILL — BULLETPROOF MOBILE BEHAVIOR
   ========================================= */

/* fluid space reserved for the pill overlap */
.hero {
  position: relative;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* default (desktop/tablet): centered + dipped */
.hero-inner-pill{
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 58%;         /* center X, dip ~58% of its height */
  transform: none;             /* avoid transform/translate double-ups */
  margin: 0;

  /* 🔒 never overflow the viewport */
  box-sizing: border-box;
  inline-size: min(90vw, 720px); /* logical width = max usable width */
  padding: clamp(10px, 1vw, 14px) clamp(18px, 3vw, 28px);
  border-radius: 999px;

  background: #fff;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;      /* let long words wrap */
  text-wrap: balance;           /* nicer line breaks (supported browsers) */
  box-shadow: none;             /* you asked to remove shadow */
  z-index: 2;
}

/* give room to the next section */
.hero + .hero-services {
  padding-top: clamp(2.5rem, 4vw, 3.25rem);
  margin-top: 0;
}

/* tighten dip & widen usable width on medium screens */
@media (max-width: 900px){
  .hero-inner-pill{
    translate: -50% 50%;
    inline-size: min(94vw, 700px);
  }
}

/* 🔁 Switch to flow layout a bit earlier so it never pokes out */
@media (max-width: 640px){
  .hero { padding-bottom: 2.25rem; }

  .hero-inner-pill{
    position: relative;
    inset: auto;
    translate: 0 0;             /* cancel absolute translate */
    margin: -1rem auto 1.25rem; /* small lift = keeps the “notch” look */

    /* match container gutters; prevents right-edge overflow */
    inline-size: calc(100% - 32px);   /* 16px gutter each side */
    max-width: none;
    padding: clamp(10px, 3.5vw, 16px) clamp(14px, 5vw, 22px);
  }

  .hero + .hero-services { padding-top: 2.5rem; }
}
  
/* === Mobile-only: make Services submenu look nested === */
@media (max-width: 980px) {
  /* Distinguish the parent item */
  .has-submenu > .menu-parent {
    font-weight: 800;
    letter-spacing: .2px;
    padding: .9rem .5rem .4rem;
  }

  /* Visually nest the submenu block */
  .submenu {
    margin: .1rem 0 .75rem 1rem;   /* indent whole group */
    padding: .25rem 0 .25rem .75rem;
    border-left: 2px solid #e5e7eb; /* vertical guide */
    gap: .25rem;
    background: transparent;        /* keep slide-in menu clean */
  }

  /* Style submenu links smaller & lighter */
  .submenu a {
    font-size: .95rem;
    font-weight: 600;
    color: #334155;
    padding: .55rem .75rem;
    border-radius: 8px;
  }

  /* Subtle row separators inside the group */
  .submenu li + li a {
    border-top: 1px dashed #eef2f7;
  }

  /* Hover/focus feedback */
  .submenu a:hover,
  .submenu a:focus {
    background: #f8fafc;
    color: var(--brand);
  }
}
/* === Footer: CSS-only tweak === */

/* hide the first column (the big About Us list) */
.site-footer .footer-cols .footer-col:first-child {
  display: none;
}

/* make the grid look balanced with two columns on desktop */
@media (min-width: 768px) {
  .site-footer .footer-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* keep the existing nav items visible in the middle column */
.site-footer .footer-cols .footer-col-strong ul li {
  display: list-item;                 /* ensure we didn't hide them earlier */
}

/* inject a visual "About Us" row at the top of that list (CSS-only) */
.site-footer .footer-cols .footer-col-strong ul {
  position: relative;
  display: grid;
  gap: .4rem;
  padding: 0;                         /* clean stack */
}
.site-footer .footer-cols .footer-col-strong ul::before {
  content: "About Us";
  display: block;
  font-weight: 600;
  font-size: .95rem;
  color: #f8fafc;
  padding: .1rem 0;
  /* make it feel link-like */
  cursor: pointer;
}
.site-footer .footer-cols .footer-col-strong ul::before:hover {
  color: var(--brand, #0aa3d6);
}

/* === Footer middle-column link brightness fix === */
.site-footer .footer-cols .footer-col-strong a {
  color: #f8fafc !important;    /* make them bright like Home/About Us */
  font-weight: 600;             /* match visual weight */
  text-decoration: none;
}

.site-footer .footer-cols .footer-col-strong a:hover {
  color: var(--brand, #0aa3d6); /* same hover accent you already use */
}

/* === Hero image curved blend === */
.hero {
  position: relative;
  overflow: hidden;
}

/* target only the right-side hero image */
.hero-right img {
  border-radius: 0;             /* remove the card corners */
  clip-path: ellipse(85% 90% at 100% 50%); /* the curved effect */
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* optional: make the curve smoother on large screens */
@media (min-width: 900px) {
  .hero-right img {
    clip-path: ellipse(75% 90% at 100% 50%);
  }
}
.hero-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.1), transparent 60%);
  pointer-events: none;
}
/* === HERO: remove top/bottom gaps and make the image flush === */
.hero {
  padding: 0 !important;                 /* kill all hero vertical padding */
  position: relative; 
  overflow: hidden;
}

/* make the inner grid fill the hero height; adjust height as you like */
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;     /* same split as your desktop */
  align-items: stretch;
  min-height: clamp(420px, 48vw, 560px); /* controls overall hero height */
  padding: 0;                             /* no extra spacing */
}

/* keep text padded without affecting the image edges */
.hero-left {
  display: grid;
  align-content: center;
  padding: clamp(24px, 4vw, 48px);
}

/* image should fill the hero vertically with the curved cut */
.hero-right { display: grid; }
.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;                        /* remove card rounding */
  clip-path: ellipse(90% 100% at 80% 50%);/* show more image */
  margin: 0;
  display: block;
}

/* put the pill back as a true overlay so it doesn't push layout */
.hero-inner-pill {
  position: absolute !important;
  left: 50%;
  bottom: 0;                               /* align to hero bottom edge */
  translate: -50% 60%;                     /* dip into next section */
  transform: none !important;
  margin: 0 !important;                    /* no extra space reservation */
  background: #fff !important;            /* ensure white background */
  padding: 0.6rem 2rem !important;        /* ensure padding */
  border-radius: 50px !important;         /* ensure rounded corners */
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; /* add shadow */
  z-index: 2 !important;                   /* ensure it's on top */
  max-width: 90% !important;               /* ensure it doesn't overflow */
  text-align: center !important;           /* center the text */
}

/* ensure the section below doesn’t try to add extra top padding for the pill */
.hero + .hero-services {
  padding-top: 3rem !important;            /* just enough to clear the dip */
  margin-top: 0 !important;
}
/* === Hero image full-width blend fix === */
.hero {
  overflow: hidden; /* make sure no scrollbars appear when we expand image */
}

/* let the image container overflow slightly */
.hero-right {
  position: relative;
  flex: 1 1 55%;
  overflow: visible;
}

/* make the image extend fully to the right edge (and curve smoothly) */
.hero-right img {
  width: 140%; /* make it visibly wider than before */
  height: 100%;
  object-fit: cover;
  object-position: center right; /* keep focus on the right side */
  border-radius: 0;
  margin-right: -20%; /* pulls the image further to fill empty space */
  clip-path: ellipse(60% 100% at 100% 50%); /* smoother, wider curve */
}

/* optional: adjust slightly on smaller screens */
@media (max-width: 1000px) {
  .hero-right img {
    width: 120%;
    margin-right: -10%;
    clip-path: ellipse(70% 100% at 100% 50%);
  }
}

/* keep the image clipped to its column */
.hero-right {
  overflow: hidden;                 /* ensures extra width is hidden */
}

/* expand from the RIGHT edge toward the left */
.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;    /* lock the right edge */
  transform-origin: right center;   /* scale outward from the right */
  transform: scaleX(1.18);          /* grow leftward; tweak 1.12–1.25 to taste */
  border-radius: 18px;              /* keep your rounded corners */
}
.hero-right {
  position: relative;
  right: -2vw; /* push container slightly off the right edge */
  overflow: hidden;
}

.hero-right img {
  width: 110%; /* slightly overshoot to remove any blue gap */
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
/* Let the hero ignore the global container gutter */
.hero .container,
.hero-inner.container {
  width: min(100%, var(--container)); /* removes the -2rem gutter here */
}

/* Safety: keep layout tidy if anything overflows */
.hero { overflow: hidden; }

/* Keep the photo tight to the right edge */
.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* hug the right edge */
  border-radius: 18px;           /* keep your rounding */
}
.hero { overflow: hidden; }
.hero-right { margin-right: -1rem; }   /* cancels the right-side container gutter */
/* Remove the right-side gutter from the hero section only */
.hero {
  overflow: hidden;
  position: relative;
}

/* Override the container padding inside the hero */
.hero-inner.container {
  width: 100%;
  max-width: 100%;
  padding-right: 0;  /* remove built-in horizontal padding */
  margin-right: 0;
}

/* Make sure the image fully touches the right edge */
.hero-right {
  margin-right: -1rem;  /* cancel the global container gutter */
  flex: 1;
  overflow: hidden;
}

.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* focus on right edge */
  display: block;
}
.hero-right {
  flex: 1; /* keep equal height distribution */
  overflow: hidden;
  margin-right: -1rem; /* remove blue space on the right */
  position: relative;
}

.hero-right img {
  width: 120%;           /* extend horizontally only */
  height: 100%;          /* maintain height of hero container */
  object-fit: cover;
  object-position: right center;
  transform: translateX(-20%); /* shift left more so image takes more space */
  clip-path: ellipse(80% 85% at 100% 50%); /* curved but shows more image */
}

/* Mobile: square card layout */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr; /* stack vertically on mobile */
    gap: 1rem;
    padding: 1rem;
  }
  
  .hero-right {
    order: -1; /* put image first on mobile */
    margin-right: 0;
    overflow: visible;
  }
  
  .hero-right img {
    width: 100%;
    height: 250px; /* fixed square-ish height */
    object-fit: cover;
    object-position: center;
    transform: none; /* remove the translateX */
    clip-path: none; /* remove curve, make it square */
    border-radius: 16px; /* nice rounded corners */
  }
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  /* tweak these to match your theme */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-top: 6px;
  padding: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  z-index: 9999;
}

.search-suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}

.search-suggestions button:hover,
.search-suggestions button[aria-selected="true"] {
  background: #f3f4f6;
}

.search-suggestions .title {
  display: block;
  font-weight: 600;
}

.search-suggestions .snippet {
  display: block;
  font-size: 12px;
  opacity: .7;
  margin-top: 2px;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  margin-top: 4px;
  z-index: 9999;
}
.search-suggestions button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}
.search-suggestions button:hover,
.search-suggestions button.active {
  background: #f3f4f6;
}

.footer-phone a {
  color: #e63946; /* same red tone as before */
  text-decoration: none;
  font-weight: 500;
}

.footer-phone a:hover {
  text-decoration: underline;
}