/* ============================
   BODY
============================ */

body{
  background:var(--color-bg-primary);
  color:var(--color-text-secondary);
  font-family:var(--font-body);
  line-height:1.7;
  font-size:16px;

  display:flex;
  flex-direction:column;
  min-height:100svh;

}

main{
  flex:1;
}

/* Loader global state */
body.loading {
  overflow: hidden;
}

html{
  scrollbar-gutter: stable;
}

/* HERO */
body.loading .home-hero{
  opacity: 0;
}

body:not(.loading) .home-hero{
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(0.25,0.1,0.25,1);
}

/* PRELOAD (highest priority) */
body.preload .home-hero{
  opacity: 0 !important;
  transform: none !important;
}

/* ============================
   HEADINGS
============================ */

h1,
h2,
h3,
h4{
  font-family:var(--font-heading);
  color:var(--color-text-primary);
  line-height:1.35;
  letter-spacing:clamp(0.12em, 0.3vw, 0.18em);
  margin-bottom:var(--space-sm);
}

/* heading scale */

h1{
  font-size:clamp(40px,5vw,80px);
}

h2,h3{
  font-size:clamp(1.2rem,3vw,1.6rem);
}

h4{
  font-size:var(--text-base);
}

/* ============================
   PARAGRAPHS
============================ */

p{
  margin-bottom:var(--space-xs);
  color:var(--color-text-secondary);
  font-size:var(--text-base);
  line-height:clamp(1.6, 1.2vw, 1.7);
}

/* ============================
   LINKS
============================ */

a{
  color:var(--color-text-primary);
  text-decoration:none;

  transition:
  opacity var(--transition-fast),
  color var(--transition-fast);
}

a:hover{
  opacity:0.8;
  color:var(--color-accent);
}

/* ============================
   TEXT UTILITIES
============================ */

.text-muted{
  color:var(--color-text-muted);
}

.text-accent{
  color:var(--color-accent);
}

/* ============================
   TEXT ALIGNMENT
============================ */

.text-left{
  text-align:left;
}

.text-center{
  text-align:center;
}

.text-right{
  text-align:right; 
}


/* ============================
   LISTS
============================ */

ul,
ol{
  margin-bottom:var(--space-sm);
  padding-left:var(--space-sm);
}

li{
  margin-bottom:0.6rem;
}

/* ============================
   MEDIA
============================ */

img,
video{
  max-width:100%;
  height:auto;
}


/* ============================
   TEXT ON MEDIA (IMAGE / VIDEO BACKGROUNDS)
============================ */



/* headings */
.on-media h1,
.on-media h2,
.on-media h3,
.on-media h4{
  color:#ffffff;
}

/* paragraphs + text elements */
.on-media p,
.on-media li,
.on-media span{
  color:rgba(255,255,255,0.85);
}

/* links */
.on-media a{
  color:#ffffff;
}

.on-media a:hover{
  color:var(--color-accent);
}

/* CTA */

.on-media .section-cta,
.on-media .contact-cta{
  border:1px solid rgba(255,255,255,0.5);
  color:#ffffff;
}

.on-media .section-cta:hover,
.on-media .contact-cta:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.8);
}

/* ============================
   REMOVE MOBILE TAP HIGHLIGHT
============================ */
a,
button,
.nav-toggle,
.nav-trigger {
  -webkit-tap-highlight-color: transparent;
}

/* ============================
   HERO SPLIT (HAVEN STYLE)
============================ */

.hero-split {
  min-height: 100dvh;
  display: flex;
  align-items: center;

  background: #a69f96; /* adjust later to match brand */
}

.hero-split-left {
  transform: translateY(6vh);
}

.hero-split-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;

  display: grid;
  /*grid-template-columns: 1.5fr 1fr;*/
  gap:2rem;
  align-items: flex-start;

  padding: clamp(1rem, 3vw, 4rem);
}

/* LEFT SIDE — MASSIVE TYPE */
.hero-title {
  font-family: var(--font-heading);
  display: inline-block;
  font-size: clamp(8rem, 10vw, 12rem);
  line-height: 1;

  letter-spacing: -0.015em; /* tighter = more premium */
  font-weight: 600;

  color: rgba(255,255,255,0.85);
}

/* RIGHT SIDE */
.hero-split-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-self: flex-end;
  transform: translateY(3vh);
}

.hero-eyebrow {
  font-size: clamp(1.2rem, 1.5vw, 2rem);
  line-height: 1.4;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  max-width: 360px;
}