/* This stylesheet is a direct, class-for-class match of the approved
   static demo (sunside-demo-website.html) so that any section built
   with matching class names — whether from this theme's own header/
   footer or from the companion Elementor template's HTML widgets —
   renders identically. */

  :root{
    --ivory:#F7F2E9;
    --sandstone:#EFE4D2;
    --sandstone-deep:#E2D2B3;
    --charcoal:#2A241D;
    --charcoal-soft:#57503F;
    --terracotta:#B15E3B;
    --terracotta-deep:#8F4A2C;
    --gold:#A6813F;
    --olive:#6D7248;
    --white:#FFFDF9;
    --line:rgba(42,36,29,0.14);
    --serif:'Cormorant Garamond', serif;
    --sans:'DM Sans', sans-serif;
    --maxw:1240px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ivory) !important;
    color:var(--charcoal);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-bottom:0;
  }
  /* Astra/Elementor wrap page content in several containers that
     default to a plain white background, painting over the ivory
     body color everywhere that isn't explicitly styled otherwise. */
  #content, .site-content, .ast-container, #primary, #main,
  article.ast-article-single, .entry-content,
  .elementor, .elementor-element-populated,
  .ast-separate-container, .ast-separate-container .ast-article-single{
    background:transparent !important;
  }
  /* Plain Elementor sections (no sandstone/charcoal/hero/pool-spot
     class of their own) should show the ivory body colour, not
     Elementor's own default white section background. */
  .elementor-section{
    background-color:transparent !important;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
  .eyebrow{
    font-family:var(--sans);
    font-size:12px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--terracotta-deep);
    font-weight:600;
    display:inline-block;
    margin-bottom:18px;
  }
  h1,h2,h3,h4{
    font-family:var(--serif);
    font-weight:500;
    line-height:1.12;
    margin:0 0 0.4em;
    color:var(--charcoal);
  }
  h2{font-size:clamp(32px,4.4vw,52px);}
  h3{font-size:clamp(22px,2.6vw,30px);}
  p{margin:0 0 1em;color:var(--charcoal-soft);max-width:62ch;}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 30px;
    font-family:var(--sans);
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-weight:600;
    border:1px solid var(--charcoal);
    background:transparent;
    color:var(--charcoal);
    cursor:pointer;
    transition:background .35s ease, color .35s ease, border-color .35s ease;
    white-space:nowrap;
  }
  .btn:hover{background:var(--charcoal);color:var(--ivory);}
  .btn-solid{background:var(--terracotta);border-color:var(--terracotta);color:var(--white);}
  .btn-solid:hover{background:var(--terracotta-deep);border-color:var(--terracotta-deep);}
  .btn-light{border-color:rgba(255,253,249,0.65);color:var(--white);}
  .btn-light:hover{background:var(--white);color:var(--charcoal);}

  /* ---------- HEADER ---------- */
  header.site-header{
    position:fixed;top:0;left:0;right:0;z-index:500;
    padding:26px 0;
    transition:padding .4s ease, background .4s ease, box-shadow .4s ease;
  }
  header.site-header .wrap{display:flex;align-items:center;justify-content:space-between;}
  .logo-mark{
    width:58px;height:58px;border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 3px rgba(255,253,249,0.85), 0 4px 14px rgba(0,0,0,0.28);
    transition:box-shadow .4s ease;
    flex-shrink:0;
  }
  header.site-header.scrolled .logo-mark{
    box-shadow:0 0 0 3px var(--ivory), 0 2px 10px rgba(0,0,0,0.14);
  }
  .header-inner{display:flex;align-items:center;justify-content:center;gap:44px;position:relative;width:100%;flex-wrap:nowrap;}
  nav.main-nav{display:flex;align-items:center;gap:32px;flex:1;min-width:0;}
  nav.main-nav.nav-left{justify-content:flex-end;}
  nav.main-nav.nav-right{justify-content:flex-start;}
  nav.main-nav a{
    font-size:13px;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;
    color:rgba(255,253,249,0.92);
    position:relative;padding-bottom:4px;
    line-height:1;
    white-space:nowrap;
    transition:color .4s ease;
  }
  nav.main-nav a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;
    transition:width .3s ease;
  }
  nav.main-nav a:hover::after{width:100%;}
  .header-cta{border-color:rgba(255,253,249,0.7);color:var(--white);flex-shrink:0;}
  .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;position:absolute;right:0;}
  .hamburger span{width:24px;height:1px;background:var(--white);transition:background .4s ease;}
  .mobile-logo{display:none;}

  header.site-header.scrolled{
    background:rgba(247,242,233,0.94);
    box-shadow:0 1px 0 var(--line);
    padding:16px 0;
    backdrop-filter:blur(6px);
  }
  header.site-header.scrolled nav.main-nav a{color:var(--charcoal-soft);}
  header.site-header.scrolled .header-cta{border-color:var(--charcoal);color:var(--charcoal);}
  header.site-header.scrolled .hamburger span{background:var(--charcoal);}

  /* Mobile nav overlay */
  .mobile-nav{
    position:fixed;inset:0;background:var(--charcoal);z-index:600;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    transform:translateY(-100%);transition:transform .5s ease;
  }
  .mobile-nav.open{transform:translateY(0);}
  .mobile-nav a{font-family:var(--serif);font-size:28px;color:var(--ivory);}
  /* wp_nav_menu() outputs <li> items without a wrapping <ul> here (see
     functions.php) — strip default list-item styling so nothing shows
     bullets or unwanted block spacing. */
  nav.main-nav li{list-style:none;margin:0;padding:0;display:inline;}
  .mobile-nav li{list-style:none;margin:0;padding:0;display:block;}
  .mobile-nav .close-nav{position:absolute;top:26px;right:30px;background:none;border:none;color:var(--ivory);font-size:26px;cursor:pointer;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:flex-end;
    overflow:hidden;
    /* Solid fallback only — no background image here. The Video widget
       in .hero-bg-col fills this area; layering an image behind it at a
       different width produced a visible vertical seam. */
    background:#1a140d !important;
  }
  /* Elementor's "boxed" sections wrap children in a max-width
     .elementor-container. That container was clipping the background
     video to ~1240px and centring it. Let the hero's container run
     full-bleed instead. */
  .hero > .elementor-container{
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
  }
  .hero-video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  }
  /* Elementor-native rebuild: the Video widget sits in its own column,
     stretched to fill the whole hero section, behind the text column. */
  .hero-bg-col{
    position:absolute !important;inset:0;width:100%;height:100%;
    z-index:0;overflow:hidden;padding:0 !important;
  }
  .hero-bg-col > .elementor-widget-wrap,
  .hero-bg-col .elementor-widget-video,
  .hero-bg-col .elementor-widget-container,
  .hero-bg-col .e-hosted-video,
  .hero-bg-col .elementor-wrapper{
    position:absolute;inset:0;width:100%;height:100%;
    max-width:none !important;padding:0 !important;margin:0 !important;
  }
  .hero-bg-col video,
  .hero-bg-col img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-video, .hero-bg-col video{display:none;}
  }
  .hero::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(0deg, rgba(20,16,10,0.66), rgba(20,16,10,0.2) 55%, rgba(20,16,10,0.46));
  }
  .hero-inner{
    position:relative;z-index:2;
    padding:0 40px 90px 70px;
    max-width:900px;
    margin:0;
    width:100%;
  }
  /* Elementor stacks a column's widgets vertically inside
     .elementor-widget-wrap. Switch it to a wrapping row so the two
     buttons sit side by side, and push everything to the bottom. */
  .hero-inner.elementor-column > .elementor-widget-wrap{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-content:flex-end !important;
    align-items:flex-end !important;
    height:100%;
  }
  /* Eyebrow, headline and paragraph each take a full row */
  .hero-inner > .elementor-widget-wrap > .elementor-widget-heading,
  .hero-inner > .elementor-widget-wrap > .elementor-widget-text-editor{
    width:100% !important;
    flex:0 0 100% !important;
  }
  /* Buttons shrink to their own width and sit next to each other */
  .hero-inner > .elementor-widget-wrap > .elementor-widget-button{
    width:auto !important;
    flex:0 0 auto !important;
    margin:0 16px 0 0 !important;
  }
  .hero .eyebrow{color:var(--sandstone);}
  .hero h1{
    color:var(--white);
    font-size:clamp(44px,7.2vw,86px);
    max-width:16ch;
    font-weight:400;
  }
  .hero p{color:rgba(255,253,249,0.86);max-width:46ch;font-size:17px;margin-bottom:34px;}
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
  .scroll-cue{
    position:absolute;bottom:30px;right:40px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
    color:var(--white);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  }
  .scroll-cue .line{width:1px;height:44px;background:rgba(255,253,249,0.6);position:relative;overflow:hidden;}
  .scroll-cue .line::after{content:"";position:absolute;top:-44px;left:0;width:1px;height:44px;background:var(--white);animation:scrollLine 2.4s ease-in-out infinite;}
  @keyframes scrollLine{ to{top:100%;} }

  /* ---------- SECTIONS ---------- */
  section{padding:120px 0;}
  .section-tight{padding:90px 0;}
  .section-sandstone{background:var(--sandstone) !important;}
  .section-charcoal{background:var(--charcoal) !important;color:var(--ivory);}
  .section-charcoal p{color:rgba(247,242,233,0.78);}
  .section-charcoal h2,.section-charcoal h3{color:var(--ivory);}

  /* Introduction split */
  .split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:70px;align-items:center;}
  .split img{width:100%;height:560px;object-fit:cover;}
  .split .copy{max-width:none;}
  .split .elementor-widget-text-editor p{
    font-size:18px !important;
    line-height:1.65 !important;
    max-width:none !important;
  }
  .split.reverse{grid-template-columns:0.95fr 1.05fr;}
  .split.reverse .media{order:2;}
  .split.reverse .copy{order:1;}
  /* Elementor's own column-width classes (elementor-col-45/55) were
     rendering unevenly at wide viewports — force a clean 50/50 split
     on every split-layout section instead. */
  .split .elementor-column.media,
  .split .elementor-column.copy{
    width:50% !important;
    flex-basis:50% !important;
    max-width:50% !important;
  }
  .video-thumb{position:relative;border-radius:20px;overflow:hidden;}
  .video-thumb video{width:100%;height:560px;object-fit:cover;display:block;border-radius:20px;}
  .play-badge{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:78px;height:78px;border-radius:50%;
    background:var(--terracotta);
    border:2px solid rgba(255,253,249,0.85);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 28px rgba(20,16,10,0.35);
    pointer-events:none;
  }
  .play-badge svg{width:24px;height:24px;fill:var(--ivory);margin-left:4px;}

  /* Experience editorial grid */
  .exp-head{max-width:640px;margin:0 auto 70px;text-align:center;}
  .exp-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:170px;
    gap:14px;
  }
  .exp-tile{position:relative;overflow:hidden;background:var(--charcoal);}
  .exp-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease;}
  .exp-tile:hover img{transform:scale(1.05);}
  .exp-tile .tag{
    position:absolute;left:22px;bottom:20px;color:var(--white);
    font-family:var(--serif);font-size:23px;
  }
  .exp-tile::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(0deg, rgba(20,16,10,0.55), transparent 55%);
  }
  .exp-tile.pool{grid-column:1/4;grid-row:1/3;}
  .exp-tile.gardens{grid-column:4/7;grid-row:1/2;}
  .exp-tile.moonlit{grid-column:4/6;grid-row:2/3;}
  .exp-tile.dining{grid-column:6/7;grid-row:2/3;}

  /* Pool spotlight */
  .pool-spot{position:relative;height:78vh;min-height:520px;display:flex;align-items:center;}
  .pool-spot .bg{
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(20,16,10,0.72) 0%, rgba(20,16,10,0.25) 55%, rgba(20,16,10,0.05) 100%),
      url('https://sunsidebadighati.com/wp-content/uploads/2023/10/13.jpeg') center/cover no-repeat;
  }
  .pool-spot .content{
    position:relative;max-width:520px;padding:0 40px;color:var(--white);
  }
  .pool-spot h2{color:var(--white);}
  .pool-spot p{color:rgba(255,253,249,0.85);}
  .pool-bg-col{
    position:absolute !important;inset:0;width:100%;height:100%;
    z-index:0;padding:0 !important;
  }

  /* Stay */
  .stay-values{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px;}
  .stay-values div{border-top:1px solid var(--line);padding-top:20px;}
  .stay-values h4{font-family:var(--sans);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:var(--terracotta-deep);margin-bottom:10px;}
  .stay-values p{font-size:15px;}

  /* Stay gallery */
  .stay-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .stay-gallery figure{margin:0;position:relative;height:320px;overflow:hidden;}
  .stay-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
  .stay-gallery figure:hover img{transform:scale(1.05);}
  .stay-gallery figcaption{
    position:absolute;left:20px;bottom:18px;color:var(--white);
    font-family:var(--serif);font-size:19px;
  }
  .stay-gallery figure::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(0deg, rgba(20,16,10,0.5), transparent 50%);
  }

  /* Dining */
  .dine-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:60px;flex-wrap:wrap;}
  .dine-head p{margin:0;}
  .dine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
  .dine-card figure{margin:0 0 22px;height:300px;overflow:hidden;}
  .dine-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
  .dine-card:hover img{transform:scale(1.04);}
  .dine-card h3{margin-bottom:8px;}
  .dine-card .kicker{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--olive);font-weight:600;display:block;margin-bottom:10px;}

  /* Explore */
  .explore-wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
  .explore-media{position:sticky;top:120px;}
  .explore-media img{width:100%;height:640px;object-fit:cover;}
  .distance-list{list-style:none;margin:34px 0 0;padding:0;}
  .distance-list li{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;}
  .distance-list li span:first-child{color:var(--charcoal);font-weight:500;}
  .distance-list li span:last-child{color:var(--charcoal-soft);}
  .access-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;}
  .access-card{border:1px solid var(--line);padding:26px 24px;}
  .access-card img{width:38px;height:38px;object-fit:contain;margin-bottom:16px;}
  .access-card h4{font-family:var(--serif);font-size:19px;margin-bottom:8px;font-weight:500;}
  .access-card p{font-size:14px;margin:0;}

  /* Quote band */
  .quote-band{padding:110px 0;text-align:center;}
  .quote-band blockquote{
    font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:clamp(24px,3vw,36px);max-width:820px;margin:0 auto 22px;line-height:1.4;color:var(--charcoal);
  }
  .quote-band cite{font-style:normal;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--charcoal-soft);}

  /* Stories */
  .story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
  .story-card figure{height:230px;overflow:hidden;margin:0 0 20px;}
  .story-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
  .story-card:hover img{transform:scale(1.05);}
  .story-card .meta{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--olive);font-weight:600;margin-bottom:10px;display:block;}
  .story-card h3{font-size:21px;margin-bottom:10px;}
  .story-card .read{font-size:13px;font-weight:600;letter-spacing:0.06em;border-bottom:1px solid var(--charcoal);padding-bottom:2px;}

  /* Values band */
  .values-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding-top:50px;border-top:1px solid rgba(247,242,233,0.18);margin-top:60px;}
  .values-strip div{font-size:14px;color:rgba(247,242,233,0.82);line-height:1.5;}
  .values-strip h4{font-family:var(--sans);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--sandstone);font-weight:600;margin-bottom:10px;}

  /* Enquire */
  .enquire-wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:70px;}
  .field{margin-bottom:22px;}
  .field label{display:block;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--charcoal-soft);margin-bottom:8px;font-weight:600;}
  .field input,.field textarea{
    width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
    padding:10px 2px;font-family:var(--sans);font-size:15px;color:var(--charcoal);
  }
  .field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--terracotta);}
  .row-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .contact-card{background:var(--white);border:1px solid var(--line);padding:40px;}
  .contact-card h3{margin-bottom:22px;}
  .contact-line{margin-bottom:18px;font-size:15px;}
  .contact-line .contact-label{display:block;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--olive);font-weight:600;margin-bottom:4px;}
  .contact-line-row{display:flex;align-items:flex-start;gap:10px;}
  .contact-icon{flex-shrink:0;width:17px;height:17px;margin-top:2px;color:var(--terracotta);}
  .contact-icon svg{width:17px;height:17px;display:block;}
  .contact-line a{border-bottom:1px solid transparent;transition:border-color .3s ease;}
  .contact-line a:hover{border-color:currentColor;}
  .map-embed{margin-top:26px;height:220px;filter:sepia(12%) saturate(85%);}
  .map-embed iframe{width:100%;height:100%;border:0;}
  .directions-link{
    display:flex;align-items:center;gap:8px;margin-top:14px;
    font-size:13px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;
    color:var(--terracotta-deep);
  }
  .directions-link .contact-icon{color:var(--terracotta-deep);width:15px;height:15px;margin-top:0;}
  .directions-link .contact-icon svg{width:15px;height:15px;}
  .directions-link:hover{color:var(--terracotta);}

  /* Footer */
  footer{background:var(--charcoal);color:var(--sandstone);padding:80px 0 26px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(247,242,233,0.14);}
  .footer-grid h4{font-family:var(--sans);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--white);font-weight:600;margin-bottom:20px;}
  .footer-grid a,.footer-grid p{font-size:14px;color:rgba(247,242,233,0.72);display:block;margin-bottom:12px;transition:color .25s ease;}
  .footer-grid a:hover{color:var(--sandstone);}
  .footer-contact-line{display:flex !important;align-items:flex-start;gap:10px;}
  .footer-icon{flex-shrink:0;width:16px;height:16px;margin-top:2px;color:var(--terracotta);}
  .footer-icon svg{width:16px;height:16px;display:block;}
  .footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
  .footer-logo-mark{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(247,242,233,0.5);}
  .footer-logo{font-family:var(--serif);font-size:26px;letter-spacing:0.1em;color:var(--white);line-height:1.15;}
  .footer-logo-sub{font-family:var(--sans);font-size:11px;letter-spacing:0.24em;font-weight:600;color:var(--sandstone);}
  .footer-social{display:flex;gap:14px;margin-top:22px;}
  .footer-social a{
    width:36px;height:36px;border:1px solid rgba(247,242,233,0.3);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--sandstone);
    transition:background .3s ease, color .3s ease, border-color .3s ease;
  }
  .footer-social svg{width:16px;height:16px;}
  .footer-social a:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--white);}
  .footer-bottom{display:flex;justify-content:space-between;padding-top:26px;font-size:12px;color:rgba(247,242,233,0.5);flex-wrap:wrap;gap:10px;}
  .footer-bottom a{font-size:12px;color:rgba(247,242,233,0.5);margin-right:18px;display:inline;transition:color .25s ease;}
  .footer-bottom a:hover{color:var(--sandstone);}

  /* ---------- ACTION BAR (Call / WhatsApp / Enquiry) ---------- */
  .mobile-action-bar{
    display:block;
    position:fixed;left:0;right:0;bottom:0;z-index:700;
    background:var(--charcoal);
    border-top:1px solid rgba(247,242,233,0.14);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mobile-action-bar .bar-row{display:flex;width:100%;}
  .mobile-action{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:11px 4px 9px;color:var(--ivory);font-size:11px;letter-spacing:0.04em;
    border-right:1px solid rgba(247,242,233,0.12);
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-action:last-child{border-right:none;}
  .mobile-action svg{width:19px;height:19px;}
  .mobile-whatsapp{color:#EADFC9;}
  .mobile-enquiry{background:var(--terracotta);}
  body{padding-bottom:64px;}

  @media (min-width:981px){
    .mobile-action-bar{
      left:auto;right:24px;bottom:auto;top:50%;
      transform:translateY(-50%);
      width:auto;
      border:1px solid rgba(247,242,233,0.14);
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 14px 38px rgba(20,16,10,0.28);
    }
    .mobile-action-bar .bar-row{flex-direction:column;width:auto;}
    .mobile-action{
      flex:none;width:76px;padding:16px 8px;
      border-right:none;border-bottom:1px solid rgba(247,242,233,0.12);
      font-size:11px;
    }
    .mobile-action:last-child{border-bottom:none;}
    body{padding-bottom:0;}
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .wrap{padding:0 24px;}
    nav.main-nav{display:none;}
    .header-cta.desktop-only{display:none;}
    .hamburger{display:flex;}
    .header-inner{justify-content:center;gap:0;}
    .logo-mark{width:46px;height:46px;}
    .split,.explore-wrap,.enquire-wrap{grid-template-columns:1fr;gap:40px;}
    .split .media,.split.reverse .media{order:1;}
    .split .copy,.split.reverse .copy{order:2;max-width:none;}
    .split img{height:340px;}
    .video-thumb video{height:340px;}
    .explore-media{position:static;}
    .explore-media img{height:340px;}
    .exp-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;}
    .exp-tile.pool{grid-column:1/3;grid-row:1/2;}
    .exp-tile.gardens{grid-column:1/2;grid-row:2/3;}
    .exp-tile.moonlit{grid-column:2/3;grid-row:2/3;}
    .exp-tile.dining{grid-column:1/3;grid-row:3/4;}
    .dine-grid,.story-grid,.stay-gallery{grid-template-columns:1fr;}
    .stay-values{grid-template-columns:1fr;}
    .values-strip{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .access-cards{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    section{padding:80px 0;}
    .hero-inner{padding:0 24px 64px 24px;}
    .row-2{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
  }


/* =====================================================
   WORDPRESS / ASTRA SPECIFIC ADJUSTMENTS
===================================================== */

/* Astra renders its own header (#masthead) — we replace it entirely
   with our own header markup (output via wp_body_open in functions.php),
   so hide the default one everywhere. */
#masthead, .site-header.ast-header-break-point{
  display:none !important;
}

/* Our header is fixed. On the homepage the hero section provides its
   own full-height dark background to sit behind it, but on every other
   page we need to push page content down so it isn't hidden underneath
   the fixed header. */
body:not(.home) #page,
body:not(.home) .site-content,
body:not(.home) .ast-container{
  padding-top:92px;
}
@media (max-width:980px){
  body:not(.home) #page,
  body:not(.home) .site-content,
  body:not(.home) .ast-container{
    padding-top:78px;
  }
}

/* Keep our fixed header/mobile nav above the WordPress admin bar and
   Astra's own wrappers. */
header.site-header{ z-index:9000; }
.mobile-nav{ z-index:9100; }
.mobile-action-bar{ z-index:8900; }

/* Elementor sometimes wraps page content in extra containers with
   default padding — remove it so our own section padding controls
   the rhythm instead. */
.elementor section.elementor-section{
  padding:0;
}

/* When logged in with the WordPress admin bar visible, nudge our
   fixed header and action bar down/up so nothing overlaps it. */
.admin-bar header.site-header{ top:32px; }
@media (max-width:782px){
  .admin-bar header.site-header{ top:46px; }
}

/* =====================================================
   ELEMENTOR NATIVE WIDGET OVERRIDES
   Elementor auto-generates its own, highly specific CSS for every
   widget instance. Plain theme classes often lose that fight, so
   these rules target Elementor's actual widget markup directly with
   !important to guarantee the Sunside design applies consistently
   across every Heading / Text Editor / Button / Image Box / Icon Box
   / Icon List widget used in the homepage template.
===================================================== */

/* Headings */
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  color:var(--charcoal) !important;
  line-height:1.15 !important;
}
.hero .elementor-heading-title,
.pool-spot .content .elementor-heading-title,
.section-charcoal .elementor-heading-title{
  color:var(--white) !important;
}
/* Eyebrow labels: every heading widget in the template rendered as a
   <div> tag (header_size="div") is an eyebrow label; real headings use
   h1-h4. Free Elementor doesn't apply custom CSS classes to individual
   widgets, so we target the tag itself instead of a class. */
.elementor-widget-heading div.elementor-heading-title{
  font-family:var(--sans) !important;
  font-size:12px !important;
  letter-spacing:0.22em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  color:var(--terracotta-deep) !important;
  line-height:1.4 !important;
  display:inline-block;
  margin-bottom:18px;
}
.hero div.elementor-heading-title,
.pool-spot div.elementor-heading-title{
  color:var(--sandstone) !important;
}
.hero h1.elementor-heading-title{
  font-size:clamp(44px,7.2vw,86px) !important;
  font-weight:400 !important;
  max-width:16ch;
}
/* h2/h3/h4 headings lose the same sizing fight against Elementor's
   own defaults that h1 did — pin them explicitly everywhere. */
.elementor-widget-heading h2.elementor-heading-title{
  font-size:clamp(32px,4.4vw,52px) !important;
  font-weight:500 !important;
}
.elementor-widget-heading h3.elementor-heading-title{
  font-size:clamp(22px,2.6vw,30px) !important;
  font-weight:500 !important;
}
.elementor-widget-heading h4.elementor-heading-title{
  font-size:20px !important;
  font-weight:500 !important;
}
.quote-band div.elementor-heading-title{
  font-size:12px !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;
  font-family:var(--sans) !important;
  color:var(--charcoal-soft) !important;
  font-weight:600 !important;
  display:block;
  margin-bottom:0;
}

/* Text editor paragraphs */
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-text-editor p{
  color:var(--charcoal-soft) !important;
  font-family:var(--sans) !important;
  font-size:16px !important;
  line-height:1.6 !important;
  max-width:none !important;
}
.hero .elementor-widget-text-editor p,
.pool-spot .content .elementor-widget-text-editor p{
  color:rgba(255,253,249,0.86) !important;
}
.section-charcoal .elementor-widget-text-editor p{
  color:rgba(247,242,233,0.78) !important;
}
.quote-band .elementor-widget-text-editor p{
  font-family:var(--serif) !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:clamp(24px,3vw,36px) !important;
  color:var(--charcoal) !important;
  text-align:center !important;
  line-height:1.4 !important;
}

/* Buttons: styled entirely off the intrinsic .elementor-button class
   plus ancestor context (Section/Column classes DO work in free
   Elementor), never off a custom class on the widget itself. */
.elementor-widget-button .elementor-button{
  font-family:var(--sans) !important;
  font-size:13px !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  border-radius:0 !important;
  border:1px solid var(--charcoal) !important;
  background:transparent !important;
  color:var(--charcoal) !important;
  padding:15px 30px !important;
  box-shadow:none !important;
  transition:background .35s ease, color .35s ease !important;
}
.elementor-widget-button .elementor-button:hover{
  background:var(--charcoal) !important;
  color:var(--ivory) !important;
}
/* Light outline variant automatically inside dark hero/pool sections */
.hero .elementor-widget-button .elementor-button,
.pool-spot .elementor-widget-button .elementor-button{
  border-color:rgba(255,253,249,0.65) !important;
  color:var(--white) !important;
  background:transparent !important;
}
.hero .elementor-widget-button .elementor-button:hover,
.pool-spot .elementor-widget-button .elementor-button:hover{
  background:var(--white) !important;
  color:var(--charcoal) !important;
}
/* Solid terracotta CTA = the last (2nd) button in the hero column,
   i.e. "Plan Your Stay" */
.hero-inner .elementor-widget-button:last-of-type .elementor-button{
  background:var(--terracotta) !important;
  border-color:var(--terracotta) !important;
  color:var(--white) !important;
}
.hero-inner .elementor-widget-button:last-of-type .elementor-button:hover{
  background:var(--terracotta-deep) !important;
  border-color:var(--terracotta-deep) !important;
}
/* "Send Enquiry" inside the raw HTML form keeps its own .btn-solid
   class since that's inside an HTML widget, not a native Button
   widget, so custom classes there work fine. */
.btn-solid{
  background:var(--terracotta) !important;
  border-color:var(--terracotta) !important;
  color:var(--white) !important;
}
.btn-solid:hover{
  background:var(--terracotta-deep) !important;
  border-color:var(--terracotta-deep) !important;
}
/* "Get Directions" button (Enquire section) - underline style */
.contact-card .elementor-widget-button .elementor-button{
  border:none !important;
  padding:0 !important;
  color:var(--terracotta-deep) !important;
  background:transparent !important;
  font-size:13px !important;
}
.contact-card .elementor-widget-button .elementor-button:hover{
  color:var(--terracotta) !important;
  background:transparent !important;
}

/* Image Box (Dining / Stories cards) + Icon Box (values / access cards) */
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-icon-box .elementor-icon-box-title{
  font-family:var(--serif) !important;
  color:var(--charcoal) !important;
  font-weight:500 !important;
  font-size:21px !important;
}
.elementor-widget-image-box .elementor-image-box-description,
.elementor-widget-icon-box .elementor-icon-box-description{
  color:var(--charcoal-soft) !important;
  font-family:var(--sans) !important;
  font-size:15px !important;
}
.elementor-widget-icon-box .elementor-icon-box-icon i,
.elementor-widget-icon-box .elementor-icon-box-icon svg{
  color:var(--terracotta) !important;
  fill:var(--terracotta) !important;
  font-size:28px !important;
  width:28px !important;
  height:28px !important;
}
.section-charcoal .elementor-icon-box-title{color:var(--ivory) !important;}
.section-charcoal .elementor-icon-box-description{color:rgba(247,242,233,0.78) !important;}
.section-charcoal .elementor-icon-box-icon i,
.section-charcoal .elementor-icon-box-icon svg{
  color:var(--sandstone) !important;
  fill:var(--sandstone) !important;
}

/* Icon List (contact details, distances) */
.elementor-widget-icon-list .elementor-icon-list-text{
  font-family:var(--sans) !important;
  color:var(--charcoal-soft) !important;
  font-size:15px !important;
}
.elementor-widget-icon-list a.elementor-icon-list-text:hover{
  color:var(--terracotta) !important;
}
.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg{
  color:var(--terracotta) !important;
  fill:var(--terracotta) !important;
}

/* Video widget corners (Stay section) */
.video-thumb .elementor-widget-video,
.video-thumb .elementor-wrapper{
  border-radius:20px !important;
  overflow:hidden !important;
}
.video-thumb video{
  width:100% !important;
  height:560px;
  object-fit:cover;
  display:block;
  border-radius:20px;
}
@media (max-width:980px){
  .video-thumb video{height:340px;}
}

/* Google Maps widget */
.contact-card .elementor-widget-google_maps iframe{
  filter:sepia(12%) saturate(85%);
}

/* Play badge: the Icon widget placed inside the video-thumb column,
   targeted by its intrinsic widget class (not a custom css_class,
   which free Elementor doesn't apply to widgets). */
.video-thumb .elementor-widget-icon{
  position:absolute !important;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;
  background:var(--terracotta);
  border:2px solid rgba(255,253,249,0.85);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(20,16,10,0.35);
  pointer-events:none;
}
.video-thumb .elementor-widget-icon i,
.video-thumb .elementor-widget-icon svg{
  color:var(--ivory) !important;
  fill:var(--ivory) !important;
  font-size:22px !important;
  width:22px !important;
  height:22px !important;
  margin-left:3px;
}