/* =========================
   BRAND TOKENS
========================= */
:root {
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --cream: #F5F1ED;
  --warm-white: #FFFAF0;
  --terracotta: #B8926A;
  --terracotta-soft: #C9A989;
  --charcoal: #3D3935;
  --gray: #8B8178;
  --nav-text: var(--warm-white);
  --nav-text-solid: var(--terracotta);
  --hero-text: var(--warm-white);

  --radius-lg: 28px;
  --radius-md: 18px;
  --shadow-soft: 0 20px 50px rgba(61,57,53,0.10);
}

/* =========================
   RESET / BASE
========================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
color: var(--terracotta);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.narrow { max-width: 760px; }

.center { text-align: center; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.3px;
  margin: 0 0 0.6em 0;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }

p { color: var(--gray); margin: 0 0 1rem 0; }

.lead { font-size: 1.05rem; max-width: 60ch; }

.micro { font-size: 0.9rem; color: var(--gray); margin: 0.75rem 0 0 0; }

/* =========================
   BUTTONS
========================= */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--warm-white);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, background 0.25s ease;
}

.btn:hover {
  background: var(--terracotta-soft);
  transform: translateY(-2px);
}

/* =========================
   HEADER
========================= */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
/* INDEX HERO HEADER VISIBILITY */
.home .site-header{
  color: var(--brand-white);
}

.home .site-header a{
  color: var(--brand-white);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 16px 0;
}
/* Right-align header content over hero */
.home .header-inner{
  justify-content: flex-end;
  align-items: flex-start;
}
/* Position header content inside hero image */
.home .site-header{
  padding-top: 48px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo { height: 200px; width: auto; } /* big + visible */

.brand-name{
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 400;          /* key change */
  letter-spacing: 0.08em;   /* lightens visual weight */
  line-height: 1;
  color: var(--terracotta); /* match button tone */
}

/* let header wrap so giant brand doesn't crush nav */
.header-inner{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 16px 0;
  flex-wrap: wrap;
}

.brand{
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* nav: floating vertical list on far right (desktop) */
.main-nav{
  position: fixed;
  right: 2rem;
  top: 22px;
  z-index: 20;

  display: flex;
  flex-direction: column;
  gap: 10px;

  width: auto;
  margin: 0;
  padding: 0;

  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.04em;
}

.main-nav a{
  font-size: 0.95rem;
  color: var(--terracotta);
  opacity: 0.85;
}

.main-nav a:hover{
  opacity: 1;
}

/* =========================
   BANDS (real separation)
========================= */
.band {
  padding: clamp(64px, 9vh, 110px) 0;
}

.band-cream {
  background: var(--warm-white);
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.split.reverse {
  grid-template-columns: 0.9fr 1.1fr;
}
.split.reverse > .copy{
  grid-column: 1;
}

.split.reverse > img{
  grid-column: 2;
}

.copy { max-width: 60ch; }

.bullets {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--gray);
}

.bullets li { margin: 0.4rem 0; }

/* =========================
   HERO
========================= */
.hero {
  position: relative;
  padding: clamp(80px, 14vh, 140px) 0;
  display: block;
  background: var(--warm-white);
  overflow: hidden;
}
.hero-copy h1{
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.25;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero-actions { margin-top: 1.25rem; }

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    url("assets/hero.jpg") center/cover no-repeat;
    filter: saturate(0.9);
  z-index: 1;
}
.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 3rem;
}

.hero-image img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
}

.hero-copy,
.hero-image{
  position: relative;
  z-index: 2;
}

.hero-layout{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 3rem;
}

.hero-image{
  justify-self: end; /* right-justify the image */
}

.hero-image img{
  width: 100%;
  max-width: 520px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.hero--image{
  background: transparent;
}

.hero--image .hero-bg{
  filter: none;                    /* remove warm-ish filtering */
  background-position: 50% 18%;    /* pulls MORE sky into view */
  background-size: cover;
  background-repeat: no-repeat;
}

/* replace the overlay with a COOL, subtle one (not warm/yellow) */
.hero--image::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    rgba(10, 40, 80, 0.18),
    rgba(0, 0, 0, 0.04)
  );
  z-index: 1;
}


/* =========================
   IMAGE STACK
========================= */
.image-stack { position: relative; }

.img-large {
  width: 100%;
  border-radius: var(--radius-md);
  max-height: 520px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

.img-small {
  position: absolute;
  width: 42%;
  right: -16px;
  bottom: -16px;
  border-radius: 14px;
  max-height: 240px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

/* =========================
   G.O.D. GRID (horizontal + clickable)
========================= */
.god-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.god-card {
  display: grid;
  gap: 0.75rem;
  padding: 14px;
  background: var(--warm-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}

.god-card:hover { transform: translateY(-2px); }

.god-card img {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  object-fit: cover;
}

.god-card span {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--charcoal);
}

/* =========================
   CARD + FORM
========================= */
.card {
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: var(--shadow-soft);
}

.form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-top: 16px;
}

input[type="email"] {
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid rgba(61,57,53,0.18);
  background: #fff;
  font-size: 0.95rem;
}

/* =========================
   FOOTER
========================= */
.site-footer {
  padding: 48px 0;
  background: var(--charcoal);
  color: var(--warm-white);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-links {
  display: flex;
  gap: 1.25rem;
}

.footer-links a { opacity: 0.9; }
.footer-links a:hover { opacity: 1; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .main-nav{
  position: static;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 10px;
}
   .split,
  .split.reverse { grid-template-columns: 1fr; }
.brand-name{ font-size: 2.6rem; } /* shrink on mobile */
.logo{ height: 56px; }
   .hero-layout{ grid-template-columns: 1fr; }
.hero-image{ justify-self: start; margin-top: 18px; }

  .img-small {
    position: static;
    width: 100%;
    margin-top: 12px;
    right: auto; bottom: auto;
  }

  .god-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}
/* =========================
   MISSION PAGE
========================= */
.mission-hero {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(184,146,106,0.15), transparent 60%),
    var(--warm-white);
}

.mission-title {
  margin: 0 0 0.4rem 0;
}

.mission-sub {
  margin: 0;
  max-width: 70ch;
}

/* 2 rows of 4 tiles (responsive) */
.box-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Casa-Mon-ish big image tiles with overlay */
.box-tile {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  min-height: 280px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--warm-white);
}

.box-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: saturate(0.95);
  opacity: 0.30;
  transform: scale(1.02);
}

.box-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,250,240,0.70),
    rgba(255,250,240,0.92)
  );
}

.box-tile > * {
  position: relative;
  z-index: 1;
}

.box-tile h2 {
  margin: 0 0 0.6rem 0;
  font-size: 1.55rem;
}

.box-tile p {
  margin: 0 0 0.9rem 0;
  color: var(--charcoal);
  opacity: 0.85;
}

.box-tile strong { color: var(--charcoal); }

/* Responsive */
@media (max-width: 1100px) {
  .box-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .box-grid { grid-template-columns: 1fr; }
  .box-tile { min-height: 240px; }
}
.mission-card h3 { 
  white-space: nowrap;
}
.mission-card h3 .arrow{
  font-size: 0.75em;      /* smaller arrows */
  position: relative;
  top: -0.05em;
  margin: 0 0.15em;
}
/* =========================
   MISSION BOX ICONS
========================= */

/* Make each tile a column so the icon can sit at the bottom */
.box-tile{
  display: flex;
  flex-direction: column;
}

/* Push icon to the bottom + center it + size it */
.box-tile .card-icon{
  width: 56px;
  height: 56px;
  display: block;
  margin-top: auto;      /* forces bottom */
  margin-left: auto;     /* centers */
  margin-right: auto;    /* centers */
  margin-bottom: 18px;   /* spacing from card bottom */
  opacity: 0.6;
  pointer-events: none;
}


/* INDEX HERO VIDEO OVERRIDES (FINAL, MUST BE LAST) */

/* 1) Make the hero background area a real media layer */
.home .hero--fullbleed .hero-bg.hero-media{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 2) Video fills the hero, keeps composition calm */
.home .hero--fullbleed .hero-bg.hero-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%; /* nudge to show more sunrise; adjust 45–65% */
  display: block;
}

/* 3) Keep a subtle overlay so text remains readable */
.home .hero.hero--image::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.18)) !important;
  z-index: 1;
}

/* 4) Text centered, but pushed down ~1/3 from top */
.home .hero-content--center{
  align-items: flex-start;        /* stop vertical center */
  padding-top: 34vh;              /* ~1/3 down */
}

/* Mobile: slightly less push so it doesn’t drop too far */
@media (max-width: 820px){
  .home .hero-content--center{
    padding-top: 28vh;
  }
}

/* Optional: if your hero copy is being forced right-aligned somewhere */
.home .hero.hero--image .hero-copy{
  text-align: center !important;
}


/* styles.css */

 /* ===== Fixed header overlay ===== */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;

  transition: none;
}

.site-header .header-inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  padding: 22px clamp(16px, 4vw, 44px);
  min-height: 140px; /* taller transparent header */
}

.site-header .brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-logo{
  height: 150px; /* larger logo */
  width: auto;
  display: block;

  opacity: 1 !important;   /* always visible */
  transition: none !important;
}

.site-header.is-solid{
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* ===== Vertical nav (contained inside header band; site-wide) ===== */
.site-nav{
  position: static;               /* contained in header */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;

  margin-top: 6px;                /* keeps it inside the band */
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.site-nav a{
  font-size: 0.95rem;
  color: var(--terracotta, #a65a43) !important; /* always terracotta */
  opacity: 0.92;
}

.site-nav a:hover{ opacity: 1; }

/* Mobile */
@media (max-width: 820px){
  .site-header .header-inner{
    min-height: 120px;
    padding: 16px 16px;
  }

  .brand-logo{ height: 110px; }

  .site-nav{
    position: static;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-top: 6px;
    padding: 0;
  }
}

/* REPLACE END */

  .hero--fullbleed{ min-height: 70vh; }

  .hero-content--topright{
    position: relative;
    right: auto;
    top: auto;
    max-width: 100%;
    text-align: left;
    padding-top: 120px;
  }
}

/* header logo size */
.brand-logo{
  height: 56px;     /* ~1.5–2" on most screens */
  width: auto;
  display: block;
}
.hero--fullbleed{
  min-height: 100vh;
  padding: 0;
}

.hero--fullbleed .hero-bg{
  position: absolute;
  inset: 0;
}

.hero-content--topright{
  padding-top: 140px;
}
/* =========================================================
   GLOBAL CONSISTENCY LOCK (do not edit per-page)
   ========================================================= */

/* Global typography */
body {
  font-family: var(--font-sans);
  color: var(--charcoal);
}

h1, h2, h3, h4, h5, h6,
.hero-title {
  font-family: var(--font-serif);
}

/* Header logo size (desktop + mobile) */
.brand-logo { height: 56px; width: auto; display: block; }
@media (max-width: 820px){
  .brand-logo { height: 56px; }
}

/* Shared hero sizing + positioning */
.hero--fullbleed {
  min-height: 70vh;
  position: relative;
  padding: 0;
}

.hero--fullbleed .hero-bg{
  position: absolute;
  inset: 0;
}

.hero-content--center{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
/* =========================================================
   LOGO SIZE OVERRIDE (FINAL, SITE-WIDE)
   ========================================================= */
.brand-logo,
.logo {
  height: 120px;
  width: auto;
  display: block;
}

@media (max-width: 820px) {
  .brand-logo,
  .logo {
    height: 56px;
  }
/* =========================
   HOME HERO VIDEO (FINAL)
   ========================= */

.hero.hero--home{
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: #000; /* prevents flash if video loads late */
}

/* video layer */
.hero.hero--home .hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero.hero--home .hero-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 55%; /* adjust 45–65% to reveal more sunrise */
}

/* overlay tint */
.hero.hero--home .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    rgba(0,0,0,0.08),
    rgba(0,0,0,0.18)
  );
}

/* text layer */
.hero.hero--home .hero-content{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1100px);
  text-align: center;
  z-index: 2;
  padding: 0 2rem;
}

/* ~1/3 down from top */
.hero.hero--home .hero-content--offset{
  top: 33%;
}

/* title styling on video */
.hero.hero--home .hero-title{
  margin: 0;
  color: var(--warm-white);
  text-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

/* mobile adjust */
@media (max-width: 820px){
  .hero.hero--home{ min-height: 80vh; }
  .hero.hero--home .hero-content--offset{ top: 28%; }
}