/* =============================================
   PAGES.CSS  — Styles for About, Services,
   Portfolio, Contact pages
   Inherits variables from style.css
============================================= */

/* =============================================
   PAGE HERO (shared across all inner pages)
============================================= */
.page-hero {
  background: linear-gradient(135deg, var(--blue-pale) 0%, #dce9ff 60%, var(--white) 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
}
.page-hero--short { padding: 200px 0 70px; }
.page-hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.ph-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
}
.ph-shape-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--blue-main), transparent 70%);
  top: -100px; right: -80px;
}
.ph-shape-2 {
  width: 240px; height: 240px;
  background: radial-gradient(circle, var(--blue-mid), transparent 70%);
  bottom: -60px; left: 8%;
}
.page-hero-inner {
  display: flex;
  align-items: center;
  gap: 56px;
  position: relative;
  z-index: 1;
}
.page-hero-content { flex: 1; }
.page-hero-title {
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.15;
  margin-bottom: 16px;
}
.page-hero-title .highlight { color: var(--blue-main); }
.page-hero-content > p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 480px;
  margin-bottom: 20px;
}
.page-hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
}
.page-hero-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 100%;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
}
.breadcrumb a { color: var(--blue-main); font-weight: 500; }
.breadcrumb i { font-size: 10px; }

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

/* Story Layout */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}
.about-story-image { position: relative; }
.about-story-image img {
  border-radius: var(--radius-lg);
  /*box-shadow: var(--shadow-lg);*/
  width: 100%;
}
.story-badge {
  position: absolute;
  bottom: 24px;
  right: -20px;
  background: var(--blue-main);
  color: var(--white);
  border-radius: var(--radius);
  padding: 18px 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.story-badge .stat-num {
  display: block;
  font-size: 32px;
  font-weight: 800;
  font-family: var(--font-head);
  line-height: 1;
}
.story-badge .stat-label { font-size: 12px; opacity: 0.85; }
.about-story-content p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.75;
}
.story-stats {
  display: flex;
  gap: 32px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-item { text-align: center; }
.stat-big {
  display: block;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 800;
  color: var(--blue-main);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-item > span:last-child { font-size: 17px; color: var(--text-muted); }

/* Mission / Vision / Values */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.mvv-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.mvv-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.mvv-card--accent {
  background: var(--blue-main);
  border-color: var(--blue-main);
}
.mvv-card--accent h4,
.mvv-card--accent p { color: var(--white); }
.mvv-card--accent .mvv-icon { background: rgba(255,255,255,0.2); }
.mvv-icon {
  width: 56px; height: 56px;
  background: var(--blue-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.mvv-icon i { color: var(--blue-main); font-size: 22px; }
.mvv-card--accent .mvv-icon i { color: var(--white); }
.mvv-card h4 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.mvv-card p { font-size: 17px; color: var(--text-muted); line-height: 1.7; }

/* Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.team-card {
  /*background: var(--blue-pale);*/
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}
.team-img img {
  width: 100%;
  transition: transform 0.4s;
}
.team-card:hover .team-img img { transform: scale(1.04); }
.team-info { padding: 20px; }
.team-info h5 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.team-info > span {
  display: block;
  font-size: 13px;
  color: var(--blue-main);
  font-weight: 500;
  margin-bottom: 12px;
}
.team-socials { display: flex; gap: 10px; }
.team-socials a {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-main);
  font-size: 13px;
  transition: all var(--transition);
}
.team-socials a:hover { background: var(--blue-main); color: var(--white); }

/* Why Choose Us */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.why-item:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
.why-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-icon i { color: var(--blue-main); font-size: 20px; }
.why-item h5 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.why-item p { font-size: 17px; color: var(--text-muted); line-height: 1.65; }

/* =============================================
   SERVICES PAGE
============================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 16px;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  border: 1px solid var(--border);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.service-card:hover::after { transform: scaleX(1); }
.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.service-card--featured {
  background: var(--blue-main);
  border-color: var(--blue-main);
}
.service-card--featured h4,
.service-card--featured p,
.service-card--featured .service-features li { color: var(--white) !important; }
.service-card--featured .service-card-icon { background: rgba(255,255,255,0.2); }
.service-card--featured .service-card-icon i { color: var(--white); }
.service-card--featured .service-features li i { color: rgba(255,255,255,0.7); }
.service-card--featured .card-link { color: rgba(255,255,255,0.9); }
.service-card--featured::after { background: var(--white); }

.service-card-icon {
  width: 60px; height: 60px;
  background: var(--blue-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.service-card-icon i { color: var(--blue-main); font-size: 24px; }
.service-card h4 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.service-card p { font-size: 17px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.service-features { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.service-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--text-muted);
}
.service-features li i { color: var(--blue-main); font-size: 12px; }

/* Process Steps */
.process-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 48px;
  position: relative;
}
.process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.step-number {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  color: var(--blue-main);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.step-connector {
  width: 100%;
  height: 2px;
  background: var(--border);
  position: absolute;
  top: 52px;
  left: 50%;
  z-index: 0;
}
.step-connector.last { display: none; }
.step-body { padding: 0 12px; position: relative; z-index: 1; }
.step-icon {
  width: 60px; height: 60px;
  background: var(--blue-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px rgba(0,85,204,0.3);
}
.step-icon i { color: var(--white); font-size: 22px; }
.step-body h5 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.step-body p { font-size: 17px; color: var(--text-muted); line-height: 1.6; }

/* Tech Grid */
.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
}
.tech-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--blue-pale);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  transition: all var(--transition);
}
.tech-badge i { font-size: 20px; color: var(--blue-main); }
.tech-badge:hover {
  background: var(--blue-main);
  color: var(--white);
  border-color: var(--blue-main);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.tech-badge:hover i { color: var(--white); }

/* FAQ */
.faq-container { max-width: 780px; }
.faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  transition: color var(--transition);
  font-family: var(--font-body);
}
.faq-q:hover { color: var(--blue-main); }
.faq-q i {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--blue-main);
  transition: transform 0.3s;
}
.faq-item.open .faq-q { color: var(--blue-main); }
.faq-item.open .faq-q i { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
}
.faq-item.open .faq-a { max-height: 200px; }
.faq-a p {
  padding: 0 24px 20px;
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* =============================================
   PORTFOLIO PAGE
============================================= */

/* Stats Bar */
.stats-bar {
  background: var(--blue-main);
  padding: 40px 0;
}
.stats-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-bar-item { text-align: center; }
.stat-bar-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-bar-label {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
}

/* Portfolio Filter */
.portfolio-filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px 0;
}
.filter-btn {
  padding: 10px 22px;
  border-radius: 100px;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--text-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--blue-main);
  color: var(--white);
  border-color: var(--blue-main);
}

/* Portfolio Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.portfolio-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--white);
  transition: all var(--transition);
}
.portfolio-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}
.portfolio-img { position: relative; overflow: hidden; }
.portfolio-img img {
  width: 100%;
  display: block;
  transition: transform 0.4s;
}
.portfolio-card:hover .portfolio-img img { transform: scale(1.07); }
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,58,153,0.92), rgba(0,85,204,0.7));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.35s;
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-tag {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.portfolio-overlay h5 {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}
.portfolio-overlay p {
  font-size: 13px;
  color: rgba(255,255,255,0.82);
  line-height: 1.55;
  margin-bottom: 16px;
}
.portfolio-meta { padding: 20px; }
.p-cat {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-main);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.portfolio-meta h5 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.portfolio-meta p { font-size: 17px; color: var(--text-muted); }

/* Mini Testimonials */
.mini-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.mini-tcard {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.mini-tcard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.mini-tcard .quote-icon { font-size: 28px; color: var(--blue-main); opacity: 0.25; margin-bottom: 12px; }
.mini-tcard > p {
  font-size: 17px;
  color: var(--text-body);
  /*font-style: italic;*/
  line-height: 1.7;
  margin-bottom: 20px;
}

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

/* Info Cards */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}
.contact-info-card {
  background: var(--blue-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
  transition: all var(--transition);
}
.contact-info-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.contact-info-card--accent {
  background: var(--blue-main);
  border-color: var(--blue-main);
}
.contact-info-card--accent .ci-icon { background: rgba(255,255,255,0.2); }
.contact-info-card--accent .ci-icon i { color: var(--white); }
.contact-info-card--accent h5,
.contact-info-card--accent p,
.contact-info-card--accent a { color: var(--white) !important; }
.ci-icon {
  width: 52px; height: 52px;
  background: var(--blue-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.ci-icon i { color: var(--blue-main); font-size: 20px; }
.contact-info-card h5 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.contact-info-card p {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
}
.contact-info-card a { color: var(--blue-main); font-weight: 500; }

/* Contact Form + Sidebar */
.contact-main-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: flex-start;
}
.contact-form-panel {
  background: var(--blue-pale);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  border: 1px solid var(--border);
}

/* Form Elements */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue-main);
  box-shadow: 0 0 0 3px rgba(0,85,204,0.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group textarea { resize: vertical; min-height: 130px; }
.select-wrapper { position: relative; }
.select-wrapper select { padding-right: 40px; cursor: pointer; }
.select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
}
.req { color: #e53e3e; }
.form-group--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.form-group--check input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue-main);
}
.form-group--check label {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
}
.form-group--check label a { color: var(--blue-main); }
.btn-submit { width: 100%; justify-content: center; }
.form-success {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #e6ffed;
  border: 1px solid #68d391;
  border-radius: var(--radius);
  color: #276749;
}
.form-success i { font-size: 24px; color: #38a169; }
.form-success strong { display: block; font-weight: 700; margin-bottom: 2px; }
.form-success span { font-size: 13px; }

/* Contact Sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: 24px; }
.map-placeholder { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.book-call-box {
  background: var(--blue-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
}
.book-call-icon {
  width: 54px; height: 54px;
  background: var(--blue-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.book-call-icon i { color: var(--white); font-size: 22px; }
.book-call-box h4 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.book-call-box p { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }

.contact-socials-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.contact-socials-box h5 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.contact-social-links { display: flex; flex-direction: column; gap: 10px; }
.social-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-body);
  font-size: 17px;
  font-weight: 500;
  transition: all var(--transition);
  border: 1px solid transparent;
}
.social-link-item i { color: var(--blue-main); font-size: 18px; width: 22px; }
.social-link-item:hover {
  background: var(--blue-pale);
  border-color: var(--border);
  color: var(--blue-main);
}

/* What Happens Next steps */
.contact-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.contact-step {
  flex: 1;
  min-width: 160px;
  text-align: center;
  padding: 0 12px;
}
.cs-num {
  width: 52px; height: 52px;
  background: var(--blue-main);
  color: var(--white);
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px rgba(0,85,204,0.3);
}
.contact-step h6 {
  font-family: var(--font-head);
  font-size: 17px; 
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.contact-step p { font-size: 16px; color: var(--text-muted); line-height: 1.6; }
.cs-arrow {
  display: flex;
  align-items: center;
  padding-top: 26px;
  color: var(--blue-main);
  opacity: 0.4;
  font-size: 16px;
}

/* =============================================
   RESPONSIVE — TABLET (≤ 960px)
============================================= */
@media (max-width: 960px) {

  .page-hero-inner { flex-direction: column; gap: 36px; text-align: center; }
  .page-hero-content > p { max-width: 100%; margin-left: auto; margin-right: auto; }
  .breadcrumb { justify-content: center; }

  /* About */
  .about-story-grid { grid-template-columns: 1fr; gap: 48px; }
  .story-badge { right: 10px; }
  .mvv-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { flex-direction: column; align-items: center; gap: 20px; }
  .step-connector { display: none; }
  .process-step { width: 100%; max-width: 340px; }

  /* Portfolio */
  .stats-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-testimonials { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-main-grid { grid-template-columns: 1fr; }
  .contact-sidebar { flex-direction: row; flex-wrap: wrap; }
  .contact-sidebar > * { flex: 1; min-width: 260px; }
  .map-placeholder iframe { height: 220px; }
}

/* =============================================
   RESPONSIVE — MOBILE (≤ 640px)
============================================= */
@media (max-width: 640px) {

  .page-hero { padding: 56px 0 40px; }
  .page-hero-image { display: none; }

  /* About */
  .story-stats { gap: 16px; }
  .mvv-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .why-grid { grid-template-columns: 1fr; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }
  .tech-grid { gap: 10px; }
  .tech-badge { font-size: 13px; padding: 10px 16px; }

  /* Portfolio */
  .stats-bar-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-filters { gap: 8px; }
  .filter-btn { padding: 8px 16px; font-size: 13px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-overlay { opacity: 1; }
  .mini-testimonials { grid-template-columns: 1fr; }

  /* Contact */
  .contact-info-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .contact-form-panel { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-sidebar { flex-direction: column; }
  .contact-steps { flex-direction: column; align-items: center; gap: 16px; }
  .cs-arrow { transform: rotate(90deg); padding-top: 0; }
  .contact-step { min-width: unset; width: 100%; max-width: 300px; }
}
/* =============================================
   SECTION RHYTHM / BACKGROUND HARMONY FIX
   Adds visual separation where sections with
   inline pale backgrounds sit adjacent to
   other pale sections or the footer, so the
   page reads as one continuous flow (matching
   reference site symmetry) instead of stacked
   blocks.
============================================= */

/* Any section with an inline blue-pale background gets a
   subtle top/bottom border to separate it from neighboring
   sections that share the same tone (e.g. footer). */
section.section[style*="blue-pale"] {
  /*border-top: 1px solid var(--border);*/
  /*border-bottom: 1px solid var(--border);*/
}

/* When a pale section is immediately followed by the footer
   (also pale), the shared border above keeps a visible seam
   so the two don't visually merge into one flat block. */
section.section[style*="blue-pale"] + .footer {
  /*border-top: 1px solid var(--border);*/
}

/* Stats bar (solid blue) sits directly under the page-hero;
   ensure no gap/seam shows between them. */
.page-hero + .stats-bar { margin-top: -1px; }

/* Page hero with dark image overlay should sit flush against
   the header with no light gap. */
.page-hero { margin-top: -1px; }

/* Footer always gets a defined top edge so it never blends
   into a same-toned section above it. */
/*.footer { border-top: 1px solid var(--border); }*/



/*for mobile view*/
/* =============================================
   MOBILE RESPONSIVE FIX — Contact Page
   Target: ≤ 480px (covers 403px viewport)
   Append this block to the END of pages.css
============================================= */

/* ---- 480px and below ---- */
@media (max-width: 480px) {

  /* --- Page Hero --- */
  .page-hero,
  .page-hero--short {
    padding: 40px 0 30px;
  }
  .page-hero-inner {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  .page-hero-image {
    display: none; /* hide hero image on very small screens */
  }
  .page-hero-title {
    font-size: clamp(22px, 7vw, 30px);
  }
  .breadcrumb {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* --- Contact Info Grid: force single column on tiny screens --- */
  .contact-info-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* --- Contact main layout: stack form above sidebar --- */
  .contact-main-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  /* --- Contact form panel padding --- */
  .contact-form-panel {
    padding: 22px 16px;
  }

  /* --- Form rows: always 1 column --- */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* --- Contact sidebar: always stacked --- */
  .contact-sidebar {
    flex-direction: column !important;
    gap: 18px;
  }
  .contact-sidebar > * {
    min-width: unset !important;
    width: 100%;
  }

  /* --- Map iframe: shorter on mobile --- */
  .map-placeholder iframe {
    height: 200px !important;
  }

  /* --- What Happens Next steps: vertical --- */
  .contact-steps {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .cs-arrow {
    transform: rotate(90deg);
    padding-top: 0;
  }
  .contact-step {
    width: 100%;
    max-width: 300px;
    min-width: unset;
  }

  /* --- Book call box --- */
  .book-call-box {
    padding: 22px 18px;
  }
  .book-call-box h4 { font-size: 16px; }

  /* --- Social links box --- */
  .contact-socials-box {
    padding: 18px 16px;
  }

  /* --- Submit button --- */
  .btn-submit {
    width: 100%;
    justify-content: center;
  }

  /* --- Checkbox label wrapping --- */
  .form-group--check {
    align-items: flex-start;
    gap: 10px;
  }
  .form-group--check label {
    font-size: 13px;
    line-height: 1.5;
  }

  /* --- FAQ section (if on contact page) --- */
  .faq-q {
    font-size: 14px;
    padding: 16px 16px;
  }
  .faq-a p {
    padding: 0 16px 16px;
    font-size: 13px;
  }
}

/* ---- 380px and below (very small phones) ---- */
@media (max-width: 380px) {

  .contact-form-panel {
    padding: 18px 12px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 14px;
    padding: 11px 12px;
  }

  .contact-info-card {
    padding: 20px 14px;
  }

  .ci-icon {
    width: 44px;
    height: 44px;
  }

  .contact-info-card h5 { font-size: 14px; }
  .contact-info-card p  { font-size: 13px; }

  .page-hero-title { font-size: 22px; }
}

/* ---- Also fix 640px breakpoint — replace existing block ---- */
/* The existing ≤640px block sets contact-info-grid to 1fr 1fr
   which is still too wide at 403px. This overrides that: */
@media (max-width: 640px) {

  /* Contact info: 2-col on 500-640px, 1-col handled above */
  .contact-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Ensure sidebar always stacks below form on mobile */
  .contact-main-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-sidebar {
    flex-direction: column;
  }
  .contact-sidebar > * {
    min-width: unset;
    width: 100%;
  }

  .contact-form-panel {
    padding: 28px 18px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .map-placeholder iframe {
    height: 200px;
  }

  /* What Happens Next */
  .contact-steps {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .cs-arrow {
    transform: rotate(90deg);
    padding-top: 0;
  }
  .contact-step {
    min-width: unset;
    width: 100%;
    max-width: 300px;
  }
}