/* ==========================================================================
   CT SAND — FLUID MAIN STYLESHEET
   Color Palette:
   --color-sand-light: rgb(247, 246, 243)  [#F7F6F3] Background / Base light
   --color-sand-warm:  rgb(238, 226, 211)  [#EEE2D3] Warm coastal accent
   --color-sea-foam:   rgb(162, 195, 190)  [#A2C3BE] Coastal highlight
   --color-ocean-slate:rgb(73, 113, 131)   [#497183] Muted oceanic blue
   --color-deep-navy:  rgb(24, 48, 73)     [#183049] High contrast text & dark UI
   ========================================================================== */

   :root {
    --color-sand-light: rgb(247, 246, 243);
    --color-sand-warm:  rgb(238, 226, 211);
    --color-sea-foam:   rgb(162, 195, 190);
    --color-ocean-slate:rgb(73, 113, 131);
    --color-deep-navy:  rgb(24, 48, 73);
  
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  
    /* Fluid Typography */
    --step--1: clamp(0.75rem, 0.7rem + 0.25vw, 0.88rem);
    --step-0:  clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
    --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
    --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.25rem);
  
    /* Fluid Spacing */
    --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
    --space-md: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --space-lg: clamp(2.5rem, 2rem + 3vw, 5rem);
  
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
  
    --shadow-subtle: 0 4px 20px rgba(24, 48, 73, 0.06);
    --shadow-hover:  0 8px 30px rgba(24, 48, 73, 0.12);
  
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  /* Reset & Fluid Box Model */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth;
    font-size: 100%;
  }
  
  body {
    background-color: var(--color-sand-light);
    color: var(--color-deep-navy);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  /* Fluid Layout Container */
  .section-container,
  .header-container,
  .footer-container {
    width: min(100% - var(--space-md), 1200px);
    margin-inline: auto;
  }
  
  /* ==========================================================================
     HEADER & FLUID NAVIGATION
     ========================================================================== */
  
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(247, 246, 243, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(73, 113, 131, 0.15);
    padding-block: var(--space-xs);
  }
  
  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  
  .brand-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: 1.5px;
    color: var(--color-deep-navy);
  }
  
  .logo-mark {
    width: 14px;
    height: 14px;
    background-color: var(--color-sea-foam);
    border-radius: 50%;
    border: 2px solid var(--color-deep-navy);
    flex-shrink: 0;
  }
  
  .logo-text {
    font-size: var(--step-1);
    font-weight: 800;
  }
  
  .nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: clamp(1rem, 2vw, 2rem);
  }
  
  .nav-link {
    font-weight: 500;
    font-size: var(--step-0);
    color: var(--color-ocean-slate);
    transition: color var(--transition-fast);
  }
  
  .nav-link:hover {
    color: var(--color-deep-navy);
  }
  
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.2em;
    font-size: var(--step-0);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--transition-smooth);
    cursor: pointer;
    white-space: nowrap;
  }
  
  .btn-primary {
    background-color: var(--color-deep-navy);
    color: var(--color-sand-light);
    border: 1px solid var(--color-deep-navy);
  }
  
  .btn-primary:hover {
    background-color: var(--color-ocean-slate);
    border-color: var(--color-ocean-slate);
    transform: translateY(-1px);
  }
  
  .btn-outline {
    background-color: transparent;
    color: var(--color-deep-navy);
    border: 1px solid var(--color-ocean-slate);
  }
  
  .btn-outline:hover {
    background-color: var(--color-sand-warm);
    transform: translateY(-1px);
  }
  
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
  }
  
  .hamburger {
    width: 22px;
    height: 2px;
    background-color: var(--color-deep-navy);
    display: block;
    position: relative;
  }
  
  .hamburger::before,
  .hamburger::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background-color: var(--color-deep-navy);
    left: 0;
  }
  
  .hamburger::before { top: -6px; }
  .hamburger::after { top: 6px; }
  
  /* ==========================================================================
     MAIN CONTENT & FLUID GRID
     ========================================================================== */
  
  .main-content {
    flex: 1;
  }
  
  /* Fluid Hero Section */
  .hero-section {
    padding-block: var(--space-lg);
    background: linear-gradient(180deg, var(--color-sand-light) 0%, var(--color-sand-warm) 100%);
  }
  
  .hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--space-md);
    align-items: center;
  }
  
  .badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.35em 0.8em;
    background-color: rgba(162, 195, 190, 0.4);
    color: var(--color-deep-navy);
    border-radius: 50px;
    border: 1px solid var(--color-sea-foam);
    margin-bottom: var(--space-xs);
  }
  
  .hero-title {
    font-size: var(--step-3);
    line-height: 1.1;
    font-weight: 800;
    color: var(--color-deep-navy);
    margin-bottom: var(--space-xs);
  }
  
  .hero-subtitle {
    font-size: var(--step-0);
    color: var(--color-ocean-slate);
    margin-bottom: var(--space-md);
    max-width: 60ch;
  }
  
  .hero-actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }
  
  /* Glassmorphism Dynamic Visual Card */
  .glass-card {
    background: rgba(247, 246, 243, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-lg);
    padding: var(--space-xs);
    box-shadow: var(--shadow-subtle);
    position: relative;
    overflow: hidden;
  }
  
  .hero-img {
    border-radius: calc(var(--radius-lg) - 0.25rem);
    object-fit: cover;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  
  .overlay-tag {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    right: var(--space-sm);
    width: fit-content;
    background: rgba(24, 48, 73, 0.88);
    color: var(--color-sand-light);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    padding: 0.4em 0.8em;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(4px);
  }
  
  .dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-sea-foam);
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  /* Featured Section */
  .featured-section {
    padding-block: var(--space-lg);
    background-color: var(--color-sand-light);
  }
  
  .section-header {
    margin-bottom: var(--space-md);
  }
  
  .section-header h2 {
    font-size: var(--step-2);
    color: var(--color-deep-navy);
    margin-bottom: 0.25em;
  }
  
  .section-header p {
    color: var(--color-ocean-slate);
    font-size: var(--step-0);
  }
  
  /* Dynamic Responsive Card Grid */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-md);
  }
  
  .feature-card {
    background-color: #ffffff;
    border: 1px solid rgba(238, 226, 211, 0.8);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  }
  
  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
  }
  
  .card-media {
    position: relative;
    aspect-ratio: 16 / 9;
  }
  
  .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .card-badge {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    background-color: var(--color-sand-light);
    color: var(--color-deep-navy);
    font-size: var(--step--1);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
  }
  
  .card-body {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .card-body h3 {
    font-size: var(--step-1);
    color: var(--color-deep-navy);
    margin-bottom: 0.4em;
  }
  
  .card-body p {
    font-size: var(--step-0);
    color: var(--color-ocean-slate);
    margin-bottom: var(--space-sm);
    flex-grow: 1;
  }
  
  .card-link {
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--color-deep-navy);
    align-self: flex-start;
  }
  
  .card-link:hover {
    color: var(--color-ocean-slate);
  }
  
  /* ==========================================================================
     FOOTER
     ========================================================================== */
  
  .site-footer {
    background-color: var(--color-deep-navy);
    color: var(--color-sand-light);
    padding-block: var(--space-md);
    margin-top: auto;
  }
  
  .footer-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  
  .footer-brand p {
    font-size: var(--step--1);
    color: var(--color-sea-foam);
    margin-top: 0.25rem;
  }
  
  .footer-socials {
    display: flex;
    gap: 1.25rem;
    align-items: center;
  }
  
  .footer-socials a {
    color: var(--color-sand-light);
    transition: color var(--transition-fast);
  }
  
  .footer-socials a:hover {
    color: var(--color-sea-foam);
  }
  
  .footer-links a {
    font-size: var(--step--1);
    color: var(--color-sea-foam);
  }
  
  .footer-links a:hover {
    text-decoration: underline;
  }
  
  /* ==========================================================================
     MOBILE NAVIGATION TOGGLE OVERRIDE
     ========================================================================== */
  
  @media (max-width: 768px) {
    .nav-toggle {
      display: block;
    }
  
    .site-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: var(--color-sand-light);
      border-bottom: 1px solid var(--color-sand-warm);
      padding: var(--space-sm);
      box-shadow: var(--shadow-hover);
    }
  
    .site-nav.is-open {
      display: block;
    }
  
    .nav-list {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-xs);
    }
  
    .cta-btn {
      width: 100%;
    }
  
    .footer-container {
      flex-direction: column;
      align-items: flex-start;
    }
  }


/* ==========================================================================
   FACEBOOK CTA SECTION
   ========================================================================== */

   .facebook-cta-section {
    padding-top: 5%;
    padding-block-end: var(--space-lg);
  }
  
  .facebook-card {
    background: linear-gradient(135deg, rgba(238, 226, 211, 0.5) 0%, rgba(247, 246, 243, 0.9) 100%);
    border: 1px solid var(--color-sand-warm);
    padding: var(--space-md);
    text-align: center;
  }
  
  .facebook-content {
    max-width: 600px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .facebook-content h2 {
    font-size: var(--step-2);
    color: var(--color-deep-navy);
    margin-bottom: 0.4em;
  }
  
  .facebook-content p {
    color: var(--color-ocean-slate);
    font-size: var(--step-0);
    margin-bottom: var(--space-md);
  }
  
  .fb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--color-deep-navy);
    color: var(--color-sand-light);
    padding: 0.8em 1.6em;
    font-size: var(--step-0);
  }
  
  .fb-btn:hover {
    background-color: #1877f2; /* Classic Facebook Blue on hover */
    border-color: #1877f2;
  }