/* A quieter reading rhythm for the homepage and national service pages. */
.clear-page { line-height: 1.55; }
.clear-wrap { width: min(100% - 2 * var(--pad), 1240px); margin-inline: auto; }
.clear-page h1, .clear-page h2, .clear-page h3 { text-wrap: balance; }
.clear-page h1 { margin: 0; font-size: clamp(3rem, 5.1vw, 5rem); line-height: 1.04; letter-spacing: -.065em; }
.clear-page h1 em, .clear-page h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.clear-page h1 em { display: block; }
.clear-page h2 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.12; letter-spacing: -.05em; }
.clear-page h3 { margin: 0; font-size: 1.4rem; line-height: 1.25; letter-spacing: -.035em; }
.clear-page p { color: #4d4e47; }
.clear-page .button { font-size: .94rem; min-height: 3.7rem; min-width: 0; max-width: 100%; gap: 1.2rem; }
.clear-page .button > span { min-width: 0; }
.clear-page .button > i { flex-shrink: 0; }
.clear-page a:focus-visible, .clear-page summary:focus-visible, .clear-page button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.clear-eyebrow { margin: 0 0 1.25rem; color: #55584a !important; font-size: .76rem; font-weight: 600; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
.clear-hero { padding-top: 10rem; padding-bottom: 4.5rem; }
.clear-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.clear-intro { max-width: 41rem; margin: 1.7rem 0 2rem; font-size: clamp(1.07rem, 1.35vw, 1.22rem); line-height: 1.7; }
.clear-hero-actions { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.clear-link { display: inline; font-size: .94rem; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.clear-link:hover { color: var(--blue); }
.clear-hero-footnote { margin: 1.4rem 0 0; font-size: .85rem; }
.clear-hero-photo { display: block; margin: 0; position: relative; padding: 1.25rem; border: 1px solid var(--line); background: #e5e8da; border-radius: 1rem; }
.clear-screen { height: 28rem; overflow: hidden; border: 1px solid #d1d3c7; background: white; border-radius: .45rem; }
.clear-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.clear-hero-photo figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; color: #3e4136; font-size: .8rem; }
.clear-hero-photo figcaption strong { display: block; color: var(--ink); font-size: 1rem; }
.clear-platforms { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; padding-top: 2.5rem; margin-top: 3rem; border-top: 1px solid var(--line); font-size: .86rem; }
.clear-platforms > span { margin-right: auto; color: #55584f; }
.clear-platforms strong { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.clear-platforms img { width: 1.3rem; height: 1.3rem; object-fit: contain; }
.clear-platforms .clear-woo { width: 2rem; }
.clear-section { padding-top: 5.8rem; padding-bottom: 5.8rem; }
.clear-section-head { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: clamp(2rem, 6vw, 6rem); margin-bottom: 2.8rem; }
.clear-section-head > p { max-width: 31rem; margin: 0; font-size: 1.03rem; line-height: 1.7; }
.clear-services { border-top: 1px solid var(--line); }
.clear-service-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.15fr) 2rem; align-items: center; gap: 1.2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); transition: color .2s; }
.clear-service-row:hover h3, .clear-service-row:hover > i { color: var(--blue); }
.clear-number { align-self: start; color: #74776b; font-size: .78rem; font-variant-numeric: tabular-nums; }
.clear-service-row h3 { max-width: 23rem; }
.clear-service-row p { max-width: 33rem; margin: 0; font-size: 1rem; line-height: 1.65; }
.clear-service-row > i { font-size: 1.6rem; font-style: normal; text-align: right; }
.clear-small { font-size: .88rem; line-height: 1.65; }
.clear-service-context { max-width: 51rem; margin: 1.8rem 0 0 3.7rem; }
.clear-band { background: #e7e8df; }
.clear-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.clear-project { min-width: 0; display: block; }
.clear-project-image { aspect-ratio: 4 / 3; overflow: hidden; background: #deded5; border-radius: .65rem; }
.clear-project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.clear-project:hover .clear-project-image img { transform: scale(1.025); }
.clear-project > span { display: block; margin: 1.25rem 0 .6rem; color: #55584f; font-size: .73rem; }
.clear-project h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.clear-project h3 i { font-weight: 400; font-style: normal; }
.clear-project p { margin: .7rem 0 1rem; font-size: .95rem; line-height: 1.65; }
.clear-project > strong { display: inline-block; font-size: .86rem; font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: .2rem; }
.clear-projects-footer { margin: 2.4rem 0 0; }
.clear-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.clear-steps li { counter-increment: steps; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.clear-steps li::before { content: "0" counter(steps); display: block; margin-bottom: 1.8rem; color: #5a6050; font-size: .8rem; }
.clear-steps h3 { font-size: 1.3rem; }
.clear-steps p { margin: .9rem 0 0; font-size: .99rem; line-height: 1.75; }
.clear-about-line { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; margin-top: 3.5rem; padding: 2rem 0 0; border-top: 1px solid var(--line); }
.clear-about-line p { max-width: 49rem; margin: 0; font-size: .98rem; line-height: 1.7; }
.clear-faq { display: grid; grid-template-columns: .85fr 1.3fr; gap: clamp(2rem, 6vw, 7rem); }
.clear-faq details { border-top: 1px solid var(--line); }
.clear-faq details:last-child { border-bottom: 1px solid var(--line); }
.clear-faq summary { display: flex; justify-content: space-between; gap: 1.5rem; cursor: pointer; padding: 1.3rem 0; font-size: 1rem; font-weight: 600; line-height: 1.5; list-style: none; }
.clear-faq summary::-webkit-details-marker { display: none; }
.clear-faq summary span { flex-shrink: 0; font-size: 1.25rem; font-weight: 400; }
.clear-faq details[open] summary span { transform: rotate(45deg); }
.clear-faq details p { margin: 0; padding: 0 2rem 1.5rem 0; font-size: .98rem; line-height: 1.8; }
.clear-contact { background: #dce5c6; padding: 5.5rem 0; }
.clear-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); scroll-margin-top: 7rem; }
.clear-contact h2 { max-width: 30rem; }
.clear-contact-grid > div > p:not(.clear-eyebrow) { max-width: 30rem; margin-top: 1.5rem; line-height: 1.75; }
.clear-contact-email { display: inline-block; margin-top: .8rem; font-size: 1.2rem; text-decoration: underline; text-underline-offset: .25em; }
.clear-form { padding: 1.5rem 1.8rem 1.8rem; background: var(--paper); border: 1px solid rgba(17,18,15,.12); border-radius: .8rem; }
.clear-form .lead-form { padding-top: 0; }
.clear-form .lead-form label > span { font-size: .8rem; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.clear-form .lead-form input:not([type=checkbox]), .clear-form .lead-form select, .clear-form .lead-form textarea { font-size: 1rem; }
.clear-form .lead-form-confirm span { font-size: .78rem !important; }
.clear-form .lead-form-submit { flex-direction: column; align-items: stretch; gap: 1rem; }
.clear-form .lead-form-submit p { font-size: .8rem; line-height: 1.55; }
.clear-form .lead-form-submit .button { width: 100%; }
.clear-breadcrumb { display: flex; flex-wrap: wrap; gap: .6rem; margin: -1rem 0 2.6rem; color: #64665b; font-size: .8rem; }
.clear-breadcrumb a { text-decoration: underline; text-underline-offset: .2em; }
.clear-service .clear-hero { padding-bottom: 0; }
.clear-note { border-top: 3px solid var(--signal); background: #e8eade; padding: 2rem; border-radius: 0 0 .7rem .7rem; }
.clear-note > span { display: block; color: #5d6350; font-size: .78rem; margin-bottom: 1.5rem; }
.clear-note h2 { font-size: 1.8rem; line-height: 1.2; letter-spacing: -.04em; }
.clear-note p { margin-bottom: 0; font-size: 1rem; line-height: 1.7; }
.clear-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 2rem 0; margin: 3.5rem 0 0; border-block: 1px solid var(--line); }
.clear-facts dt { color: #5d6350; font-size: .8rem; margin-bottom: .5rem; }
.clear-facts dd { margin: 0; font-size: .96rem; }
.clear-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; }
.clear-scope article { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.clear-scope article p { font-size: 1rem; line-height: 1.75; }
.clear-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 7rem); padding-block: 5rem; }
.clear-detail > div > p { line-height: 1.8; }
.clear-list { margin: 0; padding: 0; list-style: none; }
.clear-list li { position: relative; padding: 0 0 1.15rem 1.5rem; font-size: .98rem; line-height: 1.75; }
.clear-list li::before { content: "✓"; position: absolute; left: 0; top: 0; }
.clear-detail-note { padding-top: 1.2rem; margin-bottom: 0; border-top: 1px solid var(--line); font-size: .9rem; }
.clear-source { font-size: .85rem; }
.clear-source a { text-decoration: underline; text-underline-offset: .2em; }
.clear-bordered { border-block: 1px solid var(--line); }
.clear-investment { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.clear-investment h3 { font-size: 1.6rem; }
.clear-investment p { margin: 0 0 1rem; line-height: 1.8; font-size: .98rem; }
.clear-local { margin: 2rem 0 0; font-size: .92rem; }
.clear-migration .clear-note { background: #e3e7ee; border-color: #bccbe5; }
.clear-page .site-footer { font-size: .9rem; }
.clear-page .site-footer > div:not(.footer-brand) { font-size: .88rem; }
.clear-page .footer-brand p { font-size: .85rem; line-height: 1.65; }
.clear-page .reveal { opacity: 1; transform: none; }
@media (max-width: 1100px) {
  .clear-hero-grid { grid-template-columns: 1.2fr .8fr; gap: 2.5rem; }
  .clear-screen { height: 24rem; }
  .clear-contact-grid { grid-template-columns: .8fr 1.2fr; gap: 2.5rem; }
}
@media (max-width: 800px) {
  .clear-hero { padding-top: 8rem; padding-bottom: 3rem; }
  .clear-hero-grid, .clear-contact-grid, .clear-section-head, .clear-faq, .clear-detail { grid-template-columns: 1fr; gap: 2rem; }
  .clear-home .clear-hero-grid { grid-template-columns: 1fr .7fr; gap: 2rem; }
  .clear-page h1 { font-size: 3.2rem; }
  .clear-screen { height: 21rem; }
  .clear-hero-photo { padding: .75rem; }
  .clear-hero-photo figcaption { flex-direction: column; gap: .25rem; }
  .clear-section { padding-block: 4rem; }
  .clear-service-row { grid-template-columns: 2rem 1fr 1.5rem; gap: 1rem; }
  .clear-service-row h3 { grid-column: 2; }
  .clear-service-row p { grid-column: 2; max-width: 100%; }
  .clear-service-row > i { grid-column: 3; grid-row: 1 / 3; }
  .clear-projects { gap: 1rem; }
  .clear-project > span { font-size: .69rem; }
  .clear-project h3 { font-size: 1.2rem; }
  .clear-about-line { grid-template-columns: 1fr; gap: 1.2rem; }
  .clear-detail { padding-block: 4rem; }
  .clear-scope { column-gap: 2rem; }
}
@media (max-width: 600px) {
  .clear-page h1 { font-size: clamp(2.65rem, 10.6vw, 3.6rem); line-height: 1.08; }
  .clear-home .clear-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .clear-hero { padding-top: 7.5rem; }
  .clear-intro { font-size: 1.05rem; margin-top: 1.3rem; }
  .clear-hero-photo { padding: 1rem; }
  .clear-screen { height: 17rem; }
  .clear-hero-photo figcaption { flex-direction: row; gap: 1rem; }
  .clear-platforms { gap: .8rem 1.15rem; padding-top: 1.5rem; margin-top: 2rem; }
  .clear-platforms > span { flex-basis: 100%; }
  .clear-platforms strong { font-size: .8rem; }
  .clear-eyebrow { font-size: .7rem; }
  .clear-section { padding-block: 3.6rem; }
  .clear-section-head { margin-bottom: 2rem; gap: 1.2rem; }
  .clear-service-row { padding-block: 1.6rem; gap: .7rem; grid-template-columns: 1.4rem 1fr 1.2rem; }
  .clear-service-row h3 { font-size: 1.3rem; }
  .clear-service-context { margin-left: 0; }
  .clear-projects, .clear-steps, .clear-scope, .clear-investment { grid-template-columns: 1fr; }
  .clear-projects { gap: 2.5rem; }
  .clear-project h3 { font-size: 1.5rem; }
  .clear-project > span { font-size: .77rem; }
  .clear-project p { margin-bottom: .75rem; }
  .clear-steps { gap: 2rem; }
  .clear-steps li::before { margin-bottom: 1rem; }
  .clear-facts { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.5rem; }
  .clear-facts > div { display: grid; grid-template-columns: 6rem 1fr; gap: .75rem; }
  .clear-facts dt { margin: 0; }
  .clear-contact { padding-block: 3.5rem; }
  .clear-form { padding: 1.25rem; }
  .clear-form .lead-form-grid { grid-template-columns: 1fr; }
  .clear-contact-grid { gap: 2rem; }
  .clear-note { padding: 1.5rem; }
  .clear-investment { gap: 1rem; margin-top: 2.5rem; }
  .clear-local .clear-link { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .clear-project-image img, .clear-page .button { transition: none; }
}