/* ==========================================================================
   MyWebsite recruitment template ("newday" theme)
   Navy + teal corporate. Built on Bootstrap 5.3 and Font Awesome 6 (+ v4 shims).

   1. Tokens            5. Home hero           9. Blog
   2. Base              6. Page banner        10. Forms
   3. Buttons           7. Page content       11. Contact
   4. Top bar + nav     8. Jobs               12. CTA strip + footer
                                              13. Content blocks (admin panel HTML)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--navy: #0B2545;
	--navy-700: #13315C;
	--navy-500: #274C77;
	--blue-300: #8DA9C4;
	--teal: #12A5A0;
	--teal-600: #0C7F7C;
	--teal-700: #0A6866;
	--teal-200: #A7E3DE;
	--teal-100: #E3F4F2;
	--amber: #F4B860;

	--ink: #14243A;
	--body: #44546A;
	--muted: #66768B;
	--line: #DCE6EE;
	--tint: #F4F8FB;
	--white: #FFFFFF;

	--radius: 14px;
	--radius-lg: 22px;
	--shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 2px 10px rgba(11, 37, 69, .05);
	--shadow-md: 0 14px 34px rgba(11, 37, 69, .13);

	--font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* 2. Base ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; overflow-x: clip; }
body {
	font-family: var(--font-body);
	color: var(--body);
	background: var(--white);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	color: var(--navy);
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.2;
}
a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-700); text-decoration: underline; }
img { max-width: 100%; height: auto; }
::selection { background: var(--teal-200); color: var(--navy); }
:focus-visible { outline: 3px solid rgba(18, 165, 160, .55); outline-offset: 2px; }
.divider { border-top: 1px solid var(--line); margin: 1.75rem 0; clear: both; }
.alert { border: 0; border-radius: var(--radius); font-weight: 500; margin: 1.25rem 0; }
.alert-success { background: var(--teal-100); color: var(--teal-700); }
.alert-danger { background: #FDECEC; color: #A32020; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; background: var(--navy); color: var(--white); padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; color: var(--white); }
.eyebrow { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-600); margin-bottom: .75rem; }

/* 3. Buttons --------------------------------------------------------------- */
.btn {
	--bs-btn-font-family: var(--font-head);
	--bs-btn-font-weight: 700;
	--bs-btn-border-radius: 999px;
	--bs-btn-padding-x: 1.4rem;
	--bs-btn-padding-y: .62rem;
	--bs-btn-font-size: .95rem;
	transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-sm { --bs-btn-padding-x: 1.05rem; --bs-btn-padding-y: .42rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 999px; }
.btn-lg { --bs-btn-padding-x: 1.8rem; --bs-btn-padding-y: .8rem; --bs-btn-font-size: 1.02rem; --bs-btn-border-radius: 999px; }
.btn-primary, .btn-success {
	--bs-btn-color: #fff; --bs-btn-bg: var(--teal-600); --bs-btn-border-color: var(--teal-600);
	--bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--teal-700); --bs-btn-hover-border-color: var(--teal-700);
	--bs-btn-active-color: #fff; --bs-btn-active-bg: var(--teal-700); --bs-btn-active-border-color: var(--teal-700);
	--bs-btn-disabled-bg: var(--teal-600); --bs-btn-disabled-border-color: var(--teal-600);
	--bs-btn-focus-shadow-rgb: 18, 165, 160;
}
.btn-navy {
	--bs-btn-color: #fff; --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy);
	--bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy-700); --bs-btn-hover-border-color: var(--navy-700);
	--bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy-700); --bs-btn-active-border-color: var(--navy-700);
}
/* .btn-default is emitted by the platform (blog pagination) */
.btn-outline, .btn-default, .btn-secondary {
	--bs-btn-color: var(--navy); --bs-btn-bg: transparent; --bs-btn-border-color: var(--blue-300);
	--bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: var(--tint); --bs-btn-hover-border-color: var(--navy);
	--bs-btn-active-color: var(--navy); --bs-btn-active-bg: var(--tint); --bs-btn-active-border-color: var(--navy);
}
.btn-ghost {
	--bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-border-color: rgba(255, 255, 255, .45);
	--bs-btn-hover-color: var(--navy); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
	--bs-btn-active-color: var(--navy); --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff;
}

/* 4. Top bar + navigation -------------------------------------------------- */
.topbar { background: var(--navy); color: rgba(255, 255, 255, .82); font-size: .86rem; padding: .45rem 0; }
.topbar a { color: rgba(255, 255, 255, .82); }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar-contact { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.topbar-contact .fa-solid { color: var(--teal-200); margin-right: .45rem; font-size: .8rem; }
/* Social links are pre-built by the platform (fa-2x / fa-2xl); normalise their size here */
.social { display: flex; align-items: center; gap: .7rem; }
.social a { display: inline-flex; line-height: 1; }
.social a span { font-size: 1.25rem !important; line-height: 1 !important; vertical-align: 0 !important; }

.site-nav { background: var(--white); padding: .8rem 0; border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-nav.is-stuck { box-shadow: 0 6px 24px rgba(11, 37, 69, .1); }
.navbar-brand { padding: 0; margin-right: 1.5rem; }
.navbar-brand img { display: block; max-height: 40px; width: auto; }
.brand-text { font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--navy); }
.brand-text:hover { color: var(--navy); text-decoration: none; }
.site-nav .navbar-nav { gap: .15rem; }
.site-nav .nav-link { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--navy); padding: .5rem .8rem !important; border-radius: 8px; position: relative; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--teal-600); text-decoration: none; }
.site-nav .nav-link.active { color: var(--teal-600); }
.site-nav .navbar-toggler { border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; }
.site-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(18, 165, 160, .35); }
.nav-cta { margin-left: .75rem; white-space: nowrap; }
@media (min-width: 1200px) {
	.navbar-brand img { max-height: 46px; }
	.site-nav .nav-link.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .1rem; height: 2px; border-radius: 2px; background: var(--teal); }
}
@media (max-width: 1199.98px) {
	.site-nav .navbar-collapse { padding-top: .75rem; }
	.site-nav .nav-link { padding: .65rem .25rem !important; border-bottom: 1px solid var(--line); border-radius: 0; }
	.nav-cta { margin: 1rem 0 .5rem; display: block; }
}

/* 5. Home hero ------------------------------------------------------------- */
.hero {
	position: relative;
	color: #fff;
	background-color: var(--navy);
	background-image:
		radial-gradient(900px 480px at 88% 0%, rgba(18, 165, 160, .28), transparent 62%),
		radial-gradient(600px 420px at 0% 100%, rgba(39, 76, 119, .75), transparent 65%),
		linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
	background-size: cover;
	background-position: center;
	padding: 3.5rem 0 4rem;
	overflow: hidden;
}
.hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.3px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 55%);
	mask-image: linear-gradient(90deg, #000, transparent 55%);
}
.hero > .container { position: relative; }
.hero .eyebrow { color: var(--teal-200); }
.hero h1 { color: #fff; font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 1.1rem; }
.hero-lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255, 255, 255, .84); max-width: 34rem; margin-bottom: 1.9rem; }
.hero-art { display: block; width: 100%; max-width: 560px; margin-left: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }

.job-search { display: flex; background: #fff; border-radius: 999px; padding: .35rem; box-shadow: var(--shadow-md); max-width: 34rem; border: 1px solid transparent; }
.job-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18, 165, 160, .22), var(--shadow-md); }
.job-search .job-search-icon { display: flex; align-items: center; padding: 0 .35rem 0 1.05rem; color: var(--muted); }
.job-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: .55rem .5rem; font-size: 1rem; color: var(--ink); }
.job-search input::placeholder { color: var(--muted); }
.job-search .btn { flex: 0 0 auto; }
.job-search .job-search-clear { display: flex; align-items: center; padding: 0 .85rem; color: var(--muted); }
.job-search .job-search-clear:hover { color: var(--navy); text-decoration: none; }
.job-search-light { box-shadow: var(--shadow-sm); border-color: var(--line); max-width: none; }

@media (min-width: 992px) { .hero { padding: 5rem 0 5.5rem; } }

/* 6. Page banner ----------------------------------------------------------- */
.page-banner {
	position: relative;
	color: #fff;
	background-color: var(--navy);
	background-image:
		radial-gradient(700px 300px at 92% 0%, rgba(18, 165, 160, .32), transparent 65%),
		linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
	background-size: cover;
	background-position: center;
	padding: 2.4rem 0;
	overflow: hidden;
}
.page-banner::after {
	content: ""; position: absolute; right: -90px; top: -130px; width: 380px; height: 380px; border-radius: 50%;
	border: 2px dashed rgba(167, 227, 222, .28); pointer-events: none;
}
.page-banner.has-image::after { display: none; }
@media (max-width: 767.98px) { .page-banner::after { display: none; } }
.page-banner > .container { position: relative; z-index: 1; }
.page-banner h1 { color: #fff; font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -.025em; margin: 0; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 .6rem; font-size: .84rem; color: rgba(255, 255, 255, .7); }
.crumbs a { color: rgba(255, 255, 255, .7); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
@media (min-width: 992px) { .page-banner { padding: 3.4rem 0; } }

/* 7. Page content ---------------------------------------------------------- */
.page-main { padding: 3rem 0 4rem; }
.page-subheading { font-size: clamp(1.35rem, 2.4vw, 1.8rem); max-width: 46rem; margin-bottom: 1.5rem; }
.page-subheading::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--teal); margin-top: 1rem; }
.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }

.content-container { font-size: 1.02rem; }
.content-container > :last-child { margin-bottom: 0; }
.content-container h1 { font-size: 1.9rem; margin: 2rem 0 1rem; }
.content-container h2 { font-size: 1.55rem; margin: 2rem 0 .9rem; }
.content-container h3 { font-size: 1.2rem; margin: 1.6rem 0 .6rem; }
.content-container h1:first-child, .content-container h2:first-child, .content-container h3:first-child { margin-top: 0; }
.content-container p { margin-bottom: 1.1rem; }
.content-container ul, .content-container ol { margin-bottom: 1.2rem; padding-left: 1.3rem; }
.content-container li { margin-bottom: .4rem; }
.content-container li::marker { color: var(--teal-600); }
.content-container img { border-radius: var(--radius); }
.content-container blockquote { border-left: 4px solid var(--teal); background: var(--tint); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.4rem; margin: 1.5rem 0; color: var(--ink); font-size: 1.08rem; }
.content-container blockquote p:last-child { margin-bottom: 0; }
.content-container table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.content-container th, .content-container td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; }
.content-container th { font-family: var(--font-head); color: var(--navy); background: var(--tint); }
.content-container hr { border-color: var(--line); opacity: 1; margin: 2rem 0; }

.section { padding: 4rem 0; }
.section-tint { background: var(--tint); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; margin: 0; }
.link-arrow { font-family: var(--font-head); font-weight: 700; white-space: nowrap; }
.link-arrow .fa-solid { font-size: .8em; margin-left: .35rem; transition: transform .15s; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .fa-solid { transform: translateX(3px); }

/* 8. Jobs ------------------------------------------------------------------ */
.jobs-toolbar { display: grid; gap: 1.25rem; align-items: center; margin-bottom: 2rem; }
.jobs-toolbar .page-subheading { margin: 0; }
@media (min-width: 992px) { .jobs-toolbar { grid-template-columns: 1fr minmax(320px, 420px); } }

/* Job cards are generated by the platform: .row > .col > .jobs-job | .home-job */
.jobs-table .row { --bs-gutter-x: 1.5rem; }
.jobs-table .col { display: flex; }
.jobs-job, .home-job {
	width: 100%;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow-sm);
	margin-bottom: 1.5rem !important;
	position: relative;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.jobs-job::before, .home-job::before { content: ""; position: absolute; left: 1.5rem; top: 0; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: var(--teal); }
.jobs-job:hover, .home-job:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal-200); }
.jobs-table h1 { font-size: 1.14rem; font-weight: 700 !important; margin: .35rem 0 .55rem; line-height: 1.3; }
.jobs-table h1 a { color: var(--navy); }
.jobs-table h1 a:hover { color: var(--teal-600); text-decoration: none; }
.jobs-table h1 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* whole card clickable */
.jobs-table h2 { font-family: var(--font-body); font-size: .86rem; font-weight: 600 !important; letter-spacing: 0; color: var(--teal-600); margin-bottom: .8rem; line-height: 1.5; }
.jobs-table h2 .fa { margin-right: .2rem; }
.jobs-table p { font-size: .93rem; color: var(--body); margin-bottom: 1.2rem; }
.jobs-table .btn { position: relative; z-index: 1; }
.no_job, .no_blog { background: var(--tint); border: 1px dashed var(--blue-300); border-radius: var(--radius); padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); width: 100%; }
.no_job .lead, .no_job p { margin: 0; font-size: 1.05rem; }

/* Job detail + apply */
.job-layout { display: grid; gap: 2rem; }
@media (min-width: 992px) { .job-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; } }
.job-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: .6rem; }
.job-meta { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--teal-600); margin-bottom: 0; }
.job-meta .fa { margin-right: .25rem; }
.side-card { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; }
@media (min-width: 992px) { .side-card { position: sticky; top: 96px; } }
.side-card h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.side-card .btn { width: 100%; margin-bottom: .6rem; }
.side-list { list-style: none; padding: 1.1rem 0 0; margin: 1.1rem 0 0; border-top: 1px solid var(--line); font-size: .88rem; }
.side-list li { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .5rem; word-break: break-word; }
.side-list .fa-solid { color: var(--teal-600); width: 1rem; text-align: center; flex: 0 0 auto; }

/* 9. Blog ------------------------------------------------------------------ */
/* Listing markup is generated by the platform: h1 > a, h2 (date), p, .divider */
.blog-table h1 { font-size: 1.45rem; font-weight: 700; margin-bottom: .4rem; }
.blog-table h1 a { color: var(--navy); }
.blog-table h1 a:hover { color: var(--teal-600); text-decoration: none; }
.blog-table h2, .blog-date { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem; }
.blog-table p { margin-bottom: 0; }
.blog-table p a { font-family: var(--font-head); font-weight: 700; }
.blog-nav { display: flex; gap: .6rem; }
.blog-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; margin-bottom: .6rem; }

/* 10. Forms ---------------------------------------------------------------- */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; }
@media (min-width: 768px) { .form-card { padding: 2.5rem; } }
.form-card > h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.form-label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy); margin-bottom: .4rem; }
.form-control { border-color: #C9D6E2; border-radius: 10px; padding: .68rem .9rem; color: var(--ink); }
.form-control::placeholder { color: #94A3B5; }
.form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18, 165, 160, .18); }
.form-text { color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.checkbox label { display: flex; align-items: flex-start; font-size: .93rem; }
.checkbox input { margin-top: .35rem; accent-color: var(--teal-600); flex: 0 0 auto; }
.g-recaptcha { margin-top: 1.25rem; }

/* 11. Contact -------------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--teal-100); color: var(--teal-600); display: flex; align-items: center; justify-content: center; }
.contact-list .label { display: block; font-family: var(--font-head); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-list .value, .contact-list .value a { color: var(--ink); font-weight: 500; word-break: break-word; }
.contact-list .value a:hover { color: var(--teal-600); }
.contact-social a { color: var(--navy); }
.contact-social a:hover { color: var(--teal-600); }
.contact-art { display: block; width: 100%; max-width: 480px; margin: 0 auto; }
#map { width: 100%; height: 420px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.legal-note { font-size: .84rem; color: var(--muted); }

/* 12. CTA strip + footer --------------------------------------------------- */
.cta-strip { background: linear-gradient(120deg, var(--teal-700), var(--teal-600) 55%, var(--teal)); color: #fff; padding: 1.75rem 0; }
.cta-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.cta-strip-contact { display: flex; flex-wrap: wrap; gap: .4rem 2rem; font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; }
.cta-strip-contact a { color: #fff; }
.cta-strip-contact .fa-solid { margin-right: .5rem; opacity: .85; font-size: .9em; }
.cta-strip-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-strip .btn-light { --bs-btn-color: var(--teal-700); --bs-btn-hover-color: var(--navy); --bs-btn-bg: #fff; --bs-btn-border-color: #fff; }

.site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); padding: 3.5rem 0 0; font-size: .95rem; }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: #fff; }
.footer-brand { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; margin-bottom: 1rem; }
.footer-heading { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-200); margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
.footer-links li { margin-bottom: .5rem; break-inside: avoid; }
.footer-links .active a { color: #fff; }
.footer-contact { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.footer-contact li { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .55rem; word-break: break-word; }
.footer-contact .fa-solid { color: var(--teal-200); width: 1rem; text-align: center; flex: 0 0 auto; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 3rem; padding: 1.4rem 0; font-size: .84rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
.footer-bottom p { margin: 0; }
.footer-legal { color: rgba(255, 255, 255, .55); }

/* Under construction (_dev.php) */
.dev-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: #fff; background: radial-gradient(800px 500px at 80% 0%, rgba(18, 165, 160, .35), transparent 60%), linear-gradient(135deg, var(--navy), var(--navy-700)); }
.dev-page h1 { color: #fff; font-weight: 800; font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: .6rem; }
.dev-page p { color: rgba(255, 255, 255, .8); font-size: 1.15rem; margin: 0; }
.dev-badge { width: 76px; height: 76px; border-radius: 22px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--teal-200); margin-bottom: 1.5rem; }

/* 13. Content blocks ------------------------------------------------------- */
/* Optional classes for HTML pasted into the admin panel editor (see content-pack/). */
.content-container .block { margin: 3.5rem 0; }
.content-container .block:first-child { margin-top: 0; }
.content-container .block:last-child { margin-bottom: 0; }
.content-container .block-head { max-width: 44rem; margin: 0 auto 2.25rem; text-align: center; }
.content-container .block-head h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; margin: 0 0 .75rem; }
.content-container .block-head p { color: var(--muted); font-size: 1.08rem; margin: 0; }
.content-container .lead-intro { font-size: 1.2rem; color: var(--ink); max-width: 48rem; margin-bottom: 1.75rem; }

/* Full-width coloured band that breaks out of the page container */
.content-container .band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 4rem calc(50vw - 50%); }
.content-container .band-tint { background: var(--tint); }
.content-container .band-navy { background: linear-gradient(135deg, var(--navy), var(--navy-700)); color: rgba(255, 255, 255, .8); }
.content-container .band-navy h2, .content-container .band-navy h3 { color: #fff; }
.content-container .band-navy .block-head p { color: rgba(255, 255, 255, .75); }

.content-container .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.content-container .feature-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.content-container .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.content-container .feature-card img { width: 56px; height: 56px; border-radius: 0; margin-bottom: 1.1rem; display: block; }
.content-container .feature-card h3 { font-size: 1.12rem; margin: 0 0 .5rem; }
.content-container .feature-card p { font-size: .96rem; margin: 0; }
.content-container .feature-card p + p { margin-top: .9rem; }

.content-container .split { display: grid; gap: 2rem; align-items: center; }
.content-container .split img { display: block; width: 100%; max-width: 480px; margin: 0 auto; border-radius: 0; }
.content-container .split h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; margin-top: 0; }
@media (min-width: 992px) {
	.content-container .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
	.content-container .split-reverse > :first-child { order: 2; }
}

.content-container .tick-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.content-container .tick-list li { position: relative; padding-left: 2rem; margin-bottom: .7rem; color: var(--ink); }
.content-container .tick-list li::before { content: ""; position: absolute; left: 0; top: .18em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.800 10.300 2.800 2.800 5.600-6' fill='none' stroke='%23fff' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.content-container .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; text-align: center; }
@media (min-width: 768px) { .content-container .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.content-container .stat-number { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--navy); margin: 0 0 .5rem; }
.content-container .stat-label { font-size: .95rem; color: var(--muted); margin: 0; }
.content-container .band-navy .stat-number { color: #fff; }
.content-container .band-navy .stat-label { color: var(--teal-200); }

.content-container .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.content-container .steps li { counter-increment: step; margin: 0; padding: 1.75rem 1.5rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); position: relative; }
.content-container .steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--teal); margin-bottom: .9rem; }
.content-container .steps h3 { font-size: 1.08rem; margin: 0 0 .45rem; }
.content-container .steps p { font-size: .95rem; margin: 0; }

.content-container .quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; }
.content-container .quote-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.content-container .quote-card blockquote { border: 0; background: none; padding: 0; margin: 0 0 1.5rem; font-size: 1.02rem; color: var(--ink); flex: 1 1 auto; }
.content-container .quote-card blockquote::before { content: "\201C"; display: block; font-family: Georgia, serif; font-size: 3.4rem; line-height: .8; color: var(--teal); margin-bottom: .3rem; }
.content-container .quote-author { display: flex; align-items: center; gap: .9rem; }
.content-container .quote-author img { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.content-container .quote-author p { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.content-container .quote-author strong { display: block; font-family: var(--font-head); color: var(--navy); font-size: .96rem; }

.content-container .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.content-container .team-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); }
.content-container .team-card img { width: 112px; height: 112px; border-radius: 50%; margin-bottom: 1.1rem; }
.content-container .team-card h3 { font-size: 1.12rem; margin: 0 0 .2rem; }
.content-container .team-card .role { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-600); margin-bottom: .9rem; }
.content-container .team-card p { font-size: .94rem; margin: 0; }

.content-container .chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.content-container .chip-list li { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem; font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--navy); }
.content-container .block-head + .chip-list { justify-content: center; }

.content-container .cta-panel { background: linear-gradient(135deg, var(--navy), var(--navy-700)); border-radius: var(--radius-lg); color: rgba(255, 255, 255, .82); padding: 2.5rem 1.75rem; text-align: center; }
.content-container .cta-panel h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; margin: 0 0 .75rem; }
.content-container .cta-panel p { max-width: 40rem; margin: 0 auto 1.5rem; }
.content-container .cta-panel p:last-child { margin-bottom: 0; }
.content-container .cta-panel .btn { margin: .25rem; }
@media (min-width: 768px) { .content-container .cta-panel { padding: 3.5rem 3rem; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}