/* ============ TOKENS ============ */
  :root{
    --paper:      #FFFFFF;
    --paper-deep: #F7F6F2;
    --card:       #FFFFFF;
    --ink:        #221F1A;
    --ink-soft:   #5B564C;
    --maroon:     #7A2E20;
    --maroon-deep:#591F15;
    --gold:       #A2812F;
    --gold-soft:  #B79A50;
    --gold-line:  rgba(20,18,12,.10);
    --deep:       #1E2420;
    --deep-text:  #F3F1E8;
    --shadow: 0 10px 28px rgba(20,18,12,.08);
    --measure: 62ch;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Plus Jakarta Sans', sans-serif; font-size:17px; line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  h1,h2,h3{font-family:'Plus Jakarta Sans', sans-serif; font-weight:600; margin:0; letter-spacing:-.02em;}
  ul{margin:0; padding:0; list-style:none;}
  button{font:inherit;}
  .eyebrow{
    font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; letter-spacing:.32em; text-transform:uppercase;
    color:var(--maroon); display:inline-flex; align-items:center; gap:.6em;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); display:inline-block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} body{font-size:17.5px;} }

  .sym-defs{position:absolute; width:0; height:0; overflow:hidden;}

  /* ============ HEADER ============ */
  .site-header{
    position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
    backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--gold-line);
    transition:box-shadow .3s ease;
  }
  .site-header.scrolled{box-shadow:0 8px 22px rgba(20,18,12,.08);}
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1280px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:12px; font-family:'Plus Jakarta Sans',sans-serif; font-size:21px; letter-spacing:.03em; text-decoration:none; color:var(--maroon-deep);}
  .brand svg{width:28px; height:28px; color:var(--gold);}
  .brand small{display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:10px; letter-spacing:.28em; color:var(--ink-soft); font-weight:500; text-transform:uppercase; margin-top:2px;}
  nav.main-nav{display:flex; align-items:center; gap:30px;}
  nav.main-nav ul{display:flex; align-items:center; gap:26px;}
  nav.main-nav a{font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink); position:relative; padding:4px 0;}
  nav.main-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
  nav.main-nav a:hover::after{transform:scaleX(1);}
  .nav-more{position:relative;}
  .nav-more-panel{position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--gold-line); box-shadow:var(--shadow); padding:14px 10px; min-width:190px; display:none; z-index:5;}
  .nav-more-panel.open{display:block;}
  .nav-more-panel a{display:block; padding:9px 16px; font-size:13px;}
  .nav-more-panel a:hover{background:var(--paper-deep);}
  .nav-cta{display:flex; gap:10px; align-items:center;}
  .btn{font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:10px 20px; border:1px solid var(--maroon); color:var(--maroon-deep); transition:background .2s ease,color .2s ease;}
  .btn:hover{background:var(--maroon); color:#fff;}
  .btn.solid{background:var(--maroon); color:#fff;}
  .btn.solid:hover{background:var(--maroon-deep);}
  .hamburger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .hamburger span{width:24px; height:2px; background:var(--ink);}
  .mobile-panel{display:none; flex-direction:column; padding:10px 32px 26px; gap:2px;}
  .mobile-panel a{font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--gold-line);}
  @media (max-width:980px){ nav.main-nav{display:none;} .hamburger{display:flex;} .mobile-panel.open{display:flex;} }

  .lang-fab{position:fixed; right:22px; top:120px; z-index:55; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
  .lang-btn{font-family:'Plus Jakarta Sans',sans-serif; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; background:var(--deep); color:var(--deep-text); border:1px solid var(--gold); padding:11px 16px; cursor:pointer; text-align:center; line-height:1.5; box-shadow:var(--shadow);}
  .lang-options{display:none; flex-direction:column; gap:6px;}
  .lang-options.open{display:flex;}
  .lang-options a{font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; letter-spacing:.06em; background:var(--card); border:1px solid var(--gold-line); color:var(--ink); padding:9px 16px; text-decoration:none; text-align:center; box-shadow:var(--shadow);}
  @media (max-width:640px){ .lang-fab{top:auto; bottom:96px; right:16px;} }

  .to-top{position:fixed; right:22px; bottom:26px; z-index:55; width:48px; height:48px; border-radius:50%; background:var(--deep); color:var(--deep-text); display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .3s ease;}
  .to-top.show{opacity:1; pointer-events:auto;}
  .to-top svg{width:18px; height:18px;}

  /* =========================================================
   COMPACT PREMIUM HERO
========================================================= */

.hero {
    position: relative;
    background: var(--paper);
    color: var(--ink);

    /* Reduced vertical whitespace */
    padding: 20px 32px 52px;

    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;

    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.hero-content.in-view {
    opacity: 1;
    transform: translateY(0);
}

.hero .eyebrow {
    color: var(--maroon);
    justify-content: center;

    font-size: 11px;
    letter-spacing: .28em;
}

.hero .eyebrow::after {
    content: "";
    width: 24px;
    height: 1px;

    background: var(--gold);

    display: inline-block;
}

.hero h1 {
    max-width: 820px;

    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.14;

    margin: 18px auto 16px;

    letter-spacing: -.025em;
}

.hero .gold-rule {
    width: 52px;
    height: 1px;

    background: var(--gold);

    margin: 0 auto 18px;
}

.hero p.sub {
    max-width: 560px;

    margin: 0 auto;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 14px;
    line-height: 1.65;

    letter-spacing: .025em;

    color: var(--ink-soft);
}
@media (max-width: 700px) {

    .hero {
        padding: 18px 20px 35px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero .eyebrow {
        font-size: 9px;
        letter-spacing: .22em;
    }

    .hero h1 {
        font-size: 28px;
        line-height: 1.2;
        margin: 14px auto 14px;
    }

    .hero .gold-rule {
        width: 45px;
        margin-bottom: 14px;
    }

    .hero p.sub {
        font-size: 13.5px;
        line-height: 1.6;
    }
}
  /* ============ SECTIONS ============ */
  .section{padding:84px 0; border-bottom:1px solid var(--gold-line); background:var(--paper);}
  .section.tint{background:var(--paper-deep);}
  .section.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
  .section.reveal.in-view{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){.section.reveal,.hero-content{opacity:1!important; transform:none!important; transition:none!important;} html{scroll-behavior:auto;}}

  .chapter-head{max-width:760px; margin:0 0 44px;}
  .chapter-head.center{margin:0 auto 44px; text-align:center;}
  .chapter-title{font-size:clamp(22px,3.2vw,34px); line-height:1.24; margin-top:14px;}
  .chapter-sub{font-family:'Plus Jakarta Sans',sans-serif; font-style:italic; font-size:18px; color:var(--maroon); margin-top:10px;}

  .row{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; margin-bottom:60px;}
  .row:last-child{margin-bottom:0;}
  .row.reverse .frame-col{order:2;}
  .row.reverse .text-col{order:1;}
  @media (max-width:860px){
    .row, .row.reverse{grid-template-columns:1fr;}
    .row.reverse .frame-col, .row.reverse .text-col{order:0;}
    .row{gap:28px; margin-bottom:46px;}
  }

  .frame{position:relative; border:1px solid var(--gold-line); background:var(--card); box-shadow:var(--shadow); overflow:hidden;}
  .frame img{width:100%; height:auto; display:block;}
  .frame img.portrait{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:center;
  }
  .frame-caption{font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; color:var(--ink-soft); padding:14px 16px 16px; line-height:1.6; border-top:1px solid var(--gold-line);}

  .text-col ul{display:flex; flex-direction:column; gap:15px;}
  .text-col li{position:relative; padding-left:22px; color:var(--ink-soft); font-size:18px;}
  .text-col li::before{content:""; position:absolute; left:0; top:12px; width:6px; height:1.5px; background:var(--maroon);}
  .text-col li strong{color:var(--ink); font-weight:600;}

  .center-block{max-width:760px; margin:0 auto; text-align:center;}
  .center-block ul{display:flex; flex-direction:column; gap:15px; text-align:left; margin-top:8px;}
  .center-block li{position:relative; padding-left:22px; color:var(--ink-soft); font-size:18px;}
  .center-block li::before{content:""; position:absolute; left:0; top:12px; width:6px; height:1.5px; background:var(--maroon);}
  .center-block li strong{color:var(--ink); font-weight:600;}

  .pull-quote{margin:34px 0 0; padding:22px 28px; border-left:2px solid var(--maroon); font-family:'Plus Jakarta Sans',sans-serif; font-size:19px; line-height:1.5; color:var(--maroon-deep); background:var(--paper-deep);}
  .footnote{margin-top:24px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; color:var(--ink-soft); line-height:1.7;}
  .footnote a{color:var(--maroon); text-decoration:underline;}

  /* ============ CHAPTER NAVIGATOR (tabs) ============ */
  .tabs-row{display:flex; gap:4px; overflow-x:auto; padding-bottom:16px; margin-bottom:46px; border-bottom:1px solid var(--gold-line); scrollbar-width:none;}
  .tabs-row::-webkit-scrollbar{display:none;}
  .tab-btn{flex:0 0 auto; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; background:none; border:none; cursor:pointer; color:var(--ink-soft); padding:10px 15px; position:relative; white-space:nowrap; transition:color .2s ease;}
  .tab-btn::after{content:""; position:absolute; left:15px; right:15px; bottom:-1px; height:2px; background:transparent;}
  .tab-btn.active{color:var(--maroon);}
  .tab-btn.active::after{background:var(--maroon);}
  .tab-btn:hover{color:var(--maroon-deep);}

  /* ============ MAIN CONTENT CAROUSEL ============ */
  .carousel-viewport{overflow:hidden;}
  .carousel-track{display:flex; align-items:flex-start; transition:transform .55s cubic-bezier(.65,0,.35,1); touch-action:pan-y;}
  .carousel-slide{flex:0 0 100%; max-width:100%; padding:2px;}

  .carousel-nav{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:48px; flex-wrap:wrap;}
  .nav-btn{display:inline-flex; align-items:center; gap:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; background:none; border:1px solid var(--gold-line); padding:12px 22px; cursor:pointer; color:var(--ink); transition:border-color .2s, color .2s;}
  .nav-btn:hover{border-color:var(--maroon); color:var(--maroon);}
  .nav-btn svg{width:13px; height:13px;}
  .nav-counter{font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; letter-spacing:.1em; color:var(--ink-soft); min-width:64px; text-align:center;}
  .progress-track{height:2px; background:var(--gold-line); margin-top:28px; position:relative; overflow:hidden; max-width:420px; margin-left:auto; margin-right:auto;}
  .progress-fill{position:absolute; left:0; top:0; bottom:0; width:5.3%; background:var(--maroon); transition:width .5s ease;}

  /* ============ MINI IMAGE CAROUSEL ============ */
  .mini-car{position:relative;}
  .mini-viewport{overflow:hidden; border:1px solid var(--gold-line); background:var(--card); box-shadow:var(--shadow);}
  .mini-track{display:flex; transition:transform .5s ease; touch-action:pan-y;}
  .mini-slide{
    flex:0 0 100%;
    max-width:100%;
    position:relative;
    background:#f7f6f2;
  }
  .mini-slide img{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
  }
  .mini-caption{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,transparent,rgba(10,10,8,.62)); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; padding:30px 16px 12px; line-height:1.5;}
  .mini-arrow{position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--gold-line); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4;}
  .mini-arrow.prev{left:10px;} .mini-arrow.next{right:10px;}
  .mini-arrow svg{width:13px; height:13px; color:var(--ink);}
  .mini-dots{display:flex; justify-content:center; gap:7px; margin-top:14px;}
  .mini-dot{width:6px; height:6px; border-radius:50%; background:var(--gold-line); border:none; cursor:pointer; padding:0;}
  .mini-dot.active{background:var(--maroon);}
  .mini-count{position:absolute; top:12px; right:12px; background:rgba(10,10,8,.55); color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:10.5px; letter-spacing:.06em; padding:4px 9px; z-index:4;}

  /* ============ FOOTER ============ */
  footer{background:var(--deep); color:#D9E3DD; padding:20px 32px 15px !important;}
  .footer-inner{max-width:1180px; margin:0 auto;}
  .footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; border-bottom:1px solid rgba(203,183,138,.25); padding-bottom:38px;}
  .footer-brand{font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; color:var(--deep-text);}
  .footer-brand small{display:block; margin-top:8px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; letter-spacing:.05em; color:#AEC1B9; max-width:340px; line-height:1.7;}
  .footer-links{display:flex; gap:56px; flex-wrap:wrap;}
  .footer-links h4{font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; font-weight:500;}
  .footer-links ul{display:flex; flex-direction:column; gap:11px;}
  .footer-links a{font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; text-decoration:none; color:#D9E3DD;}
  .footer-links a:hover{color:var(--gold-soft);}
  .footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:26px; font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; color:#9FB3AB;}
  .footer-bottom a{text-decoration:none; color:#9FB3AB; margin-left:20px;}
  .footer-bottom a:hover{color:var(--gold-soft);}

/* =========================================================
   LARAVEL IMAGE SAFETY
   Never crop original images
========================================================= */

.frame img,
.frame img.portrait,
.mini-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.mini-slide {
    height: auto;
    background: #f7f6f2;
}

.mini-viewport {
    overflow: hidden;
    background: #f7f6f2;
}


/* =========================================================
   KEEP PAGE CONTENT VISIBLE
========================================================= */

.hero-content,
.section.reveal {
    opacity: 1;
    transform: none;
}


/* =========================================================
   MAIN CHAPTER CAROUSEL
========================================================= */

#chapters .carousel-viewport {
    overflow: hidden;
}

#chapters .carousel-track {
    display: flex;
    align-items: flex-start;
    transition:
        transform .55s cubic-bezier(.65,0,.35,1);
}

#chapters .carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 2px;
    box-sizing: border-box;
}


/* =========================================================
   CHAPTER HEADINGS
========================================================= */

#chapters .chapter-head {
    margin-bottom: 32px;
}

#chapters .chapter-head.center {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#chapters .chapter-head .chapter-title {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   PROPHECY
   Premium two-column layout
========================================================= */

#chapters .prophecy-slide {
    padding-top: 2px;
}


/* Prophecy heading */

#chapters .prophecy-slide > .chapter-head {
    max-width: 900px;
    margin: 0 auto 38px;
    text-align: center;
}

#chapters .prophecy-slide > .chapter-head .eyebrow {
    justify-content: center;
}

#chapters .prophecy-slide > .chapter-head .chapter-title {
    max-width: 850px;
    margin: 14px auto 0;
}


/* =========================================================
   PROPHECY TWO COLUMN
========================================================= */

#chapters .prophecy-layout {

    width: 100%;
    max-width: 1120px;

    margin: 0 auto;

    display: grid;

    /*
       Image slightly smaller than text.
    */
    grid-template-columns:
        minmax(320px, .90fr)
        minmax(0, 1.10fr);

    gap: 50px;

    align-items: start;
}


/* =========================================================
   PROPHECY IMAGE
========================================================= */

#chapters .prophecy-media {
    width: 100%;
    min-width: 0;
}


/*
   IMPORTANT:
   Do NOT force a height here.

   Your existing carousel JavaScript already handles
   the natural height of the active image.
*/

#chapters .prophecy-media .mini-car {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
}

#chapters .prophecy-media .mini-viewport {
    width: 100%;
    overflow: hidden;

    background: #f7f6f2;

    border: 1px solid var(--gold-line);

    box-shadow:
        0 12px 30px rgba(20,18,12,.08);
}

#chapters .prophecy-media .mini-track {
    display: flex;
    align-items: flex-start;
}

#chapters .prophecy-media .mini-slide {
    flex: 0 0 100%;
    width: 100%;

    background: #f7f6f2;
}

#chapters .prophecy-media .mini-slide img {
    width: 100%;
    height: auto;

    object-fit: contain;

    display: block;
}


/* =========================================================
   PROPHECY IMAGE CONTROLS
========================================================= */

#chapters .prophecy-media .mini-arrow {
    width: 38px;
    height: 38px;

    background: rgba(255,255,255,.94);

    border: 1px solid var(--gold-line);

    box-shadow:
        0 5px 16px rgba(20,18,12,.12);
}

#chapters .prophecy-media .mini-arrow.prev {
    left: 12px;
}

#chapters .prophecy-media .mini-arrow.next {
    right: 12px;
}

#chapters .prophecy-media .mini-count {
    top: 12px;
    right: 12px;

    background: rgba(10,10,8,.62);

    padding: 4px 9px;

    font-size: 10px;
}


/* =========================================================
   PROPHECY DOTS
========================================================= */

#chapters .prophecy-media .mini-dots {
    margin-top: 12px;
}


/* =========================================================
   PROPHECY RIGHT CONTENT
========================================================= */

#chapters .prophecy-content {
    width: 100%;
    min-width: 0;
    padding-top: 2px;
}


/* Intro points */

#chapters .prophecy-intro ul,
#chapters .prophecy-secondary ul {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin: 0;
    padding: 0;

    text-align: left;
}


#chapters .prophecy-content li {

    position: relative;

    padding-left: 21px;

    margin: 0;

    color: var(--ink-soft);

    font-size: 17px;

    line-height: 1.72;
}


#chapters .prophecy-content li::before {

    content: "";

    position: absolute;

    left: 0;
    top: 12px;

    width: 6px;
    height: 1.5px;

    background: var(--maroon);
}


#chapters .prophecy-content li strong {

    color: var(--ink);

    font-weight: 600;
}


/* =========================================================
   PROPHECY SECOND CONTENT
========================================================= */

#chapters .prophecy-secondary {

    margin-top: 30px;

    padding-top: 28px;

    border-top:
        1px solid var(--gold-line);
}


#chapters .prophecy-secondary .chapter-title {

    max-width: none;

    margin: 0 0 18px;

    font-size: 21px;

    line-height: 1.45;

    font-weight: 600;

    color: var(--ink);

    letter-spacing: -.015em;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 901px) {

    #chapters .prophecy-layout {
        grid-template-columns:
            minmax(360px, .90fr)
            minmax(0, 1.10fr);

        gap: 52px;
    }

    #chapters .prophecy-media {
        padding-top: 2px;
    }

}


/* =========================================================
   REDUCED DESKTOP / TABLET
   IMPORTANT:
   Keep image + text side-by-side.
========================================================= */

@media (min-width: 701px) and (max-width: 900px) {

    #chapters .prophecy-layout {

        display: grid;

        grid-template-columns:
            minmax(300px, .88fr)
            minmax(0, 1.12fr);

        gap: 30px;

        max-width: 100%;

        align-items: start;
    }


    #chapters .prophecy-content li {

        font-size: 15px;

        line-height: 1.65;
    }


    #chapters .prophecy-secondary .chapter-title {

        font-size: 18px;

        line-height: 1.4;
    }


    #chapters .prophecy-slide > .chapter-head {

        margin-bottom: 28px;
    }


    #chapters .prophecy-slide > .chapter-head .chapter-title {

        font-size: 30px;

        line-height: 1.2;
    }

}


/* =========================================================
   REAL MOBILE
========================================================= */

@media (max-width: 700px) {

    #chapters .prophecy-slide {
        padding: 0 2px;
    }


    #chapters .prophecy-slide > .chapter-head {

        margin-bottom: 26px;

        padding: 0 8px;
    }


    #chapters .prophecy-slide > .chapter-head .eyebrow {

        font-size: 10px;

        letter-spacing: .22em;
    }


    #chapters .prophecy-slide > .chapter-head .chapter-title {

        max-width: 100%;

        font-size: 26px !important;

        line-height: 1.25 !important;

        margin-top: 10px;
    }


    #chapters .prophecy-layout {

        display: flex;

        flex-direction: column;

        gap: 30px;

        margin: 0;

        max-width: 100%;
    }


    #chapters .prophecy-media {

        width: 100%;

        max-width: 100%;

        margin: 0;
    }


    #chapters .prophecy-content {

        width: 100%;

        padding: 0 4px;
    }


    #chapters .prophecy-content li {

        font-size: 16px !important;

        line-height: 1.65 !important;

        padding-left: 18px;
    }


    #chapters .prophecy-secondary {

        margin-top: 26px;

        padding-top: 24px;
    }


    #chapters .prophecy-secondary .chapter-title {

        font-size: 19px !important;

        line-height: 1.45 !important;
    }

}


/* =========================================================
   GURUKUL
========================================================= */

#gurukul .chapter-head {

    max-width: 1000px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 20px;
    padding-right: 20px;

    text-align: center;
}


#gurukul .chapter-head .chapter-title {

    max-width: 900px;

    margin: 18px auto 0;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.08;

    letter-spacing: -.035em;
}


#gurukul .chapter-head .chapter-sub {

    max-width: 650px;

    margin: 20px auto 0;

    font-size: clamp(17px, 1.5vw, 20px);

    line-height: 1.6;
}


/* =========================================================
   GURUKUL TABLET
========================================================= */

@media (max-width: 900px) {

    #gurukul .chapter-head .chapter-title {

        font-size: clamp(34px, 5vw, 52px);

        line-height: 1.1;
    }

}


/* =========================================================
   GURUKUL MOBILE
========================================================= */

@media (max-width: 700px) {

    #gurukul .chapter-head {

        padding-left: 16px;
        padding-right: 16px;
    }


    #gurukul .chapter-head .chapter-title {

        font-size: clamp(31px, 8vw, 46px);

        line-height: 1.12;

        letter-spacing: -.025em;
    }


    #gurukul .chapter-head .chapter-sub {

        font-size: 16px;

        line-height: 1.6;

        margin-top: 16px;
    }

}

/* =========================================================
   FINAL CHAPTER DESIGN
   IMAGE LEFT + CONTENT RIGHT
   Keep this block at the END of the stylesheet.
========================================================= */

/* All normal image/content chapters */
#chapters .row,
#chapters .row.reverse,
#chapters .media-content-row {
    display: grid;
    grid-template-columns: minmax(320px, .84fr) minmax(0, 1.16fr);
    gap: 58px;
    align-items: start;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

/* Always image on the LEFT */
#chapters .row .frame-col,
#chapters .row.reverse .frame-col,
#chapters .media-content-row .frame-col {
    order: 1;
    min-width: 0;
}

/* Always text on the RIGHT */
#chapters .row .text-col,
#chapters .row.reverse .text-col,
#chapters .media-content-row .text-col {
    order: 2;
    min-width: 0;
    width: 100%;
    padding-top: 2px;
}

/* Never crop the original artwork */
#chapters .row .frame,
#chapters .media-content-row .frame {
    width: 100%;
}

#chapters .row .frame img,
#chapters .row .frame img.portrait,
#chapters .media-content-row .frame img,
#chapters .media-content-row .frame img.portrait {
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center;
}

/* Text rhythm */
#chapters .row .text-col ul,
#chapters .media-content-row .text-col ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    padding: 0;
    text-align: left;
}

#chapters .row .text-col li,
#chapters .media-content-row .text-col li {
    position: relative;
    padding-left: 22px;
    margin: 0;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.72;
}

#chapters .row .text-col li::before,
#chapters .media-content-row .text-col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 1.5px;
    background: var(--maroon);
}

#chapters .row .text-col li strong,
#chapters .media-content-row .text-col li strong {
    color: var(--ink);
    font-weight: 600;
}

/* Converted image carousels */
#chapters .media-content-row .mini-car {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
}

#chapters .media-content-row .mini-viewport {
    width: 100%;
}

#chapters .media-content-row .mini-slide img {
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
}

/* Prophecy follows exactly the same proportions */
#chapters .prophecy-layout {
    grid-template-columns: minmax(320px, .84fr) minmax(0, 1.16fr);
    gap: 58px;
    max-width: 1120px;
}

/* Keep Prophecy secondary content compact */
#chapters .prophecy-secondary {
    margin-top: 26px;
    padding-top: 24px;
}

#chapters .prophecy-secondary .chapter-title {
    font-size: 20px;
    line-height: 1.42;
    margin-bottom: 16px;
}

/* Remove unnecessary large margins from chapter media */
#chapters .media-content-row .frame,
#chapters .media-content-row .mini-car {
    margin-top: 0 !important;
}

/* Chapters without images remain elegant and centered */
#chapters .carousel-slide > .center-block {
    max-width: 820px;
}

/* Navigation should sit close to the actual chapter content */
#chapters .carousel-nav {
    margin-top: 32px;
}

/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */
@media (min-width: 701px) and (max-width: 1000px) {

    #chapters .row,
    #chapters .row.reverse,
    #chapters .media-content-row,
    #chapters .prophecy-layout {
        grid-template-columns: minmax(270px, .88fr) minmax(0, 1.12fr);
        gap: 32px;
    }

    #chapters .row .text-col li,
    #chapters .media-content-row .text-col li,
    #chapters .prophecy-content li {
        font-size: 15px;
        line-height: 1.65;
    }

    #chapters .prophecy-secondary .chapter-title {
        font-size: 18px;
    }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 700px) {

    #chapters .row,
    #chapters .row.reverse,
    #chapters .media-content-row,
    #chapters .prophecy-layout {
        display: flex;
        flex-direction: column;
        gap: 28px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    #chapters .row .frame-col,
    #chapters .row.reverse .frame-col,
    #chapters .media-content-row .frame-col,
    #chapters .row .text-col,
    #chapters .row.reverse .text-col,
    #chapters .media-content-row .text-col {
        order: initial;
        width: 100%;
        padding-top: 0;
    }

    #chapters .row .text-col li,
    #chapters .media-content-row .text-col li,
    #chapters .prophecy-content li {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    #chapters .media-content-row .mini-car,
    #chapters .media-content-row .frame {
        width: 100%;
        max-width: 100%;
    }

    #chapters .prophecy-layout {
        gap: 28px;
    }

    #chapters .carousel-nav {
        margin-top: 28px;
    }
}

/* =========================================================
   EXTRA NARROW SCREENS
========================================================= */
@media (max-width: 480px) {

    #chapters .chapter-title {
        font-size: 25px;
        line-height: 1.25;
    }

    #chapters .row,
    #chapters .row.reverse,
    #chapters .media-content-row,
    #chapters .prophecy-layout {
        gap: 22px;
    }

    #chapters .row .text-col li,
    #chapters .media-content-row .text-col li,
    #chapters .prophecy-content li {
        font-size: 15.5px !important;
    }
}

/* =========================================================
   DYNAMIC MAIN CHAPTER HEIGHT
   The height is controlled by JavaScript and follows the
   currently selected tab/chapter.
========================================================= */

#chapters .carousel-viewport {
    overflow: hidden;
    height: auto;
    transition: height .45s ease;
    will-change: height;
}

#chapters .carousel-track {
    align-items: flex-start;
}

#chapters .carousel-slide {
    height: auto;
    min-height: 0;
}

/* Do not let old content rules create a forced minimum height */
#chapters .carousel-slide,
#chapters .carousel-slide > .row,
#chapters .carousel-slide > .media-content-row,
#chapters .carousel-slide > .prophecy-layout {
    min-height: 0;
}

/* Mobile: height is still dynamic; only the layout direction changes */
@media (max-width: 700px) {
    #chapters .carousel-viewport {
        transition: height .35s ease;
    }
}
/* =========================================================
   GURUKUL
   PREMIUM EDITORIAL DESIGN
========================================================= */

.gurukul-section {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf8f3 100%
        );

    padding-top: 45px;
    padding-bottom: 70px;
}


/* =========================================================
   HEADING
========================================================= */

.gurukul-heading {

    width: min(780px, 100%);

    margin: 0 auto 35px;

    text-align: center;
}


.gurukul-heading .eyebrow {

    justify-content: center;

    font-size: 11px;

    letter-spacing: .30em;
}


.gurukul-heading .chapter-title {

    /*
       IMPORTANT:
       Override the earlier #gurukul rule
       that was making the heading huge.
    */

    max-width: 760px;

    margin: 18px auto 0 !important;

    font-size:
        clamp(26px, 4vw, 40px) !important;

    line-height: 1.13 !important;

    letter-spacing: -.020em;

    font-weight: 500;
}


.gurukul-heading .chapter-sub {

    margin:
        18px auto 0;

    max-width: 600px;

    font-size: 17px;

    line-height: 1.65;

    color: var(--maroon);
}


/* =========================================================
   EDITORIAL CAROUSEL
========================================================= */

.gurukul-editorial {

    width: min(1200px, 100%);

    margin: 0 auto;
}


.gurukul-carousel {

    width: 100%;

    max-width: none !important;

    margin: 0 !important;
}


/* =========================================================
   VIEWPORT
========================================================= */

.gurukul-carousel .mini-viewport {

    position: relative;

    overflow: hidden;

    background: #f4f1ea;

    border:
        1px solid
        rgba(20,18,12,.10);

    box-shadow:
        0 25px 65px
        rgba(20,18,12,.10);

    transition:
        height .45s ease;
}


/* =========================================================
   TRACK
========================================================= */

.gurukul-carousel .mini-track {

    display: flex;

    align-items: stretch;

    transition:
        transform .55s
        cubic-bezier(.65,0,.35,1);
}


/* =========================================================
   SLIDE
========================================================= */

.gurukul-carousel .mini-slide {

    flex: 0 0 100%;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(280px, .72fr);

    align-items: stretch;

    background: #fff;

    position: relative;
}


/* =========================================================
   IMAGE
========================================================= */

.gurukul-slide-image {

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #f3f1ec;

    overflow: hidden;
}


.gurukul-slide-image img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: contain;

    transition:
        transform .8s ease;
}


.gurukul-carousel
.mini-viewport:hover
.gurukul-slide-image img {

    transform:
        scale(1.018);
}


/* =========================================================
   RIGHT CONTENT PANEL
========================================================= */

.gurukul-slide-content {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 100%;

    padding:
        48px 44px 40px;

    background:
        #fbfaf7;

    border-left:
        1px solid
        rgba(20,18,12,.08);
}


/* =========================================================
   TOP
========================================================= */

.gurukul-content-top {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.gurukul-label {

    font-size: 10px;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: var(--maroon);

    font-weight: 600;
}


.gurukul-number {

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 12px;

    letter-spacing: .12em;

    color: var(--gold);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.gurukul-content-main {

    margin:
        55px 0 45px;
}


.gurukul-content-main h3 {

    margin: 0 0 20px;

    font-size:
        clamp(25px, 2.5vw, 34px);

    line-height: 1.15;

    font-weight: 500;

    letter-spacing: -.025em;

    color: var(--ink);
}


.gurukul-content-main p {

    margin: 0;

    font-size: 15px;

    line-height: 1.8;

    color: var(--ink-soft);
}


/* =========================================================
   BOTTOM
========================================================= */

.gurukul-content-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 10px;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--ink-soft);
}


.gurukul-line {

    width: 42px;

    height: 1px;

    background:
        var(--gold);
}


/* =========================================================
   COUNTER
========================================================= */

.gurukul-carousel .mini-count {

    top: 18px;

    right: 18px;

    z-index: 10;

    background:
        rgba(30,36,32,.82);

    color: #fff;

    padding:
        7px 11px;

    font-size: 10px;

    letter-spacing: .08em;

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   ARROWS
========================================================= */

.gurukul-carousel .gurukul-arrow {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.96);

    border:
        1px solid
        rgba(20,18,12,.10);

    box-shadow:
        0 8px 24px
        rgba(20,18,12,.16);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


.gurukul-carousel
.gurukul-arrow.prev {

    left: 18px;
}


.gurukul-carousel
.gurukul-arrow.next {

    right: 18px;
}


.gurukul-carousel
.gurukul-arrow:hover {

    background:
        var(--maroon);

    color:
        #fff;

    transform:
        translateY(-50%)
        scale(1.05);
}


/* =========================================================
   DOTS
========================================================= */

.gurukul-dots {

    margin-top: 22px;

    gap: 8px;
}


.gurukul-dots .mini-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        rgba(122,46,32,.18);

    transition:
        all .25s ease;
}


.gurukul-dots .mini-dot.active {

    width: 22px;

    border-radius: 999px;

    background:
        var(--maroon);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .gurukul-section {

        padding-top: 60px;

        padding-bottom: 60px;
    }


    .gurukul-heading {

        margin-bottom: 40px;
    }


    .gurukul-carousel .mini-slide {

        grid-template-columns:
        minmax(0, 1.65fr)
        minmax(320px, .80fr);
    }


    .gurukul-slide-content {

        padding:
            32px 28px;
    }


    .gurukul-content-main {
             margin: 70px 0 55px;
    }


    .gurukul-content-main h3 {

        font-size: clamp(24px, 2.8vw, 34px);
    }


    .gurukul-content-main p {
        font-size: 16px;
            line-height: 1.85;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .gurukul-section {

        padding-top: 35px;

        padding-bottom: 35px;
    }


    .gurukul-heading {

        margin-bottom: 32px;
    }


    .gurukul-heading .chapter-title {

        font-size:
            24px !important;

        line-height:
            1.18 !important;
    }


    .gurukul-heading .chapter-sub {

        font-size: 15px;

        margin-top: 14px;
    }


    .gurukul-carousel .mini-slide {

        display: flex;

        flex-direction: column;
    }


    .gurukul-slide-image {

        width: 100%;
    }


    .gurukul-slide-image img {

        width: 100%;

        height: auto;
    }


    .gurukul-slide-content {

        min-height:
            270px;

        padding:
            28px 24px 24px;

        border-left: 0;

        border-top:
            1px solid
            rgba(20,18,12,.08);
    }


    .gurukul-content-main {

        margin:
            35px 0 30px;
    }


    .gurukul-content-main h3 {

        font-size: 25px;
    }


    .gurukul-content-main p {

        font-size: 14px;

        line-height: 1.7;
    }


    .gurukul-carousel
    .gurukul-arrow {

        width: 38px;

        height: 38px;
    }


    .gurukul-carousel
    .gurukul-arrow.prev {

        left: 12px;
    }


    .gurukul-carousel
    .gurukul-arrow.next {

        right: 12px;
    }

}
/* =========================================================
   FINAL HERO SPACING
========================================================= */

.hero {
    position: relative;
    padding: 28px 32px 32px !important;
    margin: 0 !important;
    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero .eyebrow {
    margin: 0;
}

.hero h1 {
    max-width: 820px;
    margin: 14px auto 12px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
}

.hero .gold-rule {
    margin: 0 auto 14px;
}

.hero p.sub {
    max-width: 560px;
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.55;
}

.hero + .section {
    padding-top: 42px;
    padding-bottom: 60px;
}


/* =========================================================
   MOBILE HERO
========================================================= */

@media (max-width: 700px) {

    .hero {
        padding: 18px 20px 28px !important;
    }

    .hero h1 {
        font-size: 28px;
        line-height: 1.18;
        margin: 12px auto;
    }

    .hero p.sub {
        font-size: 13px;
        line-height: 1.55;
    }

    .hero + .section {
        padding-top: 35px;
    }
}

/* =========================================================
   FIXED NAVBAR
========================================================= */

.site-header,
nav[x-data] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* =========================================================
   SCROLL TO TOP
========================================================= */

.scroll-to-top {
    position: fixed;

    right: 28px;
    bottom: 28px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(184, 130, 22, 0.35);
    border-radius: 50%;

    background: #09a59a;
    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    z-index: 9998;

    box-shadow:
        0 10px 30px rgba(40, 30, 25, 0.14);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: #09a59a;
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 35px rgba(153, 46, 84, 0.22);
}

.scroll-to-top i {
    line-height: 1;
}


/* Mobile */

@media (max-width: 700px) {

    .scroll-to-top {
        right: 16px;
        bottom: 18px;

        width: 44px;
        height: 44px;

        font-size: 16px;
    }
}
/* Last content section before footer */
main .section:last-of-type {
    padding-bottom: 40px !important;
}
@media (max-width: 700px) {
    footer {
        padding: 18px 20px 12px !important;
    }
}
/* =========================================================
   COMPACT CONTENT SECTIONS
========================================================= */

/* Chapters of Transformation */
#chapters {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
    min-height: auto !important;
    height: auto !important;
}

/* The Vision */
#vision {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
    min-height: auto !important;
    height: auto !important;
}

/* Antar Yog - A Catalyst for Phenomenal Transformation */
#golden-era {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
    min-height: auto !important;
    height: auto !important;
}
@media (max-width: 700px) {

    #chapters,
    #vision,
    #golden-era {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
        min-height: auto !important;
        height: auto !important;
    }

}