/* =========================================================
     EDIT ME: swap colors, copy, and image URLs below.
     Search for "PLACEHOLDER" to find everything meant to be replaced.
     ========================================================= */

  :root{
    --sand:      #EDE9DE;
    --foam:      #FBFAF6;
    --driftwood: #90979A;
    --driftwood-dark: #6E7477;
    --gulf:      #1E4C82;
    --gulf-light:#4F8FC7;
    --coral:     #A9722E;
    --coral-dark:#845A24;
    --ink:       #1C2A38;
    --ink-soft:  #52606B;
    --max: 1120px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--foam);
    color: var(--ink);
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1,h2,h3{
    font-family: 'Fraunces', serif;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .mono{
    font-family: 'JetBrains Mono', monospace;
  }
  a{ color: inherit; }
  img{ max-width:100%; display:block; }
  .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 28px;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--coral-dark);
  }
  :focus-visible{
    outline: 3px solid var(--coral);
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- Top bar ---------- */
  .topbar{
    position: sticky; top:0; z-index: 50;
    background: rgba(251,250,246,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(144,151,154,0.18);
  }
  .topbar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top: 14px; padding-bottom: 14px;
  }
  .brand{
    font-family:'Fraunces', serif; font-weight:700; font-size:1.05rem;
    letter-spacing: 0.01em;
  }
  .brand span{ color: var(--gulf); }
  .topnav{ display:flex; gap:28px; font-size:0.9rem; font-weight:600; }
  .topnav a{ text-decoration:none; color: var(--ink-soft); }
  .topnav a:hover{ color: var(--gulf); }
  .topbar .cta{
    background: var(--coral); color:white; padding: 10px 18px;
    border-radius: 3px; font-weight:700; font-size:0.86rem;
    text-decoration:none; white-space:nowrap;
  }
  .topbar .cta:hover{ background: var(--coral-dark); }
  @media (max-width: 720px){ .topnav{ display:none; } }

  /* ---------- Hero ---------- */
  .hero{
    position: relative;
    background: linear-gradient(180deg, #123056 0%, var(--gulf) 42%, var(--gulf-light) 78%, var(--sand) 100%);
    color: var(--foam);
    padding: 88px 0 0;
    overflow: hidden;
  }
  .sun{
    position:absolute; top: 54px; right: 8%;
    width: 96px; height:96px; border-radius:50%;
    background: var(--coral);
    box-shadow: 0 0 0 14px rgba(169,114,46,0.15);
  }
  .hero .wrap{ position:relative; z-index:2; text-align:center; padding-bottom: 40px;}
  .hero .eyebrow{ color: rgba(251,250,246,0.85); }
  .hero h1{
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 14px 0 18px;
    line-height: 1.02;
  }
  .hero p.tag{
    max-width: 560px; margin: 0 auto 30px;
    font-size: 1.12rem; color: rgba(251,250,246,0.92);
  }
  .hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom: 56px;}
  .btn{
    display:inline-block; padding: 15px 28px; border-radius:3px;
    font-weight:700; text-decoration:none; font-size:0.95rem;
    letter-spacing: 0.01em;
  }
  .btn-primary{ background: var(--coral); color:white; }
  .btn-primary:hover{ background: var(--coral-dark); }
  .btn-ghost{ background: transparent; border: 1.5px solid rgba(251,250,246,0.6); color: var(--foam); }
  .btn-ghost:hover{ border-color: var(--foam); }

  .waves{ display:block; width:100%; height:auto; margin-top: -2px; }

  /* ---------- Dune divider (signature) ---------- */
  .dune{ display:block; width:100%; height: 46px; }

  /* ---------- Value / tide strip ---------- */
  .tide{
    background: var(--sand);
    padding: 8px 0 64px;
  }
  .tide-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    margin-top: 8px;
  }
  @media (max-width: 780px){ .tide-grid{ grid-template-columns: 1fr; } }
  .tide-card{
    background: var(--foam);
    border: 1px solid rgba(144,151,154,0.25);
    padding: 26px 24px;
  }
  .tide-card .num{ font-family:'JetBrains Mono'; color: var(--coral-dark); font-weight:700; font-size:0.8rem; }
  .tide-card h3{ font-size: 1.15rem; margin: 8px 0 8px; }
  .tide-card p{ margin:0; color: var(--ink-soft); font-size:0.95rem; }

  /* ---------- Tide chart (fee comparison, signature element) ---------- */
  .chart-section{ background: var(--foam); padding: 70px 0; }
  .chart-head{ text-align:center; max-width: 620px; margin: 0 auto 40px; }
  .chart-head h2{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 10px 0 12px; }
  .chart-head p{ color: var(--ink-soft); }
  .tidechart{
    max-width: 720px; margin: 0 auto;
    border: 1.5px solid var(--driftwood);
    background: var(--foam);
  }
  .tidechart-row{
    display:grid; grid-template-columns: 130px 1fr 130px;
    align-items:center;
    padding: 22px 26px;
    border-bottom: 1px dashed rgba(144,151,154,0.4);
    gap: 16px;
  }
  .tidechart-row:last-child{ border-bottom:none; }
  .tidechart-row .label{ font-family:'JetBrains Mono'; font-size:0.78rem; font-weight:700; letter-spacing:0.06em; }
  .tidechart-row.high .label{ color: var(--coral-dark); }
  .tidechart-row.low .label{ color: var(--gulf); }
  .tidechart-row .desc h4{ font-family:'Fraunces'; font-size:1.05rem; margin:0 0 4px; }
  .tidechart-row .desc p{ margin:0; color: var(--ink-soft); font-size:0.9rem; }
  .tidechart-row .amt{ text-align:right; font-family:'JetBrains Mono'; font-weight:700; font-size:1.15rem; }
  .tidechart-row.high .amt{ color: var(--coral-dark); }
  .tidechart-row.low .amt{ color: var(--gulf); }
  @media (max-width: 560px){
    .tidechart-row{ grid-template-columns: 1fr; text-align:left; gap:6px; }
    .tidechart-row .amt{ text-align:left; }
  }

  /* ---------- About ---------- */
  .about{ background: var(--gulf); color: var(--foam); padding: 76px 0; }
  .about-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 54px; align-items:start; }
  @media (max-width: 820px){ .about-grid{ grid-template-columns: 1fr; } }
  .about h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 10px 0 20px; }
  .about p{ color: rgba(251,250,246,0.88); }
  .stat-row{ display:flex; gap:34px; margin-top: 26px; flex-wrap:wrap; }
  .stat-row div{ }
  .stat-row .n{ font-family:'Fraunces'; font-size:2rem; font-weight:700; line-height:1; }
  .stat-row .l{ font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color: rgba(251,250,246,0.7); }
  .amenity-list{ list-style:none; padding:0; margin: 26px 0 0; display:grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
  .amenity-list li{ font-size:0.94rem; padding-left: 20px; position:relative; }
  .amenity-list li::before{ content:"—"; position:absolute; left:0; color: var(--coral); }

  /* ---------- Gallery (placeholder) ---------- */
  .gallery{ background: var(--foam); padding: 76px 0; }
  .gallery-head{ text-align:center; max-width:600px; margin:0 auto 36px; }
  .gallery-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  }
  @media (max-width: 720px){ .gallery-grid{ grid-template-columns: 1fr 1fr; } }
  .g-item{
    aspect-ratio: 4/3; position:relative;
    display:flex; align-items:flex-end;
    border: 1px dashed var(--driftwood);
  }
  .g-item span{
    font-family:'JetBrains Mono'; font-size:0.72rem; font-weight:600;
    color: var(--ink-soft); padding: 10px 12px; background: rgba(251,250,246,0.85);
    width:100%;
  }
  .g-item.tone-1{ background: #CFDCEA; }
  .g-item.tone-2{ background: #E7E3D8; }
  .g-item.tone-3{ background: #D9E1E6; }
  .g-item.tone-4{ background: #E3DED2; }
  .g-item.tone-5{ background: #C9D6E3; }
  .g-item.tone-6{ background: #DCE2E1; }
  .gallery-note{ text-align:center; margin-top: 22px; font-size:0.85rem; color: var(--ink-soft); }

  /* ---------- Local guide ---------- */
  .guide{ background: var(--sand); padding: 76px 0; }
  .guide-head{ max-width:620px; }
  .guide-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 10px 0 14px; }
  .guide-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 40px; }
  @media (max-width: 900px){ .guide-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .guide-grid{ grid-template-columns: 1fr; } }
  .guide-card{ background: var(--foam); border:1px solid rgba(144,151,154,0.25); padding: 20px; }
  .guide-card .eyebrow{ display:block; margin-bottom:8px; }
  .guide-card h3{ font-size:1.02rem; margin-bottom:6px; }
  .guide-card p{ margin:0; font-size:0.88rem; color: var(--ink-soft); }

  /* ---------- Reviews ---------- */
  .reviews{ background: var(--foam); padding: 76px 0; }
  .reviews-head{ max-width:620px; margin: 0 auto 40px; text-align:center; }
  .reviews-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 10px 0 8px; }
  .reviews-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 860px){ .reviews-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px){ .reviews-grid{ grid-template-columns: 1fr; } }
  .review-card{
    background: var(--sand);
    border: 1px solid rgba(144,151,154,0.3);
    padding: 24px;
    display:flex; flex-direction:column; gap: 12px;
  }
  .review-stars{ color: var(--coral); font-size: 0.95rem; letter-spacing: 2px; }
  .review-quote{ margin:0; font-size:0.95rem; color: var(--ink); flex-grow:1; }
  .review-meta{ font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-soft); }
  .reviews-note{ text-align:center; margin-top: 26px; font-size:0.85rem; color: var(--ink-soft); }

  /* ---------- Book now (external link) ---------- */
  .booknow{ background: var(--gulf); padding: 64px 0; text-align:center; color: var(--foam); }
  .booknow h2{ font-size: clamp(1.7rem,3vw,2.3rem); margin: 10px 0 14px; }
  .booknow p{ color: rgba(251,250,246,0.85); max-width: 520px; margin: 0 auto 28px; }
  .booknow .btn-primary{ font-size: 1rem; padding: 17px 34px; }

  /* ---------- Beach Club email capture ---------- */
  .book{ background: var(--foam); padding: 80px 0 90px; }
  .book-box{
    max-width: 760px; margin: 0 auto;
    border: 1.5px solid var(--driftwood);
    padding: 44px;
  }
  @media (max-width: 600px){ .book-box{ padding: 28px 22px; } }
  .book-box h2{ font-size: clamp(1.7rem,3vw,2.2rem); text-align:center; margin: 10px 0 8px; }
  .book-box > p.sub{ text-align:center; color: var(--ink-soft); margin: 0 0 34px; }
  form{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  form .full{ grid-column: 1 / -1; }
  @media (max-width: 560px){ form{ grid-template-columns: 1fr; } }
  label{ display:block; font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-soft); margin-bottom:6px; }
  input, textarea{
    width:100%; border: 1px solid rgba(144,151,154,0.4); background: var(--foam);
    padding: 12px 14px; font-family:'Karla'; font-size:0.95rem; color: var(--ink); border-radius:2px;
  }
  textarea{ resize: vertical; min-height: 90px; }
  input:focus, textarea:focus{ outline: none; border-color: var(--gulf); box-shadow: 0 0 0 3px rgba(47,100,89,0.15); }
  .submit-row{ grid-column: 1/-1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top: 6px; }
  .submit-row button{
    background: var(--coral); color:white; border:none; padding: 15px 30px;
    font-weight:700; font-size:0.95rem; border-radius:3px; cursor:pointer; font-family: 'Karla';
  }
  .submit-row button:hover{ background: var(--coral-dark); }
  .submit-row .altline{ font-size:0.85rem; color: var(--ink-soft); }
  .form-note{ font-size: 0.8rem; color: var(--ink-soft); margin-top: 18px; text-align:center; }

  /* ---------- Footer ---------- */
  footer{
    background: #10202F; color: rgba(251,250,246,0.75);
    padding: 44px 0;
    font-size: 0.85rem;
  }
  footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
  footer .brand{ color: var(--foam); }
  footer .brand span{ color: var(--coral); }

  /* ---------- Guides hub ---------- */
  .g-hero{
    position: relative;
    background: linear-gradient(180deg, #123056 0%, var(--gulf) 60%, var(--sand) 100%);
    color: var(--foam);
    padding: 64px 0 56px;
  }
  .g-hero .back{ font-size:0.85rem; color: rgba(251,250,246,0.75); text-decoration:none; display:inline-block; margin-bottom:18px; }
  .g-hero .back:hover{ color: var(--foam); }
  .g-hero h1{ font-size: clamp(2rem, 4.6vw, 3rem); margin: 14px 0 16px; line-height:1.08; }
  .g-hero p.tag{ max-width:640px; color: rgba(251,250,246,0.92); font-size:1.05rem; margin:0; }

  .guides-hub{ background: var(--foam); padding: 64px 0 90px; }
  .guides-hub-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; margin-top:8px; }
  @media (max-width:700px){ .guides-hub-grid{ grid-template-columns:1fr; } }
  .guide-tile{ background: var(--foam); border:1px solid rgba(144,151,154,0.25); display:flex; flex-direction:column; }
  .guide-tile img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
  .guide-tile .body{ padding:22px; }
  .guide-tile h3{ font-size:1.15rem; margin:8px 0 8px; }
  .guide-tile p{ color:var(--ink-soft); font-size:0.92rem; margin:0 0 14px; }
  .guide-tile a.readmore{ font-weight:700; color:var(--gulf); text-decoration:none; font-size:0.9rem; }
  .guide-tile a.readmore:hover{ color: var(--coral-dark); }

  /* ---------- Guide article ---------- */
  .article{ background: var(--foam); padding: 60px 0 90px; }
  .article-wrap{ max-width: 780px; margin:0 auto; padding:0 28px; }
  .article-intro{ font-size:1.05rem; color:var(--ink-soft); margin: 0 0 44px; }
  .article h2{ font-size: clamp(1.5rem,3vw,2rem); margin: 54px 0 18px; padding-top:26px; border-top:1px solid rgba(144,151,154,0.25); }
  .article h2:first-of-type{ border-top:none; margin-top:0; padding-top:0; }
  .article h3{ font-size:1.2rem; margin: 28px 0 4px; }
  .article .best-for{ font-weight:600; color: var(--gulf); margin: 4px 0 16px; font-size:0.95rem; }
  .article h4{ font-family:'JetBrains Mono'; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--coral-dark); margin: 22px 0 8px; }
  .article p{ margin: 0 0 16px; color: var(--ink); }
  .article ul{ margin: 0 0 16px; padding-left: 20px; }
  .article li{ margin-bottom:6px; }

  .g-table{ width:100%; border-collapse:collapse; margin: 20px 0 32px; font-size:0.92rem; }
  .g-table th, .g-table td{ border:1px solid rgba(144,151,154,0.3); padding:12px 14px; text-align:left; vertical-align:top; }
  .g-table th{ background: var(--sand); font-family:'JetBrains Mono'; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; }
  .g-table tr:nth-child(even) td{ background: rgba(237,233,222,0.4); }
  @media (max-width:640px){ .g-table{ display:block; overflow-x:auto; white-space:nowrap; } }

  .callout{ background: var(--sand); border-left: 4px solid var(--coral); padding: 18px 22px; margin: 8px 0 32px; font-size:0.95rem; color: var(--ink-soft); }
  .callout strong{ color:var(--ink); }

  .club-box{ background: var(--gulf); color: var(--foam); padding: 34px; margin: 40px 0 8px; text-align:center; }
  .club-box h3{ font-size:1.3rem; margin:0 0 8px; color: var(--foam); }
  .club-box p{ color: rgba(251,250,246,0.85); margin:0 0 20px; }

  .article-footer-nav{ margin-top:56px; padding-top:24px; border-top:1px solid rgba(144,151,154,0.25); font-size:0.85rem; }
  .article-footer-nav a{ color: var(--gulf); font-weight:700; text-decoration:none; }
  .article-footer-nav a:hover{ color: var(--coral-dark); }