/* =============================================================================
   CW Doors — main.css
   Build order:
   1. Reset
   2. Custom Properties (Design Tokens)
   3. Base / Typography
   4. Utilities
   5. Layout
   6. Components
   7. Header
   8. Footer
   9. Page Templates
   10. Sections (homepage parts)
   ============================================================================= */


/* =============================================================================
   1. RESET — Modern CSS Reset
   ============================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Remove animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =============================================================================
   2. CUSTOM PROPERTIES — Design Tokens
   ============================================================================= */

:root {

	/* --- Colors --- */
	--color-primary:     #0e132a;   /* Navy — section BGs */
  --color-primary-rgb: 14, 19, 42;   
  --color-primary-light:   #171d3a; /* Navy — used in hero stats */ 
  --color-primary-light-rgb: 23, 29, 58;
	--color-secondary:   #27456b;   /* Blue — buttons, accents */
	--color-highlight:   #998115;   /* Orange — hover, underlines */
	--color-paper:       #f4f1eb;   /* Off-white — alternating sections */
	--color-white:       #ffffff;
	--color-black:       #0a0a0a;
  --color-eyebrow-light: #5d8ece;

	/* --- Text --- */
	--color-text:        #1a1a1a;
	--color-text-light:  #5a5a6e;
	--color-text-white:  #ffffff;
	--color-text-muted:  rgba(255, 255, 255, 0.65);
  --color-secondary-text: #1559d4; /* 5.46:1 sobre paper — AA pass */

	/* --- Borders --- */
	--color-border:      #e2ddd4;
	--color-border-dark: rgba(255, 255, 255, 0.12);

	/* --- Typography --- */
	--font-heading: 'Sora', sans-serif;
	--font-body:    'Sora', sans-serif;

  --text-xs:   0.7rem;     /* ~11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.625rem;   /* 26px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3.25rem;    /* 52px */
  --text-6xl:  4rem;       /* 64px */

  --weight-light:    300;
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;
	--weight-black:    800;

	--leading-tight:  1.1;
	--leading-snug:   1.3;
	--leading-normal: 1.6;
	--leading-loose:  1.8;

	--tracking-tight:  -0.03em;
	--tracking-snug:   -0.015em;
	--tracking-wide:   0.08em;
	--tracking-wider:  0.12em;

	/* --- Spacing --- */
	--space-1:   0.25rem;   /* 4px */
	--space-2:   0.5rem;    /* 8px */
	--space-3:   0.75rem;   /* 12px */
	--space-4:   1rem;      /* 16px */
	--space-5:   1.25rem;   /* 20px */
	--space-6:   1.5rem;    /* 24px */
	--space-8:   2rem;      /* 32px */
	--space-10:  2.5rem;    /* 40px */
	--space-12:  3rem;      /* 48px */
	--space-16:  4rem;      /* 64px */
	--space-20:  5rem;      /* 80px */
	--space-24:  6rem;      /* 96px */
	--space-32:  8rem;      /* 128px */

	/* Section vertical padding */
	--section-padding: var(--space-20);

	/* --- Layout --- */
	--container-max:    1200px;
	--container-wide:   1400px;
	--container-narrow: 800px;
	--container-px:     var(--space-6);

	/* --- Borders & Radius --- */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   20px;
	--radius-full: 9999px;

	/* --- Shadows --- */
	--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.2);
	--shadow-md:  0 4px 16px rgba(0, 0, 0, 0.3);
	--shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.4);
	--shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.5);

	/* --- Transitions --- */
	--transition-fast:   150ms ease;
	--transition-base:   250ms ease;
	--transition-slow:   400ms ease;

	/* --- Header --- */
	--header-height: 148px;
}

@media (max-width: 768px) {
	:root {
		--section-padding: var(--space-8);
		--container-px:    var(--space-5);
		--header-height:   110px;
	}
}


/* =============================================================================
   3. BASE / TYPOGRAPHY
   ============================================================================= */

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	color: var(--color-text);
	background-color: var(--color-white);
	line-height: var(--leading-normal);
  font-variant-ligatures: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	color: var(--color-primary-light);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

@media (max-width: 768px) {
	h1 { font-size: var(--text-3xl); }
	h2 { font-size: var(--text-2xl); }
	h3 { font-size: var(--text-xl); }
}

p {
	line-height: var(--leading-normal);
	color: var(--color-text);
}

p + p {
	margin-top: var(--space-4);
}

strong, b {
	font-weight: var(--weight-semibold);
}

a {
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-highlight);
}

a:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.eyebrow {
	display: inline-flex;
  align-items: center;
  gap: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-secondary-text);
	margin-bottom: var(--space-4);
}

.eyebrow--light {
	color: var(--color-eyebrow-light);
}

.eyebrow.eyebrow--light::before {
	background-color: var(--color-eyebrow-light);
}

.eyebrow::before {
	content: '';
	width: 28px;
	height: 2px;
	background-color: var(--color-secondary);
	flex-shrink: 0;
}

@media (max-width: 768px) {
  .eyebrow{
    margin-bottom: var(--space-6);
  }
}

/* =============================================================================
   4. UTILITIES
   ============================================================================= */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-white);
	clip: auto !important;
	clip-path: none;
	color: var(--color-primary);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	height: auto;
	left: var(--space-4);
	padding: var(--space-3) var(--space-5);
	top: var(--space-4);
	width: auto;
	z-index: 100000;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.skip-link {
	position: absolute;
	top: -9999px;
	left: var(--space-4);
	z-index: 9999;
}

.skip-link:focus {
	top: var(--space-4);
}

.text-white   { color: var(--color-white); }
.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-text-light); }

.bg-white   { background-color: var(--color-white); }
.bg-paper   { background-color: var(--color-paper); }
.bg-primary { background-color: var(--color-primary); }
.bg-navy    { background-color: var(--color-primary); }

.hidden { display: none !important; }


/* =============================================================================
   5. LAYOUT
   ============================================================================= */

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

.container--wide {
	max-width: var(--container-wide);
}


.section {
	padding-block: var(--section-padding);
}

.section--sm {
	padding-block: var(--space-12);
}

.section--lg {
	padding-block: var(--space-32);
}

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

@media (max-width: 768px) {
	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}
}


/* =============================================================================
   6. COMPONENTS — Buttons
   ============================================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-8);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	border-radius: var(--radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base),
		transform var(--transition-fast);
	white-space: nowrap;
	text-decoration: none;
}

.btn:focus-visible {
	outline: 2px solid var(--color-secondary);
	outline-offset: 3px;
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background-color: var(--color-secondary);
	color: var(--color-white);
	border-color: var(--color-secondary);
}

.btn--primary:hover {
	background-color: var(--color-highlight);
	border-color: var(--color-highlight);
	color: var(--color-white);
}

.btn--outline {
	background-color: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.btn--outline:hover {
  background-color: var(--color-highlight);
	border-color: var(--color-highlight);
	color: var(--color-white);
}

.btn--outline-dark {
	background-color: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.btn--outline-dark:hover {
	background-color: var(--color-highlight);
	border-color: var(--color-highlight);
	color: var(--color-white);
}

.btn--highlight {
	background-color: var(--color-highlight);
	color: var(--color-primary);
	border-color: var(--color-highlight);
}

.btn--highlight:hover {
	background-color: transparent;
	color: var(--color-highlight);
	border-color: var(--color-highlight);
}

.btn--sm {
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-xs);
}

.btn--lg {
	padding: var(--space-4) var(--space-10);
	font-size: var(--text-base);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}


/* =============================================================================
   7. HEADER
   ============================================================================= */

.site-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: var(--shadow-sm);
}

/* Top row: blue left (through logo) | gold right */
.header-top {
	display: flex;
	align-items: stretch;
	min-height: 96px;
}

.header-top__blue {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	flex: 1 1 auto;
	padding: var(--space-3) var(--space-6);
	padding-left: max(var(--space-6), calc((100vw - var(--container-max)) / 2 + var(--container-px)));
	background-color: var(--color-secondary);
	color: var(--color-white);
}

.header-top__gold {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-5);
	flex: 1 1 auto;
	padding: var(--space-3) var(--space-6);
	padding-right: max(var(--space-6), calc((100vw - var(--container-max)) / 2 + var(--container-px)));
	background-color: var(--color-secondary);
	color: var(--color-white);
}

.site-branding {
	flex-shrink: 0;
	margin-left: auto;
	margin-right: 0;
}

.site-branding img {
	height: 88px;
	width: auto;
}

.site-name {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-white);
}

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-white);
	white-space: nowrap;
	transition: opacity var(--transition-fast);
}

.header-phone:hover {
	color: var(--color-white);
	opacity: 0.85;
}

.header-social {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.header-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-white);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.header-social a:hover {
	color: var(--color-white);
	opacity: 0.85;
	transform: translateY(-1px);
}

.btn--header {
	background-color: var(--color-highlight);
	color: var(--color-white);
	border-color: var(--color-highlight);
}

.btn--header:hover {
	background-color: var(--color-white);
	color: var(--color-secondary);
	border-color: var(--color-white);
}

/* Nav bar — full-width gold, bold white links */
.main-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-highlight);
	padding-block: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.nav-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}

.nav-menu > li {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-menu > li + li::before {
	content: '|';
	color: rgba(255, 255, 255, 0.85);
	font-weight: var(--weight-regular);
	padding: 0 var(--space-4);
	line-height: 1;
}

.nav-menu a {
	display: block;
	padding: var(--space-1) 0;
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
	color: var(--color-white);
	border-radius: 0;
	transition: opacity var(--transition-fast);
	position: relative;
}

.nav-menu a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--color-white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-base);
}

.nav-menu a:hover::after {
	transform: scaleX(1);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-page-ancestor > a {
	color: var(--color-white);
}

.nav-menu .current-menu-item > a::after,
.nav-menu .current-page-ancestor > a::after {
	transform: scaleX(1);
}

/* Dropdown */
.nav-menu .sub-menu {
	position: absolute;
	top: calc(100% + var(--space-3));
	left: 0;
	min-width: 220px;
	background-color: var(--color-secondary);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	padding: var(--space-3) var(--space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--transition-base),
		transform var(--transition-base),
		visibility var(--transition-base);
	z-index: 100;
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu .sub-menu a {
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	border-radius: 0;
	color: var(--color-white);
}

.nav-menu .sub-menu a::after {
	display: none;
}

.nav-menu .sub-menu a:hover {
	color: var(--color-highlight);
	background-color: transparent;
}

.nav-menu .menu-item-has-children > a::after {
	display: none;
}

.nav-menu .menu-item-has-children > a {
	padding-right: var(--space-5);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right center;
	transition: background-position var(--transition-fast), color var(--transition-fast);
}

.nav-menu .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: var(--space-5);
	height: 2px;
	background-color: var(--color-white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-base);
}

.nav-menu .menu-item-has-children:hover > a::before,
.nav-menu .menu-item-has-children.current-menu-item > a::before,
.nav-menu .menu-item-has-children.current-page-ancestor > a::before {
	transform: scaleX(1);
}

.nav-menu .menu-item-has-children.current-menu-item > a::after,
.nav-menu .menu-item-has-children.current-page-ancestor > a::after {
	display: none;
}

/* Mobile-only nav actions (inside open nav) */
.nav-actions {
	display: none;
}

/* Mobile toggle */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: var(--space-2);
	border-radius: var(--radius-sm);
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-white);
	border-radius: var(--radius-full);
	transition: transform var(--transition-base), opacity var(--transition-fast);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1000px) {
	.header-top {
		min-height: 72px;
	}

	.header-top__blue {
		padding: var(--space-2) var(--space-5);
		gap: var(--space-3);
	}

	.header-top__gold {
		flex: 0 0 auto;
		padding: var(--space-2) var(--space-5);
	}

	.site-branding {
		margin-left: 0;
	}

	.site-branding img {
		height: 64px;
	}

	.header-phone span {
		display: none;
	}

	.header-cta--desktop {
		display: none;
	}

	.menu-toggle {
		display: flex;
	}

	.main-navigation {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--color-highlight);
		padding: var(--space-6);
		padding-top: var(--space-4);
		border-top: none;
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		overflow-y: auto;
		transition:
			transform var(--transition-slow),
			opacity var(--transition-slow),
			visibility var(--transition-slow);
	}

	.main-navigation.toggled {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.nav-menu > li + li::before {
		display: none;
	}

	.nav-menu li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.nav-menu a {
		padding: var(--space-3) 0;
		font-size: var(--text-md);
		width: 100%;
	}

	.nav-menu a::after {
		display: none;
	}

	.nav-menu .sub-menu {
		position: static;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: 0 0 var(--space-2) var(--space-4);
		background-color: transparent;
		border-left: 2px solid var(--color-white);
		border-radius: 0;
		margin-bottom: var(--space-2);
	}

	.nav-menu .sub-menu a {
		font-size: var(--text-md);
		padding: var(--space-2) var(--space-3);
		color: var(--color-white);
	}

	.nav-menu .sub-menu a:hover {
		color: var(--color-white);
		opacity: 0.85;
	}

	.nav-actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		width: 100%;
		padding-top: var(--space-4);
		margin-top: var(--space-2);
	}

	.nav-actions .header-phone {
		display: flex;
		justify-content: center;
		width: 100%;
		border: 2px solid var(--color-white);
		border-radius: var(--radius-full);
		padding: var(--space-2) var(--space-5);
	}

	.nav-actions .header-phone span {
		display: inline;
	}

	.nav-actions .btn {
		width: 100%;
		justify-content: center;
	}

	.nav-menu .menu-item-has-children > a {
		background-image: none;
		padding-right: 0;
	}

	.nav-menu a::after,
	.nav-menu .menu-item-has-children > a::before {
		display: none;
	}
}

/* =============================================================================
   8. FOOTER
   ============================================================================= */

.site-footer {
	background-color: var(--color-secondary);
	color: var(--color-text-white);
}

.footer-main {
	padding-block: var(--space-16);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
	gap: var(--space-10);
	align-items: start;
}

/* Brand column */
.footer-col--brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.footer-logo img {
	height: 120px;
	width: auto;
}

.footer-site-name {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-white);
	display: block;
}

/* Social */
.footer-social {
	display: flex;
	gap: var(--space-3);
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--color-white);
	transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-social a:hover {
	color: var(--color-highlight);
	transform: translateY(-1px);
}

/* Column titles */
.footer-col__title {
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	letter-spacing: normal;
	text-transform: none;
	color: var(--color-white);
	margin-bottom: var(--space-5);
}

/* Footer nav */
.footer-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer-nav a {
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	color: var(--color-white);
	transition: color var(--transition-fast);
	position: relative;
	display: inline-block;
}

.footer-nav a:hover {
	color: var(--color-highlight);
}

/* Working hours */
.footer-hours {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-white);
	line-height: var(--leading-snug);
}

.footer-hours__days,
.footer-hours__label {
	color: var(--color-white);
}

/* Footer bottom — gold bar */
.footer-bottom {
	background-color: var(--color-highlight);
	padding-block: var(--space-4);
}

.footer-copyright {
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	color: var(--color-white);
	text-align: center;
	margin: 0;
}

.custom-logo-link {
	display: flex;
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	.footer-logo img {
		height: 90px;
	}
}

@media (max-width: 768px) {
	.footer-main {
		padding-block: var(--space-10);
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
		text-align: center;
	}

	.footer-col--brand {
		align-items: center;
	}

	.footer-col__title {
		font-size: var(--text-lg);
	}

	.footer-nav a {
		font-size: var(--text-base);
	}

	.footer-hours {
		justify-content: center;
	}

	.footer-social {
		justify-content: center;
	}

	.footer-logo img {
		height: 110px;
	}

	.custom-logo-link {
		justify-content: center;
	}
}

/* =============================================================================
   9. PAGE TEMPLATES
   (Styles added per template)
   ============================================================================= */

/* =============================================================================
   HOME — HERO
   ============================================================================= */

.home-hero {
	position: relative;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 900px;
	color: var(--color-white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(23, 29, 58, 0.85) 0%,
		rgba(23, 29, 58, 0.55) 60%,
		rgba(23, 29, 58, 0.35) 100%
	);
	z-index: 1;
}

.home-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: var(--space-20) var(--space-16);
}

/* Badge */
.home-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-white);
	margin-bottom: var(--space-5);
}

.home-hero__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-full);
	background-color: var(--color-secondary);
  box-shadow: 0 0 5px 2px var(--color-secondary);
	flex-shrink: 0;
}

/* Headline */
.home-hero__headline {
	font-size: clamp(var(--text-3xl), 7vw, var(--text-6xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	color: var(--color-white);
	margin-bottom: var(--space-6);
}

/* Subheadline */
.home-hero__subheadline {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--space-8);
	max-width: 480px;
}

/* Actions row */
.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.home-hero__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--transition-fast);
}

.home-hero__phone strong {
	color: var(--color-white);
	font-weight: var(--weight-semibold);
}

.home-hero__phone:hover {
	color: var(--color-highlight);
}

.home-hero__phone:hover strong {
	color: var(--color-highlight);
}

/* Stats bar */
.home-hero__stats-wrap {
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	background-color: rgba(var(--color-primary-light-rgb), 0.8);
	margin-top: auto;
}

.home-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
}

.home-hero__stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-6) var(--space-8);
	border-right: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  justify-content: center;
}

.home-hero__stat::after {
	content: '';
	position: absolute;
	right: -4px;                
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 45%;                
	background-color: var(--color-secondary);
	border-radius: var(--radius-full);
}

.home-hero__stat:first-child{
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.home-hero__stat:first-child::before {
	content: '';
	position: absolute;
	left: 1px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 45%;
	background-color: var(--color-secondary);
	border-radius: var(--radius-full);
}

.home-hero__stat:last-child::after {
	display: none;
}

.home-hero__stat-value {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	color: var(--color-white);
	line-height: 1;
}

.home-hero__stat-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
	line-height: var(--leading-snug);
}

/* Trust bar */
.home-hero__trust {
	position: relative;
	z-index: 2;
	background-color: var(--color-primary-light);
	border-top: 1px solid var(--color-secondary);
	color: var(--color-white);
}

.home-hero__trust-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
	padding-block: 0;
}

.home-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	color: var(--color-white);
	padding: var(--space-4) var(--space-8);
}

.home-hero__trust-item i,
.home-hero__trust-item svg {
	color: var(--color-secondary);
	font-size: 16px;
	flex-shrink: 0;
}

.home-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.home-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.home-hero__slide.is-active {
	opacity: 1;
}

@media (max-width: 768px) {
	.home-hero__inner {
		padding-block: var(--space-8) var(--space-8);
	}
	.home-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(23, 29, 58, 0.85) 0%,
			rgba(23, 29, 58, 0.75) 100%
		);
	}
  .home-hero__actions{
    justify-content: center;
  }
	.home-hero__stat {
		padding: var(--space-4);
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
	}
  .home-hero__stat:first-child{
    border-left: none;
  }
	.home-hero__stat:last-child {
		border-bottom: none;
	}
	.home-hero__stat-value {
		font-size: var(--text-2xl);
	}
	.home-hero__trust-list {
		display: flex;
    flex-wrap: wrap;
	}
	.home-hero__trust-item {
    justify-content: center;
		padding: var(--space-6) var(--space-4);
    width: 50%;
	}
}
@media (max-width: 580px) {
  .home-hero__stat:first-child::before, .home-hero__stat::after{
    display: none;
  }
  .home-hero__stats{
    padding-block: var(--space-4);
  }
  .home-hero__stats li{
    border: none;
  }
  .home-hero__stats li:nth-child(odd){
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  .home-hero__stats li:nth-child(-n+2){
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .home-hero__stat{
    padding: var(--space-4);
  }
  .home-hero__trust-list{
    padding-block: var(--space-3);
  }
  .home-hero__trust-item {
    padding: var(--space-2);
    width: 100%;
  }
}
@media (max-width: 400px) {
  .home-hero__subheadline{
    font-size: var(--text-base);
  }
  .home-hero__stats{
    padding-block: 0;
  }
  .home-hero__stats li{
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-right: none !important;
  }
}

/* =============================================================================
   10. SECTIONS
   
   ============================================================================= */

/* =============================================================================
   HOME — ABOUT SNIPPET
   ============================================================================= */

.home-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: start;
}

/* Left heading */
.home-about__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
  max-width: 75%;
}

/* Right content */
.home-about__text {
	font-size: var(--text-md);
	line-height: var(--leading-loose);
	color: var(--color-text-light);
}

.home-about__text p {
	color: var(--color-text-light);
}

/* Footer — owner + cta */
.home-about__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	margin-top: var(--space-8);
}

.home-about__owner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.home-about__owner-photo {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.home-about__owner-info {
	display: flex;
	flex-direction: column;
	line-height: var(--leading-snug);
}

.home-about__owner-name {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
}

.home-about__owner-title {
	font-size: var(--text-sm);
	color: var(--color-text-light);
}

@media (max-width: 768px) {
	.home-about__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
  .home-about__title{
    max-width: 100%;
  }
	.home-about__footer {
		margin-top: var(--space-6);
	}
}   

/* =============================================================================
   HOME — SERVICES GRID
   ============================================================================= */

.home-services__header {
	margin-bottom: var(--space-12);
}

.home-services__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-4);
}

.home-services__subtitle {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
  max-width: 50%;
}

/* Grid */
.home-services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

/* Card */
.service-card {
	position: relative;
	display: flex;
	min-height: 400px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	isolation: isolate;
}

.service-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(var(--color-primary-rgb), 0.3) 0%,
		rgba(var(--color-primary-rgb), 1) 100%
	);
	z-index: 1;
	transition: background var(--transition-base);
}

.service-card:hover .service-card__overlay {
	background: linear-gradient(
		180deg,
		rgba(var(--color-primary-rgb), 0.6) 0%,
		rgba(var(--color-primary-rgb), 1) 100%
	);
}

.service-card__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-6);
	margin-top: auto;
	width: 100%;
	color: var(--color-white);
}

/* Eyebrow — number + category */
.service-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.service-card__eyebrow::before {
	content: '';
	width: 28px;
	height: 2px;
	background-color: var(--color-secondary);
	flex-shrink: 0;
}

/* Title */
.service-card__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
  letter-spacing: var(--leading-normal);
	color: var(--color-white);
}

/* Description */
.service-card__description {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: rgba(255, 255, 255, 0.8);
}

/* Tags */
.service-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-1);
}

.service-card__tag {
	font-size: var(--text-xs);
	font-weight: var(--weight-regular);
	color: var(--color-white);
	padding: var(--space-1) var(--space-3);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-full);
}

/* Link */
.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	width: 100%;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-white);
	transition: gap var(--transition-fast), color var(--transition-fast);
}

.service-card__link svg {
	transition: transform var(--transition-fast);
}

.service-card__link:hover {
	color: var(--color-highlight);
}

.service-card__link:hover svg {
	transform: translateX(4px);
}

@media (max-width: 768px) {
	.home-services__grid {
		grid-template-columns: 1fr;
	}
  .home-services__header{
    margin-bottom: var(--space-6);
  }
  .home-services__subtitle{
    max-width: 67%;
  }
	.service-card {
		min-height: 300px;
	}
	.service-card__content {
		padding: var(--space-6);
	}
  .service-card__overlay{
    background-color: var(--color-primary-light);
    opacity: 0.75;
  }
}
@media (max-width: 580px) {
  .home-services__subtitle{
    max-width: 100%;
  }
}

/* =============================================================================
   SECTION — WHY HEAT PUMPS
   ============================================================================= */

.why-hp__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
}

/* Left column */
.why-hp__heading {
	margin-bottom: var(--space-10);
}

.why-hp__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
  max-width: 70%;
}

/* Stats — 2x2 grid */
.why-hp__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-10) var(--space-8);
}

.why-hp__stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-5);
}

.why-hp__stat-value {
	position: relative;
	display: inline-block;
	width: fit-content;
}

.why-hp__stat-number {
	font-family: var(--font-heading);
	font-size: var(--text-4xl);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	position: relative;
	z-index: 1;
}

.why-hp__stat-label {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-light);
}

/* Quote card */
.why-hp__quote-card {
	position: relative;
	background-color: var(--color-primary);
	background-image: radial-gradient(
		circle at top right,
		rgba(var(--color-secondary-rgb, 39, 69, 107), 0.45) 0%,
		transparent 55%
	);
	color: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-10);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	overflow: hidden;
}

.why-hp__quote-mark {
	color: var(--color-secondary);
  height: 32px;
  width: 32px;
}

.why-hp__quote-text {
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	font-weight: var(--weight-medium);
	color: var(--color-white);
}

.why-hp__quote-author {
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

/* --- Hand-drawn doodles --- */
.why-hp__doodle {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
  max-width: none;
}

.why-hp__doodle--circle {
	top: 37%;
	left: 20%;
	width: 90%;
	height: 100%;
	transform: translate(-50%, -50%);
}

.why-hp__doodle--underline {
	bottom: -8px;
	left: 50%;
	width: 115%;
	height: 20px;
	transform: translateX(-50%);
}

.why-hp__doodle path {
	stroke-dasharray: var(--doodle-length, 600);
	stroke-dashoffset: var(--doodle-length, 600);
}

.why-hp.is-visible .why-hp__doodle path {
	animation-name: whp-draw;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 4;
}

.why-hp.is-visible .why-hp__doodle--circle path {
  animation-delay: 1s;
	animation-duration: 8s;
}

.why-hp.is-visible .why-hp__doodle--underline path {
	animation-delay: 2.5s;
}

@keyframes whp-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.why-hp__doodle path {
		stroke-dashoffset: 0;
		animation: none;
	}
}

@media (max-width: 768px) {
	.why-hp__grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
	.why-hp__heading {
		margin-bottom: var(--space-8);
	}
  .why-hp__title{
    max-width: 100%;
  }
	.why-hp__stats {
		gap: var(--space-8) var(--space-6);
	}
  .why-hp__stat{
    text-align: center;
  }
  .why-hp__stat-value{
    margin: 0 auto;
  }
	.why-hp__stat-number {
		font-size: var(--text-3xl);
	}
	.why-hp__quote-card {
		padding: var(--space-6);
    gap: var(--space-4);
	}
  .why-hp__quote-text{
    font-size: var(--text-lg);
  }
}

/* =============================================================================
   HOME — PROCESS
   ============================================================================= */

.process__header {
	margin-bottom: var(--space-12);
}

.process__title {
	font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-4);
}

.process__subtitle {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
}

/* Steps */
.process__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	counter-reset: process;
}

.process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
  padding-bottom: var(--space-6);
	padding-top: var(--space-6);
  padding-right: var(--space-4);
  border-bottom: 2px solid var(--color-border);
	border-top: 2px solid var(--color-border);
}

/* Connector dot at the top of each step's line */
.process__step::before {
	content: '';
	position: absolute;
	top: -7px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: var(--radius-full);
	background-color: var(--color-secondary);
}

.process__step-number {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	color: var(--color-secondary);
	line-height: 1;
}

.process__step-title {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	line-height: var(--leading-snug);
}

.process__step-description {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
}

@media (max-width: 768px) {
	.process__steps {
		grid-template-columns: 1fr 1fr;
	}
  .process__step{
    border-bottom: none;
  }
	.process__step-number {
		font-size: var(--text-xl);
	}
}

/* =============================================================================
   SECTION — GALLERY PREVIEW
   ============================================================================= */

.gallery-preview {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.gallery-preview__header {
	margin-bottom: var(--space-8);
}

.gallery-preview__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
	margin-bottom: var(--space-4);
}

.gallery-preview__subtitle {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: rgba(255, 255, 255, 0.7);
}

/* Filter tabs */
.gallery-preview__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.gallery-filter {
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: rgba(255, 255, 255, 0.7);
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast);
}

.gallery-filter:hover {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.gallery-filter.is-active {
	color: var(--color-white);
	background-color: var(--color-secondary-text);
}

/* Image grid — masonry-style with wide/tall variants */
.gallery-preview__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	gap: var(--space-4);
}

.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.05);
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.gallery-item:hover img {
	transform: scale(1.05);
}

.gallery-item__link {
	display: block;
	width: 100%;
	height: 100%;
}

.gallery-item__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.gallery-item:hover .gallery-item__link img {
	transform: scale(1.05);
}

/* First image — large feature block */
.gallery-item--feature {
	grid-column: span 2;
	grid-row: span 2;
}

/* Hidden state when filtered out */
.gallery-item.is-hidden {
	display: none;
}

/* Footer */
.gallery-preview__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--space-10);
}

@media (max-width: 768px) {
	.gallery-preview__grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 160px;
		gap: var(--space-3);
	}
  .gallery-item--feature {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery-preview__filters {
    justify-content: center;
  }
}

/* =============================================================================
   SECTION — TESTIMONIALS
   ============================================================================= */

.testimonials__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-8);
	margin-bottom: var(--space-12);
}

.testimonials__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
}

.testimonials__title-main,
.testimonials__title-accent {
	display: block;
}

.testimonials__title-accent {
	font-weight: var(--weight-regular);
}

/* Rating badge */
.testimonials__rating {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-fast);
	flex-shrink: 0;
}

.testimonials__rating-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
}

.testimonials__rating-top {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

a.testimonials__rating:hover {
	box-shadow: var(--shadow-md);
}

.testimonials__rating-score {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	line-height: 1;
}

.testimonials__rating-stars {
	display: inline-flex;
	gap: 2px;
	color: #f5a623;
}

.testimonials__rating-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-light);
}

/* Review cards grid */
.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.review-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.review-card__stars {
	display: inline-flex;
	gap: 2px;
	color: #f5a623;
}

.review-card__text {
	font-size: var(--text-sm);
	line-height: var(--leading-loose);
	color: var(--color-text);
	flex-grow: 1;
}

.review-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.review-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.review-card__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary-light);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
}

.review-card__author-info {
	display: flex;
	flex-direction: column;
	line-height: var(--leading-snug);
}

.review-card__name {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-primary);
}

.review-card__date {
	font-size: var(--text-xs);
	color: var(--color-text-light);
}

.review-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.review-card__quote {
	color: var(--color-secondary);
	flex-shrink: 0;
}

/* Footer */
.testimonials__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--space-10);
}

@media (max-width: 768px) {
	.testimonials__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-6);
		margin-bottom: var(--space-10);
	}

	.testimonials__grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   SECTION — CTA BAND
   ============================================================================= */

.cta-band {
	position: relative;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white);
	isolation: isolate;
}

.cta-band__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(var(--color-primary-rgb), 0.92);
}

.cta-band .container {
	position: relative;
	z-index: 1;
}

.cta-band__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-16);
	align-items: center;
}

/* Left content */
.cta-band__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
	margin-bottom: var(--space-5);
}

.cta-band__text {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--space-8);
	max-width: 460px;
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Right contact boxes */
.cta-band__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cta-band__box {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background-color: rgba(var(--color-primary-light-rgb), 0.6);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-md);
	padding: var(--space-6);
}

.cta-band__box-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.cta-band__phone {
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	color: var(--color-white);
	line-height: 1;
	transition: color var(--transition-fast);
}

.cta-band__phone:hover {
	color: var(--color-highlight);
}

.cta-band__box-meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
  text-transform: uppercase;
}

.cta-band__email {
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--color-white);
	transition: color var(--transition-fast);
	word-break: break-word;
}

.cta-band__email:hover {
	color: var(--color-highlight);
}

@media (max-width: 768px) {
	.cta-band__grid {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
  .cta-band__phone {
    font-size: var(--text-2xl);
  }
  .cta-band__email {
	  font-size: var(--text-sm);
  }
	.cta-band__text {
		max-width: 100%;
	}
}

/* =============================================================================
   SECTION — INNER PAGE HERO
   ============================================================================= */

.inner-hero {
	position: relative;
	background-color: var(--color-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white);
	isolation: isolate;
	overflow: hidden;
}

.inner-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgba(var(--color-primary-rgb), 0.9) 0%,
		rgba(var(--color-primary-rgb), 0.65) 100%
	);
}

.inner-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--space-32);
}

/* Breadcrumb */
.inner-hero__breadcrumb {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.65);
}

.inner-hero__breadcrumb a {
	color: rgba(255, 255, 255, 0.65);
	transition: color var(--transition-fast);
}

.inner-hero__breadcrumb a:hover {
	color: var(--color-white);
}

.inner-hero__breadcrumb .breadcrumb_last {
	color: var(--color-white);
	font-weight: var(--weight-medium);
}

/* Title */
.inner-hero__title {
	font-size: clamp(var(--text-3xl), 6vw, var(--text-6xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
  letter-spacing: normal;
	color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

/* Footer */
.inner-hero__footer-wrapper{
  background-color: var(--color-primary-light);
  border-top: 1px solid var(--color-secondary);
  color: var(--color-white);
  position: relative;
}
.inner-hero__footer{
  padding-block: var(--space-2);
}

.inner-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-eyebrow-light);
	margin-bottom: var(--space-3);
  margin-left: var(--space-1);
}

.inner-hero__eyebrow-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  box-shadow: 0 0 5px 2px var(--color-eyebrow-light);
  flex-shrink: 0;
  margin-right: var(--space-1);
}

@media (max-width: 768px) {
	.inner-hero__inner {
		padding-block: var(--space-10);
	}
	.inner-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba(var(--color-primary-rgb), 0.85) 0%,
			rgba(var(--color-primary-rgb), 0.75) 100%
		);
	}
  .inner-hero__title {
    text-underline-offset: 5px;
  }
}

/* =============================================================================
   SERVICES PAGE — SERVICES LIST (alternating rows)
   ============================================================================= */

.services-list__intro {
	margin-bottom: var(--space-16);
}

.services-list__intro-text {
	font-size: var(--text-2xl);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
}

/* Rows */
.services-list__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
}

.service-row__content {
  padding: var(--space-4) 0;
  padding-right: var(--space-1);
	position: relative;
}

/* Decorative corner — always bottom-right of the text */
.service-row__content::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 8em;
	height: 8em;
	border-right: 2px solid rgba(180,180,180,0.5);
	border-bottom: 2px solid rgba(180,180,180,0.5);
	pointer-events: none;
  opacity: 0.85;
}

/* Even rows: content sits left of the image — give the corner room */
.service-row:nth-child(even) .service-row__content {
	padding-right: var(--space-8);
}

/* Alternate: even rows flip media to the right */
.service-row:nth-child(even) .service-row__media {
	order: 2;
}

/* Media */
.service-row__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--color-paper);
}

.service-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content */
.service-row__title {
	font-size: clamp(var(--text-xl), 3vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	margin-bottom: var(--space-4);
}

.service-row__description {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
	margin-bottom: var(--space-5);
}

@media (max-width: 768px) {
	.services-list__intro {
		margin-bottom: var(--space-8);
	}
  .services-list__intro-text{
    font-size: var(--text-base);
  }
	.services-list__rows {
		gap: var(--space-12);
	}
	.service-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	/* Reset alternation on mobile — media always on top */
	.service-row:nth-child(even) .service-row__media {
		order: 0;
	}
	.service-row__description{
    font-size: var(--text-base);
  }
}

/* =============================================================================
   SINGLE SERVICE — SERVICE ABOUT
   ============================================================================= */

.service-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
}

/* Content */

.service-about__title {
  border-bottom: 1px solid rgba(var(--color-secondary-rgb, 39, 69, 107), 0.25);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	margin-bottom: var(--space-5);
  margin-top: var(--space-3);
  padding-bottom: var(--space-5);
}

.service-about__text {
	font-size: var(--text-md);
	line-height: var(--leading-loose);
	color: var(--color-text-light);
}

.service-about__text p, .service-about__text ul li{
  font-size: clamp(var(--text-base), 4vw, var(--text-md));
}

.service-about__text p {
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
}

.service-about__text p + p {
	margin-top: var(--space-4);
}

.service-about__text ul{
  list-style-type: disc;
  padding-left: var(--space-5);
}

.service-about__text ul li::marker {
  font-size: var(--text-xl);
}

/* Media */
.service-about__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--color-paper);
}

.service-about__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
  .service-about{
    padding-top: var(--space-5);
  }
	.service-about__grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
  .service-about__title{
    margin-top: 0;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
  }
}

/* =============================================================================
   SINGLE SERVICE — SERVICE GALLERY
   ============================================================================= */

.service-gallery__header {
	max-width: 640px;
	margin-bottom: var(--space-10);
}

.service-gallery__title {
  color: var(--color-white);
	font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
}

.service-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}

.service-gallery__item {
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.04);
	aspect-ratio: 4 / 3;
}

.service-gallery__link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.service-gallery__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.service-gallery__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(var(--color-primary-rgb), 0);
	transition: background-color 600ms cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.service-gallery__item:hover .service-gallery__link img {
	transform: scale(1.05);
}

.service-gallery__item:hover .service-gallery__link::after {
	background-color: rgba(var(--color-primary-rgb), 0.25);
}

@media (max-width: 768px) {
	.service-gallery__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
	}
}

/* =============================================================================
   ABOUT PAGE — ABOUT COMPANY
   ============================================================================= */

.about-company__grid {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: var(--space-16);
	align-items: center;
}

/* Owner photo — larger */
.about-company__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background-color: var(--color-paper);
}

.about-company__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content */
.about-company__title {
	font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	margin-bottom: var(--space-5);
}

.about-company__text {
	font-size: var(--text-md);
	line-height: var(--leading-loose);
	color: var(--color-text-light);
}

.about-company__text p {
	color: var(--color-text-light);
}

.about-company__text p + p {
	margin-top: var(--space-4);
}

/* Signature */
.about-company__signature {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}
.about-company__owner-name {
  font-family: "Corinthia", cursive;
	font-size: var(--text-5xl);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
  line-height: var(--leading-tight);
  margin-top: var(--space-4);
}
.about-company__owner-title {
	font-size: var(--text-base);
	color: var(--color-text-light);
}

@media (max-width: 768px) {
	.about-company__grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	.about-company__media {
		aspect-ratio: 4 / 3;
	}
  .about-company__owner-name {
    font-size: var(--text-4xl);
  }
  .about-company__owner-title {
	  font-size: var(--text-sm);
  }
}

/* =============================================================================
   CONTACT PAGE — CONTACT FORM
   ============================================================================= */

.contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: start;
}

.contact__left {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Image (left) */
.contact__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-paper);
	aspect-ratio: 4 / 3;
}

.contact__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Content (right) */
.contact__content {
	display: flex;
	flex-direction: column;
}

.contact__title {
	font-size: clamp(var(--text-xl), 4vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	margin-bottom: var(--space-4);
  margin-top: var(--space-3);
}

.contact__text {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
	margin-bottom: var(--space-8);
}

.contact__text p {
	color: var(--color-text-light);
}

/* Form wrapper */
.contact__form {
	margin-top: var(--space-2);
}

.contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact__detail {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.contact__detail-label {
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-light);
}

.contact__detail-value {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

a.contact__detail-value:hover {
	color: var(--color-highlight);
}

@media (max-width: 768px) {
  .contact{
    padding-top: var(--space-5);
  }
  .contact__left {
		display: contents;
	}
	.contact__grid {
		grid-template-columns: 1fr;
		gap: var(--space-1);
 		order: 1;
	}
	.contact__media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
	.contact__content {
		order: 2;
	}
  .contact__details{
    border-top: 1px solid var(--color-border);
    gap: var(--space-1);
  	order: 3;
		margin-top: var(--space-16);
    padding-top: var(--space-5)
  }
}

/* =============================================================================
   PAGE — 404
   ============================================================================= */

.error-404 {
	background-color: var(--color-paper);
	min-height: 70vh;
	display: flex;
	align-items: center;
}

.error-404__inner {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding-block: var(--space-16);
}

.error-404__code {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(5rem, 14vw, 9rem);
	font-weight: var(--weight-bold);
	line-height: 1;
	color: var(--color-secondary);
	letter-spacing: var(--tracking-tight);
	margin-bottom: var(--space-4);
}

.error-404__title {
	font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	margin-bottom: var(--space-4);
}

.error-404__text {
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
	margin-bottom: var(--space-8);
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

@media (max-width: 768px) {
	.error-404 {
		min-height: 60vh;
	}

	.error-404__inner {
		padding-block: var(--space-10);
	}
}

/* =============================================================================
   PAGE — SEARCH RESULTS
   ============================================================================= */

.search-header__inner {
	max-width: 760px;
}

.search-header__title {
	font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-snug);
	margin-bottom: var(--space-3);
}

.search-header__query {
	color: var(--color-secondary);
	font-style: italic;
}

.search-header__meta {
	font-size: var(--text-sm);
	color: var(--color-text-light);
}

/* Results list */
.search-results__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 880px;
}

.search-result {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
}

.search-result:hover {
	border-color: var(--color-highlight);
	box-shadow: var(--shadow-sm);
}

.search-result__link {
	display: block;
	padding: var(--space-5) var(--space-6);
}

.search-result__title {
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	margin-bottom: var(--space-2);
	transition: color var(--transition-fast);
}

.search-result__link:hover .search-result__title {
	color: var(--color-highlight);
}

.search-result__excerpt {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-light);
	margin-bottom: var(--space-2);
}

.search-result__url {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	word-break: break-word;
}

/* Pagination */
.search-results__pagination {
	margin-top: var(--space-10);
}

.search-results__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.search-results__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast);
}

.search-results__pagination .page-numbers:hover {
	color: var(--color-white);
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

.search-results__pagination .page-numbers.current {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Empty state */
.search-results__empty {
	max-width: 560px;
	text-align: center;
	margin: 0 auto;
	padding-block: var(--space-10);
}

.search-results__empty-text {
	font-size: var(--text-md);
	color: var(--color-text-light);
	margin-bottom: var(--space-6);
}

.search-results__empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

/* =============================================================================
   PAGE — DEFAULT (page.php / index.php)
   ============================================================================= */

.default-page__hero {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding-block: var(--space-12);
}

.default-page__breadcrumb {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: var(--space-3);
}

.default-page__breadcrumb a {
	color: rgba(255, 255, 255, 0.65);
	transition: color var(--transition-fast);
}

.default-page__breadcrumb a:hover {
	color: var(--color-white);
}

.default-page__title {
	font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-white);
}

/* Body */
.default-page__content,
.default-page__list {
	max-width: 760px;
}

/* index.php — entry list */
.default-page__entry {
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.default-page__entry:first-child {
	padding-top: 0;
}

.default-page__entry:last-child {
	border-bottom: none;
}

.default-page__entry-title {
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	margin-bottom: var(--space-2);
}

.default-page__entry-title a {
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

.default-page__entry-title a:hover {
	color: var(--color-secondary);
}

.default-page__entry-excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-light);
}

/* Pagination — reuse from search */
.default-page__pagination {
	margin-top: var(--space-10);
}

.default-page__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.default-page__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	transition:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast);
}

.default-page__pagination .page-numbers:hover {
	color: var(--color-white);
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

.default-page__pagination .page-numbers.current {
	color: var(--color-white);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.default-page__empty {
	font-size: var(--text-md);
	color: var(--color-text-light);
}

/* =============================================================================
   WYSIWYG content — used in page.php content and elsewhere
   ============================================================================= */

.wysiwyg {
	font-size: var(--text-md);
	line-height: var(--leading-loose);
	color: var(--color-text);
}

.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4 {
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
}

.wysiwyg h2 {
	font-size: var(--text-2xl);
}

.wysiwyg h3 {
	font-size: var(--text-xl);
}

.wysiwyg h4 {
	font-size: var(--text-lg);
}

.wysiwyg p {
	margin-bottom: var(--space-4);
}

.wysiwyg a {
	color: var(--color-secondary);
	text-decoration: underline;
	transition: color var(--transition-fast);
}

.wysiwyg a:hover {
	color: var(--color-highlight);
}

.wysiwyg ul,
.wysiwyg ol {
	margin: 0 0 var(--space-4) var(--space-5);
}

.wysiwyg ul li,
.wysiwyg ol li {
	margin-bottom: var(--space-2);
}

.wysiwyg ul li::marker {
	color: var(--color-secondary);
	font-size: 1.3em;
}

.wysiwyg blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-6);
	border-left: 3px solid var(--color-secondary);
	font-style: italic;
	color: var(--color-text-light);
}

.wysiwyg img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin-block: var(--space-4);
}

.wysiwyg strong {
	font-weight: var(--weight-bold);
}

.wysiwyg em {
	font-style: italic;
}