@font-face {
    font-family:'Century Gothic';
    src: url('../fonts/gothic/CenturyGothic.woff2') format('woff2'),
        url('../fonts/gothic/CenturyGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


:root{
    --bg:        #FAF8F3;
    --bg-panel:  #F1EEE5;
    --sidebar:   #454545;
    --sidebar-t: #A9A69B;
    --ink:       #1B1B18;
    --ink-muted: #7A7669;
    --line:      #E1DDD0;
    --gold:      #003BC0;

    --font-display:'Century Gothic';
    --font-body:   'Century Gothic';
    --font-mono:   'Century Gothic';
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--font-body); font-size:16.5px; line-height:1.65;
    margin:0; -webkit-font-smoothing:antialiased;

  }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3{ font-family:var(--font-display); margin:0; letter-spacing:-0.01em; }
  ::selection{ background:var(--gold); color:#1B1B18; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

  .layout{ display:flex; min-height:100vh; }




  /* ---------- SIDEBAR ---------- */
  .sidebar{
    width:260px; flex-shrink:0;
    background:var(--sidebar); 
    color:#F4F2EA;
    position:sticky; top:0; height:100vh;
    padding:34px 30px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  @media (max-width:900px){
    .sidebar{ display:none; }
  }
  .sb-logo{ font-weight:700; font-size:1.15rem; }
  .sb-nav{ display:flex; flex-direction:column; gap:20px; margin-top:70px; }
  .sb-nav a{ font-size:0.98rem; color:var(--sidebar-t); transition:color .15s ease; position:relative; padding-left:18px; }
  .sb-nav a::before{
    content:""; position:absolute; left:0; top:8px;
    width:8px; height:1px; background:var(--gold);
    opacity:0; transition:opacity .15s ease;
  }
  .sb-nav a:hover{ color:#F4F2EA; }
  .sb-nav a:hover::before{ opacity:1; }
  .sb-foot{ font-size:0.82rem; color:var(--sidebar-t); }
  .sb-foot a{ display:block; margin-top:6px; color:#F4F2EA; }

  /* mobile top bar */
  .mobile-nav{
    display:none;
    background:var(--sidebar); color:#F4F2EA;
    padding:20px 22px;
    align-items:center; justify-content:space-between;
  }
  @media (max-width:900px){ .mobile-nav{ display:flex; } }
  .mobile-nav a.cta-mini{
    border:1px solid rgba(244,242,234,0.4); border-radius:999px;
    padding:7px 16px; font-size:0.85rem;
  }

  .main{ flex:1; min-width:0; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 48px; }
  @media (max-width:760px){ .wrap{ padding:0 24px; } }

  /* ---------- HERO ---------- */
  .hero{ position:relative; height:78vh; min-height:520px; overflow:hidden; }
  .hero img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(0.9) contrast(1.03);
  }
  .hero::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(27,27,24,0.1) 0%, rgba(27,27,24,0.75) 100%);
  }
  .hero-copy{
    position:absolute; left:0; right:0; bottom:0; z-index:5;top:50%;transform:translateY(-50%);
    padding:0 48px 48px; color:#F4F2EA;
  }
  @media (max-width:760px){ .hero-copy{ padding:0 24px 32px; } }
  .hero-copy .eyebrow{ font-family:var(--font-mono); font-size:0.82rem; color:var(--gold); margin-bottom:16px; }
  .hero-copy h1{
    font-size:clamp(2.1rem, 4.6vw, 3.6rem); font-weight:600; line-height:1.08;
    max-width:16ch;
  }
  .hero-copy p{ max-width:44ch; color:#D8D5C9; margin-top:18px; font-size:1.02rem; }
  .hero-copy .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 26px;
    padding: 10px 18px;

    background: var(--gold);
    color: #fff;

    border: 1px solid var(--gold);
    border-radius: 3px;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: 0.2s ease;
}

.hero-copy .btn:hover {
    background: #fff;
    color: var(--gold);
    border-color: var(--gold);
}

  /* ---------- INTRO STRIP ---------- */
  .intro-strip{
    padding:56px 0; 
    /* border-bottom:1px solid var(--line); */
    display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
  }
  @media (max-width:760px){ .intro-strip{ grid-template-columns:repeat(2,1fr); } }
  .intro-strip .v{ font-family:var(--font-mono); color:var(--gold); font-size:1.7rem;font-weight: 600; }
  .intro-strip .l{ color:var(--ink-muted); font-size:0.95rem; margin-top:4px;font-weight:400; }

  /* ---------- GALLERY PANELS (case studies) ---------- */
  .panel{
    border-bottom:1px solid var(--line);
    padding:70px 0;
  }
  .panel-head{
    display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:26px; flex-wrap:wrap;
  }
  .panel-head .client{ font-size:1.7rem; font-weight:600;color:var(--gold); }
  .panel-head .idx{ font-family:var(--font-mono); color:var(--ink-muted); font-size:0.9rem; }

  .panel-photo{ position:relative; border-radius:4px; overflow:hidden; height:480px; }
  @media (max-width:700px){ .panel-photo{ height:300px; } }
  .panel-photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.9) contrast(1.03); }

  .panel-body{
    display:grid; grid-template-columns:1.3fr 1fr; gap:30px;
    margin-top:28px;
  }
  @media (max-width:760px){ .panel-body{ grid-template-columns:1fr; gap:22px; } }
  .panel-body p{ color:var(--ink-muted); margin:0; font-size:1rem; }
  .panel-stats{ display:flex; flex-direction:column; gap:16px; }
  .panel-stats .s{ border-top:1px solid var(--line); padding-top:10px; }
  .panel-stats .s .v{ font-family:var(--font-mono); font-size:1.7rem; color:var(--gold);font-weight: 600; }
  .panel-stats .s .l{ color:var(--ink-muted); font-size:0.95rem; margin-top:2px; }

  /* ---------- CTA ---------- */
  .cta{
    padding:88px 0; text-align:left;
  }
  .cta h2{ font-size:clamp(2rem, 4.2vw, 2.9rem); font-weight:600; max-width:16ch;color:var(--gold); }
  .cta p{ color:var(--ink-muted); margin-top:16px; max-width:44ch; }
  .cta .btn{
    display:inline-block; margin-top:26px;
    background:var(--sidebar); color:#F4F2EA; font-weight:600;
    padding:13px 26px; border-radius:3px; font-size:0.92rem;
  }

  .cta .btn:hover{
     background:#fff;
     color:#454545;
     border:1px solid #454545;
  }

  footer{
    border-top:1px solid var(--line);
    padding:26px 48px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  }
  @media (max-width:760px){ footer{ padding:22px 24px; } }
  footer .copy{ color:var(--ink-muted); font-size:0.83rem; }
  footer .foot-links{ display:flex; gap:20px; }
  footer .foot-links a{ color:var(--ink-muted); font-size:0.83rem; }
  footer .foot-links a:hover{ color:var(--ink); }

/* =========================================
   GALLERY BUTTON
========================================= */

.gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: max-content;
  /* margin-top: 24px; */
  padding: 12px 22px;
  background: var(--gold);
  color: #fff;
  border: 1px solid var(--gold);
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-body);
  transition: 0.3s ease;
  font-weight: 600;
}

.gallery-btn:hover {
background: var(--gold);
  color: #fff;
}




.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: transparent !important;


    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.site-navbar .navbar-brand {
    padding: 0;
}

.site-navbar .navbar-logo img {
    display: block;
    width: auto;
    height: 45px;
}

.site-navbar.navbar-scrolled {
    background: #fff !important;
    border-bottom-color: #e5e5e5;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* =========================================
   CASE STUDY CARDS
========================================= */

.case-card {
    position: relative;
    display: block;
border-radius: 10px;
    background: #fff;

    overflow: hidden;

    color: inherit;
    text-decoration: none;
}


/* =========================================
   CARD IMAGE
========================================= */

.case-card-image {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: var(--bg-panel);
}

.case-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================
   CARD CONTENT
========================================= */

.case-card-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* =========================================
   CARD TOP
========================================= */

.case-card-top {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;

    color: var(--gold);

    font-family: var(--font-mono);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .04em;
}


/* =========================================
   CARD TITLE
========================================= */

.case-card h3 {
    margin: 0 0 12px;

    color: var(--ink);

    font-family: var(--font-display);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.15;
}


/* =========================================
   CARD DESCRIPTION
========================================= */

.case-card p {
    margin: 0;
padding-bottom: 10px;
    color: var(--ink-muted);

    font-size: 15px;

    line-height: 1.65;
}


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

@media (max-width: 767px) {

    .case-card-content {
        padding: 20px;
    }

    .case-card h3 {
        font-size: 22px;
    }

    .case-card p {
        font-size: 14px;
    }

}


/* =========================================
   LOGO SWITCH
========================================= */

.site-navbar .logo-white {
    display: block !important;
}

.site-navbar .logo-color {
    display: none !important;
}


/* AFTER SCROLL */

.site-navbar.navbar-scrolled .logo-white {
    display: none !important;
}

.site-navbar.navbar-scrolled .logo-color {
    display: block !important;
}


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

.contact-btn {
    display: inline-flex;

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

    padding: 5px 10px;

    background: var(--gold);

    color: #fff !important;

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

    border-radius: 3px;

    font-family: var(--font-body);

    font-size: 14px;

    text-decoration: none;
}

.project-modal-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100%;
}

.project-modal-media .project-media-item {
    width: 100%;
    height: 500px;
    overflow: hidden;
}





/* =========================================
   NAVBAR
========================================= */

.site-navbar {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1050;

    background: transparent !important;

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}


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

.site-navbar .container {
    min-height: 45px;
}


/* =========================================
   LOGO
========================================= */

.site-navbar .navbar-brand {
    padding: 0;
    margin: 0;
}

.site-navbar .navbar-logo img {
    display: block;
    width: auto;
    height: 45px;
}


/* =========================================
   LOGO SWITCH AFTER SCROLL
========================================= */

.site-navbar .logo-white {
    display: block !important;
}

.site-navbar .logo-color {
    display: none !important;
}

.site-navbar.navbar-scrolled {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.site-navbar.navbar-scrolled .logo-white {
    display: none !important;
}

.site-navbar.navbar-scrolled .logo-color {
    display: block !important;
}


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

.desktop-navigation {
    display: block;
}

.desktop-navigation .navbar-nav {
    gap: 30px;
}

.site-navbar .nav-link {
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    text-decoration: none;
}

.site-navbar.navbar-scrolled .nav-link {
    color: var(--gold);
}


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

.mobile-contact-btn {
    display: none;

    padding: 9px 10px;

    background: var(--gold);
    color: #fff;

    border-radius: 4px;

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;

    text-decoration: none;
}

.mobile-contact-btn:hover {
    color: #fff;
}


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

@media (max-width: 991.98px) {

    .site-navbar .container {
        min-height: 65px;
    }

    .site-navbar .navbar-logo img {
        height: 40px;
    }

    /* Hide desktop menu */
    .desktop-navigation {
        display: none;
    }

    /* Show Contact button */
    .mobile-contact-btn {
        display: inline-block;
    }

}


.view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    margin-top: auto;
    padding: 10px 18px;

    background: var(--gold);
    color: #fff;

    border: 1px solid var(--gold);
    border-radius: 3px;

    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: 0.2s ease;
}

.view-all-btn:hover {
    background: #fff;
    color: var(--gold);
    border-color: var(--gold);
text-decoration: none;
}



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

@media (max-width: 991.98px) {

    .site-navbar .container {
        min-height: 45px;
    }

    .site-navbar .navbar-logo img {
        height: 40px;
    }

    .site-navbar .navbar-nav {
        gap: 0;
    }

}