body {
    font-family: "Inter", sans-serif;
    color: black;
    /* padding-bottom: 5%; */
    margin: 0;
    padding: 0;
    scroll-padding-top: 80px;
    font-weight: 200;
    /* line-height: 24px; */


}

html, body {
    height: 100%;
    margin: 0;
    /* overflow: hidden; */
  }



nav ul {
    list-style-type: none;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

#logo {
    text-decoration: none;
    color: #454656;
    font-size: 20px;
    font-weight: 600;
    margin-left: 5%;
    line-height: 80px;
}

header {
    height: 80px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color:rgba(255, 255, 255, 0.35); /* Ensure background doesn't overlap content */
    z-index: 1000; /* Stay above other elements */
    border-bottom: 1px solid rgba(218, 160, 214, 0.3); /* #DAA0D6 at 50% opacity */
    backdrop-filter: blur(30px);                       /* blur background behind */
    -webkit-backdrop-filter: blur(30px);               /* Safari support */
}

nav {
    float: right;
    padding-right: 5%;
    padding-top: 0%;
}

nav a:hover{
    text-decoration: underline;
    transition: 1s ease;
}

nav a {
    color: #A1A09F;
    font-size: 16px;
    font-weight: medium;
    cursor: pointer;
    text-decoration: none;
}

nav li {
    display: inline-block;
    margin-left: 39px;
    line-height: 80px;
}

/* hamburger */
/* header inner layout (keeps your blur/border/etc.) */
header .content {
  height: 80px;                /* matches your fixed header height */
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* optional: nicer logo link */
.logo { color: inherit; text-decoration: none; }

/* underline color + speed */
nav a:hover {
  text-decoration-color: rgba(218,160,214,0.8);
  transition: text-decoration-color .2s ease;
}

/* hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  border: transparent;
  background: transparent;
  border-radius: 10px;
  padding: 8px;
  line-height: 0;
  cursor: pointer;
  color: #454656;
}
.nav-toggle .icon-close { display: none; }

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
  /* show hamburger, disable float nav */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  nav { float: none; padding-right: 0; }

  /* hide menu by default and position it under the fixed header */
  #primary-nav {
    position: absolute;
    left: 0; right: 0; top: 80px;          /* same as header height */
    display: none;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1px solid rgba(218,160,214,0.3);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  }

  /* opened state */
  #primary-nav.open { display: block; }

  /* stack menu items vertically */
  #primary-nav ul {
    list-style: none;
    margin: 0; padding: 10px 5%;
    display: flex; flex-direction: column; gap: 6px;
  }
  nav li {
    display: block;            /* override your inline-block on mobile */
    margin-left: 0;
    line-height: 1.4;
  }
  nav a {
    display: block;
    padding: 10px 0;
    color: #A1A09F;
    text-decoration: none;
  }

  /* swap icons when menu is open */
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: inline; }
  .nav-toggle[aria-expanded="false"] .icon-open { display: inline; }
  .nav-toggle[aria-expanded="false"] .icon-close { display: none; }

  /* prevent background scroll when menu is open */
  body.no-scroll { overflow: hidden; }
}

/* ensure header content layers above page, but below overlay */
header { z-index: 1000; }
.nav-toggle { z-index: 1001; }

/* ---------- Overlay base ---------- */
.overlay {
  position: fixed; inset: 0;
  display: none;                   /* hidden by default */
  z-index: 1100;                   /* above header */
}
.overlay.open { display: block; }

/* dim backdrop: 20% black + soft blur */
.overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(225, 225, 225, 0.05); /* 20% black */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.overlay-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(82vw, 360px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-left: 1px solid rgba(218,160,214,0.3);
  box-shadow: -10px 0 24px rgba(0,0,0,0.08);

  transform: translateX(100%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);  /* 1s ease-out */
}
.overlay.open .overlay-panel {
  transform: translateX(0);
}

.overlay {
  opacity: 0;
  transition: opacity 1s ease-out;
}
.overlay.open {
  opacity: 1;
}


/* close button aligned horizontally + vertically with hamburger */
.overlay-close {
  position: fixed;
  top: calc((80px - 40px) / 2);   /* centers a 40px button inside 80px header */
  right: 5vw;                      /* same gutter as header content */
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;

  border: transparent;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: #454656;
  z-index: 1200;
}

/* overlay nav links */
.overlay-nav {
  display: flex; flex-direction: column; gap: 6px;
  padding: 64px 20px 20px 20px;   /* space for close btn + nice padding */
}
.overlay-nav a {
  display: block;
  padding: 12px 6px;
  color: #A1A09F;                 /* matches your nav color */
  text-decoration: none;
  font-size: 18px;
}
.overlay-nav a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(218,160,214,0.85);
}

/* Prevent page scroll when menu is open */
body.no-scroll { overflow: hidden; }

/* Optional: only show hamburger on small screens (you already had float desktop nav) */
@media (min-width: 769px) {
  /* keep your desktop layout as-is; overlay is mainly for mobile */
}

.overlaytext{
        position: absolute;
        top: 35%;
        left: 45%;
        transform: translate(-50%, -50%);
        /* font-size: 48px; */
        font-size: clamp(1.5rem, 5vw, 2.5rem);
        font-weight: 400;
        padding: 5rem 0 5rem 0;
        
        /* border-radius: 8px; */
        text-align: left;
        color: #4D4E48;
        max-width: 90%;
        background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 20%,
      rgba(255, 255, 255, 1) 80%,
      rgba(255, 255, 255, 0) 100%
    );
}

.scrolltext{
    position: absolute;
    font-size: 16px;
    color:black;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Gradientcolor {
    font-size: 55px;
    background:
    -webkit-linear-gradient(left, #FF5A5F, #7946CA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Scrollable Pages */
/* .Container{
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
} */

/* keep this for all images */
img { max-width: 100%; height: auto; display: block; }

.page1{
  min-height: 100dvh;
  min-width: 100%;
  display: grid;
  justify-items: stretch;   /* left align */
  align-content: center;  /* vertical center */
}

/* OVERRIDE for the hero image (note selector specificity + order) */
img.page1img{
  width: 100%;                 /* <-- was auto; this forces full width */
  height: 100vh;               /* desktop/tablet */
  object-fit: cover;
  object-position: left center;/* left crop, vertically centered */
}

@media (max-width: 1024px){
  img.page1img{
    height: 50vh !important;   /* override global height:auto, and any inline */
    /* nicer on mobile browsers with dynamic bars (fallback to 50vh if unsupported) */
    height: 50svh !important;
    object-position: left center;
  }
}

/* img.page1img { outline: 2px solid red; }
@media (min-width: 1024px){
  img.page1img { outline: 2px solid lime; }
} */

.Container{
  height: 100dvh;                 /* more robust on mobile */
  overflow-y: auto;               /* 'auto' avoids forcing scrollbars */
  overflow-x: hidden;             /* prevent horizontal shift */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-gutter: stable both-edges; /* keeps layout stable when scrollbar appears */
}


.page1::after{
      content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #fff); /* change this if your next section isn't white */
  pointer-events: none;
  z-index: 1;
}

.page{
  width: 100%;
  /* height: 100dvh; */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}

/* .page1 > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center; 
} */


/* Project Content */

.ProjectPage, .ProjectMainWrapper, .ProjectMain, .ProjectTitleText {
    margin: 0; /* Important! */
  }

.ProjectSlide {
    height: 100vh;
    display: flex;
    scroll-snap-align: start;
    position: relative;
    z-index: 1;
}

.ProjectPage {
    display: flex;
    gap: clamp(24px, 5vw, 80px); /* min:20px, prefers 5vw, max:80px */
    align-items: stretch;
    margin: 0 5%;
}

.LeftSide {
    flex-shrink: 0;
    width: 10vw; /* Adjust depending on your needs */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.RightSide {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    width: 100%;
}

.RightSideWrapper{
    padding: 4vh 0;
    flex: 1;
    overflow-y: auto;
}

.ProjectMain {
    display: flex;
    gap: 3vh;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ColorBlock {
    width: 4vh;
    height: 100%;
    background: linear-gradient(to bottom, #f5d0db, #f5d0db, #E5C2DA);
    align-self: stretch; 
}




/* Project details */

.ProjectTitleText{
    font-size: clamp(1.75rem, 4vw, 2.5rem); /* min 16px */
    color:#292929;
    line-height: normal;
    font-weight: 400;
}

.ProjectTitleIcon{
    height: clamp(1.75rem, 4vw, 2.5rem)
}

.projectintro{
    font-size: 16px;
    color:black;
    display: flex;
    flex-direction: column;
    gap:3vh;
    width: 80%;
}

.projectintrotext{
  line-height: 24px;
}

.projectintroimg{
    /* width: auto; */
    max-height: 50vh;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    /* max-height: 50%; */
    display: block;
    margin: auto;
}

#nurturcover{
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* .projectintroimgwrapper{
    width: 100%;
    height: auto;
    min-height: 50vh;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
} */

.projectintroimgwrapper {
    width: 100%;
    min-height: 50vh;
    display: grid;
    place-items: center; /* centers both vertically & horizontally */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

@media (max-width: 768px) {
  .projectintroimgwrapper {
      min-height: 20vh; /* reduce height on phones */
  }

  .projectintro {
    width: 95%;   /* or 90% */
    margin: 0 auto;
  }
}

.ProjectTags{
    display: flex;
    /* gap:27px; */
    gap:clamp(0.5rem, 1vw, 1.125rem);
    flex-wrap: wrap;
}

.TagItems{
    background-color: #F7D0D5;
    border-radius: 50px;
    padding: 8px 20px;

    font-size: clamp(0.8rem, 1.5vw, 1rem); /* min 16px, scale up slightly */
    white-space: nowrap; /* prevent text from breaking mid-word */
}

.NextStop{
    font-size: 40px;
    color:#292929;
    font-weight: 500;
}


/* footer */
.FooterSlide {
    height: 240px; /* match your slide height minus navbar */
    background: linear-gradient(to right, #FFEEE6, #fce4ec);
    display: flex;
    flex-direction: column;   
    align-items: center;
    justify-content: center;
}

.FooterContent {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.FooterLeft {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.FooterTitle {
    /* font-size: 24px; */
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: #4D4E48;

}

.FooterMessage {
    /* font-size: 32px; */
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: bold;
    color: #292929;
}

.FooterRight {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: right;
}

.FooterLink {
    text-decoration: none;
    color: #292929;
    font-size: 14px;
}
.FooterLink:hover {
    text-decoration: underline;
}


.FooterCopyright{
    text-align: left; /* Left align the text */
    width: 80%;
    margin: 32px auto -10px auto;
}

/* AgnesCollab */
.Agnes{
    background: transparent;
}

.hero {
  /* text-align: left; */
  margin-top: 80px;   /* space below navbar */
  line-height: 32px;
}

.hero-title {
  font-size: 3rem; /* adjust for responsiveness */
  font-weight: 700;
  background: linear-gradient(90deg, #FF5F6D, #A64AC9); /* pink → purple */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin: 0;
}

/* Subtitle */
.hero-subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  color: #000;
  margin-top: 10px;
}

/* Responsive */

/* Phones (0–600px) */
@media (max-width: 600px) {
    .ProjectMain {
      flex-direction: column;
      gap: 16px;
    }
    .projectintroimg {
      width: 100%;
      height: auto;
    }
    .ProjectTitleText {
      font-size: 24px;
    }
  }
  
  /* Tablets (601px–1024px) */
  @media (max-width: 1024px) {
    .ProjectMain {
      flex-direction: column;
    }
  }

  @media (min-width: 1025px) {
    .ProjectMain {
      flex-direction: row;
      flex-wrap: nowrap;
    }
  }

  /* Breakpoint badge so you know which branch is active */
/* body::after{
  content: "≥1024px DESKTOP";
  position: fixed; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 4px 8px; font: 12px/1.2 system-ui; z-index: 999999;
}
@media (max-width: 1023px){
  body::after{ content: "≤1023px MOBILE/TABLET"; }
} */



/* ---------- Shared left/right padding & width rail ---------- */
.abouthero,
.about,
.details,
.looking-for,
.hobbies {
  max-width: 1000px;       /* keeps a clean page width */
  margin: 0 auto;          /* centers the block */
  padding: 0 2rem;         /* same side padding for left alignment */
}

/* ---------- Hero ---------- */
.abouthero {
  text-align: left;        /* left-align the text */
  padding-top: 4rem;
  margin-top: 80px;
  padding-bottom: 4rem;
}
.abouthero h1 {
  font-size: 1.8rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
  max-width: 70ch;         /* readable line length */
}

/* ---------- About (text + image) ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 40%);
  gap: 2rem;
  /* padding-top: 2rem;
  padding-bottom: 2rem; */
  margin-bottom: 2rem;
  margin-top: 2rem;
}
.about h2 {font-size:1rem; font-weight: 500; margin: 0 0 .75rem; }
.about p { margin: 0 0 1rem;  line-height: 24px; }
.about img {
  background: #eee;
  width: 100%;
  aspect-ratio: 4 / 3;     /* responsive rectangle */
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ---------- Details (What Drives Me / My Approach) ---------- */
.details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem auto;
  padding-top: 0;
  padding-bottom: 2rem;
}
.details h3 { font-size:1rem; font-weight: 500; margin: 0 0 .75rem; }
.details p  { margin: 0;  line-height: 24px; }

/* ---------- Looking For ---------- */
.looking-for {
  margin: 2rem auto;
  padding-top: 0;
  padding-bottom: 2rem;
}
.looking-for h3 {font-size:1rem; font-weight: 500; margin: 0 0 .75rem; }
.looking-for p{
 line-height: 24px;
}

/* ---------- Hobbies / Bottom image grid ---------- */
.hobbies {
  margin: 3rem auto;
  padding-top: 0;
  padding-bottom: 0;
}
.hobbies h3 {font-size:1.5 rem; font-weight: 500; margin: 0 0 .75rem; }
.hobbies p  { margin: 0 0 1rem;  line-height: 24px; }

.hobbies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.hobbies-grid img {
  background: #eee;        /* placeholder look */
  width: 100%;
  aspect-ratio: 4 / 3;     /* responsive rectangle */
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet and below */
@media (max-width: 900px) {
  /* About stacks with image above text */
  .about {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .about img {
    order: -1;              /* move image before text */
    margin-bottom: 1rem;    /* spacing after image */
  }

  /* Details becomes single column */
  .details {
    grid-template-columns: 1fr;
      padding-bottom: 0;
  }

  /* Bottom images: two columns */
  .hobbies-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .looking-for,
  .hobbies {
    margin-bottom: 0;
  }
  
}

/* Small phones */
@media (max-width: 520px) {
  /* tighten side padding consistently */
  header,
  .abouthero,
  .about,
  .details,
  .looking-for,
  .hobbies {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
  }

  .abouthero { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .abouthero h1 { font-size: 1.5rem; }

  /* Bottom images: single column */
  .hobbies-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ChatAible */
/* ===================== ChatAible (scoped, final) ====================== */
#chataible{
  /* Background (scoped) */
  background: linear-gradient(to right, #F2F0F6, #F3ECEC);

  /* Design tokens */
  --ch-ink-900:#5C4066;
  --ch-ink-700:#5C5D6B;
  --ch-ink-600:#68616A;
  --ch-brand:#D56E48;
  --ch-card:#ffffff;
  --ch-shadow:0 10px 30px rgba(0,0,0,.08);
  --ch-radius:18px;
  --ch-maxw:1200px;

  /* Layout tokens */
  --ch-pad-top: 80px; /* space under your header on desktop */
  --ch-bleed: 10vw;   /* how far the hero image crops past right edge */

  color: var(--ch-ink-700);
}

/* Shells */
#chataible .ch-container{ max-width: var(--ch-maxw); margin: 0 auto; padding: 0 auto }
#chataible .ch-section{ padding-top: 80px; } /* mobile-first */
#chataible .ch-center{ text-align:center }
#chataible .ch-brand{ color: var(--ch-brand) }

/* --------------------- Hero --------------------- */
#chataible .ch-hero{ position: relative } /* needed for cropping on desktop */
#chataible .ch-hero .ch-hero-grid{
  display:grid; gap: 32px;
  grid-template-columns: 1fr;  /* mobile-first stack */
  align-items: center;
}
#chataible .ch-hero h1{
  color: var(--ch-ink-900);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  margin: 0 0 36px 0;
  font-weight: 400;
}
#chataible .ch-subtitle{
  font-size: clamp(18px, 2.6vw, 28px);
  color: var(--ch-ink-900);
  margin: 0 0 64px 0;
}

/* Methods card */
#chataible .ch-methods{
  background: var(--ch-card);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow);
  padding-block: 24px;                 /* vertical */
  padding-inline: clamp(16px, 4vw, 32px); /* horizontal */
  max-width: 560px;
}
#chataible .ch-methods h4{
  margin: 0 0 12px 0;
  font-weight: 600; color: var(--ch-brand);
  font-size: clamp(18px,2.4vw,22px);
}
#chataible .ch-method-grid{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(12px,2.4vw,24px);
}
#chataible .ch-method{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; font-size:14px; color:var(--ch-ink-600);
}
#chataible .ch-method img{ width: 64px; height:auto }

/* Hero artwork */
#chataible .ch-hero-art{
  justify-self: center;
  width: min(640px, 100%);
  border-radius: 12px;
  /* box-shadow: var(--ch-shadow); */
  overflow: hidden;
  bac
}
#chataible .ch-hero-art img{ width:100%; height:auto; display:block }

/* --------------------- Challenge (intro) --------------------- */
#chataible .ch-challenge{ background:#fff }
#chataible .ch-challenge h2{
  font-size: clamp(24px, 4vw, 48px);
  margin: 0 0 40px 0;
  color: var(--ch-ink-700);
  font-weight: 500;
}
#chataible .ch-challenge p{
  font-size: clamp(16px, 2vw, 18px);
  color: var(--ch-ink-600);
  max-width: 100ch;
  margin: 24px 0;
}

/* CTA row */
#chataible .ch-pass-row{
  display:flex; align-items:center; justify-content:center; gap:16px;
  color: var(--ch-ink-600); font-weight:600; margin: 24px 0;
}
#chataible .ch-pass-row img{ width:24px; height:auto; opacity:.85 }

#chataible .ch-cta{
  display:inline-block; color:#fff;
  padding: 12px 22px; border-radius: 999px; font-weight:600;
  background: linear-gradient(90deg, #7152A2, #F07972, #FFA047);
  box-shadow: 0 6px 18px rgba(213,110,72,.25);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
#chataible .ch-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(213,110,72,.3);
}

/* --------------------- Other projects --------------------- */
#chataible .ch-other h3{
  font-size: clamp(22px, 3vw, 36px);
  color: var(--ch-ink-700); margin: 0 0 18px 0; font-weight:600;
}
#chataible .ch-proj-card{
  background: var(--ch-card);
  border-radius: var(--ch-radius);
  box-shadow: var(--ch-shadow);
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; overflow:hidden;
  padding: clamp(18px, 3vw, 24px);
}
#chataible .ch-proj-title{ font-size: clamp(20px, 3vw, 32px); font-weight:700; color:var(--ch-ink-900) }
#chataible .ch-proj-img{ width: min(520px, 60%); margin-left:auto }


/* ===================== Breakpoints ===================== */

/* Desktop */
@media (min-width: 900px){
  /* Two-column hero */
  #chataible .ch-hero .ch-hero-grid{ grid-template-columns: 1.1fr .9fr }

  /* HERO: exact viewport height (padding included) + top padding for header */
  #chataible .ch-hero{
    height: 100vh;    /* fallback */
    height: 100svh;   /* safe viewport */
    height: 100dvh;   /* dynamic viewport */
    padding-top: var(--ch-pad-top);
    padding-bottom: 0;
    overflow: hidden;          /* enables right-edge crop */
    display: grid;
    align-content: start;      /* respect the top padding */
  }
  /* Fill hero height and center content within remaining space */
  #chataible .ch-hero > .ch-container{
    height: 100%-80px;
    display: grid;
    align-items: center;
  }
  /* Crop the hero image off the right edge */
  #chataible .ch-hero-art{
    justify-self: end;
    align-self: center;
    width: clamp(700px, 60vw, 1200px);         /* larger than column so it crops */
    transform: translateX(var(--ch-bleed)) translateY(-1.5vh);
  }

  /* INTRO: exact viewport height with same top padding */
  #chataible .ch-challenge{
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    padding-top: var(--ch-pad-top);
    padding-bottom: 0;
    display: grid;
    align-items: center;       /* vertically center its content */
  }
}

/* Mobile & tablets */
@media (max-width: 899.98px){

  
  #chataible .ch-challenge{
    height: auto;
    padding-top: clamp(40px, 10svh, 80px);
    padding-bottom: clamp(40px, 10svh, 80px);
    overflow: visible;
  }
  #chataible .ch-hero-art{
            /* remove padding */
    padding: 0 16px;           /* gutters */
    width: calc(100% - 32px); /* 16px + 16px */
    box-sizing: border-box;   /* ensure it doesn’t overflow */
  }
  #chataible .ch-hero-art img{
    width: 100%; height: auto; display: block;
  }

  #chataible .ch-hero-text{
    padding: 32px 16px;
  }

#chataible .ch-hero h1{
  margin-bottom: 12px;
}

#chataible .ch-hero .ch-subtitle{
  margin-bottom: 32px;
}

#chataible .ch-challenge{
  padding-left: 16px;
  padding-right: 16px;
}

}

/* Compact phones */
@media (max-width: 640px){
  #chataible .ch-method-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) }
  #chataible .ch-proj-card{ flex-direction: column; align-items: flex-start }
  #chataible .ch-proj-img{ width: 100%; margin: 0 }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  #chataible .ch-cta{ transition: none }
}

/* === FINAL VERTICAL-CENTER OVERRIDES (desktop) === */
@media (min-width: 900px){
  /* tuneables */
  #chataible{
    --ch-pad-top: 80px;
    --ch-bleed: 10vw;   /* how far the hero image crops on the right */
  }

  /* HERO: exact viewport height; content centered in remaining space */
  #chataible .ch-hero{
    height: 100vh;     /* fallback */
    height: 100svh;    /* safe viewport */
    height: 100dvh;    /* dynamic viewport */
    padding-top: var(--ch-pad-top);
    padding-bottom: 0;
    overflow: hidden;              /* crop the bleed */
    display: block;                /* let the inner container control centering */
  }

  /* Let the inner container fill the hero minus the top padding,
     then center the (text + image) pair vertically */
  #chataible .ch-hero > .ch-container{
    min-height: calc(100dvh - var(--ch-pad-top));
    display: grid;
    align-items: center;           /* vertical centering */
  }

  /* Two-column hero + right-side crop for the image */
  #chataible .ch-hero .ch-hero-grid{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;           /* align both columns vertically */
  }
  #chataible .ch-hero-art{
    justify-self: end;
    align-self: center;
    width: clamp(700px, 60vw, 1200px);     /* bigger than column so it crops */
    transform: translateX(var(--ch-bleed)) translateY(-1.5vh);
  }

  /* INTRO: exact viewport height; center its content */
  #chataible .ch-challenge{
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    padding-bottom: 0;
    display: grid;
    align-items: center;           /* vertical centering */
  }
}

/* Mobile/tablet keeps comfy padding and stacks; no forced height/crop */
@media (max-width: 899.98px){
  #chataible .ch-challenge{
    height: auto;
    padding-top: clamp(40px, 10svh, 80px);
    padding-bottom: clamp(40px, 10svh, 80px);
    overflow: visible;
  }

  #chataible .ch-challenge h2{padding-bottom: 24px; margin:0}
    #chataible .ch-challenge p{padding-bottom: 12px; margin:0}

  #chataible .ch-hero-art{
    transform: none;
    width: min(640px, 100%);
  }

  #chataible .ch-pass-row{text-align: left;}

}

/* Tablet-ish range: 900px–1204px */
@media (min-width: 900px) and (max-width: 1204px){
  #chataible .ch-container,
  #chataible .ch-hero-text,
  #chataible .ch-hero-art,
  #chataible .ch-methods,
  #chataible .ch-challenge,
  #chataible .ch-other {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box; /* prevents overflow */
  }
}


/* Agnes */
/* ===== Design Tokens ===== */
:root{
  --bg: #ffffff;
  --text: #121212;
  --muted: #6b7280;
  --surface: #f7f7fb;
  --card: #ffffff;
  --border: rgba(0,0,0,.08);
  --shadow: 0 6px 24px rgba(0,0,0,.08);
  --radius: 16px;

  /* Agnes gradient hues (soft pink → purple) */
  --grad-1: #ff7cc2;
  --grad-2: #9d7cff;
  --grad-3: #b79bff;

  /* Sizing + rhythm */
  --container: 960px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; display:block; border-radius:12px; }
h1,h2,h3,h4{ margin:0 0 var(--space-3); line-height:1.25; }
h1{ font-size:clamp(28px, 4.2vw, 44px); font-weight:700; }
h2{ font-size:clamp(22px, 2.6vw, 30px); font-weight:600; }
h3{ font-size:clamp(18px, 2vw, 24px); font-weight:600; }
h4{ font-size:clamp(16px, 1.6vw, 18px); font-weight:600; }
p{ margin:0 0 var(--space-6); color:var(--text); }
p.muted{ color:var(--muted); }

.container{
  width:min(100%, var(--container));
  margin-inline:auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* ===== Header spacer (if you have fixed nav) ===== */
.site-header{ height: 0; }

/* ===== Hero ===== */
.hero{
  position:relative;
  padding: clamp(56px, 9vw, 96px) 0 var(--space-7);
  overflow:hidden;
}

.hero-inner{ position:relative; z-index: 1; }
.hero-text{ max-width: 760px; }

.gradient-title{
  background: linear-gradient(90deg, var(--grad-1), var(--grad-2) 50%, var(--grad-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle{
  color:var(--muted);
  font-size:clamp(14px, 1.6vw, 18px);
  margin-top: var(--space-2);
}

.hero-bg{
  position:absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background:
     radial-gradient(40% 60% at 70% 40%, rgba(157,124,255,.35), transparent 70%),
     radial-gradient(35% 45% at 20% 80%, rgba(255,124,194,.25), transparent 70%),
     radial-gradient(30% 40% at 90% 10%, rgba(183,155,255,.25), transparent 70%);
  filter: blur(40px);
  pointer-events:none;
}
/* 
.agnestitle{
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
} */

/* ===== Sections ===== */
.section{ padding: var(--space-7) 0; }
.eyebrow{
  font-size: 16px;
  color: #7D7D7D; margin-bottom:4px;
  font-family: Poppins;
  font-weight: 500;
}

.center{ text-align:center; }
.smallcaps{ font-variant: all-small-caps; letter-spacing: .06em; }
.mt-32{ margin-top:32px; }

/* ===== Stats grid ===== */
.stats{
  display:grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.stat{
  padding-bottom: 24px;
  /* background:var(--surface); */
  /* border: 1px solid var(--border);
  border-radius: var(--radius); */
}
.stat h3{ margin-bottom:6px; font-size:16px; color:black; font-weight:500; }
.stat p{ margin:0; font-weight: 300; }

/* ===== 2-col content ===== */
.grid-2{
  display:grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
  align-items:start;
}

/* ===== Checklist ===== */
.checklist{
  margin:0; padding-left: 1.15em;
}
.checklist li{
  margin: 0 0 10px;
}

/* ===== Image strips (scroll on mobile) ===== */
/* Base: mobile-first */
.image-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px; /* ✅ 32px gap */
  overflow: visible;
}

.image-strip img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: var(--shadow);
  background: #eee;
}

/* Desktop */
@media (min-width: 1024px) {
  .image-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 32px; /* ✅ 32px gap on desktop too */
    justify-content: center;   /* ✅ centers the row */
    overflow: hidden;          /* ✅ clips only sides if wider than viewport */
  }

  .image-strip img {
    height: 360px;    /* ✅ fixed equal height */
    width: auto;      /* ✅ maintain aspect ratio */
    max-width: none;  /* ✅ allow natural width */
    object-fit: contain; /* ✅ ensures the full image is visible vertically */
  }

  .after{
    margin-bottom: 120px;
  }
}
/* ===== Cards (Design Principles) ===== */
.card-grid{
  display:grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}
.card {
  position: relative;
  z-index: 0;
  border-radius: var(--radius);
  padding: clamp(16px, 2.2vw, 20px);

  /* 🌈 Gradient background */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,       /* 50% white */
    rgba(226, 226, 226, 0.3) 100%      /* 30% #E2E2E2 */
  );

  /* ✨ Drop shadow (from your screenshot) + inner shadow */
  box-shadow:
    10px 10px 20px rgba(176, 163, 179, 0.25),   /* drop shadow */
    inset -5px 5px 5px rgba(255, 255, 255, 0.8); /* inner shadow */

  /* ✏️ Optional subtle outline */
  border: 1px solid var(--border);
}
.card p{ color:var(--muted); margin-bottom: 0; }

/* Heading + icon layout */
.card h4 {
  display: flex;
  align-items: center;
  gap: 8px; /* space between icon and title */
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

/* Phosphor icons inside card titles */
.card h4 i {
  font-size: 20px;  /* ✅ icon size */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
 /* ✅ or use a fixed hex like #9d7cff */
}

/* ===== Panel placeholder (iterations chips) ===== */
/* Iterations panel wrapper */
.iteration-panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.4vw, 24px);
}

/* Top area */
.iter-head h3,
.iter-body h3,
.cons-head h3,
.cons-solution h3,
.cons-extra h3{
  margin: 0 0 10px;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 600;
}
.iter-head p{ margin: 0; }

/* Divider */
.iter-divider{
  border: 0;
  height: 1px;
  background: var(--border);
  margin: clamp(14px, 2vw, 18px) 0;
}

/* Bottom area – stacks vertically on mobile */
.iter-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.2vw, 24px);
  align-items: start;
}

.iter-solution h4{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.iter-ui{
  justify-self: start;
}

/* Placeholder image styling */
.iter-img{
  max-width: 160px;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #f0f0f6;      /* fallback gray */
  border: 1px dashed var(--border);
  object-fit: cover;
}

/* Desktop: two-column layout */
@media (min-width: 1024px){
  .iter-body{
    grid-template-columns: 1fr minmax(280px, 340px);
    gap: 24px;
  }
  .iter-ui{ justify-self: end; }
}

/* Magic Wand */
/* ✅ Reuse panel base style */
.panel {
  position: relative;
  z-index: 0;
  border-radius: 16px;
  padding: clamp(24px, 4vw, 32px);

  /* 🌈 Gradient background */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5) 0%,       /* 50% white */
    rgba(226, 226, 226, 0.3) 100%      /* 30% #E2E2E2 */
  );

  /* ✨ Drop shadow + inner shadow */
  box-shadow:
    10px 10px 20px rgba(176, 163, 179, 0.25),   /* drop shadow */
    inset -5px 5px 5px rgba(255, 255, 255, 0.8); /* inner shadow */

  /* ✏️ Optional subtle outline */
  border: 1px solid var(--border);
}

/* ✅ Consistency section inherits panel style */
/* ==== Consistency panel — final fix ==== */

/* Contain any visual spill */
.panel.consistency-panel {
  overflow: clip; /* fallback to 'hidden' if needed */
}

/* Let grid tracks shrink instead of pushing the panel wider */
.panel.consistency-panel .solution-grid,
.panel.consistency-panel .extra-grid {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .panel.consistency-panel .solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel.consistency-panel .extra-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* Critical: children must be allowed to shrink inside grid tracks */
.panel.consistency-panel .solution-card,
.panel.consistency-panel .extra-grid > * {
  min-width: 0;
}

/* Images: never overflow columns, but honor your desktop caps */
.panel.consistency-panel img {
  width: auto;        /* allow natural width so max-width can work */
  max-width: 100%;    /* never exceed the column */
  height: auto;
  display: block;
}

/* Your intended caps (desktop) */
.panel.consistency-panel .mock-small { max-width: 200px; }
.panel.consistency-panel .mock-large { max-width: 360px; }

/* Mobile: allow images to go full width inside the column */
@media (max-width: 700px) {
  .panel.consistency-panel .mock-small,
  .panel.consistency-panel .mock-large {
    width: 100%;
    max-width: none;
  }
}

/* Long captions/words shouldn’t force overflow */
.panel.consistency-panel p,
.panel.consistency-panel figcaption {
  overflow-wrap: anywhere; /* or 'break-word' */
}

/* Top block */
.cons-head h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 600;
}
.cons-head p {
  margin: 0;
}

/* Divider line */
.iter-divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: clamp(14px, 2vw, 18px) 0;
}

/* Solution cards grid */
.solution-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
  margin-top: var(--space-4);
}
.solution-card {
  margin: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: left;
}
.solution-card figcaption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  max-width: 40ch;
}

/* Mock image styling */
.mock-small{
  max-width: 200px;
  height: auto;
  display: block;
}

.mock-large {
  max-width: 360px;
  height: auto;
  display: block;
}

/* Extra details grid */
.extra-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
  align-items: start;
}
.cons-lead {
  margin: 0 0 12px;
}
.cons-explain {
  margin: 0;
}

/* Responsive layouts */
@media (min-width: 700px) {
  .solution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .extra-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    align-items: center;
  }
  .extra-grid .mock-large {
    justify-self: end;
  }
}

/* ===== Final Design ===== */
.final-design {}

/* Header & feature list */
.fd-eyebrow{
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--muted);
}
.fd-title{
  margin: 0 0 var(--space-3);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
}
/* ===== Feature list ===== */
.fd-features {
  margin: 0 0 var(--space-7);
  padding-left: 1.25rem;
  display: grid;
  gap: 14px;
  /* ❌ remove this so list spans full row */
  /* max-width: 70ch; */
  width: 100%;
}
.fd-features li{ line-height: 1.7; }

/* Comment tab section */


/* 3 demo cards */
.fd-card-grid{
  display: grid;
  grid-template-columns: 1fr;            /* mobile: stack */
  gap: clamp(16px, 2.4vw, 28px);
  margin-bottom: var(--space-8);
}
.fd-card{
  margin: 0;
  display: grid;
  gap: 0px;
  justify-items: center;
}
.fd-card img{
  width: 100%;
  max-width: 360px;                      /* keeps the compact phone mock size */
  height: auto;
}
.fd-card figcaption{
  font-size: 15px;
  color: var(--text);
}

/* User flow image */
.fd-flow-wrap{
  display: grid;
  place-items: center;
}
.fd-flow-img{
  width: 100%;
  max-width: 680px;                      /* scale on desktop, contained on mobile */
  height: auto;
}

/* Tablet */
@media (min-width: 700px){
  .fd-card-grid{
    grid-template-columns: repeat(3, 1fr); /* three across */
    align-items: start;
  }
  .fd-card{ justify-items: center; text-align: center; }
}

/* Desktop */
@media (min-width: 1024px){

  .fd-card img{ max-width: 380px; }
}

/* ===== Media card (shared visual style for big images) ===== */
.media-card{
  margin: var(--space-4) 0 0;
  overflow: hidden;
  place-items: center;
}
.media-card img{
  display: block;
  max-width: 800px;
  width: 100%;
  height: auto;          /* keeps image crisp, responsive */
  object-fit: cover;     /* your diagram fills the card nicely */
}

/* ===== Responsive Figma embed ===== */
.responsive-embed{
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  /* keeps a nice video-like frame on all screens */
  aspect-ratio: 16 / 9;
  background: #fff;
}
.responsive-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ===== Conclusion / Next Steps ===== */

/* ===== Next Steps list ===== */
.next-steps {
  margin: 0 0 var(--space-7);
  padding-left: 1.25rem;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  /* ❌ remove max-width limit here too */
  /* max-width: 70ch; */
  width: 100%;
}


.next-steps li{ margin-left: .25rem; }
.next-steps h4{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.next-steps p{ margin: 0; }
.takeaways{
  margin: 0;
  margin-bottom: 64px;
}

/* ===== Responsive tweaks ===== */
@media (min-width: 700px){
  .media-card img{ object-fit: contain; }  /* show full image on wider screens */
}

@media (min-width: 1024px){
  .responsive-embed{ aspect-ratio: 16 / 9; }
}

/* ===== Footer ===== */
.footer{ padding: var(--space-6) 0; border-top:1px solid var(--border); }
.footer p{ color: var(--muted); margin:0; }

/* ===== Responsive Breakpoints ===== */
/* Tablet */
@media (min-width: 700px){
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .grid-2{ grid-template-columns: 1.1fr .9fr; }
  .card-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Desktop */
@media (min-width: 1024px){
  .hero{ padding-top: clamp(72px, 10vw, 120px); }
  .stats{ grid-template-columns: repeat(4, 1fr); }
  .grid-2{ grid-template-columns: 1.1fr .9fr; }
}

/* Motion-respectful blurs */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ filter: blur(20px); }
}

/* ===== New Experience (GIF + Text) ===== */
.new-experience {
  padding-bottom: var(--space-8);
  padding-top: 0;
}

.ne-title {
  margin-bottom: var(--space-5);
}

.ne-content {
  display: flex;
  align-items: center;        /* ✅ vertically align gif & text */
  gap: clamp(20px, 4vw, 56px);
}

/* media block */
.ne-media {
  margin: 0;
  flex: 0 1 320px;            /* ✅ cap size on desktop */
  max-width: 320px;
  width: 100%;
}

.ne-media img,
.ne-media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: #eee;
}

/* text block */
.ne-text {
  flex: 1;
}
.ne-text p {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  margin: 0;
}
.ne-highlight {
  font-weight: 600;
  color: #5E57FE;
}

/* 📱 Mobile/tablet: stack so text sits UNDER the GIF */
@media (max-width: 768px) {
  .ne-content {
    flex-direction: column;
    text-align: left;      /* optional */
  }
  .ne-media {
    max-width: 100%;
  }
  .ne-text {
    width: 100%;
    margin-top: 12px;
  }
}


/* Nurtur “Bearhub-style” features — FOLLOW global .container width */
.nh-bh,
.nh-bh * { box-sizing: border-box; }

.nh-bh .nh-bh-section { padding: clamp(24px, 1.5vh, 32px) 0; }

/* Headings */
.nh-bh .nh-bh-h2 {
  margin: 0 0 16px;
  font-weight: 600;
  color: #2b2b2b;
  font-size: 20px;
  font-family: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Features list */
.nh-bh .nh-bh-feature-list {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  margin-top: 8px;
}

/* Each feature row (mobile-first) */
.nh-bh .nh-bh-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 3vw, 28px);
  align-items: center;
}

/* Desktop two columns */
@media (min-width: 900px) {
  .nh-bh .nh-bh-feature { grid-template-columns: minmax(220px, 320px) 1fr; }
  .nh-bh .nh-bh-feature.is-reverse { grid-template-columns: 1fr minmax(220px, 320px); }
  .nh-bh .nh-bh-feature.is-reverse .nh-bh-phone { order: 2; }
  .nh-bh .nh-bh-feature.is-reverse .nh-bh-feature-text { order: 1; }
}

/* Phone figure + image */
.nh-bh .nh-bh-phone { width: 320px; max-width: 100%; }
.nh-bh .nh-bh-phone img {
  display: block;
  width: auto;            /* avoid stretching */
  max-width: 100%;
  max-height: 520px;
  height: auto;
  /* box-shadow: 0 10px 30px rgba(0,0,0,.06); */
}

/* Text */
.nh-bh figure { margin: 0; }
.nh-bh .nh-bh-feature-text .nh-bh-iter-text {
  margin-bottom:12px;
  line-height: 1.6;
  color: #2b2b2b;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Optional centered feature variant */
.nh-bh .nh-bh-feature-center { display: grid; place-items: center; margin-top: 8px; }

/* ===== Nurtur: green outlined tip box (scoped) ===== */
.nh-bh { --nh-green: #3C8358; }   /* matches your nurtur green */

.nh-bh .tip-box{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 20px;
  border: 2.4px solid var(--nh-green);
  border-radius: 20px;
  /* fallback if color-mix() isn’t supported */
  margin-top: 32px;
}

.nh-bh .tip-icon{
  line-height: 0;
  display: inline-grid;
  place-items: center;
  color: var(--nh-green);
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

/* size the placeholder icon; your Phosphor icon will inherit */
.nh-bh .tip-icon i { font-size: 18px; }

.nh-bh .tip-text{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;

}

/* Optional: a little breathing room on small screens */
@media (max-width: 600px){
  .nh-bh .tip-box{ padding: 12px 14px; border-radius: 12px; }
}

/* ===== Nurtur page — scoped hero rules (won’t affect other pages) ===== */
.nurtur-hero{
  position: relative;
  /* margin-top: 80px; */
  height: 100vh; height: 100svh; height: 100dvh;
  overflow: hidden;
}

.nurtur-hero > img{
  position: absolute; inset: 0;
  width: 100%;                           /* avoid 100vw scrollbar issue */
  height: 100%;
  object-fit: cover;
  object-position: center;               /* change to 'left center' if needed */
  display: block;
}

.nurtur-hero .overlaytext{
  position: absolute;
  top: 50%;
  left: clamp(16px, 6vw, 80px);          /* responsive left gutter */
  transform: translateY(-50%);
  padding-right: clamp(16px, 4vw, 32px);
  max-width: 70ch;
  background: transparent;
  color: #0F4424;
}

.nurtur-hero .Gradientcolornurtur{
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
}

.nurtur-hero .hero-sub{
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  padding-top: 0.75rem;
  color: #0F4424;
}

/* Mobile tweak: move text down a bit */
@media (max-width: 640px){
  .nurtur-hero .overlaytext{
    top: auto; bottom: 10vh; transform: none;
  }
}

/* Make <picture> behave like the old <img> background */
.nurtur-hero .hero-picture,
.nurtur-hero .hero-picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.nurtur-hero .hero-picture > img {
  object-fit: cover;
  object-position: center;    /* adjust to 'left center' if you want */
  display: block;
}

/* Mobile: keep text at the TOP */
@media (max-width: 640px){
  .nurtur-hero { height: 100svh; }   /* safe viewport height */
  .nurtur-hero .overlaytext{
    top: 80px;                           /* pin to top */
    transform: none;
    padding-top: clamp(16px, 8vh, 64px);    /* nice top breathing room */
    left: clamp(16px, 6vw, 32px);           /* same left rail */
    padding-right: clamp(16px, 5vw, 32px);
  }
}

.Gradientcolornurtur {
    font-size: 55px;
    background:
    -webkit-linear-gradient(left, #569970, #468B61, #317B4E, #569970);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}