/* ==========================================================================
   TERRAVANA ESTATES — SHARED STYLESHEET
   ========================================================================== */

:root{
  --forest-950:#0f1f16;
  --forest-800:#1f3a2e;
  --forest-700:#284a3a;
  --forest-600:#335a47;
  --brass-500:#c8a24a;
  --brass-300:#e6d3a0;
  --ivory-50:#f8f4ea;
  --ivory-100:#f1ead7;
  --ink-900:#1c2019;
  --ink-600:#565248;
  --line:#dcd2b6;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink-900);
  background:var(--ivory-50);
  font-size:15px;
  line-height:1.6;
}
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif;font-weight:500;}
.eyebrow{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
  font-weight:600;
  color:var(--brass-500);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
ul{margin:0;padding:0;}

/* ---------- NAV ---------- */
nav.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(15,31,22,0.97);
  backdrop-filter:blur(6px);
}
.navrow{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:var(--maxw);margin:0 auto;}
.logo{color:var(--ivory-50);font-size:19px;letter-spacing:1px;font-weight:500;font-family:'Fraunces',serif;}
.logo b{color:var(--brass-500);font-weight:500;}
.navlinks{display:flex;gap:26px;align-items:center;}
.navlinks a{color:#d9d3c2;font-size:13px;letter-spacing:0.3px;white-space:nowrap;}
.navlinks a:hover,.navlinks a.active{color:var(--brass-300);}
.navcta{
  background:var(--brass-500);color:var(--forest-950);
  padding:9px 18px;border-radius:2px;font-size:12.5px;font-weight:600;
  letter-spacing:0.3px;white-space:nowrap;
}
.navtoggle{display:none;background:none;border:none;color:var(--ivory-50);font-size:22px;cursor:pointer;}

/* ---------- BUTTONS ---------- */
.btn-gold,.btn-outline,.btn-dark,.btn-line{
  display:inline-block;
  padding:14px 26px;font-size:13.5px;font-weight:600;letter-spacing:0.3px;border-radius:2px;
  cursor:pointer;border:none;font-family:'Inter',sans-serif;
}
.btn-gold{background:var(--brass-500);color:var(--forest-950);}
.btn-outline{border:1px solid rgba(248,244,234,0.4);color:var(--ivory-50);background:transparent;}
.btn-dark{background:var(--forest-950);color:var(--ivory-50);}
.btn-line{border:1px solid var(--forest-950);color:var(--forest-950);background:transparent;}
.btn-gold:hover{background:#b6924a;}
.btn-outline:hover{background:rgba(248,244,234,0.08);}

/* ---------- HERO (large, homepage) ---------- */
.hero{
  position:relative;min-height:640px;display:flex;align-items:center;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(200,162,74,0.18), transparent 55%),
    linear-gradient(160deg,var(--forest-950) 0%, var(--forest-800) 55%, var(--forest-700) 100%);
  overflow:hidden;
}
.contour{position:absolute;inset:0;opacity:0.35;pointer-events:none;}
.hero-inner{position:relative;z-index:2;padding:120px 32px 90px;max-width:var(--maxw);margin:0 auto;width:100%;}
.hero h1{color:var(--ivory-50);font-size:56px;line-height:1.12;max-width:680px;margin:18px 0 20px;}
.hero p{color:#cdd4c9;font-size:16.5px;max-width:520px;margin:0 0 34px;}
.herobtns{display:flex;gap:14px;flex-wrap:wrap;}
.scrollhint{position:absolute;bottom:28px;left:32px;color:#9fae9f;font-size:11px;letter-spacing:2px;text-transform:uppercase;z-index:2;}

/* ---------- PAGE HERO (inner pages, smaller) ---------- */
.page-hero{
  background:linear-gradient(160deg,var(--forest-950) 0%, var(--forest-800) 100%);
  padding:100px 0 64px;color:var(--ivory-50);
}
.page-hero .eyebrow{color:var(--brass-300);}
.page-hero h1{font-size:38px;margin:10px 0 14px;max-width:640px;}
.page-hero p{color:#cdd4c9;max-width:560px;margin:0;font-size:15.5px;}
.breadcrumb{font-size:12px;color:#9fae9f;margin-bottom:18px;}
.breadcrumb a:hover{color:var(--brass-300);}

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

  /* Outer Section Wrapper */
  .possibilities-section {
    --bg-color: #f6f3eb;         /* Warm cream background from screenshot */
    --card-bg: #ffffff;         /* Pure white card body */
    --text-dark: #1e221f;       /* Deep warm dark for headers */
    --text-muted: #5e6460;      /* Muted charcoal for description */
    --accent-gold: #b58d3d;     /* Warm gold timeline color */
    --border-color: #e6e0d3;    /* Subtle card border */
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.08);
    --radius: 16px;
    --transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);

    background-color: var(--bg-color);
    color: var(--text-dark);
    font-family: 'Plus Jakarta Sans', sans-serif;
    width: 100%;
    padding: 80px 0;
  }

  .possibilities-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Centered Main Container */
  .possibilities-section .container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
  }

  /* Section Header */
  .possibilities-section .section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
  }

  .possibilities-section .sub-heading {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: var(--accent-gold);
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .possibilities-section .main-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.25;
  }

  /* Timeline Wrapper with Vertical Connecting Line */
  .possibilities-section .timeline {
    position: relative;
    padding-left: 40px;
  }

  /* The Golden Vertical Line (From Screenshot) */
  .possibilities-section .timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 11px;
    width: 2px;
    background-color: var(--accent-gold);
    opacity: 0.4;
  }

  /* Timeline Item Wrapper */
  .possibilities-section .timeline-item {
    position: relative;
    margin-bottom: 48px;
  }

  .possibilities-section .timeline-item:last-child {
    margin-bottom: 0;
  }

  /* Golden Dot on Timeline Line */
  .possibilities-section .timeline-dot {
    position: absolute;
    left: -40px;
    top: 28px;
    width: 12px;
    height: 12px;
    background-color: var(--accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--bg-color);
    z-index: 2;
  }

  /* Card Component */
  .possibilities-section .card {
    background-color: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
  }

  .possibilities-section .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }

  /* Card Image Frame */
  .possibilities-section .card-image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: #eae5d9;
  }

  .possibilities-section .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .possibilities-section .card:hover .card-image {
    transform: scale(1.05);
  }

  /* Card Content Area */
  .possibilities-section .card-content {
    padding: 32px 28px;
  }

  /* Stage Label / Tag */
  .possibilities-section .card-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--accent-gold);
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .possibilities-section .card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.3;
  }

  .possibilities-section .card-description {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* Desktop View Layout (Horizontal Card Split) */
  @media (min-width: 768px) {
    .possibilities-section .card {
      flex-direction: row;
      align-items: stretch;
    }

    .possibilities-section .card-image-wrapper {
      width: 45%;
      min-height: 220px;
    }

    .possibilities-section .card-content {
      width: 55%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

/* ---------- SECTIONS ---------- */
section{padding:88px 0;}
.section-sm{padding:56px 0;}
.section-ivory{background:var(--ivory-50);}
.section-alt{background:var(--ivory-100);}
.section-dark{background:var(--forest-950);color:var(--ivory-50);}
.center{text-align:center;}
.lede{font-size:16px;color:var(--ink-600);max-width:620px;margin:14px 0 0;}
.section-dark .lede{color:#c7cec3;}
h2.title{font-size:32px;margin:8px 0 0;}
h1.title{font-size:38px;margin:8px 0 0;}

/* ---------- STAT ROW ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat{padding:28px 20px;text-align:center;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat .arrow{font-size:26px;color:var(--brass-500);font-family:'Fraunces',serif;}
.stat .label{font-size:12.5px;color:var(--ink-600);margin-top:6px;letter-spacing:0.3px;}

/* ---------- POSSIBILITIES / ICON GRID ---------- */
.poss-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);margin-top:56px;border:1px solid var(--line);}
.poss-item{background:var(--ivory-50);padding:26px 18px;text-align:center;}
.poss-item .ico{width:34px;height:34px;margin:0 auto 12px;border-radius:50%;border:1px solid var(--brass-500);display:flex;align-items:center;justify-content:center;color:var(--brass-500);font-family:'Fraunces',serif;font-size:15px;}
.poss-item .name{font-size:12.5px;font-weight:500;}


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

.possibilities{
  --cream: #f4f0e6;
  --ink: #1f2420;
  --gold: #b98a3e;
  --green-1: #1f5c3f;

  background: var(--cream);
  font-family: 'Jost', sans-serif;
  color: var(--ink);
  padding: 80px 24px;
}

.possibilities .wrap{
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

.possibilities .eyebrow{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.possibilities h1{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 56px;
}

.possibilities .grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  text-align: left;
}

.possibilities .card{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 3.6;
  box-shadow: 0 10px 24px rgba(31,36,32,0.12);
  isolation: isolate;
}

.possibilities .card img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  z-index: 0;
}

.possibilities .card:hover img{
  transform: scale(1.06);
}

.possibilities .badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 20px;
}

.possibilities .caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 30px 16px 16px;
  background: linear-gradient(180deg, rgba(31,92,63,0) 0%, rgba(31,92,63,0.55) 45%, rgba(31,92,63,0.92) 100%);
}

.possibilities .caption .tag{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.possibilities .caption h3{
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

@media (max-width: 1000px){
  .possibilities .grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .possibilities .grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .possibilities{ padding: 56px 16px; }
}
/* ---------- FRAMEWORK STEPS ---------- */
.steps{display:flex;flex-wrap:wrap;gap:0;margin-top:56px;counter-reset:step;}
.step{flex:1 1 100px;min-width:100px;text-align:center;padding:0 10px;position:relative;}
.step::before{
  counter-increment:step;content:counter(step);
  width:34px;height:34px;border-radius:50%;
  background:var(--forest-800);color:var(--ivory-50);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;font-size:13px;font-family:'Fraunces',serif;
}
.step .stitle{font-size:12px;font-weight:600;line-height:1.3;}
.steprow{display:flex;align-items:flex-start;}
.stepline{flex:0 0 24px;height:1px;background:var(--line);margin-top:17px;}

/* ---------- CHECKLIST ---------- */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 40px;margin-top:56px;}
.check-item{display:flex;gap:12px;align-items:flex-start;font-size:14px;}
.check-item .tick{color:var(--brass-500);font-family:'Fraunces',serif;flex:0 0 auto;}

/* ---------- TIMELINE ---------- */
.tl{position:relative;margin-top:64px;padding-left:26px;}
.tl::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line);}
.tl-item{position:relative;padding-bottom:44px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:'';position:absolute;left:-26px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--brass-500);}
.tl-item h3{font-size:19px;margin:0 0 6px;}
.tl-item p{color:var(--ink-600);font-size:14px;margin:0;max-width:520px;}

/* ---------- PROJECT / CONTENT CARDS ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.proj-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.proj-card{background:var(--ivory-50);border:1px solid var(--line);}

.proj-img{
  height:170px;
  background-color: var(--forest-950); /* fallback while image loads */
  background-size: cover;              /* fills the box, crops overflow */
  background-position: center;         /* keeps the image centered */
  background-repeat: no-repeat;
  position:relative;
}
.proj-img.tall{height:230px;}

/* keep this diagonal texture overlay if you still want it on top of the photo */
.proj-img::after{
  content:'';
  position:absolute;inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(230,211,160,0.10) 0 2px, transparent 2px 26px);
}

.proj-body{padding:22px;}
.proj-tag{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brass-500);font-weight:600;}
.proj-body h3{font-size:19px;margin:8px 0 6px;}
.proj-body p{font-size:13px;color:var(--ink-600);margin:0 0 16px;}
.proj-link{font-size:12.5px;font-weight:600;border-bottom:1px solid var(--brass-500);padding-bottom:2px;display:inline-block;}


/* ---------- PROMISE / DARK BAND ---------- */
.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:48px;align-items:start;}
.promise-list{list-style:none;}
.promise-list li{padding:14px 0;border-bottom:1px solid rgba(248,244,234,0.15);font-size:14.5px;display:flex;gap:12px;}
.promise-list li:last-child{border-bottom:none;}
.promise-list .tick{color:var(--brass-500);}

/* ---------- TEASER 3-COL ---------- */
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.teaser-card{padding:28px 24px;background:var(--ivory-50);border:1px solid var(--line);}
.teaser-card .eyebrow{margin-bottom:10px;}
.teaser-card h3{font-size:19px;margin:0 0 10px;}
.teaser-card p{font-size:13.5px;color:var(--ink-600);margin:0 0 16px;}

/* ---------- TESTIMONIALS ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:56px;}
.testi-card{padding:30px;background:var(--ivory-100);border-left:3px solid var(--brass-500);}
.testi-card p.quote{font-family:'Fraunces',serif;font-size:18px;font-style:italic;line-height:1.5;margin:0 0 18px;}
.testi-name{font-size:13px;font-weight:600;}
.testi-role{font-size:12px;color:var(--ink-600);}

/* ---------- GALLERY ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:6px;margin-top:56px;}
.gal-grid div{background:linear-gradient(135deg,var(--forest-600),var(--forest-950));position:relative;overflow:hidden;}
.gal-grid div::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(115deg, rgba(230,211,160,0.08) 0 2px, transparent 2px 26px);}
.gal-grid div:nth-child(1){grid-column:span 2;grid-row:span 2;}
.gal-grid div:nth-child(6){grid-column:span 2;}
.gal-grid.full div{grid-auto-rows:180px;}

/* ---------- CONTACT / CTA BAND ---------- */
.contact-band{background:var(--brass-500);padding:64px 0;text-align:center;}
.contact-band h2{color:var(--forest-950);font-size:30px;margin:8px 0 22px;}
.contact-band .eyebrow{color:var(--forest-800);}
.contact-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
footer{background:var(--forest-950);color:#aab5a8;padding:56px 0 26px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(248,244,234,0.12);}
.foot-grid h4{color:var(--ivory-50);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 16px;font-family:'Inter',sans-serif;font-weight:600;}
.foot-grid a{display:block;font-size:13px;padding:5px 0;color:#aab5a8;}
.foot-grid a:hover{color:var(--brass-300);}
.foot-logo{color:var(--ivory-50);font-size:18px;margin-bottom:10px;}
.foot-tag{font-size:13px;color:#8a9689;max-width:260px;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:12px;color:#788378;flex-wrap:wrap;gap:10px;}

/* ---------- FORMS ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}
.form-grid.full{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-600);}
.field input,.field select,.field textarea{
  border:1px solid var(--line);background:var(--ivory-50);padding:12px 14px;
  font-family:'Inter',sans-serif;font-size:14px;border-radius:2px;color:var(--ink-900);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brass-500);outline-offset:1px;}
.field-span2{grid-column:span 2;}

/* ---------- FAQ ACCORDION ---------- */
.accordion{margin-top:48px;border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-q{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 4px;cursor:pointer;font-weight:500;font-size:15px;background:none;border:none;
  width:100%;text-align:left;font-family:'Inter',sans-serif;color:var(--ink-900);
}
.acc-q .plus{color:var(--brass-500);font-size:18px;transition:transform .2s;}
.acc-item.open .plus{transform:rotate(45deg);}
.acc-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.acc-a p{font-size:14px;color:var(--ink-600);padding:0 4px 20px;margin:0;max-width:640px;}

/* ---------- CATEGORY PILLS ---------- */
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;}
.pill{border:1px solid var(--line);padding:8px 16px;border-radius:20px;font-size:12.5px;font-weight:500;}
.pill.active{background:var(--forest-800);color:var(--ivory-50);border-color:var(--forest-800);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .navlinks{
    position:absolute;top:100%;left:0;right:0;
    background:var(--forest-950);flex-direction:column;align-items:flex-start;
    padding:16px 32px 24px;gap:0;display:none;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:10px 0;width:100%;border-bottom:1px solid rgba(248,244,234,0.08);}
  .navtoggle{display:block;}
  .navcta{display:none;}
  .hero h1{font-size:34px;}
  .page-hero h1{font-size:28px;}
  .stat-row,.check-grid,.promise-grid,.proj-grid,.teaser-grid,.testi-grid,.foot-grid,.form-grid{grid-template-columns:1fr 1fr;}
  .proj-grid.cols-2{grid-template-columns:1fr;}
  .poss-grid{grid-template-columns:repeat(2,1fr);}
  .steps{flex-direction:column;gap:18px;}
  .stepline{display:none;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .field-span2{grid-column:span 1;}
}
@media (max-width:560px){
  .stat-row,.check-grid,.promise-grid,.proj-grid,.teaser-grid,.testi-grid,.foot-grid,.form-grid{grid-template-columns:1fr;}
}