:root {
		--bg: #ffffff;
		--surface: #f5f5f5;
		--text: #1a1a1a;
		--muted: #bdbdbd; /* lighter for dark bg */
		--border: #2a2a2a;
		--accent: #ffc659;
		--accent-contrast: #ffffff;

		--radius: 12px;
		--shadow: 0 4px 14px rgba(0,0,0,0.08);
		--container-max: 1100px;

		--step--1: clamp(0.9rem, 0.8rem + 0.2vw, 1rem);
		--step-0:  clamp(1rem, 0.9rem + 0.3vw, 1.1rem);
		--step-1:  clamp(1.3rem, 1rem + 0.6vw, 1.6rem);
		--step-2:  clamp(1.6rem, 1.2rem + 1vw, 2rem);
		--step-3:  clamp(2rem, 1.5rem + 1.8vw, 2.8rem);
		--step-4:  clamp(2.5rem, 2rem + 2.5vw, 3.5rem);

		--gutter: clamp(16px, 4vw, 32px);
		--section-y: clamp(50px, 8vw, 100px);
	}

	* { 
		box-sizing: border-box; 
	}
	
	html { 
		scroll-behavior: smooth; 
	}

	body {
		margin: 0;
		font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
		background: #000; /* header/bg base */
		color: #fff;      /* light on dark */
		line-height: 1.6;
		font-size: var(--step-0);
	}

	img { 
		max-width: 100%; border-radius: var(--radius); display: block; 
	}
	
	a { 
		color: var(--accent); text-decoration: none; 
	}
	
	a:hover { 
		text-decoration: underline; 
	}



	h1, h2, .brand, .primary a {
		font-family: "Kumbh Sans", sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		line-height: 1.1;
	}
	
	h3 {
		font-family: "Kumbh Sans", sans-serif;
		font-weight: 500;
		letter-spacing: 0.5px;
		line-height: 1.1;
	}

	.text-outline {
		color: rgba(0,0,0,1);
		text-shadow: 1px 0 white, -1px 0 white, 0 1px white, 0 -1px white,
	  1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
	}

	.container { 
		max-width: var(--container-max); 
		margin-inline: auto; 
		padding-inline: var(--gutter);
	}

	.site-header {
		background: #000; /* solid so bg doesn’t show under it */
		border-bottom: 1px solid var(--border);
		position: sticky; top: 0; z-index: 100;
	}
	.nav { display: flex; justify-content: space-between; align-items: center; height: 70px; gap: 16px; }

	.brand img { height: 40px; display: block; border-radius: 0; }

	/* Primary nav + mobile menu */
	.primary { display: contents; }
	.primary ul { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }
	.primary a { color: #fff; font-weight: 700; }
	.primary a:hover{text-decoration:none;color: var(--accent);}

	/* Mobile menu toggle with color + rotation requirements */
	.menu-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	line-height: 0;
	}
	.menu-toggle svg {
	width: 28px; height: 28px;
	transition: transform .25s ease, color .3s ease;
	}
	/* Closed: white hamburger; hover -> #ffc659 */
	.menu-toggle.closed { color: #ffffff; }
	.menu-toggle.closed:hover { color: #ffc659; }
	/* Open: #ffc659 cross; hover -> white */
	.menu-toggle.open { color: #ffc659; }
	.menu-toggle.open:hover { color: #ffffff; }
	/* Rotate when open */
	.menu-toggle.closed svg { transform: rotate(0deg); }
	.menu-toggle.open  svg { transform: rotate(90deg); }

	@media (max-width: 880px) {
	.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	}

	.primary ul {
	position: fixed;
	top: 70px; /* below header */
	left: 0;
	right: 0;
	background: #000;
	border-top: 1px solid var(--border);
	padding: 16px var(--gutter); /* some breathing room */
	display: flex;               /* change grid → flex */
	flex-direction: column;      /* stack items vertically */
	align-items: flex-start;     /* align left */
	gap: 10px;                   /* spacing between links */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
	}

	.primary[data-open="true"] ul {
	opacity: 1;
	pointer-events: auto;
	}

	.primary li {
	margin: 0;
	width: 100%; /* so links expand comfortably */
	}

	.primary a {
	display: block;
	width: 100%;
	padding: 8px 0;
	font-size: var(--step-0);
	line-height: 1.2;
	text-align: left;
	}
	}


	/* Background wrapper (fills viewport below 70px header) */
	.site-bg {
	position: relative;
	min-height: calc(100vh - 70px); /* fill below header */
	background: url("images/riggs-project-services-bgr-d.jpg") no-repeat left 60px;
	background-size: cover;
	background-attachment: fixed; /* optional – parallax effect */
	overflow: visible; /* remove inner scrollbar */
	}

	.hero { text-align: center; padding-block: var(--section-y); }
	.hero h1 { font-size: var(--step-4); margin: 0; }
	.hero p { font-size: var(--step-1); color: var(--accent-contrast); }
	.hero p span{ font-size: var(--step-0); color: var(--accent-contrast); line-height:0.9em !important;}
	.cta { display: flex; justify-content: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

	/* Buttons */
	.btn {
	padding: 12px 20px;
	border-radius: var(--radius);
	font-weight: 700;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
	cursor: pointer;
	}
	/* Services: white bg, orange text; hover -> black/white */
	.btn--primary {
	background: #ffffff;
	color: #000000;
	}
	/* Get in touch: orange bg, white text; hover -> black/white */
	.btn--ghost {
	background: var(--accent);
	color: #000000;
	}
	.btn--primary:hover,
	.btn--ghost:hover {
	background-color: #000000;
	color: #ffffff;
	text-decoration: none;
	}

	section[id] { scroll-margin-top: 90px; }
	
	
/* Base: 1 col mobile */
.grid--projects {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

/* Tablet: 2 equal columns */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .grid--projects { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 3 per row; last row rules */
@media (min-width: 1024px) {
  .grid--projects {
    grid-template-columns: repeat(6, 1fr); /* 6 tracks => easy spans */
    /* Important: don't use dense here or the remainder selectors can misfire */
    grid-auto-flow: row;
  }

  /* Default each card = 2 tracks => 3 columns @ 33.33% */
  .grid--projects > * { grid-column: auto / span 2; }

  /* Remainder = 2 → make BOTH last two items span 3 tracks (50% / 50%) */
  .grid--projects > :nth-last-child(2):nth-child(3n+1) { grid-column: auto / span 3; } /* second-last */
  .grid--projects > :last-child:nth-child(3n+2)       { grid-column: auto / span 3; } /* last */

  /* Remainder = 1 → last item full width */
  .grid--projects > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}



	/* Grids */
	/*
	.grid { display: grid; gap: 24px; }
	.grid--services, .grid--projects { grid-template-columns: 1fr; }
	@media (min-width: 768px) {
	.grid--services { grid-template-columns: repeat(2, 1fr); }
	.grid--projects { grid-template-columns: repeat(2, 1fr); }
	}
	@media (min-width: 1024px) {
	.grid--services { grid-template-columns: repeat(4, 1fr); }
	.grid--projects { grid-template-columns: repeat(3, 1fr); } 
	}
	*/
	
	.grid { display: grid; gap: 24px; }
	.grid--services { grid-template-columns: 1fr; }
	@media (min-width: 768px) {
	.grid--services { grid-template-columns: repeat(2, 1fr); } 
	}
	@media (min-width: 1024px) {
	.grid--services { grid-template-columns: repeat(4, 1fr); }
	}
	
	

	/* Cards */
	.card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: rgba(15,15,15,0.9);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	}
	.card__media { aspect-ratio: 16/10; overflow: hidden; }
	.card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
	.card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px;
	}
	.card__title { margin: 0 0 8px; color: #fff;}
	.card__meta {
	font-size: var(--step--1);
	color: #d9d9d9;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}
	
@media (max-width: 899px) {
  .about {
    display: flex;            /* override desktop grid */
    flex-direction: column;
    gap: 30px;
  }
  /* Source order: 1:text, 2:img, 3:img, 4:text */
  .about > :nth-child(1) { order: 1; } /* text */
  .about > :nth-child(2) { order: 2; } /* img  */
  .about > :nth-child(4) { order: 3; } /* text */
  .about > :nth-child(3) { order: 4; } /* img  */

  /* Optional: make images full-width nicely on mobile */
  .about img { width: 100%; height: auto; display: block; }
}

/* DESKTOP (already your default): keep 2-col grid + original order */
@media (min-width: 900px) {
  .about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
  }
  .about > * { order: initial; } /* reset any mobile ordering */
}

/*	.about { display: grid; gap: 30px; align-items: center; margin-top: var(--section-y); }
	.about h2 { font-size: var(--step-3); margin: 0 0 10px; }
	.about p { color: var(--muted); }
	@media(min-width: 900px){ .about { grid-template-columns: 1fr 1fr; } } */

	.contact { margin-top: var(--section-y); }
	.contact .card { padding: 20px; }
	.contact h2 { margin: 0 0 10px; }
	.contact p { color: var(--muted); }

	.site-footer { margin-top: var(--section-y); border-top: 1px solid var(--border); padding: 20px 0; text-align: center; background: rgba(0,0,0,0.8); }
	.socials { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }