/* Mobile / tablet overrides for Kingdom GRS
   Loaded after desktop.css. This file only changes responsive behavior. */

/* Prevent brand title from overflowing onto nav at medium desktop widths */
@media (max-width:1300px) {
  .brand-title {
    font-size:18px;
    white-space:normal;
    line-height:1.15;
  }
}

@media (max-width:1050px) {
  .top-bar {
    top:12px;
    width:calc(100% - 28px);
    padding:10px 12px;
    gap:8px 14px;
    border-radius:30px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
  }

  .logo-wrap {
    order:1;
    flex:0 0 auto;
  }

  .logo-wrap img {
    width:64px;
    height:64px;
    border-radius:13px;
  }

  .brand-center {
    order:2;
    flex:1 1 420px;
    min-width:0;
    top:0;
    left:0;
    text-align:center;
  }

  .brand-title {
    font-size:18px;
    line-height:1.15;
    white-space:normal;
  }

  .brand-line {
    margin-top:5px;
    gap:9px;
  }

  .brand-line span { width:88px; }
  .brand-line b { font-size:17px; }

  .nav {
    order:3;
    flex:1 1 100%;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    padding-top:2px;
  }

  .nav a {
    padding:8px 11px;
    font-size:13.5px;
  }

  .hero,
  .page-hero {
    padding-top:210px;
  }

  .split,
  .story-wrap,
  .split-layout {
    grid-template-columns:1fr;
  }

  .review-grid,
  .card-grid {
    grid-template-columns:1fr;
  }

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

@media (max-width:700px) {
  body { min-width:0; }

  .top-bar {
    top:8px;
    left:50%;
    width:calc(100% - 18px);
    padding:9px;
    gap:7px;
    border-radius:24px;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-start;
  }

  .logo-wrap {
    order:1;
    width:100%;
    justify-content:center;
  }

  .logo-wrap img {
    width:58px;
    height:58px;
    border-radius:12px;
  }

  .brand-center {
    order:2;
    width:100%;
    flex:0 0 auto;
    top:0;
    left:0;
    text-align:center;
  }

  .brand-title {
    max-width:calc(100vw - 50px);
    margin:0 auto;
    font-size:15px;
    line-height:1.18;
    white-space:normal;
  }

  .brand-line {
    margin-top:4px;
    gap:8px;
  }

  .brand-line span { width:62px; }
  .brand-line b { font-size:16px; }

  .nav {
    order:3;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:5px;
    align-items:stretch;
    justify-content:stretch;
    padding-top:4px;
  }

  .nav a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:34px;
    padding:8px 5px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    text-align:center;
    white-space:nowrap;
  }

  .nav a:hover,
  .nav a.active {
    transform:none;
  }

  .nav .quote {
    box-shadow:0 8px 18px rgba(31,122,58,.28);
  }

  .hero,
  .page-hero {
    min-height:100svh;
    padding:245px 18px 64px;
  }

  .hero-bubble,
  .page-hero-card,
  .page-hero-content {
    width:100%;
    padding:32px 20px;
    border-radius:26px;
  }

  .hero-bubble h1,
  .page-hero-card h1,
  .page-hero-content h1 {
    font-size:clamp(34px, 12vw, 52px);
    line-height:1;
    letter-spacing:-1.5px;
  }

  .hero-bubble p,
  .page-hero-card p,
  .page-hero-content p {
    font-size:16px;
    line-height:1.65;
  }

  .kicker {
    font-size:12px;
    letter-spacing:1.3px;
  }

  .actions {
    gap:10px;
  }

  .btn {
    width:100%;
    max-width:280px;
    padding:13px 18px;
  }

  .section {
    padding:68px 20px;
  }

  .section h2,
  .section-head h2 {
    font-size:clamp(30px, 9vw, 42px);
    letter-spacing:-1px;
  }

  .section-head p {
    font-size:16px;
  }

  .grid,
  .card-grid,
  .review-grid {
    grid-template-columns:1fr;
    gap:18px;
  }

  .box,
  .review-card,
  .form-card,
  .info-card,
  .text-card {
    border-radius:24px;
    padding:22px;
  }

  .box,
  .card {
    min-height:auto;
    column-gap:12px;
  }

  .icon {
    width:44px;
    height:44px;
    font-size:20px;
    border-radius:14px;
  }

  .box h3,
  .card h3 {
    font-size:18px;
  }

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

  .footer-main {
    grid-template-columns:1fr;
    padding:50px 22px;
  }

  /* Icon + title side-by-side on service/project cards */
  .box,
  .card {
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:14px;
    row-gap:8px;
    min-height:unset;
  }

  .icon {
    grid-column:1;
    grid-row:1;
    width:42px;
    height:42px;
    font-size:20px;
    margin-bottom:0;
    border-radius:14px;
    align-self:center;
  }

  .box h3,
  .card h3 {
    grid-column:2;
    grid-row:1;
    font-size:18px;
    margin:0;
    align-self:center;
  }

  .box p,
  .card p {
    grid-column:1 / -1;
    grid-row:2;
    margin:0;
  }
}

@media (max-width:430px) {
  .top-bar {
    width:calc(100% - 14px);
    padding:8px;
    border-radius:22px;
  }

  .logo-wrap img {
    width:52px;
    height:52px;
  }

  .brand-title {
    font-size:14px;
  }

  .brand-line span { width:48px; }

  .nav {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:5px;
  }

  .nav a {
    min-height:32px;
    padding:8px 4px;
    font-size:11.5px;
  }

  .hero,
  .page-hero {
    padding-top:280px;
  }

  .hero-bubble,
  .page-hero-card,
  .page-hero-content {
    padding:28px 18px;
  }

  .hero-bubble h1,
  .page-hero-card h1,
  .page-hero-content h1 {
    font-size:clamp(32px, 11vw, 44px);
  }
}

@media (max-width:340px) {
  .brand-title { font-size:13px; }
  .brand-line span { width:40px; }
  .nav a { font-size:11px; }

  .hero,
  .page-hero {
    padding-top:292px;
  }
}