/* Faithful construction comp; scoped to this page. Shared header, footer and navigation are unchanged. */
main#construction-marketing[data-page="construction-marketing"] {
--color-white: #ffffff;
  --color-navy: #102c3a;
  --color-text: #243944;
  --color-muted: #5c6d73;
  --color-neutral: #f4f5f4;
  --color-border: #d9e0e3;
  --color-green: #137a52;
  --color-green-dark: #0f6544;
  --color-overlay: rgba(16, 44, 58, 0.78);
  --color-overlay-strong: rgba(16, 44, 58, 0.95);
  --color-overlay-soft: rgba(16, 44, 58, 0.18);
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --content-width: 1120px;
  --section-space: 80px;
  --mobile-space: 56px;
  --shell-gutter: 48px;
  --mobile-gutter: 48px;
  --radius: 4px;
  --focus-ring: 3px solid var(--color-green);
}
main#construction-marketing[data-page="construction-marketing"] {
overflow-x: clip;
  scroll-behavior: smooth;
}
main#construction-marketing[data-page="construction-marketing"] {
overflow-x: clip;
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main#construction-marketing[data-page="construction-marketing"],
main#construction-marketing[data-page="construction-marketing"] *,
main#construction-marketing[data-page="construction-marketing"] *::before,
main#construction-marketing[data-page="construction-marketing"] *::after {
box-sizing: border-box;
}
main#construction-marketing[data-page="construction-marketing"] img {
display: block;
  max-width: 100%;
  height: auto;
}
main#construction-marketing[data-page="construction-marketing"] a {
color: inherit;
}
main#construction-marketing[data-page="construction-marketing"] h1,
main#construction-marketing[data-page="construction-marketing"] h2,
main#construction-marketing[data-page="construction-marketing"] h3,
main#construction-marketing[data-page="construction-marketing"] p,
main#construction-marketing[data-page="construction-marketing"] ol {
min-width: 0;
  margin: 0;
}
main#construction-marketing[data-page="construction-marketing"] h1,
main#construction-marketing[data-page="construction-marketing"] h2,
main#construction-marketing[data-page="construction-marketing"] h3 {
overflow-wrap: break-word;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}
main#construction-marketing[data-page="construction-marketing"] p {
overflow-wrap: anywhere;
}
main#construction-marketing[data-page="construction-marketing"] a:focus-visible,
main#construction-marketing[data-page="construction-marketing"] summary:focus-visible {
outline: var(--focus-ring);
  outline-offset: 4px;
}
main#construction-marketing[data-page="construction-marketing"] .site-shell {
width: min(var(--content-width), calc(100% - var(--shell-gutter)));
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}
main#construction-marketing[data-page="construction-marketing"] .narrow-shell {
width: min(800px, calc(100% - var(--shell-gutter)));
}
main#construction-marketing[data-page="construction-marketing"] .text-link:hover,
main#construction-marketing[data-page="construction-marketing"] .section-link:hover {
text-decoration: underline;
  text-underline-offset: 4px;
}
main#construction-marketing[data-page="construction-marketing"] .button {
display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 1px solid var(--color-green);
  border-radius: var(--radius);
  background: var(--color-green);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}
main#construction-marketing[data-page="construction-marketing"] .button:hover {
background: var(--color-green-dark);
  border-color: var(--color-green-dark);
  color: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .hero {
display: flex;
  min-height: 520px;
  align-items: stretch;
  background-color: var(--color-navy);
  background-image: linear-gradient(90deg, var(--color-overlay-strong) 0%, var(--color-overlay) 48%, var(--color-overlay-soft) 100%);
  background-position: center;
  background-size: cover;
  color: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .hero__inner {
display: flex;
  min-height: 520px;
  align-items: center;
}
main#construction-marketing[data-page="construction-marketing"] .hero__content {
width: min(700px, 100%);
  padding: 72px 0;
  color: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .hero h1 {
max-width: 760px;
  margin-bottom: 26px;
  color: var(--color-white);
  font-size: 48px;
  letter-spacing: 0.01em;
}
main#construction-marketing[data-page="construction-marketing"] .hero p {
max-width: 680px;
  margin-bottom: 32px;
  color: var(--color-white);
  font-size: 17px;
  line-height: 1.9;
}
main#construction-marketing[data-page="construction-marketing"] .button--primary {
min-width: 260px;
  min-height: 56px;
  padding: 14px 26px;
  font-size: 16px;
}
main#construction-marketing[data-page="construction-marketing"] .section-cta {
display: flex;
  justify-content: center;
  margin-top: 40px;
}
main#construction-marketing[data-page="construction-marketing"] .section {
padding: var(--section-space) 0;
}
main#construction-marketing[data-page="construction-marketing"] .section--white {
background: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .section--neutral {
background: var(--color-neutral);
}
main#construction-marketing[data-page="construction-marketing"] .section--navy {
background: var(--color-navy);
  color: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .section--navy h2 {
color: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .section h2 {
max-width: 960px;
  margin-inline: auto;
  margin-bottom: 48px;
  font-size: 34px;
  text-align: center;
}
main#construction-marketing[data-page="construction-marketing"] .section-lead {
max-width: 760px;
  margin: -20px auto 42px;
  text-align: center;
}
main#construction-marketing[data-page="construction-marketing"] .flat-grid,
main#construction-marketing[data-page="construction-marketing"] .work-grid,
main#construction-marketing[data-page="construction-marketing"] .case-grid,
main#construction-marketing[data-page="construction-marketing"] .plan-grid,
main#construction-marketing[data-page="construction-marketing"] .alternative-grid,
main#construction-marketing[data-page="construction-marketing"] .flow-list {
display: grid;
  min-width: 0;
}
main#construction-marketing[data-page="construction-marketing"] .flat-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}
main#construction-marketing[data-page="construction-marketing"] .flat-item {
min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-navy);
}
main#construction-marketing[data-page="construction-marketing"] .section--neutral .flat-item {
border-top-color: var(--color-text);
}
main#construction-marketing[data-page="construction-marketing"] .flat-item h3,
main#construction-marketing[data-page="construction-marketing"] .work-item h3,
main#construction-marketing[data-page="construction-marketing"] .case-item h3,
main#construction-marketing[data-page="construction-marketing"] .alternative-item h3,
main#construction-marketing[data-page="construction-marketing"] .flow-item h3 {
margin-bottom: 14px;
  font-size: 21px;
}
main#construction-marketing[data-page="construction-marketing"] .flat-item p,
main#construction-marketing[data-page="construction-marketing"] .work-item p,
main#construction-marketing[data-page="construction-marketing"] .case-item p,
main#construction-marketing[data-page="construction-marketing"] .alternative-item p,
main#construction-marketing[data-page="construction-marketing"] .flow-item p {
font-size: 15px;
}
main#construction-marketing[data-page="construction-marketing"] .approach-grid .flat-item {
padding-top: 24px;
}
main#construction-marketing[data-page="construction-marketing"] .work-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 56px;
}
main#construction-marketing[data-page="construction-marketing"] .work-item {
min-width: 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
main#construction-marketing[data-page="construction-marketing"] .section-note {
max-width: 920px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
main#construction-marketing[data-page="construction-marketing"] .case-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
main#construction-marketing[data-page="construction-marketing"] .case-item {
display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
  background: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .case-item h3 {
margin-bottom: 16px;
}
main#construction-marketing[data-page="construction-marketing"] .case-item p {
margin-bottom: 28px;
}
main#construction-marketing[data-page="construction-marketing"] .text-link,
main#construction-marketing[data-page="construction-marketing"] .section-link {
color: var(--color-text);
  font-weight: 700;
  text-underline-offset: 4px;
}
main#construction-marketing[data-page="construction-marketing"] .case-item .text-link {
margin-top: auto;
}
main#construction-marketing[data-page="construction-marketing"] .section-link {
display: inline-block;
  margin-top: 42px;
}
main#construction-marketing[data-page="construction-marketing"] .section--navy .text-link,
main#construction-marketing[data-page="construction-marketing"] .section--navy .section-link {
color: var(--color-white);
}
main#construction-marketing[data-page="construction-marketing"] .plan-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
main#construction-marketing[data-page="construction-marketing"] .plan-item {
min-width: 0;
  min-height: 184px;
  padding: 24px 0;
  border-top: 3px solid var(--color-green);
}
main#construction-marketing[data-page="construction-marketing"] .plan-summary {
font-size: 16px;
}
main#construction-marketing[data-page="construction-marketing"] .plan-summary > span:first-child {
font-weight: 700;
}
main#construction-marketing[data-page="construction-marketing"] .phrase {
display: inline-block;
  max-width: 100%;
}
main#construction-marketing[data-page="construction-marketing"] .plan-summary strong {
display: block;
  margin: 14px 0 8px;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
}
main#construction-marketing[data-page="construction-marketing"] .plan-terms {
max-width: 920px;
  margin: 28px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}
main#construction-marketing[data-page="construction-marketing"] .plan-terms p + p {
margin-top: 18px;
}
main#construction-marketing[data-page="construction-marketing"] .alternative-grid {
grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  margin-inline: auto;
  gap: 0;
}
main#construction-marketing[data-page="construction-marketing"] .alternative-item {
min-width: 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-navy);
}
main#construction-marketing[data-page="construction-marketing"] .alternative-item p {
margin-bottom: 24px;
}
main#construction-marketing[data-page="construction-marketing"] .flow-list {
grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 0;
  list-style: none;
}
main#construction-marketing[data-page="construction-marketing"] .flow-item {
min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-navy);
}
main#construction-marketing[data-page="construction-marketing"] .flow-item__index {
display: block;
  margin-bottom: 12px;
  color: var(--color-green);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
main#construction-marketing[data-page="construction-marketing"] .faq-list {
border-top: 1px solid var(--color-border);
}
main#construction-marketing[data-page="construction-marketing"] .faq-list details {
border-bottom: 1px solid var(--color-border);
}
main#construction-marketing[data-page="construction-marketing"] .faq-list summary {
position: relative;
  padding: 22px 48px 22px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
}
main#construction-marketing[data-page="construction-marketing"] .faq-list summary::-webkit-details-marker {
display: none;
}
main#construction-marketing[data-page="construction-marketing"] .faq-list summary::after {
position: absolute;
  top: 28px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  content: "";
  transform: rotate(45deg);
}
main#construction-marketing[data-page="construction-marketing"] .faq-list details[open] summary::after {
top: 33px;
  transform: rotate(225deg);
}
main#construction-marketing[data-page="construction-marketing"] .faq-list details p {
max-width: 760px;
  padding: 0 48px 24px 0;
}
main#construction-marketing[data-page="construction-marketing"] .final-section {
text-align: center;
}
main#construction-marketing[data-page="construction-marketing"] .final-section h2 {
margin-bottom: 24px;
}
main#construction-marketing[data-page="construction-marketing"] .final-section p {
max-width: 720px;
  margin: 0 auto 32px;
}
@media (max-width: 900px) {
main#construction-marketing[data-page="construction-marketing"] {
--shell-gutter: var(--mobile-gutter);
}
main#construction-marketing[data-page="construction-marketing"] .hero,
main#construction-marketing[data-page="construction-marketing"] .hero__inner {
min-height: 500px;
}
main#construction-marketing[data-page="construction-marketing"] .hero {
background-position: 62% center;
}
main#construction-marketing[data-page="construction-marketing"] .hero__content {
padding: 56px 0;
}
main#construction-marketing[data-page="construction-marketing"] .hero h1 {
margin-bottom: 22px;
    font-size: 28px;
    line-height: 1.55;
}
main#construction-marketing[data-page="construction-marketing"] .hero p {
margin-bottom: 28px;
    font-size: 16px;
}
main#construction-marketing[data-page="construction-marketing"] .section {
padding: var(--mobile-space) 0;
}
main#construction-marketing[data-page="construction-marketing"] .section h2 {
margin-bottom: 32px;
    font-size: 26px;
    line-height: 1.55;
}
main#construction-marketing[data-page="construction-marketing"] .section-lead {
margin: -8px auto 32px;
}
main#construction-marketing[data-page="construction-marketing"] .flat-grid--three,
main#construction-marketing[data-page="construction-marketing"] .work-grid,
main#construction-marketing[data-page="construction-marketing"] .case-grid,
main#construction-marketing[data-page="construction-marketing"] .plan-grid,
main#construction-marketing[data-page="construction-marketing"] .alternative-grid,
main#construction-marketing[data-page="construction-marketing"] .flow-list {
grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}
main#construction-marketing[data-page="construction-marketing"] .flat-item,
main#construction-marketing[data-page="construction-marketing"] .work-item,
main#construction-marketing[data-page="construction-marketing"] .alternative-item,
main#construction-marketing[data-page="construction-marketing"] .flow-item {
padding-top: 18px;
}
main#construction-marketing[data-page="construction-marketing"] .case-item {
padding: 24px;
}
main#construction-marketing[data-page="construction-marketing"] .section-note,
main#construction-marketing[data-page="construction-marketing"] .plan-terms {
margin-top: 32px;
    padding-top: 20px;
}
main#construction-marketing[data-page="construction-marketing"] .plan-item {
min-height: 0;
    padding: 20px 0;
}
main#construction-marketing[data-page="construction-marketing"] .plan-summary strong {
font-size: 28px;
}
main#construction-marketing[data-page="construction-marketing"] .faq-list summary {
padding: 19px 42px 19px 0;
    font-size: 17px;
}
main#construction-marketing[data-page="construction-marketing"] .faq-list summary::after {
top: 25px;
}
main#construction-marketing[data-page="construction-marketing"] .faq-list details[open] summary::after {
top: 30px;
}
main#construction-marketing[data-page="construction-marketing"] .faq-list details p {
padding: 0 24px 22px 0;
}
}
@media (prefers-reduced-motion: reduce) {
main#construction-marketing[data-page="construction-marketing"] {
scroll-behavior: auto;
}
main#construction-marketing[data-page="construction-marketing"],
main#construction-marketing[data-page="construction-marketing"] *,
main#construction-marketing[data-page="construction-marketing"] *::before,
main#construction-marketing[data-page="construction-marketing"] *::after {
animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
}
}
main#construction-marketing[data-page="construction-marketing"] {
--color-header-text: #222222;
  --color-hero-target-border: rgba(255, 255, 255, 0.55);
  --color-hero-target-surface: rgba(255, 255, 255, 0.06);
}
main#construction-marketing[data-page="construction-marketing"] .hero p {
font-size: 16px; max-width: 650px
}
main#construction-marketing[data-page="construction-marketing"] .hero__targets {
display: grid; grid-template-columns: repeat(3, max-content); gap: 8px; width: fit-content; max-width: 100%; margin: 0 0 24px; padding: 0; list-style: none; letter-spacing: 0
}
main#construction-marketing[data-page="construction-marketing"] .hero__target {
border: 1px solid var(--color-hero-target-border); border-radius: 4px; background: var(--color-hero-target-surface); padding: 6px 10px; color: var(--color-white); font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.6; text-align: center; white-space: nowrap
}
main#construction-marketing[data-page="construction-marketing"] .no-break {
white-space: nowrap
}
main#construction-marketing[data-page="construction-marketing"] .rationale-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px
}
main#construction-marketing[data-page="construction-marketing"] .rationale-grid h3 {
font-size: 23px
}
main#construction-marketing[data-page="construction-marketing"] .solution-list {
border-top: 1px solid var(--color-border)
}
main#construction-marketing[data-page="construction-marketing"] .solution-row {
display: grid; grid-template-columns: minmax(0, 0.9fr) 32px minmax(0, 1.6fr); align-items: start; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--color-border)
}
main#construction-marketing[data-page="construction-marketing"] .solution-row .solution-problem {
font-size: 21px; line-height: 1.65; margin: 0
}
main#construction-marketing[data-page="construction-marketing"] .solution-arrow {
font-size: 28px; line-height: 1.4; color: var(--color-navy)
}
main#construction-marketing[data-page="construction-marketing"] .solution-response h3 {
font-size: 25px; line-height: 1.5; margin-bottom: 16px
}
main#construction-marketing[data-page="construction-marketing"] .solution-response p {
font-size: 16px; line-height: 1.95
}
main#construction-marketing[data-page="construction-marketing"] .profession-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 42px
}
main#construction-marketing[data-page="construction-marketing"] .profession-grid h3 {
font-size: 21px
}
main#construction-marketing[data-page="construction-marketing"] .profession-grid p {
font-size: 15px
}
main#construction-marketing[data-page="construction-marketing"] .work-list {
border-top: 1px solid var(--color-border)
}
main#construction-marketing[data-page="construction-marketing"] .work-row {
display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.55fr) minmax(0, 1.05fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--color-border)
}
main#construction-marketing[data-page="construction-marketing"] .work-row h3 {
font-size: 22px
}
main#construction-marketing[data-page="construction-marketing"] .work-row p,
main#construction-marketing[data-page="construction-marketing"] .work-output {
font-size: 15px
}
main#construction-marketing[data-page="construction-marketing"] .work-output {
margin: 0; padding: 18px 20px; background: var(--color-neutral)
}
main#construction-marketing[data-page="construction-marketing"] .work-output dt {
font-weight: 700; margin-bottom: 8px
}
main#construction-marketing[data-page="construction-marketing"] .work-output dd {
margin: 0
}
main#construction-marketing[data-page="construction-marketing"] .role-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 38px
}
main#construction-marketing[data-page="construction-marketing"] .role-item {
border-top: 1px solid var(--color-border); padding-top: 22px
}
main#construction-marketing[data-page="construction-marketing"] .role-item h3 {
font-size: 24px; color: var(--color-white); margin-bottom: 14px
}
main#construction-marketing[data-page="construction-marketing"] .role-item p {
font-size: 15px
}
main#construction-marketing[data-page="construction-marketing"] .section--navy .section-lead {
max-width: 820px
}
main#construction-marketing[data-page="construction-marketing"] .fee-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px
}
main#construction-marketing[data-page="construction-marketing"] .fee-grid h3 {
font-size: 22px
}
main#construction-marketing[data-page="construction-marketing"] .fee-grid p {
font-size: 15px
}
main#construction-marketing[data-page="construction-marketing"] .flow-list {
counter-reset: process
}
main#construction-marketing[data-page="construction-marketing"] .flow-item::before {
counter-increment: process; content: counter(process, decimal-leading-zero); display: block; color: var(--color-navy); font-family: var(--font-display); font-size: 32px; line-height: 1.3; margin-bottom: 16px
}
main#construction-marketing[data-page="construction-marketing"] .flow-item h3 {
font-size: 19px
}
main#construction-marketing[data-page="construction-marketing"] .section-note {
font-size: 14px; line-height: 1.9
}
main#construction-marketing[data-page="construction-marketing"] .final-section .section-lead {
margin: 0 auto 30px
}
main#construction-marketing[data-page="construction-marketing"] .final-section .section-cta {
margin-top: 0
}
@media (max-width: 900px) {
main#construction-marketing[data-page="construction-marketing"] .hero__targets {
grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(360px, 100%); margin-bottom: 24px
}
main#construction-marketing[data-page="construction-marketing"] .hero__target {
padding: 6px; font-size: 13px
}
main#construction-marketing[data-page="construction-marketing"] .solution-row {
grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 0
}
main#construction-marketing[data-page="construction-marketing"] .solution-row .solution-problem {
font-size: 20px
}
main#construction-marketing[data-page="construction-marketing"] .solution-arrow {
justify-self: start; transform: rotate(90deg); line-height: 1
}
main#construction-marketing[data-page="construction-marketing"] .solution-response h3 {
font-size: 23px; margin-bottom: 12px
}
main#construction-marketing[data-page="construction-marketing"] .rationale-grid {
grid-template-columns: minmax(0, 1fr); gap: 28px
}
main#construction-marketing[data-page="construction-marketing"] .profession-grid,
main#construction-marketing[data-page="construction-marketing"] .role-grid,
main#construction-marketing[data-page="construction-marketing"] .fee-grid {
grid-template-columns: minmax(0, 1fr); gap: 28px
}
main#construction-marketing[data-page="construction-marketing"] .work-row {
grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 0
}
main#construction-marketing[data-page="construction-marketing"] .work-row h3 {
font-size: 23px
}
main#construction-marketing[data-page="construction-marketing"] .work-output {
padding: 16px 18px
}
main#construction-marketing[data-page="construction-marketing"] .profession-grid h3,
main#construction-marketing[data-page="construction-marketing"] .fee-grid h3 {
font-size: 22px
}
main#construction-marketing[data-page="construction-marketing"] .role-grid {
margin-top: 30px
}
main#construction-marketing[data-page="construction-marketing"] .role-item h3 {
font-size: 23px
}
main#construction-marketing[data-page="construction-marketing"] .hero {
background-position: 65% center
}
main#construction-marketing[data-page="construction-marketing"] .hero__content {
width: 100%
}
main#construction-marketing[data-page="construction-marketing"] .hero .button--primary,
main#construction-marketing[data-page="construction-marketing"] .section-cta .button--primary {
width: 100%; min-width: 0
}
main#construction-marketing[data-page="construction-marketing"] .section-note {
margin-top: 32px
}
}
main#construction-marketing[data-page="construction-marketing"] {
--color-photo-overlay-start: rgba(16,44,58,.96);
  --color-photo-overlay-middle: rgba(16,44,58,.80);
  --color-photo-overlay-end: rgba(16,44,58,.16);
  --color-photo-overlay-mobile: rgba(16,44,58,.80);
  --color-subtle: #e9eeed;
}
main#construction-marketing[data-page="construction-marketing"] .hero {
position:relative; isolation:isolate; background-image:none
}
main#construction-marketing[data-page="construction-marketing"] .hero__photo {
position:absolute; inset:0; z-index:0
}
main#construction-marketing[data-page="construction-marketing"] .hero__photo img {
width:100%; height:100%; object-fit:cover; object-position:center
}
main#construction-marketing[data-page="construction-marketing"] .hero::before {
position:absolute; inset:0; z-index:1; content:""; background:linear-gradient(90deg,var(--color-photo-overlay-start) 0%,var(--color-photo-overlay-middle) 48%,var(--color-photo-overlay-end) 100%)
}
main#construction-marketing[data-page="construction-marketing"] .hero__inner {
position:relative; z-index:2
}
main#construction-marketing[data-page="construction-marketing"] .hero__content {
padding:60px 0 70px; width:min(730px,100%)
}
main#construction-marketing[data-page="construction-marketing"] .hero__targets {
grid-template-columns:repeat(2,minmax(0,1fr)); width:400px
}
main#construction-marketing[data-page="construction-marketing"] .hero h1 {
font-size:46px; line-height:1.5; margin-bottom:24px; letter-spacing:0
}
main#construction-marketing[data-page="construction-marketing"] .hero p {
max-width:650px; font-size:16px
}
main#construction-marketing[data-page="construction-marketing"] .hero .section-cta {
justify-content:flex-start; margin:0
}
main#construction-marketing[data-page="construction-marketing"] .hero p.hero__image-note {
position:absolute; right:24px; bottom:10px; z-index:3; margin:0; font-size:11px; line-height:1.5; text-align:right
}
main#construction-marketing[data-page="construction-marketing"] .problem-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 56px
}
main#construction-marketing[data-page="construction-marketing"] .problem-grid h3 {
font-size:23px; text-wrap:initial; max-width:460px
}
main#construction-marketing[data-page="construction-marketing"] .problem-grid p {
font-size:16px; max-width:500px
}
main#construction-marketing[data-page="construction-marketing"] .section h2 {
font-size:34px; line-height:1.55; letter-spacing:0
}
main#construction-marketing[data-page="construction-marketing"] .solution-row {
grid-template-columns:minmax(0,.85fr) 28px minmax(0,1.8fr); gap:30px; padding:30px 0
}
main#construction-marketing[data-page="construction-marketing"] .solution-row .solution-problem {
font-size:21px; font-family:var(--font-display); color:var(--color-navy)
}
main#construction-marketing[data-page="construction-marketing"] .solution-response h3 {
font-size:24px; text-wrap:initial
}
main#construction-marketing[data-page="construction-marketing"] .solution-response p {
font-size:16px; line-height:1.95
}
main#construction-marketing[data-page="construction-marketing"] .outcome-flow {
margin-top:38px
}
main#construction-marketing[data-page="construction-marketing"] .outcome-label {
font-weight:600; font-size:16px; text-align:center; margin-bottom:22px
}
main#construction-marketing[data-page="construction-marketing"] .outcome-steps {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; border:1px solid var(--color-border); background:var(--color-white)
}
main#construction-marketing[data-page="construction-marketing"] .outcome-steps li {
position:relative; padding:18px 12px; text-align:center; font-weight:600
}
main#construction-marketing[data-page="construction-marketing"] .outcome-steps li+li {
border-left:1px solid var(--color-border)
}
main#construction-marketing[data-page="construction-marketing"] .fineprint {
font-size:13px; color:var(--color-muted); margin-top:14px; text-align:center
}
main#construction-marketing[data-page="construction-marketing"] .example-grid {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 56px
}
main#construction-marketing[data-page="construction-marketing"] .example-item {
padding-top:22px; border-top:1px solid var(--color-navy); min-width:0
}
main#construction-marketing[data-page="construction-marketing"] .example-item h3 {
font-size:25px; margin-bottom:18px
}
main#construction-marketing[data-page="construction-marketing"] .example-item p {
font-size:16px; line-height:1.9
}
main#construction-marketing[data-page="construction-marketing"] .example-item .example-question {
font-weight:600; margin-bottom:14px
}
main#construction-marketing[data-page="construction-marketing"] .criteria {
display:flex; flex-wrap:wrap; gap:4px 16px; margin:20px 0 0; padding-top:14px; border-top:1px solid var(--color-border); font-size:13px
}
main#construction-marketing[data-page="construction-marketing"] .criteria dt {
font-weight:600; color:var(--color-muted)
}
main#construction-marketing[data-page="construction-marketing"] .criteria dd {
margin:0
}
main#construction-marketing[data-page="construction-marketing"] .work-intro {
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:56px; margin:10px 0 48px
}
main#construction-marketing[data-page="construction-marketing"] .work-intro figure {
margin:0; min-width:0
}
main#construction-marketing[data-page="construction-marketing"] .work-intro img {
aspect-ratio:1.62; width:100%; object-fit:cover
}
main#construction-marketing[data-page="construction-marketing"] .work-intro figcaption {
font-size:11px; color:var(--color-muted); margin-top:6px; line-height:1.5
}
main#construction-marketing[data-page="construction-marketing"] .work-intro h3 {
font-size:28px; margin-bottom:20px; text-wrap:initial
}
main#construction-marketing[data-page="construction-marketing"] .work-intro p {
font-size:16px
}
main#construction-marketing[data-page="construction-marketing"] .project-criteria {
margin:24px 0 0; border-top:1px solid var(--color-border)
}
main#construction-marketing[data-page="construction-marketing"] .project-criteria div {
display:grid; grid-template-columns:64px minmax(0,1fr); padding:8px 0; border-bottom:1px solid var(--color-border); font-size:14px
}
main#construction-marketing[data-page="construction-marketing"] .project-criteria dt {
color:var(--color-muted)
}
main#construction-marketing[data-page="construction-marketing"] .project-criteria dd {
margin:0
}
main#construction-marketing[data-page="construction-marketing"] .work-row {
grid-template-columns:minmax(0,.95fr) minmax(0,1.5fr) minmax(0,1.05fr); gap:30px
}
main#construction-marketing[data-page="construction-marketing"] .work-row h3 {
font-size:22px; text-wrap:initial
}
main#construction-marketing[data-page="construction-marketing"] .work-row p,
main#construction-marketing[data-page="construction-marketing"] .work-output {
font-size:15px
}
main#construction-marketing[data-page="construction-marketing"] .faq-list {
max-width:800px; margin-inline:auto
}
main#construction-marketing[data-page="construction-marketing"] .faq-list summary {
font-size:16px; line-height:1.8
}
main#construction-marketing[data-page="construction-marketing"] a:active {
filter:brightness(.9)
}
main#construction-marketing[data-page="construction-marketing"] summary:active {
opacity:.75
}
main#construction-marketing[data-page="construction-marketing"] .hero a:focus-visible,
main#construction-marketing[data-page="construction-marketing"] .section--navy a:focus-visible {
outline-color:var(--color-white)
}
@media(max-width:900px) {
main#construction-marketing[data-page="construction-marketing"] .hero,
main#construction-marketing[data-page="construction-marketing"] .hero__inner {
min-height:530px
}
main#construction-marketing[data-page="construction-marketing"] .hero::before {
background:var(--color-photo-overlay-mobile)
}
main#construction-marketing[data-page="construction-marketing"] .hero__photo img {
object-position:94% center
}
main#construction-marketing[data-page="construction-marketing"] .hero__content {
padding:42px 0 52px; width:100%
}
main#construction-marketing[data-page="construction-marketing"] .hero h1 {
font-size:32px; line-height:1.5; margin-bottom:24px
}
main#construction-marketing[data-page="construction-marketing"] .hero__targets {
width:100%; max-width:360px; margin-bottom:22px; gap:7px
}
main#construction-marketing[data-page="construction-marketing"] .hero__target {
font-size:13px; padding:5px 7px; white-space:normal
}
main#construction-marketing[data-page="construction-marketing"] .hero p {
font-size:16px; line-height:1.9; margin-bottom:26px
}
main#construction-marketing[data-page="construction-marketing"] .hero p.hero__image-note {
right:20px; bottom:10px; font-size:10px
}
main#construction-marketing[data-page="construction-marketing"] .section h2 {
font-size:26px; line-height:1.55
}
main#construction-marketing[data-page="construction-marketing"] .problem-grid,
main#construction-marketing[data-page="construction-marketing"] .example-grid,
main#construction-marketing[data-page="construction-marketing"] .work-intro {
grid-template-columns:minmax(0,1fr); gap:30px
}
main#construction-marketing[data-page="construction-marketing"] .problem-grid h3 {
font-size:22px
}
main#construction-marketing[data-page="construction-marketing"] .solution-row {
grid-template-columns:minmax(0,1fr); gap:14px; padding:28px 0
}
main#construction-marketing[data-page="construction-marketing"] .solution-row .solution-problem {
font-size:19px; font-family:var(--font-body); font-weight:500
}
main#construction-marketing[data-page="construction-marketing"] .solution-response h3 {
font-size:23px; line-height:1.55
}
main#construction-marketing[data-page="construction-marketing"] .solution-arrow {
font-size:24px
}
main#construction-marketing[data-page="construction-marketing"] .outcome-flow {
margin-top:28px
}
main#construction-marketing[data-page="construction-marketing"] .outcome-label {
text-align:left
}
main#construction-marketing[data-page="construction-marketing"] .outcome-steps {
grid-template-columns:repeat(2,minmax(0,1fr))
}
main#construction-marketing[data-page="construction-marketing"] .outcome-steps li {
font-size:14px; padding:14px 8px
}
main#construction-marketing[data-page="construction-marketing"] .outcome-steps li:nth-child(3) {
border-left:0
}
main#construction-marketing[data-page="construction-marketing"] .outcome-steps li:nth-child(n+3) {
border-top:1px solid var(--color-border)
}
main#construction-marketing[data-page="construction-marketing"] .fineprint {
text-align:left; font-size:13px
}
main#construction-marketing[data-page="construction-marketing"] .example-item {
padding-top:20px
}
main#construction-marketing[data-page="construction-marketing"] .example-item h3 {
font-size:24px
}
main#construction-marketing[data-page="construction-marketing"] .criteria {
font-size:13px; gap:4px 12px
}
main#construction-marketing[data-page="construction-marketing"] .work-intro {
margin:0 0 32px; gap:26px
}
main#construction-marketing[data-page="construction-marketing"] .work-intro h3 {
font-size:25px; margin-bottom:14px
}
main#construction-marketing[data-page="construction-marketing"] .work-intro img {
aspect-ratio:1.5
}
main#construction-marketing[data-page="construction-marketing"] .work-row {
grid-template-columns:minmax(0,1fr); gap:14px
}
main#construction-marketing[data-page="construction-marketing"] .work-row h3 {
font-size:23px
}
main#construction-marketing[data-page="construction-marketing"] .work-row p,
main#construction-marketing[data-page="construction-marketing"] .work-output {
font-size:16px
}
main#construction-marketing[data-page="construction-marketing"] .work-output {
padding:16px 18px
}
main#construction-marketing[data-page="construction-marketing"] .section-note {
font-size:13px
}
}
@media(min-width:600px) and (max-width:900px) {
main#construction-marketing[data-page="construction-marketing"] .hero__content {
max-width:620px
}
main#construction-marketing[data-page="construction-marketing"] .hero__targets {
width:400px
}
main#construction-marketing[data-page="construction-marketing"] .hero h1 {
font-size:42px
}
main#construction-marketing[data-page="construction-marketing"] .problem-grid,
main#construction-marketing[data-page="construction-marketing"] .example-grid {
grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px
}
main#construction-marketing[data-page="construction-marketing"] .work-intro {
grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px
}
}
@media(prefers-reduced-motion:reduce) {
main#construction-marketing[data-page="construction-marketing"] {
scroll-behavior:auto
}
}
main#construction-marketing[data-page="construction-marketing"] { --font-display: var(--lv-font-display, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif); --font-body: var(--lv-font-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif); }
main#construction-marketing[data-page="construction-marketing"] .faq-list summary::before { content: none; display: none; }