/* ============================= */
/* LOCAL FONTS */
/* ============================= */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-v20-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/montserrat-v31-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat/montserrat-v31-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================= */
/* MODERN RESET */
/* ============================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}



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

    :root {
      --forest-dark: #142820;
      --forest: #1B3326;
      --forest-light: #234237;

      --gold: #B69355;
      --gold-light: #C9AA72;
      --gold-muted: rgba(182, 147, 85, 0.14);

      --bg: var(--forest-dark);
      --bg-secondary: var(--forest);
      --card: rgba(182, 147, 85, 0.05);

      --white: #F5F0E8;
      --text: #B8C4BC;

      --border: rgba(182, 147, 85, 0.14);

      --shadow:
        0 12px 40px rgba(0, 0, 0, 0.32);

      --radius: 24px;

      --transition: 0.35s ease;

      --container: 1280px;
    }

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

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", sans-serif;
      background: var(--bg);
      color: var(--white);
      overflow-x: hidden;
      line-height: 1.6;
    }

    img {
      display:block;
      max-width:100%;
      height:auto;
      object-fit:cover;
    }

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

    ul {
      list-style: none;
    }

    section {
      padding: 110px 20px;
    }

    .container {
      width: 100%;
      max-width: var(--container);
      margin: auto;
    }

    /* ========================================= */
    /* TYPO */
    /* ========================================= */

    h1,
    h2,
    h3 {
      font-family: "Montserrat", sans-serif;
      line-height: 1.12;
      letter-spacing: -0.02em;
    }

    h1 {
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 800;
    }

    h2 {
      font-size: clamp(2.2rem, 5vw, 4rem);
      margin-bottom: 20px;
      font-weight: 700;
    }

    h3 {
      font-size: 1.25rem;
      font-weight: 600;
    }

    p {
      color: var(--text);
    }

    .section-text {
      max-width: 720px;
      margin-bottom: 50px;
      font-size: 1.05rem;
    }

    .section-label {
      display: inline-block;
      margin-bottom: 18px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--gold);
      color: var(--gold);
      font-family: "Montserrat", sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      text-transform: uppercase;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      padding: 10px 16px;
      border: 1px solid rgba(182, 147, 85, 0.24);
      border-radius: 999px;
      color: var(--gold-light);
      font-family: "Montserrat", sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

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

    header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
      background: rgba(20, 40, 32, 0.82);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }

    .navbar {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .logo-img {
      height: 54px;
      width: auto;
      object-fit: contain;
    }

    nav {
      display: flex;
      gap: 34px;
      align-items: center;
    }

    nav a {
      color: var(--text);
      transition: var(--transition);
      position: relative;
      font-size: 0.95rem;
    }

    nav a:hover {
      color: var(--white);
    }

    nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 0;
      height: 2px;
      background: var(--gold);
      transition: var(--transition);
    }

    nav a:hover::after {
      width: 100%;
    }

    .menu-btn {
      display: none;
      font-size: 1.4rem;
      cursor: pointer;
      color: var(--gold-light);
    }

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

    .hero {
      min-height: 100vh;

      display: flex;
      align-items: center;

      position: relative;

      overflow: hidden;

      background:
        linear-gradient(
          rgba(20, 40, 32, 0.84),
          rgba(27, 51, 38, 0.88)
        ),

        url("../images/mountains.webp")
        center center / cover no-repeat;
    }

    .hero::before {
      content: "";

      position: absolute;
      inset: 0;

      background:
        radial-gradient(
          circle at top right,
          rgba(182, 147, 85, 0.14),
          transparent 32%
        );

      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 760px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 12px 18px;

      margin-bottom: 30px;

      border-radius: 999px;

      background: rgba(182, 147, 85, 0.08);

      border: 1px solid rgba(182, 147, 85, 0.22);

      backdrop-filter: blur(12px);

      color: var(--gold-light);

      font-family: "Montserrat", sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .hero-badge i {
      color: var(--gold);
    }

    .hero h1 {
      margin-bottom: 24px;
    }

    .hero h1 span {
      color: var(--gold-light);
    }

    .hero p {
      max-width: 650px;
      font-size: 1.1rem;
      margin-bottom: 42px;
    }

    .hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    /* ========================================= */
    /* BUTTONS */
    /* ========================================= */

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

      gap: 12px;

      padding: 16px 28px;

      border-radius: 18px;

      transition: var(--transition);

      font-weight: 600;
    }

    .btn-primary {
      background: var(--gold);
      color: var(--forest-dark);

      box-shadow:
        0 10px 30px rgba(182, 147, 85, 0.22);
    }

    .btn-primary:hover {
      transform: translateY(-4px);
      background: var(--gold-light);
    }

    .btn-secondary {
      border: 1px solid rgba(182, 147, 85, 0.28);

      background: rgba(182, 147, 85, 0.06);

      backdrop-filter: blur(10px);
      color: var(--white);
    }

    .btn-secondary:hover {
      transform: translateY(-4px);
      border-color: rgba(182, 147, 85, 0.45);
      background: rgba(182, 147, 85, 0.1);
    }

    /* ========================================= */
    /* SCROLL */
    /* ========================================= */

    .scroll-indicator {
      position: absolute;
      bottom: 35px;
      left: 50%;

      transform: translateX(-50%);

      display: flex;
      flex-direction: column;
      align-items: center;

      gap: 10px;

      color: rgba(245, 240, 232, 0.65);

      animation: bounce 2s infinite;
    }

    .scroll-indicator span {
      font-size: 0.8rem;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    @keyframes bounce {
      0%,100% {
        transform: translate(-50%,0);
      }
      50% {
        transform: translate(-50%,8px);
      }
    }

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

    .services {
      background: var(--bg);
    }

    .services-grid {
      display: grid;

      grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

      gap: 26px;
    }

    .card {
      background: var(--card);

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

      border-radius: var(--radius);

      padding: 36px;

      transition: var(--transition);

      backdrop-filter: blur(14px);

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

    .card:hover {
      transform: translateY(-6px);

      border-color:
        rgba(182, 147, 85, 0.32);
    }

    .service-icon {
      width: 72px;
      height: 72px;

      border-radius: 18px;

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

      margin-bottom: 24px;

      background: var(--gold-muted);

      color: var(--gold-light);

      font-size: 1.4rem;
    }

    .card h3 {
      margin-bottom: 14px;
    }

    /* ========================================= */
    /* STATS */
    /* ========================================= */

    .stats {
      background: var(--bg-secondary);

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

    .stats-grid {
      display: grid;

      grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

      gap: 30px;
    }

    .stat {
      text-align: center;
      padding: 30px;
    }

    .stat-number {
      font-size: 3rem;
      font-weight: 800;
      color: var(--gold-light);

      margin-bottom: 10px;
    }

    /* ========================================= */
    /* ABOUT */
    /* ========================================= */

    .about-grid {
      display: grid;

      grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

      gap: 60px;

      align-items: center;
    }

    .about-image {
      overflow: hidden;
      border-radius: 28px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
    }

    .about-image img {
      transition: transform 0.7s ease;
      height: 100%;
      min-height: 500px;
    }

    .about-image:hover img {
      transform: scale(1.05);
    }

    /* ========================================= */
    /* PROJECTS */
    /* ========================================= */

    .projects-grid {
      display: grid;

      grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

      gap: 26px;
    }

    .project {
      position: relative;

      min-height: 460px;

      border-radius: 28px;

      overflow: hidden;

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

    .project img {
      height: 100%;
      transition: transform 0.8s ease;
    }

    .project:hover img {
      transform: scale(1.08);
    }

    .project-overlay {
      position: absolute;
      inset: 0;

      display: flex;
      align-items: flex-end;

      padding: 30px;

      background:
        linear-gradient(
          to top,
          rgba(20, 40, 32, 0.92),
          rgba(20, 40, 32, 0.12)
        );
    }

    .project-overlay h3 {
      margin-bottom: 10px;
    }

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

    .contact {
      background: var(--bg-secondary);
    }

    .contact-grid {
      display: grid;

      grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

      gap: 40px;
    }

    .contact-box {
      background: rgba(182, 147, 85, 0.04);

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

      border-radius: 28px;

      padding: 40px;

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

    .contact-item {
      display: flex;
      gap: 18px;
      margin-bottom: 24px;
    }

    .contact-item i {
      color: var(--gold);
      margin-top: 5px;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    input,
    textarea {
      width: 100%;

      background: rgba(255,255,255,0.04);

      border: 1px solid rgba(255,255,255,0.08);

      border-radius: 16px;

      padding: 16px 18px;

      color: white;

      font-family: inherit;

      outline: none;

      transition: var(--transition);
    }

    input:focus,
    textarea:focus {
      border-color:
        rgba(182, 147, 85, 0.45);
    }

    textarea {
      min-height: 140px;
      resize: vertical;
    }

    .form-feedback {
      display: none;
      padding: 16px 18px;
      border-radius: 16px;
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .form-feedback.visible {
      display: block;
    }

    .form-feedback.success {
      background: rgba(182, 147, 85, 0.12);
      border: 1px solid rgba(182, 147, 85, 0.32);
      color: #E8DCC8;
    }

    .form-feedback.error {
      background: rgba(182, 80, 80, 0.1);
      border: 1px solid rgba(200, 120, 120, 0.28);
      color: #E8CFCF;
    }

    .form-feedback a {
      color: inherit;
      text-decoration: underline;
    }

    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    button[type="submit"]:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }

    .map {
      margin-top: 30px;

      height: 260px;

      border-radius: 24px;

      overflow: hidden;

      position: relative;

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

    .map img {
      height: 100%;
    }

    .map-overlay {
      position: absolute;
      inset: 0;

      background:
        rgba(0,0,0,0.45);

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

      font-weight: 600;
    }

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

    footer {
      padding: 48px 20px 40px;

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

      background: var(--forest-dark);
    }

    .footer-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      text-align: center;
    }

    .footer-logo {
      height: 72px;
      width: auto;
      object-fit: contain;
      opacity: 0.95;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
    }

    .footer-links a {
      color: var(--text);
      font-size: 0.92rem;
      transition: var(--transition);
    }

    .footer-links a:hover {
      color: var(--gold-light);
    }

    footer p {
      color: #8FA398;
      font-size: 0.9rem;
    }

    /* ========================================= */
    /* FADE */
    /* ========================================= */

    .fade {
      opacity: 0;
      transform: translateY(40px);
      transition: 0.8s ease;
    }

    .fade.visible {
      opacity: 1;
      transform: translateY(0);
    }

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

    @media (max-width: 900px) {

      .logo-img {
        height: 46px;
      }

      nav {
        position: fixed;

        top: 82px;
        left: -100%;

        width: 100%;
        height: calc(100vh - 82px);

        background: var(--forest);

        flex-direction: column;

        justify-content: center;

        transition: 0.4s ease;
      }

      nav.active {
        left: 0;
      }

      .menu-btn {
        display: block;
      }

      .hero {
        background-position: center;
      }

      .hero-buttons {
        flex-direction: column;
        align-items: stretch;
      }

      .btn {
        width: 100%;
      }

      section {
        padding: 90px 20px;
      }

      .project {
        min-height: 360px;
      }

      .about-image img {
        min-height: 340px;
      }

    }

  

/* ============================= */
/* ACCESSIBILITY */
/* ============================= */

:focus-visible{
  outline:3px solid var(--gold-light);
  outline-offset:4px;
}

.btn:focus-visible{
  outline:3px solid var(--gold-light);
}

::selection{
  background:var(--gold);
  color:var(--forest-dark);
}

::-webkit-scrollbar{
  width:10px;
}
::-webkit-scrollbar-track{
  background:var(--forest-dark);
}
::-webkit-scrollbar-thumb{
  background:var(--gold);
  border-radius:999px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}