/* =========================================================

   SOUTH GURUKUL — CENTRALIZED HERITAGE COLOR SYSTEM

   Edit colors here to update the entire website.

   ========================================================= */

:root {

    --heritage-overlay: rgba(255, 248, 236, .84);

    --heritage-card: rgba(255, 250, 242, .74);

    --heritage-border: rgba(119, 74, 43, .18);



    /* Primary website colors */

    --color-background-fallback: #f5ecdd;

    --color-text: #28251f;

    --color-surface: #faf8f3;

    --color-highlight: #265595;

    --color-kicker: #a56a3c;

    --color-topbar: #25251f;

    --color-gold: #e3b77f;

    --color-white: #fff;

    --color-shadow-light: #0002;

    --color-primary: #265595;

    --color-primary-alt: #265595;

    --color-footer: #23251f;

    --color-accent: #a66c45;

    --color-white-keyword: white;



    /* Supporting colors */

    --palette-645f57: #645f57;

    --palette-e8e2d8: #e8e2d8;

    --palette-e9e3d8: #e9e3d8;

    --palette-a7784e: #a7784e;

    --palette-925d35: #ebc9af;

    --palette-997553: #997553;

    --palette-a36a42: #a36a42;

    --palette-eae2d5: #eae2d5;

    --palette-f3ece0: #f3ece0;

    --palette-8e532e: #8e532e;

    --palette-f3eee5: #f3eee5;

    --palette-996d4a: #996d4a;

    --palette-673e30: #673e30;

    --palette-f5eee0: #f5eee0;

    --palette-593629: #593629;

    --palette-d2bca3: #d2bca3;

    --palette-9c704b: #9c704b;

    --palette-a98a72: #a98a72;

    --palette-b18b65: #b18b65;

    --palette-2d1a0d44: #2d1a0d44;

    --palette-f9ebd7: #f9ebd7;

    --palette-d1b59b: #d1b59b;

    --palette-ad8462: #ad8462;

    --palette-9a633b: #9a633b;

    --palette-eee9df: #eee9df;

    --palette-c9aa88: #c9aa88;

    --palette-9c6848: #9c6848;

    --palette-2c3029: #2c3029;

    --palette-f5f0e5: #f5f0e5;

    --palette-80644e: #80644e;

    --palette-c9c7bb: #c9c7bb;

    --palette-697064: #697064;

    --palette-cda16c: #cda16c;

    --palette-ded4c7: #ded4c7;

    --palette-f8efe2: #f8efe2;

    --palette-e7ba8e: #e7ba8e;

    --palette-e1c9b6: #e1c9b6;

    --palette-e6e3da: #e6e3da;

    --palette-b4b4a9: #b4b4a9;

    --palette-c9a37e: #c9a37e;

    --palette-dad8cc: #dad8cc;

    --palette-464a40: #464a40;

    --palette-9b9e92: #9b9e92;

    --palette-efe7da: #efe7da;

    --palette-e5d5c2: #e5d5c2;

    --palette-8a7968: #8a7968;

    --palette-d3c2ad: #d3c2ad;

    --palette-a87b56: #a87b56;

    --palette-945f3d: #945f3d;

    --palette-f0e9dd: #f0e9dd;

    --palette-d6c8b8: #d6c8b8;

    --palette-e5d5c8: #e5d5c8;

    --palette-f7efe4: #f7efe4;

    --palette-57372d: #57372d;

    --palette-8a4f35: #8a4f35;

    --palette-e3c29e: #e3c29e;

    --palette-0003: #0003;

    --palette-181812bb: #181812bb;

    --palette-56483c: #56483c;

    --palette-d8cdbd: #d8cdbd;

    --palette-a46c48: #a46c48;

    --palette-888: #888;

    --palette-e2eadc: #e2eadc;

    --palette-2c4c2a: #2c4c2a;

    --palette-fff5e7: #fff5e7;

    --palette-eee4d5: #eee4d5;

    --palette-fff4e7: #fff4e7;

    --palette-f1ddcd: #f1ddcd;

    --palette-faf7ef: #faf7ef;

    --palette-493d32: #493d32;

    --palette-f8f1e7: #f8f1e7;

    --palette-f2dcc0: #f2dcc0;

    --palette-d9ad77: #d9ad77;

    --palette-e9bd85: #e9bd85;

    --palette-29251f: #29251f;

    --palette-a16b42: #a16b42;

    --palette-985d39: #985d39;

    --palette-e5d8c6: #e5d8c6;

    --palette-f0e4d3: #f0e4d3;

    --palette-744128: #744128;

    --palette-57382a: #57382a;

    --palette-faf5eb: #faf5eb;

    --palette-e6d8c6: #e6d8c6;

    --palette-8c5138: #8c5138;



    /* Transparent colors and shadows */

    --alpha-01: rgba(250, 247, 239, .91);

    --alpha-02: rgba(255, 250, 242, .97);

    --alpha-03: rgba(53, 32, 18, .07);

    --alpha-04: rgba(159, 119, 85, .18);

    --alpha-05: rgba(255, 248, 237, .85);

    --alpha-06: rgba(255, 248, 237, .9);

    --alpha-07: rgba(35, 39, 32, .86);

    --alpha-08: rgba(95, 48, 36, .88);

    --alpha-09: rgba(30, 33, 28, .95);

    --alpha-10: rgba(37, 37, 31, .94);

    --alpha-11: rgba(98, 51, 39, .94);

    --alpha-12: rgba(255, 251, 244, .98);

    --alpha-13: rgba(42, 26, 15, .16);

    --alpha-14: rgba(232, 217, 196, .35);

    --alpha-15: rgba(255, 248, 236, 0.55);

    --alpha-16: rgba(255, 255, 255, 0.7);

    --alpha-17: rgba(68, 37, 26, 0.68);

    --alpha-18: rgba(255, 255, 255, 0.45);

    --color-white-keyword: white;

}



/* GURUKUL HERITAGE BACKGROUND — global settings */











html {



    min-height: 100%;



    scroll-behavior: smooth;



}







body {



    min-height: 100vh;



    background: linear-gradient(var(--heritage-overlay), var(--heritage-overlay)),



        url('../images/gurukul-bg.png') center center / cover no-repeat fixed var(--color-background-fallback);



}







* {



    box-sizing: border-box
}







html {



    scroll-behavior: smooth
}







body {



    margin: 0;



    color: var(--color-text);



    /* background: var(--color-surface); */



    font: 16px/1.7 'DM Sans', sans-serif
}







a {



    color: inherit;



    text-decoration: none
}







button,



input,



textarea,



select {



    font: inherit
}







button {



    cursor: pointer
}







img {



    max-width: 100%;



    height: auto
}







.container {



    width: min(1240px, calc(100% - 72px));



    margin: auto
}







h1,



h2,



h3,



h4,



p {



    margin-top: 0
}







h1,



h2,



h3,



.footer-name {



    font-family: 'Playfair Display', Georgia, serif;



    font-weight: 500;



    line-height: 1.15
}







h2 {



    font-size: clamp(30px, 4.5vw, 48px);



    letter-spacing: -1.5px
}







h2 em,



h1 em,



h3 em {



    color: var(--color-highlight);



    font-weight: 400
}







p {



    color: var(--palette-645f57)
}







.eyebrow,



.section-kicker {



    font-size: 11px;



    letter-spacing: 2.5px;



    font-weight: 700;



    color: var(--color-kicker);



    text-transform: uppercase
}



/* ==========================================

   GURUKUL PART-BY-PART LOGO LOADER

\========================================== */



:root {

    --loader-bg: #f7f0e5;

    --loader-logo-size: 190px;

    --loader-duration: 4.2s;

}



.gurukul-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: grid;

    place-items: center;

    overflow: hidden;

    background: var(--loader-bg);

    transition: visibility .1s;

}



.gurukul-loader-stage {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 26px;

    transition: opacity .35s ease;

}



.gurukul-logo-assembly {

    position: relative;

    width: var(--loader-logo-size);

    height: var(--loader-logo-size);

}



.gurukul-logo-part {

    position: absolute;

    inset: 0;

    background-image: url('../images/logo.png');

    background-repeat: no-repeat;

    background-size: 100% 100%;

    background-position: center;

    opacity: 0;

}



/* Central dancer */



.part-center {

    clip-path: circle(24% at 50% 50%);

    animation: revealCenter .65s ease-out .2s forwards;

}



/* First decorative ring */



.part-ring-one {

    clip-path: polygon(50% 0%, 100% 0%, 100% 50%,

            50% 50%);

    animation: revealPiece .55s ease-out .8s forwards;

}



/* Second decorative ring */



.part-ring-two {

    clip-path: polygon(50% 0%, 50% 50%, 0% 50%, 0% 0%);

    animation: revealPiece .55s ease-out 1.25s forwards;

}



/* Remaining outer ornament */



.part-ring-three {

    clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);

    animation: revealPiece .65s ease-out 1.7s forwards;

}



@keyframes revealCenter {

    from {

        opacity: 0;

        transform: translateY(15px);

        filter: blur(5px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

        filter: blur(0);

    }

}



@keyframes revealPiece {

    from {

        opacity: 0;

        transform: translateY(12px);

        filter: blur(4px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

        filter: blur(0);

    }

}



/* Academy name */



.gurukul-loader-title {

    color: #45362c;

    font-family: 'Playfair Display', Georgia, serif;

    font-size: 22px;

    letter-spacing: 2px;

    text-align: center;

    opacity: 0;

    transform: translateY(10px);

    animation: revealTitle .7s ease 2.15s forwards;

}



.gurukul-loader-title span {

    display: block;

    margin-top: 8px;

    color: #a66c45;

    font-family: 'DM Sans', sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3px;

}



@keyframes revealTitle {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Opening doors */



.gurukul-loader-door {

    position: absolute;

    top: 0;

    bottom: 0;

    width: 50.1%;

    z-index: 2;

    background: var(--loader-bg);

    transition: transform 1s cubic-bezier(.76, 0, .24, 1);

}



.door-left {

    left: 0;

}



.door-right {

    right: 0;

}



/* Exit animation */



.gurukul-loader.is-opening .gurukul-loader-stage {

    opacity: 0;

}



.gurukul-loader.is-opening .door-left {

    transform: translateX(-102%);

}



.gurukul-loader.is-opening .door-right {

    transform: translateX(102%);

}



.gurukul-loader.is-finished {

    visibility: hidden;

    pointer-events: none;

}



/* Mobile */



@media (max-width: 580px) {

    :root {

        --loader-logo-size: 155px;

    }



    .gurukul-loader-title {

        font-size: 17px;

        letter-spacing: 1px;

    }



    .gurukul-loader-title span {

        font-size: 9px;

        letter-spacing: 2px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .gurukul-logo-part,

    .gurukul-loader-title {

        animation: none;

        opacity: 1;

        transform: none;

        filter: none;

    }



    .gurukul-loader-door,

    .gurukul-loader-stage {

        transition: none;

    }

}



.topline {



    background: var(--color-topbar);



    color: var(--palette-e8e2d8);



    font-size: 10px;



    letter-spacing: 2px
}







.top-inner {



    height: 36px;



    display: flex;



    align-items: center;



    justify-content: space-between
}







.top-inner a {



    color: var(--color-gold)
}







.site-header {



    background: var(--color-surface);



    position: sticky;



    top: 0;



    z-index: 50;



    border-bottom: 1px solid var(--palette-e9e3d8)
}







.head-inner {



    height: 75px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 24px
}







.brand {



    display: flex;



    align-items: center;



    gap: 12px;



    min-width: 245px
}







.brand-mark {



    border: 1px solid var(--palette-a7784e);



    color: var(--palette-925d35);



    font: 29px Georgia, serif;



    width: 58px;



    height: 58px;



    display: grid;



    place-items: center
}







.brand strong {



    display: block;



    font: 18px Georgia, serif;



    letter-spacing: 1.4px
}







.brand small {



    display: block;



    font-size: 9px;



    letter-spacing: 2px;



    color: var(--palette-997553)
}







.nav {



    display: flex;



    align-items: center;



    gap: 22px;



    font-size: 12px;



    font-weight: 700;



    letter-spacing: .3px
}







.nav-group {



    position: relative
}







.nav-group summary {



    list-style: none;



    cursor: pointer;



    padding: 20px 0
}







.nav-group summary:after {



    content: '⌄';



    margin-left: 7px;



    color: var(--palette-a36a42)
}







.nav-group summary::-webkit-details-marker {



    display: none
}







.nav-dropdown {



    position: absolute;



    top: 100%;



    left: -25px;



    width: 250px;



    background: var(--color-white);



    box-shadow: 0 15px 50px var(--color-shadow-light);



    border: 1px solid var(--palette-eae2d5);



    padding: 12px;



    display: grid;



    max-height: 65vh;



    overflow: auto
}







.nav-group:not([open]) .nav-dropdown {



    display: none
}







.nav-dropdown a {



    padding: 8px 11px;



    font-size: 12px;



    font-weight: 500
}







.nav-dropdown a:hover {



    background: var(--palette-f3ece0);



    color: var(--palette-8e532e)
}







.nav-contact {



    padding: 11px 18px;



    background: var(--color-primary);



    color: var(--color-white-keyword)
}







.nav-contact span {



    margin-left: 10px
}







.menu-toggle {



    display: none;



    border: 0;



    background: transparent
}







.hero {



    background: var(--palette-f3eee5);



    overflow: hidden
}







.hero-grid {



    min-height: 500px;



    display: grid;



    grid-template-columns: 1fr 48%;



    align-items: center;



    gap: 7%
}







.hero-copy {



    padding: 25px 0
}







.hero-overline {



    font-size: 11px;



    letter-spacing: 2.1px;



    font-weight: 700;



    color: var(--palette-996d4a);



    display: flex;



    gap: 12px;



    align-items: center
}







.hero-overline .line {



    height: 1px;



    width: 32px;



    background: var(--palette-996d4a)
}







.hero h1 {



    font-size: clamp(30px, 6.4vw, 56px);



    line-height: 1.06;



    letter-spacing: -3px;



    margin: 29px 0
}







.hero-copy>p {



    max-width: 460px;



    font-size: 16px
}







.hero-actions {



    display: flex;



    align-items: center;



    gap: 30px;



    margin: 33px 0 62px
}







.btn {



    display: inline-flex;



    align-items: center;



    justify-content: space-between;



    gap: 30px;



    padding: 15px 23px;



    font-size: 12px;



    font-weight: 700;



    border: 1px solid transparent;



    transition: .2s
}







.btn:hover {



    transform: translateY(-2px)
}







.btn-dark {



    background: var(--palette-673e30);



    color: var(--color-white-keyword)
}







.btn-cream {



    background: var(--palette-f5eee0);



    color: var(--palette-593629)
}







.btn-outline {



    border-color: var(--palette-d2bca3);



    color: var(--palette-f5eee0)
}







.text-link {



    border-bottom: 1px solid var(--palette-9c704b);



    padding-bottom: 7px;



    font-size: 12px;



    font-weight: 700
}







.text-link span {



    margin-left: 12px
}







.hero-bottom {



    display: flex;



    justify-content: space-between;



    font-size: 10px;



    letter-spacing: 2px;



    color: var(--palette-a98a72)
}







.hero-art {



    height: 500px;



    position: relative;



    /* padding: 40px 0 40px 20px */



}







.hero-art-frame {



    height: 100%;



    background: var(--palette-b18b65);



    overflow: hidden;



    position: relative
}







.hero-art-frame:after,



.pathway-image:after,



.guru-photo:after,



.story-img-large:after {



    content: '';



    position: absolute;



    inset: 0;



    background: linear-gradient(150deg, transparent 40%, var(--palette-2d1a0d44))
}











.story-images img,



.pathway-image img,



.guru-photo img {



    width: 100%;



    height: 100%;



    object-fit: cover
}







.hero-stamp {



    position: absolute;



    bottom: 75px;



    left: -55px;



    width: 150px;



    height: 150px;



    border-radius: 50%;



    background: var(--color-highlight);



    color: var(--color-white-keyword);



    display: flex;



    align-items: center;



    justify-content: center;



    flex-direction: column;



    text-align: center;



    border: 8px solid var(--palette-f3eee5)
}







.hero-stamp span {



    font-size: 22px
}







.hero-stamp strong {



    font: 32px Georgia, serif
}







.hero-stamp small {



    font-size: 8px;



    letter-spacing: 1.2px;



    line-height: 1.5
}







.vertical-caption {



    position: absolute;



    right: -27px;



    top: 50%;



    transform: rotate(90deg) translateX(50%);



    transform-origin: right;



    font-size: 9px;



    letter-spacing: 2px
}







.marquee-band {



    background: var(--color-primary-alt);



    color: var(--palette-f9ebd7)
}







.marquee-band .container {



    display: flex;



    justify-content: space-between;



    padding: 18px 0;



    font-size: 11px;



    letter-spacing: 2px
}







.story-section,



.pathways,



.visit-section {



    padding: 120px 0
}







.story-grid {



    display: grid;



    grid-template-columns: 50% 1fr;



    gap: 10%;



    align-items: center
}







.story-images {



    height: 540px;



    position: relative
}







.story-img-large {



    position: absolute;



    top: 0;



    left: 0;



    width: 77%;



    height: 86%;



    background: var(--palette-d1b59b);



    overflow: hidden
}







.story-img-small {



    position: absolute;



    bottom: 0;



    right: 0;



    width: 44%;



    height: 49%;



    border: 10px solid var(--color-surface);



    background: var(--palette-ad8462);



    overflow: hidden
}







.story-number {



    position: absolute;



    bottom: 10px;



    left: 0;



    font: 62px Georgia, serif;



    color: var(--palette-9a633b);



    display: flex;



    align-items: center;



    gap: 15px
}







.story-number span {



    font: 9px/1.7 'DM Sans', sans-serif;



    letter-spacing: 2px
}







.story-copy p {



    max-width: 500px
}







.story-copy .text-link {



    display: inline-block;



    margin-top: 20px
}







.pathways {



    background: var(--palette-eee9df)
}







.section-heading {



    display: flex;



    justify-content: space-between;



    align-items: end;



    gap: 40px;



    margin-bottom: 42px
}







.section-heading h2 {



    margin: 12px 0 0
}







.section-heading p {



    max-width: 320px
}







.pathway-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 25px
}







.pathway {



    background: var(--color-surface);



    padding-bottom: 25px;



    position: relative
}







.pathway-image {



    height: 340px;



    background: var(--palette-c9aa88);



    position: relative;



    overflow: hidden
}







.pathway-image img {



    transition: transform .5s
}







.pathway:hover img {



    transform: scale(1.06)
}







.pathway>span,



.pathway h3,



.pathway p {



    margin-left: 24px;



    margin-right: 24px
}







.pathway>span {



    display: block;



    color: var(--palette-9c6848);



    font-size: 10px;



    letter-spacing: 2px;



    margin-top: 22px
}







.pathway h3 {



    font-size: 29px;



    margin-top: 8px;



    margin-bottom: 8px
}







.pathway p {



    font-size: 13px;



    margin-bottom: 0
}







.pathway b {



    position: absolute;



    right: 25px;



    bottom: 26px
}







.guru-feature {



    background: var(--palette-2c3029);



    color: var(--palette-f5f0e5)
}







.guru-grid {



    display: grid;



    grid-template-columns: 47% 1fr;



    gap: 10%;



    align-items: center
}







.guru-photo {



    /* height: 620px; */



    position: relative;



    background: var(--palette-80644e)
}







.guru-copy {



    padding: 70px 0
}







.guru-copy h2 {



    margin: 25px 0
}







.guru-copy p {



    color: var(--palette-c9c7bb)
}







.award-line {



    border-top: 1px solid var(--palette-697064);



    border-bottom: 1px solid var(--palette-697064);



    display: flex;



    align-items: center;



    gap: 15px;



    margin: 30px 0
}







.award-line span {



    font-size: 30px;



    color: var(--palette-cda16c)
}







.award-line p {



    margin: 18px 0
}







.visit-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 12%
}







.visit-grid h2 {



    margin: 20px 0
}







.visit-grid .btn {



    margin-top: 20px
}







.visit-address>div {



    border-bottom: 1px solid var(--palette-ded4c7);



    padding: 20px 0
}







.visit-address span {



    font-size: 10px;



    letter-spacing: 2px;



    color: var(--palette-9a633b)
}







.visit-address h3 {



    font-size: 28px;



    margin: 9px 0
}







.closing-cta {



    background: var(--color-primary-alt);



    color: var(--palette-f8efe2);



    padding: 80px 0
}







.closing-inner {



    display: flex;



    justify-content: space-between;



    align-items: center;



    gap: 30px
}







.closing-cta h2 {



    margin: 15px 0
}







.closing-cta h2 em {



    color: var(--palette-e7ba8e)
}







.closing-cta p {



    color: var(--palette-e1c9b6)
}







.footer {



    background: var(--color-footer);



    color: var(--palette-e6e3da);



    padding: 70px 0 25px
}







.foot-grid {



    display: grid;



    grid-template-columns: 2fr 1fr 1fr 1fr;



    gap: 60px
}







.footer-name {



    font-size: 32px;



    letter-spacing: 1px
}







.footer p {



    font-size: 13px;



    color: var(--palette-b4b4a9)
}







.footer h4 {



    font: 700 11px 'DM Sans', sans-serif;



    letter-spacing: 2px;



    color: var(--palette-c9a37e);



    text-transform: uppercase
}







.footer a {



    display: block;



    font-size: 13px;



    margin: 10px 0;



    color: var(--palette-dad8cc)
}







.foot-bottom {



    display: flex;



    justify-content: space-between;



    border-top: 1px solid var(--palette-464a40);



    margin-top: 55px;



    padding-top: 22px;



    color: var(--palette-9b9e92);



    font-size: 11px
}







.page-banner {



    padding: 75px 0 60px;



    background: var(--palette-efe7da);



    position: relative;



    overflow: hidden
}





/* 

.page-banner:after {



    content: '✦';



    position: absolute;



    right: 7%;



    top: -80px;



    font: 330px Georgia, serif;



    color: var(--color-highlight);



    opacity: .7;



    pointer-events: none

}

 */







.page-banner .container {



    position: relative;



    z-index: 1
}







.breadcrumb {



    font-size: 11px;



    color: var(--palette-8a7968);



    margin-bottom: 32px
}







.breadcrumb span {



    margin: 0 9px
}







.page-banner h1 {



    font-size: clamp(30px, 5.5vw, 60px);



    margin: 14px 0 20px
}







.banner-rule {



    height: 1px;



    background: var(--palette-d3c2ad);



    position: relative;



    width: 65%
}







.banner-rule span {



    position: absolute;



    right: 0;



    top: -16px;



    color: var(--palette-a87b56)
}







.page-main {



    padding: 30px 0 50px
}







.inner-layout {



    display: grid;



    grid-template-columns: minmax(0, 1fr) 280px;



    gap: 70px
}







.legacy-content {



    min-width: 0;



    overflow-wrap: anywhere
}







.legacy-content h1,



.legacy-content h2 {



    font-size: clamp(29px, 3vw, 43px);



    margin: 30px 0 20px
}







.legacy-content h3 {



    font-size: 25px
}







.legacy-content p,



.legacy-content li {



    font-size: 15px;



    line-height: 1.9
}







.legacy-content img {



    display: inline-block;



    max-width: 100%;



    height: auto !important;



    object-fit: contain;



    border-radius: 2px
}







.legacy-content img[src*="logo"] {



    max-width: 170px
}







.legacy-content .row,



.legacy-content .gallery,



.legacy-content .image-sec,



.legacy-content .img-sec {



    display: flex;



    flex-wrap: wrap;



    gap: 16px
}







.legacy-content .row>* {



    min-width: 0;



    flex: 1 1 240px
}







.legacy-content table {



    max-width: 100%;



    display: block;



    overflow: auto
}







.legacy-content a:not(.btn) {



    color: var(--palette-945f3d)
}







.legacy-content ul {



    padding-left: 22px
}







.legacy-content iframe {



    max-width: 100%
}







.legacy-content .owl-carousel {



    display: flex;



    flex-wrap: wrap;



    gap: 12px
}







.legacy-content .owl-carousel img {



    max-width: 250px
}







.side-sticky {



    position: sticky;



    top: 130px;



    background: var(--palette-f0e9dd);



    padding: 28px
}







.side-sticky h3 {



    font-size: 30px;



    margin: 15px 0
}







.side-sticky p {



    font-size: 13px
}







.side-sticky>a {



    display: block;



    border-bottom: 1px solid var(--palette-d6c8b8);



    padding: 13px 0;



    font-size: 12px;



    font-weight: 700
}







.side-enquiry {



    background: var(--color-primary-alt);



    color: var(--color-white-keyword);



    margin: 30px -12px -12px;



    padding: 20px
}







.side-enquiry h4 {



    font: 24px Georgia, serif;



    margin-bottom: 5px
}







.side-enquiry p {



    color: var(--palette-e5d5c8)
}







.side-enquiry .btn {



    background: var(--palette-f7efe4);



    color: var(--palette-57372d);



    padding: 12px;



    font-size: 11px;



    width: 100%
}







.floating-enquiry {



    position: fixed;



    bottom: 25px;



    right: 25px;



    z-index: 60;



    background: var(--palette-8a4f35);



    color: var(--color-white-keyword);



    border: 1px solid var(--palette-e3c29e);



    box-shadow: 0 8px 30px var(--palette-0003);



    padding: 15px 22px;



    font-weight: 700;



    font-size: 12px
}







.floating-enquiry span {



    margin-left: 15px
}







.modal {



    position: fixed;



    inset: 0;



    z-index: 100;



    display: none
}







.modal.is-open {



    display: block
}







.modal-shade {



    position: absolute;



    inset: 0;



    background: var(--palette-181812bb)
}







.modal-panel {



    position: absolute;



    right: 0;



    top: 0;



    bottom: 0;



    width: min(510px, 100%);



    background: var(--color-surface);



    padding: 45px;



    overflow: auto
}







.modal-panel h2 {



    font-size: 40px;



    margin: 15px 0
}







.modal-panel>p {



    font-size: 13px
}







.modal-close {



    position: absolute;



    right: 20px;



    top: 15px;



    border: 0;



    background: none;



    font-size: 35px
}







.enquiry-form {



    display: grid;



    gap: 15px;



    margin-top: 26px
}







.enquiry-form label {



    display: block;



    font-size: 12px;



    font-weight: 700;



    color: var(--palette-56483c)
}







.enquiry-form input,



.enquiry-form select,



.enquiry-form textarea {



    display: block;



    width: 100%;



    padding: 12px;



    border: 1px solid var(--palette-d8cdbd);



    background: var(--color-white-keyword);



    margin-top: 6px;



    outline-color: var(--palette-a46c48);



    font-weight: 400
}







.form-two {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 12px
}







.enquiry-form small {



    font-size: 10px;



    color: var(--palette-888)
}







.hp {



    position: absolute;



    left: -99999px
}







.form-notice {



    padding: 15px;



    background: var(--palette-e2eadc);



    color: var(--palette-2c4c2a)
}







@media(max-width:1100px) {



    .nav {



        gap: 10px
    }







    .brand {



        min-width: 215px
    }







    .head-inner {



        height: 82px
    }







    .hero-grid {



        gap: 5%
    }



}







@media(max-width:900px) {



    .container {



        width: min(100% - 38px, 700px)
    }







    .menu-toggle {



        display: block
    }







    .nav {



        display: none;



        position: absolute;



        left: 0;



        right: 0;



        top: 100%;



        background: var(--color-surface);



        box-shadow: 0 18px 30px var(--color-shadow-light);



        padding: 20px;



        max-height: 75vh;



        overflow: auto;



        align-items: stretch;



        flex-direction: column;



        gap: 0
    }







    .nav.is-open {



        display: flex
    }







    .nav-group summary {



        padding: 12px 0
    }







    .nav-dropdown {



        position: static;



        width: 100%;



        box-shadow: none
    }







    .nav-contact {



        margin-top: 10px
    }







    .hero-grid,



    .story-grid,



    .guru-grid,



    .visit-grid {



        grid-template-columns: 1fr
    }







    .hero-grid {



        gap: 0
    }







    .hero-copy {



        padding: 35px 0 35px;



    }







    .hero-art {



        height: 500px;



        padding: 0 0 30px 25px
    }







    .hero-stamp {



        left: -15px
    }







    .story-section,



    .pathways,



    .visit-section {



        padding: 70px 0
    }







    .story-grid,



    .guru-grid {



        gap: 40px
    }







    .story-images {



        height: 460px
    }







    .pathway-grid {



        grid-template-columns: 1fr 1fr
    }







    .guru-photo {



        height: 480px
    }







    .guru-copy {



        padding: 10px 0 60px
    }







    .inner-layout {



        grid-template-columns: 1fr;



        gap: 30px
    }







    .side-sticky {



        position: static
    }







    .foot-grid {



        grid-template-columns: 1fr 1fr;



        gap: 30px
    }







    .section-heading {



        align-items: start;



        flex-direction: column
    }







    .closing-inner {



        align-items: start;



        flex-direction: column
    }



}







@media(max-width:580px) {



    .top-inner {



        font-size: 8px;



        letter-spacing: .5px
    }







    .top-inner a {



        white-space: nowrap
    }







    .brand {



        min-width: 0
    }







    .brand strong {



        font-size: 14px
    }







    .brand small {



        font-size: 7px
    }







    .brand-mark {



        width: 45px;



        height: 45px;



        font-size: 23px
    }







    .hero h1 {



        font-size: 58px;



        letter-spacing: -2px
    }







    .hero-actions {



        flex-wrap: wrap;



        gap: 20px;



        margin-bottom: 35px
    }







    .hero-art {



        height: 430px
    }







    .hero-stamp {



        width: 115px;



        height: 115px;



        bottom: 45px
    }







    .hero-stamp strong {



        font-size: 25px
    }







    .vertical-caption {



        display: none
    }







    .marquee-band .container {



        gap: 12px;



        flex-wrap: wrap;



        font-size: 9px
    }







    .story-images {



        height: 380px
    }







    .pathway-grid {



        grid-template-columns: 1fr
    }







    .pathway-image {



        height: 320px
    }







    .foot-grid {



        grid-template-columns: 1fr 1fr
    }







    .foot-grid>div:first-child {



        grid-column: span 2
    }







    .foot-bottom {



        flex-direction: column;



        gap: 5px
    }







    .page-banner {



        padding: 55px 0
    }







    .page-main {



        padding: 45px 0
    }







    .modal-panel {



        padding: 45px 22px
    }







    .form-two {



        grid-template-columns: 1fr
    }







    .floating-enquiry {



        bottom: 12px;



        right: 12px
    }



}







/* ==============================================



   HERITAGE TRANSPARENCY OVERRIDES



   Keep these rules AFTER the original CSS.



   Lower the image opacity by increasing .84 above.



\============================================== */



body {



    background: linear-gradient(var(--heritage-overlay), var(--heritage-overlay)),



        url('../images/gurukul-bg.png') center center / cover no-repeat fixed var(--color-background-fallback);



}







main,



.site-main,



.page-wrapper,



.content-wrapper,



.hero,



.story-section,



.pathways,



.visit-section,



.page-banner,



.page-main,



.legacy-content,



.content-section,



.page-content,



.inner-content {



    background: transparent;



}







.site-header {



    background: var(--alpha-01);



    -webkit-backdrop-filter: blur(14px);



    backdrop-filter: blur(14px);



}







.nav-dropdown,



.nav.is-open {



    background: var(--alpha-02);



}







.pathway,



.side-sticky,



.content-section,



.page-content,



.inner-content {



    background: var(--heritage-card);



    border: 1px solid var(--heritage-border);



    box-shadow: 0 14px 40px var(--alpha-03);



    -webkit-backdrop-filter: blur(6px);



    backdrop-filter: blur(6px);



}







.hero-art-frame,



.story-img-large,



.story-img-small,



.pathway-image,



.guru-photo {



    background-color: var(--alpha-04);



}







.story-img-small {



    border-color: var(--alpha-05);



}







.hero-stamp {



    border-color: var(--alpha-06);



}







.guru-feature {



    background: var(--alpha-07);



}







.guru-feature h2,



.guru-feature h3 {



    color: var(--palette-fff5e7);



}







.guru-feature p,



.guru-copy p {



    color: var(--palette-eee4d5);



}







.marquee-band {



    background: var(--alpha-08);



}







.closing-cta h2,



.closing-cta h3 {



    color: var(--palette-fff4e7);



}







.closing-cta p {



    color: var(--palette-f1ddcd);



}


/* Closing CTA buttons */

.closing-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
}

.closing-cta-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Secondary outline button */

.closing-cta-buttons .btn-outline-cream {
    background: transparent;
    color: #fff8eb;
    border: 1px solid rgba(255, 248, 235, 0.75);
}

.closing-cta-buttons .btn-outline-cream:hover {
    background: #fff8eb;
    color: #493024;
    border-color: #fff8eb;
}

/* Mobile responsive */

@media (max-width: 767px) {
    .closing-cta-buttons {
        width: 100%;
        justify-content: flex-start;
        gap: 12px;
    }

    .closing-cta-buttons .btn {
        flex: 1 1 190px;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .closing-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .closing-cta-buttons .btn {
        flex: none;
        width: 100%;
    }
}






.footer {



    background: var(--alpha-09);



}







.footer h2,



.footer h3 {



    color: var(--palette-fff4e7);



}







.topline {



    background: var(--alpha-10);



}







.modal-panel {



    background: var(--palette-faf7ef);



}







.side-enquiry {



    background: var(--alpha-11);



}







.page-banner:after {



    opacity: .28;



}







.legacy-content p,



.legacy-content li,



.story-copy p,



.visit-grid p,



.section-heading p {



    color: var(--palette-493d32);



}







@media (max-width: 900px) {



    body {



        background: linear-gradient(var(--heritage-overlay), var(--heritage-overlay)),



            url('../images/gurukul-bg.png') 58% center / cover no-repeat scroll var(--color-background-fallback);



    }



}







@media (prefers-reduced-transparency: reduce) {







    .pathway,



    .side-sticky,



    .content-section,



    .page-content,



    .inner-content {



        background: var(--palette-f8f1e7);



    }



}







/* Premium accessible navigation - overrides legacy dropdown styles */



.top-contact {



    display: flex;



    align-items: center;



    gap: 28px
}







.top-phone,



.top-admission {



    display: inline-flex;



    align-items: center;



    gap: 7px;



    color: var(--palette-f2dcc0) !important;



    font-size: 11px;



    font-weight: 600;



    letter-spacing: .6px
}







.top-phone svg {



    color: var(--palette-d9ad77)
}







.top-admission {



    color: var(--palette-e9bd85) !important
}







.brand-logo {



    min-width: 0;



    flex-shrink: 0;



    display: inline-flex;



    align-items: center
}







.brand-logo img {



    display: block;



    width: auto;



    max-width: 210px;



    height: 60px;



    object-fit: contain
}







.nav {



    gap: 10px;



    align-items: center
}







.nav-group {



    position: relative;



    flex-shrink: 0
}







.nav-trigger {



    display: inline-flex;



    align-items: center;



    gap: 7px;



    padding: 15px 11px;



    background: transparent;



    border: 0;



    color: var(--palette-29251f);



    font-size: 12px;



    font-weight: 700;



    white-space: nowrap;



    cursor: pointer
}







.nav-trigger svg {



    color: var(--palette-a16b42);



    transition: transform .2s ease
}







.nav-group.is-open .nav-trigger svg {



    transform: rotate(180deg)
}







.nav-trigger:hover,



.nav-trigger:focus-visible,



.nav-group.is-open .nav-trigger {



    color: var(--palette-985d39)
}







.nav-group .nav-dropdown {



    display: none;



    position: absolute;



    left: 0;



    top: calc(100% + 12px);



    width: 235px;



    max-height: min(68vh, 560px);



    overflow-y: auto;



    overflow-x: hidden;



    padding: 12px;



    background: var(--alpha-12);



    border: 1px solid var(--palette-e5d8c6);



    box-shadow: 0 22px 50px var(--alpha-13);



    border-radius: 7px;



    z-index: 90;



    grid-template-columns: 1fr;



    gap: 2px
}







.nav-group.is-open>.nav-dropdown {



    display: grid
}







.nav-group .nav-dropdown-wide {



    width: 410px;



    grid-template-columns: repeat(2, minmax(0, 1fr));



    gap: 3px 8px
}







.nav-group .nav-dropdown a {



    display: block;



    white-space: normal;



    line-height: 1.4;



    padding: 11px 12px;



    border-radius: 4px;



    font-size: 12px
}







.nav-group .nav-dropdown a:hover,



.nav-group .nav-dropdown a:focus-visible {



    background: var(--palette-f0e4d3);



    color: var(--palette-744128)
}







.nav-group:nth-last-of-type(-n+2)>.nav-dropdown {



    left: auto;



    right: 0
}







.menu-toggle {



    align-items: center;



    gap: 10px;



    color: var(--palette-57382a);



    font-weight: 700
}







.menu-bars {



    display: inline-flex;



    width: 24px;



    flex-direction: column;



    gap: 5px
}







.menu-bars span {



    height: 2px;



    width: 100%;



    background: currentColor;



    transition: transform .2s, opacity .2s
}







.menu-toggle[aria-expanded="true"] .menu-bars span:first-child {



    transform: translateY(7px) rotate(45deg)
}







.menu-toggle[aria-expanded="true"] .menu-bars span:nth-child(2) {



    opacity: 0
}







.menu-toggle[aria-expanded="true"] .menu-bars span:last-child {



    transform: translateY(-7px) rotate(-45deg)
}







@media(max-width:1100px) {



    .nav {



        gap: 3px
    }







    .nav-trigger {



        padding: 12px 6px;



        font-size: 11px
    }







    .brand-logo img {



        max-width: 175px;



        height: 60px
    }



}







@media(max-width:900px) {



    .menu-toggle {



        display: inline-flex
    }







    .nav {



        display: none;



        align-items: stretch;



        gap: 0;



        position: absolute;



        top: 100%;



        left: 0;



        right: 0;



        max-height: calc(100vh - 110px);



        overflow: auto;



        background: var(--palette-faf5eb);



        box-shadow: 0 20px 30px var(--color-shadow-light);



        padding: 14px 20px 22px;



        flex-direction: column
    }







    .nav.is-open {



        display: flex
    }







    .nav-home,



    .nav-trigger,



    .nav-contact {



        width: 100%;



        padding: 15px 8px;



        font-size: 14px;



        text-align: left
    }







    .nav-trigger {



        justify-content: space-between
    }







    .nav-group {



        border-top: 1px solid var(--palette-e6d8c6)
    }







    .nav-group .nav-dropdown,



    .nav-group .nav-dropdown-wide {



        position: static;



        left: auto;



        right: auto;



        top: auto;



        width: 100%;



        max-height: none;



        overflow: visible;



        box-shadow: none;



        border: 0;



        background: var(--alpha-14);



        padding: 8px;



        border-radius: 4px;



        grid-template-columns: 1fr
    }







    .nav-group.is-open>.nav-dropdown {



        display: grid
    }







    .nav-group .nav-dropdown a {



        font-size: 13px;



        padding: 12px
    }







    .nav-contact {



        margin-top: 12px;



        display: flex;



        justify-content: space-between
    }



}







@media(max-width:580px) {



    .top-heritage {



        display: none
    }







    .top-inner {



        justify-content: center
    }







    .top-contact {



        gap: 14px
    }







    .top-phone,



    .top-admission {



        font-size: 10px;



        letter-spacing: 0
    }







    .brand-logo img {



        max-width: 160px;



        height: 60px
    }



}





/* ==========================================

   HERO AWARD ANNOUNCEMENT

\========================================== */



.hero-award-announcement {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    max-width: 470px;

    padding: 13px 16px;

    margin: 24px 0 0;

    background: rgba(166, 108, 69, 0.09);

    border: 1px solid rgba(166, 108, 69, 0.25);

    border-left: 3px solid var(--color-accent, #a66c45);

    border-radius: 4px;

    overflow: hidden;

}



/* Blinking award indicator */



.award-blink-dot {

    width: 9px;

    height: 9px;

    flex: 0 0 9px;

    background: var(--color-accent, #a66c45);

    border-radius: 50%;

    animation: awardBlink 1.5s ease-in-out infinite;

}



@keyframes awardBlink {

    0%,
    100% {

        opacity: 1;

        box-shadow: 0 0 0 0 rgba(166, 108, 69, 0.35);

    }



    50% {

        opacity: 0.45;

        box-shadow: 0 0 0 5px rgba(166, 108, 69, 0);

    }

}



/* Scrolling announcement */



.award-marquee {

    flex: 1;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

}



.award-marquee-track {

    display: inline-block;

    padding-left: 100%;

    animation: awardScroll 16s linear infinite;

}



.award-marquee-track span {

    color: var(--color-highlight, #a66c45);

    font-size: 16px;

    font-weight: bold;

    letter-spacing: 0.2px;

}



.award-marquee-track strong {

    color: var(--color-highlight, #a66c45);

    font-weight: bold;

}



@keyframes awardScroll {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-100%);

    }

}



/* Pause scrolling on hover */



.hero-award-announcement:hover .award-marquee-track {

    animation-play-state: paused;

}



/* Adjust hero buttons spacing */



.hero-copy .hero-actions {

    margin-top: 25px;

}



/* Mobile */



@media (max-width: 580px) {

    .hero-award-announcement {

        padding: 11px 12px;

        margin-top: 20px;

    }



    .award-marquee-track span {

        font-size: 11px;

    }

}



/* Accessibility */



@media (prefers-reduced-motion: reduce) {

    .award-blink-dot,

    .award-marquee-track {

        animation: none;

    }



    .award-marquee {

        white-space: normal;

    }



    .award-marquee-track {

        padding-left: 0;

    }

}





/* ==========================================



   GURUKUL PREMIUM HERO IMAGE SLIDER



\========================================== */







.gurukul-hero-slider {



    position: relative;



    width: 100%;



    height: 100%;



    min-height: 480px;



    overflow: hidden;



    /* background: var(--alpha-15); */



    isolation: isolate;



}







/* Slides */







.gurukul-hero-slider .gurukul-slide {



    position: absolute;



    inset: 0;



    opacity: 0;



    visibility: hidden;



    transition: opacity 1s ease, visibility 1s ease;



    display: flex;



    align-items: center;



    justify-content: center;



}







.gurukul-hero-slider .gurukul-slide.active {



    opacity: 1;



    visibility: visible;



    z-index: 1;



}







/* Full image without cropping */







.gurukul-hero-slider .gurukul-slide img {



    display: block;



    width: 100%;



    height: 100%;



    object-fit: contain !important;



    object-position: center center;



}







/* Remove old image overlay for clear visibility */







.gurukul-hero-slider::after {



    display: none !important;



}







/* Slider arrows */







.gurukul-slider-arrow {



    position: absolute;



    top: 50%;



    transform: translateY(-50%);



    z-index: 5;



    width: 42px;



    height: 42px;



    border: 1px solid var(--alpha-16);



    border-radius: 50%;



    background: var(--alpha-17);



    color: var(--color-white);



    font-size: 19px;



    display: flex;



    align-items: center;



    justify-content: center;



    cursor: pointer;



    transition: background 0.3s ease;



}







.gurukul-slider-arrow:hover {



    background: var(--palette-8c5138);



}







.gurukul-slider-arrow.prev {



    left: 15px;



}







.gurukul-slider-arrow.next {



    right: 15px;



}







/* Navigation dots */







.gurukul-slider-dots {



    position: absolute;



    bottom: 20px;



    left: 50%;



    transform: translateX(-50%);



    z-index: 5;



    display: flex;



    align-items: center;



    gap: 9px;



}







.gurukul-slider-dots button {



    width: 9px;



    height: 9px;



    padding: 0;



    border: 1px solid var(--color-white);



    border-radius: 50%;



    background: var(--alpha-18);



    cursor: pointer;



    transition: all 0.3s ease;



}







.gurukul-slider-dots button.active {



    width: 26px;



    border-radius: 10px;



    background: var(--color-accent);



    border-color: var(--color-accent);



}







/* Mobile */







@media (max-width: 900px) {



    .gurukul-hero-slider {



        min-height: 400px;



    }



}







@media (max-width: 580px) {



    .gurukul-hero-slider {



        min-height: 300px;



    }







    .gurukul-slider-arrow {



        width: 34px;



        height: 34px;



        font-size: 15px;



    }







    .gurukul-slider-arrow.prev {



        left: 8px;



    }







    .gurukul-slider-arrow.next {



        right: 8px;



    }







    .gurukul-slider-dots {



        bottom: 12px;



    }



}







@media (prefers-reduced-motion: reduce) {



    .gurukul-hero-slider .gurukul-slide {



        transition: none;



    }



}





/* ========================================

   SOUTH GURUKUL - PREMIUM FOOTER

\======================================== */



.footer .foot-grid {

    display: grid;

    grid-template-columns: 1.4fr 0.75fr 1fr 1.5fr;

    gap: 45px;

    align-items: start;

}



.footer-contact {

    min-width: 0;

}



.footer-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 25px;

}



.footer-contact-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 38px;

    width: 38px;

    height: 38px;

    color: var(--color-gold, #e3b77f);

    background: rgba(255, 255, 255, 0.07);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

}



.footer-contact-info {

    flex: 1;

    min-width: 0;

}



.footer-contact-info h5 {

    margin: 0 0 7px;

    color: var(--color-gold, #e3b77f);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}



.footer-contact-info a {

    display: block;

    margin: 0;

    color: #e6e3da;

    font-size: 13px;

    line-height: 1.9;

    overflow-wrap: anywhere;

    transition: color 0.25s ease;

}



.footer-contact-info a:hover {

    color: var(--color-gold, #e3b77f);

}



.footer-phone-list {

    display: grid;

    grid-template-columns: 1fr;

    gap: 3px;

}



.footer-credit {

    display: inline-flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 5px;

}



.footer .footer-credit a {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin: 0;

    color: var(--color-gold, #e3b77f);

    font-size: inherit;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.25s ease;

}



.footer .footer-credit a:hover {

    color: #ffffff;

}



.footer-credit a span {

    transition: transform 0.25s ease;

}



.footer-credit a:hover span {

    transform: translate(2px, -2px);

}



/* Tablet */



@media (max-width: 1100px) {

    .footer .foot-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 35px;

    }

}



/* Mobile */



@media (max-width: 580px) {

    .footer .foot-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .footer .foot-grid>div:first-child {

        grid-column: auto;

    }



    .footer .foot-bottom {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        text-align: left;

    }



    .footer-contact-item {

        gap: 12px;

    }

}

/* Footer Logo */



.footer .footer-logo {

    display: inline-block;

    margin: 0 0 20px;

}



.footer-logo img {

    display: block;

    /* width: 200px; */

    max-width: 100%;

    height: auto;

    filter: brightness(0) invert(1);

    transition: opacity 0.3s ease;

}



.footer-logo:hover img {

    opacity: 0.8;

}



/* Footer Description */



.footer-about p {

    max-width: 310px;

    margin-bottom: 24px;

    line-height: 1.8;

}



/* Social Icons */



.footer-social {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}



.footer .footer-social a {

    width: 42px;

    height: 42px;

    margin: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(227, 183, 127, 0.55);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    color: #ffffff;

    transition: all 0.3s ease;

}



.footer-social svg {

    width: 18px;

    height: 18px;

    display: block;

    fill: currentColor;

}



.footer .footer-social a:hover {

    background: var(--color-gold, #e3b77f);

    border-color: var(--color-gold, #e3b77f);

    color: #28251f;

    transform: translateY(-3px);

}



@media (max-width: 580px) {

    .footer-logo img {

        width: 170px;

    }



    .footer .footer-social a {

        width: 40px;

        height: 40px;

    }

}



/* ==========================================

   DYNAMIC PAGE BANNER IMAGE

\========================================== */



.page-banner {

    position: relative;

    overflow: hidden;

    isolation: isolate;

}



/* Dynamic decorative image */



.page-banner::after {

    content: "";

    position: absolute;

    right: 4%;

    top: 50%;

    transform: translateY(-50%);

    width: clamp(180px, 25vw, 380px);

    height: 80%;

    background-image: var(--page-banner-image, none);

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    opacity: 1;

    pointer-events: none;

    z-index: -1;

}



/* Keep text above the image */



.page-banner .container {

    position: relative;

    z-index: 1;

}



/* Tablet */



@media (max-width: 900px) {

    .page-banner::after {

        right: -3%;

        width: 260px;

        opacity: 0.15;

    }

}



/* Mobile */



@media (max-width: 580px) {

    .page-banner::after {

        right: -60px;

        width: 210px;

        opacity: 0.12;

    }

}

/* =========================================================
   SOUTH GURUKUL — READABLE RESPONSIVE TYPOGRAPHY
   Edit the sizes here to update all pages.
   ========================================================= */
:root {
    --font-body: 18px;
    --font-body-mobile: 16px;
    --font-nav: 15px;
    --font-small: 13px;
    --font-button: 15px;
    --font-content: 18px;
    --font-heading-section: clamp(30px, 4.3vw, 48px);
}

body {
    font-size: var(--font-body);
    line-height: 1.75;
}

p,
li {
    line-height: 1.75;
}

h2 {
    font-size: var(--font-heading-section);
}

.eyebrow,
.section-kicker,
.hero-overline {
    font-size: var(--font-small);
    line-height: 1.5;
    letter-spacing: 1.6px;
}

.topline,
.top-phone,
.top-admission {
    font-size: 13px;
}

.top-inner {
    min-height: 42px;
    height: auto;
    padding-block: 7px;
}

.nav,
.nav-trigger,
.nav-home,
.nav-contact {
    font-size: var(--font-nav);
}

.nav-group .nav-dropdown a,
.nav-dropdown a {
    font-size: 14px;
    line-height: 1.5;
}

.brand strong {
    font-size: 20px;
}

.brand small {
    font-size: 11px;
}

.hero-overline {
    font-size: 13px;
}

.hero-copy>p {
    font-size: 18px;
    line-height: 1.85;
}

.hero h1 {
    font-size: clamp(30px, 5.2vw, 60px);
}

.btn,
.text-link,
.floating-enquiry {
    font-size: var(--font-button);
}

.hero-bottom,
.vertical-caption,
.story-number span {
    font-size: 12px;
}

.marquee-band .container {
    font-size: 14px;
}

.story-copy p,
.section-heading p,
.visit-grid p,
.guru-copy p {
    font-size: 18px;
    line-height: 1.8;
}

.pathway>span,
.visit-address span {
    font-size: 13px;
}

.pathway h3 {
    font-size: clamp(27px, 2.4vw, 34px);
}

.pathway p,
.side-sticky p {
    font-size: 16px;
    line-height: 1.8;
}

.visit-address h3 {
    font-size: 30px;
}

.footer-name {
    font-size: 34px;
}

.footer p,
.footer-about p,
.footer a,
.footer-contact-info a {
    font-size: 15px;
    line-height: 1.8;
}

.footer h4,
.footer-contact-info h5 {
    font-size: 14px;
}

.foot-bottom {
    font-size: 13px;
}

.breadcrumb {
    font-size: 14px;
}

.page-banner h1 {
    font-size: clamp(30px, 5vw, 60px);
}

.legacy-content h1,
.legacy-content h2 {
    font-size: clamp(32px, 3.2vw, 46px);
}

.legacy-content h3 {
    font-size: 28px;
}

.legacy-content p,
.legacy-content li {
    font-size: var(--font-content);
    line-height: 1.85;
}

.legacy-content table {
    font-size: 16px;
}

.side-sticky h3 {
    font-size: 32px;
}

.side-sticky>a {
    font-size: 15px;
}

.side-enquiry h4 {
    font-size: 26px;
}

.side-enquiry .btn {
    font-size: 14px;
}

.modal-panel>p {
    font-size: 16px;
}

.enquiry-form label {
    font-size: 15px;
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
    font-size: 16px;
}

.enquiry-form small {
    font-size: 13px;
}

.gurukul-loader-title {
    font-size: 25px;
}

.gurukul-loader-title span {
    font-size: 12px;
}

.award-marquee-track span {
    font-size: 17px;
}

@media (max-width: 900px) {

    .nav-home,
    .nav-trigger,
    .nav-contact {
        font-size: 16px;
    }

    .nav-group .nav-dropdown a {
        font-size: 15px;
    }

    .hero-copy>p,
    .story-copy p,
    .guru-copy p {
        font-size: 17px;
    }
}

@media (max-width: 580px) {
    body {
        font-size: var(--font-body-mobile);
    }

    .topline,
    .top-phone,
    .top-admission {
        font-size: 11px;
        letter-spacing: .2px;
    }

    .top-inner {
        flex-wrap: wrap;
        gap: 5px 12px;
    }

    .brand strong {
        font-size: 17px;
    }

    .brand small {
        font-size: 10px;
    }

    .hero h1 {
        font-size: clamp(42px, 11vw, 58px);
        letter-spacing: -1.8px;
    }

    .hero-copy>p {
        font-size: 16px;
    }

    .eyebrow,
    .section-kicker,
    .hero-overline {
        font-size: 12px;
        letter-spacing: 1.2px;
    }

    .btn,
    .text-link,
    .floating-enquiry {
        font-size: 14px;
    }

    .pathway p,
    .side-sticky p {
        font-size: 16px;
    }

    .legacy-content p,
    .legacy-content li {
        font-size: 16px;
        line-height: 1.8;
    }

    .footer p,
    .footer a,
    .footer-contact-info a {
        font-size: 15px;
    }

    .footer h4,
    .footer-contact-info h5 {
        font-size: 13px;
    }

    .foot-bottom {
        font-size: 12px;
    }

    .gurukul-loader-title {
        font-size: 19px;
    }

    .gurukul-loader-title span {
        font-size: 10px;
    }

    .award-marquee-track span {
        font-size: 14px;
    }
}


/* =========================================
   SOUTH GURUKUL - PREMIUM CONTACT SECTION
========================================= */

.sg-contact-section {
    width: 100%;
    padding: 10px 0 35px;
}

.sg-contact-heading {
    margin-bottom: 38px;
}

.sg-contact-heading h2 {
    margin: 12px 0 15px;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.15;
    color: var(--color-text);
}

.sg-contact-heading h2 em {
    color: var(--color-highlight);
}

.sg-contact-heading p {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--palette-493d32);
}

/* Contact cards */

.sg-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sg-contact-card {
    position: relative;
    min-width: 0;
    padding: 30px;
    /* background: rgba(255, 250, 242, 0.86); */
    border: 1px solid var(--heritage-border);
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(53, 32, 18, 0.05);
    transition: transform .3s ease, box-shadow .3s ease;
}

.sg-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(53, 32, 18, 0.11);
}

.sg-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
    background: rgba(38, 85, 149, 0.08);
    border: 1px solid rgba(38, 85, 149, 0.15);
    border-radius: 50%;
    color: var(--color-highlight);
}

.sg-contact-icon svg {
    width: 25px;
    height: 25px;
}

.sg-contact-label {
    display: block;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.7px;
    color: var(--color-kicker);
}

.sg-contact-card h3 {
    margin: 0 0 14px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(23px, 2vw, 29px);
    color: var(--color-text);
}

.sg-contact-card p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--palette-493d32);
}

.sg-contact-card > a,
.sg-phone-list a {
    color: var(--color-highlight);
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.sg-contact-card > a:hover,
.sg-phone-list a:hover {
    color: var(--color-accent);
}

.sg-phone-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.sg-phone-list a {
    display: block;
}

/* Hours and map */

.sg-contact-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.sg-visit-panel {
    min-width: 0;
    padding: 35px;
    border-radius: 8px;
    background: var(--color-primary-alt);
    color: #ffffff;
}

.sg-visit-panel .eyebrow {
    color: var(--color-gold);
}

.sg-visit-panel h3 {
    margin: 12px 0 26px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    color: #ffffff;
}

.sg-hours-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 15px;
}

.sg-hours-row span {
    color: rgba(255, 255, 255, 0.83);
}

.sg-hours-row strong {
    flex-shrink: 0;
    color: #ffffff;
    text-align: right;
    font-weight: 600;
}

.sg-branch-info {
    margin-top: 35px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.sg-branch-info h4 {
    margin: 12px 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    color: #ffffff;
}

.sg-branch-info p {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.83);
}

.sg-branch-info a {
    display: inline-block;
    margin-top: 12px;
    color: var(--color-gold);
    font-size: 15px;
    font-weight: 600;
}

.sg-map-panel {
    min-height: 450px;
    overflow: hidden;
    border: 1px solid var(--heritage-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.sg-map-panel iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
}

/* Responsive */

@media (max-width: 900px) {
    .sg-contact-grid,
    .sg-contact-details {
        grid-template-columns: 1fr;
    }

    .sg-contact-card {
        padding: 26px;
    }

    .sg-map-panel,
    .sg-map-panel iframe {
        min-height: 350px;
    }
}

@media (max-width: 580px) {
    .sg-contact-heading h2 {
        font-size: 35px;
    }

    .sg-contact-heading p {
        font-size: 16px;
    }

    .sg-contact-grid {
        gap: 15px;
    }

    .sg-contact-card {
        padding: 24px 20px;
    }

    .sg-phone-list {
        grid-template-columns: 1fr;
    }

    .sg-visit-panel {
        padding: 26px 20px;
    }

    .sg-hours-row {
        flex-direction: column;
        gap: 5px;
    }

    .sg-hours-row strong {
        text-align: left;
    }

    .sg-map-panel,
    .sg-map-panel iframe {
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-contact-card {
        transition: none;
    }

    .sg-contact-card:hover {
        transform: none;
    }
}



/* ==========================================
   GURU SUTAPA - EDITORIAL BIOGRAPHY
========================================== */

.sg-guru-story {
    --guru-ink: var(--color-text, #28251f);
    --guru-accent: var(--color-accent, #a66c45);
    --guru-gold: var(--color-gold, #e3b77f);
    --guru-surface: transparent;
    --guru-border: var(--heritage-border, rgba(119, 74, 43, .18));

    width: 100%;
    min-width: 0;
    padding: 15px 0 45px;
}

.sg-guru-eyebrow {
    display: block;
    margin-bottom: 15px;
    color: var(--guru-accent);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sg-guru-story h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 500;
    line-height: 1.18;
    color: var(--guru-ink);
}

.sg-guru-story h2 em {
    color: var(--guru-accent);
    font-weight: 400;
}

/* Introduction */

.sg-guru-intro {
    margin-bottom: 42px;
}

.sg-guru-intro h2 {
    margin: 0 0 22px;
}

.sg-guru-lead {
    max-width: 850px;
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.7;
    color: var(--guru-ink);
}

/* Biography + gallery */

.sg-guru-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 32px;
    align-items: start;
}

.sg-guru-biography {
    position: relative;
    min-width: 0;
    padding: 35px;
    background: var(--guru-surface);
    border: 1px solid var(--guru-border);
}

.sg-guru-quote-mark {
    height: 60px;
    font-family: Georgia, serif;
    font-size: 100px;
    line-height: 1;
    color: var(--guru-accent);
    opacity: .5;
}

.sg-guru-biography blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.sg-guru-biography blockquote p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.95;
    color: #493d32;
}

.sg-guru-signature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid var(--guru-border);
}

.sg-guru-signature img {
    display: block;
    max-width: 190px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sg-guru-signature span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.7px;
    color: var(--guru-accent);
}

/* Gallery */

.sg-guru-gallery {
    position: sticky;
    top: 110px;
    min-width: 0;
}

.sg-guru-gallery-frame {
    position: relative;
    height: clamp(340px, 39vw, 520px);
    overflow: hidden;
    background: #ede2d3;
}

.sg-guru-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
}

.sg-guru-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.sg-guru-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.sg-guru-gallery-caption {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(
        transparent,
        rgba(25, 22, 19, .8)
    );
    color: #fff;
}

.sg-guru-gallery-caption > span:first-child {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sg-guru-counter {
    font-size: 13px;
    letter-spacing: 1px;
}

.sg-guru-counter strong {
    color: var(--guru-gold);
    font-size: 22px;
}

.sg-guru-gallery-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
}

.sg-guru-gallery-controls > span {
    color: var(--guru-accent);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px;
    font-style: italic;
}

.sg-guru-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--guru-border);
    border-radius: 50%;
    background: var(--guru-surface);
    color: var(--guru-ink);
    cursor: pointer;
    transition: background .25s, color .25s;
}

.sg-guru-arrow svg {
    width: 19px;
    height: 19px;
}

.sg-guru-arrow:hover {
    background: var(--guru-accent);
    color: #fff;
}

.sg-guru-thumbnails {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 4px 0 12px;
    scrollbar-width: thin;
}

.sg-guru-thumbnails button {
    flex: 0 0 62px;
    width: 62px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    background: #eee4d7;
    cursor: pointer;
    opacity: .65;
    transition: opacity .2s, border-color .2s;
}

.sg-guru-thumbnails button.is-active {
    border-color: var(--guru-accent);
    opacity: 1;
}

.sg-guru-thumbnails img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Water ballet timeline */

.sg-water-ballet {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 45px;
    margin-top: 80px;
    padding: 45px;
    /* background: rgba(255, 250, 242, .7); */
    border: 1px solid var(--guru-border);
}

.sg-water-intro h2 {
    margin: 0 0 22px;
}

.sg-water-intro p {
    font-size: 16px;
    line-height: 1.9;
    color: #493d32;
}

.sg-water-timeline {
    border-left: 1px solid var(--guru-border);
    padding-left: 32px;
}

.sg-water-item {
    position: relative;
    padding: 0 0 28px;
}

.sg-water-item::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -39px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--guru-accent);
    border: 3px solid #f5ebde;
}

.sg-water-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--guru-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sg-water-item h3 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--guru-ink);
}

/* Closing legacy section */

.sg-art-composition {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 40px;
    align-items: center;
    margin-top: 80px;
}

.sg-art-composition-image {
    min-height: 330px;
    background: rgba(166, 108, 69, .08);
    overflow: hidden;
}

.sg-art-composition-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 430px;
    object-fit: contain;
}

.sg-art-composition-text h2 {
    margin: 0 0 25px;
}

.sg-art-composition-text p {
    font-size: 16px;
    line-height: 1.95;
    color: #493d32;
}

.sg-art-link {
    display: inline-flex;
    gap: 15px;
    align-items: center;
    margin-top: 18px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--guru-accent);
    color: var(--guru-accent);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

/* Tablet and mobile */

@media (max-width: 1100px) {
    .sg-guru-feature {
        grid-template-columns: 1fr;
    }

    .sg-guru-gallery {
        position: relative;
        top: auto;
    }

    .sg-water-ballet {
        grid-template-columns: 1fr;
    }

    .sg-art-composition {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .sg-guru-intro {
        margin-bottom: 28px;
    }

    .sg-guru-biography {
        padding: 25px 20px;
    }

    .sg-guru-biography blockquote p {
        font-size: 16px;
        line-height: 1.85;
    }

    .sg-guru-gallery-frame {
        height: 370px;
    }

    .sg-water-ballet {
        margin-top: 45px;
        padding: 28px 20px;
        gap: 25px;
    }

    .sg-water-timeline {
        padding-left: 25px;
    }

    .sg-water-item::before {
        left: -32px;
    }

    .sg-art-composition {
        margin-top: 45px;
        gap: 25px;
    }

    .sg-art-composition-image {
        min-height: 250px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-guru-slide,
    .sg-guru-arrow,
    .sg-guru-thumbnails button {
        transition: none;
    }
}

.sg-art-slider {
    position: relative;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    background: rgba(166, 108, 69, 0.08);
}

.sg-art-slider .sg-art-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, visibility 1.2s ease;
}

.sg-art-slider .sg-art-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.sg-art-slider .sg-art-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 600px) {
    .sg-art-slider {
        min-height: 320px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-art-slider .sg-art-slide {
        transition: none;
    }
}


/* ==========================================
   SOUTH GURUKUL - NOTICE BOARD PAGE
========================================== */

.sg-notice-page {
    --notice-ink: var(--color-text, #30261f);
    --notice-accent: var(--color-accent, #a66c45);
    --notice-border: var(--heritage-border, rgba(119, 74, 43, .2));
    --notice-surface: rgba(255, 250, 242, .86);

    width: 100%;
    min-width: 0;
    padding: 15px 0 55px;
}

.sg-notice-eyebrow {
    display: block;
    color: var(--notice-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.5;
    text-transform: uppercase;
}

.sg-notice-page h2,
.sg-notice-page h3 {
    color: var(--notice-ink);
    font-family: 'Playfair Display', Georgia, serif;
}

.sg-notice-page h2 {
    font-size: clamp(32px, 3.4vw, 49px);
    font-weight: 500;
    line-height: 1.2;
}

.sg-notice-page h2 em {
    color: var(--notice-accent);
    font-weight: 400;
}

/* Intro */

.sg-notice-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: 35px;
    margin-bottom: 30px;
}

.sg-notice-intro h2 {
    margin: 12px 0 20px;
}

.sg-notice-intro p {
    max-width: 690px;
    margin: 0;
    font-size: 17px;
    line-height: 1.85;
    color: #55463a;
}

.sg-notice-intro-art {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 15px;
    background: rgba(166, 108, 69, .07);
    border: 1px solid var(--notice-border);
}

.sg-notice-intro-art img {
    display: block;
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Announcement */

.sg-notice-announcement {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    padding: 32px;
    margin-bottom: 70px;
    background: var(--color-primary-alt, #563c31);
    border-radius: 5px;
    color: #fff;
}

.sg-notice-announcement-icon {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: var(--color-gold, #e3b77f);
}

.sg-notice-announcement-icon svg {
    width: 28px;
    height: 28px;
}

.sg-notice-announcement-label {
    color: var(--color-gold, #e3b77f);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.sg-notice-announcement h3 {
    margin: 9px 0 12px;
    color: #fff;
    font-size: 29px;
}

.sg-notice-announcement p {
    max-width: 750px;
    color: rgba(255, 255, 255, .86);
    font-size: 16px;
    line-height: 1.85;
}

.sg-notice-announcement-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 20px;
}

.sg-notice-announcement-contact a {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.sg-notice-announcement-contact a:hover {
    color: var(--color-gold, #e3b77f);
}

/* Section heading */

.sg-notice-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
    margin-bottom: 30px;
}

.sg-notice-section-heading h2 {
    margin: 12px 0;
}

.sg-notice-section-heading p {
    max-width: 690px;
    margin: 0;
    color: #55463a;
    font-size: 16px;
    line-height: 1.8;
}

.sg-notice-year {
    flex-shrink: 0;
    padding: 9px 17px;
    border: 1px solid var(--notice-border);
    background: var(--notice-surface);
    color: var(--notice-accent);
    font-size: 14px;
    font-weight: 700;
}

/* Holiday table */

.sg-notice-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--notice-border);
    background: var(--notice-surface);
    -webkit-overflow-scrolling: touch;
}

.sg-notice-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    text-align: left;
}

.sg-notice-table thead {
    background: var(--color-primary-alt, #563c31);
    color: #fff;
}

.sg-notice-table th {
    padding: 19px 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sg-notice-table td {
    padding: 17px 20px;
    border-bottom: 1px solid var(--notice-border);
    color: #493d32;
    font-size: 15px;
    line-height: 1.6;
    vertical-align: middle;
}

.sg-notice-table tbody tr:nth-child(even) {
    background: rgba(166, 108, 69, .035);
}

.sg-notice-table tbody tr:hover {
    background: rgba(166, 108, 69, .09);
}

.sg-notice-table tbody tr:last-child td {
    border-bottom: none;
}

.sg-notice-table td:first-child {
    width: 75px;
    color: var(--notice-accent);
    font-weight: 700;
}

.sg-notice-table td:last-child {
    font-weight: 600;
}

.sg-notice-table-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 18px 0;
    color: #776758;
    font-size: 14px;
    line-height: 1.7;
}

.sg-notice-table-note span {
    color: var(--notice-accent);
}

/* Student rules */

.sg-notice-guidelines {
    margin-top: 70px;
}

.sg-notice-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sg-notice-rule-card {
    display: flex;
    gap: 22px;
    padding: 30px;
    border: 1px solid var(--notice-border);
    background: var(--notice-surface);
    transition: transform .3s ease, box-shadow .3s ease;
}

.sg-notice-rule-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(55, 35, 22, .07);
}

.sg-notice-rule-number {
    flex: 0 0 45px;
    color: var(--notice-accent);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    line-height: 1;
}

.sg-notice-rule-content {
    min-width: 0;
}

.sg-notice-rule-label {
    display: block;
    margin-bottom: 10px;
    color: var(--notice-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.sg-notice-rule-card h3 {
    margin: 0 0 15px;
    font-size: 25px;
    font-weight: 500;
}

.sg-notice-rule-card p {
    margin: 0 0 12px;
    color: #55463a;
    font-size: 16px;
    line-height: 1.85;
}

.sg-notice-rule-card p:last-child {
    margin-bottom: 0;
}

.sg-notice-rule-highlight {
    color: var(--notice-accent) !important;
    font-weight: 600;
}

/* Bottom CTA */

.sg-notice-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 70px;
    padding: 35px 40px;
    border-top: 1px solid var(--notice-border);
    border-bottom: 1px solid var(--notice-border);
    background: rgba(166, 108, 69, .05);
}

.sg-notice-bottom-cta h3 {
    margin: 10px 0;
    font-size: 29px;
}

.sg-notice-bottom-cta p {
    margin: 0;
    color: #55463a;
    font-size: 16px;
    line-height: 1.75;
}

.sg-notice-contact-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 25px;
    background: var(--color-primary-alt, #563c31);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s ease;
}

.sg-notice-contact-btn:hover {
    background: var(--notice-accent);
    color: #fff;
}

/* Responsive */

@media (max-width: 900px) {
    .sg-notice-intro {
        grid-template-columns: 1fr;
    }

    .sg-notice-intro-art {
        min-height: 180px;
    }

    .sg-notice-rules-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .sg-notice-page {
        padding-bottom: 35px;
    }

    .sg-notice-intro {
        gap: 20px;
    }

    .sg-notice-intro p {
        font-size: 16px;
    }

    .sg-notice-announcement {
        flex-direction: column;
        padding: 25px 20px;
        margin-bottom: 45px;
    }

    .sg-notice-announcement h3 {
        font-size: 25px;
    }

    .sg-notice-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .sg-notice-table th,
    .sg-notice-table td {
        padding: 14px 15px;
        font-size: 14px;
    }

    .sg-notice-guidelines {
        margin-top: 45px;
    }

    .sg-notice-rule-card {
        padding: 24px 18px;
        gap: 15px;
    }

    .sg-notice-rule-number {
        flex-basis: 35px;
        font-size: 27px;
    }

    .sg-notice-rule-card h3 {
        font-size: 23px;
    }

    .sg-notice-bottom-cta {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 45px;
        padding: 28px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-notice-rule-card {
        transition: none;
    }

    .sg-notice-rule-card:hover {
        transform: none;
    }
}