/* The service pages (/website-design/, /ai-solutions/, /seo/, /lancaster-pa-web-design/).
   They load the site's own stylesheet first (header, footer, buttons, FAQ, steps, colours, type) and
   borrow the homepage's rhythm: copy in one column, a pixel picture in the other, swapping sides from
   section to section, on alternating paper and fog. This file only adds what those pages need.
   No 3D and no scroll effects, so they open instantly. */

.page { padding-top: var(--nav-h); }
.nav { background: rgba(var(--paper-rgb, 255, 255, 255), .82); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.nav-links a[aria-current="page"], .menu a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 8px; }

/* ---------- sections: the homepage's scenes, flattened ---------- */
.ps { position: relative; padding: clamp(80px, 10vw, 150px) 0; }
.ps--fog { background: var(--fog); }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.ps-grid--flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ps-grid--flip > .px { order: -1; }
.ps-grid--top { align-items: start; }
.ps-grid--top > .px { position: sticky; top: calc(var(--nav-h) + 8vh); }
.ps h2 { font-size: clamp(36px, 4.2vw, 62px); max-width: 15ch; }
.ps h2 + .lead { margin-top: 20px; }
.ps-narrow { max-width: 780px; }

/* the pixel pictures (shared/pages.js draws them) */
.px { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.px canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- hero ---------- */
.ph { padding: clamp(28px, 4vw, 56px) 0 clamp(72px, 9vw, 130px); }
.crumbs { margin-bottom: clamp(40px, 6vw, 84px); font-size: 15px; color: var(--slate); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .45; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.ph h1 { font-size: clamp(46px, 5.6vw, 88px); max-width: 13ch; }
.ph .lead { margin-top: 26px; max-width: 31em; }
.ph .actions { margin-top: 36px; }
.ph .px { max-width: 560px; }

/* three plain facts under the hero's buttons, divided like the homepage's lists */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 52px 0 0; padding: 0; list-style: none; max-width: 700px; border-top: 1px solid var(--line); }
.facts li { padding: 18px 18px 0 0; }
.facts li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.facts b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.facts span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--slate); }

/* ---------- lists: hairline rows, like the homepage's services ---------- */
.rows { list-style: none; margin: 40px 0 0; padding: 0; }
.rows li { padding: 26px 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows h3 { font-size: 23px; letter-spacing: -.02em; }
.rows p { margin-top: 8px; color: var(--slate); max-width: 36em; }
.rows a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }
.rows--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
.rows--two li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }

/* yes / no: where something helps, and where it doesn't */
.verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 48px; }
.verdict h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.verdict h3 i { width: 14px; height: 14px; border-radius: 4px; background: var(--ink); }
.verdict .no h3 { border-bottom-color: var(--line); color: var(--slate); }
.verdict .no h3 i { background: transparent; box-shadow: inset 0 0 0 2px var(--slate); }
.verdict ul { list-style: none; margin: 0; padding: 0; }
.verdict li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--slate); }
.verdict li b { color: var(--ink); font-weight: 650; }

.prose { max-width: 38em; }
.prose p { color: var(--slate); }
.prose p + p { margin-top: 18px; }
.prose b { color: var(--ink); font-weight: 650; }
.ps h2 + .prose { margin-top: 24px; }
.text-link + .text-link { margin-left: 0; }

/* two halves side by side (new site / redesign) */
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.halves h3 { font-size: 26px; letter-spacing: -.02em; }
.halves p { margin-top: 12px; color: var(--slate); }

/* ---------- our work: real browser windows; hover to scroll the whole site ---------- */
.sites { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin: 56px 0 0; padding: 0; list-style: none; }
.sites li { grid-column: span 2; }
.sites li:nth-child(-n+2) { grid-column: span 3; }
.site { margin: 0; }
.site-win { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(30, 27, 70, .45); overflow: hidden; outline-offset: 4px; }
.site-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.site-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.site-bar span { margin-left: 10px; font-size: 12px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; }
.site-view img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(0); transition: transform 1.2s var(--ease); }
.site-win:hover .site-view img, .site-win:focus-visible .site-view img { transform: translateY(calc(-1 * (var(--r) * 100cqw - 62.5cqw))); transition-duration: var(--d, 6s); transition-timing-function: cubic-bezier(.45, 0, .55, 1); }
.site figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; }
.site figcaption b { font-size: 18px; letter-spacing: -.01em; }
.site figcaption span { font-size: 15px; color: var(--slate); }
.sites-note { margin-top: 28px; font-size: 15px; color: var(--slate); }
@media (hover: none) { .sites-note { display: none; } }

/* ---------- the call to action: the homepage's contact scene, pointing at its form ---------- */
.pcta .lead { max-width: 28em; }
.pcta .actions { margin-top: 34px; }
.related { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--line); }
.related a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 20px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.related b { font-size: 19px; letter-spacing: -.01em; transition: color .2s; }
.related span { grid-column: 1; font-size: 15px; color: var(--slate); }
.related svg { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; color: var(--hi-text, var(--signal)); transition: transform .25s var(--ease); }
.related a:hover b { color: var(--signal); }
.related a:hover svg { transform: translateX(4px); }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .sites li, .sites li:nth-child(-n+2) { grid-column: span 3; }
  .sites li:last-child:nth-child(odd) { grid-column: 2 / span 4; }
}
@media (max-width: 860px) {
  .ps-grid, .ps-grid--flip { grid-template-columns: 1fr; gap: 28px; }
  .ps-grid > .px, .ps-grid--flip > .px { order: -1; position: relative; top: 0; max-width: 280px; justify-self: start; }
  .ph .ps-grid > .px { order: 2; }
  .crumbs { margin-bottom: 32px; }
  .rows--two, .verdict, .halves { grid-template-columns: 1fr; }
  .rows--two li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .facts { margin-top: 36px; }
  .facts li { padding: 14px 10px 0 0; }
  .facts li + li { padding-left: 10px; }
  .facts b { font-size: 16px; }
  .facts span { font-size: 13px; }
  .ph .px { max-width: 260px; justify-self: center; margin-top: 8px; }
  .sites { grid-template-columns: 1fr; }
  .sites li, .sites li:nth-child(-n+2), .sites li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .site-view img { transition: none !important; }
}