:root{
    --snake:#4CAF50;       
    --ink:#111;            /* dark text */
    --paper:#f5f5f5;       /* light gray bar */
    --white:#fff;
    --cardBorder:#27c90b;  /* darker snake for borders */
    --cardShadow: 0 8px 24px rgba(0,0,0,.12);
    --slate:#3e4449;
    --charcoal:#2e3438;     /* deep charcoal band */
  }
  /* For the rest of the site text */
  body, p, li, a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400; /* normal weight for paragraphs */
    color: #333; /* adjust color to your design */
  }

  h1, h2, h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* slightly bolder for headings */
  }
  
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:Segoe UI,system-ui,-apple-system,Arial,sans-serif;color:var(--ink);line-height:1.5}
  
  /* Header */
  .site-header{
    position: sticky; top:0; z-index:50;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-bottom:1px solid var(--hair);
    box-shadow: 0 2px 18px rgba(0,0,0,.06);
  }
  .container{max-width:1200px;margin:0 auto;padding:0 24px;}
  .nav-row{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    gap:16px; height:110px;
  }

  html {
    scroll-behavior: smooth;      /* smooth anchor scrolling */
    scroll-padding-top: 72px;     /* match your header height */
  }

  /* Brand */
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand img{width:115px; height:115px; object-fit:contain; border-radius:8px}
  .brand-title {
    font-family: 'Anton', sans-serif;
    font-weight: normal; /* Anton has only one weight; this is fine */
    font-size: 1.8rem;   /* Adjust size as needed */
    letter-spacing: 1px; /* Optional—helpful for condensed fonts */
    text-transform: uppercase;
  }
  
  /* Nav */
  .nav{display:flex; gap:20px; justify-content:center}
  .nav-link{
    position:relative; text-decoration:none; color:#1f2937; font-weight:600;
    padding:6px 2px;
  }
  .nav-link:hover{color:#0b5e49}
  .nav-link.active::after,
  .nav-link:hover::after{
    content:""; position:absolute; left:0; right:0; bottom:-10px; height:3px;
    background:var(--snake); border-radius:999px;
  }

  /* Right side */
  .nav-cta{display:flex; align-items:center; gap:14px}
  .phone{
    color:#0b5e49; text-decoration:none; font-weight:800;
    padding:6px 10px; border-radius:8px; background:#ecfdf5; /* soft green chip */
  }
  .btn-primary{
    display:inline-block; font-weight:900; text-decoration:none; color:#000;
    background:var(--snake); border:2px solid var(--snake-dark);
    padding:10px 14px; border-radius:10px; box-shadow:0 6px 18px rgba(57,255,20,.25);
  }
  .btn-primary:hover{filter:brightness(.95)}
  .pill{border-radius:999px}

  /* Mobile */
  .nav-toggle{
    display:none; width:40px; height:40px; border:1px solid var(--hair);
    background:#fff; border-radius:10px; align-items:center; justify-content:center; gap:4px;
  }
  .nav-toggle span{display:block; width:20px; height:2px; background:#111}
  /* Base button (desktop hidden) */
  .menu-pill{
    appearance:none; border:1px solid var(--hair);
    background:#ffffff; color:#111; font-weight:700;
    height:40px; padding:0 12px; border-radius:999px;
    display:none; align-items:center; gap:8px; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
  }
  .menu-pill:focus-visible{ outline:2px solid var(--snake); outline-offset:2px; }

  /* Icon: three bars */
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after{
    content:""; display:block; width:18px; height:2px;
    background:#111; border-radius:2px;
  }
  .menu-icon::before{ transform: translateY(-6px); }
  .menu-icon::after{  transform: translateY( 4px); }

  /* When menu is open, animate to X */
  .menu-open .menu-icon{ background:transparent; }
  .menu-open .menu-icon::before{ transform: rotate(45deg); }
  .menu-open .menu-icon::after{  transform: rotate(-45deg); }

  /* Mobile layout */
  @media (max-width:900px){
    .nav-row{
      grid-template-columns:auto 1fr auto;
      height:72px;
    }
    .brand img{ width:44px; height:44px; }
    .brand-title{ font-size:1.1rem; letter-spacing:.5px; }

    html{ scroll-padding-top:72px; } /* anchor offset */

    .menu-pill{ display:flex; }      /* show pill */
    .nav-cta{ display:none; }        /* hide desktop CTAs on mobile */

    /* Dropdown panel */
    .nav{
      position:absolute; left:0; right:0; top:72px;
      background:#fff; border-bottom:1px solid var(--hair);
      display:none; flex-direction:column; padding:6px 0;
      box-shadow:0 10px 24px rgba(0,0,0,.08);
    }
    .nav.open{ display:flex; }

    /* Large tap targets */
    .nav-link{
      padding:14px 24px; font-size:1.05rem;
      border-bottom:1px solid rgba(0,0,0,.05);
    }
    .nav-link:last-of-type{ border-bottom:none; }
    .nav-link::after{ content:none; } /* remove desktop underline */

    /* Mobile-only items inside menu */
    .phone-mobile{
      display:block; margin:8px 24px; padding:10px 12px;
      background:#ecfdf5; color:#0b5e49; text-decoration:none; font-weight:800;
      border-radius:8px; text-align:center;
    }
    .cta-mobile{
      display:block; margin:6px 24px 14px; text-align:center;
      box-shadow:0 6px 18px rgba(57,255,20,.25);
    }
  }

  
  /* Hero */
  .hero{background:var(--snake);color:var(--white);padding:32px 0}
  .hero-inner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
    gap:32px;
  }
  .copy h1{font-family: 'Anton', sans-serif;font-size:40px;line-height:1.1;margin-bottom:10px;font-weight:800}
  .copy h1 span{opacity:.8}
  .copy p{max-width:46ch;margin-bottom:16px;opacity: 1}
  .btn{
    display:inline-block;padding:10px 18px;border-radius:6px;
    background:#000;color:#fff;text-decoration:none;font-weight:700
  }
  
  /* Right image */
  .media{display:flex;justify-content:center}
  .media img{
    width:100%;max-width:640px;height:auto;border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.2)
  }
  
  /* Responsive */
  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;gap:20px}
    .media{order:-1}        /* image above text on small screens */
    .copy h1{font-size:32px}
  }
  #cycling-text {
    display: inline-block;
    font-weight: 900;
    color: #ffffff; /* your snake green highlight */
    transition: opacity 0.6s ease-in-out;
  }
  .fade-out {
    opacity: 0;
  }
  
  /* Services section */
  .services{
    background:#3e4449;          
    padding:48px 0 64px;
    color:var(--white);
  }
  .services-title{
    font-family: 'Anton', sans-serif;
    font-size:28px;
    font-weight:800;
    text-align:center;
    margin-bottom:28px;
  }
  
  /* Grid */
  .service-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:24px;
    align-items: stretch;
  }
  @media (max-width:1024px){
    .service-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width:700px){
    .service-grid{ grid-template-columns: 1fr; }
  }
  
  /* Card */
 /* keep structural bits that all cards share, if any */
  .card{
    display:flex;
    flex-direction:column;
    gap:14px;
    height: var(--card-h, auto);
  }

  /* put the visual frame on normal cards only */
  .card:not(.flip-card){
    background:var(--white);
    color:var(--ink);
    border:3px solid var(--cardBorder);
    border-radius:10px;
    box-shadow:var(--cardShadow);
    padding:28px 24px 22px;
  }

  /* hover effect only on non-flip cards (optional) */
  .card:hover{
    transform: translateY(-2px);
    box-shadow:0 12px 28px rgba(0,0,0,.16);
  }

  /* Icon */
  .card-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    height:180px;
  }
  .card-icon svg{
    width:160px; height:160px;
    stroke:var(--cardBorder);
    stroke-width: 2;
    fill: none;
  }
  
  /* Text */
  .card h3{
    text-align:center;
    font-size:20px;
    font-weight:800;
  }
  .card p{
    color:#4a4a4a;
    line-height:1.55;
    min-height:72px;   /* keeps buttons aligned */
  }

  /* 3D flip container */
  .flip-card{
    perspective: 1200px;           /* gives depth to the flip */
    background: transparent;       /* card background handled by faces */
    height: var(--card-h, auto);
  }

  /* keep your existing .card styles, but move visuals to faces */
  .flip-card .card-inner{
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2,.6,.2,1);
  }

  /* when flipped */
  .flip-card.flipped .card-inner{
    transform: rotateY(180deg);
  }

  /* faces */
  .card-face{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;           /* hide face when turned */
    background: var(--white);
    color: var(--ink);
    border: 3px solid var(--cardBorder);
    border-radius: 10px;
    box-shadow: var(--cardShadow);
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height:100%;
  }

  /* front keeps your icon layout */
  .card-front .card-icon{
    display:flex; justify-content:center; align-items:center; height: 180px;
  }
  .card-front .card-icon svg{
    width: 140px; height: 140px; stroke: var(--cardBorder);
  }

  /* back face */
  .card-back{
    transform: rotateY(180deg);
    overflow: auto;
    padding-bottom: 60px;
  }
  .card-back h4{ margin: 6px 0 2px; font-weight: 800; color: #111; }
  .card-back ul{ margin: 0 0 6px 18px; }
  .card-back .back-actions{
    margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap;
  }

  /* Keep actions always visible at the bottom while scrolling the back */
  .back-actions{
    position: sticky;
    bottom: 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 40%);
    padding-top: 12px;
    margin-top: auto;              /* pushes it to the bottom of the flex column */
  }
  .btn.outline{
    background: transparent;
    color: #111;
    border: 2px solid var(--snake);
    border-radius: 9px;
    padding: 12px 16px;
  }

  /* Ensure all flip cards are same height (use your existing grid card height) */
  .flip-card{ height: var(--card-h, auto); }
  .flip-card .card-face{ min-height: 0px; }     /* adjust to match your tallest card */
  @media (max-width: 700px){
    .flip-card .card-face{ min-height: 420px; }   /* extra room on small screens if needed */
  }

    
  /* Button */
  .btn{
    display:block;
    text-align:center;
    font-weight:800;
    text-decoration:none;
    border-radius:9px;
    padding:12px 16px;
    border:2px solid var(--snake);
    transition:.2s ease;
  }
  .btn-solid{
    background:var(--snake);
    color:#000;
  }
  .btn-solid:hover{
    filter:brightness(0.85);
  }

  /* Bottom band layout */
  .bottom-band{
    background:var(--slate);
    padding:28px 0 36px;
    border-top:1px solid rgba(0,0,0,.25);
  }
  .container{max-width:1200px;margin:0 auto;padding:0 24px}
  .band-grid{
    display:grid;
    grid-template-columns: 320px 1fr 360px;
    gap:20px;
  }
  @media (max-width:1100px){
    .band-grid{grid-template-columns:1fr}
  }


  /* Band container */
  .ba-section{
    background: linear-gradient(180deg, #2c3236, var(--charcoal));
    padding: 36px 0 44px;
    border-top: 3px solid rgba(57,255,20,.25);
    border-bottom: 3px solid rgba(57,255,20,.25);
  }

  .ba-title{
    font-family: 'Anton', sans-serif;
    color:#f9fafb;
    text-align:center;
    font-size:28px;
    font-weight:900;
    letter-spacing:.2px;
    margin: 0 0 18px;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
  }

  /* Scroller */
  .ba-scroller{
    overflow:hidden;
    border-radius:14px;
    position:relative;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.06);
  }

  .ba-track{
    display:flex;
    gap:14px;
    padding:14px;
    width:max-content;                     /* shrink to content */
    animation: ba-scroll 35s linear infinite;
  }
  .ba-scroller:hover .ba-track{ animation-play-state:paused; } /* pause on hover */

  @keyframes ba-scroll{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }  
  }

  /* Tiles */
  .ba-tile{
    position:relative;
    background:var(--paper);
    border:2px solid rgba(57,255,20,.25);
    border-radius:12px;
    overflow:hidden;
    width:300px;             /* card width */
    height:200px;            /* card height */
    flex:0 0 auto;
  }
  .ba-tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ba-tile figcaption{
    position:absolute;
    left:10px; top:10px;
    background:rgba(0,0,0,.75);
    color:#fff;
    padding:4px 8px;
    font-weight:800;
    border-radius:999px;
    font-size:12px;
    letter-spacing:.3px;
    border:1px solid rgba(255,255,255,.18);
  }
  .ba-tile.after figcaption{
    background: var(--snake);
    color:#000;
    border-color: rgba(0,0,0,.25);
  }

  /* Responsive */
  @media (max-width: 768px){
    .ba-tile{ width:240px; height:160px; }
  }

  /* Map */
  .map-embed iframe{border-radius:12px;border:1px solid var(--line);background:#ddd}

  /* Right: About stack styled like white pills */
  .about-stack{display:flex;flex-direction:column;gap:14px}
  .about-pill{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px 18px;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
  }
  .about-pill h4{margin:0 0 6px;color: var(--snake); }
  .about-pill p{margin:0;color:#374151}
  .about-pill ul{margin:6px 0 0 18px;color:#ffffff}
  .about-pill li{margin:6px 0;color:#fff}


  /* Frosted glass business card in the bottom band */
  .bottom-band .biz-card{
    /* Frosted look */
    background: rgba(255,255,255,0.10);   /* translucent so backdrop-filter shows */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    /* Shape & spacing */
    border-radius: 16px;
    padding: 20px;
    color: #f7f9fb;
  }

  /* Typography inside the card */
  .bottom-band .biz-card h3{
    font-family: 'Anton', sans-serif;
    font-size: 22px;
    color: #ffffff;
    margin: 0 0 10px;
  }
  .bottom-band .biz-card .biz-block strong{ color:#ffffff; }
  .bottom-band .biz-card p{ color:#e5e7eb; }

  /* Logo sizing */
  .bottom-band .biz-card .biz-logo{
    width: 110px; height: 110px; object-fit: contain;
    border-radius: 10px; display:block; margin-bottom:10px;
  }

  /* CTA button on frosted surface */
  .bottom-band .biz-card .btn.btn-primary{
    background: var(--snake);
    border: 2px solid var(--snake-dark);
    color: #000;
    border-radius: 999px;
    padding: 12px 16px;
    box-shadow: 0 6px 18px rgba(57,255,20,.35);
  }
  .bottom-band .biz-card .btn.btn-primary:hover{
    filter: brightness(.95);
  }

  /* Contact rows */
  .bottom-band .biz-card .biz-contact{ margin-top: 20px; }
  .bottom-band .biz-card .biz-contact .row{
    display:flex; align-items:center; gap:8px; margin:4px 0;
  }
  .bottom-band .biz-card .biz-contact .row span{ color:#ffffff; }      /* emoji/icon */
  .bottom-band .biz-card .biz-contact a{
    color:#c8ffd0; text-decoration: underline; font-weight:700;
  }

  /* Frosted glass style for the About stack (right column) */
  .bottom-band .about-pill{
    background: rgba(255,255,255,0.10);   /* translucent for frost */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    border-radius: 16px;
    padding: 16px 18px;
    color: #f7f9fb;
  }

  /* Headings and text colors for contrast on the dark band */
  .bottom-band .about-pill h4{
    font-family: 'Anton', sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0 0 6px;
  }
  .bottom-band .about-pill p{ color:#e5e7eb; margin:0; }

  /* List styling (readable bullets + spacing) */
  .bottom-band .about-pill ul{
    margin: 6px 0 0 18px;
    padding: 0;
    color: #e5e7eb;
  }
  .bottom-band .about-pill li{
    margin: 6px 0;
  }

  /*  subtle snake-green accent line under each title */
  .bottom-band .about-pill h4::after{
    content:"";
    display:block;
    width:48px; height:3px;
    background: rgba(57,255,20,.8);  /* snake green */
    border-radius: 999px;
    margin-top: 6px;
  }
  /* Add spacing below the Business Hours block */
  .biz-block {
    margin: 14px 0 24px; /* Top, Right/Left, Bottom */
  }

  .biz-card .btn {
    margin-top: 12px;
  }