/*
Theme Name:  Trades724
Theme URI:   https://team724.com/trades724
Author:      724 Consulting
Author URI:  https://team724.com
Description: One chassis for small local trade businesses. Every site is configured in a single place — Trades724 → Site Builder. Sections equal pages equal menu items. Collections (services, brands, plans, service areas) generate their own pages and navigation. Leads are saved to the database before they are emailed. Built to deploy across many independent installs, each one a client's own portable asset.
Version:     2.11.3
Requires at least: 6.0
Requires PHP: 7.4
License:     GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trades724
Tags:        custom-menu, featured-images, translation-ready
*/

:root {
	--t724-accent: #1a7cb8;
	--t724-ink: #0f1f2e;
	--t724-text: #1a1a1a;
	--t724-muted: #666;
	--t724-line: #e4e4e4;
	--t724-alt: #f7f9fb;
	--t724-radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px; line-height: 1.65; color: var(--t724-text); background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--t724-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; color: var(--t724-ink); font-weight: 700; }
h1 { font-size: 2.5rem; } h2 { font-size: 1.9rem; } h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--t724-accent); outline-offset: 2px; }

.t724-skip { position: absolute; left: -9999px; }
.t724-skip:focus { left: 12px; top: 12px; background: #fff; padding: 10px 16px; z-index: 999; border-radius: 6px; }

.t724-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.t724-sec { padding: 64px 0; }
.t724-alt { background: var(--t724-alt); }
.t724-center { text-align: center; }
.t724-sub { color: var(--t724-muted); max-width: 640px; margin: 0 auto 32px; text-align: center; }
.t724-prose { max-width: 780px; }
.t724-prose h2 { margin-top: 1.6em; }
.t724-prose ul, .t724-prose ol { padding-left: 1.2em; }

/* Header */
.t724-header { background: #fff; border-bottom: 1px solid var(--t724-line); position: sticky; top: 0; z-index: 100; }
.t724-header-in { display: flex; align-items: center; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 14px 20px; }
.t724-brand { display: flex; flex-direction: column; line-height: 1.15; flex-shrink: 0; }
.t724-brand img { max-height: var(--t724-logo-h, 96px); max-width: 460px; width: auto; height: auto; }
.t724-brand-name { font-size: 1.5rem; font-weight: 800; color: var(--t724-accent); }
.t724-brand-tag { font-size: .78rem; color: var(--t724-muted); font-weight: 600; }
.t724-nav { margin-left: auto; }
.t724-menu { display: flex; list-style: none; margin: 0; padding: 0; gap: 22px; }
.t724-menu > li { position: relative; }
.t724-menu a { color: #333; font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.t724-menu a:hover { color: var(--t724-accent); text-decoration: none; }
.t724-caret { width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; opacity: .85; transition: transform .15s ease; }
.t724-has-sub:hover > a .t724-caret { transform: translateY(1px); opacity: 1; }
.t724-sub-menu, .t724-submenu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
	background: #fff; border: 1px solid var(--t724-line); border-radius: var(--t724-radius);
	box-shadow: 0 8px 24px rgba(0,0,0,.1); padding: 8px 0; list-style: none; margin: 0; z-index: 200;
}
.t724-has-sub:hover > .t724-submenu, .t724-has-sub:focus-within > .t724-submenu { display: block; }
.t724-submenu li a { display: block; padding: 9px 16px; font-size: .92rem; }
.t724-submenu li a:hover { background: var(--t724-alt); }
.t724-callbtn {
	background: var(--t724-accent); color: #fff; font-weight: 700; padding: 10px 16px;
	border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.t724-callbtn:hover { color: #fff; text-decoration: none; filter: brightness(.92); }
.t724-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.t724-burger span { display: block; width: 24px; height: 2px; background: var(--t724-ink); margin: 5px 0; }

/* Hero */
/* No hero photo chosen yet. The pale default panel leaves white headline type
   effectively invisible, so fall back to the dark ink until a photo is set.
   Only ever applies while a site is mid-build with an empty hero. */
.t724-hero.t724-hero-noimg { background: var(--t724-ink); }

.t724-hero {
	background: #eef2f6 center/cover no-repeat; color: #fff;
	position: relative;
	min-height: 460px; display: flex; justify-content: center; text-align: center; padding: 72px 20px;
}
/* Placement of the text block within the hero. The photo is undarkened by
   default — the text carries a soft shadow so white type stays legible. An
   optional shading level can lay black over the photo; see Hero shading. */
.t724-hero-center { align-items: center; }
.t724-hero-below  { align-items: center; }
.t724-hero-top    { align-items: flex-start; }
.t724-hero-bottom { align-items: flex-end; }
.t724-hero-in { max-width: 800px; position: relative; z-index: 3; }
.t724-hero h1 { color: #fff; font-size: 3.2rem; text-shadow: 0 2px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55); }
.t724-hero p { font-size: 1.2rem; opacity: .98; margin-bottom: 28px; text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55); }
.t724-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Optional hero shading. No overlay element exists at all at level None, so a
   site that has never touched this setting renders exactly as it did before. */
/* Photo 1's shading sits UNDERNEATH the rotating slides (z-index 0), so when a
   later photo fades in it covers photo 1's veil entirely and shows its own. */
.t724-hero.t724-shade-15::after,
.t724-hero.t724-shade-30::after,
.t724-hero.t724-shade-45::after {
	content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
/* Each rotating photo carries its own veil, which fades in and out with it. */
.t724-hero-slide.t724-shade-15::after,
.t724-hero-slide.t724-shade-30::after,
.t724-hero-slide.t724-shade-45::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
}
.t724-hero.t724-shade-15::after, .t724-hero-slide.t724-shade-15::after { background: rgba(0,0,0,.15); }
.t724-hero.t724-shade-30::after, .t724-hero-slide.t724-shade-30::after { background: rgba(0,0,0,.30); }
.t724-hero.t724-shade-45::after, .t724-hero-slide.t724-shade-45::after { background: rgba(0,0,0,.45); }

/* Optional extra hero photos. Photo 1 stays the section's own background, so
   these layers only ever fade IN over it and back out — the headline, subhead
   and buttons never move. Absent JS, none of this runs and photo 1 is shown. */
.t724-hero-slides { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.t724-hero-slide {
	position: absolute; inset: 0;
	background: center/cover no-repeat;
	opacity: 0; transition: opacity .7s ease-in-out;
}
.t724-hero-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.t724-hero-slide { transition: none; }
}

/* Buttons that live BENEATH the hero image sit on clean white space, so the
   outline (blue-on-white) button is always crisp and never fights the photo.
   Button 1 (solid) appears here too when its placement is "below". */
.t724-hero-below-btns {
	display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
	padding: 22px 20px 4px;
}

/* Buttons */
.t724-btn {
	display: inline-block; background: var(--t724-accent); color: #fff; font-weight: 600;
	padding: 13px 26px; border-radius: 6px; border: 2px solid var(--t724-accent); cursor: pointer; font-size: 1rem;
}
.t724-btn:hover { text-decoration: none; filter: brightness(.92); }
/* Outline button — the "reverse" of the primary: fully transparent fill,
   blue border, blue label. Used as the hero's secondary button. */
.t724-btn-ghost { background: transparent; border-color: #fff; }
.t724-btn-out {
	background: transparent; color: var(--t724-accent); border-color: var(--t724-accent);
}
.t724-btn-out:hover { background: var(--t724-accent); color: #fff; }
.t724-btn-white { background: #fff; color: var(--t724-accent); border-color: #fff; }
.t724-btn-white:hover { color: var(--t724-accent); }
.t724-btn-ghost-w { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }

/* The main hero button — the only button an optional colour applies to. Every
   other button on the site stays on the brand colour, so setting something pale
   here can never make an unrelated button vanish against a white section. */
.t724-btn-hero {
	background: var(--t724-btn, var(--t724-accent));
	border-color: var(--t724-btn, var(--t724-accent));
	color: var(--t724-btn-ink, #fff);
}
.t724-btn-hero:hover { color: var(--t724-btn-ink, #fff); }

/* When the hero button sits at a different height from the headline it becomes
   its own layer, positioned independently. When the two match it just stacks
   under the subhead instead, and this never renders. */
.t724-hero-btnlayer {
	position: absolute; left: 0; right: 0; padding: 0 20px;
	display: flex; justify-content: center; z-index: 3;
}
.t724-btnpos-top    { top: 14%; }
.t724-btnpos-center { top: 50%; transform: translateY(-50%); }
.t724-btnpos-bottom { bottom: 14%; }

/* Split intro */
.t724-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 820px) { .t724-split { grid-template-columns: 1fr 1fr; } }
.t724-split-img img { border-radius: var(--t724-radius); box-shadow: 0 6px 28px rgba(0,0,0,.12); }
.t724-lead { font-size: 1.1rem; }
.t724-meta { color: var(--t724-muted); font-size: .95rem; }

/* Cards */
.t724-cards { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .t724-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .t724-cards { grid-template-columns: repeat(3, 1fr); } }
.t724-card {
	border: 1px solid var(--t724-line); border-radius: var(--t724-radius); overflow: hidden;
	background: #fff; color: inherit; display: block; transition: box-shadow .15s, transform .15s;
}
.t724-card:hover { text-decoration: none; box-shadow: 0 8px 26px rgba(0,0,0,.1); transform: translateY(-2px); }
.t724-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--t724-line); }
.t724-card-img img { width: 100%; height: 100%; object-fit: cover; }
.t724-card h3 { margin: 18px 20px 8px; color: var(--t724-accent); font-size: 1.15rem; }
.t724-card p { margin: 0 20px 20px; color: var(--t724-muted); font-size: .95rem; }

/* Gallery */
.t724-gal img { border-radius: var(--t724-radius); aspect-ratio: 4/3; object-fit: cover; width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

/* Brands */
.t724-brands { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: center; }
.t724-brandcard {
	border: 1px solid var(--t724-line); border-radius: var(--t724-radius); background: #fff;
	padding: 22px; display: flex; align-items: center; justify-content: center; min-height: 110px;
}
.t724-brandcard:hover { text-decoration: none; border-color: var(--t724-accent); }
.t724-brandcard img { max-height: 64px; width: auto; object-fit: contain; }
.t724-brandname { font-weight: 700; color: var(--t724-ink); }

/* Credentials */
.t724-creds { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 40px; max-width: 820px; }
@media (max-width: 700px) { .t724-creds { columns: 1; } }
.t724-creds li { padding-left: 26px; position: relative; margin-bottom: 10px; break-inside: avoid; }
.t724-creds li::before { content: "✓"; position: absolute; left: 0; color: var(--t724-accent); font-weight: 700; }

/* Pills */
.t724-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.t724-pills-c { justify-content: center; }
.t724-pill {
	background: #eaf3fa; color: #12557f; border-radius: 999px; padding: 6px 15px;
	font-size: .88rem; font-weight: 600;
}
a.t724-pill:hover { text-decoration: none; background: var(--t724-accent); color: #fff; }
span.t724-pill { cursor: default; }

/* CTA band */
.t724-cta { background: var(--t724-accent); color: #fff; padding: 64px 0; text-align: center; }
.t724-cta h2 { color: #fff; }

/* Banner */
.t724-banner { background: var(--t724-alt); border-bottom: 1px solid var(--t724-line); padding: 48px 20px; text-align: center; }
.t724-banner h1 { margin: 0; }

/* Testimonials */
.t724-quotes { display: grid; gap: 24px; }
.t724-quote {
	margin: 0; padding: 26px 30px; background: var(--t724-alt);
	border-left: 4px solid var(--t724-accent); border-radius: 0 var(--t724-radius) var(--t724-radius) 0;
}
.t724-quote p { font-size: 1.05rem; margin-bottom: 12px; }
.t724-quote cite { font-style: normal; font-weight: 700; color: var(--t724-ink); }
.t724-quote cite span { font-weight: 400; color: var(--t724-muted); }

/* About portrait */
.t724-portrait { margin: 0 0 32px; text-align: center; }
.t724-portrait img { border-radius: var(--t724-radius); display: inline-block; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.t724-portrait figcaption { color: var(--t724-muted); font-style: italic; margin-top: 10px; font-size: .92rem; }
.t724-hero-img img { border-radius: var(--t724-radius); margin-bottom: 28px; width: 100%; }

/* Contact */
.t724-contact-facts { list-style: none; padding: 0; margin: 0 0 40px; }
.t724-contact-facts li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--t724-line); }
.t724-contact-facts strong { flex: 0 0 100px; color: var(--t724-ink); }

/* Form */
.t724-form-wrap { margin-top: 40px; }
.t724-form { display: grid; gap: 18px; }
.t724-form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .t724-form-row { grid-template-columns: 1fr 1fr; } }
.t724-form label { display: block; font-weight: 600; color: var(--t724-ink); font-size: .95rem; }
.t724-form label span { color: #c0392b; }
.t724-form input[type=text], .t724-form input[type=tel], .t724-form input[type=email], .t724-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid #cfd6dd; border-radius: 6px;
	font: inherit; margin-top: 6px; background: #fff;
}
.t724-form input:focus, .t724-form textarea:focus { border-color: var(--t724-accent); outline: none; }
.t724-form button { justify-self: start; }
.t724-hint { font-weight: 400; color: var(--t724-muted); font-size: .88rem; }
.t724-hp { position: absolute; left: -9999px; }
.t724-ok, .t724-err { padding: 16px 20px; border-radius: var(--t724-radius); margin-bottom: 24px; }
.t724-ok { background: #e7f6ec; border: 1px solid #b6e0c4; }
.t724-err { background: #fdeaea; border: 1px solid #f2c2c2; }

/* Engine fallback — never a broken box */
.t724-fallback { background: var(--t724-alt); border: 1px solid var(--t724-line); border-radius: var(--t724-radius); padding: 24px; text-align: center; }
.t724-fallback p { margin: 0; }

/* Footer */
.t724-footer { background: var(--t724-ink); color: #c8d4de; padding: 52px 20px 24px; }
.t724-footer-in { max-width: 1120px; margin: 0 auto; display: grid; gap: 36px; }
@media (min-width: 780px) { .t724-footer-in { grid-template-columns: repeat(3, 1fr); } }
.t724-footer h4 { color: #fff; margin-bottom: 14px; font-size: 1.05rem; }
.t724-footer a { color: #c8d4de; }
.t724-footer a:hover { color: #fff; }
.t724-hours { font-size: .9rem; opacity: .85; }
.t724-quick { list-style: none; padding: 0; margin: 0; }
.t724-quick li { margin-bottom: 8px; }
.t724-footer-bottom {
	border-top: 1px solid #213344; margin-top: 36px; padding-top: 20px;
	text-align: center; font-size: .85rem; color: #7a8b9e; max-width: 1120px; margin-inline: auto;
}

/* Sticky mobile call bar */
.t724-sticky { display: none; }
@media (max-width: 780px) {
	.t724-sticky {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
		background: var(--t724-accent); color: #fff; text-align: center; padding: 15px;
		font-weight: 700; font-size: 1.05rem;
	}
	.t724-sticky:hover { color: #fff; text-decoration: none; }
	body { padding-bottom: 56px; }
}

/* Mobile nav */
@media (max-width: 980px) {
	.t724-burger { display: block; }
	/* Stack the logo above the menu/phone row and give it room, like dev1. */
	.t724-header-in { flex-wrap: wrap; justify-content: center; gap: 10px 24px; position: relative; }
	.t724-brand { flex-basis: 100%; align-items: center; text-align: center; }
	.t724-brand img { max-height: 120px; max-width: 92vw; margin: 0 auto; }
	.t724-burger { order: 2; margin-right: auto; }
	.t724-callbtn { display: inline-flex; }
	.t724-nav {
		display: none; position: fixed; top: var(--t724-header-h, 130px); left: 0; right: 0; background: #fff;
		border-bottom: 1px solid var(--t724-line); box-shadow: 0 10px 24px rgba(0,0,0,.1); padding: 12px 0 64px;
		max-height: calc(100vh - var(--t724-header-h, 130px) - 16px);
		max-height: calc(100dvh - var(--t724-header-h, 130px) - 16px);
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	}
	.t724-nav.is-open { display: block; }
	.t724-menu { flex-direction: column; gap: 0; }
	.t724-menu > li > a { display: block; padding: 13px 22px; border-bottom: 1px solid #f0f2f4; }
	.t724-submenu { display: block; position: static; border: 0; box-shadow: none; padding: 0; }
	.t724-submenu li a { padding-left: 42px; color: var(--t724-muted); }
	/* Mobile hero: a tall box (68vh) that shows the FULL WIDTH of the scene —
	   so mom on the right and the sister on the left both stay in frame —
	   rather than zooming in and cropping them out. The cluster sits high-left
	   where the couch/wall is emptiest. The PHOTO file is never altered. */
	/* cover always fills the box (no empty grey strip). A shorter box means
	   cover doesn't have to zoom in much to fill it — so the whole scene,
	   mom included, stays in frame. Positioned slightly high so the couch and
	   people sit up and the top-left cluster clears them. */
	.t724-hero { min-height: 52vh; background-size: cover; background-position: center 35%; padding: 28px 22px; align-items: flex-start; justify-content: flex-start; text-align: left; }
	.t724-hero-in { margin: 0; }
	.t724-hero-slide { background-position: center 35%; }
	.t724-hero h1 { font-size: 2.1rem; margin-bottom: 14px; }
	.t724-hero-btns { justify-content: flex-start; gap: 8px; }
	.t724-hero-btns .t724-btn,
	.t724-hero-below-btns .t724-btn { padding: 7px 14px; font-size: .82rem; }
	.t724-hero-below-btns { justify-content: center; }
}

/* Embedded engine widgets + full-width collection grids */
.t724-embed { padding: 40px 0; }
.t724-embed > * { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.t724-cards-full { margin-top: 24px; }
.t724-gal-full { margin-top: 24px; }

.t724-prose-body { max-width: 760px; margin: 0 auto 28px; }
.t724-prose-body ul { text-align: left; }

/* Current page in the nav */
.t724-menu > li.t724-current > a { color: var(--t724-accent); }
.t724-submenu li.t724-current > a { color: var(--t724-accent); font-weight: 600; }

/* Pasted content: don't let a lead line inherit a narrow centred box */
.t724-prose > p:first-of-type { max-width: none; }

/* Rows — a calmer alternative to yet another card grid */
.t724-rows { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; text-align: left; }
.t724-row-item {
	display: flex; align-items: center; gap: 18px; padding: 18px 22px;
	background: var(--t724-alt); border: 1px solid var(--t724-line);
	border-radius: var(--t724-radius); color: inherit; text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
a.t724-row-item:hover { background: #fff; border-color: var(--t724-accent); text-decoration: none; }
.t724-row-img img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.t724-row-text h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--t724-accent); }
.t724-row-text p { margin: 0; color: var(--t724-muted); font-size: .95rem; }

/* Footer pills only — the base pill lives at the top of this file. */
.t724-pills-footer .t724-pill {
	background: rgba(255,255,255,.14); color: #fff;
}
.t724-pills-footer a.t724-pill:hover { background: #fff; color: var(--t724-ink); }
.t724-center-items .t724-pills { justify-content: center; }
.t724-center-items .t724-rows { max-width: 760px; margin-left: auto; margin-right: auto; }
.t724-band-text { color: rgba(255,255,255,.92); max-width: 620px; margin: 0 auto 22px; }

/* Gallery "Our Work" strip — adapts to how many photos exist so a single
   image never stretches full-width and blurs. */
.t724-gal { display: grid; gap: 16px; }
.t724-gal img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--t724-radius); display: block; }
/* 3+ images: three across, each a tidy landscape tile. */
.t724-gal { grid-template-columns: repeat(3, 1fr); }
.t724-gal img { aspect-ratio: 4 / 3; }
/* Two images: side by side. */
.t724-gal-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }
/* One image: contained and centered, never upscaled past a sensible width. */
.t724-gal-1 { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.t724-gal-1 img { aspect-ratio: 16 / 10; }
@media (max-width: 640px) {
	.t724-gal, .t724-gal-2 { grid-template-columns: 1fr; }
}

/* Action button row (service pages etc.) — proper gap so buttons never collide,
   and wrap cleanly instead of smushing on narrow screens. */
.t724-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Social profile icons. Inline SVG inheriting the surrounding text colour, so
   the same markup reads correctly on the dark footer and the light header. */
.t724-social { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; padding: 0; margin: 18px 0 0; }
.t724-social a {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	color: inherit; opacity: .78; transition: opacity .15s ease, transform .15s ease;
}
.t724-social svg { width: 20px; height: 20px; display: block; }
.t724-social a:hover { opacity: 1; transform: translateY(-1px); text-decoration: none; }
.t724-social-footer a { background: rgba(255,255,255,.09); }
.t724-social-footer a:hover { background: rgba(255,255,255,.18); }
/* Right-hand header stack: the call button, with the icon row tucked under it.
   Kept deliberately quiet — the header's job is the phone number and the menu,
   and a row of full-colour logos up here would out-shout both. */
.t724-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.t724-social-header { margin: 0; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.t724-social-header a { width: 26px; height: 26px; color: var(--t724-accent); opacity: .62; }
.t724-social-header a:hover { opacity: 1; }
.t724-social-header svg { width: 17px; height: 17px; }
@media (max-width: 980px) {
	/* On a phone the header belongs to the menu and the call button alone. */
	.t724-social-header { display: none; }
	.t724-header-right { order: 3; margin-left: auto; }
}

/* Video embedded by pasting its URL on a line of its own. Scoped by src so it
   only ever reshapes an actual player, never a map or any other iframe. */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
	display: block; width: 100%; max-width: 100%; height: auto;
	aspect-ratio: 16 / 9; border: 0; border-radius: var(--t724-radius);
	margin: 22px 0;
}