:root {
  --isi-font-body: "Serenity", sans-serif;      
  --isi-text-color: #105249;                    
  --isi-body-size: 18px;                        
  --isi-body-lh: 1.65;                          
  --isi-content-lh: 1.7;                        
}
p {
  line-height: var(--isi-body-lh);
}
p.serenity-light,
p.title-description,
p.activity-stays-v2__description,
p.activity-card-v2__text {
  line-height: var(--isi-body-lh);
}
.summernote-content,
.summernote-content p,
.summernote-content div,
.summernote-content span,
.summernote-content font,
.summernote-content li,
.summernote-content td,
.summernote-content th {
  font-family: var(--isi-font-body) !important;
  font-size: var(--isi-body-size) !important;     
  color: var(--isi-text-color) !important;        
  line-height: var(--isi-content-lh) !important;
  background-color: transparent !important;       
}
.summernote-content a,
.summernote-content a span {
  color: var(--isi-text-color) !important;
  text-decoration: underline !important;
}
.summernote-content h1,
.summernote-content h2 {
  font-size: 28px !important;
}
.summernote-content h3 {
  font-size: 24px !important;
}
.summernote-content h4 {
  font-size: 20px !important;
}
.summernote-content h5,
.summernote-content h6 {
  font-size: 18px !important;
  font-weight: 700 !important;
}
.summernote-content h1,
.summernote-content h2,
.summernote-content h3,
.summernote-content h4,
.summernote-content h5,
.summernote-content h6 {
  font-family: var(--isi-font-body) !important;
  color: var(--isi-text-color) !important;
  line-height: 1.25 !important;
  text-align: left !important;
  background-color: transparent !important;
}
.summernote-content h1 span, .summernote-content h1 font,
.summernote-content h2 span, .summernote-content h2 font,
.summernote-content h3 span, .summernote-content h3 font,
.summernote-content h4 span, .summernote-content h4 font,
.summernote-content h5 span, .summernote-content h5 font,
.summernote-content h6 span, .summernote-content h6 font {
  font-size: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
@media (min-width: 576px) {.summernote-content p,
  .summernote-content li,
  .summernote-content div {
    text-align: justify !important;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
.tsix-richtext p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }}
@media (max-width: 575.98px) {.summernote-content p,
  .summernote-content li,
  .summernote-content div {
    text-align: left !important;
  }}
.summernote-content img {
  max-width: 100% !important;   
  height: auto !important;      
  display: block;               
  margin: 1.25rem auto;         
}
.summernote-content div[style*="width"],
.summernote-content table,
.summernote-content td[style*="width"],
.summernote-content th[style*="width"] {
  max-width: 100% !important;
}
.summernote-content iframe {
  max-width: 100%;
}
@media (max-width: 991.98px) {.tsix-about-section__media {
    max-height: 440px;
  }
.tsix-about-section__media img {
    max-height: 440px;
    object-fit: cover;
    object-position: center;
  }}
.footer-section::before,
.footer-section::after {
  background-image: none !important;
}
.tsix-about-hero[style*="d2670381493aebb89afccaf6ff55a3276810a708"] {
  background-image: url("https://pub-77dfd32c2b4a41d3a61992ed7048ee22.r2.dev/__assets/www.sunseek.africa/1d/9f/1d9f24e634c52fa00e0dc340c6aa38e11cc0fc0f.jpg") !important;
}
.summernote-content video,
.summernote-content iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
.summernote-content,
.summernote-content p,
.summernote-content div,
.summernote-content span,
.summernote-content li {
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (min-width: 992px) and (max-width: 1199.98px) {.ss-header__inner {
    width: calc(100% - 240px) !important;
    max-width: calc(100% - 240px) !important;
  }
.ss-header__nav {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
.ss-header__toggle {
    display: flex !important;
  }
.ss-nav {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--ss-header-bg, #fff) !important;
  }
.ss-nav.open {
    max-height: calc(100vh - 112px) !important;
  }
.ss-nav > li,
  .ss-nav__link {
    width: 100%;
  }
.ss-nav__item--has-children > .ss-dropdown {
    position: static !important;
    display: none !important;
    width: 100% !important;
    transform: none !important;
  }
.ss-nav__item--has-children.open > .ss-dropdown {
    display: block !important;
  }}
@media (max-width: 575.98px) {html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
.container > .row.g-5 {
    --bs-gutter-x: 0;
  }
.ss-header,
  .ss-header__inner,
  .ss-header__nav {
    min-width: 0;
    max-width: 100%;
  }
.ss-header__inner {
    width: calc(100% - 120px) !important;
    margin-left: 120px !important;
    padding-inline: 0.75rem !important;
  }
.ss-theme-six-logo-shell {
    top: 0;
    left: 0;
    width: 120px;
    max-width: 120px;
    height: 112px !important;
  }
.ss-theme-six-logo-bg {
    width: 120px;
    max-width: 120px;
    height: 112px !important;
    min-height: 0 !important;
    padding: 0.5rem;
    align-items: center;
  }
.ss-theme-six-logo-bg img {
    width: 100%;
    max-width: 104px;
    max-height: 96px;
    padding: 0;
    transform: none;
    object-fit: contain;
  }
.ss-nav {
    max-width: 100vw;
  }
.footer-section.theme-six-footer-main {
    width: 100%;
    max-width: 100vw;
  }
.main-description.mx-120.px-120 {
    display: block;
    width: 100%;
    margin-inline: 0 !important;
    padding: 3rem 1.25rem !important;
  }
.main-description.mx-120.px-120 > .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 0 !important;
  }
.main-description .h1-mega {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 2rem !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
#resources-tenders,
  #resources-tenders > .p-4,
  #resources-tenders .table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
.tender-archive-card,
  .tender-archive-card > .card-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
#resources-tenders > .p-4 {
    padding: 1rem !important;
  }
#resources-tenders .table-responsive {
    overflow: visible;
  }
#resources-tenders table,
  #resources-tenders tbody,
  #resources-tenders tr,
  #resources-tenders td {
    display: block;
    width: 100%;
  }
#resources-tenders thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
#resources-tenders tbody tr {
    padding: 1rem;
    margin-bottom: 0.85rem;
    border: 1px solid rgba(16, 82, 73, 0.16);
    border-radius: 6px;
    background: #fff;
  }
#resources-tenders tbody td {
    padding: 0.3rem 0;
    border: 0;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
#resources-tenders tbody td:nth-child(1)::before {
    content: "Published: ";
    font-weight: 700;
  }
#resources-tenders tbody td:nth-child(3):not(:empty)::before {
    content: "Closing date: ";
    font-weight: 700;
  }
#resources-tenders tbody td:empty {
    display: none;
  }
#resources-tenders .d-flex {
    justify-content: flex-start !important;
  }}
/* 3. PAGE-LOCAL */

  .breadcrumb-area::after {
    background-color: #FDFDFD !important;
    opacity: 0.76 !important;
  }


            .theme-six-page-content {
                padding-top: clamp(6rem, 12vw, 8rem);
                padding-bottom: clamp(3rem, 8vw, 5rem);
            }

            .theme-six-section-intro .section-overline {
                letter-spacing: 0.35em;
            }

            .card-activity .card-body {
                position: relative;
                z-index: 2;
            }

            .card-activity .btn {
                letter-spacing: 0.12em;
            }
        

        :root {
            --color-primary: #00ABC5;
            --color-primary-rgb: 0, 171, 197;
            --color-secondary: #F7C23D;
            --color-secondary-rgb: 247, 194, 61;
            --color-tertiary: #105249;
            --color-tertiary-rgb: 16, 82, 73;
            --color-quinary: #FFDE8A;
            --color-quinary-rgb: 255, 222, 138;
            --font-default-color: #105249;
            --font-default-color-rgb: 16, 82, 73;
            --font-highlight-color: #ED1B24;
            --font-highlight-color-rgb: 237, 27, 36;
            --spacing-section-gap: 6rem;
            --spacing-activity-card-gap: 1rem;
            --spacing-extra-lg-vertical: 6rem;
            --spacing-extra-lg-horizontal: 3rem;
            --spacing-lg-vertical: 4.5rem;
            --spacing-lg-horizontal: 2.5rem;
            --spacing-md-vertical: 3.5rem;
            --spacing-md-horizontal: 2rem;
            --spacing-vertical: 3rem;
            --spacing-horizontal: 1.75rem;
            --spacing-sm-vertical: 2rem;
            --spacing-sm-horizontal: 1.5rem;
            --spacing-xs-vertical: 1rem;
            --spacing-xs-horizontal: 1rem;
            --button-border-radius: 999px;
            --button-padding-y: 0.75rem;
            --button-padding-x: 1.75rem;
            --form-input-border-radius: 0.75rem;
            --form-input-padding-y: 0.75rem;
            --form-input-padding-x: 1rem;
            --form-input-background: #ffffff;
            --form-input-color: #333333;
            --form-input-border-color: #ced4da;

        body {
            color: #105249;
                            font-family: 'Serenity', sans-serif;
                                        font-weight: 400;
                                        font-size: 18px;
                                        line-height: 19.5px;
                                                    font-style: normal;
                    }

                    --typography-h1_prime-font-family: "Warnock Pro", sans-serif;
                    --typography-h1_prime-font-weight: 600;
                    --typography-h1_prime-font-size: 64px;
                    --typography-h1_prime-line-height: 60px;
                    --typography-h1_prime-letter-spacing: normal;
                    --typography-h1_prime-font-style: normal;
                    --typography-h1_prime-text-transform: none;
                    --typography-h1_prime-color: var(--font-default-color);
                        --typography-h1_mega-font-family: "Serenity", sans-serif;
                    --typography-h1_mega-font-weight: 200;
                    --typography-h1_mega-font-size: 64px;
                    --typography-h1_mega-line-height: 60px;
                    --typography-h1_mega-letter-spacing: 1px;
                    --typography-h1_mega-font-style: normal;
                    --typography-h1_mega-text-transform: none;
                    --typography-h1_mega-color: var(--font-default-color);
                        --typography-h1_super-font-family: "Warnock Pro", sans-serif;
                    --typography-h1_super-font-weight: 600;
                    --typography-h1_super-font-size: 50px;
                    --typography-h1_super-line-height: 50px;
                    --typography-h1_super-letter-spacing: -5px;
                    --typography-h1_super-font-style: italic;
                    --typography-h1_super-text-transform: none;
                    --typography-h1_super-color: var(--font-default-color);
                        --typography-h1-font-family: "Serenity", sans-serif;
                    --typography-h1-font-weight: 200;
                    --typography-h1-font-size: 50px;
                    --typography-h1-line-height: 50px;
                    --typography-h1-letter-spacing: normal;
                    --typography-h1-font-style: normal;
                    --typography-h1-text-transform: none;
                    --typography-h1-color: var(--font-default-color);
                        --typography-h2-font-family: "Serenity", sans-serif;
                    --typography-h2-font-weight: 200;
                    --typography-h2-font-size: 40px;
                    --typography-h2-line-height: 37px;
                    --typography-h2-letter-spacing: normal;
                    --typography-h2-font-style: normal;
                    --typography-h2-text-transform: none;
                    --typography-h2-color: var(--font-default-color);
                        --typography-h3-font-family: "Warnock Pro", sans-serif;
                    --typography-h3-font-weight: 700;
                    --typography-h3-font-size: 40px;
                    --typography-h3-line-height: 37px;
                    --typography-h3-letter-spacing: normal;
                    --typography-h3-font-style: italic;
                    --typography-h3-text-transform: none;
                    --typography-h3-color: var(--font-default-color);
                        --typography-h4-font-family: "Serenity", sans-serif;
                    --typography-h4-font-weight: 200;
                    --typography-h4-font-size: 32px;
                    --typography-h4-line-height: 26px;
                    --typography-h4-letter-spacing: normal;
                    --typography-h4-font-style: normal;
                    --typography-h4-text-transform: none;
                    --typography-h4-color: var(--font-default-color);
                        --typography-h5-font-family: "Serenity", sans-serif;
                    --typography-h5-font-weight: 500;
                    --typography-h5-font-size: 22px;
                    --typography-h5-line-height: 1.2rem;
                    --typography-h5-letter-spacing: normal;
                    --typography-h5-font-style: italic;
                    --typography-h5-text-transform: none;
                    --typography-h5-color: var(--font-default-color);
                        --typography-h6-font-family: "Serenity", sans-serif;
                    --typography-h6-font-weight: 700;
                    --typography-h6-font-size: 18px;
                    --typography-h6-line-height: 22.5px;
                    --typography-h6-letter-spacing: normal;
                    --typography-h6-font-style: normal;
                    --typography-h6-text-transform: none;
                    --typography-h6-color: var(--font-default-color);
                        --typography-text-font-family: "Serenity", sans-serif;
                    --typography-text-font-weight: 400;
                    --typography-text-font-size: 18px;
                    --typography-text-line-height: 19.5px;
                    --typography-text-letter-spacing: normal;
                    --typography-text-font-style: normal;
                    --typography-text-text-transform: none;
                    --typography-text-color: var(--font-default-color);
                        --typography-highlight-font-family: "Warnock Pro", sans-serif;
                    --typography-highlight-font-weight: 700;
                    --typography-highlight-font-style: italic;
                    --typography-highlight-text-transform: none;
                    --typography-highlight-color: inherit;
            }

                                                                        
                                                                                                    
                                                                                                    
                                                                                                    
                                                                                                    

                                                .h1-prime {
                     font-family: 'Warnock Pro', sans-serif;                      font-weight: 600;                      font-size: 64px;                      line-height: 60px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            .h1-mega {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 64px;                      line-height: 60px;                      letter-spacing: 1px;                      font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            .h1-super {
                     font-family: 'Warnock Pro', sans-serif;                      font-weight: 600;                      font-size: 50px;                      line-height: 50px;                      letter-spacing: -5px;                      font-style: italic;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h1, .heading-1 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 50px;                      line-height: 50px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h2, .heading-2 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 40px;                      line-height: 37px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h3, .heading-3 {
                     font-family: 'Warnock Pro', sans-serif;                      font-weight: 700;                      font-size: 40px;                      line-height: 37px;                                          font-style: italic;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h4, .heading-4 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 200;                      font-size: 32px;                      line-height: 26px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h5, .heading-5 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 500;                      font-size: 22px;                      line-height: 1.2rem;                                          font-style: italic;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            h6, .heading-6 {
                     font-family: 'Serenity', sans-serif;                      font-weight: 700;                      font-size: 18px;                      line-height: 22.5px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }
                                                            body {
                     font-family: 'Serenity', sans-serif;                      font-weight: 400;                      font-size: 18px;                      line-height: 19.5px;                                          font-style: normal;                      text-transform: none;                      color: var(--font-default-color);                 }

        body {
            color: #105249;
        }

        strong,
        b,
        .font-highlight {
            font-family: inherit;
            font-weight: inherit;
            font-style: inherit;
                        color: inherit;
                         font-family: 'Warnock Pro', sans-serif;              font-weight: 700;              font-style: italic;         }

        /* legacy menu overrides removed; unified header controls styles */

    

            .newsletter-content, .newsletter-content .h1-mega, .activity-details .h1-prime {
color: white !important;
}

.ss-nav__link {
 text-decoration: none;
}
.ss-header .ss-dropdown__link {
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    border-radius: 0;
    border: 1px solid #fff;
    padding: 9px 21px 13px !important;
    transform: none !important;
    justify-content: center;
    white-space: nowrap;
}

.ss-dropdown {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;


}

/* Center desktop dropdowns beneath their parent link */
.ss-nav__item--has-children > .ss-dropdown {
    left: 50%;
    transform: translate(-50%, 10px);
}

.ss-nav__item--has-children.open > .ss-dropdown {
    transform: translate(-50%, 0);
}

/* Keep mobile stacked menus untouched */
@media (max-width: 992px) {
    .ss-nav__item--has-children > .ss-dropdown {
        left: 0;
        transform: none;
    }
}

.ss-header__social a {
    font-size: 1.35rem !important;   /* production icons are ~22px */
    line-height: 1;
    letter-spacing: 10px;
}
/* Tighten the header height like production */
.ss-header__inner {
    padding: 0.45rem 1.5rem !important;   /* reduces top/bottom space */
}

.ss-nav__link {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.ss-theme-six-logo-shell{
max-width: 30%;
background-color: transparent;
z-axis:1003;
position: fixed;
top: -20px;
left:-20px;
padding:0px;
}

.ss-theme-six-logo-bg{
 max-width: 270px;
height: 230px;
background-size:  auto;
padding-left: 22px;
background-color:#ffffff;
border-radius:0 0 28px 28px;
box-shadow:0 6px 18px rgba(0,0,0,0.10);
}

.ss-theme-six-logo-bg img{
 max-width: 220px;
vertical-align: top;
transform: translateY(-30px);
padding-right: 25px;
}

.ss-header__inner{
 height: 112px;
margin-left: 240px;
}
        

/* ISI-ACT-0040: menu banner full length with bigger icons; keeps About Us
   dropdown clear of the fixed logo card (ISI-ACT-0003/0029). */
.ss-header__social a {
    font-size: 1.75rem !important;
}
@media (min-width: 1279.98px) and (max-width: 1550px) {
    .ss-nav__link {
        white-space: nowrap;
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
    .ss-header__inner {
        margin-left: 210px;
    }
    .ss-header__social a {
        font-size: 1.45rem !important;
    }
}
@media (min-width: 992.02px) {
    .ss-nav > .ss-nav__item--has-children:first-child > .ss-dropdown {
        left: 0;
        transform: translate(0, 10px);
    }
    .ss-nav > .ss-nav__item--has-children:first-child.open > .ss-dropdown {
        transform: translate(0, 0);
    }
}


.ue-section {
    background: white;
    padding: 20px 0 110px;
    position: relative;
}

.ue-section-highlighted {
    background: var(--color-secondary, #F7C23D);
    padding: 70px 0 70px;
    position: relative;
    padding-inline: 230px;
}

.ue-title, .ue-title-highlighted {
    font-size: 2.5rem;
}

.ue-light, .ue-light-highlighted {
    font-weight: 200;
    font-size: 64px;
    line-height: 37px;
}

.ue-bold, .ue-bold-highlighted {
    font-weight: 700;
    font-size: 64px;
}

.col-lg-4.text-end, .col-lg-4.text-end-highlighted {
    display: flex;
    justify-content: flex-end;
}


/* Footer Styling */
.footer-container {
  margin-top: 0;
}

/* Upper footer section */
.footer-upper {
  background-color: #F7C23D;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

h1.footer-copyright.mt-5.serenity-light {
    font-size: 15px !important;
}

.footer-location {
  color: #2d5a3d;
  font-size: 0.9rem;
  margin: 0 0 5px 0;
  font-weight: 500;
}

.footer-location:last-child {
  margin-bottom: 0;
}

/* Lower footer section */
.end-footer {
  background-color: #FFDE8A;
  padding: 20px 0;
  color: #2d5a3d;
  font-weight: 500;
}

.footer-section {
  background: #fff8eb;
  padding: 60px 0 30px;
  position: relative;
  overflow: hidden;
}

.footer-section::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -50px;
  background: url("a065.png") no-repeat;
  background-size: contain;
  width: 250px;
  height: 220px;
  opacity: 0.15;
}

.footer-section::after {
  content: "";
  position: absolute;
  bottom: -70px;
  left: -40px;
  background: url("a040.png") no-repeat;
  background-size: contain;
  width: 220px;
  height: 200px;
  opacity: 0.15;
}

.footer-section .container {
  position: relative;
  z-index: 2;
}

.footer-menu-column {
  min-width: 200px;
}

.footer-title {
  color: #2d5a3d;
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.footer-logo {
  max-width: 200px;
  height: auto;
  width: 100%;
}

.footer-icons {
  display: flex;
  gap: 15px;
}

.footer-icons i {
  color: #2d5a3d;
  font-size: 1.2rem;
}

.footer-heading {
  color: #2d5a3d;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 8px;
}

.footer-list a {
  color: #2d5a3d;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  font-family: 'SS Serenity', sans-serif;
}

.footer-list a:hover {
  color: #1f3d29;
}

.footer-buttons {
  gap: 10px;
}

.footer-btn {
  background: #1f3d29;
  border: none;
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-btn:hover {
  background: #2d5a3d;
  transform: translateY(-2px);
  color: white;
}

.footer-btn i {
  font-size: 0.8rem;
}

.footer-social {
  display: flex;
  gap: 15px;
}

.social-icon {
  color: #2d5a3d !important;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.social-icon i {
  color: #2d5a3d !important;
}

.social-icon:hover {
  color: #1f3d29 !important;
}

.social-icon:hover i {
  color: #1f3d29 !important;
}

@media (max-width: 768px) {
  .footer-copyright,
  .footer-powered-by {
    text-align: center;
    margin-bottom: 10px;
  }

  .footer-section {
    padding: 40px 0 20px;
  }

  .footer-buttons {
    margin-bottom: 20px;
  }
}

:root {
  --theme-six-footer-background: #F7C23D;
  --theme-six-footer-background-rgb: 247, 194, 61;
  --theme-six-footer-copyright: #FFDE8A;
  --theme-six-footer-copyright-rgb: 255, 222, 138;
}

.theme-six-footer-main {
  background: var(--theme-six-footer-background);
}

.theme-six-footer-main::before {
  background: linear-gradient(
    135deg,
    rgba(var(--theme-six-footer-background-rgb), 0.35),
    rgba(var(--theme-six-footer-background-rgb), 0.15)
  );
}

.theme-six-footer-main::after {
  background: linear-gradient(
    135deg,
    rgba(var(--theme-six-footer-background-rgb), 0.2),
    rgba(var(--theme-six-footer-background-rgb), 0.25)
  );
}

.theme-six-footer-copyright {
  background-color: var(--theme-six-footer-copyright);
}

.theme-six-footer-copyright,
.theme-six-footer-copyright .footer-powered-by,
.theme-six-footer-copyright .footer-copyright {
  color: #2d5a3d;
}

/* 4. FIXUPS */

/* ---- fixups (SPEC.md skeleton point 4) ---- */
a { color: #0d6efd; text-decoration: underline; }
a:hover { color: #0a58ca; }

  
/* rule 8 - iSimangaliso design-system pass. One appended block per page so the
   whole site reads from the same tokens: #00ABC5 primary, #F7C23D secondary,
   #105249 tertiary, Serenity type. Replaces Bootstrap's default blue links and
   buttons, unifies the two competing page-header treatments, and removes the
   hard-coded 200px hero inset that broke phone and tablet layouts. */
:root {
  --isi-primary: #00ABC5;
  --isi-secondary: #F7C23D;
  --isi-tertiary: #105249;
  --isi-hero-pad: clamp(1rem, 4vw, 3rem);
  --isi-hero-img: none;
}
a { color: var(--isi-tertiary); text-decoration: none; }
a:hover, a:focus { color: var(--isi-primary); text-decoration: underline; }
.tsix-richtext a, .summernote-content a { text-decoration: underline; text-underline-offset: 2px; }
.btn-primary {
  --bs-btn-bg: var(--isi-tertiary);
  --bs-btn-border-color: var(--isi-tertiary);
  --bs-btn-hover-bg: var(--isi-primary);
  --bs-btn-hover-border-color: var(--isi-primary);
  --bs-btn-active-bg: var(--isi-primary);
  --bs-btn-active-border-color: var(--isi-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  border-radius: 999px;
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--isi-tertiary);
  --bs-btn-border-color: var(--isi-tertiary);
  --bs-btn-hover-bg: var(--isi-tertiary);
  --bs-btn-hover-border-color: var(--isi-tertiary);
  --bs-btn-hover-color: #fff;
  border-radius: 999px;
}
.btn-sm { padding-inline: 1rem; }
.header-hero-section {
  background-image:
    linear-gradient(100deg, rgba(16,82,73,.95) 0%, rgba(16,82,73,.74) 48%, rgba(16,82,73,.38) 100%),
    var(--isi-hero-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem) !important;
}
.header-hero-section > .container {
  padding-left: var(--isi-hero-pad) !important;
  padding-right: var(--isi-hero-pad) !important;
}
.header-hero-section > .container > br { display: none; }
@media (min-width: 1200px) {
  .header-hero-section > .container { padding-left: 250px !important; }
}
.header-hero-section .header-title {
  font-family: "Serenity", sans-serif !important;
  font-weight: 200 !important;
  color: #fff !important;
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 0 !important;
  text-wrap: pretty;
}
.header-hero-section .breadcrumb { margin-bottom: 1rem !important; font-size: .9rem; }
.tsix-about-hero {
  padding: clamp(3rem, 8vw, 6rem) 0 !important;
  background-size: cover !important;
  background-position: center !important;
}
.tsix-about-hero__overlay {
  background: linear-gradient(100deg, rgba(16,82,73,.94) 0%, rgba(16,82,73,.66) 52%, rgba(16,82,73,.3) 100%) !important;
}
.tsix-about-hero h1 {
  font-family: "Serenity", sans-serif !important;
  font-weight: 200 !important;
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
  text-wrap: pretty;
}
.tsix-pill {
  display: inline-block;
  background: var(--isi-secondary);
  color: var(--isi-tertiary);
  border-radius: 999px;
  padding: .35rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.card.border-0.shadow-sm { border-radius: 24px; }
.card-body h2 {
  font-family: "Serenity", sans-serif;
  font-weight: 200;
  color: var(--isi-tertiary);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.card-body h3, .card-body h4, .card-body h5 { color: var(--isi-tertiary); }
.table > thead th {
  background: rgba(16,82,73,.06);
  color: var(--isi-tertiary);
  border-bottom-color: rgba(16,82,73,.25);
  font-weight: 600;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(0,171,197,.055); }
img, video, iframe, table { max-width: 100%; }
@media (max-width: 575.98px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
}

/* rule 9 - responsive guards (phone 430, tablet 768, laptop 1280). The captured
   pages carried a full-bleed section pinned to 1920px with -960px side margins,
   and fixed 675px media heights, both of which forced horizontal scrolling on
   anything narrower than a desktop. */
.full-width-image-section {
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 1199.98px) {
  .full-width-image, .full-width-image img { height: auto !important; min-height: 300px; }
}
@media (max-width: 991.98px) {
  :root { --theme-six-hero-height: 70vh; }
  .full-width-image, .full-width-image img { max-height: 55vh !important; min-height: 240px; }
  .full-width-image-section [style*="height: 675px"],
  .full-width-image-section [style*="height:675px"] { height: auto !important; padding: 2rem !important; }
  [style*="min-height: 675px"], [style*="min-height:675px"] { min-height: 340px !important; }
  .destination-section .container > br, .contact-map-section .container > br { display: none; }
  .destination-title { margin-top: 1rem !important; }
}
@media (max-width: 767.98px) {
  :root { --theme-six-hero-height: 62vh; }
  .card-body.p-4.p-lg-5 { padding: 1.5rem !important; }
  .footer-section.theme-six-footer-main { text-align: left; }
}
@media (max-width: 575.98px) {
  .tsix-about-hero, .header-hero-section { padding-top: 2rem !important; }
  .resource-cards-grid { grid-template-columns: 1fr !important; }
}

/* rule 10 - un-scope the carousel collapse. The captured theme bundle narrows a
   bare `.card` to 12/11/10/9rem with fixed heights inside max-width media
   queries; those values were authored for the home-page `.explore-card`
   carousel but hit every Bootstrap card on the site, slicing the content cards
   on Accommodation, Brand, Governance, Documents, Tenders and the rest into
   176px slivers below 1200px. Scope it back to the carousel and clear the
   residual horizontal scroll from negative row gutters. */
@media (max-width: 1200px) {
  .card:not(.explore-card) {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
html, body { overflow-x: clip; }

/* rule 11 - restore normal flow inside card bodies. The captured theme applies
   `.card-body { display:flex; align-items:flex-end; justify-content:center }`
   to every Bootstrap card body, not just the home-page carousel it was written
   for, which shrink-wrapped headings and lists and pushed them to the bottom
   right of every content card. Scope it to the carousel. */
.card:not(.explore-card) > .card-body {
  display: block;
  align-items: initial;
  justify-content: initial;
}
.card:not(.explore-card) > .card-body.d-flex {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.card:not(.explore-card) > .card-body.d-flex.flex-column { flex-direction: column; }
.card:not(.explore-card) > .card-body > ul,
.card:not(.explore-card) > .card-body > ol { width: 100%; }

/* rule 12 - restore the one grid utility the purged bundle dropped. The captured
   CSS only ships the column classes the original pages happened to use, so
   `.col-6` resolves to nothing and any half-width column collapses to full
   width. Used by the Brand stat row and the Multimedia gallery. Because this
   block sits after the bundle's breakpoint blocks, the paired responsive
   classes are re-declared with attribute-boosted specificity so they still win
   above their breakpoint. */
.col-6 { flex: 0 0 auto; width: 50%; }
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } }
@media (min-width: 768px) {
  [class].col-md-3 { width: 25%; }
  [class].col-md-4 { width: 33.33333333%; }
  [class].col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
  [class].col-lg-3 { width: 25%; }
  [class].col-lg-4 { width: 33.33333333%; }
  [class].col-lg-6 { width: 50%; }
}
@media (min-width: 1200px) {
  [class].col-xl-3 { width: 25%; }
  [class].col-xl-4 { width: 33.33333333%; }
}

/* rule 13 - make the carousel/activity cards usable below 1200px and legible at
   every width. The theme pins `.explore-card` to 11rem/648px at <=992px,
   10rem/540px at <=768px and 9rem/486px at <=576px - widths authored for a
   desktop carousel. At those sizes the 40px h3 token cannot shrink below its
   min-content width, so titles clipped mid-word and copy ran past the card
   edge. The card title also inherited the dark green body colour, which sat
   directly on the photograph with no scrim. */
.explore-card .card-body { position: relative; }
.explore-card .card-body::before {
  content: "";
  position: absolute;
  inset: -100% 0 0;
  background: linear-gradient(to top, rgba(6,40,36,.72) 0%, rgba(6,40,36,.42) 45%, rgba(6,40,36,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.explore-card .card-body > * { position: relative; z-index: 1; }
.explore-card h3, .explore-card .h3 {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(6,40,36,.55);
}
.explore-card .card-body p { color: #fff !important; }
@media (max-width: 1200px) {
  .explore-card.card {
    width: 100% !important;
    height: auto !important;
    min-height: 420px;
  }
  .explore-card .card-body { padding: 1.5rem !important; }
  .explore-card h3, .explore-card .h3 {
    font-size: clamp(1.25rem, 3.2vw, 1.75rem) !important;
    line-height: 1.15 !important;
    text-wrap: pretty;
  }
  .explore-card .card-body p { font-size: 0.95rem !important; }
}
@media (max-width: 575.98px) {
  .explore-card.card { min-height: 360px; }
}


/* rule 15 - About Us section design language. The About pages were single
   centred prose cards on a white field - accurate but flat. These components
   give the section a shared editorial system: full-bleed photographic heroes,
   impact bands, alternating split rows, pull quotes, a milestone timeline and
   closing calls to action, all built from the Park's own tokens (#105249
   tertiary, #00ABC5 primary, #F7C23D secondary, Serenity display type). */
.isi-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #105249; min-height: clamp(340px, 56vh, 600px); }
.isi-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.isi-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,40,36,.12) 0%, rgba(6,40,36,.5) 52%, rgba(6,40,36,.93) 100%); }
.isi-hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
/* The floating logo badge (.ss-theme-six-logo-shell) is position:fixed at the
   viewport's top-left, roughly x -20..250 / y -20..210, and paints above the
   hero at z-index 1100. .isi-hero bottom-aligns its content, so a tall headline
   grows upward into that band and the breadcrumb and kicker disappear behind
   the badge. Reserve vertical clearance so hero content always starts below the
   badge, whatever the headline length. */
.isi-hero__inner { padding-top: 170px; }
.isi-hero { min-height: clamp(430px, 60vh, 660px); }
@media (max-width: 575.98px) {
  .isi-hero__inner { padding-top: 120px; }
  .isi-hero { min-height: clamp(360px, 56vh, 520px); }
}
.isi-hero h1 { font-family: "Serenity", sans-serif; font-weight: 200; color: #fff; font-size: clamp(2.1rem, 5.6vw, 4.25rem); line-height: 1.03; margin: 1.15rem 0 0; text-wrap: balance; }
.isi-hero__lede { color: rgba(255,255,255,.9); font-size: clamp(1.02rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 62ch; margin: 1.15rem 0 0; text-wrap: pretty; }
.isi-crumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .9rem; color: rgba(255,255,255,.75); }
.isi-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.isi-crumb a:hover { color: #F7C23D; text-decoration: underline; }
.isi-kicker { display: inline-block; background: #F7C23D; color: #105249; border-radius: 999px; padding: .42rem 1.1rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.isi-section { padding: clamp(2.75rem, 7vw, 5.5rem) 0; }
.isi-section--tint { background: #F4F8F7; }
.isi-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: #00737F; margin: 0 0 .85rem; }
.isi-h2 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.8rem, 4vw, 2.9rem); color: #105249; line-height: 1.08; margin: 0 0 1.25rem; text-wrap: balance; }
.isi-h3 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: #105249; line-height: 1.15; margin: 0 0 .75rem; }
.isi-lead { font-size: clamp(1.04rem, 1.45vw, 1.22rem); line-height: 1.68; color: #24423d; text-wrap: pretty; }
.isi-body { font-size: 1.02rem; line-height: 1.72; color: #33514c; text-wrap: pretty; }
.isi-measure { max-width: 68ch; }
.isi-band { background: #105249; color: #fff; padding: clamp(2.5rem, 6vw, 4.25rem) 0; }

.isi-statgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .isi-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.isi-statgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .isi-statgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isi-stat__num { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1; color: #F7C23D; margin: 0; }

.isi-stat__label { margin: .6rem 0 0; font-size: .95rem; line-height: 1.45; color: #fff; }
.isi-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .isi-split { grid-template-columns: 1fr 1fr; } .isi-split--rev .isi-split__media { order: 2; } }
.isi-split__media img { width: 100%; height: 100%; min-height: clamp(240px, 34vw, 420px); object-fit: cover; border-radius: 26px; display: block; }
.isi-figcap { margin: .7rem 0 0; font-size: .85rem; color: #546965; }
.isi-quote { border-left: 4px solid #F7C23D; padding: .25rem 0 .25rem 1.5rem; margin: 0; }
.isi-quote p { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.35rem, 3vw, 2.15rem); line-height: 1.25; color: #105249; margin: 0; text-wrap: balance; }
.isi-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: #00737F; }
.isi-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .isi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .isi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .isi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isi-tile { background: #fff; border: 1px solid rgba(16,82,73,.12); border-radius: 24px; padding: clamp(1.4rem, 2.6vw, 2rem); height: 100%; }
.isi-tile--solid { background: #105249; border-color: transparent; color: #fff; }
.isi-tile.isi-tile--solid .isi-h3, .isi-tile.isi-tile--solid p:not(.isi-tile__idx) { color: #fff; }
.isi-tile .isi-tile__idx { font-family: "Serenity", sans-serif; font-weight: 200; font-size: 2.2rem; line-height: 1; color: #00737F; margin: 0 0 .9rem; }
.isi-tile.isi-tile--solid .isi-tile__idx { color: #F7C23D; }
.isi-tile p { margin: 0; font-size: .99rem; line-height: 1.65; color: #43605b; }
.isi-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.isi-list li { position: relative; padding-left: 1.8rem; font-size: 1rem; line-height: 1.6; color: #33514c; }
.isi-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: #00ABC5; }
.isi-time { margin: 0; padding: 0; list-style: none; }
.isi-time > li { position: relative; margin-left: 8px; padding: 0 0 2.25rem 2.5rem; border-left: 2px solid rgba(0,171,197,.3); }
.isi-time > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.isi-time > li::before { content: ""; position: absolute; left: -8px; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: #F7C23D; box-shadow: 0 0 0 4px rgba(247,194,61,.2); }
.isi-time__yr { display: block; font-family: "Serenity", sans-serif; font-weight: 200; font-size: 1.6rem; line-height: 1; color: #00737F; margin: 0 0 .45rem; }
.isi-time__t { font-weight: 600; color: #105249; margin: 0 0 .35rem; font-size: 1.05rem; }
.isi-time p { margin: 0; font-size: .99rem; line-height: 1.65; color: #43605b; }
.isi-cta { position: relative; overflow: hidden; border-radius: 30px; background: #105249; color: #fff; padding: clamp(2rem, 5vw, 3.5rem); }
.isi-cta h2 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 .85rem; color: #fff; text-wrap: balance; }
.isi-cta p { color: rgba(255,255,255,.85); max-width: 58ch; margin: 0 0 1.6rem; font-size: 1.03rem; line-height: 1.6; }
.isi-btnrow { display: flex; flex-wrap: wrap; gap: .85rem; }
.isi-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .97rem; text-decoration: none; transition: background .2s ease, color .2s ease; }
.isi-btn--gold { background: #F7C23D; color: #105249; }
.isi-btn--gold:hover { background: #fff; color: #105249; text-decoration: none; }
.isi-btn--ghost { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.isi-btn--ghost:hover { background: #fff; color: #105249; text-decoration: none; }
.isi-btn--solid { background: #105249; color: #fff; }
.isi-btn--solid:hover { background: #00737F; color: #fff; text-decoration: none; }
.isi-note { font-size: .88rem; color: #546965; margin: 1.5rem 0 0; }
/* The captured theme sets h1-h6 { font-family:"Warnock Pro"; font-weight:700;
   font-style:italic }. Every Serenity display component below overrides family
   and weight but inherited that italic unless it says otherwise, so .isi-h3
   card titles rendered slanted. Declare font-style explicitly across the set so
   no component can pick it up from a bare element selector. */
.isi-hero h1,
.isi-h2,
.isi-h3,
.isi-stat__num,
.isi-quote p,
.isi-cta h2,
.isi-time__yr,
.isi-tile .isi-tile__idx,
.isi-tile strong, .isi-tile b,
.isi-hours strong, .isi-hours b,
.isi-contactcard strong, .isi-contactcard b,
.isi-estcard strong, .isi-estcard b,
.isi-list strong, .isi-list b,
.isi-body strong, .isi-body b,
.isi-lead strong, .isi-lead b { font-style: normal; font-family: "Serenity", sans-serif; }

/* rule 16 - motion. The section was entirely static: no reveal, no hover
   feedback, no depth. Everything below is gated on [data-motion="on"], which
   about-motion.js only sets when the visitor has NOT asked for reduced motion -
   so with JS off, or reduced motion on, nothing is hidden and nothing animates. */
html[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
html[data-motion="on"] [data-reveal].is-in { opacity: 1; transform: none; }
html[data-motion="on"] .isi-hero__img {
  animation: isi-kenburns 26s cubic-bezier(.22,.61,.36,1) forwards;
  transform-origin: 52% 48%;
}
@keyframes isi-kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
.isi-split__media { overflow: hidden; border-radius: 26px; }
.isi-split__media img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.isi-split__media:hover img { transform: scale(1.045); }
.isi-tile { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.isi-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(16,82,73,.14); border-color: rgba(0,171,197,.45); }
.isi-tile.isi-tile--solid:hover { box-shadow: 0 18px 42px rgba(16,82,73,.4); }
.isi-btn { transition: transform .25s ease, background-color .2s ease, color .2s ease; }
.isi-btn:hover { transform: translateY(-2px); }
.isi-hero { will-change: auto; }
.isi-stat__num { font-variant-numeric: tabular-nums; }
.isi-time > li::before { transition: transform .3s ease, box-shadow .3s ease; }
.isi-time > li:hover::before { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(247,194,61,.28); }

/* rule 17 - establishment profile components. Extends the About Us editorial
   system (rule 15) with the pieces the 30 establishment profiles and the
   directory need: chip lists for linked places and activities, an outline
   button variant for secondary contact actions, and the directory card. Colours
   are the same tokens - #105249 tertiary, #00737F accessible teal, #F7C23D
   gold - so profiles read as part of the same site. */
.isi-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.isi-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; border: 1px solid rgba(16,82,73,.22); background: #fff; color: #105249; font-size: .95rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
a.isi-chip:hover, a.isi-chip:focus { background: #105249; border-color: #105249; color: #fff; text-decoration: none; transform: translateY(-2px); }
.isi-chip--static { background: rgba(16,82,73,.05); color: #3f5a55; font-weight: 500; }
.isi-btn--outline { border: 1.5px solid rgba(16,82,73,.4); color: #105249; background: transparent; }
.isi-btn--outline:hover { background: #105249; border-color: #105249; color: #fff; text-decoration: none; }
.isi-contact { margin: 0; font-size: 1rem; line-height: 1.7; color: #33514c; text-wrap: pretty; }
.isi-estcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid rgba(16,82,73,.12); background: #fff; height: 100%; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.isi-estcard:hover, .isi-estcard:focus { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(16,82,73,.14); border-color: rgba(0,171,197,.45); text-decoration: none; }
.isi-estcard__img { width: 100%; height: 210px; object-fit: cover; display: block; }
.isi-estcard__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.isi-estcard__type { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #00737F; }
.isi-estcard__name { font-family: "Serenity", sans-serif; font-weight: 200; font-style: normal; font-size: 1.35rem; line-height: 1.2; color: #105249; margin: 0; }
.isi-estcard__text { font-size: .95rem; line-height: 1.6; color: #43605b; margin: 0; }
.isi-estcard__more { margin-top: auto; padding-top: .35rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #00737F; }
.isi-estgrid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .isi-estgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .isi-estgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .isi-estgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.isi-estcard__img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.isi-estcard:hover .isi-estcard__img { transform: scale(1.05); }
/* rule 18 - Places to Visit + Activities: bring both sections onto the design
   system. Defects this fixes, all inherited from the captured theme:
     - .area-card nested a bordered, rounded, mb-3 image INSIDE a bordered
       rounded card, so every card showed a double border and the photo floated
       off the card edge instead of sitting flush.
     - .area-description set line-height 1.095 on 18px copy - far too tight, and
       the reason the card text looked cramped against the 3-line clamp.
     - The "View Activity" control was a non-interactive <div> pill: 220x40px
       (under the 44px touch target), text off-centre from an absolute inner div
       with padding-right 40px, and a var(--color-tertiary, #2D5A3D) fallback
       green that is not in the palette. Replaced in markup with .isi-btn links.
     - Place heroes printed a #105249 title straight onto photography with no
       scrim, so the Park name was barely legible.
     - .explore-card titles inherited the theme's h1-h6 italic Warnock Pro,
       against Serenity Light everywhere else on the site.
     - .conic-gradient-* painted a four-stop yellow/cyan/green conic rainbow
       behind whole sections, putting dark green headings on yellow. */

/* --- cards: flush photo, one border, system radius and hover depth --- */
.area-card {
  border-radius: 24px !important;
  border-color: rgba(16, 82, 73, .12) !important;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.area-card:hover,
.area-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(16, 82, 73, .14);
  border-color: rgba(0, 171, 197, .45) !important;
}
.area-card .area-img {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}
.area-card .area-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.area-card:hover .area-img img { transform: scale(1.05); }
.area-card .area-body { gap: .55rem; padding: 1.4rem !important; }

/* --- card typography: Serenity, upright, readable measure --- */
.area-card .area-title {
  font-family: "Serenity", sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #105249;
  margin: 0;
  text-wrap: pretty;
}
.area-card .area-description {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: #43605b;
  margin: 0;
  -webkit-line-clamp: 4;
  text-wrap: pretty;
}

/* --- the CTA that replaced the fake div pill --- */
.area-cta { margin-top: auto; padding-top: 1.1rem; display: flex; }
.isi-btn--sm { min-height: 44px; padding: .6rem 1.25rem; font-size: .9rem; }

/* --- activity cards: kill the italic Warnock leak, size the button --- */
.explore-card h3,
.explore-card .h3,
.card-activity h3 {
  font-family: "Serenity", sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}
.explore-card .btn,
.card-activity .btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .08em !important;
  border-width: 1.5px;
  transition: background-color .2s ease, color .2s ease, transform .25s ease;
}
.explore-card .btn:hover,
.card-activity .btn:hover { background: #F7C23D; border-color: #F7C23D; color: #105249; transform: translateY(-2px); }

/* --- section backgrounds: replace the conic rainbow with system surfaces --- */
[class*="conic-gradient-"] {
  height: auto !important;
  background: #F4F8F7 !important;
}

/* --- place hero: scrim so the Park name reads on photography --- */
.hero-section-2 > img[src] { z-index: 0; }
.hero-section-2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(6,40,36,.86) 0%, rgba(6,40,36,.58) 52%, rgba(6,40,36,.26) 100%);
  pointer-events: none;
}
.hero-section-2 > .container,
.hero-section-2 > div:not([class*="img"]) { position: relative; z-index: 2; }
.hero-section-2 h1 {
  font-family: "Serenity", sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  color: #fff !important;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem) !important;
  line-height: 1.05 !important;
  text-wrap: balance;
}
.hero-section-2 .title-description,
.hero-section-2 h2,
.hero-section-2 h3,
.hero-section-2 h4,
.hero-section-2 h5,
.hero-section-2 h6,
.hero-section-2 p {
  color: rgba(255,255,255,.92) !important;
  font-family: "Serenity", sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
  line-height: 1.6 !important;
  max-width: 62ch;
  text-wrap: pretty;
}

/* --- section headings on these two sections --- */
.destination-title,
h2.title-heading {
  font-family: "Serenity", sans-serif !important;
  font-weight: 200 !important;
  font-style: normal !important;
  color: #105249;
  text-wrap: balance;
}
p.title-description { line-height: 1.7 !important; }

/* Activity heroes carried no breadcrumb at all, so those nine pages gave no
   route back up to Activities and no sense of location - every other section
   of the site has one. */
.activity-hero-v2__crumb { margin-bottom: 1.1rem !important; }

/* Establishment card titles inherited the theme's h1-h6 italic (30px uppercase
   italic at weight 500), the same Warnock-era leak fixed elsewhere - upright
   Serenity, sentence case, sized to sit under the card image. The CTA row's
   inline style also hardcoded Arial 13px, which poisoned every descendant and
   left the control 20px tall; the row is now unstyled type and carries the
   system .isi-btn pills used on the Jewels pages. */
.activity-card-v2__title,
.activity-card-v2__title a {
  font-family: "Serenity", sans-serif !important;
  font-style: normal !important;
  font-weight: 200 !important;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #105249 !important;
  text-wrap: pretty;
}
.activity-card-v2__text { font-size: 1rem !important; line-height: 1.65 !important; color: #43605b; }
.activity-card-v2__meta {
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00737F !important;
}
.activity-card-v2__links { font-family: "Serenity", sans-serif; }
.activity-hero-v2__eyebrow { font-size: .78rem !important; letter-spacing: .14em; text-transform: uppercase; color: #F7C23D !important; font-weight: 700 !important; }

/* Section headings mix a Serenity run with a <b>place name</b>, which the theme
   renders as bold italic Warnock Pro - two typefaces inside one heading. The
   trailing empty <i> and duplicate empty <h2> the template leaves behind also
   add stray vertical space above each card grid. */
.section-theme-six_title b,
.section-theme-six_title strong,
.destination-title b,
.destination-title strong {
  font-family: inherit !important;
  font-weight: 200 !important;
  font-style: normal !important;
  color: inherit !important;
}
.section-theme-six_title i:empty,
.destination-title i:empty,
h2.section-theme-six_title:empty { display: none !important; }

/* A full-bleed hero must sit flush under the header. The theme reserves 110px
   of top padding on the page-content main to clear the fixed header, which is
   right for pages that open on text but leaves a white band above an
   edge-to-edge photographic hero. */
main.theme-six-page-content:has(> .isi-hero:first-child) { padding-top: 0 !important; }

/* Card copy runs 2-3 lines depending on the activity, and .explore-card
   bottom-anchors its body, so titles landed on different lines across a row.
   A three-line floor puts every title in a row on the same baseline. */
.explore-card .card-body p { min-height: calc(3 * 1.6em); }
@media (max-width: 575.98px) {
  .explore-card .card-body p { min-height: 0; }
}

/* rule 21 - footer menu columns must fit their links on one line. Each column
   is col-sm-6 col-lg-6 col-xl-4 nested inside a col-lg-5 wrapper, so on a wide
   screen a column resolves to roughly 14% of the page - not enough for
   "Western Shores & Charters Creek", which wrapped onto two lines. There are
   only two menu columns, so the wrapper can afford the width: the inner row
   becomes an auto-fitting grid whose track is sized to the longest label, and
   the links stop wrapping. */
.footer-section .footer-menu-column {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
@media (min-width: 768px) {
  .footer-section .col-lg-5 > .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(15rem, max-content));
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    margin: 0 !important;
  }
  .footer-section .col-lg-5 > .row > .footer-menu-column { padding-inline: 0 !important; }
  .footer-section .footer-list a,
  .footer-section .footer-list li { white-space: nowrap; }
}
@media (min-width: 992px) {
  .footer-section > .container > .row > .col-lg-4 { flex: 0 0 auto; width: 30%; }
  .footer-section > .container > .row > .col-lg-5 { flex: 1 1 auto; width: auto; max-width: 46%; }
  .footer-section > .container > .row > .col-lg-3 { flex: 0 0 auto; width: 24%; }
}
@media (max-width: 767.98px) {
  .footer-section .footer-menu-column { width: 100% !important; }
  .footer-section .footer-list a { white-space: normal; }
}