/*
Theme Name: CSC - Chele Serviços e Consultoria
Theme URI: https://csc.co.mz
Author: CSC
Description: Tema institucional dinâmico para a Chele Serviços e Consultoria, Lda (CSC) — estiva, transporte de carga, limpeza, segurança e operadores de máquinas. Bilingue PT/EN via Polylang, conteúdo totalmente editável via Customizer, CPTs e páginas.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: csc
*/

/* ==========================================================================
   0. Custom properties / tokens
   ========================================================================== */
:root{
	--csc-red: #ec293a;
	--csc-red-dark: #c81f2e;
	--csc-red-rgb: 236,41,58;
	--csc-navy: #0f1620;
	--csc-navy-soft: #1a2432;
	--csc-ink: #1c1f24;
	--csc-ink-soft: #5a6270;
	--csc-bg: #ffffff;
	--csc-bg-soft: #f4f5f7;
	--csc-border: #e6e7eb;
	--csc-white: #ffffff;

	--csc-font: "Barlow", "Helvetica Neue", Arial, sans-serif;

	--csc-radius: 6px;
	--csc-shadow: 0 14px 34px rgba(15,22,32,.10);
	--csc-shadow-lg: 0 24px 60px rgba(15,22,32,.18);
	--csc-container: 1240px;
	--csc-header-h: 84px;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin:0;
	font-family: var(--csc-font);
	color: var(--csc-ink);
	background: var(--csc-bg);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--csc-red); text-decoration:none; }
a:hover{ color: var(--csc-red-dark); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--csc-font); font-weight:800; line-height:1.15; margin:0 0 .5em; color: var(--csc-ink); letter-spacing:-.01em; }
h1{ font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size: 1.3rem; font-weight:700; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
figure{ margin:0; }
button, input, textarea, select{ font-family: inherit; font-size: 1rem; }

.container{ width:100%; max-width: var(--csc-container); margin:0 auto; padding: 0 24px; }
.section{ padding: 96px 0; position:relative; }
.section--soft{ background: var(--csc-bg-soft); }
.section--navy{ background: var(--csc-navy); color:#c7ccd4; }
.section--navy h1, .section--navy h2, .section--navy h3{ color:#fff; }

.icon{ width:1em; height:1em; display:inline-block; vertical-align:-.15em; }

/* Section heading with big faint watermark word behind it */
.section-head{ max-width: 720px; margin: 0 0 52px; position:relative; z-index:1; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head__watermark{
	position:absolute; top:-.6em; left:50%; transform:translateX(-50%);
	font-size: clamp(3.5rem, 9vw, 7rem); font-weight:800; letter-spacing:.02em;
	color: var(--csc-ink); opacity:.045; white-space:nowrap; z-index:-1;
	pointer-events:none; user-select:none;
}
.section-head:not(.center) .section-head__watermark{ left:0; transform:none; }
.section--navy .section-head__watermark{ color:#fff; opacity:.05; }

.eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	text-transform:uppercase; letter-spacing:.14em;
	font-weight:700; font-size:.8rem; color: var(--csc-red); margin-bottom:.9em;
}
.eyebrow .icon{ width:20px; height:20px; }
.lead{ font-size:1.15rem; color: var(--csc-ink-soft); }
.section--navy .lead{ color:#9aa2ad; }

.two-tone b, .two-tone strong{ color: var(--csc-ink); font-weight:800; }
.two-tone{ color: #b7bcc4; font-weight:800; }
.section--navy .two-tone{ color:#4a5361; }
.section--navy .two-tone b{ color:#fff; }

/* Buttons */
.btn{
	display:inline-flex; align-items:center; gap:.55em;
	padding: 15px 30px; border-radius: var(--csc-radius);
	font-weight:700; letter-spacing:.01em; border:2px solid transparent;
	cursor:pointer; transition: all .2s ease; white-space:nowrap;
}
.btn .icon{ width:18px; height:18px; }
.btn-primary{ background: var(--csc-red); color:#fff; }
.btn-primary:hover{ background: var(--csc-red-dark); color:#fff; transform: translateY(-1px); }
.btn-outline{ border-color: currentColor; color: var(--csc-ink); background:transparent; }
.btn-outline:hover{ background: var(--csc-ink); color:#fff; border-color: var(--csc-ink); }
.btn-ghost-white{ border-color: rgba(255,255,255,.55); color:#fff; background:transparent; }
.btn-ghost-white:hover{ background:#fff; color: var(--csc-ink); border-color:#fff; }
.btn-white{ background:#fff; color: var(--csc-ink); }
.btn-white:hover{ background: var(--csc-red); color:#fff; }
.btn-dark{ background: var(--csc-navy); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-block{ width:100%; justify-content:center; }

.btn-circle{
	width:44px; height:44px; border-radius:50%; flex:0 0 auto;
	display:inline-flex; align-items:center; justify-content:center;
	background: var(--csc-red); color:#fff; transition: transform .2s ease, background .2s ease;
}
.btn-circle .icon{ width:18px; height:18px; }
a:hover .btn-circle, .card:hover .btn-circle{ background: var(--csc-navy); transform: scale(1.08); }

/* ==========================================================================
   2. Top utility bar + Header
   ========================================================================== */
.top-bar{
	background: var(--csc-navy); color:#aeb4bd; font-size:.85rem;
}
.top-bar__inner{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; gap:24px; }
.top-bar__info{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.top-bar__info span{ display:inline-flex; align-items:center; gap:8px; }
.top-bar__info .icon{ width:15px; height:15px; color: var(--csc-red); flex:0 0 auto; }
.top-bar__social{ display:flex; align-items:center; gap:10px; }
.top-bar__social a{
	width:28px; height:28px; border-radius:50%; border:1px solid #333d4a;
	display:flex; align-items:center; justify-content:center; color:#aeb4bd;
}
.top-bar__social a .icon{ width:14px; height:14px; }
.top-bar__social a:hover{ background: var(--csc-red); border-color: var(--csc-red); color:#fff; }

.site-header{
	position: sticky; top:0; z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--csc-border);
}
.site-header__inner{
	display:flex; align-items:center; justify-content:space-between;
	height: var(--csc-header-h);
	gap: 24px;
}
.site-branding img{ height: 46px; width:auto; }
.site-branding{ display:flex; align-items:center; }

.main-nav{ display:flex; align-items:center; gap: 8px; }
.main-nav ul{ display:flex; align-items:center; gap: 2px; }
.main-nav a{
	display:block; padding: 10px 15px; color: var(--csc-ink);
	font-weight:700; font-size:.96rem; border-radius: var(--csc-radius);
	transition: background .15s, color .15s;
}
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a{
	color: var(--csc-red); background: var(--csc-bg-soft);
}

.header-actions{ display:flex; align-items:center; gap: 14px; }
.lang-switch{ display:flex; gap: 4px; }
.lang-switch a{
	padding: 6px 10px; font-size:.8rem; font-weight:800; border-radius: 4px;
	color: var(--csc-ink-soft); border:1px solid var(--csc-border);
}
.lang-switch a.active, .lang-switch a:hover, .lang-switch .current-lang a{ background: var(--csc-navy); color:#fff; border-color: var(--csc-navy); }

.menu-toggle{
	display:none; background:none; border:0; cursor:pointer; padding: 8px;
}
.menu-toggle span{ display:block; width:26px; height:2px; background: var(--csc-ink); margin: 5px 0; transition:.2s; }

/* ==========================================================================
   3. Hero (diagonal, navy + red)
   ========================================================================== */
.hero{
	position:relative; color:#fff; overflow:hidden;
	min-height: 640px; display:flex; align-items:center;
	background: var(--csc-navy);
}
.hero__bg{
	position:absolute; inset:0; background-size:cover; background-position:center;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}
.hero__video-bg{
	position:absolute; inset:0; overflow:hidden; pointer-events:none;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}
.hero__video-bg iframe{
	position:absolute; top:50%; left:50%; border:0;
	width:100vw; height:56.25vw; /* 16:9 */
	min-height:100vh; min-width:177.78vh; /* 16:9 from height */
	transform:translate(-50%,-50%);
}
.hero__overlay{
	position:absolute; inset:0;
	background: linear-gradient(100deg, var(--csc-navy) 0%, var(--csc-navy) 34%, rgba(15,22,32,.65) 46%, rgba(15,22,32,.1) 62%);
}
.hero__accent{
	position:absolute; left:26%; bottom:-60px; width:220px; height:220px;
	background: var(--csc-red); clip-path: polygon(50% 0, 100% 100%, 0 100%);
	opacity:.92; display:none;
}
@media (min-width: 900px){ .hero__accent{ display:block; } }
.hero__content{ position:relative; z-index:2; max-width: 640px; padding: 90px 0; }
.hero__content h1{ color:#fff; }
.hero__content h1 em{ color: var(--csc-red); font-style:normal; }
.hero__content .lead{ color:#c7ccd4; }
.hero__cta{ display:flex; align-items:center; gap:22px; margin-top: 34px; flex-wrap:wrap; }

.play-cta{ display:inline-flex; align-items:center; gap:16px; cursor:pointer; background:none; border:0; padding:0; }
.play-cta__circle{
	position:relative; width:64px; height:64px; border-radius:50%; flex:0 0 auto;
	background:#fff; display:flex; align-items:center; justify-content:center;
	box-shadow: 0 0 0 8px rgba(255,255,255,.2);
	transition: transform .2s ease, box-shadow .2s ease;
}
.play-cta:hover .play-cta__circle{ transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255,255,255,.28); }
.play-cta__circle .icon{ width:22px; height:22px; color: var(--csc-ink); margin-left:3px; }
.play-cta__label{ font-weight:700; font-size:1.05rem; color:#fff; }

.page-hero{
	position:relative; color:#fff; padding: 84px 0 54px;
	background: var(--csc-navy); background-size: cover; background-position:center;
	overflow:hidden;
}
.page-hero::before{
	content:""; position:absolute; inset:0;
	background: linear-gradient(100deg, rgba(15,22,32,.96) 0%, rgba(15,22,32,.8) 50%, rgba(236,41,58,.35) 100%);
}
.page-hero > *{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; margin-bottom:.3em; }
.breadcrumb{ font-size:.88rem; color:#9aa2ad; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
.breadcrumb a{ color:#9aa2ad; }
.breadcrumb a:hover{ color:#fff; }
.page-hero .lead{ color:#c7ccd4; }
.page-hero .lead p{ margin:0; }

/* ==========================================================================
   4. Cards & grids
   ========================================================================== */
.grid{ display:grid; gap: 30px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

/* Service / project card — full-bleed image, dark gradient label, skewed icon badge */
.card{
	position:relative; border-radius: var(--csc-radius); overflow:hidden;
	box-shadow: var(--csc-shadow); transition: transform .3s ease, box-shadow .3s ease;
	display:flex; flex-direction:column; height:100%; background:#fff;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--csc-shadow-lg); }
.card__media{ position:relative; aspect-ratio: 4/3.4; overflow:hidden; background: var(--csc-bg-soft); display:block; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.card:hover .card__media img{ transform: scale(1.08); }
.card__media::after{
	content:""; position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(15,22,32,0) 35%, rgba(15,22,32,.88) 100%);
}
.card__badge{
	position:absolute; top:18px; left:18px; z-index:2;
	width:56px; height:56px; background: var(--csc-red); color:#fff;
	display:flex; align-items:center; justify-content:center;
	transform: skewX(-8deg); border-radius: 4px;
	box-shadow: 0 8px 18px rgba(var(--csc-red-rgb),.35);
}
.card__badge .icon{ width:26px; height:26px; transform: skewX(8deg); }
.card__label{
	position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 20px 22px;
	color:#fff;
}
.card__label h3{ color:#fff; margin:0; font-size:1.15rem; }
.card__label a{ color:#fff; }
.card__more-row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.card__more-row .btn-circle{ width:36px; height:36px; }
.card__more-row .btn-circle .icon{ width:15px; height:15px; }

.card__body{ padding: 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card__body h3 a{ color: var(--csc-ink); }
.card__body h3 a:hover{ color: var(--csc-red); }
.card__excerpt{ color: var(--csc-ink-soft); font-size:.97rem; flex:1; }
.card__more{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.05em; color: var(--csc-ink); }
.card__more:hover{ color: var(--csc-red); }

/* Overlay-label card (project/news style, offset white box) */
.tile{ position:relative; border-radius: var(--csc-radius); overflow:hidden; box-shadow: var(--csc-shadow); }
.tile__media{ aspect-ratio: 4/3.2; overflow:hidden; }
.tile__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.tile:hover .tile__media img{ transform: scale(1.07); }
.tile__box{
	position:relative; margin: -46px 18px 0; background:#fff; padding: 18px 20px 20px;
	border-radius: 4px; box-shadow: 0 10px 24px rgba(15,22,32,.12); z-index:2;
}
.tile__box h3{ font-size:1.05rem; margin:0 0 4px; }
.tile__box h3 a{ color: var(--csc-ink); }
.tile__box .meta{ font-size:.82rem; color: var(--csc-ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.tile__arrow{
	position:absolute; top:-20px; right:20px; z-index:3;
}

.service-icon{
	width:52px; height:52px; border-radius:50%; background: rgba(var(--csc-red-rgb),.1);
	display:flex; align-items:center; justify-content:center; margin-bottom:2px; color: var(--csc-red);
}
.service-icon .icon{ width:24px; height:24px; }

/* ==========================================================================
   5. Collage (image + overlapping image + floating stat card)
   ========================================================================== */
.collage{ position:relative; }
.collage__main{ border-radius: var(--csc-radius); overflow:hidden; box-shadow: var(--csc-shadow); }
.collage__main img{ width:100%; display:block; }
.collage__float{
	position:absolute; width:46%; right:-6%; bottom:-10%;
	border-radius: 4px; overflow:hidden; box-shadow: var(--csc-shadow-lg); border:6px solid #fff;
}
.collage__stat{
	position:absolute; left:-6%; bottom:14%; background: var(--csc-red); color:#fff;
	padding: 22px 26px; border-radius: 4px; box-shadow: var(--csc-shadow-lg); text-align:center; min-width:140px;
}
.collage__stat .num{ font-size:2rem; font-weight:800; line-height:1; }
.collage__stat .label{ font-size:.82rem; margin-top:6px; opacity:.9; }

.two-col{ display:grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items:center; }
.two-col.reverse{ grid-template-columns: 1.05fr 1fr; }
.two-col.reverse .two-col__media{ order:2; }
.two-col__media{ position:relative; }
.two-col__media img{ border-radius: var(--csc-radius); box-shadow: var(--csc-shadow); }

.check-list{ display:flex; flex-direction:column; gap:14px; margin: 24px 0; }
.check-list li{ display:flex; align-items:flex-start; gap:12px; }
.check-list .icon{
	width:22px; height:22px; flex:0 0 auto; margin-top:2px; color: var(--csc-red);
	background: rgba(var(--csc-red-rgb),.12); border-radius:50%; padding:4px;
}
.section--navy .check-list li{ color:#c7ccd4; }

/* ==========================================================================
   6. Stats band
   ========================================================================== */
.stats-band{ background: var(--csc-bg-soft); }
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat{
	display:flex; align-items:center; gap:16px; background:#fff; border-radius: var(--csc-radius);
	padding: 22px; box-shadow: var(--csc-shadow);
}
.stat__icon{
	width:52px; height:52px; border-radius: var(--csc-radius); background: rgba(var(--csc-red-rgb),.1);
	color: var(--csc-red); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.stat__icon .icon{ width:26px; height:26px; }
.stat__number{ font-size: 1.9rem; font-weight:800; line-height:1; color: var(--csc-ink); }
.stat__label{ margin-top:4px; font-weight:600; color: var(--csc-ink-soft); font-size:.9rem; }

/* ==========================================================================
   7. Diagonal-pattern feature cards (differentiators)
   ========================================================================== */
.pattern-grid{ display:grid; grid-template-columns: repeat(2,1fr); }
.pattern-card{
	position:relative; padding: 34px 30px; color:#fff; overflow:hidden;
	background-color: var(--csc-red);
	background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 14px);
	border: 1px solid rgba(255,255,255,.14);
}
.pattern-card .icon{ width:34px; height:34px; margin-bottom:16px; }
.pattern-card h3{ color:#fff; margin-bottom:8px; }
.pattern-card p{ color: rgba(255,255,255,.88); font-size:.95rem; margin:0; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-grid__item{
	display:block; position:relative; aspect-ratio: 1/1; border-radius: var(--csc-radius);
	overflow:hidden; cursor:pointer;
}
.gallery-grid__item img{ width:100%; height:100%; object-fit:cover; transition: transform .3s; display:block; }
.gallery-grid__item:hover img{ transform: scale(1.08); }
.gallery-grid__caption{
	position:absolute; left:0; right:0; bottom:0; padding: 28px 14px 12px;
	background: linear-gradient(to top, rgba(9,13,19,.85), rgba(9,13,19,0));
	color:#fff; font-size:.82rem; font-weight:600; line-height:1.3;
	opacity:0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.gallery-grid__item:hover .gallery-grid__caption,
.gallery-grid__item:focus .gallery-grid__caption{ opacity:1; transform: translateY(0); }

/* Clients strip */
.clients-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 48px; }
.clients-strip img{ max-height:52px; width:auto; filter: grayscale(1); opacity:.65; transition:.2s; }
.clients-strip img:hover{ filter:none; opacity:1; }

/* News */
.news-date-badge{
	position:absolute; top:0; left:18px; z-index:2; background: var(--csc-red); color:#fff;
	padding: 8px 14px; border-radius: 0 0 4px 4px; text-align:center; line-height:1.15; box-shadow: var(--csc-shadow);
}
.news-date-badge .d{ font-size:1.1rem; font-weight:800; display:block; }
.news-date-badge .m{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }

/* ==========================================================================
   8. Contact / quote panel
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: .92fr 1.08fr; gap: 0; align-items:stretch; border-radius: var(--csc-radius); overflow:hidden; box-shadow: var(--csc-shadow-lg); }
.contact-info-panel{ background: var(--csc-navy); color:#c7ccd4; padding: 48px 40px; }
.contact-info-panel h2{ color:#fff; }
.contact-block{ display:flex; gap:16px; padding: 18px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.contact-block:last-child{ border-bottom:0; }
.contact-block__icon{
	flex:0 0 44px; height:44px; border-radius:50%; background: rgba(var(--csc-red-rgb),.16);
	display:flex; align-items:center; justify-content:center; color: var(--csc-red);
}
.contact-block__icon .icon{ width:20px; height:20px; }
.contact-block h4{ margin:0 0 4px; font-size:1rem; color:#fff; }
.contact-block p{ color:#9aa2ad; margin:0; font-size:.94rem; }

.contact-form-panel{ background: var(--csc-red); padding: 48px 40px; position:relative; }
.contact-form-panel h2{ color:#fff; }
.contact-form-panel::before{
	content:""; position:absolute; inset:0; pointer-events:none;
	background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px);
}
.contact-form-panel .wpcf7, .contact-form-panel form{ position:relative; z-index:1; }
.wpcf7-form p{ margin-bottom: 16px; }
.wpcf7-form label{ display:block; font-weight:600; margin-bottom:6px; font-size:.9rem; color:#fff; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form textarea{
	width:100%; padding: 13px 16px; border:0; border-radius: 4px;
	background: #fff;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus{ outline:3px solid rgba(15,22,32,.35); }
.wpcf7-form .wpcf7-submit{ background: var(--csc-navy); color:#fff; border:0; padding:15px 32px; border-radius: 4px; font-weight:700; cursor:pointer; width:100%; }
.wpcf7-form .wpcf7-submit:hover{ background: #000; }
.wpcf7-spinner{ margin-left:10px; }
div.wpcf7-response-output{ border-radius: var(--csc-radius); margin: 16px 0 0 !important; color:#fff !important; border-color: rgba(255,255,255,.6) !important; }

/* Simple (non-panel) contact page fallback, e.g. inline notices */
.value-box{ background:#fff; border-radius: var(--csc-radius); padding: 32px; box-shadow: var(--csc-shadow); height:100%; }
.value-box h3{ color: var(--csc-red); }

/* ==========================================================================
   8b. Map
   ========================================================================== */
.map-section{ width:100%; }
.map-section #csc-map{ width:100%; height:440px; display:block; }
.map-section .leaflet-popup-content{ font-family: var(--csc-font); font-size:.94rem; }
.map-section .leaflet-popup-content strong{ display:block; margin-bottom:2px; color: var(--csc-ink); }
.csc-map-pin{ background:none; border:none; }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer{ background: var(--csc-navy); color:#9aa2ad; }
.footer-newsletter{ background: var(--csc-red); color:#fff; padding: 40px 0; }
.footer-newsletter .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-newsletter__text{ flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }
.footer-newsletter h2{ color:#fff; margin:0 0 4px; }
.footer-newsletter p{ margin:0; color: rgba(255,255,255,.9); }
.newsletter-form{ display:flex; align-items:stretch; gap:10px; flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }
.newsletter-form input[type=email]{
	flex:1; min-width:0; height:52px; padding: 0 16px; border-radius: var(--csc-radius); border:2px solid transparent;
}
.newsletter-form .btn{ flex:0 0 auto; height:52px; padding-top:0; padding-bottom:0; }
.footer-main{ padding: 64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-col img{ height:92px; margin-bottom:22px; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:18px; }
.footer-col p{ color:#8991a0; font-size:.94rem; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul a{ color:#8991a0; font-size:.94rem; display:inline-flex; align-items:center; gap:8px; }
.footer-col ul a:hover{ color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
	width:38px; height:38px; border-radius:50%; border:1px solid #2a3341;
	display:flex; align-items:center; justify-content:center; color:#fff;
}
.footer-social a .icon{ width:17px; height:17px; }
.footer-social a:hover{ background: var(--csc-red); border-color: var(--csc-red); }
.footer-bottom{ border-top:1px solid #202836; padding: 22px 0; font-size:.85rem; color:#6d7583; }
.footer-bottom .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:#9aa2ad; }
.footer-bottom a:hover{ color:#fff; }

/* ==========================================================================
   10. Video modal
   ========================================================================== */
.video-modal{
	position:fixed; inset:0; background: rgba(9,13,19,.92); z-index:1000;
	display:none; align-items:center; justify-content:center; padding: 24px;
}
.video-modal.is-open{ display:flex; }
.video-modal__frame{ width:100%; max-width: 960px; aspect-ratio: 16/9; position:relative; }
.video-modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius: 8px; }
.video-modal__close{
	position:absolute; top:-44px; right:0; background:none; border:0; color:#fff;
	font-size:1.8rem; cursor:pointer; line-height:1;
}

/* ==========================================================================
   10b. Gallery modal (lightbox with prev/next + caption)
   ========================================================================== */
.gallery-modal{
	position:fixed; inset:0; background: rgba(9,13,19,.94); z-index:1000;
	display:none; align-items:center; justify-content:center; padding: 24px;
}
.gallery-modal.is-open{ display:flex; }
.gallery-modal__frame{ position:relative; max-width: 1100px; max-height: 86vh; width:100%; text-align:center; }
.gallery-modal__frame img{
	max-width:100%; max-height:78vh; width:auto; height:auto; margin:0 auto;
	display:block; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.gallery-modal__caption{ color:#fff; font-size:1rem; font-weight:600; margin-top:16px; }
.gallery-modal__count{ color:#9aa2ad; font-size:.82rem; margin-top:4px; }
.gallery-modal__close{
	position:absolute; top:-44px; right:0; background:none; border:0; color:#fff;
	cursor:pointer; line-height:1; padding:6px;
}
.gallery-modal__close .icon{ width:26px; height:26px; }
.gallery-modal__nav{
	position:absolute; top:50%; transform: translateY(-50%); background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.25); color:#fff; width:48px; height:48px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
	z-index:2;
}
.gallery-modal__nav:hover{ background: var(--csc-red); border-color: var(--csc-red); }
.gallery-modal__nav .icon{ width:24px; height:24px; }
.gallery-modal__nav--prev{ left:12px; }
.gallery-modal__nav--next{ right:12px; }
@media (min-width: 900px){
	.gallery-modal__nav--prev{ left:-64px; }
	.gallery-modal__nav--next{ right:-64px; }
}

/* ==========================================================================
   11. Misc pages (single post, 404, search)
   ========================================================================== */
.content-area{ padding: 76px 0; }
.entry-content{ max-width: 780px; }
.entry-content h2{ margin-top:1.4em; }
.entry-content ul{ list-style: disc; padding-left: 1.4em; margin-bottom:1.1em; }
.entry-content ul li{ margin-bottom:.4em; }
.entry-content blockquote{
	border-left:4px solid var(--csc-red); margin:1.5em 0; padding: .3em 0 .3em 1.2em;
	font-style:italic; color: var(--csc-ink-soft);
}
.single-meta{ display:flex; gap:16px; align-items:center; color: var(--csc-ink-soft); font-size:.9rem; margin-bottom:24px;}
.tag-pill{
	display:inline-block; padding:4px 12px; background: var(--csc-bg-soft); border-radius: 20px;
	font-size:.8rem; font-weight:600; color: var(--csc-ink-soft);
}

.not-found{ text-align:center; padding: 120px 0; }
.not-found h1{ font-size:6rem; color: var(--csc-red); margin:0; }

.pagination{ display:flex; gap:8px; justify-content:center; margin-top: 48px; }
.pagination a, .pagination span{
	display:flex; align-items:center; justify-content:center; width:40px; height:40px;
	border-radius: var(--csc-radius); border:1px solid var(--csc-border); color: var(--csc-ink);
}
.pagination .current{ background: var(--csc-red); border-color: var(--csc-red); color:#fff; }
.pagination a:hover{ border-color: var(--csc-red); color: var(--csc-red); }

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width: 1080px){
	.contact-grid{ grid-template-columns: 1fr; }
	.collage__float{ display:none; }
}

@media (max-width: 960px){
	.grid-4{ grid-template-columns: repeat(2,1fr); }
	.grid-3{ grid-template-columns: repeat(2,1fr); }
	.stats{ grid-template-columns: repeat(2,1fr); }
	.two-col, .two-col.reverse{ grid-template-columns: 1fr; }
	.two-col.reverse .two-col__media{ order:0; }
	.footer-grid{ grid-template-columns: 1fr 1fr; }
	.gallery-grid{ grid-template-columns: repeat(3,1fr); }
	.pattern-grid{ grid-template-columns: 1fr; }
	.top-bar__info span:nth-child(3){ display:none; }
}

@media (max-width: 720px){
	.top-bar__inner{ flex-direction:column; align-items:flex-start; gap:8px; padding:10px 0; }
	.top-bar__info{ gap:14px; }
	.main-nav{
		position:fixed; top: var(--csc-header-h); left:0; right:0; bottom:0;
		background:#fff; flex-direction:column; align-items:stretch; padding: 20px;
		transform: translateX(100%); transition: transform .25s ease; overflow-y:auto;
	}
	.main-nav.is-open{ transform: translateX(0); }
	.main-nav ul{ flex-direction:column; align-items:stretch; }
	.main-nav a{ padding:14px 10px; border-bottom:1px solid var(--csc-border); }
	.menu-toggle{ display:block; }
	.header-actions .lang-switch{ order:-1; }
	.grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; }
	.stats{ grid-template-columns: 1fr 1fr; }
	.footer-grid{ grid-template-columns: 1fr; }
	.footer-newsletter .container{ flex-direction:column; align-items:flex-start; }
	.footer-newsletter__text, .newsletter-form{ max-width:100%; flex-basis:100%; }
	.section{ padding: 60px 0; }
	.gallery-grid{ grid-template-columns: repeat(2,1fr); }
	.hero__content{ padding: 64px 0; }
	.hero__bg{ clip-path:none; }
	.hero__video-bg{ display:none; }
	.hero__overlay{ background: linear-gradient(180deg, rgba(15,22,32,.55), rgba(15,22,32,.88)); }
	.contact-info-panel, .contact-form-panel{ padding: 32px 22px; }
	.map-section #csc-map{ height:320px; }
}