/*
Theme Name: Caminoro
Theme URI: https://caminoro.com
Author: Caminoro Consulting Ltd
Author URI: https://caminoro.com
Description: Block theme for caminoro.com. Sales effectiveness consultancy: navy, warm white and sandstone banding, EB Garamond headings over IBM Plex Sans text, self-hosted fonts (no third-party font requests).
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caminoro
Tags: business, block-theme, one-column, full-site-editing, custom-colors, custom-menu
*/

/* ------------------------------------------------------------------
   1. Tokens
   Mirrors theme.json so the bespoke rules below stay readable.
------------------------------------------------------------------ */
:root {
	--cam-navy: #0C2D37;
	--cam-ink: #18596E;
	--cam-charcoal: #2F2F2F;
	--cam-warm: #F5F1E8;
	--cam-sand: #C2A95D;
	--cam-sand-lt: #CBB88D;
	--cam-sand-tint: #E7DECA;
	--cam-gold: #B89B4E;
	--cam-amber: #BF6D00;
	--cam-muted: #5A6870;
	--cam-deep: #08222A;
	--cam-rule: rgba(12, 45, 55, .14);
	--cam-rule-rev: rgba(245, 241, 232, .16);
	--cam-text-rev: #D9D2C2;
	--cam-serif: var(--wp--preset--font-family--serif, "EB Garamond", Garamond, serif);
	--cam-sans: var(--wp--preset--font-family--sans, "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Tighten the default block rhythm: paragraphs sit closer than WP's default. */
.wp-block-post-content p,
.cam-section p {
	margin-block-start: 0;
	margin-block-end: 14px;
}

.cam-section p:last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------------------
   2. Sections and bands

   Each full-bleed band owns its own side gutters, so its content box IS the
   1120px column. Everything inside then starts at the same left edge whatever
   its own width, instead of each block being centred individually by the
   constrained-layout rule. None of these bands contains a full-width child, so
   widening their padding cannot break a nested full-bleed block.

   The bands are also stripped of vertical margins: they butt up against each
   other, and the default block gap would otherwise show as a strip of page
   background between every coloured band.
------------------------------------------------------------------ */
.wp-block-group.cam-header,
.wp-block-group.cam-hero,
.wp-block-group.cam-phead,
.wp-block-group.cam-section,
.wp-block-group.cam-band,
.wp-block-group.cam-band-light,
.wp-block-group.cam-article-page.alignfull,
.wp-block-group.cam-footer {
	padding-left: max(28px, calc((100% - 1120px) / 2));
	padding-right: max(28px, calc((100% - 1120px) / 2));
}

.cam-header,
.cam-hero,
.cam-phead,
.cam-section,
.cam-band,
.cam-band-light,
.cam-article-page,
.cam-footer {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cam-section {
	padding-top: 56px;
	padding-bottom: 56px;
}

.cam-section--tight {
	padding-top: 48px;
	padding-bottom: 20px;
}

.cam-section--flush-top {
	padding-top: 0;
}

/* Full-bleed bands must sit flush against each other. WordPress puts a block gap
   between every top-level block and between the sections inside the content, which
   shows as a strip of page background under each coloured band. */
.wp-site-blocks > *,
.wp-site-blocks > * > .alignfull,
.wp-block-post-content > .alignfull {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* WordPress centres any direct child of a constrained container that is narrower
   than the content width, which leaves a standfirst indented relative to the
   headline above it. These elements should line up with the left edge of the
   1120px column instead. The margin resolves to exactly the offset the auto
   margins give a full-width sibling, so the two always agree; on narrow screens
   it collapses to the page gutter, and inside an already-narrow parent it
   resolves to zero.

   !important is deliberate. WordPress generates per-container layout classes whose
   specificity is not fixed, so an ordinary selector cannot be relied on to win. */
div.cam-rule,
p.cam-sub,
p.cam-lead,
p.cam-stand,
p.cam-eyebrow,
.cam-article-page .cam-col {
	margin-left: max(0px, calc((100% - 1120px) / 2)) !important;
	margin-right: 0 !important;
}

.cam-tint {
	background-color: var(--cam-warm);
}

.cam-sandy {
	background-color: var(--cam-sand-tint);
}

.cam-navy {
	background-color: var(--cam-navy);
	color: var(--cam-warm);
}

.cam-navy :where(h1, h2, h3, h4) {
	color: var(--cam-warm);
}

.cam-navy p {
	color: var(--cam-text-rev);
}

.cam-sandy .cam-eyebrow {
	color: #6B5B22;
}

/* Buttons sitting on a dark band flip to the light treatment automatically. */
.cam-navy .wp-block-button__link,
.cam-phead .wp-block-button__link,
.cam-hero .wp-block-button__link,
.cam-band .wp-block-button__link,
.cam-sched .wp-block-button__link,
.wp-block-button.is-style-cam-light .wp-block-button__link {
	background-color: var(--cam-warm);
	color: var(--cam-navy);
}

.cam-navy .wp-block-button__link:hover,
.cam-phead .wp-block-button__link:hover,
.cam-hero .wp-block-button__link:hover,
.cam-band .wp-block-button__link:hover,
.cam-sched .wp-block-button__link:hover,
.wp-block-button.is-style-cam-light .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--cam-navy);
}

/* Columns size by content and align to the top by default; the card grids want
   equal tracks and equal heights, the way a CSS grid row would behave. */
.cam-cards > .wp-block-column,
.cam-steps-4 > .wp-block-column,
.cam-proofcards > .wp-block-column {
	flex-basis: 0;
	align-self: stretch;
}

/* ------------------------------------------------------------------
   3. Small type furniture
------------------------------------------------------------------ */
.cam-eyebrow {
	font-family: var(--cam-sans);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cam-gold);
	margin: 0 0 12px;
}

.cam-navy .cam-eyebrow,
.cam-phead .cam-eyebrow {
	color: var(--cam-sand);
}

/* Short gold rule that opens a dark page head. */
.cam-rule {
	width: 56px;
	max-width: 56px;
	height: 3px;
	background: var(--cam-sand);
	border: 0;
	margin: 0 0 20px;
}

.cam-sub {
	font-size: 18px;
	line-height: 1.55;
	max-width: 62ch;
	margin-top: 16px;
}

.cam-lead {
	font-size: 17.5px;
	max-width: 74ch;
	margin-top: 14px;
}

.cam-meta {
	font-size: 13.5px;
	color: var(--cam-muted);
	margin-top: 14px;
}

.cam-note {
	font-size: 13.5px;
	color: var(--cam-muted);
	margin-top: 12px;
}

/* ------------------------------------------------------------------
   4. Masthead
------------------------------------------------------------------ */
.cam-header {
	background-color: var(--cam-navy);
}

.cam-header .cam-navrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 78px;
	border-bottom: 1px solid var(--cam-rule-rev);
}

.cam-logo {
	display: flex;
	align-items: center;
}

.cam-logo a {
	display: block;
	line-height: 0;
}

.cam-logo svg {
	height: 30px;
	width: auto;
	display: block;
}

/* The mark is drawn in brand colours; reverse it out on navy. */
.cam-logo svg path {
	fill: var(--cam-warm);
}

.cam-logo svg path:first-child {
	fill: var(--cam-sand);
}

.cam-header .wp-block-navigation {
	font-family: var(--cam-sans);
	font-size: 15px;
}

.cam-header .wp-block-navigation .wp-block-navigation__container {
	gap: 28px;
}

/* The navigation sits on navy, so its links have to reverse out. WordPress emits
   its own colour declarations for this block (preset classes carry !important, and
   a colour set on the block in the editor wins outright), so the reversed colour is
   forced here rather than left to specificity. Every shape the block can render is
   covered: plain links, the submenu link wrapper, and the page-list fallback. */
.cam-header .wp-block-navigation,
.cam-header .wp-block-navigation a,
.cam-header .wp-block-navigation a:visited,
.cam-header .wp-block-navigation .wp-block-navigation-item__content,
.cam-header .wp-block-navigation .wp-block-pages-list__item__link {
	color: #DCD6C6 !important;
	text-decoration: none;
}

.cam-header .wp-block-navigation a:hover,
.cam-header .wp-block-navigation a:focus,
.cam-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.cam-header .wp-block-navigation .wp-block-pages-list__item__link:hover {
	color: #FFFFFF !important;
	text-decoration: none;
}

/* Contact sits in an outlined pill. */
.cam-header .wp-block-navigation .cam-nav-cta a,
.cam-header .wp-block-navigation .cam-nav-cta .wp-block-navigation-item__content {
	border: 1px solid rgba(245, 241, 232, .5);
	padding: 9px 16px;
	border-radius: 2px;
	color: var(--cam-warm) !important;
}

.cam-header .wp-block-navigation .cam-nav-cta a:hover,
.cam-header .wp-block-navigation .cam-nav-cta .wp-block-navigation-item__content:hover {
	background: var(--cam-warm);
	color: var(--cam-navy) !important;
}

/* Mobile overlay: dark panel, light links. */
.cam-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--cam-navy) !important;
}

.cam-header .wp-block-navigation__responsive-container.is-menu-open a,
.cam-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: var(--cam-warm) !important;
}

/* Submenus, if one is ever added. */
.cam-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
	color: #DCD6C6 !important;
}

.cam-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--cam-navy);
	border-color: rgba(245, 241, 232, .2);
}

.cam-header .wp-block-navigation__responsive-container-open,
.cam-header .wp-block-navigation__responsive-container-close {
	color: var(--cam-warm);
}

/* ------------------------------------------------------------------
   5. Dark page head (interior pages)
------------------------------------------------------------------ */
.cam-phead {
	background-color: var(--cam-navy);
	color: var(--cam-warm);
	padding-top: 52px;
	padding-bottom: 56px;
}

.cam-phead :where(h1, h2) {
	color: var(--cam-warm);
}

.cam-phead p {
	color: var(--cam-text-rev);
}

/* ------------------------------------------------------------------
   6. Homepage hero
------------------------------------------------------------------ */
.cam-hero {
	background-color: var(--cam-navy);
	color: var(--cam-warm);
	padding-top: 60px;
	padding-bottom: 64px;
}

.cam-hero h1 {
	color: var(--cam-warm);
	font-size: 38px;
}

.cam-hero p {
	color: var(--cam-text-rev);
}

.cam-hero .cam-sub {
	max-width: 54ch;
}

.cam-hero .wp-block-columns {
	gap: 56px;
	align-items: flex-start;
}

.cam-hero .wp-block-buttons {
	margin-top: 24px;
}

.cam-facts {
	border-left: 2px solid var(--cam-sand);
	padding-left: 22px;
}

.cam-facts p {
	padding: 11px 0;
	margin: 0;
	border-bottom: 1px solid var(--cam-rule-rev);
	font-size: 15.5px;
	color: var(--cam-text-rev);
}

.cam-facts p:last-child {
	border-bottom: none;
}

.cam-facts strong {
	color: var(--cam-warm);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   7. Cards
------------------------------------------------------------------ */
.cam-cards {
	margin-top: 28px;
	gap: 24px;
}

.cam-cards + .cam-cards {
	margin-top: 24px;
}

.cam-cards .wp-block-column {
	display: flex;
}

.cam-blk {
	background: #fff;
	border: 1px solid var(--cam-rule);
	padding: 24px 26px;
	width: 100%;
}

.cam-blk h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--cam-navy);
}

.cam-blk p {
	font-size: 16.5px;
	margin: 0;
}

.cam-blk--hi {
	background: var(--cam-navy);
	border-color: var(--cam-navy);
}

.cam-blk--hi h3 {
	color: var(--cam-warm);
}

.cam-blk--hi p {
	color: var(--cam-text-rev);
}

/* Four-up numbered cards on the homepage. */
.cam-steps-4 {
	margin-top: 28px;
	gap: 20px;
	counter-reset: camstep;
}

.cam-steps-4 .wp-block-column {
	display: flex;
}

.cam-stepcard {
	background: var(--cam-warm);
	border-top: 3px solid var(--cam-gold);
	padding: 22px;
	width: 100%;
	counter-increment: camstep;
}

.cam-stepcard::before {
	content: counter(camstep);
	display: block;
	font-family: var(--cam-serif);
	font-size: 22px;
	color: var(--cam-amber);
	line-height: 1;
	margin-bottom: 10px;
}

.cam-stepcard p {
	font-size: 15.5px;
	margin: 0;
}

/* Three plain statements on the sandstone band. */
.cam-proofcards {
	margin-top: 30px;
	gap: 20px;
}

.cam-proofcards .wp-block-column {
	display: flex;
}

.cam-proofcard {
	background: rgba(255, 255, 255, .72);
	border-top: 3px solid var(--cam-navy);
	padding: 20px 22px;
	font-size: 16px;
	width: 100%;
}

.cam-proofcard p {
	margin: 0;
}

/* ------------------------------------------------------------------
   8. Numbered sequence (How We Work)
------------------------------------------------------------------ */
.cam-steps {
	counter-reset: camseq;
	margin-top: 6px;
}

.cam-step {
	counter-increment: camseq;
	position: relative;
	margin-top: 0;
	padding: 26px 0 26px 64px;
	border-top: 1px solid var(--cam-rule);
}

.cam-step:first-child {
	border-top: none;
	padding-top: 6px;
}

.cam-step::before {
	content: counter(camseq);
	position: absolute;
	left: 0;
	top: 26px;
	font-family: var(--cam-serif);
	font-size: 34px;
	line-height: 1;
	color: var(--cam-amber);
}

.cam-step:first-child::before {
	top: 6px;
}

.cam-step h3 {
	font-size: 18px;
	margin: 0 0 8px;
}

.cam-step p {
	font-size: 16.5px;
	max-width: 70ch;
	margin: 0;
}

/* ------------------------------------------------------------------
   9. Insights list
------------------------------------------------------------------ */
.cam-feat {
	background: var(--cam-warm);
	border: 1px solid var(--cam-rule);
	padding: 34px 36px;
}

.cam-feat:hover {
	border-color: var(--cam-gold);
}

.cam-feat h2,
.cam-feat h3 {
	font-family: var(--cam-serif);
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 10px;
}

.cam-feat p {
	font-size: 17.5px;
	max-width: 62ch;
	margin: 0;
}

.cam-feat a {
	text-decoration: none;
}

.cam-feat a:hover {
	text-decoration: underline;
}

.cam-kicker {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cam-gold);
	font-weight: 600;
	margin: 0 0 12px;
}

.cam-rows {
	margin-top: 34px;
}

.cam-row {
	display: grid;
	grid-template-columns: 1fr 200px;
	gap: 28px;
	align-items: start;
	margin-top: 0;
	padding: 26px 0;
	border-top: 1px solid var(--cam-rule);
}

.cam-row h2,
.cam-row h3 {
	font-family: var(--cam-serif);
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 6px;
}

.cam-row p {
	font-size: 16px;
	color: var(--cam-muted);
	margin: 0;
}

.cam-row a {
	text-decoration: none;
}

.cam-row a:hover {
	color: var(--cam-ink);
	text-decoration: underline;
}

.cam-row .cam-meta {
	text-align: right;
	margin-top: 0;
}

/* Two-up article cards (homepage). */
.cam-art {
	background: var(--cam-warm);
	border: 1px solid var(--cam-rule);
	padding: 24px 26px;
	width: 100%;
}

.cam-art:hover {
	border-color: var(--cam-gold);
}

.cam-art h2,
.cam-art h3 {
	font-family: var(--cam-serif);
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 6px;
}

.cam-art p {
	font-size: 16px;
	color: var(--cam-muted);
	margin: 0;
}

.cam-art a {
	text-decoration: none;
}

.cam-art a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   10. Article page
------------------------------------------------------------------ */
.cam-article-page {
	background: var(--cam-warm);
}

/* Reading column: 680px, sitting at the left edge of the 1120px content column
   rather than centred in it. The margin resolves to the same left edge the wide
   pages use, and collapses to the page gutter on narrow screens. The doubled
   selectors outrun the constrained-layout rule that would otherwise centre it. */
.cam-article-page .cam-col,
.wp-block-group.cam-col,
.wp-block-post-content.cam-col {
	max-width: 680px;
	margin-left: max(0px, calc((100% - 1120px) / 2));
	margin-right: 0;
}

.cam-arthead {
	padding-top: 48px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--cam-rule);
}

.cam-arthead h1 {
	margin: 0;
}

.cam-stand {
	font-size: 19px;
	line-height: 1.5;
	color: var(--cam-muted);
	margin: 16px 0 0;
	max-width: 640px;
}

.cam-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 22px;
	font-size: 14px;
	color: var(--cam-muted);
}

.cam-byline strong {
	color: var(--cam-navy);
	font-weight: 600;
}

/* The reading treatment is keyed to the class AND to the template wrapper, so a
   text page still reads correctly even if the class does not reach the content
   block. Everything below is written as .cam-body ... and repeated for the
   template-scoped selector. */
.cam-body,
.cam-article-page .wp-block-post-content {
	padding-top: 34px;
	padding-bottom: 10px;
	font-size: 18px;
	line-height: 1.7;
}

.cam-article-page .wp-block-post-content {
	max-width: 680px;
	margin-left: max(0px, calc((100% - 1120px) / 2));
	margin-right: 0;
	padding-top: 0;
}

.cam-article-page .cam-body .wp-block-post-content {
	font-size: inherit;
	line-height: inherit;
	max-width: none;
	margin-left: 0;
	padding-top: 0;
	padding-bottom: 0;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) h2 {
	font-family: var(--cam-sans);
	font-size: 19px;
	font-weight: 600;
	color: var(--cam-navy);
	margin: 36px 0 10px;
	line-height: 1.4;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) h3 {
	font-size: 17px;
	margin: 26px 0 8px;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) p {
	margin: 0 0 18px;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) ul {
	padding-left: 0;
	list-style: none;
	margin: 0 0 18px;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) ul li {
	padding: 0 0 8px 22px;
	position: relative;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 12px;
	width: 7px;
	height: 1.5px;
	background: var(--cam-gold);
}

:is(.cam-body, .cam-article-page .wp-block-post-content) ol {
	padding-left: 22px;
	margin: 0 0 18px;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) ol li {
	padding-bottom: 8px;
}

/* Pull quote: a paragraph carrying the Caminoro block style, a paragraph with the
   class typed in by hand, or a core pullquote block. */
.cam-pull,
.is-style-cam-pull,
:is(.cam-body, .cam-article-page .wp-block-post-content) .wp-block-pullquote {
	border: 0;
	border-left: 3px solid var(--cam-gold);
	padding: 4px 0 4px 20px;
	margin: 26px 0;
	font-family: var(--cam-serif);
	font-size: 23px;
	line-height: 1.35;
	color: var(--cam-navy);
	text-align: left;
	font-style: normal;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) .wp-block-pullquote p {
	font-size: inherit;
	line-height: inherit;
	font-style: normal;
	margin: 0;
}

/* Tables inside an article. Core ships only hairline borders in the current text
   colour; this gives them the same rule weights as the rest of the reading page,
   and lets a wide table scroll rather than burst the 680px column. */
:is(.cam-body, .cam-article-page .wp-block-post-content) .wp-block-table {
	margin: 4px 0 22px;
	overflow-x: auto;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.5;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) th {
	text-align: left;
	font-weight: 600;
	color: var(--cam-navy);
	border: 0;
	border-bottom: 2px solid var(--cam-navy);
	padding: 0 16px 8px 0;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) td {
	border: 0;
	border-bottom: 1px solid var(--cam-rule);
	padding: 12px 16px 12px 0;
	vertical-align: top;
}

:is(.cam-body, .cam-article-page .wp-block-post-content) tr:last-child td {
	border-bottom: none;
}

.cam-cite,
.is-style-cam-sources {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cam-muted);
	border-top: 1px solid var(--cam-rule);
	padding-top: 14px;
	margin-top: 30px;
}

.cam-author {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 18px;
	align-items: start;
	border-top: 1px solid var(--cam-rule);
	margin-top: 34px;
	padding-top: 24px;
}

.cam-author img,
.cam-author .cam-ph {
	width: 64px;
	height: 64px;
	border-radius: 2px;
	object-fit: cover;
}

.cam-author p {
	font-size: 15.5px;
	margin: 0 0 6px;
	color: var(--cam-muted);
}

.cam-author strong {
	color: var(--cam-navy);
}

/* Light CTA band used at the foot of a reading page. */
.cam-band-light {
	background: var(--cam-sand-tint);
	padding-top: 44px;
	padding-bottom: 44px;
}

.cam-band-light p {
	font-family: var(--cam-serif);
	font-size: 23px;
	line-height: 1.3;
	color: var(--cam-navy);
	margin: 0;
	max-width: 46ch;
}

.cam-band-light .wp-block-button__link {
	background-color: var(--cam-navy);
	color: var(--cam-warm);
}

/* ------------------------------------------------------------------
   11. CTA band (dark)
------------------------------------------------------------------ */
.cam-band {
	background-color: var(--cam-navy);
	padding-top: 44px;
	padding-bottom: 44px;
}

.cam-band .cam-band-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.cam-band p {
	font-family: var(--cam-serif);
	font-size: 24px;
	line-height: 1.3;
	color: var(--cam-warm);
	margin: 0;
	max-width: 46ch;
}

/* ------------------------------------------------------------------
   12. Bios
------------------------------------------------------------------ */
.cam-bios {
	margin-top: 28px;
}

.cam-bio {
	display: grid;
	grid-template-columns: 132px 1fr;
	gap: 28px;
	align-items: start;
	padding-top: 28px;
	margin-top: 38px;
	border-top: 1px solid var(--cam-rule);
}

.cam-bio:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.cam-bio img,
.cam-bio .cam-ph {
	width: 132px;
	height: 158px;
	object-fit: cover;
	border-radius: 2px;
	background: var(--cam-sand-tint);
}

.cam-bio h3 {
	font-size: 19px;
	margin: 0 0 2px;
}

.cam-bio .cam-role {
	font-size: 13.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cam-gold);
	font-weight: 600;
	margin: 0 0 12px;
}

.cam-bio p {
	font-size: 16.5px;
	max-width: 74ch;
	margin: 0;
}

.cam-bio .cam-li {
	font-size: 14.5px;
	display: inline-block;
	margin-top: 12px;
}

/* Photo slots accept either an <img> typed into the HTML block or a core Image
   block; the figure wrapper just needs its default margin removing. */
.cam-bio figure,
.cam-author figure {
	margin: 0;
}

.cam-bio figure img {
	width: 132px;
	height: 158px;
}

.cam-author figure img {
	width: 64px;
	height: 64px;
}

/* Placeholder tile used until real photography is in place. */
.cam-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	color: #6B5B22;
	background: var(--cam-sand-tint);
}

/* ------------------------------------------------------------------
   13. Contact
------------------------------------------------------------------ */
.cam-contact {
	gap: 34px;
	margin-top: 8px;
}

.cam-sched {
	background: var(--cam-navy);
	color: var(--cam-warm);
	padding: 30px 32px;
	width: 100%;
}

.cam-sched h2 {
	color: var(--cam-warm);
	font-size: 23px;
	margin: 0;
}

.cam-sched p {
	color: var(--cam-text-rev);
	font-size: 16.5px;
	margin-top: 12px;
}

.cam-embed {
	border: 1px dashed rgba(245, 241, 232, .4);
	padding: 26px;
	text-align: center;
	color: #BFC9CE;
	font-size: 14px;
	margin: 20px 0;
}

.cam-form h3 {
	font-size: 19px;
	margin: 0 0 14px;
}

.cam-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cam-navy);
	margin: 0 0 5px;
}

.cam-form .cam-field {
	margin-bottom: 16px;
}

.cam-form input,
.cam-form textarea,
.cam-form select {
	width: 100%;
	font: 16px var(--cam-sans);
	color: var(--cam-charcoal);
	border: 1px solid var(--cam-rule);
	background: #fff;
	padding: 10px 12px;
	border-radius: 2px;
}

.cam-form textarea {
	height: 96px;
	resize: vertical;
}

.cam-form button,
.cam-form input[type="submit"] {
	width: auto;
	background: var(--cam-navy);
	color: var(--cam-warm);
	border: 0;
	font-size: 15px;
	font-weight: 500;
	padding: 12px 22px;
	border-radius: 2px;
	cursor: pointer;
}

/* HubSpot's own form styles land inside this wrapper; keep them in register. */
.cam-form .hs-form-field {
	margin-bottom: 16px;
}

.cam-form .hs-error-msg {
	color: #A3372B;
	font-size: 13.5px;
}

/* ------------------------------------------------------------------
   14. Footer
------------------------------------------------------------------ */
.cam-footer {
	background-color: var(--cam-deep);
	color: #A9B6BC;
	font-size: 13.5px;
	padding-top: 30px;
	padding-bottom: 30px;
}

.cam-footer p {
	margin: 0;
	font-size: 13.5px;
	color: #A9B6BC;
}

.cam-footer a {
	color: #CFD8DC;
	text-decoration: none;
}

.cam-footer a:hover {
	text-decoration: underline;
}

.cam-footer .cam-footrow {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	align-items: baseline;
}

.cam-footer .wp-block-navigation {
	font-size: 13.5px;
}

.cam-footer .wp-block-navigation .wp-block-navigation__container {
	gap: 18px;
}

.cam-footer .cam-legal {
	max-width: 74ch;
}

/* ------------------------------------------------------------------
   15. Responsive
------------------------------------------------------------------ */
@media (max-width: 860px) {
	.cam-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.cam-hero {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.cam-hero h1 {
		font-size: 32px;
	}

	.cam-hero .wp-block-columns {
		gap: 28px;
	}

	.cam-phead {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.cam-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.cam-row .cam-meta {
		text-align: left;
	}

	.cam-bio {
		grid-template-columns: 110px 1fr;
		gap: 22px;
	}

	.cam-bio img,
	.cam-bio .cam-ph {
		width: 110px;
		height: 132px;
	}

	.cam-band .cam-band-in {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.cam-band p,
	.cam-band-light p {
		font-size: 21px;
	}

	:is(.cam-body, .cam-article-page .wp-block-post-content) {
		font-size: 17px;
	}

	.cam-step {
		padding-left: 0;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.cam-step::before {
		position: static;
		display: block;
		font-size: 26px;
		margin-bottom: 6px;
	}

	.cam-step:first-child::before {
		top: auto;
	}
}

@media (max-width: 600px) {
	.cam-bio {
		grid-template-columns: 1fr;
	}

	.cam-feat {
		padding: 24px 22px;
	}

	.cam-feat h2,
	.cam-feat h3 {
		font-size: 24px;
	}
}

/* ------------------------------------------------------------------
   16. Accessibility helpers
------------------------------------------------------------------ */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--cam-amber);
	outline-offset: 2px;
}

.cam-navy :where(a):focus-visible,
.cam-header :where(a, button):focus-visible,
.cam-footer :where(a):focus-visible {
	outline-color: var(--cam-sand);
}