/* ============================================================
   PT SHATRA DIGI KARYA - CORPORATE THEME / NAVY + ORANGE
   Navy #142B4E | Orange #F68423
   ============================================================ */

:root {
    /* Official brand colors sampled from approved logo */
    --sdk-navy: #142B4E;
    --sdk-navy-deep: #0B1930;
    --sdk-navy-mid: #1D3E66;
    --sdk-orange: #F68423;
    --sdk-orange-hover: #E67012;
    --sdk-orange-soft: #FFC078;
    --sdk-orange-ink: #A94708; /* stronger contrast on white */
    --sdk-orange-wash: #FFF3E8;
    --sdk-cream: #FFF9F3;
    --sdk-background: #F7F9FC;
    --sdk-text: #26364E;
    --sdk-muted: #64748B;
    --sdk-border: #E4EAF1;

    /* Backwards compatibility with existing style.css */
    --primary: var(--sdk-navy);
    --primary-dark: var(--sdk-navy-deep);
    --accent: var(--sdk-orange-soft);
    --teal: var(--sdk-orange);  /* replaces legacy teal UI accents */
    --brand-navy: var(--sdk-navy);
    --brand-teal: var(--sdk-orange);
    --brand-gold: var(--sdk-orange-soft);
    --shatra-navy: var(--sdk-navy);
    --shatra-teal: var(--sdk-orange);
    --text: var(--sdk-text);
    --muted: var(--sdk-muted);
    --background: var(--sdk-background);
}

/* 1. BASE & BRAND --------------------------------------------- */
body {
    background: var(--sdk-background);
    color: var(--sdk-text);
}

::selection {
    background: #FAD3AE;
    color: var(--sdk-navy-deep);
}

/* Keep approved brand asset as-is. Only text-based split SHA/TRA changes. */
.brand-sha,
.shatra-word__sha { color: var(--sdk-navy); }
.brand-tra,
.shatra-word__tra { color: var(--sdk-orange); }

/* 2. HEADER & NAV ---------------------------------------------- */
.site-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--sdk-border);
    box-shadow: 0 5px 22px rgba(20, 43, 78, 0.045);
}

.nav-menu a { color: var(--sdk-navy); }
.nav-menu a:hover,
.nav-menu a.active {
    color: var(--sdk-orange-ink);
}
.nav-menu a.active:not(.nav-contact)::after {
    background: var(--sdk-orange);
}
.nav-menu .nav-contact {
    background: var(--sdk-navy);
    color: #FFFFFF;
}
.nav-menu .nav-contact:hover {
    background: var(--sdk-navy-mid);
    color: #FFFFFF;
}
.menu-toggle span { background: var(--sdk-navy); }

/* 3. BUTTONS & LINKS -------------------------------------------- */
.btn-primary {
    background: var(--sdk-orange);
    color: var(--sdk-navy-deep);
    border: 1px solid transparent;
    transition: background-color .2s ease, transform .2s ease;
}
.btn-primary:hover {
    background: var(--sdk-orange-soft);
    color: var(--sdk-navy-deep);
    transform: translateY(-1px);
}
.btn-outline {
    border-color: rgba(255,255,255,.48);
    color: #FFFFFF;
}
.btn-outline:hover { background: rgba(255,255,255,.10); }

.text-link,
.service-link,
.service-detail-link,
.portfolio-empty-link,
.service-card a {
    color: var(--sdk-orange-ink);
}
.text-link:hover,
.service-link:hover,
.service-detail-link:hover,
.portfolio-empty-link:hover,
.service-card a:hover { color: var(--sdk-navy); }

/* 4. TYPOGRAPHY ----------------------------------------------- */
.section-label,
.eyebrow,
.service-number,
.service-detail-number,
.about-card-index,
.portfolio-category-number,
.about-value-number,
.process-number,
.value-number {
    color: var(--sdk-orange-ink);
}

/* Light-orange accent for labels & highlighted words on navy */
.hero .eyebrow,
.hero-modern .eyebrow,
.services-page-hero .eyebrow,
.about-kicker,
.portfolio-kicker,
.about-panel-label,
.cta-section .eyebrow,
.services-bottom-cta .eyebrow,
.project-art-label {
    color: var(--sdk-orange-soft);
}

.hero h1 span,
.hero-modern h1 span,
.services-hero-copy h1 span,
.about-hero h1 span,
.portfolio-hero h1 span,
.cta-section h2 span {
    color: var(--sdk-orange-soft);
}

/* 5. NAVY HEROES AND CTA ------------------------------------- */
.hero,
.hero-modern,
.services-page-hero,
.about-hero,
.portfolio-hero,
.cta-section,
.services-bottom-cta {
    background: linear-gradient(120deg,
        var(--sdk-navy-deep) 0%,
        var(--sdk-navy) 64%,
        var(--sdk-navy-mid) 100%);
    color: #FFFFFF;
}
.hero-modern::before {
    background: rgba(246, 132, 35, .07);
}
.hero-modern p,
.services-hero-copy p,
.about-hero-content p,
.portfolio-hero p,
.cta-section p,
.services-bottom-cta p { color: #DBE5F1; }

/* 6. ORBIT & ILLUSTRATION ------------------------------------- */
.visual-orbit {
    background: radial-gradient(circle,
        rgba(246, 132, 35, .11),
        transparent 68%);
}
.visual-orbit::before,
.services-hero-visual::before {
    border-color: rgba(255, 192, 120, .32);
}
.tag-dot { background: var(--sdk-orange); }
.visual-tag { color: var(--sdk-navy); }
.hero-highlights span { border-left-color: var(--sdk-orange); }
.visual-hub small { color: var(--sdk-navy); }
.services-visual-center strong { color: var(--sdk-orange-soft); }
.services-visual-label { color: var(--sdk-navy); }
.project-showcase-art {
    background: linear-gradient(135deg,
        var(--sdk-navy-deep),
        var(--sdk-navy-mid));
}
.project-art-two { background: rgba(246, 132, 35, .12); }

/* 7. CARDS, ICONS, DECORATIONS -------------------------------- */
.service-card,
.value-item,
.process-card,
.portfolio-category,
.about-value-card,
.about-vision-card,
.about-identity-card,
.service-detail,
.info-panel,
.empty-state {
    border-color: var(--sdk-border);
}
.service-card:hover,
.portfolio-category:hover,
.about-value-card:hover {
    box-shadow: 0 18px 44px rgba(20, 43, 78, .09);
}
.value-number {
    background: var(--sdk-orange-wash);
    color: var(--sdk-orange-ink);
}
.service-feature-list li::before { color: var(--sdk-orange-ink); }
.value-item:hover { border-color: #F9D8B8; }
.about-identity-divider { background: var(--sdk-orange); }
.about-panel-item span { color: var(--sdk-orange-soft); }

/* Consistent neutral section backgrounds */
.process-section,
.about-vision-section,
.portfolio-showcase {
    background: #F0F4F8;
}

/* Remove remaining old green/teal gradients in service artwork */
.service-detail-graphic {
    background: linear-gradient(135deg, #E5ECF5, #C9D8E8);
}
.service-detail:nth-child(2) .service-detail-graphic {
    background: linear-gradient(135deg, #FFF2E6, #F9D8B6);
}
.service-detail:nth-child(3) .service-detail-graphic {
    background: linear-gradient(135deg, #F6F2EA, #E8D9BD);
}

.portfolio-empty-symbol {
    background: var(--sdk-navy);
    color: var(--sdk-orange-soft);
}

/* 8. FOOTER -------------------------------------------------- */
.site-footer {
    background: var(--sdk-navy-deep);
    color: #D3DEEC;
}
.site-footer h3 { color: #FFFFFF; }

/* 9. PREP FOR FUTURE CONTACT FORM ------------------------------ */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: 2px solid var(--sdk-orange);
    outline-offset: 2px;
    border-color: var(--sdk-orange);
}

/* 10. ACCESSIBILITY ------------------------------------------- */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--sdk-orange);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary { transition: none; }
    .btn-primary:hover { transform: none; }
}


/* =========================================
   SDK CONTACT PAGE - STAGE 4.5B
========================================= */

/* NOTIFICATIONS */

.contact-notifications {
    padding-top: 20px;
}

.contact-notice {
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.7;
}

.contact-notice--success {
    background: #e8f6ed;
    color: #176337;
    border: 1px solid #b7e5c5;
}

.contact-notice--error {
    background: #fff0ed;
    color: #9b3022;
    border: 1px solid #f0c2bb;
}

/* HERO */

.contact-hero {
    background: linear-gradient(
        120deg,
        #0b1930,
        #142b4e 70%,
        #243e60
    );
    color: #ffffff;
}

.contact-hero-inner {
    padding-top: 85px;
    padding-bottom: 90px;
}

.contact-eyebrow {
    color: #ffc078;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.contact-hero h1 {
    max-width: 850px;
    margin: 22px 0;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.2;
    letter-spacing: -1px;
}

.contact-hero h1 span {
    color: #ffc078;
}

.contact-hero p {
    max-width: 650px;
    color: #dae5f1;
    line-height: 1.9;
    margin-bottom: 30px;
}

/* CONTACT LAYOUT */

.contact-section {
    padding: 90px 0 110px;
    background: #f7f9fc;
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 65px;
    align-items: start;
    min-width: 0;
}

/* LEFT COLUMN */

.contact-info h2 {
    color: #142b4e;
    font-size: clamp(29px, 3vw, 40px);
    line-height: 1.3;
    margin: 16px 0 22px;
}

.contact-info > p {
    color: #69758a;
    line-height: 1.9;
}

.contact-info-divider {
    width: 70px;
    height: 3px;
    margin: 35px 0;
    background: #f68423;
}

.contact-info h3 {
    color: #142b4e;
    margin-bottom: 25px;
}

.contact-step {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 30px;
}

.contact-step-number {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background: #fff0e1;
    color: #a94708;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
}

.contact-step h4 {
    color: #142b4e;
    margin: 0 0 5px;
    font-size: 16px;
}

.contact-step p {
    color: #69758a;
    margin: 0;
    line-height: 1.8;
    font-size: 14px;
}

/* FORM CARD */

.contact-form-card {
    min-width: 0;
    padding: 42px;
    background: white;
    border: 1px solid #e3e9f1;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(20,43,78,.06);
    scroll-margin-top: 110px;
}

.contact-form-heading {
    margin-bottom: 30px;
}

.contact-form-heading h2 {
    color: #142b4e;
    font-size: clamp(26px, 3vw, 34px);
    margin: 12px 0;
}

.contact-form-heading p {
    color: #69758a;
    margin-bottom: 0;
}

/* FORM GRID */

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

.contact-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-field--full {
    grid-column: 1 / -1;
}

.contact-field label {
    color: #142b4e;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 9px;
}

.required-star {
    color: #c04b10;
    margin-left: 3px;
}

.inquiry-control {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 49px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    color: #142b4e;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.inquiry-control::placeholder {
    color: #8793a5;
}

.inquiry-control:focus {
    outline: none;
    border-color: #d96912;
    box-shadow: 0 0 0 3px rgba(246,132,35,.16);
}

textarea.inquiry-control {
    min-height: 150px;
    resize: vertical;
}

.contact-field--invalid .inquiry-control {
    border-color: #c74635;
}

.contact-field-error {
    color: #a52d21;
    font-size: 12px;
    margin: 7px 0 0;
}

.contact-form-note {
    color: #69758a;
    font-size: 12px;
    line-height: 1.8;
    margin: 24px 0;
}

/* SUBMIT BUTTON */

.contact-submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 22px;
    background: #f68423;
    color: #0b1930;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background .2s ease,
        transform .2s ease;
}

.contact-submit-btn:hover {
    background: #e67012;
    transform: translateY(-2px);
}

.contact-submit-btn:focus-visible {
    outline: 3px solid #142b4e;
    outline-offset: 3px;
}

/* RESPONSIVE */

@media (max-width: 950px) {

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

@media (max-width: 600px) {

    .contact-hero-inner {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .contact-section {
        padding: 55px 0 70px;
    }

    .contact-form-card {
        padding: 26px 20px;
    }

    .contact-fields {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-field--full {
        grid-column: auto;
    }

    .contact-submit-btn {
        font-size: 14px;
    }
}

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

    .contact-submit-btn,
    .inquiry-control {
        transition: none;
    }
}


/* ==========================================
   SDK SWEETALERT2 CUSTOM STYLE
========================================== */

.sdk-swal-popup {
    border-radius: 20px !important;
    padding: 30px !important;
    font-family: Arial, Helvetica, sans-serif;
}

.sdk-swal-popup .swal2-title {
    color: #142B4E;
    font-size: 25px;
    font-weight: 800;
}

.sdk-swal-popup .swal2-html-container {
    color: #69758A;
    font-size: 15px;
    line-height: 1.8;
}

.sdk-swal-confirm {
    background: #F68423;
    color: #0B1930;
    border: none;
    border-radius: 9px;
    padding: 13px 38px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sdk-swal-confirm:hover {
    background: #E67012;
}

.sdk-swal-confirm:focus-visible {
    outline: 3px solid #142B4E;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .sdk-swal-popup {
        padding: 22px !important;
    }

    .sdk-swal-popup .swal2-title {
        font-size: 21px;
    }
}


/* ==========================================
   SDK - DYNAMIC PROJECT CMS
   TAHAP 4.6B.2
========================================== */

/* CATEGORY FILTER */

.sdk-project-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.sdk-filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1px solid #dce3ec;
    border-radius: 9px;
    background: #ffffff;
    color: #142b4e;
    font-size: 13px;
    font-weight: 700;
    transition: all .2s ease;
}

.sdk-filter-link:hover,
.sdk-filter-link.is-active {
    background: #142b4e;
    border-color: #142b4e;
    color: #ffffff;
}

/* PROJECT GRID */

.sdk-project-grid {
    display: grid;
    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );
    gap: 26px;
}

.sdk-project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e4eaf1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20,43,78,.04);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.sdk-project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(20,43,78,.12);
}

.sdk-project-image-link {
    display: block;
    overflow: hidden;
    background: #e9eef5;
}

.sdk-project-image {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .3s ease;
}

.sdk-project-card:hover .sdk-project-image {
    transform: scale(1.035);
}

/* PROJECT PLACEHOLDER */

.sdk-project-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 230px;
    background: linear-gradient(
        130deg,
        #0b1930,
        #233f65
    );
}

.sdk-project-placeholder span {
    color: #f68423;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 3px;
}

.sdk-project-placeholder small {
    color: #dbe5f1;
    font-size: 10px;
    letter-spacing: 3px;
}

/* PROJECT CONTENT */

.sdk-project-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

.sdk-project-category {
    display: inline-block;
    color: #b44d09;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sdk-project-card-body h3 {
    color: #142b4e;
    font-size: 21px;
    line-height: 1.4;
    margin: 15px 0 12px;
}

.sdk-project-card-body h3 a:hover {
    color: #b44d09;
}

.sdk-project-card-body p {
    color: #69758a;
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 25px;
}

.sdk-project-readmore {
    display: inline-block;
    margin-top: auto;
    color: #a94708;
    font-size: 14px;
    font-weight: 800;
}

.sdk-project-readmore:hover {
    color: #142b4e;
}

/* FEATURED PROJECTS */

.sdk-featured-section {
    padding-top: 75px;
}

.sdk-featured-actions {
    text-align: center;
    margin-top: 40px;
}

.sdk-all-projects-link {
    display: inline-block;
    padding: 13px 25px;
    background: #142b4e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 9px;
}

.sdk-all-projects-link:hover {
    background: #233f65;
    color: #ffffff;
}

/* ==========================================
   PROJECT DETAIL PAGE
========================================== */

.sdk-project-detail-hero {
    padding: 85px 0;
    background: linear-gradient(
        120deg,
        #0b1930,
        #1c3a60
    );
    color: #ffffff;
}

.sdk-project-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 35px;
    color: #cbd7e6;
    font-size: 13px;
}

.sdk-project-breadcrumb a:hover {
    color: #ffc078;
}

.sdk-project-detail-category {
    color: #ffc078;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sdk-project-detail-hero h1 {
    max-width: 950px;
    margin: 20px 0;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.2;
}

.sdk-project-detail-hero p {
    max-width: 750px;
    color: #dbe5f1;
    line-height: 1.9;
}

/* DETAIL LAYOUT */

.sdk-project-detail-section {
    padding-top: 80px;
    padding-bottom: 85px;
}

.sdk-project-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 45px;
    align-items: start;
}

.sdk-project-detail-main {
    min-width: 0;
}

.sdk-project-detail-cover {
    display: block;
    width: 100%;
    max-height: 470px;
    object-fit: cover;
    border-radius: 18px;
}

.sdk-project-detail-cover-placeholder {
    min-height: 350px;
    border-radius: 18px;
}

.sdk-project-detail-description {
    margin-top: 42px;
}

.sdk-project-detail-description h2 {
    font-size: 32px;
    color: #142b4e;
    margin: 15px 0;
}

.sdk-project-description-text {
    color: #526178;
    line-height: 2;
}

.sdk-project-description-text p {
    margin-bottom: 18px;
}

/* DETAIL SIDEBAR */

.sdk-project-detail-sidebar {
    display: grid;
    gap: 25px;
}

.sdk-project-info-card {
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e4eaf1;
    border-radius: 18px;
}

.sdk-project-info-card h3 {
    color: #142b4e;
    margin: 0 0 25px;
    font-size: 21px;
}

.sdk-project-info-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 17px 0;
    border-bottom: 1px solid #edf1f5;
}

.sdk-project-info-row:last-child {
    border-bottom: none;
}

.sdk-project-info-row span {
    color: #69758a;
    font-size: 12px;
}

.sdk-project-info-row strong {
    color: #142b4e;
    font-size: 14px;
}

.sdk-project-contact-card {
    padding: 30px;
    background: #142b4e;
    border-radius: 18px;
    color: #ffffff;
}

.sdk-project-contact-card h3 {
    color: #ffffff;
    font-size: 22px;
}

.sdk-project-contact-card p {
    color: #dbe5f1;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* RELATED PROJECTS */

.sdk-related-projects {
    padding: 80px 0;
    background: #edf3f8;
}

.sdk-project-back {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
    .sdk-project-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

    .sdk-project-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .sdk-project-grid {
        grid-template-columns: 1fr;
    }

    .sdk-project-detail-hero {
        padding: 65px 0;
    }

    .sdk-project-detail-section {
        padding-top: 45px;
        padding-bottom: 55px;
    }

    .sdk-project-card-body {
        padding: 24px;
    }

    .sdk-project-image {
        height: 210px;
    }

    .sdk-project-filters {
        gap: 8px;
    }

    .sdk-filter-link {
        padding: 9px 14px;
        font-size: 12px;
    }

    .sdk-related-projects {
        padding: 55px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sdk-project-card,
    .sdk-project-image {
        transition: none;
    }
}


/* ========================================
   SDK - DYNAMIC COMPANY PROFILE
   TAHAP 4.7A
======================================== */

.about-overview-body p {
    color: #69758A;
    line-height: 1.95;
    margin-bottom: 20px;
}

.about-overview-body p:last-child {
    margin-bottom: 0;
}

/* TWO TONE BRAND - NAVY & ORANGE */

.brand-sha {
    color: #142B4E;
}

.brand-tra {
    color: #F68423;
}

/* ======================================
   ABOUT PAGE UI REFINEMENT
====================================== */

.about-overview-copy h2 {
    margin-top: 15px;
    margin-bottom: 24px;
}

.about-overview-body p {
    margin-top: 0;
    margin-bottom: 18px;
    line-height: 1.85;
}

.about-identity-card {
    padding: 38px;
}

.about-identity-card h3 {
    line-height: 1.35;
}

.about-section-heading {
    margin-bottom: 38px;
}

.about-vision-card {
    height: 100%;
}

.about-value-card {
    height: 100%;
}


/* =========================================
   SDK GLOBAL COMPANY FOOTER
   TAHAP 4.7B
========================================= */

.sdk-footer {
    background: #0B1930;
    color: #D7E2EF;
    padding: 70px 0 0;
}

.sdk-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 0.8fr;
    gap: 40px;
    padding-bottom: 55px;
}

.sdk-footer-grid > div {
    min-width: 0;
}

.sdk-footer h3 {
    color: #FFFFFF;
    font-size: 17px;
    margin: 0 0 22px;
}

.sdk-footer-company h3 {
    font-size: 21px;
}

.sdk-footer-company p,
.sdk-footer-contact p {
    color: #B9C9DB;
    line-height: 1.85;
    font-size: 14px;
    margin: 0;
}

.sdk-footer-links,
.sdk-footer-contact,
.sdk-footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.sdk-footer-links h3,
.sdk-footer-contact h3,
.sdk-footer-social h3 {
    margin-bottom: 8px;
}

.sdk-footer a {
    color: #D7E2EF;
    font-size: 14px;
    line-height: 1.7;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.sdk-footer a:hover {
    color: #FFAC65;
}

.sdk-footer a:focus-visible {
    outline: 2px solid #FFAC65;
    outline-offset: 4px;
}

.sdk-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 25px;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.sdk-footer-bottom p {
    color: #B9C9DB;
    font-size: 12px;
    margin: 0;
}

/* TABLET */

@media (max-width: 1000px) {

    .sdk-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px;
    }
}

/* MOBILE */

@media (max-width: 600px) {

    .sdk-footer {
        padding-top: 50px;
    }

    .sdk-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 40px;
    }

    .sdk-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================
   SDK DYNAMIC CONTACT DETAILS
========================================= */

.sdk-contact-details {
    margin-top: 45px;
    padding-top: 32px;
    border-top: 1px solid #DEE5EE;
}

.sdk-contact-details h3 {
    color: #142B4E;
    font-size: 24px;
    margin: 12px 0 28px;
}

.sdk-contact-detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 25px;
}

.sdk-contact-detail-item strong {
    color: #142B4E;
    font-size: 14px;
}

.sdk-contact-detail-item p {
    color: #69758A;
    font-size: 14px;
    line-height: 1.85;
    margin: 0;
}

.sdk-contact-detail-item a {
    color: #A94708;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.sdk-contact-detail-item a:hover {
    color: #142B4E;
}

.sdk-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    margin-top: 8px;
    background: #142B4E;
    color: #FFFFFF;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.sdk-whatsapp-btn:hover {
    background: #243E60;
    color: #FFFFFF;
}

.sdk-maps-link {
    display: block;
    margin-top: 20px;
    color: #A94708;
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================
   SDK - GLOBAL HERO STANDARDIZATION
   Corporate Navy & Orange
========================================== */

:root {
    --sdk-hero-min-height: 560px;
    --sdk-hero-padding: 80px;
}

/* ==========================================
   HOME HERO
========================================== */

.hero.hero-modern {
    min-height: var(--sdk-hero-min-height);
    border-radius: 24px;
    align-items: center;
}

/* ==========================================
   INTERNAL PAGE HEROES
========================================== */

/* Services and About */
.services-hero-layout,
.about-hero-grid {
    min-height: var(--sdk-hero-min-height);
    padding-top: var(--sdk-hero-padding);
    padding-bottom: var(--sdk-hero-padding);
    align-items: center;
}

/* Projects and Contact */
.portfolio-hero-inner,
.contact-hero-inner {
    min-height: var(--sdk-hero-min-height);
    padding-top: var(--sdk-hero-padding);
    padding-bottom: var(--sdk-hero-padding);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Uniform hero heading sizing */
.services-hero-copy h1,
.about-hero-content h1,
.portfolio-hero h1,
.contact-hero h1 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.2;
    letter-spacing: -1px;
}

/* ==========================================
   TABLET & MOBILE
========================================== */

@media (max-width: 900px) {

    .hero.hero-modern,
    .services-hero-layout,
    .about-hero-grid,
    .portfolio-hero-inner,
    .contact-hero-inner {
        min-height: auto;
    }

    .services-hero-layout,
    .about-hero-grid,
    .portfolio-hero-inner,
    .contact-hero-inner {
        padding-top: 65px;
        padding-bottom: 65px;
    }
}

@media (max-width: 600px) {

    .hero.hero-modern {
        border-radius: 18px;
    }

    .services-hero-layout,
    .about-hero-grid,
    .portfolio-hero-inner,
    .contact-hero-inner {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .services-hero-copy h1,
    .about-hero-content h1,
    .portfolio-hero h1,
    .contact-hero h1 {
        font-size: clamp(32px, 8vw, 40px);
        letter-spacing: -0.5px;
    }
}