/* Atlantic Palms — shared styles for hand-built pages (legal, contact, rooms).
   Brand: navy #12213f, Lato headings / Inter body, matching the main site.     */
:root{
  --ap-navy:#12213f; --ap-navy-soft:#1b2f52; --ap-ink:#222736; --ap-muted:#5b6478;
  --ap-line:#e2e7ef; --ap-bg:#ffffff; --ap-bg-alt:#f6f7fb; --ap-accent:#b9985a;
  --ap-max:860px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ap-bg);color:var(--ap-ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}

/* header */
.ap-head{position:sticky;top:0;z-index:9000;background:var(--ap-navy);
  box-shadow:0 2px 18px rgba(0,0,0,.22)}
.ap-head-in{max-width:1180px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.ap-logo img{display:block;height:52px;width:auto}
.ap-nav{display:flex;gap:26px;align-items:center}
.ap-nav a{color:#fff;text-decoration:none;font-family:Lato,sans-serif;font-size:15px;
  font-weight:300;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:8px 0;transition:opacity .15s}
.ap-nav a:hover{opacity:.7}
.ap-burger{display:none;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;background:none;border:0;color:#fff;cursor:pointer}
@media(max-width:900px){
  .ap-nav{display:none} .ap-burger{display:flex}
  .ap-nav.ap-open{display:flex;position:fixed;inset:0;background:var(--ap-navy);
    flex-direction:column;align-items:flex-start;gap:0;padding:84px 28px;overflow-y:auto;z-index:9500}
  .ap-nav.ap-open a{width:100%;padding:18px 2px;font-size:17px;
    border-bottom:1px solid rgba(255,255,255,.15)}
  .ap-close{position:fixed;top:14px;right:16px;min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;background:none;border:0;
    color:#fff;font-size:30px;cursor:pointer;z-index:9600}
}

/* page body */
.ap-hero{background:var(--ap-bg-alt);border-bottom:1px solid var(--ap-line);
  padding:54px 20px 44px;text-align:center}
.ap-hero h1{margin:0 0 10px;font-family:Lato,sans-serif;font-weight:300;
  letter-spacing:.04em;font-size:clamp(28px,4.4vw,42px);color:var(--ap-navy)}
.ap-hero p{margin:0;color:var(--ap-muted);font-size:15px}
.ap-wrap{max-width:var(--ap-max);margin:0 auto;padding:44px 20px 72px}
.ap-wrap h2{font-family:Lato,sans-serif;font-weight:400;color:var(--ap-navy);
  font-size:23px;margin:38px 0 12px;letter-spacing:.01em}
.ap-wrap h3{font-size:17px;margin:26px 0 8px;color:var(--ap-navy)}
.ap-wrap p,.ap-wrap li{color:#39404f}
.ap-wrap ul,.ap-wrap ol{padding-left:22px}
.ap-wrap li{margin:6px 0}
.ap-wrap a{color:var(--ap-navy);text-underline-offset:3px}
table.ap-t{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
table.ap-t th,table.ap-t td{border:1px solid var(--ap-line);padding:10px 12px;
  text-align:left;vertical-align:top}
table.ap-t th{background:var(--ap-bg-alt);font-weight:600;color:var(--ap-navy)}
.ap-note{background:#fff8e6;border:1px solid #f0dca8;border-left:4px solid var(--ap-accent);
  border-radius:6px;padding:16px 18px;margin:26px 0;font-size:15px}
.ap-note strong{color:#7a5c17}
.ap-todo{background:#fdecec;border:1px solid #f5c2c2;border-left:4px solid #c0392b;
  border-radius:6px;padding:14px 16px;margin:20px 0;font-size:14.5px}
.ap-todo strong{color:#9b2c20}
.ap-meta{color:var(--ap-muted);font-size:14px;border-top:1px solid var(--ap-line);
  margin-top:44px;padding-top:18px}

/* footer */
.ap-foot{background:var(--ap-navy);color:#c9d2e2;padding:44px 20px 34px;font-size:14.5px}
.ap-foot-in{max-width:1180px;margin:0 auto;display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ap-foot h4{color:#fff;font-family:Lato,sans-serif;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;font-size:13px;margin:0 0 10px}
.ap-foot a{color:#c9d2e2;text-decoration:none}
.ap-foot a:hover{color:#fff;text-decoration:underline}
.ap-foot-bot{max-width:1180px;margin:30px auto 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:13px;color:#9fb0c9}
.ap-foot-bot nav{display:flex;gap:18px;flex-wrap:wrap}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.ap-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 30px;border-radius:4px;border:1px solid var(--ap-navy);
  background:var(--ap-navy);color:#fff!important;text-decoration:none;cursor:pointer;
  font-family:Lato,sans-serif;font-size:14px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;transition:background .18s,color .18s,transform .18s}
.ap-btn:hover{background:var(--ap-navy-soft);transform:translateY(-1px)}
.ap-btn-ghost{background:transparent;color:var(--ap-navy)!important}
.ap-btn-ghost:hover{background:var(--ap-navy);color:#fff!important}
.ap-btn-gold{background:var(--ap-accent);border-color:var(--ap-accent)}
.ap-btn-gold:hover{background:#a8873f;border-color:#a8873f}
.ap-cta-bar{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:26px 0 0}

/* ── room grid & detail ──────────────────────────────────────────────────── */
.ap-grid{max-width:1180px;margin:0 auto;padding:44px 20px 72px;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ap-card{border:1px solid var(--ap-line);border-radius:10px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.ap-card:hover{box-shadow:0 10px 30px rgba(18,33,63,.13);transform:translateY(-2px)}
.ap-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--ap-bg-alt)}
.ap-card-b{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.ap-card-b h3{margin:0 0 4px;font-family:Lato,sans-serif;font-weight:400;font-size:21px;color:var(--ap-navy)}
.ap-kicker{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ap-accent);
  font-weight:700;margin-bottom:9px}
.ap-facts{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.ap-facts li{background:var(--ap-bg-alt);border:1px solid var(--ap-line);border-radius:20px;
  padding:4px 12px;font-size:12.5px;color:var(--ap-muted)}
.ap-card p{margin:0 0 18px;font-size:14.5px;color:#4a5261;flex:1}
.ap-card .ap-btn{width:100%;font-size:12.5px;padding:11px 18px;min-height:44px}
.ap-room-hero img{width:100%;max-height:520px;object-fit:cover;display:block}
.ap-room-wrap{max-width:900px;margin:0 auto;padding:38px 20px 70px}
.ap-room-wrap .ap-facts{margin-bottom:22px}
.ap-back{display:inline-block;margin-bottom:18px;font-size:14px;color:var(--ap-muted);text-decoration:none}
.ap-back:hover{color:var(--ap-navy)}

/* ── menus ───────────────────────────────────────────────────────────────── */
.ap-menu-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:22px 20px 0;max-width:1180px;margin:0 auto}
.ap-menu-nav a{padding:10px 20px;border:1px solid var(--ap-line);border-radius:30px;
  text-decoration:none;color:var(--ap-navy);font-size:13.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.ap-menu-nav a:hover{background:var(--ap-navy);color:#fff;border-color:var(--ap-navy)}
.ap-menu{max-width:940px;margin:0 auto;padding:12px 20px 70px}
.ap-menu section{margin-top:52px;scroll-margin-top:96px}
.ap-menu h2{text-align:center;font-family:Lato,sans-serif;font-weight:300;letter-spacing:.06em;
  text-transform:uppercase;font-size:clamp(22px,3.4vw,30px);color:var(--ap-navy);
  margin:0 0 6px;border:0}
.ap-menu .ap-sub{text-align:center;color:var(--ap-muted);font-size:14px;margin:0 0 26px}
.ap-items{display:grid;gap:22px 40px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.ap-item{border-bottom:1px dotted var(--ap-line);padding-bottom:14px}
.ap-item-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.ap-item-h h4{margin:0;font-size:15.5px;font-weight:700;color:var(--ap-navy);
  letter-spacing:.02em;text-transform:uppercase}
.ap-price{font-weight:700;color:var(--ap-accent);white-space:nowrap;font-size:15px}
.ap-item p{margin:5px 0 0;font-size:14px;color:#565e6e;line-height:1.55}
.ap-chips{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.ap-chips li{background:var(--ap-bg-alt);border:1px solid var(--ap-line);border-radius:16px;
  padding:3px 11px;font-size:12.5px;color:#4a5261}
.ap-hours{background:var(--ap-bg-alt);border:1px solid var(--ap-line);border-radius:10px;
  padding:18px 22px;margin:34px 0 0;display:flex;gap:26px;flex-wrap:wrap;justify-content:center;
  font-size:14.5px}
.ap-hours b{color:var(--ap-navy)}

/* ── forms ───────────────────────────────────────────────────────────────── */
.ap-form{max-width:720px;margin:0 auto;padding:38px 20px 72px}
.ap-field{margin-bottom:20px}
.ap-field label{display:block;font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ap-navy);margin-bottom:7px}
.ap-field input,.ap-field textarea,.ap-field select{width:100%;padding:13px 14px;
  border:1px solid var(--ap-line);border-radius:6px;font:inherit;font-size:15.5px;
  background:#fff;color:var(--ap-ink);min-height:48px}
.ap-field textarea{min-height:130px;resize:vertical}
.ap-field input:focus,.ap-field textarea:focus,.ap-field select:focus{
  outline:0;border-color:var(--ap-navy);box-shadow:0 0 0 3px rgba(18,33,63,.10)}
.ap-choices{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ap-choice{position:relative}
.ap-choice input{position:absolute;opacity:0;width:0;height:0}
.ap-choice span{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 16px;
  border:1px solid var(--ap-line);border-radius:8px;cursor:pointer;font-size:14.5px;
  transition:border-color .15s,background .15s}
.ap-choice span::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;
  border:2px solid #c2cad8;transition:border-color .15s,box-shadow .15s}
.ap-choice input:checked+span{border-color:var(--ap-navy);background:#f4f7fc}
.ap-choice input:checked+span::before{border-color:var(--ap-navy);
  box-shadow:inset 0 0 0 4px var(--ap-navy)}
.ap-choice input:focus-visible+span{box-shadow:0 0 0 3px rgba(18,33,63,.16)}
.ap-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ap-form-note{font-size:13.5px;color:var(--ap-muted);margin-top:14px}
.ap-alert{display:none;border-radius:8px;padding:14px 16px;margin-bottom:20px;font-size:14.5px}
.ap-alert.ok{display:block;background:#eaf7ee;border:1px solid #b9e3c6;color:#1d6b34}
.ap-alert.err{display:block;background:#fdecec;border:1px solid #f5c2c2;color:#9b2c20}

/* two-button card CTA */
.ap-card-cta{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ap-card-cta .ap-btn{width:100%;font-size:12px;padding:11px 8px;min-height:46px;letter-spacing:.06em}
@media(max-width:360px){.ap-card-cta{grid-template-columns:1fr}}

/* ── photo gallery / lightbox ─────────────────────────────────────────────── */
.ap-gal-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:26px 20px 0;
  max-width:1180px;margin:0 auto}
.ap-gal-tabs button{padding:11px 22px;border:1px solid var(--ap-line);border-radius:30px;
  background:#fff;color:var(--ap-navy);font-family:Lato,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;min-height:44px;
  transition:background .15s,color .15s,border-color .15s}
.ap-gal-tabs button:hover{border-color:var(--ap-navy)}
.ap-gal-tabs button[aria-selected="true"]{background:var(--ap-navy);color:#fff;border-color:var(--ap-navy)}
.ap-gal{max-width:1180px;margin:0 auto;padding:26px 20px 70px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ap-gal figure{margin:0;border-radius:10px;overflow:hidden;background:var(--ap-bg-alt);
  cursor:zoom-in;position:relative;aspect-ratio:4/3}
.ap-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.ap-gal figure:hover img{transform:scale(1.05)}
.ap-room-photos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:10px 0 0}
.ap-room-photos figure{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/3;cursor:zoom-in;background:var(--ap-bg-alt)}
.ap-room-photos img{width:100%;height:100%;object-fit:cover;display:block}
.ap-lb{position:fixed;inset:0;background:rgba(8,14,28,.94);z-index:99999;display:none;
  align-items:center;justify-content:center;padding:20px}
.ap-lb.open{display:flex}
.ap-lb img{max-width:96vw;max-height:86vh;object-fit:contain;border-radius:6px}
.ap-lb figcaption{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#dbe3f0;
  font-size:14px;padding:0 20px}
.ap-lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  width:52px;height:52px;border-radius:50%;font-size:26px;cursor:pointer;line-height:1}
.ap-lb .lb-x{top:18px;right:18px}
.ap-lb .lb-p{left:14px;top:50%;transform:translateY(-50%)}
.ap-lb .lb-n{right:14px;top:50%;transform:translateY(-50%)}
.ap-lb button:hover{background:rgba(255,255,255,.24)}
.ap-disclaimer{background:var(--ap-bg-alt);border:1px solid var(--ap-line);border-left:3px solid var(--ap-accent);
  border-radius:6px;padding:12px 15px;margin:22px 0 0;font-size:13.5px;color:var(--ap-muted)}

/* ── nav dropdown ─────────────────────────────────────────────────────────── */
.ap-drop{position:relative;display:flex;align-items:center}
.ap-drop-t{display:inline-flex!important;align-items:center;gap:6px}
.ap-drop-m{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border-radius:10px;box-shadow:0 12px 34px rgba(10,20,40,.22);
  padding:8px;min-width:210px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;
  z-index:9200}
.ap-drop:hover .ap-drop-m,.ap-drop:focus-within .ap-drop-m{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ap-drop-m a{display:block;color:var(--ap-navy)!important;padding:11px 14px;border-radius:6px;
  font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;min-height:44px;
  display:flex;align-items:center}
.ap-drop-m a:hover{background:var(--ap-bg-alt)}
@media(max-width:900px){
  /* collapsible sections — the desktop popup styling must be fully reset here,
     otherwise its border-radius/padding paint an empty box in the drawer */
  .ap-drop{display:block;width:100%}
  .ap-drop-t{width:100%;padding:18px 2px!important;
    border-bottom:1px solid rgba(255,255,255,.15);justify-content:space-between}
  .ap-drop-t svg{transition:transform .22s}
  .ap-drop.open .ap-drop-t svg{transform:rotate(180deg)}
  .ap-drop-m{position:static!important;transform:none!important;opacity:1!important;
    visibility:visible!important;background:transparent!important;box-shadow:none!important;
    border-radius:0!important;padding:0!important;margin:0!important;min-width:0!important;
    display:none}
  .ap-drop.open .ap-drop-m{display:block}
  .ap-drop-m a{color:#fff!important;font-size:15px;opacity:.8;padding:15px 2px 15px 18px!important;
    border-bottom:1px solid rgba(255,255,255,.10);min-height:48px}
}

/* drinks sub-sections */
.ap-menu-h3{font-family:Lato,sans-serif;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  font-size:19px;color:var(--ap-navy);margin:34px 0 4px;padding-bottom:8px;
  border-bottom:1px solid var(--ap-line)}
.ap-wine-group{margin-top:22px}
.ap-wine-h{margin:0 0 8px;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ap-accent);font-weight:700}

/* footer column labels (not headings — they are navigation labels) */
.ap-foot-h{color:#fff;font-family:Lato,sans-serif;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;font-size:13px;margin:0 0 10px}
/* menu item names are h3 now; keep the visual weight identical */
.ap-item-h h3{margin:0;font-size:15.5px;font-weight:700;color:var(--ap-navy);
  letter-spacing:.02em;text-transform:uppercase}
.ap-card-t{margin:0 0 4px;font-family:Lato,sans-serif;font-weight:400;font-size:21px;color:var(--ap-navy)}

/* ── home ─────────────────────────────────────────────────────────────────── */
.ap-home-hero{position:relative;min-height:min(78vh,620px);display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:#0b1424}
.ap-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.ap-hero-in{position:relative;z-index:2;text-align:center;padding:60px 22px;max-width:900px}
.ap-hero-in h1{color:#fff;font-family:Lato,sans-serif;font-weight:300;line-height:1.2;
  font-size:clamp(28px,5vw,52px);margin:0 0 26px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.ap-btn.ap-on-dark{color:#fff!important;border-color:#fff}
.ap-btn.ap-on-dark:hover{background:#fff;color:var(--ap-navy)!important}
.ap-band{background:var(--ap-bg-alt);border-block:1px solid var(--ap-line)}
.ap-amens{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:26px}
.ap-amen{text-align:center}
.ap-amen img{width:66px;height:66px;object-fit:contain;margin:0 auto 12px;display:block}
.ap-amen h3{margin:0 0 6px;font-family:Lato,sans-serif;font-weight:400;font-size:18px;color:var(--ap-navy)}
.ap-amen p{margin:0;font-size:14.5px;color:var(--ap-muted)}
.ap-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.ap-split-img img{width:100%;height:100%;max-height:520px;object-fit:cover;display:block}
.ap-split-txt{padding:48px clamp(22px,5vw,64px)}
.ap-split-txt h2{margin-top:0}
@media(max-width:820px){.ap-split{grid-template-columns:1fr}.ap-split-txt{padding:34px 22px}}
/* FAQ accordion */
.ap-faqs{margin-top:22px}
.ap-faq{border-bottom:1px solid var(--ap-line);background:#fff;border-radius:8px;margin-bottom:8px;
  border:1px solid var(--ap-line)}
.ap-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;padding:18px 20px;min-height:56px;cursor:pointer;text-align:left;
  font-family:Inter,sans-serif;font-size:16px;font-weight:600;color:var(--ap-navy)}
.ap-faq-q svg{flex:none;transition:transform .22s}
.ap-faq-q[aria-expanded="true"] svg{transform:rotate(180deg)}
.ap-faq-a{display:none;padding:0 20px 18px}
.ap-faq-a p{margin:0;color:#4a5261;font-size:15.5px}
.ap-faq.open .ap-faq-a{display:block}
/* guest services / specials cards */
.ap-tiles{max-width:1100px;margin:0 auto;padding:44px 20px 70px;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ap-tile{border:1px solid var(--ap-line);border-radius:12px;padding:34px 26px;text-align:center;
  background:#fff;transition:box-shadow .2s,transform .2s}
.ap-tile:hover{box-shadow:0 10px 30px rgba(18,33,63,.12);transform:translateY(-2px)}
.ap-tile img{width:74px;height:74px;object-fit:contain;margin:0 auto 16px;display:block}
.ap-tile h2{margin:0 0 8px;font-size:20px}
.ap-tile p{color:var(--ap-muted);font-size:14.5px;margin:0 0 18px}
.ap-offer{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ap-line);
  border-radius:12px;overflow:hidden;margin-bottom:28px;background:#fff}
.ap-offer img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}
.ap-offer-b{padding:34px clamp(22px,4vw,42px)}
.ap-offer-b h2{margin-top:0}
@media(max-width:760px){.ap-offer{grid-template-columns:1fr}}
/* alternating split rows (hotel page) */
.ap-split-rev .ap-split-img{order:2}
.ap-split-rev .ap-split-txt{order:1}
@media(max-width:820px){.ap-split-rev .ap-split-img{order:1}.ap-split-rev .ap-split-txt{order:2}}

/* ── language switcher (GTranslate) ───────────────────────────────────────── */
.gt_switcher_wrapper,.gtranslate_wrapper{z-index:8000!important}
.gtranslate_wrapper .gt_white_content{border:0!important;border-radius:10px!important;
  box-shadow:0 6px 24px rgba(0,0,0,.18)!important;overflow:hidden!important;background:#fff!important}
.gtranslate_wrapper a.glink{font-family:Lato,sans-serif!important;font-size:13px!important;
  font-weight:600!important;letter-spacing:.03em!important;text-transform:uppercase!important;
  color:var(--ap-navy)!important;text-decoration:none!important;padding:9px 14px!important;
  display:flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;
  transition:background-color .15s ease!important}
.gtranslate_wrapper a.glink:hover{background:#f2f5fa!important}
.gtranslate_wrapper a.glink img{width:20px!important;height:20px!important;border-radius:3px!important;
  margin:0!important;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.gtranslate_wrapper a.glink.gt-current-lang{background:var(--ap-navy)!important;color:#fff!important;
  border-radius:10px!important}
/* Google's injected banner shifts the whole page — suppress it */
.skiptranslate iframe{display:none!important}
body{top:0!important;position:static!important}
.ap-req{color:#c0392b;font-weight:700}

/* photo hero — white text over the darkened image */
.ap-hero-photo{background-size:cover;background-position:center;border-bottom:0;
  padding:86px 20px 76px}
.ap-hero-photo h1{color:#fff!important;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.ap-hero-photo p{color:rgba(255,255,255,.95)!important;text-shadow:0 1px 14px rgba(0,0,0,.5)}

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM PASS — restores the original site's design language:
   Playfair Display headings, 600px photographic headers, the Table
   Mountain rule, gold-framed imagery and landscape room cards.
   Appended last so these rules win the cascade without editing earlier
   blocks (Vue-safe: styling only, no DOM changes).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ap-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --ap-gold:#b8975a;
}

/* ── Display typography ─────────────────────────────────────────────── */
.ap-hero h1,.ap-hero-in h1,
.ap-wrap h2,.ap-sec h2,.ap-card-t,.ap-foot-h,.ap-tile h2{
  font-family:var(--ap-display);
  font-weight:500;
  letter-spacing:.005em;
}
.ap-wrap h2,.ap-sec h2{
  font-size:clamp(26px,3vw,38px);
  line-height:1.18;
  color:var(--ap-navy);
  margin:52px 0 18px;
}
.ap-card-t{font-size:22px;font-weight:500;letter-spacing:0}
.ap-foot-h{font-family:Lato,sans-serif}      /* footer labels stay small-caps sans */

/* ── Header band: the original inner-page banner was 600px ──────────── */
.ap-hero-photo{
  position:relative;
  min-height:clamp(340px,44vw,600px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
}
.ap-hero-photo h1{
  position:relative;z-index:2;
  font-size:clamp(34px,5.2vw,62px);
  font-weight:400;
  line-height:1.1;
  margin:0 0 14px;
}
.ap-hero-photo p{
  position:relative;z-index:2;
  font-size:clamp(15px,1.5vw,19px);
  max-width:640px;margin:0 auto;
}
/* thin gold rule under the header title, as on the original */
.ap-hero-photo h1::after{
  content:"";display:block;width:74px;height:2px;
  background:var(--ap-gold);margin:20px auto 0;opacity:.95;
}

/* ── Table Mountain rule above section headings ─────────────────────── */
.ap-mount{
  display:block;width:190px;height:auto;margin:0 auto 6px;
  opacity:.5;
}
.ap-sec-head{text-align:center;margin:64px 0 30px}
.ap-sec-head h2{margin:0}

/* ── Room cards: landscape imagery, single-line facts ───────────────── */
/* height:auto is REQUIRED — the <img height="675"> attribute gives the element a
   definite height, and aspect-ratio is ignored unless one axis is auto. Without
   it the landscape photos render as tall portrait crops. */
.ap-card img{aspect-ratio:3/2!important;height:auto!important;object-fit:cover;object-position:center}
/* Room facts, as on the original: one icon-led line each, at readable size.
   Stacked rather than run-on so the longer bathroom label cannot wrap badly. */
.ap-facts{display:block!important;list-style:none;margin:0 0 18px;padding:0}
.ap-facts li{
  display:flex!important;align-items:center;gap:10px;
  background:none!important;border:0!important;border-radius:0!important;
  padding:4px 0!important;margin:0;
  font-size:16.5px;color:var(--ap-navy);line-height:1.45}
.ap-facts li svg{flex:none;color:var(--ap-navy);opacity:.85}
.ap-facts li span{font-size:inherit;color:inherit}

/* ── Gold-framed imagery (the padded look from the original) ────────── */
.ap-framed{
  padding:10px;border:1px solid var(--ap-gold);background:#fff;
  border-radius:2px;
}
.ap-framed img{display:block;width:100%;height:auto}

/* ── Footer logo ────────────────────────────────────────────────────── */
.ap-foot-logo{
  display:block;width:auto;height:64px;margin:0 0 16px;
  filter:brightness(0) invert(1);opacity:.95;
}

/* ── Guest information: numeric tables ──────────────────────────────── */
.ap-t-num td:last-child{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ap-t-num th{font-weight:600}
.ap-lede{color:var(--ap-muted);font-size:15px;margin:0 0 16px;max-width:62ch}

@media(max-width:700px){
  .ap-hero-photo{min-height:300px;padding:32px 18px}
  .ap-hero-photo h1::after{margin-top:14px}
  .ap-mount{width:140px}
  .ap-foot-logo{height:52px}
  .ap-t-num td:last-child{text-align:left}
}

/* ── Contact page: details first, then the form ──────────────────────── */
.ap-contact-block{margin:0 0 34px}
.ap-contact-block h2{margin:0 0 20px}
.ap-contact-list{margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--ap-line)}
.ap-contact-list>div{display:grid;grid-template-columns:150px 1fr;gap:18px;
  align-items:baseline;padding:16px 2px;border-bottom:1px solid var(--ap-line)}
.ap-contact-list dt{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ap-navy)}
.ap-contact-list dd{margin:0;font-size:16px;color:#3c4453;line-height:1.7}
/* links read as text, not default browser blue */
.ap-contact-list a{color:var(--ap-navy);text-decoration:none;
  border-bottom:1px solid rgba(24,42,74,.28)}
.ap-contact-list a:hover{border-bottom-color:var(--ap-gold);color:var(--ap-gold)}
.ap-wa{margin-left:14px;font-size:13px;padding:3px 11px;border:1px solid var(--ap-line)!important;
  border-radius:20px;color:var(--ap-muted)!important;white-space:nowrap}
.ap-wa:hover{border-color:var(--ap-gold)!important;color:var(--ap-gold)!important}

.ap-contact-more{margin:0 0 38px;padding:16px 18px;background:var(--ap-bg-alt);
  border-left:2px solid var(--ap-gold);font-size:15px;color:#3c4453}
.ap-contact-more a{color:var(--ap-navy);font-weight:600}
.ap-form-h{margin:0 0 6px!important}

@media(max-width:620px){
  .ap-contact-list>div{grid-template-columns:1fr;gap:4px;padding:14px 2px}
  .ap-wa{margin-left:0;display:inline-block;margin-top:8px}
}

/* room detail title — matches the site's display face */
.ap-room-t{font-family:var(--ap-display);font-weight:500;
  font-size:clamp(28px,4vw,42px);line-height:1.15;
  color:var(--ap-navy);margin:2px 0 14px}

/* ── Header actions: language + persistent Book control ──────────────── */
.ap-head-in{gap:12px}
.ap-head-act{display:flex;align-items:center;gap:14px;margin-left:auto}
.ap-book-btn{padding:10px 22px;font-size:12.5px;letter-spacing:.1em;min-height:0;
  white-space:nowrap}
/* the language widget sits inline in the bar, not floating bottom-left */
.ap-lang{position:static!important;display:inline-flex;align-items:center}
/* GTranslate renders in "popup" mode here: the header trigger is
   a.gt_switcher-popup, and the language list is a separate .gt_white_content
   modal on a WHITE background. Only the trigger sits on navy — scope the
   white text to it with > so the modal keeps its own dark-on-white colours. */
.ap-lang > .gt_switcher-popup{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;padding:6px 2px;min-height:34px}
.ap-lang > .gt_switcher-popup,
.ap-lang > .gt_switcher-popup span{
  color:#fff!important;font-size:13px!important;letter-spacing:.06em}
/* the caret carries an inline style (color:#666;font-size:8px) — override it */
.ap-lang > .gt_switcher-popup span:last-child{
  color:rgba(255,255,255,.7)!important;font-size:10px!important;line-height:1}
.ap-lang > .gt_switcher-popup:hover span{color:var(--ap-gold)!important}
.ap-lang > .gt_switcher-popup img{vertical-align:middle;width:20px;height:20px}

@media(max-width:900px){
  /* keep Book reachable on mobile; language moves into the open menu */
  .ap-head-act{gap:8px;margin-left:0}
  .ap-book-btn{padding:9px 16px;font-size:11.5px}
  /* the widget lives in .ap-head-act, NOT inside .ap-nav — hiding it here made
     it unreachable on phones. Keep it in the bar, compacted to flag + caret. */
  .ap-lang{display:inline-flex}
  .ap-lang > .gt_switcher-popup{gap:5px;padding:6px 0}
  .ap-lang > .gt_switcher-popup span:not(:last-child){
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
}

/* ═══ New home sections: availability, awards, experiences, offer teasers ═══ */

/* availability panel sits tight under the hero */
.ap-avail{background:var(--ap-navy);padding:22px 20px 26px}
.ap-avail .be-panel{max-width:1180px;margin:0 auto}
.ap-avail-note{max-width:1180px;margin:14px auto 0;text-align:center;
  color:rgba(255,255,255,.72);font-size:13.5px;letter-spacing:.02em}
/* The booking panel is styled in the Profitroom back end — no colour overrides
   here, so whatever is configured there is exactly what renders. */

/* awards row, directly above the reviews */
.ap-awards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 0}
.ap-award{border:1px solid var(--ap-line);border-top:2px solid var(--ap-gold);
  padding:20px 18px;text-align:center;background:#fff}
.ap-award b{display:block;font-family:var(--ap-display);font-weight:500;
  font-size:19px;color:var(--ap-navy);margin-bottom:5px}
.ap-award span{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ap-muted)}

/* experiences */
.ap-exps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px}
.ap-exp h3{font-family:var(--ap-display);font-weight:500;font-size:21px;
  color:var(--ap-navy);margin:0 0 8px}
.ap-exp h3::after{content:"";display:block;width:34px;height:1px;
  background:var(--ap-gold);margin-top:10px}
.ap-exp p{margin:0;font-size:15px;color:#4a5261;line-height:1.7}

/* offer teasers */
.ap-offers-mini{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ap-offer-mini{background:#fff;border:1px solid var(--ap-line);overflow:hidden;
  display:flex;flex-direction:column}
.ap-offer-mini img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;display:block}
.ap-offer-mini-b{padding:22px 24px 26px}
.ap-offer-mini-b h3{font-family:var(--ap-display);font-weight:500;font-size:24px;
  color:var(--ap-navy);margin:4px 0 16px}

@media(max-width:900px){
  .ap-awards{grid-template-columns:1fr;gap:12px}
  .ap-exps{grid-template-columns:1fr 1fr;gap:22px}
  .ap-offers-mini{grid-template-columns:1fr}
  .ap-avail{padding:16px 14px 20px}
}
@media(max-width:600px){ .ap-exps{grid-template-columns:1fr} }

/* ── About, on the Hotel page: copy + logo beside framed imagery ─────── */
.ap-about-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;
  max-width:1180px;margin:0 auto;padding:64px 20px 20px;align-items:start}
.ap-about-logo{display:block;width:min(340px,80%);height:auto;margin:10px 0 18px}
.ap-about-txt h2{margin:0 0 18px}
.ap-about-txt p{font-size:15.5px;line-height:1.85;color:#4a5261;margin:0 0 15px}
.ap-about-img{display:grid;gap:18px}
@media(max-width:900px){
  .ap-about-split{grid-template-columns:1fr;gap:30px;padding:40px 18px 10px}
  .ap-about-logo{width:min(260px,70%)}
}
.ap-faq-cat{font-family:Lato,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ap-gold);margin:30px 0 10px}
.ap-faq-cat:first-of-type{margin-top:14px}

/* ── Guest reviews, rendered natively (no third-party bundle) ────────── */
.ap-rating-sum{text-align:center;margin:22px 0 30px}
.ap-rating-sum b{font-family:var(--ap-display);font-size:44px;font-weight:500;
  color:var(--ap-navy);display:block;line-height:1}
.ap-rating-sum span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ap-muted)}
/* Horizontal carousel: native scroll-snap, so touch swipe and keyboard both
   work with no library. Arrows page it on desktop. */
.ap-reviews-wrap{position:relative;margin-top:6px}
.ap-reviews{
  display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;
  /* proximity, not mandatory: mandatory re-snaps on every animation frame,
     which pins the track at 0 and makes the arrows appear dead. */
  scroll-snap-type:x proximity;
  /* NO scroll-behavior:smooth here — combined with mandatory snap it
     cancels programmatic scrollBy(). The arrows pass behavior:'smooth'. */
  padding:4px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.ap-reviews::-webkit-scrollbar{display:none}
.ap-reviews:focus-visible{outline:2px solid var(--ap-gold);outline-offset:4px}
.ap-review{
  margin:0;background:#fff;border:1px solid var(--ap-line);
  padding:20px 22px 16px;display:flex;flex-direction:column;
  flex:0 0 320px;scroll-snap-align:start;min-height:0}
.ap-review-stars{color:var(--ap-gold);font-size:14px;letter-spacing:2px;margin-bottom:10px}
.ap-star-off{color:var(--ap-line)}
.ap-review blockquote{
  margin:0 0 14px;font-size:14.5px;line-height:1.65;color:#3c4453;flex:1;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ap-review figcaption{display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--ap-line);padding-top:10px}
.ap-review figcaption b{font-size:14px;color:var(--ap-navy)}
.ap-review figcaption span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ap-muted)}
.ap-rev-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid var(--ap-line);color:var(--ap-navy);
  font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(18,33,63,.14);transition:border-color .18s,color .18s}
.ap-rev-nav:hover{border-color:var(--ap-gold);color:var(--ap-gold)}
.ap-rev-nav[disabled]{opacity:0;pointer-events:none}
.ap-rev-prev{left:-14px}
.ap-rev-next{right:-14px}
@media(max-width:900px){
  .ap-rev-nav{display:none}
  .ap-review{flex-basis:280px}
  .ap-reviews{padding-left:2px;scroll-padding-left:2px}
}

/* ── Cookie notice (POPIA s11) ───────────────────────────────────────── */
.ap-consent{position:fixed;left:0;right:0;bottom:0;z-index:9500;
  background:var(--ap-navy);color:#fff;padding:16px 20px;
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  box-shadow:0 -3px 24px rgba(0,0,0,.28)}
.ap-consent p{margin:0;font-size:14px;line-height:1.6;max-width:70ch;color:rgba(255,255,255,.9)}
.ap-consent a{color:#fff;text-decoration:underline}
.ap-consent-btns{display:flex;gap:10px;flex:none}
.ap-consent .ap-btn{min-height:42px;padding:10px 20px;font-size:12px;white-space:nowrap}
/* base .ap-btn-ghost sets navy with !important, so this must match it */
.ap-consent .ap-btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.55)}
.ap-consent .ap-btn-ghost:hover{color:#fff!important;border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:700px){
  .ap-consent{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
  .ap-consent-btns{justify-content:stretch}
  .ap-consent .ap-btn{flex:1}
}

/* mobile ergonomics: primary CTA meets the 44px touch guidance */
@media(max-width:900px){
  .ap-book-btn{min-height:44px;display:inline-flex;align-items:center;padding:0 18px}
  .ap-kicker{font-size:11.5px}
}

/* ── Tables on small screens ─────────────────────────────────────────────
   A long unbreakable token (reservations@atlanticpalms.co.za) was forcing
   the "Getting in touch" table wider than the viewport, which made the whole
   page scroll sideways on a 375px phone. Let long values wrap. */
.ap-t{width:100%;table-layout:fixed}
.ap-t td,.ap-t th{overflow-wrap:anywhere;word-break:break-word}
.ap-t a{overflow-wrap:anywhere}
@media(max-width:560px){
  .ap-t th{width:38%}
  .ap-t td,.ap-t th{padding-left:10px;padding-right:10px;font-size:14.5px}
  /* phone numbers stay on one line; everything else may wrap */
  .ap-t-num td:last-child{white-space:nowrap;overflow-wrap:normal}
}

/* Restaurants-nearby is a 3-column table (name / distance / phone). The phone
   must not wrap, so on a narrow phone the three columns cannot fit — stack the
   row instead of letting the page scroll sideways. */
@media(max-width:560px){
  .ap-t-near,.ap-t-near tbody,.ap-t-near tr,.ap-t-near th,.ap-t-near td{display:block;width:auto}
  .ap-t-near tr{padding:12px 12px 14px;border-bottom:1px solid var(--ap-line)}
  .ap-t-near th{padding:0 0 4px;font-weight:600;background:none;border:0}
  .ap-t-near td{padding:0;border:0}
  .ap-t-near td:first-of-type{color:var(--ap-muted);font-size:13.5px;margin-bottom:4px}
  .ap-t-near td:last-child{text-align:left}
}

/* footer social row */
.ap-foot-social{max-width:1180px;margin:0 auto;padding:0 20px 18px;
  display:flex;gap:22px;flex-wrap:wrap}
.ap-foot-social a{color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.06em;
  text-decoration:none;border-bottom:1px solid transparent;padding:6px 0;min-height:32px}
.ap-foot-social a:hover{color:#fff;border-bottom-color:var(--ap-gold)}
.ap-review-con{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ap-muted)}
/* anchor targets clear the sticky header */
#details{scroll-margin-top:90px}

/* ── Type scale lift ─────────────────────────────────────────────────── */
.ap-kicker{font-size:15px!important;letter-spacing:.16em;font-weight:700;
  color:var(--ap-gold)!important}
.ap-card-t{font-size:28px}
.ap-room-t{font-size:clamp(34px,4.6vw,50px)}
.ap-room-wrap .ap-kicker{font-size:16px!important}
.ap-room-wrap .ap-facts li{font-size:18px}
.ap-mount{width:300px}
@media(max-width:700px){ .ap-mount{width:200px} .ap-kicker{font-size:13.5px!important} }

/* ── Awards: two columns, badge artwork ──────────────────────────────── */
.ap-awards{grid-template-columns:repeat(2,1fr);gap:24px;max-width:720px;margin:26px auto 0}
.ap-award{display:flex;align-items:center;justify-content:center;
  padding:26px 24px;min-height:210px}
.ap-award img{display:block;width:auto;max-width:100%;height:auto;max-height:150px;margin:0}
.ap-award b{font-size:22px}
@media(max-width:700px){
  .ap-awards{grid-template-columns:1fr}
  .ap-award{min-height:0;padding:24px 18px}
  .ap-award img{max-height:120px}
}

/* ── Footer: logo stands alone, then address, then the contact columns ── */
.ap-foot-in{grid-template-columns:1.1fr 1fr 1.3fr 1.3fr 1fr;gap:34px;align-items:start}
.ap-foot-brand{display:flex;align-items:flex-start}
.ap-foot-logo{height:76px;margin:0}
.ap-foot-h{font-size:13px;letter-spacing:.14em;margin-bottom:14px}
.ap-foot p{margin:0;font-size:15.5px;line-height:1.9}
/* links get real spacing so they are comfortable to tap */
.ap-foot p a{display:block;padding:5px 0;min-height:34px;font-size:15.5px}
.ap-foot-social{justify-content:center;gap:30px;padding:8px 20px 20px}
.ap-foot-social a{font-size:14.5px;padding:9px 2px;min-height:40px}
.ap-foot-bot{font-size:14px}
.ap-foot-bot nav a{padding:8px 0;margin-left:22px;font-size:14px}
@media(max-width:1050px){
  .ap-foot-in{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .ap-foot-brand{grid-column:1/-1}
}
@media(max-width:680px){
  .ap-foot-in{grid-template-columns:1fr 1fr}
  .ap-foot-social{gap:18px;flex-wrap:wrap}
}

/* the wordmark is white artwork — it needs to read on the light About panel */
.ap-about-logo{filter:brightness(0) saturate(100%);opacity:.92}

/* ── Language popup ──────────────────────────────────────────────────────
   GTranslate lays the list out as a wrapping flex row inside an
   overflow:hidden panel, so the 7th language (Afrikaans) wrapped into a
   second column and was clipped. Force one column and let it scroll. */
.ap-lang .gt_white_content{overflow:auto!important;
  height:auto!important;max-height:92vh!important;
  width:auto!important;min-width:240px;padding:8px 0 10px!important}
.ap-lang .gt_languages{display:flex!important;flex-direction:column!important;
  flex-wrap:nowrap!important;width:auto!important;min-width:230px;
  height:auto!important;max-height:none!important;overflow:visible!important}
.ap-lang .gt_languages a{display:flex!important;align-items:center;gap:12px;
  width:auto!important;min-width:0!important;white-space:nowrap;
  padding:9px 16px!important;min-height:40px;box-sizing:border-box}
.ap-lang .gt_languages a img{flex:none}

/* Split-section buttons sit with their text, not centred under it */
.ap-cta-inline{justify-content:flex-start!important;margin-top:22px}
.ap-split-txt .ap-cta-bar{justify-content:flex-start}

/* Split sections match the original's softer treatment */
.ap-split-img img{border-radius:10px}
.ap-split{align-items:center;gap:clamp(20px,4vw,54px);max-width:1240px;margin:0 auto;
  padding:clamp(28px,4vw,56px) clamp(18px,3vw,32px)}

/* ── Footer on small screens ─────────────────────────────────────────────
   Grid columns default to min-content, and the long reservations@ address
   cannot wrap — that pushed the footer (and the whole page) wider than a
   375px viewport. minmax(0,1fr) lets the tracks shrink; the wrap rule lets
   the address break. */
.ap-foot-in{grid-template-columns:repeat(5,minmax(0,1fr))}
.ap-foot p a,.ap-foot p{overflow-wrap:anywhere}
@media(max-width:1050px){
  .ap-foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .ap-foot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media(max-width:400px){
  .ap-foot-in{grid-template-columns:minmax(0,1fr)}
}