/*
 * Ri-Han Construction: component styles.
 * Mobile first. Larger screens are added with min-width queries:
 *   640px  (mid)      960px (desktop)      1100px (wide desktop)
 */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { height: auto; }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold-light);
	outline-offset: 2px;
}
.screen-reader-text:focus { clip: auto; height: auto; width: auto; z-index: 100000; padding: 1rem; background: #fff; color: #000; }

/* Full-width sections sit flush against each other */
.wp-site-blocks > * + * { margin-block-start: 0; }
.rihan-sections > * + *, .rihan-sections > .alignfull + * { margin-block-start: 0 !important; }
main > .wp-block-group.alignfull + .wp-block-group.alignfull { margin-block-start: 0; }

/* Text and links inside dark sections */
.has-ground-dark-background-color,
.has-charcoal-background-color,
.has-footer-dark-background-color { color: var(--wp--preset--color--warm-white); }
:is(.has-ground-dark-background-color, .has-charcoal-background-color, .has-footer-dark-background-color) a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--gold-light); }
:is(.has-ground-dark-background-color, .has-charcoal-background-color, .has-footer-dark-background-color) a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--warm-white); }

/* ---------- Block styles ---------- */
.is-style-eyebrow {
	font-size: 0.75rem !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin-bottom: 0.6rem !important;
}
:is(.has-ground-dark-background-color, .has-charcoal-background-color, .has-footer-dark-background-color, .rihan-hero) .is-style-eyebrow { color: var(--wp--preset--color--gold-light); }

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 1.1rem;
}
.wp-block-group.is-style-card-dark {
	background: var(--wp--preset--color--ground-dark);
	color: var(--wp--preset--color--warm-white);
	border-radius: 14px;
	padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
.wp-block-group.is-style-card-dark p { color: var(--wp--preset--color--text-on-dark); }
.wp-block-group.is-style-card-dark :is(h2, h3, h4) { color: var(--wp--preset--color--warm-white); }

.wp-block-image.is-style-rounded-photo img { border-radius: 12px; }

ul.is-style-checklist { list-style: none; padding-left: 0; display: grid; gap: 0.6rem; }
ul.is-style-checklist li { position: relative; padding-left: 1.9rem; }
ul.is-style-checklist li::before {
	content: "";
	position: absolute; left: 0; top: 0.15em;
	width: 1.25rem; height: 1.25rem;
	background: var(--wp--preset--color--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Arrow after "more" links */
.rihan-arrow-link a { text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
.rihan-arrow-link a::after { content: "\2192"; transition: transform .2s ease; }
.rihan-arrow-link a:hover::after { transform: translateX(3px); }

/* Buttons: comfortable touch size */
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wp-block-button.is-style-outline > .wp-block-button__link { border-color: currentColor; }
.has-ground-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.rihan-hero .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--warm-white); border-color: #5A5F66; }

/* ---------- Header ---------- */
.rihan-site-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .rihan-site-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .rihan-site-header { top: 32px; } }
@media (max-width: 600px) { .admin-bar .rihan-site-header { top: 0; } }
.rihan-header .wp-block-site-logo img { width: auto; max-height: 56px; }
.rihan-header .wp-block-navigation { color: #E9E4DA; }
.rihan-header .wp-block-navigation a { color: #E9E4DA; text-decoration: none; }
.rihan-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gold-light); }
.rihan-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ground-dark) !important; color: var(--wp--preset--color--warm-white) !important; padding: 2rem 1.5rem; }
.rihan-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.25rem; font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
@media (max-width: 599px) {
	.rihan-header .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #3A3F45; border-radius: 8px; color: var(--wp--preset--color--warm-white); }
	.rihan-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}
.rihan-header .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; color: var(--wp--preset--color--warm-white); }
.rihan-header__actions { flex-wrap: nowrap; }
@media (min-width: 600px) and (max-width: 1099px) { .rihan-header .wp-block-navigation { --wp--style--block-gap: 18px; gap: 18px; } .rihan-header .wp-block-navigation-item { font-size: 0.875rem; } }

.rihan-header__phone a {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	width: 44px; height: 44px; border-radius: 8px;
	background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ground-dark) !important;
	text-decoration: none; font-weight: 600; font-size: 0;
}
.rihan-header__phone a::before {
	content: ""; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: var(--rihan-icon-phone) center / contain no-repeat; mask: var(--rihan-icon-phone) center / contain no-repeat;
}
.rihan-header__phone { order: -1; margin: 0; }
@media (min-width: 600px) { .rihan-header__phone { order: 0; } }
.rihan-header__quote { display: none !important; }
@media (min-width: 1100px) {
	.rihan-header__phone a { width: auto; height: auto; background: none; color: var(--wp--preset--color--gold-light) !important; font-size: 0.95rem; }
	.rihan-header__phone a::before { width: 18px; height: 18px; }
	.rihan-header__quote { display: flex !important; }
}

/* ---------- Icons (CSS masks so the text stays editable) ---------- */
:root {
	--rihan-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
	--rihan-icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-13.5 7.8L3 21l1.3-4.4A9 9 0 1 1 21 12z'/%3E%3C/svg%3E");
	--rihan-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--rihan-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
	--rihan-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E");
	--rihan-icon-addition: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 20V9l6-5 6 5v11'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E");
	--rihan-icon-bath: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3Cpath d='M6 12V6a2 2 0 0 1 4 0'/%3E%3Cpath d='M7 19l-1 2M17 19l1 2'/%3E%3C/svg%3E");
	--rihan-icon-roof: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 14L12 6l10 8'/%3E%3Cpath d='M7 10.5v8.5M12 6v13M17 10.5v8.5'/%3E%3C/svg%3E");
	--rihan-icon-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 3 4 4.5 4 8.5a4 4 0 0 1-8 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-5 0-7.5z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
	--rihan-icon-carport: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-4 9 4'/%3E%3Cpath d='M5 8v12M19 8v12'/%3E%3Cpath d='M8 17h8M9 14h6'/%3E%3C/svg%3E");
	--rihan-icon-deck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16M20 4v16M4 8h16M4 16h16'/%3E%3Cpath d='M9 8v8M15 8v8'/%3E%3C/svg%3E");
	--rihan-icon-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E");
}
[class*="rihan-icon-"]::before {
	content: ""; display: block; width: 30px; height: 30px; margin-bottom: 0.25rem;
	background: var(--wp--preset--color--gold);
	-webkit-mask: var(--rihan-icon) center / contain no-repeat; mask: var(--rihan-icon) center / contain no-repeat;
}
.rihan-icon-home { --rihan-icon: var(--rihan-icon-home); }
.rihan-icon-addition { --rihan-icon: var(--rihan-icon-addition); }
.rihan-icon-bath { --rihan-icon: var(--rihan-icon-bath); }
.rihan-icon-roof { --rihan-icon: var(--rihan-icon-roof); }
.rihan-icon-flame { --rihan-icon: var(--rihan-icon-flame); }
.rihan-icon-carport { --rihan-icon: var(--rihan-icon-carport); }
.rihan-icon-deck { --rihan-icon: var(--rihan-icon-deck); }
.rihan-icon-wrench { --rihan-icon: var(--rihan-icon-wrench); }
.rihan-icon-pin { --rihan-icon: var(--rihan-icon-pin); }
.rihan-icon-pin::before { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin: 0 0.4rem 0 0; background: currentColor; }

/* ---------- Grids with fixed column counts per screen size ---------- */
.rihan-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 720px) { .rihan-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.rihan-areas-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)) !important; }

/* ---------- Service cards: photo on top, whole card clickable ---------- */
.rihan-service-card { position: relative; height: 100%; box-sizing: border-box; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.rihan-service-card:hover { border-color: var(--wp--preset--color--gold); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 25, 28, 0.08); }
.rihan-service-card > .wp-block-image { margin: 0; overflow: hidden; }
.rihan-service-card > .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.rihan-service-card:hover > .wp-block-image img { transform: scale(1.04); }
.rihan-service-card h3 { font-size: 0.95rem; line-height: 1.25; margin: 0; padding: 0.75rem 0.85rem 0; }
.rihan-service-card h3 a { color: inherit; text-decoration: none; }
.rihan-service-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rihan-service-card p { font-size: 0.8125rem; color: var(--wp--preset--color--text-muted); line-height: 1.45; margin: 0.3rem 0 0; padding: 0 0.85rem 0.9rem; }
@media (min-width: 720px) { .rihan-service-card h3 { font-size: 1.0625rem; padding: 1rem 1rem 0; } .rihan-service-card p { font-size: 0.875rem; padding: 0 1rem 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .rihan-service-card, .rihan-service-card:hover, .rihan-service-card img { transition: none; transform: none !important; } }

/* ---------- Photo wall (From our sites) ---------- */
.rihan-photo-wall.wp-block-gallery { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9.5rem; grid-auto-flow: dense; gap: 8px !important; }
.rihan-photo-wall.wp-block-gallery > .wp-block-image { width: auto !important; margin: 0 !important; height: 100%; }
.rihan-photo-wall.wp-block-gallery > .wp-block-image img { width: 100%; height: 100% !important; object-fit: cover; border-radius: 8px; }
.rihan-photo-wall > .wp-block-image:nth-child(1), .rihan-photo-wall > .wp-block-image:nth-child(6) { grid-column: span 2; grid-row: span 2; }
@media (min-width: 720px) {
	.rihan-photo-wall.wp-block-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 12rem; gap: 10px !important; }
	.rihan-photo-wall > .wp-block-image:nth-child(6) { grid-column: span 1; grid-row: span 1; }
	.rihan-photo-wall > .wp-block-image:nth-child(4) { grid-row: span 2; }
}

/* ---------- Journey strip (one build, start to finish) ---------- */
.rihan-journey h3 { font-size: var(--wp--preset--font-size--large); }
.rihan-journey__strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; counter-reset: rihan-journey; }
@media (min-width: 720px) { .rihan-journey__strip { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.rihan-journey__strip .wp-block-image { position: relative; margin: 0; counter-increment: rihan-journey; }
.rihan-journey__strip .wp-block-image img { border-radius: 10px; width: 100%; display: block; }
.rihan-journey__strip figcaption { position: absolute; left: 8px; bottom: 8px; margin: 0; background: rgba(22, 25, 28, 0.85); color: var(--wp--preset--color--warm-white); font-size: 0.8125rem; font-weight: 600; padding: 5px 10px; border-radius: 6px; }
.rihan-journey__strip figcaption::before { content: counter(rihan-journey) ". "; color: var(--wp--preset--color--gold-light); }

/* ---------- Area cards with photos ---------- */
.rihan-area-card.wp-block-cover { padding: var(--wp--preset--spacing--40); align-items: flex-end; overflow: hidden; }
.rihan-area-card .wp-block-cover__inner-container { width: 100%; }
.rihan-area-card .wp-block-cover__background { background: linear-gradient(180deg, rgba(22, 25, 28, 0.35) 0%, rgba(22, 25, 28, 0.92) 70%) !important; opacity: 1 !important; }
.rihan-area-card p:not(.is-style-eyebrow):not(.rihan-arrow-link) { color: var(--wp--preset--color--text-on-dark); }
.rihan-area-card .rihan-arrow-link a::after { content: ""; position: absolute; inset: 0; }

/* ---------- Stats ---------- */
.rihan-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #2E3338; border: 1px solid #2E3338; border-radius: 12px; overflow: hidden; }
.rihan-stats > * { background: #1C2024; padding: 0.85rem 1rem; margin: 0 !important; }
.rihan-stats .rihan-stat-number { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(1.2rem, 3vw, 2rem); line-height: 1.1; color: var(--wp--preset--color--gold-light); margin: 0; }
.rihan-stats .rihan-stat-label { font-size: 0.875rem; color: var(--wp--preset--color--text-on-dark); margin: 0.25rem 0 0; }
@media (min-width: 640px) { .rihan-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Project cards: photo with the title over a gradient ---------- */
.rihan-project-grid .wp-block-post-template,
.rihan-project-grid.rihan-related-projects__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
.rihan-project-grid .wp-block-post-template > li { margin: 0; }
.rihan-project-card { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--warm-white); border-radius: 12px; overflow: hidden; height: 100%; position: relative; display: block; }
.rihan-project-card .wp-block-post-featured-image, .rihan-project-card figure { margin: 0 !important; height: 100%; }
.rihan-project-card .wp-block-post-featured-image a { display: block; height: 100%; }
.rihan-project-card img { width: 100%; height: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .5s ease; }
.rihan-project-card:hover img { transform: scale(1.05); }
.rihan-project-card__text { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: 2.75rem 0.85rem 0.85rem; background: linear-gradient(180deg, rgba(15, 17, 19, 0) 0%, rgba(15, 17, 19, 0.9) 60%); pointer-events: none; }
.rihan-project-card__text > * { margin: 0 !important; }
.rihan-project-card .wp-block-post-title, .rihan-project-card .rihan-project-card__title { font-family: var(--wp--preset--font-family--heading); font-size: 0.95rem; font-weight: 700; line-height: 1.25; margin: 0; padding: 0; }
.rihan-project-card .wp-block-post-title a, .rihan-project-card .rihan-project-card__title a { color: var(--wp--preset--color--warm-white); text-decoration: none; pointer-events: auto; }
.rihan-project-card .wp-block-post-title a::after, .rihan-project-card .rihan-project-card__title a::after { content: ""; position: absolute; inset: 0; }
.rihan-project-card .wp-block-post-terms, .rihan-project-card .rihan-project-card__meta { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--gold-light); padding: 0 0 0.3rem; margin: 0; }
.rihan-project-card .wp-block-post-terms a { color: var(--wp--preset--color--gold-light); text-decoration: none; pointer-events: auto; position: relative; z-index: 2; }
.rihan-project-card .wp-block-post-terms .wp-block-post-terms__separator { color: var(--wp--preset--color--gold-light); }
/* The first card spans the full row on phones */
.rihan-project-grid--featured .wp-block-post-template > li:first-child,
.rihan-project-grid--featured > li:first-child { grid-column: span 2; }
.rihan-project-grid--featured .wp-block-post-template > li:first-child img,
.rihan-project-grid--featured > li:first-child img { aspect-ratio: 4 / 3; }
@media (min-width: 640px) {
	.rihan-project-grid:not(.rihan-project-grid--featured) .wp-block-post-template,
	.rihan-project-grid.rihan-related-projects__list:not(.rihan-project-grid--featured) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rihan-project-grid img { aspect-ratio: 4 / 3; }
	.rihan-project-card__text { padding: 3rem 1.1rem 1rem; }
	.rihan-project-card .wp-block-post-title, .rihan-project-card .rihan-project-card__title { font-size: 1.0625rem; }
}
@media (min-width: 960px) {
	.rihan-project-grid--featured .wp-block-post-template,
	.rihan-project-grid--featured.rihan-related-projects__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rihan-project-grid--featured .wp-block-post-template > li:first-child,
	.rihan-project-grid--featured > li:first-child { grid-column: span 2; grid-row: span 2; }
	.rihan-project-grid--featured .wp-block-post-template > li:first-child .rihan-project-card,
	.rihan-project-grid--featured > li:first-child .rihan-project-card { min-height: 100%; }
	.rihan-project-grid--featured .wp-block-post-template > li:first-child img,
	.rihan-project-grid--featured > li:first-child img { position: absolute; inset: 0; aspect-ratio: auto; }
	.rihan-project-grid--featured .wp-block-post-template > li:first-child .wp-block-post-title { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .rihan-project-card img { transition: none; } .rihan-project-card:hover img { transform: none; } }

/* ---------- Before / after ---------- */
.rihan-before-after-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important; margin-top: var(--wp--preset--spacing--30) !important; }
.rihan-before-after-grid .rihan-before-after { background: var(--wp--preset--color--charcoal); border-radius: 12px; padding: 8px 8px 1rem; }
.rihan-before-after-grid .rihan-before-after > h3 { margin: 0.85rem 0.5rem 0 !important; }
.rihan-before-after-grid .rihan-before-after > p { margin: 0.25rem 0.5rem 0 !important; }
.rihan-before-after .wp-block-image { position: relative; margin: 0; }
.rihan-before-after .wp-block-image img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.rihan-before-after-grid .wp-block-image img { aspect-ratio: 3 / 4; }
.rihan-before-after .wp-block-image figcaption {
	position: absolute; top: 8px; left: 8px; margin: 0;
	background: var(--wp--preset--color--ground-dark); color: var(--wp--preset--color--warm-white);
	font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 4px 8px; border-radius: 4px;
}
.rihan-before-after .wp-block-image.rihan-after figcaption { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ground-dark); font-weight: 700; }
.rihan-content .rihan-before-after { margin-block: var(--wp--preset--spacing--40); }

/* ---------- Process steps ---------- */
.rihan-steps { counter-reset: rihan-step; }
.rihan-step { counter-increment: rihan-step; }
.rihan-step::before {
	content: counter(rihan-step, decimal-leading-zero);
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ground-dark);
	font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.95rem;
	margin-bottom: 0.5rem;
}
.rihan-step h3 { font-size: 1rem; margin: 0; }
.rihan-step p { font-size: 0.875rem; color: var(--wp--preset--color--text-muted); line-height: 1.45; margin: 0.3rem 0 0; }

/* ---------- About card ---------- */
.rihan-about-card { overflow: hidden; }
.rihan-about-card > .wp-block-column:first-child { align-self: stretch; }
.rihan-about-card__photo { margin: 0; height: 100%; }
.rihan-about-card__photo img { width: 100%; height: 100%; aspect-ratio: 940 / 438; object-fit: cover; display: block; }
@media (min-width: 782px) { .rihan-about-card__photo img { aspect-ratio: auto; min-height: 380px; } }
.rihan-about-card__body { padding: clamp(1.4rem, 4vw, 3rem); }

/* ---------- FAQs (core Details block) ---------- */
.wp-block-details { margin-block-start: 0.6rem; }
.wp-block-details summary {
	cursor: pointer; list-style: none; position: relative;
	padding: 1rem 2rem 1rem 0; min-height: 44px; box-sizing: border-box;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1rem; line-height: 1.35;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 600; color: var(--wp--preset--color--gold);
}
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--text-muted); font-size: 0.95rem; margin-top: 0; padding-bottom: 1rem; }

/* ---------- Guides: swipe row on phones, grid on desktop ---------- */
.rihan-guides .wp-block-post-template {
	display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(264px, 82%);
	grid-template-columns: none !important;
	gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; list-style: none; margin: 0; padding-left: 0;
}
.rihan-guides .wp-block-post-template > li { scroll-snap-align: start; margin: 0; }
@media (min-width: 640px) { .rihan-guides .wp-block-post-template { grid-auto-columns: minmax(300px, 45%); } }
@media (min-width: 960px) {
	.rihan-guides .wp-block-post-template { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow: visible; }
}
.rihan-guide-card { position: relative; height: 100%; box-sizing: border-box; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; padding-bottom: 1.1rem; }
.rihan-guide-card > :not(.wp-block-post-featured-image) { padding-inline: 1.1rem; }
.rihan-guide-card .wp-block-post-title { font-size: 1.0625rem; line-height: 1.3; margin-top: 0.4rem; }
.rihan-guide-card .wp-block-post-terms { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 1rem; }
.rihan-guide-card .wp-block-post-terms a { color: var(--wp--preset--color--gold-dark); text-decoration: none; }
.rihan-guide-card .wp-block-post-featured-image { margin: 0; }
.rihan-guide-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.rihan-guide-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.rihan-guide-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.rihan-guide-card .wp-block-post-terms a { position: relative; z-index: 1; }

/* ---------- Page header band (photo cover) ---------- */
.rihan-page-band.wp-block-cover { position: relative; background: var(--wp--preset--color--ground-dark); align-items: flex-end; min-height: 280px !important; }
@media (min-width: 960px) { .rihan-page-band.wp-block-cover { min-height: 380px !important; } }
.rihan-page-band .wp-block-cover__background { background: linear-gradient(180deg, rgba(22, 25, 28, 0.45) 0%, rgba(22, 25, 28, 0.9) 100%) !important; opacity: 1 !important; }
.rihan-page-band .wp-block-cover__inner-container { width: 100%; color: var(--wp--preset--color--warm-white); }
.rihan-page-band h1 { text-wrap: balance; }
.rihan-page-band .wp-block-post-excerpt__excerpt, .rihan-page-band .wp-block-term-description { color: var(--wp--preset--color--text-on-dark); font-size: 1.0625rem; max-width: 640px; }
.rihan-page-band .wp-block-post-excerpt__more-text { display: none; }
.rihan-page-band .wp-block-post-terms a { color: var(--wp--preset--color--gold-light); text-decoration: none; }

/* ---------- Galleries in project and service pages: even grid, no stretched last photo ---------- */
.rihan-gallery.wp-block-gallery { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
@media (min-width: 600px) { .rihan-gallery.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rihan-gallery.wp-block-gallery > .wp-block-image { width: auto !important; margin: 0 !important; }
.rihan-gallery.wp-block-gallery > .wp-block-image img { width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }

/* Long-form content */
.rihan-content > * + h2 { margin-top: 2.5rem; }
.rihan-content h2 { font-size: var(--wp--preset--font-size--x-large); }
.rihan-content .wp-block-gallery img { border-radius: 8px; }

/* ---------- Footer ---------- */
.rihan-footer a { text-decoration: none; }
.rihan-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.rihan-footer-links a { color: var(--wp--preset--color--text-on-dark) !important; }
.rihan-footer-links a:hover { color: var(--wp--preset--color--gold-light) !important; }
.rihan-footer .wp-block-site-logo img { width: auto; max-height: 84px; }
.rihan-footer .wp-block-navigation a { color: var(--wp--preset--color--text-on-dark) !important; }
.rihan-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--gold-light) !important; }
.rihan-contact-line a, .rihan-contact-line { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.rihan-contact-line a::before { content: ""; width: 20px; height: 20px; flex: none; background: var(--wp--preset--color--gold-light); -webkit-mask: var(--rihan-line-icon, var(--rihan-icon-phone)) center / contain no-repeat; mask: var(--rihan-line-icon, var(--rihan-icon-phone)) center / contain no-repeat; }
.rihan-contact-line--mail { --rihan-line-icon: var(--rihan-icon-mail); }
.rihan-contact-line a { color: var(--wp--preset--color--warm-white) !important; overflow-wrap: anywhere; }

/* ---------- Mobile action bar (phones and tablets only) ---------- */
.rihan-action-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
	background: var(--wp--preset--color--ground-dark); border-top: 1px solid #2E3338;
}
.rihan-action-bar a {
	min-height: 48px; border-radius: 8px; border: 1px solid #3A3F45;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	color: var(--wp--preset--color--warm-white); text-decoration: none; font-weight: 600; font-size: 0.875rem;
}
.rihan-action-bar a::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--rihan-bar-icon) center / contain no-repeat; mask: var(--rihan-bar-icon) center / contain no-repeat; }
.rihan-action-bar .rihan-action-bar__call { --rihan-bar-icon: var(--rihan-icon-phone); }
.rihan-action-bar .rihan-action-bar__chat { --rihan-bar-icon: var(--rihan-icon-chat); }
.rihan-action-bar .rihan-action-bar__quote { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--ground-dark); font-weight: 700; }
.rihan-action-bar .rihan-action-bar__quote::before { display: none; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) {
	.rihan-action-bar { display: none; }
	body { padding-bottom: 0; }
}

/* ---------- Search / 404 ---------- */
.wp-block-search__input { min-height: 48px; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); padding: 0 0.9rem; }
.wp-block-search__button { margin-left: 8px; }

/* ---------- Animated logo (rihan/animated-logo block) ---------- */
/* ===== Ri-Han Construction animated logo ===== */
/* Size: change --rh-logo-width. Colours: change the two --rh-logo variables. */
.rh-logo-link{display:block;width:100%;max-width:var(--rh-logo-width,260px);line-height:0}
.rh-logo{display:block;width:100%;height:auto;overflow:visible}
.rh-logo .rh-dark{fill:var(--rh-logo-dark,#181C1F);fill-rule:nonzero}
.rh-logo .rh-gold{fill:var(--rh-logo-gold,#B2881A);fill-rule:evenodd}

/* each part moves around its own centre; % = % of that part's own size */
.rh-logo path,.rh-logo polygon{transform-box:fill-box;transform-origin:center}

/* timeline: the second number is when each part starts */
.rh-logo .rh-letter-r  {animation:rh-from-left  .7s .10s cubic-bezier(.2,.8,.2,1) both}
.rh-logo .rh-letter-h  {animation:rh-from-right .7s .10s cubic-bezier(.2,.8,.2,1) both}
.rh-logo .rh-roof      {animation:rh-drop .75s .55s cubic-bezier(.2,.8,.2,1) both}
.rh-logo .rh-roof-band {animation:rh-drop .75s .70s cubic-bezier(.2,.8,.2,1) both}
.rh-logo .rh-window    {animation:rh-pop  .45s 1.25s cubic-bezier(.3,1.6,.5,1) both}
.rh-logo .rh-wordmark  {animation:rh-fade-up .6s 1.15s ease-out both}
.rh-logo .rh-tagline   {animation:rh-fade .6s 1.55s ease-out both}
.rh-logo .rh-line-left {animation:rh-draw .6s 1.65s ease-out both;transform-origin:right}
.rh-logo .rh-line-right{animation:rh-draw .6s 1.65s ease-out both;transform-origin:left}

@keyframes rh-from-left {from{transform:translateX(-60%);opacity:0}}
@keyframes rh-from-right{from{transform:translateX(60%);opacity:0}}
@keyframes rh-drop      {from{transform:translateY(-120%);opacity:0}}
@keyframes rh-pop       {from{transform:scale(0);opacity:0}}
@keyframes rh-fade-up   {from{transform:translateY(35%);opacity:0}}
@keyframes rh-fade      {from{opacity:0}}
@keyframes rh-draw      {from{transform:scaleX(0)}}

/* visitors who switch off motion see the finished logo */
.rihan-logo { line-height: 0; }
.rihan-logo .rh-logo-link { width: var(--rh-logo-width, 140px); }
.rihan-logo--on-dark .rh-logo { --rh-logo-dark: var(--wp--preset--color--warm-white); --rh-logo-gold: #B2881A; }
.rihan-header .rihan-logo .rh-logo-link { max-width: min(var(--rh-logo-width, 140px), 34vw); }
/* Plays once per visit (or never, when switched off); motion-sensitive visitors see the finished logo. */
.rihan-logo-seen .rihan-logo--once .rh-logo *,
.rihan-logo--static .rh-logo * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .rh-logo * { animation: none !important; } }

.rihan-area-card .is-style-eyebrow { color: var(--wp--preset--color--gold-light); }