@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
    /* ===== CSS Variables ===== */
    :root{
      --brand-red:#d4232a;  /* Primary CTA */
      --brand-deep:#0b1a26; /* Deep navy for headers */
      --brand-gold:#e6c76f; /* Accent */
      --text:#1a1a1a;
      --muted:#5a6570;
      --card-bg:#ffffff;
      --card-shadow:0 10px 25px rgba(0,0,0,.08);
      --radius:16px;
      --maxw:1200px;
    }

    /* ===== Resets & Base ===== */
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      color:var(--text); background:#f7f9fc; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    img{max-width:100%; height:auto; display:block}
    a{color:inherit}
    .container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
    .visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

    /* ===== Header / Nav ===== */
    header{position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:saturate(120%) blur(6px); background:rgba(255,255,255,0.9); color:#0b1a26; box-shadow:0 2px 8px rgba(0,0,0,.08);} 
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; position:relative}
    .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
    .brand-mark{width:36px; height:36px; border-radius:50%; background:var(--brand-red); display:grid; place-items:center; font-weight:800}
    .brand-name{font-weight:800; letter-spacing:.3px}
    .menu{display:flex; gap:22px; align-items:center}
    .menu a{color:#0b1a26; text-decoration:none; font-weight:600; opacity:.9}
    .menu a:hover{opacity:1}
    .nav-cta{background:var(--brand-red); color:#fff; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:700}
/* ensure white text on red pill in top bar */
.menu a.nav-cta{color:#fff !important}

    /* Mobile menu */
    .hamburger{display:none; background:none; border:0; color:#0b1a26; font-size:28px}
    @media (max-width: 880px){
      .menu{display:none}
      .hamburger{display:block}
      .menu.open{display:flex; position:absolute; top:100%; right:0; flex-direction:column; gap:12px; background:#ffffff; color:#0b1a26; padding:16px; border-radius:12px; box-shadow:var(--card-shadow); border:1px solid #e6eef5}
      .menu.open a{padding:6px 8px; color:#0b1a26}
    }

    /* ===== Hero ===== */
    .hero{
      min-height:100svh; display:grid; place-items:center; position:relative; color:#fff;
      background: #0b1a26 url('https://hireasantasgrotto.co.uk/bck.jpg') center/cover no-repeat fixed;
      text-align:center;
    }
    .hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(1200px 600px at 50% 20%, rgba(0,0,0,.10), rgba(0,0,0,.45)); }
    .hero-inner{ position:relative; z-index:1; padding:305px 0 60px; }
    .eyebrow{display:block; background:rgba(255,255,255,.8); color:var(--brand-deep); border:1px solid rgba(0,0,0,.06); padding:6px 12px; border-radius:999px; font-weight:700; letter-spacing:.3px; margin:12px auto 0}  
/* 20% smaller than before */
h1{
  font-family:'Caveat', sans-serif;
  font-size:clamp(28px, 5.28vw, 50px); /* was clamp(35px, 6.6vw, 62px) */
  margin:16px auto 10px;
  color:#1c5d71;
  font-weight:900;
  line-height:1.1;
  text-shadow:
    1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
    1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,
    0 0 6px rgba(255,255,255,.6);
}

    .sub{font-size:clamp(16px,2.5vw,22px); opacity:1; max-width:60ch; margin:6px auto 0; color:var(--brand-deep)}
    .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px}
    .btn{display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:12px; font-weight:700; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
    .btn-primary{background:var(--brand-red); color:#fff}
    .btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 18px rgba(212,35,42,.25)}
    .btn-ghost{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff}
    .btn-ghost:hover{background:rgba(255,255,255,.18)}

    /* ===== Section Headings ===== */
    .section{padding:56px 0}
    .section h2{font-size:clamp(26px,4.2vw,36px); margin:0 0 16px; color:#1c5d71; position:relative; padding-left:44px}
.section h2::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:32px; height:32px; background:url('https://hireasantasgrotto.co.uk/gifs/snowflake.png') center/contain no-repeat}
    .section p.lead{color:var(--muted); font-size:clamp(16px,2.4vw,18px); margin:0 0 28px}

    /* ===== Category Cards ===== */
    .grid{display:grid; gap:18px}
    @media (min-width:700px){ .grid{grid-template-columns:repeat(12, 1fr)} }
    .card{grid-column: span 12; position:relative; border-radius:var(--radius); overflow:hidden; background:var(--card-bg); box-shadow:var(--card-shadow)}
    .card.media{min-height:260px; display:grid; place-items:end; color:#fff; text-decoration:none}
    .card .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0) 20%, rgba(0,0,0,.65))}
    .card .label{position:relative; z-index:1; padding:18px; font-size:20px; font-weight:800}
    .card .label small{display:block; font-weight:600; opacity:.9}
    .card:hover .label{transform:translateY(-2px)}
    .span-6{grid-column: span 12}
    @media (min-width:700px){ .span-6{grid-column: span 6} }

    /* ===== Why Choose Us ===== */
    .features{display:grid; gap:16px}
    @media (min-width:700px){ .features{grid-template-columns:repeat(4,1fr)} }
    .feature{
      background:#fff; padding:18px; border-radius:14px; box-shadow:var(--card-shadow);
    }
    .feature h3{margin:6px 0 8px; font-size:26px}  
    .feature p{margin:0; color:var(--muted)}

    /* ===== Enquiry Form ===== */
    .enquiry{background:linear-gradient(180deg, #fff, #f5f7fb)}
    form.enquiry-form{display:grid; gap:14px; grid-template-columns:1fr}
    @media (min-width:760px){ form.enquiry-form{grid-template-columns:1fr 1fr} }
    .form-field{display:flex; flex-direction:column}
    .form-field label{font-weight:700; margin-bottom:6px}
    .form-field input, .form-field select, .form-field textarea{
      border:1px solid #dce3ea; border-radius:12px; padding:12px 14px; font:inherit; background:#fff;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:none; border-color:var(--brand-red); box-shadow:0 0 0 3px rgba(212,35,42,.15)}
    .form-field textarea{min-height:120px}

    /* Honeypot */
    .hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

    /* ===== Footer ===== */
    footer{background:#b64a47; color:#ffffff; padding:36px 0 56px; margin-top:0}
    footer a{color:#fff; text-decoration:none}
    .footer-grid{display:grid; gap:22px}
    @media (min-width:780px){ .footer-grid{grid-template-columns:2fr 1fr 1fr} }
    .copyright{border-top:1px solid rgba(255,255,255,.25); margin-top:22px; padding-top:16px; font-size:14px; color:#fff; opacity:.9}
    /* ===== Scalloped Snow Trim ===== */
  .snow-trim{height:24px; background:
    radial-gradient(16px 12px at 16px 12px, #fff 99%, transparent 100%) 0 0/32px 24px repeat-x,
    linear-gradient(#fff, #fff) 0 12px/100% 12px no-repeat; margin-top:0}
  @media (max-width:880px){ .snow-trim{margin-top:56px} }

  /* ===== WhatsApp Floating Button (mobile-first) ===== */
  .whatsapp-fab{position:fixed; right:16px; bottom:16px; z-index:60; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; text-decoration:none; background:#25D366; color:#fff; font-size:26px; box-shadow:0 12px 24px rgba(0,0,0,.18)}
  .whatsapp-fab:after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.4); animation:pulse 2.2s infinite}
  @keyframes pulse{to{box-shadow:0 0 0 22px rgba(37,211,102,0)}}
  @media (min-width:900px){ .whatsapp-fab{bottom:24px; right:24px} }

  /* ===== Promo Ribbon image above footer ===== */
  .promo-ribbon{display:flex; flex-direction:column; align-items:center; padding:24px 0 0}
  .promo-ribbon img{max-width:899px; width:100%; height:auto; display:block}
  .promo-ribbon img + img{margin-top:8px}

  /* ===== Falling Snow (lightweight) ===== */
  .flake{position:fixed; top:-10px; width:6px; height:6px; border-radius:50%; background:#fff; opacity:.9; pointer-events:none; z-index:55; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
  @keyframes fall{to{transform:translate3d(var(--x-move,0px), 110vh, 0)}}
  /* Mobile hero: show more of the scene */
  @media (max-width: 768px){
    .hero{ background:url('https://hireasantasgrotto.co.uk/bckmobile.jpg') center/cover no-repeat; background-attachment:scroll; min-height: 90svh; }
    .hero .sub{max-width: 34ch}
  }
    .hero .sub{max-width: 34ch}
  }
  /* Top banner */


  .top-banner{display:flex; justify-content:center; align-items:center; background:#ffffff; padding:8px 0; transition:max-height .35s ease, opacity .35s ease, padding .35s ease; max-height:180px; opacity:1; overflow:hidden;}
  .top-banner img{max-width:888px; width:100%; height:auto; max-height:none}
  /* Hide top banner on desktops (>=769px) */
  @media (min-width: 769px){ .top-banner{ display:none; } }
  /* Brand logo image */
  .brand-logo{height:45px; width:auto; display:block}
  /* Desktop separators between nav links (not in dropdown) */
  @media (min-width: 881px){
    .menu a + a:not(.nav-cta)::before{content:"—"; display:inline-block; margin:0 10px; opacity:.45}
  }
  /* Headings font for continuity */
  h2, h3{font-family:'Caveat', sans-serif}
  /* Tighten first section spacing under hero */
  #grottos.section{padding-top:28px; padding-bottom:28px}
  @media (max-width: 768px){ #grottos.section{padding-top:20px} }
  /* Global H3 size +20% */
  h3{font-size:144%}
  /* Headline + sub in a single pill */
  .headline-pill{display:block; margin:0 auto; padding:12px 18px; border-radius:18px; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 20px rgba(0,0,0,.08); text-align:center; max-width: 900px}
  .headline-pill h1{margin:0 0 4px}
  /* View Grottos button (higher contrast) */
  .btn-info{background:#348aa4; color:#fff}
  .btn-info:hover{transform:translateY(-1px); box-shadow:0 10px 18px rgba(52,138,164,.25)}
  /* Centered package badges row */
  .packages-row{display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 10px}
  .packages-row a{display:inline-block}
  .packages-row img{width:168px; height:118px; object-fit:contain; display:block}
  /* Tighten spacing between cards and Why section */
  #why.section{padding-top:28px}
  .packages-row{margin-bottom:10px}
  /* Mobile: 2-up layout for package badges */
  @media (max-width: 560px){
    .packages-row{gap:8px; margin:6px 0 8px}
    .packages-row a{flex:0 1 calc(50% - 8px); display:flex; justify-content:center}
    .packages-row img{width:100%; height:auto; max-width:171px}
  }
  /* Copy block below Why section */
  .copy-block{margin-top:18px; background:#fff; border:1px solid #e9edf3; border-radius:14px; padding:16px 18px; box-shadow:var(--card-shadow)}
  .copy-block h3{margin:6px 0 8px; font-size:1.1em}
  .copy-block ul{margin:8px 0 12px; padding-left:20px}
  .copy-block li{margin:4px 0}
  /* About row with image + text */
  .about-row{display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:start; margin-top:18px}
  .about-media{margin:0; border-radius:14px; overflow:hidden; box-shadow:var(--card-shadow); border:1px solid #e9edf3}
  .about-media img{display:block; width:100%; height:auto}
  @media (max-width: 880px){ .about-row{grid-template-columns:1fr; gap:12px} }
  /* Map/pin icon before heading */
  .icon-pin{margin-right:8px; font-size:1.05em}

  /* Top banner: show on all devices and hide smoothly on scroll */
  .top-banner{display:flex; justify-content:center; align-items:center; background:#ffffff; padding:6px 0; transition:max-height .35s ease, opacity .35s ease, padding .35s ease; max-height:120px; opacity:1; overflow:hidden}
  .top-banner.hide{max-height:0; opacity:0; padding:0}
  .top-banner img{max-width:888px; width:100%; height:auto}

  /* Override earlier desktop hide rule */
  @media (min-width: 769px){ .top-banner{ display:flex; } }
  /* Tablet & touch fixes: prevent oversized fixed backgrounds */
  @media (hover: none) and (pointer: coarse){
    .hero{ background-attachment: scroll; background-position: center top; }
  }
  /* Use mobile-optimised hero on tablets too */
  @media (max-width: 1024px){
    .hero{ background-image: url('https://hireasantasgrotto.co.uk/bckmobile.jpg'); background-size: cover; background-position: center top; background-attachment: scroll; min-height: calc(100svh + 20px); }
  }
  }
  /* Slightly taller top banner */
  .top-banner{max-height:180px}
  /* Desktop-specific banner height */
  @media (min-width: 769px){
    .top-banner{max-height:170px}
  }
  }

/* default (desktop/tablet) */
.spacerblock { min-height: 95px; }

/* small screens < 768px */
@media (max-width: 767.98px) {
  .spacerblock { min-height: 5px; }
}