/* SEO for contractors (/services/seo/contractors/), rebuilt 2026-10-28 from Todd's brief, then simplified with Sam.
   Built the way /services/seo/ is: every section is a heading with one short paragraph, then ONE visual
   (a card on an orange block, a row of equal cards, or a short flow), with a small caption under examples.
   Gabe's vocabulary: Epilogue, --v sizes, orange #ff5e1a, black / white / grey rhythm, hand-drawn circle and
   underline. Reveal motion comes from main.js (.gm-wrap > *); the FAQ uses the shared .acc accordion. */

.cseo .cs-wrap { max-width: 1760px; }
.cs { padding: 5.5vw 0; }
.cs h1, .cs h2, .cs h3, .cs p { margin: 0; }
.cs h2 { line-height: 1.034; letter-spacing: -.05em; font-weight: 500; }
.cs h3 { line-height: 1.08; letter-spacing: -.045em; font-weight: 500; }
.cs h3 > span:not(.hl) { color: var(--accent); }
.cs p, .cs li { line-height: 1.5; letter-spacing: var(--ls-p); }
.cs a:not(.gm-btn) { text-decoration: underline; text-underline-offset: .15em; }
.cs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-dark .gm-btn:hover, .cs-dark .gm-btn:focus-visible { background: #fff; color: #000; }
.cs-stack { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 6vw; align-items: start; margin-bottom: 4.5vw; }
.cs-split > p { max-width: 36em; }
.cs-cap { font-size: 14px; line-height: 1.45 !important; opacity: .6; margin-top: 2.2rem !important; max-width: 46em; }

/* 01 Hero: 55 / 45, copy left and a full-height jobsite photo right */
main.cseo > .cs-hero:first-child { padding: var(--header-h) 0 0; }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); min-height: min(76vh, 780px); }
.cs-hero-copy { align-self: center; padding: 4vw 5vw 5vw var(--sqs-site-gutter); display: grid; gap: 1.1rem; justify-items: start; }
.cs-hero h1 { line-height: .99; letter-spacing: -.05em; font-weight: 500; margin-bottom: .6rem; max-width: 15ch; }
.cs-hero-copy p { max-width: 32em; }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 1rem; }
.cs-actions .gm-btn { padding: 17px 30px; font-size: 14px; }
.cs-textlink { font-size: 16px; letter-spacing: -.02em; color: inherit; }
.cs-hero-photo { margin: 0; position: relative; }
.cs-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.cseo .cs-jumps { padding: 0; height: 1px; }

/* Rows of equal cards: same art box, same heading line, one sentence (like the /services/seo/ journey) */
.cs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; }
.cs-cards > li { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 0; }
.cs-cards h3 { margin-top: 22px !important; }
.cs-cards > li > p { margin-top: 10px !important; opacity: .72; max-width: 30em; }
.cs-card-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cs-card-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-dark .cs-cards > li > p a { color: #fff; }

/* 02 Example searches: one search bar per photo, all the same size, sitting on the photo's lower edge */
.cs-trades .cs-card-art { aspect-ratio: 4 / 3.4; }
.cs-trades li:nth-child(1) .cs-card-art > img { object-position: 38% 50%; }
.cs-trades li:nth-child(2) .cs-card-art > img { object-position: 60% 50%; }
.cs-trades li:nth-child(3) .cs-card-art > img { object-position: 30% 50%; }
.cs-search { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: #fff; color: #000; border-radius: 300px; font-size: 15px; letter-spacing: -.02em; line-height: 1 !important; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6); }
.cs-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: round; }

/* Feature: copy on one side, one object on an orange block on the other (paper-over-block, like /services/seo/) */
.cs-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.4rem 6vw; align-items: center; }
.cs-feature-flip .cs-art { order: 0; }
.cs-feature-cap { grid-column: 2; margin: 0 0 0 9% !important; }
.cs-art { position: relative; padding: 7% 0 0 9%; container-type: inline-size; }
.cs-block { position: absolute; left: 0; top: 0; width: 46%; height: 72%; background: var(--accent); }

/* 03 One clean service page */
.cs-browser { position: relative; background: #fff; box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 30px 60px -28px rgba(60, 40, 20, .5); }
.cs-browser-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #ebe7df; }
.cs-browser-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .2); }
.cs-browser-bar span { flex: 1; min-width: 0; margin-left: 8px; padding: 5px 12px; border-radius: 300px; background: #fff; font-size: 12px; line-height: 1.3 !important; color: rgba(0, 0, 0, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-browser-nav { display: flex; gap: 22px; padding: 14px 26px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 14px; white-space: nowrap; overflow: hidden; }
.cs-browser-nav > * { padding-bottom: 12px; }
.cs-browser-nav b { font-weight: 500; box-shadow: inset 0 -2px 0 var(--accent); }
.cs-browser-nav span { opacity: .55; }
.cs-browser-body { padding: 26px 26px 28px; display: grid; gap: 16px; justify-items: start; }
.cs-browser-h { font-size: calc(.8 * var(--u) + 16px); font-weight: 500; letter-spacing: -.045em; line-height: 1.05 !important; }
.cs-browser-body ul, .cs-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-browser-body li, .cs-ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.4; }
.cs-browser-body li::before, .cs-ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5l4.2 4.3L17 4.8' fill='none' stroke='%23ff5e1a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cs-browser-btn { margin-top: 4px !important; background: var(--accent); color: #fff; border-radius: 300px; padding: 11px 18px; font: 500 12px/1 'Space Grotesk', sans-serif; letter-spacing: .05em; text-transform: uppercase; }

/* 04 Google profile */
#google-profile { padding: 4.5vw 0; }
.cs-ticks { margin: .3rem 0 .5rem; }
.cs-ticks li { font-size: calc(.25 * var(--u) + 15px); }
.cs-ticks b { font-weight: 500; }
.cs-profile { position: relative; background: #fff; box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 30px 60px -28px rgba(60, 40, 20, .5); }
.cs-profile > img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 60% 40%; }
.cs-profile-body { padding: 22px 24px 24px; display: grid; gap: 12px; }
.cs-profile-name { font-size: calc(.6 * var(--u) + 17px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1 !important; }
.cs-profile-cat { font-size: 15px; }
.cs-profile-cat .hl { padding: .3em .7em .36em; margin: -.3em -.1em -.36em -.7em; }
.cs-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px !important; }
.cs-profile-actions span { border: 1px solid rgba(0, 0, 0, .3); border-radius: 300px; padding: 7px 14px; font-size: 13px; line-height: 1 !important; }
.cs-profile-actions span:first-child { background: #000; color: #fff; border-color: #000; }
.cs-profile-row { font-size: 14px; line-height: 1.5 !important; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .1); }
.cs-profile-row b { display: block; font-weight: 500; font-size: 12px; opacity: .55; margin-bottom: 3px; }

/* 05 Project story: three equal photos in one row */
.cs-story .cs-card-art { aspect-ratio: 4 / 3; }

/* 06 Service areas: two small cards beside the copy, side by side at every width */
.cs-areas { margin-bottom: 0; }
.cs-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; width: 100%; margin-top: .6rem; }
.cs-vs-card { padding: 18px 18px 20px; display: grid; gap: 12px; align-content: start; }
.cs-vs-weak { border: 1px solid rgba(255, 255, 255, .3); }
.cs-vs-strong { background: #fff; color: #000; }
.cs-vs-h { font-weight: 500; font-size: 15px; letter-spacing: -.02em; }
.cs-vs .hl { padding: .2em .45em .26em; margin: -.2em -.45em -.26em; }
.cs-vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-vs li { font-size: 14px; line-height: 1.35; }
.cs-vs-weak li { color: rgba(255, 255, 255, .75); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.cs-vs-weak li span { color: var(--accent); }
.cs-vs-strong li { position: relative; padding-left: 22px; }
.cs-vs-strong li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5l4.2 4.3L17 4.8' fill='none' stroke='%23ff5e1a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 07 What we do: four equal cards, each drawing its deliverable */
.cs-work { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4vw; }
.cs-work .cs-card-art { aspect-ratio: 1 / .78; display: grid; align-content: center; gap: 8px; padding: 22px; font-size: 13px; line-height: 1.3; }
.cs-w-map { background: #000; color: #fff; }
.cs-w-map p { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.cs-w-map p:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.cs-w-map b { font-weight: 500; color: var(--accent); }
.cs-w-map span { opacity: .7; }
.cs-w-align { background: #f1efeb; grid-template-columns: 1fr 1fr; gap: 12px !important; }
.cs-w-align div { display: grid; gap: 6px; align-content: start; }
.cs-w-align b { font-weight: 500; font-size: 12px; opacity: .6; }
.cs-w-align span { background: #fff; padding: 8px 10px; border-left: 3px solid var(--accent); }
.cs-work .cs-w-project { padding: 0; align-content: end; background: var(--accent); }
.cs-w-project p { position: relative; margin: 0 14px 14px !important; background: #fff; padding: 12px 14px; display: grid; gap: 2px; }
.cs-w-project b { font-weight: 500; }
.cs-w-project span { font-size: 12px; opacity: .6; }
.cs-w-report { background: #dad9d9; }
.cs-w-report p { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; }
.cs-w-report p:first-child { display: block; font-weight: 500; margin-bottom: 6px; }
.cs-w-report i { display: block; height: 12px; width: var(--w); background: #000; }
.cs-w-report p:nth-child(2) i { background: var(--accent); }

/* 08 Experience: the family crew photo, Gabe on set overlapping it, on an orange block */
.cs-exp-art { aspect-ratio: 1 / .8; padding: 0; }
.cs-exp-art .cs-block { left: auto; right: 0; top: auto; bottom: 0; width: 40%; height: 56%; }
.cs-exp-crew, .cs-exp-gabe { position: absolute; object-fit: cover; }
.cs-exp-crew { left: 0; top: 0; width: 72%; height: 66%; object-position: 40% 55%; }
.cs-exp-gabe { right: 7%; bottom: 7%; width: 50%; height: 46%; object-position: 55% 40%; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55); }

/* 09 One inquiry, four steps, on a line */
.cs-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 3vw; }
.cs-flow li { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .35); }
.cs-flow li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.cs-flow p { opacity: .72; }
.cs-flow .hl { padding: .04em .3em .1em; margin: 0 -.3em; }

/* 10 Specializations: copy left, a larger-scale build on an orange block right */
.cs-spec-art { padding: 6% 0 0 12%; }
.cs-spec-art .cs-block { width: 40%; height: 64%; }
.cs-spec-photo { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 38%; }

/* 11 FAQ */
.cs-faq { max-width: 1200px; }
.cs-faq h2 { text-align: center; margin-bottom: 3.5vw; }
.cs-faq .acc-desc { padding-bottom: 26px; }
.cs-faq summary { font-weight: 500; letter-spacing: -.04em; }

/* 12 Contact */
.cs-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem 6vw; align-items: start; }

/* Tablets */
@media (max-width: 1199px) {
  .cs-work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 4vw; }
  .cs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 4vw; }
  .cs-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 4vw; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cs-hero-grid { min-height: min(68vh, 680px); }
  .cs-split { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .cs-cards { gap: 22px; }
  .cs-search { left: 10px; right: 10px; bottom: 10px; height: 40px; padding: 0 12px; font-size: 13px; gap: 8px; }
  .cs-feature { grid-template-columns: minmax(0, 1fr); }
  .cs-feature .cs-art { max-width: 620px; width: 100%; }
  .cs-feature-cap { grid-column: 1; }
  .cs-feature-flip .cs-art { order: 2; }
  .cs-feature { row-gap: 2.2rem; }
}

/* Phones */
@media (max-width: 767px) {
  .cs { padding: 56px 0; }
  main.cseo > .cs-hero:first-child { padding-top: var(--header-h); }
  .cs-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cs-hero-copy { padding: 36px var(--sqs-mobile-site-gutter) 40px; }
  .cs-hero-photo img { position: static; aspect-ratio: 4 / 3; }
  .cs-split, .cs-feature, .cs-contact { grid-template-columns: minmax(0, 1fr); }
  .cs-split { margin-bottom: 32px; gap: 1.1rem; }
  .cs-cards, .cs-work, .cs-flow { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cs-cards h3 { margin-top: 18px !important; }
  .cs-feature-cap { grid-column: 1; }
  .cs-feature-flip .cs-art { order: 2; }
  .cs-art { padding: 6% 0 6% 7%; }
  .cs-browser-nav { gap: 16px; padding: 12px 18px 0; font-size: 13px; }
  .cs-browser-body { padding: 20px 18px 22px; }
  .cs-work .cs-card-art { aspect-ratio: auto; min-height: 210px; }
  .cs-exp-art { aspect-ratio: 1 / .86; }
  .cs-vs-card { padding: 14px 14px 16px; }
  .cs-vs li { font-size: 13px; }
  .cs-flow { gap: 32px; }
  .cs-spec-art { padding: 6% 0 6% 9%; }
  .cs-faq h2 { text-align: left; margin-bottom: 24px; }
}

/* Example searches on narrower tablets: one row per trade (photo left, words right) so every search stays whole */
@media (min-width: 768px) and (max-width: 1023px) {
  .cs-trades { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cs-trades > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 4vw; }
  .cs-trades .cs-card-art { grid-row: 1 / span 3; }
  .cs-trades h3 { margin-top: 0 !important; align-self: end; }
  .cs-search { left: 14px; right: 14px; bottom: 14px; height: 44px; font-size: 14px; }
  .cs-feature-cap { order: 3; }
}
@media (max-width: 767px) { .cs-feature-cap { order: 3; } }

@media (min-width: 1024px) and (max-width: 1279px) {
  .cs-search { left: 10px; right: 10px; bottom: 10px; height: 40px; padding: 0 12px; gap: 8px; font-size: 13px; }
}

/* >>> phone grid rows (generated) */
@media (max-width: 767px) {
  .fe-6ac3fad07bb31b7afd5ec76c { grid-template-rows: 24px auto auto auto auto auto auto 24px 24px 24px; }
  .fe-block-4558f01c57c7ec7f660a, .fe-block-68508869301ecfd13fce { padding-bottom: 12px; }
  .fe-6ac3fad07bb31b7afd5ec774 { grid-template-rows: 24px auto auto auto auto auto auto 24px auto auto auto auto auto auto 24px 24px auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto); }
  .fe-block-3a50c390b23e293b8dc3, .fe-block-yui_3_17_2_1_1791228626108_5185, .fe-block-9615ca459a1ad809a7ab, .fe-block-a9a0bb584cc7e8ed84ae, .fe-block-b55eecc7472421f32a1a, .fe-block-9801e8d7efeb4c5645e7, .fe-block-edf552e8579e3583ff62 { padding-bottom: 12px; }
  .fe-6ac3fce9a5d0443b0684c872 { grid-template-rows: auto auto auto auto auto auto auto auto 24px minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto); }
  .fe-block-b23a1af4c520098797b6, .fe-block-b8b5c3fa8878d7b6775c, .fe-block-1930f9914e98b5a039a4 { padding-bottom: 12px; }
  .fe-6ac3fe95042ae8555f90fdb7 { grid-template-rows: auto auto 24px minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) auto auto auto auto auto 24px minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) auto auto auto auto auto auto auto 24px minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) auto auto auto auto auto 24px minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) minmax(24px, auto) auto auto auto auto auto; }
  .fe-block-b5eb53d5d8a6841ec7e0, .fe-block-de8d12a73efe1f9426be, .fe-block-e8bb53e102977077226a, .fe-block-d1c2646ac050d6fd43df, .fe-block-567a3ea1ff58df4a42a1, .fe-block-9e2219246af2b692a6ff, .fe-block-a5f0265fb800a4e88c0c, .fe-block-e1ee79b394196d65744c, .fe-block-84ca367574e4b474d364, .fe-block-08471254bf351f2b40aa { padding-bottom: 12px; }
  .fe-6ac40144643f7c7abfcf1207 { grid-template-rows: auto auto auto auto auto auto auto 24px 24px 24px; }
  .fe-block-4b7c03953e7d2ee871dd, .fe-block-yui_3_17_2_1_1791230222863_6805 { padding-bottom: 12px; }
  .fe-6ad00471d21dd2340a4de924 { grid-template-rows: auto auto auto 24px 24px auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; }
  .fe-block-e4379631041d7b51d9aa, .fe-block-32d9e7472fa4aed45e81 { padding-bottom: 12px; }
  .fe-6ac3fad07bb31b7afd5ec783 { grid-template-rows: auto auto auto auto 24px auto auto auto auto 24px 24px auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto; }
  .fe-block-c9b592eb33077630d55d, .fe-block-9543c1dde598bf8fa689, .fe-block-e892b130c9002c6e808e { padding-bottom: 12px; }
}