/*
Theme Name:  Main Street
Theme URI:   https://example.invalid/mainstreet
Author:      Main Street
Description: A photography-led one-page theme for an independent high-street business: centred crest logo, condensed uppercase display type, a single configurable accent colour, and homepage sections for services, team, atmosphere, testimonials, gallery, hours, and contact. Every section is editable in the Customizer and every one can be switched off, so the same theme suits a salon, a garage, a dental practice or a law office.
Version:     1.8.3
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mainstreet
Tags:        one-column, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog
*/

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Surfaces, darkest to lightest. */
	--ib-ink-deep: #01050e;   /* header / footer */
	--ib-ink: #0f0f0f;        /* page */
	--ib-ink-soft: #171717;   /* alternate band */
	--ib-ink-raised: #1d1d1d; /* cards */

	/* Accent. Overridden inline by the Customizer colour setting. */
	--ib-copper: #c97b54;
	--ib-copper-bright: #e0a077;
	--ib-copper-dim: rgba(201, 123, 84, 0.28);

	--ib-white: #fcfdfd;
	--ib-text: rgba(252, 253, 253, 0.82);
	--ib-muted: rgba(252, 253, 253, 0.55);
	--ib-hairline: rgba(252, 253, 253, 0.12);

	/* Overlays for the hero and the tile captions. Recomputed per palette. */
	--ib-scrim: rgba(1, 5, 14, 0.86);
	--ib-scrim-soft: rgba(1, 5, 14, 0.55);
	--ib-scrim-strong: rgba(1, 5, 14, 0.94);
	--ib-scrim-clear: rgba(1, 5, 14, 0);

	--ib-display: "Oswald", "Haettenschweiler", "Arial Narrow", "Franklin Gothic Medium", sans-serif;
	--ib-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ib-container: 1200px;
	--ib-narrow: 760px;
	--ib-gutter: clamp(20px, 5vw, 48px);
	--ib-section-y: clamp(64px, 9vw, 132px);

	--ib-track-wide: 0.22em;
	--ib-track: 0.08em;
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */

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

html {
	scroll-behavior: smooth;
	/* Anchored sections clear the sticky header. */
	scroll-padding-top: 120px;
}

body {
	margin: 0;
	background: var(--ib-ink);
	color: var(--ib-text);
	font-family: var(--ib-body);
	font-size: 17px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ib-copper-bright);
	text-decoration: none;
	transition: color 0.18s ease;
}

a:hover,
a:focus {
	color: var(--ib-white);
}

:focus-visible {
	outline: 2px solid var(--ib-copper-bright);
	outline-offset: 3px;
}

hr {
	border: 0;
	border-top: 1px solid var(--ib-hairline);
	margin: 2.5rem 0;
}

/* ------------------------------------------------------------------ *
 * 3. Typography
 * ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ib-display);
	color: var(--ib-white);
	font-weight: 300;
	line-height: 1.12;
	margin: 0 0 0.6em;
	text-transform: uppercase;
	letter-spacing: var(--ib-track);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 200; }
h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); font-weight: 200; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.15rem; }
h5, h6 { font-size: 1rem; letter-spacing: var(--ib-track-wide); }

p {
	margin: 0 0 1.2em;
}

p:last-child {
	margin-bottom: 0;
}

blockquote {
	margin: 2rem 0;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--ib-copper);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--ib-white);
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--ib-ink-deep);
	border: 1px solid var(--ib-hairline);
	padding: 1.2rem;
	overflow-x: auto;
}

/* Inline icons. An SVG with only a viewBox has no intrinsic size, so it must be
   given one here or it expands to fill its container. */
.ib-ico {
	width: 1.05em;
	height: 1.05em;
	fill: currentColor;
	flex: none;
	display: inline-block;
	vertical-align: -0.15em;
}

/* The small copper label that sits above most section headings. */
.ib-eyebrow {
	display: block;
	font-family: var(--ib-display);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-copper);
	margin: 0 0 1rem;
}

/* Body copy set in copper, the reference site's signature move. */
.ib-lede {
	font-family: var(--ib-display);
	font-weight: 300;
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--ib-copper);
	text-transform: none;
}

/* ------------------------------------------------------------------ *
 * 4. Layout
 * ------------------------------------------------------------------ */

.ib-container {
	width: 100%;
	max-width: var(--ib-container);
	margin: 0 auto;
	padding: 0 var(--ib-gutter);
}

.ib-narrow {
	max-width: var(--ib-narrow);
	margin: 0 auto;
}

.ib-section {
	padding: var(--ib-section-y) 0;
	position: relative;
}

.ib-section--soft { background: var(--ib-ink-soft); }
.ib-section--deep { background: var(--ib-ink-deep); }

.ib-section-head {
	text-align: center;
	margin: 0 auto clamp(2.2rem, 5vw, 3.6rem);
	max-width: 720px;
}

.ib-section-head p {
	color: var(--ib-muted);
}

/* Section divider ornament: a hairline with a small copper diamond. */
.ib-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 1.5rem;
}

.ib-ornament::before,
.ib-ornament::after {
	content: "";
	width: clamp(28px, 8vw, 64px);
	height: 1px;
	background: var(--ib-copper-dim);
}

.ib-ornament span {
	width: 6px;
	height: 6px;
	background: var(--ib-copper);
	transform: rotate(45deg);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.ib-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 1000;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--ib-copper);
	color: var(--ib-ink-deep);
	font-family: var(--ib-display);
	text-transform: uppercase;
	letter-spacing: var(--ib-track);
}

/* ------------------------------------------------------------------ *
 * 5. Buttons
 * ------------------------------------------------------------------ */

.ib-btn {
	display: inline-block;
	font-family: var(--ib-display);
	font-size: 0.95rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ib-track-wide);
	padding: 1rem 2.4rem;
	border: 1px solid var(--ib-copper);
	background: var(--ib-copper);
	color: var(--ib-ink-deep);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ib-btn:hover,
.ib-btn:focus {
	background: var(--ib-copper-bright);
	border-color: var(--ib-copper-bright);
	color: var(--ib-ink-deep);
}

.ib-btn--ghost {
	background: transparent;
	color: var(--ib-copper-bright);
}

.ib-btn--ghost:hover,
.ib-btn--ghost:focus {
	background: var(--ib-copper);
	color: var(--ib-ink-deep);
}

.ib-btn--block {
	display: block;
	width: 100%;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * 6. Header
 * ------------------------------------------------------------------ */

.ib-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ib-ink-deep);
	border-bottom: 1px solid var(--ib-hairline);
}

.ib-header__inner {
	display: grid;
	/* Nav split either side of a centred crest, as on the reference site. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(12px, 3vw, 40px);
	min-height: 104px;
	padding: 0.6rem var(--ib-gutter);
	max-width: var(--ib-container);
	margin: 0 auto;
}

.ib-brand {
	display: block;
	text-align: center;
	line-height: 1;
}

.ib-brand svg,
.ib-brand img {
	margin: 0 auto;
	max-height: 84px;
	width: auto;
}

.ib-brand__text {
	font-family: var(--ib-display);
	font-size: clamp(1.1rem, 2.4vw, 1.6rem);
	font-weight: 500;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-white);
}

.ib-brand__tagline {
	display: block;
	font-family: var(--ib-display);
	font-size: 0.62rem;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ib-copper);
	margin-top: 6px;
}

.ib-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.6vw, 40px);
}

.ib-nav--left ul { justify-content: flex-end; }
.ib-nav--right ul { justify-content: flex-start; }

.ib-nav a {
	font-family: var(--ib-display);
	font-size: 0.92rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ib-track-wide);
	color: var(--ib-white);
	white-space: nowrap;
	position: relative;
	padding: 6px 0;
}

.ib-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--ib-copper);
	transition: right 0.22s ease;
}

.ib-nav a:hover::after,
.ib-nav a:focus::after,
.ib-nav .current-menu-item > a::after {
	right: 0;
}

/* Sub-menus stay simple: this is a one-page layout. */
.ib-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--ib-ink-deep);
	border: 1px solid var(--ib-hairline);
	padding: 10px 0;
	flex-direction: column;
	gap: 0;
	z-index: 10;
}

.ib-nav li:hover > .sub-menu,
.ib-nav li:focus-within > .sub-menu {
	display: flex;
}

.ib-nav .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-size: 0.82rem;
}

.ib-nav li {
	position: relative;
}

/* Mobile toggle */
.ib-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--ib-hairline);
	color: var(--ib-white);
	width: 46px;
	height: 46px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.ib-nav-toggle span,
.ib-nav-toggle span::before,
.ib-nav-toggle span::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ib-nav-toggle span::before,
.ib-nav-toggle span::after {
	content: "";
	position: relative;
}

.ib-nav-toggle span::before { top: -6px; }
.ib-nav-toggle span::after { top: 4.5px; }

.ib-nav-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.ib-nav-toggle[aria-expanded="true"] span::before { opacity: 0; }
.ib-nav-toggle[aria-expanded="true"] span::after { transform: rotate(-90deg) translateX(4.5px); }

.ib-header__cta {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 7. Hero
 * ------------------------------------------------------------------ */

.ib-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: clamp(460px, 76vh, 760px);
	padding: clamp(56px, 9vw, 110px) 0;
	background-color: var(--ib-ink-deep);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Legibility scrim over whatever photograph is set. */
.ib-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Driven by the palette, not hardcoded: a light profile needs a pale scrim or
	   the hero stays dark while the rest of the page turns light. */
	background:
		radial-gradient(ellipse at center, var(--ib-scrim-soft) 0%, var(--ib-scrim) 72%),
		linear-gradient(to bottom, var(--ib-scrim-soft), var(--ib-scrim-strong));
}

.ib-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 var(--ib-gutter);
}

.ib-hero__crest {
	margin: 0 auto clamp(1.6rem, 4vw, 2.6rem);
	max-width: clamp(200px, 34vw, 330px);
}

.ib-hero h1 {
	font-size: clamp(2.4rem, 7vw, 4.6rem);
	font-weight: 200;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.ib-hero__tagline {
	font-family: var(--ib-display);
	font-size: clamp(0.82rem, 1.8vw, 1.05rem);
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ib-copper);
	margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
}

.ib-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.ib-hero__meta {
	margin-top: clamp(2rem, 5vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	font-family: var(--ib-display);
	font-size: 0.8rem;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-muted);
}

.ib-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.ib-hero__meta .ib-ico {
	color: var(--ib-copper);
}

/* ------------------------------------------------------------------ *
 * 8. Statement
 * ------------------------------------------------------------------ */

.ib-statement {
	text-align: center;
}

.ib-statement h2 {
	font-size: clamp(1.7rem, 4vw, 3rem);
	max-width: 24ch;
	margin-left: auto;
	margin-right: auto;
}

.ib-statement__points {
	display: grid;
	gap: clamp(1.6rem, 4vw, 2.6rem);
	margin-top: clamp(2.2rem, 5vw, 3.4rem);
	text-align: left;
}

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

.ib-statement__points p {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 9. Atmosphere tiles
 * ------------------------------------------------------------------ */

.ib-tiles {
	display: grid;
	gap: clamp(14px, 2vw, 22px);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
	.ib-tiles {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ib-tile {
	position: relative;
	overflow: hidden;
	background: var(--ib-ink-raised);
	border: 1px solid var(--ib-hairline);
}

.ib-tile__media {
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease;
}

.ib-tile:hover .ib-tile__media {
	transform: scale(1.05);
}

.ib-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(14px, 2vw, 22px);
	background: linear-gradient(to top, var(--ib-scrim-strong) 20%, var(--ib-scrim-clear) 100%);
}

.ib-tile__body h3 {
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	margin: 0 0 0.3em;
	letter-spacing: var(--ib-track);
}

.ib-tile__body p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--ib-muted);
}

/* ------------------------------------------------------------------ *
 * 10. Services
 * ------------------------------------------------------------------ */

.ib-services {
	display: grid;
	gap: 0;
	max-width: 900px;
	margin: 0 auto;
	border-top: 1px solid var(--ib-hairline);
}

.ib-service {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 8px 20px;
	padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
	border-bottom: 1px solid var(--ib-hairline);
}

.ib-service__name {
	font-family: var(--ib-display);
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--ib-track);
	color: var(--ib-white);
	margin: 0;
	/* Leaders between the service and its price. */
	position: relative;
}

.ib-service__price {
	font-family: var(--ib-display);
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	font-weight: 500;
	letter-spacing: var(--ib-track);
	color: var(--ib-copper);
	white-space: nowrap;
}

.ib-service__desc {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.94rem;
	color: var(--ib-muted);
	max-width: 62ch;
}

.ib-services__note {
	text-align: center;
	margin-top: clamp(1.8rem, 4vw, 2.6rem);
	font-size: 0.9rem;
	color: var(--ib-muted);
}

/* ------------------------------------------------------------------ *
 * 11. Team
 * ------------------------------------------------------------------ */

.ib-team {
	display: grid;
	gap: clamp(22px, 3vw, 34px);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.ib-member {
	text-align: center;
}

.ib-member__portrait {
	aspect-ratio: 1;
	background-size: cover;
	background-position: center;
	background-color: var(--ib-ink-raised);
	border: 1px solid var(--ib-hairline);
	border-radius: 50%;
	margin: 0 auto 1.2rem;
	max-width: 220px;
	position: relative;
}

.ib-member__portrait::after {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid var(--ib-copper-dim);
	border-radius: 50%;
}

.ib-member h3 {
	margin: 0 0 0.2em;
	font-size: 1.2rem;
}

.ib-member__role {
	display: block;
	font-family: var(--ib-display);
	font-size: 0.76rem;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-copper);
	margin-bottom: 0.8rem;
}

.ib-member p {
	font-size: 0.92rem;
	color: var(--ib-muted);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 12. Testimonials
 * ------------------------------------------------------------------ */

.ib-quotes {
	display: grid;
	gap: clamp(20px, 3vw, 32px);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.ib-quote {
	background: var(--ib-ink-raised);
	border: 1px solid var(--ib-hairline);
	border-top: 2px solid var(--ib-copper);
	padding: clamp(1.6rem, 3vw, 2.2rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ib-quote__stars {
	color: var(--ib-copper);
	letter-spacing: 0.2em;
	font-size: 0.9rem;
	line-height: 1;
}

.ib-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ib-text);
}

.ib-quote__author {
	margin-top: auto;
	font-family: var(--ib-display);
	font-size: 0.8rem;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-muted);
}

/* ------------------------------------------------------------------ *
 * 13. Gallery
 * ------------------------------------------------------------------ */

.ib-gallery {
	display: grid;
	gap: clamp(10px, 1.6vw, 18px);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) {
	.ib-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
	/* First tile spans a 2x2 block so the grid is not a flat repeat. */
	.ib-gallery__item:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.ib-gallery__item {
	position: relative;
	overflow: hidden;
	background: var(--ib-ink-raised);
	border: 1px solid var(--ib-hairline);
}

.ib-gallery__item img,
.ib-gallery__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1;
	background-size: cover;
	background-position: center;
	transition: transform 0.5s ease, filter 0.4s ease;
}

.ib-gallery__item:hover img,
.ib-gallery__item:hover .ib-gallery__media {
	transform: scale(1.06);
	filter: brightness(1.08);
}

/* ------------------------------------------------------------------ *
 * 14. Hours & location
 * ------------------------------------------------------------------ */

.ib-visit {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
	.ib-visit {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.ib-hours {
	width: 100%;
	border-collapse: collapse;
}

.ib-hours th,
.ib-hours td {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--ib-hairline);
	text-align: left;
	font-family: var(--ib-display);
	letter-spacing: var(--ib-track);
	text-transform: uppercase;
	font-size: 0.95rem;
	font-weight: 400;
}

.ib-hours th {
	color: var(--ib-white);
}

.ib-hours td {
	text-align: right;
	color: var(--ib-copper);
	white-space: nowrap;
}

.ib-hours tr.is-closed th,
.ib-hours tr.is-closed td {
	color: var(--ib-muted);
}

.ib-hours tr.is-today th {
	color: var(--ib-copper-bright);
}

.ib-hours tr.is-today th::before {
	content: "▸ ";
	color: var(--ib-copper);
}

.ib-visit__block + .ib-visit__block {
	margin-top: 2.2rem;
}

.ib-visit__block h3 {
	font-size: 1rem;
	letter-spacing: var(--ib-track-wide);
	margin-bottom: 0.6rem;
}

.ib-visit__block address {
	font-style: normal;
	color: var(--ib-text);
}

.ib-visit__block a {
	color: var(--ib-copper-bright);
}

.ib-map {
	border: 1px solid var(--ib-hairline);
	filter: grayscale(1) contrast(1.1) brightness(0.85);
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* ------------------------------------------------------------------ *
 * 15. Contact — includes the Honeypot Sentinel form, restyled dark
 * ------------------------------------------------------------------ */

.ib-contact__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.4rem);
}

@media (min-width: 900px) {
	.ib-contact__grid {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: start;
	}
}

.ib-contact__aside h3 {
	font-size: 1rem;
	letter-spacing: var(--ib-track-wide);
}

.ib-contact__aside p {
	color: var(--ib-muted);
}

/* The form markup comes from the plugin shortcode, so it is styled by
   descendant selector rather than by editing the plugin. */
.ib-form-shell .hps-contact {
	max-width: none;
	margin: 0;
}

.ib-form-shell .hps-contact-title {
	font-family: var(--ib-display);
	text-transform: uppercase;
	letter-spacing: var(--ib-track);
	color: var(--ib-white);
}

.ib-form-shell .hps-contact-field label {
	font-family: var(--ib-display);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-muted);
}

.ib-form-shell .hps-contact-field input,
.ib-form-shell .hps-contact-field textarea {
	background: var(--ib-ink-deep);
	border: 1px solid var(--ib-hairline);
	color: var(--ib-white);
	border-radius: 0;
	padding: 0.85rem 1rem;
	font-family: var(--ib-body);
	font-size: 1rem;
}

.ib-form-shell .hps-contact-field input:focus,
.ib-form-shell .hps-contact-field textarea:focus {
	border-color: var(--ib-copper);
	outline: none;
	box-shadow: 0 0 0 1px var(--ib-copper-dim);
}

.ib-form-shell .hps-contact-field input::placeholder,
.ib-form-shell .hps-contact-field textarea::placeholder {
	color: rgba(252, 253, 253, 0.35);
}

.ib-form-shell .hps-contact-submit button {
	font-family: var(--ib-display);
	font-size: 0.95rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ib-track-wide);
	padding: 1rem 2.4rem;
	border-radius: 0;
	background: var(--ib-copper);
	color: var(--ib-ink-deep);
}

.ib-form-shell .hps-contact-submit button:hover,
.ib-form-shell .hps-contact-submit button:focus {
	background: var(--ib-copper-bright);
}

.ib-form-shell .hps-contact-notice {
	background: rgba(201, 123, 84, 0.1);
	border-left-color: var(--ib-copper);
	color: var(--ib-white);
}

.ib-form-shell .hps-contact-ok {
	background: rgba(12, 163, 12, 0.12);
	border-left-color: #4cae4c;
}

.ib-form-shell .hps-contact-error {
	background: rgba(208, 59, 59, 0.12);
	border-left-color: #d03b3b;
}

.ib-form-shell .hps-required {
	color: var(--ib-copper);
}

/* Fallback if the plugin is not active. */
.ib-form-missing {
	border: 1px dashed var(--ib-copper-dim);
	padding: 1.6rem;
	color: var(--ib-muted);
	font-size: 0.94rem;
}

/* ------------------------------------------------------------------ *
 * 16. Booking strip
 * ------------------------------------------------------------------ */

.ib-strip {
	background: var(--ib-ink-deep);
	border-top: 1px solid var(--ib-copper-dim);
	border-bottom: 1px solid var(--ib-copper-dim);
	text-align: center;
	padding: clamp(2.6rem, 6vw, 4.4rem) 0;
}

.ib-strip h2 {
	margin-bottom: 0.4em;
}

.ib-strip p {
	color: var(--ib-muted);
	margin-bottom: 1.8rem;
}

/* ------------------------------------------------------------------ *
 * 17. Footer
 * ------------------------------------------------------------------ */

.ib-footer {
	background: var(--ib-ink-deep);
	border-top: 1px solid var(--ib-hairline);
	padding: clamp(2.6rem, 6vw, 4rem) 0 1.6rem;
	font-size: 0.94rem;
}

.ib-footer__grid {
	display: grid;
	gap: clamp(1.8rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.ib-footer h2,
.ib-footer h3 {
	font-size: 0.85rem;
	letter-spacing: var(--ib-track-wide);
	margin-bottom: 1rem;
	color: var(--ib-white);
}

.ib-footer p,
.ib-footer address {
	color: var(--ib-muted);
	font-style: normal;
	margin: 0 0 0.6em;
}

.ib-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ib-footer li {
	margin-bottom: 0.5em;
}

.ib-footer a {
	color: var(--ib-muted);
}

.ib-footer a:hover,
.ib-footer a:focus {
	color: var(--ib-copper-bright);
}

.ib-social {
	display: flex;
	gap: 12px;
	margin-top: 1rem;
}

.ib-social a {
	width: 38px;
	height: 38px;
	border: 1px solid var(--ib-hairline);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ib-muted);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ib-social a:hover,
.ib-social a:focus {
	border-color: var(--ib-copper);
	color: var(--ib-copper-bright);
}

.ib-social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.ib-footer__bottom {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--ib-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	justify-content: space-between;
	align-items: center;
	font-size: 0.82rem;
	color: var(--ib-muted);
}

.ib-to-top {
	font-family: var(--ib-display);
	font-size: 0.78rem;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-muted);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.ib-to-top:hover,
.ib-to-top:focus {
	color: var(--ib-copper-bright);
}

/* ------------------------------------------------------------------ *
 * 18. Blog, pages, archives
 * ------------------------------------------------------------------ */

.ib-page-header {
	background: var(--ib-ink-deep);
	border-bottom: 1px solid var(--ib-hairline);
	padding: clamp(2.6rem, 7vw, 4.6rem) 0;
	text-align: center;
}

.ib-page-header p {
	color: var(--ib-muted);
	margin: 0.6rem 0 0;
}

.ib-entry {
	max-width: var(--ib-narrow);
	margin: 0 auto;
}

.ib-entry__meta {
	font-family: var(--ib-display);
	font-size: 0.78rem;
	letter-spacing: var(--ib-track-wide);
	text-transform: uppercase;
	color: var(--ib-copper);
	margin-bottom: 1.6rem;
}

.ib-entry__content > * + * {
	margin-top: 1.2em;
}

.ib-entry__content ul,
.ib-entry__content ol {
	padding-left: 1.4em;
}

.ib-entry__thumb {
	margin-bottom: 2rem;
	border: 1px solid var(--ib-hairline);
}

.ib-post-list {
	display: grid;
	gap: clamp(1.6rem, 4vw, 2.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.ib-card {
	background: var(--ib-ink-soft);
	border: 1px solid var(--ib-hairline);
	padding: clamp(1.4rem, 3vw, 2rem);
}

.ib-card h2 {
	font-size: 1.35rem;
}

.ib-card p {
	color: var(--ib-muted);
	font-size: 0.95rem;
}

.ib-pagination {
	margin-top: 3rem;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	font-family: var(--ib-display);
	letter-spacing: var(--ib-track);
}

.ib-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--ib-hairline);
	color: var(--ib-white);
}

.ib-pagination .page-numbers.current,
.ib-pagination .page-numbers:hover {
	border-color: var(--ib-copper);
	color: var(--ib-copper-bright);
}

/* WordPress core output */
.alignleft { float: left; margin: 0.4rem 1.6rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.6rem; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
	font-size: 0.85rem;
	color: var(--ib-muted);
	text-align: center;
	margin-top: 0.5rem;
}
.sticky .ib-card { border-color: var(--ib-copper-dim); }

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var(--ib-hairline);
	text-align: left;
}

/* Comments */
.ib-comments {
	max-width: var(--ib-narrow);
	margin: clamp(2.6rem, 6vw, 4rem) auto 0;
	padding-top: 2.4rem;
	border-top: 1px solid var(--ib-hairline);
}

.ib-comments ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ib-comments .children {
	list-style: none;
	margin: 1.2rem 0 0 1.4rem;
	padding: 0 0 0 1.2rem;
	border-left: 1px solid var(--ib-hairline);
}

.ib-comments li {
	margin-bottom: 1.6rem;
}

.ib-comments .comment-meta {
	font-family: var(--ib-display);
	font-size: 0.78rem;
	letter-spacing: var(--ib-track);
	text-transform: uppercase;
	color: var(--ib-copper);
	margin-bottom: 0.4rem;
}

.ib-comments input[type="text"],
.ib-comments input[type="email"],
.ib-comments input[type="url"],
.ib-comments textarea {
	width: 100%;
	background: var(--ib-ink-deep);
	border: 1px solid var(--ib-hairline);
	color: var(--ib-white);
	padding: 0.7rem 0.9rem;
	font: inherit;
}

.ib-comments .submit {
	font-family: var(--ib-display);
	text-transform: uppercase;
	letter-spacing: var(--ib-track-wide);
	background: var(--ib-copper);
	color: var(--ib-ink-deep);
	border: 0;
	padding: 0.9rem 2rem;
	cursor: pointer;
}

/* Search form */
.ib-search {
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin: 0 auto;
}

.ib-search input[type="search"] {
	flex: 1;
	background: var(--ib-ink-deep);
	border: 1px solid var(--ib-hairline);
	color: var(--ib-white);
	padding: 0.75rem 1rem;
	font: inherit;
}

/* ------------------------------------------------------------------ *
 * 19. Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.ib-header__inner {
		grid-template-columns: auto 1fr auto;
		min-height: 78px;
	}

	.ib-brand {
		grid-column: 2;
		text-align: center;
	}

	.ib-brand svg,
	.ib-brand img {
		max-height: 56px;
	}

	.ib-nav-toggle {
		display: inline-flex;
		grid-column: 1;
		justify-self: start;
	}

	.ib-header__cta {
		display: block;
		grid-column: 3;
		justify-self: end;
	}

	.ib-header__cta .ib-btn {
		padding: 0.7rem 1.1rem;
		font-size: 0.75rem;
		letter-spacing: var(--ib-track);
	}

	/* Both nav halves collapse into one panel below the bar. */
	.ib-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ib-ink-deep);
		border-bottom: 1px solid var(--ib-hairline);
		display: none;
		padding: 0.6rem var(--ib-gutter);
	}

	.ib-nav--right {
		border-top: 0;
		padding-top: 0;
	}

	.ib-nav--left { order: 3; }

	body.ib-nav-open .ib-nav {
		display: block;
	}

	body.ib-nav-open .ib-nav--right {
		top: calc(100% + var(--ib-nav-left-h, 0px));
	}

	.ib-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ib-nav li {
		border-bottom: 1px solid var(--ib-hairline);
	}

	.ib-nav li:last-child {
		border-bottom: 0;
	}

	.ib-nav a {
		display: block;
		padding: 0.95rem 0;
		font-size: 1rem;
	}

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

	.ib-nav .sub-menu {
		position: static;
		display: flex;
		border: 0;
		padding: 0 0 0.6rem 1rem;
		background: none;
	}
}

@media (max-width: 560px) {
	.ib-tiles {
		grid-template-columns: 1fr;
	}

	.ib-hero__actions .ib-btn {
		width: 100%;
	}

	.ib-service {
		grid-template-columns: 1fr;
	}

	.ib-service__price {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Print: drop the dark ground so a services list is usable on paper. */
@media print {
	body {
		background: #fff;
		color: #000;
	}

	.ib-header,
	.ib-hero,
	.ib-footer,
	.ib-strip,
	.ib-gallery,
	.ib-tiles {
		display: none !important;
	}

	h1, h2, h3, .ib-service__name, .ib-service__price {
		color: #000;
	}
}