/* =========================================================
   AFG IT — RESPONSIVE STYLES
   ========================================================= */


/* =========================================================
   1. LARGE DESKTOP
   ========================================================= */

   @media (max-width: 1500px) {
    :root {
      --container-padding: 34px;
      --section-space: 126px;
    }
  
    .hero-title {
      font-size: clamp(76px, 10.2vw, 150px);
    }
  
    .hero-inner {
      gap: 54px;
    }
  
    .contact-layout {
      gap: 78px;
    }
  }
  
  
  /* =========================================================
     2. LAPTOP
     ========================================================= */
  
  @media (max-width: 1180px) {
    :root {
      --section-space: 108px;
    }
  
    .desktop-nav {
      gap: 22px;
    }
  
    .hero-inner {
      grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
    }
  
    .hero-title {
      font-size: clamp(72px, 9.8vw, 118px);
    }
  
    .hero-copy-bottom {
      grid-template-columns: 1fr;
      align-items: start;
    }
  
    .hero-copy-bottom .primary-button {
      width: max-content;
    }
  
    .section-heading-grid {
      gap: 52px;
    }
  
    .service-content {
      gap: 42px;
    }
  
    .process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .capabilities-layout {
      grid-template-columns: 1fr;
    }
  
    .capabilities-intro {
      position: static;
    }
  
    .capabilities-board {
      min-height: 620px;
    }
  
    .about-frame {
      grid-template-columns: 0.85fr 1.15fr;
    }
  
    .about-content {
      padding: 54px;
    }
  
    .contact-layout {
      grid-template-columns: 0.9fr 1.1fr;
      gap: 56px;
    }
  
    .footer-top {
      grid-template-columns: 1fr;
    }
  }
  
  
  /* =========================================================
     3. TABLET
     ========================================================= */
  
  @media (max-width: 960px) {
    :root {
      --container-padding: 24px;
      --section-space: 90px;
    }
  
    html {
      scroll-padding-top: 76px;
    }
  
    .header-inner {
      grid-template-columns: 1fr auto;
      min-height: 74px;
    }
  
    .desktop-nav,
    .header-contact {
      display: none;
    }
  
    .menu-toggle {
      display: block;
      justify-self: end;
    }
  
    .mobile-nav {
      position: fixed;
      z-index: 99;
      top: 74px;
      right: 0;
      left: 0;
      display: flex;
      max-height: 0;
      flex-direction: column;
      overflow: hidden;
      background: var(--color-bg);
      transition: max-height var(--transition-medium);
    }
  
    .mobile-nav.is-open {
      max-height: calc(100vh - 74px);
      border-bottom: 1px solid var(--color-border);
    }
  
    .mobile-nav a {
      padding: 20px 24px;
      border-top: 1px solid var(--color-border);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
  
    .hero {
      min-height: auto;
    }
  
    .hero::before {
      display: none;
    }
  
    .hero-inner {
      grid-template-columns: 1fr;
      gap: 64px;
      padding-top: 84px;
      padding-bottom: 76px;
    }
  
    .hero-title {
      font-size: clamp(74px, 15vw, 120px);
    }
  
    .status-panel {
      width: min(100%, 620px);
    }
  
    .section-heading-grid {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  
    .section-heading p {
      max-width: 620px;
    }
  
    .service-item {
      grid-template-columns: 70px 1fr 40px;
    }
  
    .service-content {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  
    .capabilities-board {
      min-height: 700px;
    }
  
    .capability-node {
      width: 190px;
    }
  
    .about-frame {
      grid-template-columns: 1fr;
    }
  
    .about-visual {
      min-height: 560px;
      border-right: 0;
      border-bottom: 1px solid var(--color-border-strong);
    }
  
    .about-content {
      padding: 58px;
    }
  
    .contact-layout {
      grid-template-columns: 1fr;
    }
  
    .contact-intro {
      position: static;
    }
  
    .contact-form {
      max-width: 760px;
    }
  
    .footer-navigation {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .footer-bottom {
      align-items: flex-start;
      flex-direction: column;
      padding-block: 28px;
    }
  }
  
  
  /* =========================================================
     4. MOBILE LANDSCAPE / SMALL TABLET
     ========================================================= */
  
  @media (max-width: 720px) {
    :root {
      --container-padding: 18px;
      --section-space: 74px;
    }
  
    body {
      background-size: 80px 100%;
    }
  
    .hero-inner {
      padding-top: 70px;
    }
  
    .hero-title {
      font-size: clamp(62px, 19vw, 96px);
      line-height: 0.82;
    }
  
    .hero-copy-bottom {
      margin-top: 42px;
    }
  
    .hero-description {
      font-size: 15px;
    }
  
    .status-panel-header,
    .status-panel-footer {
      padding-inline: 18px;
    }
  
    .status-panel-main {
      padding-inline: 18px;
    }
  
    .section-heading {
      margin-bottom: 52px;
    }
  
    .section-heading h2,
    .capabilities-intro h2,
    .about-content h2,
    .contact-intro h2 {
      font-size: clamp(42px, 12vw, 68px);
    }
  
    .service-item {
      grid-template-columns: 44px 1fr 26px;
      gap: 14px;
      min-height: 170px;
    }
  
    .service-item:hover {
      padding-inline: 10px;
    }
  
    .service-content h3 {
      font-size: 30px;
    }
  
    .service-content p {
      font-size: 14px;
    }
  
    .process-grid {
      grid-template-columns: 1fr;
    }
  
    .process-card {
      min-height: 300px;
    }
  
    .process-card h3 {
      margin-top: 86px;
    }
  
    .capabilities-board {
      display: grid;
      min-height: auto;
      gap: 12px;
      padding: 62px 16px 28px;
      background-size: 60px 60px;
    }
  
    .capability-node {
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      width: 100%;
    }
  
    .capabilities-lines,
    .board-center-marker {
      display: none;
    }
  
    .about-visual {
      min-height: 430px;
    }
  
    .about-circle {
      width: 250px;
      height: 250px;
    }
  
    .about-circle span {
      width: 84px;
      height: 84px;
    }
  
    .about-content {
      padding: 42px 26px;
    }
  
    .about-data > div {
      grid-template-columns: 1fr;
      gap: 8px;
    }
  
    .contact-form {
      padding: 32px 22px;
    }
  
    .footer-navigation {
      grid-template-columns: 1fr;
      gap: 34px;
    }
  
    .footer-brand {
      font-size: clamp(72px, 22vw, 120px);
    }
  }
  
  
  /* =========================================================
     5. MOBILE PORTRAIT
     ========================================================= */
  
  @media (max-width: 480px) {
    .brand-name {
      font-size: 16px;
    }
  
    .hero-decoration {
      display: none;
    }
  
    .hero-inner {
      padding-top: 56px;
      padding-bottom: 62px;
    }
  
    .hero-title {
      font-size: clamp(54px, 18.5vw, 78px);
      letter-spacing: -0.075em;
    }
  
    .hero-copy-bottom .primary-button {
      width: 100%;
    }
  
    .hero-axis {
      display: none;
    }
  
    .status-row {
      align-items: flex-start;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }
  
    .ticker-group {
      gap: 30px;
    }
  
    .service-item {
      grid-template-columns: 34px 1fr 24px;
    }
  
    .service-number {
      align-self: start;
      padding-top: 6px;
    }
  
    .service-content h3 {
      font-size: 27px;
    }
  
    .process-card {
      padding: 24px;
    }
  
    .about-visual {
      min-height: 360px;
    }
  
    .about-circle {
      width: 210px;
      height: 210px;
    }
  
    .about-coordinates {
      right: 14px;
      bottom: 14px;
      gap: 12px;
    }
  
    .contact-intro h2 {
      font-size: clamp(50px, 15vw, 74px);
    }
  
    .form-modal-box {
      padding: 38px 24px 28px;
    }
  
    .footer-system {
      align-items: flex-start;
      flex-direction: column;
      gap: 10px;
    }
  }