/* =========================================================
       RESPONSIVE CSS - CLEAN BREAKPOINT STRUCTURE
       Desktop is the default layout above this section.
    ========================================================= */

    /* DESKTOP ONLY: hide career image */
    @media (min-width: 1100px) {
      .career-img { display: none; }
      .bottom-grid { grid-template-columns: 1fr 1fr 1fr; }
    }

    /* LARGE TABLET / iPAD LANDSCAPE: 1101px to 1366px */
    @media (min-width:768px) and (max-width:1100px) and (orientation:landscape) {
      .container { padding: 0 60px; }

      .topbar { padding: 0 60px; height: 140px; }
      .brand-text strong { font-size: 24px; padding-left: 10px; }
      .brand-text span { font-size: 14px; letter-spacing: .58em; }
      
      .hero-stage {
        margin-top: 140px; }

      .hero { min-height: 600px; }
      .hero-inner { padding: 70px 60px; }
      .hero h1 { font-size: 60px; }
      .hero p { font-size: 16px; }

      .about { padding: 44px 0 32px; }
      .about-grid {
        grid-template-columns: 1fr 1.25fr .75fr;
        gap: 34px;
      }
      .about-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
      }

      .section-title { font-size: 35px; }
      .copy { font-size: 14px; }
    }

    /* TABLET PORTRAIT / SMALL TABLET: 761px to 1100px */
    @media (min-width:768px) and (max-width:1100px) and (orientation:portrait) {
      .topbar { height: 104px; min-height: 104px; padding: 8px 24px; }
      .brand { gap: 8px; }
      .brand-logo { width: 135px; height: 135px; margin-top: 40px; }
      .brand-text strong { font-size: 24px; padding-left: 12px; }
      .brand-text span { font-size: 14px; letter-spacing: .58em; }

      .hero-stage { margin-top: 104px; }
      
      .about { padding: 40px 0 24px; }
      .about-grid { grid-template-columns: 1fr; gap: 28px; }
      .section-title { font-size: 32px; max-width: 100%; }
      .copy { font-size: 13px; max-width: 100%; }
      .about-img { height: 240px; }
      .values { grid-column: auto; gap: 18px; }
      .eyebrow { font-size: 24px; }

      .values {
        grid-column: auto;
        gap: 30px; }

      .eyebrow {
        font-size: 24px; }

        /* Government Capabilities section */
      .cap-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: start; }

      .cap-content {
        width: 100%;
        text-align: left; }

      .capability {
        width: 100%;
        min-height: auto;
        padding: 60px 24px; }

      .capability::after {
        opacity: 0.28; }

    /* Principles section */
      .principles-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0; }

      .principle {
        display: grid;
        grid-template-columns: 80px 1fr;
        align-items: center;
        min-width: 0;
        padding: 32px 24px; }

      .principle-icon {
        width: 60px;
        font-size: 48px;
        text-align: center; }

      .principle h3 {
        margin: 0 0 6px;
        font-size: 30px;
        line-height: 1; }

      .principle p {
        margin: 0;
        font-size: 16px;
        line-height: 1.35; }
    
      .bottom-grid {
        grid-template-columns: 1fr 1fr; }

      .values,
      .contact-details {
        grid-column: span 2; }

      .industry-grid {
        grid-template-columns: repeat(2, 1fr); }

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

      .capability::after {
        opacity: 0.28; }
    }

    /* MOBILE PORTRAIT / 760px and below */
    @media (max-width: 760px) {
      .container { padding: 0 20px; }
         html, body { overflow-x: hidden; }

      /* Header */
      .topbar {
         justify-content: center;
         height: 140px;
         min-height: auto;
         padding: 8px 20px 10px;
         flex-direction: column;
         gap: 4px; }
      
      .brand { min-width: auto; gap: 6px; }
      .brand-logo { width: 150px; height: 150px; margin-top: 0; }
      .brand-text strong {
         font-size: 23px;
         font-weight: 900;
         padding-left: 0;
         letter-spacing: -.035em;
         text-align: center; }
      
      .brand-text span {
         font-size: 16px;
         letter-spacing: .42em;
         padding-left: .50em;
         text-align: center; }
      
       nav { display: none; }
       
      /* HERO — MOBILE PORTRAIT */
      .hero-stage {
         margin-top: 100px;
         background-image: url("/images/hero/760-hero.png");
         background-position: center bottom;
         background-size: 200% 100%;
         background-repeat: no-repeat;
         overflow: hidden;
    }

      .hero {
         position: relative;
         z-index: 2;
         min-height: 470px;
         display: flex;
         align-items: center;
        }

      .hero-inner {
         position: relative;
         z-index: 2;
         width: 100%;
         padding: 120px 28px 60px;
        }

      .hero h1 {
         max-width: 620px;
         margin: 0 0 24px;
         font-size: clamp(42px, 11vw, 58px);
         line-height: 0.98;
         letter-spacing: -0.02em;
        }

      .hero p {
         max-width: 600px;
         margin: 0 0 30px;
         font-size: 17px;
         line-height: 1.55;
        }

      .hero .btn,
      .hero a.btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         min-height: 58px;
         padding: 16px 28px;
        }

      /* Principles */
      .principles-grid { grid-template-columns: 1fr; }
      .principle {
        border-right: 0;
        border-bottom: 1px solid rgba(240,181,0,.35);
        padding: 18px 16px; }

      /* About */
      .about { padding: 40px 0 24px; }
      .about-grid { grid-template-columns: 1fr; gap: 28px; }
      .section-title { font-size: 32px; max-width: 100%; }
      .copy { font-size: 13px; max-width: 100%; }
      .about-img { height: 240px; }
      .values { grid-column: auto; gap: 18px; }
      .eyebrow { font-size: 24px; }

      /* Industries */
      .industries { padding: 0 0 28px; }
      .industries h2 { font-size: 32px; margin: 4px 0 16px; }
      .industry-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .industry-card { height: 140px; }

      /* Capability */
      .capability { background: linear-gradient(90deg, #101010, #151515); padding: 36px 0; }
      .capability::after { display: none; }
      .cap-inner { grid-template-columns: 1fr; gap: 24px; }
      .capability h2 { font-size: 30px; }
      .cap-list { grid-template-columns: 1fr; gap: 12px; }
      .cap-list div { font-size: 12px; word-break: break-word; }

      /* Bottom / Contact */
      .bottom { padding: 40px 0; }
      .bottom-grid { grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
      .bottom h2 { font-size: 32px; }
      .career-img { height: 200px; }
      .contact-form { grid-template-columns: 1fr; gap: 8px; }
      .contact-form textarea { grid-column: auto; min-height: 70px; }
      .contact-details { grid-column: auto; gap: 14px; }

      /* Footer */
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
      .footer-brand img { width: 140px; height: 140px; }
      .footer-brand strong { font-size: 15px; }
      .footer-brand span { font-size: 15px; }

      /* Floating call button */
      .call-float { width: 60px; height: 60px; font-size: 26px; bottom: 48px; right: 20px; }
    }

    /* MOBILE LANDSCAPE: 761px to 932px */
    @media (min-width: 761px) and (max-width: 932px) and (orientation: landscape) {
      .container { padding: 0 28px; }

      .topbar {
        justify-content: center;
        height: 100px;
        min-height: 95px;
        padding: 8px 0;
        justify-content: space-between;
        flex-direction: column;
      }
      .brand { min-width: auto; gap: 8px; }
      .brand-logo { width: 140px; height: 140px; margin-top: 0; }
      .brand-text strong { font-size: 27px; padding-left: 29px; letter-spacing: -.035em; text-align: left; }
      .brand-text span { font-size: 18px; letter-spacing: .55em; padding-left: .55em; text-align: left; }
       nav { display: none; }

      .hero-stage { margin-top: 92px; background-position: center center; }
      .hero { min-height: 360px; }
      .hero-inner { padding: 40px 28px; }
      .hero h1 { font-size: 45px; max-width: 100%; }
      .hero p { font-size: 16px; max-width: 100%; }

      .principles-grid { grid-template-columns: 1fr; }
      .principle {
        border-right: 0;
        border-bottom: 1px solid rgba(240,181,0,.35);
        padding: 14px 16px;
      }

      .about { padding: 32px 0 20px; }
      .about-grid { grid-template-columns: 1fr; gap: 22px; }
      .section-title { font-size: 36px; max-width: 100%; }
      .copy { font-size: 15px; max-width: 100%; }
      .eyebrow { font-size: 25px; }
      .about-img {
        display: block;
        height: 295px;
        width: 60%;
        max-width: 600px;
        margin: 0 auto;
        object-fit: cover;
        object-position: bottom;
      }

      .values { grid-column: auto; gap: 14px; }
      .value { gap: 10px; }
      .value h4 { font-size: 14px; }
      .value p { font-size: 11px; }

      .industry-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .industry-card { width: 100%; max-width: none; height: 120px; }
      .industry-card:nth-child(1),
      .industry-card:nth-child(2),
      .industry-card:nth-child(3),
      .industry-card:nth-child(4) { grid-column: auto; }
      .industry-info h3 { font-size: 20px; }

      .capability { padding: 28px 0; background: linear-gradient(90deg, #101010, #151515); }
      .capability::after { display: none; }
      .cap-inner { grid-template-columns: 1fr; gap: 18px; }
      .capability h2 { font-size: 26px; margin: 2px 0 8px; }
      .capability p { font-size: 12px; max-width: 100%; }
      .cap-list { grid-template-columns: 1fr; gap: 8px; }
      .cap-list div { font-size: 12px; word-break: break-word; }

      .bottom { padding: 32px 0; }
      .bottom-grid { grid-template-columns: 1fr; gap: 22px; }
      .bottom h2 { font-size: 26px; }
      .bottom p { font-size: 12px; }
      .career-img { display: none; }
      .contact-form { grid-template-columns: 1fr; gap: 6px; }
      .contact-form textarea { grid-column: auto; min-height: 60px; }
      .contact-details { grid-column: auto; gap: 12px; font-size: 12px; }
      .contact-details span { font-size: 16px; }

      .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
      .footer-brand img { width: 120px; height: 120px; }
      .footer-brand strong { font-size: 13px; }
      .footer-brand span { font-size: 13px; }
      footer h4 { font-size: 11px; }
      footer a,
      footer p { font-size: 11px; }

      .call-float { width: 56px; height: 56px; font-size: 24px; bottom: 40px; right: 18px; }
    }