/* ==========================================================================
   Timeless Beach Hotel — Elementor skin
   Skins the editable Elementor homepage (widget classes + section #ids) into
   the Coastal language. Layout/bg/padding come from native Elementor
   settings; this file handles type, the hero/cta cinematics and components.
   ========================================================================== */

/* ---- boxed width + remove default heading/text margins for our rhythm ---- */
body.tbh .e-con-boxed > .e-con-inner { width: 100%; max-width: var(--tbh-maxw); margin-inline: auto; }
body.tbh .e-con > .e-con-inner,
body.tbh .e-con.e-parent { padding-inline: clamp(0px, var(--tbh-gutter), var(--tbh-gutter)); }
body.tbh #tbh-hero,
body.tbh .tbh-el-herobg, body.tbh .tbh-el-ctabg { padding-inline: 0 !important; }
body.tbh .elementor-widget:not(:last-child) { margin-bottom: 0; }
body.tbh .elementor-heading-title { color: inherit; }

/* spacing rhythm via widget hooks */
body.tbh .tbh-eyebrow { margin-bottom: 1.3rem; }
body.tbh .tbh-el-h1   { margin-bottom: 1.5rem; }
body.tbh .tbh-el-h2   { margin-bottom: 1.2rem; }
body.tbh .tbh-el-lead { margin-bottom: 1.9rem; }
body.tbh .tbh-el-body { margin-bottom: 1.6rem; }

/* ---- type ---- */
body.tbh .tbh-el-h1 .elementor-heading-title {
  font-family: var(--tbh-font-display); font-weight: 200; font-size: var(--tbh-fs-mega);
  line-height: .98; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 40px rgba(var(--tbh-scrim-rgb),.35);
}
body.tbh .tbh-el-h2 .elementor-heading-title { font-size: var(--tbh-fs-h2); color: var(--tbh-ink); line-height: 1.06; max-width: 20ch; }
body.tbh .tbh-el-h2--center .elementor-heading-title { max-width: 22ch; margin-inline: auto; text-align: center; }
body.tbh .tbh-el-lead .elementor-widget-container,
body.tbh .tbh-el-lead p { font-size: var(--tbh-fs-lead); line-height: 1.7; max-width: 48ch; }
body.tbh .tbh-el-body .elementor-widget-container,
body.tbh .tbh-el-body p { color: var(--tbh-ink-soft); max-width: 52ch; }

/* ---- buttons ---- */
body.tbh .tbh-el-btn .elementor-button {
  background: var(--tbh-accent); color: var(--tbh-dark); border: 1px solid var(--tbh-ink); border-radius: var(--tbh-radius-pill);
  font-family: var(--tbh-font-display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-size: .8rem; padding: 1.05em 2.2em; transition: background-color .5s var(--tbh-ease-luxe), color .5s, transform .3s var(--tbh-ease-out);
}
body.tbh .tbh-el-btn .elementor-button:hover { background: var(--tbh-ink); color: var(--tbh-on-dark); }
/* text-link button */
body.tbh .tbh-el-textbtn .elementor-button {
  background: none !important; padding: .3em 0 !important; color: var(--tbh-ink);
  font-family: var(--tbh-font-display); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem;
  /* reset the global button border first: the primary-button rule sets all
     four sides, which would otherwise box this text link */
  border: 0; border-bottom: 1px solid var(--tbh-line-strong); border-radius: 0;
}
body.tbh .tbh-el-textbtn .elementor-button:hover { color: var(--tbh-accent-deep); border-color: var(--tbh-accent-deep); background: none !important; }
body.tbh .tbh-el-textbtn--light .elementor-button { color: #fff; border-color: rgba(255,255,255,.4); }
body.tbh .tbh-el-textbtn--light .elementor-button:hover { color: var(--tbh-accent-glow); border-color: var(--tbh-accent); }

/* ================= HERO ================= */
body.tbh #tbh-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
body.tbh #tbh-hero > .tbh-el-herobg { position: absolute; inset: 0; z-index: 0; margin: 0; }
body.tbh #tbh-hero > .tbh-el-herobg .elementor-widget-container,
body.tbh #tbh-hero > .tbh-el-herobg figure,
body.tbh #tbh-hero > .tbh-el-herobg img { width: 100%; height: 100%; margin: 0; display: block; }
body.tbh #tbh-hero > .tbh-el-herobg img { object-fit: cover; animation: tbh-kenburns 20s ease-out forwards; transform-origin: 60% 45%; }
@keyframes tbh-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
/* portrait crop of the veranda frame: slide toward the shaded deck so the
   eyebrow and lead sit on timber, not sky. Tied to that photo AND to the
   length of the eyebrow — recheck if either changes.
   2026-09-19: the eyebrow copy changed and grew, overrunning the timber onto
   the bright sea gap (measured 2.03:1 at 390×844, fail). The dark zone ended
   at x≈230 of 390; moving the crop 20% → 12% widens it past the text and
   restores 8.3:1 eyebrow / 5.8:1 headline. Darkening instead was ruled out —
   the scrim would have needed ~76% opacity to do the same job. */
@media (max-width: 700px) { body.tbh #tbh-hero > .tbh-el-herobg img { object-position: 12% 50%; } }
body.tbh #tbh-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* The headline is Josefin 200 at ~104px and runs to ~90% of the width, so
     its right half always lands on the veranda's bright sky; the old scrim
     (clear through the middle band) left "Escape by the" unreadable. Layers,
     top to bottom: a seat behind the copy block, the water-light wash, the
     vertical scrim, the left-hand scrim, and a Coastal Depth film that cools
     and quietens the whole frame (as on the page heroes). */
  background:
    radial-gradient(ellipse 62% 58% at 30% 52%, rgba(var(--tbh-scrim-rgb),.62), rgba(var(--tbh-scrim-rgb),.28) 55%, transparent 100%),
    /* water-light rising from the waterline. Turquoise Tide, not the logo
       cyan — the logo cyan is too electric for an atmospheric wash. */
    radial-gradient(62vmin 62vmin at 50% 118%, rgba(var(--tbh-wash-rgb),.26), transparent 64%),
    linear-gradient(180deg, rgba(var(--tbh-scrim-rgb),.42) 0%, rgba(var(--tbh-scrim-rgb),.12) 28%, rgba(var(--tbh-scrim-rgb),.14) 55%, rgba(var(--tbh-scrim-rgb),.72) 100%),
    linear-gradient(90deg, rgba(var(--tbh-scrim-rgb),.42), rgba(var(--tbh-scrim-rgb),.12) 62%, transparent 88%),
    linear-gradient(rgba(var(--tbh-depth-rgb),.30), rgba(var(--tbh-depth-rgb),.30));
}
body.tbh #tbh-hero > .e-con { position: relative; z-index: 2; }
body.tbh #tbh-hero .tbh-split .elementor-heading-title {
  text-shadow: 0 2px 40px rgba(var(--tbh-scrim-rgb),.6), 0 1px 4px rgba(var(--tbh-scrim-rgb),.45);
}
/* Sea Mist, not the glow cyan — same reason as the page-hero eyebrow */
body.tbh #tbh-hero .tbh-eyebrow .elementor-heading-title {
  color: var(--tbh-mist); font-weight: 600;
  text-shadow: 0 0 14px rgba(var(--tbh-scrim-rgb),.85), 0 1px 2px rgba(var(--tbh-scrim-rgb),.6);
}
body.tbh #tbh-hero .tbh-el-lead p {
  color: var(--tbh-on-dark);
  text-shadow: 0 1px 20px rgba(var(--tbh-scrim-rgb),.75), 0 1px 2px rgba(var(--tbh-scrim-rgb),.55);
}

/* ================= WELCOME ================= */
body.tbh #tbh-welcome .tbh-el-media { position: relative; border-radius: var(--tbh-radius-lg); overflow: hidden; box-shadow: var(--tbh-shadow-lift); }
body.tbh .tbh-el-media .elementor-widget-container,
body.tbh .tbh-el-media figure,
body.tbh .tbh-el-media img { width: 100%; height: 100%; margin: 0; display: block; }
body.tbh #tbh-welcome .tbh-el-media img { aspect-ratio: 4/5; object-fit: cover; }
body.tbh .tbh-el-statn .elementor-heading-title { font-family: var(--tbh-font-display); font-weight: 300; font-size: clamp(2.2rem,1.5rem + 2vw,3.2rem); color: var(--tbh-accent-deep); line-height: 1; }
body.tbh .tbh-el-statl .elementor-heading-title { display: block; margin-top: .5rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tbh-ink-soft); }

/* ================= SUITES ================= */
/* equal-width cards (container classes aren't emitted, so flex via parent #id) */
body.tbh #tbh-cards { align-items: stretch; }
body.tbh #tbh-cards > .e-con { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) { body.tbh #tbh-cards > .e-con { flex-basis: auto; } }
body.tbh .tbh-el-cardimg { overflow: hidden; border-radius: var(--tbh-radius); }
body.tbh .tbh-el-cardimg img { aspect-ratio: 3/4; object-fit: cover; width: 100%; display: block; transition: transform 1.1s var(--tbh-ease-luxe); }
body.tbh .tbh-el-cardimg:hover img { transform: scale(1.06); }
body.tbh .tbh-el-cardname .elementor-heading-title { font-size: var(--tbh-fs-h3); margin-top: 1.2rem; color: var(--tbh-ink); }
body.tbh .tbh-el-cardmeta p { color: var(--tbh-ink-soft); font-size: .92rem; margin-top: .3rem; }
body.tbh .tbh-el-cardprice .elementor-heading-title { font-family: var(--tbh-font-display); letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; color: var(--tbh-accent-deep); margin-top: .6rem; display: block; }

/* ================= EXPERIENCES ================= */
body.tbh #tbh-exp .tbh-el-media { border-radius: var(--tbh-radius-lg); overflow: hidden; box-shadow: var(--tbh-shadow-soft); }
body.tbh #tbh-exp .tbh-el-media img { aspect-ratio: 16/11; object-fit: cover; }
body.tbh .tbh-el-expno .elementor-heading-title { font-family: var(--tbh-font-display); font-size: 1rem; letter-spacing: .2em; color: var(--tbh-accent-deep); }
body.tbh #tbh-exp .tbh-el-expno { margin-bottom: 1rem; }

/* ================= GALLERY ================= */
body.tbh #tbh-gallery .tbh-eyebrow .elementor-heading-title { color: var(--tbh-accent-glow); }
body.tbh #tbh-gallery .tbh-el-h2 .elementor-heading-title { color: var(--tbh-on-dark); }
body.tbh #tbh-gallery .tbh-el-textbtn .elementor-button { color: var(--tbh-on-dark-soft); border-color: var(--tbh-line-dark); }
body.tbh #tbh-gallery .tbh-el-textbtn .elementor-button:hover { color: var(--tbh-accent); border-color: var(--tbh-accent); }
body.tbh #tbh-gallery-strip { overflow-x: auto; scrollbar-width: none; }
body.tbh #tbh-gallery-strip::-webkit-scrollbar { display: none; }
body.tbh #tbh-gallery-strip > .tbh-el-galimg { flex: 0 0 clamp(240px, 26vw, 400px); }
body.tbh .tbh-el-galimg { overflow: hidden; border-radius: var(--tbh-radius); }
body.tbh .tbh-el-galimg img { aspect-ratio: 4/5; object-fit: cover; width: 100%; display: block; transition: transform 1.1s var(--tbh-ease-luxe); }
body.tbh .tbh-el-galimg:hover img { transform: scale(1.05); }

/* ================= IMAGE LOADING =================
   Blur-up: the wrapper paints a blurred ~24px preview (inline --tbh-lqip,
   functions.php §11) the instant the HTML arrives; the photo fades in over it
   when the head script sees its load event (.tbh-img-in). Gated on
   html.tbh-js so a no-JS visit shows photos normally. */
body.tbh .tbh-lqip { background: var(--tbh-lqip) center / cover no-repeat; }
html.tbh-js body.tbh .tbh-lqip img { opacity: 0; transition: opacity 1.1s var(--tbh-ease-luxe); }
html.tbh-js body.tbh .tbh-lqip img.tbh-img-in { opacity: 1; }
/* cards and tiles also zoom on hover — keep both transitions */
html.tbh-js body.tbh .tbh-el-cardimg.tbh-lqip img,
html.tbh-js body.tbh .tbh-el-galimg.tbh-lqip img { transition: opacity 1.1s var(--tbh-ease-luxe), transform 1.1s var(--tbh-ease-luxe); }
@media (max-width: 700px) { body.tbh #tbh-hero > .tbh-el-herobg.tbh-lqip { background-position: 12% 50%; } }

/* Ken Burns waits for its photo. CSS animations start when the element is
   styled, not when the image arrives — so under the loader/veil the slow
   zoom-out used to run out before the photo was even visible. Held on its
   first frame until tbh-app.js marks the wrapper .is-live (decoded + curtain
   lifted; the CTA when it scrolls into view). */
html.tbh-js body.tbh #tbh-hero > .tbh-el-herobg img,
html.tbh-js body.tbh [id^="tbh-phero"] > .tbh-el-pherobg img,
html.tbh-js body.tbh #tbh-cta > .tbh-el-ctabg img { animation-play-state: paused; }
html.tbh-js body.tbh #tbh-hero > .tbh-el-herobg.is-live img,
html.tbh-js body.tbh [id^="tbh-phero"] > .tbh-el-pherobg.is-live img,
html.tbh-js body.tbh #tbh-cta > .tbh-el-ctabg.is-live img { animation-play-state: running; }

/* gallery thumbnails open the lightbox (tbh-app.js §8) */
body.tbh .tbh-el-galimg[data-lb] { cursor: zoom-in; }
body.tbh .tbh-el-galimg[data-lb]:focus-visible { outline: 2px solid var(--tbh-accent); outline-offset: 4px; }
/* !important: GSAP's reveal leaves an inline visibility:inherit on the tile */
body.tbh .tbh-el-galimg.is-lb-source { visibility: hidden !important; }

/* ================= ROOM ROWS (Accommodation page) ================= */
/* pinned so the four rows align whatever the source frame's ratio (the
   Beach View photo is 1.28:1, the others 3:2) */
body.tbh .tbh-el-room img { aspect-ratio: 3/2; object-fit: cover; }

/* focal point for a cover crop that would cut the subject — add to the
   image widget's CSS classes */
body.tbh .tbh-focus-l img { object-position: 25% 50%; }
body.tbh .tbh-focus-r img { object-position: 75% 50%; }
body.tbh .tbh-focus-t img { object-position: 50% 25%; }
body.tbh .tbh-focus-b img { object-position: 50% 75%; }

/* ================= CTA ================= */
body.tbh #tbh-cta { position: relative; isolation: isolate; overflow: hidden; text-align: center; color: #fff; }
body.tbh #tbh-cta > .tbh-el-ctabg { position: absolute; inset: 0; z-index: 0; margin: 0; }
body.tbh #tbh-cta > .tbh-el-ctabg .elementor-widget-container,
body.tbh #tbh-cta > .tbh-el-ctabg figure,
body.tbh #tbh-cta > .tbh-el-ctabg img { width: 100%; height: 100%; margin: 0; display: block; }
body.tbh #tbh-cta > .tbh-el-ctabg img { object-fit: cover; animation: tbh-kenburns 22s ease-out forwards; }
body.tbh #tbh-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--tbh-scrim-rgb),.6), rgba(var(--tbh-scrim-rgb),.42)); pointer-events: none; }
body.tbh #tbh-cta > .e-con { position: relative; z-index: 2; }
/* over a photo: Sea Mist + shadow, as on the heroes (the glow cyan sank into the scrim) */
body.tbh #tbh-cta .tbh-eyebrow .elementor-heading-title {
  color: var(--tbh-mist); font-weight: 600;
  text-shadow: 0 0 14px rgba(var(--tbh-scrim-rgb),.85), 0 1px 2px rgba(var(--tbh-scrim-rgb),.6);
}
body.tbh .tbh-el-ctatitle .elementor-heading-title { font-family: var(--tbh-font-display); font-weight: 200; font-size: var(--tbh-fs-h1); line-height: 1; color: #fff; }
body.tbh #tbh-cta .tbh-el-lead p { color: var(--tbh-on-dark); text-align: center; margin-inline: auto; text-shadow: 0 1px 20px rgba(var(--tbh-scrim-rgb),.75), 0 1px 2px rgba(var(--tbh-scrim-rgb),.55); }
body.tbh #tbh-cta .tbh-el-lead { margin-bottom: 2rem; }

/* ================= PAGE HERO (inner pages) ================= */
body.tbh [id^="tbh-phero"] { position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center; }
body.tbh [id^="tbh-phero"] > .tbh-el-pherobg { position: absolute; inset: 0; z-index: 0; margin: 0; }
body.tbh [id^="tbh-phero"] > .tbh-el-pherobg .elementor-widget-container,
body.tbh [id^="tbh-phero"] > .tbh-el-pherobg figure,
body.tbh [id^="tbh-phero"] > .tbh-el-pherobg img { width: 100%; height: 100%; margin: 0; display: block; }
body.tbh [id^="tbh-phero"] > .tbh-el-pherobg img { object-fit: cover; animation: tbh-kenburns 20s ease-out forwards; }
body.tbh [id^="tbh-phero"]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--tbh-scrim-rgb),.4) 0%, transparent 38%, rgba(var(--tbh-scrim-rgb),.62) 100%); }
body.tbh [id^="tbh-phero"] > .e-con { position: relative; z-index: 2; }
/* Sea Mist, not the glow cyan: the glow shares the Coastal Depth film's hue
   and sank into it (Contact, 2026-09-17); Sea Mist holds a step lighter */
body.tbh .tbh-el-phero__eyebrow .elementor-heading-title {
  color: var(--tbh-mist); font-weight: 600;
  text-shadow: 0 0 14px rgba(var(--tbh-scrim-rgb),.85), 0 1px 2px rgba(var(--tbh-scrim-rgb),.6);
}
body.tbh .tbh-el-phero__title .elementor-heading-title { font-family: var(--tbh-font-display); font-weight: 200; font-size: var(--tbh-fs-h1); color: #fff; line-height: 1; }

/* experiences grid (page) — 2x2 equal cards */
body.tbh #tbh-exp-grid > .e-con { flex: 1 1 calc(50% - 15px); min-width: 0; }
@media (max-width: 700px) { body.tbh #tbh-exp-grid > .e-con { flex-basis: 100%; } }

/* gallery page grid */
body.tbh #tbh-gallery-grid > .e-con,
body.tbh #tbh-gallery-grid > .tbh-el-galimg { flex: 1 1 calc(33.333% - 12px); min-width: 0; }
body.tbh #tbh-gallery-grid .tbh-el-galimg img { aspect-ratio: 4/3; }
@media (max-width: 700px) { body.tbh #tbh-gallery-grid > .tbh-el-galimg { flex-basis: calc(50% - 9px); } }

/* contact details */
body.tbh .tbh-el-contactdetails p { color: var(--tbh-ink-soft); margin-bottom: 1.1rem; }
body.tbh .tbh-el-contactdetails strong { font-family: var(--tbh-font-display); color: var(--tbh-ink); letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; font-weight: 600; }

/* ================= CF7 RESERVATION FORM ================= */
body.tbh .wpcf7-spinner { background: var(--tbh-accent); }
body.tbh .wpcf7 .wpcf7-response-output { border-radius: 10px; border-color: var(--tbh-line-strong); font-size: .9rem; margin: 1.4rem 0 0; }
body.tbh #tbh-reserve-form { max-width: 860px; margin-inline: auto; width: 100%; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  body.tbh #tbh-welcome .tbh-el-media img { aspect-ratio: 16/11; }
}
@media (max-width: 700px) {
  body.tbh .tbh-el-h1 .elementor-heading-title { font-size: clamp(2.8rem, 12vw, 4rem); }
}

/* ==========================================================================
   PALETTE DEPLOYMENT
   The recolour above runs on accent + ink + dark + ground. This block puts
   the remaining three brand colours to work so all five actually appear.
   Colour only — no layout, spacing or type changes.

     Turquoise Tide #4EC6D4  --tbh-wash   atmospheric washes over photography
     Ocean Glass    #7AC7BD  --tbh-glass  hairlines + dividers on dark
     Sea Mist       #B6E6E9  --tbh-mist   secondary text on SOLID dark only
     Sunlit Sand    #F2D9B7  --tbh-panel  warm counterpoint, form fields

   Sea Mist is used for text only on solid dark grounds (10.42:1 on
   --tbh-dark). It is deliberately NOT used over photography, where a bright
   frame can push it under 4.5 — near-white stays there.
   ========================================================================== */

/* ---- Gallery: solid dark ground, so the cool tints are safe here ---- */
body.tbh #tbh-gallery .tbh-el-lead p,
body.tbh #tbh-gallery .tbh-el-body p { color: var(--tbh-mist); }
body.tbh #tbh-gallery .tbh-el-textbtn .elementor-button { border-color: rgba(var(--tbh-glass-rgb),.42); }

/* ---- Ocean Glass hairlines on dark sections ---- */
body.tbh #tbh-gallery .tbh-horizon,
body.tbh .tbh-on-dark .tbh-horizon {
  background: linear-gradient(90deg, transparent, rgba(var(--tbh-glass-rgb),.5) 18%, rgba(var(--tbh-glass-rgb),.5) 82%, transparent);
}

/* ---- Turquoise wash over imagery: a cool film that lifts on hover ---- */
body.tbh .tbh-el-cardimg,
body.tbh .tbh-el-galimg { position: relative; }
body.tbh .tbh-el-cardimg::after,
body.tbh .tbh-el-galimg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--tbh-depth-rgb),.30) 100%);
  opacity: 1; transition: opacity .9s var(--tbh-ease-luxe);
}
body.tbh .tbh-el-cardimg:hover::after,
body.tbh .tbh-el-galimg:hover::after { opacity: .35; }

/* ---- Sunlit Sand: the warm counterpoint (form fields now carry it as a
     focus wash rather than a fill — see the form block below) ---- */

/* ---- Page heroes: Coastal Depth film + a seat behind the title ----
   The title is Josefin 200: hairline strokes that vanish over busy detail (the
   timber balusters on the Contact frame) even where luminance contrast
   passes. The film cools and quietens the whole frame, the seat darkens only
   where the words sit, and a soft shadow lifts the strokes off the texture. */
body.tbh [id^="tbh-phero"]::after {
  background:
    radial-gradient(ellipse 44% 38% at 50% 72%, rgba(var(--tbh-scrim-rgb),.46), transparent 100%),
    radial-gradient(70vmin 50vmin at 50% 110%, rgba(var(--tbh-wash-rgb),.18), transparent 66%),
    linear-gradient(180deg, rgba(var(--tbh-scrim-rgb),.46) 0%, rgba(var(--tbh-scrim-rgb),.08) 40%, rgba(var(--tbh-scrim-rgb),.6) 100%),
    linear-gradient(rgba(var(--tbh-depth-rgb),.34), rgba(var(--tbh-depth-rgb),.34));
}
body.tbh [id^="tbh-phero"] .elementor-heading-title {
  text-shadow: 0 2px 28px rgba(var(--tbh-scrim-rgb),.6), 0 1px 3px rgba(var(--tbh-scrim-rgb),.4);
}

/* ================= PROPERTY AMENITIES (Accommodation page) =================
   Verified list from the property's OTA listing. Sits on the Sea Mist band so
   it reads as its own block and keeps the sand/water rhythm going down the page. */
body.tbh #tbh-amenities {
  background: var(--tbh-ground-alt);
  padding-top: clamp(4rem, 8vw, 7rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
body.tbh #tbh-amgrid {
  display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.4rem);
}
body.tbh #tbh-amgrid > .e-con { flex: 1 1 calc(25% - 2.25rem); min-width: 190px; }
@media (max-width: 900px) { body.tbh #tbh-amgrid > .e-con { flex-basis: calc(50% - 1.5rem); } }
@media (max-width: 520px) { body.tbh #tbh-amgrid > .e-con { flex-basis: 100%; } }

body.tbh .tbh-el-amtitle .elementor-heading-title {
  font-family: var(--tbh-font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tbh-accent-deep);
  padding-bottom: .8rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(var(--tbh-glass-rgb),.55);   /* Ocean Glass rule */
}
body.tbh .tbh-el-amlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; }
body.tbh .tbh-el-amlist li {
  position: relative; padding-left: 1.1rem;
  font-size: .92rem; line-height: 1.5; color: var(--tbh-ink-soft);
}
/* sunrise-dot marker, echoing the mark in the logo */
body.tbh .tbh-el-amlist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--tbh-accent);
}
body.tbh .tbh-el-amnote p {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem;
  border-top: 1px solid var(--tbh-line);
  font-size: .84rem; color: var(--tbh-ink-soft); max-width: 62ch;
}

/* ==========================================================================
   FORM — reservation / enquiry

   Underlined fields rather than filled boxes. A filled field measured only
   1.07:1 against the sand ground (invisible), and every translucent border
   tested landed at 1.2-1.6:1 — under the 3:1 WCAG 1.4.11 requires for an input
   boundary. A rule at rgba(ink,.62) = 3.37:1 both passes and stays delicate,
   and it suits the page far better than boxes.

   Verified on --tbh-ground #F9ECDB:
     typed text  --tbh-ink        8.76   label --tbh-accent-deep  5.29
     placeholder rgba(ink,.70)    4.09   focus rule same          5.29
   ========================================================================== */
body.tbh .tbh-form { display: flex; flex-direction: column; gap: clamp(1.6rem, 3vw, 2.4rem); }

body.tbh .tbh-form__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.2rem, 2.2vw, 2rem);
}
body.tbh .tbh-field--half  { grid-column: span 3; }
body.tbh .tbh-field--third { grid-column: span 2; }
body.tbh .tbh-field--full  { grid-column: 1 / -1; }
@media (max-width: 760px) {
  body.tbh .tbh-field--half { grid-column: 1 / -1; }
  body.tbh .tbh-field--third { grid-column: span 3; }
}
@media (max-width: 460px) {
  body.tbh .tbh-field--third { grid-column: 1 / -1; }
}

body.tbh .tbh-field { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
body.tbh .tbh-field__label {
  font-family: var(--tbh-font-display); font-weight: 600; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tbh-accent-deep);
}
/* CF7 wraps each control in this span; it must not break the column flow */
body.tbh .tbh-field .wpcf7-form-control-wrap { display: block; width: 100%; }

body.tbh .tbh-form input:not([type="submit"]),
body.tbh .tbh-form select,
body.tbh .tbh-form textarea {
  width: 100%; display: block;
  font-family: var(--tbh-font-body); font-size: 1rem; line-height: 1.5;
  color: var(--tbh-ink);
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(var(--tbh-ink-rgb), .62);
  border-radius: 0;
  padding: .55rem 0; margin: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color .35s var(--tbh-ease-luxe),
              box-shadow .35s var(--tbh-ease-luxe),
              background-color .35s var(--tbh-ease-luxe);
}
body.tbh .tbh-form textarea { min-height: 7.5rem; resize: vertical; }
body.tbh .tbh-form ::placeholder { color: rgba(var(--tbh-ink-rgb), .70); opacity: 1; }

/* focus: the rule thickens into brand cyan via box-shadow, so nothing reflows,
   and a whisper of Sunlit Sand washes the field to show it is live */
body.tbh .tbh-form input:not([type="submit"]):focus,
body.tbh .tbh-form select:focus,
body.tbh .tbh-form textarea:focus {
  outline: none;
  border-bottom-color: var(--tbh-accent-deep);
  box-shadow: 0 1px 0 0 var(--tbh-accent-deep);
  background: rgba(var(--tbh-sand-rgb), .34);
}
body.tbh .tbh-form input:not([type="submit"]):hover,
body.tbh .tbh-form select:hover,
body.tbh .tbh-form textarea:hover { border-bottom-color: var(--tbh-ink); }

/* ---- select: replace Palatio's fontello arrow with our own chevron ---- */
body.tbh .tbh-form .select_container { width: 100%; position: relative; background: none; }
body.tbh .tbh-form .select_container::before,
body.tbh .tbh-form .select_container::after { display: none !important; content: none !important; }
body.tbh .tbh-form select {
  cursor: pointer; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2312484D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center; background-size: 13px 8px;
}
body.tbh .tbh-form select:focus { background-color: rgba(var(--tbh-sand-rgb), .34); }

/* ---- date fields: tint the native picker glyph to the brand ink ---- */
body.tbh .tbh-form input[type="date"] { cursor: pointer; }
body.tbh .tbh-form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer;
  filter: invert(21%) sepia(28%) saturate(1093%) hue-rotate(140deg) brightness(94%) contrast(92%);
  transition: opacity .3s;
}
body.tbh .tbh-form input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
body.tbh .tbh-form input[type="number"]::-webkit-outer-spin-button,
body.tbh .tbh-form input[type="number"]::-webkit-inner-spin-button { opacity: .5; }

/* ---- submit ---- */
body.tbh .tbh-form__submit { margin-top: .2rem; }

/* ---- CF7 validation + response messages, in brand ---- */
body.tbh .wpcf7-not-valid-tip {
  font-family: var(--tbh-font-body); font-size: .78rem; color: #A3402F;
  margin-top: .4rem; letter-spacing: .01em;
}
body.tbh .tbh-form input:not([type="submit"]).wpcf7-not-valid,
body.tbh .tbh-form select.wpcf7-not-valid,
body.tbh .tbh-form textarea.wpcf7-not-valid { border-bottom-color: #A3402F; }
body.tbh .wpcf7-response-output {
  margin: 1.4rem 0 0 !important; padding: .9rem 1.1rem !important;
  border: 0 !important; border-left: 2px solid var(--tbh-accent-deep) !important;
  background: rgba(var(--tbh-sand-rgb), .45);
  font-size: .9rem; color: var(--tbh-ink); border-radius: 0 var(--tbh-radius) var(--tbh-radius) 0;
}
body.tbh .wpcf7-response-output.wpcf7-validation-errors,
body.tbh .wpcf7-response-output.wpcf7-acceptance-missing { border-left-color: #A3402F !important; }

/* ==========================================================================
   CONTACT DETAILS — icon + text, matching the footer's Connect column.
   Was a <strong>-labelled paragraph list; the footer's pattern is the one the
   site uses everywhere else for contact options, so it wins.
   ========================================================================== */
body.tbh .tbh-el-contactdetails ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2vw, 1.35rem);
}
body.tbh .tbh-el-contactdetails li {
  display: flex; align-items: flex-start; gap: .85rem;
  color: var(--tbh-ink-soft); line-height: 1.5;
}
body.tbh .tbh-el-contactdetails .tbh-ico {
  flex: none; margin-top: .2em; color: var(--tbh-accent-deep);   /* 5.29 on the ground */
}
body.tbh .tbh-el-contactdetails a {
  color: var(--tbh-ink); text-decoration: none;
  border-bottom: 1px solid rgba(var(--tbh-ink-rgb), .28);
  transition: color .3s var(--tbh-ease-luxe), border-color .3s var(--tbh-ease-luxe);
}
body.tbh .tbh-el-contactdetails a:hover,
body.tbh .tbh-el-contactdetails a:focus-visible {
  color: var(--tbh-accent-deep); border-bottom-color: var(--tbh-accent-deep);
}
/* The email is one unbreakable token: its min-content width (311px) exceeded
   the 315px column, forcing the grid track wider and pushing every row past
   the block edge. `anywhere` reduces intrinsic min-content size (break-word
   does not), and min-width:0 lets the grid and flex items actually shrink. */
body.tbh .tbh-el-contactdetails li { min-width: 0; }
body.tbh .tbh-el-contactdetails li > span { min-width: 0; overflow-wrap: anywhere; }