/* =================================================================
   Main css
   ================================================================= */


/* DESIGN TOKENS */
:root {
  --black:   #1C1C1E;
  --navy:    #1F2A37;
  --navy-2:  #263444;
  --cream:   #F2F2E6;
  --cream-d: #E6E2D6;
  --white:   #FAFAF6;
  --gold:    #C2A56B;
  --gold-d:  #786C52;
  --gold-l:  #D4BA8A;

  --display: 'Cormorant Garamond', Georgia, serif;
  --sans:    'Inter', 'Helvetica Neue', sans-serif;

  --ease:    260ms cubic-bezier(0.16,1,0.3,1);
  --ease-lg: 480ms cubic-bezier(0.16,1,0.3,1);
}


/* RESET & BASE */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* matches fixed header height */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--navy);
  line-height: 1.65;
}

img  { display:block; max-width:100%; }
a    { color:inherit; text-decoration:none; }

::selection { background:rgba(194,165,107,.22); color:var(--navy); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }


/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ease-lg), transform var(--ease-lg);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}


/* HERO SECTION */

/* Outer container — two-column grid */
.hero {
  min-height: 100svh;
  padding-top: 88px; /* same as header height */
  display: grid;
  grid-template-columns: 55fr 45fr;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

/* Background grid lines */
.hero-grid-bg {
  position: absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 79px, rgba(31,42,55,.055) 79px, rgba(31,42,55,.055) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(31,42,55,.055) 79px, rgba(31,42,55,.055) 80px);
}

/* Subtle radial glow behind left text */
.hero-glow {
  position: absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 25% 55%, rgba(194,165,107,.06) 0%, transparent 65%);
}

/* Left column — headline + sub text */
.hero-left {
  position: relative; z-index:1;
  padding: 2rem 5%;
  display: flex; flex-direction:column;
  justify-content: flex-start; align-items:flex-start;
  min-height: 100vh;
}

.hero-h1 {
  margin-top: clamp(8rem, 15vh, 15rem);
  margin-left: clamp(2rem, 10vw, 12rem);
  font-family: var(--display);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.hero-h1 em { font-style:italic; font-weight:500; color:var(--gold); }

.hero-sub {
  margin-left: clamp(2rem, 10vw, 12rem);
  font-family: var(--sans);
  font-size: clamp(.875rem, .84rem + .2vw, 1.05rem);
  color: rgba(31,42,55,0.60);
  line-height: 1.9;
  max-width: 50ch;
}

/* Right column — quote block */
.hero-right {
  position: relative; z-index:1;
  padding: clamp(28rem, 18vh + 18rem, 30rem)
           clamp(2.5rem, 6vw, 5.5rem)
           clamp(3.5rem, 7vh, 6rem)
           clamp(2.5rem, 5vw, 5rem);
  display: flex; flex-direction:column;
  justify-content: center; align-items:flex-start;
}

/* Quote fade-in animation */
@keyframes quoteFade {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-quote-wrap {
  position: relative; z-index:1;
  opacity: 0;
  animation: quoteFade 1.2s ease forwards;
  animation-delay: 0.6s;
}

/* Quote text — gold left sidebar line */
.hero-quote-text {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(31,42,55,0.78);
  line-height: 1.72;
  margin-bottom: 1.5rem;
  border-left: 2px solid var(--gold); /* gold sidebar line */
  padding-left: 1.25rem;
}
.hero-quote-text em { font-style:normal; font-weight:600; color:var(--gold-d); }

.hero-quote-attr { display:flex; align-items:center; gap:.75rem; }
.hero-quote-attr-line {
  width:32px; height:1px;
  background:linear-gradient(to right, var(--gold), transparent); opacity:.45;
}
.hero-quote-attr-text {
  font-family: var(--sans); font-size:.60rem;
  letter-spacing:.18em; text-transform:uppercase;
  color: rgba(31,42,55,.38);
}

/* corner brackets */
.hero-corner {
  position:absolute; width:64px; height:64px;
  border-color: rgba(31,42,55,.14);
  border-style:solid; pointer-events:none; z-index:3;
}
.hero-corner--tl { top:96px;    left:24px;  border-width:2px 0 0 2px; }
.hero-corner--tr { top:96px;    right:24px; border-width:2px 2px 0 0; }
.hero-corner--bl { bottom:24px; left:24px;  border-width:0 0 2px 2px; }
.hero-corner--br { bottom:24px; right:24px; border-width:0 2px 2px 0; }


/* GIFT IFSC SECTION */
.ifsc-section {
  background: var(--cream);
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 3rem);
  position: relative;
}

/* top gradient rule */
.ifsc-section::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(194,165,107,.22), transparent);
}

.ifsc-inner     { max-width:1000px; margin:auto; }
.section-header { text-align:center; margin-bottom:3.5rem; }

.section-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 600;
  font-style: italic;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  letter-spacing: -.005em;
}

.section-intro {
  font-family: var(--sans);
  font-size: clamp(.875rem, .84rem + .15vw, .975rem);
  color: rgba(31,42,55,.58);
  max-width: 54ch; margin:auto; line-height:1.9;
}

/* Diamond ornament divider between heading and cards */
.section-divider {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin-bottom:3rem;
}
.section-divider-line { flex:1; max-width:100px; height:1px; }
.section-divider-line.left  { background:linear-gradient(to right, transparent, rgba(194,165,107,.35)); }
.section-divider-line.right { background:linear-gradient(to left,  transparent, rgba(194,165,107,.35)); }
.section-divider-icon { color:var(--gold); opacity:.45; flex-shrink:0; }

/* Two-column card grid */
.ifsc-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

.ifsc-card {
  background: var(--white);
  border: 1px solid rgba(194,165,107,.2);
  padding: 2.75rem 2.5rem;
  position: relative; overflow:hidden;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

/* Gold shimmer on top edge on hover */
.ifsc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0; transition:opacity var(--ease);
}
.ifsc-card:hover { border-color:rgba(194,165,107,.45); box-shadow:0 16px 48px rgba(31,42,55,.09); transform:translateY(-4px); }
.ifsc-card:hover::before { opacity:1; }

.ifsc-card-title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  font-style: italic;
  color: var(--navy);
  margin-bottom: .875rem;
  line-height: 1.2;
}

.ifsc-card-body {
  font-family: var(--sans);
  font-size: .875rem;
  color: rgba(31,42,55,.58);
  line-height: 1.85;
}


/* RESPONSIVE BREAKPOINTS */


/* -----------------------------------------------------------------
   ≤ 900px  Tablet & mobile
   ----------------------------------------------------------------- */
@media (max-width: 900px) {

  /* ── HERO: stack into one column ── */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;           /* let content set the height */
  }

  /* LEFT column */
  .hero-left {
    min-height: auto;
    padding: 5rem clamp(1.25rem, 5vw, 2.5rem) 2rem clamp(1.25rem, 5vw, 2.5rem);
    border-bottom: none;
  }

  /* HEADLINE */
  .hero-h1 {
    margin-top:  0;
    margin-left: 0;
    max-width: 100%;
    font-size: clamp(2.2rem, 7vw, 3rem);
  }

  /* SUB TEXT */
  .hero-sub {
    margin-left: 0;
    max-width: 100%;
  }

  /* RIGHT column (quote) */
  .hero-right {
    padding: 2rem clamp(1.25rem, 5vw, 2.5rem) 3rem clamp(1.25rem, 5vw, 2.5rem);
    background: transparent !important;
    justify-content: flex-start;
    align-items: flex-end;      /* push quote wrap to the right */
  }

  /* Quote text: right-aligned, gold line moves to RIGHT side on mobile */
  .hero-quote-text {
    text-align: right;
    border-left:  none;         /* remove left sidebar line */
    border-right: 2px solid var(--gold); /* gold line on right instead */
    padding-left:  0;
    padding-right: 1.25rem;
    max-width: 100%;
    font-size: clamp(1rem, 4vw, 1.3rem);
  }

  /* Speed up quote animation on mobile */
  .hero-quote-wrap { animation-delay: 0.2s; }

  /* Decorative corner brackets hidden on mobile */
  .hero-corner { display: none; }
}


/* -----------------------------------------------------------------
   ≤ 700px  Mobile
   ----------------------------------------------------------------- */
@media (max-width: 700px) {

  /* Cards stack vertically */
  .ifsc-cards { grid-template-columns: 1fr; }

  /* Card content: centre-aligned on mobile */
  .ifsc-card       { text-align: center; }
  .ifsc-card-title { text-align: center; }
  .ifsc-card-body  { text-align: center; }

  /* Tighter side padding on the section */
  .ifsc-section { padding-inline: clamp(1.25rem, 5vw, 2rem); }
}


/* -----------------------------------------------------------------
   ≤ 480px  Small mobile
   ----------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-h1         { font-size: 2rem; }
  .hero-sub        { font-size: .875rem; }
  .hero-quote-text { font-size: 1rem; }
  .ifsc-card       { padding: 1.75rem 1.25rem; }
}


/* -----------------------------------------------------------------
   ≤ 420px  Very small mobile
   ----------------------------------------------------------------- */
@media (max-width: 420px) {
  .brand-sub { display: none; }
}