/*
 * cosmick-2026.css — the 2026 presentation layer.
 * ---------------------------------------------------------------------------
 * This is the single source of truth for the approved design's tokens and
 * shared components. Everything new is namespaced `cm-`.
 *
 * WHY THE PREFIX IS NOT OPTIONAL
 * The approved reference names its components .btn .card .tag .input .check
 * .section .wrap .container. Every one of those collides with something this
 * theme already ships:
 *     .btn        114 class attributes in PHP, defined in 4 stylesheets
 *     .card       125 class attributes, defined in Bootstrap inside style.css
 *     .container  176 class attributes (Bootstrap grid, used by footer.php)
 *     .section    378 class attributes
 *     .check      121 class attributes
 *     .tag         33 class attributes, defined in mobile-adjustments.css
 * Adopting the reference's bare names would silently restyle Bootstrap and
 * Gravity Forms across the whole site. So every component here is `cm-`.
 *
 * WHERE THIS FILE LOADS
 * header.php calls wp_head() early (line 28) and then hardcodes stylesheet
 * <link> tags after it. An *enqueued* sheet therefore always loses an
 * equal-specificity tie, which is why mobile-adjustments.css needs 414
 * !important rules. This file is hardcoded LAST, after cosmick-tokens.css and
 * home-2026.css, so it wins on source order alone and needs no !important.
 * Do not move it earlier and do not convert it to wp_enqueue_style().
 *
 * ACCESSIBILITY DEVIATIONS FROM THE REFERENCE (deliberate, see deviation register)
 *   D4 .cm-input border   #cbbfb4 -> #a28c79   reference is 1.70:1 on paper; 1.4.11 needs 3:1
 *   D5 .cm-btn-secondary  #cfc5bc -> #9a8573   reference is 1.46:1 on sand;  1.4.11 needs 3:1
 *   D6 .cm-btn-on-dark    rgba(255,255,255,.35) -> .40   reference is 2.79:1 on charcoal
 * All 18 of the reference's text colour pairs were measured and pass AA
 * unchanged, so the type palette below is the reference's, untouched.
 */

:root {
	/* ---- Brand palette (verbatim from the approved reference) ---- */
	--cm26-brand:        #ff675b; /* coral, decorative accents only */
	--cm26-brand-ink:    #b8352b; /* 5.54:1 on paper — carries text + actions */
	--cm26-brand-hover:  #9c2c23;
	--cm26-brand-deep:   #8f1d15;
	--cm26-ink:          #262423; /* 14.60:1 on paper */
	--cm26-charcoal:     #3c3c3c;
	--cm26-paper:        #fbf8f5;
	--cm26-sand:         #f3ede7;
	--cm26-line:         #e4dcd4; /* decorative hairline — 1.4.11 does not apply */
	--cm26-stone:        #6b6460; /* 5.49:1 on paper */
	--cm26-body:         #4a4542; /* 8.94:1 on paper — lede, tag, module copy */
	--cm26-prose:        #34302e; /* 12.34:1 on paper */
	--cm26-card:         #fffdfb;
	--cm26-tint:         #fff4f2; /* selected-choice tint */
	--cm26-on-brand:     #fffaf7; /* 5.66:1 on brand-ink */

	/* ---- On charcoal (dark bands: leadership, closing CTA, footer) ---- */
	--cm26-dark-primary:   #ece6e0; /* 8.91:1 */
	--cm26-dark-secondary: #ddd5ce; /* 7.61:1 */
	--cm26-dark-muted:     #bdb3aa; /* 5.35:1 */
	--cm26-dark-link:      #ff9a90; /* 5.40:1 */
	--cm26-dark-panel:     #4a4846;

	/* ---- Corrected UI boundaries (see D4/D5/D6 above) ---- */
	--cm26-input-border:   #a28c79; /* was #cbbfb4 — now 3.02:1 */
	--cm26-input-hover:    #8a7461;
	--cm26-btn2-border:    #9a8573; /* was #cfc5bc — now 3.02:1 */
	--cm26-on-dark-border: rgba(255, 255, 255, 0.40); /* was .35 — now 3.20:1 */

	/* ---- Status ---- */
	--cm26-error:       #a3221a; /* 7.09:1 on paper */
	--cm26-error-line:  #b3261e;

	/* ---- Type ---- */
	--cm26-font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--cm26-font-body:    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* ---- Layout ---- */
	--cm26-container:  1240px;
	--cm26-gutter:     clamp(20px, 4vw, 40px);
	--cm26-section-y:  clamp(44px, 7vw, 84px);
	--cm26-header-h:   72px;

	/* ---- Surfaces ---- */
	--cm26-radius:        10px;
	--cm26-radius-card:   14px;
	--cm26-radius-pop:    12px;
	--cm26-radius-input:   9px;
	--cm26-radius-sm:      8px;
	--cm26-radius-tag:     6px;
	--cm26-shadow-card:   0 1px 2px #2624230d, 0 8px 24px -12px #26242324;
	--cm26-shadow-pop:    0 20px 40px -18px #26242347;
	--cm26-shadow-float:  0 30px 60px -30px #26242359;
	--cm26-shadow-lift:   0 20px 40px -20px #26242366;

	/* ---- Motion ---- */
	--cm26-ease: cubic-bezier(.22, .8, .24, 1);
}

/* ===========================================================================
   BASE
   Deliberately narrow. No Tailwind preflight, no global `* { border-color }`,
   no blanket element resets — those would reach into Gravity Forms, the
   Bootstrap grid and every plugin widget on the page.
   =========================================================================== */

body {
	background: var(--cm26-paper);
	color: var(--cm26-ink);
	font-family: var(--cm26-font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
	body { font-size: 17.5px; }
}

html {
	/* Anchor targets must clear the sticky header. The admin bar adds its own
	   offset below when a logged-in user is viewing the front end. */
	scroll-padding-top: calc(var(--cm26-header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body.admin-bar {
	--cm26-admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar { --cm26-admin-bar-h: 46px; }
}

html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--cm26-header-h) + var(--cm26-admin-bar-h, 0px) + 16px);
}

h1, h2, h3, h4, h5 {
	font-family: var(--cm26-font-display);
	color: var(--cm26-ink);
	letter-spacing: -.015em;
	/*
	 * style.css carries `h1, .h1 { text-transform: uppercase }` from the
	 * previous design, which rendered every page's main heading in caps. The
	 * approved design is sentence case throughout, and the hero headline in
	 * particular depends on it (its mixed-case wrapping and the coral
	 * "built for growth." span both read wrong in caps). Components that are
	 * genuinely uppercase — the eyebrow, the client-strip label, the footer
	 * column headings — set `text-transform` themselves.
	 */
	text-transform: none;
}

::selection {
	color: var(--cm26-ink);
	background: #ffd9d5;
}

/* The reference suppresses the focus ring only inside .cm-input, which
   replaces it with a 3px box-shadow ring of its own. Everywhere else the
   ring must stay visible — it is measured at 5.54:1 on paper and 5.78:1 on
   card, both above the 3:1 that 1.4.11 asks of a focus indicator. */
:focus-visible {
	outline: 3px solid var(--cm26-brand-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ===========================================================================
   LAYOUT PRIMITIVES
   =========================================================================== */

.cm-wrap {
	width: 100%;
	max-width: var(--cm26-container);
	padding-inline: var(--cm26-gutter);
	margin-inline: auto;
}

.cm-section       { padding-block: var(--cm26-section-y); }
.cm-section-tight { padding-block: calc(var(--cm26-section-y) * .7); }

.cm-band-sand     { background: var(--cm26-sand); border-block: 1px solid var(--cm26-line); }
.cm-band-sand-60  { background: rgba(243, 237, 231, .6); border-block: 1px solid var(--cm26-line); }

.cm-band-dark {
	position: relative;
	background: var(--cm26-charcoal);
	/* The reference's dark bands are `text-paper` (#fbf8f5), not #ece6e0 —
	   measured directly off the rendered team section. */
	color: var(--cm26-paper);
}

/*
 * Headings on a dark band are PAPER (#fbf8f5), matching the reference's
 * `!text-paper`, not the dimmer #ece6e0 this rule used to apply.
 *
 * The override itself is unavoidable: style.css paints `h2 { color: rgb(23,
 * 13, 30) }` and this file normalises `h2 { color: var(--cm26-ink) }`, both
 * element-level, so a heading cannot simply inherit the band's colour —
 * dropping the rule turned the team heading ink-on-charcoal. Only the value
 * was ever wrong. #fbf8f5 on #3c3c3c is 10.1:1 against #ece6e0's 8.9:1, so
 * matching the reference also improves contrast.
 * --cm26-dark-primary still drives the focus ring below.
 */
.cm-band-dark h1, .cm-band-dark h2, .cm-band-dark h3,
.cm-band-dark h4, .cm-band-dark h5 { color: var(--cm26-paper); }

.cm-band-dark a:not(.cm-btn):not(.cm-person-link):not(.cm-leader) { color: var(--cm26-dark-link); }
.cm-band-dark .cm-person-link,
.cm-band-dark .cm-leader { color: inherit; }

.cm-band-dark :focus-visible { outline-color: var(--cm26-dark-primary); }

/* Subtle dot texture on the dark bands. Decorative only. */
.cm-grain { position: relative; }

.cm-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 4px 4px;
}

/* ===========================================================================
   TYPE
   =========================================================================== */

.cm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cm26-font-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cm26-brand-ink);
}

.cm-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--cm26-brand);
	flex: 0 0 auto;
}

.cm-band-dark .cm-eyebrow { color: var(--cm26-dark-link); }

.cm-h-hero {
	font-size: clamp(34px, 5.4vw, 64px);
	line-height: 1.04;
	letter-spacing: -.03em;
	font-weight: 800;
	text-wrap: balance;
}

.cm-h-page {
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.08;
	letter-spacing: -.028em;
	font-weight: 800;
	text-wrap: balance;
	max-width: 22ch;
}

.cm-h-section {
	font-size: clamp(28px, 3.3vw, 40px);
	line-height: 1.12;
	letter-spacing: -.022em;
	font-weight: 700;
	text-wrap: balance;
}

.cm-h-card {
	font-size: clamp(19px, 1.6vw, 22px);
	line-height: 1.25;
	font-weight: 700;
}

.cm-lede {
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.6;
	color: var(--cm26-body);
	max-width: 62ch;
}

.cm-band-dark .cm-lede { color: var(--cm26-dark-secondary); }

.cm-muted { color: var(--cm26-stone); }
.cm-band-dark .cm-muted { color: var(--cm26-dark-muted); }

/* ===========================================================================
   BUTTONS
   =========================================================================== */

.cm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid transparent;
	border-radius: var(--cm26-radius);
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .005em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color .18s var(--cm26-ease),
		color .18s var(--cm26-ease),
		border-color .18s var(--cm26-ease),
		transform .18s var(--cm26-ease);
}

.cm-btn:active:not(:disabled) { transform: translateY(1px); }

.cm-btn:disabled,
.cm-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.cm-btn-primary { background: var(--cm26-brand-ink); color: var(--cm26-on-brand); }
.cm-btn-primary:hover:not(:disabled),
.cm-btn-primary:focus-visible { background: var(--cm26-brand-hover); color: var(--cm26-on-brand); }

/*
 * The primary button's arrow is a BORDER CARET, not an icon.
 *
 * The reference draws it as a 7x7 box showing only its top and right border,
 * rotated 45deg — a hairline chevron 1.5px thick and ~9.9px on the diagonal.
 * Three templates used to pass cm_icon('chevron-right') into the button
 * instead; that SVG is 16px wide with a 1.75px stroke, so it read heavier and
 * measured 24px wider once its 8px gap was counted. On the homepage CTA band
 * that extra width mattered: the band is a `1.4fr auto` grid, the button sits
 * in the `auto` track, and the 1.22px it stole from the heading track was
 * exactly enough to push "Tell us what you want to improve." onto a second
 * line (676.31px of text in a 675.09px box).
 *
 * Generating it here instead of in markup also matches the reference's reach:
 * EVERY primary button gets the caret, including .cm-btn-sm in the header,
 * rather than the three that happened to be passed an icon.
 */
.cm-btn-primary { gap: 16px; }

.cm-btn-primary::after {
	content: "";
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-top: 1.5px solid;
	border-right: 1.5px solid;
	transform: rotate(45deg);
}

.cm-btn-secondary {
	background: transparent;
	color: var(--cm26-ink);
	border-color: var(--cm26-btn2-border); /* D5 */
}

.cm-btn-secondary:hover:not(:disabled) {
	border-color: var(--cm26-charcoal);
	background: var(--cm26-sand);
}

.cm-btn-on-dark {
	background: transparent;
	color: var(--cm26-paper);
	border-color: var(--cm26-on-dark-border); /* D6 */
}

.cm-btn-on-dark:hover:not(:disabled) {
	background: rgba(255, 255, 255, .06);
	border-color: var(--cm26-paper);
}

.cm-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* Text link with the sliding arrow. */
.cm-tlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--cm26-brand-ink);
	text-decoration: underline transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: text-decoration-color .18s var(--cm26-ease);
}

.cm-tlink:hover,
.cm-tlink:focus-visible { text-decoration-color: currentColor; color: var(--cm26-brand-ink); }

.cm-tlink svg,
.cm-tlink .cm-arrow { transition: transform .2s var(--cm26-ease); }
.cm-tlink:hover svg,
.cm-tlink:hover .cm-arrow { transform: translateX(3px); }

.cm-band-dark .cm-tlink { color: var(--cm26-dark-link); }

/* ===========================================================================
   SURFACES
   =========================================================================== */

.cm-card {
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-card);
	box-shadow: var(--cm26-shadow-card);
}

.cm-card-link { transition: border-color .2s var(--cm26-ease), transform .25s var(--cm26-ease); }
.cm-card-link:hover { border-color: #cdbfb3; }

.cm-tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--cm26-radius-tag);
	background: var(--cm26-sand);
	color: var(--cm26-body);
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
}

.cm-media-frame {
	background: var(--cm26-sand);
	border-radius: var(--cm26-radius);
	overflow: hidden;
}

.cm-media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .6s var(--cm26-ease);
}

.cm-group:hover .cm-media-frame img { transform: scale(1.025); }

/* Faux browser chrome above a screenshot. */
.cm-browser-bar {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding-inline: 10px;
	background: rgba(255, 255, 255, .75);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.cm-browser-bar i {
	width: 7px;
	height: 7px;
	border-radius: 99px;
	background: #d9cfc6;
	display: block;
}

/* ===========================================================================
   SELECTED-WORK GRID
   The 760px and 1100px breakpoints are bespoke to this design and deliberately
   do NOT map onto Bootstrap's ladder. Approximating them with the nearest
   Bootstrap breakpoint changes the composition.
   =========================================================================== */

.cm-showcase {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.cm-showcase > article { display: grid; grid-template-rows: auto 1fr; }

@media (min-width: 760px) {
	.cm-showcase { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
	.cm-showcase { grid-template-columns: repeat(12, 1fr); }
	.cm-showcase > :first-child    { grid-column: span 7; }
	.cm-showcase > :nth-child(2),
	.cm-showcase > :nth-child(3)   { grid-column: span 5; }
	.cm-showcase > :nth-child(4)   { grid-column: span 7; }
}

/* ===========================================================================
   HEADER / NAV
   =========================================================================== */

.cm-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(251, 248, 245, .92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--cm26-line);
}

/* A logged-in editor viewing the front end must not have the admin bar
   overlap the sticky header. */
body.admin-bar .cm-site-header { top: var(--cm26-admin-bar-h, 32px); }

.cm-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--cm26-header-h);
}

.cm-nav-pop {
	position: absolute;
	top: calc(100% + 10px);
	left: -12px;
	min-width: 300px;
	padding: 10px;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-pop);
	box-shadow: var(--cm26-shadow-pop);
	animation: cm-pop .18s var(--cm26-ease);
}

.cm-nav-pop a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--cm26-radius-sm);
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	color: var(--cm26-ink);
}

.cm-nav-pop a:hover,
.cm-nav-pop a:focus-visible { background: var(--cm26-sand); }

.cm-nav-pop a small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--cm26-stone);
}

/* Skip link. Visible on focus, never hidden from assistive technology. */
.cm-skip {
	position: absolute;
	top: -60px;
	left: 12px;
	z-index: 100;
	padding: 10px 14px;
	border-radius: var(--cm26-radius-sm);
	background: var(--cm26-ink);
	color: #fff;
	text-decoration: none;
}

.cm-skip:focus { top: 12px; }
body.admin-bar .cm-skip:focus { top: calc(12px + var(--cm26-admin-bar-h, 32px)); }

/* ===========================================================================
   FORM CONTROLS
   These styles are consumed by the Gravity Forms layer in gravity-forms.css,
   which maps real .gfield / .ginput_container markup onto these tokens. They
   are defined here so there is exactly one definition of a field.
   =========================================================================== */

.cm-field { display: grid; gap: 6px; }

.cm-field label,
.cm-legend {
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cm26-ink);
}

.cm-req { color: var(--cm26-brand-ink); margin-left: 3px; }

.cm-input {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	background: var(--cm26-card);
	color: var(--cm26-ink);
	border: 1.5px solid var(--cm26-input-border); /* D4 */
	border-radius: var(--cm26-radius-input);
	font-family: var(--cm26-font-body);
	font-size: 16px; /* 16px keeps iOS from zooming on focus */
	transition: border-color .15s var(--cm26-ease), box-shadow .15s var(--cm26-ease);
}

textarea.cm-input { min-height: 132px; resize: vertical; }

.cm-input:hover { border-color: var(--cm26-input-hover); }

.cm-input:focus {
	border-color: var(--cm26-brand-ink);
	outline: none; /* replaced by the ring below, which is 5.54:1 on paper */
	box-shadow: 0 0 0 3px rgba(184, 53, 43, .18);
}

.cm-input[aria-invalid="true"] { border-color: var(--cm26-error-line); }

.cm-hint { color: var(--cm26-stone); font-size: 13.5px; }
.cm-err  { color: var(--cm26-error); font-size: 13.5px; font-weight: 500; }

.cm-check {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: start;
	gap: 10px;
	padding: 10px 12px;
	background: var(--cm26-card);
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-input);
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
}

.cm-check:has(input:checked) {
	border-color: var(--cm26-brand-ink);
	background: var(--cm26-tint);
}

.cm-check input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--cm26-brand-ink);
}

/* ===========================================================================
   LONG-FORM PROSE
   Scoped to .cm-prose so it only applies where a template opts in. It must
   never leak onto plugin output or the Bootstrap grid.
   =========================================================================== */

.cm-prose {
	max-width: 72ch;
	font-size: 17.5px;
	line-height: 1.75;
	color: var(--cm26-prose);
}

.cm-prose > * + *        { margin-top: 1.05em; }
.cm-prose h2             { margin-top: 1.9em; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; }
.cm-prose h3             { margin-top: 1.6em; font-size: 21px; font-weight: 700; }
.cm-prose h4,
.cm-prose h5,
.cm-prose h6             { margin-top: 1.4em; font-size: 18px; font-weight: 700; }
.cm-prose a              { color: var(--cm26-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.cm-prose ul             { padding-left: 1.3em; list-style: outside disc; }
.cm-prose ol             { padding-left: 1.3em; list-style: outside decimal; }
.cm-prose li + li        { margin-top: .45em; }
.cm-prose li::marker     { color: var(--cm26-brand); }
.cm-prose blockquote     { border-left: 3px solid var(--cm26-brand); padding-left: 1.1em; color: var(--cm26-body); font-style: italic; }
.cm-prose img            { border: 1px solid var(--cm26-line); border-radius: var(--cm26-radius); }
.cm-prose figcaption     { margin-top: 6px; font-size: 14px; color: var(--cm26-stone); }
.cm-prose hr             { border: 0; border-top: 1px solid var(--cm26-line); margin-block: 2em; }
.cm-prose strong         { color: var(--cm26-ink); }
.cm-prose p:empty        { display: none; }

/* A wide table gets its own scroll region rather than making the page scroll
   sideways, which 1.4.10 Reflow forbids. The region is focusable so it is
   reachable by keyboard. */
.cm-prose .cm-table-scroll,
.cm-prose > table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 15px;
}

.cm-prose th,
.cm-prose td { border: 1px solid var(--cm26-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.cm-prose th { background: var(--cm26-sand); font-weight: 600; }

/* ===========================================================================
   MOTION
   =========================================================================== */

@keyframes cm-pop  { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.cm-rise   { animation: cm-rise .7s var(--cm26-ease) both; }
.cm-rise-2 { animation-delay: 80ms; }
.cm-rise-3 { animation-delay: .16s; }
.cm-rise-4 { animation-delay: .26s; }

/*
 * Reduced motion. Content must stay visible when animation is suppressed —
 * a reveal animation that starts at opacity:0 and never runs would leave the
 * page blank, which is how reveal-on-scroll layers usually fail.
 */
@media (prefers-reduced-motion: reduce) {
	.cm-rise,
	.cm-nav-pop {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.cm-media-frame img,
	.cm-btn,
	.cm-tlink,
	.cm-card-link,
	.cm-input { transition-duration: .001ms !important; }

	.cm-group:hover .cm-media-frame img { transform: none; }
}

/* ===========================================================================
   UTILITIES  (a deliberately small set — not a utility framework)
   =========================================================================== */

.cm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.cm-stack-6  { display: grid; gap: 24px; }
.cm-stack-4  { display: grid; gap: 16px; }
.cm-stack-3  { display: grid; gap: 12px; }
.cm-row      { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cm-aspect-16-10 { aspect-ratio: 16 / 10; }
.cm-aspect-16-9  { aspect-ratio: 16 / 9; }

/* ===========================================================================
   HEADER — logo, desktop nav, dropdowns, mobile trigger
   Breakpoints are the reference's: desktop nav appears at 1024px, the header
   phone at 1280px.
   =========================================================================== */

.cm-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cm-logo-img { height: 38px; width: auto; display: block; }

@media (min-width: 768px) { .cm-logo-img { height: 42px; } }

.cm-nav { display: none; }

@media (min-width: 1024px) { .cm-nav { display: block; } }

.cm-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-nav-item { position: relative; display: flex; align-items: center; }

.cm-nav-link {
	display: inline-block;
	padding: 8px 12px;
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--cm26-ink);
	text-decoration: none;
	border-radius: var(--cm26-radius-sm);
}

.cm-nav-item--group > .cm-nav-link { padding: 8px 4px 8px 12px; }

.cm-nav-link:hover,
.cm-nav-link.is-current { color: var(--cm26-brand-ink); }

/* The disclosure button is a separate control from the link, so the group's
   own page stays reachable in one keystroke. */
.cm-nav-toggle {
	display: grid;
	place-items: center;
	width: 28px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cm26-stone);
	border-radius: var(--cm26-radius-sm);
	cursor: pointer;
}

.cm-nav-toggle:hover { background: var(--cm26-sand); color: var(--cm26-ink); }
.cm-nav-toggle .cm-chevron { transition: transform .18s var(--cm26-ease); }
.cm-nav-toggle[aria-expanded="true"] .cm-chevron { transform: rotate(180deg); }

.cm-nav-pop ul { list-style: none; margin: 0; padding: 0; }
.cm-nav-pop-all > a { font-family: var(--cm26-font-display); font-weight: 700; }

@media (min-width: 1100px) {
	.cm-nav-pop--wide ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 4px;
		width: 540px;
	}
	.cm-nav-pop--wide .cm-nav-pop-all { grid-column: span 2; }
}

.cm-header-right { display: flex; align-items: center; gap: 12px; }

.cm-header-phone {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--cm26-stone);
	text-decoration: none;
}

.cm-header-phone:hover { color: var(--cm26-ink); }

@media (min-width: 1280px) { .cm-header-phone { display: inline-flex; } }

.cm-header-cta { display: none; }
@media (min-width: 640px) { .cm-header-cta { display: inline-flex; } }

.cm-menu-trigger {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--cm26-input-border);
	border-radius: var(--cm26-radius);
	background: transparent;
	color: var(--cm26-ink);
	cursor: pointer;
}

.cm-menu-trigger:hover { background: var(--cm26-sand); }

@media (min-width: 1024px) { .cm-menu-trigger { display: none; } }

/* ===========================================================================
   MOBILE DRAWER
   =========================================================================== */

.cm-drawer { position: fixed; inset: 0; z-index: 90; }
.cm-drawer[hidden] { display: none; }

.cm-drawer-overlay { position: absolute; inset: 0; background: rgba(38, 36, 35, .4); }

.cm-drawer-panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--cm26-paper);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.cm-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--cm26-line);
}

.cm-drawer-title { font-size: 18px; font-weight: 700; margin: 0; }

.cm-drawer-close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius);
	background: transparent;
	color: var(--cm26-ink);
	cursor: pointer;
	flex: 0 0 auto;
}

.cm-drawer-close:hover { background: var(--cm26-sand); }

.cm-drawer-nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px; }

.cm-drawer-group { border-bottom: 1px solid var(--cm26-line); padding-block: 4px; }

.cm-drawer-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}

.cm-drawer-group > summary::-webkit-details-marker { display: none; }
.cm-drawer-group > summary .cm-chevron { transition: transform .18s var(--cm26-ease); flex: 0 0 auto; }
.cm-drawer-group[open] > summary .cm-chevron { transform: rotate(180deg); }

.cm-drawer-group ul { list-style: none; margin: 0 0 8px; padding: 0; }
.cm-drawer-group ul a { display: block; padding: 10px 0; font-size: 15.5px; color: var(--cm26-ink); text-decoration: none; min-height: 44px; }
.cm-drawer-group ul a:hover { color: var(--cm26-brand-ink); }
.cm-drawer-all { font-weight: 600; color: var(--cm26-brand-ink) !important; }

.cm-drawer-flat {
	display: block;
	padding-block: 16px;
	border-bottom: 1px solid var(--cm26-line);
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--cm26-ink);
	text-decoration: none;
	min-height: 44px;
}

.cm-drawer-foot {
	display: grid;
	gap: 12px;
	padding: 20px;
	border-top: 1px solid var(--cm26-line);
}

/* The page behind the drawer must not scroll while it is open. */
body.cm-drawer-open { overflow: hidden; }

/* ===========================================================================
   SECTION HEAD
   =========================================================================== */

.cm-section-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 36px;
}

/* The reference caps the head copy at 46rem, which is what makes the section
   headings wrap to two lines rather than running the full container width. */
.cm-section-head-copy { max-width: 46rem; }
.cm-section-head-copy > * + * { margin-top: 12px; }
/* The reference puts 12px under the section eyebrow (mb-3). */
.cm-section-head .cm-eyebrow { margin-bottom: 12px; }

@media (min-width: 768px) {
	.cm-section-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.cm-section-head-action { flex-shrink: 0; }
}

/* ===========================================================================
   HERO
   =========================================================================== */

.cm-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--cm26-line);
}

/* Decorative angled sand plane behind the media column. Desktop only. */
.cm-hero-plane { display: none; }

@media (min-width: 1024px) {
	.cm-hero-plane {
		display: block;
		position: absolute;
		top: 0;
		right: -6rem;
		width: 46%;
		height: 100%;
		background: var(--cm26-sand);
		transform: skewX(-8deg);
	}
}

.cm-hero-grid {
	position: relative;
	display: grid;
	gap: 48px;
	padding-block: 48px;
}

@media (min-width: 768px) { .cm-hero-grid { padding-block: 64px; } }

@media (min-width: 1024px) {
	.cm-hero-grid {
		grid-template-columns: 1.08fr 1fr;
		align-items: center;
		padding-block: 80px;
	}
}

.cm-hero-copy .cm-eyebrow { margin-bottom: 20px; }
.cm-hero-copy .cm-lede { margin-top: 24px; }
.cm-accent { color: var(--cm26-brand-ink); }

.cm-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.cm-hero-locations {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
	font-size: 15px;
	font-weight: 500;
	color: var(--cm26-stone);
}

.cm-icon-accent { color: var(--cm26-brand-ink); }
.cm-dot { color: var(--cm26-brand); }

.cm-hero-media { position: relative; padding-bottom: 40px; }

@media (min-width: 640px) { .cm-hero-media { padding-bottom: 56px; } }

.cm-hero-shot {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--cm26-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--cm26-shadow-float);
}

.cm-hero-shot-img { display: block; width: 100%; height: auto; }

/* The overlapping product panel hangs into the padding reserved above, so it
   never covers the main screenshot. */
.cm-hero-panel {
	position: absolute;
	bottom: 0;
	left: 16px;
	width: 44%;
	margin: 0;
	padding: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius);
	box-shadow: var(--cm26-shadow-lift);
}

@media (min-width: 640px) { .cm-hero-panel { left: -18px; } }

.cm-hero-panel-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 6px;
}

.cm-hero-panel-caption {
	padding: 6px 4px 0;
	font-family: var(--cm26-font-display);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--cm26-ink);
}

/* ===========================================================================
   FACTS STRIP
   =========================================================================== */

.cm-facts {
	background: var(--cm26-card);
	border-bottom: 1px solid var(--cm26-line);
}

.cm-facts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 24px;
	padding-block: 28px;
	/* margin-BLOCK only: this element is also a .cm-wrap, and a blanket
	   `margin: 0` here killed the container's `margin-inline: auto`, so the
	   facts strip sat flush left instead of centred. */
	margin-block: 0;
}

@media (min-width: 768px) {
	.cm-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cm-fact { padding-inline: 16px; }
.cm-fact:nth-child(even) { border-left: 1px solid var(--cm26-line); }

@media (min-width: 768px) {
	.cm-fact { border-left: 1px solid var(--cm26-line); }
	.cm-fact:first-child { border-left: 0; }
}

.cm-fact dd { margin: 0; }

.cm-fact-value {
	display: block;
	font-family: var(--cm26-font-display);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.025em;
	color: var(--cm26-ink);
}

.cm-fact-label {
	display: block;
	margin-top: 6px;
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 700;
}

.cm-fact-detail {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	line-height: 1.375;
	color: var(--cm26-stone);
}

/* ===========================================================================
   CLIENT LOGOS
   =========================================================================== */

.cm-clients { border-bottom: 1px solid var(--cm26-line); }

.cm-clients-row {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 28px;
}

@media (min-width: 1024px) {
	.cm-clients-row { flex-direction: row; align-items: center; gap: 40px; }
}

.cm-clients-title {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--cm26-stone);
}

.cm-clients-grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	column-gap: 24px;
	row-gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.cm-clients-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.cm-client { display: grid; place-items: center; height: 56px; }

.cm-client-logo {
	max-height: 48px;
	max-width: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: .8;
	filter: grayscale(100%);
	transition: opacity .18s var(--cm26-ease), filter .18s var(--cm26-ease);
}

.cm-client-logo:hover { opacity: 1; filter: grayscale(0); }

/* ===========================================================================
   CAPABILITIES
   The 1px gaps over a --cm26-line background read as internal hairlines.
   =========================================================================== */

.cm-cap-grid {
	display: grid;
	gap: 1px;
	overflow: hidden;
	background: var(--cm26-line);
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-card);
}

@media (min-width: 768px) {
	.cm-cap-grid { grid-template-columns: 1fr 1fr; }
}

.cm-cap { background: var(--cm26-card); padding: 28px; }

@media (min-width: 768px) { .cm-cap { padding: 36px; } }

.cm-cap-head { display: flex; align-items: baseline; gap: 16px; }

.cm-cap-num {
	font-family: var(--cm26-font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--cm26-brand);
}

.cm-cap-copy {
	margin-top: 12px;
	padding-left: 36px;
	max-width: 48ch;
	font-size: 16px;
	color: var(--cm26-body);
}

.cm-cap-links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 8px;
	margin-top: 20px;
	padding-left: 36px;
	list-style: none;
}

.cm-bundle-callout {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
	padding: 20px 24px;
	border: 1px dashed #b39d88;
	border-radius: 12px;
}

@media (min-width: 768px) {
	.cm-bundle-callout { flex-direction: row; align-items: center; justify-content: space-between; }
}

.cm-bundle-callout p { margin: 0; font-size: 16px; }
.cm-bundle-callout strong { font-family: var(--cm26-font-display); }
.cm-bundle-copy { color: var(--cm26-body); }

/*
 * The services variant is a heading plus copy in one column with the button
 * in the other, so the text needs its own wrapper — the callout is a flex row
 * with space-between at >=768px, and three bare children would spread the
 * heading, the copy and the button across it.
 *
 * The homepage variant is a different callout (one sentence and an arrow
 * link) and the reference renders it at 16px, which is why the size override
 * is scoped to .cm-bundle-text rather than applied to .cm-bundle-callout p.
 */
.cm-bundle-text { min-width: 0; }
.cm-bundle-text .cm-h-card { margin: 0; }
.cm-bundle-text p { margin-top: 6px; font-size: 15.5px; line-height: 1.65; color: var(--cm26-body); }

/* ===========================================================================
   SELECTED WORK
   =========================================================================== */

.cm-work { overflow: hidden; }
.cm-work-media-link { display: block; padding: 16px 16px 0; text-decoration: none; }

@media (min-width: 640px) { .cm-work-media-link { padding: 20px 20px 0; } }

/*
 * The screenshot frame is a FIXED 340px tall on desktop, 16/10 below it.
 *
 * The reference's mount carries `aspect-[16/10] lg:aspect-auto lg:h-[340px]`,
 * so every card in a row presents an identically sized screen no matter what
 * proportions the underlying screenshot has. An earlier pass measured one
 * card at 623x340 against a 1024x508 image and concluded the frame was
 * content-sized; 623/340 is not 1024/508, the match was a coincidence, and
 * letting the image drive the height made the four cards 423px / 302px tall
 * instead of a uniform 360px — the showcase rows stopped lining up.
 */
.cm-work-frame { padding: 5% 5% 0; aspect-ratio: 16 / 10; }

@media (min-width: 1024px) {
	.cm-work-frame { aspect-ratio: auto; height: 340px; }
}

/* The screenshot panel has no bottom border, so the image reads as running
   off the bottom edge of the tinted frame. */
.cm-work-device {
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .1);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35);
}

.cm-work-img {
	display: block;
	width: 100%;
	height: calc(100% - 22px);
	object-fit: cover;
	object-position: top center;
}

.cm-work-body { display: flex; flex-direction: column; padding: 20px; }

@media (min-width: 640px) { .cm-work-body { padding: 24px; } }

.cm-work-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.cm-work-body h3 a { color: inherit; text-decoration: none; }
.cm-work-body h3 a:hover { color: var(--cm26-brand-ink); }

.cm-work-desc {
	margin-top: 8px;
	max-width: 60ch;
	font-size: 15.5px;
	color: var(--cm26-body);
}

.cm-work-action { margin-top: auto; padding-top: 16px; }
.cm-showcase-foot { display: flex; justify-content: center; margin-top: 40px; }

/* ===========================================================================
   SOFTWARE
   =========================================================================== */

.cm-sw-grid { display: grid; gap: 20px; }

@media (min-width: 640px) { .cm-sw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cm-sw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cm-sw { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; }
.cm-sw-frame { margin: 12px 12px 0; aspect-ratio: 16 / 10; border-radius: 10px; }

/* Product shots and logos must not be cropped, unlike the work screenshots. */
.cm-sw-img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #fff; }

.cm-sw-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px; }

.cm-sw-title { font-family: var(--cm26-font-display); font-size: 18px; font-weight: 700; line-height: 1.65; margin: 0; }
.cm-sw-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.625; color: var(--cm26-body); }
.cm-sw-more { margin-top: auto; padding-top: 16px; }
.cm-sw:hover .cm-sw-more { text-decoration-color: currentColor; }

/* ===========================================================================
   SENIOR LEADERSHIP
   =========================================================================== */

.cm-leadership-grid { position: relative; display: grid; gap: 48px; }

@media (min-width: 1024px) {
	.cm-leadership-grid { grid-template-columns: 1fr 1.15fr; align-items: center; }
}

.cm-leadership-copy .cm-eyebrow { margin-bottom: 12px; }
.cm-leadership-para { margin-top: 16px; max-width: 56ch; font-size: 17px; line-height: 1.625; color: var(--cm26-dark-secondary); }
.cm-leadership-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.cm-leaders {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) { .cm-leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cm-leader { display: block; text-decoration: none; }

.cm-leader-photo {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--cm26-radius);
	background: var(--cm26-dark-panel);
}

/* The initials fallback is centred without turning the wrapper into a grid,
   which the reference does not do and which changed the box model. */
.cm-leader-initials {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.cm-leader-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(15%);
	transition: transform .5s var(--cm26-ease);
}

.cm-leader:hover .cm-leader-img { transform: scale(1.03); }

.cm-leader-initials {
	font-family: var(--cm26-font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--cm26-dark-secondary);
}

.cm-leader-name { margin-top: 10px; font-family: var(--cm26-font-display); font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--cm26-paper); }
.cm-leader-role { font-size: 13px; line-height: 1.375; color: var(--cm26-dark-muted); }

/* ===========================================================================
   REVIEWS
   =========================================================================== */

.cm-rev-grid { display: grid; gap: 20px; }

@media (min-width: 768px) { .cm-rev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cm-rev { display: flex; flex-direction: column; padding: 28px; margin: 0; }

/* The reference's first review card measures #fffdfb at 1440 — the sand tint it
   is documented as having does not actually render. Matching what ships. */

.cm-rev-mark { font-family: var(--cm26-font-display); font-size: 54px; line-height: .6; color: var(--cm26-brand); }
.cm-rev-quote { margin: 12px 0 0; font-size: 16.5px; line-height: 1.625; color: var(--cm26-prose); }
.cm-rev-by { margin-top: auto; padding-top: 20px; font-size: 13.5px; color: var(--cm26-stone); }
.cm-rev-author { font-weight: 600; color: var(--cm26-body); }
.cm-rev-by a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.cm-rev-by a:hover { color: var(--cm26-brand-ink); }

/* ===========================================================================
   FAQ
   =========================================================================== */

.cm-faq-grid { display: grid; gap: 40px; }

@media (min-width: 1024px) { .cm-faq-grid { grid-template-columns: 0.8fr 1.2fr; } }

.cm-faq-intro .cm-eyebrow { margin-bottom: 12px; }
.cm-faq-more { margin-top: 16px; color: var(--cm26-stone); }
.cm-faq-list { border-top: 1px solid var(--cm26-line); }
.cm-faq-item { border-bottom: 1px solid var(--cm26-line); }

.cm-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 20px;
	font-family: var(--cm26-font-display);
	font-size: 17.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}

.cm-faq-item > summary::-webkit-details-marker { display: none; }

.cm-faq-mark { flex: 0 0 auto; color: var(--cm26-brand-ink); transition: transform .18s var(--cm26-ease); }
.cm-faq-item[open] > summary .cm-faq-mark { transform: rotate(45deg); }

.cm-faq-answer { max-width: 64ch; padding-bottom: 24px; font-size: 16.5px; color: var(--cm26-body); }
.cm-faq-answer p { margin: 0 0 .8em; }
.cm-faq-answer p:last-child { margin-bottom: 0; }

/* ===========================================================================
   CLOSING CTA PANEL
   =========================================================================== */

.cm-cta-panel {
	position: relative;
	overflow: hidden;
	padding: 40px 24px;
	border-radius: var(--cm26-radius-card);
	background: var(--cm26-charcoal);
	color: var(--cm26-dark-primary);
}

@media (min-width: 768px) { .cm-cta-panel { padding: 56px 48px; } }

.cm-cta-edge { position: absolute; top: 0; right: 0; width: 8px; height: 100%; background: var(--cm26-brand); }

.cm-cta-inner { position: relative; display: grid; gap: 32px; }

@media (min-width: 768px) { .cm-cta-inner { grid-template-columns: 1.4fr auto; align-items: center; } }

.cm-cta-panel .cm-h-section { color: var(--cm26-paper); }
.cm-cta-copy { margin-top: 12px; max-width: 56ch; font-size: 17px; color: var(--cm26-dark-secondary); }
.cm-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cm-cta-panel :focus-visible { outline-color: var(--cm26-dark-primary); }

/* ===========================================================================
   FOOTER
   =========================================================================== */

.cm-footer {
	margin-top: 40px;
	background: var(--cm26-ink);
	color: var(--cm26-dark-primary);
}

.cm-footer-rule {
	height: 4px;
	background: linear-gradient(to right, var(--cm26-brand), var(--cm26-brand) 50%, var(--cm26-brand-ink));
}

.cm-footer-grid { display: grid; gap: 40px; padding-block: 56px; }

@media (min-width: 768px) { .cm-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cm-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.cm-footer-logo { height: 40px; width: auto; display: block; }

.cm-footer-blurb {
	margin-top: 16px;
	max-width: 36ch;
	font-size: 15px;
	line-height: 1.625;
	color: #cfc6be;
}

.cm-footer-nap { display: grid; gap: 20px; margin-top: 24px; font-size: 15px; }

@media (min-width: 640px) { .cm-footer-nap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cm-footer-nap { grid-template-columns: 1fr; } }

.cm-footer-place { display: flex; gap: 10px; }
.cm-footer-place .cm-icon { margin-top: 4px; flex: 0 0 auto; }
.cm-icon-brand { color: var(--cm26-brand); }

.cm-footer-place address { font-style: normal; line-height: 1.375; margin: 0; }
.cm-footer-place strong { font-family: var(--cm26-font-display); font-weight: 600; color: #fff; }

.cm-footer-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-family: var(--cm26-font-display);
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.cm-footer-phone:hover { text-decoration: underline; }

.cm-footer-col-title {
	margin: 0 0 12px;
	font-family: var(--cm26-font-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--cm26-dark-muted);
}

.cm-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.cm-footer-col a { color: var(--cm26-dark-primary); text-decoration: none; }
.cm-footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.cm-footer-legal { border-top: 1px solid rgba(255, 255, 255, .1); }

.cm-footer-legal-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block: 24px;
	font-size: 13.5px;
	color: var(--cm26-dark-muted);
}

@media (min-width: 768px) {
	.cm-footer-legal-row { flex-direction: row; align-items: center; justify-content: space-between; }
}

.cm-footer-legal-row p { margin: 0; }

.cm-footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-footer-legal-links a { color: inherit; text-decoration: none; }
.cm-footer-legal-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.cm-footer :focus-visible { outline-color: var(--cm26-dark-primary); }

/* ===========================================================================
   INTERIOR SHARED COMPONENTS
   =========================================================================== */

.cm-page-head {
	background: rgba(243, 237, 231, .6);
	border-bottom: 1px solid var(--cm26-line);
}

.cm-page-head > .cm-wrap { padding-block: 40px; }

@media (min-width: 768px) { .cm-page-head > .cm-wrap { padding-block: 56px; } }

.cm-page-head-split { display: grid; gap: 40px; }

@media (min-width: 1024px) {
	.cm-page-head-split { grid-template-columns: 1.25fr 1fr; align-items: center; }
}

.cm-page-head .cm-eyebrow { margin-bottom: 12px; }
.cm-page-head .cm-lede { margin-top: 16px; }
.cm-page-head-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Breadcrumbs */
.cm-crumbs { margin-bottom: 20px; }

.cm-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	color: var(--cm26-stone);
}

.cm-crumbs li { display: flex; align-items: center; gap: 6px; }
.cm-crumb-sep { opacity: .6; flex-shrink: 0; }
.cm-crumbs a { color: inherit; text-decoration: none; }
.cm-crumbs a:hover { color: var(--cm26-brand-ink); text-decoration: underline; text-underline-offset: 4px; }
.cm-crumbs [aria-current="page"] { color: var(--cm26-ink); font-weight: 500; }

/* Pagination */
.cm-pagination { margin-top: 48px; }

.cm-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-sm);
	background: var(--cm26-card);
	color: var(--cm26-ink);
	font-family: var(--cm26-font-display);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s var(--cm26-ease);
}

.cm-pagination a.page-numbers:hover { border-color: var(--cm26-stone); }

.cm-pagination .page-numbers.current {
	background: var(--cm26-ink);
	border-color: var(--cm26-ink);
	color: var(--cm26-paper);
}

.cm-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Project card */
.cm-pcard { display: flex; flex-direction: column; overflow: hidden; }
.cm-pcard-media { display: block; padding: 12px 12px 0; text-decoration: none; }
.cm-pcard-media .cm-media-frame { border-radius: 8px; }

.cm-pcard-placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 12px;
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--cm26-stone);
}

.cm-pcard-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px; }
.cm-pcard-title { margin: 0; font-family: var(--cm26-font-display); font-size: 17.5px; font-weight: 700; line-height: 1.375; }
.cm-pcard-title a { color: inherit; text-decoration: none; }
.cm-pcard-title a:hover { color: var(--cm26-brand-ink); }
.cm-pcard-excerpt { margin-top: 6px; font-size: 14.5px; color: var(--cm26-body); }

/* Generic card grids used across interior templates */
.cm-grid       { display: grid; gap: 20px; }
.cm-grid-2     { display: grid; gap: 20px; }
.cm-grid-3     { display: grid; gap: 20px; }
.cm-grid-4     { display: grid; gap: 20px; }

@media (min-width: 640px)  { .cm-grid-2, .cm-grid-3, .cm-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cm-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Two-column body + sidebar used by detail templates */
.cm-split { display: grid; gap: 40px; }

@media (min-width: 1024px) {
	.cm-split { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
	.cm-split-aside { position: sticky; top: calc(var(--cm26-header-h) + 24px); }
	body.admin-bar .cm-split-aside { top: calc(var(--cm26-header-h) + var(--cm26-admin-bar-h, 32px) + 24px); }
}

.cm-aside-card { padding: 24px; }
.cm-aside-card + .cm-aside-card { margin-top: 20px; }
/*
 * The aside's label is an UPPERCASE STONE EYEBROW, not a heading in ink.
 *
 * Measured off the reference's `h2.font-display.text-[15px].font-bold
 * uppercase tracking-[.1em] text-stone`: 15px/700, letter-spacing 1.5px,
 * uppercase, #6b6460. This rule previously set only family, size and weight,
 * so the title inherited ink and a NEGATIVE heading letter-spacing
 * (-0.225px) — it read as a small black heading instead of a label.
 */
.cm-aside-title {
	margin: 0 0 12px;
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm26-stone);
}

/*
 * Aside lists: 17.5px display face at semibold, each link padded 6px 0 with
 * 4px between items (the reference's `space-y-1` plus the link's own
 * padding). The old 15px/no-padding/10px-gap version made these rails
 * noticeably tighter and smaller than the reference's.
 */
.cm-aside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 17.5px; }
.cm-aside-card ul a {
	display: block;
	padding: 6px 0;
	font-family: var(--cm26-font-display);
	font-weight: 600;
	color: var(--cm26-ink);
	text-decoration: none;
}
.cm-aside-card ul a:hover { color: var(--cm26-brand-ink); text-decoration: underline; text-underline-offset: 4px; }

/* Empty state */
.cm-empty {
	padding: 48px 24px;
	text-align: center;
	border: 1px dashed var(--cm26-line);
	border-radius: var(--cm26-radius-card);
	color: var(--cm26-body);
}

.cm-empty h2 { font-size: clamp(20px, 2vw, 24px); margin: 0 0 8px; }

/* ===========================================================================
   FOCUS — explicit, last word
   ---------------------------------------------------------------------------
   cosmick-tokens.css carries a focus-ring block written for the previous
   header (.header-cta-btn, .mobile-toggle, .brand-link, .main-menu a,
   .mobile-menu-list a, button.submenu-toggle, .hero-scroll-arrow …). None of
   those elements exists any more, so that block no longer reaches the new
   components and a couple of them were picking up an unrelated ink outline
   from the legacy sheets instead of the design's brand ring.

   Stating it explicitly here removes the ambiguity rather than relying on
   which sheet happens to load last. Measured: #b8352b is 5.54:1 on paper and
   5.78:1 on card; on the dark bands the ring switches to #ece6e0 (8.91:1) and
   #ff9a90 (5.40:1). All are above the 3:1 that 1.4.11 requires of a focus
   indicator.
   =========================================================================== */

.cm-skip:focus-visible,
.cm-logo:focus-visible,
.cm-nav-link:focus-visible,
.cm-nav-toggle:focus-visible,
.cm-nav-pop a:focus-visible,
.cm-header-phone:focus-visible,
.cm-menu-trigger:focus-visible,
.cm-drawer-close:focus-visible,
.cm-drawer-nav a:focus-visible,
.cm-drawer-group > summary:focus-visible,
.cm-btn:focus-visible,
.cm-tlink:focus-visible,
.cm-card-link a:focus-visible,
.cm-faq-item > summary:focus-visible,
.cm-crumbs a:focus-visible,
.cm-pagination a:focus-visible {
	outline: 3px solid var(--cm26-brand-ink);
	/*
	 * Restated as a longhand on purpose. cosmick-modern.css carries
	 * `:focus-visible { outline: 2px solid var(--primary-color) }`, and when a
	 * shorthand's var() cannot resolve the whole declaration drops to its unset
	 * value — which for outline-color is `currentColor`. That is why focused
	 * links were picking up their own text colour instead of the brand ring.
	 * A longhand after the shorthand is immune to that.
	 */
	outline-color: var(--cm26-brand-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

.cm-band-dark .cm-tlink:focus-visible,
.cm-band-dark a:focus-visible,
.cm-leader:focus-visible,
.cm-cta-panel .cm-btn:focus-visible {
	outline-color: var(--cm26-dark-link);
}

.cm-footer a:focus-visible,
.cm-footer-phone:focus-visible { outline-color: var(--cm26-dark-primary); }

/* The skip link sits on the ink chip itself, so it needs the light ring. */
.cm-skip:focus-visible { outline-color: #fff; }

/*
 * Hover effects are gated behind a real hover-capable pointer. The approved
 * reference does not gate its component hovers, so on a touch device they latch
 * after a tap and stay stuck until something else is tapped. That is a defect in
 * the reference, not a pattern worth reproducing.
 */
@media (hover: none) {
	.cm-group:hover .cm-media-frame img { transform: none; }
	.cm-card-link:hover { border-color: var(--cm26-line); }
	.cm-client-logo:hover { opacity: .8; filter: grayscale(100%); }
	.cm-leader:hover .cm-leader-img { transform: none; }
}

/* ===========================================================================
   2026 DETAIL PASS
   ---------------------------------------------------------------------------
   The approved reference was revised with a visual-detail pass. Values below
   are taken verbatim from the updated bundle (index-BlRwKmct.css).
   Two things that pass explicitly REMOVED, and which must stay removed here:
     - every image rotation / tilt (hero, project screens, team geometry)
     - image hover zoom, project/software card hover lift, portrait zoom
   Decorative elements are aria-hidden in the markup, and every new hover
   response has a keyboard-focus equivalent and a reduced-motion override.
   =========================================================================== */

/* ---- Decorative circular linework (page heroes and the CTA band) ---- */
.cm-orbital {
	position: absolute;
	width: 440px;
	aspect-ratio: 1;
	border: 1px solid rgba(184, 53, 43, .18);
	border-radius: 50%;
	pointer-events: none;
}

.cm-orbital::before,
.cm-orbital::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(184, 53, 43, .13);
	border-radius: inherit;
}

.cm-orbital::before { inset: 32px; }
.cm-orbital::after  { inset: 64px; }

/* ===========================================================================
   HERO — the angled coral field
   The text column stays on the light ground; only the backdrop is coral.
   =========================================================================== */

.cm-hero { isolation: isolate; }

/* The sand plane is replaced by the coral field. */
.cm-hero-plane { display: none !important; }

.cm-hero-backdrop {
	display: none;
	background-color: var(--cm26-brand);
	background-image:
		radial-gradient(at 88% 12%, rgba(255, 205, 177, .28), transparent 58%),
		linear-gradient(155deg, transparent 40%, rgba(160, 44, 39, .12));
	pointer-events: none;
}

@media (min-width: 1024px) {
	.cm-hero-backdrop {
		display: block;
		position: absolute;
		inset: 0 0 0 55%;
		clip-path: polygon(29% 0, 100% 0, 100% 100%, 0 100%);
	}

	/* A single fine arc, top right. */
	.cm-hero-backdrop::after {
		content: "";
		position: absolute;
		top: -330px;
		right: -170px;
		width: 540px;
		aspect-ratio: 1;
		border: 1px solid rgba(255, 238, 222, .24);
		border-radius: 50%;
	}
}

.cm-hero-media {
	isolation: isolate;
	min-width: 0;
	padding: 40px 16px 88px;
}

/* Below the desktop breakpoint the coral sits behind the imagery full-width,
   with a sloping TOP edge. The screenshots themselves are never clipped. */
.cm-hero-media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(-1 * var(--cm26-gutter)) -24px;
	clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	background-color: var(--cm26-brand);
	background-image:
		radial-gradient(at 88% 12%, rgba(255, 205, 177, .28), transparent 58%),
		linear-gradient(155deg, transparent 40%, rgba(160, 44, 39, .12));
	pointer-events: none;
}

@media (min-width: 640px) { .cm-hero-media { padding: 48px 24px 104px; } }

@media (min-width: 1024px) {
	.cm-hero-media { padding: 32px 0 104px; }
	.cm-hero-media::before { content: none; }
}

/* Straight. No rotation in any state. */
.cm-hero-shot,
.cm-hero-panel {
	transform: none;
	background: var(--cm26-card);
	border: 1px solid rgba(251, 248, 245, .8);
}

.cm-hero-shot {
	border-radius: 12px;
	position: relative;
	box-shadow: 0 2px 4px rgba(70, 30, 24, .08), 0 26px 48px -22px rgba(94, 36, 29, .3);
}

.cm-hero-panel {
	border-radius: 10px;
	width: 44%;
	bottom: 16px;
	left: 32px;
	box-shadow: 0 2px 4px rgba(70, 30, 24, .08), 0 18px 32px -16px rgba(94, 36, 29, .38);
}

@media (min-width: 640px)  { .cm-hero-panel { bottom: 24px; left: 48px; } }
@media (min-width: 1024px) { .cm-hero-panel { left: 24px; } }

/* ---- Browser chrome: taller, gradient, address slot ---- */
.cm-browser-bar {
	background: linear-gradient(var(--cm26-card), var(--cm26-sand));
	box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}

.cm-browser-bar i:first-child { background: #d8998f; }

.cm-hero-shot .cm-browser-bar {
	height: 26px;
	padding-inline: 12px;
	background: linear-gradient(var(--cm26-card), #f7efe8);
	border-bottom-color: #e9ddd3;
}

.cm-hero-shot .cm-browser-bar::after,
.cm-project-mount .cm-browser-bar::after {
	content: "";
	margin-left: auto;
	width: 36%;
	max-width: 140px;
	height: 6px;
	border: 1px solid #ded4cb;
	border-radius: 8px;
}

/* ===========================================================================
   SECTION HEADS — hairline with a short coral accent
   =========================================================================== */

.cm-section-head {
	position: relative;
	border-top: 1px solid var(--cm26-line);
	padding-top: 22px;
}

.cm-section-head::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 48px;
	height: 2px;
	background: var(--cm26-brand);
}

@media (max-width: 767px) { .cm-section-head { padding-top: 18px; } }

/* ===========================================================================
   NUMBERED STAMP
   =========================================================================== */

.cm-stamp {
	display: inline-flex;
	position: relative;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid;
	border-radius: 50%;
	background: var(--cm26-paper);
	color: var(--cm26-brand-ink);
	font-family: var(--cm26-font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .03em;
}

.cm-stamp::after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cm26-brand);
	transform: translate(17px, -12px);
}

/* ===========================================================================
   CAPABILITY PANELS — glyph, connector, coral bottom rule
   =========================================================================== */

.cm-cap {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cm-cap > :not(.cm-cap-glyph) { position: relative; z-index: 1; }
.cm-cap .cm-cap-head { padding-right: 72px; }

.cm-cap::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 92px;
	height: 5px;
	opacity: .75;
	background: var(--cm26-brand);
}

.cm-cap:nth-child(2)::before { width: 138px; }
.cm-cap:nth-child(3)::before { width: 184px; }
.cm-cap:nth-child(4)::before { width: 230px; }

/* A 2px coral rail on the trailing edge, on hover or keyboard focus within. */
.cm-cap::after {
	content: "";
	position: absolute;
	inset: 20px 0 20px auto;
	width: 2px;
	background: var(--cm26-brand);
	opacity: 0;
	transform: scaleY(.5);
	transition: opacity .22s var(--cm26-ease), transform .22s var(--cm26-ease);
	pointer-events: none;
}

.cm-cap:focus-within::after { opacity: 1; transform: scaleY(1); }

@media (hover: hover) and (pointer: fine) {
	.cm-cap:hover::after { opacity: 1; transform: scaleY(1); }
}

.cm-cap-glyph {
	position: absolute;
	top: 25px;
	right: 24px;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	background: #fbf1eb;
	border: 1px solid #dfbcb4;
	border-radius: 18px 18px 18px 4px;
	color: var(--cm26-brand-ink);
}

.cm-cap-glyph > svg { width: 25px; height: 25px; stroke-width: 1.4px; }

.cm-cap-glyph::before,
.cm-cap-glyph::after { content: ""; position: absolute; pointer-events: none; }

.cm-cap-glyph::before {
	top: -5px;
	right: -5px;
	width: 14px;
	height: 14px;
	border: 3px solid var(--cm26-card);
	border-radius: 50%;
	background: var(--cm26-brand);
}

.cm-cap-glyph::after {
	top: 50%;
	left: -16px;
	width: 15px;
	height: 1px;
	background: #dfbcb4;
}

/* Each panel's enclosure is shaped differently. */
.cm-cap:nth-child(2) .cm-cap-glyph { border-radius: 50%; }
.cm-cap:nth-child(3) .cm-cap-glyph { border-radius: 4px 18px 18px; }
.cm-cap:nth-child(4) .cm-cap-glyph { border-radius: 12px; }

.cm-cap .cm-tlink { min-height: 32px; font-size: 13.5px; }
.cm-cap .cm-tlink svg { width: 13px; }

@media (max-width: 767px) {
	.cm-cap-glyph { top: 22px; right: 18px; width: 46px; height: 46px; border-radius: 13px 13px 13px 4px; }
	.cm-cap-glyph > svg { width: 21px; height: 21px; }
	.cm-cap .cm-cap-head { padding-right: 42px; }
	.cm-cap-copy, .cm-cap-links { padding-left: 0; }
	.cm-cap .cm-h-card { font-size: 19px; }
}

/* ---- Bundled-marketing callout: stitched diagonal + coral edge ---- */
.cm-bundle-callout {
	position: relative;
	background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(184, 53, 43, .035) 7px 8px);
}

.cm-bundle-callout::before {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 18px;
	left: -1px;
	width: 3px;
	border-radius: 2px;
	background: var(--cm26-brand);
}

/* ===========================================================================
   PROJECT CARDS — grid mount, registration corners, stamp, pill tags
   =========================================================================== */

.cm-work, .cm-pcard { position: relative; }

.cm-project-mount {
	position: relative;
	isolation: isolate;
	background-image:
		linear-gradient(rgba(251, 248, 245, .3) 1px, transparent 1px),
		linear-gradient(90deg, rgba(251, 248, 245, .3) 1px, transparent 1px);
	background-size: 24px 24px;
}

.cm-project-mount::before,
.cm-project-mount::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 15px;
	height: 15px;
	border-style: solid;
	border-color: var(--cm26-brand-ink);
	opacity: .65;
	pointer-events: none;
}

.cm-project-mount::before { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.cm-project-mount::after  { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }

.cm-project-mount > .cm-stamp {
	position: absolute;
	z-index: 3;
	top: 13px;
	right: 13px;
	width: 32px;
	height: 32px;
	font-size: 10px;
}

.cm-project-mount > .cm-stamp::after { width: 4px; height: 4px; transform: translate(14px, -10px); }

/* Straight in every state — no tilt, no hover reposition. */
.cm-work-img, .cm-project-screen { transform: none; }

.cm-work .cm-tag,
.cm-pcard .cm-tag {
	background: transparent;
	border: 1px solid #d9cec4;
	border-radius: 30px;
	font-size: 11px;
}

/* Hairline above the card copy. */
.cm-work-body, .cm-pcard-body { position: relative; }

.cm-work .cm-work-body::before,
.cm-pcard .cm-pcard-body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 1px;
	background: var(--cm26-line);
}

/* Circular arrow on project links. */
.cm-work .cm-tlink,
.cm-pcard .cm-tlink { width: fit-content; }

.cm-work .cm-tlink svg,
.cm-pcard .cm-tlink svg {
	width: 28px;
	height: 28px;
	padding: 6px;
	border: 1px solid #d9b5ad;
	border-radius: 50%;
}

/* ---- Archive cards: alternating soft grounds ---- */
.cm-archive-mount { background-color: #eee5dc; padding: 20px 12px 0; }
.cm-archive-mount > img { border: 1px solid #d7c9bb; border-radius: 6px 6px 0 0; }

.cm-pcard:nth-child(4n+2) .cm-archive-mount { background-color: #e7ece8; }
.cm-pcard:nth-child(4n+3) .cm-archive-mount { background-color: #e7ebf0; }
.cm-pcard:nth-child(4n+4) .cm-archive-mount { background-color: #eee6ed; }

.cm-project-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
	border-top: 1px solid var(--cm26-line);
}

.cm-project-meta > svg {
	width: 28px;
	height: 28px;
	padding: 6px;
	border: 1px solid #d9b5ad;
	border-radius: 50%;
	color: var(--cm26-brand-ink);
}

/* Project detail pages get the finer grid. */
.cm-project-detail-mount {
	position: relative;
	background-image:
		linear-gradient(90deg, rgba(184, 53, 43, .04) 1px, transparent 1px),
		linear-gradient(rgba(184, 53, 43, .04) 1px, transparent 1px);
	background-size: 28px 28px;
}

/* ===========================================================================
   SOFTWARE — dotted display, framed shot, pedestal
   =========================================================================== */

.cm-sw { position: relative; }

.cm-sw-frame {
	position: relative;
	isolation: isolate;
	padding: 15px;
	background: #f1e9e1 radial-gradient(#ccb8a7 .8px, transparent .8px) 0 0 / 10px 10px;
	border: 1px solid #e2d4c6;
}

.cm-sw-frame > img {
	position: relative;
	background: var(--cm26-card);
	border: 1px solid #e6d9cd;
	border-radius: 5px;
}

.cm-sw-frame::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 26px;
	right: 26px;
	height: 3px;
	border-radius: 4px;
	background: #cbb9a7;
}

.cm-sw:nth-child(2n) .cm-sw-frame { background-color: #e9eeeb; border-color: #d3ded6; }
.cm-sw:nth-child(3n) .cm-sw-frame { background-color: #ede9ee; border-color: #dcd2de; }

.cm-sw .cm-tlink { gap: 10px; }

.cm-sw .cm-tlink svg {
	width: 27px;
	height: 27px;
	padding: 5px;
	border: 1px solid #d9b5ad;
	border-radius: 6px;
}

.cm-sw-body { position: relative; }

.cm-sw-body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	width: 26px;
	height: 3px;
	background: var(--cm26-brand);
}

.cm-product-stage { padding: 22px; }

@media (max-width: 767px) { .cm-sw-frame { padding: 12px; } }

/* ===========================================================================
   SERVICE CARDS — underlined numeral
   =========================================================================== */

.cm-svc-card { position: relative; overflow: hidden; }

.cm-svc-card > .cm-svc-num,
.cm-svc-card > span:first-child {
	width: fit-content;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--cm26-brand);
	color: var(--cm26-brand-ink);
}

/* ===========================================================================
   PEOPLE — inset portrait frame, coral tab, arrow badge
   =========================================================================== */

.cm-person-link {
	position: relative;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(160, 139, 123, .35);
}

.cm-portrait-mount { position: relative; isolation: isolate; }

.cm-portrait-mount::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 8px;
	border: 1px solid rgba(251, 248, 245, .45);
	border-radius: 5px;
	pointer-events: none;
}

.cm-portrait-mount::after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 28px;
	height: 5px;
	background: var(--cm26-brand);
	pointer-events: none;
}

.cm-portrait-arrow {
	position: absolute;
	z-index: 2;
	bottom: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	background: var(--cm26-paper);
	border: 1px solid #d7b6a6;
	border-radius: 50%;
	color: var(--cm26-brand-ink);
	transition: transform .25s var(--cm26-ease);
}

.cm-portrait-arrow svg { width: 15px; height: 15px; transform: rotate(-35deg); }

/* Keyboard focus gets the same response as hover. */
.cm-person-link:focus-visible .cm-portrait-arrow { transform: rotate(35deg); }

@media (hover: hover) and (pointer: fine) {
	.cm-person-link:hover .cm-portrait-arrow { transform: rotate(35deg); }
}

.cm-band-dark .cm-person-link { border-color: rgba(255, 209, 187, .28); }

@media (max-width: 767px) {
	.cm-portrait-arrow { width: 28px; height: 28px; bottom: 8px; right: 8px; }
}

/* ===========================================================================
   CTA PANEL, PAGE HEROES, FAQ, NAV, BUTTONS
   =========================================================================== */

.cm-cta-panel {
	isolation: isolate;
	border: 1px solid #59504a;
	box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 16px 30px -24px rgba(38, 36, 35, .4);
}

.cm-cta-panel > .cm-orbital {
	z-index: -1;
	width: 520px;
	top: -135px;
	right: -175px;
	border-color: rgba(255, 154, 144, .2);
}

.cm-cta-panel > .cm-orbital::before,
.cm-cta-panel > .cm-orbital::after { border-color: rgba(255, 154, 144, .13); }

.cm-cta-inner > div:first-child {
	border-left: 3px solid var(--cm26-brand);
	padding-left: 22px;
}

@media (max-width: 767px) {
	.cm-cta-inner > div:first-child { padding-left: 16px; }
	.cm-cta-panel > .cm-orbital { opacity: .65; right: -330px; }
}

.cm-page-head { position: relative; isolation: isolate; overflow: hidden; }

.cm-page-head > .cm-orbital {
	z-index: -1;
	opacity: .65;
	width: 530px;
	top: -150px;
	right: -130px;
}

.cm-page-head > .cm-wrap { position: relative; }

.cm-page-head::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: max(var(--cm26-gutter), calc((100% - var(--cm26-container)) / 2 + var(--cm26-gutter)));
	width: 72px;
	height: 4px;
	background: var(--cm26-brand);
	pointer-events: none;
}

@media (max-width: 767px) {
	.cm-page-head > .cm-orbital { opacity: .4; width: 340px; top: -100px; right: -220px; }
}

/* ---- FAQ ---- */
.cm-faq-item > summary { min-height: 76px; }

.cm-faq-item > summary .cm-faq-mark {
	width: 30px;
	height: 30px;
	padding: 6px;
	border: 1px solid var(--cm26-line);
	border-radius: 50%;
}

.cm-faq-item[open] > summary .cm-faq-mark { background: #fff0ec; border-color: #d6a69f; }
.cm-faq-item[open] { background: #f5ede6; border-radius: 8px; padding-inline: 18px; border-bottom-color: #d6a69f; }
.cm-faq-item[open] > summary { color: var(--cm26-brand-ink); }

/* ---- Cards ---- */
.cm-card { box-shadow: inset 0 1px rgba(255, 255, 255, .85), var(--cm26-shadow-card); }

/* A small lift, but NOT on project or software cards — the detail pass removed
   it there deliberately. Fine pointer only. */
@media (hover: hover) and (pointer: fine) {
	.cm-card-link:not(.cm-work):not(.cm-pcard):not(.cm-sw):hover { transform: translateY(-3px); }
}

/* ---- Header / nav ---- */
.cm-site-header { box-shadow: 0 4px 16px -12px rgba(38, 36, 35, .2); }

.cm-nav-link { position: relative; }

.cm-nav-link::after {
	content: "";
	position: absolute;
	bottom: 1px;
	left: 12px;
	right: 12px;
	height: 2px;
	background: var(--cm26-brand);
	transform: scaleX(0);
	transform-origin: 0;
	transition: transform .2s var(--cm26-ease);
}

.cm-nav-link:hover::after,
.cm-nav-link:focus-visible::after,
.cm-nav-link.is-current::after,
.cm-nav-link[aria-current="page"]::after { transform: scaleX(1); }

.cm-nav-pop { border-top: 3px solid var(--cm26-brand); }
.cm-nav-pop a { border-left: 2px solid transparent; }
.cm-nav-pop a:hover,
.cm-nav-pop a:focus-visible { border-left-color: var(--cm26-brand-ink); }

/* ---- Buttons / text links ---- */
.cm-btn > svg { transition: transform .2s var(--cm26-ease); }
.cm-btn:focus-visible > svg,
.cm-tlink:focus-visible > svg { transform: translateX(3px); }
.cm-tlink:focus-visible { text-decoration-color: currentColor; }

@media (hover: hover) and (pointer: fine) {
	.cm-btn:hover:not(:disabled):not([aria-disabled="true"]) > svg { transform: translateX(3px); }
}

/* ---- Reduced motion: every new movement resolves to its rest state ---- */
@media (prefers-reduced-motion: reduce) {
	.cm-card-link:hover,
	.cm-btn > svg,
	.cm-tlink svg,
	.cm-work-img,
	.cm-project-screen,
	.cm-person-link:hover .cm-portrait-arrow,
	.cm-person-link:focus-visible .cm-portrait-arrow { transform: none !important; }

	.cm-cap::after { transition: none !important; }
}

/* ===========================================================================
   COMPONENT HEADING RESET
   ---------------------------------------------------------------------------
   The legacy sheets put margin-bottom:35px and padding-bottom:27px on headings.
   Every heading inside a cm- component was inheriting both, which added ~62px
   of dead space under each card title and section heading — measured against the
   reference, whose preflight zeroes heading margins.

   This is deliberately a LIST of our own component classes rather than a blanket
   `h1,h2,h3 { margin:0 }`. A global reset would reach into post content, the
   block editor's output and every plugin on the page. `.cm-prose` headings keep
   their margins, because long-form text needs them.
   =========================================================================== */

.cm-h-hero,
.cm-h-page,
.cm-h-section,
.cm-h-card,
.cm-sw-title,
.cm-pcard-title,
.cm-clients-title,
.cm-footer-col-title,
.cm-drawer-title,
.cm-aside-title,
.cm-empty h2 {
	margin: 0;
	padding: 0;
}

/*
 * style.css carries `h2, .h2 { opacity: 0.8 }` — every h2 on the site rendered
 * at 80%, which is why headings read washed out next to the reference.
 *
 * This reset is on the ELEMENTS, deliberately. It was first written as an
 * addition to the class list above, on the reasoning that post content and
 * plugin headings should be left alone — but a faded heading is a defect
 * wherever it lands, not a treatment worth preserving, and enumerating classes
 * silently missed every heading added afterwards: .cm-svc-block-title
 * ("What's included"), .cm-pf-chapter-title ("Project write-up"),
 * .cm-team-block-title ("About <name>"), the Get Started modal's bare <h2>
 * and the legacy .cosmick-careers-section-title were all still at 80% after
 * that "fix", found by sweeping 18 routes for text rendering below full
 * opacity rather than by re-reading the class list.
 *
 * At (0,0,1) this ties style.css's own `h2` selector and wins on source order,
 * while losing to anything class-based. The hero's .cm-rise entrance is
 * unaffected: it animates opacity through @keyframes, and an animated value
 * outranks a normal declaration regardless of specificity.
 */
h1, h2, h3, h4, h5, h6 {
	opacity: 1;
}

/* The client strip's label is a 13px h2; the legacy `h2 { line-height: 1.2 }`
   compressed it to 15.6px where the reference renders 21.45px. */
.cm-clients-title { line-height: 1.65; }

/* ===========================================================================
   DETAIL PASS — interior template mappings
   ---------------------------------------------------------------------------
   The interior templates were built with their own component names
   (.cm-pf-*, .cm-prod-*, .cm-svc-*, .cm-team-*). Rather than editing every
   template to add a second set of classes, the detail treatments are mapped
   onto the names those templates already emit. Everything here is a border,
   background or pseudo-element, so none of it needs new markup.
   =========================================================================== */

/* ---- Portfolio archive cards ---- */
.cm-pf-card { position: relative; }

.cm-pf-card .cm-media-frame,
.cm-pf-card .cm-pf-card-media {
	position: relative;
	isolation: isolate;
	background-color: #eee5dc;
	background-image:
		linear-gradient(rgba(251, 248, 245, .3) 1px, transparent 1px),
		linear-gradient(90deg, rgba(251, 248, 245, .3) 1px, transparent 1px);
	background-size: 24px 24px;
}

.cm-pf-card:nth-child(4n+2) .cm-media-frame { background-color: #e7ece8; }
.cm-pf-card:nth-child(4n+3) .cm-media-frame { background-color: #e7ebf0; }
.cm-pf-card:nth-child(4n+4) .cm-media-frame { background-color: #eee6ed; }

.cm-pf-card .cm-media-frame::before,
.cm-pf-card .cm-media-frame::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 15px;
	height: 15px;
	border-style: solid;
	border-color: var(--cm26-brand-ink);
	opacity: .65;
	pointer-events: none;
}

.cm-pf-card .cm-media-frame::before { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.cm-pf-card .cm-media-frame::after  { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }

.cm-pf-card .cm-tag,
.cm-pf-card-chips .cm-tag {
	background: transparent;
	border: 1px solid #d9cec4;
	border-radius: 30px;
	font-size: 11px;
}

.cm-pf-card .cm-pf-card-body { position: relative; }

.cm-pf-card .cm-pf-card-body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 1px;
	background: var(--cm26-line);
}

.cm-pf-card .cm-tlink svg {
	width: 28px;
	height: 28px;
	padding: 6px;
	border: 1px solid #d9b5ad;
	border-radius: 50%;
}

/* ---- Software cards: dotted display + pedestal ---- */
.cm-prod-split { position: relative; }

.cm-prod-split-media {
	isolation: isolate;
	background: #f1e9e1 radial-gradient(#ccb8a7 .8px, transparent .8px) 0 0 / 10px 10px;
	border: 1px solid #e2d4c6;
	padding: 15px;
}

.cm-prod-split-media > img,
.cm-prod-split-media .cm-prod-img {
	background: var(--cm26-card);
	border: 1px solid #e6d9cd;
	border-radius: 5px;
}

.cm-prod-split-media::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 26px;
	right: 26px;
	height: 3px;
	border-radius: 4px;
	background: #cbb9a7;
}

.cm-prod-split:nth-child(2n) .cm-prod-split-media { background-color: #e9eeeb; border-color: #d3ded6; }
.cm-prod-split:nth-child(3n) .cm-prod-split-media { background-color: #ede9ee; border-color: #dcd2de; }

.cm-prod-body { position: relative; }

.cm-prod-body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	width: 26px;
	height: 3px;
	background: var(--cm26-brand);
}

.cm-prod-split .cm-tlink svg {
	width: 27px;
	height: 27px;
	padding: 5px;
	border: 1px solid #d9b5ad;
	border-radius: 6px;
}

@media (max-width: 767px) { .cm-prod-split-media { padding: 12px; } }

/* ---- Service cards: underlined numeral ---- */
.cm-svc-card { position: relative; overflow: hidden; }

.cm-svc-card .cm-svc-num,
.cm-svc-card .cm-svc-head > span:first-child {
	width: fit-content;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--cm26-brand);
	color: var(--cm26-brand-ink);
}

/* ---- Team portraits: inset frame + coral tab ---- */
.cm-team-photo {
	position: relative;
	isolation: isolate;
}

.cm-team-photo::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 8px;
	border: 1px solid rgba(251, 248, 245, .45);
	border-radius: 5px;
	pointer-events: none;
}

.cm-team-photo::after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 28px;
	height: 5px;
	background: var(--cm26-brand);
	pointer-events: none;
}

/* ---- Project detail pages: the finer grid ---- */
.cm-pf-hero-media,
.cm-project-detail-mount {
	position: relative;
	background-image:
		linear-gradient(90deg, rgba(184, 53, 43, .04) 1px, transparent 1px),
		linear-gradient(rgba(184, 53, 43, .04) 1px, transparent 1px);
	background-size: 28px 28px;
}

/* ===========================================================================
   LIVE-SITE CORRECTIONS (measured against the reference, not eyeballed)
   =========================================================================== */

/*
 * cosmick-modern.css sets `body { padding-top: 90px }` — the offset the OLD
 * position:fixed header needed to avoid covering the page. The 2026 header is
 * position:sticky and occupies its own space, so that padding is 90px of dead
 * white at the top of every page, and it pushed every section down by exactly
 * that much against the reference.
 */
body { padding-top: 0; }

/*
 * The legacy sheets also put `margin-bottom: 35px` on paragraphs and lists, the
 * same way they did on headings. Any component paragraph inherited it — the
 * hero lede measured 35px taller than the reference's, and that compounded down
 * the page.
 *
 * Scoped to elements that carry one of OUR classes, so post content, the block
 * editor, Gravity Forms and `.cm-prose` are all untouched.
 */
/*
 * Reset ONLY `margin-bottom`, which is the single property the legacy sheets set
 * (`p { margin-bottom: 35px }`). Resetting the whole margin box was a mistake:
 * `p[class*="cm-"]` has specificity (0,1,1), so it also beat this layer's own
 * spacing rules like `.cm-section-head-copy > * + *` (0,1,0) and silently
 * removed the margins the design needs. Resetting padding was worse still — the
 * facts strip is a <dl class="cm-wrap">, so it lost the container's gutter and
 * centring entirely.
 *
 * Scoped to elements carrying one of OUR classes, so post content, the block
 * editor, Gravity Forms and `.cm-prose` are untouched.
 *
 * The class test is wrapped in :where() ON PURPOSE. Written as
 * `p[class*="cm-"]` the selector is (0,1,1), which out-specifies this layer's
 * own component rules at (0,1,0) — it silently removed the 12px under the
 * project-card tag row and the 10px above a leader's name. With :where() the
 * selector is (0,0,1): it still ties the legacy `p { margin-bottom: 35px }` and
 * wins on source order, but every component rule beats it.
 */
p:where([class*="cm-"]),
ul:where([class*="cm-"]),
ol:where([class*="cm-"]),
dl:where([class*="cm-"]),
figure:where([class*="cm-"]),
blockquote:where([class*="cm-"]) {
	margin-bottom: 0;
}

/*
 * Primary button depth, measured off the reference.
 *
 * This is a HARD 3px ledge with no blur radius, not a soft drop shadow:
 * `0 3px rgba(105,33,27,.12)`. An earlier pass guessed `0 1px 2px` with a
 * blur and a darker, more saturated colour, which read as a generic
 * elevation shadow instead of the flat printed-ink edge the reference uses.
 * The reference also leaves the shadow UNCHANGED on hover (only the
 * background darkens), so there is deliberately no hover override here.
 */
.cm-btn-primary {
	box-shadow:
		inset 0 1px rgba(255, 255, 255, .17),
		0 3px rgba(105, 33, 27, .12);
}

/* Nav links: the reference's group links are tight to their disclosure button
   and carry no rounded corner. */
.cm-nav-link { border-radius: 0; }
.cm-nav-item--group > .cm-nav-link { padding: 8px 4px 8px 12px; }

/* ===========================================================================
   TITLE LINE-HEIGHT: close a legacy inheritance leak
   ===========================================================================

   `cosmick-modern.css` carries `h2 { line-height: 1.2 }` and `h3
   { line-height: 1.2 }` (and style.css adds 1.18), so ANY cm- title that
   does not declare its own line-height silently picks up a 2019 display
   value instead of the body's 1.65.

   The reference styles these particular titles with font-size and weight
   only and lets them inherit its `body { line-height: 1.65 }` — measured
   29.7px on an 18px software-card title and 21.45px on a 13px footer column
   heading, against 21.6px and 15.6px here. The display headings
   (.cm-h-hero/-page/-section/-card, .cm-pcard-title) legitimately set their
   own tighter values and are deliberately NOT listed.

   A blanket line-height in the heading reset above would be wrong: that
   block is later in the file at equal (0,1,0) specificity, so it would
   override .cm-h-section's 1.12 and flatten every display heading. Any new
   title class belongs in one list or the other, never neither. */
.cm-aside-title,
.cm-drawer-title,
.cm-footer-col-title {
	line-height: 1.65;
}