/* =========================================================
   Jezben — page sections

   Shared rhythm and headings first, then each block. Values
   follow the live site: 55px/70px section headings, 16px
   uppercase eyebrows, 20px card radius. Everything reads from
   the design-system tokens in main.css.
   ========================================================= */

.section { padding-block: calc(var(--space-xl) * 1.5); padding-inline: 15px; }
.section--surface { background: var(--color-surface); }

.section__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 1rem; font-weight: 500; letter-spacing: 1px;
	/* Body leading is set for running prose; a one-line label needs its
	   own or it sits in 42px of empty space. */
	line-height: 1.4;
	text-transform: uppercase; color: var(--color-muted);
}
.section__heading {
	font-size: var(--step-2); font-weight: 500; line-height: var(--step-lh-2);
	margin: 0 0 var(--space-sm); text-wrap: balance;
}
.section__intro { color: var(--color-muted); max-width: 70ch; }
.entry-content > :last-child { margin-bottom: 0; }

/* ---------- Point lists ---------- */

.point-list { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 700px) { .point-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-md); } }
.point-list__item { position: relative; padding-left: 1.9rem; }
.point-list__item::before {
	content: ""; position: absolute; left: 0; top: 0.45em;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--color-accent);
}

/* ---------- About: split panel ---------- */

/* A separate rounded black box on the left with the copy alongside it
   on the page ground — not a full-bleed split. */
.section.section--about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(1.5rem, 4vw, 5rem);
	padding: var(--space-xl) 10px;
	background: transparent;
	border-radius: 0;
	margin-inline: 0;
}

.section--about__panel {
	background: var(--color-text);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: var(--space-xl) clamp(2rem, 4vw, 4rem);
	display: flex; flex-direction: column; justify-content: center;
}
.section--about__panel .section__eyebrow { color: rgb(255 255 255 / 0.55); }
.section--about__panel .section__heading {
	color: #fff;
	font-size: var(--h4-size); line-height: var(--h4-lh);
	max-width: 20ch;
}

.section--about__body {
	padding: var(--space-xl) clamp(1rem, 2vw, 2.5rem) var(--space-xl) 0;
	display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg);
}
.section--about__body .entry-content { color: var(--color-text); max-width: 62ch; }

.rating { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: var(--space-md); }
.rating__label { font-size: var(--h6-size); letter-spacing: normal; text-transform: none; opacity: 1; }
.rating img { width: auto; max-height: 26px; }

.about-cta { display: flex; align-items: stretch; gap: 0; }
.about-cta__arrow {
	display: grid; place-items: center;
	width: var(--button-height); height: var(--button-height);
	flex: 0 0 var(--button-height);
	border-radius: 50%;
	background: var(--color-accent); color: var(--color-on-accent);
	text-decoration: none;
	transition: transform var(--transition);
}
.about-cta__arrow:hover { transform: translateX(2px); }

.about-points {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md);
}
.about-point { display: flex; flex-direction: column; gap: 0.9rem; }
.about-point__icon { display: block; min-height: 40px; color: var(--color-text); }
.about-point__icon svg { width: 34px; height: 34px; display: block; }
.about-point__icon img { width: 40px; height: 40px; object-fit: contain; }
.about-point__text { font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-text); }

@media (max-width: 1024px) {
	.section.section--about { grid-template-columns: 1fr; gap: var(--space-lg); }
	.section--about__panel .section__heading { max-width: none; }
	.section--about__body { padding: 0 0 var(--space-lg); }
}
@media (max-width: 560px) {
	.about-points { grid-template-columns: 1fr 1fr; gap: var(--space-md) 12px; }
	/* This section is its own grid rather than a .container, so it sets
	   the inset by hand. */
	.section.section--about { padding-inline: 13.5px; }
	.about-point { gap: 0.5rem; }
	.about-point__icon { min-height: 0; }
	.about-point__icon svg { width: 28px; height: 28px; }
	.about-point__text { font-size: 16px; line-height: 22px; }
}

/* ---------- Lead block ---------- */

/* Live: heading left, copy and its checklist right. */
.section--lead__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
}
/* The heading is stored with its own line break, which is how live sets
   it over two lines. */
.section--lead__inner .section__heading { margin: 0; white-space: pre-line; }
.section--lead__head { display: grid; gap: 20px; align-content: start; }
/* Split: the heading keeps its copy on the left and the second column
   takes the right. Unsplit, the heading holds the left on its own. */
.section--lead__head .entry-content p {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}
.lead-quote {
	margin: 0;
	font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 500;
	color: var(--color-text);
}
.lead-quote::before { content: "“"; }
.lead-quote::after { content: "”"; }
.section--lead__body { display: grid; gap: 40px; align-content: start; }
.section--lead__body .entry-content p {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}

/* The checklist reads dark here rather than on the awareness card. */
.check-list--dark .check-list__mark { color: var(--color-text); }
.check-list--dark .check-list__text {
	color: var(--color-text); font-weight: 500;
	text-transform: none;
}

@media (max-width: 900px) {
	.section--lead__inner { grid-template-columns: 1fr; row-gap: var(--space-md); }
}

/* Where the lead's points name an icon, live sets them as a two-by-two
   grid rather than a checked list. */
.lead-marks {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px;
	width: 100%;
}
.lead-mark { display: grid; gap: 10px; align-content: start; }
.lead-mark__icon { color: var(--color-text); }
.lead-mark__icon svg { display: block; width: 30px; height: auto; }
.lead-mark__text {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.4;
}

@media (max-width: 560px) { .lead-marks { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Dark panel ---------- */

/* Heading left, the copy and its titled columns right, all on a dark
   band — live's Sustainability block. */
.section--panel { padding-inline: 10px; }
.section--panel__inner {
	background: var(--color-text); color: #fff;
	border-radius: var(--radius-lg);
	padding-block: clamp(3rem, 6vw, 5.5rem);
}
.section--panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
}
.section--panel__grid .section__heading {
	margin: 0; color: #fff; max-width: 12ch;
	/* Stored with its own break, as live sets it over two lines. */
	white-space: pre-line;
}
.section--panel__body { display: grid; gap: 40px; }
.section--panel__body .entry-content p {
	margin: 0; color: rgb(255 255 255 / 0.75);
	font-size: var(--body-size); line-height: 1.56;
}

.panel-points {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}
.panel-point { display: grid; gap: 10px; }
.panel-point__title {
	margin: 0; color: var(--color-accent);
	font-size: var(--body-size); line-height: 1.56; font-weight: 500;
}
.panel-point__text {
	margin: 0; color: rgb(255 255 255 / 0.75);
	font-size: var(--body-size); line-height: 1.56;
}

@media (max-width: 900px) {
	.section--panel__grid { grid-template-columns: 1fr; row-gap: var(--space-md); }
	.section--panel__grid .section__heading { max-width: none; }
	.panel-points { grid-template-columns: 1fr; }
}

/* ---------- Audience ---------- */

/* Copy left, a pair of arched images right. */
.section--audience__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.section--audience__copy { display: grid; gap: 20px; align-content: start; justify-items: start; }
.section--audience__copy .section__heading { margin: 0; }

.audience-list {
	list-style: none; margin: 10px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	width: 100%;
}
.audience { display: grid; gap: 10px; align-content: start; }
.audience__icon img { width: 40px; height: 40px; object-fit: contain; }
.audience__title {
	margin: 0; text-transform: uppercase; letter-spacing: 0.04em;
	font-size: var(--h7-size); line-height: var(--h7-lh); font-weight: 500;
}
.audience__text {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}

/* Live carries the arch shapes inside the artwork itself, so the image
   is placed plainly; a second one would sit beside it. */
.audience-media {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-auto-flow: column; gap: 20px;
}
.audience-media img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
	.section--audience__inner { grid-template-columns: 1fr; row-gap: var(--space-lg); }
}
@media (max-width: 560px) {
	.audience-list { grid-template-columns: 1fr; }
}

/* ---------- Intro ---------- */

/* Copy left, the pull quote and its button right. */
.section--intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 6vw, 100px);
	align-items: start;
}
.section--intro__inner .entry-content { display: grid; gap: 34px; }
.section--intro__inner .entry-content p {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}
.section--intro__aside { display: grid; gap: 40px; justify-items: start; align-content: start; }

.pullquote {
	margin: 0;
	font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 500;
	color: var(--color-text);
}
/* The marks are the accent; the words are not. */
.pullquote::before { content: "“"; color: var(--color-accent); }
.pullquote::after { content: "”"; color: var(--color-accent); }

@media (max-width: 900px) {
	.section--intro__inner { grid-template-columns: 1fr; row-gap: var(--space-lg); }
}

/* ---------- Services ---------- */

/* Copy on the left, a staggered card grid on the right, as live. */
.section--services { background: var(--color-bg); }
/* Live's split at 1536: copy column 519, card block 757 (two 369 cards
   plus their 19px gap), 60px between. Cards any narrower and the
   longer titles wrap, which is what was inflating the card height. */
.section--services__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.69fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.9vw, 60px);
	align-items: start;
}
.section--services__intro .entry-content { color: var(--color-text); max-width: 46ch; }
.section--services__intro .about-cta { margin-top: var(--space-md); }

/* Two independent columns: cards stack 20px apart within a column, and
   the second column is offset 50px. Measured from live. */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; align-items: start; }
.service-column {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 20px;
}
.service-grid > :nth-child(2) { margin-top: 50px; }

/* Measured from live at 1536: 50px padding, 26px radius, a 5% tint of
   the text colour, and hand-set gaps of 20 / 10 / 34. */
.service-card {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 0;
	padding: clamp(1.75rem, 3.25vw, 50px);
	background: rgb(27 27 40 / 0.05);
	border: 0;
	border-radius: 26px;
	transition: background var(--transition), color var(--transition);
}
/* Live fills the card with the accent on hover; it does not move. */
.service-card:hover { background: var(--color-accent); }
.service-card:hover .service-card__text { color: var(--color-on-accent); }

.service-card__icon { width: 50px; height: 50px; display: grid; place-items: center; }
.service-card__icon img,
.service-card__icon svg { width: 100%; height: 100%; object-fit: contain; }

.service-card__title {
	font-size: var(--h5-size); line-height: var(--h5-lh);
	font-weight: 500;
	margin: 20px 0 10px;
}
.service-card__text {
	font-size: var(--body-size, 1.125rem);
	/* Live sets card copy tighter than the Body step: 18/28, a ratio of
	   1.56, against the scale's 2.2. Expressed as a ratio so it still
	   tracks whatever size the scale gives. */
	line-height: 1.56;
	color: rgb(27 27 40 / 0.5);
	margin: 0;
	flex: 1 1 auto;
}

/* A text link with an arrow, not a pill. */
.service-card__link {
	display: inline-flex; align-items: center; gap: 0.6rem;
	margin-top: 34px;
	color: var(--color-text); text-decoration: none;
	font-size: var(--body-size); font-weight: 500;
	transition: gap var(--transition);
}
.service-card__link:hover { gap: 1rem; color: var(--color-text); }

.btn--small { padding-inline: 20px; font-size: calc(var(--button-size, 1rem) * 0.85); height: calc(var(--button-height) * 0.75); }

@media (max-width: 1024px) {
	.section--services__inner { grid-template-columns: 1fr; }
	.service-grid > :nth-child(2) { margin-top: 0; }
}
@media (max-width: 560px) {
	/* Live keeps both columns on mobile — two narrow cards a row, not one
	   wide one — so only the stagger goes. */
	.service-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.service-grid > :nth-child(2) { margin-top: 0; }
	.service-column { gap: 10px; }
}

/* ---------- Industries ---------- */

/* A lime panel with a four-column numbered grid, as live. */
.section.section--industries { padding-block: 0; padding-inline: 15px; }
.section--industries__panel {
	background: var(--color-accent);
	border-radius: var(--radius-lg);
	padding-block: clamp(2.25rem, 4vw, 4.5rem);
	color: var(--color-on-accent);
}
.section--industries__panel .section__heading {
	color: var(--color-on-accent);
	margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.industry-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 3.5rem) clamp(1.5rem, 2.5vw, 3rem);
}
.industry {
	background: none; border: 0; border-radius: 0; padding: 0;
	transition: none;
}
.industry:hover { transform: none; border-color: transparent; }

/* Number followed by a short rule. */
.industry__number {
	display: flex; align-items: center; gap: 0.75rem;
	font-size: var(--h7-size); line-height: 1; font-weight: 500;
	color: var(--color-on-accent);
	margin-bottom: 0.9rem;
}
.industry__number::after {
	content: ""; width: 42px; height: 2px;
	background: var(--color-on-accent);
}

.industry__title {
	font-size: var(--h5-size); line-height: var(--h5-lh);
	font-weight: 500; margin: 0 0 0.9rem;
	color: var(--color-on-accent);
}
.industry__points { list-style: disc; margin: 0; padding-left: 1.15rem; display: grid; gap: 0.3rem; }
.industry__points li { color: var(--color-on-accent); }
.industry__text { color: var(--color-on-accent); margin: 0; }

@media (max-width: 1100px) { .industry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Live keeps these two-up on mobile — ~158px tiles, not full width. */
@media (max-width: 620px)  { .industry-list { gap: 20px 12px; } }

/* ---------- Numbered grid (Sectors we cover) ---------- */

/* Live puts this on the same lime panel the home Industries block uses,
   so it borrows those classes; only the outer spacing differs. */
.section--numbered { padding-inline: 10px; }
.section--numbered__panel { padding-block: clamp(3rem, 6vw, 6.5rem); }
.section--numbered .section__heading { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section--numbered .industry-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Live sets the sector numbers at 16px here — smaller than the heading
   step the home Industries block uses for its own. */
.section--numbered .industry__number { font-size: 16px; }

@media (max-width: 1100px) { .section--numbered .industry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .section--numbered .industry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Live's Location page runs its numbered block as three steps on the
   page ground rather than as the lime panel of sectors: a centred
   heading, a big accent disc holding the number, then the step. */
.section--numbered--steps { padding-inline: 0; padding-block: clamp(3rem, 5vw, 5.5rem); }
.section--numbered--steps .section--numbered__panel {
	background: none; color: var(--color-text); border-radius: 0; padding-block: 0;
}
.section--numbered--steps .section__heading {
	text-align: center; color: var(--color-text);
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	font-size: var(--h2-size); line-height: 1.27;
}
.section--numbered--steps .industry-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
}
.section--numbered--steps .industry {
	display: grid; gap: 20px; justify-items: center; text-align: center;
}
.section--numbered--steps .industry__number {
	display: grid; place-items: center;
	width: 130px; height: 130px; border-radius: 50%;
	background: var(--color-accent); color: var(--color-on-accent);
	font-size: 48px; line-height: 1; font-weight: 500;
}
.section--numbered--steps .industry__number::after { content: none; }
.section--numbered--steps .industry__title {
	margin: 0; color: var(--color-text);
	font-size: var(--h7-size); line-height: 1.33; font-weight: 500;
	text-transform: uppercase;
}
.section--numbered--steps .industry__text,
.section--numbered--steps .industry__points li {
	color: rgb(0 0 0 / 0.6);
	font-size: var(--body-size); line-height: 1.56;
}
.section--numbered--steps .industry__points { list-style: none; padding: 0; }

@media (max-width: 900px) { .section--numbered--steps .industry-list { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- How we work ---------- */

/* Live: a centred heading over three centred steps. The step's number
   is part of its uploaded graphic, and the row is inset from the
   container (1144 of 1346) so the columns sit closer together. */
.section__heading--center { text-align: center; }

.work-steps {
	list-style: none; margin: 50px auto 0; padding: 10px;
	max-width: 85%;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px;
}
.work-step {
	display: flex; flex-direction: column; gap: 20px;
	text-align: center;
}
.work-step__badge { display: flex; justify-content: center; }
.work-step__badge img { width: 174px; height: 174px; object-fit: contain; }
.work-step__title {
	margin: 0;
	font-size: var(--h5-size); line-height: var(--h5-lh); font-weight: 500;
}
/* Body leading is set for running prose; these short centred blurbs
   follow live's tighter ratio. */
.work-step__text {
	margin: 0; color: var(--color-muted);
	font-size: var(--body-size); line-height: 1.56;
}

@media (max-width: 900px) {
	.work-steps { max-width: 100%; grid-template-columns: 1fr; gap: var(--space-lg); }
	.work-step__badge img { width: 130px; height: 130px; }
}
@media (max-width: 600px) {
	/* Live turns each step on its side: the badge to the left of an
	   uppercase title and its blurb, all left aligned. The badge spans
	   both rows, so no extra markup is needed for the pairing. */
	.section--how-we-work .section__heading--center { text-align: left; }
	.work-steps { gap: 40px; padding: 0; margin-top: 32px; }
	.work-step {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr);
		column-gap: 20px; row-gap: 4px;
		align-items: start; text-align: left;
	}
	.work-step__badge { grid-row: 1 / span 2; }
	.work-step__badge img { width: 80px; height: 80px; }
	.work-step__title {
		font-size: 17px; line-height: 24px; font-weight: 600;
		text-transform: uppercase; letter-spacing: 0.3px;
	}
}

/* ---------- Process steps ---------- */

/* Live: the label and heading hold the left of the panel head with the
   button opposite, then the steps below in a three-column grid. */
.section--process__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 20px; align-items: center;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section--process__intro .section__eyebrow {
	margin-bottom: 10px;
	font-size: var(--body-size); font-weight: 400; letter-spacing: normal;
}
.section--process__intro .section__heading {
	margin: 0; font-size: var(--h4-size); line-height: 1.33;
}
.section--process__cta { justify-self: end; }

.process-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 100px; row-gap: 70px;
}
.process-step { display: grid; gap: 20px; align-content: start; }

/* The number opens the step beside a short rule. */
.process-step__number {
	display: flex; align-items: center; gap: 20px;
	margin: 0; font-size: 16px; line-height: 1.75; font-weight: 400;
}
.process-step__rule { width: 31px; height: 3px; background: currentColor; }

.process-step__title {
	margin: 0; text-transform: uppercase;
	font-size: var(--body_large-size); line-height: 1.42; font-weight: 500;
}

.process-step__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.process-step__points__item {
	position: relative; padding-left: 24px;
	font-size: var(--body-size); line-height: 1.56;
}
/* Live's marker is a small triangle falling away to the right. */
.process-step__points__item::before {
	content: ""; position: absolute; left: 0; top: 0.45em;
	width: 12px; height: 11px;
	background: currentColor; opacity: 0.6;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
}

@media (max-width: 1100px) {
	.process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 50px; }
}
@media (max-width: 900px) {
	.section--process__head { grid-template-columns: 1fr; row-gap: var(--space-md); }
	.section--process__cta { justify-self: start; }
}
@media (max-width: 620px) {
	.process-steps { grid-template-columns: minmax(0, 1fr); row-gap: 50px; }
}

/* ---------- Why choose us ---------- */

.section--why-us { background: var(--color-bg); }
.section--why-us__inner {
	/* display: grid; */
	/* flow-root contains the floated list. Without it the float escapes
	   the container and overlaps the sections below. */
	display: flow-root;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: clamp(2rem, 4vw, 5rem);
	align-items: start;
}
.section--why-us__inner .section__heading { margin: 0; }
@media (min-width: 1101px) {
	.section--why-us__inner .section__heading { white-space: nowrap; }
}


.reason-list {
	list-style: none;
	margin: 0;
	padding: 50px 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(2rem, 4vw, 4rem);
	width: 80%;
	float: right;
}
/* A rule above every entry, as live. */
.reason {
	border-top: 1px solid var(--color-border);
	padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}
/* The icon sits beside the title; the copy below starts from the
   title's left edge, not the icon's. */
.reason { --reason-indent: 72px; }   /* 57px icon + 15px gap */
.reason__head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 0.9rem; }
.reason__icon { flex: 0 0 57px; display: grid; place-items: center; }
.reason__icon svg,
.reason__icon img { width: 57px; height: 57px; object-fit: contain; }
.reason__title {
	margin: 0;
	font-size: var(--h7-size); line-height: var(--h7-lh);
	font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
	color: var(--color-text);
}
.reason__text { margin: 0; padding-left: var(--reason-indent); color: var(--color-muted); }

@media (max-width: 1100px) {
	.section--why-us__inner { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	/* The float and the 80% width are the desktop arrangement; live stacks
	   the reasons full width on mobile. Dropping only the columns left the
	   list floating at 80%, three times taller than it should be. */
	.reason-list {
		float: none;
		width: 100%;
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px 0 0;
	}
	/* On one column the title sits beside the icon rather than wrapping
	   under it, so centring the pair reads better than a top edge. */
	.reason__head { align-items: center; }
}

/* ---------- Icon boxes (other archetypes) ---------- */

.icon-box {
	padding: var(--space-md); border-radius: 20px;
	background: var(--color-bg); border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform var(--transition);
}
.icon-box:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.icon-box__icon { width: 48px; height: 48px; object-fit: contain; margin-bottom: 0.75rem; }
.icon-box__title { font-size: var(--step-1); font-weight: 500; margin: 0 0 0.4rem; }
.icon-box__text { color: var(--color-muted); margin: 0; }

/* ---------- Two-column blocks ---------- */

/* Live: the photograph holds the left half, the heading, copy, benefits
   and button the right. */
.section--why-choose__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.section--why-choose__media img {
	display: block; width: 100%; border-radius: 20px;
}
.section--why-choose__body { display: grid; gap: 20px; align-content: start; justify-items: start; }
.section--why-choose__body .section__heading {
	margin: 0; font-size: var(--h4-size); line-height: 1.33;
}
.section--why-choose__body .entry-content p {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}
.section--why-choose__body .entry-content p + p { margin-top: 1em; }

.benefit-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 15px; width: 100%;
}
.benefit { display: flex; align-items: center; gap: 11px; }
.benefit__mark { flex: 0 0 auto; display: flex; color: var(--color-text); }
.benefit__mark svg { display: block; width: 24px; height: 25px; }
.benefit__text { font-size: var(--body-size); line-height: 1.56; }

@media (max-width: 900px) {
	.section--why-choose__inner { grid-template-columns: 1fr; row-gap: var(--space-lg); }
}

/* ---------- Awareness ---------- */

/* Live: copy left, a square photo right, and a dark card pulled 150px
   up over the photo's lower-left corner. The card sits in its own grid
   row spanning both columns, so the overlap is a negative margin rather
   than absolute positioning and the section still grows with its
   content. */
.section--awareness__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 0;
	align-items: start;
}

.section--awareness__copy {
	grid-area: 1 / 1;
	/* No left padding: the card below lines up with this column's edge.
	   50px puts the eyebrow 40px below the photo's top, as on live. */
	padding: 50px 15px 0 0;
	display: grid; gap: 20px; align-content: start;
}
.section--awareness__copy .section__eyebrow,
.section--awareness__copy .section__heading { margin: 0; }
/* Live runs this heading at 45/60 — the h4 step, not the section
   default — so it holds two lines beside the photo. */
.section--awareness__copy .section__heading {
	font-size: var(--h4-size); line-height: var(--h4-lh);
}
.section--awareness__copy .entry-content { display: grid; gap: 20px; color: var(--color-muted); }
.section--awareness__copy .entry-content p { margin: 0; font-size: var(--body_large-size); line-height: var(--body_large-lh); }

.section--awareness__media { grid-area: 1 / 2; padding: 10px 0 10px 10px; }
.section--awareness__media img {
	display: block; width: 100%; height: auto;
	border-radius: var(--radius-lg);
}

.section--awareness__card {
	grid-area: 2 / 1 / 3 / -1;
	position: relative; z-index: 2;
	width: 60%;
	margin: -150px 0 0;
	padding: 70px 35px;
	background: var(--color-text); color: #fff;
	border-radius: var(--radius-lg);
	display: grid; gap: 30px; justify-items: start;
}

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.check-list__item { display: flex; align-items: center; gap: 18px; }
.check-list__mark { flex: 0 0 29px; display: grid; place-items: center; color: #fff; }
.check-list__mark svg { display: block; width: 29px; height: 29px; }
/* A checklist row is one line, so it wants tighter leading than the
   Body line-height, which is set for running prose. Live title-cases
   these in CSS rather than in the content. */
.check-list__text {
	font-size: var(--body-size); line-height: 1.45; color: #fff;
	text-transform: capitalize;
}

@media (max-width: 1024px) {
	.section--awareness__inner { grid-template-columns: minmax(0, 1fr); }
	.section--awareness__copy { grid-area: 1 / 1; padding: 0; }
	.section--awareness__media { grid-area: 2 / 1; padding: 20px 0 0; }
	.section--awareness__card {
		grid-area: 3 / 1;
		width: auto;
		margin: -60px 16px 0;
		padding: clamp(2rem, 6vw, 3rem) clamp(1.25rem, 4vw, 2rem);
	}
}

@media (max-width: 600px) {
	.section--awareness__media img { border-radius: 0; aspect-ratio: 1; object-fit: cover; }
	.section--awareness__card {
		width: 90%;
		margin: -100px auto 0;
		padding: 15px;
		border-radius: 10px;
		gap: 18px;
	}
	.check-list { gap: 20px; }
	.check-list__item { align-items: flex-start; gap: 12px; }
	.check-list__mark { flex-basis: 24px; }
	.check-list__mark svg { width: 24px; height: 24px; }
}

/* ---------- Testimonials ---------- */

/* Live: eyebrow and heading on the left, arrows on the right, and a
   slider of tinted cards below that advances one card at a time. */
.section--testimonials {
	/* The card tint is this section's alone — a lime wash, not the
	   green-white --color-surface used for full-width bands. */
	--testimonial-tint: #f5fbe4;
}

.section--testimonials__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: 20px;
}
.section--testimonials__intro { display: grid; gap: 20px; }
.section--testimonials__intro .section__heading { margin: 0; }
/* Live sets this one as a plain sentence-case line, not the site's
   small uppercase label. */
.section__eyebrow--plain {
	margin: 0;
	font-size: var(--body_large-size); line-height: var(--body_large-lh);
	letter-spacing: normal; text-transform: none;
	color: rgb(27 27 40 / 0.5);
}

.slider-nav { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.slider-nav__btn {
	display: grid; place-items: center;
	width: 65px; height: 65px; padding: 0;
	background: none; border: 0; border-radius: 50%;
	color: var(--color-text); cursor: pointer;
	transition: color var(--transition), transform var(--transition);
}
.slider-nav__btn:hover { color: var(--color-accent-dark); transform: scale(1.05); }
/* The review arrows draw their own ring, so the icon fills the button —
   at any smaller size the circle floats inside a dead margin. */
.slider-nav__btn svg { display: block; width: 100%; height: 100%; }

.section--testimonials .container { --slide-per-view: var(--testimonials-per-view, 3); }
.testimonial-slider__viewport {
	width: 100%; overflow: hidden; cursor: grab;
	touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.testimonial-slider__viewport.is-dragging { cursor: grabbing; }
.testimonial-slider__viewport.is-dragging .testimonials { transition: none; }

.testimonials {
	width: max-content;
	list-style: none; margin: 0; padding: 10px 0;
	display: flex; align-items: stretch;
	transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
/* Used by the script for the invisible wrap. */
.testimonials.is-resetting { transition: none; }

.testimonials__item {
	flex: 0 0 auto;
	width: var(--slide-item-width, calc(100% / var(--testimonials-per-view, 3)));
	padding-inline: 10px;
	display: flex;
}

.testimonial {
	flex: 1 1 auto;
	display: flex; flex-direction: column; gap: 20px;
	margin: 0; padding: 30px;
	background: var(--testimonial-tint);
	border-radius: 40px;
}
.testimonial__mark img { display: block; width: 29px; height: auto; }
/* The quote and rating clear the quote mark's indent. */
.testimonial__quote {
	margin: 0; padding-left: 40px;
	font-size: var(--body_large-size); line-height: var(--body_large-lh);
	flex: 1 1 auto;
}
.testimonial__rating { padding-left: 40px; }
.testimonial__rating img { display: block; width: 129px; height: auto; }

.testimonial__meta { display: flex; align-items: center; gap: 20px; margin-top: 20px; }
.testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; }
.testimonial__who { flex: 1 1 auto; }
.testimonial__author { margin: 0; font-weight: 500; }
.testimonial__date {
	margin: 0; color: var(--color-muted);
	font-size: var(--body-size); line-height: 1.56;
}
.testimonial__source { width: 61px; height: 61px; object-fit: contain; flex: 0 0 auto; }

/* Before the script runs — and if it never does — the row stays a plain
   scrollable strip rather than an overflowing block. */
.section--testimonials .container:not(.is-ready) .testimonial-slider__viewport { overflow-x: auto; scrollbar-width: none; }
.section--testimonials .container:not(.is-ready) .testimonial-slider__viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.testimonials { transition: none; }
}

@media (max-width: 1100px) { :root { --testimonials-per-view: 2; } }
@media (max-width: 760px) {
	:root { --testimonials-per-view: 1; }
	.section--testimonials__head { flex-direction: column; align-items: flex-start; }
	.testimonial { border-radius: 30px; padding: 24px; }
	/* Touch swipes the row, so the arrows are redundant — and stacked
	   under the heading they read as stray buttons. */
	.slider-nav { display: none; }
}

/* ---------- Cities ---------- */

/* Live: plain outlined pills at body size, sentence case. */
.section--cities .section__eyebrow { margin-bottom: 20px; }
.section--cities .section__heading { margin-bottom: 0; }

.city-list {
	list-style: none; margin: 40px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 15px;
}
.city-list__item {
	padding: 9px 16px; border-radius: var(--radius-pill);
	background: var(--color-bg); border: 1px solid var(--color-border);
	font-size: var(--body-size); line-height: 1.56;
	letter-spacing: normal; text-transform: none;
	transition: background-color var(--transition), border-color var(--transition);
}
/* Live fills the pill on hover, border and all, so the outline
   disappears into the accent rather than ringing it. */
.city-list__item:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* ---------- Client logos ---------- */

/* One line, stepped a logo at a time by the shared step slider (see
   assets/js/main.js). --logos-per-view is how many are on screen; the
   script converts it to a pixel width so the count holds at any size. */
.section--logos { padding-block: clamp(2rem, 4vw, 4.5rem); }

.logo-slider { --slide-per-view: var(--logos-per-view, 6); }
.logo-slider__viewport {
	width: 100%; overflow: hidden; cursor: grab;
	touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.logo-slider__viewport.is-dragging { cursor: grabbing; }
.logo-slider__viewport.is-dragging .logo-strip { transition: none; }

.logo-strip {
	width: max-content;
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center;
	transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
/* Used by the script for the invisible wrap. */
.logo-strip.is-resetting { transition: none; }

.logo-strip__item {
	flex: 0 0 auto;
	width: var(--slide-item-width, calc(100% / var(--logos-per-view, 6)));
	display: grid; place-items: center;
	min-height: 110px;
	padding-inline: clamp(0.75rem, 1.5vw, 2rem);
}
.logo-strip__item img {
	max-height: 110px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	transition: transform var(--transition);
}
.logo-strip__item:hover img { transform: scale(1.06); }

/* Before the script runs — and if it never does — the row stays a
   plain scrollable strip rather than an overflowing block. */
.logo-slider:not(.is-ready) .logo-slider__viewport { overflow-x: auto; scrollbar-width: none; }
.logo-slider:not(.is-ready) .logo-slider__viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.logo-strip { transition: none; }
}

@media (max-width: 1200px) { :root { --logos-per-view: 5; } }
@media (max-width: 900px) {
	:root { --logos-per-view: 4; }
	.logo-strip__item, .logo-strip__item img { min-height: 80px; max-height: 80px; }
}
@media (max-width: 560px) { :root { --logos-per-view: 2; } }

/* ---------- FAQ ---------- */

/* Live: the heading sits in a narrow left column with the questions
   beside it, each a hairline-separated row that opens in place. */
.section--faq__inner {
	display: grid;
	grid-template-columns: minmax(0, 309fr) minmax(0, 1037fr);
	align-items: start;
}
.section--faq__inner .section__heading { margin: 0; }

.faq { display: grid; row-gap: 25px; }
.faq__item {
	border-bottom: 1px solid rgb(20 20 20 / 0.3);
	padding-block: 20px;
}
/* 20px question over an 18px answer, both in the body colour. No Type
   Scale row lands on these, so they are set here and stepped down at
   the narrower breakpoints below. */
.faq__question {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
	font-size: 20px; line-height: 1.5; font-weight: 500;
	color: var(--color-text);
}
.faq__question::-webkit-details-marker { display: none; }

/* The plus loses its vertical stroke to become a minus; both are drawn
   in the same box so nothing shifts when the row opens. */
.faq__mark {
	position: relative; flex: 0 0 27px;
	width: 27px; height: 27px;
}
.faq__mark::before,
.faq__mark::after { content: ""; position: absolute; background: #141414; }
.faq__mark::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.faq__mark::after {
	top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
	transition: opacity var(--transition);
}
.faq__item[open] .faq__mark::after { opacity: 0; }

.faq__answer {
	padding: 16px 60px 0 0;
	color: var(--color-text);
	font-size: 18px; line-height: 1.56;
}
.faq__answer > :first-child { margin-top: 0; }
.faq__answer > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.city-list { gap: 10px; margin-top: 24px; }
	.city-list__item { padding: 6px 12px; font-size: 16px; }
}

@media (max-width: 900px) {
	.section--faq__inner { grid-template-columns: 1fr; gap: var(--space-md); }
	.faq__question { font-size: 18px; }
	.faq__answer { font-size: 17px; padding-right: 20px; }
}
@media (max-width: 560px) {
	.faq__question { font-size: 17px; }
	.faq__answer { font-size: 16px; padding-right: 0; }
}

/* ---------- Blogs ---------- */

/* Live: the heading and the arrows hold a narrow left column while the
   copy, button and card row fill the rest. The row runs off the right
   edge of the window, so the next card is always part-visible. */
.section--blogs__inner {
	--slide-per-view: var(--blogs-per-view, 2.62);
	display: grid;
	grid-template-columns: minmax(0, 309fr) minmax(0, 1037fr);
	align-items: start;
	overflow: hidden;
}
.section--blogs__aside {
	display: flex; flex-direction: column; justify-content: space-between;
	align-self: stretch;
	padding-bottom: 15px;
}
.section--blogs__aside .section__heading { margin: 0; }
.section--blogs__main { display: grid; gap: 30px; justify-items: start; }
.section--blogs__intro {
	margin: 0;
	font-size: var(--body-size); line-height: 1.56;
}

/* The blog arrows are the other way round: a plain glyph inside a ring
   the button draws itself. */
.slider-nav__btn--sm {
	width: 58px; height: 58px;
	border: 1px solid var(--color-text);
	padding: 18px;
}
.slider-nav__btn--sm:hover { border-color: var(--color-accent-dark); }
.slider-nav__btn--sm svg { width: 20px; height: 20px; }

.blog-slider__viewport {
	/* Bleed to the window's right edge: the container is centred, so the
	   gap to spill into is half the difference. Clamped at 0 so it does
	   nothing once the container fills the window. */
	width: calc(100% + max(0px, (100vw - min(var(--container), 90vw)) / 2));
	overflow: hidden; cursor: grab;
	touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.blog-slider__viewport.is-dragging { cursor: grabbing; }
.blog-slider__viewport.is-dragging .blog-slider__track { transition: none; }

.blog-slider__track {
	width: max-content;
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: stretch;
	transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
/* Used by the script for the invisible wrap. */
.blog-slider__track.is-resetting { transition: none; }

.blog-slider__item {
	flex: 0 0 auto;
	width: var(--slide-item-width, 424px);
	padding-right: 36px;
	display: flex;
}

.blog-card {
	position: relative; flex: 1 1 auto;
	min-height: 498px;
	border-radius: 33px; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	isolation: isolate;
}
.blog-card__image {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 600ms ease;
}
.blog-card:hover .blog-card__image { transform: scale(1.05); }
/* The photos are light in places, so the white title needs a wash. */
.blog-card::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgb(20 20 20 / 0.75) 0%, rgb(20 20 20 / 0.25) 55%, rgb(20 20 20 / 0.1) 100%);
}
.blog-card__body { display: grid; gap: 10px; padding: 0 50px 70px; }
.blog-card__title {
	margin: 0;
	font-size: var(--h5-size); line-height: var(--h5-lh); font-weight: 500;
}
.blog-card__title a { color: #fff; text-decoration: none; }
.blog-card__title a:hover { text-decoration: underline; }
.blog-card__rule { display: block; height: 4px; background: #fff; }
.blog-card__arrow { display: block; margin-top: 15px; color: #fff; }
.blog-card__arrow svg { display: block; width: 44px; height: 44px; }

/* Before the script runs — and if it never does — the row stays a plain
   scrollable strip rather than an overflowing block. */
.section--blogs__inner:not(.is-ready) .blog-slider__viewport { overflow-x: auto; scrollbar-width: none; }
.section--blogs__inner:not(.is-ready) .blog-slider__viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.blog-slider__track { transition: none; }
}

@media (max-width: 1100px) { :root { --blogs-per-view: 1.8; } }
@media (max-width: 760px) {
	:root { --blogs-per-view: 1.15; }
	.section--blogs__inner { grid-template-columns: 1fr; gap: var(--space-md); }
	.section--blogs__aside { flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 0; }
	.section--blogs .slider-nav { display: none; }
	.blog-card { min-height: 400px; }
	.blog-card__body { padding: 0 30px 40px; }
}

/* ---------- Blog listing ---------- */

/* Live: a column of sideways cards with a sidebar beside them. */
.section--blog-archive__inner {
	display: grid;
	grid-template-columns: minmax(0, 988fr) minmax(0, 317fr);
	gap: 22px;
	align-items: start;
}
.blog-main { display: grid; gap: 22px; }
/* main.css turns .post-list into an auto-fill grid above 700px, which
   squeezed these sideways cards into one column's width. Here they are
   a single stack. */
.section--blog-archive .post-list {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
}

.post-card {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	align-items: stretch;
	background: var(--color-bg);
	border-radius: 20px;
	box-shadow: 0 6px 24px rgb(27 27 40 / 0.06);
	overflow: hidden;
}
.post-card__media { position: relative; }
.post-card__media img {
	width: 100%; height: 100%; min-height: 220px;
	object-fit: cover; display: block;
}
/* The category rides on the image, as live has it. */
.post-card__tag {
	position: absolute; top: 20px; left: 20px;
	padding: 5px 12px; border-radius: var(--radius-pill);
	background: #fff; color: var(--color-text);
	font-size: 15px; line-height: 1.6; text-decoration: none;
	box-shadow: 0 2px 8px rgb(27 27 40 / 0.12);
}
.post-card__tag:hover { background: var(--color-accent); }

.post-card__body { padding: 20px; display: grid; align-content: start; gap: 10px; }
.post-card__meta {
	margin: 0; display: flex; gap: 20px;
	font-size: 14px; line-height: 28px; color: var(--color-text);
}
.post-card__title { margin: 0; font-size: 24px; line-height: 34px; font-weight: 500; }
.post-card__title a { color: var(--color-text); text-decoration: none; }
.post-card__title a:hover { color: var(--color-accent-dark); }
.post-card__excerpt { margin: 0; font-size: 16px; line-height: 28px; color: var(--color-text); }
/* A rule separates the excerpt from the link below it. */
.post-card__more {
	margin: 10px 0 0; padding-top: 18px;
	border-top: 1px solid var(--color-border);
}
.post-card__more a {
	color: var(--color-text); text-decoration: none;
	font-size: 16px; font-weight: 500;
}
.post-card__more a:hover { color: var(--color-accent-dark); }

/* ---------- Blog sidebar ---------- */

.blog-sidebar { display: grid; gap: 22px; align-content: start; }
.widget { background: #f8f8f8; border-radius: 20px; padding: 30px; }
.widget--dark { background: var(--color-text); color: #fff; }
.widget__title { margin: 0 0 16px; font-size: 24px; line-height: 34px; font-weight: 500; }

.widget__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.widget__list a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 6px 0;
	color: inherit; text-decoration: none;
	font-size: 18px; line-height: 28px;
}
.widget__list a:hover { color: var(--color-accent); }
.widget__list svg { flex: 0 0 14px; }

.widget__recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.widget__recent li { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.widget__recent li:last-child { padding-bottom: 0; border-bottom: 0; }
.widget__recent-meta {
	margin: 0; display: flex; gap: 12px; flex-wrap: wrap;
	font-size: 12px; line-height: 20px; color: var(--color-muted);
}
.widget__recent a { color: var(--color-muted); text-decoration: none; font-size: 15px; line-height: 24px; }
.widget__recent a:hover { color: var(--color-text); }

.widget__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.widget__tags a {
	display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill);
	background: var(--color-bg); border: 1px solid var(--color-border);
	color: var(--color-text); text-decoration: none; font-size: 14px;
}
.widget__tags a:hover { background: var(--color-accent); border-color: var(--color-accent); }

.widget .social-links { gap: 12px; }
.widget .social-links__link { width: 34px; height: 34px; }
.widget .social-links__icon { width: 34px; height: 34px; }

@media (max-width: 1024px) {
	.section--blog-archive__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.post-card { grid-template-columns: 1fr; }
	.post-card__media img { min-height: 200px; }
	.post-card__title { font-size: 20px; line-height: 28px; }
}

/* ---------- Single post ---------- */

/* The post shares the listing's two columns: article left, same sidebar
   right. */
.section--post-title .container { text-align: left; }

.post-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
	margin: 16px 0 0;
	font-size: 16px; line-height: 28px; color: var(--color-text);
}
.post-meta__tag {
	padding: 4px 14px; border-radius: var(--radius-pill);
	background: var(--color-accent); color: var(--color-on-accent);
	text-decoration: none; font-size: 15px;
}
.post-meta__tag:hover { background: var(--color-accent-dark); }
.post-meta__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-text); }

.single-post__thumbnail { margin: 0 0 var(--space-lg); }
.single-post__thumbnail img {
	display: block; width: 100%; height: 500px;
	object-fit: cover; border-radius: var(--radius-lg);
}

.single-post .entry-content { font-size: 18px; line-height: 28px; color: var(--color-text); }
.single-post .entry-content h2,
.single-post .entry-content h3 {
	font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 500;
	margin: var(--space-lg) 0 var(--space-sm);
}
.single-post .entry-content p { margin: 0 0 var(--space-sm); }
.single-post .entry-content img { border-radius: var(--radius-lg); }
.single-post .entry-content ul,
.single-post .entry-content ol { margin: 0 0 var(--space-sm); padding-left: 1.4rem; }

/* ---- Post to post ---- */

.post-nav {
	display: flex; justify-content: space-between; gap: var(--space-md);
	margin-top: var(--space-xl); padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}
.post-nav__link { display: grid; gap: 4px; text-decoration: none; max-width: 45%; }
.post-nav__link--next { text-align: right; margin-left: auto; }
.post-nav__label {
	font-size: 18px; color: var(--color-text);
	display: inline-flex; align-items: center; gap: 8px;
}
.post-nav__link--prev .post-nav__label::before { content: "←"; }
.post-nav__link--next .post-nav__label::after { content: "→"; }
.post-nav__title { font-size: 15px; line-height: 24px; color: var(--color-muted); }
.post-nav__link:hover .post-nav__title { color: var(--color-text); }

/* ---- Related ---- */

.section--related-posts__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-md); flex-wrap: wrap;
	margin-bottom: var(--space-lg);
}
.section--related-posts__head .section__heading { margin: 0; }

.related-posts {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}
.related-posts .blog-card { min-height: 380px; }
.related-posts .blog-card__body { padding: 0 24px 28px; }
.related-posts .blog-card__title { font-size: var(--h7-size); line-height: var(--h7-lh); }

@media (max-width: 1024px) {
	.related-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.single-post__thumbnail img { height: 340px; }
}
@media (max-width: 620px) {
	.related-posts { grid-template-columns: minmax(0, 1fr); }
	.post-nav { flex-direction: column; }
	.post-nav__link, .post-nav__link--next { max-width: none; text-align: left; margin-left: 0; }
	.single-post__thumbnail img { height: 240px; }
}

/* ---------- Card grid (Why pick us) ---------- */

/* Live centres the head over a row of numbered cards on a light ground. */
.section--cards { background: var(--color-bg); }
.section--cards .section__heading,
.section--cards .section__eyebrow { text-align: center; }
/* Live runs this head smaller than a section heading, on two lines. */
.section--cards .section__heading {
	font-size: var(--h5-size); line-height: 1.43;
	max-width: 15ch; margin-inline: auto;
}
.section--cards .entry-content {
	max-width: 78ch; margin-inline: auto; text-align: center;
	color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}

.card-grid {
	list-style: none; margin: var(--space-lg) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.reason-card {
	height: 100%;
	background: rgb(27 27 40 / 0.05); border-radius: 20px;
	padding: 30px;
	display: grid; gap: 18px; align-content: start;
}
.reason-card__number {
	margin: 0; font-size: 30px; line-height: 28px; font-weight: 500;
	color: var(--color-accent);
}
.reason-card__icon img { width: 40px; height: 40px; object-fit: contain; }
.reason-card__title {
	margin: 0;
	font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 500;
}
.reason-card__text {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}

@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Service banner and its enquiry card ---------- */

/* Live runs a photograph the full width behind the breadcrumb and title,
   with the accent card pulled up over its foot. */
.single-service .section--hero {
	min-height: 620px;
	border-radius: var(--radius-lg);
	padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
	display: flex; align-items: center;
	text-align: left;
}
.single-service .section--hero .container { text-align: left; }
.single-service .section--hero__title {
	margin: 0; max-width: none; white-space: normal;
	font-size: var(--h1-size); line-height: 1;
}
.single-service .breadcrumbs { margin-bottom: var(--space-sm); font-size: 16px; }

/* The card sits over the banner, so the section itself has no height of
   its own to speak of. */
.section--form { padding-block: 0; }
.section--form__card {
	position: relative; z-index: 2;
	/* Live rides the card 170px over the banner's foot. */
	margin-top: -170px;
	padding: clamp(2rem, 5vw, 75px) clamp(1.5rem, 10vw, 148px);
	background: var(--color-accent); color: var(--color-on-accent);
	border-radius: 50px;
	/* The white edge is what separates the card from the banner it sits
	   over, rather than the two colours meeting directly. */
	border: 10px solid #ffffff;
}
.section--form__heading {
	margin: 0 0 40px;
	text-align: center;
	font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 500;
}

/* Three controls across, then the button centred under them. */
.form--inline .form__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.form--inline .form__row--full { grid-column: auto; }
.form--inline .select { font-size: 16px; }
.form--inline .form__control,
.form--inline .select__button {
	height: 54px;
	background: transparent; color: var(--color-on-accent);
	border: 1px solid rgb(27 27 40 / 0.35); border-radius: 12px;
	padding-inline: 18px;
	font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
}
.form--inline .select__panel { letter-spacing: normal; text-transform: none; }
.form--inline .form__control::placeholder { color: var(--color-on-accent); opacity: 1; }
.form--inline .form__control:focus,
.form--inline .select__button:focus { border-color: var(--color-on-accent); outline: none; }
.form--inline .form__row > .select { width: 100%; }
.form--inline .select__panel { color: var(--color-text); }
.form--inline .phone-field { gap: 10px; }
.form--inline .phone-field .select { flex: 0 0 7rem; }
.form--inline .form__error { color: #8a2b1c; }

.form--inline .form__submit {
	margin: 31px auto 0; width: fit-content;
}
/* Nothing is reserved for the error line here — it would add a band of
   empty card under the fields. It still takes its space when it speaks. */
.form--inline .form__error { min-height: 0; }
.form--inline .form__error:empty { display: none; }
/* Same for the status line, which otherwise leaves a band of card below
   the button before it has anything to say. */
.form--inline .form__status { margin-top: 0; text-align: center; }
.form--inline .form__status:empty { display: none; }
/* Dark button with accent type, the reverse of the card. */
.form--inline .form__submit .btn { background: var(--color-text); color: var(--color-accent); }
.form--inline .form__submit .btn:hover { background: #000; }
.form--inline .about-cta__arrow { background: var(--color-text); color: var(--color-accent); pointer-events: none; }
.form--inline .form__status { text-align: center; }

@media (max-width: 900px) {
	.single-service .section--hero { min-height: 420px; }
	.form--inline .form__grid { grid-template-columns: minmax(0, 1fr); }
	.section--form__card { margin-top: -60px; border-radius: 30px; }
}

/* ---------- Why we are best ---------- */

/* Heading and copy hold the left half; the selling points sit opposite
   as a two-by-two grid of line icons. */
.section--why-best__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.section--why-best__copy { display: grid; gap: 20px; align-content: start; justify-items: start; }
.section--why-best__copy .section__heading { margin: 0; }
.section--why-best__copy .entry-content p {
	margin: 0; color: rgb(27 27 40 / 0.8);
	font-size: var(--body-size); line-height: 1.56;
}
.section--why-best__copy .entry-content p + p { margin-top: 1em; }

.best-points {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 50px;
}
.best-point { display: grid; gap: 10px; align-content: start; }
.best-point__icon { color: var(--color-text); }
.best-point__icon svg { display: block; width: 40px; height: 40px; }
.best-point__text {
	margin: 0; color: var(--color-text);
	font-size: var(--body-size); line-height: 1.4;
}

@media (max-width: 900px) {
	.section--why-best__inner { grid-template-columns: 1fr; row-gap: var(--space-lg); }
	.best-points { gap: 30px; }
}
@media (max-width: 480px) {
	.best-points { grid-template-columns: 1fr; }
}

/* ---------- Service page panels ---------- */

/* Live sets three of a service page's blocks on panels: What We Do and
   the FAQ in the accent, the cities in the dark. The sections keep their
   own markup; only the ground changes. */
/* The ground is on the section itself, so the inset has to be a margin:
	 as padding it would sit inside the colour and show nothing. The
	 cities band is the exception — live runs that one edge to edge. */
.single-service .section--process,
.single-service .section--faq { margin-inline: 10px; }

.single-service .section--process {
	background: var(--color-accent); color: var(--color-on-accent);
	border-radius: var(--radius-lg);
}
.single-service .section--process .section__heading,
.single-service .section--process .section__eyebrow { color: var(--color-on-accent); }
/* The button reverses the panel: dark ground, accent type. */
.single-service .section--process .btn,
.single-service .section--process .about-cta__arrow {
	background: var(--color-text); color: var(--color-accent);
}
.single-service .section--process .btn:hover { background: #000; }

.single-service .section--faq {
	background: var(--color-accent);
	border-radius: var(--radius-lg);
	padding-inline: clamp(1.5rem, 4vw, 4rem);
}
.single-service .section--faq .faq__item { border-bottom-color: rgb(27 27 40 / 0.25); }

/* Live runs this one full width with square corners. */
.single-service .section--cities {
	background: var(--color-text); color: #fff;
	padding-block: 88px;
}
.single-service .section--cities .section__heading {
	color: #fff; font-size: var(--h4-size); line-height: 1.33;
}
.single-service .section--cities .section__eyebrow { color: rgb(255 255 255 / 0.6); }
.single-service .section--cities .city-list__item {
	background: transparent; border-color: rgb(255 255 255 / 0.3); color: #fff;
}
.single-service .section--cities .city-list__item:hover {
	background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent);
}

/* ---------- Other services ---------- */

/* Live: a centred head over a row of four cards that advances on its
   own. The cards carry the photograph as their ground with the label
   sitting at the foot. */
.section--related .container { --slide-per-view: 4; }
.section--related__head { text-align: center; margin-bottom: var(--space-lg); }
.section--related__head .section__eyebrow,
.section--related__head .section__heading { text-align: center; }
.section--related__head .section__eyebrow {
	margin-bottom: 20px; color: #8b8989;
	font-size: 16px; font-weight: 400; letter-spacing: normal;
}
.section--related__head .section__heading {
	margin: 0; font-size: var(--h4-size); line-height: 1.33;
}

.related-slider__viewport {
	width: 100%; overflow: hidden; cursor: grab;
	touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.related-slider__viewport.is-dragging { cursor: grabbing; }
.related-slider__viewport.is-dragging .related-services { transition: none; }

.related-services {
	width: max-content;
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: stretch;
	transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
/* Used by the script for the invisible wrap. */
.related-services.is-resetting { transition: none; }

.related-service {
	flex: 0 0 auto;
	width: var(--slide-item-width, 25%);
	padding-inline: 7.5px;
	display: flex;
}
.related-service__link {
	flex: 1 1 auto;
	position: relative; isolation: isolate;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 394px; padding: 30px;
	border-radius: 24px; overflow: hidden;
	color: #fff; text-decoration: none;
}
.related-service__image {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 600ms ease;
}
.related-service__link:hover .related-service__image { transform: scale(1.05); }
/* The photographs are light in places, so the label needs a wash. */
.related-service__link::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, rgb(20 20 20 / 0.85) 0%, rgb(20 20 20 / 0.35) 60%, rgb(20 20 20 / 0.15) 100%);
}
.related-service__body { display: grid; gap: 14px; }
.related-service__title {
	margin: 0;
	font-size: var(--body_large-size); line-height: 1.58; font-weight: 500;
	text-transform: uppercase;
}
.related-service__text {
	color: rgb(255 255 255 / 0.63);
	font-size: 16px; line-height: 1.75;
}
.related-service__more {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 18px; letter-spacing: normal; text-transform: uppercase;
	color: var(--color-accent);
}

/* Before the script measures, the row scrolls rather than sitting in a
   clipped strip the reader cannot reach. */
.section--related .container:not(.is-ready) .related-slider__viewport { overflow-x: auto; scrollbar-width: none; }
.section--related .container:not(.is-ready) .related-slider__viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.related-services { transition: none; }
}

@media (max-width: 1100px) { .section--related .container { --slide-per-view: 3; } }
@media (max-width: 860px)  { .section--related .container { --slide-per-view: 2; } }
@media (max-width: 560px)  { .section--related .container { --slide-per-view: 1.15; } }

/* The contact block without its form: a heading and a line of copy over
   the tiles. With a map, the two sit side by side — live's Location
   arrangement. */
/* The contact page zeroes this block's padding so its tinted band can
   run edge to edge; the split arrangement sits on the page ground
   between two panels and needs live's air back. Matching that rule's
   two classes is not enough to beat it, so this takes a third. */
.section.section--contact:has(.section--contact__split) { padding-block: clamp(3.5rem, 6vw, 6.25rem); }
.section--contact__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
/* Live runs 20px between the heading, the copy and the tiles — ours
   was on the section scale, which pushed the tiles down the column. */
.section--contact__lead { display: grid; gap: 20px; align-content: center; }
.section--contact__split .contact-method__text { white-space: nowrap; }
.section--contact__split .contact-map { margin: 0; }
.section--contact__split .contact-map iframe {
	display: block; width: 100%; border-radius: 20px;
}
/* The tiles inherit the contact page's three-column grid, which squeezed
   two of them into a third of the column each and left the phone number
   against the next icon. Two columns, with room between them. */
.section--contact__split .contact-methods {
	margin: 0; padding-block: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 4vw, 3.5rem);
}
/* Live sets the tile label back in grey and the value a size up; the
   contact page's own tiles keep their sizes. */
.section--contact__split .contact-method__icon { width: 50px; height: 50px; }
.section--contact__split .contact-method__title {
	color: rgb(27 27 40 / 0.5);
	font-size: 18px; line-height: 1.55; font-weight: 500;
}
.section--contact__split .contact-method__text {
	font-size: 22px; line-height: 1.4; font-weight: 400;
}

.section--contact__head { display: grid; gap: 20px; max-width: 780px; }
.section--contact:not(:has(.section--contact__split)) .section--contact__head { margin-bottom: var(--space-lg); }
.section--contact__head .section__heading {
	margin: 0; font-size: var(--h4-size); line-height: 1.33;
}
.section--contact__head .entry-content p {
	margin: 0; font-size: var(--body-size); line-height: 1.56;
}

/* ---------- Reasons panel ---------- */

/* Live: an accent band, heading, copy and button left, the checked list
   opposite. */
.section--reasons {
	background: var(--color-accent); color: var(--color-on-accent);
	border-radius: var(--radius-lg);
	margin-inline: 10px;
	padding-block: clamp(3rem, 6vw, 6.25rem);
}
.section--reasons__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.section--reasons__copy { display: grid; gap: 30px; align-content: start; justify-items: start; }
.section--reasons__aside { display: grid; gap: 40px; align-content: start; }
.section--reasons .section__heading {
	margin: 0; color: var(--color-on-accent);
	font-size: var(--h4-size); line-height: 1.33;
}
.section--reasons .entry-content p {
	margin: 0; color: var(--color-on-accent);
	font-size: var(--body-size); line-height: 1.56;
}
.section--reasons .entry-content p + p { margin-top: 1em; }
/* Reversed out of the accent, as the What We Do button is. */
.section--reasons .btn,
.section--reasons .about-cta__arrow { background: var(--color-text); color: var(--color-accent); }
.section--reasons .btn:hover { background: #000; }

@media (max-width: 900px) {
	.section--reasons__inner { grid-template-columns: 1fr; row-gap: var(--space-lg); }
	.section--contact__split { grid-template-columns: 1fr; row-gap: var(--space-lg); }
}

/* ---------- Services panel ---------- */

/* Live: a dark band with the heading and button in the head, then the
   cards in a row that advances on its own. */
.section--services-panel {
	background: var(--color-text); color: #fff;
	border-radius: var(--radius-lg);
	margin-inline: 10px;
	padding-block: clamp(3rem, 6vw, 6.25rem);
}
.section--services-panel .container { --slide-per-view: 4; }
.section--services-panel__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* The arrows read in the accent on the dark ground. */
.section--services-panel .slider-nav__btn {
	border-color: var(--color-accent); color: var(--color-accent);
}
.section--services-panel .slider-nav__btn:hover {
	background: var(--color-accent); color: var(--color-on-accent);
}
.section--services-panel__cta { margin-top: clamp(2rem, 4vw, 3.5rem); width: fit-content; }
.section--services-panel .section__heading {
	margin: 0; color: #fff;
	font-size: var(--h4-size); line-height: 1.33;
}

.services-panel-slider__viewport {
	width: 100%; overflow: hidden; cursor: grab;
	margin-block: -10px;
	touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.services-panel-slider__viewport.is-dragging { cursor: grabbing; }
.services-panel-slider__viewport.is-dragging .service-panel-cards { transition: none; }

.service-panel-cards {
	width: max-content;
	list-style: none; margin: 0;
	/* The viewport clips, and a card lifts on hover — without this the
	   raised top corners are cut off. */
	padding: 10px 0;
	display: flex; align-items: stretch;
	transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.service-panel-cards.is-resetting { transition: none; }

.service-panel-card {
	flex: 0 0 auto;
	width: var(--slide-item-width, 25%);
	padding-inline: 12px;
	display: flex;
}
.service-panel-card__inner {
	flex: 1 1 auto;
	display: grid; align-content: start; gap: 12px;
	padding: 30px;
	background: var(--color-bg); color: var(--color-text);
	border-radius: 20px; text-decoration: none;
	transition: transform var(--transition);
}
a.service-panel-card__inner:hover { transform: translateY(-4px); }
.service-panel-card__title {
	margin: 0; color: var(--color-text);
	font-size: var(--body_large-size); line-height: 1.42; font-weight: 500;
}
.service-panel-card__text {
	margin: 0; color: rgb(27 27 40 / 0.7);
	font-size: 16px; line-height: 1.6;
}

.section--services-panel .container:not(.is-ready) .services-panel-slider__viewport { overflow-x: auto; scrollbar-width: none; }
.section--services-panel .container:not(.is-ready) .services-panel-slider__viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.service-panel-cards { transition: none; }
}

@media (max-width: 1100px) { .section--services-panel .container { --slide-per-view: 3; } }
@media (max-width: 860px)  { .section--services-panel .container { --slide-per-view: 2; } }
@media (max-width: 560px)  { .section--services-panel .container { --slide-per-view: 1.15; } }

/* ---------- CTA ---------- */

/* Live sets this as a dark band with everything centred and a lime
   button at the foot. */
.section--cta {
	position: relative; isolation: isolate;
	text-align: center;
	margin-inline: 10px;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	background: var(--color-text); color: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
}
/* The pattern behind it comes from Theme Settings, so every band that
   shows carries the same one. */
.section--cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: var(--cta-bg, none);
	background-size: cover; background-position: center;
}
.section--cta .section__heading { max-width: none; }
.section--cta .section__heading {
	color: #fff; max-width: 26ch; margin-inline: auto;
}
.section--cta .entry-content {
	max-width: 72ch; margin-inline: auto;
	color: rgb(255 255 255 / 0.75);
	font-size: var(--body-size); line-height: 1.56;
}
.section--cta__action { justify-content: center; margin: var(--space-md) auto 0; width: fit-content; }
.section--cta__media { margin-top: var(--space-md); }
.section--cta__media img { border-radius: 20px; margin-inline: auto; }

/* With a pull quote the band runs in two columns: heading and button on
   the left, the copy and the quote opposite. */
.section--cta--split { text-align: left; }
.section--cta--split .section--cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	padding-block: clamp(1rem, 3vw, 2.5rem);
}
.section--cta--split .section--cta__copy { display: grid; gap: 30px; align-content: start; justify-items: start; }
.section--cta--split .section__heading {
	margin: 0; max-width: 16ch;
	font-size: var(--h4-size); line-height: 1.33;
}
.section--cta--split .section--cta__action { margin: 0; justify-content: flex-start; }
.section--cta--split .section--cta__aside { display: grid; gap: 40px; align-content: start; }
.section--cta--split .entry-content {
	max-width: none; margin: 0;
	color: #fff;
}
.section--cta--split .entry-content p { margin: 0; font-size: var(--body-size); line-height: 1.56; }
.section--cta--split .entry-content p + p { margin-top: 1em; }

.cta-quote {
	margin: 0; color: #fff;
	font-size: var(--h5-size); line-height: 1.25; font-weight: 500;
}
.cta-quote::before { content: "“"; }
.cta-quote::after { content: "”"; }

@media (max-width: 900px) {
	.section--cta--split .section--cta__inner { grid-template-columns: 1fr; row-gap: var(--space-lg); }
	.section--cta--split .section__heading { max-width: none; }
}

/* On a service page the band drops the dark ground and sets the copy
   beside the photograph instead. */
.single-service .section--cta {
	margin-inline: 0; padding-block: var(--section-space);
	background: none; color: var(--color-text);
	border-radius: 0; text-align: left;
}
.single-service .section--cta::before { content: none; }
.single-service .section--cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5.6rem);
	align-items: center;
}
.single-service .section--cta__copy { display: grid; gap: 20px; align-content: start; justify-items: start; }
.single-service .section--cta .section__heading {
	color: var(--color-text); max-width: none; margin: 0;
	font-size: var(--h4-size); line-height: 1.33;
}
.single-service .section--cta .entry-content {
	max-width: none; margin: 0; color: var(--color-text);
}
.single-service .section--cta .entry-content p {
	margin: 0; font-size: var(--body-size); line-height: 1.56;
}
.single-service .section--cta .entry-content p + p { margin-top: 1em; }
.single-service .section--cta__action { justify-content: flex-start; margin: 10px 0 0; }
.single-service .section--cta__media { margin: 0; }
.single-service .section--cta__media img { display: block; width: 100%; margin: 0; }

@media (max-width: 900px) {
	.single-service .section--cta__inner { grid-template-columns: 1fr; row-gap: var(--space-lg); }
}

/* ---------- Not found ---------- */

/* Nothing sits above this block, so it opens the page under a header
   that overlays rather than stacks — hence the header's height in the
   top padding. */
.section--error {
	display: grid; place-items: center;
	min-height: min(70vh, 620px);
	padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
	text-align: center;
}
.error-404 { display: grid; justify-items: center; gap: 20px; max-width: 46ch; }
.error-404__code {
	margin: 0; color: var(--color-accent);
	font-size: clamp(4rem, 14vw, 9rem); line-height: 0.85; font-weight: 500;
	letter-spacing: -0.03em;
}
.error-404__title {
	margin: 0;
	font-size: var(--h3-size); line-height: 1.19; font-weight: 500;
}
.error-404__text {
	margin: 0; color: var(--color-muted);
	font-size: var(--body-size); line-height: 1.56;
}
.error-404__action { margin-top: 10px; }

/* ---------- Contact ---------- */

/* Live runs the form on a tinted band with the pitch beside it, then a
   row of tiles on the page ground, then a full-width map. */
.section.section--contact { padding-block: 0; padding-inline: 0; }

.section--contact__band {
	background: rgb(27 27 40 / 0.05);
	padding-block: clamp(3rem, 6vw, 6.5rem);
	padding-inline: 15px;
}
.section--contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 683fr) minmax(0, 643fr);
	gap: 60px;
	align-items: start;
}
.section--contact__pitch { display: grid; gap: 20px; align-content: start; }
/* The heading takes the column; only the copy is measured, or the
   heading wraps where live keeps it on one line. */
.section--contact__pitch .section__heading { margin: 0; }
.section--contact__pitch .entry-content { color: var(--color-text); max-width: 34ch; }
.section--contact__pitch .entry-content p { margin: 0; font-size: var(--body-size); line-height: 1.56; }

/* The band is light, so the fields are ruled in the text colour rather
   than the footer's white. */
.section--contact__form .form__control {
	background: transparent;
	color: var(--color-text);
	border: 0; border-bottom: 1px solid rgb(15 0 0 / 0.2);
	border-radius: 0;
	padding: 8px 16px 8px 0;
	font-size: 16px;
	height: 40px;
}
.section--contact__form .form__control::placeholder { color: var(--color-text); opacity: 1; }
.section--contact__form .form__control:focus { border-bottom-color: var(--color-text); outline: none; }
.section--contact__form textarea.form__control {
	height: 191px; min-height: 191px;
	border: 1px solid rgb(15 0 0 / 0.2);
	padding: 14px;
}
.section--contact__form .form__row > .select { width: 100%; }
.section--contact__form .select { font-size: 16px; }
.section--contact__form .select__button {
	background: transparent; color: var(--color-text);
	border: 0; border-bottom: 1px solid rgb(15 0 0 / 0.2); border-radius: 0;
	padding: 8px 16px 8px 0;
	height: 40px;
}
/* Everything on this page reads in the text colour, placeholders
   included — no grey. */
.section--contact__form .select__button,
.section--contact__form .select__search-input { color: var(--color-text); }
.section--contact__form .select__search-input::placeholder { color: var(--color-text); opacity: 1; }
.section--contact__form .phone-field { gap: 10px; }
.section--contact__form .phone-field .select { flex: 0 0 7.5rem; }
.section--contact__form .form__grid { gap: 18px 40px; }
.section--contact__form .form__submit { margin-top: 40px; width: fit-content; }
.section--contact__form .about-cta__arrow { pointer-events: none; }
/* Live's button here is dark, not the accent it uses on the dark band. */
.section--contact__form .form__submit .btn { background: var(--color-text); color: #fff; }
.section--contact__form .form__submit .btn:hover { background: #000; }
.section--contact__form .about-cta__arrow { background: var(--color-text); color: #fff; }

/* ---- Contact tiles ---- */

.contact-methods {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	padding-block: clamp(3rem, 6vw, 6rem);
}
.contact-method {
	display: flex; align-items: flex-start; gap: 20px;
	padding: 0; background: none; border-radius: 0; text-align: left;
}
.contact-method__icon {
	flex: 0 0 46px;
	width: 46px; height: 46px; margin: 0;
	display: grid; place-items: center;
	background: var(--color-text); color: var(--color-accent);
	border-radius: 50%;
}
.contact-method__icon svg { width: 22px; height: 22px; display: block; }
.contact-method__icon img { width: 22px; height: 22px; object-fit: contain; }
.contact-method__body { display: grid; gap: 4px; }
.contact-method__title {
	margin: 0;
	font-size: 18px; line-height: 28px; font-weight: 500;
	color: var(--color-text);
}
.contact-method__text { margin: 0; color: var(--color-text); font-weight: 500; line-height: 1.5; }
.contact-method__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact-method__text a:hover { color: var(--color-accent-dark); }

/* ---- Map ---- */

.contact-map { margin: 0 10px; border-radius: var(--radius-lg); overflow: hidden; }
.contact-map iframe { display: block; width: 100%; }

@media (max-width: 1024px) {
	.section--contact__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.section--contact__pitch { max-width: none; }
	.contact-methods { grid-template-columns: 1fr; gap: var(--space-md); }
}
@media (max-width: 620px) {
	.section--contact__form .form__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.contact-map { margin-inline: 0; border-radius: 0; }
}

/* ---------- Banner (inner pages) ---------- */

.section--banner { padding-block: 0; }
.banner__image { width: 100%; border-radius: var(--radius-lg); object-fit: cover; }

/* The footer lives entirely in main.css. */