/* =========================================================
   THE KUSHALJI GROUP
   FINAL UNIVERSAL RESPONSIVE CSS
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root{
    --bg:#070b10;
    --bg2:#0c1219;
    --panel:#111923;
    --panel2:#151f2b;

    --text:#f3f6f8;
    --muted:#9caab5;

    --line:rgba(255,255,255,.10);

    --gold:#d8ad62;
    --gold2:#f0cf8a;

    --green:#65b99a;
    --accent:#6f7cff;

    --shadow:0 25px 70px rgba(0,0,0,.42);
}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

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

html{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;

    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    width:100%;
    max-width:100%;
    min-width:0;

    margin:0;
    padding:0;

    font-family:Inter,Arial,sans-serif;

    color:var(--text);
    background:var(--bg);

    line-height:1.7;

    overflow-x:hidden;
}

body:before{
    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(111,124,255,.06),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(216,173,98,.045),
            transparent 30%
        );

    z-index:-1;
}


/* =========================================================
   GLOBAL ELEMENTS
   ========================================================= */

img,
video,
iframe,
svg{
    max-width:100%;
}

img{
    height:auto;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea,
select{
    font:inherit;
    max-width:100%;
}

button{
    cursor:pointer;
}

p,
li,
div,
span{
    overflow-wrap:break-word;
    word-wrap:break-word;
}


/* =========================================================
   GLOBAL TEXT JUSTIFICATION
   ========================================================= */

/*
   Normal content text is justified.
   Headings/buttons/navigation remain centered/normal.
*/

p,
li,
.section-intro,
.hero-text,
.values article p,
.business-card p,
.flip-back p,
.service-grid article p,
.detail p,
.detail aside p,
.director-content p:not(.director-role),
.contact-box p:not(.eyebrow),
.footer-grid p{
    text-align:justify;
    text-justify:inter-word;
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6{
    overflow-wrap:break-word;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container{
    width:min(1160px,92%);
    margin-left:auto;
    margin-right:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:sticky;
    top:0;

    z-index:1000;

    background:rgba(7,11,16,.78);

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

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

.nav-wrap{
    min-height:78px;

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

    gap:25px;

    position:relative;
}

.logo{
    display:inline-flex;

    align-items:center;

    gap:12px;

    font-weight:900;
    letter-spacing:.07em;

    font-size:13px;

    flex-shrink:0;
}

.logo img{
    width:48px;
    height:48px;

    object-fit:contain;

    border-radius:12px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35);

    transition:.4s;
}

.logo:hover img{
    transform:
        translateY(-3px)
        rotateY(12deg)
        scale(1.05);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav{
    display:flex;

    align-items:center;

    gap:25px;

    font-weight:700;
    font-size:13px;
}

.nav a{
    color:#c8d0d6;

    transition:.25s;

    white-space:nowrap;
}

.nav a:hover{
    color:var(--gold2);
    transform:translateY(-1px);
}

.menu-btn{
    display:none;

    background:transparent;

    color:#fff;

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

    border-radius:10px;

    padding:8px 11px;

    font-size:20px;
}


/* =========================================================
   HERO BACKGROUND
   ========================================================= */

.hero-bg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background-image:
        linear-gradient(
            116deg,
            rgba(5,8,12,.45),
            rgba(5,8,12,.88)
        ),
        url("../assets/hero-background_2.jpg");

    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;

    background-color:#0d0f19;

    z-index:0;

    pointer-events:none;
}


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

.hero{
    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    display:flex;
    align-items:stretch;
}

.hero-content{
    position:relative;

    z-index:2;

    width:100%;

    padding:
        clamp(150px,22vh,275px)
        0
        clamp(80px,12vh,140px);

    text-align:center;
}

.eyebrow{
    color:var(--gold2);

    font-size:11px;

    font-weight:900;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.hero h1{
    font-size:clamp(50px,8vw,94px);

    line-height:.98;

    letter-spacing:-.065em;

    margin:18px 0;

    text-align:center;
}

.hero h1 em{
    display:block;

    color:#fff;

    font-family:Georgia,serif;

    font-weight:500;

    text-shadow:
        0 10px 45px rgba(0,0,0,.5);
}

.hero-text{
    width:100%;
    max-width:760px;

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

    color:#d7e0e5;

    font-size:18px;

    text-align:center;

    line-height:1.7;
}

.actions{
    display:flex;

    gap:12px;

    justify-content:center;

    flex-wrap:wrap;

    margin-top:32px;
}

.btn{
    padding:13px 24px;

    border-radius:999px;

    font-weight:800;

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

    transition:.3s;
}

.btn-primary{
    background:
        linear-gradient(
            135deg,
            #d8ad62,
            #9f7332
        );

    color:#080b0e;

    border:0;

    box-shadow:
        0 12px 30px rgba(216,173,98,.2);
}

.btn-light{
    background:rgba(255,255,255,.07);

    color:#fff;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 14px 35px rgba(0,0,0,.35);
}

.hero-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(50px);

    opacity:.25;

    pointer-events:none;

    z-index:1;
}

.glow-one{
    width:280px;
    height:280px;

    background:#5260ff;

    left:-100px;
    top:20%;
}

.glow-two{
    width:250px;
    height:250px;

    background:#d8ad62;

    right:-80px;
    bottom:10%;
}


/* =========================================================
   SECTIONS
   ========================================================= */

section{
    width:100%;

    padding:
        clamp(70px,8vw,105px)
        0;

    min-width:0;
}

h2{
    font-size:clamp(34px,5vw,58px);

    line-height:1.05;

    letter-spacing:-.045em;

    margin:8px 0 22px;

    text-align:left;
}

h3{
    font-size:22px;

    line-height:1.2;

    margin-bottom:8px;
}

p{
    color:var(--muted);

    margin-top:0;
}


/* =========================================================
   SPLIT
   ========================================================= */

.split{
    display:grid;

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

    gap:60px;

    align-items:center;
}


/* =========================================================
   FEATURE CARD
   ========================================================= */

.feature-card{
    background:
        linear-gradient(
            145deg,
            #121b25,
            #0b1118
        );

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

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--shadow);
}

.feature-card img{
    width:100%;

    display:block;

    filter:brightness(.8);
}

.quote{
    padding:25px 28px;

    font:
        italic 25px Georgia,serif;

    color:var(--gold2);
}


/* =========================================================
   VALUES
   ========================================================= */

.values{
    display:grid;

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

    gap:20px;

    margin-top:30px;
}

.values article{
    padding:30px;

    background:
        linear-gradient(
            145deg,
            #121b25,
            #0c131b
        );

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

    border-radius:20px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.2);
}

.values span,
.service-grid b{
    color:var(--gold2);

    font-weight:900;
}

.values article p{
    margin-bottom:0;
}


/* =========================================================
   SOFT SECTION
   ========================================================= */

.soft{
    background:
        linear-gradient(
            180deg,
            #0a1016,
            #0d151d
        );
}

.section-intro{
    width:100%;
    max-width:1134px;
}


/* =========================================================
   BUSINESS GRID
   ========================================================= */

.business-grid{
    display:grid;

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

    gap:24px;

    margin-top:38px;
}


/* =========================================================
   3D FLIP CARDS
   ========================================================= */

.flip-container{
    width:100%;

    height:445px;

    perspective:1400px;

    cursor:pointer;

    outline:none;
}

.flip-card{
    position:relative;

    width:100%;
    height:100%;

    transition:
        transform .75s
        cubic-bezier(.2,.7,.2,1);

    transform-style:preserve-3d;
}

.flip-container.active .flip-card{
    transform:rotateY(180deg);
}


/* Both sides */

.business-card{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.11);

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            #141e29,
            #0d141c
        );

    box-shadow:
        0 24px 65px rgba(0,0,0,.42);

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.business-card:after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.09),
            transparent 28%,
            transparent 70%,
            rgba(216,173,98,.04)
        );

    z-index:2;
}


/* Front */

.flip-front{
    transform:rotateY(0deg);

    z-index:1;
}


/* Back */

.flip-back{
    transform:rotateY(180deg);

    padding:32px;

    display:flex;

    align-items:flex-end;

    justify-content:flex-start;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(111,124,255,.18),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #182332,
            #0a1017
        );

    z-index:3;
}

.flip-back > *{
    position:relative;
    z-index:4;
}

.flip-back h3{
    margin:0 0 10px;

    font-size:clamp(20px,2.2vw,27px);

    line-height:1.2;

    color:#fff;
}

.flip-back p{
    margin:8px 0;

    font-size:14px;

    line-height:1.6;

    color:var(--muted);

    text-align:justify;
}

.flip-back .mini-tags{
    margin:15px 0;
}

.flip-back .back-link{
    margin-top:8px;
}


/* Flip hover/focus */

.flip-container:hover .flip-front{
    box-shadow:
        0 28px 80px rgba(0,0,0,.55);
}

.flip-container:focus-visible{
    outline:
        2px solid var(--gold2);

    outline-offset:6px;

    border-radius:28px;
}


/* =========================================================
   BUSINESS CARD FRONT
   ========================================================= */

.business-card img{
    width:100%;

    height:230px;

    display:block;

    object-fit:cover;

    background:#101820;

    filter:
        brightness(.78)
        saturate(.8);
}

.business-card > div{
    padding:24px 26px;
}

.business-card small,
.director-role{
    color:var(--gold2);

    font-weight:900;

    letter-spacing:.14em;

    font-size:11px;
}

.business-card p{
    margin:8px 0;

    line-height:1.65;
}

.discover,
.back-link,
.text-link{
    display:inline-block;

    color:var(--gold2);

    font-weight:900;

    margin-top:8px;
}

.back-link{
    border:
        1px solid
        rgba(216,173,98,.3);

    padding:9px 14px;

    border-radius:999px;
}

.mini-tags{
    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin:18px 0;
}

.mini-tags span{
    font-size:11px;

    color:#d4dce1;

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

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

    padding:6px 9px;

    border-radius:999px;
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-grid{
    display:grid;

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

    gap:20px;
}

.service-grid article{
    background:
        linear-gradient(
            145deg,
            #121b25,
            #0b1219
        );

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

    border-radius:20px;

    padding:30px;

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

.service-grid article p{
    margin-bottom:0;
}


/* =========================================================
   DETAIL SECTIONS
   ========================================================= */

.detail-section{
    border-top:1px solid var(--line);
}

.detail{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);

    gap:60px;
}

.label{
    color:var(--green)!important;

    font-weight:800;
}

.detail aside{
    background:
        linear-gradient(
            145deg,
            #17221d,
            #0e1714
        );

    color:#fff;

    padding:32px;

    border:
        1px solid
        rgba(101,185,154,.18);

    border-radius:24px;

    align-self:start;

    box-shadow:var(--shadow);
}

.detail aside p{
    color:#aebdb7;
}

.detail aside a{
    color:var(--gold2);
}

.detail ul{
    columns:2;

    padding-left:20px;
}

.tags{
    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.tags span{
    padding:7px 12px;

    background:
        rgba(101,185,154,.08);

    border:
        1px solid
        rgba(101,185,154,.18);

    border-radius:999px;

    font-size:13px;

    color:#9dd8c0;

    font-weight:700;
}


/* =========================================================
   DIRECTORS
   ========================================================= */

.directors-section{
    background:#080d13;
}

.directors-grid{
    display:grid;

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

    gap:35px;

    margin-top:40px;

    align-items:stretch;
}

.director-card{
    width:100%;

    min-width:0;

    overflow:hidden;

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

    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            #141e28,
            #0c131a
        );

    box-shadow:var(--shadow);

    transition:.4s;
}

.director-card:hover{
    transform:translateY(-5px);
}


/* Photo */

.director-photo-wrap{
    position:relative;

    width:100%;

    display:flex;

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

    padding:25px 15px 10px;

    overflow:hidden;
}

.director-photo-wrap:after{
    /*
       Original overlay removed from photo.
       It was causing unwanted overlay/line behaviour.
    */
    content:none;
}

.director-photo-wrap img{
    position:relative;

    z-index:1;

    width:130px;
    height:170px;

    object-fit:cover;

    object-position:center top;

    filter:
        grayscale(100%)
        contrast(1.08);

    border:
        4px solid
        #fff;

    border-radius:5px;

    box-shadow:
        0 8px 22px rgba(0,0,0,.20),
        0 0 0 1px rgba(0,0,0,.08);

    transition:.35s ease;
}

.director-card:hover
.director-photo-wrap img{
    transform:translateY(-4px);

    filter:
        grayscale(100%)
        contrast(1.15);

    box-shadow:
        0 14px 30px rgba(0,0,0,.25);
}


/* Director content */

.director-content{
    position:relative;

    z-index:2;

    display:block;

    clear:both;

    width:100%;

    margin:0;

    padding:20px 26px 26px;

    box-sizing:border-box;

    text-align:left;
}

.director-number{
    color:var(--gold2);

    font-size:11px;

    font-weight:900;

    letter-spacing:.15em;
}

.director-content h3{
    font-size:27px;

    margin:
        5px 0 8px;

    letter-spacing:-.02em;

    line-height:1.3;
}

.director-role{
    display:block;

    letter-spacing:.08em;

    margin-bottom:12px;
}

.director-content p{
    width:100%;

    margin:
        0 0 14px;

    padding:0;

    font-size:14px;

    line-height:1.7;

    text-align:justify;

    box-sizing:border-box;
}

.director-content .text-link{
    display:inline-flex;

    align-items:center;

    gap:6px;

    transition:.25s;
}

.director-content .text-link:hover{
    transform:translateX(5px);
}


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

.contact-section{
    background:
        linear-gradient(
            135deg,
            #121c17,
            #090e12
        );

    color:#fff;
}

.contact-box{
    display:grid;

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

    gap:40px;

    align-items:center;
}

.contact-box p:not(.eyebrow){
    color:#aebbb5;
}

.contact-links{
    display:grid;

    gap:14px;
}

.contact-links a{
    background:
        rgba(255,255,255,.06);

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

    padding:16px 20px;

    border-radius:14px;

    font-weight:800;

    color:#fff;

    transition:.25s;
}

.contact-links a:hover{
    border-color:
        rgba(216,173,98,.4);

    transform:translateX(5px);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    background:#05080c;

    color:#9ba8b0;

    padding:
        55px 0
        20px;

    overflow:hidden;
}

.footer-grid{
    display:grid;

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

    gap:40px;
}

.footer-logo{
    color:#fff;

    font-weight:900;

    letter-spacing:.06em;

    display:flex;

    align-items:center;

    gap:9px;
}

.footer-logo img{
    width:35px;
    height:35px;

    object-fit:contain;

    border-radius:8px;
}

.footer-grid h4{
    color:#fff;

    margin:
        0 0 12px;
}

.footer-grid a{
    display:block;

    margin:7px 0;

    color:#9ba8b0;

    font-size:14px;
}

.footer-grid p{
    font-size:14px;
}

.copyright{
    border-top:1px solid var(--line);

    margin-top:40px;

    padding-top:18px;

    font-size:12px;

    color:#65737c;

    text-align:center;
}


/* =========================================================
   ENQUIRY SYSTEM
   ========================================================= */


/* Floating button */

.enquiry-toggle{
    position:fixed!important;

    top:50%!important;
    left:0!important;

    right:auto!important;
    bottom:auto!important;

    transform:
        translateY(-50%)!important;

    z-index:2147483647!important;

    display:flex!important;

    align-items:center!important;
    justify-content:center!important;

    width:52px!important;
    height:145px!important;

    padding:0!important;
    margin:0!important;

    border:
        1px solid
        #c9a227!important;

    border-left:0!important;

    border-radius:
        0 8px 8px 0!important;

    background:#111!important;

    color:#c9a227!important;

    cursor:pointer!important;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.35)!important;

    transition:.25s ease!important;
}

.enquiry-toggle:hover{
    width:56px!important;

    background:#d8b33b!important;

    color:#111!important;
}

.enquiry-toggle span{
    display:block!important;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    white-space:nowrap!important;

    writing-mode:vertical-rl;

    transform:rotate(180deg);
}


/* Overlay */

.enquiry-overlay{
    position:fixed;

    inset:0;

    width:100%;
    height:100vh;
    height:100dvh;

    background:
        rgba(0,0,0,.68);

    z-index:2147483640;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.enquiry-overlay.active{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* Panel */

.enquiry-panel{
    position:fixed;

    left:0;
    top:0;

    width:470px;

    max-width:90vw;

    height:100vh;
    height:100dvh;

    box-sizing:border-box;

    padding:35px;

    background:#0d0d0d;

    color:#fff;

    z-index:2147483641;

    overflow-x:hidden;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    transform:translateX(-105%);

    visibility:hidden;

    transition:
        transform .4s ease,
        visibility .4s ease;

    box-shadow:
        8px 0 35px
        rgba(0,0,0,.55);
}

.enquiry-panel.active{
    transform:translateX(0);

    visibility:visible;
}


/* Close */

.enquiry-close{
    position:absolute;

    right:18px;
    top:15px;

    width:38px;
    height:38px;

    border:
        1px solid
        #444;

    border-radius:50%;

    background:transparent;

    color:#fff;

    font-size:27px;

    line-height:30px;

    cursor:pointer;

    transition:.3s ease;

    z-index:20;
}

.enquiry-close:hover{
    color:#c9a227;

    border-color:#c9a227;

    transform:rotate(90deg);
}


/* Header */

.enquiry-panel-header{
    padding:
        10px
        45px
        25px
        0;

    margin-bottom:25px;

    border-bottom:
        1px solid
        #292929;
}

.enquiry-panel-header span{
    font-size:10px;

    letter-spacing:2px;

    color:#c9a227;

    font-weight:600;
}

.enquiry-panel-header h2{
    margin:10px 0;

    font-size:29px;

    line-height:1.2;

    color:#fff;

    text-align:left;
}

.enquiry-panel-header p{
    margin:0;

    color:#999;

    font-size:13px;

    line-height:1.7;

    text-align:justify;
}


/* Form */

.enquiry-field{
    margin-bottom:18px;
}

.enquiry-field label{
    display:block;

    margin-bottom:7px;

    color:#ddd;

    font-size:13px;

    font-weight:500;
}

.enquiry-field label span{
    color:#c9a227;
}


/* Inputs */

.enquiry-field input,
.enquiry-field select,
.enquiry-field textarea{
    width:100%;

    box-sizing:border-box;

    padding:12px 13px;

    border:
        1px solid
        #333;

    border-radius:4px;

    background:#070707;

    color:#fff;

    font-family:inherit;

    font-size:14px;

    outline:none;

    transition:.3s ease;
}

.enquiry-field input::placeholder,
.enquiry-field textarea::placeholder{
    color:#666;
}

.enquiry-field input:focus,
.enquiry-field select:focus,
.enquiry-field textarea:focus{
    border-color:#c9a227;

    box-shadow:
        0 0 0 1px
        rgba(201,162,39,.12);
}

.enquiry-field select{
    cursor:pointer;
}

.enquiry-field textarea{
    min-height:115px;

    resize:vertical;
}

.enquiry-field input[type="file"]{
    padding:9px;

    color:#999;

    cursor:pointer;
}

.enquiry-field small{
    display:block;

    margin-top:6px;

    color:#666;

    font-size:10px;
}


/* Submit */

.enquiry-submit{
    width:100%;

    padding:14px;

    border:
        1px solid
        #c9a227;

    border-radius:3px;

    background:#c9a227;

    color:#080808;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    cursor:pointer;

    transition:.3s ease;
}

.enquiry-submit span{
    margin-left:8px;
}

.enquiry-submit:hover{
    background:transparent;

    color:#c9a227;
}


/* Admin */

.enquiry-admin-control{
    position:fixed;

    right:20px;
    bottom:20px;

    z-index:2147483642;

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 12px;

    border:
        1px solid
        #333;

    border-radius:20px;

    background:#111;

    color:#aaa;

    font-size:10px;

    letter-spacing:1px;

    cursor:pointer;

    opacity:.55;

    transition:.3s ease;
}

.enquiry-admin-control:hover{
    opacity:1;

    border-color:#c9a227;

    color:#fff;
}

#enquiryStatusDot{
    width:7px;
    height:7px;

    display:inline-block;

    border-radius:50%;

    background:#777;
}

#enquiryStatusDot.on{
    background:#32c766;

    box-shadow:
        0 0 7px
        rgba(50,199,102,.6);
}

#enquiryStatusDot.off{
    background:#d64545;

    box-shadow:
        0 0 7px
        rgba(214,69,69,.5);
}


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1100px){

    .container{
        width:92%;
    }

    .business-grid,
    .service-grid,
    .directors-grid{
        gap:20px;
    }

    .split{
        gap:40px;
    }

    .detail{
        gap:40px;
    }
}


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

@media (max-width:900px){

    .nav{
        display:none;
    }

    .menu-btn{
        display:block;
    }

    .nav-wrap.open .nav{
        display:flex;

        position:absolute;

        left:0;
        right:0;

        top:78px;

        background:
            rgba(7,11,16,.98);

        padding:18px 4%;

        flex-direction:column;

        align-items:flex-start;

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

        gap:16px;
    }

    .nav-wrap.open .nav a{
        width:100%;
    }


    /* Main grids */

    .split,
    .business-grid,
    .service-grid,
    .detail,
    .contact-box,
    .footer-grid,
    .directors-grid{
        grid-template-columns:1fr;
    }

    .values{
        grid-template-columns:1fr;
    }

    .detail ul{
        columns:1;
    }


    /* Hero */

    .hero{
        min-height:78vh;
    }

    .hero-content{
        padding:
            100px
            0
            80px;
    }


    /* Flip */

    .flip-container{
        height:430px;
    }


    /* Director */

    .directors-grid{
        max-width:650px;

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


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

@media (max-width:768px){

    body{
        font-size:15px;
    }

    section{
        padding:
            70px
            0;
    }

    h2{
        font-size:
            clamp(
                31px,
                7vw,
                48px
            );
    }


    .container{
        width:
            calc(100% - 32px);
    }


    /* Hero */

    .hero{
        min-height:100vh;
        min-height:100svh;
    }

    .hero-bg{
        background-position:center center;
        background-size:cover;
    }

    .hero-content{
        padding:
            120px
            0
            70px;
    }

    .hero h1{
        font-size:
            clamp(
                42px,
                10vw,
                65px
            );
    }

    .hero-text{
        font-size:16px;
    }


    /* Business */

    .business-grid,
    .service-grid{
        width:100%;
    }


    /* Director */

    .director-photo-wrap{
        padding:
            22px
            12px
            8px;
    }

    .director-photo-wrap img{
        width:120px;
        height:158px;
    }

    .director-content{
        margin:0;
        padding:
            18px
            20px
            24px;
    }

    .director-content p{
        font-size:.95rem;

        line-height:1.65;

        text-align:justify;
    }


    /* Enquiry */

    .enquiry-toggle{
        width:46px!important;
        height:125px!important;
    }

    .enquiry-panel{
        width:90vw;

        max-width:90vw;

        height:100vh;
        height:100dvh;

        padding:
            max(55px,env(safe-area-inset-top))
            20px
            max(25px,env(safe-area-inset-bottom))
            20px;
    }

    .enquiry-panel-header{
        padding-right:45px;
    }

    .enquiry-panel-header h2{
        font-size:25px;
    }

    .enquiry-close{
        top:10px;
        right:10px;

        width:40px;
        height:40px;
    }
}


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

@media (max-width:600px){

    .container{
        width:
            calc(100% - 28px);
    }


    /* Logo */

    .logo span{
        display:none;
    }


    /* Hero */

    .hero{
        min-height:100svh;
    }

    .hero-bg{
        background-position:center center;
        background-size:cover;
    }

    .hero-content{
        padding:
            110px
            0
            60px;
    }

    .hero h1{
        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        letter-spacing:-.045em;
    }

    .hero-text{
        font-size:15px;

        text-align:center;
    }

    .actions{
        margin-top:25px;
    }

    .btn{
        padding:
            12px
            20px;
    }


    /* Section */

    section{
        padding:
            60px
            0;
    }


    /* Flip card */

    .flip-container{
        height:410px;
    }

    .business-card img{
        height:200px;
    }

    .business-card > div{
        padding:
            20px
            21px;
    }

    .flip-back{
        padding:20px;

        align-items:flex-end;
    }

    .flip-back h3{
        font-size:20px;
    }

    .flip-back p{
        font-size:14px;

        line-height:1.55;

        text-align:justify;
    }

    .mini-tags{
        margin:
            12px
            0;
    }


    /* Directors */

    .director-photo-wrap{
        padding:
            20px
            10px
            8px;
    }

    .director-photo-wrap img{
        width:105px;
        height:138px;
    }

    .director-content{
        padding:
            16px
            16px
            22px;
    }

    .director-content h3{
        font-size:22px;
    }

    .director-content p{
        font-size:.9rem;

        line-height:1.6;

        text-align:justify;
    }


    /* Enquiry */

    .enquiry-toggle{
        width:43px!important;
        height:125px!important;
    }

    .enquiry-toggle:hover{
        width:47px!important;
    }

    .enquiry-panel{
        width:90vw;
        max-width:90vw;

        padding:
            max(55px,env(safe-area-inset-top))
            18px
            max(25px,env(safe-area-inset-bottom))
            18px;
    }

    .enquiry-panel-header{
        padding-right:45px;
    }

    .enquiry-panel-header h2{
        font-size:24px;
    }

    .enquiry-panel-header p{
        font-size:13px;
    }

    .enquiry-field{
        margin-bottom:15px;
    }

    .enquiry-field input,
    .enquiry-field select,
    .enquiry-field textarea{
        font-size:14px;
    }

    .enquiry-admin-control{
        right:10px;
        bottom:10px;
    }
}


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

@media (max-width:480px){

    body{
        font-size:14px;
    }

    .container{
        width:
            calc(100% - 24px);
    }


    .hero h1{
        font-size:
            clamp(
                34px,
                11vw,
                48px
            );
    }

    .hero-text{
        font-size:14px;
    }


    .flip-container{
        height:395px;
    }

    .business-card img{
        height:190px;
    }

    .flip-back{
        padding:17px;
    }

    .flip-back h3{
        font-size:19px;
    }

    .flip-back p{
        font-size:13.5px;
    }


    .director-photo-wrap img{
        width:100px;
        height:132px;
    }

    .director-content{
        padding:
            15px
            14px
            20px;
    }


    .enquiry-panel{
        width:90vw;
        max-width:90vw;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:380px){

    .container{
        width:
            calc(100% - 20px);
    }

    .hero-content{
        padding-top:95px;
    }

    .hero h1{
        font-size:32px;
    }

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

    .flip-container{
        height:375px;
    }

    .business-card img{
        height:175px;
    }

    .business-card > div{
        padding:
            17px
            18px;
    }

    .flip-back{
        padding:14px;
    }

    .flip-back h3{
        font-size:18px;
    }

    .flip-back p{
        font-size:13px;

        line-height:1.5;
    }

    .director-photo-wrap img{
        width:95px;
        height:125px;
    }

    .director-content h3{
        font-size:20px;
    }

    .director-content p{
        font-size:.86rem;
    }

    .enquiry-panel{
        width:90vw;
        max-width:90vw;

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


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

@media (max-height:650px)
       and (orientation:landscape){

    .hero{
        min-height:600px;
    }

    .hero-content{
        padding:
            100px
            0
            60px;
    }

    .enquiry-panel{
        height:100vh;
        height:100dvh;

        overflow-y:auto;
    }
}


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

@media (min-width:1400px){

    .container{
        max-width:1300px;
    }

    .hero-content{
        max-width:1300px;

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

    body{
        font-size:17px;
    }

    .business-grid{
        gap:28px;
    }
}


/* =========================================================
   EXTRA LARGE
   ========================================================= */

@media (min-width:1800px){

    .container{
        max-width:1450px;
    }

    .business-grid{
        gap:32px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}


/* =========================================================
   FINAL OVERFLOW PROTECTION
   ========================================================= */

html,
body,
main,
header,
footer,
section{
    max-width:100%;
}

table{
    max-width:100%;

    display:block;

    overflow-x:auto;
}

pre,
code{
    max-width:100%;

    overflow-x:auto;

    white-space:pre-wrap;

    overflow-wrap:break-word;
}


/* =========================================================
   BODY LOCK WHEN ENQUIRY IS OPEN
   ========================================================= */

body.enquiry-open{
    overflow:hidden;
}