/* =========================================================
 * CSS NOTES
 * =========================================================
 *
 * rem       = relative to the root (html) font size
 * ch        = roughly the width of the "0" character
 * viewport  = the visible area of the browser window
 * vw        = percentage of viewport width
 * clamp()   = responsive value between a minimum and maximum
 * @media    = applies rules based on screen/device conditions
 * flex      = layout system for arranging elements
 * font-weight — Controls how thick or bold the text appears.
 * em — Relative to the current element’s font size.
 *CSS properties and values.
	color → property
	red → value
	font-size: 2rem → declaration
	.header → selector
	@media → at-rule
 * ::before — Pseudo-element that inserts content before an element’s content.
 * z-index — Controls the stacking order of overlapping elements.
 * border-radius — Controls how rounded an element’s corners are.
 *	Radius common values:
 *		0 → clean/square
 *		8px → subtle
 *		12px → noticeably rounded
 *		999px → potentially circular/pill-like, although we wouldn't normally use that here
 * !important — Forces a CSS declaration to take priority over normal rules.	
 * deg — Unit for measuring angles in degrees.
 * :first-child — Selects an element that is the first child of its parent.
 * :last-child — Selects an element that is the last child of its parent.
 *
 * SPACE PROPERTIES: mental model, margin > border > padding > content
 * margin — Space outside an element.
 * padding — Space inside an element, between content and border.
 * border — The visible edge surrounding the element.
 * gap — Space between flex/grid items.
 * width — Controls the element's horizontal size.
 * height — Controls the element's vertical size.
/*
 * COLOR EXPERIMENTATION
 *
 * These variables are the main color customization dials.
 *
 * Primary / primary-hover → buttons, links, and important actions
 * Focus                   → keyboard focus states
 * Success / error / warning → forms and user feedback
 * Background / surface    → page and section backgrounds
 * Text / muted            → information hierarchy
 * Dark / light            → high-contrast UI sections
 * Border                  → subtle structural separation
 *
 * When customizing a client, experiment here first rather than
 * changing individual component colors throughout the stylesheet.
 *
 * Component-specific colors can still be added later when a real
 * design need appears.
 */
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =========================================================
 * CLIENT / DESIGN VARIABLES
 * =========================================================
 *
 * These are the main values you can change for each client.
 * The rest of the stylesheet uses these variables.
 *
 * This keeps client customization in one place.
 *
 * ========================================================= */

:root {
	/* Colors */
	/* Colors = WHAT color something is */
	--color-primary: #ec8229;  /* Brand accent , primary action */
	--color-primary-hover-light: #f39a4b; /* Lighter primary used when buttons,links are hovered */
	--color-primary-hover-dark: #d46f17; /* Darker primary used when buttons,links are hovered */
	--color-background: #ffffff;  /* Main page background */
	--color-surface: #f3f6fa;  /* Secondary section / surface background */
	--color-text: #0c2844;        /* Primary text */
	--color-muted: #5b6b7d;       /* Secondary  de-emphasized text */
	--color-dark: #0c2844;        /* Dark background , dark UI */
	--color-light: #fff;       /* Light text , light UI */
	--color-border: #dce3ec;   /* Subtle borders , dividers */
	--color-focus: #2b5c8f;		/* Keyboard focus indicator color for interactive elements */
	--color-success: #16a34a;	/* Successful actions, confirmations, or valid form states */
	--color-error: #dc2626;		/* Errors, invalid fields, or failed actions */
	--color-warning: #d97706;	/* Warnings or situations needing user attention */
	/* NEW variables (see notes in chat) */
	--color-on-primary: #0c2844;   /* text on buttons */
	--color-link: #2b5c8f;        /* links on light backgrounds */
	--color-eyebrow: #2b5c8f;   /* small label text */
	--color-nav-link: #ffffff;     /* header nav links */
	--color-footer-link: #b8c2ce; /* footer links */

	--hero-overlay-opacity: 0.35; /* opacity variable for hero overlay (service variant uses this */

	/* IMAGES */
	--image-radius: 0; /* Default image corner radius. */

	/* TYPOGRAPHY */
	/* 3 Jakarta + Inter */
	--font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-heading: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-size-base: 16px;
	/* used to display relative font size to the viewport */
	--font-size-display: clamp(2.5rem, 5vw, 4.5rem);
	--font-size-h3: 1.5rem;
	--font-size-h2: 2rem;
	--font-size-h1: 3rem;
	/* small labels, eyebrow text, and supporting notes */
	--font-size-small: 0.875rem; /* 14px */
	--font-weight-semibold: 600;
	--body-line-height: 1.6;
	--body-font-weight: 400;
	--heading-line-height: 1.2;
	--heading-font-weight: 700;
	/* use letter spacing for headers that are very large and font accomodates (h1/2)*/
	--heading-letter-spacing: -0.01em;
	--hero-heading-letter-spacing: -0.01em;
	/* letter spacing for labels and uppercase text */
	--letter-spacing-label: 0.08em;
	/* max readable line length for body copy */
	--text-width-narrow: 52ch;

	/* Typography emphasis */
	/* Opacity = HOW visually prominent something is */
	--text-opacity-primary: 1;
	--text-opacity-secondary: 0.75;
	--text-opacity-muted: 0.6;
	
	/* LAYOUT */
	/* Main layout widths */
	--container-width: 1200px;
	--content-width: 750px;

	/* Responsive breakpoints */
	/* Main breakpoint: mobile below 767, desktop at 768 or above */
	--breakpoint-mobile: 767px;
	--breakpoint-desktop: 768px;

	/* Common layout spacing */
	--section-spacing: 5rem;

	/* Layout spacing */
	/* spacing values based on multilples of 8 for consistency */
	--space-1: 0.5rem;	/* 8px */
	--space-2: 1rem;	/* 16px */
	--space-3: 1.5rem;	/* 24px */
	--space-4: 2rem;	/* 32px */
	--space-5: 2.5rem;	/* 40px */
	--space-6: 3rem;	/* 48px */
	--space-7: 3.5rem;	/* 56px */
	--space-8: 4rem;	/* 64px */

	/* LAYOUT -- additional reusable values */
	--grid-column: 12;

	/* default max width for hero copy */
	--hero-content-width: 600px;

	/* width of inline forms and supporting notes */
	--hero-form-width: 600px;
	
}


/* =========================================================
 * GLOBAL
 * =========================================================
 *
 * Basic styles used throughout the entire website.
 *
 * ========================================================= */
* {
	/* Makes width/height calculations include padding and borders.
	 * This makes sizing much more predictable throughout the site. */
	box-sizing: border-box;
}

body {
	/* Remove browser default body margin so the site's layout
	 * controls the page edges instead. */
	margin: 0;
	min-height: 100vh; /* makes the page at least as tall as the viewport */
	display: flex; /* makes the body a verital flexbox layout (w/ column) */
	flex-direction: column;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--color-text);
	background-color: var(--color-background);
}

main {
	/* Makes main expand into available vertical space
	 * pushing the footer to the bottom even on short pages */
	flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* Establishes one consistent heading system site-wide. */
	line-height: var(--heading-line-height);
	margin-top: 0;
	font-family: var(--font-heading);
	font-weight: var(--heading-font-weight);
}

p {
	/* Removes the browser's default top margin.
	 * We control paragraph spacing elsewhere. */
	margin-top: 0;
}

a {
/*	color: var(--color-primary);*/
	color: var(--color-primary-hover-light);
}

a:not(.button):hover {
	color: var(--color-primary-hover-light);
}

/* Shows a visible keyboard-focus indicator withoutaffecting normal mouse clicks. */
:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

img {
	/* Prevents images from overflowing their containing element
	 * while preserving their natural aspect ratio. */
	max-width: 100%;
	height: auto;
	display: block;
}

.image-frame {
	/* CLips the image to the frame when using controlled cropping or rounded corners */
	overflow: hidden;
	border-radius: var(--image-radius);
}

.image-frame--landscape {
	/* Standard wide image shape for service/project photo */
	aspect-ratio: 16 / 9;
}

.image-frame--portraits {
	/* Taller shape suited to people and portrait photo */
	aspect-ratio: 3 / 4;
}

.image-frame--square {
	/* Equal width/height for compact/profile imagery */
	aspect-ratio: 1 / 1;
}

.image-frame img {
	/* Makes the image fill the controlled frame */
	width: 100%;
	height: 100%;
	/* Fills the frame without stretching the image.
	 * Excess image area is cropped. */
	object-fit: cover;
	/* Keeps the most important central area visible by default.
	 * Individual images can override this when needed . */
	object-position: center;
}

/* About page introduction */
.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 3rem;
}

.about-owner-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Keep the heading aligned with the top of the text */
.about-intro-content h2 {
    margin-top: 0;
}

/* Mobile layout */
@media (max-width: 767px) {
    .about-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* About page imagery */
.about-image {
	margin-inline: auto;
	margin-bottom: var(--space-6);
}

/* Shared image styling */
.about-image img {
	width: 100%;
	height: auto;
	border-radius: var(--image-radius);
}

/* Owner/founder image */
.about-owner-image {
	max-width: 250px;
}

/* Team/company image */
.about-team-image {
	max-width: 700px;
}

/* Portfolio */

.portfolio-section {
	padding-bottom: var(--section-spacing);
}

/* Portfolio project grid */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	padding: var(--space-3);
}

/* Portfolio project card */
.portfolio-card {
	border: 1px solid var(--color-border);
	border-radius: var(--image-radius);
	overflow: hidden;
	align-self: start;
}

/* Portfolio card image */
.portfolio-card-image img {
	width: 100%;
	height: auto;
}

/* Portfolio card content */
.portfolio-card-content {
	padding: var(--space-3);
}

/* Portfolio card title */
.portfolio-card-content h2 {
	margin-bottom: 0;
	font-size: var(--font-size-h3);
}

.portfolio-card-content a {
	text-decoration: none;
}

/* Portfolio project */
/* Project featured image */
.portfolio-project-image {
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
}

.portfolio-project-image img {
	width: 100%;
	height: auto;
	border-radius: var(--image-radius);
}

/* Services */
.services-section {
	padding-bottom: var(--section-spacing);
}
/* Services overview image */
.services-image {
	max-width: 700px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
}

.services-image img {
	width: 100%;
	height: auto;
	border-radius: var(--image-radius);
}

/* Services grid */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	padding: var(--space-6);
}

/* Service card */
.service-card {
	border: 1px solid var(--color-border);
	border-radius: var(--image-radius);
	overflow: hidden;
}

/* Service card image */
.service-card img {
	width: 100%;
	height: auto;
}

/* Service card content */ 
.service-card-content {
	padding: var(--space-3);
}

.service-card-content h2 {
	margin-bottom: var(--space-1);
	font-size: var(--font-size-h3);
}

.service-card-content h2 a {
	text-decoration: none;
}

.service-card-content p {
	margin-bottom: var(--space-2);
}

/* Individual service */ 
/* Service featured image */ 
.service-image {
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
}

.service-image img {
	width: 100%;
	height: auto;
	border-radius: var(--image-radius);
}

/* Blog */ 

/* Blog grid */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
}

/* Blog card */ 
.blog-card {
	border: 1px solid var(--color-border);
	border-radius: var(--image-radius);
	overflow: hidden;
}

/* Blog card image */
.blog-card-image img {
	width: 100%;
	height: auto;
}

/* Blog card content */ 
.blog-card-content {
	padding: var(--space-3);
}

.blog-card-content h2 {
	margin-bottom: var(--space-1);
	font-size: var(--font-size-h3);
}

.blog-card-content h2 a {
	text-decoration: none;
}

.blog-card-content p {
	margin-bottom: var(--space-2);
}

/* Individual blog post */
/* Blog post image */
.blog-post-image {
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
}

.blog-post-image img {
	width: 100%;
	height: auto;
	border-radius: var(--image-radius);
}


/* Resource card categories */
.resource-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.resource-category {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-muted);
    font-size: var(--font-size-small);
}

/* Related content */
.related-content {
	margin-top: var(--space-8);
}

.related-content h2 {
	margin-bottom: var(--space-3);
}

.related-content-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.related-content-list li {
	margin-bottom: var(--space-1);
}

/* ===========================
 * RESPONSIVE Mobile Globals
 * ===========================*/
/* Mobile GLobals for specific page styling goes here below the above
 * specific page general styles (ex: portfolio, about, services, etc.)
 */
@media (max-width: 767px) {
	.portfolio-grid {
		grid-template-columns: 1fr;
	}
	.services-grid {
		grid-template-columns: 1fr;
	}
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
 * GLOBAL LAYOUT
 * =========================================================
 *
 * The container controls the maximum width of site content.
 *
 * ========================================================= */
.container {
	/* The container is full-width until the max-width is reached.
	 * margin-inline centers it once it becomes narrower than the viewport. */
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	/* Smaller horizontal padding gives mobile content some
	 * breathing room without wasting screen space. */
	padding-inline: var(--space-2);
}

@media (min-width: 768px) {
	/* Increase the horizontal breathing room on larger screens.
	 * The container width itself remains capped by --container-width. */
	.container {
		padding-inline: var(--space-4);
	}
}

/* =========================================================
 * GLOBAL BUTTON
 * =========================================================
 *
 * Shared button style used for important actions and CTAs.
 *
 * The primary color can be changed per client above.
 *
 * ========================================================= */
.button {
	/* Inline-block allows the button to behave like an inline
	 * element while still accepting padding and dimensions. */
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	text-decoration: none;
	font-weight: 600;
	border-radius: 4px;
	background-color: var(--color-primary);
	color: var(--color-light);
}

.button:hover {
	background-color: var(--color-primary-hover-dark);
}

/* =========================================================
 * HEADER
 * =========================================================
 *
 * The header stays simple and quiet so the landing hero
 * remains the main visual focus.
 *
 * ========================================================= */
header {
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-dark);
	color: var(--color-light);
}

/*=====================
 * HEADER NAVIGATION
 * ====================*/
/* Desktop navigation is hidden by default on mobile */
header .desktop-navigation {
	display: none;
}

/* Removes browser defaults from navigation lists */
header nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*=====================
 * MOBILE MENU BUTTON
 * ====================*/
header .menu-toggle {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 5px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none; 
	padding: 10px;
	cursor: pointer;
}

header .menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-light);
}

/*============================
 * MOBILE NAVIGATION OVERLAY
 *============================*/
header .mobile-navigation {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	background-color: var(--color-dark);
	color: var(--color-light);
	border-radius: 16px; /* experiment for rounded corners on mobile nav menu */
}

header .mobile-navigation.is-open {
	display: block;
}

/* ---------------------------------------------------------
 * MOBILE NAVIGATION BRAND
 * ---------------------------------------------------------
 *
 * The logo and site name provide a direct route back to
 * the landing page from inside the mobile navigation.
 *
 * --------------------------------------------------------- */
header .mobile-navigation-brand {
	display: flex;
	align-items: center;
	gap: var(--space-1);

	color: var(--color-light);
	text-decoration: none;
	margin-inline: auto;
}

header .mobile-navigation-brand img {
	/* Keeps the mobile navigation logo visually compact. */
	width: 32px;
	height: 32px;
}

header .mobile-navigation-brand span {
	color: var(--color-light);
}

header .mobile-navigation-brand:hover span {
	color: var(--color-primary);
}

/* Mobile navigation top row. */
header .mobile-navigation-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-2);
/*	border-bottom: 1px solid var(--color-border); experiment with mobile nav menu header having a bottom white border line or not. */
	background-color: var(--color-dark);
}

/* "Menu" in top left corner font weight */
header .mobile-navigation-header > span {
	font-weight: 600;
}

/* Close button  */
header .menu-close {
	position: relative;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	padding: 10px;
	cursor: pointer;
}

/* The two spans form the X. */
header .menu-close span {
	position: absolute;
	top: 21px;
	left: 10px;
	width: 24px;
	height: 2px;
	background-color: var(--color-light);
}

header .menu-close span:first-child {
	transform: rotate(45deg);
}

header .menu-close span:last-child {
	transform: rotate(-45deg);
}

/* Mobile navigation links. */
header .mobile-navigation nav {
	display: block;
}

header .mobile-navigation nav ul {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* turns the link element (buttons) stretched across the viewport) */
	gap: var(--space-3);
	padding-top: var(--space-3);
}

/* turns each menu link into a button */
header .mobile-menu-link-buttons {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

header .mobile-navigation nav a {
	display: block;
	padding: var(--space-1);
	background: var(--color-dark);
	color: var(--color-light);
	text-decoration: none;
	font-size: var(--font-size-h3);
	text-align: center;
}

header .mobile-navigation nav a:hover {
	color: var(--color-primary-hover-light);
}

/* mobile header nav menu cta button*/
header .mobile-nav-menu-cta {
	display: block;
	width: fit-content;
	margin: var(--space-4) auto 0;
	font-size: var(--font-size-h1);
	background-color: var(--color-primary-hover-dark); 
	border: 1px solid var(--color-border);
}

header .container {
	/* Flexbox is appropriate here because the header is primarily
	 * a one-dimensional row: brand on one side, navigation on the other. */
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header .brand {
	/* Keeps the brand's internal elements aligned horizontally. */
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

header .brand a {
	/* Styles the header brand logo and site into a redirect back to /landing element
	 * logo + website name, and global hover affects this as well */
	display: flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-light);
	text-decoration: none;
}

header .brand a span {
	color: var(--color-light);
}

header .brand a:hover span {
	color: var(--color-primary);
}

header .navigation {
	/* Keeps the navigation controls aligned as one group. */
	display: flex;
	align-items: center;
}

/* Desktop navigation. */
@media (min-width: 1151px) {
	header .desktop-navigation {
		display: block;
	}
	header .desktop-navigation ul {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}
	header .desktop-navigation a {
		display: block;
		padding-block: var(--space-1);
		text-decoration: none;
		color: var(--color-light);
	}
	header .desktop-navigation a:hover {
		text-decoration: underline;
	}
	header .menu-toggle {
		display: none;
	}
	header .mobile-navigation {
		display: none !important;
	}
}

@media (max-width: 1150px) {
	header .brand img {
		width: 75%;
		height: auto;
	}

	header .brand span {
		font-size: 80%;
	}

	.header-cta {
		font-size: 0.75em;
	}
}

/* Gives the header CTA a little separation from the navigation. */
header .header-cta {
	margin-left: var(--space-1);
}

/* =========================================================
 * LANDING PAGE
 * =========================================================
 *
 * The landing page is the primary conversion-focused part
 * of the site.
 *
 * The hero receives the most visual emphasis.
 *
/* ---------------------------------------------------------
 * HERO
 * ---------------------------------------------------------
 *
 * Main landing-page sales section.
 *
 * This is intentionally wider and more dramatic than
 * interior pages.
 *
 * --------------------------------------------------------- */
.hero {
	/* Large vertical spacing gives the hero more visual weight
	 * than normal page sections. */
	padding-block: 6rem; /* leave for now, no --space-X var to accomodate */
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

/*
 * Main hero Grid.
 * The Grid acts as a flexible "canvas" for the hero.
 * We can later move individual components by changing
 * their grid-column values without rebuilding the hero.
 */
.hero-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-4);
	align-items: center;
}

/*
 * Hero copy.
 * Default placement:
 * columns 2 → 7
 * This leaves a small visual margin on the left while
 * giving the copy roughly half of the hero width.
 */
.hero-content {
	grid-column: 2 / 7;
	max-width: 600px;
}

/*
 * Hero visual.
 * Default placement:
 * columns 7 → 12
 */
.hero-visual {
	grid-column: 7 / 12;
	max-width: 550px;
}

/*
 * Hero form.
 * Default placement:
 * columns 2 → 12
 * This gives the horizontal form a broad area underneath
 * the main hero content and visual.
 */
.lead-form {
	grid-column: 2 / 12;
}

/* ---------------------------------------------------------
 * HERO VARIANTS
 * ---------------------------------------------------------
 *
 * Variant-specific hero layouts.
 * Structural hero variations selected through front matters
 *
 * .hero = shared hero foundation
 * .hero--* = intentional structural variations
 *
 * --------------------------------------------------------- */
.hero--default {
	/* Default hero uses the shared Grid placement. */
}

.hero--professional {
	/*
	 * Professional heroes use the shared Grid skeleton.
	 *
	 * The copy and visual placement can be customized here
	 * later without changing the base hero structure.
	 */
}

.hero--professional .hero-visual {
	/* Creates a positioning reference for the trust badge.
	 * The badge can now be positioned relative to this visual,
	 * rather than relative to the page. */
	position: relative;
}

.hero--professional .hero-trust-badge {
	/* The badge is a secondary visual element layered over
	 * the main image rather than taking up another Grid column. */
	position: absolute;
	right: 0;
	bottom: 0;
	width: 120px;
}

/* web-service-var-1: centered copy with an inline email form.
 * Everything sites on the shared 12-col grid, stacked by row.
 * "3 / 11" starts at line 3 and stope BEFORE line 11, so it covers
 * columns 3 to 10. Equal empy columns on both sides is what centers an item.
 *
 * Row 1 copy col 3 to 10
 * row 2 form col 4 to 9
 * row 3 form note col 4 - 9
 * row 4 fact strip col 2 to 11
 */
.hero--web-service-var-1 .hero-grid {
	/* tighter row gap keeps the form, note, and facts visually connected to the copy */
	row-gap: var(--space-2);
}

.hero--web-service-var-1 .hero-content {
	grid-column: 3 / 11;
	grid-row: 1;
	/* the grid columns control the width instead of the 600px cap */
	max-width: none;
	text-align: center;
}

.hero--web-service-var-1 .hero-eyebrow {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.hero--web-service-var-1 .hero-content h1 {
	/* lower ceiling than the shared hero headline so a two-line headline fits in 8 columns */
	font-size: clamp(2.25rem, 4.5vw, var(--font-size-h1));
	word-spacing: 3px;

}

.hero--web-service-var-1 .hero-content p {
	max-width: var(--text-width-narrow);
	margin-inline: auto;
}

.hero--web-service-var-1 .lead-form {
	grid-column: 4 / 10;
	grid-row: 2;
	/* the shared .lead-form uses margin-inline: auto, which makes a grid item shrink to its content. 
	 * Zero lets it fill its 6 col; the columns do the centering. */
	margin-inline: 0;
}

.hero--web-service-var-1 .lead-form button[type="submit"] {
	/* the shared button uses the h3 size and has no border, so its taller than the input. Base size
	 * plus a transparent 1px border (matching the input) makes both the same height. */
	font-size: var(--font-size-base);
	padding-inline: var(--space-3);
	white-space: nowrap;
	border: 1px solid transparent;
}

.hero--web-service-var-1 .hero-form-note {
	grid-column: 4 / 10;
	grid-row: 3;
	text-align: center;
	font-size: var(--font-size-small);
	/* opacity instead of --color-muted keeps small text readable on the surface-colored hero background */
	opacity: var(--text-opacity-secondary);
}

.hero--web-service-var-1 .hero-facts {
	/* a grid item on the hero griid AND ites own 3-col grid */
	grid-column: 2 / 12;
	grid-row: 4;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	list-style: none;
	margin: var(--space-4) 0 0; /* represents top left/right and bottom margins top: var... L/R: 0 bot:0 */
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--color-border);
	text-align: center;
	color: var(--color-eyebrow);
}

/* web-service-var-2: split hero. Copy and an inline email form on the left, a dekstop + mobile 
 * site mockup on the right. The grid uses all 12 columns; col 7 is left empty as a gutter.
 *
 * Left col (copy, form, note) = col 1 to 6, stacked by row. 
 * Right col (mockup) = col 8 to 12, spanning rows 1 to 3 so it stays vertically centered against the whole
 * left stack.
 * Row 1 copy	col 1 to 6		mockup col 8 to 12
 * Row 2 form	col 1 to 6		(spans rows 1 to 3)
 * Row 3 form note	col 1 to 6
 */
.hero--web-service-var-2 .hero-grid {
	/* tighter row gap keep sthe form and note connected to the copy */
	row-gap: var(--space-2);
}

.hero--web-service-var-2 .hero-content {
	grid-column: 1 / 7;
	grid-row: 1;
	max-width: none;
}

.hero--web-service-var-2 .hero-eyebrow {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.hero--web-service-var-2 .hero-content h1 {
	/* lower ceiling than the shared hero headline, since the copy col is only 6 col wide */
	font-size: clamp(2.25rem, 4vw, var(--font-size-h1));
}

.hero--web-service-var-2 .lead-form {
	grid-column:  1 / 7;
	grid-row: 2;
	/* the shared .lead-form uses margin-inline: auto, which makes a grid item shrink to its content.
	 * zero lets it fill its columns */
	margin-inline: 0;
}

.hero--web-service-var-2 .lead-form button[type="submit"] {
	/* base size plus a transparent 1px border (matching the input) makes the button and input 
	 * the same height */
	font-size: var(--font-size-base);
	padding-inline: var(--space-3);
	white-space: nowrap;
	border: 1px solid transparent;
}

/* Hero variant 2: paried desktop and mobile website mockups (hero image and second hero image) */
/* Hero variant 2: paired desktop and mobile website mockups. */

.hero--web-service-var-2 .hero-visual {
	grid-column: 7 / 13;
	grid-row: 1 / 4;
	width: 100%;
	max-width: none;
	min-width: 0;
}

/* Both images occupy one shared visual container. */
.hero--web-service-var-2 .hero-mockup {
	display: grid;
	width: 100%;
	min-width: 0;
}

/* Mockup images. */
.hero--web-service-var-2 .hero-mockup--image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* Preserve image aspect ratios. */
.hero--web-service-var-2 .hero-mockup img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.hero--service .container {
	/* The Service variant uses the same Grid system because
	 * its background image is no longer a separate visual column.
	 * z-index keeps the content above the background overlay. */
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	min-height: 500px;
}

.hero--service {
	/* Establishes the boundary and positioning context for
	 * the background overlay created with ::before. */
	position: relative;
	overflow: hidden;
	/* The image is decorative background imagery rather than
	 * content that needs its own <img> element. */
	background-image: url("/images/hero-roofing-bg.svg");
	/* Cover fills the entire hero, allowing some image cropping. */
	background-size: cover;
	/* Controls which part of the background remains visible
	 * when the image must be cropped. */
	background-position: center;
 }

 .hero--service::before {
	 /* Creates a transparent layer between the background image
	  * and the actual hero content.
	  *
	  * This improves text contrast without making the text itself
	  * transparent. */
	 content: "";
	 /* inset: 0 makes the overlay fill the entire hero. */
	 position: absolute;
	 inset: 0;
	 /* The white layer lightens the background image. */
	 background-color: #fff;
	 /* Controls how strongly the background is washed out. */
	 opacity: var(--hero-overlay-opacity);
 }

/* Primary hero content receives slightly more visual weight
 * than the supporting visual (defined by flex property (adjust as needed)*/
.hero-content {
	/* In Flexbox layouts, gives the content a slightly larger
	 * share of available space than the visual. */
	flex: 1.1;
	max-width: 600px;
}

.hero h1 {
	/* The hero headline is intentionally the largest text
	 * on the landing page and therefore the primary visual anchor. */
	font-size: var(--font-size-display);
	letter-spacing: var(--hero-heading-letter-spacing);
	margin-bottom: var(--space-3);
}

.hero-content p {
	/* Supporting copy is intentionally larger than ordinary
	 * body text because it needs to communicate the value
	 * proposition quickly in the hero. */
	font-size: 1.25rem;
	max-width: 52ch;
	margin-bottom: var(--space-4);
}

.hero-visual {
	/* Default Flexbox relationship: give the image slightly
	 * less space than the hero content. */
	flex: 1;
	max-width: 100%;
	min-width: 0;
}

.hero-visual img {
	/* Allows the image to fill its available visual area
	 * without distorting its proportions. */
	width: 100%;
	height: auto;
	border-radius: var(--image-radius); /* how rounded the corners are */
}

/*=========================================================
 * LEAD FORM
 * ========================================================*/
.lead-form {
	max-width: var(--content-width);
	margin-inline: auto;
}

/* Placeholder styling across all form variants */
.lead-form input::placeholder,
.lead-form textarea::placeholder {
	color: var(--color-muted);
	opacity: var(--text-opacity-secondary);
}

.form-fields {
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-bottom: var(--space-1);
	font-size: var(--font-size-base);
}

.form-field label {
	font-weight: 600;
}

.form-field input,
.form-field textarea {
	width: 100%;
	padding: var(--space-1);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font: inherit;
	color: var(--color-text);
	background-color: var(--color-background);
}

.form-field textarea {
	min-height: 150px;
	resize: vertical;
}

.lead-form button[type="submit"] {
	padding: var(--space-1) var(--space-2);
	border: 0;
	border-radius: 4px;
	background-color: var(--color-primary);
	color: var(--color-light);
	font: inherit;
	font-weight: 600;
	font-size: var(--font-size-h3);
	cursor: pointer;
}

.lead-form button[type="submit"]:hover {
	background-color: var(--color-primary-hover-dark);
}

.lead-form--compact {
	padding: var(--space-1);
	border: 1px solid var(--color-dark);
	border-radius: 4px;
	margin-bottom: var(--space-3);
}

.lead-form--compact .form-field {
	margin-bottom: var(--space-1);
	gap: 0.25rem;
	font-size: var(--font-size-base);
}

.lead-form--compact .form-field input ,
.lead-form--compact .form-field textarea {
	padding: 0.4rem;
}

.lead-form--horizontal {
	max-width: none;
}

.lead-form--horizontal .form-fields {
	display: flex;
	align-items: end;
	gap: var(--space-2);
}

.lead-form--horizontal .form-field {
	flex: 1;
	margin-bottom: 0;
}

/* compact and horizontal variant forms: use placeholdsrs as field idnetifiers */
.lead-form--compact .form-field > label,
.lead-form--horizontal .form-field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* lead form honeypot styling to not display it */
.lead-form .honeypot {
    display: none;
}

/* LEAD FORM MESSAGES 
 * Form submission feedback */
.form-message {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-h3);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-primary);
	color: var(--color-light);
}

.form-message--error {
	border-color: var(--color-error);
	background: var(--color-error);
	font-size: var(--font-size-h3);
}

.form-message--success {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	font-size: var(--font-size-h3);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-primary);
	color: var(--color-light);
}

/* POST HERO CONTACT */


/* ---------------------------------------------------------
 * LANDING CONTENT
 * ---------------------------------------------------------
 *
 * Supporting landing-page content uses the same readable
 * width as interior pages.
 *
 * The hero remains wide; this content becomes restrained.
 *
 * --------------------------------------------------------- */
.landing-content {
	padding-block: var(--section-spacing);
}

/* This is styling the home content markedown with baked in html to format the content 
 * section of that page.
 */

/* Objection cards */
.objections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block: var(--space-4) var(--space-6);
}

.objection-card {
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 1rem 0 1rem 0;
}

/* Risk-reversal line */
/* Not currently used
.objection-card .objection-reversal {
  margin: 0 0 var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-small);
  line-height: 1.5;
}
*/

/* Card heading */
.objection-card h3 {
  margin-top: 0;
  margin-bottom: var(--space-1);
}

/* Card body */
.objection-card > p:last-child {
  margin-bottom: 0;
}

/* Tablet and mobile */
@media (max-width: 767px) {
  .objections-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .objection-card {
    padding: var(--space-3);
  }
}

/* FAQ SECTION */
/* Landing page FAQ */
.landing-faq {
  margin-block: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}

.landing-faq__item {
  border-bottom: 1px solid var(--color-border);
}

.landing-faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 2.5rem var(--space-2) 0;
  cursor: pointer;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  line-height: var(--heading-line-height);
  list-style: none;
}

.landing-faq__item summary::-webkit-details-marker {
  display: none;
}

.landing-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--color-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--body-font-weight);
  line-height: 1;
}

.landing-faq__item[open] summary::after {
  content: "−";
}

.landing-faq__item summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.landing-faq__answer {
  padding: 0 0 var(--space-2);
}

.landing-faq__answer > :first-child {
  margin-top: 0;
}

.landing-faq__answer > :last-child {
  margin-bottom: 0;
}

.landing-faq__answer li + li {
  margin-top: var(--space-1);
}

.landing-faq__answer a {
  color: var(--color-link);
}

.landing-faq__answer a:hover {
  color: var(--color-primary-hover-dark);
}

@media (max-width: 767px) {
  .landing-faq__item summary {
    padding-block: var(--space-2);
  }
}

/* Landing page: Three steps */
.landing-steps {
  padding-block: var(--section-spacing);
}

.landing-steps__inner {
  width: min(100% - var(--space-4), var(--container-width));
  margin-inline: auto;
}
/* Three Steps: Section header */
.landing-steps .landing-steps__header {
  display: block;
  max-width: var(--text-width-narrow);
  margin: 0 auto var(--space-6);
  padding: var(--space-3);
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  text-align: center;
}

.landing-steps .landing-steps__header h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-h2);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
}

.landing-steps .landing-steps__header p {
  max-width: var(--text-width-narrow);
  margin: 0 auto;
  color: var(--color-muted);
}
.landing-steps__flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
}

.landing-steps__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-background);
}

.landing-steps__item--main {
  border-color: var(--color-primary);
  border-top: 3px solid var(--color-primary);
  background: var(--color-surface);
}

.landing-steps__number {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
}

.landing-steps__item h3 {
  margin-top: 0;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-h3);
  line-height: var(--heading-line-height);
}

.landing-steps__item p {
  margin-bottom: 0;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .landing-steps {
    padding-block: var(--space-6);
  }

  .landing-steps__header {
    margin-bottom: var(--space-4);
    text-align: left;
  }

  .landing-steps__flow {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}



/* ---------------------------------------------------------
 * LANDING CTA
 * ---------------------------------------------------------
 *
 * Final conversion section.
 *
 * This is intentionally wider and more prominent than
 * ordinary content.
 *
 * --------------------------------------------------------- */
.final-cta {
	padding-bottom: var(--space-3);
}

.final-cta .button {
	/* Makes the final CTA span the available content width
	 * rather than behaving like a small inline button. */
	display: block;
	width: 100%;
	margin: 0 auto;
	font-size: var(--font-size-h2);
	text-align: center;
	border-radius: 0;
}

/* ---------------------------------------------------------
 * HERO RESPONSIVE LAYOUT
 * ---------------------------------------------------------
 *
 * On smaller screens the hero changes from two columns
 * to a stacked layout.
 *
 * --------------------------------------------------------- */
@media (max-width: 767px) {
	.hero {
		/* Reduce the large desktop hero spacing on small screens
		 * where vertical space is more limited. */
		padding-block: var(--space-4);
	}

	.hero .container {
		/*
		 * Collapse the 12-column desktop Grid into one column.
		 *
		 * The individual hero components then stack naturally.
		 */
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.hero-content,
	.hero-visual,
	.hero-form {
		/*
		 * Each major hero component occupies the full mobile
		 * Grid width.
		 */
		grid-column: 1 / -1;
		max-width: none;
	}

	.lead-form--horizontal .form-fields {
		flex-direction: column;
		align-items: stretch;
	}

	.lead-form--horizontal .form-fields {
		width: 100%;
	}

	/* web-service-var-1: collapse the hero grid iteslef to one col (the .hero
	 * .container rules above is not the grid) then let every direct child span the full width. */
	.hero--web-service-var-1 .hero-grid {
		grid-template-columns: 1fr;
	}

	.hero--web-service-var-1 .hero-grid > * {
		/* > * means "select every direct child element" */
		grid-column: 1 / -1;
	}

	.hero--web-service-var-1 .lead-form button[type="submit"] {
		width: 100%;
	}

	/*  Mobile: full-width, ceneterd copy and form for hero--web-service-var-2 */
	.hero--web-service-var-2 .hero-content {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		text-align: center;
	}

	.hero--web-service-var-2 .hero-content h1 {
		max-width: 100%;
		margin-inline: auto;
	}

	.hero--web-service-var-2 .hero-content p {
		max-width: var(--text-width-narrow);
		margin-inline: auto;
	}

	.hero--web-service-var-2 .lead-form {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		margin-inline: 0;
	}

	.hero--web-service-var-2 .lead-form button[type="submit"] {
		width: 100%;
	}

	.hero--web-service-var-2 .hero-form-note {
		grid-column: 1 / -1;
		grid-row: 3;
		text-align: center;
		margin-inline: auto;
		max-width: var(--text-width-narrow);
	}

	/* stack the hero as before but keep the mockups side by side in mobile */
	.hero--web-service-var-2 .hero-visual {
		grid-column: 1 / -1;
		grid-row: auto;
		width: 100%;
	}

	.hero--web-service-var-2 .hero-mockups {
		grid-template-columns: 3fr 1fr;
		gap: var(--space-2);
		width: 100%;
		max-width: 480px;
		margin-inline: auto;
	}
}

/* =========================================================
 * INTERIOR PAGES
 * =========================================================
 *
 * About, Services, Contact, Blog, Portfolio, etc.
 *
 * These pages intentionally use a restrained visual system.
 * Their job is readability, trust, and supporting the
 * conversion system established by the landing page.
 *
 * ========================================================= */

/* ---------------------------------------------------------
 * PAGE HEADER
 * ---------------------------------------------------------
 *
 * Gives interior pages a simple, consistent introduction.
 *
 * --------------------------------------------------------- */
.page-header {
	/* More vertical space above the title than normal body
	 * content, creating a clear page introduction. */
	padding-block: var(--space-8) var(--space-6);
}

.page-header h1 {
	font-size: var(--font-size-h1);
	margin-bottom: 0;
	/* use letter spacing only if it accomodates size/font style */
	letter-spacing: var(--heading-letter-spacing);
}

/* ---------------------------------------------------------
 * PAGE CONTENT
 * ---------------------------------------------------------
 *
 * Keeps long-form content at a readable line length and
 * centers the content column inside the main container.
 *
 * --------------------------------------------------------- */
.page-content {
	/* Restricts long-form text to a comfortable reading width
	 * instead of allowing paragraphs to stretch across the site. */
	max-width: var(--content-width);
	/* Centers the narrower content column inside its container. */
	margin-inline: auto;
}

.page-content-section {
	/* Provides separation between larger content sections. */
	padding-bottom: var(--section-spacing);
}

.page-content-article {
	padding-bottom: var(--section-spacing);
}

/* ---------------------------------------------------------
 * CONTENT TYPOGRAPHY
 * ---------------------------------------------------------
 *
 * Basic typography for normal business-site content.
 *
 * More specialized elements can be added when we actually
 * build those components.
 *
 * --------------------------------------------------------- */
.page-content h2 {
	font-size: var(--font-size-h2);
	margin-bottom: var(--space-2);	
	/* use letter spacing only if it accomodates size/font style */
	letter-spacing: var(--heading-letter-spacing);

}

.page-content h3 {
	font-size: var(--font-size-h3);
	margin-bottom: var(--space-2);
}

.page-content p {
	/* Gives paragraphs consistent separation without relying
	 * on browser defaults. */
	margin-bottom: var(--space-3);
}

.page-content ul,
.page-content ol {
	/* Keeps lists aligned with the same general spacing system
	 * used by normal content. */
	margin-bottom: var(--space-3);
	padding-left: var(--space-3);
}

.page-content li {
	margin-bottom: var(--space-1);
}

.page-content a {
	text-decoration: underline;
}

.page-content a:hover {
	text-decoration: none;
}

/*=========================================================
 * PAGE SPECIFIC LEAD FORMS
 * ======================================================== */


/* =========================================================
 * FOOTER
 * =========================================================
 *
 * The footer closes the site with a simple, low-emphasis
 * navigation area.
 *
 * ========================================================= */
footer {
	background-color: var(--color-dark);
	color: var(--color-light);
	margin-bottom: 0;
	padding-bottom: 0;
}

.footer-phone {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  text-decoration: none;
  white-space: nowrap;
}

.footer-phone:hover {
  color: var(--color-primary);
}

footer ul {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

footer a {
	/* Regular footer navigation links. */
	text-decoration: none;
	font-size: 0.75rem;
	color: var(--color-muted);
}

.footer-site-name {
	/* Site name receives more visual emphasis. */
	color: var(--color-light);
	font-size: 1rem;
}



/* =========================================================
 * TEMPLATE SHOWCASE (added)
 * Used by the accountant-websites landing page and the portfolio
 * template-demo pages. Reuses the existing .portfolio-card styles.
 * ========================================================= */

/* Three portfolio cards sit in one row on wider screens. */
@media (min-width: 900px) {
	.portfolio-grid:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Three-up card row used inside landing page content. */
.template-showcase {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-block: var(--space-4);
}

@media (min-width: 768px) {
	.template-showcase {
		grid-template-columns: repeat(3, 1fr);
	}
}

.template-showcase .portfolio-card-content p {
	margin: var(--space-1) 0 0;
	color: var(--color-muted);
	font-size: var(--font-size-small);
}

/* Phone screenshot on a template demo page. */
.template-mobile {
	margin: var(--space-3) 0;
}

.template-mobile img {
	height: auto;
	border: 1px solid var(--color-border);
	border-radius: var(--image-radius);
}

.template-mobile figcaption {
	margin-top: var(--space-1);
	color: var(--color-muted);
	font-size: var(--font-size-small);
}

/* Buttons under a portfolio project. */
.portfolio-project-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block: var(--space-4);
}

/* Equal-height cards, with dark titles that turn orange on hover. */
.template-showcase .portfolio-card {
	align-self: stretch;
}

.portfolio-card-content h2 a,
.template-showcase .portfolio-card-content h3 a {
	color: var(--color-text);
}

.portfolio-card-content h2 a:hover,
.template-showcase .portfolio-card-content h3 a:hover {
	color: var(--color-primary-hover-dark);
}