/* Page-specific additions to the shared Frankly design system. */
.presence-page { width: min(1180px, calc(100% - 48px)); }
.presence-page p { line-height: 1.65; }
.presence-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 700; }
.presence-nav a { padding: 6px 0; }
.presence-page a:focus-visible, .presence-page summary:focus-visible, .presence-page button:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.presence-page a:hover:not(.contact-button):not(.client-card) { text-decoration: underline; text-underline-offset: 4px; }
.presence-hero { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: clamp(28px, 5vw, 70px); padding: clamp(40px, 6vw, 78px) 0 0; }
.presence-hero h1 { font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: .98; }
.presence-hero h1 span { color: #b84c00; }
.presence-hero .section-kicker { color: #a34200; }
.presence-lede { max-width: 640px; font-size: 1.15rem; color: var(--muted); margin: 24px 0; }
.presence-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; }
.presence-page .contact-button { text-align: center; line-height: 1.4; font-size: .94rem; }
.presence-secondary { padding: 5px 0; font-weight: 800; text-decoration: underline; text-underline-offset: 5px; }
.presence-overview { background: var(--ink); color: white; padding: clamp(24px, 3vw, 38px); border-radius: 14px; border-top: 6px solid var(--accent); }
.presence-overview .section-kicker { color: #ffa05a; }
.presence-overview .presence-overview-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.25; margin: 22px 0; }
.presence-overview ul { list-style: none; padding: 0; margin: 0; }
.presence-overview li { padding: 15px 0; border-top: 1px solid #43556c; font-size: .95rem; line-height: 1.5; }
.presence-overview li span { color: #ffa05a; padding-right: 9px; font-size: .8rem; }
.presence-overview .presence-overview-note { color: #c7d1de; font-size: .85rem; margin: 16px 0 0; }
.presence-page .section-heading > p:not(.section-kicker), .presence-note { color: var(--muted); }
.presence-page .section-kicker { color: #a34200; }
.presence-page .why-frankly .section-kicker { color: #ffa05a; }
.presence-services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.presence-services .website-service { grid-column: span 2; }
.presence-services .website-service:last-child { grid-column: 1 / -1; min-height: auto; }
.service-number { display: block; color: #a34200; font-size: .78rem; font-weight: 800; margin-bottom: 18px; }
.presence-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.presence-package { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 10px; padding: 26px; background: white; }
.presence-package h3 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 3rem; font-weight: 400; margin: 0; }
.presence-package > p:not(.section-kicker) { color: var(--muted); margin: 12px 0 0; }
.presence-package ul { padding-left: 20px; line-height: 1.6; margin: 24px 0; flex: 1; }
.presence-package li + li { margin-top: 10px; }
.presence-note { font-size: .92rem; max-width: 920px; margin-top: 22px; }
.presence-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; counter-reset: steps; gap: 24px; padding: 0; }
.presence-process li { counter-increment: steps; border-top: 2px solid var(--line); padding-top: 20px; }
.presence-process li::before { content: '0' counter(steps); color: #a34200; font-weight: 800; }
.presence-process h3 { font-size: 1.12rem; margin: 16px 0 10px; }
.presence-process p { color: var(--muted); margin: 0; }
.presence-faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.presence-faq details:last-child { border-bottom: 1px solid var(--line); }
.presence-faq summary { cursor: pointer; font-weight: 800; line-height: 1.5; padding-right: 12px; }
.presence-faq details p { color: var(--muted); max-width: 850px; margin: 14px 0 0; }
.presence-review { border-top: 4px solid var(--accent); }
.presence-form-note { color: var(--muted); font-size: .85rem; margin: 0; }
.presence-form-note a { text-decoration: underline; }
.presence-page [id] { scroll-margin-top: 24px; }
.presence-skip { position: absolute; left: 12px; top: -100px; padding: 14px; background: var(--ink); color: white; z-index: 10; }
.presence-skip:focus { top: 12px; }
.presence-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .presence-hero { grid-template-columns: 1fr; }
  .presence-overview { max-width: 650px; }
  .presence-packages { grid-template-columns: 1fr; }
  .presence-package { padding: 24px; }
  .presence-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presence-services .website-service { grid-column: span 3; }
}
@media (max-width: 600px) {
  .presence-page { width: calc(100% - 32px); }
  .presence-nav { gap: 8px 20px; font-size: .85rem; }
  .presence-hero h1 { font-size: clamp(3.15rem, 12.5vw, 4.6rem); }
  .presence-hero { gap: 30px; }
  .presence-actions { gap: 18px; }
  .presence-actions .contact-button { width: 100%; }
  .presence-services { grid-template-columns: 1fr; }
  .presence-services .website-service { grid-column: 1; }
  .presence-process { grid-template-columns: 1fr; }
  .presence-page .support-form { grid-template-columns: 1fr; }
  .presence-page .why-frankly { grid-template-columns: 1fr; }
  .presence-page .why-list { grid-template-columns: 1fr; }
}
.presence-page .contact-button { white-space: normal; padding: 12px 18px; max-width: 100%; }
@media (max-width: 600px) {
  .presence-hero h1 { font-size: clamp(2.35rem, 10.2vw, 4.6rem); }
  .presence-page .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .presence-page .site-nav a + a { margin-left: 0; padding-left: 0; }
  .presence-page .site-nav a + a::before { display: none; }
  .presence-page .site-nav a.nav-pill { padding: 5px 12px; }
}
.presence-page .presence-overview .section-kicker { color: #ffa05a; }
/* Keep readable contrast on the shared orange button states. */
.presence-page .site-nav a.nav-pill,
.presence-page .site-nav a.nav-pill:hover,
.presence-page .site-nav a.nav-pill:focus-visible,
.presence-page .contact-button:hover { color: var(--ink); }