/* Shared layout and interaction refinements across the public website. */
.section { padding-block: 80px; }
.section-heading h2, .photo-work-head h2 { font-size: 52px; line-height: 1.12; }
.section-intro, .service-panel-copy > p:not(.eyebrow), .about-copy > p, .work-caption p,
.capability-row p, .process-list p, .service-proof-head > p, .service-process-copy > p,
.service-capabilities-head > p, .service-cta p, .form-step > p { font-size: 16px; line-height: 1.7; }
.desktop-nav a { font-size: 14px; }
.work-card { flex-basis: 55%; }
.work-media { aspect-ratio: 16/10; }
.work-caption h3 { font-size: 28px; }
.work-tabs button { font-size: 13px; min-height: 44px; }
.photo-work { padding-block: 80px; }
.photo-marquee { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; margin-top: 20px; padding-bottom: 14px; }
.photo-track { animation: none; transform: none; will-change: auto; }
.photo-sequence { padding-inline: var(--pad); }
.photo-frame { height: 420px; scroll-snap-align: center; }
.photo-frame.wide { width: 630px; }.photo-frame.square { width: 420px; }.photo-frame.portrait { width: 395px; }
.gallery-controls { display: flex; gap: 8px; justify-content: end; padding-inline: var(--pad); margin-top: 24px; }
.photo-enlarge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: zoom-in; background: transparent; color: white; border: 0; }
.photo-enlarge svg { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; padding: 9px; background: #111c; border-radius: 50%; }
.media-viewer { margin: auto; width: min(1200px,94vw); max-height: 94dvh; padding: 24px; background: #101415; color: var(--text); border: 1px solid var(--line); border-radius: 4px; }
.media-viewer::backdrop { background: #000d; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.viewer-toolbar > span { font-size: 18px; }
.viewer-content > img { width: 100%; height: auto; max-height: 68dvh; object-fit: contain; display: block; }
.viewer-content .text-link { color: var(--gold); }
.project-detail-copy { margin: 18px 0 8px; font-size: 16px; }
.viewer-navigation { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 16px; }
.viewer-navigation[hidden] { display: none; }
.brief-modes { display: flex; gap: 2px; background: #dde3dd; padding: 4px; margin-bottom: 26px; border-radius: 5px; }
.brief-modes button { flex: 1; padding: 12px; min-height: 46px; font: inherit; font-size: 14px; border: 0; border-radius: 3px; background: transparent; color: #24302c; cursor: pointer; }
.brief-modes button[aria-pressed="true"] { background: #17201e; color: white; }
.field input, .field select, .field textarea { font-size: 16px; }
.field label { font-size: 14px; }
.service-images img[data-visual="website"] { object-fit: contain; object-position: top; background: #171c1d; }
.service-hero { min-height: min(840px,92svh); }
.service-hero h1 { font-size: 82px; max-width: 16ch; line-height: 1.04; }
.service-hero-intro { font-size: 18px; }
.service-overview h2, .service-process-copy h2 { max-width: 16ch; font-size: 48px; }
.website-proof .proof-item { grid-column: span 6; min-height: 0; aspect-ratio: 1.25; }
.website-proof .proof-item img { object-fit: contain; object-position: top; height: calc(100% - 74px); }
.website-proof .proof-item::after { display: none; }
.website-proof .proof-caption { inset: auto 20px 16px; }
.website-proof .proof-caption span { font-size: 12px; }
.service-proof video { object-fit: contain; position: relative; z-index: 2; }
.service-proof .proof-item:has(video)::after, .service-proof .proof-item:has(video) .proof-caption { display: none; }
.video-toggle { position: absolute; right: var(--pad); bottom: 24px; z-index: 3; gap: 10px; background: #101415e6; color: white; }
.video-toggle svg { width: 20px; }
@media (max-width:380px) { .service-body .service-hero h1 { font-size: 38px; } }
@media (max-width:900px) {
  .service-hero h1 { font-size: 64px; }
  .service-body .client-button span { display: inline; }
  .work-card { flex-basis: 76%; }
  .project-portal-intro { padding-block: 26px; }
  .project-portal-intro h2 { font-size: 32px; }
  .project-portal-intro h2 br { display: none; }
  .project-portal-intro > p:not(.eyebrow) { margin-top: 12px; font-size: 14px; }
}
@media (max-width:620px) {
  .section { padding-block: 56px; }
  .section-heading h2, .photo-work-head h2 { font-size: 34px; }
  .hero-image { top: 65px; height: 410px; object-position: 75% top; }
  .work-card { flex-basis: 90%; }
  .work-caption p { font-size: 14px; }
  .work-tabs button { font-size: 12px; }
  .photo-frame { min-height: 0; height: 360px; }
  .photo-frame.wide, .photo-frame.square, .photo-frame.portrait { width: 84vw; }
  .photo-work { padding-block: 56px; }
  .service-hero { min-height: 640px; padding-bottom: 84px; }
  .service-hero h1 { font-size: 46px; overflow-wrap: normal; }
  .service-hero-intro { font-size: 16px; }
  .service-overview h2, .service-process-copy h2 { font-size: 36px; }
  .service-body .header-actions { gap: 8px; }
  .service-body .client-button { padding-inline: 12px; font-size: 12px; }
  .website-proof .proof-item { grid-column: 1; aspect-ratio: 1.1; min-height: 0; }
  .project-portal-intro { padding: 20px 22px; }
  .project-portal-intro .eyebrow { display: none; }
  .project-portal-intro h2 { font-size: 28px; margin-top: 0; }
  .project-dialog .form-shell { min-height: auto; }
  .media-viewer { padding: 16px; }
  .viewer-toolbar > span { font-size: 16px; }
}