/*
Theme Name: CraneSage
Theme URI: https://cranesage.com
Author: CraneSage
Description: Mobile-first marketing theme for CraneSage, the generative engine optimization (GEO) agency for the US construction industry. Activating the theme creates the Home, Services, Industries, How It Works, About, FAQ and Contact pages, the main menu and the front page setting.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cranesage
*/

/* ---------- Tokens ---------- */
:root {
	--cs-ink: #0f1b2a;          /* steel navy */
	--cs-ink-2: #1c2b3f;
	--cs-ink-soft: #46566b;
	--cs-amber: #f5a524;        /* safety amber */
	--cs-amber-dark: #c97f00;
	--cs-concrete: #f4f2ee;
	--cs-line: #dcd8d0;
	--cs-white: #ffffff;
	--cs-radius: 10px;
	--cs-max: 1180px;
	--cs-gutter: 16px;
	--cs-font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--cs-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--cs-shadow: 0 1px 2px rgba(15, 27, 42, .06), 0 8px 24px rgba(15, 27, 42, .06);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--cs-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--cs-ink);
	background: var(--cs-white);
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cs-ink); text-decoration-color: var(--cs-amber); text-underline-offset: 3px; }
a:hover { color: var(--cs-amber-dark); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--cs-font-head);
	line-height: 1.15;
	margin: 0 0 .5em;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
:focus-visible { outline: 3px solid var(--cs-amber); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto;
	background: var(--cs-amber); color: var(--cs-ink); padding: 10px 14px; border-radius: 6px;
}

.cs-container { width: 100%; max-width: var(--cs-max); margin: 0 auto; padding: 0 var(--cs-gutter); }
.cs-section { padding: 56px 0; }
.cs-section--concrete { background: var(--cs-concrete); }
.cs-section--dark { background: var(--cs-ink); color: var(--cs-white); }
.cs-section--dark a { color: var(--cs-white); }
.cs-eyebrow {
	display: inline-block; font-family: var(--cs-font-head); font-weight: 700; font-size: .78rem;
	letter-spacing: .14em; text-transform: uppercase; color: var(--cs-amber-dark); margin-bottom: .8em;
}
.cs-section--dark .cs-eyebrow { color: var(--cs-amber); }
.cs-lead { font-size: 1.12rem; color: var(--cs-ink-soft); max-width: 720px; }
.cs-section--dark .cs-lead { color: #c9d2de; }
.cs-center { text-align: center; }
.cs-center .cs-lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.cs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 12px 22px; border-radius: 8px; border: 2px solid transparent;
	font-family: var(--cs-font-head); font-weight: 700; font-size: 1rem; text-decoration: none;
	cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.cs-btn--primary { background: var(--cs-amber); color: var(--cs-ink); }
.cs-btn--primary:hover { background: #ffb940; color: var(--cs-ink); }
.cs-btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.cs-btn--ghost:hover { background: rgba(255,255,255,.08); color: inherit; }
.cs-btn-row { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

/* ---------- Header ---------- */
.cs-header {
	position: sticky; top: 0; z-index: 100; background: var(--cs-white);
	border-bottom: 1px solid var(--cs-line);
}
.admin-bar .cs-header { top: 46px; }
.cs-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.cs-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cs-ink); }
.cs-logo svg { width: 34px; height: 34px; flex: none; }
.cs-logo__word { font-family: var(--cs-font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.cs-logo__word span { color: var(--cs-amber-dark); }
.custom-logo { max-height: 40px; width: auto; }

.cs-nav-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
	border: 1px solid var(--cs-line); border-radius: 8px; background: var(--cs-white); cursor: pointer;
}
.cs-nav-toggle__bars, .cs-nav-toggle__bars::before, .cs-nav-toggle__bars::after {
	display: block; width: 22px; height: 2px; background: var(--cs-ink); position: relative; transition: transform .2s;
}
.cs-nav-toggle__bars::before, .cs-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.cs-nav-toggle__bars::before { top: -7px; }
.cs-nav-toggle__bars::after { top: 7px; }
.cs-nav-open .cs-nav-toggle__bars { background: transparent; }
.cs-nav-open .cs-nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.cs-nav-open .cs-nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.cs-nav {
	display: none; position: absolute; left: 0; right: 0; top: 100%;
	background: var(--cs-white); border-bottom: 1px solid var(--cs-line); box-shadow: var(--cs-shadow);
	padding: 8px var(--cs-gutter) 20px;
	max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
}
.cs-nav-open .cs-nav { display: block; }
.cs-nav ul { list-style: none; margin: 0; padding: 0; }
.cs-nav li { margin: 0; }
.cs-nav a {
	display: block; padding: 14px 4px; font-weight: 600; text-decoration: none;
	border-bottom: 1px solid var(--cs-line);
}
.cs-nav .current-menu-item > a, .cs-nav .current_page_item > a { color: var(--cs-amber-dark); }
.cs-nav .cs-nav__cta { display: flex; margin-top: 16px; width: 100%; border-bottom: 0; padding: 12px 22px; }

/* ---------- Hero ---------- */
.cs-hero {
	background: var(--cs-ink); color: var(--cs-white); padding: 56px 0 64px; position: relative; overflow: hidden;
}
.cs-hero::after {
	/* stylised crane jib line */
	content: ""; position: absolute; right: -40px; top: 32px; width: 320px; height: 4px;
	background: repeating-linear-gradient(90deg, var(--cs-amber) 0 14px, transparent 14px 24px);
	opacity: .5; transform: rotate(-8deg);
}
.cs-hero h1 { max-width: 820px; }
.cs-hero h1 em { font-style: normal; color: var(--cs-amber); }
.cs-hero .cs-lead { color: #c9d2de; font-size: 1.15rem; }
.cs-hero--page { padding: 48px 0; }
.cs-hero--page h1 { font-size: clamp(1.9rem, 6vw, 3rem); }

/* ---------- Trust strip ---------- */
.cs-strip { background: var(--cs-ink-2); color: #c9d2de; padding: 18px 0; font-size: .92rem; }
.cs-strip ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cs-strip li { margin: 0; display: flex; align-items: center; gap: 8px; }
.cs-strip li::before { content: ""; width: 6px; height: 6px; background: var(--cs-amber); border-radius: 50%; }
.cs-strip strong { color: var(--cs-white); font-weight: 600; margin-right: 6px; }

/* ---------- Grids & cards ---------- */
.cs-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.cs-card {
	background: var(--cs-white); border: 1px solid var(--cs-line); border-radius: var(--cs-radius);
	padding: 24px; box-shadow: var(--cs-shadow);
}
.cs-section--dark .cs-card { background: var(--cs-ink-2); border-color: #2b3d55; box-shadow: none; }
.cs-card__num {
	display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
	background: var(--cs-amber); color: var(--cs-ink); border-radius: 8px; font-family: var(--cs-font-head);
	font-weight: 800; margin-bottom: 14px;
}
.cs-card p:last-child, .cs-card ul:last-child { margin-bottom: 0; }
.cs-card__meta { font-size: .92rem; color: var(--cs-ink-soft); }
.cs-card__meta strong { color: var(--cs-ink); }

/* ---------- Stats ---------- */
.cs-stat { border-left: 4px solid var(--cs-amber); padding: 6px 0 6px 16px; }
.cs-stat__value { font-family: var(--cs-font-head); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.cs-stat__label { margin: 8px 0 4px; }
.cs-stat__src { font-size: .82rem; color: var(--cs-ink-soft); }
.cs-stat__src a { color: inherit; }

/* ---------- Prompt bubbles ---------- */
.cs-prompts { display: grid; gap: 12px; }
.cs-prompt {
	background: var(--cs-white); border: 1px solid var(--cs-line); border-radius: 14px 14px 14px 4px;
	padding: 14px 16px 14px 46px; position: relative; font-weight: 500;
}
.cs-prompt::before {
	content: "AI"; position: absolute; left: 12px; top: 13px; width: 24px; height: 24px; border-radius: 6px;
	background: var(--cs-ink); color: var(--cs-amber); font: 800 .7rem/24px var(--cs-font-head); text-align: center;
}

/* ---------- Steps ---------- */
.cs-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 16px; }
.cs-steps > li {
	counter-increment: step; position: relative; padding: 22px 22px 22px 72px; margin: 0;
	background: var(--cs-white); border: 1px solid var(--cs-line); border-radius: var(--cs-radius);
}
.cs-steps > li::before {
	content: counter(step); position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%;
	background: var(--cs-ink); color: var(--cs-amber); font: 800 1rem/36px var(--cs-font-head); text-align: center;
}
.cs-steps h3 { margin-bottom: .3em; }
.cs-steps p:last-child { margin-bottom: 0; }
.cs-step__when { font-size: .85rem; font-weight: 600; color: var(--cs-amber-dark); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Checklist ---------- */
.cs-check { list-style: none; padding: 0; }
.cs-check li { position: relative; padding-left: 30px; margin-bottom: .7em; }
.cs-check li::before {
	content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 4px;
	background: var(--cs-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230f1b2a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Tables (responsive) ---------- */
.cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-white); }
.cs-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
.cs-table th, .cs-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--cs-line); vertical-align: top; }
.cs-table th { background: var(--cs-ink); color: var(--cs-white); font-family: var(--cs-font-head); font-weight: 700; }
.cs-table tr:last-child td { border-bottom: 0; }

/* Stack table rows into cards on small screens */
@media (max-width: 639px) {
	.cs-table--stack { min-width: 0; }
	.cs-table--stack thead { display: none; }
	.cs-table--stack, .cs-table--stack tbody, .cs-table--stack tr, .cs-table--stack td { display: block; width: 100%; }
	.cs-table--stack tr { border-bottom: 1px solid var(--cs-line); padding: 8px 0; }
	.cs-table--stack tr:last-child { border-bottom: 0; }
	.cs-table--stack td { border: 0; padding: 6px 16px; }
	.cs-table--stack td::before {
		content: attr(data-label); display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase;
		letter-spacing: .08em; color: var(--cs-ink-soft);
	}
}

/* ---------- Industry blocks ---------- */
.cs-industry { padding: 28px 0; border-top: 1px solid var(--cs-line); scroll-margin-top: 80px; }
.cs-industry:first-of-type { border-top: 0; }
.cs-industry .cs-prompt { margin-top: 12px; }

/* ---------- FAQ ---------- */
.cs-faq { max-width: 820px; margin: 0 auto; }
.cs-faq details {
	border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-white);
	margin-bottom: 12px; overflow: hidden;
}
.cs-faq summary {
	list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative;
	font-family: var(--cs-font-head); font-weight: 700; font-size: 1.05rem; min-height: 48px;
}
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after {
	content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font-size: 1.6rem; line-height: 1; color: var(--cs-amber-dark);
}
.cs-faq details[open] summary::after { content: "\2013"; }
.cs-faq .cs-faq__a { padding: 0 20px 18px; color: var(--cs-ink-soft); }
.cs-faq .cs-faq__a p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cs-cta { background: var(--cs-amber); color: var(--cs-ink); padding: 48px 0; }
.cs-cta h2 { margin-bottom: .3em; }
.cs-cta .cs-btn--primary { background: var(--cs-ink); color: var(--cs-white); }
.cs-cta .cs-btn--primary:hover { background: var(--cs-ink-2); color: var(--cs-white); }
.cs-cta .cs-btn--ghost:hover { background: rgba(15,27,42,.08); }

/* ---------- Note ---------- */
.cs-note {
	border-left: 4px solid var(--cs-amber); background: var(--cs-concrete); padding: 16px 18px;
	border-radius: 0 var(--cs-radius) var(--cs-radius) 0; margin: 24px 0 0;
}

/* ---------- Forms ---------- */
.cs-form { display: grid; gap: 16px; }
.cs-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.cs-form input, .cs-form select, .cs-form textarea {
	width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; /* 16px avoids iOS zoom */
	border: 1px solid #b9b4aa; border-radius: 8px; background: var(--cs-white); color: var(--cs-ink);
}
.cs-form textarea { min-height: 120px; resize: vertical; }
.cs-form input:focus, .cs-form select:focus, .cs-form textarea:focus { border-color: var(--cs-amber-dark); outline: 2px solid var(--cs-amber); }
.cs-form .cs-hp { position: absolute; left: -9999px; }
.cs-form small { color: var(--cs-ink-soft); }
.cs-alert { padding: 14px 16px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; }
.cs-alert--ok { background: #e6f4ea; color: #155c2b; }
.cs-alert--err { background: #fdecea; color: #8a1c13; }

/* ---------- Generic page content ---------- */
.cs-content { max-width: 760px; }
.cs-content img { border-radius: var(--cs-radius); }
.cs-content blockquote { margin: 1.5em 0; padding-left: 18px; border-left: 4px solid var(--cs-amber); }

/* ---------- Footer ---------- */
.cs-footer { background: var(--cs-ink); color: #aeb9c7; padding: 48px 0 24px; font-size: .95rem; }
.cs-footer a { color: #dfe5ec; text-decoration: none; }
.cs-footer a:hover { color: var(--cs-amber); }
.cs-footer .cs-logo { color: var(--cs-white); margin-bottom: 12px; }
.cs-footer h4 { color: var(--cs-white); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.cs-footer ul { list-style: none; padding: 0; margin: 0; }
.cs-footer li { margin: 0; }
.cs-footer li a { display: inline-flex; align-items: center; min-height: 44px; } /* finger-sized tap targets */
.cs-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
.cs-footer__bottom { border-top: 1px solid #22344b; margin-top: 36px; padding-top: 20px; font-size: .85rem; }

/* ---------- Breakpoints ---------- */
@media (min-width: 600px) {
	.cs-btn-row { flex-direction: row; flex-wrap: wrap; }
	.cs-grid--2, .cs-grid--3, .cs-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.cs-prompts { grid-template-columns: repeat(2, 1fr); }
	.cs-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 783px) {
	.admin-bar .cs-header { top: 32px; }
}
@media (min-width: 900px) {
	body { font-size: 18px; }
	.cs-section { padding: 88px 0; }
	.cs-hero { padding: 96px 0 104px; }
	.cs-hero--page { padding: 72px 0; }
	.cs-hero::after { width: 520px; right: -60px; top: 60px; }
	.cs-nav-toggle { display: none; }
	.cs-nav {
		display: flex !important; align-items: center; gap: 24px; position: static;
		padding: 0; border: 0; box-shadow: none; background: transparent;
	}
	.cs-nav ul { display: flex; gap: 22px; }
	.cs-nav a { border: 0; padding: 8px 0; font-size: .95rem; }
	.cs-nav .cs-nav__cta { display: inline-flex; margin: 0; width: auto; min-height: 42px; padding: 8px 16px; font-size: .92rem; }
	.cs-nav { max-height: none; overflow: visible; }
	.cs-footer li a { min-height: 34px; }
	.cs-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cs-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.cs-grid { gap: 24px; }
	.cs-steps { grid-template-columns: repeat(2, 1fr); }
	.cs-steps--3 { grid-template-columns: repeat(3, 1fr); }
	.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
	.cs-split--wide { grid-template-columns: 1.3fr 1fr; }
	.cs-industry { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 44px 0; }
	.cs-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
	.cs-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
	.cs-cta .cs-btn-row { margin-top: 0; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}