/* ===========================================================
   INTUS — Image / Video Journey. The rooms ARE the pages.
   RH editorial restraint: full-bleed photography, warm-white type,
   hairline chrome, thin wide-tracked caps, whisper of sage only.
   =========================================================== */

/* Self-contained theme — never depends on styles.css. */
:root{
  --jp:#F4EFE7;                       /* warm white (primary text/chrome) */
  --jp-dim:rgba(244,239,231,.70);     /* secondary */
  --jp-faint:rgba(244,239,231,.42);   /* tertiary / inactive */
  --jp-line:rgba(244,239,231,.22);    /* hairline */
  --jp-line-soft:rgba(244,239,231,.12);
  --jp-ivory:#ECE2D0;                 /* italic emphasis — barely warm */
  --whisper:#A7C49E;                  /* sage — the single green whisper */
  --display:'Cinzel', Georgia, serif;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
.ij-body{background:#0b0b0a;color:var(--jp);cursor:default;
  font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased}

/* ===========================================================
   MERGED HOME: journey overlay (top) + RH content (scrolls below)
   =========================================================== */
/* While ENGAGED: the journey is pinned full-screen and the page is locked.
   We lock via position:fixed on the body so NO scrolling happens. */
html.ij-lock, html.ij-lock body{height:100%;overflow:hidden}
.ij-journey{position:fixed;inset:0;z-index:5;opacity:1;visibility:visible;
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.ij-spacer{height:0}
.home-content{position:relative;z-index:1}

/* RELEASED: journey lifts away; the document scrolls the RH content normally. */
.ij-released .ij-journey{opacity:0;visibility:hidden;transform:translateY(-6vh);pointer-events:none}
.ij-released .ij-dots,
.ij-released .ij-content{pointer-events:none}

/* full-screen transition video (covers the viewport) */
.ij-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#0b0b0a;display:block}

/* loader */
.ij-loader{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0b0b0a;
  transition:opacity .9s var(--ease)}
.ij-loader.is-hidden{opacity:0;pointer-events:none}
.ij-loader .spin{width:30px;height:30px;border-radius:50%;border:1px solid var(--jp-line-soft);border-top-color:var(--jp);animation:ijSpin 1s linear infinite}
@keyframes ijSpin{to{transform:rotate(360deg)}}

/* stacked full-screen layers, one per room, cross-faded */
.ij-stage{position:fixed;inset:0;z-index:0;background:#0b0b0a}
.ij-layer{position:absolute;inset:0;opacity:0;will-change:opacity,transform;
  background-size:cover;background-position:center;
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
.ij-layer.is-active{opacity:1}
.ij-layer.is-active .ij-kb{animation:ijKB 20s ease-in-out infinite alternate}
.ij-layer .ij-kb{position:absolute;inset:-6% -6% -6% -6%;background-size:cover;background-position:center;background-image:inherit}
@keyframes ijKB{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1.5%)}}

/* readability scrim — lighter, more editorial than before */
.ij-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,10,.34) 0%,transparent 26%,transparent 56%,rgba(11,11,10,.72) 100%),
             radial-gradient(120% 95% at 50% 40%,transparent 60%,rgba(11,11,10,.32) 100%)}

/* gradient placeholder look (used until a real image exists) */
.ij-layer[data-placeholder="1"]{background-image:none}
.ij-ph-tag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--display);font-size:clamp(2rem,6vw,4.5rem);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,239,231,.08);text-align:center;width:100%;pointer-events:none}

/* ---------- top nav ---------- */
.ij-nav{position:fixed;top:0;left:0;width:100%;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:30px 48px;pointer-events:none}
.ij-brand{display:flex;flex-direction:column;line-height:1;pointer-events:auto;cursor:pointer}
/* real logo image (gold version, sits over the dark video bg) */
.ij-logo{height:88px;width:auto;display:block;filter:drop-shadow(0 2px 12px rgba(0,0,0,.55))}
@media (max-width:860px){ .ij-logo{height:60px} }
.ij-brand .nav__mark{font-family:var(--display);font-weight:500;letter-spacing:.3em;font-size:1.4rem;color:var(--jp);padding-left:.3em}
.ij-brand .nav__sub{font-family:var(--sans);font-size:.54rem;letter-spacing:.36em;text-transform:uppercase;color:var(--jp-dim);margin-top:7px}
.ij-menu{display:flex;gap:40px;pointer-events:auto}
.ij-menu a{font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--jp-dim);position:relative;transition:color .35s;cursor:pointer}
.ij-menu a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--jp);transition:width .4s var(--ease)}
.ij-menu a:hover{color:var(--jp)}
.ij-menu a.is-active{color:var(--jp)}
.ij-menu a.is-active::after{width:100%}
.ij-portfolio-link{pointer-events:auto;font-family:var(--sans);font-size:.68rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--jp);
  border:1px solid var(--jp-line);padding:11px 22px;transition:background .4s var(--ease),border-color .4s var(--ease)}
.ij-portfolio-link:hover{border-color:var(--jp);background:rgba(244,239,231,.08)}

/* ---------- per-room content ---------- */
.ij-content{position:fixed;inset:0;z-index:20;pointer-events:none}
/* RH-style: CENTERED hero text block (horizontal + vertical center) */
.ij-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;width:100%;padding:0 7vw;
  opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),filter 1s var(--ease-out)}
.ij-page.is-active{opacity:1;transform:none;filter:none;pointer-events:auto}
/* soft radial scrim behind the text so white reads over light/beige rooms */
.ij-page::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1100px,92vw);height:min(620px,70vh);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(20,16,12,.46) 0%, rgba(20,16,12,.30) 42%, rgba(20,16,12,0) 72%)}

/* small serif/caps eyebrow, centered */
.ij-page .eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.36em;text-transform:uppercase;
  color:var(--jp);opacity:.92;margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:16px;
  text-shadow:0 1px 14px rgba(0,0,0,.4)}
.ij-page .eyebrow::before,.ij-page .eyebrow::after{content:"";width:40px;height:1px;background:rgba(244,239,231,.55)}

/* big display headline, mixed with italic serif accent (RH look) */
.ij-title{font-family:var(--display);font-weight:400;letter-spacing:.015em;line-height:1.12;
  font-size:clamp(2.4rem,5.6vw,5rem);color:#fff;margin-bottom:24px;
  text-shadow:0 2px 30px rgba(0,0,0,.42),0 1px 4px rgba(0,0,0,.3)}
.ij-title em{font-family:var(--serif);font-style:italic;color:var(--jp-ivory);font-weight:500;letter-spacing:.005em}
/* slogan hierarchy — RH-style mixed scale + font weave */
.ij-title .t-lead{font-family:var(--display);font-weight:500;letter-spacing:.02em}
.ij-title .t-script{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--jp-ivory);
  font-size:1.18em;letter-spacing:.005em}
.ij-title .t-small{font-family:var(--serif);font-weight:300;font-style:normal;font-size:.62em;
  letter-spacing:.04em;color:#fff;opacity:.9;vertical-align:.06em}
/* underlined brand slogan beneath the title */
.ij-slogan{font-family:var(--serif);font-style:italic;font-weight:400;color:#fff;opacity:.95;
  font-size:clamp(1.05rem,1.9vw,1.5rem);letter-spacing:.01em;margin:0 auto 22px;
  display:inline-block;padding-bottom:8px;border-bottom:1px solid rgba(244,239,231,.55);
  text-shadow:0 1px 14px rgba(0,0,0,.45)}
.ij-lede{font-family:var(--sans);font-size:1.08rem;font-weight:300;color:#fff;opacity:.92;max-width:54ch;margin:0 auto;
  line-height:1.7;letter-spacing:.01em;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.ij-list,.ij-steps{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:18px}
.ij-list li,.ij-steps li{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--jp);display:flex;align-items:center;gap:12px}
.ij-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--jp-faint);flex:none}
.ij-steps{counter-reset:s}
.ij-steps li::before{content:counter(s,decimal-leading-zero);counter-increment:s;color:var(--jp-dim);font-family:var(--sans);font-size:.8rem;letter-spacing:.1em}
.ij-cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:30px;pointer-events:auto}
.ij-cta a:not(.btn){font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--jp);border-bottom:1px solid var(--jp);padding-bottom:5px;transition:opacity .3s}
.ij-cta a:not(.btn):hover{opacity:.7}
.ij-link{pointer-events:auto;display:inline-block;margin-top:24px;font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--jp);border-bottom:1px solid var(--jp);padding-bottom:5px;transition:opacity .3s}
.ij-link:hover{opacity:.7}
.ij-cue{position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);
  font-family:var(--sans);font-size:.66rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#fff;opacity:.9;
  text-shadow:0 1px 12px rgba(0,0,0,.5);animation:ijCue 2.6s var(--ease) infinite}
@keyframes ijCue{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}

/* ---------- progress rail (one dot per room/page) ---------- */
.ij-dots{position:fixed;right:42px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:18px;pointer-events:auto}
.ij-dots button{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:0;color:var(--jp-faint);
  font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;transition:.3s}
.ij-dots button .dot{width:7px;height:7px;border-radius:50%;background:var(--jp-faint);transition:.45s var(--ease);flex:none}
.ij-dots button .lbl{opacity:0;transform:translateX(6px);transition:.3s;white-space:nowrap}
.ij-dots button:hover{color:var(--jp-dim)}
.ij-dots button:hover .lbl{opacity:1;transform:none}
.ij-dots button.is-active{color:var(--jp)}
.ij-dots button.is-active .dot{background:var(--whisper);transform:scale(1.35)}  /* the green whisper */
.ij-dots button.is-active .lbl{opacity:1;transform:none}

/* scroll progress bar at very top */
.ij-bar{position:fixed;top:0;left:0;height:1px;width:0;background:var(--jp);opacity:.5;z-index:50;transition:width .6s var(--ease)}

@media (max-width:860px){
  .ij-nav{padding:20px 22px}
  .ij-menu{display:none}
  .ij-page{padding:0 24px}
  .ij-title{font-size:clamp(2rem,8vw,3.2rem)}
  .ij-dots{right:16px;gap:13px}
  .ij-dots button .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ij-layer.is-active .ij-kb{animation:none}
  .ij-cue{animation:none}
}

/* ===========================================================
   MOBILE (≤920px): plain vertical scroll — no journey engine.
   The journey becomes a normal hero block at the top; the RH
   content sections flow normally below it. JS disables the
   scroll-lock / video morph / horizontal track on mobile.
   =========================================================== */
@media (max-width:920px){
  html.ij-lock, html.ij-lock body{height:auto!important;overflow:visible!important;position:static!important}
  /* journey = hero block in normal flow (not a fixed overlay) */
  .ij-journey{position:relative!important;height:100svh;min-height:560px;overflow:hidden;opacity:1!important;visibility:visible!important;transform:none!important}
  .ij-video,.ij-stage,.ij-content,.ij-loader{position:absolute!important}
  .ij-content{height:100%}
  .ij-page{padding:90px 24px 70px}
  /* hide desktop-only chrome + the horizontal track */
  .ij-dots,.ij-bar,.hh-wrap,.hh-wipe{display:none!important}
  /* content sections scroll vertically below the hero */
  .home-content{display:block!important;position:relative;z-index:1}
}