@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

  * {
    --heading-font: "Playfair Display", serif;
    --heading-text-transform: uppercase;
  }

  /* Section headlines (h2) are authored in sentence case in the markup
     - override the site-wide uppercase heading transform above just
     for h2 so they render as written instead of shouting caps. */
  h2 {
    text-transform: none;
  }

  :root{
    --ink:#080b12;
    --ink-soft:#10131f;
    --dusk:#7e88ad;
    --dusk-dim:#565f80;
    --cream:#f4ecdc;
    --gold:#dbaa68;
    --gold-dim:#a9835a;
    --overlay-top: rgba(9,12,20,.08);
    --overlay-mid: rgba(8,10,16,.18);
    --overlay-bottom: rgba(4,5,9,.45);
  }



  /* ---------- Sticky header nav across every section ----------
     Theme default is `header{position:absolute}`, only promoted to
     `fixed` once js/designesia.js's scroll handler adds `.smaller`
     (triggered by window.pageYOffset > 0). That handler never fires
     here: the panel-stack (js/gsap-section-transitions.js) drives
     section changes via GSAP transforms with the real window scroll
     never moving, so the header would stay at its static top-of-
     document position instead of tracking the viewport once real
     scrolling exists (e.g. the prefers-reduced-motion fallback in
     css/gsap-section-transitions.css, which unlocks body scrolling).
     Fixing it unconditionally keeps the nav pinned to the viewport
     for every section in both modes. */
  header {
    position: fixed;
    top: 0;
  }

  .hero{
    position:relative;
    width:100vw; min-height:100vh;
    overflow:hidden;
    isolation:isolate;
  }

  .bg-wrap{
    position:relative;
    overflow:hidden;
    height:100%;
  }

  .bg-img{
    display:block;
    width:100%; height:100%;
    object-fit:cover;
    filter:saturate(1.05) contrast(1.02);
  }

  .overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, var(--overlay-top) 0%, var(--overlay-mid) 45%, var(--overlay-bottom) 100%),
      radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.20) 100%);
    z-index:2;
  }

  .grain{
    position:absolute; inset:0;
    z-index:3;
    pointer-events:none;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- Top bar ---------- */
  .topbar{
    position:absolute; top:0; left:0; right:0;
    z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:34px 5vw 0;
  }

  .brand{
    font-family:'Cormorant Garamond', serif;
    color:var(--cream);
    line-height:1;
  }
  .brand .mark{
    font-size:26px;
    letter-spacing:.12em;
    font-weight:600;
  }
  .brand .sub{
    display:block;
    margin-top:4px;
    font-family:'Poppins',sans-serif;
    font-size:9px;
    letter-spacing:.5em;
    color:var(--gold-dim);
    font-weight:400;
  }

  .nav{
    display:flex; gap:34px;
    list-style:none;
  }
  .nav li{
    font-size:11px;
    letter-spacing:.18em;
    color:rgba(244,236,220,.55);
    font-weight:400;
    cursor:default;
    transition:color .3s ease;
  }
  .nav li:hover{ color:var(--cream); }

  @media (max-width:760px){ .nav{ display:none; } }

  /* ---------- Tagline ---------- */
  .tagline{
    position:absolute;
    top:11%;
    left:50%;
    transform:translateX(-50%);
    z-index:9;
    text-align:center;
    width:min(90vw, 800px);
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    color:var(--cream);
    line-height:1.5;
    text-shadow:0 2px 18px rgba(0,0,0,.5);
  }
  .tagline .l1{
    display:block;
    font-size:clamp(17px,2.3vw,28px);
    color:rgba(244,236,220,.78);
  }
  .tagline .l2{
    display:block;
    font-size:clamp(20px,2.9vw,34px);
    color:var(--gold);
    margin-top:2px;
  }

  /* ---------- Word field ---------- */
  .word-field{
    position:absolute; inset:0;
    z-index:6;
  }

  .word-parallax{
    position:absolute;
    will-change:transform;
  }
  .word-float{
    will-change:transform;
  }
  .word-zoom{
    display:inline-block;
    will-change:transform,opacity;
    transform-origin:center center;
  }
  .word-hover{
    display:inline-block;
    font-family:'Poppins', sans-serif;
    letter-spacing:.02em;
    white-space:nowrap;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease, text-shadow .45s ease;
    cursor:default;
  }
  .word-hover:hover{
    transform:scale(1.14);
    filter:brightness(1.35);
  }

  /* ---------- Scroll cue ---------- */
  .scroll-cue{
    position:absolute;
    bottom:28px; left:50%;
    transform:translateX(-50%);
    z-index:9;
    display:flex; flex-direction:column; align-items:center;
    gap:8px;
  }
  .scroll-cue span{
    font-size:9px;
    letter-spacing:.35em;
    color:rgba(244,236,220,.45);
    font-family:'Poppins',sans-serif;
  }
  .scroll-line{
    width:1px; height:34px;
    background:linear-gradient(180deg, rgba(219,170,104,.9), rgba(219,170,104,0));
  }

  @media (prefers-reduced-motion: reduce){
    .bg-img{ transform:none; }
  }

  @media (max-width:600px){
    .tagline{ top:9%; width:92vw; }
    .brand .mark{ font-size:20px; }
  }

  /* ---------- Why Choose Maney: promise cards ---------- */
  #room-carousel.owl-carousel .owl-stage{
    display: flex;
  }
  #room-carousel.owl-carousel .owl-stage .owl-item{
    display: flex;
    height: auto;
  }
  #room-carousel .item{
    display: flex;
    width: 100%;
  }
  .promise-card{
    display: flex;
    flex-direction: column;
    width: 100%;
    /* background: var(--cream); */
    /* border-radius: 4px; */
    overflow: hidden;
    height: 100%;
  }
  .promise-card .promise-img{
    overflow: hidden;
    flex-shrink: 0;
  }
  .promise-card .promise-img img{
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
  .promise-card-body{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 5px;
    text-align: center;
  }
  .promise-card-body .promise-head{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
  }
  .promise-card-body .promise-number{
    font-family: var(--heading-font);
    font-size: 46px;
    line-height: 1;
    color: var(--gold);
    font-weight: 600;
  }
  .promise-card-body h3{
    color: #B07E50;
    font-size: 20px;
    line-height: 1.3;
    margin: 6px 0 0;
    text-transform: none;
  }
  .promise-card-body p{
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 100;
    letter-spacing: 0.03em;
    margin: 0;
  }
  @media (max-width: 767px){
    .promise-card-body .promise-number{ font-size: 36px; }
    .promise-card .promise-img img{ height: 180px; }
  }

  /* nav arrows sit outside the cards instead of overlapping them */
  .owl-custom-nav.menu-float{
    padding: 0 55px;
  }
  .owl-custom-nav.menu-float .btn-prev{
    left: 0;
  }
  .owl-custom-nav.menu-float .btn-next{
    right: 0;
  }
  .owl-custom-nav.menu-float .btn-prev:before,
  .owl-custom-nav.menu-float .btn-next:before{
    width: 44px;
    height: 44px;
    line-height: 24px;
    border-radius: 50%;
  }
  @media (max-width: 767px){
    .owl-custom-nav.menu-float{
      padding: 0 34px;
    }
  }

  /* ---------- Full-screen stacked panels: Observer-driven section transitions ----------
     .panel-stack holds every .fs-panel (intro-video, hero, philosophy,
     what-we-do, team, why-choose, contact - the footer is a plain element
     inside the contact panel, not a panel of its own - see index.html).
     It is a single
     one-viewport-tall box; every .fs-panel inside is absolutely
     stacked on top of one another within it (position:absolute,
     inset:0), not laid out one-after-another in normal flow - so at
     any moment only ONE viewport-height box exists in the document,
     never two sections sitting in flow at once.

     There is no page-level scrolling at all here (css/style.css sets
     `body{overflow:hidden}` unconditionally) - .panel-stack just sits
     as an ordinary 100dvh block and GSAP Observer
     (js/gsap-section-transitions.js) listens for wheel/touch gestures
     directly on the window instead. All panels start hidden
     (autoAlpha:0, set in JS); on each gesture, Observer's callback
     runs one discrete GSAP timeline that slides the target panel from
     yPercent 100/-100 to 0 (direction depends on scroll direction),
     covering whatever's beneath, then hides the previous panel once
     it's fully covered. See that file for the transition logic itself
     - this stylesheet only supplies the stacking/sizing.

     100dvh is layered on top of the 100vh fallback so panels aren't
     mis-sized by mobile browser chrome (address bar) showing/hiding. */
  .panel-stack {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .fs-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* "safe center" (falls back to plain center on unsupported browsers)
       stops the flexbox overflow-centering bug where the start of
       content taller than the box becomes unreachable when scrolling. */
    justify-content: safe center;
    /* No internal scroll: every panel's content is expected to fit within the
       viewport (see .promise-card sizing, contact/footer layout). Panels are
       Observer "stops", not independently scrollable areas - overflow is
       clipped rather than made scrollable so no panel ever shows its own
       scrollbar. If a panel's content genuinely grows taller than the
       viewport on some breakpoint, that content needs to shrink/reflow
       instead of relying on scroll to reach it. */
    overflow: hidden;
    box-sizing: border-box;
    will-change: transform;
  }

  /* fs-panel already sets its own height/centering; drop the theme's
     default 100px top/bottom section padding so it doesn't fight the
     flex centering, and let no-top/no-bottom variants stay as-is.
     Kept small (not 0) purely so content doesn't touch the fixed
     header/viewport edge - now that panels clip instead of scrolling
     (overflow:hidden above), less padding also means more headroom
     for a panel's own content to actually fit the viewport. */
  section.fs-panel {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  @media (prefers-reduced-motion: reduce) {
    /* JS skips creating the Observer entirely for reduced-motion users
       (see js/gsap-section-transitions.js) - fall back here to plain
       stacked full-height sections in normal document flow so the page
       still reads correctly with ordinary scrolling and no motion.
       (Requires the body-scroll unlock in gsap-section-transitions.css,
       since css/style.css sets body{overflow:hidden} unconditionally.) */
    .panel-stack {
      height: auto;
      overflow: visible;
    }
    .fs-panel {
      position: relative;
      height: 100vh;
      height: 100dvh;
      transform: none !important;
    }
  }

  /* ---------- Button focus-ring flash fix ----------
     Bootstrap's reboot only suppresses the native mouse-focus outline
     for <button> elements (button:focus:not(:focus-visible)); it
     doesn't cover <input type="submit"> like #send_message, so
     clicking it flashed the browser's default focus ring. */
  .btn-main:focus,
  .btn-main:active {
    outline: none;
    box-shadow: none;
  }

  /* ---------- Mobile sticky WhatsApp / Call bar ----------
     Fixed to the viewport bottom, mobile/tablet only (d-lg-none in markup). */
  .mobile-contact-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    background: #250304;
    border-top: 1px solid #B07E50;
  }
  .mobile-contact-bar a {
    flex: 1 1 50%;
    text-align: center;
    padding: 14px 10px;
    color: #B07E50;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .02em;
  }
  .mobile-contact-bar a:first-child {
    border-right: 1px solid #B07E50;
  }
  @media (max-width: 991.98px) {
    body {
      padding-bottom: 48px;
    }
  }

  #philosophy .bg-section {
    width: 100%;
    height: 100%;
    background-image: url('../images/philosophy.jpeg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Mobile/tablet only: show the right/end side of the philosophy
     background (with a little of the left still in view) and darken
     it so the text stays readable. Desktop appearance above is
     untouched. background-size must switch to cover here - the
     desktop rule's 100% 100% stretches the image to exactly fill the
     box with no overflow, so background-position alone would have no
     visible effect. */
  @media (max-width: 991.98px) {
    #philosophy .bg-section {
      background-size: cover;
      background-position: 80% center;
    }
    #philosophy .bg-section::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }

  #what-we-do .bg-section {
    width: 100%;
    height: 100%;
    background-image: url('../images/what-we-do.jpeg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Mobile/tablet only: show the left/start side of the what-we-do
     background (with a little of the right still in view) and darken
     it so the text stays readable. Desktop appearance above is
     untouched. background-size must switch to cover here - the
     desktop rule's 100% 100% stretches the image to exactly fill the
     box with no overflow, so background-position alone would have no
     visible effect. */
  @media (max-width: 991.98px) {
    #what-we-do .bg-section {
      background-size: cover;
      background-position: 20% center;
    }
    #what-we-do .bg-section::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }

  #team .bg-section {
    width: 100%;
    height: 100%;
    background-image: url('../images/team.jpeg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  #why-choose .bg-section {
    width: 100%;
    height: 100%;
    background-image: url('../images/why-choose-bg.jpeg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Mobile/tablet only: show the right/end side of the team
     background (with a little of the left still in view) and darken
     it so the text stays readable. Desktop appearance above is
     untouched. background-size must switch to cover here - the
     desktop rule's 100% 100% stretches the image to exactly fill the
     box with no overflow, so background-position alone would have no
     visible effect. */
  @media (max-width: 991.98px) {
    #team .bg-section {
      background-size: cover;
      background-position: 80% center;
    }
    #team .bg-section::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }