@import url('https://fonts.googleapis.com/css2?family=Didot&family=Inter:wght@300;400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Bodoni+Moda:wght@400;500;600;700&display=swap');

:root{
  --bg:#fafafa; 
  --ink:#2a2a2a; 
  --muted:#666666;
  --accent:#d4a894; 
  --accent-blue:#8ba3b5;
  --accent-hover:#c59585;
  --accent-light:#e8c5b5;
  --card:#ffffff; 
  --border:#e0e0e0;
  --overlay-blue:rgba(155,180,201,0.4);
  --overlay-peach:rgba(212,168,148,0.4);
  --shadow: 0 10px 40px rgba(42,42,42,0.08);
  --shadow-lg: 0 20px 60px rgba(42,42,42,0.12);
  --hero-text-offset: clamp(80px, 18vh, 280px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
 /* background: linear-gradient(
    to right,
    rgba(47, 153, 198, 0.4) 0%,
    rgba(200, 210, 220, 0.4) 30%,
    rgba(220, 200, 200, 0.4) 60%,
    rgba(232, 197, 181, 0.4) 100%
  );*/
  background:#fdf5f0;
  color:var(--ink);
  line-height:1.65;
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:16px;
  overflow-x:hidden;
  /* ADJUSTMENT: Reduced padding for inner pages to minimize gap */
  padding-top: 265px;
}

/* Remove padding for hero page */
body:has(.hero-profile) {
  padding-top: 0;
}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  line-height:1.2;
  color:var(--accent-blue);
}
a{
  color:var(--ink);
  text-decoration:none;
  transition:all 0.3s ease;
}
a:hover{
  color:var(--accent);
}
.container{max-width:1600px;margin:0 auto;padding:0 40px}
.section{padding:60px 0}

/* Page titles */
.container h1 {
  padding-left: 60px;
  padding-right: 60px;
}

@media (max-width: 768px) {
  .container h1 {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* TOP BANNER - Fixed at top of all pages */
.top-banner {
  background: linear-gradient(
    to right,
    rgba(173, 216, 230, 1) 0%,
    rgba(200, 210, 220, 1) 30%,
    rgba(220, 200, 200, 1) 60%,
    rgba(232, 197, 181, 1) 100%
  );
  padding: 0;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border: none;
}

.banner-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}

.banner-logo {
  height: 63px;
  width: auto;
  opacity: 0.95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  margin-bottom: 0px;
  object-fit: contain; /* FIX 2: Added to preserve aspect ratio */
  display: block; /* FIX 2: Added for proper rendering */
}

.banner-title {
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-size: clamp(20px, 4vw, 48px);
  margin: 0 0 5px 0;
  color: #ffffff;
  letter-spacing: 0.12em;
  text-transform: none;
  line-height: 0.95;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.banner-title span {
  font-family: 'Bodoni Moda', serif !important;
  font-size: 1em !important;
}
.banner-title .digits-1111{
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.14em;
  font-weight: 500;      /* was 700 */
  font-size: 0.92em;
}


.banner-tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 1.5vw, 14px);
  margin: 0px 0 0 0;
  color: #ffffff;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  .banner-content {
    padding: 25px 40px 30px;
    gap: 4px;
  }
  .banner-logo { 
    height: 84px;
    margin-bottom: 8px;
  }
  .banner-tagline {
    margin-top: 0px;
  }
}

@media (max-width: 500px) {
  .banner-title {
    font-size: 18px;
  }
  .banner-logo {
    height: 56px;
    object-fit: contain; /* FIX 2: Ensure aspect ratio on small screens */
  }
  .banner-content {
    gap: 10px;
    padding: 15px 20px 20px;
  }
}

/* NAVBAR - Below fixed banner (DESKTOP DEFAULT) */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* ADJUSTMENT: Increased vertical padding for centering */
  padding:15px 30px;
  /* FIX: Restore transparency for unscrolled state */
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:fixed;
  /* ADJUSTMENT: Reduced top position to minimize gap */
  top: 215px;
  left:0;
  right:0;
  z-index:999;
  /* FIX: Remove border when transparent */
  border-bottom:none; 
  transition: all 0.3s ease;
}

nav.scrolled {
  /* Re-apply opacity and border when scrolled */
  background:rgba(253, 245, 240, 0.98); /* Matches body background #fdf5f0 */
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border-bottom:1px solid var(--border);
}

nav .left{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-weight:700;
}
nav .left .brand{
  font-size:11px;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:0.1em;
}
nav.scrolled .left .brand {
  color: var(--ink);
}
nav img.logo{
  height:32px;
  transition:opacity 0.3s ease;
  opacity:0.95;
}
nav img.logo:hover{opacity:1}

/* Menu - floating style */
.menu{
  display:flex;
  align-items:center;
  gap:25px;
  font-family:'Inter',sans-serif;
  font-weight:500;
}
.menu a{
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  transition:all 0.3s ease;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  text-shadow: none;
}
/* FIX: Text shadow to improve legibility over the colorful banner */
nav:not(.scrolled) .menu a {
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5), 0 0 3px rgba(255, 255, 255, 0.5); 
}
nav.scrolled .menu a {
  color: var(--ink);
  text-shadow: none;
}
.menu a:hover{
  border-bottom:2px solid var(--ink);
}
nav.scrolled .menu a:hover {
  border-bottom:2px solid var(--ink);
}
.menu .ig img{
  height:32px !important;
  width:32px !important;
  /* ADJUSTMENT: Removed margin to allow for proper vertical centering via nav's align-items:center */
  margin-top: 0;
  transition:opacity 0.3s ease;
  opacity:0.9;
  filter: none;
}
nav.scrolled .menu .ig img {
  filter: none;
}
.menu .ig:hover img{opacity:1}

/* Language buttons - floating */
.lang-btn {
  background:transparent;
  border:1px solid var(--border);
  padding:5px 12px;
  border-radius:0;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:10px;
  cursor:pointer;
  color:var(--ink);
  transition:all 0.3s ease;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

nav.scrolled .lang-btn {
  background:transparent;
  border-color:var(--border);
  color:var(--ink);
}

.lang-btn:hover {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}

nav.scrolled .lang-btn:hover {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}

.lang-btn.active {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}

nav.scrolled .lang-btn.active {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
}

.lang-buttons {
  display:flex;
  gap:0;
}

/* Hamburger */
.hamburger{
  display:none;
  flex-direction:column;
  cursor:pointer;
  gap:4px;
}
.hamburger span{
  width:24px;
  height:2px;
  background:var(--ink);
  transition:all 0.3s ease;
}
nav.scrolled .hamburger span {
  background: var(--ink);
}

/* Mobile dropdown and structure fixes */
@media(max-width:768px){
  /* Re-applied mobile fixes for correct layout */
  .top-banner {
    position: relative;
    z-index: 10;
  }
  
  body {
    /* Set padding for non-hero pages to account for the fixed nav bar */
    padding-top: 65px;
  }
  /* FIX 1: Override padding for index page hero section on mobile only */
  body:has(.hero-profile) {
    padding-top: 0 !important; /* Override the 65px padding */
  }
  
  nav{
    padding:10px 20px;
    top: 0;
    /* FIX: Ensure transparency on mobile, as nav is fixed at top over content/banner */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    position: fixed; /* Ensure it is fixed at the top */
  }

  /* Ensure a visible nav bar when scrolled */
  nav.scrolled {
    background: rgba(253, 245, 240, 0.98); 
    border-bottom: 1px solid var(--border);
  }

  /* End re-applied mobile fixes */
  
  .container{padding:0 20px}
  
  .menu{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    position:absolute;
    top:50px;
    right:20px;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(20px);
    width:200px;
    padding:20px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    z-index:1000;
  }
  .menu a {
    color: var(--ink);
    text-shadow: none;
  }
  .menu.active{display:flex;animation:slideDown .3s ease}
  .hamburger{display:flex}
}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* HERO SECTION - Image left, text right aligned to bottom */
.hero-profile {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 330px; /* Desktop spacing */
  padding-bottom: 120px;
  margin: 0;
  background: transparent;
}

/* FIX: Mobile Gap Elimination - DEFINITIVE SOLUTION */
@media (max-width: 767px) {
  .hero-profile {
    /* FIX 1: Eliminate the huge 330px desktop padding that causes the blank space */
    padding-top: 0 !important; 
    min-height: auto; /* Allow content to define height on mobile */
  }
  
  .hero-content {
    /* FIX 2: Add top padding to push the content down below the fixed mobile navbar and visible banner */
    padding-top: 80px; 
    padding-left: 30px;
    padding-right: 30px;
    gap: 30px;
  }
}


.hero-content {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    padding: 0 100px;
  }
}

/* IMAGE CONTAINER - Responsive sizing */
.profile-image-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: auto;
  z-index: 1;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .profile-image-container {
    margin: 0;
  }
}

.profile-hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 520;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(5%) contrast(1.05) brightness(0.95);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.8), 0 0 120px rgba(255, 255, 255, 0.4);
}

@media (max-width: 767px) {
  .profile-image-container {
    max-width: 320px;
  }
}

/* Large gradient fade shadow frame with see-through effect */
.profile-image-container::after {
  display: none;
}

/* Add a subtle inner glow effect */
.profile-image-container::before {
  display: none;
}

.image-glow {
  display: none;
}

/* TEXT CONTAINER - Right side */
.hero-text-content {
  position: relative;
  width: 100%;
  z-index: 15;
  display: flex;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  pointer-events: auto;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-text-content {
    text-align: left;
  }
}

.welcome-inline {
  max-width: 100%;
  width: 100%;
  margin: 0;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  border: none;
  box-shadow: none;
}

.welcome-inline h2 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  margin-bottom: 25px;
  color: var(--accent-blue);
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-align: center;
}

@media (min-width: 768px) {
  .welcome-inline h2 {
    text-align: left;
  }
}

/* Welcome text - Right side */
.welcome-inline p {
  display: block;
  margin-bottom: 16px;
  line-height: 1.65;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  text-align: justify;
  hyphens: auto;
}

/* Dropcap for first paragraph - subtle size increase */
.welcome-inline p:first-of-type::first-letter {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
  float: left;
  margin: 0 4px 0 0;
  color: var(--accent);
}

/* Mobile responsive - stack vertically */
@media (max-width: 1200px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
  }
  
  .profile-image-container {
    max-width: 400px;
    height: 500px;
    margin: 0 auto;
  }
  
  .profile-image-container::after {
    top: -80px;
    left: -80px;
    right: -80px;
    bottom: -80px;
  }
  
  .hero-text-content {
    padding-bottom: 0;
    align-items: center;
  }
  
  .welcome-inline h2 {
    font-size: 32px;
    text-align: center;
  }
  
  .welcome-inline p {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  /* The padding-top is now handled by the specific .hero-content rule above to clear the fixed nav */
  .hero-content {
    padding: 0 30px; 
    gap: 30px;
  }
  
  .profile-image-container {
    max-width: 350px;
    height: 450px;
    /* ADJUSTMENT: Mobile order swap - Image moves to second position (below text) */
    order: 2;
  }
  
  .hero-text-content {
    /* ADJUSTMENT: Mobile order swap - Text moves to first position (above image) */
    order: 1;
  }
  
  .profile-image-container::after {
    top: -60px;
    left: -60px;
    right: -60px;
    bottom: -60px;
  }
  
  .welcome-inline h2 {
    font-size: 28px;
  }
}

/* ABOUT ME SECTION - Magazine article style with proper spacing */
.about-me-section {
  max-width: 1400px;
  margin: 0 auto;
  padding: 100px 40px 80px;
  position: relative;
  background: transparent;
  z-index: 10;
}

.about-me-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: start;
}

/* Photo with fade glow effect */
.about-photo-right {
  width: 90%;
  height: auto;
  object-fit: cover;
  border: none;
  position: relative;
  filter: grayscale(5%) contrast(1.03);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.3);
  opacity: 1;
  transition: all 0.5s ease;
}

/* Add gradient fade glow frame to about photo */
.about-me-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: start;
  position: relative;
}

.about-me-grid::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  bottom: -30px;
  width: calc(45% + 60px);
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(250, 250, 250, 0.15) 45%,
    rgba(250, 250, 250, 0.35) 60%,
    rgba(250, 250, 250, 0.6) 75%,
    rgba(250, 250, 250, 0.85) 90%,
    rgba(250, 250, 250, 1) 100%
  );
  z-index: 1;
  pointer-events: none;
  display: none;
}

@media (min-width: 900px) {
  .about-me-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
  }
  
  .about-me-grid::after {
    display: block;
  }
  
  .about-photo-right {
    position: sticky;
    top: 100px;
    margin-left: 0;
    z-index: 0;
  }
}

.about-photo-right:hover {
  transform: scale(1.01);
}

.about-photo-right::before {
  display: none;
}

.about-me-content-left h2 {
  font-family: 'Libre Baskerville', serif;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 35px;
  color: var(--accent-blue);
  line-height: 1.1;
  letter-spacing: 0.01em;
  border-bottom: none;
  padding-bottom: 0;
}

.about-me-content-left h2::after {
  display: none;
}

.about-me-content-left #aboutMeText {
  text-align: justify;
  hyphens: auto;
}

.about-me-content-left #aboutMeText p {
  margin-bottom: 20px;
  line-height: 1.7;
  color: var(--muted);
  font-size: 16px;
}

/* Dropcap for About Me section - subtle size increase */
.about-me-content-left #aboutMeText p:first-of-type::first-letter {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
  float: left;
  margin: 0 4px 0 0;
  color: var(--accent);
}

/* CARDS - Clean editorial */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 50px 60px;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
  transition: all 0.4s ease;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card:hover::before {
  opacity: 1;
}

/* GRID */
.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 0 40px;
}
@media(min-width:768px){
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    padding: 0 60px;
  }
}

@media(min-width:1200px){
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 0 60px;
  }
}

/* SESSION CARDS */
.session{position: relative}
.session h3 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--accent-blue);
  line-height: 1.3;
}

.session ul {
  text-align: left;
  margin-bottom: 20px;
}

.session ul li {
  text-align: justify;
  hyphens: auto;
}

.session .price{
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  margin: 20px 0;
  font-family: 'Libre Baskerville', serif;
}
.session .btn{
  display: inline-block;
  padding: 14px 40px;
  background: var(--accent);
  color: white;
  border-radius: 0;
  text-decoration: none;
  margin-top: 20px;
  transition: all 0.3s ease;
  font-weight: 600;
  border: 2px solid var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.session .btn:hover{
  background: white;
  color: var(--accent);
}

/* CTA SECTION - with overlap into dolphin image */
.cta-section {
  padding: 60px 0 100px 0;
  text-align: center;
  position: relative;
  background: transparent;
  border: none;
  z-index: 20;
  margin-bottom: -100px;
}

.cta-section .container {
  position: relative;
  z-index: 21;
}

.cta-section .hero-btn {
  display: inline-block;
  padding: 18px 50px;
  background: var(--accent);
  backdrop-filter: blur(20px);
  color: white;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.4s ease;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 2px solid var(--accent);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.cta-section .hero-btn:hover {
  background: white;
  color: var(--accent);
  transform: scale(1.02);
  box-shadow: 0 15px 50px rgba(0,0,0,0.25);
}

/* INSPIRATIONAL IMAGE - Dolphin with overlap and blur */
.inspiration-panel {
  width: 100%;
  margin: 0;
  padding: 150px 0 0 0;
  overflow: hidden;
  position: relative;
  border: none;
  z-index: 10;
}

/* Gradient overlay on top for blending with CTA */
.inspiration-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: linear-gradient(
    to bottom,
    rgba(250,250,250,1) 0%,
    rgba(250,250,250,0.9) 20%,
    rgba(250,250,250,0.5) 50%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Gradient fade-out effect around dolphin image */
.inspiration-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 20%,
    rgba(250, 250, 250, 0.1) 35%,
    rgba(250, 250, 250, 0.3) 50%,
    rgba(250, 250, 250, 0.6) 65%,
    rgba(250, 250, 250, 0.85) 80%,
    rgba(250, 250, 250, 1) 95%
  );
  z-index: 3;
  pointer-events: none;
}

.inspiration-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(5%) contrast(1.03);
  position: relative;
  z-index: 1;
  opacity: 0.95;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), 0 0 80px rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
  .inspiration-image {
    height: 600px;
  }
}

/* FOOTER */
footer{
  text-align: center;
  padding: 20px 40px;
  background: var(--card);
  border-top: 1px solid var(--border);
}
footer img.bottomlogo{
  height: 180px;
  display: block;
  margin: 0 auto 25px;
  opacity: 0.7;
  /* FIX: Ensure logo aspect ratio is preserved */
  width: auto; 
}
footer p{
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* PHILOSOPHY PAGE */
#philoContainer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 0 40px;
}
@media (min-width: 900px) {
  #philoContainer {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    padding: 0 60px;
  }
}
.philo-card {
  border-radius: 0;
  padding: 50px 60px;
  color: var(--ink);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--card);
  transition: all 0.4s ease;
}

.philo-card::before {
  display: none;
}

.philo-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(2px);
}

.philo-card h3 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--accent-blue);
  line-height: 1.3;
}

.philo-card p, .philo-card ul {
  color: var(--muted);
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.philo-card ul li {
  text-align: justify;
  hyphens: auto;
}

.philo1, .philo2, .philo3, .philo4, .philo5, .philo6, .philo7, .philo8 { 
  background: var(--card);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 40px;
  background: var(--accent);
  color: white;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
  border: 2px solid var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.btn:hover {
  background: white;
  color: var(--accent);
}

.btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--border);
}

.btn.secondary:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Misc */
.responsive{max-width:100%;height:auto}
.small{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  text-align:justify;
  hyphens:auto;
}

/* Selection */
::selection {
  background: var(--accent);
  color: white;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 1023px) {
  .card, .philo-card { padding: 40px 50px; }
  .about-me-content-left h2 { font-size: 36px; }
  .section { padding: 50px 0; }
  .about-me-section { padding: 60px 40px; }
  #philoContainer { padding: 0 30px; }
  .grid { padding: 0 30px; }
}

@media (max-width: 767px) {
  .card, .philo-card { padding: 35px 40px; }
  #philoContainer { padding: 0 20px; }
  .grid { padding: 0 20px; }
}

@media print {
  nav, .cta-section, footer { display: none; }
  .card { break-inside: avoid; }
}
/* Contact cards - match session cards styling */
#contactTitle ~ .grid .card h3 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--accent-blue);
  margin-bottom: 20px;
}

#contactTitle ~ .grid .card {
  font-size: 16px;
}

#contactTitle ~ .grid .card .btn {
  padding: 14px 40px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* --- New Styles for Agreement Modal --- */

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top of all content (high z-index is important) */
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; /* Enable scroll if content overflows */
  background-color: rgba(0,0,0,0.6); /* Semi-transparent black background */
  backdrop-filter: blur(5px); /* Adds a nice blur effect to content behind the modal */
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 5% from the top and centered horizontally */
  padding: 20px;
  border: 1px solid #ddd;
  width: 90%; 
  max-width: 650px; /* Comfortable reading width for the policy */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  position: relative;
}

/* Ensure modal is responsive on smaller screens */
@media (max-width: 700px) {
  .modal-content {
    margin: 5% auto;
    width: 95%;
  }
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

/* Input styles for the form */
#agreementForm label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

#agreementForm input[type="text"],
#agreementForm input[type="email"],
#agreementForm input[type="date"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Signature Canvas */
#signatureCanvas {
  width: 100%;
  max-width: 400px; /* Constrain max width for better appearance */
  height: 150px;
  background-color: #ffffff;
  border: 1px solid #333;
  cursor: crosshair;
  display: block;
  touch-action: none; /* Critical for mobile drawing */
}

/* Clear button style */
#clearSigBtn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Submission Button style */
#submitAgreementBtn {
  margin-top: 15px;
  width: 100%;
  padding: 15px;
  font-size: 1.1em;
  background-color: #4CAF50; /* A friendly green color */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#submitAgreementBtn:hover:not(:disabled) {
  background-color: #45a049;
}

#submitAgreementBtn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Submission message style */
#submissionMessage {
  font-size: 0.9em;
  font-weight: bold;
}
/* Make all buttons/CTA links show the hand cursor */
.btn,
button {
  cursor: pointer;
}
/* ===== Centered Instagram embed ===== */
.embed-shell {
  max-width: 980px;
  margin: 0 auto;          /* ← centers horizontally */
  padding: 0 1rem;         /* breathing room on mobile */
}

.embed-frame {
  width: 100%;
  height: min(75vh, 720px);
  margin: 0 auto;          /* safety centering */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.embed-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.embed-scroll iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;          /* prevents inline offset */
}
/* FIX: Work intro padding to match page title + grid */
.work-intro{
  max-width: 900px;
  margin: 0.75rem auto 1.25rem;
  padding: 0 60px;          /* ← this is the key */
  line-height: 1.65;
  font-size: 1.05rem;
  opacity: 0.95;
}
.work-intro p{ margin: 0 0 0.75rem 0; }
.work-intro p:last-child{ margin-bottom: 0; }

@media (max-width: 768px){
  .work-intro{
    padding: 0 30px;        /* mobile match */
  }
}