/* ==========================================================================
   Page-specific sections. Loaded after style.css.
   ========================================================================== */

/* Section heading (label + title + optional controls) */
.ca-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.ca-section-head h2 { font-size: clamp(2rem, 4vw, 3.5rem); text-transform: uppercase; letter-spacing: 2px; }
.ca-section-head .head-actions { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   HOME — Hero
   ========================================================================== */
.home-hero { position: relative; display: flex; align-items: stretch; min-height: 100vh; margin-top: -85px; padding-top: 85px; background: radial-gradient(65% 90% at 6% 30%, rgba(59,180,131,0.22) 0%, rgba(59,180,131,0.06) 36%, transparent 66%); }
.home-hero__inner { width: 100%; display: grid; grid-template-columns: 1.6fr 0.8fr; gap: 40px; align-items: stretch; padding: 64px 0 52px; }
.home-hero__left { display: flex; flex-direction: column; height: 100%; padding-left: 30px; }
.home-hero__text { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.home-hero__partners { margin-bottom: 20px; }
@media (max-width: 992px) { .home-hero { min-height: 0; } .home-hero__left, .home-hero__text { display: block; } }
.home-hero h1 { font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 22px; max-width: 820px; }
.home-hero__subtitle { color: var(--white-muted); font-size: 16px; line-height: 1.8; font-weight: 300; max-width: 600px; }
.home-hero__partners { display: flex; align-items: center; gap: 20px 40px; flex-wrap: wrap; max-width: 100%; }
.home-hero__partners img { height: 50px; width: auto; max-width: 100%; object-fit: contain; flex: 0 0 auto; }
@media (max-width: 480px) { .home-hero__partners { gap: 14px 24px; } .home-hero__partners img { height: 40px; } }
.home-hero__form { background: transparent; border: 1px solid var(--card-border); border-radius: 20px; padding: 38px 32px; max-width: 400px; margin-left: auto; width: 100%; align-self: center; }
.home-hero__form h3 { font-size: 30px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; text-align: center; line-height: 1.15; }
.home-hero__form .subtitle { color: var(--white-muted); font-size: 14px; margin-bottom: 26px; text-align: center; }
.home-hero__form .form-group input { padding: 15px 18px; border-radius: 14px; }
.home-hero__form .phone-input-container { border-radius: 14px; }
.home-hero__form .country-selector { border-radius: 14px 0 0 14px; }
.home-hero__form .phone-input-container .phone-input { border-radius: 0 14px 14px 0; }
.home-hero__form .btn-submit { padding: 16px 24px; border-radius: 14px; }
@media (max-width: 992px) { .home-hero__inner { grid-template-columns: 1fr; gap: 32px; padding-left: 20px; padding-right: 20px; } .home-hero__left { padding-left: 0; } .home-hero__partners { margin-top: 32px; } .home-hero__form { margin: 0; max-width: 480px; } }

/* Partners (fallback separate section, if not shown in hero) */
.partners { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; padding: 24px 0 12px; opacity: 0.9; }
.partners img { height: 48px; width: auto; object-fit: contain; }

/* Client logo marquee — bordered strip after the hero */
.logo-marquee-section { border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); padding: 26px 0; }

/* Who we are */
.who-we-are { padding: 60px 0; }
.who-we-are .section-label { margin-bottom: 20px; }
.who-we-are p { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.7; color: var(--white); font-weight: 300; max-width: 1000px; margin-bottom: 32px; }
/* Word-by-word brighten on scroll (Who We Are). */
.ca-word-reveal .word { display: inline-block; opacity: 0.28; will-change: opacity; }
@media (prefers-reduced-motion: reduce) { .ca-word-reveal .word { opacity: 1 !important; } }

/* Stats + brand stack */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 330px; background: linear-gradient(135deg, rgba(59,180,131,0.08) 0%, rgba(26,30,41,0.6) 100%); border: 1px solid var(--card-border); border-radius: 24px; padding: 40px 32px; transition: all 0.4s var(--ease); }
.stat-card:hover { border-color: var(--accent-main); transform: translateY(-5px); }
.stat-card.has-brands { justify-content: flex-end; }
.stat-number { font-family: 'Chakra Petch',sans-serif; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; color: var(--white); -webkit-text-fill-color: var(--white); background: none; line-height: 1; margin-bottom: 10px; }
.stat-label { font-size: 14px; color: var(--white-muted); text-transform: none; letter-spacing: 0; }
.stat-card .click-brands-wrapper { margin-bottom: auto; }
@media (max-width: 900px) { .stats-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Carousels (shared shell)
   ========================================================================== */
.ca-carousel-wrap { position: relative; }
.carousel-progress { margin-bottom: 28px; }
.carousel-progress-bar { height: 2px; background: rgba(59,180,131,0.15); border-radius: 2px; overflow: hidden; }
.carousel-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-main) 0%, var(--accent-light) 100%); border-radius: 2px; transition: width 0.3s ease; }
.carousel-progress-info { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.carousel-progress-count { font-size: 13px; color: var(--white-subtle); }
.carousel-progress-count span { font-weight: 600; color: var(--accent-main); }
.carousel-nav { display: flex; align-items: center; gap: 10px; }
.carousel-drag-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--white-subtle); margin-right: 14px; }
.carousel-drag-hint svg { width: 18px; height: 18px; animation: caDrag 1.5s ease-in-out infinite; }
@keyframes caDrag { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
.nav-btn { width: 54px; height: 46px; border-radius: 12px; border: 1px solid rgba(59,180,131,0.4); background: var(--accent-main); color: var(--bg-darkest); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s; }
.nav-btn:hover:not(:disabled) { background: var(--accent-light); border-color: var(--accent-light); transform: translateY(-2px); }
.nav-btn:disabled { background: rgba(255,255,255,0.02); border-color: var(--card-border); color: var(--white-subtle); cursor: default; }
.nav-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-carousel { position: relative; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0; cursor: grab; user-select: none; touch-action: pan-y; }
.ca-carousel::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 60px; background: linear-gradient(to right, rgba(26,30,41,0), var(--bg-darkest)); pointer-events: none; z-index: 3; }
.ca-carousel:active { cursor: grabbing; }
.ca-carousel__track { display: flex; gap: 24px; will-change: transform; }

/* Project card (carousel + archive) */
.project-card { flex-shrink: 0; width: 400px; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; position: relative; background: var(--bg-card); border: 1px solid var(--card-border); display: flex; flex-direction: column; justify-content: flex-end; transition: all 0.5s var(--ease); }
.project-card__bg { position: absolute; inset: 0; z-index: 0; }
.project-card__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: transform 0.6s var(--ease), opacity 0.4s; }
.project-card__bg.ph { background: radial-gradient(120% 80% at 50% 0%, rgba(59,180,131,0.12) 0%, transparent 55%), linear-gradient(160deg, #202839 0%, var(--bg-darkest) 100%); }
.project-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,30,41,0.15) 0%, rgba(26,30,41,0) 42%, rgba(26,30,41,0.55) 72%, rgba(26,30,41,0.95) 100%); }
.project-card:hover { border-color: var(--accent-main); transform: translateY(-8px); box-shadow: 0 25px 60px rgba(59,180,131,0.2); }
.project-card__logo { position: absolute; top: 24px; left: 24px; z-index: 2; height: 40px; }
.project-card__logo img { height: 100%; width: auto; object-fit: contain; }
.project-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px; }
.project-card__result { font-family: 'Labora','Chakra Petch',sans-serif; font-size: 56px; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--accent-main) 0%, var(--accent-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.project-card__result-text { color: var(--white-muted); font-size: 15px; margin-top: 6px; }
.project-card__title { color: var(--white); font-size: 18px; text-transform: uppercase; letter-spacing: 1px; margin-top: 16px; }

/* Service card (carousel) */
.service-card { flex-shrink: 0; width: 380px; background: linear-gradient(135deg, rgba(25,38,56,0.6) 0%, rgba(26,30,41,0.8) 100%); border: 1px solid var(--card-border); border-radius: 20px; padding: 40px 32px; position: relative; overflow: hidden; transition: all 0.4s var(--ease); }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-main) 0%, var(--accent-light) 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { border-color: var(--accent-main); transform: translateY(-10px); box-shadow: 0 25px 50px rgba(59,180,131,0.2); }
.service-card.featured { background: linear-gradient(135deg, var(--accent-main) 0%, var(--accent-dark) 100%); border-color: var(--accent-main); }
.service-card.featured::before { display: none; }
.service-card.featured .service-title, .service-card.featured .service-price { color: var(--bg-darkest); }
.service-card.featured .service-description { color: rgba(26,30,41,0.7); }
.service-card.featured .service-number { background: rgba(26,30,41,0.3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.service-number { font-family: 'Labora','Chakra Petch',sans-serif; font-size: 48px; font-weight: 700; background: linear-gradient(135deg, var(--accent-main) 0%, var(--accent-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 24px; }
.service-title { font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 16px; letter-spacing: 0.5px; line-height: 1.3; }
.service-description { font-size: 15px; color: var(--white-muted); line-height: 1.8; margin-bottom: 28px; font-weight: 300; min-height: 80px; }
.service-price-divider { height: 1px; background: rgba(59,180,131,0.2); margin-bottom: 20px; }
.service-price { font-size: 22px; font-weight: 700; color: var(--accent-main); }
/* Service cards link to their internal page */
.service-card { text-decoration: none; color: inherit; display: block; }
/* Single service page: keep the editor (SEO) content readable + compact */
.single-service__content { padding: 8px 0 40px; }
.single-service__content .entry-content { max-width: 820px; }
/* About page: internal links to every service page */
.about-services { max-width: 1200px; margin: 0 auto; padding: 20px 24px 40px; }
.about-services .values-header { margin-bottom: 40px; }
.about-services-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.about-services-grid li { display: flex; }
.about-services-grid li a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; width: 100%; min-height: 156px; padding: 26px 24px; background: linear-gradient(150deg, var(--bg-card) 0%, rgba(26,30,41,0.85) 100%); border: 1px solid var(--card-border); border-radius: 16px; color: var(--white); font-weight: 600; font-size: 15px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.about-services-grid li a::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-main) 0%, var(--accent-light) 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.about-services-grid li a::after { content: '\2197'; align-self: flex-end; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(59,180,131,0.12); color: var(--accent-main); font-size: 17px; font-weight: 400; flex-shrink: 0; transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease); }
.about-services-grid li a:hover { border-color: var(--accent-main); transform: translateY(-6px); box-shadow: 0 20px 44px rgba(59,180,131,0.16); }
.about-services-grid li a:hover::before { transform: scaleX(1); }
.about-services-grid li a:hover::after { background: var(--accent-main); color: var(--bg-darkest); transform: translate(3px,-3px); }
/* Home services carousel card: tighter vertical padding + price flush to the bottom (kills the stretched empty gap) */
.ca-carousel .service-card { display: flex; flex-direction: column; padding: 28px 32px; }
.ca-carousel .service-description { flex: 1; }

/* Blog cards */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { background: transparent; border: none; display: flex; flex-direction: column; transition: transform 0.5s var(--ease); }
.blog-card:hover { transform: scale(1.03); z-index: 2; }
.blog-card__img { aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; background: #0d1b2e; cursor: pointer; }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s var(--ease); }
.blog-card:hover .blog-card__img img { transform: scale(1.12); }
.blog-card__body { padding: 20px 0 0; flex: 1; display: flex; flex-direction: column; }
.blog-card__title { color: var(--white); font-size: 18px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; line-height: 1.3; }
.blog-card__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.blog-card__badge { background: var(--accent-main); color: var(--bg-darkest); font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 6px; text-transform: none; }
.blog-card__date { color: var(--white-muted); font-size: 14px; font-weight: 500; }
.blog-card__excerpt { color: rgba(255,255,255,0.92); font-size: 18px; line-height: 1.55; font-weight: 400; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__more { margin-top: 18px; color: var(--white); font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.35s ease; }
.blog-card__more svg { transition: transform 0.4s var(--ease); }
.blog-card:hover .blog-card__more { color: var(--accent-main); }
.blog-card:hover .blog-card__more svg { transform: translate(3px, -3px); }
@media (max-width: 992px) { .blog-grid { grid-template-columns: 1fr; } }

/* Project archive grid (reuses .project-card, but fluid width) */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.projects-grid .project-card { width: auto; }
@media (max-width: 992px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .projects-grid { grid-template-columns: 1fr; } }

/* Archive intro paragraph spacing */
.ca-archive-wrap { max-width: 1400px; margin: 0 auto; padding: 0 56px 96px; }

/* ===== Site-wide BOXED content: 1400px max-width + 56px side padding =====
   Header & footer live OUTSIDE .site-content (</main> closes before the footer),
   so they keep their own full-width layout and are unaffected. The home hero keeps
   its own tuned horizontal padding. */
.site-content .ca-container { max-width: 1400px; }
.site-content .ca-container:not(.home-hero__inner) { padding-left: 56px; padding-right: 56px; }

/* Mobile: 56px boxed padding is far too wide on phones — pull the home sections
   (who-we-are / stats / projects / services / blogs) in toward the edges. */
@media (max-width: 992px) { .site-content .ca-container:not(.home-hero__inner) { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 600px) {
	.site-content .ca-container:not(.home-hero__inner) { padding-left: 20px; padding-right: 20px; }
	.who-we-are p { font-size: 1.4rem; line-height: 1.65; }
	.ca-carousel .project-card { width: 280px; }
	.ca-carousel .service-card { width: 280px; }
	.ca-section-head .head-actions { width: 100%; }
	.ca-section-head .head-actions .btn-service-outlined { margin-right: auto; width: 54px; height: 46px; padding: 0; justify-content: center; }
	.ca-section-head .head-actions .btn-service-outlined span { display: none; }
}

/* ==========================================================================
   SERVICES archive — 1:1 port of the reference. Grid card rules are scoped to
   .services-grid so the homepage service *carousel* keeps its own styling.
   ========================================================================== */
.services-hero { padding: 120px 5% 60px; max-width: 1400px; margin: 0 auto; }
.services-hero .hero-label { margin-bottom: 32px; }
.services-hero h1 { font-size: 72px; text-transform: uppercase; line-height: 1.05; margin-bottom: 32px; letter-spacing: 2px; }
.services-hero .hero-description { font-size: 18px; color: var(--white-muted); max-width: 700px; line-height: 1.8; font-weight: 300; }

.services-section { padding: 48px 5% 96px; max-width: 1400px; margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.services-grid .service-card { width: auto; min-height: 320px; display: flex; flex-direction: column; background: linear-gradient(135deg, var(--bg-card) 0%, rgba(26,30,41,0.9) 100%); border-radius: 24px; padding: 40px 32px; transition: all 0.5s var(--ease); }
.services-grid .service-card:hover { box-shadow: 0 25px 60px rgba(59,180,131,0.2); }
.services-grid .service-number { margin-bottom: 32px; transition: transform 0.5s; }
.services-grid .service-card:hover .service-number { transform: scale(1.1); }
.services-grid .service-content { flex: 1; display: flex; flex-direction: column; }
.services-grid .service-title { font-size: 20px; letter-spacing: 1px; }
.services-grid .service-description { flex: 1; min-height: 0; margin-bottom: 24px; }
.services-grid .service-price { font-family: 'Labora','Chakra Petch',sans-serif; font-size: 16px; font-weight: 700; color: var(--white); letter-spacing: 1px; padding-top: 24px; border-top: 1px solid var(--card-border); }
.services-grid .service-price .amount { color: var(--accent-main); }
/* Featured = subtle green tint + visible top border (not the solid carousel look) */
.services-grid .service-card.featured { background: linear-gradient(135deg, rgba(59,180,131,0.1) 0%, var(--bg-card) 100%); border-color: rgba(59,180,131,0.3); }
.services-grid .service-card.featured::before { display: block; transform: scaleX(1); }
.services-grid .service-card.featured .service-title, .services-grid .service-card.featured .service-price { color: var(--white); }
.services-grid .service-card.featured .service-description { color: var(--white-muted); }
.services-grid .service-card.featured .service-number { background: linear-gradient(135deg, var(--accent-main) 0%, var(--accent-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Services CTA — h2 sized to the reference (56px), no rotating glow */
.services-cta .cta-card h2 { font-size: 56px; }
.services-cta .cta-card p { max-width: 600px; }

@media (max-width: 1200px) {
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.services-hero h1 { font-size: 56px; }
	.services-cta .cta-card h2 { font-size: 44px; }
}
@media (max-width: 768px) {
	.services-hero { padding: 80px 5% 48px; }
	.services-hero h1 { font-size: 40px; }
	.services-section { padding: 32px 5% 64px; }
	.services-grid { grid-template-columns: 1fr; gap: 24px; }
	.services-grid .service-card { min-height: auto; padding: 32px 24px; }
	.services-grid .service-number { font-size: 40px; margin-bottom: 24px; }
	.services-cta .cta-card h2 { font-size: 32px; }
}

/* ==========================================================================
   CTA card (about/services)
   ========================================================================== */
.cta-section { padding: 96px 5%; text-align: center; max-width: var(--container); margin: 0 auto; }
.cta-card { background: linear-gradient(135deg, rgba(59,180,131,0.1) 0%, rgba(25,38,56,0.4) 100%); border: 1px solid var(--accent-main); border-radius: 32px; padding: 64px 48px; position: relative; overflow: hidden; }
.cta-card h2 { font-size: clamp(2rem, 5vw, 4rem); text-transform: uppercase; margin-bottom: 24px; letter-spacing: 2px; }
.cta-card p { color: var(--white-muted); font-size: 18px; margin: 0 auto 40px; max-width: 640px; font-weight: 300; }
.cta-buttons { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }

/* About CTA — reference's rotating radial glow (scoped so services is untouched) */
.about-cta { padding: 120px 5%; max-width: 1400px; }
.about-cta .cta-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(168,230,207,0.1) 0%, transparent 70%); animation: caCtaGlow 25s linear infinite; }
@keyframes caCtaGlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.about-cta .cta-card h2 { font-size: 64px; position: relative; z-index: 1; }
.about-cta .cta-card p { max-width: 650px; position: relative; z-index: 1; }
.about-cta .cta-buttons { position: relative; z-index: 1; }
@media (max-width: 1200px) { .about-cta .cta-card h2 { font-size: 48px; } }
@media (max-width: 768px) {
	.about-cta { padding: 80px 5%; }
	.about-cta .cta-card { padding: 48px 24px; }
	.about-cta .cta-card h2 { font-size: 32px; }
	.about-cta .cta-buttons { flex-direction: column; align-items: center; }
	.about-cta .btn-service, .about-cta .btn-service-outlined { width: 100%; max-width: 300px; justify-content: center; }
}

/* ==========================================================================
   CONTACT page — split (1:1 port of the reference)
   ========================================================================== */
.contact-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding: 40px; gap: 0; }

/* Left panel — fixed-height green card, centered, with a slow rotating glow */
.contact-left-wrapper { display: flex; align-items: center; justify-content: center; }
.contact-left { background: linear-gradient(135deg, var(--accent-main) 0%, var(--accent-dark) 50%, #1f7a54 100%); padding: 48px; border-radius: 32px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; width: 100%; max-width: 100%; height: 800px; }
.contact-left::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(168,230,207,0.15) 0%, transparent 60%); animation: caContactGlow 30s linear infinite; }
@keyframes caContactGlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.contact-left-content { position: relative; z-index: 2; max-width: 480px; }

/* Team avatars */
.team-avatars { display: flex; margin-bottom: 32px; }
.team-avatar { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(26,30,41,0.3); overflow: hidden; margin-left: -12px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.team-avatar:first-child { margin-left: 0; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Headline */
.contact-headline h1 { font-size: 48px; line-height: 1.15; color: var(--bg-darkest); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
.contact-headline h1 .line-accent { display: block; color: rgba(26,30,41,0.5); }
.contact-headline p { color: rgba(26,30,41,0.7); font-size: 16px; line-height: 1.7; font-weight: 400; margin-bottom: 40px; }

/* Quick contact list */
.quick-contact-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(26,30,41,0.12); }
.quick-contact-item:last-child { border-bottom: none; }
.quick-contact-item svg { width: 20px; height: 20px; color: var(--bg-darkest); opacity: 0.6; flex-shrink: 0; }
.quick-contact-item a, .quick-contact-item span { color: var(--bg-darkest); font-size: 15px; font-weight: 500; transition: opacity 0.3s ease; }
.quick-contact-item a:hover { opacity: 0.7; }

/* Socials — dark-on-green squares */
.contact-left .social-links { display: flex; gap: 10px; margin-top: 32px; }
.contact-left .social-link { width: 40px; height: 40px; background: rgba(26,30,41,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.contact-left .social-link:hover { background: var(--bg-darkest); }
.contact-left .social-link svg { width: 18px; height: 18px; color: var(--bg-darkest); transition: color 0.3s; }
.contact-left .social-link:hover svg { color: var(--accent-main); }

/* Right panel — form */
.contact-right { padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.contact-form-wrapper { max-width: 520px; width: 100%; margin: 0 auto; }
.contact-form-wrapper .form-header { margin-bottom: 28px; }
.contact-form-wrapper .form-header h2 { font-size: 28px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.contact-form-wrapper .form-header p { color: var(--white-subtle); font-size: 14px; font-weight: 300; }

/* Service chips */
.service-selection, .timeline-section { margin-bottom: 24px; }
.service-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.service-chip { padding: 8px 14px; background: rgba(59,180,131,0.08); border: 1px solid var(--card-border); border-radius: 8px; font-size: 12px; color: var(--white-muted); cursor: pointer; transition: all 0.3s ease; user-select: none; }
.service-chip:hover { background: rgba(59,180,131,0.15); border-color: rgba(59,180,131,0.3); }
.service-chip.active { background: var(--accent-main); border-color: var(--accent-main); color: var(--bg-darkest); font-weight: 600; }

/* Timeline */
.timeline-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.timeline-option { padding: 12px 8px; background: rgba(59,180,131,0.08); border: 1px solid var(--card-border); border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; }
.timeline-option:hover { background: rgba(59,180,131,0.15); border-color: rgba(59,180,131,0.3); }
.timeline-option.active { background: rgba(59,180,131,0.2); border-color: var(--accent-main); }
.timeline-option .time { font-family: 'Labora','Chakra Petch',sans-serif; font-size: 16px; font-weight: 700; color: var(--accent-main); display: block; }
.timeline-option .label { font-size: 10px; color: var(--white-subtle); text-transform: uppercase; letter-spacing: 1px; }

/* Form rows — z-index keeps the country dropdown above the fields below it */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; position: relative; }
.form-row.full { grid-template-columns: 1fr; }
.form-row.phone-row { z-index: 100; }
.form-row.message-row { z-index: 1; }

/* Submit + response time */
.submit-section { margin-top: 20px; position: relative; z-index: 1; }
.response-time { text-align: center; margin-top: 16px; }
.response-time p { font-size: 12px; color: var(--white-subtle); }
.response-time span { color: var(--accent-main); font-weight: 500; }

/* Contact responsive (matches the reference breakpoints) */
@media (max-width: 1100px) {
	.contact-page { padding: 32px; }
	.contact-left { padding: 40px; }
	.contact-right { padding: 48px 40px; }
	.contact-headline h1 { font-size: 40px; }
}
@media (max-width: 900px) {
	.contact-page { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
	.contact-left { padding: 32px; height: 600px; }
	.contact-right { padding: 40px 32px; }
	.contact-left-content { max-width: 100%; }
	.contact-form-wrapper { max-width: 100%; }
}
@media (max-width: 600px) {
	.contact-page { padding: 16px; gap: 16px; }
	.contact-left { padding: 28px 24px; border-radius: 24px; }
	.contact-right { padding: 32px 20px; }
	.contact-headline h1 { font-size: 32px; }
	.contact-form-wrapper .form-header h2 { font-size: 24px; }
	.form-row { grid-template-columns: 1fr; }
	.timeline-options { grid-template-columns: repeat(2, 1fr); }
	.team-avatar { width: 44px; height: 44px; margin-left: -10px; }
}

/* ==========================================================================
   Single project / blog
   ========================================================================== */
article.single-blog { padding-top: 40px; }
/* Single blog: narrower 1140 content column */
body.single-blog .site-content .ca-container { max-width: 1140px; }
/* ...except the bottom "More Blogs" slider, which is wider */
body.single-blog .site-content .ca-container.more-blogs-section { max-width: 1420px; padding: 20px 0 50px 60px; }
.single-banner { border-radius: 20px; overflow: hidden; margin: 0 0 28px; border: 1px solid var(--card-border); }
.single-banner img { width: 100%; height: 600px; object-fit: cover; object-position: center; display: block; }
.single-hero { padding: 0 0 28px; }
.single-hero h1 { font-size: 56px; text-transform: none; letter-spacing: 0.5px; line-height: 1.15; }
.single-date { display: inline-block; margin-top: 14px; color: var(--accent-main); font-size: 15px; font-weight: 500; }
.single-body { margin: 0 auto; padding: 8px 0 40px; }
.blog-related-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 48px 0 0; }
.blog-related-gallery img { width: 100%; border-radius: 16px; display: block; border: 1px solid var(--card-border); }
.ca-carousel .blog-card { flex-shrink: 0; width: 340px; }
.project-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin: 32px 0; }
.project-meta-grid .meta { background: var(--bg-card); border: 1px solid var(--card-border); border-radius: 16px; padding: 20px; }
.project-meta-grid .meta .k { color: var(--white-subtle); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.project-meta-grid .meta .v { color: var(--white); font-weight: 600; }
.project-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin: 40px 0; }
.project-results .res { text-align: center; }
.project-results .res .n { font-family: 'Labora','Chakra Petch',sans-serif; font-size: 44px; background: linear-gradient(135deg, var(--accent-main) 0%, var(--accent-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.project-results .res .t { color: var(--white-muted); font-size: 14px; margin-top: 6px; }

/* ==========================================================================
   ABOUT page
   ========================================================================== */
.about-hero { padding: 120px 5% 80px; max-width: 1400px; margin: 0 auto; }
.about-hero .hero-label { margin-bottom: 32px; }
.about-hero h1 { font-size: 72px; text-transform: uppercase; line-height: 1.05; margin-bottom: 32px; letter-spacing: 2px; max-width: 1000px; }
.about-hero .hero-description { font-size: 18px; color: var(--white-muted); max-width: 800px; line-height: 1.8; font-weight: 300; }

.story-section { padding: 80px 5%; max-width: 1400px; margin: 0 auto; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-content h2 { font-size: 56px; text-transform: uppercase; line-height: 1.1; margin-bottom: 32px; letter-spacing: 2px; }
.story-content p { font-size: 16px; color: var(--white-muted); line-height: 1.9; font-weight: 300; margin-bottom: 24px; }
.story-content p:last-of-type { margin-bottom: 40px; }

/* 360° orbit graphic — 100% CSS (rotation + counter-rotation), no GSAP */
.orbit-wrapper { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 500px; margin: 0 auto; }
.orbit-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; height: 280px; background: radial-gradient(circle, rgba(59,180,131,0.15) 0%, transparent 70%); border-radius: 50%; filter: blur(40px); animation: caOrbitGlow 4s ease-in-out infinite; }
@keyframes caOrbitGlow { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .5; } 50% { transform: translate(-50%,-50%) scale(1.2); opacity: .8; } }
.orbit-system { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; }
.center-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90px; height: 90px; background: linear-gradient(135deg, #3BB483 0%, #2a9d6e 100%); border-radius: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 50px rgba(59,180,131,.5), 0 0 100px rgba(59,180,131,.25), inset 0 1px 0 rgba(255,255,255,.2); z-index: 10; animation: caHubPulse 3s ease-in-out infinite; }
@keyframes caHubPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.05); } }
.center-hub svg { width: 44px; height: 48px; }
.center-hub::before { content: ''; position: absolute; inset: -3px; border-radius: 25px; background: linear-gradient(135deg, #a8e6cf 0%, #3BB483 50%, #2a9d6e 100%); z-index: -1; opacity: .6; animation: caHubBorder 4s linear infinite; }
@keyframes caHubBorder { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(59,180,131,.15); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-ring-1 { width: 160px; height: 160px; border-style: dashed; animation: caRingPulse 4s ease-in-out infinite; }
.orbit-ring-2 { width: 260px; height: 260px; animation: caRingPulse 4s ease-in-out infinite 1s; }
.orbit-ring-3 { width: 360px; height: 360px; border-style: dashed; animation: caRingPulse 4s ease-in-out infinite 2s; }
@keyframes caRingPulse { 0%,100% { opacity: .3; border-color: rgba(59,180,131,.15); } 50% { opacity: .6; border-color: rgba(59,180,131,.3); } }
.orbit-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; }
.orbit-inner { position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; transform: translate(-50%,-50%); animation: caOrbitSpin 12s linear infinite; }
.orbit-middle { position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; transform: translate(-50%,-50%); animation: caOrbitSpin 20s linear infinite reverse; }
.orbit-outer { position: absolute; top: 50%; left: 50%; width: 360px; height: 360px; transform: translate(-50%,-50%); animation: caOrbitSpin 30s linear infinite; }
@keyframes caOrbitSpin { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }
.orbit-item { position: absolute; width: 48px; height: 48px; background: linear-gradient(135deg, rgba(30,36,51,.95) 0%, rgba(26,30,41,.98) 100%); border: 1px solid rgba(59,180,131,.3); border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.orbit-item svg { width: 22px; height: 22px; color: #3BB483; }
.orbit-inner .orbit-item { animation: caCounterSpin 12s linear infinite; }
.orbit-middle .orbit-item { animation: caCounterSpin 20s linear infinite reverse; }
.orbit-outer .orbit-item { animation: caCounterSpin 30s linear infinite; }
@keyframes caCounterSpin { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(-360deg); } }
.orbit-inner .item-1 { top: 0; left: 50%; } .orbit-inner .item-2 { top: 50%; right: 0; left: auto; } .orbit-inner .item-3 { bottom: 0; top: auto; left: 50%; } .orbit-inner .item-4 { top: 50%; left: 0; }
.orbit-middle .item-1 { top: 0; left: 50%; } .orbit-middle .item-2 { top: 25%; right: 0; left: auto; } .orbit-middle .item-3 { top: 75%; right: 0; left: auto; } .orbit-middle .item-4 { bottom: 0; top: auto; left: 50%; } .orbit-middle .item-5 { top: 75%; left: 0; } .orbit-middle .item-6 { top: 25%; left: 0; }
.orbit-outer .item-1 { top: 0; left: 50%; } .orbit-outer .item-2 { top: 15%; right: 5%; left: auto; } .orbit-outer .item-3 { top: 50%; right: 0; left: auto; } .orbit-outer .item-4 { top: 85%; right: 5%; left: auto; } .orbit-outer .item-5 { bottom: 0; top: auto; left: 50%; } .orbit-outer .item-6 { top: 85%; left: 5%; } .orbit-outer .item-7 { top: 50%; left: 0; } .orbit-outer .item-8 { top: 15%; left: 5%; }
.connection-lines { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; pointer-events: none; }
.connection-line { position: absolute; top: 50%; left: 50%; height: 1px; background: linear-gradient(90deg, rgba(59,180,131,0.5) 0%, transparent 100%); transform-origin: left center; animation: caLineFlash 3s ease-in-out infinite; }
.connection-line.line-1 { width: 80px; transform: rotate(0deg); animation-delay: 0s; }
.connection-line.line-2 { width: 80px; transform: rotate(90deg); animation-delay: .5s; }
.connection-line.line-3 { width: 80px; transform: rotate(180deg); animation-delay: 1s; }
.connection-line.line-4 { width: 80px; transform: rotate(270deg); animation-delay: 1.5s; }
.connection-line.line-5 { width: 80px; transform: rotate(45deg); animation-delay: .25s; }
.connection-line.line-6 { width: 80px; transform: rotate(135deg); animation-delay: .75s; }
.connection-line.line-7 { width: 80px; transform: rotate(225deg); animation-delay: 1.25s; }
.connection-line.line-8 { width: 80px; transform: rotate(315deg); animation-delay: 1.75s; }
@keyframes caLineFlash { 0%,100% { opacity: .2; } 50% { opacity: .7; } }
.particles { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; pointer-events: none; }
.particle { position: absolute; width: 5px; height: 5px; background: #3BB483; border-radius: 50%; box-shadow: 0 0 12px #3BB483, 0 0 20px rgba(59,180,131,0.5); top: 50%; left: 50%; }
.particle-1 { animation: caParticle1 6s linear infinite; }
.particle-2 { animation: caParticle2 8s linear infinite; }
.particle-3 { animation: caParticle3 10s linear infinite; }
.particle-4 { animation: caParticle1 6s linear infinite 3s; }
.particle-5 { animation: caParticle2 8s linear infinite 4s; }
@keyframes caParticle1 { 0% { transform: rotate(0deg) translateX(80px) scale(1); opacity: 1; } 50% { transform: rotate(180deg) translateX(80px) scale(1.5); opacity: .5; } 100% { transform: rotate(360deg) translateX(80px) scale(1); opacity: 1; } }
@keyframes caParticle2 { 0% { transform: rotate(0deg) translateX(130px) scale(1); opacity: 1; } 50% { transform: rotate(180deg) translateX(130px) scale(1.5); opacity: .5; } 100% { transform: rotate(360deg) translateX(130px) scale(1); opacity: 1; } }
@keyframes caParticle3 { 0% { transform: rotate(0deg) translateX(180px) scale(1); opacity: 1; } 50% { transform: rotate(180deg) translateX(180px) scale(1.5); opacity: .5; } 100% { transform: rotate(360deg) translateX(180px) scale(1); opacity: 1; } }
@media (max-width: 768px) {
	.orbit-wrapper { max-width: 320px; }
	.orbit-ring-1 { width: 120px; height: 120px; } .orbit-ring-2 { width: 200px; height: 200px; } .orbit-ring-3 { width: 280px; height: 280px; }
	.orbit-inner { width: 120px; height: 120px; } .orbit-middle { width: 200px; height: 200px; } .orbit-outer { width: 280px; height: 280px; }
	.center-hub { width: 70px; height: 70px; border-radius: 18px; } .center-hub svg { width: 36px; height: 39px; }
	.orbit-item { width: 38px; height: 38px; border-radius: 10px; } .orbit-item svg { width: 18px; height: 18px; }
}

/* Mission & Vision */
.mission-section { padding: 80px 5%; max-width: 1400px; margin: 0 auto; }
.mission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.mission-card { background: linear-gradient(135deg, var(--bg-card) 0%, rgba(26,30,41,.9) 100%); border: 1px solid var(--card-border); border-radius: 24px; padding: 48px 40px; transition: all .5s var(--ease); position: relative; overflow: hidden; }
.mission-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-main) 0%, var(--accent-light) 100%); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.mission-card:hover { border-color: var(--accent-main); transform: translateY(-10px); box-shadow: 0 25px 60px rgba(59,180,131,.2); }
.mission-card:hover::before { transform: scaleX(1); }
.mission-card h3 { font-size: 28px; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; }
.mission-card p { font-size: 16px; color: var(--white-muted); line-height: 1.9; font-weight: 300; }

/* Stats — scoped to .stats-grid so the home .stats-row cards stay untouched */
.stats-section { padding: 80px 5%; max-width: 1400px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stats-grid .stat-card { display: block; min-height: 0; padding: 40px 32px; text-align: center; }
.stats-grid .stat-number { font-family: 'Labora','Chakra Petch',sans-serif; font-size: 52px; font-weight: 700; background: linear-gradient(135deg, var(--accent-main) 0%, var(--accent-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 12px; }
.stats-grid .stat-label { font-size: 14px; color: var(--white-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }

/* Values */
.values-section { padding: 80px 5%; max-width: 1400px; margin: 0 auto; }
.values-header, .team-header { text-align: center; margin-bottom: 64px; }
.values-header h2, .team-header h2 { font-size: 56px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.values-header p { font-size: 18px; color: var(--white-muted); max-width: 700px; margin: 0 auto; font-weight: 300; }
.values-header .section-label, .team-header .section-label { justify-content: center; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card { background: linear-gradient(135deg, var(--bg-card) 0%, rgba(26,30,41,.9) 100%); border: 1px solid var(--card-border); border-radius: 24px; padding: 36px 28px; text-align: center; transition: all .5s var(--ease); position: relative; overflow: hidden; }
.value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-main) 0%, var(--accent-light) 100%); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.value-card:hover { border-color: var(--accent-main); transform: translateY(-10px); box-shadow: 0 25px 60px rgba(59,180,131,.2); }
.value-card:hover::before { transform: scaleX(1); }
.value-icon { width: 72px; height: 72px; background: rgba(59,180,131,.1); border: 1px solid var(--card-border); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; transition: all .4s; }
.value-card:hover .value-icon { background: rgba(59,180,131,.2); border-color: var(--accent-main); transform: scale(1.1); }
.value-icon svg { width: 32px; height: 32px; color: var(--accent-main); }
.value-card h3 { font-size: 16px; text-transform: uppercase; margin-bottom: 14px; letter-spacing: 1px; }
.value-card p { font-size: 14px; color: var(--white-muted); line-height: 1.8; font-weight: 300; }

/* Team */
.team-section { padding: 80px 5%; max-width: 1400px; margin: 0 auto; }
.team-header p { font-size: 18px; color: var(--white-muted); max-width: 600px; margin: 0 auto; font-weight: 300; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.team-card { background: linear-gradient(135deg, var(--bg-card) 0%, rgba(26,30,41,.9) 100%); border: 1px solid var(--card-border); border-radius: 24px; overflow: hidden; transition: all .5s var(--ease); }
.team-card:hover { border-color: var(--accent-main); transform: translateY(-10px); box-shadow: 0 25px 60px rgba(59,180,131,.2); }
.team-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.team-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(100%); transition: transform .6s, filter .6s; }
.team-card:hover .team-image img { transform: scale(1.08); filter: grayscale(0); }
.team-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to top, rgba(26,30,41,1) 0%, transparent 100%); z-index: 1; }
.team-info { padding: 20px; text-align: center; position: relative; z-index: 2; margin-top: -30px; }
.team-info h4 { font-size: 15px; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 1px; line-height: 1.3; }
.team-info .team-role { font-size: 11px; color: var(--accent-main); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; display: block; }
.team-info .team-experience { font-size: 11px; color: var(--white-subtle); }
.team-info .team-titles { font-size: 11px; color: var(--white-muted); margin-top: 6px; line-height: 1.5; }

/* About — responsive (matches the reference breakpoints) */
@media (max-width: 1400px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1200px) {
	.about-hero h1 { font-size: 56px; }
	.story-content h2, .values-header h2, .team-header h2 { font-size: 44px; }
	.values-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); }
	.orbit-wrapper { max-width: 420px; }
	.orbit-ring-3, .orbit-outer { width: 300px; height: 300px; }
}
@media (max-width: 992px) {
	.story-grid { grid-template-columns: 1fr; gap: 60px; }
	.orbit-wrapper { order: -1; max-width: 400px; }
	.mission-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.about-hero { padding: 80px 5% 60px; }
	.about-hero h1 { font-size: 40px; } .about-hero .hero-description { font-size: 16px; }
	.story-section, .mission-section, .values-section, .team-section, .stats-section { padding: 60px 5%; }
	.story-content h2, .values-header h2, .team-header h2 { font-size: 36px; }
	.mission-card h3 { font-size: 22px; }
	.values-grid, .stats-grid { grid-template-columns: 1fr; gap: 24px; }
	.team-grid { grid-template-columns: 1fr; }
	.value-card, .stats-grid .stat-card, .mission-card { padding: 32px 24px; }
	.stats-grid .stat-number { font-size: 44px; }
}