/* Clarity x Ohio Design Bureau: brand layer for Ohio chrome (header, footer, blog, portfolio). Page layouts use Elementor global classes. */
:root {
	--cm-bg: #FFFFFF;
	--cm-alt: #F3F3F3;
	--cm-surface: #FFFFFF;
	--cm-ink: #1E262B;
	--cm-muted: #5A6267;
	--cm-line: #E2E3E4;
	--cm-accent: #BF1E2E;
	--cm-accent-hover: #9E1726;
	--cm-night: #1E262B;
	--cm-night-surface: #273138;
	--cm-night-ink: #FFFFFF;
	--cm-night-muted: rgba(255,255,255,.62);
	--cm-accent-night: #F2545B;
	--cm-font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	/* Heading family: Elementor > Site Settings > Global Fonts > "Headings" (falls back to the value the theme prints from the same setting) */
	--cm-font-head: var(--e-global-typography-cmheadings-font-family, var(--cm-head-family, 'DM Sans')), system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cm-radius-card: 0;
	--cm-radius-input: 0;
	--cm-wrap: 1240px;
}

html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
	font-family: var(--cm-font);
	color: var(--cm-ink);
	background-color: var(--cm-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'ss01' on, 'cv11' on;
}
h1, h2, h3, h4, h5, h6, .title, .heading .title { font-family: var(--cm-font-head); font-weight: 500; letter-spacing: -0.04em; }
h2, .h2 { letter-spacing: -0.05em; }
::selection { background: var(--cm-accent); color: #fff; }
:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 3px; }

/* Elementor atomic text inherits the brand face */
.elementor .e-paragraph-base, .elementor .e-button-base { font-family: var(--cm-font); }
.elementor .e-heading-base, .cm-display, .cm-h2, .cm-h3, .cm-h4, .cm-stat, .cm-quote, .cl-hf, .cl-hf p { font-family: var(--cm-font-head); }
.elementor .e-paragraph-base a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Interactions for Elementor global classes (transition + hover lift) */
.cm-btn, .cm-btn-ghost, .cm-btn-light, .cm-link { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.cm-btn:active, .cm-btn-ghost:active, .cm-btn-light:active { transform: translateY(1px); }
.cm-card, .cm-card-link { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cm-card-link:hover { border-color: var(--cm-ink); }
.cm-link::after { content: ' \2192'; display: inline-block; transition: transform .2s ease; }
.cm-link:hover::after { transform: translateX(4px); }
.cm-logo { transition: opacity .2s ease, filter .2s ease; }
.cm-logo:hover { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.cm-card-link:hover { transform: none; }
}

/* Decorative parts of Elementor global classes */
.cm-frame { background: #fff; }
.cm-logo { filter: grayscale(1); }

/* Emphasis inside display headings: same family, brand colour, no italics */
.cm-display em, .cm-h2 em, .cm-h3 em { font-style: normal; color: var(--cm-accent); }
.cm-night .cm-h2 em, .cm-on-night em { color: var(--cm-accent-night); }
/* Atomic elements: hard reset of default margins */
.elementor .e-heading-base, .elementor .e-paragraph-base { margin: 0; }
html, body { overflow-x: clip; }

/* ===================== Ohio chrome: header ===================== */
:root { --clb-header-height: 84px; --clb-header-menu-height: 2.5rem; }
@media (max-width: 1024px) { :root { --clb-header-height: 68px; } }
/* Elementor full-width pages sit under Ohio's overlay header: offset them. */
body[class*="template-elementor_header_footer"] .site-content { padding-top: var(--clb-header-height); }
#masthead.header { height: var(--clb-header-height); font-family: var(--cm-font); }
#masthead.header { background-color: #fff; }
#masthead.header:not(.-sticky) { border-bottom: 1px solid var(--cm-line); }
#masthead .branding img { height: 40px !important; width: auto !important; max-height: none; }
@media (max-width: 767px) { #masthead .branding img { height: 30px !important; } }
#masthead .menu > .nav-item > .menu-link { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--cm-ink); }
#masthead .menu > .nav-item > .menu-link:hover, #masthead .menu > .current-menu-item > .menu-link { color: var(--cm-accent); }
#masthead .sub-menu { border-radius: 0; border: 1px solid var(--cm-line); box-shadow: 0 24px 48px -24px rgba(30, 38, 43, .2); padding: 10px; min-width: 300px; background: #fff; }
#masthead .sub-menu .menu-link { font-size: 15px; font-weight: 500; padding: 10px 14px; border-radius: 0; color: var(--cm-ink); }
#masthead .sub-menu .menu-link:hover { background: var(--cm-bg); color: var(--cm-accent); }
#masthead .btn-optional, #masthead .button.btn-optional {
	font: 500 15px/1 var(--cm-font); letter-spacing: 0; text-transform: none;
	padding: 14px 22px; height: auto; border-radius: 0; background: var(--cm-ink); color: #fff; border: 0;
	transition: background-color .2s ease;
}
#masthead .btn-optional:hover { background: var(--cm-accent); color: #fff; }
.header.-sticky, .header.-fixed { box-shadow: 0 1px 0 var(--cm-line); }
@media (max-width: 1024px) { #masthead .menu-optional { display: none; } }

/* ===================== Ohio chrome: footer ===================== */
#colophon.site-footer { background: var(--cm-night); color: var(--cm-night-muted); font-family: var(--cm-font); padding-top: clamp(56px, 7vw, 96px); }
#colophon .widget-title { font: 500 13px/1.3 var(--cm-font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--cm-night-ink); margin-bottom: 18px; }
#colophon .textwidget, #colophon .textwidget p { color: var(--cm-night-muted); font-size: 15px; line-height: 1.65; max-width: 34ch; }
#colophon .cl-footer-logo img { height: 46px; width: auto; margin-bottom: 6px; }
#colophon .menu .menu-link, #colophon .textwidget a { color: var(--cm-night-ink); font-size: 15px; font-weight: 400; line-height: 2; text-decoration: none; }
#colophon .menu .menu-link:hover, #colophon .textwidget a:hover { color: var(--cm-accent-night); }
#colophon .cl-footer-contact { list-style: none; margin: 0; padding: 0; }
#colophon .cl-footer-contact li { line-height: 2; color: var(--cm-night-muted); font-size: 15px; }
#colophon .cl-footer-social { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
#colophon .cl-footer-social a { color: var(--cm-night-muted); font-size: 14px; }
#colophon .site-info, #colophon .copyright, .site-footer .site-info { color: var(--cm-night-muted); font-size: 14px; border-top: 1px solid rgba(255,255,255,.12); }
#colophon .site-info a { color: var(--cm-night-ink); }
body, #page.site, .site-content { background-color: var(--cm-bg); }
body[class*="template-elementor_header_footer"] .site-content > .elementor { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }

/* ===================== Ohio portfolio + blog cards ===================== */
.portfolio-grid .image-holder img, .portfolio-archive-image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; }
.portfolio-grid .portfolio-item .image-holder { border-radius: 0; overflow: hidden; border: 1px solid var(--cm-line); background: #fff; }
.portfolio-grid .portfolio-item .image-holder img { transition: transform .5s ease; }
.portfolio-grid .portfolio-item:hover .image-holder img { transform: scale(1.025); }
.portfolio-grid .card-details { padding-top: 18px; }
.portfolio-grid .card-details .title { font: 500 clamp(1.2rem, 1rem + .6vw, 1.5rem)/1.2 var(--cm-font-head); letter-spacing: -0.03em; color: var(--cm-ink); margin: 0 0 6px; }
.portfolio-grid .category, .portfolio-grid .category a { font: 500 13px/1.3 var(--cm-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cm-accent); }
.portfolio-grid .project-details p { color: var(--cm-muted); font-size: 15px; line-height: 1.6; margin-top: 8px; }
.portfolio-grid .show-project-link a { font: 500 15px/1 var(--cm-font); color: var(--cm-ink); }
.blog-grid .image-holder img, .blog-item .image-holder img, .ohio-widget.blog-grid img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; }
.blog-item .title, .blog-grid .title { font-family: var(--cm-font-head); letter-spacing: -0.03em; }

/* ===================== Contact form (CF7) ===================== */
.cl-form { display: flex; flex-direction: column; gap: 16px; font-family: var(--cm-font); }
.cl-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767px) { .cl-form__row { grid-template-columns: minmax(0, 1fr); } }
.cl-form p { margin: 0; }
.cl-field label { display: block; font-size: 14px; font-weight: 500; color: var(--cm-ink); margin-bottom: 6px; }
.cl-form input[type="text"], .cl-form input[type="email"], .cl-form input[type="tel"], .cl-form select, .cl-form textarea {
	width: 100%; font: 400 16px/1.4 var(--cm-font); color: var(--cm-ink); background: var(--cm-bg);
	border: 1px solid var(--cm-line); border-radius: 0; padding: 14px 14px; box-shadow: none; transition: border-color .2s ease, background-color .2s ease;
}
.cl-form textarea { min-height: 140px; resize: vertical; }
.cl-form input::placeholder, .cl-form textarea::placeholder { color: #8a93a1; }
.cl-form input:focus, .cl-form select:focus, .cl-form textarea:focus { outline: none; border-color: var(--cm-ink); background: #fff; }
.cl-consent, .cl-consent .wpcf7-list-item-label { font-size: 14px; color: var(--cm-muted); line-height: 1.5; }
.cl-consent .wpcf7-list-item { margin: 0; }
.cl-consent input[type="checkbox"] { accent-color: var(--cm-accent); width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.cl-submit input[type="submit"], .cl-form .wpcf7-submit {
	font: 500 16px/1 var(--cm-font); background: var(--cm-ink); color: #fff; border: 0; border-radius: 0; padding: 16px 28px; cursor: pointer; width: auto; height: auto; text-transform: none; letter-spacing: 0;
}
.cl-submit input[type="submit"]:hover { background: var(--cm-accent); }
.wpcf7-not-valid-tip { font-size: 13px; color: var(--cm-accent); margin-top: 6px; }
.wpcf7 form .wpcf7-response-output { border-radius: 0; margin: 16px 0 0; padding: 12px 16px; font-size: 15px; }

/* ===================== Project single ===================== */
.single-ohio_portfolio .project-page > .page-container { padding-top: calc(var(--clb-header-height) + clamp(32px, 4vw, 64px)); padding-bottom: clamp(48px, 6vw, 96px); }
.single-ohio_portfolio .project-gallery img { border-radius: 0; border: 1px solid var(--cm-line); }
.single-ohio_portfolio .project-content h1, .single-ohio_portfolio .project-content .title { font: 500 clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem)/1.02 var(--cm-font-head); letter-spacing: -0.05em; }
.single-ohio_portfolio .project-content .category-holder a, .single-ohio_portfolio .project-content .category { font: 500 13px/1.3 var(--cm-font); letter-spacing: .08em; text-transform: uppercase; color: var(--cm-accent); }
.single-ohio_portfolio .project-details p { color: var(--cm-muted); font-size: 17px; line-height: 1.65; }

/* ===================== Design Bureau layer (Ohio Demo 2) ===================== */
/* Sharp edges everywhere */
.elementor *, .button, .btn, input, select, textarea, .image-holder, .portfolio-item, .blog-item, .ohio-widget, .card, .sub-menu, .wpcf7 * { border-radius: 0 !important; }
.cm-alt, .cl-alt { background-color: var(--cm-alt); }
/* Ohio widgets: typographic tuning to match the bureau look */
.ohio-heading-sc .title { font-family: var(--cm-font-head); font-weight: 500; letter-spacing: -0.05em; }
.ohio-heading-sc .subtitle { font-family: var(--cm-font); }
.ohio-counter-sc .counter-number, .ohio-counter-sc .number { font-family: var(--cm-font-head); letter-spacing: -0.05em; }
.ohio-accordion-sc .accordion-header .title, .ohio-accordion-sc .title { font-family: var(--cm-font-head); letter-spacing: -0.02em; }
.ohio-testimonial-sc .testimonial-text, .ohio-testimonial-sc blockquote { font-family: var(--cm-font-head); letter-spacing: -0.03em; }
/* Numbered service list (hero) */
.cl-num { font: 500 13px/1 var(--cm-font); color: var(--cm-accent); letter-spacing: .04em; }
.cl-list a { color: var(--cm-ink); text-decoration: none; transition: color .2s ease; }
.cl-list a:hover { color: var(--cm-accent); }
.cl-list p { margin: 0; line-height: 2; }
/* Dark panels: white links */
.cl-dark a, .cl-dark a:visited, .elementor .cl-dark .elementor-widget-text-editor a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cl-dark a:hover { color: #fff; opacity: .8; }
.cl-on-dark .btn, .cl-on-dark a, .cl-on-dark .button { color: #fff !important; }
/* Text editor: no stray paragraph margins inside bureau layouts */
.elementor-widget-text-editor p { margin: 0; }
.elementor-widget-text-editor p + p { margin-top: .9em; }
.cl-list .elementor-widget-text-editor p + p { margin-top: .35em; }
/* Hero: soft white wash behind the copy column (photo stays visible on the left) */
.cl-hero { position: relative; }
.cl-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.9) 52%, #fff 70%); }
.cl-hero > .e-con-inner { position: relative; z-index: 1; }
@media (max-width: 1024px) { .cl-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.94) 60%, rgba(255,255,255,.4) 100%); } }
/* Counters overlapping the studio photo */
.cl-count svg { display: block; }
.cl-count--red .ohio-counter-sc svg, .cl-count--red svg { color: #fff; }
.cl-count--ink svg { color: var(--cm-accent); }
/* Reviews carousel on dark: transparent nav */
.cl-reviews .slider-nav, .cl-reviews .clb-slider-nav-btn, .cl-reviews [class*="slider-nav"] button { background: transparent !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; }
.cl-reviews .testimonial .headline, .cl-reviews .ohio-testimonial-sc .headline { background: rgba(255,255,255,.08); color: #fff; }
/* Video pop-up buttons (Ohio video widget) */
.cl-video .video-button-caption { font-family: var(--cm-font-head); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.cl-video .video-button-caption small { display: block; font-family: var(--cm-font); font-size: .78em; opacity: .75; letter-spacing: .04em; text-transform: uppercase; }
.cl-hero .cl-video .video-button-caption { color: #fff; text-shadow: 0 1px 12px rgba(30,38,43,.55); }
.cl-hero .cl-video .icon-button { width: 64px; height: 64px; background: var(--cm-accent); }
.clb-video-popup iframe { aspect-ratio: 16 / 9; width: min(1100px, 92vw); height: auto; }
@media (max-width: 1024px) { .cl-hero .cl-video .video-button-caption { color: var(--cm-ink); text-shadow: none; } }
/* ===================== Tablet (768-1024px) ===================== */
@media (max-width: 1024px) {
	.cl-crop img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
	.cl-hero .cl-dark { width: 100% !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
	/* Ohio grids drop to one column below 992px; keep two (projects) and three (posts) across on tablets */
	.ohio-project-item.vc_col-md-6, .ohio-project-item.vc_col-md-4 { width: 50%; }
	.blog-posts .grid-item.vc_col-md-4 { width: 33.3333%; }
	.blog-posts .grid-item .title { font-size: 1.05rem; }
}
@media (min-width: 640px) and (max-width: 1024px) {
	/* Blog archive: two cards across instead of one */
	.archive-holder .grid-item.vc_col-md-6, .archive-holder .grid-item.vc_col-md-4 { width: 50%; }
	/* Footer: tidy 2 x 2 grid instead of staggered floats */
	#colophon .widgets.vc_row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin: 0; }
	#colophon .widgets.vc_row::before, #colophon .widgets.vc_row::after { display: none; }
	#colophon .widgets-column { width: auto; float: none; padding: 0; }
	/* Same 24px side gutter as the Elementor pages */
	.page-container, #colophon .page-container { padding-left: 24px; padding-right: 24px; }
}
/* Ohio contact-form widget carries a -16px gutter; align fields with the card heading */
.elementor-widget-ohio_contact_form .ohio-widget.contact-form { margin-left: 0; margin-right: 0; }