/* ==========================================================================
   Agora India — custom additions on top of the Orgaxi theme
   Keep site-specific overrides here rather than editing the vendor CSS.
   ========================================================================== */

/* --- "Why Choose Us" tick list (homepage) --------------------------------- */
.agora-check_list{
	position:relative;
	margin:30px 0 40px;
	padding:0;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
}
.agora-check_list li{
	position:relative;
	width:50%;
	font-size:16px;
	line-height:1.6em;
	margin-bottom:14px;
	padding-right:15px;
}
.agora-check_list li i{
	position:relative;
	margin-right:8px;
	font-size:13px;
}

/* --- Site update notice ticker -------------------------------------------
   A scrolling announcement bar above the header while the rollout is running.

   The loop is seamless because .site-notice_track holds the message group
   THREE times and slides exactly -33.3333% (one copy) per cycle — at the end
   the second copy sits precisely where the first started, so the reset is
   invisible.

   Why three copies and not two: the track only ever shifts by ONE group width,
   so the copies trailing behind have to keep the viewport covered for the whole
   cycle. That needs (copies - 1) x groupWidth >= viewportWidth. A group measures
   ~1700px here, so two copies hold up to ~1700px wide — fine on a laptop, but a
   1920px monitor would show a bare strip at the wrap. Three copies cover to
   ~3400px.

   If you edit the messages, keep all three groups identical and re-check that
   sum against the widest screen you care about.

   Gold ground with a deep-green label, per the button rule: white on gold is
   ~2:1, deep green is 4.6:1.
   ------------------------------------------------------------------------ */
:root{
	--site-notice-h:40px;
}
.site-notice{
	position:relative;
	/* Deliberately NO z-index. It doesn't need one — the bar sits above
	   .page-wrapper in the flow and never overlaps the header geometrically.
	   Giving it 1002 (to "sit above" the header's 1001) broke the mobile menu:
	   .main-header{z-index:1001} is a stacking context, so the menu's
	   z-index:99999999 only ranks it INSIDE the header. Against the header's
	   siblings the whole subtree counts as 1001, so a 1002 bar painted over
	   the open menu panel and its close button. */
	height:var(--site-notice-h);
	overflow:hidden;
	background-color:var(--color-three);
	border-bottom:1px solid rgba(var(--color-two-rgb),.18);
}
/* No offset is needed for the header even though it's position:absolute;top:0 —
   .page-wrapper is position:relative and the bar sits above it in the flow, so
   the header's containing block already starts below the bar. The sticky header
   that takes over on scroll is position:fixed;top:0 and stays pinned to the
   viewport, which is right: by then the notice has scrolled away. */
.site-notice_track{
	display:flex;
	align-items:center;
	height:100%;
	width:max-content;
	animation:site-notice-scroll 45s linear infinite;
}
/* let people stop it to actually read the thing */
.site-notice:hover .site-notice_track,
.site-notice:focus-within .site-notice_track{
	animation-play-state:paused;
}
.site-notice_group{
	display:flex;
	flex-shrink:0;
}
.site-notice_item{
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:10px 0;
	margin:0 26px;
	font-size:14px;
	font-weight:600;
	line-height:1.4;
	white-space:nowrap;
	color:var(--color-two);
}
.site-notice_item i{
	font-size:12px;
	opacity:.75;
}
/* separator dot between messages */
.site-notice_item:after{
	content:"";
	position:absolute;
	right:-28px;
	width:4px;
	height:4px;
	border-radius:50%;
	background-color:rgba(var(--color-two-rgb),.45);
}
.site-notice_item{
	position:relative;
}
/* One third, because the track holds three copies — see the note above. */
@keyframes site-notice-scroll{
	from{ transform:translateX(0); }
	to{ transform:translateX(-33.3333%); }
}
/* no motion: drop the duplicate group and centre the messages instead of
   leaving a half-scrolled strip parked mid-animation */
@media (prefers-reduced-motion: reduce){
	.site-notice_track{
		animation:none;
		width:100%;
		justify-content:center;
		flex-wrap:wrap;
	}
	.site-notice_group[aria-hidden="true"]{
		display:none;
	}
	.site-notice_group{
		flex-wrap:wrap;
		justify-content:center;
	}
	.site-notice_item:after{
		display:none;
	}
}
@media only screen and (max-width:767px){
	:root{
		--site-notice-h:36px;
	}
	.site-notice_item{
		font-size:13px;
		margin:0 18px;
	}
	.site-notice_item:after{
		right:-20px;
	}
}

/* --- mobile submenu open state -------------------------------------------
   Paired with the toggle in agora.js. The theme hides these with
   `.main-header .mobile-menu .navigation li > ul{display:none}` (0,3,2), so
   this carries .main-header too and wins on specificity rather than order. */
.main-header .mobile-menu .navigation li.open > ul{
	display:block;
}

/* The theme indents submenu links by 10px (30px against the top level's 20px),
   which isn't enough to read as nesting — expanded children looked like more
   top-level items. A deeper indent plus a faint tint makes the level obvious. */
.main-header .mobile-menu .navigation li > ul{
	background-color:rgba(var(--main-color-rgb),.06);
}
.main-header .mobile-menu .navigation li > ul > li > a{
	padding-left:44px;
}

/* --- Employee Login link in the header (next to Contact Us) --------------- */
.header-employee_login{
	position:relative;
	margin-right:25px;
}
.header-employee_login a{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:15px;
	font-weight:600;
	text-transform:capitalize;
	color:var(--color-four);
	transition:all 300ms ease;
}
.header-employee_login a:hover{
	color:var(--main-color);
}
.header-employee_login i{
	font-size:13px;
	color:var(--main-color);
}

/* The same item also sits in the <nav> so it gets cloned into the mobile
   slide-out menu. Hide it in the desktop header bar only — the mobile clone
   lives outside .main-menu, so it stays visible there. */
.main-menu .navigation > li.employee-nav{
	display:none;
}

/* --- Employee Login panel (about page) ----------------------------------- */
.employee-login{
	position:relative;
	padding:0 0 90px;
}
.employee-login_box{
	position:relative;
	max-width:760px;
	margin:0 auto;
	text-align:center;
	padding:55px 40px 50px;
	border-radius:14px;
	background-color:var(--color-ten);
	border:1px solid rgba(var(--main-color-rgb),.35);
}
.employee-login_icon{
	width:74px;
	height:74px;
	line-height:74px;
	margin:0 auto 22px;
	border-radius:50%;
	background-color:var(--main-color);
	color:#fff;
	font-size:30px;
}
.employee-login_box h3{
	margin:0 0 14px;
	color:var(--color-four);
}
.employee-login_box p{
	margin:0 auto 28px;
	max-width:520px;
	line-height:30px;
	color:rgba(var(--color-two-rgb),.75);
}
.employee-login_btn{
	display:inline-block;
	padding:15px 40px;
	border-radius:6px;
	font-weight:600;
	background-color:rgba(var(--main-color-rgb),.30);
	color:rgba(var(--color-two-rgb),.65);
	cursor:not-allowed;
}
.employee-login_note{
	margin-top:16px;
	font-size:14px;
	color:rgba(var(--color-two-rgb),.55);
}

/* --- Responsive ---------------------------------------------------------- */
@media only screen and (max-width:599px){
	.agora-check_list li{
		width:100%;
	}
	.employee-login_box{
		padding:40px 22px;
	}
	/* matches when the theme hides .main-header_button, so the mobile menu
	   entry takes over from here down */
	.header-employee_login{
		display:none;
	}
}

/* --- Certification marks in the footer bottom bar ------------------------ */
.footer-certs{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:20px;
	padding:28px 0 2px;
}
.footer-certs_item{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background-color:#fff;
	border-radius:8px;
	padding:10px 20px;
}
.footer-certs_item img{
	display:block;
	width:auto;
	height:46px;
}
.footer-certs + .main-footer_copyright{
	padding-top:20px;
}
@media only screen and (max-width:599px){
	.footer-certs{
		gap:14px;
		padding-top:22px;
	}
	.footer-certs_item img{
		height:36px;
	}
}

/* ==========================================================================
   PROFESSIONAL PASS
   The Orgaxi theme ships as a playful consumer-grocery design. Agora India is
   a B2B AgriTech business, so the cartoon styling is dialled back here.
   Everything below is an override — delete this block to get the theme's
   original look back.
   ========================================================================== */

/* --- 1. Cartoon vegetable illustrations & grass silhouettes -------------- */
.slider-three_icon,
.slider-three_icon-two,
.slider-three_grass,
.services-three_icon,
.services-three_icon-two,
.modern-one_icon,
.modern-one_icon-two,
.modern-one_icon-three,
.modern-one_circle,
.modern-two_icon,
.modern-two_icon-two,
.modern-two_icon-three,
.modern-two_vector,
.modern-two_vector-two,
.fluid-one_icon,
.fluid-one_icon-two,
.project-one_icon,
.project-one_icon-two,
.testimonial-one_icon,
.testimonial-one_icon-two,
.testimonial-two_icon,
.testimonial-two_icon-two,
.support-one_icon,
.support-one_icon-two,
.support-one_flower,
.support-one_grass,
.support-one_grass-two,
.subscribe-one_icon,
.subscribe-one_icon-two,
.subscribe-one_grass,
.page-title_vector,
.page-title_vector-two{
	display:none !important;
}

/* --- 2. Restrained colour: swap the loud orange bands for deep green ----- */
.discount-one_color-layer{
	background-color:var(--color-two);
}
.subscribe-one .inner-container{
	background-color:var(--color-two);
}
.discount-box_inner{
	background-color:rgba(var(--main-color-rgb),.22);
}

/* --- 3. Typography: firmer hierarchy, higher body contrast --------------- */
.sec-title_heading,
.discount-one_heading,
.support-one_title{
	letter-spacing:-0.015em;
}
.sec-title_title{
	letter-spacing:.12em;
	text-transform:uppercase;
	font-size:13px;
	font-weight:600;
}
.sec-title_text,
.services-block_three-text,
.services-block_four-text,
.services-block_one-text,
.category-block_one-text,
.testimonial-block_three-text,
.testimonial-block_one-text,
.discount-one_text{
	color:rgba(var(--color-two-rgb),.82);
}
.slider-three_heading{
	font-size:76px;
	line-height:86px;
	letter-spacing:-0.02em;
}
/* This file loads after responsive.css and the selector has the same
   specificity, so the 76px above was beating the theme's own mobile steps at
   every width — the headline ran off the side of the screen on a phone. The
   theme scales 90 -> 50 -> 34; these mirror that curve down from 76. */
@media only screen and (max-width:1140px){
	.slider-three_heading{
		font-size:60px;
		line-height:70px;
	}
}
@media only screen and (max-width:767px){
	.slider-three_heading{
		font-size:44px;
		line-height:54px;
	}
}
@media only screen and (max-width:479px){
	.slider-three_heading{
		font-size:32px;
		line-height:42px;
	}
}
.slider-three_text{
	color:rgba(var(--color-two-rgb),.82);
	font-size:17px;
}

/* --- 4. Cards: solid edges and a restrained lift instead of dashes ------- */
.services-block_three-inner{
	background-color:#fff;
	border:1px solid rgba(var(--main-color-rgb),.28);
	border-bottom:3px solid var(--main-color);
	border-radius:6px;
	padding:34px 22px 30px;
	box-shadow:0 2px 14px rgba(var(--color-two-rgb),.05);
	transition:box-shadow 300ms ease, transform 300ms ease;
}
.services-block_three-inner:hover{
	box-shadow:0 10px 26px rgba(var(--color-two-rgb),.10);
	transform:translateY(-3px);
}
.services-block_three-vector,
.services-block_three-pattern{
	display:none;
}
.services-block_three-icon{
	font-size:50px;
	margin-bottom:18px;
}
.services-block_four-inner,
.services-block_one-inner{
	border-radius:6px;
}

/* the 4-up cards hold a glyph in a circle — centre it properly */
.services-block_four-icon{
	font-size:34px;
	line-height:67px;
	text-align:center;
	color:#fff;
}

/* --- 5. Calmer section rhythm ------------------------------------------- */
.services-four,
.testimonial-two,
.project-one{
	padding-top:95px;
	padding-bottom:95px;
}

/* --- 6. Glyph icons -----------------------------------------------------
   The theme's base flaticon rule only targets <i>, so containers that are
   divs need the font declared explicitly. */
.services-block_four-icon,
.services-block_one-icon,
.services-block_three-icon{
	font-family:"flaticon_natua-icons" !important;
	font-style:normal;
	font-weight:normal;
}
.feature-block_three-icon i,
.feature-block_four-icon i,
.feature-block_five-icon i,
.feature-block_two-icon i,
.support-one_product-icon i{
	font-style:normal;
	line-height:1;
}
.feature-block_three-icon i,
.feature-block_four-icon i{
	font-size:30px;
	color:var(--main-color);
}
.feature-block_five-icon i,
.feature-block_two-icon i{
	font-size:26px;
	color:#fff;
}
.support-one_product-icon i{
	font-size:38px;
	color:#fff;
}

/* the theme draws a dashed rule via :before on the 3-up cards */
.services-block_three-inner:before{
	display:none;
}

/* --- 7. Remaining loud band above the footer ---------------------------- */
.support-one_color-layer{
	background-color:var(--color-two);
}

/* --- 8. Hero copy must clear the left decorative image ------------------
   The theme only shows .slider-three_pattern-two above 1450px. Between that
   and ~1800px the 294px-wide image overlaps the start of the content column,
   which put dark body text on a dark photo. Nudge the copy clear. */
@media only screen and (min-width:1451px) and (max-width:1799px){
	.slider-three_content{
		padding-left:95px;
	}
}

/* --- 9. Preloader --------------------------------------------------------
   The theme ships a Pac-Man style SVG. Replaced with the brand mark over a
   slim indeterminate progress bar — drawn in CSS, no image request. */
.preloader{
	background-image:none !important;
	background-color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
}
.preloader:before{
	content:'';
	display:block;
	width:78px;
	height:78px;
	background:url(../images/logo.png) center center / contain no-repeat;
	animation:agora-fade 1.6s ease-in-out infinite;
}
.preloader:after{
	content:'';
	position:absolute;
	top:calc(50% + 66px);
	left:50%;
	margin-left:-75px;
	width:160px;
	height:3px;
	border-radius:3px;
	overflow:hidden;
	background-color:rgba(var(--color-two-rgb),.13);
	background-image:linear-gradient(90deg,
		rgba(var(--main-color-rgb),0) 0%,
		var(--main-color) 38%,
		var(--main-color) 62%,
		rgba(var(--main-color-rgb),0) 100%);
	background-repeat:no-repeat;
	background-size:55% 100%;
	animation:agora-sweep 1.2s ease-in-out infinite;
}
@keyframes agora-sweep{
	0%   { background-position:-80% 0; }
	100% { background-position:180% 0; }
}
@keyframes agora-fade{
	0%, 100% { opacity:1; }
	50%      { opacity:.62; }
}
/* respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
	.preloader:before,
	.preloader:after{
		animation:none;
	}
}

/* ==========================================================================
   BRAND PALETTE — vivid green, gold accent, deep-green darks
   The palette used to run on a deep forest green (#2d5a3a) over warm cream.
   Accurate to the logo, but it read flat on screen: the primary was too dark
   to register as a colour, so buttons, icons and links all sank into the page.
   This pass keeps the same structure and swaps in a brighter, more saturated
   green as the primary, with the darks and surfaces retuned to sit under it.
   Overrides :root, so every theme rule using var(--…) follows automatically.
   ========================================================================== */
:root{
	/* primary — vivid brand green (was forest #2d5a3a, orig. olive #a0a051) */
	--main-color: rgb(51,163,74);
	--main-color-rgb:51,163,74;

	/* one step deeper — hovers, and text/icons that need contrast on white */
	--main-color-dark: rgb(31,122,51);
	--main-color-dark-rgb:31,122,51;

	/* deepest tone — dark bands, footer, headings. Kept getting darker with
	   each pass and ended up near-black (~15:1 on white), which read as muddy
	   rather than green. This is a genuine deep green: still 9:1 on white, so
	   white type on the dark bands is comfortably AA, but it has enough
	   saturation to look like a colour instead of a shadow. */
	--color-two: rgb(20,83,45);
	--color-two-rgb:20,83,45;

	/* accent — logo gold. Brightened: the muted gold that balanced the dark
	   green looks dusty next to the vivid one. (was #c69e36) */
	--color-three: rgb(224,178,60);
	--color-three-rgb:224,178,60;

	/* headings / strong text — a shade deeper than the bands so headlines still
	   anchor the page, but the same hue family */
	--color-four: rgb(18,72,39);
	--color-four-rgb:18,72,39;

	/* body copy — green-leaning neutrals, a touch cooler than before */
	--color-five: rgb(90,103,93);
	--color-eight: rgb(122,137,126);
	--color-nineteen: rgb(24,89,49);
	--color-twentytwo: rgb(163,182,167);
	--color-fiftyseven: rgb(76,90,79);

	/* light surfaces — crisp off-white with a faint green cast. The warm cream
	   was the other half of the dullness: it yellowed every pale section. */
	--color-sixteen: rgb(242,247,242);
	--color-twenty: rgb(228,239,229);
	--color-thirtyseven: rgb(242,247,242);
}

/* --- buttons: never white-on-gold ----------------------------------------
   The gold accent is a light colour (relative luminance ≈ .48), so a white
   label on it lands at ~2:1 — effectively unreadable. The theme does exactly
   that everywhere: gold is the resting fill on styles six and nine, and the
   :before wipes gold across one/two/three/four/five on hover, with white
   labels throughout. One rule fixes the set:

       gold surface  -> deep-green label   (4.6:1)
       green surface -> white label        (9:1 deep, 3.2:1 vivid)
   ------------------------------------------------------------------------ */

/* the hero's primary CTA. The theme drew a gold panel inset 6px inside a green
   button and covering half its width — that 6px reveal read as a misprint
   rather than a design, and the white label sat on the gold. It's now a plain
   gold button with a deep-green label, wiping to deep green on hover. */
.btn-style-three{
	background-color:var(--color-three);
}
.btn-style-three:before{
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	background-color:var(--color-two);
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform 500ms ease;
}
.btn-style-three:hover:before{
	width:100%;
	transform:scaleX(1);
}
.btn-style-three .btn-wrap .text-one,
.btn-style-three .btn-wrap .text-two{
	color:var(--color-two);
}
.btn-style-three:hover .btn-wrap .text-one,
.btn-style-three:hover .btn-wrap .text-two{
	color:var(--white-color);
}

/* the hero's secondary CTA sits next to that gold button, so a gold hover
   would collapse the two into the same colour. Brighten to the vivid green
   instead — deep green at rest, brand green on hover, white label throughout */
.btn-style-five:before{
	background-color:var(--main-color);
}

/* gold as the resting fill */
.btn-style-six .btn-wrap .text-one,
.btn-style-nine .btn-wrap .text-one{
	color:var(--color-two);
}

/* gold arriving on hover */
.btn-style-one:hover .btn-wrap .text-two,
.btn-style-two:hover .btn-wrap .text-two,
.btn-style-four:hover .btn-wrap .text-two{
	color:var(--color-two);
}

/* the same trap outside the .btn-style-* set */
.price-block_one .btn-box a:hover{
	background-color:var(--color-two);
}

/* card titles hovered to gold were ~2.1:1 on their white cards — the brand
   green is a clearer affordance and passes at heading sizes */
.services-block_three-title a:hover,
.services-block_four-title a:hover,
.services-block_one-title a:hover{
	color:var(--main-color);
}

/* --- readable green text -------------------------------------------------
   The vivid primary is a fill colour: white-on-green reads fine on a button,
   but green-on-white at body size only hits ~3.2:1, which is under AA. The
   theme uses --main-color for a lot of small text (eyebrows, post meta, list
   items, designations), so those get the deeper shade — same hue family,
   ~5.4:1 on white. Icons, hovers and headings keep the vivid green. */
a,
.sec-title_title,
.news-block_one-meta li,
.news-block_two-meta li,
.news-block_three-meta li,
.blog-detail_meta li,
.service-detail_list li,
.project-detail_list li,
.blog-detail_list li,
.project-detail_subtitle-two,
.project-detail .bold-text,
.team-detail_designation,
.comment-box .date,
.price-block_one-tag,
.feature-block_four-inner{
	color:var(--main-color-dark);
}

/* …but the icons inside those blocks stay bright — they're graphics, not copy */
.news-block_one-meta li .icon,
.news-block_two-meta li .icon,
.news-block_three-meta li .icon,
.blog-detail_meta li .icon{
	color:var(--main-color);
}

/* --- palette follow-ups the variables can't reach ----------------------- */

/* the logo sits in a block filled with --main-color; the mark's own green on a
   green badge would muddy it, so give it a light plate */
.main-header.header-style-three .header-lower .logo-box{
	background-color:rgb(242,247,242);
}

/* my own components, retuned off the same variables */
.agora-check_list li i{ color:var(--main-color); }
.header-employee_login a{ color:var(--color-four); }
.header-employee_login a:hover{ color:var(--main-color); }
.header-employee_login i{ color:var(--main-color); }
.employee-login_box{
	background-color:var(--color-sixteen);
	border-color:rgba(var(--main-color-rgb),.30);
}
.employee-login_box h3{ color:var(--color-four); }
.employee-login_box p{ color:rgba(var(--color-two-rgb),.78); }
.employee-login_btn{
	background-color:rgba(var(--main-color-rgb),.16);
	color:rgba(var(--color-two-rgb),.70);
}
.employee-login_note{ color:rgba(var(--color-two-rgb),.55); }

/* dark bands introduced in the professional pass */
.discount-one_color-layer,
.support-one_color-layer,
.subscribe-one .inner-container{
	background-color:var(--color-two);
}
.discount-box_inner{ background-color:rgba(var(--main-color-rgb),.20); }

.services-block_three-inner{
	border-color:rgba(var(--main-color-rgb),.26);
	border-bottom-color:var(--main-color);
}
.sec-title_text,
.services-block_three-text,
.services-block_four-text,
.services-block_one-text,
.category-block_one-text,
.testimonial-block_three-text,
.testimonial-block_one-text,
.discount-one_text,
.slider-three_text{
	color:rgba(var(--color-two-rgb),.80);
}

/* preloader */
.preloader:after{
	background-color:rgba(var(--color-two-rgb),.13);
	background-image:linear-gradient(90deg,
		rgba(var(--main-color-rgb),0) 0%,
		rgb(var(--main-color-rgb)) 38%,
		rgb(var(--main-color-rgb)) 62%,
		rgba(var(--main-color-rgb),0) 100%);
}

/* --- palette: the last few off-brand tones -------------------------------
   These aren't reachable through the main variables. */
:root{
	/* stat circle — was lime #82c539 */
	--color-twentynine: rgb(51,163,74);
	/* stat card fill — was khaki #b7b784 */
	--color-thirtythree: rgb(51,163,74);
	/* soft surface — was olive #dbdbc0 */
	--color-thirtyfour: rgb(214,231,216);
}
:root{
	/* highlight panel — was yellow-khaki #d4d46e */
	--color-twelve: rgb(223,236,224);
}

/* --- the rest of the cream + olive tones ---------------------------------
   These were left on the theme's defaults and were doing most of the "dull":
   pale sections came out yellow-cream, and every muted grey had an olive cast
   that fought the green. Retuned to green-tinted off-whites and neutral greys.
   The genuinely warm tones (--color-fifteen/twentysix/thirtynine/fourty) are
   deliberately left alone — they're the gold accent's family. */
:root{
	/* light surfaces */
	--color-seven: rgb(240,246,240);		/* was cream #f5f5e4 */
	--color-ten: rgb(247,250,247);			/* was #f9f9f3 */
	--color-eleven: rgb(206,231,209);		/* was pale olive #e2e2a8 */
	--color-seventeen: rgb(230,238,231);	/* was #eeeede */
	--color-thirtytwo: rgb(255,255,255);	/* cards on the green band — white
											   reads far cleaner than the old
											   pale yellow #ffffc7 */
	--color-thirtysix: rgb(240,246,241);	/* was #f2f4ec */
	--color-fourtytwo: rgb(248,251,248);	/* was #fbfbf0 */
	--color-fourtyfour: rgb(242,247,243);	/* was #f4f4ee */

	/* muted greys — olive cast removed */
	--color-six: rgb(88,99,90);
	--color-thirteen: rgb(110,124,113);
	--color-eighteen: rgb(108,120,111);
	--color-twentythree: rgb(134,149,138);
	--color-twentyfive: rgb(93,105,96);
	--color-twentyeight: rgb(102,115,105);
	--color-thirty: rgb(86,98,88);
	--color-thirtyone: rgb(97,109,100);
	--color-thirtyeight: rgb(120,135,124);
	--color-fourtyone: rgb(107,117,110);
	--color-fourtythree: rgb(136,150,139);
}

/* the tail of the palette — same treatment, cream/olive out, green-neutral in.
   --color-fiftynine / seventythree / seventyfour stay warm on purpose (gold). */
:root{
	/* the 70% wash over every page-title banner photo. It was a warm brown,
	   which is what made the inner-page headers read brown on a green site. */
	--color-thirtyfive: rgb(20,83,45);		/* was #2c2823 */

	/* the remaining near-black greens, lifted to match --color-two so the dark
	   family is one colour rather than four different shades of almost-black */
	--color-nine: rgb(17,79,41);			/* was #07370a */
	--color-fourteen: rgb(18,66,36);		/* was olive-black #212117 */
	--color-twentyseven: rgb(17,62,34);		/* was olive-black #272704 */
	--color-fiftysix: rgb(20,83,45);		/* chip fill — was #1c2f2a */

	--color-fourtyfive: rgb(246,250,246);	/* was #f8f8ee */
	--color-fourtysix: rgb(224,236,226);	/* was olive #eaead6 */
	--color-fourtyseven: rgb(148,160,150);	/* was #9d9d8b */
	--color-fourtyeight: rgb(24,74,42);		/* was dark olive #43431a */
	--color-fourtynine: rgb(230,240,231);	/* was #eeeedb */
	--color-fifty: rgb(244,249,244);		/* contact page bg — was #f8f8e9 */
	--color-fiftyone: rgb(118,129,120);		/* was #7e7e6f */
	--color-fiftytwo: rgb(247,251,247);		/* was #ffffe7 */
	--color-fiftythree: rgb(198,226,202);	/* was olive #ddddac */
	--color-fiftyfour: rgb(62,72,64);		/* was #464636 */
	--color-fiftyfive: rgb(238,245,239);	/* pricing card — was cream #f0f0e1 */
	--color-fiftyeight: rgb(210,228,212);	/* was #dcdccc */
	--color-sixty: rgb(131,142,133);		/* was #89897d */
	--color-sixtyone: rgb(120,130,122);		/* was #817e71 */
	--color-sixtythree: rgb(18,72,39);		/* was #1b1b11 */
	--color-sixtyfour: rgb(18,72,39);		/* was #1b1b11 */
	--color-sixtyfive: rgb(15,60,33);		/* was #18120c */
	--color-sixtysix: rgb(228,238,229);		/* was #e9e9d8 */
	--color-sixtyeight: rgb(228,240,229);	/* was #e9f0df */
	--color-sixtynine: rgb(243,248,243);	/* was #f6f2ed */
	--color-seventy: rgb(228,238,229);		/* was #e8e8dd */
	--color-seventyone: rgb(24,68,40);		/* was #292923 */
	--color-seventyfive: rgb(124,132,126);	/* was #7f7f7d */
}

/* the cards sit on a --main-color band, so a green dashed rule underneath them
   disappeared. Gold separates the white card from the green behind it. */
.services-block_three-inner{
	border-bottom-color:var(--color-three);
}

/* the "Monthly" chip is a dark-green pill, so it's the one place the deeper
   green text above would sit on a dark ground — white instead */
.price-block_one-tag{
	color:#fff;
}

/* the footer's soil-texture photo is opaque brown, so it covered --color-two
   entirely — the whole footer read brown against a green site, and it butted
   straight up against the deep-green subscribe band above it. Drop it to a
   texture: the green base shows through and the grain stays. */
.main-footer_pattern{
	opacity:.16;
}

/* ==========================================================================
   EQUAL-HEIGHT CARDS
   Bootstrap 5 rows are flex, so the *columns* already stretch to the tallest
   in a row — but each theme card sits in an inner wrapper that only grows to
   its own content, so cards with longer titles/copy ran taller than their
   neighbours. Make the inner wrapper fill the column, and let the copy absorb
   the slack so footers (arrow, thumbnail) line up across a row.
   ========================================================================== */

/* --- 3-up "What We Do" cards -------------------------------------------- */
.services-block_three{ display:flex; }
.services-block_three-inner{ width:100%; }

/* --- 4-up service cards with a thumbnail (homepage) --------------------- */
.services-block_four{ display:flex; }
.services-block_four-inner{
	width:100%;
	display:flex;
	flex-direction:column;
}
/* the copy absorbs the slack, so the thumbnail lands at the bottom while
   keeping its original 40px gap — the arrow is absolutely positioned against
   the thumbnail, so that gap has to stay a margin, not padding */
.services-block_four-text{ flex:1 0 auto; }

/* --- 4-up service cards with an arrow (services page) ------------------- */
.services-block_one{ display:flex; }
.services-block_one-inner{
	width:100%;
	display:flex;
	flex-direction:column;
}
.services-block_one-text{ flex:1 0 auto; }

/* --- category / focus-area cards ---------------------------------------- */
.category-block_one{ display:flex; }
.category-block_one-inner{
	width:100%;
	display:flex;
	flex-direction:column;
}
.category-block_one-text{ flex:1 0 auto; }

/* --- counter tiles (about page) ----------------------------------------- */
.counter-block_one{ display:flex; }
.counter-block_one-inner{
	width:100%;
	display:flex;
	flex-direction:column;
}
.counter-block_one-inner p{ flex:1 0 auto; margin-bottom:0; }

/* --- team tiles ---------------------------------------------------------- */
.team-block_one{ display:flex; }
.team-block_one-inner{ width:100%; }