:root{
    --bg:#fffaf3;
    --surface:#fff3e6;
    --line:#ffe0c4;
    --line-strong:#ffc79a;
    --ink:#3f2a1d;
    --ink-soft:#7a6250;
    --ink-faint:#a89684;

    --p1:#f9671d;   /* brand orange, sampled from the logo */
    --p1-dark:#c44a11;
    --p2:#d1402a;   /* burnt red */
    --p3:#fbbf24;   /* golden amber */
    --p4:#14b8a6;   /* teal */
    --p5:#fb8f4a;   /* light orange */
    --tint:#ffe9d5;

    --r:18px;
    --r-sm:12px;
    --maxw:1240px;
    --shadow:0 4px 0 rgba(196,74,17,.16);
    --shadow-soft:0 10px 30px rgba(196,74,17,.14);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{
    font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--bg);
    line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;position:relative;
  }
  img,svg{max-width:100%}
  img{display:block;width:100%;height:100%;object-fit:cover}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

  h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;line-height:1.08;font-weight:800;letter-spacing:-.01em}
  .label{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--p2)}

  /* TOP BAR */
  .topbar{background:linear-gradient(90deg,var(--p1),var(--p2));color:#fff;font-weight:700;font-size:13.5px}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:14px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
  .topbar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
  .topbar .tb-r{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

  /* NAV */
  header.nav{position:sticky;top:0;z-index:60;background:rgba(255,250,243,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:3px solid var(--line)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
  .brand{display:flex;align-items:center;gap:11px;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:21px;color:var(--p1)}
  .brand .mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--p1),var(--p2));display:grid;place-items:center;flex:none;box-shadow:var(--shadow-soft);transform:rotate(-6deg)}
  .brand .mark svg{width:24px;height:24px}
  .brand img{width:auto;height:34px;object-fit:contain}
  .navlinks{display:flex;gap:24px;align-items:center;font-weight:700;font-size:15.5px}
  .navlinks a{color:var(--ink-soft);transition:color .15s}
  .navlinks a:hover{color:var(--p1)}
  .nav-cta{display:inline-flex;align-items:center;white-space:nowrap;gap:8px;background:var(--p3);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:15.5px;padding:11px 20px;border-radius:999px;box-shadow:0 4px 0 #d99a15;transition:transform .12s}
  .nav-cta:hover{transform:translateY(-2px)}
  .nav-cta:active{transform:translateY(1px);box-shadow:0 2px 0 #d99a15}
  .burger{display:none;background:#fff;border:3px solid var(--line-strong);border-radius:12px;width:46px;height:46px;cursor:pointer}
  .burger span{display:block;width:18px;height:2.5px;background:var(--p1);margin:3px auto;border-radius:3px}
  @media(max-width:980px){.navlinks{display:none}.burger{display:block}}
  .mobile-menu{display:none;background:#fff;border-bottom:3px solid var(--line)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;padding:14px 24px;border-bottom:1px solid var(--line);font-weight:700;color:var(--ink-soft)}

  /* HERO */
  .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fb8f4a 0%,#f9671d 42%,#d24d0e 100%)}
  .hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:1fr;gap:30px;align-items:center;min-height:clamp(520px,68vh,640px);padding:40px 0 52px}
  .hero-copy{color:#fff;max-width:660px}
  .hero .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.45);color:#fff;font-weight:700;font-size:14px;padding:7px 15px;border-radius:999px;margin-bottom:18px;backdrop-filter:blur(4px)}
  .hero h1{font-size:clamp(36px,5.6vw,62px);color:#fff;text-shadow:0 3px 0 rgba(124,45,18,.38)}
  .hero h1 .hl{color:var(--p3);display:inline-block;transform:rotate(-2deg)}
  .hero p{font-size:clamp(16px,2vw,20px);color:#fff1e2;margin-top:16px;max-width:48ch;font-weight:600}
  .hero-actions{display:flex;gap:13px;margin-top:28px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:16.5px;padding:14px 26px;border-radius:999px;cursor:pointer;border:none;transition:transform .12s}
  .btn:active{transform:translateY(1px)}
  .btn-yellow{background:var(--p3);color:var(--ink);box-shadow:0 5px 0 #d99a15}
  .btn-yellow:hover{transform:translateY(-2px)}
  .btn-pink{background:var(--p2);color:#fff;box-shadow:0 5px 0 #a32f1d}
  .btn-pink:hover{transform:translateY(-2px)}
  .btn-white{background:#fff;color:var(--p1-dark);box-shadow:0 5px 0 rgba(124,45,18,.25)}
  .btn-white:hover{transform:translateY(-2px)}
  .hero-trust{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap;font-weight:700;font-size:14.5px;color:#ffeedd}
  .hero-trust span{display:inline-flex;align-items:center;gap:7px}
  .hero-trust svg{width:18px;height:18px;color:var(--p3)}

  .hero-photo{position:absolute;inset:0;z-index:0}
  .hero-photo .ph-main{position:absolute;inset:0;overflow:hidden}
  .hero-photo .ph-main img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
  .hero-photo .ph-main::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,15,13,.84) 0%,rgba(24,20,17,.72) 34%,rgba(30,25,21,.42) 62%,rgba(38,31,26,.12) 100%)}
  .hero-photo .ph-badge{position:absolute;right:28px;bottom:78px;background:var(--p3);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:15px;padding:12px 18px;border-radius:16px;box-shadow:var(--shadow-soft);transform:rotate(-5deg);border:3px solid #fff;z-index:4}
  .hero-photo .ph-badge b{font-size:18px;display:block;color:var(--p1)}
  @media(max-width:880px){
    .hero-grid{text-align:center;padding-top:30px}
    .hero-copy{max-width:none;margin:0 auto}
    .hero p{margin-left:auto;margin-right:auto}
    .hero-actions,.hero-trust{justify-content:center}
    .hero-photo .ph-main img{object-position:50% 42%}
    .hero-photo .ph-main::after{background:linear-gradient(180deg,rgba(18,15,13,.62) 0%,rgba(22,18,15,.76) 48%,rgba(26,21,18,.86) 100%)}
    .hero-photo .ph-badge{right:16px;bottom:64px;font-size:13.5px;padding:10px 14px}
    .hero-photo .ph-badge b{font-size:16px}
  }
  @media(max-width:520px){.hero-photo .ph-badge{display:none}}

  .wave{position:relative;z-index:3;line-height:0}
  .wave svg{width:100%;height:46px;display:block}

  /* balloons */
  .deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  .balloon{position:absolute;bottom:-160px;width:46px;height:58px;border-radius:50% 50% 48% 48%;opacity:.92;animation:floatUp linear infinite;z-index:2}
  .balloon::before{content:"";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);width:2px;height:15px;background:rgba(255,255,255,.6)}
  .balloon i{position:absolute;top:12%;left:22%;width:30%;height:34%;border-radius:50%;background:rgba(255,255,255,.45)}
  .balloon.bb1{left:6%;background:var(--p2);animation-duration:16s}
  .balloon.bb2{left:22%;background:var(--p3);animation-duration:20s;animation-delay:4s}
  .balloon.bb3{left:70%;background:var(--p4);animation-duration:18s;animation-delay:7s}
  .balloon.bb4{left:86%;background:var(--p5);animation-duration:22s;animation-delay:2s}
  @keyframes floatUp{0%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-42vh) translateX(16px) rotate(5deg)}100%{transform:translateY(-86vh) translateX(-10px) rotate(-3deg)}}
  @media(prefers-reduced-motion:reduce){.balloon{animation:none;display:none}}

  /* BOOKING STRIP */
  .strip{background:#fff;border:3px solid var(--line);border-radius:24px;box-shadow:var(--shadow-soft);margin-top:-34px;position:relative;z-index:20}
  .strip-inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .strip-cell{padding:26px 30px}
  .strip-cell:first-child{border-right:3px solid var(--line)}
  .strip-cell h3{font-size:19px;color:var(--p1);margin-bottom:3px}
  .strip-cell p{font-size:14px;color:var(--ink-soft);margin-bottom:14px;font-weight:600}
  .strip-row{display:flex;gap:8px;flex-wrap:wrap}
  .strip-row select,.strip-row input{flex:1;min-width:120px;font-family:inherit;font-size:15px;font-weight:600;padding:12px 13px;border:2px solid var(--line-strong);border-radius:12px;background:#fffaf3;color:var(--ink)}
  .strip-row select:focus,.strip-row input:focus{outline:none;border-color:var(--p1)}
  .strip-row .btn{padding:12px 22px;font-size:15px;flex:none}
  #areaOut{font-size:14.5px;margin-top:11px;font-weight:700;min-height:18px}
  @media(max-width:760px){.strip-inner{grid-template-columns:1fr}.strip-cell:first-child{border-right:none;border-bottom:3px solid var(--line)}}

  /* SECTIONS */
  section{padding:66px 0}
  .sec-head{text-align:center;max-width:680px;margin:0 auto 38px}
  .sec-head h2{font-size:clamp(28px,4vw,44px)}
  .sec-head h2 em{font-style:normal;color:var(--p2)}
  .sec-head p{color:var(--ink-soft);font-size:17px;margin-top:10px;font-weight:600}

  /* CATEGORIES */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .cat{position:relative;border-radius:20px;padding:26px 22px;color:#fff;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:140px;transition:transform .15s;box-shadow:var(--shadow-soft);cursor:pointer;border:none;text-align:left;font-family:inherit}
  .cat:hover{transform:translateY(-4px) rotate(-1deg)}
  .cat .cat-img{position:absolute;inset:0;z-index:0}
  .cat .cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .cat:hover .cat-img img{transform:scale(1.07)}
  .cat::before{content:"";position:absolute;inset:0;z-index:1;background:inherit;opacity:.52}
  .cat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.42) 100%)}
  .cat.k5::before{opacity:.66}
  .cat>svg,.cat>h3,.cat>span:not(.cat-img){position:relative;z-index:2}
  .cat>h3,.cat>span:not(.cat-img){text-shadow:0 1px 4px rgba(0,0,0,.55)}
  .cat.k5>h3,.cat.k5>span:not(.cat-img){color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55)}
  .cat svg{width:38px;height:38px;margin-bottom:6px}
  .cat h3{font-size:20px}
  .cat span{font-weight:700;font-size:13.5px;opacity:.92}
  .cat.k1{background:linear-gradient(135deg,#f9671d,#fb8f4a)}
  .cat.k2{background:linear-gradient(135deg,#14b8a6,#2dd4bf)}
  .cat.k3{background:linear-gradient(135deg,#d1402a,#e56a52)}
  .cat.k4{background:linear-gradient(135deg,#d97706,#f59e0b)}
  .cat.k5{background:linear-gradient(135deg,#fbbf24,#fcd34d);color:var(--ink)}
  .cat.k6{background:linear-gradient(135deg,#9a3412,#c2410c)}
  @media(max-width:820px){.cats{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:440px){.cats{grid-template-columns:repeat(2,1fr);gap:11px}.cat{padding:18px 15px;min-height:120px}.cat h3{font-size:16px}}

  /* CATALOGUE */
  .filters{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
  .filter-btn{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:14.5px;padding:9px 18px;border:2.5px solid var(--line-strong);background:#fff;border-radius:999px;color:var(--ink-soft);cursor:pointer;transition:all .14s}
  .filter-btn:hover{border-color:var(--p1);color:var(--p1)}
  .filter-btn.active{background:var(--p1);border-color:var(--p1);color:#fff}
  .catalogue{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .card{background:#fff;border:3px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,border-color .15s,box-shadow .15s}
  .card:hover{transform:translateY(-5px);border-color:var(--p1);box-shadow:var(--shadow-soft)}
  .card-img{aspect-ratio:4/3;background:var(--surface);position:relative;overflow:hidden}
  .card-img img{transition:transform .4s}
  .card:hover .card-img img{transform:scale(1.06)}
  .card-tag{position:absolute;top:11px;left:11px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:12px;color:#fff;background:var(--p2);padding:5px 11px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
  .card-body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
  .card-body h3{font-size:17px;line-height:1.18;margin-bottom:7px}
  .card-body p{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-bottom:auto}
  .card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:8px}
  .price{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:16px;color:var(--p1)}
  .card-cta{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:13px;color:#fff;background:var(--p4);padding:8px 13px;border-radius:999px;white-space:nowrap;transition:background .15s}
  .card:hover .card-cta{background:var(--p1)}
  .cat-more{text-align:center;margin-top:38px}
  @media(max-width:1040px){.catalogue{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:760px){.catalogue{grid-template-columns:repeat(2,1fr);gap:14px}.card-body h3{font-size:15px}}
  @media(max-width:430px){.card-body{padding:12px 12px 14px}.card-cta{padding:7px 10px;font-size:12px}.card-body p{display:none}}

  /* HOW */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .step{background:#fff;border:3px solid var(--line);border-radius:20px;padding:26px 22px;text-align:center;position:relative}
  .step .num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:20px;color:#fff}
  .step:nth-child(1) .num{background:var(--p1)}.step:nth-child(2) .num{background:var(--p2)}
  .step:nth-child(3) .num{background:var(--p4)}.step:nth-child(4) .num{background:var(--p5)}
  .step h3{font-size:18px;margin-bottom:6px}
  .step p{font-size:14.5px;color:var(--ink-soft);font-weight:600}
  @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:440px){.steps{grid-template-columns:1fr}}

  /* WHY */
  .why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .wcard{background:#fff;border:3px solid var(--line);border-radius:20px;padding:24px;text-align:center}
  .wcard .wi{font-size:34px;margin-bottom:10px}
  .wcard h3{font-size:18px;margin-bottom:6px;color:var(--p1)}
  .wcard p{font-size:14.5px;color:var(--ink-soft);font-weight:600}
  @media(max-width:820px){.why{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.why{grid-template-columns:1fr}}

  /* GALLERY */
  .gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
  .gallery a{aspect-ratio:1;border-radius:16px;overflow:hidden;border:3px solid #fff;box-shadow:var(--shadow-soft)}
  .gallery a:nth-child(odd){transform:rotate(-2deg)}
  .gallery a:nth-child(even){transform:rotate(2deg)}
  .gallery a:hover{transform:rotate(0) scale(1.04);transition:transform .2s;z-index:2;position:relative}
  @media(max-width:880px){.gallery{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:480px){.gallery{grid-template-columns:repeat(3,1fr);gap:8px}}

  /* REVIEWS */
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .review{background:#fff;border:3px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column}
  .review .stars{color:var(--p3);font-size:17px;letter-spacing:2px;margin-bottom:12px}
  .review p{font-size:15.5px;color:var(--ink-soft);font-weight:600;margin-bottom:16px}
  .review .who{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:15px;margin-top:auto;color:var(--p1)}
  .review .who span{display:block;font-family:'Nunito';font-weight:700;font-size:13px;color:var(--ink-faint)}
  @media(max-width:820px){.reviews{grid-template-columns:1fr}}

  /* FAQ */
  .faq-wrap{max-width:820px;margin:0 auto}
  .faq-item{background:#fff;border:3px solid var(--line);border-radius:16px;margin-bottom:13px;overflow:hidden;transition:border-color .15s}
  .faq-item.open{border-color:var(--p1)}
  .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:19px 22px;font-family:'Archivo',system-ui,sans-serif;font-size:17.5px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq-q .pm{flex:none;width:26px;height:26px;border-radius:50%;background:var(--tint);position:relative;transition:background .2s}
  .faq-item.open .pm{background:var(--p1)}
  .faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--p1);border-radius:2px;transition:background .2s}
  .faq-item.open .pm::before,.faq-item.open .pm::after{background:#fff}
  .faq-q .pm::before{top:12px;left:6px;right:6px;height:2.5px}
  .faq-q .pm::after{left:12px;top:6px;bottom:6px;width:2.5px;transition:opacity .2s,background .2s}
  .faq-item.open .pm::after{opacity:0}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .faq-a p{padding:0 22px 20px;color:var(--ink-soft);font-size:15.5px;font-weight:600}

  /* CONTACT */
  .contact{background:linear-gradient(135deg,var(--p1),var(--p2));position:relative;overflow:hidden}
  .contact .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .contact h2{color:#fff;font-size:clamp(28px,4vw,42px)}
  .contact .lede{color:#fff1e2;font-size:17px;margin-top:12px;font-weight:600;max-width:40ch}
  .contact-list{margin-top:24px;display:flex;flex-direction:column;gap:11px}
  .contact-list a,.contact-list div{display:flex;gap:12px;align-items:center;font-size:16.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.13);border:2px solid rgba(255,255,255,.25);padding:13px 16px;border-radius:14px}
  .contact-list svg{width:20px;height:20px;flex:none;color:var(--p3)}
  form{background:#fff;border-radius:22px;padding:28px;box-shadow:var(--shadow-soft)}
  form .fld{margin-bottom:15px}
  form label{display:block;font-family:'Archivo',system-ui,sans-serif;font-size:14px;font-weight:700;color:var(--p1);margin-bottom:6px}
  form input,form textarea,form select{width:100%;font-family:inherit;font-size:15px;font-weight:600;padding:12px 13px;border:2px solid var(--line-strong);border-radius:12px;background:#fffaf3;color:var(--ink)}
  form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--p1)}
  form .btn{width:100%;justify-content:center;margin-top:4px}
  @media(max-width:820px){.contact .wrap{grid-template-columns:1fr;gap:30px}}

  /* FOOTER */
  footer{background:#2e1f16;color:#cbb9a8;font-weight:600}
  footer .wrap{padding:50px 24px 28px}
  .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-brand{display:flex;align-items:center;gap:10px;font-family:'Archivo',system-ui,sans-serif;color:#fff;font-weight:800;font-size:20px;margin-bottom:12px}
  .foot-brand .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--p1),var(--p2));display:grid;place-items:center;transform:rotate(-6deg)}
  .foot-brand .mark svg{width:22px;height:22px}
  .foot-brand img{width:auto;height:30px;object-fit:contain}
  .foot-col h4{font-family:'Archivo',system-ui,sans-serif;color:#fff;font-size:15px;margin-bottom:13px}
  .foot-col a{display:block;padding:5px 0;color:#cbb9a8;transition:color .15s}
  .foot-col a:hover{color:var(--p3)}
  .socials{display:flex;gap:10px;margin-top:14px}
  .socials a{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:background .15s}
  .socials a:hover{background:var(--p1)}
  .socials svg{width:19px;height:19px;color:#fff}
  .foot-bottom{display:flex;justify-content:space-between;gap:14px;padding-top:20px;font-size:13px;color:#9a8571;flex-wrap:wrap}
  @media(max-width:680px){.foot-top{grid-template-columns:1fr;gap:24px}}

  /* FLOATS */
  .wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .wa-float svg{width:32px;height:32px;color:#fff}
  .wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulse 2.2s infinite;opacity:.6}
  @keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
  .chat-btn{position:fixed;right:22px;bottom:92px;z-index:80;width:58px;height:58px;border-radius:50%;background:var(--p1);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer;border:none}
  .chat-btn svg{width:28px;height:28px;color:#fff}
  .chat-window{position:fixed;right:22px;bottom:160px;z-index:81;width:340px;max-width:calc(100vw - 32px);background:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.25);display:none;flex-direction:column;overflow:hidden;border:3px solid var(--p1)}
  .chat-window.open{display:flex}
  .chat-head{background:linear-gradient(135deg,var(--p1),var(--p2));color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
  .chat-head .ch-name{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:16px}
  .chat-head .ch-status{font-size:12px;color:#ffe3cc;display:flex;align-items:center;gap:6px}
  .chat-head .ch-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#7CFC9B}
  .chat-close{background:none;border:none;color:#fff;cursor:pointer;font-size:22px;line-height:1}
  .chat-body{padding:16px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
  .msg{font-size:14px;font-weight:600;padding:10px 13px;border-radius:13px;max-width:85%;line-height:1.5}
  .msg.bot{background:#fff;border:2px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
  .msg.user{background:var(--p1);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
  .chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--surface)}
  .chip{font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:700;border:2px solid var(--line-strong);background:#fff;color:var(--p1);padding:7px 12px;border-radius:999px;cursor:pointer;transition:all .14s}
  .chip:hover{background:var(--p1);color:#fff;border-color:var(--p1)}
  .chat-foot{padding:12px 16px;border-top:2px solid var(--line);background:#fff}
  .chat-wa{display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:14px;padding:11px;border-radius:12px}
  .chat-wa svg{width:18px;height:18px}
  @media(max-width:480px){.chat-window{bottom:158px}}

  [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}

  /* ---- multi-page additions ---- */

  /* The hero renders taller than its content ends, which left a band of bare
     photo below the wave. Pinning the wave to the hero's bottom edge means the
     photo can never show underneath it, whatever the copy length does. */
  .hero{padding-bottom:46px}
  .hero .wave{position:absolute;left:0;right:0;bottom:0;z-index:3}

  .page-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fb8f4a 0%,#f9671d 42%,#d24d0e 100%)}
  .page-hero .ph-bg{position:absolute;inset:0;z-index:0}
  /* Several source photos are portrait (1000x1500) and the banner is very
     wide, so cover was cropping away most of the frame. A taller banner drops
     the box ratio from 4.7 to about 4.0, and the offset favours the unit
     rather than sky above it or grass below. */
  .page-hero .ph-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
  .page-hero .ph-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,15,13,.86) 0%,rgba(24,20,17,.74) 38%,rgba(30,25,21,.46) 70%,rgba(38,31,26,.2) 100%)}
  .page-hero .wrap{position:relative;z-index:2;padding-top:76px;padding-bottom:80px}
  @media(max-width:700px){.page-hero .wrap{padding-top:52px;padding-bottom:56px}}
  .page-hero h1{font-size:clamp(30px,4.6vw,50px);color:#fff;text-shadow:0 3px 0 rgba(124,45,18,.32);max-width:20ch}
  .page-hero p{color:#fff1e2;font-weight:600;font-size:clamp(15px,1.8vw,18px);margin-top:14px;max-width:56ch}
  .crumb{font-size:13.5px;font-weight:700;color:#ffd9bb;margin-bottom:14px}
  .crumb a{color:#ffd9bb;text-decoration:underline;text-underline-offset:2px}
  .crumb span{opacity:.7;padding:0 6px}

  .unit-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
  @media(max-width:900px){.unit-grid{grid-template-columns:1fr;gap:24px}}
  .unit-shot{border-radius:20px;overflow:hidden;border:3px solid var(--line);box-shadow:var(--shadow-soft);aspect-ratio:4/3}
  .unit-body p{font-size:16.5px;color:var(--ink-soft);font-weight:600;margin-bottom:14px}
  .specs{width:100%;border-collapse:collapse;margin:6px 0 22px;background:#fff;border:3px solid var(--line);border-radius:16px;overflow:hidden}
  .specs th,.specs td{text-align:left;padding:11px 15px;font-size:15px;border-bottom:1px solid var(--line)}
  .specs tr:last-child th,.specs tr:last-child td{border-bottom:none}
  .specs th{font-family:'Archivo',system-ui,sans-serif;color:var(--p1-dark);width:40%;font-weight:700}
  .specs td{color:var(--ink-soft);font-weight:600}
  .unit-side{background:var(--surface);border:3px solid var(--line);border-radius:20px;padding:24px;position:sticky;top:96px}
  @media(max-width:900px){.unit-side{position:static}}
  .unit-side .price{font-size:26px;display:block;margin-bottom:4px}
  .unit-side .btn{width:100%;justify-content:center;margin-top:10px}
  .safety-box{background:#fff;border:3px solid var(--line-strong);border-radius:16px;padding:20px 22px;margin-top:26px}
  .safety-box h3{font-size:17px;color:var(--p1-dark);margin-bottom:10px}
  .safety-box ul{margin:0;padding-left:20px}
  .safety-box li{font-size:14.5px;color:var(--ink-soft);font-weight:600;margin-bottom:7px}

  .prose{max-width:760px;margin:0 auto}
  .prose h2{font-size:clamp(22px,3vw,30px);margin:30px 0 12px;color:var(--p1-dark)}
  .prose p,.prose li{font-size:16.5px;color:var(--ink-soft);font-weight:600;margin-bottom:13px}
  .prose ul{padding-left:22px}
  .note{background:var(--surface);border:3px dashed var(--line-strong);border-radius:16px;padding:18px 20px;font-size:15px;font-weight:600;color:var(--ink-soft)}

  .area-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
  .area-card{background:#fff;border:3px solid var(--line);border-radius:18px;padding:20px;transition:border-color .15s,transform .15s;display:block}
  .area-card:hover{border-color:var(--p1);transform:translateY(-3px)}
  .area-card h3{font-size:18px;color:var(--p1-dark);margin-bottom:5px}
  .area-card p{font-size:14px;color:var(--ink-soft);font-weight:600}

  /* ---- small differentiators from the shared house style ----
     Deliberately narrow: type, corner radius, the wave, and the gallery
     rotation. No grid, spacing or colour changes, so nothing can shift. */

  /* Archivo instead of Baloo 2, swapped at source above. This only tunes
     the weight and tracking. */
  h1,h2,h3,h4{font-weight:800}
  h1,h2{letter-spacing:-.02em}

  /* Logo sits larger inside the same 74px header. */
  .brand img{height:44px}
  @media(max-width:520px){.brand img{height:34px}}

  /* Get a quote on mobile. Once the nav links hide at 980px the header has
     three flex items left, and space-between pins the brand left, the burger
     right and strands the button in the middle. Push the brand left with an
     auto margin instead so the button and burger sit together on the right. */
  @media(max-width:980px){
    .nav .wrap{justify-content:flex-start;gap:10px}
    .brand{margin-right:auto}
    .nav-cta{padding:9px 15px;font-size:14px}}
  @media(max-width:420px){
    .nav .wrap{gap:8px}
    .nav-cta{padding:8px 12px;font-size:13px}}

  /* Slightly tighter corners than the house 18-20px. */
  .card,.cat,.wcard,.step,.review,.faq-item,.strip,.area-card,.safety-box,
  .specs,.unit-side,.unit-shot,form,.note,.chat-window{border-radius:12px}
  .card-img{border-radius:0}

  /* No scalloped divider. Hard edge with the brand rule instead. */
  .wave{display:none}
  .hero{padding-bottom:0;border-bottom:6px solid var(--p1)}
  .page-hero{border-bottom:6px solid var(--p1)}

  /* ---- how it works on mobile ----
     The base stylesheet drops these to a single column under 440px, which
     makes four tall stacked cards. Keep two per row and shrink them instead. */
  @media(max-width:820px){
    .steps{grid-template-columns:1fr 1fr;gap:14px}
    .step{padding:22px 16px}}
  @media(max-width:440px){
    .steps{grid-template-columns:1fr 1fr;gap:10px}
    .step{padding:16px 11px}
    .step .num{width:36px;height:36px;font-size:15px;margin-bottom:9px}
    .step h3{font-size:15px;margin-bottom:4px}
    .step p{font-size:12.5px;line-height:1.45}}

  /* ---- reviews ---- */
  .reviews{gap:18px}
  .review{background:#fff;border:2px solid var(--line);padding:30px 28px 26px;position:relative;
    overflow:hidden;transition:border-color .15s}
  .review:hover{border-color:var(--line-strong)}
  .review::before{content:'\201C';position:absolute;top:6px;right:20px;
    font-family:'Archivo',sans-serif;font-weight:800;font-size:96px;line-height:1;
    color:var(--p1);opacity:.09;pointer-events:none}
  .review .stars{color:var(--p3);font-size:15px;letter-spacing:3px;margin-bottom:15px}
  .review p{font-size:16.5px;line-height:1.62;color:var(--ink);font-weight:600;
    margin-bottom:22px;position:relative}
  .review .who{display:flex;align-items:center;gap:12px;margin-top:auto;
    padding-top:18px;border-top:2px solid var(--line);font-family:'Archivo',sans-serif;
    font-weight:800;font-size:15px;color:var(--ink)}
  .review .avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;
    place-items:center;background:var(--tint);color:var(--p1-dark);font-size:14.5px;
    letter-spacing:.02em}
  .review .who span{display:block;font-family:'Nunito',sans-serif;font-weight:700;
    font-size:13px;color:var(--ink-faint);margin-top:1px}

  /* Gallery tiles sit straight rather than alternating tilt. Also wider:
     the source photos are long landscape shots of 45ft and 60ft courses, and
     a square crop was throwing most of the unit away. 3:2 in four columns
     matches the photos and roughly doubles the tile size. */
  .gallery{grid-template-columns:repeat(4,1fr);gap:12px}
  .gallery a,.gallery a:nth-child(odd),.gallery a:nth-child(even){transform:none}
  .gallery a{aspect-ratio:3/2;border-radius:8px;overflow:hidden}
  .gallery a img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  .gallery a:hover{transform:scale(1.03)}
  @media(max-width:900px){.gallery{grid-template-columns:repeat(3,1fr);gap:10px}}
  @media(max-width:560px){.gallery{grid-template-columns:repeat(2,1fr);gap:8px}}

  /* ---- browse split: categories descending on the left, range on the right.
     Replaces the separate 6-tile category grid and the centred pill row. ---- */
  /* Two explicit rows: headings in row 1, content in row 2. Row 1 takes the
     height of the taller heading block, so the first tile and the first card
     always start on the same line without any magic offsets. */
  .browse{display:grid;grid-template-columns:280px 1fr;column-gap:36px;row-gap:0;
    align-items:start}
  .browse-head-l{grid-column:1;grid-row:1}
  .browse-head-r{grid-column:2;grid-row:1}
  .browse-nav{grid-column:1;grid-row:2;align-self:stretch}
  .browse-main{grid-column:2;grid-row:2;align-self:stretch;display:flex;flex-direction:column}
  .browse-head-l h2,.browse-head-r h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
  .browse-head-r .lede{color:var(--ink-soft);font-weight:600;font-size:16px;margin-bottom:10px}
  .browse-head-r .filters{justify-content:flex-start;margin-bottom:0}

  /* All six tiles stack down the column and divide the height of the card
     grid beside them, so the two columns finish on the same line. */
  .browse-nav .cats{grid-template-columns:1fr;grid-auto-rows:1fr;gap:12px;height:100%}
  .browse-nav .cat{min-height:84px;padding:15px 18px;justify-content:center}
  .browse-nav .cat h3{font-size:17px}
  .browse-nav .cat span{font-size:12.5px}
  .browse-main .catalogue{grid-template-columns:repeat(3,1fr)}
  /* the grid is cropped to two rows until View all is pressed */
  .browse-main .catalogue.cropped .card:nth-child(n+7){display:none}
  .browse-all{margin-top:20px;display:flex;justify-content:center}
  .browse-all .btn{min-width:240px;justify-content:center}

  @media(max-width:1100px){.browse{grid-template-columns:230px 1fr;column-gap:26px}
    .browse-main .catalogue{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:900px){
    .browse{grid-template-columns:1fr;row-gap:22px}
    .browse-head-l{grid-row:1}.browse-nav{grid-row:2}
    .browse-head-r{grid-row:3}.browse-main{grid-row:4}
    .browse-nav .cats{height:auto;grid-auto-rows:auto}
    .browse-head-l,.browse-head-r,.browse-nav,.browse-main{grid-column:1}
    .browse-nav .cats{grid-template-columns:1fr 1fr;gap:11px}
    .browse-main .catalogue{grid-template-columns:repeat(2,1fr);gap:14px}}
  @media(max-width:440px){.browse-nav .cats{grid-template-columns:1fr}}