*,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html,
 body {
     width: 100%;
     height: 100%;
     background: #ffffff;
     font-family: 'Poppins', sans-serif;
 }

 /* ══════════════════════════════════════
       BANNER SECTION
    ══════════════════════════════════════ */
 .banner-section {
     position: relative;
     width: 100%;
     height: 100vh;
     min-height: 640px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 /* ── LAYER 1: Real forest background image ── */
 .bg-forest {
     position: absolute;
     inset: 0;
     z-index: 1;
 }

 .bg-forest img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center 30%;
     display: block;
     /* filter removed — source image already has natural light/dark balance */
 }

 /* ── LAYER 2: Gradient shades ── */
 .shade-top,
 .shade-left,
 .shade-right,
 .shade-bottom {
     position: absolute;
     z-index: 2;
     pointer-events: none;
 }

 .shade-left {
     top: 0;
     left: 0;
     bottom: 0;
     width: 45%;
     background: linear-gradient(90deg,
             rgba(0, 0, 0, 0.95) 0%,
             rgba(0, 0, 0, 0.85) 40%,
             rgba(0, 0, 0, 0.5) 75%,
             rgba(0, 0, 0, 0) 100%);
 }

 .shade-right {
     top: 0;
     right: 0;
     bottom: 0;
     width: 45%;
     background: linear-gradient(270deg,
             rgba(0, 0, 0, 0.95) 0%,
             rgba(0, 0, 0, 0.85) 40%,
             rgba(0, 0, 0, 0.5) 75%,
             rgba(0, 0, 0, 0) 100%);
 }

 .shade-top {
     top: 0;
     left: 0;
     right: 0;
     height: 22%;
     background: linear-gradient(180deg,
             rgba(0, 0, 0, 0.55) 0%,
             rgba(0, 0, 0, 0) 100%);
 }

 .shade-bottom {
     bottom: 0;
     left: 0;
     right: 0;
     height: 30%;
     background: linear-gradient(0deg,
             rgba(0, 0, 0, 0.7) 0%,
             rgba(0, 0, 0, 0) 100%);
 }

 /* ════════════════════════════
       HEADER  — z-index 20
    ════════════════════════════ */
 .banner-header {
     position: relative;
     z-index: 20;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 10%;
     height: 80px;
     /* Explicit height to align items */
     width: 100%;
     box-sizing: border-box;
 }

 /* ════════════════════════════
       CUSTOM LOGO CSS REPLICA
    ════════════════════════════ */
 .logo-custom {
     display: flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
     color: #fff;
 }

 /* The 'I' Pillar Graphic */
 .logo-graphic {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 22px;
     margin-bottom: 2px;
 }

 .logo-graphic .roof {
     width: 0;
     height: 0;
     border-left: 11px solid transparent;
     border-right: 11px solid transparent;
     border-bottom: 7px solid #fff;
     margin-bottom: 3px;
 }

 .logo-graphic .pillars {
     display: flex;
     justify-content: space-between;
     width: 14px;
     height: 24px;
     border-top: 2px solid #fff;
     border-bottom: 2px solid #fff;
     padding: 2px 0;
     box-sizing: border-box;
 }

 .logo-graphic .line {
     width: 2px;
     height: 100%;
     background: #fff;
 }

 .logo-graphic .base {
     width: 18px;
     height: 2px;
     background: #fff;
     margin-top: 3px;
 }

 .logo-graphic .base-bottom {
     width: 22px;
     height: 1.5px;
     background: #fff;
     margin-top: 2px;
 }

 /* The "LLU" & Subtext */
 .logo-text-group {
     display: flex;
     flex-direction: column;
 }

 .logo-llu {
     font-family: 'Times New Roman', Times, serif;
     font-size: 38px;
     line-height: 0.8;
     letter-spacing: 2px;
 }

 .logo-slogan {
     font-family: 'Inter', sans-serif;
     font-size: 6px;
     font-weight: 500;
     letter-spacing: 4px;
     margin-top: 5px;
     color: #d1d1d1;
 }

 /* ════════════════════════════
       TOP NAVIGATION NOTCH
    ════════════════════════════ */
 .nav-pill {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     height: 64px;
     padding: 0 50px;
     display: flex;
     align-items: center;
     background: linear-gradient(180deg, #f4f4f4 0%, #e9e9e9 50%, #dcdcdc 100%);
     border-bottom-left-radius: 45px;
     border-bottom-right-radius: 45px;
     box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, .9),
         0 4px 12px rgba(0, 0, 0, .12);
 }

 /* Left inverted corner connection */
 .nav-pill::before {
     content: "";
     position: absolute;
     top: 0;
     left: -31.2px;
     /* Width of the curve */
     width: 32px;
     height: 32px;
     /* Sync background gradient to match main pill perfectly */
     background: linear-gradient(180deg, #f4f4f4 0%, #e9e9e9 50%, #dcdcdc 100%);
     background-size: 100% 64px;
     background-position: top;
     /* Use a radial mask to hollow out the bottom left */
     -webkit-mask-image: radial-gradient(circle at 0 100%, transparent 32px, black 32.5px);
     mask-image: radial-gradient(circle at 0 100%, transparent 32px, black 32.5px);
     pointer-events: none;
     /* Prevents interference with clicks/hover */
 }

 /* Right inverted corner connection */
 .nav-pill::after {
     content: "";
     position: absolute;
     top: 0;
     right: -31.2px;
     /* Width of the curve */
     width: 32px;
     height: 32px;
     /* Sync background gradient to match main pill perfectly */
     background: linear-gradient(180deg, #f4f4f4 0%, #e9e9e9 50%, #dcdcdc 100%);
     background-size: 100% 64px;
     background-position: top;
     /* Use a radial mask to hollow out the bottom right */
     -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent 32px, black 32.5px);
     mask-image: radial-gradient(circle at 100% 100%, transparent 32px, black 32.5px);
     pointer-events: none;
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 70px;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .nav-links a {
     text-decoration: none;
     color: #000;
     font-size: 20px;
     font-weight: 400;
     transition: opacity 0.2s ease;
 }

 .nav-links a:hover {
     opacity: 0.7;
 }

 /* =========================
   CONTACT BUTTON
========================= */

 .btn-contact {
     width: 220px;
     height: 58px;

     background: #ffffff;
     border: 2px solid #ffffff;
     border-radius: 50px;

     padding: 4px;

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

     cursor: pointer;

     transition: transform 0.4s ease,
         box-shadow 0.4s ease;
 }

 .btn-contact .btn-text {
     flex: 1;
     height: 100%;

     background: #F3CF8E;
     border-radius: 40px;

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

     font-family: 'Poppins', sans-serif;
     font-size: 16px;
     font-weight: 600;
     color: #000;

     transition: background-color 0.4s ease,
         color 0.4s ease;
 }

 .btn-contact .arrow-circle {
     width: 38px;
     height: 38px;

     background: #ffffff;
     border-radius: 50%;

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

     flex-shrink: 0;

     transition: transform 0.4s ease;
 }

 .btn-contact .arrow-circle svg {
     width: 18px;
     height: 18px;

     fill: none;
     stroke: #F3CF8E;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;

     transition: transform 0.4s ease,
         stroke 0.4s ease;
 }

 /* HOVER */
 .btn-contact:hover {
     /* transform: translateY(-3px); */
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .btn-contact:hover .btn-text {
     background: #000;
     color: #fff;
 }

 .btn-contact:hover .arrow-circle {
     transform: translateX(-4px);
 }

 .btn-contact:hover .arrow-circle svg {
     transform: rotate(-45deg);
     stroke: #000000;
     margin-left: 4px;
 }

 /* ══════════════════════════════════
           FOOTER
        ══════════════════════════════════ */
 .site-footer {
     background: #1e1e1e;
     border-radius: 40px 40px 0 0;
     padding: 44px 56px 28px;
 }

 /* ── Top 3-column row ── */
 .footer__top {
     display: grid;
     grid-template-columns: 220px 1fr 200px;
     align-items: center;
     gap: 0 32px;
     padding-bottom: 28px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.10);
 }

 /* ════════════════════════
           LEFT — Logo + tagline
        ════════════════════════ */
 .footer__left {}

 /* ILLU logo mark — built in HTML/CSS/SVG */
 .footer__logo {
     display: inline-block;
     text-decoration: none;
     margin-bottom: 16px;
 }

 .footer__logo-icon {
     display: block;
     margin-bottom: 4px;
 }

 .footer__logo-icon svg {
     width: 22px;
     height: 18px;
     display: block;
 }

 .footer__logo-wordmark {
     display: flex;
     align-items: flex-end;
     gap: 0;
     line-height: 1;
 }

 .footer__logo-wordmark span {
     font-family: 'Cinzel', serif;
     font-size: 36px;
     font-weight: 400;
     color: #fff;
     letter-spacing: 6px;
     display: inline-block;
 }

 /* Gold underline beneath wordmark */
 .footer__logo-underline {
     display: block;
     width: 100%;
     height: 2px;
     background: #f5a623;
     margin-top: 6px;
     border-radius: 1px;
 }

 .footer__tagline {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.85);
     line-height: 1.6;
     font-weight: 400;
     max-width: 200px;
 }

 /* ════════════════════════
           CENTER — Heading + form
        ════════════════════════ */
 .footer__center {
     text-align: center;
     padding: 0 16px;
 }

 .footer__center-heading {
     font-size: 26px;
     font-weight: 400;
     color: #fff;
     margin-bottom: 20px;
     letter-spacing: -0.2px;
     line-height: 1.3;
 }

 .footer__form {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
 }

 .footer__input {
     flex: 1;
     max-width: 460px;
     height: 52px;
     background: #fff;
     border: none;
     border-radius: 50px;
     padding: 0 24px;
     font-size: 15px;
     font-family: 'Inter', sans-serif;
     color: #333;
     outline: none;
 }

 .footer__input::placeholder {
     color: #aaa;
 }

 .footer__btn {
     height: 52px;
     min-width: 160px;
     background: #f5a623;
     border: none;
     border-radius: 50px;
     color: #fff;
     font-size: 15px;
     font-weight: 500;
     font-family: 'Inter', sans-serif;
     cursor: pointer;
     padding: 0 32px;
     transition: background 0.2s, transform 0.15s;
     flex-shrink: 0;
 }

 .footer__btn:hover {
     background: #e8971a;
     transform: translateY(-1px);
 }

 /* ════════════════════════
           RIGHT — Social + Call
        ════════════════════════ */
 .footer__right {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 .footer__label {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 2px;
     color: rgba(255, 255, 255, 0.75);
     text-transform: uppercase;
 }

 .footer__social {
     display: flex;
     gap: 10px;
     align-items: center;
 }

 .footer__social-link {
     width: 38px;
     height: 38px;
     border: 1.5px solid rgba(255, 255, 255, 0.35);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     color: rgba(255, 255, 255, 0.85);
     transition: border-color 0.2s, color 0.2s;
 }

 .footer__social-link:hover {
     border-color: #f5a623;
     color: #f5a623;
 }

 .footer__social-link svg {
     width: 16px;
     height: 16px;
     fill: currentColor;
 }

 .footer__call-label {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 2px;
     color: rgba(255, 255, 255, 0.75);
     text-transform: uppercase;
     margin-top: 6px;
 }

 .footer__phone {
     font-size: 14px;
     color: #fff;
     text-decoration: none;
     font-weight: 400;
     letter-spacing: 0.2px;
 }

 .footer__phone:hover {
     color: #f5a623;
 }

 /* ── Bottom bar ── */
 .footer__bottom {
     padding-top: 18px;
     display: flex;
     align-items: center;
     gap: 48px;
 }

 .footer__bottom-link {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.65);
     text-decoration: none;
     font-weight: 400;
     transition: color 0.2s;
 }

 .footer__bottom-link:hover {
     color: #fff;
 }

 /* ── Responsive ── */
 @media (max-width: 900px) {
     .site-footer {
         padding: 36px 32px 24px;
     }

     .footer__top {
         grid-template-columns: 1fr;
         gap: 36px 0;
     }

     .footer__center {
         padding: 0;
     }

     .footer__right {
         align-items: flex-start;
         text-align: left;
     }
 }

 @media (max-width: 600px) {
     .footer__form {
         flex-direction: column;
     }

     .footer__input {
         max-width: 100%;
         width: 100%;
     }

     .footer__btn {
         width: 100%;
     }

     .footer__center-heading {
         font-size: 20px;
     }
 }