/* ==================================================================
   NaNaS Advertising — brand overrides & new components
   Loaded AFTER base.css / skeleton.css / layout.css / colors/color.css
   so it can safely override without touching the template core.
   Brand colors sourced from the client-supplied PDF (page 1 cover,
   pixel-sampled): navy #0F1C30, red #C82129.
   ================================================================== */

:root{
	--nanas-navy: #0F1C30;
	--nanas-navy-light: #17273f;
	--nanas-navy-lighter: #1f3350;
	--nanas-red: #C82129;
	--nanas-red-dark: #a71b22;
	--nanas-off-white: #f7f7f5;
	--nanas-gray: #6b7280;
}

/* -------------------- Preloader: NaNaS typewriter loader -------------------- */
/* Replaces the template's royal_preloader (a progress bar tied to real asset-load
   events, which QA found could take 20-30s and hides the whole body while waiting).
   This one never hides body content, types the wordmark out, and always clears
   itself quickly regardless of network conditions — see js/nanas-loader.js. */
#nanas-loader{
	position:fixed;
	inset:0;
	z-index:999999;
	background: var(--nanas-navy);
	display:flex;
	align-items:center;
	justify-content:center;
	transition: opacity .5s ease;
}
#nanas-loader.nl-hide{ opacity:0; pointer-events:none; }
.nl-inner{
	display:flex;
	align-items:center;
	font-family:'big-john';
}
.nl-word{
	font-size:15vw;
	letter-spacing:6px;
	color:#fff;
	white-space:nowrap;
}
@media only screen and (min-width:600px){
	.nl-word{ font-size:56px; }
}
.nl-cursor{
	display:inline-block;
	width:4px;
	height:0.9em;
	margin-left:6px;
	background: var(--nanas-red);
	animation: nl-blink .8s steps(1) infinite;
}
@keyframes nl-blink{ 50%{ opacity:0; } }

/* -------------------- Typography touch-ups -------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--nanas-navy); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6 { color: #fff; }

/* -------------------- Text logo (no logo file supplied) -------------------- */
.nanas-logo{
	display:inline-block;
	font-family: 'big-john';
	line-height:1;
	text-align:left;
}
.nanas-logo .nanas-logo-main{
	font-size:22px;
	letter-spacing:4px;
	color: #fff;
}
.nanas-logo .nanas-logo-main span.dot{ color: var(--nanas-red); }
.nanas-logo .nanas-logo-sub{
	display:block;
	font-family:'Open Sans', sans-serif;
	font-size:9px;
	letter-spacing:3px;
	color: #b7c0cc;
	text-transform:uppercase;
	margin-top:2px;
}
.logo-wrap .nanas-logo{ padding-top:14px; }
.footer-img .nanas-logo{ padding:20px 0; }
.footer-img .nanas-logo .nanas-logo-main{ color:#fff; font-size:26px; }
.footer-img .nanas-logo .nanas-logo-sub{ color:#b7c0cc; }

/* -------------------- Header: original hamburger nav, colors follow the header's own background -------------------- */
/* The template's own behavior is kept as-is: transparent over the hero on desktop,
   a light/white bar on mobile and once .is-fixed kicks in on scroll (menu.js).
   We only swap the logo + hamburger-icon color to match whichever background is
   showing, so both stay legible without forcing a background color of our own. */

/* Default (desktop, over the hero — transparent): white logo + white icon */
.cd-primary-nav-trigger .cd-menu-icon,
.cd-primary-nav-trigger .cd-menu-icon::before,
.cd-primary-nav-trigger .cd-menu-icon::after{
	background-color: #fff;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked{ background-color: rgba(255,255,255,0); }
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before,
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::after{ background-color:#fff; }
.cd-primary-nav-trigger .cd-menu-text{ color:#fff; }

/* Mobile (<768px) — template gives the header a light bg from the start, so the
   logo/icon need to be navy there, not white. */
@media only screen and (max-width: 767px){
	.cd-header .nanas-logo-main{ color: var(--nanas-navy); }
	.cd-header .nanas-logo-sub{ color:#777; }
	.cd-header .cd-primary-nav-trigger .cd-menu-icon,
	.cd-header .cd-primary-nav-trigger .cd-menu-icon::before,
	.cd-header .cd-primary-nav-trigger .cd-menu-icon::after{
		background-color: var(--nanas-navy);
	}
	.cd-header .cd-primary-nav-trigger .cd-menu-text{ color: var(--nanas-navy); }
}

/* Scrolled / sticky state (desktop ≥1170px, .is-fixed added by menu.js) — the
   template switches to a light bg here too, so flip to navy for contrast. */
.cd-header.is-fixed .nanas-logo-main{ color: var(--nanas-navy); }
.cd-header.is-fixed .nanas-logo-sub{ color:#777; }
.cd-header.is-fixed .cd-primary-nav-trigger .cd-menu-icon,
.cd-header.is-fixed .cd-primary-nav-trigger .cd-menu-icon::before,
.cd-header.is-fixed .cd-primary-nav-trigger .cd-menu-icon::after{
	background-color: var(--nanas-navy);
}
.cd-header.is-fixed .cd-primary-nav-trigger .cd-menu-text{ color: var(--nanas-navy); }

@media only screen and (max-width: 767px){
	.nanas-logo .nanas-logo-main{ font-size:18px; letter-spacing:3px; }
}

/* -------------------- Section helpers -------------------- */
.on-dark{ background: var(--nanas-navy); color:#cdd4dd; }
.on-dark p{ color:#b7c0cc; }
.section-tag{
	display:inline-block;
	font-size:12px;
	letter-spacing:3px;
	text-transform:uppercase;
	color: var(--nanas-red);
	font-weight:700;
	margin-bottom:10px;
}
.section-title-lg{
	font-family:'big-john';
	font-size:36px;
	line-height:1.15;
	margin:0 0 18px 0;
	text-align:left;
}
.section-title-lg .accent{ color: var(--nanas-red); }
.section-title-center{ text-align:center; }
.section-title-center .section-tag{ display:block; }
.section-lede{
	font-size:16px;
	line-height:1.7;
	color:#666;
	max-width:640px;
}
.on-dark .section-lede{ color:#b7c0cc; }

.btn-nanas{
	display:inline-block;
	padding:14px 34px;
	background: var(--nanas-red);
	color:#fff !important;
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase;
	font-weight:700;
	border-radius:2px;
	transition: background .25s ease, transform .25s ease;
}
.btn-nanas:hover{ background: var(--nanas-navy); transform:translateY(-2px); }
.btn-nanas-outline{
	display:inline-block;
	padding:13px 33px;
	border:1px solid rgba(255,255,255,.4);
	color:#fff !important;
	font-size:12px;
	letter-spacing:2px;
	text-transform:uppercase;
	font-weight:700;
	border-radius:2px;
	transition: all .25s ease;
}
.btn-nanas-outline:hover{ background:#fff; color: var(--nanas-navy) !important; border-color:#fff; }

/* ================================================================
   HERO
   ================================================================ */
.nanas-hero{
	position:relative;
	width:100%;
	min-height: max(560px, 92vh);
	background: var(--nanas-navy);
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding: 90px 0 50px;
}
.nanas-hero .hero-slide{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center center;
}
.nanas-hero .hero-overlay{
	position:absolute;
	inset:0;
	background: linear-gradient(180deg, rgba(15,28,48,.55) 0%, rgba(15,28,48,.55) 40%, rgba(15,28,48,.92) 100%);
}
.nanas-hero .hero-content{
	position:relative;
	z-index:5;
	max-width:760px;
	padding: 0 40px;
}
.nanas-hero .hero-eyebrow{
	color: var(--nanas-red);
	letter-spacing:3px;
	text-transform:uppercase;
	font-size:13px;
	font-weight:700;
	margin-bottom:18px;
}
.nanas-hero h1{
	font-family:'big-john';
	color:#fff;
	font-size:56px;
	line-height:1.1;
	text-align:left;
	margin:0 0 20px 0;
}
.nanas-hero h1 .accent{ color: var(--nanas-red); }
.nanas-hero p.hero-desc{
	font-size:18px;
	line-height:1.6;
	color:#dfe4ea;
	max-width:560px;
	margin-bottom:34px;
}
.nanas-hero .hero-ctas a{ margin-right:16px; }
.nanas-hero .hero-stats{
	position:relative;
	z-index:5;
	display:flex;
	gap:0;
	padding:0 40px;
	margin-top:46px;
	flex-wrap:wrap;
}
.nanas-hero .hero-stats .stat{
	padding-right:40px;
	margin-right:40px;
	border-right:1px solid rgba(255,255,255,.2);
}
.nanas-hero .hero-stats .stat:last-child{ border-right:none; }
.nanas-hero .hero-stats .stat .num{
	font-family:'big-john';
	font-size:30px;
	color:#fff;
	display:block;
}
.nanas-hero .hero-stats .stat .num span{ color: var(--nanas-red); }
.nanas-hero .hero-stats .stat .label{
	font-size:11px;
	letter-spacing:1px;
	text-transform:uppercase;
	color:#aab3bf;
}

@media only screen and (max-width: 767px){
	.nanas-hero{ min-height:100vh; padding:90px 0 40px; }
	.nanas-hero h1{ font-size:34px; }
	.nanas-hero .hero-content{ padding:0 24px; }
	.nanas-hero p.hero-desc{ font-size:15px; }
	.nanas-hero .hero-stats{ padding:0 24px; }
	.nanas-hero .hero-stats .stat{ padding-right:20px; margin-right:20px; margin-bottom:14px; }
}

/* ================================================================
   SERVICES GRID (6 disciplines) — new component
   ================================================================ */
.services-section{ background: var(--nanas-navy); padding:90px 0; }
.services-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:1px;
	background: rgba(255,255,255,.12);
	margin-top:50px;
	border:1px solid rgba(255,255,255,.12);
}
.service-card{
	background: var(--nanas-navy);
	padding:44px 34px;
	transition: background .25s ease;
}
.service-card:hover{ background: var(--nanas-navy-light); }
.service-card .service-icon{
	font-size:34px;
	color:#fff;
	margin-bottom:22px;
	display:block;
}
.service-card h4{
	color:#fff;
	text-align:left;
	font-size:19px;
	margin-bottom:12px;
}
.service-card p{
	color:#aab3bf;
	font-size:14px;
	line-height:1.7;
	margin:0;
}
@media only screen and (max-width: 900px){
	.services-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media only screen and (max-width: 600px){
	.services-grid{ grid-template-columns:1fr; }
}

/* ================================================================
   VISION / MISSION / CORE VALUES
   ================================================================ */
.purpose-section{ padding:90px 0; background:#fff; }
.purpose-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:50px;
	margin-top:40px;
}
.purpose-card{
	border:1px solid #eee;
	padding:36px;
	border-radius:4px;
}
.purpose-card h4{
	text-align:left;
	color: var(--nanas-navy);
	margin-bottom:14px;
}
.purpose-card h4 i{ color: var(--nanas-red); margin-right:10px; }
.purpose-card p{ color:#666; line-height:1.7; margin:0; }
.values-row{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:24px;
	margin-top:50px;
}
.value-item{ text-align:center; }
.value-item .value-num{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	border-radius:50%;
	border:2px solid var(--nanas-red);
	color: var(--nanas-red);
	font-family:'big-john';
	font-size:18px;
	margin-bottom:16px;
}
.value-item h6{ color: var(--nanas-navy); margin-bottom:8px; letter-spacing:1px; }
.value-item p{ color:#777; font-size:13px; line-height:1.6; margin:0; }
@media only screen and (max-width: 900px){
	.purpose-grid{ grid-template-columns:1fr; }
	.values-row{ grid-template-columns:repeat(2,1fr); }
}
@media only screen and (max-width: 500px){
	.values-row{ grid-template-columns:1fr; }
}

/* ================================================================
   TIMELINE 2011–2026 — new component
   ================================================================ */
.timeline-section{ background: var(--nanas-navy); padding:90px 0 100px; }
.timeline-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:40px 30px;
	margin-top:56px;
}
.timeline-item{ text-align:left; position:relative; padding-left:64px; }
.timeline-item .tl-icon{
	position:absolute;
	left:0; top:0;
	width:48px; height:48px;
	border-radius:50%;
	border:2px solid var(--nanas-red);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:18px;
}
.timeline-item .tl-year{
	font-family:'big-john';
	color:#fff;
	font-size:22px;
	display:block;
	margin-bottom:6px;
}
.timeline-item p{ color:#aab3bf; font-size:14px; line-height:1.6; margin:0; }
.timeline-item strong{ color:#fff; }
@media only screen and (max-width: 900px){
	.timeline-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media only screen and (max-width: 600px){
	.timeline-grid{ grid-template-columns:1fr; }
}

/* ================================================================
   CLIENT LOGO SHOWCASE GRID
   ================================================================ */
.clients-section{ padding:80px 0; background: var(--nanas-off-white); }
.clients-grid{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:20px;
	margin-top:44px;
}
.clients-grid-item{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	aspect-ratio:4/3;
	background:#fff;
	border:1px solid #eaeaea;
	border-radius:8px;
	padding:18px;
	box-shadow:0 2px 8px rgba(15,28,48,.04);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.clients-grid-item img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
	transition: transform .3s ease;
}
.clients-grid-item:hover{
	transform:translateY(-5px);
	border-color: var(--nanas-red);
	box-shadow:0 12px 26px rgba(15,28,48,.12);
}
.clients-grid-item:hover img{
	transform:scale(1.06);
}
@media only screen and (max-width: 1100px){
	.clients-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media only screen and (max-width: 700px){
	.clients-grid{ grid-template-columns:repeat(3, 1fr); gap:14px; }
	.clients-grid-item{ padding:12px; border-radius:6px; }
}
@media only screen and (max-width: 420px){
	.clients-grid{ grid-template-columns:repeat(2, 1fr); }
}
.clients-note{ text-align:center; color:#999; font-size:12px; margin-top:26px; letter-spacing:1px; text-transform:uppercase; }

/* ================================================================
   TEAM GRID
   ================================================================ */
.team-section{ padding:90px 0; background:#fff; }
.team-grid-nanas{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:24px;
	margin-top:50px;
}
.team-card{
	border:1px solid #eee;
	border-radius:4px;
	overflow:hidden;
	box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.team-card .team-photo{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	display:block;
}
.team-card .team-photo-initials{
	width:100%;
	aspect-ratio:1/1;
	display:flex;
	align-items:center;
	justify-content:center;
	background: var(--nanas-navy-lighter);
	color:#fff;
	font-family:'big-john';
	font-size:44px;
}
.team-card .team-info{
	background: var(--nanas-navy);
	padding:16px 14px;
	text-align:center;
}
.team-card .team-info h6{ color:#fff; margin:0 0 4px 0; letter-spacing:0.5px; font-size:14px;}
.team-card .team-info span{ color: var(--nanas-red); font-size:12px; font-style:italic; }
@media only screen and (max-width: 900px){
	.team-grid-nanas{ grid-template-columns:repeat(3, 1fr); }
}
@media only screen and (max-width: 600px){
	.team-grid-nanas{ grid-template-columns:repeat(2, 1fr); }
}

/* ================================================================
   WORK / PORTFOLIO GRID (repurposed real projects)
   ================================================================ */
.work-grid-nanas{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:26px;
	margin-top:40px;
}
.work-card{
	position:relative;
	display:block;
	overflow:hidden;
	border-radius:4px;
	aspect-ratio:4/3;
}
.work-card img{
	width:100%; height:100%; object-fit:cover;
	transition: transform .5s ease;
}
.work-card:hover img{ transform:scale(1.08); }
.work-card .work-overlay{
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(15,28,48,0) 40%, rgba(15,28,48,.92) 100%);
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	padding:22px;
}
.work-card .work-tag{
	color: var(--nanas-red);
	font-size:11px;
	letter-spacing:2px;
	text-transform:uppercase;
	font-weight:700;
	margin-bottom:6px;
}
.work-card h5{ color:#fff; text-align:left; margin:0; letter-spacing:0.5px; }
@media only screen and (max-width: 900px){
	.work-grid-nanas{ grid-template-columns:repeat(2, 1fr); }
}
@media only screen and (max-width: 600px){
	.work-grid-nanas{ grid-template-columns:1fr; }
}

/* ================================================================
   CASE STUDY (KAVOD) NARRATIVE LAYOUT
   ================================================================ */
.case-hero{
	position:relative;
	height:72vh;
	min-height:500px;
	background-size:cover;
	background-position:center;
}
.case-hero .case-hero-overlay{
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(15,28,48,.35), rgba(15,28,48,.92));
	display:flex;
	align-items:flex-end;
}
.case-hero .case-hero-inner{ padding:50px 0; width:100%; }
.case-hero .case-tag{ color: var(--nanas-red); letter-spacing:3px; text-transform:uppercase; font-size:12px; font-weight:700; }
.case-hero h1{ color:#fff; text-align:left; font-family:'big-john'; font-size:44px; margin:14px 0 10px; }
.case-hero p.case-sub{ color:#dfe4ea; font-size:17px; max-width:640px; }

.case-meta{ background:#fff; padding:40px 0; border-bottom:1px solid #eee; }
.case-meta-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.case-meta-grid dt{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--nanas-red); font-weight:700; margin-bottom:6px; }
.case-meta-grid dd{ margin:0; color:#444; font-size:14px; line-height:1.6; }

.case-block{ padding:70px 0; }
.case-block.case-block-navy{ background: var(--nanas-navy); }
.case-block.case-block-navy h3, .case-block.case-block-navy h4{ color:#fff; text-align:left; }
.case-block.case-block-navy p{ color:#b7c0cc; }
.case-block h3{ text-align:left; margin-bottom:20px; }
.case-block h3 .accent{ color:var(--nanas-red); }
.case-block p{ line-height:1.75; color:#555; }

.big-ideas{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:36px; }
.big-idea-card{ background: var(--nanas-navy-light); padding:32px 26px; border-radius:4px; border-top:3px solid var(--nanas-red); }
.big-idea-card .idea-num{ font-family:'big-john'; color:var(--nanas-red); font-size:28px; display:block; margin-bottom:14px; }
.big-idea-card h5{ color:#fff; text-align:left; margin-bottom:10px; }
.big-idea-card .idea-hook{ color:#fff; font-style:italic; font-size:13px; margin-bottom:12px; display:block; }
.big-idea-card p{ color:#aab3bf; font-size:13px; line-height:1.7; margin:0; }

.case-gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:20px; }
.case-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; }

.deliverables-list{ margin-top:30px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.deliverable-item{ padding-left:20px; border-left:2px solid var(--nanas-red); }
.deliverable-item h6{ text-align:left; color:var(--nanas-navy); margin-bottom:6px; }
.deliverable-item p{ margin:0; color:#666; font-size:13px; line-height:1.6; }

@media only screen and (max-width: 900px){
	.case-meta-grid, .big-ideas, .case-gallery, .deliverables-list{ grid-template-columns:1fr; }
	.case-hero h1{ font-size:30px; }
}

/* ================================================================
   SIMPLE PROJECT DETAIL (Yematibela / Stella / Bethelhem / Website)
   ================================================================ */
.simple-project-hero{
	position:relative; height:68vh; min-height:460px;
	background-size:cover; background-position:center;
}
.simple-project-hero .spo{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,28,48,.3), rgba(15,28,48,.9)); display:flex; align-items:flex-end; }
.simple-project-hero .spo-inner{ padding:44px 0; }
.simple-project-hero .case-tag{ color:var(--nanas-red); letter-spacing:3px; text-transform:uppercase; font-size:12px; font-weight:700; }
.simple-project-hero h1{ color:#fff; text-align:left; font-family:'big-john'; font-size:38px; margin:12px 0 0; }

.project-body{ padding:60px 0; }
.project-body .project-meta{ margin-bottom:30px; }
.project-body .project-meta span{ display:inline-block; margin-right:26px; font-size:13px; color:#888; }
.project-body .project-meta strong{ color:var(--nanas-navy); }
.project-gallery-simple{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.project-gallery-simple img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; }
.project-gallery-simple.two-col{ grid-template-columns:repeat(2,1fr); }
@media only screen and (max-width: 700px){
	.project-gallery-simple{ grid-template-columns:1fr; }
}

/* Website-development multi-project showcase */
.mockup-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:30px;
	margin-top:40px;
}
.mockup-card{
	background:#fff;
	border:1px solid #eee;
	border-radius:6px;
	overflow:hidden;
	box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.mockup-card .mockup-image{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	display:block;
	background:#0F1C30;
}
.mockup-card .mockup-caption{
	padding:16px 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.mockup-card .mockup-caption h6{ text-align:left; color:var(--nanas-navy); margin:0; letter-spacing:0.5px; }
.mockup-card .mockup-caption span{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--nanas-red); font-weight:700; }
.mockup-card.wide{ grid-column: 1 / -1; }
.mockup-card.wide .mockup-image-pair{ display:grid; grid-template-columns:1fr 1fr; }
.mockup-card.wide .mockup-image-pair img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
@media only screen and (max-width: 700px){
	.mockup-grid{ grid-template-columns:1fr; }
	.mockup-card.wide .mockup-image-pair{ grid-template-columns:1fr; }
}

/* ================================================================
   CONTACT
   ================================================================ */
.contact-strip{ background: var(--nanas-navy); padding:70px 0; }
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; }
.contact-info-item h6{ color:#fff; text-align:left; letter-spacing:2px; margin-bottom:10px; }
.contact-info-item p, .contact-info-item a{ color:#b7c0cc; line-height:1.8; }
.contact-info-item a:hover{ color:var(--nanas-red); }
@media only screen and (max-width: 700px){
	.contact-info-grid{ grid-template-columns:1fr; }
}

/* ================================================================
   NEWS / INSIGHTS placeholder banner
   ================================================================ */
.news-placeholder-note{
	background: #fff7e6;
	border:1px solid #ffe2a8;
	color:#8a6100;
	padding:14px 22px;
	font-size:13px;
	border-radius:4px;
	margin-bottom:30px;
}

/* ================================================================
   Footer — compact, with the sketched-camera brand accent
   ================================================================ */
/* The template's stock footer used 100px of padding top & bottom plus 25px of
   margin on every stacked "column" row — ~250px of near-empty navy for a logo,
   4 icons and one line of copy. Replaced with a single compact row. */
.section-in.footer.nanas-footer-compact{
	background: var(--nanas-navy);
	padding: 34px 0 22px;
	position: relative;
	overflow: hidden;
}
.footer-camera-decor{
	position:absolute;
	top:-18%;
	right:-4%;
	width:280px;
	height:143px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:top right;
	opacity:.16;
	pointer-events:none;
}
.section-in.footer.nanas-footer-compact .container .columns{
	margin-top:0;
	margin-bottom:0;
}
.nanas-footer-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:14px;
	position:relative;
	z-index:1;
}
.nanas-footer-row .nanas-logo{ text-align:left; }
.section-in.footer.nanas-footer-compact .social-footer{ margin:0; }
.section-in.footer.nanas-footer-compact .list-social{ margin:0; }
.section-in.footer.nanas-footer-compact .list-social li{ border-color: rgba(255,255,255,.25); }
.section-in.footer.nanas-footer-compact .icon-soc a{ color:#fff; }
.section-in.footer.nanas-footer-compact .footer-copy-text{
	position:relative;
	z-index:1;
	margin-top:18px;
	padding-top:16px;
	border-top:1px solid rgba(255,255,255,.1);
}
.section-in.footer.nanas-footer-compact .footer-copy-text p{
	color:#8994a3;
	margin:2px 0;
	line-height:1.7;
}
@media only screen and (max-width: 600px){
	.nanas-footer-row{ justify-content:center; text-align:center; }
	.nanas-footer-row .nanas-logo{ text-align:center; }
	.footer-camera-decor{ width:180px; height:92px; opacity:.12; }
}